/* ==========================================================
   ZMIENNE GLOBALNE — Paleta "Nowoczesny Umysł" (zasada 60/30/10)
   ========================================================== */
:root {
    /* 60% - tło */
    --color-bg: #FFFFFF;
    --color-bg-soft: #F9FAFB;
    --color-surface: #FFFFFF;       /* tło kart/kafelków — było wcześniej rozsiane
                                        po ~30 miejscach w pliku jako literalne
                                        #FFFFFF, scalone w jedną zmienną specjalnie
                                        pod tryb ciemny (patrz niżej) */

    /* 30% - tekst i nagłówki */
    --color-text: #1F2937;
    --color-heading: #1E3A8A;       /* UWAGA: reużywane też jako kolor granatowej
                                        obwódki/cienia w neubrutalizmie (patrz
                                        .content-card itp.) — w trybie ciemnym
                                        celowo rozjaśnione, żeby obwódka nadal
                                        odcinała się od ciemnego tła zamiast w nie
                                        wtapiać */

    /* 10% - akcenty */
    --color-accent: #06B6D4;        /* turkus - linki, wskazówki */
    --color-accent-bg: #ECFEFF;     /* tło ramek wskazówek */
    --color-cta: #FBBF24;           /* żółty - przyciski zakupu */
    --color-cta-hover: #F59E0B;

    /* pomocnicze */
    --color-border: #E5E7EB;
    --color-grid: #EEF2FF;          /* delikatne linie "kartki w zeszycie" */
    --color-hero-bg: #F9FAFB;

    /* semantyczne (błędy/sukcesy/tekst pomocniczy w kartach artykułów) */
    --color-error: #EF4444;         /* czerwony - "źle" w mistake-box, tabelkach */
    --color-success: #10B981;       /* zielony - "dobrze" w mistake-box, tabelkach */
    --color-muted: #6B7280;         /* szary - breadcrumbs, podpisy, drobny druk */

    --radius: 14px;
    --shadow: 0 4px 16px rgba(30, 58, 138, 0.08);
    --max-width: 1160px;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* ==========================================================
   TRYB CIEMNY — WYŁĄCZNIE NA ŻYCZENIE, nigdy automatycznie.
   Jedna ścieżka włączenia: :root[data-theme="dark"], czyli jawny wybór
   przełącznikiem 🌙/☀️ w nagłówku (assets/js/theme-toggle.js), zapisany
   w localStorage pod kluczem `zdasz_theme`.

   BYŁ tu też blok @media (prefers-color-scheme: dark), który włączał
   ciemny motyw każdemu, kto ma ciemny motyw w systemie. USUNIĘTY na
   wyraźną prośbę użytkownika: pierwsze wejście na stronę ma ZAWSZE
   pokazać jasne tło, niezależnie od ustawień systemu. Nie przywracaj go
   bez ponownego ustalenia — sama paleta nic na tym nie straciła, bo obie
   listy zmiennych były identyczne (15 zmiennych, co do wartości).

   Early-return w <head> (patrz includes/header.php) ustawia atrybut
   data-theme PRZED pierwszym renderowaniem strony, żeby uniknąć
   "mignięcia" jasnym motywem u kogoś, kto wcześniej wybrał ciemny.
   ========================================================== */
:root[data-theme="dark"] {
    --color-bg: #0F172A;
    --color-bg-soft: #16213A;
    --color-surface: #1E293B;
    --color-text: #E2E8F0;
    --color-heading: #93C5FD;
    --color-accent: #22D3EE;
    --color-accent-bg: #083344;
    --color-cta: #FBBF24;
    --color-cta-hover: #FCD34D;
    --color-border: #334155;
    --color-grid: #1E293B;
    --color-hero-bg: #16213A;
    --color-error: #F87171;
    --color-success: #34D399;
    --color-muted: #94A3B8;
}

/* ==========================================================
   RESET / BASE
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ==========================================================
   DOSTĘPNOŚĆ — skip-link + widoczny fokus klawiaturowy
   ========================================================== */

/* Link "Przejdź do treści" — niewidoczny, dopóki nie dostanie fokusu
   (Tab jako pierwszy klawisz na stronie). Pozwala pominąć całe menu
   nawigacyjne komuś poruszającemu się wyłącznie klawiaturą/czytnikiem
   ekranu, zamiast przeklikiwać 6 pozycji nav + wyszukiwarkę za każdym
   razem. Pozycjonowanie poza ekranem (nie display:none — element musi
   zostać "fokusowalny") zamiast ukrywania widocznością. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 1000;
    background: var(--color-heading);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
}

/* Widoczny fokus na WSZYSTKICH interaktywnych elementach — bez tego
   nawigacja samą klawiaturą (Tab) nie pokazuje, na czym aktualnie
   "stoi" fokus. :focus-visible (nie zwykłe :focus) — wyświetla się
   TYLKO przy nawigacji klawiaturą, nie przy zwykłym kliknięciu myszką,
   żeby nie dokładać wizualnego szumu tam, gdzie nikt na klawiaturę
   nie patrzy. Kilka miejsc w kodzie ma już `outline: none` przy :focus
   (patrz np. .cw-luka-input) — tam fokus i tak jest widoczny przez
   zmianę koloru obramowania, więc nie koliduje z tą regułą.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 16px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* Odstęp między sekcjami artykułu — spójny w całej bazie 129 artykułów,
   bo .article-main jest wspólnym wrapperem treści w każdym z nich. */
.article-main h2 { margin-top: 44px; }
.article-main h3 { margin-top: 28px; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.logo {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-heading);
    text-decoration: none;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.88rem;
}

.main-nav a:hover { color: var(--color-accent); text-decoration: none; }

.search-wrap { position: relative; width: 210px; flex-shrink: 0; }

.search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
}

.search-input:focus { border-color: var(--color-accent); }

.search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
}

.search-results.active { display: block; }

.search-results a {
    display: block;
    padding: 10px 14px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: var(--color-accent-bg); text-decoration: none; }

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-heading);
    font-size: 1.5rem;
    line-height: 1;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

.theme-toggle-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--color-heading);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.theme-toggle-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--color-heading);
}

/* ==========================================================
   HERO + KAFELKI — połączone w jedną sekcję, dominują 1. ekran
   ========================================================== */
.hero-tiles {
    background: var(--color-hero-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 56px 0 64px;
}

@media (min-height: 700px) {
    .hero-tiles {
        min-height: 90vh;
        display: flex;
        align-items: center;
    }
    .hero-tiles .container { width: 100%; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-cta);
    color: #1F2937;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transform: rotate(-2deg);
    box-shadow: 3px 3px 0 rgba(31, 41, 55, 0.18);
    margin-bottom: 26px;
}

.hero-centered {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.hero-centered h1 {
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.hero-centered p.lead {
    max-width: 480px;
    margin: 16px auto 28px;
    font-size: 1rem;
    color: var(--color-text);
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Równa szerokość obu przycisków — inaczej odstęp między nimi wypada
   obok osi strony (na której leży szczelina między kafelkami niżej).
   Przezroczysta ramka na CTA wyrównuje wysokość z .btn-outline (1px). */
.hero-actions .btn {
    min-width: 190px;
    text-align: center;
}
.hero-actions .btn-cta { border: 1px solid transparent; }

/* --- Sygnatura wizualna: kursywa + dwukolorowe podkreślenie (tekst/kreska) --- */
.underline-accent {
    font-style: italic;
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-cta);
    text-decoration-thickness: 8px;
    text-underline-offset: 9px;
    text-decoration-skip-ink: none;
}

/* --- Chip w tekście lead, np. wokół "CKE" --- */
.stat-highlight {
    background: var(--color-heading);
    color: #FFFFFF;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-style: normal;
}

/* --- Karta z mini-quizem — zachowana w CSS, nieużywana na landingu,
       przyda się np. w artykule lub w innym miejscu --- */
.quiz-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow);
    max-width: 380px;
}

.quiz-card-holes {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.quiz-card-holes span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-hero-bg);
    border: 1px solid var(--color-border);
}

.quiz-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.quiz-question {
    font-size: 1.05rem;
    color: var(--color-heading);
    font-weight: 600;
    margin-bottom: 18px;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--color-text);
}

.quiz-option.is-correct {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-heading);
    font-weight: 600;
}

.quiz-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-option.is-correct .quiz-dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.quiz-option.is-correct .quiz-dot::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}

.quiz-footer-link {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}

/* ==========================================================
   KAFELKI GŁÓWNE (E8 / Matura)
   ========================================================== */
.main-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .main-tiles { grid-template-columns: 1fr; }
}

.tile {
    --tile-accent: var(--color-accent);
    --tile-accent-bg: var(--color-accent-bg);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 14px;
    padding: 30px;
    box-shadow: 6px 6px 0 var(--tile-accent);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
}

.tile--matura {
    --tile-accent: var(--color-cta);
    --tile-accent-bg: #FEF3C7;
}

@media (max-width: 720px) {
    .tile { padding: 26px; }
}

.tile:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--tile-accent);
    text-decoration: none;
}

.tile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--tile-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.tile .tile-eyebrow {
    background: var(--tile-accent-bg);
    color: var(--color-heading);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 6px;
}

.tile h3 {
    color: var(--color-heading);
    font-size: 1.45rem;
    margin: 0 0 10px;
}

.tile p { color: var(--color-text); font-size: 0.98rem; flex: 1; margin-bottom: 22px; }

.tile-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    background: var(--tile-accent-bg);
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-heading);
}

.tile-link-secondary {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6B7280;
}

.tile-link-secondary:hover {
    color: var(--color-heading);
}

/* Mniejsze kafelki pod E8/Maturą na stronie głównej — prowizoryczny skrót
   do reszty nawigacji (Baza wiedzy, Ćwiczenia, Matura ustna, Gry, Plan
   nauki, Kalendarz, Najczęstsze błędy, Glosariusz, E-booki), żeby cała
   oferta była widoczna od razu na landing page, nie tylko w nav/stopce. */
.mini-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 20px auto 0;
}

@media (max-width: 720px) {
    .mini-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
    .mini-tiles { grid-template-columns: 1fr; }
}

.mini-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 10px;
    padding: 12px 16px;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--color-accent);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mini-tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-accent);
    text-decoration: none;
}

.mini-tile--cta { box-shadow: 4px 4px 0 var(--color-cta); }
.mini-tile--cta:hover { box-shadow: 6px 6px 0 var(--color-cta); }

.mini-tile-icon { font-size: 1.25rem; flex-shrink: 0; }

.mini-tile-label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-heading);
    line-height: 1.2;
}

/* ==========================================================
   SEKCJA A-Z (baza wiedzy) — "szybka powtórka"
   ========================================================== */
.az-section {
    padding: 56px 0;
    /* Zeszyt w linię (same poziome kreski) — celowo NIE kratka */
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px);
    background-size: 100% 32px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Limit szerokości tylko na akapicie — nagłówek "Szybka powtórka: Baza
   wiedzy A–Z" potrzebuje ~530px i przy limicie na całym bloku łamał się
   na dwa wiersze. */
.az-section .section-head {
    text-align: center;
    margin: 0 auto;
}

.az-section .section-head p {
    color: #6B7280;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.az-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.az-grid a {
    display: inline-block;
    padding: 9px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.92rem;
}

.az-grid a:hover {
    border-color: var(--color-accent);
    color: var(--color-heading);
    background: var(--color-accent-bg);
    text-decoration: none;
}

.az-section .see-all {
    display: block;
    text-align: center;
    margin-top: 22px;
    font-weight: 600;
    font-size: 0.92rem;
}

/* ==========================================================
   NAGŁÓWEK KATEGORII (ikona + tytuł) — /gramatyka, /e8, /matura
   ========================================================== */
.category-block { margin-top: 44px; }
.category-block:first-child { margin-top: 0; }

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.category-header h2 {
    margin: 0;
    font-size: 1.3rem;
    text-align: left;
    max-width: none;
}

/* ==========================================================
   KARTY TEMATÓW — kompaktowa siatka wewnątrz kategorii
   ========================================================== */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.topic-card {
    --tile-accent: var(--color-accent);
    --tile-accent-bg: var(--color-accent-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 190px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 4px 4px 0 var(--tile-accent);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    overflow: hidden;
}

.topic-card--matura {
    --tile-accent: var(--color-cta);
    --tile-accent-bg: #FEF3C7;
}

.topic-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tile-accent);
    text-decoration: none;
}

.topic-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tile-accent-bg);
    color: var(--color-heading);
}

/* Znaczek poziomu CEFR — lewy górny róg kafelka, osobny system od
   E8/Matura/Rozszerzenie (prawy górny róg, .topic-badge powyżej).
   Kolory tej samej skali co w czasownikach nieregularnych
   (🟢🔵🟡🟠🔴), rozszerzone o C2 (🟣) dla gramatyki. */
.topic-badge-cefr {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--color-heading);
}

