/* Powłoka portalu II roku (etap 4). Wygląd z zatwierdzonej makiety (gałąź etap-4-makieta, 452e176).
   CSP style-src 'self': żadnych stylów inline; kolory przedmiotów przez data-p, nie style="--kolor". */
/* ---------- Krój interfejsu: IBM Plex Sans (wersja zmienna 100–700, SIL OFL 1.1, static/fonty/OFL.txt) ----------
   Podzbiory latin, latin-ext (polskie znaki) i greek (α, β w treści); przeglądarka pobiera tylko te, których znaki są na stronie. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap;
  src: url("fonty/ibm-plex-sans-greek-wght-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ---------- Kolory i typografia (tokeny) ---------- */
:root {
  color-scheme: light;
  --tlo: #f6f5f1;
  --karta: #ffffff;
  --karta-2: #efede6;
  --tekst: #1c2024;
  --tekst-2: #555c63;
  --linia: #dcd9cf;
  --akcent: #1d5c8c;
  --akcent-tekst: #ffffff;
  --akcent-jasny: #dde9f3;
  --fokus: #0b62c9;
  --wejsciowka: #136f63;
  --kolokwium: #8a5300;
  --pojecie-1: #7a2f9a;
  --pojecie-2: #a04f05;
  --pojecie-3: #0b6f65;
  --dobrze: #276b37;
  --dobrze-tlo: #e3f1e5;
  --zle: #a1312a;
  --zle-tlo: #f8e3e1;
  --probny: #8a5300;
  --probny-tlo: #fbefd9;
  --znak: rgb(28 32 36 / .035);
  --cien: 0 1px 2px rgb(20 20 10 / .06), 0 4px 14px rgb(20 20 10 / .05);
  --szeryf: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --bez: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --promien: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tlo: #121518; --karta: #1a1e22; --karta-2: #23282d; --tekst: #e7e9ea; --tekst-2: #a7afb6; --linia: #333a41;
    --akcent: #7db7e8; --akcent-tekst: #0d1114; --akcent-jasny: #1d3347; --fokus: #9cc9f5;
    --wejsciowka: #6fd0c1; --kolokwium: #e6b862;
    --pojecie-1: #d4a8f0; --pojecie-2: #f2a861; --pojecie-3: #6fd3c6;
    --dobrze: #93d4a0; --dobrze-tlo: #1d3324; --zle: #f2a39b; --zle-tlo: #3a1f1d;
    --probny: #e6b862; --probny-tlo: #3a2c14; --znak: rgb(231 233 234 / .04);
    --cien: 0 1px 2px rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tlo: #121518; --karta: #1a1e22; --karta-2: #23282d; --tekst: #e7e9ea; --tekst-2: #a7afb6; --linia: #333a41;
  --akcent: #7db7e8; --akcent-tekst: #0d1114; --akcent-jasny: #1d3347; --fokus: #9cc9f5;
  --wejsciowka: #6fd0c1; --kolokwium: #e6b862;
  --pojecie-1: #d4a8f0; --pojecie-2: #f2a861; --pojecie-3: #6fd3c6;
  --dobrze: #93d4a0; --dobrze-tlo: #1d3324; --zle: #f2a39b; --zle-tlo: #3a1f1d;
  --probny: #e6b862; --probny-tlo: #3a2c14; --znak: rgb(231 233 234 / .04);
  --cien: 0 1px 2px rgb(0 0 0 / .4);
}

/* ---------- Podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 16px/1.55 var(--bez); overflow-x: hidden; }
a { color: var(--akcent); }
h1, h2, h3 { line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.svg { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drobny { font-size: 14px; color: var(--tekst-2); }
.oslona { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Nagłówek */
.naglowek { background: var(--karta); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 20; }
.naglowek .oslona { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.marka { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tekst); font-weight: 700; letter-spacing: -.01em; }
.marka .znak-marki { width: 30px; height: 30px; border-radius: 8px; background: var(--akcent); color: var(--akcent-tekst); display: grid; place-items: center; }
.marka small { font-weight: 400; color: var(--tekst-2); }
.naglowek .odstep { flex: 1; }
.ikona-przycisk { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); cursor: pointer; color: var(--tekst); }
.ikona-przycisk:hover { background: var(--karta-2); }
.konto { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tekst-2); }
.konto .inicjaly { width: 34px; height: 34px; border-radius: 50%; background: var(--akcent-jasny); color: var(--tekst); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
@media (max-width: 640px) { .konto .email, .marka small { display: none; } }

/* Przyciski */
.przycisk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--akcent); background: var(--akcent); color: var(--akcent-tekst); text-decoration: none; font-weight: 600; cursor: pointer; }
.przycisk.cichy { background: transparent; color: var(--akcent); }
.przycisk:disabled { opacity: .45; cursor: not-allowed; }
.przycisk.maly { min-height: 34px; padding: 4px 12px; font-size: 14px; }

main.oslona { padding-top: 24px; padding-bottom: 64px; }
.okruszki { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--tekst-2); margin-bottom: 14px; }
.okruszki a { color: var(--tekst-2); }
.okruszki span[aria-hidden] { opacity: .6; }

/* Powierzchnie płaskie: linia 1 px zamiast cienia (cień zostaje tylko na nakładkach: menu konta, lekcja WNL). */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); }

/* ---------- Ekran 1: start ---------- */
/* Jedna wyśrodkowana kolumna na każdej szerokości: przedmioty (główna część) i pod nimi „ostatnio otwarte” (dodatek). */
.start { max-width: 860px; margin-inline: auto; }
.powitanie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: end; margin-bottom: 20px; }
.powitanie p { margin: 0; color: var(--tekst-2); }
.start .powitanie { margin-bottom: 24px; }
/* Lista przedmiotów: jeden wiersz na przedmiot; kropka w kolorze przedmiotu to ten sam klucz barwny co górna krawędź slajdów jego lekcji. */
.lista-przedmiotow { list-style: none; margin: 0; padding: 0; }
.przedmiot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 20px 24px; min-height: 88px; }
.przedmiot + .przedmiot { border-top: 1px solid var(--linia); }
@media (hover: hover) and (pointer: fine) { .przedmiot:hover { background: var(--karta-2); } }
.lista-przedmiotow > .przedmiot:first-child { border-radius: var(--promien) var(--promien) 0 0; }
.lista-przedmiotow > .przedmiot:last-child { border-radius: 0 0 var(--promien) var(--promien); }
.przedmiot h2 { margin: 0; font-size: 21px; }
.przedmiot-nazwa { display: inline-flex; gap: 12px; align-items: baseline; color: var(--tekst); text-decoration: none; }
.przedmiot-nazwa::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--kolor, var(--tekst-2)); }
.przedmiot-nazwa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.przedmiot-nazwa:focus-visible { outline: none; }
.przedmiot:has(.przedmiot-nazwa:focus-visible) { outline: 3px solid var(--fokus); outline-offset: -3px; }
.przedmiot .meta { margin: 4px 0 0 24px; font-size: 15px; color: var(--tekst-2); }
.przedmiot .meta .probny { color: var(--probny); font-weight: 600; }
.przedmiot .meta .probny, .przedmiot .meta .bez-dostepu { white-space: nowrap; }
/* Ścieżki jako przyciski o wysokości 44 px (cel kliknięcia na telefonie), nad nakładką linku przedmiotu. */
.przedmiot-sciezki { position: relative; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.przedmiot-sciezki a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--linia); border-radius: 10px;
  background: var(--karta); color: var(--akcent); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .przedmiot-sciezki a:hover { border-color: var(--akcent); } }
