/* ============================================================
   Zapadne konfigurátor – vzhled ve stylu aplikací Apple (21. 10. 2026)
   Načítá se jen v konfigurator.html, PO styles.css: přepíše tokeny a tvar ovládání, rozvržení a výšky
   (pravý sloupec bez scrollu @1280×800, cíle ≥ 32 px, písmo ≥ 12 px) zůstávají ze styles.css.
   Tmavý režim napevno (23. 10. 2026, pokyn „barevné rozvržení mělo být tmavé“ – jako černé studio videí); světlý zůstává pod <html class="svetly">.
   Původní vzhled = smazat <link> na tenhle soubor.
   Zásady: šedé postranní panely, bílá plocha, přepínače jako segmenty (šedá dráha, vybraný díl bílý
   a vystouplý, text oranžový), kulaté vzorníky s prstencem, tlačítka do kapsle, jemné linky místo rámečků.
   ============================================================ */

/* ---------- tokeny ---------- */
:root{
  color-scheme:light;
  --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#86868b;
  --win:#ffffff; --side:#f5f5f7; --card:#ffffff; --field:#ffffff; --elev:#ffffff;
  --track:rgba(118,118,128,.12); --hover:rgba(118,118,128,.10); --press:rgba(118,118,128,.20);
  --seg:#ffffff; --seg-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05);
  --sep:rgba(60,60,67,.16); --sep2:rgba(60,60,67,.26);
  --accent:#ff6a13; --accent-hi:#ff7d33; --accent-ink:#c2410c; --on-accent:#1d1d1f;
  --ok:#248a3d; --ok-soft:rgba(52,199,89,.13); --danger:#d70015; --danger-soft:rgba(255,59,48,.10);
  --well1:#fdfdfe; --well2:#e7e7ec; --stage1:var(--well1); --stage2:var(--well2);
  --glass:rgba(255,255,255,.80);
  --shadow-card:0 0 0 .5px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.06);
  --shadow-pop:0 12px 36px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.08);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;

  /* staré tokeny ze styles.css → nové hodnoty (všechna dosavadní pravidla se tím přebarví) */
  --bg:var(--win); --panel:var(--side); --panel2:var(--card); --tile:var(--card); --tile-hover:var(--card);
  --line:var(--sep); --line2:var(--sep2);
  --text:var(--ink); --muted:var(--ink3); --muted2:var(--ink2); --dim:var(--ink3);
  --accent2:var(--accent-ink); --accent-text:var(--accent-ink); --accent-soft:rgba(255,106,19,.10);
  --radius:16px; --r-lg:14px; --r-md:10px; --r-sm:8px;
  --sec-line:linear-gradient(var(--sep),var(--sep));   /* linka mezi sekcemi: jemná šedá (Apple), odsazení zůstává */
}
/* tmavý napevno: :root:not(.svetly) má vyšší specifičnost než :root, světlé tokeny výš zůstávají jen pro html.svetly */
:root:not(.svetly){
  color-scheme:dark;
  --ink:#f5f5f7; --ink2:#a1a1a6; --ink3:#8d8d93;
  --win:#161617; --side:#1e1e20; --card:#2c2c2e; --field:#2c2c2e; --elev:#2c2c2e;
  --track:rgba(118,118,128,.24); --hover:rgba(118,118,128,.16); --press:rgba(118,118,128,.30);
  --seg:#4a4a4e; --seg-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.06);
  --sep:rgba(84,84,88,.55); --sep2:rgba(110,110,115,.6);
  --accent:#ff7a1a; --accent-hi:#ff8e3d; --accent-ink:#ffa05a;
  --ok:#30d158; --ok-soft:rgba(48,209,88,.16); --danger:#ff453a; --danger-soft:rgba(255,69,58,.14);
  --well1:#2b2b2e; --well2:#141415;
  --stage1:#1d1d1f; --stage2:#000;   /* 3D/2D plocha = černé studio jako videa na webu */
  --glass:rgba(36,36,38,.78);
  --shadow-card:0 0 0 .5px rgba(255,255,255,.07);
  --shadow-pop:0 16px 40px rgba(0,0,0,.55),0 0 0 .5px rgba(255,255,255,.10);
  --accent-soft:rgba(255,122,26,.16);
}

