/* ipi6 | shared-layout.css | version:5.7.0-mobile-menu */

/*
 * 与 AIAGE 模板一致：Plus Jakarta Sans + 浏览器 sans-serif 回退。
 * 字体只在这里维护，页面不再单独指定中文或英文字体。
 */

:root {
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #5b667a;
  --line: #e6eaf2;
  --blue: #2f6bff;
  --site-status-blue: #2f6bff;
  --site-status-red: #ff3d57;
  --shadow: 0 10px 26px rgba(17, 24, 39, .08);
  --radius: 16px;
  --font: sans-serif;
  --data-font: var(--font);
  --mono: var(--font);

  /* 全站数据排版规范：以后统一只改这里 */
  --site-data-label-size: 14px;
  --site-data-label-weight: 500;
  --site-data-value-size: 16px;
  --site-data-value-weight: 500;
  --site-data-label-color: #667085;
  --site-data-value-color: #111827;
  --site-data-line-height: 1.45;

  --site-accent: #b229e8;

  /* 公共字段名 / 数据值；新页面直接使用这两个类 */
  --site-card-data-gap: 12px;

  /* 固定视觉组件：T9 顶部 + D2 底部（不由页面单独覆盖） */
  --site-header-gradient: radial-gradient(circle at 14% -68%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%), radial-gradient(circle at 86% 124%, rgba(40,66,236,.36) 0%, rgba(40,66,236,0) 46%), linear-gradient(106deg,#639EED 0%,#66C9E0 50%,#748CF0 100%);
  --site-footer-gradient: radial-gradient(circle at 72% -30%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 10% 115%, rgba(35,80,240,.42) 0%, rgba(35,80,240,0) 44%), linear-gradient(110deg,#6A98FF 0%,#77CBEF 48%,#8195FF 100%);
  --site-header-bg: #639EED;
  --site-header-border: transparent;
  --site-footer-bg: #6A98FF;
  --site-footer-text: #2B303A;
  --site-footer-muted: #465468;
  --site-nav-text: #2B303A;
  --site-nav-hover: #0B5FFF;
  --site-footer-hover: #0B5FFF;

  /* 主题组件色：页面只负责结构，浅/深颜色统一从这里取 */
  --surface-page: #F7F8FB;
  --surface-card: #FFFFFF;
  --surface-soft: #F9FAFD;
  --surface-raised: #FFFFFF;
  --surface-hover: #F5F8FC;
  --surface-grid: #FAFCFF;
  --surface-tint: #F5F9FF;
  --surface-input: #FFFFFF;
  --text-strong: #0F172A;
  --text-soft: #5B667A;
  --border-soft: #E7EBF3;
  --grid-color: rgba(11,18,32,.03);
}

.site-data-label {
  font-family: var(--font);
  font-size: var(--site-data-label-size);
  font-weight: 500;
  line-height: var(--site-data-line-height);
}

.site-data-value {
  font-family: var(--font);
  font-size: var(--site-data-value-size);
  font-weight: 500;
  line-height: var(--site-data-line-height);
  font-variant-numeric: tabular-nums;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font);
}


/* ===================== 全站共享顶部 ===================== */
.site-header {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 66px;
  background-color: var(--site-header-bg);
  background-image: var(--site-header-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.site-header-inner {
  width: min(1120px, calc(100% - 40px));
  height: 66px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  align-items: center;
}

.site-brand {
  flex: 0 0 190px;
  width: 190px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
}

.site-brand-logo-image {
  display: block;
  flex: 0 0 auto;
  width: 78px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
}

/* 顶部与底部品牌 Logo：高分辨率 PNG 轮廓 + 七色斜面无缝流光 */
@keyframes site-brand-logo-flow {
  0% { background-position: 0 50%; }
  100% { background-position: 242.49px 50%; }
}

@supports ((-webkit-mask-image: url("./assets/brand/logo-black.png")) or (mask-image: url("./assets/brand/logo-black.png"))) {
  .site-brand,
  .site-footer-brand-logo {
    position: relative;
    isolation: isolate;
  }

  .site-brand { overflow: visible; }

  .site-brand::before,
  .site-brand::after,
  .site-footer-brand-logo::before,
  .site-footer-brand-logo::after {
    content: "";
    position: absolute;
    left: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      120deg,
      #ff6678 0,
      #ff9c4a 30px,
      #f2cf4a 60px,
      #45c781 90px,
      #087f8c 120px,
      #2448b8 150px,
      #9870e4 180px,
      #ff6678 210px
    );
    background-size: 242.49px 100%;
    background-position: 0 50%;
    background-repeat: repeat-x;
    -webkit-mask-image: url("./assets/brand/logo-black.png");
    mask-image: url("./assets/brand/logo-black.png");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: site-brand-logo-flow 10s linear infinite;
  }

  .site-brand::before,
  .site-brand::after {
    top: 5px;
    width: 78px;
    height: 44px;
  }

  .site-footer-brand-logo::before,
  .site-footer-brand-logo::after {
    top: 0;
    width: 92px;
    height: 52px;
  }

  .site-brand::before,
  .site-footer-brand-logo::before { z-index: 2; }

  .site-brand::after,
  .site-footer-brand-logo::after {
    z-index: 1;
    opacity: .16;
    filter: blur(4px);
  }

  /* 正常浏览只显示七色蒙版，避免 PNG 底图与蒙版重复叠加造成边缘发虚。 */
  .site-brand-logo-image,
  .site-footer-brand-logo-image {
    position: relative;
    z-index: 0;
    visibility: hidden;
  }

  /* html2canvas 的克隆页面不稳定支持 mask/伪元素：截图时改为单层 PNG。
     该类只加在截图克隆中，不会改变或闪烁用户正在浏览的页面。 */
  .site-capture-mode .site-brand::before,
  .site-capture-mode .site-brand::after,
  .site-capture-mode .site-footer-brand-logo::before,
  .site-capture-mode .site-footer-brand-logo::after {
    display: none !important;
  }

  .site-capture-mode .site-brand-logo-image,
  .site-capture-mode .site-footer-brand-logo-image {
    visibility: visible !important;
  }
}

.site-nav {
  min-width: 0;
  height: 66px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 40px;
}

.site-nav-link {
  position: relative;
  min-width: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--site-nav-text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}


.site-nav-link:hover,
.site-nav-link:active {
  color: var(--site-nav-hover);
  background: transparent;
}

.site-nav-link.active,
.site-nav-link[aria-current="page"] {
  color: var(--site-nav-hover);
}

.site-nav-link.active::after,
.site-nav-link[aria-current="page"]::after {
  position: absolute;
  left: 50%;
  bottom: 11px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--site-nav-hover);
  content: "";
  transform: translateX(-50%);
}


.site-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.site-theme-toggle {
  --toggle-size: 38px;
  --circle-bg: rgba(248,251,255,.27);
  --circle-hover-bg: rgba(255,255,255,.36);
  --sun-color: #EFB11F;
  --moon-color: #9BD8FF;
  --sun-size: 20px;
  --moon-size: 18px;
  --moon-glow: drop-shadow(0 0 2px rgba(112,164,255,.34));

  appearance: none;
  width: var(--toggle-size);
  height: var(--toggle-size);
  min-width: var(--toggle-size);
  min-height: var(--toggle-size);
  flex: 0 0 var(--toggle-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--circle-bg);
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: background-color .16s ease, transform .16s ease;
}
.site-theme-toggle:hover { background: var(--circle-hover-bg); }
.site-theme-toggle:active { transform: scale(.96); }
.site-theme-toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.56);
  outline-offset: 2px;
}

