/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Svetlina, navrhovy system a plast. Jedna tabule skla se stavbou vstupniho
   boxu Coralu v bilych tonech. Vsechen text a ikony jsou do skla ZAPUSTENE
   (tmavy tah, pod nim svetly odlesk); zadna seda. Tlacitka jsou jedina
   vystoupla vec. Globalni prvky (tlacitko, pole, karta, posuvnik, panel
   pruvodce) jsou tady a nikde jinde. */
/* Jedina hranice rozvrzeni: telefon do 767 px, pocitac od 768 px. Obe jsou
   tekuta a drzi pres cely rozsah sirek; tabletovy breakpoint sem nepatri
   (CLAUDE.md, sekce MOBILE FIRST). Promenna zustava jen pro pripadne mezni
   pripady, v rozvrzeni se uz nepouziva. */
:root {
  /* Světlina 14, 15: jedna tekutá soustava rozměrů. Všechno teče od 375 do
       1280 px, žádná tabletová mezihodnota. --sv-g je mezera od hrany skla
       k vnitřní čáře a zároveň od čáry k obsahu (Ondra 21. 9. 2026: „od čáry do
       jakýhokoli obsahu bych dal stejnou velikost jako má čára od konce hlavního
       rámečku"). Výraz uvnitř clamp() patří do calc(), jinak ho kompilátor
       LESS sečte a zahodí jednotku (Světlina 15: z 2.1px + 0.774vw bylo 2.874px). */
  /* Světlina 33: rám na počítači o 3 px blíž k okrajům (Ondra 23. 9. 2026:
       „dva tři pixely ... rozšířil to do kraje“). */
  --sv-ram: clamp(7px, 1.64vw, 21px);
  --sv-g: clamp(5px, calc(2.1px + 0.774vw), 12px);
  /* Světlina 87: čára rámu je od vnějšího kraje skla o třetinu blíž, od čáry
       k obsahu zůstává --sv-g (Ondra 24. 9. 2026: „o třetinu odsazení zmenšit,
       jakoby od vnějšího kraje boxu"). */
  --sv-g-ram: calc(var(--sv-g) * 0.6667);
  /* Světlina 132: šířka levého sloupce a panelu průvodce na počítači na jednom
       místě; podle nich sedí i hlášky nad prostředním sloupcem. */
  --sv-sloupec: clamp(190px, calc(97px + 12.11vw), 290px);
  --sv-panel: clamp(248px, 26vw, 392px);
  --sv-pismo: clamp(14px, calc(13.17px + 0.221vw), 16px);
  --sv-h1: clamp(22px, calc(17.86px + 1.105vw), 32px);
  --sv-h2: clamp(17px, calc(15.34px + 0.442vw), 21px);
  --sv-h3: clamp(15px, calc(14.17px + 0.221vw), 17px);
  --sv-maly: clamp(12px, calc(11.59px + 0.11vw), 13px);
  --sv-tl-v: clamp(40px, calc(38.34px + 0.442vw), 44px);
  --sv-tl-pismo: clamp(13px, calc(12.59px + 0.11vw), 14px);
  --sv-ikona: 24px;
  --sv-karta-x: clamp(8px, calc(5.35px + 0.707vw), 14px);
  --sv-karta-y: clamp(12px, calc(11.17px + 0.221vw), 14px);
  --sv-mezera-karet: clamp(8px, calc(5.35px + 0.707vw), 14px);
  /* Světlina 34: mezera mezi čipy (Vysvětli mi to, Teď tvoříme, předměty,
       kvalita videa), 10 px na telefonu až 12 px na počítači. */
  --sv-mezera-cipu: clamp(10px, calc(9.17px + 0.221vw), 12px);
  /* Světlina 15: další kroky stupnice, ať sekce nemají pevné pixely.
       mini 11.5 až 12.5, pismo-s 13 až 14, text-m 14.5 až 15.5 (chat, řádky),
       cteni 15 až 17 (text dokumentu), cteni-h3 16 až 18, karta-text 17 až 22,
       znacka 20 až 22 (nápis Světlina). Pole mají na telefonu 16 px, jinak
       iOS při psaní přiblíží stránku; malá tlačítka mají na telefonu 40 px. */
  --sv-mini: clamp(11.5px, calc(11.09px + 0.11vw), 12.5px);
  --sv-pismo-s: clamp(13px, calc(12.59px + 0.11vw), 14.5px);
  --sv-text-m: clamp(14.5px, calc(14.09px + 0.11vw), 15.5px);
  --sv-cteni: clamp(15px, calc(14.17px + 0.221vw), 18px);
  --sv-cteni-h3: clamp(16px, calc(15.17px + 0.221vw), 18.5px);
  --sv-karta-text: clamp(17px, calc(14.93px + 0.5525vw), 24px);
  --sv-znacka: clamp(20px, calc(19.17px + 0.221vw), 23px);
  --sv-pole-pismo: var(--sv-pismo);
  --sv-tl-maly: 36px;
  --sv-tl-horni: 40px;
  /* Světlina 51: jedna mezera mezi tlačítky vpravo nahoře (Učit se,
       nastavení, historie, nový chat, zvuk, oko), v učícím režimu i jinde. */
  --sv-mezera-nastroju: 8px;
  /* Světlina 61: jedna malá mezera mezi ikonovými tlačítky v řádku a pod nadpisem
       (hvězdička, přejmenovat, koš, kopírovat, tisk). Ondra 24. 9. 2026: „mezera mezi
       hvězdičkou, košema a případně tím přejmenovat je teďka zase moc velká. Předtím
       byla malá a teď je velká." Dvoupixelová byla naopak pidi (22. 9.). */
  --sv-mezera-ikon: 6px;
  /* Světlina 17: stíny jen z jádra. Viditelný dosah (posun + 0,6 rozmazání
       + roztažení) je pod mezerou k sousedovi, takže stín nepadá na vedlejší
       tlačítko ani kartu (CORAL-GLOBALNE 23). Velký stín mají jen plovoucí
       věci nad obsahem (nabídka, bublina, okno). */
  --sv-stin-tl: 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px -5px rgba(0, 0, 0, 0.35);
  --sv-stin-akcent: 0 2px 0 rgba(140, 86, 8, 0.35), 0 4px 10px -6px rgba(217, 154, 34, 0.8);
  --sv-stin-karta: 0 6px 12px -9px rgba(0, 0, 0, 0.3);
  /* Světlina 101: hrana, plocha a odlesk karty na jednom místě; list sešitu je
       karta stejně jako seznamy a dlaždice. */
  --sv-karta-hrana: rgba(255, 255, 255, 0.25);
  --sv-karta-pozadi: rgba(255, 255, 255, 0.08);
  --sv-karta-odlesk: rgba(255, 255, 255, 0.25);
  /* Světlina 31: plovoucí karty (zvuky, nabídka tří teček, výběr, hlášky,
       návod k instalaci) mají jedno šalvějové sklo z jádra, žádná bílá plocha.
       Sekce se překládají zvlášť, proto proměnné, ne mixin. */
  --sv-plovouci: linear-gradient(180deg, rgba(226, 233, 220, 0.97), rgba(214, 223, 207, 0.97));
  --sv-plovouci-hrana: rgba(255, 255, 255, 0.55);
  --sv-plovouci-stin: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 18px 40px -14px rgba(0, 0, 0, 0.45);
  --sv-plovouci-rozmazani: blur(24px) saturate(1.15);
  /* Světlina 53: barva jezdce posuvníku, jedna pro celou aplikaci. */
  --sv-posuvnik: rgba(20, 28, 24, 0.3);
  --sv-posuvnik-najeti: rgba(20, 28, 24, 0.48);
  /* Světlina 52: bublinky s nápovědou (coral-tip z pluginu) jsou z téhož
       šalvějového skla jako plovoucí karty, s tmavým zapuštěným písmem a malým
       trojúhelníčkem. Plné pozadí, ať šipka (dědí pozadí) sedí barvou. */
  --coral-tip-pozadi: #dce4d6;
  --coral-tip-barva: var(--sv-text);
  --coral-tip-hrana: var(--sv-plovouci-hrana);
  --coral-tip-radius: 10px;
  --coral-tip-stin: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --coral-tip-pismo: var(--sv-font);
  --coral-tip-velikost: var(--sv-maly);
  --coral-tip-vaha: 600;
  --coral-tip-vnitrek: 6px 10px;
  --coral-tip-sipka: 3px;
  /* Světlina 126: kalendář testů je globální kalendář Coralu (CoralKalendar
       z pluginu); dny jsou ze stejného skla jako karty, testy žluté, dny učení
       tlumené, dnešek žlutý s tmavým číslem. */
  --coral-kalendar-pismo: var(--sv-font);
  --coral-kalendar-text: var(--sv-text);
  --coral-kalendar-tlum: rgba(10, 15, 12, 0.62);
  --coral-kalendar-nazev-velikost: var(--sv-h3);
  --coral-kalendar-tlacitko-pozadi: rgba(255, 255, 255, 0.34);
  --coral-kalendar-tlacitko-hrana: var(--sv-linka);
  --coral-kalendar-tlacitko-najeti: rgba(255, 255, 255, 0.5);
  --coral-kalendar-den-pozadi: rgba(255, 255, 255, 0.16);
  --coral-kalendar-den-hrana: rgba(20, 28, 24, 0.1);
  --coral-kalendar-den-najeti: rgba(255, 255, 255, 0.34);
  --coral-kalendar-dnes-pozadi: var(--sv-zluta);
  --coral-kalendar-dnes-text: var(--sv-text);
  --coral-kalendar-vybrany: var(--sv-zluta-tmava);
  --coral-kalendar-fokus: var(--sv-zluta-tmava);
  --coral-kalendar-zablesk: var(--sv-zluta);
  --coral-kalendar-druh-test: var(--sv-zluta-tmava);
  --coral-kalendar-druh-uceni: rgba(20, 28, 24, 0.45);
  --coral-kalendar-udalost-sytost: 30%;
  --sv-text: #0a0f0c;
  --sv-text-2: #0a0f0c;
  --sv-zluta: #f2b134;
  --sv-zluta-svetla: #ffd36b;
  --sv-zluta-tmava: #d48f1b;
  --sv-linka: rgba(20, 28, 24, 0.16);
  --sv-linka-odlesk: rgba(255, 255, 255, 0.32);
  --sv-odlesk: rgba(255, 255, 255, 0.3);
  --sv-hover: rgba(255, 255, 255, 0.2);
  --sv-aktivni: rgba(255, 255, 255, 0.34);
  --sv-chyba: #9c3f2c;
  --sv-font: 'Sora', 'Inter', system-ui, sans-serif;
  /* Světlina 151: hladké rohy. Zaoblení se kreslí jako superelipsa (corner-shape: squircle),
       oblouk plynule navazuje na rovnou hranu. Superelipsa potřebuje 1,75krát větší poloměr,
       aby byla stejně kulatá, proto --sv-roh-hladky (1, pod @supports za tímto blokem 1.75);
       prohlížeč bez corner-shape kreslí obyčejný poloměr. Každý zaoblený obdélník bere poloměr
       z --sv-r, --sv-r-pole nebo calc(Npx * var(--sv-roh-hladky, 1)) a k němu corner-shape:
       squircle; vnořený roh je vnější minus mezera, kruhy a pilulky mají corner-shape: round.
       Ondra (YouTube2, část 82): „useknutý nepěkně, nerovnoměrně. Není to zaoblení a tohle chci,
       aby Coral uměl.“ */
  --sv-roh-hladky: 1;
  --sv-r: calc(18px * var(--sv-roh-hladky));
  --sv-r-pole: calc(12px * var(--sv-roh-hladky));
  --sv-prechod: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --sv-prolnuti: 600ms;
  --sv-lista: 62px;
  --sv-hlavicka: 52px;
  --sv-vnitrek: var(--sv-g);
  --sv-vnitrni-ram: var(--sv-g);
  --sv-okraj-car: 0px;
  --sv-zrno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E");
  /* Nacitaci obrazovka na miru: svetla plocha, znak Svetliny, zluta linka, pismo Sora. */
  --coral-nacitani-pozadi: #eef2e6;
  --coral-nacitani-akcent: #f2b134;
  --coral-nacitani-text: #141c18;
  --coral-nacitani-pismo: 'Sora', system-ui, sans-serif;
  --coral-nacitani-znak: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%3E%3Cdefs%3E%3CradialGradient%20id=%22sv-zg%22%20cx=%2250%25%22%20cy=%2238%25%22%20r=%2260%25%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffe9a8%22/%3E%3Cstop%20offset=%220.55%22%20stop-color=%22%23f2b134%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23d98a1c%22/%3E%3C/radialGradient%3E%3ClinearGradient%20id=%22sv-zl%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%232f4a3a%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%2316241c%22/%3E%3C/linearGradient%3E%3CclipPath%20id=%22sv-zc%22%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%2221%22/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%2222.5%22%20fill=%22rgba(255,255,255,0.55)%22/%3E%3Cg%20clip-path=%22url(%23sv-zc)%22%3E%3Crect%20width=%2248%22%20height=%2248%22%20fill=%22%23fff6dc%22/%3E%3Ccircle%20cx=%2224%22%20cy=%2221%22%20r=%229.5%22%20fill=%22url(%23sv-zg)%22/%3E%3Cg%20stroke=%22%23f2b134%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20opacity=%220.75%22%3E%3Cpath%20d=%22M24%206.5v3M11.3%2011.8l2.1%202.1M36.7%2011.8l-2.1%202.1M6.5%2021h3M38.5%2021h3%22/%3E%3C/g%3E%3Cpath%20d=%22M0%2034h48v14H0z%22%20fill=%22url(%23sv-zl)%22/%3E%3Cpath%20d=%22M7%2035l5.5-11%205.5%2011zM17%2035l7-15%207%2015zM30%2035l5.5-11L41%2035z%22%20fill=%22url(%23sv-zl)%22/%3E%3C/g%3E%3Ccircle%20cx=%2224%22%20cy=%2224%22%20r=%2221.6%22%20fill=%22none%22%20stroke=%22%2316241c%22%20stroke-width=%221.8%22/%3E%3C/svg%3E");
  /* Světlina 121: jádro pluginu barví html i body z --color-bg; bez ní by pod Světlinou svítila tmavá #14100E. */
  --color-bg: #dfe6dc;
  --coral-akcent: #d48f1b;
  --coral-text: #141c18;
  --coral-text-tichy: #141c18;
  --coral-hrana: rgba(20, 28, 24, 0.18);
  --coral-kamen-3: #ffffff;
  --coral-kamen-1: #eef2ec;
  --coral-r-pole: var(--sv-r-pole);
}
@supports (corner-shape: squircle) {
  :root {
    --sv-roh-hladky: 1.75;
  }
}
/* Telefon: pole 16 px (iOS jinak přiblíží stránku), malá tlačítka aspoň 40 px
   na výšku i na šířku, i s krátkým textem jako 4K (Světlina 80). */
