/* ==========================================================================
   Náskok od Noční dílny: komponenty aplikace (D-naskok-DS-03, Eva, 2026-09-27)
   KOPIE pro aplikaci (D-naskok-DS-06c) z TheTeam/workspace/dev/naskok/design/aplikace.css (beze změny do oddílu
   „Aplikace DS-06c“ na konci). Načítá se po naskok.css jen na obrazovkách aplikace (zaklad.html, `aplikace`).
   Oddíl DS-06c dává vzhled třídám šablon RC (pruchod.html, slozka/*, dily/*), na které se spoléhají skripty a QA.
   ========================================================================== */
.app { padding-block: var(--m-4) var(--m-8); }
.app__obal { max-width: 46rem; margin-inline: auto; padding-inline: var(--okraj-stranky); }
.app__obal--siroky { max-width: 64rem; }
.app h1 { font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); margin: var(--m-4) 0 var(--m-2); }
.app__ziskate { font-size: var(--velikost-l); color: var(--tlumeny); margin: 0 0 var(--m-5); max-width: 40rem; }
.app__blok { margin-top: var(--m-5); }
.app__blok > h2 { font-size: var(--velikost-h3); margin-bottom: var(--m-3); letter-spacing: -0.012em; }
.app__dvasloupce { display: grid; gap: var(--m-5); }
@media (min-width: 64rem) {
  .app__dvasloupce { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m-6); align-items: start; }
  .app__dvasloupce--panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
}
.karta { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--polomer-karta); padding: var(--m-5) var(--m-4); box-shadow: var(--n-stin-1); }
@media (min-width: 48rem) { .karta { padding: var(--m-5); } }
.karta > h2, .karta > h3 { font-size: var(--velikost-h3); margin-bottom: var(--m-3); }
.karta + .karta, .karta + .rozbal, .rozdily + .karta { margin-top: var(--m-4); }
.karta--mata { background: var(--n-mata); box-shadow: none; }
.karta--ok { background: var(--uspech-plocha); border-color: color-mix(in srgb, var(--n-jasne) 40%, var(--linka)); box-shadow: none; }
.tlumeny { color: var(--tlumeny); }
.drobne { font-size: var(--velikost-s); color: var(--tlumeny); }
.seznam-teckou { list-style: none; display: grid; gap: 0.5rem; }
.seznam-teckou li { position: relative; padding-left: 1.1rem; }
.seznam-teckou li::before { content: ""; position: absolute; left: 0.1rem; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--produkt-akcent); }
.seznam-fajfek { list-style: none; display: grid; gap: 0.6rem; }
.seznam-fajfek li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; }
.seznam-fajfek .ikona { color: var(--n-jasne); width: 1.25rem; height: 1.25rem; stroke-width: 2.25; margin-top: 0.15rem; }
.akce-radek { display: flex; flex-wrap: wrap; gap: var(--m-3) var(--m-4); align-items: center; }
.odkazy-vedlejsi { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--m-5); margin-top: var(--m-3); }
.odkazy-vedlejsi a, .odkaz-tlacitko { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; color: var(--produkt-text);
  background: none; border: 0; padding: 0; font: 600 1rem/1.3 var(--pismo-text); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-align: left; }
.odkaz-tlacitko:hover, .odkazy-vedlejsi a:hover { text-decoration-thickness: 2px; }
.odkaz-tlacitko--nebezpecne { color: var(--chyba); }
.tlacitko--nebezpecne { background: var(--chyba); color: var(--na-chybe); }
.tlacitko--nebezpecne:hover { background: var(--chyba-najeti); }
.tlacitko--nebezpecne:focus-visible, .tlacitko--nebezpecne-obrys:focus-visible, .odkaz-tlacitko--nebezpecne:focus-visible { outline-color: var(--chyba); }
.tlacitko--nebezpecne-obrys { background: var(--plocha); color: var(--chyba); border-color: currentColor; }
.tlacitko--nebezpecne-obrys:hover { background: var(--chyba-plocha); }
.tlacitko[aria-disabled="true"], .tlacitko:disabled { background: var(--neaktivni-plocha); color: var(--neaktivni-text); border-color: transparent; box-shadow: none; cursor: not-allowed; }

/* ---------- Ukazatel cesty ---------- */
.cesta { margin: 0 0 var(--m-2); }
.cesta ol { list-style: none; display: grid; grid-template-columns: repeat(var(--kroku, 4), minmax(0, 1fr)); gap: 4px; }
.cesta__krok > a, .cesta__krok > span { display: block; height: 6px; border-radius: 999px; background: var(--linka); text-decoration: none; }
.cesta__krok[data-stav="hotovo"] > * { background: var(--produkt); }
.cesta__krok[data-stav="aktivni"] > * { background: var(--produkt); box-shadow: 0 0 0 2px var(--pozadi), 0 0 0 3.5px var(--produkt); }
.cesta__znak, .cesta__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cesta__mobil { margin: 0.5rem 0 0; font-size: var(--velikost-s); color: var(--tlumeny); }
.cesta__mobil b { color: var(--text); }
@media (min-width: 48rem) {
  .cesta ol { gap: var(--m-3); }
  .cesta__krok > a, .cesta__krok > span { height: auto; background: none; display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.6rem; align-items: center;
    padding-top: 0.6rem; border-top: 4px solid var(--linka); border-radius: 0; min-height: 2.75rem; }
  .cesta__krok[data-stav="hotovo"] > *, .cesta__krok[data-stav="aktivni"] > * { background: none; box-shadow: none; border-top-color: var(--produkt); }
  .cesta__znak, .cesta__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .cesta__znak { grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 700 0.875rem/1 var(--pismo-text);
    border: 2px solid var(--linka-pole); color: var(--tlumeny); background: var(--plocha); }
  .cesta__znak .ikona { width: 1rem; height: 1rem; stroke-width: 2.75; }
  .cesta__krok[data-stav="hotovo"] .cesta__znak { background: var(--produkt); border-color: var(--produkt); color: var(--na-produktu); }
  .cesta__krok[data-stav="aktivni"] .cesta__znak { border-color: var(--produkt); color: var(--produkt-text); }
  .cesta__text { display: contents; }
  .cesta__nazev { font-weight: 700; line-height: 1.2; color: var(--text); }
  .cesta__krok[data-stav="ceka"] .cesta__nazev { color: var(--tlumeny); font-weight: 600; }
  .cesta__stitek { font-size: var(--velikost-xs); color: var(--tlumeny); font-weight: 600; }
  .cesta__krok[data-stav="aktivni"] .cesta__stitek, .cesta__krok[data-stav="hotovo"] .cesta__stitek { color: var(--produkt-text); }
  .cesta__krok > a:hover .cesta__nazev { color: var(--produkt-text); text-decoration: underline; }
  .cesta__mobil { display: none; }
}

/* ---------- Hlavní akce a řádek „Dál…“ ---------- */
.akce { margin-top: var(--m-5); }
.akce .tlacitko--hlavni { width: 100%; }
@media (min-width: 48rem) { .akce .tlacitko--hlavni { width: auto; min-width: 16rem; } }
.dal { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.6rem 0 0; font-size: var(--velikost-s); color: var(--tlumeny); max-width: 40rem; }
.dal > .ikona { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--produkt-text); stroke-width: 2.25; }
.akce__cena { display: block; font-size: var(--velikost-s); color: var(--tlumeny); margin: 0 0 0.4rem; }
.akce__cena b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) {
  /* lepivá lišta: hlavní akce je vždy pod palcem */
  .akce--lepiva { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--okraj-stranky) * -1); padding: var(--m-3) var(--okraj-stranky) calc(var(--m-3) + env(safe-area-inset-bottom));
    background: var(--pozadi); border-top: 1px solid var(--linka); box-shadow: 0 -8px 20px -14px var(--n-stin-barva); }
  .akce--lepiva .dal { margin-top: 0.35rem; }
}

/* ---------- Průběh (doplňky ke komponentě .prubeh) ---------- */
.prubeh__cas { font: 600 var(--velikost-s)/1 var(--pismo-text); font-variant-numeric: tabular-nums; color: var(--tlumeny); }
.prubeh__krok[data-stav="chyba"] .prubeh__znak { border-color: var(--chyba); color: var(--chyba); }
.prubeh__krok[data-stav="chyba"] .prubeh__stav { color: var(--chyba); }
.prubeh__krok[data-stav="hotovo"] .prubeh__nazev { font-weight: 600; }
.prubeh__krok[data-stav="bezi"] .prubeh__znak { border-color: var(--produkt); color: var(--produkt-text); }
.prubeh__krok[data-stav="bezi"] .prubeh__znak::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--produkt); }
.prubeh__krok[data-stav="bezi"] .prubeh__stav { color: var(--produkt-text); }
.prubeh__krok[data-stav="ceka"] .prubeh__nazev { color: var(--tlumeny); font-weight: 600; }
.prubeh__krok:not([data-stav="bezi"]) .prubeh__cinnost { display: none; }
@media (prefers-reduced-motion: no-preference) { .prubeh__krok[data-stav="bezi"] .prubeh__znak::after { animation: n-dech 1.6s ease-in-out infinite; } }
.prubeh--ploche { background: none; border: 0; box-shadow: none; padding: 0; }
.prubeh__dlouho { margin-top: var(--m-3); }
.mezitim { margin-top: var(--m-4); border: 1px dashed color-mix(in srgb, var(--produkt-text) 40%, var(--linka)); border-radius: 16px; padding: var(--m-4); background: color-mix(in srgb, var(--produkt-plocha) 55%, transparent); }
.mezitim__nadpis { font: 700 var(--velikost-xs)/1.3 var(--pismo-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--produkt-text); margin: 0 0 0.5rem; }
.mezitim p { margin: 0 0 0.5rem; }
.zavreni { display: flex; gap: 0.5rem; align-items: flex-start; margin: var(--m-4) 0 0; font-size: var(--velikost-s); color: var(--tlumeny); }
.zavreni .ikona { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: none; }
.rozbal { border-top: 1px solid var(--linka); margin-top: var(--m-3); }
.rozbal > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); min-height: 2.75rem; font-weight: 700; color: var(--produkt-text); }
.rozbal > summary::-webkit-details-marker { display: none; }
.rozbal > summary .ikona { transition: transform var(--n-pohyb) var(--n-krivka); }
.rozbal[open] > summary .ikona { transform: rotate(45deg); }
.rozbal__obsah { padding-bottom: var(--m-3); color: var(--tlumeny); }