/* 主题按钮使用高分辨率 PNG 图片，不再使用 SVG 或 mask */
.site-theme-toggle .theme-icon {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  user-select: none;
  pointer-events: none;
}
.site-theme-toggle .theme-icon-sun {
  width: var(--sun-size);
  height: var(--sun-size);
}
.site-theme-toggle .theme-icon-moon {
  width: var(--moon-size);
  height: var(--moon-size);
  filter: var(--moon-glow);
}
.site-theme-toggle .theme-icon-sun { display: block; }
.site-theme-toggle .theme-icon-moon { display: none; }
html[data-site-theme="dark"] .site-theme-toggle .theme-icon-sun { display: none; }
html[data-site-theme="dark"] .site-theme-toggle .theme-icon-moon { display: block; }

/* 6 套：圆底始终同一套，只切黄太阳 / 蓝月亮 */
html[data-toggle-style="s1"] .site-theme-toggle {
  --circle-bg: rgba(255,255,255,.24); --circle-hover-bg: rgba(255,255,255,.32);
  --sun-color:#F5B400; --moon-color:#8FC5FF; --sun-size:20px; --moon-size:18px;
  --moon-glow:drop-shadow(0 0 3px rgba(112,178,255,.38));
}
html[data-toggle-style="s2"] .site-theme-toggle {
  --circle-bg: rgba(255,255,255,.30); --circle-hover-bg: rgba(255,255,255,.38);
  --sun-color:#F4B000; --moon-color:#82BEFF; --sun-size:20px; --moon-size:18px;
  --moon-glow:drop-shadow(0 0 3px rgba(96,166,255,.34));
}
html[data-toggle-style="s3"] .site-theme-toggle {
  --circle-bg: rgba(246,249,255,.20); --circle-hover-bg: rgba(255,255,255,.29);
  --sun-color:#FFC107; --moon-color:#91CAFF; --sun-size:21px; --moon-size:18px;
  --moon-glow:drop-shadow(0 0 4px rgba(102,184,255,.42));
}
html[data-toggle-style="s4"] .site-theme-toggle {
  --circle-bg: rgba(235,242,252,.25); --circle-hover-bg: rgba(245,249,255,.34);
  --sun-color:#F2AE00; --moon-color:#7DB7FF; --sun-size:20px; --moon-size:19px;
  --moon-glow:drop-shadow(0 0 4px rgba(85,151,255,.40));
}
html[data-toggle-style="s5"] .site-theme-toggle {
  --circle-bg: rgba(255,255,255,.18); --circle-hover-bg: rgba(255,255,255,.27);
  --sun-color:#FFB800; --moon-color:#9BCFFF; --sun-size:21px; --moon-size:18px;
  --moon-glow:drop-shadow(0 0 5px rgba(115,190,255,.45));
}
html[data-toggle-style="s6"] .site-theme-toggle {
  --circle-bg: rgba(248,251,255,.27); --circle-hover-bg: rgba(255,255,255,.36);
  --sun-color:#F6B72B; --moon-color:#A1C8FF; --sun-size:20px; --moon-size:18px;
  --moon-glow:drop-shadow(0 0 2px rgba(112,164,255,.34));
}


