/* ==========================================================================
   六爻学习工作台 · v8 —— 古风轻奢视觉体系
   墨色为骨、宣纸为底、暗金为魂、朱砂为点睛
   全部颜色经由 :root Design Token 引用，选择器内不散落硬编码色值
   v8 变更：
   - :root 未新增 Token（v8 组件全部复用既有变量）
   - 描金标题选择器组新增 .bk8-import-title
   - 新增第 21 节：搜索模块（sr- 前缀：入口/输入/历史/结果列表）
   - 新增第 22 节：v8 模块（bk8- 前缀：更新提示条/导入面板/离线状态行）
   - 其余 v1–v6 Token 与样式全部保留
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* —— 底色体系 —— */
  --bg-canvas: #f7f4eb;                                   /* 宣纸底，全局背景 */
  --bg-surface: #eae6da;                                  /* 微云淡灰，卡片/面板底 */
  --bg-elevated: #fbf8f0;                                 /* 悬浮层/弹窗/导航底 */
  --bg-elevated-translucent: rgba(251, 248, 240, 0.86);   /* 导航毛玻璃底 */
  --paper-tint-gold: rgba(180, 136, 76, 0.05);            /* 纸面晕染 · 淡金 */
  --paper-tint-cinnabar: rgba(200, 60, 35, 0.04);         /* 纸面晕染 · 淡朱 */
  --paper-fiber: rgba(36, 33, 29, 0.02);                  /* 宣纸纤维噪点（横向） */
  --paper-fiber-soft: rgba(36, 33, 29, 0.014);            /* 宣纸纤维噪点（纵向） */

  /* —— 墨色文字体系 —— */
  --text-primary: #1a1c1e;                                /* 松烟浓墨，主标题/一级文字 */
  --text-secondary: #5c5650;                              /* 次级文字、说明文案 */
  --text-muted: #8a8278;                                  /* 占位、时间戳、弱提示 */
  --on-seal: #fbf8f0;                                     /* 朱砂底上的米白文字 */
  --on-cinnabar: var(--bg-elevated);                      /* v1 别名兼容 */

  /* —— 描金体系 —— */
  --gold: #b4884c;                                        /* 棕金/暗金，主强调色 */
  --gold-light: #d4b16a;                                  /* 泥金勾线，细边框/图标描边 */
  --gold-deep: #8c6a3f;                                   /* 描金渐变深端 */
  --ink-deep: #24211d;                                    /* 深墨（阴影基色） */
  --gold-grad: linear-gradient(135deg,
      #8c6a3f 0%, #d4b16a 45%, #b4884c 100%);             /* 描金标题渐变 */
  --gold-line: rgba(180, 136, 76, 0.55);                  /* 金线（较实，边框/描边） */
  --border-hairline: rgba(180, 136, 76, 0.35);            /* 金线极细分隔 */
  --glow-low: rgba(180, 136, 76, 0.08);                   /* 呼吸光圈 · 下限 */
  --glow-high: rgba(180, 136, 76, 0.20);                  /* 呼吸光圈 · 上限 */
  --glow-none: rgba(180, 136, 76, 0);                     /* 呼吸光圈淡出终点 */
  --gold-flash: rgba(180, 136, 76, 0.12);                 /* 段落高亮/续读提示背景（金 12%） */
  --selection: rgba(180, 136, 76, 0.22);                  /* 选中高亮 */
  --hl-mark-bg: rgba(180, 136, 76, 0.18);                 /* v10 划线高亮底（金 18%） */
  --hl-flash-mid: rgba(180, 136, 76, 0.35);               /* v10 划线定位闪烁峰值（金 35%） */

  /* —— 朱砂（仅核心 CTA / 打卡激活态 / Badge）—— */
  --seal: #c83c23;                                        /* 朱砂印红 */
  --seal-deep: #a53120;                                   /* 朱砂加深端 */
  --cinnabar: var(--seal);                                /* v1 别名兼容 */
  --cinnabar-deep: var(--seal-deep);                      /* v1 别名兼容 */
  --seal-soft: rgba(200, 60, 35, 0.9);                    /* 热力条已打卡圆点（朱砂 90%） */

  /* —— 弱化灰 —— */
  --dot-future: rgba(138, 130, 120, 0.25);                /* 未来日期空心圆描边（弱灰 25%） */

  /* —— 阴影（轻，禁重黑大阴影）—— */
  --shadow-soft: 0 4px 20px rgba(36, 33, 29, 0.06);
  --shadow-lift: 0 6px 24px rgba(36, 33, 29, 0.10);       /* 卡片抬起阴影 */
  --shadow-frame: 0 0 32px rgba(36, 33, 29, 0.14);

  /* —— v1 布局别名兼容 —— */
  --bg-base: var(--bg-canvas);                             /* v1 宣纸底别名 */
  --bg-backdrop: var(--bg-surface);                        /* v1 桌面外围底别名 */

  /* —— 字体 —— */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;

  /* —— 动效 —— */
  --ease-page: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);              /* 规范第二缓动 */
  --dur-page: 350ms;
  --dur-fast: 120ms;
  --dur-card: 420ms;
  --stagger-step: 70ms;

  /* —— 布局 —— */
  --shell-max: 480px;
  --radius-card: 6px;                                      /* 微圆角：竹简裁纸切边 */
  --radius-btn: 4px;
  --nav-h: 56px;
}