/* ---------- P02: karta inzerátu, volby CV, čip souboru ---------- */
.karta-inz__hlava { display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); margin-bottom: var(--m-3); flex-wrap: wrap; }
.karta-inz__hlava h2 { font-size: var(--velikost-h3); margin: 0; }
.vyceteno { display: grid; gap: 0.35rem; }
.vyceteno__pozice { font: 700 1.1875rem/1.25 var(--pismo-nadpis); letter-spacing: -0.012em; margin: 0; }
.vyceteno__radek { margin: 0; color: var(--tlumeny); }
.stitky { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--m-2); list-style: none; }
.stitky li { padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--produkt-plocha); color: var(--text); font-size: var(--velikost-s); }
.pozadavky { list-style: none; display: grid; margin-top: var(--m-3); border-top: 1px solid var(--linka); }
.pozadavky li { display: flex; justify-content: space-between; align-items: center; gap: var(--m-3); padding: 0.55rem 0; border-bottom: 1px solid var(--linka); font-size: var(--velikost-s); }
.pozadavky .stitek { flex: none; }
.volby { display: grid; gap: var(--m-3); }
@media (min-width: 48rem) { .volby { grid-template-columns: 1fr 1fr; } }
.volba-cv { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: start; text-align: left; width: 100%; min-height: 4.25rem; padding: var(--m-4);
  border: 1.5px solid var(--linka-pole); border-radius: 16px; background: var(--plocha); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--n-pohyb-rychly), background var(--n-pohyb-rychly); }
.volba-cv:hover { border-color: var(--produkt-text); background: color-mix(in srgb, var(--produkt-plocha) 45%, var(--plocha)); }
.volba-cv[aria-pressed="true"] { border: 2px solid var(--produkt); background: var(--produkt-plocha); }
.volba-cv__ikona { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--produkt-plocha); color: var(--produkt-text); }
.volba-cv b { display: block; margin-bottom: 0.15rem; }
.volba-cv .drobne { display: block; }
.cip { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem var(--m-4); border-radius: 14px; background: var(--uspech-plocha); }
.cip > .ikona { color: var(--n-jasne); }
.cip__text { flex: 1; min-width: 0; }
.cip__text b { display: block; overflow-wrap: anywhere; }
.vlozeny-text { display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); flex-wrap: wrap; padding: 0.75rem var(--m-4); border-radius: 14px; background: var(--plocha-2); font-size: var(--velikost-s); margin-bottom: var(--m-3); }
.pole + .pole { margin-top: var(--m-4); }
.pole__vstup--kod { font: 700 1.5rem/1 var(--pismo-text); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; max-width: 14rem; }
.volba { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; min-height: 2.75rem; padding: 0.6rem 0; cursor: pointer; }
.volba input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--produkt); }
.chyba-u-mista { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; padding: var(--m-4); border-radius: 14px; background: var(--chyba-plocha); border: 1px solid color-mix(in srgb, var(--chyba) 35%, transparent); margin-top: var(--m-3); }
.chyba-u-mista > .ikona { color: var(--chyba); stroke-width: 2.25; margin-top: 0.1rem; }
.chyba-u-mista b { display: block; margin-bottom: 0.2rem; }
.chyba-u-mista p { margin: 0; }
.chyba-u-mista .akce-radek { margin-top: var(--m-3); }
.info-u-mista { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; padding: var(--m-4); border-radius: 14px; background: var(--produkt-plocha); margin-top: var(--m-3); }
.info-u-mista > .ikona { color: var(--produkt-text); margin-top: 0.1rem; }
.info-u-mista p { margin: 0; }
.info-u-mista p + p { margin-top: 0.4rem; }
.info-u-mista--varovani { background: var(--upozorneni-plocha); }
.info-u-mista--varovani > .ikona { color: var(--upozorneni-text); }

/* ---------- Skóre jako kruh ---------- */
.skore-kruh { display: grid; grid-template-columns: auto 1fr; gap: var(--m-4); align-items: center; }
.skore-kruh__cislo { position: relative; width: 6.5rem; height: 6.5rem; }
.skore-kruh svg { width: 6.5rem; height: 6.5rem; transform: rotate(-90deg); }
.skore-kruh circle { fill: none; stroke-width: 9; }
.skore-kruh .zaklad { stroke: var(--kostra); }
.skore-kruh .hodnota { stroke: var(--produkt); stroke-linecap: round; }
.skore-kruh__cislo > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 700 2rem/1 var(--pismo-nadpis); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.skore-kruh__cislo > span small { display: block; font: 600 0.6875rem/1.4 var(--pismo-text); color: var(--tlumeny); letter-spacing: 0; }
.skore-kruh__veta { font: 700 var(--velikost-h3)/1.25 var(--pismo-nadpis); letter-spacing: -0.012em; margin: 0; }
.skore-kruh__pod { margin: 0.35rem 0 0; color: var(--tlumeny); font-size: var(--velikost-s); }

/* ---------- P05: rozdíly ---------- */
.rozdily { display: grid; gap: var(--m-3); }
.rozdil { background: var(--plocha); border: 1px solid var(--linka); border-radius: 16px; padding: var(--m-4); }
.rozdil__hlava { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.35rem; }
.rozdil__hlava h3 { font-size: 1.125rem; margin: 0; }
.stitek--chybi { background: var(--chyba-plocha); color: var(--chyba); }
.stitek--schovane { background: var(--upozorneni-plocha); color: var(--upozorneni-text); }
.stitek--nejasne { background: var(--plocha-2); color: var(--tlumeny); }
.rozdil p { margin: 0 0 0.5rem; }
.rozdil__akce { display: flex; flex-wrap: wrap; gap: var(--m-2); margin-top: var(--m-3); }
.rozdil__vysledek { margin-top: var(--m-3); padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--uspech-plocha); font-size: var(--velikost-s); }
.sede-pruhy { display: grid; gap: 0.45rem; margin-top: var(--m-3); }
.sede-pruhy span { display: block; height: 0.8rem; border-radius: 6px; background: var(--kostra); }

/* ---------- P06: díly s ukázkou ---------- */
.dily-nabidka { list-style: none; display: grid; border-top: 1px solid var(--linka); }
.dily-nabidka li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; align-items: start; padding: 0.8rem 0; border-bottom: 1px solid var(--linka); }
.dily-nabidka .ikona { color: var(--produkt-text); margin-top: 0.1rem; }
.dily-nabidka p { margin: 0; }
.dily-nabidka .odkaz-tlacitko { min-height: 2.75rem; font-size: var(--velikost-s); }

/* ---------- P09: složka ---------- */
.slozka-hlava__firma { margin: 0; color: var(--tlumeny); }
.slozka-hlava__skore { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; }
.slozka-hlava__skore b { font-variant-numeric: tabular-nums; }
.segmenty { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: var(--m-3) 0 0.4rem; }
.segmenty span { height: 8px; border-radius: 999px; background: var(--linka); }
.segmenty span[data-stav="hotovo"] { background: var(--n-jasne); }
.segmenty span[data-stav="bezi"] { background: color-mix(in srgb, var(--produkt) 45%, var(--linka)); }
.segmenty span[data-stav="chyba"] { background: var(--chyba); }
.dily-seznam { list-style: none; display: grid; margin-top: var(--m-3); border-top: 1px solid var(--linka); }
.dil-radek { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: center; min-height: 4rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--linka);
  transition: background var(--n-pohyb-pomaly) ease-out; }
.dil-radek__cislo { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--plocha-2); color: var(--tlumeny); border: 2px solid transparent; }
.dil-radek[data-stav="hotovo"] .dil-radek__cislo { background: var(--n-jasne); color: var(--plocha); }
.dil-radek[data-stav="bezi"] .dil-radek__cislo { border-color: var(--produkt); color: var(--produkt-text); background: var(--plocha); }
.dil-radek[data-stav="chyba"] .dil-radek__cislo { border-color: var(--chyba); color: var(--chyba); background: var(--chyba-plocha); }
.dil-radek__nazev { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--text); text-decoration: none; }
a.dil-radek__nazev { color: var(--text); }
a.dil-radek__nazev:hover { color: var(--produkt-text); text-decoration: underline; }
.dil-radek__stav { display: block; font-size: var(--velikost-s); color: var(--tlumeny); margin-top: -0.4rem; }
.dil-radek[data-stav="hotovo"] .dil-radek__stav { color: var(--n-jasne); font-weight: 600; }
.dil-radek[data-stav="bezi"] .dil-radek__stav { color: var(--produkt-text); }
.dil-radek[data-stav="chyba"] .dil-radek__stav { color: var(--chyba); }
.dil-radek__sipka { color: var(--tlumeny); }
.dil-radek.je-novy { background: var(--uspech-plocha); }
@media (prefers-reduced-motion: no-preference) { .dil-radek[data-stav="bezi"] .dil-radek__cislo { animation: n-dech 1.6s ease-in-out infinite; } }
.dil-radek__chyba { grid-column: 2 / -1; margin: 0.2rem 0 0.2rem; font-size: var(--velikost-s); }
.pripraveno-seznam { list-style: none; display: grid; }
.pripraveno-seznam li { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: 0.6rem; align-items: center; min-height: 3rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--linka); }
.pripraveno-seznam .znak { width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 2px solid var(--linka-pole); display: grid; place-items: center; }
.pripraveno-seznam li[data-hotovo="true"] .znak { background: var(--n-jasne); border-color: var(--n-jasne); color: var(--plocha); }
.pripraveno-seznam li[data-hotovo="true"] .text { color: var(--tlumeny); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tlumeny) 60%, transparent); }
.pripraveno-seznam .znak .ikona { width: 1rem; height: 1rem; stroke-width: 3; }
.pruh-ok { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; padding: var(--m-4); border-radius: 16px; background: var(--uspech-plocha); border: 1px solid color-mix(in srgb, var(--n-jasne) 35%, transparent); }
.pruh-ok > .ikona { color: var(--n-jasne); stroke-width: 2.25; margin-top: 0.1rem; }
.pruh-ok p { margin: 0; }
.pruh-ukazka { position: sticky; top: 0; z-index: 8; background: var(--n-poznamka); color: var(--n-na-poznamce); padding: 0.6rem var(--okraj-stranky); font-weight: 600; font-size: var(--velikost-s); text-align: center; }

/* ---------- Díly ---------- */
.dil-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--m-3); flex-wrap: wrap; }
.dil-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.dil-akce { display: flex; flex-wrap: wrap; gap: var(--m-2); margin: var(--m-4) 0; }
.dil-obsah { margin-top: var(--m-4); }
.dil-obsah .papir { font-size: 1rem; }
.dil-pata { margin-top: var(--m-5); padding-top: var(--m-4); border-top: 1px solid var(--linka); }
.dil-dalsi { display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); min-height: 3.5rem; padding: 0.75rem var(--m-4); margin-top: var(--m-4);
  border: 1px solid var(--linka); border-radius: 14px; background: var(--plocha); text-decoration: none; font-weight: 700; color: var(--text); }
