/* ============================================================================
   EduPanel — system wizualny panelu kursanta
   ----------------------------------------------------------------------------
   Jedno zrodlo prawdy dla wszystkich ekranow kursanta. Zasady:

   1. Tokeny maja wlasny stem --eps-*, zeby NIE wchodzic w konflikt z tokenami
      motywu (--ep-*) ani z paleta panelu admina. Zaden inny arkusz nie
      przedefiniowuje tych nazw.
   2. Komponenty zyja pod klasa .ep-ui (wrapper kazdego ekranu kursanta).
      Dzieki temu stare arkusze (edupanel-enrollment.css, edupanel-public.css)
      moga istniec obok w trakcie migracji i nic sie nie bije o specyficznosc.
   3. Kolor marki to pomaranczowy. #DB6215 ma na bialym kontrast 3,6:1 — za malo
      na tekst, wiec do tekstu i wypelnien idzie sciemniony #B14A0B (5,3:1),
      a jasny pomaranczowy zostaje do ramek, ikon i tinty. Kazda para
      kolor/tlo w tym pliku ma >= 4,5:1 dla tekstu i >= 3:1 dla elementow UI.
   4. Glebia to hairline i zmiana tla, nie cien. Cienie tylko dla warstw
      unoszonych nad trescia (dropdown, sticky).
   5. Baza 18 px, minimum 16 px dla tekstu, 13 px wylacznie dla etykiet
      wersalikowych. Cel dotykowy 48 px.
   ============================================================================ */

:root {
	/* --- powierzchnie --- */
	--eps-ground:      #F7F6F3;                      /* tlo strony (cieple, biasowane w akcent) */
	--eps-surface:     #FFFFFF;
	--eps-surface-2:   #F2F0EC;                      /* naglowki tabel, wyciszone pola */
	--eps-surface-3:   #E9E6E0;
	--eps-hairline:    rgb(28 27 24 / 0.12);
	--eps-hairline-2:  rgb(28 27 24 / 0.22);         /* mocniejsza kreska: pod naglowkiem tabeli */

	/* --- tekst (alfa jednego atramentu, nie osobne szarosci) --- */
	--eps-ink:         #1C1B18;                      /* 15,8:1 na bialym */
	--eps-ink-2:       rgb(28 27 24 / 0.74);         /* tekst ciagly, 8,6:1 */
	--eps-ink-3:       rgb(28 27 24 / 0.58);         /* etykiety, podpisy, 5,4:1 */

	/* --- akcent marki --- */
	--eps-accent:      #B14A0B;                      /* tekst, linki, wypelnienia przyciskow */
	--eps-accent-ink:  #8E3B08;                      /* hover na wypelnieniu */
	--eps-accent-warm: #DB6215;                      /* ramki, ikony, pasek aktywnej zakladki */
	--eps-accent-soft: #FDF2E8;                      /* tinta tla */
	--eps-accent-line: rgb(219 98 21 / 0.34);
	--eps-focus:       #DB6215;

	/* --- kolor semantyczny (oddzielony od akcentu) --- */
	--eps-ok:          #15604A;  --eps-ok-soft:   #E7F2ED;  --eps-ok-line:   rgb(21 96 74 / 0.26);
	--eps-warn:        #8A5300;  --eps-warn-soft: #FBF1DE;  --eps-warn-line: rgb(138 83 0 / 0.26);
	--eps-bad:         #A2211B;  --eps-bad-soft:  #FAEAE8;  --eps-bad-line:  rgb(162 33 27 / 0.26);
	--eps-info:        #0B5CAD;  --eps-info-soft: #E9F0F9;  --eps-info-line: rgb(11 92 173 / 0.26);

	/* --- typografia --- */
	--eps-font:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--eps-t-h1:        clamp(1.625rem, 3.2vw, 2.125rem);  /* 26 -> 34 */
	--eps-t-h2:        clamp(1.375rem, 2.2vw, 1.625rem);  /* 22 -> 26 */
	--eps-t-h3:        1.25rem;                            /* 20 */
	--eps-t-body:      1.125rem;                           /* 18 */
	--eps-t-sm:        1rem;                               /* 16 — minimum dla tekstu */
	--eps-t-label:     0.8125rem;                          /* 13 — tylko wersaliki */
	--eps-t-amount:    clamp(1.75rem, 3.4vw, 2.25rem);     /* 28 -> 36 — kwoty */
	--eps-lh-tight:    1.18;
	--eps-lh:          1.55;
	--eps-tr-h1:       -0.022em;
	--eps-tr-h2:       -0.016em;
	--eps-tr-label:     0.08em;

	/* --- rytm i kształt --- */
	--eps-sp-1: 4px; --eps-sp-2: 8px;  --eps-sp-3: 12px; --eps-sp-4: 16px;
	--eps-sp-5: 24px; --eps-sp-6: 32px; --eps-sp-7: 44px; --eps-sp-8: 64px;
	--eps-gap:        clamp(1rem, 2.2vw, 1.5rem);
	--eps-section:    clamp(1.75rem, 3.4vw, 2.5rem);   /* odstep miedzy sekcjami ekranu */
	--eps-measure:    1080px;                           /* ekrany panelu */
	--eps-measure-form: 760px;                          /* formularze i dlugie czytanie */
	--eps-r-sm: 8px; --eps-r: 12px; --eps-r-lg: 16px; --eps-r-pill: 999px;
	--eps-tap:  48px;                                   /* minimalny cel dotykowy */
	--eps-lift: 0 1px 2px rgb(28 27 24 / 0.05);
	--eps-lift-2: 0 12px 28px -12px rgb(28 27 24 / 0.28);

	/* --- ruch --- */
	--eps-ease:  cubic-bezier(0.16, 1, 0.3, 1);
	--eps-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
	--eps-d-fast: 180ms;
	--eps-d: 280ms;
}

