/* Aplikacja jest używana głównie z telefonu, więc układ jest jednokolumnowy
   i skalowany od małego ekranu w górę. */

:root {
    --tlo: #f5f6f8;
    --powierzchnia: #ffffff;
    --tekst: #14171f;
    --tekst-drugi: #565c6d;
    --obramowanie: #dee1e8;
    --akcent: #24408e;
    --akcent-tlo: #e7ebf7;
    --akcent-2: #4c6ad6;
    /* Tekst na przycisku akcentowym musi zmieniać się razem z tłem: w trybie ciemnym
       akcent jest jasny i biały napis na nim przestaje być czytelny. */
    --akcent-tekst: #ffffff;
    --ostrzezenie: #9c5f09;
    --ostrzezenie-tlo: #f6ebd9;
    --blad: #ae3a3a;
    /* Sukces i seria mają własne tokeny (osobne od akcentu) — postęp i codzienna
       passa muszą "ciepło" odróżniać się wizualnie od neutralnych linków i informacji. */
    --sukces: #1f8a4c;
    --sukces-2: #4fb578;
    --sukces-tlo: #e4f5ea;
    --seria: #c96a12;
    --seria-2: #e8973f;
    --seria-tlo: #fbebd7;
    --cien: 0 1px 2px rgba(20, 23, 31, .04), 0 4px 14px rgba(20, 23, 31, .07);
    --cien-mocny: 0 2px 4px rgba(20, 23, 31, .06), 0 10px 24px rgba(20, 23, 31, .1);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tlo: #12141b;
        --powierzchnia: #181b24;
        --tekst: #e7e9f0;
        --tekst-drugi: #9ba0b4;
        --obramowanie: #2c303f;
        --akcent: #8da0e8;
        --akcent-tlo: #232a45;
        --akcent-2: #a9bcf2;
        --akcent-tekst: #12141b;
        --ostrzezenie: #e0a94a;
        --ostrzezenie-tlo: #332711;
        --blad: #e38080;
        --sukces: #6fd196;
        --sukces-2: #3fa869;
        --sukces-tlo: #17301f;
        --seria: #f0a860;
        --seria-2: #d98530;
        --seria-tlo: #382512;
        --cien: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .28);
        --cien-mocny: 0 2px 4px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .36);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0; }

/* Pasek nawigacji trzyma pełną szerokość pod tło i obramowanie (spójny pasek na całym
   ekranie), ale sam wiersz z linkami jest wyśrodkowany tą samą szerokością co treść —
   inaczej na szerokim ekranie logo lgnęło do lewej krawędzi, a treść stała na środku. */
.pasek {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--powierzchnia);
    border-bottom: 1px solid var(--obramowanie);
}

.pasek-wewnatrz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 760px;
    padding: .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
}

.marka { font-weight: 600; color: var(--akcent); text-decoration: none; font-size: 1.1rem; }

