/*
 * Dnes jím – vzhled.
 *
 * Mobil první: aplikace se používá jednou rukou u stolu, proto velké
 * dotykové plochy dole a čtení nahoře. Barvy jsou teplé (papír, keramika),
 * ne technické – deník má být příjemný, ne jako tabulka v účetnictví.
 */

:root {
    --papir: #f4efe6;
    --plocha: #fffdf9;
    --plocha-2: #f0e9dc;
    --inkoust: #211c16;
    --inkoust-tlum: #6d6355;
    --linka: #e0d6c5;
    --akcent: #b4491f;
    --akcent-tmavy: #8f3714;
    --zelena: #4f6a3f;
    --modra: #2f5d76;
    --zlata: #b98a1e;
    --nebezpeci: #a02020;
    --rohy: 14px;      /* karty */
    --rohy-male: 10px; /* pole, tlačítka, drobné plochy */
    --stin: 0 1px 2px rgba(33, 28, 22, .06), 0 8px 24px rgba(33, 28, 22, .06);
    --pismo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --pismo-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --papir: #16130f;
        --plocha: #1f1b16;
        --plocha-2: #272119;
        --inkoust: #f2ece1;
        --inkoust-tlum: #a89b89;
        --linka: #342c22;
        --akcent: #e2703f;
        --akcent-tmavy: #f08a5c;
        --zelena: #8fb079;
        --modra: #7fb0c9;
        --zlata: #d9ab4b;
        --nebezpeci: #e06a6a;
        --stin: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papir);
    color: var(--inkoust);
    font-family: var(--pismo-ui);
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
}

button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Zámek s PINem ---------- */

/* Přihlášení je první obrazovka, pod ní pokračuje landing – proto se
   stránka normálně scrolluje a zámek není překryv přes celý viewport. */
.zamek {
    display: grid;
    place-items: center;
    background: var(--papir);
    min-height: 88svh;
    padding: 12px 20px 24px;
}

.zamek__box { width: 100%; max-width: 320px; text-align: center; }
.zamek__znak { display: inline-block; width: 72px; height: 72px; }
.zamek__nadpis {
    font-family: var(--pismo);
    font-size: 26px;
    font-weight: 600;
    margin: 6px 0 2px;
    letter-spacing: -.01em;
}
.zamek__popis { margin: 0 0 14px; color: var(--inkoust-tlum); font-size: 15px; }
.zamek__text { margin: 0 0 18px; color: var(--inkoust-tlum); font-size: 14px; line-height: 1.5; text-align: left; }
.pole--zamek { text-align: left; margin-bottom: 12px; }

.zamek__odkazy { display: flex; justify-content: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.odkaz {
    border: none;
    background: none;
    padding: 4px 2px;
    color: var(--inkoust-tlum);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.odkaz:active { color: var(--akcent); }

/* PIN po registraci – jediné místo, kde se kdy ukáže, ať se dá opsat */
.pin-vypis {
    margin: 4px 0 18px;
    padding: 14px;
    border: 1px dashed var(--akcent);
    border-radius: var(--rohy);
    background: var(--plocha);
    font-family: var(--pismo);
    font-size: 30px;
    letter-spacing: .18em;
    color: var(--akcent);
    user-select: all;
}
.zamek__chyba { min-height: 18px; margin: 8px 0 2px; color: var(--nebezpeci); font-size: 14px; }

/* PIN může mít víc než šest číslic, proto se tečky zalamují */
.pin-tecky { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 13px; }
.pin-tecky span {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1.5px solid var(--inkoust-tlum);
    transition: background-color .12s ease, transform .12s ease;
}
.pin-tecky span.je-plna { background: var(--akcent); border-color: var(--akcent); transform: scale(1.12); }

/* Klávesnice je schválně nižší než široká – na malém displeji se tak vejde
   i tlačítko a odkazy pod ní, aniž by se muselo scrollovat. */
.klavesnice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}
.klavesa {
    aspect-ratio: 1 / .52;
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    background: var(--plocha);
    font-size: 24px;
    font-family: var(--pismo);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background-color .12s ease;
}
.klavesa:active { transform: scale(.96); background: var(--plocha-2); }
.klavesa--prazdna { border: none; background: none; }
.klavesa--akce { color: var(--inkoust-tlum); display: grid; place-items: center; }

/* ---------- Hlavička dne ---------- */

.aplikace { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

.hlavicka {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--papir);
    padding: calc(14px + env(safe-area-inset-top)) 16px 6px;
}

.hlavicka__radek { display: flex; align-items: center; gap: 8px; }
.datum { flex: 1; text-align: center; min-width: 0; }
.datum__den {
    font-family: var(--pismo);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -.01em;
}
.datum__popis { margin: 0; font-size: 13px; color: var(--inkoust-tlum); }
.datum-sipka {
    width: 40px; height: 40px;
    border: none;
    background: none;
    color: var(--inkoust-tlum);
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
}
.datum-sipka:active { background: var(--plocha-2); }
.datum-sipka[disabled] { opacity: .25; }

.souhrn {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    box-shadow: var(--stin);
}
.souhrn__polozka { flex: 1; text-align: center; min-width: 0; }
.souhrn__cislo { font-family: var(--pismo); font-size: 19px; display: block; line-height: 1.15; }
.souhrn__popisek { font-size: 11px; color: var(--inkoust-tlum); text-transform: uppercase; letter-spacing: .06em; }
.souhrn__polozka--kcal .souhrn__cislo { color: var(--akcent); }
.souhrn__pruh { display: block; height: 3px; border-radius: 2px; background: var(--plocha-2); margin-top: 6px; overflow: hidden; }
.souhrn__pruh i { display: block; height: 3px; background: var(--zelena); }

/* ---------- Landing pod přihlášením ---------- */

.zamek__lead {
    margin: 8px 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--inkoust-tlum);
}