.topic-badge-cefr--a1 { background: #D1FAE5; color: #065F46; }
.topic-badge-cefr--a2 { background: #DBEAFE; color: #1E40AF; }
.topic-badge-cefr--b1 { background: #FEF3C7; color: #92400E; }
.topic-badge-cefr--b2 { background: #FFEDD5; color: #9A3412; }
.topic-badge-cefr--c1 { background: #FEE2E2; color: #991B1B; }
.topic-badge-cefr--c2 { background: #EDE9FE; color: #5B21B6; }

/* Wiersz z nazwą poziomu WEWNĄTRZ <thead> tabeli czasowników
   nieregularnych — na ekranie zbędny (ten sam tytuł już jest w H2 nad
   tabelą), ale w druku dzięki natywnemu thead powtarza się razem
   z nagłówkiem kolumn na każdej kolejnej stronie, gdy poziom rozciąga
   się na więcej niż jedną kartkę. */
.verb-table-title-row { display: none; }

.topic-title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--color-heading);
    margin: 24px 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-desc {
    font-size: 0.8rem;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px dashed var(--color-border);
}

.topic-footer-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-heading);
}

.topic-arrow {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--color-heading);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.topic-card--soon {
    cursor: default;
    opacity: 0.6;
}

.topic-card--soon:hover {
    transform: none;
    box-shadow: 4px 4px 0 var(--tile-accent);
}

/* ==========================================================
   MODEL Z DYNAMICZNYM FILTREM — przełącznik E8 / Matura
   (słownictwo, docelowo też czasowniki nieregularne)
   ========================================================== */
.filter-toggle {
    display: flex;
    gap: 10px;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}

.filter-btn,
.view-btn,
.tab-btn,
.level-filter-btn,
.vocab-sort-btn,
.vocab-lang-btn,
.fc-dir-btn {
    padding: 10px 18px;
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    background: var(--color-surface);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-main);
    cursor: pointer;
    color: var(--color-heading);
    transition: background .1s ease, color .1s ease;
}

.filter-btn.active,
.view-btn.active,
.tab-btn.active,
.level-filter-btn.active,
.vocab-sort-btn.active,
.vocab-lang-btn.active,
.fc-dir-btn.active {
    background: var(--color-heading);
    color: #FFFFFF;
}

.tabs-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 24px 0 0;
    -webkit-overflow-scrolling: touch;
}

.tabs-row .tab-btn { flex-shrink: 0; font-size: 0.8rem; padding: 9px 14px; }

.tab-panel-box {
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 22px;
    margin-top: -2px;
    background: var(--color-bg-soft);
}

.tab-panel-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.tab-panel-meta span {
    background: var(--color-accent-bg);
    padding: 4px 10px;
    border-radius: 999px;
}

.vocab-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.vocab-table thead { display: none; }

.vocab-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}

.vocab-table tbody tr:last-child { border-bottom: none; }

.vocab-table td {
    width: 50%;
    padding: 14px 0;
    vertical-align: baseline;
}

/* Wyrównanie liczone wg POZYCJI kolumny, nie klasy .vocab-word/
   .vocab-translation — te dwie klasy mogą zamienić się miejscami po
   kliknięciu przełącznika kierunku języka (patrz vocab-filter.js). */
.vocab-table td:first-child { text-align: left; padding-right: 16px; }
.vocab-table td:last-child { text-align: right; padding-left: 16px; }

.vocab-word {
    font-weight: 700;
    color: var(--color-heading);
}

.vocab-word .przyklad {
    display: block;
    font-weight: 400;
    font-style: italic;
    color: #6B7280;
    font-size: 0.85rem;
    margin-top: 3px;
}

.vocab-translation {
    color: var(--color-text);
    font-size: 0.95rem;
}

tr[data-poziom="mr"] .vocab-translation::after {
    content: "Matura";
    display: inline-block;
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #FEF3C7;
    color: var(--color-heading);
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
}

/* ==========================================================
   WIDOK LISTY TEKSTOWEJ — alternatywa dla kafelków
   ========================================================== */
.topic-plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 32px;
}

@media (max-width: 720px) {
    .topic-plain-list { columns: 1; }
}

.topic-plain-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
    break-inside: avoid;
}

.topic-plain-list a {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-plain-list a:hover { color: var(--color-accent); }

.plain-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-heading);
}

.plain-badge--matura { background: #FEF3C7; }

/* .btn.btn-sm, nie samo .btn-sm: ta reguła stoi w pliku PRZED .btn, więc
   przy równej specyficzności .btn ją nadpisywał i "małe" przyciski
   (PDF, fiszki) miały pełny rozmiar. */
.btn.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ==========================================================
   GRA WE FISZKI — stan tylko w pamięci przeglądarki (JS),
   resetuje się przy odświeżeniu strony
   ========================================================== */
.flashcards-wrap {
    max-width: 380px;
    margin: 28px auto 8px;
    text-align: center;
}

/* Przełącznik kierunku fiszek (ang→pl / pl→ang) nad kartą */
.flashcards-direction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
}
.flashcards-direction .controls-group-label { width: 100%; margin: 0; }
.flashcards-direction .fc-dir-btn { padding: 7px 12px; font-size: 0.8rem; }

/* Fiszki — tryb wpisywania (pole + Sprawdź pod kartą). */
.fc-type { max-width: 420px; margin: 14px auto 0; }
.fc-type-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fc-type-row .cw-luka-input { flex: 1 1 100%; text-align: center; font-size: 1.05rem; }
.fc-type-hint { font-size: 0.8rem; color: var(--color-muted); text-align: center; margin: 8px 0 0; }
.fc-type .cw-feedback { text-align: center; margin-top: 0; }
.fc-type .flashcard-controls { margin-top: 10px; }

.flashcards-progress {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 12px;
}

.flashcard {
    perspective: 1200px;
    width: 100%;
    height: 200px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.flashcard.is-flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid var(--color-heading);
    border-radius: 14px;
    padding: 20px;
    background: var(--color-surface);
    box-shadow: 4px 4px 0 var(--color-accent);
}

.flashcard-front {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-heading);
    text-transform: uppercase;
}

.flashcard-back { transform: rotateY(180deg); }

.flashcard-back .word {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-heading);
}

.flashcard-example {
    font-style: italic;
    color: #6B7280;
    font-size: 0.85rem;
    margin-top: 10px;
}

.flashcard-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.btn-judge {
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid;
    cursor: pointer;
    font-family: var(--font-main);
}

.btn-judge--good {
    background: #ECFDF5;
    border-color: #10B981;
    color: #065F46;
}

.btn-judge--good:hover { background: #10B981; color: #FFFFFF; }

.btn-judge--bad {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

.btn-judge--bad:hover { background: #EF4444; color: #FFFFFF; }

.fc-stats-grid {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}

.fc-stat-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-heading);
}

.fc-stat-label {
    display: block;
    font-size: 0.72rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 4px;
}

/* ==========================================================
   DRUK / EKSPORT DO PDF (przycisk wywołuje window.print())
   ========================================================== */
.print-only { display: none; }

/* ==========================================================
   KARTY STATYSTYK EGZAMINU (czas, punkty, poziom, próg)
   ========================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.stat-card {
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    box-shadow: 4px 4px 0 var(--color-accent);
}

.stat-card .stat-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-heading);
}

.stat-card .stat-label {
    display: block;
    font-size: 0.76rem;
    color: #6B7280;
    margin-top: 4px;
}

/* ==========================================================
   KARTY CZĘŚCI ARKUSZA (struktura egzaminu)
   ========================================================== */
.task-part-card {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: var(--color-bg-soft);
}

.task-part-card h4 {
    margin: 0 0 6px;
    color: var(--color-heading);
    font-size: 1.05rem;
}

.task-part-meta {
    font-size: 0.8rem;
    color: #6B7280;
    margin-bottom: 8px;
}

.task-part-card--matura { border-left-color: var(--color-cta); }

/* ==========================================================
   DASHBOARD "FAKTY I LICZBY" (E8 / Matura info) — layout 2-kolumnowy
   ========================================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 780px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mini-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mini-stat-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    overflow: hidden;
}

.mini-stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6B7280;
    text-transform: uppercase;
}

.mini-stat-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--color-heading);
    margin-top: 6px;
}

.mini-stat-value small {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 0.74rem;
    color: #6B7280;
    margin-left: 3px;
}

.mini-stat-icon {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 1.2rem;
    opacity: 0.5;
}

.level-card {
    position: relative;
    background: var(--color-heading);
    border-radius: 12px;
    padding: 22px;
    color: #FFFFFF;
    overflow: hidden;
}

.level-card-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #BFDBFE;
    text-transform: uppercase;
}

.level-card-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    margin: 6px 0 16px;
}

.level-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0 6px 6px 0;
}

.level-card-icon {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 2rem;
    opacity: 0.22;
    line-height: 1;
}

.topics-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}

.topics-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.topics-card-header span { font-size: 1.2rem; }

.topics-card-header h3 {
    font-size: 1rem;
    margin: 0;
    text-align: left;
    max-width: none;
}

.dot-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px 12px 5px 9px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 6px 6px 0;
}

.dot-pill:hover {
    border-color: var(--color-heading);
    color: var(--color-heading);
    text-decoration: none;
}

.dot-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================
   ZAKŁADKI-LEGENDA (kolorowy gradient: granat -> turkus -> żółty)
   Dekoracyjne — wszystkie 5 części i tak są wypisane poniżej,
   kolor zakładki = kolor paska danej części.
   ========================================================== */
.spectrum-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 22px 0 0;
    -webkit-overflow-scrolling: touch;
}

.spectrum-tab {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    border: none;
    font-family: var(--font-main);
}

