/* ===== 设计令牌 ===== */
:root {
  --bg: #fafafa; --surface: #ffffff; --surface-raised: #f5f5f5; --surface-muted: #f0f0f0; --surface-strong: #e8e8e8;
  --border: #e0e0e0; --border-hover: #c0c0c0;
  --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-tertiary: #8a8a8a; --text-quaternary: #b0b0b0;
  --accent: #1a1a1a; --accent-light: #e4e4e4;
  --danger: #dc2626; --danger-light: #fee2e2;
  --success: #16a34a; --success-light: #dcfce7;
  --warning: #ca8a04; --warning-light: #fef9c3;
  --purple: #7c3aed; --purple-light: #ede9fe;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --transition-fast: 0.15s ease; --transition-normal: 0.25s ease;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a; --surface: #141414; --surface-raised: #1a1a1a; --surface-muted: #1f1f1f; --surface-strong: #262626;
    --border: #2a2a2a; --border-hover: #3a3a3a;
    --text-primary: #f0f0f0; --text-secondary: #a0a0a0; --text-tertiary: #6a6a6a; --text-quaternary: #4a4a4a;
    --accent: #f0f0f0; --accent-light: #333333;
  }
}
/* 手动主题：浅色 / 深色 / 麦肯锡 */
html[data-theme="light"] {
  --bg: #fafafa; --surface: #ffffff; --surface-raised: #f5f5f5; --surface-muted: #f0f0f0; --surface-strong: #e8e8e8;
  --border: #e0e0e0; --border-hover: #c0c0c0;
  --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-tertiary: #8a8a8a; --text-quaternary: #b0b0b0;
  --accent: #1a1a1a; --accent-light: #e4e4e4;
  --danger: #dc2626; --danger-light: #fee2e2;
  --success: #16a34a; --success-light: #dcfce7;
  --warning: #ca8a04; --warning-light: #fef9c3;
  --purple: #7c3aed; --purple-light: #ede9fe;
}
html[data-theme="dark"] {
  --bg: #0a0a0a; --surface: #141414; --surface-raised: #1a1a1a; --surface-muted: #1f1f1f; --surface-strong: #262626;
  --border: #2a2a2a; --border-hover: #3a3a3a;
  --text-primary: #f0f0f0; --text-secondary: #a0a0a0; --text-tertiary: #6a6a6a; --text-quaternary: #4a4a4a;
  --accent: #f0f0f0; --accent-light: #333333;
}
/* 麦肯锡：深海军蓝正文 + 专业蓝点缀 + 冷灰，咨询风 */
html[data-theme="mckinsey"] {
  --bg: #f3f6fa; --surface: #ffffff; --surface-raised: #eef2f7; --surface-muted: #e6edf4; --surface-strong: #d9e2ec;
  --border: #c6d3e2; --border-hover: #a7b9ce;
  --text-primary: #14263f; --text-secondary: #3e5573; --text-tertiary: #6a82a0; --text-quaternary: #94a7bf;
  --accent: #2f6fb2; --accent-light: #e2edf8;
  --danger: #b03a52; --danger-light: #f6e4e9;
  --success: #2e7d54; --success-light: #e1f0e7;
  --warning: #b0771f; --warning-light: #fbefda;
  --purple: #5b5bd6; --purple-light: #ecebfa;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }

/* ===== 登录页 ===== */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo svg { margin: 0 auto 12px; color: var(--text-secondary); }
.auth-logo h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.auth-logo p { font-size: 13px; color: var(--text-tertiary); }
.auth-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.auth-tab { flex: 1; padding: 10px; font-size: 14px; color: var(--text-tertiary); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all var(--transition-fast); font-family: inherit; }
.auth-tab:hover { color: var(--text-secondary); }
.auth-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight: 500; }

/* ===== 顶部栏 ===== */
.topbar { height: 48px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: relative; z-index: 100; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-logo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.topbar-logo svg { width: 26px; height: 26px; color: var(--text-secondary); }
@keyframes pageFlip { 0% { transform: perspective(400px) rotateY(0deg); } 100% { transform: perspective(400px) rotateY(360deg); } }

.topbar-logo.flip svg { animation: pageFlip 0.6s ease-in-out; transform-style: preserve-3d; }
.topbar-nav { display: flex; gap: 4px; margin-left: 20px; }
.nav-item { padding: 6px 15px; border-radius: 999px 999px; font-size: 15px; color: var(--text-tertiary); cursor: pointer; transition: all var(--transition-fast); border: none; background: transparent; font-family: inherit; }
.nav-item:hover { background: var(--surface-muted); color: var(--text-secondary); }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 500; }

/* ===== 按钮 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all var(--transition-fast); font-family: inherit; }
.btn:hover { background: var(--surface-muted); border-color: var(--border-hover); color: var(--text-primary); }
.btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.btn-primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.btn-sm { padding: 4px 8px; font-size: 11px; }
.btn-xs { padding: 3px 6px; font-size: 11px; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-muted); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== 表单 ===== */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; color: var(--text-primary); background: var(--surface); outline: none; transition: border-color var(--transition-fast); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--border-hover); }
.form-textarea { min-height: 70px; resize: vertical; line-height: 1.6; }
.form-hint { font-size: 11px; color: var(--text-quaternary); margin-top: 3px; }

/* ===== 主布局 ===== */
.main-layout { display: flex; height: calc(100vh - 48px); }
/* 写作工作台：网格布局，1234 卡片横跨第3、4栏 */
#write-view { display: flex; flex-direction: column; height: calc(100vh - 48px); }

/* ===== 书籍卡片 ===== */
.book-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 2px 12px rgba(0,0,0,.05); height: 92px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.book-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.book-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 8px; opacity: 0; transition: opacity var(--transition-fast); }
.book-card:hover .book-card-tools { opacity: 1; }
.book-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card-subtitle { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; }
.book-card-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-quaternary); }