@media (max-width: 767px) {
  :root {
    --sv-pole-pismo: 16px;
    --sv-tl-maly: 40px;
  }
  .sv-tl {
    min-width: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --sv-belost-telefon: 1.9;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
[contenteditable]:focus,
[contenteditable]:focus-visible {
  outline: none;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #dfe6dc;
  color: var(--sv-text);
  font-family: var(--sv-font);
  font-size: var(--sv-pismo);
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body {
  overscroll-behavior: none;
}
::selection {
  background: rgba(242, 177, 52, 0.4);
  color: var(--sv-text);
}
button,
input,
textarea,
select,
a,
summary,
[tabindex] {
  outline: none;
  font-family: inherit;
  color: inherit;
}
/* Světlina 149: rozbalovací nadpis (summary) má fokus naší barvou, ne kroužek prohlížeče. */
summary {
  cursor: pointer;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  transition: background var(--sv-prechod);
}
summary:focus-visible {
  background: var(--sv-hover);
  box-shadow: 0 0 0 3px rgba(242, 177, 52, 0.45);
}
/* Světlina 149: rozbalovací blok (details.sv-rozbal) vypadá všude stejně: šipka jako u bible,
   nadpis drží výšku malého tlačítka a obsah pod ním odsazení. */
.sv-rozbal > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sv-tl-maly);
  margin: 0 -6px;
  padding: 0 6px;
  list-style: none;
}
.sv-rozbal > summary::-webkit-details-marker {
  display: none;
}
.sv-rozbal > summary:hover {
  background: var(--sv-hover);
}
.sv-rozbal > summary [data-coral-ikona] {
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-rozbal[open] > summary [data-coral-ikona] {
  transform: rotate(90deg);
}
.sv-rozbal__telo {
  margin: 6px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .sv-rozbal > summary [data-coral-ikona] {
    transition: none;
  }
}
input,
textarea,
[contenteditable] {
  caret-color: var(--sv-zluta-tmava);
}
/* Světlina 53: jeden posuvník v celé aplikaci, tenký, s průhlednou dráhou, jako
   v prostřední sekci, a bez šipek. Platí pro každý prvek, takže nový seznam,
   pole ani plovoucí karta nic vlastního nepotřebují.
   Ondra 24. 9. 2026: „chtělo by to v chatu prostě ten skrolbar, jak máme
   v prostřední sekci, ten průhledný" a „když tam nejsou potřeba šipky, tak tam
   nebudou". Chrome na Windows kreslí u standardního tenkého posuvníku šipky,
   proto Chromium s myší dostane vlastní posuvník bez tlačítek; standardní
   vlastnosti (scrollbar-width, scrollbar-color) by ho v Chromiu vypnuly, takže
   je dostane jen Firefox, kde šipky nejsou. Telefon pod 768 px bez myši má
   systémový plovoucí posuvník; od 768 px je tablet počítač a má tenhle
   (Světlina 216, DNA Coralu). */
@supports selector(::-webkit-scrollbar) {
  @media (pointer: fine), (min-width: 768px) {
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background: transparent;
    }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: var(--sv-posuvnik);
      background-clip: padding-box;
      border: 2px solid transparent;
      border-radius: 999px;
      corner-shape: round;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background-color: var(--sv-posuvnik-najeti);
    }
    ::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }
    /* Světlina 216: prvek se scrollbar-width nebo scrollbar-color by v Chromiu
           místo tohohle posuvníku dostal systémový se šipkami (tak to dopadlo
           v textu velkého přehrávače). Jádro obě vlastnosti vrací všem prvkům,
           i těm z pluginu a těm, které teprve přibudou; skrytý posuvník drží
           ::-webkit-scrollbar { display: none } u svého prvku. Ondra 7. 10. 2026:
           „tohle by taky chtěli glo-globálně opravit scrollbary“. */
    * {
      scrollbar-width: auto !important;
      scrollbar-color: auto !important;
    }
  }
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--sv-posuvnik) transparent !important;
  }
}
/* Ondra 22. 9. 2026: „jenom rychlost jedna a nula celá devět dej žlutě,
   protože jsou to důležitější hodnoty." Tmavší odstín kvůli čitelnosti na skle. */
.sv-hodnota-zluta {
  color: var(--sv-zluta-tmava);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Jeden font vsude, i v prvcich pluginu. */
.sv-ram,
.sv-ram *,
.sv-vstup,
.sv-vstup *,
.sv-nastroje,
.sv-nastroje *,
.coral-asistent,
.coral-asistent *,
.coral-dikt,
.coral-dikt * {
  font-family: var(--sv-font) !important;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--sv-h1);
}
h2 {
  font-size: var(--sv-h2);
}
h3 {
  font-size: var(--sv-h3);
}
p {
  margin: 0;
}
p + p {
  margin-top: 8px;
}
/* ZAPUSTENI: jediny zpusob, jak se ve skle pise a kresli. */
/* Ondra 22. 9. 2026: „ten bílej obrys u všeho, tak samozřejmě i třeba
   u těch ikonek, že když se změní jejich tvar kvůli animaci, tak aby tam
   bylo taky to správně." `drop-shadow` kopíruje skutečný tvar, takže
   drží i u animovaného obrázku; `box-shadow` by kreslil jen obdélník. */
/* Světlina 89: velikost ikony určuje jen proměnná --sv-ikona, a to od prvního snímku. Plugin ikon
   dopisuje ikonám bez data-velikost inline 24 px, které by přebilo každý návrh a po překreslení
   obrazovky ikonu zmenšilo a zase zvětšilo; proto !important. Jinde se velikost ikony mění jen
   přes --sv-ikona, nikdy přes width a height. */
