/* calculatorsolar.ro — sistem vizual
   Alb și negru, cu albastru ca singur accent de interfață. Verdele și
   chihlimbarul apar exclusiv semantic: verde = bun / în parametri, chihlimbar =
   atenție, roșu = problemă. Cifrele sunt tipografie reală, tabulară, la contrast
   maxim — nu ornament. */

:root{
  --bg:#F3F3F0; --bg-2:#E9E9E5;
  --card:#FFFFFF; --card-2:#F7F7F4; --card-3:#EDEDE9;
  --ink:#16181B; --ink-2:#3B3F44; --muted:#696E74; --faint:#9A9EA3;
  --line:#E0E1DC; --line-2:#CBCDC7;
  --accent:#1B4DFF; --accent-ink:#123AC7; --accent-soft:#E7ECFF; --accent-line:#B9C8FF;
  --sun:#1B4DFF; --sun-2:#4C72FF; --sun-soft:#E7ECFF;
  --load:#4E6B87; --load-soft:#E3EAF1;
  --green:#1E7A4C; --green-soft:#E0F2E8; --green-line:#A9D8BD;
  --amber:#9A5B00; --amber-soft:#FCF0DC; --amber-line:#EBC48B;
  --red:#B3261E; --red-soft:#FBE6E4; --red-line:#F0B4AE;
  --r-xs:4px; --r-s:6px; --r-m:8px; --r-l:10px; --r-xl:12px; --r-pill:6px;
  --sh-1:none;
  --sh-2:0 1px 2px rgba(22,24,27,.06), 0 8px 24px -12px rgba(22,24,27,.18);
  --sh-3:0 12px 32px -12px rgba(22,24,27,.28);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sun-ink:#123AC7; --brand:#1B4DFF; --brand-hover:#123AC7; --on-brand:#FFFFFF;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:64px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#121413; --bg-2:#171A19;
  --card:#1A1C1B; --card-2:#1F2221; --card-3:#272A29;
  --ink:#ECEDE9; --ink-2:#C5C8C3; --muted:#8F948F; --faint:#62665F;
  --line:#272A29; --line-2:#383C3A;
  --accent:#7F9DFF; --accent-ink:#A8BCFF; --accent-soft:#151C33; --accent-line:#2C3A66;
  --sun:#7F9DFF; --sun-2:#A8BCFF; --sun-soft:#151C33; --sun-ink:#A8BCFF; --brand:#7F9DFF; --brand-hover:#A8BCFF; --on-brand:#0C0E11;
  --load:#8EA8C1; --load-soft:#1E2730;
  --green:#4CC38A; --green-soft:#12271C; --green-line:#24503A;
  --amber:#E0A94F; --amber-soft:#2B2010; --amber-line:#4C3A1A;
  --red:#F0796A; --red-soft:#2C1512; --red-line:#4E2620;
  --sh-1:none; --sh-2:0 12px 30px -14px rgba(0,0,0,.7);
  --sh-3:0 14px 40px -14px rgba(0,0,0,.85);
}}
:root[data-theme=dark]{
  --bg:#121413; --bg-2:#171A19;
  --card:#1A1C1B; --card-2:#1F2221; --card-3:#272A29;
  --ink:#ECEDE9; --ink-2:#C5C8C3; --muted:#8F948F; --faint:#62665F;
  --line:#272A29; --line-2:#383C3A;
  --accent:#7F9DFF; --accent-ink:#A8BCFF; --accent-soft:#151C33; --accent-line:#2C3A66;
  --sun:#7F9DFF; --sun-2:#A8BCFF; --sun-soft:#151C33; --sun-ink:#A8BCFF; --brand:#7F9DFF; --brand-hover:#A8BCFF; --on-brand:#0C0E11;
  --load:#8EA8C1; --load-soft:#1E2730;
  --green:#4CC38A; --green-soft:#12271C; --green-line:#24503A;
  --amber:#E0A94F; --amber-soft:#2B2010; --amber-line:#4C3A1A;
  --red:#F0796A; --red-soft:#2C1512; --red-line:#4E2620;
  --sh-1:none; --sh-2:0 12px 30px -14px rgba(0,0,0,.7);
  --sh-3:0 14px 40px -14px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
/* Atributul hidden ascunde mereu, oricare ar fi display-ul setat de componentă. */
[hidden]{display:none!important}
/* Nimic nu iese lateral din ecran. `clip` în loc de `hidden` pentru că
   `hidden` ar rupe poziționarea sticky a antetului. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15.5px/1.55 var(--ui);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:840px}

/* ---------------- navigație ---------------- */
.nav{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:var(--nav-h)}
/* Logo: doar cuvântul. Fără marcă grafică — numele e destul de descriptiv
   încât un simbol lângă el să nu adauge nimic. */
.logo{display:inline-flex;align-items:baseline;font:600 18px/1 var(--ui);letter-spacing:-.038em;
  margin-right:24px;color:var(--ink);white-space:nowrap}
.logo em{font-style:normal;color:var(--muted);font-weight:500}
.logo:hover{color:var(--accent)}
.logo:hover em{color:var(--accent);opacity:.6}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:8px 12px;border-radius:var(--r-s);font-size:14.5px;font-weight:450;color:var(--ink-2)}
.nav-links a:hover{background:var(--card);color:var(--ink)}
.nav-links a[aria-current]{background:var(--card);color:var(--ink);font-weight:500}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:var(--r-s);background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;padding:0}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.nav-toggle{display:none}

