*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background-color 0.2s ease, color 0.2s ease;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ============ CSS 变量 — 暗色（默认） ============ */
:root{
  --bg-deep:#141210;
  --bg-surface:#1b1816;
  --bg-card:#221f1c;
  --bg-card-hover:#2a2622;
  --bg-input:#1e1b18;
  --bg-code:#161412;
  --border-subtle:#2e2a25;
  --border-active:#5c4a30;
  --text-primary:#e6ded5;
  --text-secondary:#9a9080;
  --text-muted:#6b6358;
  --text-inverse:#141210;
  --amber:#d49a3e;
  --amber-glow:#ecc670;
  --teal:#5c9e9e;
  --teal-glow:#7ec5c5;
  --green:#6b9e5c;
  --green-glow:#89c478;
  --orange:#d4853d;
  --red:#c4554d;
  --red-glow:#e8736b;
  --gray-dim:#4a4540;
  --score-green:#6b9e5c;
  --score-lime:#8ab84a;
  --score-yellow:#c4a43a;
  --score-orange:#d4853d;
  --score-red:#c4554d;

  --font-display:'Bricolage Grotesque','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Atkinson Hyperlegible','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono','Cascadia Code',monospace;

  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:16px;
  --radius-full:50%;
}

/* ============ CSS 变量 — 亮色 ============ */
[data-theme="light"]{
  --bg-deep:#f5f2ed;
  --bg-surface:#ede8e2;
  --bg-card:#ffffff;
  --bg-card-hover:#f8f5f1;
  --bg-input:#faf8f5;
  --bg-code:#f3f0eb;
  --border-subtle:#d9d3c9;
  --border-active:#c49a3e;
  --text-primary:#2b2520;
  --text-secondary:#6b6358;
  --text-muted:#a3988a;
  --text-inverse:#faf8f5;
  --amber:#b8852a;
  --amber-glow:#d49a3e;
  --teal:#4a8787;
  --teal-glow:#5c9e9e;
  --green:#5a8a4a;
  --green-glow:#6b9e5c;
  --orange:#c47830;
  --red:#b8443d;
  --red-glow:#c4554d;
  --gray-dim:#b0a898;
  --score-green:#5a8a4a;
  --score-lime:#7aa840;
  --score-yellow:#b89430;
  --score-orange:#c47830;
  --score-red:#b8443d;
}

/* ============ Nav ============ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle);
  backdrop-filter:blur(8px);
}
.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  height:56px;
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--text-primary);
  white-space:nowrap;
  letter-spacing:-0.01em;
}
.nav-logo .dot{ color:var(--amber); }
.nav-links{
  display:flex;
  gap:2px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-link{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-secondary);
  padding:8px 11px;
  border-radius:var(--radius-sm);
  position:relative;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.15s ease;
}
.nav-link:hover{ color:var(--text-primary); }
.nav-link.active{ color:var(--text-primary); }
.nav-link.active::after{
  content:'';
  position:absolute;
  left:11px; right:11px; bottom:1px;
  height:2px;
  background:var(--amber);
  border-radius:1px;
}
.nav-actions{ display:flex; gap:4px; }
.icon-btn{
  width:32px; height:32px;
  border-radius:var(--radius-md);
  background:transparent;
  border:none;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover{ background:var(--bg-card-hover); color:var(--text-primary); }
.icon-btn.is-active{ background:rgba(212,154,62,0.15); color:var(--amber); }

/* ============ Main ============ */
main{
  max-width:1200px;
  margin:0 auto;
  padding:32px 24px 80px;
}
.page{ display:none; }
.page.active{ display:block; }

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.page-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:-0.01em;
  color:var(--text-primary);
  margin-bottom:6px;
}
.page-sub{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:0;
}

/* ============ Section ============ */
.section{ margin-bottom:36px; }
.section-label{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:12px;
  padding-left:19px;
}

.section-divider{
  height:1px;
  background:var(--border-subtle);
  margin:36px 0;
}

/* ============ IP 双列卡片 ============ */
.ip-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:640px){ .ip-pair{ grid-template-columns:1fr; } }
.ip-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:18px;
  position:relative;
  transition:border-color 0.2s ease;
}
.ip-card:hover{ border-color:var(--border-active); }
.ip-card.primary{ border-left:2px solid var(--amber); }
.ip-card-head{ display:flex; align-items:center; gap:14px; }
.ip-card-ring{ cursor:pointer; flex-shrink:0; }
.ip-addr-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ip-addr{
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--text-primary);
  letter-spacing:-0.01em;
  word-break:break-all;
}
.ip-geo{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.ip-type-row{ display:flex; gap:6px; align-items:center; }
.flag{ font-size:15px; }

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-safe{ background:rgba(107,158,92,0.16); color:var(--green); }
.badge-warn{ background:rgba(212,133,61,0.16); color:var(--orange); }
.badge-danger{ background:rgba(196,85,77,0.16); color:var(--red); }
.badge-info{ background:rgba(92,158,158,0.16); color:var(--teal); }
.badge-neutral{ background:rgba(154,144,128,0.12); color:var(--text-secondary); }

/* 隐藏 IP */
.hidden-ip{ filter:blur(6px); user-select:none; }

/* 骨架屏 */
.skeleton-block{
  background:var(--bg-card-hover);
  border-radius:var(--radius-sm);
  animation:skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-ring{ width:56px; height:56px; border-radius:50%; }
.skeleton-line{ height:12px; margin-bottom:6px; }
.skeleton-line:last-child{ margin-bottom:0; width:60%; }
@keyframes skeleton-pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:0.6; }
}

/* 空状态 */
.empty-state{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
  padding:14px 0;
}

/* /ippurity 查询加载动画 */
.ippurity-loading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0 8px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-secondary);
}
.ippurity-loading .load-dots{ display:flex; gap:5px; }
.ippurity-loading .load-dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--amber);
  animation:ippurity-bounce 1.4s ease-in-out infinite;
}
.ippurity-loading .load-dots span:nth-child(2){ animation-delay:0.16s; }
.ippurity-loading .load-dots span:nth-child(3){ animation-delay:0.32s; }
@keyframes ippurity-bounce{
  0%,80%,100%{ transform:scale(0.5); opacity:0.4; }
  40%{ transform:scale(1); opacity:1; }
}

/* ============ /dns 页 ============ */
.dns-conclusion{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:var(--radius-lg);
  margin:18px 0;
  font-family:var(--font-body);
  font-size:13.5px;
  border-left:3px solid;
}
.dns-conclusion-ok{
  background:rgba(107,158,92,0.10);
  border-color:var(--green);
  color:var(--green);
}
.dns-conclusion-leak{
  background:rgba(196,85,77,0.10);
  border-color:var(--red);
  color:var(--red);
}
.dns-row-unexpected{
  box-shadow:inset 2px 0 var(--red);
}

/* ============ /fingerprint 页 ============ */
.fingerprint-hash-card{
  background:var(--bg-code);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  position:relative;
  margin-bottom:16px;
}
.fingerprint-hash-display{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--teal);
  word-break:break-all;
  letter-spacing:0.05em;
  line-height:1.6;
}
.fingerprint-hash-label{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--text-muted);
  margin-top:10px;
}
.fingerprint-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:260px 260px auto 180px;
  gap:14px;
  margin-bottom:14px;
}
.fp-screen{ grid-column:1; grid-row:1; }
.fp-system{ grid-column:2; grid-row:1; }
.fp-hardware{ grid-column:1; grid-row:2; }
.fp-storage{ grid-column:2; grid-row:2; }
.fp-fonts{ grid-column:3; grid-row:1/3; height:1070px; overflow-y:visible; }
.fp-canvas{ grid-column:1; grid-row:4; overflow-y:auto; }
.fp-audio{ grid-column:2; grid-row:4; overflow-y:auto; }
@media (max-width:800px){
  .fingerprint-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto; }
  .fp-screen{ grid-column:1; grid-row:1; }
  .fp-system{ grid-column:2; grid-row:1; }
  .fp-hardware{ grid-column:1; grid-row:2; }
  .fp-storage{ grid-column:2; grid-row:2; }
  .fp-canvas{ grid-column:1; grid-row:3; overflow-y:visible; }
  .fp-audio{ grid-column:2; grid-row:3; overflow-y:visible; }
  .fp-fonts{ grid-column:1/3; grid-row:4; overflow-y:visible; }
}
@media (max-width:520px){
  .fingerprint-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto auto auto; }
  .fp-screen{ grid-column:1; grid-row:1; }
  .fp-system{ grid-column:1; grid-row:2; }
  .fp-hardware{ grid-column:1; grid-row:3; }
  .fp-storage{ grid-column:1; grid-row:4; }
  .fp-canvas{ grid-column:1; grid-row:5; overflow-y:visible; }
  .fp-audio{ grid-column:1; grid-row:6; overflow-y:visible; }
  .fp-fonts{ grid-column:1; grid-row:7; overflow-y:visible; }
}
.hash-trunc{cursor:pointer;color:var(--teal);opacity:0.8;}
.hash-trunc:hover{opacity:1;}
.hash-full{display:none;margin-top:4px;font-size:11px;word-break:break-all;}
.hash-full.open{display:block;}
.font-installed{color:var(--green);}
.font-missing{color:var(--text-muted);}
.canvas-preview{
  width:240px;height:auto;border-radius:var(--radius-sm);flex-shrink:0;
  border:1px solid var(--border-subtle);
}
.audio-waveform{
  width:240px;height:36px;border-radius:var(--radius-sm);margin-bottom:4px;
}
@media (max-width:520px){ .fp-ca-wrap{ grid-template-columns:1fr; } }