/* --------------------------------------------------------------------------
   2. Reset 与基础
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-backdrop);
  min-height: 100dvh;
  overflow-x: hidden;                                     /* 禁止横向滚动 */
  -webkit-font-smoothing: antialiased;
  animation: shell-in 320ms var(--ease-page) both;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

svg { display: block; }

::selection { background: var(--selection); }

/* 通用按压反馈：所有可点击元素 :active（scale 0.97 + opacity 0.85，120ms） */
.pressable {
  transition: transform var(--dur-fast) var(--ease-page),
              opacity var(--dur-fast) var(--ease-page);
}
.pressable:active { transform: scale(0.97); opacity: 0.85; }

/* --------------------------------------------------------------------------
   3. 应用骨架：移动优先，390px 基准，最大 480px，桌面居中
   -------------------------------------------------------------------------- */
.app-shell {
  position: relative;
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 宣纸质感：两角极淡金 / 朱晕染 */
  background:
    radial-gradient(ellipse 90% 55% at 18% 0%, var(--paper-tint-gold), transparent 60%),
    radial-gradient(ellipse 80% 45% at 88% 100%, var(--paper-tint-cinnabar), transparent 55%),
    var(--bg-canvas);
}

/* 宣纸纤维噪点（repeating-linear-gradient 模拟，透明度 ≤3%） */
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, var(--paper-fiber) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--paper-fiber-soft) 0 1px, transparent 1px 4px);
}

main {
  position: relative;
  z-index: 1;                                             /* 内容置于噪点之上 */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}

.page {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Tab 切换：新页面 opacity + translateY 淡入，350ms；无退出动画 */
.page.is-active {
  display: flex;
  animation: page-in var(--dur-page) var(--ease-page) both;
}

/* --------------------------------------------------------------------------
   4. 描金标题（共用）：渐变金填充文字
   -------------------------------------------------------------------------- */
.brand-title,
.bk-header-title,
.bk-book-title,
.bk-toc-title,
.bk-reader-title,
.qz-title,
.st-title,
.rd-heading,
.bk8-import-title {
  font-family: var(--font-serif);
  font-weight: 600;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   5. 首页 · 品牌区
   -------------------------------------------------------------------------- */
.brand { padding: 44px 24px 10px; text-align: center; }

.brand-title {
  font-size: 30px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
}

.brand-sub {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6. 卡片基类
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   7. 首页 · 三张核心数据卡片（纵向堆叠 + stagger 入场）
   -------------------------------------------------------------------------- */
.stat-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 0;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px 16px;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* 印章圆点（v1 结构保留，首页现由 ck-seal 接管） */
.seal-dot { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.seal-dot.is-open {
  border: 1.5px solid var(--gold-line);
  background: transparent;
  animation: seal-breath 4s ease-in-out infinite;
}
.seal-dot.is-sealed {
  background: var(--seal);
  border: 1.5px solid var(--gold-line);
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-num.num-gold { color: var(--gold); }

.stat-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. 首页 · 主操作按钮
   -------------------------------------------------------------------------- */
.home-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 0;
}

/* 印章按钮：朱砂底 + 金线边框（内嵌一圈细金线，仿印章边栏；v9.1 字距/高度与卷轴按钮统一） */
.btn-seal {
  position: relative;
  height: 48px;
  background: var(--seal);
  color: var(--on-seal);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  box-shadow: var(--shadow-soft);
}
.btn-seal::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  opacity: 0.65;
  pointer-events: none;
}

/* 卷轴卡片按钮：宣纸抬升底 + 四向金线（v9.1 收敛字距与高度，增强描边辨识度） */
.btn-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   9. 空状态（通用组件：刷题 / 知识库 / 统计模块复用）
   -------------------------------------------------------------------------- */
.empty-state {
  margin: auto;
  padding: 48px 32px;
  text-align: center;
}

.empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  color: var(--gold);
}

.empty-title {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--text-primary);
}

.empty-sub {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   10. 我的 · 设置行（窗棂渐隐金线分隔）
   -------------------------------------------------------------------------- */
.me-group { margin: 24px 20px 0; overflow: hidden; }

.me-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  text-align: left;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.me-row + .me-row {
  border-top: 1px solid;
  border-image: linear-gradient(90deg,
      transparent 0%,
      var(--border-hairline) 22%,
      var(--border-hairline) 78%,
      transparent 100%) 1;
}

.me-arrow {
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   11. 底部导航：毛玻璃 + 顶部发丝金线 + 朱砂小圆点选中标记
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: var(--shell-max);
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-elevated-translucent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-hairline);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.tab-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--seal);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms var(--ease-page), transform 200ms var(--ease-page);
}

.tab.is-active { color: var(--gold); }
.tab.is-active .tab-dot { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   12. 轻提示条（宣纸底 + 金线边框 + 深墨文字，2 秒自动淡出）
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  transform: translate(-50%, 8px);
  max-width: calc(var(--shell-max) - 48px);
  padding: 10px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-page), transform 240ms var(--ease-page);
  z-index: 60;
  white-space: nowrap;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   13. 动效 Keyframes（v1/v2/v3）
   -------------------------------------------------------------------------- */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes seal-breath {
  0%, 100% { box-shadow: 0 0 0 5px var(--glow-low); }
  50%      { box-shadow: 0 0 0 10px var(--glow-high); }
}