/* ===== tlo strony kursanta =================================================
   Jedna zaprojektowana powierzchnia zamiast plaskiego szarego #f8f9fa:
   dwie bardzo miekkie poswiaty (cieplа w akcencie, zimna w granacie)
   na cieplym papierze. Bez ziarna — na ekranach z formularzami,
   czytanych codziennie przez seniorow, ziarno czyta sie jak brud.       */
body.ep-panel-ui {
	background:
		radial-gradient(1100px 520px at 12% -8%,  rgb(219 98 21 / 0.055), transparent 68%),
		radial-gradient(900px 460px at 96% -4%,   rgb(11 92 173 / 0.045), transparent 66%),
		var(--eps-ground);
	background-attachment: fixed;
}

/* ===== wrapper ekranu ====================================================== */
.ep-ui {
	font-family: var(--eps-font);
	font-size: var(--eps-t-body);
	line-height: var(--eps-lh);
	color: var(--eps-ink);
	max-width: var(--eps-measure);
	margin-inline: auto;
	container-type: inline-size;
}
.ep-ui--form { max-width: var(--eps-measure-form); }
.ep-ui *, .ep-ui *::before, .ep-ui *::after { box-sizing: border-box; }
.ep-ui p { color: var(--eps-ink-2); max-width: 68ch; }
.ep-ui p:last-child { margin-bottom: 0; }
.ep-ui a { color: var(--eps-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ep-ui a:hover { color: var(--eps-accent-ink); }
.ep-ui h2, .ep-ui h3, .ep-ui h4 { font-family: var(--eps-font); color: var(--eps-ink); margin: 0; }
.ep-ui h2 { font-size: var(--eps-t-h2); font-weight: 600; letter-spacing: var(--eps-tr-h2); line-height: var(--eps-lh-tight); text-wrap: balance; }
.ep-ui h3 { font-size: var(--eps-t-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.ep-ui h4 { font-size: var(--eps-t-sm); font-weight: 600; }
.ep-ui :focus-visible { outline: 3px solid var(--eps-focus); outline-offset: 2px; border-radius: 4px; }

/* pionowy rytm — zamiast marginesow per element */
.ep-stack { display: flex; flex-direction: column; gap: var(--eps-section); }
.ep-stack--tight { gap: var(--eps-gap); }
.ep-row { display: flex; flex-wrap: wrap; gap: var(--eps-sp-3); align-items: center; }
.ep-row--between { justify-content: space-between; }
.ep-row--end { justify-content: flex-end; }

/* glowna kolumna + szyna boczna */
.ep-split { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--eps-gap); align-items: start; }
.ep-split > .ep-stack { min-width: 0; }
@container (max-width: 900px) { .ep-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .ep-split { grid-template-columns: minmax(0, 1fr); } }

/* ===== naglowek ekranu =====================================================
   Tytul strony drukuje motyw (h1). Tutaj mieszka kontekst: nazwa grupy,
   semestr, stan konta. Zadnego drugiego h1.                               */
.ep-head { display: flex; flex-wrap: wrap; gap: var(--eps-sp-4) var(--eps-sp-5); align-items: flex-end; justify-content: space-between; }
.ep-head__main { min-width: 0; flex: 1 1 22rem; }
.ep-head__title { font-size: var(--eps-t-h1) !important; font-weight: 600; letter-spacing: var(--eps-tr-h1); line-height: var(--eps-lh-tight); margin: 0 !important; text-wrap: balance; }
.ep-head__sub { margin: var(--eps-sp-2) 0 0; color: var(--eps-ink-2); font-size: var(--eps-t-body); }
.ep-head__meta { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2) var(--eps-sp-4); margin-top: var(--eps-sp-3); color: var(--eps-ink-3); font-size: var(--eps-t-sm); }
.ep-head__actions { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2); }
.ep-eyebrow { display: block; font-size: var(--eps-t-label); font-weight: 600; letter-spacing: var(--eps-tr-label); text-transform: uppercase; color: var(--eps-ink-3); margin: 0 0 var(--eps-sp-2); }
.ep-eyebrow--accent { color: var(--eps-accent); }
.ep-back { display: inline-flex; align-items: center; gap: var(--eps-sp-2); font-size: var(--eps-t-sm); color: var(--eps-ink-3); text-decoration: none; min-height: 32px; }
.ep-back:hover { color: var(--eps-accent); }

/* ===== panel (karta) ======================================================= */
.ep-panel {
	background: var(--eps-surface);
	border: 1px solid var(--eps-hairline);
	border-radius: var(--eps-r);
	box-shadow: var(--eps-lift);
}
.ep-panel__head {
	display: flex; flex-wrap: wrap; gap: var(--eps-sp-3);
	align-items: baseline; justify-content: space-between;
	padding: var(--eps-sp-4) var(--eps-sp-5);
	border-bottom: 1px solid var(--eps-hairline);
}
.ep-panel__head > :first-child { min-width: 0; }
.ep-panel__body { padding: var(--eps-sp-5); }
.ep-panel__body > * + * { margin-top: var(--eps-sp-4); }
.ep-panel__foot {
	padding: var(--eps-sp-4) var(--eps-sp-5);
	border-top: 1px solid var(--eps-hairline);
	background: var(--eps-surface-2);
	border-radius: 0 0 var(--eps-r) var(--eps-r);
}
.ep-panel--tint { background: var(--eps-accent-soft); border-color: var(--eps-accent-line); }
.ep-panel--flush .ep-panel__body { padding: 0; }
.ep-panel--quiet { box-shadow: none; background: transparent; border-style: dashed; }

/* sekcja bez ramki — naglowek z hairline'em pod nim */
.ep-sect__head { display: flex; flex-wrap: wrap; gap: var(--eps-sp-3); align-items: baseline; justify-content: space-between; padding-bottom: var(--eps-sp-3); border-bottom: 1px solid var(--eps-hairline-2); margin-bottom: var(--eps-sp-4); }

/* ===== przyciski =========================================================== */
.ep-ui .ep-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--eps-sp-2);
	min-height: var(--eps-tap); padding: 0 var(--eps-sp-5);
	font-family: var(--eps-font); font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
	text-align: center; text-decoration: none; white-space: nowrap;
	border: 1px solid var(--eps-hairline-2); border-radius: var(--eps-r-sm);
	background: var(--eps-surface); color: var(--eps-ink); cursor: pointer;
	transition: background var(--eps-d-fast) var(--eps-ease-soft),
	            border-color var(--eps-d-fast) var(--eps-ease-soft),
	            color var(--eps-d-fast) var(--eps-ease-soft);
}
.ep-ui .ep-btn:hover { background: var(--eps-surface-2); border-color: var(--eps-ink-3); color: var(--eps-ink); text-decoration: none; }
.ep-ui .ep-btn--primary { background: var(--eps-accent); border-color: var(--eps-accent); color: #fff; }
.ep-ui .ep-btn--primary:hover { background: var(--eps-accent-ink); border-color: var(--eps-accent-ink); color: #fff; }
.ep-ui .ep-btn--quiet { background: transparent; border-color: transparent; color: var(--eps-accent); padding-inline: var(--eps-sp-3); }
.ep-ui .ep-btn--quiet:hover { background: var(--eps-accent-soft); border-color: transparent; color: var(--eps-accent-ink); }
.ep-ui .ep-btn--danger { background: transparent; border-color: var(--eps-bad-line); color: var(--eps-bad); }
.ep-ui .ep-btn--danger:hover { background: var(--eps-bad-soft); border-color: var(--eps-bad); color: var(--eps-bad); }
.ep-ui .ep-btn--sm { min-height: 40px; padding: 0 var(--eps-sp-4); font-size: var(--eps-t-sm); }
.ep-ui .ep-btn--block { width: 100%; }
.ep-ui .ep-btn[disabled], .ep-ui .ep-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ep-btn__icon { width: 20px; height: 20px; flex: none; }

/* link-akcja w wierszu tabeli / listy */
.ep-ui .ep-action {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
	padding: 0 var(--eps-sp-3); font-size: var(--eps-t-sm); font-weight: 600;
	color: var(--eps-accent); background: transparent; border: 1px solid transparent;
	border-radius: var(--eps-r-sm); cursor: pointer; text-decoration: none;
}
.ep-ui .ep-action:hover { background: var(--eps-accent-soft); }
.ep-ui .ep-action--quiet { color: var(--eps-ink-3); font-weight: 500; }
.ep-ui .ep-action--quiet:hover { background: var(--eps-surface-2); color: var(--eps-ink); }

/* ===== pigulki statusu ===================================================== */
.ep-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: var(--eps-r-pill);
	font-size: var(--eps-t-label); font-weight: 600; letter-spacing: 0.02em;
	white-space: nowrap; background: var(--eps-surface-2); color: var(--eps-ink-2);
	border: 1px solid var(--eps-hairline);
}
.ep-pill--ok   { background: var(--eps-ok-soft);   color: var(--eps-ok);   border-color: var(--eps-ok-line); }
.ep-pill--warn { background: var(--eps-warn-soft); color: var(--eps-warn); border-color: var(--eps-warn-line); }
.ep-pill--bad  { background: var(--eps-bad-soft);  color: var(--eps-bad);  border-color: var(--eps-bad-line); }
.ep-pill--info { background: var(--eps-info-soft); color: var(--eps-info); border-color: var(--eps-info-line); }
.ep-pill--accent { background: var(--eps-accent-soft); color: var(--eps-accent); border-color: var(--eps-accent-line); }
.ep-pill--live { background: var(--eps-bad-soft); color: var(--eps-bad); border-color: var(--eps-bad-line); }
.ep-pill--live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ===== komunikaty ========================================================== */
.ep-note {
	display: flex; gap: var(--eps-sp-3);
	padding: var(--eps-sp-4) var(--eps-sp-5);
	border: 1px solid var(--eps-hairline);
	border-left: 3px solid var(--eps-ink-3);
	border-radius: var(--eps-r-sm);
	background: var(--eps-surface);
	font-size: var(--eps-t-sm);
	color: var(--eps-ink-2);
}
.ep-note__body { min-width: 0; flex: 1; }
.ep-note__title { display: block; font-weight: 600; font-size: var(--eps-t-body); color: var(--eps-ink); margin-bottom: var(--eps-sp-1); }
.ep-note p { font-size: var(--eps-t-sm); }
.ep-note--ok   { background: var(--eps-ok-soft);   border-color: var(--eps-ok-line);   border-left-color: var(--eps-ok); }
.ep-note--warn { background: var(--eps-warn-soft); border-color: var(--eps-warn-line); border-left-color: var(--eps-warn); }
.ep-note--bad  { background: var(--eps-bad-soft);  border-color: var(--eps-bad-line);  border-left-color: var(--eps-bad); }
.ep-note--info { background: var(--eps-info-soft); border-color: var(--eps-info-line); border-left-color: var(--eps-info); }
.ep-note--accent { background: var(--eps-accent-soft); border-color: var(--eps-accent-line); border-left-color: var(--eps-accent-warm); }
.ep-note__actions { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2); margin-top: var(--eps-sp-3); }