.spectrum-tab[data-part="sluchanie"] { background: #1E3A8A; }
.spectrum-tab[data-part="funkcje"]   { background: #1663A2; }
.spectrum-tab[data-part="czytanie"]  { background: #0E8CBB; }
.spectrum-tab[data-part="srodki"]    { background: #06B6D4; }
.spectrum-tab[data-part="pisanie"]   { background: var(--color-cta); color: #1F2937; }

.structure-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 28px;
}

.structure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.structure-card-header h3 { margin: 0; text-align: left; max-width: none; font-size: 1.3rem; }
.structure-card-header p { margin: 5px 0 0; font-size: 0.9rem; color: #6B7280; }

.structure-legend {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: #6B7280;
    white-space: nowrap;
}

.structure-legend span { display: inline-flex; align-items: center; gap: 6px; }
.structure-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.structure-list { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }

.structure-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}

.structure-row:last-child { border-bottom: none; }

.structure-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--color-accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.structure-row-body { flex: 1; min-width: 0; }

.structure-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.structure-row-top h4 { margin: 0; font-size: 1.05rem; color: var(--color-heading); }

.structure-row-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-heading);
    background: var(--color-accent-bg);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.structure-row-bar {
    height: 3px;
    width: 44px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 8px 0 10px;
}

.structure-row-body p { margin: 0; font-size: 0.92rem; color: var(--color-text); line-height: 1.55; }

@media print {
    .site-header, .site-footer, .filter-toggle, .flashcards-wrap,
    .ebook-banner, .tutoring-box, .hero-actions, .exam-tip,
    .pdf-export-btn, .pron-btn, .pron-link, .toc-sidebar,
    .cookie-banner, .promo-bar, .exercises-cta,
    .related-grid, h2:has(+ .related-grid),
    .presentation-toggle-btn, .presentation-controls {
        display: none !important;
    }
    .print-only { display: block; margin-bottom: 20px; }
    body { background: none; }

    /* Pomniejszenie druku o 25%, TYLKO dla artykułów gramatyki (.article-layout)
       — świadomie NIE globalnie na <html>. Prawie wszystkie rozmiary w tym
       pliku są w "rem", czyli liczone ZAWSZE względem <html>, niezależnie od
       tego, jak głęboko dany element jest zagnieżdżony — zwykłe font-size na
       .article-layout w ogóle by nie zadziałało na jej potomków. "zoom" to
       jedyna właściwość, która realnie skaluje CAŁĄ zawartość kontenera
       (tekst, odstępy, obramowania) tylko w jego obrębie, nie dotykając
       reszty strony (ćwiczenia, plan nauki, tabele słówek, matura ustna
       zostają bez zmian). Jedyny minus: "zoom" nie jest oficjalnym
       standardem CSS — działa w Chrome/Edge (obsługiwane też coraz szerzej
       w nowszym Firefoksie), w starszym Firefoksie po prostu nie zadziała
       i wydruk zostanie w oryginalnym rozmiarze — ten sam kompromis co
       reszta strony ("nagłówek tabeli powtarza się tylko w Chrome/Edge"). */
    .article-layout { zoom: 75%; }
    /* !important celowo — bez niego przegrywa z późniejszą regułą ekranową
       ".article-layout { display: grid; }" (ta sama specyficzność, niżej
       w pliku — patrz Pułapka #8 w CLAUDE.md). Grid pozostawiony aktywny
       w druku uniemożliwia Chrome poprawną paginację zawartości (pusta
       pierwsza strona, sekcje łamiące się w połowie stron). */
    .article-layout { display: block !important; }

    /* FAQ (<details>) rozwijane w druku PRAWDZIWYM atrybutem [open], nie
       CSS-em — patrz <script> w footer.php (beforeprint/afterprint).
       Przeglądarki chronią stan zamkniętego <details> regułą UA na
       poziomie ważności wyższym niż zwykły "author !important", więc
       żaden override na display/content-visibility w tym miejscu by nie
       zadziałał (sprawdzone: nie działało w Firefoksie). */

    /* Orphaned nagłówek: samo "break-after: avoid" na h2 nie zawsze
       wystarcza w Firefoksie, jeśli następny element (np. pierwszy
       .faq-item) się nie mieści — silnik i tak zostawia nagłówek na
       dole strony. Naprawa dwukierunkowa: pierwszy element po nagłówku
       też dostaje "nie łam się przede mną". */
    h2 + .faq-item, h3 + .faq-item,
    h2 + .content-card, h3 + .content-card,
    h2 + .mistake-box, h3 + .mistake-box {
        break-before: avoid;
        page-break-before: avoid;
    }

    /* Lista słówek w druku: prawdziwa tabela HTML (nie div-y) — dzięki
       temu <thead> (podpis języków, pogrubiony) powtarza się natywnie
       na każdej kolejnej stronie, jeśli wydruk się nie mieści na
       jednej kartce. Węższa (80% szerokości, wyśrodkowana) i idealnie
       symetryczna (table-layout:fixed + stałe 50/50 na kolumny) —
       linia dzieląca językowo zawsze pośrodku, niezależnie od długości
       słów. Bez przykładowych zdań, ikon (ukryte wyżej/przez .no-print)
       i beż odznaki "Matura" — sam suchy tekst. */
    .no-print { display: none !important; }
    .vocab-word .przyklad { display: none !important; }
    tr[data-poziom="mr"] .vocab-translation::after { display: none !important; }
    .vocab-table {
        width: 80%;
        margin: 0 auto;
        table-layout: fixed;
        border-collapse: collapse;
        border-left: 1px solid #9CA3AF;
        border-right: 1px solid #9CA3AF;
        border-top: 1px solid #9CA3AF;
    }
    .vocab-table thead {
        display: table-header-group;
    }
    .vocab-table th {
        width: 50%;
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        padding: 4px 8px;
        border-top: 1px solid #9CA3AF;
        border-bottom: 2px solid #1F2937;
    }
    .vocab-table th:last-child { border-left: 1px solid #9CA3AF; padding-left: 12px; }
    .vocab-table td {
        width: 50%;
        font-size: 12px;
        padding: 3px 8px;
        border-bottom: 1px solid #9CA3AF;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Linia dzieląca języki liczona wg POZYCJI kolumny (last-child), nie
       klasy — dzięki temu zostaje idealnie pośrodku niezależnie od tego,
       czy w danej kolumnie jest akurat słowo, czy tłumaczenie (patrz
       przełącznik kierunku języka na ekranie). */
    .vocab-table td:last-child { border-left: 1px solid #9CA3AF; padding-left: 12px; }
    .vocab-table tr { break-inside: avoid; page-break-inside: avoid; }
    .vocab-word { font-weight: 600; font-size: 12px; text-align: left; }
    .vocab-translation { font-size: 12px; text-align: left; }
    /* Wymuszone left-align (zamiast prawej krawędzi jak na ekranie) —
       ta reguła MUSI celować w te same selektory co ekranowa wersja
       (.vocab-table td:first-child / td:last-child), inaczej przegrywa
       z nią przez niższą specyficzność mimo bycia w @media print. */
    .vocab-table td:first-child,
    .vocab-table td:last-child {
        text-align: left;
    }

    /* Mniej "zmarnowanej" przestrzeni na górze strony 1 — bez nawigacji
       i sidebaru nie potrzeba tego samego oddechu co na ekranie. */
    .container { padding-top: 0 !important; }
    h1 { margin-top: 0 !important; }
    .lead { margin-bottom: 8px !important; }
    .article-layout { margin-top: 8px !important; }
    .article-main > p:first-child { margin-top: 0 !important; }

    /* Węższe odstępy między sekcjami w druku (na ekranie mają być większe,
       ale w PDF-ie to niepotrzebnie zajmuje miejsce na stronie). */
    .article-main h2 { margin-top: 22px !important; }
    .article-main h3 { margin-top: 14px !important; }
    .content-card { margin: 16px 0 !important; }

    /* overflow:hidden na .content-card (potrzebne na ekranie do przycięcia
       dekoracyjnej "plamy" w rogu karty) potrafi psuć liczenie podziału
       stron w silniku druku Chrome — w PDF-ie wyłączamy je. */
    .content-card, .mistake-box, .recap-box { overflow: visible !important; }

    /* Sekcja/tabela nie może się rozdzielić na dwie strony — a nagłówek
       nie może zostać osierocony na dole strony, oddzielony od treści.
       Podwójny zapis (break-inside + page-break-inside) celowo —
       starszy silnik druku Chrome czasem ignoruje samo break-inside.
       WYJĄTEK: .vocab-table (lista słówek), .plan-print-table (plan
       nauki) i .verb-table-card (tabele czasowników nieregularnych,
       30-48 wierszy na poziom) — to tabele z założenia wielostronicowe,
       więc CAŁA tabela/thead/tbody musi MÓC się dzielić między stronami
       (inaczej Chrome próbuje upchnąć ją bez podziału i produkuje puste
       strony); dzielą się tylko wg wierszy (tr niżej, wciąż z
       break-inside:avoid, więc pojedynczy wiersz nadal nie łamie się
       w połowie). */
    .content-card, .mistake-box, .recap-box,
    .structure-card, .task-part-card, .us-zestaw-card,
    table:not(.vocab-table):not(.plan-print-table),
    tr, thead, tbody,
    .article-main li, .karta-pracy-card, .k13-karta-card, .cw-print-list li,
    .poradnik-qa-item, .poradnik-opis, .pd-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* !important celowo — jak przy .plan-print-table wcześniej: bez tego
       reguła powyżej (wyższa specyficzność: dwa :not() + selektor typu)
       wygrywałaby mimo tego override'u. */
    .vocab-table, .vocab-table thead, .vocab-table tbody,
    .plan-print-table, .plan-print-table thead, .plan-print-table tbody,
    .verb-table-card, .verb-table-card table, .verb-table-card thead,
    .verb-table-card tbody {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    /* Wiersz z nazwą poziomu (ukryty na ekranie powyżej) — w druku pokazuje
       się jako część <thead>, więc powtarza się razem z nagłówkiem kolumn
       na każdej kolejnej stronie danego poziomu. */
    .verb-table-title-row {
        display: table-row !important;
    }
    .verb-table-title-row th {
        font-size: 13px;
        text-align: left;
        background: #1F2937 !important;
        color: #FFFFFF !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Każdy KOLEJNY poziom (A2, B1, B2, C1) zaczyna się na nowej stronie —
       poziom A1 zostaje tam, gdzie naturalnie wypadnie po wstępie. Dzięki
       temu żaden poziom nie zaczyna się na stronie, na której kończy się
       jeszcze poprzedni. Klasa .verb-level-section (nie samo
       [data-level-block], które służy też do filtra CEFR na /gramatyka
       i tam NIE ma być dzielone na strony). */
    .verb-level-section:not([data-level-block="a1"]) {
        break-before: page;
        page-break-before: always;
    }

    /* Druk POJEDYNCZEGO poziomu (przycisk "Tylko ten poziom") — JS ustawia
       data-print-level na <body> tuż przed window.print() i zdejmuje po
       zamknięciu okna druku (patrz <script> na dole strony). Reszta
       poziomów znika, a wymuszony podział strony powyżej jest zbędny,
       skoro drukowany jest tylko jeden — bez tego resetu pierwsza strona
       wydruku byłaby pusta. */
    body[data-print-level] .verb-level-section { display: none !important; }
    body[data-print-level="a1"] .verb-level-section[data-level-block="a1"],
    body[data-print-level="a2"] .verb-level-section[data-level-block="a2"],
    body[data-print-level="b1"] .verb-level-section[data-level-block="b1"],
    body[data-print-level="b2"] .verb-level-section[data-level-block="b2"],
    body[data-print-level="c1"] .verb-level-section[data-level-block="c1"] {
        display: block !important;
    }
    body[data-print-level] .verb-level-section {
        break-before: auto !important;
        page-break-before: auto !important;
    }

    h2, h3, h4 {
        break-after: avoid;
        page-break-after: avoid;
    }
    p, li { orphans: 3; widows: 3; }

    /* Plan nauki: prawdziwa tabela w druku (na ekranie ukryta pod
       display:block wyżej) — nagłówek "Plan nauki: Matura — 6 miesięcy"
       powtarza się natywnie na każdej kolejnej stronie wydruku, więc
       zawsze wiadomo, co to za wydrukowana kartka. Każdy tydzień/dzień
       to osobny wiersz — nie łamie się w połowie (patrz tr powyżej). */
    /* !important celowo — reguły "ekranowe" (display:none na thead itd.)
       siedzą w pliku NIŻEJ niż ten blok @media print, więc przy równej
       specyficzności to one wygrywałyby nawet w druku (dokładnie ten sam
       błąd co wcześniej z wyrównaniem tekstu w .vocab-table). */
    .plan-print-table { display: table !important; width: 100%; border-collapse: collapse; }
    .plan-print-table thead { display: table-header-group !important; }
    .plan-print-table tbody { display: table-row-group !important; }
    .plan-print-table tr { display: table-row !important; }
    .plan-print-table td { display: table-cell !important; padding: 0; }
    .plan-print-table th {
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 0 10px;
        border-bottom: 2px solid #1F2937;
    }
    .plan-slot { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================
   PRZEŁĄCZNIK WIDOKU (Kafelki / Lista) i POZIOMU (Podstawa / Rozszerzenie)
   — reużywa stylu .filter-btn / .filter-toggle
   ========================================================== */
.controls-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    margin: 24px 0 8px;
}

/* flex-wrap: grupa "Poziom" na /matura ma 3 przyciski (Podstawowa /
   Rozszerzona / Tylko rozszerzenie) i bez zawijania wychodziła poza
   szerokość ekranu telefonu — .controls-row zawija tylko CAŁE grupy. */
.controls-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.controls-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 4px;
}

/* ==========================================================
   RAMKA WSKAZÓWKI EGZAMINACYJNEJ (turkus)
   ========================================================== */
.exam-tip {
    background: var(--color-accent-bg);
    border-left: 8px solid var(--color-accent);
    border-radius: 8px;
    padding: 18px 20px 18px 24px;
    margin: 24px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.exam-tip::before {
    content: "💡";
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    border: 2px solid var(--color-heading);
}

.exam-tip > div, .exam-tip-body { flex: 1; }

.exam-tip.exam-tip--matura {
    border-left-color: var(--color-cta);
    background: #FEF9E7;
}

.exam-tip.exam-tip--matura::before { background: var(--color-cta); color: #1F2937; }

.exam-tip p:first-child { font-weight: 700; color: var(--color-heading); margin-bottom: 6px; }

/* Wariant ramki: Częste błędy — pełna karta z podwójnym cieniem (jak content-card) */
.mistake-box {
    --card-accent: #EF4444;
    background: #FEF2F2;
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 6px 6px 0 var(--card-accent), 6px 6px 0 2px var(--color-heading);
}

.mistake-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #991B1B;
    margin-bottom: 14px;
    font-size: 1.05rem;
}

.mistake-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 0;
}

.mistake-wrong {
    color: #991B1B;
    font-size: 0.9rem;
    text-decoration: line-through;
    display: block;
}

.mistake-wrong::before { content: "❌ "; text-decoration: none; display: inline; }

.mistake-right {
    color: #065F46;
    font-size: 0.92rem;
    font-weight: 700;
    display: block;
    margin-top: 6px;
}

.mistake-right::before { content: "✅ "; }

.mistake-comment {
    font-size: 0.82rem;
    color: #6B7280;
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

/* Przyciski wymowy przy słówkach */
.pron-btn, .pron-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--color-accent-bg);
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    text-decoration: none;
}

.pron-btn:hover, .pron-link:hover { background: var(--color-accent); }

/* ==========================================================
   ARTYKUŁ — layout ze sticky spisem treści (Wariant 2 + TOC)
   ========================================================== */
.article-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 36px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}

@media (max-width: 860px) {
    .article-layout { grid-template-columns: 1fr; }
    .toc-sidebar { display: none; }
}

.toc-sidebar {
    position: sticky;
    top: 90px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 16px;
}

.toc-sidebar-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7280;
    margin-bottom: 12px;
}

.toc-list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-border); }

.toc-list li { margin: 0; }

.toc-list a {
    display: block;
    padding: 9px 0 9px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 0.96rem;
    color: var(--color-text);
    font-weight: 500;
}

.toc-list a:hover,
.toc-list a.active {
    border-left-color: var(--color-accent);
    color: var(--color-heading);
    font-weight: 700;
    text-decoration: none;
}

.article-main { min-width: 0; }

/* Karta modułowa — uniwersalny wrapper dla bloków treści (tabele, pigułki) */
.content-card {
    --card-accent: var(--color-accent);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 22px;
    margin: 30px 0;
    background: var(--color-surface);
    box-shadow: 6px 6px 0 var(--card-accent), 6px 6px 0 2px var(--color-heading);
    position: relative;
    overflow: hidden;
}

.content-card::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--card-accent);
    opacity: 0.08;
    border-radius: 50%;
    pointer-events: none;
}

.content-card--matura { --card-accent: var(--color-cta); }

.content-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 14px;
    font-size: 1.05rem;
}

.content-card-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--color-heading);
}

/* Tabela w karcie modułowej — żółty nagłówek jak w wybranym wariancie */
.content-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    /* Na wąskich ekranach tabela przewija się poziomo zamiast ściskać
       kolumny do nieczytelności.
       Próg to 768px, NIE 480px: tabela czasowników nieregularnych ma
       4 kolumny i potrzebuje ~460px + 44px paddingu karty. Przy progu
       480px ekrany 481-560px (większy telefon poziomo, mały tablet)
       trafiały na `.content-card { overflow: hidden }` i ostatnia
       kolumna była UCINANA, bez możliwości przewinięcia. */
    .content-card { overflow-x: auto; }
    .content-card table { min-width: 460px; }
}

