/* ==========================================================================
   STYLE.CSS v10.1 — Strona Michała — Material Design 3 + 3 kolory marki

   ZMIANY wzgledem v9 (szczegóły: NAPRAWY_STRONY.md, sekcja CSS):
   • §1  role kolorów M3 (--md-sys-color-*) wygenerowane z 3 kolorów marki;
         stare nazwy (--bg, --tx, --ac, ...) zostały jako aliasy.
   • §6  menu = M3 navigation drawer (powierzchnia + gradient jako szyna).
   • §8  karty = M3 container (bez backdrop-filter).
   • §9  pola = M3 outlined (obrys ≥ 4.3:1); reguła globalna w :where().
   • §10 przyciski = M3 (filled / tonal / outlined / text) + .btn-gradient;
         reguły bazowe w :where() (specyficzność 0 → koniec !important).
   • WCAG: usunięto biały tekst na gradiencie i czysty żółty/czerwony jako tekst.

   v10.1 (po testach 4.10.2026): żywsza paleta (nie pastelowa), lawendowy tryb jasny,
   gradientowy „wash” menu i nagłówka, przyciski bez ramki-szwu, nowy tryb wysokiego
   kontrastu, naprawa menu/pigułek na telefonie.

   ZASADA: wypełnienia i dekoracje = --acc-* (stała marka);
           tekst i ikony        = role --md-sys-color-* albo --acc-*-tx.
   ========================================================================== */

/* ==========================================================================
   §1  ZMIENNE — jedyne źródło kolorów
   ========================================================================== */
