/* ==================================================================
   mindmap5.3 · reader.css —— 多格式阅读区 / 文档抽屉 / 摘录来源
   ================================================================== */

#reader-panel, #reader-panel *,
#reader-library, #reader-library * { box-sizing: border-box; }
#reader-panel {
  position: fixed; top: var(--menubar-h); right: 0; bottom: 0;
  z-index: var(--z-reader); width: clamp(420px, var(--reader-width), 90vw);
  display: flex; flex-direction: column;
  color: var(--ui-text); background: var(--ui-panel);
  font: var(--ui-font-size)/var(--ui-line-height) var(--ui-font);
  border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-aux);
  transform: translateX(102%); visibility: hidden;
  transition: transform var(--anim), visibility 0s linear var(--anim);
}
body.reader-mode-split #reader-panel,
body.reader-mode-reader-only #reader-panel {
  transform: translateX(0); visibility: visible;
  transition: transform var(--anim), visibility 0s;
}
body.reader-mode-reader-only #reader-panel {
  width: 100vw; max-width: none; border-left: 0; box-shadow: none;
}
body.reader-mode-map-only #reader-panel {
  transform: translateX(100%); visibility: visible;
  transition: transform var(--anim), visibility 0s;
}
body.reader-mode-map-only #reader-panel > :not(#reader-resizer) { visibility: hidden; pointer-events: none; }
#reader-resizer {
  position: absolute; z-index: 9; left: -30px; top: 0; bottom: 0; width: 60px;
  pointer-events: none;
}
.reader-separator {
  position: absolute; left: 21px; top: 0; bottom: 0; width: 18px;
  pointer-events: auto; cursor: col-resize; touch-action: none; outline: none;
}
.reader-separator::after {
  content: ""; position: absolute; left: 50%; top: calc(70% - 39px); width: 1px; height: 78px;
  transform: translateX(-50%); background: color-mix(in srgb, var(--ui-border) 42%, transparent);
  transition: width var(--anim-fast), background var(--anim-fast), box-shadow var(--anim-fast);
}
.reader-separator:hover::after, .reader-separator:focus-visible::after, body.reader-resizing .reader-separator::after {
  width: 2px; background: color-mix(in srgb, var(--ui-accent) 68%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ui-accent) 24%, transparent);
}
.reader-divider-controls {
  position: absolute; left: 0; top: 70%; width: 60px; min-height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 0;
  transform: translateY(-50%); pointer-events: none;
}
.reader-divider-button {
  width: 26px; height: 30px; margin: 0; padding: 0; pointer-events: auto;
  appearance: none; border: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent);
  color: color-mix(in srgb, var(--ui-muted) 70%, transparent);
  background: color-mix(in srgb, var(--ui-panel) 84%, transparent); cursor: pointer;
  font: 800 15px/1 var(--ui-font); box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.reader-divider-left { border-radius: 999px 0 0 999px; border-right: 0; }
.reader-divider-right { border-radius: 0 999px 999px 0; border-left: 0; }
.reader-divider-grip {
  position: relative; width: 8px; height: 30px; flex: none; pointer-events: auto;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent);
  background: color-mix(in srgb, var(--ui-panel) 84%, transparent);
  cursor: col-resize; touch-action: none;
}
.reader-divider-grip::after {
  content: ""; position: absolute; left: 50%; top: 9px; width: 1px; height: 12px;
  transform: translateX(-50%); background: color-mix(in srgb, var(--ui-muted) 48%, transparent);
  transition: width var(--anim-fast), background var(--anim-fast), box-shadow var(--anim-fast);
}
.reader-divider-grip:hover::after,
.reader-separator:focus-visible + .reader-divider-controls .reader-divider-grip::after,
body.reader-resizing .reader-divider-grip::after {
  width: 2px; background: color-mix(in srgb, var(--ui-accent) 72%, transparent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ui-accent) 24%, transparent);
}
.reader-divider-button:hover, .reader-divider-button:focus-visible {
  position: relative; z-index: 1; color: color-mix(in srgb, var(--ui-accent) 78%, var(--ui-text));
  border-color: color-mix(in srgb, var(--ui-accent) 68%, transparent); outline: none;
  background: color-mix(in srgb, var(--ui-panel) 91%, var(--ui-accent));
}
.reader-divider-button:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent), 0 3px 10px rgba(0, 0, 0, .12); }
.reader-divider-button[hidden], .reader-divider-grip[hidden], .reader-separator[hidden] { display: none; }
body.reader-mode-reader-only #reader-resizer { left: 0; width: 38px; }
body.reader-mode-reader-only .reader-divider-controls { left: 4px; width: 30px; justify-content: flex-start; }
body.reader-mode-reader-only .reader-divider-left {
  width: 30px; border: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent); border-radius: 999px;
}
body.reader-mode-map-only #reader-resizer { left: -38px; width: 38px; }
body.reader-mode-map-only .reader-divider-controls { left: 4px; width: 30px; justify-content: flex-end; }
body.reader-mode-map-only .reader-divider-right {
  width: 30px; border: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent); border-radius: 999px;
}
body.reader-resizing, body.reader-resizing * { cursor: col-resize !important; user-select: none !important; }
body.reader-resizing #reader-panel { transition: none !important; }
/* 刷新恢复已保存的分屏状态时同步落位，避免画布先收窄而 Reader 仍停在视口外。 */
body.reader-layout-restoring #reader-panel,
body.reader-layout-restoring #stage { transition: none !important; }

.reader-chrome {
  position: absolute; z-index: 5; top: 8px; left: 8px; right: 8px;
  min-height: 36px; max-height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 3px 4px 3px 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-panel) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.reader-file {
  min-width: 0; max-width: 34%; flex: 0 1 220px;
  display: flex; align-items: baseline; gap: 8px;
}
.reader-file strong, .reader-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-file strong { min-width: 0; flex: 1 1 auto; font-size: 12.5px; line-height: 1.2; }
.reader-file span { flex: 0 1 42%; color: var(--ui-muted); font-size: 10.5px; }
#reader-panel:not(.has-document) .reader-file { max-width: none; flex: 1 1 auto; }
#reader-panel.has-document .reader-file span { display: none; }
.reader-icon, .reader-tools button, .reader-tool-view button, .reader-library button, .reader-progress button {
  appearance: none; border: 1px solid var(--ui-border); background: var(--ui-panel); color: var(--ui-text);
  border-radius: 8px; cursor: pointer; font: 700 12px/1 var(--ui-font);
}
.reader-icon { width: 30px; height: 30px; font-size: 13px; flex: none; }
.reader-icon:hover, .reader-tools button:hover, .reader-tool-view button:hover, .reader-library button:hover,
.reader-progress button:hover { color: var(--ui-text); border-color: var(--ui-accent); }
.reader-tools button[aria-pressed="true"], .reader-icon[aria-expanded="true"] {
  color: var(--ui-primary-text); border-color: transparent;
  background: var(--ui-accent);
}
.reader-tools {
  min-width: 0; min-height: 0; flex: 1 1 auto;
  display: flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: transparent;
  overflow-x: auto; scrollbar-width: thin;
}
.reader-chrome-end { display: flex; align-items: center; gap: 4px; flex: none; }
/* 顶栏槽位：桌面端 reader-tools / chrome-end 由 JS 归位到此，随阅读区展开/折叠显示。 */
#reader-menubar {
  display: none; align-items: center; gap: 5px;
  min-width: 0; max-width: min(62vw, 780px);
  overflow-x: auto; scrollbar-width: thin;
}
body.reader-open #reader-menubar { display: flex; }
#reader-menubar .reader-chrome-end { margin-left: 4px; padding-left: 9px; border-left: 1px solid var(--ui-border); }
/* 无文档时工具按钮隐藏（面板内与顶栏槽位两种归位位置统一走 body 级规则）。 */
body.reader-open:not(.reader-has-document) .reader-tools { display: none; }
/* 工具条并入顶栏后，面板顶部只保留文件名/状态悬浮胶囊。 */
body.reader-tools-in-menubar .reader-chrome { right: auto; width: max-content; max-width: min(52%, 480px); }
body.reader-tools-in-menubar #reader-panel .reader-file { max-width: none; flex: 0 1 auto; }
/* 桌面端书名已由书目按钮承载，阅读区左上角只保留状态提示（#reader-status）。 */
body.reader-tools-in-menubar .reader-file #reader-filename { display: none; }
/* 有文档时书名与状态均为空，隐藏整个文件区避免顶栏残留空胶囊。 */
body.reader-tools-in-menubar #reader-panel.has-document .reader-file { display: none; }
#reader-panel:not(.has-document) #reader-empty { inset: 0; }
#reader-panel:not(.has-document) #reader-progress { display: none; }
.reader-tools button { min-width: 30px; height: 28px; padding: 0 7px; }
.reader-tools i { flex: 1; }
.reader-tools label { width: 48px; }
.reader-tool-group { display: flex; align-items: center; gap: 4px; flex: none; }
.reader-tool-group[hidden], .reader-tools [hidden] { display: none !important; }
/* 桌面端书目入口改造：并入顶栏槽位时书目工具组排到目录之前；移动端 DOM 顺序不变。 */
body.reader-tools-in-menubar .reader-tools .reader-tool-group[data-reader-feature="catalog"] { order: -1; }
/* 书目按钮：书本图标 + 当前书名（JS 同步），超长省略号截断。 */
.reader-tool-group[data-reader-feature="catalog"] button {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 168px; /* 书名截断上限，超出省略号 */
}
.reader-tool-group[data-reader-feature="catalog"] button svg { flex: none; }
#reader-catalog-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 桌面端顶栏原 ＋ 隐藏（加书入口移到书目面板标题行），移动端仍显示。 */
body.reader-tools-in-menubar #reader-add { display: none; }
.reader-document-tools { padding-left: 6px; border-left: 1px solid var(--ui-border); }
#reader-font-size-label { display: none; }
#reader-page {
  width: 100%; height: 28px; padding: 0 6px; text-align: center; outline: none;
  border: 1px solid var(--ui-input-border); border-radius: 8px; background: var(--ui-input-bg); color: var(--ui-text);
  font: 600 12px/1 var(--ui-font-mono);
}
#reader-page:focus { border-color: var(--ui-accent); }
#reader-page-count, #reader-zoom { color: var(--ui-muted); font: 600 10.5px/1 var(--ui-font-mono); white-space: nowrap; }

