@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            25% {
                transform: translateY(-8px) rotate(1deg);
            }
            75% {
                transform: translateY(-4px) rotate(-1deg);
            }
        }

        @keyframes bounceGentle {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .bg-primary-solid {
            background: #1e40af;
        }

        .bg-secondary-solid {
            background: #f90c0c;
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }

        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            background: #1e40af;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .brain-dark {
            /* filter: brightness(0.3) contrast(1.5) saturate(1.2); */
            filter: brightness(0) invert(1);
            transition: filter 0.3s ease;
        }
        /* --- Dostępność (WCAG 2.1 AA) — dodane 9.09.2026 --- */

        /* Skok do treści: widoczny dopiero, gdy dostanie skupienie z klawiatury */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: 0;
            z-index: 100;
            background: #1e40af;
            color: #ffffff;
            padding: 12px 20px;
            font-weight: 600;
            text-decoration: none;
        }

        .skip-link:focus {
            left: 0;
        }

        /* Widoczne obramowanie elementu, na którym stoi kursor klawiatury */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [tabindex]:focus-visible {
            outline: 3px solid #1e40af;
            outline-offset: 2px;
        }

        /* Treść główna nie ma pokazywać obramowania po skoku ze skip-linku */
        main:focus {
            outline: none;
        }

        /* Szanujemy ustawienie systemowe „ogranicz animacje” */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Grafika nigdy nie rozpycha strony w bok (RWD) */
        img,
        svg {
            max-width: 100%;
        }

        /* Link w akapicie ma być rozpoznawalny nie tylko kolorem (WCAG 1.4.1) */
        main p a,
        main li a,
        main address a,
        footer p a,
        footer address a {
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* ================================================================
           ALERTY — wzorzec CKBiR (projekt autorski, 9.09.2026, wersja czwarta)

           CKBiR to narzędzie do oceny prac: formularze, kryteria, punktacja.
           Alert jest tu oznaczeniem w takim systemie, a nie ozdobnikiem —
           stąd forma etykiety katalogowej wpiętej w krawędź ramki:

           • pełny prostokąt etykiety w kolorze wariantu, biały napis wersalikami,
             zaczepiony w lewym górnym rogu i wysunięty ponad krawędź,
           • cienka ramka 1 px w tym samym kolorze wokół treści,
           • żadnych zaokrągleń — tak jak przyciski CKBiR,
           • bez wypełnienia tłem: kolor niesie etykieta i ramka.

           Bloki bez etykiety (seria kroków w instrukcji) mają samą ramkę.
           ================================================================ */

        .alert {
            --alert-kolor: #e00b0b;

            position: relative;
            border: 1px solid var(--alert-kolor);
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
            padding: 1.5rem 1.75rem;
            margin: 2rem 0 1.75rem;
        }

        /* Etykieta wpięta w górną krawędź — jak oznaczenie na karcie katalogowej */
        .alert__nadtytul {
            position: absolute;
            top: 0;
            left: 12px;
            transform: translateY(-50%);
            display: inline-block;
            background: var(--alert-kolor);
            color: #ffffff;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 0.35rem 0.9rem;
            border-radius: 6px;
            white-space: nowrap;
        }

        .alert__tytul {
            font-size: 1.125rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
            letter-spacing: -0.01em;
        }

        .alert__tresc p,
        .alert__tresc li {
            color: #374151;
        }

        .alert__tresc > *:last-child {
            margin-bottom: 0;
        }

        .alert--sukces { --alert-kolor: #15803d; }
        .alert--wskazowka { --alert-kolor: #a16207; }
        .alert--info { --alert-kolor: #1e40af; }

        @media (max-width: 640px) {
            .alert {
                padding: 1.5rem 1.25rem 1.25rem;
            }

            .alert__nadtytul {
                font-size: 0.625rem;
                letter-spacing: 0.1em;
            }
        }

        /* --- Impulsy sieci neuronowej na grafice mózgu (9.09.2026) --- */

        .impulsy {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .impuls__poswiata {
            fill: #93c5fd;
            opacity: 0.45;
            filter: blur(2px);
        }

        .impuls__rdzen {
            fill: #ffffff;
            opacity: 1;
        }

        /* Impuls rozjaśnia się i przygasa w drodze — wrażenie żywego sygnału */
        .impuls {
            animation: pulsowanieImpulsu 2.6s ease-in-out infinite;
        }

        .impuls:nth-of-type(2n) { animation-duration: 3.4s; }
        .impuls:nth-of-type(3n) { animation-duration: 4.1s; }

        @keyframes pulsowanieImpulsu {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 1; }
        }

        /* Osoby, które proszą o ograniczenie ruchu, nie zobaczą animacji */
        @media (prefers-reduced-motion: reduce) {
            .impulsy {
                display: none;
            }
        }

        /* --- Hasła przy grafice mózgu (9.09.2026) --- */

        .hasla {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .haslo {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: #ffffff;
            border-radius: 14px;
            box-shadow: 0 10px 25px -8px rgba(15, 23, 42, 0.35);
            padding: 0.7rem 1rem;
            max-width: 15rem;
            opacity: 0;
            transform: translateY(14px) scale(0.98);
            /* wolne wejście i jeszcze wolniejsze zejście - bez agresywnego migania */
            transition: opacity 1.4s ease-in-out, transform 1.4s ease-in-out;
        }

        .haslo--widoczne {
            opacity: 1;
            transform: translateY(0) scale(1);
            transition: opacity 1.1s ease-in-out, transform 1.1s ease-in-out;
        }

        .haslo__ikona {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 10px;
            color: #ffffff;
            flex-shrink: 0;
        }

        .haslo__tresc {
            display: block;
            min-width: 0;
        }

        .haslo__tytul {
            display: block;
            font-weight: 700;
            font-size: 0.875rem;
            color: #111827;
            line-height: 1.2;
        }

        .haslo__opis {
            display: block;
            font-size: 0.75rem;
            color: #4b5563;
            margin-top: 0.1rem;
        }

        /* Sześć miejsc wokół grafiki — żadne nie leży na sylwetce mózgu */
        .haslo--gniazdo-1 { top: 2%;  left: -8%; }
        .haslo--gniazdo-2 { top: 6%;  right: -6%; }
        .haslo--gniazdo-3 { top: 44%; left: -14%; }
        .haslo--gniazdo-4 { top: 50%; right: -12%; }
        .haslo--gniazdo-5 { bottom: 4%; left: -10%; }
        .haslo--gniazdo-6 { bottom: 0%; right: -8%; }

        /* Na średnich ekranach mniej miejsca po bokach — hasła bliżej grafiki */
        @media (max-width: 1279px) {
            .haslo {
                max-width: 12.5rem;
                padding: 0.6rem 0.8rem;
            }

            .haslo--gniazdo-1 { left: -2%; }
            .haslo--gniazdo-2 { right: -2%; }
            .haslo--gniazdo-3 { left: -4%; }
            .haslo--gniazdo-4 { right: -4%; }
            .haslo--gniazdo-5 { left: -3%; }
            .haslo--gniazdo-6 { right: -2%; }
        }

        /* --- Bicie serca grafiki mózgu (zamiast kołysania na boki) --- */

        .bicie-serca {
            animation: bicieSerca 4.6s ease-in-out infinite;
            transform-origin: center center;
            will-change: transform;
        }

        /* Podwójne uderzenie jak w tętnie, potem przerwa */
        @keyframes bicieSerca {
            0%   { transform: scale(1); }
            9%   { transform: scale(1.012); }
            18%  { transform: scale(1); }
            26%  { transform: scale(1.007); }
            36%  { transform: scale(1); }
            100% { transform: scale(1); }
        }

        /* Czerwony neuron - rzadki, mocniejszy sygnał */
        .impuls--czerwony .impuls__poswiata {
            fill: #ff4d4d;
            opacity: 0.6;
        }

        .impuls--czerwony .impuls__rdzen {
            fill: #ffd6d6;
        }

        @media (prefers-reduced-motion: reduce) {
            .bicie-serca {
                animation: none;
            }
        }

        /* --- Aktywny neuron: zapalona kropka na rysunku mózgu --- */

        /* Czerwony impuls krąży tak samo jak białe, tylko rzadko i mocniej widoczny */
        .neuron__poswiata {
            fill: #ff2d2d;
            opacity: 0.55;
            filter: blur(3px);
        }

        .neuron__rdzen {
            fill: #e00b0b;
        }

        /* Ślad światła biegnący po tej samej ścieżce - widać, którędy idzie sygnał */
        .neuron__slad {
            fill: none;
            stroke: #ff4d4d;
            stroke-width: 2.4;
            stroke-linecap: round;
            opacity: 0.85;
            filter: drop-shadow(0 0 4px rgba(255, 77, 77, 0.9));
        }

        /* ==========================================================================
           JĘZYK WIZUALNY PANELU I SEKCJI  (9.09.2026)

           Jeden zestaw klas dla całego serwisu - część publiczna i część po
           zalogowaniu mają wyglądać tak samo. Wzór kompozycji: apios.pl / synlogia.pl,
           czyli jasne tło, dużo powietrza, cienka kreska zamiast grubych ramek,
           numerowana etykieta nad nagłówkiem.

           Świadomie NIE używamy: kolorowych pasków nad tabelą, pasów zebra,
           gradientów i emoji - to są znaki rozpoznawcze szablonów generowanych
           maszynowo, a ta strona ma wyglądać na zaprojektowaną.
           ========================================================================== */

        :root {
            --kreska: #e5e7eb;
            --kreska-mocna: #d1d5db;
            --tlo-mdle: #f7f8fa;
            --cien-karty: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .28);
            --cien-uniesiony: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 36px -22px rgba(16, 24, 40, .34);
            --promien: 14px;
        }

        /* --- Nadtytuł sekcji: numer, kreska, nazwa ------------------------------- */
        .nadtytul {
            display: inline-flex;
            align-items: center;
            gap: .625rem;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #6b7280;
        }

        .nadtytul__numer {
            font-variant-numeric: tabular-nums;
            color: #e00b0b;
        }

        .nadtytul::before {
            content: "";
            width: 1.75rem;
            height: 2px;
            background: #e00b0b;
            flex: none;
        }

        /* --- Karta / panel ------------------------------------------------------- */
        .karta {
            background: #fff;
            border: 1px solid var(--kreska);
            border-radius: var(--promien);
            box-shadow: var(--cien-karty);
        }

        .karta--klikalna {
            transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
        }

        .karta--klikalna:hover {
            box-shadow: var(--cien-uniesiony);
            border-color: var(--kreska-mocna);
            transform: translateY(-2px);
        }

        /* Nagłówek panelu: nazwa i licznik, rozdzielone kreską - bez kolorowego pasa */
        .panel__glowa {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: .75rem 1.5rem;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--kreska);
        }

        .panel__nazwa {
            font-size: 1.0625rem;
            font-weight: 700;
            color: #111827;
            letter-spacing: -.01em;
        }

        .panel__licznik {
            font-size: .8125rem;
            color: #6b7280;
            font-variant-numeric: tabular-nums;
        }

        /* --- Rejestr stanów: jeden pasek zamiast rzędu kafelków --------------
           Wzorzec „wiersz protokołu": nazwa stanu małymi literami po lewej,
           liczba tuż obok na TEJ SAMEJ linii bazowej - jak pozycja w zestawieniu,
           nie jak kafelek panelu. Kolor stanu siedzi wyłącznie w cyfrze (każdy
           odcień ma na bieli ponad 4,5:1), więc nigdzie nie ma kolorowej kreski
           ani kolorowego tła doklejonego do krawędzi.

           Stanu NIE komunikuje sam kolor: nazwa stanu stoi obok wprost słowem,
           a filtr włączony poznaje się po odwróceniu pola na ciemne.

           Cały pasek zajmuje ok. 56 px pionu zamiast 130 px, które zabierał rząd
           kafelków - tabela zaczyna się wyżej. */
        .rejestr {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            background: #fff;
            border: 1px solid var(--kreska);
            border-radius: var(--promien);
            box-shadow: var(--cien-karty);
            overflow: hidden;
        }

        .rejestr__pozycja {
            flex: 1 1 9.5rem;
            display: flex;
            align-items: baseline;
            gap: .5rem;
            min-height: 3.25rem;
            padding: .875rem 1rem;
            border-right: 1px solid var(--kreska);
            transition: background-color .12s ease, color .12s ease;
        }

        .rejestr__pozycja:last-child { border-right: 0; }
        .rejestr__pozycja:hover { background: #fafbfc; }
        .rejestr__pozycja:focus-visible { outline: 2px solid #1e40af; outline-offset: -2px; }

        .rejestr__nazwa {
            font-size: .8125rem;
            font-weight: 500;
            color: #475569;
            line-height: 1.2;
        }

        .rejestr__liczba {
            margin-left: auto;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
            color: var(--kolor-stanu, #0f1c45);
        }

        .rejestr__udzial {
            font-size: .6875rem;
            color: #64748b;          /* 4,76:1 na bieli - spełnia WCAG AA */
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        /* Filtr włączony: pole odwrócone na ciemne - widać to bez rozróżniania kolorów.
           Na odnośniku stan zaznaczamy przez aria-current; aria-pressed jest
           dozwolone wyłącznie na przycisku i audyt słusznie to wytykał. */
        .rejestr__pozycja[aria-current="true"] {
            background: #111827;
        }

        .rejestr__pozycja[aria-current="true"] .rejestr__nazwa,
        .rejestr__pozycja[aria-current="true"] .rejestr__liczba { color: #fff; }
        .rejestr__pozycja[aria-current="true"] .rejestr__udzial { color: #e2e8f0; }

        .rejestr__pozycja[aria-current="true"]::after {
            content: "×";
            margin-left: .125rem;
            font-size: 1rem;
            line-height: 1;
            color: #fca5a5;
        }

        @media (max-width: 640px) {
            .rejestr__pozycja { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--kreska); }
            .rejestr__pozycja:last-child { border-bottom: 0; }
        }

        /* --- Filtry: pigułki wyboru wielokrotnego -------------------------------- */
        .pigulka {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .4375rem .875rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 999px;
            background: #fff;
            font-size: .8125rem;
            font-weight: 600;
            color: #374151;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease, color .15s ease;
        }

        .pigulka:hover { border-color: #9ca3af; background: var(--tlo-mdle); }

        .pigulka__kropka {
            width: .5rem;
            height: .5rem;
            border-radius: 999px;
            background: var(--kolor-stanu, #9ca3af);
            flex: none;
        }

        .pigulka input { position: absolute; opacity: 0; width: 0; height: 0; }

        .pigulka:has(input:checked) {
            background: #111827;
            border-color: #111827;
            color: #fff;
        }

        .pigulka:has(input:focus-visible) {
            outline: 2px solid #1e40af;
            outline-offset: 2px;
        }

        /* --- Etykiety wybranych filtrów (do zdjęcia krzyżykiem) ------------------ */
        .etykieta-filtru {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .3125rem .375rem .3125rem .75rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 999px;
            background: #fff;
            font-size: .8125rem;
            color: #111827;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        }

        .etykieta-filtru__rodzaj {
            color: #6b7280;
        }

        .etykieta-filtru__zdejmij {
            display: grid;
            place-items: center;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 999px;
            color: #6b7280;
            transition: background-color .15s ease, color .15s ease;
        }

        .etykieta-filtru__zdejmij:hover { background: #fee2e2; color: #b91c1c; }

        .etykieta-filtru__zdejmij:focus-visible {
            outline: 2px solid #1e40af;
            outline-offset: 1px;
        }

        /* --- Tabela ------------------------------------------------------------- */
        .tabela {
            width: 100%;
            min-width: 62rem;          /* poniżej tego tabela przewija się we własnym kontenerze */
            border-collapse: collapse;
            table-layout: fixed;       /* szerokości z <colgroup> mają być respektowane */
            font-size: .875rem;
        }

        .tabela thead th {
            padding: .75rem 1rem;
            text-align: left;
            font-size: .6875rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #6b7280;
            background: var(--tlo-mdle);
            border-bottom: 1px solid var(--kreska);
            white-space: nowrap;
        }

        .tabela tbody td {
            padding: 1rem 1rem;
            border-bottom: 1px solid #f1f2f4;
            vertical-align: top;
            color: #374151;
        }

        .tabela tbody tr:last-child td { border-bottom: 0; }
        .tabela tbody tr { transition: background-color .12s ease; }
        .tabela tbody tr:hover { background: #fafbfc; }

        .tabela__nr {
            font-variant-numeric: tabular-nums;
            color: #9ca3af;
            font-weight: 600;
        }

        .tabela__tytul {
            font-weight: 600;
            color: #111827;
            line-height: 1.35;
        }

        .tabela__pod {
            margin-top: .1875rem;
            font-size: .8125rem;
            color: #6b7280;
        }

        /* Nagłówek, po którym można sortować */
        .sortuj {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            color: inherit;
            text-transform: inherit;
            letter-spacing: inherit;
            font: inherit;
        }

        .sortuj:hover { color: #111827; }

        .sortuj__strzalka { opacity: .35; transition: opacity .15s ease, transform .15s ease; }
        .sortuj:hover .sortuj__strzalka { opacity: .7; }
        /* aria-sort siedzi na komórce nagłówka - tak wymaga standard. Strzałkę
           kolorujemy przez ten atrybut, więc wygląd i znaczenie idą w parze. */
        th[data-sortowane] .sortuj { color: #111827; }
        th[data-sortowane] .sortuj__strzalka { opacity: 1; color: #e00b0b; }
        th[aria-sort="ascending"] .sortuj__strzalka { transform: rotate(180deg); }

        /* --- Znacznik stanu (rekomendacja, status zgłoszenia) -------------------- */
        .znacznik {
            display: inline-flex;
            align-items: center;
            gap: .4375rem;
            padding: .25rem .625rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 6px;
            background: #fff;
            font-size: .75rem;
            font-weight: 600;
            color: #374151;
            white-space: nowrap;
        }

        .znacznik::before {
            content: "";
            width: .4375rem;
            height: .4375rem;
            border-radius: 999px;
            background: var(--kolor-stanu, #9ca3af);
            flex: none;
        }

        .znacznik--wysoki { --kolor-stanu: #15803d; border-color: #bbf7d0; color: #14532d; }
        .znacznik--sredni { --kolor-stanu: #b45309; border-color: #fde68a; color: #78350f; }
        .znacznik--niski  { --kolor-stanu: #e00b0b; border-color: #fecaca; color: #7f1d1d; }
        .znacznik--brak   { --kolor-stanu: #9ca3af; }

        /* --- Wynik liczbowy w tabeli -------------------------------------------- */
        .wynik {
            font-variant-numeric: tabular-nums;
            font-weight: 700;
            color: #111827;
        }

        .wynik--pusty { color: #9ca3af; font-weight: 500; }

        .wynik__pasek {
            display: block;              /* bez tego pasek jako element liniowy nie ma wysokości */
            margin-top: .3125rem;
            height: 3px;
            width: 3.5rem;
            border-radius: 999px;
            background: #eceef1;
            overflow: hidden;
        }

        .wynik__pasek span {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: var(--kolor-stanu, #1e40af);
        }

        /* --- Przyciski ---------------------------------------------------------- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            padding: .625rem 1.125rem;
            border-radius: 10px;
            font-size: .875rem;
            font-weight: 600;
            line-height: 1.25;
            border: 1px solid transparent;
            transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
            white-space: nowrap;
        }

        .btn:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

        .btn--glowny {
            background: #e00b0b;
            color: #fff;
            box-shadow: 0 1px 2px rgba(224, 11, 11, .3);
        }

        .btn--glowny:hover { background: #b91c1c; }

        .btn--granat { background: #1e40af; color: #fff; }
        .btn--granat:hover { background: #1e3a8a; }

        .btn--obrys {
            background: #fff;
            border-color: var(--kreska-mocna);
            color: #374151;
        }

        .btn--obrys:hover { border-color: #9ca3af; background: var(--tlo-mdle); color: #111827; }

        .btn--drobny { padding: .375rem .75rem; font-size: .8125rem; border-radius: 8px; }

        @media (max-width: 640px) {
            /* na wąskim ekranie etykieta może się złamać - lepiej dwa wiersze
               niż strona przewijana w bok */
            .btn { white-space: normal; text-align: center; }
        }

        /* --- Stronicowanie ------------------------------------------------------ */
        .strony {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
        }

        .strony__krok,
        .strony__numer {
            display: grid;
            place-items: center;
            min-width: 2.25rem;
            height: 2.25rem;
            padding: 0 .5rem;
            border-radius: 8px;
            border: 1px solid transparent;
            font-size: .875rem;
            font-weight: 600;
            color: #4b5563;
            font-variant-numeric: tabular-nums;
            transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        }

        .strony__krok:hover,
        .strony__numer:hover { background: var(--tlo-mdle); color: #111827; }

        .strony__numer[aria-current="page"] {
            background: #111827;
            color: #fff;
        }

        .strony__krok[aria-disabled="true"] { color: #d1d5db; pointer-events: none; }
        .strony__przerwa { padding: 0 .375rem; color: #9ca3af; }

        /* --- Pusty wynik -------------------------------------------------------- */
        .pusto {
            padding: 3.5rem 1.5rem;
            text-align: center;
        }

        .pusto__ikona {
            display: grid;
            place-items: center;
            width: 3rem;
            height: 3rem;
            margin: 0 auto 1rem;
            border-radius: 12px;
            border: 1px solid var(--kreska);
            color: #9ca3af;
            background: var(--tlo-mdle);
        }

        .pusto__tytul { font-weight: 700; color: #111827; }
        .pusto__opis { margin-top: .375rem; font-size: .875rem; color: #6b7280; }

        /* --- Wymiana treści tabeli bez przeładowania strony --------------------- */
        [data-panel-obszar] { transition: opacity .15s ease; }
        [data-panel-obszar][data-wczytywanie] { opacity: .5; }

        /* --- Pola formularza: jeden wygląd w całym serwisie --------------------- */
        .pole {
            width: 100%;
            padding: .625rem .875rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 10px;
            background: #fff;
            font-size: .875rem;
            color: #111827;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

        .pole::placeholder { color: #9ca3af; }

        /* Pole z ikoną lupy: własny odstęp z lewej. Klasa `pl-9` z Tailwinda tu nie
           działa, bo `.pole` ustawia skrót `padding` i nadpisuje ją całą. */
        .pole--ikona { padding-left: 2.5rem; }

        .pole:focus {
            outline: none;
            border-color: #1e40af;
            box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
        }

        .pole__etykieta {
            display: block;
            margin-bottom: .375rem;
            font-size: .8125rem;
            font-weight: 600;
            color: #374151;
        }

        @media (max-width: 640px) {
            .tabela { min-width: 0; table-layout: auto; }
            .tabela colgroup { display: none; }
            .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
            .tabela tbody td { display: block; padding: .25rem 1rem; border: 0; }
            .tabela tbody td::before {
                content: attr(data-nazwa);
                display: block;
                font-size: .6875rem;
                font-weight: 700;
                letter-spacing: .07em;
                text-transform: uppercase;
                color: #9ca3af;
                margin-bottom: .125rem;
            }
            .tabela tbody td:first-child { padding-top: 1rem; }
            .tabela tbody td:last-child { padding-bottom: 1rem; }
            .tabela tbody tr { display: block; border-bottom: 1px solid var(--kreska); }
            .tabela tbody tr:last-child { border-bottom: 0; }
        }

        /* --- Pasek kroków oceny ------------------------------------------------- */
        .kroki {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: 1.5rem;
            padding: 0;
            list-style: none;
            counter-reset: krok;
        }

        .krok {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .5rem .875rem;
            border: 1px solid var(--kreska);
            border-radius: 999px;
            background: #fff;
            font-size: .8125rem;
            font-weight: 600;
            color: #6b7280;          /* 4,83:1 na bieli - spełnia WCAG AA */
        }

        .krok__numer {
            display: grid;
            place-items: center;
            width: 1.375rem;
            height: 1.375rem;
            border-radius: 999px;
            background: #f1f2f4;
            color: #6b7280;
            font-size: .6875rem;
            font-variant-numeric: tabular-nums;
            flex: none;
        }

        .krok--zrobiony { color: #374151; border-color: var(--kreska-mocna); }
        .krok--zrobiony .krok__numer { background: #dcfce7; color: #15803d; }

        .krok--biezacy {
            color: #fff;
            background: #111827;
            border-color: #111827;
        }

        .krok--biezacy .krok__numer { background: #e00b0b; color: #fff; }

        @media (max-width: 640px) {
            .krok__nazwa { display: none; }
            .krok--biezacy .krok__nazwa { display: inline; }
        }

        /* --- Karta wyboru (rekomendacja, opcje jednokrotne) ---------------------- */
        .wybor {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            padding: 1rem 1.125rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 12px;
            background: #fff;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
        }

        .wybor:hover { border-color: #9ca3af; background: var(--tlo-mdle); }

        .wybor input { position: absolute; opacity: 0; width: 0; height: 0; }

        .wybor__kropka {
            width: 1.125rem;
            height: 1.125rem;
            margin-top: .1875rem;
            border-radius: 999px;
            border: 2px solid var(--kreska-mocna);
            flex: none;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

        .wybor:has(input:checked) {
            border-color: var(--kolor-stanu, #111827);
            background: #fff;
            box-shadow: inset 0 0 0 1px var(--kolor-stanu, #111827);
        }

        .wybor:has(input:checked) .wybor__kropka {
            border-color: var(--kolor-stanu, #111827);
            box-shadow: inset 0 0 0 3px var(--kolor-stanu, #111827);
        }

        .wybor:has(input:focus-visible) { outline: 2px solid #1e40af; outline-offset: 2px; }

        .wybor__nazwa { display: block; font-weight: 700; color: #111827; font-size: .9375rem; }
        .wybor__opis { display: block; margin-top: .125rem; font-size: .8125rem; color: #6b7280; }

        /* --- Skala ocen w formularzu recenzji -----------------------------------
           Zamiast skrótów w rodzaju „Podstaw." pod kółkiem pokazujemy sam numer.
           Pełne brzmienie każdego stopnia stoi w kolumnie obok i w aria-label,
           więc nic nie ginie, a układ przestaje być poszatkowany kropkami. */
        .skala {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .skala__opcja {
            position: relative;
            display: grid;
            place-items: center;
            min-width: 2.75rem;
            height: 2.75rem;
            padding: 0 .5rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 10px;
            background: #fff;
            font-size: .875rem;
            font-weight: 700;
            color: #374151;
            font-variant-numeric: tabular-nums;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease, color .15s ease;
        }

        .skala__opcja:hover { border-color: #9ca3af; background: var(--tlo-mdle); }

        .skala__opcja input { position: absolute; opacity: 0; width: 0; height: 0; }

        .skala__opcja:has(input:checked) {
            background: #111827;
            border-color: #111827;
            color: #fff;
        }

        .skala__opcja:has(input:focus-visible) { outline: 2px solid #1e40af; outline-offset: 2px; }

        /* --- Wiersz kryterium ---------------------------------------------------- */
        .kryterium {
            display: grid;
            gap: .75rem 1.5rem;
            padding: 1.25rem;
            border-bottom: 1px solid #f1f2f4;
        }

        .kryterium:last-child { border-bottom: 0; }
        .kryterium:hover { background: #fafbfc; }

        @media (min-width: 768px) {
            .kryterium { grid-template-columns: 1fr 1.4fr auto; align-items: start; }
        }

        .kryterium__nazwa { font-weight: 600; color: #111827; }
        .kryterium__opis { font-size: .8125rem; color: #6b7280; line-height: 1.6; }

        /* --- Tytuł widoku (część po zalogowaniu) --------------------------------
           Rozkaz Szymona z 10.09.2026: tabela ma być jak najwyżej. Duży nagłówek
           i akapit opisu zabierały ponad 150 px pionu na każdej podstronie.
           Tytuł jest teraz jedną linią, a opis przeniósł się do podpowiedzi
           pod kółeczkiem obok - kto potrzebuje, ten najedzie. */
        .tytul-widoku {
            display: inline-flex;
            align-items: center;
            gap: .625rem;
            margin: 0;
            font-size: .875rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #111827;
        }

        .tytul-widoku::before {
            content: "";
            width: 1.75rem;
            height: 2px;
            background: #e00b0b;
            flex: none;
        }

        .tytul-widoku__numer {
            font-variant-numeric: tabular-nums;
            color: #e00b0b;
        }

        /* --- Podpowiedź pod kółeczkiem ------------------------------------------ */
        .podpowiedz {
            position: relative;
            display: inline-flex;
            text-transform: none;
            letter-spacing: normal;
        }

        .podpowiedz__znak {
            display: grid;
            place-items: center;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 999px;
            border: 1px solid var(--kreska-mocna);
            background: #fff;
            color: #6b7280;
            font-size: .6875rem;
            font-weight: 700;
            line-height: 1;
            cursor: help;
            transition: border-color .15s ease, color .15s ease, background-color .15s ease;
        }

        .podpowiedz__znak:hover,
        .podpowiedz__znak:focus-visible {
            border-color: #1e40af;
            color: #1e40af;
            background: #eff6ff;
        }

        .podpowiedz__znak:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

        .podpowiedz__tresc {
            position: absolute;
            top: calc(100% + .625rem);
            left: 50%;
            transform: translateX(-50%) translateY(-.25rem);
            z-index: 40;
            width: max-content;
            max-width: min(26rem, calc(100vw - 2rem));
            padding: .75rem .875rem;
            border: 1px solid var(--kreska);
            border-radius: 10px;
            background: #fff;
            box-shadow: var(--cien-uniesiony);
            font-size: .8125rem;
            font-weight: 400;
            line-height: 1.55;
            color: #374151;
            display: none;        /* schowana podpowiedź nie może rozpychać strony */
            pointer-events: none; /* otwarta nie przechwytuje kliknięć w to, co pod nią */
        }

        /* Dziobek wskazujący kółeczko - zwykły obrócony kwadrat z tą samą kreską */
        .podpowiedz__tresc::before {
            content: "";
            position: absolute;
            top: -5px;
            left: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            background: #fff;
            border-left: 1px solid var(--kreska);
            border-top: 1px solid var(--kreska);
            transform: rotate(45deg);
        }

        .podpowiedz:hover .podpowiedz__tresc,
        .podpowiedz:focus-within .podpowiedz__tresc { display: block; }

        /* Na wąskim ekranie podpowiedź trzyma się krawędzi okna, nie przycisku -
           inaczej wyjeżdżałaby poza stronę i dokładała przewijanie w bok. */
        @media (max-width: 767px) {
            .podpowiedz__tresc {
                position: fixed;
                top: auto;
                left: 1rem;
                right: 1rem;
                width: auto;
                max-width: none;
                transform: none;
                margin-top: .5rem;
            }
            .podpowiedz__tresc::before { display: none; }
        }

        /* --- Odstęp pod stałym paskiem nawigacji --------------------------------
           Pasek jest przyklejony u góry (position: fixed), więc treść musi zaczynać
           się poniżej niego. Wcześniej każda podstrona zgadywała ten odstęp własnym
           `pt-*` i przy zmianie wysokości paska treść wchodziła pod nawigację.
           Teraz jest jedna reguła: klasa `.widok` na sekcji z treścią.
           Strona główna jej NIE używa - jej sekcja nagłówkowa ma własny układ. */
        :root {
            --wysokosc-paska: 84px;   /* 80 px paska + 4 px czerwonej kreski */
        }

        .widok {
            padding-top: calc(var(--wysokosc-paska) + 1.75rem);
            padding-bottom: 4rem;
        }

        /* Skok do kotwicy nie może chować celu pod paskiem */
        html { scroll-padding-top: calc(var(--wysokosc-paska) + 1rem); }

        /* --- Pasek narzędzi listy: wyszukiwarka i filtry ------------------------- */
        .pasek-narzedzi {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .625rem;
            padding: .875rem 1rem;
            border-bottom: 1px solid var(--kreska);
            background: #fff;
            border-radius: var(--promien) var(--promien) 0 0;
        }

        .pasek-narzedzi__filtry {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        /* --- Wyszukiwarka ------------------------------------------------------- */
        .szukajka {
            position: relative;
            flex: 1 1 18rem;
            min-width: 12rem;
        }

        .szukajka__ikona {
            position: absolute;
            left: .875rem;
            top: 50%;
            width: 1rem;
            height: 1rem;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
            transition: color .15s ease;
        }

        .szukajka__pole {
            width: 100%;
            height: 2.5rem;
            padding: 0 2.25rem 0 2.5rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 10px;
            background: var(--tlo-mdle);
            font-size: .875rem;
            color: #111827;
            transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
        }

        .szukajka__pole::placeholder { color: #9ca3af; }

        .szukajka__pole:focus {
            outline: none;
            background: #fff;
            border-color: #1e40af;
            box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
        }

        .szukajka__pole:focus + .szukajka__podpowiedzi { display: block; }
        .szukajka:focus-within .szukajka__ikona { color: #1e40af; }

        /* Krzyżyk czyszczący, który przeglądarka rysuje sama - wyłączamy, mamy swój układ */
        .szukajka__pole::-webkit-search-decoration,
        .szukajka__pole::-webkit-search-cancel-button { -webkit-appearance: none; }

        /* --- Podpowiedzi wyszukiwarki ------------------------------------------- */
        .szukajka__podpowiedzi {
            position: absolute;      /* leży NAD treścią - nie przesuwa strony */
            top: calc(100% + .375rem);
            left: 0;
            right: 0;
            z-index: 30;
            border: 1px solid var(--kreska);
            border-radius: 12px;
            background: #fff;
            box-shadow: var(--cien-uniesiony);
            overflow: hidden;
        }

        .podpowiedzi__lista { margin: 0; padding: .25rem; list-style: none; }

        .podpowiedz-pozycja {
            display: block;
            padding: .5rem .625rem;
            border-radius: 8px;
            text-decoration: none;
        }

        .podpowiedz-pozycja:hover,
        .podpowiedz-pozycja[aria-selected="true"] { background: var(--tlo-mdle); }
        .podpowiedz-pozycja:focus-visible { outline: 2px solid #1e40af; outline-offset: -2px; }

        .podpowiedz-pozycja__tytul {
            display: block;
            font-size: .875rem;
            font-weight: 600;
            color: #111827;
            line-height: 1.35;
        }

        .podpowiedz-pozycja__pod {
            display: block;
            margin-top: .125rem;
            font-size: .75rem;
            color: #6b7280;
        }

        .podpowiedzi__pusto,
        .podpowiedzi__stopka {
            margin: 0;
            padding: .625rem .875rem;
            font-size: .75rem;
            color: #6b7280;
        }

        .podpowiedzi__stopka { border-top: 1px solid var(--kreska); background: var(--tlo-mdle); }

        /* --- Filtr rozwijany ---------------------------------------------------- */
        .filtr { position: relative; }

        .filtr__przycisk {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            height: 2.5rem;
            padding: 0 .75rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 10px;
            background: #fff;
            font-size: .8125rem;
            font-weight: 600;
            color: #374151;
            white-space: nowrap;
            cursor: pointer;
            list-style: none;
            transition: border-color .15s ease, background-color .15s ease, color .15s ease;
        }

        .filtr__przycisk::-webkit-details-marker { display: none; }
        .filtr__przycisk:hover { border-color: #9ca3af; background: var(--tlo-mdle); }
        .filtr__przycisk:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

        .filtr[open] > .filtr__przycisk {
            border-color: #111827;
            color: #111827;
        }

        .filtr__strzalka { width: .75rem; height: .75rem; transition: transform .15s ease; }
        .filtr[open] > .filtr__przycisk .filtr__strzalka { transform: rotate(180deg); }

        /* Liczba zaznaczonych opcji - widać wybór bez rozwijania */
        .filtr__licznik {
            display: grid;
            place-items: center;
            min-width: 1.125rem;
            height: 1.125rem;
            padding: 0 .25rem;
            border-radius: 999px;
            background: #111827;
            color: #fff;
            font-size: .6875rem;
            font-variant-numeric: tabular-nums;
        }

        .filtr:not([open]) .filtr__panel { display: none; }

        .filtr__panel {
            position: absolute;      /* leży NAD treścią - otwarcie nie przesuwa strony */
            top: calc(100% + .375rem);
            left: 0;
            z-index: 30;
            min-width: 14rem;
            max-width: min(20rem, calc(100vw - 2rem));
            padding: .5rem;
            border: 1px solid var(--kreska);
            border-radius: 12px;
            background: #fff;
            box-shadow: var(--cien-uniesiony);
        }

        /* Przy prawej krawędzi panel otwiera się w lewo, żeby nie wyjść za ekran */
        .filtr:last-child .filtr__panel,
        .filtr--w-lewo .filtr__panel { left: auto; right: 0; }

        .filtr__naglowek {
            display: block;
            padding: .25rem .5rem .5rem;
            font-size: .6875rem;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: #9ca3af;
        }

        .filtr__opcja {
            display: flex;
            align-items: center;
            gap: .625rem;
            padding: .5rem;
            border-radius: 8px;
            font-size: .875rem;
            color: #374151;
            cursor: pointer;
            transition: background-color .12s ease;
        }

        .filtr__opcja:hover { background: var(--tlo-mdle); }
        .filtr__opcja input { position: absolute; opacity: 0; width: 0; height: 0; }

        .filtr__znacznik {
            position: relative;
            width: 1.0625rem;
            height: 1.0625rem;
            border: 1px solid var(--kreska-mocna);
            border-radius: 5px;
            background: #fff;
            flex: none;
            transition: background-color .12s ease, border-color .12s ease;
        }

        .filtr__opcja:has(input:checked) { color: #111827; font-weight: 600; }
        .filtr__opcja:has(input:checked) .filtr__znacznik { background: #111827; border-color: #111827; }

        .filtr__znacznik::after {
            content: "";
            position: absolute;
            left: .3125rem;
            top: .0625rem;
            width: .3125rem;
            height: .625rem;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(0);
            transition: transform .12s ease;
        }

        .filtr__opcja:has(input:checked) .filtr__znacznik::after { transform: rotate(45deg) scale(1); }
        .filtr__opcja:has(input:focus-visible) { outline: 2px solid #1e40af; outline-offset: 1px; }
        .filtr__pusto { margin: 0; padding: .5rem; font-size: .8125rem; color: #9ca3af; }

        /* --- Pasek wybranych filtrów -------------------------------------------- */
        .pasek-etykiet {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .5rem;
            padding: .625rem 1rem;
            border-bottom: 1px solid var(--kreska);
            background: var(--tlo-mdle);
        }

        .pasek-etykiet__wstep {
            font-size: .6875rem;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: #9ca3af;
        }

        .pasek-etykiet__czysc {
            margin-left: .25rem;
            font-size: .8125rem;
            font-weight: 600;
            color: #e00b0b;
        }

        .pasek-etykiet__czysc:hover { text-decoration: underline; }

        @media (max-width: 767px) {
            .pasek-narzedzi { padding: .75rem; }
            .szukajka { flex: 1 1 100%; }
            /* Panel filtru przykleja się do krawędzi okna, nie do przycisku */
            .filtr__panel {
                position: fixed;
                top: auto;
                left: 1rem;
                right: 1rem;
                width: auto;
                min-width: 0;
                max-width: none;
                margin-top: .375rem;
            }
        }

        /* --- Pole Cloudflare Turnstile ------------------------------------------
           Widżet rysujemy z `size: flexible`, więc bierze szerokość z pojemnika
           zamiast sztywnych 300 px (to samo rozwiązanie co w Akademii Rozgłos).
           `max-width` zostaje jako zabezpieczenie, gdyby Cloudflare kiedyś
           zignorowało ten parametr - na ekranie 320 px sztywne 300 px rozpychało
           stronę logowania w bok. */
        .cf-turnstile {
            max-width: 100%;
        }

        /* --- Wykresy oceny -------------------------------------------------------
           Rysowane wprost w SVG, bez biblioteki. Kreski cienkie, siatka ledwie
           widoczna, kolor tylko na znaku danych - nigdy na tekście. Liczby stoją
           obok wykresu, więc odczyt nie wymaga mierzenia łuku okiem. */
        .wykresy {
            display: grid;
            gap: 1.5rem;
            padding: 1.5rem;
        }

        @media (min-width: 900px) {
            .wykresy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; }
        }

        .wykres { margin: 0; min-width: 0; }

        .wykres__tytul {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: .5rem;
            margin-bottom: 1rem;
            font-size: .8125rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #475569;
        }

        .wykres__podtytul {
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: normal;
            text-transform: none;
            color: #64748b;          /* 4,76:1 na bieli - #94a3b8 dawało 2,56:1 */
        }

        .wykres__plotno { width: 100%; }
        .wykres__plotno svg { display: block; width: 100%; height: auto; }
        .wykres__plotno canvas { display: block; }

        /* --- Pierścienie --------------------------------------------------------- */
        .pierscienie { max-width: 15rem; margin: 0 auto; }

        .pierscien__tor { stroke: #eef0f3; }

        .pierscien__srodek-liczba {
            text-anchor: middle;
            font-size: 30px;
            font-weight: 700;
            fill: #111827;
            letter-spacing: -.02em;
        }

        .pierscien__srodek-podpis {
            text-anchor: middle;
            font-size: 10px;
            font-weight: 500;
            fill: #94a3b8;
        }

        /* --- Profil kryteriów ---------------------------------------------------- */
        .profil__siatka { stroke: #eef0f3; stroke-width: 1; }

        .profil__os-liczba {
            text-anchor: end;
            font-size: 10px;
            font-weight: 600;
            fill: #94a3b8;
            font-variant-numeric: tabular-nums;
        }

        .profil__os-nazwa {
            text-anchor: middle;
            font-size: 10px;
            font-weight: 500;
            fill: #64748b;
        }

        /* --- Legenda i odczyt liczbowy ------------------------------------------- */
        .wykres__legenda {
            margin: 1.25rem 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: .5rem;
        }

        .wykres__pozycja {
            display: flex;
            align-items: center;
            gap: .625rem;
            font-size: .8125rem;
        }

        .wykres__znak {
            width: .625rem;
            height: .625rem;
            border-radius: 3px;
            flex: none;
        }

        .wykres__znak--kreska { width: 1.125rem; height: .1875rem; border-radius: 999px; }

        .wykres__nazwa { color: #475569; }

        .wykres__wartosc {
            margin-left: auto;
            font-weight: 700;
            color: #111827;
            font-variant-numeric: tabular-nums;
        }

        /* --- Liczby pod wykresem ------------------------------------------------- */
        .wykres__dane {
            border-top: 1px solid var(--kreska);
            padding: 0 1.5rem 1.25rem;
        }

        .wykres__dane > summary {
            padding: .875rem 0;
            font-size: .8125rem;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
        }

        .wykres__dane > summary:hover { color: #111827; }
        .wykres__dane > summary:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

        .tabela--zwarta { min-width: 0; }
        .tabela--zwarta thead th { padding: .5rem .75rem; }
        .tabela--zwarta tbody td { padding: .625rem .75rem; }

        .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;
        }

        /* --- Płótna wykresów Chart.js -------------------------------------------
           Chart.js potrzebuje pojemnika o ustalonej wysokości, inaczej rośnie
           w nieskończoność przy każdym przeliczeniu układu. */
        .wykres__plotno--pierscienie { height: 15rem; }
        .wykres__plotno--profil { height: 17rem; }

        @media (max-width: 640px) {
            .wykres__plotno--pierscienie { height: 13rem; }
            .wykres__plotno--profil { height: 15rem; }
        }

        .wykres__przypis {
            margin: .875rem 0 0;
            font-size: .75rem;
            line-height: 1.6;
            color: #64748b;
        }

        /* --- Legenda wykresu liniowego ------------------------------------------
           Robiona ręcznie, bo wbudowana w Chart.js rysowała obie linie odniesienia
           jako identyczne szare kreski. Tutaj próbka pokazuje dokładnie ten sam
           kolor i ten sam wzór przerywania, co linia na wykresie. */
        .wykres__legenda--linie {
            margin-top: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        }

        .wykres__probka {
            width: 1.75rem;
            height: .625rem;
            flex: none;
        }

        .wykres__legenda--linie .wykres__nazwa { line-height: 1.3; }