/*!
 * site.css —— 前台三个页面共用
 *
 * 设计约束（中图新阅读公共图书馆少儿科普服务调性）：
 *   · 留白充足、圆角适度、不用高饱和撞色、不用 emoji
 *   · 移动端自适应是硬要求 —— 手机 / 平板 / 桌面三档媒体查询
 *   · 任何断点下都不允许出现横向溢出
 *
 * 【配色来源 —— 重要，改动前请先读】
 *   本文件的色板取自《中图 图书馆合作平台 计划稿原型图.html》的 :root 设计变量
 *   （深墨绿主色 + 暖米白底 + 暖灰线），2026-10-22 按方案 A 整体换肤落地。
 *   换肤只改变量值与字体，**不动 HTML 结构、不动数据模型、不加减页面**。
 *
 * 【三处刻意的偏离 —— 不是漏改，是算过之后的选择】
 *   1. --pd-muted 用 #65706B，不用原型的 --ink3 #8B958F：
 *      后者在暖米白底上对比度只有 2.79:1，不满足 WCAG AA 的 4.5:1；
 *      下沉到 #65706B 后为 4.58:1，仍保持暖灰绿调性。
 *   2. --pd-warn 保留 #8A6100，不用原型的 --gold #B98F2E：
 *      金色在淡黄底上只有 2.61:1，而这一色承担「待审校」流程状态的语义，
 *      必须看得清。只把底色换成原型的 --gold-soft #F7EFD9，前景保持深色（4.88:1）。
 *   3. --pd-blue 保留蓝灰（#4A6C93）而不并入主色：
 *      「本月推荐」徽标刻意用蓝灰系，与琥珀色的流程状态徽标区分开（见 .pd-badge 注释）。
 *      若把它并入墨绿主色，这段文字区分手段会失效——颜色是第二重区分，不能先自废。
 */

/* 商用合规字体：思源黑体自托管（OFL 1.1）。@import 必须位于所有规则之前 */
@import url('./noto-sans-sc.css');

/* ===== 1. 设计变量 ==================================================== */
:root {
  /* 主色：原型 --brand / --brand-soft，深墨绿 */
  --pd-primary: #17453c;
  --pd-primary-dark: #0e2f28;
  --pd-primary-soft: #e8f0ec;

  /* 信息色：蓝灰。保留独立色相的理由见文件头第 3 条 */
  --pd-blue: #4a6c93;
  --pd-blue-soft: #edf2f6;

  /* 文字与线：原型 --ink / --ink2 / --line / --line2（暖调） */
  --pd-ink: #16211c;
  --pd-ink-2: #5c6862;
  --pd-muted: #65706b;
  --pd-line: #e4ded2;
  --pd-line-soft: #efeae0;

  /* 底色：原型 --bg 暖米白，与冷灰底相比是本次换肤最直观的变化 */
  --pd-bg: #f6f3ec;
  --pd-surface: #ffffff;

  /* 状态色：原型砖红 / 金，前景深度按对比度校准（见文件头第 2 条） */
  --pd-danger: #9e3c33;
  --pd-danger-soft: #fbede7;
  --pd-warn: #8a6100;
  --pd-warn-soft: #f7efd9;

  --pd-radius: 14px;
  --pd-radius-sm: 8px;
  /* 阴影色相跟随新 ink（暖墨绿），否则冷色阴影会在米白底上发脏 */
  --pd-shadow: 0 1px 3px rgba(22, 33, 28, .06), 0 6px 18px rgba(22, 33, 28, .05);
  --pd-shadow-hover: 0 2px 6px rgba(22, 33, 28, .08), 0 12px 28px rgba(22, 33, 28, .10);
  --pd-max: 1120px;

  /*
   * v1.70：商用合规字体 —— 自托管思源黑体（Noto Sans SC Variable，OFL 1.1）。
   *
   * 为什么不再把 SimHei 放首位：
   *   SimHei（中易黑体）与微软雅黑都是**商业字库**。CSS 里写字体名让用户本机渲染
   *   属于低风险（不涉及复制分发），但本项目是面向图书馆的商用交付，
   *   一旦哪天有人把字体文件打包进网页/APP，就从"低风险"变成"明确侵权"。
   *   思源黑体用 SIL Open Font License 1.1，白纸黑字允许商用、嵌入、修改、
   *   再分发（许可证见 public/fonts/OFL.txt），交付时可以直接给馆方看。
   *
   * 加载：@import 就在本文件顶部，101 个 unicode-range 分片按需下载，
   *   首屏通常只拉 200-400KB，不会一次 4.6MB。font-display: swap 保证
   *   字体没到时先用系统字渲染，不会白屏。
   *
   * 兜底链：思源 → SimHei/黑体（字体加载失败时顶上）→ 苹方/雅黑 → sans-serif。
   *   兜底只是 CSS 字体名调用，不涉及文件分发，不构成侵权；它存在的意义是
   *   保证网络异常或静态资源 404 时页面仍能正常显示中文。
   */
  --pd-font: "Noto Sans SC Variable", "Noto Sans SC", "SimHei", "黑体", "Heiti SC",
             -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             "Noto Sans CJK SC", sans-serif;
  /*
   * 标题衬线体 —— 原型 .serif 的定义，是本次换肤的第二直观特征。
   * 字体栈按「先本地常见、后通用族」排列：思源宋体 →  Noto Serif SC → 宋体 → SimSun，
   * 最后落到通用 serif，任何一台机器都不会退化成无衬线。
   * 只用于大标题（h1 / h2 / .pd-hero__title / .pd-section__title / .pd-meta__title），
   * 正文与卡片标题仍用无衬线 —— 小字号衬线在屏幕上易糊。
   */
  --pd-font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
}

/* ===== 2. 基础重置 ==================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--pd-font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--pd-ink);
  background: var(--pd-bg);
  /* 窄屏下长链接 / 长 URL 不得撑破视口 */
  overflow-wrap: break-word;
  word-break: break-word;
}

img { max-width: 100%; display: block; border: 0; }
a { color: var(--pd-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0; font-weight: 600; }
/*
 * v1.46：全站改用系统标准字体（无衬线），大标题不再走宋体/衬线。
 *
 * 原来 h1/h2 与两处大字号标题用 --pd-font-serif，理由是"正式感"。
 * 现场反馈要标准字体，所以统一到 --pd-font（-apple-system / 苹方 / 微软雅黑 那一套）：
 * 图书馆的 Windows 机器上宋体渲染在小字号下毛边明显，而标题在首页是 28px 上下，
 * 衬线带来的差异远不如"字重够不够稳"明显。
 *
 * --pd-font-serif 这个变量**保留**（不删）：将来某处想恢复衬线，改回来只动一行；
 * 删掉变量会让人以为这个选项从来没有过。
 */
h1, h2 { font-family: var(--pd-font); }
p { margin: 0; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

.pd-container {
  width: 100%;
  max-width: var(--pd-max);
  margin: 0 auto;
  padding: 0 20px;
}

.pd-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;
}

/* ===== 3. 页头 ======================================================== */
.pd-header {
  background: var(--pd-surface);
  border-bottom: 1px solid var(--pd-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.pd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.pd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pd-ink);
  font-size: 18px;
  font-weight: 600;
  min-width: 0;
}
.pd-brand:hover { text-decoration: none; }

.pd-brand__mark {
  flex: none;
  position: relative; /* v1.67：供配图 img 绝对定位盖满 */
  width: 32px; height: 32px;
  border-radius: 9px;
  /* 原型 logo 是 --brand 纯色实心块。这里保留渐变但收进同色系
     （主色 → --brand2 #2F6E5E），不再跨越到蓝相，避免撞色 */
  background: linear-gradient(135deg, var(--pd-primary), #2f6e5e);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .5px;
}
/* ---- v1.67：后台配置了站点图标时，img 盖满渐变块（"PD"文字被覆盖）；
      清除后移除 img，恢复占位。绝对定位不参与布局，切换零位移 ---- */
.pd-brand__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.pd-brand__text {
  /* 站点标题由后台配置、长度可变，超长时在页头内部截断而不是换行撑高 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-nav { display: flex; gap: 4px; flex: none; }

.pd-nav a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--pd-ink-2);
  font-size: 15px;
  white-space: nowrap;
}
.pd-nav a:hover { background: var(--pd-primary-soft); text-decoration: none; }
.pd-nav a[aria-current="page"] {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-dark);
  font-weight: 600;
}

/* ===== 4. Banner / Hero =============================================== */
/* 没有 banner 时退化为素色条块，不留空洞（契约 §3.7：bannerUrl 为 null 不渲染） */
.pd-hero {
  position: relative;
  background: linear-gradient(135deg, #eef4f1 0%, #e8eee9 100%);
  border-bottom: 1px solid var(--pd-line);
}
.pd-hero--plain { padding: 44px 0 40px; }

.pd-hero__media {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.pd-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pd-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 40, 44, .05) 0%, rgba(16, 40, 44, .55) 100%);
}

.pd-hero__title {
  font-size: 30px;
  /* 衬线体在 700 下中文笔画会糊成一团，降到 600；
     字距由 +.5px 改为 -.01em，与原型 .sec-t h2 的收紧方向一致 */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pd-ink);
}
.pd-hero--media .pd-hero__title { color: #fff; }

.pd-hero__inner--overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 20px 22px;
}

/* ===== 5. 区块 ======================================================== */
.pd-main { padding: 32px 0 56px; }

.pd-section { margin-bottom: 36px; }

.pd-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.pd-section__title {
  font-size: 20px;
  color: var(--pd-ink);
  position: relative;
  padding-left: 12px;
}
.pd-section__title::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 2px;
  background: var(--pd-primary);
}

