/* ============================================================
   通灵 — 统一品牌蓝主题覆盖
   作用：将红色框所示的深海军蓝/深科技蓝背景统一为品牌蓝系，
         与页面主视觉的蓝色保持一致。
   引入方式：在所有 HTML 的 </head> 前、最后一份 CSS 之后加载。
   ============================================================ */

:root {
  --unified-brand: #193fae;
  --unified-brand-dark: #123285;
  --unified-brand-darker: #0d267a;
  --unified-brand-light: #2856c5;
  --unified-brand-lighter: #3d6edb;
  --unified-surface-start: #142f8a;
  --unified-surface-mid: #193fae;
  --unified-surface-end: #214bb8;
}

/* ---------- 1. 顶部导航 ---------- */
.site-header {
  background: linear-gradient(180deg, var(--unified-surface-mid) 0%, var(--unified-surface-end) 100%) !important;
  border-bottom-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 8px 22px rgba(0, 60, 150, .18) !important;
}

/* 首页透明导航：与 Hero 背景融为一体，参考 QUANLAN 风格 */
@media (min-width: 1001px) {
  .home-page .site-header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .home-page .site-header .brand-word > span,
  .home-page .site-header .nav-links > a,
  .home-page .site-header .nav-directory-item > .nav-directory-page-link {
    color: #0c326d;
  }

  .home-page .site-header .brand-word small,
  .home-page .site-header .nav-directory-toggle {
    color: rgba(12, 50, 109, .72);
  }

  .home-page .site-header .lang-toggle,
  .home-page .site-header .btn-icon-nav {
    color: #0c326d;
    background: transparent;
    border-color: transparent;
  }

  .home-page .site-header .btn-icon-nav:hover,
  .home-page .site-header .btn-icon-nav:focus-visible,
  .home-page .site-header .lang-toggle:hover,
  .home-page .site-header .lang-toggle:focus-visible {
    color: #193fae;
    background: rgba(25, 63, 174, .08);
    border-color: transparent;
  }

  .home-page .site-header .nav-links > a:hover,
  .home-page .site-header .nav-directory-item > .nav-directory-page-link:hover,
  .home-page .site-header .nav-directory-toggle:hover,
  .home-page .site-header .nav-directory-toggle:focus-visible,
  .home-page .site-header .nav-directory-item.is-open .nav-directory-toggle {
    color: #193fae;
    background: rgba(25, 63, 174, .08);
  }

  .home-page .site-header .nav-links > a.active,
  .home-page .site-header .nav-directory-item > .nav-directory-page-link.active {
    color: #193fae;
  }

  .home-page .site-header .lang-opt {
    color: #0c326d;
  }

  .home-page .site-header .lang-opt.is-active {
    color: #193fae;
  }

  /* 滚动后导航栏变回品牌蓝（参考全澜滚动效果） */
  .home-page .site-header.is-scrolled {
    background: linear-gradient(180deg, var(--unified-surface-mid) 0%, var(--unified-surface-end) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 8px 22px rgba(0, 60, 150, .18) !important;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .home-page .site-header.is-scrolled .brand-word > span,
  .home-page .site-header.is-scrolled .nav-links > a,
  .home-page .site-header.is-scrolled .nav-directory-item > .nav-directory-page-link {
    color: #ffffff;
  }

  .home-page .site-header.is-scrolled .brand-word small,
  .home-page .site-header.is-scrolled .nav-directory-toggle {
    color: rgba(255, 255, 255, .72);
  }

  .home-page .site-header.is-scrolled .lang-toggle,
  .home-page .site-header.is-scrolled .btn-icon-nav {
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
  }

  .home-page .site-header.is-scrolled .btn-icon-nav:hover,
  .home-page .site-header.is-scrolled .btn-icon-nav:focus-visible,
  .home-page .site-header.is-scrolled .lang-toggle:hover,
  .home-page .site-header.is-scrolled .lang-toggle:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .55);
  }

  .home-page .site-header.is-scrolled .nav-links > a:hover,
  .home-page .site-header.is-scrolled .nav-directory-item > .nav-directory-page-link:hover,
  .home-page .site-header.is-scrolled .nav-directory-toggle:hover,
  .home-page .site-header.is-scrolled .nav-directory-toggle:focus-visible,
  .home-page .site-header.is-scrolled .nav-directory-item.is-open .nav-directory-toggle {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
  }

  .home-page .site-header.is-scrolled .nav-links > a.active,
  .home-page .site-header.is-scrolled .nav-directory-item > .nav-directory-page-link.active {
    color: #9feaff;
  }

  .home-page .site-header.is-scrolled .lang-opt {
    color: rgba(255, 255, 255, .9);
  }

  .home-page .site-header.is-scrolled .lang-opt.is-active {
    color: #9feaff;
  }
}

/* ---------- 2. Hero 指标条 ---------- */
.hero-metrics {
  background: linear-gradient(90deg, var(--unified-surface-start), var(--unified-surface-mid) 54%, var(--unified-surface-end)) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

/* ---------- 3. 首页深色带 ---------- */
.home-band-dark {
  background:
    radial-gradient(circle at 82% 15%, rgba(255, 255, 255, .18), transparent 25%),
    radial-gradient(circle at 16% 100%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(135deg, var(--unified-surface-start) 0%, var(--unified-surface-mid) 55%, var(--unified-surface-end) 100%) !important;
}

.home-band-dark::before {
  opacity: .28;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
}

.home-band-dark .section-label {
  color: #c2ecff;
}

.home-band-dark .section-title,
.home-band-dark .section-header h2 {
  color: #ffffff;
}

.home-band-dark .section-desc {
  color: rgba(230, 247, 255, .8);
}

/* 数据集预览小卡片在深色带中的背景 */
.home-band-dark.dataset-preview-light .preview-entry {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
}

.home-band-dark.dataset-preview-light .preview-entry:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #9feaff;
}

.home-band-dark.dataset-preview-light .preview-entry-name {
  color: #ffffff;
}

.home-band-dark.dataset-preview-light .preview-entry-meta {
  color: rgba(200, 239, 255, .72);
}

/* Leaderboard 首页深色表格 */
#home-leaderboard .data-table-wrap {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
}

