/* Rola IP 检测站 — 对齐 ippure.com 视觉体系 */

:root {
  --ip-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ip-text: #213547;
  --ip-text-2: #476582;
  --ip-text-3: #8b9eb0;
  --ip-brand: #11a757;
  --ip-brand-hover: #0e9349;
  --ip-brand-rgb: 17, 167, 87;
  --ip-border: rgba(60, 60, 67, 0.12);
  --ip-card: rgba(255, 255, 255, 0.82);
  --ip-card-border: rgba(255, 255, 255, 0.9);
  --ip-nav-bg: rgba(255, 255, 255, 0.86);
  --ip-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --ip-radius: 16px;
  --ip-green: #10b981;
  --ip-red: #ef4444;
  --ip-human: #22c55e;
  --ip-bot: #f87171;
}

html.dark {
  --ip-text: rgba(255, 255, 255, 0.9);
  --ip-text-2: rgba(235, 235, 245, 0.7);
  --ip-text-3: rgba(235, 235, 245, 0.45);
  --ip-border: rgba(84, 84, 88, 0.48);
  --ip-card: rgba(24, 24, 28, 0.72);
  --ip-card-border: rgba(84, 84, 88, 0.32);
  --ip-nav-bg: rgba(20, 20, 24, 0.86);
  --ip-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.Layout {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ip-font);
  color: var(--ip-text);
  background: transparent;
  line-height: 1.6;
}

/* 背景层 */
.ip-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ip-bg--light {
  background:
    linear-gradient(to right, #f0f0f0 1px, transparent 1px),
    linear-gradient(to bottom, #f0f0f0 1px, transparent 1px),
    #fff;
  background-size: 6rem 4rem, 6rem 4rem, auto;
}
.ip-bg--light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at 50% 200px, #c5f5dc, transparent);
}
.ip-bg--dark {
  display: none;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(255, 20, 147, 0.15), transparent 50%),
    radial-gradient(100% 60% at 30% 10%, rgba(0, 255, 255, 0.12), transparent 60%),
    radial-gradient(90% 70% at 50% 0%, rgba(138, 43, 226, 0.18), transparent 65%),
    #000;
}
html.dark .ip-bg--light { display: none; }
html.dark .ip-bg--dark { display: block; }

.VPSkipLink {
  position: absolute;
  left: -9999px;
  top: auto;
}
.VPSkipLink:focus {
  left: 1rem;
  top: 1rem;
  z-index: 999;
  padding: 0.5rem 1rem;
  background: #fff;
  border-radius: 8px;
}

/* Header / VPNav */
.VPNav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ip-border);
  background: var(--ip-nav-bg);
}
.VPNavBar .wrapper { padding: 0 1.5rem; }
.VPNavBar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 64px;
}
.VPNavBarTitle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ip-text);
  font-weight: 700;
  font-size: 1.05rem;
}
.VPNavBarTitle .logo { display: block; }
.content-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.VPNavBarMenu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}
.VPLink {
  color: var(--ip-text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.VPLink:hover { color: var(--ip-brand); }
.VPNavBarMenuLink {
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
}
.VPNavBarMenuLink.is-active {
  color: var(--ip-brand);
  background: rgba(var(--ip-brand-rgb), 0.08);
}
.VPFlyout { position: relative; }
.VPFlyout .button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ip-text-2);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}
.VPFlyout .button:hover,
.VPFlyout.is-open .button { color: var(--ip-brand); }
.VPFlyout .chev::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.VPFlyout .menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.18s ease;
}
.VPFlyout.is-open .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.VPMenu {
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.VPMenu .VPLink {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
}
.VPMenu .VPLink:hover { background: rgba(var(--ip-brand-rgb), 0.08); }
.VPNavBarExtra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ip-theme-toggle,
.VPNavBarHamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ip-border);
  border-radius: 10px;
  background: transparent;
  color: var(--ip-text-2);
  cursor: pointer;
}
.ip-theme-toggle .icon-moon { display: none; }
html.dark .ip-theme-toggle .icon-sun { display: none; }
html.dark .ip-theme-toggle .icon-moon { display: block; }
.ip-console-link {
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--ip-border);
  font-size: 0.88rem;
  font-weight: 500;
}
.VPNavBarHamburger { display: none; }
.VPNavBarHamburger .container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.VPNavBarHamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.VPNavScreen {
  border-top: 1px solid var(--ip-border);
  background: var(--ip-nav-bg);
  padding: 1rem 1.5rem 1.25rem;
}
.VPNavScreenMenu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 1280px;
  margin: 0 auto;
}
.VPNavScreenMenu .VPLink { padding: 0.5rem 0; font-weight: 500; }
.VPNavScreenMenu .sub { padding-left: 1rem; font-size: 0.92rem; color: var(--ip-text-3); }
.VPNavScreenGroupLabel {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ip-text-3);
}