/* ===== 左侧面板 ===== */
.sidebar-left { flex: 0 0 16.6667%; min-width: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sidebar-section:last-child { border-bottom: none; }
.section-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.section-title button { opacity: 1; transition: opacity var(--transition-fast); }
.sidebar-section:hover .section-title button { opacity: 1; }

/* ===== 知识库 ===== */
.kb-tabs { display: flex; gap: 3px; margin-bottom: 8px; margin-top: 0; }
.kb-tab { flex: 1; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 13px; text-align: center; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-tertiary); transition: all var(--transition-fast); font-family: inherit; }
.kb-tab:hover { background: var(--surface-muted); }
.kb-tab.active { background: var(--accent); color: var(--surface); border-color: var(--accent); font-weight: 500; }
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 7px 10px; text-align: center; color: var(--text-tertiary); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--text-tertiary); background: var(--surface-muted); }
.file-list { max-height: 420px; overflow-y: auto; }
.file-list::-webkit-scrollbar { width: 4px; }
.file-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.file-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); position: relative; }
.file-item:hover { background: var(--surface-muted); }
.file-item.active { background: var(--surface-raised); }
.file-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .file-meta { font-size: 11px; color: var(--text-quaternary); flex-shrink: 0; }
.file-item .file-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.file-item:hover .file-actions { opacity: 1; }

/* ===== 标签 ===== */
.tag { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.tag-blue { background: var(--accent-light); color: var(--accent); }
.tag-green { background: var(--surface-raised); color: var(--text-secondary); }
.tag-purple { background: var(--surface-raised); color: var(--text-tertiary); }
.tag-gray { background: var(--surface-strong); color: var(--text-tertiary); }
.tag-red { background: var(--surface-raised); color: var(--text-secondary); }
.tag-yellow { background: var(--surface-raised); color: var(--text-secondary); }

/* ===== 写作模式 ===== */
.mode-card { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); margin-bottom: 5px; }
.mode-card:hover { border-color: var(--border-hover); background: var(--surface-muted); }
.mode-card.active { border-color: var(--text-primary); background: var(--surface-raised); }
.mode-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--surface-strong); flex-shrink: 0; }
.mode-icon svg { width: 14px; height: 14px; color: var(--text-secondary); }
.mode-info { flex: 1; min-width: 0; }
.mode-title { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.mode-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ===== 章节管理 ===== */
.chapter-tree { font-size: 11px; }
.chapter-item { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); color: var(--text-secondary); position: relative; }
.chapter-item:hover { background: var(--surface-muted); }
.chapter-item.active { background: var(--surface-raised); color: var(--accent); font-weight: 700; transform: translateY(-1px); }
.chapter-item .chapter-num { width: 18px; height: 18px; border-radius: 4px; background: var(--surface-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-tertiary); flex-shrink: 0; }
.chapter-item.active .chapter-num { background: var(--accent); color: var(--surface); }
.chapter-item .chapter-status { margin-left: auto; font-size: 11px; }
.chapter-item .chapter-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.chapter-item:hover .chapter-actions { opacity: 1; }
.chapter-children { padding-left: 18px; border-left: 1px solid var(--border); margin-left: 9px; }

