/* BMSGO energy-monitor pages: calm green-and-white overview surfaces. */
.energy-hero{position:relative;overflow:hidden;padding:34px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(122deg,#f7fbf5 0%,#edf8e9 62%,#dff2dc 100%);box-shadow:var(--shadow)}
.energy-hero:after{content:"";position:absolute;width:310px;height:310px;border-radius:50%;right:-95px;top:-165px;border:42px solid rgba(183,227,75,.21);pointer-events:none}.energy-hero>*{position:relative;z-index:1}.energy-kicker{display:inline-flex;gap:8px;align-items:center;padding:5px 10px;border-radius:999px;background:#fff;color:var(--brand2);font-size:12px;font-weight:800;letter-spacing:.05em}.energy-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.08;margin:14px 0 10px;color:var(--brand)}.energy-hero p{max-width:690px;margin:0;color:#456052;font-size:17px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.energy-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border:1px solid var(--line2);border-radius:11px;background:#fff;color:var(--brand);font-weight:800;cursor:pointer;font:inherit}.energy-btn:hover{text-decoration:none;background:#f8fcf6}.energy-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.energy-btn.lime{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.energy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 30px}.energy-stat{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 3px 14px rgba(18,48,31,.035)}.energy-stat .stat-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:9px;border-radius:11px;background:var(--mint);font-size:17px}.energy-stat b{display:block;font-size:27px;line-height:1.1;color:var(--brand)}.energy-stat span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:30px 0 13px}.section-title h2{margin:0;color:var(--brand);font-size:23px}.section-title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.energy-empty{padding:31px;border:1px dashed var(--line2);border-radius:18px;background:var(--surface);text-align:center;color:var(--muted)}.energy-empty b{display:block;color:var(--brand);margin-bottom:4px}.online-dot{width:8px;height:8px;border-radius:50%;background:#48b66b;box-shadow:0 0 0 4px rgba(72,182,107,.14);display:inline-block}
.bms-online-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.bms-online-grid[hidden]{display:none!important}.bms-online-card{display:block;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}.bms-online-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,48,31,.11);text-decoration:none}.monitor-card-head{display:flex;align-items:center;gap:9px;margin-bottom:15px}.monitor-card-head b{color:var(--brand);font-family:var(--mono);font-size:15px}.monitor-card-head small{margin-left:auto;color:var(--muted)}.monitor-card-head .card-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--mint);font-size:16px}.monitor-card-head .online-dot{margin-left:auto}.pack-line{display:grid;grid-template-columns:minmax(84px,1fr) 56px 62px;gap:9px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px}.pack-line:first-of-type{border-top:0}.pack-line strong{text-align:right;color:var(--brand2)}.soc-track{height:6px;background:#e7eee4;border-radius:99px;overflow:hidden}.soc-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7abd50,#1f8b62)}
.bms-family-list{display:grid;gap:28px}.bms-family-group{padding:20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#fff,#f6fbf4);box-shadow:var(--shadow)}.bms-family-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line)}.bms-family-head span{display:block;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.09em}.bms-family-head h3{margin:3px 0 0;color:var(--brand);font-size:21px}.bms-family-head>b{padding:6px 10px;border-radius:999px;background:var(--mint);color:var(--brand2);font-size:12px}.bms-fw-group{margin-top:18px}.bms-fw-group>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 10px}.bms-fw-group h4{margin:0;color:var(--brand);font:800 14px var(--mono)}.bms-fw-group header span{color:var(--muted);font-size:12px}.bms-fw-count{display:flex!important;gap:7px;align-items:center;margin-top:3px}.bms-fw-count b{padding-left:7px;border-left:1px solid var(--line2);color:var(--brand2);font-size:12px}.bms-fw-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 10px;border:1px solid var(--line2);border-radius:9px;background:#fff;color:var(--brand2);font:800 12px var(--sans);cursor:pointer}.bms-fw-toggle:hover{border-color:#8fc795;background:#f6fbf4}.bms-fw-toggle:focus-visible{outline:3px solid rgba(38,155,99,.18);outline-offset:2px}.bms-fw-toggle:after{content:'⌄';font-size:15px;line-height:.8;transition:transform .18s ease}.bms-fw-group.is-expanded .bms-fw-toggle:after{transform:rotate(180deg)}.bms-card-meta{display:grid;min-width:0;margin-left:auto;text-align:right}.monitor-card-head .bms-card-meta small{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.monitor-card-head .bms-card-meta small+small{margin-top:2px;color:#668071}
.pack-line .pack-model{display:block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px}
.inv-list{display:grid;gap:18px}.inv-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:20px;background:#fff;box-shadow:var(--shadow)}.inv-card-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.inv-card-title{margin:0;color:var(--brand);font:800 17px var(--mono)}.inv-card-meta{color:var(--muted);font-size:13px}.inv-card-head .energy-btn{margin-left:auto;padding:7px 11px;font-size:13px}.flow-board{position:relative;display:grid;grid-template-columns:1fr 1.16fr 1fr;grid-template-areas:"pv inv grid" "bat inv load";gap:18px;align-items:center;min-height:320px;margin-top:12px;padding:17px 0}.flow-center{grid-area:inv;justify-self:center;position:relative;width:174px;height:174px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 42%,#fff 0 46%,#eff9ec 47% 100%);border:10px solid #249561;box-shadow:0 0 0 8px #dff3df,0 15px 30px rgba(33,134,88,.16);z-index:2}.flow-center:before{content:"";position:absolute;inset:-19px;border:1px solid #a6d8ac;border-radius:50%;animation:spin 10s linear infinite}.flow-center b{display:block;font-size:17px;color:var(--brand)}.flow-center span{font-size:13px;color:var(--muted)}.flow-center strong{font-size:27px;line-height:1.1;color:#16834f}.flow-node{position:relative;z-index:2;min-height:105px;padding:15px;border:1px solid #cce5cf;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 7px 20px rgba(18,48,31,.07)}.flow-node.pv{grid-area:pv}.flow-node.grid{grid-area:grid}.flow-node.bat{grid-area:bat}.flow-node.load{grid-area:load}.flow-node h3{margin:0 0 5px;color:var(--brand);font-size:14px}.flow-node strong{font-size:25px;line-height:1.1;color:#188757}.flow-node small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.flow-wire{position:absolute;z-index:1;height:10px;border-radius:99px;background:linear-gradient(90deg,#acdcb0,#0ca461,#b9e78f);background-size:210% 100%;box-shadow:0 0 0 3px rgba(78,172,103,.12);animation:flow 2.1s linear infinite}.wire-pv{width:25%;left:20%;top:29%;transform:rotate(12deg)}.wire-grid{width:25%;right:20%;top:29%;transform:rotate(-12deg);animation-direction:reverse}.wire-bat{width:24%;left:21%;bottom:28%;transform:rotate(-13deg);animation-direction:reverse}.wire-load{width:24%;right:21%;bottom:28%;transform:rotate(13deg)}.flow-wire:after{content:"›››";position:absolute;right:9px;top:-6px;color:#fff;font-weight:900;letter-spacing:2px}.inv-details{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-top:1px solid var(--line);padding-top:14px}.inv-detail{padding:9px 10px;background:var(--surface);border-radius:11px}.inv-detail span{display:block;color:var(--muted);font-size:11px}.inv-detail b{display:block;margin-top:1px;color:var(--brand);font-size:15px}
.group-builder{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(0,1.5fr);gap:20px;align-items:start}.group-panel{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.group-panel h2{margin:0;color:var(--brand);font-size:19px}.group-panel p{margin:6px 0 16px;color:var(--muted);font-size:13px}.group-form{display:grid;grid-template-columns:1fr auto;gap:8px}.group-form input{min-width:0;padding:10px 11px;border:1px solid var(--line2);border-radius:10px;font:inherit;color:var(--ink)}.choice-list{display:grid;gap:7px;max-height:420px;overflow:auto}.choice{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.choice:hover{background:#f8fbf7}.choice input{accent-color:var(--brand2);width:16px;height:16px}.choice b{font:700 13px var(--mono)}.choice small{margin-left:auto;color:var(--muted);font-size:11px}.saved-groups{display:grid;gap:15px}.group-view{padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#fff,#f6fbf4)}.group-view-head{display:flex;align-items:center;gap:9px;margin-bottom:15px}.group-view-head h2{margin:0;font-size:18px;color:var(--brand)}.group-view-head .energy-btn{margin-left:auto}.group-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.mini-system{position:relative;display:block;overflow:hidden;padding:15px;border:1px solid #d6e7d5;border-radius:15px;background:#fff;color:var(--ink)}.mini-system:hover{text-decoration:none;border-color:#9bcd9f}.mini-system b{color:var(--brand);font:800 14px var(--mono)}.mini-system .mini-value{display:block;margin:6px 0 3px;font-size:25px;font-weight:800;color:#188757}.mini-system small{color:var(--muted)}.mini-ring{width:40px;height:40px;float:right;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#269b63 var(--pct),#e6eee4 0);font-size:10px;font-weight:800;color:var(--brand)}.mini-ring:after{content:"";width:30px;height:30px;border-radius:50%;background:#fff;position:absolute}.mini-ring span{z-index:1}.group-flow{height:4px;margin:9px 0;background:linear-gradient(90deg,#a9dcac,#1e9c60,#b5e580);background-size:200% 100%;border-radius:9px;animation:flow 2s linear infinite}
.group-view-head .group-open{margin-left:auto}.group-view-head .group-open+.energy-btn{margin-left:0}
.group-ring-page{position:relative;min-height:70vh}
.group-ring-page:before{content:"";position:absolute;z-index:-1;inset:-40px -30px;pointer-events:none;
  background:radial-gradient(560px 380px at 12% 6%,rgba(183,227,75,.13),transparent 60%),
    radial-gradient(620px 460px at 88% 22%,rgba(31,155,201,.10),transparent 60%),
    radial-gradient(600px 420px at 45% 96%,rgba(45,106,79,.10),transparent 60%);
  background-repeat:no-repeat;background-size:200% 200%;animation:bg-drift 28s ease-in-out infinite}
.group-ring-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:28px 0 36px}.group-ring-head h1{margin:10px 0 0;color:var(--brand);font-size:clamp(28px,5vw,44px)}.group-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;align-items:start}.system-ring{--pct:100%;width:min(240px,75vw);aspect-ratio:1;justify-self:center;display:grid;place-items:center;padding:13px;border-radius:50%;background:conic-gradient(#259762 var(--pct),#dfeadf 0);box-shadow:0 0 0 8px #eef7ec,0 18px 35px rgba(18,75,47,.14);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}.system-ring.inv{background:conic-gradient(from 30deg,#b7e34b,#259762,#70c45c,#b7e34b);animation:ring-glow 3s ease-in-out infinite}.system-ring:hover{transform:translateY(-5px);box-shadow:0 0 0 9px #e5f3e2,0 24px 42px rgba(18,75,47,.2);text-decoration:none}.system-ring-inner{width:100%;height:100%;box-sizing:border-box;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:#fff;border:1px solid #d7e9d6}.system-ring small{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em}.system-ring b{max-width:100%;margin:6px 0;color:var(--brand);font:800 14px var(--mono);overflow-wrap:anywhere}.system-ring strong{color:#16834f;font-size:30px;line-height:1.1}.system-ring em{margin-top:5px;color:var(--muted);font-size:12px;font-style:normal}.system-ring.offline{--pct:0%;filter:grayscale(.7);opacity:.68;animation:none}@keyframes ring-glow{50%{box-shadow:0 0 0 11px #e5f4df,0 21px 40px rgba(18,75,47,.18)}}
.group-dashboard{display:grid;gap:38px}.group-device-block{display:grid;gap:15px;min-width:0;animation:card-in .4s ease}.group-device-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}.group-device-head>div:first-child>span{display:block;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em}.group-device-head h2{margin:2px 0 0;color:var(--brand);font:800 clamp(18px,3vw,25px) var(--mono)}.group-device-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.group-inverter{padding:20px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.7);box-shadow:var(--shadow);transition:box-shadow .25s ease,transform .25s ease}.group-inverter:hover{box-shadow:0 16px 36px rgba(18,48,31,.14);transform:translateY(-2px)}.group-inverter>.local-flow{box-shadow:none}.group-inv-details{margin-top:2px}.group-bms-device{padding-top:3px}.group-bms-packs{display:grid;gap:20px}.group-bms-pack{transition:box-shadow .25s ease,transform .25s ease;animation:card-in .4s ease}.group-bms-pack:hover{box-shadow:0 16px 36px rgba(18,48,31,.14);transform:translateY(-2px)}.group-bms-pack .cells{margin-bottom:4px}.group-no-cells{padding:18px}.group-bms-pack .hero{min-height:190px}.group-bms-pack .pkhead h2{font-family:var(--mono)}
.cu{font-variant-numeric:tabular-nums}
.trend-chart{position:relative;margin-top:10px;height:56px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(236,249,251,.55));overflow:hidden}
.trend-chart svg{display:block;width:100%;height:100%}
.trend-chart.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
.trend-last{position:absolute;top:6px;right:9px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--brand);font-size:11px;font-weight:800}
@keyframes card-in{from{opacity:.4;transform:translateY(5px) scale(.997)}to{opacity:1;transform:none}}
@keyframes bg-drift{0%{background-position:0% 0%,100% 0%,50% 100%}50%{background-position:18% 26%,72% 38%,58% 68%}100%{background-position:0% 0%,100% 0%,50% 100%}}
@media(prefers-reduced-motion:reduce){.group-device-block,.group-bms-pack,.group-ring-page:before{animation:none}}
.device-search{margin:0 0 10px}.device-search input{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink);font:inherit}.device-search input:focus{outline:3px solid rgba(38,155,99,.14);border-color:var(--brand2)}.device-search input::placeholder{color:var(--muted)}
@keyframes flow{to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.energy-hero{padding:25px}.energy-stats{grid-template-columns:repeat(2,1fr)}.flow-board{grid-template-columns:1fr 1fr;grid-template-areas:"pv grid" "inv inv" "bat load";min-height:510px;gap:12px}.flow-center{width:148px;height:148px}.flow-wire{display:none}.inv-details{grid-template-columns:repeat(2,1fr)}.group-builder{grid-template-columns:1fr}.group-panel{position:static}.group-ring-head{align-items:flex-start;flex-direction:column}.full-flow{grid-template-columns:1fr 1fr;gap:10px}.full-flow-line{display:none}.full-flow-core{grid-column:1/-1;justify-self:center;width:160px}.full-tiles{grid-template-columns:repeat(3,1fr)}}@media(max-width:540px){.wrap:has(.energy-hero){padding-left:16px;padding-right:16px}.energy-stats{gap:8px}.energy-stat{padding:14px}.energy-stat b{font-size:23px}.energy-hero h1{font-size:31px}.flow-node{min-height:88px;padding:12px}.flow-node strong{font-size:20px}.flow-center{width:132px;height:132px;border-width:8px}.flow-center strong{font-size:22px}.group-form{grid-template-columns:1fr}.group-view-head{align-items:flex-start;flex-wrap:wrap}.group-view-head .group-open{margin-left:0}.group-device-head{align-items:flex-start;flex-direction:column}.group-device-actions{justify-content:flex-start}.group-inverter{padding:12px}.group-bms-pack .cbody{padding:12px}.inv-card{padding:15px}.inv-card-head .energy-btn{margin-left:0}.choice small{display:none}.compact-flow{grid-template-columns:1fr 24px 86px 24px 1fr}.compact-inv b{font-size:14px}.compact-bottom{font-size:11px}.compact-bottom span:last-child{display:none}.full-inv-head{flex-wrap:wrap}.full-inv-head .energy-btn{margin-left:0}.full-tiles{grid-template-columns:repeat(2,1fr)}.full-flow{padding:15px}.full-flow-node{padding:13px}.full-flow-node b{font-size:21px}}