:root {
    color-scheme: dark light;

    /* ── 1) MARKA — 3 stałe kolory, niezależne od trybu ────────────────────
       Używaj do WYPEŁNIEŃ, gradientów, obramowań i dekoracji. Jako TEKST/IKONA
       używaj ról --md-sys-color-* albo --acc-*-tx (czysty żółty na bieli ma
       kontrast 1.1:1, czysta czerwień 4.0:1). */
    --acc-violet:   rgb(131, 58, 180);
    --acc-violet-h: rgb(160, 80, 210);
    --acc-violet-d: rgb(80, 30, 130);
    --acc-red:      rgb(255, 0, 0);
    --acc-red-h:    rgb(255, 60, 60);
    --acc-red-d:    rgb(180, 0, 0);
    --acc-gold:     rgb(255, 255, 0);
    --acc-gold-h:   rgb(255, 255, 80);
    --acc-gold-d:   rgb(180, 180, 0);
    --on-gold:      #1d1d00;

    --ac:   var(--acc-violet);
    --ac-h: var(--acc-violet-h);
    --ac-d: var(--acc-violet-d);
    --c-violet: var(--acc-violet);
    --c-red:    var(--acc-red);
    --c-gold:   var(--acc-gold);

    /* ── Gradienty marki ────────────────────────────────────────────────── */
    --grad:      linear-gradient(135deg, var(--acc-violet) 5%, var(--acc-red) 50%, var(--acc-gold) 95%);   /* legacy */
    --grad-h:    linear-gradient(135deg, var(--acc-violet-h) 5%, var(--acc-red-h) 50%, var(--acc-gold-h) 95%);
    --grad-sig:  linear-gradient(207deg, var(--acc-violet) 5%, var(--acc-red) 50%, var(--acc-gold) 95%);   /* PODPIS marki — tło BEZ tekstu */
    --grad-menu: var(--grad-sig);
    --grad-bar:  linear-gradient(90deg, var(--acc-violet) 5%, var(--acc-red) 50%, var(--acc-gold) 95%);   /* paski, scrollbar, progress */
    --grad-rail: linear-gradient(180deg, var(--acc-violet) 5%, var(--acc-red) 50%, var(--acc-gold) 95%);  /* szyna menu */
    --grad-btn:  linear-gradient(100deg, var(--acc-violet) 0%, rgb(190, 0, 0) 100%);                      /* 2 stopnie: biały tekst ≥ 6:1 */

    /* ── Skala kształtu M3 ──────────────────────────────────────────────── */
    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 999px;
    --r:  var(--r-lg);
    --rs: var(--r-md);
    --rp: var(--r-full);

    /* ── Ruch M3 + warstwy stanu ────────────────────────────────────────── */
    --eb:   cubic-bezier(.2, 0, 0, 1);
    --sp:   .2s;
    --st-hover: 8%;
    --st-press: 14%;

    /* ── Wymiary układu ─────────────────────────────────────────────────── */
    --hh:   120px;
    --hh-s:  88px;
    --mw:   340px;
    --blur: saturate(160%) blur(18px);

    /* ── Stare nazwy (starsze podstrony) ────────────────────────────────── */
    --primary-color: var(--ac);
    --btn-bg:        var(--ac);
    --btn-text:      #fff;
    --btn-hover-bg:  var(--ac-h);
    --btn-shadow:    0 2px 8px rgba(131,58,180,.22);
    --bg-input:      var(--bg-in);
    --bg-color:      var(--bg-card);
    --border-radius: var(--r);
    --transition-speed: var(--sp);
    --ac-glow:       rgba(131,58,180,.40);
    --ac-glow2:      rgba(131,58,180,.18);
    --ts-bg:   linear-gradient(135deg,rgb(120,53,15),rgb(146,64,14));
    --ts-tx:   rgb(254,243,199);

    /* ── 2) ROLE M3 — CIEMNY (domyślny) ───────────────────────────────────
       Szkielet: @material/material-color-utilities (HCT), seed primary #833AB4,
       secondary #FF0000, tertiary #FFFF00. Dostrojone ręcznie pod markę:
       neutralne z fioletowym odcieniem (chroma 12), tekst jaśniejszy niż
       domyślny M3, akcenty żywsze (nie pastelowe). Wypełnienia przycisków
       (*-solid) to stałe kolory marki w OBU trybach. */
    --md-sys-color-primary: #d697ff;
    --md-sys-color-on-primary: #4e0079;
    --md-sys-color-primary-container: #6a1c9b;
    --md-sys-color-on-primary-container: #f4daff;
    --md-sys-color-secondary: #ff8a79;
    --md-sys-color-on-secondary: #690100;
    --md-sys-color-secondary-container: #930100;
    --md-sys-color-on-secondary-container: #ffdad4;
    --md-sys-color-tertiary: #ffee00;
    --md-sys-color-on-tertiary: #2a2500;
    --md-sys-color-tertiary-container: #5c4a00;
    --md-sys-color-on-tertiary-container: #ffe97a;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #15111e;
    --md-sys-color-surface-dim: #15111e;
    --md-sys-color-surface-bright: #3c3745;
    --md-sys-color-surface-container-lowest: #100c18;
    --md-sys-color-surface-container-low: #1d1a26;
    --md-sys-color-surface-container: #221e2b;
    --md-sys-color-surface-container-high: #2c2835;
    --md-sys-color-surface-container-highest: #373340;
    --md-sys-color-on-surface: #f6edff;
    --md-sys-color-on-surface-variant: #dcd4e6;
    --md-sys-color-outline: #948f99;
    --md-sys-color-outline-variant: #49454e;
    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f35;
    --md-sys-color-inverse-primary: #833ab4;
    --md-sys-color-scrim: #000000;
    --md-sys-color-success: #91d888;
    --md-sys-color-on-success: #003908;
    --md-sys-color-success-container: #0b5314;
    --md-sys-color-on-success-container: #acf4a2;
    --md-sys-color-primary-solid: #8e44c4;
    --md-sys-color-on-primary-solid: #ffffff;
    --md-sys-color-secondary-solid: #c00100;
    --md-sys-color-on-secondary-solid: #ffffff;
    --md-sys-color-tertiary-solid: #ffee00;
    --md-sys-color-on-tertiary-solid: #1d1d00;

    --grad-tx:   linear-gradient(90deg, #c77dff 0%, #ff6b5e 52%, #ffee00 100%);    /* gradient TEKSTU — każdy stop ≥ 6:1 */
    /* Gradientowy „wash” — podpis marki o ograniczonej intensywności. Siła dobrana
       próbkowaniem: tekst ≥ 7:1 na całej powierzchni menu 340×800. */
    --menu-wash: linear-gradient(207deg,
                    color-mix(in srgb, var(--acc-violet) 46%, transparent) 0%,
                    color-mix(in srgb, var(--acc-red) 32%, transparent) 50%,
                    color-mix(in srgb, #ff9500 22%, transparent) 100%);
    --head-wash: linear-gradient(90deg,
                    color-mix(in srgb, var(--acc-violet) 24%, transparent) 0%,
                    color-mix(in srgb, var(--acc-red) 15%, transparent) 55%,
                    color-mix(in srgb, #ff9500 16%, transparent) 100%);
    --hd-sh:    0 4px 16px rgba(0,0,0,.65), 0 8px 32px rgba(0,0,0,.45);
    --hd-sh-c:  0 2px 12px rgba(0,0,0,.55);
    --sh-s:    0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
    --sh-m:    0 4px 12px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.35);
    --sh-l:    0 12px 32px rgba(0,0,0,.60), 0 4px 8px rgba(0,0,0,.40);

    /* Aliasy zgodne z resztą kodu i podstronami. MUSZĄ być powtórzone w każdym
       bloku trybu — var() rozwiązuje się tam, gdzie zadeklarowano właściwość,
       więc alias z :root nie zmieniłby się po nadpisaniu ról w body.light. */
    --surf-1:  var(--md-sys-color-surface);
    --surf-2:  var(--md-sys-color-surface-container);
    --surf-3:  var(--md-sys-color-surface-container-high);
    --bg:      var(--surf-1);
    --bg-card: var(--surf-2);
    --bg-in:   var(--surf-3);
    --dk-card: var(--surf-3);          /* stara nazwa używana w podstronach (.dark .kb) */
    --bg-card-glass: var(--surf-2);
    --tx:      var(--md-sys-color-on-surface);
    --tx-s:    var(--md-sys-color-on-surface-variant);
    --bd:      var(--md-sys-color-outline-variant);   /* subtelne linie, dekoracja */
    --outline: var(--md-sys-color-outline);           /* obrys pól (≥ 3.6:1) */
    --bg-head: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    --hd-tx:   var(--md-sys-color-on-surface);
    --hd-tx-s: var(--md-sys-color-on-surface-variant);
    --hd-bd:   var(--md-sys-color-outline-variant);
    --pl-bg:   color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --pl-bgh:  color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
    --pl-bd:   var(--md-sys-color-outline-variant);
    --pl-tx:   var(--md-sys-color-on-surface);
    --pl-ph:   var(--md-sys-color-on-surface-variant);
    --dd-bg:   var(--md-sys-color-surface-container-high);
    --dd-bd:   var(--md-sys-color-outline-variant);
    --glass:   color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    --acc-violet-tx: var(--md-sys-color-primary);     /* tekst/ikona w kolorze marki */
    --acc-red-tx:    var(--md-sys-color-secondary);
    --acc-gold-tx:   var(--md-sys-color-tertiary);
    --caret:   var(--md-sys-color-primary);
}

/* ── 2) ROLE M3 — JASNY ─────────────────────────────────────────────── */
body.light, html.light-preload {
    color-scheme: light;
    --md-sys-color-primary: #833ab4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #f4daff;
    --md-sys-color-on-primary-container: #2f004c;
    --md-sys-color-secondary: #c00100;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #ffdad4;
    --md-sys-color-on-secondary-container: #410000;
    --md-sys-color-tertiary: #7a5900;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffe58a;
    --md-sys-color-on-tertiary-container: #3a2d00;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-surface: #f1e7ff;
    --md-sys-color-surface-dim: #e1d4f9;
    --md-sys-color-surface-bright: #f1e7ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f6edff;
    --md-sys-color-surface-container: #fbf4ff;
    --md-sys-color-surface-container-high: #ece0ff;
    --md-sys-color-surface-container-highest: #e4d7fc;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-on-surface-variant: #49454e;
    --md-sys-color-outline: #7a757f;
    --md-sys-color-outline-variant: #cac4cf;
    --md-sys-color-inverse-surface: #322f35;
    --md-sys-color-inverse-on-surface: #f5eff7;
    --md-sys-color-inverse-primary: #e3b5ff;
    --md-sys-color-scrim: #000000;
    --md-sys-color-success: #296b2a;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-success-container: #acf4a2;
    --md-sys-color-on-success-container: #002203;
    --md-sys-color-primary-solid: #8e44c4;
    --md-sys-color-on-primary-solid: #ffffff;
    --md-sys-color-secondary-solid: #c00100;
    --md-sys-color-on-secondary-solid: #ffffff;
    --md-sys-color-tertiary-solid: #ffee00;
    --md-sys-color-on-tertiary-solid: #1d1d00;

    --grad-tx:   linear-gradient(90deg, #833ab4 0%, #c00100 55%, #9a6f00 100%);    /* gradient TEKSTU — ≥ 4.0:1 (duży tekst, ikony) */
    --menu-wash: linear-gradient(207deg,
                    color-mix(in srgb, var(--acc-violet) 28%, transparent) 0%,
                    color-mix(in srgb, var(--acc-red) 22%, transparent) 50%,
                    color-mix(in srgb, var(--acc-gold) 55%, transparent) 100%);
    --head-wash: linear-gradient(90deg,
                    color-mix(in srgb, var(--acc-violet) 20%, transparent) 0%,
                    color-mix(in srgb, var(--acc-red) 12%, transparent) 55%,
                    color-mix(in srgb, var(--acc-gold) 38%, transparent) 100%);
    --hd-sh:   0 4px 16px rgba(60,20,90,.12), 0 8px 28px rgba(60,20,90,.06);
    --hd-sh-c: 0 2px 10px rgba(60,20,90,.10);
    --sh-s:    0 1px 3px rgba(60,20,90,.16), 0 1px 2px rgba(60,20,90,.10);
    --sh-m:    0 4px 12px rgba(60,20,90,.16), 0 2px 4px rgba(60,20,90,.08);
    --sh-l:    0 12px 32px rgba(60,20,90,.20), 0 4px 8px rgba(60,20,90,.10);

    /* Aliasy zgodne z resztą kodu i podstronami. MUSZĄ być powtórzone w każdym
       bloku trybu — var() rozwiązuje się tam, gdzie zadeklarowano właściwość,
       więc alias z :root nie zmieniłby się po nadpisaniu ról w body.light. */
    --surf-1:  var(--md-sys-color-surface);
    --surf-2:  var(--md-sys-color-surface-container);
    --surf-3:  var(--md-sys-color-surface-container-high);
    --bg:      var(--surf-1);
    --bg-card: var(--surf-2);
    --bg-in:   var(--surf-3);
    --dk-card: var(--surf-3);          /* stara nazwa używana w podstronach (.dark .kb) */
    --bg-card-glass: var(--surf-2);
    --tx:      var(--md-sys-color-on-surface);
    --tx-s:    var(--md-sys-color-on-surface-variant);
    --bd:      var(--md-sys-color-outline-variant);   /* subtelne linie, dekoracja */
    --outline: var(--md-sys-color-outline);           /* obrys pól (≥ 3.6:1) */
    --bg-head: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    --hd-tx:   var(--md-sys-color-on-surface);
    --hd-tx-s: var(--md-sys-color-on-surface-variant);
    --hd-bd:   var(--md-sys-color-outline-variant);
    --pl-bg:   color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --pl-bgh:  color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
    --pl-bd:   var(--md-sys-color-outline-variant);
    --pl-tx:   var(--md-sys-color-on-surface);
    --pl-ph:   var(--md-sys-color-on-surface-variant);
    --dd-bg:   var(--md-sys-color-surface-container-high);
    --dd-bd:   var(--md-sys-color-outline-variant);
    --glass:   color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    --acc-violet-tx: var(--md-sys-color-primary);     /* tekst/ikona w kolorze marki */
    --acc-red-tx:    var(--md-sys-color-secondary);
    --acc-gold-tx:   var(--md-sys-color-tertiary);
    --caret:   var(--md-sys-color-primary);
}

/* ==========================================================================
   §2  PRZEGLĄDARKA — customizacja natywnych elementów UI
   ========================================================================== */
/* Scrollbary */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--md-sys-color-primary); border-radius:10px; }
* { scrollbar-width:thin; scrollbar-color:var(--acc-violet) transparent; }
#menu::-webkit-scrollbar       { width:4px; }
#menu::-webkit-scrollbar-thumb { background:var(--md-sys-color-outline); border-radius:10px; }
#tekst::-webkit-scrollbar-thumb { background:var(--md-sys-color-primary); border-radius:10px; }

/* Zaznaczenie tekstu — Chrome/Safari i Firefox osobno (Firefox wymaga prefiksu) */
::selection { background:var(--acc-violet); color:#fff; }
::-moz-selection { background:var(--acc-violet); color:#fff; }

/* Kursor migający w polach tekstowych — dopasowany do akcentu zamiast systemowego */
input, textarea, [contenteditable="true"] { caret-color:var(--caret); }

/* Checkboxy, radio, range, progress — natywny kolor zamiast systemowego niebieskiego */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color:var(--acc-violet);
}

/* Punktory list — kolor akcentu zamiast domyślnego systemowego */
li::marker { color:var(--acc-violet); }

/* Pole wyszukiwania — przycisk czyszczenia (Chrome/Safari) */
input[type="search"]::-webkit-search-cancel-button {
    filter:opacity(.6);
    cursor:pointer;
}

/* Ikonka kalendarza w input[type=date] — dopasowana do trybu ciemnego/jasnego */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter:invert(var(--picker-invert, 0));
    cursor:pointer;
    border-radius:4px;
}
body:not(.light) input[type="date"] { --picker-invert: 1; }

/* Przycisk wyboru pliku — spójny z resztą przycisków */
input[type="file"]::file-selector-button {
    background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border:none;
    border-radius:var(--r-full); padding:8px 16px; font-weight:600;
    cursor:pointer; margin-right:10px; font-family:inherit;
    transition:background var(--sp);
}
input[type="file"]::file-selector-button:hover { background:color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary)); }

/* <details>/<summary> — strzałka w kolorze akcentu */
summary { cursor:pointer; }
summary::marker { color:var(--acc-violet); }

/* ==========================================================================
   §3  RESET
   ========================================================================== */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; height:100%; }
body {
    background:var(--bg);
    color:var(--tx);
    margin:0;
    font-family:'Noto Sans Display','Segoe UI',system-ui,sans-serif;
    display:flex; flex-direction:column;
    height:100vh; height:100dvh; overflow:hidden;
    transition:background .3s ease, color .3s ease;
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--acc-violet-tx); }

/* ==========================================================================
   §4  UKŁAD
   ========================================================================== */
.sky {
    display:flex; flex-direction:column;
    flex:1; height:100vh; height:100dvh; overflow:hidden;
    position:relative; z-index:1; isolation:isolate;
}
#glowny {
    display:flex; flex:1; position:relative; min-height:0;
    overflow:visible;
}
#menu {
    width:var(--mw); flex-shrink:0;
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    position:relative; z-index:2; isolation:isolate;
    padding:18px 14px; font-size:16px;
}
/* Menu — M3 navigation drawer z gradientowym „wash”: powierzchnia + gradient 207°
   (podpis marki) o ograniczonej intensywności + pionowa szyna 4 px w pełnych
   kolorach marki. Tekst ≥ 7:1 na całej powierzchni (próbkowanie gradientu). */
