:root{
  --bg:#0b1220; --bg2:#0f1d36; --panel:#111f3a; --panel2:#0e1a30;
  --card:#13223f; --hover-soft:#16294a; --line:#1e3357;
  --blue:#1677ff; --blue2:#4096ff; --cyan:#00e8ff; --green:#22c55e; --green2:#16a34a;
  --pink:#f472b6; --amber:#f59e0b; --red:#ef4444; --purple:#a855f7;
  --text:#e8f1ff; --muted:#94a3b8; --dim:#64748b;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(22,119,255,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(0,232,255,.12), transparent 55%),
    linear-gradient(165deg,#0b1a33 0%,#0f2a52 55%,#0b1426 100%);
  background-attachment:fixed; min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
a{text-decoration:none;color:var(--blue2)}
.text-muted{color:var(--muted)!important}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(10px);
}
/* 顶栏 */
.nav-wrap{position:sticky;top:0;z-index:1000;background:rgba(9,18,36,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navbar{padding:.6rem 0}
.navbar-brand{font-weight:800;letter-spacing:.5px;color:#fff!important;display:flex;align-items:center;gap:.55rem}
.logo-dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;color:#061226;font-weight:900;box-shadow:0 0 18px rgba(0,232,255,.5)}
.nav-link{color:var(--muted)!important;font-weight:600;border-radius:10px;padding:.4rem .8rem!important}
.nav-link:hover{color:#fff!important;background:rgba(255,255,255,.06)}
.nav-link.active{color:#fff!important;background:linear-gradient(135deg,var(--blue),var(--blue2))}
.btn{border-radius:11px;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));border:0;box-shadow:0 6px 20px rgba(22,119,255,.4)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-success{background:linear-gradient(135deg,var(--green2),var(--green));border:0}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.form-control,.form-select{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:11px}
.form-control:focus,.form-select:focus{background:var(--panel2);color:var(--text);border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(22,119,255,.25)}
.form-control::placeholder{color:var(--dim)}
.form-select option{background:var(--panel)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
.page{padding:1.4rem 0 3rem}
/* HUD */
.hud{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%, #16315f 0%, #0c1830 60%, #0a1428 100%);padding:1.6rem}
.hud .ring{position:absolute;inset:-40%;background:conic-gradient(from 0deg, transparent 0 70%, rgba(0,232,255,.15) 80%, transparent 90%);animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.big-speed{font-variant-numeric:tabular-nums;font-weight:800;line-height:1;
  background:linear-gradient(180deg,#fff,#8fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem}
.metric .lab{color:var(--muted);font-size:.8rem}
.metric .val{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.15rem}
.progress{background:rgba(255,255,255,.08);border-radius:99px;height:10px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,var(--cyan),var(--blue));box-shadow:0 0 12px rgba(0,232,255,.6)}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;padding:.25rem .6rem;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted)}
.chip.ok{color:#9af5c0;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.chip.bad{color:#ffb3b3;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}
.chip.warn{color:#ffd99a;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.spark{height:56px;width:100%;display:block}
table{color:var(--text)}
.table-dark2{--bs-table-bg:transparent;--bs-table-color:var(--text)}
.login-wrap{max-width:420px;margin:2.5rem auto}
.log-line{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--muted);max-height:180px;overflow:auto}
.list-item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:0}
.list-item:hover{background:rgba(255,255,255,.03)}
.footer{border-top:1px solid var(--line);color:var(--dim);padding:1.6rem 0;font-size:.86rem}
.footer a{color:var(--muted)}
.rank-1{color:#ffd76a}.rank-2{color:#d8e2f0}.rank-3{color:#e8a87c}
.badge-soft{background:rgba(22,119,255,.15);color:#9cc6ff;border:1px solid rgba(22,119,255,.3)}
@media(max-width:576px){.hud{padding:1.1rem}.big-speed{font-size:3.1rem!important}}