/* ============================================
   书 · 线装本 × 现代精装
   ============================================ */

/* iOS 上楷体 / 宋体不是预装字体（需用户手动下载），local() 无法访问。
   必须使用 web font：LXGW WenKai（楷）+ Noto Serif SC（宋）。
   黑体 PingFang SC 是 iOS 预装，直接用即可。 */

:root {
  /* 配色：雪色 + 墨 + 黛青（无棕色） */
  --paper:       #f3f4ef;        /* 主背景：冷雪色 */
  --paper-2:     #e8ebe5;        /* 次级，hover */
  --paper-deep:  #dde0d8;        /* 深一档，分隔 */
  --ink:         #1c1f25;        /* 主墨：冷暗 */
  --ink-soft:    #4f535d;        /* 次墨 */
  --ink-faint:   #8c919b;        /* 淡墨 */
  --vermilion:   #2d4762;        /* 黛青 · 唯一强调色（旧变量名沿用，避免大改） */
  --vermilion-2: #1d3349;        /* 印章 · 深黛 */
  --rule:        #c5c8c0;        /* 虚线、分隔线 */
  --rule-soft:   #d8dad2;

  --shadow:      0 1px 2px rgba(20,30,40,0.04), 0 14px 38px rgba(20,30,40,0.07);
  --radius:      8px;
  --topbar-h:    calc(48px + env(safe-area-inset-top));
  --bottombar-h: calc(42px + env(safe-area-inset-bottom));

  /* 字体 */
  --font-kai:     "Kaiti SC", STKaiti, KaiTi, BiauKai, serif;
  --font-serif:   "Songti SC", STSong, SimSun, "Noto Serif SC", serif;
  --font-sans:    -apple-system, "PingFang SC", "Heiti SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "Kaiti SC", STKaiti, KaiTi, "Songti SC", STSong, serif;

  /* 阅读默认 */
  --reader-size:    1.12rem;
  --reader-leading: 2.05;
  --reader-family:  var(--font-kai);
}

:root[data-theme="dark"] {
  --paper:       #11141a;        /* 深墨蓝底 */
  --paper-2:     #1a1e26;
  --paper-deep:  #232831;
  --ink:         #e6e8e2;        /* 冷月白 */
  --ink-soft:    #a8acb5;
  --ink-faint:   #6c707a;
  --vermilion:   #88aac8;        /* 浅黛青 */
  --vermilion-2: #6f93b2;
  --rule:        #2c313a;
  --rule-soft:   #232831;
  --shadow:      0 1px 2px rgba(0,0,0,0.4), 0 14px 38px rgba(0,0,0,0.5);
}

:root[data-size="sm"] { --reader-size: 0.95rem; }
:root[data-size="md"] { --reader-size: 1.12rem; }
:root[data-size="lg"] { --reader-size: 1.32rem; }
:root[data-size="xl"] { --reader-size: 1.58rem; }
:root[data-leading="tight"]  { --reader-leading: 1.78; }
:root[data-leading="normal"] { --reader-leading: 2.05; }
:root[data-leading="loose"]  { --reader-leading: 2.35; }
:root[data-family="kai"]   { --reader-family: var(--font-kai); }
:root[data-family="serif"] { --reader-family: var(--font-serif); }
:root[data-family="sans"]  { --reader-family: var(--font-sans); }

/* @font-face RereadKai/Song/Hei 已在顶部注册 local() 别名 → 这里直接引用。
   + 保留原始名称做 fallback → Windows/Android 也能正常匹配。 */
/* 默认：系统字体（Windows/macOS 有楷体/宋体/黑体） */
:root[data-family="kai"] .reader-content,
:root[data-family="kai"] .reader-content * {
  font-family: "Kaiti SC", STKaiti, KaiTi, BiauKai, serif !important;
}
:root[data-family="serif"] .reader-content,
:root[data-family="serif"] .reader-content * {
  font-family: "Songti SC", STSong, SimSun, "Noto Serif SC", serif !important;
}
:root[data-family="sans"] .reader-content,
:root[data-family="sans"] .reader-content * {
  font-family: -apple-system, "PingFang SC", "Heiti SC",
               "Microsoft YaHei", system-ui, sans-serif !important;
}
/* iOS 专用：系统楷/宋不预装，必须用 web font */
@supports (-webkit-touch-callout: none) {
  :root[data-family="kai"] .reader-content,
  :root[data-family="kai"] .reader-content * {
    font-family: "LXGW WenKai", "Kaiti SC", STKaiti, serif !important;
  }
  :root[data-family="serif"] .reader-content,
  :root[data-family="serif"] .reader-content * {
    font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  }
}
/* 但 .r-pretitle / .r-extra / 各 label / .r-end 保留小型展示字体（不跟随用户切换） */
:root .reader-content .r-pretitle,
:root .reader-content .r-extra,
:root .reader-content .r-notes-label,
:root .reader-content .r-annot-label,
:root .reader-content .r-intro-label,
:root .reader-content .r-end,
:root .reader-content .r-end-label {
  font-family: var(--font-display) !important;
}
:root[data-family="sans"] .reader-content .r-extra { font-family: var(--font-sans) !important; }