/* ===== 全站公共组件：自动流光「查看详情」按钮 =====
   使用方式：class="site-detail-button"
   固定选用：R5 清爽七色（黑字适配）
*/
.site-detail-button {
  position: relative;
  min-width: 92px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 17px;
  box-sizing: border-box;

  border: 0;
  border-radius: 999px;
  outline: 0;

  background: linear-gradient(
    90deg,
    #FF8585,
    #FFB76B,
    #FFEA7A,
    #86DFA0,
    #79E0E5,
    #8CB8FF,
    #B9A0FF,
    #FF8585
  );
  background-size: 500% 100%;
  background-position: 0% 50%;
  background-repeat: repeat-x;

  color: #111111 !important;
  font-family: var(--font);
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: none !important;
  filter: none !important;
  transform: none !important;

  animation: ipi6DetailVideoFlow 10s linear infinite;
  will-change: background-position;
}

.site-detail-button::before,
.site-detail-button::after {
  display: none !important;
  content: none !important;
}

.site-detail-button:hover,
.site-detail-button:active,
.site-detail-button:focus {
  color: #111111 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation-play-state: running;
}

.site-detail-button:focus-visible {
  outline: 0;
}

@keyframes ipi6DetailVideoFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 500% 50%; }
}

html[data-site-theme="dark"] .site-detail-button {
  color: #111111 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .site-detail-button {
    min-width: 84px;
    height: 32px;
    padding: 0 14px;
    font-size: 14px !important;
  }
}

/* ===== 临时深色预览：浅色版不改，后续若不满意可直接隐藏开关 ===== */
html[data-site-theme="dark"] {
  --bg: #10141B;
  --card: #171D27;
  --text: #F3F6FA;
  --muted: #9CA8B8;
  --line: #2A3443;
  --shadow: 0 12px 30px rgba(0, 0, 0, .28);

  --surface-page: #10141B;
  --surface-card: #171D27;
  --surface-soft: #1B2330;
  --surface-raised: #1E2733;
  --surface-hover: #232E3C;
  --surface-grid: #161D27;
  --surface-tint: #1B2634;
  --surface-input: #171D27;
  --text-strong: #F3F6FA;
  --text-soft: #9CA8B8;
  --border-soft: #2A3443;
  --grid-color: rgba(226,232,240,.055);
  color-scheme: dark;
}
html[data-site-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font);
}

button,
input,
textarea,
select,
option {
  font-family: var(--font);
}
html[data-site-theme="dark"] input,
html[data-site-theme="dark"] textarea,
html[data-site-theme="dark"] select {
  background: var(--surface-input) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] input::placeholder,