@keyframes shell-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ck-seal-breath {
  0%, 100% { box-shadow: 0 0 0 5px var(--glow-low); }
  50%      { box-shadow: 0 0 0 10px var(--glow-high); }
}

@keyframes ck-glow-out {
  from { box-shadow: 0 0 0 5px var(--glow-low); }
  to   { box-shadow: 0 0 0 5px var(--glow-none); }
}

@keyframes ck-stamp {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1.0); }
}

@keyframes ck-num-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ck-dot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   14. 知识库（bk- 前缀）· 三级浏览
   -------------------------------------------------------------------------- */
.bk-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.bk-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  animation: page-in var(--dur-page) var(--ease-page) both;
}

.bk-header { padding: 38px 20px 6px; text-align: center; }

.bk-header-title {
  font-size: 22px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.bk-header-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--text-muted);
}

.bk-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 10px;
}

/* 卷轴卡片：上下 2px 金色渐变细线（天杆/地杆）+ 左侧书脊竖线 */
.bk-book-card {
  position: relative;
  display: block;
  padding: 20px 18px 16px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
  transition: transform 180ms var(--ease-page),
              border-color 180ms var(--ease-page),
              box-shadow 180ms var(--ease-page);
}

.bk-book-card::before,
.bk-book-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold-light) 16%,
      var(--gold) 50%,
      var(--gold-light) 84%,
      transparent 100%);
  pointer-events: none;
}
.bk-book-card::before { top: 0; }
.bk-book-card::after { bottom: 0; }

.bk-book-spine {
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
      var(--gold-light), var(--gold), var(--gold-light));
  opacity: 0.75;
  pointer-events: none;
}

.bk-book-body { display: flex; flex-direction: column; }

.bk-book-title {
  font-size: 23px;
  letter-spacing: 0.1em;
}

.bk-book-meta {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.bk-book-summary {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bk-book-count {
  margin-top: 12px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

@media (hover: hover) {
  .bk-book-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold-line);
    box-shadow: var(--shadow-lift);
  }
}
.bk-book-card:active {
  transform: translateY(-2px) scale(0.97);
  opacity: 0.85;
  border-color: var(--gold-line);
}

/* 返回栏（热区 ≥44px） */
.bk-topbar {
  display: flex;
  align-items: center;
  padding: 10px 12px 0 14px;
}

.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: var(--radius-btn);
}

.bk-back-arrow {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}

.bk-book-head { padding: 8px 22px 4px; }

.bk-toc-title {
  font-size: 27px;
  letter-spacing: 0.1em;
}

.bk-toc-meta {
  margin-top: 9px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.bk-toc-summary {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.bk-volumes { padding: 16px 20px 10px; }

.bk-volume { margin-top: 10px; }
.bk-volume:first-child { margin-top: 0; }

.bk-volume-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.bk-volume-rule {
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg,
      transparent,
      var(--border-hairline) 18%,
      var(--border-hairline) 82%,
      transparent);
}

.bk-section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 2px;
  animation: card-in 320ms var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.bk-section-item + .bk-section-item {
  border-top: 1px solid var(--border-hairline);
}

.bk-section-no {
  min-width: 30px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.bk-section-title {
  flex: 1 1 auto;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-section-arrow {
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

/* 目录阅读状态标记（无 SVG 库，纯 CSS） */
.bk-read-done {                        /* 已读完：朱砂小圆点 */
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--seal);
}

.bk-read-progress {                    /* 进行中：金色半环（边框实现） */
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--border-hairline);
  border-top-color: var(--gold);
  border-right-color: var(--gold);
}

/* 旧版阅读页样式（v2 保留，现由 rd- 接管） */
.bk-reader-body {
  padding: 8px 24px 10px;
  animation: page-in 400ms var(--ease-page) both;
}

.bk-crumb {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-reader-title {
  margin-top: 10px;
  font-size: 25px;
  letter-spacing: 0.08em;
}

.bk-reader-text {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-primary);
}

.bk-reader-text p {
  text-indent: 2em;
  margin-bottom: 1em;
}
.bk-reader-text p:last-child { margin-bottom: 0; }

.bk-reader-footer { padding: 28px 20px 8px; }

.bk-notfound {
  margin: auto;
  padding: 56px 24px;
  text-align: center;
}

.bk-notfound-title {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--text-primary);
}

.bk-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 30px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* --------------------------------------------------------------------------
   15. 每日打卡（ck- 前缀）
   -------------------------------------------------------------------------- */
.ck-storage-banner {
  position: relative;
  z-index: 5;
  padding: 10px 20px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--seal);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
}

.ck-checkin-card { cursor: pointer; }

.ck-checkin-card .stat-label {
  color: var(--text-secondary);
  transition: color 200ms var(--ease-page);
}
.ck-checkin-card.is-done .stat-label { color: var(--seal); }

.ck-seal {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 2px solid var(--seal);
  background: transparent;
  transition: background-color 200ms var(--ease-page),
              border-color 200ms var(--ease-page);
}

.ck-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ck-seal.is-open::after { animation: ck-seal-breath 4s ease-in-out infinite; }
.ck-seal.is-sealing::after { animation: ck-glow-out 240ms var(--ease-page) forwards; }

