:root{color-scheme:dark;--bg:#0b0d10;--surface:#111418;--surface2:#171b20;--line:#272c32;--soft:#1e2329;--text:#edf0f3;--muted:#929ba6;--accent:#ff6b52;--green:#8bd4ae;--amber:#eac27c;--red:#ff737d;--mono:'Cascadia Code','Cascadia Mono',Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Segoe UI',sans-serif;font-size:16px}button,input,select{font:inherit}button,select{cursor:pointer}button{color:inherit}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;top:-80px;left:16px;background:var(--accent);color:#000;padding:15px;z-index:100}.skip:focus{top:10px}
.sidebar{width:224px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--soft);background:#0e1013;padding:31px 20px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;letter-spacing:3px;font-weight:800}.brand-mark{display:grid;place-items:center;background:var(--accent);color:#101114;width:37px;height:38px;font-size:27px;font-style:italic;letter-spacing:-3px;padding-right:4px;clip-path:polygon(17% 0,100% 0,83% 100%,0 100%)}.brand small{display:block;letter-spacing:1.7px;font-size:9px;margin-top:4px;color:var(--muted)}.workspace-label,.nav-label{font-size:11px;letter-spacing:1.5px;color:#747e88;margin-top:44px;margin-bottom:16px}.pack-id{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.pack-icon{font-size:25px;color:var(--accent)}.pack-id small{display:block;font:10px var(--mono);color:var(--muted);margin-top:6px}.nav-label{margin-top:39px}.nav-item{display:flex;gap:11px;align-items:center;width:100%;border:1px solid transparent;background:transparent;padding:13px 11px;border-radius:7px;margin-bottom:7px;color:#a0a7b0;text-align:left;font-size:14px;white-space:nowrap}.nav-item>span:first-child{font-size:20px;width:22px}.nav-item.active{background:#241c1a;border-color:#3d2a25;color:#ff927e}.nav-item:hover:not(.active){background:#171b20;color:#fff}.nav-short{font:11px var(--mono);margin-left:auto;opacity:.7}.fault-count{font:11px var(--mono);margin-left:auto;padding:2px 5px;border-radius:3px;background:#242a31}.sidebar-bottom{margin-top:auto;padding-top:30px}.source-box{border:1px solid var(--line);border-radius:8px;padding:14px 11px}.source-box b{font-size:12px;font-weight:500}.source-box p{font-size:11px;color:var(--muted);margin:10px 0 17px}.text-button{background:transparent;border:0;color:var(--accent);padding:0;font-size:13px}.text-button span{margin-left:16px}.side-footer{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.6px;color:#aab0b9;margin-top:25px}.side-footer small{display:block;font-size:9px;letter-spacing:0;color:#737c87;margin-top:4px}.mini-logo{font-weight:900;font-style:italic;font-size:20px;color:#65717f}.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px;vertical-align:middle}.dot.amber{background:var(--amber)}.workspace{margin-left:224px}.topbar{height:74px;border-bottom:1px solid var(--soft);display:flex;justify-content:space-between;align-items:center;padding:0 34px;gap:15px}.breadcrumb{font-size:13px;color:var(--muted)}.breadcrumb span{margin:0 15px;color:#59616a}.breadcrumb b{font-weight:500;color:#d2d8df}.header-actions{display:flex;align-items:center;gap:22px}.clock{font:12px var(--mono);color:var(--muted)}.connection-label{font:11px var(--mono);letter-spacing:1px;color:var(--amber)}.button{border:1px solid #343b43;border-radius:6px;background:#171b20;padding:10px 15px;font-size:13px;white-space:nowrap;transition:background .15s}.button:hover{background:#252c34}.button.small{padding:8px 13px}.button.primary{background:var(--accent);color:#121314;border-color:var(--accent);font-weight:650}.button.primary:hover{background:#ff8d79}main{max-width:1760px;margin:auto;padding:31px 34px 20px}.page-heading{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:24px}.eyebrow{font:11px var(--mono);letter-spacing:1.5px;color:var(--muted)}h1{font-size:33px;letter-spacing:-1.2px;line-height:1.15;font-weight:600;margin:11px 0 9px}h1 span{color:var(--accent)}.page-heading p{font-size:13px;color:var(--muted);margin:0}.heading-actions{display:flex;gap:10px;align-items:center}select{border:1px solid var(--line);border-radius:6px;background:#12161b;color:#c2cad4;padding:10px 30px 10px 12px;font-size:12px}.status-ribbon{display:flex;gap:12px;align-items:center;padding:11px 14px;background:#101b18;border:1px solid #243a31;border-radius:6px;margin-bottom:21px;font-size:12px;color:#abc8b9}.status-ribbon b{color:var(--green);font-weight:550;margin-right:14px}.status-ribbon.warning{background:#201c15;border-color:#443826;color:var(--amber)}.status-ribbon.warning b{color:var(--amber)}.status-ribbon.fault{background:#26171a;border-color:#553039;color:var(--red)}.status-ribbon.fault b{color:var(--red)}.status-icon{font-size:15px}.sample-label{margin-left:auto;font:10px var(--mono);white-space:nowrap;opacity:.8}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:23px}.metric{padding:19px 19px 16px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(120deg,#171b20,#111418)}.metric-label{font-size:10px;letter-spacing:1.15px;color:#a5adb8;display:flex;justify-content:space-between}.metric-label>span{font-size:16px;color:#66707d}.metric-value{font:36px var(--mono);letter-spacing:-1.5px;margin:13px 0 16px}.metric-value small{font-size:16px;color:var(--muted);letter-spacing:0}.metric-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10px;gap:8px;color:#b7bec6;white-space:nowrap}.spark{font-size:14px;letter-spacing:1px;color:var(--green)}.accent-text{color:var(--accent)}.muted{color:var(--muted)}
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:19px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:9px;min-width:0;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:21px 21px 16px}.panel-title{font-size:16px;font-weight:550;margin:0;letter-spacing:-.2px}.panel-subtitle{font-size:11px;color:var(--muted);margin:6px 0 0}.panel-number{color:#5f6b79;font:11px var(--mono);margin-right:8px}.tag{display:inline-flex;border:1px solid var(--line);background:#1b2026;border-radius:4px;padding:5px 8px;font:10px var(--mono);color:#bbc3ce;white-space:nowrap}.cell-summary{display:flex;gap:25px;padding:0 21px 17px;font-size:11px;color:var(--muted)}.cell-summary b{display:block;font:15px var(--mono);color:#d8dfe5;margin-top:5px}.map-wrap{padding:0 16px 14px}.cell-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;margin-bottom:6px}.row-label{font:10px var(--mono);color:#626e7b}.cell-grid{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}.cell{border:1px solid #2b4440;color:#b8ded2;border-radius:4px;padding:5px 1px 6px;min-width:0;text-align:center;background:#19312c;position:relative;transition:filter .12s}.cell:hover{filter:brightness(1.45);outline:1px solid #b2c4bb}.cell small{display:block;font:9px var(--mono);opacity:.67;margin-bottom:4px}.cell strong{font:11px var(--mono);letter-spacing:-.3px;display:block}.cell.warning{background:#483624!important;border-color:#b78549;color:#ffdb9d}.cell.fault{background:#49232e!important;border-color:#b75365;color:#ffb6c0}.cell.unknown{background:#22262c!important;border:1px dashed #67717e;color:#a7aeb8}.cell.balancing:after{content:'';position:absolute;right:2px;top:2px;width:4px;height:4px;background:#8dccff;border-radius:50%}.map-legend{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--soft);font-size:10px;color:var(--muted)}.legend-ramp{width:65px;height:5px;display:inline-block;vertical-align:middle;margin:0 7px;background:linear-gradient(90deg,#172c2a,#468779)}.legend-items{display:flex;gap:14px}.legend-items i{width:5px;height:5px;display:inline-block;margin-right:6px;background:var(--amber);border-radius:1px}.legend-items i.blue{background:#8dccff}.legend-items i.gray{background:#7d8794}.panel-note{font-size:10px;color:#75808c;padding:0 20px 13px;line-height:1.5}.soc-panel{position:relative;background:radial-gradient(ellipse at 55% 12%,#24221f 0,transparent 65%),var(--surface)}.soc-gauge{width:208px;height:208px;margin:0 auto 10px;position:relative}.soc-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}.soc-gauge circle{fill:none;stroke-width:8}.soc-gauge .track{stroke:#2a2b2a}.soc-gauge .progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:552.92;stroke-dashoffset:119;transition:stroke-dashoffset .7s}.gauge-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.gauge-label>span{font-size:10px;letter-spacing:1.7px;color:var(--muted);margin-bottom:10px}.gauge-label strong{font:43px var(--mono);letter-spacing:-2px}.gauge-label strong small{font-size:18px;color:var(--muted);letter-spacing:0}.gauge-label em{font-style:normal;font-size:11px;margin-top:12px;color:var(--accent)}.soc-detail{margin:0 22px 20px}.detail-row{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--soft);font-size:12px;color:var(--muted)}.detail-row:last-child{border:0}.detail-row b{font:13px var(--mono);color:#d5dce4}.soh-meter{display:flex;gap:3px;margin:7px 0 13px}.soh-meter i{height:5px;flex:1;background:var(--green);opacity:.7;border-radius:1px}.soh-meter i:last-child{opacity:.2}.bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:19px;margin-top:19px}.chart-readings{display:flex;align-items:center;gap:24px;margin:0 22px 14px}.chart-readings label{font-size:10px;color:var(--muted)}.chart-readings strong{display:block;font:20px var(--mono);color:var(--accent);margin-top:4px}.chart-readings small{font-size:11px;color:var(--muted)}.chart{height:170px;margin:0 14px 14px}.chart svg{width:100%;height:100%;overflow:visible}.chart text{font:10px var(--mono);fill:#7a8592}.chart line{stroke:#29303a;stroke-dasharray:3 5}.chart-empty{height:170px;display:grid;place-items:center;color:var(--muted);font-size:13px}.chart-caption{display:flex;justify-content:space-between;padding:10px 20px;border-top:1px solid var(--soft);font-size:10px;color:var(--muted)}.system-list{padding:0 20px 13px}.check-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;font-size:12px;border-bottom:1px solid var(--soft)}.check-row:last-child{border:0}.check-row span{color:var(--muted)}.check-row b{font:10px var(--mono);color:var(--green)}.good{color:var(--green)!important}.warn{color:var(--amber)!important}.bad{color:var(--red)!important}.view-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.stack{display:grid;gap:20px}.wide{grid-column:1/-1}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.toolbar .field{margin:0}.search{background:#11171d;color:var(--text);border:1px solid var(--line);border-radius:5px;padding:10px 12px;width:240px;font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:500;text-align:left;background:#151a20}td,th{padding:13px 19px;border-bottom:1px solid var(--soft);white-space:nowrap}td{font-family:var(--mono)}tbody tr:hover{background:#192028}td button{border:0;background:none;color:var(--accent);padding:0;font-family:inherit}.temperature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:0 22px 22px}.temp-card{background:#1b2928;border:1px solid #2b4440;border-radius:6px;padding:15px}.temp-card span{color:var(--muted);font:11px var(--mono)}.temp-card strong{display:block;font:24px var(--mono);margin:13px 0}.temp-card small{color:var(--green);font-size:10px}.temp-card.fault{background:#372026;border-color:#74414a}.temp-card.fault small{color:var(--red)}.empty{padding:26px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}.empty-symbol{font-size:26px;color:var(--green);display:block;margin-bottom:6px}.events{list-style:none;padding:0 20px 12px;margin:0}.events li{display:grid;grid-template-columns:60px 1fr;gap:13px;padding:13px 0;border-bottom:1px solid var(--soft);font-size:12px;line-height:1.6}.events time{font:10px var(--mono);color:var(--muted);padding-top:3px}.events small{display:block;color:var(--muted)}.large-stat{font:48px var(--mono);padding:0 22px 20px;letter-spacing:-2px}.large-stat small{font-size:20px;color:var(--muted);letter-spacing:0}.explanation{color:var(--muted);font-size:13px;line-height:1.8;padding:0 22px 20px;margin:0}.segmented{display:flex;background:#0c1014;border:1px solid var(--line);padding:3px;border-radius:5px}.segmented button{border:0;background:none;color:var(--muted);font-size:11px;padding:5px 9px;border-radius:3px}.segmented button.active{background:#30343a;color:#fff}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--soft);padding-top:21px;margin-top:27px;color:#798491;font-size:10px;letter-spacing:.5px}footer b{color:var(--accent);margin:0 9px}.footer-version{color:#54606e;margin-left:9px}dialog{border:1px solid #404953;border-radius:12px;background:#151a20;color:var(--text);padding:27px;width:min(560px,calc(100% - 28px));box-shadow:0 24px 100px #000b}dialog::backdrop{background:#05070ac9;backdrop-filter:blur(6px)}.dialog-title{display:flex;align-items:center;justify-content:space-between}.dialog-title h2{font-size:25px;letter-spacing:-.7px;margin:9px 0}.icon-button{border:1px solid var(--line);background:transparent;border-radius:5px;font-size:24px;line-height:1;width:33px;height:33px}.field{display:block;font-size:13px;margin:23px 0}.field span{font-size:11px;margin-left:6px}.field input{display:block;width:100%;padding:13px 12px;background:#0d1116;color:var(--text);border:1px solid #36414c;border-radius:5px;margin-top:9px}dialog p{font-size:14px;line-height:1.7;color:var(--muted)}dialog .hint{font-size:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.error-text{color:var(--red)!important;font-size:12px!important}.toast{position:fixed;bottom:25px;right:25px;max-width:calc(100% - 50px);padding:16px 21px;border:1px solid #4e5c66;background:#202a32;border-radius:8px;z-index:100;font-size:13px;box-shadow:0 5px 30px #0008}.stale-data .metric-value{color:#83909d}.stale-data .cell{opacity:.5}
@media(min-width:1600px){.cell strong{font-size:13px}.cell small{font-size:10px}.cell{padding:8px 1px}.metric-value{font-size:41px}.overview-grid,.bottom-grid{grid-template-columns:minmax(0,1fr) 330px}.soc-gauge{width:235px;height:235px}.sidebar{width:240px}.workspace{margin-left:240px}}
@media(max-width:1200px){.sidebar{width:188px;padding:25px 13px}.workspace{margin-left:188px}main{padding:26px 22px 20px}.topbar{padding:0 22px}.overview-grid,.bottom-grid{grid-template-columns:minmax(0,1fr) 245px}.cell-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.cell strong{font-size:12px}.cell-row{margin-bottom:10px}.metric{padding:16px 13px}.metric-value{font-size:28px}.metric-bottom{font-size:9px}.status-ribbon div span{display:block;margin-top:4px}.heading-actions{flex-direction:column;align-items:stretch}.brand{font-size:17px;gap:9px}.brand small{font-size:8px}.nav-item{font-size:12px}.cell-summary{gap:18px}.temperature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.sidebar{width:74px;align-items:center;padding:22px 10px}.brand>span:last-child,.workspace-label,.pack-id,.nav-label,.sidebar-bottom,.nav-short,.fault-count{display:none}.sidebar nav{margin-top:40px}.nav-item{font-size:0;width:50px;justify-content:center;padding:12px;gap:0}.nav-item>span:first-child{font-size:24px}.workspace{margin-left:74px}.metrics{gap:10px}.overview-grid,.bottom-grid{grid-template-columns:minmax(0,1fr) 230px}.metric-label{font-size:9px}.metric-value{font-size:26px}.metric-bottom .spark,.metric-bottom .muted{display:none}.view-grid{grid-template-columns:1fr}.temperature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.sidebar{position:fixed;inset:auto 0 0;width:auto;height:66px;border-right:0;border-top:1px solid var(--line);padding:0 5px;background:#0d1117f5;display:block;backdrop-filter:blur(15px)}.sidebar .brand{display:none}.sidebar nav{margin:0;display:flex;justify-content:space-around;height:100%;align-items:center}.nav-item{width:auto;flex:1;max-width:85px;margin:0;height:49px}.workspace{margin-left:0}.topbar{height:60px;padding:0 18px}.header-actions{gap:12px}.clock{display:none}.breadcrumb{font-size:11px}.breadcrumb span{margin:0 7px}.connection-label{font-size:10px}main{padding:24px 16px 92px}.page-heading{display:block}h1{font-size:30px}.heading-actions{flex-direction:row;justify-content:space-between;margin-top:20px}.status-ribbon{margin-bottom:15px;padding:11px}.status-ribbon div span{font-size:10px}.sample-label{display:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.metric-label{font-size:10px}.metric-value{font-size:30px;margin:12px 0}.metric-bottom{font-size:10px}.overview-grid,.bottom-grid{grid-template-columns:1fr;gap:16px}.soc-panel{display:grid;grid-template-columns:1fr 1fr}.soc-panel>.panel-head{grid-column:1/-1}.soc-gauge{width:170px;height:170px;margin-bottom:18px}.gauge-label strong{font-size:34px}.gauge-label>span{font-size:9px}.soc-detail{margin:0 17px 10px;align-self:center}.soc-detail .detail-row{font-size:11px}.soc-detail .detail-row b{font-size:11px}.cell strong{font-size:12px}.cell small{font-size:10px}.cell-grid{gap:5px}.cell{padding:7px 1px}.cell-row{gap:6px;margin-bottom:10px}.panel-head{padding:18px 17px 15px}.map-wrap{padding:0 12px 10px}.map-legend{flex-wrap:wrap;font-size:10px;padding:12px 16px}.panel-subtitle{font-size:10px}.cell-summary{font-size:10px;padding:0 17px 16px;gap:19px}.cell-summary b{font-size:13px}.temperature-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 17px 17px;gap:10px}.toolbar{flex-wrap:wrap}.search{width:100%}.toolbar select{flex:1}footer{flex-direction:column;font-size:9px}.dialog-actions{flex-direction:column}.legend-items{gap:10px}.temp-card strong{font-size:27px}.chart{height:155px}.page-heading p{font-size:12px}.eyebrow{font-size:10px}}
/* Dense telemetry keeps secondary metadata compact; operator controls stay readable. */
.button,.text-button,.nav-item,.page-heading p,.detail-row,.check-row,select,.search,.events li{font-size:14px}
.eyebrow,.workspace-label,.nav-label,.metric-label,.metric-bottom,.panel-subtitle,.tag,.cell-summary,.map-legend,.panel-note,.chart-caption,.source-box b,.source-box p,.connection-label,.row-label,.cell small,.gauge-label>span,.gauge-label em,.temp-card span,.temp-card small,.check-row b,th{font-size:12px}
.metric-bottom{white-space:normal}.cell strong{font-size:14px}.cell small{margin-bottom:5px}.cell{padding:6px 1px}.source-box .text-button{font-size:12px}.metric-label{letter-spacing:.7px}.cell-summary{gap:22px}.panel-subtitle{line-height:1.5}.check-row b{white-space:nowrap}.nav-item .nav-short{font-size:11px}.chart text{font-size:11px}.status-ribbon{font-size:13px}.status-ribbon div span{font-size:12px}.soh-meter i:last-child{opacity:inherit}
@media(min-width:1201px) and (max-width:1400px){.overview-grid,.bottom-grid{grid-template-columns:minmax(0,1fr) 265px}.cell-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:1200px){.metric-label{font-size:10px}.metric-bottom{font-size:11px}.nav-item{font-size:12px}.cell strong{font-size:14px}.cell-summary{flex-wrap:wrap;gap:14px 22px}}
@media(max-width:900px){.nav-item{font-size:0}.nav-item>.nav-short,.nav-item>.fault-count{display:none}.button,select{font-size:12px}.metric-bottom{font-size:10px}}
@media(max-width:700px){.cell strong{font-size:12px}.cell small{font-size:11px}.cell-summary{font-size:11px;gap:13px}.cell-summary b{font-size:13px}.panel-note,.map-legend{font-size:11px}.page-heading p{font-size:13px}.soc-detail .detail-row{font-size:12px}.soc-detail .detail-row b{font-size:12px}.gauge-label>span{font-size:10px}.tag,.panel-subtitle{font-size:11px}.status-ribbon div span{font-size:11px}.metric-label{font-size:11px}.metric-bottom{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}