:root{
  color-scheme:dark;
  --bg:#06111c;
  --bg2:#091827;
  --panel:#0d1d2c;
  --panel2:#102539;
  --line:#203b50;
  --line2:#2b4e67;
  --text:#edf7fb;
  --muted:#91a9ba;
  --muted2:#617b8e;
  --import:#4de4cf;
  --export:#ffae59;
  --river:#55cfff;
  --solar:#ffd45b;
  --nuclear:#78a9ff;
  --good:#50d69b;
  --warn:#ffc45e;
  --bad:#ff657d;
  --fossil:#d68169;
  --renew:#63cc83;
  --misc:#8095a6;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 20px 55px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at 18% -5%,rgba(77,228,207,.10),transparent 33%),
    radial-gradient(circle at 92% 18%,rgba(120,169,255,.10),transparent 30%),
    linear-gradient(180deg,#06111c 0%,#071421 58%,#050d16 100%);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.45;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:linear-gradient(rgba(87,173,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(87,173,214,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(#000,transparent 95%);
}
button,a{font:inherit}
button{color:inherit}
canvas{display:block;max-width:100%}

.page-glow{position:fixed;width:32rem;height:32rem;border-radius:50%;filter:blur(85px);opacity:.16;pointer-events:none;z-index:-1}
.page-glow-a{left:-13rem;top:16rem;background:var(--import)}
.page-glow-b{right:-14rem;top:42rem;background:var(--export)}

.shell{width:min(1540px,calc(100% - 32px));margin-inline:auto}
.topbar{
  margin-top:16px;
  min-height:88px;
  padding:13px 16px;
  display:grid;
  grid-template-columns:minmax(230px,.75fr) minmax(360px,1.4fr) minmax(280px,.8fr);
  align-items:center;
  gap:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(7,18,29,.84);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  position:sticky;top:10px;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.brand-bolt{
  display:grid;place-items:center;width:50px;height:50px;border-radius:15px;
  background:linear-gradient(145deg,rgba(77,228,207,.22),rgba(120,169,255,.15));
  border:1px solid rgba(77,228,207,.42);color:var(--solar);font-size:28px;font-weight:900;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 24px rgba(77,228,207,.13);
}
.brand strong{display:block;font-family:var(--mono);font-size:25px;letter-spacing:.085em;line-height:1}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:6px;white-space:nowrap}
.head-center{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:center;gap:15px;min-width:0}
.head-center canvas{width:100%;height:58px;opacity:.92}
.head-center>div{text-align:right;white-space:nowrap}
.head-label{display:block;color:var(--muted2);font-size:9px;text-transform:uppercase;letter-spacing:.14em}
.head-center strong{display:block;font-family:var(--mono);font-size:22px;letter-spacing:-.04em}
.head-center small{display:block;color:var(--muted);font-size:10px}
.head-actions{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;gap:8px 10px}
.clock{font-family:var(--mono);font-weight:800;font-size:20px;text-align:right;grid-column:1/-1}
.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:10px;white-space:nowrap}
.status-chip i{width:7px;height:7px;border-radius:50%;background:var(--muted2)}
.status-chip.ok{color:var(--good);border-color:rgba(80,214,155,.45)}
.status-chip.ok i{background:var(--good);box-shadow:0 0 12px var(--good)}
.status-chip.stale{color:var(--warn);border-color:rgba(255,196,94,.46)}
.status-chip.stale i{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.status-chip.error{color:var(--bad);border-color:rgba(255,101,125,.46)}
.status-chip.error i{background:var(--bad);box-shadow:0 0 12px var(--bad)}
.status-chip.loading i{animation:pulse 1.1s ease-in-out infinite}
.refresh-btn{border:1px solid var(--line2);border-radius:999px;padding:7px 12px;background:var(--panel2);cursor:pointer;font-size:11px;transition:.2s}
.refresh-btn:hover{border-color:var(--import);transform:translateY(-1px)}
.refresh-btn.loading{pointer-events:none;opacity:.55}
.refresh-btn.loading:first-letter{animation:spin 1s linear infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.65)}}
@keyframes spin{to{transform:rotate(360deg)}}