/* ===== 中间区域 ===== */
.center-area { flex: 0 0 33.3333%; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* ===== 工作流 ===== */
.workflow-bar { order: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; margin: 0 10px 0; flex-shrink: 0; }
.workflow-steps { display: flex; flex-direction: column; align-items: stretch; gap: 20px; justify-content: center; margin-top: 20px; }
.workflow-step { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: 100%; position: relative; }
.workflow-step-dot { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--text-quaternary); background: var(--surface); transition: all var(--transition-normal); position: relative; z-index: 2; }
.workflow-step-label { position: absolute; left: calc(50% + 30px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: var(--text-secondary); text-align: left; transition: all var(--transition-normal); }
.workflow-step-label .step-sub { font-size: 11px; display: block; margin-top: 1px; color: var(--text-tertiary); }
.workflow-step.active .workflow-step-dot { border-color: var(--accent); background: var(--surface); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.workflow-step.active { border-color: var(--accent); background: var(--surface-raised); }
.workflow-step.active .workflow-step-label { color: var(--accent); font-weight: 500; }
.workflow-step.done .workflow-step-dot { border-color: var(--accent); background: var(--accent); color: var(--surface); }
.workflow-step.done .workflow-step-label { color: var(--text-secondary); }
.workflow-step-line.done { background: var(--accent); }
.workflow-step-line { display: block; width: 6px; height: 105px; background: var(--border); border-radius: 3px; margin: 0 auto; }
/* 节点圆点：进行中"水渐渐变满" */
.workflow-step.active .workflow-step-dot {
  background-image: linear-gradient(to top, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: var(--surface);
  animation: nodeWater 3s ease-in-out forwards;
}
@keyframes nodeWater {
  0% { background-size: 100% 18%; }
  100% { background-size: 100% 78%; }
}
/* 进度条：进行中从一端渐渐填满 */
.workflow-step-line.active {
  background-image: linear-gradient(to bottom, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: lineWater 3s ease-in-out forwards;
}
@keyframes lineWater {
  0% { background-size: 100% 8%; }
  100% { background-size: 100% 100%; }
}

.workflow-step-line.done { background: var(--accent); }

/* 圆形步骤 = 可点击命令按钮，带悬浮感 */
.workflow-step { cursor: pointer; user-select: none; }
.workflow-step-dot { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; }
.workflow-step:hover .workflow-step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px) scale(1.06); }
.workflow-step:hover .workflow-step-label { color: var(--accent); }
.workflow-step:active .workflow-step-dot { transform: scale(.94); }

/* 顶部写作用具条：开始写作 + 模式横排 */
.write-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.write-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.btn-plus { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); }
.btn-plus:hover { border-color: var(--border-hover); background: var(--surface-muted); }
.btn-lg { padding: 10px 18px; font-size: 14px; }
.layout-wrap { position: relative; display: inline-flex; align-items: center; }
.layout-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 60; padding: 6px; min-width: 150px; }
.layout-opt { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.layout-opt:hover { background: var(--surface-muted); }
.output-body.fmt-indent p { text-indent: 2em; }
.output-body.fmt-justify p { text-align: justify; }
.output-body.fmt-space p { margin-bottom: 1.5em; }
.output-body.fmt-line { line-height: 2; }
.model-drop { position: relative; padding: 8px 12px; }
.model-drop-btn { width: 100%; height: 32px; padding: 0 10px; align-items: center; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#model-drop-label { flex: 1; text-align: center; }
.model-drop-btn:hover { border-color: var(--border-hover); }
.model-drop-menu { position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 50; overflow: hidden; }
.model-opt { padding: 9px 12px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.model-opt:hover { background: var(--surface-muted); }
.model-opt.active { background: var(--text-primary); color: var(--surface); font-weight: 500; }
.btn-mode { width: 100%; height: 32px; padding: 0 12px; font-size: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); border-radius: var(--radius-md); cursor: pointer; text-align: center; justify-content: center; display: flex; align-items: center; box-sizing: border-box; transition: all var(--transition-fast); }
.btn-mode:hover { background: var(--surface-muted); border-color: var(--border-hover); }
.wf-progress-bar { height: 3px; background: var(--surface-strong); border-radius: 2px; margin: 0 12px 10px; overflow: hidden; }
.wf-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width .3s ease; }
.mode-chips { display: flex; gap: 6px; }
.mode-chip { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.mode-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.mode-chip.active { background: var(--text-primary); color: var(--surface); border-color: var(--text-primary); }
.workflow-progress { margin-top: 8px; height: 3px; background: var(--surface-strong); border-radius: 2px; overflow: hidden; }
.workflow-progress-bar { height: 100%; background: var(--text-primary); width: 0%; transition: width 0.5s ease; border-radius: 2px; }
.workflow-status { font-size: 11px; color: var(--text-quaternary); margin-top: 5px; text-align: center; }

/* ===== 编辑器 ===== */
.editor-area { order: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 450px; padding: 0 10px; }
.editor-tabs { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 14px; flex-shrink: 0; }
.editor-tab { padding: 8px 14px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-fast); background: transparent; border: none; border-bottom: 2px solid transparent; font-family: inherit; position: relative; display: flex; align-items: center; gap: 4px; }
.editor-tab:hover { color: var(--text-secondary); }
.editor-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight: 500; }
.editor-tab .tab-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.editor-tab .tab-close { margin-left: 4px; opacity: 0; transition: opacity var(--transition-fast); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 3px; }
.editor-tab:hover .tab-close { opacity: 1; }
.editor-tab .tab-close:hover { color: var(--danger); background: var(--danger-light); }
.editor-toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; }
.toolbar-group { display: flex; gap: 2px; padding: 0 5px; border-right: 1px solid var(--border); }
.toolbar-group:last-child { border-right: none; }
.toolbar-btn { padding: 3px 7px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 12px; transition: all var(--transition-fast); font-family: inherit; }
.toolbar-btn:hover { background: var(--surface-muted); color: var(--text-secondary); }
.toolbar-btn.active { background: var(--surface-strong); color: var(--text-primary); }
.editor-content { flex: 1; order: 1; overflow: hidden; position: relative; background: var(--surface); }
.editor-panel { position: absolute; inset: 0; overflow-y: auto; display: none; padding: 14px 18px; }
.editor-panel.active { display: block; }
.editor-panel::-webkit-scrollbar { width: 6px; }
.editor-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.text-editor { width: 100%; min-height: 300px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; font-size: 13px; line-height: 1.8; color: var(--text-secondary); background: var(--surface); resize: vertical; font-family: var(--font-sans); outline: none; transition: border-color var(--transition-fast); }
.text-editor:focus { border-color: var(--border-hover); }
.text-editor::placeholder { color: var(--text-quaternary); }
.quote-block { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-tertiary); font-style: italic; margin: 10px 0; font-size: 12px; line-height: 1.7; }