@media (max-width: 640px) {
  .przedmiot { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .przedmiot h2 { font-size: 20px; }
  .przedmiot-sciezki { margin-left: 0; }
  .przedmiot-sciezki a { flex: 1 1 0; padding: 8px; font-size: 14px; white-space: nowrap; }
}
.sekcja-tytul { font-size: 18px; color: var(--tekst); margin: 34px 0 10px; font-weight: 700; }
/* „Ostatnio otwarte”: mniejsze od przedmiotów, 2 wpisy widoczne, reszta pod <details>. */
.ostatnie-sekcja .sekcja-tytul { font-size: 15px; color: var(--tekst-2); font-weight: 600; margin: 36px 0 8px; }
.ostatnie { list-style: none; margin: 0; padding: 0; }
.ostatnie li + li, .ostatnie-wiecej { border-top: 1px solid var(--linia); }
.ostatnie a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 10px 16px; text-decoration: none; color: var(--tekst); }
@media (hover: hover) and (pointer: fine) { .ostatnie a:hover { background: var(--karta-2); } }
.ostatnie .ikona-trybu { display: grid; place-items: center; color: var(--tekst-2); flex: none; }
.ostatnie .opis { min-width: 0; flex: 1; }
.ostatnie .opis b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ostatnie .opis span { font-size: 13px; color: var(--tekst-2); }
.ostatnie-karta { overflow: hidden; }
.ostatnie-wiecej summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--akcent); }
.ostatnie-wiecej summary::-webkit-details-marker { display: none; }
.ostatnie-wiecej summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .ostatnie-wiecej summary:hover { background: var(--karta-2); } }
.ostatnie-wiecej .zwin, .ostatnie-wiecej[open] .pokaz { display: none; }
.ostatnie-wiecej[open] .zwin { display: inline; }
.ostatnie-wiecej[open] { display: flex; flex-direction: column; }
.ostatnie-wiecej[open] summary { order: 1; border-top: 1px solid var(--linia); } /* „Zwiń” pod starszymi wpisami, nie między nimi */
.wejscie-gosc { margin-top: 36px; font-size: 14px; color: var(--tekst-2); text-align: center; }
.wejscie-gosc a { color: var(--tekst-2); }
.info-gosc { padding: 14px 18px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.info-gosc p { margin: 0; }

/* ---------- Ekran 2: kurs ---------- */
.kurs-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-end; margin-bottom: 18px; }
.kurs-glowa p { margin: 0; color: var(--tekst-2); }
.szukaj { position: relative; width: min(100%, 360px); }
.szukaj input { width: 100%; min-height: 42px; padding: 8px 12px 8px 38px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); }
.szukaj .svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tekst-2); }
.sciezki { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--linia); border-radius: 12px; margin-bottom: 18px; width: fit-content; max-width: 100%; }
.sciezki a, .sciezki span { padding: 8px 16px; border-radius: 9px; text-decoration: none; color: var(--tekst-2); font-weight: 600; font-size: 15px; }
@media (max-width: 480px) { .sciezki { width: 100%; } .sciezki a, .sciezki span { flex: 1; text-align: center; padding: 8px 6px; font-size: 14px; } }
.sciezki a:not([aria-current]):hover { color: var(--tekst); background: var(--karta-2); }
.sciezki a[aria-current="page"], .sciezki span[aria-current="page"] { background: var(--akcent-jasny); color: var(--akcent); }
.forma { margin: 0 0 22px; }
.forma > summary { font-size: 17px; font-weight: 700; margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; list-style: none; }
.forma > summary::-webkit-details-marker { display: none; }
.forma > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); align-self: center; transition: transform .15s; }
.forma[open] > summary::before { transform: rotate(45deg); }
.forma > summary small { font-weight: 400; color: var(--tekst-2); font-size: 14px; }
.tematy { list-style: none; margin: 0; padding: 0; }
.temat { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 16px; }
.temat + .temat { border-top: 1px solid var(--linia); }
.temat .nr { color: var(--tekst-2); font-variant-numeric: tabular-nums; font-size: 14px; }
.temat .tytul { min-width: 0; overflow-wrap: anywhere; }
.w-przygotowaniu { font-size: 13.5px; color: var(--tekst-2); font-style: italic; }
@media (max-width: 760px) {
  .temat { grid-template-columns: 28px 1fr; }
}
@media (max-width: 480px) {
  .temat { padding: 12px; gap: 6px 8px; }
}
.egzamin-forma { padding: 16px 18px; margin-bottom: 22px; display: flex; gap: 14px; align-items: flex-start; }
.egzamin-forma .svg { width: 26px; height: 26px; color: var(--akcent); margin-top: 2px; }
.egzamin-forma p { margin: 2px 0 0; }
.egz-siatka { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .egz-siatka { grid-template-columns: 1fr; } }
.blok { padding: 16px 18px; }
.blok > h2 { font-size: 17px; margin: 0 0 4px; }
.blok > p { margin: 0 0 12px; color: var(--tekst-2); font-size: 14.5px; }
.zagadnienia { margin: 0; padding-left: 22px; }
.zagadnienia li { padding: 5px 0; }
details.grupa-tematow { border-top: 1px solid var(--linia); }
details.grupa-tematow summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
details.grupa-tematow ol { margin: 0 0 10px; padding-left: 26px; font-size: 15px; }
.licznik-duzy { font-size: 30px; font-weight: 700; line-height: 1; }
.wyniki { list-style: none; margin: 0; padding: 0; }
.wyniki li { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.wyniki li + li { border-top: 1px solid var(--linia); }
.wyniki a { font-weight: 600; text-decoration: none; }
.wyniki .rodzaj { font-size: 12.5px; color: var(--tekst-2); }
mark { background: var(--akcent-jasny); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- Ekran 3: materiał ---------- */
.mat-glowa { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.mat-glowa h1 { font-size: clamp(21px, 3vw, 28px); max-width: 760px; }
.mat-glowa p { margin: 0; color: var(--tekst-2); font-size: 14.5px; }
.tryby { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--linia); border-radius: 12px; max-width: 100%; overflow-x: auto; }
.tryby button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--tekst-2); cursor: pointer; white-space: nowrap; }
.tryby button:not([aria-pressed="true"]):not(:disabled):hover { color: var(--tekst); background: var(--karta-2); }
.tryby button[aria-pressed="true"] { background: var(--akcent-jasny); color: var(--akcent); }
.tryby button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 520px) { .tryby { width: 100%; } .tryby button { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; gap: 5px; } }
.pasek-probny { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: 10px; background: var(--probny-tlo); color: var(--tekst); margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--probny) 35%, transparent); }
.pasek-probny b { color: var(--probny); }

