/* base.css — Mózg w Rytmie
   Reset + custom properties (tokeny z brief/04-STYLEGUIDE.md) + bazowe komponenty.

   ⛔ STYLOWANIE AD HOC POZA DESIGN-SYSTEMEM ZABRONIONE. Każdy hex wpisany poza :root
      wyjdzie w pomiarze `npm run ekran-diff` jako ΔE⚠️ (kolory liczone WZGLĘDEM tokenów
      z tego pliku). Nowy kolor = najpierw token tutaj + karta w design-system/.
   Biblioteka podglądów: design-system/ (spis: brief/04-STYLEGUIDE.md → „Biblioteka"). */

/* ============================================================================
   KROJE — self-host w public/fonts/ (kanon LA5.2). ⛔ zero fonts.googleapis.com.
   Pliki WARIACYJNE: jeden plik = całe pasmo wag; latin + latin-ext ZMERGOWANE
   w jednym subsecie (żadnego unicode-range → brak CLS na pierwszym „ł").
   Rewizja = NOWA NAZWA pliku (GATE C3 preflight), nigdy nadpisanie w miejscu.
   ============================================================================ */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ============================================================================
   TOKENY — JEDNO ŹRÓDŁO PRAWDY (kontrakt: brief/04-STYLEGUIDE.md, D-23/D-26/D-29).
   Liczby w komentarzach = POMIAR z `node design-system/_pomiar.mjs` (WCAG 2.1
   + ΔE2000), nie oszacowanie. Zmiana wartości ⇒ przelicz pomiar i podmień komentarz.
   design-system/tokens.css to AUTOGENEROWANA kopia tego bloku (nie edytuj jej ręcznie).
   ============================================================================ */
:root {
  /* ── POWIERZCHNIE ──────────────────────────────────────────────────────── */
  --color-bg:            #FFF8EB; /* „kremowy papier" — tło strony */
  --color-surface:       #FFFDF7; /* karty, panele, wiersze tabeli (ΔE 3,4 od tła) */
  --color-surface-warm:  #FFEFD6; /* „jasna morela": pasy wyróżnione, kafle, puste stany */
  --dot-czeka:           #F0A81E; /* kropka „czeka”: najjasniejszy bursztyn >=3,0 na moreli */
  --color-accent-soft:   #FDE3DC; /* tint koralowy — TYLKO tło; tekst na nim = granat (9,99) */
  --color-accent2-soft:  #E4F3F0; /* tint turkusowy — tło ikon/podpowiedzi (granat 10,68) */

  /* ── TEKST ─────────────────────────────────────────────────────────────── */
  --color-text:          #16394B; /* granat: 11,55 na tle · 12,00 na karcie · 10,15 na moreli */
  --color-text-muted:    #4A5A66; /* 6,75 na tle · 5,93 na moreli — AA wszędzie */
  --color-text-invert:   #FFF8EB; /* tekst na granacie (12,20 vs biel 11,55 — krem cieplejszy) */

  /* ── AKCENT KORALOWY (znak marki; D-29: para accent + accent-strong) ────── */
  --color-accent:        #F4552F; /* POWIERZCHNIA I ZNAK = koral ZNAKU (D-23), nie wariant.
                                     3,21 na tle ⇒ OK dla krawędzi 2 px i grafiki;
                                     ⛔ NIGDY pod tekstem (biel 3,39 < AA).
                                     (D-29 podawał #F05A47; ZMIERZONE ΔE2000 do koralu logo = 4,85,
                                     czyli rozjazd WIDOCZNY na każdym ekranie z paskiem marki —
                                     ujednolicone do kanonu znaku; reguła pary z D-29 bez zmian) */
  --color-accent-strong: #CE3F2B; /* KORAL JAKO TEKST: 4,55 na tle ✔; biel na nim 4,81 ✔ */
  --color-accent-hover:  #D9452F; /* hover POWIERZCHNI koralowej; ⛔ nie pod tekstem (4,34) */
  --color-accent-text:   #FFFFFF; /* biel — wyłącznie na --color-accent-strong */

  /* ── AKCENT TURKUSOWY (stan „zrobione"; wartość = turkus znaku D-23) ────── */
  --color-accent2:       #109C8C; /* 3,23 na tle ⇒ krawędź 2 px, kropki, ikony ≥ 24 px.
                                     (04 dawał #2AAE9B — ZMIERZONE 2,61 < 3,0, poniżej progu
                                     nietekstowego WCAG 1.4.11; kanon D-23 mieści się w normie) */
  --color-accent2-strong:#0E7A6D; /* turkus jako TEKST/IKONA: 4,94 na tle · biel na nim 5,22 */
  --color-accent2-text:  #0B6459; /* turkus jako tekst na MORELI: 5,97 (strong dałby 4,34 ✘) */

  /* ── AKCJA GŁÓWNA (D-26 ratyfikowane pomiarem — patrz design-system/DECYZJE-DESIGN.md) ── */
  --color-cta:           #16394B; /* granat. Krem na nim 11,55 · biel 12,20 */
  --color-cta-hover:     #0E2B38; /* krem 13,90 */
  --color-cta-text:      #FFF8EB;

  /* ── OBRYSY ────────────────────────────────────────────────────────────── */
  --color-border:        #EADFCB;
  --color-border-warm:   #F3DCB4; /* hairline NA MORELI (chlodny gubi sie w cieple) */ /* hairline 1 px karty/tabeli — DEKORACYJNY (1,30) */
  --color-border-strong: #C9B694; /* separatory tabeli, podziały sekcji (1,95) */
  --color-field:         #8F7C55; /* OBRYS STEROWNIKA (input, select, checkbox, kropka pusta):
                                     3,98 na karcie · 3,78 na tle · 3,37 na moreli — WCAG 1.4.11 ✔ */

  /* ── STANY ─────────────────────────────────────────────────────────────── */
  --color-success:       #0E7A6D; /* = turkus mocny: „Ukończone", plan zatwierdzony */
  --color-success-text:  #0B6459; /* wariant tekstowy (czytelny też na moreli) */
  --color-warning:       #8A5A00; /* bursztyn: 5,61 na tle · 4,93 na moreli */
  --color-warning-text:  #7A4F00; /* wariant tekstowy: 6,75 na tle · 5,93 na moreli */
  --color-error:         #C0362C; /* ⛔ WYŁĄCZNIE DESTRUKCJA. Biel 5,52. ΔE2000 do CTA-granatu
                                     = 45,1 (nie do pomylenia); do koralu #F05A47 = 14,0 */
  --color-error-hover:   #9E2B23; /* hover przycisku destrukcji (biel 7,00) */
  --color-focus:         #16394B; /* pierścień 2 px + offset 2 px; 11,55 na tle, 3,64 na koralu */

  /* ── KRAWĘDŹ-SYGNATURA STANU DOKUMENTU (D-26) ──────────────────────────── */
  --edge-w:              2px;
  --edge-czeka:          var(--color-accent);         /* czeka na człowieka (3,18 ✔ ≥ 3,0) */
  --edge-ok:             var(--color-accent2-strong); /* zatwierdzone (4,94 ✔) */

  /* ── PODPIS WIZUALNY: kształt odręcznego zakreślenia (kolor nadaje maska, nie SVG) ─── */
  --mr-kreska: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%208%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1.5%205.6C22%202.3%2047%201.4%2070%202.2c18%20.6%2034%202%2048.4%203.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --mr-kreska-2: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%208%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1.5%204.4C20%206.6%2044%207%2068%206.2c18-.6%2035-2%2050.5-3.9%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");

  --mr-ptaszek: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2013l4.5%204.5L19%207%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

  /* ── TYPOGRAFIA ────────────────────────────────────────────────────────── */
  --font-head: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   13px;  /* mikroetykiety, wersaliki */
  --fs-sm:   14px;  /* metadane, podpisy kolumn */
  --fs-base: 16px;
  --fs-md:   18px;  /* zdanie prowadzące, opisy w kolumnie bocznej, nawigacja */
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  30px;
  --fs-3xl:  46px;  /* „duże cyfry wyników" — liczniki MM:SS, „X z Y" */
  --fs-4xl:  48px;  /* H1 ekranu - zmierzone z makiet (cap 37,5 px @1280) */
  --fs-child: 18px; /* ⛔ MINIMUM na ekranach dziecka (5–10 lat) */
  --fs-projektor: 32px; /* ⛔ MINIMUM w oknie prezentacji (rzutnik) */
  --lh-body: 1.55;
  --lh-head: 1.2;
  --fw-body: 400; --fw-label: 600; --fw-head: 700; --fw-display: 800;

  /* ── GEOMETRIA ─────────────────────────────────────────────────────────── */
  --radius:      14px;  /* karty, pasy, płyty — ⛔ NIE przyciski (te biorą --radius-sm) */
  --radius-sm:   10px;  /* chip, badge, input, kafel materiału */
  --radius-lg:   18px;  /* duże pasy i modale */
  --radius-pill: 999px;
  /* SKALA PUDEŁEK — zmierzona na makietach; zabija surowe px w warstwie .mr-* */
  --box-1: 32px;  /* ikona mała */
  --box-2: 40px;  /* awatar w tabeli 35–39 · ikona kwadratowa w wierszu 35–37,5 */
  --box-3: 48px;  /* ikona w kółku 46,7–48,3 · znacznik osi 47,5 */
  --box-4: 54px;  /* ikona kwadratowa w karcie 52,5 · z obwódką 53,3 */
  --box-5: 72px;  /* ikona karty przykładu 62,5–69,2 */
  --box-6: 80px;  /* ikona pasa 80,0 */
  --mr-strzalka: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2040%22%3E%3Cpath%20d%3D%22M44%204C30%204%2012%2010%2010%2030%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%2022l6%2012%2010-8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); /* WYŁĄCZNIE kropki postępu i paski postępu */
  --border-w: 1px;
  --shadow-sm:  0 2px 8px rgba(22, 57, 75, .10);  /* ciepły, miękki — profil zmierzony na makiecie */
  --shadow-btn: 0 2px 6px rgba(22, 57, 75, .12);  /* sterowniki: pik +1 px, zanik +10 px */
  --shadow-md:  0 6px 18px rgba(22, 57, 75, .08);
  --shadow-doc: 0 2px 0 rgba(22, 57, 75, .10);   /* warstwa DOKUMENTU (raport) — cień kontaktowy */

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --maxw: 1080px;
  --maxw-wide: 1200px;  /* widoki tabelaryczne operatora */
  --tap: 44px;          /* minimalny cel dotykowy */
  --tap-child: 56px;    /* ⛔ minimum na ekranach dziecka */

  /* Skala z-index (S27) — JEDNA prawda o warstwach; zero magicznych liczb w komponentach.
     Kolejność rośnie z „ważnością" nakładki. Paywall MUSI być NAD overlayem gatingu
     (canceled/past_due), inaczej user nie wybierze planu (bug Fachmata). */
  --z-sticky:  50;
  --z-fab:     900;
  --z-aha:     940;
  --z-overlay: 1000;
  --z-modal:   1050;
  --z-paywall: 1100;
  --z-banner:  1150;
  --z-toast:   1200;
  --z-maintenance: 1300;  /* plansza przerwy technicznej — NAD wszystkim (B10) */

  /* ── WARSTWA ZABAWOWA — kanon Claude Design (18.08, projekt CD 7a4787b0; DD-8) ──
     Kanwy design-system/claude-design/*.dc.html niosą UKŁAD i charakter; KOLORY
     mapujemy na zmierzone tokeny wyżej — kanwa używa surowych #F05A47/#2AAE9B/
     #1D3557 sprzed pomiaru WCAG (biały tekst na #F05A47 = 3,39 < AA). */
  --font-fun: "Baloo 2", "Nunito", system-ui, sans-serif; /* krój DISPLAY warstwy zabawowej */
  --fs-2xs: 12px;  /* mikro-notki pomocnicze operatora; ⛔ nie na ekranach dziecka */
  /* skala MATERIAŁU — emoji/obrazki par ćwiczeń (CONTENT, nie ikony UI) */
  --mat-1: 44px;   /* znak zakrycia „?” w karcie */
  --mat-2: 56px;   /* piktogram sceny (wyciszenie) */
  --mat-3: 64px;   /* piktogram finału */
  --mat-4: 92px;   /* okaz pary — widok trenera */
  --mat-5: 96px;   /* piktogram oczekiwania — projektor */
  --mat-6: 110px;  /* cyfra jako okaz — widok trenera */
  --mat-7: 120px;  /* okaz pary — projektor */
  --mat-8: 150px;  /* cyfra jako okaz — projektor */
  /* cienie POP — twarde „0 Npx 0” (sygnatura kanw CD; ⛔ nie mieszaj z --shadow-sm na jednej karcie) */
  --shadow-pop:     0 4px 0 rgba(233, 196, 143, .38);
  --shadow-pop-lg:  0 5px 0 rgba(233, 196, 143, .38);
  --shadow-pop-cta: 0 3px 0 rgba(148, 32, 24, .35);  /* pod koralem-strong #CE3F2B */
  --shadow-pop-ok:  0 3px 0 rgba(9, 84, 75, .35);    /* pod turkusem-strong #0E7A6D */
  --color-oslona:       #FFE7C2; /* zakrycie odpowiedzi przed odsłonięciem (mocna morela) */
  --color-accent2-line: #BFE5DE; /* obwódka pasów turkusowych (dekoracyjna, na accent2-soft) */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-body);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-head); font-weight: var(--fw-head); }