/* Main */
.ip-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}
.ip-hero {
  text-align: center;
  padding: 1.5rem 0 1rem;
}
.ip-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ip-hero__lead {
  margin: 0 auto;
  max-width: 720px;
  color: var(--ip-text-2);
  font-size: 1rem;
}

/* Search */
.ip-search {
  position: relative;
  max-width: 760px;
  margin: 1.25rem auto 1.5rem;
  text-align: center;
}
.ip-search__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
}
.ip-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ip-text);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}
.ip-search__btn {
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ip-brand);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.ip-search__btn:hover { background: var(--ip-brand-hover); }
.ip-search__myip {
  margin: 0.75rem 0 0;
  color: var(--ip-text-2);
  font-size: 0.92rem;
}
.ip-search__myip a { color: var(--ip-brand); font-weight: 600; text-decoration: none; }
.ip-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--ip-brand-rgb), 0.1);
  color: var(--ip-brand);
  font-size: 0.75rem;
  font-weight: 600;
}
.ip-search__actions {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
}
.ip-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ip-border);
  border-radius: 10px;
  background: var(--ip-card);
  color: var(--ip-text-2);
  cursor: pointer;
}

/* Dashboard */
.ip-dashboard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1rem;
  align-items: start;
}
.ip-panel,
.ip-map-card {
  border: 1px solid var(--ip-card-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  backdrop-filter: blur(10px);
}
.ip-panel { padding: 1.25rem 1.35rem 1.35rem; }
.ip-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ip-panel__ip {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--ip-brand);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.ip-panel__meta {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ip-border);
}
.ip-meta-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.75rem;
  font-size: 0.92rem;
}
.ip-meta-row .label { color: var(--ip-text-3); }
.ip-meta-row .value { color: var(--ip-text); font-weight: 500; }

.ip-human-bot { margin-bottom: 1rem; }
.ip-human-bot__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  color: var(--ip-text-2);
}
.ip-human-bot__labels strong { font-weight: 700; }
.ip-human-bot__track {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.2);
}
.ip-human-bot__human { background: var(--ip-human); transition: width 0.4s ease; }
.ip-human-bot__bot { background: var(--ip-bot); transition: width 0.4s ease; }

.ip-geo-table {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.ip-geo-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
}
.ip-geo-row:nth-child(even):not(.head) { background: rgba(148, 163, 184, 0.08); }
.ip-geo-row.head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ip-text-3);
}
.ip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.ip-badge {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 110px;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: rgba(16, 185, 129, 0.06);
}
.ip-badge__label { font-size: 0.72rem; color: var(--ip-text-3); }
.ip-badge__value { font-size: 0.92rem; font-weight: 700; color: var(--ip-green); }
.ip-badge.is-warn .ip-badge__value { color: #f59e0b; }
.ip-badge.is-risk .ip-badge__value { color: var(--ip-red); }
.ip-panel__status {
  margin: 0.85rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--ip-text-3);
}
.ip-map-card { overflow: hidden; min-height: 360px; }
.ip-map { width: 100%; height: 100%; min-height: 360px; }

/* Feature cards */
.ip-features { margin-top: 2.5rem; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.feature-card {
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--ip-radius);
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ip-shadow);
  border-color: rgba(var(--ip-brand-rgb), 0.25);
}
.feature-card .icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.feature-card h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.feature-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ip-text-2);
  line-height: 1.45;
}
.feature-card.is-dev { opacity: 0.72; }

/* Correction */
.ip-correction {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--ip-radius);
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
}
.ip-correction h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.ip-correction p {
  margin: 0;
  color: var(--ip-text-2);
  font-size: 0.92rem;
}
.ip-correction a { color: var(--ip-brand); }

/* —— 首页最新博客 —— */
.ip-home-blog {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ip-border);
}
.ip-home-blog__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ip-home-blog__head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.ip-home-blog__all {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ip-brand);
  text-decoration: none;
}
.ip-home-blog__all:hover { text-decoration: underline; }