.inv-compact{display:block;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}.inv-compact:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,48,31,.11);text-decoration:none}.compact-flow{display:grid;grid-template-columns:1fr 38px 1.1fr 38px 1fr;align-items:center;gap:0;margin:15px 0 12px}.inv-flow-point{padding:12px;border:1px solid #cce5cf;border-radius:13px;background:#fbfefb}.inv-flow-point span,.inv-flow-point small{display:block;color:var(--muted);font-size:11px}.inv-flow-point b{display:block;color:#16834f;font-size:20px;line-height:1.25}.compact-line{height:7px;background:linear-gradient(90deg,#b9e78f,#18a35f,#b9e78f);background-size:180% 100%;animation:flow 2s linear infinite}.compact-line.rev{animation-direction:reverse}.compact-inv{padding:10px;text-align:center;border:6px solid #249561;border-radius:50%;aspect-ratio:1;display:grid;place-content:center;background:#f4fbf0}.compact-inv span,.compact-inv small{font-size:10px;color:var(--muted)}.compact-inv b{color:var(--brand);font-size:19px}.compact-bottom{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:11px;font-size:12px;color:var(--muted)}.compact-bottom b{color:var(--brand2)}
.full-inv-head{display:flex;align-items:center;gap:12px;margin:4px 0 18px}.full-inv-head p{margin:0;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.05em}.full-inv-head h1{margin:0;color:var(--brand);font:800 25px var(--mono)}.full-inv-head .energy-btn{margin-left:auto}.full-flow{display:grid;grid-template-columns:1fr 70px 1.1fr 70px 1fr;position:relative;align-items:center;gap:0;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#f8fcf6,#eaf8e9);box-shadow:var(--shadow)}.full-flow-node{padding:20px;border:1px solid #cce5cf;border-radius:18px;background:#fff}.full-flow-node span,.full-flow-node small{display:block;color:var(--muted);font-size:12px}.full-flow-node b{display:block;color:#16834f;font-size:26px}.full-flow-line{height:10px;background:linear-gradient(90deg,#b9e78f,#18a35f,#b9e78f);background-size:200% 100%;animation:flow 2s linear infinite}.full-flow-line.rev{animation-direction:reverse}.full-flow-core{padding:28px 8px;border:11px solid #249561;border-radius:50%;aspect-ratio:1;display:grid;place-content:center;text-align:center;background:#fff;box-shadow:0 0 0 8px #dff3df}.full-flow-core span,.full-flow-core small{font-size:12px;color:var(--muted)}.full-flow-core b{color:var(--brand);font-size:27px}.full-flow-sub{grid-column:1/-1;display:flex;justify-content:center;gap:13px;margin-top:14px}.full-flow-sub span{padding:8px 13px;border-radius:999px;background:#fff;color:var(--muted);font-size:13px}.full-flow-sub b{color:var(--brand)}.full-details{display:grid;gap:15px}.full-section{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;box-shadow:var(--shadow)}.full-section h2{margin:0 0 13px;color:var(--brand);font-size:18px}.full-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.full-tile{padding:11px;border-radius:11px;background:var(--surface)}.full-tile span{display:block;color:var(--muted);font-size:11px}.full-tile b{display:block;margin-top:2px;color:var(--brand);font-size:17px}.full-tile small{font-size:11px;font-weight:600}
@media(max-width:820px){.full-flow{grid-template-columns:1fr 1fr;gap:10px}.full-flow-line{display:none}.full-flow-core{grid-column:1/-1;justify-self:center;width:160px}.full-tiles{grid-template-columns:repeat(3,1fr)}}@media(max-width:540px){.compact-flow{grid-template-columns:1fr 24px 86px 24px 1fr}.compact-inv b{font-size:14px}.compact-bottom{font-size:11px}.compact-bottom span:last-child{display:none}.full-inv-head{flex-wrap:wrap}.full-inv-head .energy-btn{margin-left:0}.full-tiles{grid-template-columns:repeat(2,1fr)}.full-flow{padding:15px}.full-flow-node{padding:13px}.full-flow-node b{font-size:21px}}

.pack-line{grid-template-columns:minmax(0,1fr) 74px;column-gap:9px;row-gap:7px;min-width:0}
.pack-line>span:first-child{min-width:0;display:flex;align-items:center}
.pack-line>span:first-child b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack-line .soc-track{display:none}
.pack-battery{position:relative;display:grid;place-items:center;justify-self:center;width:74px;height:24px;border:2px solid #cfdcd2;border-radius:6px;background:#f5faf3;box-sizing:border-box;overflow:visible;font-size:11px;font-weight:900;color:#143526;font-variant-numeric:tabular-nums}
.pack-battery:before{content:"";position:absolute;left:2px;top:2px;bottom:2px;width:calc(var(--soc) - 4px);min-width:4px;max-width:calc(100% - 4px);border-radius:3px;background:#269b63}
.pack-battery:after{content:"";position:absolute;right:-7px;top:6px;width:5px;height:10px;border-radius:0 3px 3px 0;background:#cfdcd2}
.pack-battery b{position:relative;z-index:1;line-height:1;   -webkit-text-stroke: 0.2px #fff; color:#000;}
.pack-battery.warn:before{background:#d59b1d}
.pack-battery.low:before{background:#c8452f}
.pack-battery.unknown:before{display:none}
.pack-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;justify-content:stretch;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.pack-metrics i{display:inline-flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;padding:2px 3px;border-radius:6px;background:#f8fbf7;font-style:normal;font-weight:800;text-align:right;box-sizing:border-box}
.pack-metrics i b{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:4px;color:#fff;font-size:8px;line-height:1;font-family:var(--mono);flex:0 0 14px}
.pack-metrics i span{min-width:0;letter-spacing:0}
.pack-metrics .metric-v{color:#2277a5}.pack-metrics .metric-v b{background:#2277a5}
.pack-metrics .metric-a.in{color:#16895f}.pack-metrics .metric-a.out{color:#c07d0b}.pack-metrics .metric-a.idle{color:#7b8b80}
.pack-metrics .metric-a.in b{background:#16895f}.pack-metrics .metric-a.out b{background:#c07d0b}.pack-metrics .metric-a.idle b{background:#7b8b80}
.pack-metrics .metric-w.in{color:#2d6a4f}.pack-metrics .metric-w.out{color:#7a5a2a}.pack-metrics .metric-w.idle{color:var(--muted)}
.pack-metrics .metric-w.in b{background:#2d6a4f}.pack-metrics .metric-w.out b{background:#7a5a2a}.pack-metrics .metric-w.idle b{background:var(--muted)}
.monitor-card-head{min-width:0}.monitor-card-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.monitor-card-head small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pack-metrics i{justify-content:center;gap:4px;overflow:hidden}.pack-metrics i span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:540px){.pack-line{grid-template-columns:minmax(0,1fr) 78px}.pack-battery{width:78px}}

/* Animated history surfaces shared by the home page and device detail pages. */
.home-energy-card{position:relative;overflow:hidden;margin:18px 0 28px;padding:24px 26px 16px;border:1px solid #153d35;border-radius:21px;background:radial-gradient(680px 260px at 84% -20%,rgba(168,239,104,.23),transparent 65%),linear-gradient(132deg,#073a32,#0d6650 58%,#10704f);color:#effff5;box-shadow:0 16px 30px rgba(7,67,50,.18)}
.home-energy-card:after{content:"";position:absolute;inset:auto -9% -65% auto;width:290px;height:290px;border:1px solid rgba(202,255,183,.18);border-radius:50%;box-shadow:0 0 0 38px rgba(202,255,183,.05),0 0 0 76px rgba(202,255,183,.035);animation:energy-orbit 18s linear infinite;pointer-events:none}.home-energy-card>*{position:relative;z-index:1}
.home-energy-head{display:flex;justify-content:space-between;gap:22px;align-items:start}.home-energy-head .energy-kicker{background:rgba(232,255,234,.12);border:1px solid rgba(232,255,234,.18);color:#d7ffd0}.home-energy-head h2{margin:10px 0 3px;color:#fff;font-size:23px}.home-energy-head p{margin:0;color:rgba(235,255,241,.7);font-size:13px}.home-energy-total{text-align:right;white-space:nowrap}.home-energy-total span,.home-energy-total small{display:block;color:rgba(235,255,241,.67);font-size:11px}.home-energy-total b{display:block;margin:2px 0;color:#c7ff83;font-size:31px;line-height:1.05;font-variant-numeric:tabular-nums}.home-energy-legend,.home-energy-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:rgba(241,255,245,.72);font-size:11.5px}.home-energy-legend{margin:18px 0 5px}.home-energy-legend>span:last-child{margin-left:auto}.legend-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;vertical-align:middle}.legend-dot.total{background:#fff;box-shadow:0 0 10px #fff}.legend-dot.solar{background:#b8f36e;box-shadow:0 0 10px #b8f36e}.home-energy-chart-wrap{position:relative;height:205px}.home-energy-chart-wrap canvas{display:block;width:100%;height:100%;border:0;border-radius:0;background:transparent}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(241,255,245,.75);font-size:13px}.home-energy-foot{justify-content:space-between;padding-top:10px;border-top:1px solid rgba(235,255,241,.16)}.home-energy-foot span:last-child{color:#c6fba8}
.home-energy-snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 3px}.home-energy-snapshot>div{padding:10px 12px;border:1px solid rgba(230,255,234,.15);border-radius:12px;background:rgba(4,51,42,.18)}.home-energy-snapshot span,.home-energy-snapshot small{display:block;color:rgba(235,255,241,.66);font-size:10.5px}.home-energy-snapshot b{display:block;margin:2px 0;color:#fff;font-size:19px;line-height:1.12;font-variant-numeric:tabular-nums}.home-energy-snapshot>div:first-child b{color:#c7ff83}.home-energy-snapshot>div:last-child b{color:#ffd77a}
.leader-hall{margin:0 0 28px}.leader-hall-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 2px 12px}.leader-hall-head h2{margin:0;color:var(--brand);font-size:22px}.leader-hall-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.leader-hall-link{color:var(--brand2);font-size:12px;font-weight:800;white-space:nowrap}.leader-hall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:11px}.leader-card{min-width:0;padding:15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#f7fcf7);box-shadow:0 7px 17px rgba(18,48,31,.055)}.leader-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.leader-card-head h3{margin:0;color:var(--brand);font-size:14px;line-height:1.25}.leader-card-head a{color:inherit;text-decoration:none}.leader-card-head a:hover{color:var(--brand2)}.leader-card-head span{flex:none;padding:4px 7px;border-radius:999px;background:#e9f6e9;color:#47855d;font-size:10px;font-weight:800}.leader-list{display:grid;gap:5px;margin:0;padding:0;list-style:none}.leader-list li{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:31px;padding:5px 0;border-top:1px solid #e6eee7}.leader-list li:first-child{border-top:0}.leader-rank{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#ecf1ec;color:#56705f;font-size:11px;font-weight:900}.leader-list li:nth-child(1) .leader-rank{background:#ffc64a;color:#533500}.leader-list li:nth-child(2) .leader-rank{background:#dce4df;color:#45564b}.leader-list li:nth-child(3) .leader-rank{background:#e3ad75;color:#663e1d}.leader-device{min-width:0;color:#16834f;font:800 12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-device:hover{text-decoration:underline}.leader-pack{display:block;margin-top:1px;color:var(--muted);font:600 10px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-value{color:var(--ink);font-size:12px;font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums}.leader-none{margin:0;padding:14px 0 4px;color:var(--muted);font-size:12px;text-align:center}
.trend-card{position:relative;overflow:hidden;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.trend-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.trend-card h2{margin:0;color:var(--brand);font-size:18px}.trend-card p{margin:3px 0 0;color:var(--muted);font-size:12px}.trend-controls{display:flex;gap:7px;flex-wrap:wrap}.trend-canvas-wrap{position:relative;height:220px}.trend-canvas-wrap canvas{display:block;width:100%;height:100%;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,#fcfefb,#f5faf4)}.trend-legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:11.5px}.trend-legend i{display:inline-block;width:18px;height:3px;margin-right:4px;border-radius:9px;vertical-align:middle}.trend-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}.chart-empty[hidden],.trend-empty[hidden]{display:none}.trend-note{margin-top:9px;color:var(--muted);font-size:11px}
@keyframes energy-orbit{to{transform:rotate(360deg)}}
@media(max-width:640px){.home-energy-card{padding:19px 17px 14px;border-radius:18px}.home-energy-head{display:block}.home-energy-total{display:flex;align-items:baseline;gap:7px;margin-top:13px;text-align:left}.home-energy-total span,.home-energy-total small{display:inline}.home-energy-total b{font-size:27px}.home-energy-snapshot{grid-template-columns:1fr;gap:6px}.home-energy-snapshot>div{display:grid;grid-template-columns:1fr auto;align-items:center}.home-energy-snapshot small{grid-column:1}.home-energy-legend>span:last-child{width:100%;margin-left:0}.home-energy-chart-wrap{height:180px}.leader-hall-head{align-items:start;flex-direction:column}.leader-hall-grid{grid-template-columns:1fr}.leader-card{padding:13px}.trend-card-head{align-items:start;flex-direction:column}.trend-canvas-wrap{height:185px}}