.linki { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.linki a { color: var(--tekst-drugi); text-decoration: none; padding: .25rem 0; }
.linki a.active { color: var(--akcent); font-weight: 500; }

.tresc { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

.podtytul { color: var(--tekst-drugi); margin: 0 0 1.25rem; }
.meta { color: var(--tekst-drugi); font-size: .875rem; margin: .25rem 0; }
.drobne { color: var(--tekst-drugi); font-size: .8125rem; }
.ladowanie, .pusto { color: var(--tekst-drugi); }

.naglowek-dnia { margin-bottom: 1rem; }

/* Mini-podgląd postępu na ekranie "dziś" — seria i procent planu widoczne od razu,
   bez wchodzenia na osobny ekran, żeby postęp był na oczach codziennie, nie od święta. */
.podglad-postepu {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: .85rem 1.1rem;
    margin-bottom: 1.1rem;
}

.podglad-postepu .seria-mini {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    color: var(--seria);
    font-weight: 700;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    padding-right: 1.1rem;
    border-right: 1px solid var(--obramowanie);
}

.podglad-postepu .seria-mini .meta { font-weight: 400; font-size: .8125rem; }

.podglad-postepu .plan-mini { flex: 1 1 auto; min-width: 0; }

.podglad-postepu .plan-mini .etykieta {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--tekst-drugi);
    margin-bottom: .35rem;
}

.podglad-postepu .pasek-postepu { height: 6px; }

@media (max-width: 420px) {
    .podglad-postepu { flex-wrap: wrap; }
    .podglad-postepu .seria-mini { border-right: none; padding-right: 0; }
    .podglad-postepu .plan-mini { flex-basis: 100%; }
}

.krok, .pytanie, .blad-wpis, .karta-logowania, .wynik-diagnozy {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.krok.zablokowany { opacity: .65; box-shadow: none; }

/* Zrobiony dziś krok zostaje na ekranie (nie znika), ale wyraźnie inny wygląd
   odróżnia go od tego, co jeszcze czeka na zrobienie. */
.krok.zrobiony-dzisiaj { background: var(--tlo); box-shadow: none; }

.krok-naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.znacznik {
    font-size: .75rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.znacznik.wysoka { background: var(--akcent-tlo); color: var(--akcent); }
.znacznik.neutralna { background: var(--tlo); color: var(--tekst-drugi); border: 1px solid var(--obramowanie); }
.znacznik.ok { background: var(--sukces-tlo); color: var(--sukces); font-weight: 600; }
.znacznik.zle { background: color-mix(in srgb, var(--blad) 16%, transparent); color: var(--blad); font-weight: 600; }

.komunikat-przerwa {
    background: var(--ostrzezenie-tlo);
    color: var(--ostrzezenie);
    border: 1px solid var(--ostrzezenie);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.ostrzezenie { color: var(--ostrzezenie); font-size: .875rem; }
.kamien { color: var(--akcent); font-size: .875rem; }
.blad { color: var(--blad); }

.panel { margin-top: .75rem; display: flex; flex-direction: column; gap: .35rem; }

label { font-size: .875rem; color: var(--tekst-drugi); margin-top: .5rem; }

input, select {
    width: 100%;
    padding: .6rem .7rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tekst);
    background: var(--tlo);
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
}

input[type="radio"] { width: auto; margin-right: .5rem; }

.wariant { display: flex; align-items: center; color: var(--tekst); margin: .35rem 0; cursor: pointer; }

.przyciski { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }

button, a.glowny {
    font: inherit;
    padding: .6rem 1.1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, opacity .12s ease;
}

button.glowny, a.glowny {
    background: linear-gradient(135deg, var(--akcent-2), var(--akcent));
    color: var(--akcent-tekst);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(20, 23, 31, .08), 0 4px 10px -2px color-mix(in srgb, var(--akcent) 45%, transparent);
}

button.glowny:hover, a.glowny:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20, 23, 31, .1), 0 8px 16px -4px color-mix(in srgb, var(--akcent) 50%, transparent); }
button.glowny:active, a.glowny:active { transform: translateY(0); }

button.drugorzedny { background: var(--powierzchnia); color: var(--tekst-drugi); border-color: var(--obramowanie); }
button.drugorzedny:hover { border-color: var(--akcent); color: var(--akcent); }

button.wyloguj { background: transparent; color: var(--tekst-drugi); border: none; padding: .25rem; }
button.zglos { background: transparent; color: var(--tekst-drugi); border: none; padding: .35rem 0; font-size: .8125rem; text-decoration: underline; }
button:disabled { opacity: .55; cursor: default; transform: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
    button, a.glowny { transition: none; }
}

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 1rem 0; }
th { text-align: left; color: var(--tekst-drugi); font-weight: 500; font-size: .8125rem; }
th, td { padding: .5rem .35rem; border-bottom: 1px solid var(--obramowanie); }

/* ---- zadania ---- */