#menu {
    background:
        var(--grad-rail) right / 4px 100% no-repeat,
        var(--menu-wash),
        var(--md-sys-color-surface-container-low);
    color:var(--md-sys-color-on-surface);
    border-right:0;
}
#tekst {
    flex:1; overflow-y:overlay; overflow-x:hidden; overscroll-behavior:contain;
    padding:60px 64px 130px; font-size:18px;
    display:flex; flex-direction:column; align-items:center;
    position:relative; z-index:1; min-height:0;
    transition:opacity var(--sp), transform var(--sp), font-size .2s ease;
}
@supports not (overflow:overlay) { #tekst { overflow-y:auto; } }
#tekst > * { max-width:100%; flex-shrink:0; }

/* ==========================================================================
   §5  NAGŁÓWEK
   ========================================================================== */
#nazwa {
    width:100%; height:var(--hh);
    background:var(--head-wash), var(--bg-head); color:var(--hd-tx);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    font-size:clamp(13px, 3.5vw, 26px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; justify-content:center; text-align:center;
    flex-shrink:0; position:relative; z-index:100; user-select:none;
    box-shadow:var(--hd-sh), inset 0 -1px 0 var(--hd-bd);
    transition:background var(--sp), box-shadow var(--sp);
    transform:translateZ(0);
}
#nazwa::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:var(--grad-bar);
}
#zegar {
    position:absolute; right:14px; top:10px;
    color:var(--hd-tx-s); font-size:14px;
    cursor:pointer; z-index:101; white-space:nowrap; user-select:none;
    transition:color var(--sp), transform var(--sp);
}
#zegar:hover { color:var(--hd-tx); transform:scale(1.04); }

/* ==========================================================================
   §6  MENU — M3 navigation drawer + gradientowy „wash”
   Tło: gradient marki (--menu-wash) na surface-container-low; tekst: on-surface
   (≥ 7:1 w obu trybach, próbkowane po całej powierzchni 340×800).
   Aktywna kategoria = pełny fiolet marki (primary-solid). Stany: warstwy stanu.
   ========================================================================== */
#menu a, #menu .submenu-toggle, #menu .menu-home-link {
    color:var(--md-sys-color-on-surface);
}
#menu a {
    display:block; border-radius:var(--r-full); padding:8px 14px;
    font-size:15px; position:relative;
    transition:background-color var(--sp), color var(--sp);
}
#menu a:hover {
    background:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
#menu a:active {
    background:color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
}

/* Tytuł w menu — <button id="menuText">: gradient jako wypełnienie TEKSTU */
#menuText {
    display:block; width:100%;
    background:var(--grad-tx); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    font-size:clamp(24px,5vw,38px); font-weight:900; letter-spacing:-.02em;
    padding:4px 14px 16px; margin:0; border:0; border-radius:0; box-shadow:none;
    min-height:0; text-align:left; user-select:none;
}
#menuText::after { content:none; }
#menu > h2 { margin:0; }

.submenu-toggle {
    display:flex; align-items:center; width:100%;
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
    padding:10px 14px; border-radius:var(--r-full); margin-bottom:6px;
    background:transparent; border:0; box-shadow:none;
    cursor:pointer; outline:none;
    transition:background-color var(--sp), color var(--sp);
}
.submenu-toggle:hover {
    background:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
#menu .submenu-toggle.active, #menu a.submenu-toggle.active {
    background:var(--md-sys-color-primary-solid);
    color:var(--md-sys-color-on-primary-solid);
}
.submenu-toggle::after { content:'\25BE'; margin-left:auto; }
.submenu-toggle.active::after { content:'\25B4'; }
a.submenu-toggle, button.submenu-toggle { display:flex !important; }

.submenu-list {
    list-style:none; padding:0 0 0 10px; margin:0;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .32s var(--eb), opacity .22s ease, margin .32s var(--eb);
}
.submenu-toggle.active + .submenu-list,
a.submenu-toggle.active + .submenu-list { max-height:1200px; opacity:1; margin:4px 0 8px; }
.submenu-list + .submenu-toggle { margin-top:10px; }

.odstep-duzy { height:1px; background:var(--md-sys-color-outline-variant); margin:8px 4px; }
#menu .menu-home-link {
    display:flex; align-items:center; width:100%;
    font-size:15px; font-weight:700; padding:10px 14px; margin-bottom:10px;
    border-radius:var(--r-full);
    background:color-mix(in srgb, var(--md-sys-color-surface-container-high) 70%, transparent);
    box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant);
    transition:background-color var(--sp);
}
#menu .menu-home-link:hover {
    background:color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

/* ==========================================================================
   §7  PASEK KONTROLNY — pigułki
   ========================================================================== */
#controls-wrapper {
    display:flex; align-items:center; gap:8px;
    position:absolute; top:10px; right:16px; z-index:200;
    user-select:none; overflow:visible;
}
.search-pill, .mode, .lang-wrapper, .egg-circle {
    background:var(--pl-bg); border:1px solid var(--pl-bd); color:var(--pl-tx);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-radius:var(--rp); height:34px;
    font-family:inherit; font-size:13px; font-weight:500;
    box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10);
    display:flex; align-items:center; cursor:pointer; position:relative;
    transition:background var(--sp), border-color var(--sp), transform var(--sp);
}
.search-pill, .egg-circle { overflow:hidden; }
.mode, .lang-wrapper { overflow:visible; }
.search-pill:hover,.mode:hover,.lang-wrapper:hover,.egg-circle:hover {
    background:var(--pl-bgh);
}
.search-pill:active,.mode:active,.lang-wrapper:active,.egg-circle:active {
    background:var(--pl-bgh);
}
.search-pill *,.mode *,.lang-wrapper *,.egg-circle *,
#searchInput,.search-lupa-icon,.lang-globe-icon,.lang-current,.lang-arrow {
    color:var(--pl-tx) !important;
}

.search-container { position:relative; }
.search-pill { width:185px; cursor:text; transition:width .3s ease, background var(--sp), transform var(--sp); }
.search-pill:focus-within,
.search-container.search-open .search-pill {
    width:265px; transform:none; background:var(--pl-bgh);
    border-color:var(--md-sys-color-primary);
    box-shadow:0 0 0 1px var(--md-sys-color-primary);
}
.search-lupa-icon { font-size:16px; opacity:.70; padding:0 5px 0 10px; flex-shrink:0; pointer-events:none; }
#searchInput {
    flex:1; min-width:0; height:100%;
    background:transparent !important; border:none !important;
    outline:none !important; box-shadow:none !important;
    font-family:inherit; font-size:13px; padding:0 8px 0 2px; cursor:text;
}
#searchInput::placeholder { color:var(--pl-ph) !important; }
.search-results {
    position:absolute; top:42px; left:0; right:0;
    background:var(--dd-bg); border:1px solid var(--dd-bd);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-radius:14px; box-shadow:var(--sh-l);
    max-height:225px; overflow-y:auto; display:none; z-index:9999;
}
.search-results.active { display:block; animation:dropIn .2s var(--eb); }
.search-item {
    padding:9px 16px; cursor:pointer; font-size:13px;
    display:flex; flex-direction:column; gap:3px;
    color:var(--tx); transition:background var(--sp);
    outline:none;
}
.search-item:hover, .search-item:focus-visible { background:var(--pl-bgh); }
.search-item:focus-visible { box-shadow:inset 2px 0 0 var(--md-sys-color-primary); }
.search-item-main { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-item-name { font-weight:600; }
.search-item-desc {
    font-size:11.5px; color:var(--tx-s);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-tag {
    font-size:10px; padding:1px 7px; border-radius:20px;
    background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container);
    font-weight:600; text-transform:lowercase;
}
.search-hl { background:color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); color:inherit; border-radius:3px; padding:0 1px; font-weight:700; }
.search-empty { padding:14px; text-align:center; color:var(--tx-s); font-size:13px; }

.lang-wrapper { position:relative; min-width:108px; padding:0 10px 0 0; }
.lang-globe-icon { font-size:15px; opacity:.70; padding:0 5px 0 10px; flex-shrink:0; pointer-events:none; }
.lang-current { flex:1; font-size:13px; font-weight:500; padding:0 4px 0 2px; white-space:nowrap; }
.lang-arrow { font-size:14px; opacity:.65; flex-shrink:0; transition:transform var(--sp); }
.lang-wrapper[aria-expanded="true"] .lang-arrow { transform:rotate(180deg); }
.lang-wrapper[aria-expanded="true"] .lang-menu { display:block; }
.lang-menu {
    display:none; position:absolute; top:calc(100% + 6px); left:0;
    background:var(--dd-bg); border:1px solid var(--dd-bd);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-radius:14px; box-shadow:var(--sh-l);
    overflow:hidden; z-index:9999; min-width:150px; width:max-content; max-width:calc(100vw - 20px);
    animation:dropIn .18s var(--eb);
}
.lang-option { padding:10px 14px; cursor:pointer; font-size:13px; color:var(--tx); transition:background var(--sp);
    display:flex; align-items:center; gap:8px; white-space:nowrap; }
.lang-option:hover { background:var(--pl-bgh); }
.lang-option.active { font-weight:700; background:var(--pl-bgh); }