/* Footer */
.ip-footer {
  border-top: 1px solid var(--ip-border);
  padding: 1.5rem;
  text-align: center;
}
.ip-footer__tag {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  color: var(--ip-text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ip-footer__copy {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ip-text-3);
}

/* Responsive */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-dashboard__layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .VPNavBarMenu,
  .VPNavBarExtra .ip-console-link { display: none; }
  .VPNavBarHamburger { display: inline-flex; }
}
@media (max-width: 640px) {
  .ip-main { padding-left: 1rem; padding-right: 1rem; }
  .features-grid { grid-template-columns: 1fr; }
  .ip-search__form { flex-direction: column; border-radius: var(--ip-radius); }
  .ip-search__input,
  .ip-search__btn { border-radius: 12px; }
  .ip-meta-row { grid-template-columns: 72px 1fr; }
  .ip-geo-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* —— Claude 专测页 —— */
.ip-main--claude { max-width: 920px; }
.claude-hero { text-align: center; padding: 1rem 0 1.25rem; }
.claude-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}
.claude-hero p {
  margin: 0 auto;
  max-width: 680px;
  color: var(--ip-text-2);
  font-size: 0.95rem;
}
.claude-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
}
.claude-link-btn,
.claude-rescan-btn {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.claude-link-btn {
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  color: var(--ip-brand);
}
.claude-rescan-btn {
  border: 0;
  background: var(--ip-brand);
  color: #fff;
}
.claude-scan-status { font-size: 0.8rem; color: var(--ip-text-3); }

.claude-panel {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--ip-radius);
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
}
.claude-panel--env { scroll-margin-top: 5rem; }
.claude-section + .claude-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ip-border); }
.claude-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.claude-section h2,
.claude-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ip-text);
}
.claude-section h3 { text-transform: none; font-size: 1.05rem; letter-spacing: 0; }
.claude-live,
.claude-sub { color: var(--ip-text-3); font-weight: 500; }
.claude-muted { margin: 0 0 0.75rem; color: var(--ip-text-2); font-size: 0.9rem; }

.claude-exit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.claude-exit-card {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(var(--ip-brand-rgb), 0.08);
  border: 1px solid rgba(var(--ip-brand-rgb), 0.15);
}
.claude-exit-card__label { margin: 0 0 0.35rem; font-size: 0.82rem; color: var(--ip-text-3); }
.claude-exit-card__ip {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ip-brand);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.claude-exit-card__loc { margin: 0; font-size: 0.85rem; color: var(--ip-text-2); }

.ip-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.ip-pill--safe { background: rgba(16, 185, 129, 0.12); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); }
.ip-pill--warn { background: rgba(245, 158, 11, 0.12); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.25); }
.ip-pill--danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.25); }

.claude-webrtc-body,
.claude-dns-list { display: grid; gap: 0.55rem; }
.claude-webrtc-item,
.claude-dns-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: rgba(148, 163, 184, 0.06);
}
.claude-webrtc-item.is-risk,
.claude-dns-item.is-risk {
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(245, 158, 11, 0.35);
}
.claude-dns-item.is-safe { border-color: rgba(16, 185, 129, 0.2); }
.claude-dns-item.is-risk { background: rgba(237, 233, 254, 0.55); border-color: rgba(139, 92, 246, 0.25); }
.claude-webrtc-item strong,
.claude-dns-item strong {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}
.claude-webrtc-item span,
.claude-dns-item span { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--ip-text-2); }
.claude-empty { margin: 0; color: var(--ip-text-3); font-size: 0.88rem; }

