/*
Theme Name: Hiszpański z Kubanką
Theme URI: https://example.com/
Author: Hiszpański z Kubanką
Description: Lekki, responsywny motyw WordPress dla szkoły języka hiszpańskiego.
Version: 445
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hiszpanski-z-kubanka
*/
:root{--hz-red:#D62828;--hz-yellow:#F4C430;--hz-blue:#1D4E89;--hz-cream:#FFF9F0;--hz-text:#222;--hz-green:#3A9D7C;--hz-radius:14px;
/* Kolory funkcjonalne (audyt CSS, rozmowa 09.2026) — dopasowane do wartości
   już powszechnie używanych inline w Panelu (setki wystąpień gołych hexów).
   Nowe klasy narzędziowe niżej gotowe do użycia od teraz w nowym kodzie,
   zamiast kolejnych "style=color:#666" — nie zastępują dziś istniejących
   miejsc (osobny, świadomie odłożony retrofit), tylko dają jedno źródło
   prawdy na przyszłość. */
--hz-muted:#666;--hz-danger:#a83232;--hz-success:#18745b;--hz-warning:#a86a00}
.hz-text-muted{color:var(--hz-muted)}
.hz-text-danger{color:var(--hz-danger)}
.hz-text-success{color:var(--hz-success)}
.hz-text-warning{color:var(--hz-warning)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--hz-text);background:var(--hz-cream);font-family:Arial,sans-serif;line-height:1.6}h1,h2,h3{font-family:Georgia,serif;line-height:1.1}a{color:inherit}.hz-container{max-width:1120px;margin:auto;padding:0 22px}
.hz-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}.hz-nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.hz-logo{font-size:19px;font-weight:800;color:var(--hz-blue);text-decoration:none;white-space:nowrap;flex-shrink:0}.hz-logo span{color:var(--hz-red)}.hz-menu{display:flex;align-items:center;gap:16px;font-size:14px;flex-wrap:wrap}.hz-menu a{text-decoration:none}.hz-btn{display:inline-block;padding:13px 19px;border-radius:12px;font-weight:800;border:2px solid transparent;text-decoration:none;transition:.2s}.hz-btn-red{background:var(--hz-red);color:#fff}.hz-btn-red:hover{transform:translateY(-1px)}.hz-btn-outline{border-color:var(--hz-blue);color:var(--hz-blue);background:#fff}
.hz-hero{padding:82px 0 70px;background:linear-gradient(135deg,#fff 0 55%,#eef5fb 55%)}.hz-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:45px;align-items:center}.hz-badge{display:inline-block;background:#fff1a8;padding:7px 12px;border-radius:30px;font-weight:700}.hz-hero p{font-size:19px}.hz-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.hz-chip{background:#fff;border-radius:20px;padding:7px 11px}.hz-hero-card{min-height:410px;border-radius:28px;background:linear-gradient(145deg,var(--hz-blue),#15345f);display:flex;align-items:end;padding:28px;color:#fff;box-shadow:0 18px 45px #15345f30}
/* Prawdziwe zdjęcie Yanelys w Hero (rozmowa 09.2026) — zdjęcie jako tło
   karty (background-size:cover), gradient od dołu dla czytelności
   podpisu na tle zdjęcia, ta sama karta co wcześniej z placeholderem —
   zero zmiany układu strony, tylko treść karty. */
.hz-hero-card-photo{background-size:cover;background-position:center;position:relative}
.hz-hero-card-photo::before{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 55%)}
.hz-hero-card-caption{position:relative;z-index:1}
.hz-hero .hz-hero-card-name{margin:0;font-size:14px;font-weight:700;letter-spacing:.02em;opacity:.95}
/* Odświeżony Hero (rozmowa 09.2026) — inspirowane rytmem typografii z
   grafiki referencyjnej (pogrubiony + kursywny kontrast, trzyczęściowe
   hasło, rząd ikon funkcji), ale świadomie BEZ kopiowania gęstego tła
   pocztówkowego (samochód/latarnia/ocean) — zgodne z wcześniejszą
   zasadą "80% spokojne tło / 15% kolor marki / 5% mocne akcenty".
   Cały tekst prawdziwym HTML, nie wypalony w obrazku — dostępność i SEO. */
.hz-hero-title{font-size:clamp(40px,6vw,64px);color:var(--hz-blue);margin:18px 0 14px;line-height:1.1}
.hz-hero-title em{font-style:italic;color:var(--hz-red);font-weight:800}
.hz-hero-tagline{font-family:Georgia,serif;font-size:21px;line-height:1.5;color:var(--hz-text);margin:0 0 24px}
.hz-hero-features{display:flex;gap:22px;margin-bottom:26px;flex-wrap:wrap}
.hz-hero-feature{text-align:center;max-width:120px}
.hz-hero-feature span{font-size:26px;display:block;margin-bottom:6px}
.hz-hero-feature small{font-size:12px;font-weight:700;color:var(--hz-blue);line-height:1.3;display:block}
.hz-hero-flourish{font-family:Georgia,serif;font-style:italic;color:var(--hz-blue);margin:14px 0 0;font-size:15px}
@media(max-width:640px){.hz-hero-features{gap:16px}.hz-hero-feature{max-width:90px}}
.hz-section{padding:75px 0}.hz-center{text-align:center}.hz-lead{max-width:760px;margin:0 auto 38px}.hz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.hz-card{background:#fff;padding:28px;border-radius:var(--hz-radius);box-shadow:0 8px 30px #00000009}.hz-card h3{color:var(--hz-blue)}.hz-icon{font-size:34px}.hz-about{background:#fff}.hz-photo{min-height:390px;border-radius:26px;background:linear-gradient(145deg,var(--hz-red),var(--hz-yellow));display:grid;place-items:center;font-size:70px}.hz-quote{border-left:6px solid var(--hz-yellow);padding:18px 22px;background:#fff9e3;font:22px Georgia,serif}.hz-cuba{background:var(--hz-blue);color:#fff}.hz-cuba h2{color:#fff}.hz-featured{border:3px solid var(--hz-yellow);position:relative}.hz-tag{position:absolute;right:18px;top:18px;background:var(--hz-yellow);padding:5px 9px;border-radius:20px;font-size:12px;font-weight:800}.hz-price{font-size:34px;font-weight:900;color:var(--hz-red);margin:12px 0}.hz-trial{background:linear-gradient(120deg,var(--hz-red),#b51f1f);color:#fff}.hz-trial h2{color:#fff}.hz-trial-box{background:#fff;color:var(--hz-text);padding:30px;border-radius:20px;max-width:850px;margin:30px auto 0}.hz-footer{background:#17202b;color:#dce5ee;padding:45px 0}.hz-footer-grid{display:flex;justify-content:space-between;gap:30px}.hz-footer-app{padding:20px 0;text-align:center}
/* Nowe sekcje strony głównej (rozmowa 09.2026, na podstawie zewnętrznego
   przeglądu marketingowego) — świadomie tymi samymi trzema kolorami co
   reszta strony (--hz-blue/--hz-red/--hz-yellow), zasada 80% spokojnego
   tła / 15% koloru marki / 5% mocnych akcentów z dokumentu przeglądu. */
.hz-trust-bar{background:var(--hz-blue);padding:34px 0}
.hz-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.hz-trust-item{color:#fff}
.hz-trust-item .hz-trust-big{font-family:Georgia,serif;font-size:28px;font-weight:800;color:var(--hz-yellow);display:block;margin-bottom:4px}
.hz-trust-item .hz-trust-small{font-size:13px;opacity:.9}
.hz-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.hz-step{text-align:center;position:relative}
.hz-step-num{width:52px;height:52px;border-radius:50%;background:var(--hz-blue);color:#fff;display:grid;place-items:center;font-family:Georgia,serif;font-size:22px;font-weight:800;margin:0 auto 14px}
.hz-step h4{margin:0 0 6px;color:var(--hz-blue);font-size:15px}
.hz-step p{margin:0;font-size:13px;color:var(--hz-muted)}
.hz-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hz-testimonial{background:#fff;border-radius:var(--hz-radius);padding:26px;box-shadow:0 8px 30px #00000009}
.hz-testimonial p{font-family:Georgia,serif;font-size:17px;font-style:italic;margin:0 0 14px}
.hz-testimonial cite{font-style:normal;font-size:13px;color:var(--hz-muted);font-weight:700}
/* Placeholder wizualnie ODRÓŻNIONY od prawdziwej opinii (przerywana
   ramka, jaśniejszy tekst) — świadomie tak, żeby nikt nie opublikował
   tego przypadkiem jako prawdziwej opinii ucznia. */
.hz-testimonial-placeholder{border:2px dashed #c7cfd8;background:#fafbfc}
.hz-testimonial-placeholder p{color:#98a2ad}
.hz-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.hz-platform-item{background:#fff;border-radius:var(--hz-radius);padding:22px;text-align:center;box-shadow:0 8px 30px #00000009}
.hz-platform-item .hz-icon{font-size:30px;margin-bottom:8px}
.hz-platform-item h4{margin:6px 0;color:var(--hz-blue);font-size:15px}
.hz-platform-item p{margin:0;font-size:13px;color:var(--hz-muted)}
.hz-photo-name{font-family:Georgia,serif;font-size:15px;margin-top:10px;opacity:.85}
@media(max-width:900px){.hz-trust-grid{grid-template-columns:repeat(2,1fr);gap:22px}.hz-steps{grid-template-columns:repeat(2,1fr)}.hz-testimonials{grid-template-columns:1fr}.hz-platform-grid{grid-template-columns:repeat(2,1fr)}}
.hz-menu-toggle{display:none;background:transparent;border:2px solid var(--hz-blue);border-radius:10px;width:44px;height:44px;font-size:19px;color:var(--hz-blue);align-items:center;justify-content:center;cursor:pointer}
.hz-notif-wrap{position:relative;flex-shrink:0}.hz-notif-bell{position:relative;background:transparent;border:none;font-size:20px;cursor:pointer;padding:6px}.hz-notif-badge{position:absolute;top:0;right:0;background:var(--hz-red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}.hz-notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:320px;max-height:420px;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 12px 40px #00000020;z-index:200}.hz-notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #eee;font-size:13px}.hz-notif-panel-head button{background:transparent;border:none;color:var(--hz-blue);font-size:12px;font-weight:700;cursor:pointer}.hz-notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #f3f3f3;text-decoration:none;color:var(--hz-text);align-items:flex-start}.hz-notif-item:hover{background:#f7f9fb}.hz-notif-unread{background:#fff8ee}.hz-notif-icon{font-size:16px}.hz-notif-text{font-size:13px;line-height:1.4}
@media(max-width:900px){
.hz-menu-toggle{display:flex}
.hz-menu{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;box-shadow:0 14px 30px #00000015;z-index:99}
.hz-menu.is-open{display:flex}
.hz-menu a{padding:13px 2px;border-bottom:1px solid #f1f1f1}
.hz-menu a.hz-btn{margin-top:12px;text-align:center;border-bottom:none}
.hz-grid,.hz-cards{grid-template-columns:1fr}
/* Ściśnięcie pionowego rytmu Hero na mobile (rozmowa 09.2026) — zgodnie
   z konkretną uwagą: nie przebudowujemy koncepcji (zdjęcie zostaje na
   końcu, ta sama kolejność co desktop po prostu w jednej kolumnie),
   tylko zmniejszamy odstępy, żeby użytkownik szybciej dotarł do
   zdjęcia Yanelys przy przewijaniu. */
.hz-hero{padding-top:34px}
.hz-hero-title{margin:12px 0 10px}
.hz-hero-tagline{margin:0 0 16px;font-size:18px}
.hz-hero-features{margin-bottom:18px}
.hz-hero-card{min-height:260px}
.hz-footer-grid{flex-direction:column}
}

.hz-login-wrap,.hz-dashboard{padding:70px 0;min-height:65vh}.hz-auth-card{max-width:520px;margin:auto;background:#fff;padding:34px;border-radius:20px;box-shadow:0 12px 40px #00000010}.hz-auth-card input[type=text],.hz-auth-card input[type=password],.hz-auth-card input[type=email],.hz-auth-card input[type=tel],.hz-auth-card input[type=number]{width:100%;padding:13px;border:1px solid #ddd;border-radius:10px;margin:7px 0 17px}.hz-auth-card label{font-weight:700}.hz-dashboard-grid{display:grid;grid-template-columns:260px 1fr;gap:24px}.hz-side,.hz-panel{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 30px #00000009}.hz-side a{display:block;padding:10px 0;color:var(--hz-blue);text-decoration:none;font-weight:700}.hz-side a.is-active{color:var(--hz-red)}.hz-side a:hover{color:var(--hz-red)}.hz-welcome{background:linear-gradient(120deg,var(--hz-blue),#15345f);color:#fff;border-radius:18px;padding:28px;margin-bottom:22px}.hz-mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hz-mini{background:#f7f9fb;border-radius:14px;padding:18px;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:.15s}.hz-mini:hover{background:#eef2f6;transform:translateY(-2px)}.hz-mini-icon{font-size:22px}.hz-mini-label{font-size:13px;color:#666;font-weight:700}.hz-mini-value{font-size:26px;font-weight:800;color:var(--hz-blue)}.hz-status{display:inline-block;padding:5px 9px;border-radius:15px;background:#e5f5ef;color:#18745b;font-size:12px;font-weight:800}@media(max-width:800px){.hz-dashboard-grid,.hz-mini-cards{grid-template-columns:1fr}}

.hz-calendar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.hz-availability-card{border-top:5px solid var(--hz-green)}.hz-availability-card .hz-status{margin-bottom:8px}@media(max-width:800px){.hz-calendar-grid{grid-template-columns:1fr}}

.hz-auth-card select{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:8px;font-size:16px;background:#fff}

.hz-contact-grid{grid-template-columns:1fr 1.2fr}
.hz-small{font-size:12px;font-weight:400;opacity:.7}
.hz-card form label{display:block;font-weight:700;margin-bottom:16px}
.hz-card form input[type=text],.hz-card form input[type=email],.hz-card form input[type=tel],.hz-card form textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font-size:15px;font-weight:400;margin-top:6px;font-family:Arial,sans-serif}
.hz-price-box{background:#fff9e3;border:2px solid var(--hz-yellow);border-radius:14px;padding:20px;margin:22px 0;text-align:center}
.hz-spots{font-weight:700;color:var(--hz-blue);font-size:14px;margin:8px 0}
@media(max-width:800px){.hz-contact-grid{grid-template-columns:1fr}}

/* ===== Zadania i quizy (Strefa ucznia) ===== */
.hz-tasks-list{display:flex;flex-direction:column;gap:14px}
.hz-task-row{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px 20px}
.hz-task-row h3{margin:6px 0 10px;color:var(--hz-blue);font-size:19px}
.hz-task-type{display:inline-block;background:#eef5fb;color:var(--hz-blue);font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.hz-task-hw{display:inline-block;background:#fff1a8;color:#6b5300;font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;margin-left:6px}
.hz-task-result{background:#eaf7f0;border:1px solid #bfe3cf;color:#1a5c40;border-radius:12px;padding:14px 16px;margin:14px 0;font-size:15px}

/* Tabele w treści Biblioteki materiałów (v332 — audyt zewnętrzny 09.2026:
   tabela z importu Markdown (v330) była "gołym" HTML-em bez żadnego
   stylu, czytelnym różnie w zależności od przeglądarki). Skopowane na
   WSZYSTKICH miejscach, gdzie renderuje się treść materiału z Biblioteki
   jako HTML: edytor Biblioteki (.hz-material-content-editor), podgląd
   "Struktura" w panelu nauczyciela (.hz-material-note) i faktyczny widok
   ucznia w Strefie ucznia (.hz-library-material-content) — jeden wspólny
   styl, żeby tabela wyglądała identycznie wszędzie. Przewijanie poziome
   na wąskim ekranie (telefon) przez wrapper `overflow-x:auto`, bez
   łamania układu strony. */
/* v435: ekran „Struktura” Biblioteki — dwie kolumny na laptopie (drzewo + stały panel „Twój wybór”) */
.hz-material-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.hz-material-split-side{position:sticky;top:16px}
.hz-mtree-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.hz-mtree-toolbar input[type=search]{min-width:240px;padding:6px 10px}
.hz-msel-list{margin:6px 0 12px;padding-left:18px;max-height:46vh;overflow:auto}
.hz-msel-list li{margin:3px 0}
#hz-msel-submit:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:900px){.hz-material-split{grid-template-columns:1fr}.hz-material-split-side{position:static}}
.hz-material-content-editor table,.hz-material-note table,.hz-library-material-content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;display:block;overflow-x:auto;white-space:nowrap}
.hz-material-content-editor table thead,.hz-material-note table thead,.hz-library-material-content table thead,.hz-material-content-editor table tbody,.hz-material-note table tbody,.hz-library-material-content table tbody{display:table;width:100%;table-layout:auto}
.hz-material-content-editor th,.hz-material-note th,.hz-library-material-content th,.hz-material-content-editor td,.hz-material-note td,.hz-library-material-content td{padding:9px 12px;border:1px solid #e0e0e0;text-align:left;white-space:normal}
.hz-material-content-editor th,.hz-material-note th,.hz-library-material-content th{background:#f6f7f7;font-weight:700;color:var(--hz-blue)}
.hz-material-content-editor tbody tr:nth-child(even),.hz-material-note tbody tr:nth-child(even),.hz-library-material-content tbody tr:nth-child(even){background:#fafbfc}

.hz-quiz-form{display:flex;flex-direction:column;gap:18px;margin-top:20px;margin-right:210px}
@media(max-width:900px){.hz-quiz-form{margin-right:0}}
.hz-q-block{background:#fff;border:1px solid #eee;border-left:4px solid var(--hz-blue);border-radius:14px;padding:20px 22px;box-shadow:0 6px 20px #00000008}
.hz-q-text{font-weight:700;margin:0 0 14px;font-size:17px;font-family:Georgia,serif}
.hz-q-image{max-width:100%;max-height:260px;border-radius:10px;display:block;margin-bottom:12px}
.hz-q-option{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:8px;cursor:pointer}
.hz-q-option:hover{background:#f6f7f7}
/* Własny styl radio/checkbox (rozmowa 09.2026) — zastępuje domyślne,
   szare kontrolki przeglądarki tymi samymi kolorami co reszta motywu
   (--hz-blue), bez dotykania JS-a: appearance:none + rysowanie od nowa
   przez border/box-shadow, zachowując natywną dostępność (klawiatura,
   czytniki ekranu) prawdziwego elementu input. */
.hz-q-option input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex-shrink:0;border:2px solid #c7cfd8;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.hz-q-option input[type=radio]{border-radius:50%}
.hz-q-option input[type=checkbox]{border-radius:6px}
.hz-q-option input:checked{border-color:var(--hz-blue);box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 11px var(--hz-blue)}
.hz-q-option input[type=checkbox]:checked{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 11px var(--hz-blue)}
.hz-q-option input:focus-visible{outline:2px solid var(--hz-blue);outline-offset:2px}
.hz-q-input{border:1px solid #ddd;border-radius:8px;padding:10px;font-size:15px;font-family:inherit;width:100%;transition:border-color .15s}
.hz-q-input:focus{outline:none;border-color:var(--hz-blue)}
/* Pola wstawione w miejscu luki (fill_blank/cloze, rozmowa 09.2026) —
   podkreślenie zamiast pełnej ramki, bardziej naturalne w środku zdania
   niż osobny prostokąt. Świadomie ODDZIELNA klasa od .hz-q-input (dzielonej
   z wieloliniowym polem dla pytań otwartych), gdzie ta sama stylistyka
   wyglądałaby źle na dużym, wielowierszowym polu. */
.hz-q-input-inline{border:none;border-bottom:2px solid #c7cfd8;background:transparent;padding:4px 2px;font-size:16px;font-family:inherit;color:var(--hz-text);transition:border-color .15s}
.hz-q-input-inline:focus{outline:none;border-bottom-color:var(--hz-blue)}

.hz-dragdrop{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:20px;touch-action:none}
.hz-dd-col{display:flex;flex-direction:column;gap:10px}
.hz-dd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #eee;border-radius:10px;padding:10px 14px}
.hz-dd-left-text{font-weight:700}
.hz-dd-slot{min-width:110px;min-height:38px;border:2px dashed #ccc;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#fafafa}
/* Przyklejona pula na szerokich ekranach (v276, zgłoszenie użytkownika:
   "pasek ze słowami powinien być cały czas widoczny po prawej stronie, a
   nie żebym musiał scrolować do góry i na dół... coś podobnego robiłeś
   przy uzupełnianiu luk") — CELOWO position:sticky, NIE position:fixed
   jak `.hz-shared-pool-wrap`: `.hz-shared-pool-wrap` istnieje raz na CAŁE
   zadanie, więc "fixed" (zawsze w tym samym miejscu ekranu) jest
   bezpieczne, ale `.hz-dd-pool` może wystąpić WIELOKROTNIE na jednej
   stronie (kilka pytań "dopasowanie"/"kolejność" w jednym quizie
   mieszanym) — gdyby wszystkie były "fixed" w tym samym miejscu,
   nakładałyby się na siebie. `position:sticky` przykleja każdą pulę
   TYLKO w obrębie WŁASNEGO bloku pytania: trzyma się góry widoku, dopóki
   przewijasz listę slotów TEGO pytania, i przestaje się przyklejać, gdy
   przewiniesz do następnego pytania — bez kolizji między pulami. Odstęp
   od góry (`top`) ustawiany dynamicznie przez JS (`updateStickyPoolOffsets()`
   w page-zadanie.php), żeby pula nie chowała się pod przyklejonym
   nagłówkiem strony (`.hz-header`, sam też position:sticky) — ta sama
   funkcja i ten sam mechanizm, co dla `.hz-shared-pool-wrap` wyżej.
   `align-self:start` (uzupełnienie `align-items:start` na `.hz-dragdrop`
   niżej) i `max-height`+`overflow-y:auto`, żeby długa pula nie urosła
   ponad wysokość ekranu. */
.hz-dd-pool{background:#f6f7f7;border-radius:12px;padding:14px;flex-direction:row;flex-wrap:wrap;align-content:flex-start;position:sticky;top:0;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto}
/* Panel boczny dla wspólnej puli słów (rozmowa 09.2026, na wyraźną
   prośbę użytkownika po analizie logu diagnostycznego z v261: "może
   zamiast umieszczać słowa u góry umieśćmy je z boku... kilkadziesiąt
   wersji temu coś takiego zrobiłeś i to działało lepiej") — kluczowa
   różnica względem przyklejenia u góry (v252): panel BOCZNY, w
   position:fixed, NIGDY się nie rusza podczas przewijania strony w
   pionie, więc przeciąganie z puli do dowolnego WIDOCZNEGO zdania to
   zawsze krótki, lokalny ruch w bok, nie długi ruch w pionie wymagający
   przewijania strony W TRAKCIE trzymania słowa (dokładnie ten problem
   ujawniony w logu z v261 — nieudane próby lądowały daleko od celu, bo
   treść przesuwała się pod nieruchomym kursorem podczas automatycznego
   przewijania). Na wąskich ekranach (telefon) panel boczny nie mieści
   się sensownie obok treści — poniższa reguła @media (v265) używa tej
   samej zasady "pozycja nigdy się nie rusza podczas przewijania", ale
   jako pasek przyklejony na sztywno do DOŁU ekranu zamiast do boku,
   bo telefon ma więcej miejsca w pionie niż w poziomie. Patrz komentarz
   przy regule @media niżej po szczegóły techniczne.*/
.hz-shared-pool-wrap{position:fixed;right:20px;width:180px;max-height:75vh;overflow-y:auto;z-index:90}
/* v265: naprawa dla telefonów — na laptopie panel boczny (wyżej) działał
   perfekcyjnie od razu, ale test na prawdziwym telefonie (zrzuty ekranu
   użytkownika) pokazał, że TA reguła @media nadal używała starego
   position:sticky z v252, które ma dokładnie ten sam problem: podczas
   przewijania strony w trakcie trzymania słowa pula przesuwa się razem
   z treścią, więc palec "zostaje w tyle" i upuszczenie trafia w puste
   miejsce zamiast w slot. Rozwiązanie: position:fixed przyklejony do
   dołu ekranu (bottom:0), tak jak panel boczny jest przyklejony do
   prawej krawędzi — w obu przypadkach element NIGDY nie rusza się
   względem ekranu, niezależnie od przewijania strony.
   top:auto!important jest konieczne, bo JS (ta sama funkcja
   updatePoolStickyOffset, używana też dla trybu przyklejonego u góry)
   ustawia inline style "top" — bez nadpisania go, element rozciągałby
   się między górnym "top" a dolnym "bottom" zamiast trzymać się tylko
   dołu. padding-bottom:36vh na formularzu (w jednostkach vh, nie px,
   żeby skalowało się z wysokością paska) rezerwuje miejsce, żeby
   ostatnie pytania nie chowały się pod stałym paskiem (max-height:32vh
   + margines bezpieczeństwa). Auto-scroll z v255 pozostaje bez zmian —
   nadal jest potrzebny do innego scenariusza: dociągnięcia widoku do
   celu POZA ekranem, a nie do unikania przewijania W TRAKCIE trzymania.*/
@media(max-width:900px){
    .hz-shared-pool-wrap{position:fixed;top:auto!important;bottom:0;left:0;right:0;width:auto;max-height:32vh;overflow-y:auto;border-radius:16px 16px 0 0;box-shadow:0 -4px 12px rgba(0,0,0,0.15);margin-bottom:0;z-index:90}
    .hz-quiz-form{padding-bottom:36vh}
}
.hz-dd-chip{background:var(--hz-blue);color:#fff;padding:9px 14px;border-radius:20px;font-weight:700;cursor:grab;user-select:none;touch-action:none}
.hz-dd-slot .hz-dd-chip{margin:0}
/* Mobilny dolny pasek dla puli w zadaniach "dopasowanie" i "kolejność"
   (.hz-dd-pool) — ten sam problem i to samo rozwiązanie co dla
   .hz-shared-pool-wrap w v265 (patrz komentarz wyżej), tylko wcześniej
   nieobjęte, bo to inna klasa/inny typ zadania. Na wąskim ekranie
   .hz-dragdrop i tak już się składa w jedną kolumnę (patrz reguła niżej)
   — bez tego pula chipsów do przeciągnięcia ląduje POD listą slotów w
   normalnym przepływie, więc uczeń musi bez przerwy przewijać między
   trzymanym kciukiem chipsem a miejscem docelowym. Stały pasek na dole
   (position:fixed) rozwiązuje to tak samo jak przy uzupełnianiu luk.
   padding-bottom na .hz-dragdrop rezerwuje miejsce, żeby ostatnie sloty
   nie chowały się pod paskiem.
   NAPRAWA v275 — próg zmieniony z 640px na 900px: v273 użył INNEGO
   progu niż .hz-shared-pool-wrap (900px, patrz reguła @media wyżej) dla
   "dokładnie tego samego problemu i tego samego rozwiązania", więc na
   ekranie o szerokości 641-900px (np. telefon w poziomie, mały tablet)
   zadania "uzupełnianie luk" dostawały poprawny dolny pasek, a
   "dopasowanie"/"kolejność" wciąż renderowały się jako dwie kolumny
   grid — ZGŁOSZONY BŁĄD: przy CSS Grid domyślne align-items:stretch
   rozciąga .hz-dd-pool (2. kolumnę) do wysokości .hz-dd-col ze slotami
   (1. kolumny, zwykle wyższej przy kilku parach), więc szare tło puli
   ciągnie się daleko w dół, a same chipsy trzymają się jej góry — przy
   przewinięciu do niższych slotów widać tylko pustą, rozciągniętą
   resztę tła zamiast słów. align-items:start na .hz-dragdrop (poniżej,
   POZA media query — dotyczy każdej szerokości, nieszkodliwe też na
   mobile, gdzie .hz-dd-pool i tak jest position:fixed) usuwa rozciąganie
   u źródła, a wyrównanie progu na 900px usuwa samą lukę międzyprogową. */
.hz-dragdrop{align-items:start}
@media(max-width:900px){
    .hz-dragdrop{grid-template-columns:1fr;padding-bottom:34vh}
    .hz-dd-pool{position:fixed;top:auto!important;bottom:0;left:0;right:0;width:auto;max-height:32vh;overflow-y:auto;border-radius:16px 16px 0 0;box-shadow:0 -4px 12px rgba(0,0,0,0.15);margin:0;z-index:90}
}

/* v405: bank słów w „uzupełnianiu luk” miał TRZY paski przewijania (strona + panel `.hz-shared-pool-wrap` + wewnętrzna
   kolumna `.hz-dd-shared-pool`, która dziedziczyła przewijanie i przyklejenie z `.hz-dd-pool`). Przewija tylko panel
   zewnętrzny (to on jest przyklejony i ma max-height); wewnętrzna kolumna to zwykła lista słów. Na telefonie ta
   sama kolumna była dodatkowo position:fixed wewnątrz paska position:fixed — teraz jest zwykłą zawartością paska. */
.hz-shared-pool-wrap .hz-dd-shared-pool{position:static!important;max-height:none;overflow:visible;background:transparent;padding:0;border-radius:0;box-shadow:none;margin:0;width:auto;z-index:auto}

/* v408: uproszczony ekran startowy dziecka (Strefa ucznia → tryb dla młodszych dzieci). Zawsze 2 kolumny, duże kafelki. */
.hz-kids-home{max-width:640px;margin:0 auto;padding:8px 0 24px;text-align:center}
.hz-kids-home h1{font-size:28px;margin:6px 0 4px}
.hz-kids-home-lead{font-size:18px;margin:0 0 16px;color:#444}
.hz-kids-home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hz-kids-home-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:170px;padding:16px 10px;border-radius:22px;text-decoration:none;border:3px solid transparent;transition:transform .15s}
.hz-kids-home-tile:active{transform:scale(.97)}
.hz-kids-home-tile:focus-visible{outline:4px solid #222;outline-offset:3px}
.hz-kids-home-emoji{font-size:64px;line-height:1}
.hz-kids-home-tile b{font-size:20px;line-height:1.2;font-weight:800}
.hz-kids-home-adult{margin-top:22px;font-size:13px;color:#777}
.hz-kids-back{display:inline-block;font-size:20px;font-weight:800;text-decoration:none;padding:8px 14px;border-radius:14px;background:#E3EDF7}
@media(max-width:380px){.hz-kids-home-tile{min-height:140px}.hz-kids-home-emoji{font-size:52px}.hz-kids-home-tile b{font-size:17px}}

/* v409: cała Strefa ucznia w trybie dla młodszych dzieci — bez menu bocznego, jedna kolumna, pasek z przyciskiem Start. */
.hz-dashboard-grid.hz-kids-zone{display:block}
/* Kolumna treści jest dzieckiem siatki: bez min-width:0 rozszerza się do najszerszej zawartości (np. paska zakładek gier) i na telefonie cała strona przewija się w poziomie. */
.hz-dashboard-grid>section{min-width:0}
.hz-kids-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px}
.hz-kids-bar-out{font-size:13px;color:#777}

/* v411: na telefonie widoczna jest tylko pula pytania, które dziecko właśnie ogląda (patrz page-zadanie.php, updateActivePool),
   a pusty zapas 34vh pod pulą zostaje tylko pod ostatnim pytaniem (reszta formularza ma padding-bottom z .hz-quiz-form). */
.hz-pool-off{display:none!important}
@media(max-width:900px){.hz-q-block:not(:last-child) .hz-dragdrop{padding-bottom:0}}
/* v412: pula „kolejność” na telefonie leży normalnie pod okienkami, na białym polu pytania (jak na laptopie), bez dolnego paska
   i bez rezerwy 34vh. Dopasowanie i luki zostają na pasku, bo ich okienka są rozrzucone po długiej liście. */
@media(max-width:900px){
    .hz-dd-col.hz-dd-pool.hz-dd-pool-inline{position:static!important;top:auto!important;left:auto;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;border-radius:12px;box-shadow:none;margin:0;z-index:auto}
    .hz-dragdrop.hz-dd-ord{padding-bottom:0}
}

.hz-wordwall-frame{position:relative;padding-top:66%;border-radius:14px;overflow:hidden;border:1px solid #eee;margin-top:16px}
.hz-wordwall-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== Sesja na żywo (ranking jak w Kahoot) ===== */
.hz-host-top{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;font-size:14px;color:#666}
.hz-host-players{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hz-host-chip{background:#eef5fb;color:var(--hz-blue);padding:7px 14px;border-radius:20px;font-weight:700;font-size:14px}

.hz-host-timer{width:100%;height:14px;background:#eee;border-radius:20px;overflow:hidden}
.hz-host-timer-fill{height:100%;background:linear-gradient(90deg,#26890c,#d89e00,#e21b3c);transition:width 1s linear}
.hz-host-image{max-width:100%;max-height:280px;border-radius:12px;display:block;margin:16px auto}

.hz-host-bars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hz-host-bar-row{display:grid;grid-template-columns:1fr 2fr 40px;align-items:center;gap:10px;font-size:14px}
.hz-host-bar-track{background:#eee;border-radius:8px;height:20px;overflow:hidden}
.hz-host-bar-fill{height:100%;background:var(--hz-blue)}
.hz-host-bar-fill.is-correct{background:#26890c}

.hz-podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.hz-podium-spot{background:#fff;border:2px solid #eee;border-radius:14px;padding:16px 14px;text-align:center;min-width:110px}
.hz-podium-spot.hz-podium-mine{border-color:var(--hz-red)}
.hz-podium-1{order:2;transform:translateY(-14px);border-color:#ffd23f;background:#fffbe9}
.hz-podium-2{order:1}
.hz-podium-3{order:3}
.hz-podium-medal{font-size:34px}
.hz-podium-name{font-weight:800;margin-top:4px}
.hz-podium-score{color:#666;font-size:14px}
.hz-rest-list{max-width:340px;margin:14px auto 0;text-align:left;color:#444}
.hz-rest-list li{padding:4px 0}
.hz-rest-mine{font-weight:800;color:var(--hz-red)}

.hz-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.hz-answer-btn{padding:26px 14px;border:none;border-radius:14px;color:#fff;font-size:18px;font-weight:800;cursor:pointer;transition:transform .15s ease}
.hz-answer-btn:active{transform:scale(.96)}
.hz-answer-btn:disabled{opacity:.6;cursor:default}
@media(max-width:480px){.hz-answer-grid{grid-template-columns:1fr}}
.hz-live-alert{background:#fdeaea;border:2px solid var(--hz-red);border-radius:14px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;animation:hz-pulse 2s infinite}
.hz-live-alert .hz-btn{margin-left:auto}
@keyframes hz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,40,40,.25)}50%{box-shadow:0 0 0 8px rgba(214,40,40,0)}}

.hz-live-banner{background:#fdeeee;border:2px solid #e21b3c;border-radius:14px;padding:16px 18px;margin-bottom:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px}
.hz-live-banner .hz-btn{margin-left:auto}
.hz-task-live{display:inline-block;background:#fdeeee;color:#e21b3c;font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;margin-left:6px}

/* ===== Panel Yanelys (osobny moduł, poza wp-admin) — stylowanie ponownie użytych elementów ===== */
/* v355 — trzeci krok punktu P2 z checklisty audytu UX/UI ("unifikacja
   typografii: Inter/system-ui dla panelu, zachowanie Georgia+Arial na
   stronie publicznej"). Zakres świadomie ograniczony do `.hz-panel-wrap`
   — jedyny wspólny kontener WSZYSTKICH ekranów Panelu nauczyciela
   (renderowany raz, w hz_panel_router(), inc/teacher-panel.php, wokół
   każdego `case` przełącznika widoków). "Strefa ucznia" (Georgia+Arial,
   `.hz-dashboard`/`.hz-container` w page-strefa-ucznia.php) i strona
   publiczna (landing, `body`/`h1..h3` na górze tego pliku) NIE są tu
   dotknięte — to one są "stroną publiczną" z checklisty, mają zostać
   przy dotychczasowej, "ciepłej" typografii marki (Georgia na
   nagłówkach). Panel administracyjny to inny kontekst użycia (praca,
   dużo danych/tabel na ekranie) — stąd prostszy, bardziej "SaaS-owy"
   krój.
   Świadomie BEZ ładowania czcionki Inter z Google Fonts (dodatkowe
   zapytanie sieciowe + zależność zewnętrzna dla małej strony szkoły
   językowej, bez uzasadnionej korzyści wizualnej na tym etapie) — użyty
   gotowy stos systemowych czcionek bezszeryfowych ("Inter/system-ui" z
   checklisty rozumiane jako RODZAJ kroju, nie konkretny plik), ten sam
   co np. GitHub/Vercel: na każdym systemie renderuje się jego domyślną,
   nowoczesną czcionką systemową (San Francisco na macOS/iOS, Segoe UI na
   Windows, Roboto na Androidzie), bez pobierania czegokolwiek. */
.hz-panel-wrap,
.hz-panel-wrap h1,.hz-panel-wrap h2,.hz-panel-wrap h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hz-panel-wrap{max-width:980px}
/* v356 (audyt UX/UI, punkt P2 "accessibility/focus") — Panel nie miał
   dotąd ŻADNEJ świadomie zaprojektowanej reguły `:focus`/`:focus-visible`
   poza dwoma polami quizu (`.hz-q-input*`, niedotknięte tutaj — mają
   już własny, celowy zamiennik obramowania). Reszta interaktywnych
   elementów Panelu (linki, przyciski, pola formularzy) polegała
   wyłącznie na domyślnym obrysie przeglądarki — nigdzie w CSS nie ma
   `outline:none` usuwającego go, więc fokus klawiaturowy zawsze DZIAŁAŁ,
   ale wyglądał niespójnie między przeglądarkami/systemami i bywał mało
   widoczny na kolorowych tłach przycisków (`.hz-btn-primary` na
   czerwonym, `.hz-btn-secondary` na białym z niebieskim obramowaniem).
   Jedna, spójna, wyraźna reguła zamiast domyślnej — tylko `:focus-visible`
   (czyli TYLKO fokus klawiaturą/Tab, nie kliknięcie myszą — dokładnie to
   rozróżnienie, po które istnieje `:focus-visible`, więc kliknięcie
   przycisku myszą nadal wygląda tak jak dotąd). */
.hz-panel-wrap a:focus-visible,
.hz-panel-wrap button:focus-visible,
.hz-panel-wrap input:focus-visible,
.hz-panel-wrap select:focus-visible,
.hz-panel-wrap textarea:focus-visible{outline:3px solid var(--hz-yellow);outline-offset:2px}
/* .hz-q-input*/`outline:none` (wyżej w tym pliku) to ŚWIADOMY, wcześniejszy
   wybór zamiennika fokusu (podświetlenie obramowania zamiast obrysu) dla
   pól quizu — dotyczy też ekranu "Testuj quiz" w Panelu, więc trzeba go
   tu jawnie wyłączyć z nowej reguły ogólnej, żeby jej wyższa specyficzność
   (dopisana PÓŹNIEJ w pliku) go nie nadpisała. */
.hz-panel-wrap .hz-q-input:focus-visible,
.hz-panel-wrap .hz-q-input-inline:focus-visible{outline:none}
.hz-panel-wrap .button,.hz-panel-wrap .hz-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid #ccc;background:#f6f7f7;color:#2c3338;font-size:14px;cursor:pointer;text-decoration:none;font-weight:400;transition:none}
.hz-panel-wrap .button:hover,.hz-panel-wrap .hz-btn:hover{background:#f0f0f1}
.hz-panel-wrap .button-primary,.hz-panel-wrap .hz-btn-primary{background:var(--hz-red);border-color:var(--hz-red);color:#fff}
.hz-panel-wrap .button-primary:hover,.hz-panel-wrap .hz-btn-primary:hover{background:#b5162c}
.hz-panel-wrap .button-secondary,.hz-panel-wrap .hz-btn-secondary{background:#fff;border-color:var(--hz-blue);color:var(--hz-blue)}
.hz-panel-wrap .button-large,.hz-panel-wrap .hz-btn-lg{padding:12px 22px;font-size:15px}
/* .hz-panel-wrap .button-* pozostaje obok .hz-btn* celowo — rozmowa 09.2026,
   "Ujednolicenie przycisków Panelu (.button -> .hz-btn)": część znaczników
   przycisków w Panelu leży wewnątrz funkcji _metabox_html() renderowanych
   TAKŻE w prawdziwym wp-admin (przez add_meta_box()), gdzie klasa musi
   zostać "button", żeby korzystać z natywnego stylu wp-admin — te reguły
   .button muszą zostać, dopóki te funkcje istnieją w obu kontekstach. */
.hz-panel-wrap .widefat{width:100%;border-collapse:collapse;margin:10px 0 18px;background:#fff}
.hz-panel-wrap .widefat th,.hz-panel-wrap .widefat td{padding:10px 12px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
.hz-panel-wrap .widefat thead th{background:#f6f7f7;font-weight:700}
.hz-panel-wrap .striped tbody tr:nth-child(odd){background:#fafafa}
.hz-panel-wrap .notice{border-radius:10px;padding:12px 16px;margin:0 0 16px;font-size:14px;border:1px solid transparent}
.hz-panel-wrap .notice.inline{margin:12px 0}
.hz-panel-wrap .notice-warning{background:#fff8e5;border-color:#f0d9a0;color:#6b5300}
.hz-panel-wrap .notice-error{background:#fdeaea;color:#a83232;border-color:#f3b8b8}
.hz-panel-wrap .notice-success{background:#eaf7f0;color:#18745b;border-color:#bfe3cf}
.hz-panel-wrap .form-table th{text-align:left;padding:8px 12px 8px 0;vertical-align:top;font-weight:700;width:200px}
.hz-panel-wrap .form-table td{padding:8px 0}
.hz-panel-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hz-icon-btn{display:inline-flex!important;align-items:center;justify-content:center;width:34px;height:30px;padding:0!important;font-size:15px;line-height:1!important;text-align:center}
.hz-panel-nav a{padding:8px 14px;border-radius:20px;background:#f6f7f7;color:#444;font-size:14px;font-weight:600;text-decoration:none}
.hz-panel-nav a.is-active,.hz-panel-nav a:hover{background:var(--hz-red);color:#fff}
.hz-panel-subtabs{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;border-bottom:2px solid #eee}
.hz-panel-subtabs a{padding:0 0 10px;color:#666;font-size:14px;font-weight:700;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px}
.hz-panel-subtabs a.is-active{color:var(--hz-red);border-bottom-color:var(--hz-red)}
.hz-panel-table-actions{white-space:nowrap;display:flex;gap:8px}
/* v342 (rozmowa 09.2026, o widoku edycji Tematu lekcji: "wydaje mi się, że
   jest to zbyt rozrzucone, za dużo przerw etc") — mniejszy padding karty i
   jawny, ciaśniejszy odstęp między polami (`<p>` w tej klasie dotąd nie
   miało własnej reguły, więc korzystało z domyślnego marginesu przeglądarki
   ~16px na KAŻDE pole) — dotyczy WSZYSTKICH kart formularzy w Panelu
   używających tej klasy (Tematy/Quizy/Materiały/Zadania), nie tylko
   Tematu lekcji, żeby wygląd Panelu został spójny. */
.hz-panel-form-section{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px 20px;margin-bottom:14px}
.hz-panel-form-section h2,.hz-panel-form-section h3{margin-top:0;margin-bottom:10px}
.hz-panel-form-section>p{margin:0 0 10px}
.hz-panel-form-section>p:last-child{margin-bottom:0}

/* v348 — przeorganizowanie ekranu "Edytuj lekcję" (zewnętrzna recenzja
   UX): duży, kolorowy znacznik statusu lekcji na górze ekranu (osobny
   od małych .hz-status używanych gdzie indziej w Panelu, stąd własne
   modyfikatory koloru zamiast dotykania .hz-status globalnie — ten sam
   .hz-status jest np. na Kalendarzu z innym znaczeniem/kolorem). */
.hz-lesson-status-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:800;margin-bottom:16px}
.hz-lesson-status-badge.is-draft{background:#fff3d6;color:#8a6100}
.hz-lesson-status-badge.is-scheduled{background:#e8f0fe;color:#1a4fa0}
.hz-lesson-status-badge.is-published{background:#e5f5ef;color:#18745b}

/* v348 — karty uczniów zamiast tabeli (czytelniej na telefonie, mniej
   przewijania w bok niż tabela z 5 kolumnami). */
.hz-student-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.hz-student-card{background:#f7f9fb;border-radius:12px;padding:14px 16px}
.hz-student-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.hz-student-card-name{font-weight:800}
.hz-student-card select{width:100%;margin-bottom:6px}
.hz-student-card input[type=text]{width:100%;margin-bottom:6px}
.hz-student-card-remove{font-size:12px;color:var(--hz-muted);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline}
.hz-student-card-remove:hover{color:var(--hz-danger)}
@media(max-width:800px){.hz-student-cards{grid-template-columns:1fr}}

/* v348 — ikony typu treści + status dostępu w liście planu lekcji. */
.hz-content-type-icon{margin-right:4px}
.hz-content-access-status{font-size:12px;margin-top:3px}
.hz-content-access-status.is-granted{color:#18745b}
.hz-content-access-status.is-pending{color:#8a6100}
.hz-content-access-status.is-not_shared{color:var(--hz-muted)}

/* v348 — pasek "Zapisz" przyklejony do dołu ekranu edycji lekcji, żeby
   nie trzeba było przewijać z powrotem na górę po uzupełnieniu
   wszystkich sekcji formularza. */
.hz-sticky-save-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid #eee;padding:12px 0;margin-top:14px;z-index:50;display:flex;gap:10px;align-items:center}

/* v352 — dashboard nauczyciela przebudowany wokół 4 pytań (checklista
   audytu UX/UI, ostatni punkt P1): "📅 Dziś" (lista dzisiejszych lekcji)
   i "🔴 Do Twojej uwagi" (lista rzeczy czekających na reakcję) to nowe
   sekcje, potrzebujące własnego, prostego stylu wiersza/listy zamiast
   tabeli — dashboard ma być szybki do przeskanowania wzrokiem, nie
   kolejną tabelą administracyjną. */
.hz-dashboard-today-list{display:flex;flex-direction:column;gap:6px}
.hz-dashboard-today-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:10px;background:#f7f9fb;color:inherit;text-decoration:none;transition:.15s}
.hz-dashboard-today-row:hover{background:#eef2f6}
.hz-dashboard-today-time{font-weight:800;color:var(--hz-blue);min-width:48px}
.hz-dashboard-today-who{flex:1;font-weight:700}
.hz-dashboard-today-type{color:var(--hz-muted);font-size:13px}
.hz-dashboard-attention-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hz-dashboard-attention-list a{text-decoration:none;color:inherit;font-weight:700}
.hz-dashboard-attention-list a:hover{text-decoration:underline}
@media(max-width:600px){.hz-dashboard-today-row{flex-wrap:wrap}.hz-dashboard-today-type{width:100%;padding-left:62px}}

/* v353 — pierwszy krok punktu P2 z checklisty audytu UX/UI ("Mobile —
   tabele typu Uczeń|Obecność|Notatka|Dziennik na telefonie będą
   problematyczne... docelowo: tabela → karta"). Klasa ogólnego
   przeznaczenia dla tabel Panelu o kształcie "Nazwa | Informacje |
   (akcje)" — dokładnie ten sam kształt co Uczniowie/Grupy/Dostępność/
   Lekcje próbne (inc/teacher/teacher-roster.php). CSS-owe przejście
   table→karta, BEZ atrybutów data-label — bez potrzeby, bo pierwsza
   kolumna (pogrubiona nazwa) i ostatnia (przyciski akcji) są
   samo-opisujące się z samego wyglądu, a środkowa "Informacje" to i tak
   już sformatowany, wielowierszowy blok z hz_teacher_column_content().
   Tabele o innym kształcie (więcej kolumn, np. listy Zadań/Quizów)
   dostały od v357 OSOBNĄ klasę, `.hz-responsive-table-labeled` (niżej w
   tym pliku) — tam prawdziwe etykiety per komórka (`data-label`) są
   konieczne, bo sama kolejność/wygląd komórek już nie wystarcza. */
@media(max-width:800px){
    table.hz-responsive-table,table.hz-responsive-table tbody,table.hz-responsive-table tr{display:block;width:100%}
    table.hz-responsive-table thead{display:none}
    table.hz-responsive-table tr{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px 14px;margin-bottom:10px}
    table.hz-responsive-table.striped tbody tr:nth-child(odd){background:#fff}
    table.hz-responsive-table td{display:block;border:none;padding:3px 0}
    table.hz-responsive-table td.hz-panel-table-actions{padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
}

/* v357 (audyt UX/UI, punkt P2 "mobile: tabele → karty", ciąg dalszy po
   v353) — druga, ogólnego przeznaczenia klasa dla tabel Panelu o
   BARDZIEJ ZŁOŻONYM kształcie niż `.hz-responsive-table` wyżej (więcej
   niż 3 kolumny, dodatkowa kolumna checkboxa itp. — pierwsze
   zastosowanie: lista "Zadania i quizy", `hz_panel_list_quizzes()`).
   Tu każda oznaczona komórka NIESIE swoją etykietę w atrybucie
   `data-label` (bo w przeciwieństwie do prostszych tabel z v353, sama
   kolejność/wygląd komórek nie wystarczy, żeby zgadnąć, co która
   oznacza) — etykieta wstawiana pseudoelementem `::before` z
   `content:attr(data-label)`, WYŁĄCZNIE pod 800px. Komórki BEZ
   `data-label` (checkbox zaznaczania, kolumna akcji) renderują się jak
   dotąd, bez żadnej doklejonej etykiety — są same w sobie czytelne. */
@media(max-width:800px){
    table.hz-responsive-table-labeled,table.hz-responsive-table-labeled tbody,table.hz-responsive-table-labeled tr{display:block;width:100%}
    table.hz-responsive-table-labeled thead{display:none}
    table.hz-responsive-table-labeled tr{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px 14px;margin-bottom:10px}
    table.hz-responsive-table-labeled.striped tbody tr:nth-child(odd){background:#fff}
    table.hz-responsive-table-labeled td{display:block;border:none;padding:5px 0}
    table.hz-responsive-table-labeled td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#888;margin-bottom:2px}
    table.hz-responsive-table-labeled td.hz-panel-table-actions{padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
}

.hz-milestone-journey{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 30px #00000009;margin-top:22px}
.hz-milestone-journey h3{margin-top:0}
.hz-milestone-row{margin-bottom:16px}
.hz-milestone-row:last-child{margin-bottom:0}
.hz-progress-track{background:#eef2f6;border-radius:20px;height:14px;overflow:hidden;margin:8px 0}
.hz-progress-fill{background:linear-gradient(90deg,var(--hz-yellow),var(--hz-red));height:100%;border-radius:20px}
.hz-milestone-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--hz-muted)}
.hz-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:12px}
.hz-badge-card{background:#f7f9fb;border-radius:14px;padding:16px;text-align:center}
.hz-badge-icon{font-size:32px}
.hz-badge-name{font-weight:800;margin-top:6px}
.hz-badge-desc{font-size:12px;color:var(--hz-muted);margin-top:4px}

/* Kompozytor pakietu treści "Temat lekcji" — Etap 2 Biblioteki materiałów
   (rozmowa 09.2026, assets/hz-lesson-package.js). Pierwszy ekran zbudowany
   API-first zgodnie z decyzją architektoniczną — cały interfejs poniżej
   renderowany przez JS w #hz-lesson-package-app, nie formularzem PHP. */
.hz-lp-warning{background:#fff6e5;border:1px solid #e8c77a;border-radius:8px;padding:10px 14px;color:#7a5b00;margin-bottom:14px}
.hz-lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:800px){.hz-lp-grid{grid-template-columns:1fr}}
/* v363 — lewa kolumna siatki Pakietu: "Biblioteka — wybierz sekcje" +
   "Ćwiczenia" (przeniesiony węzeł DOM, patrz assets/hz-lesson-package.js)
   ułożone jedno pod drugim, tej samej szerokości (jedna kolumna siatki —
   na wyraźną prośbę użytkownika). Prawa kolumna ("Pakiet — kolejność
   treści", .hz-lp-panel bez dodatkowej klasy) rozciąga się do wysokości
   tego stosu domyślnym `align-items:stretch` .hz-lp-grid — bez tego nie
   trzeba nic dodatkowo ustawiać. */
.hz-lp-left-stack{display:flex;flex-direction:column;gap:18px}
.hz-lp-panel{background:#f7f9fb;border-radius:12px;padding:16px}
.hz-lp-panel h3{margin-top:0}
.hz-lp-search{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px}
/* v325 — filtr poziomu CEFR obok wyszukiwarki Biblioteki w kompozytorze Pakietu Tematu (rozmowa 09.2026). */
.hz-lp-level-filter{padding:8px 10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px}
.hz-lp-browse-list{max-height:420px;overflow-y:auto}
.hz-lp-material-card{background:#fff;border-radius:8px;padding:10px 12px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.hz-lp-material-title{margin-bottom:6px}
.hz-lp-section-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-top:1px solid #f0f0f0}
.hz-lp-section-row:first-of-type{border-top:none}
.hz-lp-levels{display:inline-flex;gap:4px;margin-left:6px}
.hz-lp-level-badge{background:var(--hz-blue);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px}
.hz-lp-optional-badge{background:#eee;color:#666;font-size:10px;border-radius:10px;padding:1px 7px;margin-left:4px}
.hz-lp-add-btn,.hz-lp-added-btn{white-space:nowrap;flex-shrink:0}
.hz-lp-added-btn{opacity:0.6}
.hz-lp-package-list{max-height:420px;overflow-y:auto}
.hz-lp-package-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:8px 12px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.hz-lp-package-actions{display:flex;gap:4px;flex-shrink:0}

/* v366 (zgłoszenie ze screenem: wyszukiwarka "Ćwiczenia" — pole tekstowe,
   3 selecty i przycisk "Szukaj" — zawijała się bez żadnego spójnego
   odstępu). Wzorowane na .hz-lp-search/.hz-lp-level-filter wyżej, bo
   Ćwiczenia leżą bezpośrednio pod panelem Biblioteki w tej samej kolumnie
   kompozytora Pakietu od v363 — ten sam wygląd pól ujednolica całą
   kolumnę. Pole szukania na całą szerokość we własnym wierszu, a selecty
   + przycisk w jednym `flex-wrap` wierszu pod spodem, z równym `gap`
   zamiast losowego zawijania po zwykłych spacjach. */
.hz-lu-search-form{margin:16px 0 8px}
.hz-lu-search-input{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px;box-sizing:border-box}
.hz-lu-search-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hz-lu-search-filters select{padding:8px 10px;border:1px solid #ddd;border-radius:8px}
.hz-lp-audio-panel{background:#f7f9fb;border-radius:12px;padding:16px;margin-bottom:14px}
.hz-lp-savebar{display:flex;align-items:center;gap:10px}
.hz-lp-save-msg{font-weight:600}
.hz-lp-save-ok{color:#18745b}
.hz-lp-save-err{color:#a83232}

/* v320 — Katalog "Materiały" w Strefie ucznia (inc/student-materials-catalog.php), siatka kolorowych kart Tematów lekcji. */
.hz-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:12px}
/* v370 (zgłoszenie: "nie podoba mi się jak to wygląda teraz" — poprzednia
   karta pakowała kategorię, tytuł, podtytuł i trzy fakty połączone kropką w
   gęsty blok, a poziom CEFR był zakodowany WYŁĄCZNIE w kolorze górnej
   ramki, bez żadnego podpisu). Przeprojektowana na podstawie 3 makiet
   pokazanych użytkowniczce (Artifact, kierunek "Poziom najpierw" wybrany
   wprost: "A podoba mi się najbardziej") — poziom to teraz czytelna
   plakietka z emoji Tematu (`hz_card_icon`, istniejące pole, zachowane —
   makieta go pominęła, ale to działająca personalizacja nauczycielki,
   niepotrzebna do utraty), postęp to pierścień z liczbą pośrodku zamiast
   paska, kategoria/tytuł/podtytuł rozdzielone własnymi liniami zamiast
   sklejone kropką w jednym wierszu meta. */
.hz-catalog-card{display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:18px;padding:20px;text-decoration:none;color:inherit;transition:.15s;box-shadow:0 4px 16px #00000010}
.hz-catalog-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px #00000018}
.hz-catalog-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hz-catalog-card-level{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 9px;border-radius:8px;font-size:13px;font-weight:800;white-space:nowrap}
.hz-catalog-card-category{font-size:12px;color:#999;text-align:right}
.hz-catalog-card-body{display:flex;flex-direction:column;gap:2px}
.hz-catalog-card-body h3{margin:0;font-size:17px;color:var(--hz-blue)}
.hz-catalog-card-desc{margin:0;font-family:Georgia,serif;font-style:italic;font-size:13px;color:#888}
.hz-catalog-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid #f0ede4}
.hz-catalog-card-sections{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}
.hz-catalog-card-sections svg{width:16px;height:16px;flex-shrink:0}
.hz-catalog-card-noex{font-size:12px;color:#aaa}
/* v361, przepisane w v370 — "X/Y ćwiczeń ukończonych" jako pasek zamieniony
   na pierścień SVG (promień 16px, obwód 100.53px — `stroke-dasharray`
   stały, `stroke-dashoffset` liczony w PHP z procentu) z liczbą pośrodku;
   kolor pierścienia dalej zaciągnięty z koloru karty (pochodnej poziomu
   CEFR), ten sam powód spójności co dawny pasek. Bez zmian: świadomie
   ukryty całkowicie dla Tematów złożonych wyłącznie z sekcji Biblioteki
   (`exercise_count === 0`) — nie ma czego "ukończyć". */
.hz-catalog-card-ring{position:relative;width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hz-catalog-card-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hz-catalog-card-ring span{font-size:11px;font-weight:800;color:#333}

/* v372 — widok szczegółowy Tematu w Strefie ucznia (Materiały -> Temat):
   jeden wspólny "kontener listy" dla obu zakładek (Materiał/Zadania) —
   biała karta z zaokrąglonymi rogami i cienkimi liniami podziału między
   wierszami, zamiast dawnych osobno obramowanych kart/wierszy. Makieta
   zaakceptowana w Artefakcie przed wdrożeniem (patrz docs/CHANGELOG.md,
   wpis v372). Ten sam język wizualny co przeprojektowane karty katalogu
   (v371): biel, zaokrąglenie, miękki cień zamiast twardej ramki. */
.hz-topic-list{display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(20,20,20,.06);overflow:hidden;margin-bottom:20px}
.hz-topic-list>details,.hz-topic-list>a{border-bottom:1px solid #f3f1e9}
.hz-topic-list>details:last-child,.hz-topic-list>a:last-child{border-bottom:none}
.hz-topic-empty{padding:20px;color:#888;font-size:14px}

/* Wiersz "Materiał" (sekcja Biblioteki) — rozwijany <details>, strzałka
   obraca się przez czysty CSS (`details[open]`), bez dodatkowego JS,
   zgodnie z zasadą projektu "JS tylko tam, gdzie faktycznie niezbędny". */
.hz-topic-row-head{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}
.hz-topic-row-head::-webkit-details-marker{display:none}
.hz-topic-chev{width:16px;height:16px;flex-shrink:0;color:#c7c2b4;transition:transform .15s}
.hz-topic-row[open] .hz-topic-chev{transform:rotate(90deg);color:var(--hz-blue)}
.hz-topic-row-headtext{display:flex;flex-direction:column;gap:1px}
.hz-topic-row-title{font-family:Georgia,serif;font-size:15.5px;color:var(--hz-blue)}
.hz-topic-row-sub{font-size:12.5px;color:#999}
.hz-topic-row-body{padding:0 18px 20px 46px;font-size:14px;line-height:1.7;color:#444}

/* Wiersz "Zadania" (quiz/zadanie pisemne/czytanie na głos) — kafelek
   nawigacyjny z kolorową plakietką ikony typu (kolor wg
   hz_lesson_unit_content_type_color()), tytułem, "chipem" statusu i
   strzałką po prawej. */
.hz-topic-task-row{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;color:inherit}
.hz-topic-task-icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hz-topic-task-title{flex-grow:1;font-family:Georgia,serif;font-size:15px;color:var(--hz-blue)}
.hz-topic-status-chip{flex-shrink:0;font-size:12px;font-weight:700;padding:4px 10px;border-radius:12px;white-space:nowrap}
.hz-topic-task-chev{width:16px;height:16px;flex-shrink:0;color:#c7c2b4}

/* v373 — gry słówkowe w Strefie ucznia (zakładka "Gry": fiszki, memory,
   wisielec; assets/hz-vocab-games.js). Brand: --hz-blue jako kolor
   główny, --hz-red dla słów hiszpańskich i przycisków akcji, zieleń dla
   trafień. Biała karta z miękkim cieniem — ten sam język co karty
   katalogu (v371) i lista Tematu (v372). */
.hz-game-box{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hz-game-muted{font-size:13px;color:#888}
.hz-game-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;min-height:44px}
.hz-game-actions .hz-btn{flex:1 1 140px;min-height:44px;cursor:pointer}
.hz-game-end{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border-radius:18px;box-shadow:0 4px 16px rgba(20,20,20,.08);padding:28px 24px;text-align:center}
.hz-game-end h3{margin:0;font-family:Georgia,serif;font-size:22px;color:var(--hz-blue)}
.hz-game-end h3.is-won{color:var(--hz-success)}
.hz-game-end h3.is-lost{color:var(--hz-danger)}
.hz-game-end p{margin:0;font-size:15px;color:#555}
.hz-game button:focus-visible{outline:3px solid var(--hz-yellow);outline-offset:2px}

.hz-game-dir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hz-game-dir-label{font-size:13px;color:#888}
.hz-game-chip{min-height:36px;padding:0 14px;border-radius:18px;border:1px solid #ddd;background:#fff;font-size:13px;font-weight:700;color:#666;cursor:pointer}
.hz-game-chip.is-active{background:var(--hz-blue);border-color:var(--hz-blue);color:#fff}

.hz-game-progress{display:flex;align-items:center;gap:12px}
.hz-game-progress-bar{flex-grow:1;height:6px;background:#eee;border-radius:3px;overflow:hidden}
.hz-game-progress-fill{height:6px;background:var(--hz-blue);border-radius:3px}
.hz-game-progress-label{font-size:13px;font-weight:700;color:#666}

.hz-flashcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:240px;background:#fff;border-radius:18px;box-shadow:0 4px 16px rgba(20,20,20,.08);padding:24px;text-align:center}
.hz-flashcard:focus-visible{outline:3px solid var(--hz-yellow);outline-offset:2px}
.hz-flashcard-side{font-size:12px;color:#999}
.hz-flashcard-word{font-family:Georgia,serif;font-size:40px;color:var(--hz-blue);overflow-wrap:anywhere}
.hz-flashcard.is-es .hz-flashcard-word{color:var(--hz-red)}
.hz-flashcard-hint{font-size:13px;color:#aaa;min-height:16px}

.hz-game-memory-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:#666}
.hz-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hz-memory-card{min-height:92px;border-radius:14px;border:2px solid transparent;background:var(--hz-blue);box-shadow:0 3px 10px rgba(20,20,20,.10);padding:6px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Georgia,serif;font-size:16px;color:var(--hz-blue);cursor:pointer;overflow-wrap:anywhere}
.hz-memory-card.is-open{background:#fff;border-color:var(--hz-blue)}
.hz-memory-card.is-matched{background:#e5f5ef;box-shadow:none;color:var(--hz-success);cursor:default}
.hz-memory-card.is-es{color:var(--hz-red)}
.hz-memory-card.is-matched.is-es{color:var(--hz-success)}
@media (max-width:480px){.hz-memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.hz-hangman-top{display:flex;gap:24px;align-items:center;background:#fff;border-radius:18px;box-shadow:0 4px 16px rgba(20,20,20,.08);padding:24px}
.hz-hangman-art{flex-shrink:0;width:120px;height:140px;color:var(--hz-blue)}
.hz-hangman-svg{width:120px;height:140px;display:block}
.hz-hangman-frame{stroke:#c7c2b4}
.hz-hangman-info{flex-grow:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.hz-hangman-slots{display:flex;gap:8px;flex-wrap:wrap}
.hz-hangman-slot{width:30px;height:40px;display:flex;align-items:flex-end;justify-content:center;border-bottom:3px solid var(--hz-blue);font-family:Georgia,serif;font-size:28px;color:var(--hz-blue)}
.hz-hangman-slot.is-missed{color:var(--hz-red)}
.hz-hangman-gap{width:14px}
.hz-hangman-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.hz-hangman-key{min-height:44px;border-radius:10px;border:1px solid #ddd;background:#fff;font-size:15px;font-weight:700;color:var(--hz-blue);cursor:pointer}
.hz-wordle-board{display:grid;gap:6px;margin:12px 0}
.hz-wordle-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hz-wordle-row{display:flex;gap:6px}
.hz-wordle-tile{width:44px;height:44px;border:2px solid #d6d6d6;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:var(--hz-blue);background:#fff;text-transform:uppercase}
.hz-wordle-tile.is-hit{background:var(--hz-success);border-color:var(--hz-success);color:#fff}
.hz-wordle-tile.is-present{background:var(--hz-yellow);border-color:var(--hz-yellow);color:#222}
.hz-wordle-tile.is-miss{background:#8a8f98;border-color:#8a8f98;color:#fff}
.hz-wordle-counts{font-weight:700;color:var(--hz-blue)}
.hz-wordle-play{margin:8px 0}
.hz-wordle-board{position:relative}
.hz-wordle-ghost{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;opacity:0;font-size:16px;caret-color:transparent;cursor:pointer;z-index:1}
.hz-wordle-live .hz-wordle-tile{border-color:#9aa3b2}
.hz-wordle-live .hz-wordle-tile.is-filled{border-color:var(--hz-blue)}
.hz-wordle-board.is-focused .hz-wordle-live .hz-wordle-tile.is-cursor{border-color:var(--hz-blue);outline:2px solid var(--hz-blue);outline-offset:1px}
.hz-wordle-row.is-shake{animation:hz-kids-shake .35s}
@media(prefers-reduced-motion:reduce){.hz-wordle-row.is-shake{animation:none}}
.hz-wordle-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.hz-wordle-actions .hz-hangman-key{width:44px}
.hz-wordle-help{margin:6px 0;font-size:13px}
.hz-wordle-error{color:var(--hz-danger);font-weight:600;margin:6px 0}
.hz-wordle-row.is-long{flex:1 1 476px;max-width:476px;min-width:0;gap:4px}
.hz-wordle-row.is-long .hz-wordle-tile{flex:1 1 0;min-width:0;width:auto;height:auto;aspect-ratio:1/1}
@media (max-width:420px){.hz-wordle-tile{width:38px;height:38px;font-size:17px}.hz-wordle-row.is-long .hz-wordle-tile{width:auto;height:auto;font-size:15px}}
/* Rzędy do 8 liter: kratki mają stały rozmiar, ale zwężają się (i zostają kwadratowe), gdy plansza jest węższa od rzędu — np. 8 liter na telefonie. */
.hz-wordle-line,.hz-wordle-row{min-width:0}
.hz-wordle-row .hz-wordle-tile{height:auto;aspect-ratio:1/1}
.hz-hangman-key.is-hit{background:#e5f5ef;border-color:transparent;color:var(--hz-success)}
.hz-hangman-key.is-miss{background:#f4f1ea;border-color:transparent;color:#999}
.hz-hangman-key:disabled{cursor:default}
@media (max-width:480px){.hz-hangman-top{flex-direction:column;align-items:flex-start}}

/* v354 — ekran "Temat lekcji" na zakładki (audyt UX/UI, punkt P2, patrz
   hz_panel_edit_lesson_unit()/inc/lesson-units.php). Pierwszy w tym
   motywie wzorzec zakładek W OBRĘBIE JEDNEJ strony (odróżnić od
   hz_panel_subtabs() — TAMTE to linki do RÓŻNYCH URL-i/widoków, np.
   grupowanie "Lekcje/Dostępność" pod jedną zakładką nawigacji, nie
   przełączanie treści bez przeładowania). Celowo bez żadnego
   frameworka/biblioteki — ukryte radiobuttony + CSS `:checked ~ ...`,
   ten sam duch co reszta motywu (proste, doraźne rozwiązania zamiast
   nowej zależności dla jednego ekranu). Radiobuttony i pasek etykiet
   muszą być w PHP wyrenderowane PRZED panelami (rodzeństwo w DOM) —
   ogólny selektor rodzeństwa (~) nie działa "wstecz".
   `#hz-lesson-unit-exercises` (v335) — anchor-scroll na ten element nie
   zadziała sam z siebie, gdy jest wewnątrz ukrytego panelu; dlatego mały
   skrypt w inc/lesson-units.php zaznacza radiobutton zakładki
   "Ćwiczenia" na podstawie location.hash, zanim wywoła scrollIntoView(). */
/* v356 (audyt UX/UI, punkt P2 "accessibility/focus") — POPRAWKA regresji
   wprowadzonej w v354: `display:none` na radiobuttonie usuwa go CAŁKOWICIE
   z kolejności TAB-owania w większości przeglądarek, więc osoba
   korzystająca wyłącznie z klawiatury nie miała ŻADNEGO sposobu, żeby
   przełączyć się na zakładkę "Pakiet"/"Ćwiczenia" — ich zawartość była
   dla niej całkowicie niedostępna. Zastąpione standardowym wzorcem
   "visually hidden, ale nadal fokusowalny" (ten sam, ogólnie przyjęty
   zestaw właściwości co klasa "sr-only" w Bootstrapie/WP-admin) —
   element fizycznie istnieje, ma rozmiar 1px i jest przycięty, więc jest
   niewidoczny wzrokowo, ale przeglądarka nadal go fokusuje przy Tab, a
   strzałki ←/→ przełączają między radiobuttonami tej samej grupy
   (natywne zachowanie `<input type="radio">`, bez żadnego JS).
   Widoczny wskaźnik fokusu dopisany niżej jako osobna reguła
   `:focus-visible` na odpowiadającej etykiecie zakładki, żeby było
   widać, KTÓRA zakładka jest aktualnie zaznaczona klawiaturą. */
.hz-tabs-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hz-tabs-nav{display:flex;gap:4px;border-bottom:2px solid #eee;margin-bottom:16px;flex-wrap:wrap}
.hz-tabs-label{display:inline-block;padding:10px 18px;font-weight:700;color:#666;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;user-select:none;transition:.15s}
.hz-tabs-label:hover{color:var(--hz-blue)}
.hz-tabs-panel{display:none}
/* v363 — selektory #hz-tab-cwiczenia USUNIĘTE (nie trzy, tylko dwie
   zakładki teraz: Informacje/Pakiet — "Ćwiczenia" przeniesione DO
   zakładki "Pakiet", patrz inc/lesson-units.php i .hz-lp-left-stack
   niżej). Ten sam, generyczny wzorzec CSS (#id:checked~selektor) działa
   niezmiennie dla dowolnej LICZBY zakładek — usunięcie jednej to tylko
   usunięcie jej wiersza z każdej z tych trzech reguł. */
#hz-tab-info:checked~.hz-tabs-nav label[for="hz-tab-info"],
#hz-tab-pakiet:checked~.hz-tabs-nav label[for="hz-tab-pakiet"]{color:var(--hz-blue);border-bottom-color:var(--hz-red)}
#hz-tab-info:focus-visible~.hz-tabs-nav label[for="hz-tab-info"],
#hz-tab-pakiet:focus-visible~.hz-tabs-nav label[for="hz-tab-pakiet"]{outline:2px solid var(--hz-blue);outline-offset:2px;border-radius:4px}
#hz-tab-info:checked~.hz-tabs-panels #hz-tabs-panel-info,
#hz-tab-pakiet:checked~.hz-tabs-panels #hz-tabs-panel-pakiet{display:block}
@media (max-width:800px){
    .hz-tabs-nav{gap:0}
    .hz-tabs-label{flex:1;text-align:center;padding:10px 8px;font-size:13px}
}

/* v386 — El Intruso i ¿Qué hora es? */
.hz-intruz-prompt{margin:0;font-family:Georgia,serif;font-size:20px;color:var(--hz-blue);text-align:center}
.hz-intruz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hz-intruz-word{min-height:72px;border:2px solid #d6d6d6;border-radius:var(--hz-radius);background:#fff;font-size:20px;font-weight:700;color:var(--hz-blue);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px}
.hz-intruz-word:hover:not(:disabled){border-color:var(--hz-blue)}
.hz-intruz-word:disabled{cursor:default;color:var(--hz-blue);opacity:1}
.hz-intruz-word.is-intruder{border-color:var(--hz-success);background:#e9f6f0}
.hz-intruz-word.is-wrong{border-color:var(--hz-danger);background:#fbeaea}
.hz-intruz-pl{font-size:13px;font-weight:400;color:#555}
.hz-intruz-feedback{text-align:center}.hz-intruz-feedback p{margin:6px 0 0;color:#555;font-size:15px}
.hz-intruz-feedback .is-won{color:var(--hz-success)}.hz-intruz-feedback .is-lost{color:var(--hz-danger)}
.hz-clock-face{display:flex;justify-content:center}.hz-clock-svg{max-width:100%;height:auto}
.hz-clock-options{display:grid;grid-template-columns:1fr;gap:10px}
.hz-clock-option{min-height:48px;border:2px solid #d6d6d6;border-radius:12px;background:#fff;font-size:17px;font-weight:700;color:var(--hz-blue);cursor:pointer;padding:8px 14px}
.hz-clock-option:hover:not(:disabled){border-color:var(--hz-blue)}
.hz-clock-option:disabled{cursor:default;opacity:1}
.hz-clock-option.is-correct{border-color:var(--hz-success);background:#e9f6f0}
.hz-clock-option.is-wrong{border-color:var(--hz-danger);background:#fbeaea}
.hz-clock-phrase{font-size:22px;font-weight:800;text-align:center;color:var(--hz-blue);margin:6px 0 14px}
.hz-clock-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hz-clock-pick{display:flex;align-items:center;justify-content:center;border:2px solid #d6d6d6;border-radius:12px;background:#fff;padding:6px;cursor:pointer}
.hz-clock-pick .hz-clock-svg{max-width:100%;height:auto}
.hz-clock-pick:hover:not(:disabled){border-color:var(--hz-blue)}
.hz-clock-pick:disabled{cursor:default;opacity:1}
.hz-clock-pick.is-correct{border-color:var(--hz-success);background:#e9f6f0}
.hz-clock-pick.is-wrong{border-color:var(--hz-danger);background:#fbeaea}
.hz-clock-forms{margin-top:10px;font-size:15px}
.hz-clock-forms-list{margin:6px 0 0;padding-left:18px}
.hz-clock-forms-list small{color:#666}
/* v401 — „Posłuchaj i dotknij” (gra dla 7–8 lat): duże cele dotyku, bez presji */
.hz-kids-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hz-kids-topic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:130px;border-radius:20px;border:3px solid transparent;font-size:22px;cursor:pointer;padding:12px;font-family:inherit}
.hz-kids-topic .hz-kids-topic-icon{font-size:56px;line-height:1}
.hz-kids-topic:hover{transform:translateY(-2px)}
.hz-kids-ready-icon{font-size:84px;text-align:center;margin:6px 0;line-height:1}
.hz-kids .hz-intruz-prompt{text-align:center}
.hz-kids .hz-game-actions{justify-content:center}
.hz-kids-big{min-height:64px;font-size:24px;padding:12px 32px;border-radius:32px}
.hz-kids-stars{display:flex;justify-content:center;gap:4px;font-size:22px;margin:0 0 4px}
.hz-kids-stars.is-end{font-size:36px;flex-wrap:wrap}
.hz-kids-stars .is-off{opacity:.45}
.hz-kids-hear{display:block;margin:6px auto 14px;width:84px;height:84px;border-radius:50%;border:4px solid var(--hz-blue);background:#fff;font-size:42px;line-height:1;cursor:pointer}
.hz-kids-hear:hover{background:#eef4fb}
.hz-kids-hear.is-small{width:56px;height:56px;font-size:28px;margin:0}
.hz-kids-face{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
.hz-kids-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hz-kids-tiles.is-words{grid-template-columns:1fr}
.hz-kids-tile{display:flex;align-items:center;justify-content:center;min-height:116px;border:3px solid #d6d6d6;border-radius:20px;background:#fff;cursor:pointer;padding:8px;font-family:inherit}
.hz-kids-tiles.is-words .hz-kids-tile{min-height:68px}
.hz-kids-tile:hover:not(:disabled){border-color:var(--hz-blue)}
.hz-kids-tile:disabled{cursor:default;opacity:1}
.hz-kids-tile.is-correct{border-color:var(--hz-success);background:#e9f6f0;animation:hz-kids-pop .4s}
.hz-kids-tile.is-wrong{border-color:#c9c9c9;background:#f1f1f1;opacity:.5;animation:hz-kids-shake .35s}
.hz-kids-pic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.hz-kids-emoji{font-size:56px;line-height:1.1}
.hz-kids-pic.is-big .hz-kids-emoji{font-size:96px}
.hz-kids-img{display:block;width:96px;height:96px;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}
.hz-kids-pic.is-big .hz-kids-img{width:160px;height:160px}
.hz-kids-dots{font-size:11px;letter-spacing:1px;color:#555;max-width:100%;overflow-wrap:anywhere;text-align:center}
.hz-kids-swatch{display:block;width:72px;height:72px;border-radius:18px;border:3px solid rgba(0,0,0,.12)}
.hz-kids-swatch.is-white{border-color:#bbb}
.hz-kids-pic.is-big .hz-kids-swatch{width:120px;height:120px;border-radius:28px}
.hz-kids-word{font-size:28px;font-weight:800;color:var(--hz-blue)}
.hz-kids-reveal{display:flex;flex-direction:column;align-items:center;gap:2px;margin:14px 0 4px;text-align:center}
.hz-kids-reveal strong{font-size:26px}
.hz-kids-reveal-es{font-size:34px;font-weight:800;color:var(--hz-blue)}
.hz-kids-reveal-pl{font-size:18px;color:#555}
.hz-kids-tryagain{text-align:center;font-size:20px;font-weight:700;color:var(--hz-blue);margin:12px 0 0}
.hz-kids-notice{text-align:center}
@keyframes hz-kids-pop{0%{transform:scale(.92)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes hz-kids-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:380px){.hz-kids-emoji{font-size:46px}.hz-kids-swatch{width:60px;height:60px}.hz-kids-img{width:80px;height:80px}.hz-kids-pic.is-big .hz-kids-img{width:130px;height:130px}.hz-kids-tile{min-height:104px}}
@media(prefers-reduced-motion:reduce){.hz-kids-tile.is-correct,.hz-kids-tile.is-wrong{animation:none}.hz-kids-topic:hover{transform:none}}
@media (max-width:420px){.hz-intruz-grid{grid-template-columns:1fr}}

/* v388 — kafelki-plakaty w zakładce Gry (kolory z flag Hiszpanii, Kuby i Meksyku) */
.hz-game-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
.hz-game-tiles>.hz-game-tile:last-child:nth-child(odd){grid-column:1 / -1}
.hz-game-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:112px;padding:12px;border-radius:16px;text-decoration:none;border:2px solid transparent;transition:transform .15s}
.hz-game-tile:hover{transform:translateY(-2px)}
.hz-game-tile:focus-visible{outline:3px solid #222;outline-offset:2px}
.hz-game-tile-icon{position:absolute;right:-2px;bottom:-8px;font-size:46px;line-height:1;opacity:.18;pointer-events:none}
.hz-game-tile-main,.hz-game-tile-badges{position:relative;z-index:1}
.hz-game-tile-main b{display:block;font-size:15px;font-weight:800;line-height:1.25}
.hz-game-tile-main small{display:block;margin-top:3px;font-size:12px;line-height:1.35}
.hz-game-tile-badges{display:flex;flex-wrap:wrap;gap:4px}
.hz-game-tile-badge{white-space:nowrap;font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.88)}
.hz-gt-rd{background:#C8202B;color:#fff}.hz-gt-rd .hz-game-tile-badge{color:#7a1015}
.hz-gt-ye{background:#F4C430;color:#3d2f00}.hz-gt-ye .hz-game-tile-badge{color:#5a4300}
.hz-gt-gn{background:#006847;color:#fff}.hz-gt-gn .hz-game-tile-badge{color:#00432d}
.hz-gt-bl{background:#1D4E89;color:#fff}.hz-gt-bl .hz-game-tile-badge{color:#12365f}
.hz-gt-wh{background:#fff;color:#1D4E89;border-color:#1D4E89}.hz-gt-wh .hz-game-tile-badge{background:#E3EDF7;color:#12365f}
@media(min-width:720px){.hz-game-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.hz-game-tiles>.hz-game-tile:last-child:nth-child(odd){grid-column:auto}.hz-game-tile{min-height:122px;padding:14px}.hz-game-tile-icon{font-size:70px;right:-4px;bottom:-12px}}
@media(prefers-reduced-motion:reduce){.hz-game-tile{transition:none}.hz-game-tile:hover{transform:none}}

/* v390 — ekran gry: nagłówek w kolorze gry, przyciski, przewijane zakładki, kolorowa fiszka */
.hz-gc-rd{--hz-gc:#C8202B}.hz-gc-ye{--hz-gc:#F4C430}.hz-gc-gn{--hz-gc:#006847}.hz-gc-bl,.hz-gc-wh{--hz-gc:#1D4E89}
.hz-game-head{position:relative;overflow:hidden;border-radius:16px;padding:12px 16px;margin:0 0 12px}
.hz-game-head small{display:block;font-size:11px;opacity:.9}
.hz-game-head h2{margin:0;font-size:20px;line-height:1.25;color:inherit}
.hz-game-head-sub{display:block;margin-top:2px;font-size:14px}
.hz-game-head .hz-game-tile-icon{z-index:0}.hz-game-head small,.hz-game-head h2,.hz-game-head-sub{position:relative;z-index:1}
.hz-game-actions-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hz-game-chip-link{display:inline-block;font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid #d8d4cc;background:#fff;color:#333;text-decoration:none;white-space:nowrap}
.hz-game-chip-link:hover{border-color:#999}
.hz-game-tabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.hz-game-tabs a{flex-shrink:0;font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid #d8d4cc;background:#fff;color:#555;text-decoration:none;white-space:nowrap}
.hz-game-tabs a.is-active{background:var(--hz-gc,#1D4E89);border-color:var(--hz-gc,#1D4E89);color:#fff;font-weight:800}
.hz-game-tabs a.is-active.hz-gc-ye{color:#3d2f00}
.hz-game .hz-game-progress-bar{height:8px;border-radius:99px;background:#e8e4dc}
.hz-game .hz-game-progress-fill{height:8px;border-radius:99px;background:var(--hz-gc,var(--hz-blue))}
.hz-flashcard{background:#1D4E89;color:#fff;box-shadow:none;min-height:200px}
.hz-flashcard .hz-flashcard-side{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 10px;border-radius:99px;background:rgba(255,255,255,.88);color:#12365f}
.hz-flashcard .hz-flashcard-side::before{content:"";width:14px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,.15);background:linear-gradient(#fff 50%,#C8202B 50%)}
.hz-flashcard .hz-flashcard-word{color:#fff;font-size:38px}
.hz-flashcard .hz-flashcard-hint{color:rgba(255,255,255,.85)}
.hz-flashcard.is-es{background:#F4C430;color:#3d2f00}
.hz-flashcard.is-es .hz-flashcard-side{color:#5a4300}
.hz-flashcard.is-es .hz-flashcard-side::before{background:linear-gradient(#C8202B 25%,#F4C430 25% 75%,#C8202B 75%)}
.hz-flashcard.is-es .hz-flashcard-word{color:#3d2f00}
.hz-flashcard.is-es .hz-flashcard-hint{color:#5a4300}

/* v391 — przycisk losowania w nagłówku gry */
.hz-game-head-btn{position:relative;z-index:1;display:inline-block;margin-top:10px;padding:8px 16px;border-radius:99px;background:#fff;font-weight:800;font-size:14px;text-decoration:none;color:var(--hz-gc,#1D4E89);border:2px solid transparent}
.hz-game-head-btn:hover{border-color:rgba(0,0,0,.25)}
.hz-game-head-btn:focus-visible{outline:3px solid #222;outline-offset:2px}
.hz-gc-ye .hz-game-head-btn{color:#3d2f00}
/* v392 — gra Słuchanie */
.hz-listen-audio{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hz-listen-show{margin:0;text-align:center}
.hz-listen-word{margin:0;text-align:center;font-family:Georgia,serif;font-size:30px;color:var(--hz-blue);overflow-wrap:anywhere}
.hz-listen-voice-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.hz-listen-voice{max-width:100%;min-height:44px;padding:8px 10px;border:1px solid #ccc;border-radius:10px;font-size:14px;background:#fff}

/* v413 — przycisk „Zainstaluj aplikację" (ekran startowy dziecka) */
.hz-pwa-install{text-align:center;margin:18px 0 0}
.hz-pwa-install[hidden],.hz-pwa-hint[hidden],.hz-pwa-btn[hidden]{display:none}
.hz-pwa-btn{background:var(--hz-blue);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;font-weight:700;cursor:pointer;min-height:48px}
.hz-pwa-hint{margin:10px auto 0;max-width:420px;color:var(--hz-muted);font-size:.92rem}

/* v418 — gra „Dopasuj parę” (ogólna mechanika par) */
.hz-kids-pairtiles .hz-kids-tile{flex-direction:column;gap:4px;min-height:140px;padding:8px 4px}
.hz-kids-word.is-small{font-size:15px;line-height:1.15;text-align:center;font-weight:700;word-break:break-word}
.hz-kids-pairs .hz-kids-face{margin-bottom:8px}
.hz-kids-dirs{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:420px;margin:14px auto}
.hz-kids-home-tiles .hz-kids-home-tile:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:380px){.hz-kids-pairtiles .hz-kids-tile{min-height:128px}.hz-kids-word.is-small{font-size:13px}}

/* v426 — „Memory z obrazkami” i „¿Cuántos hay?” */
.hz-kids-memo-board{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:520px;margin:10px auto}
.hz-kids-memo-board.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.hz-kids-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:104px;border:3px solid #d6d6d6;border-radius:18px;background:var(--hz-blue,#1f5fa8);color:#fff;font-family:inherit;cursor:pointer;padding:6px}
.hz-kids-memo-board.is-4 .hz-kids-card{min-height:112px}
.hz-kids-card-back{font-size:46px;font-weight:700;line-height:1}
.hz-kids-card-face{display:none;align-items:center;justify-content:center;width:100%}
.hz-kids-card.is-open{background:#fff;color:#222;border-color:var(--hz-blue,#1f5fa8)}
.hz-kids-card.is-open .hz-kids-card-back{display:none}
.hz-kids-card.is-open .hz-kids-card-face{display:flex}
.hz-kids-card.is-matched{background:#e9f6f0;border-color:var(--hz-success,#1d8a5a);animation:hz-kids-pop .4s}
.hz-kids-card-word{font-size:17px;font-weight:700;text-align:center;line-height:1.15;word-break:break-word}
.hz-kids-card .hz-kids-img{width:72px;height:72px}
.hz-kids-card .hz-kids-emoji{font-size:48px}
.hz-kids-memo-tries{text-align:center;margin:0}
.hz-kids-count-area{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;max-width:520px;margin:10px auto}
.hz-kids-count-item{position:relative;display:flex;align-items:center;justify-content:center;min-height:92px;border:3px solid #d6d6d6;border-radius:16px;background:#fff;cursor:pointer;padding:4px;font-family:inherit}
.hz-kids-count-item.is-counted{border-color:var(--hz-success,#1d8a5a);background:#e9f6f0}
.hz-kids-count-item .hz-kids-img{width:68px;height:68px}
.hz-kids-count-item .hz-kids-emoji{font-size:48px}
.hz-kids-count-badge{position:absolute;top:2px;right:4px;min-width:26px;height:26px;border-radius:13px;background:var(--hz-blue,#1f5fa8);color:#fff;font-weight:700;font-size:16px;line-height:26px;text-align:center}
.hz-kids-numtiles{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:420px;margin:12px auto}
.hz-kids-numtile{font-size:40px;font-weight:700;min-height:92px}
@media(prefers-reduced-motion:reduce){.hz-kids-card.is-matched{animation:none}}
.hz-game-box.hz-kids-memo,.hz-game-box.hz-kids-count{width:100%}
.hz-game[data-mode="memoria"],.hz-game[data-mode="policz"]{width:100%}

/* v427 — „Posortuj” */
.hz-game[data-mode="sortuj"]{width:100%}
.hz-game-box.hz-kids-sort{width:100%}
.hz-kids-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:520px;margin:6px auto}
.hz-kids-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;border-radius:20px;border:3px solid transparent;padding:10px 6px;font-family:inherit;cursor:pointer;text-align:center}
.hz-kids-cat .hz-kids-cat-icon{font-size:48px;line-height:1}
.hz-kids-cat b{font-size:20px;line-height:1.15}
.hz-kids-cat small{font-size:14px;opacity:.85}
.hz-kids-cat.is-correct{border-color:var(--hz-success,#1d8a5a);animation:hz-kids-pop .4s}
.hz-kids-cat.is-wrong{opacity:.45;animation:hz-kids-shake .35s}
.hz-kids-cat:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.hz-kids-cat.is-correct,.hz-kids-cat.is-wrong{animation:none}}
.hz-kids-sort .hz-kids-face{flex-direction:column;gap:8px;margin-bottom:6px;max-width:100%}
.hz-kids-sort .hz-kids-pic.is-big .hz-kids-img{width:140px;height:140px;max-width:100%}
.hz-kids-sort .hz-kids-pic.is-big .hz-kids-emoji{font-size:88px}
.hz-kids-sort .hz-kids-word{margin:0;text-align:center;font-size:30px;font-weight:700;line-height:1.1;word-break:break-word;color:var(--hz-blue,#1f5fa8)}

/* v428 — Bingo */
.hz-game[data-mode="bingo"]{width:100%}
.hz-game-box.hz-kids-bingo{width:100%}
.hz-kids-bingo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:420px;margin:6px auto}
.hz-kids-bingo-cell{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border:3px solid #d6d6d6;border-radius:16px;background:#fff;cursor:pointer;padding:4px;font-family:inherit}
.hz-kids-bingo-cell .hz-kids-img{width:84px;height:84px;max-width:100%}
.hz-kids-bingo-cell .hz-kids-emoji{font-size:52px}
.hz-kids-bingo-cell.is-marked{border-color:var(--hz-success,#1d8a5a);background:#e9f6f0}
.hz-kids-bingo-cell.is-line{border-color:#F4C430;background:#fff6d6;animation:hz-kids-pop .4s}
.hz-kids-bingo-cell.is-wrong{border-color:#c9c9c9;background:#f1f1f1;animation:hz-kids-shake .35s}
.hz-kids-bingo-mark{position:absolute;top:2px;right:6px;font-size:24px;font-weight:700;color:var(--hz-success,#1d8a5a)}
.hz-kids-bingo-win{text-align:center;font-size:34px;margin:4px 0}
.hz-kids-bingo-hint,.hz-kids-bingo-count{text-align:center;margin:0}
/* v434: licznik graczy w pokoju Bingo — ikona + liczba + (za zgodą) imiona; krótka animacja przy dołączeniu/wyjściu */
.hz-room-presence{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:0 auto 10px;padding:6px 14px;max-width:100%;border-radius:999px;background:rgba(0,0,0,.05);font-size:.95rem;line-height:1.3}
.hz-room-icon{font-size:1.15em}
.hz-room-count{display:inline-block;min-width:1.4em;text-align:center;font-size:1.2em}
.hz-room-names{color:var(--hz-muted,#666);overflow-wrap:anywhere}
.hz-room-bubble{position:absolute;right:12px;top:-6px;opacity:0;pointer-events:none;font-weight:700;padding:1px 8px;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);white-space:nowrap}
.hz-room-bubble.is-up{color:#1b7f3a;animation:hz-room-bubble 2.1s ease-out forwards}
.hz-room-bubble.is-down{color:#b3261e;animation:hz-room-bubble 2.1s ease-out forwards}
.hz-room-presence.is-join .hz-room-count{animation:hz-room-pop .8s ease-out}
.hz-room-presence.is-leave .hz-room-count{animation:hz-room-dip .8s ease-out}
@keyframes hz-room-pop{0%{transform:scale(1);color:inherit}30%{transform:scale(1.5);color:#1b7f3a}100%{transform:scale(1);color:inherit}}
@keyframes hz-room-dip{0%{transform:scale(1);color:inherit}30%{transform:scale(.7);color:#b3261e}100%{transform:scale(1);color:inherit}}
@keyframes hz-room-bubble{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hz-room-presence.is-join .hz-room-count,.hz-room-presence.is-leave .hz-room-count{animation:none}.hz-room-bubble.is-up,.hz-room-bubble.is-down{animation:none;opacity:1}}
@media(max-width:380px){.hz-kids-bingo-cell .hz-kids-img{width:68px;height:68px}}
@media(prefers-reduced-motion:reduce){.hz-kids-bingo-cell.is-line,.hz-kids-bingo-cell.is-wrong{animation:none}}
.hz-game[data-mode="bingoroom"]{width:100%}
.hz-kids-accent{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}.hz-kids-accent-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 16px;font-size:15px}.hz-kids-accent-btn.is-on{background:var(--hz-blue,#1d4e89);color:#fff;border-color:transparent}


/* v436 — Pakiet: nowy układ kompozytora (dwie kolumny, zakładki Materiały/Ćwiczenia/Gry, ponumerowane karty) */
.hz-lp-intro{color:#555;margin:0 0 14px;max-width:70ch}
.hz-lp-grid{align-items:start}
.hz-lp-add-panel,.hz-lp-package-panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px}
.hz-lp-package-panel{position:sticky;top:12px}
.hz-lp-tabs{display:flex;gap:6px;margin:0 0 12px;border-bottom:2px solid #eef1f5;flex-wrap:wrap}
.hz-lp-tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 14px;font-weight:600;font-size:15px;color:#555;cursor:pointer;border-radius:8px 8px 0 0}
.hz-lp-tab:hover{background:#f3f6fa}
.hz-lp-tab.is-active{color:var(--hz-blue);border-bottom-color:var(--hz-blue)}
.hz-lp-hint{color:#666;font-size:14px;margin:0 0 10px}
.hz-lp-game-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hz-lp-game-mode{flex:1;min-width:150px;padding:8px 10px;border:1px solid #ddd;border-radius:8px}
.hz-lp-count{display:inline-block;background:var(--hz-blue);color:#fff;font-size:13px;border-radius:12px;padding:1px 9px;vertical-align:middle}
.hz-lp-package-list{list-style:none;margin:0;padding:0;max-height:none;overflow:visible}
.hz-lp-package-row{display:flex;align-items:center;gap:10px;background:#f7f9fb;border:1px solid #e8edf3;border-left:4px solid #9aa7b5;border-radius:10px;padding:8px 10px;margin-bottom:8px;box-shadow:none}
.hz-lp-kind-section{border-left-color:var(--hz-blue)}
.hz-lp-kind-exercise{border-left-color:var(--hz-green,#3A9D7C)}
.hz-lp-kind-game{border-left-color:var(--hz-red,#D62828)}
.hz-lp-num{flex:0 0 26px;height:26px;border-radius:50%;background:#e3e9f1;color:#334;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.hz-lp-kind-icon{font-size:20px;flex:0 0 auto}
.hz-lp-package-text{flex:1;min-width:0;display:flex;flex-direction:column}
.hz-lp-package-title{font-weight:700;overflow-wrap:anywhere}
.hz-lp-package-sub{font-size:13px;color:#667}
.hz-lp-package-actions{display:flex;gap:4px;flex-shrink:0}
.hz-lp-empty{text-align:center;color:#667;padding:28px 10px}
.hz-lp-empty span{font-size:40px}
.hz-lp-dirty{color:#9a6a00}
.hz-lp-browse-list{max-height:520px}
@media(max-width:800px){.hz-lp-package-panel{position:static}}
.hz-topic-game-row .hz-topic-task-title small{font-weight:400}
.hz-welcome .hz-card{color:var(--hz-text)}
/* Kontrolka stanu poczty w Panelu nauczyciela: mały wskaźnik (symbol + tekst), kolor z .hz-text-success / -danger / -muted. */
.hz-mail-status{font-size:13px;font-weight:600}
.hz-panel-nav .hz-mail-status{align-self:center;padding:6px 4px}
.hz-panel-nav .hz-mail-status a,.hz-panel-nav .hz-mail-status a:hover{background:none;padding:0;border-radius:0;color:inherit;font-size:inherit;font-weight:inherit;text-decoration:underline}
/* Obrazki gier dla najmłodszych z białym tłem (cosas, clase): na kolorowym kaflu (zielony po dobrej odpowiedzi, szary, żółty w Bingo) biel przejmuje kolor tła. Motyw nie ma trybu ciemnego. */
.hz-kids-img{mix-blend-mode:multiply}