:root {
  --app-height: 100dvh;
  --mobile-nav-height: 68px;
  --mobile-header-height: 54px;
  /* ── 宣纸墨色 古籍配色 ─────────────────────────────────── */
  --bg-app: #EDE3CE;
  --bg-sidebar: #E3D6BC;
  --bg-card: #F8F1E3;
  --bg-input: #FBF6EA;
  --bg-elevated: #FBF6EA;
  --bg-top-nav: rgba(227, 214, 188, 0.92);
  --bg-top-nav-mobile: rgba(227, 214, 188, 0.98);
  --border-color: rgba(58, 40, 20, 0.16);
  --border-color-active: rgba(58, 40, 20, 0.32);
  --border: rgba(58, 40, 20, 0.16);
  --border-active: rgba(58, 40, 20, 0.32);

  --primary: #A23E2E;
  --button-primary-hover: #8B3428;
  --button-primary-border: #8B3428;
  --button-primary-hover-border: #74291F;
  --button-primary-foreground: #fff;
  --button-primary-shadow: rgba(74, 31, 23, 0.20);
  --primary-glow: rgba(162, 62, 46, 0.28);
  --secondary: #4F6F5D;
  --text-main: #2A2018;
  --text-muted: #6F5C46;
  --text-dim: #A1907A;
  --text: #2A2018;
  --muted: #6F5C46;
  --dim: #A1907A;
  --success: #5C7A4A;
  --danger: #B0392A;
  --warn: #B8863B;

  /* ── Translucent and utility colors ── */
  --bg-trans-1: rgba(43, 32, 21, 0.01);
  --bg-trans-2: rgba(43, 32, 21, 0.02);
  --bg-trans-3: rgba(43, 32, 21, 0.03);
  --bg-trans-4: rgba(43, 32, 21, 0.04);
  --bg-trans-5: rgba(43, 32, 21, 0.05);
  --bg-trans-6: rgba(43, 32, 21, 0.06);
  --bg-trans-8: rgba(43, 32, 21, 0.08);
  --bg-trans-10: rgba(43, 32, 21, 0.10);
  --bg-trans-12: rgba(43, 32, 21, 0.12);
  --bg-trans-15: rgba(43, 32, 21, 0.15);
  --bg-trans-25: rgba(43, 32, 21, 0.25);

  --status-draft-color: var(--text-muted);
  --status-draft-bg: rgba(43, 32, 21, 0.06);
  --status-projected-color: var(--success);
  --status-projected-bg: rgba(79, 111, 93, 0.12);
  --status-reserved-color: var(--warn);
  --status-reserved-bg: rgba(184, 134, 59, 0.12);

  --primary-glow-trans: rgba(162, 62, 46, 0.12);
  --primary-glow-trans-5: rgba(162, 62, 46, 0.05);
  --primary-glow-trans-10: rgba(162, 62, 46, 0.1);
  --primary-glow-trans-15: rgba(162, 62, 46, 0.15);
  --warn-glow-trans-8: rgba(184, 134, 59, 0.08);
  --warn-glow-trans-25: rgba(184, 134, 59, 0.25);
  --success-glow-trans-12: rgba(80, 200, 120, 0.12);
  --danger-glow-trans-12: rgba(255, 80, 80, 0.12);
  --danger-glow-trans-6: rgba(230, 57, 70, 0.06);
  --danger-glow-trans-15: rgba(230, 57, 70, 0.15);

  /* ── 兼容别名（历史代码中引用、避免回退到旧暗色值）──────── */
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --text-mid: #8a7558;
  --primary-light: #7A2417;
  --accent: var(--primary);
  --novel-status-success: var(--success);
  --novel-status-error: var(--danger);
  --novel-status-warning: var(--warn);
  --novel-status-running: var(--secondary);

  /* ── Font Families ─────────────────────────────────────── */
  /* C1 宋体 — 主力叙事/正文/标题 */
  --font-serif:         'Noto Serif SC', 'Lora', Georgia, serif;
  /* C2 仿宋/细明 — 文献引证、旁白引用 */
  --font-fangsung:      'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  /* C3 黑体 — 现代 UI、功能性文字 */
  --font-sans:          'Noto Sans SC', 'Inter', 'Apple Color Emoji', sans-serif;
  /* C4 圆体 — 亲和提示、空状态 */
  --font-round:         'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;
  /* C5 手书 — 装饰点缀，极少量使用 */
  --font-script:        'Ma Shan Zheng', 'Noto Serif SC', serif;
  /* L1 西文展示衬线 — 集数大数字、英文标题 */
  --font-latin-display: 'Playfair Display', Georgia, serif;
  /* L2 西文阅读衬线 — 正文英文混排 */
  --font-latin-serif:   'Lora', Georgia, serif;
  /* L3 西文精密无衬线 — UI、纯英文 */
  --font-ui:            'Inter', 'Noto Sans SC', sans-serif;
  /* L4 几何数字体 — 进度/时长/品牌数字 */
  --font-numeric:       'Outfit', 'Inter', sans-serif;
  /* L5 等宽 — 终端/日志/代码 */
  --font-mono:          'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  /* 兼容旧引用 */
  --font-display:       var(--font-serif);
  --font-body:          var(--font-sans);

  /* ── Type Scale (宽大厚重，整体上调) ───────────────────── */
  --text-2xs:  11px;   /* 徽章、slug、版权 */
  --text-xs:   12px;   /* 元数据、时间戳、步骤标签 */
  --text-sm:   14px;   /* 次要 UI、侧边栏、表单 */
  --text-base: 16px;   /* 主 UI 正文、卡片 */
  --text-md:   18px;   /* 过渡 */
  --text-lg:   21px;   /* 解说文案正文 ← 核心 */
  --text-xl:   26px;   /* 区块标题 */
  --text-2xl:  33px;   /* 页面/集数标题 */
  --text-3xl:  42px;   /* 展示大字 */
  --text-4xl:  52px;   /* 集数装饰数字 */
  --text-5xl:  68px;   /* 封面级英雄字 */

  /* ── Line Heights ───────────────────────────────────────── */
  --leading-none:    1.0;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;
  --leading-loose:   1.9;
  --leading-reading: 2.0;

  /* ── Letter Spacing ─────────────────────────────────────── */
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:    +0.02em;
  --tracking-wider:   +0.04em;
  --tracking-label:   +0.06em;
  --tracking-widest:  +0.10em;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow: hidden;
  height: 100vh;
  height: var(--app-height);
}

.mobile-drawer-backdrop,
.mobile-context-bar,
.mobile-context-button,
.mobile-context-action,
.mobile-action-menu,
.plv-mobile-bar {
  display: none;
}

.novel-shell,
.novel-content-shell,
.project-content-shell {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.novel-content-shell,
.project-content-shell {
  flex: 1;
  flex-direction: column;
  background: var(--bg-app);
  position: relative;
}

/* ─── TOP NAV ──────────────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg-top-nav);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 200;
}

.top-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  margin-right: 8px;
  flex-shrink: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 12px var(--primary-glow);
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
}

.top-nav-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}

.top-nav-tabs::-webkit-scrollbar {
  display: none;
}

.top-tab {
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.top-tab:hover {
  background: rgba(43,32,21,0.04);
  color: var(--text);
}

.top-tab.active {
  background: rgba(162,62,46,0.14);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(162,62,46,0.28);
}

.top-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulse 1.6s infinite;
  margin-left: 4px;
}

.task-beacon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  margin-right: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.task-beacon:hover {
  background: var(--bg-input);
  border-color: var(--border-active);
}
.task-beacon-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 3px rgba(120, 110, 95, .12);
}
.task-beacon.has-running .task-beacon-core {
  background: var(--warn);
  animation: taskBreath 1.7s ease-in-out infinite;
}
.task-beacon.has-alert .task-beacon-core {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .16);
}
.task-beacon-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
}
.task-beacon-tip {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
@keyframes taskBreath {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, .12), 0 0 0 0 rgba(245, 158, 11, .22); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .18), 0 0 18px 2px rgba(245, 158, 11, .28); }
}

/* Top-bar 帮助 icon is mobile-only (desktop has 帮助 in the nav row). */
.mobile-help-btn { display: none; }
/* 「筛选」 trigger + filter bottom sheet are mobile-only.
   !important because these buttons also carry .btn (which sets display). */
.mobile-filter-btn { display: none !important; }

.filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 9550;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.filter-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74,52,28,0.55);
  backdrop-filter: blur(2px);
  border: 0;
}
.filter-sheet-card {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(74,52,28,0.32);
  overflow: hidden;
}
.filter-sheet-card::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--border-color, rgba(0,0,0,.18));
}
.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 12px;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--border-color);
}
.filter-sheet-close {
  width: 36px; height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
}
.filter-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filter-sheet-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.filter-sheet-foot .btn { width: 100%; min-height: 46px; }
.filter-sec { display: flex; flex-direction: column; gap: 8px; }
.filter-sec-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
/* Controls fill the sheet width and breathe. */
.filter-sec .books-scope { width: 100%; }
.filter-sec .books-scope-btn { flex: 1; padding: 9px 4px; }
.filter-sec .books-sort { width: 100%; }
.filter-sec .books-cat-list { max-height: 30dvh; overflow-y: auto; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(79,111,93, 0.08);
  border: 1px solid rgba(79,111,93, 0.2);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--success);
}

.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.status-pill.running {
  background: rgba(79,111,93,0.08);
  border-color: rgba(79,111,93,0.2);
  color: var(--secondary);
}

.status-pill.running .dot {
  background: var(--secondary);
  box-shadow: 0 0 6px var(--secondary);
}

/* ─── APP CONTAINER ───────────────────────────────────────── */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 48px;
}

.workspace {
  flex: 1;
  position: relative;
  background-image: radial-gradient(circle at top right, rgba(162,62,46,0.05), transparent 500px);
  overflow: hidden;
}

.tab-panel {
  display: none;
  height: 100%;
  padding: 24px;
}

/* Full-workspace tabs fill the screen edge-to-edge */
#tab-screenplay, #tab-novels, #tab-jieshuo, #tab-mine {
  padding: 0;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
}

/* ─── NOVEL SOURCE LIBRARY ─────────────────────────────────── */
.books-library {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.books-sidebar {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
}

.books-sidebar-header,
.books-reader-header,
.books-pagination {
  display: flex;
  align-items: center;
}

.books-sidebar-header,
.books-reader-header {
  justify-content: space-between;
  gap: 16px;
}

.books-sidebar-header h2,
.books-reader-header h2 {
  font-family: var(--font-serif);
  font-size: 18px;
}

.books-sidebar-header p,
.books-reader-header p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.books-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.books-list-item {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(43,32,21,0.02);
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}

.books-list-item:hover,
.books-list-item.active {
  border-color: rgba(162,62,46,0.5);
  background: rgba(162,62,46,0.1);
}

.books-list-name {
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.books-list-meta {
  margin-top: 5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.books-list-analyze {
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(162,62,46,0.35);
  border-radius: 6px;
  background: rgba(162,62,46,0.08);
  color: var(--primary);
  cursor: pointer;
  font-size: 11px;
}

.books-list-analyze:hover,
.books-list-analyze:focus-visible {
  background: rgba(162,62,46,0.18);
}

.books-reader {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.books-reader-header {
  min-height: 72px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}

.books-reader-title-wrap {
  min-width: 0;
}

.books-reader-title-wrap h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.books-pagination {
  flex-shrink: 0;
  gap: 10px;
}

#books-page-label {
  min-width: 64px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.books-content {
  flex: 1;
  overflow: auto;
  padding: 28px clamp(24px, 6vw, 80px) 60px;
  color: var(--text-main);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

.ws-scene {
  display: flex;
  height: 100%;
  gap: 20px;
  min-height: 0;
}

/* ─── CARD & GLASSMORPHISM ───────────────────────────────── */
.card {
  background-color: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(74,52,28,0.2);
}

.card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.card-search {
  padding: 8px 16px 16px;
}

.card-search input {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-main);
  outline: none;
  font-size: 13px;
  transition: border-color 0.2s;
}

.card-search input:focus {
  border-color: var(--primary);
}

/* ─── BUTTON STYLES ───────────────────────────────────────── */
.btn {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--button-primary-border);
  color: var(--button-primary-foreground);
  box-shadow: 0 1px 2px var(--button-primary-shadow);
}

.btn-primary:hover {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover-border);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: rgba(43,32,21,0.025);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: rgba(43,32,21,0.06);
  border-color: var(--border-color-active);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
}

.btn-lg {
  min-height: 40px;
  padding: 9px 17px;
  font-size: 14px;
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(43,32,21,0.05);
  font-size: 16px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-success {
  background: rgba(79,111,93, 0.15);
  border: 1px solid rgba(79,111,93, 0.3);
  color: var(--success);
}

.btn-success:hover {
  background: rgba(79,111,93, 0.22);
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--muted);
  padding: 6px 10px;
}

.btn-ghost:hover {
  color: var(--text);
  background: rgba(43,32,21,0.035);
}

.btn:focus-visible {
  outline: 2px solid rgba(162,62,46,0.58);
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
  box-shadow: none;
}

/* ─── SIDEBAR NAV BUTTONS ─────────────────────────────────── */
.sidebar-nav-btn {
  justify-content: flex-start;
  text-align: left;
  border-radius: 8px;
}

.sidebar-nav-btn:hover {
  background: rgba(43,32,21,0.04);
  color: var(--text-main);
}

.sidebar-nav-btn.active {
  background: rgba(43,32,21,0.07);
  color: var(--primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--primary);
}

/* ─── SCROLLBAR ───────────────────────────────────────────── */
.scrollbar {
  overflow-y: auto;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(43,32,21,0.1);
  border-radius: 3px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(43,32,21,0.25);
}

/* ─── LISTS ───────────────────────────────────────────────── */
.idea-list {
  flex-grow: 1;
}

.list-item {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.list-item:hover {
  background-color: rgba(43,32,21,0.04);
}

.list-item.active {
  background-color: rgba(43,32,21,0.07);
}

.list-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--primary);
}

.list-item h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 32px;
}

.list-item-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(43,32,21,0.08);
  color: var(--text-muted);
}

.badge-tier {
  background-color: rgba(79,111,93,0.15);
  color: var(--secondary);
}

.loading-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  padding: 40px;
  color: var(--text-dim);
  text-align: center;
}

.empty-state .huge-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.2;
}

/* ─── WORKSHOP DIALOGUE ───────────────────────────────────── */
.workshop-dialog-container {
  flex: 1;
  min-width: 0;
}

.dialogue-card {
  flex-grow: 1;
  height: 100%;
}

.dialogue-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dialogue-title-wrap h3 {
  font-size: 15px;
  font-weight: 600;
}

.layout-aside {
  width: 280px;
  flex-shrink: 0;
  min-width: 0;
}

.layout-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.history-item {
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-main);
  transition: background 0.12s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.history-item:hover {
  background: rgba(43,32,21,0.04);
}

.history-item.active {
  background: rgba(162, 62, 46, 0.15) !important;
  box-shadow: inset 4px 0 0 var(--primary);
  border-radius: 0 6px 6px 0;
}

.history-item.active h4 {
  color: var(--primary);
  font-weight: 700;
}

.history-item .title {
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.history-item .time {
  font-size: 10px;
  color: var(--muted);
}

.history-item .delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  padding: 0 4px;
  transition: opacity 0.2s;
}

.history-item .delete:hover {
  opacity: 1;
}

.chat-logs {
  flex-grow: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome-message {
  border: 1px dashed var(--border-color);
  background-color: rgba(43,32,21,0.01);
  padding: 24px;
  border-radius: 8px;
  max-width: 600px;
  margin: 40px auto;
}

.welcome-message h4 {
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--text-main);
}

.welcome-message p {
  color: var(--text-muted);
  margin-bottom: 12px;
}

.welcome-message ul {
  padding-left: 18px;
  color: var(--text-muted);
}

.welcome-message li {
  margin-bottom: 6px;
}

.chat-bubble {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: normal;
  box-shadow: 0 1px 3px rgba(58, 40, 20, 0.04);
}

.chat-bubble.user {
  background-color: rgba(162, 62, 46, 0.07);
  border: 1px solid rgba(162, 62, 46, 0.16);
  color: var(--text-main);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}

.chat-bubble.assistant {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  white-space: normal;
}

.chat-bubble.assistant p {
  margin-top: 0;
  margin-bottom: 12px;
}

.chat-bubble.assistant p:last-child {
  margin-bottom: 0;
}

.chat-bubble.assistant ul,
.chat-bubble.assistant ol {
  margin-top: 0;
  margin-bottom: 12px;
  padding-left: 20px;
}

.chat-bubble.assistant li {
  margin-bottom: 6px;
}

.chat-bubble.assistant code {
  background-color: rgba(43, 32, 21, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.chat-bubble .search-data-block {
  margin-top: 10px;
  border-top: 1px dashed var(--border-color);
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.chat-input-area {
  padding: 16px 24px 24px 24px;
  background-color: transparent;
  border-top: none;
}

.search-indicator {
  font-size: 11px;
  color: var(--secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  position: relative;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(58, 40, 20, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  width: 100%;
}

.input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(162, 62, 46, 0.08), 0 0 0 3px rgba(162, 62, 46, 0.12);
  background-color: var(--bg-input);
}

.chat-input-area textarea {
  flex-grow: 1;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 44px 6px 8px;
  color: var(--text-main);
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 14.5px;
  min-height: 24px;
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.5;
  margin: 0;
}

#btn-send-chat {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--primary);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
  box-shadow: 0 2px 8px rgba(162, 62, 46, 0.2);
}

#btn-send-chat:hover {
  background-color: var(--primary-light);
  color: #ffffff;
}

#btn-send-chat:active {
  transform: scale(0.95);
}

#btn-send-chat:disabled {
  background-color: var(--text-dim);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── FACTORY FORMS ───────────────────────────────────────── */
.factory-setup-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.form-section h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
}

.section-title-with-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title-with-btn h3 {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  font-size: 13px;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary);
}

.form-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  background: rgba(43,32,21,0.02);
}

.form-details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
  padding: 4px 0;
  font-weight: 600;
}

.form-details > summary:hover {
  color: var(--text);
}

.form-details[open] > summary {
  color: var(--text);
  margin-bottom: 8px;
}

.form-details-body {
  padding-top: 4px;
}