.claude-env-head { text-align: center; margin-bottom: 1rem; }
.claude-env-head h2 { margin: 0 0 0.65rem; font-size: 1.35rem; text-transform: none; letter-spacing: 0; }
.claude-verdict { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.claude-risk-label { margin: 0; color: var(--ip-text-2); font-size: 0.9rem; }
.claude-risk-score {
  display: inline-block;
  min-width: 2.2rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.claude-risk-score--low { color: var(--ip-green); }
.claude-risk-score--mid { color: #f59e0b; }
.claude-risk-score--high { color: var(--ip-red); }

.claude-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.claude-signal {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: rgba(148, 163, 184, 0.05);
}
.claude-signal__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.claude-signal__head span { color: var(--ip-text-3); font-size: 0.8rem; }
.claude-signal p { margin: 0; font-size: 0.85rem; color: var(--ip-text-2); }

.claude-faq { display: grid; gap: 0.5rem; }
.claude-faq-item {
  border: 1px solid var(--ip-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.04);
}
.claude-faq-q {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ip-text);
  cursor: pointer;
}
.claude-faq-a {
  display: none;
  padding: 0 1rem 0.9rem;
}
.claude-faq-a p { margin: 0; font-size: 0.88rem; color: var(--ip-text-2); }
.claude-faq-item.is-open .claude-faq-a { display: block; }

.ip-doc {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--ip-radius);
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  color: var(--ip-text-2);
  font-size: 0.92rem;
  line-height: 1.75;
}
.ip-doc h2, .ip-doc h3, .ip-doc h4 { color: var(--ip-text); margin: 1.25rem 0 0.65rem; }
.ip-doc h2 { font-size: 1.35rem; margin-top: 0; }
.ip-doc h3 { font-size: 1.1rem; }
.ip-doc h4 { font-size: 1rem; }
.ip-doc p { margin: 0 0 0.75rem; }
.ip-doc ul, .ip-doc ol { margin: 0 0 0.85rem 1.2rem; }
.ip-doc a { color: var(--ip-brand); }
.ip-doc code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.15);
  font-size: 0.85em;
}
.ip-doc hr {
  border: 0;
  border-top: 1px solid var(--ip-border);
  margin: 1.25rem 0;
}
.ip-doc__info {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: rgba(var(--ip-brand-rgb), 0.1);
  color: var(--ip-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .claude-exit-grid { grid-template-columns: 1fr; }
  .claude-webrtc-item,
  .claude-dns-item { flex-direction: column; align-items: flex-start; }
}

/* —— IP 出口检测页 —— */
.ip-main--outbound { max-width: 1100px; }
.outbound-hero {
  text-align: center;
  padding: 1rem 0 1rem;
}
.outbound-hero h1 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.outbound-hero p {
  margin: 0 auto 0.85rem;
  max-width: 640px;
  color: var(--ip-text-2);
  font-size: 0.95rem;
}

.outbound-map-section { margin-bottom: 1rem; }
.outbound-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0.85rem;
  align-items: stretch;
}
.outbound-map-card,
.outbound-legend,
.outbound-table-wrap {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
}
.outbound-map-card { overflow: hidden; min-height: 420px; }
.outbound-map { width: 100%; height: 100%; min-height: 420px; }

.outbound-legend {
  padding: 0.9rem 0.85rem;
  overflow: auto;
  max-height: 420px;
}
.outbound-legend__title {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ip-text-3);
}
.outbound-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.outbound-legend__item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--ip-text-2);
}
.outbound-legend__dot {
  width: 8px;
  height: 8px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
.outbound-legend__item.is-dns .outbound-legend__dot { background: #f59e0b; }
.outbound-legend__item.is-webrtc .outbound-legend__dot,
.outbound-legend__item.is-risk .outbound-legend__dot { background: #ef4444; }
.outbound-legend__text strong {
  display: block;
  color: var(--ip-text);
  font-size: 0.82rem;
}
.outbound-legend__text em {
  display: block;
  margin-top: 0.1rem;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--ip-text-3);
}

.outbound-table-section { margin-bottom: 1.25rem; }
.outbound-table-wrap { overflow: auto; }
.outbound-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.outbound-table th,
.outbound-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ip-border);
  text-align: left;
  vertical-align: top;
}
.outbound-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ip-text-3);
  background: rgba(148, 163, 184, 0.06);
}
.outbound-table td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}
.outbound-table__loading {
  text-align: center;
  color: var(--ip-text-3);
}
.outbound-table__row.is-dns { background: rgba(245, 158, 11, 0.05); }
.outbound-table__row.is-webrtc,
.outbound-table__row.is-risk { background: rgba(239, 68, 68, 0.05); }

@media (max-width: 900px) {
  .outbound-map-layout { grid-template-columns: 1fr; }
  .outbound-legend { max-height: none; }
}

/* —— WebRTC 泄露检测页 —— */
.ip-main--webrtc { max-width: 920px; }
.webrtc-hero {
  text-align: center;
  padding: 1rem 0 1rem;
}
.webrtc-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}
.webrtc-hero__myip {
  margin: 0 0 0.85rem;
  color: var(--ip-text-2);
  font-size: 0.92rem;
}
.webrtc-hero__myip a {
  color: var(--ip-brand);
  font-weight: 700;
  text-decoration: none;
}