.landing {
    padding: 8px 20px calc(40px + env(safe-area-inset-bottom));
    background: var(--papir);
}
.landing__vnitrek { max-width: 460px; margin: 0 auto; }
.landing__nadpis {
    font-family: var(--pismo);
    font-size: 20px;
    margin: 28px 0 12px;
    text-align: center;
}
.landing__poznamka {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--inkoust-tlum);
    text-align: center;
}

.kroky { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.krok {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    font-size: 14px;
    line-height: 1.45;
    color: var(--inkoust-tlum);
}
.krok strong { color: var(--inkoust); font-weight: 600; }
.krok__cislo {
    flex: none;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--plocha-2);
    color: var(--akcent);
    font-family: var(--pismo);
    font-size: 14px;
}

.tarify { display: flex; flex-direction: column; gap: 12px; }
.tarif {
    padding: 16px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    box-shadow: var(--stin);
}
/* Placený tarif má rámeček v akcentu – ne barevnou plochu, aby zbytek
   stránky nevypadal jako reklamní leták */
.tarif--hlavni { border-color: var(--akcent); border-width: 1.5px; }
.tarif__stitek {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--inkoust-tlum);
}
.tarif__cena {
    font-family: var(--pismo);
    font-size: 26px;
    margin: 4px 0 2px;
    line-height: 1.15;
}
.tarif__cena span {
    display: block;
    font-family: var(--pismo-ui);
    font-size: 12.5px;
    color: var(--inkoust-tlum);
}
.tarif__cena--druha { font-size: 19px; margin-top: 10px; color: var(--inkoust-tlum); }
.tarif__cena--druha span { color: var(--zelena); }
.tarif__body { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--inkoust-tlum); }
.tarif__body li { margin-bottom: 4px; }

/* ---------- Nabídka instalace ---------- */

.instalace {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    margin: 12px auto;
    padding: 10px 12px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    box-shadow: var(--stin);
}
.instalace__ikona { flex: none; border-radius: 8px; }
.instalace__text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--inkoust-tlum); line-height: 1.35; }
.instalace__text strong { display: block; font-size: 14px; color: var(--inkoust); }
.instalace__akce { flex: none; padding: 9px 14px; font-size: 14px; }
.instalace__zavrit {
    flex: none;
    border: none;
    background: none;
    color: var(--inkoust-tlum);
    display: grid;
    place-items: center;
    padding: 4px 2px;
    cursor: pointer;
}

/* ---------- Záložky ---------- */

/* Záložky nejsou sticky schválně – s lepící se hlavičkou dne by se
   překrývaly a nad seznamem by ubraly půl obrazovky. */
