/* ============================================================
   GridBox konfigurátor – styles.css (FINÁLNÍ SPEC, kompletní náhrada)
   Zachováno beze změny významu: 2D plocha (.board/.cell/.box/.ghost-box/.plate/.lvlbadge…),
   modal + faktura + print, měřicí návod (.mguide), tooltip (.tip), catghost, 3D canvas.
   Zrušeno: všechny bloky .toolbar*, .bincard .toolbar*, .segsel/.segbtn, .divopt, .flooropt/.floornote,
   .colorbtn/.colorpop (popover), .scope (vizuál), .fav, .helpbtn kroužek, media ≤1500/≤1250/≤900, .presets, .stage-head.
   ============================================================ */

/* ---------- 1. tokeny ---------- */
:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --tile:#232833; --tile-hover:#2a3140;
  --line:#323947; --line2:#475063;
  --text:#eef0f5; --muted:#a3abbd; --muted2:#b7bfd0; --dim:#6f7889;
  --accent:#ff7a1a; --accent2:#ffb27a; --accent-text:#ffc28a; --accent-soft:rgba(255,122,26,.16);
  --ok:#3ecf8e; --danger:#ff5c5c;
  --radius:12px; --r-lg:12px; --r-md:10px; --r-sm:8px;
  --hit:36px; --hit-lg:40px; --hit-xl:44px;
  --gap-sec:4px; --pad-sec:4px;   /* oddělovač sekcí = mezera + barevná linka 1 px + odsazení; @800 px výšky je v pravém sloupci jen 15 px rezervy */
  --sec-line:linear-gradient(90deg,var(--accent) 0,rgba(255,122,26,.7) 40%,rgba(255,122,26,.32) 100%);   /* barevná linka mezi sekcemi – jedna pro celou aplikaci */
}
@media (min-height:860px){ :root{ --gap-sec:8px; --pad-sec:8px; } }     /* vzduch podle VÝŠKY okna (sloupec nesmí rolovat), ne podle šířky */
@media (min-height:1000px){ :root{ --gap-sec:11px; --pad-sec:11px; } }

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h2{margin:0 0 6px;font-size:18px;line-height:1.2}
h3{margin:8px 0 4px;font-size:13px;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;font-weight:700;line-height:18px}
.hint{color:var(--muted2);font-size:13px;margin:0 0 8px;line-height:1.4}
kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:12px}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}

/* ---------- 2. hlavička 52 px ---------- */
.top{display:flex;align-items:center;gap:16px;padding:0 20px;height:52px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand small{color:var(--muted2);font-weight:400;font-size:13px}
.brand .wm{height:21px;width:auto;display:block;margin-right:2px}.brand .wm-s,.brand .wm~.logo,html.svetly .brand .wm:not(.wm-s){display:none}html.svetly .brand .wm-s{display:block}   /* nápis Zapadne s logem Dvě půlky (23. 10.) */
.logo{width:22px;height:22px;border:0;border-radius:0;background:url(img/favicon.svg) center/contain no-repeat}   /* značka Dvě půlky (23. 10.) */
.steps{display:flex;gap:6px;margin-left:auto;flex:1 1 auto;justify-content:center;min-width:0}
.steps button{background:transparent;border:1px solid transparent;color:var(--muted2);height:36px;padding:0 14px;border-radius:999px;font-size:14px;white-space:nowrap}
.steps button.active{background:var(--panel2);color:var(--text);border-color:var(--line2)}
.steps button.done{color:var(--ok)}
.total-pill{margin-left:auto;width:240px;flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);padding:4px 14px 5px;border-radius:14px;font-size:14px;display:flex;flex-direction:column;gap:2px;line-height:18px}
.total-pill strong{color:var(--accent-text);font-size:15px}
.pill-row{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
.pill-bar{height:4px;background:#2a303b;border-radius:2px;overflow:hidden}.pill-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.pill-note{font-size:12px;color:var(--muted2);line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 212 px obsahu – „do dopravy zdarma zbývá 1 514 Kč“ ≈ 197 px, bez ořezu */
.pill-note.ok{color:var(--ok)}

/* ---------- 3. rozvržení ---------- */
body.cfg{display:flex;flex-direction:column;height:100vh;overflow:hidden}
body.cfg .top{flex:0 0 auto}
.layout{display:grid;grid-template-columns:minmax(420px,26%) minmax(0,1fr);flex:1;min-height:0}   /* krok 2: úzký panel, 3D náhled má většinu šířky */
body.cfg.s3 .layout{grid-template-columns:minmax(520px,36%) minmax(0,1fr)}                          /* krok 3: souhrn + formulář potřebují víc místa */
body.cfg.s1 .layout{grid-template-columns:288px minmax(0,1fr) 408px}                              /* krok 1 */
@media (min-width:1440px){ body.cfg.s1 .layout{grid-template-columns:300px minmax(0,1fr) 408px} }
@media (min-width:1900px){ body.cfg.s1 .layout{grid-template-columns:320px minmax(0,1fr) 412px} }

/* ---------- 4. levý panel ---------- */
.panel{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:8px 10px 0}
.panel .step{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;padding:0 0 8px;scrollbar-gutter:stable;scrollbar-width:thin}
.panel .step>*{flex-shrink:0}                                 /* pojistka: obsah vyšší než panel se nesmí smrsknout, ale rolovat */
.panel .step::-webkit-scrollbar,#binCardSlot::-webkit-scrollbar{width:8px}
.panel .step::-webkit-scrollbar-thumb,#binCardSlot::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.panel .nav{flex:0 0 auto;display:flex;gap:8px;align-items:center;justify-content:space-between;height:48px;margin:0 -10px;padding:6px 10px;border-top:1px solid var(--line)}
.panel .nav .helpwrap{margin:0 auto}
body.cfg:not(.s1) .panel .nav .helpwrap{display:none}        /* nápověda k ovládání plochy je jen v kroku 1 */
.panel .step.wide,body.cfg:not(.s1) .panel .step{padding-right:8px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted2)}
label input,label select,label textarea{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 12px;height:44px;color:var(--text);font-size:14px}
label textarea{height:auto;min-height:64px;padding:8px 12px;resize:vertical}
label.check,label.radio{flex-direction:row;align-items:center;gap:10px;color:var(--text);font-size:13px}
body.cfg label.check,body.cfg label.radio{min-height:40px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--tile)}
label.check input,label.radio input{width:18px;height:18px;accent-color:var(--accent);margin:0;flex:0 0 auto;height:18px;padding:0}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.row>label{flex:1}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.row2>button{height:40px;padding:0 8px;min-width:0;font-size:13px}
.info{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:1.45}
.info b{color:var(--accent2)}