.ck-seal.is-sealed {
  background: var(--seal);
  border-color: var(--gold-line);
}

.ck-seal-mark {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1;
  color: var(--on-seal);
  opacity: 0;
  transition: opacity 200ms var(--ease-page);
}
.ck-seal.is-sealed .ck-seal-mark { opacity: 1; }

.ck-seal.is-stamping { animation: ck-stamp 400ms var(--ease-out); }

.ck-streak-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.ck-streak-unit {
  font-size: 13px;
  color: var(--text-muted);
}

.stat-num.ck-num-enter { animation: ck-num-enter 220ms var(--ease-page); }

.ck-heatmap {
  margin: 14px 20px 0;
  padding: 16px 18px 14px;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
  animation-delay: calc(var(--stagger-step) * 3);
}

.ck-heatmap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ck-heatmap-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.ck-heatmap-count {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ck-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-top: 14px;
  justify-items: center;
}

.ck-weekday {
  font-size: 10px;
  line-height: 26px;
  height: 26px;
  color: var(--text-muted);
  text-align: center;
}

.ck-day-cell { width: 26px; height: 26px; }
.ck-day-cell.is-blank { visibility: hidden; }

.ck-day-dot {
  border-radius: 50%;
  cursor: pointer;
  animation: ck-dot-in 220ms var(--ease-page) backwards;
}

.ck-day-dot.is-checked {
  background: var(--seal-soft);
  border: 1px solid var(--gold-line);
}

.ck-day-dot.is-past {
  background: transparent;
  border: 1px solid var(--border-hairline);
}

.ck-day-dot.is-today {
  position: relative;
  background: transparent;
  border: 2px solid var(--gold);
}
.ck-day-dot.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--seal);
  transform: translate(-50%, -50%);
}

.ck-day-dot.is-future {
  background: transparent;
  border: 1px solid var(--dot-future);
  pointer-events: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   16. 题库模块（qz- 前缀）
   -------------------------------------------------------------------------- */
.qz-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.qz-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  animation: page-in var(--dur-page) var(--ease-page) both;
}

.qz-header { padding: 38px 20px 6px; text-align: center; }

.qz-title {
  font-size: 22px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.qz-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--text-muted);
}

/* —— 16.1 刷题首页三卡片 —— */
.qz-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 10px;
}

.qz-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px 16px;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
}

.qz-stat-num {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.qz-stat-num.num-gold { color: var(--gold); }
.qz-stat-num.num-seal { color: var(--seal); }

.qz-stat-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--text-secondary);   /* v9.1：muted→secondary 提升卡片上对比度 */
}

.qz-action {
  /* v9.1：flex 居中（此前 display:block 在源序上覆盖 .btn-scroll/.btn-seal 的 flex，
     导致按钮文字偏左偏上，即真机截图反馈的错位） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

.qz-zero {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* —— 16.2 答题会话 —— */
.qz-session { padding: 26px 22px 10px; }

.qz-progress-text {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qz-progress-track {
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--border-hairline);
  overflow: hidden;
}

.qz-progress-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 300ms var(--ease-out);
}

.qz-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.qz-topic-tag {
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  background: var(--paper-tint-gold);
}

.qz-q-text {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--text-primary);
}

.qz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.qz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  transition: border-color 200ms var(--ease-page),
              background-color 200ms var(--ease-page),
              opacity 200ms var(--ease-page);
}

.qz-option:disabled { cursor: default; }

.qz-opt-key {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold);
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
}

.qz-opt-text { flex: 1 1 auto; }

.qz-option.is-right {
  border-color: var(--gold-line);
  background: var(--paper-tint-gold);
}
.qz-option.is-wrong {
  border-color: var(--seal);
  background: var(--paper-tint-cinnabar);
}
.qz-option.is-dim { opacity: 0.45; }

/* 判定与解析 */
.qz-feedback {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  animation: card-in 300ms var(--ease-page) both;
}

.qz-feedback-line {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.qz-feedback-line.is-right { color: var(--gold); }
.qz-feedback-line.is-wrong { color: var(--seal); }

.qz-explain {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  text-indent: 2em;
}

/* 出处行（金色链接 / 未收录置灰） */
.qz-source {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 1px;
}
.qz-source.is-disabled {
  color: var(--text-muted);
  opacity: 0.7;
  cursor: default;
  border-bottom-color: transparent;
}

.qz-next {
  display: block;
  width: 100%;
  margin-top: 14px;
}

/* —— 16.3 结果页 —— */
.qz-result {
  padding: 64px 24px 24px;
  text-align: center;
}

.qz-result-kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--text-muted);
}

.qz-result-hero {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
}

.qz-result-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.qz-result-btn {
  margin-top: 28px;
  width: 100%;
}

/* —— 16.4 错题本 —— */
.qz-wrong-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 22px 2px;
}

.qz-wrong-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.qz-wrong-note {
  font-size: 12px;
  color: var(--seal);
}

.qz-wrong-retry {
  display: block;
  margin: 14px 20px 0;
}

.qz-wrong-list {
  margin-top: 14px;
  padding: 0 20px 10px;
}