[data-coral-ikona] {
  display: inline-flex;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
  filter: drop-shadow(0 1px 0 var(--sv-odlesk)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
[data-coral-ikona]:not([data-velikost]) {
  width: var(--sv-ikona) !important;
  height: var(--sv-ikona) !important;
}
[data-coral-ikona] svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.9;
}
h1 [data-coral-ikona] {
  vertical-align: -0.08em;
  margin-right: 0.18em;
}
.sv-vizualne-skryte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Pozadi: video (smycka tam a zpet), jeden nehybny lehky prekryv. */
.sv-pozadi {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #b9c7b3;
}
.sv-pozadi__vrstva {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--sv-prolnuti) ease;
}
.sv-pozadi__vrstva.je-videt {
  opacity: 1;
}
.sv-pozadi__vrstva--ton {
  background: radial-gradient(90% 70% at 50% 35%, #fbe7b8 0%, #e9d9b0 30%, #b9c9b8 65%, #7f9a92 100%);
}
.sv-pozadi__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.12) saturate(0.9);
}
.sv-pozadi__filtr {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.1) 100%), radial-gradient(120% 90% at 50% 40%, rgba(255, 244, 214, 0.08) 0%, rgba(0, 0, 0, 0) 45%, rgba(20, 24, 18, 0.24) 100%);
}
/* SKLO */
.sv-ram {
  /* Světlina 39: bělost roste s náladou, ale sklo zůstává sklem: nejvýš 0.8,
       jinak by na telefonu (násobek 1.9) přeteklo do neprůhledné bílé. */
  background-image: var(--sv-zrno), linear-gradient(158deg, rgba(255, 255, 255, min(0.8, calc(0.22 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 0%, rgba(255, 255, 255, min(0.62, calc(0.11 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 45%, rgba(255, 255, 255, min(0.74, calc(0.18 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 100%);
  background-size: 160px 160px, cover;
  background-repeat: repeat, no-repeat;
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  /* Světlina 62: hrana je tenká a po celém obvodu stejná, bez světlé lišty nahoře
       a bez druhých linek těsně u hrany; uvnitř zůstává jediná čára obsahu (obrys).
       Ondra 24. 9. 2026: „ten hlavní rámeček Světliny je teda špatně stylizovaný". */
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12), inset 0 0 18px rgba(255, 255, 255, 0.12);
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  position: fixed;
  inset: var(--sv-ram);
  z-index: 1;
  padding: var(--sv-g-ram);
  display: flex;
  flex-direction: column;
  border-radius: var(--sv-r);
  corner-shape: squircle;
  overflow: hidden;
  transition: opacity 350ms ease, transform 350ms ease, background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}
.sv-ram::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 75%);
  pointer-events: none;
}
/* Světlina 87: čára obsahu je vyrytá úplně stejně jako svislé čáry mezi sekcemi:
   tmavá linka a vpravo a pod ní světlý odlesk (uvnitř nahoře a vlevo, venku vpravo
   a dole), v učení stejná jako jinde. Ondra 24. 9. 2026: „dej ji fakt ten design jak
   maj ty čáry odzhora dolu jak dělí hlavní sekce". */
.sv-ram__obrys {
  position: absolute;
  inset: calc(var(--sv-g-ram) - 1px);
  border-radius: calc(var(--sv-r) - var(--sv-g-ram) + 1px);
  corner-shape: squircle;
  border: 1px solid var(--sv-linka);
  box-shadow: inset 1px 1px 0 var(--sv-linka-odlesk), 1px 1px 0 var(--sv-linka-odlesk);
  pointer-events: none;
  z-index: 50;
}
@media (min-width: 768px) {
  .sv-ram {
    flex-direction: row;
  }
}
/* Usporny rezim (slabsi telefon): rozmazani zustava mensi, tabule nesmi zbelat. */
html.coral-nizky-vykon .sv-ram,
html.coral-nizky-vykon .sv-vizitka {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-image: var(--sv-zrno), linear-gradient(158deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.24));
}
/* Oko: zmizi cela tabule, zustane video s prekryvem. Nastroje (zvuk, oko) jsou mimo tabuli, takze zustavaji presne na miste. */
html.sv-skryto .sv-ram,
html.sv-skryto .sv-vstup .sv-vizitka {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}
.sv-vstup .sv-vizitka {
  transition: opacity 350ms ease, transform 350ms ease;
}
html.sv-skryto .sv-nastroje--volne .sv-tl {
  opacity: 0.6;
}
html.sv-skryto .sv-nastroje--volne .sv-tl:hover {
  opacity: 1;
}
/* Cary: tmava linka se svetlym odleskem; konci pred vnitrnim obrysem. */
/* Horni hlavicka (telefon): znak a nazev vlevo, nastroje vpravo. */
.sv-hlavicka {
  display: flex;
  align-items: center;
  height: var(--sv-hlavicka);
  padding: 0 var(--sv-g);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--sv-linka);
  box-shadow: 0 1px 0 var(--sv-linka-odlesk);
}
@media (min-width: 768px) {
  .sv-hlavicka {
    display: none;
  }
}
.sv-znacka {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-znak {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  corner-shape: round;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.55);
}
.sv-hlavicka .sv-znak {
  width: 34px;
  height: 34px;
}
/* Světlina 50: název stojí opticky uprostřed vedle znaku. Box textu se ořízne
   na výšku verzálek od účaří, takže ho zarovnání na střed usadí podle písmen,
   ne podle prázdného místa pro diakritiku a dolní dotahy. */
.sv-znacka__text {
  font-size: var(--sv-znacka);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
  .sv-znacka__text {
    transform: translateY(0.06em);
  }
}
.sv-hlavicka .sv-znacka {
  gap: 7px;
}
.sv-hlavicka .sv-znacka__text {
  font-size: var(--sv-znacka);
}
/* Sloupec predmetu (pocitac). */
.sv-sloupec {
  display: none;
  position: relative;
  flex-direction: column;
  gap: 14px;
  width: var(--sv-sloupec);
  flex-shrink: 0;
  min-height: 0;
  padding: var(--sv-vnitrek) var(--sv-g) var(--sv-g);
}
@media (min-width: 768px) {
  .sv-sloupec {
    display: flex;
  }
}
.sv-sloupec .sv-znacka {
  padding: 0 6px;
}
.sv-ucit {
  width: 100%;
}
.sv-sloupec__nadpis {
  padding: 4px 10px 0;
  font-size: var(--sv-mini);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sv-sloupec__seznam {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: -8px;
}
.sv-sloupec__paticka {
  border-top: 1px solid var(--sv-linka);
  box-shadow: inset 0 1px 0 var(--sv-linka-odlesk);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Radek: polozka seznamu i navigace. */
.sv-radek {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--sv-tl-v);
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: calc(12px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  font-size: var(--sv-text-m);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sv-prechod), border-color var(--sv-prechod), box-shadow var(--sv-prechod);
}
.sv-radek:hover,
.sv-radek:focus-visible {
  background: var(--sv-hover);
}
/* Světlina 41: šipka zpět všude stejně (předmět, učící režim): jen znak, bez
   textu a bez skla, při najetí jemné kolečko (Ondra 22. 9. 2026: „šipka zpět
   nemusí mít text ani design tlačítka"). */
.sv-tl.sv-sipka-zpet {
  width: var(--sv-tl-horni);
  min-height: var(--sv-tl-horni);
  height: var(--sv-tl-horni);
  padding: 0;
  justify-content: center;
  border-color: transparent;
  border-radius: 50%;
  corner-shape: round;
  background: transparent;
  box-shadow: none;
}
.sv-tl.sv-sipka-zpet span {
  display: none;
}
/* Světlina 47: při najetí žádné kolečko ani bublina, šipka jen popojede
   doleva (Ondra 23. 9. 2026: „šipka zpět při hůvrou vypadá celá rozbitá").
   Šipka je všude tahle jedna: předmět, poznámka, dokument, učící režim. */
.sv-tl.sv-sipka-zpet [data-coral-ikona] {
  transition: transform var(--sv-prechod);
}
.sv-tl.sv-sipka-zpet:hover,
.sv-tl.sv-sipka-zpet:active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
@media (hover: hover) {
  .sv-tl.sv-sipka-zpet:hover [data-coral-ikona] {
    transform: translateX(-3px);
  }
}
.sv-tl.sv-sipka-zpet:active [data-coral-ikona] {
  transform: translateX(-5px);
}
/* Světlina 42: potvrzení a přejmenování přímo na místě, žádné bílé okno prohlížeče. */
.sv-potvrzeni {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--sv-maly);
  font-weight: 700;
  animation: sv-prichod 160ms ease;
}
.sv-potvrzeni .sv-tl {
  min-height: var(--sv-tl-maly);
  padding: 0 12px;
  font-size: var(--sv-maly);
}
.sv-potvrzeni__tlacitka {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.sv-potvrzeni--dlouhe {
  display: flex;
  padding: 4px 0 6px;
}
.sv-potvrzeni--dlouhe .sv-potvrzeni__text {
  flex: 1 1 100%;
  font-weight: 600;
  line-height: 1.45;
}
.sv-tl--nebezpeci {
  color: var(--sv-chyba);
}
.sv-polozka.je-potvrzuje {
  flex-wrap: wrap;
}
.sv-polozka.je-potvrzuje > .sv-polozka__hlavni {
  flex: 1 1 180px;
}
.sv-polozka.je-potvrzuje > .sv-potvrzeni {
  margin-left: auto;
  padding: 2px 0 4px;
}
.sv-na-miste {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.sv-na-miste--radek {
  padding: 6px 8px;
}
.sv-na-miste__pole {
  width: 100%;
  min-width: 8ch;
  min-height: var(--sv-tl-maly);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--sv-text);
  letter-spacing: inherit;
  padding: 4px 8px;
  border: 1px solid rgba(242, 177, 52, 0.75);
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(242, 177, 52, 0.22);
  outline: none;
}
.sv-radek.je-aktivni {
  background: var(--sv-aktivni);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--sv-stin-karta);
}
.sv-radek span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Světlina 94: menu tří teček, jedno pro celou aplikaci (položky seznamů i hlavička
   předmětu). Visí nad vším kromě lupy obrázku, pod tlačítkem nebo nad ním. */
.sv-menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border-radius: calc(16px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  backdrop-filter: var(--sv-plovouci-rozmazani);
  -webkit-backdrop-filter: var(--sv-plovouci-rozmazani);
  box-shadow: var(--sv-plovouci-stin);
  color: var(--sv-text);
  font-family: var(--sv-font);
  font-size: var(--sv-text-m);
  line-height: 1.5;
  transform-origin: top right;
  animation: sv-vyskok 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-menu--nahoru {
  transform-origin: bottom right;
  animation-name: sv-vyskok-nahoru;
}
@keyframes sv-vyskok-nahoru {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sv-menu .sv-radek {
  min-height: 40px;
  color: inherit;
}
.sv-menu .sv-radek:focus-visible {
  background: var(--sv-hover);
}
.sv-menu .sv-menu__nebezpecna {
  color: var(--sv-chyba);
}
/* Plocha, nastroje, obrazovky, oddily. */
.sv-plocha {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .sv-plocha::before {
    content: '';
    position: absolute;
    top: var(--sv-okraj-car);
    bottom: var(--sv-okraj-car);
    left: 0;
    width: 1px;
    background: var(--sv-linka);
    box-shadow: 1px 0 0 var(--sv-linka-odlesk);
    pointer-events: none;
    z-index: 3;
  }
}
.sv-plocha__telo {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-nastroje {
  display: flex;
  align-items: center;
  gap: var(--sv-mezera-nastroju);
}
/* Světlina 16: zvuk a oko sedí od vnitřní čáry stejně daleko jako všechno
   ostatní (--sv-g), na počítači v jedné řadě s Učit se v panelu průvodce. */
.sv-nastroje--volne {
  position: fixed;
  z-index: 40;
  top: calc(var(--sv-ram) + 2px + var(--sv-g-ram) + var(--sv-g));
  right: calc(var(--sv-ram) + 2px + var(--sv-g-ram) + var(--sv-g));
}
/* Světlina 50: na telefonu stojí zvuk a oko opticky uprostřed pásu mezi čarou
   rámu a dělicí čarou hlavičky. Od výšky hlavičky se odečte dělicí čára (1 px)
   a k tlačítku se přičte jeho ostrá spodní hrana ze stínu (2 px). */
@media (max-width: 767px) {
  .sv-nastroje--volne {
    top: calc(var(--sv-ram) + 2px + var(--sv-g-ram) + (var(--sv-hlavicka) - 1px - var(--sv-tl-v) - 2px) / 2);
  }
}
.sv-jen-telefon {
  display: none !important;
}
@media (max-width: 767px) {
  .sv-jen-telefon {
    display: inline-flex !important;
  }
  .sv-jen-pocitac {
    display: none !important;
  }
}
.sv-obrazovky {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.sv-obrazovka {
  display: none;
  padding: var(--sv-vnitrek);
  animation: sv-prichod 200ms cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
}
/* Světlina 50: na telefonu je nad nadpisem dělicí čára hlavičky. Mezera pod ní
   je stejná jako mezi nadpisem a podnadpisem, ne poloviční. Na počítači nadpis
   sedí v jedné řadě se znakem a nástroji a mezery už stejné jsou. */
@media (max-width: 767px) {
  .sv-obrazovka {
    padding-top: calc(2 * var(--sv-vnitrek));
  }
}
/* Světlina 58: posuvník hlavní plochy má stálou mezeru vpravo a obsah se o ni
   zprava zkrátí, takže je zleva i zprava stejně daleko od svislých čar a končí
   na stejné hraně jako přehrávač pod ním. Ondra 24. 9. 2026: „ten podklad má
   špatný odsazení od levý a pravé strany". */
@supports selector(::-webkit-scrollbar) {
  @media (pointer: fine), (min-width: 768px) {
    .sv-obrazovky {
      scrollbar-gutter: stable;
    }
    .sv-obrazovka {
      padding-right: max(0px, calc(var(--sv-vnitrek) - 10px));
    }
  }
}
.sv-obrazovka.je-aktivni {
  display: block;
  flex: 1 0 auto;
}
@keyframes sv-prichod {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sv-hlava {
  margin-bottom: 18px;
}
.sv-hlava__veta {
  margin-top: 6px;
  font-size: var(--sv-pismo);
  font-weight: 600;
  color: var(--sv-text-2);
}
.sv-oddil {
  padding: 18px 0;
  border-top: 1px solid var(--sv-linka);
  box-shadow: inset 0 1px 0 var(--sv-linka-odlesk);
  min-width: 0;
}
.sv-oddil:first-of-type {
  border-top: 0;
  box-shadow: none;
  padding-top: 0;
}
/* Oddil v ramecku: seznamy podkladu, dokumentu a karticek maji vlastni kartu. */
.sv-oddil.sv-oddil--ram,
.sv-oddil.sv-oddil--ram:first-of-type,
.sv-dva > .sv-oddil.sv-oddil--ram:nth-child(2) {
  margin-top: var(--sv-mezera-karet);
  padding: var(--sv-karta-y) var(--sv-karta-x);
  border: 1px solid var(--sv-karta-hrana);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: var(--sv-karta-pozadi);
  box-shadow: inset 0 1px 0 var(--sv-karta-odlesk), var(--sv-stin-karta);
}
.sv-oddil--ram .sv-polozka:first-of-type {
  border-top: 0;
  box-shadow: none;
}
/* Světlina 125: oddíl bez rámečku hned pod kartou má odstup jako mezi kartami, ať stín karty
   nepadá do souseda; čáru nahoře nemá, kartu odděluje její vlastní hrana. */
.sv-oddil--ram + .sv-oddil:not(.sv-oddil--ram) {
  margin-top: var(--sv-mezera-karet);
  padding-top: var(--sv-mezera-karet);
  border-top: 0;
  box-shadow: none;
}
.sv-dva:has(> .sv-oddil--ram) {
  gap: 0 var(--sv-mezera-karet);
}
.sv-oddil__hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sv-dva {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
}
@media (min-width: 768px) {
  .sv-dva {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
  .sv-dva > .sv-oddil:nth-child(2) {
    border-top: 0;
    box-shadow: none;
    padding-top: 0;
  }
}
.sv-prazdno {
  padding: 10px 0;
  font-weight: 600;
  color: var(--sv-text-2);
}
.sv-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sv-mezera-karet);
}
.sv-karta,
.sv-dlazdice {
  border: 1px solid var(--sv-karta-hrana);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: var(--sv-karta-pozadi);
  box-shadow: inset 0 1px 0 var(--sv-karta-odlesk), var(--sv-stin-karta);
}
/* Světlina 41: předmět je všude řádek (ikona vlevo, název a věta vedle ní), na PC ve
   sloupcích, na telefonu pod sebou; dřív měl PC kostky s ikonou nad názvem a působilo
   to rozbitě (Ondra 23. 9. 2026: „stránka předmětů na počítači ... rozbitá"). */
.sv-dlazdice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  min-height: 0;
  padding: 12px 14px;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sv-prechod);
}
.sv-dlazdice > [data-coral-ikona],
.sv-dlazdice > svg {
  grid-row: 1 / 3;
  grid-column: 1;
}
.sv-dlazdice > svg {
  width: var(--sv-ikona);
  height: var(--sv-ikona);
}
.sv-dlazdice__nazev,
.sv-dlazdice__veta {
  grid-column: 2;
  min-width: 0;
}
.sv-dlazdice:hover,
.sv-dlazdice:focus-visible {
  background: var(--sv-aktivni);
}
.sv-dlazdice__nazev {
  font-size: var(--sv-h3);
  font-weight: 700;
  line-height: 1.3;
}
.sv-dlazdice__veta {
  font-size: var(--sv-maly);
  font-weight: 600;
  color: var(--sv-text-2);
}
/* Telefon nema levy sloupec: Vystupy a Profil jsou na dosah z Prehledu. */
.sv-cislo {
  font-size: clamp(36px, calc(32.69px + 0.884vw), 48px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.sv-stred {
  flex: 1;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
/* TLACITKO: jedina vystoupla vec. Dve podoby tehoz tvaru: zlute (hlavni) a sklenene. Text je v nem zarezany. */
.sv-tl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--sv-tl-v);
  padding: 0 clamp(14px, calc(12.67px + 0.354vw), 18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.1), var(--sv-stin-tl);
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  font-size: var(--sv-tl-pismo);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow var(--sv-prechod), background var(--sv-prechod), opacity var(--sv-prechod);
}
.sv-tl:hover,
.sv-tl:focus-visible,
.sv-tl.je-otevrene {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
}
.sv-tl:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 6px -4px rgba(0, 0, 0, 0.35);
}
.sv-tl--akcent {
  background: var(--sv-zluta);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--sv-stin-akcent);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.sv-tl--akcent:hover,
.sv-tl--akcent:focus-visible {
  background: var(--sv-zluta-tmava);
}
.sv-tl--ikona {
  width: var(--sv-tl-v);
  padding: 0;
}
.sv-tl.je-aktivni {
  border-color: rgba(255, 236, 180, 0.9);
  background: linear-gradient(180deg, var(--sv-zluta-svetla), var(--sv-zluta));
}
.sv-tl[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.sv-tl.je-pracuje {
  position: relative;
  pointer-events: none;
}
/* Ondra 22. 9. 2026: „ty hlasy v nastavení dám play, tak to tlačítko play tam
   zůstane vidět pod tím načítáním." Ikona mizí úplně, zůstane jen kolečko. */
.sv-tl.je-pracuje > * {
  opacity: 0;
}
.sv-tl.je-pracuje::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  corner-shape: round;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: sv-toc 700ms linear infinite;
}
.sv-tl--ikona.je-pracuje::after {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}
@keyframes sv-toc {
  to {
    transform: rotate(360deg);
  }
}
/* SDILENI (Světlina 217): panel z jádra pluginu (coral_sdileni_panel), vzhled je tady.
   Hlavní je velké žluté Zkopírovat odkaz (třídy .sv-tl), pod ním kulatá skleněná
   tlačítka aplikací ze stejného materiálu jako .sv-tl, znak v barvě značky. */
.sv-sdileni {
  display: grid;
  justify-items: center;
  gap: clamp(10px, calc(8.34px + 0.442vw), 14px);
  width: 100%;
  max-width: 400px;
}
.sv-sdileni__kopiruj {
  width: 100%;
  min-height: calc(var(--sv-tl-v) + 10px);
  font-size: var(--sv-pismo);
}
.sv-sdileni__kopiruj .coral-sdileni-panel__ikona {
  display: inline-grid;
  place-items: center;
}
.sv-sdileni__kopiruj .coral-sdileni-znak {
  width: 20px;
  height: 20px;
}
.sv-sdileni[data-coral-sdileno] .coral-sdileni-panel__ikona:not([hidden]) {
  animation: sv-sdileni-hotovo 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sv-sdileni-hotovo {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sv-sdileni .coral-sdileni-panel__nadpis {
  margin: 4px 0 0;
  font-size: var(--sv-mini);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  opacity: 0.75;
}
.sv-sdileni .coral-sdileni-panel__cile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(6px, calc(2.68px + 0.884vw), 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-sdileni__cil {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 62px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sv-sdileni__cil .coral-sdileni-panel__znacka {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  corner-shape: round;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.1), var(--sv-stin-tl);
  color: var(--sv-znacka, var(--sv-text));
  transition: transform 120ms ease, box-shadow var(--sv-prechod), background var(--sv-prechod);
}
.sv-sdileni__cil .coral-sdileni-znak {
  width: 24px;
  height: 24px;
}
.sv-sdileni__cil .coral-sdileni-panel__nazev {
  font-size: var(--sv-mini);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-sdileni__cil[data-znacka="messenger"] {
  --sv-znacka: #0a7cff;
}
.sv-sdileni__cil[data-znacka="whatsapp"] {
  --sv-znacka: #1a9e4f;
}
.sv-sdileni__cil[data-znacka="instagram"] {
  --sv-znacka: #d62976;
}
.sv-sdileni__cil[data-znacka="telegram"] {
  --sv-znacka: #1f8fcf;
}
@media (hover: hover) {
  .sv-sdileni__cil:hover .coral-sdileni-panel__znacka {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
    transform: translateY(-2px);
  }
}
.sv-sdileni__cil:focus-visible .coral-sdileni-panel__znacka {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--sv-stin-tl), 0 0 0 3px rgba(242, 177, 52, 0.55);
}
.sv-sdileni__cil:active .coral-sdileni-panel__znacka {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .sv-sdileni[data-coral-sdileno] .coral-sdileni-panel__ikona:not([hidden]) {
    animation: none;
  }
  .sv-sdileni__cil .coral-sdileni-panel__znacka {
    transition: none;
  }
}
/* POLE */
.sv-pole {
  width: 100%;
  min-height: var(--sv-tl-v);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  color: var(--sv-text);
  font-size: var(--sv-pole-pismo);
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.1), var(--sv-stin-tl);
  transition: border-color var(--sv-prechod), background-color var(--sv-prechod);
}
.sv-pole::placeholder {
  color: var(--sv-text-2);
  opacity: 0.75;
}
select.sv-pole,
select.sv-pole option,
.sv-pole {
  color: var(--sv-text);
  font-weight: 600;
}
.sv-pole:focus {
  border-color: rgba(255, 221, 130, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-tl);
}
textarea.sv-pole {
  resize: none;
  overflow: hidden;
}
/* Světlina 129: dlouhý název volby (hlas s popisem) končí na úzkém telefonu třemi tečkami, ne useknutým písmenem. */
select.sv-pole {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-popisek {
  display: block;
  font-size: var(--sv-maly);
  font-weight: 700;
  margin-bottom: 6px;
}
/* Světlina 74: vysvětlující věta nad formulářem, zalomí se celá, nic se neusekne. */
.sv-napoveda {
  margin: 0 0 12px;
  font-size: var(--sv-mini);
  font-weight: 600;
  line-height: 1.45;
  color: var(--sv-text-2);
}
.sv-formular {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sv-formular__akce {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.sv-formular__akce--stred {
  justify-content: center;
}
/* Svetlina 66: nejvys dva sloupce, pod 328 px jeden; bez zlomu podle sirky okna. */
.sv-mrizka-tlacitek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(160px, calc(50% - 4px))), 1fr));
  gap: 8px;
  width: 100%;
}
.sv-mrizka-tlacitek .sv-tl {
  width: 100%;
  padding-left: 14px;
  padding-right: 12px;
  justify-content: flex-start;
  text-align: left;
}
.sv-mrizka-tlacitek .sv-tl:nth-child(odd):last-child {
  grid-column: 1 / -1;
}
.sv-mrizka-tlacitek .sv-tl[hidden] {
  display: none;
}
.sv-mrizka-tlacitek .sv-tl {
  min-width: 0;
}
.sv-mrizka-tlacitek .sv-tl span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .sv-vizitka {
    padding: 24px 18px;
  }
}
.sv-hlaska {
  font-size: var(--sv-pismo);
  color: var(--sv-chyba);
  min-height: 20px;
  font-weight: 600;
}
/* Světlina 18: řada diktování pod polem formuláře, tatáž složená řada jako v chatu. */
.coral-dikt.sv-dikt {
  margin-top: 6px;
  container-type: normal;
}
/* Pole zadani ve tvaru skladace (jako pole chatu vpravo): text nahore, hlas dole uvnitr ramecku.
   Světlina 97: v jádře, má ho tvorba dokumentu i přání na vylepšení. */
.sv-zadani {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 8px;
  border-radius: calc(18px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--sv-stin-karta);
  transition: border-color var(--sv-prechod), box-shadow var(--sv-prechod);
}
.sv-zadani:focus-within {
  border-color: rgba(255, 221, 130, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-karta);
}
.sv-zadani textarea {
  width: 100%;
  min-height: 72px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--sv-pole-pismo);
  line-height: 1.5;
  resize: none;
  padding: 6px;
}
.sv-zadani textarea::placeholder {
  color: var(--sv-text-2);
  opacity: 0.9;
}
.sv-zadani__editor {
  --coral-ed-px: 6px;
  --coral-ed-py: 6px;
}
.sv-zadani__editor .coral-ed__plocha {
  min-height: 72px;
  max-height: 40vh;
}
.sv-zadani .coral-dikt.sv-dikt {
  margin-top: 0;
}
/* Světlina 161: boxík, který dostane pole samo (CoralDiktovani.vsude v 001-svetlina.js).
   Rámeček nese boxík, pole uvnitř je jen plocha na text, stejně jako u Přání. */
.sv-zadani > .sv-pole,
.sv-zadani > .sv-pole:focus,
.sv-zadani > .coral-ed.sv-pole,
.sv-zadani > .coral-ed.sv-pole:focus-within {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.sv-zadani > input.sv-pole {
  min-height: 0;
  padding: 6px;
}
.sv-zadani--samo {
  width: 100%;
  min-width: 0;
}
/* Hledání a nadpisy v listu poznámek: mikrofon přímo v řádku pole, rámeček nese řádek. */
:is(.sv-ram, .sv-panel-koren) .sv-pole.sv-pole--s-hlasem {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px 0 0;
  min-width: 0;
}
:is(.sv-ram, .sv-panel-koren) .sv-pole.sv-pole--s-hlasem:focus-within {
  border-color: rgba(255, 221, 130, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-tl);
}
.sv-pole--s-hlasem > :is(input, textarea, .coral-ed) {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.sv-pole--s-hlasem > .sv-pole,
.sv-pole--s-hlasem > .sv-pole:focus {
  min-height: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.sv-pole--s-hlasem > .coral-dikt.sv-dikt {
  flex: none;
  margin: 0;
}
:is(.sv-ram, .sv-panel-koren) .sv-pole.sv-pole--tichy,
:is(.sv-ram, .sv-panel-koren) .sv-pole.sv-pole--tichy:focus-within {
  min-height: 0;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-items: flex-start;
}
/* Nahrávací plocha (předmět); Světlina 97: v jádře spolu s tlačítkem, které nese skryté pole souboru. */
.sv-nahrat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  margin-bottom: 8px;
  padding: 16px;
  border: 1px dashed rgba(20, 28, 24, 0.4);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--sv-prechod), border-color var(--sv-prechod);
}
.sv-nahrat:hover {
  background: var(--sv-aktivni);
  border-color: var(--sv-text);
}
.sv-nahrat__limit {
  font-size: var(--sv-mini);
  font-weight: 600;
  color: var(--sv-text-2);
}
.sv-tl:has(input[type="file"]:focus-visible) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-tl);
}
@media (max-width: 767px) {
  .sv-nahrat {
    min-height: 0;
    padding: 12px;
    flex-direction: row;
    gap: 10px;
    text-align: left;
  }
  .sv-nahrat__limit {
    display: none;
  }
}
/* Světlina 115: psaní rukou. Plátno má linky jako list sešitu (řádek pro ruku je vyšší
   než pro písmo), v jeho rohu stav převodu a pod ním nástroje. Inkoust má barvu textu, plátno ji
   čte z color; tahy, které se právě převádějí, jsou bledé. */
.sv-rukopis {
  --sv-rukopis-radek: clamp(44px, calc(41.52px + 0.663vw), 50px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-rukopis[hidden] {
  display: none;
}
.sv-rukopis__plocha {
  position: relative;
  height: calc(var(--sv-rukopis-radek) * 3.5);
  overflow: hidden;
  border: 1px solid var(--sv-karta-hrana);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background-color: var(--sv-karta-pozadi);
  background-image: linear-gradient(to bottom, transparent calc(var(--sv-rukopis-radek) - 1px), var(--sv-linka-listu, rgba(20, 28, 24, 0.11)) calc(var(--sv-rukopis-radek) - 1px));
  background-size: 100% var(--sv-rukopis-radek);
  box-shadow: inset 0 1px 0 var(--sv-karta-odlesk), var(--sv-stin-karta);
}
.sv-rukopis__platno {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--sv-text);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sv-rukopis__vyzva {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--sv-karta-x);
  font-size: var(--sv-pismo-s);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--sv-text-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sv-prechod);
}
.sv-rukopis.je-prazdne .sv-rukopis__vyzva {
  opacity: 0.6;
}
/* Pod plátnem jen nástroje vlevo a Hotovo vpravo. */
.sv-rukopis__lista {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sv-rukopis__lista .sv-rukopis__hotovo {
  margin-left: auto;
}
.sv-rukopis__lista .sv-tl:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Stav převodu je malý štítek v rohu plátna. Schovává se průhledností, ne display,
   ať zůstane živou oblastí, kterou čtečka přečte. Psaní pod ním nebrání. */
.sv-rukopis__stav {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  padding: 6px 12px;
  border-radius: 999px;
  corner-shape: round;
  border: 1px solid var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  box-shadow: var(--sv-stin-tl);
  font-size: var(--sv-mini);
  font-weight: 700;
  color: var(--sv-text-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sv-prechod);
}
.sv-rukopis.je-prevadi .sv-rukopis__stav {
  opacity: 1;
}
.sv-rukopis:not(.je-prevadi) .sv-rukopis__stav .sv-kolecko {
  animation: none;
}
/* POSUVNIK */
.sv-posuvnik {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 999px;
  corner-shape: round;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--sv-zluta) 0, var(--sv-zluta) var(--sv-hodnota, 40%), rgba(20, 28, 24, 0.18) var(--sv-hodnota, 40%));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sv-posuvnik::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  corner-shape: round;
  background: linear-gradient(180deg, #fff, #e9ece7);
  border: 1px solid rgba(20, 28, 24, 0.25);
  box-shadow: inset 0 1px 0 var(--sv-odlesk), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 #fff;
}
.sv-posuvnik::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  corner-shape: round;
  background: linear-gradient(180deg, #fff, #e9ece7);
  border: 1px solid rgba(20, 28, 24, 0.25);
  box-shadow: inset 0 1px 0 var(--sv-odlesk), 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* Karta zvuku. */
.sv-zvuky {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
  max-width: calc(100vw - 2 * var(--sv-ram) - 24px);
  padding: 8px;
  border-radius: calc(16px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  backdrop-filter: var(--sv-plovouci-rozmazani);
  -webkit-backdrop-filter: var(--sv-plovouci-rozmazani);
  box-shadow: var(--sv-plovouci-stin);
  pointer-events: auto;
}
.sv-zvuky[hidden] {
  display: none;
}
/* Světlina 40: řádky nálad mají mezi sebou 4 px, ať stín vybraného nesahá na sousední. */
.sv-zvuky__ovladani {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
  margin-top: 2px;
  border-top: 1px solid var(--sv-linka);
  box-shadow: inset 0 1px 0 var(--sv-linka-odlesk);
}
.sv-slogan {
  flex-shrink: 0;
  margin: auto 0 0;
  padding: 4px var(--sv-vnitrek) 10px;
  font-size: var(--sv-mini);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.sv-slogan.je-mizi {
  opacity: 0;
}
@media (max-width: 767px) {
  .sv-slogan {
    display: none;
  }
}
/* Hlasky a prubeh prace: vzdy videt, nahore uprostred. */
.sv-hlasky {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.sv-hlaska-karta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: calc(22px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(250, 251, 248, 0.9399999999999999);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
  font-size: var(--sv-pismo);
  font-weight: 600;
  text-shadow: 0 1px 0 var(--sv-odlesk);
  animation: sv-prichod 200ms ease;
  transition: opacity 300ms ease;
}
.sv-hlaska-karta.je-chyba {
  color: var(--sv-chyba);
}
/* Světlina 28: hlášky i návod k instalaci z pluginu jsou šalvějové sklo
   aplikace (ne bílá krabice, ne tmavý panel Coralu) a sedí nahoře uprostřed,
   takže nikdy nepřekryjí pole chatu. */
.sv-hlaska-karta {
  border-color: var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  box-shadow: var(--sv-plovouci-stin);
}
body .coral-pwa-navod {
  left: 16px;
  right: 16px;
  top: calc(var(--sv-ram) + 14px);
  bottom: auto;
  margin: 0 auto;
  width: fit-content;
  max-width: 460px;
  padding: 10px 16px;
  border-radius: calc(18px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  color: var(--sv-text);
  font-family: var(--sv-font);
  font-size: var(--sv-pismo);
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px 0 var(--sv-odlesk);
  box-shadow: var(--sv-plovouci-stin);
}
.sv-hlaska-karta.je-pryc {
  opacity: 0;
}
/* Světlina 114: běžící tvorba jde zrušit přímo z karty. Kliknutí bere jen tlačítko, zbytek hlášek ho propouští dál. */
.sv-hlaska-karta .sv-hlaska-karta__zrus {
  pointer-events: auto;
  min-height: 40px;
  margin: -8px -10px -8px 2px;
  padding: 0 16px;
  border-radius: 999px;
  corner-shape: round;
  font-size: var(--sv-maly);
}
/* Světlina 137: karty s volbou (uložit přílohu nebo video k předmětu) berou klepnutí na svá pole a tlačítka. */
.sv-hlaska-karta button,
.sv-hlaska-karta input,
.sv-hlaska-karta select,
.sv-hlaska-karta textarea,
.sv-hlaska-karta a,
.sv-hlaska-karta label {
  pointer-events: auto;
}
/* Na telefonu leží zvuk a oko nad tabulí, takže hlášky sedí až pod hlavičkou: nic
   nezakryjí a Zrušit jde vždycky stisknout. Široké jako obsah, delší text se zalomí. */
@media (max-width: 767px) {
  .sv-hlasky {
    top: calc(var(--sv-g-ram) + var(--sv-hlavicka) + 8px);
    left: calc(var(--sv-g-ram) + var(--sv-g));
    right: calc(var(--sv-g-ram) + var(--sv-g));
    width: auto;
    max-width: none;
    transform: none;
  }
  .sv-hlaska-karta {
    max-width: 100%;
  }
}
/* Světlina 132: na počítači stojí hlášky nad prostředním sloupcem a delší text se
   zalomí, takže nepřekryjí levý sloupec ani tlačítka panelu průvodce. */
@media (min-width: 768px) {
  .sv-hlasky {
    left: calc(50% + (var(--sv-sloupec) - var(--sv-panel)) / 2);
    max-width: calc(100% - 2 * var(--sv-g-ram) - var(--sv-sloupec) - var(--sv-panel) - 4 * var(--sv-g));
  }
}
.sv-kolecko {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  corner-shape: round;
  border: 2px solid var(--sv-zluta-tmava);
  border-right-color: transparent;
  animation: sv-toc 700ms linear infinite;
  flex-shrink: 0;
}
/* PANEL PRUVODCE: motor z pluginu, vzhled odsud. Vpravo na pocitaci, list na telefonu, stred v ucicim modu. */
.sv-asistent {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}
.sv-asistent::before {
  content: '';
  position: absolute;
  top: var(--sv-okraj-car);
  bottom: var(--sv-okraj-car);
  left: 0;
  width: 1px;
  background: var(--sv-linka);
  box-shadow: 1px 0 0 var(--sv-linka-odlesk);
  pointer-events: none;
  display: none;
}
/* Svetlina 67: panel, ktery aplikace nevsadila (prihlasovaci obrazovka, clovek bez uctu), se nekresli. */
.coral-asistent:not(.sv-panel-koren) {
  display: none !important;
}
.coral-asistent.sv-panel-koren {
  position: static;
  inset: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--sv-text);
  --coral-asistent-plocha: transparent;
  --coral-asistent-text: var(--sv-text);
}
.sv-panel-koren .coral-asistent__bublina,
.sv-panel-koren [data-as="zavrit"],
.sv-panel-koren .coral-asistent__znak,
.sv-panel-koren .coral-asistent__napoveda,
.sv-panel-koren .coral-asistent__jmeno {
  display: none !important;
}
.sv-panel-koren .coral-asistent__panel {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  background: transparent;
  overflow: visible;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.sv-panel-koren .coral-asistent__panel {
  position: relative;
}
.sv-panel-koren .coral-asistent__hlava {
  position: absolute;
  right: 0;
  top: -44px;
  z-index: 3;
  padding: 0;
  min-height: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}
#sv-asistent .coral-asistent__hlava {
  top: 2px;
}
.sv-panel-koren .coral-asistent__rezimPopis {
  display: none !important;
}
/* Světlina 29: okénka režimů a vlastní volby modelu a snažení z pluginu se v aplikaci
   nekreslí nikde, ani v učícím režimu; nastavuje se to v Nastavení. */
.sv-panel-koren .coral-asistent__rezimy,
.sv-panel-koren .coral-asistent__vlastni,
#sv-asistent .coral-asistent__rezimy,
#sv-asistent .coral-asistent__vlastni {
  display: none !important;
}
#sv-asistent .coral-asistent__hlava {
  right: 104px;
}
.sv-panel-koren .coral-asistent__ikonka {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  color: var(--sv-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-panel-koren .coral-asistent__ikonka:hover {
  background: var(--sv-hover);
}
.sv-panel-koren .coral-asistent__ikonka svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 0 var(--sv-odlesk)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
.sv-panel-koren .coral-asistent__telo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 10px;
  margin: 0 -2px;
}
/* Světlina 56: odrolovaný obsah měkce mizí pod horní řadou v bočním chatu i v učení,
   hloubku přechodu nastavuje jádro chatu podle odrolování (009-chat.js). */
.sv-panel-koren .coral-asistent__telo {
  --sv-odrolovano: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sv-odrolovano));
  mask-image: linear-gradient(to bottom, transparent, #000 var(--sv-odrolovano));
}
.sv-panel-koren .coral-asistent__uvod {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--sv-text-m);
  font-weight: 600;
}
.sv-panel-koren .coral-asistent__zprava {
  margin: 0;
  outline: none;
}
.sv-zprava,
.sv-panel-koren .coral-asistent__zprava {
  max-width: 92%;
  white-space: pre-wrap;
  padding: 10px 14px;
  border-radius: calc(16px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  font-size: var(--sv-text-m);
  line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--sv-stin-karta);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.sv-panel-koren .coral-asistent__zprava--ja {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(255, 211, 107, 0.75), rgba(242, 177, 52, 0.6));
  border-bottom-right-radius: calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
}
.sv-panel-koren .coral-asistent__zprava--on {
  align-self: flex-start;
  border-bottom-left-radius: calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
}
.sv-panel-koren .coral-asistent__zprava--chyba {
  color: var(--sv-chyba);
}
/* Plugin kresli odpoved pruvodce bez ramecku (pravidlo se ctyrmi tridami). Svetlina ma ramecek na obou stranach. */
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__zprava.coral-asistent__zprava--on,
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__zprava.coral-asistent__zprava--chyba {
  max-width: 92%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.46);
  border-radius: calc(16px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1)) calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
}
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__zprava.coral-asistent__zprava--ja {
  border-radius: calc(16px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1)) calc(6px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
}
.sv-panel-koren .coral-asistent__podpis {
  display: none;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}
/* Karta „udělal jsem to a to". Ondra 22. 9. 2026: „vytvořil jsem třeba
   kartičky ... využití nástrojů tak jsou špatně designovaný, to uprav,
   vylepši." Dřív to byla bledá pilulka s bílou linkou, splývala se zprávami
   a nebylo z ní poznat, co se vlastně stalo. Teď je to karta se žlutým
   sloupečkem vlevo a znakem v kroužku; bílá linka pryč, hrana je naše. */
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__akce.coral-asistent__akce {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 2px 0;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--sv-linka);
  border-left: 3px solid var(--sv-zluta);
  border-radius: calc(6px * var(--sv-roh-hladky, 1)) calc(14px * var(--sv-roh-hladky, 1)) calc(14px * var(--sv-roh-hladky, 1)) calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: linear-gradient(90deg, rgba(242, 177, 52, 0.16), rgba(255, 255, 255, 0.22));
  box-shadow: var(--sv-stin-tl);
  font-size: var(--sv-maly);
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__akce.coral-asistent__akce svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  corner-shape: round;
  background: var(--sv-zluta);
  color: #2a1d05;
}
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__akce.coral-asistent__akce span {
  min-width: 0;
}
.sv-panel-koren.coral-asistent.coral-asistent .coral-asistent__akce.coral-asistent__akce button {
  flex-shrink: 0;
}
.sv-panel-koren .coral-asistent__cekani {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: calc(16px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1)) calc(16px * var(--sv-roh-hladky, 1)) calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sv-panel-koren .coral-asistent__cekani span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  corner-shape: round;
  background: var(--sv-text);
  opacity: 0.35;
  animation: sv-tecky 1.1s infinite ease-in-out;
}
.sv-panel-koren .coral-asistent__cekani span:nth-child(2) {
  animation-delay: 0.18s;
}
.sv-panel-koren .coral-asistent__cekani span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes sv-tecky {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}
.sv-zprava__nastroje {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.sv-zprava__nastroje button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sv-tl-maly);
  padding: 0 10px;
  border-radius: 999px;
  corner-shape: round;
  border: 1px solid rgba(20, 28, 24, 0.18);
  background: rgba(255, 255, 255, 0.6);
  font-size: var(--sv-mini);
  font-weight: 700;
  cursor: pointer;
}
.sv-zprava__nastroje [data-coral-ikona] {
  filter: none;
}
/* Rezimy: Rychly, Chytry, Vlastni; pod nimi presny model. */
.sv-panel-koren .coral-asistent__rezimy {
  order: -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  padding: 3px;
  margin: 0 0 4px;
  border-radius: 999px;
  corner-shape: round;
  background: rgba(20, 28, 24, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sv-panel-koren .coral-asistent__rezim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--sv-tl-maly);
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  corner-shape: round;
  background: transparent;
  font-size: var(--sv-tl-pismo);
  font-weight: 700;
  color: var(--sv-text);
  cursor: pointer;
  box-shadow: none;
}
.sv-panel-koren .coral-asistent__rezim svg {
  width: 15px;
  height: 15px;
}
.sv-panel-koren .coral-asistent__rezimy {
  position: relative;
}
.sv-panel-koren .coral-asistent__rezimy::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 999px;
  corner-shape: round;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.8));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-panel-koren .coral-asistent__rezimy:has(.coral-asistent__rezim:nth-child(2).je-vybrany)::before {
  transform: translateX(100%);
}
.sv-panel-koren .coral-asistent__rezimy:has(.coral-asistent__rezim:nth-child(3).je-vybrany)::before {
  transform: translateX(200%);
}
.sv-panel-koren .coral-asistent__rezim {
  position: relative;
  z-index: 1;
}
.sv-panel-koren .coral-asistent__rezim.je-vybrany {
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-panel-koren .coral-asistent__rezimPopis {
  order: -1;
  margin: 0 4px 8px;
  font-size: var(--sv-mini);
  font-weight: 700;
}
.sv-panel-koren .coral-asistent__vlastni {
  order: -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px;
}
.sv-panel-koren .coral-asistent__vlastni[hidden] {
  display: none;
}
.sv-panel-koren .coral-asistent__vyber {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--sv-mini);
  font-weight: 700;
}
.sv-panel-koren .coral-asistent__vyber select {
  width: 100%;
  min-height: var(--sv-tl-maly);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.5);
  font-size: var(--sv-pole-pismo);
}
/* Skladac: jedno pole se vsim. Plus misto sponky, jedna ikona hlasu, kulate odeslani. */
.sv-panel-koren .coral-asistent__prilohy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px;
}
.sv-panel-koren .coral-asistent__prilohy:empty {
  display: none;
}
.sv-panel-koren .coral-asistent__priloha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  corner-shape: round;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-panel-koren .coral-asistent__spodek {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: 'pole pole pole pole pole' 'plus hlas . hluboko poslat' 'karta karta karta karta karta';
  align-items: center;
  gap: 2px 4px;
  padding: 10px 10px 8px;
  border-radius: calc(18px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.05), var(--sv-stin-karta);
  transition: border-color var(--sv-prechod), background-color var(--sv-prechod);
}
.sv-panel-koren .coral-asistent__spodek:focus-within {
  border-color: rgba(255, 221, 130, 0.95);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-karta);
}
.sv-panel-koren .coral-asistent__poleObal {
  grid-area: pole;
  position: relative;
  display: block;
  min-width: 0;
}
.sv-panel-koren .coral-asistent__vstup {
  display: block;
  width: 100%;
  height: auto;
  min-height: 34px;
  max-height: 180px;
  padding: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sv-text);
  font-size: var(--sv-pole-pismo);
  line-height: 1.45;
  resize: none;
  field-sizing: content;
}
/* Světlina 53: pole chatu roste s textem samo a přesně (field-sizing), posuvník
   ukáže, až text přeroste strop. Výšky z JS pluginu i jádra se tu nepoužijí:
   počítaly se zaokrouhlenou výškou, pole bylo o zlomek pixelu nižší než řádek
   a Chrome na PC v něm ukázal posuvník jen se šipkami. Ondra 24. 9. 2026:
   „Vpravo vidím šipčky nahoru dolu na počítači. Nevím, co to má znamenat." */
