/* ==========================================================================
   CELL INTELLIGENCE — 统一设计系统（单一来源）
   原站内联样式里叠了三代设计系统（浅色初版 → navy/gold → V1.3 editorial），
   这里只保留最终视觉，Token 收敛为一份，媒体查询合并为一处。
   ========================================================================== */

:root {
  --navy:      #06111d;
  --navy-2:    #0a1928;
  --navy-3:    #07131f;
  --navy-4:    #0c2134;
  --paper:     #f7f5ef;
  --ink:       #090b0e;
  --champagne: #c9a96e;
  --champagne-2: #e0bf82;
  --gold-deep: #c58b25;
  /**
   * 默认链接色**单独一个 token**。
   *
   * 原来 `a { color: #e8c678 }` 把亮金写死在规则里，浅色主题无从覆盖 ——
   * 而 `#e8c678` 在白底上只有 **1.64:1**，全站每一条没被单独配过色的链接
   * （`.more`、「全部条目 →」、页脚、疾病分组标题…）在白底上都是隐形的。
   *
   * 为什么用变量而不是在浅色块里再写一条 `html[data-theme="light"] a { … }`：
   * 那条选择器的优先级是 (0,1,2)，会**压过**组件里故意写的
   * `color: inherit`（`.disease-stats a`、`.hero-stat a`），把它们一并染成金色。
   * 换成变量后 `a` 那条规则的优先级不变，`inherit` 仍然按原意生效。
   */
  --link:       #e8c678;
  --link-hover: #e0bf82;
  --white:     #f4f6f8;
  --slate:     #9aa8b6;
  --slate-2:   #8695a5;
  --hair:      rgba(255, 255, 255, .09);
  --hair-2:    rgba(255, 255, 255, .06);
  --line-gold: rgba(201, 169, 110, .3);
  --ok-bg:     #113027;  --ok-fg:   #8fc7ad;
  --err-bg:    #381b22;  --err-fg:  #e4a5ad;
  --warn-bg:   #3a2f12;  --warn-fg: #e3c477;
  --idle-bg:   #202a35;  --idle-fg: #aeb9c4;
  --radius:    8px;
  --radius-sm: 3px;
  --shadow:    0 12px 38px rgba(0, 0, 0, .18);

  /* ------------------------------ 滚动条 ------------------------------
   * 深色页面上**系统默认滚动条是白色带箭头的宽条**（就是用户截图里那条）：
   * 一条亮灰横条横在深蓝底上，比正文还抢眼，而且和站内任何一处都不像一套东西。
   *
   * 收成三个变量，好处是深色/浅色主题各覆盖一次就够（见文件尾部
   * `html[data-theme="light"]`），下面那组规则**永远不用改**。
   * `--scroll-track` 用 `transparent` 而不是实色：滚动条多出现在自带底色的
   * 面板/代码框里，轨道透明才不会在内容里再画一个色块。
   */
  --scroll-thumb:        rgba(255, 255, 255, .16);
  --scroll-thumb-hover:  rgba(201, 169, 110, .55);
  --scroll-thumb-active: rgba(201, 169, 110, .78);
  --scroll-track:        transparent;
  --scroll-size:         10px;

  /**
   * `--hp-*`：原本只定义在 `body[class*="home-preview"]` 里（备用主页专用），
   * 但站内**账户页、管理后台、收件箱**的大量金色强调也在引用它们 ——
   * 那些页面的 body class 不是 `home-preview`，于是 `var(--hp-gold)`
   * **取不到值、整条 color 声明静默失效**（headless Chrome 实测
   * `getPropertyValue('--hp-gold')` 返回空串，`.account-role` 算出来是近白色）。
   *
   * 修法有两种：把三十多处引用逐个换成别的变量，或**把变量提到 `:root`**。
   * 选后者：这几个值本来就与主题相关，提到根上之后
   *   1. 现有引用一处不用改，账户/后台/收件箱的金色立刻恢复；
   *   2. 深色主题在这里、浅色主题在 `html[data-theme="light"]` 各覆盖一次即可；
   *   3. `home-preview` 里那组同名声明仍然生效（更具体的选择器，优先级更高）。
   */
  --hp-ink:   #f6f3ec;
  --hp-muted: #8fa0b0;
  --hp-line:  rgba(184, 202, 217, .12);
  --hp-gold:  #e1b86b;
  --hp-mint:  #72d7c3;

  /* ------------------------------ 正文字号 ------------------------------
   * 详情页的正文只有一个尺子（用户报「正文字号偏大，而且概要与思路里的字号不统一」）。
   *
   * 原来各块各写各的：`.summary`（研究概要 / 简要介绍 / 中文摘要）14.5px。
   * `.paper-section p`（研究思路的分段正文）14px、`.fact dd` 13px ——
   * 同一页里三种正文尺寸，读起来像拼起来的。现在统一收在这里：
   *
   *   --fs-prose  正文（概要、分段摘要、入排标准、试验目的…）
   *   --fs-meta   元信息（事实表的值、机构名、条数）
   *   --lh-prose  正文行距（中文长句，1.8 比 1.85 更紧凑也不挤）
   */
  --fs-prose: 13.5px;
  --fs-meta:  12.5px;
  --lh-prose: 1.8;
  /**
   * 入排标准再小一档（用户要求「入排的字号再小一些」）。
   *
   * 它是**登记原文的条款**，不是叙述性正文：一条常常上百字、动辄几十条，
   * 用正文尺寸会把「入组条件」这块撑成整页最重的内容 —— 视觉权重给错了。
   * 比正文小 1px、行距也收一点，读起来是「清单」而不是「文章」。
   */
  --fs-elig:  12.5px;

  /* ============================ 排版尺度（Apple 式） ============================
   * 用户要求：「重新设计，参考 apple.com.cn」+「保留深色，只借 Apple 的排版手法」。
   *
   * Apple 的「高级感」不是靠装饰，靠四件事：**大字、大留白、细字重、极少的颜色**。
   * 所以这一层只加「尺度」与「呼吸」，不动信息架构：
   *
   *   --fs-display  首屏主标题（Apple 那种一句顶一屏的量级）
   *   --fs-title    区块标题
   *   --fs-lead     导语（副标题），明显大于正文
   *   --lh-display  大标题的行距：**必须比正文紧**（Apple 的大标题是 1.05~1.1），
   *                 大字号配 1.8 行距会散成一团，那是「没做排版」最明显的破绽
   *   --space-*     纵向节奏：区块之间用大间距拉开，靠留白而不是分隔线分组
   */
  /**
   * 首屏字号（用户：「文字调小一号，试试」）。
   *
   * ⚠️ **字号与间距是两件独立的事，别再联动改**（用户纠正过我一次：
   * 「我之前是距离变大 15%。现在是让字号调小一号。一个是距离，一个是字号，有区别，懂吗！」）：
   *
   *   | 用户要求 | 改什么 | 不改什么 |
   *   |---|---|---|
   *   | 「整体放大 15%」 | **间距/留白** ×1.15（72→83 那一套） | 字号 |
   *   | 「字号调小一号」 | **字号** | 间距 |
   *
   * 我上一版把两者混成了"整体缩放"，字号调小时把间距也跟着收了 —— 改反了。
   * 现在：**间距保持 15% 放大后的值（76/83 那一档），字号独立下调一档**。
   */
  --fs-display: clamp(34px, 5.2vw, 56px);
  --fs-title:   clamp(22px, 2.6vw, 30px);
  --fs-lead:    clamp(15px, 1.6vw, 18px);
  --lh-display: 1.08;
  --lh-title:   1.25;

  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 44px;
  --space-xl: 84px;
  --space-2xl: 128px;

  /* Apple 的页面不是 1240 居中的密排，而是更宽的画布 + 更窄的行宽 */
  --page-max: 1120px;
  --measure:  62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /**
   * **基准字号必须显式给。**
   *
   * 原来这里没有 `font-size`，于是继承浏览器默认的 **16px** ——
   * 凡是没有单独设过字号的正文块（试验目的、入排约束行、各种说明文字）
   * 就都是 16px，而设过的又是 14 / 14.5px，同一页里出现三种正文尺寸。
   * 用户报的「正文字号偏大、概要与思路里还不统一」就是这个。
   *
   * 现在全站正文只有一个来源：`--fs-prose`。
   */
  font-size: var(--fs-prose);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}

.container { max-width: var(--page-max); margin: 0 auto; padding: 28px 22px 60px; }

/**
 * ## 账户区用更宽的画布
 *
 * 用户看到截图后反馈：「页面做的更宽一些」。
 *
 * 原因很清楚：全站 `--page-max: 1120px` 是**为阅读正文定的** ——
 * 单栏文章超过约 90 字符后回扫变困难，所以站点刻意收窄。
 * 但账户区是**左栏 246px + 右内容**的两栏结构：1120 减去左栏和间距，
 * 正文只剩约 800px，四张统计卡被挤成窄条、右边还空着大片。
 *
 * 所以这里单独放宽到 1440px —— **只影响账户区**，
 * 内容页的阅读行宽一点没变（那才是 1120 存在的理由）。
 */
body.acct-layout .container { max-width: 1440px; }

/**
 * 收件箱是三栏（左栏 + 列表 + 阅读窗格），比账户区其它页更需要宽度：
 * 两栏内容挤在 1400 里，阅读窗格会窄到不好读。
 */
body.acct-layout.inbox-layout .container { max-width: 1680px; }

/**
 * 首屏（Apple 式）
 * ----------------------------------------------------------------------------
 * 参考 apple.com.cn 的排版手法：一句话占满首屏、极细的字重、巨大的字号、几乎没有装饰。
 *
 * ⚠️ **间距全部量过才定**（用户：「中间大字部分离上下边框的距离，你认为合适吗？
 * 能不能有点追求啊」）。修掉的毛病：
 *   1. 上 56px / 下 84px **不对称** → 改成上下相等；
 *   2. 下边框到下一块标题 **168px**（`.hero` 下内边距 + `section.lv1` 上内边距**叠加**）
 *      → 把 section 的上内边距收到 48px。
 *
 * ⚠️ **间距的两次调整（都只动距离，不动字号）**：
 *   | 项 | 原始 | 放大 15% | 再放大 10% |
 *   |---|---|---|---|
 *   | 上下内边距 | 72px | 83px | **91px** |
 *   | 标题→导语 | 20px | 23px | **25px** |
 *   | 导语→数字 | 44px | 51px | **56px** |
 *   | 数字间距 | 72px | 83px | **91px** |
 *
 * 用户明确区分过「距离」与「字号」两件事（见 `:root` 里 `--fs-*` 的注释）：
 * **这里只改距离，字号一个都没动**。
 */
.hero {
  padding: 91px 0 91px;
  border-bottom: 1px solid var(--hair-2);
}
/* `.hero-eyebrow`（CELL INTELLIGENCE 小标签）的样式**已删除**（用户：「这个去掉」）。
   页头已有 LOGO 字标与中文标签，首屏再说一次品牌只会削弱大标题这个唯一焦点。
   规则一并删掉，不留死代码。*/
.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--white);
  /**
   * 行宽上限 `24ch`（中文约 12 字）。
   *
   * 这里纠正过两次，最终取中间值：
   *   - 原来 `18ch` —— 中文只有 9 个字，把标题硬切成两行、第二行只剩「清楚。」（孤字）；
   *   - 上一版干脆去掉上限 —— 结果 68px 的大标题**顶满容器两侧**，
   *     左右零留白，看着"满"而不"大气"（用户：「还是不太好看」）。
   *
   * 24ch（≈12 个中文字）恰好放得下「肿瘤细胞治疗，把证据理清楚。」这 14 个字里的
   * 大部分，标题与容器之间重新有留白；窄屏仍自然折行。
   */
  max-width: 24ch;
  margin-bottom: 25px;
}
/**
 * 大标题里的强调词用金色，但**只有一个词**。
 *
 * ⚠️ **上一版这里翻车了**：`em` 包含了「把证据理清楚」整句（6 个字），
 * 于是标题变成「白的一行 + 金的一行」两个色块 —— 那不是强调，是把标题切两半。
 * 用户看到的就是这个效果：「还是不太好看」。
 *
 * 现在只强调**一个词**（「证据」），金色占标题的极小比例才叫强调。
 * Apple 的页面几乎不用颜色，用一次就要用在刀刃上。
 */
.hero h1 em { font-style: normal; color: var(--champagne-2); }
.hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--slate);
  max-width: var(--measure);
  font-weight: 400;
}
/**
 * 数字那排。
 *
 * ⚠️ 这一版纠正了三处"没追求"（用户：「这些数字挨的那么近干嘛」）：
 *
 *   1. **间距 40px → 83px**。原来数字字号 34px、间距只有 40px（1.18 倍字号），
 *      四个数字挤成一条，读起来是一串而不是四组；同类数字之间至少留出一个字号宽。
 *   2. **数字字号上调**（clamp 上限 34 → 46px）：它是首屏的收尾、也是这个站的核心资产。
 *   3. **列宽用 `max-content`**：每列按自己的内容宽度排，数字之间是稳定节奏，
 *      而不是被均分拉散（也不是硬撑满容器宽度）。
 *
 * 间距与字号都含在「整体放大 15%」里（72→83、40→46），见 `.hero` 上方那张换算表。
 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 91px;
  margin-top: 56px;
}
.hero-stat b {
  display: block;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hero-stat span {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-meta);
  color: var(--slate-2);
}
.hero-stat a { color: inherit; }
.hero-stat a:hover b { color: var(--champagne-2); }

/* 「从疾病开始 ↓」滚动提示的样式**已删除**（用户：「不需要这些提示」）。
   规则一并删掉，不留死代码 —— 首屏现在以数字那一排自然收尾。*/

/* 叙事段落：每个区块之间用超大字距的留白分组，不加分隔线 */
.narrative { padding: var(--space-xl) 0; border-bottom: 1px solid var(--hair-2); }
.narrative:last-of-type { border-bottom: 0; }
.narrative-head { margin-bottom: var(--space-lg); }
.narrative-head h2 {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--white);
}
.narrative-head p {
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  color: var(--slate);
  max-width: var(--measure);
}

/* ------------------------------ 页头 ------------------------------ */

/**
 * ## ⚠️ 选择器是 `.container > header`，**不是裸 `header`**（2026-09 修）
 *
 * 原来写的是裸 `header`，它会命中页面上**每一个** `<header>` ——
 * 而 `<header>` 在这个站里到处都是：解读页的 `.intel-head`、账户页的 `.acct-head`、
 * 研究工作台每个面板里的 `<header>`、账户区各张卡片的 `.acct-card-head`……
 *
 * 后果是它们**全都长成了「站点头卡」**：`--navy-2` 底色、1px 全边框、圆角，
 * 外加 `0 24px 70px rgba(0,0,0,.22)` 这枚**为整幅页头准备的巨型投影**，
 * 以及 40/28/26 的内边距。工作台那五块面板的标题因此各自顶着一个带阴影的盒子，
 * 而且比面板本体还宽；解读页的标题区也平白多出一圈投影。
 *
 * 站点头全站只有**一个**，它永远是 `.container` 的第一个孩子（见 `layout.js`）。
 * 简报/报告页用的是自己内联的那份 CSS（见 `digest.js` 的 `CSS` 常量），不受这里影响。
 */
.container > header {
  background: var(--navy-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  /**
   * ⚠️ 上内边距 **40px**，比下内边距（26px）大。
   *
   * 用户的实际观感是「整个品牌区都靠上」。按数据核对一遍盒内自上而下的结构：
   *
   *     盒子上边缘
   *       ↕ 26px          ← 原来的上内边距
   *     品牌区（LOGO + 中文字 + 定位语）
   *       ↕ 26px          ← 品牌行下内边距
   *      细线
   *       ↕ 22px          ← 导航 padding-top
   *     导航
   *       ↕ 26px          ← 盒子的下内边距
   *     盒子底边
   *
   * 也就是说：品牌区到"细线"是 26px，但**细线下面还有 22 + 26 = 48px 的导航区**。
   * 眼睛判断"居中"时，参照的是**整个盒子的高度**，不是"到细线"——
   * 在一个 200 多 px 高的盒子里，26px 的上留白当然显得"贴顶"。
   *
   * 所以把上内边距加到 40px（= 下内边距 26 + 一部分导航区留白），
   * 让品牌区在**整个盒子**里看起来落在大致中间的位置。
   */
  padding: 40px 28px 26px;
  overflow: hidden;
}

/**
 * 首页页头：**去掉盒子**（Apple 的顶栏是一条没有任何边框的通栏）。
 *
 * 保留盒子会让首屏出现「两个矩形叠在一起」（页头卡片 + 首屏大标题），
 * 视觉上互相削弱。去掉边框、圆角与投影之后，品牌区变成一条安静的顶栏，
 * 首屏那句大标题才成为唯一的视觉焦点。其它页面不动 —— 那里的页头是信息区。
 *
 * 上内边距与内页保持一致（40px）：页头的内部间距**不该随页面而变**，
 * 它是同一个组件的同一个部位；否则同一个 LOGO 在首页与内页的"居中感"会不同。
 */
body.home header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  border-radius: 0;
  box-shadow: none;
  padding: 40px 0 0;
}
/**
 * LOGO 与下面那条细线的距离（用户：「LOGO 跟下面细线的间距，你认为合适吗？」）。
 *
 * ⚠️ **这段距离必须加在"行"上，不能加在 LOGO 自己身上**（用户：「左右两边的文字对齐」）。
 *
 * 原来的写法是给 `.brand-lockup` 加 `padding-bottom` —— 结果是：
 *   - 左边（LOGO 组合）被这段内边距撑高，**重心上移**；
 *   - 右边（定位语）没有内边距，`align-items: center` 按各自盒子居中，
 *     两边于是**对不齐**（右侧看着偏低）。
 *
 * 现在这段距离加在 `.header-brand-row` 的 `padding-bottom` 上（行内元素都不带下内边距），
 * 距离本身不变：行 padding-bottom 25px + `.nav` margin-top 19px = 44px。
 */
body.home header .brand-lockup { margin: 0; padding: 0; border-bottom: 0; }

/**
 * 标题区：官方 LOGO 三件套排成一行，深色底（不再用米白横条）。
 * 整个 LOGO 是回首页的链接（首页 = 疾病索引），所以要消掉链接默认样式。
 *
 * ⚠️ **下内边距为 0**：与细线的距离由外层 `.brand-row`（非首页是 `header` 自身）
 * 统一给。加在这里会把 LOGO 一侧撑高，与右侧定位语对不齐 —— 见 `.header-brand-row`。
 */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
  width: fit-content;
}

/**
 * 品牌区 + 定位语。**两段中文上下边缘对齐**（用户：「左边的LOGO中的中文字，
 * 和右边的中文字上下边缘对齐」），且定位语**右对齐到容器右边缘**
 * （用户：「临床试验 · 前沿论文 · 监管动态，这个要右对齐」）。
 *
 * 实现：整行占满容器宽度（**不设 `max-width`**），`justify-content: space-between`
 * 把品牌区推到最左、定位语推到最右 —— 两端都贴齐容器边距。
 *
 * ⚠️ 这里曾经加过 `max-width: 700px`（为了让"三方间距"看起来均衡），
 * 那是**改错了方向**：它让定位语停在中间、右边留一大片空白，
 * 与"右对齐"直接冲突。现已移除。
 *
 * 两端对齐是页头的常规做法：左侧品牌锚定、右侧一句话说明，中间留白由容器宽度决定。
 */
.header-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /**
   * 与细线的距离。居中的判定看的是**整个盒子**：盒内细线下面还有导航区（22 + 26），
   * 所以上内边距（40px）大于这里（26px）才显得居中 —— 见 `header` 的说明。
   */
  padding-bottom: 26px;
}
.header-brand-row .brand-lockup {
  /**
   * ⚠️ `margin` 必须**整体清零**，不能只清 margin-bottom。
   *
   * 基础规则里写的是 `margin: 0 0 16px`（那条是给"品牌区独占一行"的旧版式用的）。
   * 只覆盖 `margin-bottom` 会留下 16px 的**下外边距**，
   * 于是品牌行到细线的实际距离变成 `44 + 16 = 60px`，而到上边缘只有 44px ——
   * LOGO 看着就是不居中（用户：「不够居中，即到下面细线和上面边缘的距离不一样」）。
   *
   * 这类"多余的外边距"最难查：页头上下都算对了 padding，却漏了一个 margin。
   */
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
/**
 * 中文标签「肿瘤细胞治疗研究」—— 现在位于品牌行**右端**（用户要求把原来
 * 那句「临床试验 · 前沿论文 · 监管动态」去掉、把中文挪到它的位置）。
 *
 * 它**不再是 `.brand-lockup` 的内部元素**，但字号 / 字距 / 颜色全部沿用品牌规范
 * （见下方 `.brand-tagline`）—— 同一套品牌文字，只是换了位置。
 * 这里只补一条：**在行内垂直居中**，使它与左侧 LOGO 在同一中线上。
 */
.header-brand-row > .brand-tagline { align-self: center; }
.brand-lockup:hover .brand-word { opacity: .85; }
/**
 * 图标（C 环 + 金点）与竖线。用户 2026-09-25 先要去掉、当天又要回来：
 * 「还是把那个 LOGO 加回来，C 加金点的那个，CELLIN 放在它后面」。
 * 金点跟字标同一个香槟金 #c9a96e（原来是 #e0a63c，那版金色已经废弃）。
 * ⚠️ 尺寸只写在这里和下面的媒体查询里 —— 别再写 `body[...] .brand-mark`
 * 这种更高优先级的规则，它会把媒体查询整档变成死代码（字标就踩过这个坑）。
 */
.brand-mark { height: 34px; width: 34px; flex: 0 0 34px; }
.brand-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, .2); flex: 0 0 1px; }
/**
 * 字标尺寸：桌面 15.3px 高（图标拿掉的那段时间字标是页头唯一的品牌元素，
 * 10px 显得太小 —— 用户 2026-09-25「CELLIN 要调的大一些」，定为 17px；
 * 同一天紧接着又要求「LOGO 那里，CELLIN 再调的略小一点，10%」，
 * 于是 17 × 0.9 = 15.3px，下面两档窄屏同样各乘 0.9）。
 * 窄屏两档在下面的媒体查询里，别再写 `body[...] .brand-word` 那种更高优先级
 * 的规则去钉死它 —— 那样会把媒体查询整档变成死代码（这里踩过）。
 */
.brand-word { display: block; height: 15.3px; width: auto; }
.brand-word-light { display: none; }
.brand-word-wrap { display: inline-flex; align-items: center; }
/* 中文标签用真实文字：字号 12.8px（中文字面高度 11px）＋ 0.71em 字距。
   字距取自官方原图实测，末尾用负外边距抵消多出来的那一份字距。*/
.brand-tagline {
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .71em;
  margin-right: -.71em;
  color: #c3cdd7;
  white-space: nowrap;
}

/* 无障碍：视觉隐藏但仍被屏幕阅读器与搜索引擎读到。*/
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   滚动条（全站一套）
   ----------------------------------------------------------------------------
   用户指着截图说「全站，把这种条改下风格，要适配网站。有几处」。

   ## ⚠️ 只有一处滚动条是"设计过"的，其余全是浏览器默认

   站内原来只在 `.elig-scroll`（CDE 入排标准）上写了三行 `::-webkit-scrollbar`，
   其余带有滚动的地方 —— 详情页英文登记原文的 `<pre class="eligibility">`
   （340px 定高）、后台用户/操作记录的 `.admin-table-wrap`（横向）、
   以及**页面本身**这条最常被看到的条 —— 都还是系统默认外观。

   所以下面这组规则是**裸元素选择器，不带任何作用域前缀**：任何现在或将来
   出现的滚动区都自动是一套。用户要的是"全站"，靠逐个容器点名必然会漏。

   ## 为什么两个标准都写（`scrollbar-*` 与 `::-webkit-scrollbar`）

   它们是互补的，不是二选一：

     - `scrollbar-width` / `scrollbar-color` 是标准属性，Chromium 121+ 与
       Firefox 支持。**但它只吃颜色，不会画圆角** —— 滑块永远是个直角方块。
     - `::-webkit-scrollbar-*` 能画圆角与内缩，是 Chrome/Safari 上真正出效果的那套。
       它本身也在标准化中（规范名 `::-webkit-scrollbar`），所以按"先标准、
       后 webkit 覆盖"的顺序写，两边都不会互相打架。

   ## 滑块做成"胶囊"而不是铺满整条轨道

   滑块默认贴着轨道两边，一条 10px 的实心直角条压在深色页面上像一根钢筋。
   这里用**透明边框 + `background-clip: padding-box`** 把滑块收成 6px 的圆头胶囊
   （只剩中间 6px 上色），于是它比轨道窄、两端是圆的，看着才像站内的东西。
   悬停才给金色：滚动条不是主角，**默认状态要安静，指上去才有反馈**。
   ============================================================================ */

html {
  scrollbar-width: thin;                /* 细档：把"白色宽条"收窄 */
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* 全局：页面级滚动条 + 站内任何还没单独设计的滚动区 */
::-webkit-scrollbar {
  width: var(--scroll-size);
  height: var(--scroll-size);
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;        /* 透明边框 = 让滑块比轨道窄 4px */
  border-radius: 999px;                 /* 圆头胶囊 */
  background-clip: padding-box;         /* 只给中间 6px 上色，边框保持透明 */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
  background-clip: padding-box;
}
/**
 * 两条轴交会的右下角：不画任何东西。
 * 默认会填成轨道色，在深色页面上是一个突兀的方块。
 */
::-webkit-scrollbar-corner {
  background: transparent;
}

/**
 * ⚠️ `.header-meta` 与 `.subtitle` **已不再使用**（保留注释说明来龙去脉）。
 *
 * 它曾放过「左边的定位语 + 右边的状态胶囊」。后来：
 *   1. 状态胶囊删掉（用户：「这个不要出现了」）；
 *   2. 定位语移到品牌行右端（用户：「这个要右对齐」）；
 *   3. 定位语整句删掉、中文标签移到它的位置
 *      （用户：「临床试验 · 前沿论文 · 监管动态，这些字去掉，
 *        然后把肿瘤细胞治疗研究移到它的位置」）。
 *
 * 于是这一行彻底空了 —— 规则一并删掉，不留死代码
 * （本项目踩过「声明不用、其实还在做」的坑）。
 */

/* 页头状态胶囊（「N 个来源暂时取不到 · 内容更新于 X」）**已整体删除**。
   用户要求「这个不要出现了」—— 它报的是我们内部的取数状态，却挂在每一页的页头上。
   站点原有的「内容更新情况」板块与 /health-page 都还在，运维信息去那里看。
   样式一并删掉：留着就是没人用的死代码（本项目踩过「声明不用、其实还在做」的坑）。*/

/* 追踪关键词：默认折叠，不再用一个大方框抢页头的注意力 */
.radar-settings {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.radar-settings summary {
  cursor: pointer;
  color: #8695a5;
  font-size: 12px;
  list-style: none;
}
.radar-settings summary::-webkit-details-marker { display: none; }
.radar-settings summary::before { content: '鈻?'; color: var(--champagne); }
.radar-settings[open] summary::before { content: '鈻?'; }
.radar-settings summary b { color: #c3cdd7; font-weight: 500; }
.radar-settings form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 11px; }
.radar-settings input {
  flex: 1 1 320px;
  max-width: 460px;
  padding: 7px 10px;
  color: #eef2f5;
  background: #0c1d2c;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12.5px;
}
.radar-settings input:focus { border-color: var(--champagne); outline: none; }
.radar-settings button {
  padding: 7px 14px;
  color: #071421;
  background: var(--champagne);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.radar-settings button:hover { background: #dfc28b; }
.radar-hint { flex: 1 1 100%; color: #6f7d8b; font-size: 11.5px; }

/* 导航：当前页高亮（原站没有，用户看不出自己在哪） */
/**
 * ⚠️ **分隔线上下的间距必须成对给足**（用户：「上面这个细线，你不考虑下间距吗」）。
 *
 * 原来的问题是**线上面几乎没有留白、线下面只有 18px** ——
 * 一条分隔线看起来"贴"在品牌区底下、又"压"在导航字上，两边都局促。
 * 分隔线的观感取决于它到**上下内容**的距离是否均衡，而不是线本身。
 *
 * 现在：上 24px、下 20px，且品牌行自己带 14px 下内边距 ——
 * 线上方合计约 38px 的呼吸，下方 20px，导航字不再顶到线。
 */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /** 线上方 18px + 品牌行 22px 下内边距 = 40px（与 LOGO 等高，见 body.home header 的说明） */
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.nav a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: #d8dee5;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { background: rgba(201, 169, 110, .12); color: #e7ca91; }
.nav a.active {
  color: var(--champagne-2);
  background: rgba(201, 169, 110, .1);
  border-bottom-color: var(--champagne);
  font-weight: 600;
}

/**
 * 首页导航：Apple 式（**只有一条细下划线，没有色块**）。
 *
 * Apple 的导航栏是「一排细字 + 当前项一条下划线」，不用背景色块 ——
 * 色块会让导航看起来像一组按钮，而下划线只说明「你在哪」。
 * 这里只在首页收窄这条规则，其它页面维持原样（那些页面的导航是主操作区）。
 */
body.home .nav { gap: 2px; margin-top: 19px; padding-top: 24px; }
body.home .nav a {
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 400;
  color: #b9c3cd;
  background: transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
body.home .nav a:hover { background: transparent; color: var(--white); }
body.home .nav a.active {
  background: transparent;
  color: var(--white);
  font-weight: 500;
  border-bottom-color: var(--champagne);
}

/* 全站检索入口：贴在导航行最右端。左边那五项是「按来源浏览」，
   右边是「用自然语言问」——另一种动作，所以用 margin-left:auto 和它们分开。*/
.nav-ask {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/**
 * 搜索框：**浅底**，用站里的品牌米白 `--paper`。
 *
 * 原来是深底 + 一条细金边 —— 在深色页面上它和周围的深色面板几乎融在一起，
 * 读不出「这里可以打字」（用户反馈：缺乏自明性，参考 Google 那种一眼就是搜索框的）。
 *
 * 用 `--paper` 而不是纯白：它本来就在这套配色里（品牌区同底色）。
 * 所以亮起来不突兀，又足够跳出来。圆角做成胶囊，和放大镜按钮连成一组。 */
.nav-ask .input[type="search"],
.ask-hero .input[type="search"] {
  background: var(--paper);
  color: #101c25;
  border-color: transparent;
  /* 长方形 + 小弧度（与站内面板同一个 `--radius`），不做胶囊 —— 胶囊太圆了 */
  border-radius: var(--radius);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14);
}
.nav-ask .input[type="search"]::placeholder,
.ask-hero .input[type="search"]::placeholder { color: #77848f; }
.nav-ask .input[type="search"]:focus,
.ask-hero .input[type="search"]:focus {
  border-color: transparent;
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}
/* 放大镜按钮：金色实心胶囊，配浅底输入框 ——「点这里搜」不再需要猜 */
.nav-ask .search-btn,
.ask-hero .search-btn {
  background: var(--champagne);
  border-color: transparent;
  border-radius: var(--radius);
  color: #0b1a26;
}
.nav-ask .search-btn:hover,
.ask-hero .search-btn:hover { background: #e0bf82; color: #0b1a26; }

.nav-ask .input[type="search"] { width: 300px; height: 36px; padding: 0 14px; font-size: 13.5px; }
.nav-ask .search-btn { width: 36px; height: 36px; padding: 0; }

/* /ask 页的主体输入：比列表工具条上的搜索框更大 ——它是这一页的主角。
   但**不能拉满整行**：240px 宽的输入框配一个小按钮，比例会失衡（用户反馈太宽）。
   限定 720px，并给输入框与按钮**同一个显式高度**，两者才会严丝合缝。*/
.ask-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 18px;
  max-width: 720px;
}
.ask-hero .input[type="search"] { flex: 1 1 auto; height: 48px; padding: 0 18px; font-size: 15px; }
.ask-hero .search-btn { width: 48px; height: 48px; padding: 0; }

/* `/ask` 检索区与双模式选择。
   ——不再有 `.ask-submit` 按钮（用户 2026-09-21：「去掉那个开始检索」），
   提交入口改由下面两张卡片承担；输入框仍是表单的提交载体（回车可用）。
   ——`.ask-intro` 也已移除：标题下的导语并进了那句新标题
   （「让检索更智能，让证据看得见，帮你从可靠证据中找到答案。」），
   于是这一页不再需要单独一行导语的样式。 */
.ask-hero { max-width: 100%; margin: 20px 0 16px; }

/**
 * ## `/ask` 首屏 = **Google 那种版式**（用户 2026-09-22 给了参考图）
 *
 * 用户先说了「外部，不要容器包裹起来了，就是完全的背景色」，
 * 紧接着贴了一张 google.com 的截图 —— 那就是他要的样子。所以这一屏照它排：
 *
 * | Google | 这里 |
 * |---|---|
 * | 页面底色，没有任何面板/外框 | `section.ask-hero-section` 退掉底色、边框、投影、内边距 |
 * | 内容**居中** | 表单 + 两个按钮全部居中（眉标与长句后来都删了） |
 * | 一颗大圆角搜索框，框内左侧一只放大镜 | `.ask-hero` 胶囊 + 内嵌 `.ask-hero-glass`（装饰，不是按钮） |
 * | 框下两颗灰底小按钮 | 开关的两段：灰底胶囊，选中那段加深 |
 *
 * ⚠️ **放大镜是装饰**：`tabindex="-1"` + `aria-hidden`，点它不提交 ——
 * 提交只有"回车"与"点开关"两条路（用户 2026-09-21：「去掉那个开始检索」）。
 *
 * ⚠️ 中心对齐只作用于**这一页这个 section**：`.eyebrow` / `h2` 在全站其它页面
 * 仍是左对齐，所以规则都挂在 `section.ask-hero-section` 下面。
 */
section.ask-hero-section {
  /**
   * ## 搜索控件在**画面中间**（用户 2026-09-22：「在整个画面的中间位置不可以吗」）
   *
   * ⚠️ 之前几版都在调固定的 `padding-top`（40 → 88 → 132），也试过靠 body 上的
   * `ask-page-empty` 判断空检索页 —— 两条都不稳（前者"改了像没改"，后者运行时的
   * 类名不可靠）。现在改成**看页面上有什么**：
   *
   *   · **空检索页**（`/ask` 不带 q）：页面上只有"首屏"这一个 section，
   *     于是把 `.container` 变成 flex 竖排，首屏拿到 `margin: auto` ——
   *     它自动落在页头与页脚之间的正中间。字号、间距一个都不用写死。
   *   · **有结果时**：页面上还有结果 section（`.lv1 + .lv1`），
   *     `:has()` 那条规则不生效，首屏退回普通文档流（上留白一档）。
   *
   * `:has()` 在旧浏览器里不支持时，退化成"有结果"那一档的普通排布 ——
   * 也就是**不会坏**，只是不居中。
   */
  padding: clamp(48px, 12vh, 120px) 0 44px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  margin-bottom: 22px;
}
/* 空检索页：整屏居中（判据是"页面上没有第二个 section"） */
@media (min-height: 560px) {
  /**
   * ⚠️ 居中**只用外边距**（`margin-top: auto`），不用 flex 的 `min-height`：
   * 上一版给 `.container` 加了 `min-height: calc(100vh - 28px)` + `flex`，
   * 而 `.container` 自己底部有 60px 内边距 —— 于是总高变成 100vh + 60px，
   * 页脚被顶起来，**下面露出一条与其他页面不同的背景色**（用户 2026-09-22 报的）。
   *
   * 改成外边距推：首屏的上外边距吃掉页头与页脚之间的空白，页脚自然落到页面最底部，
   * 与全站其它页面的收尾完全一致。视口不够高时 `clamp` 会收到 48px，不会把页脚顶出去。
   */
  body.ask-page .container:not(:has(.lv1 + .lv1)) > .ask-hero-section {
    margin-top: clamp(48px, 24vh, 300px);
    padding-top: 0;
    /**
     * 几何中心略高一点更舒服（视觉居中）：整组上提 24px。
     * `translate` 不占布局高度，所以不会把页脚推下去。
     */
    transform: translateY(-24px);
  }
}
/**
 * ## `/ask` **整页都不套容器**（用户 2026-09-22：「整体就是背景色哈，
 *    不要容器包裹感」＋「红框的容器不要了」）
 *
 * 这一页所有的 `section.lv1` 都退掉外壳：底色透明、无边框、无投影、无圆角、无内边距，
 * 直接落在页面背景上；块与块之间只用一条**发丝线**分开，靠留白与分隔线表达层级。
 *
 * ⚠️ 作用域写成 `body.ask-page` **和** `body.home-preview` 两份，是**故意的冗余**：
 * 2026-09-22 实测发现 `/ask` 那一页的 `<body>` 有时只拿到 `home-preview`
 * （模板传参与 `layout()` 的默认值在某个进程里没接上，`/ask` 因此仍套着容器外壳）。
 * `active === '/ask'` 是**服务端每条路由都一定给的值**，所以 `layout.js` 用它兜底；
 * 这里把同一条规则也挂到 `home-preview` 上，等于"两条路都堵死"。
 * 这两个类不会出现在别的页面组合里，所以不会误伤。
 *
 * ⚠️ 板块**内部**的小卡片（`.card` / `.site-hit` / `.ai-src`…）**不在此列**：
 * 它们是"一条条结果"，需要自己的边界；被去掉的是"把整块内容包起来的大壳"。
 * ⚠️ 必须带 `body` 这一级：本文件靠后还有一条
 * `section.lv1, section.lv2 { background: rgba(8,24,38,.72); border-color: … }`，
 * 与 `section.lv1` 同权重且在后面 —— 不加一级会被它把底色和边框补回来。
 */
body.ask-page section.lv1,
body.home-preview section.lv1 {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
html[data-theme="light"] body.ask-page section.lv1,
html[data-theme="light"] body.home-preview section.lv1 { background: transparent; border-color: transparent; }
/* 块与块：一条发丝线 + 上面那口气 */
body.ask-page .lv1 + .lv1,
body.home-preview .lv1 + .lv1,
body.ask-page #ask-advanced-loading,
body.home-preview #ask-advanced-loading,
body.ask-page .think-panel,
body.home-preview .think-panel {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--hair-2);
}
/* 检索页不显示页脚那块**首页品牌**：它是首页的主标语，跟在结果下面会把注意力拽走 */
body.ask-page .hp-footer-brand,
body.ask-page .hp-join,
body.home-preview .hp-footer-brand,
body.home-preview .hp-join { display: none; }
body.ask-page .hp-footer,
body.home-preview .hp-footer { margin-top: 64px; }
/**
 * 有了结果的那一屏：把节奏收紧一点（用户 2026-09-22：「审美上追求一下」）
 *
 * 上一版里"两颗按钮 → 检索条件 chips → RESULTS"三层贴得很近，
 * 而 RESULTS 内部（标签行与"命中 N 条"）又几乎挨在一起 —— 读起来是一团。
 * 这里只动**间距**，不动任何字号与颜色：
 *   · 控件组与条件行：条件行跟的是按钮，贴紧一点（10px）；
 *   · 条件行与 RESULTS：拉开到 34px，让结果区明显是"下一条"；
 *   · RESULTS 的眉标与"命中 N 条"：从紧贴改成 6px。
 */
body.ask-page .chips.ask-conditions { margin-top: 10px; }
body.ask-page .chips.ask-conditions + .lv1 { margin-top: 34px; }
body.ask-page .ask-result-head { margin-top: 6px; }
/* 顶部有吸顶页头：锚点跳转（解答里的 [n]）别把目标顶到看不见的地方 */
body.ask-page section.lv1 { scroll-margin-top: 84px; }
/* 眉标「检索一下」与那句长句 `h2.ask-tagline` 都已按用户要求删除
   （2026-09-22：「检索一下，这个去掉」＋「这句…话去掉」）。
   所以这里不再有 `section.ask-hero-section .eyebrow` 与 `h2.ask-tagline` 两条规则
   —— 这一屏只剩控件本身。 */
/* 输入框：居中、限宽 720px、胶囊圆角 —— 与 Google 那颗框同一种量级。
   ⚠️ 上边距给足：上面已经一个字都没有了，输入框再贴着页头就成了"内容没加载出来"。 */
section.ask-hero-section .ask-hero {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto 20px;
}
section.ask-hero-section .ask-hero .input[type="search"] {
  height: 54px;
  /* 左边给放大镜让出位置（它在框内左侧），右边只留正常内边距 */
  padding: 0 22px 0 52px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
/**
 * 框内那颗放大镜（装饰，**在左边**）—— 用户 2026-09-22：
 *   「这个图标放在左边」。
 *
 * ⚠️ 它不是一个按钮：`pointer-events: none` + `aria-hidden`，
 * 点它不提交（用户 2026-09-21 删掉了「开始检索」按钮，不能再装回来）。
 * 它也不参与布局（`absolute`），所以输入框的光标不会因为它偏移。
 */
.ask-hero-glass {
  position: absolute;
  top: 50%;
  left: 20px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: #77848f;
  pointer-events: none;
}
.ask-hero-glass svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/**
 * ## 浅色主题下：搜索框做成 **Google 那种白框**（用户 2026-09-22）
 *
 * 原话：「白色界面下，搜索框做成 Google 的样式」。
 *
 * 深色那一版用的是品牌米白 `--paper`（#f7f5ef）+ 重一点的投影，
 * 在白底页面上它偏黄、还带着一圈灰影 —— 不像搜索框，像一块米色板。
 * Google 那颗框的特征是三条，这里照抄：
 *
 * | 特征 | 这里 |
 * |---|---|
 * | 纯白底 | `#fff` |
 * | **一圈细边框**（主视觉靠边框，不靠投影） | `1px solid rgba(28, 45, 57, .18)` |
 * | 悬停/聚焦时边框加深 + 极淡投影 | hover → `.3` 一档；focus → 更淡的投影 |
 *
 * ⚠️ 只在**浅色主题**下这么写：深色主题的米白框是用户先前定过的，别一起改。
 * ⚠️ 焦点圈仍走全站那条 `--champagne`（`.input:focus` 里定义的），
 * 不因为"学 Google"就把可访问性样式换掉。
 */
html[data-theme="light"] section.ask-hero-section .ask-hero .input[type="search"] {
  background: #fff;
  border: 1px solid rgba(28, 45, 57, .18);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
html[data-theme="light"] section.ask-hero-section .ask-hero .input[type="search"]:hover {
  border-color: rgba(28, 45, 57, .3);
  box-shadow: 0 1px 3px rgba(28, 45, 57, .1);
}
html[data-theme="light"] section.ask-hero-section .ask-hero .input[type="search"]:focus {
  box-shadow: 0 1px 6px rgba(28, 45, 57, .12);
}
/**
 * 搜索框里**提示文字与放大镜都要更淡**（用户 2026-09-22：
 * 「里面的字体颜色要淡一些」→ 看了浅色版之后又补一句「黑白界面都是，要更淡一些」）。
 *
 * 为什么必须分主题各写一条、而且必须带 `section.ask-hero-section`：
 * 上面第 707 行那条 `.ask-hero .input[type="search"]::placeholder { color: #77848f }`
 * 与本条**同权重**且在前面，所以带作用域的这条会赢（否则改了不生效 —— 这正是
 * 前几轮"改了像没改"的老毛病）。两条都放这里，深浅两套各自明确，不用去猜继承。
 *
 * ⚠️ 只调**占位提示**与放大镜：真正的输入内容颜色（深色 `#f4f6f8` / 浅色 `#101c25`）
 * 一个字都不许动 —— 那是读者自己敲进去的问题，调淡了会看不清。
 * ⚠️ 页头那颗「用一句话检索…」的占位色不在这里（它是 `.nav-ask` 的，另有其色）。
 */
section.ask-hero-section .ask-hero .input[type="search"]::placeholder { color: #8d99a6; }
.ask-hero-glass { color: #8d99a6; }
html[data-theme="light"] section.ask-hero-section .ask-hero .input[type="search"]::placeholder { color: #a8aeb3; }
html[data-theme="light"] .ask-hero-glass { color: #a8aeb3; }

/**
 * ## 两个按钮 = Google 那两颗（用户 2026-09-22 最终形态）
 *
 * 原话：「参考 Google 的样式哈，搜索框里面有个放大镜图标，下面两个按钮，
 *        一个常规检索、一个智能检索，不要出会员专享字样，简洁画面」。
 *
 * | Google | 这里 |
 * |---|---|
 * | 框下两颗灰底圆角按钮 | 两颗 42px 高的灰底胶囊，居中并排 |
 * | 选中/主按钮更深一档 | `.selected`：白底加深一档 + 亮字 |
 * | 没有任何徽标 | **「会员专享」胶囊与锁全部去掉**（用户明确不要） |
 *
 * ⚠️ 用不了智能检索的人，那一段的 `href` 仍指向登录页 / 会员方案页（服务端也挡），
 * 只是**按钮上不再写字解释** —— "简洁"优先，行为不变。
 * 所以 `.locked` 现在只剩"压暗一点点"这一个作用，不再有虚线、不再有锁的记号。
 */
.ask-mode-switch { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ask-mode-toggle { display: inline-flex; align-items: center; gap: 12px; }
.ask-mode-seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  color: var(--slate);
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.ask-mode-seg:hover { color: var(--white); background: rgba(255, 255, 255, .09); }
.ask-mode-seg.selected { color: var(--white); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
/**
 * ## 智能检索那颗：**金边**（用户 2026-09-22：「智能检索，做一个金色边靠，做点差异化」）
 *
 * 它是这一排里**唯一需要解释**的那个（要会员、要调模型），所以给它一条金边
 * 作区分 —— 但也仅此而已：**没有徽标、没有文字、没有锁**（用户上一轮明确
 * 「不要出会员专享字样，简洁画面」）。
 *
 * ⚠️ 金边**不随选中态消失**：选中时它是"金边 + 更亮的底 + 金字的 600 字重"，
 * 未选中时是"金边 + 金字的 500 字重"，差别在底色与字重上，不靠撤掉金边。
 * ⚠️ 只有**能用**的人看到金边发光；用不了的人（`.locked`）那条边压到 55% 透明，
 * 仍然读得出"它是特别的"，但不喊"你买不起"。
 */
.ask-mode-seg.is-gold,
.ask-mode-seg.locked { color: var(--champagne); border-color: rgba(201, 169, 110, .55); }
.ask-mode-seg.is-gold { font-weight: 600; }
.ask-mode-seg.is-gold.selected {
  color: var(--champagne-2);
  background: rgba(201, 169, 110, .12);
  border-color: var(--champagne);
}
.ask-mode-seg.is-gold:hover { background: rgba(201, 169, 110, .16); border-color: var(--champagne); }
/* 浅色主题的金边要更深一档，否则白底上看不见 */
html[data-theme="light"] .ask-mode-seg.is-gold,
html[data-theme="light"] .ask-mode-seg.locked { color: #8b6425; border-color: rgba(197, 139, 37, .55); }
html[data-theme="light"] .ask-mode-seg.is-gold.selected { background: rgba(197, 139, 37, .12); border-color: #8b6425; }
/* `.locked` 在深色主题靠 `opacity: .72` 压淡表示"没开通"。白底上这个压淡会把
   深金 `#8b6425` 拉到 3.0:1 以下 —— 改成不压透明度，锁定态由虚线边框与锁图标表示。 */
html[data-theme="light"] .ask-mode-seg.locked { opacity: 1; }
.ask-mode-seg.locked { opacity: .72; }
.ask-mode-seg.locked:hover { opacity: 1; }
.ask-mode-seg b { font-weight: 600; white-space: nowrap; }
/* 按钮里的小图标：比文字小一档，不做成"图标砖" */
.ask-mode-seg > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 键盘可达，但**不出现第二套视觉**：焦点交给 `:focus-visible` 画在外层链接上 */
.ask-mode-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ask-mode-face { display: inline-flex; align-items: center; gap: 8px; }
.ask-mode-seg:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.ask-mode-icon.is-loading { display: inline-grid; width: 17px; height: 17px; border: 2px solid rgba(201, 169, 110, .3); border-top-color: var(--champagne); border-radius: 50%; }
.ask-mode-icon.is-loading svg { display: none; }


/* 两张模式卡片的旧样式（`.ask-modes` / `.ask-mode-card` / `.ask-mode-icon` 等）
   已随 2026-09-22「只留一个开关」整段删除：这一屏现在是 Google 那种无外框版式，
   开关的样式见上面 `.ask-mode-toggle` / `.ask-mode-seg`。 */
@media (prefers-reduced-motion: reduce) {
  .ai-loading-bar::after { animation: none; }
}

/**
 * ## 智能检索的「深度思考」等待画面（用户 2026-09-22）
 *
 * 原话：「智能检索时，可能会出现较长时间等待……需要一个动态画面，
 * 让用户知道等待实际上是在深度思考，耐心等待即可」。
 *
 * 结构只有三样（`views/ask.js` 的 `THINKING_PANEL_HTML`）：
 *   1. **脉冲图标**（`.think-orb`）—— 复用智能检索那颗"一页定稿 + 星芒"的图标，
 *      加一圈呼吸光晕。它负责"机器在动"这个**一眼**能看到的信号；
 *   2. **状态行**（`.think-status`）—— 「深度思考中」+ 三个跳动的小点 + 秒表；
 *   3. **阶段行**（`.think-stage`）—— 当前**真的**在做哪一步（脚本每 0.5s 更新），
 *      下面一行说明为什么可能慢（`.ai-loading-note`）。
 *
 * ## 三条纪律
 *
 * 1. **动效只做"在动"这一件事**，不做进度百分比 —— 服务端不吐进度，
 *    假进度条卡在 90% 比不动更像坏了；
 * 2. **深浅两套主题各一份材质**：深色靠金色发光，浅色靠白卡 + 金色描边
 *    （浅色下发光会糊成一团脏黄，见 `html[data-theme="light"]` 那组）；
 * 3. `prefers-reduced-motion` 下**只停动效，不减信息** —— 文字与秒表照常走，
 *    "关掉动画"不该等于"关掉反馈"。
 *
 * ⚠️ `#ask-advanced-loading` 这个 id 仍在（脚本靠它认人、测试靠它断言），
 * 但样式一律走 `.think-panel` 类 —— 一条规则同时管两条路（服务端渲染的与
 * 点击时补的），改一处就够，不会出现"刷新后长得不一样"。
 * ⚠️ `hidden` 要带 `!important`：下面那条 `body.ask-page #ask-advanced-loading`
 * 的 `padding-top` 是给"已显示"的块用的，不压住的话隐藏块仍会占 28px 空白。
 */
#ask-advanced-loading[hidden] { display: none !important; }
.think-panel {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.think-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  /* 无 JS 时也读得出来"在等"：底下一层极淡的金 + 一条会走的金线（见下面的 ::before/::after） */
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  background: rgba(201, 169, 110, .055);
  border: 1px solid rgba(201, 169, 110, .20);
  border-radius: 14px;
}
.think-body::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(201,169,110,0) 0%, rgba(201,169,110,.13) 45%, rgba(201,169,110,0) 100%);
  animation: ask-loading-slide 2.1s ease-in-out infinite;
}

/* 脉冲图标：一圈呼吸的光晕 + 图标本身轻微起伏 */
.think-orb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  color: var(--champagne);
  border: 1px solid rgba(201, 169, 110, .45);
  border-radius: 13px;
  /* 底子给足一点：它负责"机器在动"这**一眼**的信号，太淡就只剩一行小字 */
  background: rgba(201, 169, 110, .15);
  animation: think-orb-breathe 2.6s ease-in-out infinite;
}
.think-orb svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes think-orb-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, .42); transform: translateY(0); }
  50% { box-shadow: 0 0 0 12px rgba(201, 169, 110, 0); transform: translateY(-1px); }
}

.think-lines { min-width: 0; flex: 1; }
.think-status {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 7px;
  color: var(--champagne);
  font-size: 14px;
  font-weight: 600;
}
/* 三个小点：错开 0.18s，读起来像"还在往下写" */
.think-dots { display: inline-flex; gap: 3px; transform: translateY(-1px); }
.think-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: think-dot 1.35s ease-in-out infinite; }
.think-dots i:nth-child(2) { animation-delay: .18s; }
.think-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes think-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* 秒表：等多久**如实报**（不承诺还剩多久），用等宽数字，读数不会左右跳 */
.think-clock {
  margin-left: auto;
  color: var(--slate);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.think-stage { margin: 0 0 8px; color: var(--white); font-size: 14px; line-height: 1.7; }
.think-panel .ai-loading-note { font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .think-body::after { animation: none; }
  .think-orb { animation: none; }
  .think-dots i { animation: none; opacity: .6; }
}
/** 浅色主题：发光会糊成一团脏黄，改成"白卡 + 金色描边 + 不投影" */
html[data-theme="light"] .think-body {
  background: #fff;
  border-color: rgba(197, 139, 37, .32);
  box-shadow: 0 1px 3px rgba(28, 45, 57, .06);
}
html[data-theme="light"] .think-body::after {
  background: linear-gradient(90deg, rgba(197,139,37,0) 0%, rgba(197,139,37,.10) 45%, rgba(197,139,37,0) 100%);
}
html[data-theme="light"] .think-orb { color: var(--gold-deep); border-color: rgba(197, 139, 37, .38); background: rgba(197, 139, 37, .07); }
html[data-theme="light"] .think-status { color: var(--gold-deep); }

/* 旧版那两行（`.ai-loading-bar` 的进度条与静态一句话）智能检索已不再使用：
   进度条**没有信息量**（见上面第 1 条纪律）。
   但 `.ai-loading` / `.ai-loading-note` 的底子留着 —— 等待画面的说明行仍在用
   `.ai-loading-note`，别的板块（如情报生成）也可能复用。 */
.ai-loading { position: relative; overflow: hidden; }
.ai-loading-bar { position: relative; display: block; height: 5px; margin: 2px 0 16px; overflow: hidden; background: rgba(201,169,110,.14); border-radius: 999px; }
.ai-loading-bar::after {
  content: ''; position: absolute; inset: 0; display: block; border-radius: inherit;
  background: linear-gradient(90deg, rgba(201,169,110,0) 0%, var(--champagne) 45%, rgba(201,169,110,0) 100%);
  animation: ask-loading-slide 1.45s ease-in-out infinite;
}
@keyframes ask-loading-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.ai-loading-note { margin: 0; color: var(--slate); font-size: 13px; line-height: 1.85; }
.ask-locked-note { max-width: 720px; margin: 10px 0 20px; }
.ask-locked-note a { color: var(--champagne); text-decoration: none; }
.ask-locked-note a:hover { text-decoration: underline; }

/* 全站检索：其它板块的命中（指南 / 患者手册 / 监管 / 转化应用 / 已上市产品） */
.site-view-tabs { display: inline-flex; gap: 6px; margin-left: auto; }
.site-view-tab { padding: 5px 11px; color: var(--slate); font-size: 12px; text-decoration: none; background: var(--navy-2); border: 1px solid var(--hair); border-radius: 999px; }
.site-view-tab:hover { color: var(--white); border-color: var(--line-gold); }
.site-view-tab.on { color: var(--champagne); border-color: var(--champagne); background: rgba(201,169,110,.10); }
.site-group { margin: 0 0 26px; }
.site-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 10px; border-bottom: 1px solid var(--hair); margin-bottom: 12px; }
.site-group-head h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 16px; }
.site-group-head h3 small { color: var(--slate); font-size: 12px; font-weight: 400; }
.site-group-more { color: var(--champagne); font-size: 12px; text-decoration: none; white-space: nowrap; }
.site-group-more:hover { text-decoration: underline; }
.site-hit-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-hit { padding: 14px 16px; background: var(--navy-2); border: 1px solid var(--hair); border-radius: var(--radius); }
.site-hit:hover { border-color: var(--line-gold); }
.site-hit-title { display: block; color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.55; text-decoration: none; }
.site-hit-title:hover { color: var(--champagne); }
.site-hit-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; color: var(--slate); font-size: 12px; }
.site-hit-kind { padding: 2px 8px; color: var(--champagne); border: 1px solid var(--line-gold); border-radius: 999px; font-size: 11px; }
.site-hit-why { color: #77848f; }
.site-hit-sum { margin: 9px 0 0; color: var(--slate); font-size: 13px; line-height: 1.8; }
.site-hit-src { margin: 7px 0 0; color: #6f7c86; font-size: 12px; line-height: 1.7; }
.ask-answer-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 18px; }
.ask-answer-submit > span { color: var(--slate); font-size: 12px; }
@media (max-width: 680px) {
  /* 窄屏上首屏那一组跟着收一档（眉标与长句都已删除，这里只剩控件相关的几条） */
  section.ask-hero-section { padding: 44px 0 24px; }
  section.ask-hero-section .ask-hero { margin: 0 auto 16px; }
  section.ask-hero-section .ask-hero .input[type="search"] { height: 50px; padding: 0 48px 0 16px; font-size: 15px; }
  /* ⚠️ 放大镜在**左边**（与桌面一致），窄屏收一档尺寸与位置 */
  .ask-hero-glass { left: 16px; width: 20px; height: 20px; }
  .ask-hero-glass svg { width: 20px; height: 20px; }
  /**
   * 开关在窄屏上**铺满一行、两段等分**：420px 的屏上两段并排本来就窄，
   * 再居中留白会让"会员专享"胶囊贴到边缘。
   */
  .ask-mode-switch { align-items: stretch; }
  .ask-mode-toggle { display: flex; }
  .ask-mode-seg { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 13px; }
  .ask-mode-seg i { padding: 2px 6px; font-size: 9px; }
  .chips.ask-conditions { max-width: 100%; }
}

/* 按钮里的图标居中 ——显式宽高之后不能再靠 padding 撑，否则会偏 */
.nav-ask .search-btn,
.ask-hero .search-btn { box-sizing: border-box; justify-content: center; }

/* /ask 首屏的条件行：「系统是这么理解你的问题的」（生效中的条件）。
   原来这里还有上面的「试试搜索」建议行，两者样式接近、需要刻意区分；
   建议行已按用户要求整体删除（「不搞推荐匹配了」），所以这段注释也随之简化。*/
.chips.ask-conditions { align-items: center; gap: 8px; }
.ask-row-label { flex: 0 0 auto; color: #6f7d8b; font-size: 12px; }

/* 检索条件是**生效中**的筛选 */
.ask-conditions { margin-top: 4px; }
.ask-conditions .chip {
  padding: 5px 12px;
  gap: 6px;
  font-size: 12.5px;
  border-color: var(--line-gold);
  background: rgba(201, 169, 110, .08);
}
.ask-conditions .chip small { font-size: 11px; color: var(--champagne); letter-spacing: .02em; }

/* 结果标题行：标题在左，排序控件贴着最右（`.sort-toggle` 自带 margin-left:auto）。*/
.ask-result-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ask-result-head h2 { margin: 0; }

/* ============================================================
   「AI 解答」
   ============================================================
   这一块的整体气质要和检索结果**刻意不同**：结果是一列可扫读的卡片，
   解答是一段要逐句读、逐句核的文字。所以它用面板底色 + 更宽的行距，
   读起来像"结论"，而下面那一列仍然像"清单"。

   全部用主题变量（--navy-3 / --hair / --white / --slate / --champagne），
   深色与浅色两套主题自动都对 —— 不要在这里写死颜色。
*/
.ask-ai-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  max-width: 720px;
}
/* 触发按钮：金色描边而不是实心 —— 它不该比搜索按钮更抢眼，
   但要比普通次要按钮更明确（它会产生一次真实的模型调用）。*/
.ai-btn {
  border-color: var(--line-gold);
  color: var(--champagne);
  background: rgba(201, 169, 110, .08);
}
.ai-btn:hover { background: rgba(201, 169, 110, .18); color: var(--champagne); }
.ai-btn.on { background: var(--champagne); border-color: transparent; color: #0b1a26; }
.ask-ai-hint { color: #6f7d8b; font-size: 12px; }

/* 「依据本站数据库」这个小标 —— 它回答的是读者看到 AI 文字时第一个疑问：
   "这些话是从哪来的"。所以它必须紧挨着标题，不能藏到段落末尾。*/
.ai-scope {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  color: var(--champagne);
  font-size: 11.5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.ai-answer {
  margin-top: 10px;
  padding: 18px 20px;
  background: var(--navy-3);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--line-gold);
  border-radius: var(--radius);
}
/**
 * 解答正文的**层次**（用户 2026-09-21：「排版要更有层次一些」）。
 *
 * 之前所有段落一个样式：同样字号、同样行距、同样的间距 ——
 * 一段 1000 多字的解答读下来是一整块，读者抓不到结构。
 *
 * 现在按「段落在回答里扮演什么角色」分三档：
 *   1. **首段** —— 直接结论。字号略大、颜色最亮，视觉上先被看到；
 *   2. **小标题行**（"复发怎么办""关于维持时间"这类短行）—— 加金色左边线 + 上间距，
 *      把一个长解答切成几块；
 *   3. **正文段** —— 常规。
 *
 * ⚠️ 判定"小标题行"用**结构特征**（短、不以句号结尾、下一段较长），
 * 不用内容猜测 —— 见 `renderAnswerHtml` 里加 `ai-lead` / `ai-head` 类的逻辑。
 */
.ai-answer p {
  margin: 0 0 13px;
  line-height: 1.85;
  color: var(--white);
  font-size: 14px;
  /**
   * ## 双端对齐（用户 2026-09-22：「所有文字较多的页面，我都希望能做到双端对齐」）
   *
   * ⚠️ **参数与全站那一份保持一致**（见文件末尾「两端对齐」那一节）：
   * `inter-character` + `text-align-last: start`。
   *
   * 这里原来写的是 `inter-ideograph` / `text-align-last: left` ——
   * 两处参数不同会造成"同样是对齐，解答正文的松紧和别的页面不一样"，
   * 而这种差异很难描述、只能感觉"哪里怪"。
   *
   *   · `inter-character` 把余量均摊到**每个字之间**（符合中文排版惯例）；
   *   · `text-align-last: start` 让**最后一行不拉伸** ——
   *     不写它，最后一行（往往只有几个字）会被强行撑满，字距忽宽忽窄。
   *
   * `overflow-wrap` 单独给上：对齐后行宽被拉满，长英文串更容易顶破容器。
   */
  text-align: justify;
  text-justify: inter-character;
  text-align-last: start;
  overflow-wrap: break-word;
}
/* 首段：直接回答。大一号、亮一点 —— 读者最先要的是结论。 */
.ai-answer p.ai-lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--white);
  margin-bottom: 16px;
}
/**
 * 小标题：短、独立成段、以下是内容。
 *
 * 用户看了第一版后说「**结合问题，回答的层次可以更分明一些**」——
 * 所以这里把标题**做强**：字号与正文同号但加粗、改金色、左线加粗到 3px、
 * 上下留出明显间距。第一版只有一条细金线，在长解答里几乎看不见，
 * 整篇读下来仍然是一条平铺的河。
 */
.ai-answer p.ai-head {
  margin: 22px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--champagne);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--champagne);
  line-height: 1.5;
  letter-spacing: .01em;
}
.ai-answer p.ai-head:first-child { margin-top: 0; }
/**
 * 小节正文：紧跟在小标题之后的段落，**左侧缩进与标题文字对齐**。
 *
 * 这样"标题 + 它的内容"在视觉上是**一组**，而不是两个等重的段落。
 * 只缩进紧邻的那一段（见 `renderAnswerHtml`）—— 一路缩下去会变成
 * 一大块缩进文本，反而没有层次。
 */
.ai-answer p.ai-item {
  padding-left: 10px;
  border-left: 1px solid var(--hair);
  color: var(--white);
}
/* 小节里若有多段，只有第一段带缩进线；后段回到常规左边距，
   避免出现一条悬空的竖线 */
.ai-answer p.ai-item + p { padding-left: 10px; border-left: 1px solid transparent; }
/**
 * 免责声明：**弱化但有边界感**。
 * 它必须存在且可读，但不能抢正文的注意力 —— 灰色、小一号、上方一条细线。
 *
 * `.interpretation-disclaimer` = 全站统一的那一份（`views/disclaimer.js`），
 * 每个解读页整页放一次、放在最末尾。`.answer-disclaimer` 是它在检索解答里的变体。
 */
.ai-answer .ai-disclaimer,
.ai-answer .interpretation-disclaimer {
  margin: 16px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  color: var(--slate);
  font-size: 12px;
  line-height: 1.7;
}

/* 解读页（试验解析 / 全文解读 / 对比）里的那一份：与正文拉开距离，安静收尾 */
.intel-shell .interpretation-disclaimer {
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--slate-2);
  font-size: 11.5px;
  line-height: 1.85;
}
.ai-answer p:last-child { margin-bottom: 0; }

/* 无依据 / 被拦下时的结论句：加粗一点，让"没有答案"也是一个明确的答复，
   而不是一段读起来像正文的推脱。*/
.ai-verdict { font-weight: 600; }
.ai-answer .note { color: var(--slate); font-size: 13px; }
/* 「通用专业知识」提示 —— 库里没有对应资料时，**必须**让读者知道
   下面的话不是站内条目支撑的，否则他会以为每条背后都有可点开的文献。 */
.ai-knowledge-note {
  margin: 0 0 12px !important;
  padding: 8px 12px;
  border-left: 3px solid var(--line-gold);
  background: rgba(201, 169, 110, .07);
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-size: 12.5px;
}

/**
 * 正文里的引用上标。金色、可点，鼠标悬停显示条目标题（title 属性）。
 *
 * ## ⚠️ 用户报「点击数字，没啥反应」—— 根因不在链接本身
 *
 * 排查结论：`<a href="#ev-1">` 是**真的链接**，锚点 `id="ev-1"` 也确实存在，
 * 也没有 `pointer-events: none`。问题出在 **`body { overflow-x: hidden }`**：
 * 按 CSS 规范，`overflow-x` 不是 `visible` 时，`overflow-y` 会被计算成 `auto`，
 * 于是 **`body` 自己变成了滚动容器**。此时浏览器跳转 `#ev-n` 会去滚 `body`
 * （而 body 的滚动高度为 0），**页面纹丝不动** —— 表现就是"点了没反应"。
 *
 * 两处一起修（缺一不可）：
 *   1. `scroll-margin-top` 让目标行滚到视口内时**不贴顶**（页头是 sticky 的，
 *      不设的话高亮行会被页头盖住，看起来还是"没反应"）；
 *   2. `:target` 高亮 —— **点击后目标行必须有个明确变化**。
 *      这是"有没有反应"最直接的证据：即使滚动距离很小（目标本来就在视口附近），
 *      读者也能立刻看到是哪一条。
 */
.ai-answer sup.cites { margin-left: 2px; font-size: 11px; line-height: 0; }
/**
 * 相邻两个引用之间留一点缝。
 *
 * 页面上的角标是**纯上标数字**（用户 2026-09-22：「页面多了[]，去掉这个」），
 * 所以这里只剩"别让 `12` 挤成连在一起的一个数"这一件事。
 * 复制/图片那边仍是 `[1][2]`（纯文本里没方括号会和句中的数字混淆），
 * 但**编号本身两边一致**，拿复制的 `[3]` 到页面上找上标 `3` 就能对上。
 */
.ai-answer sup.cites a.cite + a.cite { margin-left: 4px; }
.ai-answer sup.cites > a.cite + i { margin-right: 1px; }
.ai-answer a.cite {
  display: inline-block;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: rgba(201, 169, 110, .16);
  color: var(--champagne);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: super;
}
.ai-answer a.cite:hover { background: var(--champagne); color: #0b1a26; }

/* 跳转目标：留出页头高度，并保证滚得到 */
.ai-source-list li { scroll-margin-top: 96px; }
/**
 * 被点中的那一条 —— 用**左侧金色粗线 + 更亮的底色**标记。
 * 它必须与 `.cited`（"被正文引用过"的静态高亮）**明显不同**，
 * 否则读者分不清"我点的那条"和"所有被引用过的条"。
 */
.ai-source-list li:target {
  background: rgba(201, 169, 110, .2);
  box-shadow: inset 3px 0 0 var(--champagne);
  outline: 1px solid var(--line-gold);
}
/**
 * 点击 `[n]` 后的高亮脉冲 —— 由 `views/ask.js` 的 `CITE_JUMP_SCRIPT` 加上。
 *
 * 为什么不能只靠 `:target`：**目标条可能本来就在视口里**，此时页面不会滚动，
 * 读者看不到任何变化，就会以为"点了没反应"（用户报的正是这个）。
 * 这个脉冲是"我点的那一条就是这个"的直接反馈，与滚动距离无关。
 */
.ai-source-list li.cite-flash {
  animation: cite-flash 1.5s ease-out;
}
@keyframes cite-flash {
  0%   { background: rgba(201, 169, 110, .42); box-shadow: inset 4px 0 0 var(--champagne); }
  100% { background: rgba(201, 169, 110, .07); box-shadow: inset 0 0 0 transparent; }
}
/* 尊重系统的"减少动画"偏好：只做静态高亮，不做脉冲 */
@media (prefers-reduced-motion: reduce) {
  .ai-source-list li.cite-flash { animation: none; background: rgba(201, 169, 110, .25); }
}
/* 让锚点跳转尽量平滑；关掉系统"减少动画"偏好时自动退回瞬时跳转 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/**
 * 出处清单
 *
 * ## 2026-09-23：清单**只列正文引到的那几条**
 *
 * 用户报「文献数量和正文经常匹配不上，参考文献的数量会更多一些」。
 * 所以现在 `.ai-source-list` 出现在两个地方，语义不同：
 *   · `.ai-sources`（不折叠）—— **参考资料来源**：只列正文引到的，带编号与 `id`；
 *   · `.ai-drafts`（`<details>` 折叠）—— **本次还检索到**：没被引到的，不编号。
 *
 * ⚠️ `grid-template-columns` 的编号列宽走 **`--n-col` 内联变量**
 * （由 `views/ask.js` 按最大编号位数算）：原来写死 `28px` 只够 `[1]`~`[9]`，
 * 到 `[10]` 就挤出一格、整列题目左边缘开始参差。写足篇幅后引到 10 条以上是常态。
 */
.ai-sources { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.ai-sources-label {
  margin: 0 0 10px !important;
  color: var(--slate);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ai-source-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
/* 每条参考文献 = **编号 + 题目 + 期刊·年份**。
   编号用固定宽度的左栏，让所有题目左对齐成一列 —— flex 横排
   会因为编号宽度不同而参差。 */
.ai-source-list li {
  display: grid;
  grid-template-columns: var(--n-col, 28px) 1fr;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate);
}
/**
 * 「本次还检索到」—— 折叠区。
 *
 * ## 为什么默认折起来
 *
 * 它是"这次检索还命中了什么"，**不是正文的出处**。摊开列在参考文献下面，
 * 读者会把它当成出处的一部分 —— 那正是用户报的"数量对不上"。
 * 折起来之后：想知道的人点开，不想知道的人看到的就是与正文一一对应的清单。
 */
.ai-drafts > summary {
  cursor: pointer;
  color: var(--slate);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* `list-style: none` 在部分浏览器不摘掉三角形，需要显式关掉 marker */
.ai-drafts > summary::-webkit-details-marker { display: none; }
/* 自绘的三角：折叠时朝右，展开时朝下 —— 只用 border 画，不引图标 */
.ai-drafts > summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.ai-drafts[open] > summary::before { transform: rotate(90deg); }
.ai-drafts > summary:hover { color: var(--champagne); }
.ai-drafts > summary:focus-visible { outline: 2px solid var(--line-gold); outline-offset: 3px; }
/* 展开后与下面的清单拉开距离（summary 自己带 margin 会被 details 吃掉） */
.ai-drafts[open] > summary { margin-bottom: 10px; }
/* 折叠区里的说明句：**不要**被上面的 uppercase 规则带上（它读起来是一句话） */
.ai-drafts .note {
  margin: 0 0 10px !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
/* 折叠区里的条目没有编号，`·` 只是占位对齐 —— 压暗，别让人以为那是编号 */
.ai-drafts .ai-src-n { color: var(--slate-2, var(--slate)); opacity: .5; }
/* 编号：与正文里的上标同一个金色，读者一眼能把两处对上 */
.ai-src-n {
  color: var(--champagne);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ai-src-body { min-width: 0; }
/* 带编号的条目 = 被正文引用过。整份清单都是这一类，底色只是给"出处"这件事
   一点分量，与折叠区的素面条目区分开。*/
.ai-source-list li.cited {
  background: rgba(201, 169, 110, .07);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-left: -8px;
}
.ai-src-title { color: var(--white); text-decoration: none; }
.ai-src-title:hover { color: var(--champagne); text-decoration: underline; }
/* 期刊 · 年份：跟在题目后面，弱化（它是出处，不是主角） */
.ai-src-meta {
  margin-left: 8px;
  color: var(--slate);
  font-size: 11.5px;
  white-space: nowrap;
}

/**
 * 复制 / 分享 —— 解答底部的一行动作（用户 2026-09-22 要求）。
 *
 * 放在**参考文献之后、免责声明之前**：读者读完结论与出处，
 * 下一个自然动作就是"把它带走"（复制进笔记、把图片发给医生或家属）。
 *
 * ⚠️ 免责声明必须**排在它后面** —— 那句"不构成医疗建议"是整块内容的收尾，
 * 把按钮压在它下面，会让那句话看起来像按钮的注解。
 */
.ai-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
/* 按钮沿用站内 `.btn.tiny.ghost`，这里只保证文字不折行 */
.ai-actions .btn { white-space: nowrap; }
/* 点击后的即时反馈：按钮文字被临时换成「已复制」等，变色强调一下 */
.ai-actions .btn[data-flash] { color: var(--champagne); border-color: var(--line-gold); }
/**
 * 兜底提示（例如"这次没能生成图片"）。
 *
 * ⚠️ 绝对定位 + 右对齐：它只在点击后短暂出现，若参与行内排版会把标题挤歪
 * （实测那种"点一下页面抖一下"）。
 */
.ai-actions-note {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  color: var(--slate);
  font-size: 12px;
  white-space: nowrap;
}
/* `.ai-actions-note` 的定位基准 —— 两个动作就在标题行右端，提示挂在它下面 */
.ask-result-head { position: relative; }

/**
 * 解答篇幅档位（用户 2026-09-23：「想个性化的控制字数，比如 200 字以内」）。
 *
 * 位置：解答标题行**下面一行**，与「复制解答 / 下载解答图片」分开排。
 *
 * ⚠️ 为什么不塞进 `.ai-actions` 那一行：那一行贴在标题行右端，两个按钮时
 * 已经到边；再塞四档 + 一个自定义输入框，窄屏必然折成两三行、把标题挤歪。
 * 单独一行还能让「篇幅」这个标签有地方站。
 *
 * 材质沿用检索方式开关那套胶囊（见上面 `.ask-mode-seg`），但**整体小一档**：
 * 读者此刻在做的是"读答案时的微调"，不该跟首屏那两个主控件抢注意力。
 */
.ai-len-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}
.ai-len-label { color: var(--slate); font-size: 12px; }
.ai-len-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-len-seg {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  color: var(--slate);
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.ai-len-seg:hover { color: var(--white); background: rgba(255, 255, 255, .09); }
/* 当前档位：金边 + 金字 —— 与「智能检索」那颗同一套"这是你选中的"记号 */
.ai-len-seg.selected {
  color: var(--champagne);
  background: rgba(201, 169, 110, .12);
  border-color: var(--champagne);
  font-weight: 600;
}
.ai-len-seg:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
/* 自定义那一格：数字框 + 「应用」，比档位胶囊再矮一点，靠在一起 */
.ai-len-custom { display: inline-flex; align-items: center; gap: 6px; }
.ai-len-custom input[type="number"] {
  width: 84px;
  height: 28px;
  padding: 0 10px;
  /* `inherit` 而不是写死颜色：明暗两套主题各自决定正文色，输入框跟着走 */
  color: inherit;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 12px;
}
.ai-len-custom input[type="number"]::placeholder { color: var(--slate); }
.ai-len-custom input[type="number"]:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
html[data-theme="light"] .ai-len-seg.selected {
  color: var(--gold-deep);
  background: rgba(197, 139, 37, .12);
  border-color: var(--gold-deep);
}
html[data-theme="light"] .ai-len-custom input[type="number"] {
  background: rgba(28, 45, 57, .04);
  border-color: rgba(28, 45, 57, .18);
}
/* 窄屏：题目很长，出处允许换到下一行 */
@media (max-width: 640px) {
  .ai-scope { margin-left: 0; }
}

/* 结果集的标签分布。每个数字都能点 ——与站内其他分面面板同一套交互。
这里用行式排版（一行一个维度），比卡片式分面面板窄、更适合放在结果上方。*/
.ask-facets {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--navy-2, #0b1d2d);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
}
.facet-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  flex-wrap: wrap;
}
.facet-row + .facet-row { border-top: 1px solid var(--hair); }
.facet-label {
  flex: 0 0 68px;
  color: #6f7d8b;
  font-size: 12px;
}
.facet-row .chip { font-size: 12.5px; }
.facet-row .chip small { color: #6f7d8b; font-size: 10.5px; margin-left: 2px; }

@media (max-width: 960px) {
  /* 平板宽度下导航会换行，检索框跟着收窄，别把栏目挤掉 */
  .nav-ask .input[type="search"] { width: 220px; }
}

@media (max-width: 720px) {
  /* 窄屏时检索框自己占一行，别和导航挤在一行里 */
  .nav-ask { flex: 1 1 100%; margin-left: 0; }
  .nav-ask .input[type="search"] { width: auto; flex: 1 1 auto; }
}

/* ------------------------------ 区块层级 ------------------------------ */
/* 四个层级不是装饰：字号、留白、边框强度、底色都按主次递减 */

/**
 * ## ⚠️ 只有**板块**才画外壳，裸 `section` 不行（2026-09 修）
 *
 * 原来这里是 `section { border / border-radius / box-shadow }` ——
 * **无差别**地作用在页面上每一个 `<section>` 上。可 `<section>` 在这个站里
 * 首先是一个**语义标签**：AI 解读正文的每个小节（`.intel-article-section`）、
 * 研究工作台的每个面板（`.research-panel` / `.topic-list`）、
 * 收件箱的工作区（`.inbox-workspace`）全都用它。
 *
 * 于是它们各自被画上了 1px 全边框 + 8px 圆角 + `0 12px 38px` 的投影。
 * 用户报的就是这个（原话）：
 *   > 「这些边缘位置能不能用点心设计下，看着太闹心了」
 *   > 「各种线条，不必要的线体能少就少」
 *
 * 具体坏在哪：解读页每个小节都成了圆角带投影的盒子，而盒子的内边距是 0 ——
 * 那圈 1px 边框离正文只有 1px，等于**沿着每一段文字描了一道竖线**；
 * 小节本身就套在 `.lv2` 壳里，所以是「盒子套盒子」。
 *
 * 现在只给四级板块外壳。其余 `<section>` 一律不画 ——
 * 需要"一块面板"观感的元素自己声明（见下面 `.panel-surface` 那一组）。
 */
section.lv1, section.lv2, section.lv3, section.lv4 {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
section.lv1 {                       /* 1 = 首屏主角 */
  margin-bottom: 26px;
  padding: 28px;
  background: #0b1c2c;
  border-color: rgba(201, 169, 110, .3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}
section.lv2 { margin-bottom: 18px; padding: 26px; background: #091725; }
section.lv3 { margin-bottom: 16px; padding: 20px 24px; background: #081422; }
section.lv4 {                       /* 4 = 运维信息，最弱 */
  margin-bottom: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .015);
  box-shadow: none;
}

/**
 * 「一块面板」——底色自成一块的元素。
 *
 * 它们**需要**一圈 1px 头发线：浅色主题下 `body` 是纯白（`--navy-2: #ffffff`），
 * 面板也是白底，没有这条线就完全分不出块与块。
 * 但**不需要投影** —— 投影的用途是「浮在内容之上」（证据抽屉、下拉、浮层），
 * 不是给页面里静态的板块加一层灰雾。用户对浅色主题的评价是
 * 「这些所谓的阴影真的丑，很不舒服」，指的就是这些静态投影。
 *
 * ⚠️ 这份名单是**开关**：面板感的块只有这些。新加一块面板就把它写进来，
 * 而不是回去把 `section { … }` 的无差别外壳加回来（那正是被修掉的病）。
 */
.auth-panel, .acct-card, .inbox-workspace, .research-panel, .topic-list,
.hp-member, .hp-paths, .hp-explore {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}

/* 独立成块的 `.intel-card`（额度面板）也要一圈线：
   浅色主题下它是白底、页面也是白底，没有这条线就看不见边界。
   `.intel-cards-flat` 里那种并排的卡片不受影响 —— 它们靠底色分组，不靠线。 */
section.intel-card { border: 1px solid var(--hair); border-radius: var(--radius); }

/**
 * ## ⚠️ 嵌套在 lv1 里的子板块**不画自己的框**（用户：主次不分）
 *
 * 用户报的问题（原文）：
 *   > 「为啥还做个框，这个级别还跟上面的主体一样大，这不是主次不分吗」
 *
 * 指的是产品/项目详情页的「官方来源 / 分国别批准记录」那一节。
 * 根因是**两条规则各自都对、叠在一起就错了**：
 *
 *   1. `section` 拿到卡片外壳是**无差别**的（当时是一条裸 `section { … }`，
 *      现在改成只有 `section.lv1`~`lv4` 加外壳，但嵌套的那层仍然是 `lv3` +
 *      父级 `lv1`，所以这一条依然需要）；
 *   2. 那一节在视图里被写成 `lv2`（`id="sources"` / `id="markets"`），
 *      可 `.lv2 h2` 是 17px、`.lv1 h2` 是 21px —— 只差 4px，
 *      在正文尺度上读起来就是"一样大"；eyebrow 又都是金色，
 *      于是"SOURCES 官方来源"和上面的一级标题看起来**平级**。
 *
 * 结果：一个从属的清单，长得像第二个主体板块。
 *
 * ## 修法：**降级 + 去壳**，而不是在这里另写一个字号
 *
 * 视图已把它从 `lv2` 改成 **`lv3`**（见 `translation.js` 的 `LEVEL_NESTED` 说明）。
 * 这一条只负责**去掉外壳**，不再碰字号 ——
 * 原因是 `test.mjs` 有一条正确的硬约束：
 * **「四个级别各只有一个字号」**（lv2 就必须永远是 17px）。
 * 在这里写 `font-size` 会让 lv2 出现第二个尺寸，
 * 那条断言会（且应当）失败 —— 它守的正是"级别 = 稳定的视觉约定"这件事。
 * 用**已有的级别**表达从属关系，比给同一个级别开后门干净。
 *
 * ⚠️ 只作用于**嵌套**的情形（`.lv1 > .lv3`）。顶层并列的 section
 * （如 `/translation` 的「怎么读这一页」「免责声明」）仍然是卡片，
 * 因为那些是同级板块，画框是对的 —— 用子选择器把两种情况分开。
 *
 * ⚠️ 必须写在 `section.lv1` / `section.lv3` **之后**：
 * 这里用的多是 `border` / `padding` / `margin` 这类**简写**属性，
 * 放在前面虽然靠更高的选择器权重也能赢，但顺序颠倒会让
 * "谁覆盖谁"变得要靠心算权重才能看懂 —— 顺序本身就该表达意图。
 */
section.lv1 > .lv3 {
  /* 去掉外壳：不画框、不铺底、不留卡片阴影 —— 它属于上面那一块，不是新的一块 */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* 靠一条上分隔线起头（站内 lv3/lv4 的语言），间距比顶层板块收一档 */
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--hair-2);
}
/** eyebrow 跟着降：不再用一级板块的金色，避免"两个金色标签 = 两块同级"的错觉 */
section.lv1 > .lv3 .eyebrow { color: #8b9aa8; }
/** 子板块的标题区不再通栏压一条线：上面已经有分隔线了，两层线会显脏 */
section.lv1 > .lv3 > .section-head {
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
section.lv3 .section-head, section.lv4 .section-head { margin-bottom: 12px; padding-bottom: 9px; }

h2 { color: #eef1f4; font-weight: 600; letter-spacing: .03em; }
section.lv1 h2 { font-size: 21px; }
section.lv2 h2 { font-size: 17px; }
section.lv3 h2 { font-size: 15.5px; }
section.lv4 h2 { font-size: 13.5px; color: #8695a5; font-weight: 500; }

/**
 * 全站标题的 Apple 式微调：**大字收字距、降字重**。
 *
 * 中文黑体在大字号下，默认字距会显得松散、字重会显得笨重 ——
 * Apple 中文页（以及它的英文页）在标题上都用负字距 + 500/600 字重，
 * 而不是 700。这只改"观感"，不改字号（字号体系由 `_verify-type-scale` 守着，
 * 四个层级的字号与 `--fs-*` 变量一个都没动）。
 */
h1, h2, h3 { font-weight: 600; }
.detail-title, .hero h1, body.home section.lv1 h2, .narrative-head h2 { letter-spacing: -.015em; }

.eyebrow {
  margin-bottom: 7px;
  color: var(--champagne);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
section.lv4 .eyebrow { color: #6f7d8b; }

/* ============================================================================
   首页的「滚动叙事」版式
   ----------------------------------------------------------------------------
   只作用于首页（`body.home`），**不动其它页面的密度**：
   这是关键取舍 —— Apple 的大留白适合「一屏一件事」的首页，
   但列表页（一屏 20 条）照搬就会把检索效率毁掉。所以留白只加在首页。
   ============================================================================ */

body.home .container { padding-top: 0; }
/**
 * 首页页头的品牌行。
 *
 * ⚠️ 这条覆盖**必须写在基础规则 `.header-brand-row` 之后**（同优先级后写的赢），
 * 它位于文件尾部，顺序天然满足。
 *
 * 值 26px 与 `body.home header` 的上内边距（44px）**不是**一对 ——
 * 首页那条通栏的上内边距是 44px（首屏前需要更大的呼吸），
 * 而这里 26px 只是品牌行到细线的距离。
 * ⚠️ 首页若也要 LOGO 居中，这两个值需要配平；当前用户只要求内页居中，
 * 首页保持现状（44 / 26 + 19）—— **不要顺手改，改了要说**。
 */
body.home header .header-brand-row {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 26px;
}
body.home section.lv1 {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  /**
   * 上内边距 48px（原 `--space-xl` 84px）。
   *
   * 因为 `.hero` 自己还有 84px 下内边距，两者**叠加**成 168px ——
   * 「首屏 → 按疾病选择」之间空得像断了一层。留白要成对给：
   * 上一段已经给了 84px，这一段的上面就只需要 48px，合计 132px 已足够舒展。
   */
  padding: 48px 0 var(--space-xl);
  border-bottom: 1px solid var(--hair-2);
}
body.home section.lv1:last-of-type { border-bottom: 0; padding-bottom: var(--space-lg); }
body.home .section-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
  display: block;
}
/* 区块标题升到 Apple 的量级（22~30px），而不是卡片的 21px */
body.home section.lv1 h2 {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  letter-spacing: -.012em;
}

/* 层级 4 里的健康面板跟着缩小，避免运维信息看起来像主内容 */
section.lv4 .source-health { gap: 10px; }
section.lv4 .health-item { flex-basis: 210px; min-width: 190px; padding: 11px 12px; }
section.lv4 .health-name { font-size: 12.5px; margin-bottom: 5px; }
section.lv4 .health-sub { font-size: 11px; margin-top: 4px; }

/* 详情页标题是页面级标题，不受 lv2 的板块标题尺寸影响 */
section.lv2 h2.detail-title { font-size: 23px; letter-spacing: .01em; }

h3 { color: #e8edf2; font-size: 15px; font-weight: 600; margin: 18px 0 10px; }
/**
 * ## 详情页正文里的小标题（研究概要 / 中文摘要 / 论文信息）
 *
 * 实测问题：这三个标题与正文**字号只差 1.5px**（15 vs 13.5），
 * 字重只差 600 vs 400，而且没有任何视觉锚点 —— 读者滚下来
 * 看到的是三段连续的灰字，找不到分节。
 *
 * 改法（克制版，不加色块、不加下划线）：给标题加一个**很小的**
 * 金色标记，并统一上方留白。标记只有 6px，远看是节奏，
 * 近看才认得出 —— 比整行下划线轻得多，不会把页面切成条带。
 */
.detail-main > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 10px;
  font-size: 14px;
  letter-spacing: .01em;
}
/**
 * ## 标记从「14×2px 短横线」改成「6px 小菱形」（用户：「横线怪怪的」）
 *
 * 短横线是**水平方向**的，而它右边紧跟的就是标题文字：两者没有
 * 从属关系，只靠 8px 间距连着。读者看到的是「—  研究概要」——
 * 那个横线会被读成**没写完的破折号**，或者一段被截断的分隔线，
 * 所以它第一眼像排版事故，而不是一个标记。
 *
 * 换成 45° 的小菱形，方向与标题文本无关，不会再被读成一条线；
 * 同时它比圆点更像「标记」—— 圆点在站内是**列表项**的语义
 * （`.hp-scope-list span::before` 那一套），标题前面用圆点会被
 * 当成分组清单。方形转角本来偏硬，`border-radius: 1.5px` 收一下，
 * 6px 的小块上就不会扎眼。
 *
 * ⚠️ **不要改回竖线。** 标题正下方就是 `.summary.highlight`，
 * 它本身有一条 2px 的金色左边框（`--line-gold`），并且与标题
 * 共用同一个左边缘 —— 两条竖线一上一下，看起来像同一条线断成两截。
 *
 * 颜色用 `--champagne-2` 而不是 `--hp-gold`：它是**分主题**的金色
 * （深色 `#e0bf82` / 浅色 `#a87928`）。原来的 `--hp-gold` 在两个
 * 主题里都是 `#e1b86b`，压在浅色底上只有 1.86:1 —— 那颗标记在
 * 浅色主题里本来就等于看不见。
 *
 * `flex: 0 0 auto` 是必须的：不写的话 flex 会把 6px 的标记拉长，
 * 菱形被拉成平行四边形。
 */
.detail-main > h3::before,
.detail-main .trial-block > h3::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--champagne-2);
  opacity: .85;
  transform: rotate(45deg);
}
/**
 * ⚠️ 第一个标题**上方只收一半留白，不能收成 0**。
 *
 * 收到 0 会让「研究概要」贴到上面那行标签 chips 上（实测就是
 * "地区：中国" 与 "研究概要" 挤在一起），反而更乱。
 * 12px 既能拉开与标签行的距离，又不会在第一屏顶部空出一大块。
 */
.detail-main > h3:first-child { margin-top: 12px; }

/**
 * ⚠️ `h3` 在 `.trial-block` 里**不是 `.detail-main` 的直接子元素**，
 * 所以上面那组"直接子元素"的规则选不中它 —— 「论文信息」会退回
 * 全局 `h3`（15px / 无前缀标记），于是同一页里出现两种标题样式。
 * 这里把同一条规则补给它，并清掉 `.trial-block` 自己的上边距
 * （那是给试验页的多个 block 之间用的，在详情页尾部会多出一段空白）。
 *
 * 前缀标记不在这里重复声明 —— 它和 `.detail-main > h3::before`
 * 共用选择器组，改一处两边一起变。
 */
.detail-main .trial-block > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 10px;
  font-size: 14px;
  letter-spacing: .01em;
}
.detail-main .trial-block { margin-top: 0; }
.detail-main .trial-block > h3:first-child { margin-top: 12px; }
.count, .section-note { color: var(--slate-2); font-size: 12px; font-weight: 400; margin-left: 8px; }
.more { font-size: 13px; white-space: nowrap; }
.note {
  margin: 0 0 14px;
  padding: 9px 12px;
  color: #c9b78f;
  background: rgba(201, 169, 110, .06);
  border-left: 2px solid var(--champagne);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
}

/* ------------------------------ 数据源健康 ------------------------------ */

/**
 * 用 flex 而不是 grid，是为了**不再留块状缺口**。
 *
 * grid 的 `repeat(auto-fit, minmax(210px, 1fr))` 在「一行放 3 个、但剩 4 个块」时：
 * 第 4 个块只占第一列，右边两列空着 —— 页面上就是一块空缺（用户报的「块状缺口」）。
 * flex 让最后一行的块自己长胖撑满，任何宽度下都不会空出一格。
 *
 * `flex: 1 1 250px` + `min-width` 的分工：flex-basis 决定「一行放几个」，
 * min-width 拦住收缩 ——中文的 min-content 可以窄到一两个字，
 * 不设下限的话窄屏下会被压成细条而不是换行。 */
.source-health {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.health-item {
  flex: 1 1 250px;
  min-width: 220px;
  padding: 14px 15px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
}
.health-item.is-empty { border-color: rgba(201, 169, 110, .28); }
.health-name { color: #e7e9ec; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.health-status { display: flex; align-items: center; gap: 8px; }
.health-sub { color: var(--slate-2); font-size: 12px; margin-top: 5px; }
.health-warn { color: var(--warn-fg); font-size: 12px; margin-top: 6px; }
.health-error { color: var(--err-fg); font-size: 12px; }
.latency { color: #6f7d8b; font-size: 11px; }

.badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; }
.badge-success { background: var(--ok-bg); color: var(--ok-fg); }
.badge-error   { background: var(--err-bg); color: var(--err-fg); }
.badge-warn    { background: var(--warn-bg); color: var(--warn-fg); }
.badge-idle    { background: var(--idle-bg); color: var(--idle-fg); }

/* ------------------------------ 资讯卡片 ------------------------------ */

.cards { display: grid; gap: 10px; }

.card {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 16px;
  padding: 16px 17px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  transition: background .15s, border-color .15s, transform .15s;
}
.card:hover {
  background: var(--navy-4);
  border-color: var(--line-gold);
  transform: translateY(-1px);
}
.card-main { min-width: 0; }
/* 监管来源的卡片没有评分列，正文占满整行 */
.card-unscored { grid-template-columns: 1fr; }
/* 卡片内部层级：标题 > 英文原题 > 亮点 > 元信息 > 标签。
分数刻意比标题小：它是辅助信号，正文标题才是卡片主角。*/
.card-title { font-size: 17px; font-weight: 600; line-height: 1.45; }
.card-stream .card-title { font-size: 16px; }
.card-title a { color: #eef1f4; }
.card-title a:hover { color: var(--champagne-2); }
.title-en {
  margin: 5px 0 0;
  color: #6f7d8b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.untranslated {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10.5px;
  color: #c9b78f;
  border: 1px solid rgba(201, 169, 110, .35);
  border-radius: var(--radius-sm);
  vertical-align: 2px;
  cursor: help;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 8px;
  color: #7f8e9c;
  font-size: 11.5px;
}
.card-hero .card-meta { font-size: 12px; }
/**
 * 元信息行里的每一项都**整体不折行**：日期（`2026 Sep 15`）、期刊缩写。
 * JCR 等级（`Q1 · IF 23.9（JCR 2025）`）被拆成两行都很难读。
 * 容器本身是 `flex-wrap: wrap`，所以放不下时会在**项与项之间**换行，
 * 这才是想要的效果（用户要求「保持在同一行出现」）。 */
.card-meta > span { white-space: nowrap; }
.source {
  padding: 1px 7px;
  background: rgba(201, 169, 110, .1);
  color: #d9be89;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.source[data-source="pubmed"] { background: rgba(120, 170, 255, .1); color: #9fc0f0; }
.source[data-source="fda"] { background: rgba(140, 220, 180, .1); color: #96d3b4; }
/* 中国监管政策：用偏暖的红，和两个美国源一眼区别 */
.source[data-source="cn-policy"] { background: rgba(230, 140, 130, .12); color: #e5a79c; }
.journal { color: #7f8e9c; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/**
 * 期刊缩写（NLM 形式，如 `Clin Cancer Res`）。
 * 比全名短得多，所以在卡片与详情的元信息行里都用它 ——
 * 全名太长会被截断（`Clinical cancer research : an official journal of…`）。
 *
 * **不用斜体**（用户要求「这种不要用斜体，正常的就行」）。
 * 斜体在中文界面的元信息行里显得像「待确认的占位符」，而且这一行的
 * 其余部分（来源、时间、JCR 等级）都是正体，只有刊名斜着反而突兀。
 * `font-style: normal` 是显式写的：万一将来有全局斜体规则，这里也压得住。 */
.journal-abbrev { color: #9aa7b4; font-style: normal; }
/* 时间类型标记：试验显示「更新」（在研试验的最近更新才是前沿信号），论文显示「发表」 */
.date em { font-style: normal; color: #6b7987; font-size: 10.5px; margin-left: 1px; }
/* JCR 等级：金色，与「来源」「时间」并排时一眼能认出 */
.level { color: #d9be89; font-weight: 500; }
.authors { color: #6f7d8b; }
.date { color: #7f8e9c; }
.card-highlight {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--hair-2);
  color: #a9b5c1;
  font-size: 12.5px;
  line-height: 1.7;
}

/* 评分区：分数是辅助信号，不再比标题更大（标题才是卡片主角）。*/
/**
 * `padding-top: 18px` 是为了**跟标题对齐**（用户要求：「两样的位置调整下，
 * 要下来一点，参考临床招募板块里列表对应的那种高度」）。
 *
 * 卡片是栅格：正文与评分各占一列。正文那一列的头一个是 `h3.card-title`，
 * 而全局 `h3 { margin: 18px 0 10px }` 的 18px 上边距没有在卡片里被覆盖 ——
 * 于是标题文字被推下去 18px，而评分列（普通 div）从单元格顶端开始，
 * 看起来就是「分数悬在标题上方」。临床招募的列表行之所以是对的，
 * 因为 `.trial-title` 显式写了 `margin: 0 0 7px`，两边都从顶端开始。
 *
 * 这里不动标题（把它上提会让整张卡片变矮、版式跟着变），只把评分列下移同一个量。
 * 小屏那条规则（评分行横排到正文下方）会覆盖成 10px，不受这里影响。 */
.card-score { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; padding-top: 18px; }
.score-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: #cbb079;
  font-variant-numeric: tabular-nums;
}
.card-hero .score-value { font-size: 15.5px; }
.score-value small { font-size: 10px; font-weight: 400; margin-left: 1px; color: #7f8e9c; }
.score-value.hot { color: #e0c085; }
.score-value.mid { color: #cbb079; }
.score-value.low { color: #8b98a5; }
/* 星级：给不习惯读百分数的人一个定性刻度。
用纯文本星形（★/☆）而不是 emoji：emoji 尺寸固定且偏大，5 颗会撑破评分列。*/
.score-stars { font-size: 12px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.score-stars .on { color: var(--champagne); }
.score-stars .off { color: #38434e; }
.score-stars.hot .on { color: #eccf92; }
.score-stars.low .on { color: #7f8e9c; }
.card-hero .score-stars { font-size: 13px; }
.detail-side .score-stars { font-size: 17px; margin-top: 4px; }
/* `.score-mini`（四维迷你条）与 `.score-link`（评分依据）已删。
列表右侧只留分数与星级，分项构成到详情页看那四根进度条。*/

/* ------------------------------ 评分明细 ------------------------------ */

/**
 * ⚠️ 三根条**必须等宽、对齐网格**。
 *
 * 原来 `.bd-track` 是 `1fr`，而每行的进度条**起点**取决于
 * `.bd-name` 里文字的宽度 —— 「权威性」「相关性」「新鲜度」三个词
 * 都是三个字，本该齐平；但 `grid-template-columns: 92px 1fr 34px`
 * 里的第一列在**内容超宽时会被撑开**（`92px` 是固定的，没问题；
 * 问题在 `1fr` 的轨道会随容器宽度变化，而三条的 `%` 不同）。
 * 实测图上三条**长短不一且左端对齐**是对的，但**数值列**（75/85/99）
 * 与条之间隔着 `10px`，三行数值的右端没有对齐到同一条竖线 ——
 * 因为 `.bd-val` 没有固定宽度，而 `34px` 那一列是够的，
 * 真正的毛病是 `gap: 10px` 让数值被推得离条很远。
 * 收到 `8px`，并把轨道高度压到 4px（与正文的视觉重量匹配）。
 */
.breakdown { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.bd-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
}
.bd-name { color: #a9b5c1; white-space: nowrap; }
.bd-name small { color: #6f7d8b; margin-left: 3px; }
.bd-track { height: 4px; background: rgba(255, 255, 255, .09); border-radius: 2px; overflow: hidden; }
.bd-track i { display: block; height: 100%; background: linear-gradient(90deg, rgba(201, 169, 110, .4), var(--champagne)); }
.bd-val { color: var(--slate-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------ 空状态 ------------------------------ */

.empty, .empty-block {
  padding: 30px 20px;
  text-align: center;
  color: var(--slate-2);
  font-size: 13.5px;
}
.empty-title { color: #c3cdd7; font-size: 14.5px; margin-bottom: 10px; }
.empty-hint { margin-top: 8px; font-size: 12.5px; color: #7f8e9c; }

/* ------------------------------ 时间范围切换 ------------------------------ */
/* 「重大事件」板块已下线，这套样式改由「我的关注」的时间范围切换复用 */

.period-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.period-tabs .tab {
  padding: 6px 13px;
  background: var(--navy-3);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  color: #c3cdd7;
  font-size: 13px;
}
.period-tabs .tab small { color: #7f8e9c; margin-left: 6px; }
.period-tabs .tab.active {
  background: rgba(201, 169, 110, .14);
  border-color: var(--line-gold);
  color: var(--champagne-2);
  font-weight: 600;
}

/* ------------------------------ 列表工具条 / 分页 ------------------------------ */

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-2);
}

/**
 * 列表页头部：**说明在左、排序贴右，同一行**。
 *
 * 排序原来待在 `.list-toolbar`（那是给搜索框用的工具条）里。
 * 搜索框去掉后它就孤零零占了一整行 ——用户反馈「这搞两排不难看吗」。 */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.list-head .note { flex: 1 1 auto; margin: 0; min-width: 0; }
.input {
  padding: 8px 10px;
  background: #0c1d2c;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  color: #eef2f5;
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
}
.input:focus { border-color: var(--champagne); outline: none; }
.list-toolbar .input[type="search"] { flex: 1 1 220px; }

/**
 * ⚠️ `font-family: inherit` 与 `line-height` **必须显式写**。
 *
 * 表单控件（`<button>`）不继承字体，浏览器给的是 `font: 13.3px Arial`、
 * `line-height: normal`；而站内大量「按钮」其实是 `<a class="btn">`，
 * 它们继承的是 body 的 `"PingFang SC", "Microsoft YaHei"` 与 `1.65`。
 * 同一个类名、两种字体，混在一排里就是**高度不齐、中文字形也不一致**
 * （实测详情页那一排：`<a>` 比 `<button>` 高约 3.5px）。
 *
 * 这里把两者统一到**继承来的那一套**：`.btn` 自己不再引入第二种字体。
 * `line-height: 1.5` 是显式值（不写 `normal`）：按钮里只有一行字，
 * 1.5 让 13px 文字得到 19.5px 行盒，既比正文的 1.8 紧凑，
 * 又不会像 `normal` 那样随字体度量浮动 —— 换字体时按钮高度不会变。
 */
.btn {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(201, 169, 110, .12);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  color: var(--champagne-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: rgba(201, 169, 110, .22); color: #f0dcae; }
.btn.ghost { background: transparent; border-color: var(--hair); color: #a9b5c1; }
.btn.tiny { padding: 5px 11px; font-size: 12px; }
.btn.disabled { opacity: .4; }

/* ==========================================================================
   按钮的「资格」标记 —— 默认 / 会员 / 锁
   ==========================================================================
   用户 2026-09-22 反馈（附详情页那一排按钮的截图）：
   「会员和非会员的这些图标、按钮，能不能区别下呢，全站在这块的设计做点思考啊。
     现在是一点区别没有」。

   第一版改成了「免费功能退成灰、会员功能保持金」，上线后用户又说
   「**我还是没看出来哪些是默认功能，哪是会员功能**」。原因很具体：

     ⚠️ **站点的默认按钮本来就是金的。**
     `.btn` 的基础材质就是 `rgba(201,169,110,.12)` 底 + 金边 + 金字。
     在一个金色是常态的地方，「金 = 会员」根本读不出来；反倒是变灰的那两颗
     读起来像**禁用**，于是整排被读成「两颗不能用的 + 三颗正常的」，正好说反。

     **颜色只能表达强弱，不能表达类别。** 所以第二版加了字：
     按钮内部一枚「会员」小标（`.btn-tag`），与金实底一起回答「哪些是会员功能」。

   ## 2026-09-25：「会员」两个字也删掉了

   用户对着详情页那一排按钮（全文解读 | 会员、证据链 | 会员、加入对比 | 会员）说：
   「**这里把会员去掉，不需要这个字，点击就懂了**」。

   于是 `.btn-tag` 的样式与全部配色规则**整块删除**，模板侧的 `memberTag()`
   也一并移除（见 `views/intelQuota.js`）。留下的两条仍然有效，且**只靠它们区分**：

     · 会员功能 → 金**实底**（`.btn.is-member`，与价格页「最受欢迎」同一句语义）
     · 你现在用不了 → 退回描边 + 虚线 + 锁（`.btn.is-gated`，锁由模板换掉图标位）

   点下去的去处本身就是说明：能用就进功能页，没资格就落到会员方案页
   （`qualifierClass()` / `gatedHint()` 保证这一点）。
   ========================================================================== */

/* 会员功能：金**实底**。站内「实底金 + 深色字」已经被价格页的「最受欢迎」
   与浅色主题的主按钮用过，语义现成：这是需要付费的那一档。 */
.btn.is-member {
  background: var(--champagne);
  border-color: var(--champagne);
  color: #07131f;
}
.btn.is-member:hover { background: #d8bb7e; border-color: #d8bb7e; color: #07131f; }

/* 主功能（AI 全文解读 / AI 试验解析）在一组会员按钮里再亮一档。
   ⚠️ 暗色主题下这一条原来**根本不存在**（只有浅色主题写了三行），
   所以 `intelActions()` 里的 `primary: true` 一直是空转的。 */
.btn.primary,
.btn.is-member.primary {
  background: var(--champagne-2);
  border-color: var(--champagne-2);
  color: #07131f;
}
.btn.primary:hover,
.btn.is-member.primary:hover { background: #f0dcae; border-color: #f0dcae; color: #07131f; }

/* 现在用不了：**退回描边**（不再是「到手」的实底）+ 虚线 + 锁。
   `gated` 单独一条、`is-member.is-gated` 再一条：
   后者是为了压住上面 `.btn.is-member.primary`（同为 0,3,0，靠顺序取胜）。 */
.btn.is-gated,
.btn.is-member.is-gated,
.btn.is-member.primary.is-gated {
  background: transparent;
  border-style: dashed;
  border-color: rgba(201, 169, 110, .55);
  color: var(--champagne-2);
}
.btn.is-gated:hover,
.btn.is-member.is-gated:hover,
.btn.is-member.primary.is-gated:hover {
  background: rgba(201, 169, 110, .16);
  border-style: solid;
  border-color: var(--line-gold);
  color: #f0dcae;
}

/**
 * 搜索框后面的放大镜按钮（用户要求：所有搜索框后面都要有它）。
 * 只放图标时收成方块，与输入框同高；图标用 `currentColor`，
 * 所以默认金色按钮与 primary 按钮都能直接复用，不用各写一套。 */
.search-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.search-btn.icon-only { padding: 8px 9px; }
.search-icon { display: block; }
.watch-form .search-btn { padding: 11px 20px; }
.watch-form .search-icon { width: 16px; height: 16px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  color: var(--slate-2);
  font-size: 13px;
}
.pager-info.solo { text-align: center; margin-top: 16px; }

/* ------------------------------ 详情页 ------------------------------ */

/**
 * 返回键：只出现在**兜底目标不是首页**的页面（口径见 README §12.116），
 * 位置在标题上方、正文左边缘。
 *
 * 做成一枚**安静的胶囊**而不是一行普通文字链接：一行孤零零的「← 返回」飘在标题上方，
 * 既不像按钮也不像正文（用户的原话：「位置不好，也很丑」）。
 * 用和全站 chips 同一套语言（1px 细边、圆角、hover 变金），读者一眼知道那是个可点的东西，
 * 又不会跟正文抢注意力。 */
.back { margin: 0 0 12px; font-size: 12.5px; line-height: 1; }
.back a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--hair);
  border-radius: 20px;
  color: #9aa7b4;
  text-decoration: none;
}
.back a:hover {
  border-color: var(--line-gold);
  background: rgba(201, 169, 110, .12);
  color: var(--champagne-2);
}
.detail-title { font-size: 24px; line-height: 1.45; margin-bottom: 8px; letter-spacing: .01em; }
.detail-meta { margin: 14px 0 20px; }

/**
 * ## 正文 + 侧栏：侧栏**必须比正文窄得多**，而且不能抢焦点
 *
 * 这一版修的是实测看到的三个问题：
 *
 *   1. **侧栏 320px 太宽**：正文被压到 ~700px，而侧栏里只有
 *      「84.5 / 三根条 / 一句免责」，大片留白。收到 268px，
 *      并且把破折号分隔的标签也一起收窄。
 *   2. **侧栏底色 `--navy-3` 与页面同色**，只有 1px 边框 ——
 *      读者扫视时它和正文分不开。改成比页面**深一档**的实底，
 *      让它是"卡片"而不是"又一段正文"。
 *   3. **三根进度条的轨是 6px 圆头**，视觉重量与正文字号不匹配。
 *      收到 4px 方头（与全站 `border-radius: 2px` 的克制一致）。
 */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 30px;
  align-items: start;
  margin-bottom: 8px;
}
.summary { color: #cfd8e2; font-size: var(--fs-prose); line-height: var(--lh-prose); }
/**
 * ## 详情页的正文**必须限宽**（`--measure`）
 *
 * `.detail-grid` 的正文列是 `minmax(0, 1fr)`，在 1500px 的窗口里
 * 减去侧栏与间距还剩 **900px 以上**。而 `--measure: 62ch` 的注释
 *（见 `:root`）说得很清楚：单栏文章超过约 90 字符回扫就困难。
 *
 * 实测问题：摘要那段中文在 900px 宽度下**一行排到 60 多个汉字**，
 * 读者的眼睛从行尾回到行首会串行；而且它和右侧的评分卡之间
 * 没有任何缓冲，整页读起来是"文字铺满、右边突然一个盒子"。
 *
 * 限宽之后正文约 62 字符，右侧自然留出呼吸位 —— 这不是浪费空间，
 * 是让"读"这件事成立。`max-width` 只约束行宽，
 * 不影响 `.facts` 表格那种本来就该占满的元素。
 */
/**
 * ⚠️ **这里不再限宽 —— 限宽已经由列本身完成。**
 *
 * 原来这里写的是 `max-width: var(--measure)`（`62ch`）。问题出在
 * `ch` 是**相对单位**，它按元素自己的字体解析：`13.5px` 的中文黑体下
 * `62ch` 算出来只有 **475px**。
 *
 * 而 `.detail-grid` 的正文列本身已经是 `minmax(0, 1fr)`，
 * 在 1120px 的容器里实测是 **724px**。两个限宽**叠在一起**，
 * 正文就被压到容器的 **65%**（475 / 724）：
 * 右边空出一条 250px 的空白带，而左边每一行都在 475px 处提前折断 ——
 * 中文在这种宽度下每行只有约 21 个字，一句话被切得七零八落。
 * 这就是用户报的「格式怎么变成这个样子了」。
 *
 * 修法是**只保留一层限宽**：列宽负责「多宽」，正文不再二次收窄。
 * 阅读行宽仍然受控 —— `--page-max: 1120px` 与 268px 侧栏一起，
 * 把正文列钉在 724px（约 53 个汉字），本来就在舒适区内。
 */
.detail-main .summary,
.detail-main .paper-section p,
.detail-main .abstract-en .summary { max-width: none; }

/**
 * ==========================================================================
 *  两端对齐（双端对齐）
 * ==========================================================================
 *
 * ⚠️ 全站原来**没有任何一处 `text-align: justify`** —— 正文一律
 * `text-align: start`（左对齐），右端天然参差。
 *
 * 实测（1440px 视口，论文详情页）：
 *   · 中文摘要 5 行，各行右端落在 906 / 913 / 909 / 917 / 807
 *     —— 最后一行短 110px；
 *   · 英文摘要 17 行，各行右端距块右边界 11~91px，
 *     也就是**最宽处差了 80px**，看起来像被啃过一口。
 *
 * 中文正文尤其需要两端对齐：汉字是等宽的方块字，左对齐时每行末尾
 * 都会留出半个字到一个字的缺口，整段看下来右边缘呈锯齿状。
 * 中英混排（摘要里全是 `CAR-NK`/`CAR-T` 这类拉丁词）缺口更大 ——
 * 拉丁词不能被拆开，遇到放不下就整词跳到下一行，末尾缺口能到 90px。
 *
 * 做法：
 *   · `text-align: justify`      —— 行内拉伸，两端都贴边
 *   · `text-justify: inter-character` —— **中文按字距拉伸**。
 *     默认 `auto` 在中文里会在词间塞进大块空白（"汉字 之间 像 这样"），
 *     `inter-character` 把多余空间均摊到每个字之间，符合中文排版惯例。
 *   · `text-align-last: start`   —— **最后一行不拉伸**。
 *     这一条是必须的：不写的话最后一行也会被拉满，而它往往只有
 *     几个字（实测 807 vs 917），硬拉会变成"几 个 字 撑 满 一 行"。
 * ## 覆盖范围：**所有承载长段落的地方**（用户 2026-09-22：
 *    「所有文字较多的页面，我都希望能做到双端对齐」）
 *
 * 下面这一串是逐页核对出来的正文容器，按页面归类：
 *
 * | 页面 | 容器 |
 * |---|---|
 * | 论文详情 | `.detail-main .summary`、`.paper-section p`、英文摘要 |
 * | 检索结果卡 | `.card-highlight`、`.summary` |
 * | 试验入排 | `.eligibility-list li` |
 * | 指南共识 | `.gd-field dd`、`.gd-gap-finding`、`.gd-gap-action` |
 * | 患者手册 | `.pd-line > div`、`.pg-note`、`.pg-editor-note` |
 * | 监管框架 | `.reg-access-note`、`.reg-src-note` |
 * | 智能检索解答 | `.ai-answer p`（见上面另一处，参数与这里一致） |
 * | 软件内解读 / 报告 | `.intel-quote`、`.intel-note`、`.intel-synth-item` |
 * | 站内译文 | `.gd-field dd`（字段值）、`.pd-warn-text`（黑框警告正文） |
 * | 邀请有礼 / 会员方案 | `.invite-lead`、`.invite-rules`、`.invite-foot`、`.pricing-note` |
 *
 * ⚠️ **不要把 `.meta` / 标签 / 徽章 / 表格单元格放进来**：它们都是短文本，
 * 两端对齐只会在几个字之间硬塞空白，比左对齐更难看。对齐只对"成段的正文"有意义。
 */
.detail-main .summary,
.detail-main .paper-section p,
.detail-main .abstract-en .summary,
.card-highlight,
.summary,
.eligibility-list li,
.gd-field dd,
/* —— 指南共识：差距分析的结论与建议 —— */
.gd-gap-finding,
.gd-gap-action,
/* —— 患者手册：编者备注与说明段 —— */
.pg-note,
.pg-editor-note,
.pg-industry-note,
/* —— 监管框架：路径判断 / 容易误读之处 / 来源备注 —— */
.reg-access-note,
.reg-src-note,
/* —— 软件内解读与报告 —— */
.intel-quote,
.intel-note,
.intel-synth-item,
/* —— 站内译文：黑框警告正文（长段落），字段值见上面的 .gd-field dd —— */
.pd-warn-text,
/* —— 邀请有礼 / 会员方案：页面上的成段正文（2026-09-24 补）——
   这两页的段落原来各自套着 `max-width: var(--measure)`，而 `ch` 是相对单位，
   18px 的导语与 12.5px 的规则算出来是**两个宽度**，右边缘差出一大截，
   用户看出来的就是「连双端对齐都没做到，这些段落长短不一」。 */
.invite-lead,
.invite-note,
.invite-foot,
.invite-rules,
.invite-how p,
.invite-renew-note,
.pricing-head > p:last-child,
.pricing-note,
.pricing-explain p,
.pd-line > div {
  text-align: justify;
  text-justify: inter-character;
  text-align-last: start;
}
.disclaimer { margin-top: 12px; color: #7f8e9c; font-size: 12px; }
/**
 * 侧栏里的免责声明**用分隔线与分数分开**。
 *
 * 它原来只是 `margin-top: 12px` 的一段灰字，紧贴在进度条下面 ——
 * 在那张截图里读起来像是"新鲜度 99"的下一行数据。
 * 加一条上分隔线，语义就清楚了：上面是分数，下面是"分数的用法说明"。
 */
.detail-side .disclaimer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair-2);
  font-size: 11.5px;
  line-height: 1.7;
}
/**
 * 侧栏：**吸顶**。
 *
 * 正文往往好几屏（论文有概要 + 摘要 + 英文摘要 + 论文信息），
 * 侧栏只有一屏高。不吸顶的话读者往下滚，右边就剩一片空白，
 * 而"这条内容多少分"恰恰是他边读边想知道的。
 */
.detail-side {
  position: sticky;
  top: 16px;
  padding: 16px 18px;
  background: rgba(6, 19, 31, .72);
  border: 1px solid var(--hair);
  border-radius: 4px;
}
.detail-side h3 { margin-top: 0; }
/**
 * ## 评分卡头部：分数 + 星级读成**一块**，不是两行
 *
 * 实测（1200px 宽的截图）看到的两个毛病：
 *
 *   1. **「分」字离数字太远**。`small` 只有 `margin-left` 没有
 *      `vertical-align`，34px 的数字与 12px 的「分」各按自己的基线站，
 *      「分」掉到数字右下角，像两个不相干的元素。
 *   2. **星级孤零零占一行**。它是分数的定性注解，却因为字号 17px +
 *      `margin-top: 4px`，在卡片里成了第三块独立内容。
 *
 * 改法：给分数行一个 flex 容器（`align-items: baseline`），
 * 让「84.5」和「分」按同一条基线紧挨着；星级收到 13px 并压到 6px 上边距，
 * 视觉上归属到分数这一块。
 */
.big-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 32px;
  font-weight: 700;
  color: #e0c085;
  line-height: 1.05;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.big-score small { font-size: 12px; color: var(--slate-2); font-weight: 400; }
/**
 * 星级紧贴分数下方，字号**不能超过分数的一半**。
 *
 * 原来 `.detail-side .score-stars { font-size: 17px }` 比正文字号还大，
 * 五颗星成了卡片里最抢眼的东西 —— 而它是给"不习惯读百分数的人"
 * 的**辅助**刻度（见 layout.js 里 `starRow` 的注释），不该盖过分数本身。
 */
.detail-side .score-stars { font-size: 13px; margin-top: 5px; letter-spacing: .06em; }
.formula { margin-top: 10px; color: #7f8e9c; font-size: 11.5px; word-break: break-all; }

/**
 * 1px 细线分隔的格子（论文信息 / 试验设计 / 关键日期 / 联系与责任方）。
 *
 * 格子数常常凑不满一整行（论文信息 4 格、一行放 3 格；原文标识只有 1 格）。
 * 原来容器的底色是**分隔线色** `--hair-2`，于是空出来的那格里就露出一块灰 ——
 * 看着像少了一块（用户报的「块状缺口」）。
 * 现在容器底色改成与格子同色，空位自然融进色块；细线改由格子自己画
 * （只画右、下两边的 1px 外阴影，正好落进 `gap: 1px` 里，
 * 相邻两格不会叠成 2px，也不会两个半透明叠在一起变亮）。 */
/**
 * ⚠️ `minmax(280px, 1fr)` 在**正文列只有 724px** 时会退化成单列。
 *
 * `auto-fit` 的规则是「能塞几列塞几列」，280px 的门槛意味着
 * 724px 里最多只放得下两列（280×2 + 1px 间隙 = 561px），
 * 再扣掉 `.fact` 自己的 13px×2 内边距，两列的值列各只剩约 250px ——
 * 作者名与单位名都是长串，在 250px 里被折断成
 * 「Department of Thoracic / Surgery, The Second Affiliated / Hospital of…」
 * 这种一块一块的样子（用户截图里就是这个）。
 *
 * 门槛降到 **220px** 之后：
 *   · 724px 的正文列稳定排成**两列**，每列约 350px，长机构名一行能放下更多；
 *   · 窄屏（≤760px）下仍然会自动收成一列，不会溢出。
 */
/**
 * ⚠️ **列宽门槛决定的不只是列数，还有"机构名要折几行"。**
 *
 * 门槛 220px 时，724px 的正文列会排成 **3 列 × 240px**。听起来很整齐，
 * 实测却很难看：第一作者单位 / 通讯作者单位这种长串在 240px 里
 * 要折 **8~9 行**（167~188px 高），而旁边的「作者」只要 2 行 ——
 * 同一行里一个格子撑到 223px 高、另一个格子里一大片空。
 *
 * 门槛提到 **300px** 之后列数变成 **2 列 × ~360px**：
 * 同样的机构名只折 4~5 行，行高更均匀，长串的可读性也明显更好。
 * 窄屏（<640px）仍然自动收成一列，不会溢出。
 */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /**
   * ⚠️ **同一行的格子必须等高，但不能让最后一行吃掉整屏。**
   *
   * 默认 `auto` 时每个格子按自己的内容定高：截图里「作者」「第一作者单位」
   * 「通讯作者单位」三个格子的内容长短差很多，于是**同一行里三个格子的
   * 底边线不在一条水平线上**，网格线断成两截 —— 表格最基本的"横平竖直"
   * 就是这么丢的。
   *
   * 但直接写 `grid-auto-rows: 1fr` 会**反向出错**：`1fr` 把"剩余空间"
   * 均分给每一行，于是内容只有一行的「文献类型 / 期刊」那一行被拉到
   * 几百像素高，露出一大块空白（实测就是这样）。
   *
   * 正确写法是 **`min-content` 打底 + 行内等高**：
   * `grid-auto-rows: min-content` 让行高由该行最高的格子决定，
   * 再让 `.fact` 自己 `height: 100%` 撑满该行 —— 两者合起来
   * 就是"同行等高、不同行各自紧凑"。
   */
  grid-auto-rows: min-content;
  gap: 1px;
  margin: 12px 0 18px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  overflow: hidden;
}
.fact {
  padding: 11px 13px;
  background: var(--navy-3);
  box-shadow: 1px 0 0 var(--hair-2), 0 1px 0 var(--hair-2);
  /**
   * 撑满所在行的高度 —— 配合 `grid-auto-rows: min-content`（见上），
   * 同一行里内容短的格子会和最高的那个等高，底线齐平。
   * 内容仍然从顶部开始排（块级流），不会被垂直居中拉散。
   */
  height: 100%;
}

/**
 * ⚠️ **字段数为奇数时，最后一行会空出半行。**
 *
 * `.facts` 一行排 2 格（正文列 724px / 门槛 300px）。「论文信息」实测
 * 是 5 个字段：作者 / 第一作者单位 / 通讯作者单位 / 文献类型 / 期刊。
 * 排下来是 2 + 2 + 1 —— 最后一格落在**第 2 列**，
 * 于是第 1 列留下半行空白（实测 `x: 434, w: 361`，
 * 左边 73~434 那一整块是空的）。
 *
 * 修法是让最后一个格子**从第 1 列起、横跨到最后一列**：
 * `grid-column: 1 / -1`。它独占一整行，表格就收口成满行。
 *
 * 为什么不用 `auto / -1`：那样只能"延伸到末尾"，
 * 起点仍由自动放置决定（会落在第 2 列），洞留在左边 —— 实测就是这样。
 */
.facts > .fact:last-child { grid-column: 1 / -1; }

/* 单字段表（论文只有「原文标识」）本来就只有一格，别让它被拉成整行高 */
.facts > .fact:only-child { grid-column: auto; height: auto; }
.fact dt { color: #7f8e9c; font-size: 11.5px; margin-bottom: 4px; }
.fact dd { color: #d5dee7; font-size: var(--fs-meta); word-break: break-word; }
/**
 * 日期这类短值整体不折行（用户要求「2026 Sep 15 保持在同一行」）。
 * `word-break: break-word` 是给长期刊名/长单位名用的，日期不需要它 ——
 * 默认排版下 `2024-01-15` 也会断在连字符处。 */
.fact dd.nowrap { white-space: nowrap; }
.origin-link { margin-top: 16px; }

/* ------------------------------ 页脚 ------------------------------ */

.site-footer {
  margin-top: 26px;
  padding: 18px 4px 0;
  border-top: 1px solid var(--hair);
  color: #6f7d8b;
  font-size: 12px;
}
.footer-links { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
.footer-link-group { min-width: 0; padding: 15px 17px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--navy-3); text-align: left; }
.footer-link-group h2 { margin: 0; color: #d5dee7; font-size: 13px; font-weight: 650; }
.footer-link-group > p { margin: 4px 0 11px; color: #8796a5; font-size: 11px; }
.footer-link-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.footer-link-list li { margin: 0; padding: 0; }
.footer-link-list a, .footer-link-group-secondary a { display: inline-block; padding: 4px 8px; border: 1px solid var(--hair-2); border-radius: 6px; color: #c4d0db; text-decoration: none; }
.footer-link-list a:hover, .footer-link-group-secondary a:hover { border-color: var(--gold); color: var(--gold); }
.footer-audience-patients { border-top: 2px solid #53b7a5; }
.footer-audience-clinicians { border-top: 2px solid var(--gold); }
.footer-link-group-secondary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 0; border: 0; background: none; opacity: .78; }
@media (max-width: 640px) {
  .footer-links { grid-template-columns: 1fr; }
  .footer-link-group-secondary { grid-column: auto; }
}

/*
 * 首页原来有一条「收录范围」横幅（金边方块，写着「已完成的试验、非肿瘤适应症、
 * 5 年前的文献不收录」）。用户要求删掉：「没必要保留，非必要文字信息不保留」。
 * 定位这类说明属于**产品介绍**，不是内容本身；页脚的数据来源说明已经覆盖了必要信息。
 * 样式一并删除，避免留下没人用的规则。 */

/* 自选关注：个性化入口，一个大搜索框 + 命中结果 */
.watch-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.watch-form .input {
  flex: 1 1 420px;
  padding: 11px 14px;
  font-size: 14px;
  background: #0c1d2c;
  border-color: rgba(255, 255, 255, .16);
}
.watch-form .input:focus { border-color: var(--champagne); }
.watch-form .btn { padding: 11px 22px; font-size: 14px; }
.watch-meta { margin: 12px 0 16px; color: #c3cdd7; font-size: 12.5px; }
.watch-meta b { color: var(--champagne); font-weight: 600; }
.watch-meta .muted { color: #7f8e9c; }

/* ---------------- 自建深色日期选择器 ----------------
 *
 * 原生 `<input type="date">` 的弹层由**浏览器绘制**，CSS 改不了它 ——
 * 在这个深色站点上是一个亮蓝选中块 + 白色面板（用户：「这个界面做的好看些，
 * 现在的太丑了」）。所以自己做一套，配色跟站点走。
 *
 * ## 渐进增强
 *
 * 原生 input **仍在 DOM 里**（`.cal-native`），只是视觉上藏起来：
 *   - 脚本没跑（禁用 JS）：`.cal-field` 里的触发器与弹层不生效，
 *     由 `:root:not(.has-cal) .cal-native` 把原生框显示出来；
 *   - 脚本跑了：给 `<html>` 加 `.has-cal`，隐藏原生框、启用弹层。
 *
 * 提交路径完全不变：日历选中后把 `YYYY-MM-DD` 写回原生 input 的 value。
 */
/* 日期字段与预设档位在**同一行**：见下面 `.sub-date-form` 那一组规则 */
.cal-range-sep { color: #6f7d8b; font-size: 11px; }

.cal-field { position: relative; }

/** 触发器：看起来像站内其它输入框，但带一个日历图标 */
.cal-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 118px;
  padding: 7px 10px;
  background: var(--navy-4);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  color: #a9b5c1;
  font-family: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cal-trigger:hover { border-color: var(--line-gold); }
.cal-trigger:focus-visible { outline: 2px solid var(--champagne); outline-offset: 1px; }
.cal-trigger-text { flex: 1; text-align: left; font-variant-numeric: tabular-nums; }
/* 未填时用更淡的颜色，与「已选」区分 */
.cal-field:not(.has-value) .cal-trigger-text { color: #6f7d8b; }
.cal-trigger.has-value .cal-trigger-text { color: #dbe4ec; }
.cal-icon { flex: 0 0 auto; color: #c3cdd7; }
.cal-trigger:hover .cal-icon { color: #eef2f5; }

/**
 * 原生 input：**藏起来但仍可聚焦**（不能用 display:none，否则失去可访问性）。
 * 只有脚本确实接管了（`html.has-cal`）才藏。
 */
.cal-native {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
html:not(.has-cal) .cal-native {
  position: static; width: auto; height: auto; clip: auto; overflow: visible;
  padding: 7px 10px; background: var(--navy-4);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-sm);
  color: #a9b5c1; font-family: inherit; font-size: 12.5px;
}
html:not(.has-cal) .cal-trigger,
html:not(.has-cal) .cal-pop { display: none; }
/* 没有 `:has()` 的旧浏览器兜底：`.has-value` 由服务端渲染时按值给出 */
.cal-field.has-value .cal-trigger-text { color: #dbe4ec; }

/**
 * 弹层：**挂在 `<body>` 下、`position: fixed`**。
 *
 * ## ⚠️ 位置必须 fixed + 挂在 body，两个条件缺一不可
 *
 * 面板外面套着站内通用的折叠壳
 * `.facets-collapsible { overflow: hidden; max-height: 820px }`
 * （折叠动画需要它）。`overflow: hidden` 会裁掉超出边界的内容，
 * 而日历必然要伸到面板外面去。实测两次：
 *
 *   1. `position: absolute` 放在字段里 → 只剩第一行日期；
 *   2. 改成 `position: fixed`、**仍放在字段里** → 还是被裁。
 *      `fixed` 只摆脱「滚动容器」与「定位上下文」，
 *      **摆脱不了祖先的 `overflow: hidden`**。
 *
 * 所以弹层由脚本创建、挂到 `document.body`，彻底离开那棵子树。
 * 坐标由脚本按触发器的 `getBoundingClientRect()` 写进行内样式。
 */
.cal-pop {
  position: fixed; z-index: 60;
  width: 244px;
  padding: 10px;
  background: var(--navy-2);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.cal-pop[hidden] { display: none; }

.cal-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.cal-title { flex: 1; text-align: center; font-size: 12.5px; color: #dbe4ec; font-variant-numeric: tabular-nums; }
.cal-nav {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hair);
  border-radius: 4px; color: #9aa8b6; font-size: 14px; line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { border-color: var(--line-gold); color: var(--champagne); }

.cal-week,
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-week { margin-bottom: 3px; }
.cal-week span { text-align: center; font-size: 10px; color: #6f7d8b; }

.cal-cell {
  height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: #c3cdd7; font-family: inherit; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-blank { cursor: default; }
.cal-cell:hover:not(.cal-blank) { background: rgba(201, 169, 110, .16); border-color: var(--line-gold); }
/** 选中：金色实心（与站内 `.chip.on` 同一套语义 —— 金色 = 已生效） */
.cal-cell.is-selected {
  background: var(--champagne); border-color: var(--champagne);
  color: #10202e; font-weight: 600;
}
/** 今天：金色描边但不填充，避免与「选中」混淆 */
.cal-cell.is-today { border-color: var(--line-gold); color: var(--champagne-2); }

.cal-quick { display: flex; gap: 4px; margin-top: 9px; }
.cal-quick-btn {
  flex: 1;
  padding: 5px 0;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--hair);
  border-radius: 4px; color: #9aa8b6; font-family: inherit; font-size: 10.5px;
  cursor: pointer;
}
.cal-quick-btn:hover { border-color: var(--line-gold); color: var(--champagne); }

.cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--hair);
}
.cal-clear, .cal-today {
  background: transparent; border: 0; padding: 2px 4px;
  color: #8695a5; font-family: inherit; font-size: 11.5px; cursor: pointer;
}
.cal-clear:hover { color: #d99; }
.cal-today:hover { color: var(--champagne); }

/* ---------------- 我的订阅：复用站内筛选面板的语言 ----------------
 *
 * 用户要求「参考其他版块，如临床试验的筛选条件样式」。所以订阅面板
 * **不再有自己的外壳与分组样式** —— 它直接用 `/recruiting`、`/papers`、`/all`
 * 在用的那一套：
 *
 *   `.facets-hover` / `.facets-handle` / `.facets-collapsible` / `.facets`
 *   `.facet-group` + `.facet-label` + `.chips` / `.facet-sub` + `.facet-sub-label`
 *
 * 那些规则都定义在上面（约 2100 行起），这一节只放**订阅独有的补充**：
 *   - `.facet-group-sub`：维度名较长时（「关键词」）的标签列宽微调；
 *   - `.sub-form` / `.sub-date-form`：文本框与日期框（其它面板没有）；
 *   - `.sub-actions`：底部唯一的保存按钮（其它面板的 chip 是链接、即时生效）；
 *   - `.chip-toggle`：可勾选 chip（其它面板是 `<a>`）；
 *   - `.sub-add` / `.sub-more2`：期刊候选抽屉（其它面板没有这么多候选）；
 *   - `.sub-notice` / `.sub-tip`：日期放宽的解释与说明文字。
 *
 * ## 布局演进（记下来免得再走回去）
 *
 *   1. **三卡竖排**：结果区被挤，用户说「非常拥挤，很不舒服」；
 *   2. **左右结构**：为补偿左栏宽度不得不把页面撑到 1426px，
 *      且一个页面出现两条滚动轴，窄屏还要回落成上下 —— 维护两套；
 *   3. **上下结构 + 站内统一的面板语言（当前）**：结果区拿到整页宽、
 *      只有一条滚动轴、窄屏行为一致，且与其它版块长得一样。
 *
 * 首屏不放任何说明文字（`.sub-intro` 已删）：面板上的维度标签、chip 上的
 * 命中数、底部「保存并筛选」按钮本身已经把用法说清楚了。
 */


/**
 * 面板是 `<form>`，但**不能让它继承 `.facets` 的 padding 之外任何东西**。
 * 用 `display: contents` 让 form 在布局上「透明」——
 * 它只是提交边界，不该成为一个额外的盒子（否则 `.facet-group` 的
 * 分隔线与左标签列都会相对它错位）。
 */
.sub-form-panel { display: contents; }

/* 维度名「关键词」比「靶点」「地区」长，标签列给宽一点（默认 76px） */
.facet-group-sub > .facet-label { flex: 0 0 92px; }
/* 期刊那组内容多，给它更多横向空间 */
.facet-group-wide > .sub-row-body { min-width: 0; }
/* 右侧内容列：与 `.facet-group .chips { flex: 1 }` 同一套伸缩行为 */
.sub-row-body { flex: 1; min-width: 0; }

/**
 * 结果区。`min-width: 0` 是必要的：它是 grid/flex 的子项，
 * 不加的话长标题会把整列撑破、出现横向滚动。
 */
.sub-results { min-width: 0; }
.sub-stream { margin-top: 24px; }

/* 底部保存行：与维度行同构（左标签列留空），所以按钮与 chips 对齐 */
.facet-group-actions { align-items: center; }
.facet-group-actions > .facet-label { flex: 0 0 92px; }
.sub-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub-actions .btn.primary { padding: 8px 20px; font-size: 13px; }

/* 其它面板的 chip 是 `<a>`，订阅的是 `checkbox`/`radio`（见 subscriptionRail） */
.chip-toggle { cursor: pointer; user-select: none; position: relative; }
.chip-toggle > input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 焦点环落在 label 上，键盘用户才看得到自己在哪一项 */
.chip-toggle:focus-within { outline: 2px solid var(--champagne); outline-offset: 1px; }
/* 勾选态与站内 `.chip.on` 同一套视觉（金色 = 已选中） */
.chip-toggle:has(> input:checked) {
  background: rgba(201, 169, 110, .18);
  border-color: var(--line-gold);
  color: var(--champagne-2);
}

/* 已订阅的关键词/期刊 chip：details 换行显示，两行信息更清楚 */
.sub-chip small { display: block; margin-top: 2px; font-size: 9.5px; color: #7f8e9c; line-height: 1.3; }
.sub-chip { max-width: 100%; }
.chip-toggle.on small, .chip-toggle:has(> input:checked) small { color: rgba(201, 169, 110, .78); }

/**
 * 已选条件上的取消标记 ✕。
 *
 * 用户报的「选中的条件，没法点击取消」——现在已选项是链接，
 * 点整块就取消（`cancelHref()`），这个 ✕ 是**可见的提示**，
 * 让「它可以点」这件事不用靠悬停才发现。
 *
 * 比正文略淡：它是操作性符号，不该比条件本身更抢眼。
 */
.chip-x { margin-left: 3px; opacity: .55; font-size: 10.5px; }
.chip:hover .chip-x, .chip:focus-visible .chip-x { opacity: 1; }

/*
 * ## 可勾选的 chip（整栏一个表单之后新增）
 *
 * 这些条件原来是 `<a href>` 链接，点一下即时生效。放进单表单结构后必须改成
 * 真正的 `checkbox` / `radio` —— 链接点击是**导航**，会把用户在其他输入框里
 * 刚敲、还没保存的内容一起丢掉（正是这次要修的「改动静默丢失」）。
 *
 * 视觉上仍然是一个 chip，但状态由 `:checked` 驱动，不需要 JS。
 * 真正的 `<input>` 用 `sr-only` 式的隐藏（不是 `display:none` ——
 * 那样键盘无法聚焦、也无法用空格勾选）。
 */
.chip-toggle { cursor: pointer; user-select: none; position: relative; }
.chip-toggle > input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 焦点环落在 label 上，键盘用户才看得到自己在哪一项 */
.chip-toggle:focus-within {
  outline: 2px solid var(--champagne);
  outline-offset: 1px;
}
/* 勾选态：与原有 `.chip.on` 同一套视觉（金色） */
.chip-toggle:has(> input:checked) {
  background: rgba(201, 169, 110, .18);
  border-color: var(--line-gold);
  color: var(--champagne-2);
}
/* 没有 `:has()` 的旧浏览器：不显示选中态也不会误操作，只是少了高亮 */
.chip-toggle > input:checked + * { color: inherit; }

/*
 * 底部唯一的保存区（用户要求：「不用设置成 3 个保存，最后一个保存即可」）。
 *
 * 它贴在面板底部，与三组条件有一个明确的分隔 —— 让「这三个条件是一起生效的」
 * 这件事在视觉上就成立。
 */
/**
 * 底部保存行。
 *
 * ⚠️ 它现在**长在一个 `.facet-group` 里**（见 `subscriptionRail`），
 * 而 `.facet-group + .facet-group` 已经有分隔线了 —— 所以这里
 * **不能再画边框或底色**，否则与维度行之间出现双线、且底色割裂。
 * 只保留按钮自身的内边距。
 */
.sub-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 0;
}
.sub-actions .btn.primary { padding: 8px 20px; font-size: 13px; }


.sub-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sub-form .input {
  flex: 1 1 100%; padding: 7px 10px; font-size: 12.5px;
  background: #0c1d2c; border-color: rgba(255, 255, 255, .16);
}
.sub-form .input:focus { border-color: var(--champagne); }
.sub-form .btn { padding: 7px 15px; font-size: 12px; }
/**
 * 日期那一行：**「自定义时间」+ 两个日期框 + 预设档位，全在同一行**。
 *
 * 用户要求：「做到一行去，这样两行不好看」。
 *
 * ## 为什么会变成两行（踩过的原因）
 *
 * 这里原来写的是 `flex-wrap: wrap` + 档位块 `flex: 0 0 auto`。
 * 看起来没问题，但 `.sub-date-form` 自己是 `flex: 1 1 auto`，
 * 而它在 `.sub-row-body` 里又与「日期」这个 `.facet-label` 并列 ——
 * 可用宽度被那 92px 的标签列吃掉之后，**恰好差一点放不下**，
 * 于是档位被挤到第二行。截图里就是这个样子。
 *
 * 现在把这一行明确设为 `nowrap`，并让各段按内容宽度排；
 * 只有**真的很窄**（<720px，手机上）才允许换行 ——
 * 那时一行放不下是物理事实，换行是必要的。
 */
.sub-date-form {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
}
@media (max-width: 720px) {
  .sub-date-form { flex-wrap: wrap; }
}
.sub-date-form > label {
  flex: 0 0 auto;
  margin: 0 6px 0 0; padding: 0;
  font-size: 11.5px; color: #9aa8b6; white-space: nowrap;
}
/** 日期字段与预设档位之间留一段空白，区分「精确输入」与「快捷档位」 */
.sub-chips-preset { margin: 0 0 0 10px; flex: 0 0 auto; }
/** 日期字段按内容宽度排，不撑满 */
.cal-range { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.cal-trigger { min-width: 98px; padding: 6px 9px; }
.sub-tip { margin: 7px 0 0; color: #7f8e9c; font-size: 11px; line-height: 1.6; }
.sub-tip code {
  background: rgba(255, 255, 255, .06); padding: 1px 3px; border-radius: 3px;
  font-size: 10.5px; color: #c3cdd7;
}
.sub-tip b { color: #a9b5c1; }
/* 空结果的解释框。这是「今日必然空白」那个体验问题的正面修复：
 * 空必须有解释，且要说清是「订阅太窄」还是「站点没更新」。 */
.sub-notice {
  margin-top: 8px;
  padding: 8px 10px; border-radius: 5px; font-size: 11.5px; line-height: 1.6;
  background: rgba(201, 169, 110, .09);
  border: 1px solid rgba(201, 169, 110, .3);
  color: #d8c9a8;
}
.sub-notice b { color: var(--champagne-2); }
.sub-notice.warn { background: rgba(210, 150, 90, .1); border-color: rgba(210, 150, 90, .32); color: #e0c4a4; }
.sub-notice a { color: var(--champagne); white-space: nowrap; }

/* 排序切换：凡是列表都提供「综合评分 / 时间」两个选项，默认综合评分。
位置统一在所在行的**最右边**（用 margin-left:auto 推开）。*/
.sort-toggle { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #7f8e9c; margin-left: auto; flex: 0 0 auto; }
.sort-opt {
  padding: 2px 9px;
  border-radius: 3px;
  color: #9aa8b6;
  text-decoration: none;
  border: 1px solid transparent;
}
.sort-opt:hover { color: var(--champagne-2); border-color: var(--line-gold); }
.sort-opt.on { background: rgba(201, 169, 110, .13); border-color: rgba(201, 169, 110, .3); color: var(--champagne); }

/* 说明文字 + 右侧排序的一行（招募页等）*/
.note-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.note-row .note { margin: 0; flex: 1 1 320px; }
/* 疾病页页脚：概要数字在左，排序在右 */
.disease-head-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.disease-head-foot .disease-stats { margin: 0; flex: 1 1 auto; }
.note-sep { margin: 0 8px; color: #4a5866; }

/*
 * 技术路线：**横向流式排列**，一条路线一个 chip。
 *
 * 原来是一行一条（左侧固定 150px 放名字、右侧留给疾病 chip）。疾病 chip 去掉之后
 * 那一行就只剩「名字 + 数字」，14 条路线占掉 14 行 —— 纵向空间全浪费，
 * 而且与左边疾病区块的多行树形结构并排时显得空荡。
 *
 * 现在每条路线是一个 chip，一行放得下四五个，14 条路线 3~4 行就排完。
 * 字号与「血液肿瘤 / 实体瘤」这些分组标签同级（13px）——它们本来就是同层入口。
 */
.modality-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
}
.modality-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #a9b5c1;
  text-decoration: none;
  transition: border-color .12s, color .12s;
}
.modality-name:hover { color: var(--champagne-2); border-color: var(--champagne-2); }
.modality-name small { font-size: 11px; font-weight: 400; color: #7f8e9c; }
/* 容器：让 chip 横向流式换行 */
.modality-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------ 试验详情区块 ------------------------------ */
.trial-block { margin-top: 22px; }
.trial-block h3 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px; }
.trial-block .sub-note { font-size: 12px; font-weight: 400; color: #7f8e9c; }

/* -------------------------- 论文：结构化摘要 -------------------------- */
/*
 * 结构化摘要按「背景 / 方法 / 结果 / 结论」分段展示。
 * 段落标签做成固定宽度的小色块，读者扫一眼就知道这段是什么，
 * 不用读完整句 ——论文信息的价值就在「一眼看出跟自己相不相关」。 */
.paper-section {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.paper-section:first-child { border-top: 0; padding-top: 0; }
.paper-section-label {
  font-size: 12px;
  line-height: 1.9;
  color: #d9b779;
  background: rgba(201, 169, 110, .1);
  border: 1px solid rgba(201, 169, 110, .22);
  border-radius: var(--radius-sm);
  text-align: center;
  height: fit-content;
}
.paper-section p { margin: 0; font-size: var(--fs-prose); line-height: var(--lh-prose); color: #c3ccd5; }
.paper-section p::first-letter { color: inherit; }

/* 研究概要：详情页第一屏最该被看到的一句话 */
/**
 * ⚠️ 这里原来**比正文大一档（15px）**，还带 3px 金左边框 + 金底。
 *
 * 实测下来它反客为主了：标题 24px 之后紧接着一个 15px 的粗体色块，
 * 而它下面真正的主体（中文摘要）是 13.5px —— 读者的第一眼落在
 * 这块"引言"上，而不是落在摘要上。而且它常常只有一句话
 *（这条内容就是「围绕 CAR-T 的新研究证据。」），
 * 用一个和标题争夺注意力的大色块去装一句话，权重给错了。
 *
 * 改法是**降级而不是放大**：字号收到与正文同级（`--fs-prose`），
 * 左边框从 3px 收到 2px、底色减半，让它读起来像"引文"而不是"标题"。
 * 保留左边框是必要的 —— 它是"这句话来自摘要原文、不是我们写的"
 * 的唯一视觉线索（见 pages.js 里"一句来自摘要原文的真话"那句注释）。
 *
 * ⚠️ **宽度：`60ch` 是错的，改成 `--measure` 的绝对值。**
 *
 * 原注释想要的效果（"按内容长度收口、不要拉成 900px 空色带"）是对的，
 * 但 `60ch` 是**相对单位**：13.5px 中文黑体下只算到 **460px**，
 * 比正文列（724px）窄了 264px。于是这句概要**比它下面的正文更窄**，
 * 两块文字左对齐、右边缘却参差不齐 —— 在截图里就是
 * 「研究概要」那一块明显缩进去一截、右边空一大片。
 *
 * 这里改用与正文列一致的宽度：`max-width: var(--measure-px)`。
 * 「不要拉成空色带」的需求由 `width: fit-content` 满足 ——
 * 短句子自然收口成一个小引文块，长句子则占满正文列宽，
 * 与下面的中文摘要**左右对齐**。
 */
.summary.highlight {
  max-width: 100%;
  width: fit-content;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-left: 2px solid var(--line-gold);
  background: rgba(201, 169, 110, .045);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #ccd5de;
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
}

/* 期刊日期并进期刊那一行，用小字降级，不再单独占一行 */
.pub-date {
  margin-left: 8px;
  color: #7f8e9c;
  font-size: 12px;
  /**
   * 期刊期号日期（`2026 Sep 15`）必须整体不折行（用户要求「保持在同一行出现」）。
   * 不加这条时，窄一列就会断成「2026 Sep」/「15」两行 ——日期被拆开很难读。
   */
  white-space: nowrap;
}

/* -------------------------- 论文：作者与单位 -------------------------- */
/*
 * 作者名里全是拉丁字母与缩写，行高要比中文正文松一点才不糊。
 * 一行放不下就换行，不要截断 ——作者列表是研究者核对信息用的。 */
.author-line {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #c3ccd5;
  word-break: break-word;
}
.author-rest { display: inline-block; margin-left: 6px; }
.author-rest summary {
  display: inline;
  cursor: pointer;
  color: var(--champagne-2);
  font-size: 12.5px;
}
.author-rest summary::marker { color: #7f8e9c; }
.author-rest p { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--line-gold); color: #9fadbb; }
/* 单位后面缀一个国家标签，说明「地区」是怎么判出来的 */
.aff-country {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: rgba(201, 169, 110, .12);
  border: 1px solid rgba(201, 169, 110, .25);
  color: var(--champagne);
  font-size: 11.5px;
  white-space: nowrap;
}
.trial-constraints {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: rgba(201, 169, 110, .1);
  border: 1px solid rgba(201, 169, 110, .25);
  color: var(--champagne);
  font-size: 13px;
}
/* 入组条件保留登记原文的分段，等宽字体便于按条核对 */
.eligibility {
  margin: 0;
  padding: 13px 15px;
  /**
   * ⚠️ 这里是另一个 340px 定高滚动框（CT.gov 详情页的英文登记原文），
   * 也是 CDE 那份 `.elig-scroll` 的同类。原来它带着定高却没有滚动条样式 ——
   * 同一页里两个同类容器，一个细金条、一个系统白条，最容易被一眼看出"没做完"。
   * 现在跟着全站那一套走，只声明"能滚"。
   */
  max-height: 340px;
  overflow-y: auto;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  color: #c3cdd7;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
}
.outcomes { margin: 0; padding-left: 0; list-style: none; }
.outcomes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair-2);
  font-size: 13.5px;
  color: #dfe5ea;
}
.outcomes li:last-child { border-bottom: 0; }
.outcome-kind {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: rgba(120, 170, 255, .12);
  color: #9fc0f0;
  font-size: 11px;
}
.outcome-time { color: #7f8e9c; font-size: 12px; }
.arms { margin: 10px 0 0; padding-left: 18px; color: #c3cdd7; font-size: var(--fs-meta); }
.arms li { margin-bottom: 8px; }
.arms .arm-type { margin-left: 8px; font-size: 11px; color: #7f8e9c; }
.arms p { margin: 4px 0 0; color: #97a3af; font-size: 12.5px; line-height: 1.7; }

/* -------------------------- CDE：入排标准 / 参加机构 --------------------------
*
* CDE 的入排标准是**中文长句**（一条能到 100+ 字），和 CT.gov 的英文短条目不一样，
* 所以这里不复用 `.outcomes` 那种「一行一条、左右分栏」的版式。
* 用带间距的纵向列表 + 宽松行距，读者才看得下去。
*
* **一个滚动框装下入选与排除、默认全部展开**（参考 CT.gov 的写法）。
* 两组标准常常几十条（实测最多 52 条），铺在页面上会把详情页拉成一堵墙。
* 放进定高滚动框，读者默认就能看到全部内容，想细看自己在框里滚 ——
* 比「点一下才展开」少一步，也不会把信息藏起来。
*
* **不写条数**（用户要求）。**不编号**（用户要求「序号容易错」）。
* CDE 原文的序号与正文在表格里是两列，一旦上游跳号或配对错位，
* 页面上就会出现「3. 4」这种对不上的编号 ——解析时剥掉，CSS 也不画。 */
.elig-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding: 2px 10px 2px 0;
  /**
   * 滚动条本身**不再单独写样式**，用全局那一套（见文件开头「滚动条（全站一套）」）。
   *
   * 原来这里硬编码了三行 `::-webkit-scrollbar`，是站内**唯一**一处设计过的滚动条 ——
   * 于是长得和详情页那个 `<pre class="eligibility">` 滚动框不一样，
   * 两个同类容器并排出现时是两种外观。全局化之后这里只剩「哪里能滚」。
   */
  scrollbar-width: thin;
}
/* 滚动框里的第一组标题不要顶到框口 */
.elig-scroll > .elig-title:first-child { margin-top: 2px; }

.elig-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #cfd8e0;
}
/**
 * 两组标准的**语义符号**：入选用 `✓`、排除用 `✕`。
 *
 * 用户要求「入组标准、排除标准，前面可以加个符号，比较醒目点」——
 * 符号不只是装饰：读者扫一眼就知道这一组是「能进」还是「不能进」，
 * 比两行同样的浅色小标题好认得多。颜色也按语义分（绿 = 可进，红 = 排除）。
 */
.elig-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.elig-mark.in {
  color: var(--ok-fg);
  background: var(--ok-bg);
  border: 1px solid rgba(143, 199, 173, .35);
}
.elig-mark.out {
  color: var(--err-fg);
  background: var(--err-bg);
  border: 1px solid rgba(228, 165, 173, .35);
}
.eligibility-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.eligibility-list li {
  position: relative;
  padding: 5px 0 5px 15px;
  font-size: var(--fs-elig);
  line-height: 1.7;
  color: #b9c4cf;
  border-bottom: 1px solid var(--hair-2);
}
.eligibility-list li:last-child { border-bottom: 0; }
/**
 * 前置符号用 **`*`**（用户要求：「小金点换成其他符号，如 *」）。
 *
 * 之前是个 4px 的实心金圆点 —— 在深色页面上偏"装饰"，而且和标签 chip 的金色撞；
 * 换成纯文字符号 `*` 更朴素，也和正文同一套字（不会显得像 UI 控件）。
 * 用悬挂缩进（`padding-left` + 绝对定位）保证换行后的文本与首行对齐。
 */
.eligibility-list li::before {
  content: '*';
  position: absolute;
  left: 2px;
  top: 5px;
  color: rgba(201, 169, 110, .8);
  line-height: 1.7;
}

/* 参加机构 / 伦理委员会：纯名称列表，两列排（名字长，单列会拖得很长） */
.site-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 22px;
}
.site-list li {
  padding: 4px 0;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: #c3cdd7;
  break-inside: avoid;
}
@media (max-width: 640px) {
  .site-list { columns: 1; }
}

/* ------------------------- 详情页：短内容块并排 -------------------------
*
* 用户看着截图说「像这种可以做成并排啊，界面越简洁越好」：
* 「参加机构 / 伦理委员会 / 入组进度」这类**内容很短**的块，一条事实就占一整行宽，
* 页面被拉得很长且不好扫。放进自适应网格：宽屏并排（够宽时三块一行），
* 窄屏自动落成单列 —— 不用写断点，`auto-fit` 自己算。
*
* 只给这几块用；入排标准、研究设计这类长内容仍然整幅（并排会读不下去）。
*/
.detail-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  column-gap: 28px;
  /**
   * **`stretch` 而不是 `start`**：并排两块内容长短不一（一家医院 vs 两行事实），
   * 用 start 会得到一条参差的下边缘 —— 用户看截图抓的正是这种细节。
   * 让两块等高、下边缘齐平，看起来才是「设计过」。
   */
  align-items: stretch;
}
/* 每块排成纵向 flex，内部列表/事实表用 flex:1 撑满，于是并排的两块等高 */
.detail-cols > .trial-block {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}
.detail-cols > .trial-block > .site-list,
.detail-cols > .trial-block > .facts { flex: 1 1 auto; }

/**
 * **同一个并排区里，两种内容的形态必须一致。**
 *
 * 原来「参加机构」是纯文本列表、「入组进度」是带框的事实格 —— 并排放一起就是
 * 两种视觉语言，左边轻右边重（用户截图里的问题）。这里把机构列表也做成
 * **同一种格子**：同样的容器底色/边框/圆角、同样的单元格内边距与分隔线。
 *
 * 用 flex 纵向排而不是 `columns`：这样最后一个格子能**撑满剩余高度**，
 * 于是并排两块的下边缘一定齐平，而中间不会多出一条线（见下）。
 */
.detail-cols .site-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  overflow: hidden;
}
.detail-cols .site-list li {
  flex: 0 0 auto;
  padding: 11px 13px;
  box-shadow: 0 1px 0 var(--hair-2);
}
/**
 * **最后一个格子不能画分隔线。**
 *
 * 分隔线是 `box-shadow: 0 1px 0`（画在格子底边）。每个格子都画，最后一个的线
 * 就贴在容器底边框内侧 —— 读者看到的是「一条线 + 下面一个空行」，像多出来一格
 * （用户指着截图问「这里面怎么还有细线」）。线只在**格与格之间**需要。
 * 同时让它 `flex: 1` 吃掉剩余高度，两块才能真正齐平。
 */
.detail-cols .site-list li:last-child {
  flex: 1 1 auto;
  box-shadow: none;
}
/**
 * 并排区里的事实表**强制单列**：`.facts` 的列宽是 `minmax(280px, 1fr)`，
 * 在并排的窄列里会直接溢出。顺带把外边距归零，让各块标题落在同一基线上。
 */
.detail-cols .facts {
  grid-template-columns: 1fr;
  margin: 0;
}
/**
 * 并排区里**单元格内边距必须与机构格子一致**。
 *
 * `.facts.compact .fact` 是 `padding: 6px 0`（无左右内边距，用于整幅的紧凑表），
 * 而机构格子是 `11px 13px` —— 两者并排时文字左右起始位置不同，肉眼看得出来。
 * 选择器要多一层 `.compact` 才能压过那条规则（同权重时「后写的赢」，而它写在后面）。
 */
.detail-cols .facts.compact .fact { padding: 11px 13px; }
/**
 * 事实格同样的问题：`.fact` 的 `box-shadow: 1px 0 0, 0 1px 0` 会在**最后一个格子**
 * 的底边内侧再画一条线，看着像多出一个空行。最后一个格子不画线。
 * （并排区里 `.facts` 已强制单列，所以「最后一个」就是最下面那一格。）
 */
.detail-cols .facts .fact:last-child { box-shadow: none; }

.facts.compact .fact { padding: 6px 0; }

/**
 * ## 事实表：最后一行不再空一格
 *
 * `.facts` 是 `repeat(auto-fit, minmax(220px, 1fr))` + `gap: 1px`，
 * 正文列 724px 时一行排 3 格。4 个字段（作者 / 第一作者单位 /
 * 通讯作者单位 / 期刊）会排成 3 + 1 —— 最后一格右边空出两格的宽度；
 * **字段数是奇数**时（试验的「关键日期」5 项、CDE 的「登记信息」3 项）
 * 同样会在最后一格右边留一个洞。
 *
 * ⚠️ **这个"空格子"现在已经被根治**：最后一个格子会吃掉该行剩余列宽
 * （见上方 `.facts > .fact:last-child { grid-column: 1 / -1 }`），
 * 所以最后一行是**满行**的，不再需要"用一条假边线补个收口"。
 *
 * 这里只保留右边线：最后一个格子与容器右边缘之间要有竖线，
 * 否则表格右边看起来是开口的。
 */
.facts > .fact:last-child { box-shadow: 1px 0 0 var(--hair-2); }
/* 只有一格时（论文只有「原文标识」）不要那条多余的右边线 */
.facts > .fact:only-child { box-shadow: none; }
.trial-stopped {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(230, 140, 130, .1);
  border: 1px solid rgba(230, 140, 130, .25);
  color: #e5a79c;
  font-size: 13px;
}

/* ------------------------------ 疾病中心 ------------------------------ */

/**
 * 行业报告与简报目录。
 *
 * ⚠️ 这几个类之前**根本不存在**：报告视图直接用了 `report-table` / `.num`，
 * 简报目录页用了 `digest-issue*`，而 CSS 里一个都没有 —— 页面能打开、
 * 内容是完整的，但表格没有边框与对齐、挤成一片。
 * 「页面能开」和「页面能看」是两件事，光靠状态码 200 发现不了。
 *
 * 字号沿用全站的正文档（13.5px），不新增字号 —— 与简报那条定稿规矩一致。
 */
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px;
  font-size: 13.5px;
}
.report-table th,
.report-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--hair-2);
  text-align: left;
}
.report-table th {
  color: var(--slate);
  font-weight: 600;
  border-bottom-color: var(--hair);
  white-space: nowrap;
}
.report-table td { color: #dbe3ea; }
/* 数字列右对齐 + 等宽数字：报告里全是数字，左对齐读不出量级差 */
.report-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--champagne);
}
.report-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* 报告目录（/digest/list 上半部分） */
.report-list { list-style: none; margin: 0; padding: 0; }
.report-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-2);
}
.report-item:last-child { border-bottom: 0; }
.report-title {
  font-size: 15px;
  font-weight: 600;
  color: #eef1f4;
}
.report-title:hover { color: var(--champagne-2); }
.report-summary { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; color: #b9c4cf; }
.report-meta { margin: 5px 0 0; font-size: 13.5px; color: var(--slate); }

/* 简报目录（同一页下半部分） */
.digest-issues { list-style: none; margin: 0; padding: 0; }
.digest-issue { border-bottom: 1px solid var(--hair-2); }
.digest-issue:last-child { border-bottom: 0; }
.digest-issue a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
}
.digest-issue-date { color: #eef1f4; }
.digest-issue a:hover .digest-issue-date { color: var(--champagne-2); }
.digest-issue-badge {
  font-size: 13.5px;
  color: var(--champagne);
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  padding: 0 6px;
}

.disease-head { padding: 24px 28px; }
.disease-title { font-size: 30px; font-weight: 600; letter-spacing: .02em; margin: 0 0 12px; color: #f2f5f8; }
.disease-stats { display: flex; flex-wrap: wrap; gap: 20px; color: #8695a5; font-size: 13px; }
.disease-stats b { color: var(--champagne); font-size: 17px; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
/**
 * 统计数字是链接（点进对应清单）。下划线只在下划线可用的语义下出现 ——
 * 这里用「悬停变色 + 数字变色」表示可点：一排数字都带常驻下划线会太吵。 */
.disease-stats a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(201, 169, 110, .35); padding-bottom: 1px; }
.disease-stats a:hover { color: #d8e2ec; border-bottom-color: var(--champagne); }
.disease-stats a:hover b { color: var(--champagne-2); }
.disease-stats .stat-zero { opacity: .55; }

/*
 * 分组之间的留白只加在**中间**，首尾不加。
 *
 * 原来写的是 `.disease-group { padding: 12px 0 }` —— 第一个分组因此多出
 * 12px 上边距，于是「按疾病选择」标题到「血液肿瘤」的距离是 28px，
 * 而「按技术路线」标题到第一个 chip 只有 16px，两块并排看就错位（用户指出：
 * 「这个空，跟下面的技术路线的间距不一致」）。
 *
 * `padding: 12px 0` 的本意是给**分组之间**留白，那用 `+` 选择器表达就够了，
 * 不必给每个分组都套上一圈内外边距。最后一个的下边距也去掉（区块自己有）。
 */
.disease-group { padding: 0; }
.disease-group + .disease-group { border-top: 1px solid var(--hair-2); margin-top: 12px; padding-top: 12px; }
.disease-group-title { font-size: 13px; font-weight: 600; color: #a9b5c1; margin-bottom: 9px; }
.chip-disease { font-size: 12px; }

/*
 * 疾病树：上位词一个 chip，下位词**悬浮菜单**——默认收起，鼠标移上去浮出。
 *
 * ## 为什么需要层级
 * 原来 22 个疾病平铺成一行，而「淋巴瘤 3934」本来就包含它右边的
 * 「B细胞淋巴瘤 1887 / 大B细胞淋巴瘤 1480 / 弥漫大B细胞淋巴瘤 963」，
 * 读者按直觉把一行相加得到 21868，是大类 10053 的两倍多 —— 看上去像统计错误。
 *
 * ## 为什么改成悬浮而不是常驻缩进
 * 常驻缩进虽然把包含关系画对了，但页面第一屏被撑得很长：血液肿瘤一个类
 * 就要占 10 行。而「淋巴瘤下面有哪几种」是**次要信息**，读者多数时候只关心
 * 「有哪些大类」。收起来只留 6 个父项，需要时移上去看 —— 信息还在，页面短了。
 *
 * ## 动画怎么做到「丝滑」
 * 四个要点，缺一个就会有生硬感：
 *   1. **不能用 `display: none`** —— 它不参与过渡，只能硬切换。用
 *      `opacity` + `visibility` + `transform`，三者都可过渡。
 *   2. **`visibility` 要延迟到动画结束再变 hidden**（`transition-delay`），
 *      否则会立刻不可见、看不到淡出。
 *   3. **用 `transform` 而非只改 `top`** —— transform 走合成层，不掉帧。
 *   4. **父项与菜单之间要有「hover 桥」**：菜单与 chip 之间留了 6px 空隙，
 *      鼠标穿过时若判定离开就会闪断。用 `::after` 铺一条透明带把这个缝补上。
 */
.disease-tree { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

/* 父节点：定位锚点。有子项的才加 has-children，没有子项的 chip 不带任何 hover 行为 */
.disease-node { position: relative; display: inline-flex; }
.disease-node.has-children > .chip-disease { cursor: default; }
/* 父项悬停时给个视觉反馈，提示「这里能展开」。
 *
 * ⚠️ 这里**不能出现任何 `color:`**，连 `border-color:` 也不行 ——
 * `test.mjs` 用 `/\.chip-(population|target|…)\s*\{[^}]*\bcolor\s*:/` 守着
 * 「标签不按维度上色」（站内规矩：标签颜色只表达状态），而 `border-color`
 * 里的 `color` 会被那条正则命中。所以不在这里写边框色。
 *
 * 改用背景 + 内阴影做 hover 反馈：既避开了那条正则，视觉上也比换边框色更明显，
 * 而且不占用「金色 = 已选中」这个语义（那是 `.chip.on` 的）。 */
.disease-node.has-children:hover > .chip-disease,
.disease-node.has-children:focus-within > .chip-disease {
  background: rgba(201, 169, 110, .13);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .55);
}

/* ---- 悬浮子菜单 ---- */
.disease-children {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 220px;
  max-width: 560px;
  padding: 10px 12px;
  background: var(--navy-2);
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .7);
  /* 收起态 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition:
    opacity .16s ease,
    transform .16s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .16s;
  pointer-events: none;
}
/* 展开态：延迟一点点出现，鼠标划过时不至于闪一下又收回去 */
.disease-node.has-children:hover > .disease-children,
.disease-node.has-children:focus-within > .disease-children {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity .18s ease .06s,
    transform .22s cubic-bezier(.22, 1, .36, 1) .06s,
    visibility 0s linear .06s;
}
/* hover 桥：补上 chip 与菜单之间那 6px 的缝，鼠标穿过去不会闪断 */
.disease-node.has-children > .disease-children::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 7px;
}

/* 菜单里的子项：普通 chip，第三层再降一档 */
.disease-children .disease-node > .chip-disease { font-size: 11.5px; white-space: nowrap; }
.disease-children .disease-children > .disease-node > .chip-disease { font-size: 11px; opacity: .92; }

/*
 * 带中间分组的子菜单（白血病 → 淋系 / 髓系）。
 *
 * 白血病按细胞谱系分两支是医学事实，而 AML/CML 又同时属于「髓系恶性肿瘤」，
 * 平铺的树表达不了「一个子项属于两个父」。把「淋系 / 髓系」显式画出来之后，
 * 白血病下面不再只有淋系，髓系属性也看得见。
 *
 * 布局：改成纵向两段（每段一行标签 + 一行 chip），因为横排会把
 * 「淋系」的标签和「髓系」的标签混在一串 chip 里，读不出分组。
 */
.disease-children.disease-children-grouped {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 620px;
}
.disease-subgroup { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.disease-subgroup-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--champagne);
  opacity: .8;
  letter-spacing: .04em;
}
.disease-subgroup-items { display: flex; flex-wrap: wrap; gap: 6px; }

/* 尊重系统的「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .disease-children,
  .disease-node.has-children:hover > .disease-children,
  .disease-node.has-children:focus-within > .disease-children { transition: none; }
}

.sub-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hair-2);
  font-size: 14px;
  color: #e8edf2;
}

/* 试验行：患者视角下「地点 + 状态」优先，但评分也要显示出来 */
.trial-list { display: flex; flex-direction: column; gap: 8px; }
.trial-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 13px 16px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  transition: background .15s, border-color .15s;
}
.trial-main { flex: 1 1 auto; min-width: 0; }
.trial-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-left: 14px;
  border-left: 1px solid var(--hair-2);
}
.trial-score .score-value { font-size: 15px; font-weight: 700; color: #cbb079; line-height: 1.1; }
.trial-score .score-value small { font-size: 9.5px; font-weight: 400; margin-left: 1px; color: #7f8e9c; }
.trial-score .score-value.hot { color: #e0c085; }
.trial-score .score-value.low { color: #8b98a5; }
.trial-score .score-stars { font-size: 10.5px; }
@media (max-width: 620px) {
  .trial-row { flex-direction: column; gap: 10px; }
  .trial-score {
    flex-direction: row; align-items: center; gap: 8px;
    padding-left: 0; padding-top: 8px; border-left: 0; border-top: 1px solid var(--hair-2);
  }
}

.trial-row:hover { background: var(--navy-4); border-color: var(--line-gold); }
.trial-title { margin: 0 0 7px; font-size: 15.5px; font-weight: 600; color: #eef1f4; line-height: 1.45; }
.trial-row:hover .trial-title { color: var(--champagne-2); }
.trial-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: #8695a5; }
/* 登记信息陈旧提示：对患者最实际的坑——打着「招募中」但登记一年没更新 */
.trial-stale {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: rgba(230, 170, 90, .12);
  color: #d9b779;
  border: 1px solid rgba(230, 170, 90, .25);
}
/*
 * 详情页的陈旧提示要更醒目：患者是在这一页决定要不要联系研究中心的。
 * 列表里可以是一枚小徽章，这里必须是一整条。 */
.trial-stale-block {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(230, 170, 90, .3);
  background: rgba(230, 170, 90, .08);
  color: #e2c48d;
  font-size: 13.5px;
  line-height: 1.75;
}
.trial-stale-block strong { color: #f0d49a; }
.badge-cn,
.badge-region { padding: 1px 7px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); color: #93a1b0; font-weight: 500; }
.trial-state { padding: 1px 7px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); color: #93a1b0; }
.trial-state.open { background: var(--ok-bg); color: var(--ok-fg); font-weight: 500; }
.trial-city { color: #c3cdd7; }
.trial-hosp { color: #7f8e9c; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-more { color: #6f7d8b; }
.trial-chips { margin-top: 9px; }

@media (max-width: 720px) {
  .disease-title { font-size: 23px; }
  .disease-stats { gap: 13px; font-size: 12px; }
  .disease-stats b { font-size: 15px; }
  .trial-hosp { max-width: 100%; }
}

/* ------------------------------ 标签 chips 与分面筛选 ------------------------------ */

/**
 * 标签**默认没有颜色**，只有「匹配当前筛选条件」的那一个才是金色（`.on`）。
 *
 * 用户的要求：「列表中现在标签的颜色太多，默认都不给颜色，只有在匹配时、
 * 符合匹配条件的才给颜色。详细介绍页的标签也是一样，一行好多标签的，
 * 默认都给加颜色，除非是搜索或匹配的。」
 *
 * 原来每个维度一套色（靶点蓝、技术路线绿、地区琥珀），一张卡片上五六个标签
 * 就有三四种颜色，既吵又没有任何含义 ——颜色在这里**本应表达状态**（选中/生效），
 * 而不是表达类别；类别已经写在标签文字里了（「技术：CAR-T」）。
 * 现在颜色只有一个含义：这一项**正在生效**（或鼠标悬停，表示可点）。 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.card .chips { margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hair);
  border-radius: 20px;
  color: #a9b5c1;
  font-size: 11.5px;
  white-space: nowrap;
}
.chip:hover { background: rgba(201, 169, 110, .16); border-color: var(--line-gold); color: var(--champagne-2); }
.chip small { color: #6f7d8b; font-size: 10.5px; }
/* 唯一有颜色的状态：这一项正在生效（当前筛选 / 搜索命中）*/
.chip.on {
  background: rgba(201, 169, 110, .2);
  border-color: var(--champagne);
  color: #f0dcae;
  font-weight: 500;
}

/*
 * 筛选面板：**默认收起，鼠标移入展开**（用户要求）。
 *
 * ## 为什么收起
 *
 * 面板展开时有 6~8 行、几十个 chip（招募页光适应症就有 8 个系统段），
 * 常驻占掉首屏近一半高度 —— 读者还没看到任何内容，先看到一屏筛选器。
 * 而列表页的**主要内容是列表**，筛选是辅助工具。
 *
 * ## 收起时露出什么
 *
 * 不能收成空白条 —— 那样读者不知道里面有东西。收起态保留一行：
 * 「筛选」+ 当前生效条件数 + 「鼠标移入展开」。
 *
 * ## 动画实现（试过两版，这里记录取舍）
 *
 * **第一版**用 `grid-template-rows: 0fr → 1fr`，理论上"按实际内容插值"。
 * 实测**不丝滑**：面板内容是多行的，浏览器对 `fr` 在这种情形下的插值
 * 会在中段出现明显跳变，看起来像"卡一下才到位"。曲线也用了
 * `cubic-bezier(.22, 1, .36, 1)` —— 那条**前段极快**，0.1s 走完 60% 路程，
 * 视觉上是"啪"地弹开而不是展开。
 *
 * **现在**用 `max-height` + `cubic-bezier(.4, 0, .2, 1)` + `.42s`：
 * 起步缓、中段匀、收尾缓。`max-height` 原本的缺点（内容少时后段空跑）
 * 在面板上不存在 —— 它的高度是**稳定的**（每次渲染同一批维度）。
 * 代价是要给一个足够大的值，见 `.facets-collapsible` 的注释。
 */
/*
 * 收起/展开的容器。
 *
 * ## ⚠️ 为什么从 `grid-template-rows` 换回 `max-height`
 *
 * 第一版用 `grid-template-rows: 0fr → 1fr`，理论上是"按实际内容插值"，
 * 但实测**不丝滑**：面板内容是多行（6~8 个 facet-group），
 * 浏览器对 `fr` 的插值在这种情形下会在中段出现明显的跳变，
 * 看起来像"卡一下才到位"。
 *
 * `max-height` 只要有足够余量就完全平滑。它原本的缺点（内容少时
 * 后段空跑）在这里不存在 —— 面板高度是**稳定的**（每次都渲染同一批维度），
 * 所以给一个贴合实际的值即可：`--facets-h` 见下面各组件的注释。
 *
 * ## 缓动曲线也换了
 *
 * 原来是 `cubic-bezier(.22, 1, .36, 1)` —— 这条曲线**前段极快**
 * （0.1s 内就走完 60% 路程），视觉上像"啪"地弹开，而不是"展开"。
 * 改用 `cubic-bezier(.4, 0, .2, 1)`（Material 的标准缓动）：
 * 起步缓、中段匀、收尾缓，配合加长的时长才有"丝滑"感。
 */
.facets-hover { margin: 0 0 12px; }
.facets-collapsible {
  overflow: hidden;
  /*
   * ## 默认是**展开**高度（不是 0）
   *
   * 面板现在默认展开，所以这里写展开值 820px；收起由
   * `.facets-hover.is-collapsed` 压到 0。
   *
   * ⚠️ 这里踩过一次：改成"默认展开"时只删了 `.is-pinned` 那条展开规则，
   * 却把这个 `max-height: 0` 留在原处 —— 结果**面板永远打不开**
   * （没有任何规则把它撑起来）。方向一改，默认值必须跟着改。
   *
   * ## 820px 是怎么来的
   *
   * 实测估算：地区 30 + 城市 120 + 适应症 360（8 个系统段）
   * + 靶点 60 + 技术路线 60 + 适用人群 30 + 内边距 28 ≈ 688px（招募页最高）。
   * 给到 820px 留足余量 —— **宁可多留，不够就是 bug**（内容会被裁一截）。
   */
  max-height: 820px;
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1);
}
/*
 * 收起态的把手：常驻可见，是「这里能展开」的入口。
 *
 * ⚠️ 展开时**不再淡出**（第一版是 `opacity: 0`）。
 *
 * 用户要求把提示词改成「展开 / 收起」两态 —— 那把手就得一直看得见，
 * 否则展开后「收起」两个字跟着淡出，读者找不到怎么收回去。
 *
 * 好处还有两个：
 *   1. 面板展开时把手留在原地，**判定区稳定**，不会「展开→离开→收起」来回抖
 *      （第一版靠"淡出但保留占位"来稳住判定区，现在是真的一直在）；
 *   2. 展开时把手与面板拼成一块（`margin-top: -1px` 去掉重复边框），
 *      视觉上是一个整体的浮层，顶部那行就是它的标题栏。
 */
.facets-handle {
  display: flex;
  align-items: center;
  gap: 10px;
  /*
   * 收起态的尺寸要**紧凑**：原来 padding 9px + 外边距 16px，
   * 在页面上看是一块略显空荡的横条（用户反馈「默认版面的空有点大」）。
   * 收到 7px、外边距 12px，高度与一个 chip 相当，不抢内容的位置。
   */
  padding: 7px 13px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  color: #8695a5;
  font-size: 12px;
  /* hover 即展开，但让「展开 / 收起」看起来像个可操作的控件 */
  cursor: pointer;
  transition: border-color .26s cubic-bezier(.4, 0, .2, 1);
}
.facets-handle b { color: #c7a86c; font-weight: 600; }
/*
 * 状态词「展开 / 收起」—— **贴到最右边**。
 *
 * `margin-left: auto` 是这里的关键：把手是 flex 容器，
 * 左边是「条件筛选 · 已选 N 项」，右边这个靠自动外边距顶到最右端。
 *
 * ⚠️ 这段基础样式曾被误删（改"默认展开"时连带删掉了），于是两个词
 * 挤在「条件筛选」旁边、整个把手看起来是坏的。
 * 下面那些 `.when-open / .when-closed` 只是显隐切换，**不能替代它**。
 */
.facets-handle-toggle {
  margin-left: auto;
  color: #5d6a77;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* 默认（展开态）：显示「收起」 */
.facets-handle-toggle .when-open { display: inline; }
.facets-handle-toggle .when-closed { display: none; }

/*
 * ## 展开/收起：**默认展开**，只有点击把手才收起
 *
 * 状态类只有一个：`.facets-hover.is-collapsed`（收起）。
 * 没有 hover、没有临时预览 —— 也就没有两个状态互相打架的余地。
 *
 * 之前的版本是「鼠标碰到就展开、点击才收起」，要同时维护
 * `is-open`（临时）与 `is-pinned`（钉住），还得处理"点击时鼠标仍在面板内、
 * mouseenter 不会再触发"这类时序问题。结果反复出岔子：
 * 点标签后面板莫名收起、写进去的状态互相覆盖。
 *
 * 用户最后的判断是直接去掉触碰展开（原话：「触碰展开的不要了」）——
 * 这个简化是对的：筛选面板本来就是常驻工具，不需要"预览式"的展开。
 */

/* 收起态：面板压到 0，把手成为独立的一行 */
.facets-hover.is-collapsed > .facets-collapsible { max-height: 0; }
.facets-hover.is-collapsed .facets-handle {
  border-bottom-color: var(--hair-2);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.facets-hover.is-collapsed .facets-handle-toggle .when-open { display: none; }
.facets-hover.is-collapsed .facets-handle-toggle .when-closed { display: inline; }
.facets-hover.is-collapsed > .facets-collapsible > .facets {
  opacity: 0;
  transform: translateY(-4px);
}

/*
 * 面板本体：**默认可见**（不依赖任何类）。
 *
 * ⚠️ 这里踩过一次：改成"默认展开"时，`.facets` 上的
 * `opacity: 0` 和 `transform: translateY(-4px)` 是原来"默认收起"的写法，
 * 忘了改 —— 结果面板**有高度但全透明**，看起来还是打不开。
 */
.facets {
  padding: 14px 15px;
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  opacity: 1;
  transform: translateY(0);
  /* 与把手贴合，看起来是一块 */
  margin-top: -1px;
  transition:
    opacity .3s cubic-bezier(.4, 0, .2, 1) .04s,
    transform .42s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .facets-collapsible, .facets, .facets-handle { transition: none; }
}
.facet-group { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.facet-group + .facet-group { border-top: 1px solid var(--hair-2); }
.facet-label {
  flex: 0 0 76px;
  padding-top: 2px;
  color: #7f8e9c;
  font-size: 12px;
}
/* 适应症那一段是纵向布局（标签一行 + 各系统子段），维度名不占固定宽度 */
.facet-group-disease > .facet-label { flex: none; padding-top: 0; }
.facet-group .chips { flex: 1; }

/*
 * 「适应症」按系统分组的子段。
 *
 * 原来 12 个 chip 按条数降序平铺，血液与实体的病名交错（淋巴瘤 → 多发性骨髓瘤
 * → 实体瘤 → 血液系统恶性肿瘤 → 急性淋巴细胞白血病 → 乳腺癌 …），
 * 读者要在两个大类之间来回跳 6 次。分组后每个系统一段、段内按条数降序，
 * 视线沿着一个方向读完即可。
 *
 * 布局：面板是「标签列 76px + 内容列」两栏。子段要落在**内容列**里，
 * 所以 `.facet-group-disease` 改成纵向、让标签单独占一行，
 * 避免子段被挤进 76px 那一栏。
 */
.facet-group-disease { flex-direction: column; gap: 6px; }
.facet-group-disease > .facet-label { flex: none; padding-top: 0; }
.facet-sub { display: flex; gap: 10px; align-items: flex-start; }
/* 子段标签比主标签再轻一档，层级不抢眼但要能当锚点扫 */
.facet-sub-label {
  flex: 0 0 76px;
  padding-top: 3px;
  color: #6b7987;
  font-size: 11px;
  letter-spacing: .02em;
}
.facet-sub .chips { flex: 1; }

/*
 * 「泛称」病名 chip：**虚线边框 + 无底色**。
 *
 * 论文页里「淋巴瘤 2923」和「多发性骨髓瘤 1575」混在同一段，
 * 读者看不出前者**包含**后者 —— 点进去数字会大幅变化，像是出错。
 *
 * ## 为什么用形状而不是颜色
 *
 * 站内规矩：**标签的颜色只表达状态（选中/生效），不表达类别**
 * （`test.mjs` 有一条断言守着 `.chip-*` 不许出现 `color:`）。
 * 泛称/具体是个"性质"差异，用颜色表达会与"选中"的金色撞车。
 *
 * 虚线边框是个成熟的做法：形状差异一眼可辨，不占用颜色语义，
 * 也与站内其它 chip（实线）形成清晰对比。
 *
 * ⚠️ 这里**不能写 `color`/`border-color`** —— 会踩到那条断言。
 * 只调 `border-style` / `background` / `opacity`。
 */
.chip.is-umbrella {
  border-style: dashed;
  background: transparent;
  opacity: .82;
}
.chip.is-umbrella:hover { opacity: 1; }
.facet-clear { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: #7f8e9c;
  font-size: 12px;
}

/*
 * 已选条件行收进筛选框之后（用户要求「这个状态也做到条件筛选框里面去」）：
 *   - 用上分隔线与其他维度分开 —— 它表达的是"我选了什么"，
 *     与上面那些"可以选什么"不是同一类信息；
 *   - 去掉 `margin-bottom`（它在框内是最后一项，留着会在底部多出一段空隙）。
 *
 * 用 `.facets > .active-filters` 限定，避免影响别处可能用到的那一行。
 */
.facets > .active-filters {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hair-2);
}

/* 详情页英文摘要折叠 */
.abstract-en { margin-top: 14px; }
.abstract-en summary {
  cursor: pointer;
  color: #9fc0f0;
  font-size: 13px;
  padding: 6px 0;
}
.abstract-en summary:hover { color: #c3d8f7; }
.summary.en {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border-left: 2px solid var(--hair);
  color: #a9b5c1;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

/* ------------------------------ 响应式（合并为两档） ------------------------------ */

@media (max-width: 980px) {
  .radar-settings input { flex-basis: 100%; max-width: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .card { grid-template-columns: 1fr 84px; }
  .brand-mark { height: 30px; width: 30px; flex-basis: 30px; }
  .brand-divider { height: 21px; }
  .brand-word { height: 13.5px; }
  .brand-tagline { font-size: 10.9px; }
}

/* ============================================================================
   移动端（用户要求把「移动端适配」纳入这次重新设计）
   ----------------------------------------------------------------------------
   桌面上的 Apple 式大留白**在手机上必须收窄**：手机一屏本来就小，
   照搬 128px 的区块间距，读者要滑很久才看到第一块内容。
   所以这一档做三件事：留白收一半、首屏数字改成两列网格（不再换行参差）、
   卡片与详情页的横向挤压解除。
   ============================================================================ */

@media (max-width: 720px) {
  body.home .container { padding-left: 18px; padding-right: 18px; }
  /* 窄屏首屏上下内边距收一档（手机上 76px 太浪费，一屏本来就矮） */
  .hero { padding: var(--space-lg) 0 var(--space-lg); }
  .hero h1 { letter-spacing: -.018em; }
  /* 导语不用桌面值 —— 窄屏行宽本来就短，放大会折更多行 */
  .hero-lead { font-size: 15px; }
  /**
   * 数字改两列：4 个等宽列在手机上挤成一团，两列读起来最稳。
   * 间距同时收窄 —— 桌面的 83px 在两列布局里会把列挤歪。
   */
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px var(--space-md);
    margin-top: 40px;
  }
  body.home section.lv1 { padding: var(--space-lg) 0; }
  body.home .section-head { margin-bottom: var(--space-md); }
}

@media (max-width: 720px) {
  .container { padding: 12px 10px 40px; }
  /* 同样只作用于站点头：裸 `header` 会把窄屏内边距糊到解读页/工作台的内层标题上 */
  .container > header { padding: 16px 14px 20px; }
  .brand-lockup { gap: 9px; padding-bottom: 13px; margin-bottom: 13px; }
  .brand-mark { height: 28px; width: 28px; flex-basis: 28px; }
  .brand-divider { height: 19px; }
  .brand-word { height: 11.7px; }
  .brand-tagline { font-size: 11px; letter-spacing: .3em; margin-right: -.3em; }
  /**
   * 窄屏：中文标签**保留**（它现在是品牌行右侧的唯一文字）。
   *
   * 原来窄屏把它 `display: none` 藏掉，那时它挤在 LOGO 一行里、
   * 中文标签放不下。现在它独占行的右端，反而是这一行最该保留的中文说明 ——
   * 藏掉就只剩英文缩写，中文读者会失去唯一的识别线索。
   * 只把字号与字距收窄（11px / .3em），保证不换行。
   */
  .header-brand-row > .brand-tagline { align-self: center; }
  .nav { gap: 2px; }
  .nav a { padding: 7px 9px; font-size: 13px; }
  section { padding: 18px 14px; }

  .card { grid-template-columns: 1fr; }
  /* 小屏：卡片变成单列，评分行横排贴左。
     原来靠 `.score-mini { flex: 1 }` 把「评分依据」推到最右，现在两者都删了，
     分数与星级自己横排即可，不需要占位元素。*/
  .card-score {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hair-2);
  }

  .event-row { grid-template-columns: 1fr; gap: 3px; }
  .event-meta { white-space: normal; }
  .detail-title { font-size: 20px; }
  .bd-row { grid-template-columns: 82px 1fr 30px; }
}

/* ============================ 指南共识 ============================ */

/*
 * 列表**复用站内通用的 `.card`**（见「资讯卡片」一节），
 * 所以这里不再定义行式列表的样式 —— 卡片的样子由 `.card` 统一决定，
 * 以后改卡片，这个板块自动跟着变，不会分叉成第二套视觉。
 *
 * 保留 `.gd-*` 前缀的只有**一样**东西：技术路线成熟度卡片（`.gd-gaps`）。
 *
 * ⚠️ **状态徽章（`.gd-status`）已整体删除**，两个板块都不再用它：
 *   - 指南共识：早先已去掉「现行 / 需关注更新 / 历史参考」这套标签；
 *   - 患者手册：用户判定「现行」这种标签很怪，要求去掉，只保留年份。
 *
 * 所以把 `.gd-status` / `.gd-status-ok|warn|idle` 四条规则一起删掉了 ——
 * 全站已经没有任何地方渲染这个类，留着就是死代码，
 * 下一个人改样式时会白找一遍"这玩意儿在哪儿用"。
 */

/*
 * 只读的 chip（不是筛选项）——没有 hover 反馈，免得看起来能点
 */
.chip-static { cursor: default; }
.chip-static:hover { background: rgba(255, 255, 255, .05); border-color: var(--hair); color: #a9b5c1; }

/* ------------------------------------------------------------------
   列表**不再分组**。

   原来默认按机器猜出来的 `topic_kind` 分组（标题长成「毒性管理 10」），
   用户判定这个分类不科学 —— 于是整个分组版式（`.gd-group` /
   `.gd-group-title`）一起删掉，不留半套没人用的样式：
   留着它，下一个人会以为页面上还有分组，改样式时白找一遍。
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   技术路线成熟度（原表 Gap_Map）。

   这一块是「参考表」不是「内容流」，所以做成**卡片网格**而不是行：
   每条路线是一张独立卡片，星号固定在右上角，几条路线可以横向对比。
   卡片本身不设底色，只用细边框 —— 这页已有的分组标题、状态徽章
   都用了边框语言，加底色会多出一套视觉体系。
   ------------------------------------------------------------------ */
.gd-gaps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
/* 与资讯卡片同一套表面语言：深色底 + 细边框 + 5px 圆角 + hover 抬升。
   区别只是这里没有分数列，整张卡就是一条技术路线。 */
.gd-gap {
  background: var(--navy-3);
  border: 1px solid var(--hair-2);
  border-radius: 5px;
  padding: 14px 15px;
  min-width: 0;
  transition: background .15s, border-color .15s, transform .15s;
}
.gd-gap:hover {
  background: var(--navy-4);
  border-color: var(--line-gold);
  transform: translateY(-1px);
}
.gd-gap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.gd-gap-name {
  font-size: 14px;
  font-weight: 600;
  color: #dbe4ed;
}
.gd-gap-stars {
  flex: none;
  font-size: 12px;
  letter-spacing: .06em;
  color: #8fa2b5;
}
.gd-gap-finding {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.62;
  color: #aab7c4;
}
.gd-gap-action {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--hair-2);
  font-size: 12px;
  line-height: 1.6;
  color: #7f8e9c;
}

/* 详情页 */
.gd-detail-en {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #8695a5;
}
.gd-fields {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 28px;
}
.gd-field {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-2);
  font-size: 13px;
  line-height: 1.6;
}
.gd-field dt { color: #7f8e9c; }
.gd-field dd { margin: 0; color: #c3cdd7; word-break: break-word; }
.gd-source { margin-top: 22px; }

/**
 * 原文全文区（会员权益）。
 *
 * 与详情页那排按钮同一套材质：`.btn.is-member` 金实底 = 会员功能，
 * `.btn.is-gated` 虚线 + 锁 = 你这一档还没有 —— 这里只负责把这一块
 * 和上面的字段表分开，不再另写一套按钮样式。
 */
.gd-fulltext {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #1d2a36;
  border-radius: 10px;
  background: #0d1620;
}
.gd-fulltext-note { margin: 0 0 4px; color: #9fb0c0; font-size: 13px; line-height: 1.7; }
.gd-fulltext .gd-source { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
/* 没抓到原文的那一档：整体压暗，别和「本站有这份文件」看起来一样 */
.gd-fulltext.is-missing { border-style: dashed; background: transparent; }
.gd-fulltext.is-missing .gd-fulltext-note { color: #7f8e9c; }

@media (max-width: 620px) {
  /* 卡片在窄屏变单列由全站的 `.card` 规则负责，这里只管指南特有的部分 */
  .gd-field { grid-template-columns: 1fr; gap: 2px; }
  .gd-gaps { grid-template-columns: 1fr; }
}

/* ============================ 患者手册 ============================ */

/*
 * 与「指南共识」同一种做法：列表**复用站内通用的 `.card`**，
 * 卡片的形状由 `.card` 统一决定，以后改卡片这个板块自动跟着变。
 *
 * 保留 `.pg-*` 前缀的只有五样东西 —— 都是资讯卡片里没有的语义：
 *   ① 「企业资料」红标签（`.pg-industry`）
 *   ② 整卡可点的 stretched link（`.pg-card` / `.pg-card-link`）
 *   ③ 完整度列的文字标签（`.pg-rating-label`）
 *   ④ 发布年份 chip（`.chip-year`）
 *   ⑤ 「怎么读这些资料」的三栏说明（`.pg-notes`）与详情页的企业资料提示
 */

/*
 * 卡片顶部那一行：现在只有资料编号。
 *
 * 原来「企业资料」红标签也在这里（`justify-content: space-between`
 * 把编号推左、标签推右）。用户要求把它移到标签行之后，这行就只剩编号，
 * 所以 `space-between` 一并去掉 —— 留着一个"把唯一元素推到两端"的
 * 规则只会让下一个人以为这里还有第二个元素。
 */
.pg-card-top {
  margin-bottom: 8px;
}
.pg-id {
  font-size: 11px;
  letter-spacing: .06em;
  color: #6f7d8b;
  font-variant-numeric: tabular-nums;
}

/*
 * 「企业资料」—— 现在活在**标签行**里（用户要求「放在标签位置，不放右上角」）。
 *
 * 它同时带 `chip chip-static` 两个类：
 *   - `chip` 给它站内标签的形状（圆角、内距、字号），
 *     所以它和旁边的「技术：CAR-T」「2026 年」是**同一行同一套尺寸**；
 *   - `chip-static` 让它不可点（没有 hover 反馈）。
 *
 * 颜色仍然用 `--err-*` 那对变量，与站内"需要留意"的语义一致 ——
 * 不新造一套红色。**这一处颜色是刻意的例外**：站内规矩是标签颜色只表达
 * 状态不表达类别，而"企业资料"是一个需要读者**在点开之前就知道**的
 * 事实（范围限于厂商自家产品），红标签是达成这件事最直接的手段。
 *
 * ⚠️ 覆盖 `.chip-static:hover` 的背景：那个规则是给深色标签行写的，
 * 这里底色已经被红色占住，hover 时只需要保持原样（`cursor: help`
 * 由 `.pg-industry` 自己给，鼠标移上去能看到解释）。
 */
.pg-industry {
  background: var(--err-bg);
  border-color: rgba(228, 165, 173, .28);
  color: var(--err-fg);
  cursor: help;
}
.pg-industry:hover,
.chip-static.pg-industry:hover {
  background: var(--err-bg);
  border-color: rgba(228, 165, 173, .28);
  color: var(--err-fg);
}

/*
 * 整张卡片可点（stretched link）。
 *
 * 用户报「卡片点击没反应」—— 根因是只有标题那串文字是 `<a>`，
 * 卡片其余区域（摘要、元信息、右侧完整度列）全是死区。
 *
 * 这里**不能**照抄招募页「整行套一个 `<a>`」的做法：卡片里有筛选 chip，
 * HTML 不允许 `<a>` 嵌套 `<a>`。所以用标准解法 ——
 * 卡片 `position: relative`，标题里的链接用 `::after` 铺满整张卡。
 *
 * ⚠️ `.chips` 必须 `z-index: 2` 抬起来：否则铺满的那层会盖住 chip，
 * 点「CAR-T」会跳详情页而不是去筛选 —— 那等于把标签功能弄坏了。
 * 元信息行里的 `.chip` 同理（`.card-meta` 里的 span 不可点，无需处理）。
 */
.pg-card { position: relative; }
.pg-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pg-card .chips { position: relative; z-index: 2; }
/* 键盘可达性：::after 铺满后焦点框要落在整张卡上，否则只有文字那一点 */
.pg-card-link:focus-visible::after {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  border-radius: 5px;
}
/* hover 时整张卡一起反馈（光标也说明"这里能点"） */
.pg-card:hover .card-title a { color: var(--champagne-2); }
.pg-card { cursor: pointer; }

/*
 * 完整度列 —— 复用 `.card-score`（站内所有卡片放辅助信号的位置）。
 *
 * 只补一样站内没有的东西：星级下面的「完整度」三个字。
 * 论文卡片那边星级下面是空的（上面已经有分数说明了它是什么），
 * 而这里上面就是星，不写一个字读者会以为那是"评分"。
 * 字号与 `.score-value small` 同级，免得比星星还抢眼。
 */
.pg-rating-label {
  font-size: 10.5px;
  color: #7f8e9c;
  line-height: 1;
}

/*
 * 「怎么读这些资料」三栏说明 —— 与指南共识页的成熟度卡片同一套表面语言：
 * 深色底 + 细边框 + 无底色块，卡片网格排列。
 */
.pg-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.pg-note {
  padding: 14px 16px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.pg-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--white);
}
.pg-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #8695a5;
}

/*
 * 发布年份 chip。
 *
 * 年份是**时间刻度**，与「技术 / 疾病 / 人群 / 语言」那类分类标签不是一回事：
 * 分类标签回答"这是什么"，年份回答"这是什么时候的"。
 * 站内规矩是**标签的颜色只表达状态**（选中/生效），不表达类别 ——
 * 所以这里不用颜色区分，用**形状**：等宽数字 + 前置一个时间刻度感的小字，
 * 与旁边的分类 chip 一眼可分，又不占用颜色语义。
 *
 * `tabular-nums`：年份并排时 2024/2025/2026 宽度一致，扫读时不会跳。
 */
.chip-year {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.chip-year::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  vertical-align: 1px;
}

/* 详情页：跳转原始出处 —— 这是这一页的主要出口，所以按钮旁边
   同时写明**会去哪个机构、哪个域名**（患者有权在点出去之前知道目的地）。*/
.pg-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 22px;
}
.pg-source-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: #7f8e9c;
}
.pg-source-note b { color: #a9b5c1; font-weight: 600; }

/* ------------------------------------------------------------------
   获取方式标签（`.chip-access` / `.pg-access-note`）**已整体删除**。

   2026-09 合并「中国及中文患者教育资源专题」时曾加过这两组样式：
   前者是卡片上的获取方式标签（「院内发放」带警示色），
   后者是详情页的显式提醒（"这份资料没有公开下载版…"）。

   用户复查后指出那批资料里多条**根本不是手册、只是新闻稿**，
   剔除之后「院内发放」「公开报道」两档全空，这两组样式再无使用者。
   一起删掉，理由见 `src/patient-guides.js` 里那段说明。

   那段提醒的出发点是对的，但**收录不该收进来再解释"其实这不是手册"**。
   ------------------------------------------------------------------ */

/*
 * 编者备注 —— 与摘要分开呈现。
 *
 * 它是**编者写的判断**（"这份资料该不该收、要注意什么"），
 * 不是发布机构的原话。混进摘要里会让读者以为那是机构说的，
 * 所以单独一块、带标签、用中性色（不是强调色）。
 */
.pg-editor-note {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hair-2);
  font-size: 12.5px;
  line-height: 1.75;
  color: #8695a5;
}
.pg-editor-note b {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #6f7d8b;
  font-weight: 600;
}

/*
 * 详情页最后那段「本页只是索引…」的使用提示。
 *
 * ## 为什么需要这一条（用户报的排版问题）
 *
 * 站内通用的 `.note` 是 `margin: 0 0 14px` —— **上外边距为 0**。
 * 那个默认值在大多数地方没问题（`.note` 通常紧跟 `<h2>`，
 * 标题自己带着下间距），但这里它紧跟在「查看官方原文」按钮那一行后面，
 * 于是提示条**直接贴在按钮下方**，两段不同性质的内容糊成一团，
 * 读者会以为那句话是按钮的说明文字。
 *
 * 给一个明确的上间距把它推下来。用 `margin-top` 而不是 padding：
 * 这是**两段内容之间的距离**，不是这一段内部的留白。
 *
 * `margin-bottom: 0`：它是这一块的最后一个元素，下面还有页脚/返回键，
 * 14px 的下外边距叠上去会让页尾显得松散。
 */
.pg-detail-note {
  margin-top: 26px;
  margin-bottom: 0;
}

/* 详情页：企业资料的显式提示（红边、与正文分开） */
.pg-industry-note {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-left: 3px solid var(--err-fg);
  background: var(--err-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--err-fg);
}

@media (max-width: 620px) {
  .pg-notes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   监管框架板块（/regulatory）
   --------------------------------------------------------------------------
   这个板块与患者手册**同类**（参考工具，不是内容流），所以版式整套复用
   `.pg-card` / `.card-score` / `.facets-*` / `.gd-fields` —— 只补下面这几样
   站内还没有的东西。

   ⚠️ 它原来是「监管动态」内容流。旧页面用的 `.card-unscored`（单列、无右侧列）
   在这里**不适用**：新版每张卡右上有「官方来源条数」要放，走的是标准两列栅格。
   ========================================================================== */

/*
 * 右上角那一列的大数字 —— 复用 `.card-score` 的位置，但**不是分数**。
 *
 * 尺寸对齐论文卡片的 `.score-value`（读者在站内已经习惯"右上角大数字 =
 * 一个可比较的量"），但**不给它打分制的颜色**（论文那边高分是金色、
 * 低分转暗）：这里的数字没有"越高越好"的意思，
 * 给颜色等于暗示英国的 1 条比中国的 7 条差。
 * 统一用中性偏亮的字色，让它读起来像一个**计数**。
 */
.fw-source-count {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: #c3cdd7;
  font-variant-numeric: tabular-nums;
}

/*
 * 详情页的官方来源清单。
 *
 * ## ⚠️ 第一版为什么丑（用户指出的问题）
 *
 * 第一版套用了 `.approval` / `.row` / `.meta` 这套类名 ——
 * 那是**交付用的独立单页 HTML 里的样式**，本站在做数据迁移时把类名抄了过来，
 * 却**没有把对应的 CSS 一起搬**（app.css 里根本没有 `.approval` 这些规则）。
 * 于是 `.row` 那个 `grid-template-columns: 1fr 1fr` 完全没生效，
 * 每个字段`<div>`各占一行：发布机构／文件／发布核验／证据等级／链接 共五行，
 * 一条来源就撑掉半屏；中国的 7 条来源连起来是一面又高又空、没有层次的墙。
 *
 * 所以这里按本站自己的表面语言重写：**一条来源 = 一行**
 * （等级徽章 + 文件标题 + 机构/日期/域名 + 一个跳转箭头）。
 *
 * ## 为什么"文件标题"要排第一
 *
 * 原文案把「发布机构」放在标题上面。但读者来这一节是为了知道
 * **这条结论依据的是哪份文件**，机构是第二层信息 ——
 * 所以标题做成可点的正文（最显眼），机构/日期/域名压成下面一行灰字。
 * 域名留在那里是因为读者有权在点出去之前知道**会去哪个站点**。
 */
/**
 * ## `.reg-src-list` 的金色细竖线**已删除**（用户要求「不需要细金线」）
 *
 * 原来这里是 `border-left: 1px solid var(--line-gold)`，用意是"把同一法域 /
 * 同一组来源串成一组"。它挂在**每个** `.reg-src-list` 上，于是
 * 「分国别批准记录」与「原始来源」两节各多出一条通高的金线。
 * 而行与行之间本来就有 `.reg-src + .reg-src` 的分隔线，分组关系已经由
 * 分隔线 + 行内边距表达清楚，再画一条竖线只是噪音。
 *
 * 连带效果：`.reg-src` 原来的 `border-radius: 0 R R 0`（左上/左下为直角）
 * 是配那条竖线的 —— 竖线在左、圆角在右，形成"一整块"的观感。
 * 竖线没了，非对称圆角就失去理由，已改成四角统一的 `var(--radius-sm)`。
 *
 * 这一节因此没有声明了，**保留注释而不删整块**：下一个看到"这里怎么没有样式"
 * 的人能直接读到为什么，不必去翻 git 历史。
 */
.reg-src-list {
  list-style: none;
  margin: 4px 0 14px;
  padding: 0;
}

.reg-src {
  display: grid;
  /**
   * 标签（窄，固定）｜正文（占满）
   *
   * ⚠️ 第三列（行尾 ↗ 箭头）已按用户要求**删除** —— 那一列只在最右侧
   * 留出一条空槽，看起来像没做完。三列栅格改成两列，正文才能真正占满。
   * 链接现在挂在标题上（`.reg-src-title`），读者点标题即可。
   */
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.reg-src + .reg-src { border-top: 1px solid var(--hair-2); }
.reg-src:hover { background: rgba(201, 169, 110, .05); }

/*
 * 左侧标签。
 *
 * ## ⚠️ 它**不再是徽章**（用户要求「做减法」）
 *
 * 原来这里挂的是 `.gd-status gd-status-ok`（绿色胶囊）。两个问题：
 *   1. `.gd-status` 那一套徽章站内**已经整体删掉**（见「指南共识」一节的说明），
 *      这里却还在用，是漏网的一处；
 *   2. 颜色让它比标题更抢眼 —— 而这一行的正文是**文件标题**，
 *      一个重复出现的分类标记不该压过它。
 *
 * 现在它只是**灰色小字标签**，靠固定宽度对齐、靠位置分组，不靠颜色。
 * `margin-top: 1px` 保留：让标签顶边与标题的视觉顶边齐平，
 * 而不是与行盒顶边齐平（标题字号更大、行高更高）。
 */
.reg-src-level {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  color: #8b9aa8;
  white-space: nowrap;
}
/* 没有等级时留一个等宽占位，避免正文左右错位 */
.reg-src-level-none { display: block; width: 1px; }

.reg-src-body { min-width: 0; }

/*
 * 文件标题 —— 这一行的**主链接**。
 *
 * 用 `word-break` 兜底：监管文件的标题里有《》和大量中文，
 * 加上域名这种不含空格的拉丁串，窄屏下不折行就会顶破栅格。
 */
.reg-src-title {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: #dbe3ea;
  text-decoration: none;
  word-break: break-word;
}
.reg-src-title:hover { color: var(--champagne-2); text-decoration: underline; text-underline-offset: 3px; }

/* 机构 · 日期 · 域名 —— 一行灰字，不抢标题 */
.reg-src-meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #7f8e9c;
  word-break: break-word;
}
.reg-src-dot { margin: 0 6px; opacity: .55; }

/*
 * ⚠️ 行尾的跳转箭头（`.reg-src-go`）**已删除**（用户要求「做减法」）。
 *
 * 原来它在每行最右侧画一个 ↗，和标题指向同一个地址。删掉的理由：
 *   1. 它在右侧留出一条**空槽**，远看像版式没做完；
 *   2. 它与标题**重复** —— 同一行出现两个指向同一处的可点元素，
 *      读者还要判断"点哪个"；
 *   3. 读者本来就会点**标题**，那才是这一行的正文。
 *
 * 所以链接改挂到 `.reg-src-title` 上，出站提示仍由标题的
 * `target="_blank"` 与 hover 下划线承担。样式不再保留 ——
 * 全站已经没有任何地方渲染这个类（三个调用点都改过了），
 * 留着就是死代码，下一个人改样式时会白找一遍"这玩意儿在哪儿用"。
 */

/* 窄屏：标签移到标题上方，正文占满整行。
   ⚠️ 栅格是 `1fr`（不是 `1fr auto`）—— 行尾箭头已删，第二列没有内容了；
   留着 `auto` 会在窄屏上凭空让出一点宽度，正文反而更早折行。 */
@media (max-width: 620px) {
  .reg-src { grid-template-columns: 1fr; }
  .reg-src-level { grid-column: 1 / -1; justify-self: start; margin-bottom: 2px; }
}

/*
 * 详情页里的「路径判断」段 —— **不是**红色警告。
 *
 * ⚠️ 原来复用了 `.pg-industry-note`，那是错的：那个类是**红色错误样式**，
 * 专用于"这份资料由产品持有方发布，范围限于自家产品"这种**需要警惕**的情况。
 * 而"路径判断"讲的是中性信息（这个法域里药品路径与技术路径怎么分），
 * 染成红色会让每一页都看起来像在报错。
 *
 * 用金色系（站内的"强调但不警告"色）：它值得被注意到（这是读者进门那个问题的答案），
 * 但不是坏消息。
 */
.reg-access-note {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-left: 3px solid var(--line-gold);
  background: rgba(201, 169, 110, .07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #cdd6df;
}
.reg-access-note b { color: var(--champagne-2); font-weight: 600; }

/* ==========================================================================
   转化应用板块（/translation）
   --------------------------------------------------------------------------
   与患者手册同类（参考工具），版式整套复用 `.pg-card` / `.card-score` /
   `.facets-*` / `.gd-fields` / `.reg-src-*`。
   ========================================================================== */

/*
 * ## 一页两个板块：靠**分节线**分开，不靠页签
 *
 * 用户要求：「先介绍获批的，全部介绍完了，然后才是介绍临床应用的，
 * 是两个独立的，不放一起」。
 *
 * 所以这一页是上下两段**完整独立**的内容（各有编号 01 / 02、
 * 各自的说明、筛选面板与卡片列表），需要一条明确的分隔让读者
 * 知道"上一节已经结束、这是新的一节"。
 *
 * 用**上边框 + 大间距**而不是背景色块：站内其它页面（指南共识、
 * 患者手册）的二级 section 之间就是细线分隔，这里只是把间距放大一档，
 * 让两个一级板块的分界比普通 section 更明显 —— 但仍然是同一个页面的语言，
 * 不引入新的视觉体系（比如卡片或色带），否则这一页会看起来像另一个站点。
 *
 * ⚠️ 只作用于 `/translation` 这一页的第二个板块（`.lv1 + .lv1`），
 * 不影响其它页面的 section 节奏。
 */
.lv1 + .lv1 {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--hair);
}

/*
 * 分节编号（`01 · GLOBAL MARKETED PRODUCTS`）已经由 `.eyebrow` 承担，
 * 这里只把两个板块的 `<h2>` 稍微放大 —— 它们是这一页的两个一级标题，
 * 与站内其它页面的一级标题同级，但这一页有两个，所以比常规的
 * 略收一点（避免两个都很大、抢掉正文）。
 */
.lv1 + .lv1 > .section-head > h2 { font-size: 1.45em; }

/*
 * 来源行的「说明」（`note`）—— 转化应用项目专有。
 *
 * 每条来源在**该项目下**都有一段说明（这份来源能证明什么、有什么局限），
 * 它是这个板块最有价值的部分之一：数据源把"这份是医院官网写的"
 * 和"这份是第三方汇总清单"的区别逐条讲清楚了。
 *
 * 所以它不能和 `.reg-src-meta`（机构/日期/域名那行灰字）同一个样子 ——
 * 那是**元数据**，这是**正文**。给正文的字色与行高，并加一点上间距
 * 与前一行分开。
 */
.reg-src-note {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a9b5c1;
  word-break: break-word;
}

/*
 * 证据等级为 C（最低档）时那个字母的数字色。
 *
 * `.fw-source-count` 默认是中性亮色（监管框架那页用它显示"来源条数"，
 * 没有高低之分）。但转化应用这一页放的是**证据等级字母** A/B/C，
 * 而 C 级（第三方汇总）确实比 A 级（官方原件）弱 —— 这一点值得在颜色上
 * 体现出来，否则读者会以为三个字母只是三个并列的类别。
 *
 * 只用"变暗"来表达，**不用红色**：C 级不是错误，只是证据强度较低，
 * 染红会让大量正常项目看起来像有问题。
 */
.fw-source-count.is-low { color: #7f8e9c; }

/* 证据等级标签 —— 灰色小字，**不是彩色徽章**（见 translation.js 的说明）。
   它是元信息，不是警告：颜色留给真正需要注意的状态。 */
.evidence-tag {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8b9aa8;
}

/*
 * 产品详情页的分国别批准记录。
 *
 * 复用 `.reg-src` 那套行，左侧块放的是**国家/地区名** ——
 * 给它一个固定宽度，让各国的行左边缘对齐。
 *
 * ⚠️ `.reg-src-level` 这一列是按「标签」设计的（内容宽度不定），
 * 「澳大利亚」「加拿大」这种四字国名会把主栏挤窄且每行宽度不一，
 * 所以这里钉一个 `min-width`。
 *
 * 用**左对齐**而不是居中：这一列现在是文字标签（不再是色块胶囊），
 * 中文标签居中会在长短不一时看起来参差，左对齐才有一条稳定的对齐线。
 */
.prod-market .reg-src-level {
  min-width: 62px;
  text-align: left;
}
/* 标题在有的产品上是链接、有的没有（没有可追溯来源时是纯文本），
   这里统一颜色 —— 两者都不该因为"能不能点"而在视觉上分家 */
.prod-market .reg-src-title { color: #dbe3ea; }

@media (max-width: 620px) {
  .prod-market .reg-src-level { min-width: 0; }
}

/* --------------------------------------------------------------------------
   产品详情页的**说明书级详细资料**（2026-09 新增）
   --------------------------------------------------------------------------
   数据来自《CYTOTHERAPY 全球已获批肿瘤细胞治疗产品资料手册（2026-09-20）》。
   这里只补三样站内没有的东西：

     ① `.pd-line`  —— 「标签 + 成段正文」的字段行（适应证 / 回输要点）
     ② `.pd-warn`  —— 黑框/重大警示的强调块
     ③ `.risk-box` —— 风险条目表（其他风险 / 常见不良反应 / 监测随访）

   ⚠️ 为什么不复用 `.gd-field`（站内已有的字段表）
   那个栅格第一列只有 88px、且是 `auto-fit minmax(280px,1fr)` 的多列布局，
   适合"商品名 / 靶点"这种**短值**。而这里的值是一整段适应证原文
   （有的超过 200 字），塞进多列栅格会被挤成又窄又长的一条。
   所以另起一个**单列、宽标签**的行式，让长段落有整行宽度可用。

   ⚠️ 为什么 `.pd-warn` 不是红色
   红色在这个站里是**报错/危险**语义（见 `.pg-industry-note` 的说明）。
   黑框警告确实是"重要"，但它是**说明书里的既定事实**，不是站点在报错；
   每个 CAR-T 产品都有，满页红色会让人以为整站崩了。
   所以用站内的**警示金**（`--line-gold` 系），与 `.reg-access-note` 同一个语言：
   值得注意，但不是坏消息。
   -------------------------------------------------------------------------- */

.pd-lines { margin: 0 0 4px; }

/*
 * 一行 = 固定宽度的标签 + 占满剩余宽度的正文。
 * `min-width: 0` 是必需的：没有它，长段落会把栅格撑破（flex/grid 的经典陷阱）。
 */
.pd-line {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair-2);
  font-size: 13px;
  line-height: 1.72;
  color: #c3cdd7;
}
.pd-line:last-child { border-bottom: 0; }
.pd-line > div { min-width: 0; word-break: break-word; }
.pd-line-key {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: #7f8e9c;
}

/*
 * 黑框警告块。左侧竖线 + 极淡金底，与 `.reg-access-note` 同一种"强调不警告"的处理。
 * 字号比正文大一档（13.5px）并加重字重 —— 它是这一页唯一"看漏了会出事"的信息。
 */
.pd-warn {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-left: 3px solid var(--line-gold);
  background: rgba(201, 169, 110, .08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pd-warn-label {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--champagne-2);
}
.pd-warn-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  color: #dbe3ea;
  word-break: break-word;
}

/*
 * 风险条目表：左栏固定宽度的条目名 + 右栏正文。
 * 与 `.pd-line` 同一个形状，但左栏更宽（"常见 / 主要不良反应"有 9 个字），
 * 且条目之间有分隔线，读起来像一张表。
 */
.risk-box {
  margin: 0 0 14px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.risk-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-top: 1px solid var(--hair-2);
}
.risk-row:first-child { border-top: 0; }
.risk-key {
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: #9dabb8;
}
.risk-value {
  padding: 12px 15px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.72;
  color: #c3cdd7;
  word-break: break-word;
}

/* 窄屏：标签移到正文上方，正文占满整行（与站内 `.gd-field` 的窄屏处理一致） */
@media (max-width: 620px) {
  .pd-line,
  .risk-row { grid-template-columns: 1fr; gap: 3px; }
  .risk-key { padding-bottom: 0; background: transparent; }
  .risk-value { padding-top: 4px; }
}

/* --------------------------------------------------------------------------
   出处核查状态（2026-09，用户要求出处须为政府机构 / 医院级别）
   --------------------------------------------------------------------------
   ## ⚠️ 逐条来源上的「出处级别」标签样式已删除
   
   原来每个域名会被判定成政府/医院/企业/媒体四档，并在每条来源行上
   贴一个彩色小字（`.src-tier` / `.src-tier-low` / `.src-tier-unrated`）。
   用户要求「剔除一切不必要文字」后，那套标签去掉了 ——
   它与「证据等级」在读者眼里是同一件事的两种说法
   （详见 `src/translation.js` 顶部的说明）。
   
   保留下面两个：它们表达的是**核查进度**（这个项目缺权威出处），
   而不是给来源分级，页面上只说一次，不与证据等级重复。
   -------------------------------------------------------------------------- */

/*
 * 卡片左上角「出处待核验」标记。
 * 与 `.pg-id` 同行，靠右；用警示金而不是红色 —— 它不是错误，
 * 是"这一条还需要补权威来源"的进度标记。
 */
.src-gap-tag {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #d9b877;
  border: 1px solid rgba(201, 169, 110, .35);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* 详情页里"本项目尚无政府/医院级出处"那条提示 —— 同为警示金，不是报错红 */
.src-gap {
  color: #cdd6df;
  border-left: 3px solid var(--line-gold);
  background: rgba(201, 169, 110, .06);
  padding: 9px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.src-gap strong { color: var(--champagne-2); }

/* ========================================================================== 
   备用主页 `/home-preview`
   独立作用域，不改变现有首页 `/` 的任何布局。
   ========================================================================== */
body[class*="home-preview"] {
  --hp-ink: #f6f3ec;
  --hp-muted: #8fa0b0;
  --hp-line: rgba(184, 202, 217, .12);
  --hp-gold: #e1b86b;
  --hp-mint: #72d7c3;
  background:
    radial-gradient(circle at 72% 12%, rgba(31, 84, 98, .22), transparent 30%),
    radial-gradient(circle at 12% 34%, rgba(177, 132, 55, .09), transparent 28%),
    var(--navy);
}
body[class*="home-preview"] .container { max-width: 1420px; padding-bottom: 0; }
/* 备用主页专用顶栏：品牌、导航、搜索合并为一条安静的横向导航。 */
body[class*="home-preview"] header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  /* 与下方通栏首屏贴齐：抵消 `.container` 的 22px 左右内边距。 */
  margin: 0 -22px;
  padding: 18px 26px;
  background: rgba(7, 19, 31, .76);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
  overflow: visible;
  animation: hp-header-in .65s cubic-bezier(.2,.75,.25,1) both;
}
body[class*="home-preview"] .header-brand-row { padding: 0 0 0 22px; flex-wrap: nowrap; }
body[class*="home-preview"] .header-brand-row > .brand-tagline { display: none; }
body[class*="home-preview"] .brand-lockup { gap: 9px; margin: 0; padding: 0; border: 0; }
body[class*="home-preview"] .nav {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}
body[class*="home-preview"] .nav > a {
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9dabb7;
  font-size: 12px;
  font-weight: 450;
  white-space: nowrap;
}
body[class*="home-preview"] .nav > a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin: 5px auto -6px;
  background: var(--hp-gold);
  transition: width .2s ease;
}
body[class*="home-preview"] .nav > a:hover { color: #f0f3f5; }
body[class*="home-preview"] .nav > a:hover::after { width: 14px; }
body[class*="home-preview"] .nav-ask { gap: 0; margin-left: 16px; }
body[class*="home-preview"] .nav-ask .input[type="search"] {
  width: 188px;
  height: 34px;
  padding: 0 38px 0 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  box-shadow: none;
  color: #dfe6eb;
  font-size: 11.5px;
}
body[class*="home-preview"] .nav-ask .input[type="search"]::placeholder { color: #607484; }
body[class*="home-preview"] .nav-ask .input[type="search"]:focus { outline: 1px solid rgba(225,184,107,.55); outline-offset: 0; }
body[class*="home-preview"] .nav-ask .search-btn {
  width: 30px;
  height: 30px;
  margin-left: -32px;
  border-radius: 50%;
  background: transparent;
  color: var(--hp-gold);
}
body[class*="home-preview"] .nav-ask .search-btn:hover { background: rgba(225,184,107,.12); color: var(--hp-gold); }
.hp-main { margin: 0 -22px; overflow: hidden; color: var(--hp-ink); background: var(--navy-3); }
/* 首页区块依靠背景与留白分层，不使用通栏边框。 */
.hp-main > section {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hp-start { background: rgba(5,16,26,.24); }
.hp-start > .hp-hero { border: 0; border-radius: 0; box-shadow: none; }

.hp-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  align-items: center;
  gap: 80px;
  padding: 92px 74px 82px;
  isolation: isolate;
  border-top: 0;
}
.hp-hero::before {
  content: none;
}
.hp-orbit { position: absolute; border: 1px solid rgba(114,215,195,.12); border-radius: 50%; z-index: -1; }
.hp-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; top: 50%; left: -4px; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 18px rgba(114,215,195,.7); }
.hp-orbit-one { width: 620px; height: 620px; right: -160px; top: -100px; animation: hp-orbit-spin 34s linear infinite; }
.hp-orbit-two { width: 390px; height: 390px; right: -44px; top: 18px; border-color: rgba(225,184,107,.13); animation: hp-orbit-spin-reverse 26s linear infinite; }
.hp-orbit-two::after { background: var(--hp-gold); box-shadow: 0 0 18px rgba(225,184,107,.65); }
.hp-hero-copy { animation: hp-rise-in .8s .08s cubic-bezier(.2,.75,.25,1) both; }
.hp-kicker { margin: 0 0 26px; font-size: 11px; letter-spacing: 2.4px; color: #a9b8c5; }
.hp-kicker span { display: inline-block; width: 28px; height: 1px; margin: 0 10px 3px 0; background: var(--hp-gold); }
.hp-hero h1 { max-width: 800px; margin: 0; font-size: clamp(42px, 4.55vw, 69px); line-height: 1.08; letter-spacing: -3.3px; font-weight: 680; color: var(--hp-ink); }
.hp-hero h1 span { color: var(--hp-gold); }
.hp-lead { max-width: 680px; margin: 30px 0 0; font-size: 17px; line-height: 1.9; color: #a8b5c0; }
.hp-scope-list { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; }
.hp-scope-list span { position: relative; padding-left: 13px; color: #91a1ad; font-size: 12px; }
.hp-scope-list span::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--hp-gold); }
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hp-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 152px; padding: 13px 20px; border-radius: 3px; text-align: center; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.hp-hero-actions a:hover { transform: translateY(-2px); }
.hp-action-primary { background: var(--hp-gold); color: #111820; font-weight: 650; }
/**
 * 金实底那颗「检索一下」的放大镜（用户 2026-09-22：「把检前面加一个放大镜的符号」）。
 *
 * - 尺寸 17px：与 13px 的正文字号同高偏上，不至于把 51px 高的按钮顶高；
 * - `stroke` 在 SVG 里写 `currentColor`，这里只兜一个 `color` 默认值 ——
 *   金实底上的前景色是 `.hp-action-primary` 的 `#111820`，线条跟着它走；
 * - `flex: 0 0 auto`：按钮是 flex 容器，图标不许被压扁。
 */
.hp-action-icon { flex: 0 0 auto; color: currentColor; }
.hp-action-secondary { border: 1px solid rgba(255,255,255,.16); color: #dbe4eb; }
.hp-action-secondary span { margin-left: 14px; color: var(--hp-mint); }

.hp-signal { align-self: center; padding: 26px; border: 0; background: linear-gradient(145deg, rgba(14,34,49,.72), rgba(5,16,27,.48)); box-shadow: 0 28px 76px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(16px); animation: hp-signal-in .9s .2s cubic-bezier(.2,.75,.25,1) both, hp-signal-float 7s 1.1s ease-in-out infinite; }
.hp-signal-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--hp-line); color: #8194a4; font-size: 9px; letter-spacing: 1.8px; }
.hp-signal-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--hp-mint); box-shadow: 0 0 16px var(--hp-mint); animation: hp-pulse 2.4s ease-in-out infinite; }
.hp-signal-core { padding: 38px 0 34px; }
.hp-signal-core b { display: block; font-size: clamp(44px, 5vw, 68px); line-height: 1; font-weight: 560; letter-spacing: -2px; }
.hp-signal-core span { display: block; margin-top: 9px; color: var(--hp-muted); }
.hp-signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hp-line); }
/* ⚠️ 曾为「管理员专区」加过一条 `.hp-signal-grid-2`（首页只剩两格时按两列排）——
   用户 2026-09-25「没让你动主页啊」把首页整体还原，那条规则**已删除**。
   三格恒为三列，别再按身份改这里。 */
.hp-signal-grid a { padding: 18px 8px 0; border-left: 1px solid var(--hp-line); text-decoration: none; }
.hp-signal-grid a:first-child { padding-left: 0; border-left: 0; }
.hp-signal-grid b { display: block; color: #dbe4ea; font-size: 17px; }
.hp-signal-grid span { display: block; margin-top: 4px; color: #718494; font-size: 10px; }

.hp-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 74px 42px; background: transparent; }
.hp-proof > div { position: relative; min-height: 112px; padding: 25px 56px 24px 24px; border-left: 0; background: rgba(255,255,255,.024); }
.hp-proof > div { animation: hp-rise-in .65s cubic-bezier(.2,.75,.25,1) both; }
.hp-proof > div:nth-child(1) { animation-delay: .28s; }
.hp-proof > div:nth-child(2) { animation-delay: .38s; }
.hp-proof > div:nth-child(3) { animation-delay: .48s; }
.hp-proof > div:first-child { border-left: 0; }
.hp-proof span { position: absolute; right: 22px; top: 24px; color: rgba(225,184,107,.62); font-size: 10px; letter-spacing: .12em; font-weight: 650; }
.hp-proof strong { display: block; font-size: 14px; color: #e5ebef; }
.hp-proof p { max-width: 340px; margin: 9px 0 0; color: #748795; font-size: 11px; line-height: 1.75; }

.hp-specials { display: grid; grid-template-columns: 1.25fr .875fr .875fr; gap: 18px; padding: 84px 74px; background: rgba(5,16,26,.72); }
.hp-specials-intro { padding: 18px 28px 18px 0; align-self: center; }
.hp-specials-intro > p { margin: 0 0 14px; color: var(--hp-gold); font-size: 10px; letter-spacing: 2.2px; }
.hp-specials-intro h2 { max-width: 520px; margin: 0; color: #edf2f4; font-size: clamp(25px, 2vw, 34px); line-height: 1.32; letter-spacing: -1px; }
.hp-specials-intro > span { display: block; margin-top: 16px; color: #718492; font-size: 12px; line-height: 1.9; }
.hp-special-card { position: relative; min-height: 230px; padding: 28px; border: 0; border-radius: 2px; background: linear-gradient(145deg, rgba(225,184,107,.07), rgba(255,255,255,.018) 58%); color: inherit; text-decoration: none; overflow: hidden; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.hp-special-card::after { content: ''; position: absolute; right: -54px; top: -54px; width: 170px; height: 170px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(225,184,107,.12), transparent 68%); filter: blur(4px); }
.hp-special-card:hover { transform: translateY(-4px); background: linear-gradient(145deg, rgba(225,184,107,.11), rgba(255,255,255,.028) 58%); box-shadow: 0 22px 55px rgba(0,0,0,.16); }
.hp-special-card > div { display: flex; align-items: baseline; gap: 8px; }
.hp-special-card small { position: absolute; left: 28px; top: 28px; color: #93a5b2; font-size: 12px; }
.hp-special-card strong { margin-top: 35px; color: #f0f3f5; font-size: 50px; line-height: 1; letter-spacing: -2px; }
.hp-special-card span { color: #6f8391; font-size: 11px; }
.hp-special-card p { margin: 22px 0 0; max-width: 280px; color: #778b98; font-size: 11px; line-height: 1.75; }
.hp-special-card i { position: absolute; left: 28px; bottom: 26px; color: var(--hp-gold); font-size: 11px; font-style: normal; }
.hp-special-access { background: linear-gradient(145deg, rgba(91,205,187,.07), rgba(255,255,255,.018) 58%); }
.hp-special-access::after { background: radial-gradient(circle, rgba(91,205,187,.13), transparent 68%); }
.hp-special-access:hover { background: linear-gradient(145deg, rgba(91,205,187,.11), rgba(255,255,255,.028) 58%); }
.hp-special-access i { color: var(--hp-mint); }

.hp-paths { padding: 104px 74px; background: linear-gradient(to bottom, rgba(5,16,26,0) 0, rgba(5,16,26,.54) 14%, rgba(5,16,26,.54) 86%, rgba(5,16,26,0) 100%); }
.hp-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hp-path-group { min-width: 0; }
.hp-path-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; min-height: 58px; }
.hp-path-group-head strong { color: var(--hp-ink); font-size: 17px; font-weight: 620; }
.hp-path-group-head span { color: var(--hp-muted); font-size: 12px; line-height: 1.5; }
.hp-path-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-path-card { position: relative; min-height: 300px; display: flex; flex-direction: column; padding: 28px; background: rgba(255,255,255,.026); transition: transform .25s ease, background .25s ease; }
.hp-path-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.042); }
.hp-path-card > small { color: #778b99; font-size: 9px; letter-spacing: 1.6px; }
.hp-path-card > b { position: absolute; right: 26px; top: 25px; color: rgba(225,184,107,.65); font-size: 10px; letter-spacing: .12em; }
.hp-path-card h3 { margin: 38px 0 0; color: #e9eef1; font-size: 20px; line-height: 1.45; font-weight: 590; }
.hp-path-card > p { margin: 16px 0 28px; color: #758896; font-size: 11px; line-height: 1.8; }
.hp-path-card > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; }
.hp-path-card a { color: #aebdc7; font-size: 11px; text-decoration: none; }
.hp-path-card a:first-child { color: var(--hp-gold); }
.hp-path-card a:hover { color: #f1d18e; }
.hp-path-featured { background: linear-gradient(145deg, rgba(225,184,107,.08), rgba(255,255,255,.022) 62%); }
.hp-path-featured:hover { background: linear-gradient(145deg, rgba(225,184,107,.12), rgba(255,255,255,.035) 62%); }

.hp-audiences, .hp-explore { padding: 112px 74px; }
.hp-section-heading { max-width: 720px; margin-bottom: 48px; }
.hp-section-heading > p { margin: 0 0 14px; color: var(--hp-gold); font-size: 10px; letter-spacing: 2.2px; }
.hp-section-heading h2 { margin: 0; color: var(--hp-ink); font-size: clamp(32px, 3vw, 48px); line-height: 1.2; letter-spacing: -1.8px; }
.hp-section-heading > span { display: block; margin-top: 15px; color: var(--hp-muted); font-size: 14px; line-height: 1.7; }
.hp-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hp-audience { position: relative; min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: 38px; overflow: hidden; border: 1px solid var(--hp-line); background: linear-gradient(145deg, rgba(13,34,52,.92), rgba(6,17,29,.9)); transition: transform .35s cubic-bezier(.2,.75,.25,1), border-color .35s ease, box-shadow .35s ease; }
.hp-audience:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); box-shadow: 0 28px 65px rgba(0,0,0,.22); }
.hp-audience::after { content: ''; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; filter: blur(2px); opacity: .16; transition: transform .55s ease, opacity .55s ease; }
.hp-audience:hover::after { transform: scale(1.25); opacity: .24; }
.hp-audience-patient::after { background: var(--hp-mint); }
.hp-audience-clinician::after { background: var(--hp-gold); }
.hp-audience-eyebrow { font-size: 9px; letter-spacing: 1.7px; color: #788b9a; }
.hp-audience h2 { max-width: 480px; margin: 22px 0 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.35; letter-spacing: -1px; }
.hp-audience-copy > p { max-width: 520px; margin: 18px 0 0; color: #8799a8; line-height: 1.8; }
.hp-audience-links { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 42px; border-top: 1px solid var(--hp-line); }
.hp-audience-links a { display: flex; justify-content: space-between; gap: 12px; padding: 17px 12px; border-left: 1px solid var(--hp-line); color: #a7b5c0; text-decoration: none; font-size: 12px; }
.hp-audience-links a:first-child { padding-left: 0; border-left: 0; }
.hp-audience-links a:hover, .hp-audience-links a.primary { color: #f2f4f5; }
.hp-audience-links i { color: var(--hp-gold); font-style: normal; }
.hp-audience-patient .hp-audience-links i { color: var(--hp-mint); }

.hp-explore { background: radial-gradient(ellipse at 50% 42%, rgba(10,27,41,.42), rgba(5,16,26,0) 72%); }
.hp-explore-heading { max-width: 760px; margin-bottom: 42px; }
.hp-section-heading-inline { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.hp-section-heading-inline > div > p { margin: 0 0 14px; color: var(--hp-gold); font-size: 10px; letter-spacing: 2.2px; }
.hp-section-heading-inline > a { padding-bottom: 8px; color: #9baab7; text-decoration: none; font-size: 12px; }
.hp-section-heading-inline > a span { margin-left: 10px; color: var(--hp-mint); }
.hp-explore-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.hp-disease-board, .hp-modality-board { display: flex; flex-direction: column; padding: 32px; border: 0; background: rgba(8,22,35,.62); box-shadow: 0 22px 60px rgba(0,0,0,.09), inset 0 1px rgba(255,255,255,.025); }
.hp-board-title { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; }
.hp-board-title div { display: grid; gap: 7px; }
.hp-board-title span { font-size: 18px; font-weight: 620; color: #eef3f6; }
.hp-board-title small { color: #718696; font-size: 12px; }
.hp-board-title b { color: rgba(225,184,107,.72); font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.hp-disease-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px 0 18px; }
.hp-disease-list a { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; background: rgba(255,255,255,.022); color: #d1dae1; text-decoration: none; transition: background .22s ease; }
.hp-disease-list a:nth-child(odd) { border-right: 0; }
.hp-disease-list a:hover { background: rgba(255,255,255,.035); }
.hp-disease-list a:hover strong { color: var(--hp-gold); }
.hp-disease-list strong { font-size: 14px; font-weight: 560; transition: color .2s ease; }
.hp-disease-list small { color: #607687; font-size: 10px; }
.hp-disease-list i, .hp-modality-cloud i { color: var(--hp-gold); font-style: normal; opacity: 0; transform: translateX(-5px); transition: opacity .2s ease, transform .2s ease; }
.hp-disease-list a:hover i, .hp-modality-cloud a:hover i { opacity: 1; transform: none; }
.hp-modality-cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 0 18px; }
.hp-modality-cloud a { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; background: rgba(255,255,255,.022); color: #d1dae1; text-decoration: none; }
.hp-modality-cloud a:hover { background: rgba(225,184,107,.075); color: var(--hp-gold); }
.hp-modality-cloud strong { font-size: 14px; font-weight: 560; transition: color .2s ease; }
.hp-modality-cloud small { color: #607687; font-size: 10px; }
.hp-board-cta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 16px; color: #b7c4cd; text-decoration: none; font-size: 12px; }
.hp-board-cta i { color: var(--hp-gold); font-style: normal; transition: transform .2s ease; }
.hp-board-cta:hover { color: var(--hp-gold); }
.hp-board-cta:hover i { transform: translateX(4px); }

/* ==========================================================================
   首页「注册邀请」区块
   --------------------------------------------------------------------------
   这是首页唯一的转化位：**先把账户能多拿到什么讲清楚，再请人注册**。
   视觉上刻意与相邻区块拉开距离，用的都是站内已有的语言：

     · 背景比两侧更深（`--navy` 而不是 `--navy-3`）→ 深色页面上"更深"就是
       "被强调"，不需要换颜色，也就不会像贴上去的广告条；
     · 四角金色定位框（`::before` / `::after` 各画两个角）→ 借用检验报告
       「取证框」的意象，冷、准确、可核对 —— 正是这个站的调性；
     · 右侧一张"会员功能清单"，用**对勾 + 数字**而不是形容词。
   ========================================================================== */
.hp-member {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  align-items: center;
  gap: 56px;
  padding: 88px 74px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
/* --------------------------------------------------------------------------
   取景角：四角各一个金色 "L"。
   --------------------------------------------------------------------------
   ⚠️ 第一版写坏了，留个记录免得再踩：

   我原来用 `::before` / `::after` 画左上、右上两个角，再塞一个 `<i>` 元素
   用 `i::after` 去画第四个角 —— `i` 定位在左下，我又给 `i::after` 写 `right:0`，
   以为它会跑到取景框右边。**不会。** `::after` 的 `right:0` 是相对**它的
   包含块**算的，而那个包含块是 34×34 的 `i`，不是取景框。于是第四个角
   压根没画出来，页面上只剩左下角孤零零一个 L。

   更糟的是那个 L 我还手滑写成青色 `rgba(91,205,187,.34)`，另外两个角是金色 ——
   屏幕上就出现了一个**没有搭档的青色直角**，看着像渲染坏了。

   现在改成最直白的写法：**四条渐变 = 四条短边**，一次画在 `::before` 上，
   用 `background-position` 分别钉到"上左 / 上右 / 下左 / 下右"四个角，
   相邻的两条自然组成 L。没有嵌套定位、没有元素套元素，
   要加要减都只动这一处。
   -------------------------------------------------------------------------- */
.hp-member-frame {
  position: absolute;
  inset: 28px;
  z-index: -1;
  pointer-events: none;
  --corner: rgba(225,184,107,.42);
  --len: 34px;
  --w: 1px;
}
.hp-member-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  /**
   * 四条边，顺序与下面 background-position 一一对应：
   *   1 上边左段   2 上边右段   3 下边左段   4 下边右段
   * 每条都是"一条 1px 实线"，长度由 background-size 给。
   * 竖边则由相邻两条的端点错位形成 —— 这里改用横竖各画：见下方 size 列表。
   */
  background-image:
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner)),
    linear-gradient(var(--corner), var(--corner));
  background-repeat: no-repeat;
  /* 横×4（每个角一条横）+ 竖×4（每个角一条竖） */
  background-size:
    var(--len) var(--w), var(--w) var(--len),
    var(--len) var(--w), var(--w) var(--len),
    var(--len) var(--w), var(--w) var(--len),
    var(--len) var(--w), var(--w) var(--len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.hp-member-copy { position: relative; }
.hp-member-copy > .hp-member-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  color: #a9b8c5;
  font-size: 11px;
  letter-spacing: 2.4px;
}
.hp-member-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--hp-gold);
}
.hp-member-copy h2 {
  max-width: 620px;
  margin: 0;
  color: var(--hp-ink);
  font-size: clamp(32px, 3.1vw, 50px);
  line-height: 1.2;
  letter-spacing: -2px;
  font-weight: 620;
}
.hp-member-copy h2 em { font-style: normal; color: var(--hp-gold); }
.hp-member-copy > p {
  max-width: 560px;
  margin: 20px 0 0;
  color: #9dabb8;
  font-size: 14px;
  line-height: 1.9;
}
.hp-member-free {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 6px 13px;
  border: 1px solid rgba(114,215,195,.28);
  border-radius: 999px;
  color: #a8dbc9;
  font-size: 11.5px;
}
.hp-member-free::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hp-mint);
  box-shadow: 0 0 10px rgba(114,215,195,.8);
}
.hp-member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 34px; }
/* 主行动按钮：这是首页唯一的实心金按钮（顶部 hero 的主按钮是金色填充，
   这里是同一套语言的第二处，且全站只此两处）。 */
.hp-join-primary {
  min-width: 168px;
  padding: 14px 24px;
  border-radius: 3px;
  background: var(--hp-gold);
  color: #111820;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hp-join-primary:hover {
  transform: translateY(-2px);
  background: #ecc579;
  box-shadow: 0 14px 30px rgba(225,184,107,.18);
}
.hp-join-primary span { margin-left: 10px; }
.hp-join-secondary { color: #b3c0cb; font-size: 13px; text-decoration: none; }
.hp-join-secondary:hover { color: var(--hp-gold); }
.hp-member-note { margin: 18px 0 0; color: #5f7383; font-size: 11.5px; line-height: 1.7; }
.hp-member-note a { color: #8fa2b1; }
.hp-member-note a:hover { color: var(--hp-gold); }

/* ---- 右栏：账户功能清单（看起来像一张账户面板的一角） ---- */
.hp-member-panel {
  padding: 26px;
  background: linear-gradient(145deg, rgba(14,34,49,.72), rgba(5,16,27,.48));
  box-shadow: 0 28px 76px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  /* 与首屏那张数据卡同一种玻璃质感。没有它，这块面板会显得比旁边"平"一档。 */
  backdrop-filter: blur(16px);
}
.hp-member-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hp-line);
  color: #8194a4;
  font-size: 9px;
  letter-spacing: 1.8px;
}
.hp-member-panel-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-mint);
  box-shadow: 0 0 16px var(--hp-mint);
  animation: hp-pulse 2.4s ease-in-out infinite;
}
.hp-member-benefits { list-style: none; margin: 6px 0 0; padding: 0; }
.hp-member-benefits li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--hp-line);
}
.hp-member-benefits li:last-child { border-bottom: 0; padding-bottom: 4px; }
.hp-member-benefits b {
  position: relative;
  display: block;
  color: var(--hp-mint);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}
/* 对勾用两条边框拼出来，不引入图标字体或图片 */
.hp-member-benefits b::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--hp-mint);
  border-bottom: 1.5px solid var(--hp-mint);
  transform: rotate(-45deg);
}
.hp-member-benefits strong { display: block; color: #e7edf1; font-size: 14px; font-weight: 600; line-height: 1.5; }
.hp-member-benefits small { display: block; margin-top: 7px; color: #6f8391; font-size: 11.5px; line-height: 1.75; }
/* --------------------------------------------------------------------------
   面板里的两组清单：「注册后即可使用」（免费）与「会员方案解锁」。
   --------------------------------------------------------------------------
   2026-09-25：这块原来只有一组，标题写着「登录后可以使用」，把关注词 / 收件箱 /
   期刊分区都算在注册头上 —— 而它们是会员功能（`/watch`、`/inbox` 要求
   `membership_status === 'active'`）。分成两组之后，**免费那一组必须一眼看出
   比会员组轻**：勾是灰的、行更矮，免得读者以为两组是同一档东西。

   `.is-free` 只改颜色与行距，**不改结构** —— 两组共用 `.hp-member-benefits`
   的网格、对勾画法与分隔线，所以以后要调清单样式仍然只有一处。
   -------------------------------------------------------------------------- */
.hp-member-benefits.is-free li { padding: 12px 0; }
.hp-member-benefits.is-free b { color: #8194a4; }
.hp-member-benefits.is-free b::before { border-color: #56697a; }
.hp-member-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hp-line);
  color: #8194a4;
  font-size: 9px;
  letter-spacing: 1.8px;
}
.hp-member-group-head em { font-style: normal; color: var(--hp-gold); font-size: 10px; letter-spacing: .8px; }
.hp-member-quiet {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hp-line);
  color: #627686;
  font-size: 11.5px;
  line-height: 1.7;
}
.hp-member-quiet a { color: var(--hp-gold); text-decoration: none; }
.hp-member-quiet a:hover { color: var(--hp-gold); }

/* 页脚的会员行：与上面的品牌行、下面的数据源行同宽同边距，
   所以它读起来是页脚的一部分，而不是另贴的一条横幅。 */
.hp-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 34px;
  margin-bottom: 40px;
  padding: 22px 26px;
  border: 1px solid rgba(225,184,107,.16);
  background: linear-gradient(100deg, rgba(225,184,107,.055), rgba(255,255,255,.012) 62%);
}
.hp-join p { margin: 0; max-width: 620px; color: #c3cdd6; font-size: 13.5px; line-height: 1.8; }
.hp-join p b { color: var(--hp-ink); font-weight: 620; }
.hp-join p span { display: block; margin-top: 7px; color: #64798a; font-size: 11.5px; }
.hp-join-actions { display: flex; align-items: center; gap: 12px; }
.hp-join-actions a {
  padding: 10px 20px;
  border: 1px solid rgba(225,184,107,.36);
  border-radius: 3px;
  color: var(--hp-gold);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hp-join-actions a:first-child { background: var(--hp-gold); border-color: var(--hp-gold); color: #111820; font-weight: 650; }
.hp-join-actions a:first-child:hover { background: #ecc579; }
.hp-join-actions a:last-child { border-color: rgba(255,255,255,.14); color: #aebbc5; }
.hp-join-actions a:last-child:hover { border-color: rgba(255,255,255,.26); color: #eef2f4; }

@keyframes hp-header-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hp-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hp-signal-in {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hp-signal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes hp-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 72px 72px, 72px 72px; }
}
@keyframes hp-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hp-orbit-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes hp-pulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* 新品牌页脚全站共用。 */
.hp-footer {
  padding: 88px 74px 30px;
  border-top: 0;
  background: linear-gradient(to bottom, var(--navy-3) 0, #07131f 18px, #050f19 132px, #050f19 100%);
}
.hp-footer-main { display: grid; grid-template-columns: minmax(340px, 1.2fr) minmax(520px, .8fr); gap: 90px; padding-bottom: 74px; }
.hp-footer-word { margin: 0 0 28px; color: #b9c5ce; font-size: 11px; letter-spacing: 3.8px; }
.hp-footer-word i { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--hp-gold); box-shadow: 0 0 20px rgba(225,184,107,.4); }
.hp-footer-brand h2 { max-width: 560px; margin: 0; color: #e9edf0; font-size: clamp(28px, 3vw, 46px); line-height: 1.34; letter-spacing: -1.4px; font-weight: 580; }
.hp-footer-brand > span { display: block; margin-top: 24px; color: #617483; font-size: 12px; letter-spacing: .22em; }
.hp-footer-nav { align-self: start; display: flex; flex-wrap: wrap; align-content: flex-start; row-gap: 4px; }
.hp-footer-nav a { position: relative; flex: 0 0 33.333%; padding: 11px 14px 11px 0; color: #aebbc5; font-size: 12px; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.hp-footer-nav a::before { content: ''; position: absolute; left: -13px; top: 50%; width: 0; height: 1px; background: var(--hp-gold); transition: width .2s ease; }
.hp-footer-nav a:hover { color: #eef2f4; transform: translateX(8px); }
.hp-footer-nav a:hover::before { width: 7px; }
.hp-sources { padding: 28px 0 32px; }
.hp-sources > p { margin: 0 0 18px; color: #637786; font-size: 9px; letter-spacing: 2px; }
.hp-source-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.hp-source-mark { display: flex; min-width: 0; min-height: 64px; padding: 12px 10px; border: 1px solid rgba(184,202,217,.1); flex-direction: column; justify-content: center; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.hp-source-mark:hover { background: rgba(255,255,255,.025); border-color: rgba(225,184,107,.32); transform: translateY(-2px); }
.hp-source-mark b { color: #bbc7cf; font-size: 11px; line-height: 1.2; letter-spacing: .02em; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-source-mark small { margin-top: 7px; color: #526776; font-size: 8px; line-height: 1.35; }
.hp-footer-base { display: flex; justify-content: space-between; gap: 30px; padding-top: 24px; }
.hp-footer-base p { margin: 0; color: #506574; font-size: 10px; letter-spacing: .03em; }
/* © 行现在是页脚第一句（用户：「最右边的放到最左边去」），品牌字距跟着它走 */
.hp-footer-base p:first-child { letter-spacing: 1.2px; }

@media (max-width: 900px) {
  body[class*="home-preview"] header { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  body[class*="home-preview"] .header-brand-row { justify-content: center; padding-left: 0; }
  body[class*="home-preview"] .nav { justify-content: center; flex-wrap: wrap; }
  body[class*="home-preview"] .nav-ask { flex: 1 1 100%; justify-content: center; margin: 6px 0 0; }
  body[class*="home-preview"] .nav-ask .input[type="search"] { width: min(100%, 340px); }
  .hp-hero { grid-template-columns: 1fr; min-height: auto; gap: 56px; padding: 72px 36px; }
  .hp-signal { max-width: 560px; }
  .hp-member { grid-template-columns: 1fr; gap: 40px; padding: 72px 36px; }
  .hp-member-frame { inset: 20px; }
  .hp-member-panel { max-width: 620px; }
  .hp-join { align-items: flex-start; flex-direction: column; }
  .hp-proof, .hp-audience-grid, .hp-explore-grid, .hp-specials { grid-template-columns: 1fr; }
  .hp-path-grid { grid-template-columns: 1fr; gap: 36px; }
  .hp-proof > div { border-left: 0; }
  .hp-audiences, .hp-explore { padding: 84px 36px; }
  .hp-paths { padding: 78px 36px; }
  .hp-proof { padding: 26px 36px; }
  .hp-specials { padding: 70px 36px; }
  .hp-specials-intro { padding-right: 0; }
  .hp-footer { padding: 74px 36px 28px; }
  .hp-footer-main { grid-template-columns: 1fr; gap: 58px; }
  .hp-source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body[class*="home-preview"] header { margin-left: -10px; margin-right: -10px; }
  body[class*="home-preview"] .nav > a { padding: 7px 8px; font-size: 12.5px; }
  .hp-main { margin: 0 -22px; }
  .hp-hero { padding: 58px 22px; }
  .hp-hero h1 { font-size: 40px; letter-spacing: -2px; }
  .hp-lead { font-size: 15px; }
  .hp-signal-grid, .hp-audience-links { grid-template-columns: 1fr; }
  .hp-signal-grid a, .hp-audience-links a { padding: 13px 0; border-left: 0; border-top: 1px solid var(--hp-line); }
  .hp-audience-links a:first-child { border-top: 0; }
  .hp-audiences, .hp-explore { padding: 70px 22px; }
  .hp-paths { padding: 66px 22px; }
  .hp-path-grid { grid-template-columns: 1fr; }
  .hp-path-group-grid { grid-template-columns: 1fr; }
  .hp-path-group-head { min-height: 0; margin-bottom: 16px; }
  .hp-path-card { min-height: 250px; }
  .hp-proof { padding: 18px 22px; }
  .hp-specials { padding: 58px 22px; }
  .hp-audience { min-height: 0; padding: 28px 22px; }
  .hp-section-heading-inline { align-items: start; flex-direction: column; }
  .hp-disease-list { grid-template-columns: 1fr; }
  .hp-disease-list a:nth-child(odd) { border-right: 0; padding-left: 12px; }
  .hp-closing { padding: 90px 22px; }
  .hp-closing div { flex-direction: column; }
  .hp-member { padding: 60px 22px; }
  .hp-member-frame { inset: 12px; --len: 20px; }
  .hp-member-copy h2 { font-size: 30px; letter-spacing: -1.4px; }
  .hp-member-actions { flex-direction: column; align-items: stretch; }
  .hp-join-primary { width: 100%; }
  .hp-join { padding: 20px 22px; }
  .hp-join-actions { width: 100%; }
  .hp-join-actions a { flex: 1 1 auto; text-align: center; }
  .hp-footer { padding: 64px 22px 24px; }
  .hp-footer-main { padding-bottom: 50px; }
  .hp-footer-nav a { flex-basis: 50%; }
  .hp-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-footer-base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  body[class*="home-preview"] header,
  .hp-hero-copy,
  .hp-signal,
  .hp-proof > div,
  .hp-orbit,
  .hp-signal-head i,
  .hp-hero::before { animation: none !important; }
  .hp-audience,
  .hp-audience::after,
  .hp-disease-list a,
  .hp-hero-actions a { transition: none !important; }
  /* 注册邀请里的脉冲小点与按钮位移也都属于装饰性动效，一并停掉 */
  .hp-member-panel-head i { animation: none !important; }
  .hp-join-primary { transition: none !important; }
}

/* ========================================================================== 
   全站新版视觉适配
   首页保留专用 hero；以下规则统一其它页面的骨架与高频组件。
   ========================================================================== */
body {
  background:
    radial-gradient(circle at 76% 3%, rgba(28, 75, 91, .16), transparent 28%),
    radial-gradient(circle at 8% 24%, rgba(177, 132, 55, .055), transparent 24%),
    var(--navy);
}

/**
 * ## ⚠️ 这里必须是 `body > header`，不能只写 `header`
 *
 * 这一整套规则是给**站点页头**用的（那一条品牌行 + 主导航）：
 * 它用 `display: grid` 把品牌和导航摆成两列，还把它拉宽到 1420px、
 * 用 `translate: -50%` 居中 —— 这些只对页头成立。
 *
 * 原来写的是裸的 `header`，于是页面上**任何** `<header>` 都会被套上这一套。
 * 账户概览页里那个 `<header class="acct-head">`（「你好，admin」那一块）
 * 正好中招：它也是 header，被强行变成两列栅格，
 * 三个子元素（eyebrow / h1 / 副标题）被塞进两列里错位，
 * **h1 直接被挤出可视区域**，看起来就是"标题凭空消失"。
 *
 * 这是个一直存在的隐患 —— 只是原来 h1 字号大、还撑得住，
 * 用户看到的是"字太大"；等我把字号收小，它才彻底被挤没，
 * 暴露成"标题不见了"。
 *
 * 判据：站点页头永远是 `.container` 的**直接子元素**（见 `layout.js`
 * 的 `<div class="container"><header>…`），而页面内部的 `<header>`
 * 都在更深的层级里。所以 `>` 这一层就够区分，不需要给页头加类名。
 */
body:not([class*="home-preview"]) > .container > header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 34px;
  /* 脱离内页 1120px 阅读容器，使用与首页相同的 1420px 页头画布。 */
  width: min(1420px, 100vw);
  left: 50%;
  margin: 0;
  translate: -50% 0;
  padding: 18px 26px;
  background: var(--navy-3);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  animation: hp-header-in .65s cubic-bezier(.2,.75,.25,1) both;
}

/* 内页导航与正文外侧使用同一底色，避免顶部和两侧出现色块断层。 */
body:not([class*="home-preview"]) { background: var(--navy-3); }

/* 内页正文与统一页头之间的距离属于正文排版，不改变页头自身尺寸。
   ⚠️ 同样必须是 `> .container > header`：写成裸 `header + *` 时，
   账户页里 `.acct-head` 的**下一个兄弟**（四张统计卡的栅格）
   会被莫名加 34px 上边距。 */
body:not([class*="home-preview"]) > .container > header + * { margin-top: 34px; }
body:not([class*="home-preview"]) .header-brand-row { padding: 0 0 0 22px; flex-wrap: nowrap; }
body:not([class*="home-preview"]) .header-brand-row > .brand-tagline { display: none; }
body:not([class*="home-preview"]) .brand-lockup { gap: 9px; margin: 0; padding: 0; border: 0; }
body:not([class*="home-preview"]) .nav { min-width: 0; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 1px; margin: 0; padding: 0; border: 0; }
body:not([class*="home-preview"]) .nav > a { padding: 9px 10px; border: 0; border-radius: 0; background: transparent; color: #9dabb7; font-size: 12px; font-weight: 450; white-space: nowrap; }
body:not([class*="home-preview"]) .nav > a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin: 5px auto -6px;
  background: var(--hp-gold, #e1b86b);
  transition: width .2s ease;
}
body:not([class*="home-preview"]) .nav > a:hover { color: #f0f3f5; background: transparent; }
body:not([class*="home-preview"]) .nav > a:hover::after { width: 14px; }
/* 页头在所有页面保持与首页完全一致；当前栏目不改变导航外观。 */
body:not([class*="home-preview"]) .nav > a.active { color: #9dabb7; background: transparent; border-bottom: 0; font-weight: 450; }
body:not([class*="home-preview"]) .nav > a.active::after { width: 0; }
body:not([class*="home-preview"]) .nav > a.active:hover { color: #f0f3f5; }
body:not([class*="home-preview"]) .nav > a.active:hover::after { width: 14px; }
body:not([class*="home-preview"]) .nav-ask { gap: 0; margin-left: 16px; }
body:not([class*="home-preview"]) .nav-ask .input[type="search"] { width: 188px; height: 34px; padding: 0 38px 0 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.045); box-shadow: none; color: #dfe6eb; font-size: 11.5px; }
body:not([class*="home-preview"]) .nav-ask .input[type="search"]::placeholder { color: #607484; }
body:not([class*="home-preview"]) .nav-ask .input[type="search"]:focus { outline: 1px solid rgba(225,184,107,.55); outline-offset: 0; }
body:not([class*="home-preview"]) .nav-ask .search-btn { width: 30px; height: 30px; margin-left: -32px; border-radius: 50%; background: transparent; color: var(--hp-gold, #e1b86b); }
body:not([class*="home-preview"]) .nav-ask .search-btn:hover { background: rgba(225,184,107,.12); color: var(--hp-gold, #e1b86b); }

/* 页面主体：去厚重卡片感，改成细线与轻底色。 */
section.lv1, section.lv2, section.lv3, section.lv4,
.card, .trial-row, .pg-card, .gd-gap, .health-source,
.facets, .facets-hover, .report-card, .calendar-card {
  border-radius: 0;
  box-shadow: none;
}
section.lv1, section.lv2 { background: rgba(8, 24, 38, .72); border-color: rgba(184,202,217,.1); }
section.lv3, section.lv4 { background: rgba(6, 19, 31, .46); border-color: rgba(184,202,217,.075); }
.card, .trial-row, .pg-card, .gd-gap, .health-source, .report-card, .calendar-card {
  background: rgba(6, 19, 31, .62);
  border-color: rgba(184,202,217,.1);
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}
.card:hover, .trial-row:hover, .pg-card:hover, .gd-gap:hover, .report-card:hover {
  transform: translateY(-2px);
  border-color: rgba(225,184,107,.25);
  background: rgba(9, 28, 44, .8);
}
.section-head { border-bottom-color: rgba(184,202,217,.1); }
.eyebrow { color: #d6ad64; letter-spacing: .19em; }

/* 筛选与控件：更薄、更直、更接近新版首页。 */
.facets, .facets-hover { background: rgba(5, 17, 28, .62); border-color: rgba(184,202,217,.1); }
.chip, .btn, .sort-opt, .search-btn, button {
  border-radius: 2px;
}
.chip { background: rgba(255,255,255,.025); border-color: rgba(184,202,217,.11); }
.chip:hover, .chip.on { background: rgba(225,184,107,.09); border-color: rgba(225,184,107,.3); }
.btn { box-shadow: none; }
.input, select { border-radius: 2px; }

/* 全站页脚铺满容器边缘，与新版首页一致。 */
.hp-footer {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0 0 -60px;
  padding-left: max(74px, calc((100vw - 1420px) / 2 + 22px));
  padding-right: max(74px, calc((100vw - 1420px) / 2 + 22px));
  translate: -50% 0;
}
body[class*="home-preview"] .hp-footer { margin-top: 0; margin-bottom: 0; }

@media (max-width: 900px) {
  body:not([class*="home-preview"]) > .container > header { width: 100vw; grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  body:not([class*="home-preview"]) .header-brand-row { justify-content: center; }
  body:not([class*="home-preview"]) .nav { justify-content: center; flex-wrap: wrap; }
  body:not([class*="home-preview"]) .nav-ask { flex: 1 1 100%; justify-content: center; margin: 6px 0 0; }
}
@media (max-width: 620px) {
  body:not([class*="home-preview"]) > .container > header { width: 100vw; padding-inline: 14px; }
  body:not([class*="home-preview"]) .nav > a { padding: 7px 8px; font-size: 12.5px; }
  .hp-footer { padding-left: 22px; padding-right: 22px; }
}

/* ==========================================================================
   全站浅色主题
   与深色主题共用结构和排版，只切换表面、文字、边线与强调色。
   ========================================================================== */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-left: 9px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #9dabb7;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle span { color: #e1b86b; font-size: 14px; line-height: 1; }
.theme-toggle em { font-style: normal; }
.theme-toggle:hover { color: #f2f5f7; border-color: rgba(225,184,107,.35); background: rgba(225,184,107,.08); }

html[data-theme="light"] {
  color-scheme: light;
  --navy: #ffffff;
  --navy-2: #ffffff;
  --navy-3: #ffffff;
  --navy-4: #f6f8f9;
  --white: #17212a;
  --slate: #596a76;
  /* 原来 `#6a7983` 在白底上 4.49:1 —— 卡在 4.5 门槛下，`.hero-stat span`、
     `.big-score small` 这些 11–12px 的小字全都差一点点。压深一档到 4.96:1。 */
  --slate-2: #63727d;
  --hair: rgba(28,45,57,.13);
  --hair-2: rgba(28,45,57,.085);
  --champagne: #c9a96e;
  --champagne-2: #a87928;
  --gold-deep: #c58b25;
  /* 链接：深色主题那个亮金在白底上 1.64:1，换成深金 5.32:1（见 `:root` 里的说明） */
  --link: #8b6425;
  --link-hover: #6f4f18;
  --line-gold: rgba(201,169,110,.38);
  --hp-ink: #17212a;
  --hp-muted: #637480;
  --hp-line: rgba(28,45,57,.12);
  --hp-gold: #e1b86b;
  --hp-mint: #72d7c3;
  --ok-bg: #eaf6f0;
  --ok-fg: #246f55;
  --err-bg: #fff0f1;
  --err-fg: #a34f5a;
  --warn-bg: #fff7df;
  --warn-fg: #8b6822;
  --idle-bg: #eef1f3;
  --idle-fg: #586873;
  /**
   * 滚动条：浅色主题下**不能沿用深色那一套**。
   *
   * `rgba(255,255,255,.16)` 在白底上等于隐形 —— 那是深色页面靠白色提亮滑块的做法，
   * 换到白底就得反过来：用深色墨色低透明度画出滑块。
   * 悬停的金色也一起加深（`#b98424` 而不是深色主题那个亮金），
   * 否则亮金压在白色轨道上对比度不够，等于没有反馈。
   * 轨道同样保持透明，白底面板里才不会出现一条灰带。
   */
  --scroll-thumb:        rgba(28, 45, 57, .2);
  --scroll-thumb-hover:  rgba(169, 116, 34, .55);
  --scroll-thumb-active: rgba(169, 116, 34, .82);
  --scroll-track:        transparent;
  --scroll-size:         10px;
}
html[data-theme="light"] body {
  color: #17212a;
  background: #fff;
  /**
   * `color-scheme` 已经写在上面那条浅色 token 规则里，但滚动条的**底色**
   * 还要再钉一次：Chromium 会把 `html` 上从深色主题继承来的
   * `scrollbar-color` 用在**页面级**滚动条上，浅色主题下如果只靠变量覆盖，
   * 有些子元素（自带 `color-scheme` 的表单控件）仍会解析成深色值。
   * 这里显式重申一次薄档 + 浅色配色，页面级滚动条在浅色主题下也是深色滑块。
   */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
html[data-theme="light"] body[class*="home-preview"] {
  background: #fff;
}
/* ⚠️ 同样只针对站点页头，不用裸 `header`（理由见上面那段长注释）。 */
html[data-theme="light"] body[class*="home-preview"] header,
html[data-theme="light"] body:not([class*="home-preview"]) > .container > header {
  background: #fff;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="light"] .hp-main,
html[data-theme="light"] .hp-hero { background: #fff; }

/* --------------------------------------------------------------------------
   浅色主题下的注册邀请。
   --------------------------------------------------------------------------
   深色那套是靠"更深 + 金色角标"来强调的，浅色页面上这两招都不成立
   （白色上再浅就没有边界了）。所以浅色换成**反向做法**：
   浅底 + 细描边 + 略深的金，仍然不引入新的颜色。

   文字色**逐个写死**而不是靠变量：`.hp-member-*` 里的浅色文字
   （`#9dabb8` `#e7edf1` `#6f8391` 这些）是直接写死的十六进制，
   不跟着主题走 —— 只改背景会让文字全糊在白底上。
   -------------------------------------------------------------------------- */
html[data-theme="light"] .hp-member { background: #f4f6f8; }
html[data-theme="light"] .hp-member-frame { --corner: rgba(197,139,37,.42); }
html[data-theme="light"] .hp-member-copy > .hp-member-label { color: #a87928; }
html[data-theme="light"] .hp-member-copy h2 { color: #17212a; }
html[data-theme="light"] .hp-member-copy h2 em { color: var(--gold-deep); }
html[data-theme="light"] .hp-member-copy > p { color: #55646f; }
html[data-theme="light"] .hp-member-free { border-color: rgba(31,122,104,.28); color: #1f7a68; }
html[data-theme="light"] .hp-member-free::before { background: #1f7a68; box-shadow: none; }
html[data-theme="light"] .hp-join-secondary { color: #55646f; }
html[data-theme="light"] .hp-member-note { color: #6d7c87; }
html[data-theme="light"] .hp-member-note a { color: #3f5566; }
html[data-theme="light"] .hp-member-panel {
  background: #fff;
  border: 1px solid rgba(28,45,57,.1);
  box-shadow: 0 22px 55px rgba(9,20,31,.07);
  backdrop-filter: none;
}
html[data-theme="light"] .hp-member-panel-head { border-bottom-color: rgba(28,45,57,.1); color: #6d7c87; }
html[data-theme="light"] .hp-member-panel-head i { background: #1f7a68; box-shadow: none; }
html[data-theme="light"] .hp-member-benefits li { border-bottom-color: rgba(28,45,57,.08); }
html[data-theme="light"] .hp-member-benefits b { color: #1f7a68; }
html[data-theme="light"] .hp-member-benefits b::before { border-color: #1f7a68; }
html[data-theme="light"] .hp-member-benefits strong { color: #17212a; }
html[data-theme="light"] .hp-member-benefits small { color: #63727d; }
/* 两组清单在浅色下同样要分得开：免费组用灰勾，会员组保持青勾（上面那几条）。 */
html[data-theme="light"] .hp-member-benefits.is-free b { color: #63727d; }
html[data-theme="light"] .hp-member-benefits.is-free b::before { border-color: #9aa9b3; }
html[data-theme="light"] .hp-member-group-head { border-bottom-color: rgba(28,45,57,.1); color: #6d7c87; }
html[data-theme="light"] .hp-member-group-head em { color: #7a5a1e; }
html[data-theme="light"] .hp-member-quiet { border-top-color: rgba(28,45,57,.1); color: #6d7c87; }
html[data-theme="light"] .hp-member-quiet a { color: #8b6425; }
/* 页脚那条：浅色下底色本来就浅，只用描边和金色文字区分 */
html[data-theme="light"] .hp-join { border-color: rgba(197,139,37,.35); background: rgba(197,139,37,.05); }
html[data-theme="light"] .hp-join p { color: #3f4d58; }
html[data-theme="light"] .hp-join p b { color: #17212a; }
html[data-theme="light"] .hp-join p span { color: #6d7c87; }
html[data-theme="light"] .hp-join-actions a { border-color: rgba(197,139,37,.45); color: #8b6425; }
html[data-theme="light"] .hp-join-actions a:first-child { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
html[data-theme="light"] .hp-join-actions a:first-child:hover { background: #d79a2c; }
html[data-theme="light"] .hp-join-actions a:last-child { border-color: rgba(28,45,57,.2); color: #3f4d58; }

/**
 * 字标是**双色**的（用户 2026-09-25）：「CELL」跟图标的 C 弧同色，
 * 「IN」跟图标那个金点同色（香槟金 #c9a96e）。
 *
 * ⚠️ 主色随主题变（深色 #f4f6f8 / 浅色 #17212a），**滤镜做不到精确的两色** ——
 * 早期版本用 brightness(0) 刷黑再 clip-path 叠回金色，那种做法既脆又只能凑合。
 * 所以改成生成**两张同版式的 PNG**（tools/gen-brand-word.ps1 一次出两张，
 * 字形/字距/画布完全一致），这里按主题切 display，切换时不会有任何位移。
 */
html[data-theme="light"] .brand-word:not(.brand-word-light) { display: none; }
html[data-theme="light"] .brand-word-light { display: block; }
html[data-theme="light"] .brand-mark path { stroke: #17212a; }
html[data-theme="light"] .brand-divider { background: rgba(28,45,57,.28); }
html[data-theme="light"] body[class*="home-preview"] .nav > a,
html[data-theme="light"] body:not([class*="home-preview"]) .nav > a,
html[data-theme="light"] body:not([class*="home-preview"]) .nav > a.active { color: #111820; }
html[data-theme="light"] body[class*="home-preview"] .nav > a:hover,
html[data-theme="light"] body:not([class*="home-preview"]) .nav > a:hover,
html[data-theme="light"] body:not([class*="home-preview"]) .nav > a.active:hover { color: #000; }
html[data-theme="light"] .nav-ask .input[type="search"],
html[data-theme="light"] body[class*="home-preview"] .nav-ask .input[type="search"],
html[data-theme="light"] body:not([class*="home-preview"]) .nav-ask .input[type="search"] {
  border-color: rgba(28,45,57,.16);
  background: rgba(255,255,255,.62);
  color: #17212a;
}
html[data-theme="light"] .nav-ask .input[type="search"]::placeholder { color: #89959d; }
html[data-theme="light"] .theme-toggle { border-color: #dce2e6; background: #fff; color: #4f606b; }
html[data-theme="light"] .theme-toggle:hover { color: #17212a; border-color: #c9a96e; background: #fff; }

html[data-theme="light"] .hp-hero { color: #17212a; }
html[data-theme="light"] .hp-hero { border-bottom: 0; }
html[data-theme="light"] .hp-start { background: #fff; }
html[data-theme="light"] .hp-kicker,
html[data-theme="light"] .hp-hero-copy > p,
html[data-theme="light"] .hp-section-head p,
html[data-theme="light"] .hp-audience-copy p,
html[data-theme="light"] .hp-signal-head p { color: #637480; }
html[data-theme="light"] .hp-scope-list span { color: #536671; }
html[data-theme="light"] .hp-hero h1,
html[data-theme="light"] .hp-section-head h2,
html[data-theme="light"] .hp-audience h3,
html[data-theme="light"] .hp-closing h2 { color: #15232d; }
html[data-theme="light"] .hp-signal,
html[data-theme="light"] .hp-audience,
html[data-theme="light"] .hp-disease-board,
html[data-theme="light"] .hp-modality-board {
  background: #fff;
  border: 0;
  box-shadow: 0 18px 50px rgba(28,45,57,.055);
}
html[data-theme="light"] .hp-signal { box-shadow: 0 26px 65px rgba(28,45,57,.10); }
html[data-theme="light"] .hp-proof,
html[data-theme="light"] .hp-audience-links,
html[data-theme="light"] .hp-disease-list a,
html[data-theme="light"] .hp-signal-grid { border-color: rgba(28,45,57,.12); }
html[data-theme="light"] .hp-proof strong,
html[data-theme="light"] .hp-signal-grid b,
html[data-theme="light"] .hp-disease-list a { color: #24333d; }
html[data-theme="light"] .hp-action-secondary { border-color: rgba(28,45,57,.18); color: #41535f; }
/* 浅色主题下这个开关的浅底要**往下压一档**（白底上再叠白底就看不见那一段了）。
   ⚠️ 必须排在深色那套之后（本文件靠后位置），否则同权重下会被上面盖掉。 */
html[data-theme="light"] .ask-mode-seg.selected { background: rgba(28, 45, 57, .07); border-color: rgba(28, 45, 57, .22); }
html[data-theme="light"] .ask-mode-seg.premium.selected { background: rgba(197, 139, 37, .12); border-color: rgba(197, 139, 37, .5); }
html[data-theme="light"] .hp-proof > div { background: #f7f9fa; }
/* ⚠️ 这里原来还有一条 `.hp-proof span { color: rgba(28,45,57,.16) }`，
   与下面这条同优先级、且被后者覆盖 —— 是条**永远不会生效的死代码**
   （而且那个值本身在白底上只有约 1.35:1，真生效了反而更糟）。已删除。 */
html[data-theme="light"] .hp-proof span { color: #b17d27; }
html[data-theme="light"] .hp-proof p,
html[data-theme="light"] .hp-audience-eyebrow,
html[data-theme="light"] .hp-audience-links a { color: #637480; }
html[data-theme="light"] .hp-audience-links a:hover,
html[data-theme="light"] .hp-audience-links a.primary { color: #17212a; }
html[data-theme="light"] .hp-audiences { background: #fbfcfc; }
html[data-theme="light"] .hp-paths { background: linear-gradient(to bottom, rgba(248,250,251,0) 0, #f8fafb 14%, #f8fafb 86%, rgba(248,250,251,0) 100%); }
html[data-theme="light"] .hp-path-card { background: #fff; box-shadow: 0 14px 38px rgba(28,45,57,.055); }
html[data-theme="light"] .hp-path-card:hover { background: #fff; box-shadow: 0 20px 48px rgba(28,45,57,.085); }
html[data-theme="light"] .hp-path-card h3 { color: #172630; }
html[data-theme="light"] .hp-path-card > p,
html[data-theme="light"] .hp-path-card > small { color: #657883; }
html[data-theme="light"] .hp-path-card a { color: #536873; }
html[data-theme="light"] .hp-path-card a:first-child { color: #9c6b1d; }
html[data-theme="light"] .hp-path-featured { background: linear-gradient(145deg, #fff8eb, #fff 62%); }
html[data-theme="light"] .hp-specials { background: #f8fafb; border-color: #e3e8eb; }
html[data-theme="light"] .hp-specials-intro h2,
html[data-theme="light"] .hp-special-card strong { color: #172630; }
html[data-theme="light"] .hp-specials-intro > span,
html[data-theme="light"] .hp-special-card p,
html[data-theme="light"] .hp-special-card span { color: #627580; }
html[data-theme="light"] .hp-special-card { background: linear-gradient(145deg, #fff8eb, #fff 62%); box-shadow: 0 16px 42px rgba(28,45,57,.055); }
html[data-theme="light"] .hp-special-access { background: linear-gradient(145deg, #effaf7, #fff 62%); }
html[data-theme="light"] .hp-special-card:hover { box-shadow: 0 22px 52px rgba(28,45,57,.09); }
html[data-theme="light"] .hp-explore { background: radial-gradient(ellipse at 50% 42%, #f7f9fa 0, rgba(255,255,255,0) 74%); }
html[data-theme="light"] .hp-board-title span { color: #172630; }
html[data-theme="light"] .hp-board-title small { color: #687b87; }
html[data-theme="light"] .hp-modality-cloud a { color: #334650; border-color: #dfe5e8; }
html[data-theme="light"] .hp-disease-list a,
html[data-theme="light"] .hp-modality-cloud a { background: #f6f8f9; }
html[data-theme="light"] .hp-modality-cloud a:hover { background: #fff7e8; }
html[data-theme="light"] .hp-board-cta { color: #455965; border-color: #dfe5e8; }
html[data-theme="light"] .hp-closing a { color: #4f606a; border-color: rgba(28,45,57,.16); }
html[data-theme="light"] .hp-disease-list a:hover { background: rgba(154,106,30,.06); }
html[data-theme="light"] .hp-orbit { border-color: rgba(33,139,124,.18); }
html[data-theme="light"] .hp-orbit::after { box-shadow: 0 0 14px rgba(114,215,195,.5); }

/* 账户入口：沿用全站品牌色，表单保持简洁、清楚。 */
.auth-page { min-height: 62vh; display: grid; place-items: center; padding: 72px 0 96px; }
/* 投影撤掉（`0 30px 90px rgba(0,0,0,.2)`）：它是给「浮起来的对话框」用的，
   而登录面板就落在页面里、下面还有页脚 —— 一层大范围灰雾只会让页面变脏。
   分块改由上面那条 .auth-panel 的 1px 线承担（见 `section.lv1, …` 下方）。 */
.auth-panel { width: min(860px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; background: linear-gradient(145deg, rgba(15,35,51,.84), rgba(7,19,31,.82)); }
.auth-intro { padding: 52px 48px; background: radial-gradient(circle at 10% 10%, rgba(225,184,107,.12), transparent 54%); }
.auth-intro h1 { margin: 14px 0 18px; font-size: clamp(30px, 3vw, 46px); line-height: 1.2; }
.auth-intro > p:last-child { color: #8294a1; line-height: 1.8; }
.auth-form { display: grid; align-content: center; gap: 20px; padding: 48px; background: rgba(255,255,255,.018); }
.reset-form { display: grid; gap: 16px; }
.privacy-copy { align-content: start; line-height: 1.8; }
.auth-form label { display: grid; gap: 9px; color: #b5c1ca; font-size: 13px; }
.auth-form .input { width: 100%; min-height: 46px; }
.auth-hint, .auth-switch { margin: -8px 0 0; color: #718492; font-size: 12px; line-height: 1.65; }
.auth-switch { margin: 2px 0 0; text-align: center; }
.auth-switch a { color: var(--hp-gold); }
.auth-error { margin: 0; padding: 12px 14px; color: #ffd5d5; background: rgba(180,55,55,.16); border-left: 2px solid #d66; }
/* 验证码一行：输入框占满剩余宽度，按钮不参与换行（窄屏才落到下一行） */
.auth-code { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.auth-code label { flex: 1 1 180px; min-width: 0; }
.auth-code-btn { flex: 0 0 auto; min-height: 46px; padding: 0 16px; white-space: nowrap; }
.auth-code-btn:disabled { cursor: default; opacity: .62; }
.auth-hint-bad { color: #f0a9a9; }
.auth-submit { min-height: 46px; justify-content: center; }

/**
 * 登录浮层：未登录点「下一页 →」弹出来的那个框（用户 2026-09-25）。
 *
 * 复用 `.auth-form` 那一套（标签、`.input`、`.auth-error`、`.auth-switch`），
 * 这里只加**浮层本身**需要的东西：遮罩、面板、关闭键、锁滚动。
 * 颜色一律走 `:root` 里的 token，浅色主题的覆盖写在下面那一段里。
 *
 * ⚠️ `[hidden]` 那条不能省：`.login-modal` 是 `display: grid`，
 * 会盖掉浏览器给 `hidden` 的默认 `display: none` —— 少了它浮层一开始就挡在页面上。
 */
.login-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.login-modal[hidden] { display: none; }
.login-modal-veil { position: absolute; inset: 0; background: rgba(3,9,15,.74); }
.login-modal-box { position: relative; width: min(420px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 34px 32px 30px; background: linear-gradient(145deg, rgba(15,35,51,.99), rgba(7,19,31,.99)); border: 1px solid var(--line-gold); border-radius: var(--radius); box-shadow: var(--shadow); }
.login-modal-box h2 { margin: 10px 0 8px; font-size: 22px; line-height: 1.35; }
.login-modal-lead { margin: 0; color: #8294a1; font-size: 13px; line-height: 1.8; }
.login-modal-form { display: grid; gap: 16px; margin-top: 22px; }
.login-modal-form label { display: grid; gap: 8px; color: #b5c1ca; font-size: 13px; }
.login-modal-form .input { width: 100%; min-height: 44px; }
.login-modal-submit { min-height: 46px; justify-content: center; }
.login-modal-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid var(--hair); border-radius: 50%; background: transparent; color: #9aa8b6; cursor: pointer; font-size: 12px; line-height: 1; }
.login-modal-x:hover { color: var(--white); border-color: var(--line-gold); }
/* 浮层打开时锁住页面滚动，否则背景会跟着滚（窄屏尤其明显） */
body.login-modal-open { overflow: hidden; }
.account-panel { grid-template-columns: 1fr auto; align-items: center; }
.account-actions { display: flex; align-items: center; gap: 12px; padding: 48px; }
.account-actions form { margin: 0; }
.account-role { display: inline-flex; width: fit-content; margin-top: 14px; padding: 5px 9px; border-radius: 999px; color: var(--hp-gold); background: rgba(225,184,107,.1); font-size: 11px; }

/* 会员方案：公开页和账户页共用，同步适配深浅主题。 */
.pricing-public { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 68px 0 96px; }
.pricing-page { min-width: 0; }
.pricing-head { max-width: 900px; margin: 0 0 34px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.pricing-head h1 { margin: 10px 0 12px; font-size: clamp(30px, 3vw, 44px); line-height: 1.2; letter-spacing: -.025em; }
.pricing-head > p:last-child { margin: 0; color: #8395a1; font-size: 15px; line-height: 1.85; }
.pricing-message { margin: 0 0 22px; padding: 13px 16px; color: var(--ok-fg); background: var(--ok-bg); }
.pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: stretch; }
/**
 * ## 四档必须**排在一排**（用户 2026-09-24：「会员方案的介绍页面，4个档，
 *    要呈现在一排里」）
 *
 * 原来这里写死 `repeat(3,…)`，而 `PLAN_KEYS` 是 free / plus / pro / max 四档 ——
 * Max 被挤到第二行单开一张（截图里就是"3 + 1"）。
 *
 * 用 `repeat(4,…)` 而不是 `auto-fit`：`auto-fit` 在 1320px 里也刚好放 4 张，
 * 但窗口一窄就退成 3 张 + 1 张，又回到用户报的那个样子。
 * 显式四列 + 显式断点，只允许 **4 → 2 → 1**，永远不出现 3。
 */
@media (max-width: 1180px) { .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* 影子换成一条头发线：`0 22px 62px` 那种大范围静态投影在浅色主题下
   就是一层灰雾（用户：「这些所谓的阴影真的丑，很不舒服」）。
   但线不能省 —— 浅色主题下卡片是白底、页面也是白底，没有它三档方案会糊在一起。
   「能少就少」指的是**多余的**线，不是**唯一那条**分块的线。 */
.pricing-card { position: relative; display: flex; flex-direction: column; min-height: 640px; padding: 30px; border: 1px solid var(--hair); background: rgba(8,22,35,.56); transition: opacity .34s ease, filter .34s ease, border-color .34s ease, background .34s ease, box-shadow .34s ease; }
/**
 * ## 四档的「亮起来」动效（用户 2026-09-25）
 *
 * 原话：「4 个档次，做成动画效果，鼠标移动到哪一种，这一种方案就亮起来，
 * 其余三种方案作为背景板」。随后用户当场补了三条：
 *
 *   1. 「免费版，不用动画效果」→ 后来更正为
 *      「**免费版的除了无法被选中，效果跟其他的方案同步**」：
 *      免费档**照常变暗**（它也是背景板之一），只是**永远不会亮起来** ——
 *      即"能不能被选中"是它与付费三档唯一的区别。
 *      所以触发条件是 `:has(任意一张卡:hover)`（四档都算），
 *      而"回亮"那条选择器多一个 `:not(.pricing-card-static)`，把免费档排除在外。
 *      指针停在免费版上时：四张一起退成背景板、谁都不亮 —— 这正是
 *      "免费版无法被选中"该有的样子（而不是让免费版一枝独秀地亮着）。
 *
 *   2. 「选中的内容要很清晰，目前的版本选中之后很模糊」——
 *      上一版给亮起的那张加了 `transform: translateY(-8px) scale(1.028)`。
 *      **缩放会把整张卡的文字交给 GPU 重新栅格化**，在 125% 显示的 Windows 上
 *      就是一片糊（文字越细越明显）。现在亮起来只改
 *      **颜色 / 描边 / 投影 / 顶部金线**，一个 `transform` 都不碰 ——
 *      文字永远按设备像素原样绘制，同时把正文提亮一档，
 *      让"选中"靠**对比**读出来，而不是靠模糊衬托。
 *
 *   3. 「深色主题效果很好，但是浅色的不舒服」—— 浅色那一套另见文件下方
 *      的 `html[data-theme="light"]` 段落（实色降级 + 一条金线，不用半透明与灰雾投影）。
 */
@media (hover: hover) {
  /* 任意一张卡被悬停（**含免费版**）→ 四张一起退成背景板 */
  .pricing-grid:has(.pricing-card:hover) .pricing-card { opacity: .38; filter: saturate(.6) brightness(.72); }
  /* 只有付费三档能被"选中"：指针那一张回亮。免费档没有这条 —— 它只暗不亮 */
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover { z-index: 2; opacity: 1; filter: none; border-color: rgba(225,184,107,.66); background: linear-gradient(150deg, rgba(225,184,107,.19), rgba(8,22,35,.78) 58%); box-shadow: 0 0 0 1px rgba(225,184,107,.28), 0 24px 56px rgba(0,0,0,.5); }
  /* 亮起来的那一张：正文整体提亮，保证「选中」是一眼可读的 */
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover h2 { color: var(--champagne-2); }
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li { color: #e9eff4; }
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li.excluded { color: #8b9ca8; }
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover .pricing-price b { color: #fff; }
  /* 按钮跟着变成金色主按钮（原来这是 `featured` 档的专属样式） */
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover .pricing-btn:not(.primary) { color: #07131f; background: var(--champagne-2); border-color: var(--champagne-2); }
}
/**
 * 顶部那条金线：用**高度动画**代替"抬起"。
 * 抬起来（transform）会重采样文字，而这条线只是画在卡片上沿 —— 不重排、不重采样。
 */
.pricing-card::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 0; background: linear-gradient(90deg, rgba(225,184,107,0), var(--champagne-2), rgba(225,184,107,0)); transition: height .34s ease; pointer-events: none; }
@media (hover: hover) {
  .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover::before { height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card, .pricing-card h2, .pricing-card::before { transition: none; }
}
.pricing-card h2 { margin: 0; font-size: 25px; transition: color .38s ease; }
.pricing-price { display: flex; align-items: baseline; gap: 7px; margin: 24px 0 26px; }
.pricing-price b { color: #f0f4f6; font-size: 48px; font-weight: 570; line-height: 1; }
.pricing-price span { color: #718493; font-size: 12px; }
.pricing-card ul { display: grid; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; }
.pricing-card li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 7px; align-items: start; min-height: 42px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); color: #b6c3cc; font-size: 12.5px; line-height: 1.65; }
.pricing-card li:last-child { border-bottom: 0; }
.pricing-card li i { font-style: normal; font-weight: 700; }
.pricing-card li.included i { color: var(--champagne-2); }
.pricing-card li.planned { color: #91a8b7; }
.pricing-card li.planned i { color: var(--teal-2); }
.pricing-card li.excluded { color: #566b79; }
.pricing-card li.excluded i { color: #536875; }
.pricing-card form { margin: auto 0 0; }
.pricing-btn, .pricing-current { width: 100%; min-height: 44px; margin-top: auto; justify-content: center; }
.pricing-current { display: grid; place-items: center; color: var(--ok-fg); background: var(--ok-bg); font-size: 12px; }
.pricing-current.pending { color: var(--warn-fg); background: var(--warn-bg); }
.pricing-explain { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 42px; padding: 34px 4px; }
.pricing-explain > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.pricing-explain span { grid-row: 1 / 3; color: var(--champagne-2); font-size: 11px; }
.pricing-explain h3 { margin: 0 0 8px; font-size: 15px; }
.pricing-explain p { margin: 0; color: #718493; font-size: 12.5px; line-height: 1.8; }
.pricing-note { margin: 0; padding-top: 18px; color: #667b89; font-size: 11.5px; line-height: 1.8; }
.admin-plan-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 30px; }
.admin-plan-summary article { display: flex; align-items: baseline; gap: 16px; padding: 20px; background: rgba(255,255,255,.025); }
.admin-plan-summary b { color: var(--champagne-2); font-size: 28px; }
.admin-plan-summary span { color: #8294a1; font-size: 12px; }
.admin-subtitle { margin: 34px 0 8px; font-size: 16px; }
.admin-request-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-page { min-height: 68vh; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 22px; padding: 34px 0 84px; }
.admin-sidebar { position: sticky; top: 18px; align-self: start; display: grid; gap: 5px; padding: 24px 14px; background: rgba(8,22,35,.68); }
.admin-sidebar > div { display: grid; gap: 6px; padding: 6px 12px 22px; }
/**
 * `ADMIN CONSOLE` 小标签用金色。
 *
 * ⚠️ 这里原来写的是 `var(--hp-gold)` —— 而 `--hp-gold` 只在
 * `body[class*="home-preview"]` 里定义，后台 body class 是 `admin-layout`，
 * **取不到值**，整条 `color` 声明静默失效，小标签一直是默认灰。
 * 改用 `:root` 上的 `--champagne-2`（深浅主题各自有值）。 */
.admin-sidebar small { color: var(--champagne-2); font-size: 9px; letter-spacing: .18em; }
.admin-sidebar strong { font-size: 20px; }
.admin-sidebar a { padding: 11px 12px; color: #91a3af; text-decoration: none; font-size: 13px; }
.admin-sidebar a:hover, .admin-sidebar a.active { color: #eef2f4; background: rgba(255,255,255,.04); }
.admin-sidebar .admin-back { margin-top: 16px; color: #687d8b; }
.admin-workspace { min-width: 0; padding: 38px; background: rgba(8,22,35,.46); }
.admin-section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.admin-section-head h1 { margin: 8px 0 0; font-size: clamp(30px,3vw,44px); }
.admin-section-head > span { color: #6f8391; font-size: 12px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.admin-stat-grid article { min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: rgba(255,255,255,.025); }
.admin-stat-grid span { color: #718493; font-size: 11px; }
.admin-stat-grid b { font-size: 30px; font-weight: 560; }
.admin-quick, .admin-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.admin-quick a, .admin-link-grid a { padding: 18px; color: #b8c5ce; background: rgba(255,255,255,.022); text-decoration: none; }
.admin-quick a:hover, .admin-link-grid a:hover { color: var(--hp-gold); background: rgba(225,184,107,.05); }
/**
 * 后台表格：窄屏靠**横向滚动**兜底。
 *
 * 它整幅都在浅色卡片里，只在深色主题下露出深色轨道；滚动条本身走全站那一套
 * （见文件开头），这里只补两件表格特有的事：
 *   1. `padding-bottom` —— 横向滚动条会压在最后一行单元格的分隔线上，
 *      留一点距离，条子才不会把表格底边啃掉一条。
 *   2. `overscroll-behavior-x: contain` —— 表格滚到头之后继续滑，
 *      不该把整页的横向滚动/浏览器后退手势带出来（移动端最明显）。
 */
.admin-table-wrap {
  overflow-x: auto;
  margin-top: 26px;
  padding-bottom: 4px;
  overscroll-behavior-x: contain;
}

/**
 * ## ⚠️ `table-layout: fixed` 是这张表**唯一的**根治办法
 *
 * 用户截图里「操作」列被压成每行一个字（`更新会员设置` 竖着摞成 5 行）、
 * 单元格高达 130px、说明列的 JSON 顶出表格右边缘 —— 三个症状一个根因：
 *
 * 默认的 `table-layout: auto` **按内容分配宽度**。说明列装着完整的
 * `{"membership_mode":"manual","default_plan":"member"}`，它很长，于是把宽度
 * 一路抢走；剩下的宽度分到操作列时只够一个汉字。中文没有断词规则，浏览器
 * 就一个字一行地摞起来 —— 列还在，只是窄成了"脊柱"。
 *
 * `fixed` 改成**按声明宽度分配**：列宽不受内容影响，抢不了。代价是内容必须
 * 自己会换行（否则溢出），所以配套给了 `overflow-wrap: anywhere` ——
 * 长 JSON、长邮箱、UUID 这种"没有空格可断"的串也能就地折行。
 *
 * ## 列宽是**比例**，不是固定 px
 *
 * 用 `%` 而不是 `px`：表格宽度随窗口变（后台工作区是 `minmax(0,1fr)`），
 * 写死 px 在窄屏会把百分比和 px 混着算，列宽变成玄学。
 * 比例按内容性质定：时间列窄而固定（14%）、说明列最宽（吃掉剩余）。
 */
.admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.admin-table th, .admin-table td {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  vertical-align: top;
  /* 长串（JSON / 邮箱 / ID）就地折行，不许顶破列宽 */
  overflow-wrap: anywhere;
}
.admin-table th {
  color: #7f92a0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .08em;
  /**
   * ⚠️ 表头**必须不折行**。
   * 「操作」两字在 fixed 布局下如果挤不下就会折成「操」/「作」两行，
   * 表头比正文还高，一行标题把整张表的顶边撑歪。
   */
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 12px;
}
.admin-table td { color: #c2cdd5; font-size: 13px; line-height: 1.6; }
.admin-table td > strong, .admin-table td > small { display: block; }
.admin-table td > small { margin-top: 5px; color: #6f8290; }
/* 行悬停：整行给一点底色，扫读长表格时眼睛不容易串行 */
.admin-table tbody tr { transition: background .15s ease; }
.admin-table tbody tr:hover { background: rgba(255,255,255,.022); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-empty { color: #6f8290; padding: 28px 14px; }

/* ---------------------------- 用户表列宽 ---------------------------- */
.admin-table-users .col-user { width: 24%; }
.admin-table-users th:nth-child(1) { width: 24%; }
.admin-table-users th:nth-child(2) { width: 12%; }
.admin-table-users th:nth-child(3) { width: 15%; }
.admin-table-users th:nth-child(4) { width: 13%; }
.admin-table-users th:nth-child(5) { width: 36%; }

/* ---------------------------- 操作记录列宽 ----------------------------
 * 时间 15% / 管理员 13% / 操作 17% / 对象 22% / 说明 33%
 * 「操作」给到 17% 而不是按字数给 10% —— 它现在是「修改会员设置」6 个字，
 * 加上内边距要一行放得下；给窄了又会退回逐字竖排。 */
.admin-table-audit .col-time { width: 15%; }
.admin-table-audit .col-admin { width: 13%; }
.admin-table-audit .col-action { width: 17%; }
.admin-table-audit .col-target { width: 22%; }
.admin-table-audit .col-detail { width: 33%; }

/* 时间：日期与时刻分两行，用等宽数字对齐，扫一眼成列 */
.admin-time time { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; color: #b6c2cc; }
.admin-time time span { display: block; margin-top: 2px; color: #7f8e9c; font-size: 12px; }
/* 对象列（邮箱、system、UUID）：允许在任意位置折行，不给表格留横向溢出 */
.admin-target { color: #a9b6c1; }

/**
 * 操作词做成色块，并把英文原名收在其下。
 *
 * 用户截图里这一列**只有英文原文**（`update membership settings`），
 * 中文管理员要读一段英文才知道发生了什么；而竖排又让它彻底无法阅读。
 * 现在中文是主体（色块，一眼能扫），英文小字留在下面便于和日志/代码对上号。
 */
.admin-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  color: #a9b6c1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
/**
 * 管理员标记用金色 —— 但与 `.admin-tag.action`（蓝）区分开，避免两个色块同级。
 *
 * ⚠️ 这里**不能**用 `var(--hp-gold)`：那个变量只在
 * `body[class*="home-preview"]` 里定义（见「备用主页」一节），
 * 后台页面的 body class 是 `admin-layout`，取不到值 ——
 * 于是 `color` 整条声明失效，标签退化成默认灰。
 * 用 `:root` 上的 `--champagne-2`（深色主题里是亮金、浅色主题里自动变深金），
 * 两个主题都不用手写覆盖。
 */
.admin-tag.is-admin { color: var(--champagne-2); background: rgba(225,184,107,.1); border-color: rgba(201,169,110,.32); }
.admin-tag.action { color: #bcd0e4; background: rgba(120,170,255,.1); border-color: rgba(120,170,255,.22); }
/* 方案 / 状态：沿用站内既有的语义色（绿=生效、黄=待办、红=停用）
   ⚠️ 2026-09-24 会员方案改版：key 由 member/professional 换成 plus/pro/max，
   `.admin-tag.plan-<key>` 的类名跟着变（老类名保留，历史页面上可能还有旧标记）。 */
.admin-tag.plan-member, .admin-tag.plan-professional, .admin-tag.plan-plus, .admin-tag.plan-pro, .admin-tag.plan-max { color: var(--ok-fg); background: var(--ok-bg); border-color: rgba(143,199,173,.3); }
.admin-tag.state-active { color: var(--ok-fg); background: var(--ok-bg); border-color: rgba(143,199,173,.3); }
.admin-tag.state-pending { color: var(--warn-fg); background: var(--warn-bg); border-color: rgba(227,196,119,.3); }
.admin-tag.state-suspended, .admin-tag.state-expired { color: var(--err-fg); background: var(--err-bg); border-color: rgba(228,165,173,.3); }
/* 英文操作名：小一号、低对比，做"对照用"的副信息而不是第二主角 */
.admin-action-en { margin-top: 6px; color: #64737f; font-size: 10.5px; line-height: 1.5; letter-spacing: .01em; }
.admin-nil { color: #5b6771; }

/* 说明列：翻译后的中文，正常折行即可，不再需要横向截断 */
.admin-detail { color: #aeb9c4; font-size: 12.5px; }

/* 用户管理那一列的操作区：三个下拉 + 保存，窄屏会溢出，交给横向滚动 */
.admin-inline-form { min-width: 340px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-inline-form select, .admin-settings select { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.1); background: #0b1c2a; color: #c8d2d9; }
.admin-settings { max-width: 720px; display: grid; gap: 14px; }
.admin-settings label { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 8px 20px; align-items: center; padding: 18px; background: rgba(255,255,255,.02); }
.admin-settings label > span { color: #d7dfe4; font-weight: 600; }
.admin-settings label > small { grid-column: 2; color: #708390; line-height: 1.6; }
.admin-settings .btn { width: fit-content; margin-top: 8px; }
.admin-info-list { display: grid; gap: 10px; }
.admin-info-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 20px; background: rgba(255,255,255,.022); }
.admin-info-list span { color: #7f929f; line-height: 1.7; }

/* ===== 账户功能区（/account 及其下所有页面）=====
   用户要求：「左侧有一大片功能区，把不在主页和导航栏展示的都放这里」
   「我的订阅也定位是左侧功能栏其中的一项」
   所以这是**第二层导航**：左栏是完整索引（含我的订阅），右边是内容。 */
.acct-shell { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 30px; padding: 30px 0 84px; align-items: start; }
/**
 * ## 左栏左缩进：`--acct-side-inset`
 *
 * 用户 2026-09-25：「下面的整个左边缘，跟 LOGO 的左边缘对齐，目前太左了。
 * 右边缘也同步调整，往左边收缩相同距离」
 * （已确认按**左栏面板（深色底块）的左边缘**对齐，且**所有宽度**都改）。
 *
 * 原来左栏贴着容器内边距（22px）而页头品牌行从 48px 起 —— 左栏比 LOGO 靠左 26px。
 * 处理方式（左边缘右移到 48px，右边缘原地不动 = 面板窄掉「相同距离」）：
 *   - **桌面两栏**（≥1181px）：栅格首列 268px → `268px - 缩进`，左栏自身不动，
 *     右边缘与内容列（320px）都不受影响；
 *   - **窄屏单栏**（≤1180px）：左栏 `margin-left: 缩进` + `width: calc(100% - 缩进)`。
 *
 * ⚠️ 变量**必须声明在 `.acct-shell` 上，不能只声明在 `.acct-side`**：
 * 自定义属性沿 DOM 向下继承，不向上 —— 声明在左栏上，
 * 父元素栅格里的 `calc(268px - var(--acct-side-inset))` 就是**无效值**，
 * 整条 `grid-template-columns` 被判无效、栅格塌成一列
 * （探针量到 1200px 时是 `gridTemplateColumns: "1156px"`）。
 *
 * 缩进量写成 `48px - 容器左内边距`：
 *   - ≥721px 容器内边距 22px → 26px；
 *   - ≤720px 容器内边距 10px → 38px。
 * 两条规则都读这同一个变量，所以两档算出来左边缘都恰好落在 **48px**。
 */
.acct-shell { --acct-side-inset: calc(48px - 22px); }
/**
 * ⚠️ 窄屏那一档必须写在上面基础规则**之后**：两条选择器同为 `.acct-shell`（0,1,0），
 * 同优先级时后写的赢 —— 写在前面会被按源码顺序盖掉（第一版量出来停在 36px）。
 */
@media (max-width: 720px) {
  .acct-shell { --acct-side-inset: calc(48px - 10px); }
}
/**
 * ⚠️ 这条必须排在下面 `max-width:1180px` 那条**之前**：两条同为 `body.acct-layout .acct-shell`，
 * 同优先级时后写的赢 —— 反过来写，≤1180px 反而会拿到 242px 的窄首列。
 */
@media (min-width: 1181px) {
  body.acct-layout .acct-shell { grid-template-columns: calc(268px - var(--acct-side-inset)) minmax(0,1fr); }
  /**
   * ⚠️ 左栏自身也要 `margin-left` 才会跟着列宽一起右移：
   * 首列只是**收窄**了 26px，左栏默认仍然贴列首（22px）——
   * 加上这段外边距之后才是 [48, 290]：左边缘贴 LOGO，右边缘原地不动。
   */
  body.acct-layout .acct-side { margin-left: var(--acct-side-inset); }
}
/* ---- 左栏 ---- */
.acct-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 10px; padding: 20px 12px 18px; background: rgba(8,22,35,.68); }
.acct-identity { display: flex; gap: 10px; align-items: center; padding: 4px 6px 10px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07); }
.acct-avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(225,184,107,.16); color: var(--hp-gold); font-size: 15px; font-weight: 600; }
.acct-identity-text { min-width: 0; display: grid; gap: 2px; }
.acct-identity-text strong { color: #e7edf1; font-size: 13px; }
.acct-identity-text small { color: #6f8391; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { margin: -4px 6px 4px; color: var(--hp-gold); font-size: 10px; letter-spacing: .1em; }
.acct-nav { display: grid; gap: 14px; }
.acct-nav-group { display: grid; gap: 1px; }
.acct-nav-group h3 { margin: 0 0 5px; padding: 0 8px; color: #5f7482; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; }
.acct-nav-admin h3 { color: var(--hp-gold); }
.acct-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; color: #93a5b1; text-decoration: none; font-size: 12.5px; border-left: 2px solid transparent; }
.acct-nav-item:hover { color: #eef2f4; background: rgba(255,255,255,.04); }
.acct-nav-item.active { color: #fff; background: rgba(225,184,107,.1); border-left-color: var(--hp-gold); }
.acct-nav-item b { min-width: 19px; padding: 1px 6px; border-radius: 999px; background: rgba(225,184,107,.18); color: var(--hp-gold); font-size: 10.5px; text-align: center; }
.acct-nav-home { margin-bottom: 8px; }
.acct-nav-foot { display: grid; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.acct-nav-foot a, .acct-nav-foot button { padding: 0 9px; border: 0; background: none; color: #687d8b; font-size: 11.5px; text-align: left; text-decoration: none; cursor: pointer; font-family: inherit; }
.acct-nav-foot a:hover, .acct-nav-foot button:hover { color: var(--hp-gold); }

/* ---- 右栏内容 ---- */
.acct-content { min-width: 0; }
/**
 * ## 头部：一句话问候，不要一个大标题
 *
 * 用户截图反馈：「你好，admin」在那一屏里过大，跟旁边的 eyebrow、副标题
 * 不成比例，整块头把下面的内容压下去了。
 *
 * 原来的写法是 `clamp(24px, 2.6vw, 34px)` —— 在常见窗口宽度（1400px 上下）
 * 下 `2.6vw` 已经超过上限，于是**恒定取到 34px**；中文粗体在 34px 下
 * 比同字号的拉丁字母视觉重量大得多，所以看起来比设计意图还重。
 *
 * 改法有两处，缺一不可：
 *   1. 字号收到 22–26px —— 它是"问候"，不是页面主标题
 *       （这一页真正的主标题身份由 eyebrow「ACCOUNT OVERVIEW」承担）；
 *   2. 顺带把行高与字重压一压，中文大字的"块感"就下去了。
 */
.acct-head { margin-bottom: 22px; }
.acct-head h1 { margin: 6px 0 6px; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.acct-head-sub { margin: 0; color: #8294a1; font-size: 13px; }

/* 概览：四张统计卡 */
/**
 * ## 四张卡不再等宽 —— 前两张是"可点的"，占更多宽度
 *
 * 原来四张卡片 `repeat(4, 1fr)` 一律等宽，视觉上等于告诉读者
 * "这四件事一样重要"。但它们性质不同：
 *
 *   · 收件箱未读、我的关注词 —— 是**入口**，点进去有实际动作，还会变；
 *   · 会员状态、注册时间     —— 是**状态**，只读，基本不变。
 *
 * 所以改成 `1.15fr 1.15fr 1fr 1fr`：前两张略宽，读者一眼能分出主次。
 * 这是纯粹的权重表达，没有加任何新元素。
 */
.acct-stat-grid { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.acct-stat { display: grid; gap: 8px; padding: 20px 22px; background: rgba(8,22,35,.5); text-decoration: none; border-left: 2px solid transparent; }
a.acct-stat:hover { border-left-color: var(--hp-gold); background: rgba(225,184,107,.06); }
.acct-stat > span { color: #718493; font-size: 11px; }
/**
 * 数字收小一档（28 → 24）并把行高压紧。
 *
 * 理由和头部标题一样：这一页有四个大数字并排，每个都 28px 时会互相抢，
 * 而且中文/数字混排下这四块会显得很"吵"。24px 足够当视觉锚点，
 * 又不会和页面主标题打架 —— 主标题已经收到 26px 了，两者接近是对的：
 * 这一页的层级是"问候语 ≈ 关键数字 > 说明文字"。
 */
.acct-stat b { color: #eef2f4; font-size: 24px; font-weight: 560; line-height: 1.15; }
.acct-stat b.acct-stat-text { font-size: 16px; }
.acct-stat small { color: #6f8391; font-size: 11px; }

.acct-columns { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 18px; }
.acct-card { padding: 22px 26px 24px; background: rgba(8,22,35,.5); }
.acct-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.acct-card-head h2 { margin: 0; font-size: 15px; }
.acct-card-head a { color: var(--hp-gold); font-size: 12px; text-decoration: none; }
.acct-recent { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.acct-recent li { display: grid; gap: 3px; }
.acct-recent li.unread a { font-weight: 600; }
.acct-recent a { color: #ccd6dd; font-size: 12.5px; line-height: 1.6; text-decoration: none; }
.acct-recent a:hover { color: var(--hp-gold); }
.acct-recent span { color: var(--hp-gold); font-size: 10.5px; }
.acct-subs { display: grid; gap: 10px; }
.acct-subs p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.acct-subs p > span { flex: 0 0 62px; color: #718493; font-size: 11px; }
.acct-subs em { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.05); color: #b9c5cd; font-size: 11px; font-style: normal; }
.acct-notes { display: grid; gap: 8px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.07); list-style: none; }
.acct-notes strong { color: #dbe3e8; font-size: 12px; }
.acct-notes p { margin: 3px 0 0; color: #8294a1; font-size: 11.5px; }
.acct-empty { margin: 0; color: #8294a1; font-size: 12.5px; line-height: 1.8; }
.acct-empty code { padding: 1px 5px; background: rgba(225,184,107,.12); color: var(--hp-gold); font-size: 11.5px; }

/* 后台：分区标签（原来自带一套 admin-sidebar，现在统一到账户左栏） */
.acct-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.acct-tabs a { padding: 9px 14px; color: #93a5b1; font-size: 12.5px; text-decoration: none; border-bottom: 2px solid transparent; }
.acct-tabs a:hover { color: #eef2f4; }
.acct-tabs a.active { color: #fff; border-bottom-color: var(--hp-gold); }
.admin-panel { min-width: 0; }

/* ===== 收件箱（/inbox）：**单栏列表** =====
   账户区左栏由 `.acct-shell` 提供；本页自己只有一栏。

   ⚠️ **右栏（阅读窗格）已整个删除**（用户要求：「这个外都说了好多回，不要了」）。
   这个页面为"三栏"反复改过几轮：先是有右栏、后来没选中时右栏不渲染
   （靠 `:has()` 塌成一栏）、现在**右栏这个概念没有了** ——
   点标题直接去文章简介页，列表用满整个宽度（用户明确选了"一行显示更多文字"）。

   所以下面不再有 `:has(> .inbox-reader)` 那条两栏规则，
   连带它跟窄屏媒体查询打架的问题（`:has()` 权重更高、媒体查询盖不住）
   一起消失。`.inbox-page` 现在就永远是一栏。 */
.inbox-page { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
.inbox-workspace { min-width: 0; padding: 18px 20px 22px; background: rgba(8,22,35,.46); }
.inbox-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.inbox-head h2 { margin: 0; font-size: 16px; }
.inbox-head > span { color: #6f8391; font-size: 12px; }
.inbox-folders { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.inbox-folder { display: flex; align-items: center; gap: 6px; padding: 6px 10px; color: #91a3af; text-decoration: none; font-size: 12px; }
.inbox-folder:hover { color: #eef2f4; background: rgba(255,255,255,.04); }
.inbox-folder.active { color: #eef2f4; background: rgba(225,184,107,.09); }
.inbox-folder b { min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(225,184,107,.16); color: var(--hp-gold); font-size: 10.5px; text-align: center; }
.inbox-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.inbox-toolbar form { margin: 0; }
.inbox-unread-line { flex: 1 1 auto; margin: 0; color: #8294a1; font-size: 11.5px; }
.inbox-unread-line b { color: var(--hp-gold); font-size: 15px; }
.inbox-list { margin: 0; padding: 0; list-style: none; }
/**
 * ## 一行 = 四列栅格：☐ | ☆ | 标题(1fr) | 元信息
 *
 * ### 标题**折两行**，不要死挤一行（用户：「非要挤在一行吗？！！！」）
 *
 * 用户这句话点破了我绕了两轮的弯。之前我一直在"怎么让长标题**挤进**
 * 一行且不撑破"上打转（`ellipsis`、`min-width: 0`、`box-sizing`…），
 * 但**长英文标题本来就不该挤一行**：一行放不下 100 多个字符的英文，
 * 硬截断丢掉的是读者最需要的部分（研究做了什么）。
 *
 * 所以规则改成最朴素的那条：**标题最多两行，装不下就截断**。
 *
 *   · `white-space: normal` —— **允许折行**（这条是关键字，之前是 nowrap）；
 *   · `-webkit-line-clamp: 2` + `display: -webkit-box` —— 最多两行；
 *   · `overflow-wrap: anywhere` —— 长英文/长网址**就地折断**，
 *     不会因为一个超长单词（`microenvironment-CAR`）又把行撑破；
 *   · `min-width: 0` —— 不许顶开栅格列（这条仍然要，防的是另一类问题）。
 *
 * ⚠️ 标题一变成两行，**行高就不再固定**（42px → 约 66px）。
 * 所以 `align-items` 从 `center` 改成 `start`：
 * 两行文字比勾选框高，居中的话勾选框会浮到行的中间、
 * 与第一行文字错位。改成 `start` 之后，勾选框和 ☆ 始终**对齐第一行文字**。
 */
.inbox-letter {
  box-sizing: border-box;
  display: grid;
  /**
   * ## ⚠️ 列宽**必须容得下这一列里的按钮**（同一个坑的第二次）
   *
   * 第二列现在装**两个**按钮：☆（20px）+ gap（4px）+ ✕（20px）= 44px。
   * 写成 24px 的话它们会溢出到正文列下面 —— 和上次"列数不对"一样是
   * "CSS 与 HTML 数量不匹配"，只是这次错在宽度。所以给 50px 留余量。
   *
   * ⚠️ 另一条同样重要：**列数必须等于行里真的有几个格子**。
   * 2026-09-23 起勾选框在**每个文件夹**里都渲染（收件箱的「全选」是用户要的），
   * 所以只有一种形态：
   *
   *   ☐ | ☆ ✕ | 标题 + 元信息      → **3 列**（所有文件夹）
   *
   * 这里的历史坑：勾选框一度只在「已删除」里渲染，基础规则写 3 列就
   * 把收件箱的按钮组顶进第 1 列（18px）、正文顶进第 2 列（24px），
   * 标题被压成"两个字一换行"（用户：「又被你改坏了！」）。
   * 反过来，**去掉勾选框之后一定要同步改这里** —— 列数与格子数
   * 必须一一对应，`test.mjs` 里有一条测试专门钉这个数量关系。
   */
  grid-template-columns: 18px 50px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid transparent;
}
/* 所有直接子元素都不许顶开自己那一列 —— 栅格溢出最常见的成因 */
.inbox-letter > * { min-width: 0; }
.inbox-letter:hover { background: rgba(255,255,255,.025); }
.inbox-letter.unread { background: rgba(225,184,107,.035); }
.inbox-letter-body { min-width: 0; display: grid; gap: 6px; }
/**
 * 勾选框压低对比度：**默认淡、悬停和勾选时才亮**。
 * 一列高饱和的系统蓝方块会把整页的注意力从标题上拉走。
 *
 * ⚠️ `appearance: none` + 自绘外框：Chrome 的默认复选框在深色底上
 * 是一个**亮灰实心方块**（用户截图里那两个灰块），比标题还显眼。
 * 自绘之后它在深色主题里是"一条淡边"，浅色主题里才回到常规复选框观感。
 */
.inbox-pick {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}
.inbox-pick:hover { opacity: 1; border-color: var(--hp-gold); }
.inbox-pick:checked {
  opacity: 1;
  border-color: var(--hp-gold);
  background: var(--hp-gold);
  /* 用背景渐变画对勾，省掉一张图 */
  background-image: linear-gradient(45deg, transparent 42%, #06111d 42%, #06111d 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #06111d 42%, #06111d 58%, transparent 58%);
  background-size: 60% 60%, 60% 60%;
  background-position: 22% 55%, 72% 55%;
  background-repeat: no-repeat;
}
.inbox-letter-flag { margin: 0; display: flex; align-items: center; gap: 4px; }
/**
 * ⚠️ ☆ 按钮**必须显式清掉浏览器默认外观**。
 *
 * 它是 `<button>`，不清就会渲染成系统默认的方块按钮
 *（灰底 + 立体边框），在一行文字里非常突兀 —— 用户截过这个图问
 *「这个也不知道是什么鬼东西」。`appearance: none` + `border: 0`
 * + `background: none` 三条都要，只写其中一两条在部分浏览器上不够。
 */
.inbox-letter-flag button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #56697a;
  font-size: 17px;
  line-height: 20px;
  cursor: pointer;
}
.inbox-letter-flag button:not(.inbox-letter-del):hover { color: var(--hp-gold); }
/**
 * ## 逐封「删除」（✕）
 *
 * 收窄批量操作那次**把逐封删除也一起拿掉了**，收件箱里完全没有删除入口
 *（用户：「删除的选项呢」）。所以这一颗必须有，而且**只出现在收件箱**：
 * 垃圾桶里它的含义是"再删一次"（无动作），该给的是恢复/永久删除。
 *
 * 语义是**逻辑删除**（进「已删除」、可恢复），所以不弹确认；
 * 但它是每行都有的"破坏性"按钮，配色要克制：
 * 平时与 ☆ 同级灰，悬停才转成警示色 —— 不然 26 行全是红叉会很吵。
 *
 * ⚠️ 与 ☆ 同处 `.inbox-letter-flag`（`display: flex; gap: 4px`），
 * 所以栅格**列数不变**，不用动 `.inbox-letter` 的 `grid-template-columns`。
 *
 * ⚠️ 两条 hover 都要**明确排除 ✕**：星标那一行已有
 * `.inbox-letter.starred .inbox-letter-flag button { color: gold }`，
 * 它同样命中删除按钮 —— 不排除的话"已星标"的行里 ✕ 会是金色，
 * 悬停也不变红（选择器优先级打不过它）。
 */
.inbox-letter-flag .inbox-letter-del { font-size: 13px; }
.inbox-letter-flag button:not(.inbox-letter-del):hover { color: var(--hp-gold); }
.inbox-letter.starred .inbox-letter-flag button:not(.inbox-letter-del) { color: var(--hp-gold); }
.inbox-letter-flag .inbox-letter-del:hover { color: #e06c75; }
/**
 * 标题：**最多两行**，装不下就截断。它自己就是链接。
 *
 * 用户的原话：「你把这个英文的超长句子换成两行不行吗？非要挤在一行吗？！！！」
 *
 * 这句话是对的，我前面绕了两轮都在解错的问题 —— 一直想"怎么让长标题
 * **挤进一行**还不撑破"，但超长英文本来就不该挤一行：
 * `Oncolytic virotherapy at the tumor microenvironment-CAR Therapy
 * interface: Mechanisms, clinical translation, and future directions.`
 * 一行 1100px 也放不下，硬截断丢掉的恰恰是"这篇研究做了什么"。
 *
 * 所以四条声明各司其职：
 *   · `white-space: normal` —— **允许折行**（原来是 `nowrap`，改的是这里）；
 *   · `-webkit-box` + `-webkit-line-clamp: 2` —— 最多**两行**，超出截断；
 *   · `overflow-wrap: anywhere` —— 超长单词（`microenvironment-CAR`）
 *     就地折断，否则单个词就能把行顶破；
 *   · `min-width: 0` —— 不许顶开栅格列。
 *
 * ⚠️ **不能再用 `text-overflow: ellipsis`**：那个只对单行
 *（`white-space: nowrap`）生效，两行截断是由 `line-clamp` 画的省略号，
 * 两者同时写会互相干扰（`ellipsis` 失效、`line-clamp` 也可能不生效）。
 * 所以这里把 `text-overflow` 去掉，交给 `line-clamp`。
 */
.inbox-letter-title {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #ccd6dd;
  font-size: 13.5px;
  line-height: 1.55;
  text-decoration: none;
}
.inbox-letter.unread .inbox-letter-title { color: #f0f4f6; font-weight: 600; }
.inbox-letter-title:hover { color: var(--hp-gold); }
/* 元信息：只占自己需要的宽度、不换行、不抢标题 */
/**
 * ⚠️ 标题改成两行之后，**元信息要与标题的第一行对齐**。
 *
 * 行是 `align-items: start`，所以元信息默认贴行顶 —— 而它比 13px 的标题
 * 小（11px），基线会差几个像素，看起来像浮在上面。
 * 标题第一行的行高是 `13px × 1.55 ≈ 20px`，元信息行高约 `17px`，
 * 补 `1px` 上边距让两者的**文字基线**对齐。
 */
.inbox-letter-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  color: #6f8391;
  font-size: 11px;
  white-space: nowrap;
}
.inbox-hit { color: var(--hp-gold); }
/**
 * ⚠️ `.source` 徽章在收件箱里要**压扁**（用户截图里的"白色方块"）。
 *
 * 它是全站共用的内联 `<span>`（`.source`），在卡片里 padding
 * `1px 7px` + 半透明底是合适的；但收件箱这一行只有 11px 字，
 * 那个 padding 会让它看起来是一块**突兀的色块**，在深色底上尤其像
 * 一个"白框"。这里把它在收件箱上下文里收成**纯文字 + 极淡底**，
 * 让"来源"退回成元信息的一部分，而不是一个徽章。
 */
.inbox-letter-meta .source {
  padding: 0;
  background: none;
  color: #8fa0b0;
  font-weight: 400;
}
.inbox-letter-meta .source[data-source="pubmed"] { background: none; color: #8fa0b0; }
.inbox-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11.5px; }
.inbox-pager a { color: var(--hp-gold); text-decoration: none; }
.inbox-empty { padding: 22px 8px; color: #8294a1; font-size: 12.5px; line-height: 1.8; }
.inbox-empty p { margin: 0; }

/* 批量操作条：全选 + 已选计数 +（随文件夹而变的）动作按钮 */
.inbox-batch-form { margin: 0; }
.inbox-batch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.inbox-selectall { display: flex; align-items: center; gap: 6px; color: #93a5b1; font-size: 11.5px; cursor: pointer; }
.inbox-selectall input { width: 14px; height: 14px; margin: 0; accent-color: var(--hp-gold); cursor: pointer; }
.inbox-batch-count { color: #6f8391; font-size: 11.5px; }
/* 选中之后把计数点亮 —— 它是"我勾了几封"的唯一反馈 */
.inbox-batch-count.on { color: var(--hp-gold); }
.inbox-batch-spacer { flex: 1 1 auto; }
/* 一封都没勾时按钮不可点（`BATCH_SCRIPT` 负责置灰），视觉上也要跟着弱下去 */
.inbox-batch button:disabled { opacity: .4; cursor: not-allowed; }
/* 「永久删除」的后果说明：不写清这句，用户会以为按钮坏了（它确实可能被重新投递） */
.inbox-purge-hint { margin: -4px 0 10px; color: #6f8391; font-size: 11px; line-height: 1.6; }
html[data-theme="light"] .inbox-purge-hint { color: #71838f; }

/* 系统消息 */
.inbox-notifications { margin-bottom: 14px; padding: 11px 13px; background: rgba(225,184,107,.05); border-left: 2px solid var(--hp-gold); }
.inbox-notifications h2 { margin: 0 0 8px; color: var(--hp-gold); font-size: 10px; letter-spacing: .1em; }
.inbox-notifications ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inbox-notifications li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 11.5px; }
.inbox-notifications strong { color: #dbe3e8; }
.inbox-notifications p { margin: 3px 0 0; color: #8294a1; font-size: 11.5px; }
.inbox-notifications time { color: #687d8b; font-size: 11px; }
.inbox-note-kind { padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.06); color: #93a5b1; font-size: 10px; }
.inbox-note-link { color: var(--hp-gold); font-size: 11.5px; text-decoration: none; }

/* 窄屏：账户区与收件箱都回落成单栏 */
/**
 * ## ⚠️ 断点从 1080 提到 1180，并给左栏加 `min-width: 0`
 *
 * 用户截图里左栏是**被切掉**的（只能看到半截文字），这不是文字太长，
 * 是**栅格没来得及回落**：`.acct-shell` 是 `268px + 1fr` 的硬栅格，
 * 在 1080～1180px 这一段窗口里，256px 的左栏 + 30px 间距照样占着，
 * 右边的内容被挤到容器外面，视觉上就成了"左栏被切"。
 *
 * 两处一起改才有效：
 *   1. 断点提到 1180px —— 让它在"开始挤"之前就切成单栏；
 *   2. `.acct-side` / `.acct-content` 都加 `min-width: 0` ——
 *      栅格子项默认 `min-width: auto`，内容撑住就压不下去，
 *      这是栅格溢出的头号原因。
 */
@media (max-width: 1180px) {
  .acct-shell { grid-template-columns: minmax(0,1fr); }
  .acct-side { position: static; max-height: none; }
  .acct-side, .acct-content { min-width: 0; }
  /**
   * 单栏这一档：同样「左边缘右移到 48px、右边缘内收相同距离」。
   * 容器内边距在 ≤720px 会掉到 10px，所以缩进量跟着换一档（48 - 10 = 38px）。
   * 这里单栏是普通块级项（`grid-template-columns: minmax(0,1fr)`），
   * `margin-left` + `width: calc(100% - 缩进)` 两头都收得住。
   */
  .acct-side { margin-left: var(--acct-side-inset); width: calc(100% - var(--acct-side-inset)); }
  .acct-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .acct-columns { grid-template-columns: minmax(0,1fr); }
  /* `.inbox-page` 现在**永远是一栏**，窄屏不需要再覆盖它 ——
     原来那条 `.inbox-page:has(> .inbox-reader)` 已经随右栏一起删掉了。 */
}
@media (max-width: 900px) {
  /**
   * 窄屏下把列表行**从"一行两列"改成"两层"**：元信息换到标题下面。
   *
   * 宽屏：☆ | 标题(最多两行) + 右侧元信息（已删除里左边再多一格勾选框）。
   * 900px 以下标题本来就要折行，再让元信息占着右边会把标题压成很窄一条 ——
   * 所以让元信息横跨到第二行，这是移动端常规做法。
   *
   * ⚠️ 与基础规则同一个坑：**列数必须等于行里真的有几个格子**。
   * 2026-09-23 起勾选框在所有文件夹里都渲染，所以只有一种形态：
   * 3 列，正文在第 3 列。这里曾经把两种形态写在一起（基础 2 列 +
   * `.pickable` 3 列），那时收件箱的行没有勾选框，正文在第 2 列。
   * 以后再去掉勾选框，**这两处要一起改**。
   *
   * ⚠️ 标题的「最多两行」不用在这里重复写 —— 基础规则已经是
   * `-webkit-line-clamp: 2`（用户要求长标题折两行）。
   */
  .inbox-letter { grid-template-columns: 18px 48px minmax(0, 1fr); row-gap: 3px; }
  .inbox-pick, .inbox-letter-flag { align-self: start; margin-top: 2px; }
  .inbox-letter-body { grid-column: 3; }
  .inbox-letter-meta { margin-top: 0; flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 620px) {
  .acct-stat-grid { grid-template-columns: minmax(0,1fr); }
  /* 小屏下四张卡变一列，等宽即可 —— 权重差异在单列里靠上下顺序表达 */
  .acct-stat { padding: 18px 20px; }
}
html[data-theme="light"] .acct-side,
html[data-theme="light"] .acct-stat,
html[data-theme="light"] .acct-card,
html[data-theme="light"] .inbox-workspace { background: #fff; }
html[data-theme="light"] .acct-identity strong,
html[data-theme="light"] .acct-stat b { color: #14232d; }
html[data-theme="light"] .acct-nav-item { color: #5c6f7d; }
html[data-theme="light"] .acct-nav-item.active { color: #14232d; background: rgba(225,184,107,.18); }
html[data-theme="light"] .acct-tabs a { color: #5c6f7d; }
html[data-theme="light"] .acct-tabs a.active { color: #14232d; }
html[data-theme="light"] .acct-recent a { color: #2a3b47; }
html[data-theme="light"] .acct-card-head,
html[data-theme="light"] .acct-identity,
html[data-theme="light"] .acct-tabs { border-color: rgba(28,45,57,.1); }
html[data-theme="light"] .inbox-letter-title { color: #2a3b47; }
html[data-theme="light"] .inbox-letter.unread { background: rgba(225,184,107,.09); }
html[data-theme="light"] .inbox-letter.unread .inbox-letter-title { color: #14232d; }
html[data-theme="light"] .inbox-batch { background: #f7f9fa; border-color: rgba(28,45,57,.1); }
html[data-theme="light"] .inbox-selectall { color: #5c6f7d; }
html[data-theme="light"] .inbox-batch-count { color: #71838f; }
html[data-theme="light"] .inbox-batch-count.on { color: #a87928; }
html[data-theme="light"] .inbox-folder { color: #5c6f7d; }
html[data-theme="light"] .inbox-folder.active { color: #14232d; background: rgba(225,184,107,.16); }
html[data-theme="light"] .inbox-head { border-bottom-color: rgba(28,45,57,.1); }
html[data-theme="light"] .inbox-letter { border-bottom-color: rgba(28,45,57,.08); }
html[data-theme="light"] .inbox-letter-meta { color: #71838f; }
html[data-theme="light"] .inbox-letter-meta .source,
html[data-theme="light"] .inbox-letter-meta .source[data-source="pubmed"] { color: #71838f; }
/* 浅色主题下复选框回到常规观感：白底 + 灰边（深色主题里是"淡边线"） */
html[data-theme="light"] .inbox-pick { border-color: rgba(28,45,57,.3); background: #fff; opacity: 1; }
html[data-theme="light"] .inbox-pick:checked { border-color: #a87928; background: #a87928; }
html[data-theme="light"] .inbox-letter-flag button { color: #8d9aa5; }
html[data-theme="light"] .inbox-letter.starred .inbox-letter-flag button,
html[data-theme="light"] .inbox-letter-flag button:hover { color: #a87928; }
html[data-theme="light"] .inbox-hit { color: #a87928; }
html[data-theme="light"] .inbox-empty { color: #5c6f7d; }
.account-badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.22); color: #fff; font-size: 11px; text-align: center; }
html[data-theme="light"] .auth-panel { background: #fff; }
html[data-theme="light"] .auth-intro { background: radial-gradient(circle at 10% 10%, rgba(225,184,107,.16), transparent 56%); }
html[data-theme="light"] .auth-intro h1 { color: #172630; }
html[data-theme="light"] .auth-intro > p:last-child,
html[data-theme="light"] .auth-form label,
html[data-theme="light"] .auth-hint,
html[data-theme="light"] .auth-switch { color: #617480; }
html[data-theme="light"] .auth-form { background: #fafbfb; }
html[data-theme="light"] .auth-error { color: #8a2929; background: #fff1f1; }
html[data-theme="light"] .auth-hint-bad { color: #a83232; }
/* 登录浮层（白底）：面板、正文、标签、关闭键都要重新给色，否则白底浅灰字 */
html[data-theme="light"] .login-modal-veil { background: rgba(20,28,36,.44); }
html[data-theme="light"] .login-modal-box { background: #fff; border-color: rgba(28,45,57,.16); }
html[data-theme="light"] .login-modal-box h2 { color: #14232d; }
html[data-theme="light"] .login-modal-lead,
html[data-theme="light"] .login-modal-form label { color: #617480; }
html[data-theme="light"] .login-modal-x { color: #617480; border-color: rgba(28,45,57,.2); }
html[data-theme="light"] .login-modal-x:hover { color: #a87928; border-color: rgba(168,121,40,.5); }
html[data-theme="light"] .pricing-card { background: #fff; }
/**
 * ## 浅色主题的悬停：**实色降级 + 一条金线**，不用半透明、不用大投影
 *
 * 用户 2026-09-25：「深色主题效果很好，但是浅色的不舒服」。
 * 两条原因都是浅色主题特有的，上一版直接把深色那套照搬过来了：
 *
 *   1. **背景板靠 `opacity` 压暗** —— 白卡半透明之后透出的是页面底色，
 *      四张卡看起来像"蒙了一层脏纸"，而不是"退到后面"；
 *   2. **亮起来那张挂了 `0 22px 46px` 的大投影** —— 浅色主题下它就是一团灰雾
 *      （这个坑本站踩过一次，见上面 `.pricing-card` 那段注释里用户的
 *      「这些所谓的阴影真的丑，很不舒服」）。
 *
 * 所以浅色主题不再用"暗下去/亮起来"，改成**两级实色**：
 *   · 背景板 → 浅灰实色 `#f2f5f7` + 更淡的描边，文字整体降一档灰；
 *   · 选中那张 → 保持纯白（不是暖黄，免得和"没被碰过的免费档"混），
 *     只加金色描边 + 一圈 1px 金环 + 顶部金线，**一个模糊投影都不加**。
 *
 * 免费档照旧只暗不亮：它同样会退成背景板，只是没有"回亮"那条规则。
 */
@media (hover: hover) {
  /* —— 背景板：实色降级（四档都算，含免费版） —— */
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card { opacity: 1; filter: none; border-color: rgba(28,45,57,.075); background: #f2f5f7; box-shadow: none; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card h2 { color: #74858f; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card .pricing-price b { color: #8d9ca6; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card .pricing-price span { color: #9fabb3; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card li { color: #7f8f9a; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card li.included i { color: #b8a077; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card li.excluded { color: #9aa5ac; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card li.excluded i { color: #adb6bc; }
  /* —— 选中那张（只有付费三档）：纯白 + 金边 + 金线，零模糊投影 —— */
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover { border-color: rgba(139,100,37,.52); background: #fff; box-shadow: 0 0 0 1px rgba(139,100,37,.22); }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover h2 { color: #8b6425; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover .pricing-price b { color: #0f1e28; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover .pricing-price span { color: #5c6f7d; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li { color: #1d2f3a; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li.included i { color: #8b6425; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li.excluded { color: #5c6f7d; }
  html[data-theme="light"] .pricing-grid:has(.pricing-card:hover) .pricing-card:not(.pricing-card-static):hover li.excluded i { color: #7d8890; }
}
html[data-theme="light"] .pricing-head h1,
html[data-theme="light"] .pricing-card h2,
html[data-theme="light"] .pricing-price b,
html[data-theme="light"] .pricing-explain h3 { color: #14232d; }
html[data-theme="light"] .pricing-card li { color: #3d505b; }
html[data-theme="light"] .pricing-card li { border-bottom-color: rgba(28,45,57,.075); }
html[data-theme="light"] .pricing-card li.excluded { color: #5c6f7d; }
html[data-theme="light"] .pricing-card li.excluded i { color: #7d8890; }
html[data-theme="light"] .pricing-head > p:last-child,
html[data-theme="light"] .pricing-explain p,
html[data-theme="light"] .pricing-note { color: #5f727e; }

/* 研究工作台：同一套组件同时服务深色与浅色主题。 */
.research-page { min-width: 0; }
.workspace-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 22px; }
.workspace-stats a { display:grid; gap:7px; min-height:132px; padding:22px; background:rgba(16,34,48,.72); color:inherit; text-decoration:none; }
.workspace-stats span,.workspace-stats small { color:#78909f; }
.workspace-stats b { font-size:34px; line-height:1; color:#edf3f6; }
.workspace-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.workspace-wide { grid-column:1 / -1; }
.research-panel,.topic-form,.topic-list,.task-table-wrap { padding:24px; background:rgba(10,26,39,.58); }
.research-panel > header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.research-panel h2,.topic-form h2 { margin:0; font-size:17px; }
.research-panel header a { color:var(--teal-2); font-size:12px; }
.research-row { display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:72px; padding:14px 0; color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.055); }
.research-row:last-child { border-bottom:0; }
.research-row span { display:grid; gap:6px; min-width:0; }
.research-row b { font-size:13px; font-weight:560; }
.research-row small,.research-row i { color:#718999; font-size:11px; font-style:normal; }
.research-empty { margin:18px 0; color:#708695; line-height:1.8; }
.research-empty.large { padding:56px 24px; text-align:center; background:rgba(10,26,39,.42); }
.saved-list { display:grid; gap:10px; }
.saved-card { display:flex; justify-content:space-between; gap:28px; align-items:center; padding:22px 24px; background:rgba(13,30,43,.62); }
.saved-card > div { min-width:0; }
.saved-card h2 { margin:8px 0; font-size:16px; line-height:1.55; }
.saved-card h2 a { color:inherit; text-decoration:none; }
.saved-card p { margin:0; color:#78909f; font-size:12px; line-height:1.75; }
.saved-source,.topic-frequency { color:var(--champagne-2); font-size:10px; letter-spacing:.08em; }
.topics-layout { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.45fr); gap:14px; align-items:start; }
.topic-form { display:grid; gap:16px; position:sticky; top:82px; }
.topic-form label { display:grid; gap:7px; color:#8da0ad; font-size:12px; }
.topic-form fieldset { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0; padding:14px; border:1px solid rgba(255,255,255,.08); }
.topic-form legend { padding:0 7px; color:#8da0ad; font-size:11px; }
.topic-form fieldset label { display:flex; align-items:center; gap:6px; }
.topic-form select { min-height:42px; padding:0 10px; color:inherit; background:transparent; border:1px solid rgba(255,255,255,.1); }
.topic-list { display:grid; gap:10px; }
.topic-card { display:flex; justify-content:space-between; gap:24px; padding:20px; background:rgba(18,37,51,.65); }
.topic-card h2 { margin:8px 0; font-size:16px; }
.topic-card p { margin:0 0 12px; color:#9babb5; font-size:13px; }
.topic-card small { color:#6f8796; }
.topic-card-side { display:grid; justify-items:end; align-content:start; gap:5px; min-width:84px; }
.topic-card-side b { font-size:25px; }.topic-card-side span { color:#728999; font-size:10px; }.topic-card-side form { margin-top:14px; }
.task-table-wrap { overflow-x:auto; }.task-table { width:100%; border-collapse:collapse; }.task-table th,.task-table td { padding:15px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); font-size:12px; }.task-table th { color:#6e8797; font-weight:500; }.task-table td strong,.task-table td small { display:block; }.task-table td small { margin-top:5px; color:#6f8796; }
.task-state { display:inline-flex; padding:4px 8px; color:#9bb0bd; background:rgba(255,255,255,.04); font-size:10px; font-style:normal; }.task-state.completed { color:var(--ok-fg); background:var(--ok-bg); }.task-state.failed { color:#e6a3a3; background:rgba(162,56,56,.14); }.task-state.running { color:var(--champagne-2); background:rgba(225,184,107,.1); }
/**
 * ## 详情页操作按钮（收藏 / 加入关注专题 / AI全文解读 / 加入对比）
 *
 * 这一排原来只写了 `flex + gap`，四个按钮的高度**并不一样**，原因有两个：
 *
 * 1. **`<button>` 与 `<a>` 的字体不同。** 表单控件不继承 `font`，
 *    浏览器给按钮的是 `font: 13.3px Arial` + `line-height: normal`，
 *    而 `<a class="btn">` 继承 body 的 `"PingFang SC", "Microsoft YaHei"`
 *    + `line-height: 1.65`。同一排里左边是 `<button>`、右边是 `<a>`，
 *    两个字号的**行盒高度差约 3.5px** —— 顶部对齐、底边不齐。
 *    修法在基础 `.btn` 里（`font-family: inherit` + 显式 `line-height`）。
 * 2. **flex 会把 `<a>` 拉伸、却拉不到 `<button>`。**
 *    `.detail-actions` 的 `align-items` 默认是 `stretch`：`<a class="btn">`
 *    是 flex item，会被拉到整行最高；而 `<button>` 外面还套着一个
 *    `<form>`，被拉伸的是 form，里面的按钮纹丝不动 —— 于是又差一截。
 *    这里把 `align-items` 收成 `flex-start`（不拉伸），
 *    并让 `form` 也用 `display: flex`（form 不再贡献多余的盒模型）。
 *
 * 图标与文字用 `gap` 分隔，不再靠字符串里的空格 ——
 * 详见 `views/pages.js` 顶部 `btnIcon` 那段说明。
 */
.detail-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; margin:20px 0 24px; }
.detail-actions form { display:flex; margin:0; }
.detail-actions .btn { display:inline-flex; align-items:center; gap:7px; }
.detail-actions .btn-i { display:block; flex:0 0 auto; }
.detail-actions .btn.active { color:var(--champagne-2); border-color:rgba(225,184,107,.32); }
.detail-actions .disabled { opacity:.58; cursor:not-allowed; }

/**
 * ## 这一排里免费功能**不进灰**
 *
 * 上一版把免费功能（收藏 / 加入关注专题）收成了中性灰，想表达「你现在就有」。
 * 上线后用户反馈「**我还是没看出来哪些是默认功能，哪是是会员功能**」——
 * 灰在这一排里读起来是「禁用」，不是「免费」，整排被读成
 * 「两颗不能用的 + 三颗正常的」，正好说反。
 *
 * 所以免费功能**回到站点默认的按钮材质**，区分改由会员按钮那边的
 * 「金实底 + 会员小标」承担（见文件上部 `.btn.is-member` 那段）。
 * 默认的什么都不加，例外的才加标记 —— 这也是一般通例。
 */

html[data-theme="light"] .btn.is-member,
html[data-theme="light"] .btn.is-member.primary { background: #8b6425; border-color: #8b6425; color: #fff; }
html[data-theme="light"] .btn.is-member:hover,
html[data-theme="light"] .btn.is-member.primary:hover { background: #7a5a1e; border-color: #7a5a1e; color: #fff; }
html[data-theme="light"] .btn.is-gated,
html[data-theme="light"] .btn.is-member.is-gated,
html[data-theme="light"] .btn.is-member.primary.is-gated { background: transparent; border-color: rgba(201,169,110,.55); color: #8b6425; }
html[data-theme="light"] .btn.is-gated:hover,
html[data-theme="light"] .btn.is-member.is-gated:hover,
html[data-theme="light"] .btn.is-member.primary.is-gated:hover { background: rgba(225,184,107,.16); border-color: rgba(201,169,110,.68); color: #7a5a1e; }

html[data-theme="light"] .workspace-stats a,html[data-theme="light"] .research-panel,html[data-theme="light"] .topic-form,html[data-theme="light"] .topic-list,html[data-theme="light"] .task-table-wrap,html[data-theme="light"] .saved-card,html[data-theme="light"] .research-empty.large { background:#fff; }
html[data-theme="light"] .workspace-stats b,html[data-theme="light"] .research-row b,html[data-theme="light"] .saved-card h2,html[data-theme="light"] .topic-card h2 { color:#172934; }
html[data-theme="light"] .research-row,html[data-theme="light"] .task-table th,html[data-theme="light"] .task-table td { border-bottom-color:rgba(29,48,60,.075); }
html[data-theme="light"] .topic-card { background:#f7f9fa; }
html[data-theme="light"] .topic-form fieldset,html[data-theme="light"] .topic-form select { border-color:rgba(29,48,60,.13); }

@media (max-width: 850px) { .workspace-stats,.workspace-grid,.topics-layout { grid-template-columns:1fr; }.workspace-wide { grid-column:auto; }.topic-form { position:static; }.saved-card { align-items:flex-start; flex-direction:column; }.topic-form fieldset { grid-template-columns:1fr 1fr; } }
html[data-theme="light"] .admin-plan-summary article { background: #fff; box-shadow: 0 12px 34px rgba(28,45,57,.045); }
html[data-theme="light"] .admin-table th,
html[data-theme="light"] .admin-table td { border-color: rgba(28,45,57,.1); }
html[data-theme="light"] .admin-table th { color: #667984; }
html[data-theme="light"] .admin-table td { color: #263842; }
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] .admin-workspace { background: #f8fafb; }
html[data-theme="light"] .admin-sidebar a:hover,
html[data-theme="light"] .admin-sidebar a.active,
html[data-theme="light"] .admin-stat-grid article,
html[data-theme="light"] .admin-quick a,
html[data-theme="light"] .admin-link-grid a,
html[data-theme="light"] .admin-settings label,
html[data-theme="light"] .admin-info-list > div { background: #fff; }
html[data-theme="light"] .admin-sidebar a { color: #5d707c; }
html[data-theme="light"] .admin-sidebar a.active { color: #172630; }
html[data-theme="light"] .admin-inline-form select,
html[data-theme="light"] .admin-settings select { border-color: #dfe5e8; background: #fff; color: #263842; }
@media (max-width: 700px) {
  .pricing-public { width: min(100% - 28px,1320px); padding: 38px 0 66px; }
  .pricing-grid, .pricing-explain { grid-template-columns: 1fr; }
  .pricing-card { min-height: 0; }
  .admin-plan-summary { grid-template-columns: 1fr; }
  .auth-page { padding: 38px 0 66px; }
  .auth-panel, .account-panel { grid-template-columns: 1fr; }
  .auth-intro, .auth-form, .account-actions { padding: 32px 24px; }
  .account-actions { align-items: stretch; flex-direction: column; }
  .admin-page { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-sidebar > div, .admin-sidebar .admin-back { grid-column: 1 / -1; }
  .admin-workspace { padding: 26px 18px; }
  .admin-stat-grid, .admin-quick, .admin-link-grid { grid-template-columns: 1fr 1fr; }
  .admin-settings label, .admin-info-list > div { grid-template-columns: 1fr; }
  .admin-settings label > small { grid-column: 1; }
  /**
   * ⚠️ 窄屏要给表格一个**最小宽度**，否则 `table-layout: fixed` 会把 5 列
   * 一起按百分比压到手机宽度里 —— 每列只剩 60px，又回到"逐字竖排"。
   * 溢出交给 `.admin-table-wrap` 的横向滚动（它本来就在那儿）。
   * 780px 是"每列至少能放下一个中文词"的下限。
   */
  .admin-table { min-width: 780px; }
  .admin-table th, .admin-table td { padding: 13px 11px; }
  /**
   * 窄屏把「操作」色块的 `nowrap` 放开：横向滚动已经保证了列宽，
   * 再强制不折行会让"修改用户权限"把列顶宽、把其它列挤窄。
   */
  .admin-tag { white-space: normal; }
  .admin-inline-form { min-width: 300px; }
}

html[data-theme="light"] section.lv1,
html[data-theme="light"] section.lv2,
html[data-theme="light"] section.lv3,
html[data-theme="light"] section.lv4,
html[data-theme="light"] .card,
html[data-theme="light"] .trial-row,
html[data-theme="light"] .pg-card,
html[data-theme="light"] .gd-gap,
html[data-theme="light"] .health-source,
html[data-theme="light"] .facets,
html[data-theme="light"] .facets-hover,
html[data-theme="light"] .report-card,
html[data-theme="light"] .calendar-card {
  color: #263640;
  background: #fff;
  border-color: #dfe5e8;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .trial-row:hover,
html[data-theme="light"] .pg-card:hover,
html[data-theme="light"] .gd-gap:hover,
html[data-theme="light"] .report-card:hover { background: #f9fafb; border-color: rgba(201,169,110,.42); }
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .title,
html[data-theme="light"] .card-title,
html[data-theme="light"] dt { color: #17212a; }
html[data-theme="light"] p,
html[data-theme="light"] dd,
html[data-theme="light"] .muted,
html[data-theme="light"] .meta,
html[data-theme="light"] .summary { border-color: #e6eaed; }
html[data-theme="light"] .lead,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .summary,
html[data-theme="light"] .card-summary,
html[data-theme="light"] .trial-meta { color: #566873; }
html[data-theme="light"] .chip,
html[data-theme="light"] .btn,
html[data-theme="light"] .sort-opt,
html[data-theme="light"] .input,
html[data-theme="light"] select {
  color: #34434d;
  background: #fff;
  border-color: #dce2e6;
}
html[data-theme="light"] .chip:hover,
html[data-theme="light"] .chip.on,
html[data-theme="light"] .sort-opt.on { color: #8b6425; background: rgba(225,184,107,.12); border-color: rgba(201,169,110,.38); }
/*
 * ## ⚠️ 勾选态的 chip（`checkbox` / `radio`）在浅色主题下**必须单独补一条**
 *
 * 2026-09-25 用户报「我的订阅里，期刊的筛选条件点击了没反应」。
 * 交互那一半是设计如此（档位是复选框，改完要按底部「保存并筛选」），
 * 但**浅色主题里连「勾上了」这个反馈都没有**，是实打实的 bug：
 *
 *   - 深色主题的勾选态是 `.chip-toggle:has(> input:checked)`（见「我的订阅」那一节），
 *     特异性 **(0,2,1)**；
 *   - 上面这条 `html[data-theme="light"] .chip` 也是 **(0,2,1)** ——
 *     **打平**，而它在文件后面，于是浅色主题里勾选后 chip 不变金色；
 *   - 更糟的是浅色主题的 `.chip:hover` 就是金色：**悬停像选中、点下去反而变白**。
 *
 * 所以这里用 (0,3,2) 的选择器明确压过基础态，并且**比 hover 更实**
 * （hover 是浅金，选中是更浓的底 + 更实的描边 + 字重），
 * 否则「鼠标还在 chip 上」时两态看不出差别，又会变成一次「点了没反应」。
 */
html[data-theme="light"] .chip-toggle:has(> input:checked) {
  color: #7a5518;
  background: rgba(201, 169, 110, .24);
  border-color: rgba(201, 169, 110, .6);
  font-weight: 500;
}
html[data-theme="light"] .chip-toggle:has(> input:checked) small { color: #8b6425; }
html[data-theme="light"] .facets,
html[data-theme="light"] .facets-hover { background: #fbfcfc; }
html[data-theme="light"] .hp-footer {
  background: linear-gradient(to bottom, #fff 0, #fbfcfc 52px, #f7f8f9 132px, #f7f8f9 100%);
  border-color: #dfe5e8;
}
html[data-theme="light"] .hp-footer-brand h2 { color: #17212a; }
html[data-theme="light"] .hp-footer-brand span,
html[data-theme="light"] .hp-footer-base,
html[data-theme="light"] .hp-footer-nav a { color: #5f6d76; }
html[data-theme="light"] .hp-footer-nav,
html[data-theme="light"] .hp-footer-nav a,
html[data-theme="light"] .hp-footer-base { border-color: rgba(28,45,57,.13); }
html[data-theme="light"] .hp-sources { border-color: rgba(28,45,57,.13); }
html[data-theme="light"] .hp-source-mark { background: #fff; border-color: #dfe5e8; }
html[data-theme="light"] .hp-source-mark:hover { background: #fffaf1; border-color: rgba(201,169,110,.42); }
html[data-theme="light"] .hp-source-mark b { color: #263640; }
html[data-theme="light"] .hp-source-mark small,
html[data-theme="light"] .hp-sources > p { color: #687a85; }
html[data-theme="light"] .hp-footer-nav a:hover { color: #17212a; }

/* 浅色内容系统：列表、详情、标签与辅助信号分别校准对比度。 */
html[data-theme="light"] section.lv1,
html[data-theme="light"] section.lv2,
html[data-theme="light"] section.lv3,
html[data-theme="light"] section.lv4 { background: #fff; }
html[data-theme="light"] .section-head { border-color: #e5e9ec; }
html[data-theme="light"] .count,
html[data-theme="light"] .section-note { color: #667680; }
html[data-theme="light"] .note {
  color: #725526;
  background: #fffaf0;
  border-left-color: #c9a96e;
}
html[data-theme="light"] .card-title,
html[data-theme="light"] .card-title a,
html[data-theme="light"] .trial-title,
html[data-theme="light"] .sub-head { color: #17212a; }
html[data-theme="light"] .card-title a:hover,
html[data-theme="light"] .card:hover .card-title a,
html[data-theme="light"] .trial-row:hover .trial-title,
html[data-theme="light"] .pg-card:hover .card-title a { color: #8b6425; }
html[data-theme="light"] .title-en { color: #667783; }
html[data-theme="light"] .card-meta,
html[data-theme="light"] .journal,
html[data-theme="light"] .journal-abbrev,
html[data-theme="light"] .date,
html[data-theme="light"] .authors { color: #697983; }
/* `#74838d` 只有 3.83:1、`#9a7029` 只有 4.45:1 —— 都差一点没过 AA，各压深一档。 */
html[data-theme="light"] .date em { color: #63747f; }
html[data-theme="light"] .level { color: #8b6425; }
html[data-theme="light"] .card-highlight {
  color: #536570;
  border-top-color: #e5e9ec;
}
html[data-theme="light"] .source { color: #8a6428; background: #fff7e8; }
html[data-theme="light"] .source[data-source="pubmed"] { color: #3f70a4; background: #edf5ff; }
html[data-theme="light"] .source[data-source="fda"] { color: #34765b; background: #edf8f2; }
html[data-theme="light"] .source[data-source="cn-policy"] { color: #9d544b; background: #fff1ef; }
html[data-theme="light"] .score-value,
html[data-theme="light"] .score-value.hot,
html[data-theme="light"] .score-value.mid,
html[data-theme="light"] .trial-score .score-value,
html[data-theme="light"] .trial-score .score-value.hot { color: #a87928; }
html[data-theme="light"] .score-value small,
html[data-theme="light"] .trial-score .score-value small,
html[data-theme="light"] .pg-rating-label { color: #687883; }
/* ⚠️ 这两条原来各有一个坑，都是"补丁本身没达标"：
   - `.on` 用的 `#d0a34f` 在白底上只有 2.32:1，星星等于没亮；换成 `#b8862c`（3.1:1）。
   - `.off` 用的 `#d5dce0` 只有 **1.39:1** —— 比深色主题那个 `#38434e`（10.09:1）还糟，
     等于"修复把问题改坏了"。空星是**未点亮**的状态，浅灰是刻意的，但要浅到能看见轮廓。
   - ⚠️ **2026-09-23 再修一次**：上一版定的 `#a8b2b9` 只有 **2.16:1**，仍然没到
     「非文本图形 3:1」这条线（空星是评分刻度的一部分，不是纯装饰）。
     现在用 `#7d8890`：白底 3.62:1、卡片底 `#f7f9fa` 上 3.43:1，都过线，
     而且比点亮的金星 `#b8862c` 明显暗，一眼仍分得出"亮了几颗"。 */
html[data-theme="light"] .score-stars .on,
html[data-theme="light"] .score-stars.hot .on { color: #b8862c; }
html[data-theme="light"] .score-stars .off { color: #7d8890; }
html[data-theme="light"] .score-stars.low .on { color: #7f8e9c; }
html[data-theme="light"] .trial-score { border-left-color: #e4e8eb; }
html[data-theme="light"] .trial-city { color: #465a66; }
html[data-theme="light"] .trial-hosp,
html[data-theme="light"] .trial-more { color: #657681; }
html[data-theme="light"] .badge-region,
html[data-theme="light"] .badge-cn,
html[data-theme="light"] .trial-state { color: #586873; background: #f1f4f5; }
html[data-theme="light"] .trial-stale-block { color: #765c2b; background: #fff9eb; border-color: #ead7a6; }
html[data-theme="light"] .trial-stale-block strong { color: #6b4e18; }
html[data-theme="light"] .pg-note { background: #fafbfc; border-color: #e0e5e8; }
html[data-theme="light"] .pg-note strong,
html[data-theme="light"] .pg-source-note b { color: #263843; }
html[data-theme="light"] .pg-note p,
html[data-theme="light"] .pg-source-note,
html[data-theme="light"] .pg-id { color: #63747f; }

/* 白底卡片以边框建立层级，悬停仅做轻微暖色提示。 */
html[data-theme="light"] .card,
html[data-theme="light"] .trial-row,
html[data-theme="light"] .pg-card,
html[data-theme="light"] .gd-gap,
html[data-theme="light"] .report-card { box-shadow: 0 1px 0 rgba(28,45,57,.025); }
html[data-theme="light"] .card:hover,
html[data-theme="light"] .trial-row:hover,
html[data-theme="light"] .pg-card:hover,
html[data-theme="light"] .gd-gap:hover,
html[data-theme="light"] .report-card:hover {
  background: #fffdfa;
  border-color: rgba(201,169,110,.52);
  box-shadow: 0 8px 24px rgba(34,47,56,.07);
}

@media (max-width: 900px) {
  .theme-toggle { margin-left: 6px; }
}

/* ==========================================================================
   浅色主题：正文级补全（对比度修复）
   ==========================================================================
   用户报的原话是「白色版，这些文字没有做适配啊，抓紧全站检查！」——
   截图里是详情页的「入组条件」滚动框，白底上几乎看不见字。

   根因不是漏了某一个类，而是**这套主题从深色起步、靠"逐条打补丁"转浅色**：
   - 浅色 token 块（文件上部）只覆盖了 `:root` 里那几个变量；
   - 但全站有近两百条规则是**写死十六进制**的（如 `.eligibility { color:#c3cdd7 }`），
     它们不读变量，于是 token 翻白了、这些规则没翻；
   - 结果就是**底色翻成白的、字还是深色主题那套浅灰** —— 白底浅灰约 1.6:1，
     远低于 WCAG AA 要求的 4.5:1，肉眼就是"没写字"。

   下面按"用户最容易撞见"的顺序补齐：详情页正文 → 列表卡片 → 导航页脚 →
   表单控件 → 筛选与空状态 → 各频道页 → 后台。
   配色统一取墨色系（`#17212a` → `#4a5b67` → `#566873` → `#6d7c87`，由重到轻），
   语义色沿用浅色 token 里已经加深过的那套（`--ok-fg` / `--err-fg` / `--warn-fg`）。
   ========================================================================== */

/* ---------- 1. 详情页：入组条件（用户截图里那块） ---------- */
/*
 * `.eligibility` 原来是 `#c3cdd7`（白底 1.61:1）。它自己已经用了 `var(--navy-3)`
 * 做底色，所以**底色翻白了、字没翻** —— 这是"半套主题"最典型的样子：
 * 一眼看过去是一块白，字几乎不存在。深色主题里那个浅灰压在深蓝上是 10.6:1，
 * 配色本身没错，错在没有浅色对应值。
 */
html[data-theme="light"] .eligibility {
  background: #f7f9fa;
  border-color: #e3e8eb;
  color: #26343d;
}
/* CDE 那版入排标准是 `<li>` 列表，同理 */
html[data-theme="light"] .eligibility-list li { color: #26343d; }
html[data-theme="light"] .eligibility-list li:last-child { border-bottom-color: #e6eaed; }
html[data-theme="light"] .eligibility-list li::before { color: #8b6425; }

/* 入排标题的语义符号：绿=可进 / 红=排除，白底上要压深才看得见 */
html[data-theme="light"] .elig-title { color: #17212a; }
html[data-theme="light"] .elig-mark.in { color: #246f55; }
html[data-theme="light"] .elig-mark.out { color: #a34f5a; }
html[data-theme="light"] .elig-scroll { border-color: #e3e8eb; }

/* 入组条件顶部的「性别不限 · ≥ 1 Year」胶囊：金色在白底上要加深 */
html[data-theme="light"] .trial-constraints {
  background: rgba(201,169,110,.13);
  border-color: rgba(201,169,110,.42);
  color: #7d5a1c;
}

/* 「研究终点」列表 */
html[data-theme="light"] .outcomes li { color: #2b3942; border-bottom-color: #e6eaed; }
html[data-theme="light"] .outcome-kind {
  background: rgba(201,169,110,.15);
  border-color: rgba(201,169,110,.4);
  color: #7d5a1c;
}
html[data-theme="light"] .outcome-time { color: #63747f; }
html[data-theme="light"] .arms li { color: #2b3942; border-bottom-color: #e6eaed; }
html[data-theme="light"] .arms p { color: #4a5b67; }
html[data-theme="light"] .arm-type { color: #63747f; border-color: #dfe5e8; }

/* 「核对登记原文（英文）」折叠：浅蓝在白底上只有 1.86:1 */
html[data-theme="light"] .abstract-en summary { color: #1d5fa8; }
html[data-theme="light"] .abstract-en summary:hover { color: #144a85; }
html[data-theme="light"] .summary.en {
  background: #f7f9fa;
  border-left-color: #dfe5e8;
  color: #3a4750;
}

/* 免责声明与小注释：12–13px 小字必须过 AA，`#7f8e9c` 只有 3.36:1 */
html[data-theme="light"] .disclaimer { color: #5c6f7d; }
html[data-theme="light"] .trial-block .sub-note { color: #5c6f7d; }
html[data-theme="light"] .trial-stopped { color: #8a5220; }

/* 事实表：`.fact dd` 的浅色补丁原来只改了 border-color、没改 color，
   于是值仍是深色主题的 `#d5dee7`（1.36:1）—— 这里补上字色。 */
html[data-theme="light"] .facts .fact dd,
html[data-theme="light"] .gd-field dd { color: #2b3942; }
html[data-theme="light"] .facts .fact dt,
html[data-theme="light"] .gd-field dt { color: #63747f; }
html[data-theme="light"] .gd-fulltext { background: #f7f9fa; border-color: #dfe5e8; }
html[data-theme="light"] .gd-fulltext-note { color: #3f4d58; }
html[data-theme="light"] .gd-fulltext.is-missing { background: transparent; }
html[data-theme="light"] .gd-fulltext.is-missing .gd-fulltext-note { color: #5c6f7d; }
html[data-theme="light"] .fact { border-bottom-color: #e6eaed; }

/* ---------- 2. 列表卡片正文（全站出现最多的一处） ---------- */
/*
 * 卡片摘要 `.summary` 在深色主题是 `#cfd8e2`，浅色块里只覆盖了 `.card-summary`，
 * 漏掉了 `.summary` 本身 —— 于是论文页与试验页每一条摘要都是白底浅灰。
 */
html[data-theme="light"] .summary,
html[data-theme="light"] .card-summary { color: #3f4d58; }
html[data-theme="light"] .card-title a { color: #17212a; }
html[data-theme="light"] .card-title a:hover { color: #8b6425; }
html[data-theme="light"] .card-meta,
html[data-theme="light"] .trial-meta,
html[data-theme="light"] .meta { color: #5c6f7d; }
html[data-theme="light"] .card .source,
html[data-theme="light"] .source { color: #7d5a1c; }
html[data-theme="light"] .authors,
html[data-theme="light"] .author-line { color: #4a5b67; }
html[data-theme="light"] .journal,
html[data-theme="light"] .pub-date { color: #5c6f7d; }

/* 评分：数字与星级在白底上要用深金，否则"分数"这一栏整体消失。
   `.score-value` / `.score-stars` 的浅色值在文件末尾那组补丁里已经给过
   （且已按 AA 校正），这里只补它漏掉的 `.low` 与 `.big-score`。 */
html[data-theme="light"] .score-value.low { color: #8b6425; }
html[data-theme="light"] .big-score { color: #8b6425; }
html[data-theme="light"] .score-bars i,
html[data-theme="light"] .bd-track { background: rgba(28,45,57,.10); }

/* 标签 chips：浅色块里 chip 只改了底色，文字仍是浅灰 */
html[data-theme="light"] .chip { color: #344751; background: #f6f8f9; border-color: #dfe5e8; }
html[data-theme="light"] .chip small { color: #63747f; }
html[data-theme="light"] .chip:hover { color: #17212a; border-color: rgba(201,169,110,.5); }
html[data-theme="light"] .chapter-chip,
html[data-theme="light"] .level { color: #7d5a1c; }

/* 来源徽标（PubMed / CT.gov / CDE / FDA…）都是浅亮色，白底上必须各自压深 */
html[data-theme="light"] .source[data-source="pubmed"] { color: #1d5fa8; }
html[data-theme="light"] .source[data-source="fda"] { color: #1f7a5c; }
html[data-theme="light"] .source[data-source="cn-policy"] { color: #9b4a3f; }
html[data-theme="light"] .untranslated { color: #8a6a1e; }

/* ---------- 3. 导航、页头与页脚 ---------- */
/* `body.home .nav a` 匹配不到浅色块里那两条（一条要 home-preview、
   一条要"非 home-preview"），于是首页导航仍是 `#b9c3cd`（1.79:1）。 */
html[data-theme="light"] .nav a,
html[data-theme="light"] body.home .nav a { color: #4a5b67; }
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav a.active { color: #17212a; }
html[data-theme="light"] .nav a.active { border-color: #c58b25; }
html[data-theme="light"] .brand-tagline { color: #4a5b67; }
html[data-theme="light"] .nav-ask .input[type="search"]::placeholder { color: #5f6d76; }
html[data-theme="light"] .footer,
html[data-theme="light"] .footer-link-group h2 { color: #26343d; }
html[data-theme="light"] .footer-link-list a,
html[data-theme="light"] .footer-link-group-secondary a { color: #4a5b67; }
html[data-theme="light"] .footer-note,
html[data-theme="light"] .footer-meta { color: #63747f; }
html[data-theme="light"] .footer-link-group,
html[data-theme="light"] .footer-bottom { border-color: rgba(28,45,57,.1); }

/* ---------- 4. 表单控件：深色底与"隐形边框" ---------- */
/*
 * 深色主题的表单是「深蓝底 + 白色低透明度描边」。白底上：
 *   - 深蓝底 → 一块突兀的黑方块；
 *   - `rgba(255,255,255,.13)` 描边 → 白底上完全看不见，输入框没有边界。
 * 浅色下统一改成白底 + 墨色描边。
 */
html[data-theme="light"] .input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .radar-settings input,
html[data-theme="light"] .watch-form .input,
html[data-theme="light"] .sub-form .input {
  background: #fff;
  border-color: #dbe1e5;
  color: #17212a;
}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #7a8891; }
html[data-theme="light"] .input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { border-color: #c58b25; }

/* 按钮：ghost 是浅灰字（2.09:1），实心按钮的白字压在亮金底上也不够 */
html[data-theme="light"] .btn { color: #17212a; border-color: #dbe1e5; background: #fff; }
html[data-theme="light"] .btn:hover { color: #8b6425; border-color: rgba(201,169,110,.5); }
html[data-theme="light"] .btn.ghost { color: #4a5b67; }
html[data-theme="light"] .btn.ghost:hover { color: #17212a; }
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.on {
  background: #a87928;
  border-color: #a87928;
  color: #fff;
}
html[data-theme="light"] .btn.disabled { color: #96a2aa; border-color: #e6eaed; }
/* 自建深色日期选择器整块是深蓝，浅色下必须换底 */
html[data-theme="light"] .cal-pop { background: #fff; border-color: #dbe1e5; box-shadow: 0 18px 44px rgba(28,45,57,.14); }
html[data-theme="light"] .cal-head { color: #17212a; border-bottom-color: #e6eaed; }
html[data-theme="light"] .cal-dow { color: #63747f; }
html[data-theme="light"] .cal-day { color: #2b3942; }
html[data-theme="light"] .cal-day:hover { background: #f2f5f7; }
html[data-theme="light"] .cal-day.out { color: #96a2aa; }
html[data-theme="light"] .cal-day.on { background: #a87928; color: #fff; }
html[data-theme="light"] .cal-trigger,
html[data-theme="light"] .cal-native { border-color: #dbe1e5; color: #2b3942; }

/* ---------- 5. 分面筛选、时间切换、空状态 ---------- */
/* `.facet-label` 那组 `#6f7d8b` 只有 4.22:1，小字不过 AA */
html[data-theme="light"] .facet-label,
html[data-theme="light"] .facet-row .chip small,
html[data-theme="light"] .ask-row-label,
html[data-theme="light"] .radar-hint { color: #4a5b67; }
html[data-theme="light"] .facet-head,
html[data-theme="light"] .facets summary { color: #26343d; }
html[data-theme="light"] .period-tabs .tab { color: #4a5b67; }
html[data-theme="light"] .period-tabs .tab.on { color: #7d5a1c; }
html[data-theme="light"] .sort-opt { color: #4a5b67; }
html[data-theme="light"] .empty-title { color: #26343d; }
html[data-theme="light"] .empty p,
html[data-theme="light"] .empty-hint { color: #5c6f7d; }
html[data-theme="light"] .bd-name { color: #4a5b67; }
html[data-theme="light"] .health-name,
html[data-theme="light"] .health-meta { color: #26343d; }
/* 分隔线：深色主题靠白色低透明度画线，白底上要反过来 */
html[data-theme="light"] .health-source,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .pager { border-color: #e6eaed; }
html[data-theme="light"] .back a { color: #4a5b67; }
html[data-theme="light"] .back a:hover { color: #17212a; }

/* ---------- 6. 首页预览区（原来有 6 条补丁打在了不存在的类名上） ---------- */
/*
 * `.hp-section-head` / `.hp-closing h2` 这两个选择器**只出现在浅色块里**，
 * 深色规则里根本没有 —— 也就是说那几条补丁从来没生效过。
 * 真正的类名是 `.hp-section-heading*` 与 `.hp-lead`，这里按真实类名重打。
 */
html[data-theme="light"] .hp-lead,
html[data-theme="light"] .hp-hero-copy > p,
html[data-theme="light"] .hp-section-heading > span,
html[data-theme="light"] .hp-section-heading > p,
html[data-theme="light"] .hp-audience-copy p,
html[data-theme="light"] .hp-signal-head p { color: #5c6f7d; }
/* `.hp-section-heading > p` 是每个区块标题上方那行 10px 的金色小标
   （「从你的问题开始」这类）。金色 `#e1b86b` 白底只有 1.86:1，
   而它比标题还小 —— 小字必须过 4.5:1，所以单独压到深金。 */
html[data-theme="light"] .hp-section-heading > p { color: #8b6425; }
html[data-theme="light"] .hp-section-heading h2 { color: #17212a; }
html[data-theme="light"] .hp-closing h2,
html[data-theme="light"] .hp-closing p { color: #17212a; }

/* ---------- 7. 疾病中心 ---------- */
html[data-theme="light"] .disease-title { color: #17212a; }
html[data-theme="light"] .disease-children { box-shadow: none; }
html[data-theme="light"] .disease-system-card h3 { color: #17212a; }
html[data-theme="light"] .disease-system-links a { color: #344751; }

/* ---------- 8. 监管框架 / 患者手册 / 指南共识 ---------- */
/* `.fw-source-count` 是每张监管卡上那个 22px 的数字，白底上原来是 1.61:1 */
html[data-theme="light"] .fw-source-count { color: #8b6425; }
html[data-theme="light"] .fw-card h3,
html[data-theme="light"] .fw-card strong { color: #17212a; }
html[data-theme="light"] .fw-card p,
html[data-theme="light"] .fw-path { color: #4a5b67; }
html[data-theme="light"] .fw-tag { color: #344751; background: #f6f8f9; border-color: #dfe5e8; }
html[data-theme="light"] .pg-section h3,
html[data-theme="light"] .pg-title { color: #17212a; }
html[data-theme="light"] .pg-section p,
html[data-theme="light"] .pg-card p { color: #3f4d58; }
html[data-theme="light"] .gd-gap h3,
html[data-theme="light"] .gd-title { color: #17212a; }
html[data-theme="light"] .gd-gap p,
html[data-theme="light"] .gd-evidence { color: #3f4d58; }

/* ---------- 9. 详情页侧栏与区块标题 ---------- */
html[data-theme="light"] .detail-side { background: #f7f9fa; border-color: #e3e8eb; }
html[data-theme="light"] .detail-side h3,
html[data-theme="light"] .trial-block h3 { color: #17212a; }
html[data-theme="light"] .section-title,
html[data-theme="light"] .eyebrow { color: #8b6425; }
html[data-theme="light"] .note { color: #6b5a2e; }
html[data-theme="light"] .lead,
html[data-theme="light"] .subtitle { color: #4a5b67; }
html[data-theme="light"] .site-list li,
html[data-theme="light"] .ethics-list li { color: #3f4d58; border-bottom-color: #e6eaed; }

/* ---------- 10. 账户区与后台剩余的深色标签 ---------- */
html[data-theme="light"] .account-badge,
html[data-theme="light"] .acct-badge { background: #a87928; color: #fff; }
html[data-theme="light"] .admin-setting-label,
html[data-theme="light"] .acct-stat span { color: #4a5b67; }

/* ==========================================================================
   浅色主题：第二轮 —— 用浏览器实测找出来的剩余项
   ==========================================================================
   上面那批是"照着 CSS 静态读"找的，只能发现"写死了深色值"的规则；
   但还有一类**静态读不出来**的问题：规则本身用的就是浅色主题该用的墨水色，
   只是**那个色号在白底上仍然不够**（或背景是浅灰、或字号很小）。

   所以这一批是**实测**出来的：用 CDP 打开真实页面，取每个文本节点的
   `getComputedStyle` 最终色 + 逐级向上算出的真实背景，按 WCAG 公式算比值，
   只保留低于 4.5:1（大字 3:1）的。下面每一条都是页面上真实可见的破绽。
   ========================================================================== */

/* 卡片右上角的评分数字：`#a87928` 只有 3.87:1（15px 粗体不算大字，仍要 4.5） */
html[data-theme="light"] .score-value,
html[data-theme="light"] .score-value.hot,
html[data-theme="light"] .score-value.mid,
html[data-theme="light"] .trial-score .score-value,
html[data-theme="light"] .trial-score .score-value.hot { color: #8b6425; }
/* 星级：金色 `#b8862c` 是 3.24:1，星星当文本看要 4.5，按文本处理 */
html[data-theme="light"] .score-stars .on,
html[data-theme="light"] .score-stars.hot .on,
html[data-theme="light"] .gd-gap-stars { color: #8b6425; }
/* `.low` 档（评分偏低）原来跟 `.on` 共用一个值，但它更浅，仍只有 3.65:1 */
html[data-theme="light"] .score-stars.low .on { color: #7a5a1e; }

/* 「条件筛选」「排序：」这些工具条的说明字：`#8695a5` 白底仅 3.06:1 */
html[data-theme="light"] .sort-toggle,
html[data-theme="light"] .pager-info,
html[data-theme="light"] .facet-sub-label { color: #5c6f7d; }
/* 翻页按钮的禁用态：`#96a2aa` 只有 2.61:1 —— 禁用不等于看不见 */
html[data-theme="light"] .btn.tiny.disabled,
html[data-theme="light"] .btn.disabled { color: #6d7c87; border-color: #e6eaed; }

/* 指南共识的「缺口」卡片：模块名与星级原来是深色主题的亮色 */
html[data-theme="light"] .gd-gap-name { color: #17212a; }
html[data-theme="light"] .gd-gap-finding { color: #3f4d58; }

/* 疾病中心的适应症胶囊 */
html[data-theme="light"] .modality-name { color: #344751; border-color: #dfe5e8; }
html[data-theme="light"] .modality-name:hover { color: #8b6425; border-color: rgba(201,169,110,.5); }
html[data-theme="light"] .modality-name small { color: #5c6f7d; }

/* 「出处待核验」这类未核验标记：`#d9b877` 白底只有 1.9:1 */
html[data-theme="light"] .src-gap-tag { color: #8a5220; background: rgba(201,169,110,.16); border-color: rgba(201,169,110,.4); }

/* 首页页脚的大字水印与来源栏：`#b9c5ce` / `#bbc7cf` 白底约 1.76:1。
   这里用 `#63747f` 而不是 `#6d7c87`：后者在白底上只有 4.3:1，
   仍差一点点不过 AA —— 小字（11px）就该按小字的标准给色。 */
html[data-theme="light"] .hp-footer-word { color: #63747f; }
html[data-theme="light"] .hp-footer-word i { background: #c58b25; box-shadow: none; }
html[data-theme="light"] .hp-source-mark b { color: #344751; }
html[data-theme="light"] .hp-sources > p,
html[data-theme="light"] .hp-source-note { color: #5c6f7d; }

/* 首页英雄区与资料计数：`rgba(225,184,107,.65)` 叠在白底上约 1.5:1 */
html[data-theme="light"] .hp-kicker,
html[data-theme="light"] .hp-proof span { color: #a87928; }
html[data-theme="light"] .hp-hero-stat span,
html[data-theme="light"] .hp-proof p { color: #4a5b67; }
html[data-theme="light"] .hp-proof strong { color: #17212a; }
/* 首页大标题里那半句金色：`var(--hp-gold)`=`#e1b86b` 白底只有 1.86:1。
   它是 64px 的展示级大字（走 3:1 档），但 1.86 仍差得远；压到 `#8b6425` 得 5.3:1，
   而且这是"整句标题的高亮前半句"，压深后反而更像标题该有的分量。 */
html[data-theme="light"] .hp-hero h1 span { color: #8b6425; }

/* 卡片序号「01」这类装饰数字：`rgba(225,184,107,.65)` 白底约 1.48:1 */
html[data-theme="light"] .hp-path-card b,
html[data-theme="light"] .hp-special-card b,
html[data-theme="light"] .hp-path-index { color: #8b6425; }

/* 首页页脚底部那行小字与来源说明：8–10px，最容易被忽略的尺寸 */
html[data-theme="light"] .hp-footer-base { color: #5c6f7d; }
html[data-theme="light"] .hp-source-mark b { color: #344751; }
/* 英雄区右侧统计里「可查询的资料」「临床试验」这些小标签 */
html[data-theme="light"] .hp-stat span,
html[data-theme="light"] .hp-signal-grid span,
html[data-theme="light"] .hp-disease-list small { color: #5c6f7d; }
/* 「适合已经明确疾病名称的用户」这类卡片小注 */
html[data-theme="light"] .hp-path-card > small,
html[data-theme="light"] .hp-special-card span { color: #5c6f7d; }
/* 会员区底部提示行：`#6d7c87` 在暖白底上只有 4.1–4.3:1 */
html[data-theme="light"] .hp-member-note,
html[data-theme="light"] .hp-member-quiet,
html[data-theme="light"] .hp-member-panel-head { color: #566873; }
html[data-theme="light"] .hp-member-note a { color: #3f5566; }
html[data-theme="light"] .hp-member-quiet a { color: #8b6425; }

/* 未点亮星：深色主题是 `#38434e`（暗底上 10:1），浅色下**不能照抄翻转**——
   原来那条浅色值 `#d3d9dd` 只有 1.42:1，等于评分刻度消失。
   空星要"看得见但明显弱于金星"，所以定在 `#a8b2b9`（约 2.2:1）：
   它不过正文的 4.5:1，这是**刻意的**——它是未点亮状态的图形符号，
   不是要读的文字；只要轮廓可辨、层次清楚即可。 */
html[data-theme="light"] .score-stars .off { color: #7d8890; }

/* ---------- 11. 首页英雄区统计块（`.hp-signal`） ---------- */
/*
 * 这块在深色主题里是"暗底上浮一个亮数字"，所以小标签用了很浅的灰蓝；
 * 白底上它们掉到 2.7–3.1:1。注意标签是 `<span>` 而非 `p`，
 * 上面那条 `.hp-signal-head p` 是**打不中**的 —— 这里按真实结构补。
 */
html[data-theme="light"] .hp-signal-head > span,
html[data-theme="light"] .hp-signal-core > span,
html[data-theme="light"] .hp-signal-core small,
html[data-theme="light"] .hp-signal-grid span { color: #5c6f7d; }
html[data-theme="light"] .hp-signal-core b,
html[data-theme="light"] .hp-signal-grid b { color: #17212a; }
/* 「而不是你一直来找它」是 44px 展示大字（走 3:1 档），
   但 `--gold-deep` 叠在 `#f4f6f8` 上只有 2.73:1，深一档即可过线。 */
html[data-theme="light"] .hp-closing em,
html[data-theme="light"] .hp-closing strong { color: #8b6425; }

/* ---------- 12. 筛选框把手「条件筛选」 ---------- */
html[data-theme="light"] .facets-handle,
html[data-theme="light"] .facets-handle > span { color: #5c6f7d; }
html[data-theme="light"] .facets-handle b { color: #8b6425; }

/* ---------- 13. 收尾：几处"差一口气"的浅灰与金色 ----------
 * 这几条都是 8–12px 的小字，卡在 3.55–4.46:1 之间 —— 看着"还行"，
 * 但小字在白底上最容易累眼，所以按实测逐条压到达标。
 * 注意选择器按**真实 DOM 结构**写（很多是裸 `span`/`small`，
 * 只能靠父级限定），不是照抄类名。 */
/* 页脚金色 CTA 上方的说明句（`#6d7c87` 在暖白底 `#fcf9f4` 上只有 4.1:1） */
html[data-theme="light"] .hp-join p > span { color: #566873; }
/* 页脚来源栏的机构小名（8px，`#687a85` 只有 4.46:1） */
html[data-theme="light"] .hp-source-mark small { color: #566873; }
/* 区块序号「01」：一处是深金已达标，一处仍是半透明金（1.55:1） */
html[data-theme="light"] .hp-board-title b { color: #8b6425; }
/* 卡片下的小注 */
html[data-theme="light"] .hp-path-card > small,
html[data-theme="light"] .hp-disease-list small { color: #566873; }
/* 「而不是你一直来找它」：44px 大字走 3:1 档，`#c58b25` 在 `#f4f6f8` 上 2.73:1 */
html[data-theme="light"] .hp-closing em,
html[data-theme="light"] .hp-closing strong { color: #7a5a1e; }
/* 首页英雄区统计的数字标签 */
html[data-theme="light"] .hp-signal-core b,
html[data-theme="light"] .hp-proof strong { color: #17212a; }
/* 卡片小注与统计小字：12px 及以下，`#687b87` 只有 4.4:1 */
html[data-theme="light"] .hp-path-card > small,
html[data-theme="light"] .hp-disease-list small,
html[data-theme="light"] .hp-section-heading > span { color: #566873; }
/* 评分明细里的小数值 `bd-val`（11.5px，压在浅灰底上 4.25:1） */
html[data-theme="light"] .bd-val { color: #4a5b67; }

/* ---------- 14. 三处"选择器猜错父级"的修正 ----------
 * 上面第 13 批里有三条我按类名推测了父级，实测没生效（父级其实不同）。
 * 这里按浏览器报出的**真实路径**重写，并保留说明，免得下次再猜错。 */
/* 真实路径：`section.hp-member > .hp-member-copy > h2 > em`
   —— 不在 `.hp-closing` 里，而在 `.hp-member` 的 H2 里。 */
html[data-theme="light"] .hp-member-copy h2 em { color: #7a5a1e; }
/* 真实路径：`nav.pager > span.btn.tiny.disabled`
   —— `.btn.disabled` 那条因为 `.btn.tiny.disabled` 优先级更高而没生效，
   这里用同等优先级（三类的组合）直接压过去。 */
/* 翻页按钮的禁用态：`#96a2aa` 只有 2.61:1 —— 禁用不等于看不见。
   注意基础规则里还有 `.btn.disabled { opacity: .4 }`（1342 行），
   它会**再乘一层透明度**把字压到几乎看不见 —— 白底上必须一并取消，
   改用"浅灰字 + 更淡边框"表达禁用，而不是靠整块变透明。 */
html[data-theme="light"] .btn.tiny.disabled,
html[data-theme="light"] .btn.small.disabled,
html[data-theme="light"] .pager .btn.disabled {
  color: #63747f;
  border-color: #e6eaed;
  opacity: 1;
}
/* 真实路径：`.hp-board-title > div > small`（疾病面板副标题，12px） */
html[data-theme="light"] .hp-board-title small { color: #566873; }
html[data-theme="light"] .hp-board-title span { color: #17212a; }

/* ---------- 15. 最后的 10px 计数小字 ----------
 * 到这一步整站只剩这两处未达标，都是**10px 的条数角标**
 * （疾病卡「4068」、首页技术路线「11,588 条资料」）。
 * 10px 已经很小了，再淡就等于没写 —— 按小字标准压到达标。 */
html[data-theme="light"] .disease-system-links a small { color: #5c6f7d; }
html[data-theme="light"] .hp-modality-cloud a small { color: #566873; }

/* ---------- 16. 登录页「还没有账户？立即注册」 ---------- */
/* 金色 `--hp-gold`=`#e1b86b` 压在浅灰表单底 `#fafbfb` 上只有 1.8:1 ——
   这是登录页唯一的转化入口，白底上必须用深金。 */
html[data-theme="light"] .auth-switch a,
html[data-theme="light"] .auth-switch b { color: #8b6425; }
html[data-theme="light"] .auth-switch a:hover { color: #7a571f; }

/* 「免费注册账户」白字压在 `--gold-deep` 上只有 2.96:1：
   把底色换成更深的金（`#8b6425` → 4.9:1），白字才立得住。 */
html[data-theme="light"] .hp-join-actions a:first-child,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.on {
  background: #8b6425;
  border-color: #8b6425;
  color: #fff;
}
html[data-theme="light"] .hp-join-actions a:first-child:hover { background: #7a571f; }

/* ---------------------- 后台：浅色主题 ----------------------
 * 后台整幅都是浅色卡片，深色主题那套"白色低透明度色块"在白底上等于隐形，
 * 所以这里把每一类标签都换成**墨色底 + 实色字**，语义色也一并加深
 * （`--ok-fg` / `--warn-fg` / `--err-fg` 在浅色 token 里已经是深色版，
 * 但背景 `--ok-bg` 等偏淡，配白卡片需要更明显的边线才立得住）。 */
html[data-theme="light"] .admin-table tbody tr:hover { background: #f7f9fa; }
html[data-theme="light"] .admin-table th { color: #667984; border-color: rgba(28,45,57,.1); }
html[data-theme="light"] .admin-table td { color: #263842; border-color: rgba(28,45,57,.08); }
html[data-theme="light"] .admin-time time { color: #34434d; }
html[data-theme="light"] .admin-time time span { color: #74838d; }
html[data-theme="light"] .admin-target { color: #465a66; }
html[data-theme="light"] .admin-detail { color: #4c5f6b; }
html[data-theme="light"] .admin-empty,
html[data-theme="light"] .admin-nil { color: #8695a0; }
html[data-theme="light"] .admin-action-en { color: #7d8b95; }
html[data-theme="light"] .admin-tag { color: #4f606b; background: #f1f4f5; border-color: #dce2e6; }
html[data-theme="light"] .admin-tag.is-admin { color: #8b6425; background: rgba(225,184,107,.14); border-color: rgba(201,169,110,.4); }
html[data-theme="light"] .admin-tag.action { color: #3f70a4; background: #edf5ff; border-color: #cfe1f5; }
html[data-theme="light"] .admin-tag.plan-member,
html[data-theme="light"] .admin-tag.plan-professional,
html[data-theme="light"] .admin-tag.plan-plus,
html[data-theme="light"] .admin-tag.plan-pro,
html[data-theme="light"] .admin-tag.plan-max,
html[data-theme="light"] .admin-tag.state-active { color: #246f55; background: #eaf6f0; border-color: #c6e3d6; }
html[data-theme="light"] .admin-tag.state-pending { color: #8b6822; background: #fff7df; border-color: #ecd9a8; }
html[data-theme="light"] .admin-tag.state-suspended,
html[data-theme="light"] .admin-tag.state-expired { color: #a34f5a; background: #fff0f1; border-color: #f0ccd0; }

/* 独立疾病索引：沿用旧版的系统分类，同时适配深浅双色。 */
.disease-system-grid {
  columns: 2;
  column-gap: 14px;
}
.disease-system-card {
  margin: 0 0 14px;
  padding: 22px 24px;
  border: 1px solid var(--hair);
  background: rgba(7,19,31,.6);
  break-inside: avoid;
}
.disease-system-card h3 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  color: var(--white);
  font-size: 15px;
}
.disease-system-links { display: flex; flex-wrap: wrap; gap: 8px; }
.disease-system-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  color: #c9d2d9;
  background: rgba(255,255,255,.025);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.disease-system-links a small { color: #728391; font-size: 10px; }
.disease-system-links a:hover { color: var(--champagne-2); border-color: var(--line-gold); background: rgba(201,169,110,.08); }

html[data-theme="light"] .disease-system-card {
  border-color: #dfe5e8;
  background: #fff;
}
html[data-theme="light"] .disease-system-card h3 { color: #17212a; border-bottom-color: #e5e9ec; }
html[data-theme="light"] .disease-system-links a { color: #344751; border-color: #dfe5e8; background: #fff; }
html[data-theme="light"] .disease-system-links a small { color: #5c6f7d; }
html[data-theme="light"] .disease-system-links a:hover { color: #8b6425; border-color: rgba(201,169,110,.5); background: #fffaf1; }

@media (max-width: 760px) {
  .disease-system-grid { columns: 1; }
  .disease-system-card { padding: 18px; }
}

/* ==========================================================================
   高级情报功能（Trial Intelligence / Paper Intelligence）
   —— 设计稿：《临床试验高级功能》《论文高级研究功能》成品样式 A–G

   命名与现有系统的关系：
     · 全部新类名统一前缀 `intel-`，**不与既有类名重叠**，所以这一整块
       可以整段删除而不影响站内任何现有页面（升级出问题时的退路）。
     · 颜色一律取自 :root 的设计 Token（--navy* / --champagne* / --hair /
       --ok-* / --warn-* / --err-*），不写死十六进制，
       现有浅色主题（html[data-theme="light"]）只需要在文件末尾补覆盖。
     · 排版沿用详情页的 --fs-prose / --fs-meta / --lh-prose 三把尺子，
       新页面与现有详情页的字号层级保持一致。
   ========================================================================== */

.intel-shell { display: block; }
.intel-head { margin: 0 0 22px; }

/* ----------------------------------------------------------------------------
   英文字体只有一套：跟随正文的无衬线体。
   ----------------------------------------------------------------------------
   原来这里踩了个不一致：`.intel-eyebrow` 用等宽字体（mono），而状态徽章
   （PROCESSING / ABSTRACT ONLY / NEEDS REVIEW）和引句块继承正文的 sans ——
   同一页上「AI PAPER REVIEW」是一个字体、三个徽章是另一个字体，
   中文又是第三个字体，看着像三套东西拼起来的。

   现在全部统一到 `.eyebrow` 已经用了多年的那一套（正文 sans + 字距 + 大写 +
   金色），与站内其它板块的小标签完全一致。**不留任何 mono 字体**：
   这个页面没有代码块，等宽体在这里没有任何语义。
   -------------------------------------------------------------------------- */
.intel-eyebrow {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
}
.intel-title {
  margin: 0 0 9px;
  font-size: 23px;
  line-height: 1.35;
  color: var(--white);
  font-weight: 600;
  letter-spacing: .01em;
}
.intel-sub { margin: 0; font-size: var(--fs-meta); color: var(--slate); max-width: 78ch; line-height: 1.7; }
/**
 * 英文原题（用户 2026-09-25：「可以附上英文题目，仅仅是题目即可，放在中文下面」）。
 *
 * ⚠️ 它是**中文标题的对照**，不是第二行正文：字号比 `.intel-sub` 不动（同一档 `--fs-meta`），
 * 只把颜色压淡一档（`--slate-2`）、行高收紧、与上面那行贴紧 3px ——
 * 靠「淡一档」区分主次，不靠加粗或加大（那会变成两个标题在打架）。
 */
.intel-sub-en { margin: 3px 0 0; font-size: var(--fs-meta); color: var(--slate-2); max-width: 78ch; line-height: 1.6; }

/* ----------------------------- 提示条 ----------------------------- */
.intel-banner {
  margin: 14px 0;
  padding: 13px 16px;
  border: 1px solid rgba(201, 169, 110, .3);
  border-left-width: 3px;
  background: rgba(201, 169, 110, .06);
  color: #ddD6c6;
  font-size: var(--fs-meta);
  line-height: var(--lh-prose);
}
.intel-banner strong { color: var(--champagne-2); font-weight: 600; }
.intel-note { font-size: 11.5px; color: var(--slate-2); line-height: 1.7; margin: 8px 0; }
.intel-empty {
  margin: 16px 0;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, .12);
  color: var(--slate-2);
  font-size: var(--fs-meta);
  text-align: center;
}
.intel-source { font-size: 11px; color: var(--slate-2); }
.intel-source + .intel-source { margin-left: 6px; }

/* ----------------------------- 徽章 ----------------------------- */
.intel-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.intel-badge, .intel-badge-gold, .intel-badge-good, .intel-badge-warn, .intel-badge-danger {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  background: rgba(255, 255, 255, .02);
}
.intel-badge-gold   { border-color: var(--line-gold); color: var(--champagne-2); }
.intel-badge-good   { border-color: rgba(143, 199, 173, .42); color: var(--ok-fg); }
.intel-badge-warn   { border-color: rgba(227, 196, 119, .42); color: var(--warn-fg); }
.intel-badge-danger { border-color: rgba(228, 165, 173, .42); color: var(--err-fg); }

/* ----------------------------- 按钮行 ----------------------------- */
.intel-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 16px 0; }
.intel-actions .note { margin: 0; }

/* ----------------------------- 卡片 ----------------------------- */
.intel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px; margin: 14px 0; }
.intel-card { background: rgba(255, 255, 255, .022); padding: 16px 17px;}
.intel-card-title {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--champagne-2);
  letter-spacing: .02em;
}
.intel-card p { margin: 0; font-size: var(--fs-meta); color: #b9c6cf; line-height: var(--lh-prose); }

/* 事实行（用在卡片、抽屉、对比提示里） */
.intel-rows { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 0 14px; }
.intel-row { display: contents; }
.intel-row-k, .intel-row-v { padding: 6px 0; font-size: var(--fs-meta); line-height: 1.65;}
.intel-row-k { color: var(--slate-2); }
.intel-row-v { color: #d3dde4; }
.intel-rows > .intel-row:last-child .intel-row-k,
.intel-rows > .intel-row:last-child .intel-row-v { }

/* ----------------------------- 指标条 ----------------------------- */
/* 证据卡。
 * ⚠️ 卡片最小宽度从 120px 提到 180px（用户：「这种突然这么大的字号，是咋想的呢，
 * 破坏平衡吗」）。六张卡挤在 1120px 画布上时，一张只有 ~160px，
 * 15px 的值要折成四五行的窄柱 —— 一屏全是竖着的字，密度失衡。
 * 放宽最小宽度后宽屏仍是六张一排、窄屏自动落成两排，但每张卡里的字排得开。 */
.intel-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; margin: 16px 0; }
.intel-metric { background: rgba(255, 255, 255, .025); padding: 11px 12px;}
.intel-metric-k { font-size: 10px; color: var(--slate-2); letter-spacing: .05em; }
/* 证据卡数值。
 * ⚠️ 原来是 17px / 字重 650 —— 比正文（13.5px）大 3.5px，只比小节标题（16px）小 1px，
 * 六张卡横排时整页最响的是这几行字。现在收到 15px / 600：仍是卡片里最重的一层，
 * 但不再跟标题抢层级（用户：「这种突然这么大的字号……破坏平衡」）。 */
.intel-metric-v { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.35; }
.intel-metric-s { margin-top: 2px; font-size: 10px; color: var(--slate-2); }

/* ----------------------------- 治疗流程 ----------------------------- */
.intel-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0; }
.intel-flow-step { display: inline-flex; align-items: center; padding: 8px 11px; background: rgba(255, 255, 255, .03); font-size: 11.5px; color: #cfd9e0;}
.intel-flow-step.intel-node-key { color: var(--champagne-2); background: rgba(201, 169, 110, .07); }
.intel-flow-arrow { color: var(--champagne); opacity: .55; font-size: 11px; }
.intel-node { padding: 7px 10px; font-size: 11px; color: #cfd9e0; background: rgba(255, 255, 255, .03);}
.intel-node.intel-node-key { color: var(--champagne-2); }

/* ----------------------------- 入排标准 ----------------------------- */
/* `.intel-tier` / `.intel-tier-head`（三级「完整原始标准」折叠）已随该区块删除 ——
   登记原文与逐条英文核对由详情页负责，这里不再重复。 */
.intel-elig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 13px; margin: 12px 0; }
.intel-elig-box { background: rgba(255, 255, 255, .022); padding: 15px 16px;}
.intel-elig-list { margin: 8px 0 0; padding: 0; list-style: none; }
.intel-elig-list > li {
  padding: 7px 0 7px 15px;
  font-size: var(--fs-elig);
  line-height: 1.72;
  color: #c2ced7;
  position: relative;
}
.intel-elig-list > li:last-child { }
.intel-elig-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 5px;
  height: 5px;
  background: var(--champagne);
  opacity: .6;
}
.intel-elig-list.intel-elig-raw > li::before { background: var(--slate-2); opacity: .5; }

/* 原文引用块。
   ⚠️ 原来这里用等宽字体，与页面其余英文不是一套 —— 统一改为正文 sans。
   引句的「这是原文」只靠**左侧一条线**表达；底色撤掉了 ——
   底色 + 线条 + 圆角叠在一起就是又一只盒子，而它跟正文本来就一路之隔
   （用户：「各种线条，不必要的线体能少就少」）。

   颜色：**压淡一档**（用户：「论文解读里，原文的颜色要淡一些。」）。
   原来这里是写死的 `#bfcdd6`，与正文 `#d3dde4` 只差一点点，满屏英文读起来
   就是**第二段正文** —— 而引文是证据，不是叙述，两者不该一个亮度。
   改走 `--slate` 这一档：正文 `#d3dde4` → 引文 `#9aa8b6`（深色底上 7.3:1，
   仍高于 AA 的 4.5:1，淡下去但不牺牲可读性）。
   ⚠️ 用变量而不是再写一个十六进制：浅色主题的 `--slate`（`#596a76`）自动跟着换，
   两套主题的层级差才是同一条 —— 所以下面 `html[data-theme="light"]` 那份覆盖里
   **不再写 color**，只留边框色。 */
.intel-quote {
  margin: 14px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--line-gold);
  background: none;
  font-size: 12px;
  line-height: 1.8;
  color: var(--slate);
  white-space: pre-wrap;
  word-break: break-word;
}
.intel-quote p { margin: 0; }
/**
 * 引文下那行字 —— **只在校对失败时才出现**。2026-09-25 之前它是每段引文下的常态
 * （「原文摘录，可在下方摘要与全文中逐字核对」），用户说「这类提示极其容易打断
 * 文字阅读，统统去掉。统一了，不保留」，于是常态那句删了。
 *
 * 剩下的是 `原文引用未能核对：…` —— 那不是提示，是**这条引文没能在原文里逐字找到**
 * 的事实，读者有权知道。样式仍压在注解档位（10px / 50%）。
 */
.intel-quote .intel-note { margin: 4px 0 0; font-size: 10px; line-height: 1.55; color: var(--slate-2); opacity: .5; font-weight: 400; }
.intel-quote small { display: block; margin-top: 7px; color: var(--slate-2); font-size: 10.5px; }

/* ----------------------------- 时间线 ----------------------------- */
.intel-timeline { position: relative; margin: 12px 0 0 6px; padding-left: 20px; }
.intel-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 8px; width: 1px; background: var(--hair); }
.intel-event { position: relative; padding-bottom: 15px; }
.intel-event::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--navy-3);
}
.intel-event.intel-event-future::before { background: transparent; border-color: var(--slate-2); }
.intel-event-date { font-size: 10.5px; color: var(--champagne); letter-spacing: .04em; }
.intel-event-title { display: block; margin: 3px 0 0; font-size: 12.5px; color: #dce4e9; }
.intel-event-note { display: block; margin-top: 2px; font-size: 11px; color: var(--slate-2); line-height: 1.65; }

/* ----------------------------- 变化追踪 ----------------------------- */
.intel-change { margin: 9px 0; padding: 12px 14px; background: rgba(255, 255, 255, .022);}
.intel-change.intel-change-important { border-left-color: var(--champagne); background: rgba(201, 169, 110, .05); }
.intel-change-date { font-size: 10.5px; color: var(--slate-2); letter-spacing: .04em; }
.intel-change-title { display: block; margin: 4px 0; font-size: 12.5px; color: var(--white); }
.intel-change-old, .intel-change-new { font-size: 11.5px; line-height: 1.7; }
.intel-change-old { color: var(--slate-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.22); }
.intel-change-new { color: var(--champagne-2); }

/* ----------------------------- 对比 ----------------------------- */
.intel-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.intel-tab { padding: 6px 11px; font-size: 11.5px; color: var(--slate); background: rgba(255, 255, 255, .03);}
.intel-tab.intel-tab-on { background: rgba(201, 169, 110, .08); color: var(--champagne-2); background: rgba(201, 169, 110, .12);}
.intel-matrix { overflow-x: auto; margin: 14px 0; }
.intel-matrix table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.intel-matrix th, .intel-matrix td { padding: 9px 12px; border-bottom: 1px solid var(--hair-2); text-align: left; vertical-align: top; }
.intel-matrix thead th { background: rgba(255, 255, 255, .03); color: var(--champagne-2); font-weight: 600; white-space: nowrap; }
/**
 * ⚠️ 行首的指标名走的是 `tbody th` 这条规则（所以视图里必须发 `<th scope="row">`）。
 * `nowrap` 一失效，指标名就会被挤到折行：「研究中心数」「主要完成日期」折两行、
 * 论文侧「≥3 级 CRS」折三行，于是最后几行比前面高出一截
 * （用户 2026-09-24：「最后几项跟前面保持一致不好吗」）。
 */
.intel-matrix tbody th { color: var(--slate); font-weight: 400; white-space: nowrap; }
/**
 * 表头里的论文标题：**限宽 + 两行封顶**。
 * 整条标题不折行时，5 篇论文把表撑到 2694px，而容器只有 1022px ——
 * 最后几列被推到屏外、列宽还忽宽忽窄（用户 2026-09-24：「比到最后几项格式就乱了」）。
 * 完整标题仍在 `title` 属性里，悬停与读屏都拿得到。
 */
.intel-matrix thead th .intel-matrix-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  max-width: 160px; white-space: normal; overflow: hidden; vertical-align: top;
}
/* 「移除」另起一行：挤在标题右边会给每一列再添 40px */
.intel-matrix thead th .intel-cite,
.intel-matrix thead th .chip { display: block; margin: 4px 0 0; }
.intel-matrix tr:last-child th, .intel-matrix tr:last-child td { border-bottom: 0; }
/**
 * ⚠️ `grid-auto-rows: 1fr` —— 卡片**跨行也等高**。
 * 原来是各算各的：第一行被一张长文卡（主要终点原文）撑到 328px，最后一行只有 86px，
 * 用户 2026-09-24：「最后几项跟前面保持一致不好吗」。
 * 代价是公共行高由最长那张卡决定（短卡会留白）；要压矮就给卡片正文封顶，别改回 auto。
 */
.intel-synth { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 11px; margin: 16px 0; }
.intel-synth-item { background: rgba(255, 255, 255, .022); padding: 13px 15px;}
.intel-synth-item b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--champagne-2); }
.intel-synth-item p { margin: 0; font-size: 11.5px; line-height: 1.75; color: #b6c4cd; }
/**
 * ⚠️ 卡片正文**封顶 4 行**。登记库的「主要终点」原文能有 500 字，塞进 247px 的卡片就是
 * 11 行 —— 配合 `grid-auto-rows: 1fr`，它把**整排**卡片拉到 328px，短卡留一大片空白
 * （用户 2026-09-24 截图：「这个地方还是很丑啊」）。
 * 全文没有丢：上面那张表同一维度就是全文，悬停也还有 `title`。
 * 想更长/更短只改这一个数字，别把 `overflow: hidden` 拿掉（拿掉就等于没封顶）。
 */
.intel-synth-item .intel-synth-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

/* ----------------------------- AI 解读段落 ----------------------------- */
.intel-section { padding: 16px 0 4px; }
.intel-section:first-of-type { }
.intel-section-label { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--white); }
.intel-section-text { margin: 0; font-size: var(--fs-prose); line-height: var(--lh-prose); color: #d3dde4; }
.intel-cite { margin-left: 7px; font-size: 11px; color: var(--champagne); text-decoration: none; border-bottom: 1px dotted var(--line-gold); }
.intel-cite:hover { color: var(--champagne-2); }

/* ----------------------------- 证据抽屉 -----------------------------
   纯 CSS 的 :target 抽屉：设计稿要求「点击关键指标，右侧展开来源，不离开当前页」。
   不引入 JS 的理由与站内其它交互一致 —— 这个项目至今没有前端框架，
   所有交互都用 details / :target / 原生表单实现，抽屉不该成为第一个例外。
   默认隐藏，锚点命中时显示；小屏改为内联展开（见文末媒体查询）。 */
.intel-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(390px, 92vw);
  height: 100vh;
  overflow-y: auto;
  z-index: 60;
  background: var(--navy-2);
  border-left: 1px solid var(--line-gold);
  box-shadow: -18px 0 55px rgba(0, 0, 0, .45);
}
.intel-drawer:target { display: block; }
.intel-drawer-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--navy-3);
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--champagne-2);
}
.intel-drawer-close { color: var(--slate); text-decoration: none; font-size: 15px; line-height: 1; }
.intel-drawer-close:hover { color: var(--white); }
.intel-drawer-body { padding: 16px; }

/* ----------------------------- 状态卡 -----------------------------
   一页只出现**一个**状态（当前真实状态），所以单卡时不要再撑成三列栅格。
   `-single` 修饰符把宽度收在可读区间，并把它从「并列的三张卡」变成
   「一句状态说明 + 一个可执行的下一步」。 */
.intel-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
.intel-status-grid-single { grid-template-columns: minmax(0, 1fr); }
.intel-status-grid-single .intel-status-card { background: rgba(255, 255, 255, .022);}
.intel-status-card { background: rgba(255, 255, 255, .018); padding: 16px 18px; }
.intel-status-card h3 { margin: 11px 0 6px; font-size: 15px; color: var(--white); letter-spacing: .01em; }
.intel-status-card p { margin: 0; font-size: var(--fs-meta); line-height: 1.75; color: #9fb0bd; max-width: 74ch; }

/* 生成按钮：与状态卡同宽的一行，右边留出额度的说明位置 */
.intel-generate { margin: 16px 0 10px; }
.intel-generate .btn { min-width: 190px; justify-content: center; }
.intel-generate .btn.is-loading { opacity: .72; cursor: progress; }

/* ----------------------------- 证据链 ----------------------------- */
.intel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.intel-chain-node { display: inline-flex; flex-direction: column; gap: 3px; padding: 11px 13px; background: rgba(255, 255, 255, .03); font-size: 11.5px; min-width: 130px;}
.intel-chain-node strong { color: var(--champagne-2); font-size: 11.5px; font-weight: 600; }
.intel-chain-node span { color: var(--slate-2); font-size: 10.5px; }
.intel-chain-node a { color: inherit; text-decoration: none; }
.intel-chain-arrow { color: var(--champagne); opacity: .5; }

/* ----------------------------- 对比篮 -----------------------------
   固定右下角的轻量面板（设计稿成品样式 D）。它**不遮挡正文**：
   宽度固定、位置贴边，正文的右侧留白足够。 */
.intel-basket {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: min(330px, 88vw);
  background: var(--navy-4);
  border: 1px solid var(--line-gold);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
}
.intel-basket-head { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; font-size: 12px; color: var(--champagne-2); }
.intel-basket-list { max-height: 40vh; overflow-y: auto; }
.intel-basket-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 9px 14px; }
.intel-basket-item:last-child { }
.intel-basket-item b { display: block; font-size: 11.5px; color: #dbe3e8; font-weight: 500; }
.intel-basket-item span { font-size: 10.5px; color: var(--slate-2); }
.intel-basket-item a { color: var(--slate-2); text-decoration: none; font-size: 14px; line-height: 1; }
.intel-basket-item a:hover { color: var(--err-fg); }
.intel-basket-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; }
.intel-basket-foot span { font-size: 10.5px; color: var(--slate-2); }
.intel-compare-btn {
  padding: 7px 11px;
  border: 1px solid var(--line-gold);
  background: rgba(201, 169, 110, .12);
  color: var(--champagne-2);
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
}
.intel-compare-btn:hover { background: rgba(201, 169, 110, .2); }

/* ----------------------------- 响应式 ----------------------------- */
@media (max-width: 860px) {
  .intel-drawer {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    box-shadow: none;
    border-left: 1px solid var(--hair);
    margin: 12px 0;
  }
  .intel-drawer:target { display: block; }
  .intel-basket { position: static; width: auto; margin: 18px 0 0; }
  .intel-metrics { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .intel-rows { grid-template-columns: 1fr; gap: 0; }
  .intel-row-k { padding-bottom: 0; border-bottom: 0; }
  .intel-row-v { padding-top: 2px; }
}

/* ----------------------------- 浅色主题 ----------------------------- */
html[data-theme="light"] .intel-title { color: #17212a; }
html[data-theme="light"] .intel-sub { color: #566873; }
html[data-theme="light"] .intel-banner { color: #4b5058; background: #fdf8ee; border-color: rgba(139, 100, 37, .32); }
html[data-theme="light"] .intel-banner strong { color: #8b6425; }
html[data-theme="light"] .intel-note,
html[data-theme="light"] .intel-source { color: #5c6f7d; }
html[data-theme="light"] .intel-empty { border-color: rgba(28, 45, 57, .16); color: #5c6f7d; }
html[data-theme="light"] .intel-card,
html[data-theme="light"] .intel-synth-item,
html[data-theme="light"] .intel-status-card,
html[data-theme="light"] .intel-elig-box,
html[data-theme="light"] .intel-metric { background: #fff; }
html[data-theme="light"] .intel-card p,
html[data-theme="light"] .intel-synth-item p { color: #46565f; }
html[data-theme="light"] .intel-card-title,
html[data-theme="light"] .intel-synth-item b,
html[data-theme="light"] .intel-chain-node strong { color: #8b6425; }
html[data-theme="light"] .intel-row-k,
html[data-theme="light"] .intel-metric-k,
html[data-theme="light"] .intel-metric-s,
html[data-theme="light"] .intel-event-note,
html[data-theme="light"] .intel-change-date { color: #5c6f7d; }
html[data-theme="light"] .intel-row-v,
html[data-theme="light"] .intel-section-text,
html[data-theme="light"] .intel-elig-list > li { color: #26343d; }
html[data-theme="light"] .intel-row-k, html[data-theme="light"] .intel-row-v { border-bottom-color: #eceff1; }
html[data-theme="light"] .intel-metric-v,
html[data-theme="light"] .intel-section-label,
html[data-theme="light"] .intel-status-card h3,
html[data-theme="light"] .intel-change-title { color: #17212a; }
html[data-theme="light"] .intel-quote { border-left-color: rgba(139, 100, 37, .5); }
html[data-theme="light"] .intel-change { background: #fff; }
html[data-theme="light"] .intel-change.intel-change-important { background: #fdf8ee; border-left-color: #c9a96e; }
html[data-theme="light"] .intel-change-new { color: #8b6425; }
html[data-theme="light"] .intel-flow-step,
html[data-theme="light"] .intel-chain-node,
html[data-theme="light"] .intel-tab,
html[data-theme="light"] .intel-node { background: #fff; color: #344751; }
html[data-theme="light"] .intel-flow-step.intel-node-key { background: #fdf8ee; color: #8b6425; }
html[data-theme="light"] .intel-tab.intel-tab-on { background: #fdf8ee; color: #8b6425; }
html[data-theme="light"] .intel-matrix { background: #fff; }
html[data-theme="light"] .intel-matrix thead th { background: #f4f7f8; color: #8b6425; }
html[data-theme="light"] .intel-matrix tbody th { color: #566873; }
html[data-theme="light"] .intel-matrix th,
html[data-theme="light"] .intel-matrix td { border-bottom-color: #eceff1; }
html[data-theme="light"] .intel-drawer { background: #fff; border-left-color: rgba(139, 100, 37, .35); }
html[data-theme="light"] .intel-drawer-head { background: #f7f9fa; color: #8b6425; }
html[data-theme="light"] .intel-basket { background: #fff; border-color: rgba(139, 100, 37, .35); }
html[data-theme="light"] .intel-basket-item b { color: #26343d; }
html[data-theme="light"] .intel-compare-btn { background: #fdf8ee; color: #8b6425; }
html[data-theme="light"] .intel-cite { color: #8b6425; }

/* 详情页里「加入对比」是个 POST 表单（写状态），但视觉上必须与旁边那些
   链接按钮一模一样。`display: contents` 让表单项本身不产生盒子，
   里面的 button 直接成为 .detail-actions 的 flex 子项 —— 间距、换行全部一致。 */
.intel-actions-inline { display: contents; }

/* 「已加入对比篮（2/5）」这类回执单独占满一行，不挤在按钮中间。
   ⚠️ 它是「刚才那一下生效了」的唯一凭据：加完是 303 回原页，
   按钮本身虽然会变成「已加入 n/上限 · 打开对比 →」，但按钮行里多一句话更直接。 */
.detail-actions .intel-note { flex-basis: 100%; margin: 2px 0 0; }

/* 对比篮面板在工作台里是**内联区块**，不是浮层。
   同一个组件两种用法：详情/列表页上它是右下角浮层（fixed），
   放进工作台的栅格里就必须回到文档流，否则会盖住下面的内容。 */
.research-panel .intel-basket {
  position: static;
  width: auto;
  margin: 0;
  box-shadow: none;
  border-color: var(--hair);
}

/* ----------------------------- 额度：锁定页 / 计数 / 面板 -----------------------------
   这三样是「全站联动」的可见部分：同一个状态对象，在详情页按钮旁是一枚小徽章，
   在功能页是一整张锁定卡，在工作台是一行带进度条的清单。
   颜色语义统一：绿=可用、金=会员专享、黄=额度用完、灰=未登录。 */

/* 按钮旁边那枚小计数。不与按钮同宽，跟着按钮走。 */
.intel-quota-badge { margin-left: 8px; white-space: nowrap; vertical-align: middle; }
.detail-actions .intel-quota-badge,
.intel-actions .intel-quota-badge { margin-left: 7px; }

/* 生成按钮那一行：按钮与计数并排 */
.intel-generate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.intel-generate .intel-note { margin: 0; }

/* 额度面板（账户页 / 工作台）：一行一项，名字 / 进度 / 数字 / 状态 */
.intel-quota-panel { margin: 18px 0; }
.intel-quota-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(70px, 160px) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.intel-quota-row:last-of-type { }
.intel-quota-name { font-size: var(--fs-meta); color: #cfd9e0; }
.intel-quota-value { font-size: var(--fs-meta); color: #dbe3e8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.intel-quota-track { height: 4px; background: rgba(255, 255, 255, .09); display: block; }
.intel-quota-track i { display: block; height: 100%; background: var(--champagne); }
.intel-quota-panel .intel-note { margin: 12px 0 0; }
.intel-quota-panel .intel-card-title { margin-bottom: 6px; }

@media (max-width: 620px) {
  .intel-quota-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .intel-quota-track { grid-column: 1 / -1; }
}

html[data-theme="light"] .intel-quota-name { color: #26343d; }
html[data-theme="light"] .intel-quota-value { color: #17212a; }
html[data-theme="light"] .intel-quota-track { background: #e6ebee; }
html[data-theme="light"] .intel-quota-track i { background: #a87928; }

/* ------------------------- 页头「账户」：悬停出退出登录 -------------------------
   用户要求（原话）：「账号这里，直接做一个退出登录的按钮，鼠标触及就显示退出登录，
   点击即真退出！」

   结构（`layout.js` 的 `accountNavItem()`，只有**登录后**才渲染后半段）：

     <span class="nav-acct">
       <a href="/account">昵称</a>          ← 点它还是去账户页，老行为不变
       <form class="nav-acct-out" action="/logout" method="post">
         <input type="hidden" name="csrf">
         <button type="submit">退出登录</button>   ← 默认隐形，悬停/聚焦才出来
       </form>
     </span>

   ## 三个刻意的选择

   1. **按钮在 DOM 里、只是看不见**，不是悬停时用 JS 插进去。
      这样它天然带 POST + CSRF 令牌（`server.js` 的 `/logout` 要校验两者），
      点到就是真的登出，不需要任何脚本；键盘 Tab 也能聚焦到它。
   2. **`:focus-within` 与 `:hover` 并列**：只用 `:hover` 的话，
      Tab 会把焦点送进一个 `opacity: 0` 的按钮里 —— 看得见的焦点指示是基本要求。
   3. **按钮本身是「隐形」而不是「移出屏幕」**：用 `visibility` + `opacity`
      一起过渡，`visibility: hidden` 时它不接收指针事件，
      所以鼠标经过那一块空白不会被误点。

   ## ⚠️ 为什么内页与首页都不会被页头裁掉

   两个变体的页头都带 `overflow: hidden`（基础 `header` 规则里那条）——
   `overflow-x` 不是 `visible` 时，按规范 `overflow-y` 会被算成 `auto`，
   下拉层会被裁在页头盒子里（这个坑 `app.css` 里另一处浮层已经踩过一次）。
   所以下面用 `overflow: clip visible` 显式改掉：横向仍然裁（那个 `hidden`
   本来就是为圆角与通栏服务的），纵向放行。
   `overflow: clip` 在 Chrome 90+/Safari 16+/Firefox 81+ 可用，
   与站点其余部分（`backdrop-filter`、`translate`）的浏览器门槛一致。

   ⚠️ 只需要管**旧版首页**（`body.home`，即 `/` 与 `/diseases`）：
   内页与 `home-preview` 首页的 `header` 各自都已经是 `overflow: visible`。 */
body.home header { overflow: clip visible; }

.nav-acct { position: relative; display: inline-flex; align-items: center; }

/* ## ⚠️ 昵称那一项**不再是 `.nav > a`**，所以必须把那份样式补回来
 *
 * 内页与 home-preview 的导航链路写的是 `.nav > a`（直接子元素）——
 * 原来账户项就是 `.nav` 的直接子元素，那些规则自然命中。
 * 现在它被 `.nav-acct` 包了一层（为了把登出表单和它绑成一组），
 * 于是 `padding / font-size / 下划线动画` **全部失效**：
 * 昵称会用继承来的 14px（比旁边的 12px 明显大一号），且没有左右内边距。
 *
 * 这两组规则是内页（5196-5212）与 home-preview（4531-4551）那两段的镜像，
 * 只把选择器从 `.nav > a` 换成 `.nav-acct > a`。
 * 两处一起写是**故意重复的**：这个工程里页头本来就有两套变体，
 * 用一条宽泛的 `.nav a` 去覆盖会连带改到没包起来的其它项（首页那套就不是）。 */
body:not([class*="home-preview"]) .nav-acct > a {
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9dabb7;
  font-size: 12px;
  font-weight: 450;
  white-space: nowrap;
}
body:not([class*="home-preview"]) .nav-acct > a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin: 5px auto -6px;
  background: var(--hp-gold, #e1b86b);
  transition: width .2s ease;
}
body:not([class*="home-preview"]) .nav-acct > a:hover { color: #f0f3f5; background: transparent; }
body:not([class*="home-preview"]) .nav-acct > a:hover::after { width: 14px; }
/* 与 `.nav > a.active` 同一套：当前栏目也不改变导航外观（见 5208 那条注释） */
body:not([class*="home-preview"]) .nav-acct > a.active { color: #9dabb7; background: transparent; font-weight: 450; }
body:not([class*="home-preview"]) .nav-acct > a.active::after { width: 0; }
body:not([class*="home-preview"]) .nav-acct > a.active:hover { color: #f0f3f5; }
body:not([class*="home-preview"]) .nav-acct > a.active:hover::after { width: 14px; }

body[class*="home-preview"] .nav-acct > a {
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9dabb7;
  font-size: 12px;
  font-weight: 450;
  white-space: nowrap;
}
body[class*="home-preview"] .nav-acct > a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin: 5px auto -6px;
  background: var(--hp-gold);
  transition: width .2s ease;
}
body[class*="home-preview"] .nav-acct > a:hover { color: #f0f3f5; }
body[class*="home-preview"] .nav-acct > a:hover::after { width: 14px; }

/* 登出层：贴在昵称正下方。`left: 50%` + `translate` 居中，
   这样无论昵称是两个字还是十个字，按钮都在它底下对齐。 */
.nav-acct-out {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  z-index: 40;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(184, 202, 217, .14);
  border-radius: 3px;
  background: rgba(6, 19, 31, .96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-acct:hover .nav-acct-out,
.nav-acct:focus-within .nav-acct-out {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s, 0s, 0s;
}

/* 按钮与导航项同一套字号与颜色 —— 它就在导航行里，不该看起来像另一个部件。
   金色悬停底与 `.nav a:hover` 一致；两处变体的 `padding` 由上面的选择器分给。 */
.nav-acct-out button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #9dabb7;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
body.home .nav-acct-out button { padding: 6px 14px; font-size: 13px; }
.nav-acct-out button:hover { background: rgba(225, 184, 107, .12); color: #f0f3f5; }
/* 键盘 Tab 进来时要有看得见的焦点环 —— 否则焦点落在一个刚显形的按钮上会「看不见落点」 */
.nav-acct-out button:focus-visible { outline: 2px solid var(--champagne, #c9a96e); outline-offset: 2px; }

html[data-theme="light"] .nav-acct-out {
  border-color: #dfe5e9;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 36, 48, .16);
}
html[data-theme="light"] .nav-acct-out button { color: #4f606b; }
html[data-theme="light"] .nav-acct-out button:hover { background: rgba(197, 139, 37, .12); color: #17212a; }

/* 浅色主题下昵称同样是深色 —— 与 5436-5440 那两条 `.nav > a` 的浅色规则一一对应。
   （`body.home` 那套用的是 `.nav a`（后代），本来就命中，不必重复。） */
html[data-theme="light"] body[class*="home-preview"] .nav-acct > a,
html[data-theme="light"] body:not([class*="home-preview"]) .nav-acct > a,
html[data-theme="light"] body:not([class*="home-preview"]) .nav-acct > a.active { color: #111820; }
html[data-theme="light"] body[class*="home-preview"] .nav-acct > a:hover,
html[data-theme="light"] body:not([class*="home-preview"]) .nav-acct > a:hover,
html[data-theme="light"] body:not([class*="home-preview"]) .nav-acct > a.active:hover { color: #000; }

/* 窄屏（导航折行）时悬念会挡住上一行的字，改成**常显**：
   窄屏上本来就没有「悬停」这个动作，藏起来等于把退出登录删掉。
   常显时它只是一条再普通不过的按钮 —— 上面那些浮层位移全部退掉。 */
@media (max-width: 900px), (hover: none) {
  .nav-acct-out {
    position: static;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ----------------------------- 论文解读：文章式版式 -----------------------------
   这一版的论文解读从「字段表」改成了**一篇有观点的解读**：
   先看结论 → 编号小节（小节里可以有 h3 子标题与并排卡片）→ 带走什么 → 参考资料。

   ⚠️ 这一段的 v1 规则（金色圆片编号 + 小节盒子）**已整段删除**，不要加回来。
   之前是「v2 追加在 v1 后面」，而 v2 只改了字号与颜色：
   `border` / `border-radius: 50%` / `background` / `width` / `height` 一条都没撤，
   于是那枚金圈一直留在页面上 —— 用户两次截图指的就是它。
   样式要么改、要么删，**不能靠"写在后面"来覆盖没写全的属性**。 */

/* ============================================================================
   论文解读：文章式排版（v3）
   ----------------------------------------------------------------------------
   用户对这一版的评价是「有点样子了」但接着指出边缘问题（原话）：
     > 「这些边缘位置能不能用点心设计下，看着太闹心了」
     > 「全站检查这种难看的设计。还有各种线条，不必要的线体能少就少」
     > 「这些所谓的阴影真的丑，很不舒服」

   三处都落在「边缘」上，逐条修：

   1. **小节被画成了盒子。** `<section class="intel-article-section">` 命中了
      文件上方那条裸 `section { border / border-radius / box-shadow }`，
      于是每个小节都是「1px 全边框 + 8px 圆角 + 12/38 投影」，
      而它的左右内边距是 0 —— 那圈边框**贴着正文**，等于沿着每一段描了一道竖线；
      小节又整体套在 `.lv2` 壳里，所以是「盒子套盒子」。
      现在这一条显式声明不画框。根因已在 `section.lv1, …` 那里一并修掉。

   2. **左边缘是锯齿状的。** 原来小节头是 `display:flex`：编号在 0、标题在 48、
      来源标签回到 0、正文也在 0 —— 四个起点，边上还挂着一圈边框。
      现在编号独占一行做小字眉标，**编号 / 标题 / 来源标签 / 正文
      全部落在同一条左边线**上。

   3. **「01」是一枚金圈。** v1 的遗产（见上面那段说明）。现在撤掉
      `border` / `border-radius` / `background` / 固定宽高，只剩一行安静的小字。

   全篇只留**一条**水平线：「先看结论」下面那一条，用来分开结论与论证。
   其它分节一律靠留白，不再画线。
   ========================================================================== */

/* 小节：没有盒子，只有上间距。层次由编号小字 + 标题建立。 */
.intel-article-section {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 32px 0 0;
}

/* 小节头：**编号与小标题同一行**，整体靠左成组 —— 像一条小标题，不像一块招牌。
 *
 * ⚠️ 这一版是用户对着截图两次纠正后的结果：
 *   1. 「数字编号跟小标题安排在一行」—— 原来编号独占一行（`display: block` + 下边距），
 *      十二个模块排下来就是满页的孤立数字，读起来像清单编号而不是文章小标题；
 *   2. 「这种突然这么大的字号，是咋想的呢，破坏平衡吗」——
 *      18.5px 的标题压在 13.5px 的正文上（正文尺子见 `--fs-prose`），
 *      而它自己的内容里还有 17px 的证据卡数值 —— 标题比正文大 5px、
 *      只比卡片数值大 1.5px，主次全乱了。
 *      现在标题收到 16px（≈正文 1.2 倍，区块标题的正常档位），
 *      编号退成 10.5px 的计数标记：**层级靠数字与字重拉开，不靠字号喊**。
 */
.intel-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.intel-num {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--champagne);
  opacity: .75;
}
.intel-article-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .01em;
}
.intel-subsection { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: #cfdae2; }
.intel-article-section .intel-section-text { margin: 0 0 13px; }
.intel-article-section .intel-section-text:last-child { margin-bottom: 0; }

/* 小节自己的来源标签：跟正文同一条左边线，纯文字 —— 不填色、不描边 */
.intel-article-section > .intel-src { display: block; margin: 0 0 12px; }

/* 卡片：只留一条细线，不填充、不投影；标签退成小字 */
.intel-cards-flat { gap: 8px; margin: 16px 0 4px;}
.intel-cards-flat .intel-card { background: rgba(255, 255, 255, .022); padding: 13px 15px; border-radius: 6px;}
.intel-cards-flat .intel-card-title { margin: 0 0 5px; font-size: 13.5px; font-weight: 600; color: #dfe7ec; }
.intel-cards-flat .intel-card p { color: #b3c1cb; }
.intel-card-tag { display: block; margin-bottom: 5px; font-size: 10.5px; letter-spacing: .1em; color: var(--slate-2); }

/* 参考资料：编号退到最小，靠列表本身说话 */
.intel-article-section .intel-elig-list > li { color: var(--slate); }

/* 标题下那排轻量标签（可核对 86% / 基于全文）：没有框、没有底色 */
.intel-meta-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--slate-2);
}
.intel-meta-chip + .intel-meta-chip::before {
  content: "";
  display: inline-block;
  width: 1px; height: 10px;
  margin: 0 9px 0 1px;
  background: var(--hair);
  vertical-align: -1px;
}
.intel-meta-chip.is-warn { color: var(--warn-fg); }

/* 来源说明：一行小字，安静地压在正文之下 */
.intel-provenance {
  margin: 18px 0 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--slate-2);
}

/* 来源标签：纯文字。带底色的小方块会跟着出现 8 次，整页就成了色块墙 */
.intel-src {
  display: inline-block;
  margin-left: 9px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--slate-2);
  white-space: nowrap;
  vertical-align: 2px;
}
.intel-src.is-model { color: #8e8371; }

/* 先看结论：全篇唯一的一条线 —— 它把「结论」与「论证」分开。
   ⚠️ 目前视图里没有元素用这个类（`intelPapers.js` 把「先看结论 / 带走什么」
   并进了固定模块，不再单独渲染）。样式留着是因为它正是这一页需要的处理方式：
   若哪天再把结论块提出来，直接套 `.intel-lead` 就有「唯一一条线」的效果，
   不必重新发明一遍盒子。 */
.intel-lead { margin: 30px 0 0; padding: 0 0 22px; border-bottom: 1px solid var(--hair); }
.intel-lead-label {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--slate-2);
}
.intel-lead-text { margin: 0; font-size: 16px; line-height: 1.95; color: #eef2f4; }

/* 浅色主题：同样只有一档强调，且不再有填充块 */
html[data-theme="light"] .intel-lead-text { color: #17212a; }
html[data-theme="light"] .intel-article-title { color: #17212a; }
html[data-theme="light"] .intel-subsection { color: #344751; }
html[data-theme="light"] .intel-num { color: #a87928; }
html[data-theme="light"] .intel-cards-flat .intel-card-title { color: #17212a; }
html[data-theme="light"] .intel-cards-flat .intel-card p { color: #46565f; }
html[data-theme="light"] .intel-src { color: #5c6f7d; }
html[data-theme="light"] .intel-src.is-model { color: #7a6a52; }
html[data-theme="light"] .intel-provenance { color: #5c6f7d; }

/* ----------------------------- 固定框架 V1.0 的版面件 -----------------------------
   框架要求「固定 12 模块 + 四层内容分开 + 主动降温 + 关键证据」，
   新增五个类，仍然沿用「不描边、只用底色与字号分层」的做法。 */

/* 模块 0 论文身份：类型 + 期刊/年份/DOI 一行 */
.intel-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 20px 0 4px; }
.intel-identity-type {
  padding: 2px 9px;
  border-radius: 3px;
  background: rgba(201, 169, 110, .12);
  color: var(--champagne-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.intel-identity-meta { font-size: 11.5px; color: var(--slate-2); }

/* 模块 4 的每一节：小标题 + 正文（+ 需要时的可核对原句） */
.intel-article-item { margin: 0 0 18px; }
.intel-article-item:last-child { margin-bottom: 0; }

/* 核心发现：条目列表，左侧不画线，靠缩进与间距 */
.intel-finding-list { margin: 0; padding: 0; list-style: none; }
.intel-finding-list > li { margin: 0 0 16px; padding: 0 0 0 2px; }
.intel-finding-list > li:last-child { margin-bottom: 0; }

/* 证据卡：与指标条同一套，但字段更长，收窄最小宽度 */
/* 证据卡：比通用指标卡更宽一档。
 * ⚠️ 这里是**真正压着那排卡片的规则**（它排在上面那条 `.intel-metrics` 之后，
 * 是它在生效）。原来是 160px —— 六张卡在 1022px 的可视宽里各得 163px，
 * 于是 15px 的“叙述性综述（Narrative Review）”被折成四五行的窄柱，整屏都是竖着的字。
 * 200px 之后宽屏是四张一排、两排收尾，单卡 246px，句子能正常读完。 */
.intel-evidence-card { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/**
 * 证据卡（模块 03）的字段值：**与正文同档**。
 *
 * 用户 2026-09-25 对着这一排截图说：「这里的字号还是大了，都赶上标题了」。
 * 上一轮把 `.intel-metric-v` 从 17px 收到 15px，仍然只比 17px 的小节标题小 2px ——
 * 而这里的字段是「叙述性综述（Narrative Review）」「异体/现货型 CAR-NK 工程化改造」
 * 这种**完整句子**，不是扫一眼的数字，压在标题下面就是第二个标题。
 * 现在收到正文档 `--fs-prose`（13.5px）、行高 1.5：
 * 层级改由**字重 600 + 10px 的字段名**拉开，不再靠字号喊。
 *
 * ⚠️ 顶部那条指标条（`.intel-metrics` 而**不是** `.intel-evidence-card`）不动：
 * 那里是 ORR / CR / N 这类短数字，大一号是为了扫读，且不会折行。
 */
.intel-evidence-card .intel-metric-v { font-size: var(--fs-prose); line-height: 1.5; }

/* 证据边界（主动降温）：三段式，只有中间那段的底色更重一点 */
.intel-boundary { display: grid; gap: 10px; }
.intel-boundary-row { padding: 14px 16px; border-radius: 6px; background: rgba(255, 255, 255, .022); }
.intel-boundary-row.is-limit { background: rgba(198, 164, 117, .09); }
.intel-boundary-k { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .06em; color: var(--slate-2); }
.intel-boundary-row.is-limit .intel-boundary-k { color: #c2a87a; }

html[data-theme="light"] .intel-identity-type { background: #fdf8ee; color: #8b6425; }
html[data-theme="light"] .intel-identity-meta { color: #5c6f7d; }
html[data-theme="light"] .intel-boundary-row { background: #f7f9fa; }
html[data-theme="light"] .intel-boundary-row.is-limit { background: #fdf8ee; }
/* `.is-limit` 的小标题「仍未证实 / 没有回答」：深色主题的 `#c2a87a` 在白底上只有 2.29:1 */
html[data-theme="light"] .intel-boundary-row.is-limit .intel-boundary-k { color: #8b6425; }

/* ==========================================================================
   浅色（白色）主题字色补漏 —— 2026-09-23
   ==========================================================================
 *
 * 用户原话：「全站白色主题下还有字体颜色没适配白色主题的，如研究思路里，
 * 仍然有浅白色字体，在白色背景下看不清，需要优化」。
 *
 * ⚠️ 这一批**不是靠读 CSS 猜的**。`src/cli/_probe-light-contrast.mjs` 用无头 Chrome
 * 把 `data-theme` 钉成 `light`，跑 59 个页面，遍历每个「直接含文字」的元素，
 * 向上找它**实际压在什么底色上**，再按 WCAG 算比值（正文 4.5:1、大字与图形 3:1）。
 * 下面每一条都对应那份报告里的一行；报告在 `data/_light-contrast.txt`。
 *
 * 两个高频根因（下次直接查这两处，别再从第一条规则翻到最后一条）：
 *   1. **深色主题写死了十六进制**（`#c3ccd5`、`#eef2f4`、`#8695a5`…），
 *      浅色主题那份覆盖里没有对应的一条 —— 白底上就还是深色主题的浅灰。
 *   2. **默认链接色**：全站最大的一处漏网。已经收进 `:root` / 浅色 token 的
 *      `--link`（见文件开头 `:root` 那段说明），这里不再重复。
 */

/* ---------- 1. 研究思路（用户点名的那一处） ---------- */
/* `.paper-section p` 深色主题是 `#c3ccd5` —— 白底上 **1.63:1**，整段正文隐形。
   用与 `.summary` 同一个正文档颜色，同一页里两处正文才是同一种灰。 */
html[data-theme="light"] .paper-section p { color: #3f4d58; }
/* 段落标签「背景 / 方法 / 结果 / 结论」：浅金 `#d9b779` 在白底上 1.91:1，
   标签框里等于没有字。换成与 `.intel-identity-type` 同一个深金。 */
html[data-theme="light"] .paper-section-label {
  color: #8b6425;
  background: #fdf8ee;
  border-color: rgba(201, 169, 110, .45);
}
html[data-theme="light"] .paper-section { border-top-color: #e6eaed; }

/* ---------- 2. 研究报告 / 每日简报目录 ---------- */
/* `.report-title` 是列表标题（15px / 600），却是 `#eef1f4`（1.13:1）——
   整个报告列表在白底上是一片空白，用户点不进来。 */
html[data-theme="light"] .report-title { color: #17212a; }
html[data-theme="light"] .report-title:hover { color: #8b6425; }
html[data-theme="light"] .report-summary { color: #3f4d58; }
html[data-theme="light"] .digest-issue-date { color: #5c6f7d; }
html[data-theme="light"] .digest-issue a:hover .digest-issue-date { color: #8b6425; }
html[data-theme="light"] .digest-issue-badge { color: #8b6425; background: #fdf8ee; border-color: rgba(201, 169, 110, .45); }

/* ---------- 3. 疾病 / 技术路线落地页的统计条 ---------- */
html[data-theme="light"] .disease-group-title { color: #5c6f7d; }
html[data-theme="light"] .disease-stats { color: #5c6f7d; }
html[data-theme="light"] .disease-stats b { color: #8b6425; }
html[data-theme="light"] .disease-stats a:hover { color: #17212a; border-bottom-color: rgba(139, 100, 37, .5); }
html[data-theme="light"] .disease-stats a:hover b { color: #6f4f18; }
/* 「0 条」那一档原来靠 `opacity: .55` 压淡 —— 白底上压完只剩 1.6:1。
   改成**不压透明度**，用「灰 vs 金」区分"有没有"，而不是用"看不清"。 */
html[data-theme="light"] .disease-stats .stat-zero { opacity: 1; color: #6b7880; }
html[data-theme="light"] .disease-stats .stat-zero b { color: #6b7880; }

/* ---------- 4. 论文页的其余小字 ---------- */
/* 机构后的国家标签（`.aff-country`，11.5px）：浅金 `#c9a96e` 白底 2.24:1 */
html[data-theme="light"] .aff-country { color: #8b6425; background: #fdf8ee; border-color: rgba(201, 169, 110, .45); }

/* ---------- 5. 指南 / 患者手册 / 软件内解读 ---------- */
/* 英文原题一行（`.gd-detail-en`）：`#8695a5` 白底 3.06:1，13px 正文不够 */
html[data-theme="light"] .gd-detail-en { color: #5c6f7d; }

/* ---------- 6. 首页 ---------- */
/* 主题切换按钮的图标 `◐`：浅色主题那份补丁只改了按钮本体，漏了里面的 `span` */
html[data-theme="light"] .theme-toggle span { color: #8b6425; }
/* 板块底部「浏览全部 →」的箭头：`var(--hp-gold)` 白底 1.86:1 */
html[data-theme="light"] .hp-board-cta i { color: #8b6425; }
html[data-theme="light"] .hp-board-cta:hover { color: #6f4f18; }
html[data-theme="light"] .hp-board-cta:hover i { color: #6f4f18; }

/* ---------- 7. 会员方案页 ---------- */
html[data-theme="light"] .pricing-price span { color: #5c6f7d; }
/* 「01 / 02 / 03」序号与「✓」：`var(--champagne-2)` 在白底上 3.87:1，差一点点 */
html[data-theme="light"] .pricing-explain span { color: #8b6425; }
html[data-theme="light"] .pricing-card li.included i { color: #8b6425; }

/* ==========================================================================
   浅色（白色）主题字色补漏（二）
   账户区 / 收件箱 / 管理后台 / 研究工作台 / 订阅面板
   ==========================================================================
 *
 * 这一批页面**不登录根本看不到**，所以第一轮体检整批漏掉了。
 * `src/cli/_probe-light-contrast.mjs` 现在会临时造一个管理员账户、登录后再探一遍
 * （探完即删，不留数据），下面每一条都对应 `data/_light-contrast.txt` 里的一行。
 *
 * 根因还是同一个：这些规则是用深色主题的语汇写的（`#8294a1` / `#718493` / `#6f8391`
 * / `#8da0ad` …），浅色主题那份覆盖只补了卡片底色和标题，正文与注解一律漏掉。
 *
 * ⚠️ **不要**为了省事去改 `--hp-gold`：它在本文件里既当字色、又当**底色**
 * （`.hp-action-primary`、`.hp-join-actions a:first-child`、`.inbox-pick:checked`…），
 * 在浅色主题里把变量压深，那些按钮的底色会跟着一起变脏。字色这里逐条覆盖。
 */

/* ---------- 账户区左栏 ---------- */
html[data-theme="light"] .acct-avatar { color: #8b6425; background: #fdf8ee; }
html[data-theme="light"] .acct-role,
html[data-theme="light"] .account-role,
html[data-theme="light"] .acct-nav-admin h3 { color: #8b6425; }
html[data-theme="light"] .acct-nav-item b { color: #8b6425; background: rgba(225,184,107,.22); }
html[data-theme="light"] .acct-identity-text small { color: #5c6f7d; }
html[data-theme="light"] .acct-nav-foot a,
html[data-theme="light"] .acct-nav-foot button { color: #5c6f7d; }
html[data-theme="light"] .acct-nav-foot a:hover,
html[data-theme="light"] .acct-nav-foot button:hover { color: #6f4f18; }

/* ---------- 账户区正文卡片 ---------- */
html[data-theme="light"] .acct-head-sub { color: #5c6f7d; }
html[data-theme="light"] .acct-card-head a { color: #8b6425; }
html[data-theme="light"] .acct-recent span { color: #8b6425; }
html[data-theme="light"] .acct-recent a:hover { color: #8b6425; }
html[data-theme="light"] .acct-stat > span,
html[data-theme="light"] .acct-stat small { color: #5c6f7d; }
html[data-theme="light"] .acct-subs p > span { color: #5c6f7d; }
html[data-theme="light"] .acct-subs em { color: #3f4d58; background: #f1f4f5; }
html[data-theme="light"] .acct-notes p,
html[data-theme="light"] .acct-empty { color: #5c6f7d; }
html[data-theme="light"] .acct-empty code { color: #8b6425; background: #fdf8ee; }

/* ---------- 收件箱 ---------- */
html[data-theme="light"] .inbox-folder b { color: #8b6425; background: rgba(225,184,107,.22); }
html[data-theme="light"] .inbox-unread-line { color: #5c6f7d; }
html[data-theme="light"] .inbox-unread-line b { color: #8b6425; }
html[data-theme="light"] .inbox-head > span { color: #5c6f7d; }
html[data-theme="light"] .inbox-pager a { color: #8b6425; }
html[data-theme="light"] .inbox-hit { color: #8b6425; }
/* 来源标签压在未读行的蓝底 `#edf5ff` 上，`#71838f` 只有 3.57:1 —— 一并压深 */
html[data-theme="light"] .inbox-letter-meta,
html[data-theme="light"] .inbox-letter-meta .source,
html[data-theme="light"] .inbox-letter-meta .source[data-source="pubmed"] { color: #5c6f7d; }
html[data-theme="light"] .inbox-letter-flag button { color: #7d8890; }
html[data-theme="light"] .inbox-letter-flag button:not(.inbox-letter-del):hover,
html[data-theme="light"] .inbox-letter.starred .inbox-letter-flag button:not(.inbox-letter-del) { color: #8b6425; }
html[data-theme="light"] .inbox-notifications h2 { color: #8b6425; }
html[data-theme="light"] .inbox-notifications p,
html[data-theme="light"] .inbox-notifications time { color: #5c6f7d; }
html[data-theme="light"] .inbox-note-link { color: #8b6425; }
html[data-theme="light"] .inbox-note-kind { color: #5c6f7d; }
html[data-theme="light"] .inbox-letter-title:hover { color: #8b6425; }
html[data-theme="light"] .inbox-batch-count.on { color: #8b6425; }

/* ---------- 管理后台 ---------- */
html[data-theme="light"] .admin-section-head > span { color: #5c6f7d; }
html[data-theme="light"] .admin-stat-grid span { color: #5c6f7d; }
html[data-theme="light"] .admin-quick a,
html[data-theme="light"] .admin-link-grid a { color: #2a3b47; }
html[data-theme="light"] .admin-quick a:hover,
html[data-theme="light"] .admin-link-grid a:hover { color: #6f4f18; }
html[data-theme="light"] .admin-sidebar .admin-back,
html[data-theme="light"] .admin-plan-summary span,
html[data-theme="light"] .admin-time time span { color: #5c6f7d; }

/* ---------- 研究工作台 / 专题 / 任务 ---------- */
html[data-theme="light"] .workspace-stats span,
html[data-theme="light"] .workspace-stats small { color: #5c6f7d; }
html[data-theme="light"] .research-empty { color: #5c6f7d; }
html[data-theme="light"] .saved-card p { color: #5c6f7d; }
html[data-theme="light"] .topic-card p { color: #5c6f7d; }
html[data-theme="light"] .topic-form label,
html[data-theme="light"] .topic-form legend { color: #5c6f7d; }
html[data-theme="light"] .task-table th { color: #5c6f7d; }
html[data-theme="light"] .task-table td small { color: #5c6f7d; }
html[data-theme="light"] .intel-basket-head,
html[data-theme="light"] .intel-basket-head b { color: #8b6425; }

/* ---------- 订阅面板与日期控件（/watch） ---------- */
html[data-theme="light"] .watch-meta { color: #5c6f7d; }
html[data-theme="light"] .watch-meta b { color: #8b6425; }
html[data-theme="light"] .watch-meta .muted,
html[data-theme="light"] .watch-meta .muted b { color: #5c6f7d; }
html[data-theme="light"] .sub-tip { color: #5c6f7d; }
html[data-theme="light"] .sub-tip code { color: #3f4d58; background: #f1f4f5; }
html[data-theme="light"] .sub-tip b { color: #3f4d58; }
html[data-theme="light"] .sub-date-form > label { color: #5c6f7d; }
html[data-theme="light"] .cal-range-sep { color: #5c6f7d; }

/* ==========================================================================
   浅色主题：转化应用板块（/translation 与它的两个详情页）
   --------------------------------------------------------------------------
   用户报：「转化应用板块仍然有字体颜色没改过来，不能适配白色主题」。

   根因不是新问题，是**漏扫**：前面几轮浅色补丁按「页面族」推进
   （监管框架 / 患者手册 / 指南共识 / 研究思路 …），而这一节自有的类名
   ——`.reg-src-*` / `.pd-*` / `.risk-*` / `.evidence-tag` / `.src-gap`——
   恰好横跨「转化应用」和「监管框架」两页，两边都以为对方扫过了。
   它们全是深色主题写死的浅灰字，白底上等于没写字：
     `.reg-src-title` 1.30:1、`.pd-warn-text` 1.30:1、`.pd-line` 1.61:1、
     `.risk-value` 1.61:1、`.reg-src-note` 2.09:1、`.risk-key` 2.35:1。

   取值沿用站内浅色墨阶（`#17212a` → `#26343d` → `#3f4d58` → `#4a5b67`
   → `#5c6f7d` → `#63747f`）与深金 `#8b6425`，不引入新颜色。

   实测口径见 `src/cli/_probe-light-contrast.mjs`（无头 Chrome 量真实渲染）。
   ========================================================================== */

/* —— 来源行：标题是这一行的主链接（用墨色），等级/元信息/说明依次降档 —— */
html[data-theme="light"] .reg-src-title { color: #17212a; }
html[data-theme="light"] .reg-src-title:hover { color: #8b6425; }
/* 产品详情页的分国别批准记录里，标题单独写过一次深色主题的浅灰字 */
html[data-theme="light"] .prod-market .reg-src-title { color: #17212a; }
html[data-theme="light"] .reg-src-level { color: #63747f; }
html[data-theme="light"] .reg-src-meta,
html[data-theme="light"] .reg-src-dot { color: #5c6f7d; }
/* 来源「说明」是正文，不是元信息 —— 给正文档的字色 */
html[data-theme="light"] .reg-src-note { color: #3f4d58; }

/* —— 证据等级标签（详情页顶部那行灰字） —— */
html[data-theme="light"] .evidence-tag { color: #63747f; }

/* —— 详情页的「路径判断」提示条与「尚无权威出处」提示 —— */
html[data-theme="light"] .reg-access-note { color: #3f4d58; }
html[data-theme="light"] .src-gap { color: #3f4d58; }
html[data-theme="light"] .reg-access-note b,
html[data-theme="light"] .src-gap strong { color: #8b6425; }

/* —— 产品详情页：适应证/给药行、黑框警告、风险条目表 —— */
html[data-theme="light"] .pd-line { color: #3f4d58; }
html[data-theme="light"] .pd-line-key { color: #63747f; }
/* 黑框警告的标题是 11px 小字，`--champagne-2`（#a87928）在白底只有 3.9:1，
   小字必须过 4.5:1 —— 压到站内那档深金。 */
html[data-theme="light"] .pd-warn-label { color: #8b6425; }
html[data-theme="light"] .pd-warn-text { color: #26343d; }
/* 风险表左栏原来是 `rgba(255,255,255,.03)` —— 白底上等于没有底色，
   换成站内的浅灰底，表头与正文才分得开。 */
html[data-theme="light"] .risk-key { color: #4a5b67; background: #f6f8f9; }
html[data-theme="light"] .risk-value { color: #3f4d58; }

/* —— 详情页是 `section.lv1 > section.lv3` 的**嵌套**结构，
   而深色主题给嵌套小标写过 `section.lv1 > .lv3 .eyebrow`（0,3,1），
   比浅色主题那条 `.eyebrow`（0,2,1）更具体 —— 于是白底上它仍是
   `#8b9aa8`（2.88:1）。这里按同样的具体度补一条。 */
html[data-theme="light"] section.lv1 > .lv3 .eyebrow { color: #63747f; }

/* ===========================================================================
   「邀请有礼」（2026-09-24 · 交付案 V1.6）
   ---------------------------------------------------------------------------
   只加这一组 `invite-*` 类（`hp-footer-rule` 已随页脚规则一并下线，2026-09-24），**不新造配色** ——
   颜色全部取站点既有变量（`--champagne-2` / `--ok-fg` / `--hair` / `--slate`），
   所以深色与浅色主题都不用手写覆盖（浅色主题只补一条表格底纹）。
   =========================================================================== */
.invite-page { max-width: var(--page-max); margin: 0 auto; padding: 34px 22px 70px; }
.invite-message { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line-gold); border-radius: var(--radius-sm); color: var(--champagne-2); font-size: var(--fs-meta); }
.invite-hero { max-width: 940px; }
.invite-hero h1 { margin: 8px 0 14px; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -.01em; }
/**
 * ⚠️ 这里原来还有一条 `max-width: var(--measure)`，**已删**。
 *
 * `--measure: 62ch` 里的 `ch` 按**元素自己的字号**解析：
 *   · `.invite-lead` 是 18px → 62ch ≈ 560px
 *   · `.invite-rules` 是 12.5px → 62ch ≈ 390px
 * 于是同一页上的三块正文各占一个宽度，左边缘齐、**右边缘一级一级往里缩**
 * （用户 2026-09-24：「连双端对齐都没做到，还有这些段落长短不一，很难受」）。
 *
 * 现在整页只有**一列**：正文与盒子共用 `.invite-hero` 的 940px，
 * 加上上面那条 `text-align: justify`，左边缘与右边缘都对得齐。
 * 顺带把规则条从「每条折两行、第二行只剩几个字」变回单行。
 */
.invite-lead { margin: 0 0 22px; color: var(--slate); font-size: var(--fs-lead); line-height: var(--lh-prose); }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.invite-note { margin: 8px 0; color: var(--slate-2); font-size: var(--fs-meta); line-height: 1.7; }
.invite-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--slate-2); font-size: 12px; line-height: 1.7; }

.invite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 20px 0 24px; }
.invite-stat { padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--navy-3); }
.invite-stat span { display: block; color: var(--slate-2); font-size: var(--fs-meta); }
.invite-stat b { display: block; margin: 8px 0 4px; color: var(--white); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.invite-stat small { color: var(--slate-2); font-size: 11.5px; }
.invite-stat.is-main { border-color: var(--line-gold); }
.invite-stat.is-main b { color: var(--champagne-2); }

.invite-linkbox { margin: 0 0 24px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--navy-3); }
.invite-label { margin: 0 0 10px; color: var(--slate-2); font-size: var(--fs-meta); }
.invite-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.invite-linkrow code { flex: 1 1 260px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--navy); color: var(--champagne-2); font-size: var(--fs-meta); word-break: break-all; }

.invite-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 24px; }
.invite-how > div { padding: 14px 16px; border-left: 2px solid var(--line-gold); }
.invite-how b { color: var(--champagne-2); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .04em; }
.invite-how p { margin: 7px 0 0; color: var(--slate); font-size: var(--fs-meta); line-height: 1.7; }

.invite-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.invite-plan { padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--navy-3); }
.invite-plan h3 { margin: 0; color: var(--white); font-size: 17px; }
.invite-plan-price { margin: 8px 0 6px; color: var(--champagne-2); font-size: 22px; font-weight: 600; }
.invite-plan-price span { color: var(--slate-2); font-size: 12px; font-weight: 400; }
.invite-plan-note { margin: 0; color: var(--slate-2); font-size: var(--fs-meta); line-height: 1.6; }

.invite-table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius); }
.invite-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.invite-table th, .invite-table td { padding: 11px 14px; border-bottom: 1px solid var(--hair-2); text-align: left; white-space: nowrap; }
.invite-table th { color: var(--slate-2); font-weight: 500; }
.invite-table td { color: var(--white); }
.invite-table tr:last-child td { border-bottom: 0; }
.invite-empty { color: var(--slate-2); white-space: normal; }
.invite-state { color: var(--slate-2); }
.invite-state.is-ok { color: var(--ok-fg); }
.invite-state.is-wait { color: var(--warn-fg); }

/* 同 `.invite-lead`：去掉 `--measure`，与导语共用同一条右边缘。 */
.invite-rules { margin: 20px 0 0; padding-left: 20px; color: var(--slate); font-size: var(--fs-meta); line-height: 1.85; }
.invite-rules li { margin-bottom: 7px; }
.invite-rules strong { color: var(--champagne-2); font-weight: 600; }

/* 会员页「使用续费抵扣额」模块（交付案 A3）：只在后续续费时出现 */
.invite-renew { margin: 14px 0 4px; padding: 13px 14px; border: 1px solid var(--line-gold); border-radius: var(--radius-sm); background: rgba(201, 169, 110, .06); text-align: left; }
.invite-renew-title { margin: 0 0 6px; color: var(--champagne-2); font-size: var(--fs-meta); font-weight: 600; }
.invite-renew-note { margin: 6px 0; color: var(--slate-2); font-size: 11.5px; line-height: 1.65; }
.invite-renew-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--white); font-size: var(--fs-meta); }
.invite-renew-sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: var(--fs-meta); }
.invite-renew-sum > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--slate); }
.invite-renew-sum strong { color: var(--white); }
.invite-renew-sum .is-total { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--hair); }
.invite-renew-sum .is-total strong { color: var(--champagne-2); font-size: 16px; }

.admin-note { margin-left: 10px; color: var(--slate-2); font-size: 11.5px; }

html[data-theme="light"] .invite-stat,
html[data-theme="light"] .invite-linkbox,
html[data-theme="light"] .invite-plan { background: #f7f9fa; }
html[data-theme="light"] .invite-stat b,
html[data-theme="light"] .invite-plan h3,
html[data-theme="light"] .invite-table td,
html[data-theme="light"] .invite-renew-check { color: #17222b; }
html[data-theme="light"] .invite-linkrow code { background: #ffffff; }
html[data-theme="light"] .invite-renew { background: rgba(201, 169, 110, .12); }
html[data-theme="light"] .invite-renew-sum strong { color: #17222b; }


/* ==========================================================================
   手机端可用性修复（2026-09-26 体检）

   依据：`docs/移动端体检-2026-09-26.md`（无头 Chrome，390×844，跑线上站实测）。
   三件事，全部只作用于 ≤720px，桌面一行不动：

   1. **筛选面板不再被 820px 硬上限裁掉**（见下面第 1 条）
   2. **触控目标抬到 ≥32px**（chip 实测只有 23px，全站 155-176 个偏小目标）
   3. **元信息字号下限抬到 12px**（/all 有 317 个 <12px 的文本元素）

   为什么放在文件**最末尾**：这些是覆盖规则，靠"同特异性取后者"生效，
   放中间会被后面的同名规则盖回去。
   ========================================================================== */
@media (max-width: 720px) {
  /* ---------------------------------------------------------------------
     1. 筛选面板：手机上的 820px 硬上限必须撤掉

     `.facets-collapsible` 的 `max-height: 820px` 是按**桌面行数**估的
     （app.css:4176-4181 的注释：招募页最高约 688px，留余量到 820）。
     手机 chip 换行多得多，390px 实测：

       /all            clientHeight 820 / scrollHeight 1117  → 裁 297px
       /trials         同 1117                               → 裁 297px
       /papers         同 1083                               → 裁 263px
       /patient-guides 同  908                               → 裁  88px

     被裁掉的正是**靶点、技术路线、「已选条件」和「清除全部」** ——
     `overflow: hidden` 让它们既看不见也滚不到。作者在注释里写的判据就是
     「不够就是 bug（内容会被裁一截）」，所以这里是修 bug，不是改设计。

     `max-height: none` 后不再有裁剪；收起态由
     `.facets-hover.is-collapsed > .facets-collapsible { max-height: 0 }`
     控制（特异性 0,3,0 > 这里的 0,1,0），照旧生效。
     transition 一起去掉：`none` 与数值之间无法插值，留着反而会跳。
     --------------------------------------------------------------------- */
  .facets-collapsible { max-height: none; transition: none; }

  /* ---------------------------------------------------------------------
     2. 触控目标（**只作用于筛选区**）

     实测 `.chip` 高 **23px**（`padding: 1px 8px` + 11.5px 字号），
     而 chip 正是全站筛选的主入口。32px 是本次体检的合格线
     （44px 是理想值，全站铺开会让卡片明显变高，先保 32）。

     ## 为什么收窄成 `.facets` / `.ask-conditions`

     第一版写成裸 `.chip`，结果**卡片里**的 chip（`.chip-target` /
     `.chip-modality` / `.chip-disease` / `.chip-region`）也一起长到 33px，
     单卡高度被推高 +19~+48px（+5%~+10%），一屏能看到的条目少一两条。

     这些卡片内的 chip 不值得付这个代价：它们旁边就是 17px 的卡片标题链接，
     整张卡的可点面积本来就大；真正需要反复精准点击的是**筛选面板**里的
     条件（几十个 23px 的小目标排在一起）。所以只抬筛选区那一组。

     实测代价：卡片高度回到 +0~+8px，筛选区的触控尺寸不受影响。
     --------------------------------------------------------------------- */
  .facets .chip,
  .ask-conditions .chip {
    min-height: 32px;
    padding: 5px 11px;
    font-size: 12.5px;
  }
  .facets .chip small,
  .ask-conditions .chip small { font-size: 11.5px; }
  .chip-x { font-size: 12px; }
  .sort-opt {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
  }
  .sort-toggle { font-size: 12.5px; }
  .facets-handle { min-height: 40px; }
  /* 搜索按钮：基线是 30×30（app.css:6119 / 5424-5427）。这两条的选择器带
     `body:not([class*="home-preview"])` / `body[class*="home-preview"]`，
     特异性比裸 `.nav-ask .search-btn` 高，所以必须照抄前缀才盖得住。
     宽度 +4 时 `margin-left` 跟着 -4，按钮与输入框右缘的 2px 间隙保持不变。 */
  body:not([class*="home-preview"]) .nav-ask .search-btn { width: 34px; height: 34px; margin-left: -36px; }
  body[class*="home-preview"] .nav-ask .search-btn { width: 34px; height: 34px; margin-left: -36px; }
  .pager a.btn { min-height: 34px; display: inline-flex; align-items: center; }
  .hp-footer-base p > a { min-height: 32px; display: inline-flex; align-items: center; }
  .login-modal-x { width: 36px; height: 36px; }
  .hp-path-card a { min-height: 32px; display: inline-flex; align-items: center; }

  /* ---------------------------------------------------------------------
     2b. 卡片元信息里的长机构名必须能折行

     `/guidelines` 的卡片元信息里有一条**没有类名**的 span，内容是发布机构全称
     （实测：「中国抗癌协会血液肿瘤专业委员会造血干细胞移植与细胞治疗学组」32 字）。
     基线 `.card-meta > span { white-space: nowrap }`（app.css:2236）让它一路
     顶到 363px —— 卡片正文列只有 276px，于是整页被撑到 421px 宽，
     多出来的 31px 被 `body { overflow-x: hidden }` 静默裁掉（读者看到的是
     「页面整体缩了一点、右边被切掉」）。

     这个溢出**改动前就存在**（线上实测 334px / 裁 58px），字号抬到 12.5px 后
     变成 363px / 裁 87px，所以在这里一并修掉：窄屏放开折行。
     中文本来就逐字折行，`overflow-wrap: anywhere` 是给拉丁文期刊名兜底的。
     --------------------------------------------------------------------- */
  .card-meta > span { white-space: normal; overflow-wrap: anywhere; }

  /* ---------------------------------------------------------------------
     3. 字号下限：元信息 ≥12px

     app.css 全文件有 168 处 `font-size < 12px`，**只有 3 处在媒体查询里**，
     其余 165 处在基线上、手机上原样生效。下面把真正出现在手机主要页面上的
     那些逐条抬起来（`/all` 317 个 <12px 元素、`/papers` 315、`/trials` 309）。

     正文基线 13.5px（`--fs-prose`）不动 —— 那个尺寸在手机上是可读的，
     问题全在元信息/标签这一层。
     --------------------------------------------------------------------- */

  /* 列表页：卡片元信息、排序、眉标 */
  .eyebrow { font-size: 12px; }
  .badge { font-size: 12px; }
  .latency { font-size: 12px; }
  .untranslated { font-size: 12px; }
  .card-meta { font-size: 12.5px; }
  .date em { font-size: 12px; }
  .score-value small { font-size: 11.5px; }
  .trial-score .score-value small { font-size: 11.5px; }
  .trial-score .score-stars { font-size: 12px; }
  .site-hit-kind { font-size: 12px; }
  section.lv4 .health-sub { font-size: 12px; }
  /* 患者手册 / 获批应用卡片：编号与「完整度」标签 */
  .pg-id { font-size: 12px; }
  .pg-rating-label { font-size: 12px; }

  /* 筛选区：分组标签、把手、子项 */
  .facet-sub-label { font-size: 12px; }
  .facets-handle-toggle { font-size: 12px; }
  .facet-row .chip small { font-size: 11.5px; }
  .ask-conditions .chip small { font-size: 11.5px; }
  .sub-chip small { font-size: 11.5px; }
  .disease-children .disease-node > .chip-disease { font-size: 12.5px; }
  .disease-children .disease-children > .disease-node > .chip-disease { font-size: 12px; }
  .disease-subgroup-label { font-size: 12px; }

  /* 详情页：事实表、免责声明、公式、试验字段 */
  .fact dt { font-size: 12.5px; }
  .detail-side .disclaimer { font-size: 12px; }
  .formula { font-size: 12px; }
  .bd-row { font-size: 12.5px; }
  .aff-country { font-size: 12px; }
  .outcome-kind { font-size: 12px; }
  .elig-mark { font-size: 12px; }

  /* 页脚 / 站内搜索框 */
  .footer-link-group > p { font-size: 12px; }
  .theme-toggle { font-size: 12px; }
  .brand-tagline { font-size: 12px; }
  body:not([class*="home-preview"]) .nav-ask .input[type="search"] { font-size: 12.5px; }
  body[class*="home-preview"] .nav-ask .input[type="search"] { font-size: 12.5px; }

  /* 首页：hp-* 是全站小字最密集的地方，最小到 8px */
  .hp-kicker { font-size: 12px; }
  .hp-signal-head { font-size: 12px; }
  .hp-signal-grid span { font-size: 12px; }
  .hp-proof span { font-size: 12px; }
  .hp-proof p { font-size: 12px; }
  .hp-specials-intro > p { font-size: 12px; }
  .hp-special-card span { font-size: 12px; }
  .hp-special-card p { font-size: 12px; }
  .hp-special-card i { font-size: 12px; }
  .hp-path-card > small { font-size: 12px; }
  .hp-path-card > b { font-size: 12px; }
  .hp-path-card > p { font-size: 12.5px; }
  .hp-path-card a { font-size: 12.5px; }
  .hp-section-heading > p { font-size: 12px; }
  .hp-section-heading-inline > div > p { font-size: 12px; }
  .hp-audience-eyebrow { font-size: 12px; }
  .hp-board-title b { font-size: 12px; }
  .hp-disease-list small { font-size: 12px; }
  .hp-modality-cloud small { font-size: 12px; }
  .hp-member-copy > .hp-member-label { font-size: 12px; }
  .hp-member-free { font-size: 12.5px; }
  .hp-member-note { font-size: 12px; }
  .hp-member-panel-head { font-size: 12px; }
  .hp-member-benefits small { font-size: 12px; }
  .hp-member-group-head { font-size: 12px; }
  .hp-member-group-head em { font-size: 12px; }
  .hp-member-quiet { font-size: 12px; }
  .hp-join p span { font-size: 12px; }
  .hp-footer-word { font-size: 12px; }
  .hp-sources > p { font-size: 12px; }
  .hp-source-mark b { font-size: 12px; }
  .hp-source-mark small { font-size: 11.5px; }
  .hp-footer-base p { font-size: 12px; }
}