/* ---------- základ ---------- */
html,body{background:var(--win);color:var(--ink);font-family:var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid rgba(255,106,19,.45);outline-offset:1px}
h2{font-weight:700;letter-spacing:-.02em}
h3{color:var(--ink);text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:600}
.hint{color:var(--ink2)}
kbd{background:var(--card);border:0;box-shadow:var(--shadow-card);color:var(--ink)}
.panel .step::-webkit-scrollbar-thumb,#binCardSlot::-webkit-scrollbar-thumb{background:var(--sep2)}

/* ---------- hlavička: průsvitná lišta, kroky jako segmentový přepínač ---------- */
.top{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
.brand{font-size:17px;font-weight:600;letter-spacing:-.02em}
.brand small{color:var(--ink2);font-size:13px;font-weight:400}
.logo{width:22px;height:22px;border:0;border-radius:0;background:url(img/favicon.svg) center/contain no-repeat}
.steps{flex:0 1 auto;margin:0 auto;gap:2px;padding:3px;background:var(--track);border-radius:999px}
.steps button{height:30px;padding:0 14px;border:0;border-radius:999px;color:var(--ink2);font-size:13px;font-weight:500}
.steps button:hover{color:var(--ink)}
.steps button.active{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--seg-shadow)}
.steps button.done{color:var(--ink)}
.steps button.done::before{content:"✓";color:var(--ok);font-weight:700;margin-right:5px}
.total-pill{margin-left:0;background:transparent;border:0;padding:0;gap:3px}
.pill-row{align-items:baseline;color:var(--ink2);font-size:13px}
.total-pill strong{color:var(--ink);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pill-bar{height:4px;background:var(--track);border-radius:2px}
.pill-bar i{background:var(--accent);border-radius:2px}
.pill-note{color:var(--ink2)}
.pill-note.ok{color:var(--ok)}

/* ---------- postranní panely ---------- */
.panel{background:var(--side);border-right:1px solid var(--sep)}
.panel .nav{border-top:1px solid var(--sep)}
.bincard{background:var(--side);border-left:1px solid var(--sep)}
.bincard header{border-bottom:1px solid var(--sep)}
.bc-titles b,.bincard.nosel .bc-titles b{color:var(--ink);font-size:15px;font-weight:600}
.bc-titles span,.bincard.nosel .bc-titles span{color:var(--ink2);font-size:12px}
/* hlavička vybrané krabičky: Věci (co ukázat ve 3D) + kulaté ✕ (23. 10. 2026, pokyn „možnost vložit předměty“) */
#btnFill{flex:0 1 auto;min-width:0;max-width:52%;height:32px;padding:0 12px;border-radius:999px;background:var(--track);color:var(--ink);font-size:13px;font-weight:500;gap:6px}
#btnFill:hover{background:var(--press)}
#btnFill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btnFill.has{color:var(--accent-ink)}
#binCardClose{width:32px;height:32px;padding:0;border-radius:50%;justify-content:center;flex:0 0 32px}
.bincard footer{border-top:1px solid var(--sep);padding:6px 8px}

/* ---------- pole a popisky ---------- */
label{color:var(--ink2)}
label input,label select,label textarea,#labelText,#shareText{background:var(--field);border:1px solid var(--sep2);border-radius:var(--r-sm);color:var(--ink);transition:border-color .15s,box-shadow .15s}
label input:focus,label select:focus,label textarea:focus,#labelText:focus,#shareText:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
label input::placeholder,#labelText::placeholder,label textarea::placeholder{color:var(--ink3)}
body.cfg label.check,body.cfg label.radio{background:var(--card);border:0;border-radius:var(--r-md);box-shadow:var(--shadow-card);color:var(--ink)}
.info{background:var(--card);border:0;box-shadow:var(--shadow-card);color:var(--ink2)}
.info b{color:var(--ink)}

/* ---------- tlačítka: kapsle; hlavní oranžová s tmavým textem (6,4:1), vedlejší šedá výplň ---------- */
button.primary{background:var(--accent);border:0;border-radius:999px;color:var(--on-accent);font-weight:600;transition:background .15s,transform .1s}
button.primary:hover{background:var(--accent-hi)}
button.primary:active,button.ghost:active,a.ghost:active{transform:scale(.98)}
button.ghost,a.ghost{background:var(--track);border:0;border-radius:999px;color:var(--ink);font-weight:500;transition:background .15s}
button.ghost:hover,a.ghost:hover{background:var(--press);border:0}
button.ghost.danger{color:var(--danger);border:0}
button.ghost:disabled,button.primary:disabled{opacity:.4}
button.linkbtn,.linky{color:var(--accent-ink)!important;text-decoration:none}
button.linkbtn:hover,.linky:hover{text-decoration:underline}
button.linkbtn .ic,.linky .ic{width:14px;height:14px;margin-left:3px}

/* ---------- segmentové přepínače: všechny skupiny kachliček (.tiles) i řádky přihrádek ---------- */
.tiles,#boxLabel,.divrow .segs{background:var(--track);border-radius:10px;padding:2px;gap:2px}
.tile{background:transparent;border:0;border-radius:8px;color:var(--ink);box-shadow:none;transition:background .12s,color .12s,box-shadow .12s}
.tile small{color:var(--ink2)}
.tile:hover{background:var(--hover);border:0}
.tile.on{background:var(--seg);color:var(--accent-ink);box-shadow:var(--seg-shadow);font-weight:600}
.tile.on b{font-weight:700}
.tile.on small{color:var(--accent-ink);opacity:1}
.tile.on svg .band{stroke:var(--accent)}
.tile.dis,.tile:disabled{opacity:.32}
.tile.dis:hover,.tile:disabled:hover{background:transparent}
/* přihrádky: popisek řádku vlevo, dráha se segmenty vpravo (stejně široké díly, ať je jich 4 nebo 7) */
.divrow{grid-template-columns:52px minmax(0,1fr)}
.divrow .segs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.divrow .rl,.ctl.row .rl{color:var(--ink2);font-weight:500}
.divrow.insnote{color:var(--ink2)}
/* štítek: dvoudílný přepínač + pole na text */
.labelrow{grid-template-columns:186px minmax(0,1fr);gap:6px}
#boxLabel{display:grid;grid-template-columns:82px minmax(0,1fr)}
#boxLabel .tile{min-height:32px}
/* nadpis sekce: název vlevo, aktuální volba šedě vpravo */
.ctl-h{color:var(--ink);text-transform:none;letter-spacing:-.01em;font-weight:600}
.ctl-h small{color:var(--ink2)}
.ctl-h .val{color:var(--ink2);font-weight:400}

/* ---------- barvy: kulaté vzorníky, vybraný má prstenec ---------- */
.ccol .ch b{color:var(--ink);font-weight:600}
.ccol .ch b small{color:var(--ink2)}
.ccol .cname,.ccol.dimmed .cname{color:var(--ink2)}
.sw:not(.reset){border-radius:50%;box-shadow:inset 0 0 0 3px var(--side),inset 0 0 0 4px rgba(0,0,0,.10);transition:box-shadow .12s,transform .12s}
.sw:not(.reset):hover{transform:scale(1.06)}
.sw.active:not(.reset),.sw.light.active:not(.reset){box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 5px var(--side),inset 0 0 0 6px rgba(0,0,0,.10)}
.sw.active::after,.sw.light.active::after{content:none}
:root:not(.svetly) .sw:not(.reset){box-shadow:inset 0 0 0 3px var(--side),inset 0 0 0 4px rgba(255,255,255,.24)} :root:not(.svetly) .sw.active:not(.reset),:root:not(.svetly) .sw.light.active:not(.reset){box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 5px var(--side),inset 0 0 0 6px rgba(255,255,255,.24)}
.swatches.dim .sw{opacity:.4}
.sw.reset{background:transparent;border:0;border-radius:6px;color:var(--ink2);box-shadow:none}
.sw.reset:not(.dis):hover{background:var(--hover);color:var(--accent-ink);border:0}

/* ---------- levý panel, krok 1 ---------- */
.drawerblk .dhead h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.drawerblk .info{background:transparent;box-shadow:none;padding:0 2px;color:var(--ink2)}
.dims label input{font-weight:500;letter-spacing:-.01em}
.dims .x,.dims .mm{color:var(--ink3)}
.dopts label.sel select{background:var(--card);border:0;box-shadow:var(--shadow-card);border-radius:var(--r-md)}
.dopts label.sel .eye{color:var(--ink2);display:flex}
.pcap{color:var(--ink2)}
.pcap .plabel b{color:var(--ink)}
.picker{background:var(--card);border:0;box-shadow:var(--shadow-card);border-radius:var(--r-lg)}
.pgrid{gap:3px}
.pgrid i{background:var(--track);border:0;border-radius:6px}
.pgrid i:hover,.pgrid i.on{background:var(--accent);border:0}
.pgrid i.dis{opacity:.3}
.autodlg{background:var(--card);border:0;box-shadow:var(--shadow-pop);border-radius:var(--r-lg)}
.needgrp.pref .ctl-h{color:var(--accent-ink)}
.stepper button{background:var(--track);border:0;border-radius:999px;color:var(--ink)}
.stepper button:hover{background:var(--press)}
.propbar{background:var(--ok-soft);border:0;border-radius:var(--r-lg)}
.tourhint{background:var(--accent-soft);border:0;border-radius:var(--r-lg)}

/* ---------- plocha: světlá „studiová“ plocha, nástroje bez rámečků ---------- */
.stagebar .ghost{background:transparent}
.stagebar .ghost:hover{background:var(--hover)}
.stagebar .ghost:disabled:hover{background:transparent}
.stagebar .sep{background:var(--sep2);height:20px}
.stagebar .status{color:var(--ink2)}
.stagebar .status b{color:var(--ink)}
#stageTitle{color:var(--ink);font-size:15px;font-weight:600}
#btnProps.active{background:var(--accent-soft);color:var(--accent-ink);border:0}
.seg{background:var(--track);border:0;border-radius:10px;padding:2px;gap:2px}
.seg button{height:32px;border-radius:8px;color:var(--ink2);font-weight:500}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--seg-shadow)}
.board-wrap{border:0;border-radius:var(--radius);background:radial-gradient(120% 90% at 50% 30%,var(--stage1) 0%,var(--stage2) 100%);box-shadow:inset 0 0 0 .5px var(--sep)}
.box.light{color:#1d1d1f;text-shadow:none}   /* 2D: popisek na světlé krabičce (dřív bílý na béžové) */
.hint3d{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink2);box-shadow:var(--shadow-card)}
.stats{color:var(--ink2)}
.stats b{color:var(--ink);font-weight:600}
.frontmark{color:var(--ink2)}
.tip{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:0;box-shadow:var(--shadow-pop);color:var(--ink)}
.tip b{color:var(--accent-ink)}.tip span{color:var(--ink2)}
.tourbar{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:0;box-shadow:var(--shadow-pop)}
.tourbar .tstep,.tourbar .tcap b{color:var(--accent-ink)}
.tourbar .tcap{color:var(--ink)}
.tourbar .tctl button{background:var(--track);border:0;border-radius:999px;color:var(--ink)}
.tourbar .tctl button:hover{background:var(--press);border:0}