.idea-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-idea-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(79,111,93,0.1);
  border: 1px solid rgba(79,111,93,0.2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

.selected-idea-indicator .clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.hook-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.hook-tag {
  background-color: rgba(162,62,46,0.15);
  border: 1px solid rgba(162,62,46,0.2);
  color: var(--text-main);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hook-tag .remove {
  cursor: pointer;
  opacity: 0.6;
}

.hook-tag .remove:hover {
  opacity: 1;
}

/* Package options (card radio) */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pkg-option {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  background: rgba(43,32,21,0.02);
}

.pkg-option:hover {
  border-color: var(--border-active);
  background: rgba(43,32,21,0.04);
}

.pkg-option.selected {
  border-color: var(--primary);
  background: rgba(162,62,46,0.08);
  box-shadow: inset 0 0 0 1px rgba(162,62,46,0.2);
}

.pkg-option .pkg-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pkg-option .pkg-desc {
  font-size: 11px;
  color: var(--muted);
}

.pkg-option .rec {
  font-size: 9px;
  background: rgba(162,62,46,0.2);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ─── NEW SCREENPLAY: production method picker ──────────────── */
.screenplay-method-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screenplay-method-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(43,32,21,0.02);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  color: var(--text-main);
  font-family: var(--font-sans);
}

.screenplay-method-option:hover {
  border-color: var(--primary);
  background: rgba(162,62,46,0.06);
}

.screenplay-method-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.screenplay-method-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.screenplay-method-text strong {
  font-size: 14px;
  font-weight: 600;
}

.screenplay-method-text small {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.screenplay-method-option.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.screenplay-method-option.disabled:hover {
  border-color: var(--border);
  background: rgba(43,32,21,0.02);
}

/* ─── TASK CONSOLE ────────────────────────────────────────── */
.progress-card-layout {
  flex-grow: 1;
  height: 100%;
}

.factory-task-view-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.active-task-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

.progress-header {
  margin-bottom: 20px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.progress-bar-wrap {
  background-color: rgba(43,32,21,0.05);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  height: 100%;
  width: 0%;
  transition: width 0.3s;
}

.console-logs-wrap {
  flex-grow: 1;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.log-line {
  overflow-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
  line-height: 1.5;
}

.log-line.error {
  color: var(--danger);
}

.log-line.success {
  color: var(--success);
}

/* ─── PROJECTS OVERVIEW ───────────────────────────────────── */
.po-header {
  padding: 20px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.po-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.po-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-box {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 200px;
  transition: border-color 0.15s;
}

.search-box:focus {
  border-color: var(--primary);
}

.po-grid {
  flex: 1;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  align-content: start;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(74,52,28,0.2);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity 0.2s;
}

.project-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(74,52,28,0.3);
}

.project-card:hover::before {
  opacity: 1;
}

.screenplay-project-card::after {
  content: '→';
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.screenplay-project-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.pc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pc-top h3 {
  font-size: 15px;
  font-weight: 700;
  word-break: break-word;
}

.pc-tier {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(79,111,93,0.12);
  color: var(--secondary);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 8px;
}

.screenplay-curation-sidebar {
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 12px;
}

.screenplay-curation-title {
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
}

.screenplay-curation-hint {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
  margin: 3px 0 8px;
}

.screenplay-curation-filters {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  padding-right: 2px;
}

.screenplay-curation-filter {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  line-height: 1.35;
  padding: 6px 7px;
  text-align: left;
  width: 100%;
}

.screenplay-curation-filter:hover,
.screenplay-curation-filter.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.screenplay-curation-filter span {
  border-radius: 999px;
  color: inherit;
  font-size: 10px;
  min-width: 18px;
  text-align: center;
}

.screenplay-view-switch {
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  padding: 3px;
}

.screenplay-view-btn {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  height: 26px;
  padding: 0 8px;
}

.screenplay-view-btn.active {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  color: var(--primary);
  font-weight: 700;
}

.screenplay-curation-badge {
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  margin: -3px 0 10px;
  padding: 3px 7px;
}

.screenplay-curation-badge.is-featured { color: #a54b21; }
.screenplay-curation-badge.is-rough-gem { color: #5473a6; }
.screenplay-curation-badge.is-polish { color: #81733e; }
.screenplay-curation-badge.is-rework { color: #8c4d86; }
.screenplay-curation-badge.is-seed-only { color: #4f765e; }
.screenplay-curation-badge.is-stop { color: #8b5d54; }
.screenplay-curation-badge.is-unreviewed { color: var(--text-muted); }

.screenplay-project-table-mode {
  display: block;
  overflow: auto;
}

.screenplay-project-table {
  border-collapse: collapse;
  min-width: 1000px;
  table-layout: fixed;
  width: 100%;
}

.screenplay-project-table th,
.screenplay-project-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  font-size: 14px;
  padding: 16px 12px;
  text-align: left;
  vertical-align: middle;
}

.screenplay-project-table th {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.screenplay-project-table th:first-child { width: 29%; }
.screenplay-project-table th:nth-child(2) { width: 34%; }
.screenplay-project-table td:first-child strong,
.screenplay-project-table td:first-child small {
  display: block;
}
.screenplay-project-table td:first-child strong { font-size: 16px; }
.screenplay-project-table td:first-child small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
  white-space: normal;
}
.screenplay-table-review {
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.screenplay-project-table tbody tr { cursor: pointer; }
.screenplay-project-table tbody tr:hover,
.screenplay-project-table tbody tr:focus-visible { background: color-mix(in srgb, var(--primary) 8%, transparent); outline: 0; }
.screenplay-project-table .screenplay-curation-badge {
  font-size: 12px;
  margin: 0;
  padding: 4px 8px;
  white-space: nowrap;
}
.screenplay-muted-label { color: var(--text-muted); }

.pc-logline {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-progress {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pc-stage {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
}

.pc-stage.done {
  background: rgba(79,111,93, 0.1);
  color: var(--success);
}

.pc-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(43,32,21,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.screenplay-sort-select:focus {
  border-color: var(--primary) !important;
}

.pc-stage.todo {
  background: rgba(43,32,21,0.04);
  color: var(--dim);
}

.screenplay-empty-state {
  min-height: 260px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 24px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: rgba(43,32,21,0.025);
}

.screenplay-empty-state .empty-state-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.75;
}

.screenplay-empty-state h4 {
  margin: 0;
  font-size: 16px;
  color: var(--text-main);
}

.screenplay-empty-state p {
  max-width: 440px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.pc-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-delete-project {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  opacity: 0.5;
  font-size: 16px;
  padding: 4px;
  transition: opacity 0.2s;
}

.btn-delete-project:hover {
  opacity: 1;
}

.project-card-new {
  border-style: dashed;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  cursor: pointer;
  text-align: center;
  color: var(--dim);
}

.project-card-new:hover {
  color: var(--text);
}

/* ─── PROJECT WORKSPACE ───────────────────────────────────── */
.ws-topbar {
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  background: rgba(248,241,227,0.8);
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 16px 6px 0;
  border-right: 1px solid var(--border);
  margin-right: 16px;
  transition: color 0.15s;
}

.back-btn:hover {
  color: var(--text);
}

.ws-project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ws-project-title {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.ws-project-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-project-tags .tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(79,111,93,0.12);
  color: var(--secondary);
}

.ws-topbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.doc-tabs {
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  overflow-x: auto;
  background: rgba(248,241,227,0.6);
  position: relative;
}

/* Right fade hint when tabs overflow */
.doc-tabs::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent, rgba(248,241,227,0.95));
  pointer-events: none;
}

.doc-tabs::-webkit-scrollbar {
  height: 2px;
}

.doc-tabs::-webkit-scrollbar-thumb {
  background: rgba(43,32,21,0.1);
}

.doc-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-tab:hover {
  color: var(--text);
}

.doc-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.doc-tab .v {
  font-size: 9px;
  background: rgba(162,62,46,0.2);
  color: var(--primary);
  padding: 1px 5px;
  border-radius: 3px;
}

.doc-tab .todo-v {
  font-size: 11px;
  background: rgba(43,32,21,0.05);
  color: var(--dim);
  padding: 1px 5px;
  border-radius: 3px;
}

.doc-tab-group-label {
  padding: 0 12px;
  font-size: 10px;
  color: var(--dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: default;
}

.workspace-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.ws-editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.editor-toolbar {
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.editor-doc-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editor-doc-info h4 {
  font-size: 14px;
  font-weight: 600;
}

.version-badge {
  background: rgba(162,62,46,0.18);
  color: var(--primary);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
}

.editor-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-container {
  flex-grow: 1;
  display: flex;
  padding: 20px;
  background-color: var(--bg-card);
  overflow: hidden;
}

.editor-container textarea {
  flex-grow: 1;
  border: none;
  background: none;
  color: var(--text-main);
  outline: none;
  font-family: 'Outfit', 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  resize: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* ─── CONTINUE PANEL ──────────────────────────────────────── */
.continue-panel {
  width: 360px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: rgba(248,241,227,0.8);
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}

.continue-panel.hidden {
  display: none;
}

.cp-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cp-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.cp-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.cp-progress {
  margin-bottom: 20px;
}

.cp-progress h4 {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.cp-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-stage {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
}

.cp-stage.done {
  background: rgba(79,111,93, 0.1);
  color: var(--success);
}

.cp-stage.todo {
  background: rgba(43,32,21,0.04);
  color: var(--dim);
}

.cp-options h4 {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.cp-option {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(43,32,21,0.02);
}

.cp-option:hover {
  border-color: var(--border-active);
  background: rgba(43,32,21,0.04);
}

.cp-option.selected {
  border-color: var(--primary);
  background: rgba(162,62,46,0.08);
}

.cp-option-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--dim);
  margin-top: 2px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.cp-option.selected .cp-option-radio {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 2px var(--bg-app);
}

.cp-option-text h5 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cp-option-text p {
  font-size: 11px;
  color: var(--muted);
}

.cp-config-summary {
  margin-top: 16px;
  padding: 12px;
  background: rgba(43,32,21,0.03);
  border-radius: 8px;
  font-size: 11px;
  color: var(--muted);
}

.cp-config-title {
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
}

.cp-config-content {
  line-height: 1.6;
}

.cp-config-content div {
  margin-bottom: 2px;
}

.cp-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ─── MODALS ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(74,52,28,0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.modal-card {
  width: 600px;
  max-width: 90%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  box-shadow: 0 20px 50px rgba(74,52,28,0.4);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.idea-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-item {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.picker-item:hover {
  background-color: rgba(43,32,21,0.02);
  border-color: var(--border-color-active);
}

.picker-item h4 {
  font-size: 13px;
  margin-bottom: 4px;
}

.picker-item p {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── AUTH KEY MODAL ──────────────────────────────────────── */
.auth-modal {
  --auth-active: #A23E2E;
  --auth-muted: #6F5C46;
  --auth-faint: #A1907A;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  background: rgba(237,227,206,0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: authFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-content {
  background: rgba(248,241,227,0.92);
  border: 1px solid rgba(43,32,21,0.09);
  border-radius: 20px;
  padding: 40px;
  width: 440px;
  box-shadow: 0 25px 50px -12px rgba(74,52,28,0.5),
              inset 0 1px 0 rgba(43,32,21,0.1);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: authScaleUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-content::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(162,62,46,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.auth-brand {
  margin-bottom: 30px;
}
.auth-brand .brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px var(--primary-glow);
  text-shadow: none;
}
.auth-brand h2 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.auth-brand p {
  font-size: 13px;
  color: var(--auth-muted);
  line-height: 1.5;
  margin: 0;
  padding: 0 10px;
}

.auth-body {
  text-align: left;
}
.auth-body .form-group {
  margin-bottom: 24px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.auth-body label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--auth-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.auth-body .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-body .input-icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: var(--auth-faint);
  pointer-events: none;
}
.auth-body input[type="password"] {
  width: 100%;
  height: 48px;
  background: rgba(74,52,28,0.25);
  border: 1px solid rgba(43,32,21,0.1);
  border-radius: 10px;
  color: var(--text-main);
  padding: 0 16px 0 44px;
  font-size: 15px;
  font-weight: 800;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(74,52,28,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-body input[type="password"]:focus {
  border-color: var(--auth-active);
  background: rgba(74,52,28,0.4);
  box-shadow: 0 0 0 4px rgba(162,62,46,0.15),
              inset 0 2px 4px rgba(74,52,28,0.2);
}

.auth-error-msg {
  color: #A23E2E;
  font-size: 12px;
  font-weight: 800;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: authShake 0.4s;
}

.auth-submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), #7A2417);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(162,62,46,0.35),
              inset 0 1px 0 rgba(43,32,21,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-submit-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 28px rgba(162,62,46,0.45);
}
.auth-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(162,62,46,0.2);
}

.auth-footer {
  margin-top: 36px;
  border-top: 1px solid rgba(43,32,21,0.05);
  padding-top: 16px;
  font-size: 11px;
  color: var(--auth-faint);
  font-weight: 800;
  letter-spacing: 0.5px;
}

@keyframes authFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes authScaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ─── TOAST NOTIFICATIONS ─────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  background: rgba(248,241,227,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(43,32,21,0.1);
  box-shadow: 0 8px 24px rgba(74,52,28,0.4);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: auto;
  min-width: 240px;
  max-width: 380px;
}

.toast.toast-show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid #f4a261; }
.toast-info { border-left: 3px solid var(--secondary); }

/* ─── INLINE CONFIRM ──────────────────────────────────────── */
.inline-confirm {
  position: fixed;
  z-index: 13000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-top: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 92%, rgba(230,57,70,0.18));
  border: 1px solid rgba(230, 57, 70, 0.3);
  font-size: 12px;
  color: var(--text-main);
  box-shadow: 0 12px 36px rgba(43,32,21,0.24);
  animation: confirmIn 0.16s ease-out;
  flex-wrap: wrap;
  max-width: min(360px, calc(100vw - 24px));
}

.inline-confirm-msg {
  flex: 1;
  min-width: 120px;
}

.inline-confirm.leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

@keyframes confirmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── PIPELINE MONITOR ────────────────────────────────────── */
.pipeline-monitor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 28px;
  overflow-y: auto;
  position: relative;
}

.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-shrink: 0;
}

.pm-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.pm-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.pm-section {
  margin-bottom: 28px;
  flex-shrink: 0;
}

.pm-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-count-badge {
  background: rgba(162,62,46,0.18);
  color: var(--primary);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 700;
}

.pm-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.pm-empty-hint {
  grid-column: 1/-1;
  font-size: 13px;
  color: var(--dim);
  padding: 16px 0;
}

/* Task cards */
.pm-task-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.pm-task-card.running {
  border-color: rgba(79,111,93,0.3);
}

.pm-task-card.running::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  animation: slideProgress 2s linear infinite;
}

@keyframes slideProgress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.pm-task-card.completed { border-color: rgba(79,111,93, 0.2); }
.pm-task-card.failed { border-color: rgba(230, 57, 70, 0.2); }

.pm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pm-card-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.pm-card-package {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.pm-status-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.pm-status-badge.running {
  background: rgba(79,111,93,0.15);
  color: var(--secondary);
}

.pm-status-badge.completed {
  background: rgba(79,111,93, 0.12);
  color: var(--success);
}

.pm-status-badge.failed {
  background: rgba(230, 57, 70, 0.12);
  color: var(--danger);
}

.pm-card-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-progress-track {
  flex: 1;
  height: 4px;
  background: rgba(43,32,21,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.pm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.pm-progress-pct {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  width: 28px;
  text-align: right;
}

.pm-card-step {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-card-footer {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Task log slide-over panel */
.task-log-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-log-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.tlp-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.tlp-title {
  font-size: 14px;
  font-weight: 700;
}

.tlp-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.tlp-progress {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tlp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ─── LAYOUT OVERRIDES PER TAB ────────────────────────────── */

/* Delete button: avoid overlapping pc-actions buttons */
.project-card .btn-delete-project {
  position: absolute;
  top: 14px;
  right: 12px;
  bottom: auto;
}

/* Auth modal input focus: use primary color instead of red */
.auth-body input[type="password"]:focus {
  border-color: var(--primary);
  background: rgba(74,52,28,0.4);
  box-shadow: 0 0 0 4px rgba(162,62,46,0.15),
              inset 0 2px 4px rgba(74,52,28,0.2);
}

/* ─── COMMENTARY SCRIPT WORKSPACE (配音工坊) ─── */
.narration-list-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-bottom: 16px;
}

@media (min-width: 1366px) {
  .narration-list-container {
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
}

.narration-card {
  display: flex;
  align-items: flex-start;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0.6;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.narration-card:hover {
  background: rgba(43,32,21,0.02);
  opacity: 0.9;
}

.narration-card.playing {
  background: rgba(162,62,46,0.05);
  border-left: 3px solid var(--primary);
  opacity: 1;
}

.narration-num {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(43,32,21,0.03);
  border: 1px solid rgba(43,32,21,0.05);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.narration-card.playing .narration-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 6px rgba(162,62,46,0.3);
}

.narration-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.narration-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}

.narration-text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-main);
  line-height: var(--leading-reading);
  letter-spacing: 0.025em;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: keep-all;
  text-align: justify;
  text-justify: inter-character;
  width: fit-content;
  max-width: 100%;
}

.narration-card.playing .narration-text {
  color: var(--primary);
  text-shadow: 0 0 2px rgba(43,32,21,0.25);
}

.narration-visual-right {
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.4;
  margin-top: 2px;
}

.narration-card.playing .narration-visual-right {
  color: var(--text-main);
}

.narration-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.narration-card.playing .narration-meta {
  color: var(--text-muted);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-label {
  color: var(--text-dim);
}

.meta-val {
  color: var(--text-muted);
  font-weight: 500;
}

.meta-sep {
  color: rgba(43,32,21,0.06);
  user-select: none;
}

.narration-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: center;
}

.narration-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.emotion-badge-mini {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  line-height: 1;
}

.duration-mini {
  font-family: 'Outfit', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.action-icon-btn-mini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(43,32,21,0.03);
  border: 1px solid rgba(43,32,21,0.05);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.action-icon-btn-mini svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.action-icon-btn-mini:hover {
  background: rgba(43,32,21,0.08);
  border-color: rgba(43,32,21,0.15);
  color: var(--text-main);
  transform: scale(1.05);
}

.action-icon-btn-mini.btn-play-narration {
  background: rgba(162,62,46,0.1);
  border-color: rgba(162,62,46,0.15);
  color: var(--primary);
}

.action-icon-btn-mini.btn-play-narration:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.emotion-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: center;
  min-width: 60px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.narration-duration {
  font-family: 'Outfit', monospace;
  font-size: 13px;
  color: var(--text-muted);
  width: 55px;
  text-align: right;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.action-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(43,32,21,0.03);
  border: 1px solid rgba(43,32,21,0.05);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.action-icon-btn:hover {
  background: rgba(43,32,21,0.08);
  border-color: rgba(43,32,21,0.15);
  color: #fff;
  transform: scale(1.05);
}

.action-icon-btn.btn-play-narration {
  background: rgba(162,62,46,0.1);
  border-color: rgba(162,62,46,0.2);
  color: var(--primary);
}

.action-icon-btn.btn-play-narration:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 10px var(--primary-glow);
}

/* ⚖️ 对比模式布局调优 - 避免挤压文字空间 */
.narration-list-container.comparing {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.narration-list-container.comparing .narration-card {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
}

.narration-list-container.comparing .narration-num {
  position: absolute;
  top: 8px;
  left: 12px;
}

.narration-list-container.comparing .narration-content {
  padding-left: 36px;
  width: 100%;
}

.narration-list-container.comparing .narration-actions {
  align-self: flex-end;
  padding-left: 36px;
  margin-top: 6px;
  width: 100%;
  justify-content: flex-end;
  gap: 12px;
}

.action-icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Bottom Player Bar Style */
.ws-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  padding: 16px 28px;
  position: relative;
  z-index: 100;
  box-shadow: 0 -8px 32px rgba(74,52,28,0.12);
}

.player-left {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 25%;
  min-width: 180px;
}

.player-album-art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(74,52,28,0.15);
  border: 1px solid rgba(43,32,21,0.08);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.player-album-art::after {
  content: '💿';
  font-size: 20px;
  opacity: 0.15;
  position: absolute;
  transform: rotate(0deg);
  animation: rotate-disc 6s linear infinite;
  animation-play-state: paused;
}

.ws-player-bar.playing .player-album-art::after {
  animation-play-state: running;
}

@keyframes rotate-disc {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.player-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.player-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 500px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.player-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.player-btn:hover {
  color: var(--primary);
  transform: scale(1.1);
}

.player-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.player-btn-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #7A2417);
  color: #fff;
  box-shadow: 0 4px 12px rgba(162, 62, 46, 0.4);
}

.player-btn-play:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(162, 62, 46, 0.6);
}

.player-btn-play svg {
  width: 20px;
  height: 20px;
}

.player-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Outfit', monospace;
}

.player-time-curr, .player-time-total {
  width: 45px;
  text-align: center;
}

.player-slider-container {
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.player-slider-track {
  width: 100%;
  height: 4px;
  background: rgba(43,32,21,0.06);
  border-radius: 2px;
  position: relative;
}

.player-slider-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 2px;
  width: 0%;
}

.player-slider-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  box-shadow: 0 0 6px rgba(74,52,28,0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.player-slider-container:hover .player-slider-thumb {
  opacity: 1;
}

.player-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 25%;
  min-width: 180px;
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-icon {
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.volume-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.volume-slider-container {
  width: 80px;
  height: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.volume-slider-track {
  width: 100%;
  height: 3px;
  background: rgba(43,32,21,0.06);
  border-radius: 1.5px;
  position: relative;
}

.volume-slider-fill {
  height: 100%;
  background: var(--text-muted);
  border-radius: 1.5px;
  width: 80%;
}

.volume-slider-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 80%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.volume-slider-container:hover .volume-slider-thumb {
  opacity: 1;
}

.player-speed-btn {
  background: rgba(43,32,21,0.04);
  border: 1px solid rgba(43,32,21,0.06);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

.player-voice-select {
  background: rgba(43,32,21,0.04);
  border: 1px solid rgba(43,32,21,0.06);
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  outline: none;
  margin-right: 8px;
}

.player-voice-select:hover {
  background: rgba(43,32,21,0.08);
  border-color: rgba(43,32,21,0.15);
  color: var(--primary);
}

.player-voice-select option {
  background: var(--bg-elevated);
  color: var(--text-main);
}

.player-speed-btn:hover {
  background: rgba(43,32,21,0.08);
  border-color: rgba(43,32,21,0.15);
  color: var(--primary);
}

/* Collapsible Episode Header Styling */
.episode-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.ep-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.ep-header-range {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(43,32,21,0.04);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(43,32,21,0.04);
}

.ep-qa-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.ep-qa-status-badge.passed {
  background: rgba(79,111,93, 0.1);
  color: var(--success);
  border: 1px solid rgba(79,111,93, 0.2);
}

.ep-qa-status-badge.failed {
  background: rgba(230, 57, 70, 0.1);
  color: var(--danger);
  border: 1px solid rgba(230, 57, 70, 0.2);
}

.ep-header-right {
  display: flex;
  align-items: center;
}

#btn-toggle-ep-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(43,32,21,0.02);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

#btn-toggle-ep-details:hover {
  background: rgba(43,32,21,0.06);
  color: var(--text-primary);
  border-color: rgba(43,32,21,0.15);
}

#btn-toggle-ep-details svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

#btn-toggle-ep-details.active svg {
  transform: rotate(180deg);
}

.episode-details-panel {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: rgba(43,32,21,0.01);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  animation: slide-down 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-wrap: wrap;
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ep-details-story {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ep-details-qa {
  width: 260px;
  background: rgba(74,52,28,0.15);
  border: 1px solid rgba(43,32,21,0.02);
  border-radius: 6px;
  padding: 10px 14px;
  flex-shrink: 0;
  flex-grow: 1;
}

/* ─── PROJECT WORKSPACE LEFT SIDEBAR ─── */
.ws-sidebar {
  width: 250px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
}

.ws-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-sidebar-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-sidebar-title-row .back-btn {
  margin: 0;
  padding: 4px 8px;
  background: rgba(43,32,21,0.05);
  border: 1px solid rgba(43,32,21,0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.ws-sidebar-title-row .back-btn:hover {
  background: rgba(43,32,21,0.1);
  color: var(--text);
}

.ws-sidebar-title-row .ws-project-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}

.ws-sidebar-actions {
  display: flex;
  gap: 8px;
}

.ws-sidebar-actions .btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 12px;
  height: auto;
}

/* Override .doc-tabs in sidebar */
.ws-sidebar .doc-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 12px;
  overflow-y: auto;
  background: transparent;
  border-bottom: none;
}

.ws-sidebar .doc-tabs::after {
  display: none; /* No horizontal fade needed */
}

.ws-sidebar .doc-tab {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s;
  width: 100%;
}

.ws-sidebar .doc-tab:hover {
  background: rgba(43,32,21,0.04);
  color: var(--text);
}

.ws-sidebar .doc-tab.active {
  background: rgba(162,62,46,0.15);
  color: var(--primary-light);
  font-weight: 600;
  border-bottom: none;
}

.ws-sidebar .doc-tab-group-label {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim, #A1907A);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── DIGNIFIED PREVIEW TYPOGRAPHY ─── */
.markdown-body {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.82;
  color: #2A2018;
  text-align: justify;
  text-justify: inter-character;
  word-break: keep-all;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text-main);
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-align: left;
  text-indent: 0;
}

.markdown-body h1 {
  font-size: var(--text-2xl);
  font-weight: 900;
  border-bottom: 1px solid rgba(43,32,21,0.15);
  padding-bottom: 0.3em;
}

.markdown-body h2 {
  font-size: var(--text-xl);
  border-bottom: 1px solid rgba(43,32,21,0.08);
  padding-bottom: 0.2em;
}

.markdown-body h3 {
  font-size: var(--text-lg);
  font-weight: 600;
}

.markdown-body p {
  margin-top: 0;
  margin-bottom: 1.4em;
  text-indent: 2em;
}

.markdown-body blockquote p,
.markdown-body li p {
  text-indent: 0;
}

.markdown-body blockquote {
  font-family: var(--font-fangsung);
  font-size: var(--text-base);
  border-left: 4px solid var(--primary);
  background: rgba(162,62,46,0.05);
  padding: 14px 20px;
  margin: 1.5em 0;
  color: rgba(43,32,21,0.65);
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.015em;
  line-height: var(--leading-relaxed);
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
  margin-bottom: 1.2em;
}

.markdown-body li {
  margin-bottom: 0.5em;
}

.markdown-body code {
  font-family: var(--font-mono);
  background: rgba(43,32,21,0.06);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.markdown-body pre {
  background: var(--bg-input);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 1.2em;
  border: 1px solid var(--border);
}

.markdown-body pre code {
  background: none;
  padding: 0;
  font-size: 0.9em;
}

.markdown-spacer {
  height: 1.2em;
  display: block;
  content: "";
}

/* ─── FLOATING TABLE OF CONTENTS (TOC) ─── */
.markdown-toc {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  max-height: 70%;
  width: 40px;
  height: 40px;
  background: rgba(248,241,227,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(43,32,21,0.08);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(74,52,28,0.3);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.markdown-toc:hover {
  width: 240px;
  height: 60%;
  border-radius: 12px;
  padding: 16px;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  cursor: default;
  background: rgba(248,241,227,0.95);
  border-color: rgba(162,62,46,0.4);
  box-shadow: 0 10px 40px rgba(162,62,46,0.15), 0 10px 30px rgba(74,52,28,0.5);
}

.markdown-toc-trigger-icon {
  font-size: 16px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.markdown-toc:hover .markdown-toc-trigger-icon {
  display: none;
}

.markdown-toc-content {
  display: none;
  flex-direction: column;
  height: 100%;
}

.markdown-toc:hover .markdown-toc-content {
  display: flex;
}

.markdown-toc-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(43,32,21,0.08);
  flex-shrink: 0;
}

.markdown-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex-grow: 1;
}

.markdown-toc-item {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s;
  padding: 2px 0;
}

.markdown-toc-item:hover {
  color: var(--primary);
  padding-left: 4px;
}

.markdown-toc-item.h1 { font-weight: 600; padding-left: 0; color: var(--text-main); }
.markdown-toc-item.h2 { padding-left: 10px; color: var(--text-muted); }
.markdown-toc-item.h3 { padding-left: 20px; font-size: 11px; color: var(--text-dim); }
.markdown-toc-item.h4 { padding-left: 30px; font-size: 11px; color: var(--text-dim); }

@keyframes heading-flash-anim {
  0% { background-color: rgba(162,62,46,0.4); }
  100% { background-color: transparent; }
}

.heading-flash {
  animation: heading-flash-anim 1.5s ease-out;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: -6px;
  margin-right: -6px;
}


@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   STORYFORGE TEXT — PREMIUM NOVEL AGENT DESIGN SYSTEM
   ========================================================================== */

/* 1. Global Themes & Layouts */
.sf-glass-panel {
  background: rgba(248,241,227,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(43,32,21,0.06);
  box-shadow: 0 16px 40px rgba(74,52,28,0.45);
}

.sf-gradient-border-hover:hover {
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(162,62,46,0.18);
  transform: translateY(-2px);
}

/* 2. Step Wizard (New Project) */
.sf-wizard-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  padding: 0 10px;
}

.sf-wizard-steps::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: rgba(43,32,21,0.08);
  z-index: 0;
}

.sf-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: default;
}

.sf-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  border: 2px solid rgba(43,32,21,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s;
}

.sf-step-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
  transition: all 0.3s;
}

.sf-wizard-step.active .sf-step-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 15px var(--primary-glow);
}

.sf-wizard-step.active .sf-step-label {
  color: var(--text-main);
  font-weight: 600;
}

.sf-wizard-step.completed .sf-step-dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.sf-wizard-step.completed .sf-step-label {
  color: var(--success);
}

/* 3. Drag-and-Drop File Upload Container */
.sf-upload-box {
  border: 2px dashed rgba(43,32,21,0.1);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  background: rgba(43,32,21,0.01);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sf-upload-box:hover {
  border-color: var(--primary);
  background: rgba(162,62,46,0.03);
}

.sf-upload-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 10px rgba(162,62,46,0.2));
  transition: transform 0.2s;
}

.sf-upload-box:hover .sf-upload-icon {
  transform: translateY(-4px);
}

.sf-upload-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.sf-upload-text p {
  font-size: 11px;
  color: var(--text-muted);
}

/* 4. Large Card Option Selector */
.sf-option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 12px;
  margin-top: 8px;
}

.sf-option-card {
  border: 1px solid rgba(43,32,21,0.08);
  border-radius: 10px;
  padding: 14px;
  background: rgba(43,32,21,0.01);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.sf-option-card:hover {
  background: rgba(43,32,21,0.03);
  border-color: rgba(43,32,21,0.18);
}

.sf-option-card.active {
  border-color: var(--primary);
  background: rgba(162,62,46,0.08);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.sf-option-card .card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.sf-option-card .card-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 14px;
}

.sf-option-card .active-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.2s;
}

.sf-option-card.active .active-dot {
  opacity: 1;
}

/* 5. Project Grid Cover Cards */
.sf-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  padding: 4px;
}

.sf-project-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 165px;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--bg-trans-25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sf-project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0.2;
  transition: opacity 0.3s;
}

.sf-project-card:hover::before {
  opacity: 1;
}

.sf-project-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.sf-project-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-project-card .card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 17px;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
}

.sf-project-card .card-footer {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid rgba(43,32,21,0.06);
  padding-top: 12px;
  margin-top: auto;
}

.sf-project-card .card-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.sf-project-card .badge-green {
  background: rgba(79,111,93, 0.12);
  color: var(--success);
  border: 1px solid rgba(79,111,93, 0.2);
}

.sf-project-card .badge-warning {
  background: rgba(244, 162, 97, 0.12);
  color: var(--novel-status-warning);
  border: 1px solid rgba(244, 162, 97, 0.2);
}

/* 6. Timeline History Modal & Task Cards */
.sf-history-timeline {
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
}

.sf-history-timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 2px;
  background: rgba(43,32,21,0.06);
}

.sf-timeline-node {
  position: relative;
  padding-bottom: 24px;
}

.sf-timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-app);
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(43,32,21,0.05);
}

.sf-timeline-dot.success {
  background: var(--novel-status-success);
  box-shadow: 0 0 8px rgba(79,111,93, 0.4);
}

.sf-timeline-dot.failed {
  background: var(--novel-status-error);
  box-shadow: 0 0 8px rgba(255, 77, 109, 0.4);
}

.sf-timeline-dot.running {
  background: var(--novel-status-running);
  box-shadow: 0 0 8px rgba(79,111,93,0.4);
  animation: pulse 1.6s infinite;
}

.sf-timeline-card {
  background: rgba(43,32,21,0.02);
  border: 1px solid rgba(43,32,21,0.05);
  border-radius: 10px;
  padding: 16px;
  margin-left: 8px;
  transition: all 0.25s;
}

.sf-timeline-card:hover {
  background: rgba(43,32,21,0.04);
  border-color: rgba(43,32,21,0.1);
}

.sf-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sf-timeline-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.sf-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.sf-timeline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  border-top: 1px solid rgba(43,32,21,0.04);
  padding-top: 10px;
}

/* Tab filtering in History Modal */
.sf-tab-filter-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(43,32,21,0.06);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.sf-filter-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-filter-tab:hover {
  color: var(--text-main);
  background: rgba(43,32,21,0.03);
}

.sf-filter-tab.active {
  background: rgba(162,62,46,0.12);
  color: var(--primary);
  border: 1px solid rgba(162,62,46,0.25);
}

.sf-tab-badge {
  font-size: 10px;
  background: rgba(43,32,21,0.06);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 10px;
}

.sf-filter-tab.active .sf-tab-badge {
  background: rgba(162,62,46,0.25);
  color: var(--primary);
}

/* 8. Unix Terminal Console for logs/errors */
.sf-terminal-log {
  background: var(--bg-input) !important;
  border: 1px solid rgba(43,32,21,0.08);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-main);
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.sf-terminal-log .log-info { color: var(--secondary); }
.sf-terminal-log .log-warn { color: var(--warn); }
.sf-terminal-log .log-error { color: var(--novel-status-error); }
.sf-terminal-log .log-success { color: var(--novel-status-success); }

/* 9. Sound Console (TTS Panel redone) */
.sf-sound-ep-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.sf-sound-ep-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(43,32,21,0.01);
  border: 1px solid rgba(43,32,21,0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.sf-sound-ep-card:hover {
  background: rgba(43,32,21,0.03);
  border-color: rgba(43,32,21,0.12);
}

.sf-sound-ep-card.active {
  background: rgba(162,62,46,0.06);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.sf-sound-ep-card input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(43,32,21,0.2);
  accent-color: var(--primary);
  cursor: pointer;
}

.sf-sound-ep-card .ep-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.sf-sound-ep-card .ep-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Circular/Radial Progress Pod for synthesis */
.sf-sound-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(43,32,21,0.02);
  border: 1px solid rgba(43,32,21,0.05);
  border-radius: 12px;
  margin-top: 14px;
  gap: 12px;
}

.sf-sound-progress-ring-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-sound-progress-ring-circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.35s;
}

.sf-sound-progress-pct {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.sf-sound-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 18px;
}

/* Utility toolbox header inside TTS */
.sf-sound-toolbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(43,32,21,0.02);
  border: 1px solid rgba(43,32,21,0.05);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.sf-sound-toolbox-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════
   STORYFORGE TEXT — 完整字体体系
   19 Named Text Styles + 全局排版增强
   ══════════════════════════════════════════════════════════════ */

/* ─── 内容层 · 展示级 ──────────────────────────────────────── */

/* 项目封面大标题 */
.tx-display {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-main);
}

/* 集数标题（如"第一集·道果觉醒"） */
.tx-ep-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-main);
}

/* 集数装饰大数字（西文展示体，超大） */
.tx-ep-numeral {
  font-family: var(--font-latin-display);
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
  opacity: 0.55;
  user-select: none;
}

/* ─── 内容层 · 阅读级 ──────────────────────────────────────── */

/* 解说文案正文 — 核心阅读体验 */
.tx-narration {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-reading);
  letter-spacing: 0.025em;
  color: #ffffff;
  text-align: justify;
  text-justify: inter-character;
  word-break: keep-all;
}

.tx-premise {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  color: var(--text-main);
  text-align: justify;
  text-justify: inter-character;
  word-break: break-word;
  white-space: pre-wrap;
}

.tx-premise p { text-indent: 2em; margin-bottom: 0.8em; }

/* 原文引证 — 仿宋/细明体，与正文明显区分 */
.tx-evidence {
  font-family: var(--font-fangsung);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: 0.015em;
  color: rgba(43,32,21,0.6);
  border-left: 2px solid rgba(162,62,46,0.5);
  padding-left: 12px;
  margin: 0;
  background: rgba(162,62,46,0.03);
  border-radius: 0 4px 4px 0;
}

/* ─── 内容层 · 人物档案 ────────────────────────────────────── */

/* 人物名字 — 宋体重 */
.tx-char-name {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--text-main);
}

/* 人物身份/职能描述 — 黑体轻 */
.tx-char-role {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ─── 内容层 · 世界观 ──────────────────────────────────────── */

/* 世界观词条名 — 宋体中粗，有权威感 */
.tx-worldterm {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--secondary);
}

/* 词条定义/规则内容 */
.tx-worlddef {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--text-main);
}

/* ─── 内容层 · 结构信息 ────────────────────────────────────── */

/* 阶段大纲正文 */
.tx-stage-summary {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--text-main);
}

/* 高光时刻描述 */
.tx-highlight-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--leading-relaxed);
  color: var(--text-main);
}

/* 悬念线/待解决线索 — 黑体，略有紧迫感 */
.tx-thread {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--text-main);
}

/* 叙事引擎建议 — 仿宋，改编参谋语气 */
.tx-engine-note {
  font-family: var(--font-fangsung);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ─── UI 层 · 结构标注 ─────────────────────────────────────── */

/* 分区标题（如"👥 登场人物墙"）— 黑体 UPPERCASE 感 */
.tx-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 卡片标题 */
.tx-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--text-main);
}

/* 元信息行（时间戳、字数、进度）*/
.tx-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 徽章/标签文字 */
.tx-badge {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-label);
}

/* 亲和提示 / 空状态文字 — 圆体 */
.tx-hint {
  font-family: var(--font-round);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ─── 进度数字 & 品牌数字 ──────────────────────────────────── */

/* 几何数字（进度%、时长、侧边栏集数编号）*/
.tx-numeral {
  font-family: var(--font-numeric);
  font-weight: 700;
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── 装饰点缀 ─────────────────────────────────────────────── */

/* 手书装饰（极少量，高光标题点缀）*/
.tx-script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: 0.05em;
  color: var(--primary);
  opacity: 0.8;
}

/* ─── 全局小字升级 ─────────────────────────────────────────── */

/* 所有空状态文字自动应用圆体 */
.loading-state,
.empty-state {
  font-family: var(--font-round);
}

.empty-state p,
.empty-state span {
  font-family: var(--font-round);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* 侧边栏导航项目字体（旧 fallback，被 nws-* 覆盖） */
.novel-menu-item,
.ws-sidebar .doc-tab {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* 播放器标题升级为宋体 */
.player-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 播放器时间戳等宽数字 */
.player-time-curr,
.player-time-total,
.narration-duration {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 任务卡片标题宋体 */
.pm-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
}

/* 模态框标题加重 */
.modal-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

/* 集数标题 ep-header 升级 */
.ep-header-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

/* ─── 涟漪增强：项目卡片标题升为宋体 ──────────────────────── */
.sf-project-card h3,
.project-card .pc-top h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0;
}

/* 项目卡片梗概升级 */
.sf-project-card .card-desc,
.pc-logline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* 时间线标题升级 */
.sf-timeline-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
}

/* 品牌 brand-name 升级为宋体 */
.brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
}

/* ─── 集数视图·叙事数字大字 ───────────────────────────────── */
.narration-num {
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Emotion badge 字体 */
.emotion-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

/* ─── 编辑器 textarea 升级 ─────────────────────────────────── */
.editor-container textarea {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ─── 表单组件统一 ─────────────────────────────────────────── */
.form-group label {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
}

.form-group input,
.form-group select,
.form-group textarea,
.chat-input-area textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* ─── 徽章全局字体 ─────────────────────────────────────────── */
.badge {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

/* ─── 历史时间线 ───────────────────────────────────────────── */
.history-item .title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ─── 进度/状态 badge ──────────────────────────────────────── */
.pm-status-badge {
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-label);
}

/* ─── 日志行 ───────────────────────────────────────────────── */
.log-line {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
}



/* ══════════════════════════════════════════════════════════════
   NOVEL WORKSPACE SIDEBAR  (nws-*)
   完全重写，脱离所有 inline style
   ══════════════════════════════════════════════════════════════ */

/* ── 容器 ─────────────────────────────────────────────────── */
.nws-sidebar {
  flex-direction: column;
  height: 100%;
  display: flex;          /* override inline display:none via JS */
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

/* ── 返回按钮 ─────────────────────────────────────────────── */
.nws-back-wrap {
  padding: 14px 14px 0 14px;
}

.nws-back-btn {
  width: 100%;
  background: rgba(43,32,21,0.04);
  border: 1px solid rgba(43,32,21,0.08);
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nws-back-btn:hover {
  background: rgba(43,32,21,0.08);
  border-color: rgba(43,32,21,0.16);
  color: var(--text-main);
}

/* ── 项目信息块 ───────────────────────────────────────────── */
.nws-project-block {
  padding: 18px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 项目标题 — 宋体，大而有质感，最显眼的改变 */
.nws-project-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 项目 slug — 等宽小字，技术感 */
.nws-project-slug {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  word-break: break-all;
  line-height: 1.4;
  opacity: 0.7;
}

/* ── 继续生产按钮 ─────────────────────────────────────────── */
.nws-produce-btn {
  margin: 0 14px;
  width: calc(100% - 28px);
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── 分割线 ───────────────────────────────────────────────── */
.nws-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(43,32,21,0.07) 30%, rgba(43,32,21,0.07) 70%, transparent);
  margin: 10px 14px;
}

/* ── 导航标签 ─────────────────────────────────────────────── */
.nws-nav-label {
  padding: 0 16px 8px 16px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  user-select: none;
}

/* ── 菜单容器 ─────────────────────────────────────────────── */
.nws-menu {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 10px;
}

/* ── 静态菜单项（全局百科 / 候选点子库）─────────────────── */
.nws-menu-item {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  background: none;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  position: relative;
}

.nws-menu-item:hover {
  background: rgba(43,32,21,0.05);
  color: var(--text-main);
}

.nws-menu-item.active {
  background: rgba(162,62,46,0.15);
  color: var(--primary-light);
  font-weight: 600;
}

/* 激活指示条 */
.nws-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--primary);
}

/* ── 集数分组标签 ─────────────────────────────────────────── */
.nws-ep-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 12px 4px 12px;
  user-select: none;
}

/* ── 集数列表容器 ─────────────────────────────────────────── */
.nws-ep-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
}

/* ── 集数行（包含按钮 + 重生成按钮） ──────────────────────── */
.nws-ep-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 7px;
  transition: background 0.12s;
}

.nws-ep-row:hover {
  background: rgba(43,32,21,0.03);
}

/* 集数主按钮 */
.nws-ep-btn {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: none;
  background: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s;
  overflow: hidden;
}

.nws-ep-btn.active {
  background: rgba(162,62,46,0.12);
}

/* 集数编号标签（几何数字体）*/
.nws-ep-num {
  font-family: var(--font-numeric);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 28px;
  letter-spacing: 0;
}

.nws-ep-num.warn {
  color: var(--warn);
}

/* 集数标题（sans 截断）*/
.nws-ep-title-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.nws-ep-btn:hover .nws-ep-title-text,
.nws-ep-btn.active .nws-ep-title-text {
  color: var(--text-main);
}

.nws-ep-btn.active .nws-ep-title-text {
  color: var(--primary-light);
}

/* 集数重生成按钮 */
.nws-ep-regen {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  opacity: 0;
}

.nws-ep-row:hover .nws-ep-regen {
  opacity: 1;
}

.nws-ep-regen:hover {
  color: var(--primary);
  background: rgba(162,62,46,0.12);
}

/* ── 空状态提示 ───────────────────────────────────────────── */
.nws-ep-empty {
  font-family: var(--font-round);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 12px 8px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   NPC — 解说漫项目库卡片体系 (Novel Project Card)
   ═══════════════════════════════════════════════════════════ */

/* ── 项目库页面区域头部 ─────────────────────────────────── */
.npc-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(43,32,21,0.06);
}

.npc-library-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.02em;
  margin: 0;
}

.npc-library-subtitle {
  font-family: var(--font-round);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin: 4px 0 0 0;
}

.npc-library-count {
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(43,32,21,0.05);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(43,32,21,0.08);
}

/* ── 主卡片容器 ─────────────────────────────────────────── */
.npc-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 16px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--bg-trans-25);
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.28s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.28s ease;
}

/* 左侧竖向彩条 */
.npc-card::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  opacity: 0.35;
  transition: opacity 0.28s ease, height 0.28s ease;
}

/* 顶部光晕装饰 */
.npc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(162,62,46,0.6) 30%,
    rgba(79,111,93, 0.4) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.npc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(162,62,46,0.3);
  box-shadow: 0 16px 48px rgba(74,52,28,0.45),
              0 0 0 1px rgba(162,62,46,0.12);
}

.npc-card:hover::before {
  opacity: 1;
  top: 0;
  bottom: 0;
  border-radius: 0 2px 2px 0;
}

.npc-card:hover::after {
  opacity: 1;
}

/* 有圣经的卡片：左侧竖条改为青色 */
.npc-card.has-bible::before {
  background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
}

/* ── 头部区域 ───────────────────────────────────────────── */
.npc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.npc-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
  word-break: keep-all;
}

/* ── 徽章区 ─────────────────────────────────────────────── */
.npc-badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