.zadanie {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-left: 3px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    transition: border-left-color .2s ease;
}

.zadanie.poprawne { border-left-color: var(--sukces); }
.zadanie.bledne { border-left-color: var(--blad); }

.zadanie .krok-naglowek { margin-bottom: .35rem; }
.zadanie .tresc-pozycji { margin: .35rem 0 .6rem; }
.zadanie .drobne { margin: .25rem 0 .5rem; }
.zadanie .wariant { margin: .2rem 0; }

/* Nazwa świadomie inna niż główny kontener strony (main.tresc) — te dwie klasy kiedyś
   się nazywały tak samo, a późniejsza reguła w pliku po cichu nadpisywała centrowanie
   całej strony (obie miały tę samą swoistość, więc wygrywała kolejność w pliku). */
.tresc-pozycji { font-size: 1.05rem; margin: .5rem 0; }

.werdykt-ok { color: var(--sukces); font-weight: 500; }
.werdykt-zle { color: var(--blad); font-weight: 500; }

/* Małe potwierdzenie na dobrą odpowiedź — konfetti (mathbro.fajerwerki) zostaje
   zarezerwowane wyłącznie dla kamieni milowych z planu, żeby nie spowszedniało. */
.werdykt-ok.iskra { animation: iskra-sukcesu .5s ease-out; }

@keyframes iskra-sukcesu {
    0% { transform: scale(.92); opacity: 0; }
    55% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .werdykt-ok.iskra { animation: none; }
}

/* ---- klawiatura matematyczna ---- */

.pole-odpowiedzi { margin: .5rem 0; }

.klawiatura {
    margin-top: .5rem;
    border: 1px solid var(--obramowanie);
    border-radius: 10px;
    overflow: hidden;
}

.klawiatura-grupy {
    display: flex;
    overflow-x: auto;
    background: var(--tlo);
    border-bottom: 1px solid var(--obramowanie);
}

.klawiatura-grupy .grupa {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--tekst-drugi);
    font-size: .8125rem;
    padding: .5rem .85rem;
}

.klawiatura-grupy .grupa.aktywna {
    color: var(--akcent);
    box-shadow: inset 0 -2px 0 var(--akcent);
}

.klawiatura-znaki {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    background: var(--obramowanie);
}

.klawiatura-znaki .znak {
    background: var(--powierzchnia);
    border: none;
    border-radius: 0;
    color: var(--tekst);
    font-size: 1.05rem;
    padding: .6rem .25rem;
    min-height: 44px;
}

.klawiatura-znaki .znak:active { background: var(--akcent-tlo); }

@media (max-width: 520px) {
    .klawiatura-znaki { grid-template-columns: repeat(4, 1fr); }
}

/* ---- teoria ---- */

.zakladki {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--obramowanie);
    margin-bottom: 1rem;
}

.zakladka {
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--tekst-drugi);
    padding: .6rem .9rem;
    white-space: nowrap;
}

.zakladka.aktywna { color: var(--akcent); box-shadow: inset 0 -2px 0 var(--akcent); }

.wiki, .przyklad, .fiszka {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.markdown h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
.markdown h3 { font-size: 1rem; margin: 1rem 0 .35rem; }
.markdown table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .9375rem; }
.markdown th, .markdown td { padding: .45rem .5rem; border-bottom: 1px solid var(--obramowanie); text-align: left; }
.markdown code { background: var(--tlo); padding: .1rem .3rem; border-radius: 4px; font-size: .9375rem; }
.markdown ul, .markdown ol { padding-left: 1.2rem; }

.krok-przykladu { display: flex; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--obramowanie); }

.krok-przykladu .numer {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--akcent-tlo);
    color: var(--akcent);
    font-size: .8125rem;
}

.krok-przykladu .wyjasnienie { color: var(--tekst-drugi); font-size: .9375rem; margin: .25rem 0 0; }