.dil-dalsi:hover { border-color: var(--produkt-text); color: var(--produkt-text); }
.otazka-karta { background: var(--n-papir); border: 1px solid var(--n-papir-linka); border-radius: 14px; }
.otazka-karta > summary { list-style: none; cursor: pointer; padding: var(--m-4); display: grid; gap: 0.4rem; min-height: 2.75rem; }
.otazka-karta > summary::-webkit-details-marker { display: none; }
.otazka-karta > summary b { font-size: 1.0625rem; }
.otazka-karta__obsah { padding: 0 var(--m-4) var(--m-4); }
.otazka-karta__obsah h4 { font: 700 0.75rem/1.3 var(--pismo-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlumeny); margin: var(--m-3) 0 0.3rem; }
.otazka-karta__obsah p { margin: 0; }
.otazky-seznam { display: grid; gap: var(--m-3); }
.filtr { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: var(--m-3) 0; }
.filtr button { min-height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; border: 1.5px solid var(--linka-pole); background: var(--plocha); color: var(--text); font: 600 0.9375rem/1 var(--pismo-text); cursor: pointer; }
.filtr button[aria-pressed="true"] { background: var(--produkt); color: var(--na-produktu); border-color: var(--produkt); }

/* ---------- Dialog (na mobilu panel zdola) ---------- */
dialog.okno { border: 0; padding: 0; border-radius: var(--polomer-karta); background: var(--plocha); color: var(--text); box-shadow: var(--n-stin-2); width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog.okno::backdrop { background: var(--zavoj); }
.okno__obsah { padding: var(--m-5); }
.okno__hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--m-3); margin-bottom: var(--m-3); }
.okno__hlava h2 { font-size: var(--velikost-h3); margin: 0; }
.okno__zavrit { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--plocha-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.okno__tlacitka { display: flex; flex-direction: column-reverse; gap: var(--m-2); margin-top: var(--m-5); }
@media (min-width: 48rem) { .okno__tlacitka { flex-direction: row; justify-content: flex-end; } }
@media (max-width: 47.99rem) {
  dialog.okno { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; }
  .okno__tlacitka .tlacitko { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { dialog.okno[open] { animation: n-vyjet var(--n-pohyb) var(--n-krivka); } }
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 300; background: var(--text); color: var(--pozadi); padding: 0.75rem 1.1rem;
  border-radius: 12px; box-shadow: var(--n-stin-2); font-weight: 600; max-width: calc(100vw - 2rem); }

/* ---------- E-mail (náhled) a Stripe (cizí stránka, jen prototyp) ---------- */
.emaily { display: grid; gap: var(--m-6); }
.email { max-width: 36rem; background: var(--plocha); border: 1px solid var(--linka); border-radius: 14px; overflow: hidden; }
.email__hlava { padding: var(--m-3) var(--m-4); background: var(--plocha-2); font-size: var(--velikost-s); display: grid; gap: 0.2rem; }
.email__hlava b { color: var(--text); }
.email__telo { padding: var(--m-4); font-size: 1rem; line-height: 1.6; }
.email__telo p { margin: 0 0 0.9em; }
.email__tlacitko { display: inline-block; margin: 0.25rem 0; padding: 0.7rem 1.1rem; border-radius: 10px; background: var(--produkt); color: var(--na-produktu); font-weight: 700; text-decoration: none; }
.email__kod { font: 700 1.75rem/1.2 var(--pismo-text); letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.stripe-mock { max-width: 26rem; margin: 0 auto; background: #FFFFFF; color: #1A1F36; border-radius: 12px; border: 1px solid #E3E8EE; padding: 1.5rem; font-family: system-ui, sans-serif; }
.stripe-mock p { margin: 0 0 0.5rem; }
.stripe-mock .stripe-cena { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.stripe-mock .pole-mock { border: 1px solid #C9CED6; border-radius: 6px; padding: 0.7rem; color: #4F566B; min-height: 2.75rem; margin-bottom: 0.75rem; }
.stripe-mock a.platit { display: block; margin-top: 1rem; min-height: 3rem; border-radius: 6px; background: #0A2540; color: #FFFFFF; font: 600 1rem/3rem system-ui, sans-serif; text-align: center; text-decoration: none; }
.stripe-mock a.zrusit { display: inline-flex; align-items: center; min-height: 2.75rem; color: #425466; }
.stripe-mock :focus-visible { outline: 3px solid #0A2540; outline-offset: 2px; }
/* znaky v průběhu: fajfka jen u hotového kroku, křížek u chyby */
.prubeh__znak .ikona { display: none; }
.prubeh__krok[data-stav="hotovo"] .prubeh__znak .ikona:not(.znak-chyba) { display: block; }
.prubeh__krok[data-stav="chyba"] .prubeh__znak .znak-chyba { display: block; }
.prubeh__krok[data-stav="chyba"] .prubeh__znak { background: var(--chyba-plocha); }
button.doplnte { font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
button.doplnte:hover { border-style: solid; }
.dil-obsah .papir h4 { font-size: 0.75rem; }
@media (max-width: 47.99rem) {
  .akce--lepiva .dal { font-size: 0.8125rem; line-height: 1.4; }
  .akce--lepiva .stitek--koncept { font-size: 0.625rem; padding: 0.05rem 0.4rem; }
  .akce--lepiva .akce__cena { margin-bottom: 0.3rem; }
  .akce--lepiva .tlacitko--hlavni { min-height: 3rem; }
}
.prubeh__hlava h2, .prubeh__hlava h3 { font-size: var(--velikost-h3); }
.emaily > section { min-width: 0; }
.email { overflow-wrap: anywhere; }
.mezititulek { font: 700 0.75rem/1.3 var(--pismo-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlumeny); margin: var(--m-3) 0 0.3rem !important; }
.pripraveno-seznam li:not([data-hotovo="true"]) .znak .ikona { visibility: hidden; }
/* lepivá akce i na počítači: hlavní akce je vždy vidět */
@media (min-width: 48rem) {
  .akce--lepiva { position: sticky; bottom: 0; z-index: 5; padding: var(--m-3) var(--m-4) var(--m-3); margin-inline: calc(var(--m-4) * -1);
    background: var(--pozadi); border-top: 1px solid var(--linka); box-shadow: 0 -10px 24px -18px var(--n-stin-barva); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--m-4); }
  .akce--lepiva .akce__cena { flex-basis: 100%; margin: 0; }
  .akce--lepiva .dal { margin: 0; flex: 1 1 18rem; }
}
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }


/* ==========================================================================
   Aplikace DS-06c (Eva, 2026-09-27): vzhled pro šablony aplikace
   Třídy RC (pruchod.html, slozka/*, dily/*) dostanou jazyk prototypu. Háčky js-* a data-* se nemění.
   Pravidla pro složku a díly (sl-*) jsou jen pro obrazovku: tisk dál řídí slozka.css (tahák na 1 stranu A4).
   ========================================================================== */

/* ---------- Kostra ---------- */
.app .pruchod { display: grid; gap: 0; }
.app .krok > h1, .app .sl-stranka h1 { font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); margin: var(--m-4) 0 var(--m-4); }
.app .krok > h2, .app .krok section > h2, .app .krok .karta > h2 { font-size: var(--velikost-h3); letter-spacing: -0.012em; margin: 0 0 var(--m-3); }
.app .krok > * + * { margin-top: var(--m-4); }
.app .krok > h1 + * { margin-top: 0; }
.app .podnadpis { font-size: var(--velikost-l); color: var(--tlumeny); max-width: 40rem; }
.app .napoveda, .app .mikrotext { font-size: var(--velikost-s); color: var(--tlumeny); }
.app .napoveda { margin: 0.25rem 0 0.5rem; }
.app .mikrotext { margin: 0.5rem 0 0; }
.app .body { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.app .body li::marker { color: var(--produkt-text); }
.app .nepovinne { font-weight: 400; color: var(--tlumeny); }
.app p.upozorneni { display: block; background: var(--upozorneni-plocha); color: var(--upozorneni-text); font-weight: 600; }
.app .sloupec > * + * { margin-top: var(--m-3); }
.app .sloupec > h2 { margin-bottom: var(--m-2); }
.app .dva-sloupce.dva-sloupce--panel { display: grid; gap: var(--m-5); }
@media (min-width: 64rem) { .app .dva-sloupce.dva-sloupce--panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--m-6); align-items: start; } }
.app .dva-sloupce.app__dvasloupce { gap: var(--m-5); }
.app .akce { display: grid; gap: 0.25rem; }
.app .akce > .akce-radek { margin: 0; }
.app .drobne { margin: var(--m-3) 0 0; }
.hlavicka__aplikace { margin: 0; }
.hlavicka__aplikace[hidden] { display: none; }

/* ---------- Ukazatel cesty ---------- */
.cesta ol { --kroku: 4; }
.cesta[data-kroku="3"] ol { --kroku: 3; }
.cesta__znak .ikona { display: none; }
.cesta__krok[data-stav="hotovo"] .cesta__znak .ikona { display: block; }
.cesta__krok[data-stav="hotovo"] .cesta__cislo { display: none; }
.app .cesta { margin: 0 0 var(--m-2); }
.app .cesta[hidden] { display: none; }

/* ---------- Čekání bez kolečka: pruh činnosti a uplynulý čas ---------- */
.stav-cekani { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.35rem var(--m-3); margin: var(--m-3) 0;
  padding: var(--m-3) var(--m-4); border-radius: 14px; background: var(--produkt-plocha); color: var(--text); font-weight: 600; }
.stav-cekani[hidden] { display: none; }
.stav-cekani__cinnost { grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 999px; background: var(--kostra); overflow: hidden; position: relative; }
.stav-cekani__cinnost::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--produkt); }
@media (prefers-reduced-motion: no-preference) { .stav-cekani__cinnost::after { animation: n-cinnost 1.8s var(--n-krivka) infinite; } }
@media (prefers-reduced-motion: reduce) { .stav-cekani__cinnost::after { width: 100%; opacity: 0.35; } }
.stav-cekani__cas { grid-column: 2; grid-row: 1; font: 600 var(--velikost-s)/1 var(--pismo-text); font-variant-numeric: tabular-nums; color: var(--tlumeny); }

/* ---------- Chyby, pruhy, upozornění (RC třídy v jazyce prototypu) ---------- */
.app .chyba { padding: var(--m-4); border-radius: 14px; background: var(--chyba-plocha); border: 1px solid color-mix(in srgb, var(--chyba) 35%, transparent); color: var(--text); }
.app .chyba[hidden] { display: none; }
.app .chyba > p { margin: 0; }
.app .chyba > p + p { margin-top: var(--m-3); }
.app .chyba-pole { display: block; color: var(--chyba); font-weight: 600; font-size: var(--velikost-s); margin: 0.4rem 0 0; }
.app .chyba-pole[hidden] { display: none; }
.app .ramecek { border-left: 5px solid var(--n-jasne); }
.app .ramecek h2 { font-size: var(--velikost-h4); font-family: var(--pismo-text); margin: 0 0 0.35rem; }
.app .ramecek p { margin: 0; }

/* ---------- Pole formulářů ---------- */
.app .pole { margin: 0; border: 0; padding: 0; min-width: 0; }
.app .pole + .pole { margin-top: var(--m-4); }
.app .pole > label, .app .pole > legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.app .pole input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .app .pole textarea, .app .pole select,
.app .sl-pole input, .app .sl-pole select, .app .sl-pole textarea, .app .sl-formular input:not([type="checkbox"]):not([type="radio"]),
.app .sl-dialog input:not([type="checkbox"]):not([type="radio"]), .app .sl-dialog textarea, .app .sl-dialog select {
  display: block; width: 100%; min-height: var(--vyska-tlacitka); padding: 0.75rem 1rem; border-radius: var(--polomer-pole);
  border: 1.5px solid var(--linka-pole); background: var(--plocha); color: var(--text); font: 400 1.0625rem/1.4 var(--pismo-text);
  transition: border-color var(--n-pohyb-rychly), box-shadow var(--n-pohyb-rychly); }
.app .pole textarea, .app .sl-pole textarea, .app .sl-dialog textarea { min-height: 8rem; resize: vertical; }
.app .pole input:focus-visible, .app .pole textarea:focus-visible, .app .sl-pole input:focus-visible, .app .sl-pole textarea:focus-visible,
.app .sl-formular input:focus-visible, .app .sl-dialog input:focus-visible, .app .sl-dialog textarea:focus-visible, .app .sl-dialog select:focus-visible {
  outline: none; border-color: var(--produkt-text); box-shadow: 0 0 0 3px var(--plocha), 0 0 0 6px var(--produkt-text); }
.app [aria-invalid="true"]:not([type="checkbox"]) { border: 2px solid var(--chyba) !important; }
.app input[type="file"] { display: block; width: 100%; min-height: 3.25rem; padding: 0.5rem; border: 1.5px dashed var(--linka-pole); border-radius: var(--polomer-pole);
  background: var(--plocha); color: var(--text); font: inherit; }
.app input[type="file"]::file-selector-button { min-height: 2.75rem; margin-right: 0.75rem; padding: 0 1rem; border-radius: 10px; border: 2px solid var(--produkt-text);
  background: var(--plocha); color: var(--produkt-text); font: 600 1rem/1 var(--pismo-text); cursor: pointer; }
.app input[type="checkbox"], .app input[type="radio"] { width: 1.3rem; height: 1.3rem; accent-color: var(--produkt); flex: none; }
.app .pole-zaskrt { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; margin: var(--m-3) 0 0; }
.app .pole-zaskrt input { margin: 0.7rem 0 0; }
.app .pole-zaskrt label { min-height: 2.75rem; padding: 0.5rem 0; cursor: pointer; }
.app .pod-tlacitkem { margin: 0.35rem 0 0; }
.app .odkaz-tlacitko:disabled { color: var(--neaktivni-text); text-decoration: none; cursor: not-allowed; }

/* P02: volby CV jako karty */
.app fieldset.volby { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--m-2); }
@media (min-width: 48rem) and (max-width: 63.99rem) { .app fieldset.volby { grid-template-columns: 1fr 1fr; } }
.app .volby .volba { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; padding: 0.75rem var(--m-4);
  border: 1.5px solid var(--linka-pole); border-radius: 14px; background: var(--plocha); cursor: pointer; min-height: 0;
  transition: border-color var(--n-pohyb-rychly), background var(--n-pohyb-rychly); }
.app .volby .volba:hover { border-color: var(--produkt-text); }
.app .volby .volba:has(input:checked) { border: 2px solid var(--produkt); background: var(--produkt-plocha); }
.app .volby .volba input { margin: 0.2rem 0 0; }
.app .volby .volba label { cursor: pointer; min-height: 2.75rem; }
.app .volby .volba strong { display: block; }
.app .volba__popis { display: block; font-size: var(--velikost-s); color: var(--tlumeny); }
.app .cip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.6rem var(--m-4); border-radius: 14px; background: var(--uspech-plocha); margin: 0; }
.app .cip[hidden] { display: none; }

/* P02: karta inzerátu a úpravy */
.app .karta-inzeratu__pozice { font: 700 1.1875rem/1.25 var(--pismo-nadpis); letter-spacing: -0.012em; margin: 0; }
.app .karta-inzeratu > p { margin: 0.2rem 0 0; }
.app .karta-inzeratu__hledaji { margin-top: var(--m-3) !important; font-weight: 600; }
.app .stitky { padding: 0; }
.app .rozbalit > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--m-3); min-height: 2.75rem; cursor: pointer;
  font-weight: 700; color: var(--produkt-text); list-style: none; }