h1 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); font-weight: var(--fw-display); }
h2 { font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }
a { color: var(--color-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
/* R1: sterowniki dziedziczą krój i kolor tekstu — bez tego <input type=radio> niesie
   systemową czerń (zmierzone rgb(0,0,0), ΔE 20,6 do najbliższego tokenu). */
input, select, textarea, button { font-family: inherit; color: inherit; }
/* R1: <hr> ma w UA własny `color: gray`; separator jest komponentem systemu, nie domyślną kreską. */
hr { border: 0; border-top: var(--border-w) solid var(--color-border); margin: var(--sp-4) 0; color: inherit; }
ul { list-style: none; }

/* ---- Layout helpers ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-8) 0; }
/* Kotwice (#cennik itp.) nie chowają nagłówka pod sticky-headerem/banerem przy skoku.
   Domyślnie 0px (topnav NIE jest sticky → brak sztucznej luki). Apka, która USTAWI sticky
   nawigację landingu, definiuje --sticky-offset (= wysokość paska) na :root i kotwice
   automatycznie dostają oddech. Wzorzec: dobrywstep .lp-section[id] scroll-margin-top:96px. */
.section[id] { scroll-margin-top: var(--sticky-offset, 0px); }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.muted { color: var(--color-text-muted); }
.hidden { display: none !important; }

/* ---- Button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, opacity .15s;
  background: var(--color-surface); color: var(--color-text);
  min-height: var(--tap); /* R1: .btn-sm mierzyl 34 px — cel dotykowy < 44 (pomiar _render.mjs) */
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-cta); color: var(--color-cta-text); border-color: var(--color-cta); }
.btn-primary:hover { background: var(--color-cta-hover); }
.mr-pas .btn-primary, .mr-bar__akcja .btn-primary { box-shadow: 0 0 0 4px var(--color-bg); }
.btn-ghost { background: transparent; border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-surface); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Wylaczone "wypelnione" przyciski wygladaly jak aktywne (granat + biale, kontrast ~2,4:1
   po opacity) — stan disabled mowi wprost: szara powierzchnia, przygaszony tekst. */
.btn-primary:disabled { background: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); }
.btn-block { width: 100%; }

/* ---- Card ---- */
.card {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

/* ---- Input / form ---- */
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--color-accent2-strong); }
.field { display: block; margin-bottom: var(--sp-4); }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: var(--sp-2); }
.input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: var(--sp-3); color: var(--color-text); background: var(--color-bg);
  border: var(--border-w) solid var(--color-field); border-radius: var(--radius-sm);
}
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input[readonly], .input:disabled {
  background: var(--color-bg); color: var(--color-text-muted);
  border-color: var(--color-border-strong); cursor: default;
}

/* ---- Feedback message (auth/errors) ---- */
.msg { padding: var(--sp-3); border-radius: var(--radius); font-size: .9rem; }
.msg-error   { background: var(--color-accent-soft);  color: var(--color-error); }
.msg-success { background: var(--color-accent2-soft); color: var(--color-success-text); }

/* ---- Badge (lifecycle status) ---- */
.badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: 2px var(--sp-2); border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border);
}
/* Warianty statusu (np. dostarczalność maili w Wiadomościach): OK / oczekujący / błąd. */
.badge-ok     { border-color: var(--color-success); color: var(--color-success); }
.badge-warn   { border-color: var(--color-warning); color: var(--color-warning); }
.badge-danger { border-color: var(--color-error);   color: var(--color-error); }

/* ---- Top nav (app/admin) ---- */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--color-border);
  background: var(--color-bg);
}
.topnav .brand { font-weight: 700; font-family: var(--font-head); }
.topnav nav { display: flex; gap: var(--sp-4); align-items: center; }

/* Stopka nawigacyjna: linki tekstowe muszą mieć cel dotykowy ≥44px (WCAG 2.5.8 wymaga ≥24px;
   44px = komfort). inline-flex, by separatory „·" zostały w tekście, a tap-area linku objęła
   cały jego wiersz bez rozpychania układu w poziomie. Klasa `foot-nav` na <footer>. */
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* Wąskie telefony (≤560px): nagłówek nie może rozpychać strony (poziomy scroll całej appki — lekcja S4a).
   Zawijamy pasek i skracamy e-mail usera z wielokropkiem zamiast wypychać „Wyloguj" poza ekran. */
@media (max-width: 560px) {
  .topnav { flex-wrap: wrap; row-gap: var(--sp-2); }
  .topnav nav { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-width: 0; justify-content: flex-end; }
  .topnav nav #user-name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Empty state ---- */
.empty {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  border: var(--border-w) dashed var(--color-border); border-radius: var(--radius);
  color: var(--color-text-muted);
}

/* ---- Table (admin) ---- */
/* Afordancja przewijania poziomego (mobile): subtelny cień na krawędzi, gdy tabela ma więcej
   kolumn w poziomie niż widać (np. Historia wiadomości — kolumna Status po prawej). Cień znika po
   dosunięciu do końca dzięki background-attachment: local. Baza = --color-surface (białe karty,
   motyw light-only — bez wariantu dark). Wszystkie .table-wrap to białe .card panelu admina.
   Backport S-W1 Dobry Wstęp. */
.table-wrap {
  overflow-x: auto;
  /* R1: bez `position: relative` absolutnie pozycjonowane .sr-only wewnatrz tabeli
     ucieka do bloku poczatkowego i ROZCIAGA DOKUMENT (zmierzone: 1354 > 1280). */
  position: relative;
  background:
    linear-gradient(to right, var(--color-surface) 30%, transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(31, 25, 15, 0.10), transparent) 0 0 / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(31, 25, 15, 0.10), transparent) 100% 0 / 12px 100% no-repeat scroll,
    var(--color-surface);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: var(--sp-3); border-bottom: var(--border-w) solid var(--color-border); }
th { font-weight: 600; color: var(--color-text-muted); }

/* ---- Grid ---- */
.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Separator „albo" (OAuth ↔ formularz e-mail) ---- */
.or-sep { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); color: var(--color-text-muted); font-size: .8rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---- Baner trybu podglądu operatora (impersonation) — TRWAŁY, u góry, czerwony ---- */
.impersonation-banner {
  position: sticky; top: 0; z-index: var(--z-banner);
  background: var(--color-error); color: #fff;
  padding: var(--sp-2) var(--sp-4); text-align: center;
  font-size: .85rem; font-weight: 600;
}

/* ---- TRYB PRZERWY TECHNICZNEJ (maintenance mode, B10) — plansza + baner (maintenance.js) ----
   Plansza (mode 'app'): pełny ekran NAD wszystkim, user nie działa. Baner (mode 'admin'): sticky,
   panel operatora działa dalej. Landing (index.html) świadomie bez bramki. Wszystko na tokenach DS. */
.maintenance-locked { overflow: hidden; }
.maintenance-plane {
  position: fixed; inset: 0; z-index: var(--z-maintenance);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: var(--color-bg);
}
.maintenance-box {
  max-width: 420px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.maintenance-box .maintenance-brand { transform: scale(1.1); margin-bottom: var(--sp-2); }
.maintenance-ico { width: 44px; height: 44px; color: var(--color-accent); }
.maintenance-title { font-size: 1.5rem; }
.maintenance-sub { font-size: 1rem; margin: 0; }

.maintenance-banner {
  position: sticky; top: 0; z-index: var(--z-banner);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-warning, #C08A16); color: #fff;
  padding: var(--sp-2) var(--sp-4); text-align: center;
  font-size: .85rem; font-weight: 600;
}
.maintenance-banner-link { color: #fff; text-decoration: underline; white-space: nowrap; }

/* ---- Zgoda (checkbox z linkami przy rejestracji) ---- */
.check-line { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .9rem; margin-bottom: var(--sp-4); }
/* Cel dotykowy checkboxa = 44×44 px (WCAG 2.5.8; pomiar P1 ekran-diff @390 mierzy sam INPUT,
   więc padding natywnego widgetu nie wystarcza). Klikalny kwadrat 44 px, wizualnie kwadracik
   22 px rysowany pseudoelementem w palecie design-systemu. */
.check-line input[type="checkbox"], .check-line input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; min-width: 44px; margin: -11px -6px -11px -11px; padding: 0;
  display: grid; place-content: center; background: none; border: 0; cursor: pointer;
}
.check-line input[type="checkbox"]::before, .check-line input[type="radio"]::before {
  content: ""; width: 22px; height: 22px; border: 2px solid var(--color-field);
  background: var(--color-surface); border-radius: var(--radius-sm); transition: none;
}
.check-line input[type="radio"]::before { border-radius: 50%; }
.check-line input[type="checkbox"]:checked::before, .check-line input[type="radio"]:checked::before {
  background: var(--color-accent2-strong); border-color: var(--color-accent2-strong);
  box-shadow: inset 0 0 0 3px var(--color-surface);
}
.check-line input[type="checkbox"]:focus-visible, .check-line input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: -9px;
}

/* ---- Onboarding: wiersz kroku „Pierwsze kroki" (stack na wąskich telefonach) ----
   Forward-compatible (S27): gdy apka zbuduje POZIOMY wiersz kroku (.onb-step z przyciskiem .btn),
   poniżej 460px przycisk schodzi pod treść na całą szerokość zamiast się ściskać.
   Starter renderuje kroki jako listę .check-line (już pionowo) — reguła aktywuje się dopiero
   gdy apka doda .onb-step (jak Fachmat). Zero efektu dla obecnego #onboarding-card. */
@media (max-width: 460px) {
  .onb-step { flex-wrap: wrap; }
  .onb-step .btn { flex-basis: 100%; width: 100%; margin-top: var(--sp-2); }
}

/* ---- Checklist „Pierwsze kroki" — @dsChecklist (STANDARD FABRYKI) ----------
   Renderowana przez js/onboard.js (initChecklist). Pasek postępu x/N, 1. krok
   PRE-CHECKED (endowed progress), odhaczanie po evencie/akcji, celebracja
   papierowa (@dsCelebrate), znika po ukończeniu. Kroki = KONFIGURACJA per apka
   (ONBOARDING_STEPS). Klasa .ds-checklist na kontenerze karty. ------------- */
.ds-checklist { padding: var(--sp-5); }
/* Nagłówek oczekiwań (§1.3) — ZAWSZE nad checklistą, niezależny od survey: jedno zdanie wartości + czas. */
.ds-onb-welcome { font-size: .95rem; color: var(--color-text); margin: 0 0 var(--sp-4); line-height: 1.5; }
.ds-onb-welcome-time { color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.ds-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ds-checklist-head h3 { margin: 0; }
.ds-checklist-count {
  font-size: .8rem; font-weight: 700; color: var(--color-text-muted);
  background: var(--color-bg); border: var(--border-w) solid var(--color-border);
  border-radius: 999px; padding: 2px var(--sp-2);
}
.ds-checklist-sub { font-size: .9rem; margin: var(--sp-2) 0 var(--sp-3); }

/* Pasek postępu — @dsProgress. Track + fill (szerokość ustawia JS w %). */
.ds-progress { height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.ds-progress-fill {
  height: 100%; border-radius: 999px; background: var(--color-accent);
  transition: width .35s cubic-bezier(.4, 0, .2, 1); min-width: 6px;
}

.ds-checklist-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.ds-checklist-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--color-border);
  font-size: .95rem;
}
.ds-checklist-item:first-child { border-top: 0; }
.ds-check-ico {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-w) solid var(--color-border); background: var(--color-bg);
  color: var(--color-accent-text); font-size: .8rem; font-weight: 700;
}
.ds-checklist-item.is-done .ds-check-ico { background: var(--color-success); border-color: transparent; }
.ds-check-label { flex: 1 1 auto; min-width: 0; }
.ds-checklist-item.is-done .ds-check-label { color: var(--color-text-muted); text-decoration: line-through; }
.ds-check-cta { flex: none; margin-left: auto; }
.ds-check-box { flex: none; margin-left: auto; width: 18px; height: 18px; }
/* Krok przyszły — wskaźnik nieaktywny (nie przycisk): „jeden oczywisty następny ruch" ma TYLKO pierwszy
   nieukończony krok (§1.4). Wyszarzony, bez interakcji. Tokeny DS (spójny z @dsChecklist), nie hardkod. */
.ds-check-cta-later {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  font-size: .85rem; font-weight: 600; color: var(--color-text-muted);
  background: var(--color-border); cursor: default; pointer-events: none; user-select: none;
}

/* Krok „awaiting" (§6 pkt 5) — user zrobił swoją część, wartość domknie ŚWIAT (event serwerowy). Stan
   „✓ Zrobione po Twojej stronie — czekamy na X" ma NIE wyglądać jak porażka: ikona = subtelny check (nie
   sukces-zielony, bo krok jeszcze trwa), status wyszarzony po prawej. Odhaczenie robi realny event. */
.ds-checklist-item.is-await .ds-check-ico { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); }
.ds-checklist-item.is-await .ds-check-ico::after { content: "\2713"; } /* ✓ — Twoja część zrobiona */
.ds-check-await {
  flex: 1 1 auto; margin-left: auto; text-align: right;
  font-size: .85rem; color: var(--color-text-muted); font-style: italic; line-height: 1.35;
}

/* Celebracja papierowa — @dsCelebrate. Lekki stempel „Gotowe!" (NIE gadżet). */
.ds-celebrate { text-align: center; padding: var(--sp-6) var(--sp-4); }
.ds-celebrate-stamp {
  display: inline-block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-success); border: 2.5px solid var(--color-success);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-4);
  transform: rotate(-4deg); opacity: .92;
  animation: ds-stamp-in .32s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ds-celebrate-msg { margin: var(--sp-4) 0 0; color: var(--color-text-muted); font-size: .95rem; }
