:root {
  --bg: #f6f8fa;
  --card: #ffffff;
  --line: #d8dee4;
  --line2: #e6eaef;
  --fg: #1f2328;
  --dim: #656d76;
  --dim2: #8b949e;
  --v4: #0969da;
  --v6: #1a7f37;
  --good: #1a7f37;
  --warn: #9a6700;
  --bad: #cf222e;
  --purple: #8250df;
  --cyan: #0969da;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 44px 20px 56px; }

/* ---------------------------------------------------------------- 标题 */
header { margin-bottom: 26px; }
h1 {
  margin: 0 0 8px;
  font-size: 27px; font-weight: 680; letter-spacing: .3px;
  color: #111418;
}
h1 .en {
  font-size: 14px; font-weight: 400; color: var(--dim2);
  margin-left: 10px; letter-spacing: 1px;
}
.sub { margin: 0; color: var(--dim); font-size: 13px; }

/* ---------------------------------------------------------------- 公网 IP 大字 */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

.hero-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px 22px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31,35,40,.04);
}
.hero-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--v4);
}
.hero-card.v6::before { background: var(--v6); }
.hero-card.empty::before { background: var(--line); }

.hero-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v4);
}
.hero-card.v6 .dot { background: var(--v6); }
.hero-card.empty .dot { background: var(--dim2); }

.hero-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--dim);
}
.hero-pill {
  margin-left: auto;
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: #f0f3f6; color: var(--dim);
  border: 1px solid var(--line2);
}

.hero-ip {
  font: 700 26px/1.25 ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
  word-break: break-all;
  letter-spacing: .2px;
  margin-bottom: 8px;
  color: var(--v4);
}
.hero-card.v6 .hero-ip { font-size: 19px; color: var(--v6); }
.hero-card.empty .hero-ip { color: var(--dim2); font-size: 17px; font-weight: 500; }

.hero-loc {
  font-size: 13px; color: var(--dim); min-height: 21px;
  word-break: break-word;
}
.hero-loc .en { color: var(--dim2); }

/* ---------------------------------------------------------------- 详情表 */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31,35,40,.04);
}

table.detail { width: 100%; border-collapse: collapse; }

table.detail thead th {
  text-align: left;
  padding: 14px 18px 12px;
  font-size: 12px; font-weight: 600; color: var(--dim2);
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}
table.detail thead th.k { width: 108px; }

.th-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  padding: 2px 9px; border-radius: 999px;
}
.th-badge.b4 { color: var(--v4); background: rgba(9,105,218,.08); }
.th-badge.b6 { color: var(--v6); background: rgba(26,127,55,.08); }

table.detail tbody tr { border-bottom: 1px solid var(--line2); }
table.detail tbody tr:last-child { border-bottom: none; }
table.detail tbody tr:hover { background: #fafbfc; }

table.detail td {
  padding: 11px 18px;
  font-size: 13px;
  vertical-align: top;
  word-break: break-word;
}
table.detail td.k {
  color: var(--dim2); font-size: 12px; white-space: nowrap;
  width: 108px;
}
table.detail td .en { color: var(--dim2); font-size: 12px; }

.muted { color: var(--dim2); }

/* 标签 */
.tagx {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 999px; margin: 1px 4px 1px 0;
  background: #f0f3f6; color: var(--dim); border: 1px solid var(--line2);
}
.tagx.ok { color: var(--good); border-color: rgba(26,127,55,.25); background: rgba(26,127,55,.07); }
.tagx.warn { color: var(--warn); border-color: rgba(154,103,0,.25); background: rgba(154,103,0,.07); }
.tagx.bad { color: var(--bad); border-color: rgba(207,34,46,.25); background: rgba(207,34,46,.07); }
.tagx.dc { color: var(--purple); border-color: rgba(130,80,223,.25); background: rgba(130,80,223,.07); }
.tagx.mobile { color: var(--cyan); border-color: rgba(9,105,218,.25); background: rgba(9,105,218,.07); }

/* 纯净度 */
.pur {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 3px 11px; border-radius: 9px;
  background: #f6f8fa; border: 1px solid var(--line);
}
.pur .n { font-size: 17px; font-weight: 700; line-height: 1; }
.pur .t { font-size: 12px; }
.pur.good { border-color: rgba(26,127,55,.3); background: rgba(26,127,55,.06); }
.pur.good .n, .pur.good .t { color: var(--good); }
.pur.warn { border-color: rgba(154,103,0,.3); background: rgba(154,103,0,.06); }
.pur.warn .n, .pur.warn .t { color: var(--warn); }
.pur.bad { border-color: rgba(207,34,46,.3); background: rgba(207,34,46,.06); }
.pur.bad .n, .pur.bad .t { color: var(--bad); }

/* ---------------------------------------------------------------- 页脚 */
.foot {
  margin-top: 24px; text-align: center;
  color: var(--dim2); font-size: 12px; line-height: 2;
}
.foot .src { color: #a8b1ba; font-size: 11px; }