:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1e222b; --line: #2a2f3a;
  --text: #e8eaed; --muted: #9aa3b2; --accent: #ff8a3d;
  --ok: #34d399; --ok-bg: rgba(52,211,153,.12);
  --warn: #fbbf24; --warn-bg: rgba(251,191,36,.12);
  --err: #f87171; --err-bg: rgba(248,113,113,.12);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 18px; }
a { color: var(--accent); text-decoration: none; }

.topbar { padding: 26px 0 22px; border-bottom: 1px solid var(--line);
  background: radial-gradient(800px 220px at 30% -40px, rgba(255,138,61,.10), transparent 70%); }
.back { font-size: 13px; color: var(--muted); }
.topbar h1 { margin: 10px 0 6px; font-size: 24px; }
.topbar .sub { margin: 0; color: var(--muted); max-width: 680px; }

/* 概览 */
.overview { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin: 22px 0; }
.score-card { display: flex; align-items: center; gap: 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.score-ring { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--panel2);
  --pct: 0; --ring: var(--muted);
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--panel2) 0); }
.score-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
.score-num { position: relative; z-index: 1; font-size: 32px; font-weight: 800; line-height: 1; }
.score-meta { min-width: 0; }
.score-badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  background: var(--panel2); color: var(--muted); }
.score-badge.ok { color: var(--ok); background: var(--ok-bg); }
.score-badge.warn { color: var(--warn); background: var(--warn-bg); }
.score-badge.err { color: var(--err); background: var(--err-bg); }
.score-verdict { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.ip-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; }
.ip-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ip-row:last-child { border-bottom: 0; }
.ip-label { color: var(--muted); font-size: 13.5px; flex: none; }
.ip-val { text-align: right; font-weight: 600; word-break: break-all; }
.ip-val#ovIp { font-family: ui-monospace, Consolas, monospace; color: var(--accent); }

/* 通用面板 */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 16px 0; }
.panel h2 { margin: 0 0 4px; font-size: 17px; }
.hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.loading { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* 风险检测 */
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px;
  background: var(--panel2); border: 1px solid var(--line); }
.chk .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chk.pass .dot { background: var(--ok); }
.chk.fail .dot { background: var(--err); }
.chk.unk .dot { background: var(--muted); }
.chk .k { font-size: 14px; }
.chk .v { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.chk.pass .v { color: var(--ok); }
.chk.fail .v { color: var(--err); }
.chk.unk .v { color: var(--muted); }

/* 连通 & 延迟 */
.reach { display: flex; flex-direction: column; gap: 8px; }
.reach .r { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  background: var(--panel2); border: 1px solid var(--line); }
.reach .r .name { font-weight: 600; }
.reach .r .host { color: var(--muted); font-size: 12.5px; }
.reach .r .res { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.reach .r.ok .res { color: var(--ok); }
.reach .r.slow .res { color: var(--warn); }
.reach .r.bad .res { color: var(--err); }
.reach .r.pending .res { color: var(--muted); }

/* 泄漏 + DNS（共用样式） */
.leak, .dns { display: flex; flex-direction: column; gap: 8px; }
.leak .lk, .dns .lk { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  background: var(--panel2); border: 1px solid var(--line); }
.leak .lk .k, .dns .lk .k { color: var(--muted); font-size: 13.5px; }
.leak .lk .v, .dns .lk .v { margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-weight: 600; word-break: break-all; }
.leak .note, .dns .note { font-size: 13px; padding: 10px 14px; border-radius: 11px; }
.leak .note.ok, .dns .note.ok { color: var(--ok); background: var(--ok-bg); }
.leak .note.warn, .dns .note.warn { color: var(--warn); background: var(--warn-bg); }

/* 指纹 */
.fp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.fp .f { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fp .f .k { color: var(--muted); font-size: 13.5px; flex: none; }
.fp .f .v { text-align: right; font-weight: 600; word-break: break-all; }

.foot { margin: 22px auto 40px; color: #6f7889; font-size: 12.5px; }
.foot .disclaimer { color: #545b68; }

@media (max-width: 720px) {
  .overview { grid-template-columns: 1fr; }
  .checks, .fp { grid-template-columns: 1fr; }
}