html[data-site-theme="dark"] textarea::placeholder {
  color: #7F8A9A !important;
}
/* 首页搜索框：深色模式只保留外层圆角容器，去掉 input 自己的矩形框 */
html[data-site-theme="dark"] .centerBox .ipInput {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
html[data-site-theme="dark"] .card,
html[data-site-theme="dark"] .centerBox,
html[data-site-theme="dark"] .p5-chart-card,
html[data-site-theme="dark"] .p5-sub-card,
html[data-site-theme="dark"] .modal,
html[data-site-theme="dark"] .tab,
html[data-site-theme="dark"] .pair,
html[data-site-theme="dark"] .compactNote,
html[data-site-theme="dark"] .envMid,
html[data-site-theme="dark"] .iso-step,
html[data-site-theme="dark"] .info-panel,
html[data-site-theme="dark"] .fingerprint-guide,
html[data-site-theme="dark"] .summary-line,
html[data-site-theme="dark"] .detail-col,
html[data-site-theme="dark"] .site-card,
html[data-site-theme="dark"] .empty-state,
html[data-site-theme="dark"] .table-wrap,
html[data-site-theme="dark"] button.ghost {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-site-theme="dark"] .site-card:hover {
  background: #1C2430 !important;
}
html[data-site-theme="dark"] .summary-title,
html[data-site-theme="dark"] .summary-label,
html[data-site-theme="dark"] .summary-value,
html[data-site-theme="dark"] .col-title,
html[data-site-theme="dark"] .pair .k,
html[data-site-theme="dark"] .pair .v {
  color: var(--text) !important;
}
html[data-site-theme="dark"] .muted,
html[data-site-theme="dark"] .summary-label {
  color: var(--muted);
}
@media (max-width: 640px) {
  html[data-site-theme="dark"] .summary-card tr {
    background: var(--card) !important;
    border-color: var(--line) !important;
  }
}

.site-menu-toggle {
  appearance: none;
  position: relative;
  border: 0;
  color: #172033;
  background: rgba(248,251,255,.27);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition: background-color .16s ease, transform .16s ease;
}

.site-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
}

.site-menu-toggle:hover { background: rgba(255,255,255,.36); }
.site-menu-toggle:active { transform: scale(.96); }
.site-menu-toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.56);
  outline-offset: 2px;
}

.site-menu-icon,
.site-menu-icon::before,
.site-menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: top .16s ease, transform .16s ease, background-color .16s ease;
}
.site-menu-icon { position: relative; }
.site-menu-icon::before,
.site-menu-icon::after {
  position: absolute;
  left: 0;
  content: "";
}
.site-menu-icon::before { top: -6px; }
.site-menu-icon::after { top: 6px; }
.site-header.menu-open .site-menu-icon { background: transparent; }
.site-header.menu-open .site-menu-icon::before { top: 0; transform: rotate(45deg); }
.site-header.menu-open .site-menu-icon::after { top: 0; transform: rotate(-45deg); }

