:root {
  --brand: #0068a5;
  --fundal: #f7f7f5;
  --card: #ffffff;
  --text: #1a1a19;
  --text-sec: #5f5e5a;
  --linie: #e2e1db;
  --export: #0068a5;
  --import: #d95926;
  --s-hidro: #2a78d6;
  --s-nuclear: #4a3aa7;
  --s-hidrocarburi: #eb6834;
  --s-carbune: #6b6a64;
  --s-eolian: #1baf7a;
  --s-foto: #eda100;
  --s-biomasa: #4b8b1f;
  --s-altele: #9a998f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundal: #16161a;
    --card: #1f1f23;
    --text: #ececea;
    --text-sec: #a5a49e;
    --linie: #2f2f34;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundal);
  color: var(--text);
}

.cap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 14px 24px 0;
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.marca-semn {
  width: 36px; height: 36px; color: var(--brand); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.marca-semn svg { width: 30px; height: 30px; }
.marca:hover .marca-semn { color: #00558a; }
.marca-text b { display: block; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.25; }
.marca-text i { display: block; font-size: 11px; font-style: normal; color: var(--text-sec); letter-spacing: .4px; }

.ceas {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-sec);
  background: var(--card); border: 1px solid var(--linie); padding: 6px 12px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.ceas i { width: 7px; height: 7px; border-radius: 50%; background: #1baf7a; flex: none; }
.ceas.vechi i { background: var(--import); }

.meniu {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  max-width: 1120px; margin: 0 auto; padding: 12px 24px 12px;
  border-bottom: 1px solid var(--linie);
}

.burger {
  display: none; align-items: center; gap: 9px; cursor: pointer;
  background: var(--card); border: 1px solid var(--linie); border-radius: 9px;
  padding: 7px 12px 7px 10px; font: inherit; font-size: 13.5px; color: var(--text);
}
.burger-linii { display: flex; flex-direction: column; gap: 3.5px; width: 16px; }
.burger-linii i {
  display: block; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.burger[aria-expanded="true"] .burger-linii i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-linii i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-linii i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nv {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border-radius: 8px; font-size: 13.5px; color: var(--text-sec); text-decoration: none;
  transition: background .15s, color .15s; white-space: nowrap;
}
.nv svg { width: 16px; height: 16px; flex: none; }
.nv:hover { background: var(--card); color: var(--text); }
.nv.on { background: var(--brand); color: #fff; }

/* ---------- dale de conditii ---------- */

.conditii { display: flex; gap: 9px; flex-wrap: wrap; margin: 20px 0 26px; }
.dala {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 168px;
  background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 11px 14px;
}
.dala-fig { width: 38px; height: 34px; flex: none; color: var(--linie); }
.dala-fig .fig-fundal { stroke: currentColor; }
.dala-et { display: block; font-size: 11px; color: var(--text-sec); letter-spacing: .3px; }
.dala-v {
  display: block; font-size: 18px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dala-v i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-sec); }
.dala-n { display: block; font-size: 11px; color: var(--text-muted, #9a998f); }

.bara-rad { fill: var(--linie); transition: fill .3s; }
.bara-rad.activa { fill: #eda100; }

main { max-width: 1120px; margin: 0 auto; padding: 24px; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
h2:first-child { margin-top: 0; }

.fise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.fisa { background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; }
.fisa span { display: block; font-size: 13px; color: var(--text-sec); margin-bottom: 4px; }
.fisa strong { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fisa strong i { font-size: 12px; font-style: normal; color: var(--text-sec); font-weight: 400; margin-left: 4px; }
.fisa em { display: block; font-size: 12px; color: var(--text-sec); font-style: normal; }
.fisa .exp { color: var(--export); }
.fisa .imp { color: var(--import); }

.bara { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.bara span { transition: width .4s; }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0 0; margin: 0; font-size: 13px; color: var(--text-sec); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; }
.legenda b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.s-hidro { background: var(--s-hidro); }
.s-nuclear { background: var(--s-nuclear); }
.s-hidrocarburi { background: var(--s-hidrocarburi); }
.s-carbune { background: var(--s-carbune); }
.s-eolian { background: var(--s-eolian); }
.s-foto { background: var(--s-foto); }
.s-biomasa { background: var(--s-biomasa); }
.s-altele { background: var(--s-altele); }

.grafic { position: relative; background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 12px; }
.doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.nota { font-size: 13px; color: var(--text-sec); margin: 8px 0 0; }

.harta { background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 8px; margin-bottom: 16px; }
.control-ora { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.control-ora input[type=range] { flex: 1; accent-color: var(--brand); }
.control-ora output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 58px; }

.evenimente { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--linie); border-radius: 10px; }
.evenimente li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.evenimente li:last-child { border-bottom: 0; }
.evenimente time { color: var(--text-sec); font-size: 13px; white-space: nowrap; }
.evenimente .sev-3 { color: var(--import); font-weight: 600; }

.tabel { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; font-size: 14px; }
.tabel th { text-align: left; font-weight: 600; color: var(--text-sec); padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.tabel td { padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel code { font-size: 13px; }

.cod { background: var(--card); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 13px; }
.formular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.formular input, .formular select, .formular button {
  font: inherit; font-size: 14px; padding: 8px 11px;
  border: 1px solid var(--linie); border-radius: 7px; background: var(--card); color: var(--text);
}
.formular button { background: var(--brand); color: #fff; border-color: var(--brand); cursor: pointer; }
.gol { color: var(--text-sec); }

footer { max-width: 1120px; margin: 0 auto; padding: 32px 24px; color: var(--text-sec); font-size: 13px; border-top: 1px solid var(--linie); }


/* ---------- harta ---------- */

.harta { position: relative; padding: 0; overflow: hidden; background: #f7f2e9; border-color: #e8dece; }
.harta svg { display: block; }

/* Vecinii sunt mai inchisi si mai stinsi decat Romania: subiectul trebuie sa fie
   cel mai luminos element din cadru, altfel ierarhia se inverseaza. */
.vecin-forma {
  fill: #ded5c6; stroke: #cdc2ae; stroke-width: 1; stroke-linejoin: round;
  transition: fill .2s;
}
.vecin:hover .vecin-forma { fill: #d6cbb9; }

.ro-silueta {
  fill: #fdf4e6; stroke: #c47f1f; stroke-width: 2.2; stroke-linejoin: round;
  paint-order: stroke;
}

.ro-nume {
  font-size: 25px; font-weight: 700; letter-spacing: 3.5px; fill: #6b4a22;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ro-sold {
  font-size: 16px; font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.flux { transition: opacity .2s; }
.flux.estompat { opacity: .2; }

.panglica { transition: fill-opacity .2s; }
.flux:hover .panglica { fill-opacity: .45; }

.particula {
  animation-name: curge-particula; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes curge-particula {
  0%   { opacity: 0; translate: 0 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px); }
}

.et-front text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.ef-cod { font-size: 10.5px; font-weight: 700; fill: #a2917a; letter-spacing: 1.4px; }
.ef-nume { font-size: 14.5px; font-weight: 600; fill: #3d3226; }
.ef-val  { font-size: 12.5px; font-weight: 600; }

.centrala-nume {
  font-size: 10.5px; font-weight: 600; fill: #5f5140; pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .3px;
  paint-order: stroke; stroke: #fdf4e6; stroke-width: 3.5px; stroke-linejoin: round;
}
.centrala { cursor: default; }
.centrala:hover circle { fill-opacity: .3; }

.legenda-txt { font-size: 12px; fill: #8a7a64; }

.control-ora { background: var(--card); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px; }
.buton-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 50%; background: var(--card); color: var(--text);
  font: inherit; line-height: 1; transition: background .15s, border-color .15s;
}
.buton-play:hover { border-color: var(--brand); color: var(--brand); }
.buton-play[data-ruleaza="1"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.fisa { transition: transform .18s, border-color .18s; }
.fisa:hover { border-color: #c9c8c1; }
.fise .fisa { animation: intra .35s ease-out both; }
.fise .fisa:nth-child(2) { animation-delay: .04s; }
.fise .fisa:nth-child(3) { animation-delay: .08s; }
.fise .fisa:nth-child(4) { animation-delay: .12s; }
.fise .fisa:nth-child(5) { animation-delay: .16s; }
.fise .fisa:nth-child(6) { animation-delay: .2s; }
@keyframes intra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bara span { animation: creste .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes creste { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .particula { animation: none; opacity: 1; }
  .fise .fisa, .bara span { animation: none; }
}

/* ---------- interconexiuni ---------- */

.grup-linii { margin-bottom: 22px; }
.grup-cap { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.grup-cap h3 { font-size: 15px; font-weight: 600; margin: 0; }
.grup-cap span { font-size: 13px; font-variant-numeric: tabular-nums; }
.tabel .dr { text-align: right; }
.tabel .exp { color: var(--export); }
.tabel .imp { color: var(--import); }
.tabel code { color: var(--text-sec); font-size: 12px; }
.tabel tbody tr:hover { background: rgba(0,104,165,.04); }

.legenda-centrale { margin-top: 14px; }
.legenda-centrale .nota-mica { color: var(--text-sec); font-size: 12px; flex-basis: 100%; }

/* ---------- tabel mix ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mix { width: 100%; border-collapse: collapse; }
.mix tr + tr th, .mix tr + tr td { border-top: 1px solid var(--linie); }

/* Selectorii au doua clase peste tot: o regula de forma ".mix td" ar avea
   specificitate mai mare decat ".mix-mw" si i-ar anula padding-urile. */
.mix .mix-sursa, .mix .mix-bara, .mix .mix-mw, .mix .mix-pct {
  padding-top: 8px; padding-bottom: 8px; vertical-align: middle;
}

.mix .mix-sursa {
  text-align: left; font-weight: 400; font-size: 14px; color: var(--text);
  white-space: nowrap; width: 1%; padding-right: 20px;
}
.mix .mix-sursa i {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 9px; vertical-align: -1px;
}

.mix .mix-bara { width: 100%; padding-right: 22px; }
.mix .mix-bara span {
  display: block; height: 14px; border-radius: 3px; min-width: 2px;
  animation: creste .55s cubic-bezier(.22,.61,.36,1) both;
}

.mix .mix-mw {
  text-align: right; white-space: nowrap; font-size: 15px; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; width: 1%;
}
.mix .mix-mw em {
  font-style: normal; font-weight: 400; font-size: 12px;
  color: var(--text-sec); margin-left: 4px;
}

.mix .mix-pct {
  text-align: right; white-space: nowrap; width: 1%;
  padding-left: 20px; font-size: 14px; color: var(--text-sec);
  font-variant-numeric: tabular-nums;
}

/* ---------- panouri mici ---------- */

.mici { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }

.mic {
  margin: 0; background: var(--card); border: 1px solid var(--linie);
  border-radius: 10px; padding: 12px 14px 8px;
}
.mic figcaption { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.mic-tara { font-size: 13px; color: var(--text-sec); }
.mic-val { font-size: 13px; color: var(--text-sec); }
.mic-val b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 5px; }
.mic-val .exp { color: var(--export); }
.mic-val .imp { color: var(--import); }
.mic-panza { position: relative; height: 96px; }

.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sec); }
.lg i { width: 10px; height: 10px; border-radius: 2px; }
.lg b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.legenda-grafic { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }

/* ---------- pagina live, structura ---------- */

.titlu { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 4px 0 6px; letter-spacing: -.5px; }
.subtitlu { font-size: 15px; color: var(--text-sec); margin: 0 0 26px; }

.panou {
  background: var(--card); border: 1px solid var(--linie); border-radius: 12px;
  padding: 18px 20px; margin: 22px 0;
}
.panou h2 { margin: 0; font-size: 17px; }
.panou .sub { margin: 3px 0 16px; font-size: 13px; color: var(--text-sec); }
.panou .bara { margin-bottom: 16px; }
.grafic-simplu { position: relative; }

.doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.doua .panou { margin: 22px 0; }

/* ---------- carduri KPI ---------- */

.kpi { display: flex; flex-direction: column; padding: 15px 16px 12px; }
.kpi strong { line-height: 1.15; }
.kpi-nota { font-size: 12.5px; color: var(--text-sec); line-height: 1.45; margin: 7px 0 0; flex: 1; }
.kpi-nota b { color: var(--text); font-weight: 600; }
.kpi-spark { position: relative; height: 38px; margin: 10px 0 4px; }
.kpi-delta { font-size: 12px; font-style: normal; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.kpi-delta.sus { color: #1b8f60; }
.kpi-delta.jos { color: var(--import); }

/* ---------- cadran + co2 ---------- */

.cadran { position: relative; height: 170px; }
.cadran-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; padding-top: 14px;
}
.cadran-val b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cadran-val span { font-size: 12px; color: var(--text-sec); }

.co2-mare { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.co2-mare span { display: block; font-size: 12px; font-weight: 400; color: var(--text-sec); margin-bottom: 12px; }

/* ---------- carduri pe tara ---------- */

.carduri-tari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }

.card-tara { background: var(--card); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.card-tara header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.card-tara h2 { font-size: 16px; font-weight: 600; margin: 0; margin-right: auto; }
.ct-cod {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--text-sec);
  border: 1px solid var(--linie); border-radius: 4px; padding: 1px 5px;
}
.ct-sold { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ct-sold.imp { color: #8a5410; background: rgba(217,140,43,.14); }
.ct-sold.exp { color: #146e50; background: rgba(47,174,127,.16); }

.ct-linii { list-style: none; margin: 0; padding: 0; }
.ct-linii li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px;
}
.ct-nume { color: var(--text); }
.ct-mw {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
}
.ct-mw em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-sec); }
.ct-mw.imp { color: var(--import); }
.ct-mw.exp { color: #1b8f60; }
.ct-mw.zero { color: var(--text-muted, #9a998f); }


/* ---------- mobil ---------- */

@media (max-width: 900px) {
  .cap, .meniu, main, footer { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 720px) {
  /* Meniul se pliaza sub buton. Clasa cu-burger e pusa din JS, deci fara JS
     meniul ramane vizibil in loc sa fie ascuns si inaccesibil. */
  .burger { display: inline-flex; }

  body.cu-burger .meniu { display: none; }
  body.cu-burger .meniu.deschis {
    display: flex; flex-direction: column; gap: 2px; align-items: stretch;
    justify-content: flex-start; padding: 8px 12px 12px;
  }
  body.cu-burger .meniu.deschis .nv {
    padding: 11px 12px; font-size: 15px; border-radius: 8px;
  }
  body.cu-burger .meniu.deschis .nv svg { width: 18px; height: 18px; }

  .cap { padding-top: 12px; gap: 10px; }
  .marca-semn { width: 30px; height: 30px; }
  .marca-semn svg { width: 26px; height: 26px; }
  .marca-text b { font-size: 14px; }
  .marca-text i { display: none; }

  /* O singura coloana peste tot: cardurile au text in ele si la jumatate de
     ecran devin ilizibile. Exceptie fac dalele de conditii, care sunt scurte. */
  .fise, .mici, .carduri-tari, .doua { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .conditii { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 16px 0 20px; }
  .dala { min-width: 0; padding: 10px 11px; gap: 9px; }
  .dala-fig { width: 32px; height: 30px; }
  .dala-v { font-size: 16px; }
  .dala-n { display: none; }

  .titlu { font-size: 23px; }
  .subtitlu { font-size: 14px; margin-bottom: 18px; }

  .panou { padding: 14px 14px 12px; margin: 16px 0; border-radius: 10px; }
  .panou h2 { font-size: 16px; }

  .fisa { padding: 12px 14px; }
  .fisa strong { font-size: 22px; }
  .kpi-nota { font-size: 12.5px; }
  .kpi-spark { height: 34px; }

  .mix .mix-pct { display: none; }
  .mix .mix-sursa { font-size: 13px; padding-right: 12px; }
  .mix .mix-mw { font-size: 14px; }
  .mix .mix-bara { padding-right: 14px; }

  .mic-panza { height: 88px; }

  .control-ora { flex-wrap: wrap; padding: 10px 12px; }
  .control-ora input[type=range] { order: 3; flex-basis: 100%; }

  .legenda-centrale .nota-mica { font-size: 11px; }
}

@media (max-width: 420px) {
  .titlu { font-size: 20px; }
  .ceas { font-size: 11px; padding: 5px 10px; }
  /* Sub 420 px, marca plus ceas plus buton nu incap pe un rand: butonul ramane
     doar cu pictograma. */
  .burger-text { display: none; }
  .burger { padding: 8px 10px; }
  .dala { padding: 9px 10px; gap: 8px; }
  .dala-fig { width: 28px; height: 26px; }
  .dala-v { font-size: 15px; }
}

/* Plasa de siguranta: daca ceva depaseste totusi latimea, pagina nu se misca
   lateral - se taie elementul, nu se rupe intreg layoutul. */
html, body { overflow-x: hidden; max-width: 100%; }
.tabel, .mix { max-width: 100%; }
img, svg, canvas { max-width: 100%; }

.descarcari { list-style: none; margin: 0; padding: 0; }
.descarcari li { padding: 9px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.descarcari li:first-child { border-top: 0; }
.descarcari a { color: var(--brand); text-decoration: none; }
.descarcari a:hover { text-decoration: underline; }

/* Harta termica saptamanala (Statistici) */
.ht-butoane { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ht-butoane button {
  font: inherit; font-size: 13px; padding: 5px 14px; cursor: pointer;
  background: var(--fundal); color: var(--text-sec);
  border: 1px solid var(--linie); border-radius: 999px; transition: background .15s, color .15s;
}
.ht-butoane button:hover:not(:disabled) { color: var(--text); }
.ht-butoane button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.ht-butoane button:disabled { opacity: .4; cursor: not-allowed; }
.heatmap { overflow-x: auto; }
.ht-grid {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(13px, 1fr));
  gap: 2px; min-width: 540px;
}
.ht-ora { font-size: 10px; color: var(--text-sec); text-align: center; line-height: 1; align-self: end; padding-bottom: 3px; }
.ht-zi { font-size: 11px; color: var(--text-sec); display: flex; align-items: center; }
.ht-cel { height: 22px; border-radius: 3px; background: var(--linie); }
.ht-cel.goala { background: transparent; border: 1px dashed var(--linie); }
.ht-scara { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--text-sec); }
.ht-scara i { flex: 1; max-width: 200px; height: 8px; border-radius: 4px; }

/* Semafor verde/ieftin (Pentru tine) */
.sem-doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.sem-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--fundal); border: 1px solid var(--linie); border-radius: 10px; }
.sem-bec { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 4px; background: var(--linie); }
.sem-bec[data-stare="bun"] { background: #1baf7a; box-shadow: 0 0 0 4px rgba(27,175,122,.16); }
.sem-bec[data-stare="mediu"] { background: #eda100; box-shadow: 0 0 0 4px rgba(237,161,0,.16); }
.sem-bec[data-stare="slab"] { background: #d95926; box-shadow: 0 0 0 4px rgba(217,89,38,.16); }
.sem-et { display: block; font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; }
.sem-v { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0 4px; }
.sem-v i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--text-sec); margin-left: 4px; }
.sem-n { margin: 0; font-size: 13px; color: var(--text-sec); }
.sem-sfat:not(:empty) { margin-top: 16px; padding: 14px 16px; background: rgba(27,175,122,.08); border: 1px solid rgba(27,175,122,.3); border-radius: 10px; }
.sfat-titlu { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.sfat-lista { margin: 0; padding-left: 18px; font-size: 14px; }
.sfat-lista li { margin: 3px 0; }

/* Top ore ieftine/scumpe */
.pret-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.pret-top h3 { margin: 0 0 6px; font-size: 13px; color: var(--text-sec); font-weight: 600; }
.pret-top ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pret-top li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--linie); }
.pret-top li:first-child { border-top: 0; }
.pt-ora { color: var(--text-sec); }
.pret-top .ieftin { color: #1baf7a; }
.pret-top .scump { color: var(--import); }

/* Rezumate numerice sub graficele din Piata */
.cd-praguri, .vol-rez, .ac-rez, .rampe-rez {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px; margin-top: 16px;
}
.cd-praguri div, .vol-rez div, .ac-rez div, .rampe-rez div {
  padding: 12px 14px; background: var(--fundal); border: 1px solid var(--linie); border-radius: 8px;
}
.cd-praguri span, .vol-rez span, .ac-rez span, .rampe-rez span {
  display: block; font-size: 12px; color: var(--text-sec);
}
.cd-praguri b, .vol-rez b, .ac-rez b, .rampe-rez b {
  display: block; font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 2px;
}
.cd-praguri i, .vol-rez i, .ac-rez i, .rampe-rez i {
  font-style: normal; font-size: 12px; color: var(--text-sec);
}

/* Rezumate zilnice */
.rez-lista { list-style: none; margin: 0; padding: 0; }
.rez-lista li { border-top: 1px solid var(--linie); }
.rez-lista li:first-child { border-top: 0; }
.rez-lista a { display: block; padding: 14px 2px; text-decoration: none; color: inherit; }
.rez-lista a:hover { background: rgba(0,104,165,.05); }
.rez-lista b { display: block; font-size: 15px; color: var(--brand); margin-bottom: 3px; }
.rez-lista span { display: block; font-size: 13px; color: var(--text-sec); line-height: 1.5; }
.rez-text p { font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.rez-text p:last-child { margin-bottom: 0; }
.rez-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 24px 0; font-size: 14px; }
.rez-nav a { color: var(--brand); text-decoration: none; }
.rez-nav a:hover { text-decoration: underline; }

/* Comparatie pret cu vecinii */
.pv-carduri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.pv-card { padding: 14px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fundal); }
.pv-card.ro { border-color: var(--brand); background: rgba(0,104,165,.06); }
.pv-tara { display: block; font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; }
.pv-card b { display: block; font-size: 22px; font-weight: 700; margin: 3px 0; }
.pv-card b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-sec); }
.pv-dif { display: block; font-size: 12px; color: var(--text-sec); }
.pv-card.ieftin .pv-dif { color: #1baf7a; }
.pv-card.scump .pv-dif { color: var(--import); }

/* Bilant brut import/export/net (Interconexiuni) */
.bilant {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 16px;
  background: var(--card); border: 1px solid var(--linie); border-radius: 10px;
}
.bilant-parte { flex: 1 1 150px; min-width: 130px; }
.bilant-parte span { display: block; font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; }
.bilant-parte b { display: block; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 3px 0 2px; }
.bilant-parte b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-sec); margin-left: 5px; }
.bilant-parte em { font-style: normal; font-size: 12px; color: var(--text-sec); }
.bilant-parte.imp b { color: var(--import); }
.bilant-parte.exp b { color: var(--export); }
.bilant-parte.net { border-left: 1px solid var(--linie); padding-left: 14px; }
.bilant-parte.net b.imp { color: var(--import); }
.bilant-parte.net b.exp { color: var(--export); }
.bilant-semn { display: flex; align-items: center; font-size: 20px; color: var(--text-sec); }
@media (max-width: 620px) { .bilant-semn { display: none; } }

/* Pozitie neta regionala */
.pn-sub { margin: 22px 0 10px; font-size: 14px; font-weight: 600; }
.pn-carduri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; margin-top: 14px; }
.pn-card { padding: 11px 13px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fundal); }
.pn-card.exp { border-left: 3px solid var(--export); }
.pn-card.imp { border-left: 3px solid var(--import); }
.pn-tara { display: block; font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; }
.pn-card b { display: block; font-size: 19px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.pn-card b i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-sec); }
.pn-det { display: block; font-size: 11px; color: var(--text-sec); }

/* Factor de capacitate */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; }
.fc-grid div { padding: 10px 12px; background: var(--fundal); border: 1px solid var(--linie); border-radius: 8px; }
.fc-grid span { display: block; font-size: 12px; color: var(--text-sec); }
.fc-grid b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-grid i { font-style: normal; font-size: 11px; color: var(--text-sec); margin-left: 4px; }
.nota.avertisment {
  margin-top: 14px; padding: 11px 13px;
  background: rgba(237,161,0,.09); border: 1px solid rgba(237,161,0,.35);
  border-radius: 8px; color: var(--text);
}

/* Subtitluri in panouri (Despre). Nu stilizam .panou p in general: regula ar
   avea specificitate mai mare decat .nota si ar schimba notele din tot site-ul. */
.panou h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 600; }
.panou h3:first-of-type { margin-top: 6px; }
.metodologie p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.metodologie p:last-child { margin-bottom: 0; }

/* Cost pe electrocasnice */
.ce-tabel .ieftin { color: #1baf7a; }
.ce-tabel .scump { color: var(--import); }
.ce-tabel code { font-size: 12px; color: var(--text-sec); }

/* Fereastra optima */
.fo-card { padding: 16px; background: rgba(27,175,122,.08); border: 1px solid rgba(27,175,122,.3); border-radius: 10px; }
.fo-et { display: block; font-size: 12px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; }
.fo-card b { display: block; font-size: 24px; font-weight: 700; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.fo-det { display: block; font-size: 13px; color: var(--text-sec); }

/* Lexic "ce inseamna" */
.lexic { margin: 0; }
.lexic dt { font-weight: 600; font-size: 14px; margin-top: 16px; }
.lexic dt:first-child { margin-top: 0; }
.lexic dd { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-sec); }

/* Formular de contact */
.formular-contact { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.fc-rand { display: flex; flex-direction: column; gap: 5px; }
.fc-rand label { font-size: 13px; color: var(--text-sec); }
.fc-doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.formular-contact input, .formular-contact textarea {
  font: inherit; font-size: 14px; padding: 9px 11px; color: var(--text);
  background: var(--fundal); border: 1px solid var(--linie); border-radius: 8px;
}
.formular-contact input:focus, .formular-contact textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,104,165,.14);
}
.formular-contact textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.formular-contact button {
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 22px; cursor: pointer;
  align-self: flex-start; color: #fff; background: var(--brand);
  border: 1px solid var(--brand); border-radius: 8px;
}
.formular-contact button:hover { filter: brightness(1.08); }
.capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-ok, .contact-eroare {
  margin: 0 0 18px; padding: 13px 15px; border-radius: 10px; font-size: 14px;
}
.contact-ok { background: rgba(27,175,122,.10); border: 1px solid rgba(27,175,122,.4); }
.contact-eroare { background: rgba(217,89,38,.09); border: 1px solid rgba(217,89,38,.4); }