/* Talíř — vzhled.
   Pravidla, kterých se držím všude:
   1. Žádné ikony. Rozhraní je jen typografie.
   2. Žádné zaoblení, žádné stíny, žádné karty. Jen vlásové linky.
   3. Čísla a popisky monospace, názvy jídel bezpatkové.
   4. Jediná barevná plocha v aplikaci je hladina dne na pozadí. */

:root {
  --bg: #08080a;
  --fg: #f2f2ee;
  --dim: #75757e;
  --dim2: #4a4a52;
  --line: #1b1b20;
  --line2: #2a2a31;
  --akcent: #d4ff3f;
  --varovani: #ff5c3d;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --lista: 62px;
  --sloupec: 620px;   /* šířka obsahu i hladiny na širokém okně */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Vlastní display v třídách níž by jinak přebil atribut hidden. */
[hidden] { display: none !important; }

html { background: var(--bg); }

body {
  position: relative;      /* kotva pro #hladina */
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* ── Hladina dne ─────────────────────────────────────────────────
   Pozadí se plní zdola. Plná obrazovka = denní cíl v kcal.
   Je to jediná grafika v aplikaci a nese hlavní informaci. */

/* Ukotvená k první obrazovce, ne k oknu. Kdyby byla fixed, zůstane hladina
   při scrollování viset uprostřed seznamu jídel a čte se jako oddělovač
   sekce. Takhle při scrollu odjede nahoru spolu s obsahem.

   Šířka je stejná jako u obsahu (--sloupec). Na mobilu to vyjde na celou
   obrazovku, na širokém okně se hladina drží sloupce s jídly — jinak by
   limetková plocha běžela přes celý monitor, zatímco text sedí v úzkém
   proužku uprostřed, a nečetlo by se to jako jedna věc. */
#hladina {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--sloupec);
  height: 100svh;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}

#hladina-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(to top, rgba(212, 255, 63, 0.14), rgba(212, 255, 63, 0.015));
  border-top: 1px solid var(--akcent);
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s, background 0.35s;
}

body.prekroceno #hladina-fill {
  background: linear-gradient(to top, rgba(255, 92, 61, 0.16), rgba(255, 92, 61, 0.02));
  border-top-color: var(--varovani);
}

@media (prefers-reduced-motion: reduce) {
  #hladina-fill { transition: none; }
}

/* ── Kostra ──────────────────────────────────────────────────── */

#app, #v-vstup { position: relative; z-index: 1; }

#app {
  display: flex; flex-direction: column;
  min-height: 100svh;
  padding-bottom: calc(var(--lista) + env(safe-area-inset-bottom));
}

.pohled { flex: 1; padding: 0 20px; }

/* ── Hlavička s datem ────────────────────────────────────────── */

.hlava {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 0 18px;
}
.hlava.jednoducha { justify-content: flex-start; }
.hlava h2 {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}

.sipka {
  font: 300 26px/1 var(--mono);
  color: var(--dim2);
  padding: 6px 14px; margin: -6px -14px;
}
.sipka:active { color: var(--fg); }
.sipka[disabled] { opacity: 0.25; }

.datum { text-align: center; }
.datum-dow {
  display: block;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.28em; color: var(--dim);
  margin-bottom: 5px;
}
.datum-cislo {
  font: 400 14px/1 var(--mono);
  letter-spacing: 0.06em;
}

/* ── Souhrn dne ──────────────────────────────────────────────── */

.souhrn { padding-bottom: 26px; }