/* ============ /ping 页 ============ */
.ping-quick-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
#pingSummary{ padding-left:19px; }
.ping-summary{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-secondary);
  padding:14px 4px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  margin:16px 0 8px;
}
.ping-summary .sep{ color:var(--border-subtle); }
.ping-summary b{ font-weight:700; color:var(--text-primary); }
.ping-skel-row td{ padding:9px 12px; }
.ping-skel-row .sk{
  display:inline-block;
  height:12px;
  border-radius:var(--radius-sm);
  background:var(--bg-card-hover);
  animation:skeleton-pulse 1.5s ease-in-out infinite;
}

/* ============ 出口检测 ============ */
.exit-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:6px 18px;
}
.exit-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
  flex-wrap:wrap;
}
.exit-item:last-child{ border-bottom:none; }
.exit-tag{ font-family:var(--font-display); font-size:11px; font-weight:600; color:var(--text-secondary); min-width:90px; }
.exit-ip{ font-family:var(--font-mono); color:var(--text-primary); }
.exit-geo{ font-family:var(--font-body); color:var(--text-muted); margin-left:auto; }

/* ============ 连通性频谱卡片 ============ */
.conn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  margin-bottom:14px;
}
@media (max-width:520px){ .conn-grid{ grid-template-columns:repeat(2,1fr); } }
.conn-cell{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:14px;
  transition:border-color 0.2s ease;
}
.conn-cell:hover{ border-color:var(--border-active); }
.conn-cell-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.conn-cell-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.conn-cell-icon{
  width:24px; height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-input);
  border-radius:var(--radius-sm);
  font-size:13px;
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--text-secondary);
}
.conn-cell-name{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.2;
}
.conn-cell-state{
  font-family:var(--font-body);
  font-size:10.5px;
  color:var(--text-muted);
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:4px;
}
.conn-cell-state .state-dot{
  width:6px; height:6px;
  border-radius:1px;
}
.conn-cell-ms{
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:500;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.conn-spectrum{
  display:flex;
  align-items:flex-end;
  gap:1px;
  height:9px;
  margin-top:8px;
}
.conn-spectrum .tick{
  width:2.5px;
  height:100%;
  border-radius:0.5px;
  flex-shrink:0;
}
.conn-spectrum .tick.last{
  background:var(--bg-input) !important;
  flex:1;
  min-width:18px;
  height:2px;
  margin-bottom:3.5px;
}
.conn-baseline{
  height:4px;
  background:var(--bg-input);
  border-radius:1px;
  margin-top:3px;
  position:relative;
  overflow:hidden;
}
.conn-baseline::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to right, transparent 0 9px, var(--border-subtle) 9px 10px);
  opacity:0.5;
}

/* ============ IP 历史 ============ */
.history-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:6px 18px;
}
.history-head{ display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; flex-wrap:wrap; gap:8px; }
.history-title{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-primary); }
.history-note{ font-family:var(--font-body); font-size:10.5px; color:var(--text-muted); max-width:60%; text-align:right; }
.history-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
  flex-wrap:wrap;
}
.history-item:last-child{ border-bottom:none; }
.history-time{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); min-width:110px; }
.history-ip{ font-family:var(--font-mono); color:var(--text-primary); }
.history-isp{ font-family:var(--font-body); color:var(--text-secondary); margin-left:auto; }
.history-footer{ padding:12px 0; display:flex; gap:8px; justify-content:flex-end; }