.zalozky {
    display: flex;
    gap: 4px;
    padding: 4px 16px 10px;
}
.zalozka {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: var(--rohy-male);
    background: transparent;
    color: var(--inkoust-tlum);
    /* Čtyři záložky se musí vejít i na úzký telefon */
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.zalozka.je-aktivni { background: var(--plocha); color: var(--inkoust); box-shadow: var(--stin); }

.obsah { padding: 0 16px; }

/* ---------- Seznam záznamů ---------- */

.seznam { display: flex; flex-direction: column; gap: 12px; }

.zaznam {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    box-shadow: var(--stin);
    text-align: left;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.zaznam:active { background: var(--plocha-2); }
.zaznam__foto {
    width: 74px; height: 74px;
    flex: none;
    border-radius: 10px;
    object-fit: cover;
    background: var(--plocha-2);
}
.zaznam__foto--prazdna { display: grid; place-items: center; color: var(--inkoust-tlum); opacity: .55; }
.zaznam__telo { min-width: 0; flex: 1; }
.zaznam__hlava { display: flex; align-items: baseline; gap: 8px; }
.zaznam__cas { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--inkoust-tlum); }
.zaznam__typ {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--modra);
}
.zaznam__nazev {
    font-family: var(--pismo);
    font-size: 17px;
    margin: 2px 0 4px;
    line-height: 1.25;
}
.zaznam__mnozstvi { font-size: 13px; color: var(--inkoust-tlum); margin: 0 0 6px; }
.zaznam__ziviny { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--inkoust-tlum); }
.zaznam__ziviny b { font-weight: 600; color: var(--inkoust); font-variant-numeric: tabular-nums; }
.zaznam__odhad {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--zlata);
}

.prazdno {
    text-align: center;
    padding: 40px 20px;
    color: var(--inkoust-tlum);
}
.prazdno__nadpis { font-family: var(--pismo); font-size: 19px; color: var(--inkoust); margin: 0 0 6px; }

/* ---------- Přehled ---------- */

.prehled { display: flex; flex-direction: column; gap: 10px; }
.den-radek {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.den-radek__datum { font-family: var(--pismo); font-size: 16px; flex: 1; }
.den-radek__pocet { font-size: 12px; color: var(--inkoust-tlum); }
.den-radek__kcal { font-family: var(--pismo); font-size: 18px; color: var(--akcent); font-variant-numeric: tabular-nums; }

/* ---------- Karty (export, odhlášení) ---------- */

.karta {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--stin);
}
.karta__nadpis { font-family: var(--pismo); font-size: 18px; margin: 0 0 6px; }
.karta__text { margin: 0 0 14px; font-size: 14px; color: var(--inkoust-tlum); }
.karta__tlacitka { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Upozornění na odhad od AI ---------- */

.upozorneni {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    font-size: 13px;
    line-height: 1.5;
    color: var(--inkoust-tlum);
}
.upozorneni strong { color: var(--inkoust); }
.upozorneni__stitek {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zlata);
}
.upozorneni--landing { margin-top: 22px; text-align: left; }
.upozorneni--drobne { font-size: 12.5px; padding: 9px 11px; }

/* ---------- Provoz: seznam účtů ---------- */

.uzivatele { margin-top: 16px; }
.uzivatele__nadpis { font-family: var(--pismo); font-size: 15px; margin: 0 0 8px; }
.uzivatel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 0;
    border-top: 1px solid var(--linka);
    font-size: 13px;
}
.uzivatel__email { flex: 1 1 100%; font-weight: 600; }
.uzivatel__stav { flex: 1; color: var(--inkoust-tlum); }
.uzivatel__akce { display: flex; gap: 6px; }
.uzivatel__akce button {
    border: 1px solid var(--linka);
    background: var(--plocha);
    border-radius: var(--rohy-male);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

/* ---------- Váhy v nastavení ---------- */

.vahy { margin-top: 14px; }
.vaha-radek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--linka);
    font-size: 14px;
}
.vaha-radek__datum { flex: 1; color: var(--inkoust-tlum); }
.vaha-radek__kg { font-family: var(--pismo); font-size: 16px; font-variant-numeric: tabular-nums; }
.vaha-radek__zmena { font-size: 12px; min-width: 52px; text-align: right; }
.vaha-radek__zmena.je-dolu { color: var(--zelena); }
.vaha-radek__zmena.je-nahoru { color: var(--akcent); }
.vaha-radek__smazat {
    border: none;
    background: none;
    color: var(--inkoust-tlum);
    display: grid;
    place-items: center;
    padding: 2px 4px;
    cursor: pointer;
}
.vahy__prazdno { font-size: 13px; color: var(--inkoust-tlum); padding-top: 10px; }

/* Karta, po které není cesty zpět */
.karta--nebezpecna { border-color: rgba(160, 32, 32, .35); }
.tlacitko--nebezpecne-plne {
    background: var(--nebezpeci);
    border-color: var(--nebezpeci);
    color: #fff;
    flex: 1;
}

/* ---------- Formulářová pole ---------- */

.pole { display: block; margin-bottom: 12px; }
.pole__popisek {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--inkoust-tlum);
    margin-bottom: 4px;
}
.pole__vstup {
    width: 100%;
    padding: 11px 12px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: 10px;
    /* 16px kvůli iOS – menší písmo spustí zoom při zaostření pole */
    font-size: 16px;
}
.pole__vstup:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }
.pole__vstup--text { resize: vertical; min-height: 60px; }
.pole-dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ziviny { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ziviny .pole__vstup { padding: 10px 8px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Tlačítka ---------- */

.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--linka);
    border-radius: var(--rohy-male);
    background: var(--plocha);
    color: var(--inkoust);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.tlacitko:active { transform: scale(.98); }
.tlacitko--hlavni { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.tlacitko--siroke { width: 100%; margin-top: 14px; padding: 14px 18px; }
/* Dopočet živin z popisu – nabídka, ne hlavní akce, proto tlumeně */
.tlacitko--odhad {
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--modra);
    border-style: dashed;
}
.tlacitko--nebezpecne { color: var(--nebezpeci); border-color: transparent; background: none; }
.tlacitko[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Spodní lišta ---------- */

.lista {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--papir);
    /* Vlasová linka místo přechodu do průhledna – pod lištou je vidět, že
       obsah pokračuje, a nevzniká mlha přes půl obrazovky */
    border-top: 1px solid var(--linka);
}
.tlacitko-foto {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: var(--rohy);
    background: var(--akcent);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 6px 20px rgba(180, 73, 31, .28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tlacitko-foto:active { background: var(--akcent-tmavy); }
.tlacitko-rucne {
    flex: none;
    width: 84px;
    border: 1px solid var(--linka);
    border-radius: var(--rohy);
    background: var(--plocha);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}

/* ---------- Editor ---------- */

.editor {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(20, 16, 12, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.editor__panel {
    width: 100%;
    max-width: 560px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: var(--papir);
    border-radius: 18px 18px 0 0;
}
@media (min-width: 600px) {
    .editor { align-items: center; }
    .editor__panel { border-radius: 18px; max-height: 88vh; }
}
.editor__hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
    border-bottom: 1px solid var(--linka);
}
.editor__nadpis { font-family: var(--pismo); font-size: 19px; margin: 0; }
.editor__zavrit {
    border: none;
    background: none;
    color: var(--inkoust-tlum);
    display: grid;
    place-items: center;
    padding: 6px 8px;
    cursor: pointer;
}
.editor__telo { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.editor__pata {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linka);
    background: var(--plocha);
}
.editor__pata .tlacitko--hlavni { flex: 1; }

.nahled { position: relative; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: var(--plocha-2); }
.nahled img { display: block; width: 100%; max-height: 46vh; object-fit: cover; }
.nahled__stav {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px;
    background: rgba(28, 22, 16, .72);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nahled__stav:empty { display: none; }

.hlaska {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--plocha-2);
    font-size: 13px;
    line-height: 1.5;
    color: var(--inkoust-tlum);
}

.uvodni-text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--inkoust-tlum); }
.uvodni-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--plocha-2);
}

/* Nápověda pod výběrem poskytovatele */
.napoveda { margin: -6px 0 12px; font-size: 13px; color: var(--inkoust-tlum); }

/* Výsledek bezpečnostní kontroly */
.kontrola { margin: 4px 0 0; font-size: 13px; }
.kontrola__radek { margin: 0 0 6px; line-height: 1.4; }
.kontrola__radek.je-ok { color: var(--zelena); }
.kontrola__radek.je-spatne { color: var(--nebezpeci); font-weight: 600; }
.kontrola__radek.je-vlazne { color: var(--zlata); }
.kontrola__kod { color: var(--inkoust-tlum); font-size: 12px; }

.detaily { margin-top: 4px; font-size: 13px; color: var(--inkoust-tlum); }
.detaily summary { cursor: pointer; padding: 6px 0; }
.detaily__obsah { padding: 6px 0 2px; }
.detaily__obsah ul { margin: 6px 0; padding-left: 18px; }

.tocitko {
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tocit .8s linear infinite;
    flex: none;
}
@keyframes tocit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tocitko { animation-duration: 2.4s; }
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(104px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 60;
    padding: 10px 16px;
    border-radius: var(--rohy-male);
    background: var(--inkoust);
    color: var(--papir);
    font-size: 14px;
    box-shadow: var(--stin);
    max-width: 88vw;
    text-align: center;
}