/* ===== stan pusty ========================================================== */
.ep-empty { text-align: center; padding: var(--eps-sp-7) var(--eps-sp-5); }
.ep-empty__icon { width: 40px; height: 40px; margin: 0 auto var(--eps-sp-3); color: var(--eps-ink-3); opacity: 0.7; }
.ep-empty__title { font-size: var(--eps-t-h3); font-weight: 600; margin: 0 0 var(--eps-sp-2); }
.ep-empty p { margin: 0 auto; max-width: 46ch; color: var(--eps-ink-3); font-size: var(--eps-t-sm); }
.ep-empty__actions { margin-top: var(--eps-sp-4); display: flex; gap: var(--eps-sp-2); justify-content: center; flex-wrap: wrap; }

/* ===== liczby i kwoty ====================================================== */
.ep-amount { font-size: var(--eps-t-amount); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ep-amount--ok  { color: var(--eps-ok); }
.ep-amount--bad { color: var(--eps-bad); }
.ep-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--eps-hairline); border: 1px solid var(--eps-hairline); border-radius: var(--eps-r); overflow: hidden; }
.ep-stat { background: var(--eps-surface); padding: var(--eps-sp-4) var(--eps-sp-5); }
.ep-stat__n { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ep-stat__l { font-size: var(--eps-t-sm); color: var(--eps-ink-3); margin-top: 2px; }

/* ===== pasek postepu ====================================================== */
.ep-meter { height: 8px; border-radius: var(--eps-r-pill); background: var(--eps-surface-3); overflow: hidden; }
.ep-meter__fill { height: 100%; border-radius: inherit; background: var(--eps-accent-warm); }
.ep-meter__fill--ok { background: var(--eps-ok); }

/* ===== utils =============================================================== */
.ep-muted { color: var(--eps-ink-3); }
.ep-sm { font-size: var(--eps-t-sm); }
.ep-label-sm { font-size: var(--eps-t-label); font-weight: 600; letter-spacing: var(--eps-tr-label); text-transform: uppercase; color: var(--eps-ink-3); }
.ep-divider { height: 1px; background: var(--eps-hairline); border: 0; margin: 0; }
.ep-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ep-nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.ep-ui *, .ep-ui *::before, .ep-ui *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== zakladki =============================================================
   Poziomy pasek, przewijalny na waskim ekranie, z zanikiem na krawedzi
   sygnalizujacym, ze cos jest dalej. Aktywna zakladka podkreslona
   pomaranczem — nie ramka „teczki" z 2013 roku.                           */
.ep-tabs {
	display: flex; gap: var(--eps-sp-1);
	overflow-x: auto; overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border-bottom: 1px solid var(--eps-hairline-2);
	margin-bottom: var(--eps-sp-5);
	-webkit-overflow-scrolling: touch;
}
.ep-tabs::-webkit-scrollbar { height: 4px; }
.ep-tabs::-webkit-scrollbar-thumb { background: var(--eps-hairline-2); border-radius: 2px; }
.ep-ui .ep-tab {
	display: inline-flex; align-items: center; gap: var(--eps-sp-2);
	min-height: var(--eps-tap); padding: 0 var(--eps-sp-4);
	font-size: var(--eps-t-sm); font-weight: 600; white-space: nowrap;
	color: var(--eps-ink-3); text-decoration: none;
	border: 0; border-bottom: 3px solid transparent; background: none;
	transition: color var(--eps-d-fast) var(--eps-ease-soft), border-color var(--eps-d-fast) var(--eps-ease-soft);
}
.ep-ui .ep-tab:hover { color: var(--eps-ink); text-decoration: none; }
.ep-ui .ep-tab.is-active { color: var(--eps-ink); border-bottom-color: var(--eps-accent-warm); }
.ep-tab__badge {
	min-width: 22px; padding: 0 6px; border-radius: var(--eps-r-pill);
	background: var(--eps-accent); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ===== tabela danych ========================================================
   Ponizej 760 px kazdy wiersz staje sie karta: etykieta kolumny wchodzi
   z data-label. Dlatego kazde <td> MUSI miec data-label.                  */
.ep-data-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--eps-r); }
.ep-data { width: 100%; border-collapse: collapse; font-size: var(--eps-t-sm); }
.ep-data th, .ep-data td { text-align: left; padding: var(--eps-sp-3) var(--eps-sp-4); vertical-align: middle; }
.ep-data thead th {
	font-size: var(--eps-t-label); font-weight: 700; letter-spacing: var(--eps-tr-label);
	text-transform: uppercase; color: var(--eps-ink-3);
	background: var(--eps-surface-2); border-bottom: 1px solid var(--eps-hairline-2);
	white-space: nowrap;
}
.ep-data tbody tr { border-bottom: 1px solid var(--eps-hairline); }
.ep-data tbody tr:last-child { border-bottom: 0; }
.ep-data tbody tr.is-next { background: var(--eps-accent-soft); }
.ep-data tbody td.ep-data__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-data caption { caption-side: top; text-align: left; padding: 0 0 var(--eps-sp-3); color: var(--eps-ink-3); font-size: var(--eps-t-sm); }

