/* PAL Calc - stiluri. Paleta si tipografia sunt cele din calculator-debitare.html. */

/* Paleta „lemn cald" (varianta B aleasă de Dan, 30 septembrie 2026):
   crem, maro de nuc și teracotă. Titlurile în Fraunces, textul în Manrope;
   cifrele rămân în IBM Plex Mono, ca să se alinieze în tabele. */
:root{
  --bg:#f4efe6; --panel:#fffaf2; --ink:#2b2520; --muted:#6c5f55; --line:#e2d7c6;
  --accent:#b4532a; --accent-ink:#fffaf2; --cant:#c7801c; --cant-soft:#f8e6c8;
  --row:#f8f1e6; --danger:#b3261e; --warn-bg:#fbeed5; --ok-bg:#e3efe3; --cv:#ece3d4;
  --font-body:"Manrope",system-ui,sans-serif; --font-display:"Fraunces",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#1c1814; --panel:#26211c; --ink:#f1e9dd; --muted:#b3a697; --line:#3d352d;
    --accent:#e0875a; --accent-ink:#1c1814; --cant:#e6a03a; --cant-soft:#3a2d16;
    --row:#2d2721; --danger:#ff7b72; --warn-bg:#3a2d16; --ok-bg:#1f3325; --cv:#151210;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1c1814; --panel:#26211c; --ink:#f1e9dd; --muted:#b3a697; --line:#3d352d;
  --accent:#e0875a; --accent-ink:#1c1814; --cant:#e6a03a; --cant-soft:#3a2d16;
  --row:#2d2721; --danger:#ff7b72; --warn-bg:#3a2d16; --ok-bg:#1f3325; --cv:#151210;
}

