:root {
  --brand: #0b4ea2;
  --brand-d: #083a7a;
  --brand-l: #e3edf8;
  --brand-xl: #f0f5fc;
  --green: #2e7d32;
  --green-l: #e8f5e9;
  --amber: #f57f17;
  --amber-l: #fff8e1;
  --red: #e53935;
  --red-l: #ffebee;
  --purple: #7b1fa2;
  --purple-l: #f3e5f5;
  --teal: #00796b;
  --teal-l: #e0f2f1;
  --cyan: #0097a7;
  --cyan-l: #e0f7fa;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f1f5f9;
  --bg: #fff;
  --body-bg: #f4f6f9;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.1);
  --sidebar-w: 250px;
  --topbar-h: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--body-bg); color: var(--ink); display: flex; min-height: 100vh; font-size: 14px; line-height: 1.5; }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; }

/* ===== SIDEBAR ===== */
.sidebar { width: var(--sidebar-w); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; background: #fff; border-right: 1px solid var(--line); transition: transform .3s; }
.sidebar__brand { padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.sidebar__logo svg { width: 32px; height: 32px; }
.sidebar__brand-text { font-size: 15px; font-weight: 800; color: var(--brand); letter-spacing: -.3px; }
.sidebar__brand-text small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: .3px; text-transform: uppercase; }
.sidebar__nav { flex: 1; padding: 12px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sidebar__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; font-size: 13px; transition: all .15s; text-decoration: none; position: relative; }
.sidebar__item svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar__item:hover { background: var(--brand-l); color: var(--ink); text-decoration: none; }
.sidebar__item.active { background: var(--brand-l); color: var(--brand); font-weight: 600; }
.sidebar__item.active svg { color: var(--brand); }
.badge { font-style: normal; font-size: 10px; font-weight: 700; background: var(--brand); color: #fff; padding: 2px 7px; border-radius: 10px; margin-left: auto; }
.badge--gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.badge--orange { background: var(--amber); }
.sidebar__bottom { padding: 12px 14px; border-top: 1px solid var(--line); }
.sidebar__user { display: flex; align-items: center; gap: 10px; }
.sidebar__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #1c7fe0); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.sidebar__uinfo { min-width: 0; }
.sidebar__uname { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__urole { font-size: 11px; color: var(--muted); }

/* ===== MAIN ===== */
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { height: var(--topbar-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar__left { display: flex; align-items: center; gap: 12px; }
.topbar__title { font-weight: 700; font-size: 16px; }
.topbar__crumb { font-size: 11px; color: var(--muted); }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar__greeting { font-size: 13px; color: var(--muted); font-weight: 500; margin-right: 8px; }
.topbar__btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--muted); transition: all .15s; }
.topbar__btn svg { width: 16px; height: 16px; }
.topbar__btn:hover { background: var(--soft); color: var(--ink); }
.topbar__btn--danger:hover { background: var(--red-l); color: var(--red); }
.hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.hamburger svg { width: 20px; height: 20px; }

/* ===== CONTENT ===== */
.content { padding: 24px; flex: 1; }

/* ===== CARDS ===== */
.card { background: #fff; border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); border: 1px solid var(--line); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow-md); }
.card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card__title { font-weight: 700; font-size: 15px; }
.card__subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ===== STAT CARDS (hero) ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; transition: all .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card__icon svg { width: 22px; height: 22px; }
.stat-card__body { min-width: 0; }
.stat-card__value { font-size: 24px; font-weight: 800; line-height: 1.1; }
.stat-card__label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat-card__trend { font-size: 11px; font-weight: 600; margin-top: 4px; padding: 2px 8px; border-radius: 20px; display: inline-block; }
.stat-card__trend--up { background: var(--green-l); color: var(--green); }
.stat-card__trend--info { background: var(--brand-l); color: var(--brand); }

/* ===== PROGRESS RING ===== */
.progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring__circle { transition: stroke-dashoffset .6s ease; transform: rotate(-90deg); transform-origin: center; }
.progress-ring__text { position: absolute; font-weight: 800; font-size: 14px; color: var(--ink); }

/* ===== PROGRAM CARDS ===== */
.programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.program-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); transition: all .25s; }
.program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.program-card__top { padding: 20px 20px 0; display: flex; align-items: flex-start; gap: 14px; }
.program-card__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.program-card__icon svg { width: 24px; height: 24px; color: #fff; }
.program-card__info { flex: 1; min-width: 0; }
.program-card__name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.program-card__code { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .5px; }
.program-card__body { padding: 16px 20px 20px; }
.program-card__progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.program-card__progress-label { font-size: 12px; color: var(--muted); }
.program-card__progress-pct { font-size: 13px; font-weight: 700; }
.program-card__bar { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.program-card__bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
.program-card__meta { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.program-card__meta-item { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.program-card__meta-item svg { width: 14px; height: 14px; }
.program-card__status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-top: 12px; }
.status--active { background: var(--green-l); color: var(--green); }
.status--completed { background: var(--brand-l); color: var(--brand); }
.status--upcoming { background: var(--amber-l); color: var(--amber); }

/* ===== SCHEDULE ===== */
.schedule-list { display: flex; flex-direction: column; gap: 10px; }
.schedule-item { display: flex; align-items: stretch; gap: 14px; background: #fff; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); border: 1px solid var(--line); transition: all .15s; }
.schedule-item:hover { box-shadow: var(--shadow-md); }
.schedule-item__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding: 8px; border-radius: var(--radius-sm); background: var(--brand-l); }
.schedule-item__day { font-size: 22px; font-weight: 800; color: var(--brand); line-height: 1; }
.schedule-item__month { font-size: 10px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .5px; }
.schedule-item__dow { font-size: 9px; color: var(--muted); margin-top: 2px; }
.schedule-item__body { flex: 1; }
.schedule-item__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.schedule-item__details { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; }
.schedule-item__details svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.schedule-item__badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; align-self: center; white-space: nowrap; }

/* ===== CERTIFICATES ===== */
.cert-card { background: linear-gradient(135deg, #fafbff 0%, #f0f5fc 100%); border: 2px solid var(--brand-l); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; gap: 20px; transition: all .25s; }
.cert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.cert-card__medal { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.cert-card__medal svg { width: 32px; height: 32px; color: #fff; }
.cert-card__info { flex: 1; }
.cert-card__name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.cert-card__date { font-size: 12px; color: var(--muted); }
.cert-card__hours { font-size: 12px; color: var(--brand); font-weight: 600; margin-top: 4px; }
.cert-card__btn { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; transition: background .15s; }
.cert-card__btn:hover { background: var(--brand-d); }

/* ===== SURVEY ===== */
.survey-card { background: linear-gradient(135deg, #fff9e6, #fff3cc); border: 2px solid #fde68a; border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.survey-card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--amber); display: flex; align-items: center; justify-content: center; }
.survey-card__icon svg { width: 24px; height: 24px; color: #fff; }
.survey-card__body { flex: 1; }
.survey-card__title { font-weight: 700; font-size: 14px; }
.survey-card__desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.survey-card__btn { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--amber); color: #fff; font-size: 12px; font-weight: 600; }

/* ===== CLUB INFO ===== */
.club-hero { background: linear-gradient(135deg, #0b4ea2, #1c7fe0); border-radius: var(--radius); padding: 28px 32px; color: #fff; margin-bottom: 20px; }
.club-hero__name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.club-hero__addr { font-size: 13px; opacity: .85; }
.club-hero__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.club-hero__meta-item { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 6px; }
.club-hero__meta-item svg { width: 16px; height: 16px; }

/* ===== EDUCATOR CARD ===== */
.educator-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.educator-card__photo { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #fff; }
.educator-card__info { flex: 1; }
.educator-card__name { font-weight: 700; font-size: 15px; }
.educator-card__spec { font-size: 12px; color: var(--muted); margin-top: 2px; }
.educator-card__rating { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--amber); }
.educator-card__rating svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ===== SECTION HEADINGS ===== */
.section-title { font-weight: 700; font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.section-title svg { width: 20px; height: 20px; color: var(--brand); }

/* ===== 2-COLUMN LAYOUT ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ===== TIMELINE ===== */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.timeline__item { position: relative; margin-bottom: 20px; }
.timeline__dot { position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brand); background: #fff; }
.timeline__dot--done { background: var(--brand); }
.timeline__item-title { font-weight: 600; font-size: 13px; }
.timeline__item-date { font-size: 11px; color: var(--muted); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
  .sidebar-overlay.active { display: block; }
  .main { margin-left: 0; }
  .hamburger { display: flex; }
  .topbar__greeting { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .topbar__btn span { display: none; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .4s ease both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .1s; }
.fade-up-3 { animation-delay: .15s; }
.fade-up-4 { animation-delay: .2s; }
.fade-up-5 { animation-delay: .25s; }

/* ===== LEVEL BADGE ===== */
.level-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.level-badge--beginner { background: var(--green-l); color: var(--green); }
.level-badge--basic { background: var(--brand-l); color: var(--brand); }
.level-badge--intermediate { background: var(--purple-l); color: var(--purple); }
.level-badge--advanced { background: var(--amber-l); color: var(--amber); }

/* ===== HOURS COUNTER ===== */
.hours-counter { text-align: center; padding: 24px; }
.hours-counter__value { font-size: 48px; font-weight: 900; background: linear-gradient(135deg, var(--brand), #1c7fe0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.hours-counter__label { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ===== EMPTY STATE ===== */
.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty svg { width: 48px; height: 48px; opacity: .4; margin-bottom: 12px; }
.empty__title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }

/* ===== WELCOME HERO ===== */
.welcome-hero { background: linear-gradient(135deg, #0b4ea2, #1c7fe0); border-radius: var(--radius); padding: 22px 28px; color: #fff; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.welcome-hero__title { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.welcome-hero__sub { font-size: 13px; opacity: .9; }
.welcome-hero__sub strong { color: #ffd166; }
.welcome-hero__badge { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.14); border-radius: 14px; padding: 10px 18px; flex-shrink: 0; }
.welcome-hero__badge svg { width: 22px; height: 22px; color: #ffd166; }
.welcome-hero__badge span { font-size: 20px; font-weight: 900; line-height: 1.1; }
.welcome-hero__badge small { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

/* ===== CHIPS & LINKS ===== */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip--brand { background: var(--brand-l); color: var(--brand); }
.chip--green { background: var(--green-l); color: var(--green); }
.chip--amber { background: var(--amber-l); color: var(--amber); }
.card__link { font-size: 12px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.card__link:hover { text-decoration: underline; }
.btn-soft { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--brand-l); color: var(--brand); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.btn-soft svg { width: 14px; height: 14px; }
.btn-soft:hover { background: var(--brand); color: #fff; }
.next-up { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: var(--amber-l); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 4px; }
.next-up svg { width: 16px; height: 16px; color: var(--amber); flex-shrink: 0; }
.info-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: var(--soft); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 16px; }
.info-note svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }

/* ===== BAR CHART ===== */
.bar-chart { width: 100%; max-width: 320px; }
.bar-chart__val { font-size: 13px; font-weight: 800; fill: var(--ink); }
.bar-chart__lbl { font-size: 12px; font-weight: 600; fill: var(--muted); }

/* ===== DONUT ===== */
.donut-wrap { text-align: center; }
.donut__pct { font-size: 26px; font-weight: 900; fill: var(--ink); }
.donut__lbl { font-size: 11px; font-weight: 600; fill: var(--muted); }
.donut__sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
@keyframes donutIn { from { stroke-dashoffset: 339; } }
.donut-anim { animation: donutIn 1s ease both; }
.att-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink); }
.att-legend__row { display: flex; align-items: center; gap: 8px; }
.att-legend__row strong { margin-left: auto; padding-left: 16px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--ring { background: #fff; border: 3px solid var(--brand); width: 8px; height: 8px; }

/* ===== SPLIT BAR (stacjonarne vs online) ===== */
.split-bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; font-size: 12px; font-weight: 700; color: #fff; }
.split-bar__a { background: var(--brand); display: flex; align-items: center; justify-content: center; gap: 6px; }
.split-bar__b { background: var(--cyan); display: flex; align-items: center; justify-content: center; gap: 6px; }
.split-bar svg { width: 15px; height: 15px; }
.split-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 8px; }
.split-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ===== MODE / ATTENDANCE BADGES ===== */
.mode-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.mode-badge svg { width: 12px; height: 12px; }
.mode-badge--stac { background: var(--brand-l); color: var(--brand); }
.mode-badge--online { background: var(--cyan-l); color: var(--cyan); }
.mode-badge--exam { background: var(--amber-l); color: var(--amber); }
.att-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.att--present { background: var(--green-l); color: var(--green); }
.att--absent { background: var(--red-l); color: var(--red); }
.att--excused { background: var(--amber-l); color: var(--amber); }

/* ===== ATTENDANCE TABLE ===== */
.table-wrap { overflow-x: auto; }
.att-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.att-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; padding: 14px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.att-table td { padding: 11px 16px; border-bottom: 1px solid var(--soft); }
.att-table tr:hover td { background: var(--brand-xl); }
.att-table__date { font-weight: 600; white-space: nowrap; color: var(--muted); }
.att-table__title { font-weight: 500; }

/* ===== CALENDAR ===== */
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-weight: 800; font-size: 17px; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav__btn { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--soft); color: var(--muted); }
.cal-nav__btn--off { opacity: .55; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 6px 0; }
.cal-day { min-height: 86px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-day--weekend { background: var(--soft); }
.cal-day--empty { background: transparent; border-style: dashed; opacity: .4; }
.cal-day--today { border: 2px solid var(--brand); box-shadow: 0 0 0 3px var(--brand-l); }
.cal-day--today .cal-day__num { background: var(--brand); color: #fff; }
.cal-day__num { font-size: 12px; font-weight: 700; color: var(--muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.cal-ev { font-size: 10px; font-weight: 600; line-height: 1.25; padding: 3px 6px; border-radius: 6px; background: var(--brand-l); color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.cal-ev__time { opacity: .7; font-weight: 700; }
.cal-ev--online { background: var(--cyan-l); color: var(--cyan); }
.cal-ev--exam { background: var(--amber-l); color: var(--amber); }
.cal-ev--done { opacity: .55; text-decoration: line-through; }

/* ===== COMPETENCIES ===== */
.comp-row { margin-bottom: 14px; }
.comp-row__head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comp-row__bar { height: 10px; background: var(--soft); border-radius: 5px; overflow: hidden; }
.comp-row__fill { height: 100%; border-radius: 5px; transition: width .8s ease; }

/* ===== ACHIEVEMENTS ===== */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ach-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: center; box-shadow: var(--shadow); transition: all .2s; }
.ach-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ach-card__icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.ach-card__icon svg { width: 22px; height: 22px; color: #fff; }
.ach-card__name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.ach-card__desc { font-size: 11px; color: var(--muted); min-height: 28px; }
.ach-card__date { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; margin-top: 8px; color: var(--green); background: var(--green-l); padding: 3px 10px; border-radius: 20px; }
.ach-card__date svg { width: 11px; height: 11px; }
.ach-card__date--locked { color: var(--muted); background: var(--soft); }
.ach-card--locked { opacity: .55; filter: grayscale(1); }

/* ===== CATALOG ===== */
.catalog-intro { background: linear-gradient(135deg, #f0f5fc, #e3edf8); border: 1px solid var(--brand-l); border-radius: var(--radius); padding: 20px 26px; margin-bottom: 20px; }
.catalog-intro__title { font-weight: 800; font-size: 17px; margin-bottom: 4px; color: var(--brand-d); }
.catalog-intro__sub { font-size: 13px; color: var(--muted); }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.catalog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); transition: all .25s; display: flex; flex-direction: column; }
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.catalog-card__head { padding: 16px 20px; color: #fff; }
.catalog-card__code { font-size: 10px; font-weight: 700; letter-spacing: 1px; opacity: .75; }
.catalog-card__name { font-weight: 800; font-size: 16px; margin-top: 2px; }
.catalog-card__body { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.catalog-card__desc { font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; flex: 1; }
.catalog-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.catalog-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.catalog-card__meta svg { width: 13px; height: 13px; }
.catalog-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.catalog-card__start { font-size: 12px; font-weight: 700; color: var(--ink); }
.catalog-card__start small { color: var(--muted); font-weight: 500; }
.btn-enroll { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; transition: background .15s; }
.btn-enroll:hover { background: var(--brand-d); }
.btn-enroll--sent { background: var(--green); cursor: default; }
.badge--green { background: var(--green); }

/* ===== BADGE RED + BELL ===== */
.badge--red { background: var(--red); color: #fff; }
.notif-wrap { position: relative; }
.topbar__bell { position: relative; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background .15s, color .15s; }
.topbar__bell:hover { background: var(--soft); color: var(--ink); }
.topbar__bell svg { width: 20px; height: 20px; }
.topbar__bell-dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }

/* ===== NOTIFICATIONS DROPDOWN ===== */
.notif-dd { display: none; position: absolute; top: 46px; right: 0; width: 360px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(15,23,42,.16); z-index: 600; overflow: hidden; }
.notif-dd.open { display: block; animation: fadeUp .18s ease both; }
.notif-dd__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.notif-dd__head em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--red); color: #fff; border-radius: 10px; padding: 2px 7px; margin-left: 4px; vertical-align: middle; }
.notif-dd__mark { font-size: 11px; color: var(--brand); font-weight: 600; }
.notif-dd__mark:hover { text-decoration: underline; }
.notif-item { display: flex; gap: 11px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--soft); transition: background .12s; align-items: flex-start; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--soft); }
.notif-item--unread { background: #f4f8fd; }
.notif-item__ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-item__ico svg { width: 17px; height: 17px; }
.notif-item__title { font-size: 12.5px; font-weight: 700; }
.notif-item__text { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.notif-item__time { font-size: 10.5px; color: var(--muted); opacity: .8; margin-top: 3px; }
.notif-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; }

/* ===== MESSAGES PAGE ===== */
.msg-intro { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); background: var(--brand-l); border: 1px solid #cfe0f4; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.msg-intro svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.msg-row:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); transform: translateY(-1px); border-color: #cfe0f4; }
.msg-row--unread { border-color: var(--brand); background: #f7fafe; }
.msg-row__ava { position: relative; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-row__online { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.msg-row__body { flex: 1; min-width: 0; }
.msg-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msg-row__name { font-weight: 700; font-size: 14px; }
.msg-row__time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.msg-row__role { font-size: 11px; color: var(--brand); font-weight: 600; margin: 1px 0 3px; }
.msg-row__preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row__count { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }

/* ===== CHAT DRAWER ===== */
.chat-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); z-index: 1000; display: flex; justify-content: flex-end; animation: fadeUp .15s ease both; }
.chat { width: 100%; max-width: 440px; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -12px 0 48px rgba(0,0,0,.18); animation: chatSlide .25s ease both; }
@keyframes chatSlide { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat__ava { position: relative; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat__who { flex: 1; }
.chat__name { font-weight: 800; font-size: 15px; }
.chat__status { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.chat__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.chat__body { flex: 1; overflow-y: auto; padding: 18px 20px; background: #f4f7fb; }
.chat__day { text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.chat-msg { display: flex; gap: 8px; margin-bottom: 12px; }
.chat-msg--me { justify-content: flex-end; }
.chat-msg__ava { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: flex-end; }
.chat-msg__col { max-width: 78%; }
.chat-msg__bubble { padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
.chat-msg--them .chat-msg__bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg--me .chat-msg__bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg__time { font-size: 10px; color: var(--muted); margin-top: 3px; }
.chat-msg--me .chat-msg__time { text-align: right; }
.chat-msg__bubble--typing { display: flex; gap: 4px; padding: 13px 16px; }
.chat-msg__bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: #b9c4d2; animation: typingDot 1.2s infinite; }
.chat-msg__bubble--typing span:nth-child(2) { animation-delay: .2s; }
.chat-msg__bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fff; }
.chat__input { flex: 1; border: 1.5px solid var(--line); border-radius: 22px; padding: 11px 18px; font-family: inherit; font-size: 13px; transition: border-color .15s; }
.chat__input:focus { outline: none; border-color: var(--brand); }
.chat__send { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.chat__send:hover { background: var(--brand-d); }
.chat__send svg { width: 18px; height: 18px; }

/* ===== JOIN BUTTON + SPINNER ===== */
.schedule-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; align-self: center; }
.btn-join { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: var(--cyan); color: #fff; font-size: 11.5px; font-weight: 700; transition: filter .15s; white-space: nowrap; }
.btn-join:hover { filter: brightness(1.1); }
.btn-join svg { width: 14px; height: 14px; }
.join-spinner { width: 38px; height: 38px; border: 4px solid var(--brand-l); border-top-color: var(--brand); border-radius: 50%; margin: 0 auto 16px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== CLUB CONTACT LINKS ===== */
a.club-hero__meta-item--link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.5); padding-bottom: 1px; transition: opacity .15s; }
a.club-hero__meta-item--link:hover { opacity: 1; border-bottom-style: solid; }

/* ===== SURVEY MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeUp .2s ease both; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,.25); overflow: hidden; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 26px 16px; border-bottom: 1px solid var(--line); }
.modal__title { font-weight: 800; font-size: 17px; }
.modal__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal__close { font-size: 26px; line-height: 1; color: var(--muted); width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.modal__close:hover { background: var(--soft); color: var(--ink); }
.modal__body { padding: 20px 26px; overflow-y: auto; flex: 1; }
.modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--soft); flex-wrap: wrap; }
.modal__hint { font-size: 11px; color: var(--muted); }
.modal__submit { padding: 11px 26px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; transition: background .15s; }
.modal__submit:hover { background: var(--brand-d); }
.modal__success { text-align: center; padding: 40px 20px; }
.modal__success-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-l); color: var(--green); display: flex; align-items: center; justify-content: center; }
.modal__success-ico svg { width: 32px; height: 32px; }
.modal__success-title { font-weight: 800; font-size: 19px; margin-bottom: 6px; }
.modal__success-sub { font-size: 13px; color: var(--muted); max-width: 380px; margin: 0 auto; }

/* pytania */
.sq { margin-bottom: 22px; }
.sq__label { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.sq__stars { display: flex; align-items: center; gap: 4px; }
.sq__star { width: 30px; height: 30px; cursor: pointer; color: #d8dee9; transition: transform .1s, color .15s; }
.sq__star svg { width: 100%; height: 100%; }
.sq__star:hover { transform: scale(1.15); }
.sq__star.on { color: #f5a623; }
.sq__stars-val { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--amber); }
.sq__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sq__opt { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 24px; cursor: pointer; transition: all .15s; user-select: none; }
.sq__opt:hover { border-color: var(--brand); }
.sq__opt.on { background: var(--brand-l); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.sq__opt input { accent-color: var(--brand); }
.sq__text { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 13px; color: var(--ink); resize: vertical; transition: border-color .15s; }
.sq__text:focus { outline: none; border-color: var(--brand); }
.survey-card__time { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--amber); margin-left: 6px; white-space: nowrap; }
.survey-card__time svg { width: 12px; height: 12px; }

/* ===== CERT ACTIONS ===== */
.cert-card__actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.cert-card__btn--ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); text-align: center; }
.cert-card__btn--ghost:hover { background: var(--brand-l); }
.cert-card__btn { text-decoration: none; display: inline-block; text-align: center; }
a.cert-card__btn:hover { text-decoration: none; }

/* ===== CALENDAR RESPONSIVE ===== */
@media (max-width: 900px) {
  .cal-ev { font-size: 9px; }
  .cal-day { min-height: 64px; }
}
@media (max-width: 640px) {
  .cal-ev { display: none; }
  .cal-day { min-height: 40px; align-items: center; }
  .cal-day--has-ev::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
  .welcome-hero { flex-direction: column; text-align: center; }
}

/* ============================================================
   WIDOK UPROSZCZONY (EZ MODE) — dla seniorów
   ============================================================ */
.ez {
  position: fixed; inset: 0; z-index: 9999;
  background: #f4f6f9;
  display: none; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.ez-active .ez { display: flex; }
.ez__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: #fff; border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.ez__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 17px; color: #0b4ea2;
}
.ez__switch {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  border: 2px solid #e2e8f0; background: #fff;
  font-size: 13px; font-weight: 700; color: #64748b;
  cursor: pointer; font-family: inherit; transition: .15s;
}
.ez__switch:hover { background: #f1f5f9; border-color: #0b4ea2; color: #0b4ea2; }

.ez__hello {
  text-align: center; padding: 28px 20px 16px; flex-shrink: 0;
}
.ez__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #0b4ea2, #1c7fe0);
  color: #fff; font-weight: 800; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; box-shadow: 0 4px 12px rgba(11,78,162,.25);
}
.ez__name {
  font-size: clamp(22px, 5vw, 28px); font-weight: 800;
  color: #1e293b; margin: 0 0 4px;
}
.ez__sub {
  font-size: 14px; color: #64748b; margin: 0;
}

.ez__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px 20px;
  max-width: 500px; margin: 0 auto; width: 100%;
}
.ez__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 12px 16px;
  border-radius: 18px; border: none;
  cursor: pointer; font-family: inherit;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  min-height: 120px;
}
.ez__tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ez__tile:active { transform: scale(.97); }
.ez__tile svg { width: 36px; height: 36px; flex-shrink: 0; }

.ez__tile--blue   { background: #e8f0fb; color: #0b4ea2; }
.ez__tile--blue   svg { stroke: #0b4ea2; }
.ez__tile--green  { background: #e8f5e9; color: #2e7d32; }
.ez__tile--green  svg { stroke: #2e7d32; }
.ez__tile--purple { background: #f3e5f5; color: #7b1fa2; }
.ez__tile--purple svg { stroke: #7b1fa2; }
.ez__tile--gold   { background: #fff8e1; color: #f57f17; }
.ez__tile--gold   svg { stroke: #f57f17; }
.ez__tile--teal   { background: #e0f2f1; color: #00796b; }
.ez__tile--teal   svg { stroke: #00796b; }
.ez__tile--red    { background: #ffebee; color: #e53935; }
.ez__tile--red    svg { stroke: #e53935; }

.ez__tile-label {
  font-size: 16px; font-weight: 800; line-height: 1.2;
  text-align: center;
}
.ez__tile-info {
  font-size: 12px; font-weight: 600; opacity: .7;
  text-align: center; line-height: 1.3;
}

/* Szczegóły (po kliknięciu w kafelek) */
.ez__detail {
  flex: 1; padding: 0 16px 20px;
  max-width: 500px; margin: 0 auto; width: 100%;
}
.ez__detail-back {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px;
  border: none; background: #fff;
  font-size: 15px; font-weight: 700; color: #0b4ea2;
  cursor: pointer; font-family: inherit;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: .15s; width: 100%;
}
.ez__detail-back:hover { background: #f0f5fc; }

.ez__detail-body {
  display: flex; flex-direction: column; gap: 10px;
}

/* Karta w widoku detali */
.ez-dcard {
  background: #fff; border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ez-dcard__title {
  font-size: 16px; font-weight: 800; color: #1e293b;
  margin-bottom: 6px;
}
.ez-dcard__meta {
  font-size: 13px; color: #64748b; line-height: 1.7;
}
.ez-dcard__meta strong { color: #1e293b; }
.ez-dcard__bar {
  height: 10px; background: #f1f5f9;
  border-radius: 6px; overflow: hidden;
  margin-top: 10px;
}
.ez-dcard__bar-fill {
  height: 100%; border-radius: 6px;
  transition: width .3s;
}
.ez-dcard__action {
  margin-top: 12px; padding: 10px 16px;
  background: #0b4ea2; color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  width: 100%; text-align: center;
  transition: .15s;
}
.ez-dcard__action:hover { background: #083a7a; }

/* Przycisk "Widok prosty" — styl identyczny z sidebar__item */
.sidebar__ez-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; font-size: 13px;
  transition: all .15s; text-decoration: none;
  cursor: pointer; font-family: inherit;
  border: none; background: none;
  width: 100%;
  margin: 0 -6px 8px;
}
.sidebar__ez-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar__ez-btn:hover { background: var(--brand-l); color: var(--ink); }

@media (min-width: 860px) {
  .ez__tiles { grid-template-columns: repeat(3, 1fr); max-width: 600px; }
  .ez__tile { min-height: 140px; padding: 28px 16px 20px; }
  .ez__tile svg { width: 42px; height: 42px; }
  .ez__tile-label { font-size: 17px; }
}
@media (max-width: 380px) {
  .ez__tile { min-height: 100px; padding: 16px 10px 12px; }
  .ez__tile svg { width: 30px; height: 30px; }
  .ez__tile-label { font-size: 14px; }
}

.ez__tile--orange { background: #fff7ed; color: #c2410c; }
.ez__tile--orange svg { stroke: #c2410c; }

/* ============================================================
   ENROLL MODAL — zapisy na zajęcia z wyborem slotów
   ============================================================ */
.enroll-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
  padding: 16px;
}
.enroll-overlay--visible { opacity: 1; }
.enroll-modal {
  background: #fff; border-radius: 20px;
  width: 100%; max-width: 480px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto; padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
  position: relative;
}
.enroll-modal__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 22px;
  color: #94a3b8; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; line-height: 1;
}
.enroll-modal__close:hover { background: #f1f5f9; color: #334155; }
.enroll-modal__head { text-align: center; margin-bottom: 20px; }
.enroll-modal__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: #e8f0fb; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 12px;
}
.enroll-modal__title {
  font-size: 22px; font-weight: 800; color: #0b4ea2; margin: 0 0 4px;
}
.enroll-modal__sub {
  font-size: 14px; color: #64748b; margin: 0;
}
.enroll-modal__slots {
  display: flex; flex-direction: column; gap: 10px;
}
.enroll-slot {
  border: 2px solid #e2e8f0; border-radius: 14px;
  padding: 16px 18px; transition: .15s;
}
.enroll-slot:hover { border-color: #93c5fd; background: #f8fafc; }
.enroll-slot--booked {
  border-color: #86efac; background: #f0fdf4;
}
.enroll-slot--empty {
  text-align: center; color: #94a3b8; font-style: italic;
  padding: 24px;
}
.enroll-slot__date {
  font-size: 15px; color: #1e293b; margin-bottom: 2px;
}
.enroll-slot__time {
  font-size: 14px; color: #0b4ea2; font-weight: 700;
  margin-bottom: 4px;
}
.enroll-slot__meta {
  font-size: 12px; color: #64748b; margin-bottom: 6px;
}
.enroll-slot__seats {
  font-size: 13px; color: #475569; margin-bottom: 8px;
}
.enroll-slot__btn {
  padding: 10px 20px; background: #0b4ea2; color: #fff;
  border: none; border-radius: 10px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  width: 100%; transition: .15s;
}
.enroll-slot__btn:hover { background: #083a7a; }
.enroll-modal__confirm {
  text-align: center; padding: 10px 0;
}
.enroll-modal__confirm h3 {
  font-size: 20px; font-weight: 800; color: #166534;
  margin: 12px 0 8px;
}
.enroll-modal__confirm p {
  font-size: 14px; color: #475569; line-height: 1.6;
}
.enroll-modal__check { margin-bottom: 4px; }

/* Kiedy EZ mode aktywny — ukryj pełny panel */
body.ez-active .sidebar { display: none !important; }
body.ez-active .main { display: none !important; }
body.ez-active .sidebar-overlay { display: none !important; }