/* ===================== 全站共享底部 ===================== */
.site-footer {
  width: 100%;
  margin: 42px 0 0;
  font-family: var(--font);
  color: var(--site-footer-text);
  background-color: var(--site-footer-bg);
  background-image: var(--site-footer-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-top: 0;
}

/* Footer 固定为品牌区，不跟随白天 / 黑夜模式改变颜色 */
html[data-site-theme="dark"] .site-footer-copy,
html[data-site-theme="dark"] .site-footer-social-label,
html[data-site-theme="dark"] .site-footer-meta a { color: var(--site-footer-muted); }
html[data-site-theme="dark"] .site-footer-slogan,
html[data-site-theme="dark"] .site-footer-title,
html[data-site-theme="dark"] .site-footer-list a,
html[data-site-theme="dark"] .site-footer-list button,
html[data-site-theme="dark"] .site-footer-brand-text { color: var(--site-footer-text); }

.site-footer-inner {
  width: min(1120px, calc(100% - 40px));
  height: 360px;
  min-height: 0;
  margin: 0 auto;
  padding: 44px 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

.site-footer-main {
  display: grid;
  grid-template-columns: 400px 200px 200px;
  column-gap: 160px;
  align-items: start;
}
.site-footer-about {
  width: 200px;
  justify-self: end;
}

.site-footer-brand-block { min-width: 0; }
.site-footer-brand-logo {
  width: 92px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  margin: 0 0 22px;
  text-decoration: none;
}
.site-footer-brand-logo-image {
  display: block;
  flex: 0 0 auto;
  width: 92px;
  height: 52px;
  object-fit: contain;
  image-rendering: auto;
}
.site-footer-slogan {
  max-width: 440px;
  margin: 0;
  color: var(--site-footer-text);
  font-size: 19px;
  line-height: 1.8;
  font-weight: 500;
}
.site-footer-social-label {
  margin: 0;
  color: var(--site-footer-muted);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}
.site-footer-social-row {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.site-socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}
.site-social-link {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  color: var(--site-footer-text);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity .16s ease, transform .16s ease;
}
.site-social-link:hover { background: transparent; opacity: .76; transform: translateY(-1px); }
.site-social-link img { width: 36px; height: 36px; display: block; object-fit: contain; }
.site-footer-title {
  margin: 4px 0 32px;
  color: var(--site-footer-text);
  font-size: 25px;
  line-height: 1.25;
  font-weight: 600;
}
.site-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}
.site-footer-list a,
.site-footer-list button {
  appearance: none;
  border: 0;
  padding: 0;
  color: var(--site-footer-text);
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: color .16s ease;
}
.site-footer-list a:hover,
.site-footer-list button:hover { color: var(--site-footer-hover); transform: none; }
html[data-site-theme="dark"] .site-footer-list a:hover,
html[data-site-theme="dark"] .site-footer-list button:hover,
html[data-site-theme="dark"] .site-footer-meta a:hover {
  color: var(--site-footer-hover);
}

.site-footer-copy {
  color: var(--site-footer-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.site-footer-bottom {
  position: absolute;
  left: 0;
  bottom: 40px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  align-items: end;
  justify-items: start;
  pointer-events: none;
}
.site-footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
.site-footer-meta a {
  color: var(--site-footer-muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  text-decoration: none;
  transition: color .16s ease;
}
.site-footer-meta a:hover { color: var(--site-footer-hover); }

@media (max-width: 1040px) {
  .site-header-inner { grid-template-columns: 150px minmax(0, 1fr) 150px; }
  .site-brand { flex-basis: 150px; width: 150px; }
  .site-nav { gap: 20px; }
  .site-nav-link { min-width: 0; padding: 0; font-size: 16px; }
  .site-footer-main { gap: 42px; }
}

@media (max-width: 780px) {
  .site-header-inner { width: min(100% - 24px, 1120px); display: flex; justify-content: space-between; }
  .site-brand { flex: 0 0 132px; width: 132px; }
  .site-brand-logo-image { width: 71px; height: 40px; }
  @supports ((-webkit-mask-image: url("./assets/brand/logo-black.png")) or (mask-image: url("./assets/brand/logo-black.png"))) {
    .site-brand::before,
    .site-brand::after { top: 7px; width: 71px; height: 40px; }
  }
  .site-menu-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    left: auto;
    right: 12px;
    top: 76px;
    width: min(240px, calc(100% - 24px));
    height: auto;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-card);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .site-header.menu-open .site-nav {
    display: flex;
    animation: site-mobile-menu-in .16s ease-out both;
  }
  .site-nav-link {
    min-height: 42px;
    padding: 0 13px;
    justify-content: flex-start;
    border-radius: 9px;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
  }
  .site-nav-link:hover,
  .site-nav-link:active { background: var(--surface-hover); }
  .site-nav-link.active,
  .site-nav-link[aria-current="page"] {
    color: var(--site-status-blue);
    background: rgba(47,107,255,.10);
  }
  .site-nav-link.active::after,
  .site-nav-link[aria-current="page"]::after { display: none; }
  .site-footer-inner { width: min(100% - 36px, 1120px); padding-top: 42px; }
  .site-footer-main { grid-template-columns: 1fr 1fr; gap: 36px 46px; }
  .site-footer-about { grid-column: 1 / -1; }
  .site-footer-bottom { grid-template-columns: 1fr; justify-items: start; text-align: left; }
}

@keyframes site-mobile-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.menu-open .site-nav { animation: none; }
  .site-menu-icon,
  .site-menu-icon::before,
  .site-menu-icon::after { transition: none; }
}

@media (max-width: 520px) {
  .site-header-actions { gap: 7px; }
  .site-footer-main { grid-template-columns: 1fr; gap: 34px; }
  .site-footer-about { grid-column: auto; }
  .site-footer-title { margin-bottom: 16px; }
  .site-footer-bottom { margin-top: 34px; }
  .site-footer-copy { white-space: normal; }
}

/* ========================================================================
   主题组件层 v1
   目的：所有页面的浅/深色适配集中在 shared-layout.css。
   页面内可以继续保留原来的浅色 CSS；深色模式由这里统一覆盖，避免每页漏改白块。
   ======================================================================== */

/* 首页：IP 信息、测速、推荐区 */
html[data-site-theme="dark"] .r,
html[data-site-theme="dark"] .ipdRow {
  background: var(--surface-soft) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] .rR,
html[data-site-theme="dark"] .ipLine,
html[data-site-theme="dark"] #f_ipOnly,
html[data-site-theme="dark"] #f_ipLoc,
html[data-site-theme="dark"] #f_asnCidr,
html[data-site-theme="dark"] #f_asnOwner,
html[data-site-theme="dark"] #f_netOwner,
html[data-site-theme="dark"] #f_asnRange,
html[data-site-theme="dark"] #f_timezone,
html[data-site-theme="dark"] #f_latlng,
html[data-site-theme="dark"] #f_ipHistory,
html[data-site-theme="dark"] #f_env,
html[data-site-theme="dark"] #f_leak,
html[data-site-theme="dark"] .partner-header,
html[data-site-theme="dark"] .partner-title {
  color: var(--text-strong) !important;
}
html[data-site-theme="dark"] .rL,
html[data-site-theme="dark"] .partner-desc,
html[data-site-theme="dark"] .p5-cc-lbl {
  color: var(--text-soft) !important;
}
html[data-site-theme="dark"] .btn,
html[data-site-theme="dark"] .p5-chart-card,
html[data-site-theme="dark"] .p5-sub-card,
html[data-site-theme="dark"] .p5-latency-icon,
html[data-site-theme="dark"] .partner-section {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] .p5-cc-right {
  border-left-color: var(--border-soft) !important;
  background-color: var(--surface-grid) !important;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px) !important;
}
html[data-site-theme="dark"] .partner-item {
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-tint) 100%) !important;
  border-color: #365EA8 !important;
}
html[data-site-theme="dark"] .partner-item:hover {
  background: var(--surface-hover) !important;
  border-color: #4A79D1 !important;
}
html[data-site-theme="dark"] .partner-icon-placeholder {
  background: transparent !important;
  border-color: transparent !important;
  color: #AFC2DB !important;
}

