:root{--bg:#071019;--surface:#0d1824;--surface-2:#111f2d;--line:#89a4be2b;--line-strong:#89a4be47;--text:#edf4fb;--muted:#8ea0b4;--green:#42d9b3;--green-soft:#42d9b321;--blue:#72adfa;--blue-soft:#72adfa21;--amber:#f2c66d;--amber-soft:#f2c66d21;--red:#ff6d7e;--red-soft:#ff6d7e21;--purple:#a99af6;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);width:100%;min-height:100%;margin:0}body{color:var(--text);font-family:Inter,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif;overflow:hidden}button{font:inherit}.app-shell{background:radial-gradient(circle at 8% 4%,#2c899a1f,#0000 29%),radial-gradient(circle at 94% 18%,#4168af1c,#0000 26%),linear-gradient(150deg,#071019 0%,#08131e 55%,#070f18 100%);width:100vw;height:100vh;min-height:600px;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:#08121ced;grid-template-columns:minmax(300px,1.05fr) minmax(385px,1fr) auto;align-items:center;gap:18px;height:84px;padding:13px 24px 14px;display:grid;position:relative;box-shadow:0 12px 36px #00000038}.progress-track{background:#7e9ab421;height:3px;position:absolute;inset:auto 0 0}.progress-track div{background:linear-gradient(90deg,#36d3b0,#6eaafd);height:100%}.progress-track>span{background:#eaf7ff;border-radius:50%;width:7px;height:7px;position:absolute;top:-2px;transform:translate(-50%);box-shadow:0 0 10px #5bddc7cc}.brand-block{align-items:center;gap:11px;min-width:0;display:flex}.brand-mark{width:39px;height:39px;color:var(--green);background:var(--green-soft);border:1px solid #42d9b33d;border-radius:11px;flex:none;place-items:center;display:grid}.brand-block h1{letter-spacing:.02em;white-space:nowrap;margin:0;font-size:clamp(16px,1.25vw,21px);line-height:1.1}.brand-block div>span{color:var(--muted);letter-spacing:.13em;font-size:11px}.demo-badge{color:#9cabb9;white-space:nowrap;background:#8ca0b312;border:1px solid #94a9be38;border-radius:999px;margin-left:4px;padding:4px 8px;font-size:11px}.top-status{border:1px solid var(--line);background:#ffffff05;border-radius:11px;grid-template-columns:1.2fr 1fr 1fr;min-width:0;display:grid;overflow:hidden}.top-status>div{border-right:1px solid var(--line);min-width:0;padding:8px 12px}.top-status>div:last-child{border-right:0}.top-status span{color:var(--muted);margin-bottom:2px;font-size:11px;display:block}.top-status strong{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;min-width:0;font-size:13px;display:flex;overflow:hidden}.top-status small{color:var(--muted);font-size:11px;font-weight:500}.status-dot{border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.dot-stable{background:var(--green);box-shadow:0 0 8px #42d9b3b3}.dot-warning{background:var(--amber)}.dot-danger{background:var(--red);box-shadow:0 0 8px #ff6d7eb3}.dot-neutral{background:#8797a8}.controls{white-space:nowrap;justify-content:flex-end;align-items:center;gap:5px;display:flex}.controls>button,.speed-control button,.tabbar button{border:1px solid var(--line);color:#b8c7d6;cursor:pointer;background:#ffffff06;transition:all .14s}.controls>button{border-radius:9px;align-items:center;gap:5px;height:35px;padding:0 9px;font-size:12px;display:inline-flex}.controls svg{width:15px;height:15px}.controls button:hover:not(:disabled),.tabbar button:hover{color:var(--text);background:#42d9b314;border-color:#68dbc273}.controls button:disabled{opacity:.38;cursor:default}.speed-control{border:1px solid var(--line);border-radius:9px;gap:2px;padding:3px;display:flex}.speed-control button{border:0;border-radius:6px;min-width:34px;height:27px;font-size:11px}.speed-control .speed-active{color:#061510;background:var(--green);font-weight:800}.tabbar{border-bottom:1px solid var(--line);background:#070f18bd;justify-content:center;align-items:stretch;gap:6px;height:48px;padding:0 24px;display:flex}.tabbar button{border:0;border-radius:0;align-items:center;gap:8px;padding:0 22px;font-size:14px;display:inline-flex;position:relative}.tabbar button:after{content:"";background:0 0;height:2px;position:absolute;inset:auto 16px 0}.tabbar .tab-active{color:var(--text)}.tabbar .tab-active:after{background:var(--green);box-shadow:0 -2px 10px #42d9b36b}.page-stage{height:calc(100vh - 132px);padding:18px 24px 22px;overflow:hidden}.tab-page{width:min(1580px,100%);height:100%;margin:0 auto;animation:.22s both page-in}@keyframes page-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.tab-page{animation:none}}.panel,.metric-card,.energy-card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#111f2df0,#0b1722f0);box-shadow:0 15px 35px #00000026}.eyebrow{color:var(--green);letter-spacing:.13em;font-size:11px;font-weight:750}.section-heading h2{letter-spacing:.02em;margin:3px 0 0;font-size:19px}.scene-indicator{border:1px solid var(--line);color:#c6d3df;background:#ffffff06;border-radius:999px;align-items:center;gap:8px;padding:7px 11px;font-size:12px;display:inline-flex}.scene-indicator span{background:var(--green);border-radius:50%;width:7px;height:7px}.scene-warning span{background:var(--amber)}.scene-danger span{background:var(--red)}.scene-neutral span{background:#8998a8}.energy-overview-grid{grid-template-columns:repeat(4,1fr);gap:14px;height:42%;min-height:205px;display:grid}.energy-card{flex-direction:column;justify-content:flex-start;padding:22px;display:flex;position:relative;overflow:hidden}.energy-card:before{content:"";background:var(--green);opacity:.7;height:2px;position:absolute;inset:0 0 auto}.energy-warning:before{background:var(--amber)}.energy-danger:before{background:var(--red)}.energy-neutral:before{background:#75869a}.energy-card-title{color:#afbfce;align-items:center;gap:10px;font-size:15px;font-weight:650;display:flex}.icon-box{width:36px;height:36px;color:var(--green);background:var(--green-soft);border:1px solid #42d9b32e;border-radius:10px;place-items:center;display:inline-grid}.energy-warning .icon-box{color:var(--amber);background:var(--amber-soft);border-color:#f2c66d33}.energy-danger .icon-box{color:var(--red);background:var(--red-soft);border-color:#ff6d7e33}.energy-neutral .icon-box{color:#95a6b7;border-color:var(--line);background:#8ca0b314}.energy-card-content{flex-direction:column;align-items:flex-start;gap:9px;margin-top:25px;display:flex}.energy-card-content>strong{color:var(--text);font-size:18px;font-weight:650}.power-value{white-space:nowrap;align-items:baseline;gap:6px;min-height:35px;display:flex}.power-value>span{color:var(--muted);font-size:13px;font-weight:600}.power-value>b{letter-spacing:-.025em;font-size:clamp(25px,2.1vw,32px);line-height:1}.power-value>small{color:var(--muted);font-size:13px;font-weight:650}.overview-lower-grid{grid-template-columns:1.15fr .65fr 1.35fr;gap:14px;height:calc(58% - 14px);min-height:210px;margin-top:14px;display:grid}.equipment-panel,.sensor-proxy,.event-focus{padding:18px}.panel-title{color:#aebdcc;justify-content:space-between;align-items:center;font-size:14px;font-weight:650;display:flex}.panel-title svg{color:var(--green)}.equipment-states{gap:8px;margin-top:13px;display:grid}.equipment-states>div{background:#ffffff06;border:1px solid #89a4be17;border-radius:9px;justify-content:space-between;align-items:center;padding:9px 10px;font-size:13px;display:flex}.equipment-states strong{font-size:14px}.positive,.text-stable{color:var(--green)}.warning-text,.text-warning{color:var(--amber)}.text-danger{color:var(--red)}.text-neutral,.muted{color:#8b9aaa}.sensor-proxy{flex-direction:column;display:flex}.sensor-proxy>strong{margin-top:24px;font-size:31px}.sensor-proxy>strong small{color:var(--muted);margin-left:5px;font-size:14px}.sensor-proxy p{color:var(--muted);margin:8px 0 0;font-size:12px}.event-focus{border-left:3px solid var(--green);flex-direction:column;justify-content:center;display:flex}.event-warning{border-left-color:var(--amber)}.event-danger{border-left-color:var(--red)}.event-neutral{border-left-color:#8292a4}.event-focus>span,.current-event>span{color:var(--muted);font-size:12px}.event-focus>strong,.current-event>strong{margin-top:7px;font-size:20px}.event-focus p,.current-event p{color:#a8b7c6;margin:9px 0 0;font-size:13px;line-height:1.6}.sensor-grid{grid-template-columns:repeat(4,1fr);gap:14px;height:22%;min-height:125px;display:grid}.metric-card{flex-direction:column;justify-content:space-between;padding:17px 19px;display:flex}.metric-heading{color:#aebdcc;align-items:center;gap:10px;font-size:14px;font-weight:650;display:flex}.metric-card .icon-box{width:33px;height:33px}.metric-value{font-size:clamp(25px,2vw,31px);font-weight:760;line-height:1}.metric-value small{color:var(--muted);margin-left:6px;font-size:13px;font-weight:650}.metric-danger{border-color:#ff6d7e4d}.metric-danger .icon-box{color:var(--red);background:var(--red-soft);border-color:#ff6d7e38}.metric-warning{border-color:#f2c66d47}.metric-warning .icon-box{color:var(--amber);background:var(--amber-soft);border-color:#f2c66d38}.pv-diagnosis{border-left:3px solid var(--green);grid-template-columns:.8fr 1.2fr;align-items:center;height:15%;min-height:92px;margin:14px 0;padding:15px 19px;display:grid}.diagnosis-warning{border-left-color:var(--amber)}.diagnosis-danger{border-left-color:var(--red)}.pv-diagnosis>div{align-items:center;gap:12px;display:flex}.status-orb{width:42px;height:42px;color:var(--green);background:var(--green-soft);border-radius:50%;place-items:center;display:grid}.diagnosis-warning .status-orb{color:var(--amber);background:var(--amber-soft)}.diagnosis-danger .status-orb{color:var(--red);background:var(--red-soft)}.pv-diagnosis small{color:var(--muted);margin-bottom:3px;font-size:11px;display:block}.pv-diagnosis strong{font-size:18px}.pv-diagnosis p{border-left:1px solid var(--line);color:#c2ced9;margin:0;padding-left:22px;font-size:14px}.pv-diagnosis p span{color:var(--muted);margin-bottom:5px;font-size:11px;display:block}.pv-chart-grid{grid-template-columns:repeat(2,1fr);gap:14px;height:calc(63% - 28px);min-height:245px;display:grid}.mini-chart{grid-template-rows:32px 1fr;min-width:0;padding:14px;display:grid}.chart-title{justify-content:space-between;align-items:flex-start;display:flex}.chart-title strong{font-size:14px}.chart-title span{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 7px;font-size:11px}.mini-chart canvas{width:100%;height:100%;min-height:0;display:block}.ems-page{width:min(1720px,100%)}.ems-main-grid{grid-template-columns:minmax(0,1.55fr) minmax(360px,.9fr);gap:16px;height:100%;display:grid}.energy-flow-panel,.control-panel,.comm-summary,.safety-panel,.history-panel,.current-event{min-height:0;padding:18px}.section-heading{justify-content:space-between;align-items:flex-start;gap:15px;min-height:38px;display:flex}.section-heading.compact{min-height:35px}.flow-health,.status-chip{border:1px solid var(--line);color:#b9c8d7;border-radius:999px;padding:5px 9px;font-size:11px}.flow-danger,.chip-danger{color:var(--red);background:var(--red-soft);border-color:#ff6d7e4d}.flow-warning,.chip-warning{color:var(--amber);background:var(--amber-soft);border-color:#f2c66d4d}.flow-stable,.chip-stable{color:var(--green);background:var(--green-soft);border-color:#42d9b347}.flow-neutral,.chip-neutral{color:#9aaabc}.energy-map{place-items:center;height:calc(100% - 48px);min-height:390px;padding:20px 3%;display:grid}.reference-energy-layout{grid-template-rows:auto 78px auto;grid-template-columns:minmax(210px,1fr) .12fr minmax(230px,1.1fr) .12fr minmax(210px,1fr);align-items:center;gap:8px;width:100%;display:grid}.energy-node{border:1px solid var(--line-strong);text-align:left;background:#050e178a;border-radius:13px;justify-content:center;align-items:center;gap:15px;min-width:0;height:132px;padding:18px;display:flex}.energy-node svg{color:var(--blue);flex:none;width:32px;height:32px}.flow-node-copy{flex-direction:column;align-items:flex-start;min-width:0;display:flex}.energy-node strong{font-size:15px}.energy-node span{color:var(--muted);margin-top:7px;font-size:13px}.energy-node .power-value{min-height:auto;margin-top:10px}.energy-node .power-value>b{font-size:21px}.node-isolated{border-color:#ff6d7e59}.node-isolated svg{color:var(--red)}.power-link{color:var(--green);place-items:center;font-size:30px;display:grid}.link-off{color:#667687}.flow-pv-node{grid-area:1/1}.flow-load-node{grid-area:1/3}.flow-grid-node{grid-area:1/5}.grid-power-link{grid-area:1/4}.storage-node{border-color:#a99af657;grid-area:3/3;height:118px}.storage-node svg{color:var(--purple)}.storage-command{height:78px;color:var(--purple);grid-area:2/3;justify-content:center;align-items:center;display:flex}.storage-command:before{content:none}.storage-command b{color:var(--purple);background:0 0;margin:0;padding:0;font-size:30px;font-weight:400;line-height:1}.control-list{grid-template-rows:auto auto auto;align-content:space-between;gap:0;height:calc(100% - 48px);padding:28px 0 0;display:grid}.control-panel .control-list{padding:34px 0 18px}.control-group{background:#ffffff04;border:1px solid #89a4be1a;border-radius:11px;gap:5px;padding:10px;display:grid}.control-group h3{color:#8297aa;letter-spacing:.08em;margin:0 0 2px;font-size:11px;font-weight:760}.control-row{background:#ffffff06;border:1px solid #89a4be14;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-height:42px;padding:0 11px;display:flex}.control-row span{color:#aebdcc;font-size:13px}.control-row strong{color:#94a4b5;font-size:13px}.control-row .control-active{color:var(--green)}.control-row .control-warning{color:var(--amber)}.comm-page{grid-template-rows:.82fr 1.18fr;gap:14px;display:grid}.comm-top-grid{grid-template-columns:1.18fr .82fr;gap:14px;min-height:0;display:grid}.comm-bottom-grid{grid-template-columns:1.55fr .7fr;gap:14px;min-height:0;display:grid}.comm-danger,.safety-active{border-color:#ff6d7e5c}.comm-metrics{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;display:grid}.comm-metrics>div{background:#ffffff06;border:1px solid #89a4be1a;border-radius:9px;padding:12px}.comm-metrics span{color:var(--muted);margin-bottom:7px;font-size:11px;display:block}.comm-metrics b{font-size:19px}.response-row{border:1px solid var(--line);border-radius:9px;justify-content:space-between;align-items:center;margin-top:10px;padding:9px 12px;display:flex}.response-row span{color:var(--muted);font-size:12px}.response-row strong{font-size:13px}.safety-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px;display:grid}.safety-grid>div{background:#ffffff06;border:1px solid #89a4be1a;border-radius:9px;grid-template-columns:25px 1fr auto;align-items:center;gap:8px;padding:11px;display:grid}.safety-grid svg{color:#8fa1b3;width:18px}.safety-grid span{color:var(--muted);font-size:12px}.safety-grid strong{font-size:13px}.safety-active .safety-grid strong{color:var(--red)}.event-count{color:var(--muted);letter-spacing:.08em;font-size:11px}.history-list{grid-template-columns:repeat(2,1fr);gap:6px 8px;height:calc(100% - 42px);display:grid;overflow:hidden}.history-event{text-align:left;color:#a9b8c7;cursor:pointer;background:#ffffff05;border:1px solid #89a4be1a;border-radius:8px;grid-template-columns:45px 1fr auto;align-items:center;gap:9px;min-height:0;padding:0 10px;display:grid}.history-event:hover{border-color:#42d9b359}.history-event time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.history-event span{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:650;overflow:hidden}.history-event small{color:#66788b;font-size:10px}.history-active{color:var(--text);background:#42d9b317;border-color:#42d9b366}.history-active time,.history-active small{color:var(--green)}.current-event{border-left:3px solid var(--green);flex-direction:column;justify-content:center;display:flex}.communication-rule{border:1px solid var(--line);color:var(--muted);background:#ffffff05;border-radius:9px;align-items:flex-start;gap:8px;margin-top:auto;padding:10px;font-size:11px;line-height:1.45;display:flex}.communication-rule svg{color:var(--blue);flex:none}@media (width<=1540px){.topbar{grid-template-columns:minmax(280px,.9fr) minmax(360px,1fr) auto;gap:10px;padding-inline:16px}.brand-mark{width:36px;height:36px}.controls>button{padding-inline:7px}.page-stage{padding:14px 18px 18px}.energy-card{padding:18px}}@media (width<=1260px){.topbar{grid-template-rows:44px 42px;grid-template-columns:1fr 1.3fr;height:114px}.brand-block{grid-area:1/1}.top-status{grid-area:1/2}.controls{grid-area:2/1/auto/-1;justify-content:center}.tabbar{height:44px}.page-stage{height:calc(100vh - 158px);padding:10px 14px 14px}.energy-overview-grid,.overview-lower-grid,.sensor-grid,.pv-chart-grid{gap:9px}.energy-overview-grid{min-height:170px}.energy-card{padding:14px}.energy-card-content{gap:6px;margin-top:15px}.overview-lower-grid{min-height:180px;margin-top:9px}.equipment-panel,.sensor-proxy,.event-focus{padding:13px}.equipment-states{gap:5px;margin-top:8px}.equipment-states>div{padding:7px 8px}.metric-card{padding:13px}.pv-diagnosis{min-height:78px;margin:9px 0;padding:11px 15px}.pv-chart-grid{height:calc(63% - 18px);min-height:200px}.energy-flow-panel,.control-panel,.comm-summary,.safety-panel,.history-panel,.current-event{padding:13px}.energy-map{min-height:330px;padding:8px 1%}.reference-energy-layout{gap-inline:4px;grid-template-columns:minmax(155px,1fr) .1fr minmax(170px,1.08fr) .1fr minmax(155px,1fr)}.energy-node{gap:9px;height:116px;padding:11px}.energy-node .power-value>b{font-size:18px}.storage-node{height:100px}.control-list{gap:10px}.control-panel .control-list{padding:22px 0 14px}.control-group{gap:3px;padding:7px}.control-row{min-height:37px}}@media (width<=980px){.brand-block h1{font-size:15px}.brand-block div>span{display:none}.top-status>div{padding:6px 8px}.controls>button span{display:none}.controls>button{justify-content:center;width:34px}.tabbar{gap:0;padding-inline:4px}.tabbar button{padding:0 11px;font-size:13px}.section-heading h2{font-size:16px}.energy-card-title{font-size:13px}.energy-card-content>strong{font-size:14px}.power-value>b{font-size:22px}.overview-lower-grid{grid-template-columns:1.1fr .65fr 1.2fr}.ems-main-grid{grid-template-columns:minmax(0,1.48fr) minmax(300px,.92fr)}.reference-energy-layout{grid-template-columns:minmax(125px,1fr) .08fr minmax(140px,1.08fr) .08fr minmax(125px,1fr)}}@media (height<=720px){.topbar{grid-template-rows:38px 35px;height:104px;padding-block:8px}.controls>button{height:31px}.tabbar{height:40px}.page-stage{height:calc(100vh - 144px);padding-top:8px;padding-bottom:9px}.eyebrow{font-size:10px}.energy-overview-grid{min-height:145px}.energy-card{padding:11px}.energy-card-title .icon-box{width:29px;height:29px}.energy-card-content{margin-top:10px}.power-value>b{font-size:21px}.overview-lower-grid{min-height:158px}.equipment-states>div{padding-block:5px}.sensor-grid{min-height:105px}.metric-card{padding:10px 12px}.metric-value{font-size:23px}.pv-diagnosis{min-height:68px;padding-block:8px}.pv-chart-grid{min-height:170px}.mini-chart{grid-template-rows:27px 1fr;padding:10px}.energy-map{min-height:285px;padding-block:3px}.reference-energy-layout{gap-block:3px;grid-template-rows:auto 48px auto}.energy-node{gap:7px;height:92px;padding:8px}.energy-node svg{width:22px;height:22px}.energy-node span{margin-top:4px}.energy-node .power-value{margin-top:5px}.storage-command{height:48px}.storage-node{height:80px;padding:6px}.control-list{gap:6px}.control-panel .control-list{padding:18px 0 12px}.control-group{gap:2px;padding:5px}.control-group h3{font-size:10px}.control-row{min-height:31px}.comm-page,.comm-top-grid,.comm-bottom-grid{gap:8px}.comm-metrics{margin-top:7px}.comm-metrics>div{padding:8px}.safety-grid{gap:5px;margin-top:7px}.safety-grid>div{padding:7px}.history-list{gap:4px 6px}}