:root{
  --bg:#0b0e14; --panel:#141a24; --card:#171d26; --border:#28313f; --track:#222a37;
  --text:#e9eef4; --muted:#8a97a8; --faint:#5c6675;
  --b1:#388bfd; --b2:#17a99a;                 /* battery series (CVD-validated) */
  --green:#3dbd5a; --amber:#e8a532; --red:#f6534a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.4;}
.wrap{max-width:1040px;margin:0 auto;padding:20px 16px 40px;}
h1{font-size:22px;font-weight:600;margin:0;}
h2{font-size:15px;font-weight:600;margin:0;}
.sub{color:var(--muted);font-size:13px;}

.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);}
.dot.ok{background:var(--green);} .dot.stale{background:var(--amber);} .dot.off{background:var(--red);}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.tile .k-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px;}
.tile .k-val{font-size:28px;font-weight:600;margin-top:4px;letter-spacing:-.5px;}
.tile .k-sub{color:var(--muted);font-size:12px;margin-top:2px;}

/* battery cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:18px;}
.bcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px 18px;position:relative;overflow:hidden;}
.bcard .accent{position:absolute;top:0;left:0;right:0;height:4px;}
.bcard h3{margin:4px 0 10px;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.bcard h3 .link{width:9px;height:9px;border-radius:50%;background:var(--muted);}
.bcard-main{display:flex;align-items:center;gap:18px;}
.ring{width:118px;height:118px;border-radius:50%;position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.ring .hole{position:absolute;inset:15px;border-radius:50%;background:var(--card);}
.ring .pct{position:relative;font-size:34px;font-weight:700;}
.ring .pct small{font-size:14px;font-weight:500;color:var(--muted);vertical-align:super;}
.bstats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}
.bstat .s-l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.bstat .s-v{font-size:18px;font-weight:600;}
.bcard-foot{display:flex;justify-content:space-between;margin-top:12px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);padding-top:10px;}

/* panels */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:18px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tabs.metrics{margin-bottom:12px;}
.tabs button{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;
  padding:6px 12px;font-size:13px;cursor:pointer;transition:background .12s,color .12s;}
.tabs button:hover{color:var(--text);border-color:var(--faint);}
.tabs button.active{background:var(--track);color:var(--text);border-color:var(--faint);}
.chart-box{height:320px;position:relative;}

.energy{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.energy .tile{background:var(--card);}

footer{color:var(--faint);font-size:12px;text-align:center;margin-top:8px;}

@media(max-width:520px){
  .k-val{font-size:24px;} .bcard-main{gap:12px;} .ring{width:104px;height:104px;}
}