.app .rozbalit > summary::-webkit-details-marker { display: none; }
.app .rozbalit > summary .ikona { transition: transform var(--n-pohyb) var(--n-krivka); }
.app .rozbalit[open] > summary .ikona { transform: rotate(45deg); }
.app .rozbalit:not(.rozbal) { margin-top: var(--m-2); }
.app .upravit-pozadavky { padding-left: 1.2rem; display: grid; gap: var(--m-2); margin: 0 0 var(--m-3); }
.app .upravit-pozadavky li { display: grid; gap: 0.35rem; }

/* P03 */
.app .seznam-cisla { padding-left: 1.3rem; }
.app .krok[data-krok="prehled"] .karta p { margin: 0; }
.app .krok[data-krok="prehled"] .karta p + p { margin-top: var(--m-3); }

/* P04: průběh a Mezitím */
.app .prubeh__hlava h2 { margin: 0; }
.app .prubeh__krok[hidden] { display: none; }
.app .prubeh__detail[hidden] { display: none; }
.app .prubeh__krok[data-stav="hotovo"] .prubeh__znak .znak-chyba { display: none; }
.app .skore-kruh[hidden] { display: none; }
.app .js-p04-kruh { margin: var(--m-2) 0 var(--m-4); }
.skore-kruh .hodnota { transition: stroke-dashoffset var(--n-pohyb-pomaly) var(--n-krivka); }
.app .mezitim > .karta { margin-top: 0; }
.app .mezitim .vite { box-shadow: none; }
.app .vite__nadpis { font-size: var(--velikost-h4) !important; font-family: var(--pismo-text); }
.app .rada p { margin: 0 0 0.35rem; }
.app .odkud > summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--produkt-text); font-weight: 600; }
.app .odkud p { margin: 0.25rem 0; color: var(--tlumeny); font-size: var(--velikost-s); }

/* P05: skóre, rozdíly, ukázka, dopis, panel */
.app .karta--skore .skore-kruh { margin-bottom: var(--m-3); }
.app .karta--skore .skore__cislo { font: inherit; color: inherit; letter-spacing: inherit; }
.app .karta--skore .rozbalit { border-top: 1px solid var(--linka); }
.app ul.rozdily { list-style: none; padding: 0; }
.app .rozdil .stitek { vertical-align: 0.05em; }
.app .rozdil__doplnit, .app .rozdil__odpoved { margin-top: var(--m-3); }
.app .rozdil__doplnit[hidden], .app .rozdil__odpoved[hidden], .app .rozdil__akce[hidden] { display: none; }
.app .pred-po { display: grid; gap: var(--m-3); margin-top: var(--m-3); }
@media (min-width: 40rem) { .app .pred-po { grid-template-columns: 1fr 1fr; } }
.app .pred-po__cast { border-radius: 14px; padding: var(--m-4); border: 1px solid var(--linka); background: var(--plocha); }
.app .pred-po__cast h3 { font: 700 0.8125rem/1.3 var(--pismo-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tlumeny); margin: 0 0 0.4rem; }
.app .pred-po__cast--lepe { border-color: color-mix(in srgb, var(--n-jasne) 45%, var(--linka)); background: var(--uspech-plocha); }
.app .pred-po__cast--lepe h3 { color: var(--uspech); }
.app .pred-po__cast p { margin: 0; }
.app .pred-po__cast--lepe strong, .app .pred-po__cast--lepe mark { background: var(--n-zvyraznovac); color: var(--n-na-zvyraznovaci); border-radius: 3px; padding: 0 0.1em; }
.app .dopis-ukazka { background: var(--n-papir); border: 1px solid var(--n-papir-linka); border-radius: var(--n-polomer-papir); box-shadow: var(--n-stin-papir); padding: var(--m-4) var(--m-5); }
.app .dopis-ukazka p { margin: 0 0 0.75em; }
.app .pruhy { display: grid; gap: 0.45rem; margin: var(--m-3) 0; }
.app .pruhy span { display: block; height: 0.8rem; border-radius: 6px; background: var(--kostra); }
.app .pruhy span:nth-child(2n) { width: 86%; }
.app .pruhy span:last-child { width: 55%; }
.app .krok[data-krok="vysledek"] .oddil { padding: 0; margin-top: var(--m-6); }
.app .krok[data-krok="vysledek"] .oddil > h2 { margin-bottom: var(--m-3); }
.app .panel .body { list-style: none; padding: 0; }
.app .panel .body li { position: relative; padding-left: 1.1rem; }
.app .panel .body li::before { content: ""; position: absolute; left: 0.1rem; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--produkt-akcent); }
@media (min-width: 64rem) { .app .panel { position: sticky; top: 1.5rem; } }
.app .lepive { margin-top: var(--m-5); }
.app .lepive[hidden] { display: none; }
.app .lepive.lepive--volne { position: static; box-shadow: none; }

/* P06: díly, jistoty */
.app .dily-seznam--akce { list-style: none; padding: 0; margin: 0; }
.app .dily-seznam--akce li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--m-3); padding: 0.8rem 0;
  border-bottom: 1px solid var(--linka); }