/* Ochrona treści: pełne reguły w ochrona.css (ładuje ochrona.js); znak wodny buduje znak-wodny.js */
.tresc { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.znak-wodny { border-radius: inherit; }
@media print {
  .tresc, .naglowek, .tryby { display: none !important; }
}

/* Pytania */
.opcje { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcja { width: 100%; text-align: left; display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); cursor: pointer; line-height: 1.45; }
.opcja:hover:not(:disabled) { border-color: var(--akcent); }
.opcja b { flex: none; width: 22px; color: var(--tekst-2); }
.opcja:disabled { cursor: default; }
.opcja.poprawna { border-color: var(--dobrze); background: var(--dobrze-tlo); }
.opcja.poprawna b { color: var(--dobrze); }
.opcja.bledna { border-color: var(--zle); background: var(--zle-tlo); }
.opcja.bledna b { color: var(--zle); }
.wyjasnienie { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--karta-2); }
.wyjasnienie b.ok { color: var(--dobrze); } .wyjasnienie b.zle { color: var(--zle); }
.pytanie-karta { padding: clamp(18px, 3vw, 30px); max-width: 820px; }
.pytanie-gora { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--tekst-2); margin-bottom: 10px; }
.pytanie-tresc { font-size: 18.5px; font-weight: 600; margin: 0 0 16px; line-height: 1.45; }
.pytanie-tresc ol { font-weight: 400; margin: 8px 0 0; padding-left: 1.4em; }
.filtry { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; font-size: 14.5px; }
.filtry label { display: inline-flex; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
/* Tekst i quiz: nagłówek strony i karta w jednej wyśrodkowanej kolumnie (szerokość tekstu + margines karty).
   Tabele i schematy szersze od kolumny przewijają się poziomo wewnątrz karty. */
.kolumna { max-width: 800px; margin-inline: auto; }
/* Tekst: szerokość ogranicza miara wiersza, więc kolumna rośnie razem z krojem. Dawniej 686 px przy 18,5 px
   dawało medianę 86 znaków w wierszu (do 95), ponad normę 60–85. Teraz akapity i listy mają 33em, czyli ok. 77 znaków
   przy każdej szerokości; krój 18,5 px do 1080 px okna, 20 px przy 1440, 22 px od 1920; karta 800 → 840 → 910 px
   (miara + margines na tabele i schematy, które korzystają z pełnej szerokości karty). */
.kolumna-tekst { max-width: clamp(800px, 14.6vw + 630px, 910px); }
.kolumna-tekst .artykul { font-size: clamp(18.5px, .4167vw + 14px, 22px); }
.kolumna-tekst .artykul :is(p, ul, ol, dl, blockquote) { max-width: 33em; }
/* Nagłówki, tabele, schematy i ramki rosną razem z krojem (przy 18,5 px wartości są te same co w .artykul). */
.kolumna-tekst .artykul h2, .kolumna-tekst .porcja > h2.porcja-tytul { font-size: 1.3em; }
.kolumna-tekst .artykul h3, .kolumna-tekst .porcja > .porcja-tresc h2 { font-size: 1.08em; }
.kolumna-tekst .artykul :is(h4, h5, h6) { font-size: 1em; }
.kolumna-tekst .artykul table { font-size: .84em; }
.kolumna-tekst .artykul pre { font-size: .73em; }
.kolumna-tekst .ramka { font-size: .865em; }
.kolumna .mat-glowa h1 { max-width: none; }
.kolumna .pytanie-karta { max-width: none; }
/* Nieaktywne „Następne”: wyraźnie wyłączone (bez wypełnienia akcentem), ale czytelne. */
.pytanie-karta .przycisk:disabled { opacity: 1; background: var(--karta-2); border-color: var(--linia); color: var(--tekst-2); }
.pytanie-dol { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.zablokowane { padding: 28px; text-align: center; max-width: 560px; margin: 30px auto; }
.zablokowane .svg { width: 34px; height: 34px; color: var(--tekst-2); }

/* ---------- Stan plików (katalog) ---------- */
.temat { display: block; padding: 12px 16px; }
.temat-glowa { display: flex; gap: 10px; align-items: baseline; }
.temat-glowa .nr { min-width: 26px; }
.temat-glowa .tytul { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wyklady .notka { margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); }
.lista-wykladow { margin: 0; padding: 10px 16px 10px 44px; font-size: 15px; color: var(--tekst-2); }
.lista-wykladow li { padding: 3px 0; }
.egz-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
@media (max-width: 900px) { .egz-karty { grid-template-columns: minmax(0, 1fr); } }
.egz-karty .blok p { margin: 4px 0 10px; }


.pasek-przyklad { padding: 10px 16px; border-radius: 10px; background: var(--akcent-jasny); margin-bottom: 14px; font-size: 14.5px; }

/* ---------- Lekcja WNL (wierna widokowi z Rok 3, bez XP) ---------- */
.lekcja-okruszki { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); }
.lekcja-spis-przycisk { display: none; }
.lekcja-uklad { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 10px; }
.lekcja-drzewo { position: sticky; top: 76px; max-height: calc(100dvh - 96px); overflow-y: auto; padding: 14px 12px;
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); font-size: 13.5px; }
.drzewo-tytul { margin: 0 0 8px; font: 600 17px/1.25 var(--szeryf); }
.drzewo, .drzewo ol { list-style: none; margin: 0; padding: 0; }
.drzewo > li { border-top: 1px solid var(--linia); padding: 4px 0; }
.drzewo summary { display: flex; gap: 6px; align-items: baseline; cursor: pointer; padding: 4px 2px; font-weight: 600; }
.drzewo-dzial { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drzewo .licznik { font-size: 12px; color: var(--tekst-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.drzewo a { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-radius: 6px; color: var(--tekst); text-decoration: none; }
.drzewo ol a span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drzewo a.drzewo-glowny { font-weight: 600; }
.drzewo a.biezacy { background: var(--akcent-jasny); color: var(--akcent); }
@media (hover: hover) and (pointer: fine) { .drzewo a:not(.biezacy):hover { background: var(--karta-2); } }
.drzewo-nr { min-width: 2.2em; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.drzewo-rozgrzewka span:nth-child(2) { font-style: italic; }
.drzewo-poddzial > summary { font-weight: 400; padding-left: 10px; }
.drzewo .drzewo-poddzial ol { padding-left: 10px; }
.drzewo a small { color: var(--tekst-2); }
.lekcja-zaslona { display: none; }
.lekcja-glowna { position: relative; min-width: 0; container-type: inline-size; }
/* Pełny ekran: slajd wypełnia cały ekran, pasek nawigacji na dole, stopka ukryta. */
.lekcja-glowna:fullscreen { display: flex; flex-direction: column; gap: 10px; width: 100vw; height: 100dvh; box-sizing: border-box;
  overflow: hidden; padding: 16px clamp(16px, 2.5vw, 40px); background: var(--tlo); }
.lekcja-glowna:fullscreen .lekcja-scena { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: clamp(20px, min(2.4cqi, 3.6dvh), 44px);
  padding: clamp(24px, 3vw, 56px) clamp(24px, 5vw, 96px); }
.lekcja-glowna:fullscreen .lekcja-scena .slajd-podtytul { font-size: clamp(24px, min(3.2cqi, 4.6dvh), 56px); }
.lekcja-glowna:fullscreen .slajd-nawigacja { flex: none; margin: 0; }
.lekcja-glowna:fullscreen .lekcja-stopka { display: none; }
.lekcja-scena { position: relative; display: flex; flex-direction: column; margin: 0; background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--promien); box-shadow: var(--cien); min-height: max(420px, calc(100dvh - 300px));
  padding: clamp(22px, 2.6vw, 40px) clamp(18px, 3.4vw, 56px); font-size: clamp(17px, 2.3cqi, 25px); line-height: 1.6;
  border-top: 4px solid var(--kolor, var(--akcent)); }
.lekcja-scena h1 { margin: 6px 0 10px; font-family: var(--szeryf); }
.lekcja-scena h3 { font-size: .8em; margin: 18px 0 6px; }
.lekcja-scena .slajd-podtytul { margin: 6px 0 14px; padding-bottom: 8px; font-size: clamp(21px, 3.2cqi, 34px); border-bottom: 1px solid var(--linia); font-family: var(--szeryf); }
.slajd-gora { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; color: var(--tekst-2);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lekcja-scena > .slajd-tresc { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px; }
.lekcja-scena.rozgrzewka { background: color-mix(in srgb, var(--akcent-jasny) 55%, var(--karta)); }
.lekcja-scena.rozgrzewka .slajd-tresc ol { font-size: 1.12em; display: grid; gap: 10px; }
.scena-slajdu { align-items: center; text-align: center; min-height: max(300px, calc(100cqi * 9 / 16)); }
.scena-slajdu > .slajd-nr { position: absolute; left: 2.2cqi; top: 1.8cqi; font-size: max(11px, 1.5cqi); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
/* W układzie, pod adnotacjami (przypięty do dołu sceny nachodził na nie przy wysokich slajdach i w pełnym ekranie). */
.scena-slajdu > .slajd-czesc { margin-top: max(6px, 1cqi); font-size: max(11px, 1.5cqi); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.scena-slajdu > h2.slajd-dzial { margin: 0; font-size: max(24px, 4.4cqi); line-height: 1.2; font-family: var(--szeryf); }
.scena-slajdu > .slajd-pod { margin: .6cqi 0 0; font: 400 max(16px, 2.3cqi)/1.3 var(--bez); }
.scena-slajdu > .slajd-pod small { font-size: .78em; }
.scena-slajdu > .slajd-tresc { width: 100%; max-width: 78cqi; justify-content: center; gap: 2.4cqi; padding: 2.4cqi 0; }
.scena-slajdu .slajd-tresc p { margin: 0; }
.scena-slajdu .slajd-tresc .przypis { font-size: .78em; color: var(--tekst-2); }
.scena-slajdu .slajd-tresc .wyliczenie-nr { font-variant-numeric: tabular-nums; }
.scena-slajdu .slajd-tresc :is(ul, ol) { text-align: left; margin: 0 auto; }
.scena-slajdu .slajd-tresc table { margin: 0 auto; border-collapse: collapse; font-size: .92em; text-align: left; }
.scena-slajdu .slajd-tresc th, .scena-slajdu .slajd-tresc td { border: 1px solid var(--linia); padding: .3em .8em; }
.scena-slajdu .slajd-tresc th { background: var(--karta-2); }
.pojecie { font-weight: 600; }
.pojecie.p1 { color: var(--pojecie-1); } .pojecie.p2 { color: var(--pojecie-2); } .pojecie.p3 { color: var(--pojecie-3); }
[data-poziom="wejsciowka"] { --p: var(--wejsciowka); }
[data-poziom="kolokwium"] { --p: var(--kolokwium); }
.pojecie-adnotacja { --p: var(--tekst-2); display: inline-grid; place-items: center; margin-left: .12em; padding: 0 .1em; border: 0;
  background: none; color: var(--p); font-size: 1.05em; line-height: 1; vertical-align: -.1em; cursor: pointer; border-radius: 4px; }
.slajd-adnotacje { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: max(13px, 1.35cqi); color: var(--tekst-2); }
.adnotacja-ikona { --p: var(--tekst-2); display: inline-flex; gap: 6px; align-items: baseline; padding: .35em .9em; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--p) 55%, var(--linia)); background: color-mix(in srgb, var(--p) 10%, var(--karta));
  color: var(--tekst); font-size: inherit; text-align: left; }
.adnotacja-ikona .svg { align-self: center; color: var(--p); }
@media (hover: hover) and (pointer: fine) { .adnotacja-ikona:hover { border-color: var(--p); } }
.slajd-nawigacja { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.slajd-nawigacja [data-krok] { min-width: 56px; justify-content: center; }
.slajd-nawigacja [data-krok="1"] { margin-left: auto; }
.slajd-licznik { color: var(--tekst-2); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 4.5em; }
.idz-do-slajdu label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tekst-2); }
.idz-do-slajdu input { width: 4.5em; padding: 4px 6px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karta); }
.lekcja-stopka { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 10px 0 0; font-size: 14px; }
.lekcja-stopka small { color: var(--tekst-2); }
.lekcja-start { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lekcja-cele { margin: 0; padding-left: 1.2em; }
.lekcja-cele li { margin: 4px 0; }
.lekcja-slowniczek { margin: 16px 0; font-size: .85em; }
.lekcja-slowniczek summary { cursor: pointer; font-weight: 600; }
.lekcja-slowniczek dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; font-size: 14px; }
.lekcja-slowniczek dt { font-weight: 700; } .lekcja-slowniczek dd { margin: 0; }
.lekcja-plan { display: grid; gap: 8px; padding-left: 26px; margin: 0; }
.lekcja-plan li { padding: 6px 10px; border-radius: 8px; }
.lekcja-plan li.biezacy { background: var(--akcent-jasny); font-weight: 600; }
.lekcja-plan li small { display: block; color: var(--tekst-2); font-weight: 400; font-size: .8em; }
.adnotacja-okno { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--linia);
  border-top: 5px solid var(--p); border-radius: var(--promien); background: var(--karta); color: var(--tekst); box-shadow: var(--cien); }
.adnotacja-okno[open] { display: flex; }
.adnotacja-okno::backdrop { background: rgb(10 12 11 / .55); }
.adnotacja-wnetrze { position: relative; flex: 1; overflow-y: auto; padding: 16px 22px 20px; }
.adnotacja-gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.adnotacja-wnetrze h2 { margin: 8px 0 4px; font-size: clamp(20px, 4vw, 24px); }
.adnotacja-wnetrze p { max-width: 68ch; }
.poziom-etykieta { display: inline-flex; gap: 4px; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--p); background: color-mix(in srgb, var(--p) 14%, var(--karta)); }
.pytania-lista { padding-left: 22px; display: grid; gap: 18px; margin: 0; font-size: .8em; }
.pytanie-kontrolne > p { margin: 0 0 8px; font-weight: 600; }
.pytania-lista .opcje li { display: flex; gap: 6px; align-items: stretch; }
.pytania-lista .opcja { flex: 1; padding: 7px 12px; font-size: 15px; }
.opcja.wybrana { border-color: var(--akcent); background: var(--akcent-jasny); }
.opcje li.skreslona .opcja { text-decoration: line-through; opacity: .55; }
.skresl { flex: none; width: 36px; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); cursor: pointer; color: var(--tekst-2); display: grid; place-items: center; }
.pytanie-wyjasnienie { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 15px; }
.pytanie-wyjasnienie.dobrze { background: var(--dobrze-tlo); } .pytanie-wyjasnienie.zle { background: var(--zle-tlo); }
.pytania-wynik { font-size: 18px; margin: 0 0 10px; }
@media (max-width: 860px) {
  .lekcja-spis-przycisk { display: inline-flex; }
  .lekcja-uklad { grid-template-columns: minmax(0, 1fr); }
  .lekcja-drzewo { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); max-height: none; border-radius: 0;
    transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .spis-otwarty .lekcja-drzewo { transform: none; visibility: visible; }
  .lekcja-zaslona:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: rgb(10 12 11 / .45); }
}
@media (max-width: 600px) {
  .lekcja-scena { padding: 18px 16px; min-height: calc(100dvh - 300px); font-size: 16.5px; }
  .lekcja-scena > .slajd-tresc { justify-content: flex-start; }
  .scena-slajdu { min-height: calc(100dvh - 300px); padding: 28px 16px 26px; }
  .scena-slajdu > .slajd-tresc { flex: none; max-width: none; gap: 14px; padding: 16px 0; }
  .scena-slajdu > .slajd-nr { left: 12px; top: 8px; }
  .idz-do-slajdu { display: none; }
}
/* Lekcja WNL bez trybu pełnego ekranu: widok wychodzi poza .oslona (1120 px) i na komputerze wypełnia okno.
   Nagłówek materiału jest kompaktowy, układ ma wysokość okna pod paskiem portalu, slajd zajmuje resztę
   (dłuższy slajd przewija się wewnątrz sceny, strona nie przewija się). Krój rośnie z szerokością slajdu (cqi),
   ale nie ponad wysokość okna (dvh). Telefon i tablet pionowo (do 860 px) zostają przy układzie przewijanym. */
