@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/figtree-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/figtree-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JBMono';font-style:normal;font-weight:100 800;font-display:swap;src:url('fonts/jetbrains-mono-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JBMono';font-style:normal;font-weight:100 800;font-display:swap;src:url('fonts/jetbrains-mono-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#0B1B20; --ink-soft:#3D5257; --muted:#5C7075;
  /* Podklad stránky je neutrálně chladný, ne tónovaný do teal. Dokud měl
     vlastní nádech, byla teal barvou plochy a v číslech ji nebylo vidět;
     na neutrální šedé je teal zase akcent, který ukazuje, kam se dívat. */
  /* 🔴 `--tint` nesmí ztmavnout pod #F1F4F8. Nese ho podklad rozepsaného
     návrhu i citace a stojí na něm `--teal-deep`; na #EEF1F5 spadl ze 4,70
     na 4,49:1, tedy těsně pod AA. Změřeno postrojem, ne odhadnuto. */
  --paper:#FBFDFD; --plocha:#F1F3F6; --tint:#F1F4F8; --line:#E3E8EE; --line-soft:#EDF0F4;
  /* Petrolejová bočního panelu není nová barva: na tomtéž odstínu jede konec
     gradientu v `.bokapp`. Bílý text na ní má 11,6:1, odznak 4,64:1. */
  --teal:#12B5C0; --teal-deep:#0A7A83; --teal-jemna:#E4F5F6; --panel:#0A3F45;
  --bad:#E5484D; --good:#17A34A; --star:#EF9F06;
  --r:16px; --r-lg:24px; --r-pill:999px;
  /* Strojopis zůstává jen tam, kde je obsah doopravdy kód k přepsání —
     slevový kód, adresa v ukázce prohlížeče. Data, domény, počty a popisky
     ho měly taky a působilo to jako výpis z terminálu, ne jako přehled.
     Ta místa mají `--cislice`: tentýž Inter jako zbytek aplikace, jen se
     zapnutými tabulkovými číslicemi, takže sloupce čísel dál sedí pod sebou. */
  --mono:'JBMono',ui-monospace,'SF Mono',Menlo,monospace;
  --cislice:'Inter',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(30,41,59,.04),0 12px 32px rgba(30,41,59,.08);
  --shadow-zveda:0 4px 12px rgba(30,41,59,.06),0 24px 56px rgba(30,41,59,.13);
}

/* ---- ŠKÁLA (varianta A, kompaktní nástroj) — zavedeno 2. 8. 2026 ----
   Před tímhle bylo v app.css 56 různých velikostí písma a 43 hodnot mezer,
   v pásmu 0,7 až 1,1 rem po krocích jedné setiny. Nic se neopakovalo, každá
   komponenta byla doladěná sama pro sebe, a přesně to se čte jako amatérská
   práce, i když je každá jednotlivá hodnota skoro dobře.

   Osm velikostí písma a šest mezer. Nové hodnoty se berou odsud; když je
   potřeba něco mezi, je to signál, že se má upravit komponenta, ne škála. */
:root{
  --t1:.75rem;    /* 12 px — drobné popisky, jednotky */
  --t2:.8125rem;  /* 13 px — vysvětlivky, meta */
  --t3:.875rem;   /* 14 px — sekundární text */
  --t4:.9375rem;  /* 15 px — běžný text v aplikaci */
  --t5:1rem;      /* 16 px — silnější text, malé nadpisy */
  --t6:1.25rem;   /* 20 px — nadpisy sekcí */
  --t7:1.625rem;  /* 26 px — hlavní čísla */
  --t8:2.125rem;  /* 34 px — největší čísla a nadpis stránky */
  --t9:2.75rem;   /* 44 px — čísla v dlaždicích reportu, hlavní údaj obrazovky */

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}

body.app{background:var(--plocha)}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
/* Tabulkové číslice v celé aplikaci: číslo si drží stejnou šířku bez ohledu na
   hodnotu, takže sloupce sedí pod sebou a údaj při přepočtu neposkakuje.
   U přehledu plným čísel je to potřeba všude, ne jen v tabulkách. */
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Figtree',sans-serif;font-weight:800;line-height:1.12;letter-spacing:-.022em}
a{color:var(--teal-deep)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--cislice);font-weight:500;font-size:var(--t4);color:var(--muted)}

