/* ============================================================================
   DEMO-CKE — Szkoła: rozwiązywanie zadań maturalnych. SKÓRA NIEBIESKO-INDYGO.
   ============================================================================
   Plik: frontend/js/pt-quiz-engine/demo-cke.css
   - Prefiks .szc-* (Szkoła). Zero kolizji z istniejącymi przestrzeniami nazw.
   - Powierzchnia czytania matury = clean niebieski/indygo (kalma, legibilność).
     Złoto WYŁĄCZNIE w mikro-celebracjach (XP float, konfetti, seria) —
     tokeny --pt-* z pt-tokens.css/pt-motion.css (ładowane obok).
   - Animujemy transform/opacity + przejścia kolorów. prefers-reduced-motion
     respektowane (blok na dole). Mobile-first 390 px.
   ========================================================================== */

:root {
  /* ---- Powierzchnie (cool, indygo-tinted paper) ---- */
  --szc-bg:      #F3F6FC;   /* tło aplikacji (L0) — chłodny błękitny papier */
  --szc-paper:   #EAEFF9;   /* wgłębienia, skeleton, konteksty */
  --szc-surface: #FFFFFF;   /* karty (L1) — czysta biel jak arkusz */
  --szc-ink:     #16203A;   /* tekst główny — głęboki granat, nigdy #000 */

  /* ---- Indygo/błękit marki Szkoły ---- */
  --szc-primary:        #4F46E5;   /* indygo-600 */
  --szc-primary-strong: #4338CA;   /* indygo-700 — tekst/hover */
  --szc-primary-deep:   #3730A3;   /* indygo-800 */
  --szc-accent:         #2563EB;   /* błękit-600 */
  --szc-gradient:       linear-gradient(135deg, #4F46E5 0%, #4361EE 48%, #2563EB 100%);
  --szc-gradient-soft:  linear-gradient(135deg, #EEF0FE 0%, #E4ECFF 100%);
  --szc-primary-soft:   #EEF1FE;   /* tło wybranej karty */
  --szc-primary-softer: #F5F7FF;
  --szc-primary-border: rgba(79, 70, 229, 0.42);
  --szc-primary-text:   #3B37B0;   /* tekst „indygo" z kontrastem AA na jasnym */
  --szc-glow:           0 0 24px rgba(79, 70, 229, 0.26);
  --szc-glow-soft:      0 0 18px rgba(79, 70, 229, 0.14);
  --szc-focus-ring:     0 0 0 3px rgba(79, 70, 229, 0.32);

  /* ---- Neutrale chłodne ---- */
  --szc-n50:  #F3F6FC;
  --szc-n100: #E7ECF6;   /* skeleton, disabled */
  --szc-n200: #DCE3F0;   /* obrysy subtelne */
  --szc-n300: #C6CFE0;   /* obrysy inputów */
  --szc-n400: #96A0B8;   /* placeholder, ikony 2-rzędne */
  --szc-n500: #6B7590;   /* metryczka, hinty */
  --szc-n600: #515B76;   /* tekst 2-rzędny */
  --szc-n700: #3B455E;   /* tekst na soft */
  --szc-n800: #263049;
  --szc-border-card: 1px solid rgba(22, 32, 58, 0.07);

  /* ---- Sukces (szmaragd) / błąd (stonowana terakota — zero karania) ---- */
  --szc-success:        #12B76A;
  --szc-success-deep:   #067A47;
  --szc-success-soft:   #E5F8EF;
  --szc-success-border: rgba(18, 183, 106, 0.55);
  --szc-glow-success:   0 0 22px rgba(18, 183, 106, 0.30);
  --szc-error:          #D9534F;
  --szc-error-strong:   #B23A34;
  --szc-error-soft:     #FCECEA;
  --szc-error-border:   rgba(217, 83, 79, 0.40);

  /* ---- Złoto celebracji (mikro-momenty nagrody) ---- */
  --szc-gold:      #F5B93B;
  --szc-gold-soft: #FDF3DC;
  --szc-gold-text: #8A6511;
  --szc-gradient-gold: linear-gradient(135deg, #F9C843 0%, #F07020 100%);
  --szc-glow-gold: 0 0 22px rgba(245, 185, 59, 0.34);

  /* ---- Cienie ---- */
  --szc-sh1: 0 1px 3px rgba(22, 32, 58, 0.06);
  --szc-sh2: 0 6px 20px rgba(22, 32, 58, 0.09);
  --szc-sh3: 0 16px 44px rgba(22, 32, 58, 0.16);

  /* fonty (host ładuje DM Sans + Cormorant) */
  --szc-font: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --szc-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Baza ---------- */
.szc-body {
  margin: 0;
  background: var(--szc-bg);
  color: var(--szc-ink);
  font-family: var(--szc-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.szc-app, .szc-app *, .szc-app *::before, .szc-app *::after { box-sizing: border-box; }
.szc-app {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(79, 70, 229, 0.07), transparent 60%),
    var(--szc-bg);
}
.szc-app [hidden], .szc-sheet[hidden], .szc-lightbox[hidden], .szc-mascot__bubble[hidden] { display: none !important; }
:where(.szc-app) button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.szc-app :focus-visible { outline: none; box-shadow: var(--szc-focus-ring); border-radius: 10px; }
.szc-app ::selection { background: rgba(79, 70, 229, 0.20); color: var(--szc-ink); }
.szc-noscroll { overflow: hidden !important; }

/* ---------- Topbar: przełącznik przedmiotu + pasek sesji ---------- */
.szc-topbar {
  position: sticky; top: 0; z-index: 200;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 8px;
  background: linear-gradient(to bottom, var(--szc-bg) 78%, rgba(243, 246, 252, 0.86));
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
  backdrop-filter: saturate(1.4) blur(6px);
}
.szc-topbar--hidden { display: none; }

.szc-subjects {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--szc-paper);
  border: var(--szc-border-card);
  border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(22, 32, 58, 0.05);
  /* 6 przedmiotów: wypełnij gdy jest miejsce, przewijaj poziomo gdy ciasno (FIX 1) */
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.szc-subjects::-webkit-scrollbar { display: none; }
.szc-subject {
  flex: 1 0 auto; min-width: max-content; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 44px; padding: 6px 12px;
  border-radius: 12px; color: var(--szc-n600);
  transition: color .2s ease, background-color .25s ease, box-shadow .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.szc-subject__name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.szc-subject__meta { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--szc-n400); }
.szc-subject.szc-is-active {
  background: var(--szc-surface); color: var(--szc-primary-strong);
  box-shadow: var(--szc-sh1), var(--szc-glow-soft);
}
.szc-subject.szc-is-active .szc-subject__meta { color: var(--szc-primary); }
@media (hover: hover) { .szc-subject:not(.szc-is-active):hover { color: var(--szc-ink); } }
.szc-subject:active { transform: scale(.97); }

.szc-sessionbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 2px; }
.szc-icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 99px; color: var(--szc-n500);
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .szc-icon-btn:hover { background: var(--szc-paper); color: var(--szc-primary-strong); } }
.szc-icon-btn:active { transform: scale(.94); }

.szc-progress {
  flex: 1; height: 9px; border-radius: 99px;
  background: var(--szc-n200); overflow: hidden;
  transition: box-shadow .3s ease;
}
.szc-progress--lit { box-shadow: var(--szc-glow-soft); }
.szc-progress--pulse { animation: szc-prog-pulse .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes szc-prog-pulse { 0%{transform:scaleY(1);} 45%{transform:scaleY(1.4);} 100%{transform:scaleY(1);} }
.szc-progress__fill {
  position: relative; width: 100%; height: 100%; border-radius: 99px;
  background: var(--szc-gradient);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s ease; will-change: transform; overflow: hidden;
}
.szc-progress__fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  background-size: 200% 100%; animation: szc-shine 2.2s linear infinite;
}
@keyframes szc-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.szc-progress--gold { background: var(--szc-gold-soft); box-shadow: var(--szc-glow-gold); }
.szc-progress--gold .szc-progress__fill { background: var(--szc-gradient-gold); }

.szc-counter {
  flex: none; min-width: 40px; text-align: right;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--szc-n500);
  font-variant-numeric: tabular-nums;
}

/* ---------- Pasek zadań: pipsy z ptaszkiem dla ukończonych (FIX 3) ---------- */
.szc-tasktrack {
  display: flex; align-items: center; gap: 5px;
  margin-top: 9px; padding: 1px 2px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.szc-tasktrack:empty { display: none; }
.szc-tasktrack::-webkit-scrollbar { display: none; }
.szc-pip {
  flex: 0 0 auto; position: relative; display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 99px;
  background: var(--szc-n200); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 58, 0.06);
  transition: background-color .3s ease, box-shadow .3s cubic-bezier(.34,1.56,.64,1),
              transform .3s cubic-bezier(.34,1.56,.64,1);
}
.szc-pip svg {
  width: 9px; height: 9px; opacity: 0; transform: scale(.35);
  transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.szc-pip--done {
  background: var(--szc-gradient); box-shadow: var(--szc-sh1), var(--szc-glow-soft);
}
.szc-pip--done svg { opacity: 1; transform: scale(1); }
.szc-pip--current {
  background: var(--szc-surface);
  box-shadow: inset 0 0 0 2px var(--szc-primary), var(--szc-glow-soft);
  transform: scale(1.16);
}
.szc-pip--current:not(.szc-pip--done)::after {
  content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--szc-primary);
}
.szc-pip--current:not(.szc-pip--done) { animation: szc-pip-breathe 2.4s ease-in-out infinite; }
@keyframes szc-pip-breathe {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--szc-primary), 0 0 0 0 rgba(79,70,229,0.28); }
  50%      { box-shadow: inset 0 0 0 2px var(--szc-primary), 0 0 0 4px rgba(79,70,229,0); }
}
.szc-combo-slot { flex: none; display: flex; align-items: center; }
.szc-combo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 99px;
  background: var(--szc-gradient-gold); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--szc-glow-gold);
}
.szc-combo svg { display: block; }
.szc-combo--l3 { box-shadow: 0 0 18px rgba(240,112,32,0.45); }
.szc-combo--l5 { animation: szc-combo-fire 1s ease infinite; }
@keyframes szc-combo-fire { 0%,100%{transform:scale(1) rotate(0);} 25%{transform:scale(1.06) rotate(-2.5deg);} 75%{transform:scale(1.06) rotate(2.5deg);} }

/* ---------- Main / środek ciężkości ---------- */
/* KONTENER ZADANIA NIGDY NIE PRZEWIJA SIE W POZIOMIE (2026-08-11, E2E 390 px).
   36 ekranow z szeroka tabela (E8 angielski, zad. 14) rozpychalo cala strone —
   uczen dostawal poziomy suwak na CALYM widoku, zamiast przewijac sama tabele
   w jej ramce. `clip` zamyka to na poziomie kontenera, niezaleznie od tego,
   co przyjdzie w tresci. */