.webrtc-panel { margin-bottom: 1.25rem; }
.webrtc-table-wrap {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  overflow: auto;
}
.webrtc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.webrtc-table th,
.webrtc-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ip-border);
  text-align: left;
  vertical-align: top;
}
.webrtc-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ip-text-3);
  background: rgba(148, 163, 184, 0.06);
}
.webrtc-table__server code {
  display: block;
  margin-bottom: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
  color: var(--ip-text);
}
.webrtc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.webrtc-tag {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
}
.webrtc-tag--china {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.webrtc-tag--global {
  background: rgba(var(--ip-brand-rgb), 0.12);
  color: var(--ip-brand-hover);
  border: 1px solid rgba(var(--ip-brand-rgb), 0.25);
}
.webrtc-tag--provider {
  background: rgba(148, 163, 184, 0.12);
  color: var(--ip-text-2);
  border: 1px solid var(--ip-border);
  font-weight: 500;
}
.webrtc-table__result { min-width: 220px; }
.webrtc-result--safe .webrtc-safe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #16a34a;
  font-weight: 600;
  font-size: 0.88rem;
}
.webrtc-result--leak strong {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: #dc2626;
  margin-bottom: 0.25rem;
}
.webrtc-leak-loc {
  display: block;
  font-size: 0.82rem;
  color: var(--ip-text-2);
  margin-bottom: 0.35rem;
}
.webrtc-table__row.is-leak { background: rgba(239, 68, 68, 0.04); }
.webrtc-table__row.is-safe { background: rgba(34, 197, 94, 0.03); }
.webrtc-table__loading,
.webrtc-loading {
  text-align: center;
  color: var(--ip-text-3);
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .webrtc-table th,
  .webrtc-table td { padding: 0.7rem 0.75rem; }
}

/* —— DNS 泄露检测页 —— */
.ip-main--dns { max-width: 960px; }
.dns-hero {
  text-align: center;
  padding: 1rem 0 1rem;
}
.dns-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}
.dns-hero__myip {
  margin: 0 0 0.75rem;
  color: var(--ip-text-2);
  font-size: 0.92rem;
}
.dns-hero__myip a {
  color: var(--ip-brand);
  font-weight: 700;
  text-decoration: none;
}
.dns-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dns-panel { margin-bottom: 1.25rem; }
.dns-table-wrap {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  overflow: auto;
}
.dns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.dns-table th,
.dns-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ip-border);
  text-align: left;
  vertical-align: top;
}
.dns-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ip-text-3);
  background: rgba(148, 163, 184, 0.06);
}
.dns-table td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}
.dns-domains {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.1);
  font-size: 0.8rem;
  color: var(--ip-text-2);
}
.dns-table__row.is-risk { background: rgba(239, 68, 68, 0.04); }
.dns-table__row.is-safe { background: rgba(34, 197, 94, 0.03); }
.dns-table__loading {
  text-align: center;
  color: var(--ip-text-3);
}

@media (max-width: 640px) {
  .dns-table th,
  .dns-table td { padding: 0.65rem 0.75rem; }
}

/* —— 浏览器指纹检测页 —— */
.ip-main--fingerprint { max-width: 920px; }
.fp-tool {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  padding: 1.1rem 1.2rem 1.25rem;
  margin-bottom: 1.25rem;
}
.fp-tool__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ip-border);
}
.fp-tool__head h1 {
  margin: 0;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.fp-tool__icon { font-size: 1.1rem; }
.fp-algo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--ip-text-2);
}
.fp-algo select {
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
  color: var(--ip-text);
  font: inherit;
  font-size: 0.82rem;
}
.fp-panel + .fp-panel { margin-top: 1rem; }
.fp-panel__title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--ip-text);
}
.fp-id-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fp-id {
  display: block;
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: rgba(148, 163, 184, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: var(--ip-text);
  word-break: break-all;
  text-align: center;
}
.fp-table-wrap {
  border: 1px solid var(--ip-border);
  border-radius: 12px;
  overflow: auto;
  max-height: 480px;
}
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.fp-table th,
.fp-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--ip-border);
  text-align: left;
  vertical-align: top;
}
.fp-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ip-text-3);
  background: rgba(148, 163, 184, 0.12);
}
.fp-table__key {
  width: 34%;
  font-weight: 600;
  color: var(--ip-text);
  white-space: nowrap;
}
.fp-table__val code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  word-break: break-all;
  white-space: pre-wrap;
  color: var(--ip-text-2);
}
.fp-table__loading {
  text-align: center;
  color: var(--ip-text-3);
}