.app .dily-seznam--akce li > span { flex: 1 1 18rem; }
.app .dily-seznam--akce a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.app .jistoty { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin-top: var(--m-5); }
.app .jistoty li { display: block; position: relative; padding-left: 1.9rem; }
.app .jistoty li::before { content: ""; position: absolute; left: 0.2rem; top: 0.3em; width: 0.45rem; height: 0.8rem; border: solid var(--n-jasne);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* P07 pokladna */
.app .souhrn { display: grid; gap: 0.2rem; margin: var(--m-3) 0 0; }
.app .souhrn dt { font-weight: 700; }
.app .souhrn dd { margin: 0; }
.app .souhlasy { border: 0; padding: 0; margin: var(--m-4) 0 0; }
.app .js-p07c-form > .mikrotext { margin-top: var(--m-3); }

/* Dialog mazání v průchodu */
.app dialog.dialog { padding: var(--m-5); }
.app dialog.dialog h2 { font-size: var(--velikost-h3); margin: 0 0 var(--m-3); }
.app dialog.dialog .akce-radek { margin-top: var(--m-4); }

/* /dekujeme */
.app .krok .prubeh .stav-cekani { margin: 0; background: none; padding: 0; }
.app .krok .prubeh .info-u-mista[hidden] { display: none; }

/* ---------- Složka, díly a účet: jen obrazovka (tisk řídí slozka.css) ---------- */
@media screen {
  main.app .sl-stranka {
    --sl-text: var(--text); --sl-tlumeny: var(--tlumeny); --sl-hlavni: var(--produkt-text); --sl-hlavni-tmava: var(--produkt-najeti);
    --sl-linka: var(--linka); --sl-podklad: var(--n-mata); --sl-zmena: var(--n-zvyraznovac); --sl-doplnte-text: var(--n-doplnte-text);
    --sl-doplnte-podklad: var(--n-doplnte-plocha); --sl-chyba: var(--chyba); --sl-uspech-podklad: var(--uspech-plocha); --sl-uspech-linka: var(--uspech);
    color: var(--text); line-height: 1.6; overflow-wrap: break-word;
  }
  main.app .sl-stranka h1 { line-height: var(--n-radek-nadpis); }
  main.app .sl-stranka h2 { font-size: var(--velikost-h3); line-height: 1.25; margin: var(--m-6) 0 var(--m-3); }
  main.app .sl-stranka .karta > h2:first-child, main.app .sl-stranka .sl-karta > h2:first-child { margin-top: 0; }
  main.app .sl-stranka h3 { font-size: var(--velikost-h4); line-height: 1.3; }
  main.app .sl-stranka a:not(.tlacitko):not(.sl-tlacitko):not(.sl-karta__odkaz):not(.sl-dily__odkaz):not(.dil-dalsi) { color: var(--produkt-text); }
  main.app .sl-stranka :focus-visible, .sl-dialog :focus-visible { outline: var(--fokus-sirka) solid var(--produkt-text); outline-offset: var(--fokus-odsazeni); }

  /* tlačítka */
  main.app .sl-tlacitko, .sl-dialog .sl-tlacitko { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem;
    padding: 0.55rem 1.1rem; border-radius: 12px; border: 2px solid var(--produkt); background: var(--produkt); color: var(--na-produktu);
    font: 600 1rem/1.2 var(--pismo-text); text-decoration: none; cursor: pointer; transition: background var(--n-pohyb-rychly); }
  main.app .sl-tlacitko:hover, .sl-dialog .sl-tlacitko:hover { background: var(--produkt-najeti); border-color: var(--produkt-najeti); color: var(--na-produktu); }
  main.app .sl-tlacitko--vedlejsi, .sl-dialog .sl-tlacitko--vedlejsi { background: var(--plocha); color: var(--produkt-text); border-color: currentColor; }
  main.app .sl-tlacitko--vedlejsi:hover, .sl-dialog .sl-tlacitko--vedlejsi:hover { background: var(--produkt-plocha); color: var(--produkt-text); border-color: currentColor; }
  main.app .sl-tlacitko--nebezpecne, .sl-dialog .sl-tlacitko--nebezpecne { background: var(--chyba); border-color: var(--chyba); color: var(--na-chybe); }
  main.app .sl-tlacitko--nebezpecne:hover, .sl-dialog .sl-tlacitko--nebezpecne:hover { background: var(--chyba-najeti); border-color: var(--chyba-najeti); color: var(--na-chybe); }
  main.app .sl-tlacitko[aria-pressed="true"] { background: var(--produkt); color: var(--na-produktu); }
  main.app .sl-tlacitko[disabled], main.app .sl-tlacitko[aria-disabled="true"] { background: var(--neaktivni-plocha); color: var(--neaktivni-text); border-color: transparent; opacity: 1; }
  main.app .sl-stranka a.sl-tlacitko, main.app .sl-stranka a.sl-tlacitko:hover { color: var(--na-produktu); }
  main.app .sl-stranka a.sl-tlacitko--vedlejsi, main.app .sl-stranka a.sl-tlacitko--vedlejsi:hover { color: var(--produkt-text); }
  main.app .sl-odkaz-tlacitko { color: var(--produkt-text); font-weight: 600; }

  /* karty, pruhy */
  main.app .sl-karta { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--polomer-karta); padding: var(--m-5) var(--m-4); box-shadow: var(--n-stin-1); }
  @media (min-width: 48rem) { main.app .sl-karta { padding: var(--m-5); } }
  main.app .sl-karty { gap: var(--m-4); }
  main.app .sl-karta__odkaz { gap: 0.2rem; }
  main.app .sl-karta__firma { font: 700 1.1875rem/1.25 var(--pismo-nadpis); color: var(--produkt-text); letter-spacing: -0.012em; }
  main.app .sl-pruh { display: block; padding: var(--m-4); border-radius: 14px; border: 0; background: var(--produkt-plocha); color: var(--text); }
  main.app .sl-pruh p { margin: 0; }
  main.app .sl-pruh p + p { margin-top: 0.4rem; }
  main.app .sl-pruh--uspech { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; background: var(--uspech-plocha);
    border: 1px solid color-mix(in srgb, var(--n-jasne) 35%, transparent); margin: 0 0 var(--m-4); }
  main.app .sl-pruh--uspech > .ikona { color: var(--n-jasne); stroke-width: 2.25; margin-top: 0.1rem; }
  main.app .sl-oddil { margin: var(--m-5) 0; }
  main.app .sl-napoveda, main.app .sl-drobne { color: var(--tlumeny); font-size: var(--velikost-s); }
  main.app .sl-chyba { color: var(--chyba); }
  main.app .sl-akce { gap: var(--m-2); margin: var(--m-4) 0 var(--m-2); }
  main.app .sl-odkazy { gap: 0 var(--m-5); margin-top: var(--m-3); }

  /* P09 složka */
  main.app .sl-hlavicka h1 { margin-bottom: var(--m-2); }
  main.app .sl-hlavicka__skore { font-weight: 400; }
  main.app .slozka-dily .prubeh__hlava { margin-bottom: 0.35rem; }
  main.app .slozka-dily .prubeh__hlava h2 { margin: 0; }
  main.app .slozka-dily__souhrn { margin: 0; }
  main.app .slozka-kontrola { margin-top: var(--m-3); }
  main.app .sl-dily { margin: var(--m-3) 0 0; }
  main.app .sl-dily__radek { display: block; min-height: 0; padding: 0; transition: background var(--n-pohyb-pomaly) ease-out; }
  main.app .sl-dily__odkaz { display: grid; grid-template-columns: 2.25rem 1fr auto; grid-template-areas: none; gap: 0.75rem; align-items: center;
    min-height: 4rem; padding: 0.6rem 0.25rem; }
  main.app .sl-dily__text { display: grid; gap: 0.1rem; min-width: 0; }
  main.app .sl-dily__cislo { grid-area: auto; width: 2.25rem; height: 2.25rem; border: 2px solid transparent; background: var(--plocha-2); color: var(--tlumeny); }
  main.app .sl-dily__nazev { grid-area: auto; font-weight: 700; color: var(--text); text-decoration: none; min-height: 0; display: block; }
  main.app .sl-dily__stav { grid-area: auto; margin: 0; }
  main.app .sl-dily__radek[data-stav="hotovo"] .sl-dily__cislo { background: var(--n-jasne); color: var(--plocha); }
  main.app .sl-dily__radek[data-stav="hotovo"] .sl-dily__nazev { color: var(--text); text-decoration: none; }
  main.app .sl-dily__radek[data-stav="hotovo"] .sl-dily__odkaz:hover .sl-dily__nazev { color: var(--produkt-text); text-decoration: underline; }
  main.app .sl-dily__radek[data-stav="hotovo"] .sl-dily__stav { color: var(--n-jasne); }
  main.app .sl-dily__radek[data-stav="pripravujeme"] .sl-dily__cislo { border-color: var(--produkt); color: var(--produkt-text); background: var(--plocha); }
  main.app .sl-dily__radek[data-stav="pripravujeme"] .sl-dily__stav { color: var(--produkt-text); }
  main.app .sl-dily__radek[data-stav="nepodarilo"] .sl-dily__cislo { border-color: var(--chyba); color: var(--chyba); background: var(--chyba-plocha); }
  main.app .sl-dily__radek:not([data-stav="hotovo"]) .dil-radek__sipka { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) { main.app .sl-dily__radek[data-stav="pripravujeme"] .sl-dily__cislo { animation: n-dech 1.6s ease-in-out infinite; } }
  main.app .sl-dily__radek.je-novy { background: var(--uspech-plocha); }
  main.app .sl-dily__e14 { margin: 0 0 var(--m-3) 3rem; font-size: var(--velikost-s); }
  main.app .segmenty span[data-stav="pripravujeme"] { background: color-mix(in srgb, var(--produkt) 45%, var(--linka)); }
  main.app .segmenty span[data-stav="nepodarilo"] { background: var(--chyba); }
  main.app [data-po-dokonceni][hidden], main.app [data-behem][hidden] { display: none; }
  main.app .sl-pohovor-karta h2 { font-size: var(--velikost-h4); margin: 0 0 0.35rem; }
  main.app .sl-pohovor-karta p { margin: 0; }
  main.app .sl-pohovor-karta p + p { margin-top: 0.4rem; }
  main.app .sl-doplnte-zbyva { margin: var(--m-3) 0 0; }

  /* díly P10–P16: dokument jako papír */
  main.app .sl-dil-nav { margin: 0 0 var(--m-2); }
  main.app .sl-list { background: var(--n-papir); color: var(--text); border: 1px solid var(--n-papir-linka); border-radius: var(--n-polomer-papir); box-shadow: var(--n-stin-papir); }
  main.app .sl-list ul li::marker { color: var(--produkt-akcent); }
  main.app .sl-cv__nadpis { font: 700 0.8125rem/1.3 var(--pismo-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlumeny); border-bottom-color: var(--n-papir-linka); }
  main.app .sl-cv__jmeno { font-family: var(--pismo-nadpis); letter-spacing: -0.02em; }
  main.app mark.sl-zmena { background: var(--n-zvyraznovac); color: var(--n-na-zvyraznovaci); border-radius: 3px; }
  main.app .sl-bez-zvyrazneni mark.sl-zmena { background: none; color: inherit; }
  main.app .sl-doplnte { background: var(--n-doplnte-plocha); color: var(--n-doplnte-text); border-color: var(--n-doplnte-linka); border-radius: 6px; font-weight: 600; }
  main.app button.sl-doplnte:hover { background: var(--n-doplnte-plocha); border-style: solid; }
  main.app .sl-skore, main.app .sl-hlavicka-dilu, main.app .sl-navrh { background: var(--n-mata); border-radius: 14px; padding: var(--m-4); }
  main.app .sl-vraceno { color: var(--uspech); background: var(--uspech-plocha); }
  main.app .sl-odznak { color: var(--plocha); background: var(--tlumeny); border-radius: 6px; }
  main.app .sl-rada { border-left-color: var(--produkt-plocha); }
  main.app .sl-upravy-pole { background: var(--plocha); color: var(--text); border-color: var(--produkt-text); border-radius: 10px; }
  main.app .sl-otazka { background: var(--n-papir); border: 1px solid var(--n-papir-linka); border-radius: 14px; padding: 0 var(--m-4); margin: 0 0 var(--m-3); }
  main.app .sl-otazka > summary { padding: 0.6rem 0; }
  main.app .sl-otazka[open] { padding-bottom: var(--m-3); box-shadow: var(--n-stin-1); }
  main.app .sl-filtr button { border-radius: 999px; }
  main.app .sl-tahak:fullscreen { background: var(--plocha); color: var(--text); }
  main.app .sl-pata-dilu { border-top-color: var(--linka); }
  main.app .sl-dalsi { margin: var(--m-5) 0 0; }
  main.app .sl-dalsi a.dil-dalsi { display: flex; }
  main.app .prubeh--dil { display: grid; gap: 0.4rem; padding: var(--m-4); background: var(--produkt-plocha); border: 0; box-shadow: none; }
  main.app .prubeh--dil .prubeh__detail:empty { display: none; }
  main.app .prubeh--dil .prubeh__cinnost { margin-top: 0.2rem; }

  /* účet: přihlášení, Moje přípravy, podpora */
  main.app .sl-prihlaseni { max-width: 32rem; }
  main.app .sl-prihlaseni .sl-formular { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--polomer-karta); padding: var(--m-5);
    box-shadow: var(--n-stin-1); margin-top: var(--m-4); }
  main.app .sl-pole { margin: 0 0 var(--m-4); }
  main.app .sl-formular input[inputmode="numeric"] { font: 700 1.5rem/1 var(--pismo-text); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; max-width: 14rem; }
  main.app .sl-volby label { gap: 0.6rem; }
}