.szc-main { padding-bottom: 132px; max-width: 100%; overflow-x: clip; }
/* Zadanie kotwiczone U GÓRY, nie centrowane. Wcześniejsze spacery ::before/::after
   (flex 1 / 2.4) „lewitowały" krótkie zadania ~30% od góry ekranu z wielkim pustym
   pasem na dole — na telefonie wyglądało to jak oddalony, nie-fullscreen widok. */
.szc-main:not(.szc-main--result) { display: flex; flex-direction: column; min-height: calc(100dvh - 118px); }
.szc-main:not(.szc-main--result)::after { content: ""; flex: 1 1 0; }
.szc-main--in { animation: szc-task-in .3s cubic-bezier(0.22,1,0.36,1); }
.szc-main--out { animation: szc-task-out .2s cubic-bezier(0.55,0.06,0.68,0.19) forwards; }
@keyframes szc-task-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes szc-task-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-28px); } }

/* ---------- Metryczka + badge + Podgląd oryginału ---------- */
/* METRYCZKA ZAWIJA SIĘ CAŁYM BLOKIEM, a nie ściska tekstu.
   Przy trzech przyciskach (Podgląd oryginału + Barwna mapa + Zgłoś błąd — geografia
   ze starszą formułą) akcje zabierały 276 z 362 px, na metryczkę zostawało 76 px
   i „MATURA PR · 2019 · ZAD. 30 · 0–1 PKT" łamało się w pionowy słupek, robiąc
   ~300 px pustki nad zadaniem (zgłoszenie właściciela 2026-08-15).
   `flex-basis: 190px` na lewej kolumnie znaczy: albo akcje mieszczą się obok,
   albo schodzą do własnego wiersza. Nigdy kosztem czytelności metryczki. */
.szc-metric {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 10px;
  margin: 10px 16px 12px;
}
.szc-metric__left { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 190px; }
.szc-metric__text {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--szc-n500); line-height: 1.35;
  /* Kropka rozdzielająca jest naturalnym miejscem łamania; bez tego przeglądarka
     dzieli po każdym słowie i „ZAD. 30" ląduje w trzech wierszach. */
  text-wrap: balance;
}
.szc-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  background: var(--szc-primary-soft); color: var(--szc-primary-text);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--szc-primary-border);
}
.szc-badge__emoji { font-size: 13px; line-height: 1; letter-spacing: 0; }
.szc-topicgroup__head { display: flex; align-items: center; gap: 6px; }
.szc-topicgroup__emoji { font-size: 15px; line-height: 1; }
.szc-preview {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 12px; border-radius: 99px;
  background: var(--szc-surface); border: 1px solid var(--szc-primary-border);
  color: var(--szc-primary-strong); font-size: 12.5px; font-weight: 600;
  box-shadow: var(--szc-sh1);
  transition: box-shadow .2s ease, background-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.szc-preview svg { color: var(--szc-primary); }
@media (hover: hover) { .szc-preview:hover { box-shadow: var(--szc-sh1), var(--szc-glow-soft); background: var(--szc-primary-softer); } }
.szc-preview:active { transform: scale(.96); }

/* ---------- Karta treści zadania ---------- */
.szc-content {
  position: relative;
  margin: 0 16px 16px; padding: 22px 18px;
  background: var(--szc-surface); border: var(--szc-border-card);
  border-radius: 20px; box-shadow: var(--szc-sh1);
  font-size: 17px; line-height: 1.62;
}
.szc-content--ctx {
  background: var(--szc-primary-softer);
  border: 1px solid var(--szc-primary-border);
  padding-top: 30px;
}
.szc-content__tag {
  position: absolute; top: 0; left: 18px; transform: translateY(-50%);
  padding: 3px 10px; border-radius: 99px;
  background: var(--szc-primary); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: var(--szc-glow-soft);
}
.szc-para { margin: 0 0 12px; }
.szc-para:last-child { margin-bottom: 0; }
/* Polecenie zadania — w arkuszu pogrubione i oddzielone od treści (2026-08-18) */
.szc-para--polecenie {
  font-weight: 700; font-size: 16px; line-height: 1.5;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--szc-n150, rgba(22,32,58,.08));
}
/* Spis wariantów A/B/C… — pionowa lista jak w arkuszu, nie proza (2026-08-18) */
.szc-warianty { list-style: none; margin: 2px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.szc-warianty__row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: 12px;
  background: var(--szc-paper); font-size: 15.5px; line-height: 1.5;
}
.szc-warianty__key { flex: none; font-weight: 800; color: var(--szc-primary-strong); }
.szc-warianty__text { flex: 1; min-width: 0; }
.szc-prompt {
  margin: 14px 0 2px; padding: 10px 0 10px 14px;
  border-left: 3px solid var(--szc-primary);
  font-weight: 600; color: var(--szc-ink); font-size: 16.5px;
}
.szc-content > .szc-prompt:first-child { margin-top: 0; }
/* Polecenie właściwe zadania (pole `prompt` z fabryki) — wyróżnione pytanie. */
.szc-question {
  margin: 14px 0 2px; padding: 11px 14px;
  background: var(--szc-primary-soft); border-radius: 12px;
  border: 1px solid var(--szc-primary-border);
  font-weight: 700; color: var(--szc-ink); font-size: 16px; line-height: 1.45;
}
.szc-question:last-child { margin-bottom: 0; }

/* Math */
.szc-math-display {
  margin: 12px 0; padding: 6px 2px; overflow-x: auto; overflow-y: hidden;
  text-align: center; -webkit-overflow-scrolling: touch;
}
.szc-math-display::-webkit-scrollbar { height: 4px; }
.szc-math-display::-webkit-scrollbar-thumb { background: var(--szc-n300); border-radius: 99px; }
.szc-math-inline { white-space: nowrap; }
.szc-math-inlineblock { display: block; text-align: center; margin: 6px 0; }
.szc-content .katex { font-size: 1.06em; }

/* Figura */
.szc-figure {
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--szc-primary-softer); border: 1px solid var(--szc-primary-border);
  border-radius: 14px;
}
.szc-figure__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.szc-figure__icon { display: grid; place-items: center; color: var(--szc-primary); }
.szc-figure__label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--szc-primary-text); }
.szc-figure__desc { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--szc-n700); }
.szc-figure__view, .szc-source__view {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--szc-surface); border: 1px solid var(--szc-primary-border);
  color: var(--szc-primary-strong); font-size: 13px; font-weight: 600;
  box-shadow: var(--szc-sh1);
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.szc-figure__view svg, .szc-source__view svg { color: var(--szc-primary); }
.szc-figure__view:active, .szc-source__view:active { transform: scale(.96); }

/* Tekst źródłowy */
.szc-source {
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--szc-paper); border-radius: 14px;
  border-left: 3px solid var(--szc-accent);
}
.szc-source--full .szc-source__text {
  font-size: 15.5px; line-height: 1.6; color: var(--szc-ink); margin-bottom: 10px;
}
/* Akapit tekstu źródłowego — czytelny rytm dla esejów 3–4 tys. znaków.
   Pierwszy bez górnego marginesu, żeby nie odrywał się od nagłówka karty. */
.szc-source__par { margin: 0 0 10px; }
.szc-source__par:last-child { margin-bottom: 0; }
.szc-source__cite { margin-bottom: 10px; }
.szc-source__title { display: block; font-weight: 700; font-size: 14px; color: var(--szc-ink); margin-bottom: 4px; }
.szc-source__note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--szc-n600); font-style: italic; }

/* Tabela z arkusza */
.szc-tablewrap { margin: 14px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--szc-n200); }
/* SYGNAŁ, ŻE TABELA MA CIĄG DALSZY. Tabele CKE bywają szersze niż telefon
   (tu 495 px treści na 364 px ekranu) — wrapper od zawsze pozwalał je przewinąć,
   ale iOS nie rysuje paska, więc kolumna urwana w połowie wyglądała na błąd
   układu (zgłoszenie właściciela 2026-08-15, „cynamonowa" ucięta w pół słowa).
   Gradient na prawej krawędzi + strzałka mówią „przesuń", i znikają na końcu. */
.szc-tablewrap { position: relative; }
.szc-tablewrap.szc-ma-wiecej::after {
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px;
  pointer-events: none; border-radius: 0 11px 11px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--szc-surface) 82%);
}
.szc-tablewrap.szc-ma-wiecej::before {
  content: '›'; position: absolute; top: 50%; right: 8px; z-index: 2;
  transform: translateY(-50%); pointer-events: none;
  font-size: 20px; font-weight: 700; line-height: 1; color: var(--szc-primary);
  animation: szc-przesun 1.8s ease-in-out infinite;
}
@keyframes szc-przesun { 0%,100% { transform: translate(0,-50%); opacity:.55; } 50% { transform: translate(4px,-50%); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .szc-tablewrap.szc-ma-wiecej::before { animation: none; } }
.szc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--szc-surface); }
.szc-table td, .szc-table th { padding: 9px 12px; border-bottom: 1px solid var(--szc-n200); border-right: 1px solid var(--szc-n200); text-align: left; vertical-align: top; line-height: 1.45; }
.szc-table tr:last-child td { border-bottom: 0; }
.szc-table td:last-child, .szc-table th:last-child { border-right: 0; }
.szc-table tr:nth-child(even) td { background: var(--szc-n50); }
.szc-table th { background: var(--szc-primary-soft); color: var(--szc-primary-text); font-weight: 700; }

/* Grupowany wybór (odpowiedź + uzasadnienie) */
.szc-group { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--szc-primary-softer); border: 1px solid var(--szc-primary-border); }
.szc-group + .szc-group { margin-top: 2px; }
.szc-group__label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--szc-primary-text); }
.szc-group__prefix { margin: -2px 0 2px; font-size: 15px; line-height: 1.5; color: var(--szc-n700); }
.szc-group .szc-answer { min-height: 50px; }

/* ---------- Strefa odpowiedzi ---------- */
.szc-zone { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0 16px; }
.szc-zone--locked { pointer-events: none; }

.szc-card {
  position: relative;
  background: var(--szc-surface); border: 1px solid var(--szc-n200);
  border-radius: 14px; box-shadow: var(--szc-sh1);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
}
.szc-card.szc-is-dimmed { opacity: 0.42; }
.pt-stagger > .szc-is-dimmed, .szc-is-dimmed.pt-fade-up { animation: none; }

/* fast-swap na stanach werdyktu/selekcji (≤33 ms) */
.szc-answer.szc-is-selected, .szc-answer.szc-is-selected .szc-answer__key,
.szc-answer.szc-is-correct, .szc-answer.szc-is-wrong,
.szc-answer.szc-is-correct .szc-answer__key, .szc-answer.szc-is-wrong .szc-answer__key,
.szc-tf__btn.szc-is-selected, .szc-tf__btn.szc-is-correct, .szc-tf__btn.szc-is-wrong,
.szc-gap__input.szc-is-correct, .szc-gap__input.szc-is-wrong { transition-duration: 0ms; }

