:root {
  --bg:      #0a0b0c;
  --panel:   #0d0e10;
  --panel-2: #111316;
  --line:    rgba(255,255,255,.08);
  --line-2:  rgba(255,255,255,.05);
  --ink:     #f2f3f4;
  --ink-2:   #b7bcc2;
  --mut:     #7c828a;
  --mut-2:   #565c64;
  --acc:     #d7f24b;   /* lime — consum / regenerabile / live */
  --acc-dim: rgba(215,242,75,.14);
  --ser2:    #e3e6e9;   /* producție */
  --nucl:    #8ab7ff;
  --fossil:  #e0954e;
  --stor:    #8d939b;
  --bad:     #ff7a66;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --dot: rgba(255,255,255,.035);
  --tip: #101215;
}

/* Light theme. Lime at #d7f24b is invisible on paper-white, so the accents are
   re-cut for contrast rather than reused: the hues stay recognisable but the
   luminance is inverted. Chart series read their colours from these too. */
:root[data-theme="light"] {
  --bg:      #faf7f2;   /* warm off-white, easier than pure white */
  --panel:   #ffffff;
  --panel-2: #f1ece4;
  --line:    rgba(28,25,20,.14);
  --line-2:  rgba(28,25,20,.08);
  --ink:     #14161a;
  --ink-2:   #3d434b;
  --mut:     #6b7178;
  --mut-2:   #8b9199;
  --acc:     #4f7a00;   /* olive — the lime, darkened until it reads on white */
  --acc-dim: rgba(79,122,0,.14);
  --ser2:    #2b3138;   /* production line, dark on light */
  --nucl:    #1f5fd0;
  --fossil:  #a95f12;
  --stor:    #6f757d;
  --bad:     #c62f1c;
  --dot:     rgba(28,25,20,.05);
  --tip:     #ffffff;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 26px 26px;
}
::selection { background: var(--acc); color: #0a0b0c; }

.frame { max-width: 1240px; margin: 0 auto; padding: 0 24px 60px; }
@media (max-width: 640px){ .frame { padding: 0 14px 40px; } }

/* ── micro-label ─────────────────────── */
.k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── top bar ─────────────────────────── */
.topbar {
  display:flex; align-items:center; gap: 20px;
  padding: 20px 2px 16px;
  border-bottom: 1px solid var(--line);
}
.wordmark { display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.wordmark .sen {
  font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing:.08em;
}
.wordmark .sen b { color: var(--acc); font-weight:500; }
.wordmark .ro {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-2);
}
.top-meta {
  margin-left:auto; display:flex; align-items:center; gap:22px;
  font-family: var(--mono); font-size: 11.5px; color: var(--mut);
}
.top-meta b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px){ .top-meta .hide-m { display:none; } }
/* below this the wordmark's subtitle and the share button cannot both fit */
@media (max-width: 620px){
  .wordmark .ro { display:none; }
  .topbar { gap: 12px; }
  .top-meta { gap: 14px; }
}
.live {
  display:flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.14em;
  color: var(--acc);
}
.live.err { color: var(--bad); }
.live i {
  width:7px; height:7px; border-radius:50%; background: currentColor; flex:none;
  animation: blink 1.6s ease-in-out infinite;
}
.live.err i { animation: none; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── share ───────────────────────────── */
.sharebtn {
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em;
  color: var(--mut); background:none; border:1px solid var(--line); padding: 5px 10px;
}
.sharebtn:hover { color: var(--ink); border-color: var(--ink-2); }
.sharebtn svg { flex:none; }
@media (max-width: 560px){ .sharebtn span { display:none; } .sharebtn { padding:6px 8px; } }

.sharemenu {
  position: fixed; z-index: 40; right: 24px; top: 62px; width: min(380px, calc(100vw - 28px));
  background: var(--tip); border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.65); padding: 14px;
}
.sharemenu[hidden] { display: none; }
@media (max-width: 560px){
  .sharemenu { right: 14px; left: 14px; width: auto; top: 56px; }
}
.sharehead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sharehead button {
  margin-left:auto; background:none; border:none; color: var(--mut); cursor:pointer;
  font-size: 18px; line-height:1; padding: 0 2px;
}
.sharehead button:hover { color: var(--ink); }
#sharecanvas { width:100%; height:auto; display:block; border: 1px solid var(--line-2); }
.sharegrid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1px; background: var(--line);
             border:1px solid var(--line); margin-top: 12px; }