/* 首页详情弹窗 */
html[data-site-theme="dark"] .modalHead {
  background: linear-gradient(90deg, rgba(47,107,255,.12), rgba(42,230,216,.07) 55%, rgba(23,29,39,0)) !important;
}
html[data-site-theme="dark"] .envCol,
html[data-site-theme="dark"] .envMid,
html[data-site-theme="dark"] .tag-pill {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}

/* 泄露检测页 */
html[data-site-theme="dark"] body.ip-leak-page .box,
html[data-site-theme="dark"] body.ip-leak-page .panel {
  background: var(--surface-card) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
  box-shadow: none !important;
}
html[data-site-theme="dark"] body.ip-leak-page .summary-line {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .table-wrap {
  background: var(--surface-card) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .summary-value.safe {
  color: var(--site-status-blue) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .summary-value.danger {
  color: var(--site-status-red) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .summary-value.muted {
  color: var(--text-soft) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .panel-result-head,
html[data-site-theme="dark"] body.ip-leak-page td,
html[data-site-theme="dark"] body.ip-leak-page .knowledge {
  color: var(--text-strong) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .tool-desc,
html[data-site-theme="dark"] body.ip-leak-page .knowledge p,
html[data-site-theme="dark"] body.ip-leak-page .result-note {
  color: var(--text-soft) !important;
}
html[data-site-theme="dark"] body.ip-leak-page .server-tag,
html[data-site-theme="dark"] body.ip-leak-page .tag {
  background: var(--surface-soft) !important;
  color: var(--text-soft) !important;
  border-color: var(--border-soft) !important;
}
@media (max-width: 640px) {
  html[data-site-theme="dark"] body.ip-leak-page .table-wrap tr {
    background: var(--surface-raised) !important;
    border-color: var(--border-soft) !important;
  }
}
html[data-site-theme="dark"] .summary-line,
html[data-site-theme="dark"] .tool-box,
html[data-site-theme="dark"] .leak-card,
html[data-site-theme="dark"] .dns-card {
  background: var(--surface-card) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] table tr,
html[data-site-theme="dark"] table td,
html[data-site-theme="dark"] table th {
  border-color: var(--border-soft);
}

/* 指纹检测页：统一各种浅色信息块 */
html[data-site-theme="dark"] .meta-item,
html[data-site-theme="dark"] .category-head,
html[data-site-theme="dark"] .raw-box,
html[data-site-theme="dark"] .mode-tab,
html[data-site-theme="dark"] .isolation-notice,
html[data-site-theme="dark"] .iso-step,
html[data-site-theme="dark"] .iso-input,
html[data-site-theme="dark"] .iso-work-head,
html[data-site-theme="dark"] .room-box,
html[data-site-theme="dark"] .receipt-area,
html[data-site-theme="dark"] .iso-running,
html[data-site-theme="dark"] .iso-result-footer,
html[data-site-theme="dark"] .env-btn,
html[data-site-theme="dark"] .feature-icon,
html[data-site-theme="dark"] .info-panel,
html[data-site-theme="dark"] .info-panel-head,
html[data-site-theme="dark"] .fingerprint-guide,
html[data-site-theme="dark"] .fingerprint-guide-block {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] .info-row:hover,
html[data-site-theme="dark"] .info-row:focus-within,
html[data-site-theme="dark"] .env-btn:hover {
  background: var(--surface-hover) !important;
}
html[data-site-theme="dark"] .overview-card,
html[data-site-theme="dark"] .feature-card,
html[data-site-theme="dark"] .ad-feature {
  background: linear-gradient(145deg, #1D2633 0%, #18212D 58%, #162330 100%) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}

/* 泄露页与指纹页：页面内写死的浅色文字统一跟随深色主题 */
html[data-site-theme="dark"] .panel-titlebar,
html[data-site-theme="dark"] .panel-title,
html[data-site-theme="dark"] .knowledge h3,
html[data-site-theme="dark"] .probe-name,
html[data-site-theme="dark"] .server-url,
html[data-site-theme="dark"] .result-ip,
html[data-site-theme="dark"] .result-meta,
html[data-site-theme="dark"] .tool-name,
html[data-site-theme="dark"] .page-head h1,
html[data-site-theme="dark"] .summary-title,
html[data-site-theme="dark"] .meta-result,
html[data-site-theme="dark"] .category-title,
html[data-site-theme="dark"] .check-name,
html[data-site-theme="dark"] .check-value,
html[data-site-theme="dark"] .explain h2,
html[data-site-theme="dark"] .explain strong,
html[data-site-theme="dark"] .isolation-intro h2,
html[data-site-theme="dark"] .iso-step-title,
html[data-site-theme="dark"] .iso-start-card h3,
html[data-site-theme="dark"] .iso-work-head h3,
html[data-site-theme="dark"] .room-code,
html[data-site-theme="dark"] .receipt-title,
html[data-site-theme="dark"] .iso-result-title,
html[data-site-theme="dark"] .iso-result-name,
html[data-site-theme="dark"] .overview-label,
html[data-site-theme="dark"] .overview-status,
html[data-site-theme="dark"] .feature-card h3,
html[data-site-theme="dark"] .env-section-head h3,
html[data-site-theme="dark"] .info-panel-head h3,
html[data-site-theme="dark"] .info-value,
html[data-site-theme="dark"] .fingerprint-guide h2,
html[data-site-theme="dark"] .fingerprint-guide-block h3 {
  color: var(--text-strong) !important;
}
html[data-site-theme="dark"] .tool-desc,
html[data-site-theme="dark"] .knowledge p,
html[data-site-theme="dark"] .result-muted,
html[data-site-theme="dark"] .page-head p,
html[data-site-theme="dark"] .summary-kicker,
html[data-site-theme="dark"] .summary-desc,
html[data-site-theme="dark"] .meta-name,
html[data-site-theme="dark"] .privacy-note,
html[data-site-theme="dark"] .category-sub,
html[data-site-theme="dark"] .check-note,
html[data-site-theme="dark"] .isolation-intro p,
html[data-site-theme="dark"] .iso-step-desc,
html[data-site-theme="dark"] .iso-start-card p,
html[data-site-theme="dark"] .iso-work-head p,
html[data-site-theme="dark"] .room-label,
html[data-site-theme="dark"] .iso-hint,
html[data-site-theme="dark"] .receipt-desc,
html[data-site-theme="dark"] .iso-result-desc,
html[data-site-theme="dark"] .iso-result-note,
html[data-site-theme="dark"] .feature-card p,
html[data-site-theme="dark"] .env-section-head p,
html[data-site-theme="dark"] .info-label,
html[data-site-theme="dark"] .fingerprint-guide-intro,
html[data-site-theme="dark"] .fingerprint-guide-block p,
html[data-site-theme="dark"] .fingerprint-guide-note {
  color: var(--text-soft) !important;
}
html[data-site-theme="dark"] .result-stack.danger .result-ip,
html[data-site-theme="dark"] .result-stack.danger .result-meta,
html[data-site-theme="dark"] .overview-card.bad .overview-status,
html[data-site-theme="dark"] .info-row.is-bad .info-label,
html[data-site-theme="dark"] .info-row.is-bad .info-value,
html[data-site-theme="dark"] .fingerprint-guide-block.risk h3 {
  color: var(--site-status-red) !important;
}
html[data-site-theme="dark"] .server-tag {
  color: var(--text-soft) !important;
  background: var(--surface-soft) !important;
  border-color: var(--border-soft) !important;
}

/* 跨境导航页 */
html[data-site-theme="dark"] .quick-nav,
html[data-site-theme="dark"] .category-section {
  background: var(--surface-card) !important;
  border-color: var(--border-soft) !important;
  box-shadow: none !important;
}
html[data-site-theme="dark"] .quick-nav-title,
html[data-site-theme="dark"] .guide-group-title,
html[data-site-theme="dark"] .quick-group-title,
html[data-site-theme="dark"] .category-title,
html[data-site-theme="dark"] .site-name {
  color: var(--text-strong) !important;
}
html[data-site-theme="dark"] .quick-nav-title {
  border-bottom-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] .quick-link,
html[data-site-theme="dark"] .site-desc {
  color: var(--text-soft) !important;
}
html[data-site-theme="dark"] .quick-link:hover,
html[data-site-theme="dark"] .quick-link.active {
  color: #8FB5FF !important;
  background: var(--surface-hover) !important;
}
html[data-site-theme="dark"] .site-card,
html[data-site-theme="dark"] .site-icon,
html[data-site-theme="dark"] .fallback-badge,
html[data-site-theme="dark"] .empty-state {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] .site-card:hover {
  background: var(--surface-hover) !important;
}

/* 批量工具：表格/预览/控制区 */
html[data-site-theme="dark"] .summary-bar,
html[data-site-theme="dark"] .preview-list,
html[data-site-theme="dark"] .table-wrap,
html[data-site-theme="dark"] .bar,
html[data-site-theme="dark"] button.secondary,
html[data-site-theme="dark"] button.ghost {
  background: var(--surface-raised) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-soft) !important;
}
html[data-site-theme="dark"] th {
  background: var(--surface-soft) !important;
  color: var(--text-strong) !important;
}
html[data-site-theme="dark"] tr:hover td {
  background: var(--surface-hover) !important;
}


/* 品牌区 + 两大分类 Footer：最终覆盖旧响应式规则 */
@media (max-width: 1180px) {
  .site-footer-main { grid-template-columns: minmax(330px, 1.35fr) repeat(2, minmax(160px, .65fr)); column-gap: 72px; }
}
@media (max-width: 900px) {
  .site-footer-inner { height: auto; min-height: 0; padding: 48px 0 26px; }
  .site-footer-main { grid-template-columns: 1fr 1fr; gap: 44px 56px; }
  .site-footer-brand-block { grid-column: 1 / -1; }
  .site-footer-about { width: auto; grid-column: auto; justify-self: stretch; }
  .site-footer-bottom { position: static; margin-top: 40px; }
  .site-footer-meta { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .site-footer-inner { width: min(100% - 32px, 1120px); padding: 42px 0 24px; }
  .site-footer-main { grid-template-columns: 1fr; gap: 38px; }
  .site-footer-brand-block { grid-column: auto; }
  .site-footer-about { width: auto; justify-self: stretch; }
  .site-footer-brand-text { font-size: 34px; }
  .site-footer-slogan { font-size: 17px; line-height: 1.75; }
  .site-footer-title { margin-bottom: 20px; font-size: 20px; }
  .site-footer-list { gap: 14px; }
  .site-footer-list a, .site-footer-list button { font-size: 15px; }
  .site-footer-meta { gap: 12px 18px; }
  .site-footer-copy { white-space: normal; }
}

/* ===== 全站字体统一：只用 sans-serif，普通文字默认500 ===== */
html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
option {
  font-family: var(--font) !important;
}

body,
button,
input,
select,
textarea,
option {
  font-weight: 500;
}

html,
body {
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}