@media (max-width: 640px) {
  .fp-tool__head { flex-direction: column; align-items: flex-start; }
  .fp-id-row { flex-direction: column; }
  .fp-id { width: 100%; }
}

/* —— 网上邻居页 —— */
.ip-main--neighbors { max-width: 920px; }
.nb-tool {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  padding: 1.1rem 1.2rem 1.25rem;
  margin-bottom: 1.25rem;
}
.nb-head {
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ip-border);
}
.nb-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ip-text);
}
.nb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}
.nb-status {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nb-board {
  min-height: 180px;
  border: 1px dashed var(--ip-border);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.04);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.nb-board__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--ip-text-2);
}
.nb-board__meta strong { color: var(--ip-text); font-weight: 600; }
.nb-messages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  max-height: 320px;
  overflow: auto;
}
.nb-message {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--ip-border);
  background: var(--ip-card);
}
.nb-message.is-mine {
  border-color: rgba(99, 219, 235, 0.35);
  background: rgba(99, 219, 235, 0.06);
}
.nb-message__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.nb-message__user { font-size: 0.85rem; color: var(--ip-text); }
.nb-message__time { font-size: 0.72rem; color: var(--ip-text-3); }
.nb-message__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ip-text-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.nb-board__empty {
  margin: 2.5rem 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ip-text-3);
}
.nb-login {
  border: 1px solid var(--ip-border);
  border-radius: 12px;
  background: var(--ip-card);
  padding: 0.85rem 1rem 1rem;
}
.nb-login__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ip-text);
}
.nb-login__lock { font-size: 0.95rem; }
.nb-login__form { display: grid; gap: 0.75rem; }
.nb-login__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.nb-field { display: grid; gap: 0.3rem; }
.nb-field__label {
  font-size: 0.75rem;
  color: var(--ip-text-3);
}
.nb-field input {
  width: 100%;
  padding: 0.55rem 0;
  border: none;
  border-bottom: 1px solid var(--ip-border);
  background: transparent;
  color: var(--ip-text);
  font: inherit;
  font-size: 0.9rem;
}
.nb-field input:focus {
  outline: none;
  border-bottom-color: var(--ip-brand);
}
.nb-login__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.nb-captcha {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ip-border);
  border-radius: 8px;
  background: #f8fafc;
  min-width: 220px;
}
.dark .nb-captcha { background: rgba(15, 23, 42, 0.5); }
.nb-captcha.is-success {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}
.nb-captcha__check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ip-text-2);
  user-select: none;
}
.nb-captcha__check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nb-captcha__box {
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}
.dark .nb-captcha__box { background: var(--ip-card); border-color: var(--ip-border); }
.nb-captcha__check input:checked + .nb-captcha__box {
  border-color: #10b981;
  background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.nb-captcha__badge {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--ip-text-3);
}
.nb-captcha__hint {
  flex: 1 1 100%;
  margin: -0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--ip-text-3);
}
.nb-login__btn {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: #1e293b;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.nb-login__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nb-login__btn:not(:disabled):hover { background: #0f172a; }
.nb-compose {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ip-border);
}
.nb-compose__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ip-text);
}
.nb-compose textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ip-border);
  border-radius: 10px;
  background: var(--ip-card);
  color: var(--ip-text);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
  min-height: 72px;
}
.nb-compose textarea:focus {
  outline: none;
  border-color: var(--ip-brand);
}
.nb-compose__actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.nb-post-btn,
.nb-logout-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.nb-post-btn {
  border: none;
  background: var(--ip-brand);
  color: #0f172a;
  font-weight: 600;
}
.nb-logout-btn {
  border: 1px solid var(--ip-border);
  background: transparent;
  color: var(--ip-text-2);
}
.nb-compose__note {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: var(--ip-text-3);
}

@media (max-width: 640px) {
  .nb-login__fields { grid-template-columns: 1fr; }
  .nb-login__actions { flex-direction: column; align-items: stretch; }
  .nb-captcha { width: 100%; }
  .nb-login__btn { width: 100%; }
}