.mode { padding:0 6px 0 12px; gap:6px; white-space:nowrap; position:relative; min-width:108px; }
.mode-arrow { font-size:14px; opacity:.65; margin-left:auto; flex-shrink:0; transition:transform var(--sp); }
.mode[aria-expanded="true"] .mode-arrow { transform:rotate(180deg); }
.mode-icon { font-size:18px; flex-shrink:0; }
.mode-label { font-size:12.5px; font-weight:600; flex-shrink:0; }
.mode[aria-expanded="true"] .mode-menu { display:block; }
.mode-menu {
    display:none; position:absolute; top:calc(100% + 6px); left:0;
    background:var(--dd-bg); border:1px solid var(--dd-bd);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-radius:14px; box-shadow:var(--sh-l);
    overflow:hidden; z-index:9999; min-width:200px; width:max-content; max-width:calc(100vw - 20px);
    animation:dropIn .18s var(--eb);
}
.mode-option {
    padding:10px 14px; cursor:pointer; font-size:13px; color:var(--tx);
    display:flex; align-items:center; gap:8px;
    transition:background var(--sp); white-space:nowrap;
}
.mode-option .material-icons { font-size:17px; }
.mode-option:hover { background:var(--pl-bgh); }
.mode-option.active { font-weight:700; background:var(--pl-bgh); }
.mode-menu-sep { height:1px; background:var(--pl-bd); margin:4px 0; }
/* Wspólny znacznik wybranej opcji w obu listach (tryb i język) */
.mode-option.active::after, .lang-option.active::after {
    content:'\2713'; margin-left:auto; padding-left:16px; font-weight:800; color:var(--md-sys-color-primary);
}
.egg-circle { width:34px; height:34px; justify-content:center; }
/* #quickQrBtn jest elementem <button> (poprawna semantyka akcji, nie
   nawigacji) — reset globalnych stylów button,.btn, które inaczej
   kolidowałyby z .egg-circle (padding, display, ::after sheen effect) */
#quickQrBtn {
    padding:0 !important; display:flex !important; min-height:unset !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#quickQrBtn::after { display:none; }
#quickQrBtn:hover:not(:disabled) {
    background:var(--pl-bgh) !important; transform:none;
    box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.egg-circle .material-icons { font-size:17px; }

/* ==========================================================================
   §8  KARTY — M3 container (surface-container), zagnieżdżone: container-high
   Bez backdrop-filter: tło strony jest jednolite, więc rozmycie nic nie dawało,
   a kosztowało GPU. Hover = wyższa elewacja (bez przesunięcia).
   ========================================================================== */
.card {
    background:var(--bg-card); padding:24px; border-radius:var(--r);
    margin:10px auto 24px; border:1px solid var(--bd);
    width:80%; max-width:1400px;
    box-shadow:var(--sh-s);
    position:relative; overflow:hidden; z-index:2;
    animation:fadeInUp .35s var(--eb) both;
    transition:box-shadow var(--sp), border-color var(--sp), background-color .3s ease;
}
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--grad-bar);
}
.card:hover { box-shadow:var(--sh-m); border-color:var(--outline); }
/* Nagłówki treści — skalują się z suwakiem rozmiaru czcionki (--font-scale,
   ustawiane inline na #tekst przez JS). Poza #tekst --font-scale nie jest
   zdefiniowane, więc calc(...* 1) = wartość bazowa. */
h1 { font-size:calc(clamp(1.4rem, 4vw, 2.2rem) * var(--font-scale, 1)); }
h2 { font-size:calc(clamp(1.1rem, 3vw, 1.5rem) * var(--font-scale, 1)); }
h3 { font-size:calc(clamp(1rem, 2.5vw, 1.2rem) * var(--font-scale, 1)); }
.card h2 { margin-top:0; text-align:center; font-weight:700; letter-spacing:-.02em; user-select:none; }
.card ul { list-style:disc; margin:0; padding-left:20px; }
/* Ciągły tekst do czytania — ograniczony do czytelnej długości linii
   (66ch ≈ 50-75 znaków, potwierdzone badaniami Baymard Institute i
   wymogiem WCAG 1.4.8 max 80 znaków), niezależnie od tego jak szeroka
   jest sama karta. Formularze/obrazy/canvas w podstronach NIE są objęte
   (brak tego selektora na .card > input/img/canvas/table), bo tam
   ograniczenie czytelności linii nie ma zastosowania. */
/* Kartka zagnieżdżona wewnątrz karty (np. panel wyniku, sekcja) — surf-3 */
.card .subcard, .card .nested, .card .panel {
    background:var(--bg-in);
    border:1px solid var(--bd);
    border-radius:var(--rs);
    padding:14px 16px;
}

/* ==========================================================================
   §9  FORMULARZE — M3 outlined
   Reguła globalna w :where() ma specyficzność 0: klasa w podstronie (np.
   .inp-grade { width:auto }) wygrywa BEZ !important. Wcześniej
   input:not(#searchInput) miał specyficzność ID i wygrywał z każdą klasą.
   Checkbox/radio/range/color nie dostają stylu pola tekstowego.
   ========================================================================== */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not(#searchInput),
       textarea, select:not(.lang), .matobl, .text-area-box) {
    width:100%; padding:12px 16px; margin:7px 0;
    border-radius:var(--r-sm); border:1px solid var(--outline);
    background:var(--bg-in); color:var(--tx);
    font-size:calc(1rem * var(--font-scale, 1)); font-family:inherit; outline:none;
    transition:border-color var(--sp), box-shadow var(--sp), background-color .3s ease;
}
:where(textarea, .text-area-box) { resize:none; min-height:120px; }
:where(.matobl) { cursor:pointer; }
:where(.inp-grade) { width:auto; display:inline-block; }
:where(input, textarea, select, .matobl, .text-area-box):where(:hover:not(:focus):not(:disabled)) {
    border-color:var(--md-sys-color-on-surface-variant);
}
:where(input, textarea, select, .matobl, .text-area-box):where(:focus) {
    border-color:var(--md-sys-color-primary);
    box-shadow:0 0 0 1px var(--md-sys-color-primary);
}
:where(input, textarea, select):where(:disabled) {
    opacity:.38; cursor:not-allowed;
}

/* ==========================================================================
   §10  PRZYCISKI — M3: filled / tonal / outlined / text (+ gradient)
   Reguły bazowe w :where() (specyficzność 0): komponenty nadpisują je zwykłą
   klasą, bez !important. Warianty ustawiają tylko zmienne prywatne:
     --_bg tło   --_fg tekst/ikona   --_st kolor warstwy stanu
     --_bd kolor obrysu   --_ringw grubość obrysu
   Obrys i warstwa stanu to INSET box-shadow, a NIE border: przezroczysta ramka
   z gradientowym tłem rysowała „szew” (tło powtarzało się pod ramką) — to było
   brzydkie obramowanie przycisków gradientowych w v10.
   Wypełnienia filled = stałe kolory marki w obu trybach (*-solid), tekst na
   nich ≥ 5.5:1.
   Klasy: button/.btn/.btn-solid-violet · .btn-solid-red · .btn-solid-gold ·
   .btn-flat-* (tonal) · .btn-outline-* · .btn-text · .btn-gradient ·
   .btn-clear · .btn-secondary
   ========================================================================== */
:where(button, .btn) {
    --_bg: var(--md-sys-color-primary-solid);
    --_fg: var(--md-sys-color-on-primary-solid);
    --_st: var(--md-sys-color-on-primary-solid);
    --_bd: transparent;
    --_ringw: 1px;
    --_layer: transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--_bg); color:var(--_fg);
    border:0; border-radius:var(--r-full);
    font-family:inherit; font-size:calc(.95rem * var(--font-scale, 1)); font-weight:600;
    letter-spacing:.01em; text-align:center;
    padding:10px 24px; min-height:40px;
    cursor:pointer; user-select:none; position:relative; outline:none;
    box-shadow:inset 0 0 0 var(--_ringw) var(--_bd), inset 0 0 0 999px var(--_layer);
    transition:background-color var(--sp), color var(--sp), box-shadow var(--sp);
}
:where(button, .btn):where(:hover:not(:disabled)) {
    --_layer: color-mix(in srgb, var(--_st) var(--st-hover), transparent);
}
:where(button, .btn):where(:active:not(:disabled), .active, [aria-pressed="true"]) {
    --_layer: color-mix(in srgb, var(--_st) var(--st-press), transparent);
}
:where(button, .btn):where(:disabled) {
    background:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    color:color-mix(in srgb, var(--md-sys-color-on-surface) 42%, transparent);
    --_bd: transparent; --_layer: transparent;
    cursor:not-allowed; pointer-events:none;
}
/* Gradient pod ramką/obrysem rysowany od krawędzi, bez powtórzeń „pod ramką”
   (naprawia też gradientowe zakładki w podstronach, np. .qr-tab.active). */
button, .btn, .qr-tab { background-origin:border-box !important; }