.content-card th {
    background: var(--color-cta);
    color: #1F2937;
    text-align: left;
    padding: 9px 12px;
    font-weight: 700;
    font-size: 0.82rem;
}

.content-card td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.content-card td:first-child { background: var(--color-bg-soft); font-weight: 700; }

.content-card tr:last-child td { border-bottom: none; }

/* Blok "W pigułce" — obowiązkowy, szybka ściąga na samej górze artykułu */
.nutshell-box {
    background: var(--color-heading);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 20px 0 28px;
}

.nutshell-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #BFDBFE;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
}

.nutshell-formula {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.nutshell-box p { color: #E0E7FF; margin: 4px 0 0; font-size: 0.92rem; }

/* Ściągawka na końcu artykułu — inny akcent niż "W pigułce" (jaśniejszy, bardziej "na później") */
.recap-box {
    background: var(--color-bg-soft);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px 0;
    box-shadow: 4px 4px 0 var(--color-heading), 4px 4px 0 2px var(--color-heading);
}

.recap-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-heading);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.recap-box-header h3 { text-align: left; max-width: none; margin: 0; font-size: 1.05rem; color: var(--color-heading); }
.recap-box ul { margin: 0; padding-left: 20px; }
.recap-box li { margin-bottom: 6px; font-size: 0.92rem; }

/* Etykieta poziomu jako pigułka (nie zwykły tekst) */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-heading);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-top: 6px;
}

/* Checklist wewnątrz karty "Pigułka wiedzy" */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.92rem;
}
.check-list li::before {
    content: "✓";
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
}
.content-card--matura .check-list li::before { color: var(--color-cta); }

/* Słowa-klucze jako pigułki w ramce wskazówki */
.keyword-pill {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 6px;
    margin: 0 2px;
}

/* Częste błędy - dwie kolumny obok siebie */
.mistake-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .mistake-grid { grid-template-columns: 1fr; }
}

/* Ściągawka jako zwarta siatka krótkich pól */
.recap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.recap-cell {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.recap-cell-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.recap-cell-value {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-heading);
}

/* Karty powiązanych tematów (zamiast zwykłych pigułek-linków) */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.related-card {
    --card-accent: var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* min-height, nie height: długi tytuł („Can – umiejętności, prośby
       i pozwolenia”) wychodził poza sztywne 120px. Siatka wyrównuje
       wysokość kafelków w rzędzie, więc rząd dalej wygląda równo. */
    min-height: 120px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 5px 5px 0 var(--card-accent), 5px 5px 0 2px var(--color-heading);
    transition: transform .15s ease, box-shadow .15s ease;
}

.related-card:nth-child(even) { --card-accent: var(--color-heading); }

.related-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--card-accent), 7px 7px 0 2px var(--color-heading);
    text-decoration: none;
}

.related-card-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--card-accent);
    margin-bottom: 4px;
}

.related-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.related-card-title {
    display: block;
    font-weight: 700;
    color: var(--color-heading);
    font-size: 1rem;
    font-family: var(--font-display);
}

.related-card-arrow { font-size: 1.1rem; color: var(--color-heading); flex-shrink: 0; }

/* ==========================================================
   DROBNE NIUANSE MATURALNE — lżejszy komponent niż content-card,
   na jednozdaniowe rozszerzenia w obrębie sekcji "Wymagane na Maturze"
   (np. "always + Continuous" = irytacja). ZAWSZE w sekcji Matura,
   nigdy w sekcji E8 — zachowuje obietnicę "zero zgadywania".
   ========================================================== */
.nuance-list {
    background: #FEF9E7;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 18px 0;
}

.nuance-list-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #92400E;
    margin-bottom: 10px;
}

.nuance-item {
    padding: 8px 0;
    border-top: 1px dashed #FDE68A;
    font-size: 0.88rem;
}

.nuance-item:first-of-type { border-top: none; padding-top: 0; }

.nuance-item strong { color: var(--color-heading); }
.nuance-item em { color: #6B7280; display: block; margin-top: 2px; font-size: 0.85rem; }

/* ==========================================================
   FAQ — natywny <details>/<summary>, zero JavaScriptu
   ========================================================== */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 4px 16px;
    margin-bottom: 10px;
    background: var(--color-surface);
}

.faq-item summary {
    padding: 12px 0;
    font-weight: 700;
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    float: right;
    font-size: 1.3rem;
    color: var(--color-accent);
}

.faq-item[open] summary::after { content: "−"; }

/* ---- Lista słówek zwinięta pod grą we fiszki (16 stron: /fiszki + 15
   kategorii słownictwa) --------------------------------------------------
   Powód: przy odkrytej liście uczeń ćwiczący fiszki ma wszystkie odpowiedzi
   tuż pod spodem, więc gra traci sens. Rozwinięcie to jedno kliknięcie.
   Druku to NIE dotyczy — footer.php otwiera .vocab-reveal na beforeprint
   i zamyka po, więc PDF zawsze zawiera pełną listę. */
.vocab-reveal { margin-top: 10px; }

.vocab-reveal-summary {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 3px 3px 0 var(--color-accent);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.vocab-reveal-summary::-webkit-details-marker { display: none; }

.vocab-reveal-summary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--color-accent);
}

.vocab-reveal[open] > .vocab-reveal-summary { margin-bottom: 14px; }

.vocab-reveal-ukryj { display: none; }
.vocab-reveal[open] .vocab-reveal-pokaz { display: none; }
.vocab-reveal[open] .vocab-reveal-ukryj { display: inline; }


.faq-item p { padding: 0 0 14px; margin: 0; color: var(--color-text); font-size: 0.92rem; }

/* Ikony w spisie treści + przycisk PDF przypięty na dole */
.toc-list a { display: flex; align-items: center; gap: 9px; }
.toc-list a .toc-icon { font-size: 1rem; flex-shrink: 0; }

.toc-pdf-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 18px;
    padding: 10px;
    background: var(--color-cta);
    color: #1F2937;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}

/* ==========================================================
   CTA / PRZYCISKI
   ========================================================== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    /* <button> nie dziedziczy kroju ani interlinii — bez tego button.btn
       miał Arial i był o ~7px niższy niż a.btn obok (np. "Usuń" vs
       "Edytuj" w panelu fiszek). */
    font-family: inherit;
    line-height: inherit;
}

.btn-cta {
    background: var(--color-cta);
    color: #1F2937;
}

.btn-cta:hover { background: var(--color-cta-hover); text-decoration: none; }

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.ebook-banner {
    background: var(--color-heading);
    color: #fff;
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 32px 0;
}

.ebook-banner h3 { color: #fff; margin: 0 0 4px; }
.ebook-banner p { color: #DBEAFE; margin: 0; }

/* ==========================================================
   RAMKA KOREPETYCJI
   ========================================================== */
.tutoring-box {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin: 32px 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 20px;
    padding: 26px 20px 18px;
}

@media (max-width: 960px) {
    .main-nav { display: none; } /* rozwijane przyciskiem ☰ — mobile-menu.js */
    .mobile-menu-toggle { display: block; }
    .search-wrap { width: 100%; order: 3; }

    /* Logo + motyw + ☰ w 1. rzędzie, wyszukiwarka w 2., menu w 3. */
    .site-header.nav-open .main-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        order: 4;
        border-top: 1px solid var(--color-border);
    }
    .site-header.nav-open .main-nav a {
        padding: 12px 4px;
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }
    .site-header.nav-open .main-nav a:last-child { border-bottom: none; }
    /* Motyw i ☰ obok siebie przy prawej krawędzi, nie rozstrzelone */
    .theme-toggle-btn { margin-left: auto; }
}

@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; }
}

.footer-heading {
    color: var(--color-heading);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.footer-col a {
    display: block;
    color: var(--color-text);
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.footer-col p { font-size: 0.82rem; }

.footer-logo { font-weight: 700; font-size: 0.95rem; color: var(--color-heading); margin-bottom: 4px; }

.footer-bottom {
    text-align: center;
    padding: 10px 20px 16px;
    font-size: 0.75rem;
    color: #6B7280;
}

.footer-bottom a { color: #6B7280; text-decoration: underline; }
.footer-bottom a:hover { color: var(--color-accent); }

/* ==========================================================
   TEST DIAGNOSTYCZNY / POZIOMUJĄCY — quiz-engine.js
   ========================================================== */
.quiz-wrap { max-width: 640px; margin: 28px auto 8px; }

.quiz-card {
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 6px 6px 0 var(--color-accent), 6px 6px 0 2px var(--color-heading);
    text-align: left;
    max-width: none;
}

.quiz-card .btn { margin-top: 16px; }

.quiz-progress {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
    margin: 0 0 6px;
}

.quiz-progress-bar {
    height: 8px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 20px;
}

.quiz-progress-bar-fill {
    height: 100%;
    background: var(--color-accent);
    transition: width .25s ease;
}

.quiz-question-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-heading);
    line-height: 1.4;
    margin: 0 0 20px;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-option {
    text-align: left;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.quiz-option:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

.quiz-option:disabled { cursor: default; }

.quiz-option--correct {
    border-color: var(--color-success);
    background: #ECFDF5;
    color: #065F46;
    font-weight: 700;
}

.quiz-option--wrong {
    border-color: var(--color-error);
    background: #FEF2F2;
    color: #991B1B;
    font-weight: 700;
}

.quiz-card--result { text-align: center; }

.quiz-result-icon { font-size: 2.4rem; display: block; margin-bottom: 8px; }

.quiz-result-label {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.quiz-result-level {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 4px 0 12px;
}

.quiz-result-detail {
    color: var(--color-text);
    font-size: 0.95rem;
    max-width: 420px;
    margin: 0 auto;
}

.quiz-stats-row {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-border);
}

.quiz-stat { display: flex; flex-direction: column; align-items: center; }

.quiz-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-heading);
}

.quiz-stat-label {
    font-size: 0.75rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.quiz-result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.quiz-last-result {
    font-size: 0.85rem;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 14px;
}

/* Oś czasu testu — kropka na pytanie (quiz-engine.js). Odpowiedziane:
   zielona/czerwona i klikalna (podgląd), bieżąca: obwódka, przyszłe:
   szare i nieaktywne. Zawija się na wąskich ekranach. */
.quiz-timeline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 6px;
}
.quiz-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg-soft);
    cursor: pointer;
    transition: transform .12s ease;
}
.quiz-dot:disabled { cursor: default; opacity: .7; }
.quiz-dot:not(:disabled):hover { transform: scale(1.25); }
.quiz-dot--ok  { background: var(--color-success); border-color: var(--color-success); }
.quiz-dot--bad { background: var(--color-error); border-color: var(--color-error); }
.quiz-dot--current { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-bg); }
.quiz-dot--viewed { transform: scale(1.35); box-shadow: 0 0 0 2px var(--color-heading); }
.quiz-podglad-label { display: none; color: var(--color-accent); }
.quiz-podglad .quiz-podglad-label { display: inline; }
.quiz-podglad .quiz-card--question { border-style: dashed; }

/* Pytanie testu: subtelna wskazówka kategorii/tematu w prawym górnym
   rogu + przycisk "Dalej" (auto-przejście z games-common.js) */
