/* ============================================================
   Design System — 极简风格（参考 DeepSeek，白底黑字）
   - 配色：纯白底 + 深黑字 + 极简灰阶 + 单一克制蓝点缀
   - 字体：≥14px，长时间阅读不疲劳
   - 布局：减少视觉干扰，突出内容本身
   ============================================================ */
:root {
  /* 背景层：白底为主，仅用极淡灰阶区分层级 */
  --bg-root: #ffffff; --bg-surface: #ffffff; --bg-elevated: #f7f7f8;
  --bg-hover: #f2f2f3; --bg-tertiary: #f7f7f8; --bg-primary: #ffffff;
  /* 边框：极淡灰，几乎隐形 */
  --border: #e5e5e7; --border-light: #f0f0f1; --border-strong: #d4d4d6;
  /* 文字：深黑主色 + 灰阶层次 */
  --text-primary: #1a1a1a; --text-secondary: #525252; --text-muted: #8c8c8c;
  /* 强调色：单一克制深蓝（DeepSeek 风），不用紫色 */
  --accent: #1e6fff; --accent-hover: #1557d8; --accent-soft: rgba(30,111,255,0.08);
  --green: #00875a; --green-soft: rgba(0,135,90,0.08);
  --yellow: #b8860b; --yellow-soft: rgba(184,134,11,0.08);
  --blue: #1e6fff; --blue-soft: rgba(30,111,255,0.08);
  --red: #d14343; --red-soft: rgba(209,67,67,0.08);
  --radius: 8px; --radius-lg: 12px;
  /* 阴影：极淡，几乎无感 */
  --shadow: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-hover: 0 2px 8px rgba(0,0,0,0.06);
  --sidebar-w: 240px;
  --font-heading: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font-body); background: var(--bg-root); color: var(--text-primary);
  height: 100vh; overflow: hidden; font-size: 15px; line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Layout
   ============================================================ */
.app { display:flex; height:100vh; position:relative; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--bg-surface);
  border-right:1px solid var(--border-light); display:flex; flex-direction:column;
  z-index:100; transition: transform 0.3s ease;
}
.sidebar-header { padding:18px 16px; border-bottom:1px solid var(--border-light); }
.sidebar-header h1 { font-size:15px; font-weight:600; color:var(--text-primary); font-family:var(--font-heading); display:flex; align-items:center; gap:8px; }
.sidebar-header .subtitle { font-size:12px; color:var(--text-muted); margin-top:3px; font-weight:400; }
.sidebar-stories { flex:1; overflow-y:auto; padding:6px 8px; }