.qz-wrong-item {
  padding: 12px 2px;
  animation: card-in 320ms var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.qz-wrong-item + .qz-wrong-item {
  border-top: 1px solid;
  border-image: linear-gradient(90deg,
      transparent 0%,
      var(--border-hairline) 22%,
      var(--border-hairline) 78%,
      transparent 100%) 1;
}

.qz-wrong-q {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.qz-wrong-meta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   17. 统计模块（st- 前缀）
   -------------------------------------------------------------------------- */
.st-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.st-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  animation: page-in var(--dur-page) var(--ease-page) both;
  padding-bottom: 24px;                     /* 底部留白，避免紧贴导航 */
}

/* —— 17.1 顶部返回栏 + 标题 —— */
.st-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0 14px;
}

.st-title {
  font-size: 20px;
  letter-spacing: 0.1em;
}

/* —— 17.2 四张核心卡片（2×2 卷轴卡）—— */
.st-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 20px 0;
}

.st-stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 14px 10px;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
}

.st-stat-card::before,
.st-stat-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold-light) 16%,
      var(--gold) 50%,
      var(--gold-light) 84%,
      transparent 100%);
  pointer-events: none;
}
.st-stat-card::before { top: 0; }
.st-stat-card::after { bottom: 0; }

.st-stat-num {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.st-stat-num.c-gold { color: var(--gold); }
.st-stat-num.c-ink { color: var(--text-primary); }
.st-stat-num.c-seal { color: var(--seal); }

.st-stat-empty {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-muted);
}

.st-stat-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--text-muted);
}

/* —— 17.3 统计模块卡（卷轴卡）—— */
.st-module {
  position: relative;
  overflow: hidden;
  margin: 16px 20px 0;
  padding: 16px 18px 12px;
  animation: card-in var(--dur-card) var(--ease-page) backwards;
}

.st-module::before,
.st-module::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold-light) 16%,
      var(--gold) 50%,
      var(--gold-light) 84%,
      transparent 100%);
  pointer-events: none;
}
.st-module::before { top: 0; }
.st-module::after { bottom: 0; }

.st-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.st-module-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.st-module-note {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.st-module-note.is-seal { color: var(--seal); }

.st-module-empty { padding: 32px 16px; }

/* —— 17.4 近 30 天热力 —— */
.st-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-top: 14px;
  justify-items: center;
}

.st-weekday {
  font-size: 10px;
  line-height: 26px;
  height: 26px;
  color: var(--text-muted);
  text-align: center;
}

.st-day-cell { width: 26px; height: 26px; }
.st-day-cell.is-blank { visibility: hidden; }

.st-day-dot {
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-hairline);      /* 未打卡：金边空心 */
  animation: ck-dot-in 220ms var(--ease-page) backwards;
}

.st-day-dot.is-checked {
  background: var(--seal-soft);                  /* 已打卡：朱砂 90% + 金线描边 */
  border-color: var(--gold-line);
}

/* 今天：圆点下方 2px 朱砂短横线 */
.st-day-dot.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--seal);
}

/* —— 17.5 主题正确率 —— */
.st-topic-list { margin-top: 6px; }

.st-topic-row { padding: 11px 0 13px; }

.st-topic-row + .st-topic-row {
  border-top: 1px solid;
  border-image: linear-gradient(90deg,
      transparent 0%,
      var(--border-hairline) 22%,
      var(--border-hairline) 78%,
      transparent 100%) 1;
}

.st-topic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.st-topic-name {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-topic-count {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 进度条：轨道发丝金线，填充描金；<50% 时朱砂（透明度 0.7 用 opacity 实现） */
.st-bar-track {
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--border-hairline);
  overflow: hidden;
}

.st-bar-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 600ms var(--ease-out);
}
.st-bar-fill.is-weak {
  background: var(--seal);
  opacity: 0.7;
}

/* —— 17.6 错题分布 —— */
.st-mistake-row { padding: 11px 0 13px; }

.st-mistake-row + .st-mistake-row {
  border-top: 1px solid;
  border-image: linear-gradient(90deg,
      transparent 0%,
      var(--border-hairline) 22%,
      var(--border-hairline) 78%,
      transparent 100%) 1;
}

.st-mistake-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.st-mistake-name {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-mistake-count {
  flex: none;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--seal);
}

/* 错题条形：高度 3px，朱砂 0.6 透明度（opacity 实现），宽度按比例 */
.st-mistake-bar {
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--border-hairline);
  overflow: hidden;
}

.st-mistake-fill {
  height: 100%;
  width: 0;
  background: var(--seal);
  opacity: 0.6;
  transition: width 600ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   18. 阅读器（rd- 前缀）
   -------------------------------------------------------------------------- */

/* —— 18.1 顶部阅读栏 + 阅读进度条（sticky 于内容区顶部）—— */
.rd-topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
}

.rd-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
}

.rd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-btn);
}