@supports (field-sizing: content) {
  .sv-panel-koren .coral-asistent__vstup {
    height: auto !important;
  }
}
.sv-panel-koren .coral-asistent__poleObal {
  padding: 0;
  margin: 0;
}
.sv-panel-koren .coral-asistent__vyzva {
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  display: block;
  height: auto;
  align-items: initial;
  line-height: 1.45;
  padding: 0;
  margin: 0;
  font-size: var(--sv-pole-pismo);
  font-weight: 600;
  color: var(--sv-text-2);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 300ms ease;
}
.sv-panel-koren .coral-asistent__vyzva.je-prolnuta {
  opacity: 0;
}
/* Světlina 18: řada diktování z pluginu sedí v mřížce pole: ikona mikrofonu
   v buňce hlas, způsoby se rozbalí vedle ní do volného místa, stav a karta
   s QR kódem pod řádkem, pořád uvnitř rámečku pole. */
.sv-panel-koren .coral-asistent__spodek .coral-dikt__rada {
  grid-area: hlas;
}
/* Světlina 76: plugin tiskne řadu diktování ke spodku řádku, takže mikrofon na PC
   seděl o 2 px níž než plus a odeslání. Řada sedí na středu a plus má stejnou
   kostičku jako mikrofon (Ondra 24. 9. 2026: „ta ikonka není vecentrovaná v tom
   chatu stejně jako tlačítko plus"). Kostička plusu má velikost z jádra (--sv-tl-maly). */
.sv-panel-koren .coral-asistent__spodek .coral-dikt__rada {
  align-self: center;
}
/* Rozbalené způsoby potřebují místo v řádku, přepínač Do hloubky se do té doby
   schová. Světlina 77: neschová se skokem, ale sjede ve stejném tempu, jakým se
   vedle vysunou způsoby diktování, takže řádek nikdy nepřeteče. */
.sv-panel-koren .sv-panel__hluboko {
  max-width: 14rem;
  overflow: hidden;
  transition: max-width 300ms cubic-bezier(0.22, 1, 0.36, 1), padding 300ms cubic-bezier(0.22, 1, 0.36, 1), border-width 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 0s, background-color var(--sv-prechod), border-color var(--sv-prechod);
}
.sv-panel-koren .coral-asistent__spodek:has(.coral-dikt.je-rozbaleno) .sv-panel__hluboko {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-width 300ms cubic-bezier(0.22, 1, 0.36, 1), padding 300ms cubic-bezier(0.22, 1, 0.36, 1), border-width 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease, visibility 0s linear 300ms;
}
/* Telefon: pole zprávy je taky cíl pro prst, aspoň 40 px. Na PC výchozí nula,
   ať pole při diktování roste plynule (z auto by skočilo; Světlina 159). */
.sv-panel-koren .coral-asistent__vstup {
  min-height: 0;
}
@media (max-width: 767px) {
  .sv-panel-koren .coral-asistent__vstup {
    min-height: 40px;
  }
}
/* Upgrader2 198: při diktování se řádek pole zvětší (víc místa, větší rohy), psaní rukou zůstává úzké. Ondra 7. 10. 2026: „To má větší roky to je správně ale když to píše člověk tak to má být uzoučký normálně“. */
.sv-panel-koren .coral-asistent__spodek {
  transition: border-color var(--sv-prechod), background-color var(--sv-prechod), border-radius 260ms ease;
}
.sv-panel-koren .coral-asistent__vstup {
  transition: min-height 260ms ease;
}
.sv-panel-koren .coral-asistent__spodek.je-diktovano {
  border-radius: calc(26px * var(--sv-roh-hladky, 1));
}
.sv-panel-koren .coral-asistent__spodek.je-diktovano .coral-asistent__vstup {
  min-height: 96px;
}
.sv-panel-koren .coral-asistent__spodek .coral-dikt__karta {
  grid-area: karta;
  margin: 8px 0 2px;
}
/* Karta s QR kódem je sklo jako ostatní karty; bílý zůstává jen sám kód, ten ho pro čtečku potřebuje. */
.sv-ram .coral-dikt__karta {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--sv-stin-karta);
  color: var(--sv-text);
}
.sv-ram .coral-dikt__nadpis {
  color: var(--sv-text);
  font-size: var(--sv-pismo);
  font-weight: 700;
}
.sv-ram .coral-dikt__veta {
  color: var(--sv-text-2);
  font-size: var(--sv-maly);
}
.sv-ram .coral-dikt__odkaz {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.34);
  color: var(--sv-text-2);
}
.sv-ram .coral-dikt__btn {
  min-height: var(--sv-tl-maly);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  color: var(--sv-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--sv-stin-tl);
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
/* Světlina 140: hláška diktování je plovoucí pilulka z šalvějového skla nad polem
   (jako štítek převodu rukopisu), ne řádek pod ním, takže tlačítka neposkočí.
   Ondra 1. 10. 2026: „by se mělo objevit NAD tím ne pod tím". */
.sv-ram .coral-dikt__stav.coral-dikt__stav,
.sv-panel-koren .coral-dikt__stav.coral-dikt__stav {
  border: 1px solid var(--sv-plovouci-hrana);
  background: var(--sv-plovouci);
  -webkit-backdrop-filter: var(--sv-plovouci-rozmazani);
  backdrop-filter: var(--sv-plovouci-rozmazani);
  box-shadow: var(--sv-plovouci-stin);
  font-size: var(--sv-mini);
  font-weight: 700;
  color: var(--sv-text-2);
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-ram .coral-dikt__stav.coral-dikt__stav[data-druh="chyba"],
.sv-panel-koren .coral-dikt__stav.coral-dikt__stav[data-druh="chyba"] {
  color: var(--sv-chyba);
}
.sv-panel-koren .coral-asistent__spona {
  grid-area: plus;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sv-tl-maly);
  height: var(--sv-tl-maly);
  padding: 0;
  border: 0;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  box-shadow: none;
  color: var(--sv-text);
  cursor: pointer;
}
.sv-panel__hluboko {
  grid-area: hluboko;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--sv-tl-maly);
  padding: 0 12px 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  corner-shape: round;
  background: transparent;
  color: var(--sv-text);
  font-size: var(--sv-tl-pismo);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sv-prechod), border-color var(--sv-prechod);
}
.sv-panel__hluboko:hover {
  background: rgba(20, 28, 24, 0.08);
}
.sv-panel__hluboko.je-aktivni {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.82));
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
/* Světlina 17: plugin bere tlačítkům v panelu stín textu, přepínač má vyříznutí jako všechno ostatní. */
.sv-panel-koren .sv-panel__hluboko,
.sv-panel-koren .sv-panel__hluboko span {
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-panel-koren .coral-asistent__spona:hover {
  background: rgba(20, 28, 24, 0.08);
}
.sv-panel-koren .coral-asistent__spona svg {
  display: none;
}
.sv-panel-koren .coral-asistent__spona::before {
  content: '';
  width: 18px;
  height: 18px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  border-radius: 1px;
  filter: drop-shadow(0 1px 0 var(--sv-odlesk)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
.sv-panel-koren .coral-asistent__spona input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sv-panel-koren .coral-asistent__tlacitko {
  grid-area: poslat;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  corner-shape: round;
  border: 1px solid rgba(255, 236, 180, 0.9);
  background: linear-gradient(180deg, var(--sv-zluta-svetla), var(--sv-zluta) 55%, var(--sv-zluta-tmava));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--sv-stin-akcent);
  color: var(--sv-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-panel-koren .coral-asistent__tlacitko svg {
  width: 18px;
  height: 18px;
}
.sv-panel-koren .coral-asistent__tlacitko[disabled] {
  opacity: 0.55;
}
.sv-panel-koren.je-bezi .coral-asistent__tlacitko svg {
  display: none;
}
.sv-panel-koren.je-bezi .coral-asistent__tlacitko::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--sv-text);
}
.sv-panel-koren .coral-asistent__spodek {
  order: 3;
}
.sv-panel-koren .coral-asistent__pusteni {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: calc(16px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 2px dashed var(--sv-zluta-tmava);
  background: rgba(255, 211, 107, 0.5);
  font-weight: 700;
}
.sv-panel-koren .coral-asistent__pusteni[hidden] {
  display: none;
}
/* Chat sedi vedle obsahu na kazde sirce od 768 px; sirka je tekuta. */
/* Světlina 55: v horní řadě panelu průvodce je Historie, Nový chat a vpravo Učit se
   (Ondra 24. 9. 2026: „Tlačítko Učit se by chtěl zrovna doprava v tom chatu"). */
/* Ondra 22. 9. 2026: „to tlačítko Historie a Nový chat dej vedle tlačítka
   Učit se. A tlačítko Učit se ještě nemá od levé strany stejné odsazení jako
   má tlačítko OK od pravé strany." Řada sedí v jednom pruhu, odsazení zleva
   i zprava je stejné a řídí se stejnou proměnnou jako odesílací tlačítko. */
/* 25 px je změřená vzdálenost odesílacího tlačítka od pravého kraje panelu
   (vnitřek panelu 16 px plus vnitřní odsazení vstupního pole 9 px). */
.sv-asistent__nastroje {
  position: absolute;
  top: var(--sv-g);
  left: var(--sv-g);
  right: var(--sv-g);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sv-mezera-nastroju);
}
/* Světlina 56: prázdné místo řady nechytá kliknutí, na telefonu pod ním leží Zpět. */
.sv-asistent__nastroje {
  pointer-events: none;
}
.sv-asistent__nastroje > * {
  pointer-events: auto;
}
/* Vpravo nahoře sedí plovoucí nástroje (zvuk, oko) mimo panel, takže jim
   řada musí uhnout, jinak leží ikony na sobě. */
.sv-asistent__nastroje .sv-tl--ikona {
  margin-left: auto;
  width: var(--sv-tl-v);
  min-height: var(--sv-tl-v);
}
.sv-asistent__nastroje .sv-tl--ikona + .sv-tl--ikona {
  margin-left: 0;
}
.sv-asistent__ucit {
  position: static;
  min-height: var(--sv-tl-v);
}
/* Světlina 16: na počítači je horní pruh jedna řada čtyřicetipixelových
   tlačítek: Historie, Nový chat, hned vedle Učit se (Ondra 22. 9. 2026:
   „to tlačítko Historie a Nový chat dej vedle tlačítka Učit se"), vpravo
   zvuk a oko. Řada jim uhne o jejich šířku, nic se nemačká ani nepřekrývá. */
@media (min-width: 768px) {
  /* Světlina 51: řada se drží vpravo u zvuku a oka a mezera k nim je stejná
       jako mezi ostatními tlačítky; dřív se řada tiskla doleva a na širším
       okně mezi Novým chatem a zvukem rostla díra. */
  .sv-asistent__nastroje {
    right: calc(var(--sv-g) + 2 * var(--sv-tl-horni) + 2 * var(--sv-mezera-nastroju));
    justify-content: flex-end;
  }
  .sv-asistent__nastroje .sv-tl--ikona {
    margin-left: 0;
    flex-shrink: 0;
    width: var(--sv-tl-horni);
    min-height: var(--sv-tl-horni);
  }
  .sv-asistent__ucit {
    flex-shrink: 0;
    min-height: var(--sv-tl-horni);
  }
  /* Světlina 71 (Ondra 24. 9. 2026: „tak ho aspoň roztáhni na to aby se to tam
       pěkně vyplnilo celkově"): Učit se vyplní zbytek řady až ke zvuku a oku. */
  .sv-asistent__ucit {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .sv-nastroje--volne .sv-tl--ikona {
    width: var(--sv-tl-horni);
    min-height: var(--sv-tl-horni);
  }
  .sv-asistent {
    container: sv-panel / inline-size;
  }
}
/* Úzký panel (okno zhruba pod 1270 px) ukáže Učit se a Do hloubky jen ikonou,
   ať se horní řada vejde vedle zvuku a oka a odesílací tlačítko zůstane
   v rámu. Panel se ptá na svou vlastní šířku, ne na šířku okna. */
@container sv-panel (max-width: 305px) {
  .sv-asistent__ucit {
    width: var(--sv-tl-horni);
    padding: 0;
    justify-content: center;
  }
  .sv-asistent__ucit span {
    display: none;
  }
}
/* Světlina 131: řádek pod polem zprávy (plus, mikrofon s rozbalením způsobů, Do hloubky,
   odeslání) potřebuje pro celý popisek zhruba 337 px; na PC 1280 má panel 309 px a popisek
   byl uříznutý. Pod tou šířkou zůstane z přepínače jen ikona. */
@container sv-panel (max-width: 340px) {
  .sv-panel__hluboko {
    width: var(--sv-tl-maly);
    padding: 0;
    justify-content: center;
  }
  .sv-panel__hluboko span {
    display: none;
  }
}
@media (min-width: 768px) {
  /* Mřížka místo řádku, aby přehrávač sedl pod obsah a NE pod chat.
       Ondra 22. 9. 2026: „ten přehrávač dole nechci, aby byl i v rámci toho
       chatu vpravo, ale jenom v tom hlavním políčku." */
  .sv-plocha__telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sv-panel);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'obsah chat' 'prehravac chat';
  }
  .sv-obrazovky {
    grid-area: obsah;
  }
  .sv-asistent {
    grid-area: chat;
    width: auto;
    min-width: 0;
    padding: calc(2 * var(--sv-g) + var(--sv-tl-horni)) var(--sv-g) var(--sv-g);
  }
  .sv-asistent::before {
    display: block;
  }
  .sv-plocha__telo > .sv-prehravac {
    grid-area: prehravac;
  }
}
/* Telefon: Zeptat se je samostatne okno pres cely ram (i pres hlavicku), neprusvitne, s vlastnim Zpet. Dole zustava jen lista.
   Světlina 88: obsah okna začíná na stejné hraně jako obsah obrazovek pod ním
   (--sv-vnitrek), Zpět a nadpis stojí na ose Historie a Nového chatu a nadpis
   je od šipky stejně daleko jako Učící mód v učícím režimu. */
@media (max-width: 767px) {
  .sv-asistent {
    position: absolute;
    inset: calc(-1 * var(--sv-hlavicka)) 0 var(--sv-lista) 0;
    z-index: 45;
    padding: 8px var(--sv-vnitrek) 12px;
    background: linear-gradient(180deg, #f2f6ee, #e9efe4);
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms;
  }
  .sv-asistent.je-otevreny {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .sv-asistent::after {
    content: 'Zeptat se';
    position: absolute;
    top: var(--sv-g);
    left: calc(var(--sv-vnitrek) + 48px);
    display: flex;
    align-items: center;
    height: 40px;
    font-size: var(--sv-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  /* Světlina 56: tělo začíná pod hlavičkou Zeptat se, rolovaný text pod ni nevjede. */
  .sv-asistent .coral-asistent__telo {
    margin-top: 42px;
  }
  .sv-asistent__zpet {
    position: absolute;
    top: var(--sv-g);
    left: var(--sv-vnitrek);
    z-index: 4;
    width: 40px;
    min-height: 40px;
  }
  #sv-asistent .coral-asistent__hlava {
    position: relative;
    top: 0;
    right: 0;
    justify-content: flex-end;
    min-height: 40px;
    margin-bottom: 6px;
  }
  .sv-ram:has(.sv-asistent.je-otevreny) .sv-lista__polozka[data-sv-akce="asistent-otevri"] {
    opacity: 1;
  }
  body:has(.sv-asistent.je-otevreny) .sv-nastroje--volne {
    display: none;
  }
  .sv-ram:has(.sv-asistent.je-otevreny) .sv-lista__polozka.je-aktivni::after {
    display: none;
  }
  .sv-ram:has(.sv-asistent.je-otevreny) .sv-lista__polozka[data-sv-akce="asistent-otevri"]::after {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 3px;
    right: 3px;
    border-radius: calc(12px * var(--sv-roh-hladky, 1));
    corner-shape: squircle;
    background: var(--sv-aktivni);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: -1;
  }
}
/* Spodni lista (telefon): soucast skla, ne bily pruh. Uprostred Ucit se. */
.sv-lista {
  display: none;
  position: relative;
  z-index: 30;
  overflow: visible;
  flex-shrink: 0;
  height: var(--sv-lista);
  padding: 0 6px env(safe-area-inset-bottom);
  border-top: 1px solid var(--sv-linka);
  box-shadow: inset 0 1px 0 var(--sv-linka-odlesk);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.22));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
}
@media (max-width: 767px) {
  .sv-lista {
    display: grid;
    z-index: 46;
  }
  .sv-dlazdice {
    padding: 11px 12px;
  }
  .sv-lista__polozka {
    gap: 3px;
    padding: 4px 2px;
  }
  .sv-polozka__nazev {
    font-size: var(--sv-pismo);
  }
}
.sv-lista__polozka {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.88;
}
.sv-lista__polozka {
  position: relative;
}
.sv-lista__polozka span {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: -0.01em;
}
.sv-lista__polozka.je-aktivni {
  opacity: 1;
}
.sv-lista__polozka.je-aktivni::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  right: 3px;
  border-radius: calc(12px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: var(--sv-aktivni);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: -1;
}
.sv-lista__polozka--ucit {
  opacity: 1;
}
.sv-lista__polozka--ucit {
  position: relative;
  justify-content: flex-end;
  padding-bottom: 7px;
}
.sv-lista__polozka--ucit::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  corner-shape: round;
  border: 1px solid rgba(255, 236, 180, 0.9);
  background: linear-gradient(180deg, var(--sv-zluta-svetla), var(--sv-zluta) 55%, var(--sv-zluta-tmava));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(140, 86, 8, 0.45), 0 6px 12px -6px rgba(212, 143, 27, 0.85);
}
.sv-lista__polozka--ucit [data-coral-ikona] {
  position: absolute;
  top: -1px;
  left: 50%;
  margin-left: calc(var(--sv-ikona) / -2);
  z-index: 1;
}
@media (max-height: 560px) {
  :root {
    --sv-lista: 52px;
  }
  .sv-lista__polozka span {
    font-size: 9px;
  }
  .sv-lista__polozka--ucit::before {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    top: -13px;
  }
}
.sv-pust {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--sv-h2);
  font-weight: 700;
  background: rgba(255, 211, 107, 0.4);
  border: 2px dashed var(--sv-zluta-tmava);
  border-radius: var(--sv-r);
  corner-shape: squircle;
  pointer-events: none;
}
.sv-ram.je-nad .sv-pust {
  display: flex;
}
/* Ucici mod ma vaznost: pozadi se ztlumi a ztmavne, sklo ramu zesili. Klidne, bez bliknuti.
   Světlina 62: hlavní rozhraní má stejné zatmavení napůl, bez ztlumení videa a bělejšího skla
   (Ondra 24. 9. 2026: „do hlavního boxíku Světliny bych dal mírné zatmavení stejně jako
   v učícím módu, akorát tak poloviční, konkrétně se bavím o zatmavení, ne o těch dalších efektech"). */