@keyframes ds-stamp-in { from { transform: rotate(-4deg) scale(1.35); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .ds-celebrate-stamp { animation: none; } .ds-progress-fill { transition: none; } }

@media (max-width: 460px) {
  .ds-checklist-item { flex-wrap: wrap; }
  .ds-check-cta, .ds-check-cta-later, .ds-check-box { margin-left: calc(24px + var(--sp-3)); }
  .ds-check-await { margin-left: calc(24px + var(--sp-3)); text-align: left; flex-basis: 100%; }
}

/* ---- Empty-state uczący — @dsEmptyOnboard (helper emptyOnboard() w onboard.js) ----
   Rozszerza .empty: (a) nazwa WARTOŚCI, (b) ghost-row/preview (aria-hidden),
   (c) 1 CTA czasownik, (d) furtka (dane przykładowe/import). ZERO przeprosin. */
.ds-empty-onb { text-align: center; }
.ds-empty-onb-value { margin: 0; color: var(--color-text); }
.ds-empty-onb-hint { margin: var(--sp-2) auto 0; max-width: 46ch; }
.ds-empty-onb-cta { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
/* Ghost-row: kształt sukcesu, wyszarzony (to atrapa, nie dane → aria-hidden w JS). */
.ds-ghost { max-width: 340px; margin: 0 auto var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-ghost-row {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface) 50%, var(--color-border) 100%);
  opacity: .6;
}
.ds-ghost-row:nth-child(2) { width: 86%; }
.ds-ghost-row:nth-child(3) { width: 68%; }

/* ---- Welcome survey (JTBD) — @dsSurvey. Modal 1-3 pytania (initWelcomeSurvey). ---- */
.ds-survey { max-width: 460px; }
.ds-survey-q { margin-top: var(--sp-4); }
.ds-survey-qlabel { font-weight: 600; margin: 0 0 var(--sp-2); font-size: .95rem; }
.ds-survey-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-survey-opt { justify-content: flex-start; text-align: left; }
.ds-survey-opt.is-selected { border-color: var(--color-accent2-strong); box-shadow: 0 0 0 2px rgba(14, 122, 109, .22); }
.ds-survey-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---- Lejek onboardingu (panel operatora, Aktywacja) — paski per krok + drop-off ---- */
.onb-funnel-row { padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--color-border); }
.onb-funnel-row:first-child { border-top: 0; }
.onb-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: .9rem; margin-bottom: var(--sp-2); }
.onb-funnel-bar { height: 10px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.onb-funnel-fill { height: 100%; border-radius: 999px; background: var(--color-accent); }
.onb-funnel-row.is-bottleneck .onb-funnel-fill { background: var(--color-warning); }
.onb-funnel-row.is-bottleneck .onb-funnel-head { font-weight: 600; }

/* ---- Kontekstowy tooltip — @dsTooltip (showTip). 1 naraz, action-triggered (2-5 s). ---- */
.ds-tip {
  position: fixed; z-index: var(--z-banner); max-width: 260px;
  display: flex; align-items: flex-start; gap: var(--sp-2);
  background: var(--color-text); color: var(--color-bg);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: .85rem; line-height: 1.4; box-shadow: 0 6px 20px rgba(10, 12, 16, .22);
  animation: ds-tip-in .18s ease-out both;
}
.ds-tip-close { flex: none; background: transparent; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.ds-tip-close:hover { opacity: 1; }
@keyframes ds-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-tip { animation: none; } }

/* ---- Pas zaufania — @dsTrustBar (trustBar() w onboard.js) — §7 „pas zaufania" (lęk#1=scam) ----
   Stały, widoczny sygnał legitymacji na ekranie onboardingu: kto stoi za produktem / co z danymi (link
   trust page) / 1 dowód / 1 żywy kanał kontaktu. Papierowy motyw, tokeny DS. Zawija się na wąskich. */
.ds-trustbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  font-size: .85rem; color: var(--color-text-muted);
}
.ds-trust-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ds-trust-ico { flex: none; font-size: .95rem; line-height: 1; color: var(--color-accent2-strong); }
.ds-trust-text { color: var(--color-text); }
.ds-trust-link {
  display: inline-flex; align-items: center; min-height: 24px; /* touch-target ≥24px (WCAG 2.5.8) */
  color: var(--color-accent-strong); font-weight: 600;
}
.ds-trust-link:hover { text-decoration: underline; }

/* ---- Pomiar jakościowy drop-offu — @dsFriction (askFriction() w onboard.js) — §7 ----
   Mikro-prompt „Co Cię zatrzymało?" (3-4 powody 1-tap + opcjonalne pole). Lekki, papierowy, pomijalny.
   Wariant pływający (.ds-friction-floating) = karta u dołu ekranu; wariant osadzony (opts.mount) = w karcie. */
.ds-friction {
  background: var(--color-bg); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ds-friction-floating {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-banner);
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  animation: ds-friction-in .18s ease-out both;
}
.ds-friction-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.ds-friction-title { margin: 0; font-weight: 700; font-size: .95rem; color: var(--color-text); }
.ds-friction-close {
  flex: none; background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0;
  min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.ds-friction-close:hover { color: var(--color-text); }
.ds-friction-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-friction-opt { justify-content: flex-start; text-align: left; min-height: 24px; }
.ds-friction-note { resize: vertical; font-size: .9rem; }
@keyframes ds-friction-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-friction-floating { animation: none; } }

/* ---- A11y baseline onboardingu — WCAG 2.2 AA (§7 ONBOARDING-FABRYKA) ---------------------
   Prawnie wymagane w UE od 28.06.2025 (EAA/WCAG 2.2 AA). Widoczny, NIE-zasłonięty focus na
   WSZYSTKICH interaktywnych elementach onboardingu (checklist CTA, survey, empty-state CTA,
   tooltip) + touch-target ≥24×24 px (WCAG 2.5.8 Target Size). Tokeny DS, jasny motyw;
   prefers-reduced-motion respektowany wyżej (animacje @dsCelebrate/@dsTooltip). ----------- */
/* SR-only — status postępu (aria-live) ogłaszany czytnikowi bez zmiany layoutu (onboard.js renderChecklist). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Widoczny focus-visible — część elementów onboardingu (checkbox, tip-close) nie dziedziczy stylu .btn. */
.ds-check-cta:focus-visible,
.ds-check-box:focus-visible,
.ds-survey-opt:focus-visible,
.ds-survey-actions .btn:focus-visible,
.ds-empty-onb-cta .btn:focus-visible,
.ds-empty-onb-escape:focus-visible,
.ds-tip-close:focus-visible,
.ds-trust-link:focus-visible,
.ds-friction-opt:focus-visible,
.ds-friction-close:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius);
}
/* Touch-target ≥24×24 px (WCAG 2.5.8) na interaktywnych elementach onboardingu. */
.ds-check-cta, .ds-survey-opt, .ds-empty-onb-cta .btn, .ds-empty-onb-escape { min-height: 24px; }
.ds-check-box { min-width: 24px; min-height: 24px; }
.ds-tip-close { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Przycisk destrukcyjny + strefa czerwona (usunięcie konta) ---- */
.btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.btn-danger:hover { background: var(--color-error-hover); }
.danger-zone { border-color: var(--color-error); }

/* ---- Overlay pełnoekranowy (subscription gating: past_due / canceled) ----
   UWAGA: to warstwa UX. Twardy gate = RLS/edge (patrz app.js requireActiveSub). */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(10, 12, 16, .72); backdrop-filter: blur(2px);
}
.overlay-box { max-width: 440px; text-align: center; background: var(--color-bg); }

/* ---- Pływający przycisk „Zgłoś uwagę" (feedback widget) ----
   Desktop (≥1024px): kompaktowa pigułka-ikona (52×52) bez etykiety — nie zasłania treści.
   Mobile: pełna pigułka z ikoną + etykietą (czytelny cel dotyku). */
.fab {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-fab);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm); border: none;
  background: var(--color-cta); color: var(--color-cta-text);
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform var(--dur-base, .25s) var(--ease-out, ease), opacity var(--dur-base, .25s) ease;
}
.fab:hover { background: var(--color-cta-hover); }
/* KLASA BŁĘDU „FAB zakrywa wartości/treść" (backport DW S4b/S4d/S4e — 3× kolizja FAB↔treść w jednej apce)
   → jedna GLOBALNA reguła zamiast łatania per-ekran: pływający FAB CHOWA SIĘ przy przewijaniu w dół
   (czytanie) i wraca przy przewijaniu w górę / u góry (js: toggle .fab-tucked wg kierunku scrolla —
   app.js initFabAutoHide). Dzięki temu FAB NIGDY nie „siedzi" nad treścią, którą user właśnie czyta —
   działa DOMYŚLNIE na KAŻDYM ekranie każdej apki. reduced-motion respektowane. */
.fab.fab-tucked { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fab { transition: opacity .01ms; } }
.fab .fab-ico { flex: none; }
@media (min-width: 1024px) {
  .fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .fab .fab-label { display: none; }
}

/* ---- Modal (feedback) ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(10, 12, 16, .55);
}
/* Paywall = modal wyboru planu OTWIERANY Z overlaya gatingu → MUSI być nad overlayem
   (canceled/past_due), inaczej plany są zasłonięte i user nie wznowi subskrypcji. */
.modal-backdrop.paywall { z-index: var(--z-paywall); }
.modal { width: 100%; max-width: 480px; background: var(--color-bg); }
.modal textarea.input { resize: vertical; }

/* ============================================================
   SHELL nawigacji w tabach — panel operatora (admin) + wejście operatora (app).
   Standard fabryki: kanoniczny topnav z zakładkami + hash-routing + menu mobilne.
   Reużywany przez admin.html (6 zakładek) i app.html (link „Panel operatora").
   Wszystko na tokenach; #fff = biel na grafitowym tle (jak reszta pliku, brak tokenu bieli).
   ============================================================ */

/* ---- Warianty przycisków używane w topnav ---- */
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: .85rem; }
.btn-neutral { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.btn-neutral:hover { background: var(--color-text); opacity: .88; }

/* ---- Nagłówek widoku (tytuł zakładki) ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* ---- Plakietka „PANEL OPERATORA" (odróżnienie panelu od aplikacji) ---- */
.plaq {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  background: var(--color-text); color: #fff; border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  font-weight: var(--fw-label); font-size: var(--fs-sm);
}
.plaq-op::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* ---- Zakładki topnav (hash-routing; aktywna = podkreślenie akcentu) ---- */
.navtabs { display: flex; gap: var(--sp-4); align-items: center; flex: 1; justify-content: center; }
.navtab {
  font-weight: 600; font-size: .9rem; color: var(--color-text-muted);
  padding: var(--sp-2) 0; border-bottom: 2px solid transparent; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.navtab:hover { color: var(--color-text); text-decoration: none; }
.navtab-active { color: var(--color-text); border-bottom-color: var(--color-accent); }
/* Link „Panel operatora" w app (widoczny tylko dla operatora) — wyróżniony obrys-pigułka */
.navtab-op {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--color-text); border-radius: 999px;
  padding: 5px var(--sp-3); color: var(--color-text);
  transition: background .15s, color .15s;
}
.navtab-op:hover { background: var(--color-text); color: #fff; text-decoration: none; }
.navtab-op svg { flex: none; }

/* ---- CTA topnav (← Aplikacja) + przycisk MENU (mobile) ---- */
.nav-cta { flex: none; }
.nav-menu-mobile { display: none; flex: none; }

/* ---- Rozwijane menu (mobile ≤860px) — lista zakładek pod topnavem (vanilla) ---- */
.nav-menu-panel {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface); border-bottom: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-sm); padding: var(--sp-2);
}
.nav-menu-panel a {
  display: block; text-align: left; font-weight: 600; font-size: .95rem; color: var(--color-text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--color-bg); text-decoration: none; }
.nav-menu-panel a.navtab-active { color: var(--color-accent-strong); }
.nav-menu-panel .nav-menu-op, .nav-menu-panel .nav-cta-m { color: var(--color-accent-strong); }
.nav-menu-head { display: block; font-size: var(--fs-sm); font-weight: var(--fw-label); color: var(--color-text-muted); padding: var(--sp-2) var(--sp-4) var(--sp-1); }

/* ---- Pasek konta operatora (Pulpit): kto zalogowany + Wyloguj ---- */
.admin-userbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }

/* ---- Widok routera (pokazywanie/ukrywanie przez .hidden) ---- */
.view { animation: fade-in .18s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Fix overflow poziomy tabel na mobile ----
   Karty gridu (grid-3/grid-4) mają domyślnie min-width:auto → nie schodzą poniżej
   min-content i rozpychają viewport. Zerujemy min-width, a szerokie tabele scrollują
   REALNIE wewnątrz .table-wrap (overflow-x:auto) zamiast rozciągać stronę. */
.grid > * { min-width: 0; }
[data-view] .table-wrap { max-width: 100%; }

/* ---- Mobile ≤860px: topnav = brand + MENU; zakładki/CTA/plakietkę chowamy ----
   Breakpoint 860 (nie 720): desktopowy topnav (zakładki + CTA + plakietka) nie mieści się
   poniżej ~860px → w strefie 721–860px rozpychał viewport i dawał poziomy scroll (S27). */
@media (max-width: 860px) {
  .topnav .navtabs, .topnav .nav-cta, .topnav .plaq-op { display: none; }
  .nav-menu-mobile { display: inline-flex; }
}

/* ============================================================
   MODUŁ WIADOMOŚCI (panel operatora — tab „Wiadomości"): pod-zakładki, edytor szablonów,
   podgląd renderu w iframe. Wszystko na tokenach. */
.subtabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5);
  border-bottom: var(--border-w) solid var(--color-border); }
.subtab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: var(--sp-3) var(--sp-3); font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--color-text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.subtab:hover { color: var(--color-text); }
.subtab-active { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* Szablony: lista + edytor obok siebie (na wąskich = jedna kolumna). */
.msg-tpl-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .msg-tpl-grid { grid-template-columns: 260px 1fr; align-items: start; } }
.msg-tpl-editor { display: block; }
#tpl-list li { list-style: none; }
.tpl-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; background: transparent; border: var(--border-w) solid transparent;
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; color: var(--color-text);
}
.tpl-item:hover { background: var(--color-bg); }
.tpl-item-active { background: var(--color-bg); border-color: var(--color-border); font-weight: 600; }
.tpl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-text-muted); }
.tpl-dot.on { background: var(--color-success); }
.tpl-dot.off { background: var(--color-warning); }

/* Podgląd renderu w izolowanym iframe (sandbox="" — brak skryptów, XSS-safe). */
.msg-preview-wrap { margin-top: var(--sp-4); }
.msg-preview {
  width: 100%; height: 420px; border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface);
}

/* ============================================================
   MODUŁ POLECENIA — prompt aha (pasek), licznik, panel operatora. Wszystko na tokenach. */