.odpowiedz-fiszki {
    background: var(--akcent-tlo);
    color: var(--akcent);
    padding: .6rem .8rem;
    border-radius: 8px;
    margin: .5rem 0;
}

/* ---- wiki ---- */

.grupa-miesiaca { font-size: .8125rem; color: var(--tekst-drugi); text-transform: uppercase; letter-spacing: .04em; margin: 1.25rem 0 .5rem; }
.grupa-miesiaca:first-of-type { margin-top: .5rem; }

.wpis-wiki {
    display: block;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: .85rem 1.1rem;
    margin-bottom: .75rem;
    color: var(--tekst);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.wpis-wiki:hover { transform: translateY(-1px); box-shadow: var(--cien-mocny); }
.wpis-wiki h3 { font-size: 1rem; margin: 0 0 .15rem; color: var(--akcent); }
.wpis-wiki .meta { margin: 0 0 .35rem; }
.wpis-wiki .fragment { margin: 0; color: var(--tekst-drugi); font-size: .9rem; line-height: 1.5; }

/* ---- przegląd planu ---- */

.miesiac {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    margin-bottom: 1rem;
    overflow: hidden;
}

.miesiac.ukonczony { border-color: color-mix(in srgb, var(--sukces) 40%, var(--obramowanie)); }
.miesiac.ukonczony .miesiac-naglowek h2::after { content: " ✓"; color: var(--sukces); }

.miesiac-naglowek {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--tekst);
    text-align: left;
    padding: 1rem 1.15rem;
}

.miesiac-naglowek h2 { font-size: 1.05rem; }
.miesiac-naglowek .strzalka { color: var(--tekst-drugi); font-size: 1.25rem; }

.pasek-postepu { height: 7px; background: var(--tlo); border-radius: 999px; overflow: hidden; }
.pasek-postepu span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--akcent-2), var(--sukces-2));
    transition: width .4s ease;
}

/* Pasek postępu z etykietą procentową obok — do miejsc, gdzie liczba ma się liczyć
   na pierwszy rzut oka, nie dopiero po najechaniu. */
.postep-z-etykieta { display: flex; align-items: center; gap: .6rem; }
.postep-z-etykieta .pasek-postepu { flex: 1 1 auto; margin: 0; }
.postep-z-etykieta .procent {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tekst-drugi);
    min-width: 2.6em;
    text-align: right;
}

.dzialy { padding: .5rem 1.15rem 1rem; }

.szukajka {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}

.szukajka .filtry { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }

.szukajka .filtr {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--tekst-drugi);
    font-size: .875rem;
    cursor: pointer;
}

.szukajka .filtr input { width: auto; }

.kroki-dzialu { margin-top: .6rem; border-top: 1px dashed var(--obramowanie); }

.krok-sesji {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .45rem 0;
}

.dzial { padding: .85rem 0; border-top: 1px solid var(--obramowanie); }
.dzial.zablokowany { opacity: .6; }
.dzial h3 { font-size: .9375rem; margin: 0; }

.ocena-zdjecia {
    background: var(--tlo);
    border: 1px solid var(--obramowanie);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: .5rem 0;
    white-space: pre-line;
}

.ocena-zdjecia p { margin: .35rem 0 0; }

.podpowiedz {
    background: var(--akcent-tlo);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: .5rem 0;
}

.podpowiedz p { margin: .35rem 0 0; }

/* ---- tryb egzaminacyjny ---- */

.pasek-egzaminu {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 10px;
    padding: .6rem .9rem;
    margin-bottom: 1rem;
}

.zegar {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--akcent);
}

.zegar.malo-czasu { color: var(--blad); }

.pozycja-wyniku {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-top: 1px solid var(--obramowanie);
}

.pozycja-wyniku > div { flex: 1 1 auto; min-width: 0; }

.numer-zadania {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--akcent-tlo);
    color: var(--akcent);
    font-size: .8125rem;
}

/* ---- tablice wzorów ---- */