.pd-section__note { font-size: 14px; color: var(--pd-muted); }

.pd-prose {
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 22px 24px;
  box-shadow: var(--pd-shadow);
}
.pd-prose :where(p, ul, ol, h1, h2, h3, h4, blockquote) { margin: 0 0 .85em; }
.pd-prose > :last-child { margin-bottom: 0; }
.pd-prose ul, .pd-prose ol { padding-left: 1.4em; }
.pd-prose a { text-decoration: underline; }
.pd-prose blockquote {
  border-left: 3px solid var(--pd-line);
  padding-left: 14px;
  color: var(--pd-ink-2);
}

/* Quill 内容里的图片与视频不溢出卡片 */
.pd-prose img, .pd-prose video, .pd-prose iframe { max-width: 100%; height: auto; }

/* ===== 5b. 介绍科普三栏卡片 =========================================== */
/* 栅格仍是三栏：第 1 栏 = 品牌介绍（.pd-intro-brand），第 2–3 栏 = 本月推荐整块
   （.pd-monthly，grid-column: 2 / -1）。月度推荐没有拆成独立区块，只是块内多了
   一行区块标题，标题文字来自 siteConfig.monthlyTitle（后台可改）。 */
.pd-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
.pd-intro-card {
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  overflow: hidden;
  box-shadow: var(--pd-shadow);
}
/* 底色不再用 .pd-intro-card:nth-child(n)——月度卡被包进 .pd-monthly__cards 以后，
   它们各自都是「容器里的第 1 / 第 2 个」，nth-child 算的是容器内的序号而不是整块的
   三栏序号，两张推荐卡会一起拿到绿色。改成按「所在块」+ 显式修饰类上色：
   品牌卡绿（品牌卡是唯一的），推荐卡用 --warm / --cool 修饰类，与 DOM 顺序无关。 */
.pd-intro-brand .pd-intro-card { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); }
.pd-intro-card--warm { background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%); }
.pd-intro-card--cool { background: linear-gradient(135deg, #e3f2fd 0%, #e8eaf6 100%); }

/* 推荐卡用 <a> 承载整卡点击。⚠️ <a> 默认 display:inline，
   不显式设成 block 的话卡片在栅格里会塌陷、与旁边的卡高矮不齐；
   同时清掉链接的下划线与默认色。 */
a.pd-intro-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* --- 三栏的两块：品牌介绍 / 本月推荐 --------------------------------- */
/* 品牌卡外面多了一层 div（月度块要一起包标题，两栏得对称）。
   它作为栅格项被拉伸到行高，内层卡用 flex 撑满，避免比别人矮一截。 */
.pd-intro-brand {
  grid-column: 1;
  display: flex;
}
.pd-intro-brand > .pd-intro-card {
  flex: 1 1 auto;
  min-width: 0;
  /* 内部纵向排布，供下面的 __body 吃掉剩余高度。
     加 flex 的同时卡片高度仍由栅格决定（flex 只重排内部），不影响三卡底边平齐。 */
  display: flex;
  flex-direction: column;
}
/* 图被清空 / 加载失败 / 后台没上传时，卡片照样会被栅格拉到与右列等高
   （「三卡底边平齐」要求如此），而正文只有六行左右 —— 多出来的高度原先全部堆在
   卡底，实测 185px 空白渐变，看上去像"图片加载失败"。这与"没有图"是两回事：
   前者要修，后者是正常形态。
   解法是让正文吃掉剩余高度并**纵向居中**：没有图时上下留白对称，是有意的留白；
   有图时正文在图片下方剩余空间里居中，也不留单边大空白。
   ⚠️ 只作用于品牌卡：月度卡的 body 不能这样处理 —— 那边底部有推荐理由条要贴底。 */
.pd-intro-brand > .pd-intro-card > .pd-intro-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 月度块占第 2–3 栏。用 -1 而不是写死 3：≤900px 变两列时它仍然贴右边缘。 */
.pd-monthly {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
}
/* 顶部对齐：区块标题紧贴「介绍科普」区头，卡片从顶部起排，空白落在块**下方**。
   刻意不给 __head 任何 margin-top:auto —— 那样会把整组推到品牌卡底部，
   上方留出一大块空白，而"上方留白"读起来是"这里缺了东西"，比下方留白糟得多。
   （标题紧贴卡片上沿在顶对齐下天然成立：标题本来就在卡片正上方。） */
.pd-monthly__head { margin-top: 0; }
.pd-monthly__title {
  border-left: 3px solid var(--pd-primary);
  padding-left: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pd-ink);
}
/* 区块推荐理由（site_config.monthly_note）。与卡片里的推荐语块同一套观感，
   颜色/圆角全部走变量，不在这里重写色值。
   min-height 44px：只写一行字时否则会薄成一条，跟下面的空隙连成一片更难读。
   ⚠️ 刻意**不**用 flex:1 或 justify-content 去让这块填满"标题到卡片"之间的空隙：
   文案只有一行时会被拉成上百像素高的空盒子，比留着空隙更难看。空隙由
   .pd-monthly__cards 的 margin-top:auto 统一收到卡片组下方。 */
.pd-monthly__note {
  margin: 0 0 10px;
  padding: 8px 10px;
  min-height: 44px;
  background: var(--pd-primary-soft);
  border-radius: var(--pd-radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-ink-2);
}
.pd-monthly__cards {
  /* margin-top:auto 把卡片组压到块底部：.pd-monthly 被栅格 align-items:stretch
     拉满行高，块底 = 品牌卡底，于是三张卡片的底边平齐（用户要的"底部平齐"）。
     只沉这组、不拉伸卡片本身 —— 卡片仍是内容高度，要的是"小卡片 + 底边齐"。 */
  margin-top: auto;
  /* 内容高度即可，不参与竖向拉伸（拉伸会得到两张空荡荡的高卡） */
  flex: none;
  display: grid;
  /* ⚠️ 不要"顺手优化"成 repeat(auto-fit, minmax(0, 1fr))：
     只剩 1 条推荐时 auto-fit 会把那张卡拉成整块宽（715px）的巨卡，
     既违背"月度卡要小"，又让同一组件在 1 条 / 2 条时出现两种宽度。
     宁可右侧留白，也不要同一组件两种尺寸。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  /* 两列等宽（minmax(0,1fr)）+ 行内两张卡等高（align-items 默认 stretch），
     但这一行不被拉伸去填满剩余高度。 */
  align-items: stretch;
  align-content: start;
}
/* 一条推荐素材都没有时整块是 hidden，品牌卡独占整行。
   不这样写的话三栏栅格里只剩第 1 栏有内容、右边空掉 2/3，看起来像加载失败。
   :has() 不支持的老浏览器退回原样（品牌卡占 1/3），不会崩。 */
.pd-intro-grid:has(.pd-monthly[hidden]) > .pd-intro-brand { grid-column: 1 / -1; }
/* 独占整行时封面别再用 4:3，那样会被拉成一整屏高的图；21:9 再压一个高度上限，
   否则一张 1080 宽的封面就有 460px 高，比正文还抢眼。
   ⚠️ width:100% 不能省：只写 aspect-ratio + max-height 时，Chrome 会拿被压到
   260px 的高度反推宽度（260×21/9≈607），封面缩成半宽、右边露出一截空卡 —— 实测过。 */
.pd-intro-grid:has(.pd-monthly[hidden]) > .pd-intro-brand .pd-intro-card__media {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 260px;
}
a.pd-intro-card:hover { box-shadow: 0 6px 18px rgba(23, 69, 60, .14); }
a.pd-intro-card:focus-visible {
  outline: 2px solid var(--pd-primary);
  outline-offset: 3px;
}

.pd-intro-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.pd-intro-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-intro-card__body {
  padding: 14px 16px 16px;
}

/* 「本月推荐」角标：目前**故意没有引用**——两张推荐卡上方的区块标题
   （取自后台可改的 siteConfig.monthlyTitle）取代了它，卡内再写死「本月推荐」
   会跟「本期精选」之类的自定义标题打架。样式留着是为了恢复只改一行 HTML：
   在 .pd-intro-card__body 里加回 <span class="pd-intro-card__badge">本月推荐</span>。 */
.pd-intro-card__badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #3f5f80;
  border: 1px solid rgba(63, 95, 128, .38);
  font-size: 12px;
  line-height: 1.5;
}