main{padding:18px 0 42px}
.panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.035),transparent 38%),rgba(13,29,44,.94);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.eyebrow{display:block;color:var(--import);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(24px,2.2vw,38px);line-height:1.08;letter-spacing:-.045em;margin-bottom:8px}
h2{font-size:clamp(22px,1.8vw,31px);line-height:1.12;letter-spacing:-.035em;margin-bottom:0}
h3{font-size:17px;letter-spacing:-.02em;margin-bottom:12px}

.overview{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(340px,.75fr);gap:16px;align-items:stretch}
.map-panel{padding:18px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.map-head p{color:var(--muted);font-size:12px;margin-bottom:0;max-width:68ch}
.legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;color:var(--muted);font-size:10px;white-space:nowrap;padding-top:5px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend-line{width:20px;height:0;border-top:3px solid;border-radius:99px}
.legend-line.import{border-color:var(--import)}
.legend-line.export{border-color:var(--export)}
.legend-river{display:inline-block;width:20px;height:6px;border-radius:99px;background:linear-gradient(90deg,#70dcff,#1488c5);box-shadow:0 0 10px rgba(85,207,255,.42)}

.map-stage{position:relative;margin-top:10px;border-radius:15px;overflow:hidden;background:radial-gradient(circle at 52% 52%,rgba(64,144,188,.10),transparent 44%),linear-gradient(180deg,#071725,#07131f);border:1px solid rgba(44,80,105,.72);isolation:isolate}
.map-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(122,185,218,.025) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(122,185,218,.025) 32px);z-index:0}
#energyMap{display:block;width:100%;height:auto;position:relative;z-index:1}
.country{vector-effect:non-scaling-stroke;stroke-width:1.2;transition:filter .2s,opacity .2s,stroke .2s}
.country.neighbor{fill:url(#neighborFill);stroke:#244258;opacity:.88}
.country.hungary{fill:url(#huFill);stroke:#57b8d1;stroke-width:2.1;filter:drop-shadow(0 0 16px rgba(77,228,207,.12))}
.country.active{stroke:#fff;filter:brightness(1.45)}
.country-label{font-family:var(--mono);font-size:12px;font-weight:700;fill:#58758a;letter-spacing:.08em;pointer-events:none}
.country-label.hu-label{font-size:16px;fill:#bad5e2;letter-spacing:.12em}
.water-layer{pointer-events:none}
.river{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.river-shadow{stroke:#02131e;stroke-width:12;opacity:.82}
.river-shadow.thin{stroke-width:9}
.river-main{stroke:url(#riverGradient);stroke-width:7;filter:drop-shadow(0 0 7px rgba(85,207,255,.55));stroke-dasharray:9 7;animation:riverMove 1.8s linear infinite}
.river-main.thin{stroke-width:5;opacity:.9;animation-duration:2.4s}
.river-particles circle{fill:#c5f4ff;filter:drop-shadow(0 0 5px #55cfff)}
.river-name{font-family:var(--mono);font-size:12px;font-weight:900;letter-spacing:.14em;fill:#bcefff;paint-order:stroke;stroke:#0a2535;stroke-width:4}
.tisza-name{font-size:10px;opacity:.9}
.balaton{fill:#2e8cba;stroke:#65d6ff;stroke-width:2;opacity:.75}
.lake-name{font-family:var(--mono);font-size:8px;letter-spacing:.12em;fill:#d8f6ff}
@keyframes riverMove{to{stroke-dashoffset:-32}}

.flow-path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px currentColor);opacity:.88;stroke-dasharray:13 8;animation:flowMove 1.1s linear infinite}
.flow-path.import{stroke:var(--import);marker-end:url(#importArrow)}
.flow-path.export{stroke:var(--export);marker-end:url(#exportArrow)}
.flow-path.zero{stroke:var(--muted2);opacity:.34;animation:none;marker-end:none!important}
.flow-hit{fill:none;stroke:transparent;stroke-width:24;pointer-events:stroke;cursor:pointer}
@keyframes flowMove{to{stroke-dashoffset:-42}}
.flow-badge{cursor:pointer;outline:none}
.flow-badge rect{fill:rgba(7,18,29,.95);stroke:var(--badge-color);stroke-width:1.3;rx:9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.flow-badge .code{font-family:var(--mono);font-size:11px;font-weight:900;fill:var(--badge-color);letter-spacing:.08em}
.flow-badge .value{font-family:var(--mono);font-size:13px;font-weight:900;fill:#fff}
.flow-badge .unit{font-family:var(--mono);font-size:8px;fill:#8ca6b8}
.flow-badge:hover rect,.flow-badge:focus rect{stroke:#fff;filter:brightness(1.25) drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.city-pin circle{fill:#fff;stroke:#0a2231;stroke-width:3}
.city-pin text{font-family:var(--mono);font-size:9px;fill:#c9dce5;paint-order:stroke;stroke:#071522;stroke-width:3}
.paks-marker{cursor:pointer;outline:none}
.paks-halo{fill:rgba(255,174,89,.12);stroke:rgba(255,174,89,.42);animation:paksPulse 2.4s ease-out infinite}
.paks-dot{fill:var(--export);stroke:#fff1d8;stroke-width:2;filter:url(#mapGlow)}
.paks-marker>path{fill:#fff7e8}
.paks-bubble rect{fill:rgba(8,20,31,.96);stroke:rgba(255,174,89,.75);stroke-width:1.2}
.paks-bubble text{font-family:var(--mono)}
.bubble-title{fill:var(--export);font-size:10px;font-weight:900;letter-spacing:.16em}
.bubble-power{fill:#fff;font-size:14px;font-weight:900}
.bubble-water{fill:#ff7979;font-size:11px;font-weight:900}
.bubble-sub{fill:#83dfff;font-size:10px;font-weight:800}
.bubble-flow{fill:#7ca2b7;font-size:7.5px;letter-spacing:.08em}
@keyframes paksPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.45);opacity:0}}
.map-tooltip{position:absolute;z-index:20;width:min(300px,calc(100% - 24px));padding:12px 13px;border:1px solid var(--line2);border-radius:12px;background:rgba(5,16,26,.96);box-shadow:0 16px 35px rgba(0,0,0,.42);font-size:12px;pointer-events:none}
.map-tooltip strong{display:block;font-size:14px;margin-bottom:5px}
.map-tooltip span{display:block;color:var(--muted);margin-top:3px}
.flow-mobile{display:none}

.overview-side{display:flex;flex-direction:column;gap:16px}
.kpi{padding:16px;position:relative;min-width:0}
.kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--import),transparent)}
.hero-kpi{min-height:170px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 95% 15%,rgba(77,228,207,.13),transparent 45%),var(--panel)}
.kpi>span:not(.eyebrow){display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.kpi>strong{display:block;font-family:var(--mono);font-size:clamp(31px,3vw,54px);letter-spacing:-.065em;line-height:1.03;margin-top:9px;white-space:nowrap}
.kpi>strong small{font-size:.3em;color:var(--muted);letter-spacing:0;margin-left:5px}
.kpi p{color:var(--muted);font-size:11.5px;margin:10px 0 0}
.mini-delta{margin-top:12px;color:var(--muted2);font-family:var(--mono);font-size:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:1}
.kpi-grid .kpi>strong{font-size:clamp(24px,2.1vw,37px)}
.solar-kpi::after{background:linear-gradient(90deg,var(--solar),transparent)}
.paks-kpi::after{background:linear-gradient(90deg,var(--nuclear),transparent)}
.balance-kpi.importing::after{background:linear-gradient(90deg,var(--import),transparent)}
.balance-kpi.exporting::after{background:linear-gradient(90deg,var(--export),transparent)}
.supply-panel{padding:16px}
.supply-head,.supply-labels{display:flex;justify-content:space-between;align-items:center;gap:12px}
.supply-head{font-size:11px;color:var(--muted)}
.supply-head strong{font-family:var(--mono);font-size:12px;color:var(--text)}
.supply-bar{display:flex;height:28px;border-radius:9px;overflow:hidden;margin:13px 0 10px;background:#07131f;border:1px solid var(--line)}
.supply-bar i{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.9,.2,1)}
.supply-bar i:first-child{background:linear-gradient(90deg,#28bca9,var(--import))}
.supply-bar i:last-child{background:linear-gradient(90deg,#ff9b48,var(--export))}
.supply-labels{font-size:10px;color:var(--muted)}
.supply-labels b{color:var(--text);font-family:var(--mono)}

.market-section,.usage-section,.paks-section{margin-top:16px;padding:20px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.section-head.compact{align-items:center}
.section-head.compact strong{font-family:var(--mono);font-size:18px;white-space:nowrap}
.section-note{max-width:360px;text-align:right;color:var(--muted);font-size:11px}
.market-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,.55fr)) minmax(320px,1.6fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.market-stat,.market-chart{padding:16px;min-width:0;background:rgba(8,21,33,.58)}
.market-stat+ .market-stat,.market-chart{border-left:1px solid var(--line)}
.market-stat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.market-stat strong{display:inline-block;font-family:var(--mono);font-size:clamp(25px,2.1vw,36px);letter-spacing:-.055em;margin-top:13px;line-height:1}
.market-stat small{font-size:10px;color:var(--muted);margin-left:5px}
.market-stat em{display:block;color:var(--muted);font-size:10.5px;font-style:normal;margin-top:10px}
.market-chart{position:relative;min-height:165px}
.market-chart canvas{width:100%;height:150px}
.chart-empty{position:absolute;inset:0;display:none;place-items:center;color:var(--muted2);font-size:12px;text-align:center;padding:15px}
.chart-empty.show{display:grid}
.perspective-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.perspective-grid>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.perspective-grid span{font-size:10.5px;color:var(--muted)}
.perspective-grid strong{font-family:var(--mono);font-size:18px;color:var(--solar);white-space:nowrap}

.usage-now{text-align:right}
.usage-now span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.usage-now strong{display:block;font-size:22px;margin-top:3px}
.usage-reason{color:var(--muted);font-size:12px;max-width:85ch;margin-bottom:15px}
.hour-band{display:grid;grid-template-columns:repeat(24,minmax(8px,1fr));gap:3px;height:126px;align-items:end;padding:9px;border:1px solid var(--line);border-radius:13px;background:#071522}
.hour-col{height:100%;position:relative;cursor:pointer;border-radius:4px;outline:none;background:rgba(255,255,255,.015)}
.hour-col i{position:absolute;left:0;right:0;bottom:0;min-height:5px;border-radius:4px 4px 2px 2px;transition:filter .15s,transform .15s}
.hour-col.good i{background:linear-gradient(180deg,#67e5bf,#239b78)}
.hour-col.mid i{background:linear-gradient(180deg,#78a1b6,#365f76)}
.hour-col.bad i{background:linear-gradient(180deg,#ffbd67,#b86430)}
.hour-col.na i{height:100%!important;background:repeating-linear-gradient(45deg,#183144 0 4px,#0c1d2b 4px 8px)}
.hour-col.now{box-shadow:inset 0 0 0 2px #fff}
.hour-col.active i,.hour-col:hover i{filter:brightness(1.3);transform:translateY(-2px)}
.hour-axis{display:grid;grid-template-columns:repeat(5,1fr);color:var(--muted2);font-family:var(--mono);font-size:9px;margin-top:6px}
.hour-axis span:nth-child(2),.hour-axis span:nth-child(3),.hour-axis span:nth-child(4){text-align:center}
.hour-axis span:last-child{text-align:right}
.usage-readout{margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--import);border-radius:9px;background:var(--panel2);color:var(--muted);font-size:12px;min-height:42px}
.usage-tips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.usage-tips span{border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted);font-size:10px;background:#0b1c2a}

.paks-section{background:radial-gradient(circle at 95% 3%,rgba(255,174,89,.11),transparent 31%),linear-gradient(155deg,rgba(255,255,255,.035),transparent 38%),rgba(13,29,44,.96);border-color:rgba(255,174,89,.32)}
.paks-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.paks-head p{color:var(--muted);font-size:12px;max-width:78ch;margin:9px 0 0}
.health{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:10px;white-space:nowrap}
.health i{width:8px;height:8px;border-radius:50%;background:var(--muted2)}
.health.good{color:var(--good);border-color:rgba(80,214,155,.4)}
.health.good i{background:var(--good);box-shadow:0 0 12px var(--good)}
.health.warn{color:var(--warn);border-color:rgba(255,196,94,.42)}
.health.warn i{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.health.bad{color:var(--bad);border-color:rgba(255,101,125,.45)}
.health.bad i{background:var(--bad);box-shadow:0 0 12px var(--bad)}
.paks-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.paks-stats>div{padding:14px;background:#0b1b29;min-width:0}
.paks-stats span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.paks-stats strong{display:block;font-family:var(--mono);font-size:clamp(20px,2vw,31px);letter-spacing:-.05em;margin-top:9px;white-space:nowrap}
.paks-stats small{font-size:.36em;color:var(--muted);letter-spacing:0}
.paks-stats em{display:block;font-style:normal;color:var(--muted2);font-size:9.5px;margin-top:7px;white-space:normal}
.paks-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:16px;margin-top:16px}
.paks-diagram-card,.river-cross-card,.trend-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(7,20,31,.72);min-width:0}
.paks-diagram{width:100%;height:auto;min-height:270px}
.diagram-river{fill:none;stroke:url(#coldWater);stroke-width:38;stroke-linecap:round;opacity:.85}
.diagram-label,.pipe-label{font-family:var(--mono);font-size:10px;fill:#9bc5d8;letter-spacing:.08em}
.cold-pipe,.warm-pipe{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:12 8;animation:flowMove 1.25s linear infinite}
.cold-pipe{stroke:url(#coldWater)}
.warm-pipe{stroke:url(#warmWater)}
.pipe-label.warm{fill:#f0a473}
.plant-body{fill:#0f2a3d;stroke:#3b6680;stroke-width:2}
.plant-title{font-family:var(--mono);font-size:14px;font-weight:900;letter-spacing:.12em;fill:#ddecf3}
.unit-card rect{fill:#102d42;stroke:#3d6075;stroke-width:1.2;rx:8}
.unit-card text{font-family:var(--mono);text-anchor:middle}
.unit-card .unit-n{font-size:9px;fill:#8aa7b8}
.unit-card .unit-state{font-size:9px;font-weight:900;fill:#fff}
.unit-card.running rect{stroke:var(--good)}
.unit-card.running .unit-state{fill:var(--good)}
.unit-card.reduced rect{stroke:var(--warn)}
.unit-card.reduced .unit-state{fill:var(--warn)}
.unit-card.stopped rect{stroke:var(--bad)}
.unit-card.stopped .unit-state{fill:var(--bad)}
.water-dot{r:5;filter:drop-shadow(0 0 6px currentColor)}
.water-dot.cold{fill:#8ce8ff;color:#55cfff}
.water-dot.warm{fill:#ffb064;color:#ff8d55}
.unit-detail{min-height:56px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--muted);font-size:11px}
.river-cross{width:100%;height:auto;min-height:250px}
.river-bed{fill:#4a4038;stroke:#76685d;stroke-width:2}
.cross-water-fill{fill:url(#crossWater);opacity:.9;transition:d .6s ease}
.lkv-line{stroke:var(--bad);stroke-width:2;stroke-dasharray:7 6}
.current-line{stroke:#dff8ff;stroke-width:2;stroke-dasharray:3 4}
.cross-label{font-family:var(--mono);font-size:10px;paint-order:stroke;stroke:#07141e;stroke-width:4}
.current-label{fill:#e8fbff}.lkv-label{fill:#ff8fa1}
.intake rect{fill:#142d3d;stroke:#90a9b7;stroke-width:2}
.intake circle{fill:#0a141c;stroke:#d6e5eb;stroke-width:2}
.intake text{font-family:var(--mono);font-size:9px;fill:#b9cbd5}
.cooling-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}
.cooling-grid>div{padding:10px;border:1px solid var(--line);border-radius:10px;background:#0a1a28}
.cooling-grid span{display:block;color:var(--muted);font-size:9px;min-height:27px}
.cooling-grid strong{display:block;font-family:var(--mono);font-size:14px;margin-top:5px}
.cooling-grid i{display:block;height:5px;background:#183044;border-radius:99px;overflow:hidden;margin-top:8px}
.cooling-grid b{display:block;height:100%;background:linear-gradient(90deg,var(--import),#9af2e3);border-radius:99px;width:0;transition:width .8s ease}
.trend-card{margin-top:16px;position:relative}
.chart-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.chart-title span{color:var(--muted);font-size:10px}
.trend-card canvas{width:100%;height:300px;margin-top:4px}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--muted);font-size:10px;margin-top:7px}
.chart-legend span::before{content:"";display:inline-block;width:16px;height:3px;border-radius:4px;margin-right:7px;vertical-align:middle}
.chart-legend .water::before{background:var(--river)}
.chart-legend .nuclear::before{background:var(--nuclear)}
.chart-legend .temp::before{background:var(--bad)}

.analytics-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;margin-top:16px}
.analytics-grid>.panel{padding:18px;min-width:0}
.mixday-panel{grid-column:1/-1;position:relative}
.donut-layout{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(220px,1fr);gap:18px;align-items:center}
#mixDonut{width:min(100%,360px);aspect-ratio:1;margin:auto}
.mix-list{display:flex;flex-direction:column;gap:8px}
.mix-row{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;align-items:center;gap:9px;font-size:10.5px;color:var(--muted)}
.mix-row .swatch{width:10px;height:10px;border-radius:3px;background:var(--mix-color);box-shadow:0 0 10px rgba(95,170,205,.18)}
.mix-row .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix-row .value{font-family:var(--mono);font-weight:800;color:var(--text);white-space:nowrap}
.load-panel canvas{width:100%;height:315px}
.load-panel p{color:var(--muted);font-size:10px;margin:7px 0 0}
.mixday-panel canvas{width:100%;height:360px}
.mixday-panel .chart-empty{position:static;min-height:180px;border:1px dashed var(--line);border-radius:12px;margin-top:10px}
.footer{margin-top:16px;padding:18px 4px;color:var(--muted2);font-size:10.5px;display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line)}
.footer strong{color:var(--muted)}

@media (max-width:1250px){
  .topbar{grid-template-columns:minmax(210px,.8fr) minmax(280px,1fr) auto}
  .overview{grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr)}
  .market-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}
  .market-chart{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .paks-content{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1020px){
  .shell{width:min(100% - 24px,960px)}
  .topbar{position:relative;top:auto;grid-template-columns:1fr auto;gap:12px}
  .head-center{grid-column:1/-1;grid-row:2;order:3;border-top:1px solid var(--line);padding-top:8px}
  .overview{grid-template-columns:1fr}
  .overview-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-kpi,.supply-panel{min-height:0}
  .hero-kpi{grid-column:1/-1}
  .kpi-grid{grid-column:1/-1}
  .supply-panel{grid-column:1/-1}
  .paks-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .analytics-grid{grid-template-columns:1fr}
  .mixday-panel{grid-column:auto}
}

@media (max-width:760px){
  .shell{width:min(100% - 18px,720px)}
  .topbar{margin-top:9px;padding:11px;border-radius:15px;grid-template-columns:minmax(0,1fr) auto}
  .brand-bolt{width:42px;height:42px;border-radius:12px}
  .brand strong{font-size:20px}.brand small{font-size:9.5px;white-space:normal}
  .head-actions{gap:6px}.clock{font-size:16px}.refresh-btn span{display:none}
  .head-center{grid-template-columns:1fr auto;gap:8px}.head-center canvas{height:42px}.head-center strong{font-size:17px}
  main{padding-top:10px}
  .panel{border-radius:15px}
  .map-panel,.market-section,.usage-section,.paks-section,.analytics-grid>.panel{padding:13px}
  .panel-head,.section-head,.paks-head{flex-direction:column;gap:10px}
  .legend{justify-content:flex-start;padding:0;gap:7px 11px}
  .map-stage{margin-top:8px}
  .map-stage{aspect-ratio:1.12/1}
  #energyMap{width:100%;height:100%;min-height:0}
  .country-label{display:none}.country-label.hu-label{display:block;font-size:13px}
  .paks-bubble{transform:translate(-77px -92px)}
  .paks-bubble rect{width:154px}
  .bubble-water,.bubble-sub{transform:translate(-12px 0)}
  .flow-badge{display:none}
  .flow-mobile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .flow-mobile>button{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#0a1b29;color:var(--muted);font-size:10px}
  .flow-mobile b{font-family:var(--mono);font-size:10px}
  .overview-side{display:block}
  .overview-side>*+*{margin-top:10px}
  .kpi-grid{gap:10px}
  .hero-kpi{min-height:140px}
  .kpi{padding:13px}
  .kpi>strong{font-size:35px}.kpi-grid .kpi>strong{font-size:25px}
  .market-grid{grid-template-columns:1fr}
  .market-stat+.market-stat,.market-chart{border-left:0;border-top:1px solid var(--line)}
  .market-chart{grid-column:auto}
  .perspective-grid{grid-template-columns:1fr}
  .hour-band{gap:2px;height:92px;padding:7px}
  .paks-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paks-stats>div:last-child{grid-column:1/-1}
  .paks-content{gap:10px}
  .paks-diagram-card,.river-cross-card,.trend-card{padding:12px}
  .paks-diagram{min-height:0}.river-cross{min-height:0}
  .cooling-grid{grid-template-columns:1fr}
  .cooling-grid span{min-height:0}
  .trend-card canvas{height:240px}
  .donut-layout{grid-template-columns:1fr}
  #mixDonut{width:min(80vw,330px)}
  .load-panel canvas{height:270px}.mixday-panel canvas{height:280px}
  .footer{flex-direction:column;padding-inline:2px}
}

@media (max-width:480px){
  .shell{width:calc(100% - 12px)}
  .topbar{border-radius:13px}
  .brand small{display:none}
  .status-chip{padding:6px 8px}.clock{grid-column:auto}.head-actions{grid-template-columns:auto auto auto}.clock{font-size:13px}.status-chip span{max-width:96px;overflow:hidden;text-overflow:ellipsis}
  .head-center{grid-template-columns:1fr auto}.head-label{display:none}
  h1{font-size:24px}h2{font-size:22px}
  .map-stage{aspect-ratio:1.06/1}
  #energyMap{min-height:0}
  .map-stage{border-radius:12px}
  .flow-mobile{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-grid .kpi{min-height:126px}
  .kpi-grid .kpi>strong{font-size:22px}
  .supply-labels{font-size:9px}
  .paks-stats{grid-template-columns:1fr 1fr}
  .paks-stats strong{font-size:20px}
  .paks-stats>div:last-child{grid-column:1/-1}
  .usage-tips span{font-size:9px}
  .market-stat strong{font-size:25px}
  .perspective-grid>div{align-items:flex-start}
  .mix-row{grid-template-columns:auto minmax(0,1fr);gap:7px}.mix-row .value{grid-column:2}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}