/* Zapisy.pro – PWA kursanta (mobile-first). Kolory i krój ze wspólnych tokenów (assets/shared/zp-tokens.css,
   ładowane przed tym plikiem). Nazwy lokalne zostają jako aliasy — tryb ciemny ([data-zp-theme="dark"]) działa w całym pliku.
   Pomarańcz (--warning) WYŁĄCZNIE „wymaga działania”; cyjan (--accent) = marka i element aktywny (tekstem tylko --accent-ink). */
:root {
    --navy: var(--zp-navy); --navy-2: var(--zp-navy-mid);
    --accent: var(--zp-accent); --accent-ink: var(--zp-accent-ink); --accent-soft: var(--zp-accent-soft);
    --warning: var(--zp-warning); --warning-soft: var(--zp-yellow-soft);
    --bg: var(--zp-bg); --surface: var(--zp-surface); --surface-2: var(--zp-surface-2);
    --border: var(--zp-border); --text: var(--zp-text); --text-2: var(--zp-text-2); --muted: var(--zp-text-m);
    --green: var(--zp-green); --green-soft: var(--zp-green-soft); --red: var(--zp-red); --red-soft: var(--zp-red-soft);
    --yellow: var(--zp-yellow); --yellow-soft: var(--zp-yellow-soft); --blue: var(--zp-blue); --blue-soft: var(--zp-blue-soft);
    --gray: var(--zp-gray); --gray-soft: var(--zp-gray-soft);
    --r: var(--zp-r-md); --r-sm: var(--zp-r); --r-xs: 8px;
    --sh: var(--zp-sh-sm); --sh-lg: var(--zp-sh-lg);
    --ink: var(--zp-navy); /* granat jako KOLOR TEKSTU/ikony (w ciemnym motywie jasny) */
    --btn: var(--zp-navy); /* tło przycisku głównego */
}
[data-zp-theme="dark"] { color-scheme: dark; --ink: var(--zp-text); --btn: var(--zp-navy-light); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5;
    font-family: var(--zp-font); -webkit-font-smoothing: antialiased; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.zp-ic { display: inline-block; vertical-align: -.18em; flex: none; }

/* Boot / spinner / skeleton / empty */
.zp-boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 22px;
    background: linear-gradient(160deg, var(--navy), var(--navy-2)); }
.zp-boot__logo { width: 180px; max-width: 56vw; }
.zp-spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.zp-skel-wrap { padding-top: 4px; }
.zp-skel { height: 78px; border-radius: var(--r); margin-bottom: 10px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 300% 100%; animation: shimmer 1.4s infinite; }
.zp-empty { text-align: center; color: var(--muted); padding: 44px 20px; }
.zp-empty__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--text-2); opacity: .45; }
.zp-empty__title { font-size: 17px; color: var(--ink); margin: 0 0 6px; font-weight: 700; }
.zp-empty__msg { max-width: 320px; margin: 0 auto; line-height: 1.55; }

/* Login */
.zp-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: linear-gradient(160deg, var(--navy), var(--navy-2)); }
.zp-login__card { background: var(--surface); border-radius: 18px; box-shadow: var(--sh-lg); padding: 30px 24px; width: 100%; max-width: 390px; }
.zp-login__brand { text-align: center; margin-bottom: 22px; }
.zp-logo { width: 72px; height: auto; }
.zp-login__sub { color: var(--muted); margin: 10px 0 0; font-size: 14px; }
.zp-login__alt { display: block; width: 100%; margin-top: 14px; background: none; border: none; color: var(--blue); font-size: 14px; cursor: pointer; min-height: 44px; }
.zp-login__sent { text-align: center; color: var(--text-2); }
.zp-login__sent svg { color: var(--accent-ink); }
.zp-login__sent h3 { margin: 12px 0 6px; color: var(--ink); }
.zp-login__sent p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Pola */
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email] { width: 100%; padding: 12px 13px; border: 1px solid var(--border);
    border-radius: var(--r-sm); font-size: 16px; color: var(--text); background: var(--surface); font-family: inherit; }
input:focus { outline: none; border-color: var(--navy-2); box-shadow: var(--zp-focus); }
.zp-label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* Przyciski */
.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface);
    color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 15px; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; min-height: 44px; }