.aha-ref {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--color-surface); border: var(--border-w) solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
}
.aha-ref #aha-referral-text { flex: 1 1 220px; font-size: .95rem; color: var(--color-text); }
.aha-ref-close {
  background: transparent; border: none; color: var(--color-text-muted); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0 var(--sp-1);
}
.aha-ref-close:hover { color: var(--color-text); }
.ref-stats { color: var(--color-text-muted); }
.ref-stats b { color: var(--color-text); }
.ref-stat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .ref-stat-grid { grid-template-columns: repeat(5, 1fr); } }
.ref-stat { background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.ref-stat .n { font-family: var(--font-head); font-size: 1.5rem; color: var(--color-text); }
.ref-stat .l { font-size: .8rem; color: var(--color-text-muted); }
.ref-chip { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 600; border: var(--border-w) solid var(--color-border); }
.ref-chip.invited  { color: var(--color-text-muted); }
.ref-chip.paid     { color: var(--color-warning); border-color: var(--color-warning); }
.ref-chip.rewarded { color: var(--color-success); border-color: var(--color-success); }
.ref-chip.refunded, .ref-chip.rejected { color: var(--color-error); border-color: var(--color-error); }

/* ---- Kreator etapowy — @dsWizard (STANDARD FABRYKI) -------------------------
   Formularz RDZENIA (>5–6 pól) rozbij na kroki „jedna myśl / jedno pytanie na
   ekran" — nie ściana pól. Ta sama zasada „jedna myśl" co landing, dla WEJŚCIA
   danych. Składniki: pasek postępu (żetony + etykiety, klik w osiągnięty krok =
   skok wstecz) + kroki (.wiz-step, przełączane .hidden) + nawigacja (.wiz-nav:
   Wstecz/Dalej + submit na ostatnim) + walidacja PER KROK (.field-err pod polem)
   + autozapis szkicu przy „Dalej" (logika w js/app.js — upsert draft). Aktywny
   krok = akcent, ukończony = sukces (oliwka) z checkiem. Mobile: jedno pytanie
   na ekran, etykiety pasku chowane, nawigacja pełnej szerokości.
   GOTCHA: przełączaj przyciski nawigacji klasą .hidden (display:none !important),
   NIE atrybutem [hidden] — .btn{display:...} (specyficzność klasy) bije UA
   [hidden]{display:none}, więc [hidden] na .btn NIE ukrywa (oba CTA naraz). ---- */
.wizard-steps { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; margin-bottom: var(--sp-5); }
.wizard-step {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; min-width: 0;
  background: transparent; border: 0; padding: 2px; margin: -2px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  color: var(--color-text-muted); cursor: default; text-align: left;
}
.wizard-step:not(:disabled) { cursor: pointer; }
.wizard-step .wiz-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-surface); color: var(--color-text-muted);
  font-weight: 700; font-size: .875rem; line-height: 1; border: var(--border-w) solid var(--color-border);
}
.wizard-step .wiz-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-step.is-active { color: var(--color-text); }
.wizard-step.is-active .wiz-dot { background: var(--color-cta); color: var(--color-cta-text); border-color: transparent; }
.wizard-step.is-done { color: var(--color-success); }
.wizard-step.is-done .wiz-dot { background: var(--color-success); color: #fff; border-color: transparent; }
.wizard-step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wizard-sep { flex: 1 1 auto; height: 2px; min-width: 10px; background: var(--color-border); border-radius: 2px; }

.wiz-q { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.15; color: var(--color-text); margin: 0; }
.wiz-q-sub { color: var(--color-text-muted); font-size: 1rem; margin: 0 0 var(--sp-2); max-width: 48ch; }

.wiz-nav { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.wiz-nav .wiz-spacer { flex: 1 1 auto; }
.wiz-draft-row { text-align: center; margin: var(--sp-1) 0 0; }

/* Błąd walidacji pod polem — @dsFieldError (inline, per pole). */
.field-err { display: block; font-size: .8125rem; color: var(--color-error); margin-top: var(--sp-2); font-weight: 600; }
.input.is-invalid, textarea.input.is-invalid, select.input.is-invalid {
  border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192, 54, 44, .18);
}

@media (max-width: 430px) {
  .wizard-steps { gap: var(--sp-1); }
  .wizard-step .wiz-label { display: none; }
  .wiz-nav .btn { flex: 1 1 auto; }
  .wiz-nav .wiz-spacer { display: none; }
}

/* ---- Spinner (obrotowy wskaźnik ładowania) — @dsSpinner ----
   Zależność komponentu generacji (js/generation.js) oraz dowolnej akcji „to potrwa chwilę".
   Ruch respektuje prefers-reduced-motion (zwalnia zamiast znikać — wskaźnik nadal żyje). */
.spinner {
  display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--color-border); border-top-color: var(--color-accent);
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

/* ---- Generacja AI: nazwane etapy + skeleton artefaktu + panel porażki (js/generation.js) — @dsGeneration
   §4b standardu fabryki: „nagi spinner" → rosnąca checklista czynności w 1. osobie, skeleton w kształcie
   wyniku, panel „wina systemu" z retry + fallback. Wszystko na tokenach DS; ruch respektuje reduced-motion;
   jasny „papierowy" motyw (ZAKAZ ciemnych teł). APKA wypełnia etapy/estimate/skeleton w kroku onboarding. */
.gen-wrap { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.gen-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.gen-stage { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-body); font-size: .9rem;
  color: var(--color-text-muted); transition: color .18s ease; }
.gen-stage.is-current { color: var(--color-text); font-weight: 600; }
.gen-stage.is-done { color: var(--color-text-muted); }
.gen-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted);
  font-size: .75rem; font-weight: 700; line-height: 1; }
.gen-stage.is-done .gen-ico { background: var(--color-success); color: #fff; }
.gen-stage .gen-ico .spinner { width: 13px; height: 13px; border-width: 2px; }
.gen-eta { font-size: .8rem; margin: 0; }

/* Skeleton w kształcie artefaktu — szare placeholdery z delikatnym shimmerem (APKA buduje węzły). */
.gen-skel { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); opacity: .75; }
.gen-skel-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.gen-skel-num { flex: none; width: 26px; height: 26px; border-radius: 50%; }
.gen-skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.gen-skel-bar { height: 10px; border-radius: 999px; }
.gen-skel-bar.w-40 { width: 40%; }
.gen-skel-bar.w-70 { width: 70%; }
.gen-skel-bar.w-90 { width: 90%; }
.gen-skel-num, .gen-skel-bar {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface) 37%, var(--color-border) 63%);
  background-size: 400% 100%; animation: gen-shimmer 1.4s ease infinite;
}
@keyframes gen-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .gen-skel-num, .gen-skel-bar { animation: none; } }

/* Panel porażki generacji — wina po stronie SYSTEMU, retry + fallback (bez żargonu). */
.gen-fail { display: flex; flex-direction: column; gap: var(--sp-3); }
.gen-fail-msg { margin: 0; color: var(--color-text); font-size: 1rem; }
.gen-fail-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.gen-fail-note { margin: 0; font-size: .9rem; }

/* ---- Value-before-signup: podgląd wartości + bramka rejestracji — @dsDemoGate (demoAhaGate() w onboard.js).
   §7 „value-before-signup + keepable artifact": apka pokazuje PRÓBKĘ wartości PRZED rejestracją (na landingu),
   z bramką „zarejestruj, by zapisać / pełny wynik". DOMYŚLNIE off (apka włącza przez previewFn). Jasny motyw,
   tokeny DS; ruch respektuje reduced-motion. ------------------------------------------------------------------ */
.ds-demo { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.ds-demo-preview { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-demo-gate {
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); padding: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  animation: ds-demo-reveal .2s ease-out both;
}
.ds-demo-gate-msg { margin: 0; color: var(--color-text); font-size: .95rem; flex: 1 1 220px; }
.ds-demo-cta { flex: none; }
@keyframes ds-demo-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-demo-gate { animation: none; } }

/* ---- Agent domyka setup „za mnie": ekran akceptacji przygotowanej konfiguracji — @dsAgentSetup
   (agentSetup() w onboard.js). §7/§4b: gdy setup >2 pól, DOMYŚLNĄ ścieżką jest agent (edge AI) wypełniający
   konfigurację z inputu usera → user tylko sprawdza i AKCEPTUJE (aha = akceptacja). Faza czekania = runGeneration
   (@dsGeneration, ten sam UX). DOMYŚLNIE off. ------------------------------------------------------------------ */
.ds-agentsetup { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.ds-agentsetup-intro { margin: 0; color: var(--color-text); font-size: .95rem; line-height: 1.5; }
.ds-agentsetup-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.ds-agentsetup-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-agentsetup-label { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.ds-agentsetup-input { width: 100%; }
.ds-agentsetup-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* A11y (§7 WCAG 2.2 AA): widoczny focus-visible + touch-target ≥24 px dla nowego UI (demo-gate / agent-setup).
   Przyciski dziedziczą .btn, ale dokładamy jawny floor (spójnie z resztą onboardingu, patrz .ds-check-cta). */
.ds-demo-cta:focus-visible,
.ds-agentsetup-accept:focus-visible,
.ds-agentsetup-input:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
.ds-demo-cta, .ds-agentsetup-accept { min-height: 24px; }

/* ---- Druk (S31): przy Ctrl+P chowamy chrome aplikacji (nawigacja, akcje, warstwy nakładkowe),
   żeby na wydruku/PDF została wyłącznie treść. Uniwersalny podzbiór — TYLKO selektory, które
   starter faktycznie ma. Rozszerzaj per apka o własne elementy sticky/floating (paski sum,
   szybkie skoki, toasty), gdy je dodasz. */
@media print {
  .topnav,
  .nav-menu-panel,
  .nav-menu-mobile,
  .impersonation-banner,
  .fab,
  .aha-ref,
  .ds-tip,
  .ds-friction-floating,
  .overlay,
  .modal-backdrop {
    display: none !important;
  }
}

/* ============================================================================
   KOMPONENTY NISZY — „Mózg w Rytmie"
   ----------------------------------------------------------------------------
   Warstwa domenowa systemu designu tej aplikacji. Podglądy każdego komponentu
   we wszystkich stanach: design-system/ (spis w brief/04-STYLEGUIDE.md).
   ⛔ Zero hexów — wszystko na tokenach z :root. Nowy kolor = nowy token wyżej.
   Układ i rama są WIĄŻĄCE z brief/zrodla/EKRANY.md + makiety/*.png.
   ============================================================================ */

/* ── RAMA APLIKACJI — pasek górny (kontrakt EKRANY.md „RAMA APLIKACJI") ─────── */
.mr-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
}
.mr-bar__znak { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; text-decoration: none;
  min-height: var(--tap); } /* R1: znak jest linkiem do pulpitu — cel dotykowy, nie grafika */
.mr-bar__znak img, .mr-bar__znak svg { height: 76px; width: auto; } /* tusz ~78% pliku = 59 px = mediana 11 makiet */
.mr-bar__nav { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; padding-left: var(--sp-2); }
.mr-bar__akcja { flex: none; }
.mr-bar__akcja .btn { padding-left: var(--sp-4); padding-right: var(--sp-4); }
/* Wariant klienta końcowego: wąski pasek WYŁĄCZNIE ze znakiem — bez nawigacji
   operatora, bez przełącznika konta, bez danych innych osób (EKRANY.md). */
.mr-bar--klient { justify-content: center; padding: var(--sp-2) var(--sp-4); flex-wrap: nowrap; }
.mr-bar--klient .mr-bar__nav, .mr-bar--klient .mr-bar__akcja, .mr-bar--klient .mr-uzytkownik { display: none; }
/* Pasek EKRANU ZADANIA ucznia (makieta mobile.png): powrót · kto ćwiczy · więcej opcji.
   Bez znaku marki i bez nawigacji — to widok w trakcie pracy, nie strona. NIGDY nie zawija. */
.mr-bar--zadanie { flex-wrap: nowrap; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.mr-bar--zadanie .mr-tabela__uczen { flex: 1 1 auto; min-width: 0; white-space: normal; }

.mr-nav-poz {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-1); white-space: nowrap;
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-label);
  color: var(--color-text-muted); text-decoration: none;
  border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.mr-nav-poz:hover { color: var(--color-text); background: var(--color-bg); text-decoration: none; }
/* aktywna zakładka: KORAL w tekście i podkreśleniu — tak jest na makietach panel.png
   i ekran_uczniowie.png (accent-strong = koral czytelny jako tekst, 4,55 na tle). */
.mr-nav-poz[aria-current="page"] { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.mr-nav-poz svg { width: 21px; height: 21px; flex: none; stroke-width: 2.4; }
/* Trasa, której ekran jeszcze nie powstał: widoczna, ale nieklikalna — uczciwiej niż
   zakładka, która się podświetla i pokazuje cudzy ekran. */
.mr-nav-poz--wkrotce { opacity: .55; cursor: default; pointer-events: none; }
.mr-nav-poz:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.mr-uzytkownik { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
/* przycisk-ikona w pasku (wyloguj) — makieta ma w tym miejscu chevron menu użytkownika */
.btn__strzalka { margin-left: var(--sp-2); flex: none; opacity: .9; }
.btn__strzalka svg { width: 20px; height: 20px; display: block; }
.btn-ikona { padding: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.mr-uzytkownik__wejscie { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; text-decoration: none; color: inherit; padding: var(--sp-1); border-radius: var(--radius-sm); }
.mr-uzytkownik__wejscie:hover { background: var(--color-bg); text-decoration: none; }
.mr-uzytkownik--aktywny .mr-uzytkownik__wejscie { background: var(--color-bg); }
.mr-uzytkownik__chevron { color: var(--color-text-muted); }
.mr-uzytkownik__opis { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mr-uzytkownik__imie, .mr-uzytkownik__rola { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-uzytkownik__imie { font-weight: var(--fw-head); font-size: var(--fs-base); }
.mr-uzytkownik__rola { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── AWATAR (inicjały) ─────────────────────────────────────────────────────── */
.mr-awatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent2-strong); color: var(--color-cta-text);
  font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm);
}
.mr-awatar--aureola { box-shadow: 0 0 0 4px var(--color-accent2-soft); }
.mr-awatar--maly { width: var(--box-2); height: var(--box-2); font-size: var(--fs-xs); }
.mr-awatar--koral { background: var(--color-accent-strong); }
.mr-awatar--nieaktywny { background: var(--color-text-muted); }
.mr-awatar--duzy { width: 56px; height: 56px; font-size: var(--fs-lg); }

/* ── PODPIS WIZUALNY: odręczne zakreślenie (manifest „jak w zeszycie") ──────── */
/* R6: `inline-block` NIE wystarcza — w kolumnie flex element i tak dostaje `stretch`
   i zakreślenie rozciągało się na całą szerokość strony. `fit-content` przypina je do tekstu. */
.mr-podkres { position: relative; display: inline-block; width: fit-content; max-width: 100%; }
.mr-podkres::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.28em; height: .34em;
  background-color: var(--color-accent2-strong);
  -webkit-mask: var(--mr-kreska) no-repeat center/100% 100%;
  mask: var(--mr-kreska) no-repeat center/100% 100%;
  pointer-events: none;
}
.mr-podkres--koral::after { background-color: var(--color-accent-strong); --mr-kreska: var(--mr-kreska-2); }
.mr-podkres--cienki::after { height: .22em; bottom: -.2em; }

/* ── DUŻE LICZBY WYNIKÓW (manifest: „duże cyfry wyników") ──────────────────── */
.mr-liczba {
  font-family: var(--font-head); font-weight: var(--fw-display);
  font-size: var(--fs-3xl); line-height: 1.05; color: var(--color-accent2-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.mr-liczba--sred { font-size: var(--fs-2xl); }
.mr-liczba--granat { color: var(--color-text); }
.mr-liczba__opis { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: var(--fw-body); }
.mr-licznik { font-variant-numeric: tabular-nums; font-family: var(--font-head); font-weight: var(--fw-display); }

/* ── KAFEL STATYSTYKI (rząd nad listą) ─────────────────────────────────────── */
.mr-kafle { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.mr-kafel {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 160px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--color-surface-warm); border: var(--border-w) solid transparent;
  min-width: 0;
}
.mr-kafel--mieta { background: var(--color-accent2-soft); }
.mr-kafel--pusty { background: var(--color-surface); border-color: var(--color-border); }
.mr-kafel__tresc { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mr-kafel__liczba { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.mr-kafel__opis { font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }

/* ── IKONA W KÓŁKU ─────────────────────────────────────────────────────────── */
.mr-ikona {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent2-soft); color: var(--color-accent2-strong);
}
.mr-ikona--koral { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.mr-ikona--jasna { background: var(--color-surface); color: var(--color-accent-strong); }
.mr-pas > .mr-ikona { width: 86px; height: 86px; background: var(--color-surface); }
.mr-pas > .mr-ikona svg { width: 50px; height: 50px; stroke-width: 1.5; }
.mr-ikona--kwadrat { border-radius: var(--radius-sm); background: var(--color-accent2-strong); color: var(--color-cta-text); width: 54px; height: 54px; }
.mr-ikona--kwadrat svg { width: 30px; height: 30px; stroke-width: 2.1; }
.mr-ikona--mala { width: 32px; height: 32px; }
.mr-ikona svg { width: 24px; height: 24px; }
.mr-ikona--mala svg { width: 18px; height: 18px; }

/* ── PAS WYRÓŻNIONY („Najbliższe zajęcia") ─────────────────────────────────── */
.mr-pas {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius);
  background: var(--color-surface-warm);
}
.mr-pas__tresc { flex: 1 1 260px; min-width: 0; }
/* Etykieta pasa/karty: makieta panel.png ma zwykły tekst w kolorze marki (koral przy
   „Najbliższe zajęcia", szarość przy „Dziś jest") — NIE wersaliki z rozstrzeleniem. */
.mr-pas__etykieta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base); font-weight: var(--fw-label); color: var(--color-accent-strong);
}
.mr-pas__etykieta--cicha { color: var(--color-text-muted); }
/* ⛔ koral NIE jest tu tekstem: --color-accent-strong na moreli = 4,00 < AA.
   Sygnał „czeka na człowieka" niesie ikona + etykieta + sterownik — makieta panel.png
   NIE rysuje pasowi żadnej krawędzi stanu (D-27: zakaz krechy na jednej krawędzi). */
.mr-pas--czeka { border: var(--border-w) solid var(--edge-czeka); }
.mr-pas--ok { border: var(--border-w) solid var(--edge-ok); }
.mr-pas__tytul { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-2xl); margin: var(--sp-1) 0; }
.mr-pas__opis { font-size: var(--fs-base); color: var(--color-text-muted); }

/* ── KARTA-WIERSZ (grupa, materiał, uczeń na mobile) ───────────────────────── */
.mr-wiersze { display: flex; flex-direction: column; gap: var(--sp-2); }
.mr-wiersz {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; min-height: 78px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  background: var(--color-surface-warm); border: var(--border-w) solid transparent;
  color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mr-wiersz:hover { border-color: var(--color-accent2-strong); }
}
/* Potwierdzenie dotknięcia: papier ugina się pod palcem. Bez tego trenerka dotyka drugi raz,
   bo przez ~300 ms nic się nie dzieje; a bez `hover: hover` :hover przykleja się po dotknięciu. */
.mr-wiersz, .mr-chip, .btn, .mr-nav-poz, .mr-odpowiedz {
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease, transform .09s ease;
}
.mr-wiersz:active { background: var(--color-accent2-soft); transform: scale(.988); }
.btn:active { transform: scale(.97); }
.mr-nav-poz:active { background: var(--color-bg); }
.mr-odpowiedz:active { border-color: var(--color-accent2-strong); }
@media (prefers-reduced-motion: reduce) {
  .mr-wiersz, .mr-chip, .btn, .mr-nav-poz, .mr-odpowiedz { transition: none; }
  .mr-wiersz:active, .btn:active { transform: none; }
}
.mr-wiersz:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mr-wiersz--jasny { background: var(--color-surface); border-color: var(--color-border); }
/* Wiersz PŁASKI — pozycja listy wewnątrz karty (np. „Na dziś"): bez tła i bez własnej krawędzi,
   żeby nie robić karty w karcie. Osobny modyfikator zamiast stylowania ad hoc w widoku. */
.mr-wiersz--plaski { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0;
  min-height: 0; cursor: default; }
.mr-wiersz__tresc { flex: 1 1 auto; min-width: 0; }
.mr-wiersz__tytul { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-xl); }
.mr-wiersz__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-base); color: var(--color-text-muted); margin-top: var(--sp-1); }
.mr-wiersz__meta > * { display: inline-flex; align-items: center; gap: var(--sp-1); }
.mr-wiersz__strzalka { flex: none; color: var(--color-text); display: inline-flex; }
.mr-wiersz__strzalka svg { width: 24px; height: 24px; }