.pd-intro-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-ink);
  margin-bottom: 8px;
}
.pd-intro-card__text {
  font-size: 14px;
  color: var(--pd-ink-2);
  line-height: 1.6;
}
.pd-intro-card__text p { margin: 0 0 0.6em; }
.pd-intro-card__text p:last-child { margin-bottom: 0; }

/* --- 5b1. 月度推荐卡整体比品牌卡小一号 -------------------------------- */
/* 只作用于 .pd-intro-card--monthly，品牌卡的量级保持不变。
   三处一起往下压：封面比例（有封面时才起作用，没封面时 media 被 JS 收起）、
   去掉角标那一行、内边距与字号各降一档。实测同样的文案，卡片内容高度
   从 137px 降到 90px（-34%），明细见自测报告。 */
.pd-intro-card--monthly .pd-intro-card__media { aspect-ratio: 16 / 9; }
.pd-intro-card--monthly .pd-intro-card__body { padding: 10px 12px 12px; }
.pd-intro-card--monthly .pd-intro-card__title {
  font-size: 15px;
  margin-bottom: 6px;
}
/* 简介两行截断：推荐卡是「扫一眼」的位置，简介只留两行，
   完整介绍在详情页。用 -webkit-box 是当前截断唯一稳定的跨浏览器写法。 */
.pd-intro-card--monthly .pd-intro-card__text {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 推荐理由：与简介并列的第二段文案，浅底块、同样两行截断。
   左边框是**唯一的"这是推荐语"信号**：只靠浅底时读者会把它当成正文的续行
   （截图里就发生过）。不加「推荐理由：」这类文字前缀 —— 205px 宽的卡里
   四个字会挤到换行，占掉本来就紧张的两行额度。
   原来这里是 .pd-card__reason（全项目零引用、只做了样式没接线），
   「后台填了理由前台不显示」正是那条没接上的线；现在并进月度卡，不留两套同义样式。 */
.pd-intro-card--monthly .pd-intro-card__reason {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--pd-primary-soft);
  border-left: 2px solid var(--pd-primary);
  border-radius: var(--pd-radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pd-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 5c. 经典100 横向列表 =========================================== */
.pd-classic-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  scroll-snap-type: x mandatory;
}
.pd-classic-item {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  box-shadow: var(--pd-shadow);
  scroll-snap-align: start;
}
.pd-classic-item__num {
  flex: none;
  font-size: 28px;
  font-weight: 700;
  color: var(--pd-primary);
  font-family: var(--pd-font);
  line-height: 1;
}
.pd-classic-item__content h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-ink);
  margin-bottom: 4px;
}
.pd-classic-item__content p {
  font-size: 13px;
  color: var(--pd-muted);
  margin: 0;
}
.pd-section__relation-note {
  background: var(--pd-primary-soft);
  border-radius: var(--pd-radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--pd-primary-dark);
  line-height: 1.7;
}
.pd-section__relation-note p { margin: 0; }

/* ===== 5d. 图书展示区 ================================================= */
.pd-book-section {
  margin-top: 8px;
}
.pd-book-layout {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 24px;
  box-shadow: var(--pd-shadow);
}

/* 「科普经典100」整块（封面图 + 文字）可点击跳转，替代原先单独的「跳转观看」按钮。
   刻意**不用** <a> 包裹：文字区是后台富文本（relationNote），里面可能自带链接，
   <a> 套 <a> 是非法 HTML，浏览器会强行拆开、排版错乱。改用 data-href + 事件委托，
   点整块跳转、但点到块内已有链接时不劫持（见 site-home.js）。 */
.pd-book-layout[data-href] {
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pd-book-layout[data-href]:hover {
  border-color: var(--pd-primary);
  box-shadow: 0 6px 20px rgba(23, 69, 60, .16);
  transform: translateY(-2px);
}
.pd-book-layout[data-href]:focus-visible {
  outline: 2px solid var(--pd-primary);
  outline-offset: 3px;
}

.pd-book-cover {
  flex: 0 0 160px;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--pd-primary), #2f6e5e);
  border-radius: var(--pd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--pd-font);
  box-shadow: 0 4px 12px rgba(23, 69, 60, .25);
}
/* 封面图铺满整个封面区：容器是 flex 居中，img 不撑满就会跟
   .pd-book-cover__placeholder 并排显示成「图 + 文字」两栏。
   图与占位文字是**互斥**的，互斥由 JS 控制（site-home.js applyCoverImage），
   本条只负责「图显示时占满格子」。 */
/* 全局兜底：带 hidden 属性的元素一律不显示。
   此前 .pd-btn / .pd-book-cover img / a.pd-intro-card 各自声明了 display，
   特异性高于 UA 样式表的 [hidden]，导致 hidden 失效（裂图图标、空推荐卡都因此漏出）。
   与其逐处补丁，不如全局规则收口；!important 使其不受声明顺序与特异性影响。 */
[hidden] { display: none !important; }