/* ---------------- tipografie ---------------- */
h1{font:600 clamp(31px,4.3vw,50px)/1.04 var(--ui);letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance}
h2{font:600 clamp(22px,2.5vw,30px)/1.14 var(--ui);letter-spacing:-.03em;margin:56px 0 8px;text-wrap:balance}
h3{font:600 18.5px/1.26 var(--ui);letter-spacing:-.022em;margin:0 0 8px}
h4{font:600 15.5px/1.32 var(--ui);letter-spacing:-.016em;margin:0 0 4px}
p{margin:0 0 16px}
.lede{font-size:clamp(16px,1.65vw,18.5px);line-height:1.5;color:var(--muted);max-width:62ch;margin:0 0 8px}
.sub{font-size:14.4px;color:var(--muted);margin:0 0 20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--ui);
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--accent)}
main{padding:36px 0 88px}
.crumbs{font-size:13px;color:var(--muted);margin:24px 0 16px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--faint)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2);max-width:48ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cifre: tipografie reală, tabulară, la contrast maxim. */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.045em;font-weight:600;color:var(--ink);line-height:1}
.figure{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.figure .v{font:600 clamp(28px,3.4vw,40px)/1 var(--ui);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.figure .u{font-size:14px;font-weight:500;color:var(--muted)}
.figure.sm .v{font-size:clamp(23px,2.4vw,27px)}
.figure.lg .v{font-size:clamp(38px,5.4vw,60px)}
.figure.pos .v{color:var(--green)} .figure.neg .v{color:var(--red)} .figure.acc .v{color:var(--accent)}
.stat-lbl{font-size:13.4px;color:var(--ink-2);margin:12px 0 0;font-weight:450;line-height:1.35}
.stat-note{font-size:12.4px;color:var(--muted);margin:4px 0 0;line-height:1.4}

/* ---------------- pastile ---------------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--r-pill);
  font:500 12.4px/1 var(--ui);background:var(--card-3);color:var(--ink-2);white-space:nowrap}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.pill.pos{background:var(--green-soft);color:var(--green);box-shadow:inset 0 0 0 1px var(--green-line)}
.pill.warn{background:var(--amber-soft);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber-line)}
.pill.neg{background:var(--red-soft);color:var(--red);box-shadow:inset 0 0 0 1px var(--red-line)}
.pill.line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.pill.solid{background:var(--ink);color:var(--bg)}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------------- suprafețe ---------------- */
.card{background:var(--card);border-radius:var(--r-l);padding:24px;box-shadow:var(--sh-1)}
.card.flat{background:var(--card-2);box-shadow:none}
.card.bordered{box-shadow:inset 0 0 0 1px var(--line)}
.card.pad-s{padding:16px} .card.pad-l{padding:32px}
.grid{display:grid;gap:16px}
.grid>*,.calcs>*,.outs>*,.bento>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(206px,100%),1fr))}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento>*{grid-column:span 12}
@media(min-width:760px){
  .c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
  .c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
  .c9{grid-column:span 9}.c12{grid-column:span 12}
}
.calcs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(432px,100%),1fr))}
.outs{display:grid;gap:16px 16px;grid-template-columns:repeat(auto-fit,minmax(min(126px,100%),1fr));
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:520px){.calcs{grid-template-columns:minmax(0,1fr)}.outs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Panou de accent, folosit când o suprafață trebuie să iasă din pagină. */
.panel{background:var(--ink);color:var(--bg);border-radius:var(--r-l);padding:32px}
.panel h2,.panel h3{color:var(--bg);margin-top:0}
.panel .sub,.panel .lede{color:rgba(255,255,255,.66)}
.panel .figure .v{color:var(--bg)}
.panel .pill{background:rgba(255,255,255,.14);color:#fff}
/* Pe fundal întunecat, panoul negru dispare în pagină; devine o suprafață
   ridicată, nu una inversată. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .panel{background:var(--card-3);color:var(--ink)}
  :root:not([data-theme=light]) .panel h2,:root:not([data-theme=light]) .panel h3{color:var(--ink)}
  :root:not([data-theme=light]) .panel .figure .v{color:var(--ink)}
  :root:not([data-theme=light]) .panel .sub,:root:not([data-theme=light]) .panel .lede{color:var(--muted)}}
:root[data-theme=dark] .panel{background:var(--card-3);color:var(--ink)}
:root[data-theme=dark] .panel h2,:root[data-theme=dark] .panel h3{color:var(--ink)}
:root[data-theme=dark] .panel .figure .v{color:var(--ink)}
:root[data-theme=dark] .panel .sub,:root[data-theme=dark] .panel .lede{color:var(--muted)}

/* Text secundar in interiorul unui panou. Definit o singura data aici, ca sa
   nu mai fie nevoie de culori albe scrise inline in pagini - acelea raman albe
   si pe tema intunecata, unde panoul devine o suprafata deschisa. */
.panel .eyebrow{color:rgba(255,255,255,.58)}
.panel .eyebrow::before{background:var(--accent)}
.panel .stat-lbl{color:rgba(255,255,255,.9)}
.panel .stat-note,.panel .basis{color:rgba(255,255,255,.5)}
.panel .btn.on-dark{background:rgba(255,255,255,.14);color:#fff}
.panel .btn.on-dark:hover{background:rgba(255,255,255,.2);opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .panel .eyebrow{color:var(--muted)}
  :root:not([data-theme=light]) .panel .stat-lbl{color:var(--ink-2)}
  :root:not([data-theme=light]) .panel .stat-note,
  :root:not([data-theme=light]) .panel .basis{color:var(--muted)}
  :root:not([data-theme=light]) .panel .btn.on-dark{background:var(--card);color:var(--ink)}
  :root:not([data-theme=light]) .panel .btn.on-dark:hover{background:var(--card-2)}}
:root[data-theme=dark] .panel .eyebrow{color:var(--muted)}
:root[data-theme=dark] .panel .stat-lbl{color:var(--ink-2)}
:root[data-theme=dark] .panel .stat-note,
:root[data-theme=dark] .panel .basis{color:var(--muted)}
:root[data-theme=dark] .panel .btn.on-dark{background:var(--card);color:var(--ink)}
:root[data-theme=dark] .panel .btn.on-dark:hover{background:var(--card-2)}

/* Banda de potential: aceeasi forma pe toate traseele. */
.cta-band{margin:44px 0;display:flex;flex-direction:column;gap:24px}
.cta-band h2{font-size:28px;line-height:1.18;max-width:26ch;margin:8px 0 0}
.cta-band .band-lede{margin:12px 0 0;max-width:62ch;line-height:1.6}
.cta-band .basis{margin:0;font-size:12.5px;line-height:1.55}
.cta-band .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Lista de text in afara ghidurilor. Ghidurile isi au propriile reguli sub
   .guide-body; asta e pentru paginile scrise direct in PHP. */
.bullets{font-size:15.6px;line-height:1.7;color:var(--ink-2);padding-left:20px;margin:16px 0 0}
.bullets li{margin-bottom:8px}
.bullets li::marker{color:var(--accent)}
.bullets b{color:var(--ink);font-weight:600}
@media (max-width:640px){.cta-band h2{font-size:23px}}


/* ---------------- butoane ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:0;
  border-radius:var(--r-s);font:500 14.8px/1 var(--ui);letter-spacing:-.012em;cursor:pointer;
  background:var(--ink);color:var(--bg);transition:.12s}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.99)}
.btn.acc{background:var(--accent);color:#fff}
.btn.acc:hover{background:var(--accent-ink);opacity:1}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);opacity:1}
.btn.sm{padding:8px 16px;font-size:13.6px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------------- formulare ---------------- */
.field{margin:0 0 20px}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.field label{font-size:14px;font-weight:450;color:var(--ink-2)}
.field .val{font:600 16.5px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.field .val u{text-decoration:none;font-size:12.4px;font-weight:400;color:var(--muted);margin-left:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;display:block}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand) var(--pct,50%),var(--line-2) var(--pct,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--line-2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 2px 6px rgba(11,13,16,.18);transition:.12s}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px var(--line-2),0 2px 6px rgba(11,13,16,.18)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent),0 2px 6px rgba(11,13,16,.18)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=url],input[type=date],select,textarea{
  width:100%;padding:12px 16px;font:400 15px var(--ui);color:var(--ink);background:var(--card-2);
  border:1px solid var(--line-2);border-radius:var(--r-s);transition:.12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--faint)}