#home-leaderboard .data-table th {
  color: #a8e9ff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .12);
}

#home-leaderboard .data-table td {
  color: rgba(239, 249, 255, .9);
  border-color: rgba(255, 255, 255, .1);
}

/* ---------- 4. 通用深色区块 ---------- */
.dark-section {
  background: linear-gradient(145deg, var(--unified-surface-start), var(--unified-surface-mid) 55%, var(--unified-surface-end)) !important;
}

.dark-section::before {
  opacity: .24;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
}

/* ---------- 5. 页脚 ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--unified-surface-start) 0%, var(--unified-brand-darker) 100%) !important;
}

/* ---------- 6. 测评框架页深色带 ---------- */
.framework-page .framework-hero.subpage-deep-hero,
.framework-page .framework-dark-band {
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, .16), transparent 28%),
    radial-gradient(circle at 8% 94%, rgba(255, 255, 255, .12), transparent 38%),
    linear-gradient(135deg, var(--unified-surface-start) 0%, var(--unified-surface-mid) 55%, var(--unified-surface-end) 100%) !important;
}

/* 框架页代码/控制台面板 */
.framework-page :is(.architecture-code, .formula-board, .tool-console) {
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(230, 247, 255, .95) !important;
}

.framework-page .tool-output {
  background: rgba(255, 255, 255, .08) !important;
}

.framework-page :is(.formula-step code, .tool-output p, .output-tree span) {
  color: rgba(200, 239, 255, .85) !important;
}

/* ---------- 7. 数据集页深色英雄区 ---------- */
.dataset-page .hero.subpage-deep-hero,
.dataset-page .subpage-deep-hero .category-donut::after {
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, .16), transparent 28%),
    radial-gradient(circle at 8% 94%, rgba(255, 255, 255, .12), transparent 38%),
    linear-gradient(135deg, var(--unified-surface-start) 0%, var(--unified-surface-mid) 55%, var(--unified-surface-end) 100%) !important;
}

/* ---------- 8. 浮层小卡 ---------- */
.index-card {
  background: rgba(25, 63, 174, .96) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

/* ---------- 9. 数据占比饼图中心 ---------- */
.empathy-pie::after {
  background: linear-gradient(145deg, var(--unified-surface-start), var(--unified-surface-mid)) !important;
}

/* ---------- 10. 首页 Hero 布局微调 ---------- */
@media (min-width: 1001px) {
  /* 左侧文案垂直居中 */
  #home-overview {
    align-items: center !important;
    /* 背景至少铺满当前视口，避免隐藏指标条后首屏底部露白。 */
    height: max(48.73vw, 100vh) !important;
    min-height: 100vh !important;
  }

  #home-overview > .section-shell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 右侧大脑图往左移，避免贴边 */
  /* 背景芯片与大脑作为一个视觉组，整体向左、向下微调。 */
  #home-overview .hb-artwork {
    left: 50.5%;
    top: calc(50% + 3.75vw);
  }

  /* 以背景芯片的中心轴为基准，校准独立叠加的大脑层。 */
  .hb-brain-stage {
    right: 6.2% !important;
  }
}

/* 首屏先保持纯净，向下滚动后再展示数据指标条。 */
.home-page #home-metrics {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear 0s;
}

.home-page:not(.is-scrolled) #home-metrics {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
}

@media (prefers-reduced-motion: reduce) {
  .home-page #home-metrics {
    transition: none;
  }
}

/* ---------- 11. 子页面浅色信息卡 ---------- */
.dataset-page .hero.subpage-deep-hero .hero-facts > div,
.dataset-page .hero.subpage-deep-hero .distribution,
.framework-page .framework-hero.subpage-deep-hero .framework-hero-tags span,
.framework-page .framework-hero.subpage-deep-hero .framework-stat {
  background: rgba(248, 252, 255, .94) !important;
  border-color: rgba(22, 119, 255, .18) !important;
  box-shadow: 0 12px 30px rgba(12, 55, 108, .1) !important;
}

.dataset-page .hero.subpage-deep-hero .hero-facts strong,
.framework-page .framework-hero.subpage-deep-hero .framework-stat strong {
  color: #1459b8 !important;
}

.dataset-page .hero.subpage-deep-hero .hero-facts span,
.framework-page .framework-hero.subpage-deep-hero .framework-hero-tags span,
.framework-page .framework-hero.subpage-deep-hero .framework-stat span {
  color: #526b89 !important;
}

.dataset-page .hero.subpage-deep-hero .category-donut::after {
  background: #f8fcff !important;
}

.dataset-page .hero.subpage-deep-hero .donut-center b {
  color: #173b72 !important;
}

.dataset-page .hero.subpage-deep-hero .donut-center span,
.dataset-page .hero.subpage-deep-hero .legend-item {
  color: #5a7190 !important;
}

.dataset-page .hero.subpage-deep-hero .legend-item b {
  color: #173b72 !important;
}

/* 自有数据集与模型榜单的标题区使用与导航栏相同的品牌蓝。 */
.owned-hero-bg .subpage-deep-hero,
body:not(.home-page) #leaderboard-overview.subpage-hero.subpage-deep-hero {
  background: linear-gradient(180deg, var(--unified-surface-mid) 0%, var(--unified-surface-end) 100%) !important;
}