main.oslona:has(> .widok-lekcji), body:has(main > .widok-lekcji) .naglowek .oslona { max-width: none; padding-inline: clamp(16px, 2vw, 40px); }
@media (min-width: 861px) and (min-height: 560px) {
  main.oslona:has(> .widok-lekcji) { padding-top: 12px; padding-bottom: 12px; }
  .widok-lekcji { display: flex; flex-direction: column; height: calc(100dvh - 57px - 24px); }
  .widok-lekcji > .okruszki { margin-bottom: 4px; }
  .widok-lekcji > .mat-glowa { flex-wrap: nowrap; align-items: center; margin-bottom: 10px; }
  .widok-lekcji > .mat-glowa > div:first-child { min-width: 0; }
  .widok-lekcji > .mat-glowa h1 { font-size: 20px; margin: 0 0 2px; max-width: none; }
  .widok-lekcji > .mat-glowa p { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .widok-lekcji .tryby { flex: none; }
  .widok-lekcji .tryby button { padding: 5px 12px; font-size: 14px; }
  .widok-lekcji > #tryb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .widok-lekcji .lekcja-okruszki { display: none; }
  .widok-lekcji .lekcja-uklad { flex: 1 1 auto; min-height: 0; margin-top: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 16px; }
  .widok-lekcji .lekcja-drzewo { position: static; max-height: none; min-height: 0; }
  .widok-lekcji .lekcja-glowna:not(:fullscreen) { display: flex; flex-direction: column; min-height: 0; }
  .widok-lekcji .lekcja-glowna:not(:fullscreen) .lekcja-scena { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    font-size: clamp(17px, min(2cqi, 2.6dvh), 30px); }
  .widok-lekcji .lekcja-glowna:not(:fullscreen) .lekcja-scena .slajd-podtytul { font-size: clamp(21px, min(2.8cqi, 3.6dvh), 40px); }
  .widok-lekcji .lekcja-glowna:not(:fullscreen) .scena-slajdu { min-height: 0; }
  .widok-lekcji .slajd-nawigacja { flex: none; margin-top: 10px; }
  .widok-lekcji .lekcja-stopka { flex: none; margin-top: 6px; }
}

/* Pliki z etykietą rodzaju */
.etykieta-rodzaju { color: var(--tekst-2); flex: none; }
.etykieta-rodzaju::after { content: " ·"; }
.pliki-tematu { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 4px 0 0 36px; }
@media (max-width: 760px) { .pliki-tematu { margin-left: 0; } }
.forma-zaliczenia { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; color: var(--tekst-2); font-size: 14.5px; }
.forma-zaliczenia .svg { color: var(--akcent); margin-top: 3px; }
.egz-uklad { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.egz-boczny { position: sticky; top: 76px; }
.spis-blokow { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); padding: 8px; }
.spis-blokow > summary { display: none; }
.spis-blokow ol { list-style: none; margin: 0; padding: 0; }
.spis-blokow a { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: 15px; }
.spis-blokow a .nr { min-width: 1.6em; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.spis-blokow a span:nth-child(2) { flex: 1; min-width: 0; }
.spis-blokow a small { color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.spis-blokow a[aria-current="page"] { background: var(--akcent-jasny); color: var(--akcent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .spis-blokow a:not([aria-current]):hover { background: var(--karta-2); } }
.blok-egz { padding: clamp(18px, 3vw, 30px); }
.blok-egz h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em; }
.blok-nr { color: var(--tekst-2); }
.grupa-rodzaju { margin-top: 22px; }
.grupa-rodzaju h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--tekst); }
/* Wiersze plików oddzielone liniami, bez ramki grupy: jedyną ramką jest karta bloku. */
.pliki-grupy { list-style: none; margin: 0; padding: 0; }
.pliki-grupy li + li { border-top: 1px solid var(--linia); }
.wiersz-pliku { display: flex; gap: 12px; align-items: center; padding: 11px 10px; margin: 0 -10px; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: 16px; }
.wiersz-pliku .svg:first-child { color: var(--tekst-2); }
.wiersz-pliku .svg:last-child { margin-left: auto; color: var(--tekst-2); }
.wiersz-pliku .nazwa { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wiersz-pliku .liczba { color: var(--tekst-2); font-size: 14px; white-space: nowrap; }
a.wiersz-pliku:hover { background: var(--karta-2); }
.wiersz-pliku.zablokowany { color: var(--tekst-2); }
/* Nauka w ciągu roku: materiały tematu jako wiersze z egzaminu (≥ 44 px), tematy bez materiałów wygaszone. */
ul.pliki-tematu { display: block; list-style: none; margin: 6px 0 0 36px; padding: 0; }
.pliki-tematu li + li { border-top: 1px solid var(--linia); }
.pliki-tematu .wiersz-pliku { min-height: 44px; }
.wiersz-pliku .etykieta-rodzaju { font-size: 14px; }
.wiersz-pliku.probny { color: var(--probny); }
.temat.bez-plikow .tytul, .temat.bez-plikow .nr { color: var(--tekst-2); opacity: .75; }
@media (max-width: 760px) { ul.pliki-tematu { margin-left: 0; } }
.blok-nawigacja { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.blok-nawigacja .przycisk span { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .egz-uklad { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .egz-boczny { position: static; }
  .spis-blokow > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 15px; }
  .spis-blokow > summary::-webkit-details-marker { display: none; }
  .spis-blokow[open] > summary { border-bottom: 1px solid var(--linia); margin-bottom: 6px; }
  .blok-nawigacja .przycisk { flex: 1; justify-content: center; }
}
.skrot { margin-left: 6px; font: 600 10.5px/1 var(--bez); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--linia); color: var(--tekst-2); background: var(--karta); align-self: center; }
[data-poziom="wejsciowka"] { --p: var(--wejsciowka); }
[data-poziom="kolokwium"] { --p: var(--kolokwium); }

/* ---------- Dodatki powłoki (etap 4, implementacja) ---------- */
.pomin { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; top: -60px; z-index: 50; background: var(--karta); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linia); }
.pomin:focus { top: 8px; }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* Kolory przedmiotów (zamiast style="--kolor:…" z makiety) */
[data-p="fizjologia"] { --kolor: #c0392b; }
[data-p="immunologia"] { --kolor: #2e7d5b; }
[data-p="mikrobiologia"] { --kolor: #6d4c9f; }
[data-p="patofizjologia"] { --kolor: #b5651d; }
[data-p="genetyka"] { --kolor: #1f6fa8; }
[data-p="biologia-molekularna"] { --kolor: #a33b7a; }
[data-p="metodologia"] { --kolor: #4f5b66; }

/* Konto w nagłówku */
.konto-menu { position: relative; }
.konto-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 999px; padding: 2px; }
.konto-menu > summary::-webkit-details-marker { display: none; }
.konto-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 6px; display: grid; gap: 2px; box-shadow: var(--cien); }
.konto-menu .menu .drobny { padding: 6px 10px; margin: 0; overflow-wrap: anywhere; }
.konto-menu .menu a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--tekst); text-decoration: none; }
.konto-menu .menu a:hover { background: var(--karta-2); }
a.przycisk { text-decoration: none; }

/* Komunikaty o stanie (logowanie, urządzenie, dostęp, limity) */
.komunikat { padding: 24px; max-width: 640px; margin: 24px auto; }
.komunikat > .svg { width: 30px; height: 30px; color: var(--akcent); }
.komunikat h1 { font-size: 22px; margin: 8px 0; }
.komunikat p { margin: 0 0 12px; }
.komunikat .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.komunikat.ostrzezenie > .svg { color: var(--kolokwium); }
.ladowanie { color: var(--tekst-2); padding: 24px 0; }

/* Urządzenia */
.urzadzenia { list-style: none; margin: 0 0 16px; padding: 0; }
.urzadzenia li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.urzadzenia li + li { border-top: 1px solid var(--linia); }
.urzadzenia .opis { display: flex; gap: 12px; align-items: center; min-width: 0; }
.urzadzenia .opis .svg { width: 24px; height: 24px; color: var(--tekst-2); }
.urzadzenia .opis b { display: block; }
.urzadzenia .opis span { font-size: 14px; color: var(--tekst-2); }
.biezace-znacznik { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--akcent-jasny); color: var(--akcent); font-weight: 600; }

/* Ciągły dokument (tryb Tekst i Pytania egzaminacyjne) */
.artykul { padding: clamp(20px, 4vw, 44px) clamp(16px, 5vw, 56px); font-size: 18.5px; line-height: 1.7; }
.artykul h2, .artykul h3, .artykul h4, .artykul h5, .artykul h6 { letter-spacing: -.01em; }
.artykul h2 { font-size: 24px; margin: 0 0 14px; }
.artykul h3 { font-size: 20px; margin: 28px 0 8px; }
.artykul h4, .artykul h5, .artykul h6 { font-size: 18.5px; margin: 22px 0 6px; }
.artykul p, .artykul ul, .artykul ol, .artykul dl, .artykul blockquote { margin: 0 0 14px; max-width: 68ch; }
.artykul li { margin: 3px 0; }
.artykul table { border-collapse: collapse; font-size: 15.5px; display: block; overflow-x: auto; max-width: 100%; margin: 0 0 16px; }
.artykul th, .artykul td { border: 1px solid var(--linia); padding: 7px 10px; text-align: left; vertical-align: top; }
.artykul th { background: var(--karta-2); }
/* ---------- Tabele w tekście na telefonie (audyt UI, pkt 4) ----------
   dokument.js (owinTabele) wkłada każdą tabelę trybu „Tekst”, pytań egzaminacyjnych i wyjaśnień quizu
   do .tabela-przewijana. Przewija się pojemnik, a tabela wraca do zwykłego układu tabeli, więc na wąskim ekranie
   może dostać minimalną szerokość zależną od liczby kolumn zamiast ściskać komórki do 2–3 słów w wierszu.
   Cień przy krawędzi, za którą jest dalsza część tabeli, bez JS: warstwy tła „local” (w kolorze tła pod tabelą,
   --tlo-tabeli) przesuwają się z treścią i zakrywają cienie „scroll” na początku i końcu przewijania.
   Tabela, która się mieści (komputer), nie przewija się, więc cienia nie widać i wygląda jak dotąd. */
.tabela-przewijana {
  --tlo-tabeli: var(--karta);
  --cien-tabeli: color-mix(in srgb, var(--tekst) 32%, transparent);
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 0 16px;
  background:
    linear-gradient(to right, var(--tlo-tabeli) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--tlo-tabeli) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cien-tabeli), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cien-tabeli), transparent) right / 14px 100% no-repeat scroll; }
