:root {
    --bg:#0b0e14; --card:#131826; --rule:#232a3d; --text:#e6e9f2;
    --muted:#8b93a8; --dim:#5a6175; --up:#34d399; --down:#f87171;
    --amber:#fbbf24; --blue:#60a5fa; --accent:#7c8cf8;
  }
  * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  body { background:var(--bg); color:var(--text);
         font:15px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
         padding:max(env(safe-area-inset-top),12px) 12px 32px; max-width:760px; margin:0 auto; }
  h1 { font-size:17px; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
  .live { font-size:11px; font-weight:700; letter-spacing:.6px; padding:2px 8px;
          border-radius:99px; background:rgba(52,211,153,.15); color:var(--up); }
  .live.stale { background:rgba(251,191,36,.15); color:var(--amber); }
  .live.dead  { background:rgba(248,113,113,.15); color:var(--down); }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:14px 0; }
  .kpi { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:10px 12px; }
  .kpi .l { font-size:10px; font-weight:700; letter-spacing:.7px; color:var(--muted); text-transform:uppercase; }
  .kpi .v { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
  .card { background:var(--card); border:1px solid var(--rule); border-radius:12px;
          padding:12px; margin:10px 0; }
  .card h2 { font-size:11px; font-weight:700; letter-spacing:.7px; color:var(--muted);
             text-transform:uppercase; margin-bottom:8px; }
  .row { display:flex; align-items:baseline; gap:8px; padding:6px 0;
         border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums; }
  .row:last-child { border-bottom:0; }
  .sym { font-weight:600; width:84px; }
  .muted { color:var(--muted); } .dim { color:var(--dim); }
  .up { color:var(--up); } .down { color:var(--down); }
  .chip { font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 6px;
          border-radius:99px; }
  .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .banner { border-radius:12px; padding:10px 12px; margin:10px 0; font-weight:600;
            background:rgba(251,191,36,.12); color:var(--amber); }
  .banner.red { background:rgba(248,113,113,.12); color:var(--down); }
  #login { margin-top:18vh; text-align:center; }
  #login input { width:100%; max-width:340px; font-size:16px; padding:12px 14px;
                 border-radius:10px; border:1px solid var(--rule);
                 background:var(--card); color:var(--text); outline:none; }
  #login button { margin-top:10px; width:100%; max-width:340px; font-size:16px; font-weight:600;
                  padding:12px; border-radius:10px; border:0; background:var(--accent);
                  color:#fff; }
  #login p { color:var(--muted); margin-top:12px; font-size:13px; }
  svg { display:block; width:100%; height:120px; }
  footer { color:var(--dim); font-size:11px; text-align:center; margin-top:18px; }