:root{--ink:#f3f2eb;--muted:#8d958e;--line:#303931;--green:#9bd33e;--amber:#f0af27;--red:#f05a42;--cyan:#66c5c9}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080b09;color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}.power-wall{height:100svh;min-height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(7px,.75vh,12px);padding:clamp(13px,1.35vw,25px);background:radial-gradient(circle at 42% -15%,#213025 0,#0d120f 46%,#070908 100%)}
.power-wall.warning{background:radial-gradient(circle at 50% 0,#44330c,#100e08 55%);box-shadow:inset 0 0 0 6px var(--amber)}.power-wall.critical{background:radial-gradient(circle at 50% 0,#42140d,#100907 55%);box-shadow:inset 0 0 0 7px var(--red)}
.topbar{display:flex;align-items:center;justify-content:space-between}.brand p{margin:0 0 2px;color:var(--green);font-size:clamp(9px,.62vw,12px);font-weight:900;letter-spacing:.17em;text-transform:uppercase}.brand h1{margin:0;font-size:clamp(25px,2vw,39px);line-height:1;letter-spacing:-.04em}.clock{text-align:right;display:flex;align-items:baseline;gap:14px}.clock strong{font-size:clamp(28px,2.6vw,49px);line-height:.9;letter-spacing:-.05em}.clock span{color:var(--muted);font-size:clamp(10px,.7vw,13px)}
.status-strip{display:flex;align-items:center;gap:12px;min-height:36px;padding:6px 13px;border:1px solid #385322;background:#182210;color:#e0eccb;font-size:clamp(9px,.69vw,13px)}.status-strip>span:nth-of-type(2){color:#899483}.status-strip>b{margin-left:auto;color:#efbd5e;letter-spacing:.14em}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green)}.warning .status-strip{border-color:#98701c;background:#30240a}.critical .status-strip{border-color:#a53224;background:#35100b}.warning .status-dot{background:var(--amber)}.critical .status-dot{background:var(--red);animation:pulse 1s infinite}
.screen-grid{min-height:0;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(8px,.8vw,14px)}.left-column,.right-column{min-height:0;display:grid;gap:clamp(8px,.8vh,12px)}.left-column{grid-template-rows:1.56fr .76fr}.right-column{grid-template-rows:.45fr 1.55fr}.panel{min-height:0;border:1px solid var(--line);background:linear-gradient(145deg,rgba(24,31,26,.97),rgba(13,17,14,.98));box-shadow:0 10px 35px #0007}.panel-heading{height:clamp(37px,3.7vh,45px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(13px,1.1vw,20px);border-bottom:1px solid var(--line);font-weight:900;font-size:clamp(12px,.82vw,16px)}.panel-heading small,.equipment small,.detail-grid small,.flow-totals small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(7px,.48vw,9px)}
.flow-panel{display:grid;grid-template-rows:auto 1.15fr .72fr auto}.primary-flow{display:grid;grid-template-columns:1fr .35fr 1fr .35fr 1fr;align-items:center;padding:clamp(8px,1vh,15px) clamp(12px,1vw,20px);border-bottom:1px solid #252d27}.secondary-flow{display:grid;grid-template-columns:1fr .28fr 1fr .28fr auto;align-items:center;padding:clamp(7px,.8vh,12px) clamp(15px,1.2vw,23px)}.equipment{display:flex;flex-direction:column;align-items:center;text-align:center}.equipment strong{font-size:clamp(16px,1.25vw,24px);margin-top:4px}.equipment strong em{font-style:normal;font-size:.48em;color:var(--muted)}.equipment>span:last-child,.equipment div>span{color:#7d867f;font-size:clamp(7px,.52vw,10px);margin-top:4px}.generator-node,.battery-node{display:grid;grid-template-columns:auto 1fr;text-align:left;gap:12px}.generator-node>div,.battery-node>div{display:flex;flex-direction:column}.generator-node .equipment-icon,.battery-node .equipment-icon{margin:0}.to-inverter{color:#778078;font-size:clamp(7px,.5vw,10px);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.equipment-icon{position:relative;display:block;width:clamp(48px,4vw,72px);height:clamp(43px,3.7vw,67px);margin-bottom:5px}.equipment-icon.solar{height:clamp(38px,3.2vw,58px);transform:perspective(100px) rotateX(7deg)}.equipment-icon.solar:before{content:"";position:absolute;inset:2px 1px 9px;border:3px solid var(--amber);background:repeating-linear-gradient(90deg,transparent 0 22%,#d89b2666 23% 25%),repeating-linear-gradient(0deg,#17231d 0 29%,#d89b2666 30% 33%)}.equipment-icon.solar:after{content:"";position:absolute;left:42%;bottom:0;width:18%;height:10px;border-left:3px solid #7c837d;border-right:3px solid #7c837d}.equipment-icon.inverter{border:3px solid var(--green);border-radius:6px;background:#162215;box-shadow:inset 0 0 0 4px #0d120e}.equipment-icon.inverter:before{content:"EG4";position:absolute;left:0;right:0;top:9%;font-size:clamp(8px,.55vw,11px);font-weight:900}.equipment-icon.inverter:after{content:"~";position:absolute;left:20%;right:20%;bottom:13%;border:2px solid #63862c;border-radius:3px;font-size:clamp(13px,1vw,19px);line-height:.8}.equipment-icon.load:before{content:"";position:absolute;left:10%;right:10%;bottom:2%;height:58%;border:3px solid #bdc7bf;border-top:0;background:#141a16}.equipment-icon.load:after{content:"";position:absolute;left:7%;top:8%;width:67%;height:67%;border-left:3px solid #bdc7bf;border-top:3px solid #bdc7bf;transform:rotate(45deg)}.equipment-icon.battery{width:clamp(62px,4.6vw,84px);height:clamp(38px,2.8vw,51px);border:3px solid var(--green);border-radius:4px;background:linear-gradient(90deg,#739d2d 0 68%,#142014 68%)}.equipment-icon.battery:after{content:"";position:absolute;right:-8px;top:30%;width:6px;height:40%;background:var(--green)}.equipment-icon.battery:before{content:"ROSIE";position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(7px,.5vw,10px);font-weight:900}.equipment-icon.generator{border:3px solid #8e968f;border-radius:6px;background:#191e1a}.equipment-icon.generator:before{content:"GEN";position:absolute;left:7%;top:9%;font-size:clamp(7px,.5vw,10px);font-weight:900}.equipment-icon.generator:after{content:"";position:absolute;width:34%;aspect-ratio:1;border:4px solid #777f78;border-radius:50%;right:10%;top:24%}.equipment-icon.generator i,.equipment-icon.generator b{position:absolute;bottom:-6px;width:13px;height:6px;background:#747b75}.equipment-icon.generator i{left:8px}.equipment-icon.generator b{right:8px}
.power-arrow{display:flex;align-items:center;justify-content:center;gap:1px;color:#465048;font-size:clamp(18px,1.8vw,34px);font-weight:900;overflow:hidden}.power-arrow.active i{color:var(--green);text-shadow:0 0 8px #91cb34;animation:arrow 1.4s infinite}.power-arrow.active i:nth-child(2){animation-delay:.2s}.power-arrow.active i:nth-child(3){animation-delay:.4s}.power-arrow.idle i{color:#4d544e}.power-arrow.vertical{transform:rotate(-90deg)}
.flow-totals{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.flow-totals>span{padding:clamp(8px,.9vh,13px) clamp(10px,.8vw,15px);border-right:1px solid var(--line)}.flow-totals>span:last-child{border:0}.flow-totals small{display:block;margin-bottom:4px}.flow-totals strong{font-size:clamp(13px,1vw,19px)}
.chart-panel{position:relative;display:grid;grid-template-rows:auto 1fr}.legend{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:clamp(7px,.5vw,10px);font-weight:400}.legend i{width:13px;height:3px;margin-left:6px}.solar-key{background:var(--amber)}.load-key{background:var(--green)}.battery-key{background:var(--cyan)}.chart-wrap{position:relative;min-height:0;padding:8px 15px 18px 48px}.chart-wrap svg{width:100%;height:100%;overflow:visible}.grid-lines line{stroke:#2c352e;stroke-width:1}.chart-wrap polyline{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}.solar-line{stroke:var(--amber)}.load-line{stroke:var(--green)}.battery-line{stroke:var(--cyan)}.y-labels{position:absolute;left:10px;top:8px;bottom:18px;display:flex;flex-direction:column;justify-content:space-between;color:#727b73;font-size:clamp(7px,.48vw,9px)}.x-labels{position:absolute;left:48px;right:15px;bottom:5px;display:flex;justify-content:space-between;color:#727b73;font-size:clamp(7px,.48vw,9px)}.sample-flag{position:absolute;right:12px;bottom:7px;color:#8b7438;font-size:7px;letter-spacing:.1em}
.weather-panel{display:grid;grid-template-columns:1fr 1fr}.weather-block{padding:clamp(11px,1.2vh,18px) clamp(13px,1.1vw,20px)}.weather-block+.weather-block{border-left:1px solid var(--line)}.weather-title{display:flex;justify-content:space-between;align-items:center;color:#d7dcd7;font-size:clamp(10px,.7vw,13px);font-weight:800}.weather-title small{color:#7d867f;font-size:clamp(6px,.42vw,8px);letter-spacing:.11em}.weather-reading,.forecast-row{display:flex;align-items:end;gap:clamp(12px,1vw,19px);margin-top:9px}.weather-reading>strong,.forecast-row>strong{font-size:clamp(31px,2.7vw,52px);line-height:.8;letter-spacing:-.05em}.weather-reading strong span,.forecast-row strong span{font-size:.45em;color:var(--muted)}.weather-reading div,.forecast-row div{display:flex;flex-direction:column}.weather-reading div b,.forecast-row div b{font-size:clamp(10px,.75vw,14px)}.weather-reading div small,.forecast-row div small{color:var(--muted);font-size:clamp(7px,.48vw,9px);margin-top:3px}.weather-icon{font-size:clamp(26px,2.2vw,42px);color:#b9c4c7}
.rosie-panel{display:grid;grid-template-rows:auto 1fr 1.08fr auto}.rosie-top{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:clamp(9px,1vh,16px) clamp(14px,1.2vw,22px);border-bottom:1px solid var(--line)}.soc-ring{--soc:280deg;width:clamp(108px,9.2vw,171px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--green) 0 var(--soc),#273026 var(--soc));position:relative}.soc-ring:before{content:"";position:absolute;inset:9%;border-radius:50%;background:#111612;border:1px solid #354033}.soc-ring>div{position:relative;text-align:center}.soc-ring strong{display:block;font-size:clamp(41px,3.7vw,70px);line-height:.8;letter-spacing:-.07em;color:#dcf3b6}.soc-ring strong span{font-size:.31em;color:var(--green)}.soc-ring small{display:block;margin-top:10px;color:var(--muted);font-size:clamp(6px,.43vw,8px);letter-spacing:.1em;text-transform:uppercase}.remaining{display:flex;flex-direction:column}.remaining>small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(7px,.48vw,9px)}.remaining>strong{font-size:clamp(31px,2.7vw,52px);line-height:1;margin-top:6px}.remaining strong em{font-style:normal;font-size:.38em;color:var(--muted)}.remaining>span{color:#7d867f;font-size:clamp(8px,.55vw,11px)}.remaining>div{height:10px;border:1px solid #556154;padding:2px;margin-top:11px}.remaining>div i{display:block;height:100%;background:var(--green);box-shadow:0 0 8px #8bbb39}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr)}.detail-grid>div{padding:clamp(9px,1.1vh,16px) clamp(10px,.8vw,15px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.detail-grid>div:nth-child(3n){border-right:0}.detail-grid>div:nth-child(n+4){border-bottom:0}.detail-grid small{display:block;margin-bottom:5px}.detail-grid strong{font-size:clamp(14px,1.13vw,21px)}.detail-grid strong em{font-style:normal;font-size:.48em;color:var(--muted)}.battery-state{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);color:#99a19a;font-size:clamp(7px,.48vw,9px)}.battery-state span{padding:8px 11px;border-right:1px solid var(--line)}.battery-state span:last-child{border:0}.battery-state i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
footer{display:flex;justify-content:space-between;color:#747c75;font-size:clamp(7px,.5vw,10px);letter-spacing:.07em}footer strong{color:#b98b32;letter-spacing:.18em}@keyframes arrow{0%,100%{opacity:.25}50%{opacity:1}}@keyframes pulse{50%{opacity:.35}}
@media(max-width:760px){body{overflow:auto}.power-wall{height:auto;min-height:100svh}.clock{flex-direction:column;gap:1px}.screen-grid,.weather-panel,.rosie-top{display:flex;flex-direction:column}.left-column,.right-column{display:flex;flex-direction:column}.panel{min-height:300px}.flow-panel{min-height:600px}.primary-flow{grid-template-columns:1fr}.secondary-flow{grid-template-columns:1fr}.power-arrow{transform:rotate(90deg);height:25px}.power-arrow.vertical{transform:rotate(90deg)}.chart-panel{min-height:250px}.weather-block+.weather-block{border:0;border-top:1px solid var(--line)}.rosie-panel{min-height:600px}.detail-grid{grid-template-columns:1fr 1fr}.detail-grid>div:nth-child(3n){border-right:1px solid var(--line)}.detail-grid>div:nth-child(even){border-right:0}.status-strip>span:nth-of-type(2){display:none}footer{gap:15px}}
@media(prefers-reduced-motion:reduce){.power-arrow i,.critical .status-dot{animation:none}}
.secondary-flow.branches{grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,34px)}.source-branch{display:grid;grid-template-columns:1fr .22fr auto;align-items:center;gap:7px}.sample-flag{top:52px;bottom:auto}
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2vw,34px)}.header-readings{display:flex;align-items:stretch;justify-content:center;min-width:0}.header-weather,.fire-status{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(12px,1.25vw,22px);border-left:1px solid var(--line)}.header-weather small{color:#7d867f;font-size:clamp(6px,.43vw,8px);letter-spacing:.09em;text-transform:uppercase}.header-weather strong{font-size:clamp(14px,1.15vw,22px);margin-top:3px}.header-weather strong span{font-size:.5em;color:#a6ada7;font-weight:500;margin-left:4px}.fire-status{color:#909890;font-size:clamp(7px,.51vw,10px);text-transform:uppercase;letter-spacing:.09em}.fire-status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#777f78;margin-bottom:4px}.fire-status strong{color:#c1a057;font-size:clamp(9px,.62vw,12px);margin-top:2px}.fire-status.alert{background:#3b100c;border:1px solid #a53728;color:#ffd7d0}.fire-status.alert i{background:var(--red);box-shadow:0 0 12px var(--red)}.fire-status.alert strong{color:#ff8a78}.right-column{display:block}.right-column .rosie-panel{height:100%}
.left-column{grid-template-rows:minmax(0,1.56fr) minmax(160px,.76fr)}.flow-panel,.chart-panel{overflow:hidden}.flow-panel>*{min-height:0}.flow-totals{position:relative;z-index:3;min-height:52px;background:#101511}.chart-panel{position:relative;z-index:1}.chart-panel .panel-heading{height:34px;min-height:34px}
@media(max-height:800px) and (min-width:761px){.left-column{grid-template-rows:minmax(0,1fr) 170px}.primary-flow{padding-top:5px;padding-bottom:5px}.secondary-flow{padding-top:4px;padding-bottom:4px}.flow-totals>span{padding-top:7px;padding-bottom:7px}.chart-wrap{padding-top:4px}}