:is(.callout, .metryczka blockquote, .wyjasnienie) .tabela-przewijana { --tlo-tabeli: var(--karta-2); }
.ramka .tabela-przewijana { --tlo-tabeli: color-mix(in srgb, var(--kolokwium) 8%, var(--karta)); }
.tabela-przewijana > table { display: table; overflow: visible; max-width: none; margin: 0; border-collapse: collapse; }
.tabela-przewijana > table :is(th, td) { border: 1px solid var(--linia); padding: 7px 10px; text-align: left; vertical-align: top; }
.tabela-przewijana > table th { background: var(--karta-2); }
@media (max-width: 700px) {
  /* Ok. 11–12em na kolumnę (przy kroju tabeli ok. 15,5 px: 3 kolumny ≈ 530 px, 4 ≈ 620 px, 5+ ≈ 715 px);
     tabela dwukolumnowa mieści się na ekranie bez minimum. */
  .tabela-przewijana > table:has(tr > :nth-child(3)) { min-width: 34em; }
  .tabela-przewijana > table:has(tr > :nth-child(4)) { min-width: 40em; }
  .tabela-przewijana > table:has(tr > :nth-child(5)) { min-width: 46em; }
  .tabela-przewijana > table :is(th, td) { padding: 6px 8px; }
}
.artykul details.schemat { margin: 12px 0; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta-2); }
.artykul details.schemat > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 14px; }
.artykul details.schemat > summary small { font-weight: 400; color: var(--tekst-2); }
.artykul details.schemat > pre { margin: 0; border-top: 1px solid var(--linia); border-radius: 0 0 8px 8px; }
.artykul pre { font-size: 13.5px; line-height: 1.4; overflow-x: auto; background: var(--karta-2); padding: 12px; border-radius: 8px; }
.artykul svg { max-width: 100%; height: auto; }
/* Schematy SVG z pipeline'u kompendiów (<figure class="schemat">). czysty_html.py usuwa atrybut style, więc szerokość,
   krój i podpis daje ten arkusz. Krój systemowy jak w Rok 3 (IBM Plex jest szerszy i rozpychałby tekst w ramkach).
   Na wąskim ekranie rysunek ma stałą minimalną szerokość i przewija się w poziomie zamiast ściskać tekst. */