*{box-sizing:border-box}
.hidden{display:none !important}
/* există pentru managerul de parole, nu se vede */
.ascuns-vizual{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

h1{font-family:var(--font-display);font-size:32px;line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
h2{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
a{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.sub{color:var(--muted);margin:0 0 18px;max-width:65ch}

/* ---------- antet site ---------- */
.site{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo b,.logo small{white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:16px}
.logo b{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.logo small{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.site nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.site nav a{text-decoration:none;color:var(--muted);font-size:14px}
.site nav a:hover,.site nav a.on{color:var(--ink)}
.who{font-size:13px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline{display:inline}
button.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:14px;padding:0}
button.link:hover{color:var(--ink)}

.devbar{background:var(--warn-bg);border-bottom:1px solid var(--line);color:var(--ink);
  font-size:12.5px;text-align:center;padding:5px 16px}
.devbar code{font-family:"IBM Plex Mono",monospace}

main.wrap{padding-block:20px 40px}
.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;padding-block:14px 30px}

/* ---------- elemente ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.panel+.panel{margin-top:20px}
.panel.center{text-align:center}
.grid{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:20px;align-items:start}
/* fără asta, canvasul 3D își impune lățimea proprie și împinge pagina în lateral */
.grid > *{min-width:0}
/* Editorul are trei panouri: formular, corp în 3D, listă de piese. Pe ecran
   lat formularul ține stânga pe toată înălțimea, iar celelalte două se pun
   una sub alta în dreapta. Pe ecran îngust urcă corpul primul: altfel scrii
   o cotă pe telefon și trebuie să derulezi două ecrane ca să vezi ce s-a
   schimbat. Așezarea e explicită, nu din ordinea din pagină, fiindcă
   `display:contents` pe un înveliș se bate cu flexbox pe lățime și lasă
   panoul cu tabelul să împingă pagina în lateral. */
.grid > :nth-child(1){grid-column:1;grid-row:1 / span 2}   /* formularul */
.grid > :nth-child(2){grid-column:2;grid-row:1}            /* corpul în 3D */
.grid > :nth-child(3){grid-column:2;grid-row:2}            /* lista de piese */

@media(max-width:820px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid > :nth-child(1){grid-column:1;grid-row:2}
  .grid > :nth-child(2){grid-column:1;grid-row:1}
  .grid > :nth-child(3){grid-column:1;grid-row:3}
}

.top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.crumbs a{text-decoration:none;font-size:13px}
.status-line{display:flex;align-items:center;gap:10px}

fieldset{border:0;padding:0;margin:0 0 16px}
legend{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.f{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 10px}
@media(max-width:520px){.f3{grid-template-columns:1fr 1fr}}
label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%;
  font-family:"IBM Plex Mono",monospace;font-size:14px}
select{font-family:var(--font-body)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=checkbox]{width:auto}
.full{grid-column:1/-1}

.btn,button{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:9px 16px;font-weight:600;
  cursor:pointer;font-weight:500;text-decoration:none;color:var(--ink);display:inline-block}
.btn:hover,button:hover{border-color:var(--accent)}
.btn.primary,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.small,button.small{padding:5px 11px;font-size:12.5px;border-radius:10px}
.btn.danger,button.danger{color:var(--danger)}
.btn.full{width:100%;text-align:center;margin-top:6px}
button:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btns.center{justify-content:center}

.warn{background:var(--warn-bg);border-left:3px solid var(--cant);padding:10px 12px;border-radius:10px;font-size:13px;margin:10px 0}
.warn.err{border-left-color:var(--danger)}
.warn.ok{background:var(--ok-bg);border-left-color:var(--accent)}
.legend{font-size:12px;color:var(--muted);margin:10px 0 0}
.tag{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}

.chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.04em}
.chip.paid{background:var(--ok-bg);border-color:var(--accent);color:var(--accent)}
.chip.draft{background:var(--row);color:var(--muted)}
.chip.err{border-color:var(--danger);color:var(--danger)}

/* ---------- tabel ---------- */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even){background:var(--row)}
tbody tr.sel td{background:var(--cant-soft)}
th.locked-h{color:var(--muted);opacity:.65}
td.locked{color:var(--muted);text-align:center;font-family:"IBM Plex Mono",monospace;
  background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(127,127,127,.07) 5px,rgba(127,127,127,.07) 10px);
  filter:blur(.2px);user-select:none}

.cant{display:inline-flex;gap:2px;font-family:"IBM Plex Mono",monospace;font-size:12px}
.cant span{padding:0 4px;border-radius:3px;background:var(--row);color:var(--muted);min-width:22px;text-align:center}
.cant span.g{background:var(--cant);color:#fff}
.cant span.s{background:var(--cant-soft);color:var(--ink)}

/* ---------- paywall ---------- */
.paywall{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px dashed var(--accent);background:var(--row);border-radius:16px;padding:12px 14px;margin:10px 0 14px}
.paywall p{margin:4px 0 0;max-width:52ch}

/* ---------- 3D ---------- */
.bar3d{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.bar3d .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bar3d label{flex-direction:row;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.bar3d input[type=checkbox]{width:auto;margin:0}
.bar3d input[type=range]{width:120px;padding:0;background:none;border:0}
.cvwrap{position:relative;background:var(--cv);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cvwrap canvas{display:block;width:100%;max-width:100%;touch-action:none;cursor:grab}
.cvwrap canvas:active{cursor:grabbing}
.nocv{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}
.info{margin-top:8px;min-height:44px;font-size:13px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.info b{font-size:14px}
.info .k{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:3px;border:1px solid rgba(0,0,0,.15)}
.formule{font-size:13px;color:var(--muted);line-height:1.6}
.formule code{font-family:"IBM Plex Mono",monospace;color:var(--ink);background:var(--row);padding:0 4px;border-radius:3px}
details{margin-top:12px}
summary{cursor:pointer;color:var(--muted);font-size:13px}

/* ---------- landing / auth / listă ---------- */
.hero{padding:26px 0 10px}
.hero .btns{margin-top:14px}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:10px}
.cards3 .panel{margin-top:0}
.ticks,.steps{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7}
.auth{max-width:420px;margin:30px auto}
.auth label{margin-bottom:10px}
.empty{text-align:center;color:var(--muted)}

.corp-list{display:grid;gap:10px}
.corp-card{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.corp-main{text-decoration:none;color:inherit;flex:1 1 260px}
.corp-main h2{font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 2px}
.corp-card .dims{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted)}
.corp-card .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.corp-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* ---------- catalogul de modele ---------- */
.filtre{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.filtre .btn.on,.filtre button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.grup{margin-bottom:26px}
.grup.ascuns{display:none}
.grup h2{margin-bottom:2px}
.grup .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}

.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.model-form{margin:0;display:contents}
.model-card{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;
  font:inherit;color:inherit;cursor:pointer}
.model-card:hover{border-color:var(--accent)}
.model-card.gol{min-height:96px}
.sk-wrap{flex:0 0 58px;display:flex;align-items:center;justify-content:center;
  background:var(--row);border-radius:5px;padding:6px;align-self:stretch}
.model-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.model-nume{font-weight:600;font-size:14px}
.model-dim{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.model-rez{font-size:12px;color:var(--accent)}
.model-desc{font-size:12px;color:var(--muted);margin-top:3px;white-space:normal}

/* schița frontală a corpului */
svg.sk{width:100%;height:auto;max-height:110px;display:block}
svg.sk .sk-corp{fill:#c9ab7d;stroke:#5c4a2e;stroke-width:14}
svg.sk .sk-gol{fill:#a98f68;stroke:none}
svg.sk .sk-polita{stroke:#8d7a5c;stroke-width:10;stroke-dasharray:26 18}
svg.sk .sk-front{fill:#e0c799;stroke:#5c4a2e;stroke-width:10}
/* muchiile cantuite ale unei piese simple: aceleași culori ca în 3D */
svg.sk .sk-cant.gros{stroke:#d48a1e}
svg.sk .sk-cant.subtire{stroke:#f1cf93}
svg.sk .sk-maner{stroke:#43372a;stroke-width:14;stroke-linecap:round}
/* schița în plan, pentru corpurile de colț */
svg.sk .sk-usa{stroke:#b3261e;stroke-width:26;stroke-linecap:round}
svg.sk .sk-perete{stroke:#5c4a2e;stroke-width:26;stroke-linecap:square;opacity:.5}
svg.sk .sk-orb{fill:#8d7a5c;opacity:.8;stroke:none}

/* ---------- ansamblul ---------- */
.ansamblu-sus{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.ansamblu-sus{grid-template-columns:1fr}}
.ansamblu-sus .panel{margin-top:0}
.an-plan,.an-elev{background:var(--row);border:1px solid var(--line);border-radius:6px;padding:10px}
.an-elev{margin-top:4px}
svg.an-svg{width:100%;height:auto;max-height:420px;display:block}
svg.an-svg .an-camera{fill:var(--cv);stroke:#6b737d;stroke-width:26}
svg.an-svg .an-zid{fill:var(--cv);stroke:none}
svg.an-svg .an-podea{stroke:#6b737d;stroke-width:22}
svg.an-svg .an-corp{fill:#d9c7a8;stroke:#5c4a2e;stroke-width:12}
svg.an-svg .an-corp.sus{fill:#e7d9bd;stroke-dasharray:34 22}
svg.an-svg .an-fata{fill:#d9c7a8;stroke:#5c4a2e;stroke-width:10}
svg.an-svg .an-fata.sus{fill:#e7d9bd}
svg.an-svg .an-eticheta{fill:#20252c;font-family:"IBM Plex Mono",monospace;font-weight:600}
svg.an-svg .an-cota{fill:var(--muted);font-family:"IBM Plex Mono",monospace}
svg.an-svg .an-perete{fill:var(--accent);font-family:var(--font-body);font-weight:600}
td.peste{color:var(--danger);font-weight:600}

/* ---------- editorul de contur (corp atipic) ---------- */
.contur-lucru{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:14px;align-items:start}
@media(max-width:820px){.contur-lucru{grid-template-columns:1fr}}
/* atenție: clasa .grid înseamnă layout pe coloane în această aplicație,
   deci tabelele nu o folosesc — ar deveni ele însele grid și ar sparge rândurile */
.contur-tabel{font-size:12.5px;min-width:360px}
.contur-tabel th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.contur-tabel td.c,.contur-tabel th.c{text-align:center}
.contur-tabel input.dim{width:72px;text-align:right}
.piese-extra{font-size:12.5px;min-width:760px}
.piese-extra th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.piese-extra td.c,.piese-extra th.c{text-align:center}
.piese-extra input.dim{width:72px;text-align:right}
.piese-extra input[data-camp="nume"]{min-width:120px}
.piese-extra select{width:auto}
input.invalid{border-color:var(--danger);outline-color:var(--danger)}
.contur-preview{background:var(--row);border:1px solid var(--line);border-radius:6px;padding:8px;
  display:flex;align-items:center;justify-content:center;min-height:150px;overflow:hidden}
svg.ct-svg{width:100%;height:auto;max-height:260px}
svg.ct-svg .ct-forma{fill:#c9ab7d;fill-opacity:.45;stroke:none}
svg.ct-svg .ct-latura{stroke:#5c4a2e;stroke-width:8;stroke-linecap:round}
svg.ct-svg .ct-lipsa{stroke:#b3261e;stroke-width:8;stroke-dasharray:24 16}
/* Cotele stau IN AFARA formei, nu peste ea, si sunt scrise cu culoarea de
   accent pe un contur de culoarea panoului. Conturul e ce le face citibile
   oriunde ar cadea: pe fundalul panoului, peste forma, sau la jumatate pe
   fiecare. `paint-order` pune conturul DEDESUBT; fara el ar manca literele
   din interior. Culorile sunt variabile, deci merg si pe tema deschisa. */
svg.ct-svg .ct-cota{fill:var(--accent);font-family:"IBM Plex Mono",monospace;font-weight:600;
  stroke:var(--panel);paint-order:stroke fill;stroke-linejoin:round}

/* ---------- selector de decoruri ---------- */
.decor-sw{display:inline-block;width:20px;height:20px;border-radius:4px;vertical-align:-4px;
  border:1px solid rgba(0,0,0,.2);flex:0 0 auto}
.decor-sw.mic{width:13px;height:13px;vertical-align:-2px;border-radius:3px}
.decor-sw.mare{width:100%;height:42px;border-radius:5px 5px 0 0}
.decor-picker{position:relative}
.decor-buton{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px}
.decor-buton small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.decor-panou{position:absolute;z-index:25;left:0;right:0;top:calc(100% + 4px);background:var(--panel);
  border:1px solid var(--accent);border-radius:16px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-height:400px;overflow:auto}
.decor-bara{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.decor-bara input[type=search]{flex:1 1 180px}
.decor-bara select{flex:0 1 180px}
.decor-grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.decor-optiune{padding:0;overflow:hidden;text-align:center;border-radius:6px}
.decor-optiune.ales{border-color:var(--accent);outline:2px solid var(--accent)}
.decor-nume{display:block;font-size:11.5px;padding:4px 4px 0;line-height:1.25}
.decor-cod{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);padding:0 4px 5px}
.mat-form{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.mat-inline{display:flex;gap:6px;flex-wrap:wrap}
.mat-inline select{max-width:190px;font-size:12px;padding:3px 6px}
details.inline-edit summary{display:inline-block;list-style:none;cursor:pointer}
details.inline-edit summary::-webkit-details-marker{display:none}
.formate{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
label.check{flex-direction:row;align-items:center;gap:7px;cursor:pointer}
label.check input{width:auto;flex:none;accent-color:var(--accent)}

/* ---------- întrebările de feronerie ---------- */
.alegeri{margin:0 0 14px}
.alegeri:last-child{margin-bottom:0}
.alegeri-titlu{font-size:13px;font-weight:600;margin:0 0 6px}
.card-radio{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:9px 11px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--panel)}
.card-radio:hover{border-color:var(--accent)}
.card-radio:last-child{margin-bottom:0}
.card-radio input[type=radio],.card-radio input[type=checkbox]{
  width:auto;min-width:0;flex:0 0 auto;margin:3px 0 0;padding:0;accent-color:var(--accent)}
.card-radio > span{display:block;flex:1 1 auto;min-width:0}
.card-radio b{display:block;font-weight:600;font-size:13.5px;color:var(--ink)}
.card-radio small{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:1px}
.card-radio:has(input:checked){border-color:var(--accent);background:var(--ok-bg)}
.fero-rezumat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0}
.fero-rezumat div{min-width:0}
.fero-rezumat dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fero-rezumat dd{margin:1px 0 0;font-size:13.5px}

/* ---------- credit și comenzi ---------- */
.credit-link{white-space:nowrap}
.credit-link b{font-family:"IBM Plex Mono",monospace}
.credit-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:16px;align-items:start;margin-bottom:16px}
@media(max-width:700px){.credit-grid{grid-template-columns:1fr}}
.credit-grid .panel{margin-top:0}
.sold-card .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sold-card .v{font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;margin:2px 0 6px}
.sold-card .v span{font-size:16px;color:var(--muted)}
.pachete{display:flex;gap:8px;flex-wrap:wrap}
.pachet{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 16px;min-width:96px}
.pachet b{font-size:16px}
.pachet span{font-size:11px;color:var(--muted)}
td.plus{color:var(--accent)}
td.minus{color:var(--muted)}
.cost-card{border:1px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--panel);text-align:right}
.cost-card .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cost-card .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.doua-coloane{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.doua-coloane{grid-template-columns:1fr}}
.chip.cnc{background:var(--warn-bg);border-color:var(--cant);color:var(--cant)}
details.panel summary{list-style:none;cursor:pointer;font-size:13px;color:var(--muted)}
details.panel summary b{color:var(--ink)}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary::before{content:'▸ ';color:var(--accent)}
details.panel[open] summary::before{content:'▾ '}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.kpi .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:8px 14px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:40}
.toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- limba ---------- */
.limba-form{display:flex;align-items:center;gap:5px;margin:0}
.limba-eticheta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.limba-select{width:auto;max-width:150px;font-size:12.5px;padding:3px 6px;background:transparent;
  border-color:transparent;color:var(--muted);cursor:pointer}
.limba-select:hover{border-color:var(--line);color:var(--ink)}
.bara-acoperire{display:inline-block;vertical-align:middle;width:120px;height:8px;border-radius:4px;
  background:var(--cv);overflow:hidden;margin-inline-end:6px}
.bara-acoperire i{display:block;height:100%;background:var(--accent)}

/* Textul se scrie de la dreapta la stânga în arabă, ebraică și persană:
   paginile folosesc margini logice, dar tabelele cu cifre rămân aliniate la fel. */
[dir=rtl] .num,[dir=rtl] .mono{direction:ltr;text-align:right}
[dir=rtl] .card-radio input{margin-inline:0}

/* Setările implicite ale editorului: o zonă strânsă sub formular, deschisă
   doar când omul are treabă cu ea. */
details.setari{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
details.setari summary{list-style:none;font-size:13px;color:var(--muted)}
details.setari summary::-webkit-details-marker{display:none}
details.setari summary::before{content:'▸ ';color:var(--accent)}
details.setari[open] summary::before{content:'▾ '}
.setari-grupe{display:grid;gap:6px;margin-top:8px}
.setari-grupe label.check{align-items:flex-start}
.setari-grupe label.check input{margin-top:3px}

/* Ștergerea comenzii: la vedere, dar singură jos, departe de butoanele
   de zi cu zi. */
.panel.zona-stergere{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.panel.zona-stergere p{margin:4px 0 0}

/* Căsuța de mesaje din panoul „ce nu poate încă genera calculul". */
.mesaj-form{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.mesaj-form label{display:block;width:100%;font-size:13px;color:var(--muted)}
.mesaj-form textarea{margin-top:4px;resize:vertical;min-height:64px;
  font-family:var(--font-body)}

/* ---------- secțiunea de informații: ghiduri și analize ---------- */
.articole{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.articol-card h2{margin:6px 0 6px;font-size:19px;line-height:1.3}
.articol-card h2 a{color:var(--ink);text-decoration:none}
.articol-card h2 a:hover{color:var(--accent)}
.articol-card p{margin:0 0 12px}
.articol-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip.limba{background:var(--warn-bg);color:var(--cant);border-color:var(--cant)}

/* Corpul articolului se citește pe rânduri scurte; tabelele și codul
   rămân pe ale lor, cu fontul de cifre. */
.articol{max-width:none}
.articol h1{margin:10px 0 6px}
.articol-corp{max-width:70ch;line-height:1.65}
.articol-corp h2{margin:28px 0 8px;font-size:22px}
.articol-corp h3{margin:22px 0 6px;font-size:18px}
.articol-corp h4,.articol-corp h5,.articol-corp h6{margin:18px 0 6px;font-size:16px}
.articol-corp p{margin:0 0 14px}
.articol-corp ul,.articol-corp ol{margin:0 0 14px;padding-inline-start:22px}
.articol-corp li{margin-bottom:5px}
.articol-corp code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em;
  background:var(--row);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.articol-corp blockquote{margin:0 0 14px;padding:2px 0 2px 14px;
  border-inline-start:3px solid var(--accent);color:var(--muted)}
.articol-corp hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.articol-corp .tbl{max-width:none;margin-bottom:16px}
.articol-corp a{color:var(--accent)}

.panel.zona-chemare{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.panel.zona-chemare p{margin:4px 0 0}

/* Bifele de compartimente din editor: pe un rând, nu unul sub altul. */
.camp-eticheta{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.setari-grupe.orizontal{grid-auto-flow:column;grid-auto-columns:max-content;gap:14px}

/* Data livrării și telefonul, în antetul comenzii. */
.livrare{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.livrare a{text-decoration:none}

/* Pagina de prezentare: lista limbilor și listele pe două coloane. */
.limbi-lista{color:var(--muted);line-height:2;margin:6px 0 0}
.limbi-lista span{color:var(--ink)}
.ticks.cols2{columns:2;column-gap:28px}
@media(max-width:560px){.ticks.cols2{columns:1}}

/* Jurnalul: rândurile cu erori se văd din prima, restul stau liniștite. */
.kpi .v.rau{color:var(--danger)}
.chip.nivel-eroare{background:var(--warn-bg);border-color:var(--danger);color:var(--danger)}
.chip.nivel-atentie{background:var(--warn-bg);border-color:var(--cant);color:var(--cant)}
.chip.nivel-fapta{background:var(--row);color:var(--muted)}
tr.jurnal-eroare td{background:color-mix(in srgb,var(--danger) 8%,transparent)}
.jurnal-detalii summary{font-size:12px}
.jurnal-detalii pre{margin:6px 0 0;padding:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:5px;font-size:11.5px;line-height:1.5;overflow-x:auto;max-height:300px}
.filtre .separator{width:1px;background:var(--line);margin:0 4px}

/* Numerele pieselor, peste desenul 3D. `pointer-events:none` ca sa nu
   fure clicul de pe piesa de dedesubt — pe ea se apasă ca să-i vezi cotele. */
.cvwrap{position:relative}
.etichete3d{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.eticheta3d{position:absolute;transform:translate(-50%,-50%);
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;line-height:1;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.eticheta3d.ales{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
td.nr-piesa{color:var(--muted);font-size:12px}

/* Desenul corpului în lista comenzii: mic, doar cât să recunoști forma. */
.sk-mic{display:block;width:44px;line-height:0}
.sk-mic svg.sk{max-height:52px}

/* Fereastra de confirmare. Ia locul lui `window.confirm`, pe care browserul
   are voie sa-l opreasca — si il opreste, in panourile din aplicatii si in
   webview-uri. Aia intorcea false fara sa intrebe pe nimeni, deci butonul de
   stergere nu facea nimic, tacut. Asta e a paginii; n-o opreste nimeni. */
.intreaba{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
  padding:18px 20px;max-width:420px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.intreaba p{margin:0 0 14px;font-size:14px;line-height:1.5;text-wrap:pretty}
.intreaba .btns{margin:0;justify-content:flex-end}
.intreaba::backdrop{background:rgba(0,0,0,.45)}

/* Soclul din schita de pe card. Mai inchis la culoare decat carcasa fiindca
   sta RETRAS fata de fronturi — asa se vede si in atelier, ca o umbra sub
   usi. Fara el, corpul pe soclu avea exact acelasi desen ca unul pe
   picioare, si nimeni nu avea de unde sti care pe ce sta. */
svg.sk .sk-soclu{fill:#6b5a40;stroke:#453520;stroke-width:12}

/* Corpul comandat fara fronturi. Fronturile nu dispar din desen: se
   deseneaza punctate, ca in atelier — golul unde vin usile se vede, dar se
   vede si ca nu se taie nimic pentru el. Fara asta un corp comandat fara
   fronturi ar arata exact ca un corp deschis, adica alt corp. */
svg.sk .sk-front.sticla{fill:#cfe3ea;fill-opacity:.55}
svg.sk .sk-front.fara{fill:none;stroke:#5c4a2e;stroke-width:10;stroke-dasharray:34 24;opacity:.75}
svg.sk .sk-usa.fara{stroke-dasharray:60 44;opacity:.7}

/* Un bloc de formular care apare numai cand se bifeaza casuta dinaintea lui.
   Fara JavaScript inadins: pentru o casuta ar fi trebuit un fisier nou de
   script si o gaura in politica de continut. Casuta sta IN AFARA etichetei si
   INAINTEA blocului, ca s-o poata ajunge `~`. */
.comutator{width:auto;flex:none;accent-color:var(--accent);vertical-align:-2px;margin-right:7px}
.comutator + label.check{display:inline;cursor:pointer}
.comutator:not(:checked) ~ .doar-daca{display:none}

/* Tabelul de laturi si unghiuri sta strans: cotele vin primele, iar tabelul
   se deschide cand e nevoie de el — la mansarda cu cinci laturi si la forma
   facuta de mana. La un corp sub scara nu se deschide niciodata. */
.contur-manual{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.contur-manual > summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;list-style:none}
.contur-manual > summary::-webkit-details-marker{display:none}
.contur-manual > summary::before{content:"▸ ";color:var(--accent)}
.contur-manual[open] > summary::before{content:"▾ "}
.contur-manual > summary:hover{color:var(--ink)}

/* subsolul legal si paginile legale */
.subsol-legal { margin-top: 8px; font-size: 12px; opacity: .85; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }
.subsol-legal nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.panel.legal { max-width: 860px; line-height: 1.6; }
.panel.legal h2 { font-size: 16px; margin: 18px 0 6px; }
.panel.legal ul { padding-left: 20px; }

/* ---------- pagina de prezentare: „filmul" (varianta B2) ---------- */
.film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:start;padding:28px 0 36px}
.film-eticheta{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.film-titlu{font-size:clamp(40px,5.6vw,72px);line-height:.98;letter-spacing:-.03em;margin:0 0 22px}
.film-titlu em{color:var(--accent);font-weight:400}
.film-pasi{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:4px}
.film-pasi button{all:unset;box-sizing:border-box;width:100%;display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;cursor:pointer;transition:background .4s}
.film-pasi button:focus-visible{outline:2px solid var(--accent)}
.film-pasi li.on button{background:var(--panel)}
.film-pasi b{display:block;font-size:16.5px}
.film-pasi b+span{display:block;font-size:13.5px;color:var(--muted)}
.film-nr{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--line);transition:background .4s,color .4s}
.film-pasi li.on .film-nr{background:var(--accent);color:var(--accent-ink)}
.film-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn.mare{padding:15px 24px;font-size:15.5px;border-radius:14px;text-decoration:none}
.film-pret{color:var(--muted);font-size:15px}
.film-pret b{font-family:var(--font-display);font-size:26px;color:var(--ink);font-weight:600}
.film-scena{display:flex;flex-direction:column;gap:12px;min-width:0}
.film-ecran{position:relative;background:#2b2520;border-radius:26px;overflow:hidden;aspect-ratio:520/470}
.film-svg{position:absolute;inset:0;width:100%;height:100%}
.film-piesa{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.film-antet{position:absolute;left:20px;top:16px;display:flex;flex-direction:column;gap:2px;color:#f4efe6;z-index:1}
.film-antet b{font-family:var(--font-display);font-size:20px;font-weight:600}
.film-antet span{font-size:12.5px;color:#cbbfb1}
.film-progres{position:absolute;left:20px;right:20px;bottom:16px;height:4px;background:#4a4038;border-radius:999px;overflow:hidden}
.film-progres span{display:block;height:100%;width:25%;background:var(--accent);transition:width 1.5s linear}
.film-carduri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.film-card{background:var(--panel);border:2px solid transparent;border-radius:16px;padding:12px;opacity:.6;transition:opacity .5s,transform .5s,border-color .5s;min-width:0}
.film-card.on{opacity:1;border-color:var(--accent);transform:translateY(-4px)}
.film-card-t{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.film-debitare{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px}
.film-debitare li{display:flex;justify-content:space-between;gap:6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.film-debitare b{white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-weight:500}
.film-cnc svg{display:block;margin:0 auto;max-width:100%;height:auto;color:var(--ink)}
.film-cnc-nota{text-align:center}
.film-montaj{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.35}
@media (max-width:900px){
  .film{grid-template-columns:minmax(0,1fr);gap:24px}
  .film-carduri{grid-template-columns:minmax(0,1fr)}
  .film-card{opacity:1}
}
@media (prefers-reduced-motion:reduce){.film-piesa,.film-card,.film-progres span{transition:none}}

/* ---------- prestatorii: pagina publică ---------- */
.prest-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:36px;align-items:end;padding:24px 0 22px}
.prest-titlu{font-size:clamp(38px,5vw,64px);line-height:.98;letter-spacing:-.03em}
.prest-titlu em{color:var(--accent);font-weight:400}
.prest-cifre{display:flex;gap:28px}
.prest-cifre b{display:block;font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1.1}
.prest-cifre span{font-size:13px;color:var(--muted)}
.prest-criterii{background:#2b2520;color:#f1e9dd;border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.prest-criterii b{font-family:var(--font-display);font-size:20px;font-weight:600}
.prest-criterii ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#e8dfd2}
.prest-criterii .small{color:#b3a697}
.prest-filtre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.pastila{border-radius:999px;padding:8px 15px;font-size:13.5px;background:var(--panel)}
.pastila.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.prest-sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.prest-nr{margin-left:auto;font-size:14px}
.prest-grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.prest-card{background:var(--panel);border:1.5px solid transparent;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}
.prest-card.de-verificat{border-color:var(--line)}
.prest-card-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prest-card h2{margin:0;font-family:var(--font-display);font-size:21px;text-transform:none;letter-spacing:0;color:var(--ink)}
.prest-card h2 a{color:inherit;text-decoration:none}
.prest-card-cap .muted{font-size:13.5px}
.eticheta-verdict{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.eticheta-verdict.rec{background:#e3efe3;color:#2f5d3a}
.eticheta-verdict.ver{background:#f3e6c9;color:#7a5a14}
.prest-chips{display:flex;flex-wrap:wrap;gap:6px}
.prest-chips span{padding:4px 9px;border-radius:8px;background:var(--row);border:1px solid var(--line);font-size:12.5px;font-weight:600}
.prest-chips span.egger{background:transparent;border-style:dashed}
.prest-fapte{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.45}
.prest-card .btns{margin-top:auto}
.prest-profil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:start;padding:10px 0 30px}
.prest-profil-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.prest-detalii{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:20px 0}
.prest-detalii dt{font-weight:700;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.prest-detalii dd{margin:0}
.prest-trimite{background:#2b2520;color:#f1e9dd;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px}
.prest-trimite h2{font-family:var(--font-display);font-size:26px;text-transform:none;letter-spacing:0;color:#f1e9dd;margin:0}
.prest-trimite form{display:flex;flex-direction:column;gap:12px}
.prest-trimite label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#cbbfb1}
.prest-trimite label.check{flex-direction:row;align-items:center;color:#e8dfd2}
.prest-trimite input:not([type=checkbox]),.prest-trimite select,.prest-trimite textarea{background:#fffaf2;color:#2b2520;border:0;font-family:var(--font-body);font-size:14.5px}
.prest-trimite .muted{color:#b3a697}
.prest-trimite button.primary{padding:15px;font-size:15.5px;border-radius:14px}
@media (max-width:900px){.prest-cap,.prest-profil{grid-template-columns:minmax(0,1fr)}.prest-detalii{grid-template-columns:minmax(0,1fr)}}

/* ---------- planificatorul 3D (ansamblu) ---------- */
.an-stare{position:absolute;right:12px;top:12px;padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600}
.an-stare.rau{color:var(--danger);border-color:var(--danger)}
.an-panou{display:flex;flex-direction:column;gap:8px;padding-top:10px}
.an-sel{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.an-sel b{font-family:var(--font-display);font-size:18px}
.an-rau{color:var(--danger);font-size:13px;font-weight:700}
.an-unelte{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.an-unelte label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.an-unelte input{width:90px}
.an-unelte .pastila{padding:6px 12px;min-width:40px}
.an-et{font-size:13px;color:var(--muted)}

/* ---------- pagina publică a planificatorului ---------- */
.plan-cap{padding:24px 0 18px;max-width:860px}
.plan-functii{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:20px 0}
.plan-functie{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.plan-functie b{font-family:var(--font-display);font-size:19px}
.plan-functie span{color:var(--muted);font-size:14.5px;line-height:1.5}
.plan-camera{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:4px 0 12px}
.plan-camera b{align-self:center;font-size:14px}
.plan-camera label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.plan-camera input{width:120px}

/* ---------- „Cum funcționează" ---------- */
.tutorial{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:24px}
.tut-scene{display:flex;flex-direction:column;gap:4px;position:sticky;top:80px}
.tut-scene button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--muted)}
.tut-scene button:hover{color:var(--ink)}
.tut-scene button:focus-visible{outline:2px solid var(--accent)}
.tut-scene button.on{background:var(--panel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.tut-scena{display:flex;flex-direction:column;gap:12px;min-width:0}
.tut-ecran{position:relative;background:#2b2520;border-radius:24px;overflow:hidden;aspect-ratio:560/470}
.tut-svg{position:absolute;inset:0;width:100%;height:100%}
.tut-antet{position:absolute;left:20px;top:16px;right:20px;display:flex;justify-content:space-between;align-items:baseline;color:#f4efe6;z-index:1}
.tut-antet b{font-family:var(--font-display);font-size:22px;font-weight:600}
.tut-antet span{font-size:13px;color:#cbbfb1}
.tut-puncte{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.tut-puncte span{width:8px;height:8px;border-radius:999px;background:#5a4f45;transition:width .4s,background .4s}
.tut-puncte span.trecut{background:#8a7a6a}
.tut-puncte span.on{width:26px;background:var(--accent)}
.tut-piesa.noua{animation:tutApare .9s ease both}
.tut-piesa.noua path{stroke:#fffaf2;stroke-width:2}
@keyframes tutApare{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tut-piesa.noua{animation:none}}
.tut-jos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.tut-explicatie{background:var(--panel);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.tut-text{font-size:17px;line-height:1.5;margin:0;min-height:3em}
.tut-cote{margin:0}
.tut-card{background:var(--panel);border-radius:18px;padding:14px}
@media (max-width:900px){
  .tutorial{grid-template-columns:minmax(0,1fr)}
  .tut-scene{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .tut-scene button{white-space:nowrap}
  .tut-scene button.on{box-shadow:inset 0 -3px 0 var(--accent)}
  .tut-jos{grid-template-columns:minmax(0,1fr)}
}

/* ---------- configurări rapide și împărțirea sertarelor ---------- */
.config-rapide{display:flex;flex-wrap:wrap;gap:6px}
.config-rapide .pastila{font-size:12.5px;padding:6px 11px}
.sertare-impartire{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 6px}
.sertare-impartire .pastila{font-size:12.5px;padding:6px 11px}
.sertare-tabel{min-width:0}
.sertare-tabel input.dim{width:86px;text-align:right}
.config-familie{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}.config-familie select{width:auto}