/* dialogy složky (mimo main, i v tisku skryté slozka.css) */
@media screen {
  .sl-dialog { background: var(--plocha); color: var(--text); border: 0; border-radius: var(--polomer-karta); box-shadow: var(--n-stin-2); }
  .sl-dialog::backdrop { background: var(--zavoj); }
  .sl-dialog__obsah { padding: var(--m-5); }
  .sl-dialog__hlava h2 { font-family: var(--pismo-nadpis); font-size: var(--velikost-h3); letter-spacing: -0.012em; }
  .sl-zavrit { color: var(--text); background: var(--plocha-2); border-radius: 50%; border-color: transparent; }
  .sl-zavrit:hover { border-color: var(--linka-pole); }
  .sl-dialog .sl-napoveda, .sl-dialog .sl-drobne { color: var(--tlumeny); }
  .sl-dialog .sl-chyba { color: var(--chyba); }
  .sl-dialog .sl-pruh { background: var(--produkt-plocha); border-left: 0; border-radius: 12px; }
  .sl-dialog .sl-pole label { font-weight: 600; }
  .sl-oznameni { background: var(--text); color: var(--pozadi); border-radius: 12px; box-shadow: var(--n-stin-2); font-weight: 600; }
  @media (max-width: 47.99rem) {
    .sl-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; }
  }
  @media (prefers-reduced-motion: no-preference) { .sl-dialog[open] { animation: n-vyjet var(--n-pohyb) var(--n-krivka); } }
}

/* ---------- Tisk obrazovek aplikace ---------- */
@media print {
  .cesta, .akce--lepiva, .hlavicka__aplikace, .stav-cekani, .dal { display: none !important; }
}

/* Úprava požadavků (P02) a malá textová tlačítka: cílová plocha 44 px (Q-14) */
.app .volba-inline { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: var(--m-4); }
.app .volba-inline input { margin: 0; }
.app .volba-inline label { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; }
.app .odkaz-tlacitko { min-width: 2.75rem; }

/* Třída .krok z RC (kroky průchodu) koliduje s .krok „Jak to funguje“ z naskok.css: v aplikaci ji vrátit na blok */
.app .pruchod .krok { display: block; position: static; grid-template-columns: none; gap: 0; counter-increment: none; }
.app .pruchod .krok::before, .app .pruchod .krok::after { content: none; display: none; }
.app .pruchod .krok b { display: inline; font: inherit; font-weight: 700; margin: 0; letter-spacing: inherit; }
.app .pruchod .krok[hidden] { display: none; }
.app .pruchod .krok .karta p + p, .app .pruchod .krok .chyba p + p { margin-top: var(--m-3); }
/* P02: karta inzerátu uvnitř karty sloupce bez druhého rámečku */
.app .sloupec.karta .karta { border: 0; box-shadow: none; padding: 0; background: none; }
.app .sloupec.karta .karta + .karta { margin-top: var(--m-4); }
.app .stitky li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
/* Díly: jedna plná hlavní akce (Stáhnout pro Word), ostatní obrysové (vizuální jazyk 3.2) */
@media screen {
  main.app .sl-akce .sl-tlacitko[data-akce="upravit"], main.app .sl-akce .sl-tlacitko[data-format="pdf"] {
    background: var(--plocha); color: var(--produkt-text); border-color: currentColor; }
  main.app .sl-akce .sl-tlacitko[data-akce="upravit"]:hover, main.app .sl-akce .sl-tlacitko[data-format="pdf"]:hover {
    background: var(--produkt-plocha); color: var(--produkt-text); }
}