:is(.artykul, .adnotacja-wnetrze) figure.schemat { margin: 18px 0; padding: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(.artykul, .adnotacja-wnetrze) figure.schemat svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; color: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: normal; }
:is(.artykul, .adnotacja-wnetrze) figure.schemat figcaption { font-size: .82em; line-height: 1.45; color: var(--tekst-2); text-align: center; margin: 8px auto 0; max-width: 60ch; }
@media (max-width: 700px) {
  :is(.artykul, .adnotacja-wnetrze) figure.schemat { padding-bottom: 4px; }
  :is(.artykul, .adnotacja-wnetrze) figure.schemat svg { min-width: 600px; }
  :is(.artykul, .adnotacja-wnetrze) figure.schemat figcaption { position: sticky; left: 0; max-width: calc(100vw - 48px); }
}
/* Callouty Obsidiana: zwykłe (div) i zwijane (details, np. „Schemat w wersji tekstowej” pod rysunkiem). */
.artykul .callout { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--linia); background: var(--karta-2); border-radius: 0 10px 10px 0; max-width: 68ch; }
.artykul .callout > :last-child { margin-bottom: 0; }
.artykul .callout-tytul { font-weight: 700; margin: 0 0 6px; }
.artykul .callout:is(.callout-warning, .callout-caution, .callout-danger, .callout-important) { border-left-color: var(--kolokwium); }
.artykul .callout:is(.callout-tip, .callout-hint, .callout-success) { border-left-color: var(--wejsciowka); }
.artykul .callout:is(.callout-info, .callout-note, .callout-abstract, .callout-summary) { border-left-color: var(--akcent); }
.artykul details.callout { padding: 0; }
.artykul details.callout > summary { cursor: pointer; padding: 8px 14px; font-weight: 600; font-size: 14.5px; }
.artykul details.callout > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.artykul details.callout[open] > summary { border-bottom: 1px solid var(--linia); }
.artykul details.callout > :not(summary) { margin: 10px 14px; }
.artykul details.callout > pre { margin: 0; border-radius: 0 0 10px 0; max-width: none; }
/* Metryczka kompendium (przeznaczenie, legenda oznaczeń) na początku pierwszej części. */
.artykul .metryczka { margin: 0 0 22px; padding: 0 0 6px; border-bottom: 1px solid var(--linia); font-size: .9em; color: var(--tekst-2); }
.artykul .metryczka p { margin: 0 0 8px; }
.artykul .metryczka strong { color: var(--tekst); }
.artykul .metryczka blockquote { margin: 8px 0 12px; padding: 8px 12px; border-left: 3px solid var(--akcent); background: var(--karta-2); border-radius: 0 8px 8px 0; }
.artykul a[data-m] { color: var(--akcent); text-decoration: underline; cursor: pointer; }
.artykul mark { background: var(--akcent-jasny); }
.ramka { font-size: 16px; line-height: 1.55; border-left: 4px solid var(--kolokwium); background: color-mix(in srgb, var(--kolokwium) 8%, var(--karta)); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 0 0 16px; max-width: 68ch; }
.porcja + .porcja { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linia); }
.porcja > h2.porcja-tytul { font-size: 24px; }
.porcja > .porcja-tresc h2 { font-size: 20px; margin-top: 22px; }
.porcja.wczytywana .porcja-tresc { min-height: 120px; }
.dociaganie { font-size: 14.5px; color: var(--tekst-2); text-align: center; padding: 18px 0 4px; }
.dociaganie .przycisk { margin-top: 8px; }
.wczesniej { text-align: center; margin: 0 0 18px; }
.koniec-dokumentu { font-size: 14px; color: var(--tekst-2); text-align: center; margin-top: 30px; }
/* ---------- Tryb Tekst: spis treści, postęp czytania, „Na górę” (static/spis-tresci.js; audyt UI, punkt 1) ----------
   Szeroki ekran: spis w pustym lewym marginesie obok kolumny tekstu (szerokość kolumny jak w .kolumna-tekst).
   Wąski: zwijany „Spis treści” nad tekstem. Listy jak drzewo lekcji (.drzewo). */