/* Single choice */
.szc-answer {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 16px; text-align: left;
  font-size: 16px; font-weight: 500; line-height: 1.4; cursor: pointer;
}
.szc-answer__key {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 99px; background: var(--szc-paper); color: var(--szc-n700);
  font-size: 14px; font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
/* `overflow-wrap` ratuje dlugie wzory i wyrazy bez spacji przed wyjechaniem
   poza karte na 390 px; `.katex` dostaje wlasny pasek przewijania zamiast
   rozpychac szerokosc calego ekranu. */
.szc-answer__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.szc-answer__text .katex { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.szc-answer__figure { font-size: 14.5px; line-height: 1.5; color: var(--szc-n700); }
.szc-answer.szc-is-selected {
  background: var(--szc-primary-soft); border-color: var(--szc-primary-border);
  box-shadow: var(--szc-glow-soft); color: var(--szc-primary-strong);
}
.szc-answer.szc-is-selected .szc-answer__key { background: var(--szc-primary); color: #fff; }
.szc-answer.szc-is-correct {
  background: var(--szc-success-soft); border-color: var(--szc-success-border);
  box-shadow: var(--szc-glow-success); color: var(--szc-success-deep);
}
.szc-answer.szc-is-correct .szc-answer__key { background: var(--szc-success); color: #fff; }
.szc-answer.szc-is-wrong {
  background: var(--szc-error-soft); border-color: var(--szc-error-border); color: var(--szc-error-strong);
}
.szc-answer.szc-is-wrong .szc-answer__key { background: var(--szc-error); color: #fff; }
@media (hover: hover) { .szc-answer:not(.szc-is-selected):hover { border-color: var(--szc-primary-border); box-shadow: var(--szc-sh1), var(--szc-glow-soft); } }

/* Checkmark badge */
.szc-check-badge {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: 99px; background: var(--szc-success); color: #fff; box-shadow: var(--szc-glow-success);
}
.szc-answer .szc-check-badge { margin-left: auto; }
.szc-check-badge svg { display: block; }

/* True/False */
.szc-tf { padding: 12px 16px 16px; }
.szc-tf__row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.szc-tf__num {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 99px; background: var(--szc-primary-soft); color: var(--szc-primary-text);
  font-size: 12px; font-weight: 700;
}
.szc-tf__text { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.5; }
.szc-tf__toggle { display: flex; gap: 8px; }
.szc-tf__btn {
  flex: 1; min-height: 46px;
  background: var(--szc-surface); border: 1px solid var(--szc-n200); border-radius: 12px;
  box-shadow: var(--szc-sh1); font-size: 16px; font-weight: 700; color: var(--szc-n700);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .szc-tf__btn:hover { border-color: var(--szc-primary-border); color: var(--szc-ink); box-shadow: var(--szc-sh1), var(--szc-glow-soft); } }
.szc-tf__btn:active { background: var(--szc-primary-soft); }
.szc-tf__btn.szc-is-selected { background: var(--szc-primary-soft); border-color: var(--szc-primary-border); color: var(--szc-primary-strong); }
.szc-tf__btn.szc-is-correct { background: var(--szc-success-soft); border-color: var(--szc-success-border); color: var(--szc-success-deep); box-shadow: var(--szc-glow-success); }
.szc-tf__btn.szc-is-wrong { background: var(--szc-error-soft); border-color: var(--szc-error-border); color: var(--szc-error-strong); }
.szc-tf__btn.szc-is-reveal { border-color: var(--szc-success-border); color: var(--szc-success-deep); box-shadow: inset 0 0 0 1px var(--szc-success-border); }
.szc-tf .szc-check-badge { position: absolute; top: 12px; right: 12px; }
.szc-tf.szc-has-badge .szc-tf__row { padding-right: 30px; }

/* Gap fill */
.szc-gap { padding: 14px 16px; }
.szc-gap__sentence { margin: 0; font-size: 16px; line-height: 2.1; }
.szc-gap__input {
  display: inline-block; width: 90px; min-width: 54px; max-width: 100%;
  margin: 0 4px; padding: 4px 8px;
  border: 1px solid var(--szc-n200); border-bottom: 2px solid var(--szc-primary);
  border-radius: 8px; background: var(--szc-surface);
  box-shadow: inset 0 1px 2px rgba(22,32,58,0.06);
  color: var(--szc-ink); font: inherit; font-size: 16px; text-align: center; vertical-align: baseline;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.szc-gap__input::placeholder { color: var(--szc-n400); font-style: italic; }
.szc-gap__input:focus { outline: none; border-color: var(--szc-primary-border); background: var(--szc-surface); box-shadow: var(--szc-focus-ring); }
.szc-gap__input.szc-is-correct { border-color: var(--szc-success-border); border-bottom-color: var(--szc-success); background: var(--szc-success-soft); color: var(--szc-success-deep); font-weight: 600; box-shadow: var(--szc-glow-success); }
.szc-gap__input.szc-is-wrong { border-color: var(--szc-error-border); border-bottom-color: var(--szc-error); background: var(--szc-error-soft); color: var(--szc-error-strong); }
/* Arkuszowe opcje pary luki — pod zdaniem, w karcie luki (2026-08-19) */
.szc-gap__opcje { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 15px; line-height: 1.5; }
.szc-gap__opcja { display: inline-flex; gap: 6px; align-items: baseline; }
.szc-gap__opcja-key { font-weight: 800; color: var(--szc-primary-strong); }

/* Klucz literowy (A–F): chipy wyboru zamiast wolnego pola (2026-08-18) */
.szc-gap__letters { display: inline-flex; gap: 5px; margin: 0 4px; vertical-align: middle; }
.szc-gap__letter {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--szc-n200); background: var(--szc-surface);
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--szc-n700);
  cursor: pointer; line-height: 1;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.szc-gap__letter:active { transform: scale(.94); }
.szc-gap__letter.szc-is-selected {
  border-color: var(--szc-primary); background: var(--szc-primary);
  color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,.28);
}
@media (hover: hover) { .szc-gap__letter:not(.szc-is-selected):hover { border-color: var(--szc-primary-border); color: var(--szc-primary-strong); } }

.szc-gap__correct {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 99px;
  background: var(--szc-success-soft); border: 1px solid var(--szc-success-border);
  color: var(--szc-success-deep); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.szc-gap .szc-check-badge { position: absolute; top: 12px; right: 12px; }

/* ============================================================================
   POZYCJE / WYBÓR INLINE / PODPUNKTY — formaty odzyskane z samooceny
   (2026-08-10, zgłoszenie właściciela: „style zadań nie dostosowane do formatu")
   ========================================================================== */

/* --- Pozycje: „3.1 ____", „Probówka 1. ____" --- */
.szc-slot { padding: 12px 16px; }
.szc-slot__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.szc-slot__label {
  flex: none; min-width: 34px; padding: 5px 11px; border-radius: 99px;
  background: var(--szc-primary-soft); border: 1px solid var(--szc-primary-border);
  color: var(--szc-primary-text); font-size: 14px; font-weight: 700; text-align: center;
  line-height: 1.25;
}
.szc-slot__input {
  flex: 1; min-width: 140px; padding: 10px 14px;
  border: 1px solid var(--szc-n300); border-bottom: 2px solid var(--szc-primary);
  border-radius: 12px; background: var(--szc-surface);
  box-shadow: inset 0 1px 2px rgba(22,32,58,0.06);
  color: var(--szc-ink); font: inherit; font-size: 16px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.szc-slot__input::placeholder { color: var(--szc-n400); font-style: italic; }
.szc-slot__input:focus { outline: none; border-color: var(--szc-primary-border); box-shadow: var(--szc-focus-ring); }
.szc-slot__input.szc-is-correct {
  border-color: var(--szc-success-border); border-bottom-color: var(--szc-success);
  background: var(--szc-success-soft); color: var(--szc-success-deep);
  font-weight: 600; box-shadow: var(--szc-glow-success);
}
.szc-slot__input.szc-is-wrong {
  border-color: var(--szc-error-border); border-bottom-color: var(--szc-error);
  background: var(--szc-error-soft); color: var(--szc-error-strong);
}
.szc-slot .szc-check-badge { position: absolute; top: 10px; right: 12px; }
.szc-slot.szc-has-badge .szc-slot__row { padding-right: 28px; }

/* --- Wybór w nawiasie: segment wpleciony w zdanie --- */
.szc-inline { padding: 14px 16px; }
.szc-inline__sentence { margin: 0; font-size: 16px; line-height: 2.3; }
.szc-inline__group {
  display: inline-flex; gap: 4px; margin: 0 4px; padding: 3px;
  border-radius: 12px; background: var(--szc-paper);
  border: 1px solid var(--szc-n200); vertical-align: middle;
}
.szc-inline__btn {
  padding: 5px 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--szc-n700); font: inherit; font-size: 15px; line-height: 1.35;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.szc-inline__btn:active { transform: scale(0.97); }
.szc-inline__btn.szc-is-selected {
  background: var(--szc-surface); color: var(--szc-primary-strong);
  font-weight: 700; box-shadow: 0 1px 3px rgba(22,32,58,0.12), var(--szc-glow-soft);
}
.szc-inline__btn.szc-is-correct {
  background: var(--szc-success-soft); color: var(--szc-success-deep);
  font-weight: 700; box-shadow: var(--szc-glow-success);
}
.szc-inline__btn.szc-is-wrong { background: var(--szc-error-soft); color: var(--szc-error-strong); font-weight: 700; }
.szc-inline__btn.szc-is-reveal { box-shadow: inset 0 0 0 1.5px var(--szc-success-border); color: var(--szc-success-deep); }
.szc-inline__btn.szc-is-dimmed { opacity: 0.45; }
.szc-inline .szc-check-badge { position: absolute; top: 12px; right: 12px; }

/* --- Podpunkty z własnym ABC (7.1 / 7.2 / 7.3) --- */
.szc-item { padding: 14px 16px 12px; }
.szc-item__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.szc-item__num {
  flex: none; padding: 4px 10px; border-radius: 99px;
  background: var(--szc-primary-soft); border: 1px solid var(--szc-primary-border);
  color: var(--szc-primary-text); font-size: 13px; font-weight: 700; line-height: 1.3;
}
.szc-item__stem { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.5; }
.szc-item__opts { display: flex; flex-direction: column; gap: 8px; }
.szc-item__btn {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--szc-n200); border-radius: 12px;
  background: var(--szc-surface); color: var(--szc-ink);
  font: inherit; font-size: 15px; line-height: 1.45; text-align: left; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.szc-item__key {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  background: var(--szc-paper); color: var(--szc-n600);
  font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
.szc-item__text { flex: 1; min-width: 0; }
.szc-item__btn.szc-is-selected {
  border-color: var(--szc-primary-border); background: var(--szc-primary-soft);
  box-shadow: var(--szc-glow-soft);
}
.szc-item__btn.szc-is-selected .szc-item__key { background: var(--szc-primary); color: #fff; }
.szc-item__btn.szc-is-correct {
  border-color: var(--szc-success-border); background: var(--szc-success-soft);
  box-shadow: var(--szc-glow-success);
}
.szc-item__btn.szc-is-correct .szc-item__key { background: var(--szc-success); color: #fff; }
.szc-item__btn.szc-is-wrong { border-color: var(--szc-error-border); background: var(--szc-error-soft); }
.szc-item__btn.szc-is-wrong .szc-item__key { background: var(--szc-error); color: #fff; }
.szc-item__btn.szc-is-dimmed { opacity: 0.5; }
.szc-item .szc-check-badge { position: absolute; top: 12px; right: 12px; }
.szc-item.szc-has-badge .szc-item__head { padding-right: 28px; }

@media (prefers-reduced-motion: reduce) {
  .szc-inline__btn, .szc-item__btn, .szc-slot__input { transition-duration: 0ms; }
}

/* ŁAMANIE DŁUGICH CIĄGÓW (2026-08-11, E2E na 390 px).
   44 ekrany rozpychały stronę w poziomie: w treści CKE trafiają się adresy
   („www.something-very-long.co.uk"), kody arkuszy i wyrazy bez spacji, których
   przeglądarka nie ma gdzie złamać. Uczeń dostawał wtedy poziomy suwak na
   całym ekranie. `anywhere` łamie je w ostateczności, nie ruszając normalnego
   tekstu. Tabele zostają przewijane WEWNĄTRZ swojej ramki. */
.szc-para, .szc-question, .szc-prompt, .szc-item__stem, .szc-inline__sentence,
.szc-gap__sentence, .szc-tf__text, .szc-match__text, .szc-slot__label,
.szc-source__text, .szc-figure__desc { overflow-wrap: anywhere; }
.szc-tablewrap { max-width: 100%; }
.szc-content { max-width: 100%; overflow-x: clip; }

/* Pasek transkrypcji — gdy CKE nie opublikowala nagrania. Cieplejszy odcien
   od zwyklego odtwarzacza, bo to zastepnik, nie pelnoprawne zrodlo. */
.szc-audio--tekst { background: var(--szc-gold-soft); border-color: rgba(245,185,59,0.45); }
.szc-audio--tekst .szc-audio__label { color: #8A5A08; }

/* Open (short/extended) */
.szc-open { display: flex; flex-direction: column; gap: 10px; }
.szc-open__hint {
  margin: 0; padding: 12px 16px; border-radius: 14px;
  background: var(--szc-primary-softer); border: 1px solid var(--szc-primary-border);
  color: var(--szc-primary-text); font-size: 14px; line-height: 1.5;
}
.szc-open__input {
  width: 100%; padding: 14px 16px; resize: vertical;
  border: 1px solid var(--szc-n300); border-radius: 14px; background: var(--szc-surface);
  box-shadow: inset 0 1px 2px rgba(22,32,58,0.05);
  color: var(--szc-ink); font: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.szc-open__input::placeholder { color: var(--szc-n400); }
.szc-open__input:focus { outline: none; border-color: var(--szc-primary-border); box-shadow: var(--szc-focus-ring); }
.szc-open__input.szc-is-correct { border-color: var(--szc-success-border); background: var(--szc-success-soft); }
.szc-open__input.szc-is-wrong { border-color: var(--szc-error-border); background: var(--szc-error-soft); }

/* ---------- CTA „Sprawdź" ---------- */
.szc-cta-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 300;
  width: 100%; max-width: 430px;
  padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--szc-bg) 60%, transparent);
  pointer-events: none;
}
.szc-cta-bar.szc-is-hidden { visibility: hidden; }
.szc-cta {
  position: relative; display: block; width: 100%; min-height: 54px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--szc-gradient); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: var(--szc-sh2), var(--szc-glow); pointer-events: auto; overflow: hidden;
  transition: box-shadow .2s ease, opacity .2s ease;
}
.szc-cta:disabled { opacity: 0.5; cursor: default; box-shadow: var(--szc-sh1); }
.szc-cta--ready {
  transition-duration: 0ms;
  animation: szc-ready-in .32s cubic-bezier(.34,1.56,.64,1), szc-breathe 1.7s ease .32s infinite;
}
.szc-cta--ready::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  background-size: 200% 100%; animation: szc-shine 2s linear infinite; pointer-events: none;
}
@keyframes szc-ready-in { 0%{transform:scale(.97);} 55%{transform:scale(1.03);} 100%{transform:scale(1);} }
@keyframes szc-breathe { 0%,100%{box-shadow:var(--szc-sh2),var(--szc-glow);} 50%{box-shadow:var(--szc-sh3),0 0 0 7px rgba(79,70,229,0);} }
.szc-cta--next { margin-top: 14px; }
.szc-cta__timerfill {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
  background: rgba(255,255,255,0.24); animation: szc-countdown 2.6s linear forwards; pointer-events: none;
}
.szc-cta__label { position: relative; z-index: 1; }
@keyframes szc-countdown { from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* ---------- Sheet feedbacku ---------- */
.szc-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 900;
  width: 100%; max-width: 430px; max-height: 76dvh; overflow-y: auto;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--szc-surface); border: var(--szc-border-card); border-bottom: 0;
  border-radius: 22px 22px 0 0; box-shadow: var(--szc-sh3);
}
.szc-sheet.szc-sheet-up { animation: szc-sheet-up .24s cubic-bezier(0.35,1.7,0.4,0.9); }
.szc-sheet.szc-sheet-down { animation: szc-sheet-down .2s cubic-bezier(0.55,0.06,0.68,0.19); }
@keyframes szc-sheet-up { from{transform:translate(-50%,100%);} to{transform:translate(-50%,0);} }
@keyframes szc-sheet-down { from{transform:translate(-50%,0);} to{transform:translate(-50%,100%);} }
.szc-sheet__grabwrap { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 8px 16px 4px; background: var(--szc-surface); border-radius: 22px 22px 0 0; }
.szc-sheet__grab { width: 40px; height: 4px; margin: 0 auto; border-radius: 99px; background: var(--szc-n200); }
.szc-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.szc-sheet__headtext { flex: 1 1 auto; min-width: 0; }

/* BUDDY W BELCE WERDYKTU. Reakcja gra tam, gdzie i tak patrzysz na wynik —
   maskotka z dolu ekranu byla w tym momencie zasuwana przez arkusz.
   Wjazd sprężysty (ta sama krzywa, co reszta aplikacji), a po nim mikroreakcja:
   podskok przy trafieniu, opadniecie przy pomyłce. */
.szc-sheet__buddy {
  flex: none; width: 52px; height: 52px; border-radius: 99px; overflow: hidden;
  background: var(--szc-gradient-soft); box-shadow: var(--szc-sh2);
  animation: szc-buddy-wjazd .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
.szc-sheet__buddy-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Awatary to gotowe KADRY PORTRETOWE (backend/scripts/awatary-buddy.py):
     kwadrat o boku rownym szerokosci psa, zakotwiczony przy glowie, sylwetka
     wypelnia 93 % pola. Zaden padding ani kadrowanie per poza nie jest juz
     potrzebne — kazdy piksel marginesu tylko odsuwalby psa od krawedzi kola. */
  object-fit: cover;
}
.szc-sheet__buddy--ok  { box-shadow: var(--szc-sh2), var(--szc-glow-success); }
.szc-sheet__buddy--ok  .szc-sheet__buddy-img { animation: szc-cheer .8s ease .3s both; }
.szc-sheet__buddy--bad .szc-sheet__buddy-img { animation: szc-droop .7s ease .3s both; }
@keyframes szc-buddy-wjazd {
  from { opacity: 0; transform: translateY(10px) scale(.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .szc-sheet__buddy, .szc-sheet__buddy-img { animation: none !important; }
}
.szc-sheet__title { margin: 0; font-family: var(--szc-serif); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.szc-sheet__title--ok { color: var(--szc-success-deep); }
.szc-sheet__title--bad { color: var(--szc-error-strong); }
.szc-sheet__title--reveal { color: var(--szc-primary-strong); }
.szc-sheet__pts { margin: 0; flex: none; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--szc-n500); }
/* Nota o zaokragleniu — punkt jest zdobyty, wiec ton spokojny: bez czerwieni,
   bez ikony ostrzegawczej. Ma sie czytac jak podpowiedz trenera, nie jak blad. */
.szc-sheet__round {
  margin: 6px 0 0; flex: 1 1 100%; font-size: 12.5px; line-height: 1.45;
  color: var(--szc-n500); opacity: 0.9;
}
/* WZORCOWA ODPOWIEDZ NA ZIELONO. Byla w kolorze marki (indygo) — tym samym,
   ktory nosi pol interfejsu, wiec nie czytalo sie jej jako „to jest poprawna
   odpowiedz" (zgloszenie wlasciciela 2026-08-14). Zielen znaczy w tej aplikacji
   „dobrze" i tak jest oznaczana trafiona odpowiedz w kontrolkach. */
.szc-sheet__correct {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--szc-success-soft); border: 1px solid var(--szc-success-border);
  font-size: 16px; font-weight: 600; color: var(--szc-success-deep);
}
.szc-sheet__correct-badge {
  padding: 2px 8px; border-radius: 99px; background: var(--szc-success); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
}
.szc-sheet__correct .szc-math-inline,
.szc-sheet__correct .katex { color: var(--szc-success-deep); font-weight: 700; }
.szc-sheet .szc-math-inline { color: var(--szc-primary-strong); font-weight: 700; }

/* Akordeony */
.szc-acc { margin-top: 10px; border: 1px solid var(--szc-n200); border-radius: 13px; background: var(--szc-surface); overflow: hidden; }
.szc-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 46px; padding: 12px 16px; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--szc-ink);
}
.szc-acc__chev { flex: none; color: var(--szc-n400); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.szc-acc.szc-is-open .szc-acc__chev { transform: rotate(180deg); }
.szc-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(0.22,1,0.36,1); }
.szc-acc.szc-is-open .szc-acc__panel { grid-template-rows: 1fr; }
.szc-acc__inner { overflow: hidden; min-height: 0; }
.szc-acc__body { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.6; color: var(--szc-n700); }

/* Kroki rozwiązania */
.szc-steps { margin: 0; padding-left: 22px; counter-reset: szstep; list-style: none; }
.szc-step { position: relative; margin-bottom: 14px; padding-left: 6px; }
.szc-step:last-child { margin-bottom: 2px; }
.szc-step::before {
  counter-increment: szstep; content: counter(szstep);
  position: absolute; left: -22px; top: -1px;
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 99px; background: var(--szc-primary-soft); color: var(--szc-primary-text);
  font-size: 11px; font-weight: 700;
}
.szc-step__math { margin: 2px 0 4px; overflow-x: clip; }
/* Poziome przewijanie tylko dla wzorow, ktore nie mieszcza sie nawet po
   zmniejszeniu do 62 % — klase nadaje `dopasujWzory()` po pomiarze. */
.szc-math--przewijany { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.szc-step__math .katex-display { margin: 0.2em 0; text-align: left; }
.szc-step__why { margin: 0; font-size: 14px; color: var(--szc-n600); }
/* Wyjaśnienie w formie ARGUMENTACJI (polski, historia, WOS). Nie numerujemy —
   to nie są kroki rachunku, tylko powody. Teza wytłuszczona, uzasadnienie po
   myślniku, bo tak czyta się zdanie po polsku. */
.szc-why-list { margin: 0; }
.szc-why-par {
  margin: 0 0 10px; line-height: 1.6; font-size: 14.5px; color: var(--szc-n800, #1f2430);
}
.szc-why-par:last-child { margin-bottom: 0; }
.szc-why-teza { font-weight: 650; }
/* Pojedynczy krok-zdanie wewnątrz wyjaśnienia rachunkowego. */
.szc-step__proza { margin: 0 0 4px; line-height: 1.55; }

/* Kryteria CKE */
.szc-crit { margin: 0; padding: 0; list-style: none; }
.szc-crit__item { display: flex; gap: 10px; margin-bottom: 10px; }
.szc-crit__item:last-child { margin-bottom: 0; }
.szc-crit__pts { flex: none; align-self: flex-start; padding: 2px 9px; border-radius: 99px; background: var(--szc-primary-soft); color: var(--szc-primary-text); font-size: 12px; font-weight: 700; }
.szc-crit__text { flex: 1; }
.szc-alts { margin: 0; padding-left: 18px; }
.szc-alts li { margin-bottom: 8px; }

/* Za co punkty */
.szc-forpoints {
  display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px;
  border-radius: 14px; background: var(--szc-primary-softer); border: 1px solid var(--szc-primary-border);
}
.szc-forpoints__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--szc-primary); color: #fff; }
.szc-forpoints__label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--szc-primary-text); }
.szc-forpoints__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--szc-n700); }

/* Zapamiętaj — jedyny ciepły akcent (nagroda/insight) */
.szc-remember {
  display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px;
  border-radius: 14px; background: var(--szc-gold-soft); border: 1px solid rgba(245,185,59,0.4);
}
.szc-remember__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--szc-gradient-gold); color: #fff; box-shadow: var(--szc-glow-gold); }
.szc-remember__label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--szc-gold-text); }
.szc-remember__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--szc-ink); }