label.check{display:flex;gap:12px;align-items:flex-start;font-size:13.6px;color:var(--muted);line-height:1.45;cursor:pointer}
label.check input{width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.fs{border:0;padding:0;margin:0;grid-column:1/-1;min-width:0}
.fs>legend{font-size:14px;color:var(--ink-2);margin-bottom:8px;padding:0}
.fs>legend small{color:var(--faint);font-size:12.6px;margin-left:8px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr));gap:8px}
.opts.sm{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.opt{display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:var(--r-s);background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font-size:14px;line-height:1.3;color:var(--ink-2);transition:.12s}
.opts.sm .opt{padding:8px 12px;font-size:13px}
.opt:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-2)}
.opt:has(input:checked){background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink)}
.opt input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.field-err{color:var(--red);font-size:12.8px;margin-top:8px;display:block}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;
  background:var(--card-3);border-radius:var(--r-s)}
.seg.wrap{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr))}
.seg button{padding:8px 8px;border:0;border-radius:9px;background:transparent;
  font:450 13.2px var(--ui);color:var(--muted);cursor:pointer;white-space:nowrap;transition:.12s;
  overflow:hidden;text-overflow:ellipsis}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1);font-weight:500}
.seg button:hover{color:var(--ink)}

/* ---------------- tabele ---------------- */
.tw{overflow-x:auto;border-radius:var(--r-m);background:var(--card);margin:16px 0;box-shadow:inset 0 0 0 1px var(--line)}
table{width:100%;border-collapse:collapse;font-size:14.2px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
th{font:600 11.4px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--card-2)}
td.n{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
tbody tr:hover td{background:var(--card-2)}
tr.hl td{background:var(--accent-soft);font-weight:500}
.bar:not(rect){height:5px;border-radius:99px;background:var(--ink);min-width:3px;opacity:.14}

/* ---------------- liste de linkuri ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr));gap:8px}
.tile{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px;
  background:var(--card);border-radius:var(--r-m);font-size:14.4px;font-weight:450;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);transition:.14s}
.tile:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-1px)}
.tile .v{font-size:12.8px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.tile:hover .v{color:var(--ink-2)}

/* listă numerotată, cu ierarhie reală */
.rows{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-m);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);transition:.12s}
.row:last-child{border-bottom:0}
.row:hover{background:var(--card-2)}
.row .idx{font:500 12.4px/1 var(--mono);color:var(--faint);width:26px;flex:none;font-variant-numeric:tabular-nums}
.row .main{flex:1;min-width:0}
.row .main b{display:block;font-weight:500;font-size:15px;color:var(--ink);margin-bottom:2px}
.row .main span{font-size:13px;color:var(--muted)}
.row .end{display:flex;align-items:center;gap:8px;flex:none}
.row .arrow{color:var(--faint);font-size:16px}
.row:hover .arrow{color:var(--accent)}

/* ---------------- diverse ---------------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.8px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px}
.note{background:var(--card);border-radius:var(--r-m);padding:16px 24px;font-size:15px;color:var(--ink-2);
  margin:20px 0;box-shadow:inset 0 0 0 1px var(--line)}
.note b{color:var(--ink);font-weight:600}
.note.acc{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.note.warn{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-line)}
.note.pos{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
.src{font-size:12.8px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:44px;line-height:1.6}
.src b{color:var(--ink-2);font-weight:600}
.foot{background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;padding:40px 0 32px;margin-top:64px}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:24px;margin-bottom:24px}
.foot h5{font:600 11.6px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot a{display:block;padding:4px 0;font-size:14px;color:var(--ink-2)}
.foot a:hover{color:var(--accent)}
.foot .fine{font-size:12.8px;color:var(--muted);max-width:84ch;line-height:1.6}

@media(max-width:880px){
  .nav-toggle{display:grid}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:12px;right:12px;flex-direction:column;
    background:var(--card);border-radius:var(--r-m);padding:8px;box-shadow:var(--sh-3);gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 16px}
  h2{margin-top:44px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}


/* ============================================================
   Strat de rafinare
   ============================================================ */