/* --- warianty (tylko zmienne) --- */
.btn-gradient       { --_bg:var(--grad-btn); --_fg:#fff; --_st:#fff; }
.btn-solid-violet   { --_bg:var(--md-sys-color-primary-solid);   --_fg:var(--md-sys-color-on-primary-solid);   --_st:var(--md-sys-color-on-primary-solid); }
.btn-solid-red      { --_bg:var(--md-sys-color-secondary-solid); --_fg:var(--md-sys-color-on-secondary-solid); --_st:var(--md-sys-color-on-secondary-solid); }
.btn-solid-gold     { --_bg:var(--md-sys-color-tertiary-solid);  --_fg:var(--md-sys-color-on-tertiary-solid);  --_st:var(--md-sys-color-on-tertiary-solid); }

.btn-flat-violet    { --_bg:var(--md-sys-color-primary-container);   --_fg:var(--md-sys-color-on-primary-container);   --_st:var(--md-sys-color-on-primary-container); }
.btn-flat-red       { --_bg:var(--md-sys-color-secondary-container); --_fg:var(--md-sys-color-on-secondary-container); --_st:var(--md-sys-color-on-secondary-container); }
.btn-flat-gold      { --_bg:var(--md-sys-color-tertiary-container);  --_fg:var(--md-sys-color-on-tertiary-container);  --_st:var(--md-sys-color-on-tertiary-container); }

.btn-outline-violet { --_bg:transparent; --_fg:var(--md-sys-color-primary);   --_st:var(--md-sys-color-primary);   --_bd:color-mix(in srgb, var(--md-sys-color-primary) 75%, transparent);   --_ringw:1.5px; }
.btn-outline-red    { --_bg:transparent; --_fg:var(--md-sys-color-secondary); --_st:var(--md-sys-color-secondary); --_bd:color-mix(in srgb, var(--md-sys-color-secondary) 75%, transparent); --_ringw:1.5px; }
.btn-outline-gold   { --_bg:transparent; --_fg:var(--md-sys-color-tertiary);  --_st:var(--md-sys-color-tertiary);  --_bd:color-mix(in srgb, var(--md-sys-color-tertiary) 75%, transparent);  --_ringw:1.5px; }
.btn-text           { --_bg:transparent; --_fg:var(--md-sys-color-primary);   --_st:var(--md-sys-color-primary);   padding-inline:12px; }

.btn-clear          { --_bg:var(--glass); --_fg:var(--tx); --_st:var(--tx); --_bd:var(--md-sys-color-outline-variant); }
.btn-secondary      { --_bg:var(--md-sys-color-surface-container-high); --_fg:var(--tx); --_st:var(--tx); --_bd:var(--md-sys-color-outline-variant); }

/* Dekoracyjne tło „podpisu marki” (207°) — BEZ tekstu wewnątrz. */
.bg-grad-sig { background:var(--grad-sig); }

/* ==========================================================================
   §11  SMDIALOG — modal (alert/confirm/prompt) + toast
   Zastępuje natywny window.alert().
   ========================================================================== */

/* --- Overlay + focus trap kontener --- */
#sm-dialog-overlay {
    position:fixed; inset:0; z-index:200000;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    background:rgba(0,0,0,0); backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
    opacity:0; pointer-events:none;
    transition:opacity .22s ease, background .22s ease, backdrop-filter .22s ease;
}
#sm-dialog-overlay.show {
    opacity:1; pointer-events:auto;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
body.light #sm-dialog-overlay.show {
    background:rgba(20,18,30,.30);
}

/* --- Okno dialogowe — jak .card, z kolorową belką akcentu --- */
.sm-dialog-box {
    background:var(--md-sys-color-surface-container-high); color:var(--tx);
    border:1px solid var(--bd); border-radius:var(--r-xl);
    box-shadow:var(--sh-l);
    width:min(420px, 100%);
    padding:22px 24px 20px;
    position:relative; overflow:hidden;
    transform:scale(.92) translateY(10px); opacity:0;
    transition:transform .22s var(--eb), opacity .22s ease;
}
#sm-dialog-overlay.show .sm-dialog-box { transform:scale(1) translateY(0); opacity:1; }
.sm-dialog-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
}
.sm-accent-violet::before { background:var(--acc-violet); }
.sm-accent-red::before    { background:var(--acc-red); }
.sm-accent-gold::before   { background:var(--acc-gold); }

.sm-dialog-title {
    display:flex; align-items:center; gap:10px;
    font-size:1.05rem; font-weight:800; margin-bottom:10px;
}
.sm-accent-violet .sm-dialog-icon { color:var(--md-sys-color-primary); }
.sm-accent-red    .sm-dialog-icon { color:var(--md-sys-color-error); }
.sm-accent-gold   .sm-dialog-icon { color:var(--md-sys-color-tertiary); }
.sm-dialog-icon { font-size:1.4rem; }

.sm-dialog-msg { font-size:.92rem; line-height:1.5; color:var(--tx); margin-bottom:16px; }
.sm-dialog-input {
    width:100%; margin:0 0 16px !important;
}
.sm-dialog-actions {
    display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.sm-dialog-actions button { padding:9px 20px; font-size:.88rem; min-height:36px; }

@media(max-width:480px) {
    .sm-dialog-box { padding:18px 18px 16px; }
    .sm-dialog-actions { justify-content:stretch; }
    .sm-dialog-actions button { flex:1; }
}

/* --- Toast (nieblokujący, w rogu ekranu) — zwykły + easter egg --- */
#sm-toast {
    position:fixed; bottom:25px; right:-420px; width:340px;
    background:var(--bg-card); color:var(--tx);
    padding:14px 18px; border-radius:14px;
    box-shadow:var(--sh-l); border:1px solid var(--bd);
    z-index:100000; pointer-events:none;
    display:flex; align-items:flex-start; gap:12px;
    transition:right .55s cubic-bezier(.68,-.55,.27,1.55);
}
#sm-toast.show { right:25px; }
#sm-toast.sm-toast-click { cursor:pointer; }
#sm-toast.sm-toast-click:hover { box-shadow:var(--sh-l), 0 0 0 2px var(--md-sys-color-primary); }
#sm-toast::before {
    content:''; position:absolute; top:0; left:0; bottom:0; width:4px;
    border-radius:14px 0 0 14px;
}
#sm-toast.sm-accent-violet::before { background:var(--acc-violet); }
#sm-toast.sm-accent-red::before    { background:var(--acc-red); }
#sm-toast.sm-accent-gold::before   { background:var(--acc-gold); }
.sm-toast-icon { font-size:1.3rem; flex-shrink:0; margin-top:1px; }
#sm-toast.sm-accent-violet .sm-toast-icon { color:var(--md-sys-color-primary); }
#sm-toast.sm-accent-red    .sm-toast-icon { color:var(--md-sys-color-error); }
#sm-toast.sm-accent-gold   .sm-toast-icon { color:var(--md-sys-color-tertiary); }
.sm-toast-body { flex:1; min-width:0; }
.sm-toast-title { font-weight:800; font-size:.92rem; margin-bottom:3px; }
.sm-toast-msg { font-size:.85rem; line-height:1.4; opacity:.9; }

/* SMDialog / toast mobile layout — patrz §19 MOBILE (skonsolidowane tam,
   żeby uniknąć wielokrotnych osobnych bloków @media(max-width:768px)) */

/* ==========================================================================
   §12  EASTER EGGS
   ========================================================================== */
/* ── TRYB CMD (easter egg „tryb_haker”) — terminal: czarne tło, zielony monospace ──────────────────
   Przełączany z wyszukiwarki („cmd”/„exit”), z konsoli cmd() albo przyciskiem [ exit ] (mode.js).
   Wyjątki od globalnego nadpisywania fontu/koloru: ikony Material (inaczej zamieniają się w słowa
   „search”, „star”…) oraz tekst z gradientem (-webkit-text-fill-color: transparent znikał na czarnym). */
