/* Hlasostroj – společné styly. Hodnoty podle návrhu v docs/design/. */

:root {
  --pozadi: #F6F7F9;
  --plocha: #FFFFFF;
  --text: #16181D;
  --text-tlumeny: #4A5059;
  --text-stredni: #2B2F36;
  --linka: #E1E4E8;
  --linka-pole: #8A9099;
  --linka-nahled: #D5D8DD;
  --akcent: #1F4FD1;
  --akcent-tmavy: #163A9C;
  --akcent-podklad: #1F4FD114;
  --sedy-podklad: #F4F5F7;
  --chyba: #8A2C2C;
  --chyba-podklad: #FBEDEC;
  --pismo: 'IBM Plex Sans', system-ui, sans-serif;
  --pismo-nadpis: 'Source Serif 4', Georgia, serif;
  --pismo-kod: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--pozadi); color: var(--text); font-family: var(--pismo); font-size: 15px; line-height: 1.45; }
a { color: var(--akcent); }
a:hover { color: var(--akcent-tmavy); }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* Tlačítka */
.tl {
  height: 44px; padding: 0 16px; border: 1px solid var(--linka-pole); border-radius: 10px;
  background: var(--plocha); color: var(--text); font: inherit; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
}
.tl:hover { border-color: var(--text); color: var(--text); }
.tl-hlavni { border: 0; background: var(--akcent); color: #FFFFFF; font-weight: 600; padding: 0 18px; }
.tl-hlavni:hover { background: var(--akcent-tmavy); color: #FFFFFF; }
.tl-text { border: 0; background: transparent; color: var(--akcent); padding: 0 4px; height: 40px; }
.tl-text:hover { color: var(--akcent-tmavy); }
.tl-ikona { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text-tlumeny); border-radius: 8px; }
.tl-ikona:hover { background: var(--sedy-podklad); color: var(--text); }
.tl-nebezpecne { color: var(--chyba); }
.tl:disabled { opacity: 0.5; cursor: not-allowed; }

/* Horní lišta */
.lista {
  background: var(--plocha); border-bottom: 1px solid var(--linka); padding: 12px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.lista-vlevo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-width: 0; }
.lista-vpravo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.znacka { font-family: var(--pismo-nadpis); font-size: 20px; font-weight: 600; color: var(--text); text-decoration: none; }
.tlumene { color: var(--text-tlumeny); font-size: 14px; }

/* Obsah */
.obsah { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.nadpis-stranky { font-family: var(--pismo-nadpis); font-size: 32px; line-height: 1.15; font-weight: 600; }
.radek-nadpisu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.panel { background: var(--plocha); border: 1px solid var(--linka); border-radius: 12px; }
.stitek-sekce { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tlumeny); }

.upozorneni { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--chyba-podklad); color: var(--chyba); line-height: 1.45; }
.upozorneni svg { flex: none; margin-top: 2px; }

/* Přihlášení */
.prihlaseni { max-width: 420px; margin: 12vh auto 0; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
.prihlaseni h1 { font-family: var(--pismo-nadpis); font-size: 34px; line-height: 1.15; font-weight: 600; }
.prihlaseni p { margin: 0; color: var(--text-tlumeny); font-size: 16px; }
.prihlaseni .tl { height: 52px; font-size: 16px; }

/* Přehled prezentací */
.seznam { list-style: none; margin: 0; padding: 0; }
.seznam > li { padding: 16px 20px; border-top: 1px solid var(--linka); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.seznam > li:first-child { border-top: 0; }
.seznam-nazev { font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none; }
.seznam-nazev:hover { color: var(--akcent); }
.seznam-meta { font-size: 14px; color: var(--text-tlumeny); }
.seznam-akce { display: flex; flex-wrap: wrap; gap: 8px; }
.stitek-bezi { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--akcent-podklad); color: var(--akcent); font-size: 13px; font-weight: 600; }
.prazdno { padding: 32px 20px; color: var(--text-tlumeny); text-align: center; }

/* Formulářová pole */
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole > label, .pole > .popisek, fieldset > legend { font-size: 14px; font-weight: 600; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
input[type=text], input[type=number], textarea, select {
  font: inherit; font-size: 15px; color: var(--text); background: var(--plocha);
  border: 1px solid var(--linka-pole); border-radius: 8px;
}
input[type=text], input[type=number], select { height: 44px; padding: 0 10px; }
textarea { padding: 10px 12px; line-height: 1.45; resize: vertical; }
.napoveda { font-size: 13px; color: var(--text-tlumeny); }
.zaskrt { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; cursor: pointer; }
.zaskrt input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--akcent); }
.zaskrt span { display: flex; flex-direction: column; gap: 2px; }
.zaskrt.zakazano { cursor: not-allowed; color: var(--text-tlumeny); }