.velke {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
#s-kcal {
  font-size: clamp(58px, 21vw, 96px);
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.velke .jed {
  font-size: 11px; letter-spacing: 0.22em; color: var(--dim);
}

.podtitul {
  margin-top: 10px;
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
}
.podtitul .prekrocil { color: var(--varovani); }

/* Stuha maker: jeden proužek rozdělený podle podílu energie. */
.stuha {
  display: flex; gap: 2px; height: 9px; margin-top: 22px;
  background: var(--line);
}
.seg { display: block; height: 100%; width: 0; transition: width 0.5s ease; }
.seg-b { background: var(--akcent); }
.seg-s { background: #8b8b95; }
.seg-t { background: #43434c; }
@media (prefers-reduced-motion: reduce) { .seg { transition: none; } }

.stuha-popis {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 9px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.12em; color: var(--dim);
}
.stuha-popis b { font-weight: 400; color: var(--fg); }
.stuha-popis span:nth-child(1) b { color: var(--akcent); }

.mini {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.mini > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.mini dt {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.mini dd {
  font: 400 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
#r-tekute dt { padding-left: 14px; position: relative; }
#r-tekute dt::before {
  content: "└"; position: absolute; left: 0; top: -1px; color: var(--dim2);
}
#r-tekute.moc dt, #r-tekute.moc dd { color: var(--varovani); }

/* ── Seznam jídel ────────────────────────────────────────────── */

.seznam { padding-bottom: 30px; }

.sekce-hlava {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 0 8px;
  border-bottom: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}
.sekce-hlava b {
  font-weight: 400; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

.polozka {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  width: 100%; text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.polozka:active { background: rgba(255, 255, 255, 0.03); }
.polozka .nazev { font-size: 15px; }
.polozka .pod {
  display: block; margin-top: 3px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.polozka .kcal {
  flex: none;
  font: 400 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.prazdno {
  padding: 46px 0;
  text-align: center;
  font: 400 11px/1.8 var(--mono);
  letter-spacing: 0.14em; color: var(--dim2);
}

/* ── Spodní lišta ────────────────────────────────────────────── */

.lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--lista) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: 1fr 1fr auto 1fr; align-items: center;
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line2);
}
.lista button {
  height: 100%;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}
.lista button.akt { color: var(--fg); }
.lista button { letter-spacing: 0.18em; }
.lista .plus {
  font: 200 30px/1 var(--mono);
  color: var(--akcent);
  padding: 0 26px;
  letter-spacing: 0;
}
.lista .plus:active { opacity: 0.5; }

/* ── Já ──────────────────────────────────────────────────────── */

.blok { padding: 6px 0 30px; }
.nadpis {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line2);
}

/* ── Chybějící jídla ─────────────────────────────────────────── */

.chybi { margin-top: 24px; border-top: 1px solid var(--line2); }
.chybi-radek {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.chybi-radek .doplnit { color: var(--akcent); letter-spacing: 0.16em; }
.chybi-radek:active { background: rgba(255, 255, 255, 0.03); }

/* ── Graf dnů ────────────────────────────────────────────────── */

.graf {
  display: flex; align-items: flex-end; gap: 2px;
  height: 130px; margin-top: 22px;
  border-bottom: 1px solid var(--line2);
}
.graf .sl {
  flex: 1; min-width: 3px; min-height: 2px;
  background: var(--line2);
}
.graf .sl.ok { background: var(--akcent); }
.graf .sl.pres { background: var(--varovani); }

.graf-popis {
  margin-top: 9px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.08em; color: var(--dim2);
}

#v-prehled .prepinac { margin-top: 4px; }
#v-prehled .dvojice { margin-top: 18px; }
#v-prehled .podtitul { margin-top: 18px; }
#v-prehled .mini { margin-top: 26px; margin-bottom: 30px; }

/* ── Formuláře ───────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 18px; }
.form.mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.form.mrizka .siroke, .form.mrizka .ok { grid-column: 1 / -1; }

.pole { display: block; }
.pole > span {
  display: block; margin-bottom: 7px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.pole input, .pole select {
  display: block; width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line2);
  border-radius: 0;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: 16px;               /* 16px = iOS nezoomuje při focusu */
  font-variant-numeric: tabular-nums;
  outline: none;
  appearance: none;
}
.pole input[type="text"] { font-family: var(--sans); }
.pole input:focus, .pole select:focus { border-bottom-color: var(--akcent); }
.pole select { background-image: none; }

.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctverice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }

.prepinac { display: flex; border: 1px solid var(--line2); }
.prepinac button {
  flex: 1; padding: 9px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--dim);
}
.prepinac button.akt { background: var(--fg); color: var(--bg); }

.vic summary {
  list-style: none; cursor: pointer;
  padding: 4px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.vic summary::-webkit-details-marker { display: none; }
.vic summary::before { content: "+ "; color: var(--dim2); }
.vic[open] summary::before { content: "− "; }
.vic[open] summary { margin-bottom: 16px; }

.hlavni {
  display: block; width: 100%;
  padding: 15px 0;
  background: var(--akcent); color: #000;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.24em;
}
.hlavni:active { opacity: 0.75; }

/* Výsledek výpočtu cíle — vypadá jako výpis, ne jako karta. */
.vypocet {
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  padding: 12px 0;
  font: 400 11px/1.9 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; color: var(--dim);
}
.vypocet .radek { display: flex; justify-content: space-between; gap: 12px; }
.vypocet b { font-weight: 400; color: var(--fg); }
.vypocet .cil b { color: var(--akcent); }
.vypocet .pozn {
  display: block; margin-top: 8px;
  line-height: 1.6; color: var(--dim2);
  letter-spacing: 0.02em;
}
.vypocet .pozn.varuj { color: var(--varovani); }

.druhotne {
  display: block; width: 100%;
  padding: 13px 0;
  border: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg);
}
.druhotne:active { background: rgba(255, 255, 255, 0.06); }
.druhotne[disabled] { color: var(--dim2); border-color: var(--line); }

.nadpis.odsazeny { margin-top: 16px; }

.smazat {
  padding: 15px 18px;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.18em; color: var(--varovani);
}

.odkaz {
  align-self: flex-start;
  padding: 4px 0;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
  border-bottom: 1px solid var(--line2);
}

/* ── Souhlas se zpracováním ──────────────────────────────────── */

.souhlas {
  display: flex; gap: 11px; align-items: flex-start;
  font: 400 11px/1.65 var(--mono);
  letter-spacing: 0.03em; color: var(--dim);
  cursor: pointer;
}
.souhlas input {
  flex: none;
  width: 17px; height: 17px; margin-top: 1px;
  appearance: none;
  border: 1px solid var(--line2);
  background: transparent;
  border-radius: 0;
  display: grid; place-content: center;
}
.souhlas input:checked { background: var(--akcent); border-color: var(--akcent); }
.souhlas input:checked::after {
  content: "×"; color: #000;
  font: 400 15px/1 var(--mono);
}
.souhlas input:focus-visible { outline: 1px solid var(--akcent); outline-offset: 2px; }

.vic-odkaz {
  padding: 0; color: var(--fg);
  font: inherit;
  border-bottom: 1px solid var(--line2);
}

/* ── Pozvánky a obnovovací kód ───────────────────────────────── */

.pozvanka-odkaz {
  margin-top: 16px; padding: 14px 0;
  border-top: 1px solid var(--akcent);
  border-bottom: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 12px;
}
.pozvanka-odkaz code {
  font: 400 12px/1.6 var(--mono);
  color: var(--akcent);
  word-break: break-all;
  user-select: all;
}
.pozvanka-odkaz code.velky-kod {
  font-size: 20px; letter-spacing: 0.14em; word-break: normal;
}
.pozvanka-odkaz .pozn {
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.04em; color: var(--dim2);
}

.seznam-pozvanek { margin-top: 18px; }
.pozvanka-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.pozvanka-radek button {
  flex: none;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.12em; color: var(--varovani);
}

.uvod-pozvanka {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--dim);
  margin-bottom: 4px;
}

.druhotne.odsazeny-nahoru { margin-top: 24px; }

/* ── Patička ─────────────────────────────────────────────────── */

.paticka {
  position: relative; z-index: 1;
  padding: 34px 20px 26px;
  text-align: center;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--dim2);
}
.paticka a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line2); }
.vstup .paticka { padding-bottom: 0; margin-top: 40px; }