.zp-btn:active { transform: scale(.98); }
.zp-btn--primary { background: var(--btn); color: #fff; border-color: var(--btn); }
.zp-btn--block { display: flex; width: 100%; margin-top: 12px; }
.zp-btn--lg { padding: 14px; font-size: 16px; border-radius: 12px; }
.zp-btn:disabled { opacity: .55; }

/* Shell / topbar / nav */
.zp-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.zp-topbar { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
.zp-topbar__brand { display: inline-flex; }
.zp-logo-sm { height: 26px; width: auto; }
/* Zwykłe (granatowe) logo szkoły bez wariantu na ciemne tło — malowane na biało. */
.zp-logo--mono { filter: brightness(0) invert(1); }
.zp-switch { flex: 1; min-width: 0; max-width: 62vw; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; border: none;
    border-radius: 100px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; cursor: pointer; text-align: left; }
.zp-switch--static { background: none; padding-left: 4px; cursor: default; }
.zp-switch__tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-switch__arr { transform: rotate(90deg); flex: none; opacity: .85; }
.zp-switch:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-switch-spacer { flex: 1; }
.zp-userchip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: none;
    color: #fff; border-radius: 100px; padding: 4px 10px 4px 4px; cursor: pointer; min-height: 44px; }
.zp-userchip__out { opacity: .85; display: inline-flex; }
.zp-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%;
    background: var(--accent); color: var(--zp-navy); font-weight: 700; line-height: 1; }
.zp-main { flex: 1; padding: 14px 14px 84px; }
/* Pasek braku sieci — przyklejony pod górnym paskiem (jego wysokość: 2 × 10px paddingu + 36px userchipa = 56px;
   zmieniając padding topbara lub wysokość userchipa, zmień też tę stałą). */
.zp-offline { position: sticky; top: calc(max(10px, env(safe-area-inset-top)) + 46px); z-index: 25; display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 12px; background: var(--yellow-soft); color: var(--text); border-bottom: 1px solid var(--yellow); font-size: 13px; font-weight: 700; }
.zp-offline .zp-ic { color: var(--yellow); }
.zp-offline__tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Przy widocznym pasku braku sieci komunikat ekranu Zajęcia schodzi pod pasek (36px). */
.zp-shell.is-offline .zp-toast2 { top: calc(max(10px, env(safe-area-inset-top)) + 46px + 36px + 8px); }
.zp-screen { animation: pop .18s ease; }

/* Baner instalacji */
.zp-install-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface);
    border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 13px; }
.zp-install-banner__ic { color: var(--ink); flex: none; display: inline-flex; }
.zp-install-banner__tx { flex: 1; min-width: 0; line-height: 1.35; }
.zp-install-banner__x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; line-height: 0; flex: none; border-radius: 6px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.zp-chip-btn2 { flex: none; border: 1px solid var(--btn); background: var(--btn); color: #fff; border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 44px; }
.zp-install-banner__x:focus-visible, .zp-chip-btn2:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-icon-btn { background: transparent; border: none; color: inherit; cursor: pointer; padding: 6px; line-height: 0; border-radius: 6px; min-height: 44px; min-width: 44px; }

.zp-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--border); display: flex; padding-bottom: env(safe-area-inset-bottom); }
.zp-bottomnav button { flex: 1; min-width: 0; background: none; border: none; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: 3px; padding: 9px 0 7px; color: var(--muted); min-height: 56px; }
.zp-bottomnav__ic { line-height: 0; opacity: .8; transition: opacity .15s, transform .15s; }
.zp-bottomnav__lb { font-size: 12px; font-weight: 600; }
.zp-bottomnav button.is-active { color: var(--ink); }
.zp-bottomnav button.is-active .zp-bottomnav__ic { opacity: 1; transform: translateY(-1px); color: var(--accent-ink); }
.zp-bottomnav button:focus-visible { outline: none; border-radius: 8px; }

/* Hero */
.zp-hero { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 14px; border-radius: var(--r);
    border: 1px solid var(--border); box-shadow: var(--sh); background: var(--surface); }
.zp-hero__icon { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.zp-hero__t { display: block; font-size: 17px; color: var(--ink); }
.zp-hero__m { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.zp-hero--ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); } .zp-hero--ok .zp-hero__icon { color: var(--green); } .zp-hero--ok .zp-hero__t { color: var(--green); }
.zp-hero--warn { background: var(--yellow-soft); border-color: color-mix(in srgb, var(--yellow) 30%, var(--border)); } .zp-hero--warn .zp-hero__icon { color: var(--yellow); }
.zp-hero--danger { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); } .zp-hero--danger .zp-hero__icon { color: var(--red); } .zp-hero--danger .zp-hero__t { color: var(--red); }

