:root{
  --bg:#080b12;
  --bg2:#0d121c;
  --panel:#111826;
  --line:#1e2942;
  --txt:#e8edf7;
  --dim:#7d8aa5;
  --accent:#38bdf8;
  --accent2:#6366f1;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1100px 620px at 50% -280px, #16233d 0%, transparent 62%),
    radial-gradient(760px 500px at 92% 108%, #1a1740 0%, transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue","Microsoft YaHei",system-ui,sans-serif;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(56,189,248,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(56,189,248,.03) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 78%);
}

.wrap{
  position:relative;z-index:1;
  width:100%;max-width:660px;margin:auto;
  padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 12px rgba(56,189,248,.45))}
.brand-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-t b{font-size:16.5px;font-weight:650;letter-spacing:.3px}
.brand-t span{font-size:10.5px;color:var(--dim);letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.status-pill{
  display:flex;align-items:center;gap:6px;flex:none;
  padding:6px 11px 6px 9px;border-radius:999px;
  background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.26);
  font-size:11.5px;color:#7ee0a0;letter-spacing:.3px;
  transition:background .3s,border-color .3s,color .3s;
}
.status-pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:bp 2.2s infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.35}}
.status-pill.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#f8c877}
.status-pill.warn i{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.status-pill.bad{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
.status-pill.bad i{background:var(--bad);box-shadow:0 0 8px var(--bad)}

/* ---------- gauge ---------- */
.gauge-box{position:relative;width:min(78vw,300px);aspect-ratio:1;margin:0 auto 22px}
.gauge{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.gauge .track{fill:none;stroke:#1b2740;stroke-width:9}
.gauge .bar{
  fill:none;stroke:url(#g);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:653.45;stroke-dashoffset:653.45;
  transition:stroke-dashoffset .28s cubic-bezier(.4,0,.2,1),stroke .4s;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.55));
}
.gauge-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  pointer-events:none;
}
.val{
  font-size:clamp(40px,12.5vw,60px);font-weight:250;letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#9dbbd8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.05;
}
.unit{font-size:12px;color:var(--dim);letter-spacing:2.6px;text-transform:uppercase;margin-top:-2px}
.phase{font-size:12px;color:#5f6d88;margin-top:9px;letter-spacing:.4px;text-align:center;padding:0 10px}

/* ---------- button ---------- */
.go{
  display:block;width:100%;max-width:320px;margin:0 auto 26px;
  padding:15px 26px;border:0;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.6px;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  box-shadow:0 8px 26px -8px rgba(56,189,248,.62),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .14s,box-shadow .3s,opacity .3s;
}
.go:active{transform:scale(.975)}
.go:disabled{opacity:.55;cursor:default;box-shadow:none}
.go.busy{background:linear-gradient(135deg,#334155,#1e293b);box-shadow:none}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.card{
  background:linear-gradient(160deg,rgba(20,28,44,.92),rgba(13,18,28,.92));
  border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px 10px;position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.35),transparent);
}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.card-h span{font-size:11.5px;color:var(--dim);letter-spacing:.6px}
.card-h em{
  font-style:normal;font-size:10px;padding:1.5px 6px;border-radius:5px;
  background:rgba(125,138,165,.12);color:var(--dim);letter-spacing:.3px;
  transition:background .3s,color .3s;
}
.card-h em.ok{background:rgba(34,197,94,.14);color:#6ee7a0}
.card-h em.warn{background:rgba(245,158,11,.14);color:#fbbf6b}
.card-h em.bad{background:rgba(239,68,68,.14);color:#fca5a5}
.card-v{display:flex;align-items:baseline;gap:3px}
.card-v b{font-size:25px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.card-v i{font-style:normal;font-size:11px;color:var(--dim)}
.spark{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:7px}
.spark i{flex:1;min-width:2px;background:rgba(56,189,248,.28);border-radius:1px;height:20%;transition:height .3s,background .3s}
.spark i.hi{background:linear-gradient(180deg,#38bdf8,#6366f1)}

/* ---------- panel ---------- */
.panel{
  background:linear-gradient(160deg,rgba(20,28,44,.9),rgba(13,18,28,.9));
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px;
  animation:slideIn .35s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.panel-h{
  padding:11px 14px;font-size:12px;color:var(--dim);letter-spacing:.8px;
  border-bottom:1px solid var(--line);background:rgba(56,189,248,.03);
}
.panel-b{padding:4px 0}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;font-size:12.5px;
}
.row+.row{border-top:1px solid rgba(30,41,66,.55)}
.row span{color:var(--dim)}
.row b{font-weight:500;font-variant-numeric:tabular-nums}
.row b.ok{color:#6ee7a0}
.row b.warn{color:#fbbf6b}
.row b.bad{color:#fca5a5}

/* ---------- footer ---------- */
.ft{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:#4d5a73;letter-spacing:.3px;padding-top:6px;flex-wrap:wrap;
}
.ft .dot{opacity:.4}

/* ---------- responsive ---------- */
@media (min-width:620px){
  .wrap{padding-top:34px}
  .cards{grid-template-columns:repeat(4,1fr);gap:11px}
  .gauge-box{width:320px;margin-bottom:26px}
}
@media (max-width:360px){
  .cards{grid-template-columns:1fr}
  .card-v b{font-size:23px}
  .brand-t span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}