/* ===== 右侧输出 ===== */
.sidebar-right { flex: 0 0 50%; min-width: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.output-header { order: 2; padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.output-title { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.output-meta { font-size: 11px; color: var(--text-quaternary); }
.output-body { order: 3; flex: 1; overflow-y: auto; padding: 14px; font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.output-body::-webkit-scrollbar { width: 12px; }
.output-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.output-body p { margin-bottom: 10px; }
.output-body .source-tag { display: inline-block; font-size: 11px; padding: 1px 5px; border-radius: 3px; background: var(--surface-strong); color: var(--text-tertiary); margin-bottom: 6px; }

/* ===== 批注 ===== */
.annotation-panel { display: none; }
.annotation-panel::-webkit-scrollbar { width: 4px; }
.annotation-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.annotation-item { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 11px; }
.annotation-item:last-child { border-bottom: none; }
.annotation-header { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.annotation-author { font-weight: 500; color: var(--text-secondary); font-size: 11px; }
.annotation-time { font-size: 11px; color: var(--text-quaternary); margin-left: auto; }
.annotation-text { color: var(--text-tertiary); line-height: 1.5; }
.annotation-input { display: flex; gap: 5px; padding: 8px 14px; border-top: 1px solid var(--border); }
.annotation-input input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; font-family: inherit; outline: none; background: var(--surface); color: var(--text-secondary); }
.annotation-input input:focus { border-color: var(--border-hover); }

/* ===== 导出 ===== */
.export-option { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 6px; cursor: pointer; transition: all var(--transition-fast); }
.export-option:hover { border-color: var(--border-hover); background: var(--surface-muted); }
.export-option-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.export-option-title { font-size: 12px; font-weight: 500; }
.export-option-desc { font-size: 11px; color: var(--text-tertiary); }

/* ===== 空状态 ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-quaternary); text-align: center; padding: 30px; }
.empty-state svg { margin-bottom: 10px; opacity: 0.5; }
.empty-state .empty-title { font-size: 13px; color: var(--text-tertiary); margin-bottom: 3px; }
.empty-state .empty-desc { font-size: 11px; line-height: 1.5; }

/* ===== 模态框 ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.show { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-xl); width: 460px; max-width: 90vw; max-height: 80vh; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-body { padding: 18px; overflow-y: auto; max-height: 55vh; }
.modal-footer { padding: 10px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ===== 状态面板 ===== */
.status-panel { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; margin-top: auto; }
.status-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.status-row:last-child { margin-bottom: 0; }
.status-value { color: var(--text-secondary); }
.status-value.success { color: var(--success); font-weight: 500; }

/* ===== Toast ===== */
.toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 6px; }
.toast { background: var(--text-primary); color: var(--surface); padding: 8px 16px; border-radius: var(--radius-lg); font-size: 12px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); color: var(--text-primary); }

/* ===== 动画 ===== */
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
::selection { background: rgba(37, 99, 235, 0.2); }

/* ===== 专家评审面板 ===== */
.critique-panel { border-top: 1px solid var(--border); background: var(--surface); max-height: 320px; overflow-y: auto; flex-shrink: 0; }
.crit-placeholder { padding: 14px 12px; font-size: 11px; color: var(--text-quaternary); line-height: 1.7; }
.crit-body { padding: 4px 12px 12px; }
.crit-score-wrap { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.crit-score { font-size: 30px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.crit-verdict { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.crit-pass { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.crit-revise { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.crit-rewrite { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.crit-summary { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.7; }
.crit-dim { margin-bottom: 7px; }
.crit-dim-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); margin-bottom: 3px; }
.crit-bar { height: 4px; background: var(--surface-raised); border-radius: 2px; overflow: hidden; }
.crit-bar-fill { height: 100%; background: var(--accent); }
.crit-cites { font-size: 11px; margin: 6px 0; color: var(--text-secondary); line-height: 1.6; }
.crit-warn { color: #ef4444; }
.crit-issue { border-left: 2px solid var(--border); padding: 5px 8px; margin-bottom: 6px; font-size: 11px; line-height: 1.6; color: var(--text-secondary); background: var(--surface-raised); border-radius: var(--radius-sm); }
.crit-critical { border-left-color: #ef4444; }
.crit-major { border-left-color: #f59e0b; }
.crit-minor { border-left-color: #94a3b8; }
.crit-issue-q { color: var(--text-tertiary); font-style: italic; margin-bottom: 2px; }
.crit-issue-fix { color: var(--text-primary); margin-top: 2px; }
.crit-praise { font-size: 11px; color: #22c55e; margin-top: 6px; line-height: 1.6; }

/* ===== 文库预览 ===== */
.preview-sidebar { width: 330px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.preview-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.preview-header { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.preview-head-left, .preview-head-right { display: flex; align-items: center; gap: 8px; }
.preview-head-title { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; max-width: 60%; min-width: 0; }
.preview-body { flex: 1; overflow-y: auto; padding: 20px 36px 40px; font-size: 16px; line-height: 1.9; color: var(--text-primary); background: var(--surface); }
.preview-body::-webkit-scrollbar { width: 12px; }
.preview-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
.preview-body::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
.preview-chapter-title { font-size: 18px; font-weight: 700; text-align: center; color: var(--text-primary); margin: 4px auto 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.preview-body p { font-size: 16px; line-height: 2.2; text-align: justify; text-indent: 2em; margin: 0 0 1.1em; }
.preview-chapter { padding: 8px 14px; font-size: 13px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-primary); font-weight: 600; }
.preview-chapter:hover { background: var(--surface-raised); }
.preview-chapter.active { background: var(--surface-raised); border-left-color: var(--accent); color: var(--accent); }
.preview-info { width: 480px; border-left: 1px solid var(--border); background: var(--surface); }
.ann-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ann-grid .btn { width:100%; justify-content:center; color: var(--accent); font-weight: 600; padding-left:2px; padding-right:2px; }
.ann-mark { background: var(--surface-strong); color: inherit; border-radius: 3px; padding: 0 1px; }
.ann-mark.active { background: var(--surface-strong); color: inherit; font-weight: 600; }
.output-header .btn { height: 32px; min-width: 44px; padding: 0 10px; justify-content: center; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.preview-ann-item { position: relative; margin-bottom: 10px; padding: 8px 10px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.preview-ann-item:hover { border-color: var(--border-hover); }
.preview-ann-item.active { background: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.preview-ann-item.active .preview-ann-q { color: var(--text-tertiary); }
.preview-ann-item.active .preview-ann-n { color: var(--text-primary); }
.preview-ann-item.active .preview-ann-m { color: var(--text-tertiary); }
.preview-ann-q { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 4px; }
.preview-ann-n { font-size: 12px; color: var(--text-primary); line-height: 1.6; margin-bottom: 4px; }
.preview-ann-m { font-size: 11px; color: var(--text-tertiary); }
.preview-ann-edit { width: 100%; min-height: 54px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font-size: 12px; resize: vertical; line-height: 1.5; font-family: inherit; }
.preview-ann-tools { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 2px; }
.ann-tool { font-size: 18px; line-height: 1; cursor: pointer; opacity: 1; color: var(--text-secondary); transition: all var(--transition-fast); }
.ann-tool:hover { color: var(--text-primary); transform: scale(1.12); }
.ann-tool[data-act="del"]:hover { color: var(--danger); }
.preview-ann-actions { display: flex; gap: 6px; margin-top: 6px; }

/* ===== 中间章节栏 ===== */
.center-split { flex: 1; display: flex; min-height: 0; }
.chapter-rail { flex: 0 0 50%; min-width: 0; order: 2; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); }

.chapter-prog { height: 5px; background: rgba(128,128,128,.18); border-radius: 3px; overflow: hidden; margin: 5px 6px 2px; }
.chapter-prog-fill { height: 100%; width: 0; background: var(--accent); transition: width .5s ease; }
/* 通用卡片网格：替换「整行细条 + 右侧大片空白」的列表，让短条目按网格铺开 */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.card { border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface); cursor:pointer; transition:all var(--transition-fast); min-width:0; }
.card:hover { border-color:var(--accent); box-shadow:var(--shadow-md); }
.card-title { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-bar { height:5px; border-radius:3px; background:var(--surface-strong); overflow:hidden; margin:0 0 7px; }
.card-bar > i { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--text-tertiary); }
.card-chip { font-size:11px; padding:1px 6px; border-radius:4px; background:var(--surface-strong); color:var(--text-tertiary); white-space:nowrap; }
.card-chip.ok { background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); }
.card-chip.warn { background:color-mix(in srgb, var(--warning) 18%, transparent); color:var(--warning); }
.card-chip.busy { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }

.chapter-item { position: relative; }
.chapter-item > .chapter-row-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); opacity: .22; transition: width .5s ease; pointer-events: none; z-index: 0; border-radius: inherit; }
.chapter-item > .chapter-txt { position: relative; z-index: 1; }
.chapter-item.charging > .chapter-row-fill { animation: chargePulse 1.1s ease-in-out infinite; }
@keyframes chargePulse { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }
.rk:hover { opacity: 1; }
@keyframes tweakPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.icon-flame { display: none; }
.rk.launching { animation: rocketBreath 1.15s ease-in-out infinite; }
.rk.launching .rocket-stack { animation: rocketBob 1.15s ease-in-out infinite; }
.flame-set { display: flex; gap: 2px; margin-top: -3px; }
.icon-flame { transform-origin: top center; }
.rk.launching .icon-flame { display: block; animation: flameFlicker .26s ease-in-out infinite alternate; }
.rk.launching .icon-flame:nth-child(2) { animation-delay: .09s; }
.rk.launching .icon-flame:nth-child(3) { animation-delay: .18s; }
/* 降落：火焰渐收，火箭缓缓落下并轻微回弹后静止 */
.rk.landing .rocket-stack { animation: rocketLand 1.05s cubic-bezier(.4, 0, .6, 1) forwards; }
.rk.landing .icon-flame { display: block; animation: flameDie 1.05s ease-in forwards; }
@keyframes rocketLand {
  0%   { transform: translateY(-3px); }
  55%  { transform: translateY(2px); }
  75%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
@keyframes flameDie {
  0%   { opacity: 1; transform: scaleY(1.3); }
  70%  { opacity: .5; transform: scaleY(.6); }
  100% { opacity: 0; transform: scaleY(.15); }
}
@keyframes rocketBreath { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes rocketBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes flameFlicker { 0% { opacity: .3; transform: scaleY(.75); } 100% { opacity: 1; transform: scaleY(1.3); } }
.chapter-item > * { position: relative; z-index: 1; }
/* 补充：动态生成元素样式 */
.kb-file { display:flex; align-items:center; gap:6px; padding:5px 8px; font-size: 12px; border-bottom:1px solid var(--border); color:var(--text-secondary); cursor:pointer; border-radius:4px; }
.kb-file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-badge { flex-shrink:0; font-size:10px; padding:1px 5px; border-radius:4px; background:var(--surface-strong); color:var(--text-tertiary); white-space:nowrap; }
.kb-badge-ok { background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); }
.kb-badge-warn { background:color-mix(in srgb, var(--warning) 18%, transparent); color:var(--warning); }
.kb-del { flex-shrink:0; padding:0 2px; opacity:0; transition:opacity var(--transition-fast); }
.kb-file:hover .kb-del { opacity:1; }
.kb-file:hover { background:var(--surface-muted); }
.ann-item { display:flex; align-items:flex-start; gap:8px; padding:10px 10px; border-bottom:1px solid var(--border); font-size: 12px; line-height:1.8; }
/* 写作区竖向 6 段流水线 */
.ws-col { flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--border); overflow:hidden; background:var(--surface); }
.ws-col:last-child { border-right:none; }
.ws-col.active { background:var(--surface-raised); box-shadow: inset 0 3px 0 var(--accent); }
.ws-col-head { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 8px; height:44px; box-sizing:border-box; flex-shrink:0; }
.ws-col-title { font-size: 16px; font-weight:700; color:var(--accent); white-space:nowrap; }
.ws-col-body { flex:1; min-height:0; overflow:hidden; }
.ws-scroll { overflow:auto; font-size: 12px; line-height:1.7; color:var(--text-secondary); }
.ws-scroll .chapter-item { display:block; padding:6px 4px; border:none; border-radius:0; cursor:pointer; line-height:1.6; color:var(--text-secondary); }
.ws-scroll .chapter-item:hover { color:var(--accent); background:var(--surface-muted); }
.ws-scroll .chapter-item.sel { color:var(--accent); font-weight:700; background:transparent; }

/* 写作进度胶囊条 */
.wf-stepper { position:relative; display:flex; align-items:center; justify-content:center; padding:8px 0 10px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; min-height:72px; }
.wf-track { position:absolute; left:7.34%; right:13.76%; top:50%; height:4px; background:var(--border); border-radius:2px; z-index:0; transform:translateY(-50%); }
.wf-fill { height:100%; width:0; background:var(--accent); border-radius:2px; transition:width .4s ease; }
.wf-cell { flex:1; display:flex; flex-direction:column; align-items:center; z-index:1; cursor:pointer; }
.wf-capsule { position:relative; display:inline-flex; align-items:center; justify-content:center; width:96px; height:40px; border-radius:999px; background:var(--surface); border:1px solid var(--accent); overflow:hidden; }
.wf-capsule-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:999px; }
@keyframes wfFill { from { width:0; } to { width:100%; } }
.wf-capsule-text { position:relative; z-index:1; font-size: 14px; font-weight:700; color:var(--accent); white-space:nowrap; }
.wf-label { margin-top:8px; font-size: 12px; font-weight:700; color:var(--text-tertiary); white-space:nowrap; transition:all var(--transition-fast); }
.wf-capsule.active { box-shadow:0 0 0 4px var(--accent-light); }
.wf-capsule.done .wf-capsule-fill { width:100%; transition:width .5s ease; }
.wf-capsule.done .wf-capsule-text { color:var(--surface); }
.wf-capsule.active .wf-capsule-fill { width:0; }

.wf-label.active { color:var(--accent); }
.wf-label.done { color:var(--text-secondary); }


#app-page { padding-left: 24px; }


/* 步骤列：内容区排工具栏之后，工具栏上移到顶部 */
.ws-col > .ws-col-body { order: 2; }
/* 「引用依据」条排在工具栏之下，否则它显示时会把该栏工具栏往下压、与其他栏位错位 */
.ws-col > #draft-citations { order: 1; }


/* 步骤胶囊工作态：脉冲充电动画 */
@keyframes wfPulse { 0% { width:0; } 50% { width:100%; } 100% { width:0; } }
.wf-cell.working .wf-capsule-fill { animation: wfPulse 1.4s ease-in-out infinite; }
.wf-cell.working .wf-capsule-text { color:var(--surface); }

/* 步骤列内容区顶部全宽横线 */
/* 工具栏框与书名行对齐：同高、去垂直 margin，底部一条线贯穿 */
.ws-col > div[style*="flex-wrap:nowrap;"] { border-bottom:1px solid var(--border); }

/* 书名行与工具栏框同高对齐，底部一条线 */
/* 书名现在是框架栏的栏头：单行省略，不再占一整条带 */
#outline-book-title { font-size:14px; font-weight:700; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:100%; letter-spacing:0.4px; }

/* ①框架 书名 和⑤成文 工具栏 微调下移对齐 */



/* 工具栏按钮放大并均分宽度 */
.ws-col > div[style*="flex-wrap:nowrap;"] { justify-content:space-between; }
.ws-col > div[style*="flex-wrap:nowrap;"] .btn, .ws-col > div[style*="flex-wrap:nowrap;"] select { flex:1; min-width:0; height:36px; font-size: 13px; text-align:center; }
.ws-col > div[style*="flex-wrap:nowrap;"] .btn { display:flex; align-items:center; justify-content:center; }

/* ①框架章节列表文字扩一号 */
#outline-output { font-size: 12px; padding:0 12px; }

/* 知识库文字扩一号 */
#band-kb { font-size: 13px; }
/* 工具栏按钮：默认无框，悬停/点击才显示框 */
.ws-col > div[style*="flex-wrap:nowrap;"] .btn { border:1px solid transparent; background:transparent; box-shadow:none; }
.ws-col > div[style*="flex-wrap:nowrap;"] .btn:hover { border-color:var(--border); background:var(--surface-muted); color:var(--text-primary); }
.ws-col > div[style*="flex-wrap:nowrap;"] .btn:active, .ws-col > div[style*="flex-wrap:nowrap;"] .btn:focus { border-color:var(--accent); background:var(--surface-raised); }

/* 预览按钮放大 */
#preview-enter-edit { font-size: 15px; padding:8px 18px; }
.ann-grid .btn { font-size: 15px; padding:10px 8px; }


/* ===== 预览页：左右两栏头部横线与中间正文区分隔线对齐 ===== */
.preview-header,
.preview-sidebar > .section-title,
.preview-info > .ann-grid {
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.preview-sidebar > .section-title {
  display: flex;
  align-items: center;
  padding: 0 14px !important;
  text-transform: none;
  letter-spacing: 0;
}
.preview-info > .ann-grid {
  align-items: center;
}



/* ============================================================
   高级感精修（全站统一）
   原则：柔阴影分层 · 发丝级边框 · 克制留白 · 统一过渡 · 精致字距
   ============================================================ */

/* —— 1. 滚动条（全站） —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-strong) transparent; }

/* —— 2. 基础文字 —— */
body { letter-spacing: 0.1px; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: 0.3px; }

/* —— 3. 顶栏：发丝阴影 + 层次 —— */
.topbar {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.04);
  position: relative; z-index: 100;
}
.topbar-logo { font-weight: 650; letter-spacing: 0.3px; }

/* —— 4. 导航胶囊 —— */
.nav-item { font-size: 14px; padding: 6px 16px; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); }
.nav-item:hover { background: var(--surface-muted); color: var(--text-primary); }
.nav-item.active { box-shadow: 0 1px 5px rgba(0,0,0,0.14); letter-spacing: 0.2px; }

/* —— 5. 按钮质感（去生硬、加柔和过渡与阴影） —— */
.btn { border-radius: 8px; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); }
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { box-shadow: none; }
.btn-primary { box-shadow: 0 1px 3px rgba(0,0,0,0.16); }
.btn-primary:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.20); }

/* —— 6. 输入/下拉：统一柔和 —— */
.form-input, select, textarea { border-radius: 8px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-input:focus, select:focus, textarea:focus { border-color: var(--text-secondary); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); outline: none; }

/* —— 7. 面板/卡片：柔和边框 + 浅阴影 + 悬停轻抬 —— */
.status-panel, .wb-today, .kb-file, .file-item, .ann-item, .ledger-row,
.auth-card, .modal, .book-card, .wf-cell {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.book-card:hover, .kb-file:hover, .file-item:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}
.book-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.wb-today { border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }

/* —— 8. 表格行/列表项悬停 —— */
.ledger-row:hover td { background: var(--surface-raised); }

/* —— 9. 焦点可见（无障碍 + 精致） —— */
:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 1px; border-radius: 4px; }

/* —— 10. 选中文本 —— */
::selection { background: var(--accent); color: var(--surface); }

/* —— 11. 区块标题字距 —— */
.section-title, .ws-col-title, .preview-head-title { letter-spacing: 0.4px; }



/* ============================================================
   胶囊统一：工作台步骤胶囊 / 导航胶囊 / 标签，统一成一套 pill 语言
   ============================================================ */

/* —— 工作台步骤胶囊 ①–⑤：统一尺寸/圆角/字距/状态 —— */
.wf-capsule {
  width: 108px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.wf-capsule:hover { box-shadow: var(--shadow-md); }
.wf-capsule-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent);
}
.wf-capsule.active { box-shadow: 0 0 0 3px var(--accent-light); }
.wf-capsule.done .wf-capsule-text { color: var(--surface); }
.wf-cell.working .wf-capsule-text { color: var(--surface); }

/* —— 导航胶囊：与步骤胶囊同一圆角语言 —— */
.nav-item { border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; }

/* —— 标签/徽章：也统一为胶囊 —— */
.tag { border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; }
.output-body .source-tag { border-radius: 999px; padding: 2px 8px; }



/* ============================================================
   设计语言统一：胶囊动作按钮（pill） vs 矩形表单按钮
   ============================================================ */
.btn-pill { border-radius: 999px; height: 38px; padding: 0 20px; font-weight: 500; letter-spacing: 0.3px; box-shadow: var(--shadow-sm); }
.btn-pill.btn-sm { height: 30px; padding: 0 14px; font-size: 12px; }
.btn-pill.btn-ghost { box-shadow: none; }
.btn-pill:hover { box-shadow: var(--shadow-md); }
/* 全局统一：所有 kb-tab（内化/写作/沉淀的 tab 按钮）一律横向胶囊——去掉 flex:1 拉伸，加大左右 padding，按内容宽呈 pill 形态 */
.kb-tab { border-radius: 999px; flex: 0 0 auto; padding: 7px 20px; white-space: nowrap; }
.ann-grid .btn { border-radius: 999px; }



/* —— 书卡：类名对齐（原 CSS 写的是 .book-card-subtitle，实际用的是 .book-card-sub）+ 定高后内容不溢出 —— */
.book-card { overflow: hidden; }
.book-card-sub { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card-title { max-width: 100%; }



/* —— 卡片工具图标：悬停渐显 —— */
.book-card-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); }
.book-card:hover .book-card-tools,
.book-card:focus-within .book-card-tools { opacity: 1; pointer-events: auto; }



/* ============================================================
   模块化字号音阶（全站唯一来源 · 共 10 级）
   高级感来自「有限的层级 + 明确的用途」，而非无限微调
   ============================================================ */
:root {
  --fs-micro: 11px;     /* 标签 / 徽章 / 极小元信息 */
  --fs-caption: 12px;   /* 说明 / 副标题 / 密集列表 */
  --fs-small: 13px;     /* 密集 UI / 次要正文 */
  --fs-base: 14px;      /* 按钮 / 控件 / 面板正文 ← UI 基准 */
  --fs-body: 15px;      /* 面板阅读正文 */
  --fs-article: 16px;   /* 文章正文（预览 / 成文） */
  --fs-title: 18px;     /* 区块标题 */
  --fs-card: 20px;      /* 卡片 / 弹窗标题 */
  --fs-page: 24px;      /* 页面标题 */
  --fs-hero: 30px;      /* 主视觉标题 */
}


/* 展示级字号（主视觉/大标题专用，仅 3 级） */
:root {
  --fs-hero: 30px;
  --fs-display: 42px;
  --fs-mega: 54px;
}


/* —— 预览页批注三按钮：需以更高特异性覆盖 .btn-pill.btn-sm 的 12px —— */
.preview-info .ann-grid .btn {
  font-size: 15px;
  padding: 10px 8px;
  height: auto;
  letter-spacing: 0.3px;
  font-weight: 600;
}



/* —— 新生选题：左侧排行榜条目悬停 —— */
.topic-rank-item { transition: background var(--transition-fast); }
.topic-rank-item:hover { background: var(--surface-muted); }



/* —— 沉淀页右栏（再次整理挖掘结果）：与左栏字号统一 —— */
#sediment-mine-output { font-size: 13px; line-height: 1.9; }
#sediment-mine-output h3 { font-size: 16px !important; margin: 16px 0 8px !important; }
#sediment-mine-output p { font-size: 13px; margin: 0 0 8px; }



/* —— 地图热力亮点：呼吸动画 —— */
@keyframes mapPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ===== 六列写作区：正文一 / 正文二 ===== */
#band-draft1 > .ws-col-body, #band-draft2 > .ws-col-body { order: 0; }
.draft-badge { font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56%; }
.draft-stages { display: flex; gap: 4px; padding: 0 8px; height: 44px; align-items: center; box-sizing: border-box; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.draft-stage { flex: 1; text-align: center; font-size: 11px; color: var(--text-tertiary); padding: 2px 0; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); transition: background .3s ease, color .3s ease; }
.draft-stage.done { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.draft-stage.working { border-color: var(--accent); color: var(--accent); animation: draftPulse 1.2s ease-in-out infinite; }
@keyframes draftPulse { 0% { box-shadow: 0 0 0 0 var(--accent-light); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.draft-body { height: 100%; overflow: auto; padding: 8px 12px; font-size: 13px; line-height: 1.8; outline: none; color: var(--text-primary); text-indent: 2em; white-space: pre-wrap; }
.draft-process { flex-shrink: 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); background: var(--surface); }
.draft-process summary { cursor: pointer; padding: 4px 10px; display: flex; gap: 8px; align-items: center; user-select: none; list-style: none; }
.draft-process summary::-webkit-details-marker { display: none; }
.draft-process summary::before { content: "▸"; font-size: 11px; color: var(--text-tertiary); transition: transform .15s ease; }
.draft-process[open] summary::before { transform: rotate(90deg); }
.draft-proc-summary { font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-process-body { max-height: 34vh; overflow: auto; border-top: 1px dashed var(--border); padding: 6px 10px; line-height: 1.7; font-size: 12px; }
.draft-revise { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); white-space: pre-wrap; text-indent: 2em; color: var(--text-secondary); }
.draft-toolbar { flex-shrink: 0; display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); align-items: center; height: 44px; box-sizing: border-box; }
.draft-toolbar .btn { flex: 1; min-width: 0; height: 30px; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* ===== 栏头胶囊：充电动画（已把原来的按钮行 / 四段进度行合并进来）===== */
.ws-cap { position: relative; flex: 1 1 auto; min-width: 0; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); overflow: hidden; box-sizing: border-box; font-family: inherit; cursor: default; }
.ws-cap.clickable { cursor: pointer; }
.ws-cap.clickable:hover { box-shadow: var(--shadow-sm); background: var(--surface-muted); }
.ws-cap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); opacity: 0; transition: width .45s ease, opacity .3s ease; }
.ws-cap-text { position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-cap.working .ws-cap-fill { animation: wsCapCharge 1.5s ease-in-out infinite; }
.ws-cap.done .ws-cap-fill { width: 100%; opacity: 1; }
.ws-cap.done .ws-cap-text { color: var(--surface); }
.ws-cap.warn { border-color: var(--warning); background: var(--surface); }
.ws-cap.warn .ws-cap-fill { width: 0; opacity: 0; animation: none; }
.ws-cap.warn .ws-cap-text { color: var(--warning); }
@keyframes wsCapCharge { 0% { width: 0; opacity: .38; } 60% { width: 100%; opacity: .38; } 100% { width: 100%; opacity: 0; } }

/* 正文一/二胶囊：四段是**四个各自独立的小胶囊**，之间用真实间隙分开（不画等分线）。
   每段自己填自己 —— 全部完成时看到的是「这四个胶囊满了」，而不是整条糊成一块 */
.ws-cap.seg4 { padding: 0; gap: 3px; align-items: stretch; justify-content: stretch; border: none; background: transparent; overflow: visible; }
.ws-cap-seg { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--accent); border-radius: 999px; box-sizing: border-box; transition: background .2s ease; }
.ws-cap-seg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .4s ease, opacity .3s ease; }
.ws-cap-seg-text { position: relative; z-index: 1; font-size: 10px; font-weight: 600; color: var(--accent); white-space: nowrap; letter-spacing: .3px; transition: color .3s ease; }
.ws-cap-seg.done::before { width: 100%; }
.ws-cap-seg.done .ws-cap-seg-text { color: var(--surface); }
.ws-cap-seg.working::before { animation: wsSegCharge 1.5s ease-in-out infinite; }
@keyframes wsSegCharge { 0% { width: 0; opacity: .38; } 60% { width: 100%; opacity: .38; } 100% { width: 100%; opacity: 0; } }
.ws-cap.seg4.clickable:hover { background: transparent; box-shadow: none; }
.ws-cap.seg4.clickable:hover .ws-cap-seg { background: var(--surface-muted); }
.ws-cap.seg4.warn .ws-cap-warn { border: 1px solid var(--warning); border-radius: 999px; }
/* 警告态：一层覆盖文字说明原因，把四段盖住 */
.ws-cap-warn { display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; padding: 0 8px; background: var(--surface); font-size: 10px; font-weight: 600; color: var(--warning); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-cap.warn .ws-cap-warn { display: flex; }
.ws-cap.warn .ws-cap-seg { border-color: var(--warning); }
.ws-cap.warn .ws-cap-seg-text { color: var(--warning); }

/* ===== 文库：四个模块做 2×2 矩形四等分 ===== */
.lib-cell { border:1px solid var(--border); border-radius:14px; padding:16px 18px; background:var(--surface); display:flex; flex-direction:column; min-height:250px; box-shadow:var(--shadow-sm); min-width:0; overflow:hidden; }
.lib-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.lib-mod { font-size:11px; font-weight:600; letter-spacing:2px; color:var(--text-tertiary); text-transform:uppercase; }
.lib-title { font-size:20px; font-weight:700; color:var(--accent); letter-spacing:1px; margin:2px 0 0; }
.lib-acts { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.lib-status { font-size:11px; color:var(--text-tertiary); }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; align-content:start; }
.lib-empty { grid-column:1/-1; padding:26px 0; text-align:center; color:var(--text-tertiary); font-size:12px; line-height:1.8; }

/* ===== 文库四格「收纳」：卡片区固定高度内滚动，不再把整页撑长 ===== */
.lib-scroll { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.lib-scroll::-webkit-scrollbar { width: 8px; }
.lib-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.lib-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
.lib-count { font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0; margin-left: 2px; }
.lib-filter { width: 132px; height: 30px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-size: 12px; font-family: inherit; outline: none; transition: border-color var(--transition-fast); }
.lib-filter:focus { border-color: var(--accent); }
.lib-filter::placeholder { color: var(--text-tertiary); }



/* ===== 火箭图标：放在指令栏标题行右侧（不是独立按钮）===== */
.rk-ico { position: relative; flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--accent); cursor: pointer; opacity: .88; border-radius: 50%; font-family: inherit; }
.rk-ico:hover { opacity: 1; background: var(--surface-muted); }
.rk-ico .rk-icon { position: relative; display: inline-flex; align-items: center; line-height: 0; }
.rk-ico .flame-set { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; gap: 1px; pointer-events: none; }
.rk-ico .icon-flame { display: none; }
.rk-ico.launching .flame-set, .rk-ico.landing .flame-set { display: flex; }
.rk-ico.launching .icon-flame, .rk-ico.landing .icon-flame { display: block; }
.rk.launching .rk-icon { animation: rocketBob 1.15s ease-in-out infinite; }
.rk.landing .rk-icon { animation: rocketLand 1.05s cubic-bezier(.4, 0, .6, 1) forwards; }

/* ===== 内化模块（卡片库 + SM-2 复习） ===== */
.iz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.iz-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); }
.iz-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.iz-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iz-card-src { font-size: 11px; color: var(--text-tertiary); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iz-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.iz-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 999px; flex-shrink: 0; background: var(--accent-light); color: var(--accent); }
.iz-badge-argument { background: var(--purple-light); color: var(--purple); }
.iz-badge-qa { background: var(--success-light); color: var(--success); }
.iz-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--surface-raised); color: var(--text-secondary); }
.iz-review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-md);
  min-height: 220px;
  cursor: pointer;
}
.iz-review-card:active { transform: scale(.995); }