/* Kafelki */
.zp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.zp-tile { font: inherit; min-height: 44px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh);
    padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.zp-tile__lb { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.zp-tile__val { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.zp-card2 { width: 100%; font: inherit; text-align: left; min-height: 44px; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh); padding: 14px; cursor: pointer; color: var(--muted); margin-bottom: 14px; }
.zp-card2__main { flex: 1; min-width: 0; color: var(--text); } .zp-card2__main strong { display: block; } .zp-card2__main small { color: var(--muted); }

/* Karty / wiersze */
.zp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh); padding: 16px 18px; margin-bottom: 14px; }
.zp-card__h { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.zp-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.zp-row:last-child { border-bottom: none; }
.zp-row__k { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.zp-row__v { text-align: right; color: var(--text); }
.zp-meta { color: var(--muted); font-size: 13px; }
.zp-meta small { font-size: 12px; }
/* Domyślne <small> to 0,83 rozmiaru rodzica (< 12 px w wierszach): nigdy poniżej 12 px. */
.zp-shell small { font-size: 12px; }

/* Badge */
.zp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.zp-badge--success { background: var(--green-soft); color: var(--green); }
.zp-badge--warning { background: var(--yellow-soft); color: var(--yellow); }
.zp-badge--error   { background: var(--red-soft); color: var(--red); }
.zp-badge--info    { background: var(--blue-soft); color: var(--blue); }
.zp-badge--gray, .zp-badge--neutral { background: var(--gray-soft); color: var(--gray); }

/* Pasek postępu */
.zp-prog2 { margin-bottom: 14px; }
.zp-prog2__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; color: var(--text-2); }
.zp-prog2__head span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.zp-prog2__track { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; overflow: hidden; }
.zp-prog2__fill { display: block; height: 100%; background: var(--accent); border-radius: 100px; transition: width .4s; }
.zp-prog2__fill.is-full { background: var(--green); }

/* Historia lekcji */
.zp-hist { border-left: 3px solid var(--border); background: var(--surface-2); border-radius: 0 var(--r-xs) var(--r-xs) 0;
    padding: 9px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.zp-hist__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Materiały */
.zp-mat-list { list-style: none; margin: 0; padding: 0; }
.zp-mat { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.zp-mat:last-child { border-bottom: none; }
.zp-mat.is-wyrozniony { margin: 0 -10px; padding: 12px 10px; border-radius: var(--r-sm); background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); animation: zp-wyroznij 1.6s ease-out 1.8s forwards; }
@keyframes zp-wyroznij { to { background: transparent; box-shadow: 0 0 0 1px transparent; } }
.zp-mat__btn:focus-visible { outline: none; }
.zp-mat:has(.zp-mat__btn:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: var(--r-sm); }
@supports not selector(:has(*)) { .zp-mat:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: var(--r-sm); } } /* zapas dla przeglądarek bez :has() */
.zp-mat__ic { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink); }
.zp-mat__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zp-mat__title { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.zp-mat__title:hover { text-decoration: underline; }
.zp-mat__btn { display: block; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.zp-mat__btn:focus-visible { outline: none; box-shadow: none; }
.zp-mat__info small { color: var(--muted); font-size: 12px; }
.zp-mat__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.zp-mat__cat { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 8px; border-radius: 100px; }
.zp-mat__act { flex: none; color: var(--muted); }

/* Sheet */
.zp-sheet-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--zp-navy) 55%, transparent); z-index: 60; display: flex; align-items: flex-end; }
.zp-sheet { background: var(--surface); width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
    box-shadow: var(--sh-lg); animation: sheetup .24s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
.zp-sheet__grip { width: 40px; height: 4px; border-radius: 100px; background: var(--border); margin: 8px auto 0; flex: none; }
.zp-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); }
.zp-sheet__head strong { font-size: 16px; color: var(--ink); }
.zp-sheet__body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.zp-sec { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 8px; display: inline-flex; align-items: center; gap: 7px; }
.zp-set-ok { background: var(--green-soft); color: var(--green); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; margin-top: 10px; }
.zp-prefs { border: 0; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.zp-prefs legend { padding: 0; margin-bottom: 6px; }
.zp-pref { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; cursor: pointer; }
.zp-pref input { width: 22px; height: 22px; margin: 0; accent-color: var(--zp-accent); flex: none; }
.zp-pref input:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-set-actions { display: flex; gap: 8px; margin-top: 8px; }
.zp-set-actions .zp-btn { flex: 1; margin-top: 0; }

.zp-error { background: var(--red-soft); color: var(--red); padding: 11px 13px; border-radius: var(--r-sm); margin: 10px 0; font-size: 14px; font-weight: 500; }
.zp-error--akcja { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zp-error--akcja .zp-btn { flex: none; }

/* Jazdy / rezerwacja (F2) */
.zp-book-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zp-book-cta .zp-btn { flex: none; }
.zp-hint2 { color: var(--muted); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 12px; margin: -4px 0 14px; }

/* Dodawanie do kalendarza (migawka: Google + .ics) */
.zp-card__hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.zp-more { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; min-height: 44px; min-width: 44px; }
.zp-more:hover { text-decoration: underline; }
.zp-cal-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-height: 44px; }
.zp-cal-all:hover { background: var(--surface-2); }
.zp-cal-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.zp-cal-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-decoration: none; min-height: 44px; }
.zp-cal-opt:hover { background: var(--surface-2); border-color: var(--ink); }
.zp-cal-all:focus-visible, .zp-cal-opt:focus-visible { outline: none; box-shadow: var(--zp-focus); }
/* Zajęcia: nagłówki sekcji, karta (jak u instruktora), plakietki stanu, arkusz szczegółów */
.zp-zaj-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.zp-zaj-h h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
section:first-child > .zp-zaj-h { margin-top: 0; }
.zp-lcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--acc, var(--border));
    border-radius: var(--r); box-shadow: var(--sh); margin-bottom: 11px; overflow: hidden; }
