:root{color-scheme:dark;--bg:#07131d;--card:#102330;--soft:#17313f;--text:#f5fafc;--muted:#8fa9b8;--cyan:#42d3ff;--green:#43e6a0;--yellow:#ffd45a;--red:#ff6570}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% -10%,#123343 0,transparent 34%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{width:min(1200px,calc(100% - 32px));margin:auto;padding:34px 0 60px}header,.card-head{display:flex;align-items:center;justify-content:space-between;gap:20px}header{margin-bottom:28px}h1,h2,p{margin:0}h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.04em}h2{font-size:21px;letter-spacing:-.02em}.eyebrow{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:5px}.live{display:flex;gap:9px;align-items:center;padding:11px 15px;border-radius:999px;background:var(--card);color:var(--muted);font-size:13px}.live i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}.live.ok i{background:var(--green);box-shadow:0 0 14px var(--green)}.card{background:linear-gradient(145deg,rgba(23,49,63,.94),rgba(12,29,40,.96));border:1px solid rgba(255,255,255,.055);border-radius:26px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.18)}.card-head>span{font-size:12px;color:var(--muted)}.hero-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:18px}.flow{height:240px;display:grid;grid-template-columns:1fr 1fr 1.1fr 1fr 1fr;align-items:center}.node{text-align:center}.node b{display:grid;place-items:center;width:78px;height:78px;border-radius:24px;margin:0 auto 12px;font-size:38px}.node span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}.node strong{font-size:22px}.solar b{color:var(--yellow);background:#403a24}.house b{color:var(--cyan);background:#123b4d;border-radius:50%;font-size:48px}.grid b{color:var(--green);background:#163b35}.path{height:3px;background:#31576a;position:relative}.path i{position:absolute;width:10px;height:10px;top:-4px;border-radius:50%;animation:travel 2s linear infinite}.solar-path i{background:var(--yellow);box-shadow:0 0 12px var(--yellow)}.grid-path i{background:var(--green);box-shadow:0 0 12px var(--green);animation-direction:reverse}@keyframes travel{from{left:0}to{left:calc(100% - 10px)}}.pump-card{text-align:center}.pump-card .card-head{text-align:left}.state{padding:7px 10px!important;border-radius:999px;background:var(--soft);font-weight:800}.state.on{color:var(--green)}
.ring{--progress:0deg;width:164px;height:164px;border-radius:50%;margin:18px auto 14px;background:conic-gradient(var(--cyan) var(--progress),rgba(255,101,112,.18) 0);display:grid;place-items:center;position:relative;filter:drop-shadow(0 0 18px rgba(66,211,255,.12))}.ring:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,rgba(255,255,255,.3),transparent 18%,transparent 78%,rgba(255,255,255,.1));mix-blend-mode:overlay}.ring:after{content:"";position:absolute;inset:11px;background:linear-gradient(145deg,#132b39,#0b1d28);border:1px solid rgba(255,255,255,.05);border-radius:50%;box-shadow:inset 0 8px 24px rgba(0,0,0,.25)}.ring.complete{filter:drop-shadow(0 0 20px rgba(67,230,160,.28));background:conic-gradient(var(--green) var(--progress),var(--soft) 0)}.ring div{position:relative;z-index:1}.ring strong,.ring span{display:block}.ring strong{font-size:30px;letter-spacing:-.04em}.ring span,.pump-card>p{font-size:12px;color:var(--muted)}
.chart-card{margin-top:18px}.chart-tools{display:flex;align-items:center;gap:20px}.range-picker{display:flex;padding:4px;border-radius:12px;background:rgba(3,14,22,.45);border:1px solid rgba(255,255,255,.05)}.range-picker button{appearance:none;border:0;background:transparent;color:var(--muted);font:700 11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:7px 11px;border-radius:9px;cursor:pointer;transition:.25s ease}.range-picker button:hover{color:var(--text)}.range-picker button.active{color:#06151e;background:var(--cyan);box-shadow:0 5px 18px rgba(66,211,255,.2)}.legend{display:flex;gap:16px;font-size:12px}.legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.l-solar:before{background:var(--yellow);box-shadow:0 0 9px var(--yellow)}.l-home:before{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.l-grid:before{background:var(--green);box-shadow:0 0 9px var(--green)}.canvas-wrap{height:300px;position:relative;margin-top:18px;background:linear-gradient(180deg,rgba(4,16,24,.16),transparent);border-radius:18px}.canvas-wrap canvas{width:100%;height:100%}.canvas-wrap>p{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.lower-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:18px}.daily-bars{height:210px;display:flex;align-items:flex-end;gap:10px;padding:28px 4px 25px}.day{height:100%;flex:1;min-width:20px;display:flex;align-items:flex-end;justify-content:center;position:relative}.day .bar{height:100%;width:min(30px,75%);display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .25s ease}.day:hover .bar{transform:translateY(-4px)}.day i{display:block;width:100%;transition:height .8s cubic-bezier(.2,.8,.2,1)}.day i.missing{background:linear-gradient(180deg,rgba(255,101,112,.42),rgba(255,101,112,.12));border-bottom:1px solid rgba(255,255,255,.12)}.day i.done{background:linear-gradient(180deg,var(--cyan),#187b9a);box-shadow:0 0 14px rgba(66,211,255,.18)}.day strong{position:absolute;top:-20px;font-size:10px;color:var(--text)}.day span{position:absolute;bottom:-21px;width:100%;font-size:10px;color:var(--muted);text-align:center}.events{margin-top:18px;max-height:215px;overflow:auto}.event{display:grid;grid-template-columns:10px 1fr auto;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.event i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red)}.event.started i{background:var(--green);box-shadow:0 0 9px var(--green)}.event strong,.event small{display:block}.event strong{font-size:13px}.event small,.event time,.empty{font-size:11px;color:var(--muted)}
@media(max-width:800px){.hero-grid,.lower-grid{grid-template-columns:1fr}.flow{height:200px}.card{padding:18px}.canvas-wrap{height:240px}.chart-head{align-items:flex-start}.chart-tools{align-items:flex-end;flex-direction:column;gap:10px}.legend{display:none}}@media(max-width:500px){.shell{width:min(100% - 20px,1200px);padding-top:20px}.flow{grid-template-columns:1fr .45fr 1fr .45fr 1fr}.node b{width:58px;height:58px;font-size:28px}.node strong{font-size:16px}.range-picker button{padding:7px 9px}.daily-bars{overflow-x:auto}}