.pd-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.pd-book-info {
  flex: 1;
  min-width: 0;
}
.pd-book-info p {
  font-size: 15px;
  color: var(--pd-ink-2);
  margin: 0 0 10px;
  line-height: 1.6;
}
.pd-book-progress {
  margin: 16px 0;
}
.pd-book-progress > span {
  font-size: 13px;
  color: var(--pd-muted);
  display: block;
  margin-bottom: 6px;
}
.pd-book-progress__bar {
  height: 8px;
  background: var(--pd-line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.pd-book-progress__fill {
  height: 100%;
  background: var(--pd-primary);
  border-radius: 4px;
  transition: width .3s ease;
}

/* 响应式：平板 */
@media (max-width: 900px) {
  .pd-intro-grid { grid-template-columns: 1fr 1fr; }
  /* 两列时品牌卡在第 1 栏、月度块占第 2 栏（grid-column: 2 / -1 在 2 列里就是第 2 栏）。
     此时右栏只有约 422px，两卡并排各剩 205px —— 标题折成两行、简介只剩半句，
     读不了。改为单列堆叠，每张卡吃满 422px；顺带把"月度块比品牌卡矮一截"填上
     （标题 ~30px + 两卡各 ~150px ≈ 品牌卡高度）。 */
  .pd-monthly__cards { grid-template-columns: 1fr; }
  .pd-book-layout { flex-direction: column; text-align: center; }
  .pd-book-cover { flex: 0 0 120px; width: 120px; }
}
/* 响应式：手机 */
@media (max-width: 600px) {
  .pd-intro-grid { grid-template-columns: 1fr; }
  /* 单列：两块各占满一行，否则月度块会挤在第 2 栏里溢出屏幕 */
  .pd-intro-brand,
  .pd-monthly { grid-column: 1 / -1; }
  /* 手机上回到并排两张：整行宽、每张约 281px，标题与两行简介都读得清，
     上下堆两张反而要多滚一屏。这里必须显式写回 2 列 —— 600 也命中上面的
     ≤900 单列规则，不写回就会跟着变成堆叠。 */
  .pd-monthly__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pd-classic-item { flex: 0 0 240px; }
}

/* 富文本字段尚未编辑时的占位行 */
.pd-placeholder { color: var(--pd-muted); font-size: 15px; font-style: normal; }

/* ===== 6. 卡片网格 ==================================================== */
.pd-grid {
  display: grid;
  /* auto-fill + minmax：卡片宽度自适应，横向永不超过容器宽度 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.pd-card {
  display: flex;
  flex-direction: column;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  overflow: hidden;
  box-shadow: var(--pd-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color: inherit;
}
.pd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-hover);
  border-color: #c9dcdb;
  text-decoration: none;
}
.pd-card:focus-visible { outline: 2px solid var(--pd-primary); outline-offset: 2px; }

.pd-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #eff4f1, #e9efea);
  flex: none;
}
.pd-card__cover img { width: 100%; height: 100%; object-fit: cover; }

/* 封面缺失或被删除时的占位块 */
.pd-card__cover--none,
.pd-card__cover--broken {
  display: flex; align-items: center; justify-content: center;
}
.pd-card__cover--broken img { display: none; }

.pd-card__cover-text { color: var(--pd-muted); font-size: 14px; }

/*
 * 「本月推荐」是**内容属性**（这条内容被选为推荐），与后台的「待审校」（流程状态）
 * 语义不同，因此刻意采用蓝灰色系，避免与琥珀色的流程状态徽标混为一谈。
 * 文字仍然是主要区分手段，颜色只是第二重区分。
 */
.pd-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #3f5f80;
  border: 1px solid rgba(63, 95, 128, .38);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}

.pd-card__body { padding: 14px 16px 16px; flex: 1; }

.pd-card__title {
  font-size: 16px;
  color: var(--pd-ink);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-card__summary {
  font-size: 14px;
  color: var(--pd-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 7. 列表页工具条 ================================================ */
.pd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pd-search {
  display: flex;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}
.pd-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: var(--pd-surface);
  font-size: 15px;
  color: var(--pd-ink);
}
.pd-search input:focus-visible { outline: 2px solid var(--pd-primary); outline-offset: 0; }

.pd-count { font-size: 14px; color: var(--pd-muted); }

/* ===== 8. 按钮 ======================================================== */
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--pd-primary);
  border-radius: var(--pd-radius-sm);
  background: var(--pd-primary);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.pd-btn:hover { background: var(--pd-primary-dark); border-color: var(--pd-primary-dark); text-decoration: none; }
.pd-btn:disabled { opacity: .55; cursor: not-allowed; }

.pd-btn--ghost {
  background: var(--pd-surface);
  color: var(--pd-primary-dark);
  border-color: var(--pd-line);
}
.pd-btn--ghost:hover { background: var(--pd-primary-soft); border-color: #bcd8d6; }

.pd-btn--sm { padding: 6px 14px; font-size: 14px; }

.pd-btn--download {
  background: var(--pd-surface);
  color: var(--pd-primary-dark);
  border-color: var(--pd-line);
}
.pd-btn--download:hover {
  background: var(--pd-primary-soft);
  border-color: var(--pd-primary);
}

/* ===== 8a. 弹窗（下载APP二维码） ====================================== */
.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pd-modal[hidden] { display: none; }

/* 同一条约定，给按钮补一份：`.pd-btn` 自带 `display: inline-flex`（570 行起），
   会盖掉 `[hidden]` 的默认 `display: none`——只加 hidden 属性，按钮照样显示，
   而且没报错、没警告，**看不出到底藏没藏住**。 */
.pd-btn[hidden] { display: none; }

.pd-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 33, 28, .45);
}

.pd-modal__content {
  position: relative;
  background: var(--pd-surface);
  border-radius: var(--pd-radius);
  padding: 32px 28px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--pd-shadow-hover);
  text-align: center;
}

.pd-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--pd-muted);
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.pd-modal__close:hover {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-dark);
}

.pd-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--pd-ink);
  margin-bottom: 20px;
}

.pd-modal__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: 16px;
}

.pd-modal__qr img {
  max-width: 240px;
  max-height: 240px;
  border-radius: var(--pd-radius-sm);
}

.pd-modal__qr-placeholder {
  color: var(--pd-muted);
  font-size: 14px;
}

.pd-modal__hint {
  font-size: 13px;
  color: var(--pd-muted);
  margin: 0;
}

/* ===== 8b. 区块操作按钮（跳转观看） =================================== */
.pd-section__action {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ===== 9. 分页 ======================================================== */
.pd-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.pd-pager button {
  min-width: 38px;
  padding: 7px 12px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background: var(--pd-surface);
  color: var(--pd-ink-2);
  font-size: 14px;
}
.pd-pager button:hover:not(:disabled) { border-color: var(--pd-primary); color: var(--pd-primary-dark); }
.pd-pager button[aria-current="page"] {
  background: var(--pd-primary);
  border-color: var(--pd-primary);
  color: #fff;
  font-weight: 600;
}
.pd-pager button:disabled { opacity: .45; cursor: not-allowed; }

.pd-pager__info { font-size: 14px; color: var(--pd-muted); margin-left: 4px; }

/* ===== 10. 详情页 ===================================================== */
.pd-crumbs {
  font-size: 14px;
  color: var(--pd-muted);
  margin-bottom: 14px;
}
.pd-crumbs a { color: var(--pd-muted); }

.pd-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.pd-player {
  position: relative;
  /* 播放器底色取原型深色 #0D1411：比原来的冷青灰更沉，
     且不抢视频画面 —— 播放区里唯一该被注意的是画面本身 */
  background: #0d1411;
  border-radius: var(--pd-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.pd-player__video {
  width: 100%;
  height: 100%;
  display: block;
  /* 播放器底色取原型深色 #0D1411：比原来的冷青灰更沉，
     且不抢视频画面 —— 播放区里唯一该被注意的是画面本身 */
  background: #0d1411;
  object-fit: contain;
}

/* 私有加密素材走 Aliplayer：SDK 会在自己的容器里新建 <video> 和控件条，
   所以只给它一个铺满播放区的盒子；原生 <video> 仍留在 DOM 里但被 JS 隐藏
   （保留引用，凭证消失时可以原样切回直链，不用重建整块播放区）。 */
.pd-player__ali {
  position: absolute;
  inset: 0;
  background: #0d1411;
}
.pd-player__ali .prism-player { width: 100%; height: 100%; }

.pd-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(12, 26, 29, .35), rgba(12, 26, 29, .72));
  color: #fff;
}

.pd-player__play {
  width: 68px; height: 68px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .94);
  color: var(--pd-primary-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: transform .16s ease, background .16s ease;
}
.pd-player__play:hover { transform: scale(1.06); background: #fff; }
.pd-player__play:disabled { opacity: .6; cursor: progress; transform: none; }

.pd-player__hint { font-size: 14px; color: rgba(255, 255, 255, .88); max-width: 420px; }

/* IP 校验失败后的提示层：文案来自服务端 message，长度不可控，需可滚动 */
.pd-player__notice {
  align-items: center;
  gap: 12px;
  background: rgba(12, 26, 29, .82);
}
.pd-player__notice-icon { flex: none; opacity: .9; }
.pd-player__notice-text {
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  max-width: 460px;
}

.pd-player__videoerror {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 14px;
  background: rgba(179, 69, 60, .94);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.pd-meta {
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 20px 22px;
  box-shadow: var(--pd-shadow);
}

.pd-meta__title { font-size: 22px; margin-bottom: 10px; }

.pd-meta__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.pd-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--pd-primary-soft);
  color: var(--pd-primary-dark);
}
.pd-tag--warn { background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-tag--muted { background: var(--pd-line-soft); color: var(--pd-muted); }
/* 蓝灰：内容属性（本月推荐），与琥珀色的流程状态区分 */
.pd-tag--info { background: var(--pd-blue-soft); color: #35506b; }

.pd-meta__summary {
  font-size: 15px;
  color: var(--pd-ink-2);
  white-space: pre-line;
  margin-bottom: 16px;
}

.pd-meta__date { font-size: 13px; color: var(--pd-muted); }

/* 播放器右上角 ⋮ 设置菜单（v1.50 与原生"三个点"合并；v1.51 定位右上角）：
   requestPlay 用 controlslist 把原生菜单整体禁掉（Chrome 会收走那个按钮），
   这里自建 ⋮；主层是「循环播放模式 / 播放速度」两行，点开才进子层，向下弹出。
   播放时的自动隐身由 JS 挂 class（.pd-loop--hidden），暂停/未开播常显。
   全屏是 <video>/Aliplayer 容器自己全屏，按钮随 .pd-player 留在页面里（可接受）。
   挂在 .pd-player 最后，天然盖住视频与 Aliplayer 容器。 */
.pd-loop {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 30;
  transition: opacity .25s ease;
}
.pd-loop--hidden { opacity: 0; pointer-events: none; }
.pd-loop__btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(12, 26, 29, .55);
  color: #fff;
  cursor: pointer;
}
.pd-loop__btn:hover { background: rgba(12, 26, 29, .8); }

.pd-loop__menu {
  position: absolute;
  right: 0;
  top: 42px; /* 按钮在右上角，菜单向下弹（overflow:hidden 的播放器里向上弹会被裁掉） */
  min-width: 250px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  box-shadow: var(--pd-shadow);
  text-align: left;
}
/* 菜单三种行的共同底子：整行可点、白底上的紧凑排布 */
.pd-loop__row,
.pd-loop__back,
.pd-loop__item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--pd-ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.pd-loop__row:hover,
.pd-loop__back:hover,
.pd-loop__item:hover { background: var(--pd-line-soft); }

/* 主层：文案 + 右箭头，整行可点进子层 */
.pd-loop__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pd-loop__arrow { color: var(--pd-muted); display: flex; }

/* 子层顶部的返回行：兼作层级标题，压暗并加底线区别于普通选项 */
.pd-loop__back {
  border-bottom: 1px solid var(--pd-line);
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  color: var(--pd-ink-2);
  margin-bottom: 4px;
}

.pd-loop__item { padding: 8px 10px; }
.pd-loop__item--active { color: var(--pd-primary-dark); font-weight: 600; }

.pd-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-blue-soft);
  color: #35506b;
  font-size: 13px;
  line-height: 1.6;
}