/* ── CHIP STATUSU — kolor NIGDY jedynym nośnikiem: zawsze etykieta + kształt ── */
.mr-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); min-height: 38px;
  border-radius: 18px; border: var(--border-w) solid transparent; box-shadow: none;
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--fs-sm); font-weight: var(--fw-body); white-space: nowrap;
}
.mr-chip::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--color-text-muted); }
.mr-chip--ok::before { background: var(--color-accent2-strong); }
.mr-chip--czeka::before { background: var(--dot-czeka); }
.mr-chip--uwaga { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.mr-chip--uwaga::before { background: var(--color-accent-strong); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.mr-chip--archiwum { border-color: var(--color-border-strong); color: var(--color-text-muted); background: var(--color-bg); }
.mr-chip--archiwum::before { background: transparent; border: 2px solid var(--color-field); }
.mr-chip--neutral::before { background: transparent; border: 2px solid var(--color-field); }
/* Chip jako STEROWNIK WYBORU — znacznikiem jest natywny radio/checkbox, nie kropka statusu. */
.mr-chip:has(input)::before { display: none; }
.mr-chip:has(input) { cursor: pointer; padding-left: var(--sp-2); }
.mr-chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── KROPKI POSTĘPU — kształt różnicuje stan (pełna / bieżąca / pusta) ─────── */
.mr-kropki { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mr-kropka { width: 12px; height: 12px; border-radius: var(--radius-pill); flex: none; background: transparent; border: 2px solid var(--color-field); }
.mr-kropka--pelna { background: var(--color-accent2-strong); border-color: var(--color-accent2-strong); }
.mr-kropka--biezaca { background: var(--color-surface); border-color: var(--color-accent-strong); border-width: 3px; }
.mr-kropka--pusta { border-style: dotted; }

/* ── PASEK POSTĘPU ─────────────────────────────────────────────────────────── */
.mr-pasek { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.mr-pasek__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent2-strong); }
.mr-pasek__opis { display: block; font-size: var(--fs-xs); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-1); }

/* ── DOKUMENT (raport) — własny świat: węższa miara, cień kontaktowy,
      stan znaczy PEŁNA obwódka + etykieta `.mr-dokument__stan` (D-27) ─────────── */
.mr-dokument {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-doc);
  padding: var(--sp-5);
}
.mr-dokument--czeka { border-color: var(--edge-czeka); }
.mr-dokument--ok { border-color: var(--edge-ok); }
.mr-dokument__stan { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-label); }
.mr-dokument--czeka .mr-dokument__stan { color: var(--color-accent-strong); }
.mr-dokument--ok .mr-dokument__stan { color: var(--color-accent2-text); }
.mr-dokument__naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.mr-dokument__tytul { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-2xl); }
.mr-dokument__miara { max-width: 52ch; }
.mr-dokument__pasmo {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  background: var(--color-surface-warm); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0;
}
.mr-dokument__poz { flex: 1 1 120px; min-width: 0; }

/* ── OŚ DNI (zestawienie tygodnia w raporcie) ──────────────────────────────── */
.mr-os { display: flex; align-items: flex-start; gap: var(--sp-2); overflow-x: auto; }
.mr-os__dzien { flex: 1 1 0; min-width: 76px; text-align: center; }
.mr-os__znacznik {
  width: 40px; height: 40px; margin: 0 auto var(--sp-2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent2-strong); color: var(--color-cta-text);
  border: 2px solid var(--color-accent2-strong);
}
.mr-os__dzien--planowany .mr-os__znacznik { background: transparent; color: var(--color-text-muted); border-style: dashed; border-color: var(--color-field); }
.mr-os__data { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── ŁAŃCUSZEK (lista pozycji materiału) ───────────────────────────────────── */
.mr-lancuch { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mr-ogniwo {
  position: relative; width: 96px; min-height: 96px; padding: var(--sp-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm); text-align: center; font-size: var(--fs-xs);
}
.mr-ogniwo__nr { position: absolute; top: 4px; left: 8px; font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mr-ogniwo--wybrane { border-color: var(--color-accent2-strong); border-width: 2px; }
.mr-ogniwo--zakryte { border-style: dashed; border-color: var(--color-field); background: var(--color-bg); color: var(--color-text-muted); }
.mr-ogniwo--bledne { border-color: var(--color-accent-strong); border-width: 2px; }
.mr-ogniwo__symbol { font-size: var(--fs-2xl); line-height: 1; }

/* ── TABELA OPERATORA ──────────────────────────────────────────────────────── */
/* K-093: tło TRANSPARENT, nie surface — nieprzezroczyste tło dziecka zamalowywało
   scroll-shadow rodzica .table-wrap (afordancja przewijania na mobile); solidną bazę
   surface daje ostatnia warstwa background .table-wrap, kolor się nie zmienia. */
.mr-tabela { width: 100%; border-collapse: collapse; background: transparent; }
.mr-tabela thead th {
  text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-text-muted);
  background: var(--color-surface-warm); padding: var(--sp-3);
  line-height: 1.25; vertical-align: bottom;
}
.mr-tabela thead th:first-child { border-top-left-radius: var(--radius-sm); }
.mr-tabela thead th:last-child { border-top-right-radius: var(--radius-sm); }
.mr-tabela td { padding: var(--sp-3); border-top: var(--border-w) solid var(--color-border); vertical-align: middle; font-size: var(--fs-sm); }
.mr-tabela tbody tr:hover td { background: var(--color-bg); }
.mr-tabela__uczen { display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-base); font-weight: var(--fw-label); white-space: nowrap; }
.mr-tabela__num { font-variant-numeric: tabular-nums; font-weight: var(--fw-head); font-size: var(--fs-lg); }
.mr-nowrap { white-space: nowrap; }

/* ── FILTRY ────────────────────────────────────────────────────────────────── */
.mr-filtry { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.mr-filtry .field { margin-bottom: 0; flex: 1 1 180px; }
.mr-szukaj { flex: 2 1 240px; }

/* Ikona wiodąca w wierszu meta (makieta: zegar/kalendarz przy każdej pozycji) + separator. */
.mr-ikona--inline { width: 16px; height: 16px; min-width: 16px; padding: 0; background: none; border: 0; color: var(--color-text-muted); margin-right: 6px; vertical-align: -3px; display: inline-flex; }
.mr-ikona--inline svg { width: 16px; height: 16px; stroke-width: 2.6; }
.mr-wiersz__meta > span + span { border-left: 1px solid var(--color-border-strong); padding-left: var(--sp-3); }

/* ── UKŁAD EKRANU PANELU (makieta panel.png: treść + kolumna „Na dziś") ─────
   Wzorzec: design-system/20-ekran-panel.html (.ekran-grid). Kolumna zwija się
   pod treść poniżej 900 px — makieta desktopowa nie wiąże układu mobilnego. */
.mr-karta-daty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); line-height: 1.35;
  background: var(--color-bg); }
.mr-karta-daty .mr-ikona { width: 48px; height: 48px; }
.mr-karta-daty .mr-ikona svg { width: 30px; height: 30px; }
main.section:has([data-widok="panel"]:not([hidden])) > .container,
main.section > .container:has([data-widok="panel"]) { max-width: var(--maxw-wide); padding: 0 var(--sp-4); }
main.section { padding-top: var(--sp-5); }
.mr-ekran-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; padding-bottom: 72px; }
.mr-ekran-grid > aside.card { background: var(--color-surface-warm); border-color: transparent; padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.mr-nadzis { display: flex; flex-direction: column; }
.mr-nadzis__rzad + .mr-nadzis__rzad { border-top: 1px solid var(--color-border-warm); }
.mr-nadzis__tresc { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mr-nadzis__rzad { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: nowrap; padding: var(--sp-4) 0; }
.mr-nadzis__licznik { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-xl); }
.mr-nadzis__opis { color: var(--color-text-muted); font-size: var(--fs-md); }
/* ikona w OKRĘGU z obwódką — jak w kolumnie „Na dziś" na makiecie (nie plama tła) */
.mr-ikona--obwodka { background: var(--color-surface); border: 0; color: var(--color-accent2-strong); width: 54px; height: 54px; }
.mr-ikona--obwodka svg { width: 28px; height: 28px; stroke-width: 2.0; }
@media (max-width: 900px) { .mr-ekran-grid { grid-template-columns: 1fr; } }

/* ── PUSTY STAN (kanon: część ekranów pokazuje WYŁĄCZNIE komunikat) ────────── */
.mr-pusto {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); text-align: center;
  background: var(--color-surface-warm); border-radius: var(--radius);
}
.mr-pusto__tytul { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-lg); }
.mr-pusto__opis { color: var(--color-text-muted); max-width: 46ch; }