.rd-back-arrow {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.rd-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Aa" 字号按钮：金色描边方形，热区 44px */
.rd-aa {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* 阅读进度条：高 2px，实时宽度（rAF 更新，无过渡） */
.rd-progress-track {
  height: 2px;
  background: var(--border-hairline);
}

.rd-progress-bar {
  height: 100%;
  width: 0;
  background: var(--gold);
}

/* —— 18.2 面包屑与占位提示条 —— */
.rd-crumb {
  padding: 12px 24px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-placeholder-banner {
  margin: 12px 20px 0;
  padding: 8px 14px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-btn);
}

/* —— 18.3 正文区 —— */
.rd-body {
  padding: 12px 24px 6px;
  animation: page-in 400ms var(--ease-page) both;   /* 淡入 + 上移 8px */
}

.rd-heading {
  font-size: 24px;
  letter-spacing: 0.08em;
}

/* 字号/行距经 CSS 自定义属性下发，切换立即生效（无过渡，避免文字跳动） */
.rd-reader {
  --rd-body-size: 17px;                                   /* 默认 md */
  --rd-line-height: 1.9;                                  /* 默认 normal */
  margin-top: 14px;
  font-family: var(--font-serif);
  color: var(--text-primary);
}

.rd-paragraph {
  font-size: var(--rd-body-size);
  line-height: var(--rd-line-height);
  text-indent: 2em;
  margin-bottom: 1em;
  padding: 2px 4px;                       /* 让高亮背景上下留一丝呼吸 */
}
.rd-paragraph:last-child { margin-bottom: 0; }

/* heading 段落：描金小标题，字号 +2px，字重 600 */
.rd-paragraph.is-heading {
  font-size: calc(var(--rd-body-size) + 2px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-indent: 0;
  margin-top: 0.4em;
  margin-bottom: 0.8em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* note 段落：小字灰色（-2px），左侧金线竖线 + 1em 内边距 */
.rd-paragraph.is-note {
  font-size: calc(var(--rd-body-size) - 2px);
  color: var(--text-muted);
  text-indent: 0;
  padding-left: 1em;
  padding-top: 2px;
  padding-bottom: 2px;
  border-left: 1px solid var(--border-hairline);
  margin-bottom: 0.9em;
}

/* —— 18.4 段落高亮（锚点 1200ms / 续读 600ms，只做背景淡出）—— */
.rd-paragraph.rd-flash { animation: rd-flash-restore 600ms var(--ease-page) 1; }
.rd-paragraph.rd-anchor-flash { animation: rd-flash-anchor 1200ms var(--ease-page) 1; }
.rd-paragraph.rd-static-flash { background: var(--gold-flash); }

@keyframes rd-flash-restore {
  from { background: var(--gold-flash); }
  to   { background: transparent; }
}

@keyframes rd-flash-anchor {
  from { background: var(--gold-flash); }
  to   { background: transparent; }
}

/* —— 18.5 上一章 / 下一章（金色描边卷轴风格，不抢占主视觉）—— */
.rd-nav {
  display: flex;
  gap: 10px;
  padding: 26px 20px 0;
}

.rd-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
}

.rd-nav-btn.is-empty { visibility: hidden; }   /* 首/末章占位，保持布局对称 */

.rd-nav-tag {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.rd-nav-title {
  max-width: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 18.6 字号/行距设置面板（底部滑出，无模态遮罩）—— */
.rd-prefs-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  width: calc(100% - 32px);
  max-width: calc(var(--shell-max) - 32px);
  z-index: 55;                               /* 高于导航（50），低于轻提示（60） */
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-top: 2px solid var(--gold-light);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-lift);
  transition: transform 300ms var(--ease-out),
              opacity 300ms var(--ease-out);
}

.rd-prefs-panel.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.rd-prefs-inner { padding: 14px 16px 14px; }

.rd-prefs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.rd-prefs-label {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.rd-prefs-options {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
}

.rd-pref-opt {
  flex: 1 1 0;
  min-height: 44px;                          /* 热区 ≥44px */
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
}

.rd-pref-opt.is-selected {
  border-color: var(--gold-line);
  color: var(--gold);
  background: var(--paper-tint-gold);
}

.rd-prefs-done {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 44px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  background: transparent;
}

/* --------------------------------------------------------------------------
   19. 无障碍：prefers-reduced-motion 下关闭所有动效
       （面板直接显隐、锚点高亮改静态色块、stagger 同时显示）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   20. 桌面端适配：内容居中成"手机框"
   -------------------------------------------------------------------------- */
@media (min-width: 520px) {
  .app-shell {
    box-shadow: var(--shadow-frame);
    border-inline: 1px solid var(--border-hairline);
  }
}

/* --------------------------------------------------------------------------
   21. 搜索模块（sr- 前缀）· v8 新增
   -------------------------------------------------------------------------- */
.sr-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 20px 0;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  color: var(--text-secondary);
  font-size: 14px;
}

.sr-entry-text {
  flex: 1 1 auto;
  letter-spacing: 0.04em;
}

.sr-box { padding: 14px 20px 10px; }

.sr-input-wrap {
  display: flex;
  gap: 10px;
}

.sr-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sr-input:focus {
  border-color: var(--gold-line);
}

.sr-input::placeholder {
  color: var(--text-muted);
}

.sr-submit {
  flex: none;
  width: 76px;
  height: 44px;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 搜索历史 chips */
.sr-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
}

.sr-chip-clear {
  color: var(--text-muted);
  border-style: dashed;
}

/* 搜索结果 */
.sr-results { margin-top: 14px; }

.sr-hint {
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.sr-list {
  display: flex;
  flex-direction: column;
}

.sr-item {
  display: block;
  padding: 12px 2px;
  animation: card-in 320ms var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.sr-item + .sr-item {
  border-top: 1px solid;
  border-image: linear-gradient(90deg,
      transparent 0%,
      var(--border-hairline) 22%,
      var(--border-hairline) 78%,
      transparent 100%) 1;
}

.sr-item-title {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.sr-item-text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   22. v8 模块（bk8- 前缀）：更新提示条 / 导入面板 / 离线状态行
   -------------------------------------------------------------------------- */

/* —— 22.1 版本更新提示条（页面顶部，滑入 300ms，关闭淡出 200ms）—— */
.bk8-update-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 20;
  padding: 7px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--gold-light);
  animation: bk8-bar-in 300ms var(--ease-out) both;
}

/* display:flex 会覆盖 UA 的 [hidden]，必须显式声明 */
.bk8-update-bar[hidden] { display: none; }

.bk8-update-bar.is-leaving {
  animation: bk8-bar-out 200ms var(--ease-page) both;
}

.bk8-update-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
}

.bk8-update-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.bk8-btn-refresh {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--seal);
  border-radius: var(--radius-btn);
  color: var(--seal);
  font-size: 13px;
  letter-spacing: 0.1em;
  background: transparent;
}

.bk8-btn-later {
  flex: none;
  height: 32px;
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 13px;
  background: none;
}

@keyframes bk8-bar-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes bk8-bar-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* —— 22.2 导入备份确认面板（底部滑出 300ms，最大 60vh）—— */
.bk8-import-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  width: calc(100% - 32px);
  max-width: calc(var(--shell-max) - 32px);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 55;                               /* 高于导航（50），低于轻提示（60） */
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-top: 2px solid var(--gold-light);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-lift);
  transition: transform 300ms var(--ease-out),
              opacity 300ms var(--ease-out);
}