/* —— VPN 溯源 / IP 定位泄露检测页 —— */
.ip-main--ip-leak { max-width: 760px; }
.ipl-search { margin-top: 0.5rem; }
.ipl-card {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  overflow: hidden;
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  margin-bottom: 1.25rem;
}
.ipl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 55%, #a78bfa 100%);
  color: #fff;
}
.ipl-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ipl-card__ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}
.ipl-card__body {
  padding: 2rem 1.25rem;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ipl-card__loading,
.ipl-card__safe {
  margin: 0;
  font-size: 1rem;
  color: var(--ip-text);
}
.ipl-card__error {
  margin: 0;
  font-size: 0.92rem;
  color: #dc2626;
}
.ipl-leaks {
  width: 100%;
  text-align: left;
}
.ipl-leak {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--ip-border);
  margin-bottom: 0.65rem;
}
.ipl-leak--high {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}
.ipl-leak--medium {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
}
.ipl-leak--low {
  border-color: rgba(var(--ip-brand-rgb), 0.25);
  background: rgba(var(--ip-brand-rgb), 0.05);
}
.ipl-leak__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--ip-text);
}
.ipl-leak__detail {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ip-text-2);
}
.ipl-card__note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--ip-text-3);
  text-align: center;
}

@media (max-width: 640px) {
  .ipl-card__head { flex-direction: column; align-items: flex-start; }
  .ipl-card__ip { text-align: left; }
  .ipl-card__body { padding: 1.5rem 1rem; }
}

