:root{--bg:#061624;--panel:#0a2030;--panel2:#0d293b;--line:#285069;--text:#f5fbff;--muted:#91adbd;--green:#46d7d3;--green2:#24aeb7;--blue:#4ba3ff;--amber:#ffc857;--red:#ff6f7d}
body{background:radial-gradient(circle at 48% -12%,rgba(41,130,159,.27),transparent 34%),radial-gradient(circle at 90% 25%,rgba(29,80,122,.18),transparent 30%),var(--bg)}
.topbar{background:rgba(4,20,32,.93);border-bottom-color:rgba(78,185,210,.2)}
.brand{gap:10px}
.brand-logo{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(64,177,207,.22))}
.brand-name{font-size:1.05rem!important;letter-spacing:.015em!important;white-space:nowrap}
.brand-name sup{font-size:.48em;color:#53c7dc;top:-.7em;position:relative;margin-left:2px}
.event-label strong{font-size:1rem;letter-spacing:.03em}
.status-strip{background:#071b29}
.showcase-button{color:#041a24;background:linear-gradient(135deg,#54e2d6,#44c2d8);border-color:#59e2dc;box-shadow:0 0 26px rgba(70,215,211,.16)}
.showcase-button:hover{background:linear-gradient(135deg,#78eadf,#5bd0e1)}
.header-power-button{width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;border:1px solid #ffc857;background:linear-gradient(145deg,rgba(255,200,87,.23),rgba(255,168,72,.13));color:#ffd36f;font-size:1.2rem;font-weight:800;box-shadow:0 0 0 1px rgba(255,200,87,.06),0 0 22px rgba(255,184,72,.13);transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s}
.header-power-button:hover{background:linear-gradient(145deg,#ffd36f,#f0a83f);color:#2a1904;box-shadow:0 0 25px rgba(255,184,72,.25);transform:translateY(-1px)}
.header-power-button:focus-visible{outline:3px solid rgba(255,211,111,.34);outline-offset:3px}
.header-power-button.on{border-color:#ff806d;background:linear-gradient(145deg,rgba(255,128,109,.3),rgba(211,69,69,.2));color:#ff9a89;box-shadow:0 0 0 1px rgba(255,128,109,.08),0 0 22px rgba(255,91,91,.17)}
.header-power-button.on:hover{background:linear-gradient(145deg,#ff927f,#df5656);color:#fff;box-shadow:0 0 25px rgba(255,91,91,.28)}
.power-icon{font-size:1.18rem;line-height:1;transform:translateY(-1px)}
.control-panel .panel-heading h1{margin:0}
.control-panel .scenario-grid{margin-top:24px}
.digital-twin-title{margin:0;color:#fff;font-size:1.12rem!important;line-height:1.1;letter-spacing:.1em;font-weight:850}
.insight-heading{min-height:28px}
.scenario.active{background:linear-gradient(145deg,rgba(25,81,105,.8),rgba(14,50,71,.95));box-shadow:inset 0 0 0 1px rgba(70,215,211,.2),0 10px 30px rgba(0,0,0,.16)}
.flow-canvas{height:610px;background:radial-gradient(circle at 50% 22%,rgba(28,117,139,.12),transparent 34%),linear-gradient(rgba(56,114,136,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,114,136,.045) 1px,transparent 1px),rgba(5,22,33,.34);background-size:auto,55px 55px,55px 55px,auto}
.flow-line{stroke-width:3.5}
.flow-line.active.electric{marker-end:url(#arrow-electric)}
.flow-line.active.hydrogen{marker-end:url(#arrow-hydrogen)}
#line-renew-bus,#line-bus-load{stroke-width:4;stroke:#315b6c}
#line-renew-bus.active,#line-bus-load.active{stroke:var(--green)!important;stroke-width:4.5!important;stroke-dasharray:8 12!important;filter:url(#glow)!important;marker-end:none!important}
#line-battery-controller.active{stroke:var(--green)!important;stroke-width:5!important;stroke-dasharray:5 11!important;filter:url(#glow)!important;marker-end:url(#arrow-electric)!important}
.allocation-panel{margin:0 0 12px;padding:11px 14px 10px;border:1px solid rgba(70,155,184,.26);border-radius:12px;background:linear-gradient(125deg,rgba(13,45,63,.92),rgba(7,30,45,.9));box-shadow:0 10px 34px rgba(0,0,0,.14)}
.allocation-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.allocation-heading span{color:#7ed2e2;font-size:.62rem;font-weight:900;letter-spacing:.15em}
.allocation-heading strong{font-size:.72rem;color:#e9f9fb;font-weight:750;text-align:right}
.allocation-bar{display:flex;height:10px;overflow:hidden;border-radius:999px;background:#193646;box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.allocation-bar i{height:100%;width:0;transition:width .55s ease}
.allocation-load{background:#b987f5}.allocation-electrolyzer{background:#4ba3ff}.allocation-battery{background:#ffc857}.allocation-curtailed{background:#516c7c}
.allocation-key{display:flex;align-items:center;gap:20px;margin-top:8px;color:#94afbc;font-size:.62rem;flex-wrap:wrap}
.allocation-key span{display:flex;align-items:center;gap:5px}
.allocation-key i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.allocation-key strong{color:#fff;font-size:.67rem}
.smart-controls{display:grid;grid-template-columns:.9fr 1fr 1.35fr;gap:10px;margin:0 0 12px;padding:12px;border:1px solid rgba(70,155,184,.24);border-radius:12px;background:rgba(6,27,41,.76)}
.smart-control-group>span{display:block;margin-bottom:7px;color:#76bdcf;font-size:.61rem;font-weight:900;letter-spacing:.13em}
.choice-row{display:flex;gap:5px;flex-wrap:wrap}
.choice-button{min-height:31px;padding:6px 9px;border:1px solid #294e62;border-radius:7px;background:#0b2434;color:#9bb5c2;font-size:.72rem;font-weight:750;line-height:1.05;transition:.2s}
.choice-button:hover:not(:disabled){border-color:#4aa8b9;color:#edfdfd;transform:translateY(-1px)}
.choice-button.active{border-color:#46d7d3;background:linear-gradient(145deg,rgba(45,171,177,.32),rgba(21,88,108,.46));color:#eafffc;box-shadow:0 0 14px rgba(70,215,211,.1)}
.choice-button[data-dispatch="fuelcell"].active{border-color:#ff8a65;background:rgba(255,138,101,.16);color:#ffd2c4;box-shadow:0 0 14px rgba(255,138,101,.1)}
.choice-button[data-forecast="peak"].active{border-color:#b987f5;background:rgba(185,135,245,.16);color:#ead6ff;box-shadow:0 0 14px rgba(185,135,245,.1)}
.choice-button[data-maintenance]:not([data-maintenance="none"]).active{border-color:#ffc857;background:rgba(255,200,87,.14);color:#ffe3a1;box-shadow:0 0 14px rgba(255,200,87,.1)}
.choice-button:disabled{cursor:not-allowed;opacity:.35}
.smart-status{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 10px;border-radius:8px;background:rgba(13,48,65,.68);color:#9fb9c5;font-size:.72rem}
.smart-status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);flex:0 0 auto}
.smart-status strong{color:#efffff;white-space:nowrap}
.node.maintenance{border-color:rgba(255,200,87,.75)!important;box-shadow:0 0 0 1px rgba(255,200,87,.12),0 0 26px rgba(255,200,87,.08)!important}
.node.maintenance:after{content:'MAINTENANCE';position:absolute;right:9px;top:8px;padding:3px 6px;border-radius:999px;background:rgba(255,200,87,.14);color:#ffd980;font-size:.48rem;font-weight:900;letter-spacing:.09em}
.node,.storage-node,.impact-card,.autonomy-card{background:linear-gradient(145deg,rgba(13,42,58,.97),rgba(8,31,44,.97))}
.node.active,.storage-node.active{box-shadow:0 0 0 1px rgba(70,215,211,.16),0 0 30px rgba(70,215,211,.08)}
.renew-node{border-color:rgba(255,200,87,.42)!important}.renew-node.active{border-color:#ffc857!important;box-shadow:0 0 26px rgba(255,200,87,.16)!important}.renew-node .node-icon{color:#ffc857!important;border-color:rgba(255,200,87,.45)!important;background:rgba(255,200,87,.08)!important}
.bus-node{border-color:rgba(70,215,211,.42)!important}.bus-node.active{border-color:#46d7d3!important}
.load-node{border-color:rgba(185,135,245,.42)!important}.load-node.active{border-color:#b987f5!important;box-shadow:0 0 26px rgba(185,135,245,.15)!important}.load-node .node-icon{color:#c79af8!important;border-color:rgba(185,135,245,.45)!important;background:rgba(185,135,245,.08)!important}
.electrolyzer-node{border-color:rgba(75,163,255,.4)!important}.electrolyzer-node.active{border-color:#4ba3ff!important;box-shadow:0 0 26px rgba(75,163,255,.15)!important}.electrolyzer-node .node-icon{color:#64b3ff!important;border-color:rgba(75,163,255,.45)!important;background:rgba(75,163,255,.08)!important}
.fuelcell-node{border-color:rgba(255,138,101,.4)!important}.fuelcell-node.active{border-color:#ff8a65!important;box-shadow:0 0 26px rgba(255,138,101,.15)!important}.fuelcell-node .node-icon{color:#ff9b7d!important;border-color:rgba(255,138,101,.45)!important;background:rgba(255,138,101,.08)!important}
.battery-node{border-color:rgba(255,200,87,.38)!important}.battery-node.active{border-color:#ffc857!important;box-shadow:0 0 26px rgba(255,200,87,.14)!important}.battery-symbol i{background:linear-gradient(#ffd86d,#e7a91d)!important}
.storage-node{border-color:rgba(75,163,255,.38)!important}.storage-node.active{border-color:#4ba3ff!important;box-shadow:0 0 26px rgba(75,163,255,.15)!important}
.renew-node{left:4%!important;top:58px!important;width:190px!important}
.bus-node{left:50%!important;top:48px!important;width:270px!important;transform:translateX(-50%)}
.load-node{right:4%!important;top:46px!important;width:220px!important;align-items:flex-start}
.electrolyzer-node{left:6%!important;top:286px!important;width:205px!important}
.battery-node{left:50%!important;right:auto!important;top:265px!important;bottom:auto!important;width:220px!important;transform:translateX(-50%)}
.fuelcell-node{right:6%!important;top:286px!important;width:205px!important}
.storage-node{left:50%!important;bottom:24px!important;width:285px!important;transform:translateX(-50%)}
.load-node-content{min-width:0;flex:1}
.load-node-content label{display:block;margin-top:9px;color:#90aab0;font-size:.58rem;font-weight:700}
.load-node-content input[type=range]{display:block;width:100%;margin:5px 0 0;accent-color:#b987f5}
@media(max-width:860px) and (min-width:611px){
  .smart-controls{grid-template-columns:1fr 1fr}
  .maintenance-control{grid-column:1/-1}
  .flow-canvas{height:610px}
  .renew-node{left:2%!important;width:175px!important}
  .bus-node{width:240px!important}
  .load-node{right:2%!important;width:190px!important}
  .electrolyzer-node{left:3%!important;width:190px!important}
  .fuelcell-node{right:3%!important;width:190px!important}
  .battery-node{width:200px!important}
}
@media(max-width:610px){
  .flow-canvas{height:auto}
  .renew-node,.bus-node,.load-node,.electrolyzer-node,.battery-node,.fuelcell-node,.storage-node{transform:none!important}
  .allocation-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .allocation-heading strong{text-align:left}
  .allocation-key{gap:8px 12px}
  .smart-controls{grid-template-columns:1fr}
  .maintenance-control,.smart-status{grid-column:auto}
  .smart-status{align-items:flex-start;flex-wrap:wrap}
  .smart-status strong{white-space:normal}
  .header-power-button{width:44px;height:44px;padding:0}
}