.sv-pozadi__ticho {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(120% 90% at 50% 40%, rgba(18, 26, 20, 0.18) 0%, rgba(12, 18, 14, 0.52) 100%);
  transition: opacity 900ms ease;
}
html.sv-uci .sv-pozadi__ticho {
  opacity: 1;
}
html.sv-uci .sv-pozadi__video {
  filter: brightness(0.78) saturate(0.62) blur(2px);
  transition: filter 900ms ease;
}
/* Svetlina 65: usporny rezim pluginu (coral-nizky-vykon: pocitac bez graficke karty, slaby telefon)
   vypne i filtr videa. Jeho prepocet kazdy snimek bral pri softwarovem kresleni vic nez pulku
   snimku (PC 21 fps, bez nej 60 fps). Jas a zatmaveni pak drzi obycejna vrstva nad videem. */
html.coral-nizky-vykon .sv-pozadi__video,
html.coral-nizky-vykon.sv-uci .sv-pozadi__video {
  filter: none;
}
html.coral-nizky-vykon .sv-pozadi__filtr::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 900ms ease;
}
html.coral-nizky-vykon.sv-uci .sv-pozadi__filtr::after {
  background-color: rgba(44, 50, 46, 0.34);
}
html.sv-uci .sv-ram {
  --sv-belost: 2.6;
}
/* Vstup (prihlaseni) a vizitka profilu: male sklo uprostred, nic dalsiho. */
.sv-vstup {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--sv-text);
  text-shadow: 0 1px 0 var(--sv-odlesk);
}
.sv-vizitka {
  --sv-belost: 2.1;
  /* Světlina 39: bělost roste s náladou, ale sklo zůstává sklem: nejvýš 0.8,
       jinak by na telefonu (násobek 1.9) přeteklo do neprůhledné bílé. */
  background-image: var(--sv-zrno), linear-gradient(158deg, rgba(255, 255, 255, min(0.8, calc(0.22 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 0%, rgba(255, 255, 255, min(0.62, calc(0.11 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 45%, rgba(255, 255, 255, min(0.74, calc(0.18 * var(--sv-belost, 1) * var(--sv-belost-telefon, 1)))) 100%);
  background-size: 160px 160px, cover;
  background-repeat: repeat, no-repeat;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  /* Světlina 62: hrana je tenká a po celém obvodu stejná, bez světlé lišty nahoře
       a bez druhých linek těsně u hrany; uvnitř zůstává jediná čára obsahu (obrys).
       Ondra 24. 9. 2026: „ten hlavní rámeček Světliny je teda špatně stylizovaný". */
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12), inset 0 0 18px rgba(255, 255, 255, 0.12);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 28px;
  border-radius: var(--sv-r);
  corner-shape: squircle;
  text-align: center;
}
.sv-vizitka .sv-formular {
  width: 100%;
  text-align: left;
}
.sv-vizitka__znak .sv-znak {
  width: 72px;
  height: 72px;
}
.sv-vizitka__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  corner-shape: round;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  text-indent: 0;
  letter-spacing: 0;
  padding-bottom: 2px;
  border: 1px solid rgba(255, 236, 180, 0.9);
  background: linear-gradient(180deg, var(--sv-zluta-svetla), var(--sv-zluta) 55%, var(--sv-zluta-tmava));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -8px rgba(212, 143, 27, 0.8);
}
.sv-vizitka--profil {
  background-image: var(--sv-zrno), linear-gradient(158deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.2));
}
.sv-vizitka__radek {
  font-weight: 600;
  color: var(--sv-text-2);
}
@media print {
  .sv-pozadi,
  .sv-sloupec,
  .sv-lista,
  .sv-nastroje,
  .sv-slogan,
  .sv-asistent,
  .sv-hlavicka {
    display: none;
  }
  .sv-ram {
    position: static;
    inset: auto;
    backdrop-filter: none;
    background: #fff;
    border: 0;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-obrazovka {
    animation: none;
  }
  .sv-pozadi__vrstva {
    transition: none;
  }
}
.sv-vstup .sv-vizitka {
  --sv-belost: 3.4;
}
.sv-vstup__rada {
  margin-top: 10px;
  font-size: var(--sv-maly);
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
}
/* Světlina 136: druhý jazyk pod přihlášením, tichý odkaz jako .sv-pobavit__odkaz. */
.sv-vstup__jazyk {
  margin: -4px 0 -10px;
}
/* Světlina 197: kdo zve, tichý řádek pod názvem se zlatou jiskrou. */
.sv-vstup__zve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 2px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sv-text-2);
}
.sv-vstup__zve [data-coral-ikona] {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  color: var(--sv-zluta-tmava);
}
/* Upgrader2 171: přepínač přihlášení a registrace, nabídka předplatného ve vizitce.
   Materiál vizitky, zlaté tlačítko a zlaté kolečko jako avatar profilu. */
.sv-formular[hidden] {
  display: none;
}
.sv-vstup__prepni {
  align-self: center;
  margin: -4px 0 -6px;
}
/* Světlina 218: otisk prstu je hlavní cesta. Tlačítko otisku přes celou šířku, heslo se rozbalí
   na Heslem nebo samo, když otisk nevyjde; přístroj bez čtečky (html.sv-bez-otisku) má heslo hned.
   Vstup se na nízkém telefonu posouvá a vizitka se zhušťuje s výškou okna. */
.sv-vstup {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sv-vstup .sv-vizitka {
  margin-block: auto;
  gap: clamp(10px, 1.9vh, 14px);
  padding: clamp(20px, 3.6vh, 30px) clamp(18px, 5.6vw, 28px);
}
.sv-vstup .sv-vizitka__znak .sv-znak {
  width: clamp(52px, 9vh, 72px);
  height: clamp(52px, 9vh, 72px);
}
.sv-vstup .sv-formular {
  gap: clamp(10px, 1.9vh, 14px);
}
.sv-vstup__otisk {
  width: 100%;
}
.sv-vstup__heslo {
  display: none;
  flex-direction: column;
  gap: inherit;
}
.sv-vstup__prihlaseni.je-heslo .sv-vstup__heslo,
.sv-bez-otisku .sv-vstup__heslo {
  display: flex;
}
.sv-vstup__prihlaseni.je-heslo > .sv-vstup__otisk,
.sv-bez-otisku .sv-vstup__prihlaseni > .sv-vstup__otisk,
.sv-vstup__prihlaseni.je-heslo .sv-vstup__na-heslo,
.sv-bez-otisku .sv-vstup__na-heslo {
  display: none;
}
.sv-vstup__dvojice > .sv-tl {
  flex: 1 1 140px;
}
.sv-vstup__jen-bez-otisku,
.sv-bez-otisku .sv-vstup__jen-s-otiskem {
  display: none;
}
.sv-bez-otisku .sv-tl.sv-vstup__jen-bez-otisku {
  display: inline-flex;
}
.sv-bez-otisku p.sv-vstup__jen-bez-otisku {
  display: block;
  margin-top: 0;
}
.sv-vstup__krok {
  text-align: center;
}
.sv-vstup__krok[hidden],
.sv-vstup__krok .sv-formular[hidden] {
  display: none;
}
.sv-vstup__krok-nadpis {
  margin: 0;
  font-size: var(--sv-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sv-vstup__krok-text {
  margin: -4px auto 2px;
  max-width: 32ch;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sv-text-2);
}
.sv-vizitka.je-krok .sv-vstup__dole,
.sv-vizitka.je-krok .sv-vstup__zve {
  display: none;
}
/* Přepínač a druhý jazyk v jedné řadě pod formulářem. */
.sv-vstup__dole {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 clamp(12px, 3vw, 20px);
  margin: -4px 0 -10px;
}
.sv-vstup__dole .sv-pobavit__odkaz {
  margin: 0;
}
.sv-vstup__dole [hidden] {
  display: none;
}
.sv-nabidka {
  gap: 16px;
}
.sv-nabidka__hlavicka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sv-nabidka__podpis {
  margin: 0;
  font-size: var(--sv-maly);
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.72;
}
.sv-nabidka__text {
  margin: 0;
  max-width: 34ch;
  font-weight: 500;
  line-height: 1.5;
}
.sv-nabidka__cena {
  margin: -2px 0 0;
  font-size: clamp(24px, calc(20px + 1vw), 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.sv-nabidka__seznam {
  list-style: none;
  margin: 2px 0 0;
  padding: 14px 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-top: 1px solid var(--sv-linka);
}
.sv-nabidka__seznam li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.sv-nabidka__seznam [data-coral-ikona] {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 34px !important;
  height: 34px !important;
  padding: 8px;
  border-radius: 50%;
  corner-shape: round;
  border: 1px solid rgba(255, 236, 180, 0.9);
  background: linear-gradient(180deg, var(--sv-zluta-svetla), var(--sv-zluta) 55%, var(--sv-zluta-tmava));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -8px rgba(212, 143, 27, 0.8);
}
.sv-nabidka__akce {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sv-nabidka__akce .sv-tl {
  width: 100%;
}
.sv-nabidka__ceka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--sv-tl-v);
  margin: 0;
  font-weight: 700;
}
.sv-nabidka__tecka {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  corner-shape: round;
  background: var(--sv-zluta);
  box-shadow: 0 0 0 0 rgba(242, 177, 52, 0.6);
  animation: sv-nabidka-dech 1.6s ease-in-out infinite;
}
@keyframes sv-nabidka-dech {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 177, 52, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(242, 177, 52, 0);
  }
}
.sv-nabidka .sv-vstup__rada {
  margin-top: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .sv-nabidka__tecka {
    animation: none;
  }
}
/* Pozadi z YouTube: ram pres celou plochu, bez ovladani a bez klepnuti.
   Video ma jiny pomer stran nez okno, takze se zvetsi tak, aby vyplnilo. */
.sv-zvuky__yt {
  margin-top: 2px;
  padding: 8px 0 0;
  border-top: 1px solid var(--sv-linka);
}
.sv-zvuky__yt[hidden] {
  display: none;
}
.sv-zvuky__yt .sv-popisek {
  display: block;
  margin-bottom: 4px;
  font-size: var(--sv-mini);
}
.sv-zvuky__yt .sv-pole {
  width: 100%;
  font-size: var(--sv-pole-pismo);
}
/* Ram YouTube je zamerne vetsi nez plocha: ovladaci pruhy prehravace (nazev
   nahore, casova osa dole) se tim dostanou mimo viditelnou cast.
   Ondra 22. 9. 2026: „zobrazi se tam okolo nejake ovladaci prvky toho YouTubu,
   jako hodne nahore obrazovky a dole obrazovky." */
.sv-pozadi__vrstva[data-nalada="7"] {
  overflow: hidden;
}
/* Světlina 31: velikost a zvětšení rámu počítá skript podle zvolené kvality
   (ytRozmer). Rám je vidět, až video hraje; do té doby a při zastavení je vidět
   náhled videa na pozadí vrstvy. */
.sv-pozadi__vrstva[data-nalada="7"] {
  background-size: cover;
  background-position: center;
}
/* Světlina 131: rám zmizí okamžitě, ať při zastavení neproblikne rozhraní YouTube;
   plynule se jen objevuje (Ondra 30. 9. 2026: „když odstopnu YouTube video, tak se tam
   dá uživatelské rozhraní toho videa, což nechci"). */
.sv-pozadi__yt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s;
}
.sv-pozadi__yt.je-hraje {
  opacity: 1;
  transition: opacity 700ms ease;
}
.sv-zvuky__posun {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sv-zvuky__posun[hidden] {
  display: none;
}
.sv-zvuky__cas {
  flex: 0 0 auto;
  width: 3.4em;
  font-size: var(--sv-mini);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sv-text-2);
  text-align: left;
}
.sv-zvuky__cas[data-sv-yt-delka] {
  text-align: right;
}
.sv-zvuky__kvalita {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sv-zvuky__kvalita .sv-tl {
  min-height: var(--sv-tl-maly);
  padding: 0 10px;
  font-size: var(--sv-mini);
  border-radius: 999px;
  corner-shape: round;
}
/* Světlina 80: u YouTube je pod odkazem posuvník času a hned pod ním hlasitost,
   jeden celek bez čáry mezi nimi; kvalita až pod nimi. Oba posuvníky končí
   vpravo na stejné svislici: ikona hlasitosti má stejně širokou kolonku jako délka videa. */
.sv-zvuky__yt:not([hidden]) + .sv-zvuky__ovladani {
  border-top: 0;
  box-shadow: none;
  margin-top: 0;
  padding-top: 8px;
}
.sv-zvuky__ovladani > i[data-coral-ikona]:last-child {
  flex: 0 0 auto;
  font-size: var(--sv-mini);
  margin-left: calc(3.4em - 24px);
}
.sv-zvuky__ovladani .sv-posuvnik {
  transition: opacity var(--sv-prechod);
}
.sv-zvuky__ovladani.je-ztlumeno .sv-posuvnik {
  opacity: 0.45;
}
.sv-zvuky__yt-kvalita {
  margin-top: 4px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--sv-linka);
  box-shadow: inset 0 1px 0 var(--sv-linka-odlesk);
}
.sv-zvuky__yt-kvalita[hidden] {
  display: none;
}
.sv-zvuky__yt-kvalita .sv-popisek {
  display: block;
  margin-bottom: 4px;
  font-size: var(--sv-mini);
}
/* Uvodni veta motoru se ve Svetline nepouziva; aplikace mluvi sama za sebe
   (Ondra 22. 9. 2026: „vidím celou aplikaci a umím na ní klikat" = pryc). */
.sv-panel-koren .coral-asistent__uvod {
  display: none;
}
/* Kurzor: při psaní rukou obyčejný, tlustý jen v poli, kam přitéká diktát
   (jádro diktování, třída coral-dikt-pole-zive). Světlina 159, Ondra 6. 10. 2026:
   „ten tlustej ukazatel tam chce jenom při hlasovém zadávání“. */
/* JADRO: vyriznuty vzhled drzi na vsem, co ma tvar. Kdyz se nekde objevi novy
   prvek, nema potrebovat vlastni pravidlo (CLAUDE.md, sekce o jadre). */
/* Vsechny znaky v aplikaci, at uz prisly jako `data-coral-ikona`, jako hotove
   SVG, nebo jako obrazek emoji. Vyjimka je jen znak aplikace (`.sv-znak`),
   ktery ma vlastni vnitrni stin, a obrazky obsahu. */
.sv-ram svg:not(.sv-znak),
.sv-vstup svg:not(.sv-znak),
.sv-nastroje--volne svg,
.sv-zvuky svg,
.sv-plovouci-nabidka svg,
.sv-ram .coral-emoji,
.sv-ram [data-coral-ikona] {
  filter: drop-shadow(0 1px 0 var(--sv-odlesk)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
/* Animovaná emoji mění tvar každý snímek, proto stín podle tvaru, ne podle rámu. */
.coral-emoji,
.coral-emoji--zive {
  filter: drop-shadow(0 1px 0 var(--sv-odlesk)) drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.12));
}
/* Světlina 52: bublinka má zapuštěné písmo jako všechno ve skle a stín podle
   tvaru, takže ostrou spodní hranu má i trojúhelníček, ne jen obdélník. */
.coral-tip {
  text-shadow: 0 1px 0 var(--sv-odlesk);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.08)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.16));
}
/* Hlava panelu (historie, nový rozhovor, křížek) se v hlavním rozhraní
   nepoužívá: Historie i Nový chat mají svoje tlačítko nahoře vedle Učit se
   a křížek nic nedělá, protože panel je součást aplikace a nezavírá se.
   V učícím režimu se hlava stěhuje ven ze `.sv-asistent`, tam zůstává. */
.sv-asistent .coral-asistent__hlava {
  display: none;
}
/* SPODNI LISTA NA TELEFONU, doladeni podle Ondry 22. 9. 2026.

   „Ten rámeček okolo má hrozně málo prostoru, rád bych přidal 3 pixely na
   každou stranu uvnitř toho rámečku." Pilulka aktivni polozky tedy zacina
   o 3 px dal od textu i ikony.

   „Ten rámeček od levý strany, pravý strany a spodní strany není přímo na
   těch čárách. Ta čára to má jako uříznout, aby to fakt vypadalo perfektně,
   ale musí to být až k té čáře, kousek od ní. Ideálně ty čtyři věcičky končí
   těsně před tou čárou." Pilulka proto sahá 2 px pod spodní hranu lišty
   a krajní položky mají stejný odstup od kraje jako od sebe navzájem.

   „Ta čepice není uprostřed toho tlačítka a celé to kolečko s čepicí bych
   posunul níže k tomu textu Učit se." Kruh klesl o 4 px a čepice sedí přesně
   v jeho středu.

   Světlina 14: krajní pilulky sedí na téže hraně jako obsah nad lištou,
   jednu mezeru (--sv-g) od čáry rámu, stejně jako všechno ostatní.

   Světlina 37, Ondra 23. 9. 2026: „ty rohy tam přesahujou za tu čáru ...
   o tři pixely na každý straně zmenšil to ohraničení, protože takhle je to
   až moc." Pilulka je o 3 px menší ze všech stran a s čarou rámu se nepotká. */