.bk8-import-panel.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.bk8-import-inner { padding: 16px 16px 14px; }

.bk8-import-title {
  font-size: 16px;
  letter-spacing: 0.1em;
}

.bk8-import-desc {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.bk8-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;                          /* 热区 ≥44px */
  margin-top: 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  background: transparent;
}

.bk8-import-cancel {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 13px;
  background: none;
}

/* —— 22.3 离线状态行（"我的"页顶部）—— */
.bk8-status-line {
  margin: 20px 20px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bk8-status-line.is-offline {
  color: var(--gold);
}

/* ==========================================================================
   23. 卦例存档（v9，cs- 前缀）
   ========================================================================== */

/* —— 23.1 列表页 —— */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cs-add-btn {
  flex: none;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.cs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px 24px;
}

.cs-case-card {
  display: block;
  padding: 14px 16px 12px;
  text-decoration: none;
  color: inherit;
  animation: card-in 320ms var(--ease-page) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);   /* 卦例列表 stagger 60ms */
}

.cs-case-q {
  font-size: 15px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-case-hex {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.cs-case-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.cs-empty-hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* —— 23.2 详情页 —— */
.cs-detail-title {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.5;
}

.cs-hex-card {
  margin-top: 16px;
  padding: 14px 16px;
}

.cs-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
}

.cs-info-row + .cs-info-row {
  border-top: 1px dashed var(--gold-line);
}

.cs-info-label {
  flex: none;
  width: 3em;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.cs-info-value {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-all;
}

.cs-missing {
  margin: 40px 4px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* —— 23.3 新增卦例面板（底部滑出，复用 Aa 面板骨架） —— */
.cs-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  width: calc(100% - 32px);
  max-width: calc(var(--shell-max) - 32px);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 55;
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-top: 2px solid var(--gold-light);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-lift);
  transition: transform 300ms var(--ease-out),
              opacity 300ms var(--ease-out);
}

.cs-panel.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.cs-panel[aria-hidden='true'] {
  /* 关闭态仅依赖 transform/opacity 过渡，保持可见性以便动画播放 */
  visibility: visible;
}

.cs-panel-inner { padding: 16px 16px 14px; }

.cs-panel-title { letter-spacing: 0.1em; }

.cs-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;                               /* v9.1：防 fieldset/子元素 min-content 撑破面板 */
  margin-top: 14px;
  padding: 0;
  border: none;
}

.cs-field:first-of-type { margin-top: 10px; }

.cs-lines-field {
  margin: 14px 0 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.cs-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out);
}

.cs-input:focus {
  outline: none;
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-light);
}

.cs-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cs-line-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  font-size: 13px;
  color: var(--text-secondary);
  transition: border-color 150ms var(--ease-out);
}

.cs-line-opt input[type='checkbox'] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gold);
}

.cs-line-opt:active {
  opacity: 0.85;
}

.cs-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.cs-save-btn {
  flex: 1;
  min-height: 44px;
}

.cs-cancel {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  background: none;
}

.cs-import-json {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-size: 13px;
  background: transparent;
}

/* —— 23.4 删除确认条（底部轻提示条，3 秒自动消失） —— */
.cs-confirm-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: calc(var(--shell-max) - 32px);
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}

.cs-confirm-bar[hidden] { display: none; }

.cs-confirm-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.cs-confirm-btn {
  flex: none;
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--gold);
  background: none;
  letter-spacing: 0.06em;
}

.cs-confirm-danger { color: var(--seal); }

/* ==========================================================================
   24. 卦例笔记（v9，nt- 前缀）
   ========================================================================== */