.apphead{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60}
.apphead .in{max-width:1000px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:800;font-size:var(--t5);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand svg{width:21px;height:21px;flex:none}
.brand .gw{border-bottom:3px solid var(--teal);padding-bottom:1px}
.who{display:flex;align-items:center;gap:12px;font-size:var(--t4);color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brand{flex:none}
.linkbtn{flex:none}
.linkbtn{flex:none;background:none;border:0;border-radius:var(--r-pill);font-family:'Figtree';font-weight:600;
  font-size:var(--t4);color:var(--ink-soft);cursor:pointer;padding:8px 16px;text-decoration:none}
.linkbtn:hover{background:var(--tint);color:var(--ink)}

.page{max-width:1000px;margin:0 auto;padding:44px 24px 90px}
.page.uzka{max-width:470px}

/* papírový nádech místo ploché bílé plochy */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px}
.card h1{font-size:var(--t7)}
.card .pod{color:var(--ink-soft);font-size:var(--t5);margin:8px 0 24px}

.pole{margin-bottom:16px}
.pole label{display:block;font-family:'Figtree';font-weight:600;font-size:var(--t4);color:var(--ink-soft);margin-bottom:7px}
.pole input,.pole textarea{width:100%;font-family:'Inter';font-size:16px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);line-height:1.5}
.pole textarea{min-height:120px;resize:vertical}
.pole input:focus,.pole textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,181,192,.16)}
.pole input.chybne{border-color:#B03A2E;background:#FDF4F3}
.pole input.chybne:focus{border-color:#B03A2E;box-shadow:0 0 0 3px rgba(176,58,46,.15)}
.pole .napoveda{font-size:var(--t3);color:var(--muted);margin-top:6px}

/* `text-align` a `line-height` tu srovnávají <a class="btn"> s <button class="btn">.
   Bez nich se stejná třída na dvou značkách vykreslí jinak:
   — `justify-content` vycentruje anonymní flex položku s textem, ne řádky uvnitř
     ní. Jakmile se popisek zalomí, řídí řádky `text-align`, a ten má <button>
     od prohlížeče center, kdežto <a> dědí left z karty.
   — `line-height` dědí <a> z body (1,65), <button> ne. Dvojice tlačítek vedle
     sebe pak měřila 61 a 54 px. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;gap:8px;font-family:'Figtree';font-weight:700;font-size:var(--t5);padding:16px 24px;border-radius:var(--r-pill);border:0;cursor:pointer;min-height:54px;width:100%;text-decoration:none;transition:background .15s,transform .12s}
.btn-ink{background:var(--teal-deep);color:#fff}
.btn-ink:hover{background:#08646C}
.btn-bily{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-bily:hover{background:var(--tint)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
/* Tlačítko volně v textu: neroztahuje se na plnou šířku. Dřív si to osm míst
   v js/prehled/ neslo v inline stylu width:auto;display:inline-flex. */
.btn-vradku{width:auto}
/* Menší tlačítko v řádku seznamu (napojení). Hodnoty beze změny z dřívějších
   inline stylů; nový výskyt bere třídu, ne vlastní recepturu. */
.btn-mensi{width:auto;min-height:42px;font-size:.93rem;padding:10px 18px}
.btn svg{width:19px;height:19px}

.deli{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--muted);font-size:var(--t3)}
.deli::before,.deli::after{content:"";flex:1;height:1px;background:var(--line)}

.hlaska{padding:12px 16px;border-radius:var(--r);font-size:var(--t4);margin-bottom:18px;line-height:1.55}
.hlaska.spatne{background:#fff1f1;border:1px solid #f5c6c7;color:#a3272b}
.hlaska.dobre{background:#EAF7EE;border:1px solid #CBE8D3;color:#14622F}
.hlaska.info{background:var(--tint);border:1px solid var(--line);color:var(--ink-soft)}

.prepinac{text-align:center;margin-top:22px;font-size:var(--t4);color:var(--muted)}
/* Přepínač Přihlásit se / Založit účet měl 26 px. Stojí na řádku za textem,
   takže neviditelná plocha by zasáhla do věty vedle — roste proto doopravdy. */
.prepinac button{background:none;border:0;font-family:'Figtree';font-weight:600;font-size:var(--t4);color:var(--teal-deep);cursor:pointer;text-decoration:underline;padding:13px 8px}

.drobne{font-size:var(--t4);color:var(--muted);text-align:center;margin-top:16px;line-height:1.6}

.souhrn{background:var(--tint);border-radius:var(--r-lg);padding:24px 24px;margin-bottom:26px}
.souhrn .radek{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:var(--t5)}
.souhrn .radek+.radek{border-top:1px solid var(--line)}
.souhrn .radek b{font-family:'Figtree';font-weight:700}
.souhrn .radek.dnes b{font-size:var(--t6);color:var(--ink)}
.souhrn .popis{font-size:var(--t3);color:var(--muted);margin-top:16px;line-height:1.6}

.stav{display:inline-flex;align-items:center;gap:8px;font-family:var(--cislice);font-weight:600;font-size:var(--t2);letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--ink-soft)}
.stav.zk{background:#FEF3DE;color:#8A5A06}
.stav.ak{background:#EAF7EE;color:#14622F}

.polozka{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 24px;margin-bottom:12px}
.polozka .hlava{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.polozka .typ{display:inline-flex;font-family:'Figtree';font-weight:700;font-size:var(--t2);padding:4px 12px;border-radius:var(--r-pill)}
.polozka .typ.rec{background:var(--teal-jemna);color:var(--teal-deep)}
.polozka .typ.pri{background:#FEF3DE;color:#8A5A06}
/* Článek na web je třetí druh práce ve frontě. Barvu si nevymýšlí: bere
   podklad rozepsaného návrhu a text hlavní barvou aplikace, tedy dvojici,
   která je jinde v aplikaci změřená na 4,70:1. */
.polozka .typ.cla{background:var(--tint);color:var(--teal-deep)}
.polozka .cas{font-size:var(--t3);color:var(--muted)}
.polozka .kdo{display:flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:700;font-size:var(--t5);margin-bottom:12px}
.polozka .ava{width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--ink-soft);
  display:grid;place-items:center;font-family:'Figtree';font-weight:700;font-size:var(--t4);flex:none}
.polozka .navrh{background:var(--tint);border-radius:var(--r);padding:12px 12px}
.polozka .navrh b{display:block;font-family:'Figtree';font-weight:600;font-size:var(--t2);color:var(--teal-deep);margin-bottom:7px}
.polozka textarea{width:100%;font-family:'Inter';font-size:16px;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#fff;min-height:110px;line-height:1.55;resize:vertical}
.polozka .akce{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.polozka .akce .btn{width:auto;flex:none;font-size:var(--t5);padding:8px 16px;min-height:42px}
.polozka.hotovo{opacity:.62}

.prazdno{text-align:center;padding:56px 24px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.prazdno h3{font-size:var(--t6);margin-bottom:8px}
.prazdno p{color:var(--muted);font-size:var(--t5);max-width:44ch;margin:0 auto}

/* Prázdné a chybové stavy sekcí (`aiPrazdno` generuje 14 míst v js/prehled/).
   Do teď neměly jediné pravidlo: kreslily se jako holý text s h3 v prohlížečové
   velikosti. Stejný vzhled jako .prazdno; uvnitř bílého obalu napojení se
   karta nezdvojuje. */
.aiPrazdno{text-align:center;padding:56px 24px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.aiPrazdno h3{font-size:var(--t6);margin-bottom:8px}
.aiPrazdno p{color:var(--muted);font-size:var(--t5);max-width:44ch;margin:0 auto}
.napoj .aiPrazdno{background:none;border-radius:0;box-shadow:none}

/* Kostra drží místo widgetu, než doběhne jeho fetch. Bez ní se Domů skládalo
   z prázdna a karty do sebe vskakovaly, jak odpovědi dobíhaly. */
.kostra{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);position:relative;
  overflow:hidden;min-height:120px}
.kostra::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--tint),transparent);
  animation:kostraJede 1.2s infinite}
.kostra.vysoka{min-height:280px}
@keyframes kostraJede{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.kostra::after{animation:none}}

/* Karta, po které se chce akce, nese u nadpisu tečku akcentu — oko třídí
   „úkol pro mě" od informace bez čtení. Rozjezd a úkoly; fronta na Domů má
   vlastní barevný pruh (.ted.ceka) a další značku nepotřebuje. */
.rozjezd .vrch h2::before,#ukoly .sekcnadpis::before{content:"";display:inline-block;
  width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px}

.nacitam{text-align:center;padding:60px 16px;color:var(--muted)}

/* Na úzkém telefonu se název firmy vedle značky a kroužku nevejde a celá
   stránka se dala posouvat do strany. Zůstává jen avatar, jméno je v menu. */
@media(max-width:620px){
  .sbar #kdo{display:none}
  .page{padding:24px 16px 80px}
  .card{padding:24px 16px}
  .polozka{padding:16px 16px}
  .polozka .akce .btn{min-width:100%}
}

/* ---- siroky dvousloupcovy layout pro prihlaseni a pokladnu ---- */
.split{min-height:calc(100dvh - 69px);display:grid;grid-template-columns:1.05fr .95fr}
/* stejny duvod jako u .appgrid: bez min-width:0 polozka nejde zmensit a text vyleze mimo obrazovku */
.split>*{min-width:0}
/* Petrolejová, ne marketingová černá: tímhle sloupcem prochází cesta k platbě
   (přehled zdarma → přihlášení → pokladna) a ta má vypadat jako aplikace, kam
   vede. `--panel` je táž barva, na které stojí boční panel aplikace.
   Bílý text na ní má 11,60:1, ztlumený #9DBCC0 5,74:1, odkaz --teal 4,64:1. */
.split .levy{position:relative;background:var(--panel);color:#DCEDEE;padding:64px 56px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* Prstenec zaměření kreslí --teal-deep, což je tyrkysová namíchaná na světlý
   podklad. Na --ink měla 3,46:1, na petrolejové jen 2,28:1, tedy pod prahem
   3:1 pro netextový prvek — a offset je kladný, takže prstenec leží na podkladu
   sloupce a měří se proti němu. Bez tohohle by na tmavém sloupci zmizela
   klávesnicová cesta ke zkoušce za 99 Kč. */
.split .levy :focus-visible{outline-color:var(--teal)}
.split .levy h2{color:#fff;font-size:clamp(1.7rem,2.6vw,2.4rem);max-width:16ch;position:relative;z-index:1}
.split .levy .pod{color:#9DBCC0;font-size:var(--t5);margin-top:16px;max-width:38ch;position:relative;z-index:1}
.split .pravy{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.split .pravy .obal{width:100%;max-width:430px}
.body-split{overflow-x:hidden}
/* Přihlašování a platba se mají vejít na jednu obrazovku. Na nižších oknech
   proto ubíráme odsazení a příběh vlevo, místo aby uživatel scrolloval.
   Když se to ani pak nevejde, scroll zůstane: nedostupné tlačítko je horší
   než posuvník. */
@media(max-height:840px){
  .split .levy{padding:32px 56px}
  .split .pravy{padding:32px 48px}
}
@media(max-height:760px){
  .split .levy .pribeh{display:none}
  .split .levy{padding:32px 56px}
  .split .pravy{padding:24px 48px}
}

.vyhody{list-style:none;margin:32px 0 0;position:relative;z-index:1}
.vyhody li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.13);font-size:var(--t5);color:#C4DCDF}
.vyhody li:first-child{border-top:0}
.vyhody li b{display:block;font-family:'Figtree';font-weight:600;color:#fff;margin-bottom:2px}

.horymini{position:absolute;left:0;right:0;bottom:0;opacity:.16;pointer-events:none}
.horymini path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- hory jako predel mezi sekcemi ---- */
.hory{display:block;width:100%;height:auto;pointer-events:none}
.hory .h1{fill:none;stroke:var(--line);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hory .h2{fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.hory .snih{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:.3}
.hory .vlajka{stroke:var(--teal-deep);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hory .bod{fill:var(--teal)}

.list{display:none}
.list.on{display:block}
.list h1{font-size:var(--t7);margin-bottom:6px}
.list .uvodtext{color:var(--ink-soft);margin-bottom:26px;max-width:62ch}
.sekcnadpis{font-family:'Figtree';font-weight:800;font-size:var(--t6);letter-spacing:-.02em;margin:24px 0 8px}
/* linka za nadpisem drží rytmus stránky, aby karty nesplývaly v jednu plochu */
.list .sekcnadpis{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.list .sekcnadpis::after{content:"";flex:1;height:1px;background:var(--line)}
.list>.sekcnadpis:first-child{margin-top:0}


.radky{background:linear-gradient(180deg,#fff 0%,#FDFEFE 100%);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.radky .r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.radky .r:last-child{border-bottom:0}
.radky .r .l{font-size:var(--t5)}
.radky .r .l b{display:block;font-family:'Figtree';font-weight:600;margin-bottom:2px}
.radky .r .l span{color:var(--muted);font-size:var(--t3)}
.radky .r .btn{width:auto;font-size:var(--t4);padding:8px 16px;min-height:44px}
.castka{font-family:var(--cislice);font-weight:700;font-size:var(--t5);white-space:nowrap}
.jednotka{font-family:'Inter';font-weight:400;font-size:var(--t2);color:var(--muted);margin-left:5px}

.nebezpecne{border-color:#F3C9CA}
.nebezpecne .r{border-color:#FAE3E4}
.btn-cerveny{background:#fff;border:1px solid #E5484D;color:#C0272C}
.btn-cerveny:hover{background:#FFF5F5}

.dialog{position:fixed;inset:0;background:rgba(11,27,32,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:80}
/* Dialog nesmí přerůst obrazovku. S animovanou ukázkou uvnitř karta na malém
   telefonu (375×667) vylezla nahoře ven a nadpis byl useknutý; při delším
   textu by se nedalo doklepnout na potvrzení. Přeteče-li obsah, roluje karta
   sama, ne stránka pod ní. */
.dialog .karta{background:#fff;border-radius:var(--r-lg);padding:24px;max-width:440px;width:100%;
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 24px 60px rgba(11,27,32,.3)}
@media(max-width:620px){.dialog{padding:12px}.dialog .karta{padding:24px 16px}}
.dialog h3{font-size:var(--t6);margin-bottom:8px}
.dialog p{color:var(--ink-soft);font-size:var(--t5);margin-bottom:16px}
/* Když se obsah nevejde, karta roluje — potvrzení ale musí zůstat vidět,
   jinak dialog vypadá, že z něj není cesta ven. */
.dialog .tlacitka{display:flex;gap:8px;margin-top:6px;position:sticky;bottom:0;
  background:#fff;padding-top:12px}
.dialog .tlacitka .btn{flex:1}
/* Obě tlačítka si dělila řádek napůl. Na úzkém displeji se delší popisek
   zalomil na tři řádky a obě pilulky povyrostly na 94 px, protože ve flexu
   drží stejnou výšku. Pod 400 px proto stojí pod sebou; text zůstává, jak je.
   `column`, ne `column-reverse` — pořadí zleva doprava se má přeložit shora
   dolů, ať Zpět zůstane první. Obrácené pořadí by u mazacího dialogu posunulo
   destruktivní tlačítko nahoru, a to je rozhodnutí o tom, co člověk odklepne
   dřív, ne úprava rozvržení.
   🔴 STOJÍ TU NAPLOCHO SCHVÁLNĚ. Vnořený `@media` uvnitř dotykového bloku
   rozbil `test/mobil-prehled.test.mjs` — čte `app.css` regulárem, který
   neumí zanoření, a přestal najít pravidlo o roztažených plochách. Pět testů
   spadlo na hlášku, že v souboru žádné takové pravidlo není. */
@media(max-width:400px){
  .dialog .tlacitka{flex-direction:column}
  .dialog .tlacitka .btn{flex:none;width:100%}
}

@media(max-width:900px){
  .split{grid-template-columns:1fr;min-height:0}
  .split .levy{padding:32px 24px 44px;order:2}
  .split .levy h2{font-size:var(--t7)}
  .split .pravy{padding:32px 16px 32px;order:1}
  .radky .r{flex-wrap:wrap}
  .radky .r .btn{width:100%}
}

/* ---- horni lista aplikace ---- */
.lista{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
/* Lišta jde přes celou šířku i obsahem. Zkusil jsem ji zastropovat na 1120 px,
   ať se logo srovná s nadpisem, ale Tomáš to zamítl: „ta hlavička má být full
   bleed naopak". Na širokém monitoru má aplikace využít plochu, ne stát
   ve sloupci uprostřed. */
.lin{max-width:none;margin:0;padding:0 24px;display:flex;align-items:center;gap:24px;height:62px}
.lin>*{min-width:0}

/* pojistka: záložky se smrsknou, ale nikdy nepřelezou přes pravou část lišty */
.taby{display:flex;gap:4px;margin-right:auto;align-items:center;min-width:0;overflow:hidden}
.taby a{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--r-pill);white-space:nowrap;
  font-family:'Figtree';font-weight:600;font-size:var(--t4);color:var(--ink-soft);text-decoration:none;
  transition:color .18s ease,background-color .18s ease}
@media(max-width:1120px){.taby a{padding:0 12px;font-size:var(--t3);gap:8px}.lin{gap:12px;padding:0 16px}}
.taby a:hover{color:var(--ink);background:var(--tint)}
.taby a.on{color:var(--teal-deep);background:var(--teal-jemna);font-weight:700}
.taby svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.odznak{font-family:'Figtree';font-weight:700;font-size:var(--t1);background:var(--teal);color:#04353a;
  border-radius:var(--r-pill);padding:2px 8px;line-height:1.5}

.vpravo{display:flex;align-items:center;gap:4px;flex:none}

.ucetmenu{position:relative}
.ucetmenu>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:999px;
  border:1px solid var(--line);cursor:pointer;font-family:'Figtree';font-weight:600;font-size:var(--t3);color:var(--ink-soft)}
.ucetmenu>summary::-webkit-details-marker{display:none}
.ucetmenu>summary:hover{background:var(--tint)}
.ucetmenu[open]>summary{background:var(--tint);border-color:var(--teal)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--teal-deep);color:#fff;display:grid;place-items:center;
  font-family:'Figtree';font-weight:700;font-size:var(--t3);flex:none;text-transform:uppercase}
.ucetmenu .menu{position:absolute;right:0;top:calc(100% + 9px);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:4px;min-width:230px;z-index:70}
.ucetmenu .menu .mail{padding:8px 12px 8px;font-size:var(--t3);color:var(--muted);border-bottom:1px solid var(--line-soft);
  margin-bottom:5px;overflow:hidden;text-overflow:ellipsis}
/* Řádková výška se píše výslovně, protože tlačítko si ji od stránky nedědí:
   „Odhlásit se" tím bylo o sedm pixelů nižší než odkazy nad ním a na telefonu
   spadlo pod hranici, na kterou se dá trefit prstem. */
.ucetmenu .menu a,.ucetmenu .menu button{display:flex;width:100%;align-items:center;gap:8px;padding:8px 12px;border:0;
  border-radius:8px;background:none;font-family:'Figtree';font-weight:600;font-size:var(--t4);line-height:1.65;color:var(--ink);
  text-decoration:none;cursor:pointer;text-align:left}
.ucetmenu .menu a:hover,.ucetmenu .menu button:hover{background:var(--tint)}
.ucetmenu .menu svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Nad prahem je to app shell: stránka sama se neroluje, roluje se jen obsah.
   Postranní sloupec tím drží na místě bez ohledu na délku sekce a dekorace
   uvnitř nemůže nafouknout výšku dokumentu. */
.shell{--lista:98px;display:grid;grid-template-columns:250px minmax(0,1fr);position:relative;height:100dvh;overflow:hidden}
.sbar{position:sticky;top:0;height:100%;z-index:60;background:#fff;
  display:flex;flex-direction:column;padding:0 12px 12px}
/* Značka sedí ve stejně vysokém pásu jako hlavička vedle, takže obojí drží
   jednu linku přes celé okno a nad ní už nic nezačíná. */
/* 🔴 Tatáž past jako u výřezu záložky, jen o dvě stě řádků výš: `-16px` proti
   odsazení panelu 12 px přetahovalo pás se značkou 4 px na obě strany, takže
   tmavá plocha vylézala do bílé hlavičky vedle. Záporný okraj musí odsazení
   přesně vyrušit. Vedlejší efekt téže chyby: značka stála o 4 px vlevo od ikon
   záložek pod sebou (20 px místo 24), takže sloupec neměl jednu svislici. */
.sbar .brand{height:var(--lista);margin:0 -12px 12px;padding:24px 24px 0;flex:none;
  align-items:flex-start;border-bottom:1px solid var(--line)}
.sbar .taby{display:grid;gap:2px;margin:0;overflow:visible;position:relative}
.sbar .taby a{height:44px;padding:0 12px;border-radius:12px;gap:12px;font-size:var(--t5);position:relative;z-index:1}
.sbar .taby a .odznak{margin-left:auto}
/* 🔴 Aktivní záložku dřív podbarvoval posuvný jezdec. Od chvíle, kdy je aktivní
   položka VÝŘEZ plochy stránky (viz níž), byly na jeden stav dva ukazatele:
   výřez naskočil hned, jezdec se 0,3 s sunul z předchozí položky, a po celou
   tu dobu svítily dvě položky naráz — a na té odjíždějící zbyl bílý text na
   světlém podkladu. Jezdec je proto pryč celý, včetně `#jezdec` v HTML
   a `posunJezdce` v `start.js`. */
.sbar .vpravo{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);display:grid;gap:4px}
.sbar .hotovost{width:100%}
/* Nabídka aplikace na dně sloupce. Mezi záložkami a účtem byla půlka sloupce
   prázdná a ta plocha je nejlevnější místo v aplikaci, kam se dá něco říct. */
.bokapp{position:relative;margin:0 0 8px;padding:16px 16px 12px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#0B1B20 0%,#123138 58%,#0A3F45 100%);color:#fff}
.bokapp::after{content:"";position:absolute;right:-44px;top:-54px;width:146px;height:146px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,181,192,.34),transparent 70%);pointer-events:none}
.bokapp>*{position:relative;z-index:1}
.bokapp .baik{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.13)}
.bokapp .baik svg{width:17px;height:17px;fill:none;stroke:#8FE3EA;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.bokapp b{display:block;margin:12px 0 4px;font-family:'Figtree';font-weight:800;
  font-size:var(--t4);letter-spacing:-.02em;line-height:1.3}
.bokapp p{margin:0 0 12px;font-size:var(--t2);line-height:1.5;color:rgba(255,255,255,.78)}
.bokapp .babtn{display:block;text-align:center;background:var(--teal);color:#062A2E;border-radius:10px;
  padding:9px 12px;font-family:'Figtree';font-weight:700;font-size:var(--t3);
  text-decoration:none;transition:background .15s}
.bokapp .babtn:hover{background:#3FD0DA}
.bokapp .bazavri{position:absolute;top:4px;right:4px;z-index:2;width:28px;height:28px;border:0;
  border-radius:9px;background:none;color:rgba(255,255,255,.66);font-size:var(--t5);line-height:1;
  cursor:pointer;transition:background .15s,color .15s}
.bokapp .bazavri:hover{background:rgba(255,255,255,.14);color:#fff}
/* Popisek skupiny nad záložkami. Sedm položek v jedné řadě byl seznam, ne
   navigace: nebylo z něj poznat, co je pohled na čísla a co nastavení služby. */
.sbar .tskupina{font-family:'Figtree';font-weight:700;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:0 12px;margin:16px 0 6px}
.sbar .tskupina:first-of-type{margin-top:2px}
.shell .dpage{--gut:34px;padding:0 var(--gut) 90px;
  height:100%;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;z-index:1}

/* Popisky byly na spodní lištu o dva stupně velké a podložka pod ikonou moc
   široká (56 px na ikonu 21 px), takže vybraná položka plavala jako bublina
   nad ostatními. Proporce jsou teď bližší tomu, co má systém sám: menší
   popisek, těsnější podložka a lišta, která se od obsahu oddělí linkou. */
.spodni{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -10px 26px rgba(11,27,32,.06);
  padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
.spodni a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 1px;text-decoration:none;
  font-family:'Figtree';font-weight:600;font-size:var(--t1);letter-spacing:-.01em;color:var(--muted);position:relative}
.spodni a.on{color:var(--teal-deep);font-weight:700}
.spodni .obal{display:grid;place-items:center;width:46px;height:28px;border-radius:var(--r-pill);transition:background .15s}
.spodni a.on .obal{background:var(--teal-jemna)}
.spodni svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spodni .odznak{position:absolute;top:-2px;left:50%;margin-left:6px;font-size:var(--t1);padding:1px 4px}

/* Spodní lišta jako plovoucí pilulka se sklem (Tomáš, 8. 8. 2026). Zvýraznění
   aktivní položky nesedí za ikonou, ale pod celou položkou včetně popisku —
   oválek za ikonou vypadá jako nálepka nalepená na ikonu, ne jako rozsvícená
   dlaždice. Stejný rozdíl je mezi referencí a tím, co tu bylo. */
@media(max-width:1020px){
  .spodni{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    border:0;border-radius:26px;padding:6px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(11,27,32,.04),
      0 1px 2px rgba(11,27,32,.06),0 14px 34px rgba(11,27,32,.14)}
  .spodni a{gap:2px;padding:8px 2px 6px;border-radius:20px;isolation:isolate}
  .spodni .obal,.spodni a.on .obal{width:auto;height:auto;background:none}
  .spodni a::before{content:"";position:absolute;inset:0;border-radius:20px;z-index:-1;
    background:radial-gradient(120% 90% at 50% 15%,rgba(18,181,192,.28),rgba(18,181,192,.10) 55%,transparent 75%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    opacity:0;transition:opacity .22s ease}
  .spodni a.on::before{opacity:1}
}
/* Bez rozostření by pilulka byla průsvitná a obsah pod ní by se pletl do
   popisků. Kde ho prohlížeč neumí, je podklad skoro neprůhledný. */
@supports not (backdrop-filter:blur(2px)){
  @media(max-width:1020px){.spodni{background:rgba(255,255,255,.96)}}
}

/* ---- kostra dashboardu ---- */
/* Plocha i obsah jdou přes celou šířku okna. Hlavička, karty a mřížky tak
   končí na stejné svislici a vpravo nezbývá prázdný pruh. */
.dpage{--gut:24px;position:relative;max-width:none;margin:0;
  padding:0 var(--gut) 90px;overflow-x:clip}

/* Hlavička stránky patří ke chrome, ne k obsahu: drží se nahoře, má vlastní
   bílý podklad jako postranní sloupec a obsah se pod ni podsouvá. Dřív ležela
   na stejné tónované ploše jako karty a nebylo poznat, kde končí navigace
   a začíná to, co si klient čte — při odrolování splynula úplně. */
.dvrch{position:sticky;top:0;z-index:40;min-height:var(--lista,auto);
  margin:0 calc(var(--gut) * -1);padding:16px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Podklad jde přes celou šířku plochy, i když je obsah pod ním užší nebo
   vystředěný. Text v hlavičce zůstává zarovnaný se sloupcem obsahu. Na šířku
   plochy stačí `left/right:0`, protože `.dvrch` už je o `--gut` přetažená přes
   oba okraje `.dpage`.

   🔴 Dřív tu bylo `left/right:-100vmax`, aby podklad „přetekl" ven z plochy.
   Přetéct ale nikam nemohl: `.dpage` má `overflow-x:clip`, takže se podklad
   ořízl na její hraně v obou rozvrženích (změřeno v přehledu i na tehdejším
   místním návrhu konkurence). Zato v přehledu, kde je na `.shell .dpage` zároveň
   `overflow-y:auto`, se `clip` podle specifikace počítá jako `hidden` — a to
   je posuvná oblast. Plocha tak měla scrollWidth 2310 proti clientWidth 1030
   při okně 1280 (přesně těch 100vmax navíc) a po kliknutí na tlačítko, kdy
   prohlížeč posune ohnisko do zobrazení, obsah viditelně ujel o 1 280 px
   do strany. Neviditelný podklad, viditelná chyba. */
.dvrch::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;
  background:#fff;border-bottom:1px solid var(--line)}
.dvrch h1{font-size:var(--t7);line-height:1.2}
.dvrch .kdeJsem{color:var(--ink-soft);margin-top:3px;font-size:var(--t5)}
/* první blok obsahu nesmí lepit na hranu hlavičky */
.dvrch + *{margin-top:24px}
.stavy{display:flex;gap:8px;flex-wrap:wrap}
/* Účet patří do pravého horního rohu hlavičky, ne na dno postranního sloupce.
   Je to první místo, kam se v aplikaci kouká, když chce člověk zjistit, pod
   kým je přihlášený, a v boku končil až pod prázdnou půlkou sloupce. */
.dvlevo{min-width:0}
.dvpravo{display:flex;align-items:center;gap:24px;flex:none}
.dvpravo .ucetmenu>summary{border:1px solid var(--line);border-radius:var(--r);
  padding:5px 12px 5px 5px;gap:12px}
.ucetmenu .ukdo{display:grid;min-width:0;line-height:1.25;text-align:left}
.ucetmenu .ukdo b{font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucetmenu .ukdo span{font-size:var(--t1);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20ch}
.ucetmenu .usip{width:16px;height:16px;flex:none;background:no-repeat center/12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7075' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .18s}
.ucetmenu[open] .usip{transform:rotate(180deg)}

/* Na telefonu se tři záložky vedle sebe nevejdou a pruh se posouvá do strany.
   Šedý posuvník pod pilulkami vypadal jako rozbitý prvek, proto je schovaný;
   že se dá pruh posunout, prozradí useknutá záložka na kraji. */
.podtaby{display:flex;gap:4px;background:#E3EEEF;padding:4px;border-radius:var(--r-pill);
  margin-bottom:24px;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-behavior:smooth}
.podtaby::-webkit-scrollbar{display:none}
.podtaby a{padding:8px 16px;border-radius:var(--r-pill);font-family:'Figtree';font-weight:600;font-size:var(--t4);
  color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.podtaby a.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(11,27,32,.12)}

/* ---- co je ted na uzivateli ---- */
.ted{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:linear-gradient(180deg,#fff 0%,#FDFEFE 100%);border-radius:var(--r-lg);
  box-shadow:var(--shadow-zveda);padding:24px 24px}
.ted .ikona{width:60px;height:60px;border-radius:50%;background:var(--teal-jemna);display:grid;place-items:center;flex:none}
.ted.klid .ikona{background:#E6F6EC}
.ted .ikona svg{width:28px;height:28px;stroke:var(--teal-deep);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ted.klid .ikona svg{stroke:#14622F}
.ted .txt{flex:1;min-width:220px}
.ted h2{font-size:var(--t6)}
.ted p{color:var(--ink-soft);font-size:var(--t5);margin-top:5px;max-width:56ch}
.ted .btn{width:auto;flex:none}
/* Podklad je jednolitý, ne přechod: kontrast na přechodu se změřit nedá a
   `ui-audit` by tenhle pruh musel odepsat jako neměřitelný. Bílá na #0A7A83
   dává 5,5:1, takže projde AA i pro běžný text. */
.ted.ceka{background:var(--teal-deep);box-shadow:0 1px 2px rgba(10,122,131,.2),0 14px 34px rgba(10,122,131,.26)}
/* `.ted .txt p` níž v souboru má stejnou váhu a je později, takže by popisek
   zůstal šedý na tyrkysové. Selektor proto musí být o třídu delší. */
.ted.ceka h2{color:#fff}
.ted.ceka .txt p{color:#fff}
.ted.ceka .ikona{background:rgba(255,255,255,.16)}
.ted.ceka .ikona svg{stroke:#fff}

.rozjezd{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 24px 4px;margin-top:0}
.rozjezd .vrch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rozjezd h2{font-size:var(--t6)}
.rozjezd .kolik{font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--teal-deep)}
.rozjezd .pruh{height:6px;border-radius:var(--r-pill);background:var(--tint);margin:12px 0 2px;overflow:hidden}
.rozjezd .pruh i{display:block;height:100%;border-radius:var(--r-pill);background:var(--teal);transition:width .4s}
.krok{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.krok .kolecko{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;
  flex:none;font-family:'Figtree';font-weight:700;font-size:var(--t2);color:var(--muted)}
.krok .kolecko svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.krok.hotovo .kolecko{background:var(--good);border-color:var(--good)}
.krok .l{flex:1;min-width:0}
.krok b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.krok span{display:block;color:var(--muted);font-size:var(--t3);line-height:1.5}
.krok.hotovo b{color:var(--ink-soft)}
.krok .btn{width:auto;flex:none;font-size:var(--t4);padding:8px 16px;min-height:42px}
.krok .znacka{flex:none}

/* ---- prvni spusteni ---- */
.uvod{position:fixed;inset:0;background:rgba(11,27,32,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:90}
.uvod .karta{background:#fff;border-radius:var(--r-lg);max-width:520px;width:100%;overflow:hidden;box-shadow:0 24px 60px rgba(11,27,32,.34)}
.uvod .obraz{height:200px;background:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.uvod .obraz svg{width:132px;height:132px;position:relative;z-index:1}
.uvod .obraz .hory{z-index:0}
.scena{position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center;padding:12px 24px}

/* zákazník hledá a mezi výsledky je vidět klient */
.scena .mobil{width:100%;max-width:238px;display:grid;gap:4px}
.scena .hledani{display:flex;align-items:center;gap:8px;background:#fff;border-radius:var(--r-pill);padding:8px 12px;
  font-size:var(--t2);color:var(--ink);white-space:nowrap;overflow:hidden}
.scena .lupa{flex:none;width:11px;height:11px;border:2px solid var(--muted);border-radius:50%;position:relative}
.scena .lupa::after{content:"";position:absolute;top:9px;left:8px;width:6px;height:2px;background:var(--muted);
  border-radius:2px;transform:rotate(45deg)}
.scena .psani{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:pise 1.5s steps(18) .2s forwards}
.scena .vysl{display:flex;align-items:center;gap:8px;background:#15323A;border-radius:11px;padding:8px 12px;opacity:0;
  animation:najede .4s ease-out forwards}
.scena .v1{animation-delay:1.7s}
.scena .v2{animation-delay:2s;background:#12B5C0}
.scena .v3{animation-delay:2.3s}
.scena .vysl .body{flex:none;width:12px;height:12px;border-radius:50%;background:#3C5A62}
.scena .vysl .body.ja{background:#0B1B20}
.scena .vysl .cara{height:6px;border-radius:99px;background:#3C5A62}
.scena .c1{width:52%}.scena .c2{width:44%;background:#0B1B20}.scena .c3{width:60%}
.scena .stitek{margin-left:auto;font-family:var(--cislice);font-weight:600;font-size:var(--t1);color:#083E43;
  background:#fff;border-radius:99px;padding:1px 8px}

/* recenze přijde, my připravíme odpověď, klient odklepne */
.scena .chat{width:100%;max-width:300px;display:grid;gap:8px}
.scena .zprava{font-size:var(--t1);line-height:1.45;border-radius:13px;padding:8px 12px;opacity:0;
  animation:najede .45s ease-out forwards;max-width:88%}
.scena .od-zak{background:#15323A;color:#DCEAEC;border-bottom-left-radius:4px;animation-delay:.2s}
.scena .od-nas{background:#fff;color:var(--ink);margin-left:auto;border-bottom-right-radius:4px;animation-delay:1.3s}
.scena .stopka{display:block;font-family:var(--cislice);font-weight:500;font-size:var(--t1);color:var(--muted);margin-top:3px}

/* čísla se hýbou */
.scena .graf{width:100%;max-width:250px;height:96px;display:flex;align-items:flex-end;gap:8px;position:relative}
.scena .sl{flex:1;background:#3C5A62;border-radius:5px 5px 0 0;height:0;animation:roste .7s cubic-bezier(.2,.8,.3,1) forwards}
.scena .s1{animation-delay:.1s;--v:34%}
.scena .s2{animation-delay:.24s;--v:52%}
.scena .s3{animation-delay:.38s;--v:44%}
.scena .s4{animation-delay:.52s;--v:70%;background:#12B5C0}
.scena .s5{animation-delay:.66s;--v:92%;background:#12B5C0}
.scena .cislo{position:absolute;top:-2px;left:0;font-family:var(--cislice);font-weight:600;font-size:var(--t2);color:#7FE3EA;
  opacity:0;animation:najede .4s ease-out 1.3s forwards}

@keyframes pise{to{width:9.4em}}
@keyframes najede{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes roste{to{height:var(--v)}}

@media(prefers-reduced-motion:reduce){
  .scena *{animation-duration:.01ms!important;animation-delay:0ms!important}
  .scena .psani{width:9.4em}
}
.uvod .obraz .hory{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.1}
.uvod .telo{padding:24px 24px 24px}
.uvod .tecky{display:flex;gap:4px;margin-bottom:16px}
.uvod .tecky i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .25s}
.uvod .tecky i.on{width:22px;background:var(--teal)}
.uvod h2{font-size:var(--t6)}
.uvod p{color:var(--ink-soft);font-size:var(--t5);margin-top:9px;line-height:1.62}
.uvod .spodek{display:flex;align-items:center;gap:8px;margin-top:24px}
.uvod .spodek .btn{width:auto;min-height:46px;padding:12px 24px;font-size:var(--t5)}
.uvod .spodek .preskocit{margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(11,27,32,.05);
  padding:8px 16px;font-size:var(--t3);color:var(--ink-soft);font-family:'Figtree';font-weight:600}
.chip i{width:8px;height:8px;border-radius:50%;background:#C4D0D2;flex:none}
.chip.ano i{background:var(--good)}
.chip.ne i{background:#D8A24A}
.chip b{font-family:var(--cislice);font-weight:700;color:var(--ink)}

.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.kar{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 18px}
.kar .nadp{display:flex;align-items:center;gap:12px;font-family:'Figtree';font-weight:700;font-size:var(--t4);margin-bottom:8px}
.kar .nadp svg{width:19px;height:19px;stroke:var(--barva,var(--teal-deep));fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kar .nadp .ik img{width:20px;height:20px}
.napoj .ikona img{width:22px;height:22px}
.napoj .ikona img.ctverec{border-radius:5px}
.kar .nadp .ik{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--barva,#12B5C0) 14%,#fff)}
.kar .velke{font-family:'Figtree';font-weight:800;font-size:var(--t7);letter-spacing:-.03em;line-height:1.1}
.kar .pod{font-size:var(--t3);color:var(--muted);margin-top:5px;line-height:1.55}
.kar .cara{height:1px;background:var(--line-soft);margin:16px 0}
.kar .titulek{font-family:'Figtree';font-weight:700;font-size:var(--t2);color:var(--muted);margin-bottom:12px}
.kar .mini .c{font-family:var(--cislice);font-weight:700;font-size:var(--t2);min-width:32px;text-align:right}
.kar .akce{display:inline-flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:700;font-size:var(--t4);
  color:var(--teal-deep);text-decoration:none;cursor:pointer;background:none;border:0;padding:0}
.kar .akce:hover{text-decoration:underline}

.napoj{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.napoj .rad{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.napoj .rad:last-child{border-bottom:0}
/* 🔴 Spouštěcí tlačítko a věta o přídělu ze `spustTlacitko` jsou PŘÍMÉ děti
   bílého rámu, ne řádky, takže odsazení řádků na ně nedosáhne. Bez tohohle
   seděly na hraně a `overflow:hidden` se zaoblením ukrajovalo první písmeno:
   ze „Zbývá 2 z 2" zbylo „bývá". Vidět to bylo i před zvětšením rohů, jen míň. */
.napoj>p{padding:0 24px}
.napoj>p:last-child{padding-bottom:20px}
.napoj .ikona{width:46px;height:46px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none}
.napoj .ikona svg{width:22px;height:22px}
.napoj .txt{flex:1;min-width:200px}
.napoj .txt b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.napoj .txt span{display:block;color:var(--muted);font-size:var(--t3);margin-top:3px;line-height:1.55}
.napoj .rad.mimo{background:#FCFDFD}
.napoj .rad.mimo .txt b{color:var(--ink-soft)}
.iBtn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:#fff;flex:none;
  font-family:'Figtree';font-weight:800;font-size:var(--t3);color:var(--muted);cursor:pointer;line-height:1}
.iBtn:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-jemna)}

/* Prázdný stav se používá i mimo tmavý AI rámec (provozovna, obor, dotazy).
   Tam do teď neměl žádný styl, takže se nadpis slepil s textem do jedné věty:
   „Vyberte svou provozovnuZatím vás na mapách hledáme…". */
.zamek{display:grid;justify-items:center;text-align:center;gap:8px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px}
.zamek b{font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.zamek span{color:var(--muted);font-size:var(--t4);max-width:46ch;line-height:1.6}
/* uvnitř karty už podklad je, druhá bílá plocha vypadá jako karta v kartě */
.card .zamek{background:none;box-shadow:none;padding:2px 0 4px}

.airam{background:var(--ink);border-radius:var(--r-lg);padding:24px;display:grid;gap:16px}
.airam .kdo{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t1);color:#8FB6BA;margin-bottom:8px}
.airam .bublina{background:#152C33;border-radius:18px 18px 18px 6px;padding:16px 16px;max-width:78%}
.airam .bublina p{color:#fff;font-size:var(--t5);font-family:'Figtree';font-weight:600}
.airam .meta{display:block;font-family:var(--cislice);font-weight:500;font-size:var(--t1);color:#7FA3A8;margin-top:8px}
.airam .odpoved{background:#0F242A;border-radius:18px 18px 6px 18px;padding:16px 16px;margin-left:auto;max-width:88%;width:100%}
.airam .zamek{display:grid;justify-items:center;text-align:center;gap:8px;padding:24px 8px 12px;
  background:none;box-shadow:none;border-radius:0}
.airam .zamek svg{width:30px;height:30px;fill:none;stroke:#12B5C0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.airam .zamek b{font-family:'Figtree';font-weight:800;font-size:var(--t5);color:#fff}
.airam .zamek span{color:#9DBCC0;font-size:var(--t4);max-width:46ch;line-height:1.55}

.pomoc{position:fixed;right:22px;bottom:22px;z-index:75;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);padding:12px 16px;cursor:pointer;
  font-family:'Figtree';font-weight:700;font-size:var(--t4);box-shadow:0 6px 20px rgba(11,27,32,.28)}
.pomoc:hover{background:var(--teal-deep)}
.pomoc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pomoc:active{transform:scale(.97)}

.znacka{font-family:'Figtree';font-weight:700;font-size:var(--t2);
  padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
.znacka::first-letter{text-transform:uppercase}
/* Pět stavů, pět vzhledů. Do 3. 8. 2026 měly `připravujeme`, `zastaveno`,
   `po zaplacení` i `ve vyšším balíčku` shodně třídu `ceka`, takže vypadaly
   stejně — přestože u jednoho uživatel nedělá nic, u druhého má zaplatit
   a u třetího si má připlatit. Barva teď říká, čí je to tah:
   ok = běží · ceka = čeká na vás · rucne = děláme my · stop = skončilo ·
   vyssi = nabídka. Všechny páry jsou nad WCAG AA (5,4–6,7:1). */
.znacka.ok{background:#E6F6EC;color:#14622F}
.znacka.ceka{background:#FEF3DE;color:#8A5A06}
.znacka.rucne{background:var(--tint);color:var(--ink-soft)}
.znacka.stop{background:#F6EAEA;color:#8A3A38}
.znacka.vyssi{background:#E3F4F6;color:#0A5F66}

/* Práh je 1020, ne 860: pod ním se šest záložek s popisky do sloupce nevejde
   a poslední se ořízne. Spodní navigace je tam čitelnější než ikony bez textu.
   Postranní sloupec se pod prahem překlápí do úzké horní lišty, aby značka
   a účet nezmizely — jsou to tytéž prvky, ne druhá kopie. */
@media(max-width:1020px){
  .taby,.sbar .taby{display:none}
  .spodni{display:flex}
  body.app.snav{padding-bottom:80px}
  .shell{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  /* Lišta musí vykreslit bílou i do výřezu nad displejem. Bez toho tam prosvítá
     tónované pozadí stránky a nad hlavičkou zůstane pruh cizí barvy. */
  .sbar{flex-direction:row;align-items:center;gap:12px;height:auto;
    min-height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 16px 0;border-right:0;border-bottom:1px solid var(--line)}
  .sbar .brand{height:auto;padding:0;margin:0 auto 0 0;border-bottom:0}
  .sbar .vpravo{margin-top:0;padding-top:0;border-top:0;display:flex;align-items:center;gap:4px}
  /* Do úzké horní lišty se karta nevejde a na telefonu je nabídka aplikace
     stejně ve vyskakovacím okně. */
  .bokapp{display:none}
  /* V úzké liště není místo na popisek ani na proužek; zlomek sám o sobě
     nese celý údaj a zbytek je v Rozjezdu na Domů. */
  /* Samotný zlomek „5 ze 7" v liště nic neříkal, chyběl mu předmět. Popisek
     se tam vejde, jen musí být menší a proužek zůstává schovaný. Barevná
     tečka nese to, co dřív nesl proužek: jak daleko profil je. */
  /* min-height drží klikací cíl na 24 px podle WCAG AA (2.5.8); samotné
     odsazení 4 px dávalo 22 px. Odsazení zůstává, aby se lišta dál vešla. */
  .sbar .hotovost{width:auto;padding:4px 12px;gap:0;min-height:24px}
  .sbar .hotovost .hkruh{display:none}
  .sbar .hotovost .txt{display:flex;gap:8px;align-items:center}
  .sbar .hotovost .co{font-size:var(--t1);display:flex;align-items:center;gap:4px}
  .sbar .hotovost .co::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--barva)}
  .sbar .hotovost .txt b{font-size:var(--t1)}
  /* V úzké horní liště není na e-mail místo, zůstane iniciála a jméno. */
  .dvpravo{gap:12px}
  .ucetmenu .ukdo span{display:none}
  .lin{height:56px;gap:12px;padding:0 16px}
  .dpage{--gut:16px;padding:0 var(--gut) 40px}
  /* overflow-y musí zpátky na visible, aby plocha nebyla vlastní posuvník a
     stránka rolovala tělem. Zkratka `overflow:visible` ale zároveň zrušila
     `overflow-x:clip` a podklad hlavičky, tehdy přetažený o 100vmax, vylezl
     ven — stránka na telefonu šla odsunout do strany. Podklad je od 4. 8. 2026
     na hraně plochy (viz `.dvrch::before`), `clip` tu ale zůstává jako pojistka
     proti dalšímu přetékajícímu prvku. */
  .shell .dpage{--gut:16px;max-width:none;padding:0 var(--gut) 96px;height:auto;overflow-y:visible;overflow-x:clip}
  /* Na mobilu už je nahoře přilepená lišta; druhá přilepená hlavička by se pod
     ni schovala a spolu by sebraly sedminu displeje. Vlastní podklad si nechává,
     odroluje se ale s obsahem. */
  .dvrch{position:static;min-height:0;padding:16px var(--gut) 14px}
  .dvrch h1{font-size:var(--t6)}
  .ted{padding:16px;gap:16px;align-items:flex-start}
  .ted .ikona{width:48px;height:48px}
  .ted h2{font-size:var(--t6)}
  .ted .btn{width:100%}
  .rozjezd{padding:16px 16px 4px}
  .krok{flex-wrap:wrap}
  .krok .btn{width:calc(100% - 38px);margin-left:38px}
  .pomoc{right:14px;bottom:calc(80px + env(safe-area-inset-bottom));width:52px;height:52px;padding:0;justify-content:center}
  .pomoc span{display:none}
  .pomoc svg{width:23px;height:23px}
  .airam{padding:16px}
  .airam .bublina,.airam .odpoved{max-width:100%}
  .uvod .obraz{height:176px}
  .scena{padding:12px 16px}
  .scena .chat{max-width:270px}
  .scena .mobil{max-width:220px}
  .uvod .telo{padding:24px 16px 16px}
  .uvod .spodek .btn{padding:12px 16px;font-size:var(--t4)}
}

/* Malá tlačítka a odznaky s odkazem mají na displeji 28 až 36 px, prst
   potřebuje 44. Zvětšovat je opticky by rozbilo rytmus karet, proto se dotyková
   plocha jen neviditelně roztáhne kolem nich. Roztahuje se jen na výšku a
   nejvýš o osm pixelů, takže se vejde do mezery nad prvkem i pod ním a
   nekrade plochu sousednímu odkazu. */
@media(max-width:1020px){
  /* Souhlas s cookies je první věc, na kterou člověk na telefonu sáhne, a obě
     tlačítka měla 31 px. Roztáhnout je neviditelně nejde: leží vedle sebe a
     plocha by přetekla na sousedy, takže se zvětšují doopravdy. Lišta je tím
     o 13 px vyšší, což u pruhu přes roh obrazovky nevadí. */
  #mvCookies button{min-height:44px}

  /* Odkazy pod napojením jsou tlačítka bez rámečku, takže měla jen výšku řádku
     (26 px). Neviditelné roztažení se sem nehodí: na úzké obrazovce se lámou
     pod sebe a plochy by se srazily, proto se zvětšují doopravdy.
     Osmipixelová mezera mezi nimi zůstává schválně, aby vedle sebe stály dva
     oddělené cíle a klepnutí vedle nespustilo ten druhý. Blok tím na dvou
     řádcích naroste o 36 px. */
  .navodOdkazy .jakoodkaz{padding:8px 0}

  /* Tlačítko v pruhu „potvrďte e-mail" mělo 35 px. Na dotykové šířce stojí na
     vlastním řádku přes celou šířku, takže smí vyrůst doopravdy a nemá se
     s čím srazit. Pruh vidí jen účet s nepotvrzeným e-mailem, proto ho průchod
     nad běžnými fixturami nikdy neukázal. */
  .pruh-email button{min-height:44px}

  /* Zpět do přehledu se pod 520 px scvrkne na samotnou ikonu (43×35) a řádek
     citace měl 38 px. Obojí stojí samostatně — tlačítko na kraji lišty, řádky
     citací odděluje mezera 6 px — takže smí vyrůst doopravdy. */
  .zpet{min-height:44px}

  /* Řádky zdrojů v kartě modelu měly 25 px a ležely na sobě bez mezery.
     Neviditelné roztažení sem nejde právě proto, že se dotýkají — plochy by
     se překryly a klepnutí by otevřelo cizí odkaz. Rostou tedy doopravdy a
     dvoupixelová mezera mezi nimi drží dva sousedy oddělené. Karta tím na
     třech zdrojích naroste o necelých šedesát pixelů, což je na dotykovém
     displeji přijatelná cena za odkaz, na který se dá trefit. */
  .aistr a{min-height:44px;padding:2px 0;margin-bottom:2px}


  /* `.mdvic`, `.hotovost` a `.brand` přibyly ze stejného důvodu jako zbytek
     seznamu: měřily 23 až 26 px na výšku. Roztažení je tady na místě, protože
     všechny tři sedí ve vodorovné řádce (hlavička karty, horní lišta) a nad
     ani pod nimi žádný jiný cíl není — plocha se tedy nemá s čím srazit. */
  .iBtn,.tsip,.tsdilet,.linkbtn,.achipy2 a,.taiakce button,.nrakce a.znacka,
  .mdvic,.sbar .hotovost,.brand,.apzavrit{position:relative}
  .iBtn::after,.tsip::after,.tsdilet::after,.linkbtn::after,.achipy2 a::after,
  .taiakce button::after,.nrakce a.znacka::after,
  .mdvic::after,.sbar .hotovost::after,.brand::after,.apzavrit::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .iBtn::after,.tsip::after,.apzavrit::after{left:50%;width:44px;transform:translate(-50%,-50%)}
  /* Šipky pásu AI se schovávají až pod 620 px; v pásmu tabletu měřily 32 px.
     Sousedí spolu, takže rostou doopravdy, ne neviditelným roztažením. */
  .aisipka{width:44px;height:44px}
  /* šipky jsou od sebe 6 px, roztažené plochy by se o kus překrývaly */
  .tprep{gap:12px}
  /* Posouvací pruh pilulek se na telefonu nepovedl: vybraná záložka dosedla
     na zaoblený konec pruhu a oříznul ji, první záložka zmizela za krajem
     a nedalo se poznat, kolik jich vlastně je. Místo posouvání se rozdělí
     na stejné díly přes celou šířku a delší popisek se zalomí. */
  .podtaby{width:auto;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;
    overflow:visible;border-radius:16px;gap:4px}
  .podtaby a{min-height:44px;display:flex;align-items:center;justify-content:center;
    text-align:center;white-space:normal;padding:8px 4px;font-size:var(--t3);
    line-height:1.25;border-radius:12px;hyphens:auto}
}

/* 🔴 `transform:none` tu není pro nic za nic. Lištu stylují dvě místa: tenhle
   blok (rohové okno) a `<style>`, který si vkládá `cookies.js` (pás přes střed
   s `left:50%;transform:translateX(-50%)`). Ten se vkládá na začátek hlavičky,
   takže `left` z app.css vyhraje, ale `transform` v ní žádný není a posun
   o půl šířky přežije. Pod 480 px, kde je lišta na celou šířku, ji to odsunulo
   o 169 px mimo obrazovku i s tlačítkem Odmítnout. Změřeno 10. 8. 2026 na
   /prehled-zdarma při 390 px. */
#mvCookies{position:fixed;left:14px;bottom:14px;z-index:80;max-width:290px;transform:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(11,27,32,.05),0 14px 44px rgba(11,27,32,.08);padding:12px 12px}
#mvCookies p{font-size:var(--t2);color:var(--ink-soft);line-height:1.5;margin:0 0 8px}
#mvCookies a{color:var(--teal-deep)}
#mvCookies .tl{display:flex;gap:8px}
#mvCookies button{flex:1;font-family:'Figtree';font-weight:600;font-size:var(--t2);padding:8px 8px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer}
#mvCookies button[data-ano]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* pod prahem je dole navigace, lišta musí nad ni, jinak ji celou zakryje */
@media(max-width:1020px){body.snav #mvCookies{bottom:calc(88px + env(safe-area-inset-bottom))}}
@media(max-width:480px){#mvCookies{left:10px;right:10px;max-width:none}}

/* ---- celoobrazovkove nacitani, at nikde neproblikne rozdelana stranka ---- */
.stinitko{position:fixed;inset:0;z-index:100;background:var(--plocha);display:grid;place-items:center;padding:24px}
.stinitko .obal{display:grid;justify-items:center;gap:16px;text-align:center}
.stinitko .znak{display:flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:800;font-size:var(--t5);letter-spacing:-.02em}
.stinitko .znak svg{width:24px;height:24px}
.stinitko p{color:var(--ink-soft);font-size:var(--t5)}
.tocitko{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal-deep);animation:tocit .8s linear infinite}
@keyframes tocit{to{transform:rotate(360deg)}}
.stinitko.mizi{animation:zmiz .25s ease-out forwards}
@keyframes zmiz{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  .tocitko{animation-duration:2.4s}
  .stinitko.mizi{animation:none;opacity:0;visibility:hidden}
}

/* ---- odezva na klepnuti ---- */
.taby a:active,.spodni a:active,.podtaby a:active,.linkbtn:active,.iBtn:active,.pomoc:active,.klient:active{transform:scale(.97)}
.taby a,.spodni a,.podtaby a,.linkbtn,.iBtn,.klient{transition:transform .12s ease-out,background .15s}

/* ---- pole s heslem ---- */
.sheslem{position:relative}
.sheslem input{padding-right:52px}
.sheslem .oko{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
  border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}
.sheslem .oko:hover{background:var(--tint)}
.sheslem .oko svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sheslem .oko.vidi svg{stroke:var(--teal-deep)}
.napoveda.vysvitka{color:#8A5A06;font-weight:500}

/* ---- pozice na mapách a konkurence ---- */
/* Meze převzaté z původního návrhu konkurence, ať mapa pozic vypadá
   v aplikaci a v ukázce pro cizí firmu stejně. */
.poziceRad{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px;align-items:start;margin-top:24px}
.poziceRad>*{min-width:0}
.mapaBox{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px}
.mrizkaBody{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#F4F9F9;border-radius:var(--r);padding:16px}
/* Číslo pozice je tmavé, ne bílé: bílá na oranžové #EF9F06 dává kontrast
   2,18:1, tedy pod WCAG AA, a čísla v mřížce jsou to hlavní, co se z ní čte.
   Tmavá číslice projde na všech třech barvách semaforu (5,35 / 8,08 / 4,50)
   a barvy samotné se tím měnit nemusely. */
.mrizkaBody .bod{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  font-family:var(--cislice);font-weight:700;font-size:var(--t2)}
.mrizkaBody .bod.a{background:#17A34A}
.mrizkaBody .bod.b{background:#EF9F06}
.mrizkaBody .bod.c{background:#E5484D}
.mrizkaBody .bod.vy{box-shadow:0 0 0 4px rgba(18,181,192,.3)}
.legenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:var(--t2);color:var(--muted)}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.legenda i{width:10px;height:10px;border-radius:50%}
.poradiK{width:30px;height:30px;border-radius:50%;background:var(--tint);display:grid;place-items:center;
  font-family:var(--cislice);font-weight:700;font-size:var(--t2);color:var(--ink-soft);flex:none}
.udajeK{display:flex;gap:16px;flex-wrap:wrap}
.udajeK>span{text-align:right;font-size:var(--t2);color:var(--muted);min-width:52px}
.udajeK b{display:block;font-family:var(--cislice);font-weight:700;font-size:var(--t4);color:var(--ink)}
.kar .velke em{font-style:normal;font-family:var(--cislice);font-weight:700;font-size:var(--t2)}
.kar .velke em.lepsi{color:var(--good)}
.kar .velke em.horsi{color:var(--bad)}
@media(max-width:900px){.poziceRad{grid-template-columns:1fr}}

/* ---- bublina s pořadím v bodě mřížky ---- */
.mrizkaBody .bod{position:relative;cursor:default}
.tipbod{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.96);
  width:max-content;max-width:210px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 12px;
  font-family:'Inter';font-weight:400;font-size:var(--t1);line-height:1.5;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:20;
  box-shadow:0 12px 30px rgba(11,27,32,.3);pointer-events:none}
.tipbod::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:var(--ink)}
.tipbod .bnadpis{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t2);margin-bottom:6px;color:#fff}
.tipbod span{display:block;color:#C4DCDF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipbod span b{color:var(--teal);margin-right:5px}
.mrizkaBody .bod:hover .tipbod,.mrizkaBody .bod:focus-visible .tipbod{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.mrizkaBody .bod:nth-child(5n+1) .tipbod{left:0;transform:translateX(0) scale(.96)}
.mrizkaBody .bod:nth-child(5n+1):hover .tipbod{transform:translateX(0) scale(1)}
.mrizkaBody .bod:nth-child(5n) .tipbod{left:auto;right:0;transform:translateX(0) scale(.96)}
.mrizkaBody .bod:nth-child(5n):hover .tipbod{transform:translateX(0) scale(1)}
.mrizkaBody .bod:nth-child(-n+5) .tipbod{bottom:auto;top:calc(100% + 10px)}
.mrizkaBody .bod:nth-child(-n+5) .tipbod::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}

.zpet{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none;color:var(--ink-soft);
  font-family:'Figtree';font-weight:600;font-size:var(--t4);white-space:nowrap;flex:none}
.zpet:hover{background:var(--tint);color:var(--ink)}
.zpet svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.zpet span{display:none}.zpet{padding:8px 12px}}

/* ---- telefon s upozorněními na stránce o aplikaci ---- */
.telbox{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;background:var(--ink);
  border-radius:var(--r-lg);padding:32px;margin-bottom:12px}
.telefon{position:relative;width:266px;border-radius:38px;background:#122A31;
  border:8px solid #0A171C;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);overflow:hidden;flex:none}
.telefon .rec{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:86px;height:22px;
  border-radius:99px;background:#0A171C;z-index:2}
.telefon .obrazovka{padding:52px 12px 24px;display:grid;gap:8px;align-content:start;text-align:left;
  background:radial-gradient(120% 80% at 50% 0%,#1D4048 0%,#0F262C 60%,#0B1B20 100%)}
.telefon .notif{max-width:none}
.telefon .hodiny{text-align:center;color:#fff;margin-bottom:6px}
.telefon .hodiny b{display:block;font-family:'Figtree';font-weight:300;font-size:var(--t8);line-height:1}
.telefon .hodiny span{font-size:var(--t1);color:#9DBCC0}
.telvedle .telpop{color:#DCEDEE;font-size:var(--t5);line-height:1.6;margin-bottom:16px;max-width:38ch}
.telvedle .telpop b{color:#fff;font-family:'Figtree';font-weight:700}
.telvedle .btn{width:auto;display:inline-flex}
.telvedle .drobne{color:#8FB6BA}

@media(max-width:860px){
  .telbox{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding:24px 16px}
  .telvedle{display:grid;justify-items:center}
  .telvedle .telpop{text-align:center}
  .telvedle .drobne{text-align:center!important}
  .telefon{width:236px}
}
@media(max-width:420px){
  .telefon{width:100%;max-width:250px}
  .telefon .hodiny b{font-size:var(--t8)}
  .telvedle .btn{width:100%}
}

/* ---- nabídka aplikace na plochu a ukázka upozornění ---- */
.apppop{position:fixed;inset:0;background:rgba(11,27,32,.6);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:95}
.apkarta{position:relative;background:#fff;border-radius:var(--r-lg);max-width:440px;width:100%;overflow:hidden;
  box-shadow:0 24px 60px rgba(11,27,32,.34);animation:vyjede .35s cubic-bezier(.2,.9,.3,1)}
.apvrch{background:var(--ink);padding:24px 24px 24px;display:grid;justify-items:center;gap:16px}
.apik{width:66px;height:66px;border-radius:18px;background:#fff;display:grid;place-items:center;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.apik img{width:46px;height:46px;border-radius:12px}
.aptelo{padding:24px 24px 24px}
.aptelo h2{font-family:'Figtree';font-weight:800;font-size:var(--t6);line-height:1.25}
.aptelo p{color:var(--muted);font-size:var(--t4);line-height:1.6;margin-top:8px}
.apakce{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.apakce .btn{width:auto;flex:1;min-width:150px}
.apneukazovat{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--t3);color:var(--muted);cursor:pointer}
.apneukazovat input{width:17px;height:17px;accent-color:var(--teal-deep)}
/* Křížek byl bílý na rgba(255,255,255,.14), jenže .apkarta je bílá — takže
   zavírací tlačítko bylo prakticky neviditelné (kontrast 1:1). */
.apzavrit{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(11,27,32,.07);color:var(--ink);font-size:var(--t6);line-height:1}
.apzavrit:hover{background:rgba(11,27,32,.14)}

.notif{display:flex;gap:12px;align-items:flex-start;width:100%;max-width:330px;background:rgba(255,255,255,.96);
  border-radius:16px;padding:12px 12px;box-shadow:0 12px 30px -16px rgba(0,0,0,.7);
  animation:notifPrijde .5s cubic-bezier(.2,1.2,.4,1) .35s both}
.notif.druha{animation-delay:.75s}
.notif .ikonka img{border-radius:8px;display:block}
.notif .txt{min-width:0}
.notif .txt b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t2);color:var(--ink)}
.notif .txt b span{font-weight:500;color:var(--muted);margin-left:6px;font-size:var(--t2)}
.notif .txt p{font-size:var(--t2);line-height:1.45;color:var(--ink-soft);margin-top:2px}


.navod .kroky{list-style:none;counter-reset:n;display:grid;gap:12px}
.navod .kroky li{counter-increment:n;display:flex;gap:12px;align-items:flex-start;font-size:var(--t5);line-height:1.6}
.navod .kroky li::before{content:counter(n);flex:none;width:26px;height:26px;border-radius:50%;background:var(--plocha);
  display:grid;place-items:center;font-family:var(--cislice);font-weight:600;font-size:var(--t1);color:var(--ink-slaby, var(--muted))}

@keyframes vyjede{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes notifPrijde{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.apkarta,.notif{animation:none}}
@media(max-width:520px){.apakce .btn{width:100%;flex:none}}

/* ---- vývoj pozice v čase a rozdíl proti minulému skenu ---- */
.vyvoj{padding:24px 24px 16px}
.vyvrch b{display:block;font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.vyvrch span{display:block;color:var(--muted);font-size:var(--t3);margin-top:3px}
.vygraf{width:100%;height:150px;margin-top:16px;overflow:visible}
.vygraf .vyplocha{fill:rgba(18,181,192,.12);stroke:none}
.vygraf .vycara{fill:none;stroke:var(--teal-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.vygraf circle{fill:#fff;stroke:var(--teal-deep);stroke-width:2.4;vector-effect:non-scaling-stroke}
.vygraf circle.posledni{fill:var(--teal-deep)}
.vypopisky{display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted)}

/* Stejné světlé pozadí a tmavý text jako štítky .zm.nahoru/.dolu: bílé číslo
   na semaforové zelené mělo 3,29:1 a na červené 3,91:1, při 12 px málo. */
.zmenaBod{position:absolute;top:-7px;right:-8px;font-family:var(--cislice);font-weight:600;font-size:var(--t1);
  line-height:1;padding:2px 4px;border-radius:99px;border:1.5px solid #fff}
.zmenaBod.lepsi{background:#E7F6EC;color:#157035}
.zmenaBod.horsi{background:#FDECEC;color:#B03734}
.mrizkaBody .bod{position:relative}
.bodM{position:relative}

/* ---- odesílání karty ke schválení ---- */
.polozka{position:relative}
.polozka.odesila>*:not(.prekryv){opacity:.25;transition:opacity .2s}
.polozka.mizi{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.prekryv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.82);border-radius:var(--r-lg);backdrop-filter:blur(1.5px)}
.prekryv b{font-family:'Figtree';font-weight:700;font-size:var(--t5);color:var(--ink)}
.prekryv .tocitko{width:30px;height:30px;border-radius:50%;border:3px solid var(--teal-jemna);
  border-top-color:var(--teal-deep);animation:tocse .7s linear infinite}
.prekryv.hotovo{background:rgba(228,245,246,.94)}
.prekryv .fajf{width:44px;height:44px;border-radius:50%;background:var(--teal-deep);display:grid;place-items:center;
  position:relative;transform:scale(.5);opacity:0;animation:bouchne .45s cubic-bezier(.2,1.5,.4,1) forwards}
.prekryv .fajf::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal-deep);
  animation:vlna 1.1s ease-out .3s 1}
.prekryv .fajf i{width:18px;height:9px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);opacity:0;animation:objevse .25s ease-out .3s forwards}
@keyframes tocse{to{transform:rotate(360deg)}}

/* Celá věta ve strojopisu vypadala jako ladicí výpis a s odstupem 10 px se
   podlézala pod zaoblený spodek pilulkového tlačítka nad ní. Strojopis
   necháváme na čísla, ne na souvětí. */
.pridel{font-size:var(--t2);color:var(--muted);margin-top:16px}
.pridel b{font-family:'Figtree';font-weight:700;color:var(--ink-soft)}
.pridel.vycerpano{margin-top:16px;background:var(--plocha);border-radius:var(--r);padding:12px 12px;line-height:1.6}

/* ---- kolik profilu je hotové ---- */
/* Původně to bylo kolečko s procentem. Do 42px prstenu se „71 %" nevešlo ani
   po dvou pokusech a procento bylo stejně jen odvozenina: skutečný údaj je
   „kolik kroků ze sedmi". Segmenty to ukážou přímo, čtou se na první pohled
   a nevadí jim šířka sloupce. */
.hotovost{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;
  border:1px solid var(--line);text-decoration:none;--barva:var(--star);--pct:0}
.hotovost:hover{background:var(--tint)}
.hotovost.malo{--barva:var(--bad)}
.hotovost.stredne{--barva:var(--star)}
.hotovost.plno{--barva:var(--good)}
/* Kroužek je jediný kulatý tvar v aplikaci, takže se v sloupci pozná dřív než
   se přečte zlomek vedle něj. Kreslí ho kuželový přechod, ne SVG: je to jedna
   vlastnost a jde animovat od nuly. */
.hotovost .hkruh{position:relative;width:34px;height:34px;border-radius:50%;flex:none;
  background:conic-gradient(var(--barva) calc(var(--pct) * 1%),var(--line) 0);
  transition:background .4s ease}
.hotovost .hkruh::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.hotovost:hover .hkruh::after{background:var(--tint)}
.hotovost .txt{display:grid;gap:2px;min-width:0;
  font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--ink);line-height:1.2}
.hotovost .txt b{font-family:var(--cislice);font-weight:500;font-size:var(--t1);color:var(--muted)}

/* ---- průvodce: pole a závěrečná scéna ---- */
.uvod .telo .pole{margin:2px 0 4px}
.uvod .telo .pole input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);
  font-family:'Inter';font-size:var(--t5);background:var(--paper)}
.uvod .telo .pole input:focus{outline:2px solid var(--teal-deep);outline-offset:1px;border-color:transparent}
.uvod .telo .tlink{background:none;border:0;padding:4px 0;font-family:'Figtree';font-weight:600;font-size:var(--t3);
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.uvod .telo .tlink:hover{color:var(--ink)}
.uvod .telo .hlaska{margin:8px 0 0}

.scena .hotovo{display:flex;align-items:center;gap:16px}
.scena .krouzek{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:var(--teal);display:grid;place-items:center;
  transform:scale(.4);opacity:0;animation:bouchne .55s cubic-bezier(.2,1.5,.4,1) .1s forwards}
.scena .krouzek::after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--teal);
  animation:vlna 1.5s ease-out .55s infinite}
.scena .krouzek i{width:26px;height:14px;border-left:4px solid #06333a;border-bottom:4px solid #06333a;
  transform:rotate(-45deg) translate(2px,-3px);opacity:0;animation:objevse .3s ease-out .45s forwards}
.scena .cosled{list-style:none;display:grid;gap:8px;text-align:left}
.scena .cosled li{position:relative;padding-left:18px;color:#C4DCDF;font-size:var(--t3);line-height:1.45;opacity:0;
  animation:najede .4s ease-out forwards}
.scena .cosled li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.scena .cosled li:nth-child(1){animation-delay:.7s}
.scena .cosled li:nth-child(2){animation-delay:.85s}
.scena .cosled li:nth-child(3){animation-delay:1s}

@keyframes bouchne{to{transform:scale(1);opacity:1}}
@keyframes vlna{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
@keyframes objevse{to{opacity:1}}

/* ---- souhrn: kdy měříme příště, nálezy z prověrky webu, zamčené služby ---- */
.kar .pristi{font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted);margin-top:12px}

/* Nález je tečka, jméno a jedna věta — na celou šířku obrazovky je to řádek
   ze čtvrtiny popsaný. Kontrola webu a audit profilu jich dají dohromady třináct,
   takže ve dvou sloupcích ušetří sekce půlku své výšky.
   🔴 Vlásečnice kreslí `box-shadow`, ne `gap` nad barevným podkladem: počet
   nálezů není dělitelný počtem sloupců, takže poslední řádek zůstává nedopsaný
   a podklad se v té díře ukázal jako šedý blok. Stín se navíc u krajního
   sloupce a posledního řádku odřízne o `overflow:hidden` rodiče. */
.napoj.nalezy{display:grid;grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}
.nalezy .nal{display:flex;gap:12px;align-items:flex-start;padding:8px 16px;background:#fff;
  box-shadow:1px 1px 0 var(--line-soft)}
.nalezy .tecka{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--good)}
.nalezy .nal.chyba .tecka{background:var(--bad)}
.nalezy .nal.pozor .tecka{background:var(--star)}
.nalezy .nal .txt{display:grid;gap:1px}
.nalezy .nal .txt b{font-family:'Figtree';font-weight:700;font-size:var(--t3)}
.nalezy .nal .txt span{color:var(--muted);font-size:var(--t2);line-height:1.5}

.napoj .rad.zamcena .txt b{color:var(--ink-soft)}
.napoj .rad.zamcena .txt span{filter:blur(2.6px);user-select:none}

.upsell{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:16px 24px;
  border-radius:var(--r-lg);background:var(--ink);color:#fff}
.upsell .l{flex:1;min-width:220px;display:grid;gap:4px}
.upsell b{font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.upsell span{color:#9DBCC0;font-size:var(--t3);line-height:1.55}
.upsell .btn{width:auto;flex:none}

.dvaTlacitka{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.dvaTlacitka .btn{width:auto}

@media(max-width:640px){
  .upsell{padding:16px}
  .upsell .btn,.dvaTlacitka .btn{width:100%}
}

/* ---- hlášky: vyjedou zdola, ať stránka neposkakuje ---- */
.bublinky{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:97;display:grid;gap:8px;justify-items:center;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.bublina-hlas{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:12px 16px 12px 12px;box-shadow:0 18px 40px -18px rgba(11,27,32,.75);pointer-events:auto;cursor:pointer;
  font-family:'Figtree';font-weight:600;font-size:var(--t4);line-height:1.4;max-width:100%;
  animation:hlasVyjede .32s cubic-bezier(.2,1.1,.35,1)}
.bublina-hlas .ik{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);display:grid;place-items:center}
.bublina-hlas .ik svg{width:15px;height:15px;fill:none;stroke:#06333a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bublina-hlas.spatne .ik{background:var(--bad)}
.bublina-hlas.spatne .ik svg{stroke:#fff}
.bublina-hlas .txt{min-width:0}
.bublina-hlas.mizi{animation:hlasZmizi .26s ease-in forwards}

@keyframes hlasVyjede{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hlasZmizi{to{opacity:0;transform:translateY(10px) scale(.97)}}
@media(min-width:861px){.bublinky{bottom:28px}}
@media(prefers-reduced-motion:reduce){.bublina-hlas{animation:none}}

/* ---- sbírání recenzí ---- */
.recbox{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.recqr{display:grid;gap:8px;justify-items:center;flex:none}
.recqr svg{width:158px;height:158px;border-radius:12px;border:1px solid var(--line)}
.recqr .btn{width:100%}
.recvedle{min-width:0}
.rectit{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t5);margin-bottom:4px}
.recodkaz{display:flex;gap:8px;margin-top:12px}
.recodkaz input,.recodkaz select{flex:1;min-width:0;padding:12px 12px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--cislice);font-size:var(--t2);background:var(--paper);color:var(--ink-soft)}
.recodkaz select{font-family:'Inter';font-size:var(--t4);color:var(--ink)}
.recodkaz .btn{width:auto;flex:none}
.recvedle .cara{margin:16px 0 16px}
.recform{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:8px 0}
.recform input{padding:12px 12px;border:1px solid var(--line);border-radius:var(--r);font-family:'Inter';font-size:var(--t4);
  background:var(--paper);min-width:0}
.recform .btn{width:auto}
/* Deník si nuluje vodorovné odsazení karty, protože jeho řádky ho nesou samy
   a čára mezi nimi má jít přes celou kartu. Tahle karta ale řádky zúžila na
   `padding:8px 0`, takže nadpis i jména seděly nalepené na okraji karty.
   Odsazení proto nese karta a řádky zůstávají na nule. */
.denik.recodeslane{padding:4px 24px;margin-top:16px}
@media(max-width:520px){.denik.recodeslane{padding:4px 16px}}
.recodeslane .dzt em{font-style:normal;font-family:var(--cislice);font-size:var(--t2)}

@media(max-width:760px){
  .recbox{grid-template-columns:1fr;justify-items:center}
  .recqr{justify-self:center}
  .recvedle{width:100%}
  .recform{grid-template-columns:1fr}
  .recform .btn{width:100%}
  .recodkaz{flex-direction:column}
  .recodkaz .btn{width:100%}
}

/* ---- deník práce ---- */
.denik{padding:4px 0}
.dz{display:flex;align-items:flex-start;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line-soft)}
.dz:last-child{border-bottom:0}
.dzi{flex:none;width:32px;height:32px;border-radius:50%;background:var(--plocha);display:grid;place-items:center;color:var(--teal-deep)}
.dzi svg{width:16px;height:16px}
.dzt{flex:1;min-width:0;font-size:var(--t4);line-height:1.5;color:var(--ink)}
.dzk{flex:none;font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted);padding-top:3px;white-space:nowrap}
@media(max-width:520px){
  .dz{flex-wrap:wrap;padding:12px 16px;gap:8px}
  .dzk{width:100%;padding-left:46px}
}

/* ---- co dnes stojí za pozornost ve správě ---- */
.dnesek{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px;margin-bottom:22px}
.dnesek h2{font-family:'Figtree';font-weight:800;font-size:var(--t5);margin-bottom:16px}
.dnesek.klid{display:grid;gap:3px}
.dnesek.klid b{font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.dnesek.klid span{color:var(--muted);font-size:var(--t4)}
.dnesRady{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.dnesRad{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:var(--r);background:var(--plocha)}
.dnesRad b{font-family:var(--cislice);font-weight:700;font-size:var(--t6);line-height:1;min-width:28px}
.dnesRad span{font-size:var(--t3);line-height:1.4;color:var(--ink-soft)}
.dnesRad.cervena{background:#FDECEC}
.dnesRad.cervena b{color:var(--bad)}
.dnesRad.oranzova{background:#FEF3DE}
.dnesRad.oranzova b{color:#8A5A06}
.dnesRad.teal{background:var(--teal-jemna)}
.dnesRad.teal b{color:var(--teal-deep)}
.dnesPropady{margin-top:12px;font-size:var(--t3);color:var(--muted);line-height:1.6}

/* ---- rozhovor se přehraje, ať je poznat, že jde o odpověď na dotaz ---- */
.airam .bublina{animation:aiDotaz .5s cubic-bezier(.2,.9,.3,1) both}
.airam .pise{display:flex;gap:4px;align-items:center;margin-left:auto;background:#0F242A;border-radius:16px;
  padding:12px 16px;width:max-content;animation:aiPisePryc .01s linear 1.5s forwards}
.airam .pise i{width:7px;height:7px;border-radius:50%;background:#4E7A82;animation:aiTecka 1.1s ease-in-out infinite}
.airam .pise i:nth-child(2){animation-delay:.16s}
.airam .pise i:nth-child(3){animation-delay:.32s}
.airam .odpoved{animation:aiOdpoved .5s cubic-bezier(.2,.9,.3,1) 1.5s both}
.airam .avelke{animation:aiVyskoc .45s cubic-bezier(.2,1.3,.4,1) 1.75s both}
.airam .avelke em{animation:aiVyskoc .4s cubic-bezier(.2,1.6,.4,1) 2.05s both;display:inline-block}
.airam .zamek{animation:aiVyskoc .45s cubic-bezier(.2,1.2,.4,1) 1.75s both}

@keyframes aiDotaz{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aiOdpoved{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes aiVyskoc{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes aiTecka{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes aiPisePryc{to{opacity:0;height:0;padding:0;margin-top:-16px;visibility:hidden}}

@media(prefers-reduced-motion:reduce){
  .airam .bublina,.airam .odpoved,.airam .avelke,.airam .avelke em,.airam .zamek{animation:none}
  .airam .pise{display:none}
}

/* ---- výsledek měření v odpovědích AI ---- */
.airam .aivysl{display:grid;gap:8px;padding:4px 0 2px}
.airam .avelke{font-family:'Figtree';font-weight:800;font-size:var(--t6);color:#fff;line-height:1.35}
.airam .avelke em{font-style:normal;font-family:var(--cislice);font-weight:600;font-size:var(--t3);
  padding:3px 8px;border-radius:var(--r-pill);margin-left:8px;vertical-align:2px}
.airam .avelke em.lepsi{background:rgba(18,181,192,.18);color:#5FD8E0}
.airam .avelke em.horsi{background:rgba(224,90,90,.18);color:#F09A9A}
.airam .aivysl>span{color:#9DBCC0;font-size:var(--t4);line-height:1.6}

.airady .airad{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line)}
.airady .airad:last-child{border-bottom:0}
.airady .airad.ja{background:var(--teal-jemna)}
.airady .aporadi{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--plocha);font-family:var(--cislice);font-weight:600;font-size:var(--t1);color:var(--muted)}
.airady .airad.ja .aporadi{background:var(--teal-deep);color:#fff}
.airady .atxt{flex:1;min-width:0;display:grid;gap:1px}
/* bez tohohle roztáhne dlouhá adresa z odpovědi AI sloupec a rodič ho ořízne uprostřed slova */
.airady .atxt>*{min-width:0;overflow-wrap:anywhere}
.airady .atxt b{font-family:'Figtree';font-weight:700;font-size:var(--t4)}
.airady .atxt span{color:var(--muted);font-size:var(--t2);line-height:1.45}
.airady .tovy{font-family:var(--cislice);font-weight:600;font-size:var(--t2);color:var(--teal-deep);
  background:#fff;border:1px solid var(--teal-deep);border-radius:var(--r-pill);padding:2px 8px;margin-left:6px}
.airady .akolikrat{flex:0 0 auto;font-family:var(--cislice);font-weight:600;font-size:var(--t2);color:var(--muted);white-space:nowrap}

/* Řádkové seznamy, které nesou jen jméno a jednu větu, nepotřebují výšku
   nastavovacího formuláře. `husty` je zdrobní, `sloupce` je rozloží vedle sebe,
   protože tři nezávislé tipy pod sebou přes celou šířku byly sloupec vzduchu. */
.husty .rad,.husty.radky .r{padding:8px 16px;gap:12px}
.husty .ikona{width:32px;height:32px}
.husty .ikona svg,.husty .ikona img{width:17px;height:17px}
.husty .txt b,.husty.radky .r .l b{font-size:var(--t4)}
.husty .txt span,.husty.radky .r .l span{font-size:var(--t2);margin-top:1px;line-height:1.5}
.radky.sloupce{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.radky.sloupce .r{border-bottom:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;
  box-shadow:1px 1px 0 var(--line-soft)}

.achipy2{display:flex;flex-wrap:wrap;gap:8px}
.achipy2 a{font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted);
  background:var(--plocha);border-radius:var(--r-pill);padding:8px 12px;text-decoration:none;transition:background .15s,color .15s}
.achipy2 a:hover{background:var(--teal-jemna);color:var(--teal-deep)}

@media(max-width:640px){
  .airam .avelke{font-size:var(--t5)}
  .airady .airad{padding:12px 12px;gap:8px}
}

/* ---- Leaflet mapa pod mřížkou ---- */
.mapaPlocha{height:340px;border-radius:var(--r);overflow:hidden;background:#F4F9F9}
.mapaPlocha .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82)}
.bodM{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  font-family:var(--cislice);font-weight:700;font-size:var(--t2);box-shadow:0 2px 6px rgba(11,27,32,.3)}
.bodM.a{background:#17A34A}
.bodM.b{background:#EF9F06}
.bodM.c{background:#E5484D}
.bodM.vy{box-shadow:0 0 0 4px rgba(18,181,192,.45),0 2px 6px rgba(11,27,32,.3)}
.mtip{background:var(--ink);color:#fff;border:0;border-radius:12px;padding:8px 12px;font-family:'Inter';
  font-size:var(--t1);line-height:1.55;box-shadow:0 12px 30px rgba(11,27,32,.3)}
.mtip .tnadpis{font-family:'Figtree';font-weight:700;font-size:var(--t2)}
.mtip b{color:var(--teal)}
.mtip::before{border-top-color:var(--ink)!important}
.leaflet-tooltip.mtip{white-space:normal;max-width:210px}
.napoj .ikona svg{width:22px;height:22px}
.aznak svg{width:15px;height:15px}

/* Karta jako každá jiná, jen se žlutou značkou. Celoplošně žlutý blok hned pod
   hlavičkou přebíjel to, kvůli čemu sem klient přišel, a přitom je to jedna
   věta k odklepnutí. */
.pruh-email{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:12px 16px;margin-bottom:24px}
.pruh-email .zn{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#FDF1D8;color:#8A5A06}
.pruh-email .zn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pruh-email.hotovo .zn{background:#E6F6EC;color:#14622F}
.pruh-email .txt{flex:1;min-width:240px;margin:0}
.pruh-email b{font-family:'Figtree';font-weight:700;font-size:var(--t4);color:var(--ink)}
.pruh-email b::after{content:" · ";color:var(--muted);font-weight:600}
.pruh-email span{color:var(--ink-soft);font-size:var(--t4);line-height:1.55}
.pruh-email button{flex:none;font-family:'Figtree';font-weight:600;font-size:var(--t3);
  padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer}
.pruh-email button:hover{background:var(--tint)}
.pruh-email button[disabled]{opacity:.6;cursor:default}
/* Na úzkém displeji je text na čtyři řádky a značka vycentrovaná na jejich
   střed vypadala jako spadlá doprostřed odstavce. */
@media(max-width:560px){.pruh-email{align-items:flex-start}.pruh-email .zn{margin-top:2px}.pruh-email button{width:100%}}

/* ---- textura a ručně kreslené motivy v aplikaci ---- */
/* Přehled byl jen bílé karty na světlém pozadí. Grain sundá sterilnost,
   motivy dají prázdným místům charakter. Obojí je pod obsahem a needituje
   čitelnost dat, proto žádné barevné bloky. */
body.app::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  opacity:.06;mix-blend-mode:multiply;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

.mot{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.13;color:var(--ink)}
.mot g{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mot.teal{color:var(--teal-deep);opacity:.3}
.list{position:relative;z-index:1}
@media(max-width:1020px){.mot{display:none}}


/* ---- AI: karta na model, zebricek a citace ---- */
.aipasvrch{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.aipasvrch .napoveda{margin:0}
.aisipky{display:flex;gap:8px;flex:none}
.aisipka{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);flex:none}
.aisipka svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.aisipka:hover:not(:disabled){border-color:var(--teal-deep);color:var(--teal-deep)}
.aisipka:disabled{opacity:.3;cursor:default}
/* Pás sahá až k okraji panelu (odsazení 24 px), aby další karta mizela pod
   hranou a bylo poznat, že se jede dál. Svislé odsazení tu je kvůli stínům
   karet — bez něj je `overflow` seřízne shora i zdola. */
/* 🔴 Bez `scroll-snap`. Přesah pásu (~200 px) je menší než jedna karta i s
   mezerou (226 px), takže druhý bod zarovnání ležel za koncem posuvu. Snap
   vracel pás pořád na první kartu a nešel posunout vůbec — ani kolečkem, ani
   šipkou. Zarovnání poslední karty koncem to nespravilo. */
.aikarty{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:smooth;padding:8px 24px 12px;margin:8px -24px 0}
.aikarty::-webkit-scrollbar{height:6px}
.aikarty::-webkit-scrollbar-thumb{background:#D6E2E4;border-radius:var(--r-pill)}
.aikarty::-webkit-scrollbar-track{background:transparent}
.aikarta{position:relative;flex:0 0 236px;
  background:#fff;border:1px solid transparent;border-radius:15px;padding:12px 16px;
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.aikarta::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
.aikarta.ma::before{background:var(--mb,var(--teal))}
.aikarta header{display:flex;align-items:center;gap:8px}
.aikarta header .zn{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--mb,#0A7A83) 12%,#fff);display:grid;place-items:center;flex:none}
.aikarta header .zn img{width:16px;height:16px}
.aikarta header b{font-family:'Figtree';font-weight:700;font-size:var(--t4)}
.aikarta .aiCis .lab{font-size:var(--t2);color:var(--muted);display:block}
.aikarta .hodn{display:flex;align-items:baseline;gap:6px;margin-top:1px}
.aikarta .hodn b{font-family:'Figtree';font-weight:700;font-size:var(--t7);letter-spacing:-.02em;line-height:1}
.aikarta.ma .hodn b{color:#30A65B}
/* Patička sedí u dna karty, ne hned za textem: karty jsou ve flexu stejně
   vysoké podle té se zdroji, takže bez toho by pod kratšími zůstala díra
   uprostřed. Výška se nefixuje — počet zdrojů se liší a natvrdo zapsaná výška
   by přestala sedět, jakmile se změní délka textu nad ní. */
.aistr{margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft)}
.aistr .hl{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:var(--t1);font-weight:500;color:var(--muted);margin-bottom:4px}
.aistr .por{white-space:nowrap;font-weight:600;
  color:color-mix(in srgb,var(--mb,#0A7A83) 78%,#0B1B20);
  background:color-mix(in srgb,var(--mb,#0A7A83) 10%,#fff);border-radius:var(--r-pill);padding:2px 7px}
.aistr a{display:flex;justify-content:space-between;gap:8px;align-items:center;
  padding:2px 0;font-size:var(--t2);color:var(--ink-soft)}
/* 🔴 `min-width:0` je tu nutnost, ne úklid. Flexová položka se defaultně
   nezmenší pod šířku svého obsahu, takže adresa dlouhá 780 px roztáhla řádek
   přes celou kartu a počet zmínek za ním vytlačila mimo — čísla nebyla vidět. */
.aistr a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aistr a:hover span{color:var(--teal-deep);text-decoration:underline}
.aistr a b{font-weight:600;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}
/* Doslovné znění odpovědi. Karty modelů leží ve vodorovném pásu, takže
   rozbalený text musí mít strop a rolovat uvnitř sebe — jinak jedna dlouhá
   odpověď natáhne výšku celého pásu a ostatní karty odsune pod okraj. */
.aiOdp{margin-top:8px;border-top:1px solid var(--line-soft);padding-top:8px}
.aiOdp summary{cursor:pointer;font-size:var(--t1);font-weight:600;color:var(--teal-deep);
  list-style:none;display:flex;align-items:center;gap:5px}
.aiOdp summary::-webkit-details-marker{display:none}
.aiOdp summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:var(--t3);line-height:1}
.aiOdp[open] summary::before{transform:rotate(90deg)}
.aiOdpTelo{max-height:240px;overflow-y:auto;margin-top:6px;font-size:var(--t2);
  color:var(--ink-soft);line-height:1.6}
.aiOdpTelo p{margin:0 0 8px}
.aiOdpTelo ol{margin:0;padding-left:16px}
.aiOdpTelo li{margin-bottom:5px}
.aiOdpTelo li b{color:var(--ink)}
.aiOdpBeh{display:block;font-size:var(--t1);font-weight:600;color:var(--muted);
  margin:12px 0 4px;text-transform:none}
.aiOdpTelo>.aiOdpBeh:first-child{margin-top:0}
.zm{font-family:'Figtree';font-weight:700;font-size:var(--t1);padding:3px 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.zm::before{font-size:var(--t1)}
.zm.nahoru{background:#E7F6EC;color:#157035}
.zm.nahoru::before{content:"\25B2"}
.zm.dolu{background:#FDECEC;color:#B03734}
.zm.dolu::before{content:"\25BC"}
.zm.nic{background:var(--tint);color:var(--muted)}
.aikarta .aiPod{font-size:var(--t2);color:var(--ink-soft);line-height:1.5}

.zebricek{border:1px solid transparent;border-radius:15px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.zrad{display:grid;grid-template-columns:30px minmax(0,1.5fr) 1fr 48px;align-items:center;gap:12px;
  padding:8px 16px;border-bottom:1px solid var(--line-soft)}
.zrad:last-child{border-bottom:0}
.zvynechano{padding:6px 12px;font-family:var(--cislice);font-size:var(--t1);color:var(--muted);
  background:var(--plocha);border-bottom:1px solid var(--line);text-align:center}
.zrad.ja{background:var(--teal-jemna)}
.zrad .zp{font-size:var(--t3);font-weight:600;color:var(--muted)}
.zrad.ja .zp{color:var(--teal-deep);font-weight:700}
.zrad .zn{font-size:var(--t4);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zrad.ja .zn{font-family:'Figtree';font-weight:700;color:var(--teal-deep)}
.zrad .tovy{font-size:var(--t2);font-weight:600;background:var(--teal-deep);color:#fff;border-radius:var(--r-pill);padding:3px 8px}
.zbar{height:7px;border-radius:var(--r-pill);background:#EDF3F4;overflow:hidden}
.zbar i{display:block;height:100%;border-radius:var(--r-pill);background:#B9E2E5}
.zrad.ja .zbar i{background:var(--teal-deep)}
.zpct{font-weight:700;font-size:var(--t4);text-align:right;font-variant-numeric:tabular-nums}

/* Osm zdrojů pod sebou přes celou šířku byl sloupec vzduchu — každý řádek nese
   doménu, cestu a jedno číslo. Ve dvou sloupcích a bez stínu se z toho stane
   seznam, který se přečte jedním pohledem. */
.citace{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:6px}
.aiCit{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:12px;
  background:var(--tint);border-radius:10px;padding:8px 12px;min-height:38px}
/* 🔴 MUSÍ STÁT AŽ ZA ZÁKLADNÍM PRAVIDLEM. Dotykový blok kolem `@media
   (max-width:1020px)` je nahoře souboru, takže tenhle override v něm prohrával
   pořadím se `min-height:38px` o šest set řádků níž — pravidlo se aplikovalo
   a přesto zůstalo 38 px. Řádky citací odděluje mezera 6 px, takže smí vyrůst. */
@media(max-width:1020px){.aiCit{min-height:44px}}
.aiCit:hover{background:var(--teal-jemna)}
.aiCit .cd{font-family:'Figtree';font-weight:700;font-size:var(--t2);white-space:nowrap}
.aiCit .cu{font-size:var(--t2);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiCit .cn{font-weight:700;font-size:var(--t2);color:var(--teal-deep);font-variant-numeric:tabular-nums}
/* Vlastní web mezi zdroji je to jediné, co v seznamu cizích adres klient hledá.
   Rámeček, ne barevná výplň: dlaždice už jedno pozadí má a druhé by ji utopilo. */
.aiCit.jaTo{background:var(--teal-jemna);box-shadow:inset 0 0 0 1px var(--teal-deep)}
/* Štítek uvnitř podtrženého odkazu. `text-decoration:none` na potomkovi samo
   nestačí, podtržení se z rodiče propaguje a inline prvek ho zrušit nemůže;
   teprve `inline-block` si nese vlastní. Podtržení celé dlaždice je stav
   odjakživa, změřeno i na kódu před touhle sekcí, takže se na něj nesahá. */
.aiCit .tovy{display:inline-block;font-size:var(--t3);font-weight:600;color:var(--teal-deep);
  margin-left:8px;text-decoration:none}

@media(max-width:620px){
  .aisipky{display:none}
  .zrad{grid-template-columns:26px minmax(0,1fr) 46px;gap:8px}
  .zrad .zbar{display:none}
  .aiCit{grid-template-columns:minmax(0,1fr) auto}
  .aiCit .cu{display:none}
}
.exporty{display:flex;flex-wrap:wrap;gap:8px}
.exporty .btn{flex:0 1 auto;padding:8px 16px;font-size:var(--t4);min-height:42px}
@media(max-width:560px){.exporty .btn{flex:1 1 calc(50% - 5px)}}

/* souhrn nad kartami a krivka vyvoje */
/* 134 px, ne 148: na 375px telefonu zbývá na dlaždice 295 px a při 148 se dvě
   vedle sebe o chlup nevešly, takže se čtyři údaje roztáhly na čtyři obrazovky. */
.aisouhrn{display:grid;grid-template-columns:repeat(auto-fit,minmax(134px,1fr));gap:12px;margin:12px 0 16px}
.asd{background:#fff;border:1px solid transparent;border-radius:14px;padding:12px 16px;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.asd .ap{display:block;font-size:var(--t2);color:var(--muted)}
.asd .ah{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t6);letter-spacing:-.02em;line-height:1.15;margin:3px 0 1px}
.asd .az{display:block;font-size:var(--t2);color:var(--ink-soft)}

/* srovnani s konkurenci: vlastni radek nahore, cervene to, v cem vedou */
.srovnani .rad.ja{background:var(--teal-jemna);border-left:3px solid var(--teal-deep)}
.srovnani .rad.ja .poradiK{font-weight:700;font-size:var(--t2);color:#fff;background:var(--teal-deep);
  border-radius:var(--r-pill);padding:2px 8px;width:auto}
.srovnani .rad.ja .txt b{color:var(--teal-deep)}
.udajeK .vede b{color:#B4404A}
.udajeK .vede::after{content:"";display:block;height:2px;border-radius:2px;background:#F0C2C6;margin-top:3px}

/* hlavni cisla na uvodu prehledu */
.metriky{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;margin:4px 0 28px}
/* `auto-fit` slučuje prázdné sloupce, takže jediná dlaždice se roztáhla přes
   celou šířku a jedno číslo pak vypadalo jako hlavní sdělení stránky.
   `auto-fill` prázdné sloupce nechá, takže dlaždice drží svoji velikost
   bez ohledu na to, kolik jich zrovna je. */
.mtd{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:16px;
  padding:16px 16px 16px;position:relative;overflow:hidden;transition:box-shadow .15s,transform .12s;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.mtd:hover{box-shadow:0 1px 2px rgba(50,58,72,.06),0 10px 24px rgba(50,58,72,.10)}
.mtd:active{transform:scale(.99)}
.mtd .mp{display:block;font-size:var(--t2);color:var(--muted);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtd .mh{display:flex;align-items:baseline;gap:8px;font-family:'Figtree';font-weight:800;
  font-size:var(--t8);letter-spacing:-.035em;line-height:1;margin:8px 0 3px;color:var(--ink);flex-wrap:wrap}
.mtd .mz{display:block;font-size:var(--t2);color:var(--muted)}

/* rozjezd je pomocnik pod cisly, ne uvodni tutorial */
.rozjezd{opacity:.92}
.rozjezd .vrch h2{font-size:var(--t5)}
.rozjezd .krok .l b{font-size:var(--t4)}

/* trend u konkurentu: pohyb je zajimavejsi nez stav */

/* ikona u hlavni metriky */
.mtd .mp{display:flex;align-items:center;gap:8px;color:var(--muted)}
.mtd .mp svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--barva,var(--teal));
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding:4px;box-sizing:content-box;
  border-radius:8px;background:color-mix(in srgb,var(--barva,var(--teal)) 13%,#fff)}
@media(max-width:620px){
  .zrad{grid-template-columns:26px minmax(0,1fr) 46px}
  .zrad .zbar{display:none}
}

/* krivka v dlazdici metriky sedi na dne, at cislo zustane hlavni */
.mtd{padding-bottom:0}
.mtd .spark{width:calc(100% + 36px);height:34px;display:block;margin:8px -18px -1px}
.aikarta .spark{width:calc(100% + 28px);height:28px;display:block;margin:0 -16px}

/* znacka firmy v zebricku: iniciala v barve odvozene z nazvu */
.zrad .zn{display:flex;align-items:center;gap:8px;min-width:0}
.zfi{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;
  /* Písmeno bylo v barvě zdroje na 14% téže barvy, takže u světlých zdrojů
     propadlo (oranžová 1,96:1). Odlišení nese podklad, ne písmeno, proto je
     text neutrálně tmavý — na všech osmi barvách zdrojů vychází aspoň 14,4:1. */
  background:color-mix(in srgb,var(--zf) 14%,#fff);color:var(--ink);
  font-family:'Figtree';font-weight:700;font-size:var(--t2)}
.zjm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zrad .tovy{flex:none}

/* prepinac obdobi nad AI sekci */
.obdobi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.obdRozsah{font-size:var(--t3);color:var(--ink-soft)}
.obdVolby{display:flex;gap:4px;margin-left:auto;background:var(--tint);border-radius:var(--r-pill);padding:3px}
.obdV{font-family:'Figtree';font-weight:600;font-size:var(--t4);color:var(--ink-soft);background:none;border:0;
  border-radius:var(--r-pill);padding:0 16px;min-height:42px;cursor:pointer;transition:background .15s,color .15s}
.obdV:hover{color:var(--ink)}
.obdV.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(50,58,72,.08)}
@media(max-width:560px){.obdVolby{margin-left:0;width:100%;justify-content:space-between}.obdV{flex:1;padding:0 8px;min-height:46px}}

/* prubeh dlouheho mereni: bez nej to vypada, ze se nic nedeje */
.beh{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 12px;
  background:var(--tint);border-radius:var(--r);font-size:var(--t3);color:var(--ink-soft)}
.behKrok{font-family:'Figtree';font-weight:600;transition:opacity .18s}
.behTecky{display:flex;gap:4px;flex:none}
.behTecky i{width:6px;height:6px;border-radius:50%;background:var(--teal-deep);animation:behSkok 1.1s ease-in-out infinite}
.behTecky i:nth-child(2){animation-delay:.16s}
.behTecky i:nth-child(3){animation-delay:.32s}
@keyframes behSkok{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.behTecky i{animation:none}}

/* rozbalovaci nastaveni, at neubira misto tomu podstatnemu */
.rozbal{margin-top:12px}
.rozbal>summary{cursor:pointer;font-family:'Figtree';font-weight:600;font-size:var(--t4);color:var(--ink-soft);
  list-style:none;display:flex;align-items:center;gap:8px;padding:12px 0;min-height:44px}
.rozbal>summary::-webkit-details-marker{display:none}
.rozbal>summary::before{content:"›";font-size:var(--t5);color:var(--muted);transition:transform .16s}
.rozbal[open]>summary::before{transform:rotate(90deg)}
.rozbal>summary:hover{color:var(--ink)}
.odesHl{display:flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:700;font-size:var(--t3);
  color:var(--ink-soft);padding:4px 0 8px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.odesHl span{font-size:var(--t2);color:var(--ink-soft);background:var(--tint);
  border-radius:var(--r-pill);padding:2px 8px}
.recodeslane .dz{padding:8px 0}
.rozbal.vice .dz{padding:4px 0;font-size:var(--t3);color:var(--muted)}
.napoveda.vysvetleni{margin:0 0 12px;max-width:64ch;font-size:var(--t4);line-height:1.6;color:var(--ink-soft)}
/* Dva odstavce nápovědy hned za sebou se slily v jeden blok textu. */
.napoveda+.napoveda.vysvetleni{margin-top:16px}

/* sledovane dotazy: jedna formulace na radek, misto vpravo */
.dotazyTab .zrad{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 74px auto;gap:12px}
.dotKdo{font-size:var(--t3);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dotazyTab .zpct{font-size:var(--t5)}
.dotazyTab .zpct.chybi{font-size:var(--t3);font-weight:600;color:#C2413F}
.dotazyTab .zrad.ja .zpct{color:var(--teal-deep)}
@media(max-width:620px){
  .dotazyTab .zrad{grid-template-columns:minmax(0,1fr) 70px;gap:8px}
  .dotKdo{display:none}
  .dotazyTab .zm{grid-column:2;text-align:right}
}

/* sezonnost: dvanact sloupcu a veta, ktera z nich plyne */
.sezona{padding:16px}
.szveta{font-size:var(--t5);line-height:1.6;color:var(--ink-soft);margin-bottom:16px}
.szveta b{font-weight:700;color:var(--ink)}
.szgraf{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:120px}
.szs{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px;text-align:center}
.szs i{display:block;border-radius:5px 5px 3px 3px;background:#CFE6E8;transition:background .15s}
.szs.szted i{background:var(--teal-deep)}
.szs em{font-style:normal;font-size:var(--t2);color:var(--muted)}
.szs.szted em{color:var(--teal-deep);font-weight:700}
.szs:hover i{background:#8FCFD4}
@media(max-width:560px){.szgraf{height:96px;gap:3px}.szs em{font-size:var(--t2)}}

/* co ted nejvic pomuze: dva tri ukoly misto tabulky cisel */
.ukoly{display:grid;gap:8px}
.ukol{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:#fff;border:1px solid transparent;border-radius:14px;padding:16px 16px;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.ukol .ucis{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--teal-jemna);color:var(--teal-deep);font-family:'Figtree';font-weight:800;font-size:var(--t4)}
.utext b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t5);margin-bottom:3px}
.utext .uproc{display:block;font-size:var(--t4);color:var(--ink-soft);line-height:1.55}
.utext .uakce{display:block;font-size:var(--t3);color:var(--muted);margin-top:5px}
.ukol .btn{flex:none;min-height:42px;padding:8px 16px}
@media(max-width:620px){
  .ukol{grid-template-columns:30px minmax(0,1fr);gap:8px}
  .ukol .btn{grid-column:2;justify-self:start;margin-top:4px}
}

/* kdo na klienta odkazuje */
.odpocet{display:flex;align-items:baseline;gap:8px;flex:none}
.odpocet b{font-family:'Figtree';font-weight:800;font-size:var(--t7);letter-spacing:-.02em;line-height:1}
.odpocet span{font-size:var(--t3);color:var(--ink-soft)}
/* Dvě měření pod sebou jako stopa, ne jako druhé dnešní číslo. Mono proto,
   že je to opsaný záznam, ne věta. */
.odVyvoj{margin:8px 0 0;font-family:var(--cislice);font-weight:500;font-size:var(--t2);
  color:var(--muted);letter-spacing:-.01em}
.odSouhrn{margin:0 0 8px;font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted)}
/* Nadpis skupiny domén. Není to `sekcnadpis` schválně: uvnitř jedné tabulky by
   tři plné nadpisy se linkou přebily nadpis sekce nad nimi. */
.odSkup{display:flex;align-items:center;gap:8px;margin:16px 0 4px;
  font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--ink-soft)}
.odSkup span{font-family:var(--cislice);font-weight:600;font-size:var(--t1);color:var(--muted);
  background:var(--tint);border-radius:var(--r-pill);padding:1px 8px}
/* Proužek má strop, ať se přes celou šířku okna neroztáhne na půl metru
   a jméno domény zůstane u čísel, ke kterým patří. */
.odkazyTab .zrad{grid-template-columns:minmax(0,1fr) minmax(56px,150px) 44px 52px;gap:12px}
.odDom{font-family:var(--cislice);font-weight:500;font-size:var(--t3);color:var(--ink)}
.odTyp{flex:none;font-family:var(--cislice);font-weight:500;font-size:var(--t1);color:var(--muted)}
.odPocet{font-family:var(--cislice);font-weight:500;font-size:var(--t3);color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums}
/* Hlavička žebříčku: bez ní je sloupec čísel bez jednotky. Proužek v ní musí
   ztratit podklad, jinak nad seznamem visí prázdná šedá kolejnice. */
.odkazyTab .odHlav{padding:8px 16px;background:var(--tint);font-size:var(--t1);color:var(--muted)}
.odkazyTab .odHlav .zbar{background:none}
.odkazyTab .odHlav .zpct,.odkazyTab .odHlav .odPocet{font-family:'Inter';font-weight:400;
  font-size:var(--t1);color:var(--muted)}
@media(max-width:620px){
  .odkazyTab .zrad{grid-template-columns:minmax(0,1fr) 44px 52px;gap:8px}
  .odkazyTab .zrad .zbar{display:none}
}
/* Volba dosahu měření. Tři možnosti pod sebou jako klikací pruhy, ne
   rozbalovací seznam: na telefonu se do něj trefuje hůř a tady jde o jedno
   rozhodnutí, které se dělá jednou za rok. */
.volby{display:grid;gap:8px;margin-top:4px}
/* Přes `.volby` schválně: `.pole label` výš dělá z každého popisku blok
   s odsazením, takže by kolečko skončilo nad textem místo vedle něj. */
.volby .volba{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;background:#fff;margin:0;font-weight:400;
  transition:border-color .15s,background .15s}
.volba:hover{border-color:var(--teal-deep)}
.volba.vybrana{border-color:var(--teal-deep);background:var(--teal-jemna)}
/* Specificita schválně přes `.volby`: `.pole input` výš roztahuje pole na
   celou šířku a přepsalo by i tenhle přepínač, takže by kolečko zabralo řádek
   a text spadl pod něj. */
.volby .volba input{width:20px;height:20px;flex:none;padding:0;accent-color:var(--teal-deep)}
.volba .vt{display:grid;gap:1px}
.volba .vt b{font-family:'Figtree';font-weight:700;font-size:var(--t4)}
.volba .vt span{font-size:var(--t2);color:var(--muted)}

/* Stránka na fotky z pátečního e-mailu. Otevírá se na telefonu jednou rukou,
   často venku, takže výběrová plocha je celý blok a ne malé tlačítko. */
.vyber{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:center;
  background:var(--tint);transition:border-color .15s,background .15s}
.vyber:hover,.vyber:focus-within{border-color:var(--teal-deep);background:var(--teal-jemna)}
.vyber svg{width:34px;height:34px;fill:none;stroke:var(--teal-deep);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.vyber b{font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.vyber span{font-size:var(--t3);color:var(--muted)}
.vybrane{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin:16px 0}
.vybrane img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}

/* Telefon v katalozích. Řádek je odkaz do zápisu, protože jediná smysluplná
   akce je jít si ho opravit; číslo vpravo je to cizí, které tam dnes stojí. */
.katalogy .zrad{grid-template-columns:minmax(0,1fr) auto;gap:12px;text-decoration:none;color:inherit}
.katalogy .zrad:hover{background:var(--tint)}
.katok{font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted)}
.katspatne{font-family:var(--cislice);font-weight:600;font-size:var(--t2);color:#B03734;
  background:#FDECEC;border-radius:var(--r-pill);padding:3px 12px;white-space:nowrap}
/* Chybějící zápis schválně netvaruje jako chybu. Cizí telefon v zápisu je
   něco rozbitého, tohle je jen místo, kde firma ještě není — červená pilulka
   by z devíti katalogů udělala devět poplachů. */
.katchybi{font-weight:500;font-size:var(--t2);color:var(--ink-soft);
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 12px;white-space:nowrap}

/* Jednořádkový odkaz do sekce Odkazy pod nálezy kontroly webu. Stojí na
   vlastním řádku, takže si smí vzít plnou výšku cíle na klepnutí, aniž by
   to rozhodilo sazbu odstavce. */
.odkazSekce{margin-top:4px}
.odkazSekce a{display:inline-flex;align-items:center;min-height:44px}

/* na co bere zakazky konkurence */
.konkSlova .zrad{grid-template-columns:minmax(0,1fr) auto 48px;gap:12px}
.ksHled{font-size:var(--t3);color:var(--muted);white-space:nowrap}
@media(max-width:560px){.konkSlova .zrad{grid-template-columns:minmax(0,1fr) 46px}.ksHled{display:none}}

/* tydenni report na Domu: velka cisla misto tri radku textu */
.tyden{margin:16px 0}
.tyden .tvrch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.tyden .tvrch h2{font-family:'Figtree';font-weight:800;font-size:var(--t8);letter-spacing:-.03em;margin:0}
.tobdobi{margin:3px 0 0;font-family:var(--cislice);font-size:var(--t2);color:var(--muted);letter-spacing:-.01em}
.tprep{display:flex;gap:4px;flex:none}
.tsip{width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  color:var(--ink);font-size:var(--t5);line-height:1;cursor:pointer;transition:border-color .15s,transform .12s}
.tsip:hover:not(:disabled){border-color:var(--teal)}
.tsip:active:not(:disabled){transform:scale(.94)}
.tsip:disabled{opacity:.3;cursor:default}
.tyden.nacita{opacity:.5}

/* jedine misto v aplikaci, ktere nepsal clovek; ma to byt poznat */
.tai{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:16px 18px 16px;margin-bottom:0;
  background:linear-gradient(135deg,#0B1B20 0%,#123138 55%,#0A3F45 100%);color:#fff}
/* `overflow:hidden` na kartě je kvůli dvěma dekoračním kruhům níž, které z ní
   schválně vylézají. Text tím ale dostal tichý ořez: dlouhá adresa se místo
   zalomení spolkla a nikde nebylo poznat, že něco chybí. Text doporučení píše
   model, takže se to stát může. Ořez zůstává, zalomení dostane text. */
.taititulek,.taitext,.taico,.taiproc{overflow-wrap:anywhere}
.tai::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,181,192,.36),transparent 68%);pointer-events:none}
.tai::after{content:"";position:absolute;left:-40px;bottom:-120px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,214,.28),transparent 70%);pointer-events:none}
/* Na Domů stojí doporučení samostatně mezi kartami, ne uvnitř panelu reportu.
   Bez stínu by tmavý obdélník v ploše vypadal jako díra, ne jako karta ve
   stejné rovině jako mřížka a žebříček nad ním. */
#doporuceniDomu .tai{box-shadow:var(--shadow)}
.tainapis{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  font-family:'Figtree';font-weight:700;font-size:var(--t1);letter-spacing:.07em;text-transform:uppercase;
  color:#8FE3EA}
.tainapis svg{width:15px;height:15px;fill:currentColor;stroke:none;flex:none}
.taititulek{position:relative;z-index:1;margin:8px 0 0;font-family:'Figtree';font-weight:800;
  font-size:var(--t6);line-height:1.28;letter-spacing:-.025em;color:#fff;max-width:34ch}
.taitext{position:relative;z-index:1;margin:8px 0 0;font-size:var(--t5);line-height:1.62;
  color:rgba(255,255,255,.76);max-width:64ch}

/* karta = jeden udaj, velke cislo, zbytek drobne */
/* Karta musí unést název, velké číslo, poznámku i šipku. Při 196 px se jich
   vešlo šest a šipka se tlačila k názvu; 260 px dá čtyři až pět a je v nich
   vzduch, jako v referenci. */
.tkarty{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}
/* Odsazení pod dlaždicemi drželo odstup od doporučení pod nimi. Na Domů se
   doporučení přesunula za grafy, takže by se tu k dolnímu odsazení panelu
   jen přičetlo dalších 20 px prázdna. */
.tkarty:last-child{margin-bottom:0}
/* 🔴 Automatický počet sloupců si na širokém monitoru vzal čtyři, takže šest
   dlaždic vyšlo 4 + 2 a vedle poslední dvojice zbyla prázdná polovina řádku.
   Tři sloupce natvrdo dělí šest beze zbytku a drží stejný pás na 1120 i na
   1680 px. Když je karet jiný počet, poslední dorovná řádek sama, ať pás
   nikde nekončí dírou. */
@media(min-width:1020px){
  .tkarty{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tkarty>.tk:last-child:nth-child(3n+1){grid-column:span 3}
  .tkarty>.tk:last-child:nth-child(3n+2){grid-column:span 2}
}
/* Dlaždice podle varianty G2 (vybrané 8. 8. 2026 proti třem dalším):
   rovná barevná lišta nahoře, plná ikona a patička s dělicí linkou a akcí.
   Lišta je rovná schválně — oblouk má v referenci jiný význam („tohle je
   tvoje") a u naměřeného cizího údaje by lhal. */
.tk{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border-radius:var(--r-lg);position:relative;overflow:hidden;
  padding:26px;transition:box-shadow .15s,transform .12s;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.tk:hover{box-shadow:0 1px 2px rgba(50,58,72,.06),0 10px 24px rgba(50,58,72,.10)}
.tk::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--barva,var(--teal))}
/* Patička jde přes celou šířku dlaždice, ne jen přes její vnitřek — linka, která
   končí kus před hranou, vypadá jako nedotažená. `margin-top:auto` k tomu drží
   dolní hranu: bez něj končila v řadě každá dlaždice akcí na jiné výšce. */
.tkpata{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px -26px -26px;padding:14px 26px;margin-top:auto;
  border-top:1px solid var(--line-soft);
  font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--teal-deep)}
.tkpata i{width:26px;height:26px;border-radius:50%;background:var(--tint);display:grid;
  place-items:center;font-style:normal;color:var(--muted);font-size:var(--t2);line-height:1;
  transition:transform .15s,background-color .15s}
.tk:hover .tkpata i{transform:translateX(3px);background:var(--teal-jemna);color:var(--teal-deep)}
.tk.bezodkazu .tkpata{display:none}
.tkarty .tk:first-child::before{background:rgba(255,255,255,.45)}
.tkarty .tk:first-child .tkpata{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
.tkarty .tk:first-child .tkpata i{background:rgba(255,255,255,.18);color:#fff}
/* První dlaždice nese hlavní číslo a je barevná, aby oko vědělo, kde začít.
   Řada stejně bílých karet nemá těžiště a čte se jako tabulka. */
.tkarty .tk:first-child{background:linear-gradient(160deg,#0A7A83 0%,#0B5F66 100%);color:#fff;
  box-shadow:0 1px 2px rgba(10,122,131,.18),0 10px 26px rgba(10,122,131,.22)}
/* 🔴 Krytí .82 a .72 vypadalo bezpečně, ale na barevné dlaždici je pod AA:
   změřeno na skutečných pixelech (popisek 4,42:1, spodní řádek 4,10:1), ne
   dopočítáno. `ui-audit` to nevidí, protože prvek s přechodem hlásí průhledné
   pozadí — proto to tu leželo od 8. 8. 2026. Na .88 a .80 vychází 4,7:1 a odstup
   tří úrovní textu zůstává. Vzorkovat pixely, ne věřit postroji. */
.tkarty .tk:first-child .tkl{color:rgba(255,255,255,.88)}
.tkarty .tk:first-child .tkl i{background:rgba(255,255,255,.16)}
.tkarty .tk:first-child .tkl i svg{stroke:#fff}
/* Na barevné dlaždici značka podložku nechce ani bílý obtah. */
.tkarty .tk:first-child .tkl i.tkznak{background:none}
.tkarty .tk:first-child .tkl i.tkznak svg{stroke:none}
.tkarty .tk:first-child .tkc b{color:#fff}
.tkarty .tk:first-child .tkc b em{color:rgba(255,255,255,.8)}
.tkarty .tk:first-child .tkp{color:rgba(255,255,255,.8)}
.tkarty .tk:first-child .mvz i{background:rgba(255,255,255,.3)}
.tkarty .tk:first-child .mvz i.je{background:#fff}
.tkarty .tk:first-child:hover{box-shadow:0 1px 2px rgba(10,122,131,.2),0 14px 32px rgba(10,122,131,.28)}
.tk:active{transform:scale(.99)}
/* Popisek dlaždice je jméno údaje, ne poznámka pod čarou — proto tmavší
   a silnější než okolní meta text. Barvu služby nesou lišta nahoře a plný čip
   s ikonou; číslo zůstává tmavé, ať se dlaždice čtou jako jedna řada. */
.tkl{display:flex;align-items:center;gap:10px;font-size:var(--t3);font-weight:700;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkl i{width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--barva,var(--teal))}
.tkl svg{width:19px;height:19px;fill:none;stroke:#fff;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Značka služby místo kresleného symbolu. Podložka se ruší, značka si nese
   vlastní tvar, a `stroke` musí pryč — obtah přes vybarvené logo z něj udělá
   rozmazanou skvrnu. Barvy uvnitř drží vlastní `fill` na cestách, které
   pravidlo pro `svg` nepřebíjí. */
.tkl i.tkznak{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.tkl i.tkznak svg,.tkl i.tkznak img{width:22px;height:22px;stroke:none;stroke-width:0;
  object-fit:contain;display:block}
.tkc{display:flex;align-items:baseline;gap:8px;margin:12px 0 6px;flex-wrap:wrap}
.tkc b{font-family:'Figtree';font-weight:800;font-size:var(--t9);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.tkc b em{font-style:normal;font-size:.62em;font-weight:700;color:var(--muted);margin-left:3px}
.tkp{display:block;font-size:var(--t2);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* tyden je jeden ohraniceny celek, ne volne polozene kartry po strance */
.tstitek{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.tyden .tvrch{border-bottom:1px solid var(--line-soft);padding-bottom:16px;margin-bottom:16px}
.tyden .tvrch h2{font-size:var(--t6);margin-top:3px}

/* doporuceni od AI: cislovany seznam kroku, ne odstavec */
.taidop{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;position:relative;z-index:1}
/* Pozadí nese řádek, ne odkaz: tlačítka „hotovo" a „teď ne" nesmí být uvnitř
   odkazu (klik by navigoval), takže musí být uvnitř téhle karty. */
.taidop li{background:rgba(255,255,255,.07);border-radius:13px;padding:12px 12px;transition:background .15s}
.taidop li:hover{background:rgba(255,255,255,.13)}
.taidop a{display:grid;grid-template-columns:auto minmax(0,1fr) 14px;gap:4px 12px;align-items:center;
  text-decoration:none;color:inherit}
.taidop a:hover .taisip{transform:translateX(3px)}
.taidruh{grid-row:1;font-family:'Figtree';font-weight:700;font-size:var(--t1);letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.taidruh.opravit{background:rgba(229,72,77,.22);color:#FFB3B5}
.taidruh.pridat{background:rgba(23,163,74,.2);color:#8FE0A8}
.taidruh.fokus{background:rgba(18,181,192,.2);color:#8FE3EA}
.taico{grid-row:1;font-family:'Figtree';font-weight:700;font-size:var(--t5);color:#fff;min-width:0}
.taiproc{grid-row:2;grid-column:2;font-size:var(--t3);line-height:1.5;color:rgba(255,255,255,.62)}
.taisip{grid-row:1;grid-column:3;color:rgba(255,255,255,.5);font-size:var(--t6);line-height:1;
  transition:transform .15s}

/* nadpis sekce uvnitr reportu: bez linky pres celou sirku, ta uz je hluk */
.tsekce{display:flex;align-items:center;gap:8px;margin:32px 0 12px}
.tsekce h3{font-family:'Figtree';font-weight:700;font-size:var(--t5);margin:0}
.tpocet{font-family:'Figtree';font-weight:700;font-size:var(--t1);min-width:20px;height:20px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--teal-jemna);color:var(--teal-deep);display:grid;place-items:center}

.tukoly{display:grid;gap:8px}
.tukol{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;gap:12px;align-items:center;
  background:#fff;border-radius:14px;padding:16px 16px;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06);
  transition:box-shadow .15s,transform .12s}
.tukol:hover{box-shadow:0 1px 2px rgba(50,58,72,.06),0 10px 24px rgba(50,58,72,.10)}
.tukol:hover .tusip{transform:translateX(3px)}
.tukol:active{transform:scale(.995)}
.tucis{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--teal-jemna);color:var(--teal-deep);font-family:'Figtree';font-weight:800;font-size:var(--t2)}
.tutext{display:grid;gap:2px;min-width:0}
.tutext b{font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.tutext span{font-size:var(--t3);color:var(--ink-soft);line-height:1.5}
.tusip{color:var(--muted);font-size:var(--t6);line-height:1;transition:transform .15s}

/* co se meri jednou mesicne: patri do reportu, ale ne mezi tydenni srovnani */
.tmesic{margin-top:16px;background:#fff;border-radius:var(--r-lg);padding:16px 16px;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.tmesic>summary{display:flex;align-items:center;gap:8px;font-family:'Figtree';font-weight:700;
  font-size:var(--t5);cursor:pointer;list-style:none}
.tmesic>summary::-webkit-details-marker{display:none}
.tmesic>summary>span{font-weight:700;font-size:var(--t1);min-width:20px;height:20px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--tint);color:var(--muted);display:grid;place-items:center}
.tmesic>summary::after{content:"\25BE";margin-left:auto;color:var(--muted);font-size:var(--t3)}
.tmesic[open]>summary::after{content:"\25B4"}
.tmesic .mr{padding:12px 0;border-top:1px solid var(--line-soft)}
.tmesic .mr:first-of-type{margin-top:12px}
.tmesic .mr b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.tmesic .mr span{display:block;font-size:var(--t4);color:var(--ink-soft);line-height:1.55;margin-top:2px}
.tmesic .mr i{display:block;font-family:var(--cislice);font-style:normal;font-size:var(--t1);color:var(--muted);margin-top:4px}

@media(max-width:620px){
  .tyden .tvrch h2{font-size:var(--t6)}
  /* Rozsah týdne se vedle tlačítek zalomil doprostřed data („20. 7. — 26. 7."
     a na dalším řádku „2026"). Tlačítka proto jdou na vlastní řádek. */
  .tyden .tvrch{flex-wrap:wrap}
  .tyden .tvrch h2{flex:1 0 100%}
  .tyden .tnastroje{margin-left:auto}
  /* rám panelu je zrušený, odsazení tu tedy nemá co vracet */
  .tai{padding:16px 16px 16px}
  .taititulek{font-size:var(--t6)}
  /* stitek vedle nadpisu nechal na nadpis dva palce mista; patri nad nej */
  .taidop a{grid-template-columns:minmax(0,1fr) 14px;gap:4px 8px;padding:12px 12px}
  .taidruh{grid-row:1;grid-column:1;justify-self:start}
  .taico{grid-row:2;grid-column:1}
  .taiproc{grid-row:3;grid-column:1}
  .taisip{grid-row:2;grid-column:2;align-self:center}
  .tkarty{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  /* Ve dvou sloupcích na telefonu zbývá na dlaždici 160 px a odsazení 26 px
     z toho ukrojilo třetinu, takže se název lámal na tři řádky. Záporné okraje
     patičky musí jít s odsazením dolů, jinak vyleze z karty ven. */
  .tk{padding:16px 12px}
  .tkpata{margin:12px -12px -12px;margin-top:auto;padding:8px 12px}
  .tkc b{font-size:var(--t7)}
  /* na uzkem displeji se popisek do jednoho radku nevejde a orezany
     „Misto na mapac" je horsi nez dva radky */
  .tkl,.tkp{white-space:normal;overflow:visible;line-height:1.35}
  .tukol{grid-template-columns:26px minmax(0,1fr);padding:12px 16px}
  .tusip{display:none}
}

/* vyrez v sidebaru: aktivni polozka je kus stranky prokrojeny do listy
   🔴 Půlkruhy ve `::before`/`::after` musí být VŽDY barvou panelu, ne bílou.
   Když panel ztmavl na petrolejovou, zůstaly by nad a pod aktivní položkou
   dva bílé zoubky — vypadá to jako chyba vykreslení, ne jako výřez. */
/* 🔴 Záporný okraj musí přesně vyrušit odsazení panelu, jinak výřez přeteče
   ven. `.sbar` má `padding:0 12px 12px`, takže `-16px` posílalo výřez 4 px za
   hranu panelu — a s ním i oba spoje, které kreslí barvu panelu. Do světlé
   plochy stránky pak vystupovaly dva tmavé zoubky a hrana vypadala křivě.
   Změřeno: panel končil na 250 px, položka na 254. */
.sbar .taby a.on{position:relative;background:var(--plocha);color:var(--teal-deep);font-weight:700;
  border-radius:14px 0 0 14px;margin-right:-12px;padding-right:24px}
.sbar .taby a.on::before,.sbar .taby a.on::after{content:"";position:absolute;right:0;
  width:14px;height:14px;pointer-events:none}
.sbar .taby a.on::before{bottom:100%;
  background:radial-gradient(circle at 0 0,var(--panel) 0 14px,var(--plocha) 14px)}
.sbar .taby a.on::after{top:100%;
  background:radial-gradient(circle at 0 100%,var(--panel) 0 14px,var(--plocha) 14px)}
/* 🔴 Najetí myší na aktivní záložku z ní udělalo bílý text na světlém výřezu.
   Pravidlo pro najetí v petrolejovém bloku níž má stejnou váhu jako
   `.sbar .taby a.on`, a při shodě váhy vyhrává to pozdější. Barva se proto musí
   vrátit i tady — na výřezu je bílá nečitelná, ať na něj myš najede, nebo ne. */
.sbar .taby a.on:hover{background:var(--plocha);color:var(--teal-deep)}

/* Boční panel v petrolejové. Jen od 1021 px: pod tím je z panelu vodorovná
   lišta nad obsahem a ta zůstává světlá, aby držela jednu plochu se spodní
   navigací. Aktivní položka se nepřebarvuje — je to výřez plochy stránky
   a právě ten kontrast dělá celý efekt. */
@media(min-width:1021px){
  .sbar{background:var(--panel)}
  .sbar .brand{background:var(--panel);border-bottom:1px solid rgba(255,255,255,.10)}
  .sbar .brand,.sbar .brand a,.sbar .brand span{color:#fff}
  .sbar .brand svg{stroke:#fff}
  /* Nadpis skupiny je drobné písmo, takže průhlednost musí být vyšší, než se
     zdá: na .45 měl 3,64:1 a spadl pod AA. Na .62 má 5,48:1. */
  .sbar .tskupina{color:rgba(255,255,255,.62)}
  .sbar .taby a{color:rgba(255,255,255,.78)}
  /* 🔴 Najetí myší přebarvovalo text na bílo, ale podklad zůstával světlý
     z `.taby a:hover{background:var(--tint)}` — to pravidlo je psané pro
     světlou vodorovnou lištu a v petrolejovém sloupci z něj byl bílý text na
     skoro bílém podkladu. Přebarvit se musí OBOJÍ, ne jen text. Tohle je ta
     samá past jako u aktivní položky, jen o řádek vedle. */
  .sbar .taby a:hover{color:#fff;background:rgba(255,255,255,.10)}
  .sbar .vpravo{border-top-color:rgba(255,255,255,.10)}
  /* Čip s pokrokem profilu si barvy nastavuje sám (`.txt` má `--ink`,
     `.txt b` má `--muted`), takže barva zděděná z panelu na něj nedosáhne
     a zůstal by tmavý text na tmavém. Kroužek má navíc bílý střed — na
     panelu z něj byl bílý terč místo prstence. */
  .sbar .hotovost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
  .sbar .hotovost:hover{background:rgba(255,255,255,.14)}
  .sbar .hotovost .txt{color:#fff}
  .sbar .hotovost .txt b{color:rgba(255,255,255,.72)}
  .sbar .hotovost .hkruh{background:conic-gradient(var(--barva) calc(var(--pct) * 1%),rgba(255,255,255,.2) 0)}
  .sbar .hotovost .hkruh::after,.sbar .hotovost:hover .hkruh::after{background:var(--panel)}
  .sbar #kdo{color:rgba(255,255,255,.72)}
  /* Karta nabídky aplikace měla vlastní tmavý gradient, aby na bílém panelu
     vystoupila. Na tmavém panelu by z ní byla díra, proto se prosvětluje. */
  .bokapp{background:#0D4E56;border:1px solid rgba(255,255,255,.12)}
}
/* Vyrez se nesmi prolinat: pozadi mizelo pomalu, zatimco rohy naskocily hned,
   a prepnuti sekce vypadalo rozbite. */
.sbar .taby a{transition:color .12s}
.sbar .taby a:active{transform:none}

/* stav sluzby pod nadpisem: udaj, ne odznak */
.dmeta{margin:0;font-size:var(--t3);color:var(--ink-soft);line-height:1.75}
.dmeta span{white-space:nowrap}
.dmeta b{font-family:'Figtree';font-weight:700;color:var(--ink)}
.dmeta span+span::before{content:"";display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;background:var(--line);margin:0 8px}
/* Na telefon se řádek nevejde a zalomí se doprostřed. Tečka pak visí na kraji
   a vypadá jako překlep, proto se údaje radši poskládají pod sebe. */
@media(max-width:620px){
  .dmeta{font-size:var(--t3);line-height:1.5}
  .dmeta span{display:block}
  .dmeta span+span::before{display:none}
}

/* nastroje v hlavicce tydne */
.tnastroje{display:flex;align-items:center;gap:8px;flex:none}
/* Sedí na tlačítku i na odkazu: stažení reportu je odkaz, aby šlo otevřít na
   nové kartě, sdílení tlačítko, protože nejdřív volá server. Bez `inline-flex`
   by odkaz výšku ignoroval a stál v řadě o kus výš. */
.tsdilet{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid var(--line);text-decoration:none;white-space:nowrap;
  font-family:'Figtree';font-weight:600;font-size:var(--t3);color:var(--ink);cursor:pointer;
  transition:border-color .15s,transform .12s}
.tsdilet:hover:not(:disabled){border-color:var(--teal)}
.tsdilet:active:not(:disabled){transform:scale(.97)}
.tsdilet:disabled{opacity:.5;cursor:default}

/* odklepnuti doporuceni: tlumene, dokud na radek nesahnes */
.taiakce{display:flex;gap:4px;margin-top:12px}
.taiakce button{height:28px;padding:0 12px;border-radius:var(--r-pill);cursor:pointer;
  font-family:'Figtree';font-weight:600;font-size:var(--t1);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.78);
  transition:background .15s,color .15s}
.taiakce button:hover:not(:disabled){background:rgba(255,255,255,.2);color:#fff}
.taiakce button:disabled{opacity:.45;cursor:default}

/* sdileny report: stejny obsah, ale samostatna stranka bez aplikace */
body.sdilene{background:var(--plocha)}
.sdhlava{padding:24px 24px;border-bottom:1px solid var(--line)}
.sdhlava .znak{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.sdhlava .znak svg{width:26px;height:26px}
/* Značka měří na výšku jen řádek (26 px). Stojí v liště sama, plocha se tedy
   může roztáhnout neviditelně.
   🔴 PATŘÍ SEM, NE MEZI ROZTAŽENÉ PLOCHY PŘEHLEDU. Blok kolem `.iBtn::after`
   hlídá `test/mobil-prehled.test.mjs` a vyžaduje, aby se každá jeho třída
   v přehledu opravdu vykreslovala — `.sdhlava` je sdílený report a v přehledu
   není, takže tam ta samá deklarace shodila tři testy. */
@media(max-width:1020px){
  .sdhlava .znak{position:relative}
  .sdhlava .znak::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
.sdstranka{max-width:920px;margin:0 auto;padding:32px 24px 80px}
.sdvrch{margin-bottom:16px}
.sdfirma{margin:0 0 8px;font-size:var(--t4);color:var(--ink-soft)}
.sdvrch h1{font-family:'Figtree';font-weight:800;font-size:var(--t7);letter-spacing:-.03em;margin:3px 0 0}
.sdpata{margin:24px 0 0;font-size:var(--t3);color:var(--muted);text-align:center}
.sdchyba{background:#fff;border-radius:var(--r-lg);padding:32px 24px;text-align:center;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.sdchyba h1{font-family:'Figtree';font-weight:800;font-size:var(--t6);margin:0 0 8px}
.sdilene .tk.bezodkazu{cursor:default}
.sdilene .tk.bezodkazu:hover{box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.sdilene .taidop a{cursor:default}
.sdilene .taisip{display:none}
@media(max-width:620px){
  .sdstranka{padding:24px 12px 60px}
  .sdvrch h1{font-size:var(--t6)}
}

/* spouštění měření patří k dotazu, ne na konec stránky */
.airam .airampata{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.airam .airampata .btn{width:auto;display:inline-flex}
/* Tmavý rám přebarvuje odstavec na světlý, ale `.pridel b` nastavuje barvu
   přímo na `b`, takže tučné číslo zůstávalo tmavé na tmavém (2,13:1). */
.airam .airampata .pridel{color:#9DBCC0;margin-top:8px}
.airam .airampata .pridel b{color:#fff}
.airam .airampata p{margin:0}
.airam .airampata p+.pridel{margin-top:8px}

/* než vznikne první report: sekce je vidět, jen se přizná, že čeká na data */
.tai.tceka{background:linear-gradient(135deg,#0B1B20 0%,#16333a 60%,#123a40 100%)}
.tai.tceka .taititulek{font-size:var(--t6)}
.tcekapruh{position:relative;z-index:1;display:flex;gap:4px;margin-top:16px}
.tcekapruh i{width:34px;height:5px;border-radius:3px;background:rgba(143,227,234,.25);
  animation:tceka 1.6s ease-in-out infinite}
.tcekapruh i:nth-child(2){animation-delay:.2s}
.tcekapruh i:nth-child(3){animation-delay:.4s}
@keyframes tceka{0%,100%{background:rgba(143,227,234,.2)}50%{background:rgba(143,227,234,.65)}}
@media(prefers-reduced-motion:reduce){.tcekapruh i{animation:none}}

/* Panel není rám, je to nadpis skupiny. Dřív to byla karta, uvnitř které
   stála další karta s vlastním odsazením, obrysem i stínem.

   🔴 PRVNÍ POKUS BYL ŠPATNĚ: rám jsem panelu vzal úplně (`border:0;background:none`).
   Jenže `.panel` není vždycky obal kolem karet — v sekcích jako Odkazy nebo AI je
   to JEDINÁ karta a drží obyčejný text. Bez rámu tam zbyl holý odstavec ležící
   na šedém pozadí. Tomáš to viděl hned: „tys posral celý layout."

   Rám tedy zůstává, jen je tenký a těsný, podle reference z Google Analytics,
   kterou Tomáš poslal: bílá karta, obrys 1 px, malý rádius, klidné odsazení.
   Proti dvojitému rámování se bojuje na druhé straně — u vnořených prvků,
   ne zrušením obalu. */
.panel,.tpanel{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px}
.panel{margin:0 0 16px}
/* 🔴 Panel reportu byl bílý a dlaždice v něm taky, každá s vlastním stínem.
   Bílá karta na bílé se nedá oddělit ničím jiným než stínem, takže to celé
   vypadalo vytlačené do reliéfu a čísla se v tom ztrácela. Panel je proto
   tichá podložka a dlaždice na ní jsou to jediné bílé — přesně jako
   v referenci, kde karty leží na světlé ploše, ne v další kartě. */
.tpanel{background:var(--tint);box-shadow:none;border:1px solid var(--line)}
.tkarty .tk{box-shadow:none}
.tkarty .tk:hover{box-shadow:0 1px 2px rgba(50,58,72,.06),0 10px 24px rgba(50,58,72,.10)}
/* Karta v kartě, plošně (Tomáš, 8. 8. 2026). Vnořený rám nikdy nepřidá
   informaci, jen zdvojí okraj, odsazení a stín. Rám drží vnějšek, uvnitř dělí
   linka. Bojuje se u vnořeného prvku, ne zrušením obalu — to se tu už jednou
   zkusilo a rozpadly se sekce, kde je panel jedinou kartou.
   Seznam vzniklý měřením v prohlížeči (prvek se stínem i podkladem uvnitř
   jiného takového), ne odhadem od stolu. */
.panel .napoj,.panel .radky,.panel .zebricek,
.card .napoj,.card .radky,.card .zebricek{background:none;box-shadow:none;border-radius:0;border:0}
/* Řádek uvnitř panelu si nese vlastní odsazení a k odsazení panelu se přičítalo,
   takže text stál 48 px od kraje. */
.panel .napoj>.rad,.panel .radky>.r,.panel .zebricek .zrad,
.card .napoj>.rad,.card .radky>.r,.card .zebricek .zrad{padding-left:0;padding-right:0}
/* Dlaždice uvnitř panelu jsou pořád dlaždice, jen se nevytlačují stínem —
   oddělí je obrys, jako v referenci z Analytics. */
.panel .kar,.panel .aikarta,.card .kar{box-shadow:none;border:1px solid var(--line)}
/* Nálezy dělila mřížka nakreslená stínem každé buňky. Bez rámu kolem nich to
   zbylo jako pár čar visících ve vzduchu, tak dělí mezera. */
.panel .nalezy .nal{box-shadow:none;padding:8px 0}
.panel .napoj.nalezy{gap:8px 24px}

/* ---- tmavá hlavička sekce (8. 8. 2026) ----
   🔴 Napoprvé jsem dal kroužek se skóre ke každému bloku zvlášť a Tomáš na to
   řekl „furt mid". Měl pravdu: sekce jako celek pořád nezačínala ničím, jen
   dvěma stejně velkými seznamy. Tohle je ta chybějící hlavička — jedno číslo
   a hned pod ním to nejdůležitější, co s tím dělat. Bloky pod ní už kroužek
   nemají, tři na jedné obrazovce si konkurují.

   Směr „tmavé těžiště" vybral Tomáš 8. 8. 2026 ze tří návrhů na to, že je
   aplikace „hrozně prázdná". Prázdno nebylo v tom, že by chybělo prvků — byla
   to bílá plocha přes celou obrazovku, na které nemá oko kde přistát. Sekce
   proto začíná tmavým blokem s velkým číslem a zbytek zůstává světlý. Stejný
   jazyk v aplikaci už byl (pruh „9 věcí čeká" na Domů, karta doporučení od AI),
   tohle ho jen dotáhlo na hlavičky sekcí. */
.vyhero{display:flex;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0B1B20 0%,#123138 55%,#0A3F45 100%);
  border-radius:var(--r-lg);padding:32px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(11,27,32,.2),0 18px 40px rgba(11,27,32,.26)}
.vyhero::before{content:"";position:absolute;right:-80px;top:-110px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle,rgba(18,181,192,.34),transparent 68%);
  pointer-events:none}
.vyhero>*{position:relative;z-index:1}
.vyhero .tstitek{color:#8FE3EA}
.vhtxt{flex:1;min-width:240px}
.vhtxt h2{font-family:'Figtree';font-weight:800;font-size:var(--t8);letter-spacing:-.03em;
  line-height:1.2;margin:3px 0 0;color:#fff}
.vhtxt p{color:rgba(255,255,255,.76);font-size:var(--t5);line-height:1.6;margin-top:8px;max-width:64ch}
.vhtxt p b{font-family:'Figtree';font-weight:700;color:#fff}
.vhtxt .vhakce{display:inline-flex;margin-top:16px;width:auto}

/* Prstenec „kolik z kolika". Střed má barvu podkladu, ne bílou — bílý terč
   uprostřed tmavého bloku vypadá jako díra. */
.vhkolo{position:relative;width:104px;height:104px;flex:none;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  background:conic-gradient(var(--teal) calc(var(--pct,0)*1%),rgba(255,255,255,.16) 0)}
.vyhero.pozor .vhkolo{background:conic-gradient(#FFC24B calc(var(--pct,0)*1%),rgba(255,255,255,.16) 0)}
.vyhero.chyba .vhkolo{background:conic-gradient(#FF8A8A calc(var(--pct,0)*1%),rgba(255,255,255,.16) 0)}
.vhkolo::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#0F2A31}
.vhkolo b,.vhkolo i{position:relative;z-index:1}
.vhkolo b{font-family:'Figtree';font-weight:800;font-size:var(--t8);letter-spacing:-.03em;color:#fff}
.vhkolo i{font-style:normal;font-family:var(--cislice);font-size:var(--t2);
  color:rgba(255,255,255,.62);margin-top:3px}

/* Kde se neměří „kolik z kolika", nese číslo samo sebe. Prstenec kolem jednoho
   údaje by lhal, že je z něčeho vyplněná část. */
.vhcislo{flex:none;display:grid;justify-items:center;line-height:1}
.vhcislo b{font-family:'Figtree';font-weight:800;font-size:var(--t9);letter-spacing:-.04em;color:#fff}
.vhcislo i{font-style:normal;font-size:var(--t2);color:rgba(255,255,255,.62);margin-top:6px}
.vhcislo .zm{margin-top:8px}
.vyhero .zm.nahoru{background:rgba(23,163,74,.24);color:#8FE0A8}
.vyhero .zm.dolu{background:rgba(229,72,77,.24);color:#FFB3B5}
.vyhero .zm.nic{background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}

/* Zdroj, který nedodal číslo, je poznámka pod čísly, ne prázdná dlaždice mezi
   nimi. Tečka nese, že je to výpadek, a nemusí to říkat rám kolem. */
.vypadky .r .l b{display:flex;align-items:center;gap:8px}
.vypadky .r .l b::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--star);flex:none}
@media(max-width:620px){
  .vyhero{gap:16px;padding:24px 16px}
  .vhkolo{width:72px;height:72px}
  .vhkolo b{font-size:var(--t6)}
  .vhcislo b{font-size:var(--t8)}
  .vhtxt h2{font-size:var(--t6)}
  .vhtxt p{font-size:var(--t4)}
}

/* Co vyžaduje pozornost, je karta s radou, ne řádek s tečkou. Barva sedí na
   levé hraně, aby se karty daly přeletět očima podle závažnosti. */
.nalkarty{display:grid;grid-template-columns:repeat(auto-fit,minmax(302px,1fr));gap:12px}
.nalk{border:1px solid var(--line);border-left:4px solid var(--star);
  border-radius:12px;padding:12px 16px;background:#fff}
.nalk.chyba{border-left-color:var(--bad)}
.nalk b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t4);line-height:1.4}
.nalk p{margin:4px 0 0;color:var(--ink-soft);font-size:var(--t3);line-height:1.55}
.panel .nalk{background:none}
.panel .pvrch,.tyden .tvrch{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:12px}
.panel .pvrch h2{font-family:'Figtree';font-weight:800;font-size:var(--t5);letter-spacing:-.025em;margin:3px 0 0}
/* nadpisy uvnitř panelu už nepotřebují linku přes celou šířku, rám dělí sám */
.panel .sekcnadpis::after{display:none}
.panel .sekcnadpis:first-child{margin-top:0}
.panel>.uvodtext:first-of-type{margin-top:0}

/* Panel, který drží karty, není rám, ale nadpis nad nimi. Karty leží rovnou na
   ploše stránky — rám kolem karet je zase karta v kartě. */
.panel.holy{background:none;box-shadow:none;padding:0;border-radius:0}
.panel.holy>.pvrch{border-bottom:0;padding-bottom:0;margin-bottom:12px}
.panel.holy>.pvrch h2{font-size:var(--t6)}

/* Fronta ke schválení jako vodorovný pás (Tomáš, 8. 8. 2026). Devět položek pod
   sebou byl sloupec přes šest obrazovek. Že to jde posouvat do strany, říkají
   tři věci naráz: useknutá další karta, viditelný jezdec a šipky v hlavičce. */
.fnastroje{display:flex;align-items:center;gap:8px;flex:none}
/* Šipky pásu sedí v tmavé hlavičce, takže bílé kolečko s obrysem by na ní
   svítilo víc než číslo vedle. */
.vyhero .aisipka{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff}
.vyhero .aisipka:hover:not(:disabled){background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.vyhero .aisipka:disabled{opacity:.35}
.fpas{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:4px 4px 12px;margin:0 -4px}
.fpas>.polozka{flex:0 0 min(340px,86%);margin-bottom:0;scroll-snap-align:start;
  display:flex;flex-direction:column}
.fpas::-webkit-scrollbar{height:6px}
.fpas::-webkit-scrollbar-thumb{background:#D6E2E4;border-radius:var(--r-pill)}
.fpas::-webkit-scrollbar-track{background:transparent}
/* Karta odjíždí do strany, ne nahoru: v pásu by pohyb vzhůru vypadal jako by
   vypadla z řady. */
.fpas>.polozka.mizi{opacity:0;transform:translateX(-12px)}

/* V pásu je náhled, ne celá karta: v úzké kartě se recenze ořízne, pole na text
   se scvrkne na tři řádky a tlačítka spadnou pod okraj. Text je proto tlačítko,
   které otevře psaní pod pásem přes celou šířku. */
.polozka.nahled .fotevri{display:block;width:100%;text-align:left;border:0;padding:0;
  background:none;font:inherit;color:inherit;cursor:pointer;flex:1}
/* Ořez počítá řádky, takže nesmí zahrnovat i popisek „Náš návrh" — jinak
   z textu zbydou dva řádky a třetí se rozřízne napůl. */
.polozka.nahled .fotevri .aiCit,.polozka.nahled .fnavrh .ftext{display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.polozka.nahled .fnavrh{display:block;margin-top:12px;background:var(--tint);border-radius:var(--r);
  padding:12px;font-size:var(--t4);line-height:1.55;color:var(--ink)}
.polozka.nahled .fnavrh b{display:block;font-family:'Figtree';font-weight:600;font-size:var(--t2);
  color:var(--teal-deep);margin-bottom:7px}
.polozka.nahled .fotevri:hover .fnavrh{background:#E4EFF0}
.polozka.nahled .akce{margin-top:12px}
/* Dvě tlačítka vedle sebe v kartě široké 340 px: bez užšího odsazení se
   „Schválit a zveřejnit" láme na dva řádky a dvojice přeroste kartu. */
.polozka.nahled .akce .btn{flex:1;padding:10px 12px;font-size:var(--t4)}
.polozka.otevrena{box-shadow:0 0 0 2px var(--teal-deep),0 6px 16px rgba(50,58,72,.06)}

/* Otevřená položka pod pásem. Odsazení navíc říká, že patří k pásu nad ní,
   a není to další nezávislá karta v seznamu. */
.fdetail:not(:empty){margin-top:4px}
.fdetail .polozka{margin-bottom:0}

/* recenze stažené z Googlu, každá se svým stavem */
/* Odkaz místo výpisu recenzí, které leží ve frontě — ať tatáž recenze nestojí
   na obrazovce dvakrát. */
.nrfronta{display:block;margin-bottom:12px;padding:12px 16px;border-radius:var(--r);
  background:var(--teal-jemna);color:var(--teal-deep);font-family:'Figtree';font-weight:700;
  font-size:var(--t4);text-decoration:none}
.nrfronta:hover{background:#D5EFF1}
/* Vynucení kontroly. Vysvětlení stojí vedle tlačítka, ne pod ním: samotné
   „Zkontrolovat teď" nese slib průběžné práce, kterou klient platí. */
.nrstah{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.nrstah span{font-size:var(--t3);color:var(--muted);line-height:1.5}
/* Nad seznamem stojí to, kvůli čemu se sem klient dívá: kolik jich je a kolik
   ještě čeká na odpověď. Samotný výpis třiceti recenzí tuhle odpověď nedá. */
.nrsouhrn{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.nrsouhrn b{font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.nrsouhrn span{font-size:var(--t3);color:var(--muted)}
.nrsouhrn span::before{content:"·";margin-right:8px}
.nrec{display:grid;gap:8px}
.nr{background:#fff;border-radius:12px;padding:12px 16px;
  box-shadow:0 1px 2px rgba(50,58,72,.05),0 6px 16px rgba(50,58,72,.06)}
.nrvrch{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nrvrch b{font-family:'Figtree';font-weight:700;font-size:var(--t5)}
.nrvrch i{font-family:var(--cislice);font-style:normal;font-size:var(--t1);color:var(--muted);margin-left:auto}
.nrhvezdy{display:inline-flex;align-items:center;gap:4px}
.nrhvezdy b{font-family:var(--cislice);font-weight:700;font-size:var(--t3);color:var(--ink)}
.nrh5{display:inline-flex}
.nrh svg{width:15px;height:15px;fill:var(--line);stroke:none}
.nrh.on svg{fill:var(--star)}
.nr p{margin:8px 0 0;font-size:var(--t4);line-height:1.6;color:var(--ink-soft)}
.nr p.nrbez{color:var(--muted);font-style:italic}
.nrakce{margin-top:13px;display:flex;align-items:center;gap:8px}
.nrakce .btn{width:auto;min-height:42px;padding:8px 16px;font-size:var(--t3)}
.nrakce a.znacka{text-decoration:none}
@media(max-width:620px){
  .nrvrch i{margin-left:0;width:100%}
  /* Přes celou šířku už tlačítko je, chybělo mu jen šest pixelů na výšku,
     aby se do něj dalo trefit prstem. */
  .nrakce .btn{width:100%;min-height:44px}
}

/* obrázek téhož údaje pod číslem: kolik z kolika, ne jen kolik */
.mvz{display:block;margin-top:9px}
.mvz.tecky{display:flex;flex-wrap:wrap;gap:3px}
.mvz.tecky i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.mvz.tecky i.je{background:var(--barva,var(--teal))}
.mvz.hvezdy{display:flex;gap:3px}
.mvz.hvezdy i{width:11px;height:11px;flex:none;background:var(--line);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mvz.hvezdy i.je{background:var(--star)}
.mvz.pruh{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.mvz.pruh i{display:block;height:100%;border-radius:3px;background:var(--barva,var(--teal))}

/* poslední krok průvodce, když se nenašla provozovna: není to úspěch */
.uvod .krouzek.chybi{background:#FDECEC}
.uvod .krouzek.chibi i,.uvod .krouzek.chybi i{background:var(--star)}

/* krok průvodce s výběrem provozovny */
.uprov .napoveda{margin:0 0 12px}
.uprov .napoveda.hotovo{color:var(--good)}
.uprovseznam{display:grid;gap:8px;margin-bottom:12px;max-height:250px;overflow-y:auto}
.uprovr{display:grid;gap:2px;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;padding:12px 12px;cursor:pointer;transition:border-color .15s,transform .12s}
.uprovr:hover:not(:disabled){border-color:var(--teal)}
.uprovr:active:not(:disabled){transform:scale(.99)}
.uprovr:disabled{opacity:.5;cursor:default}
.uprovr.vybrano{border-color:var(--teal-deep);background:var(--teal-jemna)}
.uprovn{font-family:'Figtree';font-weight:700;font-size:var(--t5);color:var(--ink)}
.uprova{font-size:var(--t3);color:var(--ink-soft)}
.uprovh{font-family:var(--cislice);font-size:var(--t2);color:var(--muted);margin-top:2px}

/* ---- náhled klientova webu ---- */
/* Snímek v rámečku přístroje, ne holý obrázek: klient tak hned pozná, že se
   dívá na svůj web očima návštěvníka, a ne na naši grafiku. Poměry stran sedí
   na skutečné viewporty, ve kterých se snímek pořizuje (1280×800 a 390×844). */
.nahledy{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.pristroj{margin:0;min-width:0}
.pristroj figcaption{margin-top:9px;font-size:var(--t3);color:var(--muted)}
.pristroj .sklo{position:relative;overflow:hidden;background:var(--tint)}
.pristroj img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.pristroj.pocitac{flex:1 1 420px;max-width:660px}
.pristroj.pocitac .lista{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;
  background:#EDF3F3;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.pristroj.pocitac .tecky{display:flex;gap:4px;flex:none}
.pristroj.pocitac .tecky i{width:8px;height:8px;border-radius:50%;background:#CBD9DA}
.pristroj.pocitac .adresa{font-family:var(--mono);font-size:var(--t1);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pristroj.pocitac .sklo{aspect-ratio:1280/800;border:1px solid var(--line);border-radius:0 0 12px 12px}

.pristroj.mobil{flex:0 0 auto;width:186px}
.pristroj.mobil .sklo{aspect-ratio:390/844;border:6px solid var(--ink);border-radius:26px}
.pristroj.mobil .vyrez{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  width:58px;height:15px;background:var(--ink);border-radius:0 0 9px 9px}

/* Než snímek doběhne, drží rámeček tvar a jemně pulzuje, aby bylo poznat,
   že se něco děje, a stránka pod tím neposkakovala. */
.pristroj.ceka .sklo{animation:dychani 1.6s ease-in-out infinite}
@keyframes dychani{0%,100%{opacity:.55}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.pristroj.ceka .sklo{animation:none}}

.jakoodkaz{background:none;border:0;padding:0;font:inherit;color:var(--teal-deep);cursor:pointer;text-decoration:underline}
.jakoodkaz[disabled]{opacity:.6;cursor:default;text-decoration:none}

@media(max-width:640px){
  .nahledy{gap:16px}
  .pristroj.pocitac{flex:1 1 100%}
  .pristroj.mobil{width:150px}
}

/* ---- animované ukázky ke službám (js/prehled/ukazka.js) ---- */
/* Vlastní prefix `uk-`, protože app.css je jeden soubor a kolize tříd tu už
   dvakrát tiše přebily nové karty. Nic z tohohle nesmí sáhnout na obecné
   názvy. Scény jsou stavěné na světlou kartu dialogu, ne na tmavý průvodce. */
.uk{background:var(--plocha);border-radius:var(--r);padding:16px 16px 12px;margin:0 0 16px;overflow:hidden}
.uk-pod{margin:12px 0 0;font-size:var(--t2);color:var(--muted);text-align:center;line-height:1.5}
.uk-pod b{font-family:'Figtree';font-weight:700;color:var(--ink-soft)}
/* Scény mají vymyšlená čísla. Bez tohohle štítku je nový zákazník, který ještě
   nemá nic naměřeno, čte jako svoje. */
.ukznacka{display:block;margin:-12px 0 16px;font-size:var(--t1);color:var(--muted);text-align:center}

/* mřížka bodů po okolí */
.uk-mriz{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:216px;margin:0 auto}
.uk-mriz i{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-style:normal;
  font-family:'Figtree';font-weight:700;font-size:var(--t1);color:var(--ink);
  opacity:0;transform:scale(.6);animation:ukBod .32s ease-out forwards;animation-delay:calc(var(--i) * .045s)}
.uk-mriz i.a{background:#17A34A}
.uk-mriz i.b{background:#EF9F06}
.uk-mriz i.c{background:#E5484D}
@keyframes ukBod{to{opacity:1;transform:scale(1)}}

/* bubliny: dotaz, odpověď, recenze */
.uk-chat{display:grid;gap:8px}
.uk-otazka{background:var(--ink);color:#fff;border-radius:14px 14px 14px 5px;padding:12px 12px;
  font-size:var(--t3);line-height:1.45;justify-self:start;max-width:88%;
  opacity:0;animation:ukPrijde .4s ease-out .1s forwards}
.uk-odpoved{background:#fff;border-radius:14px 14px 5px 14px;padding:12px 12px;display:grid;gap:8px;
  justify-self:end;max-width:92%;width:100%;
  opacity:0;animation:ukPrijde .4s ease-out .7s forwards}
.uk-odpoved span{display:flex;align-items:center;gap:8px;font-size:var(--t3);color:var(--ink-soft);
  opacity:0;animation:ukPrijde .34s ease-out forwards;animation-delay:calc(.95s + var(--i) * .22s)}
.uk-odpoved i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line)}
.uk-odpoved .uk-ja{font-family:'Figtree';font-weight:700;color:var(--teal-deep)}
.uk-odpoved .uk-ja i{background:var(--teal)}
.uk-odpoved .uk-ja em{font-style:normal;font-size:var(--t1);background:var(--teal-jemna);color:var(--teal-deep);
  border-radius:var(--r-pill);padding:2px 8px;margin-left:auto}

/* odpověď na recenzi */
.uk-recenze{background:#fff;color:var(--ink-soft)}
.uk-recenze em{display:block;font-style:normal;color:var(--star);letter-spacing:2px;font-size:var(--t2);margin-bottom:4px}
.uk-navrh{background:var(--tint);border-radius:12px;padding:12px 12px;justify-self:end;max-width:94%;width:100%;
  opacity:0;animation:ukPrijde .4s ease-out .6s forwards}
.uk-navrh b{display:block;font-family:'Figtree';font-weight:600;font-size:var(--t1);color:var(--teal-deep);margin-bottom:5px}
.uk-pise{display:block;font-size:var(--t3);line-height:1.5;color:var(--ink-soft);
  clip-path:inset(0 100% 0 0);animation:ukOdkryj 1s steps(24) .85s forwards}
.uk-odklep{justify-self:end;display:inline-flex;align-items:center;gap:8px;background:var(--teal-deep);color:#fff;
  border-radius:var(--r-pill);padding:8px 16px;font-family:'Figtree';font-weight:700;font-size:var(--t2);
  opacity:0;transform:scale(.9);animation:ukBod .3s ease-out 1.95s forwards}
.uk-odklep i{width:13px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  margin-top:-3px}

/* sbírání recenzí */
.uk-nase{background:var(--tint);color:var(--ink-soft);border-radius:14px 14px 5px 14px;padding:12px 12px;
  font-size:var(--t3);line-height:1.45;justify-self:end;max-width:90%;
  opacity:0;animation:ukPrijde .4s ease-out .1s forwards}
.uk-prichozi{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:14px 14px 14px 5px;
  padding:8px 12px;font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--ink);justify-self:start;
  opacity:0;animation:ukPrijde .45s ease-out 1.15s forwards}
.uk-prichozi em{font-style:normal;color:var(--star);letter-spacing:2px;font-size:var(--t2)}

/* odškrtávaný seznam */
.uk-rada{display:grid;gap:8px}
.uk-rada span{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px 12px;
  font-size:var(--t3);color:var(--ink-soft);
  opacity:0;transform:translateY(5px);animation:ukNajede .36s ease-out forwards;animation-delay:calc(var(--i) * .22s)}
.uk-rada i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--teal-jemna);position:relative}
.uk-rada i::after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;
  border-left:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);transform:rotate(-45deg)}
.uk-sync .uk-oprava{font-family:'Figtree';font-weight:700;color:var(--teal-deep)}

/* sloupce s propadem a upozornění */
.uk-graf{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:82px}
.uk-graf i{width:26px;border-radius:6px 6px 3px 3px;background:#CFE6E8;height:0;
  animation:ukRoste .45s ease-out forwards;animation-delay:calc(var(--i) * .12s)}
.uk-graf i.dolu{background:#E5484D}
@keyframes ukRoste{to{height:calc(var(--v) * 1%)}}
.uk-notif{background:#fff;border-radius:12px;padding:12px 12px;margin-top:12px;
  box-shadow:0 2px 6px rgba(11,27,32,.06),0 10px 24px rgba(11,27,32,.08);
  opacity:0;transform:translateY(-8px);animation:ukNajede .45s ease-out .85s forwards}
.uk-notif b{display:block;font-family:'Figtree';font-weight:700;font-size:var(--t3)}
.uk-notif span{font-size:var(--t2);color:var(--muted)}

/* tři čísla týdenního reportu */
.uk-cisla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.uk-cisla span{background:#fff;border-radius:11px;padding:12px 8px;display:grid;gap:2px;text-align:center;
  font-size:var(--t1);color:var(--muted);line-height:1.3;
  opacity:0;transform:translateY(6px);animation:ukNajede .38s ease-out forwards;animation-delay:calc(var(--i) * .18s)}
.uk-cisla b{font-family:'Figtree';font-weight:800;font-size:var(--t6);color:var(--ink);letter-spacing:-.02em}
.uk-cisla em{font-style:normal;font-family:'Figtree';font-weight:700;font-size:var(--t1);border-radius:var(--r-pill);
  padding:2px 8px;justify-self:center;margin-top:3px}
.uk-cisla .lip{background:#E6F6EC;color:#14622F}
.uk-cisla .hur{background:#FDECEC;color:#A32B2F}

/* připravený příspěvek */
.uk-prisp{background:#fff;border-radius:12px;padding:12px;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:12px;align-items:center;position:relative;
  opacity:0;animation:ukPrijde .42s ease-out .2s forwards}
.uk-foto{height:64px;border-radius:9px;background:linear-gradient(135deg,#DDE9EA,#F1F7F7)}
.uk-text{display:grid;gap:4px}
.uk-text i{height:8px;border-radius:4px;background:var(--line-soft);width:0;
  animation:ukSiri .5s ease-out forwards;animation-delay:calc(.55s + var(--i) * .14s)}
.uk-text i:nth-child(1){--w:100%}
.uk-text i:nth-child(2){--w:82%}
.uk-text i:nth-child(3){--w:56%}
@keyframes ukSiri{to{width:var(--w)}}
.uk-stitek{position:absolute;right:12px;bottom:-9px;background:#FEF3DE;color:#8A5A06;
  font-family:'Figtree';font-weight:700;font-size:var(--t1);border-radius:var(--r-pill);padding:3px 8px;
  opacity:0;animation:ukBod .3s ease-out 1.25s forwards}

@keyframes ukPrijde{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes ukNajede{to{opacity:1;transform:none}}
@keyframes ukOdkryj{to{clip-path:inset(0 0 0 0)}}

/* Bez pohybu musí zůstat tentýž obrázek, ne prázdné místo. */
@media(prefers-reduced-motion:reduce){
  .uk *{animation-duration:.01ms!important;animation-delay:0ms!important}
  .uk-graf i{height:calc(var(--v) * 1%)}
  .uk-text i{width:var(--w)}
  .uk-pise{clip-path:none}
}

/* ---- krokovaný návod na napojení (js/prehled/navod.js) ---- */
.nv-tecky{display:flex;gap:4px;justify-content:center;margin:0 0 16px}
.nv-tecky i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
.nv-tecky i.on{width:18px;border-radius:3px;background:var(--teal-deep)}

.uk.nv{padding:24px 16px}
.nv>div{display:grid;gap:8px}

/* z tlačítka k Googlu */
.nv-tok{display:flex!important;align-items:center;justify-content:center;gap:12px}
.nv-uzel{background:#fff;border-radius:10px;padding:12px 16px;font-family:'Figtree';font-weight:700;font-size:var(--t3);
  opacity:0;transform:translateY(6px);animation:ukNajede .38s ease-out forwards;animation-delay:calc(var(--i) * .22s)}
.nv-cil{background:var(--ink);color:#fff}
.nv-sipka{width:34px;height:2px;background:var(--line);position:relative;flex:none;
  opacity:0;animation:ukNajede .3s ease-out forwards;animation-delay:calc(var(--i) * .22s)}
.nv-sipka::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg)}

/* výběr účtu, souhlas, výběr webu — všechno jsou řádky, které naskakují */
.nv-ucty span,.nv-souhlas span,.nv-vyber span{display:flex;align-items:center;gap:8px;background:#fff;
  border-radius:10px;padding:12px 12px;font-size:var(--t3);color:var(--ink-soft);
  opacity:0;transform:translateY(5px);animation:ukNajede .36s ease-out forwards;animation-delay:calc(var(--i) * .28s)}
.nv-ucty i,.nv-vyber i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--line-soft)}
.nv-spravny{outline:2px solid var(--teal);outline-offset:-2px}
.nv-spravny i{background:var(--teal)!important}
.nv-spravny em{font-style:normal;font-size:var(--t1);background:var(--teal-jemna);color:var(--teal-deep);
  border-radius:var(--r-pill);padding:2px 8px;margin-left:auto;white-space:nowrap}

/* zaškrtávátka souhlasu: čtvereček, ne kolečko, ať je poznat, že se dá odškrtnout */
.nv-souhlas i{flex:none;width:18px;height:18px;border-radius:5px;background:var(--teal-deep);position:relative}
.nv-souhlas i::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.nv-hotovo{color:var(--teal-deep)!important;font-family:'Figtree';font-weight:700}
.nv-hotovo i{background:var(--teal)!important;position:relative}
.nv-hotovo i::after{content:"";position:absolute;left:5px;top:6px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* obrazovka s varováním Googlu: tvar, ne napodobenina */
.nv-varovani{background:#fff;border-radius:12px;padding:16px 16px;display:grid!important;gap:8px;
  border-left:3px solid var(--star)}
.nv-varovani b{font-family:'Figtree';font-weight:700;font-size:var(--t3);line-height:1.4}
.nv-odkaz{justify-self:start;color:var(--teal-deep);font-family:'Figtree';font-weight:600;font-size:var(--t3);
  border-bottom:1.5px solid var(--teal-jemna);padding-bottom:1px;
  opacity:0;animation:ukPrijde .4s ease-out forwards;animation-delay:calc(.5s + var(--i) * .5s)}
.nv-druhy{margin-left:16px}

/* ---- druhý návod: založení Search Console a Analytics ---- */
.nv-zdarma{font-style:normal;font-size:var(--t1);background:#E6F6EC;color:#14622F;
  border-radius:var(--r-pill);padding:2px 8px;margin-left:auto;white-space:nowrap}
.nv-neni{font-style:normal;font-size:var(--t1);background:var(--tint);color:var(--muted);
  border-radius:var(--r-pill);padding:2px 8px;margin-left:auto;white-space:nowrap}

.nv-adresa{display:flex!important;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.nv-pole{background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 12px;
  font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--ink-soft);
  opacity:0;transform:translateY(5px);animation:ukNajede .38s ease-out forwards;animation-delay:calc(var(--i) * .3s)}

.nv-overeni span{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:12px 12px;
  font-size:var(--t3);color:var(--ink-soft);
  opacity:0;transform:translateY(5px);animation:ukNajede .36s ease-out forwards;animation-delay:calc(var(--i) * .26s)}
.nv-overeni i{flex:none;width:18px;height:18px;border-radius:5px;background:var(--line-soft)}
/* poslední řádek je nabídka, ne další úkol — proto jiná barva a bez čtverečku */
.nv-overeni .nv-my{background:var(--teal-jemna);color:var(--teal-deep);
  font-family:'Figtree';font-weight:700;justify-content:center}

/* dva odkazy na návody nad seznamem napojení */
.navodOdkazy{display:flex;flex-wrap:wrap;gap:8px 16px;margin:-16px 0 24px}

/* ---- návštěvnost vlastního webu v adminu ---- */
.webStat{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px;margin-bottom:22px}
.webStat h2{font-family:'Figtree';font-weight:800;font-size:var(--t5);margin-bottom:16px;display:flex;
  align-items:baseline;gap:8px;flex-wrap:wrap}
.webStat h2 span{font-family:var(--cislice);font-weight:500;font-size:var(--t2);color:var(--muted)}
.webStat.prazdny{display:grid;gap:3px}
.webStat.prazdny b{font-family:'Figtree';font-weight:800;font-size:var(--t5)}
.webStat.prazdny span{color:var(--muted);font-size:var(--t4)}

.webGraf{display:flex;align-items:flex-end;gap:4px;height:96px;margin-bottom:24px}
.webSl{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.webSl i{display:block;width:100%;border-radius:5px 5px 3px 3px;background:var(--teal-deep);opacity:.85}
.webSl em{font-style:normal;font-family:var(--cislice);font-weight:500;font-size:var(--t1);color:var(--muted)}

.webDve{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.webDve h3{font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--muted);margin-bottom:8px}
.webRad{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:var(--t3);color:var(--ink-soft)}
.webRad:last-child{border-bottom:0}
.webRad span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webRad b{font-family:var(--cislice);font-weight:700;font-size:var(--t3);color:var(--ink);flex:none}
@media(max-width:620px){.webDve{grid-template-columns:1fr;gap:16px}.webStat{padding:16px 16px}}

/* Dotazy z veřejného testu. Sloupce mají pevný poměr, ať jde očima sjet
   sloupec „město": nesmysl v něm je vidět na první pohled. */

/* Seznam se roluje sám v sobě. Dokud chodilo pár dotazů denně, vešel se; po
   facebookových postech 5. 8. 2026 jich přišlo přes padesát za týden, sloupec
   povyrostl na několik obrazovek a všechno pod ním, tedy poptávky i zájemci,
   se odsunulo tak nízko, že to ve správě vypadalo jako prázdná stránka. */
.testRady{max-height:360px;overflow-y:auto}
.testSeznam{max-height:300px;overflow-y:auto}
.testRad{display:grid;grid-template-columns:106px 1fr 1fr 34px;align-items:baseline;gap:12px;
  padding:8px 8px;border-bottom:1px solid var(--line-soft);font-size:var(--t3);color:var(--ink-soft)}
.testRad:last-child{border-bottom:0}
.testRad>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.testKdy{font-family:var(--cislice);font-size:var(--t2);color:var(--muted)}
.testMesto{font-family:'Figtree';font-weight:700;color:var(--ink)}
.testRad b{font-family:var(--cislice);font-weight:700;font-size:var(--t3);color:var(--muted);text-align:right}
.testRad.slabe{background:#FCEDED;border-radius:8px;border-bottom-color:transparent}
.testRad.slabe .testMesto{color:#a3272b}
.testRad.slabe b{color:#a3272b}
.testZajemci{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.testZajemci h3{font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--muted);margin-bottom:8px}
/* Odkud poptávka přišla je doplněk k řádku, ne jeho hlavní obsah: kdyby měl
   stejnou váhu jako firma a e-mail, přebil by to podstatné. */
.poptOdkud{margin-left:8px;font-family:var(--cislice);font-style:normal;font-size:var(--t1);color:var(--muted)}

/* Vyřízené poptávky ze seznamu nemizí, protože podle nich se pozná, co už se
   obvolalo. Musí ale jít přeskočit očima, jinak by se v nich nevyřízené ztratily
   úplně stejně jako předtím, kdy se stav nedržel nikde. */
.poptRad .poptStav{flex:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:3px 12px;font-family:'Figtree';font-weight:700;font-size:var(--t1);color:var(--ink-soft);cursor:pointer}
.poptRad .poptStav:hover{background:var(--tint)}
.poptRad .poptStav:disabled{opacity:.5;cursor:default}
.poptRad.vyrizena span{color:var(--muted);text-decoration:line-through}
.poptRad.vyrizena b{color:var(--muted)}
.poptRad.vyrizena .poptStav{border-style:dashed;color:var(--muted)}
.poptRad .poptMerit{flex:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:3px 12px;margin-right:6px;font-family:'Figtree';font-weight:700;font-size:var(--t1);
  color:var(--ink-soft);cursor:pointer}
.poptRad .poptMerit:hover{background:var(--tint)}
.poptRad .poptMerit:disabled{opacity:.5;cursor:default}

/* Náhled leží pod řádkem poptávky a je to jediné místo ve správě, kde se ukazuje
   hotový mail. Musí být vidět, že jde o obsah pro klienta, ne o další ovládání,
   proto rámeček a odsazení. */
.poptNahled{margin:0 0 16px;padding:16px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--tint)}
.poptShrn{margin:0 0 12px;font-family:var(--cislice);font-size:var(--t1);color:var(--ink-soft)}
.poptTelo{max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-box)}
.poptOdeslat{margin-top:12px;border:0;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:8px 18px;font-family:'Figtree';font-weight:700;font-size:var(--t2);cursor:pointer}
.poptOdeslat:disabled{opacity:.5;cursor:default}

/* Nabídka firem, když hledání název z poptávky nepoznalo. Jsou to nálezy z map,
   ne rozhodnutí aplikace, proto vypadají jako seznam k prohlédnutí a ne jako
   potvrzovací tlačítka: klepnutí spustí měření, takže musí být poznat, co se
   vybírá — název, obor a adresa pod sebou. */
.poptKandidati{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.poptKandidat{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-box);padding:10px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.poptKandidat:hover{border-color:var(--ink);background:var(--plocha)}
.poptKandidat b{display:block;font-size:var(--t3);font-weight:600}
.poptKandidat span{display:block;margin-top:2px;font-family:var(--cislice);font-size:var(--t1);color:var(--muted)}
.poptJinak{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.poptJinak label{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;
  font-family:var(--cislice);font-size:var(--t1);color:var(--muted)}
.poptJinak input{border:1px solid var(--line);border-radius:var(--r-box);padding:8px 12px;
  font:inherit;color:var(--ink);background:#fff}
.poptJinak button{flex:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:8px 16px;font-family:'Figtree';font-weight:600;font-size:var(--t2);cursor:pointer;color:var(--ink)}
.poptJinak button:hover{background:var(--plocha)}

/* Chyby z provozu. Červená hlavička je tu schválně: blok se kreslí jen když
   nějaká chyba je, takže musí být poznat, že to není další statistika. */
.chybyStat h2{color:#a3272b}
.chybyStat h2 span{color:#a3272b}
.chybyStat .webRad span{color:#a3272b}
@media(max-width:620px){
  .testRad{grid-template-columns:1fr 1fr 34px}
  .testKdy{grid-column:1/-1;padding-bottom:2px}
}

/* ---- přihlášení Googlem ----
   Podoba je daná Googlem (developers.google.com/identity/branding-guidelines),
   ne naším vkusem: bílá výplň, obrys #747775 1 px dovnitř, text #1F1F1F,
   odsazení 12 / 10 / 12 a značka v původních barvách bez úprav. Text smí být
   přeložený, „Pokračovat přes Google" odpovídá povolenému Continue with Google.
   Jediná odchylka: písmo Google Sans Medium není pro třetí strany k dispozici,
   proto naše Figtree v odpovídající váze. */
.gbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;padding:0 12px;border:1px solid #747775;border-radius:var(--r-pill);
  background:#FFFFFF;color:#1F1F1F;font-family:'Figtree',system-ui,sans-serif;font-weight:500;
  font-size:14px;line-height:20px;cursor:pointer;transition:background .15s}
.gbtn:hover{background:#F7F8F8}
.gbtn:active{background:#F0F1F1}
.gbtn img{flex:none;width:20px;height:20px}


/* ---- co se změnilo od začátku ----
   Rozdíl proti stavu při převzetí firmy. Schválně to nejsou dlaždice se
   zvýrazněným číslem: každý řádek je věta „z tolika na tolik" a čísla jsou
   v mono, protože to jsou data, ne titulky. Barva je na hodnotě „teď", ne na
   celém řádku, ať zhoršení nekřičí přes celou stránku. */
.odzac{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 24px;margin-bottom:22px}
.ozvrch{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.ozvrch h2{font-family:'Figtree';font-weight:700;font-size:var(--t5);margin:0}
.ozod{font-family:var(--cislice);font-size:var(--t2);color:var(--muted);margin-left:auto}
.ozrad{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.ozrad:first-child{border-top:0}
.ozpopis{font-size:var(--t4);color:var(--ink-soft);min-width:0}
.ozcisla{display:flex;align-items:baseline;gap:8px;margin-left:auto;white-space:nowrap}
.ozcisla b{font-family:var(--cislice);font-weight:500;font-size:var(--t4)}
.ozteh{color:var(--muted)}
.ozsip{color:var(--line);font-size:var(--t3)}
.lip .ozted{color:#227A4B}
.hur .ozted{color:#B4342B}
@media(max-width:520px){
  .odzac{padding:16px 16px}
  .ozod{margin-left:0;width:100%}
  .ozrad{flex-wrap:wrap;gap:4px}
  .ozcisla{margin-left:auto}
}

/* ---- lákadlo pod sdíleným reportem ----
   Report si klient přepošle společníkovi nebo účetní, takže ho čte někdo, kdo
   o nás nikdy neslyšel. Je to jediné místo, kde se s námi potká; blok je proto
   vysvětlující, ne prodejní, a tlačítko vede na jedinou věc, co jde vyzkoušet
   bez registrace. */
.sdlak{margin:32px 0 0;padding:24px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--tint);text-align:center}
.sdlak p{margin:0 0 16px;font-size:var(--t4);color:var(--ink-soft);line-height:1.7;
  max-width:52ch;margin-left:auto;margin-right:auto}
.sdlak .btn{background:#fff}
@media(max-width:620px){
  .sdlak{padding:16px 16px}
  .sdlak .btn{width:100%}
}

/* Text jen pro odečítač. Holé znaky ★ přečte jako „černá hvězda" pětkrát za
   sebou, a tlačítka ve frontě se jmenovala všechna stejně, takže z výpisu
   ovládacích prvků nešlo poznat, které recenze se týkají. */
.jenprocteni{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- kde vás najdou (obce z mřížky) ----
   Mřížka je pravdivá, ale mluví v bodech. Tohle je totéž jako věta o práci:
   jeden řádek na obec, barva stejná jako v legendě nad mřížkou, ať to spolu
   drží. Obce, kde firma není, jsou dole a nekřičí: je to zpráva, ne poplach. */
.obce{margin:24px 0 0}
.obce .napoveda{margin:0 0 12px}
.obcerady{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.obcerad{display:flex;align-items:baseline;gap:8px;padding:12px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.obcnazev{font-weight:600;font-size:var(--t4);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obcpoz{font-family:var(--cislice);font-weight:500;font-size:var(--t4);margin-left:auto;white-space:nowrap}
.obcbody{font-family:var(--cislice);font-size:var(--t1);color:var(--muted);white-space:nowrap}
.obcerad.dobre .obcpoz{color:#17A34A}
.obcerad.stredne .obcpoz{color:#C07A05}
.obcerad.spatne .obcpoz{color:#E5484D}
.obcerad.mimo{background:var(--tint);border-style:dashed}
.obcerad.mimo .obcnazev,.obcerad.mimo .obcpoz{color:var(--muted);font-weight:500}
@media(max-width:520px){
  .obcerady{grid-template-columns:1fr}
}

/* Odeslat hned, nebo až ráno. Druhá možnost je tišší: je to odbočka pro toho,
   kdo končí večer, ne rovnocenná volba, u které by se měl každý rozhodovat. */
.recpak{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.recpak .btn{width:auto;min-height:42px;padding:8px 16px;font-size:var(--t3)}
.recpak span{font-size:var(--t3);color:var(--muted)}

/* ---- úklid rytmu, 2. 8. 2026 ----
   Tři věci, které dělaly z aplikace lepenou stránku: vysvětlivky bez jediného
   pravidla, plná šířka na jedno číslo a ozdobná grafika okolo dat. */

/* `.napoveda` se používá na osmatřiceti místech a NEMĚLA vlastní pravidlo, jen
   šest kontextových výjimek. Všude jinde se vykreslovala jako obyčejný odstavec
   ve velikosti běžného textu, takže vysvětlivka vypadala stejně důležitě jako
   obsah. Tohle je ta chybějící definice: menší, tišší, s délkou řádku, která se
   dá číst, a s odsazením navázaným na prvek nad ní, ne na nic. */
.napoveda{font-size:var(--t3);line-height:1.6;color:var(--muted);max-width:62ch;margin:8px 0 0}
.napoveda:first-child{margin-top:0}
.card>.napoveda:last-child,.panel>.napoveda:last-child{margin-bottom:0}

/* Řádek „Direct — 9 lidí" nepotřebuje osmnáct pixelů nahoře a dole ani celou
   šířku obrazovky. Jsou to dvojice název a číslo, takže se do stejného místa
   vejdou dvě vedle sebe a seznam přestane být sloupec vzduchu. */
.radky .r{padding:12px 16px}
.radky.dvojice{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0}
.radky.dvojice .r{border-right:1px solid var(--line-soft)}
.radky.dvojice .r:nth-child(even){border-right:0}
@media(max-width:640px){
  .radky.dvojice{grid-template-columns:1fr}
  .radky.dvojice .r{border-right:0}
}

/* Karta „Jedna věc čeká" nesla jednu větu a zabírala výšku půl obrazovky.
   Zmenšeno na to, čím doopravdy je: řádek s ikonou, větou a tlačítkem. */
.ted{padding:16px 24px;gap:16px}
.ted .ikona{width:44px;height:44px;flex:none}
.ted .ikona svg{width:22px;height:22px}
.ted h2{font-size:var(--t5);margin:0 0 2px}
.ted .txt p{font-size:var(--t4);color:var(--muted);margin:0}
.ted .btn{width:auto;min-height:44px;padding:12px 16px;font-size:var(--t4)}

/* Rytmus mezi bloky sekce. Dřív si každý blok nosil vlastní okraj, takže mezery
   skákaly podle toho, co zrovna bylo vidět. */
.list>#ted,.list>#odZacatku,.list>#tyden,.list>#metriky,.list>#ukoly,.list>#rozjezd{margin-bottom:16px}
.list>div:empty{display:none;margin:0}

/* ---- strop šířky obsahu, 2. 8. 2026 ----
   `.dpage` mělo `max-width:none`, takže se na širokém monitoru roztáhla každá
   karta od kraje ke kraji. Řádek deníku s jednou větou byl dlouhý 1500 px
   a tabulka o pěti doménách zabírala celou obrazovku. Strop je 1120 px:
   dost na mřížku pozic i na srovnání s konkurencí, a zároveň se řádek textu
   dá přečíst, aniž oko putovalo přes celý stůl.

   Strop napřed visel na `.shell .dpage`, jenže postranní sloupec má jen
   přehled. Stránky aplikace, správa, náhled AI a návrh konkurence používají
   `.dpage` samotné, takže na ně strop nesedal a zůstaly roztažené od kraje
   ke kraji. Patří na `.dpage`, ne na obal. */
/* 🔴 STROP ŠÍŘKY BYL ŠPATNĚ POCHOPENÁ VÝTKA. Tomáš řekl „ve většině stránek
   je full bleed na totální píčoviny, které ani nemusí být tak velké" a my to
   přečetli jako „osekat šířku". Myslel opak: vadí mu, že se přes celou šířku
   roztahují maličkosti — ne že má být obsah v úzkém sloupci. Upřesnil to takhle:
   „ta hlavička má být full bleed naopak i ty další věci mají být full bleed
   ale ty karty že můžou být menší, ty sekce můžou být i vedle sebe když se vejdou."

   Šířka se tedy nestropuje. Místo toho se na širokém monitoru sekce rozdělí
   do dvou sloupců, takže karta je užší a plocha se využije. Dlouhý text si
   čitelnost hlídá sám přes `max-width` v `ch` u `.napoveda`. */
.dpage{max-width:none;margin-left:0;margin-right:0}

/* ---- samostatné stránky aplikace ----
   🔴 `.dpage` se nestropuje schválně, protože v přehledu jí šířku ohraničuje
   postranní sloupec. `aplikace.html` ale sloupec nemá, je nad ní jen úzká
   lišta, takže tam `max-width:none` znamenalo
   řádek textu přes 1 380 px a karty od kraje ke kraji. Průchod aplikací to
   u `aplikace.html` zapsal jako výjimku, které se nerozumí; tohle je ta
   příčina.

   Selektor sedí jen na ně: v přehledu je `.dpage` uvnitř `.shell`, tady je
   přímo v `body`. Šířka je stejná, jakou má obsah přehledu na 1440 px, takže
   obě stránky vypadají jako tatáž aplikace. Lišta se zarovnává s ním, jinak
   by značka stála o sto pixelů vlevo od obsahu pod ní. */
body.app>main.dpage{max-width:1120px;margin:0 auto}
body.app>.lista>.lin{max-width:1120px;margin:0 auto}

/* ---- mřížka sekce Recenze ----
   🔴 Dva sloupce s automatickým plněním tu dělaly totéž co dřív na Domů:
   fronta, vyřízené, sbírání recenzí a poslané prosby se naskládaly do levého
   sloupce, vpravo stál jediný seznam recenzí a pod ním zbývalo přes sedm set
   pixelů prázdna.

   Přiřazení je proto natvrdo a podle důležitosti, ne podle pořadí v HTML.
   Od 8. 8. 2026 je fronta vodorovný pás, takže úzký sloupec vedle ní nemá co
   držet a rozvržení je tohle:
       [        fronta ke schválení přes celou šířku       ]
       [   sbírání recenzí a QR 3   ][ recenze z Googlu 1  ]
       [                vyřízené 4                         ]
   Sbírání recenzí je jediná věc, kterou klient udělá sám, a stálo úplně dole
   pod seznamem recenzí. Seznam recenzí je naopak jen k nahlédnutí a je sbalený,
   takže mu úzký pruh stačí.

   🔴 Pozor na jména: `#naseRecenze` je seznam recenzí z Googlu, `#recenze`
   jsou nástroje na jejich sbírání. Napoprvé jsem si to prohodil a do úzkého
   pruhu spadl QR kód s formulářem.

   `align-items:start` a ne `stretch`: v řadě stojí dvě karty a která z nich
   bude vyšší, závisí na tom, kolik toho zrovna čeká. Natahovat tu nižší
   znamená prázdno uvnitř karty. */
@media(min-width:1020px){
  /* `.list.on{display:block}` má vyšší specificitu, proto i tady `.on`. */
  #list-schvaleni.on{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;align-items:start;grid-auto-flow:row dense}
  #list-schvaleni.on>*{min-width:0;margin-bottom:0;grid-column:1/-1}
  #list-schvaleni.on>div:empty{display:none}
  #list-schvaleni.on #recenze{grid-column:span 3}
  #list-schvaleni.on #naseRecenze{grid-column:span 1}
}
@media(min-width:1400px){
  #list-schvaleni.on{grid-template-columns:repeat(6,minmax(0,1fr))}
  #list-schvaleni.on #recenze{grid-column:span 4}
  #list-schvaleni.on #naseRecenze{grid-column:span 2}
}

/* Co pro vás děláme: řádkový seznam přes dvě obrazovky, kde každý řádek nesl
   jen ikonu, větu a štítek. Tomáš rozhodl 8. 8. 2026 na mřížku karet — služby
   nejsou nastavení, které se odshora projíždí, ale výčet, ze kterého se čte
   naráz, co všechno pro klienta běží.

   Skupina zůstává panelem s nadpisem, karty leží uvnitř na jeho ploše.
   Struktura řádku se nemění, mění se jen jeho zobrazení. */
/* Panel skupiny přestává být kartou — kartu nese každá služba zvlášť. Jinak by
   to zase byla karta v kartě, jen ve větším. */
#sluzby .panel{background:none;box-shadow:none;padding:0;margin-bottom:28px}
#sluzby .panel .pvrch{border-bottom:0;padding-bottom:0;margin-bottom:4px}
#sluzby .napoj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  background:none;box-shadow:none;overflow:visible}
#sluzby .napoj>.rad{position:relative;flex-direction:column;align-items:flex-start;
  gap:10px;flex-wrap:nowrap;border-bottom:0;min-height:172px;padding:24px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow)}
#sluzby .napoj>.rad .ikona{width:44px;height:44px;border-radius:14px}
#sluzby .rad .txt{flex:none;min-width:0;width:100%}
/* Místo pro kolečko s „i" si dělá jen název, ne celá karta — jinak by popis
   končil o čtyřicet pixelů dřív, než musí. */
#sluzby .rad .txt b{display:block;font-size:var(--t5);margin-bottom:4px;padding-right:32px}
/* Štítek je odpověď na „běží mi to?", takže patří na dolní hranu karty, kde ho
   oko najde na stejném místě u všech. */
#sluzby .rad .znacka{position:static;margin-top:auto}
#sluzby .rad .iBtn{position:absolute;top:18px;right:18px}
@media(max-width:760px){
  #sluzby .napoj{grid-template-columns:minmax(0,1fr)}
}

/* ---- mřížka sekce Domů ----
   🔴 Dva sloupce s automatickým plněním nešly srovnat. Karty mají různou výšku,
   plnění je nezná, a pod tou kratší proto zůstávala díra až do konce té dlouhé
   vedle ní. Šest sloupců a pevné šířky karet ten problém odstraňují jinak:
   v každé řadě stojí široká karta vedle úzké a obě se dorovnají na stejnou
   výšku, takže spodní hrany sedí na jedné lince.

   Rozvržení je záměrně nepravidelné, jako v referenci:
       [ mřížka 2 ][  žebříček AI 4  ]
       [ odkud chodí 4 ][ deník 2 ]
       [       sezónnost 6          ]
       [        rozjezd 6           ]
   Střídání úzká/široká drží rytmus a přitom to není šachovnice ze stejných
   dlaždic. Dvojice nejsou náhodné, jsou párované podle toho, jestli karta umí
   vyplnit výšku: mapa i sloupcový graf rostou, žebříček a deník ne. Kdyby
   stály vedle sebe dvě, které růst neumí, zbyde v té nižší prázdno.

   Sezónnost je přes celou šířku, protože dvanáct sloupců potřebuje místo.
   Rozjezd a úkoly taky, ale z jiného důvodu: obojí občas zmizí (rozjezd po
   dokončení, úkoly když běží report) a v postranní pozici by po nich zbyla
   díra. */
@media(min-width:1020px){
  #list-domu.on{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;grid-auto-flow:row dense}
  /* Wrapper `.vedle` mizí a jeho karty se řadí přímo do mřížky sekce. Dokud
     byl vlastní mřížkou, šlo rozvrhnout jen jeho jako celek a uvnitř běžel
     druhý, nezávislý tok — právě ten dělal ty díry. */
  #list-domu.on>.vedle{display:contents}
  #list-domu.on>*,#list-domu.on>.vedle>*{min-width:0;margin-bottom:0;grid-column:1/-1}
  #list-domu.on>div:empty,#list-domu.on>.vedle>div:empty{display:none}
  /* Karta musí vyplnit buňku, jinak by se dorovnala jen buňka a karta by v ní
     plavala nahoře. */
  #list-domu.on .card,#list-domu.on .rozjezd{height:100%}
  /* Sekce v selektoru není na okrasu: `#list-domu.on>*` má vyšší váhu než
     samotné `#mrizkaDomu`, takže by šířka přes celou řadu přebila span. */
  #list-domu.on #mrizkaDomu,#list-domu.on #zdrojeDomu,#list-domu.on #aiDomu,
  #list-domu.on #denik{grid-column:span 2}
}

@media(min-width:1400px){
  #list-domu.on{grid-template-columns:repeat(6,minmax(0,1fr))}
  #list-domu.on #denik{grid-column:span 2}
  #list-domu.on #zdrojeDomu{grid-column:span 4}
  /* Mřížka pozic je jediné místo, kde klient vidí sám sebe na mapě, a na dvou
     sloupcích ze šesti z ní zbyl šedý čtverec s puntíky namačkanými na sebe.
     Půl na půl s žebříčkem: mapa je čitelná a žebříčku stačí na řádek pořadí,
     jméno, pruh a procento. */
  #list-domu.on #mrizkaDomu,#list-domu.on #aiDomu{grid-column:span 3}
}

/* 🔴 Spany jsou spárované napevno, ale karty se vykreslují podle dat. Když
   se nenačte „Odkud k vám lidé chodí" (rozbité Analytics, což je i případ
   účtu, na kterém se to měří), zůstane vedle deníku prázdná půlka řádku —
   na šesti sloupcích čtyři prázdné. Deník si ji proto vezme celou a rozdělí
   se uvnitř na dva sloupce, ať v ní stojí obsah, ne vzduch. Stejné dělení
   jako mezi 900 a 1020 px, kde má z téhož důvodu celou šířku. */
@media(min-width:1020px){
  #list-domu.on:not(:has(#zdrojeDomu>*)) #denik{grid-column:1/-1}
  #list-domu.on:not(:has(#zdrojeDomu>*)) .denik{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
  #list-domu.on:not(:has(#zdrojeDomu>*)) .denik>.odesHl,
  #list-domu.on:not(:has(#zdrojeDomu>*)) .denik>.mdvrch{grid-column:1 / -1}
}

/* Úvodní odstavce sekcí ležely holé na šedém podkladu, zatímco všechno ostatní
   kolem stálo v kartě — Odkazy, AI, Napojení, Platby, Služby a hlavička Výkonu.
   Tomáš: „ty úvodní odstavce zataj do karty." Referencí byl Google Analytics,
   kde na podkladu neplave nic.

   Strop šířky se ruší schválně: `.napoveda` má 62ch a `.vysvetleni` 64ch, což
   by z karty udělalo úzký pruh vedle širokých karet pod ní. Od 1400 px stejně
   sekce běží ve dvou sloupcích, takže řádek vyjde kolem 70 znaků sám. */
.list > .uvodtext,
.list > .napoveda.vysvetleni,
.list > div > .uvodtext:first-child,
.list > div > .napoveda.vysvetleni:first-child{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 16px;margin:0 0 12px;max-width:none}

/* Seznamy, kde je na řádku jen jméno a jedno číslo, nemají důvod stát pod
   sebou v jednom sloupci. Deník a odkazující domény jsou přesně tenhle případ:
   krátký text vlevo, drobný údaj vpravo.

   🔴 Zdroje AI sem patřily do 4. 8. 2026, dokud byla karta modelu široká přes
   půl sekce. V pásu má karta 236 px a dva sloupce se do ní nevejdou: track
   `1fr` se u grid položky s `min-width:auto` neumí zmenšit pod obsah, takže se
   odkaz roztáhl na 787 px a počet zmínek za ním vyjel z karty ven, kde ho
   `overflow:hidden` uřízlo. Ellipsis na `span` to nezachrání, ten dostane
   šířku až po tracku. */
.denik .dz{padding-top:var(--s2);padding-bottom:var(--s2)}
/* Horní hranice je tu schválně: deník je dvousloupcový jen tam, kde má celou
   šířku. Od 1020 px stojí v mřížce Domů na dvou sloupcích ze šesti a druhé
   dělení uvnitř by z něj udělalo sloupečky po třech slovech. */
@media(min-width:900px) and (max-width:1019px){
  .denik{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
  .denik>.odesHl,.denik>.mdvrch{grid-column:1 / -1}
}

/* Odkud lidé chodí. Pět zdrojů pod sebou jako řádky byl sloupec vzduchu;
   svislé sloupce se značkami dole se přečtou na jeden pohled a je to jediné
   místo na Domů, kde je vidět poměr, ne jen pořadí. */
.zdroje{display:flex;flex-direction:column}
.zdcelkem{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.zdcelkem b{font-family:'Figtree';font-weight:800;font-size:var(--t8);letter-spacing:-.035em;
  line-height:1;color:var(--ink)}
.zdcelkem span{font-size:var(--t2);color:var(--muted)}
/* 🔴 Výška sloupce je v procentech, takže se musí mít o co opřít. Napřed tu
   stálo `align-items:end`, které sloupci zabránilo vyplnit buňku — stopa
   `1fr` tím zůstala podle obsahu, procenta neměla základ a všech pět sloupců
   spadlo na `min-height`, tedy na proužek. Řetěz musí být definovaný celý:
   karta se v řádku mřížky natáhne, `.zdgraf` si vezme zbytek karty a sloupec
   se v ní natáhne taky. Teprve pak procenta něco znamenají. */
.zdgraf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;
  flex:1 1 auto;min-height:158px;margin-top:16px}
.zdsl{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-width:0;text-align:center}
/* Číslo patří ke svému sloupci, ne do řádku nad grafem. Pásmo je proto sloupec
   zarovnaný ke dnu: nejdřív doroste sloupec, hned nad ním sedí jeho číslo. */
.zdzona{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-height:0}
.zdc{font-family:'Figtree';font-weight:700;font-size:var(--t3);color:var(--ink);line-height:1;flex:none}
.zdpruh{display:block;width:100%;flex:none;border-radius:8px 8px 3px 3px;
  background:color-mix(in srgb,var(--barva) 78%,#fff)}
.zdjm{display:flex;flex-direction:column;align-items:center;gap:5px;font-style:normal;
  font-size:var(--t1);color:var(--muted);line-height:1.3;
  border-top:1px solid var(--line-soft);padding-top:8px}
.zdjm>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Značka služby. Kreslí se v `znacky.js`, nestahuje se — podrobnosti tam.
   Obal je průhledný, protože si každá značka nese vlastní tvar: Facebook
   kolečko, Instagram čtverec, Google samotné G. Barevný čtvereček je jen
   u monogramu, tedy tam, kde značku neznáme. */
/* 🔴 Třída se nesmí jmenovat `.znak`. Tak se totiž jmenuje značka na načítací
   obrazovce (`.stinitko .znak`) i v hlavičce sdíleného reportu (`.sdhlava .znak`)
   a šířka 22 px z ní udělala čtvereček, ve kterém se „Moje viditelnost"
   zalomilo na dva řádky. Přesně ta kolize, před kterou varuje CLAUDE.md. */
.odzn{width:22px;height:22px;flex:none;display:grid;place-items:center}
.odzn svg,.odzn .znaksvg{width:22px;height:22px;display:block;object-fit:contain}
.odzn{position:relative}
/* 🔴 Písmeno je tmavé na světlém nádechu barvy, ne bílé na plné. Bílá na
   plné barvě vycházela u Googlu 3,1:1, u zelené 2,9:1 — tedy pod AA, a to
   u barev, které si aplikace nevybírá: půlka jich chodí z názvu domény.
   Takhle projde jakákoli barva včetně těch, které přibudou později. */
.odzn b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:color-mix(in srgb,var(--znakbarva,var(--teal-deep)) 17%,#fff);
  color:color-mix(in srgb,var(--znakbarva,var(--teal-deep)) 62%,var(--ink));
  font-family:'Figtree';font-weight:800;font-size:var(--t1);line-height:1}
/* Stažené logo lehne na monogram. Bílá podložka je tam proto, že favicony
   bývají průhledné a bez ní by pod tmavým logem prosvítalo písmeno. */
.znakobr{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:7px;background:#fff;padding:1px}

/* Zdroj návštěv ve Výkonu: odznak před názvem, stejně jako v kartě na Domů. */
.zdrRad{display:flex;align-items:center;gap:9px;min-width:0}

/* Odznak v řádku citace je menší, protože stojí uvnitř řádku textu. */
/* Menší než odznak v žebříčku, ale ne pod škálu písma: písmeno zůstává na
   `--t1`, zmenšuje se jen rámeček kolem něj. */
.cznak,.cznak .znaksvg,.cznak b{width:18px;height:18px}
.cznak b{border-radius:5px}
.aiCit .cd{display:flex;align-items:center;gap:7px;min-width:0}

/* Řádek konkurenta ve srovnání: odznak před jménem, ať se dvojice čte stejně
   jako v žebříčku AI. */
.srovnani .rad>.odzn{margin-right:2px}

/* Kterých modelů se ptáme. Vedle žebříčku odpovídá na otázku, co je vlastně
   „AI" — jméno samo o sobě neřekne nic, značka ano. */
.modelpas{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 16px;
  font-size:var(--t2);color:var(--muted)}
.modelpas>span:first-child{font-family:'Figtree';font-weight:700;font-size:var(--t1);
  letter-spacing:.07em;text-transform:uppercase;margin-right:2px}
.modelznak{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.modelznak .odzn,.modelznak .odzn svg,.modelznak .odzn b{width:18px;height:18px}
.modelznak .odzn b{border-radius:6px}
@media(max-width:620px){.zdgraf{gap:6px;min-height:120px}}

/* Hlavička karty na Domů: název vlevo, odkaz na podrobnosti vpravo.
   🔴 Pravidlo bylo zapsané jako `.mrizkaDomu .mdvrch`, takže flex dostala
   jedině mřížka. Žebříček AI a sezónnost mají tutéž značku, ale bez pravidla
   se `.mdvrch` chovala jako blok a „Podrobně" spadlo pod nadpis na vlastní
   řádek. Dvě karty vedle sebe pak měly každá jinou hlavičku. */
.mdvrch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mdvrch .sekcnadpis{margin:0}
.mdvic{font-size:var(--t3);color:var(--teal-deep);text-decoration:none;font-weight:600;white-space:nowrap}
.mdvic:hover{text-decoration:underline}
/* Deník má rohy karty na sobě samém, hlavička proto potřebuje vlastní odsazení
   — a musí se držet stejné svislice jako řádky pod ní, ty se na telefonu
   zužují na 16 px. */
.denik>.mdvrch{padding:16px 24px 0;margin-bottom:6px}
@media(max-width:520px){.denik>.mdvrch{padding:12px 16px 0}}
/* Na Domů je mřížka widget, ne hlavní obsah: bez stropu se roztáhla přes celý
   pravý sloupec a spolkla obrazovku. Podrobnou má klient ve Výkonu, tady jde
   jen o to na první pohled vidět, kolik bodů je zelených. */
.mrizkaDomu .mrizkaBody{margin:0;max-width:210px;gap:5px;padding:12px}
/* Widget na Domů má mapu jako Výkon, jen nižší. Velikost bodů se nesahá:
   Leaflet ji drží přes iconSize [34,34] v pozice.js, takže samotné CSS by
   zmenšilo jen vnitřek a body by se rozjely mimo svůj střed. */
/* V mřížce sekce se karty v řádku dorovnávají na stejnou výšku. Mapa proto
   nemá pevných 190 px, ale zabere to, co v kartě zbyde — jinak by se pod ní
   ve vyšší kartě dělalo prázdno. */
/* 🔴 `flex:1` je zkratka za `1 1 0%`, takže by nulový základ přebil výšku
   a mapa se v kartě srazila na proužek. Musí to být `auto`. */
.mdmapa{height:190px;flex:1 1 auto;border-radius:var(--r);overflow:hidden;background:#F4F9F9}
.mrizkaDomu{display:flex;flex-direction:column}
.mdmapa .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.82)}
.mrizkaDomu .mrizkaBody .bod{font-size:var(--t1)}
.mrizkaDomu .mdleg{font-size:var(--t1)}
.mdleg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:16px 0 0;
  font-size:var(--t2);color:var(--muted)}
.mdb{width:9px;height:9px;border-radius:50%;flex:none;margin-left:8px}
.mdb:first-child{margin-left:0}
.mdb.a{background:#17A34A}
.mdb.b{background:#EF9F06}
.mdb.c{background:#E5484D}

/* Výsledky vyhledávače u měřené otázky. Vlastní řádek pro klientovu firmu
   v mapě: bez zvýraznění se v trojici bezejmenných řádků ztratí. */
.srp .r.ja{background:var(--teal-jemna)}
.srp .r.ja .l b{color:var(--teal-deep)}
.srp .r.ja .castka{font-size:var(--t3);color:var(--teal-deep)}

.recvolba{display:flex;gap:10px;align-items:flex-start;padding:10px 0}
.recvolba input{margin-top:3px;flex:none}
.recvolba span{font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.recvolba b{color:var(--ink);font-weight:600}