.tablice { margin-bottom: 1rem; }

.tablice-przycisk {
    background: var(--akcent-tlo);
    color: var(--akcent);
    border: 1px solid var(--akcent);
    width: 100%;
}

.tablice-panel {
    border: 1px solid var(--obramowanie);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: .75rem 1rem 1rem;
    background: var(--powierzchnia);
}

.tablice-pdf { width: 100%; height: 60vh; border: 1px solid var(--obramowanie); border-radius: 8px; }

/* ---- zdjęcia rozwiązań ---- */

.wybor-zdjecia {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
    color: var(--akcent);
    cursor: pointer;
}

.wybor-zdjecia input[type="file"] { max-width: 220px; font-size: .8125rem; }

.zdjecie-rozwiazania {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--obramowanie);
    margin-top: .5rem;
}

/* ---- pulpit postępu ---- */

.kafel-checkpoint {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.kafel-checkpoint.ahead {
    border-color: color-mix(in srgb, var(--sukces) 45%, var(--obramowanie));
    background: linear-gradient(180deg, var(--sukces-tlo) 0%, var(--powierzchnia) 65%);
}

.kafel-checkpoint h2 { font-size: 1.05rem; margin-bottom: .5rem; }

.porownanie {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .75rem 0;
}

.porownanie > div { display: flex; flex-direction: column; }
.strzalka-porownania { font-size: 1.5rem; color: var(--tekst-drugi); }

.duza-liczba { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.duza-liczba.cel { color: var(--akcent); }
.duza-liczba .z { font-size: 1.1rem; color: var(--tekst-drugi); font-weight: 400; }

.rekomendacja { font-size: 1.05rem; font-weight: 600; color: var(--akcent); margin: .5rem 0 .25rem; }

.komunikat-seria {
    background: var(--akcent-tlo);
    color: var(--akcent);
    border-radius: 10px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
}

.kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.kafel {
    background: var(--powierzchnia);
    border: 1px solid var(--obramowanie);
    border-radius: 14px;
    box-shadow: var(--cien);
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Pasek pod liczbą w kaflu ("12/88") — ułamek widoczny od razu, bez liczenia w głowie. */
.kafel .pasek-postepu { height: 5px; margin-top: .5rem; }

/* Kafel serii dostaje ciepły, "rozgrzany" wygląd zamiast neutralnej białej karty —
   codzienna passa ma się wyróżniać, nie zlewać z resztą statystyk. */
.kafel.serii {
    background: linear-gradient(160deg, var(--seria-tlo) 0%, var(--powierzchnia) 75%);
    border-color: color-mix(in srgb, var(--seria) 40%, var(--obramowanie));
}

.kafel.serii .duza-liczba { color: var(--seria); }

.plomien {
    font-size: 1.35rem;
    line-height: 1;
    margin-right: .15rem;
    filter: grayscale(0);
}

@media (prefers-reduced-motion: no-preference) {
    .kafel.serii .plomien { animation: plomien-tetno 2.6s ease-in-out infinite; }
}

@keyframes plomien-tetno {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.wykres-arkuszy {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 90px;
    margin: 1rem 0 .25rem;
    padding-top: .5rem;
}

.slupek { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.slupek-wypelnienie { background: var(--akcent); border-radius: 4px 4px 0 0; min-height: 3px; }
.slupek-opis { font-size: .6875rem; color: var(--tekst-drugi); text-align: center; padding-top: .25rem; }

canvas.fajerwerki {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
}

.karta-logowania { max-width: 400px; margin: 3rem auto; }
.karta-logowania button { width: 100%; margin-top: 1rem; }

.startowy-ekran { padding: 3rem 1rem; text-align: center; color: #565c6d; font-family: system-ui, sans-serif; }

#blazor-error-ui {
    background: var(--ostrzezenie-tlo);
    color: var(--ostrzezenie);
    bottom: 0;
    display: none;
    left: 0;
    padding: .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }