/* ============================================================================
   OBJ — vzhled objednavkove aplikace.

   Prevzato z odsouhlasene ukazky (grafit + firemni oranzova #FC4C02).
   Poznamky u jednotlivych pravidel vysvetluji, PROC je to tak — vetsina
   vznikla z konkretni zpetne vazby pri ladeni, ne z libovolne volby.
============================================================================ */
/* -------------------------------------------------------------------
     Jeden vizuální režim, záměrně. Grafit byl podle Jana příliš tmavý,
     takže „uprostřed" hledáme ze světlé strany: teplá šedá #EDEAE5 místo
     bílé KOSu. Nesvítí, protože to není bílá, a teplý podtón drží
     s firemní oranžovou #FC4C02 v jedné rodině.

     Text na oranžové je tmavý, ne bílý: bílá na #FC4C02 má kontrast
     jen 3,4:1 a drobné písmo by na ní bylo špatně čitelné.
  ------------------------------------------------------------------- */
  :root {
    /* Grafit — vybrano Janem. Neutraly jsou zamerne mirne do modra: proti
       teple oranzove #FC4C02 tim vznika kontrast tonu, ne jen svetlosti,
       a oranzova pusobi tepleji, aniz by musela krical cely obraz. */
    --ground:     #262A30;
    --surface:    #2F343B;
    --raised:     #383E46;

    --ink:        #F2F0ED;
    --ink-soft:   #AAB1BB;
    --ink-faint:  #9FA7B3;

    /* Oranzova slouzi jako VYPLN, ne jako drobne pismo — na grafitu ma
       kontrast 4,2:1, takze na 12px textu by byla spatne citelna. Text na
       ni je proto tmavy a samotna oranzova nese jen velka cisla. */
    --brand:      #FC4C02;
    --brand-text: #FC4C02;
    --on-brand:   #1A1613;
    --brand-dim:  rgba(252, 76, 2, .16);
    --brand-line: rgba(252, 76, 2, .55);

    --ok:         #6FCB98;
    --ok-dim:     rgba(111, 203, 152, .15);
    --line:       rgba(255, 255, 255, .10);
    --line-soft:  rgba(255, 255, 255, .055);
  }

  /* Pozn.: mezi :root a tímto pravidlem býval blok deklarací bez selektoru
     (zbytek po převodu z ukázky). Deklarace mimo pravidlo jsou neplatné,
     takže je prohlížeč přeskočil — a spolu s nimi i pravidlo pod nimi, tedy
     `box-sizing`. Aplikace proto počítala šířky bez odsazení. Smazáno
     2026-08-26; světlejší variantu grafitu Jan nechtěl zprovozňovat. */

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Hlavicka ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
  }
  .topbar-in {
    max-width: 1080px; margin: 0 auto;
    padding: 14px 24px 20px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .logo { height: 44px; width: auto; flex-shrink: 0; display: block; }

  .pobocka {
    margin-left: auto; display: flex; align-items: center; gap: 12px;
    font-size: 13.5px; color: var(--ink-soft);
  }
  .pobocka b { color: var(--ink); font-weight: 600; }
  .pobocka select {
    background: var(--raised); border: 1px solid var(--line); color: var(--ink);
    border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; max-width: 260px;
  }
  .pobocka select:hover { border-color: var(--brand-line); }
  .pobocka select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .odhlasit {
    background: none; border: 1px solid var(--line); color: var(--ink-soft);
    border-radius: 8px; padding: 7px 13px; font: inherit; font-size: 13px;
    cursor: pointer;
  }
  .odhlasit:hover { border-color: var(--ink-faint); color: var(--ink); }

  /* ---------- Obal ---------- */
  .obal { max-width: 1080px; margin: 0 auto; padding: 22px 24px 124px; }

  /* ---------- Ovladaci pas ---------- */
  .ovladani {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    padding: 16px 20px;
    margin-bottom: 10px;
  }
  .skupina-spotreba { flex-shrink: 0; }

  .label {
    display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
    text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 8px;
  }

  /* ---------- Vyber dne: tri tydny vedle sebe ---------- */
  .dny-hlava {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 11px; flex-wrap: wrap;
  }
  .dny-hlava .label { margin: 0; }
  .tyden-ovladani { display: flex; align-items: center; gap: 6px; }
  .tyden-ovladani .nazev {
    font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; padding: 0 2px;
  }
  .krok-tydne {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--raised); border: 1px solid var(--line);
    color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .krok-tydne:hover:not(:disabled) { border-color: var(--brand-line); color: var(--brand); }
  .krok-tydne:disabled { opacity: .3; cursor: not-allowed; }

  .tydny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tyden-blok { min-width: 0; }
  .tyden-label {
    display: block; font-size: 11px; color: var(--ink-faint);
    letter-spacing: .03em; margin-bottom: 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .tyden-dny { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .den {
    background: var(--raised); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 3px 7px; min-height: 46px;
    cursor: pointer; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font: inherit;
  }
  .den .dt {
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .den .cislo { font-family: Archivo, system-ui, sans-serif; font-weight: 600; font-size: 14px; }
  .den[aria-pressed="true"] .dt { color: rgba(255,255,255,.75); }
  .den:hover:not(:disabled):not([aria-pressed="true"]) {
    border-color: var(--brand-line); color: var(--brand-text);
  }
  /* Vybrany den ma oranzove pozadi — hover ho jen zesvetli, barva textu zustava */
  .den[aria-pressed="true"]:hover { filter: brightness(1.12); }
  .den[aria-pressed="true"] {
    background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  }
  /* Nedostupny den zamerne NENI disabled — potreboval by reagovat na mys
     i na Tab, aby mohl vysvetlit, proc zvolit nejde. Viz objednavka.html. */
  .den:disabled,
  .den[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }


  .ik-info {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--ink-faint); color: var(--ink-faint);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 10px; font-weight: 700; font-style: italic;
    text-transform: none; letter-spacing: 0; cursor: help;
    margin-left: 5px;
    /* Zarovnani na stred radku textu. Samotne vertical-align: middle sedi na
       stred malych pismen, tedy asi o 0,125 em niz, nez je opticky stred
       radku — proto dorovnavaci posun. V em, aby platil pri kazde velikosti. */
    vertical-align: middle; position: relative; top: -0.125em;
  }
  .ik-info:hover, .ik-info:focus-visible {
    border-color: var(--brand-line); color: var(--brand-text);
  }

  /* -------------------------------------------------------------------
     Informacni policka

     Zamerne NE atribut title. Ten se na dotykovem zarizeni nezobrazi
     vubec — a pobocky budou objednavat i z tabletu, takze by prave tam
     zmizela treba informace o alergenech. Vlastni bublina se otevira
     klepnutim, najetim i z klavesnice.

     Spoustec je vzdy <button>, ne <span>: prohlizec ho sam zaradi do
     prochazeni Tabem a precte ho hlasovy odecitac.
  ------------------------------------------------------------------- */
  .np {
    /* Kdyz je spoustecem samotna ikonka "i", dedi vzhled z .ik-info.
       Reset kvuli tomu, ze je to button. */
    appearance: none; background: none; padding: 0;
    font: inherit; color: inherit; cursor: help;
  }
  .np:focus { outline: none; }
  .np:focus-visible {
    outline: 2px solid var(--brand-line); outline-offset: 2px;
    border-radius: 4px;
  }

  /* Podtrzeni tam, kde je spoustecem text (napr. popisek sloupce) —
     jinak by nebylo poznat, ze se da otevrit. */
  .np-text {
    border-bottom: 1px dotted var(--ink-faint);
    padding-bottom: 1px;
  }
  .np-text:hover { border-bottom-color: var(--brand-line); }

  .np-bublina {
    position: fixed; z-index: 90; max-width: 300px;
    /* Bez tohohle se k sirce pricte odsazeni i ram (celkem 28 px) a na uzkem
       displeji by bublina presahla za hranu. */
    box-sizing: border-box;
    padding: 11px 13px; border-radius: 10px;
    background: var(--raised); border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color: var(--ink); font-size: 12.5px; line-height: 1.5;
    /* Umoznuje dvouodstavcovy text — u alergenu je na prvnim radku vypis
       konkretniho jidla a pod nim obecne vysvetleni cislovani. */
    white-space: pre-line;
    /* Neviditelna pro mys, aby najeti na bublinu nezavrelo to, co ji
       vyvolalo, a zaroven aby neprekazela kliknuti pod ni. */
    pointer-events: none;
  }
  .np-bublina[hidden] { display: none; }

  /* Na uzkych displejich se bublina roztahne pres sirku obsahu — 300 px
     by se na 360px mobilu nevesly bez presahu. */
  @media (max-width: 420px) {
    .np-bublina { max-width: calc(100vw - 24px); }
  }

  .napoveda { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; line-height: 1.45; max-width: 46ch; }
  .napoveda b { color: var(--ink-soft); font-weight: 500; }

  /* ---------- Seznam jidel ---------- */
  .hlavicka-seznamu {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 18px; margin: 0 0 8px;
  }
  h2 {
    font-family: Archivo, system-ui, sans-serif;
    font-weight: 600; font-size: 19px; margin: 0; letter-spacing: -.01em;
  }
  .pocet { font-size: 13px; color: var(--ink-faint); }

  .seznam {
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden; background: var(--surface);
  }
  .jidlo {
    display: grid;
    grid-template-columns: 1fr 96px 74px 128px;
    align-items: center; gap: 16px;
    padding: 11px 18px;
    border-top: 1px solid var(--line-soft);
  }
  .jidlo:first-child { border-top: none; }
  .jidlo.ma-kus { background: var(--brand-dim); box-shadow: inset 3px 0 0 var(--brand); }

  .jidlo-nazev { font-weight: 500; }
  .jidlo-pod { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

  /* ---------- Znacky: listecek = vegetarianske, kolecko = alergeny ----------
     Samotny text zabiral na radku moc mista, popis se proto vypise az po
     najeti mysi. Cislo u kolecka rika, kolik alergenu jidlo obsahuje. */
  .ik {
    display: inline-flex; align-items: center; gap: 2px;
    cursor: help; flex-shrink: 0;
    /* Zarovnani na stred radku textu. Samotne vertical-align: middle sedi na
       stred malych pismen, tedy asi o 0,125 em niz, nez je opticky stred
       radku — proto dorovnavaci posun. V em, aby platil pri kazde velikosti. */
    vertical-align: middle; position: relative; top: -0.125em;
  }
  .ik svg { width: 15px; height: 15px; display: block; }
  /* Vege jako plny zeleny odznak — obrysovy listecek se na tmavem pozadi
     ztracel, plocha barvy je videt hned pri prejezdu oka */
  .ik-veg {
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--ok); color: var(--ground);
    justify-content: center;
  }
  .ik-veg svg { width: 12px; height: 12px; }
  .ik-pred { margin-left: 0; margin-right: 6px; }
  .ik-alg { color: var(--ink-faint); margin-left: 7px; }
  /* Tady znacka nestoji u textu, ale je samostatnou polozkou radku, ktery uz
     centruje sam (align-items: center). Dorovnani na opticky stred textu se
     proto musi vypnout — jinak znacku vytlaci nad osu ostatnich prvku. */
  .taska-info .ik, .karta-k-info .ik { margin-left: 0; top: 0; }

  .zbyva {
    justify-self: start;
    background: var(--ok-dim); color: var(--ok);
    border-radius: 7px; padding: 3px 9px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    cursor: help;
  }
  .cena { text-align: right; font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }

  .stepper { display: flex; align-items: center; gap: 4px; justify-self: end; }
  .stepper button {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--raised); border: 1px solid var(--line);
    color: var(--ink); font: inherit; font-size: 16px; cursor: pointer;
    display: grid; place-items: center;
  }
  .stepper button:hover:not(:disabled) { border-color: var(--brand-line); color: var(--brand); }
  .stepper button:disabled { opacity: .35; cursor: not-allowed; }
  .stepper input {
    width: 44px; height: 36px; text-align: center;
    background: var(--ground); border: 1px solid var(--line);
    border-radius: 8px; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
  }
  .stepper input:focus-visible, .den:focus-visible, .odhlasit:focus-visible,
  .stepper button:focus-visible, .krok-tydne:focus-visible,
  #trv-pas button:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
  }

  /* ---------- Pas cisel 1-20 ----------
     Stejna vizualni rec jako prepinac zobrazeni: spojena tlacitka v ramecku,
     aktivni je oranzove. Misto klikani plusem se cilova hodnota vybere hned. */
  /* Jen mezera, bez linky. Vysku i okraje drzi puvodni, aby se rozestupy
     mezi volbou zavozu a volbou trvanlivosti nezmenily. */
  .oddel { height: 1px; margin: 16px 0 14px; }

  .trvanlivost-pas {
    display: grid; grid-template-columns: repeat(20, 1fr);
    border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  }
  .trvanlivost-pas button {
    padding: 8px 0; font: inherit; font-size: 12.5px; cursor: pointer;
    background: var(--raised); color: var(--ink-soft);
    border: none; border-left: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
  }
  .trvanlivost-pas button:first-child { border-left: none; }
  .trvanlivost-pas button:hover[aria-pressed="false"] { background: var(--surface); color: var(--brand-text); }
  .trvanlivost-pas button[aria-pressed="true"] {
    background: var(--brand); color: var(--on-brand); font-weight: 700;
  }
  #trv-pas button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

  /* ---------- Prepinac zobrazeni ---------- */
  .hlavicka-vpravo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .prepinac-zobrazeni { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .prepinac-zobrazeni button {
    padding: 6px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
    background: var(--surface); color: var(--ink-soft); border: none;
    border-left: 1px solid var(--line);
  }
  .prepinac-zobrazeni button:first-child { border-left: none; }
  .prepinac-zobrazeni button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: 600; }
  .prepinac-zobrazeni button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

  /* ---------- Dlazdice ----------
     Misto na fotku je vyhrazene uz teď — az budou fotky jidel, jen se
     vlozi misto pocatecni litery. */
  .dlazdice {
    display: grid; gap: 12px;
    /* min(...) ze stejneho duvodu jako u .kompakt — aby dlazdice mohla byt
       uzsi nez 198 px, kdyz je displej opravdu maly. */
    grid-template-columns: repeat(auto-fill, minmax(min(198px, 100%), 1fr));
  }
  .taska {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .taska.ma-kus { border-color: var(--brand-line); box-shadow: inset 0 0 0 1px var(--brand-line); }
  .foto {
    aspect-ratio: 1 / 1; background: var(--raised);
    display: grid; place-items: center; border-bottom: 1px solid var(--line);
  }
  .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .foto .znak { width: 46%; height: 46%; display: block; }
  .foto span {
    font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 34px;
    color: var(--ink-faint); opacity: .45;
  }
  .taska-telo { padding: 11px 13px 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  /* Nazev ma prostor na tri radky, at se nemusi zkracovat */
  .taska-nazev { font-size: 13.5px; font-weight: 500; line-height: 1.35; flex: 1; }
  .taska-info { display: flex; align-items: center; gap: 8px; font-size: 11.5px; flex-wrap: wrap; }
  /* Volba mnozstvi az na spodni hrane, oddelena linkou — nad ni tak zbyde
     misto na dlouhy nazev, aniz by se karty rozjizdely do vysky */
  .taska-spod {
    margin: 4px -13px 0; padding: 9px 13px;
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .taska .cena { font-size: 13.5px; }
  .taska .stepper button { width: 30px; height: 30px; font-size: 14px; border-radius: 7px; }
  .taska .stepper input { width: 34px; height: 30px; font-size: 13.5px; border-radius: 7px; }
  .taska .veg { margin-left: 5px; font-size: 9px; padding: 1px 5px; }

  /* ---------- Kompakt: mala fotka vlevo, dve az tri karty do radku ---------- */
  .kompakt {
    display: grid; gap: 8px;
    /* min(330px, 100%) zamerne: na uzkem displeji je obsah sirsi nez okno
       a samotne minmax(330px, 1fr) by sloupec nezmensilo — karta by presahla
       (na mobilu 375 px o 3 px). Tenhle zapis dovoli sloupci zuzit se pod
       330 px, kdyz vic mista neni. */
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  }
  .karta-k {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 10px 8px 8px;
    display: flex; align-items: stretch; gap: 11px;
  }
  .karta-k.ma-kus { border-color: var(--brand-line); box-shadow: inset 0 0 0 1px var(--brand-line); }
  /* Fotka o 20 % vetsi — az budou fotky jidel, nahradi pocatecni literu */
  .foto-k {
    width: 62px; height: 62px; flex-shrink: 0; border-radius: 8px;
    background: var(--raised); display: grid; place-items: center; align-self: center;
  }
  .foto-k img { width: 100%; height: 100%; object-fit: cover;
                border-radius: 8px; display: block; }
  .foto-k .znak { width: 54%; height: 54%; display: block; }
  .foto-k span {
    font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 23px;
    color: var(--ink-faint); opacity: .45;
  }
  .karta-k-telo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
                  justify-content: center; }
  /* Nazev smi na dva radky — dlouhe nazvy jako "Plnene bramborove knedliky
     uzenym masem" se na jeden radek nevejdou a zkraceni tri tecky nepomuze */
  .karta-k-nazev {
    font-size: 13px; font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    /* Odznak vege je vyssi nez radek, takze ho overflow: hidden (nutny pro
       zkraceni na dva radky) shora orezaval. Odsazeni posune orezovou hranu
       nahoru, zaporny okraj vrati text presne tam, kde byl. */
    padding-top: 4px; margin-top: -4px;
  }
  .karta-k-info { display: flex; align-items: center; gap: 9px; font-size: 11px; }
  .karta-k-info .cena { font-size: 11.5px; }
  .karta-k-info .zbyva { font-size: 11px; padding: 2px 7px; }
  .karta-k .veg { margin-left: 5px; font-size: 9px; padding: 1px 5px; }
  .karta-k-info .stepper { margin-left: auto; }
  .karta-k .stepper button { width: 30px; height: 30px; font-size: 14px; border-radius: 7px; }
  .karta-k .stepper input { width: 34px; height: 30px; font-size: 13.5px; border-radius: 7px; }

  /* ---------- Zvetsena fotka ---------- */
  .lze-zvetsit { cursor: zoom-in; }
  .prekryv {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 17, 20, .88);
    display: grid; place-items: center; padding: 32px;
  }
  .prekryv[hidden] { display: none; }
  .prekryv figure { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .prekryv img {
    max-width: min(88vw, 640px); max-height: 76vh; width: auto; height: auto;
    border-radius: 14px; display: block; box-shadow: 0 18px 48px rgba(0,0,0,.5);
  }
  .prekryv figcaption {
    font-family: Archivo, system-ui, sans-serif; font-weight: 600; font-size: 16px;
    color: var(--ink); text-align: center; max-width: 40ch;
  }
  .zavrit {
    position: absolute; top: 18px; right: 20px;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink); font: inherit; font-size: 17px; cursor: pointer;
  }
  .zavrit:hover { border-color: var(--brand-line); color: var(--brand-text); }
  .zavrit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* ---------- Souhrn ---------- */
  .souhrn {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .souhrn-in {
    max-width: 1080px; margin: 0 auto; padding: 13px 24px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  }
  .souhrn-cislo { display: flex; flex-direction: column; }
  .souhrn-cislo .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
  .souhrn-cislo .v { font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.25; }
  .souhrn-cislo .v.brand { color: var(--brand-text); }
  .odeslat {
    margin-left: auto;
    background: var(--brand); color: var(--on-brand);
    border: none; border-radius: 10px; padding: 13px 26px;
    font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 15px;
    cursor: pointer; min-height: 46px;
  }
  .odeslat:hover { filter: brightness(1.06); }
  /* aria-disabled, ne disabled — jinak by tlacitko neukazalo napovedu. */
  .odeslat:disabled,
  .odeslat[aria-disabled="true"] {
    background: var(--raised); color: var(--ink-faint);
    cursor: not-allowed; filter: none;
  }
  .odeslat[aria-disabled="true"]:hover { filter: none; }

  .mimo-plan { padding: 26px 22px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
  .mimo-plan b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

  .odlozeno {
    background: rgba(252, 76, 2, .10); border: 1px solid var(--brand-line);
    color: var(--ink); border-radius: 10px; padding: 11px 16px;
    font-size: 13.5px; margin: 0 0 14px;
  }



  @media (max-width: 860px) {
    .skupina-dny { min-width: 100%; }
    .jidlo { grid-template-columns: 1fr auto; gap: 6px 14px; }
    .cena { grid-column: 1; text-align: left; }
    .stepper { grid-row: 1 / 3; grid-column: 2; }
    .duvod { grid-column: 1 / -1; }
  }

  /* =====================================================================
     Obrazovka nastaveni

     Zamerne stridma: je to sprava, ne kazdodenni prace. Zadne karty ani
     ramecky kolem vseho — radky s hairline oddelovacem se ctou lip pri
     osmi pobockach a desitkach lidi.
  ===================================================================== */
  .odkaz-sekce {
    background: none; border: 1px solid transparent; color: var(--ink-soft);
    border-radius: 8px; padding: 7px 11px; font-size: 13px;
    text-decoration: none;
  }
  .odkaz-sekce:hover { color: var(--ink); border-color: var(--line); }
  .odkaz-sekce.aktivni { color: var(--ink); border-color: var(--brand-line); }

  .nastaveni .blok { margin-bottom: 30px; }
  .nastaveni .blok-hlava {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .nastaveni h2 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
  .nastaveni h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
  .nastaveni .drobne { font-size: 12px; color: var(--ink-faint); font-style: normal; }

  .podnadpis {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; color: var(--ink-faint); letter-spacing: .03em;
    margin: 18px 0 7px;
  }
  .jen-cteni {
    font-size: 10.5px; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
  }

  .pravidla {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  }
  .pole { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          background: var(--surface); border: 1px solid var(--line);
          border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
          color: var(--ink-soft); }
  .pole.svisle { flex-direction: column; align-items: stretch; gap: 6px;
                 background: none; border: none; padding: 0; margin-bottom: 14px; }
  .pole .dvojice { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
  .pole em { font-size: 11.5px; color: var(--ink-faint); font-style: normal; }
  .pole input[type="number"], .pole input[type="text"] {
    background: var(--raised); border: 1px solid var(--line); color: var(--ink);
    border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px;
    width: 62px; text-align: right;
  }
  .pole.svisle input[type="text"] { width: 100%; text-align: left; }
  .pole input:disabled { opacity: .55; cursor: not-allowed; }
  .pole input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

  .tabulka { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .tab-hlava, .tab-radek {
    display: grid; grid-template-columns: 1fr 190px 84px 96px;
    gap: 12px; align-items: center; padding: 9px 14px;
  }
  .tab-hlava.lide, .tab-radek.lide {
    grid-template-columns: 1.1fr 1.1fr 108px 1.2fr 148px;
  }
  .tab-hlava {
    background: var(--surface); font-size: 11px; color: var(--ink-faint);
    border-bottom: 1px solid var(--line);
  }
  .tab-radek { border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13px; }
  .tab-radek:last-child { border-bottom: none; }
  .tab-radek:hover { background: rgba(255, 255, 255, .02); }
  .tab-radek .nazev { color: var(--ink); display: flex; align-items: center;
                      gap: 8px; flex-wrap: wrap; min-width: 0; }
  .vpravo { text-align: right; justify-self: end; }
  .nastaveni .cislo {
    background: var(--raised); border: 1px solid var(--line); color: var(--ink);
    border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px;
    width: 72px; text-align: right;
  }
  .nastaveni .cislo:disabled { opacity: .55; }
  .nastaveni .cislo:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

  .dny { display: flex; gap: 4px; }
  .den-volba {
    background: var(--raised); border: 1px solid var(--line); color: var(--ink-faint);
    border-radius: 6px; width: 32px; height: 27px; font: inherit; font-size: 11.5px;
    cursor: pointer;
  }
  .den-volba[aria-pressed="true"] {
    background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  }
  .den-volba:disabled { cursor: not-allowed; opacity: .6; }
  .den-volba:not(:disabled):hover { border-color: var(--brand-line); }
  .den-volba:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

  /* Zluta, ne cervena: chybejici zavoz je u Brna spravny stav, ne chyba. */
  .varovani { font-size: 10.5px; color: #EF9F27; }

  .uroven { font-size: 11px; }
  .uroven-obsluha    { color: var(--brand-text); }
  .uroven-spravce    { color: var(--brand-text); }
  .uroven-podspravce { color: #EF9F27; }
  .uroven-pobocka    { color: var(--ink-faint); }

  .btn-pridat, .btn-drobny, .btn-ulozit, .btn-zrusit {
    background: none; border: 1px solid var(--line); color: var(--ink-soft);
    border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px;
    cursor: pointer;
  }
  .btn-pridat { margin-left: auto; }
  .btn-pridat:hover, .btn-drobny:hover, .btn-zrusit:hover {
    border-color: var(--brand-line); color: var(--ink);
  }
  .btn-drobny.nebezpecny:hover { border-color: rgba(226, 75, 74, .6); color: #F09595; }
  .btn-ulozit {
    background: var(--brand); border-color: var(--brand); color: var(--on-brand);
    font-weight: 600;
  }
  .btn-ulozit:hover { filter: brightness(1.06); }

  /* Zaves NENI position: fixed — obrazovka nastaveni je kratka a fixed by
     na mobilu skakal pri rolovani. */
  .zaves {
    position: absolute; inset: 0; z-index: 80;
    background: rgba(0, 0, 0, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 60px 16px;
  }
  .zaves[hidden] { display: none; }
  .okno {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 13px; padding: 20px 22px; width: 100%; max-width: 460px;
  }
  .urovne { display: flex; gap: 6px; }
  .urovne button {
    flex: 1; background: var(--raised); border: 1px solid var(--line);
    color: var(--ink-soft); border-radius: 7px; padding: 7px 8px;
    font: inherit; font-size: 12px; cursor: pointer;
  }
  .urovne button[aria-pressed="true"] {
    background: var(--brand); border-color: var(--brand);
    color: var(--on-brand); font-weight: 600;
  }
  .volba-pobocek {
    display: grid; gap: 5px; max-height: 190px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  }
  .volba-pobocek label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--ink); cursor: pointer;
  }
  #blok-pobocek[hidden] { display: none; }
  .chyba-okna {
    background: rgba(200, 60, 60, .14); border: 1px solid rgba(200, 60, 60, .4);
    color: #ffb4b4; border-radius: 8px; padding: 9px 11px;
    font-size: 12.5px; margin: 0 0 12px;
  }
  .chyba-okna[hidden] { display: none; }
  .okno-spod { display: flex; justify-content: flex-end; gap: 8px; }

  .hlaseni.dobre {
    background: var(--ok-dim); border: 1px solid rgba(111, 203, 152, .4);
    color: var(--ok);
  }
  .nastaveni .hlaseni { margin-bottom: 14px; }
  .hlaseni[hidden] { display: none; }

  /* -------------------------------------------------------------------
     Nastaveni na uzkem displeji

     Tabulky maji pevne sloupce (190 + 84 + 96 px a mezery), coz se pod
     ~640 px nevejde a bunky by presahly. Pod touto hranici se radek slozi
     pod sebe a popisky se doplni z atributu — jinak by u samotneho cisla
     nebylo poznat, jestli je to minimum v kusech, nebo v korunach.

     Sprava se dela u stolu, ne v provozu, takze tady staci, aby to slo
     pouzit — ne aby to bylo pohodlne.
  ------------------------------------------------------------------- */
  @media (max-width: 640px) {
    .tab-hlava { display: none; }
    .tab-radek, .tab-radek.lide {
      grid-template-columns: 1fr;
      gap: 8px; padding: 12px 14px;
    }
    .tab-radek .vpravo { justify-self: stretch; text-align: left; }
    .tab-radek .vpravo::before,
    .tab-radek .uroven::before {
      content: attr(data-popis); display: block;
      font-size: 10.5px; color: var(--ink-faint); margin-bottom: 3px;
    }
    .nastaveni .cislo { width: 100%; text-align: left; }
    .pravidla { grid-template-columns: 1fr; }
    .zaves { padding: 20px 12px; }
  }

  /* Stav prenosu ze serveru. Vidi ho jen nase obsluha. */
  .stav-prenosu {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 13px; margin-bottom: 18px;
    font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
  }
  .stav-prenosu b { color: var(--ink); font-weight: 600; }
  .stav-prenosu .drobne { display: block; margin-top: 3px; }
  .stav-znacka {
    display: grid; place-items: center; flex-shrink: 0;
    width: 19px; height: 19px; border-radius: 50%;
    font-size: 11px; font-weight: 700; margin-top: 1px;
  }
  .stav-prenosu.dobre  { border-color: rgba(111, 203, 152, .32); }
  .stav-prenosu.dobre  .stav-znacka { background: var(--ok-dim); color: var(--ok); }
  /* Zluta, ne cervena: nekolikahodinova prodleva jeste nemusi byt porucha. */
  .stav-prenosu.vlazny { border-color: rgba(239, 159, 39, .38); }
  .stav-prenosu.vlazny .stav-znacka { background: rgba(239, 159, 39, .16); color: #EF9F27; }
  .stav-prenosu.chyba  { border-color: rgba(226, 75, 74, .45); }
  .stav-prenosu.chyba  .stav-znacka { background: rgba(226, 75, 74, .18); color: #F09595; }