/* ── Volba způsobu zápisu ────────────────────────────────────── */

.velke-tlacitko {
  display: block; width: 100%; text-align: left;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.velke-tlacitko:first-child { border-top: 1px solid var(--line); }
.velke-tlacitko:active { background: rgba(255, 255, 255, 0.03); }
.vt-nazev {
  display: block;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.22em; color: var(--akcent);
}
.vt-popis {
  display: block; margin-top: 8px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--dim);
}

/* ── Potvrzení odhadu ────────────────────────────────────────── */

.odhad-uvod {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55;
  color: var(--dim);
  padding-bottom: 4px;
}

.odhad-polozky { display: flex; flex-direction: column; }

.odhad-radek {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 76px 76px 26px;
  gap: 10px;
  align-items: end;
}
.odhad-radek .pole > span { margin-bottom: 5px; }
.odhad-radek .smaz-radek {
  font: 200 20px/1 var(--mono); color: var(--dim2);
  padding-bottom: 7px;
}
.odhad-radek .smaz-radek:active { color: var(--varovani); }
.odhad-radek.nejisty .pole:nth-child(2) input { border-bottom-color: var(--varovani); }

.odhad-znacka {
  grid-column: 1 / -1;
  margin-top: -4px;
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--varovani);
}

.odhad-soucet {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
}
.odhad-soucet b {
  font-weight: 400; font-size: 17px; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.upresneni { display: flex; flex-direction: column; gap: 16px; }

/* ── Dávka na víc porcí ──────────────────────────────────────── */

.pole.davka em {
  display: block; margin-top: 7px;
  font: 400 10px/1.55 var(--mono);
  font-style: normal; letter-spacing: 0.04em; color: var(--dim2);
}
.pole.davka em:empty { display: none; }
#davka-hint { color: var(--akcent); }

/* ── Váha ────────────────────────────────────────────────────── */

.vaha-form {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end;
}
.vaha-form .druhotne { width: auto; padding: 12px 20px; }

.vaha-graf { margin-top: 26px; }
.vaha-graf svg {
  display: block; width: 100%; height: 90px;
  overflow: visible;
}
.vaha-graf polyline {
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.vaha-popis {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line);
  font: 400 9px/1.4 var(--mono);
  letter-spacing: 0.08em; color: var(--dim2);
}
.vaha-popis span:nth-child(2) { text-align: center; }
.vaha-popis span:last-child { text-align: right; }

#kalibrace { margin-top: 24px; }
#kalibrace .druhotne { margin-top: 14px; }

/* ── Nebezpečné akce ─────────────────────────────────────────── */

.druhotne.nebezpecne { margin-top: 26px; color: var(--varovani); border-color: #40201b; }
.druhotne.nebezpecne:active { background: rgba(255, 92, 61, 0.1); }
.hlavni.nebezpecne-plne { background: var(--varovani); color: #fff; }
.podtitul.mensi.odsazeny-nahoru { margin-top: 9px; margin-bottom: 0; }

/* ── Napovídání z katalogu ───────────────────────────────────── */

.napoveda { margin-top: 6px; border-top: 1px solid var(--line); }
.napoveda-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 13.5px;
}
.napoveda-radek em {
  flex: none; font-style: normal;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.napoveda-radek:active { background: rgba(255, 255, 255, 0.04); }

/* ── Oblíbená jídla ──────────────────────────────────────────── */

.hledat {
  display: block; width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line2);
  border-radius: 0; padding: 8px 0;
  font-family: var(--mono); font-size: 16px;
  outline: none; appearance: none;
}
.hledat:focus { border-bottom-color: var(--akcent); }
.hledat::-webkit-search-cancel-button { filter: invert(1) grayscale(1); }

.oblibena-seznam { display: flex; flex-direction: column; }

.obl-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.obl-radek:first-child { border-top: 1px solid var(--line); }
.obl-radek:active { background: rgba(255, 255, 255, 0.03); }
.obl-radek .nazev { font-size: 15px; }
.obl-radek .pod {
  display: block; margin-top: 3px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.obl-radek .kcal {
  flex: none;
  font: 400 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.obl-radek.pridano { border-color: var(--akcent); }
.obl-radek.pridano .kcal { color: var(--akcent); }

.sprava-oblibenych { display: flex; flex-wrap: wrap; gap: 8px; }
.sprava-oblibenych button {
  padding: 8px 12px;
  border: 1px solid var(--line2);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.sprava-oblibenych button::after { content: " ×"; color: var(--dim2); }
.sprava-oblibenych button:active { border-color: var(--varovani); color: var(--varovani); }
.sprava-oblibenych .prazdne {
  font: 400 11px/1 var(--mono); color: var(--dim2); letter-spacing: 0.1em;
}

.podtitul.mensi { margin: -6px 0 14px; font-size: 10px; color: var(--dim2); }

/* ── Překryv při rozpoznávání ────────────────────────────────── */

.pracuje {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8, 8, 10, 0.92);
  display: grid; place-content: center;
  padding: 0 40px;
}
.pracuje-obsah { width: min(280px, 70vw); text-align: center; }
.pracuje-pruh { height: 1px; background: var(--line2); overflow: hidden; }
.pracuje-pruh i {
  display: block; height: 100%; width: 40%;
  background: var(--akcent);
  animation: bezi 1.1s ease-in-out infinite;
}
@keyframes bezi {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .pracuje-pruh i { animation: none; width: 100%; opacity: 0.5; }
}
.pracuje p {
  margin-top: 18px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
}

/* ── Právní text v modalu ────────────────────────────────────── */

.pravni { gap: 16px; }
.pravni p {
  font-family: var(--sans);
  font-size: 13px; line-height: 1.6; color: var(--dim);
}
.pravni b { color: var(--fg); font-weight: 500; }
.pravni a { color: var(--akcent); }
.pravni .pozn {
  padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim2);
}

.chyba {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.06em; color: var(--varovani);
}
.ok {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--akcent);
}

/* ── Vstupní obrazovka ───────────────────────────────────────── */

.vstup {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
  max-width: 420px; margin: 0 auto;
}
.znacka {
  font: 200 40px/1 var(--mono);
  letter-spacing: 0.3em;
}
.znacka-pod {
  margin: 14px 0 44px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.vstup .hlavni { margin-top: 8px; }

/* ── Modal (spodní list) ─────────────────────────────────────── */

dialog {
  border: 0; padding: 0;
  background: transparent;
  color: var(--fg);
  max-width: 100%; max-height: 100%;
  width: 100%;
  margin: 0; margin-top: auto;
  position: fixed; inset: 0; top: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.list {
  background: #0d0d10;
  border-top: 1px solid var(--akcent);
  max-height: 92svh;
  display: flex; flex-direction: column;
}
.list-hlava {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.list-hlava h2 {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.28em; color: var(--dim);
}
.zavrit {
  font: 200 26px/1 var(--mono); color: var(--dim);
  padding: 0 6px; margin: -6px;
}
.list-telo {
  padding: 22px 20px 26px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  -webkit-overflow-scrolling: touch;
}
.list-pata {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.list-pata .hlavni { flex: 1; }

@media (min-width: 620px) {
  dialog { max-width: 480px; margin: auto; inset: 0; }
  .list { border: 1px solid var(--line2); border-top-color: var(--akcent); }
  .pohled, .paticka { max-width: var(--sloupec); margin-left: auto; margin-right: auto; }
  .lista {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: var(--sloupec);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
}