@media (max-width: 760px) {
	.ep-data-wrap { overflow: visible; }
	.ep-data, .ep-data tbody, .ep-data tr, .ep-data td { display: block; width: 100%; }
	.ep-data thead { display: none; }
	.ep-data tbody tr {
		background: var(--eps-surface); border: 1px solid var(--eps-hairline);
		border-radius: var(--eps-r-sm); padding: var(--eps-sp-2) var(--eps-sp-4);
		margin-bottom: var(--eps-sp-3);
	}
	.ep-data tbody tr.is-next { border-color: var(--eps-accent-line); }
	.ep-data tbody td {
		display: flex; gap: var(--eps-sp-4); justify-content: space-between; align-items: baseline;
		padding: var(--eps-sp-2) 0; border-bottom: 1px solid var(--eps-hairline);
		text-align: left !important;
	}
	.ep-data tbody td:last-child { border-bottom: 0; }
	.ep-data tbody td::before {
		content: attr(data-label);
		flex: none; min-width: 7.5rem;
		font-size: var(--eps-t-label); font-weight: 700; letter-spacing: var(--eps-tr-label);
		text-transform: uppercase; color: var(--eps-ink-3);
	}
	.ep-data tbody td[data-label=""]::before, .ep-data tbody td:not([data-label])::before { content: none; min-width: 0; }
	.ep-data tbody td.ep-data__full { display: block; }
	.ep-data tbody td.ep-data__full::before { display: block; margin-bottom: var(--eps-sp-1); }
}