@media (max-width: 767px) {
  .sv-lista {
    padding: 0 var(--sv-g) env(safe-area-inset-bottom);
  }
  .sv-lista__polozka.je-aktivni::after {
    top: 6px;
    bottom: 5px;
    left: 3px;
    right: 3px;
    border-radius: calc(12px * var(--sv-roh-hladky, 1));
    corner-shape: squircle;
  }
  .sv-lista__polozka--ucit::before {
    top: -12px;
    width: 46px;
    height: 46px;
    margin-left: -23px;
  }
  .sv-lista__polozka--ucit [data-coral-ikona] {
    top: 0;
    left: 50%;
    margin-left: calc(var(--sv-ikona) / -2);
  }
  .sv-lista__polozka--ucit {
    padding-bottom: 6px;
  }
}
/* RAMECKY NA TELEFONU. Ondra 22. 9. 2026: „ty rámečky mají odsazení od levé
   a pravé strany, tak chci ho zmenšit o polovinu, vlevo, vpravo, a případně
   i dole a nahoře, a mezery mezi nima taky na polovinu," a k vnitrku:
   „vnitřní odsazení těch rámečků na polovic, ale pouze od levé a pravé
   strany." Vnitrek tedy zustava svisle stejny, vodorovne je poloviční. */
@media (max-width: 767px) {
  .sv-oddil {
    padding: 9px 0;
  }
}
/* PSANÍ ROVNOU VE FORMÁTOVANÉM TEXTU (CoralEditor z pluginu, Světlina 36, 38).
   Vypadá jako hotový dokument (nadpisy, tučné, žluté odrážky), značky #, **
   a 1. jsou jen tlumené. Ondra 23. 9. 2026: „aby tam nebyl žádnej režim
   náhledu, ale automaticky byl náhled zapnutej". */
.coral-ed {
  --coral-ed-znacka: 0.34;
  --coral-ed-odrazka: var(--sv-zluta);
  --coral-ed-px: 14px;
  --coral-ed-py: 10px;
}
.coral-ed__plocha {
  color: var(--sv-text);
  font-size: var(--sv-pole-pismo);
  font-weight: 600;
  line-height: 1.6;
  text-shadow: 0 1px 0 var(--sv-odlesk);
  caret-color: var(--sv-zluta-tmava);
}
.coral-ed__plocha::selection,
.coral-ed__plocha *::selection {
  background: rgba(242, 177, 52, 0.35);
  color: var(--sv-text);
}
.coral-ed__r {
  min-height: 1.6em;
}
.coral-ed__h2 {
  margin-top: 0.9em;
  padding-bottom: 4px;
  font-size: var(--sv-maly);
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--sv-text-2);
  border-bottom: 1px solid var(--sv-linka);
}
.coral-ed__h3 {
  margin-top: 0.6em;
  font-size: var(--sv-cteni-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.coral-ed__h4 {
  margin-top: 0.5em;
  font-size: var(--sv-pismo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sv-text-2);
}
.coral-ed__r:first-child {
  margin-top: 0;
}
.coral-ed__plocha b {
  font-weight: 800;
}
.coral-ed__zn--cislo {
  opacity: 1;
  font-weight: 800;
  color: var(--sv-zluta-tmava);
}
/* Světlina 84: značka nadpisu jen v řádku s kurzorem (pravidlo pro ten řádek skládá
   001-svetlina.js), jinde je text čistý jako v hotovém dokumentu. Ondra 24. 9. 2026:
   „ty nápisy jsou tady prostě bídné ... hashtag postavy". Hvězdičky tučného schovává
   a plynule ukazuje u kurzoru jádro editoru v pluginu (Světlina 134). */
.coral-ed__zn--nadpis {
  display: none;
}
/* Pomlčka odrážky je průhledná, ale odlesk písma z plochy by z ní udělal bílou čárku vedle tečky. */
.coral-ed__zn--odrazka {
  text-shadow: none;
}
.coral-ed__citat {
  font-weight: 700;
}
.coral-ed.je-prazdne .coral-ed__plocha::before {
  color: var(--sv-text-2);
  opacity: 0.75;
}
/* Světlina 97: dlouhá nápověda prázdného pole se na telefonu neusekne. Plugin ji klade absolutně, takže
   pole nenarostlo; tady plove s nulovou čistou šířkou: pole je vysoké jako nápověda a kurzor stojí na začátku přes ni. */
.coral-ed.je-prazdne .coral-ed__plocha::before {
  position: static;
  float: left;
  width: 100%;
  margin-right: -100%;
}
/* Pole v nastavení: vzhled pole, roste s textem, pak vlastní posuvník; jde zvětšit tažením za roh
   (Ondra 22. 9. 2026: „ty políčka textový jakýkoli dej ve výchozím vyšší" a „aby to mělo vlastní scrollovací"). */
.coral-ed.sv-pole {
  display: flex;
  padding: 0;
  min-height: 0;
}
.coral-ed.sv-pole:focus-within {
  border-color: rgba(255, 221, 130, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(242, 177, 52, 0.28), var(--sv-stin-tl);
}
.coral-ed.sv-pole .coral-ed__plocha {
  min-height: 150px;
  max-height: min(60vh, 560px);
  resize: vertical;
  border-radius: inherit;
  corner-shape: inherit;
}
/* DIKTOVÁNÍ: jedna podoba v celé aplikaci (chat, poznámka, zadání výstupu). Složené
   je jen ikona mikrofonu, rozbalené způsoby jsou ploché ikony jako zbytek řádku,
   nahrávání červené. Světlina 36: dřív měla poznámka vlastní velká skleněná tlačítka.
   Světlina 54: rozbalené způsoby byly vystouplé skleněné dlaždice v plochém řádku
   (Ondra 24. 9. 2026: „ten design těch dalších třech tlačítek v tom chatu v podstatě je neadekvátní"). */
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt__rada {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}
/* Světlina 151: karta, kód a tlačítka diktování z pluginu berou poloměr z --coral-r-pole
   (= --sv-r-pole) a dostávají stejný hladký roh jako zbytek aplikace. */
.coral-dikt__tl,
.coral-dikt__karta,
.coral-dikt__qr,
.coral-dikt__btn {
  corner-shape: squircle;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt__tl {
  width: var(--sv-tl-maly);
  height: var(--sv-tl-maly);
  border: 1px solid transparent;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  box-shadow: none;
  color: var(--sv-text);
}
@media (hover: hover) {
  :is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt__tl:hover {
    border-color: transparent;
    background: rgba(20, 28, 24, 0.08);
  }
}
/* Světlina 52: obal ikony roste s ikonou, jinak ikona o 1 px ujede doprava dolů
   (Ondra 24. 9. 2026: „Ikona pro hlasové zadávání není vycentrovaná v té kostičce"). */
.sv-ram,
.sv-pole--s-hlasem {
  --coral-dikt-ikona: 20px;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt__tl .coral-dikt__ikona,
.sv-ram .coral-dikt__tl svg {
  width: 20px;
  height: 20px;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt__tl.je-zapnuto {
  border-color: #d62b2b;
  background: linear-gradient(180deg, #ef4444, #d62b2b);
  color: #fff;
}
/* Světlina 77: způsoby diktování vyjíždějí jeden po druhém a stejně plynule se
   zase zasunou (Ondra 24. 9. 2026: „Chtěla by to nějakou animaci jak se to bude
   rozjíždět"). Světlina 100: mikrofon diktuje rovnou (podržet, nebo klepnout),
   telefon a Wispr Flow vyjíždějí zpod šipky vedle něj. Složené leží pod šipkou:
   záporný okraj je přesně jejich šířka i s mezerou, takže složená řada měří jen
   mikrofon a šipku a rozbalená roste plynule. */
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada {
  animation: none;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__prepinac {
  position: relative;
  z-index: 4;
  color: var(--sv-text-2);
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada > [data-diktovani="mobil"],
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada > [data-diktovani="wispr"] {
  display: inline-flex;
  position: relative;
  margin-left: calc(-1 * (var(--sv-tl-maly) + 4px));
  opacity: 0;
  transform: scale(0.7);
  visibility: hidden;
  pointer-events: none;
  transition: margin-left 300ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-z, 0ms), opacity 180ms ease var(--sv-z, 0ms), transform 300ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-z, 0ms), visibility 0s linear calc(300ms + var(--sv-z, 0ms));
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__rada > [data-diktovani="mobil"],
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__rada > [data-diktovani="wispr"] {
  margin-left: 0;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: margin-left 300ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-z, 0ms), opacity 220ms ease var(--sv-z, 0ms), transform 300ms cubic-bezier(0.22, 1, 0.36, 1) var(--sv-z, 0ms), visibility 0s linear var(--sv-z, 0ms);
}
/* Vysouvají se zleva doprava, zasouvají odzadu; každý leží pod tím předchozím. */
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada > [data-diktovani="mobil"] {
  z-index: 3;
  --sv-z: 60ms;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada > [data-diktovani="wispr"] {
  z-index: 2;
  --sv-z: 0ms;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__rada > [data-diktovani="mobil"] {
  --sv-z: 0ms;
}
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__rada > [data-diktovani="wispr"] {
  --sv-z: 60ms;
}
/* Šipka se při rozbalení otočí na křížek. */
:is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__prepinac-zavri {
  animation: sv-dikt-krizek 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sv-dikt-krizek {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Světlina 161: na telefonu chybí jen Diktovat z mobilu, šipka s Wispr Flow zůstává (stejně jako v pluginu, podle šířky). */
@media (max-width: 767px) {
  :is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt.coral-dikt--skladany .coral-dikt__rada > [data-diktovani="mobil"] {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany .coral-dikt__rada > [data-diktovani],
  .sv-panel-koren .sv-panel__hluboko {
    transition: none;
  }
  :is(.sv-ram, .sv-pole--s-hlasem) .coral-dikt--skladany.je-rozbaleno .coral-dikt__prepinac-zavri {
    animation: none;
  }
}
/* Diktování na telefonu: cíle mají 40 px z jádra (--sv-tl-maly) a ikony 20 px, stejně
   v chatu i v poznámce (Ondra 22. 9. 2026: „to uživatelský rozhraní hrozně kvěrkot, ten malý"). */
/* JADRO: nadpis oddilu je stejny jako sekcni popisek v dokumentu, at to cele
   drzi pohromadu. Mensi, kapitalky, klidna barva; tlacitko vedle nej pak
   nepusobi jako druhy nadpis. */
.sv-oddil__hlava h2 {
  font-size: var(--sv-maly);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sv-text-2);
  margin: 0;
}
.sv-oddil__hlava h3 {
  font-size: var(--sv-maly);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sv-text-2);
  margin: 0;
}
.sv-oddil__hlava {
  margin-bottom: 10px;
}
.sv-oddil--ram .sv-oddil__hlava {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sv-linka);
}
/* Světlina 19: tlačítka v hlavě oddílu drží spolu u pravého okraje. */
.sv-oddil__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sv-mezera-ikon);
  margin-left: auto;
}
.sv-oddil--ram .sv-oddil__hlava:has(+ .sv-prazdno) {
  border-bottom: 0;
  padding-bottom: 0;
}
.sv-prazdno {
  font-size: var(--sv-pismo);
  color: var(--sv-text-2);
}
/* Světlina 128: odkaz, který pošle Světlině zprávu jakoby od uživatele a otevře o tom rozhovor.
   Tichý jako odkaz v textu, na dotyk aspoň 40 px vysoký; jedno místo pro celou aplikaci. */
.sv-pobavit {
  margin: 8px 0 0;
}
.sv-pobavit__odkaz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  margin-left: -6px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  color: var(--sv-text);
  font: inherit;
  font-size: var(--sv-pismo-s);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--sv-zluta-tmava);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: background-color var(--sv-prechod);
}
.sv-pobavit__odkaz [data-coral-ikona] {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
}
@media (hover: hover) {
  .sv-pobavit__odkaz:hover {
    background: var(--sv-hover);
  }
}
.sv-pobavit__odkaz:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 177, 52, 0.55);
}
.sv-pobavit__odkaz:active {
  background: var(--sv-hover);
}