/* Editor */
.editor { padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.editor-slidy { flex: 1 1 240px; max-width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.editor-slidy .stitek-sekce { padding: 4px 8px 8px; }
.editor-slidy ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.slide-polozka {
  width: 100%; min-height: 52px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.slide-polozka:hover { background: var(--sedy-podklad); }
.slide-polozka[aria-current=true] { border-color: var(--akcent); background: var(--akcent-podklad); }
.slide-polozka[aria-current=true] .slide-nazev { font-weight: 600; }
.slide-cislo { width: 18px; flex: none; font-size: 13px; color: var(--text-tlumeny); font-variant-numeric: tabular-nums; }
.slide-texty { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slide-typ { font-size: 12px; color: var(--text-tlumeny); }
.slide-nazev { font-size: 14px; overflow-wrap: anywhere; }
.pridat-slide { margin-top: 8px; height: 44px; border: 1px dashed var(--linka-pole); border-radius: 8px; background: transparent; font: inherit; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.pridat-slide:hover { border-color: var(--text); }

.editor-stred { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.editor-stred > p { margin: 0; font-size: 14px; color: var(--text-tlumeny); }
.editor-nastaveni { flex: 1 1 320px; max-width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.oddil { padding-top: 18px; border-top: 1px solid var(--linka); display: flex; flex-direction: column; gap: 14px; }
.oddil > legend { float: left; width: 100%; margin-bottom: 12px; }
.moznost { display: flex; gap: 6px; align-items: center; }
.moznost label { width: 18px; font-size: 13px; font-weight: 600; color: var(--text-tlumeny); }
.moznost input { flex: 1; min-width: 0; height: 40px; }
.dvojice { display: flex; gap: 12px; }
.dvojice > .pole { flex: 1; min-width: 0; }
.akce-slidu { display: flex; flex-wrap: wrap; gap: 4px 12px; }
input.nazev-prezentace {
  font-family: var(--pismo-nadpis); font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--text);
  border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; margin-left: -6px; background: transparent;
  min-width: 0; width: min(36ch, 100%); height: auto;
}
input.nazev-prezentace:hover { border-color: var(--linka); }
.stav-ulozeni { font-size: 14px; color: var(--text-tlumeny); }
.stav-ulozeni.chyba { color: var(--chyba); }

/* Náhled slidu 16:9. Velikosti v cqw (procenta šířky .editor-stred = šířky náhledu),
   poměry podle návrhu P3 (náhled 730 px: nadpis 30 px, možnosti 18 px). */
.nahled {
  position: relative; aspect-ratio: 16 / 9; background: var(--plocha); border: 1px solid var(--linka-nahled); border-radius: 10px;
  padding: 4% 5%; display: flex; flex-direction: column; gap: 3.4cqw; overflow: hidden;
}
.nahled-nadpis { font-family: var(--pismo-nadpis); font-size: 4.1cqw; line-height: 1.15; font-weight: 600; max-width: 85%; overflow-wrap: anywhere; }
.nahled-text { font-size: 2.5cqw; line-height: 1.45; max-width: 85%; white-space: pre-line; overflow-wrap: anywhere; }
.nahled-moznosti { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.65cqw; font-size: 2.5cqw; }
.nahled-moznosti li { display: flex; align-items: center; gap: 1.65cqw; }
.nahled-pismeno { width: 3.85cqw; height: 3.85cqw; flex: none; border: 0.2cqw solid var(--linka-pole); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8cqw; font-weight: 600; color: var(--text-tlumeny); }
.nahled-poznamka { font-size: 2.2cqw; color: var(--text-tlumeny); }
.nahled-skala { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.1cqw; color: var(--text-tlumeny); flex-wrap: wrap; }
.nahled-skala span.bod { width: 4.6cqw; height: 4.6cqw; border: 0.2cqw solid var(--linka-pole); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); }
.nahled-obrazek { max-width: 100%; max-height: 30cqw; object-fit: contain; align-self: flex-start; }
.nahled-kod { position: absolute; right: 3%; bottom: 5%; padding: 0.8cqw 1.4cqw; border: 1px solid var(--linka-nahled); border-radius: 8px; background: var(--plocha); font-family: var(--pismo-kod); font-size: 1.9cqw; font-weight: 600; }

/* Dialog nastavení prezentace */
dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--linka); border-radius: 12px; color: var(--text); }
dialog::backdrop { background: rgb(22 24 29 / 0.4); }
.dialog-obsah { padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.dialog-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-hlava h2 { font-family: var(--pismo-nadpis); font-size: 24px; font-weight: 600; }
.qr-nahled { width: 140px; padding: 6px; border: 1px solid var(--linka); border-radius: 8px; }
.qr-nahled .qr { display: block; width: 100%; height: auto; }
.kod-velky { font-family: var(--pismo-kod); font-size: 28px; font-weight: 600; letter-spacing: 0.04em; }

@media (max-width: 600px) {
  .lista { padding: 12px 16px; }
  .obsah { padding: 24px 16px 48px; }
  .editor { padding: 16px; gap: 16px; }
  .nadpis-stranky { font-size: 28px; }
}

/* ---- Projektor (R0–R5) ----
   Plátno 16:9 vepsané do okna. Velikosti v cqw = procenta šířky plátna,
   přepočtené z návrhu 1600 × 900 px (1 cqw = 16 px návrhu). */
.projektor { position: fixed; inset: 0; background: var(--plocha); display: grid; place-items: center; overflow: hidden; }
.projektor.lista-skryta { cursor: none; }
.scena { width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: inline-size; }
.scena-obsah {
  position: relative; height: 100%; padding: 4cqw 5.5cqw; display: flex; flex-direction: column; gap: 2.5cqw;
  color: var(--text); overflow: hidden;
}
.proj-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; font-size: 1.375cqw; color: var(--text-tlumeny); }
.proj-cislo { font-variant-numeric: tabular-nums; }
.proj-nadpis { font-family: var(--pismo-nadpis); font-size: 3.875cqw; line-height: 1.12; font-weight: 600; max-width: 81cqw; overflow-wrap: anywhere; }
.typ-word_cloud .proj-nadpis { font-size: 3.25cqw; }
.proj-text { font-size: 2.125cqw; line-height: 1.45; max-width: 75cqw; white-space: pre-line; overflow-wrap: anywhere; }
.proj-obrazek { min-height: 0; max-width: 100%; flex: 1 1 auto; object-fit: contain; align-self: flex-start; margin-bottom: 7cqw; }
.proj-poznamka { margin: 0; font-size: 1.75cqw; color: var(--text-tlumeny); }
.proj-napoveda { font-size: 1.25cqw; color: var(--text-tlumeny); }
.proj-kolo { font-size: 1.5cqw; font-weight: 600; color: var(--akcent); margin-bottom: 1.5cqw; }
.proj-souhrn { position: absolute; left: 5.5cqw; bottom: 3.5cqw; max-width: 64cqw; display: flex; flex-direction: column; gap: 0.5cqw; font-size: 1.375cqw; color: var(--text-stredni); }
.proj-tvary { font-size: 1.2cqw; line-height: 1.45; color: var(--text-tlumeny); }

.pripojeni {
  position: absolute; right: 3.5cqw; bottom: 3cqw; display: flex; align-items: center; gap: 1.25cqw;
  padding: 0.875cqw 1.125cqw; border: 1px solid var(--linka-nahled); border-radius: 0.875cqw; background: var(--plocha);
}
.pripojeni .qr { width: 6.5cqw; height: 6.5cqw; display: block; }
.pripojeni-texty { display: flex; flex-direction: column; gap: 0.125cqw; }
.pripojeni-domena { font-size: 1.25cqw; color: var(--text-tlumeny); }
.pripojeni-kod { font-family: var(--pismo-kod); font-size: 2.625cqw; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

/* R0 úvod */
.uvod { align-items: center; justify-content: center; text-align: center; gap: 3cqw; }
.uvod-nazev { font-family: var(--pismo-nadpis); font-size: 2.5cqw; font-weight: 600; max-width: 80cqw; }
.uvod-pripojeni { display: flex; align-items: center; gap: 5cqw; text-align: left; }
.uvod-pripojeni .qr { width: 22cqw; height: 22cqw; display: block; }
.uvod-texty { display: flex; flex-direction: column; gap: 0.5cqw; }
.uvod-vyzva { font-size: 2cqw; color: var(--text-tlumeny); }
.uvod-domena { font-size: 3.5cqw; font-weight: 600; }
.uvod-kod { font-family: var(--pismo-kod); font-size: 8cqw; font-weight: 600; letter-spacing: 0.04em; line-height: 1.1; white-space: nowrap; }
.uvod-pocet { font-size: 2cqw; }

/* R5 konec */
.konec { align-items: center; justify-content: center; text-align: center; gap: 2.5cqw; }
.konec .proj-nadpis { font-size: 6cqw; }
.konec-popis { margin: 0; font-size: 2.25cqw; color: var(--text-stredni); }
.konec-tlacitko { height: 3.5cqw; min-height: 44px; padding: 0 2cqw; font-size: max(15px, 1.25cqw); }

/* R2 sběr */
.sber { display: flex; gap: 5cqw; align-items: flex-start; }
.sber-obsah { flex: 1; min-width: 0; }
.proj-moznosti { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.375cqw; font-size: 2.125cqw; line-height: 1.25; }
.proj-moznosti li { display: flex; align-items: center; gap: 1.5cqw; }
.proj-pismeno { width: 3.25cqw; height: 3.25cqw; flex: none; border: 0.125cqw solid var(--linka-pole); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5cqw; font-weight: 600; color: var(--text-tlumeny); }
.sber-pocet { width: 16.25cqw; flex: none; padding-top: 0.75cqw; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25cqw; text-align: right; }
.sber-cislo { font-family: var(--pismo-nadpis); font-size: 8.75cqw; line-height: 1; font-weight: 600; color: var(--akcent); font-variant-numeric: tabular-nums; }
.sber-popisek { font-size: 1.875cqw; }
.sber-stav { margin-top: 1cqw; display: inline-flex; align-items: center; gap: 0.625cqw; font-size: 1.25cqw; color: var(--text-tlumeny); }
.tecka { width: 0.75cqw; height: 0.75cqw; border-radius: 50%; background: var(--akcent); }
.tecka.uzavrena { background: var(--linka-pole); }

/* R3 výsledky */
/* Výsledky končí před rámečkem s QR kódem vpravo dole. */
.vysledky { margin-top: 0.5cqw; max-width: 72cqw; display: flex; flex-direction: column; gap: 1.625cqw; }
.vysledek { display: grid; grid-template-columns: 22cqw minmax(0, 1fr) 8cqw; gap: 1.75cqw; align-items: center; }
.vysledek-popisek { font-size: 2.125cqw; line-height: 1.2; display: flex; align-items: center; gap: 0.75cqw; overflow-wrap: anywhere; }
.vysledek-popisek svg { width: 2.25cqw; height: 2.25cqw; flex: none; color: var(--akcent); }
.vysledek-popisek.spravna { font-weight: 600; }
.draha { height: 3.25cqw; background: #EEF0F2; border-radius: 0.375cqw; overflow: hidden; }
.sloupec { height: 100%; background: var(--akcent); border-radius: 0.375cqw; transition: width 0.4s ease, height 0.4s ease; }
.vysledek-hodnota { font-size: 2.5cqw; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* R3b peer instruction */
.peer-veta { margin: 0; font-size: 1.875cqw; }
.peer-pred { color: var(--text-stredni); }
.peer-po { color: var(--akcent); }
.peer-legenda { display: flex; flex-wrap: wrap; gap: 0.5cqw 2.5cqw; font-size: 1.25cqw; color: var(--text-tlumeny); }
.peer-legenda > span { display: inline-flex; align-items: center; gap: 0.75cqw; }
.vzorek { width: 2cqw; height: 0.9cqw; border-radius: 0.25cqw; }
.vzorek-1 { background: var(--linka-pole); }
.vzorek-2 { background: var(--akcent); }
.typ-vyber:has(.peer) { gap: 2cqw; }
.vysledky.peer { gap: 1.25cqw; }
.vysledky.peer .vysledek { grid-template-columns: 20cqw minmax(0, 1fr) 13cqw; }
.dvojdraha { display: flex; flex-direction: column; gap: 0.4cqw; }
.dvojdraha .draha { height: 1.75cqw; }
.dvojdraha .draha.tenka { height: 0.9cqw; }
.sloupec.sedy { background: var(--linka-pole); }
.posun-hodnota { font-size: 2cqw; }
.tlumene-proj { font-weight: 400; color: var(--text-tlumeny); }
.akcent { color: var(--akcent); }

/* Word cloud */
.oblak { flex: 1; min-height: 0; padding: 0 4cqw 7.5cqw; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 0.9cqw 2.75cqw; line-height: 1; overflow: hidden; }
.slovo { color: var(--text-tlumeny); }
.slovo.stredni { font-weight: 500; color: var(--text); }
.slovo.velke { font-weight: 600; color: var(--text); }
.slovo.prvni { font-weight: 600; color: var(--akcent); }

/* Otevřené odpovědi */
.texty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25cqw; align-content: start; padding-bottom: 7cqw; }
.text-odpoved { padding: 1.25cqw 1.5cqw; background: var(--sedy-podklad); border-radius: 0.75cqw; font-size: 1.5cqw; line-height: 1.35; overflow-wrap: anywhere; }

/* Škála */
.skala-graf { flex: 1; min-height: 0; max-height: 24cqw; display: flex; align-items: stretch; gap: 1.5cqw; max-width: 70cqw; }
.skala-sloupec { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; }
.skala-draha { flex: 1; width: 100%; display: flex; align-items: flex-end; background: #EEF0F2; border-radius: 0.375cqw; overflow: hidden; }
.skala-draha .sloupec { width: 100%; }
.skala-pocet { font-size: 1.5cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.skala-hodnota { font-size: 2cqw; font-weight: 600; }
.skala-popisky { max-width: 70cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: 1.5cqw; color: var(--text-tlumeny); }
.skala-popisky strong { color: var(--text); }

/* Q&A */
.otazky { margin: 0; padding: 0 0 7cqw; list-style: none; display: flex; flex-direction: column; gap: 1cqw; max-width: 75cqw; }
.otazky li { display: flex; align-items: flex-start; gap: 1.75cqw; font-size: 1.9cqw; line-height: 1.3; }
.otazky li.zodpovezena { color: var(--text-tlumeny); }
.otazka-hlasy { width: 6cqw; flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25cqw; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akcent); }
.otazka-hlasy svg { width: 1.75cqw; height: 1.75cqw; }
.zodpovezena .otazka-hlasy { color: var(--text-tlumeny); }
.otazka-text { overflow-wrap: anywhere; }
.otazka-stav { margin-left: 1cqw; font-size: 1.25cqw; }

/* Ovládací lišta (R4): po chvíli bez pohybu myši zmizí */
.ovladani {
  position: fixed; left: 24px; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px; border-radius: 14px; background: var(--text); color: #FFFFFF; font-size: 17px;
  transition: opacity 0.3s ease; max-width: calc(100vw - 48px);
}
.lista-skryta .ovladani { opacity: 0; pointer-events: none; }
.ovl { height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #FFFFFF; font: inherit; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ovl:hover { background: #2B2F36; }
.ovl:disabled { opacity: 0.4; cursor: default; background: transparent; }
.ovl-ikona { width: 48px; padding: 0; justify-content: center; }
.ovl-hlavni { background: #FFFFFF; color: var(--text); font-weight: 600; }
.ovl-hlavni:hover { background: #E1E4E8; }
.ovl kbd { font: inherit; font-weight: 400; color: #B8BDC5; }
.ovl-hlavni kbd { color: var(--text-tlumeny); }
.ovl-cislo { padding: 0 6px; font-variant-numeric: tabular-nums; }
.ovl-oddelovac { width: 1px; height: 28px; margin: 0 8px; background: var(--text-tlumeny); }
.projektor-chyba { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); }

/* ---- Mobil účastníka (U1–U6), podle návrhu v šířce 390 px ---- */
.u-telo { background: var(--plocha); }
.ucastnik { min-height: 100vh; min-height: 100dvh; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; }
.u-hlava { height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--linka); }
.u-kod { font-family: var(--pismo-kod); font-size: 14px; color: var(--text-tlumeny); }
.u-obsah { flex: 1; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.u-formular { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.u-formular-pevny { flex: none; }
.u-uvod { margin-top: 44px; display: flex; flex-direction: column; gap: 10px; }
.u-uvod h1, .u-zprava h1, .u-odeslano h1 { font-family: var(--pismo-nadpis); font-size: 32px; line-height: 1.15; font-weight: 600; }
.u-uvod p, .u-zprava p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-tlumeny); }
.ucastnik input.u-pole-kod { height: 72px; border-width: 1.5px; border-radius: 12px; font-family: var(--pismo-kod); font-size: 34px; letter-spacing: 0.12em; text-align: center; }
.u-tlacitko { height: 56px; border-radius: 12px; font-size: 18px; width: 100%; }
.u-tlacitko-obrys { align-self: center; height: 48px; padding: 0 24px; border: 1.5px solid var(--akcent); border-radius: 12px; background: var(--plocha); color: var(--akcent); font-weight: 600; }
.u-poznamka { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-tlumeny); }
.u-poznamka.stred { text-align: center; }
.u-podtitul { margin: auto 0 0; font-family: var(--pismo-nadpis); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--text-tlumeny); }
.u-oddelena { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linka); font-size: 15px; line-height: 1.5; color: var(--text-stredni); }
.u-oddelena p { margin: 0; }
.u-radek { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.u-stitek { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--sedy-podklad); font-size: 13px; font-weight: 500; color: var(--text-stredni); }
.u-otazka { padding: 0; font-family: var(--pismo-nadpis); font-size: 25px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
legend.u-otazka { margin-bottom: 20px; }
.u-moznosti { display: flex; flex-direction: column; gap: 12px; }
.u-moznosti > p { margin: -8px 0 4px; }
.u-moznost { min-height: 60px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; border: 2px solid var(--linka-nahled); border-radius: 12px; font-size: 17px; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.u-moznost input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--akcent); }
.u-moznost:has(input:checked) { border-color: var(--akcent); background: var(--akcent-podklad); }
.u-paticka { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.u-skala { display: flex; gap: 8px; }
.u-bod { flex: 1; min-width: 0; }
.u-bod input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.u-bod span { height: 56px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--linka-nahled); border-radius: 12px; font-size: 20px; font-weight: 600; cursor: pointer; }
.u-bod input:checked + span { border-color: var(--akcent); background: var(--akcent-podklad); color: var(--akcent); }
.u-bod input:focus-visible + span { outline: 3px solid var(--akcent); outline-offset: 2px; }
.u-skala-popisky { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-tlumeny); }
.u-skala-popisky span:last-child { text-align: right; }
.u-radek-pole { display: flex; gap: 8px; }
.u-radek-pole input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border-width: 1.5px; border-radius: 12px; font-size: 18px; }
.u-radek-pole .tl, .u-sloupec-pole .tl { height: 56px; border-radius: 12px; font-size: 17px; padding: 0 20px; }
.u-sloupec-pole { display: flex; flex-direction: column; gap: 8px; }
.ucastnik textarea { border-width: 1.5px; border-radius: 12px; font-size: 17px; }
.ucastnik input[type=text]:not(.u-pole-kod) { border-width: 1.5px; border-radius: 12px; font-size: 18px; }
.u-odeslane { display: flex; flex-direction: column; gap: 10px; }
.u-odeslane .popisek { font-size: 14px; font-weight: 600; }
.u-cipy { display: flex; flex-wrap: wrap; gap: 8px; }
.u-cip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px 0 14px; border-radius: 22px; background: var(--sedy-podklad); font-size: 17px; overflow-wrap: anywhere; }
.u-cip-odebrat { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--text-tlumeny); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.u-cip-odebrat:hover { background: var(--linka); }
.u-zprava { margin-top: 56px; display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.u-odeslano { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.u-odeslano > svg { color: var(--akcent); }
.u-odeslano p { margin: 0; }
.u-volba { padding: 12px 20px; border-radius: 12px; background: var(--sedy-podklad); font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.u-otazky h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.u-otazky ul { margin: 0; padding: 0; list-style: none; }
.u-otazky li { padding: 12px 0; border-top: 1px solid var(--linka); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.4; }
.u-otazky li.zodpovezena { color: var(--text-tlumeny); }
.u-otazka-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.u-podpora { min-width: 64px; height: 44px; flex: none; padding: 0 12px; border: 1.5px solid var(--linka-nahled); border-radius: 22px; background: var(--plocha); color: var(--text); font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.u-podpora[aria-pressed=true] { border-color: var(--akcent); background: var(--akcent-podklad); color: var(--akcent); }
.u-podpora:disabled { cursor: default; opacity: 0.55; }
.vypadek { position: sticky; top: 0; z-index: 1; padding: 8px 20px; background: var(--sedy-podklad); color: var(--text-stredni); font-size: 14px; text-align: center; }
@media (min-width: 600px) {
  .ucastnik { border-left: 1px solid var(--linka); border-right: 1px solid var(--linka); }
}

/* ---- P5 Výsledky a běhy ---- */
.obsah-siroke { max-width: 1200px; }
.zpet { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; align-self: flex-start; }
.p5 { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.p5-behy { flex: 1 1 220px; max-width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.p5-behy .stitek-sekce { padding: 4px 8px 8px; }
.p5-behy ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
a.slide-polozka { text-decoration: none; }
.p5-obsah { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.p5-hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.p5-hlava h2 { font-family: var(--pismo-nadpis); font-size: 24px; font-weight: 600; }
.p5-slide { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.p5-slide-hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.p5-slide-hlava h3 { font-family: var(--pismo-nadpis); font-size: 20px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.p5-slide-hlava .tl { height: 36px; padding: 0 12px; flex: none; }
.p5-graf { display: flex; flex-direction: column; gap: 10px; }
.p5-radek { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 7rem; gap: 12px; align-items: center; }
.p5-popisek { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.p5-popisek svg { flex: none; color: var(--akcent); }
.p5-popisek.spravna { font-weight: 600; }
.p5-draha { height: 18px; background: #EEF0F2; border-radius: 4px; overflow: hidden; }
.p5-draha.tenka { height: 9px; }
.p5-draha.sedy .sloupec { background: var(--linka-pole); }
.p5-dvojdraha { display: flex; flex-direction: column; gap: 3px; }
.p5-hodnota { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.p5-poznamka { margin: 0; color: var(--text-stredni); }
.p5-legenda { font-size: 13px; }
.p5-legenda .vzorek { width: 18px; height: 8px; }
.p5-slova { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.p5-slova li { padding: 6px 12px; border-radius: 16px; background: var(--sedy-podklad); }
.p5-pocet { margin-left: 6px; color: var(--text-tlumeny); font-variant-numeric: tabular-nums; }
.p5-texty .p5-pocet { margin: 0 4px 0 0; }
.p5-texty { margin: 0; padding: 0; list-style: none; }
.p5-texty li { padding: 10px 0; border-top: 1px solid var(--linka); overflow-wrap: anywhere; }
.p5-texty li:first-child { border-top: 0; }
.p5-texty li.skryta { color: var(--text-tlumeny); }
@media (max-width: 600px) {
  .p5-radek { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .p5-radek > .p5-draha, .p5-radek > .p5-dvojdraha { grid-column: 1 / -1; grid-row: 2; }
}