.nt-section {
  margin-top: 16px;
  padding: 14px 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
}

.nt-title {
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.nt-empty-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.nt-start-btn {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

.nt-editor { margin-top: 12px; }

.nt-input {
  width: 100%;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  background: var(--paper);                  /* 宣纸底 */
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.8;
  resize: vertical;
  transition: border-color 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out);
}

.nt-input:focus {
  outline: none;
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-light);
}

.nt-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  margin-top: 8px;
}

.nt-saved {
  font-size: 12px;
  color: var(--gold);
  opacity: 0;
}

.nt-saved.is-shown {
  animation: nt-saved-flash 1200ms var(--ease-out) 1;
}

@keyframes nt-saved-flash {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

.nt-last-edit {
  font-size: 12px;
  color: var(--text-muted);
}

.nt-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.nt-delete-btn {
  min-height: 36px;
  padding: 0 8px;
  font-size: 13px;
  color: var(--seal);
  background: none;
}

/* —— v9：刷题页新增件 —— */
.qz-sub-hint {
  margin-top: 2px;
  font-size: 13px;
  color: var(--gold-light);
}

.qz-mode-tag {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   22. 阅读划线（hl- 前缀）· v10 新增
   -------------------------------------------------------------------------- */

/* —— 22.1 阅读栏“划”按钮（与 Aa 同骨架） —— */
.rd-hl {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* —— 22.2 划线高亮（金色淡底 + 虚线下划线，不用浏览器默认黄/朱砂） —— */
mark.rd-highlight {
  color: inherit;
  background: var(--hl-mark-bg);
  border-bottom: 1px dashed var(--gold-line);
  padding: 1px 0;
  border-radius: 2px;
}

/* 划线定位闪烁：0.18 → 0.35 → 0.18，600ms 单次 */
mark.rd-highlight.hl-flash {
  animation: hl-flash 600ms var(--ease-page) 1;
}

@keyframes hl-flash {
  0%   { background: var(--hl-mark-bg); }
  40%  { background: var(--hl-flash-mid); }
  100% { background: var(--hl-mark-bg); }
}

/* reduced-motion：静态色块（JS 定时 400ms 移除） */
mark.rd-highlight.hl-static-flash {
  background: var(--hl-flash-mid);
}

/* —— 22.3 选区浮动工具栏（宣纸底 / 金线边 / 150ms opacity） —— */
.hl-toolbar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 58;                              /* 高于面板（55），低于轻提示（60） */
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%);
  transition: opacity 150ms var(--ease-out);
}

.hl-toolbar.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.hl-tool-btn {
  min-height: 36px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  font-size: 13px;
  color: var(--gold);
  background: transparent;
  white-space: nowrap;
}

.hl-tool-btn.hl-tool-danger {
  color: var(--seal);
}

/* —— 22.4 划线底部面板（详情/列表共用骨架，300ms 滑出） —— */
.hl-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  width: calc(100% - 32px);
  max-width: calc(var(--shell-max) - 32px);
  max-height: 62vh;
  z-index: 55;
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-top: 2px solid var(--gold-light);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-lift);
  transition: transform 300ms var(--ease-out),
              opacity 300ms var(--ease-out);
}

.hl-panel.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.hl-panel-inner {
  padding: 14px 16px;
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 详情：选中文本引用（≤3 行截断） */
.hl-quote {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--paper-tint-gold);
  border-inline-start: 2px solid var(--gold-line);
  border-radius: var(--radius-btn);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 详情：笔记区（展示态 + 编辑态） */
.hl-detail-note {
  margin: 0 0 10px;
}

.hl-note-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.hl-note-editor {
  margin: 0;
}

.hl-note-input {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.hl-note-input:focus {
  border-color: var(--gold-line);
}

.hl-note-meta {
  display: flex;
  justify-content: space-between;
  min-height: 20px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.hl-saved {
  color: var(--gold);
  opacity: 0;
}

.hl-saved.is-shown {
  animation: nt-saved-flash 1200ms var(--ease-out) 1;
}

/* 面板按钮组 */
.hl-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.hl-btn {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-btn);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  background: transparent;
  white-space: nowrap;
}

.hl-btn.hl-btn-danger {
  color: var(--seal);
  border-color: rgba(200, 60, 35, 0.4);
}

.hl-cancel {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
  font-size: 14px;
  color: var(--text-secondary);
  background: transparent;
}

/* —— 22.5 本章划线列表 —— */
.hl-list-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--text-primary);
}

.hl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.hl-item {
  display: block;
  width: 100%;
  min-height: 44px;                        /* 热区 ≥44px */
  padding: 10px 12px;
  text-align: left;
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-btn);
}

.hl-item-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.hl-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.hl-item-note-mark {
  color: var(--gold);
}

/* 失效划线：置灰 + 提示文案 */
.hl-item.is-invalid {
  opacity: 0.55;
}

.hl-item-invalid-reason {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* 空态 */
.hl-empty {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* —— 22.6 书籍状态徽标（书籍卡片，v10） —— */
.bk-book-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bk-status-badge {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: var(--paper-tint-gold);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  white-space: nowrap;
}

.bk-status-badge.is-imported {
  color: var(--gold-deep);
}

.bk-status-badge.is-placeholder {
  color: var(--text-muted);
  background: var(--bg-surface);
}