/* Săgeata e desenată, nu scrisă: fără glife care variază de la font la font. */
.go{display:inline-flex;align-items:center;gap:8px;font-size:13.6px;font-weight:500;color:var(--ink-2)}
.go::after{content:"";width:15px;height:8px;flex:none;transition:transform .18s;
  background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13M9.6 .6 13.4 4l-3.8 3.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.arrow{width:15px;height:8px;flex:none;display:block;background:var(--faint);transition:.18s;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.row:hover .arrow,.tile:hover .arrow{background:var(--accent);transform:translateX(3px)}
.tile .v{transition:color .14s}

/* Ritm vertical.
   O versiune anterioară avea aici un `.calcs+*{margin-top:0}`, care anula
   tăcut marginea oricărei secțiuni ce urma unei grile de calculatoare — de
   aceea titluri întregi ajungeau lipite de blocul de deasupra. Regulile de
   resetare au fost scoase: fiecare bloc își poartă propriul spațiu. */
.calcs,.tiles,.rows,.bento,.grid{margin-block:16px}
main>.wrap>*+h2{margin-top:64px}
main>.wrap>h2+.sub,main>.wrap>h2+p{margin-top:8px}
main>.wrap>h2+:is(.tiles,.grid,.rows,.bento,.calcs,.tw,.card,section,figure,ul){margin-top:24px}
main>.wrap>:is(h2+.sub,h2+p)+:is(.tiles,.grid,.rows,.bento,.calcs,.tw,.card,section,figure){margin-top:24px}
/* Blocurile mari puse unul după altul (card după card, grilă după card,
   sugestii după calculatoare, formular după sugestii) nu au titlu între ele
   care să le despartă, deci spațiul trebuie să-l poarte chiar ele. */
main>.wrap>:is(.card,section,.bento,.calcs,.grid,.tiles,.rows,.controlbar,.note,.tw,figure,form,[id^="match-"])
  +:is(.card,section,.bento,.calcs,.grid,.tiles,.rows,.controlbar,.note,.tw,figure,form,[id^="match-"]){margin-top:36px}
main>.wrap>[id^="match-"]:empty{margin:0}
main>.wrap>[id^="match-"]:not(:empty)+*{margin-top:36px}
.block{margin-top:60px !important}
.block:first-child{margin-top:0 !important}
main>.wrap>.src{margin-top:60px}
h2.block{margin-bottom:8px}

/* Callout-uri: fără pictograme. Bara colorată și eticheta poartă înțelesul. */
.callout{display:block;padding:16px 20px;border-radius:var(--r-m);margin:0 0 16px;font-size:15.2px;
  line-height:1.6;border-left:3px solid var(--line-2);background:var(--card-2);color:var(--ink-2)}
.callout b{display:block;margin-bottom:4px;color:var(--ink);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}
.callout.info{border-left-color:var(--line-2)}
.callout.tip{border-left-color:var(--accent);background:var(--accent-soft)}
.callout.tip b{color:var(--accent-ink)}
.callout.warn{border-left-color:var(--amber);background:var(--amber-soft)}
.callout.warn b{color:var(--amber)}
.callout.danger{border-left-color:var(--red);background:var(--red-soft)}
.callout.danger b{color:var(--red)}
.safety-banner{display:block;padding:16px 24px;border-radius:var(--r-m);margin:0 0 24px;font-size:15px;
  line-height:1.6;color:var(--ink-2);background:var(--red-soft);border-left:3px solid var(--red)}
.safety-banner b{display:block;margin-bottom:4px;color:var(--red);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}

/* Apariție la încărcare, o singură dată, foarte scurtă. */
/* Mișcarea e rezervată suprafețelor secundare. Titlul și textul de deschidere
   sunt complet vizibile din primul cadru: altfel primul lucru pe care îl vede
   un cititor, un thumbnail sau un crawler e o pagină pe jumătate stinsă. */
@media (prefers-reduced-motion:no-preference){
  .fade>*{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
  .fade>*:nth-child(2){animation-delay:.04s}
  .fade>*:nth-child(3){animation-delay:.08s}
  .fade>*:nth-child(4){animation-delay:.12s}
  .fade>*:nth-child(5){animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* Bara de control de deasupra calculatoarelor: perechi etichetă–control de
   aceeași înălțime, ca rândul să nu arate improvizat. */
.controlbar{display:grid;gap:16px 24px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  align-items:end;padding:24px 24px;background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh-1);margin-bottom:16px}
.controlbar>div{min-width:0}
.controlbar label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px;
  letter-spacing:.01em}
.controlbar .seg,.controlbar select{width:100%}
.controlbar .meta{font-size:13px;color:var(--muted);line-height:1.45}
.controlbar .meta b{color:var(--ink);font-weight:600}

/* Un container de sugestii fără parteneri potriviți nu trebuie să lase un gol
   în pagină: dispare complet până când are ce afișa. */
[id^="match-"]:empty{display:none}

/* ============================================================
   Ghiduri
   Stilurile acestei secțiuni s-au pierdut o dată la o rescriere a temei, iar
   paginile de ghid au rulat fără ele: blocurile de cod ieșeau din ecran și
   rezumatul stătea lipit de etichete. Sunt ținute acum într-un bloc propriu.
   ============================================================ */
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;align-items:start}
.guide-body{grid-column:1;max-width:70ch;min-width:0}
.guide-toc{grid-column:2;position:sticky;top:calc(var(--nav-h) + 18px);font-size:13.2px;min-width:0}
@media(max-width:1000px){
  .guide-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .guide-body,.guide-toc{grid-column:auto}
  .guide-toc{position:static;order:-1;padding:16px 16px;background:var(--card);
    border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:4px}
  .guide-toc summary{margin-bottom:0}
  .guide-toc[open] summary{margin-bottom:12px}
  .guide-toc .toc-links{max-height:250px;overflow-y:auto}
}
.guide-toc summary{font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 12px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary::after{content:"";width:9px;height:9px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.guide-toc[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.guide-toc a{display:block;padding:8px 0 8px 12px;border-left:2px solid var(--line);color:var(--muted);line-height:1.4}
.guide-toc a:hover{border-left-color:var(--accent);color:var(--accent)}
.guide-toc a.l3{padding-left:24px;font-size:12.6px}
@media(min-width:1001px){.guide-toc summary{pointer-events:none}.guide-toc summary::after{display:none}}

.guide-body h1{margin-bottom:16px}
.guide-body h2{font-size:clamp(21px,2.3vw,27px);margin:44px 0 16px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.guide-body h3{font-size:18px;margin:32px 0 8px;scroll-margin-top:calc(var(--nav-h) + 16px)}

/* Tinta unei ancore nu trebuie sa ajunga lipita de bara fixa de sus. Fara
   marja, sectiunea se opreste exact sub nav si titlul ei ramane acoperit -
   iar pe telefon, si de bara de sistem. Se aplica oricarui element cu id,
   nu doar titlurilor din ghiduri, pentru ca ancorele sunt peste tot:
   sectiuni de calculator, tabele de preturi, cuprins. */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.card[id],section[id]{scroll-margin-top:calc(var(--nav-h) + 28px)}
@media (max-width:640px){
  [id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
  .card[id],section[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
}
.guide-body p{font-size:16.4px;line-height:1.74;color:var(--ink-2);margin:0 0 16px}
.guide-body ul,.guide-body ol{font-size:16.4px;line-height:1.74;color:var(--ink-2);padding-left:24px;margin:0 0 16px}
.guide-body li{margin-bottom:8px}
.guide-body li::marker{color:var(--accent)}
.guide-body b,.guide-body strong{color:var(--ink);font-weight:600}
.guide-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.guide-body a:hover{text-decoration-color:var(--accent)}
.guide-body blockquote{margin:0 0 16px;padding:4px 0 4px 20px;border-left:3px solid var(--accent);
  color:var(--ink-2);font-size:16.4px}

/* Cod: se derulează în propriul container, niciodată prin pagină. */
.guide-body code{font:400 13.8px/1.5 var(--mono);background:var(--card-3);padding:2px 8px;
  border-radius:5px;color:var(--ink);word-break:break-word;overflow-wrap:anywhere}
.guide-body pre{background:var(--card-3);border-radius:var(--r-m);padding:16px 16px;margin:0 0 16px;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.guide-body pre code{display:block;background:none;padding:0;font-size:13.4px;line-height:1.62;
  white-space:pre;word-break:normal;overflow-wrap:normal;min-width:0}
.guide-body .tw{max-width:100%}
.guide-body table{font-size:14px}
.guide-body img{max-width:100%;height:auto;border-radius:var(--r-m)}

/* Antetul ghidului: etichete, apoi bannerele, apoi rezumatul — fiecare cu
   spațiul lui. Rezumatul stătea lipit de etichete. */
.guide-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 24px}
.guide-meta+.safety-banner,.guide-meta+.callout{margin-top:0}
.guide-body .callout:first-of-type{margin-top:4px}
.guide-body .safety-banner+.callout{margin-top:20px}
.guide-body>.callout,.guide-body>.safety-banner{margin-bottom:24px}
.guide-body h2:first-of-type{margin-top:36px}

.guide-list{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-m);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;margin:16px 0}
.guide-list a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 16px;
  border-bottom:1px solid var(--line);color:var(--ink-2);font-size:14.8px;min-width:0}
.guide-list a:last-child{border-bottom:0}
.guide-list a:hover{background:var(--card-2);color:var(--ink)}
.guide-list a>span:first-child{min-width:0;overflow-wrap:anywhere}
.guide-list .st{font-size:11.6px;color:var(--faint);white-space:nowrap;flex:none}
.guide-list .st.pub{color:var(--green)}
.cat-card{display:block;padding:20px 24px;background:var(--card);border-radius:var(--r-m);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.cat-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cat-card h3{margin:0 0 8px;color:var(--ink);font-size:17px}
.cat-card p{margin:0;font-size:13.6px;color:var(--muted)}

/* ---------------- diagrame ----------------
   Desenate inline in SVG, cu culorile luate din variabilele temei, ca sa
   functioneze in ambele teme dintr-un singur fisier. Fara umpluturi hardcodate:
   fiecare fill si stroke vine dintr-un token definit mai sus. */
.dgm{margin:24px 0;padding:0}
.dgm svg{width:100%;height:auto;display:block;background:var(--card);
  border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);padding:8px 0}
.dgm figcaption{margin:12px 2px 0;font-size:14.4px;line-height:1.62;color:var(--muted);max-width:70ch}

/* noduri: cutii cu contur, nu blocuri pline */
.dgm .node rect{fill:var(--card-2);stroke:var(--line-2);stroke-width:1.25}
.dgm .lbl{font:600 13px/1 var(--ui);fill:var(--ink);text-anchor:middle}
.dgm .lbl.left{text-anchor:start;font-weight:500;fill:var(--ink-2);font-size:12.6px}
.dgm .tag{font:500 11.4px/1 var(--ui);fill:var(--muted);text-anchor:start}
.dgm .tag.mid{text-anchor:middle}
.dgm .tag.load{fill:var(--load)}
.dgm .tag.out-tag{fill:var(--faint)}

/* simboluri din interiorul nodurilor */
.dgm .art .pv{fill:var(--sun-soft);stroke:var(--sun);stroke-width:1}
.dgm .art .box{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linejoin:round}
.dgm .art .hair{stroke:var(--sun);stroke-width:.8;opacity:.6}
.dgm .art .wave{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round}
.dgm .art .dot{fill:var(--green)}
.dgm .art .tower{fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-linecap:round}

/* fluxuri */
.dgm .flow{fill:none;stroke:var(--sun);stroke-width:1.8;color:var(--sun)}
.dgm .flow.alt{stroke:var(--green);color:var(--green)}
.dgm .flow.out{stroke:var(--muted);color:var(--muted);stroke-dasharray:4 5}

/* grafice de curbe */
.dgm .axis line{stroke:var(--line);stroke-width:1}
.dgm .axis .base{stroke:var(--line-2)}
.dgm .tick{font:500 11px/1 var(--ui);fill:var(--faint);text-anchor:middle}
.dgm .area-pv{fill:var(--sun-soft)}
.dgm .line-pv{fill:none;stroke:var(--sun);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.dgm .line-load{fill:none;stroke:var(--load);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.dgm .peak line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 4}
.dgm .area-batt{fill:var(--green-soft)}
.dgm .line-batt{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}

/* straturile panoului: aceeasi familie de albastru, opacitati diferite */
.dgm .ly{stroke:var(--line-2);stroke-width:1}
.dgm .ly.l0{fill:var(--card-2)}
.dgm .ly.l1{fill:var(--card-2)}
.dgm .ly.l2{fill:var(--sun-soft)}
.dgm .ly.l3{fill:var(--card-2)}
.dgm .ly.l4{fill:var(--card-3)}
.dgm .leader{stroke:var(--line-2);stroke-width:1}

@media (max-width:640px){
  .dgm .lbl{font-size:12px}
  .dgm .tag{font-size:10.4px}
  .dgm .tick{font-size:10px}
  .dgm figcaption{font-size:13.6px}
}
.dgm .tag.alt-tag{fill:var(--green)}

/* Selectorul de scenariu pentru scumpire. Sta deasupra calculatoarelor,
   pentru ca ipoteza lui le atinge pe toate. */
.esc{margin-bottom:24px}
.esc .seg{width:100%}
.esc details summary{list-style:none;padding:8px 0}
.esc details summary::-webkit-details-marker{display:none}
.esc details summary::before{content:"";display:inline-block;width:0;height:0;margin-right:8px;
  border:4px solid transparent;border-left-color:var(--accent);transition:transform .15s;vertical-align:1px}
.esc details[open] summary::before{transform:rotate(90deg) translateX(1px)}

/* Indexul calculatoarelor: familiile au spațiu între ele, tile-urile din aceeași familie stau strânse. */
.calc-index{display:grid;gap:28px;margin-block:24px}

/* Sari la conținut: invizibil până primește focus de la tastatură. */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 16px;border-radius:var(--r-s);
  background:var(--ink);color:var(--bg);font-weight:500;transition:top .15s}
.skip:focus{top:12px}
main:focus{outline:0}

/* Comutatorul de temă: arată soarele pe fundal închis și luna pe fundal deschis. */
.theme-toggle{display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.theme-toggle:hover{color:var(--ink);border-color:var(--line-2)}
.theme-toggle .i-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme=light]) .theme-toggle .i-moon{display:none}}
:root[data-theme=dark] .theme-toggle .i-sun{display:block}
:root[data-theme=dark] .theme-toggle .i-moon{display:none}
.foot .fine a{display:inline;padding:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Pagini de text: despre, confidențialitate, termeni. */
.prose{max-width:70ch}
.prose h2{font-size:22px;margin:40px 0 8px}
.prose h3{font-size:16.5px;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-2);line-height:1.65}
.prose ul{padding-left:20px;display:grid;gap:8px}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose .tw{margin:12px 0}
main p.meta{font-size:13.5px;color:var(--muted);margin:8px 0 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0}
.kv dt{color:var(--muted);font-size:13.5px}
.kv dd{margin:0}

/* Întrebări frecvente: răspunsul imediat sub întrebare. */
.faq{display:grid;gap:8px;max-width:78ch}
.faq section{background:var(--card);border-radius:var(--r-m);padding:16px 24px;box-shadow:var(--sh-1)}
.faq h3{font-size:16.5px;margin:0 0 8px}
.faq p{margin:0;color:var(--ink-2);line-height:1.6}
.faq a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Bara laterală de conținut, după modelul mian.ro. */
.rail{position:fixed;right:.4rem;top:50%;translate:0 -50%;z-index:40}
.rail-handle{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;padding:.7rem .4rem;border:0;background:none;
  color:var(--muted);cursor:pointer;transition:opacity .16s;font:inherit}
.rail-handle b{font:600 11px/1 var(--mono);font-variant-numeric:tabular-nums;margin-bottom:.2rem}
.rail-handle i{display:block;width:14px;height:2px;border-radius:2px;background:color-mix(in oklab,var(--ink) 24%,transparent);
  transition:width .22s cubic-bezier(.16,1,.3,1),background-color .16s}
.rail-handle i.sub{width:8px}
.rail-handle i.on{width:22px;background:var(--ink)}
.rail-panel{position:absolute;right:0;top:50%;translate:0 -50%;display:flex;flex-direction:column;width:17.5rem;max-height:min(72vh,38rem);
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-3);opacity:0;visibility:hidden;
  transform:translateX(10px) scale(.97);transform-origin:right center;
  transition:opacity .14s,transform .24s cubic-bezier(.16,1,.3,1),visibility .14s}
.rail:hover .rail-panel,.rail:focus-within .rail-panel{opacity:1;visibility:visible;transform:none}
.rail:hover .rail-handle,.rail:focus-within .rail-handle{opacity:0}
.rail-top{display:grid;gap:.55rem;padding:.8rem .8rem .6rem;border-bottom:1px solid var(--line)}
.rail-read{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.rail-read b{color:var(--ink);font-variant-numeric:tabular-nums}
.rail-bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.rail-bar i{display:block;height:100%;width:0;background:var(--accent)}
.rail-top input{padding:8px 8px;font-size:13px}
.toc-list{margin:0;padding:.4rem;list-style:none;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:1px}
.toc-list a{display:block;padding:.36rem .55rem;border-radius:var(--r-xs);color:var(--muted);font-size:13px;line-height:1.35}
.toc-list a.sub{padding-inline-start:1.25rem}
.toc-list a:hover{background:var(--card-2);color:var(--ink)}
.toc-list a[aria-current]{color:var(--ink);font-weight:600;background:var(--accent-soft)}
.toc-list a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.rail-empty{margin:0;padding:.6rem .9rem;font-size:13px;color:var(--muted)}
@media (max-width:1299px){.rail{display:none}}
@media (prefers-reduced-motion:reduce){.rail-panel,.rail-handle i{transition:none}}

/* Grafice interactive: tooltip, evidențiere la hover, tap și focus. */
.ctip{position:fixed;z-index:90;pointer-events:none;display:grid;gap:2px;max-width:260px;padding:8px 12px;border-radius:10px;
  background:var(--ink);color:var(--bg);box-shadow:var(--sh-3);font-size:12.5px;line-height:1.4}
.ctip b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ctip span:first-child{opacity:.75}
.chart .pt,.dgm .pt,.dgm .tipt{cursor:pointer;outline:none}
.chart .pt .guide,.dgm .pt .guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .pt .dot,.dgm .pt .dot{fill:var(--accent);stroke:var(--card);stroke-width:2;opacity:0}
.dgm .pt .dot.load{fill:var(--amber)}
.chart .pt.hot .guide,.dgm .pt.hot .guide{opacity:.45}
.chart .pt.hot .dot,.dgm .pt.hot .dot{opacity:1}
.chart .pt .bar{transition:fill .12s}
.chart .pt.hot .bar{fill:var(--accent)}
.chart .pt:focus-visible .bar,.chart .pt:focus-visible .dot{stroke:var(--accent);stroke-width:2}
.dgm .tipt.hot{filter:brightness(1.08)}
.dgm .node.tipt.hot rect:first-child{stroke:var(--accent);stroke-width:2}
.dgm .ly.hot{stroke:var(--accent);stroke-width:2}


/* ============================================================
   Direcția vizuală: fișă tehnică.
   Hârtie neutră, linii subțiri, colțuri mici, fără gradiente și fără
   umbre decorative. Acțiunile sunt în culoarea textului; culoarea apare
   doar în date: chihlimbar pentru soare și producție, gri-albastru
   pentru consum, verde pentru baterie și câștig, roșu pentru pierdere.
   ============================================================ */
.logo:hover{color:var(--ink)}
.logo em{color:var(--faint)}

body{letter-spacing:0}
h1{font-weight:650;letter-spacing:-.025em;font-size:clamp(30px,3.8vw,44px);line-height:1.08}
h2{font-weight:650;letter-spacing:-.018em}
h3{letter-spacing:-.01em}
.logo{letter-spacing:-.02em}

/* Etichete mici: text obișnuit, fără majuscule spațiate și fără liniuță. */
.eyebrow{display:block;font:500 13.5px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 8px}
.eyebrow::before{display:none}
th{font:600 12.6px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.foot h5{font:600 13px/1 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
.guide-toc summary{letter-spacing:0;text-transform:none;font-size:13px}

/* Suprafețe: contur de un pixel în loc de umbră. */
.card,.tw,.rows,.controlbar,.faq section,.tile,.cat-card{box-shadow:inset 0 0 0 1px var(--line)}
.card.flat{box-shadow:none}
a.card,a.tile,a.row{transition:box-shadow .12s,color .12s,background-color .12s}
a.card:hover,.tile:hover,.cat-card:hover{transform:none;box-shadow:inset 0 0 0 1px var(--ink-2)}
.tile:hover{background:var(--card)}

/* Panoul de accent nu mai e inversat: o suprafață cu contur, ca restul. */
.panel{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.panel h2,.panel h3,.panel .figure .v{color:var(--ink)}
.panel .sub,.panel .lede,.panel .eyebrow,.panel .stat-note,.panel .basis{color:var(--muted)}
.panel .stat-lbl{color:var(--ink-2)}
.panel .pill{background:var(--card-3);color:var(--ink-2)}
.panel .btn.on-dark{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.panel .btn.on-dark:hover{box-shadow:inset 0 0 0 1px var(--ink);background:var(--card)}
:root[data-theme=dark] .panel,:root[data-theme=dark] .panel h2,:root[data-theme=dark] .panel h3{background:var(--card);color:var(--ink)}
:root[data-theme=dark] .panel h2,:root[data-theme=dark] .panel h3{background:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .panel{background:var(--card)}}
.cta-band{border-top:3px solid var(--accent)}

/* Butoane: principal în culoarea textului, secundar cu contur. */
.btn{border-radius:var(--r-s);font-weight:550}
.btn.acc{background:var(--brand);color:var(--on-brand)}
.btn.acc:hover{background:var(--brand-hover);opacity:1}
.btn.ghost{background:transparent}
.pill{border-radius:var(--r-xs)}
.pill.acc{background:var(--card-3);color:var(--ink-2);box-shadow:none}
.opt:has(input:checked){background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.seg button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--line-2)}
input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--ink-2)}
input:focus,select:focus,textarea:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px var(--accent-soft)}
:focus-visible{outline-color:var(--accent)}
.figure.acc .v{color:var(--accent)}
.bullets li::marker{color:var(--muted)}

/* Linkurile din text se văd ca linkuri. */
.sub a,.lede a,.prose a,.faq a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.sub a:hover,.lede a:hover,.prose a:hover,.faq a:hover{text-decoration-color:var(--ink)}

/* Grafice: chihlimbar pentru producție, verde pentru câștig. */
.chart .pt .bar{fill:color-mix(in srgb,var(--sun) 42%,var(--card))}
.chart .pt.hot .bar{fill:var(--sun)}
#p-chart .pt .bar{fill:color-mix(in srgb,var(--green) 40%,var(--card))}
#p-chart .pt.hot .bar{fill:var(--green)}
.chart .pt .dot,.dgm .pt .dot{fill:var(--ink);stroke:var(--card)}
.dgm .pt .dot{fill:var(--sun)}
.dgm .pt .dot.load{fill:var(--load)}
.chart text{font-family:var(--mono)}
.ctip{border-radius:var(--r-s);background:var(--ink);color:var(--bg);box-shadow:var(--sh-2)}
.dgm svg{border-radius:var(--r-l)}
.dgm .node rect{fill:var(--card)}
.chart .pt.on .bar{fill:var(--sun)}
.rail-handle{max-height:min(46vh,250px);overflow:hidden}
.rail.dense .rail-handle i{height:1px}
.rail.dense .rail-handle i.on{height:2px}

/* Începutul primei pagini: titlul și prețul de azi, alături. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:end;margin:8px 0 8px}
.hero h1{font-size:clamp(34px,4.6vw,58px);max-width:15ch}
.hero .lede{margin-bottom:24px}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.hero-today{background:var(--card);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);padding:20px 24px 16px}
.today-head{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.today-head a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.today-now{margin:8px 0 8px;color:var(--muted);font-size:14px}
.today-now b{font-size:clamp(34px,4vw,46px);color:var(--ink);margin-right:4px}
.today-now span{display:block;margin-top:2px;font-size:13px}
.today-note{font-size:12.6px;color:var(--muted);margin:8px 0 0}
.chart.today .bar{fill:var(--line-2)}
.chart.today .pt.day .bar{fill:color-mix(in srgb,var(--sun) 45%,var(--card))}
.chart.today .pt.now .bar{fill:var(--brand)}
.chart.today .pt.hot .bar{fill:var(--ink)}
.chart.today .sunband{fill:var(--sun)}
.chart.today .axis-lbl{font:500 11px var(--ui);fill:var(--faint)}
.chart.today .axis-lbl.sun{fill:var(--sun-ink);font-weight:600}
.chart.today .now-lbl{font:700 11px var(--ui);fill:var(--sun-ink)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:24px}}
input[type=range]::-moz-range-progress{background:var(--brand)}

/* Detaliile noului UI, fără fontul și culorile încercate: etichete mai
   apăsate, cifre tabulare și butoane mai ferme. */
.eyebrow{font-weight:600;font-size:13px;color:var(--muted)}
.figure .v,.num,td.n,.field .val,.today-now b{font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.btn{font-weight:600}
.logo em{color:var(--faint)}

/* ============================================================
   Grafice, în stilul MIAN: grilă discretă, bare la 30%, bara activă
   plină, coloana umbrită la hover, valoarea în tooltip.
   ============================================================ */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--line-2);stroke-width:1}
.chart .lbl{font:500 11px var(--ui);fill:var(--muted)}
.chart .ylbl{font:500 10.5px var(--ui);fill:var(--faint);font-variant-numeric:tabular-nums}
.chart .pt{cursor:pointer;outline:none}
.chart .pt .hit,.chart.bars .col{fill:transparent}
.chart.bars .pt.hot .col{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.chart.bars .bar{fill:color-mix(in srgb,var(--accent) 30%,transparent);transition:fill .12s}
.chart.bars .pt.on .bar,.chart.bars .pt.hot .bar{fill:var(--accent)}
.chart.bars .pt:focus-visible .col{stroke:var(--accent);stroke-width:1.5}
#p-chart.bars .bar{fill:color-mix(in srgb,var(--green) 30%,transparent)}
#p-chart.bars .pt.on .bar,#p-chart.bars .pt.hot .bar{fill:var(--green)}
.chart.curve .window{fill:var(--accent-soft)}
.chart.curve .window-lbl{font:600 11px var(--ui);fill:var(--accent-ink)}
.chart.curve .area{fill:var(--accent);opacity:.07}
.chart.curve .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart.curve .mark{stroke:var(--card);stroke-width:2}
.chart.curve .mark.peak{fill:var(--red)} .chart.curve .mark.low{fill:var(--green)}
.chart.curve .mark-lbl{font:600 11px var(--ui);fill:var(--ink);font-variant-numeric:tabular-nums}
.chart.curve .pt .guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart.curve .pt .dot{fill:var(--card);stroke:var(--accent);stroke-width:2;opacity:0}
.chart.curve .pt.hot .guide{opacity:.35} .chart.curve .pt.hot .dot{opacity:1}
.hero-today .chart.bars{margin-top:4px}

/* ============================================================
   Layout: aceeași înălțime pe rând, rezultate aliniate, text măsurat.
   ============================================================ */
.bento>.card,.bento>*>.card,.grid>*>.card{height:100%}
.bento>.grid{grid-auto-rows:1fr}
.grid>.card,.grid>a.card,.bento>.card{display:flex;flex-direction:column}
.grid>a.card .go,.grid>.card>.go{margin-top:auto}
.calcs>section{display:flex;flex-direction:column}
.calcs>section>.outs:first-of-type{margin-top:auto}
.calcs>section>.field:last-of-type,.calcs>section>.seg:last-of-type{margin-bottom:24px}
main .lede,main .sub,main .note,.dgm figcaption,.src{max-width:72ch}
.calcs .sub,.card .sub,.faq p{max-width:none}
.tiles{grid-auto-rows:1fr}

/* Grafice MIAN: rama, ore solare, axă, legende. */
.mn-chart{margin:16px 0 0}
.mn-chart .chart-frame{position:relative}
.mn-chart .chart-frame .mn-chart-line{position:relative;z-index:1}
.mn-chart .solar-hours{position:absolute;top:0;bottom:0;left:var(--from);right:calc(100% - var(--to));
  background:var(--accent-soft);border-radius:4px;z-index:0}
.mn-chart .chart-axis{display:flex;justify-content:space-between;padding:0 6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mn-chart figcaption{font-size:12.5px;color:var(--muted);line-height:1.5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mn-chart .key{width:12px;height:12px;border-radius:3px;flex:none}
.mn-chart .key-solar{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.mn-chart.battery-day{--mn-series-1:var(--green)}
.mn-chart .mn-legend{font-size:12.5px;color:var(--ink-2)}
.mn-chart-bars{--mn-bar-gap:6px}
.mn-chart.today .mn-chart-bars{--h:8.5rem;--mn-bar-gap:3px}
.mn-chart.today{margin-top:8px}
#p-chart{--mn-series-1:var(--green)}
.dgm.mn-chart,figure.mn-chart.curves,figure.mn-chart.battery-day{background:var(--card);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);padding:24px 24px 20px;margin:24px 0}

/* Fluxul energiei, ca pași. */
.flow-steps{margin:24px 0}
.flow-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.flow-steps li{background:var(--card);border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--line);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative}
.flow-steps li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:32px;width:6px;height:6px;border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);transform:rotate(45deg);z-index:1}
.flow-steps .step-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;
  background:var(--accent-soft);color:var(--accent-ink)}
.flow-steps b{font-size:15px;line-height:1.3}
.flow-steps li>span:last-child{font-size:13.5px;color:var(--muted);line-height:1.5}
.flow-steps figcaption{margin-top:12px;font-size:14px;color:var(--muted);max-width:72ch}
@media (max-width:980px){.flow-steps ol{grid-template-columns:1fr 1fr}.flow-steps li::after{display:none}}
@media (max-width:560px){.flow-steps ol{grid-template-columns:1fr}}
/* Rezultate: fără element orfan pe ultimul rând */
.outs:has(>:nth-child(4):last-child),.outs:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.outs:has(>:nth-child(3):last-child),.outs:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.outs:has(>:nth-child(3):last-child),.outs:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Familii pe /calculator: un singur grup vizibil odată */
.famtabs{display:none}
.fam-ready .famtabs{display:flex;gap:4px;padding:4px;margin:32px 0 0;position:sticky;top:calc(var(--nav-h) + 8px);z-index:20;
  background:var(--card-3);border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.famtabs::-webkit-scrollbar{display:none}
.famtabs button{flex:1 0 auto;padding:8px 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);
  font:inherit;font-size:14px;white-space:nowrap;cursor:pointer}
.famtabs button:hover{color:var(--ink)}
.famtabs button[aria-selected=true]{background:var(--card);color:var(--ink);font-weight:500;box-shadow:inset 0 0 0 1px var(--line-2)}
.famtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fam-ready .fam>h2:first-child{margin-top:40px}
.fam [id]{scroll-margin-top:calc(var(--nav-h) + 72px)}