/* ============================================================
   渡鸦攻略 · 设计系统 · 覆盖层
   design-system/overlay.css

   作用：把散落在 35 个 CSS 文件里的「硬编码颜色 / 随手圆角 / 离群间距」
   统一收敛到 tokens.css 的设计变量上。

   2026-09-23 深色主题下线后的定位
   ------------------------------------------------------------
   全站唯一主题 = 浅色。原先为「压住深色」而写的对抗式规则已删除：
     · 深色 :root 变量副本（27 份）已从各自源文件删除；
     · 本文件的 html:root 覆盖块、#shot-node 深色块、.btn.primary 补丁等
       一并删除（不再需要，留着反而和源文件里的新值打架）。
   本层现在只做两件事：
     ① 全局规范：滚动条 / 焦点环 / 打印 / 减少动效 / 字体与行高；
     ② 跨页统一：卡片、标题、页脚、文章正文等「多份源文件各写一遍」的组件，
        在这里收敛到 token，避免逐文件改。
   能下沉到源文件的（标题竖条、渐变文字、hover 位移、筛选选中态）
   已经下沉，本节不再重复覆盖。

   为什么还保留 !important
     站点里有 416 处 <link rel=stylesheet> 写在 <body> 内（排在主题之后），
     同特异性下「后出现者胜」，不加 !important 压不住这些后来的规则。

   依赖：必须在 theme-light.css 之后加载。
   ============================================================ */

/* ---------- 1. 基础排版：字体与行高 ---------- */
html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--ink-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题统一收窄行高，避免大字号下过度松散 */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  line-height: var(--lh-tight);
}

p, li, td, th, dd, dt {
  color: var(--ink-body);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ---------- 2. 布局容器：统一最大宽度与左右留白 ---------- */
.container {
  max-width: var(--container);
  padding: 0 var(--container-pad);
}

/* 正文与页脚之间的留白统一到 48px（原 44px 为随手值） */
body > .container {
  margin-bottom: var(--sp-12);
}

/* 区块上下间距统一到 40px（原值一致，这里改用变量以便后续统一调整） */
section {
  padding: var(--sp-10) 0;
}

/* ---------- 3. 顶部导航：修掉深色残留 ----------
   原 main.css / article.css 写死 rgba(13,16,32,.9)（深夜蓝），
   在浅色主题下是一整条深色横条，与页面割裂。

   【必须 !important】这条规则被复制进了 27 个 CSS 文件
   （article.css / site/*.css …），而且它们是在 <body> 里加载的，
   排在 theme-light.css 与本覆盖层之后。同特异性下后出现者胜，
   不加 !important 压不住。 */
header {
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--sh-1);
}

.header-inner {
  gap: var(--sp-5);
}

/* 页头 Logo 改为横版组合标（logo.png）：旧的 38×38 方形图标规则散落在 22 个页面 CSS 里，
   这里用 !important 统一覆盖成「高度 38px、宽度自适应」。 */
.logo img {
  height: 38px !important;
  width: auto !important;
  border-radius: 0 !important;
  max-width: 62vw;
}

/* 下拉菜单：浅色 + 柔和阴影（原为深色卡 + 重阴影） */
.nav-item .dropdown {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: var(--sp-2);
}

.dropdown a {
  color: var(--ink-muted);
  border-radius: var(--r-sm);
}

.dropdown a:hover,
.dropdown a.on {
  background: var(--surface-sunken);
  color: var(--brand-ink);
}

/* ---------- 4. 面包屑 ---------- */
.crumb {
  color: var(--ink-muted);
  font-size: var(--fs-13);
  gap: var(--sp-2);
  background: var(--surface-page);
}

.crumb a,
.crumb a:hover {
  color: var(--ink-muted);
}

.crumb a:hover {
  color: var(--brand-ink);
}