.zp-lcard__row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 13px; cursor: pointer;
    background: none; border: none; font: inherit; color: inherit; text-align: left; }
.zp-lcard__time { display: flex; flex-direction: column; align-items: flex-start; min-width: 112px; max-width: 124px; line-height: 1.2; }
.zp-lcard__time strong { font-size: 15px; color: var(--ink); }
.zp-lcard__time small { font-size: 12px; color: var(--muted); }
.zp-lcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zp-lcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 8px; row-gap: 4px; }
.zp-lcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.zp-lcard__type { font-weight: 600; font-size: 13px; color: var(--text-2); }
.zp-lcard__hrs { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.zp-lcard__hrs > .zp-ic { color: var(--muted); }
.zp-lcard__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.zp-lcard__acts { display: flex; gap: 1px; border-top: 1px solid var(--border); background: var(--surface-2); }
.zp-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 6px; font-size: 13px; font-weight: 600;
    color: var(--text-2); background: transparent; border: none; cursor: pointer; text-decoration: none; min-height: 44px; font-family: inherit; }
.zp-act:active { background: var(--gray-soft); }
.zp-act--warn { color: color-mix(in srgb, var(--warning) 88%, #000); font-weight: 800; }
.zp-lcard__row:focus-visible, .zp-act:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-cal-opts--karta { padding: 8px 12px 10px; border-top: 1px solid var(--border); background: var(--surface-2); }
.zp-btn--warn { color: color-mix(in srgb, var(--warning) 88%, #000); border-color: var(--warning); font-weight: 800; }
.zp-pl { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.zp-pl--warn    { background: color-mix(in srgb, var(--warning) 88%, #000); color: #fff; }
.zp-pl--now     { background: var(--green); color: #fff; }
.zp-pl--ok      { background: var(--green-soft); color: var(--green); }
.zp-pl--err     { background: var(--red-soft); color: var(--red); }
.zp-pl--info    { background: var(--blue-soft); color: var(--blue); }
.zp-pl--neutral { background: var(--gray-soft); color: var(--text-2); }
[data-zp-theme="dark"] .zp-pl--ok  { color: color-mix(in srgb, var(--green) 40%, #fff); }
[data-zp-theme="dark"] .zp-pl--err { color: color-mix(in srgb, var(--red) 40%, #fff); }
.zp-stan--przyszle { --acc: var(--zp-border-s); }
.zp-stan--trwa { --acc: var(--green); }
.zp-stan--do_potwierdzenia { --acc: var(--warning); }
.zp-stan--zamkniete { --acc: var(--green); }
.zp-stan--nieobecnosc { --acc: var(--red); }
.zp-stan--odwolane { --acc: var(--gray); }
.zp-kat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1.5px solid var(--kat, var(--border)); border-radius: 100px; font-size: 12px; font-weight: 700; color: var(--text); }
.zp-kat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kat, var(--muted)); }
.zp-sheet__foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.zp-sheet__foot .zp-btn--block { margin-top: 0; }
.zp-szcz__data { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.zp-szcz__bad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.zp-szcz__pods { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.zp-szcz__pods h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.zp-szcz__pods p { margin: 0; white-space: pre-line; font-size: 14px; color: var(--text); }
.zp-fld-lb { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
.zp-bk-field { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font-size: 15px; min-height: 46px; }
.zp-bk-field:focus-visible { outline: none; border-color: var(--ink); box-shadow: var(--zp-focus); }
.zp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.zp-slot { min-height: 44px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.zp-slot.is-on { background: var(--btn); border-color: var(--btn); color: #fff; }
.zp-slot:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-toast2 { position: sticky; top: calc(max(10px, env(safe-area-inset-top)) + 46px + 8px); z-index: 5; background: var(--btn); color: #fff; border-radius: var(--r-sm);
    padding: 10px 14px; font-size: 13.5px; font-weight: 600; box-shadow: var(--sh-lg); animation: pop .2s ease; margin-bottom: 12px; text-align: center; }

/* Zespół firmowy (F4) */
.zp-backhead { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
    color: var(--text-2); font-size: 15px; font-weight: 700; padding: 4px 2px 4px; min-height: 44px; margin-bottom: 8px; }
.zp-backhead:focus-visible { outline: none; box-shadow: var(--zp-focus); border-radius: 8px; }
.zp-flip { transform: scaleX(-1); }
.zp-card2__ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center; }
.zp-zgl { display: flex; flex-direction: column; gap: 8px; }
.zp-zgl button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 10px 14px; text-align: left;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-zgl button small { color: var(--muted); font-size: 12px; font-weight: 500; }
.zp-zgl button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.zp-zgl button:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-member { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.zp-member:first-of-type { border-top: none; }
.zp-member__egz { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.zp-member__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zp-member__top strong { font-size: 14px; }
.zp-member small { color: var(--muted); font-size: 12px; }

/* Baner aktualizacji */
.zp-update-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: var(--accent-soft); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.zp-update-banner__tx { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }

/* A11y: ten sam pierścień fokusu (--zp-focus) dla każdego elementu interaktywnego. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.zp-btn:focus-visible, .zp-tile:focus-visible, .zp-card2:focus-visible, .zp-userchip:focus-visible, .zp-icon-btn:focus-visible {
    outline: none; box-shadow: var(--zp-focus); }
.zp-bottomnav button:focus-visible { box-shadow: inset 0 0 0 3px rgba(21,88,172,.5); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

@media (min-width: 620px) { .zp-main { max-width: 720px; margin: 0 auto; } .zp-sheet { max-width: 600px; margin: 0 auto; border-radius: 20px; } .zp-sheet-overlay { align-items: center; padding: 20px; } }

/* Tryb ciemny: tam, gdzie same tokeny nie wystarczają (wartości jak w assets/pwa/app.css). */
[data-zp-theme="dark"] .zp-error { color: color-mix(in srgb, var(--red) 45%, #fff); }
[data-zp-theme="dark"] .zp-set-ok { color: color-mix(in srgb, var(--green) 45%, #fff); }
[data-zp-theme="dark"] .zp-hero--ok .zp-hero__t, [data-zp-theme="dark"] .zp-hero--ok .zp-hero__icon { color: color-mix(in srgb, var(--green) 45%, #fff); }
[data-zp-theme="dark"] .zp-hero--danger .zp-hero__t, [data-zp-theme="dark"] .zp-hero--danger .zp-hero__icon { color: color-mix(in srgb, var(--red) 45%, #fff); }
[data-zp-theme="dark"] .zp-hero--warn .zp-hero__icon, [data-zp-theme="dark"] .zp-offline .zp-ic { color: color-mix(in srgb, var(--warning) 60%, #fff); }
[data-zp-theme="dark"] .zp-badge--success { color: color-mix(in srgb, var(--green) 45%, #fff); }
[data-zp-theme="dark"] .zp-badge--warning { color: color-mix(in srgb, var(--warning) 55%, #fff); }
[data-zp-theme="dark"] .zp-badge--error { color: color-mix(in srgb, var(--red) 45%, #fff); }
[data-zp-theme="dark"] .zp-badge--info { color: color-mix(in srgb, var(--blue) 45%, #fff); }
[data-zp-theme="dark"] .zp-badge--gray, [data-zp-theme="dark"] .zp-badge--neutral { color: var(--text-2); }
[data-zp-theme="dark"] .zp-login__alt { color: color-mix(in srgb, var(--blue) 45%, #fff); }
[data-zp-theme="dark"] .zp-toast2 { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
[data-zp-theme="dark"] .zp-bottomnav button:focus-visible { box-shadow: inset 0 0 0 3px rgba(90,150,230,.6); }
/* Logo na karcie logowania: zwykłe na jasnej, wariant na ciemne tło na ciemnej. */
.zp-logo--na-ciemnym { display: none; }
[data-zp-theme="dark"] .zp-logo--na-jasnym { display: none; }
[data-zp-theme="dark"] .zp-logo--na-ciemnym { display: inline-block; }
/* „Wygląd” w Ustawieniach (wzór: PWA instruktora) */
.zp-seg { display: flex; gap: 8px; }
.zp-seg__btn { flex: 1; min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--r-sm); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.zp-seg__btn.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.zp-st--motyw { --c: var(--zp-navy); }
[data-zp-theme="dark"] .zp-st--motyw { --c: var(--zp-navy-light); }
.zp-set-warn { background: var(--yellow-soft); color: var(--text); border: 1px solid var(--yellow); border-radius: var(--r-sm); padding: 11px 13px; margin: 10px 0; font-size: 14px; font-weight: 500; }
.zp-login__note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.zp-pass__toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px; background: none; border: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Pulpit wg fazy */
.zp-greet { margin: 2px 0 14px; font-size: 22px; font-weight: 700; color: var(--ink); }
.zp-act-card { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding: 16px 18px; border-radius: var(--r);
    background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-left: 4px solid var(--warning); }
.zp-act-card__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--warning); }
.zp-act-card__t { font-size: 18px; color: var(--ink); }
.zp-act-card__m { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.zp-phase { display: flex; gap: 14px; align-items: flex-start; }
.zp-phase__ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); }
.zp-phase__main { min-width: 0; flex: 1; }
.zp-phase__t { display: block; font-size: 17px; color: var(--ink); }
.zp-phase__m { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.zp-phase .zp-btn { margin-top: 12px; }
.zp-phase--info .zp-phase__ic { background: var(--blue-soft); color: var(--blue); }
.zp-phase--ok .zp-phase__ic { background: var(--green-soft); color: var(--green); }
.zp-phase--uwaga { border-left: 4px solid var(--warning); }
.zp-phase--uwaga .zp-phase__ic { background: var(--warning-soft); color: var(--warning); }
.zp-phase--neutral .zp-phase__ic { background: var(--gray-soft); color: var(--gray); }
.zp-next { display: flex; flex-direction: column; gap: 3px; }
.zp-next__when { font-size: 17px; color: var(--ink); }
.zp-next__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.zp-next__acts { display: flex; gap: 10px; margin-top: 12px; }
.zp-next__acts .zp-btn { flex: 1; }
.zp-muted-p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.zp-card .zp-prog2 + .zp-muted-p, .zp-card .zp-muted-p + .zp-prog2 { margin-top: 10px; }
.zp-switch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zp-switch-opt { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; min-height: 44px; padding: 12px 14px; cursor: pointer;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); }
.zp-switch-opt.is-current { border-color: var(--accent); background: var(--accent-soft); }
.zp-switch-opt.is-current svg { color: var(--accent-ink); }
.zp-switch-opt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zp-switch-opt__main strong { color: var(--ink); }
.zp-switch-opt__main small { color: var(--muted); font-size: 12.5px; }
.zp-switch-opt:focus-visible { outline: none; box-shadow: var(--zp-focus); }
[data-zp-theme="dark"] .zp-act-card__kicker, [data-zp-theme="dark"] .zp-phase--uwaga .zp-phase__ic { color: color-mix(in srgb, var(--warning) 60%, #fff); }
[data-zp-theme="dark"] .zp-phase--info .zp-phase__ic { color: color-mix(in srgb, var(--blue) 45%, #fff); }
[data-zp-theme="dark"] .zp-phase--ok .zp-phase__ic { color: color-mix(in srgb, var(--green) 45%, #fff); }

/* Arkusz odwołania zajęć */
.zp-odw__typ { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.zp-odw__regula { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.zp-odw__strata { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 11px 13px; border: 1px solid var(--warning); border-left-width: 4px;
    border-radius: var(--r-sm); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); font-size: 13.5px; color: var(--text); }
.zp-odw__strata strong { color: color-mix(in srgb, var(--warning) 88%, #000); font-size: 15px; }
[data-zp-theme="dark"] .zp-act--warn, [data-zp-theme="dark"] .zp-btn--warn, [data-zp-theme="dark"] .zp-odw__strata strong { color: color-mix(in srgb, var(--warning) 60%, #fff); }
.zp-odw__powod { display: block; width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 16px;
    font-family: inherit; color: var(--text); background: var(--surface); resize: vertical; min-height: 84px; }
.zp-odw__powod:focus { outline: none; border-color: var(--navy-2); box-shadow: var(--zp-focus); }
.zp-odw .zp-error { margin-top: 12px; }
.zp-odw__akcje { display: flex; gap: 10px; }
.zp-odw__akcje .zp-btn { flex: 1; min-height: 44px; margin-top: 0; }
.zp-odw__akcje .zp-btn--primary { flex: 2; }
.zp-btn--warn-fill { background: color-mix(in srgb, var(--warning) 88%, #000); border-color: color-mix(in srgb, var(--warning) 88%, #000); color: #fff; }
.zp-szcz__egz { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Więcej (menu) i Pomoc i kontakt */
.zp-chev { color: var(--muted); font-size: 24px; flex: none; }
.zp-wiecej__kto { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.zp-wiecej__kto strong { display: block; font-size: 17px; color: var(--ink); }
.zp-wiecej__kto small { font-size: 13px; color: var(--text-2); }
.zp-menu { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; margin: 0 0 16px; }
.zp-menu__w { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.zp-menu__w:last-child { border-bottom: none; }
.zp-menu__w:focus-visible { outline: none; box-shadow: inset var(--zp-focus); }
.zp-menu__ic { display: inline-flex; color: var(--ink); }
.zp-menu__tx { flex: 1; display: flex; flex-direction: column; }
.zp-menu__tx strong { font-size: 15px; }
.zp-menu__tx small { font-size: 13px; color: var(--text-2); }
.zp-wiecej__wyloguj { margin-top: 4px; }
.zp-kontakt__godz { display: flex; flex-direction: column; align-items: flex-end; }
.zp-kontakt__akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zp-kontakt__akcje .zp-btn { flex: 1 1 30%; min-height: 44px; }

/* Postęp (etap 4) */
.zp-ekran__t { margin: 0 0 12px; font-size: 20px; color: var(--ink); }
.zp-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zp-hist-list .zp-hist { margin-bottom: 0; }
.zp-hist__pods { margin: 6px 0 0; white-space: pre-line; font-size: 14px; color: var(--text); }

/* Mój kurs i płatność: baner powrotu z bramki i lista wpłat */
.zp-powrot { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); border-left: 4px solid var(--blue); background: var(--blue-soft); color: var(--ink); }
.zp-powrot strong { display: block; font-size: 16px; }
.zp-powrot p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.zp-powrot .zp-btn { margin-top: 10px; }
.zp-powrot--ok { border-left-color: var(--green); background: var(--green-soft); }
.zp-powrot--info { border-left-color: var(--blue); background: var(--blue-soft); }
.zp-powrot--err { border-left-color: var(--red); background: var(--red-soft); }
.zp-wplaty { list-style: none; margin: 0; padding: 0; }
.zp-wplata { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.zp-wplata:first-child { border-top: 0; padding-top: 0; }
.zp-wplata__kw { font-weight: 600; color: var(--ink); }
.zp-wplata__meta, .zp-wplata__data { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
/* Materiały: filtr „Wszystkie / Nowe”, kategorie, znacznik „Nowe” */
.zp-seg--mat { margin-bottom: 10px; }
.zp-seg--mat .zp-seg__btn.is-active { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.zp-seg--mat .zp-seg__btn:focus-visible, .zp-chip:focus-visible { outline: none; box-shadow: var(--zp-focus); }
.zp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.zp-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 100px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.zp-chip.is-active { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.zp-mat__row { display: flex; align-items: center; flex-wrap: wrap; }
.zp-mat__nowe { margin-left: 6px; }