.quiz-card--question { position: relative; }
.quiz-topic-hint {
    position: absolute;
    top: 10px;
    right: 12px;
    max-width: 60%;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quiz-card--question .quiz-question-text { padding-top: 14px; }
.quiz-next-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.quiz-next-row:has(> [style*="display:none"]),
.quiz-next-row:has(> [style*="display: none"]) { margin-top: 0; }

/* Rozbicie wyniku na poziomy pod opisem (testy E8/matura): "A1 9/10 ✓" */
.quiz-level-breakdown {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.quiz-level-breakdown span {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
}
.quiz-level-breakdown .is-pass { background: #ECFDF5; color: #065F46; border-color: var(--color-success); }
.quiz-level-breakdown .is-fail { background: #FEF2F2; color: #991B1B; border-color: var(--color-error); }

/* Lista błędów — jedna zwięzła linia na pytanie, luka wypełniona
   błędną (czerwona, przekreślona) i poprawną (zielona) odpowiedzią */
.quiz-mistakes {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.92rem;
}
.quiz-mistakes li {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
    line-height: 1.7;
}
.quiz-mistakes li:last-child { border-bottom: none; }
.qm-nr { color: var(--color-muted); font-weight: 600; min-width: 1.8em; flex-shrink: 0; }
.qm-wrong, .qm-right {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.5;
}
.qm-wrong { background: #FEF2F2; color: #991B1B; text-decoration: line-through; margin-right: 4px; }
.qm-right { background: #ECFDF5; color: #065F46; }
.qm-legend { font-size: 0.8rem; margin: 2px 0 0; }
.qm-legend .qm-wrong { text-decoration: none; }

.quiz-review-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-review-link {
    display: block;
    padding: 10px 14px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.quiz-review-link:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    text-decoration: none;
}

/* ==========================================================
   ĆWICZENIA PER TEMAT — /cwiczenia/{slug} — exercises-engine.js
   Reużywa .quiz-wrap/.quiz-card/.quiz-option/.quiz-progress-* ze
   sekcji testu diagnostycznego wyżej — tylko elementy specyficzne
   dla typu "luka" (pole tekstowe) i feedbacku są nowe.
   ========================================================== */
.cw-hint {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: -8px 0 14px;
}

.cw-luka-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cw-luka-input {
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
}

.cw-luka-area .btn { align-self: flex-start; }

.cw-luka-input::placeholder { color: var(--color-muted); opacity: 1; }
.cw-luka-input:focus { border-color: var(--color-accent); outline: none; }
.cw-luka-input:disabled { background: var(--color-bg-soft); }

.cw-feedback {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

.cw-feedback--correct { background: #ECFDF5; color: #065F46; }
.cw-feedback--wrong { background: #FEF2F2; color: #991B1B; }

.exercises-cta {
    display: inline-flex;
    margin: 4px 0 24px;
}

.cw-blok-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    margin: 0 0 10px;
}

/* ==========================================================
   MENU WYBORU BLOKU — tryb interaktywny (renderujCwiczeniaInteraktywnie)
   Zamiast jednej wspólnej puli 80-100 pytań, uczeń wybiera jeden blok
   ("Ćwiczenie 1"...) i ćwiczy tylko jego pozycje. "✓ ukończono" to stan
   TYLKO w pamięci JS na czas wizyty (bez localStorage).
   ========================================================== */
.cw-menu-title { font-weight: 700; margin: 24px 0 12px; }

.cw-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.cw-menu-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    text-align: left;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-family: var(--font-main);
}

.cw-menu-item:hover { background: var(--color-accent-bg); border-color: var(--color-accent); }

.cw-menu-item-name { font-weight: 700; color: var(--color-heading); flex-basis: 100%; }
.cw-menu-item-desc { font-size: 0.88rem; color: var(--color-text); }
.cw-menu-item-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-muted);
    flex-shrink: 0;
}
.cw-menu-item-done {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-success);
    flex-basis: 100%;
}

.cw-back-btn { margin-bottom: 16px; }

.cw-bank {
    background: var(--color-accent-bg);
    border: 1px dashed var(--color-accent);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    margin: 0 auto 16px;
    max-width: 640px;
    text-align: center;
}

/* Pojedyncze słowo z banku — domyślnie zwykły tekst, przygasa i zostaje
   przekreślone gdy uczeń poprawnie użyje go tyle razy, ile faktycznie
   potrzeba w danym bloku (patrz exercises-engine.js, zbudujBank/
   oznaczUzycieBanku — bank bywa reużywalny, więc słowo znika DOPIERO
   po wyczerpaniu wszystkich potrzebnych użyć, nie po pierwszym trafieniu). */
.cw-bank-word--used {
    text-decoration: line-through;
    opacity: 0.4;
}

/* Słowo z ramki jako osobny kafelek-przycisk — klik wstawia je do luki
   (exercises-engine.js, wstawZBanku). Ramka + mały cień w akcencie, jak
   reszta kart na stronie; wariant „a / b" to dwa kafelki w jednej grupie. */
.cw-bank-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.cw-bank-word {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cw-bank-sep {
    color: var(--color-muted);
}
.cw-bank-btn {
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--color-accent);
    padding: 6px 12px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.cw-bank-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--color-accent);
}
.cw-bank-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--color-accent);
}
.cw-bank-word--used .cw-bank-btn {
    box-shadow: none;
}
/* text-decoration nie przechodzi z rodzica do inline-block (button),
   więc przekreślenie zużytego słowa trzeba podać wprost. */
.cw-bank-word--used .cw-bank-btn {
    text-decoration: line-through;
}
.cw-bank-tip {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* ---------- CLOZE (tekst z lukami na jednym ekranie) ---------- */
.cw-cloze-text {
    font-size: 1rem;
    line-height: 2.1;
    color: var(--color-text);
    /* "
" w segmencie = nowa linia (dialogi, e-maile) */
    white-space: pre-line;
}

.cw-cloze-input {
    width: 100px;
    padding: 3px 6px;
    margin: 0 2px;
    border: none;
    border-bottom: 2px solid var(--color-heading);
    font-family: var(--font-main);
    font-size: 0.95rem;
    text-align: center;
}

.cw-cloze-input:focus { outline: none; border-bottom-color: var(--color-accent); }
/* Podpowiedź za luką — np. (spend) — i poprawna odpowiedź przy błędnej luce. */
.cw-cloze-hint { color: var(--color-muted); font-style: italic; font-size: 0.9em; }
.cw-cloze-poprawna { color: #065F46; font-weight: 700; white-space: nowrap; }
.cw-cloze-input--correct { border-bottom-color: var(--color-success); color: #065F46; font-weight: 700; }
.cw-cloze-input--wrong { border-bottom-color: var(--color-error); color: #991B1B; font-weight: 700; }

/* ==========================================================
   MATURA USTNA — /matura-ustna (renderujZestawyUstne)
   Filtr u góry reużywa .level-filter-btn / [data-level-block] z
   level-filter.js (ten sam mechanizm co filtr CEFR na /gramatyka).
   ========================================================== */
.us-print-bar { text-align: right; margin-bottom: 20px; }

.us-zestaw-card {
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 14px;
    padding: 26px;
    margin: 24px 0;
    box-shadow: 6px 6px 0 var(--color-accent), 6px 6px 0 2px var(--color-heading);
}

.us-zestaw-title { margin-top: 0; }

.us-blok { margin: 20px 0; padding-top: 16px; border-top: 1px dashed var(--color-border); }
.us-blok:first-of-type { border-top: none; padding-top: 0; }

.us-blok-label {
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 10px;
}

.us-pytania-list { margin: 0; padding-left: 20px; }
.us-pytania-list li { margin-bottom: 6px; color: var(--color-text); }

.us-kontekst { color: var(--color-text); margin: 0 0 14px; }

.us-kwestie-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.us-kwestia {
    background: var(--color-accent-bg);
    border: 1.5px solid var(--color-accent);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-heading);
}

.us-rozpoczyna { font-size: 0.88rem; color: var(--color-muted); margin: 0; }

.us-zadanie2-img {
    display: block;
    width: 100%;
    max-width: 670px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 2px solid var(--color-heading);
    border-radius: 10px;
    margin: 4px 0 18px;
}

@media print {
    .us-zadanie2-img { max-width: 505px; }
}

.us-blok--wkrotce {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}

@media print {
    .us-blok--wkrotce { display: none; }

    /* Zestaw ze zdjęciem (Zadanie 2) rzadko mieści się na jednej stronie
       — zamiast walczyć o wciśnięcie go w całości (break-inside:avoid
       z generycznej reguły .us-zestaw-card wyżej w pliku produkowało
       nieprzewidywalny, "urwany" podział w środku bloku), świadomie
       wymuszamy STAŁY podział: strona 1 = Rozmowa wstępna + Zadanie 1,
       strona 2 = Zadanie 2. Każdy .us-blok zostaje atomowy (nie łamie
       się w środku), więc podział zawsze wypada między blokami, nigdy
       w połowie listy pytań czy zdjęcia. !important konieczny — remis
       specyficzności z regułą .us-zestaw-card (sama klasa), a ta reguła
       leży w pliku NIŻEJ niż tamta, ale i tak nie polegamy na kolejności. */
    .us-zestaw-card--zdjecie {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    .us-blok {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .us-blok--zadanie2 {
        break-before: page !important;
        page-break-before: always !important;
    }
}

/* ==========================================================
   TRYB DO DRUKU — arkusz ćwiczeń (renderujCwiczeniaDruk)
   ŻADNYCH odpowiedzi przy pozycjach — checkbox "Pokaż odpowiedzi"
   odsłania jeden zbiorczy .cw-print-key na SAMYM KOŃCU dokumentu
   (patrz exercises-engine.js). Odstępy celowo ciasne — przy 80-100
   zadaniach na temat inaczej wychodzi kilkanaście stron.
   ========================================================== */
.cw-print-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.cw-print-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.cw-print-select {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.cw-print-select-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 0 0 10px;
}

.cw-print-select-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.cw-print-select-actions button {
    font-size: 0.82rem;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.cw-print-select-actions button:hover { background: var(--color-bg-soft); }

.cw-print-select-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.cw-print-select-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
}

.cw-print-title { margin-top: 0; }

.cw-print-block { margin: 18px 0; }

.cw-print-block--hidden { display: none; }

.cw-print-instruction {
    font-style: italic;
    color: var(--color-muted);
    margin: 2px 0 8px;
    font-size: 0.92rem;
}

.cw-print-bank {
    font-size: 0.88rem;
    background: var(--color-bg-soft);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 10px;
}

.cw-print-list {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ODSTĘPY W DRUKU ZALEŻĄ OD TYPU ZADANIA (klasę nadaje
   renderujCwiczeniaDruk w exercises-data.php).

   Powód: jedna wspólna, luźna interlinia (2.4) dawała miejsce na
   pisanie, ale rozpychała też zadania zamknięte — przy włączonym
   "każde ćwiczenie od nowej strony" ósme pytanie lądowało samo na
   kolejnej kartce. Rozdzielenie pozwala mieć jedno i drugie.

   Wyliczenie dla A4 (~250mm użytecznej wysokości po marginesach
   i nagłówku ćwiczenia), przy .cw-print-sentence 0.95rem = 15.2px:
   - pisanie: 15.2 x 2.0 = 30.4px = 8mm na linię, czyli tyle co
     liniatura zeszytu. Zadanie zawija się zwykle na 2 linie:
     2 x 8mm + 2.4mm odstępu = 18.4mm; 12 zadań = 221mm. Mieści się.
   - zwarta: 15.2 x 1.5 = 6mm na linię; zadanie z opcjami A-D to
     ~6 + 5.7 + 2.4 = 14mm; 8 zadań = 112mm. Duży zapas nawet gdy
     opcje zawiną się na drugą linię. */
.cw-print-list--pisanie .cw-print-sentence { line-height: 2.0; }
.cw-print-list--zwarta .cw-print-sentence { line-height: 1.5; }

.cw-print-list li { padding-left: 4px; }

.cw-print-sentence {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text);
    /* Wartość bazowa; realną interlinię ustawiają modyfikatory
       .cw-print-list--pisanie / --zwarta (patrz wyżej), bo luka
       w druku to ciąg podkreślników W LINII tekstu i to interlinia
       decyduje, ile miejsca zostaje na wpisanie odpowiedzi. */
    line-height: 1.6;
}

.cw-print-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-top: 3px;
    font-size: 0.9rem;
}

.cw-print-blank-line {
    height: 0;
    border-bottom: 2px dotted var(--color-muted);
    /* Używane tam, gdzie uczeń pisze CAŁE zdanie (typ "szyk"
       i "transformacja"), nie jedno słowo — stąd większy odstęp nad
       kreską niż pierwotne 28px. */
    margin: 34px 40px 20px 0;
}

.cw-print-cloze {
    font-size: 0.95rem;
    line-height: 2.3;
    color: var(--color-text);
    /* "
" w segmencie = nowa linia (dialogi, e-maile) */
    white-space: pre-line;
}

.cw-print-blank-inline {
    font-size: 0.88rem;
    color: var(--color-muted);
}

/* Nierozerwalne są TYLKO kropki — sama luka do wpisania. Podpowiedź
   obok nich ma się normalnie zawijać: najdłuższe w bazie mają ponad
   100 znaków i przy nowrap na całości wychodziły poza margines. */
.cw-print-blank-dots {
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.cw-print-key {
    display: none;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid var(--color-heading);
}

.cw-print--show-answers .cw-print-key { display: block; }

.cw-print-key-block {
    font-size: 0.88rem;
    margin: 0 0 8px;
    line-height: 1.6;
}

@media print {
    .cw-print-key { break-before: page; page-break-before: always; }

    /* KAŻDE ĆWICZENIE OD NOWEJ STRONY — przełączane checkboxem
       "Każde ćwiczenie od nowej strony" nad podglądem (domyślnie
       WŁĄCZONE). Klasę .cw-print--strony trzyma na kontenerze
       exercises-engine.js. Po odznaczeniu wydruk leci ciągiem, jak
       przed wprowadzeniem tej opcji.
       Po co to: z łamaniem można wyrwać jedną kartkę i dać ją uczniowi
       jako samodzielne zadanie. Koszt: wydruk nie zejdzie poniżej liczby
       bloków (zwykle 9), a krótsze ćwiczenia zostawiają puste miejsce
       na dole strony — stąd możliwość wyłączenia.

       NIE dotyczy testów diagnostycznych z /test-poziomujacy, mimo że
       reużywają klas .cw-print-* — renderujTestDiagnostycznyDruk()
       w quiz-data.php w ogóle nie tworzy .cw-print-block, tylko jedną
       <ol class="cw-print-list">. Zawężenie dzieje się więc samo, bez
       dodatkowej klasy; .cw-print-block powstaje WYŁĄCZNIE
       w renderujCwiczeniaDruk() (ćwiczenia gramatyki, słownictwa
       i /cwiczenia/mieszany).

       Pierwsze ćwiczenie musi być wyjątkiem, inaczej łamanie zepchnęłoby
       je na stronę 2 i strona 1 zostałaby z samym <h2 class="cw-print-title">.
       Dwa zabezpieczenia, bo wybór ćwiczeń do druku może ukryć blok 0:
       1) --pierwszy — klasę nadaje JS pierwszemu WIDOCZNEMU blokowi
          (exercises-engine.js, przeliczane po każdej zmianie selekcji),
       2) [data-cw-block-index="0"] — fallback, gdyby JS nie zadziałał.
          Uwaga: bez JS nie ma też klasy .cw-print--strony, więc wydruk
          leci ciągiem i fallback jest wtedy bezczynny — zostaje na
          wypadek, gdyby klasa kiedyś trafiła do HTML z PHP. */
    .cw-print--strony .cw-print-block { break-before: page; page-break-before: always; }
    .cw-print--strony .cw-print-block--pierwszy,
    .cw-print--strony .cw-print-block[data-cw-block-index="0"] {
        break-before: auto;
        page-break-before: auto;
    }
}

.quiz-badge {
    display: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-heading);
    background: var(--color-accent-bg);
    border-radius: 999px;
    padding: 3px 10px;
    margin-top: 8px;
}

/* Kafle wyboru ścieżki na landing page /test-poziomujacy */
.quiz-path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}

/* Wariant na 3 kafle (np. /plan-nauki: E8 / Matura Podstawowa / Matura
   Rozszerzona), żeby trzeci nie lądował samotnie na połowie szerokości. */
.quiz-path-grid--3col { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 900px) {
    .quiz-path-grid--3col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .quiz-path-grid { grid-template-columns: 1fr; }
}

.quiz-path-card {
    display: block;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 26px;
    text-decoration: none;
    box-shadow: 6px 6px 0 var(--tile-accent, var(--color-accent)), 6px 6px 0 2px var(--color-heading);
    transition: transform .15s ease;
}

.quiz-path-card:hover { transform: translate(-2px, -2px); text-decoration: none; }

.quiz-path-card h3 {
    font-family: var(--font-display);
    color: var(--color-heading);
    margin: 8px 0 6px;
}

.quiz-path-card p { color: var(--color-text); font-size: 0.9rem; margin: 0; }

.quiz-path-card--matura { --tile-accent: var(--color-cta); }

/* ==========================================================
   KALKULATORY WYNIKU (matura, E8)
   ========================================================== */
.calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.calc-row:last-child { border-bottom: none; }

.calc-row label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}

.calc-input {
    width: 70px;
    padding: 8px 10px;
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-main);
}

.calc-input:focus { outline: none; border-color: var(--color-accent); }

/* ==========================================================
   PLAN NAUKI — /plan-nauki
   ========================================================== */
/* Tabela-nośnik listy slotów istnieje wyłącznie dla druku (repeating
   <thead>) — na ekranie neutralizujemy jej domyślny model tabeli do
   zwykłego block-flow, żeby wyglądało tak samo jak wcześniejsze div-y. */
.plan-print-table { display: block; width: 100%; border-collapse: collapse; }
.plan-print-table thead { display: none; }
.plan-print-table tbody { display: block; }
.plan-print-table tr { display: block; }
.plan-print-table td { display: block; padding: 0; }

.plan-slot {
    border: 2px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.plan-slot--checkpoint { border-color: var(--color-accent); }

.plan-slot-header {
    background: var(--color-bg-soft);
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.plan-slot-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
}

.plan-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.plan-item:hover { border-color: var(--color-accent); text-decoration: none; background: var(--color-accent-bg); }

.plan-item--rozszerzenie { background: var(--color-cta-bg, #FEF3C7); }

.plan-item-badge {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--color-cta);
    color: #1F2937;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.plan-item--checkpoint {
    background: var(--color-heading);
    color: #FFFFFF;
    border-color: var(--color-heading);
    font-weight: 700;
}

.plan-item--checkpoint:hover { background: #1F2937; }

.plan-item-speaking {
    padding: 8px 10px 8px 30px;
    font-size: 0.85rem;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plan-item-speaking-label {
    font-weight: 700;
    color: var(--color-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

/* ==========================================================
   BANER ZGODY NA COOKIES + STAŁY PASEK KOREPETYCJI
   Oba fixed na dole ekranu, ten sam slot — kolejność pilnowana
   w cookie-consent.js (baner ma pierwszeństwo, pasek dopiero po
   decyzji w banerze). display:none domyślnie, JS przełącza na flex.
   ========================================================== */
.promo-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 24px;
    border-top: 2px solid var(--color-heading);
}

/* Zgoda na cookies — mała karta w LEWYM dolnym rogu (prawy zajmuje
   przycisk „Tryb prezentacji” na artykułach). Nie przesuwa treści strony
   (bez body.bottom-bar-visible), więc zasłania tylko róg. Oba przyciski
   tej samej wielkości: odrzucenie musi być równie łatwe jak zgoda. */
.cookie-banner {
    display: none;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 500;
    width: 320px;
    max-width: calc(100vw - 24px);
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--color-accent);
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text);
}

.cookie-banner__actions {
    display: flex;
    gap: 8px;
}

.cookie-banner__btn {
    flex: 1;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--color-heading);
    background: var(--color-surface);
    color: var(--color-heading);
}

.cookie-banner__btn--accept {
    background: var(--color-accent);
    color: #FFFFFF;
    border-color: var(--color-accent);
}

.promo-bar {
    background: var(--color-heading);
    color: #FFFFFF;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.2);
}

.promo-bar p {
    margin: 0;
    font-size: 0.88rem;
}

.promo-bar a {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
    font-weight: 700;
}

.promo-bar__close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

body.bottom-bar-visible { padding-bottom: 76px; }
/* Pływający „Tryb prezentacji” stoi w prawym dolnym rogu — przy
   widocznym pasku korepetycji zasłaniał jego tekst i krzyżyk. */
body.bottom-bar-visible .presentation-toggle-btn { bottom: 90px; }

@media (max-width: 640px) {
    .promo-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 14px 16px;
    }
    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
    body.cookie-card-visible .presentation-toggle-btn {
        bottom: 150px;
    }
    body.bottom-bar-visible { padding-bottom: 130px; }
    body.bottom-bar-visible .presentation-toggle-btn { bottom: 140px; }
}

.plan-item-speaking-q { font-style: italic; }

/* ==========================================================
   GRY DLA KLAS 1-3 (/gry) — quiz obrazkowy i inne
   Zaprojektowane pod PROWADZĄCEGO klikającego na współdzielonym ekranie
   (dziecko nazywa/wskazuje odpowiedź głosowo) — stąd duże, nieliczne
   klikalne cele zamiast siatek/przeciągania wymagającego precyzji.
   Styl: ten sam neubrutalizm (podwójny cień) co reszta portalu, ale
   większe elementy i cieplejsze akcenty pod młodszego odbiorcę.
   ========================================================== */

.games-hero {
    text-align: center;
    padding: 8px 0 4px;
}

.game-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 28px 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.game-topic-card {
    display: block;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 4px 4px 0 var(--color-cta), 4px 4px 0 2px var(--color-heading);
    transition: transform .15s ease;
}

.game-topic-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-cta), 6px 6px 0 2px var(--color-heading);
}

.game-topic-card-emoji { font-size: 1.8rem; display: block; margin-bottom: 6px; }

.game-topic-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-heading);
}