/* ===== lista terminow / lekcji =============================================
   Zamiast tabeli z pustymi kolumnami: jeden wiersz = jeden termin,
   data po lewej, stan i akcja po prawej. Czyta sie na telefonie bez
   przewijania w bok.                                                       */
.ep-lessons { display: flex; flex-direction: column; }
.ep-lesson {
	display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
	gap: var(--eps-sp-3) var(--eps-sp-4); align-items: center;
	padding: var(--eps-sp-4) var(--eps-sp-5);
	border-bottom: 1px solid var(--eps-hairline);
}
.ep-lesson:last-child { border-bottom: 0; }
.ep-lesson--next { background: var(--eps-accent-soft); }
.ep-lesson__when { font-weight: 600; font-variant-numeric: tabular-nums; }
.ep-lesson__when small { display: block; font-weight: 500; font-size: var(--eps-t-label); color: var(--eps-ink-3); letter-spacing: var(--eps-tr-label); text-transform: uppercase; }
.ep-lesson__what { min-width: 0; color: var(--eps-ink-2); font-size: var(--eps-t-sm); }
.ep-lesson__what strong { color: var(--eps-ink); font-weight: 600; }
.ep-lesson__meta { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2) var(--eps-sp-3); margin-top: 2px; }
.ep-lesson__act { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2); justify-content: flex-end; }
@media (max-width: 700px) {
	.ep-lesson { grid-template-columns: minmax(0, 1fr); padding: var(--eps-sp-4); }
	.ep-lesson__act { justify-content: flex-start; }
}

