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

:root{
  --bg:#eef1f3; --panel:#ffffff; --ink:#1b232c; --muted:#5d6a76; --line:#d5dbe1;
  --accent:#0f6e6a; --accent-ink:#ffffff; --cant:#d48a1e; --cant-soft:#fbead0;
  --row:#f6f8f9; --danger:#b3261e; --warn-bg:#fff4e0; --ok-bg:#e3f3ec; --cv:#e4e9ec;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#151a1f; --panel:#1e252c; --ink:#e8ecef; --muted:#9aa7b2; --line:#334049;
    --accent:#3fb3ad; --accent-ink:#0b1a19; --cant:#e6a03a; --cant-soft:#3a2d16;
    --row:#232c34; --danger:#ff7b72; --warn-bg:#3a2d16; --ok-bg:#16302a; --cv:#121619;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#151a1f; --panel:#1e252c; --ink:#e8ecef; --muted:#9aa7b2; --line:#334049;
  --accent:#3fb3ad; --accent-ink:#0b1a19; --cant:#e6a03a; --cant-soft:#3a2d16;
  --row:#232c34; --danger:#ff7b72; --warn-bg:#3a2d16; --ok-bg:#16302a; --cv:#121619;
}

*{box-sizing:border-box}
.hidden{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 "IBM Plex Sans",system-ui,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

h1{font-size:22px;font-weight:600;margin:0 0 4px;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:30px;height:30px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:16px}
.logo b{display:block;font-size:15px;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:8px;padding:16px}
.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:5px;padding:6px 8px;width:100%;
  font-family:"IBM Plex Mono",monospace;font-size:14px}
select{font-family:"IBM Plex Sans",system-ui,sans-serif}
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:5px;padding:7px 12px;
  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:3px 8px;font-size:12px}
.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:8px 10px;border-radius:4px;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)}

/* ---------- 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:8px;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:8px;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:8px;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:"IBM Plex Sans",sans-serif;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}
.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:230px}
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}
svg.ct-svg .ct-cota{fill:#43372a;font-family:"IBM Plex Mono",monospace}

/* ---------- 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:8px;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:8px;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:8px;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:8px;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:"IBM Plex Sans",system-ui,sans-serif}

/* ---------- 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.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}