/* ============ Button ============ */
.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  padding:10px 20px;
  border-radius:var(--radius-md);
  border:none;
  cursor:pointer;
  transition:background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-primary{ background:var(--amber); color:var(--text-inverse); }
.btn-primary:hover{ background:var(--amber-glow); }
.btn-primary:active{ transform:scale(0.97); }
.btn-secondary{ background:transparent; border:1px solid var(--border-subtle); color:var(--text-secondary); }
.btn-secondary:hover{ background:var(--bg-card-hover); color:var(--text-primary); border-color:var(--border-active); }
.btn-md{ padding:8px 16px; font-size:13px; }
.btn-emoji{
  width:24px;
  height:24px;
  object-fit:cover;
  border-radius:3px;
  vertical-align:middle;
  flex-shrink:0;
}
.btn-lg{ padding:12px 24px; font-size:15px; }
.retest-row{ display:flex; justify-content:flex-end; margin-top:18px; }

/* ============ 占位页 ============ */
.placeholder-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
  text-align:center;
}
.placeholder-card{
  background:var(--bg-card);
  border:1px solid var(--border-active);
  border-radius:var(--radius-xl);
  padding:36px 48px;
  max-width:420px;
}
.placeholder-emoji{ font-size:42px; margin-bottom:12px; }
.placeholder-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--text-primary);
  margin-bottom:6px;
}
.placeholder-sub{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
}
.placeholder-route{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--amber);
  margin-top:14px;
  padding:3px 10px;
  background:rgba(212,154,62,0.1);
  border:1px solid rgba(212,154,62,0.25);
  border-radius:var(--radius-sm);
  display:inline-block;
}

/* ============ 评分环 ============ */
.score-ring{ display:block; }

/* ============ ippurity 页 ============ */
.input-group{
  display:flex;
  gap:0;
  border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);
  overflow:hidden;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
  background:var(--bg-input);
}
.input-group:focus-within{
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(212,154,62,0.15);
}
.input-group input{
  flex:1;
  padding:11px 14px;
  background:transparent;
  border:none;
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-size:14px;
  outline:none;
  min-width:0;
}
.input-group input::placeholder{ color:var(--text-muted); }
.input-group button{
  padding:11px 22px;
  background:var(--amber);
  border:none;
  color:var(--text-inverse);
  font-family:var(--font-body);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color 0.15s ease;
}
.input-group button:hover{ background:var(--amber-glow); }

.summary-bar{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.summary-flag{ font-size:22px; }
.summary-ip{ font-family:var(--font-mono); font-size:16px; color:var(--text-primary); }
.summary-isp{ font-family:var(--font-body); font-size:13px; color:var(--text-secondary); }
.summary-advice{ font-family:var(--font-body); font-size:12.5px; color:var(--text-secondary); margin-left:auto; max-width:42%; }

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }

.info-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:16px 18px;
}
.info-card-title{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border-subtle);
}
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
}
.info-row:last-child{ border-bottom:none; }
.info-row .k{ font-family:var(--font-display); font-size:10.5px; font-weight:600; color:var(--text-muted); letter-spacing:0.04em; white-space:nowrap; }
.info-row .v{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-primary); text-align:right; word-break:break-all; }

.traffic-bars{ display:flex; gap:3px; align-items:flex-end; height:16px; }
.traffic-bar{ width:4px; height:14px; border-radius:1px; }
.traffic-bar.human{ background:var(--green); }
.traffic-bar.bot{ background:var(--red); }
.traffic-bar.unknown{ background:var(--gray-dim); height:8px; }

.det-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
}
.det-row:last-child{ border-bottom:none; }
.status-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.status-dot.ok{ background:var(--green); box-shadow:0 0 6px rgba(107,158,92,0.4); }
.status-dot.warn{ background:var(--orange); }
.status-dot.bad{ background:var(--red); }
.det-label{ font-family:var(--font-body); font-size:12.5px; color:var(--text-secondary); }
.det-label .info-i{ color:var(--text-muted); margin-left:3px; cursor:help; }
.det-val{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; text-align:right; }
.det-val.ok{ color:var(--green); }
.det-val.warn{ color:var(--orange); }
.det-val.bad{ color:var(--red); }