/* 内化收件箱 */
.iz-inbox-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 12px; }
.iz-inbox-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.iz-inbox-book { font-size: 13px; font-weight: 700; color: var(--accent); }
.iz-inbox-chapter { font-size: 12px; color: var(--text-secondary); }
.iz-inbox-excerpt { font-size: 13px; line-height: 1.8; color: var(--text-secondary); max-height: 96px; overflow: hidden; }
.iz-inbox-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* 认知域蒸馏 */
.iz-domain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.iz-domain-empty { border-style: dashed; opacity: .62; }
.iz-domain-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.iz-domain-name { font-size: 15px; font-weight: 700; color: var(--accent); }
.iz-domain-count { font-size: 12px; color: var(--text-tertiary); font-weight: 600; }
.iz-domain-blank { font-size: 12px; color: var(--text-tertiary); padding: 8px 0; }
.iz-domain-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px dashed var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iz-domain-item:last-child { border-bottom: none; }
.iz-domain-more { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
.iz-domain-faculty-name { font-size: 14px; font-weight: 700; color: var(--accent); margin: 14px 0 8px; }

/* 跨书母题归集 */
.iz-meta-topic { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.iz-meta-topic-name { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.iz-meta-book { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.iz-meta-book:last-child { border-bottom: none; }
.iz-meta-ev { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.7; }
.iz-meta-candidates { margin-top: 14px; font-size: 12px; color: var(--warning); }