/* iOS 上 LXGW WenKai 偏细，加粗到 500 让笔画更沉稳 */
@supports (-webkit-touch-callout: none) {
  :root[data-family="kai"] .reader-content,
  :root[data-family="kai"] .reader-content * {
    font-weight: 500;
    -webkit-text-stroke: 0.2px;
  }
}

/* ============== Reset ============== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  /* 极细噪点 · 冷调 */
  background-image:
    radial-gradient(rgba(28,31,37,0.045) 1px, transparent 1px),
    radial-gradient(rgba(28,31,37,0.035) 1px, transparent 1px);
  background-size: 32px 32px, 21px 21px;
  background-position: 0 0, 11px 13px;
  min-height: 100vh;
  line-height: 1.6;
  transition: background-color 0.35s, color 0.35s;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(rgba(230,232,226,0.022) 1px, transparent 1px),
    radial-gradient(rgba(230,232,226,0.018) 1px, transparent 1px);
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--vermilion); text-decoration: none; }

/* ============== 顶/底栏 ============== */
.topbar, .bottombar {
  position: fixed; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.topbar {
  top: 0; height: var(--topbar-h);
  padding-top: env(safe-area-inset-top);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  gap: 4px;
}
.bottombar {
  bottom: 0; height: var(--bottombar-h);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
}
body.chrome-visible .topbar,
body.chrome-visible .bottombar { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* 抽屉打开时不显示顶/底栏，避免上下夹击 */
body.drawer-open .topbar,
body.drawer-open .bottombar { opacity: 0 !important; pointer-events: none !important; transform: translateY(-100%); }
body.drawer-open .bottombar { transform: translateY(100%); }

.topbar-meta {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ico {
  background: transparent; border: 0;
  color: var(--ink-soft);
  width: 36px; height: 36px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ico:hover { color: var(--ink); }
.ico:active { background: var(--paper-2); }

.bot-btn {
  background: transparent; border: 0;
  color: var(--ink-soft);
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
}
.bot-btn:disabled { opacity: 0.25; }
.bot-pos {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
}

/* ============== 朱砂印 · 目录入口 ============== */
.seal {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 18px);
  width: 40px; height: 40px;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermilion-2);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0;
  transform: rotate(-6deg);
  z-index: 50;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 40%, transparent), 0 1px 3px rgba(0,0,0,0.15);
  opacity: 0.88;
  transition: opacity 0.25s, transform 0.25s;
  padding: 0;
}
.seal:hover { opacity: 1; transform: rotate(-6deg) scale(1.06); }
.seal:active { transform: rotate(-6deg) scale(0.96); }
/* 顶栏可见时：印章仅下移一个 topbar 高度，不遮挡 */
body.chrome-visible .seal {
  opacity: 0.7;
  top: calc(var(--topbar-h) + 14px);
}
/* 抽屉打开时藏起来 */
body.drawer-open .seal { opacity: 0; pointer-events: none; }
:root[data-theme="dark"] .seal {
  background: #8b3a2f;
  color: #e6e0d0;
}
/* 暗模式下底栏/顶栏按钮提亮 */
:root[data-theme="dark"] .bot-btn { color: var(--ink-soft); }
:root[data-theme="dark"] .seg button.active { background: #2a3040; color: var(--ink); }
:root[data-theme="dark"] .r-ref { color: #c09880; }
:root[data-theme="dark"] .r-annot-toggle { color: #c09880; }
:root[data-theme="dark"] .r-annot-toggle .r-arrow { border-top-color: #c09880; }

/* ============== 边缘点击 ============== */
.edge {
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--bottombar-h);
  width: 22%;
  z-index: 5;
}
.edge-prev { left: 0; }
.edge-next { right: 0; }
body:not(.reader) .edge { display: none; }

/* ============== 阅读视图 ============== */
.reader-page {
  min-height: 100vh;
  padding: calc(env(safe-area-inset-top) + 14vh) max(28px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 16vh) max(28px, env(safe-area-inset-right));
  display: flex;
  justify-content: center;
}
.reader-content {
  width: 100%;
  max-width: 36em;
  color: var(--ink);
}

/* 题头 */
.r-pretitle {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  color: var(--vermilion);
  text-align: center;
  margin-bottom: 1.2em;
}
.r-pretitle::before, .r-pretitle::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--ink-faint);
}
.r-title {
  /* font-family 由 .reader-content inline style 继承（用户字体偏好生效） */
  font-size: clamp(1.85rem, 6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 0.5em;
  line-height: 1.45;
  color: var(--ink);
}
.r-byline {
  /* font-family 继承自 .reader-content */
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4em;
}
.r-extra {
  text-align: center;
  font-family: var(--font-sans);
  color: var(--ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  margin-bottom: 3em;
}
.r-divider {
  width: 30px; height: 12px;
  margin: 0 auto 3em;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat;
  color: var(--rule);
  position: relative;
}
.r-divider::before, .r-divider::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rule);
}
.r-divider::before { left: -6px; }
.r-divider::after  { right: -6px; }

/* 正文 */
.r-body {
  /* font-family 由 .reader-content inline style 继承 */
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  color: var(--ink);
  text-align: justify;
}
.r-body p {
  margin: 0 0 1em;
  text-indent: 2em;
}
/* 子篇标题 / 材料标签 / 附记等 */
.r-body h3.r-section {
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--vermilion);
  text-align: center;
  text-indent: 0;
  margin: 2em 0 1.2em;
  padding-left: 0.18em;
}
.r-body h3.r-section::before,
.r-body h3.r-section::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  border-top: 1px solid var(--rule);
  margin: 0 0.8em;
  vertical-align: middle;
}
.r-body.is-poem {
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 2.3;
}
.r-body.is-poem p {
  text-indent: 0;
  text-align: center;
  margin: 0 0 0.4em;
}