.sharegrid a, .sharegrid button {
  display:flex; align-items:center; gap:9px; padding: 10px 12px; cursor:pointer;
  background: var(--panel); border:none; color: var(--ink-2); text-decoration:none;
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em;
}
.sharegrid a:hover, .sharegrid button:hover { background: var(--panel-2); color: var(--ink); }
.sharegrid i { width:8px; height:8px; flex:none; }
.sharecopy {
  width:100%; margin-top:10px; padding: 9px; cursor:pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  background: var(--acc); color:#0a0b0c; border:none;
}
.sharecopy:hover { filter: brightness(1.08); }
.sharecopy.done { background: var(--panel-2); color: var(--acc); }

/* ── error strip ─────────────────────── */
#errbar {
  display:none; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid rgba(255,122,102,.35); background: rgba(255,122,102,.06);
  padding: 10px 14px; margin-top: 14px; font-size: 13px; color: var(--ink-2);
}
#errbar.show { display:flex; }
#errbar button {
  margin-left:auto; font-family: var(--mono); font-size: 11px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink); background:none; cursor:pointer;
  border:1px solid var(--line); padding: 7px 14px;
}
#errbar button:hover { border-color: var(--ink-2); }

/* ── technical grid ──────────────────── */
.board {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--line-2);
  gap: 1px;
  border: 1px solid var(--line);
  position: relative;
}
.cell { background: var(--panel); padding: 22px 24px; position: relative; min-width: 0; }
.cell .corner {
  position:absolute; top:6px; right:8px;
  font-family: var(--mono); font-size: 10px; color: var(--mut-2); letter-spacing:.1em;
}
.span2 { grid-column: 1 / -1; }
@media (max-width: 860px){
  .board { grid-template-columns: 1fr; }
}

/* ── hero (consum) ───────────────────── */
.hero { display:flex; flex-direction:column; justify-content:space-between; min-height: 252px; }
.hero-val {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(64px, 9vw, 108px);
  line-height: .95; letter-spacing: -.03em;
  color: var(--ink); margin: 18px 0 10px;
  font-variant-numeric: tabular-nums;
}
.hero-val .unit {
  font-size: .22em; color: var(--mut); letter-spacing:.12em; margin-left: 12px;
  vertical-align: 6px;
}
.hero-foot { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.delta { font-family: var(--mono); font-size: 12.5px; }
.delta .up { color: var(--acc); }
.delta .dn { color: var(--bad); }
.delta .since { color: var(--mut-2); }
/* .up / .dn mark a good or bad move, not the arrow direction. The hero number
   itself is no longer coloured — see renderCondition in app.js. */
.srow .num { transition: color .5s ease; }
.srow .num.up { color: var(--acc); }
.srow .num.dn { color: var(--bad); }

/* ── hero trend: direction has to be unmissable ─────── */
.trend {
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono); color: var(--mut);
}
.trend .arrow {
  width:0; height:0; flex:none;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.trend.rising .arrow { border-bottom: 12px solid var(--bad);  animation: bob-up 1.9s ease-in-out infinite; }
.trend.falling .arrow { border-top: 12px solid var(--acc);    animation: bob-dn 1.9s ease-in-out infinite; }
.trend.flat .arrow {
  border: none; width:14px; height:2px; background: var(--mut-2);
}
.trend .amount {
  font-size: 21px; font-weight: 500; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums; transition: color .5s ease;
}
.trend .word {
  font-style: normal; font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  transition: color .5s ease;
}
.trend.rising .amount, .trend.rising .word { color: var(--bad); }
.trend.falling .amount, .trend.falling .word { color: var(--acc); }
.trend.flat .amount, .trend.flat .word { color: var(--mut); }
.trend-since { font-family: var(--mono); font-size: 11px; color: var(--mut-2); }
.windows { display:flex; gap:1px; background: var(--line); border:1px solid var(--line); margin-left:auto; }
.windows button {
  font-family: var(--mono); font-size: 10px; letter-spacing:.1em;
  color: var(--mut-2); background: var(--panel); border:none; cursor:pointer;
  padding: 4px 9px;
}
.windows button:hover { color: var(--ink-2); }
.windows button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); }
/* marks on the sparkline where the comparison is measured from */
.spark .mark { stroke: var(--mut-2); stroke-width:1; stroke-dasharray:2 3; }
@keyframes bob-up { 0%,100%{ transform: translateY(2px) } 50%{ transform: translateY(-3px) } }
@keyframes bob-dn { 0%,100%{ transform: translateY(-2px) } 50%{ transform: translateY(3px) } }