/* ── LISTA POTWIERDZEŃ (ptaszki) ───────────────────────────────────────────── */
.mr-lista { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; padding: 0; }
.mr-lista li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.mr-lista li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--color-accent2-strong);
  -webkit-mask: var(--mr-ptaszek) no-repeat center/12px 12px;
  mask: var(--mr-ptaszek) no-repeat center/12px 12px;
  box-shadow: inset 0 0 0 20px var(--color-accent2-strong);
}

/* ── TOAST ─────────────────────────────────────────────────────────────────── */
.mr-toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  max-width: 420px; padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface); border: var(--border-w) solid var(--color-accent2-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.mr-toast--uwaga { border-color: var(--color-warning); }
.mr-toast--blad { border-color: var(--color-error); }
.mr-toast__tytul { font-weight: var(--fw-label); }
.mr-toast__opis { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── EKRANY DZIECKA — minimum 18 px, cele ≥ 56 px, zero gratyfikacji ───────── */
.mr-dziecko { font-size: var(--fs-child); }
.mr-dziecko .btn { min-height: var(--tap-child); font-size: var(--fs-lg); border-radius: var(--radius); }
.mr-odpowiedzi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 430px) { .mr-odpowiedzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-odpowiedz {
  position: relative; min-height: 104px; padding: var(--sp-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: var(--radius); font-family: var(--font-body); font-size: var(--fs-child);
  color: var(--color-text); cursor: pointer;
}
.mr-odpowiedz:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mr-odpowiedz--bledna { border-color: var(--color-accent-strong); }
.mr-odpowiedz__x {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-strong); color: var(--color-accent-text); font-size: var(--fs-sm); font-weight: var(--fw-head);
}
.mr-podpowiedz { display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--color-accent2-soft); border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
/* Wariant koralowy WYŁĄCZNIE tam, gdzie coś czeka na reakcję człowieka
   (np. „Spróbuj jeszcze raz" u dziecka). Na tincie koralowym tekst jest granatowy — 9,99:1. */
.mr-ikona--iskra { flex: none; width: 22px; height: 22px; color: var(--color-accent2-strong); display: inline-flex; }
.mr-ikona--iskra svg { width: 22px; height: 22px; }
.mr-podpowiedz--czeka { border-color: var(--edge-czeka); background: var(--color-accent-soft); }
.mr-podpowiedz__tytul { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-lg); }
.mr-oddech {
  width: 104px; height: 104px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 3px dashed var(--color-accent2-strong); color: var(--color-accent2-text);
  font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-base);
}
.mr-faza { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.mr-faza__kropka { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-field); }
.mr-faza--aktywna .mr-faza__kropka { background: var(--color-accent2-strong); border-color: var(--color-accent2-strong); }

/* Dolny pasek narzędzi ucznia (mobile) — sterowniki NIGDY pod :hover. */
.mr-dolny {
  display: flex; align-items: stretch; gap: var(--sp-2);
  background: var(--color-surface); border-top: var(--border-w) solid var(--color-border);
  padding: var(--sp-2);
}
.mr-dolny__poz {
  flex: 1 1 0; min-height: var(--tap-child);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text);
  cursor: pointer;
}
.mr-dolny__poz:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ── OKNO PREZENTACJI (rzutnik) — jeden obiekt, zero chrome, tekst ≥ 32 px ─── */
.mr-projektor {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); padding: var(--sp-6); background: var(--color-bg); text-align: center;
}
.mr-projektor__obiekt { font-size: clamp(var(--fs-3xl), 12vw, 160px); line-height: 1; }
.mr-projektor__podpis { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-projektor); }

/* ── ANIMACJE narracyjne (⛔ nie gadżety) ──────────────────────────────────── */
@keyframes mr-wejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mr-wejscie { animation: mr-wejscie 320ms cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .mr-wejscie { animation: none; } }


/* ══ KOMPONENTY Z MAKIET (audyt 18.08) ════════════════════════════════════════
   Wyprowadzone z 12 makiet klientki pomiarem rastra, nie z oka. Każdy występuje
   na ≥2 makietach (liczba w komentarzu) — element z jednej makiety jest wzorcem
   ekranu, nie komponentem. Wymiary siedzą na skali pudełek --box-*.            */

/* PRZYCISK OBRYSOWY — 5 makiet. Koral JAKO TEKST mierzy 4,55 na tle (AA ✔);
   DD-1 zakazał koralu jako WYPEŁNIENIA, nie jako obrysu. */
.btn-obrys { background: var(--color-surface); color: var(--color-accent-strong);
  border-color: var(--color-accent-strong); box-shadow: none; }
.btn-obrys:hover { background: var(--color-accent-soft); }
.btn-obrys--turkus { color: var(--color-accent2-strong); border-color: var(--color-accent2-strong); }
.btn-obrys--turkus:hover { background: var(--color-accent2-soft); }

/* CHIP: wariant gęsty (tabela mierzy 28–30, nie 38) i wariant z własnym glifem */
.mr-chip--maly { min-height: 30px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.mr-chip--maly::before { width: 8px; height: 8px; }
.mr-chip--ikona::before { display: none; }
.mr-chip--ikona > svg { flex: none; width: 16px; height: 16px; }

/* OŚ KROKÓW — łącznik między znacznikami + stan bieżący (4 makiety) */
.mr-os__dzien { position: relative; }
.mr-os__dzien::before { content: ""; position: absolute; top: calc(var(--box-3) / 2 - 1px);
  right: 50%; left: -50%; height: 2px; background: var(--color-border-strong); z-index: 0; }
.mr-os__dzien:first-child::before { display: none; }
.mr-os__dzien--zrobiony::before { background: var(--color-accent2-strong); }
.mr-os__dzien--biezacy .mr-os__znacznik { background: var(--color-surface);
  color: var(--color-accent2-strong); border: 3px solid var(--color-accent2-strong);
  font-family: var(--font-head); font-weight: var(--fw-head); }
.mr-os__etykieta { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ODTWARZANIE PRÓBKI — profil ucznia i ustawienia lektora (2 makiety) */
.mr-play { flex: none; width: var(--box-2); height: var(--box-2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--color-accent2-soft); color: var(--color-accent2-strong);
  border: var(--border-w) solid transparent; }
.mr-play--pelny { background: var(--color-accent2-strong); color: var(--color-cta-text); }
.mr-play--jasny { background: var(--color-surface); border-color: var(--color-border); }
.mr-play svg { width: 18px; height: 18px; }
.mr-play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ETYKIETA SEKCJI WERSALIKAMI — 4 makiety */
.mr-etykieta { display: block; font-size: var(--fs-xs); font-weight: var(--fw-label);
   color: var(--color-text-muted); line-height: 1.25; }
.mr-etykieta--mocna { color: var(--color-text); }

/* PRZEŁĄCZNIK i KROKOMIERZ — przypisanie zadania, tryb zajęć */
.mr-przelacznik { flex: none; width: 52px; height: 28px; border-radius: var(--radius-pill);
  background: var(--color-field); border: 0; cursor: pointer; position: relative; transition: background .15s; }
.mr-przelacznik::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--color-surface); transition: transform .15s; }
.mr-przelacznik[aria-checked="true"] { background: var(--color-accent2-strong); }
.mr-przelacznik[aria-checked="true"]::after { transform: translateX(24px); }
.mr-przelacznik:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mr-krok { display: inline-flex; align-items: center; gap: var(--sp-4); }
.mr-krok__wartosc { font-family: var(--font-head); font-weight: var(--fw-display);
  font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }

/* NOTA (i) — 6 makiet. To NIE jest .mr-podpowiedz (ta jest miętowa, z iskrą,
   i mówi „przygotowaliśmy to za Ciebie”); nota tłumaczy zasadę działania. */
.mr-nota { display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  font-size: var(--fs-sm); color: var(--color-text-muted); }
.mr-nota--ciepla { background: var(--color-surface-warm); border-color: var(--color-border-warm); }
.mr-nota__ikona { flex: none; width: var(--box-1); height: var(--box-1); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-text); color: var(--color-text); }
.mr-nota__ikona svg { width: 16px; height: 16px; }

/* PRZEŁĄCZNIK SEGMENTOWY — wybór wariantu materiału, poziom trudności (2 makiety) */
.mr-segmenty { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.mr-segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-4); cursor: pointer;
  background: var(--color-surface-warm); border: var(--border-w) solid transparent;
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-label); color: var(--color-text); }
.mr-segment[aria-pressed="true"] { background: var(--color-accent2-strong); color: var(--color-cta-text); }
.mr-segment:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mr-segmenty--cyfry .mr-segment { min-width: var(--box-4); font-family: var(--font-head);
  font-size: var(--fs-xl); font-weight: var(--fw-display); }

/* WIERSZ WYBORU Z PRÓBKĄ GŁOSU — 2 makiety. Wykres fali rysowany gradientem:
   zero grafik binarnych, kolor z tokenu, skaluje się z szerokością. */
.mr-wybor { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: 66px; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text); font-family: var(--font-body); }
.mr-wybor--wybrany { border-color: var(--color-accent2-strong); border-width: 2px;
  background: var(--color-accent2-soft); }