/* —— IP 快捷信息卡片 —— */
.ip-main--card { max-width: 820px; }
.card-doc h1 { margin-top: 0; font-size: 1.75rem; }
.ip-card-preview-wrap {
  margin: 1.25rem 0 0.5rem;
  display: flex;
  justify-content: center;
}
.ip-card-preview__loading,
.ip-card-preview__error {
  margin: 2rem 0;
  text-align: center;
  color: var(--ip-text-3);
  font-size: 0.9rem;
}
.ip-card-preview__note {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  color: var(--ip-text-3);
  text-align: center;
}
.ip-card {
  width: min(100%, 560px);
  border: 4px solid #84cc16;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7fee7 0%, #fff 42%);
  box-shadow: 0 10px 30px rgba(132, 204, 22, 0.12);
  overflow: hidden;
}
.dark .ip-card {
  background: linear-gradient(180deg, rgba(34, 50, 20, 0.5) 0%, var(--ip-card) 42%);
  border-color: #65a30d;
}
.ip-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 2px solid #84cc16;
  color: #365314;
  font-weight: 700;
  font-size: 0.95rem;
}
.dark .ip-card__head { color: #bef264; border-bottom-color: #65a30d; }
.ip-card__logo { flex-shrink: 0; }
.ip-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem 1rem;
  align-items: end;
}
.ip-card__fields { display: grid; gap: 0.45rem; min-width: 0; }
.ip-card__row {
  display: grid;
  grid-template-columns: 1.25rem 4.5rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: start;
  font-size: 0.82rem;
}
.ip-card__icon { line-height: 1.35; }
.ip-card__label { color: #6b7280; white-space: nowrap; }
.dark .ip-card__label { color: var(--ip-text-3); }
.ip-card__value {
  color: #111827;
  font-weight: 600;
  word-break: break-word;
}
.dark .ip-card__value { color: var(--ip-text); }
.ip-card__value--asn { font-size: 0.78rem; font-weight: 500; }
.ip-card__risk {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.ip-card__risk--low { background: #22c55e; }
.ip-card__risk--medium { background: #f59e0b; }
.ip-card__risk--high { background: #f97316; }
.ip-card__risk--extreme { background: #ef4444; }
.ip-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ip-card__tag {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 600;
}
.dark .ip-card__tag { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.ip-card__mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.ip-card__credit {
  font-size: 0.68rem;
  font-style: italic;
  color: #9ca3af;
  white-space: nowrap;
}
.ip-code-block {
  position: relative;
  margin: 0.75rem 0 1.25rem;
  border: 1px solid var(--ip-border);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.08);
  overflow: hidden;
}
.ip-code-block__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--ip-border);
  background: rgba(148, 163, 184, 0.06);
}
.ip-code-block__copy {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--ip-border);
  border-radius: 6px;
  background: var(--ip-card);
  color: var(--ip-text-2);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.ip-code-block__copy:hover { border-color: var(--ip-brand); color: var(--ip-brand); }
.ip-code-block__lang {
  font-size: 0.72rem;
  color: var(--ip-text-3);
  text-transform: lowercase;
}
.ip-code-block__pre {
  margin: 0;
  padding: 0.85rem 1rem;
  overflow: auto;
  font-size: 0.82rem;
  line-height: 1.55;
}
.ip-code-block__pre code {
  background: transparent;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ip-text);
  white-space: pre-wrap;
  word-break: break-all;
}
/* v1/card 嵌入页：仅展示卡片，无导航 */
.ip-page--card-embed {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #f8fafc;
}
.ip-card-embed { max-width: 100%; }

/* —— IP 信息 API 文档页 —— */
.ip-main--api { max-width: 820px; }
.api-doc h1 { margin-top: 0; font-size: 1.75rem; }
.api-doc__note {
  margin: 0.75rem 0 1.5rem;
  font-size: 0.88rem;
  color: var(--ip-text-3);
}
.ip-code-block--live { margin-top: 0.75rem; }
.api-doc .claude-rescan-btn { margin-right: 0.5rem; }

/* —— 关于本站 —— */
.ip-main--about { max-width: 820px; }
.about-doc h1 { margin-top: 0; font-size: 1.75rem; }

/* —— 联系方式 —— */
.ip-main--contact { max-width: 820px; }
.contact-doc__lead {
  text-align: center;
  font-size: 1rem;
  color: var(--ip-text-2);
  margin: 0 0 1.5rem;
}

/* —— 常见问题 —— */
.ip-main--faq { max-width: 920px; }
.faq-doc h1 { margin-top: 0; font-size: 1.75rem; }
.faq-toc {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
  background: rgba(148, 163, 184, 0.06);
}
.faq-toc ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
}
.faq-toc a { font-size: 0.9rem; }
.faq-table-wrap {
  overflow: auto;
  margin: 0.75rem 0 1.25rem;
}
.faq-doc table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.faq-doc th,
.faq-doc td {
  border: 1px solid var(--ip-border);
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
}
.faq-doc th {
  background: rgba(148, 163, 184, 0.12);
  color: var(--ip-text);
  font-weight: 600;
}

/* —— 使用条款与隐私 —— */
.ip-main--terms { max-width: 820px; }
.terms-doc h1 { margin-top: 0; font-size: 1.55rem; line-height: 1.35; }
.terms-doc__date {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.88rem;
  color: var(--ip-text-3);
}

/* —— 博客列表 —— */
.ip-main--blog { max-width: 920px; }
.ip-blog-hero {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ip-border);
}
.ip-blog-bc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--ip-text-3);
}
.ip-blog-bc a { color: var(--ip-brand); text-decoration: none; }
.ip-blog-hero h1 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
}
.ip-blog-hero__lead {
  margin: 0 auto;
  max-width: 640px;
  color: var(--ip-text-2);
  font-size: 0.95rem;
}
.ip-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.ip-blog-card {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  background: var(--ip-card);
  box-shadow: var(--ip-shadow);
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ip-blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--ip-text-3);
}
.ip-blog-card__tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--ip-brand-rgb), 0.1);
  color: var(--ip-brand);
  font-weight: 600;
}
.ip-blog-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}
.ip-blog-card__title a {
  color: var(--ip-text);
  text-decoration: none;
}
.ip-blog-card__title a:hover { color: var(--ip-brand); }
.ip-blog-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ip-text-2);
}
.ip-blog-card__more {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ip-brand);
  text-decoration: none;
}
.ip-blog-card__more:hover { text-decoration: underline; }

/* —— 博客文章详情 —— */
.ip-main--blog-article { max-width: 820px; }
.ip-blog-bc--left { justify-content: flex-start; margin-bottom: 0.75rem; }
.ip-blog-article h1 {
  margin: 0.35rem 0 0.65rem;
  font-size: 1.65rem;
  line-height: 1.35;
}
.ip-blog-article__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  color: var(--ip-text-3);
}
.ip-blog-article__lead {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  color: var(--ip-text-2);
  line-height: 1.7;
}
.ip-blog-article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ip-border);
}
.ip-blog-article__cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--ip-brand);
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.ip-blog-article__cta:hover { opacity: 0.92; }
.ip-blog-article__back {
  font-size: 0.88rem;
  color: var(--ip-brand);
  text-decoration: none;
}
.ip-blog-article__back:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .ip-card__body { grid-template-columns: 1fr; }
  .ip-card__mascot { flex-direction: row; justify-content: space-between; width: 100%; }
  .ip-card__row { grid-template-columns: 1.25rem 4rem minmax(0, 1fr); }
}