/* ── hero sparkline ─────────────────────────────────── */
.spark { display:block; width:100%; height:88px; margin-top: 14px; overflow:visible; }
.spark .line { fill:none; stroke-width:2; vector-effect: non-scaling-stroke;
               stroke-linejoin:round; stroke-linecap:round; transition: stroke .5s ease; }
.spark .ring { transform-box: fill-box; transform-origin: center;
               animation: ping 2.2s cubic-bezier(0,.5,.4,1) infinite; }
@keyframes ping { 0%{ transform: scale(.5); opacity:.75 } 100%{ transform: scale(3.4); opacity:0 } }

@media (prefers-reduced-motion: reduce) {
  .trend .arrow, .spark .ring, .live i { animation: none; }
  .hero-val, .srow .num, .trend .amount, .trend .word, .spark .line { transition: none; }
}

/* ── side stack ──────────────────────── */
.stack { display:grid; grid-template-rows: 1fr 1fr 1fr; background: var(--line-2); gap:1px; padding:0; }
.stack > div { background: var(--panel); padding: 16px 24px 14px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.srow { display:flex; align-items:baseline; gap:12px; }
.srow .num {
  font-family: var(--mono); font-size: 27px; letter-spacing:-.02em;
  font-variant-numeric: tabular-nums;
}
.srow .num small { font-size: 12px; color: var(--mut); letter-spacing:.08em; margin-left:4px; }
.srow .tag { font-family: var(--mono); font-size: 11px; letter-spacing:.1em; }
.tag.exp { color: var(--acc); }
.tag.imp { color: var(--fossil); }
/* diverging sold bar */
.divbar { position:relative; height: 4px; background: var(--panel-2); }
.divbar .mid { position:absolute; left:50%; top:-3px; width:1px; height:10px; background: var(--mut-2); }
.divbar .fill { position:absolute; top:0; height:100%; background: var(--acc); transition: all .6s cubic-bezier(.22,1,.36,1); }
/* renewables meter */
.meter { position:relative; height: 4px; background: var(--panel-2); overflow:hidden; }
.meter .fill { height:100%; width:0; background: var(--acc); transition: width .6s cubic-bezier(.22,1,.36,1); }
.meter-scale { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color: var(--mut-2); }

/* ── chart ───────────────────────────── */
.chart-head { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.chart-title { font-size: 14px; font-weight: 600; letter-spacing:-.01em; }
.chart-legend { display:flex; gap:18px; margin-left:auto; }
.chart-legend span {
  display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-2);
}
.lkey { width:16px; height:2px; display:inline-block; }
.chartwrap { position:relative; margin-top: 14px; }
#chart { width:100%; height:auto; display:block; }
#chart text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty-chart {
  height: 280px; display:grid; place-items:center; text-align:center;
  color: var(--mut); font-family: var(--mono); font-size: 12px; line-height: 2;
  border: 1px dashed var(--line); margin-top:14px;
}
.tt {
  position:absolute; display:none; pointer-events:none; z-index:6;
  background: var(--tip); border: 1px solid var(--line);
  padding: 10px 12px; min-width: 150px;
  font-family: var(--mono); font-size: 11.5px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tt .t { color: var(--mut); font-size: 10px; letter-spacing:.1em; margin-bottom: 7px; }
.tt .r { display:flex; align-items:center; gap:8px; margin-top: 3px; color: var(--ink-2); }
.tt .r b { margin-left:auto; color: var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.sw { width:8px; height:8px; flex:none; }

/* ── mix ─────────────────────────────── */
.mix-head { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.mix-groups { display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.mix-groups span { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-2); }
.stackbar { display:flex; height: 34px; gap: 2px; background: var(--line-2); }
.stackbar div { position:relative; transition: width .7s cubic-bezier(.22,1,.36,1); min-width:2px; }
.stackbar div:hover::after {
  content: attr(data-tip);
  position:absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--tip); border:1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; padding: 5px 8px; white-space:nowrap; z-index:4;
}
.mix-table { margin-top: 4px; }
.mrow {
  display:grid; grid-template-columns: 150px 1fr 92px 62px;
  gap: 14px; align-items:center;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.mrow:last-child { border-bottom: none; }
@media (max-width: 640px){ .mrow { grid-template-columns: 108px 1fr 78px 52px; gap:8px; } }
.mrow .name { display:flex; align-items:center; gap:9px; font-size: 13px; color: var(--ink-2); min-width:0; }
.mrow .name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .bar { height: 3px; background: var(--panel-2); position:relative; }
.mrow .bar i { position:absolute; left:0; top:0; height:100%; display:block; transition: width .7s cubic-bezier(.22,1,.36,1); }
.mrow .mw  { font-family: var(--mono); font-size: 12.5px; text-align:right; font-variant-numeric:tabular-nums; }
.mrow .mw small { color: var(--mut-2); font-size: 10px; margin-left:2px; }
.mrow .pct { font-family: var(--mono); font-size: 11.5px; color: var(--mut); text-align:right; font-variant-numeric:tabular-nums; }

/* ── stare sistem ────────────────────── */
.status-line {
  font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 20px;
  max-width: 78ch;
}
.status-line b { color: var(--ink); font-weight: 500; font-family: var(--mono); }
.status-line .hi { color: var(--acc); }
.status-line .lo { color: var(--bad); }
/* what covers demand right now: domestic generation + net import = 100% */
.covbar { display:flex; height: 26px; gap:2px; background: var(--bg); margin: 8px 0 9px; }
.covbar div { position:relative; min-width:2px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.covbar .gap {
  background: repeating-linear-gradient(45deg,
    var(--bad) 0 5px, rgba(255,122,102,.25) 5px 10px);
}
.covlegend { display:flex; gap:20px; flex-wrap:wrap; font-family: var(--mono); font-size: 11.5px;
             color: var(--mut); margin-bottom: 18px; }
.covlegend span { display:flex; align-items:center; gap:7px; }
.covlegend b { color: var(--ink-2); font-weight:500; }
.covlegend .warn b, .covlegend .warn { color: var(--bad); }

/* auto-fit rather than a fixed count: removing the carbon tile left a third
   column with nothing in it, which read as a dead panel */
.metrics { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 1px; background: var(--line-2); }
.metrics > div { background: var(--panel); padding: 14px 18px 12px; display:flex; flex-direction:column; gap:8px; }
@media (max-width: 760px){ .metrics { grid-template-columns: 1fr; } }
.grade { font-family: var(--mono); font-size: 11px; letter-spacing:.1em; }
.grade.g1 { color: var(--acc); }
.grade.g2 { color: #cfe07a; }
.grade.g3 { color: var(--fossil); }
.grade.g4 { color: var(--bad); }
.scale { position:relative; height:4px; background: var(--panel-2); }
.scale i { position:absolute; top:0; height:100%; left:0; transition: width .6s cubic-bezier(.22,1,.36,1); }
.scale u { position:absolute; top:-3px; width:1px; height:10px; background: var(--ink); }

/* ── range selector ──────────────────── */
.ranges { display:flex; gap:1px; background: var(--line); border:1px solid var(--line); }
.ranges button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mut); background: var(--panel); border:none; cursor:pointer;
  padding: 6px 13px;
}
.ranges button:hover { color: var(--ink-2); }
.ranges button[aria-pressed="true"] { background: var(--acc); color: #0a0b0c; }

/* ── balanța zilnică (red / green) ───── */
.daystrip { display:flex; gap:3px; margin-top: 6px; }
.daystrip .d { flex:1 1 0; min-width:0; cursor:default; }
.daystrip .plot { height: 74px; position:relative; background: var(--panel-2); }
.daystrip .plot::before {
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: var(--mut-2);
}
.daystrip .plot i {
  position:absolute; left:0; right:0; display:block;
  transition: height .7s cubic-bezier(.22,1,.36,1), top .7s cubic-bezier(.22,1,.36,1);
}
.daystrip .d.imp i { background: var(--bad); top:50%; }
.daystrip .d.exp i { background: var(--acc); }
.daystrip .lbl { font-family: var(--mono); font-size:9.5px; color: var(--mut-2); text-align:center; margin-top:7px; }
.daystrip .d:hover .plot, .daystrip .d.on .plot { outline: 1px solid var(--ink-2); }
.daystrip .d:hover .lbl, .daystrip .d.on .lbl { color: var(--ink-2); }
.daywrap { position:relative; }
/* rollover card: the day's own curve plus its numbers */
.daytt { min-width: 216px; }
.daytt .hd { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.daytt .hd b { color: var(--ink); font-weight:500; }
.daytt .hd span { margin-left:auto; letter-spacing:.1em; text-transform:uppercase; font-size:10px; }
.daytt .hd .imp { color: var(--bad); }
.daytt .hd .exp { color: var(--acc); }
.daytt svg { display:block; width:100%; height:52px; margin: 2px 0 8px; }
.daytt .r { display:flex; gap:10px; margin-top:3px; color: var(--ink-2); }
.daytt .r b { margin-left:auto; color: var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.daytt .none { color: var(--mut-2); font-size:10.5px; padding: 6px 0 8px; }
.legend-rg { display:flex; gap:18px; margin-left:auto; }
.legend-rg span { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-2); }

/* ── schimburi la graniță ────────────── */
.brow {
  display:grid; grid-template-columns: 132px 1fr 92px; gap: 6px 14px; align-items:center;
  padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.brow:last-child { border-bottom:none; }
@media (max-width: 640px){ .brow { grid-template-columns: 96px 1fr 76px; } }
.brow .blines {
  grid-column: 2 / -1; font-family: var(--mono); font-size: 10.5px; color: var(--mut-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.brow .bname { font-size: 13px; color: var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow .bname small { display:block; }
.brow .bname small { font-family: var(--mono); font-size: 10px; color: var(--mut-2); margin-left:6px; letter-spacing:.06em; }
.brow .bbar { position:relative; height:4px; background: var(--panel-2); }
.brow .bbar u { position:absolute; left:50%; top:-3px; width:1px; height:10px; background: var(--mut-2); }
.brow .bbar i { position:absolute; top:0; height:100%; transition: all .7s cubic-bezier(.22,1,.36,1); }
.brow .bval { font-family: var(--mono); font-size: 12.5px; text-align:right; font-variant-numeric:tabular-nums; }
.brow .bval small { color: var(--mut-2); font-size:10px; margin-left:2px; }
.bsum { display:flex; gap:22px; flex-wrap:wrap; margin: 2px 0 16px; font-family:var(--mono); font-size:12px; color:var(--mut); }
.bsum b { font-weight:500; }
.bsum .in b { color: var(--bad); }
.bsum .out b { color: var(--acc); }

footer {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--mut); line-height: 1.8; max-width: 72ch;
}
footer a { color: var(--ink-2); text-underline-offset: 3px; }
footer .mono { font-size: 11px; }

/* ── hero condition badge ─────────────── */
.hero-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.condition {
  display:flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em;
  border:1px solid var(--line); padding: 4px 10px;
}
.condition i { width:7px; height:7px; border-radius:50%; flex:none; }
.condition b { font-weight:500; }
.condition span { color: var(--mut-2); letter-spacing:.06em; text-transform:none; }
.condition.ok    { border-color: rgba(215,242,75,.35); }
.condition.ok    i { background: var(--acc); }
.condition.ok    b { color: var(--acc); }
.condition.watch { border-color: rgba(224,149,78,.4); }
.condition.watch i { background: var(--fossil); }
.condition.watch b { color: var(--fossil); }
.condition.tight { border-color: rgba(255,122,102,.45); }
.condition.tight i { background: var(--bad); animation: blink 1.6s ease-in-out infinite; }
.condition.tight b { color: var(--bad); }
@media (max-width: 560px){ .condition span { display:none; } }

/* ── export ───────────────────────────── */
.pdfrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top: 20px; }
.pdfbtn {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-2); background: var(--panel); border:1px solid var(--line); padding: 9px 14px;
}
.pdfbtn:hover { color: var(--ink); border-color: var(--ink-2); }
.pdfnote { font-family: var(--mono); font-size: 11px; color: var(--mut-2); }

/* ── print / PDF ──────────────────────── */
@media print {
  /* keep the dark rendering rather than letting the browser strip it */
  html, body { background: #0a0b0c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background-image: none !important; font-size: 11px; }
  .frame { max-width: none; padding: 0; }
  /* interactive chrome has no meaning on paper */
  .sharebtn, .sharemenu, .pdfrow, #errbar, .ranges, .windows, .tt, .daytt { display: none !important; }
  .topbar { padding: 0 0 10px; }
  .board { grid-template-columns: 1.15fr 1fr; break-inside: auto; }
  .cell, .stack > div { break-inside: avoid; }
  .cell { padding: 14px 16px; }
  .hero { min-height: 0; }
  .hero-val { font-size: 54px !important; margin: 8px 0 6px; }
  .spark { height: 54px; }
  #chart, #soldchart { max-height: 220px; }
  .daystrip .plot { height: 54px; }
  footer { break-inside: avoid; }
  /* the live pulse would print as a solid dot anyway */
  .live i, .condition.tight i, .spark .ring, .trend .arrow { animation: none !important; }
  a[href]:after { content: ""; }
  @page { margin: 12mm; }
}
.integrity { font-size: 12px; color: var(--mut); line-height:1.7; max-width: 78ch; margin: -6px 0 18px; }
.integrity b { color: var(--ink-2); font-weight:500; font-family: var(--mono); }
.langtoggle {
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-decoration:none;
  color: var(--mut); border:1px solid var(--line); padding: 5px 9px;
}
.langtoggle:hover { color: var(--ink); border-color: var(--ink-2); }

/* ── production vs consumption ────────── */
.vscons { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
          font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.vscons i { width:8px; height:8px; flex:none; }
.vscons b { font-family: var(--mono); font-weight:500; }
.vscons em { font-style:normal; font-family: var(--mono); font-size: 11px; color: var(--mut-2); }
.vscons.short i { background: var(--bad); }
.vscons.short b { color: var(--bad); }
.vscons.over  i { background: var(--acc); }
.vscons.over  b { color: var(--acc); }
.vscons.level i { background: var(--mut); }

/* ── consum vs producție ──────────────── */
.versus {
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap: 10px 26px; padding: 26px 24px 22px;
}
.vs-side { text-align:center; min-width:0; }
.vs-num {
  font-family: var(--mono); font-size: clamp(34px, 5.2vw, 62px); line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric: tabular-nums; margin-top: 6px;
  transition: color .5s ease;
}
.vs-num small { font-size: .3em; color: var(--mut); letter-spacing:.1em; margin-left:8px; }
.vs-op {
  font-family: var(--mono); font-size: clamp(40px, 6vw, 74px); line-height:1;
  color: var(--mut-2); transition: color .5s ease;
}
.vs-verdict {
  grid-column: 1 / -1; text-align:center; font-size: 13.5px; color: var(--ink-2);
  border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 6px;
}
.vs-verdict b { font-family: var(--mono); font-weight:500; }
.versus.short .vs-op, .versus.short #vs-cons { color: var(--bad); }
.versus.short .vs-verdict b { color: var(--bad); }
.versus.over  .vs-op, .versus.over  #vs-prod { color: var(--acc); }
.versus.over  .vs-verdict b { color: var(--acc); }
@media (max-width: 560px){
  .versus { gap: 6px 12px; padding: 20px 14px 18px; }
  .vs-num { font-size: 30px; }
  .vs-op { font-size: 34px; }
}

/* ── theme toggle ─────────────────────── */
.themebtn {
  font-family: var(--mono); font-size: 12px; cursor:pointer; line-height:1;
  color: var(--mut); background:none; border:1px solid var(--line); padding: 4px 8px;
}
.themebtn:hover { color: var(--ink); border-color: var(--ink-2); }
:root[data-theme="light"] .sharecopy { color:#fff; }
:root[data-theme="light"] ::selection { background: var(--acc); color:#fff; }

/* ── FAQ ──────────────────────────────── */
.faq { margin-top: 22px; border: 1px solid var(--line); }
.faq-list { margin-top: 14px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  cursor: pointer; padding: 12px 24px 12px 0; font-size: 14px; color: var(--ink-2);
  list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 11px;
  font-family: var(--mono); color: var(--mut);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--ink); }
.faq-item p { padding: 0 24px 14px 0; font-size: 13px; color: var(--mut); line-height: 1.75; max-width: 82ch; }
@media print { .faq-item p { display: block !important; } .faq-item summary::after { content: ""; } }