.reader-progress {
  position: absolute; z-index: 5; left: 8px; right: 8px; bottom: 8px;
  height: 32px; min-height: 32px; padding: 0 8px;
  display: flex; align-items: center; gap: 8px;
  /* 透明悬浮：无明显底板与投影，仅留轻磨砂保证文字可读。 */
  border: 1px solid color-mix(in srgb, var(--ui-border) 24%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-panel) 40%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
}
.reader-progress[hidden] { display: none !important; }
.reader-progress button { min-width: 28px; height: 26px; padding: 0; flex: none; }
.reader-progress-track {
  flex: 1; min-width: 48px; height: 4px; overflow: hidden; border-radius: 999px;
  background: color-mix(in srgb, var(--ui-border) 78%, transparent);
}
#reader-progress-bar {
  height: 100%; width: 0; max-width: 100%; border-radius: inherit;
  background: var(--ui-accent);
}
.reader-page-field { width: 44px; flex: none; }
.reader-page-field[hidden], .reader-progress [hidden] { display: none !important; }
/* 条体透明后，裸文本需要自带轻磨砂底才能压住任意书页内容。 */
#reader-page-count, #reader-progress-label {
  padding: 3px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--ui-panel) 72%, transparent);
}
#reader-progress-label {
  flex: none; max-width: min(140px, 26vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ui-muted); font: 650 10.5px/1 var(--ui-font-mono);
}

/* 文档抽屉：覆盖阅读内容，不改变 Adapter 的实际可用尺寸。 */
.reader-library {
  position: absolute; z-index: 7; inset: 58px auto 0 0; width: min(370px, 82%);
  display: flex; flex-direction: column; min-height: 0;
  color: var(--ui-text); background: color-mix(in srgb, var(--ui-panel) 98%, var(--ui-bg));
  border-right: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-aux);
}
.reader-library[hidden] { display: none; }
.reader-library-head {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.reader-library-head strong { flex: 1; color: var(--ui-text); font-size: 13px; }
.reader-library-head span { color: var(--ui-muted); font: 650 10px/1 var(--ui-font-mono); }
.reader-library-head .reader-library-close {
  flex: none; min-width: 48px; height: 30px; padding: 0 10px;
  border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-text);
  background: var(--ui-panel); cursor: pointer; font: 700 10.5px/1 var(--ui-font);
}
.reader-library-head .reader-library-close:hover,
.reader-library-head .reader-library-close:focus-visible {
  color: var(--ui-text); border-color: var(--ui-accent); outline: none; background: var(--ui-hover-bg);
}
.reader-document-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.reader-document-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 4px; border: 1px solid transparent; border-radius: 11px; }
.reader-document-row + .reader-document-row { margin-top: 4px; }
.reader-document-row.is-active { border-color: color-mix(in srgb, var(--ui-accent) 46%, var(--ui-border)); background: var(--ui-pressed-bg); }
.reader-document-open {
  min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 9px;
  padding: 8px; text-align: left; appearance: none; border: 0; border-radius: 8px; color: var(--ui-text); background: transparent; cursor: pointer;
}
.reader-document-open > span:last-child { min-width: 0; }
.reader-document-copy { min-width: 0; }
.reader-document-open strong, .reader-document-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-document-open strong { color: var(--ui-text); font-size: 12px; }
.reader-document-open small { margin-top: 4px; color: var(--ui-muted); font-size: 10px; }
.reader-document-meta { display: flex !important; align-items: center; gap: 6px; }
.reader-document-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reader-storage-status {
  flex: none; padding: 2px 5px; border: 1px solid var(--ui-border); border-radius: 999px;
  color: var(--ui-muted); background: var(--ui-bg); font: 750 8.5px/1 var(--ui-font);
}
.reader-storage-status.is-persistent {
  color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
}
.reader-storage-status.is-temporary {
  color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 42%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}
.reader-storage-status.is-missing {
  color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 42%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}
.reader-document-format {
  display: grid; place-items: center; width: 42px; height: 34px; border-radius: 7px;
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, transparent); font: 800 9px/1 var(--ui-font-mono);
}
.reader-document-row.is-active .reader-document-format { color: var(--ui-primary-text); background: var(--ui-accent); border-color: transparent; }
.reader-document-reconnect { align-self: center; min-height: 32px; padding: 0 8px; }
.reader-library-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px;
  border-top: 1px solid var(--ui-border); background: var(--ui-bg);
}
.reader-library-actions .btn { min-height: 34px; }
.reader-library-actions [data-library-action="release"] { grid-column: 1 / -1; }

/* 阅读集：抽屉只保留一列，通过两级视图切换阅读集与当前集书单。 */
.reader-collection-switch {
  min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 5px 8px; text-align: left; border: 0; border-radius: 8px; color: var(--ui-text);
  background: transparent; cursor: pointer;
}
.reader-collection-switch:hover, .reader-collection-switch:focus-visible { outline: none; background: var(--ui-hover-bg); }
.reader-collection-switch span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); font: 750 13px/1.1 var(--ui-font); }
.reader-collection-switch small { color: var(--ui-muted); font: 650 9px/1 var(--ui-font); }
.reader-library-level { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.reader-library-level[hidden] { display: none; }
.reader-sync-anchor { display: none !important; }
.reader-library-section-head {
  min-height: 42px; flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-bg) 80%, transparent);
}
.reader-library-section-head strong { flex: 1; color: var(--ui-text); font-size: 11px; }
.reader-library-section-head .btn { min-height: 30px; padding: 0 10px; }
.reader-library-back { padding: 6px 8px; border: 0; color: var(--ui-accent); background: transparent; cursor: pointer; font: 750 10.5px/1 var(--ui-font); }
.reader-collection-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.reader-collection-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px;
  padding: 4px; border: 1px solid transparent; border-radius: 11px;
}
.reader-collection-row + .reader-collection-row { margin-top: 4px; }
.reader-collection-row.is-active { border-color: color-mix(in srgb, var(--ui-accent) 46%, var(--ui-border)); background: var(--ui-pressed-bg); }
.reader-collection-open {
  min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px;
  padding: 8px; text-align: left; border: 0; border-radius: 8px; color: var(--ui-text); background: transparent; cursor: pointer;
}
.reader-collection-open:disabled { cursor: default; opacity: .82; }
.reader-collection-open > span:last-child { min-width: 0; }
.reader-collection-open strong, .reader-collection-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-collection-open strong { color: var(--ui-text); font-size: 12px; }
.reader-collection-open small { margin-top: 4px; color: var(--ui-muted); font-size: 10px; }
.reader-collection-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent); font: 800 10px/1 var(--ui-font);
}
.reader-collection-row.is-active .reader-collection-mark { color: var(--ui-primary-text); border-color: transparent; background: var(--ui-accent); }
.reader-library-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; border-top: 1px solid var(--ui-border); }
.reader-library-secondary-actions .btn { min-height: 36px; }
.reader-list-message, .reader-recovery-note { margin: 0; padding: 18px 14px; color: var(--ui-muted); font-size: 10.5px; line-height: 1.55; text-align: center; }
.reader-recovery-note { padding-block: 10px; text-align: left; border-bottom: 1px solid var(--ui-border); }
.reader-general-empty { padding: 12px 8px; text-align: left; }
.reader-general-empty strong { color: var(--ui-text); font-size: 12px; }
.reader-general-empty p { margin: 7px 0 0; color: var(--ui-muted); font-size: 10.5px; line-height: 1.6; }

.reader-document-row { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; }
.reader-document-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.reader-document-sort-actions { display: none; align-items: center; gap: 3px; }
.reader-sort-mode .reader-document-sort-actions { display: flex; }
.reader-document-sort-actions button, .reader-removed-actions button, .reader-row-menu-list button,
.reader-recovery-actions button {
  min-height: 30px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 7px;
  color: var(--ui-text); background: var(--ui-panel); cursor: pointer; font: 700 9.5px/1 var(--ui-font);
}
.reader-document-sort-actions button:disabled { opacity: .4; cursor: default; }
.reader-row-menu { position: relative; }
.reader-row-menu > summary {
  min-width: 34px; min-height: 32px; display: grid; place-items: center; list-style: none; padding: 0 7px;
  border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-muted); background: var(--ui-panel);
  cursor: pointer; font: 700 9.5px/1 var(--ui-font);
}
.reader-row-menu > summary::-webkit-details-marker { display: none; }
.reader-row-menu-list {
  position: absolute; z-index: 4; top: calc(100% + 4px); right: 0; width: max-content; min-width: 154px;
  display: grid; gap: 5px; padding: 6px; border: 1px solid var(--ui-border); border-radius: 10px;
  background: var(--ui-panel); box-shadow: var(--ui-shadow);
}
.reader-row-menu-list button { width: 100%; min-height: 34px; text-align: left; }
.reader-row-menu-list button.is-danger, .reader-removed-actions button.is-danger, .reader-recovery-actions button.is-danger { color: var(--ui-danger); }
.reader-removed-section { flex: none; max-height: 42%; overflow: hidden; border-top: 1px solid var(--ui-border); }
.reader-removed-section[hidden] { display: none; }
.reader-removed-section > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ui-text); cursor: pointer; font: 750 10.5px/1 var(--ui-font); }
.reader-removed-section > summary small { margin-left: auto; color: var(--ui-muted); }
.reader-removed-section[open] { display: flex; flex-direction: column; }
.reader-removed-section .reader-document-list { flex: 1; }
.reader-document-row.is-removed { grid-template-columns: minmax(0, 1fr); opacity: .9; }
.reader-document-row.is-removed .reader-document-open { cursor: default; }
.reader-removed-actions, .reader-recovery-actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px 61px; }
.reader-recovery-row { padding: 10px; border-bottom: 1px solid var(--ui-border); }
.reader-recovery-copy strong, .reader-recovery-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.reader-recovery-copy strong { color: var(--ui-text); font-size: 11px; }
.reader-recovery-copy small { margin-top: 5px; color: var(--ui-muted); font-size: 9.5px; line-height: 1.4; }
.reader-recovery-actions { padding: 8px 0 0; }

/* 阅读集总览：独立于右侧 Reader 的顶层树面板，覆盖画布但不改变画布可用宽度。 */
#reader-library.reader-library {
  position: fixed; z-index: var(--z-reader);
  inset: calc(var(--menubar-h) + 16px) auto 20px 20px;
  box-sizing: border-box; width: min(476px, calc(100vw - 40px)); min-width: 0; min-height: 0;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: 16px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel) 96%, var(--ui-bg));
  box-shadow: var(--ui-shadow);
}
#reader-library.reader-library[hidden] { display: none; }
#reader-library .reader-library-head {
  min-height: 58px; flex: none; padding: 7px 11px 7px 16px; gap: 8px;
  background: color-mix(in srgb, var(--ui-panel) 88%, var(--ui-bg));
}
#reader-library .reader-library-head > strong,
#reader-library .reader-library-title {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ui-text); font: 850 17px/1.2 var(--ui-font); letter-spacing: .035em;
}
#reader-library .reader-library-head > button,
#reader-library .reader-library-head .reader-library-close,
#reader-library .reader-library-head .reader-library-new,
#reader-library .reader-library-head .reader-library-search-toggle {
  min-width: 36px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 10px; color: var(--ui-text);
  background: transparent; cursor: pointer; font: 800 14px/1 var(--ui-font);
}
#reader-library .reader-library-head > button:hover,
#reader-library .reader-library-head > button:focus-visible {
  outline: none; color: var(--ui-text); border-color: var(--ui-border); background: var(--ui-hover-bg);
}
#reader-library .reader-library-head > button:focus-visible,
#reader-library button:focus-visible,
#reader-library summary:focus-visible,
#reader-library input:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: -2px;
}

#reader-library .reader-library-search {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 7px;
  padding: 10px 12px; border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-bg) 76%, transparent);
}
#reader-library .reader-library-search[hidden] { display: none; }
#reader-library .reader-library-search input {
  min-width: 0; height: 46px; padding: 0 13px; border: 1px solid var(--ui-input-border);
  border-radius: 10px; outline: none; color: var(--ui-text); background: var(--ui-input-bg);
  font: 650 13px/1 var(--ui-font);
}
#reader-library .reader-library-search input::placeholder { color: var(--ui-muted); }
#reader-library .reader-library-search button {
  width: 52px; height: 46px; padding: 0; border: 1px solid var(--ui-border); border-radius: 10px;
  color: var(--ui-muted); background: var(--ui-panel); cursor: pointer; font-size: 11px;
}
#reader-library .reader-library-search .reader-library-new-wide {
  grid-column: 1 / -1; width: 100%; min-height: 46px; color: var(--ui-primary-text); border-color: transparent;
  background: var(--ui-accent);
  font: 800 13.5px/1 var(--ui-font); letter-spacing: .02em;
}
#reader-library .reader-library-search .reader-library-new-wide:disabled { opacity: .45; cursor: not-allowed; }

#reader-library .reader-library-notice {
  flex: none; margin: 8px 10px 0; padding: 8px 10px; border: 1px solid var(--ui-border);
  border-radius: 10px; color: var(--ui-muted);
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-bg));
  font: 650 10px/1.5 var(--ui-font);
}
#reader-library .reader-library-notice[hidden] { display: none; }

/* 普通导图入口固定；阅读集树独立滚动，底部回收/恢复入口始终可达。 */
#reader-library .reader-library-general,
#reader-library [data-reader-library-general] {
  flex: none; padding: 8px 10px; border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-bg) 62%, transparent);
}
#reader-library .reader-tree {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 8px 10px 14px; scrollbar-width: thin;
}
#reader-library .reader-tree[hidden] { display: none; }
#reader-library .reader-tree-row {
  position: relative; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 3px 8px; border: 1px solid transparent; border-radius: 9px;
  color: var(--ui-text); background: transparent; text-align: left;
  font: 680 13.5px/1.25 var(--ui-font);
}
button.reader-tree-row, summary.reader-tree-row { appearance: none; cursor: pointer; list-style: none; }
summary.reader-tree-row::-webkit-details-marker { display: none; }
#reader-library .reader-tree-row:hover { color: var(--ui-text); background: var(--ui-hover-bg); }
#reader-library .reader-tree-row.is-current,
#reader-library .reader-tree-row[aria-current="true"],
#reader-library .reader-tree-row[data-current="true"] {
  color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-pressed-bg) 68%, transparent);
}
#reader-library .reader-tree-book.is-active,
#reader-library .reader-tree-book[aria-current="page"],
#reader-library .reader-tree-row[data-active-document="true"] {
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 26%, var(--ui-border));
  border-left: 3px solid var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-panel));
  box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--ui-accent) 58%, transparent);
}
#reader-library .reader-tree-caret {
  position: relative; width: 28px; height: 36px; flex: none; display: grid; place-items: center;
  border: 0; color: var(--ui-muted); background: transparent; cursor: pointer;
  font: 900 12px/1 var(--ui-font); transition: transform var(--anim-fast), color var(--anim-fast);
}
#reader-library [aria-expanded="true"] > .reader-tree-caret,
#reader-library .is-expanded > .reader-tree-caret { transform: rotate(90deg); color: var(--ui-accent); }
#reader-library .reader-tree-name {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#reader-library button.reader-tree-name {
  appearance: none; padding: 0; border: 0; color: inherit; background: transparent;
  cursor: pointer; text-align: left; font: inherit;
}
#reader-library .reader-tree-document { display: flex; align-items: center; gap: 8px; }
#reader-library .reader-tree-format {
  min-width: 34px; height: 28px; padding: 0 5px; flex: none; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border)); border-radius: 7px;
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  font: 800 8px/1 var(--ui-font-mono); letter-spacing: 0;
}
#reader-library .reader-tree-format.is-converted {
  min-width: 58px; font-size: 7.5px; letter-spacing: -0.02em;
}
#reader-library .reader-tree-document-copy { min-width: 0; display: block; }
#reader-library .reader-tree-document-copy strong,
#reader-library .reader-tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reader-library .reader-tree-document-copy strong { color: inherit; font-size: 11.5px; }
#reader-library .reader-tree-document-copy small { margin-top: 3px; color: var(--ui-muted); font-size: 9.5px; }
#reader-library .reader-tree-book.is-active .reader-tree-format { color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border)); background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }
#reader-library .reader-tree-book.is-active .reader-tree-document-copy small { color: var(--ui-muted); }
#reader-library .reader-tree-meta {
  flex: none; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ui-muted); font: 650 9.5px/1 var(--ui-font-mono);
}
#reader-library .reader-tree-book.is-active .reader-tree-meta { color: var(--ui-accent); }
#reader-library .reader-tree-menu {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; color: var(--ui-muted); background: transparent; cursor: pointer;
}
#reader-library .reader-tree-menu:hover { color: var(--ui-text); background: var(--ui-hover-bg); }
#reader-library .reader-tree-book.is-active .reader-tree-menu { color: var(--ui-accent); }

#reader-library .reader-tree-section {
  width: calc(100% - 28px); min-height: 46px; margin-left: 28px; padding-left: 13px;
  color: var(--ui-text); font-weight: 800;
}
#reader-library .reader-tree-section .reader-tree-menu { width: auto; min-width: 36px; padding-inline: 8px; }
#reader-library .reader-search-result-group + .reader-search-result-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-border); }
#reader-library .reader-tree-book {
  width: calc(100% - 48px); min-height: 52px; margin-left: 48px; padding-left: 13px;
}
#reader-library .reader-tree-group,
#reader-library [role="group"] { position: relative; }
#reader-library .reader-tree-group::before,
#reader-library [role="group"]::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 12px; left: 41px; width: 1px;
  background: color-mix(in srgb, var(--ui-border) 62%, transparent); pointer-events: none;
}
#reader-library .reader-tree-section::before,
#reader-library .reader-tree-book::before {
  content: ""; position: absolute; top: 50%; left: -7px; width: 11px; height: 1px;
  background: color-mix(in srgb, var(--ui-border) 68%, transparent); pointer-events: none;
}
#reader-library .reader-tree-book::after {
  content: ""; width: 5px; height: 5px; flex: none; order: -1; border-radius: 50%;
  background: color-mix(in srgb, var(--ui-muted) 72%, transparent);
}
#reader-library .reader-tree-book.is-active::after { background: var(--ui-accent); }

#reader-library .reader-tree-footer {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px;
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 91%, var(--ui-bg));
}
#reader-library .reader-tree-footer button {
  min-width: 0; min-height: 46px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--ui-border); border-radius: 10px; color: var(--ui-text);
  background: var(--ui-panel); cursor: pointer; font: 750 10.5px/1 var(--ui-font);
}
#reader-library .reader-tree-footer button:hover { color: var(--ui-text); border-color: var(--ui-accent); }

/* 新树装配期间兼容既有列表行，避免旧视图短暂退回卡片式抽屉。 */
#reader-library .reader-collection-list,
#reader-library .reader-document-list { scrollbar-width: thin; }
#reader-library .reader-collection-row,
#reader-library .reader-document-row { border-radius: 9px; }
#reader-library .reader-collection-row.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-pressed-bg) 68%, transparent);
}
#reader-library .reader-document-row.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 26%, var(--ui-border)); color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-panel));
}
#reader-library .reader-document-row.is-active strong,
#reader-library .reader-document-row.is-active small,
#reader-library .reader-document-row.is-active .reader-storage-status { color: var(--ui-accent); }

/* 阅读集对话框：原生 dialog 提供焦点陷阱、Esc 与关闭后的焦点回归。 */
.reader-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; max-height: min(82dvh, 720px); padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-dialog-radius); color: var(--ui-text); background: var(--ui-panel); box-shadow: var(--ui-shadow); }
.reader-dialog::backdrop { background: var(--ui-scrim); }
.reader-dialog-card { min-width: 0; max-height: min(82dvh, 720px); display: flex; flex-direction: column; margin: 0; }
.reader-dialog-card > header { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--ui-border); }
.reader-dialog-card > header > div { min-width: 0; flex: 1; }
.reader-dialog-card h2 { margin: 0; color: var(--ui-text); font-size: 15px; }
.reader-dialog-card header p { margin: 5px 0 0; color: var(--ui-muted); font-size: 10.5px; line-height: 1.45; }
.reader-dialog-card header button { width: 34px; height: 34px; flex: none; border: 1px solid var(--ui-border); border-radius: 9px; color: var(--ui-muted); background: var(--ui-panel); cursor: pointer; }
.reader-dialog [hidden] { display: none !important; }
.reader-dialog-body, .reader-batch-list { min-height: 0; overflow: auto; padding: 14px 16px; }
.reader-dialog-message { margin: 0; color: var(--ui-text); font-size: 12px; line-height: 1.65; }
.reader-dialog-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--ui-border); background: var(--ui-bg); }
.reader-dialog-actions .btn { min-height: 38px; }
.reader-dialog-actions .btn.danger { color: var(--ui-primary-text); border-color: color-mix(in srgb, var(--ui-danger) 74%, #000); background: var(--ui-danger); }
.reader-dialog-error { flex: 1; margin: 0; color: var(--ui-danger); font-size: 10px; }
.reader-dialog-field { display: grid; gap: 7px; color: var(--ui-text); font: 700 10.5px/1.3 var(--ui-font); }
.reader-dialog-field + .reader-dialog-field { margin-top: 12px; }
.reader-dialog-field input:not([type="checkbox"]):not([type="radio"]),
.reader-dialog-field select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--ui-input-border); border-radius: 9px; color: var(--ui-text); background: var(--ui-input-bg); }
.reader-dialog-field input[type="checkbox"],
.reader-dialog-field input[type="radio"] {
  width: 16px; height: 16px; min-height: 0; margin-top: 2px; padding: 0;
  accent-color: var(--ui-accent); flex: none;
}
.reader-dialog-field:has(> input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: 8px; font-weight: 650;
}
.reader-forget-book { display: grid; gap: 12px; }
.reader-forget-book .btn { justify-self: start; min-height: 38px; }
.reader-ownership fieldset, .reader-import-preview fieldset { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; border: 0; }
.reader-ownership legend, .reader-import-preview legend { margin-bottom: 8px; color: var(--ui-text); font-size: 11px; font-weight: 800; }
.reader-ownership fieldset label, .reader-import-preview fieldset label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 10px; cursor: pointer; background: var(--ui-bg); transition: border-color var(--anim-fast), background var(--anim-fast), transform var(--anim-fast); }
.reader-ownership fieldset label:hover, .reader-import-preview fieldset label:hover { border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border)); }
.reader-ownership fieldset label:has(input:checked), .reader-import-preview fieldset label:has(input:checked) {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-bg));
}
.reader-ownership fieldset label:active, .reader-import-preview fieldset label:active { transform: scale(.99); }
.reader-ownership fieldset label:focus-within, .reader-import-preview fieldset label:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.reader-ownership label.is-disabled, .reader-import-preview label.is-disabled { opacity: .5; cursor: default; }
.reader-ownership input[type="radio"], .reader-import-preview input[type="radio"] { margin-top: 2px; accent-color: var(--ui-accent); }
.reader-ownership strong, .reader-ownership small, .reader-import-preview strong, .reader-import-preview small { display: block; }
.reader-ownership strong, .reader-import-preview strong { color: var(--ui-text); font-size: 11px; }
.reader-ownership small, .reader-import-preview small { margin-top: 4px; color: var(--ui-muted); font-size: 9.5px; line-height: 1.5; }
.reader-word-bg fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.reader-word-bg label {
  display: grid; grid-template-columns: 16px 44px minmax(0, 1fr); gap: 10px; align-items: start;
  min-height: 72px; padding: 11px 12px; border: 1px solid var(--ui-border); border-radius: 12px;
  cursor: pointer; background: transparent;
  transition: border-color var(--anim-fast), background var(--anim-fast), transform var(--anim-fast);
}
.reader-word-bg label:hover { border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border)); background: var(--ui-hover-bg); }
.reader-word-bg label:has(input:checked) {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-panel));
}
.reader-word-bg label:active { transform: scale(.99); }
.reader-word-bg label:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.reader-word-bg input[type="radio"] { margin-top: 4px; accent-color: var(--ui-accent); }
.reader-word-bg strong {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
  color: var(--ui-text); font-size: 12px; font-weight: 800;
}
.reader-word-bg strong em {
  font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ui-accent);
}
.reader-word-bg small {
  display: block; margin-top: 4px; max-width: 42em;
  color: var(--ui-muted); font-size: 10px; line-height: 1.55; text-wrap: pretty;
}
.reader-word-bg-swatch {
  width: 44px; height: 52px; display: grid; align-content: start; gap: 5px;
  padding: 8px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ui-border);
}
.reader-word-bg-swatch[data-kind="adaptive"] { background: #f2ead8; }
.reader-word-bg-swatch[data-kind="original"] { background: #f7f7f5; }
.reader-word-bg-line {
  height: 3px; border-radius: 99px;
  background: color-mix(in srgb, #3b2f20 34%, transparent);
}
.reader-word-bg-swatch[data-kind="original"] .reader-word-bg-line {
  background: color-mix(in srgb, #1a1a1a 26%, transparent);
}
.reader-word-bg-line.is-short { width: 58%; }
html[data-theme="dark"] .reader-word-bg-swatch[data-kind="adaptive"] { background: #1b2438; }
html[data-theme="dark"] .reader-word-bg-swatch[data-kind="adaptive"] .reader-word-bg-line {
  background: color-mix(in srgb, #d7e2ff 38%, transparent);
}
.reader-import-preview dl { display: grid; gap: 6px; margin: 0 0 12px; }
.reader-import-preview dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.reader-import-preview dt { color: var(--ui-muted); font-size: 10px; }
.reader-import-preview dd { margin: 0; color: var(--ui-text); font-size: 10.5px; }
.reader-import-books { display: grid; gap: 4px; max-height: 112px; margin-bottom: 14px; overflow: auto; }
.reader-import-books span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); font-size: 9.5px; }
.reader-overwrite-confirm { display: flex; align-items: flex-start; gap: 8px; color: var(--ui-danger); font-size: 10.5px; line-height: 1.45; }
.reader-batch-list { display: grid; gap: 6px; }
.reader-batch-engine {
  flex: none; display: grid; gap: 8px; margin: 12px 16px 0; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border));
  border-radius: 12px; background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-bg));
}
.reader-batch-engine[hidden] { display: none !important; }
.reader-batch-engine strong {
  display: flex; align-items: center; gap: 8px; color: var(--ui-text); font-size: 12px;
}
.reader-batch-engine strong::before {
  content: ""; width: 12px; height: 12px; flex: none;
  border: 2px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
  border-top-color: var(--ui-accent); border-radius: 50%;
  animation: reader-batch-spin .8s linear infinite;
}
.reader-batch-engine p { margin: 0; color: var(--ui-muted); font-size: 10.5px; line-height: 1.55; }
.reader-batch-engine small { color: var(--ui-text); font-size: 10px; }
.reader-batch-engine progress,
.reader-batch-progress {
  width: 100%; height: 8px; margin: 0; border: 0; accent-color: var(--ui-accent);
}
.reader-batch-progress { height: 6px; margin-top: 6px; }
@keyframes reader-batch-spin { to { transform: rotate(360deg); } }
.reader-batch-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; padding: 9px; border: 1px solid var(--ui-border); border-radius: 10px; }
.reader-batch-row strong, .reader-batch-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-batch-row strong { color: var(--ui-text); font-size: 10.5px; }
.reader-batch-row small { margin-top: 4px; color: var(--ui-muted); font-size: 9.5px; }
.reader-batch-state { display: grid; place-items: center; min-height: 18px; margin-top: 1px; color: var(--ui-accent); font-weight: 900; }
.reader-batch-row[data-phase="failed"] .reader-batch-state { color: var(--ui-danger); }
.reader-batch-row[data-phase="added"] .reader-batch-state, .reader-batch-row[data-phase="restored"] .reader-batch-state { color: var(--ui-success); }
.reader-local-scope {
  display: flex; align-items: center; gap: 7px; flex: none; padding: 8px 14px;
  border-bottom: 1px solid var(--ui-border); color: var(--ui-muted);
  background: color-mix(in srgb, var(--ui-bg) 86%, transparent);
  font: 650 10px/1.2 var(--ui-font);
}
.reader-local-scope strong { color: var(--ui-text); font-size: 10.5px; }
.reader-local-scope-state { margin-left: auto; color: var(--ui-muted); white-space: nowrap; }
.reader-local-scope-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ui-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ui-accent) 65%, transparent);
}
.reader-local-scope[data-sync-state="dirty"] .reader-local-scope-dot,
.reader-local-scope[data-sync-state="saving"] .reader-local-scope-dot,
.reader-local-scope[data-sync-state="remote-ahead"] .reader-local-scope-dot { background: var(--ui-accent); }
.reader-local-scope[data-sync-state="conflict"] .reader-local-scope-dot,
.reader-local-scope[data-sync-state="blocked"] .reader-local-scope-dot { background: var(--ui-danger); box-shadow: 0 0 8px color-mix(in srgb, var(--ui-danger) 65%, transparent); }

/* 目录/检索/书目/书签/设置侧栏：贴齐阅读区顶边（阅读区已在顶栏之下），标题行与 --menubar-h 同高。 */
.reader-tool-view {
  position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(390px, 58%);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--ui-panel); border-left: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-aux);
}
#reader-panel.has-document .reader-tool-view { bottom: 48px; }
.reader-tool-view[hidden], .reader-tool-view [hidden] { display: none !important; }
.reader-tool-view-head {
  min-height: var(--menubar-h); height: var(--menubar-h); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 14px; border-bottom: 1px solid var(--ui-border);
}
.reader-tool-view-head strong { flex: 1; color: var(--ui-text); font-size: 13px; }
.reader-tool-view-head button { width: 28px; height: 28px; }
/* 桌面端书目面板标题行的 ＋：仅桌面（工具条并入顶栏）且书目视图打开时显示。 */
#reader-catalog-add { display: none; }
body.reader-tools-in-menubar #reader-tool-view[data-active="documents"] #reader-catalog-add { display: inline-block; }
.reader-tool-view [data-view-panel] { min-height: 0; overflow: auto; padding: 10px; }
.reader-side-list { display: flex; flex-direction: column; gap: 4px; }
.reader-empty-list { display: grid; place-items: center; min-height: 92px; color: var(--ui-muted); font-size: 11px; text-align: center; }
#reader-catalog-list .reader-catalog-item {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px;
  border: 1px solid transparent; background: transparent; white-space: normal;
}
#reader-catalog-list .reader-catalog-item.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 46%, var(--ui-border));
  background: var(--ui-pressed-bg); color: var(--ui-text);
}
#reader-catalog-list .reader-tree-format {
  min-width: 34px; height: 28px; padding: 0 5px; flex: none; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border)); border-radius: 7px;
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  font: 800 8px/1 var(--ui-font-mono); letter-spacing: 0;
}
#reader-catalog-list .reader-tree-format.is-converted { min-width: 58px; font-size: 7.5px; letter-spacing: -0.02em; }
#reader-catalog-list .reader-tree-document-copy { min-width: 0; flex: 1; display: block; overflow: hidden; }
#reader-catalog-list .reader-tree-document-copy strong,
#reader-catalog-list .reader-tree-document-copy small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#reader-catalog-list .reader-tree-document-copy strong { color: inherit; font-size: 11.5px; }
#reader-catalog-list .reader-tree-document-copy small { margin-top: 3px; color: var(--ui-muted); font-size: 9.5px; }
.reader-side-action {
  width: 100%; min-height: 36px; padding: 8px 10px 8px calc(10px + var(--reader-list-depth, 0) * 14px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  appearance: none; border: 1px solid transparent; border-radius: 8px; color: var(--ui-text); background: transparent; cursor: pointer;
}
.reader-side-action:hover, .reader-side-action:focus-visible { outline: none; border-color: var(--ui-border); background: var(--ui-hover-bg); color: var(--ui-text); }
.reader-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 10px; }
.reader-search-form input, .reader-settings-grid select, .reader-narration-grid select,
.reader-ocr-range input {
  min-width: 0; height: 35px; padding: 0 9px; outline: none;
  border: 1px solid var(--ui-input-border); border-radius: 8px; background: var(--ui-input-bg); color: var(--ui-text); font: 600 11px/1 var(--ui-font);
}
.reader-search-form input:focus, .reader-settings-grid select:focus, .reader-narration-grid select:focus,
.reader-ocr-range input:focus { border-color: var(--ui-accent); }
.reader-search-form button { min-width: 52px; }
.reader-tool-note { margin: 0 0 10px; color: var(--ui-muted); font-size: 10.5px; line-height: 1.55; }
.reader-ocr-form { display: grid; gap: 12px; }
.reader-ocr-form fieldset { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: 9px; }
.reader-ocr-form legend { padding: 0 5px; color: var(--ui-text); font-size: 10.5px; font-weight: 700; }
.reader-ocr-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reader-ocr-range label { display: grid; gap: 5px; color: var(--ui-muted); font-size: 10.5px; }
.reader-ocr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reader-ocr-actions .btn { min-height: 36px; }
.reader-ocr-actions #reader-ocr-clear { grid-column: 1 / -1; }
.reader-ocr-status { margin-top: 12px; padding: 10px; border-radius: 8px; color: var(--ui-text); background: var(--ui-bg); font-size: 10.5px; line-height: 1.55; }
#reader-ocr-progress { width: 100%; height: 8px; margin: 10px 0 2px; accent-color: var(--ui-accent); }
.reader-add-bookmark { width: 100%; margin-bottom: 9px; }
.reader-bookmark-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.reader-bookmark-focus { min-width: 0; padding: 8px 10px; text-align: left; }
.reader-bookmark-focus strong, .reader-bookmark-focus small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-bookmark-focus small { margin-top: 3px; color: var(--ui-muted); font-size: 9.5px; }
.reader-bookmark-delete { width: 34px; }
.reader-settings-extra { display: flex; gap: 8px; }
.reader-settings-extra .btn { flex: 1; min-height: 36px; }
.reader-settings-grid, .reader-narration-grid { display: grid; gap: 12px; }
.reader-settings-grid label, .reader-narration-grid > label { display: grid; gap: 6px; color: var(--ui-muted); font-size: 10.5px; }
.reader-settings-grid output, .reader-narration-grid output { justify-self: end; margin-top: -18px; color: var(--ui-text); font: 650 10px/1 var(--ui-font-mono); }
.reader-settings-grid input[type="range"], .reader-narration-grid input[type="range"] { width: 100%; accent-color: var(--ui-accent); }
.reader-narration-grid small { color: var(--ui-danger); line-height: 1.5; }
.reader-playback { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; }
.reader-playback button { min-height: 36px; }
.reader-check { grid-template-columns: auto 1fr !important; align-items: start; }
.reader-check input { margin-top: 2px; accent-color: var(--ui-accent); }
.reader-word-bg-setting { display: grid; gap: 7px; }
.reader-word-bg-setting > span { color: var(--ui-muted); font-size: 10.5px; }
.reader-word-bg-setting .reader-check {
  padding: 10px; border: 1px solid var(--ui-border); border-radius: 10px;
  background: var(--ui-bg); cursor: pointer;
  transition: border-color var(--anim-fast), background var(--anim-fast);
}
.reader-word-bg-setting .reader-check:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
}
.reader-word-bg-setting .reader-check:has(input:checked) {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-bg));
}
.reader-word-bg-setting .reader-check:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.reader-word-bg-setting strong { display: block; color: var(--ui-text); font-size: 11px; font-weight: 800; }
.reader-word-bg-setting small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 9.5px; line-height: 1.5; text-wrap: pretty; }
#reader-narration-status { margin: 0; padding: 9px; border-radius: 8px; color: var(--ui-muted); background: var(--ui-bg); font-size: 10.5px; }

#reader-host { position: relative; flex: 1; min-height: 0; background: #f2ead8; overflow: hidden; }
#reader-host iframe { display: block; width: 100%; height: 100%; border: 0; background: #f2ead8; }
#reader-empty {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  padding: 22px; background: color-mix(in srgb, var(--ui-panel) 96%, transparent);
}
#reader-panel.has-document #reader-empty { display: none; }
.reader-empty-card { max-width: 330px; text-align: center; }
.reader-empty-mark {
  width: 62px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 48%, transparent); border-radius: 8px 16px 8px 8px;
  color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 9%, transparent); font: 850 13px/1 var(--ui-font-mono);
}
.reader-empty-card h2 { margin: 0; font-size: 17px; }
.reader-empty-card p { margin: 8px auto 18px; color: var(--ui-muted); font-size: 12.5px; line-height: 1.7; }
.reader-empty-card .reader-origin-note { margin-top: -8px; font-size: 10.5px; }
.reader-origin-note code { color: var(--ui-accent); font: inherit; }
.reader-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

#reader-targets { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 18px; background: rgba(4, 8, 18, .65); }
#reader-targets[hidden] { display: none; }
.reader-target-dialog { width: min(390px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden; background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: var(--ui-dialog-radius); box-shadow: var(--ui-shadow); }
.reader-target-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--ui-border); }
.reader-target-head strong { flex: 1; font-size: 13px; }
.reader-target-head button { width: 32px; height: 32px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-muted); background: var(--ui-panel); cursor: pointer; }
.reader-target-list { overflow: auto; padding: 8px; }
.reader-target-list button { width: 100%; display: block; padding: 10px; text-align: left; border: 0; border-radius: 9px; color: var(--ui-text); background: transparent; cursor: pointer; }
.reader-target-list button:hover, .reader-target-list button:focus-visible { background: var(--ui-hover-bg); outline: none; }
.reader-target-list strong, .reader-target-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-target-list span { margin-top: 4px; color: var(--ui-muted); font-size: 11px; }

/* Reader 区域截图预览：PNG 资产仍由 IndexedDB 管理，弹层只持有临时 blob URL。 */
.reader-capture-preview {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: 18px; background: var(--ui-scrim);
}
.reader-capture-preview[hidden] { display: none; }
.reader-capture-preview [hidden] { display: none !important; }
.reader-capture-preview-dialog {
  width: min(720px, 100%); max-height: min(88dvh, 820px); display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-dialog-radius);
  color: var(--ui-text); background: var(--ui-panel); box-shadow: var(--ui-shadow);
}
.reader-capture-preview-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--ui-border); }
.reader-capture-preview-head strong { flex: 1; font-size: 13px; }
.reader-capture-preview-head button { width: 32px; height: 32px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-muted); background: var(--ui-panel); cursor: pointer; }
.reader-capture-preview-body { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 14px; background: color-mix(in srgb, var(--ui-bg) 82%, #000); }
.reader-capture-preview-body img { display: block; max-width: 100%; max-height: min(68dvh, 680px); object-fit: contain; border-radius: 8px; box-shadow: 0 16px 42px rgba(0, 0, 0, .34); }
.reader-capture-preview-source { margin: 0; padding: 10px 14px 0; overflow: hidden; text-overflow: ellipsis; color: var(--ui-muted); font: 650 10px/1.45 var(--ui-font-mono); white-space: nowrap; }
.reader-capture-preview-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px 14px; }

/* 同源多 Tab 冲突：正式写入冻结时不允许点遮罩或 Esc 静默丢弃。 */
.reader-sync-mask {
  box-sizing: border-box;
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: 24px; background: var(--ui-scrim);
}
.reader-sync-mask[hidden] { display: none; }
.reader-sync-dialog {
  box-sizing: border-box; min-width: 0; overflow-wrap: anywhere;
  width: min(620px, calc(100vw - 48px)); max-height: min(82dvh, 720px); overflow: auto;
  padding: 24px; border: 1px solid color-mix(in srgb, var(--ui-danger) 46%, var(--ui-border));
  border-radius: var(--ui-dialog-radius); color: var(--ui-text); background: var(--ui-panel);
  box-shadow: var(--ui-shadow); outline: none;
}
.reader-sync-eyebrow {
  display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, transparent); font: 800 10px/1 var(--ui-font-mono);
  letter-spacing: .1em;
}
.reader-sync-dialog h2 { margin: 14px 0 8px; color: var(--ui-text); font-size: 20px; line-height: 1.35; }
.reader-sync-dialog > p { margin: 0; color: var(--ui-muted); font-size: 12.5px; line-height: 1.7; }
.reader-sync-summary {
  margin: 16px 0; padding: 12px 12px 12px 30px; border: 1px solid var(--ui-border);
  border-radius: var(--ui-button-radius); background: var(--ui-bg); color: var(--ui-text);
  font-size: 12px; line-height: 1.6;
}
.reader-sync-recovery { color: var(--ui-accent) !important; }
.reader-sync-recovery.is-warning { color: var(--ui-danger) !important; }
.reader-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.reader-sync-action {
  min-height: 38px; padding: 0 13px; appearance: none; border: 1px solid var(--ui-border);
  border-radius: var(--ui-button-radius); color: var(--ui-text); background: var(--ui-panel);
  cursor: pointer; font: 700 12px/1 var(--ui-font);
}
.reader-sync-action:hover, .reader-sync-action:focus-visible { color: var(--ui-text); border-color: var(--ui-accent); outline: none; }
.reader-sync-action:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }
.reader-sync-action.is-primary { color: var(--ui-primary-text); border-color: transparent; background: var(--ui-accent); }
.reader-sync-action.is-secondary { margin-left: auto; }
.reader-sync-action:disabled { opacity: .55; cursor: wait; }
.reader-sync-hint { display: block; margin-top: 12px; color: var(--ui-muted); font-size: 10.5px; line-height: 1.5; }

/* 阅读区分屏后，脑图浮层与真实可见画布使用同一安全区。 */
#dock {
  right: calc(var(--reader-right-inset) + clamp(0px, 16px, calc(100vw - var(--reader-right-inset) - 92px)));
}
#dock button {
  width: min(42px, calc((100vw - var(--reader-right-inset) - 8px) / 2));
}
.panel {
  right: calc(var(--reader-right-inset) + clamp(0px, 16px, calc(100vw - var(--reader-right-inset) - 252px)));
}
#hint { max-width: calc(100vw - var(--reader-right-inset) - 32px); overflow: hidden; text-overflow: ellipsis; }
body.reader-mode-split #hint { left: calc((100vw - var(--reader-right-inset)) / 2); }
body.reader-mode-reader-only #dock,
body.reader-mode-reader-only #zoompop,
body.reader-mode-reader-only .panel,
body.reader-mode-reader-only #hint,
body.reader-mode-reader-only .sel-quickbar,
body.reader-mode-reader-only #batch-dock,
body.reader-mode-reader-only .selection-marquee { display: none !important; }

/* trial-05 应用控件：不绑定旧卡片令牌，不进入 iframe 书页或下方 quote/capture。 */
#reader-library, .reader-dialog, .reader-sync-mask, .reader-target-dialog, .reader-capture-preview-dialog {
  font: var(--ui-font-size)/var(--ui-line-height) var(--ui-font); color: var(--ui-text);
}
.reader-icon, .reader-tools button, .reader-tool-view button, .reader-library button, .reader-progress button,
.reader-target-dialog button, .reader-capture-preview-dialog button, .reader-sync-action {
  min-height: var(--ui-control-h); padding: var(--ui-button-padding); border: 1px solid transparent;
  border-radius: var(--ui-button-radius); color: var(--ui-text); background: transparent;
  font: 400 var(--ui-font-control)/var(--ui-button-line-height) var(--ui-font);
  cursor: pointer; touch-action: manipulation; transition: background var(--ui-motion);
}
.reader-icon:hover:not(:disabled), .reader-tools button:hover:not(:disabled),
.reader-tool-view button:hover:not(:disabled), .reader-library button:hover:not(:disabled),
.reader-progress button:hover:not(:disabled), .reader-target-dialog button:hover:not(:disabled),
.reader-capture-preview-dialog button:hover:not(:disabled), .reader-sync-action:hover:not(:disabled) {
  color: var(--ui-hover-text); background: var(--ui-hover-bg); border-color: transparent;
}
#reader-panel button:disabled, #reader-library button:disabled, .reader-sync-action:disabled {
  opacity: var(--ui-disabled-opacity); cursor: default;
}
#reader-panel button:focus-visible, #reader-panel input:focus-visible, #reader-panel select:focus-visible,
#reader-library button:focus-visible, #reader-library input:focus-visible, .reader-sync-action:focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus);
}
.reader-tool-view button[aria-pressed="true"], .reader-tools button[aria-pressed="true"],
.reader-icon[aria-expanded="true"] { color: var(--ui-pressed-text); background: var(--ui-pressed-bg); border-color: transparent; }
#reader-panel .btn.primary, #reader-library .btn.primary, .reader-sync-action.is-primary {
  color: var(--ui-primary-text); background: var(--ui-accent); border-color: var(--ui-accent);
}
#reader-panel .btn.primary:hover:not(:disabled), #reader-library .btn.primary:hover:not(:disabled), .reader-sync-action.is-primary:hover:not(:disabled) {
  color: var(--ui-primary-text); background: color-mix(in srgb, var(--ui-accent) 88%, var(--ui-text)); border-color: transparent;
}
#reader-panel .btn.danger, .reader-sync-action.is-danger { color: var(--ui-danger); }
.reader-icon, .reader-tool-view-head button, .reader-target-head button, .reader-capture-preview-head button {
  width: var(--ui-icon-button-size); min-width: var(--ui-icon-button-size); height: var(--ui-icon-button-size); padding: 6px;
}
.reader-tool-view-head button svg, .reader-target-head button svg, .reader-capture-preview-head button svg {
  width: var(--ui-icon-size); height: var(--ui-icon-size); vertical-align: middle;
}
.reader-tool-view-head strong, .reader-target-head strong, .reader-capture-preview-head strong {
  font: 650 14px/var(--ui-line-height) var(--ui-font);
}
.reader-tool-view, .reader-library { background: var(--ui-panel); }
.reader-tool-view-head, .reader-target-head, .reader-capture-preview-head {
  min-height: var(--ui-panel-header-h); padding: var(--ui-panel-header-padding); border-bottom: 1px solid var(--ui-border);
}
.reader-tool-note { margin: 0 0 14px; color: var(--ui-muted); font-size: 11px; line-height: 1.8; }
.reader-empty-list { min-height: 112px; padding: 24px 12px; font-size: 12px; line-height: 1.8; }
#reader-catalog-list .reader-catalog-item {
  gap: 10px; min-height: var(--ui-row-h); padding: 13px 9px; margin-bottom: 6px; border-radius: var(--ui-radius);
}
#reader-catalog-list .reader-catalog-item.is-active { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: transparent; }
#reader-catalog-list .reader-tree-format { width: 42px; min-width: 42px; height: auto; padding: 8px 3px; border: 1px solid var(--ui-border); border-radius: 5px; background: transparent; color: var(--ui-muted); font: 400 9px/var(--ui-line-height) var(--ui-font); }
#reader-catalog-list .reader-tree-format.is-converted { min-width: 58px; font-size: 9px; }
#reader-catalog-list .reader-tree-document-copy strong { font-size: 12px; line-height: 1.7; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
#reader-catalog-list .reader-tree-document-copy small { font-size: 10px; line-height: 1.6; }
#reader-toc-list .reader-side-action {
  min-height: var(--ui-touch-target); padding: 12px 9px 12px calc(9px + var(--reader-list-depth, 0) * 14px);
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 65%, transparent); border-radius: 0;
  font-size: 12px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere;
}
.reader-search-form { gap: 8px; margin-bottom: 12px; }
.reader-search-form input, .reader-settings-grid select, .reader-narration-grid select, .reader-ocr-range input {
  height: var(--ui-input-h); padding: var(--ui-input-padding); border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-input-radius); background: var(--ui-input-bg); color: var(--ui-text); font: 400 12px/var(--ui-line-height) var(--ui-font);
}
.reader-search-form input { background: var(--ui-bg); }
.reader-search-form input::placeholder, .reader-ocr-range input::placeholder { color: var(--ui-muted); }
.reader-ocr-form fieldset { padding: 15px 14px; border-radius: var(--ui-group-radius); background: color-mix(in srgb, var(--ui-bg) 60%, var(--ui-panel)); }
.reader-ocr-form legend { font-size: 12px; font-weight: 650; }
.reader-ocr-range label, .reader-settings-grid label, .reader-narration-grid > label { font-size: 12px; line-height: 1.5; }
.reader-ocr-status { margin-top: 18px; padding: 15px; border-radius: var(--ui-radius); background: var(--ui-accent-soft); font-size: 12px; line-height: 1.85; }
.reader-bookmark-row { grid-template-columns: minmax(0, 1fr) var(--ui-icon-button-size); }
.reader-bookmark-focus { padding: 12px 9px; font-size: 12px; line-height: 1.7; }
.reader-bookmark-focus strong { font-weight: 400; }
.reader-bookmark-focus small { font-size: 10px; line-height: 1.6; }
.reader-bookmark-delete { padding: 6px; }
.reader-add-bookmark { margin-bottom: 16px; border: 1px solid var(--ui-border); font-size: 12px; }
.reader-narration-grid { gap: 16px; }
#reader-narration-status { padding: 12px; font-size: 11px; line-height: 1.8; }
.reader-check { font-size: 12px; line-height: 1.7; }
.reader-progress {
  height: 40px; min-height: 40px; padding: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-section-radius);
  background: color-mix(in srgb, var(--ui-panel) 85%, transparent); backdrop-filter: blur(10px);
}
.reader-progress button { min-width: 32px; height: var(--ui-control-h); padding: 0; font-size: 21px; }
.reader-progress-track { height: 3px; background: var(--ui-border); border-radius: 2px; }
#reader-page { height: 28px; border-color: var(--ui-border); border-radius: var(--ui-input-radius); font: 400 12px/1.5 var(--ui-font); }
#reader-page-count, #reader-progress-label { padding: 3px 6px; background: transparent; font: 400 11px/1.5 var(--ui-font); }
.reader-divider-button { border-color: var(--ui-border); color: var(--ui-muted); background: var(--ui-panel); box-shadow: none; font: 400 15px/1 var(--ui-font); }
.reader-divider-grip { border-color: var(--ui-border); background: var(--ui-bg); }
.reader-divider-button:hover, .reader-divider-button:focus-visible { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: var(--ui-border); }
.reader-divider-button:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus); }
.reader-local-scope-dot, .reader-local-scope[data-sync-state="blocked"] .reader-local-scope-dot { box-shadow: none; }
.reader-local-scope { font: 400 11px/var(--ui-line-height) var(--ui-font); }
.reader-dialog-card header { padding: var(--ui-dialog-head-padding); }
.reader-dialog-card h2 { font-size: 17px; line-height: 1.5; font-weight: 650; }
.reader-dialog-card header p { font-size: 12px; line-height: 1.7; }
.reader-dialog-body { padding: var(--ui-dialog-body-padding); }
.reader-dialog-field, .reader-dialog-field label, .reader-ownership legend, .reader-import-preview legend { font-size: 12px; }
.reader-dialog-field select { min-height: var(--ui-input-h); border-radius: var(--ui-input-radius); font: 400 13px/1.5 var(--ui-font); }
.reader-dialog-actions { padding: 14px 22px 20px; }
.reader-dialog-actions .btn.danger { color: var(--ui-danger); background: transparent; border-color: var(--ui-border); }
.reader-batch-row strong { font-size: 12px; line-height: 1.6; font-weight: 550; }
.reader-batch-row small, .reader-batch-engine p { font-size: 11px; line-height: 1.8; }
.reader-batch-engine { border-radius: var(--ui-section-radius); }
.reader-target-list { padding: var(--ui-panel-body-padding); }
.reader-capture-preview-body { background: var(--ui-bg); }
.reader-capture-preview-body img { box-shadow: var(--ui-shadow); }
.reader-capture-preview-source { font: 400 11px/1.8 var(--ui-font); }
.reader-sync-eyebrow { font: 400 11px/1.5 var(--ui-font); letter-spacing: 0; border-radius: var(--ui-pill-radius); padding: var(--ui-pill-padding); }
.reader-sync-dialog h2 { font: 650 20px/1.5 var(--ui-font); }
.reader-sync-dialog > p { font-size: 13px; line-height: 1.8; }
.reader-sync-hint { font-size: 11px; line-height: 1.8; }
@media (max-width: 900px) {
  #reader-panel button, #reader-library button, .reader-sync-action { min-height: var(--ui-touch-target); }
  .reader-icon, .reader-tool-view-head button, .reader-target-head button, .reader-capture-preview-head button { min-width: var(--ui-touch-target); height: var(--ui-touch-target); }
  .reader-progress { min-height: 54px; height: 54px; }
  .reader-progress button { min-width: var(--ui-touch-target); height: var(--ui-touch-target); }
  .reader-bookmark-row { grid-template-columns: minmax(0, 1fr) var(--ui-touch-target); }
  .reader-bookmark-delete { width: var(--ui-touch-target); }
  .reader-search-form input, .reader-ocr-range input, .reader-narration-grid select { height: var(--ui-touch-target); }
}

/* 摘录 item：显示文字可编辑；定位始终使用独立保存的原文 selector。 */
.frag--quote {
  --reader-quote-color: var(--reader-highlight-yellow, var(--reader-highlight, #ffd64a));
  --fb: var(--reader-quote-color); width: auto; min-height: 0; align-self: stretch; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--reader-quote-color) 36%, transparent);
  color: var(--text-1); text-align: left; font: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--reader-quote-color) 8%, transparent);
}
.frag--quote:hover, .frag--quote:focus-visible { border-color: color-mix(in srgb, var(--reader-quote-color) 70%, transparent); outline: none; background: color-mix(in srgb, var(--reader-quote-color) 14%, transparent); }
html[data-theme="light"] .frag--quote { background: color-mix(in srgb, var(--reader-quote-color) 8%, transparent); }
.frag--quote .quote-copy { width: 100%; min-width: 0; flex: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.frag--quote .quote-source { width: 100%; min-width: 0; flex: none; overflow: hidden; text-overflow: ellipsis; color: var(--reader-quote-color); font: 750 9.5px/1.2 var(--mono); white-space: nowrap; }
.frag--quote.is-editing { cursor: text; user-select: text; }
.frag--quote.is-editing .quote-copy {
  display: block; overflow: visible; -webkit-line-clamp: unset; cursor: text;
  outline: 2px solid var(--sel-ring); outline-offset: 2px; border-radius: 5px;
  background: color-mix(in srgb, var(--reader-quote-color) 10%, transparent);
}
.frag--quote.reader-item-flash { animation: readerItemFlash 1.25s ease both; }
.frag--quote.is-reader-active .quote-copy {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--reader-quote-color);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
}
@keyframes readerItemFlash { 0%, 100% { box-shadow: none; } 25%, 65% { box-shadow: 0 0 0 2px var(--reader-quote-color), 0 0 20px color-mix(in srgb, var(--reader-quote-color) 55%, transparent); } }

.item-row.is-quote {
  --reader-quote-color: var(--reader-highlight-yellow, var(--reader-highlight, #ffd64a));
  border-color: color-mix(in srgb, var(--reader-quote-color) 48%, var(--panel-border));
  background: color-mix(in srgb, var(--reader-quote-color) 7%, var(--editor-section-bg));
}
.item-row.is-quote textarea.quote-display-input {
  min-height: 42px; max-height: min(42vh, 360px); resize: none; overflow: auto; color: var(--text-1); white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-color: color-mix(in srgb, var(--reader-quote-color) 46%, var(--input-border));
  background: color-mix(in srgb, var(--reader-quote-color) 8%, var(--input-bg));
}
.item-row.is-quote textarea.quote-display-input[aria-invalid="true"] { border-color: var(--danger); }
.item-row .quote-display-error { min-height: 0; margin: 0; }
.item-row .quote-display-error:empty { display: none; }
.item-row .quote-source-line { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--reader-quote-color, var(--reader-highlight)); font-size: 10px; }
.item-row.is-capture { --reader-quote-color: var(--reader-highlight-yellow); border-color: color-mix(in srgb, var(--reader-quote-color) 42%, var(--panel-border)); }
.capture-editor-preview { min-height: 120px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--bg-0) 88%, #000); color: var(--text-2); font-size: 11px; }
.capture-editor-preview img { display: block; max-width: 100%; max-height: 260px; object-fit: contain; }
.capture-editor-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* 颜色类放在基础摘录规则之后，并提高到同一组件层级，避免默认黄色覆盖所选颜色。 */
.frag--quote.reader-color-red, .item-row.is-quote.reader-color-red { --reader-quote-color: var(--reader-highlight-red); }
.frag--quote.reader-color-yellow, .item-row.is-quote.reader-color-yellow { --reader-quote-color: var(--reader-highlight-yellow); }
.frag--quote.reader-color-blue, .item-row.is-quote.reader-color-blue { --reader-quote-color: var(--reader-highlight-blue); }
.frag--quote.reader-color-green, .item-row.is-quote.reader-color-green { --reader-quote-color: var(--reader-highlight-green); }
.frag--quote.reader-color-purple, .item-row.is-quote.reader-color-purple { --reader-quote-color: var(--reader-highlight-purple); }
.item-row.is-capture.reader-color-red { --reader-quote-color: var(--reader-highlight-red); }
.item-row.is-capture.reader-color-yellow { --reader-quote-color: var(--reader-highlight-yellow); }
.item-row.is-capture.reader-color-blue { --reader-quote-color: var(--reader-highlight-blue); }
.item-row.is-capture.reader-color-green { --reader-quote-color: var(--reader-highlight-green); }
.item-row.is-capture.reader-color-purple { --reader-quote-color: var(--reader-highlight-purple); }

/* 截图引用与 quote 共用 Reader 颜色语义，但图片只显示原始像素。 */
.frag--capture {
  --reader-capture-color: var(--reader-highlight-yellow, var(--reader-highlight, #ffd64a));
  --reader-quote-color: var(--reader-capture-color);
  --fb: var(--reader-capture-color); width: auto; min-height: 0; align-self: stretch;
  display: flex; flex-direction: column; gap: 5px; padding: 5px;
  border: 1px solid color-mix(in srgb, var(--reader-capture-color) 42%, transparent);
  border-radius: 8px; background: color-mix(in srgb, var(--reader-capture-color) 7%, transparent);
  cursor: pointer; outline: none;
}
.frag--capture:hover, .frag--capture:focus-visible { border-color: color-mix(in srgb, var(--reader-capture-color) 78%, transparent); background: color-mix(in srgb, var(--reader-capture-color) 13%, transparent); }
.capture-thumb { position: relative; width: 100%; min-height: 84px; max-height: 180px; aspect-ratio: var(--capture-aspect, auto); display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--bg-0) 86%, #000); }
.capture-thumb img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.capture-thumb img[hidden] { display: none; }
.capture-placeholder { padding: 18px 10px; color: var(--text-2); font: 700 10px/1.45 var(--mono); text-align: center; }
/* 已保存宽高的截图先按原比例占位；文字和晚到图片不参与容器高度计算。 */
.capture-thumb--sized > img, .capture-thumb--sized > .capture-placeholder { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; }
.capture-thumb--sized > .capture-placeholder { display: grid; place-items: center; }
.capture-thumb > .capture-placeholder[hidden] { display: none; }
.capture-source { overflow: hidden; text-overflow: ellipsis; color: var(--reader-capture-color); font: 750 9.5px/1.2 var(--mono); white-space: nowrap; }
/* 图片解码导致卡片重新测高时直接落到无碰撞位置，避免位移动画短暂穿过相邻卡片。 */
body.card-resize-reflow .ic-card { transition: none !important; }
.frag--capture.reader-item-flash { animation: readerItemFlash 1.25s ease both; }
.frag--capture.reader-color-red { --reader-capture-color: var(--reader-highlight-red); }
.frag--capture.reader-color-yellow { --reader-capture-color: var(--reader-highlight-yellow); }
.frag--capture.reader-color-blue { --reader-capture-color: var(--reader-highlight-blue); }
.frag--capture.reader-color-green { --reader-capture-color: var(--reader-highlight-green); }
.frag--capture.reader-color-purple { --reader-capture-color: var(--reader-highlight-purple); }

@media (max-width: 900px) {
  #reader-panel { display: none !important; }
  #dock, #zoompop, .panel { right: 10px; }
}

@media (max-width: 900px) and (any-pointer: coarse) {
  body.reader-touch-experimental #reader-panel {
    /* 隐藏时仍参与排版，避免 EPUB 因零尺寸丢失当前位置；显隐与交互由模式控制。 */
    display: flex !important;
    top: 0; width: 100vw; max-width: none; height: 100dvh; border: 0; padding-top: env(safe-area-inset-top);
  }
  body.reader-touch-experimental #reader-resizer { display: none; }
  body.reader-touch-experimental .reader-chrome {
    top: calc(8px + env(safe-area-inset-top));
    min-height: 44px; max-height: none;
  }
  body.reader-touch-experimental .reader-tools button,
  body.reader-touch-experimental .reader-icon,
  body.reader-touch-experimental .reader-progress button { min-width: 44px; min-height: 44px; }
  body.reader-touch-experimental .reader-tools { min-height: 0; }
  body.reader-touch-experimental .reader-progress {
    height: auto; min-height: 44px; bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body.reader-touch-experimental.reader-mode-reader-only #reader-panel.has-document .reader-tool-view {
    bottom: calc(60px + env(safe-area-inset-bottom));
  }
  body.reader-touch-experimental .reader-capture-preview { padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  #reader-panel, .frag--quote.reader-item-flash, .frag--capture.reader-item-flash { transition: none !important; animation-duration: .01ms !important; }
  .reader-batch-engine strong::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 捏合覆盖阅读区时收起演示浮钮，避免遮住捏合程度和触屏操作。 */
body.reader-pinch-active .demo-launch { display: none; }

/* 整块外框与阅读区共用颜色语义，透明底色保留公式、表格和代码自身样式。 */
html[data-theme] .frag--quote[data-mark-style="outline"],
.ic-card:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .frag--quote[data-mark-style="outline"] {
  border: var(--reader-outline-width) solid var(--reader-quote-color);
  border-radius: var(--reader-outline-radius);
  background: transparent;
}

/* 开书和来源定位共享加载态，完成之前不显示引导页或尚未落位的正文。 */
#reader-loading {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: var(--ui-panel); color: var(--ui-muted);
  font: var(--ui-font-size)/var(--ui-line-height) var(--ui-font); cursor: progress;
}
#reader-loading[hidden], #reader-panel.is-loading #reader-empty { display: none; }
#reader-panel.is-loading #reader-host { opacity: 0; pointer-events: none; }