/* ===== pary etykieta/wartosc =============================================== */
.ep-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--eps-sp-4) var(--eps-sp-5); margin: 0; }
.ep-kv > div { min-width: 0; }
.ep-kv dt { font-size: var(--eps-t-label); font-weight: 600; letter-spacing: var(--eps-tr-label); text-transform: uppercase; color: var(--eps-ink-3); }
.ep-kv dd { margin: 2px 0 0; font-size: var(--eps-t-body); color: var(--eps-ink); overflow-wrap: anywhere; }

/* ===== siatka kart (katalog, grupy, certyfikaty) ===========================
   Rownej wysokosci, stopka przyklejona do dolu — zeby ceny i przyciski
   ustawialy sie w jednej linii przez cala siatke.                          */
.ep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--eps-gap); }
.ep-cards--wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ep-card {
	display: flex; flex-direction: column;
	background: var(--eps-surface); border: 1px solid var(--eps-hairline);
	border-radius: var(--eps-r); box-shadow: var(--eps-lift);
	transition: border-color var(--eps-d) var(--eps-ease-soft), transform var(--eps-d) var(--eps-ease-soft);
}
.ep-card:hover { border-color: var(--eps-hairline-2); transform: translateY(-2px); }
.ep-card__body { padding: var(--eps-sp-5); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--eps-sp-2); }
.ep-card__title { font-size: var(--eps-t-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.ep-card__desc { font-size: var(--eps-t-sm); color: var(--eps-ink-2); margin: 0; }
.ep-card__meta { display: flex; flex-wrap: wrap; gap: var(--eps-sp-2); margin-top: auto; }
.ep-card__foot {
	display: flex; flex-wrap: wrap; gap: var(--eps-sp-3); align-items: center; justify-content: space-between;
	padding: var(--eps-sp-4) var(--eps-sp-5);
	border-top: 1px solid var(--eps-hairline);
	background: var(--eps-surface-2);
	border-radius: 0 0 var(--eps-r) var(--eps-r);
}
.ep-card__price { font-size: var(--eps-t-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.ep-card__price s { display: block; font-size: var(--eps-t-label); font-weight: 500; color: var(--eps-ink-3); }
.ep-card--accent { border-color: var(--eps-accent-line); }

/* ===== formularze ========================================================== */
.ep-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--eps-sp-4) var(--eps-sp-5); }
.ep-form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.ep-ui .ep-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ep-ui .ep-field > label, .ep-ui .ep-field__label { font-size: var(--eps-t-sm); font-weight: 600; color: var(--eps-ink); }
.ep-ui .ep-field__req { color: var(--eps-bad); }
.ep-ui .ep-field input[type="text"], .ep-ui .ep-field input[type="email"], .ep-ui .ep-field input[type="tel"],
.ep-ui .ep-field input[type="date"], .ep-ui .ep-field input[type="number"], .ep-ui .ep-field input[type="password"],
.ep-ui .ep-field select, .ep-ui .ep-field textarea,
.ep-ui .ep-input {
	width: 100%; min-height: var(--eps-tap);
	padding: 10px var(--eps-sp-4);
	font-family: var(--eps-font); font-size: var(--eps-t-body); line-height: 1.4; color: var(--eps-ink);
	background: var(--eps-surface);
	border: 1px solid var(--eps-hairline-2); border-radius: var(--eps-r-sm);
	transition: border-color var(--eps-d-fast) var(--eps-ease-soft), box-shadow var(--eps-d-fast) var(--eps-ease-soft);
}
.ep-ui .ep-field textarea, .ep-ui textarea.ep-input { min-height: 7rem; padding-top: var(--eps-sp-3); resize: vertical; }
.ep-ui .ep-field input:focus, .ep-ui .ep-field select:focus, .ep-ui .ep-field textarea:focus, .ep-ui .ep-input:focus {
	outline: none; border-color: var(--eps-accent-warm);
	box-shadow: 0 0 0 3px var(--eps-accent-line);
}
.ep-ui .ep-field input[readonly], .ep-ui .ep-field input:disabled, .ep-ui .ep-field select:disabled {
	background: var(--eps-surface-2); color: var(--eps-ink-2); border-style: dashed; cursor: default;
}
.ep-ui .ep-field select { appearance: none; padding-right: var(--eps-sp-7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236E6A64' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--eps-sp-4) center; }
.ep-field__hint { font-size: var(--eps-t-sm); color: var(--eps-ink-3); }
.ep-field__error { font-size: var(--eps-t-sm); font-weight: 600; color: var(--eps-bad); }
.ep-ui .ep-field.has-error input, .ep-ui .ep-field.has-error select, .ep-ui .ep-field.has-error textarea { border-color: var(--eps-bad); }

/* karty wyboru (radio/checkbox jako klikalny blok) */
.ep-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--eps-sp-3); }
.ep-choice {
	position: relative; display: flex; gap: var(--eps-sp-3); align-items: flex-start;
	padding: var(--eps-sp-4); cursor: pointer;
	background: var(--eps-surface); border: 1px solid var(--eps-hairline-2); border-radius: var(--eps-r);
	transition: border-color var(--eps-d-fast) var(--eps-ease-soft), background var(--eps-d-fast) var(--eps-ease-soft);
}
.ep-choice:hover { border-color: var(--eps-ink-3); }
.ep-choice input { margin: 2px 0 0; width: 22px; height: 22px; accent-color: var(--eps-accent-warm); flex: none; }
.ep-choice__title { display: block; font-weight: 600; }
.ep-choice__desc { display: block; font-size: var(--eps-t-sm); color: var(--eps-ink-3); margin-top: 2px; }
.ep-choice:has(input:checked) { border-color: var(--eps-accent-warm); background: var(--eps-accent-soft); box-shadow: 0 0 0 1px var(--eps-accent-warm) inset; }
.ep-choice:has(input:focus-visible) { outline: 3px solid var(--eps-focus); outline-offset: 2px; }
.ep-choice--row { align-items: center; }

/* zgody / checkboxy w liscie */
.ep-checks { display: flex; flex-direction: column; gap: var(--eps-sp-3); }
.ep-check { display: flex; gap: var(--eps-sp-3); align-items: flex-start; font-size: var(--eps-t-sm); color: var(--eps-ink-2); cursor: pointer; }
.ep-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--eps-accent-warm); flex: none; }