/* ---------- vyskakovací okna a dialogy ---------- */
.helppop,.guide{background:var(--elev);border:0;box-shadow:var(--shadow-pop);color:var(--ink2);border-radius:var(--r-lg)}
.helppop b,.guide b{color:var(--ink)}
.guide ul{color:var(--ink2)}
.modal{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{background:var(--elev);color:var(--ink);border:0;border-radius:18px;box-shadow:var(--shadow-pop)}
.sheet h3{color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.02em}
.sheet p{color:var(--ink2)}.sheet p b{color:var(--ink)}
.modal-box{border-radius:14px}

/* ---------- krok 2 a 3: karty na šedém panelu ---------- */
.zakbox{box-shadow:0 0 0 2px var(--accent)}
.zakedit{background:var(--accent-soft);border:0}
.zakedit pre.cmd,.detail pre.cmd,pre#manifestOut{background:var(--card);border:0;box-shadow:var(--shadow-card);color:var(--ink)}
.design{background:var(--card);border:0;box-shadow:var(--shadow-card);border-radius:var(--r-lg)}
.design.cur{box-shadow:0 0 0 2px var(--accent)}
.design .price{color:var(--ink);font-weight:600}
.design span{color:var(--ink2)}
#summary h4{color:var(--ink)}#summary h4 small{color:var(--ink2)}
#summary td{border-bottom:1px solid var(--sep)}
#summary tr.total td{color:var(--ink)}
#summary td.sumrow small{color:var(--ink2)}
#summary .sumdes .sdn b{color:var(--ink)}
#summary .sumdes .sdn small{color:var(--ink2)}
#summary .sumdes[open] .sdn small{color:var(--accent-ink)}
.paybox>div{background:var(--card);border:0;box-shadow:var(--shadow-card);border-radius:var(--r-lg)}
.paybox b{color:var(--ink);font-weight:600}
.paybox span{color:var(--ink2)}
.freeadd{background:var(--accent-soft);border:0}
.freeadd b{color:var(--accent-ink)}
.contactfirst{background:var(--card);border:0;box-shadow:var(--shadow-card);border-radius:var(--r-lg)}
.contactfirst label{color:var(--ink);font-weight:600}
.sendorder{background:var(--accent-soft);border:0}
.sendorder a.primary{background:var(--accent);border:0;border-radius:999px;color:var(--on-accent);font-weight:600}
.sendorder a.primary:hover{background:var(--accent-hi)}
.thanks{background:var(--ok-soft);border:0}
.thanks h3{color:var(--ok)}
.thanks ol{color:var(--ink2)}.thanks b{color:var(--ink)}
details summary{color:var(--ink2)}
label.check a{color:var(--accent-ink)}


/* ---------- výšky: dráha přidá 2 px nahoře i dole, tak jsou segmenty o 4 px nižší než dřívější kachličky
   → pravý sloupec má stejnou výšku jako dřív a vejde se do 1280×800 bez posouvání ---------- */
.tiles .tile,#boxLabel .tile{min-height:32px}
.tiles .tile.h40,.divrow .segs .tile{min-height:36px}
.tiles .tile.h54{min-height:50px}
.typepick .tile.h54 span{letter-spacing:-.02em}
.typepick .tile{padding:2px 0}
.tiles .tile,.divrow .segs .tile,#boxLabel .tile{padding:0 1px;gap:1px}            /* obsah (ikona + popisek) se vejde do segmentu bez navýšení řádku */
/* levý panel @1280×800 bez posouvání: pole velikostí 34 px na buňku, typ krabičky nižší */
.pgrid{gap:2px}
.pgrid i{height:34px}
@media (min-width:1440px){ .pgrid i{height:40px} }
.typepick .tiles .tile.h54{min-height:46px}
/* „Navrhni mi to“: jedna věc na řádek – ve dvou sloupcích v panelu 288 px nezbylo na název nic (šířka 0, i ve starém vzhledu) */
.needgrp{grid-template-columns:minmax(0,1fr)}
.needs .need .nl{white-space:normal;line-height:1.25}
/* štítek: pole na text ≥ 108 px, ať je celé „vyber krabičku“ */
.labelrow{grid-template-columns:182px minmax(0,1fr)}
#boxLabel{grid-template-columns:80px minmax(0,1fr)}
#labelText{padding:0 7px;font-size:12px}
/* „Jak měřit?“: kresba šuplíku v barvách režimu (CSS přebije barvy zapsané přímo v SVG) */
:root{--g-bg:#f2f2f5;--g-box:#e3e3e8;--g-in:#ffffff;--g-top:#c7c7cc;--g-line:#a1a1a6}
:root:not(.svetly){--g-bg:#1c1c1e;--g-box:#3a3a3c;--g-in:#2c2c2e;--g-top:#48484a;--g-line:#8d8d93}
.guide svg{background:var(--g-bg)}
.mguide>rect:nth-of-type(1){fill:var(--g-box);stroke:var(--g-line)}
.mguide>rect:nth-of-type(2){fill:var(--g-in)}
.mguide>rect:nth-of-type(3){fill:var(--g-top)}
.mguide>path{stroke:var(--g-line)}
.mguide line{stroke:var(--accent)}
.mguide text[fill="#ffb27a"]{fill:var(--accent-ink)}
.mguide text[fill="#a3abbd"]{fill:var(--ink2)}

/* ---------- „Jak na to“ (manual.js): ztmavení s otvory nad ovládacími prvky + vyskakovací okno se šipkou ---------- */
body.manual-on .tourhint{display:none!important}
.coach{position:fixed;inset:0;z-index:60;pointer-events:none}
.coach.hidden{display:none}
.coach-dim{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto}
.coach.live .coach-dim{pointer-events:none}   /* zastávka 1: rozměry jdou rovnou vyplnit */
.coach-shade{fill:rgba(0,0,0,.42)}
.coach-ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.6}
.coach-ring.cur{stroke-width:2.5;opacity:1}
:root:not(.svetly) .coach-shade{fill:rgba(0,0,0,.62)}
.coach-pop{position:absolute;width:340px;pointer-events:auto;background:var(--elev);color:var(--ink);border-radius:18px;box-shadow:var(--shadow-pop);
  padding:12px 16px 14px;display:flex;flex-direction:column;gap:8px;transition:left .25s ease,top .25s ease}
.coach-arrow{position:absolute;width:16px;height:16px;background:var(--elev);transform:rotate(45deg);border-radius:3px;box-shadow:var(--shadow-pop);clip-path:polygon(0 0,100% 0,0 100%)}
.coach-arrow.left{left:-8px;transform:rotate(-45deg)}
.coach-arrow.right{right:-8px;transform:rotate(135deg)}
.coach-arrow.up{top:-8px;transform:rotate(45deg)}
.coach-arrow.none{display:none}
/* volba, kterou ukázka právě předvádí, svítí (app.js lightManual) – uživatel: „měly by se osvítit zvolené metody“ */
.man-lit{position:relative;z-index:1;animation:manLit 1.1s ease-in-out infinite alternate}
.pgrid i.man-lit{animation-name:manLitCell}
@keyframes manLit{from{box-shadow:0 0 0 2px var(--accent),0 0 4px 0 rgba(255,106,19,.3)}to{box-shadow:0 0 0 2px var(--accent),0 0 16px 4px rgba(255,106,19,.7)}}
@keyframes manLitCell{from{box-shadow:0 0 0 0 rgba(255,106,19,0)}to{box-shadow:0 0 10px 2px rgba(255,106,19,.75)}}
@media (prefers-reduced-motion:reduce){ .man-lit{animation:none;box-shadow:0 0 0 2px var(--accent),0 0 12px 3px rgba(255,106,19,.6)} .pgrid i.man-lit{box-shadow:0 0 8px 2px rgba(255,106,19,.7)} }
.man-top{display:flex;align-items:center;gap:10px}
.man-step{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#manClose{height:28px;padding:0 12px;font-size:12px}
.man-dots{display:flex;gap:4px}
.man-dots i{flex:1;height:3px;border-radius:2px;background:var(--track)}
.man-dots i.on{background:var(--accent)}
.coach-pop h2{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:2px 0 0}
.man-lead{font-size:13.5px;line-height:1.45;color:var(--ink2);margin:0}
.man-lead b{color:var(--ink);font-weight:600}
.man-cap{min-height:38px;font-size:13px;line-height:1.35;color:var(--ink);background:var(--accent-soft);border-radius:12px;padding:8px 12px}
.man-cap b{color:var(--accent-ink);font-weight:600}
.man-cap.empty{display:none}
.man-nav{display:flex;gap:8px;margin-top:2px}
.man-nav button{height:42px;font-size:15px}
#manPrev{flex:0 0 auto;padding:0 16px}
#manNext{flex:1 1 auto}
#manNext .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- „Krabička podle věci“ (doporuceni.js): okno se skupinami a dlaždicemi věcí ---------- */
.typepick .pcap{justify-content:space-between}
#btnRec{font-size:13px;white-space:nowrap}
.recbox{width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.rechead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rechead h3{margin:0}
.recbox>.hint{margin:0}
/* volby okna Podle věci: Věci uvnitř + Natočení (segmenty), v režimu Věci „Teď v krabičce“ + Vyndat */
.recopts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;flex:0 0 auto}
.recopt{display:inline-flex;align-items:center;gap:8px;min-width:0}
.recopt .plabel{font-size:13px;color:var(--ink2);white-space:nowrap}
.recopt .plabel b{color:var(--ink);font-weight:600}
.recopt .seg{display:inline-flex;flex:0 0 auto}
.recopt .seg button,html.mob .recopt .seg button{width:auto;height:30px;padding:0 12px;font-size:13px;white-space:nowrap}   /* telefon má jinak segmenty 44 px */
.recopt>.ghost{height:30px;padding:0 12px;border-radius:999px;font-size:13px}
.rectabs{display:flex;gap:2px;padding:2px;background:var(--track);border-radius:10px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.rectabs::-webkit-scrollbar{display:none}
.rectabs button{flex:1 0 auto;height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-size:13px;font-weight:500;white-space:nowrap}
.rectabs button.active{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--seg-shadow)}
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;overflow-y:auto;min-height:0;padding:2px}
.recitem{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:0;border-radius:12px;background:var(--card);box-shadow:var(--shadow-card);color:var(--ink);cursor:pointer;transition:box-shadow .12s,transform .1s}
.recitem:hover{box-shadow:0 0 0 2px var(--accent)}
.recitem:active{transform:scale(.98)}
.recitem img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;margin:-2px 0 6px;border-radius:8px;background:radial-gradient(120% 90% at 50% 30%,var(--well1) 0%,var(--well2) 100%)}   /* náhled krabičky z 3D (tools/nahledy_veci.mjs) */
.recitem b{font-size:14px;font-weight:600;line-height:1.25}
.recitem span{font-size:12px;color:var(--ink2);line-height:1.3}
.recitem small{font-size:12px;color:var(--accent-ink);font-weight:500;margin-top:3px;line-height:1.3}
.recitem.cur{box-shadow:0 0 0 2px var(--accent)}   /* věc, která už v krabičce je */
.recitem.dis{opacity:.45;cursor:not-allowed}
.recitem.dis:hover{box-shadow:var(--shadow-card)}
.recitem.dis small,.recitem.info small{color:var(--ink2)}
.recinfo{background:var(--accent-soft);color:var(--ink)!important;border-radius:12px;padding:10px 12px;margin:0}