.game-topic-card-count {
    color: var(--color-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.game-topic-card--mix {
    background: var(--color-bg-soft);
    border-color: var(--color-accent);
    box-shadow: 4px 4px 0 var(--color-accent), 4px 4px 0 2px var(--color-heading);
}

.game-topic-card--mix:hover {
    box-shadow: 6px 6px 0 var(--color-accent), 6px 6px 0 2px var(--color-heading);
}

.qo-wrap {
    max-width: 480px;
    margin: 24px auto 0;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 20px;
    padding: 22px 20px;
    box-shadow: 6px 6px 0 var(--color-accent), 6px 6px 0 2px var(--color-heading);
    text-align: center;
}

#qoProgress {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.qo-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.qo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    display: inline-block;
}

.qo-dot--done { background: var(--color-success); }
.qo-dot--wrong { background: var(--color-error); }
.qo-dot--active { background: var(--color-cta); transform: scale(1.3); }

.qo-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--color-heading);
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}

.oo-instruction {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.qo-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 340px;
    margin: 0 auto 20px;
}

@media (min-width: 460px) {
    .qo-options { grid-template-columns: repeat(4, 1fr); max-width: 420px; }
}

.qo-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    background: var(--color-bg-soft);
    border: 3px solid var(--color-heading);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0 2px var(--color-heading);
    transition: transform .1s ease, background .15s ease;
}

.qo-option:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    background: var(--color-surface);
}

.qo-option:disabled { cursor: default; color: var(--color-text); } /* bez tego Chrome wyszarza emoji w zablokowanym przycisku */

.qo-option--correct {
    background: #ECFDF5;
    border-color: var(--color-success);
}

.qo-option--wrong {
    background: #FEF2F2;
    border-color: var(--color-error);
}

.qo-feedback {
    min-height: 28px;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 16px;
}

.qo-feedback--correct { color: #065F46; }
.qo-feedback--wrong { color: #991B1B; }

.qo-summary { padding: 12px 0; }

.qo-summary-emoji { font-size: 3rem; display: block; margin-bottom: 10px; }

.qo-summary-score {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 20px;
}

/* WSPÓLNE (games-common.js): przełącznik dźwięku, panel startowy
   (liczba słówek w rundzie + tryb na czas), licznik czasu, powtórka
   błędów na podsumowaniu. Reużywane przez wszystkie silniki gier. */
.qo-wrap { position: relative; }

.gc-sound-toggle {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-heading);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 2px 2px 0 1px var(--color-heading);
}

.gc-sound-toggle:hover { transform: translate(-1px, -1px); }

.gc-start-panel {
    padding: 8px 0 4px;
}

.gc-start-label {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 10px;
}

.gc-start-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gc-start-btn {
    padding: 10px 16px;
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 10px;
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    cursor: pointer;
    box-shadow: 2px 2px 0 1px var(--color-heading);
}

.gc-start-btn--active {
    background: var(--color-accent);
    color: #FFFFFF;
}

.gc-start-timer {
    display: block;
    margin-bottom: 18px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.gc-start-timer input { margin-right: 6px; }

/* Przełącznik "automatycznie następne zadanie" — ten sam komponent
   w grach (panel startowy) i w ćwiczeniach (pod etykietą bloku),
   patrz renderAutoToggle() w games-common.js. */
.gc-auto-toggle {
    display: block;
    margin-bottom: 18px;
    font-size: 0.88rem;
    color: var(--color-muted);
    cursor: pointer;
}
.gc-auto-toggle input { margin-right: 6px; }

.cw-auto-toggle {
    margin: 0 auto 14px;
    max-width: 560px;
    text-align: center;
}

.gc-start-go { width: 100%; max-width: 220px; }

.gc-timer {
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.gc-timer--urgent { color: var(--color-error); }

.gc-mistakes {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px dashed var(--color-border);
}

.gc-mistakes-title {
    font-weight: 700;
    color: var(--color-heading);
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.gc-mistakes-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.gc-mistake-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 1rem;
    text-align: left;
}

.gc-mistake-emoji { font-size: 2.2rem; }
.gc-mistake-word { line-height: 1.3; font-weight: 600; }
.gc-mistake-word small { color: var(--color-muted); font-size: 0.85em; font-weight: 400; }

/* Karta pracy (/gry/karta-pracy/{temat}) — drukowalny arkusz offline.
   Świadomie oszczędny w tuszu: biały papier, czarny tekst i cienkie
   linie, bez kolorowych wypełnień (jedyny kolor to same emoji). */
.karta-pracy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
    max-width: 780px;
    margin: 28px auto 0;
}

.karta-pracy-card {
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
}

.karta-pracy-emoji {
    font-size: 2.6rem;
    display: block;
    margin-bottom: 14px;
}

.karta-pracy-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.karta-pracy-blank {
    flex: 1;
    border-bottom: 1.5px solid var(--color-heading);
    height: 1.3em;
}

/* Prawda czy Fałsz — reużywa .qo-dots/.qo-dot/.qo-feedback/.qo-summary* z quizu
   obrazkowego (ten sam wygląd progresu i feedbacku), własne tylko elementy
   specyficzne dla tej gry (duży obrazek, dwa przyciski odpowiedzi). */
.tf-emoji {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 4px;
}

.tf-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--color-heading);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.tf-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 20px;
}

.tf-btn {
    flex: 1;
    max-width: 160px;
    padding: 16px 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0 2px var(--color-heading);
    transition: transform .1s ease;
}

.tf-btn:hover:not(:disabled) { transform: translate(-2px, -2px); }
.tf-btn:disabled { cursor: default; opacity: 0.7; }

.tf-btn--true {
    background: #ECFDF5;
    border: 3px solid var(--color-success);
    color: #065F46;
}

.tf-btn--false {
    background: #FEF2F2;
    border: 3px solid var(--color-error);
    color: #991B1B;
}

.qo-monster {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 6px;
}

.ms-answer-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 20px 0;
}

.sr-emoji {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 4px;
}

.sr-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--color-heading);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.sr-baskets {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 20px;
}

.sr-basket {
    flex: 1;
    max-width: 200px;
    padding: 18px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    background: var(--color-bg-soft);
    border: 3px solid var(--color-heading);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0 2px var(--color-heading);
    transition: transform .1s ease, background .15s ease;
}

.sr-basket:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    background: var(--color-surface);
}

.sr-basket:disabled { cursor: default; }

.bg-called {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--color-heading);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.bg-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 320px;
    margin: 0 auto 16px;
}

.bg-card .qo-option { font-size: 1.8rem; }

.wl-emoji {
    font-size: 4.2rem;
    line-height: 1;
    margin-bottom: 6px;
}

.wl-hint {
    color: var(--color-muted);
    font-size: 0.95rem;
    min-height: 22px;
    margin-bottom: 16px;
}

.wl-count {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: 14px;
}

.ct-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 20px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.gd-opis {
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-heading);
    line-height: 1.4;
    margin-bottom: 20px;
    padding: 0 8px;
}