/* ---------- P20d odstoupení do 14 dní (DS-06f) ---------- */
.odstoupeni__krok > * + * { margin-top: var(--m-4); }
.odstoupeni__krok[hidden] { display: none; }
.odstoupeni__slib { margin-top: 0; font-size: 1rem; }
.odstoupeni__nadpis { font-size: var(--velikost-h4) !important; margin: var(--m-5) 0 0 !important; }
.odstoupeni__stazeni { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--m-2); }
.odstoupeni__oprava { margin-top: var(--m-5) !important; }
.odstoupeni .okno__tlacitka { display: flex; flex-wrap: wrap; gap: var(--m-2); margin-top: var(--m-4); }
@media (max-width: 47.99rem) { .odstoupeni .okno__tlacitka { flex-direction: column-reverse; } .odstoupeni .okno__tlacitka .tlacitko { width: 100%; } }
.odstoupeni__volby { border: 0; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.odstoupeni__volby legend { font-weight: 700; margin-bottom: 0.25rem; }
.odstoupeni__volby .volba { min-height: 2.75rem; padding: 0.35rem 0; }
.odstoupeni__formular[hidden], .odstoupeni__chyba[hidden], [data-odst-vysledek][hidden] { display: none; }
.odstoupeni .pruh-ok[hidden] { display: none; }
/* PN48: důsledek pro už uplatněnou bonusovou přípravu přímo nad tlačítkem potvrzení (plná barva textu, kontrast AA). */
.odstoupeni__varovani { margin: var(--m-4) 0 0; padding: var(--m-3) var(--m-4); border-left: 4px solid var(--n-akcent); border-radius: 0 12px 12px 0; background: var(--n-doplnte-plocha); color: var(--text); }
.odstoupeni__varovani p { margin: 0; }
.odstoupeni__varovani p + p { margin-top: 0.3rem; }
.odstoupeni-karta { margin: var(--m-3) 0 0; }
.odstoupeni-slozka { margin: var(--m-4) 0 0; }
.odstoupeni-stav { margin: var(--m-3) 0 0; }
.odstoupeni--stranka { max-width: 44rem; }
main.app .sl-stranka .tlacitko--nebezpecne-obrys { color: var(--chyba); }
main.app .sl-stranka a.tlacitko--hlavni { color: var(--na-produktu); }
main.app .sl-stranka a.tlacitko--vedlejsi { color: var(--produkt-text); }

/* ---------- DS-07 opravy UI podle testu person (persony-kolo1.md) ---------- */
/* PN6: věta „Mezitím vyberte CV“ pod čekáním na inzerát */
.pruchod .js-inz-mezitim { margin-top: var(--m-2); }
/* PN9: „Čekáme na inzerát… 0:06“ v hlavním tlačítku */
.pruchod .js-zadani-pokracovat[aria-busy="true"] { cursor: progress; }
.pruchod .js-zadani-pokracovat[aria-busy="true"] .ikona--posun { display: none; }
/* PN12: odhad složky na P06 */
.p06-odhad { display: flex; gap: 0.45rem; align-items: flex-start; }
.p06-odhad[hidden] { display: none; }
.p06-odhad > .ikona { flex: none; margin-top: 0.2rem; }
/* PN8: karta Mezitím ve složce */
.mezitim-karta { margin-top: var(--m-4); }
.mezitim-karta[hidden] { display: none; }
.mezitim-karta h2 { margin-top: 0; font-size: var(--velikost-h4); }
.mezitim-karta p + p { margin-top: var(--m-3); }
/* PN14: nehotový díl, uplynulý čas a „Mezitím si přečtěte“ */
.prubeh--dil .prubeh__cas { margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
[data-ceka-mezitim] { display: flex; gap: 0.35rem; align-items: center; margin-top: var(--m-3); }
[data-ceka-mezitim][hidden] { display: none; }
/* PN24: sbalené rady úvodu otázek */
.sl-rady-uvod { margin: var(--m-3) 0; }
/* PN28: na nízkém displeji (≤ 700 px) je řádek „Dál“ v lepivé liště na jeden řádek, lišta zabírá méně místa */
@media screen and (max-height: 43.75rem) and (max-width: 47.99rem) {
  .app .akce--lepiva { padding-top: var(--m-2); padding-bottom: calc(var(--m-2) + env(safe-area-inset-bottom)); }
  .app .akce--lepiva .dal { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* PN42 (kolo 3): místo useknutí krátká verze textu, uklidňující část („Tím nic nekupujete.“) zůstane celá */
  .app .akce--lepiva .dal__plne { display: none; }
  .app .akce--lepiva .dal__kratce { display: inline; }
  .app .akce--lepiva .dal > .ikona { display: none; }
  .app .akce--lepiva .akce__cena { margin-bottom: 0.15rem; }
}

/* ---------- DS-07 kolo 2 (persony-kolo2.md) ---------- */
/* PN39: u „Proč ne víc?“ jen znak + (bez staré šipky ze slozka.css) */
.sl-odkud.rozbal > summary::before { content: none; }
/* PN41: karta Mezitím nad seznamem dílů */
.mezitim-karta--nahore { margin: 0 0 var(--m-4); }
/* PN35, PN40: tlačítka na stránce smazané přípravy a 404 vedle sebe, na mobilu pod sebou */
main.app .sl-stranka .akce-radek { display: flex; flex-wrap: wrap; gap: var(--m-2); }

/* ---------- DS-07 kolo 3 (persony-kolo3.md) ---------- */
/* PN42: krátká verze řádku „Dál“ jen na nízkém displeji (pravidlo výš v @media max-height 43.75rem) */
.dal__kratce { display: none; }
/* PN43: mezera nad nadpisem „Co je v přípravě“ na P06 jako u ostatních oddílů */
.app .krok[data-krok="vyber"] > .podnadpis + h2 { margin-top: var(--m-6); }

/* ==========================================================================
   kolo2: /zacit – dva rovnocenné vstupy a rozbor inzerátu (S2, S3; Eva, 2026-09-28)
   ========================================================================== */
.app .pruchod:has(> .krok[data-krok="zadani"]:not([hidden])),
.app .pruchod:has(> .krok[data-krok="vysledek"]:not([hidden])),
.app .pruchod:has(> .krok[data-krok="vyber"]:not([hidden])) { max-width: 76rem; }
.app .krok--zadani > h1 { max-width: 24ch; text-wrap: balance; }
.zadani { display: grid; gap: var(--m-4); align-items: stretch; }
@media (min-width: 64rem) {
  .zadani { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m-5); }
  .zadani:has(.js-inz-karta:not([hidden])), .zadani:has(.js-upravit:not([hidden])) { align-items: start; }
  .zadani__karta--cv, .js-cv-mame { position: sticky; top: 1rem; }
}
.app .zadani__karta { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--m-3); }
.app .zadani__karta > * { margin: 0; }
.app .zadani__karta.je-nad, .zona.je-nad { outline: 3px dashed var(--produkt); outline-offset: 3px; }
.zadani__hlava { display: flex; align-items: center; gap: 0.6rem; }
.app .zadani__hlava h2 { margin: 0; font-size: var(--velikost-h3); }
.zadani__cislo { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--produkt-plocha); color: var(--produkt-text); font-weight: 700; }
.zadani__form textarea { min-height: 3.5rem !important; resize: vertical; }
.zadani__form .pole > label { font-weight: 700; }
.zadani__akce-inzeratu { margin: var(--m-2) 0 0; }
.zadani__lk31 { margin: var(--m-2) 0 0 !important; }
.app .zadani__form .rozbal { margin-top: var(--m-2); }
.tlacitko.je-zvyraznene { box-shadow: 0 0 0 3px color-mix(in srgb, var(--produkt) 30%, transparent); }
.app .inzerat__poznano { margin: 0.35rem 0 0; font-size: var(--velikost-s); color: var(--produkt-text); font-weight: 600; }
.app .inzerat__poznano:empty { display: none; }
.app .info-u-mista .akce-radek { margin-top: var(--m-3); }
/* S3 rozbor */
.rozbor { display: grid; gap: var(--m-2); }
.rozbor__hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--m-3); }
.rozbor__nadtitulek { margin: 0; font: 700 var(--velikost-xs)/1.3 var(--pismo-text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tlumeny); }
.app .rozbor__pozice { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.15; margin: 0; }
.rozbor__firma { margin: 0; }
.rozbor__fakty { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fakt { display: inline-flex; align-items: center; border: 1px solid var(--linka); border-radius: 10px; padding: 0.2rem 0.6rem; font-size: var(--velikost-s); background: var(--plocha); }
.fakt--tlum { color: var(--tlumeny); border-style: dashed; }
.rozbor__oddil { margin: var(--m-3) 0 0.2rem; font: 700 var(--velikost-xs)/1.3 var(--pismo-text) !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tlumeny); }
.rozbor__zkratka { margin: 0; font-size: 1.0625rem; }
.rozbor__vse > summary { list-style: none; display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--produkt-text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.rozbor__vse > summary::-webkit-details-marker { display: none; }
.rozbor__vse > summary::after { content: " ▾"; }
.rozbor__vse[open] > summary::after { content: " ▴"; }
@media (min-width: 64rem) { .rozbor__vse > summary { display: none; } }
.rozbor__skupiny { display: grid; gap: var(--m-4); }
@media (min-width: 40rem) { .rozbor__skupiny { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.app .rozbor__druh { font: 700 var(--velikost-h4)/1.3 var(--pismo-nadpis); margin: 0; }
.rozbor__kategorie { margin: var(--m-2) 0 0.15rem; font: 700 0.75rem/1.3 var(--pismo-text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tlumeny); }
.rozbor__body { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.rozbor__body li { position: relative; padding-left: 1.1rem; }
.rozbor__body li::before { content: ""; position: absolute; left: 0.15rem; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--produkt); }
.rozbor__mekke { margin: var(--m-2) 0 0; }
.rozbor__dalsi { display: grid; gap: var(--m-2) var(--m-4); margin-top: var(--m-4); padding-top: var(--m-3); border-top: 1px solid var(--linka); }
@media (min-width: 40rem) { .rozbor__dalsi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rozbor__dalsi > div > p { margin: 0; }
.rozbor__dalsi:not(:has(> div:not([hidden]))) { display: none; }
/* karta 2: most, oblast pro soubor */
.most { display: flex; gap: var(--m-3); align-items: center; background: var(--n-mata); border-radius: 16px; padding: 0.75rem 0.9rem; }
.most p { margin: 0; font-weight: 600; }
.most__kruh { width: 3.5rem; height: 3.5rem; }
.most__kruh b { font-size: 1.25rem; }
@media (max-width: 63.99rem) { .most__kruh { display: none; } }
.zona { display: grid; justify-items: center; gap: 0.35rem; text-align: center; border: 2px dashed var(--linka-pole); border-radius: 18px; padding: var(--m-5) var(--m-4);
  background: color-mix(in srgb, var(--plocha) 70%, var(--n-mata)); }
.zona > * { margin: 0; }
.zona__ikona { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 14px; background: var(--produkt-plocha); color: var(--produkt-text); }
.zona__nadpis { font-weight: 700; }
.zona .tlacitko--hlavni { margin-top: var(--m-2); min-width: 12rem; }
.zona__linkedin > summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--produkt-text); font-weight: 600; font-size: var(--velikost-s); text-decoration: underline; text-underline-offset: 0.18em; }
.zona__linkedin > summary::-webkit-details-marker { display: none; }
.zona__linkedin p { max-width: 30rem; text-align: left; }
@media (max-width: 63.99rem) {
  /* na telefonu se nepřetahuje: bez čárkovaného rámečku, jen plné tlačítko */
  .zona { border: 0; padding: 0; background: none; justify-items: stretch; text-align: left; }
  .zona__ikona, .zona__nadpis { display: none; }
  .zona .tlacitko--hlavni { order: -1; width: 100%; margin: 0 0 0.25rem; }
}
.zadani__volby { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--m-5); }
@media (max-width: 63.99rem) { .zadani__volby { flex-direction: column; align-items: center; } }
.zadani__data { display: flex; gap: 0.45rem; align-items: flex-start; }
.zadani__data .ikona { margin-top: 0.2rem; color: var(--produkt-text); }
.app .zadani__pata { margin-top: var(--m-2); padding-top: var(--m-4); border-top: 1px solid var(--linka); display: grid; gap: 0.35rem; }
.app .zadani__pata > * { margin: 0; }
.app .zadani__pata .tlacitko { width: 100%; }
.app .js-cv-cip { justify-content: flex-start; }
.app .krok .rozbor > .rozbor__pozice { margin: 0; }
.app .krok .rozbor h3.rozbor__oddil { margin: var(--m-3) 0 0.2rem; }
.rozbor__skupina > .rozbor__kategorie:not(:first-of-type) { margin-top: var(--m-3); }
.app input[type="file"].skryte { width: 1px !important; height: 1px; min-height: 0; padding: 0; border: 0; }
.zona, .zadani__form { position: relative; }
.app .krok .rozbor__hlava { margin: 0; justify-content: flex-end; }
@media (min-width: 64rem) { .app .krok .rozbor__hlava { position: absolute; top: var(--m-5); right: var(--m-5); } .zadani__karta--inzerat { position: relative; } }
@media (max-width: 63.99rem) { .rozbor__hlava { order: 10; } .app .krok .rozbor__hlava { justify-content: flex-start; } .js-k-zkratka-obal > .rozbor__oddil { display: none; } }

/* ==========================================================================
   kolo2: P05 výsledek zdarma – párování bez vyplňování (S5; Eva, 2026-09-28)
   ========================================================================== */
.app .krok--vysledek > .podnadpis { margin-top: 0; }
.vysledek { display: grid; gap: var(--m-5); }
@media (min-width: 64rem) {
  .vysledek { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--m-6); align-items: start; }
  .vysledek__blok2 { position: sticky; top: 1rem; }
  .vysledek__nakup-mobil { display: none !important; }
}
.vysledek__zprava { display: grid; gap: var(--m-5); min-width: 0; }
.app .vysledek__zprava > * { margin: 0; }
.app .karta--skore .skore-kruh { margin-bottom: 0; }
.app .karta--skore .skore-kruh__veta { margin: 0; }
.stavy-pruh { display: flex; gap: 3px; height: 0.625rem; border-radius: 6px; overflow: hidden; margin: var(--m-4) 0 var(--m-2); }
.stavy-pruh i { display: block; flex: 1 1 0; min-width: 0.5rem; }
.stavy-pruh__sedi { background: var(--n-jasne); }
.stavy-pruh__napul { background: var(--n-napul); }
.stavy-pruh__nevidime { background: var(--kostra); box-shadow: inset 0 0 0 2px var(--n-chybi); }
.legenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.legenda li { display: inline-flex; align-items: center; gap: 0.45rem; }
.vysledek__nakup-mobil { display: grid; gap: 0.25rem; padding: var(--m-4); border-radius: var(--polomer-karta); background: var(--n-mata); }
.vysledek__nakup-mobil .tlacitko { width: 100%; }
.vysledek__nakup-mobil[hidden] { display: none; }
.app .parovani > h2 { font-size: var(--velikost-h3); margin: 0 0 var(--m-2); }
.app .par-skupina { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; font: 700 var(--velikost-h4)/1.3 var(--pismo-nadpis); margin: var(--m-5) 0 var(--m-2); }
.par-skupina__pozn { font: 400 var(--velikost-s)/1.3 var(--pismo-text); color: var(--tlumeny); }
.app .par-skupina__uvod { margin: 0 0 var(--m-2); }
.par-sedi > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.par-sedi > summary::-webkit-details-marker { display: none; }
.par-sedi > summary::after { content: "▾"; color: var(--produkt-text); font-weight: 700; }
.par-sedi[open] > summary::after { content: "▴"; }
.app .par-sedi .par-skupina { margin: var(--m-3) 0; }
.par { display: grid; gap: 0.35rem; padding: 0.75rem 0; border-top: 1px solid var(--linka); }
.par__poz { font-weight: 600; }
.par__poz .stitek { margin-left: 0.3rem; vertical-align: 0.1em; font-size: 0.75rem; padding: 0.05rem 0.5rem; }
.stitek--nutne { background: var(--plocha-2); color: var(--text); }
.stitek--vyhodou-par { background: transparent; border: 1px dashed var(--linka-pole); color: var(--tlumeny); }
.par__stav { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 700; color: var(--tlumeny); }
.par__doklad { font-size: 0.9375rem; }
.citace { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--n-zvyraznovac) 75%, transparent) 60%); padding: 0 0.1em; }
.par__rada { display: block; margin-top: 0.25rem; font-size: var(--velikost-s); color: var(--tlumeny); }
@media (min-width: 64rem) {
  .par { grid-template-columns: minmax(0, 5fr) 8rem minmax(0, 7fr); gap: var(--m-4); align-items: start; }
  .par__stav { justify-content: center; }
  .par__stav::before, .par__stav::after { content: ""; flex: 1; height: 1px; background: var(--linka-pole); }
}
.app .ukazky > h2 { font-size: var(--velikost-h3); margin: 0 0 var(--m-3); }
.ukazky__mrizka { display: grid; gap: var(--m-4); }
@media (min-width: 48rem) { .ukazky__mrizka { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.ukazka-prepisu { padding: 0 var(--m-4) var(--m-4); font-size: 0.9375rem; }
.ukazka-prepisu .papir__pruh { margin: 0 calc(var(--m-4) * -1) var(--m-3); padding: 0.55rem var(--m-4); font-size: 0.8125rem; }
.ukazka-prepisu__stitek { margin: var(--m-2) 0 0.15rem !important; font: 700 0.75rem/1.3 var(--pismo-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlumeny); }
.ukazka-prepisu__ted { color: var(--tlumeny); margin: 0; }
.ukazka-prepisu__lepe { margin: 0; }
.vysledek__dvojice { display: grid; gap: var(--m-4); }
@media (min-width: 48rem) { .vysledek__dvojice { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.app .vysledek__dvojice > .karta { margin: 0; }
.app .vysledek__dvojice h2, .app .vysledek__vas h2 { font-size: var(--velikost-h4); margin: 0 0 var(--m-2); }
.app .vysledek__vas p { margin: 0 0 var(--m-3); }
.vysledek__most { margin: var(--m-3) 0 var(--m-4); }
.cena { font: 700 2.5rem/1 var(--pismo-nadpis); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 0 0 var(--m-3); }
.cena small { font: 600 var(--velikost-s)/1.2 var(--pismo-text); letter-spacing: 0; color: var(--tlumeny); margin-left: 0.4rem; }
.vysledek__blok2 .tlacitko--hlavni { width: 100%; }
.vysledek__blok2 .dal { margin-top: var(--m-2); }
/* tisk výsledku z prohlížeče (AK2-25): bez lišt a tlačítek, ND9 věta a datum smazání zůstávají */
@media print {
  body:has(.krok--vysledek:not([hidden])) :is(.hlavicka, .paticka, footer, .cesta, .preskocit) { display: none !important; }
  .krok--vysledek :is(button, .tlacitko, .vysledek__nakup-mobil, .vysledek__blok2, .rozbal) { display: none !important; }
  .vysledek { display: block; }
  .karta, .papir { box-shadow: none !important; break-inside: avoid; }
}

/* ==========================================================================
   kolo2: P06 Co dostanete za 249 Kč – prodejní stránka (S6; Eva, 2026-09-28)
   ========================================================================== */
.p06-hlava { display: grid; gap: var(--m-4); align-items: start; }
@media (min-width: 64rem) { .p06-hlava { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--m-6); } }
.app .p06-hlava__text > * { margin: 0 0 var(--m-3); }
.app .p06-hlava h1 { margin-top: var(--m-2); }
.p06-prouzek { background: var(--n-mata); }
.app .cena-karta { margin: 0; border: 2px solid var(--produkt); box-shadow: var(--n-stin-2); display: grid; gap: var(--m-2); }
.app .cena-karta > *, .app .cena-karta .js-p06-nakup > * { margin: 0; }
.cena-karta .js-p06-nakup { display: grid; gap: var(--m-2); }
.cena-karta .js-p06-nakup[hidden] { display: none; }
.cena-karta .tlacitko { width: 100%; }
.cena-karta__slib { font-size: var(--velikost-s); border-left: 3px solid var(--produkt); padding: 0.2rem 0 0.2rem 0.75rem; }
.karty-dilu { list-style: none; padding: 0; margin: var(--m-5) 0 0; display: grid; gap: var(--m-4); }
@media (min-width: 48rem) { .karty-dilu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .karty-dilu { grid-template-columns: repeat(3, minmax(0, 1fr)); } .karta-dilu--velka { grid-column: span 2; } }
.karta-dilu { display: grid; gap: var(--m-3); align-content: start; background: var(--plocha); border: 1px solid var(--linka); border-radius: 20px; padding: var(--m-4); box-shadow: var(--n-stin-1); min-width: 0; }
@media (max-width: 47.99rem) { .karta-dilu { grid-template-columns: minmax(0, 1fr) 6rem; } .karta-dilu .nahled-dilu { height: 6rem; } }
@media (min-width: 64rem) { .karta-dilu--velka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--m-5); } .karta-dilu--velka .nahled-dilu { height: 12rem; } }
.karta-dilu__text > * { margin: 0 0 var(--m-2); }
.karta-dilu__hlava { display: flex; gap: 0.75rem; align-items: center; }
.karta-dilu__ikona { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--produkt-plocha); color: var(--produkt-text); flex: none; }
.karta-dilu__cislo { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tlumeny); }
.app .karta-dilu h3 { font-size: 1.1875rem; margin: 0; }
.karta-dilu__pro { font-size: 0.9375rem; }
.karta-dilu__pro b { color: var(--produkt-text); }
.karta-dilu__pata { font-size: var(--velikost-s); color: var(--tlumeny); }
.nahled-dilu { position: relative; display: block; height: 7.5rem; overflow: hidden; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--n-papir); border: 1px solid var(--n-papir-linka);
  box-shadow: var(--n-stin-1); color: var(--text); text-decoration: none; font-size: 0.75rem; line-height: 1.45; }