/* ===== 11. 状态组件 =================================================== */
.pd-state {
  padding: 36px 20px;
  text-align: center;
  background: var(--pd-surface);
  border: 1px dashed var(--pd-line);
  border-radius: var(--pd-radius);
  color: var(--pd-muted);
}
.pd-state--error { border-color: #e6c3c0; background: var(--pd-danger-soft); color: var(--pd-danger); }
.pd-state__text { font-size: 15px; }
.pd-state__detail { font-size: 13px; margin-top: 6px; opacity: .85; }

.pd-state__actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 骨架占位：数据回来前先占位，避免页面跳动 */
.pd-skeleton {
  background: linear-gradient(90deg, #eef3f3 25%, #e4ecec 37%, #eef3f3 63%);
  background-size: 400% 100%;
  animation: pd-shimmer 1.4s ease infinite;
  border-radius: var(--pd-radius-sm);
}
@keyframes pd-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ===== 12. 页脚 ======================================================= */
.pd-footer {
  border-top: 1px solid var(--pd-line);
  background: var(--pd-surface);
  padding: 24px 0;
  margin-top: auto;
}
.pd-footer__text {
  color: var(--pd-muted);
  font-size: 14px;
  text-align: center;
  /* 纯文本字段可能含换行（契约 §3.7）：保留换行但不允许 HTML */
  white-space: pre-line;
}

/* ===== 13. 页面骨架撑满视口 =========================================== */
.pd-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== 14. 响应式：平板 ============================================== */
@media (max-width: 900px) {
  .pd-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pd-hero__media { height: 200px; }
  .pd-hero__title { font-size: 25px; }
  .pd-prose { padding: 18px 18px; }
  .pd-main { padding: 26px 0 44px; }
  .pd-section__img { max-height: 320px; }
}

/* ===== 15. 响应式：手机 ============================================== */
@media (max-width: 600px) {
  body { font-size: 15px; }

  .pd-container { padding: 0 14px; }

  .pd-header__inner { min-height: 56px; gap: 10px; }
  .pd-brand { font-size: 16px; }
  .pd-brand__mark { width: 28px; height: 28px; font-size: 12px; }
  .pd-nav a { padding: 6px 10px; font-size: 14px; }

  .pd-hero__media { height: 158px; }
  .pd-hero__title { font-size: 21px; }
  .pd-hero--plain { padding: 26px 0 24px; }

  .pd-section { margin-bottom: 26px; }
  .pd-section__title { font-size: 18px; }
  .pd-section__head { flex-wrap: wrap; gap: 6px; }
  .pd-section__img { max-height: 240px; }

  .pd-grid { grid-template-columns: 1fr; gap: 14px; }

  .pd-toolbar { flex-direction: column; align-items: stretch; }
  .pd-search { flex: 1 1 auto; }

  .pd-player__play { width: 56px; height: 56px; }
  .pd-player__hint { font-size: 13px; }

  .pd-pager button { min-width: 34px; padding: 6px 10px; }
  .pd-pager__info { width: 100%; text-align: center; }

  .pd-meta { padding: 16px 16px; }
  .pd-meta__title { font-size: 19px; }
}

/* ===== 16. 降低动效偏好 ============================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== 分季剧集页（v1.46） =============================================
 * 结构与卡片都复用既有类（.pd-grid / .pd-card 由 PD.assetCard 渲染），
 * 这里只补"季"这一层的容器样式，避免出现第二套卡片外观。
 * 季封面可选：没上传时不渲染 img（见 site-seasons.js），
 * 所以下面的 flex 布局在无封面时自然变成纯文字标题，不需要额外分支。
 */
.pd-season { margin-bottom: 40px; }
.pd-season:last-of-type { margin-bottom: 16px; }

.pd-season__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--pd-line);
}

.pd-season__cover {
  flex: 0 0 auto;
  width: 96px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-line-soft);
}

.pd-season__titles { min-width: 0; }

.pd-season__title {
  font-size: 20px;
  color: var(--pd-primary);
}

.pd-season__meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pd-muted);
}

.pd-season__empty {
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  color: var(--pd-muted);
}

.pd-seasons__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--pd-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .pd-season { margin-bottom: 28px; }
  .pd-season__head { gap: 12px; }
  .pd-season__cover { width: 64px; height: 42px; }
  .pd-season__title { font-size: 17px; }
}

/* ===== 首页内容入口（v1.46） =============================================
 * 目标只有一个：读者进首屏就知道"点哪里能看内容"。
 * 做法借鉴参考站的"左侧一列大色块"，但**不照搬卡通配色** ——
 * 本站的调性约定是暖米白 + 墨绿、简洁正式，所以这里用低饱和色相区分相邻入口，
 * 靠尺寸与留白制造"可点"的暗示，而不是靠高饱和撞色。
 * 每个色相的对比度都按 --pd-ink 文本校验过（深色字压浅色底）。
 */
.pd-entries { margin-top: 8px; }

.pd-entries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.pd-entries__loading {
  margin: 0;
  color: var(--pd-muted);
  font-size: 14px;
}

.pd-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 18px 44px 18px 20px;
  border-radius: var(--pd-radius);
  border: 1px solid transparent;
  color: var(--pd-ink);
  text-decoration: none;
  box-shadow: var(--pd-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pd-entry:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-hover);
}

.pd-entry:focus-visible {
  outline: 2px solid var(--pd-primary);
  outline-offset: 2px;
}

.pd-entry__name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.pd-entry__meta {
  font-size: 13px;
  color: var(--pd-muted);
}

.pd-entry__arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: .45;
}