/* ==========================================================
   TRYB PREZENTACJI (/gramatyka/{temat}?prezentacja=1)
   Aktywowany w całości przez assets/js/presentation-mode.js —
   dzieli .article-main na "slajdy" wg tych samych kotwic #id, których
   już używa spis treści (.toc-list), i pokazuje jeden na raz. Zero
   nowych plików PHP: to czysto CSS + JS nakładka na istniejącą treść
   artykułu, uruchamiana albo kliknięciem pływającego przycisku, albo
   automatycznie przy wejściu z linku zawierającego ?prezentacja=1.
   ========================================================== */

.presentation-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;
    background: var(--color-heading);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.presentation-toggle-btn:hover { background: var(--color-accent); }

/* Gdy tryb aktywny: chowamy WSZYSTKO poza samą treścią artykułu — nagłówek
   strony, stopkę, banery, spis treści, znaczek poziomu i przycisk
   "Ćwicz ten temat" (rozprasza podczas prowadzenia zajęć na żywo). Ten
   sam wzorzec "!important + display:block!important na .article-layout",
   co w @media print (patrz CLAUDE.md, Pułapka #8 o kolejności reguł przy
   remisie specyficzności) — z tego samego powodu: bez !important przegrywa
   z regułą grid ".article-layout { display: grid; }" leżącą NIŻEJ w pliku. */
body.presentation-active .site-header,
body.presentation-active .site-footer,
body.presentation-active .cookie-banner,
body.presentation-active .promo-bar,
body.presentation-active .toc-sidebar,
body.presentation-active .level-badge,
body.presentation-active .exercises-cta,
body.presentation-active .skip-link,
/* Przycisk WŁĄCZAJĄCY tryb też musi zniknąć po jego włączeniu: jest
   fixed w prawym dolnym rogu, więc zachodził na pasek sterowania
   (.presentation-controls, bottom:0) i wystawał ponad niego. Do tego
   jest wtedy bez funkcji — z trybu wychodzi się przyciskiem
   "✕ Zakończ" na pasku albo Escape. */
body.presentation-active .presentation-toggle-btn {
    display: none !important;
}
body.presentation-active { background: var(--color-bg); overflow-y: auto; }
body.presentation-active .article-layout { display: block !important; }
body.presentation-active .article-main {
    max-width: 900px;
    margin: 60px auto 140px;
    padding: 0 24px;
    font-size: 1.3em;      /* czytelne z odległości przy udostępnianiu ekranu */
    line-height: 1.7;
}
body.presentation-active .article-main h2 { font-size: 1.7em; }

/* Każdy "slajd" to grupa oryginalnych elementów artykułu między kolejnymi
   kotwicami #id — patrz JS. Widoczny tylko ten z klasą .active. */
/* Chowanie nieaktywnych slajdów MUSI być powiązane z body.presentation-active.
   Wcześniej nie było i po wyjściu z trybu cała treść poza jedną sekcją
   zostawała ukryta (artykuł wyglądał na urwany). JS i tak rozpakowuje
   slajdy przy wyjściu — to druga warstwa zabezpieczenia, żeby sam DOM
   nigdy nie mógł zostać w stanie "połowa artykułu niewidoczna". */
body.presentation-active .presentation-slide { display: none; }
body.presentation-active .presentation-slide.active { display: block; animation: prezSlideIn .2s ease; }
@keyframes prezSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pasek sterowania — przypięty na dole, nad wszystkim (wyższy z-index niż
   przycisk-przełącznik, który w tym trybie i tak jest ukryty razem z resztą
   chrome'u, ale numer trzymamy z zapasem). */
/* Widoczny WYŁĄCZNIE w aktywnym trybie — pasek jest wstrzykiwany do <body>
   przez JS, więc bez tego powiązania zostawał na ekranie po wyjściu z trybu
   (JS usuwa go teraz przy wyjściu, to druga warstwa zabezpieczenia). */
.presentation-controls { display: none; }
body.presentation-active .presentation-controls {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--color-heading);
    flex-wrap: wrap;
}
.presentation-controls button {
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.presentation-controls button:hover { border-color: var(--color-accent); }
.presentation-controls button:disabled { opacity: .4; cursor: default; }
.presentation-controls button:disabled:hover { border-color: transparent; }
.presentation-counter {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 200px;
    text-align: center;
}
.presentation-exit { background: transparent !important; color: #fff !important; }

/* ==========================================================
   PANEL FISZEK — przyciski przy zestawie (Kopiuj link / Edytuj / Usuń)
   Jedna wielkość i styl dla <a> i <button>; formularz "Usuń" nie może
   wprowadzać własnego bloku, stąd display: contents.
   ========================================================== */
.panel-akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.panel-akcje form { display: contents; }
.panel-akcje .btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Kategorie, filtry, stronicowanie i import (październik 2026).
   Kolory wyłącznie z tokenów — żółty (CTA) tylko na przyciskach zapisu. */
.panel-pole {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-heading);
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-text);
}
.panel-etykieta,
.panel-kategorie label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.panel-kategorie {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.panel-kategorie .panel-pole { margin-top: 6px; font-weight: 400; }
.panel-meta { color: var(--color-muted); font-size: 0.85rem; font-weight: 400; }
.panel-opis { color: var(--color-muted); font-size: 0.9rem; margin-top: 6px; }
.panel-bledy { margin: 8px 0 0 18px; font-size: 0.9rem; }
.panel-bledy code { word-break: break-all; }
.panel-zakladki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.panel-zakladki a { text-decoration: none; }
.panel-ostrzezenie { color: var(--color-error); font-size: 0.9rem; font-weight: 600; margin-top: 8px; }

.panel-filtry {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.panel-filtry input[type="search"] { flex: 1 1 260px; }
.panel-filtry select { width: auto; flex: 0 1 auto; padding: 8px 10px; font-size: 0.85rem; }
.panel-filtry .btn { padding: 8px 14px; font-size: 0.85rem; }

.panel-lista { margin-top: 8px; }
.panel-zestaw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.panel-zestaw-opis { min-width: 0; flex: 1 1 320px; }
.panel-link { font-size: 0.85rem; word-break: break-all; }
.panel-grupa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 6px 0;
    border-bottom: 2px solid var(--color-heading);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-heading);
}
.panel-chipy { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.panel-chip {
    display: inline-block;
    padding: 2px 10px;
    border: 1.5px solid var(--color-heading);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-heading);
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
}
a.panel-chip:hover, button.panel-chip:hover { background: var(--color-bg-soft); }
.panel-chip--zrodlo { border-color: var(--color-accent); }
.panel-chip--tag { border-style: dashed; color: var(--color-muted); font-weight: 500; }
.panel-naprawa { margin-top: 6px; font-size: 0.85rem; }
.panel-naprawa summary { cursor: pointer; color: var(--color-error); font-weight: 600; }
.panel-naprawa ul { margin: 6px 0 0 18px; }
.panel-strony { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.panel-strony a { text-decoration: none; padding: 6px 12px; }

@media (max-width: 640px) {
    .panel-kategorie { grid-template-columns: 1fr; }
    .panel-filtry select { flex: 1 1 45%; }
}

/* Półka (/fiszki?polka=…) i dyskretny link do niej pod zestawem */
.polka-link { margin-top: 28px; font-size: 0.9rem; color: var(--color-muted); }
.polka-lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.polka-lista a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 2px solid var(--color-heading);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 3px 3px 0 var(--color-accent);
    color: var(--color-heading);
    font-weight: 600;
    text-decoration: none;
}
.polka-lista a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-accent); }
.polka-lista .panel-meta { white-space: nowrap; }

/* ==========================================================
   KLASY 1-3 — TEMATY ZDANIOWE (/klasy-1-3/{temat})
   Reużywa „gramatyki wizualnej" gier (.qo-wrap, .qo-dots, .qo-option,
   .qo-feedback, .tf-btn, .gc-*), własne są tylko: ściąga prowadzącego,
   slajdy, kafelki „Ułóż zdanie" i karta pracy. Obrazki to 2-3 emoji
   obok siebie, więc opcje nie są kwadratowe jak w quizie obrazkowym.
   ========================================================== */
.k13-teacher { max-width: 760px; margin-left: auto; margin-right: auto; }
.k13-teacher summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-heading);
    font-size: 1.05rem;
}
.k13-teacher[open] summary { margin-bottom: 12px; }
.k13-steps { margin: 10px 0 14px 20px; }
.k13-steps li { margin-bottom: 6px; }
.k13-dialog {
    background: var(--color-bg-soft);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0 14px;
}
.k13-dialog p { margin: 3px 0; font-size: 1.05rem; }
.k13-dialog-who { font-weight: 700; color: var(--color-accent); }
.k13-uwaga { margin: 14px 0 10px; }
.k13-podstawa { font-size: 0.8rem; color: var(--color-muted); margin: 0; }

/* Wyśrodkowanie przez auto-marginesy, NIE justify-content: center — przy
   przewijanym pasku (telefon) center ucina pierwszą zakładkę z lewej. */
.k13-teacher + .tabs-row .tab-btn:first-child { margin-left: auto; }
.k13-teacher + .tabs-row .tab-btn:last-child { margin-right: auto; }
[data-k13-gra] .oo-instruction { padding: 0 38px; }

.k13-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 12px;
}

/* Slajdy */
.k13-slides { max-width: 640px; }
.k13-slide {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.k13-slide-obraz { font-size: 5.5rem; line-height: 1.1; margin: 0 0 12px; }
.k13-slide-en {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--color-heading);
    margin: 0;
}
.k13-slide-en--hidden { color: var(--color-border); }
.k13-slide-pl { color: var(--color-muted); font-size: 0.95rem; margin-top: 6px; }
.k13-wzor-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 14px;
}
.k13-wzor { text-align: left; }
.k13-wzor-row { display: flex; align-items: center; gap: 16px; margin: 8px 0; }
.k13-wzor-obraz { font-size: 2.4rem; min-width: 3.4rem; text-align: center; }
.k13-wzor-tekst {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-heading);
}
.k13-slide-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}
.k13-slide-count { font-weight: 700; color: var(--color-muted); font-size: 0.9rem; }
.k13-fullscreen {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-heading);
    color: var(--color-heading);
    cursor: pointer;
    font-size: 1rem;
}
.k13-slides:fullscreen {
    max-width: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}
.k13-slides:fullscreen .k13-slide { min-height: 60vh; }
.k13-slides:fullscreen .k13-slide-obraz { font-size: 11rem; }
.k13-slides:fullscreen .k13-slide-en { font-size: 4rem; }
.k13-slides:fullscreen .k13-wzor-obraz { font-size: 4rem; min-width: 6rem; }
.k13-slides:fullscreen .k13-wzor-tekst { font-size: 2.4rem; }
.k13-slides:fullscreen .k13-slide-nav { max-width: 640px; width: 100%; margin: 18px auto 0; }