.nahled-dilu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; background: linear-gradient(transparent, var(--n-papir)); }
.nahled-dilu:hover { border-color: var(--produkt-text); }
.nahled-dilu .stitek--ukazka { position: absolute; right: 0.35rem; top: 0.35rem; z-index: 1; font-size: 0.6875rem; padding: 0.1rem 0.45rem; }
.nahled-dilu__obsah b, .nahled-dilu__obsah small, .nahled-dilu__obsah mark { display: block; }
.nahled-dilu__obsah b { font-size: 0.8125rem; }
.nahled-dilu__obsah small { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlumeny); margin-top: 0.3rem; }
.nahled-dilu__obsah mark { background: var(--n-zvyraznovac); color: var(--n-na-zvyraznovaci); width: fit-content; }
@media (max-width: 47.99rem) { .nahled-dilu .stitek--ukazka { font-size: 0.5625rem; right: 0.2rem; top: 0.2rem; } .nahled-dilu { font-size: 0.625rem; padding-top: 1.4rem; } }
.app .p06-navic { margin-top: var(--m-5); }
.app .p06-navic > h2 { font-size: var(--velikost-h4); margin: 0 0 var(--m-3); }
.pilulky { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pilulka { display: inline-flex; align-items: center; gap: 0.45rem; border: 1.5px solid var(--linka); background: var(--plocha); border-radius: 999px; padding: 0.4rem 0.8rem; font-size: var(--velikost-s); font-weight: 600; }
.pilulka .ikona { color: var(--produkt-text); }
.p06-konec { display: grid; gap: var(--m-2); margin-top: var(--m-5); }
.p06-konec .tlacitko { width: 100%; }
/* PN50 (persony kolo 4): i na počítači po kartách dílů stejná akce jako nahoře (karta ceny tam není lepivá). */
@media (min-width: 64rem) { .p06-konec { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: var(--m-4); }
  .p06-konec .tlacitko { width: auto; } }
.nahled-dilu { padding-top: 1.6rem; }
.nahled-dilu__obsah { display: block; }
.cena-karta .cena small { display: block; margin: 0.35rem 0 0; }
.nahled-dilu__obsah b, .nahled-dilu__obsah small, .nahled-dilu__obsah mark { display: inline; }
@media (max-width: 47.99rem) {
  /* AK2-24: skóre, tři čísla a tlačítko s cenou na první obrazovce 360 × 640 */
  .app .krok--vysledek > h1 { margin-bottom: var(--m-2); }
  .app .karta--skore { padding: var(--m-4); }
  .app .karta--skore .skore-kruh { grid-template-columns: 4.5rem 1fr; gap: var(--m-3); }
  .app .karta--skore .skore-kruh__cislo, .app .karta--skore .skore-kruh svg { width: 4.5rem; height: 4.5rem; }
  .app .karta--skore .skore-kruh__cislo > span { font-size: 1.5rem; }
  .app .karta--skore .skore-kruh__veta { font-size: 1.0625rem; }
  .app .karta--skore .js-pocty { display: none; }
  .app .karta--skore .stavy-pruh { margin-top: var(--m-3); }
  .app .karta--skore .rozbal { margin-top: var(--m-2); }
  .vysledek__zprava { gap: var(--m-4); }
  .vysledek__nakup-mobil { padding: var(--m-3); }
}
@media (max-width: 47.99rem) {
  .karta-dilu .nahled-dilu { height: 7.5rem; padding-top: 2.1rem; }
  .nahled-dilu .stitek--ukazka { left: 0; right: 0; top: 0; border-radius: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; padding: 0.2rem; }
}
/* kolo2: podíly úsekového pruhu skóre bez atributu style (CSP) */
.stavy-pruh .podil-0 { flex-grow: 0; }
.stavy-pruh .podil-1 { flex-grow: 1; }
.stavy-pruh .podil-2 { flex-grow: 2; }
.stavy-pruh .podil-3 { flex-grow: 3; }
.stavy-pruh .podil-4 { flex-grow: 4; }
.stavy-pruh .podil-5 { flex-grow: 5; }
.stavy-pruh .podil-6 { flex-grow: 6; }
.stavy-pruh .podil-7 { flex-grow: 7; }
.stavy-pruh .podil-8 { flex-grow: 8; }
.stavy-pruh .podil-9 { flex-grow: 9; }
.stavy-pruh .podil-10 { flex-grow: 10; }
.stavy-pruh .podil-11 { flex-grow: 11; }
.stavy-pruh .podil-12 { flex-grow: 12; }
.stavy-pruh .podil-13 { flex-grow: 13; }
.stavy-pruh .podil-14 { flex-grow: 14; }
.stavy-pruh .podil-15 { flex-grow: 15; }
.stavy-pruh .podil-16 { flex-grow: 16; }
.stavy-pruh .podil-17 { flex-grow: 17; }
.stavy-pruh .podil-18 { flex-grow: 18; }
.stavy-pruh .podil-19 { flex-grow: 19; }
.stavy-pruh .podil-20 { flex-grow: 20; }