/* 六个低饱和色相：只用于区分，不承载语义 */
.pd-entry--sage  { background: #e3ece4; }
.pd-entry--clay  { background: #f2e4d8; }
.pd-entry--sand  { background: #f4eed9; }
.pd-entry--sky   { background: #e2ebf1; }
.pd-entry--mauve { background: #ece4ee; }
.pd-entry--moss  { background: #e6ebe0; }
.pd-entry--plain { background: var(--pd-surface); border-color: var(--pd-line); }

@media (max-width: 640px) {
  .pd-entries__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-entry { min-height: 78px; padding: 14px 34px 14px 14px; }
  .pd-entry__name { font-size: 16px; }
  .pd-entry__arrow { right: 12px; font-size: 17px; }
}

/* ===== 专辑索引与详情（v1.47，37 个专辑场景） ===== */
.pd-albums__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-albums__search { flex: 1 1 260px; max-width: 420px; padding: 10px 14px; font-size: 15px;
  border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); background: var(--pd-surface); color: var(--pd-ink); }
.pd-albums__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pd-album { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px;
  background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius);
  color: var(--pd-ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.pd-album:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--pd-shadow-hover); }
.pd-album__no { font-size: 12px; color: var(--pd-muted); }
.pd-album__name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pd-album__meta { font-size: 13px; color: var(--pd-muted); }
.pd-album__flag { position: absolute; top: 12px; right: 12px; font-size: 11px; padding: 2px 6px;
  border-radius: 999px; background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-albums__empty { color: var(--pd-muted); font-size: 14px; padding: 12px 0; }
.pd-albums__back { margin: 0 0 14px; font-size: 14px; }
@media (max-width: 640px) { .pd-albums__grid { grid-template-columns: 1fr 1fr; } }

/* ===== 首页原型还原版（V2 深空蓝主题，仅首页使用） =====================
 * 配色/字号/圆角/间距逐项取自原型页（土豆逗科普经典100 专题页原型 V2 三屏）。
 * 类名一律 hp- 前缀：本段只追加新类，不修改上面任何 pd- 类，其他页面零影响。
 * 深空蓝底挂在 body[data-page="home"] 上（页头/页脚仍是原奶油色，不受影响）。
 */
body[data-page="home"] {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, #ffffffcc 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 15%, #ffffff99 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 40%, #ffffff77 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, #ffffff88 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 85%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 80%, #ffffff66 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 75%, #ffffff99 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 12%, #ffffff88 50%, transparent 51%),
    linear-gradient(180deg, #0A1A38 0%, #0B1E3F 45%, #0E2C55 100%);
  background-attachment: fixed;
}
body[data-page="home"] .pd-main { padding-top: 0; }

.hp-section { padding: 40px 0 36px; position: relative; }
.hp-page { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- 首屏 Hero ----
   align-items: stretch：右列形象区随行高拉伸 —— 上端对齐 hero 顶、下端对齐每月推荐底
   （2026-11-05 需求：每月推荐并入左列后，形象区占满整个 hero 行高并放大） */
.hp-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px;
  align-items: stretch;
}
.hp-kicker { color: #F7C948; font-size: 16px; letter-spacing: 2px; font-weight: 700; }
.hp-hero-title {
  color: #F7C948;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  margin: 12px 0 16px;
  text-shadow: 0 4px 0 #00000033;
}
.hp-hero-subtitle { color: #E9EFF9; font-size: 20px; margin: 0; }
.hp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #E8622C, #FF8A50);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  padding: 16px 40px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 28px;
  box-shadow: 0 8px 24px #E8622C55;
  transition: transform .2s;
}
.hp-btn-primary:hover { transform: translateY(-2px) scale(1.02); }
.hp-btn-primary:focus-visible { outline: 3px solid #F7C948; outline-offset: 3px; }
.hp-btn-play {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  position: relative;
  flex: none;
}
.hp-btn-play::after {
  content: "";
  position: absolute; left: 9px; top: 6px;
  border-left: 10px solid #E8622C;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.hp-hero-art {
  text-align: center;
  position: relative;
  min-height: 280px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-rocket { position: absolute; right: 0; top: 0; font-size: 56px; }
.hp-mascot {
  font-size: 260px;
  line-height: 1.1;
  filter: drop-shadow(0 22px 40px #00000066);
}
.hp-flag {
  position: absolute; left: 6%; bottom: 8%;
  background: #E8622C; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 6px;
  transform: rotate(-6deg);
  box-shadow: 0 4px 10px #0006;
}
/* ---- v1.64：后台配置了首屏形象图时的两态 ----
   不参与布局计算（容器仍是 flex 居中 + min-height），配图/回退切换不会引起布局跳动 */
.hp-hero-img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 22px 40px #00000066);
}
.hp-hero-art.has-image .hp-rocket,
.hp-hero-art.has-image .hp-mascot,
.hp-hero-art.has-image .hp-flag { display: none; }
/* ---- v1.66 配图两态（intro/about）已全部撤下 ----
   v1.70 撤 intro 槽位、v1.72 删「关于」卡片连 about 槽位一并移除；
   .hp-intro-icon/.hp-about-art/.hp-art-img 相关规则已清理。
   后台对应编辑位收起（hidden 数据保留），恢复时连带 CSS 一起加回。 */

/* ---- 通用白色内容卡 / 区块标题 ---- */
.hp-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: 0 12px 32px #00000038;
}
.hp-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 20px;
}
.hp-section-title .hp-star { color: #F7C948; font-size: 26px; }
.hp-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #ffffff44, transparent);
}

/* ---- ★资源介绍 ---- */
/* v1.72：资源介绍卡布局 —— 左栏（配图左上 + 卖点左下）/ 数据条居右 / 奖项占整行。
 * flex-wrap + 奖项 flex-basis:100% 实现整行换行；窄屏走 900px 断点的单列堆叠。 */
.hp-intro { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.hp-intro-left {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hp-intro-left .hp-intro-icon { text-align: left; }
/* v1.70：资源介绍一段式文案（原三行卖点列表撤下后，排版沿用同款字号行高） */
.hp-intro-text { margin: 0; color: #444; font-size: 16px; line-height: 2; }
.hp-intro-text strong { color: #1B3866; }

/* ---- v1.71 获奖记录（资源介绍卡内）：米色底 + 左侧橙竖条，照主理人给的样式图 ----
 * 布局：2 列网格；<900px 窄屏退 1 列。奖项是荣誉事实，静态写死在 index.html，
 * 不进后台配置——要增删改按行复制 <li class="hp-award"> 即可。
 * 日期 <b> 用品牌橙加粗（与竖条同色），正文深暖灰；悬停无交互（它们不是链接）。 */
.hp-awards {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  flex: 0 0 100%; /* v1.72：在 .hp-intro flex 容器里独占一整行 */
}
.hp-award {
  background: #FAF3E8;
  border-left: 4px solid #E8862C;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #4A3F30;
}
.hp-award b {
  color: #C96A1B;
  font-weight: 700;
  margin-right: 8px;
  font-variant-numeric: tabular-nums; /* 日期数字等宽，竖排方向看着齐 */
}

/* ---- v1.71：卖点标签条（原数字数据条 .hp-stat 撤下）----
   右列竖排三个胶囊标签：圆形符号（主色底白字）+ 加粗短句。
   静态内容写死在 index.html；符号用文本字符（✓/？/♥︎），不引图标库。 */
.hp-intro-stats { display: flex; flex-direction: column; gap: 10px; margin-left: auto; justify-content: center; }
.hp-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #F4F7FD;
  border-radius: 999px;
  padding: 9px 16px 9px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1B3866;
  white-space: nowrap;
}
.hp-tag__sym {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1B3866;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- ★每月推荐（并入 hero 左列，只显示当前月） ----
   12 月 tab 已按需求移除（hp-month-pills 样式一并删除）；
   .hp-month-heading：区块标题在 hero 左列里的间距收紧，紧贴「开始观看」按钮下方 */
.hp-month-heading { margin: 40px 0 16px; }
.hp-month-detail { position: relative; }
.hp-month-badge {
  display: inline-block;
  background: #F7C948;
  font-size: 13px;
  font-weight: 800;
  color: #5C3A00;
  padding: 5px 14px;
  border-radius: 999px;
}
.hp-month-title { font-size: 26px; color: #1B3866; margin: 14px 0 6px; }
.hp-month-theme { color: #888; font-size: 14px; }
.hp-month-note { color: #444; font-size: 15px; line-height: 1.9; margin: 14px 0 0; }
.hp-eps { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* ---- v1.69：每月推荐图文两栏 ----
   左列文字（主题/说明/内容卡/活动），右列可选配图；未配图时右列不渲染，
   左列 flex:1 自动占满，视觉与旧版纯文字一致。配图裁剪铺满、圆角带投影，
   不参与文字排版（flex 项而非 float）。
   v1.69 补丁（2026-11-06）：主理人定稿「下端可以不对齐，上端一定要对齐」
   → align-items: flex-start（图顶与文字列顶齐，图按自身比例显示不拉满列高；
   stretch 方案一改即弃——等高拉满显得图过长）。
   窄屏堆叠：图移到文字下方全宽。 */
.hp-month-body { display: flex; gap: 18px; align-items: flex-start; }
.hp-month-text { flex: 1; min-width: 0; }
.hp-month-img {
  flex: none;
  width: 170px;
  max-width: 36%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px #00000038;
}
.hp-month-img img {
  width: 100%;
  height: auto; /* 上对齐模式：按原图比例显示；min/max 兜住极端比例 */
  min-height: 132px;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .hp-month-body { flex-direction: column; gap: 12px; }
  .hp-month-img { width: 100%; max-width: none; }
  .hp-month-img img { min-height: 0; height: 190px; }
}
.hp-ep {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F4F7FD;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1B3866;
}
.hp-ep::before { content: "▶"; color: #E8622C; font-size: 11px; flex: none; }
a.hp-ep { text-decoration: none; cursor: pointer; }
a.hp-ep:hover { background: #E6EEFA; text-decoration: none; }
.hp-ep-text { display: block; font-size: 12px; color: #888; margin-top: 2px; }
.hp-month-act {
  margin-top: 18px;
  background: #FFFBEE;
  border-radius: 10px;
  padding: 12px 16px;
  color: #1B3866;
  font-size: 14px;
}
.hp-month-act b { font-weight: 700; }
.hp-month-act-note { color: #999; font-weight: 400; }
.hp-month-empty { text-align: center; color: #8a94a6; padding: 26px 10px; font-size: 15px; margin: 0; }

/* ---- 屏2：资源入口 ---- */
.hp-entry-head { text-align: center; color: #fff; margin-bottom: 30px; }
.hp-entry-head h2 { color: #F7C948; font-size: 38px; font-weight: 800; }
.hp-entry-head p { color: #CBD8EE; margin: 8px 0 0; font-size: 16px; }
.hp-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-loading { grid-column: 1 / -1; text-align: center; color: #9DB2D9; font-size: 15px; margin: 0; }
.hp-theme-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: transform .2s;
}
.hp-theme-card:hover { transform: translateY(-5px); text-decoration: none; }
.hp-theme-card:focus-visible { outline: 3px solid #F7C948; outline-offset: 3px; }
.hp-theme-card h3 { color: #fff; font-size: 22px; font-weight: 700; }
.hp-theme-cnt {
  display: inline-block;
  background: #ffffffCC;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 999px;
  margin: 8px 0 12px;
}
.hp-theme-emoji { font-size: 36px; }
.hp-theme-sample {
  font-size: 12px;
  color: #FFFFFFB8;
  margin-top: 8px;
  line-height: 1.6;
  padding-right: 40px;
}
.hp-theme-go {
  position: absolute; right: 14px; bottom: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #FFFFFFE6;
  display: flex; align-items: center; justify-content: center;
  color: #333; font-weight: 900;
}
/* 四组主题底色轮换（照原型 t1–t4） */
.hp-theme-card--t1 { background: linear-gradient(160deg, #2E7D46, #1E5631); }
.hp-theme-card--t2 { background: linear-gradient(160deg, #E8622C, #B0511D); }
.hp-theme-card--t3 { background: linear-gradient(160deg, #6B4FA1, #4A3573); }
.hp-theme-card--t4 { background: linear-gradient(160deg, #2F7DA6, #1F5877); }

.hp-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.hp-quick {
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  transition: transform .2s;
}
.hp-quick:hover { transform: translateY(-3px); text-decoration: none; }
.hp-quick:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hp-quick-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #FFFFFF2E;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex: none;
}
.hp-quick-text { min-width: 0; }
.hp-quick-text b { display: block; color: #fff; font-size: 20px; font-weight: 700; }
.hp-quick-text i { display: block; color: #FFFFFFCC; font-size: 13px; margin-top: 4px; font-style: normal; }
.hp-quick--all { background: linear-gradient(135deg, #F7C948, #E8A93C); }
.hp-quick--intro { background: linear-gradient(135deg, #2E6BE8, #1F4FB0); }

/* ---- 首页窄屏兜底：hero 单列堆叠，形象区缩到可用尺寸 ----
   桌面优先的项目此前没有 hp 断点；每月推荐并入 hero 后左列变高，
   窄屏不做单列会把 260px 的形象区横向挤爆。 */
@media (max-width: 900px) {
  .hp-hero { grid-template-columns: 1fr; }
  .hp-hero-art { min-height: 200px; order: -1; }
  .hp-mascot { font-size: 150px; }
  .hp-rocket { font-size: 40px; }
}

/* ---- 屏3：出品方落款（v1.72：「关于」卡片删除，仅保留落款；原 .hp-about-* / .hp-feat-* 规则一并清理） ---- */
.hp-credit {
  background: #12224AEE;
  border-radius: 18px;
  padding: 24px 30px;
  margin-top: 40px;
  color: #DCE6F7;
  font-size: 15px;
}
.hp-credit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #ffffff22;
}
.hp-credit-row:last-of-type { border-bottom: none; }
.hp-credit-row b { color: #F7C948; min-width: 96px; }
.hp-footer-note { text-align: center; color: #93A7CC; font-size: 13px; margin: 26px 0 0; }

/* ---- 响应式（照原型断点） ---- */
@media (max-width: 900px) {
  .hp-hero { grid-template-columns: 1fr; }
  .hp-hero-title { font-size: 38px; }
  .hp-theme-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-quick-row { grid-template-columns: 1fr; }
  .hp-intro { flex-direction: column; align-items: flex-start; }
  .hp-intro-stats { margin-left: 0; flex-direction: row; flex-wrap: wrap; }
  .hp-awards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hp-section { padding: 32px 0 28px; }
  .hp-hero-mascot, .hp-mascot { font-size: 120px; line-height: 200px; }
  .hp-hero-art { min-height: 200px; }
  .hp-intro-stats { gap: 8px; }
}

/* ---- 专辑页主题视图（seasons.html?theme=N）----
 * 只加容器样式：专辑卡仍复用既有 .pd-album 一套，不出现第二套卡片外观。 */
.pd-theme-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.pd-theme-head__emoji { font-size: 34px; flex: none; }
.pd-theme-head__name { font-size: 24px; color: var(--pd-primary); }
.pd-theme-head__back {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--pd-muted);
}
.pd-theme-head__back:hover { color: var(--pd-primary-dark); text-decoration: underline; }
@media (max-width: 640px) {
  .pd-theme-head__name { font-size: 20px; }
  .pd-theme-head__emoji { font-size: 28px; }
}

/* ===== 视觉打磨层（2026-11-05，纯装饰追加） ===========================
 * 约束：只追加、不修改上方任何规则；只用 transform / opacity / box-shadow /
 * filter / background / border-color 这类**不参与布局**的属性 —— 任何断点下
 * 元素的位置与尺寸像素级不变，HTML / JS 零改动。
 * 动效统一被文件末尾既有的 prefers-reduced-motion 全局规则压制。
 */
:root {
  --pd-polish-speed: .22s;
  --pd-polish-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- 1. 选区与滚动条：把"浏览器默认"换成品牌色 ---------------------- */
::selection { background: rgba(23, 69, 60, .18); }
body[data-page="home"] ::selection { background: rgba(247, 201, 72, .32); }

html { scrollbar-color: #b9c9c2 var(--pd-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pd-bg); }
::-webkit-scrollbar-thumb {
  background: #b9c9c2;
  border-radius: 999px;
  border: 2px solid var(--pd-bg);
}
::-webkit-scrollbar-thumb:hover { background: #9db4ab; }
/* 横向书架条内的滚动条更细、更隐形，不抢内容 */
.pd-classic-list::-webkit-scrollbar { height: 8px; }
.pd-classic-list::-webkit-scrollbar-thumb { border: none; background: #d4ddd8; }

/* ---- 2. 吸顶导航：磨砂玻璃 ------------------------------------------ */
/* 只换背景渲染方式（原为不透明 surface），几何尺寸不动 */
.pd-header {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(22, 33, 28, .04), 0 8px 24px -18px rgba(22, 33, 28, .25);
}
@supports not (backdrop-filter: blur(1px)) {
  /* 不支持磨砂的浏览器退回实底，绝不透出文字叠文字 */
  .pd-header { background: var(--pd-surface); }
}

/* ---- 3. 卡片：封面微缩放 + 更立体的悬浮 ----------------------------- */
.pd-card__cover img { transition: transform var(--pd-polish-speed) var(--pd-polish-ease); }
.pd-card:hover .pd-card__cover img { transform: scale(1.045); }

.pd-card:hover { border-color: #cfe0db; }

/* 内容入口卡：箭头滑出一点，暗示"可前往" */
.pd-entry__arrow { transition: transform var(--pd-polish-speed) var(--pd-polish-ease), opacity var(--pd-polish-speed) ease; }
.pd-entry:hover .pd-entry__arrow { transform: translateY(-50%) translateX(4px); opacity: .95; }

/* 专辑卡与 hp 主题卡：右下角圆钮转向，像"出发" */
.pd-album { will-change: transform; }
.hp-theme-go { transition: transform var(--pd-polish-speed) var(--pd-polish-ease); }
.hp-theme-card:hover .hp-theme-go { transform: rotate(45deg) scale(1.06); }

/* hp 集数行：整行右移 2px（transform，不动文档流） */
.hp-ep { transition: transform var(--pd-polish-speed) var(--pd-polish-ease), background var(--pd-polish-speed) ease; }
a.hp-ep:hover { transform: translateX(3px); }

/* ---- 4. 按钮：按压反馈与悬浮光晕 ------------------------------------ */
.pd-btn { transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .18s ease; }
.pd-btn:hover { box-shadow: 0 6px 16px -6px rgba(23, 69, 60, .45); }
.pd-btn:active { transform: translateY(1px); box-shadow: none; }
.hp-btn-primary { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.hp-btn-primary:hover { box-shadow: 0 12px 32px #E8622C66; filter: brightness(1.04); }
.hp-btn-primary:active { transform: translateY(0) scale(.98); }
.hp-month-badge { box-shadow: 0 2px 8px rgba(247, 201, 72, .35); }

/* ---- 5. 弹窗：入场小动画（display 切换时触发，无 JS 改动） ---------- */
@keyframes pd-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes pd-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.pd-modal:not([hidden]) .pd-modal__overlay { animation: pd-modal-fade .2s ease; }
.pd-modal:not([hidden]) .pd-modal__content { animation: pd-modal-in .26s var(--pd-polish-ease); }

/* ---- 6. 质感细节 ---------------------------------------------------- */
/* 进度条：渐变 + 前端高光，读起来像"正在推进" */
.pd-book-progress__fill {
  background: linear-gradient(90deg, var(--pd-primary), #2f6e5e);
  box-shadow: 0 0 8px rgba(23, 69, 60, .25);
}
/* 素封面占位：淡淡的斜纹，比纯灰块"像有意为之" */
.pd-card__cover--none,
.pd-card__cover--broken {
  background:
    repeating-linear-gradient(135deg, rgba(23, 69, 60, .035) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #eff4f1, #e9efea);
}
/* 素色 hero：加一层极浅的光斑，不再是死板色块 */
.pd-hero--plain {
  background:
    radial-gradient(420px 200px at 88% -20%, rgba(23, 69, 60, .07), transparent 70%),
    radial-gradient(380px 220px at 6% 120%, rgba(184, 143, 46, .06), transparent 70%),
    linear-gradient(135deg, #eef4f1 0%, #e8eee9 100%);
}

/* ---- 7. 首页 hp 层：吉祥物漂浮与星星感 ------------------------------ */
@keyframes pd-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
@keyframes pd-float-soft {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-8px) rotate(6deg); }
}
.hp-mascot { animation: pd-float 5.5s ease-in-out infinite alternate; }
.hp-rocket { animation: pd-float-soft 7s ease-in-out infinite alternate; }
.hp-flag { animation: pd-float 6.5s .8s ease-in-out infinite alternate; }

/* hp 内容白卡：悬停时轻轻抬起（原型静态卡获得一点生命感） */
.hp-card { transition: box-shadow var(--pd-polish-speed) ease, transform var(--pd-polish-speed) var(--pd-polish-ease); }
.hp-card:hover { box-shadow: 0 18px 44px #00000047; }

/* hp 快捷入口：图标随手势轻晃 */
.hp-quick-icon { transition: transform var(--pd-polish-speed) var(--pd-polish-ease); }
.hp-quick:hover .hp-quick-icon { transform: scale(1.12) rotate(-6deg); }

/* ===== 子页面深空蓝统一层（v1.62） ===================================
 * 需求：列表 / 详情 / 专辑 / 主题四类子页面的底色统一到首页同款深空蓝星空，
 * 页头页脚仍是奶油色（与首页一致）。只调颜色与背景，不改任何尺寸与布局。
 * 范围用 body[data-page=...] 圈定，奶油色页头页脚与白卡片不受影响。
 */
body[data-page="list"],
body[data-page="detail"],
body[data-page="seasons"],
body[data-page="season"] {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, #ffffffcc 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 15%, #ffffff99 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 40%, #ffffff77 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, #ffffff88 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 85%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 80%, #ffffff66 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 75%, #ffffff99 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 12%, #ffffff88 50%, transparent 51%),
    linear-gradient(180deg, #0A1A38 0%, #0B1E3F 45%, #0E2C55 100%);
  background-attachment: fixed;
  scrollbar-color: #46648f transparent;
}
body[data-page="list"]::-webkit-scrollbar-track,
body[data-page="detail"]::-webkit-scrollbar-track,
body[data-page="seasons"]::-webkit-scrollbar-track,
body[data-page="season"]::-webkit-scrollbar-track { background: transparent; }

/* 星空页选区与首页同款暖黄 */
body[data-page="list"] ::selection,
body[data-page="detail"] ::selection,
body[data-page="seasons"] ::selection,
body[data-page="season"] ::selection { background: rgba(247, 201, 72, .32); }

/* 卡片外的文字提亮（白卡片内的文字各有自己的颜色，不受影响） */
body[data-page="list"] .pd-section__title,
body[data-page="detail"] .pd-section__title,
body[data-page="seasons"] .pd-section__title,
body[data-page="season"] .pd-section__title { color: #F7C948; }

body[data-page="list"] .pd-count,
body[data-page="detail"] .pd-crumbs,
body[data-page="detail"] .pd-crumbs a,
body[data-page="detail"] .pd-pager__info,
body[data-page="list"] .pd-pager__info,
body[data-page="seasons"] .pd-seasons__hint,
body[data-page="season"] .pd-season__meta,
body[data-page="season"] .pd-season__empty { color: #9FB3D9; }

body[data-page="seasons"] .pd-season__head,
body[data-page="season"] .pd-season__head { border-bottom-color: rgba(255, 255, 255, .14); }
body[data-page="seasons"] .pd-season__title,
body[data-page="season"] .pd-season__title { color: #F7C948; }

/* 详情/主题页顶部的素色横幅：奶油渐变 → 深色玻璃横幅 */
body[data-page="detail"] .pd-hero--plain,
body[data-page="seasons"] .pd-hero--plain,
body[data-page="season"] .pd-hero--plain,
body[data-page="list"] .pd-hero--plain {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body[data-page="detail"] .pd-hero__title,
body[data-page="seasons"] .pd-hero__title,
body[data-page="season"] .pd-hero__title,
body[data-page="list"] .pd-hero__title { color: #F7C948; }
body[data-page="season"] .pd-theme-head__name { color: #F7C948; }
body[data-page="season"] .pd-theme-head__back { color: #9FB3D9; }

/* CTA 统一成首页的活力橙（所有页面一致，含奶油页头里的登录按钮）。
 * :not(--ghost) 排除次要按钮 —— ghost 自带的白底描边样式写在上方，
 * 若不排除会被本段（同特异性、更靠后）覆盖成橙底。 */
.pd-btn:not(.pd-btn--ghost) {
  background: linear-gradient(135deg, #E8622C, #FF8A50);
  border-color: transparent;
}
.pd-btn:not(.pd-btn--ghost):hover {
  background: linear-gradient(135deg, #D5531F, #F97A41);
  border-color: transparent;
}
.pd-pager button[aria-current="page"] {
  background: linear-gradient(135deg, #E8622C, #FF8A50);
  border-color: transparent;
}
.pd-pager button:hover:not(:disabled) { border-color: #E8622C; color: #E8622C; }