.npc-badge {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.npc-badge-bible {
  background: rgba(79,111,93, 0.12);
  color: var(--secondary);
  border: 1px solid rgba(79,111,93, 0.25);
}

.npc-badge-progress {
  background: rgba(162,62,46,0.12);
  color: var(--primary);
  border: 1px solid rgba(162,62,46,0.2);
}

.npc-badge-none {
  background: rgba(43,32,21,0.04);
  color: var(--text-dim);
  border: 1px solid rgba(43,32,21,0.07);
}

/* ── slug 标识 ──────────────────────────────────────────── */
.npc-slug {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
  opacity: 0.7;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 原著来源 ───────────────────────────────────────────── */
.npc-source {
  font-size: 11px;
  color: var(--secondary);
  opacity: 0.8;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 故事梗概 ───────────────────────────────────────────── */
.npc-premise {
  font-family: var(--font-fangsung);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 44px;
  word-break: keep-all;
  letter-spacing: 0.02em;
}

/* ── 底部统计行 ─────────────────────────────────────────── */
.npc-footer {
  display: flex;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid rgba(43,32,21,0.06);
  padding-top: 11px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.npc-stat {
  font-family: var(--font-numeric);
  font-size: 11px;
  color: var(--text-dim);
  padding-right: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.npc-stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
}

.npc-stat-adapted {
  margin-left: auto;
  padding-right: 0;
  color: var(--primary);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.npc-card:hover .npc-stat-adapted {
  opacity: 0;
  pointer-events: none;
}

.npc-stat-chars {
  color: var(--secondary);
  font-weight: 600;
  opacity: 0.9;
}

.npc-stat-completion {
  font-family: var(--font-ui);
  font-size: 10px;
  opacity: 0.85;
}

/* ── 删除按钮 ───────────────────────────────────────────── */
.npc-delete-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
  z-index: 5;
}

.npc-card:hover .npc-delete-btn {
  opacity: 1;
}

.npc-delete-btn:hover {
  color: var(--danger, #ff4d6d);
  background: rgba(255, 77, 109, 0.1);
}

/* ── 空状态 ─────────────────────────────────────────────── */
.npc-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 0;
}

.npc-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.npc-empty-text {
  font-family: var(--font-round);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.8;
}

/* ── 加载状态 ───────────────────────────────────────────── */
.npc-loading-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 0;
  font-family: var(--font-round);
  font-size: var(--text-sm);
  color: var(--text-dim);
  animation: npc-pulse 1.5s ease-in-out infinite;
}

@keyframes npc-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

/* ═══════════════════════════════════════════════════════════════
   PLV — 生产流水线视图 (Pipeline View)
   Stage 0: 故事圣经  (purple #A23E2E)
   Stage 1: 集数生成  (teal   #2ec4b6)
   Stage 2: 精修润色  (amber  #f59e0b)
═══════════════════════════════════════════════════════════════ */

.tasks-page-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  overflow: hidden;
}
.tasks-page-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.tasks-page-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}
.tasks-page-head p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.tasks-pipeline-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tasks-inline-banner {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 8px;
  background: rgba(245, 158, 11, .07);
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}
.tasks-inline-banner:hover {
  border-color: rgba(162, 62, 46, .35);
  background: rgba(162, 62, 46, .07);
}
.tasks-inline-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  animation: taskBreath 1.7s ease-in-out infinite;
  flex: 0 0 auto;
}
.tasks-inline-action {
  margin-left: auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* ─── Shell ─── */
.plv-shell {
  display: flex; height: 100%; overflow: hidden;
  font-family: 'Inter', var(--font-sans, sans-serif);
}

/* ─── Sidebar ─── */
.plv-sb {
  width: 292px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
}
.plv-sb-hdr {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.plv-sb-hdr h3 {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim, #A1907A);
}
.plv-sb-refresh {
  font-size: 11px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-dim, #A1907A);
  cursor: pointer; transition: all .18s;
}
.plv-sb-refresh:hover { background: var(--bg-trans-6); color: var(--text-mid, #8a7558); }

.plv-sb-list {
  flex: 1; overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 0;
}
.plv-sb-list::-webkit-scrollbar { width: 4px; }
.plv-sb-list::-webkit-scrollbar-thumb { background: rgba(43,32,21,.08); border-radius: 2px; }

/* Project group */
.plv-proj {
  margin-bottom: 4px;
}
.plv-proj-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 7px;
  cursor: pointer; transition: background .16s;
  user-select: none;
}
.plv-proj-hdr:hover { background: var(--bg-trans-3); }
.plv-proj-arrow {
  font-size: 8px; color: var(--text-dim, #A1907A);
  transition: transform .2s; flex-shrink: 0;
}
.plv-proj.open .plv-proj-arrow { transform: rotate(90deg); }
.plv-proj-icon { font-size: 14px; flex-shrink: 0; }
.plv-proj-name {
  font-size: 12px; font-weight: 600;
  color: var(--text-mid, #8a7558);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  font-family: 'Noto Serif SC', var(--font-serif, serif);
}
.plv-proj-run-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 5px #f59e0b;
  flex-shrink: 0;
  animation: plv-blink 1.2s ease infinite;
}
@keyframes plv-blink { 0%,100%{opacity:1}50%{opacity:.3} }

.plv-jobs {
  display: none; flex-direction: column; gap: 2px;
  margin-left: 10px;
  border-left: 1px solid var(--border);
  padding-left: 8px; padding-bottom: 4px;
}
.plv-proj.open .plv-jobs { display: flex; }

/* Job entry */
.plv-job {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer; transition: all .18s;
  position: relative;
}
.plv-job:hover { background: var(--bg-trans-4); border-color: var(--border); }
.plv-job.active { border-color: var(--primary); background: var(--primary-glow-trans-10); }

.plv-job-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  border-radius: 6px 0 0 6px; opacity: 0; transition: opacity .2s;
}
.plv-job.active .plv-job-stripe { opacity: 1; }

.plv-job-s {
  font-size: 9px; font-weight: 700; padding: 1.5px 5px;
  border-radius: 3px; border: 1px solid; flex-shrink: 0;
  letter-spacing: .04em;
}
.plv-s0 { color: var(--primary); background: var(--primary-glow-trans-10); border-color: var(--primary-glow-trans-15); }
.plv-s1 { color: var(--secondary); background: var(--success-glow-trans-12); border-color: var(--success-glow-trans-12); }
.plv-s2 { color: var(--warn); background: var(--warn-glow-trans-8); border-color: var(--warn-glow-trans-25); }

.plv-job-info { flex: 1; min-width: 0; }
.plv-job-label {
  font-size: 11.5px; color: var(--text-primary, #e8edf5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plv-job-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--text-dim, #A1907A); margin-top: 1px;
}
.plv-job-pbar {
  height: 2px; border-radius: 1px;
  background: var(--bg-trans-5); margin-top: 3px; overflow: hidden;
}
.plv-job-pfill { height: 100%; border-radius: 1px; transition: width .6s; }

.plv-job-sdot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.plv-job-sdot.run  { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; animation: plv-blink 1.2s ease infinite; }
.plv-job-sdot.ok   { background: #10b981; }
.plv-job-sdot.err  { background: #ef4444; }
.plv-job-sdot.pend { background: #6F5C46; }

.ob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 12px;
}

.ob-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ob-legend i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--border);
  background: rgba(43,32,21,0.04);
}

.ob-legend i.written { box-shadow: inset 0 -3px 0 #4f6f5d; }
.ob-legend i.must { border-color: #b8863b; }
.ob-legend i.paywall { background: #2b2015; }

.ob-swimlane {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(43,32,21,0.015);
  padding: 10px;
}

.ob-lane-row {
  display: grid;
  grid-template-columns: 112px minmax(720px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 860px;
}

.ob-lane-row + .ob-lane-row {
  margin-top: 6px;
}

.ob-lane-label {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-lane-grid {
  display: grid;
  grid-template-columns: repeat(60, minmax(18px, 1fr));
  gap: 3px;
}

.ob-cell {
  height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(43,32,21,0.05);
  background: rgba(43,32,21,0.025);
  color: transparent;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  position: relative;
}

.ob-cell.active {
  background: rgba(79,111,93,0.14);
  color: var(--text-main);
  border-color: rgba(79,111,93,0.26);
}

.ob-cell.written {
  box-shadow: inset 0 -3px 0 #4f6f5d;
}

.ob-cell.must::after,
.ob-cell.paywall::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ob-cell.must::after {
  right: 2px;
  top: 2px;
  background: #b8863b;
}

.ob-cell.paywall::before {
  left: 2px;
  top: 2px;
  background: #2b2015;
}

.ob-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.ob-plan-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text-main);
}

.ob-plan-table th,
.ob-plan-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(43,32,21,0.055);
  text-align: left;
  vertical-align: top;
}

.ob-plan-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
  color: var(--text-dim);
  font-weight: 700;
}

.ob-plan-table tr:last-child td {
  border-bottom: 0;
}

.ob-plan-table td b {
  display: block;
  margin-bottom: 3px;
}

.ob-plan-table td div,
.ob-plan-table td small {
  color: var(--text-dim);
  line-height: 1.55;
}

.ob-plan-table td span {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
  margin-bottom: 4px;
}

.ob-ep {
  width: 58px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

.ob-must-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.ob-must-item {
  padding: 7px 8px;
  border: 1px solid rgba(184,134,59,0.18);
  border-radius: 6px;
  background: rgba(184,134,59,0.055);
}

.ob-must-item b {
  display: block;
  margin: 0 0 3px 0;
  color: var(--text-main);
  font-size: 11.5px;
  line-height: 1.55;
}

.ob-must-item small {
  display: block;
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.55;
}

.ledger-original {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ledger-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.ledger-card h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-main);
}

.ledger-card p,
.ledger-rationale {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.75;
}

.ledger-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ledger-meta-grid div {
  border: 1px solid rgba(43,32,21,0.06);
  border-radius: 6px;
  padding: 9px 10px;
  background: rgba(43,32,21,0.018);
}

.ledger-meta-grid span {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 4px;
}

.ledger-meta-grid b {
  color: var(--text-main);
  font-size: 12px;
}

.ledger-rationale {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(43,32,21,0.06);
}

.ledger-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(43,32,21,0.05);
  color: var(--text-dim);
  font-weight: 700;
}

.ledger-pill.warn {
  background: rgba(184,134,59,0.12);
  color: var(--warn);
}

/* ─── Main area ─── */
.plv-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

/* Stage strip */
.plv-stage-strip {
  flex-shrink: 0; padding: 9px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-trans-4);
}
.plv-stage-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-dim, #A1907A);
}
.plv-sp-s0 { color: var(--primary); background: var(--primary-glow-trans-10); border-color: var(--primary-glow-trans-15); }
.plv-sp-s1 { color: var(--secondary); background: var(--success-glow-trans-12); border-color: var(--success-glow-trans-12); }
.plv-sp-s2 { color: var(--warn); background: var(--warn-glow-trans-8); border-color: var(--warn-glow-trans-25); }
.plv-sp-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.plv-sp-dot.run { animation: plv-blink 1.2s ease infinite; }
.plv-strip-label { font-size: 11px; color: var(--text-mid, #8a7558); }
.plv-strip-status {
  font-size: 11px; font-weight: 600; margin-left: 2px;
}

/* Main scroll */
.plv-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
.plv-scroll::-webkit-scrollbar { width: 4px; }
.plv-scroll::-webkit-scrollbar-thumb { background: var(--primary-glow-trans); border-radius: 2px; }

/* Empty */
.plv-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-dim, #A1907A);
}
.plv-empty-ico { font-size: 36px; opacity: .35; }
.plv-empty-t { font-size: 13px; font-weight: 500; color: var(--text-mid, #8a7558); }
.plv-empty-s { font-size: 11.5px; text-align: center; max-width: 230px; line-height: 1.75; }

/* ─── Metrics row ─── */
.plv-metrics {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
  margin-bottom: 22px;
}
.plv-mc {
  background: var(--bg-trans-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.plv-mc-label {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-dim, #A1907A); margin-bottom: 5px;
}
.plv-mc-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--text-primary, #e8edf5);
}
.plv-mc-sub { font-size: 10px; color: var(--text-dim, #A1907A); margin-top: 3px; }

/* ─── STAGE 0 layout ─── */
.plv-s0-wrap {
  padding: 24px 24px 48px;
  display: grid; grid-template-columns: 1fr 250px; gap: 22px; align-items: start;
}

/* S0 right panel */
.plv-s0-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.plv-s0-panel {
  background: rgba(162,62,46,.04); border: 1px solid rgba(162,62,46,.15);
  border-radius: 10px; padding: 13px 15px;
}
.plv-s0-pt {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(162,62,46,.75); margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.plv-s0-pt::before {
  content: ''; display: block; width: 3px; height: 10px;
  border-radius: 2px; background: #A23E2E; flex-shrink: 0;
}
.plv-s0-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid rgba(162,62,46,.08);
  font-size: 11.5px;
}
.plv-s0-stat:last-child { border-bottom: none; }
.plv-s0-stat-lbl { color: var(--text-mid, #8a7558); }
.plv-s0-stat-val { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #A23E2E; }

/* ─── S0 Timeline ─── */
.plv-tl0 { position: relative; padding-left: 48px; }
.plv-tl0::before {
  content: ''; position: absolute; left: 15px; top: 4px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(162,62,46,.5) 0%, rgba(162,62,46,.12) 85%, transparent 100%);
}

.plv-tl0-step {
  position: relative; margin-bottom: 11px;
  opacity: 0; transform: translateY(9px);
  transition: opacity .36s, transform .36s;
}
.plv-tl0-step.vis { opacity: 1; transform: none; }

.plv-tl0-node {
  position: absolute; left: -48px; top: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; z-index: 2;
}
.plv-n-done  { background: rgba(92,122,74,.1);  border: 1.5px solid rgba(92,122,74,.4); }
.plv-n-run   { background: rgba(162,62,46,.15); border: 1.5px solid rgba(162,62,46,.6);
               animation: plv-npulse 1.8s ease infinite; }
.plv-n-fail  { background: rgba(176,57,42,.1);   border: 1.5px solid rgba(176,57,42,.35); }
.plv-n-pend  { background: rgba(111,92,70,.06);border: 1px dashed rgba(111,92,70,.3); }
.plv-n-boot  { background: rgba(79,111,93,.08); border: 1.5px solid rgba(79,111,93,.35); }
@keyframes plv-npulse {
  0%,100% { box-shadow: 0 0 16px rgba(162,62,46,.3); }
  50%     { box-shadow: 0 0 28px rgba(162,62,46,.55); }
}

.plv-tl0-card {
  background: rgba(43,32,21,.03); border: 1px solid rgba(43,32,21,.07);
  border-radius: 9px; padding: 9px 13px;
  transition: border-color .2s, background .2s;
  position: relative; overflow: hidden;
}
.plv-tl0-card:hover { background: rgba(43,32,21,.05); }
.plv-tl0-card.plv-run-card {
  border-color: rgba(162,62,46,.3); background: rgba(162,62,46,.04);
}
.plv-tl0-card.plv-run-card::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 1px;
  background: linear-gradient(90deg,transparent,#A23E2E,transparent);
  animation: plv-scan 2.4s linear infinite;
}
.plv-tl0-card.plv-fail-card { border-color: rgba(176,57,42,.25); background: rgba(176,57,42,.03); }
@keyframes plv-scan { 0%{left:-60%}100%{left:140%} }

.plv-tc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.plv-tc-num { font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--text-dim,#A1907A); min-width: 22px; }
.plv-tbadge {
  font-size: 9.5px; font-weight: 600; font-family: 'JetBrains Mono',monospace;
  padding: 1.5px 7px; border-radius: 4px; border: 1px solid; flex-shrink: 0;
}
.plv-tb-boot    { color: var(--secondary); background: rgba(79,111,93,.1); border-color: rgba(79,111,93,.25); }
.plv-tb-manifest,.plv-tb-list { color: var(--secondary); background: rgba(79,111,93,.1); border-color: rgba(79,111,93,.25); }
.plv-tb-read    { color: #A23E2E; background: rgba(162,62,46,.1); border-color: rgba(162,62,46,.25); }
.plv-tb-search  { color: var(--warn); background: rgba(184,134,59,.1); border-color: rgba(184,134,59,.25); }
.plv-tb-inspect { color: var(--warn); background: rgba(184,134,59,.1); border-color: rgba(184,134,59,.25); }
.plv-tb-write   { color: var(--success); background: rgba(92,122,74,.1); border-color: rgba(92,122,74,.25); }
.plv-tb-run-tag { margin-left: auto; font-family: 'JetBrains Mono',monospace; font-size: 9px; font-weight: 700; color: #A23E2E; letter-spacing: .07em; animation: plv-blink .9s ease infinite; }
.plv-tc-dur { margin-left: auto; font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--text-dim,#A1907A); flex-shrink: 0; }
.plv-tc-reason { font-size: 11.5px; color: var(--text-mid,#8a7558); line-height: 1.55; padding-left: 30px; }

/* Bootstrap items */
.plv-boot-items { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.plv-boot-item {
  display: flex; align-items: center; gap: 7px;
  background: rgba(79,111,93,.04); border: 1px solid rgba(79,111,93,.1);
  border-radius: 6px; padding: 4px 9px;
}
.plv-bi-ic { font-size: 11px; flex-shrink: 0; }
.plv-bi-nm { font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--secondary); font-weight: 500; }
.plv-bi-ds { font-size: 10.5px; color: var(--text-dim,#A1907A); flex: 1; }

/* End node */
.plv-tl0-end { position: relative; margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.plv-tl0-end-ico {
  position: absolute; left: -48px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 2;
}
.plv-end-ok   { background: rgba(92,122,74,.12); border: 1.5px solid rgba(92,122,74,.5); box-shadow: 0 0 14px rgba(92,122,74,.2); }
.plv-end-fail { background: rgba(176,57,42,.1);   border: 1.5px solid rgba(176,57,42,.4); }
.plv-end-pend { background: rgba(111,92,70,.1); border: 1px dashed rgba(111,92,70,.3); }
.plv-end-title { font-size: 13px; font-weight: 600; }
.plv-end-sub   { font-size: 11px; color: var(--text-dim,#A1907A); margin-top: 2px; }

/* ─── STAGE 1 layout ─── */
.plv-s1-wrap { padding: 24px 24px 48px; }

.plv-s1-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 8px; margin-bottom: 16px;
  font-size: 11.5px; color: var(--text-mid,#8a7558);
}
.plv-s1-banner.bible-ok  { background: rgba(162,62,46,.06); border: 1px solid rgba(162,62,46,.2); }
.plv-s1-banner.bible-no  { background: rgba(111,92,70,.05);border: 1px solid rgba(111,92,70,.2); }
.plv-s1-banner-ico { font-size: 14px; flex-shrink: 0; }
.plv-s1-banner-title { font-weight: 600; color: #A23E2E; margin-bottom: 1px; }

.plv-ep-card {
  border: 1px solid rgba(79,111,93,.15); border-radius: 11px;
  background: rgba(79,111,93,.03); overflow: hidden;
  margin-bottom: 12px; transition: border-color .2s;
}
.plv-ep-card:hover { border-color: rgba(79,111,93,.28); }
.plv-ep-card.ep-active { border-color: rgba(79,111,93,.45); background: rgba(79,111,93,.06); }

.plv-ep-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid rgba(79,111,93,.08);
}
.plv-ep-num { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 700; color: var(--secondary); min-width: 48px; }
.plv-ep-title { font-family: 'Noto Serif SC',serif; font-size: 13.5px; font-weight: 600; color: var(--text-primary,#e8edf5); flex: 1; }
.plv-ep-range { font-family: 'JetBrains Mono',monospace; font-size: 10px; color: var(--text-dim,#A1907A); }
.plv-ep-wc    { font-family: 'JetBrains Mono',monospace; font-size: 11px; font-weight: 600; color: var(--text-mid,#8a7558); }

/* Episode status chip */
.plv-chip {
  font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono',monospace;
  padding: 2px 7px; border-radius: 5px; border: 1px solid;
}
.plv-chip-ok     { color: var(--success); background: rgba(92,122,74,.1); border-color: rgba(92,122,74,.25); }
.plv-chip-run    { color: var(--warn); background: rgba(184,134,59,.1); border-color: rgba(184,134,59,.25); }
.plv-chip-pend   { color: #6F5C46; background: rgba(111,92,70,.08);border-color: rgba(111,92,70,.2); }
.plv-chip-fail   { color: var(--danger); background: rgba(176,57,42,.08); border-color: rgba(176,57,42,.2); }

.plv-ep-phases { display: flex; align-items: center; padding: 11px 15px; gap: 0; }
.plv-phase-blk { display: flex; align-items: center; flex: 1; }
.plv-phase-blk:not(:last-child)::after { content:'›'; font-size:13px; color:var(--text-dim,#A1907A); margin:0 6px; flex-shrink:0; }
.plv-phase-box {
  flex: 1; padding: 7px 11px; border-radius: 7px; border: 1px solid;
  position: relative; overflow: hidden;
}
.plv-ph-done { background: rgba(92,122,74,.06);  border-color: rgba(92,122,74,.25); }
.plv-ph-run  { background: rgba(79,111,93,.07);  border-color: rgba(79,111,93,.35); }
.plv-ph-pend { background: rgba(111,92,70,.04); border-color: rgba(111,92,70,.15); }
.plv-ph-run::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 1px;
  background: linear-gradient(90deg,transparent,#2ec4b6,transparent);
  animation: plv-scan 2s linear infinite;
}
.plv-ph-label { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.plv-ph-done .plv-ph-label { color: var(--success); }
.plv-ph-run  .plv-ph-label { color: var(--secondary); }
.plv-ph-pend .plv-ph-label { color: var(--text-dim,#A1907A); }
.plv-ph-detail { font-size: 10.5px; line-height: 1.45; color: var(--text-dim,#A1907A); }
.plv-ph-run .plv-ph-detail { color: var(--text-mid,#8a7558); }
.plv-ph-dur { font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--text-dim,#A1907A); margin-top: 3px; }

/* ─── 原创 Writer：依赖图 + 预建集位（不复用解说漫三段式） ─── */
.plv-orig-wrap { padding: 24px 24px 48px; max-width: 1120px; }
.plv-orig-hero {
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:16px 18px; margin-bottom:16px; border-radius:12px;
  background:linear-gradient(135deg,rgba(79,111,93,.11),rgba(162,62,46,.045));
  border:1px solid rgba(79,111,93,.24);
}
.plv-orig-eyebrow { font-size:10px; color:var(--secondary); font-weight:800; letter-spacing:.09em; margin-bottom:4px; }
.plv-orig-hero h3 { margin:0; font-family:'Noto Serif SC',serif; font-size:19px; color:var(--text-main); }
.plv-orig-hero p { margin:7px 0 0; font-size:12px; line-height:1.55; color:var(--text-muted); }
.plv-orig-setup {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px;
  margin:0 0 20px;
}
.plv-orig-step { min-height:76px; display:flex; gap:9px; align-items:flex-start; padding:10px;
  border:1px solid rgba(43,32,21,.1); border-radius:9px; background:rgba(43,32,21,.018); }
.plv-orig-mark { flex:0 0 21px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:900; }
.plv-orig-step.done { border-color:rgba(92,122,74,.28); background:rgba(92,122,74,.055); }
.plv-orig-step.done .plv-orig-mark { color:var(--success); background:rgba(92,122,74,.14); border:1px solid rgba(92,122,74,.35); }
.plv-orig-step.run { border-color:rgba(79,111,93,.43); background:rgba(79,111,93,.075); }
.plv-orig-step.run .plv-orig-mark { color:var(--secondary); background:rgba(79,111,93,.15); border:1px solid rgba(79,111,93,.4); animation:plv-npulse 1.6s ease infinite; }
.plv-orig-step.paused .plv-orig-mark,.plv-orig-step.wait .plv-orig-mark { color:var(--text-dim); background:rgba(111,92,70,.07); border:1px dashed rgba(111,92,70,.25); }
.plv-orig-step.fail { border-color:rgba(176,57,42,.3); background:rgba(176,57,42,.04); }
.plv-orig-step.fail .plv-orig-mark { color:var(--danger); background:rgba(176,57,42,.1); border:1px solid rgba(176,57,42,.35); }
.plv-orig-step-title { font-size:12px; font-weight:750; color:var(--text-main); line-height:1.35; }
.plv-orig-step-note { margin-top:3px; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
.plv-orig-section-title { margin:4px 0 9px; font-size:11px; font-weight:800; color:var(--text-muted); letter-spacing:.08em; }
.plv-orig-episodes { display:flex; flex-direction:column; gap:9px; }
.plv-orig-episode { border:1px solid rgba(79,111,93,.16); border-radius:10px; overflow:hidden; background:rgba(79,111,93,.025); }
.plv-orig-episode.run { border-color:rgba(79,111,93,.43); box-shadow:0 0 0 2px rgba(79,111,93,.035); }
.plv-orig-episode.done { border-color:rgba(92,122,74,.28); background:rgba(92,122,74,.035); }
.plv-orig-ep-head { display:flex; justify-content:space-between; align-items:center; padding:9px 13px; border-bottom:1px solid rgba(43,32,21,.06); font-size:11px; color:var(--text-muted); }
.plv-orig-ep-head b { color:var(--secondary); font-family:'JetBrains Mono',monospace; font-size:12px; }
.plv-orig-episode.done .plv-orig-ep-head span { color:var(--success); }
.plv-orig-episode.run .plv-orig-ep-head span { color:var(--warn); }
.plv-orig-phase-row { display:flex; gap:6px; padding:9px 11px; overflow-x:auto; }
.plv-orig-phase { min-width:108px; flex:1; display:flex; align-items:center; gap:5px; padding:6px 7px; border-radius:6px; border:1px solid; font-size:10.5px; white-space:nowrap; }
.plv-orig-phase i { font-style:normal; font-size:10px; }
.plv-orig-phase.done { color:var(--success); border-color:rgba(92,122,74,.26); background:rgba(92,122,74,.06); }
.plv-orig-phase.run { color:var(--secondary); border-color:rgba(79,111,93,.38); background:rgba(79,111,93,.08); animation:plv-blink 1.2s ease infinite; }
.plv-orig-phase.wait { color:var(--text-dim); border-color:rgba(111,92,70,.17); background:rgba(111,92,70,.035); }
.plv-orig-final { display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:11px 13px; border:1px dashed rgba(111,92,70,.3); border-radius:9px; color:var(--text-muted); }
.plv-orig-final.done { border-style:solid; border-color:rgba(92,122,74,.3); background:rgba(92,122,74,.05); color:var(--success); }
.plv-orig-final > span { width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; border-radius:50%; background:rgba(111,92,70,.08); font-size:11px; }
.plv-orig-final b { display:block; font-size:11.5px; color:var(--text-main); }
.plv-orig-final small { display:block; margin-top:3px; font-size:10.5px; color:var(--text-dim); line-height:1.45; }
.plv-system-ops { margin-top:22px; padding:14px; border:1px solid rgba(162,62,46,.16); border-radius:10px; background:rgba(162,62,46,.025); }
.plv-system-title { margin-bottom:10px; font-size:11px; font-weight:800; letter-spacing:.08em; color:#A23E2E; }
.plv-batch-card { margin-bottom:11px; padding:10px 11px; border-radius:8px; border:1px solid rgba(79,111,93,.22); background:rgba(79,111,93,.045); }
.plv-batch-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:var(--secondary); }
.plv-batch-head b { color:var(--text-main); }
.plv-batch-flow { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:8px; font-size:10.5px; }
.plv-batch-flow span { padding:3px 6px; border-radius:5px; border:1px solid rgba(111,92,70,.18); color:var(--text-dim); background:rgba(111,92,70,.035); }
.plv-batch-flow span.done { color:var(--success); border-color:rgba(92,122,74,.25); background:rgba(92,122,74,.06); }
.plv-batch-flow span.run { color:var(--secondary); border-color:rgba(79,111,93,.32); background:rgba(79,111,93,.08); animation:plv-blink 1.2s ease infinite; }
.plv-batch-flow i { font-style:normal; color:var(--text-dim); }
.plv-batch-card small { display:block; margin-top:8px; color:var(--text-dim); font-size:10px; line-height:1.45; }
.plv-mine-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:8px; }
.plv-mine-card { padding:8px 9px; border:1px solid rgba(43,32,21,.08); border-radius:7px; background:rgba(255,255,255,.35); }
.plv-mine-card b { display:block; font-size:11px; color:var(--text-main); }
.plv-mine-card span { display:block; margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-dim); }
.plv-mine-track { height:4px; margin-top:7px; overflow:hidden; border-radius:4px; background:rgba(162,62,46,.1); }
.plv-mine-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#A23E2E,#d18845); }
.plv-system-foot { margin-top:10px; font-size:10.5px; line-height:1.5; color:var(--text-dim); }


/* ─── STAGE 2 layout ─── */
.plv-s2-wrap {
  padding: 24px 24px 48px;
  display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: start;
}

.plv-s2-score-card {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg,rgba(184,134,59,.08),rgba(184,134,59,.02));
  border: 1px solid rgba(184,134,59,.2); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 18px;
}
.plv-s2-gauge { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
.plv-s2-gauge svg { width: 78px; height: 78px; transform: rotate(-90deg); }
.plv-gauge-track { fill: none; stroke: rgba(184,134,59,.1); stroke-width: 6; }
.plv-gauge-fill  {
  fill: none; stroke: #f59e0b; stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.34,1.56,.64,1);
}
.plv-gauge-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono',monospace; font-size: 18px; font-weight: 700; color: var(--warn); line-height: 1;
}
.plv-gauge-num span { font-size: 9px; font-weight: 500; color: var(--text-dim,#A1907A); margin-top: 2px; }
.plv-s2-score-info { flex: 1; }
.plv-s2-score-title { font-size: 14px; font-weight: 700; color: var(--text-primary,#e8edf5); margin-bottom: 2px; }
.plv-s2-score-sub   { font-size: 11px; color: var(--text-dim,#A1907A); margin-bottom: 8px; }
.plv-s2-checks { display: flex; flex-wrap: wrap; gap: 5px; }
.plv-s2-check {
  font-size: 10.5px; padding: 2px 8px; border-radius: 5px; border: 1px solid;
}
.plv-s2-check.pass { color: var(--success); background: rgba(92,122,74,.08); border-color: rgba(92,122,74,.2); }
.plv-s2-check.fail { color: var(--danger); background: rgba(176,57,42,.08);  border-color: rgba(176,57,42,.2); }
.plv-s2-check.pend { color: var(--warn); background: rgba(184,134,59,.08); border-color: rgba(184,134,59,.2); animation: plv-blink 1.2s ease infinite; }

.plv-s2-passes-ttl {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim,#A1907A); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.plv-s2-passes-ttl::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(43,32,21,.07),transparent); }

.plv-s2-pass {
  border: 1px solid rgba(184,134,59,.12); border-radius: 10px;
  overflow: hidden; margin-bottom: 10px;
}
.plv-s2-pass.current { border-color: rgba(184,134,59,.35); box-shadow: 0 0 18px rgba(184,134,59,.07); }

.plv-s2-pass-hdr {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; background: rgba(184,134,59,.04);
  border-bottom: 1px solid rgba(184,134,59,.08);
}
.plv-s2-pver { font-family: 'JetBrains Mono',monospace; font-size: 11px; font-weight: 700; color: var(--warn); min-width: 30px; }
.plv-s2-plbl { font-size: 12px; font-weight: 600; color: var(--text-primary,#e8edf5); flex: 1; }
.plv-s2-pdur { font-family: 'JetBrains Mono',monospace; font-size: 10px; color: var(--text-dim,#A1907A); }
.plv-s2-pstatus { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; border: 1px solid; }
.plv-ps-done { color: var(--success); background: rgba(92,122,74,.08); border-color: rgba(92,122,74,.2); }
.plv-ps-run  { color: var(--warn); background: rgba(184,134,59,.1);  border-color: rgba(184,134,59,.3); animation: plv-blink 1.2s ease infinite; }
.plv-ps-fail { color: var(--danger); background: rgba(176,57,42,.08);  border-color: rgba(176,57,42,.2); }

.plv-s2-sub {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 13px; border-bottom: 1px solid rgba(184,134,59,.05);
}
.plv-s2-sub:last-child { border-bottom: none; }
.plv-sub-ico {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0; margin-top: 1px;
}
.plv-sub-done { background: rgba(92,122,74,.1); border: 1px solid rgba(92,122,74,.3); }
.plv-sub-run  { background: rgba(184,134,59,.12);border: 1px solid rgba(184,134,59,.4); animation: plv-npulse 1.6s ease infinite; }
@keyframes plv-npulse { 0%,100%{box-shadow:0 0 0 0 rgba(184,134,59,.3)}50%{box-shadow:0 0 0 5px rgba(184,134,59,0)} }
.plv-sub-pend { background: rgba(111,92,70,.08);border: 1px dashed rgba(111,92,70,.25); }
.plv-s2-sub-body { flex: 1; }
.plv-s2-sub-label { font-size: 11.5px; font-weight: 600; color: var(--text-primary,#e8edf5); margin-bottom: 2px; }
.plv-s2-sub-detail { font-size: 11px; color: var(--text-dim,#A1907A); line-height: 1.5; }
.plv-s2-sub-dur { font-family: 'JetBrains Mono',monospace; font-size: 9.5px; color: var(--text-dim,#A1907A); flex-shrink: 0; margin-top: 2px; }

.plv-s2-issues { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
.plv-s2-issue {
  display: flex; align-items: flex-start; gap: 6px;
  background: rgba(176,57,42,.04); border: 1px solid rgba(176,57,42,.12);
  border-radius: 5px; padding: 4px 8px; font-size: 10.5px;
}
.plv-si-cat { font-family: 'JetBrains Mono',monospace; font-size: 9px; font-weight: 700; color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.plv-si-desc { color: var(--text-dim,#A1907A); line-height: 1.45; }

.plv-s2-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.plv-s2-panel { background: rgba(184,134,59,.04); border: 1px solid rgba(184,134,59,.15); border-radius: 10px; padding: 13px 15px; }
.plv-s2-pt {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(184,134,59,.75); margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.plv-s2-pt::before { content:''; display:block; width:3px; height:10px; border-radius:2px; background:#f59e0b; }
.plv-s2-stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(184,134,59,.07); font-size: 11.5px; }
.plv-s2-stat:last-child { border-bottom: none; }
.plv-s2-stat-lbl { color: var(--text-mid,#8a7558); }
.plv-s2-stat-val { font-family: 'JetBrains Mono',monospace; font-weight: 600; color: var(--warn); }

/* fade-in for main area */
@keyframes plv-fadein { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
.plv-fadein { animation: plv-fadein .32s both; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE WORKSPACE
   Tablet: single workspace + drawers
   Mobile: task-first pages + bottom navigation
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: var(--app-height);
    overflow: hidden;
    overscroll-behavior: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  .app-container {
    height: var(--app-height);
  }

  .workspace,
  .tab-panel,
  .ws-scene,
  .novel-shell,
  .project-content-shell,
  .novel-content-shell {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-context-bar,
  .plv-mobile-bar {
    min-height: 54px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(227,214,188,0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 80;
  }

  .mobile-context-button,
  .mobile-context-action {
    min-width: 40px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border-active);
    border-radius: 10px;
    background: rgba(43,32,21,0.05);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  .mobile-context-action {
    color: #fff;
    border-color: rgba(162,62,46,0.45);
    background: linear-gradient(135deg, rgba(162,62,46,0.92), rgba(181, 23, 158, 0.92));
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-context-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .mobile-context-copy strong {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-context-copy span {
    color: var(--text-muted);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-context-select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: rgba(162,62,46,0.07);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 4px 28px 4px 12px;
    border-radius: 9px;
  }

  /* 明确的下拉提示：让用户知道点这里能切到 创意/圣经/分集剧本 */
  .mobile-context-select::after {
    content: "▾";
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
  }

  .mobile-context-select:active {
    background: rgba(162,62,46,0.14);
  }

  .mobile-context-select span,
  .mobile-context-select small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-context-select span {
    font-size: 14px;
    font-weight: 700;
  }

  .mobile-context-select small {
    color: var(--primary);
    font-size: 10px;
  }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(74,52,28,0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    z-index: 900;
    transition: opacity 0.2s ease;
  }

  .mobile-drawer-backdrop.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-drawer-open {
    touch-action: none;
  }

  .mobile-drawer-panel,
  .plv-sb {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px) !important;
    max-width: 340px;
    height: var(--app-height) !important;
    border-radius: 0 !important;
    background: var(--bg-sidebar) !important;
    box-shadow: 20px 0 50px rgba(74,52,28,0.15);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0.24s;
    z-index: 1000;
  }

  .mobile-drawer-panel.mobile-open,
  .plv-sb.mobile-open {
    transform: translateX(0);
    visibility: visible;
  }

  .tab-panel {
    overflow: hidden;
  }

  .ws-scene {
    gap: 0;
  }

  .workshop-dialog-container,
  .dialogue-card {
    width: 100%;
  }

  .dialogue-card > .card-header {
    gap: 12px;
  }

  .dialogue-card > .card-header .actions {
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dialogue-card > .card-header .actions::-webkit-scrollbar {
    display: none;
  }

  .dialogue-title-wrap {
    min-width: 0;
  }

  .dialogue-title-wrap h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pipeline-monitor {
    padding: 20px;
  }

  .pm-cards-grid,
  .po-grid,
  #novel-project-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
  }

  /* 全局百科 / 创作蓝图 等富文本规划页：手机上把内联多列网格压成单列，
     杜绝右侧溢出与拥挤双栏。同时对内部长串内容做断词处理。 */
  .np-overview[style*="grid-template-columns"],
  .np-overview [style*="grid-template-columns"],
  .original-blueprint[style*="grid-template-columns"],
  .original-blueprint [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .np-overview,
  .original-blueprint {
    min-width: 0;
    max-width: 100%;
  }
  .np-overview *,
  .original-blueprint * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .task-log-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height);
    z-index: 950;
    border-left: 0;
  }

  .task-log-panel.hidden {
    transform: translateX(105%);
  }

  .project-content-shell,
  .workspace-body,
  .ws-editor-area {
    width: 100%;
  }

  .mobile-action-menu {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 180px;
    padding: 6px;
    border: 1px solid var(--border-active);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 16px 40px rgba(74,52,28,0.18);
    z-index: 120;
  }

  .mobile-action-menu.visible {
    display: flex;
    flex-direction: column;
  }

  .mobile-action-menu button {
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-main);
    text-align: left;
  }

  .mobile-action-menu button:hover,
  .mobile-action-menu button:focus {
    background: rgba(43,32,21,0.07);
  }

  .continue-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 420px);
    height: var(--app-height);
    z-index: 940;
    background: var(--bg-elevated);
    box-shadow: -18px 0 50px rgba(74,52,28,0.15);
  }

  .continue-panel.hidden {
    display: none;
  }

  .editor-container,
  .markdown-body {
    min-width: 0;
    max-width: 100%;
  }

  .markdown-body table,
  .markdown-body pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .novel-content-shell {
    width: 100%;
  }

  #novel-library-view,
  #novel-workspace-view {
    padding: 16px !important;
  }

  #novel-ws-viewport [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  #novel-project-grid {
    padding: 0 !important;
    gap: 14px !important;
  }

  .nws-ep-regen,
  .npc-delete-btn {
    opacity: 1;
  }

  .plv-shell,
  .plv-main {
    width: 100%;
    min-width: 0;
  }

  .plv-stage-strip {
    overflow-x: auto;
    white-space: nowrap;
    padding: 9px 14px;
  }

  .plv-s0-wrap,
  .plv-s2-wrap {
    grid-template-columns: 1fr;
  }

  .plv-s0-right,
  .plv-s2-right {
    position: static;
  }

  .plv-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plv-ep-phases {
    overflow-x: auto;
  }

  .plv-phase-blk {
    min-width: 160px;
  }

  .modal-overlay {
    padding: 18px;
  }

  .modal-card,
  .auth-content {
    max-width: min(92vw, 680px) !important;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .toast {
    min-width: 0;
    max-width: min(88vw, 380px);
  }

  #toast-container {
    right: 16px;
    bottom: 16px;
  }
}

/* Tablet navigation: the desktop row has more items than a tablet header can
   hold. Keep primary navigation out of the header so the top-right controls
   cannot overlap and intercept its taps. */
@media (min-width: 600px) and (max-width: 1024px) {
  :root {
    --tablet-nav-height: calc(64px + env(safe-area-inset-bottom));
  }

  .top-nav-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--tablet-nav-height);
    padding: 4px 4px env(safe-area-inset-bottom);
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    background: rgba(227,214,188,0.97);
    border-top: 1px solid var(--border-active);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 880;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .top-tab,
  .top-tab-dropdown {
    flex: 0 0 72px;
    min-width: 72px;
  }

  .top-tab {
    min-height: 50px;
    padding: 4px 1px;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  .top-tab-dropdown .dropdown-trigger-btn {
    width: 100%;
  }

  .top-tab .tt-ico {
    font-size: 20px;
    line-height: 1;
  }

  .top-tab .tt-label {
    font-size: 9.5px;
    line-height: 1.1;
    font-weight: 500;
  }

  .top-tab .top-tab-dot {
    position: absolute;
    top: 4px;
    margin: 0 0 0 16px;
  }

  .top-tab { position: relative; }

  .top-tab.active {
    background: transparent;
    box-shadow: none;
    color: var(--primary);
  }

  .top-tab.active .tt-label { font-weight: 700; }

  .top-tab-dropdown-menu {
    top: auto;
    bottom: calc(100% + 6px);
  }

  .app-container {
    padding-bottom: var(--tablet-nav-height);
  }
}

@media (max-width: 599px) {
  :root {
    --mobile-nav-height: calc(64px + env(safe-area-inset-bottom));
    --mobile-header-height: calc(52px + env(safe-area-inset-top));
  }

  body {
    font-size: 14px;
  }

  .top-nav {
    height: var(--mobile-header-height);
    padding: env(safe-area-inset-top) 12px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(227,214,188,0.98);
  }

  .top-nav .brand {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    gap: 8px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .brand-name {
    font-size: 14px;
  }

  .top-right {
    margin-left: auto;
  }

  .status-pill {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }

  #global-status-text {
    display: none;
  }

  /* Bottom tab bar: feature tabs (帮助 moved to the top bar), icon-over-label.
     Many top-level modules exist now, so mobile uses a horizontal rail. */
  .top-nav-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-nav-height);
    padding: 4px 4px env(safe-area-inset-bottom);
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    background: rgba(227,214,188,0.97);
    border-top: 1px solid var(--border-active);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 880;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  /* 帮助 is not a bottom tab on mobile — it's the top-bar ❓ icon. */
  .top-nav-tabs .top-tab-help {
    display: none;
  }

  .top-tab {
    flex: 0 0 64px;
    min-width: 64px;
    min-height: 50px;
    padding: 4px 1px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    color: var(--muted);
  }

  .top-tab .tt-ico {
    font-size: 20px;
    line-height: 1;
  }

  .top-tab .tt-label {
    font-size: 9.5px;
    line-height: 1.1;
    white-space: nowrap;
    font-weight: 500;
  }

  .top-tab .top-tab-dot {
    position: absolute;
    margin: 0;
    top: 4px;
    margin-left: 16px;
  }

  .top-tab { position: relative; }

  .top-tab.active {
    background: transparent;
    box-shadow: none;
    color: var(--primary);
  }
  .top-tab.active .tt-label { font-weight: 700; }

  /* Mobile help icon in the top-right cluster. */
  .mobile-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
  }

  .app-container {
    padding-top: var(--mobile-header-height);
    padding-bottom: var(--mobile-nav-height);
  }

  .tab-panel {
    padding: 8px;
  }

  #tab-screenplay,
  #tab-novels,
  #tab-jieshuo {
    padding: 0;
  }

  .books-library {
    flex-direction: column;
  }

  /* Novels landing: the channel (主切换) stays as a slim horizontal chip row;
     category/scope/parse/sort are relocated by JS into the 筛选 bottom sheet. */
  .books-landing { flex-direction: column; }
  .books-landing-side {
    width: 100%;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .books-channel-tabs { flex-wrap: nowrap; }
  .books-cat-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .books-cat-item { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
  .books-landing-main { padding: 12px; }
  .books-landing-head { gap: 6px; }
  .books-landing-search { flex: 1; min-width: 0; }
  .mobile-filter-btn { display: inline-flex !important; flex-shrink: 0; }
  /* Toolbar on mobile only carries the count (filters are in the sheet). */
  .books-landing-toolbar { padding: 0; border: 0; min-height: 0; }
  .books-landing-toolbar > .books-stats { margin: 2px 0 6px; }
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

  .books-sidebar {
    width: 100%;
    height: 38%;
    flex: 0 0 38%;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .books-reader {
    min-height: 0;
  }

  .books-reader-header {
    min-height: 64px;
    padding: 10px 12px;
  }

  .books-reader-title-wrap h2 {
    font-size: 15px;
  }

  .books-reader-title-wrap p {
    display: none;
  }

  .books-pagination {
    gap: 5px;
  }

  .books-pagination .btn {
    padding: 5px 7px;
    font-size: 10px;
  }

  #books-page-label {
    min-width: 52px;
    font-size: 10px;
  }

  .books-content {
    padding: 18px 16px 40px;
    font-size: 15px;
    line-height: 1.9;
  }

  .card {
    border-radius: 12px;
    box-shadow: none;
  }

  .dialogue-card > .card-header {
    min-height: 54px;
    padding: 8px 10px;
    flex-wrap: wrap;
  }

  .dialogue-title-wrap {
    flex: 1;
  }

  .dialogue-title-wrap .mobile-context-button {
    display: inline-flex;
  }

  .dialogue-card > .card-header .actions {
    width: 100%;
    order: 3;
  }

  .dialogue-card > .card-header .actions .btn {
    min-height: 36px;
    flex: 0 0 auto;
  }

  .chat-logs {
    padding: 14px 10px;
    gap: 12px;
  }

  .welcome-message {
    margin: 16px 0;
    padding: 18px;
  }

  .welcome-message ul {
    padding-left: 16px;
  }

  .chat-bubble {
    max-width: 92%;
    padding: 11px 13px;
    font-size: 13.5px;
  }

  .chat-input-area {
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: transparent;
  }

  .input-wrap {
    gap: 8px;
  }

  .chat-input-area textarea {
    min-height: 24px;
    max-height: 120px;
    padding: 8px 42px 8px 8px;
    font-size: 15px;
  }

  #btn-send-chat {
    right: 6px;
    bottom: 6px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
  }

  .pipeline-monitor {
    padding: 16px 12px 28px;
  }

  .pm-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }

  .pm-header .btn {
    min-height: 42px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .pm-cards-grid,
  .po-grid,
  #novel-project-grid {
    grid-template-columns: 1fr !important;
  }

  .pm-task-card,
  .project-card,
  .npc-card {
    min-height: 0;
  }

  .pm-card-footer,
  .pc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-card-footer .btn,
  .pc-actions .btn {
    min-height: 40px;
  }

  .po-header {
    padding: 16px 12px 0;
    align-items: flex-start;
    gap: 12px;
  }

  .po-header-actions {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    width: 100%;
    min-height: 40px;
    font-size: 16px;
  }

  .po-header-actions .btn {
    min-height: 40px;
  }

  .po-grid {
    padding: 14px 12px 24px;
    gap: 12px;
  }

  .project-card {
    padding: 16px;
  }

  .project-card-new {
    min-height: 130px;
  }

  .project-content-shell .mobile-context-bar,
  .novel-content-shell > .mobile-context-bar,
  #screenplay-adapt-view > .mobile-context-bar {
    min-height: 54px;
  }

  #screenplay-adapt-view {
    padding: 0 !important;
  }

  #adaptation-ws-viewport {
    padding: 10px 12px 24px;
  }

  #adaptation-ws-viewport > div > div:first-child {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px;
  }

  #adaptation-ws-viewport > div > div:first-child > div:last-child {
    display: grid !important;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #adaptation-ws-viewport > div > div:first-child select,
  #adaptation-ws-viewport > div > div:first-child button {
    width: 100%;
    min-width: 0;
    padding-right: 6px !important;
    padding-left: 6px !important;
    white-space: normal;
  }

  #ledger-content-area > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #ledger-content-area > div > div,
  #ledger-content-area > div > div > div {
    min-width: 0;
  }

  #ledger-content-area table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .workspace-body {
    position: relative;
  }

  .editor-toolbar {
    order: 2;
    min-height: 58px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(227,214,188,0.98);
    box-shadow: 0 -8px 24px rgba(74,52,28,0.4);
  }

  .editor-doc-info {
    min-width: 0;
  }

  .editor-doc-info h4,
  .editor-doc-info .version-badge,
  .editor-doc-info > span:first-child {
    display: none;
  }

  .editor-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .editor-toolbar-actions .btn {
    min-height: 42px;
  }

  .editor-container {
    order: 1;
    padding: 0;
  }

  .editor-container textarea {
    padding: 16px;
    font-size: 16px;
    line-height: 1.75;
  }

  .markdown-body,
  #markdown-preview.markdown-body {
    padding: 22px 16px 36px !important;
    font-size: 16px;
    line-height: 1.85;
    text-align: left;
    word-break: break-word;
  }

  .markdown-body p {
    text-indent: 0;
  }

  .markdown-toc {
    display: none !important;
  }

  .continue-panel {
    inset: 0;
    width: 100%;
    height: var(--app-height);
  }

  .cp-header,
  .cp-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cp-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* Phones: modals become bottom sheets that fit their content (up to ~92% of
     the screen), instead of forced full-screen — so light forms/confirm dialogs
     no longer leave a huge empty area, and tall ones still scroll internally. */
  .modal-card,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(92dvh, var(--app-height)) !important;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    overflow: hidden;
  }

  /* The login/auth gate stays full-screen. */
  .auth-content {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--app-height);
    max-height: var(--app-height) !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* Grab-handle affordance at the top of every bottom sheet. */
  .modal-card::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-color, rgba(0,0,0,.18));
    z-index: 2;
  }
  .modal-card { position: relative; }

  .modal-header {
    min-height: 0;
    padding: 16px 16px 10px;
    flex-shrink: 0;
  }

  .modal-header h3 {
    font-size: 18px !important;
    max-width: calc(100vw - 64px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modal-close,
  .modal-header .btn-ghost {
    min-width: 44px;
    min-height: 44px;
  }

  .modal-body {
    flex: 1;
    min-height: 0;
    padding: 18px 16px !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    flex-shrink: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    background: var(--bg-elevated);
  }

  .modal-footer > *,
  .modal-footer > div,
  .modal-footer > div > * {
    min-width: 0;
  }

  .modal-footer > div {
    display: contents !important;
  }

  .modal-footer .btn,
  .modal-footer button {
    min-height: 44px !important;
    width: 100%;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: normal;
  }

  #idea-detail-modal .modal-footer {
    grid-template-columns: 1fr 1fr;
  }

  #idea-detail-modal #btn-delete-idea {
    grid-column: 1 / -1;
    order: 3;
  }

  .auth-content {
    justify-content: center;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  }

  .auth-body input,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  #novel-library-view,
  #novel-workspace-view {
    padding: 12px !important;
  }

  .npc-library-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    gap: 10px;
  }

  .npc-library-title {
    font-size: 19px;
  }

  .npc-library-subtitle {
    display: none;
  }

  .npc-library-count {
    padding: 4px 9px;
    white-space: nowrap;
  }

  .npc-card {
    padding: 17px 16px 15px 20px;
  }

  .npc-delete-btn {
    position: static;
    align-self: flex-end;
    min-height: 34px;
    margin-top: 8px;
    color: var(--danger);
    background: rgba(230, 57, 70, 0.08);
  }

  #novel-ws-viewport {
    padding-bottom: 82px;
  }

  #novel-ws-viewport [style*="grid-template-columns"],
  #adaptation-ws-viewport [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 安全网：两个工作区滚动视口在手机上裁掉任何横向溢出（内部需横滚的
     表格/时间线自带 overflow-x:auto，不受影响），根治"右侧超出屏幕"。 */
  #novel-ws-viewport,
  #adaptation-ws-viewport {
    overflow-x: hidden;
    max-width: 100%;
  }

  .narration-list-container,
  .narration-row {
    grid-template-columns: 1fr !important;
  }

  .narration-card {
    padding: 14px 4px;
    gap: 8px 10px;
    opacity: 1;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
  }

  .narration-num {
    grid-column: 1;
  }

  .narration-content {
    grid-column: 2;
    width: 100%;
  }

  .narration-row {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .narration-text {
    width: 100%;
    font-size: 18px;
    line-height: 1.85;
  }

  .narration-visual-right {
    max-width: 100%;
    text-align: left;
    font-size: 11px;
  }

  .narration-meta {
    gap: 4px 8px;
  }

  .meta-sep {
    display: none;
  }

  .narration-actions {
    grid-column: 2;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    align-self: auto;
  }

  .narration-duration {
    width: auto;
    min-width: 58px;
    text-align: left;
  }

  .emotion-badge {
    min-width: 0;
  }

  .tx-premise,
  .tx-narration,
  .narration-text {
    text-align: left;
    text-justify: auto;
    word-break: break-word;
    letter-spacing: 0.01em;
  }

  .tx-premise p {
    text-indent: 0;
  }

  .episode-header-compact,
  .episode-details-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .ep-details-qa {
    width: 100%;
  }

  .ws-player-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 58px;
    padding: 7px 9px;
    border: 1px solid var(--border-active);
    border-radius: 14px;
    z-index: 140;
    gap: 8px;
  }

  .player-left {
    width: auto;
    min-width: 0;
    flex: 1;
    cursor: pointer;
  }

  .player-album-art {
    width: 38px;
    height: 38px;
  }

  .player-center {
    flex: 0 0 auto;
  }

  .player-controls {
    gap: 4px;
  }

  .player-controls .player-btn:not(.player-btn-play),
  .player-timeline,
  .player-right {
    display: none;
  }

  .player-btn-play {
    width: 42px;
    height: 42px;
  }

  .ws-player-bar.mobile-expanded {
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 190px;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    flex-wrap: wrap;
  }

  .ws-player-bar.mobile-expanded .player-left {
    flex-basis: calc(100% - 50px);
  }

  .ws-player-bar.mobile-expanded .player-center {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }

  .ws-player-bar.mobile-expanded .player-controls .player-btn,
  .ws-player-bar.mobile-expanded .player-timeline,
  .ws-player-bar.mobile-expanded .player-right {
    display: flex;
  }

  .ws-player-bar.mobile-expanded .player-right {
    order: 4;
    width: 100%;
    justify-content: center;
  }

  .ws-player-bar.mobile-expanded .volume-container {
    display: none;
  }

  .plv-mobile-bar {
    min-height: 54px;
  }

  .plv-scroll {
    padding-bottom: 18px;
  }

  .plv-s0-wrap,
  .plv-s1-wrap,
  .plv-s2-wrap {
    padding: 14px 12px 28px;
  }

  .plv-metrics {
    gap: 8px;
    margin-bottom: 14px;
  }

  .plv-mc {
    padding: 10px;
  }

  .plv-mc-val {
    font-size: 17px;
  }

  .plv-tl0 {
    padding-left: 40px;
  }

  .plv-tl0-node,
  .plv-tl0-end-ico {
    left: -40px;
  }

  .plv-tc-reason {
    padding-left: 0;
  }

  .plv-ep-hdr {
    flex-wrap: wrap;
  }

  .plv-ep-title {
    flex-basis: calc(100% - 70px);
  }

  .plv-ep-phases {
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .plv-phase-blk {
    width: 100%;
    min-width: 0;
    scroll-snap-align: none;
  }

  .plv-phase-blk:not(:last-child)::after {
    content: none;
  }

  .plv-s2-score-card {
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }

  #toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height) + 10px);
  }

  .toast {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 380px) {
  .brand-name {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-tab {
    font-size: 10px;
  }

  .po-header {
    flex-direction: column;
  }

  .po-header-actions {
    width: 100%;
  }

  .pm-header {
    flex-direction: column;
  }

  .pm-header .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Mobile: paper-first, content-first density ───────────────────────
   Phones are a reading surface, not a shrunken desktop dashboard.  Keep
   semantic grouping with a single quiet rule, but remove nested card shells,
   decorative fills and repeated horizontal gutters.  Controls retain their
   hit areas; prose keeps its breathing room. */
@media (max-width: 599px) {
  .tab-panel {
    padding: 0;
  }

  /* Shared library/list skeleton: one page gutter, then editorial rows. */
  #screenplay-list-view {
    padding: 10px 12px 18px !important;
  }

  #screenplay-list-view .po-header {
    padding: 0 0 9px !important;
    gap: 8px;
    align-items: flex-start;
  }

  #screenplay-list-view .po-header h2 {
    font-size: 18px !important;
    line-height: 1.3;
  }

  #screenplay-list-view .po-header-actions {
    gap: 6px !important;
    align-items: stretch !important;
  }

  #screenplay-list-view .po-header-actions .btn {
    min-height: 36px;
    padding: 6px 9px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
  }

  #screenplay-list-view .screenplay-toolbar {
    margin: 0 0 8px !important;
    padding: 7px 0 8px !important;
    gap: 7px !important;
  }

  #screenplay-filter-bar {
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    justify-content: flex-start;
  }

  #screenplay-filter-bar .books-scope-btn {
    padding: 5px 8px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
  }

  #screenplay-filter-bar .books-scope-btn.active {
    border-bottom-color: var(--primary) !important;
  }

  #screenplay-list-view .screenplay-toolbar-right {
    width: 100%;
    gap: 6px !important;
  }

  #screenplay-list-view .screenplay-sort-wrap {
    margin-right: auto;
  }

  #screenplay-list-view #screenplay-sort,
  #screenplay-list-view #screenplay-search {
    height: 32px !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #screenplay-list-view #screenplay-search {
    width: min(46vw, 190px) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  #screenplay-project-grid,
  .po-grid {
    padding: 0 !important;
    gap: 0 !important;
  }

  .project-card,
  .pm-task-card,
  .npc-card {
    min-height: 0;
    padding: 12px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .project-card::before,
  .screenplay-project-card::after {
    display: none;
  }

  .project-card:hover {
    transform: none;
    box-shadow: none;
  }

  .pc-top,
  .pc-logline,
  .pc-progress {
    margin-bottom: 7px;
  }

  .pc-meta {
    padding-top: 7px;
  }

  .pc-stage,
  .pc-tier {
    border-radius: 2px;
  }

  /* Production: reveal the workflow as a compact paper timeline. */
  .tasks-page-shell {
    background: transparent;
  }

  .tasks-page-head {
    padding: 10px 12px 8px;
    gap: 8px;
    align-items: flex-start;
    background: transparent;
  }

  .tasks-page-head h2 {
    font-size: 17px;
    line-height: 1.3;
  }

  .tasks-page-head p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
  }

  .tasks-page-head .btn {
    min-height: 34px;
    padding: 5px 8px;
    border-radius: 4px;
  }

  .plv-mobile-bar {
    min-height: 42px;
    padding: 4px 10px;
    border-radius: 0;
  }

  .plv-scroll {
    padding-bottom: 12px;
  }

  .plv-orig-wrap,
  .plv-s0-wrap,
  .plv-s1-wrap,
  .plv-s2-wrap {
    padding: 10px 12px 20px;
  }

  .plv-orig-hero {
    display: block;
    margin: 0 0 8px;
    padding: 0 0 9px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }

  .plv-orig-hero h3 {
    font-size: 17px;
    line-height: 1.35;
  }

  .plv-orig-hero p {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
  }

  .plv-orig-setup,
  .plv-orig-episodes,
  .plv-mine-grid {
    display: block;
    margin-bottom: 0;
  }

  .plv-orig-section-title {
    margin: 11px 0 3px;
  }

  .plv-orig-step,
  .plv-orig-episode,
  .plv-batch-card,
  .plv-mine-card {
    min-height: 0;
    margin: 0;
    padding: 8px 0;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .plv-orig-step + .plv-orig-step,
  .plv-orig-episode + .plv-orig-episode,
  .plv-mine-card + .plv-mine-card {
    margin-top: 0;
  }

  .plv-orig-ep-head {
    padding: 0 0 6px;
    border-bottom: 0;
  }

  .plv-orig-phase-row {
    padding: 0;
    gap: 9px;
    overflow: visible;
    flex-wrap: wrap;
  }

  .plv-orig-phase {
    min-width: 0;
    flex: 0 0 auto;
    padding: 2px 0;
    border-width: 0;
    border-radius: 0;
    background: transparent;
  }

  .plv-orig-phase:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: var(--text-dim);
  }

  .plv-orig-final {
    margin-top: 8px;
    padding: 8px 0;
    border-width: 1px 0 0;
    border-style: solid;
    border-radius: 0;
    background: transparent;
  }

  .plv-system-ops {
    margin-top: 12px;
    padding: 9px 0 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
  }

  .plv-system-title {
    margin-bottom: 3px;
  }

  .plv-batch-flow {
    margin-top: 4px;
    gap: 3px;
  }

  .plv-batch-flow span {
    padding: 2px 0;
    border-width: 0;
    border-radius: 0;
    background: transparent;
  }

  .plv-batch-flow i {
    margin: 0 2px;
  }

  .plv-batch-card small,
  .plv-system-foot {
    margin-top: 4px;
  }

  .plv-mine-card span,
  .plv-mine-track {
    margin-top: 3px;
  }

  /* Other high-volume reading views use the same narrow page gutter. */
  .books-landing-main,
  .pipeline-monitor,
  #novel-library-view,
  #novel-workspace-view {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .books-landing-main {
    padding-top: 8px;
  }

  .books-card,
  .list-item {
    border-radius: 0;
    box-shadow: none;
  }
}

/* ─── UNIFIED LOGS / HISTORY PAGE ─────────────────────────── */
.logs-entry-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 10px;
  transition: background .15s, border-color .15s;
}
.logs-entry-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-active);
}
.ulog-shell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 1040px;
  max-width: 96vw;
  height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(58, 40, 20, 0.22);
}
.ulog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ulog-header h3 { margin: 0; font-size: 15px; color: var(--text-main); }
.ulog-body { flex: 1; display: flex; min-height: 0; }
.ulog-list {
  width: 360px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-sidebar);
}
.ulog-section { margin-bottom: 18px; }
.ulog-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .05em;
  margin: 4px 6px 8px;
}
.ulog-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ulog-entry:hover { border-color: var(--border); }
.ulog-entry.active { border-color: var(--primary); background: var(--bg-input); }
.ulog-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.ulog-dot.running { background: var(--primary); }
.ulog-dot.success { background: var(--success); }
.ulog-dot.failed { background: var(--danger); }
.ulog-entry-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ulog-entry-title { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ulog-entry-meta { font-size: 11px; color: var(--text-dim); }
.ulog-empty { font-size: 12px; color: var(--text-dim); padding: 8px 10px; }
.ulog-detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ulog-detail-title {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
}
.ulog-logs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-main);
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ulog-logline { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.55; }
.ulog-logline.error { color: var(--danger); }
.ulog-logline.dim { color: var(--text-dim); }


/* =================================================================== */
/* 2026-06 小说库移动端 master-detail 优化 + 细节打磨                    */
/* =================================================================== */
.books-reader-back {
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  margin-right: 4px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
  color: var(--text, #4a3f33);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.books-reader-back:active { background: rgba(0,0,0,0.07); }

@media (max-width: 599px) {
  /* 默认：只显示列表（占满），选中后只显示阅读器 */
  .books-library { position: relative; height: 100%; }
  .books-sidebar {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    min-height: 0;
  }
  .books-list { flex: 1 1 auto; min-height: 0; }
  .books-reader { display: none !important; }

  .books-library.book-open .books-sidebar { display: none !important; }
  .books-library.book-open .books-reader {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }
  .books-library.book-open .books-reader-back { display: inline-flex; }

  .books-reader-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .books-reader-title-wrap { flex: 1 1 60%; min-width: 0; }
  .books-reader-title-wrap h2 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}


/* =================================================================== */
/* 2026-06 智能体 / 工作流目录 (wf-*) + 品牌返回主页                     */
/* =================================================================== */
.brand { cursor: pointer; transition: opacity .15s; -webkit-tap-highlight-color: transparent; }
.brand:hover { opacity: .82; }
.brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

#tab-help { overflow-y: auto; }
.wf-wrap { width: 100%; max-width: 1120px; margin: 0 auto; }

.wf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.wf-title {
  font-size: 26px; font-weight: 900; color: var(--text-main);
  letter-spacing: -.01em; margin: 0 0 4px;
}
.wf-sub { font-size: 13px; color: var(--text-muted); margin: 0; max-width: 640px; line-height: 1.5; }
.wf-stats { display: flex; gap: 10px; flex-shrink: 0; }
.wf-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.wf-stat b { font-size: 20px; font-weight: 900; color: var(--primary); line-height: 1.1; }
.wf-stat-dev b { color: #b07a1e; }

.wf-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  padding-bottom: 28px;
}

.wf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(58,40,20,.04), 0 10px 26px -18px rgba(58,40,20,.5);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wf-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 1px 2px rgba(58,40,20,.05), 0 18px 36px -20px rgba(58,40,20,.6);
}
.wf-card.is-dev { border-style: dashed; opacity: .92; }

.wf-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wf-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(162,62,46,.12), rgba(162,62,46,.04));
  border: 1px solid var(--border);
}
.wf-name-wrap { flex: 1; min-width: 0; }
.wf-name { font-size: 15.5px; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.wf-en { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: .02em; }
.wf-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.wf-type {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(58,40,20,.06); color: var(--text-muted); white-space: nowrap;
}
.wf-status { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.wf-status.on { background: rgba(46,125,50,.14); color: #2e7d32; }
.wf-status.dev { background: rgba(176,122,30,.16); color: #9a6a14; }

.wf-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 14px; }

.wf-io {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
}
.wf-io-row { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; }
.wf-io-k {
  flex-shrink: 0; width: 32px; font-weight: 800; color: var(--primary);
}
.wf-io-v { color: var(--text-main); }

.wf-flow-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;
}
.wf-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: auto; }
.wf-step {
  font-size: 11.5px; font-weight: 700; color: var(--text-main);
  background: rgba(162,62,46,.08); border: 1px solid rgba(162,62,46,.18);
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}
.wf-arrow { color: var(--primary); font-weight: 900; font-size: 12px; opacity: .7; }

/* —— 移动端：目录单列 —— */
@media (max-width: 599px) {
  .wf-head { margin-bottom: 16px; }
  .wf-title { font-size: 21px; }
  .wf-stats { width: 100%; }
  .wf-stat { flex: 1; }
  .wf-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Unified Logs Left Sidebar Tab Layout */
.ulog-sidebar {
  width: 360px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ulog-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 6px 12px 0;
  gap: 8px;
  flex-shrink: 0;
}
.ulog-tab-btn {
  flex: 1;
  padding: 10px 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  outline: none;
  text-align: center;
}
.ulog-tab-btn:hover {
  color: var(--text-main);
}
.ulog-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ============================================================
   Blueprint Layout Styles for Help Tab
   ============================================================ */
.blueprint-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 30px;
  background: #fbf9f6;
  background-image:
    linear-gradient(rgba(162, 62, 46, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(162, 62, 46, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 16px;
  border: 1px solid rgba(162, 62, 46, 0.15);
  box-shadow: 0 4px 20px rgba(58, 40, 20, 0.06), inset 0 0 20px rgba(162, 62, 46, 0.02);
  overflow: hidden;
}

.blueprint-canvas::before {
  content: 'STORYFORGE TEXT ARCHITECTURE BLUEPRINT // VER 1.2.6';
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(162, 62, 46, 0.4);
  letter-spacing: 2px;
}

.blueprint-canvas::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid rgba(162, 62, 46, 0.08);
  margin: 6px;
  pointer-events: none;
}

.bp-flow-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
}

@media (max-width: 900px) {
  .bp-flow-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.bp-hub-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 0;
}

.bp-connector-v {
  width: 2px;
  height: 32px;
  background: linear-gradient(to bottom, var(--primary), rgba(162, 62, 46, 0.25));
  margin: 0 auto;
  position: relative;
}
.bp-connector-v::after {
  content: '▼';
  position: absolute;
  bottom: -6px;
  left: -5px;
  font-size: 10px;
  color: var(--primary);
  transform: scaleX(1.2);
}

.bp-node-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(58, 40, 20, 0.04), 0 1px 2px rgba(58, 40, 20, 0.02);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bp-node-card:hover {
  transform: translateY(-3px);
  border-color: rgba(162, 62, 46, 0.35);
  box-shadow: 0 10px 24px rgba(162, 62, 46, 0.08), 0 2px 4px rgba(162, 62, 46, 0.02);
}

.bp-node-card.agent-node {
  border-left: 4px solid var(--secondary);
}

.bp-node-card.workflow-node {
  border-left: 4px solid var(--primary);
}

.bp-node-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-node-icon {
  font-size: 22px;
  background: rgba(162, 62, 46, 0.04);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(162, 62, 46, 0.1);
}

.bp-node-title-group {
  flex: 1;
  min-width: 0;
}

.bp-node-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.bp-node-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bp-node-card.agent-node .bp-node-tag {
  color: #b07a1e;
}
.bp-node-card.workflow-node .bp-node-tag {
  color: var(--primary);
}

.bp-node-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

.bp-node-io {
  background: #fdfcfb;
  border: 1px solid rgba(162, 62, 46, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
}

.bp-io-item {
  display: flex;
  gap: 8px;
}

.bp-io-lbl {
  color: var(--text-muted);
  width: 32px;
  flex-shrink: 0;
  font-weight: 700;
}

.bp-io-val {
  color: var(--text-main);
}

.bp-node-portal {
  font-size: 11.5px;
  background: rgba(212, 163, 89, 0.08);
  border: 1px solid rgba(212, 163, 89, 0.25);
  color: #9c6e25;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.bp-portal-icon {
  flex-shrink: 0;
}

.bp-column-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(162, 62, 46, 0.15);
  padding-bottom: 6px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#tab-help {
  overflow-y: auto;
}

/* ── 帮助页：故事苗圃 流程图 + 阶段详解（CSS 原生绘制）───────────────── */
.sgmap-wrap {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 20px 22px;
}
.sgmap-h { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.sgmap-lead { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin: 0 0 16px; }

/* 主流水线 */
.sgmap-pipe { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.sgmap-stage {
  flex: 1 1 110px; min-width: 104px;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 8px 9px; background: var(--bg-input);
  text-align: center; display: flex; flex-direction: column; gap: 2px; position: relative;
}
.sgmap-stage.todo { border-style: dashed; opacity: 0.7; background: var(--bg-trans-4); }
.sgmap-ic { font-size: 21px; line-height: 1.1; }
.sgmap-nm { font-weight: 800; font-size: 12.5px; color: var(--text-main); }
.sgmap-sub { font-size: 10px; color: var(--text-dim); line-height: 1.35; }
.sgmap-act { margin-top: 5px; font-size: 9.5px; color: var(--primary); background: rgba(162, 62, 46, 0.09); border-radius: 5px; padding: 2px 3px; font-weight: 600; }
.sgmap-stage.todo .sgmap-act { color: var(--text-dim); background: rgba(58, 40, 20, 0.06); }
.sgmap-arrow { align-self: center; color: var(--primary); font-weight: 800; font-size: 15px; flex: 0 0 auto; padding: 0 1px; }
@media (max-width: 760px) { .sgmap-arrow { transform: rotate(90deg); } .sgmap-stage { flex-basis: 100%; } }

/* 横切供给层 */
.sgmap-feeders { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.sgmap-feeder { flex: 1 1 220px; border: 1px dashed rgba(79, 111, 93, 0.5); border-radius: 10px; padding: 9px 12px; background: rgba(79, 111, 93, 0.06); }
.sgmap-feeder .ff-h { font-weight: 700; font-size: 12px; color: var(--secondary); display: flex; align-items: center; gap: 6px; }
.sgmap-feeder .ff-into { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.sgmap-feeder .ff-into b { color: var(--secondary); }

/* 铁律 callout */
.sgmap-laws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sgmap-law { font-size: 11px; color: var(--text-main); background: var(--primary-glow-trans-10); border: 1px solid var(--border); border-radius: 16px; padding: 4px 11px; }

/* 阶段详解卡 */
.sgmap-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.sgmap-step { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: var(--bg-card); }
.sgmap-step.todo { border-style: dashed; background: var(--bg-trans-3); }
.sgmap-badge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 2px; }
.sgmap-badge .b-ic { font-size: 24px; }
.sgmap-badge .b-p { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: var(--secondary); border-radius: 5px; padding: 1px 5px; }
.sgmap-step.todo .sgmap-badge .b-p { background: var(--text-dim); }
.sgmap-step-name { font-size: 13.5px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.sgmap-row { display: grid; grid-template-columns: 60px 1fr; gap: 8px; font-size: 12px; line-height: 1.6; margin-bottom: 3px; }
.sgmap-row .k { color: var(--text-dim); font-weight: 600; }
.sgmap-row .v { color: var(--text-muted); }
.sgmap-row .v b { color: var(--text-main); }
.sgmap-btn { display: inline-block; font-size: 11px; font-weight: 600; color: var(--primary); background: var(--primary-glow-trans-10); border: 1px solid var(--border-active); border-radius: 6px; padding: 1px 7px; margin: 0 2px 2px 0; white-space: nowrap; }
@media (max-width: 640px) { .sgmap-step { grid-template-columns: 1fr; } .sgmap-badge { flex-direction: row; } .sgmap-row { grid-template-columns: 52px 1fr; } }

/* ── 小说库 1.0 改版：落地页(目录) + 二级阅读页 ───────────────────── */
.books-landing {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.books-landing-side {
  width: 230px;
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  overflow: hidden;
}
.books-channel-tabs { display: flex; gap: 6px; }
.books-channel-tab {
  flex: 1;
  padding: 7px 0;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(43,32,21,0.02);
  color: var(--text-muted);
  cursor: pointer;
}
.books-channel-tab.active {
  background: rgba(162,62,46,0.12);
  border-color: rgba(162,62,46,0.5);
  color: var(--primary);
  font-weight: 600;
}
.books-cat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.books-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
}
.books-cat-item:hover { background: rgba(43,32,21,0.05); }
.books-cat-item.active {
  background: rgba(162,62,46,0.12);
  color: var(--primary);
  font-weight: 600;
}
.books-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.books-cat-count { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; flex: 0 0 auto; }
.books-landing-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  overflow: hidden;
}
.books-landing-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.books-sort { width: auto; cursor: pointer; }
.books-landing-search {
  max-width: 560px;
  width: 100%;
}
.books-landing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.books-scope {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.books-scope-btn {
  padding: 6px 16px;
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.books-scope-btn + .books-scope-btn { border-left: 1px solid var(--border); }
.books-scope-btn.active {
  background: rgba(162,62,46,0.12);
  color: var(--primary);
  font-weight: 600;
}
.books-stats { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.books-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  grid-auto-rows: min-content;
  gap: 14px;
  align-content: start;
  padding-right: 4px;
}
.books-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.books-card:hover { border-color: rgba(162,62,46,0.45); }
.books-card.not-imported { background: rgba(43,32,21,0.015); border-style: dashed; }
.books-card-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
  min-height: calc(1.5em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.books-card-badge { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
.books-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.books-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
}
.books-card-tag.imported { background: rgba(76,128,76,0.16); color: #3f6b3f; }
.books-card-tag.deep { background: rgba(120,86,170,0.18); color: #6a4aa0; }
.books-card-tag.quick { background: rgba(76,128,76,0.16); color: #3f6b3f; }
.books-card-tag.none { background: rgba(43,32,21,0.08); color: var(--text-muted); }
.books-card-analyze {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(162,62,46,0.35);
  border-radius: 6px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}
.books-card-import {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--primary);
  border-radius: 7px;
  background: rgba(162,62,46,0.1);
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.books-card-import:disabled { opacity: 0.6; cursor: default; }
.books-grid-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 14px;
  color: var(--text-muted);
  font-size: 12px;
}
/* 二级页：章节栏 */
.books-detail-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--border);
}
/* 二级页：速析面板 */
.books-scan-panel { padding: 10px 2px; border-bottom: 1px solid var(--border); }
.books-scan-loading, .books-scan-empty { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.books-scan-empty p { margin: 0 0 8px; }
.books-scan-empty .btn { display: block; width: 100%; margin-bottom: 6px; }
.books-scan-card { font-size: 12px; color: var(--text-main); }
.books-scan-fit { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.books-scan-score {
  font-family: var(--font-mono); font-weight: 800; font-size: 20px;
  color: var(--primary); line-height: 1;
  background: rgba(162,62,46,0.1); border-radius: 8px; padding: 4px 10px;
}
.books-scan-verdict { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.books-scan-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.books-scan-meta span {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  background: rgba(43,32,21,0.05); border-radius: 5px; padding: 2px 6px;
}
.books-scan-syn { margin: 0 0 8px; line-height: 1.6; color: var(--text-main); }
.books-scan-line { margin: 0 0 5px; line-height: 1.5; }
.books-scan-line b { color: var(--primary); font-weight: 600; margin-right: 4px; }
.books-scan-dim { color: var(--text-muted); }
.books-scan-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.books-scan-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: rgba(43,32,21,0.06); color: var(--text-muted);
}
.books-scan-reasons { margin: 6px 0 8px; padding-left: 16px; color: var(--text-muted); line-height: 1.6; }
.books-scan-reasons li { margin-bottom: 2px; }
.books-scan-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.books-scan-actions.vert { flex-direction: column; }
.books-scan-actions.vert .btn { width: 100%; }

/* 二级页右侧主区:速析专属页面 + 阅读器切换 */
.books-detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.books-scan-page { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px; }

/* 左侧菜单 */
.books-detail-menu { display: flex; flex-direction: column; gap: 4px; }
.books-menu-item {
  text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.books-menu-item:hover { background: rgba(43,32,21,0.05); color: var(--text-main); }
.books-menu-item.active {
  background: rgba(162,62,46,0.12); color: var(--primary); font-weight: 600;
  border-color: rgba(162,62,46,0.25);
}

/* 速析页面:hero + 双栏 */
.books-scan-hero { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 18px; }
.books-scan-statebar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.books-scan-ts { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.books-scan-hero h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 800; color: var(--text-main); margin: 0 0 10px; }
.books-scan-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.books-scan-col { min-width: 0; }
.books-scan-block { margin-bottom: 16px; }
.books-scan-block h4 { font-size: 12px; font-weight: 700; color: var(--primary); margin: 0 0 5px; letter-spacing: .5px; }
.books-scan-block p { margin: 0 0 4px; line-height: 1.7; color: var(--text-main); font-size: 13.5px; }
.books-scan-aside { position: sticky; top: 0; }
.books-scan-fitcard {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: rgba(162,62,46,0.04); margin-bottom: 14px;
}
.books-scan-fitscore {
  font-family: var(--font-mono); font-weight: 800; font-size: 38px; line-height: 1;
  color: var(--primary); display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;
}
.books-scan-fitscore small { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* 卡片富信息 */
.books-card-rich { display: flex; flex-direction: column; gap: 5px; }
.bcr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bcr-chip {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 5px;
  background: rgba(43,32,21,0.06); color: var(--text-dim);
}
.bcr-chip.fit { background: rgba(162,62,46,0.12); color: var(--primary); font-weight: 700; }
.bcr-chip.ok { background: rgba(76,128,76,0.16); color: #3f6b3f; }
.bcr-chip.warn { background: rgba(196,132,40,0.16); color: #a06a14; }
.bcr-syn {
  margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bcr-line { margin: 0; font-size: 11px; color: var(--text-dim); }
.bcr-line b { color: var(--text-muted); }
.bcr-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.bcr-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: rgba(43,32,21,0.05); color: var(--text-dim); }

@media (max-width: 760px) {
  .books-scan-grid { grid-template-columns: 1fr; }
  .books-scan-aside { position: static; }
  .books-scan-page { padding: 18px 16px; }
}
.books-chapter-item {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.books-chapter-item:hover { background: rgba(43,32,21,0.05); }
.books-chapter-item.active {
  background: rgba(162,62,46,0.12);
  color: var(--primary);
  font-weight: 600;
}

/* ===================== 故事苗圃 / Seedling Lab (P0) ===================== */
.seedling-shell { display: flex; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.seedling-side {
  width: 230px; flex: 0 0 230px; display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-right: 1px solid var(--border); background: var(--bg-sidebar); overflow-y: auto;
}
.seedling-side-head { font-family: var(--font-serif); font-size: 16px; font-weight: 800; color: var(--text-main); }
.seedling-side-sub { font-size: 11px; color: var(--text-muted); margin-top: 8px; letter-spacing: .5px; }
.seedling-lab-list { display: flex; flex-direction: column; gap: 4px; }
.seedling-lab-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--text-main); background: var(--bg-card);
}
.seedling-lab-item:hover { border-color: rgba(76,128,76,0.5); }
.seedling-lab-item.active { background: rgba(76,128,76,0.12); border-color: rgba(76,128,76,0.5); font-weight: 600; }
.sg-lab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-lab-demo { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(76,128,76,0.18); color: #3f6b3f; }
.seedling-type-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-typechip { font-size: 11px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; }
.sg-typechip.active { background: rgba(76,128,76,0.14); color: #3f6b3f; border-color: rgba(76,128,76,0.4); font-weight: 600; }

.seedling-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px; }
.seedling-stage-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sg-stage { padding: 7px 14px; font-size: 13px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; }
.sg-stage:hover { border-color: rgba(76,128,76,0.45); }
.sg-stage.active { background: rgba(76,128,76,0.14); color: #3f6b3f; border-color: rgba(76,128,76,0.45); font-weight: 700; }
.seedling-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; padding-bottom: 2px; }
.sg-subtab { font-size: 12px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-muted); cursor: pointer; }
.sg-subtab:hover { border-color: rgba(76,128,76,0.45); color: var(--text-main); }
.sg-subtab.active { background: rgba(76,128,76,0.14); color: #3f6b3f; border-color: rgba(76,128,76,0.45); font-weight: 700; }
.sg-subtab span { margin-left: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.seedling-wall-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.seedling-wall-title { font-family: var(--font-serif); font-size: 17px; font-weight: 800; color: var(--text-main); }
.seedling-badge { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(76,128,76,0.16); color: #3f6b3f; }
.seedling-wall-stat { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.sg-op-strip {
  flex: 0 0 auto;
  margin: -2px 0 10px;
  border: 1px solid rgba(76,128,76,0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(76,128,76,0.09), rgba(76,128,76,0.035));
  padding: 9px 12px;
}
.sg-op-strip.error {
  border-color: rgba(162,62,46,0.28);
  background: rgba(162,62,46,0.06);
}
.sg-op-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-main); }
.sg-op-title { font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-op-state { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }
.sg-op-bar { height: 5px; border-radius: 999px; background: rgba(43,32,21,0.08); overflow: hidden; margin-top: 7px; }
.sg-op-fill { height: 100%; width: var(--pct, 20%); border-radius: inherit; background: var(--secondary); transition: width .18s ease; }
.sg-op-strip.error .sg-op-fill { background: var(--primary); }
.sg-log-list { max-height: min(58vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sg-log-item { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; background: var(--bg-card); }
.sg-log-item.running { border-color: rgba(76,128,76,.35); background: rgba(76,128,76,.05); }
.sg-log-item.error { border-color: rgba(162,62,46,.35); background: rgba(162,62,46,.05); }
.sg-log-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sg-log-label { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.sg-log-status { font-size: 10.5px; font-family: var(--font-mono); color: var(--text-muted); }
.sg-log-meta { margin-top: 4px; font-size: 11px; color: var(--text-dim); line-height: 1.45; word-break: break-word; }
.seedling-wall {
  flex: 1; min-height: 0; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); grid-auto-rows: min-content;
  gap: 12px; align-content: start; padding-right: 4px;
}
/* 🎬 时间轴编排（播出线/世界线） */
/* ⚖️ 选择台（决断台）*/
.seedling-wall.sg-wall-decision { display: flex; overflow: hidden; padding: 0; }
.sg-dec { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.sg-dec-bar { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.sg-dec-hint { font-size: 11px; color: var(--text-dim); }
.sg-dec-spacer { flex: 1; }
.sg-dec-status { font-size: 11px; color: var(--accent); }
.sg-dec-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
.sg-dec-band { position: sticky; top: 0; z-index: 2; background: var(--bg-card); font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .04em; padding: 12px 2px 6px; margin-top: 6px; border-bottom: 1px solid rgba(43,32,21,0.08); }
.sg-dec-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(43,32,21,0.08); align-items: stretch; }
.sg-dec-row.decided .sg-dec-slot-id { color: var(--accent); }
.sg-dec-slot { flex: 0 0 168px; min-width: 168px; }
.sg-dec-slot-id { font-size: 12px; font-weight: 700; color: var(--text-main); }
.sg-dec-ok { color: var(--accent); font-size: 11px; }
.sg-dec-wait { color: var(--text-dim); font-size: 11px; font-weight: 400; }
.sg-dec-slot-title { font-size: 13px; font-weight: 600; color: var(--text-main); margin-top: 3px; }
.sg-dec-slot-fn { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.sg-dec-slot-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; }
.sg-dec-cands { flex: 1; display: flex; gap: 9px; flex-wrap: wrap; align-content: flex-start; }
.sg-dec-empty { font-size: 12px; color: var(--text-dim); font-style: italic; align-self: center; padding: 8px 4px; }
.sg-dec-card { flex: 0 0 198px; max-width: 220px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; cursor: pointer; background: rgba(43,32,21,0.015); transition: border-color .12s, box-shadow .12s, opacity .12s; }
.sg-dec-card:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(43,32,21,0.08); }
.sg-dec-card.chosen { border-color: var(--accent); border-width: 1.5px; background: rgba(60,130,90,0.07); box-shadow: 0 1px 8px rgba(60,130,90,0.14); }
.sg-dec-card.dim { opacity: .42; }
.sg-dec-card.dim:hover { opacity: .75; }
.sg-dec-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.sg-dec-pick { font-size: 10.5px; font-weight: 700; color: var(--accent); }
.sg-dec-card.chosen .sg-dec-pick { color: var(--accent); }
.sg-dec-card:not(.chosen) .sg-dec-pick { color: var(--text-dim); }
.sg-dec-detail { border: 1px solid var(--border); background: var(--bg-card); border-radius: 6px; font-size: 10px; padding: 2px 7px; cursor: pointer; color: var(--text-muted); font-family: inherit; }
.sg-dec-detail:hover { border-color: var(--accent); color: var(--accent); }
.sg-dec-card-title { font-size: 12.5px; font-weight: 600; color: var(--text-main); line-height: 1.35; }
.sg-dec-card-log { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }

.seedling-wall.sg-wall-timeline { display: flex; overflow: hidden; padding: 0; }
/* 🗺️ 地理图 / Narrative Cartogram */
.seedling-wall.sg-wall-geo { display: flex; overflow: hidden; padding: 0; }
.sg-geo-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); transition: opacity .16s ease, transform .16s ease; }
.sg-geo-wrap.sg-geo-switching { opacity: .16; transform: scale(.992); }
.sg-geo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sg-geo-hint { font-size: 11px; color: var(--text-dim); }
.sg-geo-tide { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.sg-geo-tide input[type=range] { width: 160px; cursor: pointer; }
.sg-geo-tide button { border: 1px solid var(--border); background: rgba(43,32,21,0.03); padding: 4px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-muted); }
.sg-geo-tide button.on { background: var(--text-main); color: var(--bg-card); font-weight: 650; border-color: var(--text-main); }
/* 自适应：地图按高度铺满(消除上下 letterbox 留白)，按视图宽高比定宽；
   网页大→跟着长大；网页小→由 min 尺寸强制最小面积 + 容器横/纵向滚动。 */
.sg-geo-canvas { flex: 1; min-height: 0; min-width: 0; overflow: hidden; position: relative;
  display: block; background:
  radial-gradient(circle at 30% 35%, rgba(201,138,59,0.05), transparent 60%),
  repeating-linear-gradient(0deg, rgba(120,100,70,0.04) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, rgba(120,100,70,0.04) 0 1px, transparent 1px 26px); }
/* SVG 充满画布:宽高比由 viewBox 跟随画布(在 JS 里设),默认宽度铺满、上下溢出由 viewBox 平移查看 */
#sg-geo-svg { width: 100%; height: 100%; display: block; font-family: inherit;
  cursor: grab; touch-action: none; user-select: none; }
#sg-geo-svg.grabbing { cursor: grabbing; }
.sg-geo-canvas::after { content: '© 高德 / OpenStreetMap · CARTO'; position: absolute; left: 10px; bottom: 8px; font-size: 10px; color: var(--text-dim); background: rgba(255,255,255,.72); padding: 2px 7px; border-radius: 6px; pointer-events: none; }
/* 右下角 放大/重置/缩小 控件 */
.sg-geo-zoomctl { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.sg-geo-zoomctl button { width: 38px; height: 38px; border: 1px solid var(--border); background: rgba(255,255,255,.92);
  border-radius: 9px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-main); font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent; transition: background .12s, transform .08s; }
.sg-geo-zoomctl button:hover { background: #fff; }
.sg-geo-zoomctl button:active { transform: scale(.92); }
.sg-geo-zoomctl button#sg-geo-zreset { font-size: 17px; }
.sg-geo-rtitle { font-size: 13px; font-weight: 650; letter-spacing: .5px; opacity: .85; }
.sg-geo-ntitle { font-size: 20px; fill: var(--text-muted); paint-order: stroke; stroke: rgba(255,255,255,.8); stroke-width: 3px; }
.sg-geo-node-wrapper { cursor: pointer; transition: opacity .25s; outline: none; }
.sg-geo-node-wrapper circle { transition: transform .12s, filter .12s; }
.sg-geo-node-wrapper:hover circle, .sg-geo-node-wrapper:focus circle { filter: brightness(1.15) drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.sg-geo-node-wrapper.dim { opacity: .14; }
.sg-geo-flow { transition: opacity .25s; }
.city-river { fill: none; stroke: #a9c5d6; stroke-width: 14; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.city-railway { stroke: #ab9c82; stroke-width: 3.5; stroke-dasharray: 8 5; fill: none; }
.sg-compound-label { font-size: 11px; font-weight: 750; fill: var(--text-muted); opacity: 0.85; letter-spacing: 0.5px; }
.sg-compound-border { vector-effect: non-scaling-stroke; }
.sg-district-label-wrapper text { transition: fill 0.25s; }

.sg-geo-legendbar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.sg-geo-leg { display: inline-flex; align-items: center; gap: 5px; }
.sg-geo-leg i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.sg-geo-leg-note { margin-left: auto; color: var(--text-dim); }
.sg-geo-ctitle { font-size: 16px; font-weight: 800; letter-spacing: 1px; opacity: .9; }
.sg-geo-anchor { font-size: 11px; fill: var(--text-muted); font-weight: 600; }
.sg-geo-more { font-size: 12px; fill: var(--accent, #c98a3b); font-weight: 800; opacity: .85; }
.sg-geo-region-anchor { cursor: pointer; outline: none; }
.sg-geo-region-anchor:hover circle, .sg-geo-region-anchor:focus circle { filter: brightness(1.12) drop-shadow(0 2px 6px rgba(0,0,0,.24)); }
.sg-geo-local-title { font-size: 18px; font-weight: 850; fill: var(--text-main); letter-spacing: 0; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.sg-geo-portal { cursor: pointer; outline: none; }
.sg-geo-portal:hover circle, .sg-geo-portal:focus circle { filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.sg-geo-portal-label { font-size: 12px; fill: var(--text-main); font-weight: 750; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.sg-geo-lodtag { margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: rgba(201,138,59,.14); color: var(--accent, #c98a3b); font-size: 11px; font-weight: 700; }
.sg-geo-mapicon { font-size: 12px; fill: #8a7f6a; }
.sg-geo-hub { cursor: pointer; outline: none; }
.sg-geo-hub:hover circle, .sg-geo-hub:focus circle { filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.sg-geo-hub-ico { font-size: 16px; fill: #fff; font-weight: 800; }
.sg-geo-hub-t { font-size: 13px; font-weight: 750; fill: #8a5a1a; }
.sg-geo-crumb { display: inline-flex; align-items: center; gap: 10px; }
.sg-geo-where { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.sg-geo-cityhint { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.sg-geo-back { border: 1px solid var(--border); background: rgba(43,32,21,0.04); padding: 4px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-main); font-weight: 650; }
.sg-geo-back:hover { background: var(--text-main); color: var(--bg-card); }
/* v3 真实底图两级地图：城市钉 / 编排台 */
.sg-geo-pin-wrapper { cursor: pointer; outline: none; transition: opacity .25s; }
.sg-geo-pin-wrapper.dim { opacity: .28; }
.sg-geo-pin-wrapper:hover circle, .sg-geo-pin-wrapper:focus circle { filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.32)); }
.sg-geo-pin-label { font-size: 26px; font-weight: 750; fill: var(--text-main); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 5px; transition: opacity .2s; }
.sg-geo-pin-cnt { font-size: 22px; font-weight: 500; fill: var(--text-muted); }
.sg-geo-pin-star { font-size: 20px; fill: #fff; font-weight: 800; }
.sg-geo-draggable { cursor: grab; }
.sg-geo-draggable:active { cursor: grabbing; }
.sg-wall-geo .sg-geo-draggable .sg-geo-node-circle { stroke-dasharray: 2 2; }
.sg-geo-tools { display: inline-flex; align-items: center; gap: 6px; }
.sg-geo-tools button { border: 1px solid var(--border); background: rgba(43,32,21,0.03); padding: 4px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-muted); }
.sg-geo-tools button.on { background: var(--accent, #c98a3b); color: #fff; font-weight: 650; border-color: var(--accent, #c98a3b); }
.sg-geo-status { font-size: 11px; color: var(--accent, #c98a3b); min-width: 48px; }
.sg-geo-empty-hint { font-size: 15px; fill: var(--text-dim); font-weight: 600; }
#sg-geo-svg image { image-rendering: auto; }
.sg-tl { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.sg-tl-bar { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sg-tl-tabs { display: inline-flex; gap: 6px; }
.sg-tl-tabs button { border: 1px solid var(--border); background: rgba(43,32,21,0.03); padding: 5px 12px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text-muted); }
.sg-tl-tabs button.on { background: var(--text-main); color: var(--bg-card); font-weight: 650; border-color: var(--text-main); }
.sg-tl-tabs button span { font-size: 10px; opacity: .7; margin-left: 5px; font-weight: 400; }
.sg-tl-status { font-size: 11px; color: var(--accent); }
.sg-tl-spacer { flex: 1; }
.sg-tl-ctrls { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.sg-tl-ctrls input[type=range] { accent-color: var(--accent); }
.sg-tl-budget { font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; }
.sg-tl-budget.over { color: #9c5f4e; border-color: #9c5f4e; }
.sg-tl-mode-pb .sg-tl-budget { font-size: 12.5px; padding: 4px 9px; }
.sg-tl-pb-mode { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.sg-tl-main { flex: 1; display: flex; min-height: 0; }
.sg-tl-mode-pb .sg-tl-main { flex-direction: row; }
.sg-tl-src { width: 188px; flex: none; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 9px; background: rgba(43,32,21,0.015); }
.sg-tl-mode-pb .sg-tl-src {
  width: 248px;
  max-height: none;
  border-right: 1px solid var(--border);
  border-bottom: 0;
  display: block;
}
.sg-tl-mode-pb .sg-tl-src-head,
.sg-tl-mode-pb .sg-tl-src-placed { grid-column: auto; }
.sg-tl-mode-pb .sg-tl-ev { margin-bottom: 7px; }
.sg-tl-mode-pb .sg-tl-ev .t { font-size: 13.5px; }
.sg-tl-mode-pb .sg-tl-ev .l { font-size: 12px; }
.sg-tl-mode-pb .sg-tl-ev .who { font-size: 11.5px; }
.sg-tl-src-head { font-size: 12px; font-weight: 650; color: var(--text-main); margin-bottom: 6px; }
.sg-tl-src-hint { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-top: 2px; line-height: 1.4; }
.sg-tl-src-placed { font-size: 11px; color: var(--text-dim); margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border); }
.sg-tl-ev { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid #9c5f4e; border-radius: 7px; padding: 6px 8px; margin-bottom: 6px; cursor: grab; }
.sg-tl-ev:active { cursor: grabbing; }
.sg-tl-ev .t { font-size: 12px; font-weight: 600; line-height: 1.25; }
.sg-tl-ev .l { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.sg-tl-ev .who { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.sg-tl-vmap { width: 36px; flex: none; border-right: 1px solid var(--border); background: rgba(43,32,21,0.03); position: relative; cursor: pointer; }
.sg-tl-mode-pb .sg-tl-vmap { display: none; }
.sg-tl-vmap-blk { position: absolute; left: 6px; right: 6px; background: #9c5f4e; opacity: .5; border-radius: 2px; min-height: 3px; }
.sg-tl-vmap-view { position: absolute; left: 1px; right: 1px; border: 1.5px solid var(--accent); background: rgba(138,109,59,0.10); border-radius: 4px; cursor: grab; }
.sg-tl-scroll { flex: 1; overflow: auto; position: relative; }
.sg-tl-track { position: relative; min-width: 100%; }
.sg-tl-mode-pb .sg-tl-scroll { overflow-x: hidden; }
.sg-tl-mode-pb .sg-tl-track { min-width: 0; width: 100%; }
.sg-tl-colhead { position: sticky; top: 0; height: 30px; display: flex; z-index: 4; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.sg-tl-mode-pb .sg-tl-colhead { height: 34px; }
.sg-tl-corner { width: 54px; flex: none; border-right: 1px solid var(--border); }
.sg-tl-ch { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650; color: var(--text-muted); border-right: 1px dashed var(--border); }
.sg-tl-ch.pb { flex: 1; color: #9c5f4e; }
.sg-tl-mode-pb .sg-tl-ch.pb { justify-content: flex-start; padding: 0 18px; font-size: 14px; border-right: 0; }
.sg-tl-ch.wd { color: #7a6a8c; }
.sg-tl-body { position: relative; }
.sg-tl-pb-list {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 22px;
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}
.sg-tl-pb-section {
  margin: 4px 0 0;
  padding: 5px 8px;
  color: #8f5142;
  border-left: 3px solid rgba(156,95,78,.45);
  background: rgba(156,95,78,.06);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 750;
}
.sg-tl-pb-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  cursor: grab;
}
.sg-tl-pb-row:active { cursor: grabbing; }
.sg-tl-pb-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-top: 10px;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.2;
  border-right: 1px solid rgba(156,95,78,.22);
  padding-right: 12px;
}
.sg-tl-pb-time b {
  color: #9c5f4e;
  font-size: 12px;
  font-weight: 750;
}
.sg-tl-pb-card {
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid #9c5f4e;
  border-radius: 8px;
  padding: 11px 13px;
  box-shadow: 0 1px 4px rgba(60,48,28,.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sg-tl-pb-card:hover { background-color: var(--bg-input); box-shadow: 0 2px 8px rgba(60,48,28,.12); }
.sg-tl-pb-index {
  flex: none;
  min-width: 28px;
  color: #9c5f4e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 750;
}
.sg-tl-pb-card .sg-tl-scene-top { min-height: 28px; gap: 10px; }
.sg-tl-pb-card .sg-tl-scene-top .nt {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sg-tl-pb-card .sg-tl-scene-top .x {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(43,32,21,0.03);
  font-size: 17px;
}
.sg-tl-pb-card .sg-tl-scene-desc {
  font-size: 14px;
  line-height: 1.45;
  -webkit-line-clamp: 3;
}
.sg-tl-pb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sg-tl-pb-card .sg-tl-scene-chars,
.sg-tl-pb-card .sg-tl-scene-tags {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
}
.sg-tl-pb-gap,
.sg-tl-pb-empty {
  margin-left: 102px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  background: rgba(43,32,21,0.025);
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.35;
}
.sg-tl-actfill { position: absolute; left: 54px; right: 0; }
.sg-tl-actfill.a1 { background: rgba(91,123,106,.05); } .sg-tl-actfill.a2 { background: rgba(156,95,78,.05); } .sg-tl-actfill.a3 { background: rgba(90,107,138,.05); }
.sg-tl-actband { position: absolute; left: 0; width: 54px; writing-mode: vertical-rl; text-align: center; font-size: 10.5px; color: var(--text-dim); letter-spacing: 2px; border-right: 1px solid var(--border); }
.sg-tl-yt { position: absolute; left: 6px; width: 44px; font-size: 10px; color: var(--text-dim); }
.sg-tl-yt.major { color: var(--text-muted); font-weight: 600; }
.sg-tl-ytl { position: absolute; left: 54px; right: 0; border-top: 1px solid rgba(120,100,70,.10); }
.sg-tl-ytl.major { border-top-color: rgba(120,100,70,.22); }
.sg-tl-scene { position: absolute; left: 58px; right: 12px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid #9c5f4e; border-radius: 6px; padding: 6px 9px; box-shadow: 0 1px 4px rgba(60,48,28,.08); cursor: grab; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; box-sizing: border-box; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.sg-tl-scene:hover { background-color: var(--bg-input); box-shadow: 0 2px 6px rgba(60,48,28,.12); }
.sg-tl-scene:active { cursor: grabbing; }
.sg-tl-scene-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 16px; flex-shrink: 0; }
.sg-tl-scene-top .nt { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; text-align: left; }
.sg-tl-scene-top .time { font-size: 10px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; font-family: monospace; }
.sg-tl-scene-top .x { border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.sg-tl-scene-top .x:hover { color: #9c5f4e; }
.sg-tl-scene-chars { font-size: 10px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; text-align: left; opacity: 0.9; }
.sg-tl-scene-tags { font-size: 9.5px; color: #9c5f4e; background: rgba(156, 95, 78, 0.06); border: 1px solid rgba(156, 95, 78, 0.16); border-radius: 4px; padding: 1px 4px; display: inline-block; align-self: flex-start; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.sg-tl-scene-desc { font-size: 10.5px; color: var(--text-dim); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 2px; text-align: left; }
.sg-tl-wevent .x { margin-left: auto; flex: none; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.sg-tl-wevent .x:hover { color: #9c5f4e; }
.sg-tl-gap { position: absolute; left: 58px; right: 12px; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-dim); font-size: 10.5px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(154,145,132,.05) 8px,rgba(154,145,132,.05) 16px); }
.sg-tl-wevent { position: absolute; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid #7a6a8c; border-radius: 6px; padding: 5px 7px; box-shadow: 0 1px 4px rgba(60,48,28,.08); cursor: grab; overflow: visible; display: flex; align-items: flex-start; gap: 4px; min-height: 30px; z-index: 2; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.sg-tl-wevent:hover { background-color: var(--bg-input); box-shadow: 0 2px 6px rgba(60,48,28,.12); z-index: 7; }
.sg-tl-wevent-tip { display: none; position: absolute; bottom: 120%; left: 0; transform: none; background: #1e1914; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 11px; min-width: 220px; max-width: 320px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); z-index: 999; pointer-events: none; white-space: normal; text-align: left; border: 1px solid rgba(255,255,255,0.15); line-height: 1.45; font-weight: normal; }
.sg-tl-wevent-tip strong { display: block; font-size: 12px; color: #c0894e; margin-bottom: 6px; }
.sg-tl-wevent-tip::after { content: ""; position: absolute; top: 100%; left: 24px; transform: none; border: 6px solid transparent; border-top-color: #1e1914; }
.sg-tl-wevent:hover .sg-tl-wevent-tip { display: block; }
.sg-tl-yt-wd { position: absolute; left: 6px; width: 84px; font-size: 10px; color: var(--text-dim); font-weight: 600; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 6px 0 0; border-right: 1px solid var(--border); box-sizing: border-box; background: rgba(43,32,21,0.015); pointer-events: none; }
.sg-wd-dline { position: absolute; height: 0; border-top: 1px dashed rgba(122,106,140,.30); pointer-events: none; z-index: 1; }
.sg-wd-skip { position: absolute; text-align: center; font-size: 9px; color: #b58b5e; letter-spacing: 1px; pointer-events: none; z-index: 3; }
.sg-tl-zoom { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.sg-tl-zoom-lbl { font-size: 11px; color: var(--text-dim); min-width: 56px; }
.sg-tl-zoom input[type=range] { width: 120px; accent-color: #7a6a8c; cursor: pointer; }
.sg-tl-wevent:active { cursor: grabbing; }
.sg-tl-wevent .nt { font-size: 11px; font-weight: 600; line-height: 1.28; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.sg-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); cursor: pointer; }
.sg-card:hover { border-color: rgba(76,128,76,0.5); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sg-card.selected { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary), 0 2px 8px rgba(0,0,0,0.04); }
.sg-card.pruned { opacity: .62; background: rgba(43,32,21,0.025); }
.sg-card.deprecated { opacity: .45; background: rgba(180,20,20,0.04); border-color: rgba(180,20,20,0.18); }
.sg-card-select {
  position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-card); color: #fff; font-size: 12px;
  line-height: 18px; text-align: center; cursor: pointer; z-index: 2;
}
.sg-card-select:hover { border-color: var(--secondary); }
.sg-card-select.active { background: var(--secondary); border-color: var(--secondary); }
.sg-card-mainline { background: rgba(120,86,170,0.04); }
.sg-card-package { background: rgba(162,62,46,0.04); }
.seedling-wall.sg-wall-notes { display: flex; overflow: hidden; padding: 0; }
.sg-notes { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.sg-notes-list { min-height: 0; overflow-y: auto; border-right: 1px solid var(--border); background: rgba(43,32,21,0.018); padding: 10px; box-sizing: border-box; }
.sg-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 750; color: var(--text-main); margin-bottom: 6px; }
.sg-notes-new { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; cursor: pointer; color: var(--text-main); font-size: 18px; line-height: 1; }
.sg-notes-new:hover { border-color: var(--accent); color: var(--accent); }
.sg-notes-hint { font-size: 11.5px; line-height: 1.45; color: var(--text-dim); margin-bottom: 10px; }
.sg-notes-items { display: flex; flex-direction: column; gap: 7px; }
.sg-notes-item { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 8px 9px; cursor: pointer; font-family: inherit; color: var(--text-main); }
.sg-notes-item:hover { border-color: rgba(76,128,76,0.45); }
.sg-notes-item.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(76,128,76,0.22); background: rgba(76,128,76,0.05); }
.sg-notes-item .t { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-notes-item .m { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--text-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sg-notes-editor { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-card); }
.sg-notes-editor-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sg-notes-title { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text-main); font-family: inherit; font-size: 18px; font-weight: 750; line-height: 1.3; padding: 6px 8px; border-radius: 8px; }
.sg-notes-title:focus { outline: none; border-color: var(--border); background: rgba(43,32,21,0.025); }
.sg-notes-status { flex: none; font-size: 12px; color: var(--text-dim); }
.sg-notes-delete { flex: none; border: 1px solid var(--border); background: rgba(43,32,21,0.03); border-radius: 8px; padding: 6px 10px; color: var(--text-muted); font-family: inherit; cursor: pointer; }
.sg-notes-delete:hover { border-color: #9c5f4e; color: #9c5f4e; }
.sg-notes-body { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; padding: 16px 18px 22px; box-sizing: border-box; background: transparent; color: var(--text-main); font-family: inherit; font-size: 15.5px; line-height: 1.65; outline: none; }
.sg-notes-preview { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; box-sizing: border-box; font-size: 15px; line-height: 1.7; color: var(--text-main); }
.sg-notes-preview h1,.sg-notes-preview h2,.sg-notes-preview h3 { font-family: var(--font-serif); font-weight: 750; color: var(--text-main); margin: 1.2em 0 0.4em; line-height: 1.3; }
.sg-notes-preview h1 { font-size: 1.45em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.sg-notes-preview h2 { font-size: 1.2em; }
.sg-notes-preview h3 { font-size: 1.05em; }
.sg-notes-preview p { margin: 0.6em 0; }
.sg-notes-preview ul,.sg-notes-preview ol { padding-left: 1.6em; margin: 0.5em 0; }
.sg-notes-preview li { margin: 0.3em 0; }
.sg-notes-preview strong { font-weight: 700; }
.sg-notes-preview em { font-style: italic; color: var(--text-dim); }
.sg-notes-preview code { background: rgba(43,32,21,0.07); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; font-family: monospace; }
.sg-notes-preview pre { background: rgba(43,32,21,0.07); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0.8em 0; }
.sg-notes-preview pre code { background: none; padding: 0; }
.sg-notes-preview blockquote { border-left: 3px solid var(--accent); margin: 0.8em 0; padding: 0.4em 0 0.4em 14px; color: var(--text-dim); }
.sg-notes-preview table { border-collapse: collapse; width: 100%; margin: 0.8em 0; font-size: 14px; }
.sg-notes-preview th,.sg-notes-preview td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.sg-notes-preview th { background: rgba(43,32,21,0.05); font-weight: 700; }
.sg-notes-preview hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.sg-notes-preview-toggle { flex: none; border: 1px solid var(--border); background: rgba(43,32,21,0.03); border-radius: 8px; padding: 5px 10px; color: var(--text-dim); font-family: inherit; font-size: 12px; cursor: pointer; }
.sg-notes-preview-toggle:hover { border-color: var(--accent); color: var(--accent); }
.sg-notes-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-dim); text-align: center; padding: 24px; }
.sg-notes-empty p { margin: 0; }
.sg-card-top { display: flex; align-items: center; gap: 6px; }
.sg-card-type { font-size: 10px; padding: 1px 7px; border-radius: 5px; background: rgba(43,32,21,0.07); color: var(--text-muted); }
.sg-type-seed { background: rgba(196,132,40,0.16); color: #a06a14; }
.sg-type-character { background: rgba(76,128,76,0.16); color: #3f6b3f; }
.sg-type-event { background: rgba(162,62,46,0.14); color: var(--primary); }
.sg-type-mainline { background: rgba(120,86,170,0.18); color: #6a4aa0; }
.sg-type-package { background: rgba(162,62,46,0.16); color: var(--primary); }
.sg-card-branches { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: rgba(120,86,170,0.14); color: #6a4aa0; }
.sg-card-pref { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: rgba(76,128,76,0.16); color: #3f6b3f; margin-left: auto; }
.sg-card-pruned { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: rgba(43,32,21,0.08); color: var(--text-dim); margin-left: auto; }
.sg-card-deprecated { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: rgba(180,20,20,0.1); color: #b41414; margin-left: auto; }
.sg-btn-deprecate { color: #b41414; border-color: rgba(180,20,20,0.3); }
.sg-card-title { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--text-main); line-height: 1.4; }
.sg-card-line { font-size: 12px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card-q { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.sg-card-foot { font-size: 10px; color: var(--text-dim); }

.seedling-drawer { width: 380px; flex: 0 0 380px; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-card); }
.seedling-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.seedling-drawer-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }
.seedling-drawer-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.sd-tab { padding: 5px 12px; font-size: 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; }
.sd-tab.active { background: rgba(76,128,76,0.12); color: #3f6b3f; font-weight: 600; }
.seedling-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.sg-kv-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.sg-action-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
.sg-action-bar .btn { flex: 1 1 105px; }
.sg-kv { margin-bottom: 9px; }
.sg-kv-k { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.sg-kv-v { font-size: 13px; color: var(--text-main); line-height: 1.6; }
.sg-ver { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.sg-ver-head { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-main); }
.sg-ver-author { color: var(--text-muted); font-weight: 400; }
.sg-ver-rat { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.sg-diff { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; border-radius: 6px; overflow: hidden; }
.sg-diff-add { background: rgba(76,128,76,0.12); color: #2f5a2f; padding: 2px 8px; }
.sg-diff-del { background: rgba(162,62,46,0.1); color: #8a3a2a; padding: 2px 8px; }
.sg-src-path { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 6px; word-break: break-all; }
.sg-src { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-main); background: rgba(43,32,21,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 12px; white-space: pre-wrap; word-break: break-word; }
.sg-tree-item { font-family: var(--font-mono); font-size: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--text-main); }
.sg-tree-item:hover { background: rgba(76,128,76,0.1); }
.sg-tree-bytes { color: var(--text-dim); font-size: 10px; }

@media (max-width: 860px) {
  .seedling-shell { flex-direction: column; }
  .seedling-side-toggle.mobile-filter-btn { display: inline-flex !important; align-self: flex-start; margin-bottom: 8px; }
  /* .seedling-side is relocated by JS into the 「苗圃/切换」 bottom sheet on mobile. */
  .filter-sheet .seedling-side {
    width: 100% !important;
    flex: none !important;
    max-height: none !important;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .filter-sheet .seedling-side .seedling-side-head { display: none; }
  .filter-sheet .seedling-lab-list { max-height: 36dvh; overflow-y: auto; }
  .filter-sheet .seedling-type-filter { display: flex; flex-wrap: wrap; gap: 6px; }
  /* Stage rail = the main toggle: a single horizontally-scrollable row. */
  .seedling-stage-rail {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .seedling-stage-rail::-webkit-scrollbar { display: none; }
  .seedling-stage-btn, .seedling-stage-rail > * { flex: 0 0 auto; }
  .seedling-main { padding: 10px; min-width: 0; }
  .seedling-wall-head { flex-wrap: wrap; gap: 6px; row-gap: 6px; }
  .seedling-wall-head .btn, .seedling-wall-head .sg-target-chip { margin-left: 0 !important; }
  .sg-op-strip { margin-top: 0; padding: 8px 10px; }
  .sg-log-main { align-items: flex-start; flex-direction: column; gap: 3px; }
  /* Card detail opens as a fixed bottom sheet overlaying the wall, not a
     squished inline panel that gets pushed down by the cards above it. */
  .seedling-drawer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    flex: none;
    max-height: 85dvh;
    z-index: 9500;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(74,52,28,0.32);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .seedling-drawer-close { min-width: 40px; min-height: 40px; }
  .seedling-wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}
.sg-form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sg-form-hint { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.sg-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: min(68vh, 620px);
  padding: 16px 18px;
}
.sg-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.sg-modal-body .form-group { margin: 0; }
.sg-modal-body input,
.sg-modal-body textarea,
.sg-modal-body select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.sg-modal-body textarea {
  min-height: 128px;
  resize: vertical;
}
.sg-modal-body input:focus,
.sg-modal-body textarea:focus,
.sg-modal-body select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(162,62,46,0.12);
}

/* P2 育苗 — grow button + 根系 (derivation) chips */
.sg-grow-bar { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.sg-grow-btn { width: 100%; }
.sg-grow-hint { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.sg-root { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; font-size: 12px; color: var(--text-muted); }
.sg-root-chip { background: rgba(120, 180, 120, 0.14); border: 1px solid rgba(120, 180, 120, 0.35); color: var(--text); border-radius: 10px; padding: 2px 8px; font-size: 11px; }

/* 派生关系导航：面包屑 + 双向链接 + 聚焦 */
.sg-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 4px 4px; }
.sg-crumb { font-size: 12.5px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-crumb:hover { border-color: var(--border-active); color: var(--text-main); }
.sg-crumb.cur { background: var(--secondary); color: #fff; border-color: var(--secondary); cursor: default; }
.sg-crumb-sep { color: var(--text-dim); font-size: 12px; }
.sg-card-derive { font-size: 10px; color: var(--secondary); border: 1px solid var(--secondary); border-radius: 7px; padding: 0 5px; }
.sg-rel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.sg-rel-k { font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.sg-rel-down .sg-rel-k { color: var(--secondary); }
.sg-rel-up .sg-rel-k { color: var(--primary); }
.sg-rel-link { font-size: 12px; padding: 2px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-input); color: var(--primary); cursor: pointer; text-align: left; line-height: 1.5; }
.sg-rel-link:hover { border-color: var(--primary); background: rgba(162,62,46,0.08); }
.sg-focus-bar { margin: 0 0 14px; }
.sg-focus-bar .btn { width: 100%; }

/* P4 主线候选编排台 */
.sg-mainline-modal { max-width: 1040px; width: 96%; height: min(88vh, 760px); max-height: calc(100vh - 36px); display: flex; flex-direction: column; overflow: hidden; }
.sg-mainline-modal .modal-header { flex-shrink: 0; }
.sgml-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sgml-picker { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-right: 1px solid var(--border); background: var(--bg-app); }
.sgml-editor { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.sgml-tools { display: grid; grid-template-columns: 1fr 128px; gap: 8px; }
.sgml-card-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.sgml-pick-card { border: 1px solid var(--border); border-radius: 9px; padding: 10px; background: var(--bg-card); }
.sgml-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.sgml-pick-title { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.35; }
.sgml-pick-line { font-size: 11px; color: var(--text-muted); line-height: 1.45; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgml-spine-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.sgml-spine { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-app); padding: 10px; }
.sgml-node { border: 1px solid var(--border); border-radius: 9px; padding: 9px; background: var(--bg-card); display: flex; flex-direction: column; gap: 7px; }
.sgml-node-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sgml-order { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: rgba(120,86,170,0.14); color: #6a4aa0; font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.sgml-node-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgml-mini { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1; }
.sgml-mini:hover { border-color: var(--border-active); color: var(--text-main); }
.sgml-node-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.sgml-role { min-width: 0; }
.sgml-note { resize: vertical; }
.sgml-unresolved { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--text-muted); }
.sgml-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.sgml-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
@media (max-width: 820px) {
  .sg-mainline-modal { width: 98%; height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  .sgml-body { grid-template-columns: 1fr; }
  .sgml-picker { border-right: none; border-bottom: 1px solid var(--border); max-height: 34vh; }
  .sgml-footer { align-items: stretch; flex-direction: column; }
  .sgml-footer-actions { justify-content: stretch; }
  .sgml-footer-actions .btn { flex: 1 1 auto; }
}

/* P4.5 红娘 · 嫁接建议 / 一键衍生 modal */
.sgsg-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.sgsg-config { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; }
.sgsg-sel { width: auto; min-width: 92px; padding: 6px 8px; }
.sgsg-config .sg-form-label { margin-left: 4px; }
.sgsg-results { flex: 1 1 auto; min-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.sgsg-combo { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-card); cursor: pointer; transition: border-color .12s, background .12s; }
.sgsg-combo:hover { border-color: var(--border-active); }
.sgsg-combo.sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--bg-card)); }
.sgsg-combo-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sgsg-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-active); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }
.sgsg-combo.sel .sgsg-check { background: var(--primary); border-color: var(--primary); }
.sgsg-fert { color: var(--primary); font-size: 13px; letter-spacing: 1px; }
.sgsg-recipe { font-size: 11px; color: var(--text-muted); background: var(--bg-input); border-radius: 6px; padding: 2px 8px; }
.sgsg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sgsg-chip { font-size: 12px; padding: 3px 9px; border-radius: 14px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); }
.sgsg-reason { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.sgsg-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .sgsg-config { gap: 6px; } .sgsg-footer { flex-direction: column; align-items: stretch; } }

/* P4.6 数量预估（标尺） */
.sg-target-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.sg-target-chip:hover { border-color: var(--accent, #8a6d3b); color: var(--text); }
.sgest-result { padding: 6px 2px; }
.sgest-ring-row { display: flex; align-items: center; gap: 14px; padding: 8px 4px 14px; }
.sgest-ring { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text); background: conic-gradient(var(--accent, #8a6d3b) calc(var(--pct) * 1%), var(--border) 0); }
.sgest-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-card, #fff); }
.sgest-ring { z-index: 0; }
.sgest-ring > span { position: relative; z-index: 1; }
.sgest-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sgest-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.sgest-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-light, rgba(0,0,0,.06)); }
.sgest-table .sgest-cur { font-weight: 700; color: var(--text); }
.sgest-table .sgest-tgt { color: var(--text-muted); }
.sgest-table .sgest-ml td { border-top: 1px solid var(--border); }
.sgest-more { color: var(--accent, #8a6d3b); font-size: 12px; }
.sgest-ok { color: var(--text-dim); font-size: 12px; }

/* P5.1 深度盘点（定性缺口）+ 环境光 */
#sg-estimate-modal .sgsg-body { overflow-y: auto; }
.sgsv-divider { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 2px 4px; padding-top: 12px; border-top: 1px dashed var(--border); }
.sgsv-divider .sg-form-hint { flex: 1 1 200px; min-width: 0; }
.sgsv-result { padding: 4px 2px; }
.sgsv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.sgsv-head strong { font-size: 14px; color: var(--text-main); }
.sgsv-op { border: 1px solid var(--border); border-left: 3px solid color-mix(in srgb, var(--accent, #8a6d3b) 55%, transparent); border-radius: 10px; padding: 10px 13px; margin-bottom: 10px; background: color-mix(in srgb, var(--accent, #8a6d3b) 4%, var(--bg-card)); }
.sgsv-op-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.sgsv-op-dim { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.sgsv-op-sev { font-size: 11px; color: color-mix(in srgb, var(--accent, #8a6d3b) 70%, var(--text-dim)); letter-spacing: 1px; }
.sgsv-op-obs { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 5px; }
.sgsv-op-opp { font-size: 13px; color: var(--text-main); line-height: 1.65; }
.sgsv-acts { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.sgsg-focus-tag { font-size: 12px; font-weight: 400; color: var(--accent, #8a6d3b); margin-left: 8px; }

/* ambient-light gap badge on the stage rail — low saturation, never red */
.sg-rail-hint { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 15px; color: #fff; background: color-mix(in srgb, var(--accent, #8a6d3b) 62%, transparent); vertical-align: middle; }
.seedling-stage-rail.sg-hints-off .sg-rail-hint { display: none; }
.sg-hints-toggle { font-size: 13px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-input); cursor: pointer; opacity: .4; filter: grayscale(1); transition: opacity .12s, filter .12s; }
.sg-hints-toggle.on { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--accent, #8a6d3b) 45%, var(--border)); }
.sg-hints-toggle:hover { border-color: var(--accent, #8a6d3b); }

/* P2.5 灵感矿挖矿 modal */
.sgm-results { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg-app); }
.sgm-group-head { font-size: 13px; font-weight: 700; color: var(--text-main); margin: 6px 2px 8px; }
.sgm-group-head span { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.sgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin-bottom: 14px; }
.sgm-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; cursor: pointer; background: var(--bg-card); transition: border-color .12s, box-shadow .12s; position: relative; }
.sgm-card:hover { border-color: var(--border-active); }
.sgm-card.sel { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); }
.sgm-card-top { display: flex; align-items: center; justify-content: space-between; }
.sgm-check { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); color: transparent; font-size: 11px; text-align: center; line-height: 17px; }
.sgm-card.sel .sgm-check { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.sgm-card-title { font-size: 13px; font-weight: 700; color: var(--text-main); margin: 6px 0 4px; line-height: 1.4; }
.sgm-card-mech { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sgm-card-src { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }

/* ===================== 灵感矿 / Inspiration Mine ===================== */
.mine2 { flex: 1; overflow-y: auto; padding: 0 22px 40px; }
/* top bar — identity + global stat + perspective toggle (sticky) */
.mine2-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0 12px; margin-bottom: 6px; background: var(--bg-app); border-bottom: 1px solid var(--border); }
.mine2-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mine2-logo { font-size: 18px; font-weight: 800; letter-spacing: .5px; color: var(--text-main); }
.mine2-stat { font-size: 12px; color: var(--text-muted); }
.mine2-views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.mine2-view { font-size: 13px; font-weight: 600; padding: 6px 16px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.mine2-view.active { background: var(--accent); color: #fff; }
.mine-root-tabs { display: inline-flex; align-items: center; gap: 2px; }
.mine-root-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 8px 6px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.mine-root-tab:hover { color: var(--text-main); }
.mine-root-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
#mine-moves-root { padding: 8px 0 18px; }
.moves-library-intro { max-width: 760px; margin: 8px 0 14px; }
.moves-library-intro h3 { margin: 0 0 4px; font-size: 17px; color: var(--text-main); }
.moves-library-intro p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.moves-library-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 12px; font-size: 12px; color: var(--text-muted); }
.moves-library-stats strong { color: var(--text-main); }
.moves-library-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.moves-library-tab { border: 0; border-bottom: 2px solid transparent; padding: 6px 9px 5px; background: transparent; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.moves-library-tab:hover { color: var(--text-main); }
.moves-library-tab.active { color: var(--secondary); border-bottom-color: var(--secondary); font-weight: 700; }
.moves-library-tools { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.moves-library-search { flex: 1; min-width: 180px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); padding: 7px 2px; background: transparent; color: var(--text-main); font-size: 13px; }
.moves-library-search:focus { outline: none; border-bottom-color: var(--border-active); }
.moves-library-count { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); }
.moves-library-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); column-gap: 22px; align-content: start; }
.moves-library-card { padding: 12px 0; border-bottom: 1px solid var(--border); }
.moves-library-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.moves-library-card h3 { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-main); }
.moves-library-card-source { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; white-space: nowrap; }
.moves-library-card p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.moves-library-card small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; color: var(--text-dim); }
.moves-library-row { margin-top: 5px; }
.moves-library-row b { display: block; color: var(--text-dim); font-size: 10px; font-weight: 600; }
.moves-library-row p { margin-top: 1px; }
.moves-library-effect { margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--secondary); }
.moves-library-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.moves-library-card-tags span { color: var(--text-dim); font-size: 10px; }
.moves-library-card-tags span:not(:last-child)::after { content: '·'; margin-left: 5px; color: var(--border-active); }
/* shared tools row: search + filter */
.mine2-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.mine2-search { flex: 1; min-width: 220px; }
.mine2-search input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text-main); }
.mine2-search input:focus { outline: none; border-color: var(--border-active); }
.mine2-sentinel { height: 1px; }
.mine2-more { text-align: center; color: var(--text-dim); font-size: 12px; padding: 18px 0 4px; }
/* novel grid (View B) */
.mine2-novelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 10px; }
.mine2-novel { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .1s; }
.mine2-novel.is-melted { cursor: pointer; }
.mine2-novel.is-melted:hover { border-color: var(--border-active); transform: translateY(-1px); }
.mine2-novel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mine2-novel-title { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text-main); }
.mine2-badge { font-size: 11px; white-space: nowrap; color: var(--secondary); border: 1px solid var(--secondary); border-radius: 8px; padding: 1px 7px; }
.mine2-badge.dim { color: var(--text-dim); border-color: var(--border); }
.mine2-novel-meta { font-size: 11px; color: var(--text-muted); }
.mine2-novel-hook { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.mine2-novel-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.mine2-tchip { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; }
.mine2-novel-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.mine2-novel-actions .btn { flex: 1; }
/* drill header */
.mine2-drill-head { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.mine2-back { font-size: 13px; background: transparent; border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; color: var(--text-muted); cursor: pointer; }
.mine2-back:hover { color: var(--text-main); border-color: var(--border-active); }
.mine2-drill-title { font-size: 16px; font-weight: 700; color: var(--text-main); }
/* provenance block in drawer */
.mine2-prov { margin-top: 16px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-card); }
.mine2-prov-k { font-size: 11px; color: var(--text-dim); }
.mine2-prov-v { font-size: 14px; font-weight: 600; margin: 3px 0 10px; }
.mine-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.mine-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.mine-chip.active { background: var(--accent, #6aa3ff); color: #fff; border-color: transparent; }
.mine-facet-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.mine-facet-label { font-size: 11px; color: var(--text-dim); }
.mine-facet { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.mine-facet.active { background: rgba(79,111,93,0.16); border-color: var(--secondary); color: var(--text-main); }
.mine-facet em { color: var(--text-dim); font-style: normal; }
.mine-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; align-content: start; padding-top: 4px; }
.mine-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--bg-card); transition: border-color .15s, transform .1s; }
.mine-card:hover { border-color: var(--border-active); transform: translateY(-1px); }
.mine-card-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
.mine-card-type { background: rgba(162,62,46,0.12); border-radius: 8px; padding: 1px 8px; color: var(--primary); }
.mine-card-title { font-size: 14px; font-weight: 700; margin: 6px 0; line-height: 1.4; color: var(--text-main); }
.mine-card-mech { font-size: 12px; color: var(--text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mine-card-facets { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.mine-card-facets span { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; }
.mine-card-src { font-size: 11px; color: var(--text-dim); }
.mine-card-fert { color: var(--secondary); }

/* ─── 管线首页：商业方向盘 ─────────────────────────────── */
.pipeline-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px 30px 60px;
  color: var(--text-main);
  background-color: var(--bg-app);
}

.pipeline-page.idealib-mode > :not(#idealib-view-wall):not(#idealib-view-detail) {
  display: none !important;
}

/* ─── 全球策略级联网格 (Global Strategy Cascading Grid) ───────────────── */
.matrix-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  margin-top: 16px;
  box-shadow: 0 4px 24px rgba(58, 40, 20, 0.05);
}

.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  background: var(--bg-card);
  min-width: 1000px; /* Keep minimum width to force horizontal scroll on mobile */
}

.pipe-research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.pipe-research-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 14px 16px;
  min-height: 124px;
}

.pipe-research-card span {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.pipe-research-card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--text-main);
  line-height: 1.35;
}

.pipe-research-card p {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.pipeline-table th,
.pipeline-table td {
  padding: 16px 20px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.pipeline-table th {
  background: var(--bg-sidebar);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 2px solid var(--border);
  padding: 14px 20px;
}

.region-cell {
  background: rgba(227, 214, 188, 0.35);
  font-family: var(--font-serif);
  width: 10%;
  vertical-align: top !important;
}

.region-cell strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-main);
}

.region-cell .cell-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

.direction-cell {
  background: rgba(251, 246, 234, 0.4);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main);
  width: 15%;
  vertical-align: middle;
}

.genre-cell {
  font-family: var(--font-sans);
  color: var(--text-muted);
  width: 30%;
  vertical-align: top;
}

.genre-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tag-trend {
  background: rgba(162, 62, 46, 0.08);
  color: var(--primary);
}

.tag-niche {
  background: rgba(79, 111, 93, 0.08);
  color: var(--secondary);
}

.tag-option {
  background: rgba(107, 91, 71, 0.1);
  color: var(--text-muted);
}

.genre-title {
  margin: 0 0 6px 0 !important;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.genre-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.project-cell {
  background: var(--bg-elevated);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  width: 45%;
  vertical-align: middle;
}

.project-cell:hover {
  background: rgba(162, 62, 46, 0.02);
}

.project-cell strong {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--text-main);
}

.project-cell p {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.badge {
  font-family: var(--font-numeric);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.badge-s {
  background: var(--primary);
  color: #FBF6EA;
}

.badge-a {
  background: var(--secondary);
  color: #FBF6EA;
}

.badge-b {
  background: var(--text-dim);
  color: #FBF6EA;
}

.badge-option {
  background: var(--text-muted);
  color: #FBF6EA;
}

.badge-new {
  background: var(--success);
  color: #FBF6EA;
  font-size: 8px;
}

/* ─── 学术参考引证 (Scientific References) ───────────────────── */
.paper-references {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 32px;
  margin-top: 16px;
  box-shadow: 0 2px 10px rgba(58, 40, 20, 0.02);
}

.ref-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ref-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
}

.ref-item:last-child {
  margin-bottom: 0;
}

.ref-num {
  font-family: var(--font-mono);
  color: var(--primary);
  font-weight: bold;
  flex-shrink: 0;
  width: 28px;
}

.ref-citation {
  flex: 1;
}

.ref-citation strong {
  color: var(--text-main);
  font-weight: 600;
}

.ref-citation em {
  font-family: var(--font-serif);
  color: var(--text-main);
  font-style: italic;
}

.ref-link {
  display: block;
  font-family: var(--font-mono);
  color: var(--secondary);
  text-decoration: none;
  word-break: break-all;
  margin-top: 4px;
  font-size: 11px;
  transition: color 0.15s ease;
}

.ref-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Responsiveness adjustments for matrix */
@media (max-width: 840px) {
  .pipeline-page { padding: 16px 16px 40px; }
  .pipe-research-grid { grid-template-columns: 1fr; }
  .pipe-research-card { min-height: 0; }
}

/* ─── 点子库：详情页（drill-down page, no modal） ──────────── */
.idealib-detail-meta { flex: 1; font-size: 12px; color: var(--text-dim); }
.idealib-detail-actions { display: flex; gap: 8px; }
.idealib-detail-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1180px;
  height: calc(100vh - 150px);
  margin: 0 auto;
  padding-bottom: 24px;
}
.idealib-detail-side {
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}
.idealib-detail-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idealib-detail-main label { font-size: 13px; color: var(--text-dim); }
.idealib-outline-input {
  flex: 1;
  min-height: 260px;
  resize: none;
  line-height: 1.7;
  font-size: 14px;
}
@media (max-width: 900px) {
  .idealib-detail-body {
    grid-template-columns: 1fr;
    height: auto;
  }
  .idealib-detail-side { height: auto; overflow-y: visible; }
  .idealib-detail-main { height: auto; }
  .idealib-outline-input { min-height: 320px; resize: vertical; }
}

/* component detail modal */
.minemodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.minemodal-backdrop { position: absolute; inset: 0; background: rgba(42,32,24,0.42); backdrop-filter: blur(2px); }
.minemodal-card { position: relative; width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 64px rgba(42,32,24,0.28); overflow: hidden; }
.minemodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.minemodal-head-l { min-width: 0; }
.minemodal-type { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(162,62,46,0.12); border-radius: 8px; padding: 2px 9px; margin-bottom: 8px; }
.minemodal-title { font-family: var(--font-serif); font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--text-main); margin: 0; word-break: break-word; }
.minemodal-close { flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-muted); font-size: 15px; cursor: pointer; line-height: 1; }
.minemodal-close:hover { color: var(--text-main); border-color: var(--border-active); }
.minemodal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.minemodal-meters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; margin-bottom: 18px; }
.minemodal-meter { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.minemodal-meter-l { color: var(--text-muted); width: 30px; flex-shrink: 0; }
.minemodal-meter-bar { flex: 1; height: 6px; background: rgba(42,32,24,0.08); border-radius: 4px; overflow: hidden; }
.minemodal-meter-bar i { display: block; height: 100%; background: var(--secondary); border-radius: 4px; }
.minemodal-meter-n { color: var(--text-muted); width: 12px; text-align: right; }
.minemodal-kv { margin-bottom: 15px; }
.minemodal-k { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--primary); margin-bottom: 4px; }
.minemodal-v { font-size: 14px; line-height: 1.7; color: var(--text-main); }
.minemodal-facets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.minemodal-facets span { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 2px 9px; }
.minemodal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg-input); }
.minemodal-src { font-size: 12px; color: var(--text-muted); min-width: 0; }
.minemodal-foot-btns { display: flex; gap: 8px; flex-shrink: 0; }
.minemodal-foot-btns .btn { text-decoration: none; }
@media (max-width: 600px) {
  /* Bottom sheet, consistent with the rest of the app's modals. */
  .minemodal { align-items: flex-end; padding: 0; }
  .minemodal-card {
    width: 100%; max-width: 100%;
    max-height: min(92dvh, var(--app-height));
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .minemodal-head { padding: 18px 16px 12px; }
  .minemodal-title { font-size: 18px; }
  .minemodal-body { padding: 16px; }
  .minemodal-meters { grid-template-columns: 1fr; }
  .minemodal-foot { flex-direction: column; align-items: stretch; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .minemodal-foot-btns { justify-content: stretch; }
  .minemodal-foot-btns .btn { flex: 1; text-align: center; min-height: 44px; }
}
.mine-empty { grid-column: 1 / -1; color: var(--text-dim); font-size: 13px; padding: 40px 0; text-align: center; line-height: 1.7; }
.mine-quality { font-size: 12px; color: var(--secondary); margin: 6px 0 12px; }

/* Custom Responsive Adaptations for Story Garden / Seedling Lab */

/* Horizontal Menu Row Alignment */
.seedling-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
  min-width: 0;
}
.seedling-menu-row .seedling-stage-rail {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}
.seedling-menu-row .seedling-side-toggle {
  margin-bottom: 0 !important;
  align-self: center !important;
}

/* Universally make the tabs scrollable horizontally without wrapping */
.seedling-stage-rail {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.seedling-stage-rail::-webkit-scrollbar {
  display: none;
}
.seedling-stage-rail .sg-stage {
  flex-shrink: 0;
}

/* Sidebar Toggle Desktop Styling & Transitions */
@media (min-width: 861px) {
  .seedling-side-toggle {
    display: inline-flex !important;
    align-self: center;
  }
  .seedling-side {
    transition: width 0.25s ease, flex-basis 0.25s ease, padding 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
    opacity: 1;
  }
  .seedling-shell.sidebar-collapsed .seedling-side {
    width: 68px !important;
    flex: 0 0 68px !important;
    padding: 16px 8px !important;
    border-right: 1px solid var(--border) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
  }
  .seedling-shell.sidebar-collapsed .side-head-txt,
  .seedling-shell.sidebar-collapsed .btn-side-txt,
  .seedling-shell.sidebar-collapsed .seedling-side-sub {
    display: none !important;
  }
  .seedling-shell.sidebar-collapsed .seedling-side-head {
    text-align: center;
    font-size: 20px;
  }
  .seedling-shell.sidebar-collapsed #seedling-new-lab,
  .seedling-shell.sidebar-collapsed #seedling-view-tree {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    font-size: 16px !important;
  }
  .seedling-shell.sidebar-collapsed .seedling-lab-list {
    gap: 8px !important;
  }
  .seedling-shell.sidebar-collapsed .seedling-lab-item {
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .seedling-shell.sidebar-collapsed .sg-lab-name {
    display: inline-block !important;
    max-width: 20px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    text-align: center;
    line-height: 1;
  }
  .seedling-shell.sidebar-collapsed .sg-lab-demo {
    display: none !important;
  }
  .seedling-shell.sidebar-collapsed .seedling-type-filter {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .seedling-shell.sidebar-collapsed .sg-typechip {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    margin: 0 auto !important;
  }
}

/* Prevent wrapping on title and truncate with ellipsis if too narrow */
.seedling-wall-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
  min-width: 0;
}
.seedling-wall-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.seedling-wall-head .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive button text hiding to keep buttons compact when cramped */
@media (max-width: 1150px) {
  .seedling-wall-head .btn-txt {
    display: none;
  }
  .seedling-wall-head .btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.seedling-shell.drawer-open .seedling-wall-head .btn-txt {
  display: none;
}
.seedling-shell.drawer-open .seedling-wall-head .btn {
  padding-left: 10px;
  padding-right: 10px;
}

/* Collapsible sidebars transitions & collapsed styles for Jieshuo, Screenplay, Broadcast and Story Library tabs */
@media (min-width: 861px) {
  .layout-aside, .books-sidebar, .books-landing-side {
    transition: width 0.25s ease, flex-basis 0.25s ease, padding 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
  }

  /* Collapsed layout-aside (.layout-aside inside any .sidebar-collapsed shell) */
  .sidebar-collapsed .layout-aside {
    width: 68px !important;
    flex: 0 0 68px !important;
    overflow-x: hidden !important;
  }

  /* Reset inner workspace widths so they shrink with parent */
  .sidebar-collapsed .layout-aside .ws-sidebar,
  .sidebar-collapsed .layout-aside .nws-sidebar,
  .sidebar-collapsed .layout-aside #novel-sidebar-general,
  .sidebar-collapsed .layout-aside #novel-sidebar-workspace,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-general,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-original,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-adapt {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    box-sizing: border-box !important;
  }

  /* Hide side headers, labels, tags, details, etc. */
  .sidebar-collapsed .layout-aside .side-head-txt,
  .sidebar-collapsed .layout-aside .btn-side-txt,
  .books-landing.sidebar-collapsed .btn-side-txt,
  .sidebar-collapsed .layout-aside .side-desc-txt,
  .sidebar-collapsed .layout-aside .nws-nav-label,
  .sidebar-collapsed .layout-aside .nws-project-slug,
  .sidebar-collapsed .layout-aside .nws-project-source,
  .sidebar-collapsed .layout-aside .nws-divider,
  .sidebar-collapsed .layout-aside .ws-project-tags,
  .sidebar-collapsed .layout-aside .nws-ep-title-text,
  .sidebar-collapsed .layout-aside .card-header h2,
  .sidebar-collapsed .layout-aside #story-ideas-search-wrap,
  .sidebar-collapsed .layout-aside .list-item p,
  .sidebar-collapsed .layout-aside .list-item-meta,
  .sidebar-collapsed .layout-aside .empty-state,
  .sidebar-collapsed .layout-aside .loading-state {
    display: none !important;
  }

  /* Style Brand Titles */
  .sidebar-collapsed .layout-aside .sidebar-brand h2 {
    font-size: 20px !important;
    justify-content: center;
    margin: 0 !important;
  }

  /* Style Sidebar buttons (block style) */
  .sidebar-collapsed .layout-aside .btn-block {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
    font-size: 16px !important;
  }

  /* Truncate project titles dynamically to first character */
  .sidebar-collapsed .layout-aside .nws-project-title,
  .sidebar-collapsed .layout-aside .ws-project-title {
    max-width: 24px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    text-align: center;
  }

  /* Style Back Buttons */
  .sidebar-collapsed .layout-aside .nws-back-btn,
  .sidebar-collapsed .layout-aside .back-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
  }

  /* Style menu items, episode buttons and document tabs */
  .sidebar-collapsed .layout-aside .nws-menu-item,
  .sidebar-collapsed .layout-aside .nws-ep-btn,
  .sidebar-collapsed .layout-aside .doc-tab {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 4px auto !important;
  }

  /* Style workshop dialog lists & list items (Story Library) */
  .sidebar-collapsed .layout-aside .list-item {
    padding: 8px 4px !important;
    text-align: center !important;
  }
  .sidebar-collapsed .layout-aside .list-item h4 {
    max-width: 24px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    margin: 0 auto !important;
    font-size: 14px !important;
  }
  .sidebar-collapsed .layout-aside .card-header {
    justify-content: center !important;
    padding: 10px 4px !important;
  }
  .sidebar-collapsed .layout-aside #btn-new-idea {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
  }

  /* Adjust paddings for general states */
  .sidebar-collapsed .layout-aside #novel-sidebar-general,
  .sidebar-collapsed .layout-aside #novel-sidebar-workspace,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-general,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-original,
  .sidebar-collapsed .layout-aside #screenplay-sidebar-adapt,
  .sidebar-collapsed .layout-aside#chat-session-drawer {
    padding: 16px 8px !important;
    align-items: center;
  }
  .sidebar-collapsed .layout-aside .ws-sidebar-title-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .sidebar-collapsed .layout-aside .ws-sidebar-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .sidebar-collapsed .layout-aside .ws-sidebar-actions .btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .sidebar-collapsed .layout-aside .doc-tabs {
    gap: 6px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sidebar-collapsed .layout-aside .doc-tab-group-label {
    border-top: 1px solid var(--border);
    margin: 8px 4px !important;
    height: 1px;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden;
    display: block;
    width: 100%;
  }
  .sidebar-collapsed .layout-aside .doc-tab .ep-num-txt {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin: 0 !important;
  }

  /* Collapsed books-sidebar (Broadcast/Book reader) */
  .books-library.sidebar-collapsed .books-sidebar {
    width: 68px !important;
    flex: 0 0 68px !important;
    padding: 16px 8px !important;
    overflow-x: hidden !important;
  }
  .books-library.sidebar-collapsed .books-sidebar .btn-side-txt,
  .books-library.sidebar-collapsed .books-sidebar .books-detail-title {
    display: none !important;
  }
  .books-library.sidebar-collapsed .books-sidebar .books-reader-back {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
  }
  .books-library.sidebar-collapsed .books-sidebar .books-detail-menu {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .books-library.sidebar-collapsed .books-sidebar .books-menu-item {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
  }
  .books-library.sidebar-collapsed .books-sidebar .books-chapter-item {
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding: 8px 4px !important;
    text-align: center;
  }

  /* Collapsed books-landing-side (Novels/Book catalog page) */
  .books-landing.sidebar-collapsed .books-landing-side {
    width: 68px !important;
    flex: 0 0 68px !important;
    padding: 16px 8px !important;
    overflow: hidden !important;
  }
  .books-landing.sidebar-collapsed .books-landing-side .books-cat-list {
    display: none !important;
  }
  .books-landing.sidebar-collapsed .books-landing-side .books-channel-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
.books-landing.sidebar-collapsed .books-landing-side .books-channel-tab {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    margin: 4px auto !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* ============================================================
   Mobile responsive remediation — 2026-06-20
   Keep desktop layouts intact; replace compressed PC controls on phones.
   ============================================================ */
@media (max-width: 599px) {
  body.mobile-keyboard-open .top-nav-tabs {
    transform: translateY(110%);
    pointer-events: none;
  }

  body.mobile-keyboard-open .app-container {
    padding-bottom: 0;
  }

  body.mobile-keyboard-open .chat-input-area {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .btn-sm,
  .books-card-analyze,
  .books-card-import,
  .books-scope-btn,
  .books-channel-tab,
  .sg-stage,
  .sg-subtab,
  .sg-typechip,
  .mine-chip,
  .mine-facet,
  .mine2-view,
  .mine2-back,
  .mine2-novel-actions .btn {
    min-height: 36px;
    touch-action: manipulation;
  }

  /* 小说库：频道是主分段控件，工具栏按移动端重新排布。 */
  .books-landing-side {
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .books-channel-tabs {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(43,32,21,0.035);
    box-sizing: border-box;
  }

  .books-channel-tab {
    min-width: 0;
    border: 0;
    border-radius: 9px;
    padding: 0 4px;
    font-size: 13px;
  }

  .books-landing-main {
    padding: 12px 12px 0 !important;
    gap: 10px;
  }

  .books-landing-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px;
    gap: 8px !important;
    justify-content: stretch;
    align-items: stretch;
  }

  .books-landing-search {
    grid-column: 1 / -1;
    max-width: none;
    height: 42px;
    font-size: 16px;
  }

  #books-filter-btn,
  #btn-books-batch-scan,
  #btn-books-upload {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  #btn-books-upload {
    padding-inline: 8px;
  }

  .filter-sec .books-cat-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-x: hidden;
  }

  .filter-sec .books-cat-item {
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    padding: 8px 9px;
  }

  .filter-sec .books-cat-name {
    min-width: 0;
  }

  .books-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding-right: 0;
  }

  .books-card {
    padding: 14px;
  }

  .books-card-title {
    min-height: auto;
    font-size: 15px;
  }

  .books-card-foot {
    align-items: stretch;
  }

  .books-card-analyze {
    min-width: 108px;
    min-height: 36px;
    font-size: 12px;
    padding: 0 10px;
  }

  .books-library {
    flex-direction: column;
  }

  .books-sidebar {
    height: auto !important;
    flex: 0 0 auto !important;
    max-height: 36dvh;
    padding: 12px !important;
    overflow-y: auto;
  }

  .books-detail-menu {
    flex-direction: row;
    gap: 8px;
  }

  .books-menu-item {
    flex: 1;
    text-align: center;
    min-height: 38px;
  }

  .books-detail-main {
    min-height: 0;
  }

  .books-scan-page {
    padding: 16px 14px 80px;
  }

  .books-scan-hero h2 {
    font-size: 18px;
    line-height: 1.35;
  }

  /* 故事苗圃：顶部重排，选卡操作下沉成清晰主操作。 */
  .seedling-main {
    padding: 8px 10px 0 !important;
  }

  .seedling-menu-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }

  .seedling-side-toggle {
    min-height: 40px;
    padding: 0 10px;
  }

  .seedling-stage-rail {
    position: relative;
    padding: 0 14px 4px 0;
    scroll-padding-inline: 8px;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

  .sg-stage {
    min-height: 40px;
    padding: 0 13px;
    font-size: 14px;
    border-radius: 11px;
  }

  .seedling-wall-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .seedling-wall-title {
    flex: 1 1 100%;
    white-space: normal;
    font-size: 19px;
    line-height: 1.25;
  }

  .seedling-wall-stat {
    margin-left: 0;
    flex: 1 1 auto;
  }

  .seedling-wall-head .btn,
  .seedling-wall-head .sg-target-chip {
    min-height: 38px;
    border-radius: 11px;
  }

  .seedling-wall-head .btn:not(#seedling-graft-selected) {
    min-width: 40px;
    padding-inline: 11px;
  }

  #seedling-graft-selected {
    order: 20;
    flex: 1 1 100%;
    min-height: 44px;
    font-size: 15px;
  }

  #seedling-graft-selected .btn-txt {
    display: inline !important;
  }

  .seedling-wall {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 84px;
  }

  .sg-card {
    padding: 14px 52px 14px 14px;
  }

  .sg-card-select {
    width: 38px;
    height: 38px;
    right: 10px;
    top: 10px;
    border-radius: 13px;
    line-height: 36px;
    font-size: 18px;
  }

  .sg-card-title {
    font-size: 16px;
  }

  .sg-card-line {
    font-size: 13px;
  }

  .sg-dec {
    overflow: visible;
  }

  .seedling-wall.sg-wall-decision,
  .seedling-wall.sg-wall-timeline,
  .seedling-wall.sg-wall-notes {
    display: block;
    overflow-y: auto;
    padding-bottom: 84px;
  }

  .sg-notes {
    display: flex;
    flex-direction: column;
    min-height: 68dvh;
  }

  .sg-notes-list {
    max-height: 30dvh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sg-notes-editor {
    min-height: 44dvh;
  }

  .sg-notes-editor-top {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .sg-notes-title {
    flex: 1 1 100%;
    font-size: 16px;
  }

  .sg-notes-body {
    min-height: 42dvh;
    font-size: 14px;
    padding: 12px;
  }

  .sg-dec-row {
    flex-direction: column;
    gap: 8px;
  }

  .sg-dec-slot {
    flex: none;
    min-width: 0;
  }

  .sg-dec-cands {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sg-dec-card {
    flex: none;
    max-width: none;
  }

  .sg-tl {
    min-height: 0;
    overflow: visible;
  }

  .sg-tl-bar {
    gap: 8px;
    padding: 10px;
  }

  .sg-tl-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sg-tl-tabs button {
    min-height: 42px;
    padding: 0 8px;
    font-size: 14px;
  }

  .sg-tl-tabs button span {
    display: block;
    margin: 2px 0 0;
  }

  .sg-tl-status {
    width: 100%;
    line-height: 1.5;
  }

  .sg-tl-spacer {
    display: none;
  }

  .sg-tl-ctrls,
  .sg-tl-budget {
    width: 100%;
  }

  .sg-tl-ctrls input[type=range] {
    flex: 1;
    min-height: 32px;
  }

  .sg-tl-main {
    flex-direction: column;
    overflow: visible;
  }

  .sg-tl-src {
    width: 100%;
    max-height: 34dvh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
  }

  .sg-tl-mode-pb .sg-tl-src {
    max-height: 28dvh;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sg-tl-scroll {
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .sg-tl-track {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  .sg-tl-body {
    position: static !important;
    min-height: 0;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
  }

  .sg-tl-pb-list {
    padding: 10px 10px 16px;
    gap: 9px;
    max-width: none;
  }

  .sg-tl-pb-section {
    font-size: 12.5px;
    padding: 5px 7px;
  }

  .sg-tl-pb-row {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 8px;
  }

  .sg-tl-pb-time {
    font-size: 11.5px;
    padding-right: 8px;
  }

  .sg-tl-pb-time b {
    font-size: 11px;
  }

  .sg-tl-pb-card {
    padding: 10px;
    border-radius: 7px;
  }

  .sg-tl-pb-card .sg-tl-scene-top {
    align-items: flex-start;
    gap: 7px;
  }

  .sg-tl-pb-index {
    min-width: 24px;
    font-size: 11px;
    padding-top: 2px;
  }

  .sg-tl-pb-card .sg-tl-scene-top .nt {
    font-size: 14.5px;
    line-height: 1.35;
  }

  .sg-tl-pb-card .sg-tl-scene-desc {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .sg-tl-pb-card .sg-tl-scene-chars,
  .sg-tl-pb-card .sg-tl-scene-tags {
    font-size: 11px;
  }

  .sg-tl-pb-gap,
  .sg-tl-pb-empty {
    margin-left: 74px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .sg-tl-vmap,
  .sg-tl-colhead,
  .sg-tl-corner,
  .sg-tl-actfill,
  .sg-tl-actband,
  .sg-tl-yt,
  .sg-tl-ytl,
  .sg-tl-gap,
  .sg-tl-yt-wd {
    display: none;
  }

  .sg-tl-scene,
  .sg-tl-wevent {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    box-sizing: border-box;
  }

  .sg-tl-scene {
    padding: 10px 12px;
  }

  .sg-tl-wevent {
    padding: 10px 12px;
    overflow: visible;
  }

  .sg-tl-scene-top .x,
  .sg-tl-wevent .x {
    min-width: 32px;
    min-height: 32px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(43,32,21,0.03);
  }

  #sg-hints-toggle {
    min-width: 38px;
    min-height: 38px;
  }

  /* 灵感矿：筛选和卡片动作提升触控面积。 */
  #tab-mine {
    padding: 0;
  }

  .mine2-bar {
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px 10px;
  }

  .mine2-id,
  .mine2-views {
    width: 100%;
  }

  .mine-root-tabs {
    width: 100%;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border);
  }

  .mine-root-tab {
    min-height: 36px;
    padding-inline: 6px;
  }

  .mine2-views {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mine2-view {
    min-height: 38px;
    padding: 0 8px;
  }

  .mine2-tools {
    padding-inline: 12px;
    gap: 10px;
  }

  .mine2-search {
    min-width: 0;
    flex-basis: 100%;
  }

  .mine2-search input {
    min-height: 42px;
    font-size: 16px;
  }

  .mine-filter,
  .mine-facet-bar {
    gap: 8px;
  }

  .mine-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
  }

  .mine-facet {
    min-height: 32px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 999px;
  }

  .mine-wall,
  .mine2-novelgrid {
    grid-template-columns: 1fr;
    padding-inline: 12px;
  }

  #mine-moves-root {
    padding: 6px 12px 16px;
  }

  .moves-library-intro {
    margin-top: 4px;
  }

  .moves-library-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .moves-library-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 7px;
  }

  .moves-library-tools {
    align-items: flex-end;
  }

  .moves-library-search {
    min-height: 38px;
    font-size: 16px;
  }

  .moves-library-wall {
    grid-template-columns: 1fr;
  }

  .mine2-novel-actions .btn {
    min-height: 38px;
  }

  /* 帮助页：覆盖内联 max-width/padding，避免 390px 视口横向溢出。 */
  .help-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 12px 84px !important;
    margin-inline: 0 !important;
    overflow-x: hidden !important;
  }

  .help-head,
  .help-title,
  .help-subtitle,
  .blueprint-canvas,
  .sgmap-wrap,
  .wf-wrap,
  .wf-grid,
  .bp-flow-row,
  .bp-node-card,
  .bp-node-io,
  .bp-node-portal {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .help-title {
    font-size: 21px !important;
    line-height: 1.25;
  }

  .blueprint-canvas {
    padding: 24px 12px 14px;
    overflow-x: hidden;
  }

  .blueprint-canvas::before {
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bp-node-header,
  .bp-io-item,
  .sgmap-row {
    min-width: 0;
  }

  .bp-io-val,
  .wf-io-v,
  .sgmap-row .v {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ── 批量速析选择器 (bscan) ─────────────────────────────────────────────── */
.bscan-card { max-width: 680px; }
.bscan-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--bg-input); }
.bscan-toolbar .bscan-sep { width: 1px; height: 18px; background: var(--border); }
.bscan-tn { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.bscan-tn input { border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; background: var(--bg-card); color: var(--text-main); }
.bscan-filter { flex: 1; min-width: 120px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; background: var(--bg-card); color: var(--text-main); font-size: 12px; }
.bscan-body { padding: 8px 14px; }
.bscan-cat { border-bottom: 1px solid var(--border); padding: 4px 0; }
.bscan-cat > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 6px 8px; list-style: none; font-weight: 700; color: var(--text-main); }
.bscan-cat > summary::-webkit-details-marker { display: none; }
.bscan-catpick { display: inline-flex; align-items: center; gap: 7px; }
.bscan-catcnt { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.bscan-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 4px 8px 10px 24px; }
.bscan-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); padding: 3px 4px; border-radius: 6px; cursor: pointer; min-width: 0; }
.bscan-row:hover { background: var(--bg-input); }
.bscan-rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bscan-rs { flex-shrink: 0; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bscan-stat { font-size: 13px; color: var(--text-muted); }
.bscan-stat b { color: var(--primary); font-size: 15px; }
@media (max-width: 640px) { .bscan-rows { grid-template-columns: 1fr; } }

/* ── 批量熔炼:成本提示 + 创作素材价值卡 ── */
.bscan-warn { color: var(--danger, #c0392b); font-weight: 600; }
.books-scan-ivcard { margin-top: 12px; padding: 12px; border: 1px solid rgba(192,57,43,.25); border-radius: 10px; background: rgba(192,57,43,.05); }
.books-scan-ivhead { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.books-scan-ivhead small { font-weight: 500; color: var(--muted, #888); font-size: 11px; }
.books-scan-ivbars { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted, #666); margin-bottom: 6px; }
.books-scan-ivbars b { font-size: 15px; color: var(--text, #222); }

/* ============ 外部剧本库 / External Script Library ============ */
.scripts-shell { display:flex; height:100%; overflow:hidden; }
.scripts-sidebar { width:230px; flex-shrink:0; border-right:1px solid var(--border,#eee); background:var(--bg-sidebar,#faf8f5); display:flex; flex-direction:column; padding:14px 12px; gap:10px; overflow:hidden; }
.scripts-side-head h2 { font-size:15px; font-weight:700; margin:0 0 2px; color:var(--text-primary,#2b2015); }
.scripts-side-head p { font-size:11px; color:var(--text-muted,#998); line-height:1.4; margin:0; }
.scripts-cat-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.scripts-cat { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; border:none; background:none; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--text-primary,#333); text-align:left; }
.scripts-cat:hover { background:rgba(43,32,21,0.05); }
.scripts-cat.active { background:var(--accent,#c0392b); color:#fff; }
.scripts-cat .sc-num { font-size:11px; opacity:0.7; font-variant-numeric:tabular-nums; }
.scripts-scan-progress { font-size:11px; color:var(--text-muted,#777); background:rgba(43,32,21,0.05); padding:6px 8px; border-radius:6px; line-height:1.4; }
.scripts-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.scripts-toolbar { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border,#eee); }
.scripts-toolbar .search-box { flex:1; max-width:360px; }
.scripts-count { font-size:12px; color:var(--text-muted,#998); }
.scripts-grid { flex:1; overflow-y:auto; padding:16px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 280px), 1fr)); gap:12px; align-content:start; }
.script-card { border:1px solid var(--border,#eee); border-radius:10px; background:var(--bg-card,#fff); padding:12px 13px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s,border-color .15s; }
.script-card:hover { box-shadow:0 3px 14px rgba(0,0,0,0.07); border-color:var(--border-active,#ddd); }
.sk-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.sk-top h4 { font-size:13.5px; font-weight:700; margin:0; color:var(--text-primary,#2b2015); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sk-badge { flex-shrink:0; font-size:10.5px; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.sk-badge.done { background:rgba(39,120,80,0.12); color:#277850; }
.sk-badge.todo { background:rgba(43,32,21,0.07); color:#998; }
.sk-badge.meta { background:rgba(176,124,42,0.14); color:#a9772a; }
.sk-badge.public { background:rgba(39,90,140,0.13); color:#2b6db0; }
.sk-badge.zh { background:rgba(120,80,160,0.13); color:#7a4fb0; }
.sk-badge.famous { background:rgba(193,57,43,0.14); color:#c0392b; font-weight:700; }
.sk-zhtitle { font-size:13px; font-weight:600; color:var(--text-primary,#333); margin:1px 0 2px; }
.script-card.online { border-left:3px solid rgba(176,124,42,0.45); }
.sk-tags { font-size:11px; color:#a9772a; margin:0 0 2px; }
.sk-scan-row.sk-hint { color:#998; font-style:italic; }
.sk-logline { font-size:12px; color:var(--text-muted,#776); line-height:1.5; margin:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.sk-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }
.sk-meta { font-size:11px; color:var(--text-muted,#aa9); }
.sk-actions { display:flex; gap:6px; align-items:center; }
.sk-btn { font-size:11.5px; padding:4px 10px; border-radius:6px; border:1px solid var(--border,#ddd); background:var(--bg-card,#fff); cursor:pointer; color:var(--text-primary,#333); }
.sk-btn:hover { background:rgba(43,32,21,0.05); }
.sk-btn.primary { background:var(--accent,#c0392b); color:#fff; border-color:var(--accent,#c0392b); }
.sk-btn:disabled { opacity:0.6; cursor:default; }
.sk-na { font-size:10.5px; color:var(--text-muted,#bbb); }
.scripts-reader-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px; }
.scripts-reader { background:var(--bg-card,#fff); border-radius:12px; width:min(960px,100%); height:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.scripts-reader-head { display:flex; justify-content:space-between; align-items:flex-start; padding:14px 18px; border-bottom:1px solid var(--border,#eee); }
.scripts-reader-head h3 { margin:0; font-size:16px; font-weight:700; }
.scripts-reader-head p { margin:2px 0 0; font-size:12px; color:var(--text-muted,#998); }
.scripts-reader-close { border:none; background:none; font-size:18px; cursor:pointer; color:var(--text-muted,#998); }
.scripts-reader-body { flex:1; overflow:hidden; display:grid; grid-template-columns:340px 1fr; gap:0; }
.scripts-reader-scan { overflow-y:auto; padding:16px 18px; border-right:1px solid var(--border,#eee); background:var(--bg-sidebar,#faf8f5); }
.sk-scan-row { font-size:12.5px; line-height:1.55; margin-bottom:10px; color:var(--text-primary,#333); }
.sk-scan-row b { display:block; font-size:11px; color:var(--text-muted,#998); margin-bottom:2px; font-weight:600; }
.sk-scan-row ul { margin:2px 0 0; padding-left:16px; }
.sk-scan-row li { margin-bottom:3px; }
.sk-hint { font-size:12px; color:var(--text-muted,#998); }
.scripts-reader-text { flex:1; overflow-y:auto; padding:16px 20px; margin:0; font-family:var(--font-mono,monospace); font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word; color:var(--text-primary,#333); }

.shortdrama-shell { display:flex; height:100%; overflow:hidden; }
.shortdrama-sidebar { width:260px; flex-shrink:0; border-right:1px solid var(--border,#eee); background:var(--bg-sidebar,#faf8f5); display:flex; flex-direction:column; padding:10px 12px; gap:8px; overflow:hidden; }
.shortdrama-side-head h2 { font-size:15px; font-weight:700; margin:0 0 2px; color:var(--text-primary,#2b2015); }
.shortdrama-side-head p { font-size:11px; color:var(--text-muted,#998); line-height:1.4; margin:0; }
.shortdrama-statbox { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; border:1px solid var(--border,#eee); border-radius:9px; background:rgba(255,255,255,.45); }
.shortdrama-statbox div { display:flex; flex-direction:column; gap:2px; }
.shortdrama-statbox b { font-family:var(--font-mono,monospace); font-size:17px; color:var(--text-primary,#2b2015); }
.shortdrama-statbox span { font-size:11px; color:var(--text-muted,#998); }
.shortdrama-statbox p { grid-column:1/-1; margin:0; font-size:10.5px; color:var(--text-muted,#998); }
.shortdrama-section-head, .shortdrama-filter-title { margin-top:2px; font-size:11px; font-weight:700; color:var(--text-muted,#998); letter-spacing:.04em; }
.shortdrama-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.shortdrama-chip { border:1px solid var(--border,#eee); background:var(--bg-card,#fff); color:var(--text-primary,#333); border-radius:999px; padding:5px 9px; font-size:11.5px; cursor:pointer; }
.shortdrama-chip span { color:var(--text-muted,#998); margin-left:3px; }
.shortdrama-chip.active { background:var(--accent,#c0392b); border-color:var(--accent,#c0392b); color:#fff; }
.shortdrama-chip.active span { color:rgba(255,255,255,.8); }
.shortdrama-basic-block { flex:0 0 auto; min-height:0; border-bottom:1px solid var(--border,#eee); padding-bottom:6px; }
.shortdrama-basic-body { display:flex; flex-direction:column; gap:7px; min-height:0; }
.shortdrama-collapse-head { width:100%; border:none; background:none; color:var(--text-muted,#998); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 2px 6px; font-size:11px; font-weight:700; letter-spacing:.04em; cursor:pointer; }
.shortdrama-collapse-head::after { content:'▾'; font-size:10px; opacity:.75; transition:transform .15s ease; }
.shortdrama-basic-block.is-collapsed .shortdrama-collapse-head::after, .shortdrama-hongguo-panel.is-collapsed .shortdrama-collapse-head::after { transform:rotate(-90deg); }
.shortdrama-collapse-current { min-width:0; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary,#333); letter-spacing:0; font-weight:600; }
.shortdrama-cat-list { flex:0 0 auto; max-height:190px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.shortdrama-basic-block.is-collapsed .shortdrama-basic-body { display:none; }
.shortdrama-cat { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; border:none; background:none; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--text-primary,#333); text-align:left; }
.shortdrama-cat:hover { background:rgba(43,32,21,0.05); }
.shortdrama-cat.active { background:var(--accent,#c0392b); color:#fff; }
.shortdrama-cat .sc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shortdrama-cat .sc-num { font-size:11px; opacity:.72; font-variant-numeric:tabular-nums; flex-shrink:0; }
.shortdrama-hongguo-panel { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:0; padding-top:0; }
.shortdrama-hongguo-panel.is-collapsed { flex:0 0 auto; }
.shortdrama-hongguo-panel.is-collapsed .shortdrama-hongguo-body { display:none; }
.shortdrama-hongguo-body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.shortdrama-hongguo-panel .shortdrama-filter-title, .shortdrama-hongguo-panel .shortdrama-chip-list { flex:0 0 auto; }
.shortdrama-hongguo-panel .shortdrama-chip-list { min-height:42px; max-height:none; overflow:visible; padding-right:0; }
.shortdrama-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.shortdrama-toolbar { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border,#eee); background:var(--bg-card,#fff); }
.shortdrama-toolbar .search-box { flex:1; min-width:180px; max-width:520px; }
.shortdrama-toolbar select { height:32px; min-width:108px; border:1px solid var(--border,#ddd); border-radius:6px; background:var(--bg-surface,#fff); color:var(--text-primary,#333); font-size:12px; padding:0 8px; }
.shortdrama-updated { margin-left:auto; font-size:12px; color:var(--text-muted,#998); white-space:nowrap; }
.shortdrama-count { font-size:12px; color:var(--text-muted,#998); font-family:var(--font-mono,monospace); white-space:nowrap; }
.shortdrama-grid { flex:1; overflow-y:auto; padding:16px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 280px), 1fr)); gap:12px; align-content:start; }
.shortdrama-card { border:1px solid var(--border,#eee); border-radius:10px; background:var(--bg-card,#fff); padding:12px 13px; display:flex; flex-direction:column; gap:8px; min-height:188px; transition:box-shadow .15s,border-color .15s; }
.shortdrama-card:hover { box-shadow:0 3px 14px rgba(0,0,0,0.07); border-color:var(--border-active,#ddd); }
.shortdrama-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.shortdrama-card-top h4 { font-size:13.5px; font-weight:700; margin:0; color:var(--text-primary,#2b2015); line-height:1.32; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.shortdrama-badge { flex-shrink:0; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; padding:2px 7px; border-radius:20px; background:rgba(176,124,42,0.14); color:#a9772a; }
.shortdrama-card-meta { font-size:11px; color:var(--text-muted,#998); min-height:14px; }
.shortdrama-card-text { font-size:12px; color:var(--text-muted,#776); line-height:1.52; margin:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.shortdrama-card-tags { display:flex; flex-wrap:wrap; gap:5px; min-height:20px; }
.shortdrama-card-tags span, .shortdrama-reader-tags span { font-size:10.5px; color:#6f5b3b; background:rgba(176,124,42,0.12); border-radius:999px; padding:2px 7px; }
.shortdrama-card-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; font-size:11px; color:var(--text-muted,#998); }
.shortdrama-pager-wrap { flex-shrink:0; text-align:center; padding:10px 0 18px; border-top:1px solid var(--border,#eee); background:var(--bg-card,#fff); }
.shortdrama-reader-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px; }
.shortdrama-reader { background:var(--bg-card,#fff); border-radius:12px; width:min(1040px,100%); height:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.shortdrama-reader-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border,#eee); }
.shortdrama-reader-head h3 { margin:0; font-size:17px; font-weight:800; color:var(--text-primary,#2b2015); }
.shortdrama-reader-head p { margin:3px 0 0; font-size:12px; color:var(--text-muted,#998); }
.shortdrama-reader-close { border:none; background:none; font-size:18px; cursor:pointer; color:var(--text-muted,#998); }
.shortdrama-reader-body { flex:1; min-height:0; display:grid; grid-template-columns:320px minmax(0,1fr); overflow:hidden; }
.shortdrama-reader-meta { overflow-y:auto; padding:16px 18px; border-right:1px solid var(--border,#eee); background:var(--bg-sidebar,#faf8f5); }
.shortdrama-reader-row { font-size:12.5px; line-height:1.55; margin-bottom:12px; color:var(--text-primary,#333); }
.shortdrama-reader-row b { display:block; font-size:11px; color:var(--text-muted,#998); margin-bottom:3px; font-weight:700; }
.shortdrama-reader-tags { display:flex; flex-wrap:wrap; gap:5px; }
.shortdrama-source-list { margin:0; padding-left:16px; }
.shortdrama-source-list li { margin-bottom:7px; word-break:break-word; }
.shortdrama-source-list a { color:var(--secondary,#2b6db0); text-decoration:none; }
.shortdrama-source-list small { display:block; color:var(--text-muted,#998); margin-top:2px; }
.shortdrama-reader-text { overflow-y:auto; padding:20px 24px; }
.shortdrama-reader-text section { margin-bottom:22px; }
.shortdrama-reader-text h4 { margin:0 0 8px; font-size:13px; color:var(--primary,#a23e2e); }
.shortdrama-reader-text p { margin:0; font-size:14px; line-height:1.85; color:var(--text-primary,#333); white-space:pre-wrap; }
@media (max-width:760px){
  /* 外部剧本库：双栏 → 移动端单列。分类做成顶部横滑 chip rail，卡片整屏单列。 */
  .scripts-shell{ flex-direction:column; }
  .scripts-sidebar{ width:100%; flex-shrink:0; border-right:none; border-bottom:1px solid var(--border,#eee);
    padding:8px 10px; gap:8px; overflow:visible; }
  .scripts-side-head{ display:none; }
  .scripts-cat-list{ flex:none; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .scripts-cat{ flex:0 0 auto; width:auto; min-height:36px; background:rgba(43,32,21,0.05);
    padding:7px 13px; border-radius:18px; scroll-snap-align:start; }
  .scripts-cat .sc-name{ white-space:nowrap; }
  .scripts-cat.active{ background:var(--accent,#c0392b); color:#fff; }
  #scripts-batch-scan{ align-self:flex-start; }
  .scripts-main{ flex:1 1 auto; min-height:0; }
  .scripts-toolbar{ padding:10px 12px; gap:8px; }
  .scripts-grid{ grid-template-columns:1fr; padding:12px; gap:10px; }
  .sk-btn{ min-height:34px; display:inline-flex; align-items:center; }
  /* 阅读器：全屏，速析/元信息在上、正文在下（不再隐藏 scan，线上元信息要显示） */
  .scripts-reader-overlay{ padding:0; }
  .scripts-reader{ border-radius:0; width:100%; height:100%; max-height:100%; }
  .scripts-reader-body{ display:flex; flex-direction:column; overflow-y:auto; }
  .scripts-reader-scan{ display:block; border-right:none; border-bottom:1px solid var(--border,#eee); }
  .scripts-reader-text{ min-height:42vh; }
  .shortdrama-shell{ flex-direction:column; }
  .shortdrama-sidebar{ width:100%; flex-shrink:0; border-right:none; border-bottom:1px solid var(--border,#eee); padding:8px 10px; gap:8px; overflow:visible; }
  .shortdrama-side-head{ display:none; }
  .shortdrama-statbox{ display:none; }
  .shortdrama-section-head, .shortdrama-filter-title{ display:none; }
  .shortdrama-basic-block{ border-bottom:none; padding-bottom:0; }
  .shortdrama-basic-body{ gap:6px; }
  .shortdrama-collapse-head{ min-height:30px; padding:0 2px 4px; }
  .shortdrama-chip-list, .shortdrama-cat-list{ flex:none; max-height:none; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .shortdrama-chip, .shortdrama-cat{ flex:0 0 auto; width:auto; min-height:34px; background:rgba(43,32,21,0.05); padding:7px 12px; border-radius:18px; }
  .shortdrama-hongguo-panel{ flex:none; overflow:visible; display:flex; flex-direction:column; gap:6px; border-top:none; padding-top:0; }
  .shortdrama-hongguo-body{ flex:none; overflow:visible; gap:6px; }
  .shortdrama-hongguo-panel .shortdrama-filter-title{ display:block; flex:none; font-size:10px; margin:0; }
  .shortdrama-hongguo-panel .shortdrama-chip-list{ max-height:none; }
  .shortdrama-main{ flex:1 1 auto; min-height:0; }
  .shortdrama-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,112px); padding:10px 12px; gap:8px; }
  .shortdrama-toolbar .search-box{ grid-column:1/-1; max-width:none; min-width:0; }
  .shortdrama-updated{ margin-left:0; align-self:center; font-size:11px; }
  .shortdrama-count{ align-self:center; text-align:right; }
  .shortdrama-grid{ grid-template-columns:1fr; padding:12px; gap:10px; }
  .shortdrama-reader-overlay{ padding:0; }
  .shortdrama-reader{ border-radius:0; width:100%; height:100%; max-height:100%; }
  .shortdrama-reader-body{ display:flex; flex-direction:column; overflow-y:auto; }
  .shortdrama-reader-meta{ border-right:none; border-bottom:1px solid var(--border,#eee); max-height:40vh; }
  .shortdrama-reader-text{ overflow:visible; padding:16px; }
}

/* ─── 编剧室状态轨（writers' room state rail，只读） ───────────────────── */
.room-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.room-rail-body { flex: 1; overflow-y: auto; padding: 10px 12px; font-weight: 400; }
.room-rail-head { margin-bottom: 10px; }
.room-rail-title { font-size: 15px; font-weight: 700; }
.room-rail-sub { font-size: 12px; color: var(--text-secondary, #888); margin-top: 2px; word-break: break-all; }
.room-rail-running { margin-top: 6px; font-size: 12px; color: #3b82f6; background: rgba(59,130,246,.1); border-radius: 6px; padding: 4px 8px; }
.room-rail-links { margin-top: 6px; display: flex; gap: 10px; font-size: 12px; }
.room-rail-links a { color: var(--secondary, #6c8cff); text-decoration: none; }
.room-stages { display: flex; flex-direction: column; gap: 4px; }
.room-stage { border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 6px 8px; }
.room-stage .room-stage-row { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.room-stage.s-absent { opacity: .55; }
.room-stage.s-stale { border-color: rgba(234,179,8,.6); }
.room-lbl { font-size: 13px; font-weight: 600; flex: 1; }
.room-ver { font-size: 11px; color: var(--text-secondary, #888); }
.room-sum { font-size: 11.5px; color: var(--text-secondary, #999); margin-top: 3px; line-height: 1.5; }
.room-stale-note { font-size: 11px; color: #eab308; margin-top: 2px; }
.room-detail { margin-top: 6px; border-top: 1px dashed var(--border-color, #333); padding-top: 6px; }
.room-vers { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.room-ver-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border-color, #444); background: transparent; color: inherit; cursor: pointer; }
.room-ver-chip.active { border-color: var(--secondary, #6c8cff); color: var(--secondary, #6c8cff); }
.room-json { max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5; background: rgba(0,0,0,.18); border-radius: 6px; padding: 8px; white-space: pre-wrap; word-break: break-all; }
.room-detail-hint { font-size: 11px; color: var(--text-secondary, #888); margin-top: 5px; }
.room-detail-empty { font-size: 12px; color: var(--text-secondary, #888); }
.room-decisions { margin-top: 12px; }
.room-rail-sect { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.room-dec { font-size: 11.5px; color: var(--text-secondary, #999); border-left: 2px solid var(--secondary, #6c8cff); padding: 3px 6px; margin-bottom: 4px; line-height: 1.5; }
.room-progress-log { font-size: 12px; color: var(--text-secondary, #9aa); background: rgba(0,0,0,.15); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.7; max-height: 220px; overflow-y: auto; }
@media (max-width: 1200px) { .room-rail { width: 260px; } }
@media (max-width: 900px) { .room-rail { display: none !important; } }

/* ─── Themes Support ─────────────────────────────────────────────────────── */
[data-theme="night"] {
  --bg-app: #121212;
  --bg-sidebar: #1a1a1a;
  --bg-card: #202020;
  --bg-input: #2a2a2a;
  --bg-elevated: #282828;
  --bg-top-nav: rgba(26, 26, 26, 0.92);
  --bg-top-nav-mobile: rgba(26, 26, 26, 0.98);
  --border-color: rgba(255, 255, 255, 0.12);
  --border-color-active: rgba(255, 255, 255, 0.24);
  --border: rgba(255, 255, 255, 0.12);
  --border-active: rgba(255, 255, 255, 0.24);

  --primary: #ff6b6b;
  --button-primary-hover: #E65C5C;
  --button-primary-border: #D95B5B;
  --button-primary-hover-border: #C84B4B;
  --button-primary-foreground: #fff;
  --button-primary-shadow: rgba(0, 0, 0, 0.28);
  --primary-glow: rgba(255, 107, 107, 0.28);
  --secondary: #81c784;
  --text-main: #e0e0e0;
  --text-muted: #a0a0a0;
  --text-dim: #707070;
  --text: #e0e0e0;
  --muted: #a0a0a0;
  --dim: #707070;
  --success: #81c784;
  --danger: #e57373;
  --warn: #ffb74d;

  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --text-mid: #b0b0b0;
  --primary-light: #ff8a80;
  --accent: var(--primary);

  --bg-trans-1: rgba(255, 255, 255, 0.01);
  --bg-trans-2: rgba(255, 255, 255, 0.02);
  --bg-trans-3: rgba(255, 255, 255, 0.03);
  --bg-trans-4: rgba(255, 255, 255, 0.04);
  --bg-trans-5: rgba(255, 255, 255, 0.05);
  --bg-trans-6: rgba(255, 255, 255, 0.06);
  --bg-trans-8: rgba(255, 255, 255, 0.08);
  --bg-trans-10: rgba(255, 255, 255, 0.10);
  --bg-trans-12: rgba(255, 255, 255, 0.12);
  --bg-trans-15: rgba(255, 255, 255, 0.15);
  --bg-trans-25: rgba(255, 255, 255, 0.25);

  --status-draft-color: var(--text-muted);
  --status-draft-bg: rgba(255, 255, 255, 0.08);
  --status-projected-color: var(--success);
  --status-projected-bg: rgba(129, 199, 132, 0.15);
  --status-reserved-color: var(--warn);
  --status-reserved-bg: rgba(255, 183, 77, 0.15);

  --primary-glow-trans: rgba(255, 107, 107, 0.15);
  --primary-glow-trans-5: rgba(255, 107, 107, 0.06);
  --primary-glow-trans-10: rgba(255, 107, 107, 0.12);
  --primary-glow-trans-15: rgba(255, 107, 107, 0.18);
  --warn-glow-trans-8: rgba(255, 183, 77, 0.1);
  --warn-glow-trans-25: rgba(255, 183, 77, 0.25);
  --success-glow-trans-12: rgba(129, 199, 132, 0.15);
  --danger-glow-trans-12: rgba(229, 115, 115, 0.15);
  --danger-glow-trans-6: rgba(229, 115, 115, 0.08);
  --danger-glow-trans-15: rgba(229, 115, 115, 0.18);

  color-scheme: dark;
}

[data-theme="terminal"] {
  --bg-app: #070D09;
  --bg-sidebar: #0A1510;
  --bg-card: #0E1C15;
  --bg-input: #11241A;
  --bg-elevated: #14281E;
  --bg-top-nav: rgba(10, 21, 16, 0.94);
  --bg-top-nav-mobile: rgba(10, 21, 16, 0.98);
  --border-color: rgba(166, 190, 171, 0.16);
  --border-color-active: rgba(166, 190, 171, 0.32);
  --border: rgba(166, 190, 171, 0.16);
  --border-active: rgba(166, 190, 171, 0.32);

  --primary: #73937A;
  --button-primary-hover: #73937A;
  --button-primary-border: #8DAA91;
  --button-primary-hover-border: #8DAA91;
  --button-primary-foreground: #08100B;
  --button-primary-shadow: rgba(0, 0, 0, 0.24);
  --primary-glow: rgba(115, 147, 122, 0.18);
  --secondary: #91A893;
  --text-main: #C7D4C8;
  --text-muted: #94A995;
  --text-dim: #657968;
  --text: #C7D4C8;
  --muted: #94A995;
  --dim: #657968;
  --success: #8FAF91;
  --danger: #C38278;
  --warn: #BCAF7B;

  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --text-mid: #AAB9AB;
  --primary-light: #A7C0AA;
  --accent: var(--primary);

  --bg-trans-1: rgba(199, 212, 200, 0.012);
  --bg-trans-2: rgba(199, 212, 200, 0.02);
  --bg-trans-3: rgba(199, 212, 200, 0.03);
  --bg-trans-4: rgba(199, 212, 200, 0.04);
  --bg-trans-5: rgba(199, 212, 200, 0.05);
  --bg-trans-6: rgba(199, 212, 200, 0.06);
  --bg-trans-8: rgba(199, 212, 200, 0.08);
  --bg-trans-10: rgba(199, 212, 200, 0.10);
  --bg-trans-12: rgba(199, 212, 200, 0.12);
  --bg-trans-15: rgba(199, 212, 200, 0.15);
  --bg-trans-25: rgba(199, 212, 200, 0.22);

  --status-draft-color: var(--text-muted);
  --status-draft-bg: rgba(199, 212, 200, 0.08);
  --status-projected-color: var(--success);
  --status-projected-bg: rgba(143, 175, 145, 0.14);
  --status-reserved-color: var(--warn);
  --status-reserved-bg: rgba(188, 175, 123, 0.14);

  --primary-glow-trans: rgba(115, 147, 122, 0.16);
  --primary-glow-trans-5: rgba(115, 147, 122, 0.05);
  --primary-glow-trans-10: rgba(115, 147, 122, 0.10);
  --primary-glow-trans-15: rgba(115, 147, 122, 0.15);
  --warn-glow-trans-8: rgba(188, 175, 123, 0.08);
  --warn-glow-trans-25: rgba(188, 175, 123, 0.20);
  --success-glow-trans-12: rgba(143, 175, 145, 0.12);
  --danger-glow-trans-12: rgba(195, 130, 120, 0.12);
  --danger-glow-trans-6: rgba(195, 130, 120, 0.06);
  --danger-glow-trans-15: rgba(195, 130, 120, 0.15);

  color-scheme: dark;
}

/* Specific component theme fixes */
[data-theme="night"] ::selection {
  background: var(--primary-glow);
  color: var(--text-main);
}
[data-theme="terminal"] ::selection {
  background: rgba(115, 147, 122, 0.42);
  color: #08100B;
}

[data-theme="night"] select option,
[data-theme="terminal"] select option {
  background: var(--bg-card);
  color: var(--text-main);
}

[data-theme="night"] svg,
[data-theme="terminal"] svg {
  /* Prevent dark SVGs from being invisible */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Dropdown Theme Switcher UI Styles */
.theme-dropdown-wrap {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.theme-dropdown-trigger-btn {
  background: var(--bg-trans-6);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  padding: 0;
  color: var(--text-main);
}

.theme-dropdown-trigger-btn:hover {
  background: var(--bg-trans-12);
  border-color: var(--border-active);
}

.theme-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 0;
  list-style: none;
  min-width: 140px;
  box-shadow: 0 10px 24px var(--bg-trans-25);
  display: none;
  z-index: 1000;
}

.theme-dropdown-menu.show {
  display: block;
}

.theme-dropdown-item {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-dropdown-item:hover {
  background: var(--bg-trans-8);
}

.theme-dropdown-item.active {
  background: var(--primary-glow-trans);
  color: var(--primary);
  font-weight: 600;
}

/* Top Tab Dropdown */
.top-tab-dropdown {
  position: relative;
  display: inline-block;
}

.top-tab-dropdown .dropdown-trigger-btn {
  /* Inherits top-tab styles, just override default button reset */
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Hover or open dropdown menu */
.top-tab-dropdown:hover .top-tab-dropdown-menu,
.top-tab-dropdown-menu.show {
  display: block;
}

.top-tab-dropdown:hover .tt-arrow {
  transform: rotate(180deg);
}

.top-tab-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 0;
  list-style: none;
  min-width: 150px;
  box-shadow: 0 10px 24px var(--bg-trans-25);
  display: none;
  z-index: 1000;
  margin: 2px 0 0 0;
}

.dropdown-tab-item {
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.dropdown-tab-item:hover {
  background: var(--bg-trans-8);
}

.dropdown-tab-item.active {
  background: var(--primary-glow-trans);
  color: var(--primary);
  font-weight: 600;
}

.top-tab-dropdown .tt-arrow {
  font-size: 9px;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Help Tab Button as Icon Button in top-right */
.top-tab-help {
  background: var(--bg-trans-6);
  border: 1px solid var(--border);
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  padding: 0 !important;
  color: var(--text-main);
  flex-shrink: 0;
}

.top-tab-help:hover {
  background: var(--bg-trans-12);
  border-color: var(--border-active);
}

.top-tab-help.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 8px var(--primary-glow) !important;
}

/* Hide desktop help tab on mobile */
@media (max-width: 599px) {
  .top-tab-help {
    display: none !important;
  }
}

/* ─── Screenplay lab: quiet workshop controls ─────────────────────── */
#screenplay-lab-view {
  --lab-rule: var(--border);
  --lab-amber-rule: rgba(184, 134, 59, 0.32);
  --lab-list-bg: rgba(248, 241, 227, 0.68);
  --lab-card-bg: rgba(248, 241, 227, 0.70);
  --lab-origin-bg: rgba(184, 134, 59, 0.035);
  --lab-selected-border: rgba(162, 62, 46, 0.50);
  --lab-selected-bg: rgba(162, 62, 46, 0.035);
  --lab-reflection-valid-border: rgba(79, 111, 93, 0.40);
  --lab-reflection-valid-bg: rgba(79, 111, 93, 0.025);
  --lab-reflection-warning-border: rgba(176, 57, 42, 0.38);
  --lab-reflection-warning-bg: rgba(176, 57, 42, 0.025);
  --lab-pick-hover-border: rgba(162, 62, 46, 0.50);
  --lab-pick-hover-bg: rgba(162, 62, 46, 0.045);
}

.lab-list,
.lab-detail {
  max-width: 1240px;
  padding-bottom: 20px;
}

.lab-title {
  margin: 0 0 4px;
  color: var(--text-main);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.lab-intro,
.lab-origin-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.75;
}

.lab-intro {
  margin-bottom: 16px;
}

.lab-create {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.lab-create-input {
  min-width: 0;
  flex: 1;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--lab-rule);
  border-radius: 6px;
  outline: none;
  background: var(--bg-input);
  color: var(--text-main);
  font: inherit;
  font-size: 13px;
}

.lab-create-input:focus {
  border-color: rgba(162, 62, 46, 0.58);
  box-shadow: 0 0 0 3px rgba(162, 62, 46, 0.08);
}

.lab-create-submit {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

.lab-list-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lab-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--lab-rule);
  border-radius: 7px;
  background: var(--lab-list-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.lab-list-item:hover {
  border-color: var(--lab-amber-rule);
  background: var(--lab-list-bg);
}

.lab-list-idea {
  flex: 1;
  min-width: 0;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.6;
}

.lab-list-warning,
.lab-list-meta {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
}

.lab-list-warning { color: var(--danger); }
.lab-list-meta { color: var(--text-dim); }

.lab-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.lab-origin {
  padding: 11px 14px;
  border: 1px solid var(--lab-amber-rule);
  border-radius: 7px;
  background: var(--lab-origin-bg);
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.8;
}

.lab-origin-note { margin-top: 6px; }

.lab-signal {
  padding: 8px 11px;
  border: 1px solid var(--lab-rule);
  border-radius: 6px;
  background: rgba(43, 32, 21, 0.018);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}

.lab-signal-warning {
  border-color: rgba(176, 57, 42, 0.38);
  background: rgba(176, 57, 42, 0.035);
  color: var(--danger);
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 11px;
}

.lab-card,
.lab-reflection {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--lab-rule);
  border-radius: 7px;
  background: var(--lab-card-bg);
}

.lab-card-selected {
  border-color: var(--lab-selected-border);
  background: var(--lab-selected-bg);
}

.lab-reflection-valid {
  border-color: var(--lab-reflection-valid-border);
  background: var(--lab-reflection-valid-bg);
}

.lab-reflection-warning {
  border-color: var(--lab-reflection-warning-border);
  background: var(--lab-reflection-warning-bg);
}

.lab-pick {
  align-self: flex-start;
  min-width: 68px;
  min-height: 30px;
  padding: 4px 10px;
  border-color: var(--lab-rule);
  color: var(--text-main);
  font-size: 12px;
}

.lab-pick:hover {
  border-color: var(--lab-pick-hover-border);
  background: var(--lab-pick-hover-bg);
}

.lab-pick-selected,
.lab-pick-selected:hover {
  border-color: var(--button-primary-border);
  background: var(--primary);
  color: var(--button-primary-foreground);
}

.lab-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--lab-rule);
  background: var(--bg-app);
}

.lab-selection-count {
  color: var(--text-main);
  font-size: 13px;
  white-space: nowrap;
}

.lab-produce {
  min-height: 34px;
  padding-inline: 13px;
  white-space: nowrap;
}

.lab-selection-hint {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.55;
}

[data-theme="night"] #screenplay-lab-view {
  --lab-amber-rule: rgba(214, 174, 109, 0.34);
  --lab-list-bg: var(--bg-card);
  --lab-card-bg: var(--bg-card);
  --lab-origin-bg: rgba(214, 174, 109, 0.06);
  --lab-selected-border: rgba(255, 107, 107, 0.48);
  --lab-selected-bg: rgba(255, 107, 107, 0.07);
  --lab-reflection-valid-border: rgba(129, 199, 132, 0.38);
  --lab-reflection-valid-bg: rgba(129, 199, 132, 0.05);
  --lab-reflection-warning-border: rgba(229, 115, 115, 0.38);
  --lab-reflection-warning-bg: rgba(229, 115, 115, 0.05);
  --lab-pick-hover-border: rgba(255, 107, 107, 0.48);
  --lab-pick-hover-bg: rgba(255, 107, 107, 0.06);
}

[data-theme="terminal"] #screenplay-lab-view {
  --lab-amber-rule: rgba(188, 175, 123, 0.28);
  --lab-list-bg: var(--bg-card);
  --lab-card-bg: var(--bg-card);
  --lab-origin-bg: rgba(143, 175, 145, 0.04);
  --lab-selected-border: rgba(143, 175, 145, 0.40);
  --lab-selected-bg: rgba(143, 175, 145, 0.07);
  --lab-reflection-valid-border: rgba(143, 175, 145, 0.34);
  --lab-reflection-valid-bg: rgba(143, 175, 145, 0.04);
  --lab-reflection-warning-border: rgba(195, 130, 120, 0.34);
  --lab-reflection-warning-bg: rgba(195, 130, 120, 0.04);
  --lab-pick-hover-border: var(--lab-rule);
  --lab-pick-hover-bg: transparent;
}

/* The terminal variant is a reading instrument, not a reactive dashboard.
   Keep its lab controls still; selection is conveyed by the persistent state. */
[data-theme="terminal"] #screenplay-lab-view,
[data-theme="terminal"] #screenplay-lab-view * {
  transition: none !important;
}

[data-theme="terminal"] #screenplay-lab-view .lab-list-item:hover {
  border-color: var(--lab-rule);
  background: var(--lab-list-bg);
  color: var(--text-main);
  transform: none;
}

[data-theme="terminal"] #screenplay-lab-view .lab-pick:hover {
  border-color: var(--lab-rule);
  background: transparent;
  color: var(--text-main);
  transform: none;
}

[data-theme="terminal"] #screenplay-lab-view .lab-pick-selected:hover,
[data-theme="terminal"] #screenplay-lab-view .btn-primary:hover {
  border-color: var(--button-primary-border);
  background: var(--primary);
  color: var(--button-primary-foreground);
  box-shadow: 0 1px 2px var(--button-primary-shadow);
  transform: none;
}

@media (max-width: 599px) {
  #screenplay-lab-view {
    padding: 16px 16px calc(var(--mobile-nav-height) + 28px) !important;
  }

  .lab-title { font-size: 20px; }

  .lab-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .lab-create-input,
  .lab-create-submit {
    min-height: 42px;
  }

  .lab-create-submit { padding-inline: 12px; }

  .lab-list-items { gap: 8px; }

  .lab-list-item {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px 9px;
    padding: 11px 12px;
  }

  .lab-list-idea { flex-basis: 100%; }

  .lab-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .lab-card,
  .lab-reflection { padding: 13px 14px; }

  .lab-pick {
    min-width: 72px;
    min-height: 38px;
    padding-inline: 12px;
  }

  .lab-sticky-actions {
    bottom: calc(var(--mobile-nav-height) + 8px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 0 0;
  }

  .lab-produce {
    min-height: 40px;
    padding-inline: 11px;
    font-size: 12px;
  }

  .lab-selection-hint {
    grid-column: 1 / -1;
    font-size: 11px;
  }
}