/* Gry zdaniowe */
.k13-progress { font-size: 0.85rem; font-weight: 700; color: var(--color-muted); margin-bottom: 8px; }
.k13-sentence {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--color-heading);
    margin-bottom: 20px;
}
.k13-options { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.k13-options .qo-option { aspect-ratio: auto; padding: 18px 6px; font-size: 2.2rem; }
.k13-options .qo-option:disabled:not(.qo-option--correct):not(.qo-option--wrong) { opacity: .45; }
.k13-tf-obraz { font-size: 4.5rem; }
.k13-uloz-obraz { font-size: 3.5rem; margin-bottom: 12px; }
.k13-answer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.k13-slot {
    min-width: 64px;
    min-height: 48px;
    padding: 8px 10px;
    border-bottom: 3px dashed var(--color-border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-heading);
}
.k13-slot--filled { border-bottom: 3px solid var(--color-success); }
.k13-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.k13-tile {
    padding: 12px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    background: var(--color-bg-soft);
    color: var(--color-heading);
    border: 3px solid var(--color-heading);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 3px 3px 0 2px var(--color-heading);
    transition: transform .1s ease;
}
.k13-tile:hover:not(:disabled) { transform: translate(-2px, -2px); }
.k13-tile--used { visibility: hidden; }
.k13-tile--wrong { border-color: var(--color-error); animation: k13Shake .4s ease; }
@keyframes k13Shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.k13-summary-title { font-weight: 700; color: var(--color-heading); font-size: 1.1rem; }

.k13-gry { max-width: 760px; margin-left: auto; margin-right: auto; }
.k13-gry .btn { margin: 4px 6px 4px 0; }

/* Karta pracy — oszczędna w tuszu, jak /gry/karta-pracy */
.k13-karta-controls { text-align: center; margin-top: 24px; }
.k13-karta { max-width: 780px; margin: 20px auto 0; }
.k13-karta-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: 1.1rem; }
.k13-karta-name { margin-left: auto; display: flex; gap: 6px; min-width: 220px; }
.k13-karta-polecenie { font-weight: 700; margin: 20px 0 10px; }
.k13-karta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.k13-karta-card {
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}
.k13-karta-obraz { font-size: 2.2rem; display: block; }
.k13-karta-en { font-weight: 600; margin: 6px 0 14px; }
.k13-karta-line { display: block; height: 2.2em; }
.k13-karta-wlasne { display: flex; align-items: baseline; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.k13-karta-wlasne .karta-pracy-blank { min-width: 180px; }
.k13-karta-wlasne small { color: var(--color-muted); width: 100%; }

@media print {
    /* Karta pracy drukuje się zawsze, nawet gdy aktywna jest inna
       zakładka (inline display:none przegrywa z !important). */
    [data-tab-content="karta"] { display: block !important; }
    .k13-karta-grid { grid-template-columns: repeat(3, 1fr); }
    .k13-karta-card { break-inside: avoid; page-break-inside: avoid; }
}

/* Scenki „in / on / under" (obraz zapisany jako „co|pozycja|miejsce").
   Rozmiary w em — skalują się razem z font-size obrazka (slajd, opcja,
   karta pracy). Miejsce (pudełko/łóżko) duże, zwierzątko mniejsze. */
.k13-scena {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    line-height: 1;
    vertical-align: middle;
}
.k13-scena-co { font-size: 0.6em; }
.k13-scena--on .k13-scena-co { order: -1; margin-bottom: -0.12em; }
.k13-scena--under .k13-scena-co { margin-top: 0.05em; }
.k13-scena--in .k13-scena-co {
    position: absolute;
    font-size: 0.45em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -35%);
}
/* Długie rzędy (6-7 kaczek w „How many?") zawijają się zamiast wychodzić poza kartę. */
.k13-slide-obraz, .k13-tf-obraz, .k13-uloz-obraz, .k13-options .qo-option, .k13-karta-obraz {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Test dla klas 1-3 (/test-poziomujacy/klasy-1-3) — działa na wspólnym
   silniku testów (quiz-engine.js); tu tylko wariant obrazkowy: opcje
   w siatce 2×2 z dużymi emoji i większa treść pytania (czyta ją
   prowadzący na głos, dziecko widzi ją na udostępnionym ekranie). */
.quiz-options--obrazki {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.quiz-options--obrazki .quiz-option {
    justify-content: center; /* .quiz-option to flex — samo text-align nie wyśrodkuje */
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.2;
    padding: 18px 6px;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.quiz-wrap--obrazki .quiz-question-text {
    font-family: var(--font-display);
    font-size: 1.7rem;
    text-align: center;
}
.quiz-wrap--obrazki .quiz-mistakes .qm-wrong,
.quiz-wrap--obrazki .quiz-mistakes .qm-right { font-size: 1.3rem; }
.k13-test-print-czesc { margin: 18px 0 6px; }
.k13-test-print-opcje span { font-size: 1.6rem; }

/* Karta pracy — 3 wersje (Przepisz / Uzupełnij / Napisz sam). */
.k13-karta-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.k13-karta-controls .controls-group { flex-wrap: wrap; justify-content: center; }
.k13-karta-legenda { font-size: 0.95rem; margin: 8px 0 0; }
.k13-karta-bank {
    border: 2px dashed var(--color-heading);
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 14px;
}
.k13-karta-card { position: relative; }
.k13-karta-nr {
    position: absolute;
    top: 6px;
    left: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.k13-karta-en--luka { line-height: 2.2; margin-bottom: 4px; }
.k13-luka {
    display: inline-block;
    min-width: 70px;
    border-bottom: 1.5px solid var(--color-heading);
    height: 1.2em;
    vertical-align: baseline;
}
.k13-karta-grid--napisz .k13-karta-obraz { font-size: 2.8rem; margin-bottom: 6px; }
.k13-karta-grid--napisz .k13-karta-line + .k13-karta-line { margin-top: 4px; }

/* ==========================================================
   PORADNIK MATURY USTNEJ (/matura-ustna/poradnik)
   Artykuł wg wzorca gramatyki (.article-layout + spis treści),
   tu tylko elementy, których artykuły gramatyki nie mają.
   ========================================================== */
/* Spis treści ma ~22 pozycje — bez limitu wysokości sticky sidebar
   wychodziłby poza ekran i dolnych pozycji nie dało się kliknąć. */
.toc-sidebar--dluga { max-height: calc(100vh - 110px); overflow-y: auto; }
.toc-list .toc-sub a { padding: 5px 0 5px 42px; font-size: 0.86rem; color: var(--color-muted); }
.toc-list .toc-sub a:hover,
.toc-list .toc-sub a.active { color: var(--color-heading); }

.poradnik-wzor { list-style: none; padding: 0; margin: 0; }
.poradnik-wzor li { margin-bottom: 12px; }
.poradnik-wzor li:last-child { margin-bottom: 0; }
.pw-label {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-accent);
    margin-right: 6px;
}
.poradnik-wzor .en, .poradnik-qa .en, .poradnik-dialog .en, .poradnik-opis .en {
    display: block; font-weight: 600; color: var(--color-text); margin: 2px 0 0;
}
.poradnik-wzor .pl, .poradnik-qa .pl, .poradnik-dialog .pl {
    display: block; font-size: 0.88rem; color: var(--color-muted); margin: 4px 0 0;
}

.poradnik-qa { display: grid; gap: 14px; margin: 20px 0; }
.poradnik-qa-item {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
}
.poradnik-qa-item .q { margin: 0 0 6px; font-weight: 700; color: var(--color-heading); }

.poradnik-dialog { display: grid; gap: 10px; margin: 20px 0; }
.pd-row {
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    margin-right: 15%;
}
.pd-row--ty {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    margin-right: 0;
    margin-left: 15%;
}
.pd-row .en { font-weight: 500; }
.pd-row--ty .en { font-weight: 600; }
.pd-kto { display: block; font-size: 0.78rem; font-weight: 700; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-kto small { text-transform: none; font-weight: 500; color: var(--color-muted); letter-spacing: 0; }
@media (max-width: 600px) {
    .pd-row, .pd-row--ty { margin-left: 0; margin-right: 0; }
}

.poradnik-opisy { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 20px 0; }
.poradnik-opisy--1kol { grid-template-columns: 1fr; }
.poradnik-opis {
    border: 2px solid var(--color-heading);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--color-surface);
}
.poradnik-opis .po-tytul { margin: 0 0 8px; font-weight: 700; color: var(--color-heading); font-family: 'Space Grotesk', sans-serif; }
.poradnik-opis .en { font-weight: 500; line-height: 1.6; }

.poradnik-cwicz { margin: 18px 0 0; }

/* Długie tabele (zwroty ratunkowe) — patrz sekcja "Druk/PDF" w CLAUDE.md:
   generyczne break-inside:avoid na karcie dawałoby puste strony. */
@media print {
    .content-card--dluga, .content-card--dluga table, .content-card--dluga tbody {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    .toc-sidebar--dluga { max-height: none; overflow: visible; }
}

/* Kotwice (spis treści, #zestaw-N) — nagłówek strony jest sticky, więc bez
   tego cel lądował POD nim i nagłówek sekcji był zasłonięty. Dotyczy całego
   serwisu, nie tylko poradnika. Wysokość nagłówka zmierzona: 68 px, gdy menu
   mieści się w jednym wierszu; 116-122 px, gdy wyszukiwarka zawija się do
   drugiego (dzieje się samo, flex-wrap, poniżej ok. 1140 px — stąd próg
   1200 px z zapasem na pasek przewijania). */
html { scroll-padding-top: 96px; }
@media (max-width: 1199px) {
    html { scroll-padding-top: 140px; }
}

/* Zwijane sekcje artykułu (assets/js/zwijane-sekcje.js, .article-main[data-zwijane-sekcje]).
   Ukrycie TYLKO na ekranie i poza trybem prezentacji — druk i slajdy
   zawsze pokazują pełną treść. */
@media screen {
    body:not(.presentation-active) .sekcja-ukryta { display: none !important; }
}
.sekcja-naglowek {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; cursor: pointer;
}
/* Zwinięte nagłówki stoją ciaśniej (zamiast 44 px odstępu h2), żeby lista
   zwiniętych sekcji nie była rozciągnięta. Wygląd nagłówka bez zmian —
   wyróżniony jest tylko przycisk (prośba użytkownika). */
.article-main .sekcja-naglowek--zwinieta { margin-top: 28px; }
.sekcja-toggle {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    background: var(--color-surface);
    border: 2px solid var(--color-heading);
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: 3px 3px 0 var(--color-accent);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.sekcja-toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-accent); }
.sekcja-toggle--zwinieta { background: var(--color-accent-bg); }
.sekcje-sterowanie { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
body.presentation-active .sekcja-toggle,
body.presentation-active .sekcje-sterowanie { display: none !important; }

/* ==========================================================
   PORÓWNYWARKA CZASÓW (/porownaj-czasy, includes/czasy-data.php)
   Siatka „etykieta + 2 kolumny” zamiast <table>: wiersze są wyrównane na
   komputerze, a na telefonie każda komórka staje się osobną kartką
   z nazwą czasu (.pc-kom-czas) — bez przewijania tabeli w bok.
   ========================================================== */
.exercises-cta + .exercises-cta { margin-left: 10px; }

.pc-wybor {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
    margin: 24px 0 8px;
}
.pc-wybor-pole { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }
.pc-wybor-pole span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); }
.pc-wybor select {
    font: inherit; font-weight: 600; color: var(--color-heading);
    background: var(--color-surface);
    border: 2px solid var(--color-heading); border-radius: 10px;
    padding: 10px 12px; box-shadow: 3px 3px 0 var(--color-accent);
    width: 100%; max-width: calc(100% - 3px); /* 3 px = cień, inaczej wystaje na telefonie */
}
.pc-zamien {
    align-self: flex-end;
    font-weight: 700; color: var(--color-heading);
    border: 2px solid var(--color-heading); border-radius: 999px;
    padding: 9px 16px; background: var(--color-surface);
    box-shadow: 3px 3px 0 var(--color-accent); white-space: nowrap;
}
.pc-zamien:hover { text-decoration: none; transform: translate(-1px, -1px); }

.pc-roznica-przyklady { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-roznica-przyklady > div {
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 10px 14px;
}
.pc-roznica-czas { display: block; font-size: 0.78rem; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.pc-roznica-link { margin: 14px 0 0; font-weight: 600; }

.pc-tabela {
    margin: 28px 0 0;
    border: 2px solid var(--color-heading); border-radius: 14px; overflow: hidden;
    background: var(--color-surface);
    box-shadow: 5px 5px 0 var(--color-accent);
}
.pc-wiersz { display: grid; grid-template-columns: 160px 1fr 1fr; border-top: 1px solid var(--color-border); }
.pc-wiersz:first-child { border-top: none; }
.pc-etykieta {
    padding: 14px 16px; font-weight: 700; font-size: 0.88rem; color: var(--color-heading);
    background: var(--color-bg-soft);
}
.pc-kom { padding: 14px 16px; border-left: 1px solid var(--color-border); font-size: 0.93rem; }
.pc-kom-czas { display: none; }
.pc-wiersz--naglowek .pc-kom { background: var(--color-accent-bg); }
.pc-nazwa { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-heading); }
.pc-pl { display: block; font-size: 0.85rem; color: var(--color-muted); margin: 2px 0 8px; }
.pc-poziom { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pc-poziom--e8 { background: var(--color-accent); color: #FFFFFF; }
.pc-poziom--matura { background: var(--color-cta); color: #1F2937; }
.pc-wzor { display: block; font-weight: 600; }
.pc-przyklad { display: block; color: var(--color-muted); margin-top: 2px; }
.pc-lista { margin: 0; padding-left: 18px; }
.pc-lista li { margin-bottom: 8px; }
.pc-lista li:last-child { margin-bottom: 0; }
.pc-zle { display: block; color: var(--color-error); text-decoration: line-through; }
.pc-dobrze { display: block; color: var(--color-success); font-weight: 600; margin-top: 2px; }
.pc-dlaczego { display: block; color: var(--color-muted); font-size: 0.86rem; margin-top: 4px; }

@media screen and (max-width: 760px) {
    .pc-wiersz { grid-template-columns: 1fr; }
    .pc-wiersz--naglowek { display: none; }
    .pc-etykieta { padding: 10px 14px; }
    .pc-kom { border-left: none; border-top: 1px dashed var(--color-border); padding: 12px 14px; }
    .pc-kom-czas {
        display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.03em; color: var(--color-accent); margin-bottom: 4px;
    }
    .pc-roznica-przyklady { grid-template-columns: 1fr; }
    .pc-zamien { align-self: stretch; text-align: center; }
}
.pc-druk-tytul, .pc-wiersz--druk { display: none; }
.pc-kom--szeroka { grid-column: 2 / 4; }

/* Wydruk: sam tytuł „A vs B” + tabela, mniejsza skala, żeby zmieściła się
   na jednej stronie A4. Media query @media screen wyżej pilnuje, żeby
   druk nie wziął układu telefonowego (kartka A4 ma < 760 px szerokości). */
@media print {
    .pc-druk-tytul {
        display: block !important;
        font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700;
        color: #1E3A8A; margin: 0 0 10px;
    }
    .pc-wiersz--druk { display: grid !important; }
    .pc-tabela {
        zoom: 80%; margin: 0; box-shadow: none; border-radius: 0;
        border: 1.5px solid #1E3A8A; background: #FFFFFF;
    }
    .pc-wiersz { grid-template-columns: 130px 1fr 1fr; break-inside: avoid; page-break-inside: avoid; }
    .pc-etykieta, .pc-kom { padding: 8px 10px; }
    .pc-wiersz--naglowek .pc-kom, .pc-etykieta { background: #F3F4F6 !important; }
    .pc-kom-czas { display: none !important; }
    /* Tła (pigułki, znaczki poziomu) przeglądarka domyślnie nie drukuje —
       zamiast nich ramka i ciemny tekst. */
    .pc-tabela .keyword-pill, .pc-poziom {
        background: none !important; color: #1F2937 !important;
        border: 1px solid #9CA3AF; padding: 1px 7px; margin: 0 2px 4px 0;
    }
    .pc-zle { color: #B91C1C; }
    .pc-dobrze { color: #047857; }
}