:root{
  --bg:#0b1420; --card:#0f1b2a; --text:#e8eef7; --muted:#9fb2c7;
  --border:rgba(255,255,255,.08);
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --grad1:#34a0ff; --grad2:#18e0c6;
}
*{box-sizing:border-box} .card{max-width:640px;margin:16px auto;padding:14px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);border:1px solid var(--border)}
.title{margin:4px 0 4px;font-size:22px;line-height:1.2;font-weight:800;color:var(--text)}
.note{margin:0 0 8px;color:var(--muted);font-size:12px}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 10px}
.metric{border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;background:rgba(255,255,255,.02)}
.label{color:var(--muted);font-weight:700;margin-bottom:2px}
.val{font-size:24px;font-weight:900;color:var(--text);min-height:30px}
.unit{font-size:10px;color:var(--muted)}
.btn{display:inline-block;border:none;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#001b2b}
.btn:disabled{opacity:.6;cursor:not-allowed}
.err{margin-top:8px;color:#ff6b6b;font-weight:700;font-size:12px}
.foot{margin:6px 0 0;color:var(--muted);font-size:10px}
@media (max-width:520px){ .card{margin:10px;padding:12px} .title{font-size:20px} .val{font-size:22px} }
body{background:var(--bg)}