.porcja > h2.porcja-tytul, .porcja-tresc [data-spis] { scroll-margin-top: 72px; }
.spis-tresci-boczny { display: none; }
.spis-tresci-zwijany { margin: 0 0 14px; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); }
.spis-tresci-zwijany > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; border-radius: var(--promien); }
.spis-tresci-zwijany > summary::-webkit-details-marker { display: none; }
.spis-tresci-zwijany > nav { padding: 0 10px 10px; max-height: 60dvh; overflow-y: auto; }
.spis-tresci { font-size: 14px; }
.spis-tresci .drzewo > li { padding: 2px 0; }
.spis-tresci .spis-pozycja { display: block; width: 100%; text-align: left; padding: 5px 6px; border: 0; border-radius: 6px; background: none;
  color: var(--tekst); font: inherit; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.spis-tresci .spis-pozycja.biezacy { color: var(--akcent); font-weight: 600; }
.spis-tresci .spis-pozycja[aria-current] { background: var(--akcent-jasny); color: var(--akcent); }
@media (hover: hover) and (pointer: fine) { .spis-tresci .spis-pozycja:not([aria-current]):hover { background: var(--karta-2); } }
.spis-podsekcje, .spis-podsekcje ol { list-style: none; margin: 0; padding: 0; }
.spis-podsekcje { display: none; padding-left: 12px; }
.spis-tresci li.otwarta > .spis-podsekcje { display: block; }
.spis-podsekcje .spis-pozycja { font-size: .93em; padding: 3px 6px; }
.spis-podsekcje .spis-pozycja:not([aria-current]) { color: var(--tekst-2); }
.postep-czytania { position: fixed; top: 0; left: 0; z-index: 21; width: 100%; height: 3px; margin: 0; border: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; color: var(--akcent); pointer-events: none; }
.postep-czytania::-webkit-progress-bar { background: transparent; }
.postep-czytania::-webkit-progress-value { background: var(--akcent); }
.postep-czytania::-moz-progress-bar { background: var(--akcent); }
.na-gore { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 15; background: var(--karta); box-shadow: var(--cien); }
.na-gore[hidden], .spis-tresci-zwijany[hidden], .spis-tresci-boczny[hidden] { display: none; }
@media (min-width: 1280px) {
  .spis-tresci-zwijany { display: none; }
  .spis-tresci-boczny:not([hidden]) {
    --margines-tekstu: calc((100vw - clamp(800px, 14.6vw + 630px, 910px)) / 2);
    --szerokosc-spisu: min(300px, calc(var(--margines-tekstu) - 40px));
    display: block; position: fixed; top: 76px; left: calc(var(--margines-tekstu) - var(--szerokosc-spisu) - 24px); z-index: 5;
    width: var(--szerokosc-spisu); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px;
    background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien); font-size: 13.5px; }
}
@media print { .spis-tresci-boczny, .spis-tresci-zwijany, .postep-czytania, .na-gore { display: none !important; } }
@media (max-width: 600px) { .artykul, .kolumna-tekst .artykul { font-size: 17.5px; } }

/* Pytania egzaminacyjne */
.pytania-narzedzia { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 14px; }
.pytania-narzedzia .szukaj { width: min(100%, 420px); }
.pytania-narzedzia .licznik-pytan { font-size: 14px; color: var(--tekst-2); }
.lista-pytan { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pytanie-otwarte + .pytanie-otwarte { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--linia); }
.pytanie-otwarte > h2 { display: flex; gap: 10px; font-size: 19px; margin: 0 0 8px; line-height: 1.35; }
.pytanie-otwarte > h2 .nr { color: var(--tekst-2); font-variant-numeric: tabular-nums; flex: none; min-width: 40px; }
.pytanie-otwarte .pokaz { margin-left: 50px; }
.pytanie-otwarte .odpowiedz { margin: 12px 0 6px 50px; }
@media (max-width: 600px) {
  .pytanie-otwarte .pokaz, .pytanie-otwarte .odpowiedz { margin-left: 0; }
}

/* Okładka trybu w przygotowaniu i stan bez dostępu do przedmiotu */
.informacja { padding: 12px 16px; border-radius: 10px; background: var(--akcent-jasny); margin-bottom: 14px; font-size: 14.5px; }
.informacja p { margin: 0; }
.lista-wykladow { list-style: decimal; }
.okruszki [aria-current] { color: var(--tekst); }

/* ---------- Lekcja WNL i quiz: moduły static/lekcja.js i static/pytania.js (etap 4c) ---------- */
.lekcja-scena[aria-busy="true"] { cursor: progress; }
.lekcja-scena figure { margin: 0; }
.lekcja-scena figcaption { font-size: .7em; color: var(--tekst-2); margin-top: 4px; }
.lekcja-scena svg:not(.svg), .adnotacja-wnetrze svg:not(.svg) { max-width: 100%; height: auto; }
.scena-slajdu .slajd-tresc table, .adnotacja-wnetrze table { display: block; max-width: 100%; overflow-x: auto; }
/* Tabela szersza niż slajd lub okno przewija się w poziomie. Cienie przy krawędziach (tło „local” zakrywa je
   na początku i końcu przewijania) pokazują, że część kolumn jest poza kadrem; na telefonie pasek przewijania jest ukryty. */
