:root{--accent:#14775b;--good:#14775b;--warn:#94590e;--bad:#be3548;--muted:#586d83;--line:#dce6ef;--border:#dce6ef;--bg:#eff4f9;--panel:#fff;--text:#172f4b;--radius:16px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 0,#dce9f7,transparent 50%),linear-gradient(135deg,#edf3f9,#f5f8fb);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums}button,input,select{font:inherit;min-height:44px}button,summary,select{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #4389d1;outline-offset:3px}.wrap{width:100%;max-width:1280px;margin:auto;padding:0 28px}
header{position:sticky;top:0;z-index:20;color:#fff;background:linear-gradient(110deg,#10263f,#163c5e 75%,#17485e);box-shadow:0 6px 24px #17334c22;border-bottom:1px solid #476179}.titlebar{min-height:90px;display:flex;align-items:center;gap:36px}.header-left{display:flex;align-items:center;gap:14px;flex-shrink:0}.header-left span{color:#b8cfe0;font-size:12px;letter-spacing:1px}h1{margin:0;font-size:24px;letter-spacing:2px;line-height:1.4}.brand-mark{height:38px;width:38px;border:1px solid #87b8cb77;border-radius:10px;background:linear-gradient(140deg,#3f8c9c77,#4d9dc022);position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;width:7px;bottom:8px;background:#99d5ce;border-radius:2px}.brand-mark:before{height:14px;left:9px}.brand-mark:after{height:22px;right:9px;background:#e0f2f1}nav{display:flex;gap:6px;padding:5px;border-radius:12px;background:#061c303d}header .btn{color:#c5d9e9;background:transparent;border-color:transparent;min-width:100px}header .btn.active{background:#f2f8fd;color:#183e5c;box-shadow:0 3px 10px #081e3544;border-color:#fff;font-weight:700}header .btn:hover{background:#315574;color:#fff}header .btn.active:hover{color:#183e5c;background:#fff}.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}.badge{display:flex;align-items:center;gap:8px;color:#d2e4f0;font-size:13px}#lastTs{display:none}.dot{height:8px;width:8px;border-radius:50%;background:#9bafc2}.dot.ok{background:#75dfbd;box-shadow:0 0 0 4px #75dfbd18}.dot.bad{background:#ff9b9b}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;padding:28px 0}.section-intro{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:0 2px 2px}.section-intro .eyebrow{font-size:11px;letter-spacing:1.8px;color:#53738c}.section-intro h2{font-size:25px;margin:4px 0}.section-intro p{font-size:13px;color:var(--muted);margin:0}.section-tag{font-size:12px;white-space:nowrap;color:#38627e;border:1px solid #cadce9;background:#ffffffa6;border-radius:20px;padding:6px 13px}.card{grid-column:span 6;background:var(--panel);border:1px solid #dce6ef;border-radius:var(--radius);min-width:0;overflow:hidden;box-shadow:0 4px 6px #16365302,0 12px 32px #16365306;animation:panel-reveal .3s ease both;transition:box-shadow .2s,border-color .2s}.wide{grid-column:1/-1}.hd{padding:17px 24px;border-bottom:1px solid #e6edf4;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(100deg,#fbfdff,#fff)}.t{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}.t:before{content:"";width:4px;height:17px;background:#397f9f;border-radius:3px}.t small{font-size:12px;color:#58758d;font-weight:500;background:#edf3f8;padding:1px 7px;border-radius:4px}.bd{padding:24px;min-width:0}.muted{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0}.status-label{background:#eaf5f1;color:#246850;font-size:12px;border:1px solid #d3eade;border-radius:20px;padding:4px 10px}.hero-card{border-top:3px solid #318a91}.overview{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:30px;padding:30px}.eyebrow{font-size:14px;font-weight:600;color:#466177}.soc-focus{border-right:1px solid var(--line);padding:6px 30px 6px 0}.soc-value{font-size:78px;font-weight:750;letter-spacing:-4px;line-height:1.35;color:#17694f}.soc-track{height:26px;padding:4px;background:#e6efec;border:1px solid #c9dbd3;border-radius:7px;margin:14px 6px 16px 0;position:relative;box-shadow:inset 0 1px 3px #153e3210}.soc-track:after{content:"";position:absolute;inset:4px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),#ffffffb0 calc(10% - 2px),#ffffffb0 10%);pointer-events:none}.soc-track>div{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#19775a,#52b794)}.source{font-size:12px;line-height:1.8;color:#506b80;overflow-wrap:anywhere}.bms-baseline{margin-top:24px;padding:13px 15px;background:#f1f5f9;border:1px solid #e1e9f1;border-radius:9px}.bms-baseline .row{justify-content:space-between;font-size:13px}.soc-track.small{height:6px;padding:0;border:0;margin:9px 0 1px;background:#dbe5ee}.soc-track.small:after{display:none}.small>div{background:#7694ae}.power-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.power-card{min-width:0;padding:18px;border:1px solid #d4e7df;border-radius:12px;background:linear-gradient(145deg,#eef8f2,#f9fcfa);position:relative}.power-card.load{background:linear-gradient(145deg,#edf4fc,#f7faff);border-color:#d7e5f3}.power-card .eyebrow{font-size:13px}.power-value{font-size:44px;font-weight:720;letter-spacing:-1.5px;line-height:1.7;display:flex;align-items:baseline;color:var(--good)}.power-value small,.secondary-value small{font-size:14px;margin-left:7px;font-weight:500;letter-spacing:0}.load .power-value{color:#2466a5}.electrical-inline{display:flex;gap:4px 13px;flex-wrap:wrap;color:var(--muted);font-size:12px;border-top:1px solid #dbe6e5;padding-top:9px;margin-top:7px}.electrical-inline strong{color:#25435c;font-size:14px}.power-card>.muted{font-size:11px;margin-top:7px}.daily-strip{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:16px 18px;background:#f5f8fc;border:1px solid #e4ebf3;border-radius:10px}.daily-strip>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px}.daily-strip>div+div{border-left:1px solid var(--line);padding-left:20px}.daily-strip strong{font-size:26px;color:var(--text)}.daily-strip small{font-size:12px;font-weight:500;margin-left:5px}.daily-strip p{grid-column:1/-1;font-size:11px;margin:0}.hero-footer{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line);padding:13px 30px;background:#f6f9fc;color:var(--muted);font-size:13px}.hero-footer strong{color:var(--text);font-size:15px;margin-left:4px}.hero-footer small{margin-left:8px}.bms-electrical{padding:20px 30px;border-top:1px solid var(--line);background:linear-gradient(100deg,#edf3f9,#fafcfe)}.electrical-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}.electrical-heading>strong{font-size:14px}.electrical-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.electrical-grid>div{padding-left:16px;border-left:2px solid #b5cdde}.electrical-grid>div>span{font-size:12px;color:var(--muted)}.electrical-grid strong{display:block;font-size:28px;font-weight:650;letter-spacing:-.5px}.electrical-grid small{font-size:12px;margin-left:7px;font-weight:500}.bms-electrical p{font-size:11px;margin:12px 0 0}.charge-waiting{grid-column:1/-1;padding:12px 16px;background:#fff7e9;border:1px solid #eeddbe;border-radius:8px;color:#875a23;font-size:13px}.charge-waiting-state .power-card.load{grid-column:1/-1}body:not(.role-admin) .power-card.load{order:0}body:not(.role-admin) .power-card.charge{order:1}body:not(.role-admin) .charge-waiting{order:2}body:not(.role-admin) .daily-strip{order:3}.secondary-value{font-size:36px;font-weight:700;color:var(--good);margin-bottom:12px}.parameter-band,.temperature-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 0;margin-bottom:8px;border-top:1px solid #e6edf4}.parameter-band>span,.temperature-row>span{flex:1;background:#f3f7fb;padding:8px 12px;border-radius:6px;white-space:nowrap;font-size:13px;color:var(--muted)}.parameter-band strong,.temperature-row strong{color:var(--text)}.temperature-row{margin-top:20px;margin-bottom:0}.pill{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid #e0e7ed;border-radius:6px;font-size:13px;background:#f3f6f9}.pill.good{background:#eaf7f0;border-color:#cce8d9;color:var(--good)}.pill.bad{background:#fff0f2;color:var(--bad);border-color:#f3d6dc}.pill.warn{background:#fff7e9;color:var(--warn);border-color:#efdfbd}
.btn{border:1px solid #cbd9e5;background:#fff;border-radius:8px;padding:8px 14px;color:#36546e;font-size:13px;line-height:1.5;transition:background .18s,border-color .18s,box-shadow .18s}.btn.active{background:#eaf2f9;border-color:#91b3cc;color:#245679;font-weight:600}.btn:active{box-shadow:inset 0 2px 4px #132c4824}.input,select{max-width:100%;min-width:0;border:1px solid #c8d7e4;background:#fff;color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px}.input[type=number]{width:120px}label{display:inline-flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}summary{min-height:60px;padding:17px 24px;font-size:15px;font-weight:650;overflow-wrap:anywhere;transition:background .18s}summary .muted{margin-left:12px;font-weight:400;font-size:12px}details[open]>summary{border-bottom:1px solid var(--line);background:#f9fbfd}.bd>details{margin-top:14px}.bd>details>summary{padding:10px 0;min-height:44px;background:transparent;font-size:13px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}.metric-grid>div{padding:15px;background:#f3f7fb;border:1px solid #e1eaf2;border-radius:9px;font-size:12px;color:var(--muted)}.metric-grid strong{display:block;margin-top:7px;font-size:18px;font-weight:650;color:var(--text);overflow-wrap:anywhere}.cell-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:14px}.cell-item{background:linear-gradient(145deg,#f5f9fc,#fff);border:1px solid #dce7ef;border-radius:9px;padding:12px}.cell-label{font-size:10px;letter-spacing:1px;color:#617c93}.cell-value{font-size:21px;font-weight:650;color:#274c69;margin:3px 0 9px}.cell-value.high{color:#16775c}.cell-value.low{color:#a5731e}.cell-progress-bg{height:4px;border-radius:2px;background:#e1eaf0;overflow:hidden}.cell-progress-bar{height:100%;background:#71a8bc;border-radius:2px}.cell-progress-bar.high{background:#3b9e7d}.cell-progress-bar.low{background:#c8a456}.settings h2{font-size:15px;margin:20px 0 12px}.settings h2:first-child{margin-top:0}.settings .row{margin-bottom:16px}.terminal-body,pre{background:#eff4f8;padding:14px;max-height:260px;overflow:auto;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.trend-toolbar{border-left:4px solid #36849b}.trend-toolbar .bd{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:18px 22px}h2{font-size:18px;margin:0}.trend-toolbar h2{font-size:15px}.chart-panel .hd{border-bottom:1px solid #dce6ef}.chart-panel .bd{padding:20px 24px}.chart-keys{margin-bottom:14px}.chart-keys .btn{border-radius:20px;font-size:12px;min-height:40px}.chart-keys .btn:not(.active){opacity:.65}#btnChargeShowPower{color:#14775b}#btnChargeShowLoadPower{color:#2466a5}.chart-summary{border-top:1px solid #e5edf4;padding:12px 14px;background:#f5f8fc;border-radius:0 0 7px 7px;font-size:12px}.time-filter{padding:10px 14px;background:#f3f7fb;border:1px solid #e1eaf2;border-radius:9px;margin-bottom:12px}.curve-legend{justify-content:center;font-size:12px}canvas{display:block;width:100%;height:320px;max-width:100%;touch-action:pan-y}.bd p{margin:10px 0 0}.table-scroll{overflow:auto;max-width:100%;margin-top:12px}table{width:100%;border-collapse:collapse;font-size:12px}td,th{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#f2f6fa;text-align:left;color:#49677f}.foot{font-size:12px;color:#668096;padding-top:8px;padding-bottom:28px}.modal{display:none;position:fixed;inset:0;background:#102a43aa;z-index:50;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.panel{background:#fff;border-radius:14px;width:min(400px,100%)}.panel .bd{display:grid;gap:16px}.panel label{display:flex}.panel label .input{width:100%}.err{color:var(--bad)}[hidden],.hidden{display:none!important}body.admin-view-home .trendSection{display:none}body.admin-view-trends .homeSection{display:none}.preview-bar{background:#fff5dc;border-bottom:1px solid #ead8ac;padding:7px 28px;font-size:12px;color:#745321;display:flex;justify-content:space-between;gap:10px;align-items:center}.preview-bar>div{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.preview-bar a{display:inline-flex;align-items:center;min-height:44px}.preview-bar select{background:#fffbf1;font-size:12px}
@keyframes panel-reveal{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(hover:hover){.card:hover{border-color:#b9cfdc;box-shadow:0 12px 32px #16365310}.btn:hover{background:#edf4fa;border-color:#9bb9ce}summary:hover{background:#f0f6fb}}
@media(max-width:1100px){.titlebar{gap:20px}.header-left span{display:none}.overview{gap:22px}.soc-focus{padding-right:22px}.cell-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-bar{flex-wrap:wrap}.daily-strip>div{flex-direction:column;gap:0}}
@media(max-width:650px){.wrap{padding:0 16px}.titlebar{min-height:110px;gap:10px;flex-wrap:wrap;padding-top:12px;padding-bottom:10px}.header-left{gap:9px;flex:1}.brand-mark{height:30px;width:30px;border-radius:8px}.brand-mark:before{left:6px;height:11px;bottom:6px;width:6px}.brand-mark:after{right:6px;height:18px;bottom:6px;width:6px}h1{font-size:19px}.header-right{margin-left:0;gap:6px}.badge{font-size:11px}#btnLogout{font-size:11px;padding:6px;min-width:0}nav{order:3;width:100%;padding:3px}nav .btn{flex:1;min-height:44px}.grid{padding:18px 0;gap:14px}.section-intro h2{font-size:22px}.section-intro .eyebrow{font-size:9px}.section-intro p{font-size:12px}.section-tag{display:none}.card{grid-column:1/-1;--radius:12px}.hd,.bd,.chart-panel .bd{padding:16px}.t{font-size:15px}.overview{grid-template-columns:1fr;gap:18px;padding:20px}.soc-focus{padding:0 0 18px;border-right:0;border-bottom:1px solid var(--line)}.soc-value{font-size:64px;line-height:1.2}.soc-track{height:24px;margin:12px 0}.bms-baseline{margin-top:14px;padding:10px 12px}.power-overview{gap:10px}.power-card{padding:12px}.power-card .eyebrow{font-size:12px}.power-value{font-size:32px;line-height:1.65;letter-spacing:-1px}.power-value small{font-size:12px;margin-left:4px}.electrical-inline{gap:4px 8px;font-size:11px}.electrical-inline strong{font-size:13px}.source{font-size:11px}.daily-strip{padding:12px;gap:8px 12px}.daily-strip>div{font-size:12px;display:block}.daily-strip>div+div{padding-left:12px}.daily-strip strong{font-size:24px;display:block}.hero-footer{padding:12px 16px;gap:8px;font-size:12px}.hero-footer small{font-size:10px;margin-left:6px}.bms-electrical{padding:16px}.electrical-grid{gap:8px}.electrical-grid>div{padding-left:8px}.electrical-grid>div>span{font-size:11px}.electrical-grid strong{font-size:23px}.electrical-grid small{font-size:11px;margin-left:4px}.electrical-heading{gap:8px}.metric-grid{gap:8px;margin-bottom:16px}.metric-grid>div{padding:12px 10px;font-size:11px}.metric-grid strong{font-size:15px}.cell-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cell-item{padding:9px 6px}.cell-label{font-size:9px;letter-spacing:.5px}.cell-value{font-size:17px}.cell-value span{font-size:9px!important}.temperature-row{gap:8px}.parameter-band>span,.temperature-row>span{font-size:12px;padding:8px}summary{padding:15px 16px;font-size:14px}summary .muted{display:block;margin:3px 0 0;font-size:11px}.row{gap:8px}.btn{padding:8px 10px;font-size:12px}.chart-keys .btn{min-height:44px}.hd>.row{width:100%}.hd .input[type=date]{flex:1;width:130px}.trend-toolbar .bd{padding:16px;gap:12px}.trend-toolbar label{width:100%}.trend-toolbar select{flex:1;width:160px}.time-filter{padding:8px;gap:6px}.time-filter .input{width:108px}canvas{height:280px}.chart-summary{font-size:11px}.preview-bar{padding:7px 16px;gap:0}.preview-bar>strong{font-size:11px}.preview-bar>div{gap:12px;width:100%}.preview-bar select{width:100%;margin-bottom:4px}.settings label{max-width:100%}.foot{padding-bottom:max(28px,env(safe-area-inset-bottom))}body:not(.role-admin) .power-overview{grid-template-columns:1fr}body:not(.role-admin) #alarmCard{grid-column:1/-1}}
@media(max-width:380px){.electrical-grid{grid-template-columns:1fr}.electrical-grid>div{display:flex;justify-content:space-between;align-items:center;padding-left:10px}.electrical-grid strong{font-size:23px}.electrical-grid>div>span{font-size:12px}.header-left{gap:7px}h1{font-size:18px}.badge{gap:6px}.cell-value{font-size:16px}.chart-keys{gap:6px}.chart-keys .btn{padding:7px 9px}}
#morningCurve:focus-visible{outline:3px solid #4389d1;outline-offset:3px}#morningLegend{gap:8px 20px;margin-top:10px}#morningLegend label{min-height:44px;padding:4px 8px;cursor:pointer;flex-wrap:nowrap}#morningLegend input{width:18px;height:18px;min-height:18px;margin:0;flex-shrink:0;accent-color:currentColor}#morningLegend .morning-line-marker{width:20px;border-top:3px solid currentColor;flex-shrink:0}#morningDetail{min-height:44px}#morningPanel .chart-keys .btn{min-height:44px}
#voltageNetLegend{gap:8px 20px;margin-top:10px}#voltageNetLegend label,#voltageNetPanel .btn{min-height:44px}#voltageNetLegend label{display:flex;align-items:center;gap:8px;padding:4px 8px;cursor:pointer}#voltageNetLegend input{width:18px;height:18px;min-height:18px;flex-shrink:0;accent-color:currentColor}#voltageNetEta{width:220px;max-width:100%;min-height:44px}#voltageNetEtaValue{font-variant-numeric:tabular-nums}#voltageNetCurve:focus-visible{outline:3px solid #4389d1;outline-offset:3px}#voltageNetDetail,#voltageNetEtaSource{overflow-wrap:anywhere;min-height:44px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}