.mr-wybor__tresc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mr-wybor__nazwa { font-weight: var(--fw-label); font-size: var(--fs-md); }
.mr-wybor__opis { font-size: var(--fs-sm); color: var(--color-text-muted); }
.mr-wybor__czas { flex: none; font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mr-wybor:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mr-fala { flex: 1 1 120px; height: 28px; min-width: 0; border-radius: var(--radius-sm);
  background: repeating-linear-gradient(90deg, var(--color-accent2-strong) 0 2px, transparent 2px 6px);
  -webkit-mask: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
          mask: linear-gradient(180deg, transparent 8%, #000 30%, #000 70%, transparent 92%); }

/* KARTA PRZYKŁADU — biblioteka treningów (2 makiety, po 4 karty) */
.mr-przyklady { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .mr-przyklady { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mr-przyklady { grid-template-columns: 1fr; } }
.mr-przyklad { display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--radius);
  background: var(--color-surface-warm); border: var(--border-w) solid var(--color-border-warm); }
.mr-przyklad__glowa { display: flex; align-items: center; gap: var(--sp-3); }
.mr-przyklad .mr-ikona--kwadrat { width: var(--box-5); height: var(--box-5); }
.mr-przyklad .mr-ikona--kwadrat svg { width: 34px; height: 34px; }

/* NAGŁÓWEK OSOBY — 7 makiet (profil, raport, tryb zajęć, status…) */
.mr-osoba { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.mr-osoba__tresc { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.mr-osoba__imie { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-2xl); }
.mr-osoba__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--color-text-muted); }
.mr-osoba__meta > * { display: inline-flex; align-items: center; gap: var(--sp-1); }
.mr-osoba--pasek .mr-osoba__imie { font-size: var(--fs-lg); }
.mr-osoba--duza .mr-osoba__imie { font-size: var(--fs-3xl); }

/* STOPKA EKRANU — metadane sesji pod treścią (2 makiety) */
.mr-stopka-ekranu { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  background: var(--color-surface-warm); font-size: var(--fs-sm); color: var(--color-text-muted); }
.mr-stopka-ekranu > * { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ADNOTACJA ODRĘCZNA — 4 makiety. Podpis wizualny marki: kursywa kroju
   nagłówkowego + zakrzywiona strzałka. ⛔ Bez trzeciego kroju (kanon fontów). */
.mr-adnotacja { display: inline-flex; align-items: flex-end; gap: var(--sp-2);
  font-family: var(--font-head); font-weight: var(--fw-head); font-style: italic;
  font-size: var(--fs-md); color: var(--color-accent2-strong); }
.mr-adnotacja::before { content: ""; flex: none; width: var(--box-2); height: var(--box-1);
  background-color: currentColor;
  -webkit-mask: var(--mr-strzalka) no-repeat center/100% 100%;
          mask: var(--mr-strzalka) no-repeat center/100% 100%; }
.mr-adnotacja--koral { color: var(--color-accent-strong); }
.mr-adnotacja--prawa { flex-direction: row-reverse; }
.mr-adnotacja--prawa::before { transform: scaleX(-1); }

/* LINK POWROTU — 2 makiety */
.mr-powrot { display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; font-weight: var(--fw-label); }
.mr-powrot:hover { background: var(--color-bg); text-decoration: none; }
.mr-powrot svg { width: 20px; height: 20px; flex: none; }
.mr-powrot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ZNACZNIK DANYCH PRZYKŁADOWYCH — 12/12 makiet, najczęstszy element zestawu */
.mr-demo { display: block; text-align: right; margin-top: var(--sp-4);
  font-size: var(--fs-sm); color: var(--color-text-muted); }
@media print { .mr-demo { display: none; } }

/* SIATKA TRZYKOLUMNOWA — 4 ekrany (weryfikacja raportu, przypisanie, zajęcia, status) */
.mr-ekran-grid--3 { grid-template-columns: 320px minmax(0, 1fr) 320px; }
@media (max-width: 1180px) { .mr-ekran-grid--3 { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 900px) { .mr-ekran-grid--3 { grid-template-columns: 1fr; } }

/* DROBNE warianty rozmiarowe z pomiaru */
.mr-ogniwo--male { width: 52px; min-height: 52px; }
.mr-ikona--kwadrat-mala { width: var(--box-2); height: var(--box-2); }
.mr-ikona--kwadrat-mala svg { width: 20px; height: 20px; }
.mr-lista--kropki li::before { -webkit-mask: none; mask: none; width: 8px; height: 8px;
  margin-top: 8px; box-shadow: none; background: var(--color-accent2-strong); }

/* ── MOBILE-FIRST: rama i dokument na 375 px ───────────────────────────────── */
@media (max-width: 720px) {
  .mr-bar { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .mr-bar__znak img, .mr-bar__znak svg { height: 36px; }
  .mr-bar__akcja { order: 2; }
  .mr-bar__akcja .btn { padding-left: var(--sp-4); padding-right: var(--sp-4); font-size: var(--fs-sm); }
  .mr-uzytkownik { order: 3; margin-left: 0; }
  .mr-bar__nav { order: 4; flex: 1 1 100%; flex-wrap: wrap; row-gap: var(--sp-2); overflow: visible; padding-left: 0; }
  .mr-uzytkownik__opis { display: none; }
  .mr-pas { padding: var(--sp-4); }
  .mr-pas .btn { width: 100%; }
  .mr-kafel { flex: 1 1 100%; }
  /* R1: chip ma `nowrap`, wiec na 375 px wypychal wiersz do 431 px (h-scroll).
     Na telefonie chip schodzi do drugiej linii zamiast rozpychac ekran. */
  .mr-wiersz { flex-wrap: wrap; row-gap: var(--sp-2); }
  .mr-wiersz__tresc { flex: 1 1 40%; }
  .mr-wiersz > .mr-chip { order: 5; }
  .mr-wiersz__strzalka { order: 4; margin-left: auto; }
  .mr-dokument { padding: var(--sp-4); }
  .mr-dokument__pasmo { gap: var(--sp-4); padding: var(--sp-4); }
  .mr-dokument__poz { flex: 1 1 40%; }
  .mr-os__dzien { min-width: 64px; }
}

/* ============================================================================
   EKRAN: TRENING NA ZAJĘCIACH (`ekran_trening_na_zajeciach`) — warstwa zabawowa
   Wdrożenie 1:1 z kanwy design-system/claude-design/trening-na-zajeciach.dc.html
   (DD-8). Kolory WYŁĄCZNIE tokenami (kanwa niosła surowe hexy sprzed pomiaru).
   Render: public/js/trening.js (ekran w całości stanowy, jak kanwa).
   ============================================================================ */
.tr-uklad { animation: trWjazd .55s ease both; }
@keyframes trWjazd { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes trPuls { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes trDryf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .tr-uklad, .tr-dryf, .tr-puls { animation: none !important; }
}
.tr-naglowek { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tr-sciezka { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-head); width: 100%; }
.tr-sciezka a { color: var(--color-accent2-strong); text-decoration: none; }
.tr-sciezka a:hover { color: var(--color-accent-strong); }
.tr-sciezka__dalej { color: var(--color-text-muted); }
.tr-naglowek h1 { font-family: var(--font-fun); font-size: var(--fs-2xl); font-weight: var(--fw-display); margin: 0; }
.tr-meta { background: var(--color-surface-warm); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-pill); padding: 6px var(--sp-4); font-weight: var(--fw-head); font-size: var(--fs-xs); color: var(--color-text-muted); }
.tr-kolumny { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: flex-start; margin-top: var(--sp-4); }
.tr-kol-bok { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--sp-4); }
.tr-kol-scena { flex: 2.1; min-width: 380px; display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 900px) { .tr-kol-scena { min-width: 100%; order: -1; } }

/* Karty warstwy zabawowej: obwódka kremowa + twardy cień POP */
.tr-karta { background: var(--color-surface); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--sp-4); }
.tr-karta h3 { font-family: var(--font-fun); font-size: var(--fs-base); font-weight: var(--fw-display); margin: 0 0 var(--sp-3); }
.tr-karta--rada { border: 2px solid var(--color-accent2); box-shadow: 0 4px 0 rgba(9, 84, 75, .18); }
.tr-karta--rada h3 { color: var(--color-accent2-text); margin: 0; }
.tr-karta--rada p { font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text-muted); line-height: var(--lh-body); margin-top: var(--sp-2); }
.tr-nota { font-size: var(--fs-2xs); font-weight: var(--fw-label); color: var(--color-text-muted); margin-top: var(--sp-2); }

/* Przycisk-wybór (typ ćwiczenia, etap, tryb, zakres, numer) */
.tr-wybor { cursor: pointer; text-align: left; display: flex; align-items: center; gap: var(--sp-2); background: var(--color-surface); border: 2px solid var(--color-border-warm); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-sm); color: var(--color-text-muted); min-height: var(--tap); }
.tr-wybor[aria-pressed="true"] { background: var(--color-accent2-soft); border-color: var(--color-accent2); color: var(--color-accent2-text); }
/* Bieżący ETAP = koral („tu jesteś teraz”), wybrany TYP = turkus („wybrane”) —
   rozróżnienie z kanwy (werdykt wizualny 18.08, poprawka #1). */
.tr-wybory--etapy .tr-wybor[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-accent-strong); color: var(--color-text); }
.tr-wybor:focus-visible, .tr-chip-nr:focus-visible, .tr-licznik__krok:focus-visible,
.btn-pop:focus-visible, .btn-pop-ok:focus-visible, .btn-ramka:focus-visible, .btn-cichy:focus-visible,
.tr-instrukcja__glos:focus-visible, .tr-dzieci__start:focus-visible, .tr-dzieci__zamknij:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tr-wybor:disabled { opacity: .4; cursor: default; }
.tr-wybor--rowny { flex: 1; min-width: 110px; justify-content: center; text-align: center; font-size: var(--fs-xs); }
.tr-wybory { display: flex; flex-direction: column; gap: 7px; }
.tr-wybory--rzad { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
.tr-wybory--rzad .tr-wybor { font-size: var(--fs-xs); }
.tr-wybor__nr { width: 24px; height: 24px; border-radius: 50%; background: var(--color-border-warm); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); flex: none; }
.tr-wybor__nr--byl { background: var(--color-accent2-strong); color: #fff; }
.tr-wybor__nr--jest { background: var(--color-accent-strong); color: #fff; }
.tr-etykietka { font-weight: var(--fw-display); font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 6px; }
.tr-chip-nr { cursor: pointer; width: 34px; height: 34px; background: var(--color-surface); border: 2px solid var(--color-border-warm); color: var(--color-text-muted); border-radius: var(--radius-sm); font-family: var(--font-fun); font-weight: var(--fw-display); font-size: var(--fs-sm); }
.tr-chip-nr[aria-pressed="true"] { background: var(--color-accent2-soft); border-color: var(--color-accent2); color: var(--color-accent2-text); }

/* Licznik sekund (wyciszenie / zamykanie oczu) */
.tr-licznik { display: flex; align-items: center; gap: var(--sp-2); }
.tr-licznik__krok { width: 42px; height: 42px; cursor: pointer; background: var(--color-surface); border: var(--border-w) solid var(--color-accent-strong); color: var(--color-accent-strong); border-radius: var(--radius-sm); font-size: var(--fs-lg); font-weight: var(--fw-display); }
.tr-licznik__pole { flex: 1; text-align: center; background: var(--color-bg); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-sm); padding: 7px; font-weight: var(--fw-label); color: var(--color-text-muted); }
.tr-licznik__pole b { font-family: var(--font-fun); font-size: var(--fs-xl); color: var(--color-text); }

/* Pas instrukcji lektora */
.tr-instrukcja { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; background: var(--color-accent2-soft); border: var(--border-w) solid var(--color-accent2-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.tr-instrukcja__tresc { flex: 1 1 240px; }
.tr-instrukcja__glos { flex: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); background: var(--color-surface); border: 2px solid var(--color-accent2); color: var(--color-accent2-text); border-radius: var(--radius-pill); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-4); }
.tr-instrukcja__tresc { font-weight: var(--fw-display); font-size: var(--fs-sm); color: var(--color-accent2-text); }

/* Scena pary */
.tr-scena { background: var(--color-surface); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop-lg); padding: var(--sp-6) var(--sp-5); min-height: 330px; display: flex; align-items: center; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; }
.tr-okaz { position: relative; width: 264px; min-height: 264px; background: var(--color-bg); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4); }
.tr-okaz--szary { filter: grayscale(1); }
.tr-okaz__nr { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-cta); color: var(--color-cta-text); display: flex; align-items: center; justify-content: center; font-family: var(--font-fun); font-weight: var(--fw-display); font-size: var(--fs-base); }
.tr-okaz__ikona { font-size: var(--mat-4); line-height: 1.1; color: var(--color-text); font-family: var(--font-fun); font-weight: var(--fw-display); }
.tr-okaz__ikona--cyfra { font-size: var(--mat-6); }
.tr-okaz__podpis { font-family: var(--font-fun); font-size: var(--fs-lg); font-weight: var(--fw-display); color: var(--color-text); }
.tr-okaz__podpis--cichy { color: var(--color-text-muted); }
.tr-plus { font-family: var(--font-fun); font-size: var(--fs-2xl); color: var(--color-accent-strong); }
.tr-oslona { position: absolute; inset: 0; background: var(--color-oslona); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); }
.tr-oslona__znak { font-size: var(--mat-1); }

/* Postęp: etap · para + kropki */
.tr-postep { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.tr-postep__opis { font-weight: var(--fw-display); font-size: var(--fs-sm); color: var(--color-text-muted); }
.tr-kropki { display: flex; gap: 5px; }
.tr-kropka { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border-warm); }
.tr-kropka--byla { background: var(--color-accent2); }
.tr-kropka--jest { background: var(--color-accent); }

/* Sterowanie sceną */
.tr-stery { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; justify-content: center; }
.tr-stery .btn { border-radius: var(--radius-sm); font-weight: var(--fw-display); }
.btn-pop { background: var(--color-accent-strong); color: var(--color-accent-text); border: none; box-shadow: var(--shadow-pop-cta); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-base); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); }
.btn-pop:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(148, 32, 24, .35); }
.btn-pop-ok { background: var(--color-accent2-strong); color: #fff; border: none; box-shadow: var(--shadow-pop-ok); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); }
.btn-pop-ok:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(9, 84, 75, .35); }
.btn-ramka { background: var(--color-surface); border: 2px solid var(--color-accent-strong); color: var(--color-accent-strong); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-base); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--sp-2); }
.btn-cichy { background: var(--color-surface); border: var(--border-w) solid var(--color-border-warm); color: var(--color-text-muted); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); }
/* slop-ok: keycap — PELNA obwodka, tylko dolna krawedz grubsza (metafora fizycznego klawisza z kanwy CD); to nie akcentowa krecha na lewej krawedzi boksu */
.tr-kbd { background: var(--color-bg); border: var(--border-w) solid var(--color-border-warm); border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; font-size: var(--fs-2xs); font-family: var(--font-head); color: var(--color-text-muted); }
.btn-pop .tr-kbd { background: rgba(255, 255, 255, .2); border: none; color: inherit; }
.tr-ikona { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.tr-plan__poz > span:last-child { white-space: nowrap; }
.tr-mimochodem { text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-label); color: var(--color-text-muted); }

/* Scena wyciszenia i finał */
.tr-scena--osrodek { flex-direction: column; text-align: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-5); }
.tr-dryf { animation: trDryf 3.2s ease-in-out infinite; }
.tr-puls { animation: trPuls .45s ease both; }
.tr-scena__pikto { font-size: var(--mat-2); }
.tr-scena__pikto--final { font-size: var(--mat-3); }
.tr-scena__tytul { font-family: var(--font-fun); font-size: var(--fs-xl); font-weight: var(--fw-display); }
.tr-scena__tytul--final { font-size: var(--fs-3xl); }
.tr-scena__opis { font-size: var(--fs-sm); font-weight: var(--fw-label); color: var(--color-text-muted); max-width: 460px; margin: 0 auto; }
.tr-wynik { background: var(--color-accent2-soft); border: var(--border-w) solid var(--color-accent2-line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); font-family: var(--font-fun); font-size: var(--fs-lg); font-weight: var(--fw-display); color: var(--color-accent2-text); }

/* Plan dnia (prawa kolumna) */
.tr-plan { display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-display); }
.tr-plan__poz { display: flex; justify-content: space-between; background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); color: var(--color-text); }
.tr-plan__poz--zrobiona { background: var(--color-accent2-soft); color: var(--color-accent2-text); }
.tr-plan__poz--trwa { background: var(--color-accent2-soft); }
.tr-terminy { background: var(--color-surface-warm); border: var(--border-w) solid var(--color-border-warm); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text-muted); }
.tr-terminy__akcje { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tr-terminy__akcje .btn-cichy { font-size: var(--fs-2xs); padding: 7px 11px; min-height: 0; }
.tr-stopka { text-align: right; color: var(--color-text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-label); margin-top: var(--sp-5); }

/* Okno projekcji dla dzieci (pełny ekran; rzutnik — minimum --fs-projektor) */
.tr-dzieci { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-cta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-5); }
.tr-dzieci__czekamy { text-align: center; }
.tr-dzieci__pikto { font-size: var(--mat-5); }
.tr-dzieci__haslo { font-family: var(--font-fun); font-size: var(--fs-3xl); font-weight: var(--fw-display); color: var(--color-text-invert); margin-top: var(--sp-4); max-width: 640px; line-height: 1.35; }
.tr-dzieci__nota { font-size: var(--fs-sm); font-weight: var(--fw-label); color: var(--color-accent2-line); margin-top: var(--sp-3); }
.tr-dzieci__para { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; }
.tr-dzieci .tr-okaz { width: 280px; min-height: 280px; border: none; border-radius: 26px; }
.tr-dzieci .tr-okaz__ikona { font-size: var(--mat-7); }
.tr-dzieci .tr-okaz__ikona--cyfra { font-size: var(--mat-8); }
.tr-dzieci .tr-okaz__podpis { font-size: var(--fs-2xl); }
.tr-dzieci .tr-okaz__nr { top: 12px; left: 12px; width: 38px; height: 38px; font-size: var(--fs-md); }
.tr-dzieci .tr-oslona { border-radius: 26px; }
.tr-dzieci .tr-oslona__znak { font-size: var(--mat-3); }
.tr-dzieci__start { background: var(--color-accent2-strong); color: #fff; border: none; font-family: var(--font-fun); font-weight: var(--fw-display); font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-7); border-radius: var(--radius-lg); box-shadow: 0 4px 0 rgba(9, 84, 75, .4); cursor: pointer; min-height: var(--tap-child); }
.tr-dzieci__licznik { color: var(--color-accent2-line); font-weight: var(--fw-display); font-size: var(--fs-base); }
.tr-dzieci__zamknij { position: absolute; top: 20px; right: 20px; cursor: pointer; background: none; border: 2px solid rgba(255, 248, 235, .4); color: var(--color-text-invert); font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); min-height: var(--tap); }