/* tlačítka: 36 px základ, primární 40/44 */
button.primary{background:var(--accent);color:#111;border:1px solid var(--accent);border-radius:var(--r-md);height:40px;padding:0 16px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
button.primary:hover{background:var(--accent2)}
button.primary.xl{height:48px}
button.ghost,a.ghost{background:var(--tile);border:1px solid var(--line2);border-radius:var(--r-md);height:36px;padding:0 12px;color:var(--text);font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none}
button.ghost:hover,a.ghost:hover{background:var(--tile-hover);border-color:var(--muted)}
button.ghost.danger{color:var(--danger);border-color:#5a2a2a}
button.ghost:disabled,button.primary:disabled,.tile:disabled{opacity:.45;cursor:not-allowed}
.wide{width:100%}
.grow{flex:1 1 auto}
button.linkbtn{background:none!important;border:0!important;color:var(--accent2)!important;cursor:pointer;padding:0 4px!important;font-size:13px;text-decoration:underline dotted;border-radius:0;height:auto;display:inline-flex;align-items:center;min-height:32px;margin:-8px 0}   /* odkaz v textu s cílem ≥32 px, řádek textu to nezvýší */
.linky{background:none!important;border:0!important;padding:0 2px!important;margin-left:auto;height:36px!important;display:inline-flex;align-items:center;color:var(--accent-text)!important;text-decoration:underline dotted;font-size:13px;cursor:pointer}

/* velikostní pole 6×8 (krok 2) */
.picker{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 8px 8px;width:100%}
.pcap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;height:18px;line-height:18px;font-size:13px;color:var(--muted2);margin-bottom:4px;white-space:nowrap;overflow:hidden}
.pcap .plabel{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pcap .plabel b{color:var(--text)}
.pgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;width:100%}   /* buňky ≈ 39–40 × 36 px */
.pgrid i{display:block;height:36px;background:#2b3140;border-radius:5px;cursor:pointer;transition:background .08s;border:1px solid transparent}
.pgrid i:hover,.pgrid i.on{background:var(--accent);border-color:var(--accent2)}
.pgrid i.dis{opacity:.25;cursor:not-allowed}
@media (min-width:1440px){ .pgrid i{height:40px} }


/* „Navrhni mi to“ – inline checklist pod tlačítkem (ne popover) */
.autodlg{background:var(--panel2);border:1px solid var(--accent);border-radius:var(--r-lg);padding:10px}
.needs{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;max-height:46vh;overflow-y:auto;scrollbar-width:thin}
.needgrp{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.needgrp .ctl-h{grid-column:1/-1;margin:4px 0 0}
.needgrp.pref .ctl-h{color:var(--accent2)}
.needs .need{display:flex;align-items:center;gap:4px;min-width:0}
.needs .need label.check{flex:1;min-width:0;min-height:36px;padding:2px 6px;font-size:13px;line-height:1.2;border-radius:var(--r-sm);gap:6px}
.needs .need .nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.stepper button{width:30px;height:36px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font-size:16px;line-height:1;padding:0}
.stepper b{min-width:14px;text-align:center;font-size:13px}
.propbar{display:flex;align-items:center;gap:8px;background:rgba(62,207,142,.12);border:1px solid var(--ok);border-radius:var(--r-md);padding:6px 10px;font-size:13px}
.propbar>span:first-child{flex:1;min-width:0}
.propbar .pbtn{display:flex;gap:4px;flex:0 0 auto}

/* ---------- 5. plocha ---------- */
body.cfg .stage{display:flex;flex-direction:column;padding:12px;gap:8px;min-width:0;min-height:0;position:relative}
.stagebar{display:flex;align-items:center;gap:4px;min-height:40px;flex-wrap:wrap}
.stagebar .sep{width:1px;height:24px;background:var(--line2);margin:0 2px;flex:0 0 auto}
.stagebar .status{flex:1 1 100px;min-width:0;font-size:13px;line-height:17px;color:var(--muted2);padding:0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stagebar .status b{color:var(--text)}
body.cfg:not(.s1) .stagebar .undo,body.cfg:not(.s1) .stagebar .sep,body.cfg:not(.s1) .stagebar .status,body.cfg:not(.s1) #btnClear{display:none}
#stageTitle{font-size:14px;font-weight:700;color:var(--muted2);flex:1 1 auto;min-width:0}
body.cfg.s1 #stageTitle{display:none}
.undo{display:inline-flex;gap:4px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-md);overflow:hidden;background:var(--panel)}
.seg button{background:transparent;border:0;color:var(--muted2);width:52px;height:36px;font-size:13px;font-weight:600}
.seg button.active{background:var(--accent);color:#111}
.viewseg{margin-left:0}
#btnShareImg{margin-left:auto}
#btnProps.active{background:var(--accent);color:#111;border-color:var(--accent)}
@media (max-width:1439px){ .stagebar .undo .lbl,#btnProps .lbl{display:none} .stagebar .undo button,#btnProps{padding:0 9px} }                                   /* už NE position:absolute */
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:0;position:relative;
  background:radial-gradient(1000px 700px at 55% 25%,#3b4353 0%,#222732 55%,#171a21 100%)}
#view3d{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hint3d{position:absolute;right:12px;bottom:10px;color:var(--muted2);font-size:12px;line-height:1.35;pointer-events:none;background:rgba(14,16,20,.72);padding:4px 12px;border-radius:14px;max-width:calc(100% - 24px);white-space:normal;text-align:right}   /* delší nápověda se zalomí, nikdy neusekne */
.stats .linky{font-size:12px!important;padding:0!important}
.stats{display:flex;gap:4px 6px;font-size:12px;color:var(--muted2);flex-wrap:wrap;min-height:36px;align-items:center;white-space:nowrap}   /* doplňková lišta – 12 px, ať se @1280 vejde na jeden řádek */
.stats>span{flex:0 0 auto}
.stats b{color:var(--text)}
body.cfg .stage>#toolbar{display:none}
/* průvodce „co co nastavuje“ */
.tourhint{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-md);padding:6px 10px;font-size:13px}
.tourhint span{flex:1;min-width:0}
.tourbar{position:absolute;left:12px;right:12px;top:12px;z-index:45;display:flex;align-items:center;gap:10px;background:rgba(12,14,18,.9);backdrop-filter:blur(8px);border:1px solid var(--accent);border-radius:14px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.tourbar .tstep{flex:0 0 auto;font-size:12px;color:var(--accent2);font-weight:700;white-space:nowrap}
.tourbar .tcap{flex:1;min-width:0;font-size:15px;line-height:1.35;color:#fff}
.tourbar .tcap b{color:var(--accent2)}
.tourbar .tcap.empty{opacity:.5}
.tourbar .tctl{display:flex;gap:4px;flex:0 0 auto}
.tourbar .tctl button{background:var(--tile);border:1px solid var(--line2);color:var(--text);border-radius:8px;height:32px;min-width:32px;padding:0 8px;font-size:14px;white-space:nowrap}
.tourbar .tctl button:hover{border-color:var(--accent)}
.tourlock{position:absolute;inset:0;z-index:40;background:transparent;cursor:default}
main.layout{position:relative}
.ctl.tour-on{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px;box-shadow:0 0 0 6px rgba(255,122,26,.12)}
.ctl.tour-on .ctl-h,.ctl.tour-on .rl{color:var(--accent2)}                                /* pojistka: kdyby JS lištu přestěhoval zpět do plochy */

/* 2D půdorys – zachováno, jen písmo ≥12 px */
.board{position:relative;background:#c9b8a1;border:8px solid #d9c9b0;border-radius:6px;box-shadow:inset 0 0 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25)}
.board .base{position:absolute;inset:0}
.cell{position:absolute;box-sizing:border-box;border:0;background:transparent;transition:background .15s}
.cell.win{background:#cdbca3;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cell.nobase{border:1px dotted rgba(0,0,0,.25)}
.plate{position:absolute;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.cell.free{cursor:crosshair}
.cell.free:hover{background:rgba(255,122,26,.45)}
.plateline{position:absolute;border-color:var(--accent);border-style:dashed;border-width:0;pointer-events:none;opacity:.9}
.plateline.v{border-left-width:2px}
.plateline.h{border-top-width:2px}
.box{position:absolute;border-radius:5px;box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);cursor:grab;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 2px #000;overflow:hidden}
.box:active{cursor:grabbing}
.box:hover{filter:brightness(1.12)}
.box .inner{position:absolute;inset:var(--rim);border-radius:3px;background:var(--body);pointer-events:none}
.box .lbl{position:relative;z-index:1;pointer-events:none;text-align:center;line-height:1.1}
.box .lbl small{display:block;font-weight:400;opacity:.85;font-size:12px}
.box.sel{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px #0b0d12,0 0 0 7px rgba(255,255,255,.95),0 0 22px rgba(0,0,0,.55);z-index:4}
.box .div{position:absolute;background:var(--rim-c);opacity:.9;pointer-events:none}
.box .div.editable{pointer-events:auto;cursor:pointer;outline:1px solid rgba(255,255,255,.35)}
.box .div.editable:hover{background:var(--danger)}
.box .seam{position:absolute;pointer-events:none;opacity:.8}
.box .tab{position:absolute;border-radius:2px;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.box .tab span{background:#fff;color:#111;font-size:12px;font-weight:600;padding:0 5px;border-radius:2px;line-height:1.3;white-space:nowrap}
.box.pop{animation:pop .3s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.box.carried{opacity:.45;outline:2px dashed #fff}
.box.divedit{outline:2px dashed var(--ok);outline-offset:2px;overflow:visible}
.box .mk{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:2px solid #fff;font-size:15px;font-weight:800;line-height:1;cursor:pointer;padding:0;z-index:5;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.box .mk.del{background:#e0342f;color:#fff}.box .mk.add{background:#2fa84f;color:#fff}
.box .mk:hover{transform:translate(-50%,-50%) scale(1.15)}
.box.stacked{outline:2px dashed rgba(255,255,255,.9);outline-offset:-6px;box-shadow:0 8px 18px rgba(0,0,0,.55)}
.box .ownc{position:absolute;left:4px;top:2px;font-style:normal;font-size:12px;color:#fff;text-shadow:0 0 3px #000;pointer-events:none;z-index:2;opacity:.9}
.box .lvlbadge{position:absolute;right:4px;top:4px;font-style:normal;font-size:12px;font-weight:700;background:var(--accent);color:#111;border-radius:999px;padding:1px 8px;pointer-events:none;text-shadow:none;z-index:2}
.ghost-box{position:absolute;border:2px dashed #fff;border-radius:5px;background:rgba(0,0,0,.42);pointer-events:none;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{background:rgba(0,0,0,.6)}}
.ghost-box.bad{border-color:var(--danger);background:rgba(255,92,92,.25)}
.ghost-box.stack{border-color:var(--ok);background:rgba(62,207,142,.22)}
.ghost-box.stack .gprice{background:var(--ok)}
.ghost-box .gprice,.ghost-price{position:absolute;background:var(--accent);color:#111;font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;pointer-events:none;white-space:nowrap}
.ghost-box .gprice{right:-4px;top:-12px}
.conn{position:absolute;background:#2a2c31;border:1px solid var(--accent);border-radius:3px;opacity:.9;pointer-events:auto;z-index:2}
.conn::before{content:'';position:absolute;inset:25% 40%;background:var(--accent);opacity:.7}
.frontmark{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);pointer-events:none}
.spacer{position:absolute;opacity:.85;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.catghost{position:fixed;z-index:100;pointer-events:none;background:var(--accent);color:#111;font-weight:600;font-size:13px;padding:4px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.catghost.bad{background:var(--danger);color:#fff}
.tip{position:fixed;z-index:120;pointer-events:none;background:rgba(14,16,20,.94);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.5;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.45);max-width:300px}
.tip b{color:var(--accent2)}.tip span{color:var(--muted);display:inline-block;min-width:78px}

/* ---------- 6. pravý sloupec (krok 2) ---------- */
.bincard{display:none;flex-direction:column;min-height:0;overflow:hidden;background:var(--panel);border-left:1px solid var(--line);position:relative}
body.cfg.s1 .bincard{display:flex}
.bincard header{flex:0 0 auto;height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line)}
.bc-titles{display:flex;flex-direction:column;min-width:0;flex:1}
.bc-titles b{font-size:16px;line-height:20px;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-titles span{font-size:13px;line-height:16px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bincard.nosel .bc-titles b{color:var(--muted2)}
.bincard.nosel .bc-titles span{color:var(--muted)}
#binCardClose{flex:0 0 auto;height:36px;padding:0 10px}
#binCardSlot{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 12px;scrollbar-gutter:stable;scrollbar-width:thin}
#toolbar{display:flex;flex-direction:column;gap:var(--gap-sec)}
#binCardSlot>*,#toolbar>*{flex-shrink:0}                       /* pojistka proti smrsknutí (zjištěno v mockupu: tlačítko 360×20 px) */
#binCardEmpty{display:none}
.scope{display:none}
.bincard footer{flex:0 0 auto;display:flex;gap:4px;padding:4px 8px 6px;border-top:1px solid var(--line)}
.bincard footer button{flex:1 1 auto;padding:0 8px;min-width:0}
.bincard footer #btnApplyAll{flex:1 1 auto}
/* nadpis sekce: název vlevo, aktuální hodnota slovy vpravo */
.ctl-h{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;height:18px;line-height:18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);white-space:nowrap}
.ctl-h small{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
.ctl-h .val{margin-left:auto;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--accent-text);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* řádek s popiskem vlevo (štítek, síla stěny, vzhled stěn, okraj) */
.ctl.row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px;align-items:center}
.ctl.row .rl{font-size:13px;font-weight:600;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* kachličky */
.tiles{display:grid;gap:4px}
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.t8{grid-template-columns:repeat(8,minmax(0,1fr))}
.tiles.t9{grid-template-columns:repeat(9,minmax(0,1fr))}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:36px;min-width:0;padding:2px 1px;background:var(--tile);border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--text);font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-align:center;transition:background .12s,border-color .12s}
.tile.h40{min-height:40px}.tile.h54{min-height:54px}
.tile.row{flex-direction:row;gap:5px;flex-wrap:nowrap;align-items:center}   /* .row je i obecná třída řádku – tady se nesmí lámat */
.tile b{font-size:14px;font-weight:700;line-height:1.1}
.tile small{font-size:12px;color:var(--muted2);line-height:1.1}
.tile .two{white-space:normal;line-height:14px;display:block}
.tile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto}
.tile svg .band{stroke:currentColor;stroke-width:4;stroke-linecap:round;opacity:.55}
.tile:hover{border-color:var(--muted);background:var(--tile-hover)}
.tile.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text)}   /* bez ✓ přes text – stav nese 2px oranžový rám */
.tile.on small{color:var(--accent-text);opacity:.85}
.tile.on svg .band{stroke:var(--accent);opacity:1}
.tile.dis{opacity:.38;cursor:not-allowed}
.tile.dis b{text-decoration:line-through}
/* přihrádky: dvě pojmenované řady po 7 */
.divopts{display:flex;flex-direction:column;gap:4px}
.divrow{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:4px;align-items:center}
.divrow .rl{font-size:13px;font-weight:600;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.divrow .segs{display:contents}                               /* obal segmentů pro konfigurator.css; tady se chová, jako by nebyl */
/* štítek: dvě kachličky + text */
.labelrow{display:grid;grid-template-columns:80px 96px minmax(0,1fr);gap:4px;align-items:center}
#boxLabel{display:contents}
#labelText{height:36px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel2);padding:0 8px;font-size:13px;min-width:0;color:var(--text)}
#labelText:disabled{opacity:.45}
/* barvy: tři sloupce 3×4 vzorníků 36 px */
.colorpop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px}
.ccol{min-width:0}
.ccol .ch{display:flex;flex-direction:column;height:28px;margin-bottom:4px;min-width:0}
.ccol .ch b{font-size:13px;font-weight:700;line-height:14px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccol .ch b small{font-weight:400;font-size:12px;color:var(--muted)}
.ccol .cname{font-size:12px;line-height:14px;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swatches{display:grid;grid-template-columns:repeat(3,36px);gap:4px}
.sw{width:36px;height:36px;border-radius:8px;border:0;padding:0;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sw.active{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(0,0,0,.4)}
.sw.active::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;text-shadow:0 0 3px #000}
.sw.light.active{box-shadow:inset 0 0 0 3px #111,inset 0 0 0 4px rgba(255,255,255,.55)}
.sw.light.active::after{color:#111;text-shadow:none}
.swatches.dim .sw{opacity:.45}
.ccol .ch{position:relative}
.ccol:not(:last-child) .ch b,.ccol:not(:last-child) .ch .cname{padding-right:28px}   /* místo pro ↺ jen u Tělo a Okraj */
.sw.reset{position:absolute;right:0;top:2px;width:24px;height:24px;border-radius:6px;background:var(--tile);border:1px dashed var(--line2);color:var(--muted2);font-size:14px;box-shadow:none;display:flex;align-items:center;justify-content:center}
.sw.reset:not(.dis):hover{border-color:var(--accent);color:var(--accent2)}
.sw.reset.dis{opacity:.3;cursor:not-allowed}
.swatches.dim .sw.active::after{content:""}
.ccol.dimmed .cname{color:var(--muted)}
.colorgrp{display:flex;flex-direction:column;gap:4px}

/* ---------- 7. krok 1 ---------- */
.dims{display:flex;align-items:flex-end;gap:6px}
.dims label{flex:1;min-width:0;font-size:13px}
.dims label input{padding:0 8px;width:100%;min-width:56px;height:48px;font-size:20px;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.dims label input::-webkit-outer-spin-button,.dims label input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dims .x{color:var(--muted);padding-bottom:14px}.dims .mm{color:var(--muted2);font-size:13px;padding-bottom:15px}
/* blok šuplíku nahoře v kroku 1 (rozměry, mřížka, vzhled náhledu) – panel je jen 288 px, proto nižší pole */
.drawerblk{display:flex;flex-direction:column;gap:6px;padding:10px 0 8px;border-bottom:1px solid var(--line);position:relative}   /* 10 px nahoře: tlačítko „Jak měřit?“ (margin −8) i jeho focus ring musí zůstat uvnitř rolovací .step */
.drawerblk .dhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;line-height:1.2}
.drawerblk .dhead h2{margin:0;font-size:16px}                /* nadpis + „Jak měřit?“ na jednom řádku i v panelu 288 px */
.drawerblk .dims .mm{padding-bottom:12px}
.drawerblk .helpwrap{position:static}                       /* návod se otevírá pod celým blokem přes celou šířku panelu, ne z půlky řádku */
.drawerblk .guide.helppop{left:0;right:0;width:auto;max-width:none}
.drawerblk .dims label input{height:40px;font-size:18px;min-width:0}
.drawerblk .dims .x{padding-bottom:11px}
.drawerblk .info{padding:7px 10px;line-height:1.4}
.dopts{display:flex;gap:6px;align-items:stretch}
body.cfg .dopts label.check{flex:0 0 auto;min-height:36px;padding:0 8px;gap:8px}   /* specifičtější než body.cfg label.check (40 px, 10 px) */
.dopts label.sel{flex:1;min-width:0;flex-direction:row;align-items:center;gap:4px;font-size:13px}
.dopts label.sel .eye{font-size:15px;line-height:1;flex:0 0 auto}
.dopts label.sel select{flex:1;min-width:0;height:36px;padding:0 6px;font-size:12px}   /* 12 px + krátké názvy: všech 5 vzhledů se vejde i v panelu 288 px */
.helpwrap{position:relative;display:inline-block;margin:0}
.helppop{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:300px;max-width:calc(100vw - 40px);background:#0e1014;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;color:var(--muted2);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.helppop b{color:var(--text)}.helppop ul{margin:6px 0 0;padding-left:16px}.helppop li{margin:3px 0}
.nav .helppop{top:auto;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}   /* nápověda v patičce panelu se otevírá nahoru */
.guide{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:13px}
.guide svg{width:100%;height:auto;background:#12141a;border-radius:8px;margin-bottom:6px;max-height:140px}
.guide ul{margin:0;padding-left:16px;color:var(--muted2)}.guide li{margin:3px 0}.guide b{color:var(--text)}
.guide.helppop{width:340px;padding:10px}
.mguide .m{opacity:0;animation:mfade 6s infinite}
.mguide .m line[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:mdraw 6s infinite}
.mguide .m2,.mguide .m2 line[pathLength]{animation-delay:2s}.mguide .m3,.mguide .m3 line[pathLength]{animation-delay:4s}
@keyframes mfade{0%{opacity:0}5%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
@keyframes mdraw{0%{stroke-dashoffset:1}12%{stroke-dashoffset:0}30%{stroke-dashoffset:0}36%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}

/* ---------- 8. krok 3 ---------- */
.zakbox{border-color:var(--accent)}
.zakedit{margin:8px 0 10px;padding:10px 12px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft);font-size:13px}
.zakedit pre.cmd,.detail pre.cmd{margin:6px 0;padding:8px 10px;background:#0a0c10;border:1px solid var(--line);border-radius:8px;font-size:12px;white-space:pre-wrap;word-break:break-all;user-select:all}
.designs{display:flex;flex-direction:column;gap:6px}
.design{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;display:flex;align-items:center;gap:10px;min-height:56px}
.design.cur{border-color:var(--accent)}
.design b{display:block;font-size:14px}.design b small{font-size:12px}.design span{font-size:12px;color:var(--muted2)}
.design .grow{flex:1;min-width:0}.design .price{font-weight:700;color:var(--accent2);white-space:nowrap;font-size:14px}
.design .btns{display:flex;gap:4px}.design .btns button{height:36px;padding:0 10px;font-size:13px}

/* ---------- 9. krok 4 ---------- */
#summary h4{margin:10px 0 4px;font-size:14px;color:var(--accent-text)}#summary h4 small{color:var(--muted2);font-weight:400;font-size:13px}
#summary table{width:100%;border-collapse:collapse;font-size:13px}
#summary td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
#summary td:first-child{word-break:normal;overflow-wrap:anywhere;padding-right:10px}
#summary td:last-child{text-align:right;white-space:nowrap}
#summary tr.total td{font-weight:700;border:0;color:var(--accent-text);font-size:14px}
#summary td.sumrow{display:flex;gap:10px;align-items:flex-start}
#summary td.sumrow .pic{flex:0 0 auto;margin-top:2px;border-radius:4px}
#summary td.sumrow b{display:block;font-size:13px}
#summary td.sumrow small{display:block;color:var(--muted2);font-size:12px;line-height:1.35;margin-top:2px}
.paybox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 4px}
.paybox>div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.paybox b{display:block;font-size:16px;color:var(--accent-text);line-height:1.2}
.paybox span{display:block;font-size:12px;color:var(--muted2);line-height:1.3;margin-top:2px}
.freeadd{margin:8px 0;padding:8px 10px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.freeadd b{color:var(--accent-text)}
.prevrow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.prevrow svg{flex:0 0 auto;max-width:150px;height:auto}
.prevrow table{flex:1 1 260px;min-width:0}
.contactfirst{background:var(--panel2);border:1px solid var(--accent);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0 6px}
.contactfirst label{font-weight:700;font-size:14px;color:var(--text)}
.contactfirst label input{height:48px;font-size:15px;font-weight:400}
.contactfirst .hint{margin:6px 0 8px}
.share{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.thanks{background:var(--panel2);border:1px solid var(--ok);border-radius:12px;padding:14px;font-size:14px}
.thanks h3{color:var(--ok);text-transform:none;letter-spacing:0;font-size:16px;margin:0 0 8px}.thanks ol{padding-left:18px;color:var(--muted2);margin:0 0 10px}.thanks li{margin:4px 0}.thanks b{color:var(--text)}
.qrwrap{display:flex;gap:12px;align-items:center;background:#fff;color:#111;border-radius:10px;padding:8px;margin:8px 0}.qrwrap svg{flex:0 0 auto}
details summary{cursor:pointer;color:var(--muted2);font-size:13px;margin-top:10px}
pre#manifestOut{background:#0a0c10;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:11px;max-height:300px;overflow:auto;white-space:pre-wrap}
form#orderForm{display:flex;flex-direction:column;gap:8px}

/* ---------- 10. modaly, faktura, tisk (zachováno) ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-start;justify-content:center;overflow:auto;z-index:50;padding:30px 10px}
.modal-box{background:#fff;color:#111;width:800px;max-width:100%;border-radius:8px;overflow:hidden}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:10px;background:#eee}
.modal-actions .ghost{color:#111;border-color:#bbb;background:#fff}
.sheet{background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;width:620px;max-width:100%;font-size:14px;line-height:1.5;box-shadow:0 20px 60px rgba(0,0,0,.6);margin-top:40px}
.sheet.sharebox{width:960px}
.sharegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sharepre img{width:100%;max-height:520px;object-fit:contain;background:#000;border-radius:10px;display:block;min-height:200px}
.shareopts{display:flex;flex-direction:column;gap:6px;min-width:0}
.shareopts .ctl-h{margin-top:4px}
#shareText{width:100%;min-height:130px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--text);padding:8px;font-size:13px;line-height:1.4;resize:vertical}
.sharebtns{margin-top:6px;gap:6px}
.sheet h3{color:var(--accent-text);text-transform:none;letter-spacing:0;font-size:18px;margin:0 0 10px}
.sheet p{margin:0 0 10px;color:var(--muted2)}.sheet p b{color:var(--text)}
.invoice{padding:36px 40px;font:13px/1.5 -apple-system,Segoe UI,Roboto,sans-serif}
.invoice h1{margin:0;font-size:24px}
.invoice .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #ff6a13;padding-bottom:12px;margin-bottom:16px}
.invoice .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}
.invoice .cols h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;color:#777}
.invoice table{width:100%;border-collapse:collapse;margin:10px 0}
.invoice th{text-align:left;font-size:11px;text-transform:uppercase;color:#777;border-bottom:1px solid #ccc;padding:6px 4px}
.invoice td{padding:6px 4px;border-bottom:1px solid #eee}
.invoice td.r,.invoice th.r{text-align:right}
.invoice .sum{text-align:right;font-size:18px;font-weight:700;margin-top:8px}
.invoice table.vat{width:auto;margin:4px 0 0 auto;min-width:300px}
.invoice table.vat td{border-bottom:0;padding:2px 4px;color:#555}
.invoice .pay{background:#fff5ec;border:1px solid #ffd7b8;border-radius:8px;padding:12px;margin-top:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.invoice .qr{width:120px;height:120px;border:1px dashed #999;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666;text-align:center}
.invoice .qrbox{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:#666}
.invoice .foot{color:#777;font-size:11px;margin-top:20px}
@media print{
  body>*:not(#invoiceModal){display:none!important}
  .modal{position:static;background:none;padding:0}
  .no-print{display:none!important}
  .modal-box{width:auto;box-shadow:none}
}

/* ---------- oddělení sekcí (celá aplikace): barevná linka + odsazení ---------- */
.secline,
#toolbar>.ctl+.ctl,
.panel .step h3,
#summary h4:not(:first-child),
.panel .step details,
.needgrp+.needgrp,
.shareopts .ctl-h:not(:first-child),
.adm main h3:not(:first-child){border-top:1px solid var(--accent);border-image:var(--sec-line) 1}
#toolbar>.ctl+.ctl{padding-top:var(--pad-sec)}
@media (max-height:859px){ #binCardSlot{padding-top:6px;padding-bottom:6px} }   /* 4 px navíc pro šest linek */
.panel .step h3{margin:14px 0 4px;padding-top:10px}
#summary h4:not(:first-child){margin-top:14px;padding-top:10px}
.panel .step details{margin-top:12px;padding-top:10px}
.drawerblk{border-bottom:1px solid var(--accent);border-image:var(--sec-line) 1;padding-bottom:10px;margin-bottom:4px}
.needgrp+.needgrp{margin-top:8px;padding-top:6px}
.shareopts .ctl-h:not(:first-child){margin-top:10px;padding-top:10px;height:auto}
.adm main h3:not(:first-child){margin-top:20px!important;padding-top:12px}
.adm main .detail{margin-top:18px}
.adm main .detail>h3:first-child{padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--accent);border-image:var(--sec-line) 1}   /* karta: nadpis od obsahu stejnou linkou */

/* ---------- krok Objednávka: rozpis sbalený, formulář hned pod součty ---------- */
#summary .sumdes{margin:0;padding:10px 0 8px;border-top:1px solid var(--accent);border-image:var(--sec-line) 1}
#summary .sumdes:first-of-type{margin-top:12px}
#summary .sumdes>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:40px}
#summary .sumdes>summary::-webkit-details-marker{display:none}
#summary .sumdes .sdn{display:flex;flex-direction:column;min-width:0;flex:1}
#summary .sumdes .sdn b{font-size:14px;color:var(--accent-text)}
#summary .sumdes .sdn small{font-size:12px;color:var(--muted2)}
#summary .sumdes .sdp{font-size:15px;white-space:nowrap}
#summary .sumdes[open] .sdn small{color:var(--accent2)}
#summary .sumdes .prevrow{flex-direction:column;margin-top:8px}
#summary .sumdes .prevrow svg{max-width:220px}
#summary .sumdes .prevrow table{flex:none;width:100%}
.sendorder{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-lg);padding:12px 14px;margin:8px 0 12px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.45}
.sendorder a.primary{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;background:var(--accent);color:#111;border:1px solid var(--accent);border-radius:var(--r-md);font-weight:700;font-size:15px;text-decoration:none}
.sendorder a.primary:hover{background:var(--accent2)}
#thanks h3{border-top:0!important;padding-top:0;margin-top:4px}

/* ---------- telefon: vstupní okno místo rozpadlého konfigurátoru ---------- */
label.check a{color:var(--accent2)}


/* past na roboty v objednávce – člověk pole nevidí, robot ho vyplní */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* sortiment A: typ krabičky nad polem velikostí + vysvětlivka v řádku Přihrádky (stejná výška jako řádek dlaždic) */
.typepick{margin-bottom:8px}
.typepick .tiles.t5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.typepick .tile.h54 svg{width:22px;height:22px}
.typepick .tile.h54 span{font-size:12px;line-height:1.1}
.divrow.insnote{min-height:40px;display:flex;align-items:center;font-size:12px;line-height:1.3;color:var(--muted2);padding:0 2px}