/* Main */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* Topbar */
.topbar {
  height:56px; min-height:56px; background:var(--bg-surface); border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; padding:0 24px; gap:12px;
}
.topbar .menu-btn { display:none; background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; padding:4px; }
.topbar .breadcrumb { font-size:14px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar .breadcrumb span { color:var(--text-primary); font-weight:600; }
.topbar .spacer { flex:1; }
.topbar .stats { font-size:13px; color:var(--text-muted); display:flex; gap:16px; }
.topbar .stat { white-space:nowrap; }
.topbar .stat-value { color:var(--text-primary); font-weight:600; }

/* Content */
.content { flex:1; overflow-y:auto; padding:24px 28px; }
.content-inner { max-width:760px; margin:0 auto; }

/* ============================================================
   Buttons
   ============================================================ */
.btn { cursor:pointer; border:none; border-radius:var(--radius); padding:8px 16px; font-size:14px; font-weight:500; font-family:var(--font-body); transition:all 0.15s ease; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.btn:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--accent-hover); }
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-secondary { background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background:var(--bg-hover); border-color:var(--text-muted); }
.btn-ghost { background:transparent; color:var(--text-secondary); padding:6px 12px; }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-sm { padding:5px 12px; font-size:13px; }
.btn-xs { padding:3px 8px; font-size:12px; border-radius:6px; }
.btn-block { width:100%; justify-content:center; }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover:not(:disabled) { background:#007048; }
.btn-yellow { background:var(--yellow); color:#fff; }
.btn-yellow:hover:not(:disabled) { background:#9a7300; }
.btn-red { background:var(--red); color:#fff; }

/* Focus ring for keyboard nav */
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   Story List
   ============================================================ */
.story-item {
  padding:10px 12px; border-radius:var(--radius); cursor:pointer; margin-bottom:2px;
  transition:background 0.15s; border-left:3px solid transparent;
}
.story-item:hover { background:var(--bg-hover); }
.story-item.active { background:var(--accent-soft); border-left-color:var(--accent); }
.story-item .story-title { font-weight:500; font-size:14px; }
.story-item .story-meta { font-size:12px; color:var(--text-muted); }

/* ============================================================
   Cards & Forms
   ============================================================ */
.card { background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.card:hover { border-color:var(--border-strong); }
.card-header { font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; justify-content:space-between; }
.card-header .icon { color:var(--text-secondary); }
.form-group { margin-bottom:12px; }
.form-label { font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; display:block; }
input, textarea {
  width:100%; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-primary); padding:10px 14px; font-size:14px; font-family:var(--font-body);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, textarea:hover { border-color:var(--border-strong); }
input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; min-height:120px; line-height:1.7; }
input[type=number] { width:72px; text-align:center; -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button { opacity:1; }

/* ============================================================
   Chapter
   ============================================================ */
.chapter-list-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius);
  cursor:pointer; transition:background 0.15s; border-left:3px solid transparent;
}
.chapter-list-item:hover { background:var(--bg-hover); }
.chapter-list-item .ch-num { font-weight:600; color:var(--text-secondary); min-width:32px; font-size:14px; font-family:var(--font-heading); }
.chapter-list-item .ch-title { flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapter-list-item .ch-meta { font-size:12px; color:var(--text-muted); white-space:nowrap; }

.chapter-editor {
  font-family:var(--font-body); font-size:15px; line-height:1.9;
  min-height:360px; width:100%; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); color:var(--text-primary); padding:20px; resize:vertical;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.chapter-editor:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chapter-display {
  font-family:var(--font-body); font-size:16px; line-height:2;
  white-space:pre-wrap; max-width:720px; margin:0 auto;
  color:var(--text-primary);
}

/* ============================================================
   Pipeline
   ============================================================ */
.pipeline-card { background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:20px; margin-bottom:16px; }
.pipeline-steps { display:flex; gap:6px; margin:10px 0; flex-wrap:wrap; }
.pipeline-step {
  font-size:12px; padding:4px 10px; border-radius:6px; background:var(--bg-elevated);
  color:var(--text-muted); white-space:nowrap; font-family:var(--font-body);
}
.pipeline-step.done { background:var(--green-soft); color:var(--green); }
.pipeline-step.running { background:var(--accent-soft); color:var(--accent); animation:pulse 1.5s infinite; }
.pipeline-step.waiting { background:var(--yellow-soft); color:var(--yellow); }

/* ============================================================
   Step Progress Bar
   ============================================================ */
.step-bar {
  display:flex; gap:0; margin-bottom:20px;
  background:var(--bg-surface); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); overflow:hidden;
}
.step-item {
  flex:1; padding:14px 10px; text-align:center; cursor:pointer;
  transition:background 0.15s; position:relative;
  border-right:1px solid var(--border-light);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0;
}
.step-item:last-child { border-right:none; }
.step-item:hover:not(.step-locked) { background:var(--bg-hover); }
.step-item.step-done { background:var(--green-soft); }
.step-item.step-done:hover { background:rgba(0,135,90,0.12); }
.step-item.step-current { background:var(--yellow-soft); box-shadow:inset 0 -2px 0 var(--yellow); }
.step-item.step-locked { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.step-icon { font-size:18px; line-height:1; }
.step-label { font-size:13px; font-weight:500; color:var(--text-primary); font-family:var(--font-body); }
.step-desc { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.step-check {
  position:absolute; top:6px; right:8px;
  width:16px; height:16px; border-radius:50%;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
}

/* Stat Cards */
.stat-card {
  background:var(--bg-elevated); border-radius:var(--radius);
  padding:16px; text-align:center; cursor:default;
  transition:background 0.15s;
}
.stat-card:hover { background:var(--bg-hover); }
.stat-card .stat-value { font-size:26px; font-weight:700; color:var(--text-primary); font-family:var(--font-heading); }
.stat-card .stat-label { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* Intervention */
.intervention-banner {
  background:var(--yellow-soft); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:14px 18px; margin:12px 0; display:flex; align-items:center; gap:10px; font-size:14px;
}
.intervention-banner .msg strong { color:var(--yellow); }

/* QC */
.qc-dimension { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light); }
.qc-dimension:last-child { border-bottom:none; }
.qc-dim-label { width:80px; font-size:12px; color:var(--text-secondary); }
.qc-dim-bar { flex:1; height:6px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.qc-dim-fill { height:100%; border-radius:3px; transition:width 0.5s; }
.qc-issue {
  background:var(--bg-surface); border-radius:var(--radius); padding:10px 12px; margin:6px 0;
  font-size:13px; border-left:3px solid var(--border-strong); cursor:pointer; transition:background 0.15s;
}
.qc-issue:hover { background:var(--bg-hover); }
.qc-issue.selected { border-left-color:var(--accent); background:var(--accent-soft); }
.qc-issue .issue-loc { color:var(--accent); font-weight:600; font-size:12px; }

/* Diff */
.diff-del { color:var(--red); text-decoration:line-through; background:var(--red-soft); }
.diff-add { color:var(--green); background:var(--green-soft); }

/* Review layout (left text + right report) */
.review-layout { display:grid; grid-template-columns:3fr 2fr; gap:16px; }
.review-left, .review-right { min-width:0; }
.review-right .card { margin-bottom:10px; }

/* Sidebar nav buttons */
.sidebar-nav { padding:8px 12px; border-bottom:1px solid var(--border-light); }
.sidebar-nav-btn {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius);
  cursor:pointer; transition:background 0.15s, color 0.15s; font-size:14px; color:var(--text-secondary);
  background:none; border:none; width:100%; text-align:left; font-family:var(--font-body);
}
.sidebar-nav-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.sidebar-nav-btn.active { background:var(--accent-soft); color:var(--accent); font-weight:500; }
.sidebar-nav-btn.nav-locked { opacity:0.5; }
.sidebar-nav-btn.nav-locked:hover { background:var(--bg-hover); opacity:0.6; }
.sidebar-nav-btn svg { width:18px; height:18px; flex-shrink:0; }

/* Sidebar user */
.sidebar-user { font-size:13px; color:var(--text-secondary); margin-top:4px; }

/* Sidebar tree (spec §2.3) */
.tree-group { margin-bottom:2px; }
.tree-group-header {
  display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-primary); border-radius:var(--radius);
  user-select:none; transition:all 0.15s;
}
.tree-group-header:hover { background:var(--bg-hover); }
.tree-toggle { font-size:10px; color:var(--text-muted); width:12px; display:inline-block; transition:transform 0.2s; }
.tree-children { padding-left:14px; }
.tree-children.collapsed { display:none; }
.tree-item {
  display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:13px;
  color:var(--text-secondary); border-radius:var(--radius); cursor:pointer; user-select:none;
  border-left:3px solid transparent; transition:all 0.15s; margin:1px 0;
}
.tree-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.tree-item.active { background:var(--accent-soft); color:var(--accent); font-weight:500; border-left-color:var(--accent); }
.tree-item.locked { opacity:0.4; cursor:not-allowed; }
/* 状态色条：done 绿、pending 黄、locked 灰 */
.tree-item[data-st="done"] { border-left-color:var(--green); background:rgba(34,197,94,0.06); }
.tree-item[data-st="pending"] { border-left-color:var(--yellow); }
.tree-item[data-st="locked"] { border-left-color:var(--border); }
.tree-status { font-size:14px; line-height:1; margin-left:auto; }
.tree-status.done { color:var(--green); }
.tree-status.pending { color:var(--yellow); }
.tree-status.locked { color:var(--text-muted); }
.tree-subitem {
  display:flex; align-items:center; gap:6px; padding:5px 10px 5px 24px; font-size:12px;
  color:var(--text-muted); border-radius:var(--radius); cursor:pointer; user-select:none;
  transition:all 0.15s;
}
.tree-subitem:hover { background:var(--bg-hover); color:var(--text-secondary); }
.tree-subitem.active { color:var(--accent); background:var(--accent-soft); }
.tree-subitem.locked { opacity:0.4; cursor:not-allowed; }
.tree-subitem svg { width:14px; height:14px; flex-shrink:0; }
/* 批次容器进度色 */
.tree-batch-header {
  display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--text-secondary); border-radius:6px;
  user-select:none; transition:all 0.15s; margin:2px 0;
}
.tree-batch-header:hover { background:var(--bg-hover); }
.tree-batch-header.done { color:var(--green); }
.tree-batch-header.locked { opacity:0.5; }
.tree-section-label {
  font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.05em; padding:10px 10px 4px;
}
/* 卷进度环 */
.vol-progress-ring {
  width:20px; height:20px; border-radius:50%; background:conic-gradient(var(--accent) var(--pct), var(--bg-hover) 0);
  display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700;
  color:var(--text-primary); flex-shrink:0;
}
.vol-progress-ring.complete { background:conic-gradient(var(--green) var(--pct), var(--bg-hover) 0); }

/* Selection popup menu */
.selection-popup {
  position:absolute; z-index:1000; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-hover); padding:6px; display:flex; gap:4px;
}
.selection-popup button { font-size:13px; padding:4px 10px; cursor:pointer; border:none; background:var(--bg-hover); border-radius:6px; color:var(--text-primary); }
.selection-popup button:hover { background:var(--accent-soft); color:var(--accent); }

/* Score badge */
.score-badge { font-size:16px; font-weight:700; font-family:var(--font-heading); }
.score-good { color:var(--green); }
.score-ok { color:var(--yellow); }
.score-bad { color:var(--red); }

/* Review UI */
.review-score-card {
  padding:10px 14px; background:var(--bg-elevated); border-radius:var(--radius); text-align:center;
}
.review-score-card div:first-child { margin-bottom:4px; }
.review-suggestion {
  padding:8px 12px; margin:6px 0; background:var(--bg-elevated); border-radius:var(--radius); font-size:13px;
}

/* Toast */
.toast-container { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:6px; }
.toast {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px; font-size:14px; box-shadow:var(--shadow-hover); animation:slideIn 0.25s ease;
  max-width:340px; transition: opacity 0.3s ease; color:var(--text-primary);
}
.toast.success { border-left:3px solid var(--green); background:var(--green-soft); }
.toast.error { border-left:3px solid var(--red); background:var(--red-soft); }
.toast.warning { border-left:3px solid var(--yellow); background:var(--yellow-soft); }
.toast.info { border-left:3px solid var(--accent); background:var(--accent-soft); }

/* Word count */
.word-ok { color:var(--green); }
.word-under { color:var(--yellow); }
.word-over { color:var(--blue); }

/* Empty */
.empty-state { text-align:center; padding:60px 16px; color:var(--text-muted); }
.empty-state h2 { color:var(--text-secondary); margin-bottom:8px; font-size:18px; font-family:var(--font-heading); font-weight:600; }
.empty-state p { font-size:14px; line-height:1.8; }

/* Sidebar overlay (mobile) */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.2); z-index:99; backdrop-filter:blur(4px); }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }

/* Plan form styles */
.plan-row { margin-bottom:8px; }
.plan-label { font-size:13px; color:var(--text-secondary); font-weight:500; display:block; margin-bottom:4px; }
.plan-section-title { font-size:13px; color:var(--text-secondary); font-weight:600; margin:12px 0 6px; padding-top:10px; border-top:1px solid var(--border-light); }
.plan-field { font-family:var(--font-body); }
.plan-input { width:100%; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:14px; font-family:var(--font-body); transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.plan-input:hover { border-color:var(--border-strong); }
.plan-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.plan-textarea { width:100%; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:14px; min-height:50px; resize:vertical; font-family:var(--font-body); transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.plan-textarea:hover { border-color:var(--border-strong); }
.plan-textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* Style select buttons (generate page) */
.style-btn { background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; }
.style-btn:hover { border-color:var(--border-strong); color:var(--text-primary); }

/* Toggle switch */
.toggle-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle-track { width:36px; height:20px; border-radius:10px; background:var(--border); position:relative; transition:background 0.2s; }
.toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:all 0.2s; }
.toggle-wrap.active .toggle-track { background:var(--accent); }
.toggle-wrap.active .toggle-track::after { left:18px; background:#fff; }

/* SVG icon helper */
.icon { width:18px; height:18px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.icon-sm { width:14px; height:14px; }
/* Spinner: 评审/AI 操作进行中 */
.icon-spin { animation: icon-spin 0.8s linear infinite; }
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:768px) {
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%);
    box-shadow:4px 0 16px rgba(0,0,0,0.08);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.visible { display:block; }

  .topbar { padding:0 12px; }
  .topbar .menu-btn { display:block; }
  .topbar .stats { gap:8px; }
  .topbar .stat { font-size:11px; }

  .content { padding:14px 12px; }
  .content-inner { max-width:100%; }

  .card { padding:14px; }
  .chapter-editor { min-height:280px; font-size:14px; padding:14px; }
  .chapter-display { font-size:14px; }

  .empty-state { padding:40px 12px; }

  .pipeline-steps { gap:4px; }
  .pipeline-step { font-size:10px; padding:3px 8px; }

  .toast-container { left:8px; right:8px; }
  .toast { max-width:100%; }

  .review-layout { grid-template-columns:1fr; }

  input[type=number] { width:60px; font-size:16px; } /* prevent iOS zoom */
  textarea, input { font-size:16px; } /* prevent iOS zoom on focus */
  .btn { padding:10px 16px; font-size:14px; } /* bigger tap targets */
  .btn-sm { padding:8px 14px; font-size:13px; }
}

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:50;
  display:flex; align-items:center; justify-content:center;
  animation: fadeIn 0.2s ease;
}
.modal-dialog {
  background:var(--bg-surface); border-radius:var(--radius-lg); width:90%; max-width:680px;
  box-shadow:0 20px 60px rgba(0,0,0,0.15); animation: slideUp 0.25s ease;
  max-height:90vh; display:flex; flex-direction:column;
}
.modal-header {
  padding:18px 20px; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.modal-close {
  background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer;
  width:32px; height:32px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-footer {
  padding:14px 20px; border-top:1px solid var(--border-light);
  display:flex; justify-content:flex-end; gap:10px;
}
.modal-textarea {
  width:100%; height:320px; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; font-size:13px; font-family:var(--font-body); resize:vertical;
  background:var(--bg-root); color:var(--text-primary); line-height:1.6;
  transition:border-color 0.2s;
}
.modal-textarea:focus { border-color:var(--accent); outline:none; }
.modal-textarea::placeholder { color:var(--text-muted); }

/* File upload area */
.file-upload-area {
  margin-top:12px; border:2px dashed var(--border); border-radius:var(--radius);
  padding:24px; text-align:center; cursor:pointer; transition:all 0.2s;
  background:var(--bg-root);
}
.file-upload-area:hover, .file-upload-area.dragover {
  border-color:var(--accent); background:var(--accent-soft);
}
.file-upload-area .upload-icon { color:var(--text-muted); margin-bottom:6px; }
.file-upload-area .upload-text { font-size:13px; color:var(--text-secondary); }
.file-upload-area .upload-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }
.file-upload-area .file-name {
  font-size:13px; color:var(--accent); font-weight:500; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:4px;
}

/* Radio group */
.radio-group {
  display:flex; gap:16px; margin-top:14px;
}
.radio-group label {
  display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;
  color:var(--text-secondary); transition:color 0.15s;
}
.radio-group label:hover { color:var(--text-primary); }
.radio-group input[type=radio] { accent-color:var(--accent); }

/* Parsed preview card */
.import-preview {
  margin-top:16px; background:var(--bg-root); border:1px solid var(--border-light);
  border-radius:var(--radius); padding:16px;
}
.import-preview h4 { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:10px; }
.import-preview .preview-field { margin-bottom:8px; }
.import-preview .preview-field label {
  font-size:11px; font-weight:500; color:var(--text-muted); display:block; margin-bottom:2px;
}
.import-preview .preview-field input,
.import-preview .preview-field textarea {
  width:100%; border:1px solid var(--border); border-radius:6px; padding:6px 10px;
  font-size:13px; font-family:var(--font-body); background:var(--bg-surface);
  color:var(--text-primary); transition:border-color 0.2s;
}
.import-preview .preview-field input:focus,
.import-preview .preview-field textarea:focus { border-color:var(--accent); outline:none; }
.import-preview .preview-field textarea { min-height:60px; resize:vertical; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   Outline Chat Panel
   ============================================================ */
.chat-panel { display:flex; flex-direction:column; height:calc(100vh - 200px); background:var(--bg-root); }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-msg { max-width:85%; padding:10px 14px; font-size:14px; line-height:1.6; word-break:break-word; }
.chat-msg.user { align-self:flex-end; background:var(--accent-soft); border:1px solid rgba(124,58,237,0.15); border-radius:12px 12px 4px 12px; }
.chat-msg.ai { align-self:flex-start; background:var(--bg-elevated); border-radius:12px 12px 12px 4px; }
.chat-msg.ai .thinking { color:var(--text-muted); font-style:italic; }
.chat-input-area { border-top:1px solid var(--border-light); padding:12px; display:flex; gap:8px; align-items:center; }
.chat-input-area input { flex:1; }
.chat-round-indicator {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:12px; font-family:var(--font-heading);
}
.chat-missing-hint {
  background:rgba(234,179,8,0.08); color:#ca8a04; font-size:12px;
  padding:6px 10px; border-radius:var(--radius);
}
.outline-chat-layout { display:flex; height:calc(100vh - 200px); gap:0; }
.outline-chat-left { width:40%; min-width:0; display:flex; flex-direction:column; }
.outline-chat-right { width:60%; min-width:0; border-left:1px solid var(--border-light); overflow-y:auto; padding:16px; background:var(--bg-surface); }
.outline-preview .field-group { margin-bottom:12px; }
.outline-preview .field-group h4 { font-size:12px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.outline-preview .field-value { font-size:14px; color:var(--text-primary); padding:8px 10px; background:var(--bg-surface); border-radius:var(--radius); border:1px solid var(--border-light); }
.outline-preview .field-value.flash { animation:highlight-flash 1s ease; }
.outline-preview .vol-row { display:flex; gap:8px; margin-bottom:6px; }
.outline-preview .vol-row .vol-name { font-weight:600; min-width:60px; color:var(--accent); }
.outline-preview .vol-row .vol-core { color:var(--text-secondary); }
.outline-chat-toolbar {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--border-light); background:var(--bg-surface);
}
.outline-chat-toolbar .toolbar-title { font-weight:600; font-size:14px; flex:1; }
@keyframes highlight-flash { 0%{background:rgba(234,179,8,0.08)} 100%{background:var(--bg-surface)} }