@media (max-width: 640px) {
  .tr-okaz { width: 100%; max-width: 300px; }
  .tr-scena { padding: var(--sp-4); }
  .tr-kol-bok, .tr-kol-scena { min-width: 100%; }
}

/* ==========================================================================
   BIBLIOTEKA TRENINGÓW — S4c [B1] (ekran_materialy + ekran_material_treningowy)
   Wzorzec: kanwy CD biblioteka-treningow/material-treningowy → ZMIERZONE tokeny
   (tabela mapowania: DECYZJE-DESIGN.md „ekran: ekran_materialy"). Zero px w font-size.
   ========================================================================== */
.bib-uklad { display: flex; flex-direction: column; gap: var(--sp-5); }
.bib-naglowek { display: flex; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.bib-naglowek__status { flex: none; }
.bib-h2 { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-lg); margin: 0; }
.bib-sub { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: var(--fw-label); }
.bib-sciezka { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-label); margin-bottom: var(--sp-2); }
.bib-sciezka__dalej { color: var(--color-text-muted); }

/* Chipy statusu publikacji — stan = etykieta + PEŁNA obwódka (zero AI-slop: bez krechy) */
.bib-chip { display: inline-flex; align-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-display); padding: 3px var(--sp-3); border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); white-space: nowrap; }
.bib-chip--pub { background: var(--color-accent2-soft); border-color: var(--color-accent2-line); color: var(--color-accent2-text); }
.bib-chip--czeka { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.bib-chip--odrzucony { border-color: var(--color-error); color: var(--color-error); }
.bib-chip--arch { background: var(--color-bg); border-style: dashed; }

/* Kafelek typu materiału (SVG kreskowe zamiast emoji kanwy) */
.bib-kafel { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent2-soft); color: var(--color-accent2-strong); }
.bib-kafel--lancuszek-wyrazowy, .bib-kafel--symbole-cyfr { background: var(--color-surface-warm); color: var(--color-warning-text); }
.bib-kafel--lancuszek-mieszany, .bib-kafel--pokoj-rzymski { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.bib-ikona { width: 22px; height: 22px; }

/* Filtry */
.bib-filtry { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; }
.bib-filtr { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 150px; }
.bib-filtr:first-child { flex: 1.7; min-width: 220px; }
.bib-filtr__etykieta { font-size: var(--fs-xs); font-weight: var(--fw-display); color: var(--color-text-muted); }

/* Tabela materiałów */
.bib-przewijak { overflow-x: auto; }
.bib-tabela { min-width: 960px; }
.bib-wiersz { display: grid; grid-template-columns: 2.2fr 1.2fr 1fr 1.3fr 1.7fr 1.1fr 1.4fr; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-top: var(--border-w) solid var(--color-border); }
.bib-wiersz--head { border-top: none; background: var(--color-surface-warm); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: var(--fs-2xs); font-weight: var(--fw-display); color: var(--color-text-muted); }
.bib-wiersz--wybrany { background: var(--color-accent2-soft); }
.bib-nazwa { display: flex; align-items: center; gap: var(--sp-3); }
.bib-akcje { display: flex; gap: var(--sp-2); align-items: center; }

/* Menu wiersza (trzy kropki) */
.bib-menu { position: relative; }
.bib-menu__lista { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-toast); min-width: 220px; background: var(--color-surface); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--sp-1); display: flex; flex-direction: column; }
.bib-menu__poz { text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-display); font-size: var(--fs-xs); color: var(--color-text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); min-height: var(--tap); }
.bib-menu__poz:hover { background: var(--color-surface-warm); }
.bib-menu__poz--uwaga { color: var(--color-error); }
.bib-menu__poz--uwaga:hover { background: var(--color-accent-soft); }

/* Stany puste (brzmienia dosłowne z kanonu) */
.bib-pusto { text-align: center; padding: var(--sp-7) var(--sp-5); }
.bib-pusto__tytul { font-family: var(--font-head); font-weight: var(--fw-display); font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.bib-brak { text-align: center; padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }

/* Pas informacyjny i sekcje */
.bib-info { background: var(--color-surface-warm); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text-muted); }
.bib-przyklady__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.bib-przyklad { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.bib-dodaj-nizej { display: flex; gap: var(--sp-3); align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--sp-4); }
.bib-stopka { text-align: right; font-size: var(--fs-2xs); }

/* Dobór gotowego łańcuszka */
.bib-dobor { display: flex; flex-direction: column; gap: var(--sp-3); }
.bib-dobor__grupa { max-width: 420px; }
.bib-dobor__podp { font-weight: var(--fw-display); margin: 0; }
.bib-dobor__kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.bib-dobor__kafel { text-align: left; display: flex; flex-direction: column; gap: var(--sp-1); background: var(--color-surface); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); cursor: pointer; min-height: var(--tap); }
.bib-dobor__kafel:hover { border-color: var(--color-accent2); }
.bib-dobor__kafel--zalecany { border: 2px solid var(--color-accent2); background: var(--color-accent2-soft); }
.bib-dobor__rola { font-size: var(--fs-2xs); font-weight: var(--fw-display); color: var(--color-accent2-text); }

/* Karta materiału: skład + akcje */
.bib-sklad { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bib-sklad__el { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--color-surface); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.bib-sklad__el--arch { border-style: dashed; color: var(--color-text-muted); }
.bib-sklad__nr { width: 24px; height: 24px; flex: none; border-radius: var(--radius-pill); background: var(--color-accent2-soft); color: var(--color-accent2-text); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: var(--fw-display); }
.bib-akcje-rzad { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.bib-modal__akcje { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* Kreator: trzy kroki obok siebie (zwijają się na mobile) */
.bib-kreator { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: var(--sp-4); align-items: start; }
.bib-krok { min-width: 0; }
.bib-podpowiedz { background: var(--color-surface-warm); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.bib-podpowiedz__kafle { display: flex; gap: var(--sp-3); }
.bib-podpowiedz__kafel { flex: 1; background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); text-align: center; }
.bib-taby { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bib-tab { cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-display); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); min-height: var(--tap); }
.bib-tab--aktywny { background: var(--color-accent2-strong); border-color: var(--color-accent2-strong); color: #fff; }
.bib-pula { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); max-height: 420px; overflow-y: auto; }
.bib-pula__el { position: relative; cursor: pointer; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; min-height: var(--tap); font-family: var(--font-body); color: var(--color-text); }
.bib-pula__el--wybrany { border-color: var(--color-accent2); background: var(--color-accent2-soft); }
.bib-wlasny { display: flex; flex-direction: column; gap: var(--sp-2); border-top: var(--border-w) solid var(--color-border); padding-top: var(--sp-3); }
.bib-wlasny__rzad { display: flex; gap: var(--sp-2); }

/* Podgląd pełnoekranowy „Tak zobaczy to dziecko" (montowany do body — lekcja treningu:
   transform na wrapperze robi z niego containing block dla position:fixed) */
.bib-pv { position: fixed; inset: 0; z-index: var(--z-paywall); background: var(--color-cta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-5); }
.bib-pv__naglowek { color: var(--color-text-invert); font-weight: var(--fw-display); font-size: var(--fs-sm); opacity: .85; }
.bib-pv__licznik { background: rgba(255, 248, 235, .14); border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-4); margin-left: var(--sp-2); }
.bib-pv__karta { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-8); text-align: center; min-width: min(80vw, 420px); }
.bib-pv__nazwa { font-family: var(--font-fun); font-weight: var(--fw-display); font-size: var(--fs-3xl); color: var(--color-text); }
.bib-pv__stery { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.bib-pv__nota { color: var(--color-text-invert); opacity: .7; font-size: var(--fs-xs); font-weight: var(--fw-label); margin: 0; }
.bib-pv :focus-visible { outline: 2px solid var(--color-text-invert); outline-offset: 2px; }

@media (max-width: 900px) {
  .bib-kreator { grid-template-columns: 1fr; }
}

/* Biblioteka — uzupełnienia fazy 2 (miniatury signed URL, import D-20) */
.bib-sklad__img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.bib-pv__img { max-width: min(60vw, 320px); max-height: 40vh; object-fit: contain; border-radius: var(--radius-sm); margin: 0 auto var(--sp-3); display: block; }
.bib-import__raport ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.bib-import__odrzucone { background: var(--color-accent-soft); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); }

/* ==========================================================================
   GŁOS I IMIĘ — S4d (ekran_ustawienia_ucznia, profil po stronie rodzica)
   Wzorzec: kanwa CD glos-i-imie → tokeny (mapowanie: DECYZJE-DESIGN.md).
   ========================================================================== */
.msg-info { background: var(--color-accent2-soft); border: var(--border-w) solid var(--color-accent2-line); color: var(--color-accent2-text); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); }
.gi-naglowek { display: flex; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.gi-info { background: var(--color-oslona); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--sp-4) var(--sp-5); max-width: 400px; }
/* list-style jawnie: globalny reset `ul { list-style:none }` zjadał punktory —
   boks czytał się jak przypadkowo wcięty akapit (werdykt wizualny S4d). */
.gi-info ul { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--color-text-muted); line-height: 1.8; list-style: disc; }
.gi-info li::marker { color: var(--color-accent2-strong); }
.gi-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; margin-top: var(--sp-5); }
.gi-karta--ciepla { background: var(--color-surface-warm); }
.gi-glosy { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Wybór = PEŁNA obwódka CAŁEGO wiersza (razem z ▶) w koralu ZNAKU + etykieta „Wybrany"
   z ikoną — nie sama czerwonawa ramka na lewej połowie (czytała się jak błąd walidacji;
   werdykt wizualny S4d + kanon anty-slop: stan = etykieta + ikona + pełna obwódka). */
.gi-glos { display: flex; gap: var(--sp-2); align-items: stretch; border: 2px solid transparent; border-radius: calc(var(--radius) + 4px); padding: 3px; }
.gi-glos--wybrany { border-color: var(--color-accent); }
.gi-glos__wybor { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); color: var(--color-text); min-height: var(--tap); }
.gi-glos__linia { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.gi-glos__badge { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); font-size: var(--fs-xs); font-weight: var(--fw-label); }
.gi-glos__badge .bib-ikona { width: 16px; height: 16px; }
.gi-glos__play { width: 52px; flex: none; cursor: pointer; border-radius: var(--radius); background: var(--color-accent2-soft); border: var(--border-w) solid var(--color-accent2-line); color: var(--color-accent2-strong); font-size: var(--fs-base); min-height: var(--tap); }
.gi-glos__play:hover { border-color: var(--color-accent2); }
.gi-forma { font-family: var(--font-fun); font-size: var(--fs-xl); font-weight: var(--fw-display); }
/* Placeholder NIE udaje wpisanej wartości (26px/800 wyglądał jak realne imię). */
.gi-forma::placeholder { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; color: var(--color-text-muted); }
.gi-akcje { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* Trwały boks potwierdzenia po zapisie (kanwa: „Potwierdzam, gotowe!") — payoff ekranu
   POD przyciskami, nie tylko ulotny toast 330px niżej przy krawędzi viewportu. */
.gi-potwierdzenie { margin-top: var(--sp-3); display: flex; align-items: flex-start; gap: var(--sp-2); }
.gi-potwierdzenie .bib-ikona { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.gi-akcje .gi-zapisz { flex: 1.6; min-width: 240px; }
.gi-akcje .btn-secondary { flex: 1; min-width: 160px; }
@media (max-width: 900px) {
  .gi-kolumny { grid-template-columns: 1fr; }
}

/* ── RUNDA UCZNIA (ekran `mobile`, public/js/runda.js) ─────────────────────
   Rytm oddechu 2 s wdech / 2 s wydech (cykl 4 s) — POZYCJA dostosowania
   do grupy wiekowej; skala koła prowadzi tempo, sygnał wizualny. */
@keyframes rundaOddech {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .runda-oddech { animation: none; }
}
/* K-064: wiersz "Na dzis" bywa LINKIEM — dziedziczy kolor, podkresla opis na hover. */
a.mr-nadzis__rzad--link { text-decoration: none; color: inherit; cursor: pointer; }
a.mr-nadzis__rzad--link:hover .mr-nadzis__opis,
a.mr-nadzis__rzad--link:focus-visible .mr-nadzis__opis { text-decoration: underline; }

/* FAB "Zglos uwage" (fixed, prawy dol) nachodzil na dolne przyciski rundy — oddech
   na dole calego widoku rundy (loader, karty wyboru i ekrany faz maja go wspolnie). */
#runda-root { padding-bottom: 84px; }

/* Ekran "zamknij oczy": na 360x640 naglowek fs-2xl mial 7 wierszy i "Dalej" ladowal
   pod krawedzia (przeklik 19.08) — stopien plynny, ciasniej na niskich ekranach. */
.runda-oczy { padding: var(--sp-6) var(--sp-4); }
.runda-oczy h1 { font-size: clamp(var(--fs-lg), 4.5vw, var(--fs-2xl)); }
@media (max-height: 700px) {
  .runda-oczy { padding: var(--sp-4) var(--sp-3); }
}

/* Para (zapamietanie) i kontekst luk: na waskim ekranie karty JEDNA POD DRUGA —
   inline flex-wrap lamal wiersz w srodku pary i "+" sierocial z boku (przeklik 19.08). */
.runda-para { display: flex; gap: var(--sp-3); justify-content: center; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .runda-para { flex-direction: column; }
  .runda-para > .card { width: min(100%, 240px); }
}

/* ── STATUS DZIECKA (public/js/status.js) — dwie kolumny TYLKO gdy sie mieszcza;
   inline grid (min ~604px) wypychal cala prawa kolumne poza ekran telefonu. */
.status-siatka { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(260px, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 720px) {
  .status-siatka { grid-template-columns: 1fr; }
}