.crumb b,
.crumb .cur,
.crumb .crumb-cur {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- 5. 页面标题 / 区块标题 ---------- */
.page-head h1,
.section-title {
  color: var(--ink);
}

/* 标题前的渐变竖条已于 2026-09-23 在源文件里删除（26 处），这里不再补色 */

.page-head p,
.section-sub {
  color: var(--ink-muted);
}

/* ---------- 6. 卡片：统一表面、描边、圆角、阴影 ---------- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* 2026-09-23：hover 去掉上浮位移。
   高密度网格里位移会让整片内容抖动，且 translateY(-2px)+阴影是模板化的 AI 信号。
   改为「背景 + 边框」反馈：安静、明确、不晃。 */
.card:hover {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  box-shadow: var(--sh-1);
  transform: none;
}

/* ---------- 7. 徽章 / 标签：统一几何 ---------- */
.badge {
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  padding: 1px var(--sp-2);
  line-height: 1.7;
}

/* ---------- 8. 提示条 note-bar：修掉青底青字残留 ---------- */
.note-bar {
  background: var(--brand-softer);
  border: 1px solid rgba(77, 141, 255, .32);
  border-radius: var(--r-md);
  color: var(--ink-body);
  padding: var(--sp-3) var(--sp-4);
}

.note-bar b {
  color: var(--brand-ink);
}

.note-bar .legend {
  color: var(--ink-faint);
}

/* ---------- 9. 首屏面板 ---------- */
.hero-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.hero-panel h3,
.gacha-panel h3 {
  color: var(--ink-muted);
}

/* AI 配队面板：原为深蓝渐变 + 青色外发光，浅色主题下极其突兀 */
.ai-panel {
  background: linear-gradient(160deg, #f3fafd 0%, #eef2ff 100%);
  border: 1px solid rgba(77, 141, 255, .45);
  box-shadow: var(--sh-2);
}

.ai-panel h3 {
  color: var(--brand-ink);
}

.ai-desc {
  color: var(--ink-muted);
}

.ai-total {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.ai-total .lbl,
.ai-total .unit {
  color: var(--ink-muted);
}

.ai-total b {
  color: var(--brand-ink);
}

.ai-tiers .ai-tier {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.ai-tiers .ai-tier span {
  color: var(--ink-muted);
}

.ai-tiers .ai-tier.is-top {
  background: linear-gradient(135deg, rgba(77, 141, 255, .10), rgba(255, 107, 157, .10));
  border-color: rgba(77, 141, 255, .40);
  box-shadow: var(--sh-1);
}

.ai-btn {
  border-radius: var(--r-md);
  color: var(--on-brand);
}

.ai-modes span {
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  border: 1px dashed var(--line);
}

.ai-modes span:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* ---------- 10. 公告栏 ---------- */
.notice-bar {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.notice-bar .label {
  color: var(--brand-ink);
}

.notice-list li b {
  color: var(--ink);
}

/* ---------- 11. 资讯标签：统一几何，保留分类色相 ---------- */
.news-tag {
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  padding: 3px var(--sp-2);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.6;
}

.news-title {
  letter-spacing: 1px;
}

.news-item {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.news-item:hover {
  background: var(--surface-sunken);
  border-color: var(--brand);
}

.news-item-title {
  color: var(--ink);
}

.news-item-date {
  color: var(--ink-faint);
}

/* ---------- 12. 数据统计 ----------
   渐变文字已在 main.css 里改为主色深态（background-clip:text 可读性差），
   这里只补副标题颜色。 */
.stat-card span {
  color: var(--ink-muted);
}

/* ---------- 13. 兑换码 ---------- */
.code-item {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.code-item code {
  color: var(--gold);
}

.code-item button {
  background: var(--brand);
  color: var(--on-brand);          /* 亮底配深字（白字对比度不足 3:1） */
  border-radius: var(--r-sm);
}

.code-item button:hover {
  background: var(--brand-ink);
}

/* ---------- 14. 图鉴卡片 ---------- */
.gallery-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.gallery-card:hover {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  box-shadow: none;
  transform: none;
}

.gallery-card img {
  border: 1px solid var(--line-subtle);
}

.gallery-tab {
  color: var(--ink-muted);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.gallery-tab:hover {
  color: var(--ink);
  background: var(--brand-softer);
}

.gallery-tab.active {
  color: var(--brand-ink);
  background: var(--surface-raised);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.gallery-filter select,
.gallery-filter input[type="text"] {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
}

.gallery-filter select:focus,
.gallery-filter input[type="text"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.gallery-page-btn {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  border-radius: var(--r-sm);
}

.gallery-page-btn:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* 当前页：描边式（与筛选按钮同一语言），不再渐变填充 */
.gallery-page-btn.active {
  background: var(--surface-raised);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  color: var(--brand-ink);
}

.gallery-empty {
  color: var(--ink-faint);
}

/* ---------- 15. 文章正文 ---------- */
.article-body {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body td {
  color: var(--ink-body);
}

.article-body h2 {
  border-bottom: 1px solid var(--line-subtle);
  color: var(--ink);
}


.article-body h3 {
  color: var(--brand-ink);
}

.article-body blockquote {
  border-left: 3px solid var(--brand-2);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.article-body pre {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-body);
}

.article-body th {
  background: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--line);
}

.article-body td {
  border: 1px solid var(--line);
}

.article-body tr:nth-child(even) td {
  background: var(--surface-sunken);
}

.article-body .meta-chip,
.meta-chip {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  border-radius: var(--r-full);
}

.article-body .link-btn,
.back-btn {
  border-radius: var(--r-full);
  color: var(--brand-ink);
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.article-body .link-btn:hover,
.back-btn:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.article-list .card-excerpt p,
.article-list .card-excerpt li {
  color: var(--ink-muted);
}

.article-list .card h3 {
  color: var(--ink);
}

/* ---------- 16. 页脚 ---------- */
footer {
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
  padding: var(--sp-8) 0 var(--sp-6);
}

footer h5 {
  color: var(--ink);
  font-size: var(--fs-14);
  margin-bottom: var(--sp-3);
}

footer p,
footer a {
  color: var(--ink-muted);
  font-size: var(--fs-12);
}

footer a:hover {
  color: var(--brand-ink);
}

.copyright {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-subtle);
  color: var(--ink-muted);
}

.copyright .icp:hover,
.copyright .police:hover {
  color: var(--brand-ink);
}

.qr-pop {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

/* ---------- 17. 滚动条：浅色配色 ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--surface-page);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--surface-page);
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid var(--surface-page);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* ---------- 18. 焦点可见性（键盘可访问性） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- 19. 尊重系统「减少动效」设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. 打印：去掉阴影与背景，保证可读性 ---------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .card,
  .article-body,
  .gallery-card {
    box-shadow: none;
    border-color: #ccc;
  }

  header,
  footer,
  .edit-dock {
    display: none !important;
  }
}

/* ============================================================
   21. 去 AI 味（2026-09-23 · 方向：青蓝+琥珀冷暖对比 / 紧实圆角 / 无位移 hover）

   AI 味的本质是「装饰代替设计」：用渐变竖条装饰标题、用渐变按钮吸引注意、
   用统一的位移 hover 表示可交互。本节做的是减法——把装饰拿掉，
   让层次回到字号、字重、留白身上。
   ============================================================ */

/* ---------- 21.1～21.4 已于 2026-09-23 下沉到各自的源文件 ----------
   标题渐变竖条（26 处）、渐变文字、hover 位移（24 处）都已在源文件里删掉，
   筛选类按钮的选中态也从「渐变填充」改成「描边」，本节不再需要覆盖。

   唯一保留的渐变：主 CTA（.ai-btn）——电光蓝→蜜桃粉，是全站有意为之的强调点，
   配深字而非白字（渐变两端都是亮色，白字压不住）。 */
.ai-btn {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  color: var(--on-brand) !important;
}

/* ---------- 21.5 统一 hover 反馈：背景 + 边框，安静且明确 ---------- */
.card:hover,
.news-item:hover,
.achv-card:hover,
.fork-card:hover,
.set-card:hover,
.char-card:hover,
.drive-card:hover,
.act-card:hover,
.other-card:hover,
.v-card:hover,
.mod-card:hover,
.gallery-card:hover,
.team-card-link:hover .team-card,
.article-list .card:hover {
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

/* 封面图 / 头像：轻微缩放，容器需 overflow:hidden */
.gallery-card:hover img,
.char-card:hover img,
.v-card:hover img,
.g-card-char .char-avatar img {
  transition: transform var(--dur-slow) var(--ease);
}

.gallery-card:hover img,
.char-card:hover img,
.v-card:hover img {
  transform: scale(1.04);
}

/* 按钮：只加深背景，不位移 */
.code-item button:hover,
.ai-btn:hover,
.gallery-page-btn:hover {
  background: var(--brand-deep) !important;
  transform: none !important;
}

/* 导航 / Tab：背景 + 文字 */
.nav-item:hover,
.main-nav a:hover,
.dropdown a:hover,
.gallery-tab:hover,
.crumb a:hover,
footer a:hover {
  background: var(--surface-sunken);
  color: var(--brand-ink);
  transform: none !important;
}

/* ---------- 21.6 过渡统一：消灭 transition:all ----------
   transition:all 是性能反模式（什么属性变了都补间），也是「没想清楚要动什么」的标志。 */
.card,
.news-item,
.achv-card,
.fork-card,
.set-card,
.char-card,
.drive-card,
.act-card,
.other-card,
.v-card,
.mod-card,
.gallery-card,
.team-card,
.article-list .card,
.nav-item,
.main-nav a,
.skin-handle,
.skin-item,
.edit-dock button {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease) !important;
}

/* ---------- 21.7 圆角统一到紧实档（4 / 8 / 12 / 16） ---------- */
.card,
.gallery-card,
.hero-panel,
.article-body,
.news-grid,
.gacha-panel,
.team-card,
.article-list .card {
  border-radius: var(--r-lg) !important;   /* 12px */
}

button,
.btn,
.code-item button,
.ai-btn,
.gallery-filter select,
.gallery-filter input[type="text"],
.news-item,
.code-item,
.meta-chip,
.dropdown,
.nav-item {
  border-radius: var(--r-md) !important;   /* 8px */
}

.badge,
.news-tag,
.gallery-page-btn {
  border-radius: var(--r-sm) !important;   /* 4px */
}

/* ---------- 21.8 紫色 UI 改走琥珀辅色 ----------
   注意：游戏元素色（.el-相 / .el-暗 等）和稀有度色板是内容语义，
   **不在本列**，保持紫色不动。这里只改「把紫当 UI 强调色」的位置。 */
.badge.role {
  background: var(--warm-soft) !important;
  /* 亮珊瑚在白底只有 3.0:1，标签文字必须用深态 warm-ink */
  color: var(--warm-ink) !important;
  border-color: var(--brand-2) !important;
}

.article-body .link-btn,
.back-btn {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--brand-ink) !important;
}

.article-body .link-btn:hover,
.back-btn:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand-ink) !important;
}

.ai-tiers .ai-tier.is-top {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  box-shadow: none !important;
}

.article-body .concl {
  background: var(--brand-softer) !important;
  border-color: rgba(77, 141, 255, .28) !important;
}

/* ---------- 21.9 标题层次补偿：竖条拿掉后，靠字号/字重/留白 ---------- */
.section-title {
  font-size: var(--fs-20) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  margin-bottom: var(--sp-1) !important;
}

.section-sub {
  margin-bottom: var(--sp-6) !important;
  font-size: var(--fs-13);
}

.page-head h1 {
  font-size: var(--fs-28) !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
}

.page-head {
  padding: var(--sp-6) 0 var(--sp-5) !important;
}

.article-body h2 {
  font-size: var(--fs-20) !important;
  font-weight: 700 !important;
  margin: var(--sp-8) 0 var(--sp-3) !important;
  padding-bottom: var(--sp-2) !important;
}

/* ---------- 21.10 间距节奏：打破「每个 section 都 40px」的流水线 ---------- */
.hero {
  padding: var(--sp-6) 0 var(--sp-16) !important;   /* 首屏后大喘气 64px */
}

/* 【必须排除 .panel】.panel 是组件（自带 20px 内边距），不是页面主区块。
   配队工具把三块面板写成 <section class="panel">，若不排除，这条 !important
   会把 .panel 的横向内边距一起压成 0，整块文案贴到卡片边框上（2026-09-24 修复）。
   排除后 .panel 回到 team-components.css 里的 padding:20px，保持单一数据源。 */
section:not(.panel) {
  padding: var(--sp-12) 0 !important;               /* 主区块 48px */
}

/* 节奏层：不同性质的区块给不同呼吸量，避免「每条都一样高」的流水线感。
   用 :has() 做渐进增强——老浏览器不认这条规则，自动降级到上面的 48px。 */
section:has(.grid9),        /* 常用导航：工具性，安静一点 */
section.gallery-section {   /* 常用图鉴：同为工具性 */
  padding: var(--sp-10) 0 !important;               /* 40px */
}

section:has(.news-layout) { /* HOT 热门攻略：首页真正的重点 */
  padding: var(--sp-14) 0 !important;               /* 56px */
}

body > .container {
  margin-bottom: var(--sp-12) !important;
}

/* 首页标题区容器（.home-head，装首页那行 H1）：它是 body 直接子级 .container，
   会吃上面这条 48px 底边距，把 Hero 顶下去 → 这里归零，上下留白改由 .home-head 的 padding 控制。
   2026-09-27 用户反馈首页 banner 离顶部太远：实测就是这条底边距叠在页头（65px）和 Hero 上内边距之上，
   banner 顶边被顶到 162px，故归零。
   2026-11-01 用户要求 H1 不再隐藏、大方展示：类名由 .home-seo-head 改为 .home-head，
   排版样式见 main.css「首页标题区」。 */
body > .container.home-head {
  margin-bottom: 0 !important;
}

/* 首页首屏 .hero 的上内边距：被上面 section:not(.panel) 的 48px !important 覆盖，
   2026-09-27 收到 24px（与全站「面包屑 → 标题」的 24px 节奏一致），下内边距保持 48px。
   必须写在这条通用规则之后——两条选择器权重相同（section.hero vs section:not(.panel)，
   都是 0-1-1），靠「后者胜出」。 */
section.hero {
  padding: var(--sp-6) 0 var(--sp-12) !important;
}

/* 面包屑单独占一个 .container 的页面（文章页 / 图鉴详情页 / 活动攻略列表）
   2026-09-27：上面那条 48px 底边距会把标题顶得很低（实测面包屑文字到 H1 约 90px，
   而面包屑与 .page-head 同在一个容器的页面只有 24px）。面包屑这一条不需要区块间距，归零。 */
body > .container:has(> .crumb:only-child) {
  margin-bottom: 0 !important;
}

/* ---------- 21.11 正文链接：明确可点（颜色 + 下划线） ---------- */
.article-body p a,
.article-body li a,
.article-body td a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body p a:hover,
.article-body li a:hover,
.article-body td a:hover {
  color: var(--brand-deep);
}

/* ============================================================
   22. 已于 2026-09-23 删除：深色 :root 变量污染对抗块
   ------------------------------------------------------------
   原问题：site/team-*.css 三个文件各带一整套深色 :root 变量，
   而它们在 <body> 内加载，把整页变量改回深色。

   根治办法（已落地）：
     ① 删掉全部 27 份深色 :root 变量副本（含 main.css / article.css）；
     ② theme-light.css 用 html:root（特异性 0,1,1）钉住浅色变量，
        后来加载的任何文件都夺不走；
     ③ 分享截图节点 #shot-node 的深色是**有意为之的分享图设计**，
        保留在 site/team-*.css 各自的文件里，不再在这里重复一份。

   因此本节的 html:root 覆盖块、#shot-node 深色块、
   .btn.primary / .chip.on / .detail-summary 的补丁全部删除。
   ============================================================ */