body.mode-cmd { --cmd-fg:#33ff66; --cmd-dim:#1fa24a; }
.mode-cmd, .mode-cmd *:not(.material-icons) {
    background-color:#000 !important; background-image:none !important;
    color:var(--cmd-fg) !important; -webkit-text-fill-color:var(--cmd-fg) !important;
    font-family:'Cascadia Mono','Consolas','Courier New',monospace !important;
    border-color:var(--cmd-dim) !important; border-radius:0 !important;
    box-shadow:none !important; text-shadow:0 0 6px rgba(51,255,102,.35);
}
.mode-cmd .material-icons { color:var(--cmd-fg) !important; background:none !important; text-shadow:none; }
.mode-cmd button, .mode-cmd .btn { border:1px solid var(--cmd-dim) !important; background:transparent !important; text-transform:lowercase; }
.mode-cmd button:hover, .mode-cmd .btn:hover, .mode-cmd a:hover { background-color:var(--cmd-fg) !important; color:#000 !important; -webkit-text-fill-color:#000 !important; text-shadow:none; }
.mode-cmd input, .mode-cmd select, .mode-cmd textarea { background:#000 !important; border:1px solid var(--cmd-dim) !important; caret-color:var(--cmd-fg); }
.mode-cmd #nazwa { border-bottom:1px solid var(--cmd-dim) !important; }
.mode-cmd #menu { border-right:1px solid var(--cmd-dim) !important; }
.mode-cmd .card::before, .mode-cmd #nazwa::after { background:var(--cmd-dim) !important; height:1px; }
.mode-cmd #nazwa h1::before { content:'C:\\> '; }
.mode-cmd #nazwa h1::after  { content:'\2588'; margin-left:2px; animation:cmdBlink 1s steps(1) infinite; }
@keyframes cmdBlink { 50% { opacity:0; } }
body.mode-cmd::after {          /* delikatne „linie skanowania” CRT; nie przechwytuje kliknięć */
    content:''; position:fixed; inset:0; pointer-events:none; z-index:999990;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(51,255,102,.045) 2px 3px);
}
#cmd-exit {
    position:fixed; right:12px; bottom:12px; z-index:999995;
    padding:6px 12px; min-height:0; font-size:13px; cursor:pointer;
    background:#000 !important; color:#33ff66 !important; -webkit-text-fill-color:#33ff66 !important;
    border:1px solid #33ff66 !important; border-radius:0 !important; box-shadow:none !important;
    font-family:'Cascadia Mono','Consolas','Courier New',monospace !important;
}
#cmd-exit:hover { background:#33ff66 !important; color:#000 !important; -webkit-text-fill-color:#000 !important; }
@keyframes rainbowGlitch { 0%{background:#f00;color:#0f0} 25%{background:#ff0;color:#00f} 50%{background:#0f0;color:#f0f} 75%{background:#0ff;color:#f00} 100%{background:#00f;color:#ff0} }
@keyframes shakePage { 0%{transform:translate(1px,1px)} 50%{transform:translate(-1px,-2px)} 100%{transform:translate(1px,1px)} }
.mode-glitch { animation:rainbowGlitch .1s infinite, shakePage .05s infinite !important; overflow:hidden; font-family:"Wingdings","Comic Sans MS",cursive !important; transition:none !important; }
.barrel-roll-forward { animation:flipForward 1.8s cubic-bezier(.45,.05,.55,.95) forwards; backface-visibility:visible !important; transform-style:preserve-3d; }
@keyframes flipForward { 0%{transform:perspective(2000px) rotateX(0deg) scale(1)} 50%{transform:perspective(2000px) rotateX(180deg) scale(.85)} 100%{transform:perspective(2000px) rotateX(360deg) scale(1)} }
.page-spin {
    animation: pageSpinTime 4s cubic-bezier(.45,0,.55,1) forwards;
    transform-origin: center center;
    overflow:hidden !important;
}
@keyframes pageSpinTime {
    0%   { transform:rotate(0deg) scale(1); filter:none; }
    15%  { transform:rotate(-8deg) scale(.97); filter:hue-rotate(60deg) saturate(1.4); }
    35%  { transform:rotate(360deg) scale(.93); filter:hue-rotate(180deg) saturate(1.8) brightness(1.15); }
    55%  { transform:rotate(720deg) scale(.93); filter:hue-rotate(280deg) saturate(1.6); }
    75%  { transform:rotate(1080deg) scale(.96); filter:hue-rotate(340deg) saturate(1.2); }
    100% { transform:rotate(1440deg) scale(1); filter:none; }
}
.physics-enabled { overflow:hidden !important; }
.physics-enabled body,.physics-enabled #menu,.physics-enabled .card,.physics-enabled #nazwa,.physics-enabled a,.physics-enabled button { transition:none !important; user-select:none; }
.falling-element { position:fixed !important; margin:0 !important; z-index:9999; pointer-events:auto; will-change:transform; transition:none !important; user-select:none; box-shadow:var(--sh-m); border-radius:var(--rs); }
#dvd-screensaver { display:none; position:fixed; inset:0; background:#000; z-index:10000; cursor:none; user-select:none; }
#dvd-logo { position:absolute; font-size:100px; font-weight:500; color:#0f0; white-space:nowrap; text-shadow:0 0 40px currentColor; }

/* ==========================================================================
   §13  KEYFRAMES
   ========================================================================== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes dropIn   { from{opacity:0;transform:translateY(-8px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ==========================================================================
   §16  DOSTĘPNOŚĆ
   ========================================================================== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Wskaźnik fokusu: 3 px, kolor primary (≥ 6:1 na surface w obu trybach).
   Pola formularzy mają własny wskaźnik (obrys 2 px w primary, §9). */
:where(a, button, summary, select, [role="button"], [tabindex="0"]):focus-visible {
    outline:3px solid var(--md-sys-color-primary); outline-offset:2px;
}
/* ==========================================================================
   §16a  VIEW TRANSITIONS — płynne przejście zmiany trybu
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root), ::view-transition-new(root) {
        animation-duration: .35s; animation-timing-function: var(--eb);
    }
    ::view-transition-old(root) { animation-name: vt-fade-out; }
    ::view-transition-new(root) { animation-name: vt-fade-in; }
}
@keyframes vt-fade-out { to { opacity:0; } }
@keyframes vt-fade-in  { from { opacity:0; } }

/* Prefers-reduced-motion: wyłącza animacje dekoracyjne (easter eggi też). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important; animation-iteration-count:1 !important;
        transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
}

/* ==========================================================================
   §16c  NOWE FUNKCJE — progress bar, skeleton, breadcrumbs, ulubione,
         suwak czcionki, wysoki kontrast, offline banner
   ========================================================================== */
#page-progress {
    position:fixed; top:var(--offline-banner-h, 0px); left:0; height:3px; width:0%;
    background:var(--grad-bar); z-index:100000; pointer-events:none;
    transition:width .25s ease, opacity .3s ease, top .3s ease;
    box-shadow:0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
}
#page-progress.done { opacity:0; }

.skeleton-card {
    background:var(--bg-card); border:1px solid var(--bd);
    border-radius:var(--r); padding:24px;
    width:min(calc(100% - 40px), 800px); margin:10px auto 24px;
}
.skeleton-line {
    height:14px; border-radius:6px; margin-bottom:12px;
    background:linear-gradient(90deg, var(--bd) 25%, color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent) 50%, var(--bd) 75%);
    background-size:200% 100%;
    animation:skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-line.w-60 { width:60%; }
.skeleton-line.w-80 { width:80%; }
.skeleton-line.w-40 { width:40%; height:22px; margin-bottom:18px; }
@keyframes skeletonPulse { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

#breadcrumbs {
    width:min(calc(100% - 40px), 800px); margin:0 auto 4px;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-size:12.5px; color:var(--tx-s); user-select:none;
}
#breadcrumbs:empty { display:none; margin:0; }
#breadcrumbs a { color:var(--tx-s); transition:color var(--sp); }
#breadcrumbs a:hover { color:var(--acc-violet); }
#breadcrumbs .bc-sep { opacity:.5; }
#breadcrumbs .bc-current { color:var(--tx); font-weight:600; }

#menu a { position:relative; }
.fav-star {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    font-size:16px; opacity:0; cursor:pointer;
    color:var(--md-sys-color-on-surface-variant); transition:opacity var(--sp), color var(--sp), transform var(--sp);
    pointer-events:none;
}
#menu a:hover .fav-star, .fav-star.active { opacity:1; pointer-events:auto; }
.fav-star.active { color:var(--md-sys-color-tertiary); }
.fav-star:hover { transform:translateY(-50%) scale(1.2); }
#fav-section { margin-bottom:10px; }
#fav-section:empty { display:none; }
#menu #fav-section .submenu-toggle {   /* (2,1,0) > #menu .submenu-toggle.active (1,2,0) */
    background:transparent; color:var(--md-sys-color-tertiary);
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--md-sys-color-tertiary) 75%, transparent);
}