.scena-slajdu .slajd-tresc table, .adnotacja-wnetrze table {
  --cien-tabeli: color-mix(in srgb, var(--tekst) 32%, transparent);
  background:
    linear-gradient(to right, var(--karta) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--karta) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cien-tabeli), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cien-tabeli), transparent) right / 14px 100% no-repeat scroll;
  overscroll-behavior-x: contain; }
/* Wąski slajd (telefon): mniejszy krój i odstępy w komórkach, żeby typowa tabela 2–3 kolumn zmieściła się bez przewijania. */
@container (max-width: 600px) {
  .scena-slajdu .slajd-tresc table { font-size: .82em; line-height: 1.4; }
  .scena-slajdu .slajd-tresc th, .scena-slajdu .slajd-tresc td { padding: .35em .45em; hyphens: auto; overflow-wrap: break-word; }
}
.scena-slajdu .slajd-tresc ol + ol { margin-top: -1.4cqi; }
.adnotacja-wnetrze table { border-collapse: collapse; font-size: 15px; margin: 0 0 12px; }
.adnotacja-wnetrze th, .adnotacja-wnetrze td { border: 1px solid var(--linia); padding: 5px 9px; text-align: left; vertical-align: top; }
.adnotacja-wnetrze th { background: var(--karta-2); }
/* Okno adnotacji na telefonie: ciaśniejsze komórki; szersze tabele i tak przewijają się z cieniem przy krawędzi. */
@media (max-width: 600px) {
  .adnotacja-wnetrze table { font-size: 14px; }
  .adnotacja-wnetrze th, .adnotacja-wnetrze td { padding: 4px 7px; }
}
.adnotacja-ikona .skrot { margin-left: 2px; }
.pojecie-adnotacja .svg { width: .9em; height: .9em; }
.skresl[aria-pressed="true"] { color: var(--zle); border-color: var(--zle); }
.pytania-lista .opcja span, .pytanie-kontrolne > p { overflow-wrap: anywhere; }
.pytanie-wyjasnienie a { margin-left: 4px; }
@media (max-width: 600px) {
  .slajd-nawigacja [data-krok] { min-width: 48px; }
  .lekcja-stopka small { display: none; }
}

/* Quiz: filtr obszaru jako grupa przycisków radiowych („pigułki”, jak w panelu admina; bez <select>) */
.wybor { border: 0; margin: 0; padding: 0; min-width: 0; }
.wybor legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 5px; }
.wybor-opcje { display: flex; flex-wrap: wrap; gap: 6px; }
.wybor-opcja { position: relative; display: inline-flex; font-weight: 600; font-size: 14px; cursor: pointer; }
.wybor-opcja input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wybor-opcja span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--linia); border-radius: 999px; background: var(--karta); color: var(--tekst-2); }
.wybor-opcja:hover span { border-color: var(--akcent); color: var(--tekst); }
.wybor-opcja input:checked + span { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); }
.wybor-opcja input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.quiz-filtry { align-items: flex-end; }
.przelacznik { cursor: pointer; min-height: 34px; }
.przelacznik input { width: 18px; height: 18px; accent-color: var(--akcent); }
.pytanie-karta[aria-busy="true"] { cursor: progress; }
.pytanie-tresc p { margin: 0 0 8px; }
.opcja span { min-width: 0; overflow-wrap: anywhere; }
.wyjasnienie-tresc { margin-top: 4px; }
.wyjasnienie-tresc p { margin: 0 0 6px; }
.pytanie-przyciski { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Zgłoszenia błędów (etap 8b) ---------- */
/* Zgłoś błąd (audyt UI, punkt 2). Kolor tekstu bez przezroczystości: --tekst-2 i --akcent mają ≥ 4,5:1 na --karta
   w obu motywach. Przy myszy (hover + pointer: fine) przycisk przy akapicie/tabeli/schemacie (.zglos-element) jest
   niewidoczny, dopóki blok nie jest wskazany albo przycisk/blok nie ma fokusu; zostaje w DOM i w kolejności
   tabulacji (tylko opacity). Na ekranie dotykowym zamiast niego jeden przycisk przy nagłówku h2 (.zglos-sekcja). */
.zglos-przycisk { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 9px; margin: 2px 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--tekst-2); font-size: 13px; cursor: pointer; }
.zglos-przycisk:hover, .zglos-przycisk:focus-visible { border-color: var(--linia); background: var(--karta); color: var(--akcent); }
@media (hover: none) { .zglos-przycisk { border-color: var(--linia); background: var(--karta); } }
.zglos-sekcja { display: none; }
@media (hover: hover) and (pointer: fine) {
  .zglos-element { display: flex; width: fit-content; min-height: 24px; padding: 1px 8px; margin: -10px 0 4px; font-size: 12.5px; opacity: 0; transition: opacity .15s ease .35s; }
  .zglos-element:hover, .zglos-element:focus, .zglos-element:focus-visible,
  :hover + .zglos-element, :focus-within + .zglos-element { opacity: 1; transition-delay: 0s; }
}
@media not all and (hover: hover) and (pointer: fine) {
  .zglos-element { display: none; }
  .zglos-sekcja { display: flex; width: fit-content; min-height: 44px; padding: 6px 14px; margin: -4px 0 12px; font-size: 14px; }
}
.zgloszenie-formularz > * { flex-shrink: 0; }
.zgloszenie-zawezenie .wybor-opcje { flex-direction: column; flex-wrap: nowrap; max-height: 190px; overflow-y: auto; padding: 3px; }
.zgloszenie-zawezenie .wybor-opcja span { width: 100%; min-height: 44px; border-radius: 10px; font-weight: 400; overflow-wrap: anywhere; }
.zgloszenie-okno { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--linia); border-radius: 16px; background: var(--karta); color: var(--tekst); }
.zgloszenie-okno::backdrop { background: rgb(10 12 14 / .45); }
.zgloszenie-formularz { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: calc(100vh - 26px); }
.zgloszenie-formularz h2 { margin: 0; font-size: 22px; }
.zgloszenie-formularz label { font-weight: 600; font-size: 14px; }
.zgloszenie-formularz textarea, .zgloszenie-formularz input[type="text"] { width: 100%; padding: 9px 11px; border: 1px solid var(--linia); border-radius: 10px; background: var(--karta); color: var(--tekst); font: inherit; }
.zgloszenie-fragment { margin: 0; padding: 9px 11px; border-left: 3px solid var(--linia); background: var(--karta-2); font-size: 14px; overflow-wrap: anywhere; }
.zgloszenie-blad { margin: 0; color: var(--zle); font-size: 14px; }
.zgloszenie-przyciski { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.zgloszenie-sukces { border-top: 1px solid var(--linia); padding-top: 10px; }
.zgloszenia-lista { list-style: none; margin: 0; padding: 6px 18px; }
.zgloszenie-wiersz { padding: 12px 0; border-bottom: 1px solid var(--linia); }
.zgloszenie-wiersz:last-child { border-bottom: 0; }
.zgloszenie-wiersz p { margin: 4px 0; overflow-wrap: anywhere; }
.zgloszenie-glowa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.zgloszenie-stan { font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--linia); background: var(--karta-2); }
.zgloszenie-stan[data-stan="poprawione"] { border-color: var(--dobrze); background: var(--dobrze-tlo); color: var(--dobrze); }
.zgloszenie-stan[data-stan="odrzucone"], .zgloszenie-stan[data-stan="duplikat"] { color: var(--tekst-2); }
.zgloszenia-pusto { padding: 18px; }
.slajd-zglos, .pytanie-zglos { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }