:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1f2430; --line: #2a3040;
  --text: #e6e9ef; --muted: #9aa3b2; --accent: #7c5cff; --accent2: #36d399;
  --danger: #ff6b6b; --warn: #ffb454;
  /* 语义色（此前散落各处硬编码，同一语义曾出现 2-3 个不同值，现统一收口） */
  --ok: #6fbf8a;            /* 成功/已完成 —— 统一为一种绿 */
  --ok-bg: rgba(111,191,138,.12);
  --ok-line: rgba(111,191,138,.5);
  --on-accent2: #08120c;    /* 绿色实心按钮上的文字色（保证对比度）*/
  /* 动效节奏统一（此前 6 种写法：.12s/.15s/无缓动/属性顺序各异） */
  --t-fast: .12s ease;
  --t-base: .18s cubic-bezier(.4, 0, .2, 1);
  /* 焦点环：键盘导航可见（此前全站 0 处 :focus-visible） */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column;
}
.topbar {
  position: relative; /* 锚定 mode-switch 的绝对居中 */
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 8px; /* 窄屏顶栏项换行时不重叠 */
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.brand .sub { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; }
/* 顶栏右侧功能簇：配额 → 用户框 → 主题切换，整体靠右成组 */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.badge { font-size: 12px; color: var(--accent2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.badge.err { color: var(--danger); border-color: var(--danger); }
.llm-banner {
  padding: 10px 20px; font-size: 13px; line-height: 1.6;
  border-bottom: 1px solid var(--line);
}
.llm-banner.danger {
  background: rgba(255,107,107,.12); color: var(--danger);
  border-bottom-color: var(--danger);
}
.llm-banner.warn { background: rgba(255,180,84,.12); color: var(--warn); }
.llm-banner code {
  background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}
.btn.ghost { background: transparent; border-color: var(--line); color: var(--muted); padding: 6px 10px; }
.btn.ghost:hover { border-color: var(--accent); color: var(--text); }

.layout { flex: 1; display: flex; min-height: 0; }
main[hidden] { display: none !important; }
/* 侧栏宽度：恢复与导入合并后只剩 4 个按钮单行（⇩导入/＋新建/⚙提示词/↻，
   实测约需 292px + 32px padding ≈ 324px）。取 340px。
   窄屏由媒体查询收窄并让按钮换行兜底（见下方 1366/1120 断点）。 */
.sidebar { width: 340px; min-width: 300px; /* 窄屏断点收窄的下限（低于 300 不可再缩） */ border-right: 1px solid var(--line); padding: 16px; overflow-y: auto; }
.sidebar-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.sidebar h2 { font-size: 14px; color: var(--muted); margin: 0; }
.sb-actions { display: flex; gap: 6px; align-items: center; }
.sb-actions .btn { white-space: nowrap; flex: 0 0 auto; }
.project-list { list-style: none; padding: 0; margin: 12px 0 0; }
.project-list li {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; background: var(--panel2);
}
.project-list li:hover { border-color: var(--accent); }
.project-list li.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.project-list li.active small { color: rgba(255,255,255,.8); }
.project-list li b { font-size: 14px; }
.project-list li small { color: var(--muted); font-size: 12px; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-btn {
  flex-shrink: 0; background: transparent; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 6px;
  opacity: .55; transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.project-list li:hover .del-btn { opacity: 1; }
.del-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(255,107,107,.08); opacity: 1; }
.project-list li.active .del-btn { color: rgba(255,255,255,.85); }
.project-list li.active .del-btn:hover { color: #fff; border-color: #fff; }
.project-list li.hint, .project-list li.loading {
  cursor: default; color: var(--muted); background: transparent; border-style: dashed; font-size: 12px;
}
.project-list li.err { cursor: default; color: var(--danger); background: transparent; border-color: var(--danger); font-size: 12px; line-height: 1.5; }
.chapter-list .hint { color: var(--muted); font-size: 13px; padding: 8px 0; }

.workspace { flex: 1; padding: 24px; overflow-y: auto; }
/* ★ 内容限宽：workspace 本身保持全宽（背景/留白不变），只把**内容容器**
   限到舒适行宽并居中。宽屏下正文一行 100+ 字极难阅读，这是长篇写作的
   核心体验问题。--wrap-* 便于按区域微调（正文比面板再窄一档）。 */
.workspace > * { max-width: var(--wrap, 1180px); margin-inline: auto; }
/* 章节正文/流式预览：中文正文 30-40 字/行最舒适，比面板再窄 */
.gen-stream,
.chapter-card .draft {
  /* 只管「宽度 + 居中」两件事。
     字体/行高/缩进等排版属性统一放在后面的 .draft 规则里 —— 避免高特异性
     规则（0,2,0）反过来覆盖低特异性（0,1,0）的 max-height / mask 等属性。 */
  max-width: var(--wrap-text, 100%);
  margin-inline: auto;
}
.workspace { --wrap: 1180px; --wrap-text: 860px; }
.empty { color: var(--muted); margin-top: 40px; text-align: center; }
.proj-head { display: flex; align-items: center; gap: 12px; }
.proj-head h1 { margin: 0; font-size: 22px; }
.premise { color: var(--muted); margin: 8px 0 16px; }
.status-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.status-pill.sm { font-size: 11px; padding: 1px 8px; }
.status-pill.interrupted { color: var(--warn); border-color: var(--warn); background: rgba(255,180,84,.12); }
.badge.warn { color: var(--warn); border-color: var(--warn); background: rgba(255,180,84,.12); }

.actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.btn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-head h3 { margin: 0; }

/* 五层记忆完整性面板（P2-3 前端） */
.memory-diag { display: flex; flex-direction: column; gap: 12px; }
.mem-summary { border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); }
.mem-summary.ok { color: var(--ok); border-color: var(--ok-line); background: rgba(111,191,138,.1); }
.mem-summary.warn { color: var(--warn); border-color: rgba(255,180,84,.5); background: rgba(255,180,84,.12); }
.mem-summary.error { color: var(--danger); border-color: var(--danger); background: rgba(255,107,107,.12); }
.mem-layers { display: flex; flex-direction: column; gap: 8px; }
.mem-layer { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); }
.mem-layer.error { border-color: var(--danger); }
.mem-layer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mem-layer-name { font-weight: 600; font-size: 13px; }
.mem-badge { font-size: 11px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.mem-badge.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.mem-badge.warn { color: var(--warn); border-color: rgba(255,180,84,.5); background: rgba(255,180,84,.12); }
.mem-badge.error { color: var(--danger); border-color: var(--danger); background: rgba(255,107,107,.12); }
.mem-detail { font-size: 12px; color: var(--muted); line-height: 1.5; }
.mem-warns { margin: 0; padding-left: 18px; color: var(--warn); font-size: 12px; line-height: 1.6; }
.mem-warns li { margin: 2px 0; }
.mem-recover { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel2); }
.mem-recover .muted { font-size: 12px; }
.mem-recover .rc { white-space: nowrap; }
.mem-recover .rc:disabled { opacity: .6; cursor: wait; }
/* 批量连写进度面板 */
.batch-progress { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.batch-head { font-size: 13px; font-weight: 600; line-height: 1.7; margin-bottom: 8px; }
.batch-head small { font-weight: 400; color: var(--muted); }
.batch-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 13px; }
.batch-row.doing { background: rgba(255, 180, 84, .1); }
.batch-row.done { color: var(--ok); }
.batch-row.fail { color: var(--danger); background: rgba(255, 107, 107, .1); }
.batch-ico { width: 18px; text-align: center; }
.batch-idx { min-width: 62px; font-weight: 600; }
.batch-detail { color: var(--muted); font-size: 12px; }
.scroll { max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.6; background: var(--panel2); padding: 12px; border-radius: 8px; }

.chapter-list { display: flex; flex-direction: column; gap: 14px; }
.chapter-card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
  /* 卡片本体不设 max-width：正文比卡片窄，窄正文在宽卡片里居中才好看。
     卡片宽度跟随 .workspace 的 --wrap（1180px），正文再收窄到 860px。 */
}
/* 标题行：章节号用等宽数字对齐，字号提升形成层级 */
.ch-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
  /* 标题与正文左边界对齐（正文有 2em 首行缩进，标题不缩进更规范） */
  max-width: var(--wrap-text, 100%); margin-inline: auto;
}
.ch-head > b {
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  /* 长章节名省略，配合 title 看全文（JS 侧已加 title） */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft {
  max-height: 300px; overflow-y: auto;
  /* <pre> 浏览器默认 13px + monospace，中文正文又小又是等宽字体，可读性差。
     覆盖为与 UI 同族字体、放大到 15px、行高 1.9（长文阅读舒适）。 */
  font-family: inherit;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  /* 不设 text-indent：<pre> 里的换行是"硬换行"而非段落，
     CSS 无法区分段首，缩进会导致每一行都缩进 2em（视觉错乱）。 */
  white-space: pre-wrap;   /* 保证长行折行，不横向滚动 */
  word-break: break-word;
  /* 底部渐隐：暗示"还有更多内容"，比硬邦邦的裁切线更自然 */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.ch-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; max-width: var(--wrap-text, 100%); margin-inline: auto; }
/* 卡片悬停：轻微提亮 + 强调色描边，强化"这是一张可操作的卡" */
.chapter-card { transition: border-color var(--t-base), box-shadow var(--t-base); }
.chapter-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.report {
  margin: 10px 0 0; padding-left: 18px; font-size: 12px;
  max-width: var(--wrap-text, 100%); margin-inline: auto;
}
.report li { margin: 2px 0; }
.sev-阻断 { color: var(--danger); }
.sev-重要 { color: var(--warn); }
.sev-次要 { color: var(--muted); }
.ch-actions .fb { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 6px 8px; }
.btn.ok { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent2); }
.btn.rev { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.pub { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent2); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); align-items: center; justify-content: center; display: none; }
.modal:not([hidden]) { display: flex; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: 460px; max-width: 92vw; }
.modal-box h3 { margin-top: 0; }
.modal-box label { display: block; margin: 12px 0; font-size: 13px; color: var(--muted); }
.modal-box input, .modal-box textarea {
  width: 100%; margin-top: 4px; background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px;
  max-width: 80vw; text-align: center;
}
.toast.err { background: var(--danger); }

/* ================= 模式切换 ================= */
.mode-switch {
  /* 居中于顶栏（视口级，不受两侧内容宽度影响）；窄屏回落为常规流式 */
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
@media (max-width: 900px) {
  .mode-switch { position: static; transform: none; }
}
.mode-btn {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-family: inherit;
}
.mode-btn.active { background: var(--accent); color: #fff; }

/* ================= 阅读模式 · 书架 ================= */
/* 宽度控制：书架是"浏览"场景，卡片过宽会让封面变形、信息行被拉长。
   三层约束：外层 .shelf-inner 限最大宽度居中 → grid 用固定列宽（不用 1fr 拉伸）
   → 卡片自身设 max-width。这样 4K 宽屏也不会出现"一本书占半屏"。 */
.shelf { flex: 1; overflow-y: auto; padding: 26px 34px; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.shelf-head h1 { font-size: 22px; margin: 0; }
.shelf-grid {
  /* 固定列宽：auto-fill + minmax(200px, 210px) —— 上限 210px，
     剩余空间用 justify-content 留白，而不是把卡片拉宽。 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 210px));
  gap: 20px;
  justify-content: start;
  /* 窄屏时允许卡片自适应，避免溢出 */
  max-width: 1180px;
}
.shelf-hint {
  grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.9;
  padding: 48px 0; text-align: center;
}
.shelf-hint.err { color: var(--danger); }
.book-card {
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  /* 卡片自身也兜底宽度（grid 已限 210px，这里防 grid 被外部覆盖） */
  max-width: 210px; width: 100%;
}
.book-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.book-cover {
  /* 竖版封面比例（约 2:3），宽度受限后不会被拉成横条 */
  aspect-ratio: 3 / 4; height: auto; border-radius: 8px;
  display: flex; align-items: flex-end;
  padding: 14px; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.4;
  box-shadow: inset 0 -60px 60px -40px rgba(0,0,0,.6); word-break: break-word;
  overflow: hidden;
}
.book-cover span { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.book-meta { display: flex; flex-direction: column; gap: 3px; min-height: 62px; }
.book-meta b { font-size: 14px; }
.book-meta small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.book-meta small.muted { color: #6f7787; }
.book-card .read-btn { align-self: stretch; }

/* ================= 阅读模式 · 阅读器 ================= */
.read-layout { background: var(--bg); }
/* 注意：任何设了 display:flex/grid 的容器都必须用 :not([hidden]) 守卫，
   否则作者样式会覆盖 hidden 属性自带的 display:none（本项目已踩坑 3 次）。 */
.reader { flex: 1; min-width: 0; overflow: hidden; }
.reader:not([hidden]) { display: flex; flex-direction: column; }
.reader-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 22px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.reader-title { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.reader-title b { font-size: 15px; }
.reader-title small { color: var(--muted); font-size: 12px; }
.reader-tools { display: flex; align-items: center; gap: 8px; }
.font-ctl { display: flex; gap: 4px; }
.reader-body { flex: 1; display: flex; min-height: 0; position: relative; }
/* 目录：浮动抽屉。绝对定位覆盖在正文之上，出现/消失不改变正文位置与宽度。
   显隐遵循 hidden 约定：默认 none，仅 :not([hidden]) 时显示。 */
.toc {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 30;
  width: 260px; max-width: 78vw; padding: 14px 16px; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line);
  box-shadow: 4px 0 18px rgba(0, 0, 0, .28);
  display: none; flex-shrink: 0;
}
.toc:not([hidden]) { display: block; }
.toc h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.toc li { padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.toc li:hover { background: var(--panel2); }
.toc li.active { background: var(--accent); }
.toc li.active a { color: #fff; }
.toc a { color: var(--text); text-decoration: none; display: block; }
.reader-content {
  flex: 1; overflow-y: auto; padding: 40px max(6vw, 40px); line-height: 2;
  font-size: 17px; max-width: 860px; margin: 0 auto; width: 100%;
}
.reader-content h2 { font-size: 1.35em; margin: 0 0 28px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.reader-content p { margin: 0 0 1.2em; text-indent: 2em; }
.reader-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px; border-top: 1px solid var(--line); background: var(--panel);
}
.reader-foot .progress { color: var(--muted); font-size: 13px; }

/* 创作模式：发布标记 */
.tag-pub { font-size: 10px; background: var(--accent2); color: var(--on-accent2); padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.pub-pill { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--accent2); color: var(--on-accent2); }

/* 控制面文档编辑区（作者意图 / 当前焦点）*/
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .ctrl-grid { grid-template-columns: 1fr; } }
.ctrl-field { display: flex; flex-direction: column; gap: 6px; }
.ctrl-field > span { font-size: 12px; color: var(--muted); }
.ctrl-field textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.6;
}
.ctrl-field textarea:focus { outline: none; border-color: var(--accent); }
.ctrl-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* 重写按钮 */
.btn.rw { color: var(--muted); }
.btn.rw:hover { color: var(--warn); border-color: var(--warn); }

/* 故事状态面板（伏笔 / 埋线预警 / trace）*/
.state-summary { display: flex; flex-direction: column; gap: 6px; }
.st-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.st-k { color: var(--muted); min-width: 42px; flex-shrink: 0; }
.st-v { color: var(--text); }
.chip { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; margin: 0 6px 4px 0; font-size: 12px; }
.warn { color: var(--warn); }
.hook-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.hook-list li { font-size: 13px; line-height: 1.5; }
.hook-list li.hk-done { opacity: .55; }
.hook-list li.hk-done b { text-decoration: line-through; }
.trace-view { margin-top: 6px; }
.trace-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel2); }
.trace-box summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.trace-list { list-style: none; padding: 4px 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.trace-list li { font-size: 12px; line-height: 1.5; }
.lv-protected { color: var(--ok); font-size: 10px; border: 1px solid var(--ok); border-radius: 4px; padding: 0 4px; }
.lv-compressible { color: var(--muted); font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* ================= 创作面板 · Hero 头 ================= */
.proj-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 22px; margin-bottom: 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(54,211,153,.08) 70%, transparent);
  border: 1px solid var(--line);
}
.hero-main { min-width: 0; flex: 1; }
.hero-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-line h1 { margin: 0; font-size: 24px; letter-spacing: .5px; }
.proj-hero .premise { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 62ch; }
.hero-meta { display: flex; gap: 12px; flex-shrink: 0; }
.meta-chip {
  min-width: 76px; padding: 10px 14px; border-radius: 12px; text-align: center;
  background: rgba(0,0,0,.22); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.meta-chip span { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.meta-chip small { font-size: 11px; color: var(--muted); }

/* ================= 创作面板 · 步骤条 ================= */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.step {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px 6px 6px; transition: border-color var(--t-base), color var(--t-base);
}
.step i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
}
.step.done { color: var(--text); border-color: rgba(54,211,153,.5); }
.step.done i { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent2); }
.step.active { color: #fff; border-color: var(--accent); background: rgba(124,92,255,.16); }
.step.active i { background: var(--accent); border-color: var(--accent); color: #fff; }
/* done 优先于 active，避免已完成步骤被涂成紫色 */
.step.done:not(.active) i { background: var(--accent2); border-color: var(--accent2); }

/* ================= 创作面板 · Actionbar ================= */
.actionbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.btn.act {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.btn.act:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.btn.act .act-ico { font-size: 18px; line-height: 1; }
.btn.act .act-txt { display: flex; flex-direction: column; gap: 1px; }
.btn.act .act-txt b { font-size: 13px; font-weight: 600; }
.btn.act .act-txt small { font-size: 11px; color: var(--muted); }
.btn.act.primary { background: var(--accent); border-color: var(--accent); }
.btn.act.primary .act-txt small { color: rgba(255,255,255,.8); }
.btn.act.pub { background: var(--panel); }
.btn.act.pub .act-ico { filter: drop-shadow(0 0 6px rgba(54,211,153,.6)); }

/* ================= 创作面板 · KPI 条 ================= */
.kpi-strip { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ================= 创作面板 · 分页标签 ================= */
.tabs {
  display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 9px 14px; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tabpane:not([hidden]) { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ================= 创作面板 · 统计视图 ================= */
.stats-view { display: flex; flex-direction: column; gap: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi b { font-size: 26px; line-height: 1.1; }
.kpi small { font-size: 12px; color: var(--muted); }
.kpi.accent { border-color: var(--accent); background: rgba(124,92,255,.12); }
.kpi.accent b { color: #c3b4ff; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; font-size: 12px; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 999px; }
.bar-num { text-align: right; color: var(--muted); }
.sev-legend { margin-top: 10px; font-size: 12px; color: var(--muted); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th, .stats-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.stats-table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.stats-table tbody tr:hover { background: var(--panel2); }
.w-short { color: var(--warn); }
.w-long { color: #7cc4ff; }
.w-ok { color: var(--accent2); }
.panel .muted { font-size: 12px; font-weight: 400; }
.muted { color: var(--muted); }

/* ================= 卷规划（侧边栏 + 工作区路线图） ================= */
.pl-vol { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pl-vol-txt { font-size: 11px; color: var(--accent2); }
.vol-bar { display: inline-flex; gap: 2px; flex: 1; min-width: 56px; }
.vol-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); }
.vol-seg.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-color: transparent; }

/* 卷规划：已迁入「📚 卷规划」tab 的 .panel 内，故不再自带边框/背景/外边距，
   避免与面板形成"双层框"，仅保留内容区的排版。 */
.vol-roadmap { animation: fade .18s ease; }
.vol-roadmap[hidden] { display: none; }
.vr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vr-title { font-size: 13px; font-weight: 600; }
.vr-head small { color: var(--muted); font-size: 12px; }
.vr-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.vr-empty { font-size: 12px; line-height: 1.6; padding: 8px 10px; background: var(--panel2);
  border: 1px dashed var(--line); border-radius: 10px; }
.vr-chip {
  flex: 0 0 auto; min-width: 100px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.vr-chip b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-chip small { font-size: 11px; color: var(--muted); }
.vr-chip.done { border-color: rgba(54,211,153,.4); }
.vr-chip.cur { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,92,255,.25); }
.vr-pct { font-size: 11px; color: var(--accent2); margin-top: 2px; }
.vr-pct.todo { color: var(--muted); }

/* 漂移审计报告 */
.drift-report {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-top: 14px; animation: fade .18s ease;
}
.drift-head { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.drift-empty { font-size: 12px; line-height: 1.6; padding: 8px 10px; background: var(--panel2);
  border: 1px dashed var(--line); border-radius: 10px; }
.drift-item {
  padding: 10px 12px; margin-bottom: 10px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px;
}
.drift-item:last-child { margin-bottom: 0; }
.drift-ch { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.drift-issue { font-size: 12px; line-height: 1.6; padding: 4px 0; border-top: 1px dashed var(--line); }
.drift-issue:first-child { border-top: none; }
.drift-issue small { display: block; color: var(--muted); margin-top: 2px; }
.drift-issue.blk { color: #ff6b6b; }

@media (max-width: 760px) {
  .proj-hero { flex-direction: column; }
  .hero-meta { width: 100%; }
  .meta-chip { flex: 1; }
}

/* ================= 续写导入弹窗 ================= */
.modal-box.wide { width: 620px; }
.imp-hint { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 4px; }
.imp-hint b { color: var(--accent2); }
/* 导入/恢复弹窗的双页签（正文导入 | 备份恢复），激活态由 btn primary/ghost 切换 */
.imp-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.imp-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.imp-row label { margin: 8px 0; }
.imp-row input[type="number"] { width: 130px; }
.imp-check { display: flex !important; align-items: center; gap: 6px; color: var(--text) !important; }
.imp-check input { width: auto !important; margin: 0 !important; }
#imp-text { font-family: inherit; line-height: 1.6; }
.modal-actions #imp-hint { flex: 1; text-align: left; }

/* ================= 阅读模式 · 书架工具（搜索 / 排序） ================= */
.shelf-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lib-search {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; width: 220px;
}
.lib-search:focus { outline: none; border-color: var(--accent); }
.lib-sort {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer;
}

/* 书架卡片徽章 / 状态 */
.badge-pill {
  display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); margin-right: 4px; white-space: nowrap;
}
.badge-pill.series { color: #7cc4ff; border-color: rgba(124,196,255,.5); }
.badge-pill.done { color: var(--accent2); border-color: rgba(54,211,153,.5); }
.badge-pill.genre { color: var(--accent); border-color: rgba(124,92,255,.5); }
.book-meta .book-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.book-meta .book-sub small { color: var(--muted); font-size: 12px; }
.book-card .read-btn.continue { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent2); }

/* ================= 阅读模式 · 书籍详情页 ================= */
.detail { flex: 1; overflow-y: auto; padding: 22px 30px 60px; }
/* 详情页同样限宽居中（与书架/创作区一致的阅读节奏） */
.detail > * { max-width: var(--wrap, 1180px); margin-inline: auto; }
.detail { --wrap: 1100px; }
.detail-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.detail-body { display: flex; gap: 28px; align-items: flex-start; }
.detail-aside { flex: 0 0 200px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.detail-cover {
  height: 280px; border-radius: 12px; display: flex; align-items: flex-end; padding: 16px;
  color: #fff; font-weight: 700; font-size: 20px; line-height: 1.4;
  box-shadow: inset 0 -80px 80px -50px rgba(0,0,0,.7), 0 8px 24px -10px rgba(0,0,0,.6);
  word-break: break-word;
}
.detail-cover span { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.detail-main { flex: 1; min-width: 0; }
.detail-main h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: .5px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-intro {
  color: var(--muted); font-size: 14px; line-height: 1.9; margin: 0 0 18px; max-width: 70ch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.detail-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-stats .ds { display: flex; flex-direction: column; gap: 2px; }
.detail-stats .ds b { font-size: 19px; }
.detail-stats .ds small { font-size: 12px; color: var(--muted); }
.detail-ch-h { font-size: 15px; margin: 0 0 12px; color: var(--muted); font-weight: 600; }

/* 详情页章节目录（按卷分组） */
.detail-toc { display: flex; flex-direction: column; gap: 18px; }
.dt-vol { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.dt-vol-name { font-size: 13px; font-weight: 600; color: var(--accent2); margin-bottom: 10px; }
.dt-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.dt-ch {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; cursor: pointer; color: var(--text); text-align: left; transition: border-color var(--t-fast), transform var(--t-fast);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dt-ch:hover { border-color: var(--accent); transform: translateY(-2px); }
.dt-ch.read { color: var(--muted); border-color: rgba(54,211,153,.4); }
.dt-ch.read::before { content: "✓ "; color: var(--accent2); }

/* 目录遮罩：仅覆盖正文可点区，目录本身在其上（z-index 更高） */
.toc-mask { position: absolute; inset: 0; z-index: 25; display: none; }
.toc-mask:not([hidden]) { display: block; }

/* ================= 阅读模式 · 设置抽屉 ================= */
.settings-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 50;
  background: var(--panel); border-left: 1px solid var(--line); padding: 18px 18px 24px;
  /* 默认 display:none，仅 :not([hidden]) 时才显示。
     无条件写 display:flex 会覆盖 [hidden] 的 UA 样式 → 侧栏常驻且关不掉。 */
  display: none;
  flex-direction: column; gap: 14px; overflow-y: auto;
  box-shadow: -12px 0 40px -16px rgba(0,0,0,.6); animation: sd-in .18s ease;
}
.settings-drawer:not([hidden]) { display: flex; }
@keyframes sd-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.sd-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.sd-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.sd-row .sd-val { color: var(--text); font-weight: 600; float: right; }
.sd-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.sd-row select {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.sd-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ================= 阅读模式 · 多主题 ================= */
/* 暗色（默认）：沿用 :root 变量，无需额外类 */
body.reader-light { --bg: #f7f5ef; --panel: #fffdf7; --panel2: #f0ede4; --line: #ddd8c9; --text: #2a2a28; --muted: #7a7568; --accent: #6b4ee6; --accent2: #2f9e6b; }
body.reader-light .reader-content { color: #2a2a28; }
body.reader-sepia { --bg: #efe2c8; --panel: #f6ecd6; --panel2: #e8d8b8; --line: #cdb98e; --text: #4a3b22; --muted: #8a6f46; --accent: #a8742a; --accent2: #7a8b3a; }
body.reader-sepia .reader-content { color: #4a3b22; }
body.reader-eye { --bg: #c7e6c9; --panel: #d6efd8; --panel2: #bfe0c2; --line: #9fcaa3; --text: #1f3a24; --muted: #4f7355; --accent: #2f8f4f; --accent2: #3a8fb0; }
body.reader-eye .reader-content { color: #1f3a24; }

/* ================= 阅读模式 · 卷分组目录 ================= */
.toc-vol { margin-bottom: 10px; }
.toc-vol-name { font-size: 11px; color: var(--muted); padding: 4px 8px; letter-spacing: .5px; }
.toc ol.toc-sub { list-style: none; padding: 0; margin: 0; }
.toc ol.toc-sub li { padding: 6px 8px 6px 16px; border-radius: 6px; font-size: 13px; }
.toc ol.toc-sub li:hover { background: var(--panel2); }
.toc ol.toc-sub li.active { background: var(--accent); }
.toc ol.toc-sub li.active a { color: #fff; }

@media (max-width: 760px) {
  .detail-body { flex-direction: column; }
  .detail-aside { flex: 0 0 auto; width: 140px; }
  .detail-cover { height: 190px; font-size: 16px; }
  .lib-search { width: 140px; }
  /* 书架窄屏：去掉固定列宽上限，改为自适应单/双列，避免卡片被压到过窄 */
  .shelf { padding: 16px 14px; }
  .shelf-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px; justify-content: stretch;
  }
  .book-card { max-width: none; }
  .book-meta b { white-space: normal; }
}

/* ===== 角色动态档案面板 ===== */
.characters-view { }
.char-intro { margin-bottom: 16px; }
.rel-graph { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.rel-svg { width: 100%; height: auto; max-height: 360px; display: block; }
.rel-node { fill: var(--accent); }
.rel-label { fill: var(--text); font-weight: 600; }
.rel-edge { font-size: 10px; }
.rel-node-g { cursor: pointer; }
.rel-node-g:hover .rel-node { fill: var(--accent2); r: 7; }
.rel-node-g:hover .rel-label { text-decoration: underline; }
.rel-node-g:focus { outline: none; }
.rel-node-g:focus .rel-node { stroke: var(--accent2); stroke-width: 2; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.char-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.char-head { display: flex; align-items: center; gap: 10px; }
.char-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.char-id { flex: 1 1 auto; min-width: 0; }
.char-id h4 { margin: 0; font-size: 16px; }
.char-role { font-size: 12px; color: var(--muted); }
.char-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.cs-alive { color: var(--ok); border-color: var(--ok-line); }
.cs-dead { color: #e06c75; border-color: rgba(224,108,117,.5); }
.cs-missing { color: var(--warn); border-color: rgba(255,180,84,.5); }
.cs-unknown { color: var(--muted); }
.char-line { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 6px; font-size: 13px; }
.char-line .kv b { color: var(--muted); font-weight: 500; margin-right: 4px; }
.char-stats { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.heat-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12px; color: var(--muted); }
.heat-label { flex: 0 0 auto; }
.heat-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--panel2); overflow: hidden; border: 1px solid var(--line); }
.heat-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.heat-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.char-card.flash { animation: cardFlash 1.6s ease-out; }
@keyframes cardFlash {
  0% { box-shadow: 0 0 0 2px var(--accent2); border-color: var(--accent2); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.char-traits, .char-skills { margin: 6px 0; }
.chip.sk { background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.4); }
.sec-t { font-size: 12px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.char-list { margin: 0; padding-left: 18px; font-size: 13px; }
.char-list li { margin: 2px 0; }
.arc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.arc-list li { display: flex; gap: 10px; padding: 4px 0 4px 12px; position: relative; }
.arc-list li::before { content: ""; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.arc-ch { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 600; padding-top: 2px; }
.arc-body { font-size: 13px; }
.arc-shift { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { font-size: 13px; padding: 2px 0; }
.rel-meta { color: var(--muted); font-size: 12px; }
.chip.jump { cursor: pointer; }
.chip.jump:hover { border-color: var(--accent); }

/* ===== 流式章节生成实时预览 ===== */
.gen-stream {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.gen-stream[hidden] { display: none; }
.gs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.gs-title { font-weight: 700; font-size: 15px; }
.gs-phase { font-size: 13px; color: var(--muted); white-space: nowrap; }
.gs-phase.writing, .gs-phase.reviewing { color: var(--accent); }
.gs-phase.ok { color: var(--ok); }
.gs-phase.err { color: #e06c75; }
.gs-body {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.9;
  font-size: 15px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(128, 128, 128, 0.08);
  border-radius: 8px;
  border: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif;
}
.gs-phase.revising { color: #d19a66; }
.gs-review {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, 0.05);
  font-size: 13px;
}
.gs-review .rv-head { font-weight: 700; margin-bottom: 4px; }
.gs-review .rv-list { margin: 0; padding-left: 18px; }
.gs-review .rv-list li { margin: 2px 0; line-height: 1.6; }
.gs-revised {
  margin-top: 10px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.9;
  font-size: 15px;
  padding: 10px 12px;
  background: rgba(209, 154, 102, 0.1);
  border-radius: 8px;
  border: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif;
}

/* ---------- 人工编辑章节弹窗 ---------- */
/* 显隐必须遵循项目既有约定：默认 display:none，仅 :not([hidden]) 时才 flex。
   若无条件写 display:flex，会覆盖 [hidden] 属性 → 弹窗常驻全屏且无法关闭。 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); align-items: center; justify-content: center; z-index: 1000; display: none; }
.modal-mask:not([hidden]) { display: flex; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; max-width: 900px; width: 92vw; max-height: 88vh; overflow: auto; }
.edit-box h3 { margin: 0 0 6px; font-size: 16px; }
.edit-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.6; }
.edit-title { width: 100%; margin-bottom: 10px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: inherit; font-size: 14px; }
.edit-text { width: 100%; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: inherit; font-size: 14px; line-height: 1.9; font-family: inherit; resize: vertical; }
.edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ---------- 伏笔管理面板 ---------- */
.hook-summary { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.hook-list { display: flex; flex-direction: column; gap: 8px; }
.hook-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); }
.hook-row.done { opacity: .62; }
.hook-row.done .hook-title { text-decoration: line-through; }
.hook-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hook-status { font-size: 12px; white-space: nowrap; }
.hook-title { font-size: 13px; font-weight: 600; line-height: 1.5; }
.hook-meta { margin-top: 4px; font-size: 11px; color: var(--muted); }
.hook-meta code { background: rgba(127,127,127,.18); padding: 1px 5px; border-radius: 4px; }
.hook-note { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.6; }
/* 设定词典：术语名比释义更醒目，因为"统一称呼"才是这个面板的主诉求 */
.glossary-term { margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.glossary-term small { font-weight: 400; margin-left: 6px; }
/* 告警块：此前 chapters.js / insights.js 共 5 处在用 warn-box 却从未定义样式，
   导致"读取失败/状态损坏"渲染成无边框裸文本（提示等于不可见）。 */
.warn-box {
  padding: 10px 12px; border: 1px solid rgba(255,180,84,.5);
  border-radius: 10px; background: rgba(255,180,84,.12);
  color: var(--warn); font-size: 13px; line-height: 1.6;
}
.warn-box small { color: var(--muted); }
.hook-act { margin-top: 8px; }
.badge.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }

/* ---------- 创作区：待处理 / 已定稿分区 ---------- */
.ch-toggle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.ch-toggle-hint { font-size: 12px; }
.ch-sec-title { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.ch-sec-title.done { color: var(--ok); }
/* 定稿章在创作区淡显，提示其为"归档"状态而非待办 */
.chapter-card.is-done { opacity: .72; }
.chapter-card.is-done:hover { opacity: 1; }

/* ---------- 章节搜索 + 分页 ---------- */
.ch-search { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.ch-search input { flex: 1; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: inherit; font-size: 13px; }
.ch-search input:focus { outline: 1px solid var(--accent); }
.ch-search-result { margin: 8px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.sr-head { font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sr-sec { margin-top: 10px; }
.sr-title { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.sr-row { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.6; }
.sr-row:last-child { border-bottom: none; }
.sr-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sr-snippet { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
.ch-pager { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ch-pager:not([hidden]) { display: flex; }
.pager-info { font-size: 13px; }
.pager-note { font-size: 11px; }
.ch-truncated { margin-top: 6px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; }

/* ================= 滚动条美化（方案 A：保留拖动能力） ================= */
/* 阅读区滚动容器：细窄半透明 → 悬停加宽变亮。
   与顶部进度条互补：进度条显示"读到哪"，滚动条提供"拖到哪"。 */
.reader-content {
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
}
.reader-content::-webkit-scrollbar { width: 10px; }
.reader-content::-webkit-scrollbar-track {
  background: transparent;                  /* 轨道透明，不喧宾夺主 */
}
.reader-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;            /* 用透明边框做出"内缩"细条 */
  background-clip: content-box;
  transition: background-color var(--t-base), border-width var(--t-base);
}
.reader-content:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  border-width: 2px;                        /* 悬停时略加宽，便于抓取 */
}
.reader-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent2);               /* 按下/再悬停 → 强调色 */
  border-width: 1px;
}

/* 目录与设置抽屉内的滚动条同样统一（它们也可滚动） */
.toc, .settings-drawer, .chapter-list {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.toc::-webkit-scrollbar,
.settings-drawer::-webkit-scrollbar,
.chapter-list::-webkit-scrollbar { width: 8px; }
.toc::-webkit-scrollbar-track,
.settings-drawer::-webkit-scrollbar-track,
.chapter-list::-webkit-scrollbar-track { background: transparent; }
.toc::-webkit-scrollbar-thumb,
.settings-drawer::-webkit-scrollbar-thumb,
.chapter-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.toc:hover::-webkit-scrollbar-thumb,
.settings-drawer:hover::-webkit-scrollbar-thumb,
.chapter-list:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-width: 1px;
}

/* ---------- 书架美化：标题统计 / 卡片细节 ---------- */
.shelf-head { align-items: flex-end; }
.shelf-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.shelf-count { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* 书名过长时省略号（配合 title 属性看全文） */
.book-meta b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 简介固定两行，超出省略——避免卡片高度随简介长度跳动 */
.book-premise {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 34px;
}
/* 卡片内阅读进度细条 */
.book-bar {
  height: 3px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-top: 6px;
}
.book-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
/* 封面标题也限行，避免长书名把封面撑满 */
.book-cover span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================= 键盘焦点可见性（可访问性） =================
   此前全站 0 处 :focus-visible —— 键盘 Tab 导航完全看不到焦点位置，
   而本项目大量快捷键（T/S/Esc/方向键）说明键盘是主要操作方式。
   设计要点：
     · 用 :focus-visible 而非 :focus，鼠标点击不显示焦点环（避免"点了就出圈"的廉价感）
     · 双层环（内层背景色 + 外层强调色）保证在深色面板与浅色封面上都清晰
     · 尊重 prefers-reduced-motion；
     · 已有输入框用 :focus 改边框色的规则保留（那是"聚焦态"视觉，不等于焦点环）。 */
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
/* 输入框本身已有 border-color 反馈，焦点环只留极细一圈避免双重边框错觉 */
:where(input, select, textarea):focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}
/* 卡片/章节卡等可点容器：焦点环更柔和，避免像按钮一样生硬 */
.book-card:focus-visible,
.chapter-card:focus-visible,
.rel-node-g:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}
/* 关系图节点是 SVG <g>，用 stroke 表达焦点（无 border-radius 意义） */
.rel-node-g:focus-visible { outline: none; box-shadow: none; }
.rel-node-g:focus-visible .rel-node {
  stroke: var(--accent2); stroke-width: 3;
}
/* 动画偏好：关闭所有非必要动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= 中等窗口适配（1024–1366px） =================
   此前只有 760/900 两个断点，中等窗口（常见笔记本）未专门调：
   侧栏固定 260px + workspace padding 48px，在 1024 宽下正文区只剩 ~700px，
   而在 1366 宽下又显得松散。这里做三处轻量调整（不改布局结构）。 */
@media (max-width: 1366px) {
  /* 侧栏收窄后 4 个按钮放不下一行（需约 330px），允许换行而不是溢出/挤压 */
  .sidebar { width: 268px; padding: 14px; }
  .sb-actions { flex-wrap: wrap; }
  .sb-actions #btn-new { flex: 1 1 100%; order: -1; }  /* 新建提到首行独占 */
  .workspace { padding: 20px 18px; --wrap: 1080px; }
  .detail { padding: 20px 22px 48px; }
  /* 章节操作区按钮换行，避免挤成一团 */
  .ch-actions { flex-wrap: wrap; }
}
@media (max-width: 1120px) {
  .sidebar { width: 232px; }
  .sb-actions { flex-wrap: wrap; }
  .sb-actions #btn-new { flex: 1 1 100%; order: -1; }
  .workspace { --wrap: 100%; --wrap-text: 780px; }
  /* KPI 卡片改 2 列（原来是 flex 自适应，窄屏会挤成细条） */
  .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .kpi b { font-size: 22px; }
}

/* ---------- 提示词编辑器（按题材 × 阶段） ---------- */
.prompt-box { width: 1000px; max-width: 94vw; }
.prompt-hint {
  margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}
.prompt-hint b { color: var(--text); }
.prompt-grid { display: flex; gap: 14px; align-items: stretch; }
.prompt-col { width: 190px; flex: none; display: flex; flex-direction: column; }
.prompt-col.grow { flex: 1; min-width: 0; }
.prompt-col label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.prompt-col select {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: 13px;
}
.prompt-meta { font-size: 12px; line-height: 1.6; margin-top: 4px; }
.prompt-actions { margin-top: auto; padding-top: 10px; }
.prompt-editor-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; gap: 10px;
}
.prompt-title { font-size: 12px; color: var(--muted); }
.prompt-editor {
  flex: 1; min-height: 380px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}
.prompt-editor:disabled { opacity: .55; cursor: not-allowed; background: var(--panel2); }
@media (max-width: 820px) {
  .prompt-grid { flex-direction: column; }
  .prompt-col { width: 100%; }
  .prompt-editor { min-height: 260px; }
}

/* ---------- 卷规划编辑态（tab 内逐卷编辑） ---------- */
.vol-actions { display: flex; gap: 6px; align-items: center; }
/* 注意：不得写 `display:flex` 无条件——那会让 hidden 失效、编辑态常驻显示。
   与项目既有 .modal / .modal-mask 同一坑（2026-10-07 已踩过一次）。 */
.vol-editor { display: none; flex-direction: column; gap: 8px; }
.vol-editor:not([hidden]) { display: flex; }
.vol-ed-tip {
  font-size: 12px; line-height: 1.7; padding: 9px 11px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
}
.vol-ed-tip b { color: var(--text); }
/* 表头与数据行共用 grid 模板，保证列对齐 */
.vol-ed-head,
.vol-ed-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 88px 88px minmax(140px, 2fr) 34px;
  gap: 8px; align-items: center;
}
.vol-ed-head {
  font-size: 12px; color: var(--muted);
  padding: 0 2px 2px; border-bottom: 1px solid var(--line);
}
.vol-ed-row { padding: 3px 0; }
.vol-ed-row input {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.vol-ed-row input:focus {
  /* 与 .ctrl-field textarea / .lib-search 一致：只换边框色，不额外加光环 */
  outline: none; border-color: var(--accent);
}
/* 数字列右对齐更易核对区间 */
.vol-ed-row .ve-start, .vol-ed-row .ve-end { text-align: center; }
.vol-ed-row .ve-del { padding: 6px 0; }
.vol-ed-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 4px;
}
.vol-ed-foot .muted { font-size: 12px; line-height: 1.6; }
#vol-ed-err { white-space: pre-line; }
@media (max-width: 900px) {
  /* 窄屏放弃五列网格，改纵向堆叠（否则章号列会被挤到不可用） */
  .vol-ed-head { display: none; }
  .vol-ed-row {
    grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 8px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel2); margin-bottom: 6px;
  }
  .vol-ed-row .ve-name, .vol-ed-row .ve-summary { grid-column: 1 / -1; }
  .vol-ed-row .ve-del { grid-column: 1 / -1; }
}

/* ---------- 顶栏用户框（Phase 1）----------
   显隐遵循项目铁律：用 hidden 属性 + `:not([hidden])` 切换，禁止无条件 display。 */
.user-box { display: none; }
.user-box:not([hidden]) {
  /* 右侧簇 .topbar-right 已负责靠右与间距，这里不再 margin-left:auto */
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.user-name { color: var(--muted); }

/* ---------- 登录层（Phase 1）---------- */
.login-view { display: none; }
.login-view:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.82);
  backdrop-filter: blur(3px);
}
.login-card {
  width: 340px;
  max-width: 90vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.login-card h2 { margin: 0 0 18px; font-size: 19px; color: var(--text); }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.login-form input {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.login-form input:focus { border-color: var(--accent); }
.login-error {
  margin: 2px 0 0;
  color: var(--danger, #ff6b6b);
  font-size: 13px;
  min-height: 16px;
}
.login-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.login-link:hover { text-decoration: underline; }
#login-register { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 14px; }


/* ================= 计费（M1/M2）：配额 chip + 兑换弹窗 ================= */
.quota-chip {
  font-size: 12px; color: var(--accent2); background: var(--ok-bg);
  border: 1px solid var(--ok-line); border-radius: 999px; padding: 3px 10px;
  cursor: pointer; transition: border-color var(--t-fast);
}
.quota-chip:hover { border-color: var(--accent2); }
.rd-info { font-size: 13px; margin: 0 0 8px; }
.rd-err { color: var(--danger); font-size: 13px; margin: 4px 0 0; }