/* ============ 阅读器：工具条跟随阅读主题（--live-*），渲染区由设置驱动 ============ */
#reader {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--live-bg, #f5f3ee);
  color: var(--ink);
  /* 面板/工具条在阅读器内改用阅读主题的纸墨变量（默认同书架浅色） */
  --paper: var(--live-bg, #f5f3ee);
  --paper-2: color-mix(in srgb, var(--live-bg, #f5f3ee) 94%, var(--live-fg, #2b2a26) 6%);
  --paper-3: color-mix(in srgb, var(--live-bg, #f5f3ee) 88%, var(--live-fg, #2b2a26) 12%);
  --ink: var(--live-fg, #2b2a26);
  --ink-2: color-mix(in srgb, var(--live-fg, #2b2a26) 68%, var(--live-bg, #f5f3ee));
  --ink-3: color-mix(in srgb, var(--live-fg, #2b2a26) 46%, var(--live-bg, #f5f3ee));
  --line: color-mix(in srgb, var(--live-fg, #2b2a26) 15%, transparent);
  --line-2: color-mix(in srgb, var(--live-fg, #2b2a26) 22%, transparent);
  --brand: var(--live-fg, #2b2a26);
  --brand-deep: var(--live-fg, #2b2a26);
  --reader-panel-width: min(408px, 92vw);
}

/* ---------- 顶栏 / 底栏 ---------- */
.bar {
  position: absolute; left: 0; right: 0; z-index: 100; height: 52px;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--live-bg, #f5f3ee) 90%, transparent);
  backdrop-filter: blur(12px);
  transition: transform .25s ease, opacity .25s ease;
}
#topbar { top: 0; border-bottom: 1px solid var(--line); }
#bottombar {
  bottom: 0; height: 54px; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#reader.chrome-hidden #topbar { transform: translateY(-100%); opacity: 0; }
#reader.chrome-hidden #bottombar { transform: translateY(100%); opacity: 0; }

.book-title {
  min-width: 0; flex: 0 1 auto;
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  color: var(--live-fg, #2b2a26);
}
.bar-spacer { flex: 1; }
.bar-btn {
  padding: 7px 11px; border-radius: 8px; font-size: 13px; color: var(--ink);
  white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
}
.bar-btn:hover { background: var(--paper-3); }
.bar-btn svg { width: 17px; height: 17px; opacity: .85; }
/* 激活态（书签已加入当前页 / 朗读中） */
.bar-btn.active { background: var(--paper-3); border-color: var(--line-2); color: var(--ink); }
.bar-btn.active svg { opacity: 1; }
#btnMark.active svg path { fill: currentColor; }
#btnTts.active svg { animation: ttsPulse 1.3s ease-in-out infinite; }
@keyframes ttsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bar-btn.primary { border-color: var(--line-2); background: var(--paper-2); }
.nav-arrow {
  width: 36px; height: 36px; border-radius: 8px; font-size: 20px; color: var(--ink-2); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.nav-arrow:hover { background: var(--paper-3); color: var(--ink); }
#progressSlider { flex: 1; min-width: 0; accent-color: var(--live-fg, #2b2a26); }
.progress-label {
  font-size: 12px; color: var(--ink-2); min-width: 84px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- 舞台（主题作用区） ---------- */
#stage {
  position: absolute; inset: 0; padding: 52px clamp(12px, 2.5vw, 32px) 54px;
  background: var(--er-bg, #f6f4ef); transition: background .2s; overflow: hidden;
}
#reader.chrome-hidden #stage { padding: 0; }
/* 桌面端：设置面板打开时正文避让（即时重排，无过渡） */
@media (min-width: 721px) {
  #reader.panel-open #stage { margin-right: var(--reader-panel-width); }
  #reader.panel-open #topbar, #reader.panel-open #bottombar { right: var(--reader-panel-width); }
}
#viewport { position: absolute; inset: 52px 0 54px; overflow: hidden; touch-action: pan-y; }
#reader.chrome-hidden #viewport { inset: 0; }
#viewport.scrolled { touch-action: pan-y; }

/* ---------- HTMLBook 渲染 ---------- */
.hb-center { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; }
.hb-center:not(.scrolled) { align-items: flex-start; }
.hb-center.scrolled { display: block; overflow-y: auto; }
.hb-pages {
  font-family: var(--er-font, sans-serif);
  font-size: var(--er-fs, 18px);
  font-weight: var(--er-fw, 400);
  line-height: var(--er-lh, 1.75);
  letter-spacing: var(--er-ls, 0.02em);
  word-spacing: var(--er-ws, 0);
  color: var(--er-fg, #333);
  text-align: var(--er-ta, justify);
  overflow-wrap: break-word;
  hyphens: auto;
  user-select: text;
  will-change: transform;
}
.hb-pages p { margin: 0 0 var(--er-ps, .6em) 0; text-indent: var(--er-pi, 2em); }
.hb-pages.vertical p { text-indent: 0; }
.hb-pages a { color: var(--er-link, #4a6fa5); }
.hb-pages::selection, .hb-pages *::selection { background: color-mix(in srgb, var(--er-link, #4a6fa5) 30%, transparent); }
.hb-center.scrolled .hb-pages { columns: none; transform: none !important; margin: 0 auto; padding-bottom: 45vh; }
.hb-center.vertical { justify-content: flex-end; position: relative; } /* 竖排：首行在最右 */

/* ---------- EPUB 渲染 ---------- */
.epub-wrap { width: 100%; height: 100%; margin: 0 auto; position: relative; }
.epub-wrap iframe { border: none; }
.epub-catcher { position: absolute; inset: 0; z-index: 5; touch-action: pan-y; background: transparent; cursor: default; }

/* ---------- PDF 渲染 ---------- */
.pdf-scroller {
  height: 100%; overflow: auto; display: flex; justify-content: center;
  background: var(--er-bg, #f6f4ef); transition: background .2s;
}
.pdf-holder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 22px 60px; }
.pdf-page { position: relative; background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, .16); overflow: hidden; }
.pdf-holder.invert canvas { filter: invert(1) hue-rotate(180deg); }
.pdf-page canvas { display: block; }
.pdf-pagenum {
  position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
  font-size: 11px; color: var(--er-fg, #888); opacity: .55;
}

/* ---------- 覆盖层 ---------- */
#ovTexture {
  position: absolute; inset: 0; pointer-events: none; z-index: 20; opacity: 0;
  background-image: var(--er-tex);
  background-size: 240px 240px;
  mix-blend-mode: multiply;
}
#stage.tex-dark #ovTexture { mix-blend-mode: screen; opacity: calc(var(--er-texop, 0) * .6); }
#ovDim { position: absolute; inset: 0; pointer-events: none; z-index: 30; background: #000; opacity: 0; }

.ov-mask { position: absolute; top: 0; bottom: 0; z-index: 25; pointer-events: none; display: none; width: 22%; }
#ovMaskL { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
#ovMaskR { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

#ruler {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 26;
  height: 44px; pointer-events: none; display: none;
  background: color-mix(in srgb, var(--er-link, #4a6fa5) 14%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--er-link, #4a6fa5) 50%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--er-link, #4a6fa5) 50%, transparent);
}
#ruler.follow { position: fixed; transform: none; }

/* 仿生阅读加粗 */
.bio-b { font-weight: 700; }

/* ---------- 朗读弹层 ---------- */
#ttsPopover {
  position: absolute; right: 14px; bottom: 66px; z-index: 110;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 14px; display: none; flex-direction: column; gap: 10px; width: min(320px, 84vw);
  box-shadow: var(--shadow, 0 6px 24px rgba(43, 42, 38, .12));
}
#ttsPopover.open { display: flex; }
#ttsPopover label { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
#ttsPopover input[type=range] { flex: 1; accent-color: var(--ink); }
#ttsPopover select {
  width: 100%;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 6px 8px; font-size: 12px; max-width: 100%;
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .bar { padding: 0 8px; gap: 4px; }
  .bar-btn { padding: 7px 8px; font-size: 12.5px; }
  .bar-btn .txt { display: none; }
  .book-title { font-size: 13px; max-width: 28vw; }
  #stage { padding: 48px 0 52px; }
  #viewport { inset: 48px 0 52px; }
  .progress-label { min-width: 64px; font-size: 11px; }
  .nav-arrow { width: 34px; }
}

.study-status { flex: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.study-next { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.study-next:hover { background: var(--ink-2); color: var(--paper-2); }
#reader.study-mode #btnSettings, #reader.study-mode #btnTts, #reader.study-mode #btnMark { display: none; }
#reader.study-adjustable #btnSettings { display: inline-flex; }
.study-compare-dock { position: absolute; bottom: 54px; left: 0; right: 0; z-index: 110; padding: 12px 18px; background: var(--paper-2); border-top: 1px solid var(--line); }
.study-compare-heading { font-size: 12px; margin-bottom: 8px; }
.study-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 600px; }
.study-option { min-height: 40px; padding: 6px; min-width: 0; }
.study-option.selected { outline: 2px solid var(--ink); outline-offset: 1px; }
.study-compare-actions { display: flex; justify-content: flex-end; gap: 8px; }
.study-compare-dock .q-note { margin: 8px 0; font-size: 10px; }
#reader.study-comparing #stage { bottom: 192px; }
.study-important { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.study-important .selected { border-color: var(--brand); background: var(--paper-3); }
.study-final-preview { padding: 20px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .study-compare-dock { padding: 10px 12px; }
  #reader.study-comparing #stage { bottom: 202px; }
  .study-next { max-width: 112px; }
}
#reader .btn.primary { color: var(--paper); }
@media (max-width: 720px) {
  #reader.study-mode .book-title { display: none; }
  .study-status { display: inline-flex; font-size: 10px; padding: 5px 7px; }
  .study-next { padding: 7px 9px; }
}

/* ---------- 样章《字里行间》局部排版示例 ----------
   示例只改变自身块内的字号、行距、行长、对比与留白；
   其余正文继续继承 .hb-pages 上的全局阅读设置。
   采用相对单位与逻辑属性，字号随全局缩放，竖排时“行长”沿纵向生效。
   示例没有过渡或动画，减少动效设置下保持静止。 */
.hb-pages .typography-demo {
  margin-block: 1.1em 1.5em;
  margin-inline: 0;
  padding: 0.8em 1em;
  max-inline-size: 52em;
  border-inline-start: 0.18em solid color-mix(in srgb, var(--er-link, #4a6fa5) 32%, transparent);
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--er-fg, #333) 4%, transparent);
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-align: start;
  overflow-wrap: break-word;
}
.hb-pages .typography-demo p {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  max-width: none;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--er-lh, 1.75);
  letter-spacing: inherit;
  word-spacing: inherit;
  text-align: start;
  text-indent: 0;
  overflow-wrap: break-word;
}
.hb-pages .typography-demo p + p { margin-block-start: 0.7em; }
.hb-pages .typography-demo > figcaption {
  margin-block-start: 0.85em;
  padding: 0;
  border: 0;
  font-size: 0.82em;
  line-height: 1.55;
  letter-spacing: inherit;
  text-align: start;
  text-indent: 0;
  color: color-mix(in srgb, var(--er-fg, #333) 72%, var(--er-bg, #f6f4ef));
  overflow-wrap: break-word;
}
/* 字号 */
.hb-pages .typography-demo--font-size .typography-demo__small { font-size: 0.9em; line-height: 1.6; }
.hb-pages .typography-demo--font-size .typography-demo__large { font-size: 1.2em; line-height: 1.6; }
/* 行距 */
.hb-pages .typography-demo--line-height .typography-demo__tight { line-height: 1.4; }
.hb-pages .typography-demo--line-height .typography-demo__loose { line-height: 2.05; }
/* 行长 */
.hb-pages .typography-demo--measure .typography-demo__narrow {
  max-width: min(24em, 78%);
  max-inline-size: min(24em, 78%);
}
.hb-pages .typography-demo--measure .typography-demo__wide {
  max-width: 100%;
  max-inline-size: 100%;
}
/* 对比 */
.hb-pages .typography-demo--contrast .typography-demo__contrast-strong { color: var(--er-fg, #333); }
.hb-pages .typography-demo--contrast .typography-demo__contrast-soft {
  color: color-mix(in srgb, var(--er-fg, #333) 58%, var(--er-bg, #f6f4ef));
}
/* 留白 */
.hb-pages .typography-demo--whitespace { padding: 1.15em 1.25em; }
.hb-pages .typography-demo--whitespace p + p { margin-block-start: 1.7em; }
.hb-pages .typography-demo--whitespace > figcaption { margin-block-start: 1.1em; }

.hb-clip { flex: 0 0 auto; min-width: 0; }
.hb-center { overflow-anchor: none; }
.hb-turn-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hb-curl-stage { isolation: isolate; }
.hb-curl-book { position: absolute !important; left: 0; top: 0; min-width: 0 !important; min-height: 0 !important; transform-origin: 0 0; }
.hb-curl-leaf { overflow: hidden; background: var(--curl-paper); }
.hb-curl-snapshot { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; }
.study-effect-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.study-effect-grid .btn { min-width: 0; padding: 7px 3px; font-size: 11px; }
.study-effect-grid .selected { border-color: var(--brand); background: var(--paper-3); }
.study-secondary { margin-top: 8px; }
#reader.study-comparing #stage { bottom: var(--study-dock-height, 192px); }