/* ===== rozwijane sekcje ==================================================== */
.ep-acc { border: 1px solid var(--eps-hairline); border-radius: var(--eps-r-sm); background: var(--eps-surface); }
.ep-acc > summary {
	display: flex; align-items: center; gap: var(--eps-sp-2);
	min-height: var(--eps-tap); padding: var(--eps-sp-2) var(--eps-sp-4);
	font-size: var(--eps-t-sm); font-weight: 600; color: var(--eps-accent);
	cursor: pointer; list-style: none;
}
.ep-acc > summary::-webkit-details-marker { display: none; }
.ep-acc > summary::before {
	content: ''; width: 10px; height: 10px; flex: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); transition: transform var(--eps-d) var(--eps-ease-soft);
}
.ep-acc[open] > summary::before { transform: rotate(45deg); }
.ep-acc__body { padding: 0 var(--eps-sp-4) var(--eps-sp-4); }

/* ===== pasek filtrow ======================================================= */
.ep-filters { display: flex; flex-wrap: wrap; gap: var(--eps-sp-3); align-items: flex-end; }
.ep-filters .ep-field { flex: 1 1 180px; max-width: 260px; }

/* ===== dane do przelewu (kopiowalne) ======================================= */
.ep-copyrow { display: flex; flex-wrap: wrap; gap: var(--eps-sp-3); align-items: center; justify-content: space-between; padding: var(--eps-sp-3) var(--eps-sp-4); background: var(--eps-surface-2); border: 1px solid var(--eps-hairline); border-radius: var(--eps-r-sm); }
.ep-copyrow__val { font-family: var(--eps-font); font-size: var(--eps-t-body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* ===== druk ================================================================ */
@media print {
	body.ep-panel-ui { background: #fff; }
	.ep-ui .ep-btn, .ep-tabs, .ep-head__actions, .ep-action { display: none !important; }
	.ep-panel { border-color: #999; box-shadow: none; break-inside: avoid; }
}

/* ===== warstwa nad trescia (zaleglosc, przypomnienie) ======================
   Jedna karta, bez gradientu i bez animowanej kropki. Zamknac mozna
   przyciskiem, klawiszem Escape i klikiem w tlo.                          */
.ep-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: var(--eps-sp-4);
	background: rgb(28 27 24 / 0.55);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	animation: epFadeIn 200ms var(--eps-ease) both;
}
.ep-modal[hidden] { display: none; }
.ep-modal__card {
	width: min(30rem, 100%);
	max-height: calc(100vh - 2 * var(--eps-sp-5));
	overflow-y: auto;
	background: var(--eps-surface);
	border: 1px solid var(--eps-hairline);
	border-radius: var(--eps-r-lg);
	box-shadow: var(--eps-lift-2);
	padding: var(--eps-sp-6) var(--eps-sp-5) var(--eps-sp-5);
	animation: epRise 280ms var(--eps-ease) both;
}
.ep-modal__card > * + * { margin-top: var(--eps-sp-4); }
.ep-modal__card h2 { font-size: var(--eps-t-h2); }
@keyframes epFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes epRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ep-modal, .ep-modal__card { animation: none; }
}