.geo-table-wrap{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:6px 18px 16px;
  margin-top:14px;
}
.geo-consensus{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--amber);
  padding:10px 0 4px;
  border-top:1px solid var(--border-subtle);
  margin-top:8px;
}
.geo-note{ font-family:var(--font-body); font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.map-placeholder{
  height:260px;
  margin-top:14px;
  background:var(--bg-code);
  border:1px dashed var(--border-active);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-muted);
}
.map-placeholder .ico{ font-size:30px; opacity:0.6; }
.map-placeholder .t{ font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.06em; }
.map-placeholder .s{ font-family:var(--font-mono); font-size:10.5px; }

.data-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:12.5px;
}
.data-table th{
  text-align:left;
  padding:9px 10px;
  font-family:var(--font-display);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border-subtle);
}
.data-table td{
  padding:9px 10px;
  color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background:var(--bg-card-hover); }

/* ============ /webrtc 页 ============ */
.webrtc-btn{
  display:block;
  width:100%;
  padding:14px 24px;
  background:var(--amber);
  border:none;
  border-radius:var(--radius-md);
  color:var(--text-inverse);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background-color 0.15s ease;
  margin-bottom:16px;
}
.webrtc-btn:hover{ background:var(--amber-glow); }
.webrtc-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.webrtc-stun-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
}
.webrtc-stun-row:last-child{ border-bottom:none; }
.webrtc-stun-label{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  min-width:80px;
}
.webrtc-stun-ip{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-primary);
  flex:1;
}
.webrtc-stun-status{ font-size:14px; }
.webrtc-detect-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.webrtc-detect-row .info-label{ min-width:70px; margin-bottom:0; }

/* ============ /whois 页 ============ */
.info-label{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:0.04em;
  margin-bottom:4px;
}
.info-value{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-primary);
  word-break:break-all;
}
.whois-raw{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.whois-raw-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
  user-select:none;
  transition:background-color 0.12s ease;
}
.whois-raw-header:hover{ background:var(--bg-card-hover); }
.whois-raw-toggle{
  font-size:10px;
  color:var(--text-muted);
  transition:transform 0.15s ease;
}
.whois-raw-content{
  border-top:1px solid var(--border-subtle);
  padding:14px 18px;
}
.whois-raw-pre{
  background:var(--bg-code);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:14px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  color:var(--text-primary);
  overflow-x:auto;
  white-space:pre;
  margin-bottom:10px;
  max-height:400px;
  overflow-y:auto;
}
.whois-raw-copy{
  display:block;
  width:100%;
  padding:10px 14px;
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-size:13px;
  cursor:pointer;
  transition:background-color 0.12s ease;
  text-align:center;
}
.whois-raw-copy:hover{ background:var(--bg-card-hover); color:var(--text-primary); }

/* ============ /claudetest 页 ============ */
.ct-gauge-wrap{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.ct-gauge-side{ flex:1; min-width:180px; }
.ct-gauge-side .ct-score-label{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
}
.ct-gauge-side .ct-score-grade{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:800;
}
.ct-gauge-side .ct-score-desc{
  font-size:12.5px;
  color:var(--text-secondary);
  margin-top:2px;
}
.ct-security-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.ct-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  border:1px solid var(--border-subtle);
}
.ct-tag.clean{ background:rgba(107,158,92,0.08); border-color:rgba(107,158,92,0.2); color:var(--green); }
.ct-tag.warn{ background:rgba(212,133,61,0.08); border-color:rgba(212,133,61,0.2); color:var(--orange); }
.ct-tag.danger{ background:rgba(196,85,77,0.08); border-color:rgba(196,85,77,0.2); color:var(--red); }
.ct-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:0;
  font-size:13px;
}
.ct-compare-grid .ct-cg-header{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-muted);
  padding:8px 10px;
  border-bottom:1px solid var(--border-subtle);
}
.ct-compare-grid .ct-cg-cell{
  padding:9px 10px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
}
.ct-compare-grid .ct-cg-status{
  padding:9px 10px;
  border-bottom:1px solid var(--border-subtle);
  text-align:center;
}
.ct-compare-grid .ct-cg-mismatch{ background:rgba(196,85,77,0.06); }
.ct-compare-grid .ct-cg-mismatch .ct-cg-cell{ color:var(--red); }

/* ============ /split 页 ============ */
.split-group-header{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
  padding:10px 0 6px;
  margin-top:8px;
  border-bottom:1px solid var(--border-subtle);
}
.split-table{ margin-bottom:14px; }

/* ============ 响应式 ============ */
@media (max-width:640px){
  main{ padding:24px 16px 60px; }
  .nav-inner{ padding:0 16px; }
  .page-title{ font-size:22px; }
}