/* Samoocena */
.szc-selfassess { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--szc-paper); }
.szc-selfassess__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--szc-n700); }
.szc-selfassess__row { display: flex; gap: 8px; flex-wrap: wrap; }
.szc-selfassess__chip {
  flex: 1; min-width: 60px; min-height: 44px; padding: 8px 10px; border-radius: 12px;
  background: var(--szc-surface); border: 1px solid var(--szc-n300); color: var(--szc-n700);
  font-size: 14px; font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.szc-selfassess__chip.szc-is-picked { background: var(--szc-primary-soft); border-color: var(--szc-primary-border); color: var(--szc-primary-strong); box-shadow: var(--szc-glow-soft); }

/* ---------- Dopamina: flash / XP float / sparkle ---------- */
.szc-flash { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0; animation: szc-flash .85s cubic-bezier(0.22,1,0.36,1) forwards; }
.szc-flash--ok { background: var(--pt-flash-success-strong, radial-gradient(ellipse at 50% 42%, rgba(23,201,100,0.4), rgba(245,185,59,0.24) 55%, transparent)); }
.szc-flash--bad { background: var(--pt-flash-error-strong, radial-gradient(ellipse at 50% 42%, rgba(217,83,79,0.2), transparent 70%)); }
@keyframes szc-flash { 0%{opacity:0;} 12%{opacity:1;} 55%{opacity:0.5;} 100%{opacity:0;} }
.szc-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2000; pointer-events: none; }
.szc-xpfloat {
  position: fixed; top: 42%; left: 50%; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; animation: szc-xp 1.3s cubic-bezier(0.22,1,0.36,1) forwards; will-change: transform, opacity;
}
.szc-xpfloat__label { padding: 8px 16px; border-radius: 99px; background: var(--szc-gradient-gold); color: #fff; font-size: 20px; font-weight: 800; box-shadow: var(--szc-sh2), var(--szc-glow-gold); white-space: nowrap; }
.szc-xpfloat__bonus { padding: 1px 9px; border-radius: 99px; background: #fff; border: 1px solid rgba(245,185,59,0.5); color: var(--szc-gold-text); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
@keyframes szc-xp { 0%{opacity:0;transform:translate(-50%,10px) scale(.7);} 15%{opacity:1;transform:translate(-50%,0) scale(1.15);} 30%{transform:translate(-50%,-8px) scale(1);} 100%{opacity:0;transform:translate(-50%,-86px) scale(1.2);} }
.szc-sparkle { position: fixed; top: 42%; left: 50%; z-index: 1999; width: 8px; height: 8px; border-radius: 99px; background: radial-gradient(circle, #FDF3DC 0%, #F5B93B 40%, transparent 70%); box-shadow: var(--szc-glow-gold); pointer-events: none; animation: szc-spark .85s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes szc-spark { 0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.4);} 10%{opacity:1;} 80%{opacity:1;} 100%{opacity:0;transform:translate(-50%,-50%) translate(var(--sx,40px),var(--sy,-40px)) scale(.2);} }

/* ---------- Maskotka ---------- */
.szc-mascot {
  /* Warstwa NIZEJ niz arkusz rozwiazania (900): maskotka jest towarzyszem, a nie
     czyms, co ma prawo zaslonic odpowiedz. Wczesniej siedziala na 2000 i przy
     dluzszym rozwiazaniu wchodzila na tekst. */
  position: fixed; left: 12px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 850;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none;
  transition: bottom .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.szc-mascot--away, .szc-mascot--dodge { opacity: 0; }
.szc-mascot--dodge { transition: bottom .3s cubic-bezier(.34,1.56,.64,1), opacity .15s ease; }
.szc-mascot__video {
  display: block; width: 60px; height: 60px; border-radius: 99px; object-fit: cover;
  background: var(--szc-gradient-soft); box-shadow: var(--szc-sh2), var(--szc-glow-soft);
}
.szc-mascot--cheer .szc-mascot__video { animation: szc-cheer .8s ease; }
.szc-mascot--droop .szc-mascot__video { animation: szc-droop .7s ease; }
@keyframes szc-cheer { 0%{transform:scale(1) rotate(0);} 25%{transform:scale(1.12) rotate(-5deg);} 50%{transform:scale(1.15) rotate(3deg);} 75%{transform:scale(1.1) rotate(-2deg);} 100%{transform:scale(1) rotate(0);} }
@keyframes szc-droop { 0%{transform:scale(1) rotate(0);} 40%{transform:scale(.94) rotate(-4deg);} 100%{transform:scale(1) rotate(0);} }
.szc-mascot__bubble {
  max-width: 200px; padding: 8px 12px; border-radius: 14px; border-bottom-left-radius: 6px;
  background: var(--szc-surface); border: var(--szc-border-card); color: var(--szc-ink);
  font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: var(--szc-sh2);
}
.szc-bubble-in { animation: szc-bubble .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes szc-bubble { from{opacity:0;transform:translateY(6px) scale(.9);} to{opacity:1;transform:translateY(0) scale(1);} }

/* ---------- Lightbox „Podgląd oryginału" ---------- */
.szc-lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; }
.szc-lb__backdrop { position: absolute; inset: 0; background: rgba(14, 18, 34, 0.92); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.szc-lightbox.szc-lb-in .szc-lb__backdrop { animation: pt-fade-in .2s ease both; }
.szc-lightbox.szc-lb-in .szc-lb__bar, .szc-lightbox.szc-lb-in .szc-lb__scroll { animation: szc-lb-rise .25s cubic-bezier(0.22,1,0.36,1) both; }
.szc-lightbox.szc-lb-out { animation: pt-fade-out .2s ease both; }
@keyframes szc-lb-rise { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.szc-lb__bar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; color: #fff;
}
.szc-lb__title { flex: 1; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szc-lb__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: rgba(255,255,255,0.12); color: #fff; transition: background-color .15s ease; }
.szc-lb__btn:active { transform: scale(.94); }
@media (hover: hover) { .szc-lb__btn:hover { background: rgba(255,255,255,0.22); } }
/* touch-action pan-x pan-y: jeden palec panuje natywnie, pinch dwoma palcami
   NIE jest akcją przeglądarki — obsługuje go własny handler (wireLbPinch). */
.szc-lb__scroll { position: relative; z-index: 1; flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; display: flex; align-items: flex-start; justify-content: center; padding: 8px 12px 40px; }
.szc-lb__img { width: 100%; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 50px rgba(0,0,0,0.5); background: #fff; transition: width .25s cubic-bezier(0.22,1,0.36,1); cursor: zoom-in; }
.szc-lb__img.szc-lb--zoom { width: 260%; max-width: 260%; cursor: zoom-out; }
.szc-lb__hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 12px); transform: translateX(-50%); z-index: 2; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,0.14); color: #fff; font-size: 12px; font-weight: 500; pointer-events: none; }

/* ---------- Skeleton ---------- */
.szc-skel { display: flex; flex-direction: column; gap: 12px; margin: 12px 16px 0; }
.szc-skel__metric { width: 66%; height: 16px; }
.szc-skel__card { height: 150px; border-radius: 20px; margin-bottom: 8px; }
.szc-skel__answer { height: 56px; border-radius: 14px; }

/* ---------- Ekran wyniku ---------- */
.szc-main--result { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 24px); }
.szc-result { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.szc-result__mascot { width: 150px; height: auto; margin-bottom: 12px; filter: drop-shadow(0 10px 24px rgba(22,32,58,0.16)); animation: szc-land .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes szc-land { 0%{opacity:0;transform:translateY(16px) scale(.8);} 60%{opacity:1;transform:translateY(-4px) scale(1.05);} 100%{opacity:1;transform:translateY(0) scale(1);} }
.szc-result__title { margin: 0; font-family: var(--szc-serif); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--szc-ink); }
.szc-result__sub { margin: 4px 0 4px; font-size: 15px; color: var(--szc-n600); }
.szc-result__which { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--szc-primary-text); }
.szc-result__score { font-family: var(--szc-serif); font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--szc-ink); }
.szc-result__total { color: var(--szc-n400); }
.szc-result__caption { margin: 2px 0 22px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--szc-n500); }
.szc-result__stats { display: flex; gap: 10px; width: 100%; margin-bottom: 22px; }
.szc-stat { flex: 1; padding: 13px 8px; background: var(--szc-surface); border: var(--szc-border-card); border-radius: 14px; box-shadow: var(--szc-sh1); }
.szc-stat--wait { opacity: 0; }
.szc-stat-in { animation: szc-stat-in .28s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes szc-stat-in { 0%{opacity:0;transform:scale(.7) translateY(10px);} 60%{opacity:1;transform:scale(1.07) translateY(-2px);} 100%{opacity:1;transform:scale(1) translateY(0);} }
.szc-stat__icon { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 4px; border-radius: 99px; color: #fff; }
.szc-stat__icon svg { display: block; }
.szc-stat--xp { background: var(--szc-gold-soft); border-color: rgba(245,185,59,0.4); box-shadow: var(--szc-sh1), var(--szc-glow-gold); }
.szc-stat--xp .szc-stat__icon { background: var(--szc-gradient-gold); }
.szc-stat--xp .szc-stat__value { color: var(--szc-gold-text); }
.szc-stat--pts { background: var(--szc-success-soft); border-color: var(--szc-success-border); }
.szc-stat--pts .szc-stat__icon { background: var(--szc-success); }
.szc-stat--pts .szc-stat__value { color: var(--szc-success-deep); }
.szc-stat--combo { background: var(--szc-primary-soft); border-color: var(--szc-primary-border); }
.szc-stat--combo .szc-stat__icon { background: var(--szc-primary); }
.szc-stat--combo .szc-stat__value { color: var(--szc-primary-strong); }
.szc-stat__value { font-family: var(--szc-serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.szc-stat__label { margin-top: 4px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--szc-n500); }
.szc-result .szc-cta { max-width: 360px; }
.szc-result__next { margin-top: 14px; min-height: 44px; padding: 0 16px; border-radius: 12px; color: var(--szc-primary-strong); font-size: 15px; font-weight: 700; }
@media (hover: hover) { .szc-result__next:hover { background: var(--szc-primary-soft); } }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .szc-progress__fill { transition: none; }
  .szc-progress__fill::after, .szc-cta--ready::after { animation: none; background: none; }
  .szc-progress--pulse, .szc-cta--ready, .szc-combo--l5, .szc-main--in, .szc-main--out, .szc-stat-in { animation: none; }
  .szc-pip, .szc-pip svg { transition: none; }
  .szc-pip--current { transform: none; animation: none; }
  .szc-cta__timerfill { display: none; }
  .szc-stat--wait { opacity: 1; }
  .szc-flash { animation: pt-fade-out .2s ease forwards; }
  .szc-xpfloat { animation: pt-fade-out 1s ease forwards; transform: translate(-50%,0); }
  .szc-sparkle { display: none; }
  .szc-mascot--cheer .szc-mascot__video, .szc-mascot--droop .szc-mascot__video { animation: none; }
  .szc-sheet.szc-sheet-up { animation: pt-fade-in .2s ease both; }
  .szc-sheet.szc-sheet-down { animation: pt-fade-out .2s ease both; }
  .szc-lb__img { transition: none; }
}

/* ==========================================================================
   WARSTWA NAWIGACJI P6 (hub → przedmiot z przełącznikami R13 → sesja)
   Prefiks .szc-* — montowana w #view-szkola (parent.html). Player = immersyjny
   fixed-overlay (nakrywa chrome rodzica jak lekcja Duolingo).
   ========================================================================== */
.szc-root {
  font-family: var(--szc-font); color: var(--szc-ink);
  /* miękkie, rozproszone cienie warstwy nawigacji (delikatnie, clean) */
  --szc-nsh: 0 1px 2px rgba(22,32,58,.04), 0 4px 16px rgba(22,32,58,.045);
  --szc-nsh-hover: 0 2px 6px rgba(22,32,58,.05), 0 14px 34px rgba(22,32,58,.08);
  --szc-nborder: 1px solid rgba(22,32,58,.05);
}
.szc-nav {
  padding: 18px 16px calc(104px + env(safe-area-inset-bottom));
  max-width: 720px; margin: 0 auto; min-height: 60vh;
}
.szc-nav[hidden] { display: none; }
/* Player = immersyjny overlay nad chrome rodzica (jak lekcja Duolingo). */
.szc-overlay { position: fixed; inset: 0; z-index: 1200; }
.szc-overlay[hidden] { display: none; }
.szc-player {
  position: absolute; inset: 0; background: var(--szc-bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.szc-player[hidden] { display: none; }
.szc-loading { padding: 20px 4px; display: flex; flex-direction: column; gap: 14px; }

/* ---- Hero + pasek statystyk (unified streak/XP — decyzja #22) ---- */
.szc-hero { padding: 10px 4px 4px; }
.szc-hero__title { font-family: var(--szc-serif); font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0 0 4px; letter-spacing: -0.01em; }
.szc-hero__sub { color: var(--szc-n600); font-size: 14px; margin: 0 0 14px; max-width: 46ch; }
.szc-statstrip { display: flex; gap: 10px; margin-bottom: 20px; }
.szc-stat { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--szc-surface); border: var(--szc-border-card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--szc-sh1); }
.szc-stat__ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.szc-stat__ic--flame { background: linear-gradient(135deg,#FFE7C2,#FDCE8B); color: #C2410C; }
.szc-stat__ic--bolt { background: var(--szc-primary-soft); color: var(--szc-primary); }
.szc-stat__val { font-family: var(--szc-serif); font-size: 22px; font-weight: 700; line-height: 1; }
.szc-stat__lbl { color: var(--szc-n500); font-size: 12px; font-weight: 600; margin-left: auto; text-align: right; max-width: 8ch; }

/* ---- Siatka przedmiotów ---- */
.szc-subgrid { display: flex; flex-direction: column; gap: 11px; }
.szc-subcard {
  --szc-accent: #4F46E5;
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--szc-surface); border: var(--szc-border-card); border-radius: 20px;
  padding: 15px 16px; box-shadow: var(--szc-sh1); cursor: pointer;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, border-color .2s ease;
}
.szc-subcard:hover { transform: translateY(-2px); box-shadow: var(--szc-sh2); border-color: color-mix(in srgb, var(--szc-accent) 34%, transparent); }
.szc-subcard:active { transform: translateY(0) scale(.985); }
.szc-subcard__badge {
  width: 50px; height: 50px; border-radius: 15px; flex: none; display: grid; place-items: center;
  font-family: var(--szc-serif); font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(140deg, var(--szc-accent), color-mix(in srgb, var(--szc-accent) 62%, #111827));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--szc-accent) 34%, transparent);
}
.szc-subcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.szc-subcard__name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.szc-subcard__meta { color: var(--szc-n500); font-size: 12.5px; font-weight: 500; }
.szc-subcard__go { color: var(--szc-n400); flex: none; transition: transform .24s ease, color .2s ease; }
.szc-subcard:hover .szc-subcard__go { color: var(--szc-accent); transform: translateX(3px); }

/* ---- Nagłówek ekranu przedmiotu ---- */
.szc-subhead { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.szc-subhead__title { font-family: var(--szc-serif); font-size: 25px; font-weight: 700; margin: 0; }
.szc-back {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--szc-surface); border: var(--szc-border-card); color: var(--szc-ink); cursor: pointer;
  box-shadow: var(--szc-sh1); transition: transform .2s ease, background .2s ease;
}
.szc-back:hover { transform: translateX(-2px); background: var(--szc-paper); }

/* ---- Przełączniki (segmented, R13) ---- */
.szc-toggles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.szc-seg { display: inline-flex; background: var(--szc-paper); border-radius: 13px; padding: 4px; gap: 3px; box-shadow: inset 0 1px 2px rgba(22,32,58,.06); }
.szc-seg__btn {
  border: 0; background: transparent; color: var(--szc-n600); font-family: var(--szc-font);
  font-size: 13.5px; font-weight: 700; padding: 8px 15px; border-radius: 10px; cursor: pointer;
  transition: color .2s ease, background .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; white-space: nowrap;
}
.szc-seg__btn.szc-is-active { background: var(--szc-surface); color: var(--szc-primary-text); box-shadow: var(--szc-sh1); }
.szc-seg__btn.szc-is-disabled { color: var(--szc-n400); cursor: not-allowed; opacity: .6; }
.szc-formula { margin-left: auto; }
.szc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 99px; }
.szc-chip--formula { background: var(--szc-primary-soft); color: var(--szc-primary-text); }

/* ---- Listy: tematy (R12 wymiar 1) ---- */
.szc-subcontent { display: flex; flex-direction: column; gap: 8px; }
.szc-topicgroup { margin-top: 8px; }
.szc-topicgroup__head { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--szc-n500); padding: 6px 4px; }
.szc-toprow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 8px;
  background: var(--szc-surface); border: var(--szc-border-card); border-radius: 16px; padding: 13px 15px;
  box-shadow: var(--szc-sh1); cursor: pointer;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease, border-color .2s ease;
}
.szc-toprow:hover { transform: translateY(-1px); box-shadow: var(--szc-sh2); border-color: var(--szc-primary-border); }
.szc-toprow:active { transform: scale(.99); }
.szc-toprow__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.szc-toprow__name { font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
.szc-toprow__meta { color: var(--szc-n500); font-size: 12.5px; font-weight: 500; }
.szc-toprow__go { color: var(--szc-n400); flex: none; }
.szc-toprow:hover .szc-toprow__go { color: var(--szc-primary); }
/* Emoji-badge tematu — kolorowy kafel jak ikona apki (ozdobne emotki w menu). */
.szc-toprow__badge {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1;
  background: var(--szc-primary-soft); border: 1px solid var(--szc-primary-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .26s cubic-bezier(.34,1.56,.64,1);
}
.szc-toprow:hover .szc-toprow__badge { transform: scale(1.08) rotate(-3deg); }
.szc-toprow__done {
  flex: none; width: 22px; height: 22px; border-radius: 999px; margin-right: 2px;
  display: flex; align-items: center; justify-content: center;
  background: #16a34a; color: #fff; font-size: 13px; font-weight: 800;
}
.szc-mbar { height: 5px; border-radius: 99px; background: var(--szc-n100); overflow: hidden; margin-top: 2px; }
.szc-mbar__fill { display: block; height: 100%; border-radius: 99px; background: var(--szc-gradient); transition: width .5s cubic-bezier(.34,1.56,.64,1); }

/* ---- Listy: arkusze (R12 wymiar 2) ---- */
.szc-sheetrow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 10px;
  background: var(--szc-surface); border: var(--szc-border-card); border-radius: 18px; padding: 15px 16px;
  box-shadow: var(--szc-sh1); cursor: pointer;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease, border-color .2s ease;
}
.szc-sheetrow:hover { transform: translateY(-2px); box-shadow: var(--szc-sh2); border-color: var(--szc-primary-border); }
.szc-sheetrow:active { transform: scale(.99); }
.szc-sheetrow__ic { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--szc-primary-soft); color: var(--szc-primary); }
.szc-sheetrow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.szc-sheetrow__name { font-weight: 700; font-size: 15.5px; }
.szc-sheetrow__meta { color: var(--szc-n500); font-size: 12.5px; font-weight: 500; }
.szc-sheetrow__cta { display: inline-flex; align-items: center; gap: 3px; flex: none; font-weight: 800; font-size: 13.5px; color: #fff; background: var(--szc-gradient); padding: 9px 13px; border-radius: 12px; box-shadow: var(--szc-glow-soft); }

/* ---- Pusty stan poziomu ---- */
.szc-empty { text-align: center; padding: 44px 20px; color: var(--szc-n500); }
.szc-empty__ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--szc-paper); color: var(--szc-primary); }
.szc-empty__t { font-weight: 700; font-size: 16px; color: var(--szc-ink); margin: 0 0 4px; }
.szc-empty__s { font-size: 13px; margin: 0; max-width: 34ch; margin-inline: auto; }

/* ---- Nagłówek playera (back + tytuł sesji) ---- */
/* BEZ `env(safe-area-inset-top)`. Ten nagłówek jest DZIECKIEM `.szc-topbar`,
   a tamten już odliczył wcięcie ekranu (`padding: calc(env(...) + 10px)`).
   Doliczone drugi raz dawało 59 + 10 + 59 + 8 = 136 px chromu, zanim zaczynało
   się zadanie — zmierzone 2026-08-10 sondą `safe-area-sonda.spec.ts`: 85 px
   ponad dopuszczalne. Tak wyglądała „duża pusta przestrzeń u góry quizu",
   przez którą treść nie wypełniała ekranu telefonu. */
.szc-playerhead { display: flex; align-items: center; gap: 10px; padding: 8px 4px 6px; }
.szc-playerhead .szc-back { box-shadow: none; background: transparent; border: 0; width: 36px; height: 36px; }
.szc-sesstitle { font-weight: 700; font-size: 15px; color: var(--szc-n700); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .szc-subcard, .szc-toprow, .szc-sheetrow, .szc-subcard__go, .szc-mbar__fill { transition: none !important; }
}

/* ==========================================================================
   KONTROLKI DOPISANE — multiple_choice · matching · table_fill
   Konwencja 1:1 z .szc-answer / .szc-tf__btn: te same tokeny, te same stany.
   ========================================================================== */

/* ---- wielokrotny wybór: kwadratowy „klucz" odróżnia od pojedynczego ---- */
.szc-answer--multi .szc-answer__key { border-radius: 9px; }
.szc-answer--multi.szc-is-selected .szc-answer__key::after {
  content: '✓'; position: absolute; font-size: 15px; line-height: 1; color: #fff;
}
.szc-answer--multi .szc-answer__key { position: relative; }
.szc-answer--multi.szc-is-selected .szc-answer__key { color: transparent; }

/* ---- przyporządkowanie ---- */
.szc-match { padding: 12px 16px 14px; }
.szc-match__row { display: flex; align-items: flex-start; gap: 10px; }
.szc-match__num {
  flex: none; display: grid; place-items: center; min-width: 26px; height: 26px;
  border-radius: 99px; background: var(--szc-paper); color: var(--szc-n700);
  font-size: 13px; font-weight: 700;
}
.szc-match__text { flex: 1; min-width: 0; margin: 2px 0 0; font-size: 15.5px; line-height: 1.45; }
.szc-match__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-left: 36px; }
.szc-match__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  background: var(--szc-surface); border: 1px solid var(--szc-n200); border-radius: 12px;
  box-shadow: var(--szc-sh1); font-size: 15px; font-weight: 700; color: var(--szc-n700);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.szc-match__btnkey { font-weight: 800; }
.szc-match__btntext { font-weight: 500; font-size: 14px; }
@media (hover: hover) {
  .szc-match__btn:not(.szc-is-selected):hover {
    border-color: var(--szc-primary-border); color: var(--szc-ink);
    box-shadow: var(--szc-sh1), var(--szc-glow-soft);
  }
}
.szc-match__btn:active { background: var(--szc-primary-soft); }
.szc-match__btn.szc-is-selected {
  background: var(--szc-primary-soft); border-color: var(--szc-primary-border); color: var(--szc-primary-strong);
}
.szc-match__btn.szc-is-correct {
  background: var(--szc-success-soft); border-color: var(--szc-success-border);
  color: var(--szc-success-deep); box-shadow: var(--szc-glow-success);
}
.szc-match__btn.szc-is-wrong {
  background: var(--szc-error-soft); border-color: var(--szc-error-border); color: var(--szc-error-strong);
}
.szc-match__btn:disabled { cursor: default; }
.szc-match .szc-check-badge { position: absolute; top: 12px; right: 12px; }
.szc-match.szc-has-badge .szc-match__row { padding-right: 30px; }

/* ---- luki w tabeli: etykieta komórki przed polem ---- */
.szc-gap__label {
  display: inline-block; margin-right: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--szc-n700);
}

@media (prefers-reduced-motion: reduce) {
  .szc-match__btn { transition: none; }
}

/* ---- Buddy: świętowanie serii (3/5/10 z rzędu) ----
   Podskok + obrót ogona. Spring physics, respektuje prefers-reduced-motion. */
@keyframes szc-buddy-party {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  18%  { transform: translateY(-14px) rotate(-6deg) scale(1.08); }
  36%  { transform: translateY(0) rotate(5deg) scale(1.02); }
  54%  { transform: translateY(-9px) rotate(-4deg) scale(1.06); }
  72%  { transform: translateY(0) rotate(3deg) scale(1.01); }
  86%  { transform: translateY(-4px) rotate(-2deg) scale(1.03); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.szc-mascot--party {
  animation: szc-buddy-party 1100ms cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 0 18px rgba(249, 200, 67, .45));
}
@media (prefers-reduced-motion: reduce) {
  .szc-mascot--party { animation: none; filter: drop-shadow(0 0 12px rgba(249, 200, 67, .35)); }
}

/* Nagłówek panelu wyniku — tytuł + punkty w kolumnie. */
.szc-sheet__headtext { flex: 1; min-width: 0; }

/* ==========================================================================
   ZWIJANIE PANELU ROZWIĄZANIA
   Uchwyt u góry panelu zwija go do pigułki przy dolnej krawędzi, żeby uczeń
   mógł wrócić do treści zadania i porównać ją ze swoją odpowiedzią.
   ========================================================================== */
/* UWAGA: ten blok wcześniej ustawiał `background: none` i sticky-uchwyt z reguły
   wyżej (linia ~549) robił się przezroczysty — treść panelu przebijała pod nim,
   a jedynym afordansem była pastylka 40×4 px. Tło musi zostać z tamtej reguły. */
.szc-sheet__grabwrap {
  display: block; width: 100%; padding: 10px 16px 8px;
  border: 0; cursor: pointer; touch-action: none;
  border-bottom: 1px solid var(--szc-n150, rgba(0,0,0,.06));
}
.szc-sheet__grabwrap:focus-visible { outline: 2px solid var(--szc-primary); outline-offset: -4px; border-radius: 10px; }
@media (hover: hover) { .szc-sheet__grabwrap:hover .szc-sheet__grab { background: var(--szc-n400); width: 56px; } }
.szc-sheet__grab { transition: background-color .18s ease, width .18s ease; }
.szc-sheet__grabtxt {
  display: block; margin-top: 6px; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--szc-n500);
}

.szc-restore {
  /* fixed, NIE absolute: .szc-player jest kontenerem scrolla, więc pigułka
     absolutna scrollowała się z treścią i po zwinięciu bywała poza ekranem. */
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 950;
  transform: translate(-50%, 14px); opacity: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px; border-radius: 99px;
  background: var(--szc-ink); color: #fff; border: 0;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 22px rgba(26, 23, 19, .28);
  cursor: pointer; pointer-events: none;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}
.szc-restore--in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.szc-restore__ico { font-size: 11px; line-height: 1; opacity: .85; }
@media (hover: hover) { .szc-restore:hover { box-shadow: 0 10px 26px rgba(26, 23, 19, .34); } }
.szc-restore:active { transform: translate(-50%, 1px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .szc-restore { transition: opacity .15s ease; transform: translate(-50%, 0); }
}

/* ==========================================================================
   SEKCJA SŁUCHANIA — jeden odtwarzacz na blok zadań
   ========================================================================== */
.szc-audio {
  margin: 0 16px 12px; padding: 12px 14px 10px;
  background: var(--szc-surface); border: 1px solid var(--szc-n200);
  border-radius: 16px; box-shadow: var(--szc-sh1);
}
.szc-audio__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.szc-audio__ico { font-size: 17px; line-height: 1; }
.szc-audio__label {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.01em; color: var(--szc-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.szc-audio__tr {
  flex: none; height: 30px; padding: 0 11px; border-radius: 99px;
  background: var(--szc-paper); border: 1px solid var(--szc-n200);
  font-size: 12.5px; font-weight: 700; color: var(--szc-n700); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
@media (hover: hover) { .szc-audio__tr:hover { border-color: var(--szc-primary-border); color: var(--szc-primary-strong); } }
.szc-audio__el { display: block; width: 100%; height: 38px; }
.szc-audio__hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--szc-muted, var(--szc-n700)); opacity: .82; }
/* Stan bledu wczytania nagrania (2026-08-18): pasek mowi co sie stalo + retry */
.szc-audio--err { border-color: var(--szc-error-border); background: var(--szc-error-soft); }
.szc-audio--err .szc-audio__label { color: var(--szc-error-strong); }
.szc-audio--err .szc-audio__el { opacity: .45; pointer-events: none; }
.szc-audio__retry {
  display: block; margin-top: 8px; height: 34px; padding: 0 16px; border-radius: 99px;
  border: 1px solid var(--szc-error-border); background: var(--szc-surface);
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--szc-error-strong); cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.szc-audio__retry:active { transform: scale(.96); }
@media (max-width: 359px) { .szc-audio { margin: 0 12px 10px; padding: 10px 12px 8px; } }

/* Figura inline — oryginalny crop schematu/wykresu zamiast opisu słownego */
.szc-figure__img {
  display: block; width: 100%; height: auto; margin: 6px auto 2px;
  border-radius: 12px; border: 1px solid var(--szc-n200); background: #fff;
  padding: 8px; cursor: zoom-in; box-shadow: var(--szc-sh1);
  /* schematy CKE bywaja szerokie i plaskie — nie sciskaj ponizej czytelnosci */
  min-height: 90px; object-fit: contain;
}
.szc-figure { margin: 6px 0; }
@media (hover: hover) { .szc-figure__img:hover { box-shadow: var(--szc-sh1), var(--szc-glow-soft); } }

/* Barwny materiał źródłowy geografii — załącznik CKE wydawany osobno od arkusza.
   Stoi NAD poleceniem, bo tak leży na ławce: najpierw patrzysz na mapę, potem
   czytasz pytanie. Ramka cieplejsza niż przy zwykłej figurze, żeby było widać,
   że to osobny materiał, a nie rysunek wycięty z treści zadania. */
.szc-material {
  margin: 8px 14px 10px; padding: 8px 8px 6px;
  border: 1px solid var(--szc-n200); border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, var(--szc-n50, #FFFDF7) 100%);
  box-shadow: var(--szc-sh1);
}
.szc-material__img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #fff; cursor: zoom-in; object-fit: contain;
  transition: box-shadow 250ms ease, transform 350ms cubic-bezier(.34, 1.56, .64, 1);
}
.szc-material__img:active { transform: scale(.995); }
@media (hover: hover) {
  .szc-material__img:hover { box-shadow: var(--szc-sh1), var(--szc-glow-soft); }
}
.szc-material__cap {
  margin: 6px 2px 0; font-size: 11.5px; line-height: 1.4;
  color: var(--szc-muted, var(--szc-n700)); opacity: .82; text-align: center;
}
@media (max-width: 359px) { .szc-material { margin-left: 12px; margin-right: 12px; } }

/* table_fill: pola input w komórkach tabeli */
.szc-tfill { margin: 4px 0; }
.szc-tfill table { width: 100%; }
.szc-tcell {
  width: 100%; min-width: 80px; box-sizing: border-box;
  padding: 8px 10px; border: 1.5px solid var(--szc-primary-border);
  border-radius: 8px; background: var(--szc-primary-soft);
  /* 16px, nie 15px — patrz bezpiecznik na końcu pliku. Poniżej tego progu
     iPhone przybliża cały ekran w chwili dotknięcia komórki. */
  font-size: 16px; font-family: inherit; color: var(--szc-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.szc-tcell:focus { outline: none; border-color: var(--szc-primary); box-shadow: 0 0 0 3px rgba(124,124,255,.18); background: #fff; }
.szc-tcell:disabled { background: var(--szc-paper); opacity: .85; }
.szc-tfill__ans { font-weight: 600; color: var(--szc-success-deep); }

/* „Mam dobrze — zalicz" — ratunek, gdy automat nie uznal rownowaznego zapisu.
   Ma byc widoczne, ale nie krzyczec glosniej niz samo rozwiazanie. */
.szc-claim { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 13px 15px; border-radius: 14px;
  background: #FFFBEB; border: 1px solid #FDE68A; }
.szc-claim__label { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.45; color: #92400E; font-weight: 600; }
.szc-claim__btn { flex-shrink: 0; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  color: #fff; padding: 10px 16px; border-radius: 11px; background: linear-gradient(135deg, #F59E0B, #EA580C);
  box-shadow: 0 3px 10px rgba(234,88,12,.28); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; }
.szc-claim__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(234,88,12,.34); }
.szc-claim__btn:active { transform: scale(.97); }
.szc-claim--done { background: #ECFDF5; border-color: #A7F3D0; justify-content: center; }
.szc-claim__ok { font-size: 13px; font-weight: 800; color: #047857; }
@media (prefers-reduced-motion: reduce) { .szc-claim__btn { transition: none; } }

/* ── TRENING NA DZIŚ: „dlaczego dostałem to zadanie" ──────────────────
   Chip pod metryczką. Kolor niesie rodzaj slotu — poprawka jest cieplejsza
   (to dług do spłacenia), reszta spokojna. Bez emoji: to chrome, nie treść. */
.szc-why {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; padding: 8px 12px;
  border-radius: 12px; font-size: 12.5px; line-height: 1.35;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #475569;
  animation: szcWhyIn 380ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes szcWhyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.szc-why__dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: 0 0 auto; opacity: .55; }
.szc-why__text { flex: 1 1 auto; }
.szc-why--poprawka   { background: rgba(240, 112, 32, 0.07); border-color: rgba(240, 112, 32, 0.16); color: #9A3412; }
.szc-why--utrwalenie { background: rgba(22, 163, 74, 0.07);  border-color: rgba(22, 163, 74, 0.16);  color: #15803D; }
.szc-why--blizniak   { background: rgba(79, 70, 229, 0.06);  border-color: rgba(79, 70, 229, 0.14);  color: #4338CA; }
@media (prefers-reduced-motion: reduce) { .szc-why { animation: none; } }

/* ==========================================================================
   TELEFONY (≤430px): podwójny odstęp boczny (margines 16 + padding 18
   = 34 px na stronę) zwężał kolumnę tekstu i pogłębiał wrażenie „oddalenia".
   Blok NA KOŃCU pliku — musi wygrać kaskadą z regułami bazowymi (.szc-zone
   jest zdefiniowana niżej niż karta treści).
   ========================================================================== */
@media (max-width: 430px) {
  .szc-content { margin: 0 12px 14px; padding: 18px 15px; }
  .szc-metric { margin: 8px 14px 10px; }
  .szc-zone { margin: 0 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEZPIECZNIK PRZECIW PRZYBLIŻANIU (iOS) — 2026-08-09
   ---------------------------------------------------------------------------
   Safari i WKWebView powiększają CAŁY ekran w chwili, gdy człowiek dotknie
   pola formularza o czcionce mniejszej niż 16 px. `user-scalable=no` w
   viewporcie tego nie powstrzymuje — iOS ignoruje ten zapis od wersji 10.
   Jedyna skuteczna dźwignia to rozmiar czcionki samego pola.

   Zadania CKE budowane są z treści, więc nowe pola powstają tu bez udziału
   arkusza stylów. Ta reguła obejmuje je z góry — także te, które dopiero
   powstaną. Wszystkie pola w tym module są z założenia 16 px, więc jednolita
   wartość niczego nie psuje — pilnuje tylko, żeby nikt nie zszedł niżej po
   cichu, dopisując nową klasę.
   ═══════════════════════════════════════════════════════════════════════════ */
.szc-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.szc-root textarea,
.szc-root select {
  font-size: 16px;
}

/* ---- Odpowiedzi, które są rysunkami (2026-08-10) --------------------------
   Zadania, w których warianty A-D to w arkuszu OBRAZKI (kostki, osie liczbowe,
   wzory strukturalne), a w treści mamy tylko ich opis słowny. Pokazujemy wtedy
   oryginał NAD przyciskami — uczeń porównuje rysunki i klika literę, zamiast
   czytać cztery akapity prozy. Opisy zostają na przyciskach (i dla czytników). */
.szc-optfig {
  margin: 0 0 12px; padding: 10px 12px 12px;
  background: var(--szc-paper); border: var(--szc-border-card); border-radius: 16px;
}
.szc-optfig__head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.szc-optfig__icon { display: inline-flex; color: var(--szc-primary); }
.szc-optfig__label { font-size: 12px; font-weight: 700; color: var(--szc-primary-text); letter-spacing: -0.01em; }
.szc-optfig__img {
  display: block; width: 100%; height: auto; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(22,32,58,0.08); cursor: zoom-in;
}


/* Arkusz wyniku wstawiony NA STALE w strone (podglad korpusu), a nie wysuwany
   od dolu jak w grze: bez pozycjonowania, bez cienia sesji. */
.szc-sheet--statyczny {
  position: static; transform: none; box-shadow: none;
  border: 1px solid var(--szc-n200); border-radius: 14px;
  /* `width:100%` z reguly bazowej + wlasne marginesy dawaly element szerszy niz
     ekran i cala strona przewijala sie w bok. `box-sizing` liczy padding w srodku. */
  width: auto; max-width: none; box-sizing: border-box;
  margin: 0 12px 10px; padding: 10px 12px; max-height: none; overflow-y: visible;
}

/* ── Pakiet ROZWIAZYWANIE 2026-08-19 ─────────────────────────────────── */
/* Druga próba — przyciski w sheecie */
.szc-sheet__retryrow { display: flex; flex-direction: column; gap: 10px; padding: 6px 18px 18px; }
.szc-sheet__retryrow .szc-cta { position: static; width: 100%; }
.szc-sheet__ghostbtn {
  height: 44px; border-radius: 12px; border: 1px solid var(--szc-n200);
  background: var(--szc-surface); font: inherit; font-size: 14px; font-weight: 700;
  color: var(--szc-n700); cursor: pointer;
}
/* Popraw błędne na ekranie wyniku */
.szc-result__fixbtn {
  display: block; width: 100%; margin-top: 10px; height: 46px; border-radius: 12px;
  border: 1px solid var(--szc-error-border); background: var(--szc-error-soft);
  font: inherit; font-size: 14px; font-weight: 800; color: var(--szc-error-strong); cursor: pointer;
  transition: transform .15s ease;
}
.szc-result__fixbtn:active { transform: scale(.97); }
/* Mathbar */
.szc-mathbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.szc-mathbar__btn {
  min-width: 44px; height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--szc-n200); background: var(--szc-paper);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--szc-primary-strong); cursor: pointer;
}
.szc-mathbar__btn:active { transform: scale(.94); }
.szc-mathbar__prev { margin-top: 8px; min-height: 0; font-size: 15px; color: var(--szc-ink); }
.szc-mathbar__prevlbl { font-size: 11.5px; font-weight: 700; color: var(--szc-n700); margin-right: 6px; }
/* Wzorzec-lista w sheecie */
.szc-wzorzec { margin: 8px 0 0; padding: 0 0 0 18px; display: block; }
.szc-wzorzec li { margin: 0 0 6px; line-height: 1.5; }
/* Pop wybranej odpowiedzi */
@keyframes szcPop { 0% { transform: scale(1); } 45% { transform: scale(.92); } 100% { transform: scale(1); } }
.szc-gap__letter.szc-is-selected,
.szc-answer.szc-is-selected .szc-answer__key,
.szc-item__btn.szc-is-selected .szc-item__key { animation: szcPop .22s cubic-bezier(.34,1.56,.64,1); }
/* Tabela etykieta+wartość jako karty na mobile */
@media (max-width: 520px) {
  .szc-table--stack, .szc-table--stack tbody { display: block; width: 100%; }
  .szc-table--stack tr {
    display: block; margin: 0 0 8px; padding: 9px 12px;
    background: var(--szc-surface); border: 1px solid var(--szc-n200); border-radius: 12px;
  }
  .szc-table--stack td, .szc-table--stack th { display: block; border: 0; padding: 2px 0; text-align: left; }
  .szc-table--stack tr > *:first-child { font-weight: 700; }
}
/* Szeroka tabela — sygnal przewijania */
.szc-tablewrap--wide { position: relative; }
.szc-tablewrap--wide::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(90deg, transparent, var(--szc-bg)); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .szc-gap__letter.szc-is-selected, .szc-answer.szc-is-selected .szc-answer__key,
  .szc-item__btn.szc-is-selected .szc-item__key { animation: none; }
}
/* Miekka etykieta blednego wyboru przy drugiej probie (zdejmowana kliknieciem) */
.szc-retry-wrong { border-color: var(--szc-error-border) !important; background: var(--szc-error-soft) !important; }
.szc-retry-wrong .szc-answer__key, .szc-retry-wrong .szc-item__key { background: var(--szc-error) !important; color: #fff !important; }