:root{--bg:#07151c;--panel:#0b1d25;--panel2:#102832;--line:#23414a;--text:#f4fbfa;--muted:#88a4aa;--green:#3ef1c5;--green2:#17b990;--blue:#42a7ff;--amber:#ffca62;--red:#ff6b6b;--shadow:0 18px 50px rgba(0,0,0,.28);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-size:16px}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 55% -15%,#133840 0,transparent 37%),var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}.topbar{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;border-bottom:1px solid rgba(132,189,194,.18);background:rgba(5,18,24,.87);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--text);width:max-content}.brand-mark{width:35px;height:35px;border:2px solid var(--green);border-radius:11px;display:grid;place-items:center;transform:rotate(45deg)}.brand-mark span{width:13px;height:13px;background:var(--green);border-radius:50%;box-shadow:0 0 16px var(--green)}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:1rem;letter-spacing:.02em}.brand small{font-size:.58rem;letter-spacing:.28em;color:var(--green);margin-top:5px}.event-label{display:flex;gap:14px;align-items:center}.event-label span{font-size:.67rem;font-weight:800;letter-spacing:.13em;color:#07151c;background:var(--green);padding:5px 8px;border-radius:4px}.event-label strong{font-size:.9rem;letter-spacing:.02em}.header-actions{justify-self:end;display:flex;gap:10px}.text-button,.showcase-button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;color:var(--text);background:transparent;font-weight:700;font-size:.82rem}.text-button:hover{background:#102832}.showcase-button{border-color:var(--green);color:#062019;background:var(--green);box-shadow:0 0 24px rgba(62,241,197,.12)}.showcase-button:hover{background:#77f7d8}.play-icon{font-size:.65rem;margin-right:6px}.status-strip{min-height:82px;display:grid;grid-template-columns:1.35fr repeat(4,1fr) 1.2fr;align-items:center;border-bottom:1px solid rgba(132,189,194,.14);background:#081a21;padding:0 28px}.status-strip>div{padding:0 24px;border-right:1px solid rgba(132,189,194,.14)}.status-strip>div:first-child{padding-left:0}.status-strip>div:last-child{border:0}.status-strip small,.node small,.impact-card small,.autonomy-card small,.decision-bar small,.storage-copy small{display:block;color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.14em;margin-bottom:5px}.status-primary{display:flex;gap:12px;align-items:center}.status-primary strong{letter-spacing:.1em;font-size:.85rem}.status-light{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 15px var(--amber)}.status-light.online{background:var(--green);box-shadow:0 0 15px var(--green)}.status-light.alert{background:var(--red);box-shadow:0 0 15px var(--red)}.metric strong,.clock strong{font-size:1.16rem;font-variant-numeric:tabular-nums}.metric em{font-style:normal;font-size:.68rem;color:var(--muted);margin-left:2px}.clock strong{font-size:.79rem;letter-spacing:.06em}.workspace{display:grid;grid-template-columns:270px minmax(610px,1fr) 300px;min-height:calc(100vh - 156px)}.control-panel,.insight-panel{background:rgba(8,25,32,.82);padding:23px;border-right:1px solid rgba(132,189,194,.13)}.insight-panel{border-right:0;border-left:1px solid rgba(132,189,194,.13)}.panel-heading,.stage-heading,.insight-heading,.dialog-top{display:flex;align-items:center;justify-content:space-between}.eyebrow{color:var(--green);font-weight:800;font-size:.61rem;letter-spacing:.16em}.panel-heading h1,.stage-heading h2,.insight-heading h2,.dialog-top h2{font-size:1.12rem;margin:5px 0 0;line-height:1.1}.power-button{width:42px;height:42px;border-radius:50%;border:1px solid #31505a;background:#102832;color:var(--muted);font-size:1.15rem}.power-button.on{color:#062019;border-color:var(--green);background:var(--green);box-shadow:0 0 24px rgba(62,241,197,.25)}.control-group{margin-top:27px}.control-label{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700}.control-label output{color:var(--green);font-variant-numeric:tabular-nums}input[type=range]{width:100%;margin:14px 0 4px;accent-color:var(--green)}input.load-range{accent-color:var(--blue)}.range-labels{display:flex;justify-content:space-between;color:#607b82;font-size:.65rem}.mode-block{margin-top:24px;padding:16px;background:#0c222b;border:1px solid #173640;border-radius:11px}.auto-badge{font-size:.56rem;letter-spacing:.13em;color:var(--green);border:1px solid rgba(62,241,197,.4);padding:3px 6px;border-radius:99px}.strategy-row{display:flex;align-items:flex-start;gap:9px;margin-top:13px}.strategy-row>span{width:19px;height:19px;border-radius:50%;border:1px solid #34515a;color:var(--green);display:grid;place-items:center;font-size:.58rem;flex:0 0 auto}.strategy-row p{margin:0}.strategy-row strong{font-size:.72rem;display:block}.strategy-row small{font-size:.61rem;color:var(--muted)}.scenario-heading{display:flex;justify-content:space-between;margin:24px 0 10px;color:var(--muted);font-size:.6rem;font-weight:800;letter-spacing:.13em}.scenario-heading small{font-weight:500;letter-spacing:0}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scenario{min-height:80px;text-align:left;padding:10px;border-radius:9px;background:#0b2028;border:1px solid #183741;color:var(--text)}.scenario:hover,.scenario.active{border-color:var(--green);background:#102d34}.scenario-icon{display:block;color:var(--green);font-size:1rem;margin-bottom:6px}.scenario strong,.scenario small{display:block}.scenario strong{font-size:.68rem}.scenario small{color:var(--muted);font-size:.59rem;margin-top:2px}.system-stage{padding:23px 26px;min-width:0}.legend{display:flex;gap:15px;font-size:.62rem;color:var(--muted)}.legend span{display:flex;gap:5px;align-items:center}.legend i{width:15px;height:3px;background:var(--line);display:inline-block;border-radius:3px}.legend i.green{background:var(--green)}.legend i.blue{background:var(--blue)}.flow-canvas{height:535px;position:relative;margin-top:15px;border:1px solid #193842;border-radius:16px;overflow:hidden;background-image:linear-gradient(rgba(62,241,197,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(62,241,197,.025) 1px,transparent 1px),radial-gradient(circle at 50% 42%,rgba(18,75,76,.25),transparent 45%);background-size:25px 25px,25px 25px,auto}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flow-line{fill:none;stroke:#213f47;stroke-width:4;stroke-linecap:round;transition:stroke .4s,opacity .4s}.flow-line.active.electric{stroke:var(--green);filter:url(#glow);stroke-dasharray:5 13;animation:flow 1s linear infinite}.flow-line.active.hydrogen{stroke:var(--blue);filter:url(#glow);stroke-dasharray:6 14;animation:flow 1.25s linear infinite}.flow-line.reverse.active{animation-direction:reverse}@keyframes flow{to{stroke-dashoffset:-36}}.node,.storage-node{position:absolute;background:linear-gradient(145deg,#102a33,#0a1f27);border:1px solid #24434b;border-radius:13px;padding:13px 14px;display:flex;gap:11px;align-items:center;box-shadow:var(--shadow);transition:border-color .4s,box-shadow .4s,opacity .4s}.node.active,.storage-node.active{border-color:rgba(62,241,197,.66);box-shadow:0 0 26px rgba(62,241,197,.09)}.node small{margin-bottom:3px}.node strong{display:block;font-size:.82rem;font-variant-numeric:tabular-nums}.node>div:last-child>span{display:block;color:var(--muted);font-size:.61rem;margin-top:3px}.node-icon{width:38px;height:38px;border:1px solid #28515d;background:#0b2028;border-radius:10px;display:grid;place-items:center;color:var(--blue);font-weight:800;flex:0 0 auto}.sun-icon{color:var(--amber);font-size:1.3rem}.load-icon{color:var(--green);font-size:1.2rem}.bolt-icon{color:var(--green);font-size:1.45rem}.renew-node{left:4%;top:82px;width:160px}.bus-node{left:36.5%;top:72px;width:230px}.load-node{right:3.5%;top:82px;width:160px}.electrolyzer-node{left:15%;top:274px;width:185px}.fuelcell-node{right:15%;top:274px;width:175px}.battery-node{right:3.5%;bottom:26px;width:170px}.pulse-core{position:relative;width:44px;height:44px;border:1px solid rgba(62,241,197,.4);border-radius:50%;display:grid;place-items:center}.pulse-core span{width:16px;height:16px;background:var(--green);border-radius:50%;box-shadow:0 0 20px var(--green)}.running .pulse-core:before{content:"";position:absolute;inset:-1px;border:1px solid var(--green);border-radius:50%;animation:pulse 1.7s ease-out infinite}@keyframes pulse{to{transform:scale(1.55);opacity:0}}.battery-symbol{width:23px;height:39px;border:2px solid #58737a;border-radius:4px;position:relative;overflow:hidden;flex:0 0 auto}.battery-symbol:before{content:"";position:absolute;top:-5px;left:6px;width:8px;height:4px;background:#58737a;border-radius:2px}.battery-symbol i{position:absolute;bottom:0;left:0;right:0;height:78%;background:linear-gradient(var(--green),#138e72);transition:height .4s}.storage-node{left:38%;bottom:24px;width:265px;padding:12px 15px}.tank{width:42px;height:68px;border:2px solid #52717a;border-radius:11px 11px 8px 8px;position:relative;overflow:hidden;display:grid;place-items:center}.tank:before{content:"";position:absolute;top:-6px;width:19px;height:8px;background:#52717a;border-radius:2px}.tank i{position:absolute;inset:auto 0 0;height:57%;background:linear-gradient(180deg,rgba(66,167,255,.55),rgba(20,91,175,.8));transition:height .4s}.tank span{position:relative;font-size:.7rem;font-weight:800}.storage-copy{flex:1}.storage-copy strong{font-size:1.15rem}.storage-copy>span{font-size:.59rem;color:var(--muted)}.storage-bar{height:5px;background:#18343c;border-radius:9px;margin:7px 0 5px;overflow:hidden}.storage-bar i{display:block;height:100%;width:57%;background:var(--blue);box-shadow:0 0 10px var(--blue);transition:width .4s}.decision-bar{min-height:67px;border:1px solid #20434a;background:#0b222a;border-radius:12px;margin-top:13px;padding:12px 15px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.decision-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(62,241,197,.12);color:var(--green)}.decision-bar strong{font-size:.72rem;line-height:1.35;display:block}.decision-time{font-size:.58rem;color:var(--green);font-weight:800;letter-spacing:.12em}.insight-heading{margin-bottom:17px}.live-pill{font-size:.55rem;font-weight:800;color:var(--green);border:1px solid rgba(62,241,197,.4);border-radius:99px;padding:4px 7px}.impact-card{background:#0c222b;border:1px solid #183842;border-radius:11px;padding:14px;position:relative;overflow:hidden}.impact-card strong{font-size:1.15rem;display:block;font-variant-numeric:tabular-nums}.impact-card>span{font-size:.63rem;color:var(--muted)}.primary-impact{min-height:120px}.primary-impact strong{font-size:1.75rem}.spark-bars{position:absolute;right:12px;bottom:12px;width:108px;height:45px;display:flex;gap:3px;align-items:flex-end}.spark-bars i{flex:1;background:linear-gradient(var(--green),rgba(62,241,197,.08));border-radius:2px 2px 0 0}.impact-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.impact-pair .impact-card{padding:12px}.autonomy-card{margin-top:15px;display:grid;grid-template-columns:83px 1fr;gap:13px;align-items:center;padding:14px;border:1px solid #183842;border-radius:11px;background:#091e26}.ring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) 57%,#17343c 0);position:relative}.ring:after{content:"";position:absolute;inset:7px;background:#091e26;border-radius:50%}.ring>div{z-index:1;text-align:center}.ring strong{display:block;font-size:1.18rem}.ring small{font-size:.48rem;margin:0}.autonomy-card>div:last-child strong{display:block;font-size:.86rem}.autonomy-card>div:last-child span{display:block;font-size:.6rem;color:var(--muted);line-height:1.35;margin-top:4px}.event-log{margin-top:17px}.log-heading{display:flex;justify-content:space-between;color:var(--muted);font-size:.61rem;font-weight:800;letter-spacing:.13em;margin-bottom:8px}.log-heading button{border:0;background:none;color:var(--muted);font-size:.6rem}.log-entry{display:grid;grid-template-columns:44px 7px 1fr;gap:8px;align-items:start;padding:9px 0;border-bottom:1px solid #15333b;font-size:.61rem}.log-entry time{color:#607b82;font-variant-numeric:tabular-nums}.log-entry i{width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:3px}.log-entry span{color:#acc0c4;line-height:1.3}.model-note{display:flex;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid #17333b;align-items:flex-start}.model-note strong{font-size:.58rem;color:var(--amber);white-space:nowrap}.model-note span{font-size:.54rem;line-height:1.35;color:#617b81}dialog{width:min(760px,calc(100% - 30px));max-height:90vh;border:1px solid #2b5058;border-radius:18px;padding:0;background:#0a1e26;color:var(--text);box-shadow:0 25px 100px #000}dialog::backdrop{background:rgba(1,9,13,.78);backdrop-filter:blur(5px)}.dialog-shell{padding:26px}.dialog-top h2{font-size:1.5rem}.close-button{border:0;background:#15333b;color:var(--text);font-size:1.5rem;width:37px;height:37px;border-radius:50%}.guide-intro{margin:18px 0;background:#0e2a32;border-left:3px solid var(--green);padding:13px 15px;color:#bdd0d4;font-size:.78rem;line-height:1.5}.guide-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.guide-steps li{display:grid;grid-template-columns:31px 1fr;gap:9px;border:1px solid #193943;border-radius:10px;padding:11px;background:#0a222a}.guide-steps li>span{color:var(--green);font-size:.67rem;font-weight:800}.guide-steps strong{font-size:.72rem}.guide-steps p{margin:5px 0 0;color:#91aab0;font-size:.66rem;line-height:1.45}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#eafffa;color:#062019;border-radius:9px;padding:11px 16px;font-size:.75rem;font-weight:800;box-shadow:var(--shadow);z-index:50;transition:.3s}#toast.show{transform:translate(-50%,0);opacity:1}.offline .node,.offline .storage-node{opacity:.65}.offline .flow-line{stroke:#213f47!important;animation:none!important;filter:none!important}@media(max-width:1180px){.workspace{grid-template-columns:250px minmax(580px,1fr)}.insight-panel{grid-column:1/-1;border-left:0;border-top:1px solid #17343c;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.insight-heading,.event-log,.model-note{grid-column:1/-1}.impact-pair{margin:0}.autonomy-card{margin:0}.event-log #logEntries{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.topbar{grid-template-columns:1fr auto}.event-label{display:none}.status-strip{grid-template-columns:1.2fr repeat(4,1fr)}.clock{display:none}}@media(max-width:860px){.topbar{padding:0 16px}.header-actions .text-button{display:none}.showcase-button{padding:10px}.showcase-button .play-icon{margin:0}.showcase-button{font-size:0}.showcase-button .play-icon{font-size:.7rem}.status-strip{padding:0 16px;grid-template-columns:1fr 1fr 1fr}.status-strip>div{padding:10px 12px}.status-strip .metric:nth-of-type(4),.status-strip .metric:nth-of-type(5){display:none}.workspace{display:block}.control-panel{border-right:0;border-bottom:1px solid #17343c}.system-stage{padding:18px 12px}.scenario-grid{grid-template-columns:repeat(4,1fr)}.flow-canvas{height:560px;overflow:auto}.renew-node{left:2%;}.load-node{right:2%}.bus-node{left:34%}.electrolyzer-node{left:7%}.fuelcell-node{right:7%}.storage-node{left:34%}.insight-panel{display:block}.impact-pair{margin-top:8px}.autonomy-card{margin-top:10px}.event-log #logEntries{display:block}.guide-steps{grid-template-columns:1fr}}@media(max-width:610px){.brand small{display:none}.status-strip{grid-template-columns:1.2fr 1fr}.status-strip .metric:nth-of-type(3){display:none}.scenario-grid{grid-template-columns:1fr 1fr}.legend{display:none}.flow-canvas{height:720px}.connections{display:none}.node,.storage-node{position:relative;inset:auto!important;width:calc(100% - 24px)!important;margin:12px}.bus-node{order:-1}.flow-canvas{display:flex;flex-direction:column;padding-top:4px}.storage-node{order:8}.battery-node{order:9}.dialog-actions{flex-direction:column}.dialog-actions button{width:100%}}