/* 副标题（"——跳水姑娘吕伟夺魁记"） */
.r-subtitle {
  /* font-family 继承自 .reader-content */
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  margin: -0.2em 0 0.7em;
}

/* 题注 + 字词注释（文末） */
.r-notes, .r-annot {
  margin-top: 3em;
  padding: 1.5em 0 0;
  border-top: 1px dashed var(--rule);
  /* font-family 继承自 .reader-content */
  color: var(--ink-soft);
}
.r-notes-label, .r-annot-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--vermilion);
  letter-spacing: 0.4em;
  text-align: center;
  margin-bottom: 1em;
  padding-left: 0.4em;
}
/* 字词注释段：默认折叠，点击 toggle 展开 */
.r-annot-toggle {
  display: block;
  margin: 0 auto;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--vermilion);
  letter-spacing: 0.3em;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}
/* 折叠箭头：用 CSS 三角形（不再用 ▾ Unicode 字符，iOS 会渲染成蓝色 emoji） */
.r-annot-toggle .r-arrow {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 8px;
  vertical-align: -2px;
  /* 默认 ▾ 朝下：朱砂三角 */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--vermilion);  /* 1.2x 普通字号 */
  transition: transform 0.18s;
}
.r-annot.open .r-annot-toggle .r-arrow {
  transform: rotate(180deg) translateY(-1px);
}
.r-annot .r-annot-list { display: none; margin-top: 1em; }
.r-annot.open .r-annot-list { display: block; }
.r-annot-flash { background: color-mix(in srgb, var(--vermilion) 14%, transparent); transition: background 0.4s; }
/* 内联注释引用：小号上标 —— 默认隐藏，注释展开后才显示，避免无标号也想点 */
.r-ref {
  display: none;
  font-size: 0.55em;
  vertical-align: super;
  line-height: 1;
  color: var(--vermilion);
  margin: 0 0.05em;
  padding: 0 0.15em;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.15s;
}
.reader-content.refs-on .r-ref { display: inline-block; }
.r-ref:hover { background: color-mix(in srgb, var(--vermilion) 12%, transparent); }
.r-notes-text {
  font-size: calc(var(--reader-size) * 0.88);
  line-height: calc(var(--reader-leading) * 0.85);
  text-indent: 2em;
  color: var(--ink-soft);
}
.r-annot-list {
  font-size: calc(var(--reader-size) * 0.82);
  line-height: calc(var(--reader-leading) * 0.78);
  color: var(--ink-soft);
}
.r-annot-item {
  display: flex;
  gap: 0.6em;
  margin-bottom: 0.35em;
  padding-left: 1.6em;
  text-indent: -1.6em;
}
.r-annot-key {
  flex-shrink: 0;
  color: var(--vermilion);
  font-family: var(--font-display);
  min-width: 1.4em;
}
.r-annot-text { flex: 1; }

/* 待补：极简 */
.r-empty {
  font-family: var(--font-kai);
  text-align: center;
  color: var(--ink-faint);
  font-size: 1.15rem;
  letter-spacing: 0.6em;
  padding: 3em 0 2em;
  padding-left: 0.6em; /* 抵消 letter-spacing 错位 */
}

/* 再读一笔 */
.r-intro {
  margin-top: 4em;
  padding-top: 2.4em;
  position: relative;
}
.r-intro::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px;
  border-top: 1px dashed var(--rule);
}
.r-intro::after {
  content: "魚";
  position: absolute;
  top: -0.8em; left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--vermilion);
  font-family: var(--font-display);
  font-size: 0.78rem;
  padding: 0 0.8em;
  letter-spacing: 0;
}
.r-intro-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--vermilion);
  letter-spacing: 0.4em;
  text-align: center;
  margin-bottom: 1.6em;
  padding-left: 0.4em;
}
.r-intro-text {
  /* font-family 继承自 .reader-content */
  color: var(--ink-soft);
  font-size: calc(var(--reader-size) * 0.92);
  line-height: calc(var(--reader-leading) * 0.92);
  text-indent: 2em;
  text-align: justify;
}

/* 尾巴 */
.r-end {
  display: block;
  width: 100%;
  margin-top: 5em;
  padding: 1.2em 0.4em 1.2em 0.8em;
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.4em;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--rule-soft);
  cursor: default;
}
.r-end-next {
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.r-end-next:hover {
  color: var(--vermilion);
  background: color-mix(in srgb, var(--vermilion) 5%, transparent);
}
.r-end .next-hint, .r-end-next .next-hint {
  display: block;
  margin-top: 0.6em;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.15em;
  padding-left: 0;
}
.r-end-next:hover .next-hint { color: var(--vermilion); }

/* ============== 目录抽屉 ============== */
/* 关键：hidden 属性必须比 display:flex 优先级高 */
.drawer[hidden], .drawer-mask[hidden] { display: none !important; }

.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(20,15,8,0.32);
  z-index: 90;
  animation: fade 0.25s;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--paper);
  z-index: 91;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 30px rgba(0,0,0,0.18);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-right: env(safe-area-inset-right);
  border-left: 1px solid var(--rule-soft);
  animation: slideIn 0.28s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideIn { from { transform: translateX(100%) } to { transform: translateX(0) } }

/* 大屏：抽屉打开时正文整体左移避开遮挡 */
@media (min-width: 1100px) {
  main, .seal, .topbar, .bottombar, .edge {
    transition: transform 0.32s cubic-bezier(.2,.7,.3,1);
  }
  body.drawer-open main,
  body.drawer-open .edge {
    transform: translateX(-180px);
  }
  body.drawer-open .drawer-mask { background: transparent; }
}

.drawer-head {
  padding: 18px 14px 16px 22px;
  display: flex; align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-head #drawerClose { margin-left: auto; }
.drawer-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.4em;
  color: var(--ink);
  padding-left: 0.4em;
}
.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-tab {
  flex: 1;
  background: transparent; border: 0;
  padding: 12px 4px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  position: relative;
  padding-left: 0.2em;
}
.drawer-tab.active {
  color: var(--vermilion);
  border-bottom-color: var(--vermilion);
}

/* 搜索栏 */
.drawer-search {
  position: relative;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-search input {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 30px 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.drawer-search input::placeholder {
  color: var(--ink-faint);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}
.drawer-search input:focus {
  background: var(--paper);
  border-color: var(--vermilion);
}
.drawer-search-clear {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0;
  background: var(--ink-faint);
  color: var(--paper);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.drawer-search-clear:hover { background: var(--ink-soft); }

.drawer-empty {
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--font-display);
  letter-spacing: 0.4em;
  padding: 32px 0;
  padding-left: 0.4em;
}

/* 高中 · 版本分组 */
.drawer-edition {
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-edition-head {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink);
  letter-spacing: 0.18em;
  cursor: pointer;
}
.drawer-edition-head:hover { background: var(--paper-2); }
.drawer-edition-name { flex: 1; text-align: left; padding-left: 0.18em; }
.drawer-edition-count {
  color: var(--ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  margin-right: 10px;
}
.drawer-edition-chevron {
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.drawer-edition.open .drawer-edition-chevron {
  transform: rotate(45deg);
}
.drawer-edition-body { display: none; }
.drawer-edition.open .drawer-edition-body { display: block; padding-bottom: 8px; }

.drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.drawer-empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.drawer-clear-history {
  color: var(--ink-faint) !important;
  font-size: 0.78rem !important;
  justify-content: center !important;
  border-top: 1px solid var(--rule-soft);
  margin-top: 12px;
}
.drawer-foot {
  padding: 10px 22px 14px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--ink-faint);
  text-align: center;
  border-top: 1px solid var(--rule-soft);
  flex-shrink: 0;
}
.drawer-grade {
  padding: 18px 22px 6px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.32em;
  padding-left: calc(22px + 0.32em);
}
.drawer-item {
  display: flex; flex-direction: column;
  width: 100%;
  background: transparent; border: 0;
  text-align: left;
  padding: 9px 22px 9px 22px;
  font-family: var(--font-display);
  font-size: 1.0rem;
  color: var(--ink);
  letter-spacing: 0.05em;
  position: relative;
  gap: 2px;
}
.drawer-item:hover { background: var(--paper-2); }
.drawer-item.active { color: var(--vermilion); background: color-mix(in srgb, var(--vermilion) 6%, transparent); }
.drawer-item.active::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--vermilion);
  border-radius: 2px;
}
.drawer-item-main {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.drawer-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-item-author {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-family: var(--font-sans);
  letter-spacing: 0;
  white-space: nowrap;
}
.drawer-item-sub {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============== 抽屉里的设置面板（齿轮唤起，从顶向下展开） ============== */
.drawer-gear {
  color: var(--ink-faint);
  opacity: 0.55;
  transition: opacity 0.18s, color 0.18s, transform 0.25s;
}
.drawer-gear:hover { opacity: 0.9; color: var(--ink-soft); }
.drawer-gear.active {
  opacity: 1;
  color: var(--vermilion);
  transform: rotate(60deg);
}

.drawer-prefs {
  max-height: 0;
  overflow: hidden;
  background: var(--paper-2);             /* iOS 兼容：去掉 color-mix */
  transition: max-height 0.25s ease-out;
  -webkit-transition: max-height 0.25s ease-out;
  will-change: max-height;
  contain: layout style;                  /* 减少 iOS 上的 reflow 抖动 */
}
.drawer-prefs.open {
  max-height: 400px;                       /* 6 行设置，留足空间 */
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-prefs-inner {
  padding: 8px 18px 12px;
}
.drawer-prefs .pop-row + .pop-row {
  border-top: none;
  margin-top: 0;
  padding-top: 2px;
}

.pop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.pop-row + .pop-row {
  border-top: 1px dashed var(--rule-soft);
  margin-top: 6px;
  padding-top: 12px;
}
.pop-label {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
}
/* iOS 风格 segmented control：容器底色 + 间距分隔，无 border 线 */
.seg {
  display: inline-flex;
  border-radius: 8px;
  background: var(--paper-2);
  padding: 3px;
  gap: 2px;
}
.seg button {
  background: transparent;
  border: 0;
  /* 双重指定 + -webkit-text-fill-color，保 iOS Safari 文字色一定出现 */
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor;
  padding: 6px 11px;
  font-size: 0.88rem;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 5px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: 28px;
  min-width: 32px;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, color 0.15s;
}
.seg button:active { opacity: 0.7; }
.seg button.active {
  background: var(--vermilion);
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.seg button svg { flex-shrink: 0; opacity: 0.85; }
.seg button.active svg { opacity: 1; }
.r-body.font-reflow { opacity: 0.999; }

/* ============== 阅读进度条 ============== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--vermilion);
  width: 0;
  z-index: 100;
  transition: width 0.08s linear;
  pointer-events: none;
}
body:not(.reader) .reading-progress { display: none; }

/* ============== toast ============== */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 28px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28,31,37,0.92);
  color: #f3f4ef;
  padding: 9px 18px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: toastIn 0.18s ease-out;
}
.toast[hidden] { display: none; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============== loading ============== */
.loading {
  text-align: center;
  padding: 38vh 20px;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  padding-left: calc(20px + 0.4em);
}

/* ============== 大屏：页宽控制 ============== */
@media (min-width: 700px) {
  :root[data-width="narrow"] .reader-content { max-width: 32em; }
  :root[data-width="medium"] .reader-content { max-width: 38em; }
  :root[data-width="wide"]   .reader-content { max-width: 50em; }
  :root[data-width="full"]   .reader-content { max-width: 72em; }
}