.font-size-pill {
    display:flex; align-items:center; gap:2px;
    background:var(--pl-bg); border:1px solid var(--pl-bd);
    border-radius:var(--rp); height:34px; padding:0 6px;
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.font-size-pill button {
    background:transparent !important; box-shadow:none !important;
    color:var(--pl-tx) !important; padding:0 8px !important;
    min-height:unset !important; font-size:13px !important; font-weight:800 !important;
    border-radius:8px !important;
}
.font-size-pill button::after { display:none; }
.font-size-pill button:hover { background:var(--pl-bgh) !important; transform:none !important; box-shadow:none !important; }
.font-size-pill button:active { transform:scale(.90) !important; }
#font-size-label { font-size:11px; color:var(--pl-tx); min-width:28px; text-align:center; opacity:.85; }

/* UWAGA: ten blok MUSI być zdefiniowany PO body.light (§1) w tym pliku.
   Mają identyczną specyficzność (0,1,1) — przy remisie wygrywa reguła
   późniejsza w dokumencie. Jeśli użytkownik ma class="light hc" na body,
   wysoki kontrast musi wygrać nad jasnym trybem. Przeniesienie tego bloku
   wyżej niż body.light zepsułoby priorytet. */
body.hc, body.hc.light {
    color-scheme: dark;
    --md-sys-color-surface:#000; --md-sys-color-surface-dim:#000; --md-sys-color-surface-bright:#000;
    --md-sys-color-surface-container-lowest:#000; --md-sys-color-surface-container-low:#000;
    --md-sys-color-surface-container:#000; --md-sys-color-surface-container-high:#000; --md-sys-color-surface-container-highest:#000;
    --md-sys-color-on-surface:#fff; --md-sys-color-on-surface-variant:#fff;
    --md-sys-color-outline:#fff; --md-sys-color-outline-variant:#fff;
    --md-sys-color-primary:#ffff00; --md-sys-color-on-primary:#000;
    --md-sys-color-secondary:#ffff00; --md-sys-color-tertiary:#ffff00;
    --md-sys-color-primary-container:#000; --md-sys-color-on-primary-container:#ffff00;
    --md-sys-color-secondary-container:#000; --md-sys-color-on-secondary-container:#ffff00;
    --md-sys-color-tertiary-container:#000; --md-sys-color-on-tertiary-container:#ffff00;
    --md-sys-color-primary-solid:#ffff00; --md-sys-color-on-primary-solid:#000;
    --md-sys-color-secondary-solid:#ffff00; --md-sys-color-on-secondary-solid:#000;
    --md-sys-color-tertiary-solid:#ffff00; --md-sys-color-on-tertiary-solid:#000;
    --md-sys-color-error:#ff6b6b; --md-sys-color-error-container:#000; --md-sys-color-on-error-container:#ff6b6b;
    --md-sys-color-success:#00ff7f; --md-sys-color-success-container:#000; --md-sys-color-on-success-container:#00ff7f;
    --grad-bar:linear-gradient(#ffff00,#ffff00); --grad-rail:linear-gradient(#ffff00,#ffff00);
    --grad-tx:linear-gradient(#ffff00,#ffff00); --grad-btn:linear-gradient(#ffff00,#ffff00);
    --grad:linear-gradient(#ffff00,#ffff00); --grad-sig:linear-gradient(#ffff00,#ffff00);
    --menu-wash:linear-gradient(#000,#000); --head-wash:linear-gradient(#000,#000);
    --hd-sh:none; --hd-sh-c:none; --sh-s:none; --sh-m:none; --sh-l:none;
    /* Aliasy zgodne z resztą kodu i podstronami. MUSZĄ być powtórzone w każdym
       bloku trybu — var() rozwiązuje się tam, gdzie zadeklarowano właściwość,
       więc alias z :root nie zmieniłby się po nadpisaniu ról w body.light. */
    --surf-1:  var(--md-sys-color-surface);
    --surf-2:  var(--md-sys-color-surface-container);
    --surf-3:  var(--md-sys-color-surface-container-high);
    --bg:      var(--surf-1);
    --bg-card: var(--surf-2);
    --bg-in:   var(--surf-3);
    --dk-card: var(--surf-3);          /* stara nazwa używana w podstronach (.dark .kb) */
    --bg-card-glass: var(--surf-2);
    --tx:      var(--md-sys-color-on-surface);
    --tx-s:    var(--md-sys-color-on-surface-variant);
    --bd:      var(--md-sys-color-outline-variant);   /* subtelne linie, dekoracja */
    --outline: var(--md-sys-color-outline);           /* obrys pól (≥ 3.6:1) */
    --bg-head: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    --hd-tx:   var(--md-sys-color-on-surface);
    --hd-tx-s: var(--md-sys-color-on-surface-variant);
    --hd-bd:   var(--md-sys-color-outline-variant);
    --pl-bg:   color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --pl-bgh:  color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
    --pl-bd:   var(--md-sys-color-outline-variant);
    --pl-tx:   var(--md-sys-color-on-surface);
    --pl-ph:   var(--md-sys-color-on-surface-variant);
    --dd-bg:   var(--md-sys-color-surface-container-high);
    --dd-bd:   var(--md-sys-color-outline-variant);
    --glass:   color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    --acc-violet-tx: var(--md-sys-color-primary);     /* tekst/ikona w kolorze marki */
    --acc-red-tx:    var(--md-sys-color-secondary);
    --acc-gold-tx:   var(--md-sys-color-tertiary);
    --caret:   var(--md-sys-color-primary);
}
/* ── WYSOKI KONTRAST (WCAG 1.4.6/1.4.11): niezależny od trybu jasny/ciemny ──
   Czarne tło, białe teksty i obrysy 2 px, żółty = stan (hover/fokus/zaznaczone),
   cyjan = wskaźnik fokusu. Bez gradientów i cieni. !important tylko tam, gdzie
   trzeba przebić style podstron (.kb, .qr-tab…) i critical CSS z index.html. */
body.hc, body.hc #tekst, body.hc #nazwa, body.hc #menu, body.hc .sky, body.hc #glowny {
    background:#000 !important; color:#fff !important;
}
body.hc #nazwa { border-bottom:2px solid #fff; box-shadow:none !important; }
body.hc #nazwa::after, body.hc .card::before { height:4px; background:#ffff00; }
body.hc #menu { border-right:2px solid #fff !important; }
body.hc .card { border:2px solid #fff; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.hc a { color:#ffff00; text-decoration:underline; }
body.hc #menu a, body.hc #menu .submenu-toggle, body.hc #menu .menu-home-link { color:#fff !important; text-decoration:underline; }
body.hc #menu .submenu-toggle { box-shadow:inset 0 0 0 2px #fff; }
body.hc #menu a:hover, body.hc #menu .submenu-toggle.active, body.hc #menu a:focus-visible {
    background:#ffff00 !important; color:#000 !important; text-decoration:none;
}
body.hc #menuText { background:none !important; -webkit-text-fill-color:#ffff00; color:#ffff00 !important; }
/* przyciski: czarne z białym obrysem; żółte = hover/fokus/zaznaczone/główne */
body.hc button:not(#menuText):not(.submenu-toggle):not(:disabled), body.hc .btn:not(:disabled) {
    background:#000 !important; color:#fff !important; box-shadow:inset 0 0 0 2px #fff !important;
}
body.hc button:not(#menuText):not(.submenu-toggle):not(:disabled):hover,
body.hc button:not(#menuText):not(.submenu-toggle):not(:disabled):focus-visible,
body.hc button.active, body.hc button[aria-pressed="true"], body.hc [aria-selected="true"], body.hc .qr-tab.active,
body.hc .btn-solid-violet, body.hc .btn-solid-red, body.hc .btn-solid-gold, body.hc .btn-gradient,
body.hc .btn:not(:disabled):hover {
    background:#ffff00 !important; color:#000 !important; box-shadow:inset 0 0 0 2px #000 !important;
}
body.hc button:disabled, body.hc .btn:disabled {
    background:#000 !important; color:#b0b0b0 !important; box-shadow:inset 0 0 0 2px #b0b0b0 !important; opacity:1;
}
/* pigułki w nagłówku */
body.hc .search-pill, body.hc .mode, body.hc .lang-wrapper, body.hc .font-size-pill, body.hc #quickQrBtn {
    background:#000 !important; border:2px solid #fff !important; box-shadow:none !important; backdrop-filter:none !important;
}
body.hc .search-pill *, body.hc .mode *, body.hc .lang-wrapper *, body.hc .egg-circle *, body.hc #searchInput { color:#fff !important; }
body.hc .search-pill:hover, body.hc .mode:hover, body.hc .lang-wrapper:hover { box-shadow:0 0 0 3px #ffff00 !important; }
body.hc .mode-option:hover, body.hc .mode-option:hover *, body.hc .mode-option.active, body.hc .mode-option.active *,
body.hc .lang-option:hover, body.hc .lang-option.active, body.hc #quickQrBtn:hover, body.hc #quickQrBtn:hover * {
    background-color:#ffff00 !important; color:#000 !important;
}
body.hc .mode-option.active::after, body.hc .lang-option.active::after { color:#000; }
body.hc .lang-menu, body.hc .mode-menu, body.hc .search-results, body.hc .sm-dialog-box, body.hc #sm-toast {
    background:#000 !important; border:2px solid #fff !important; backdrop-filter:none !important;
}
body.hc input, body.hc textarea, body.hc select { background:#000 !important; color:#fff !important; border:2px solid #fff !important; box-shadow:none !important; }
body.hc ::placeholder { color:#d0d0d0 !important; opacity:1; }
body.hc :focus-visible { outline:3px solid #00ffff !important; outline-offset:2px; }
body.hc ::selection { background:#ffff00; color:#000; }
body.hc hr, body.hc .odstep-duzy { background:#fff; }

#offline-banner {
    position:fixed; top:0; left:0; right:0; z-index:99999;
    background:var(--md-sys-color-error-container); color:var(--md-sys-color-on-error-container); text-align:center;
    font-size:13px; font-weight:600; padding:0;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
}
#offline-banner.show { max-height:44px; padding:10px; }
#offline-banner .material-icons { font-size:16px; vertical-align:-3px; margin-right:6px; }

/* ==========================================================================
   §16d  STRONA GŁÓWNA — kafelki narzędzi, ulubione, najczęściej odwiedzane
   ========================================================================== */

/* Sekcja powitalna */
.home-welcome { text-align:center; padding:8px 0 16px; user-select:none; }
.home-welcome h1 {
    font-size:clamp(1.2rem, 4vw, 2rem); font-weight:800; letter-spacing:-.03em;
    margin:0 0 8px;
    background:var(--grad-tx);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.home-welcome p { font-size:clamp(.85rem, 2vw, 1rem); color:var(--tx-s); margin:0; line-height:1.6; }

/* Nagłówek sekcji (Ulubione / Najczęściej odwiedzane / Wszystkie narzędzia) */
.home-section-label {
    display:flex; align-items:center; gap:6px;
    font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--tx-s); margin:22px 0 10px; user-select:none;
}
.home-section-label .material-icons { font-size:16px; }
.home-section-label-fav .material-icons { color:var(--md-sys-color-tertiary); }
.home-section-label-freq .material-icons { color:var(--md-sys-color-primary); }

.home-category-label {
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--tx-s); opacity:1; margin:16px 0 8px; user-select:none;
}
.home-category-label:first-child { margin-top:0; }

/* Grid kafelków */
.home-tiles {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:10px; margin:0 0 18px;
}
.home-tile {
    background:var(--bg-in);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:22px 10px 14px; /* góra powiększona — miejsce na gwiazdkę ulubionych w rogu */
    text-align:center; cursor:pointer; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:inherit; text-decoration:none; /* reset dla <a> — gry poza routingiem SPA */
    transition:background .2s, transform .18s, border-color .2s, box-shadow .2s;
    user-select:none;
}
.home-tile-enter {
    animation:fadeInUp .35s ease-out both;
}
#tekst.language-switching .home-tile { animation:none; }
.home-category-group {
    min-height:150px;
    contain:layout paint;
    contain-intrinsic-size:150px;
}
.home-tile:hover {
    background:color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--bg-in));
    border-color:color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);
    box-shadow:var(--sh-m);
}
.home-tile:active { background:color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--bg-in)); }
.home-tile .material-icons:first-child {
    font-size:28px; display:block; margin-bottom:7px;
    background:var(--grad-tx);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.home-tile span:last-of-type { font-size:.78rem; color:var(--tx-s); font-weight:600; }

/* Gwiazdka ulubionych na kafelku — inny wariant niż w menu (jasne tło zamiast ciemnego) */
.fav-star-tile {
    position:absolute; top:6px; right:6px;
    font-size:16px; opacity:.35; cursor:pointer;
    color:var(--tx-s); transition:opacity .2s, color .2s, transform .2s;
    pointer-events:auto;
}
.home-tile:hover .fav-star-tile, .fav-star-tile.active { opacity:1; }
.fav-star-tile.active { color:var(--md-sys-color-tertiary); }
.fav-star-tile:hover { transform:scale(1.2); }

/* Warianty sekcji — subtelne tło wyróżniające ulubione/częste od reszty */
.home-tiles-fav .home-tile { border-color:color-mix(in srgb, var(--md-sys-color-tertiary) 30%, transparent); }
.home-tiles-fav .home-tile:hover { border-color:color-mix(in srgb, var(--md-sys-color-tertiary) 55%, transparent); background:color-mix(in srgb, var(--md-sys-color-tertiary) 10%, var(--bg-in)); }
.home-tiles-frequent .home-tile { border-color:color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent); }

/* Responsywność strony głównej — patrz §19 MOBILE (skonsolidowane tam) */

/* ==========================================================================
   §16b  KLASY UTILITY
   ========================================================================== */
.text-center  { text-align:center; }
.text-muted   { color:var(--tx-s); }
.text-accent  { color:var(--md-sys-color-primary); }
.text-small   { font-size:calc(.85rem * var(--font-scale, 1)); }
.text-large   { font-size:calc(1.2rem * var(--font-scale, 1)); }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.flex       { display:flex; }
.flex-col   { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.flex-wrap  { flex-wrap:wrap; }
.w-full     { width:100%; }
.hidden { display:none !important; }
.visible { display:block !important; }
/* Kolory semantyczne — role zależne od trybu (wszystkie pary ≥ 4.5:1).
   ok = zielony (własna rola success), err = error, warn = tertiary (żółć marki),
   info = primary. */
.status-ok   { color:var(--md-sys-color-success); }
.status-err  { color:var(--md-sys-color-error); }
.status-warn { color:var(--md-sys-color-tertiary); }
.status-info { color:var(--md-sys-color-primary); }
.bg-ok   { background:var(--md-sys-color-success-container);  color:var(--md-sys-color-on-success-container);  padding:4px 10px; border-radius:var(--r-sm); }
.bg-err  { background:var(--md-sys-color-error-container);    color:var(--md-sys-color-on-error-container);    padding:4px 10px; border-radius:var(--r-sm); }
.bg-warn { background:var(--md-sys-color-tertiary-container); color:var(--md-sys-color-on-tertiary-container); padding:4px 10px; border-radius:var(--r-sm); }
.bg-info { background:var(--md-sys-color-primary-container);  color:var(--md-sys-color-on-primary-container);  padding:4px 10px; border-radius:var(--r-sm); }
.grad-text {
    background:var(--grad-tx);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ==========================================================================
   §17  ULTRAWIDE (≥2100px)
   ========================================================================== */
@media(min-width:2100px) {
    :root { --mw:390px; }
    #nazwa  { font-size:clamp(20px,2vw,32px); }
    #zegar  { font-size:20px; right:22px; top:16px; }
    #menu   { padding:24px 18px; font-size:18px; }
    #tekst  { padding:80px 70px 150px; font-size:22px; }
    .card   { width:75%; max-width:1200px; padding:36px; }
    button,.btn { padding:13px 30px; font-size:calc(1rem * var(--font-scale, 1)); }
    #controls-wrapper { gap:14px; right:22px; top:16px; }
    .search-pill { width:220px; }
    .search-pill:focus-within { width:320px; }
}

/* ==========================================================================
   §18  TABLET (769–1100px)
   ========================================================================== */
@media(min-width:769px) { #menu-list { display:block !important; } }
@media(min-width:769px) and (max-width:1100px) {
    :root { --mw:260px; }
    #menu   { font-size:15px; padding:16px 10px; }
    #tekst  { padding:50px 20px 110px; }
    #controls-wrapper { gap:6px; right:10px; }
    .search-pill { width:130px; }
    .search-pill:focus-within { width:180px; }
    .mode-label { display:none; }
    .mode { padding:0 10px; }
    .lang-wrapper { min-width:auto; padding-right:6px; }
    .lang-current { display:none; }
    .card { width:92%; max-width:600px; }
}

/* ==========================================================================
   §19  MOBILE (≤768px)
   ========================================================================== */
@media(max-width:768px) {
    :root { --hh:64px; --hh-s:48px; }
    /* SMDialog / toast — mobile layout */
    #sm-toast { width:calc(100% - 24px); left:12px; right:auto; bottom:-200px; transition:bottom .55s cubic-bezier(.68,-.55,.27,1.55); }
    #sm-toast.show { bottom:12px; }
    #sm-dialog-overlay { padding:14px; align-items:flex-end; padding-bottom:80px; }
    /* Strona główna — breadcrumbs, skeleton, kafelki */
    #breadcrumbs { width:calc(100% - 16px); font-size:11px; padding:0 4px; }
    .skeleton-card { width:calc(100% - 12px); }
    .home-tiles { grid-template-columns:repeat(auto-fill, minmax(105px, 1fr)); gap:8px; }
    .home-tile { padding:18px 8px 10px; }
    #nexus-container { margin-bottom:28px; }
    body  { height:auto; overflow-y:auto; }
    .sky  { height:auto; overflow:visible; }
    #glowny { flex-direction:column; overflow:visible; }
    #menu   { overflow:visible; width:100% !important; }
    #tekst  { overflow:visible !important; padding:16px 8px 80px !important; font-size:16px; }
    #nazwa  {
        position:sticky !important; top:0 !important; z-index:200 !important;
        height:var(--hh-live, var(--hh));
        font-size:clamp(14px,4.6vw,22px);   /* bez !important: JS (index.js) zmniejsza przy przewijaniu */
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    #zegar  { font-size:10px !important; top:5px !important; right:8px !important; }
    #controls-wrapper {
        position:sticky !important; top:var(--hh-live, var(--hh)) !important;
        left:0 !important; right:0 !important; z-index:199 !important;
        background:var(--bg-head) !important;
        border-bottom:1px solid var(--hd-bd) !important;
        box-shadow:var(--hd-sh-c) !important;
        width:100% !important; justify-content:initial !important;
        padding:7px 10px 9px !important;
        display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr));
        grid-template-rows:34px 34px; gap:7px !important;
    }
    #controls-wrapper .search-pill,
    #controls-wrapper .mode,
    #controls-wrapper .lang-wrapper,
    #controls-wrapper .egg-circle {
        background:var(--pl-bg) !important;
        border-color:var(--pl-bd) !important;
        color:var(--pl-tx) !important;
        backdrop-filter:none !important;
    }
    #controls-wrapper .search-pill *,#controls-wrapper .mode *,
    #controls-wrapper .lang-wrapper *,#controls-wrapper .egg-circle *,
    #controls-wrapper #searchInput { color:var(--pl-tx) !important; }
    #controls-wrapper #searchInput::placeholder { color:var(--pl-ph) !important; }
    #controls-wrapper .search-container {
        grid-column:1 / span 5; grid-row:1; min-width:0; display:block !important;
    }
    #controls-wrapper .search-pill { width:100% !important; max-width:none !important; }
    #controls-wrapper .search-pill:focus-within { width:100% !important; }
    #controls-wrapper #quickQrBtn {
        grid-column:6; grid-row:1; width:100%; min-width:0; padding:0;
        justify-self:stretch; flex-shrink:0;   /* wyszukiwarka sięga do QR — bez odstępu */
    }
    /* Pierwszy rząd: wyszukiwarka + QR. Drugi rząd: rozmiar tekstu, tryb i język. */
    #controls-wrapper .font-size-pill,
    #controls-wrapper .mode,
    #controls-wrapper .lang-wrapper {
        min-width:0; width:100%; justify-content:center !important;
    }
    #controls-wrapper .font-size-pill { grid-column:1 / span 2; grid-row:2; }
    #controls-wrapper .mode { grid-column:3 / span 2; grid-row:2; }
    #controls-wrapper .lang-wrapper { grid-column:5 / span 2; grid-row:2; }
    /* Listy były przycięte do szerokości pigułki (~150 px): „Systemowy”, „Wysoki kon…”.
       Teraz mają własną szerokość i nie wychodzą poza ekran. */
    #controls-wrapper .mode-menu {
        left:50%; right:auto; translate:-50% 0;
        width:max-content; min-width:210px; max-width:calc(100vw - 20px);
    }
    #controls-wrapper .lang-menu {
        left:auto; right:0; width:max-content; min-width:150px; max-width:calc(100vw - 20px);
    }
    #menu {
        min-height:auto !important; padding:0 !important;
        background:
            var(--grad-bar) bottom / 100% 3px no-repeat,
            var(--menu-wash),
            var(--md-sys-color-surface-container-low);
    }
    #menuText {
        display:block !important; width:100%;
        padding:12px 16px; cursor:pointer;
        font-size:clamp(20px,6vw,28px) !important;
        font-weight:800;
        text-align:left; border:0;
    }
    #menuText::after { content:' \25BE'; float:right; }
    #menu.active #menuText::after { content:' \25B4'; }
    #menu-list { display:none; width:100%; padding:0 14px 16px 14px; font-size:22px; }
    #menu.active #menu-list { display:block !important; }
    #menu-list a { font-size:18px; line-height:1.5; }
    #menu-list a, .submenu-toggle { min-height:48px !important; padding-top:10px !important; padding-bottom:10px !important; }
    .card { width:calc(100% - 8px) !important; max-width:100% !important; padding:14px 12px; margin:6px auto 14px !important; border-radius:10px; }
    .card:hover { transform:none; }
    button,.btn { padding:10px 18px; font-size:calc(.9rem * var(--font-scale, 1)); }
}