/* ============================================================
   原点编剧系统 — 双主题设计系统
   亮色：温暖米白 + 赭石强调
   暗色：好莱坞黄金时代 深暖黑 + 金色强调
   ============================================================ */

:root {
  /* 背景层次 — 拉开对比，避免米黄四档相溶 */
  --bg: #faf6ee;           /* 页面底，off-white 暖调 */
  --surface-1: #ffffff;    /* 卡片/抽屉/模态 一律纯白 */
  --surface-2: #ffffff;    /* 主编辑区 */
  --surface-3: #f3ecdc;    /* 二级背景（步骤栏/底部库/库标题等） */
  --surface-hover: #f5efe1;

  /* 纸面 — 卡片/输入框白底，暗色主题映射到深色表面 */
  --paper: #ffffff;
  --paper-warm: #fffdf6;

  /* 边框 — 加深，input 不再像 readonly */
  --border: rgba(40, 30, 15, 0.16);
  --border-strong: rgba(40, 30, 15, 0.32);
  --border-soft: rgba(40, 30, 15, 0.08);
  --border-accent: rgba(186, 86, 22, 0.55);

  /* 文字层次 */
  --ink: #1b1813;
  --ink-1: #1b1813;
  --ink-2: #4a3f33;
  --muted: #6e5b4a;
  --muted-2: #a89880;

  /* 强调 — 略降饱和避免视觉疲劳 */
  --accent: #b5601d;
  --accent-2: #c97326;
  --accent-soft: rgba(181, 96, 29, 0.10);
  --accent-glow: rgba(181, 96, 29, 0.18);

  /* 语义色 */
  --critical: #b43e2f;
  --critical-soft: rgba(180, 62, 47, 0.10);
  --success: #2f7d5f;
  --success-soft: rgba(47, 125, 95, 0.10);
  --info: #1e5fa8;
  --info-soft: rgba(30, 95, 168, 0.10);
  --warning: #b17319;
  --warning-soft: rgba(177, 115, 25, 0.10);

  /* 状态色点 */
  --status-draft: #a89880;
  --status-active: #1e5fa8;
  --status-review: #b17319;
  --status-done: #2f7d5f;
  --status-discard: #b43e2f;

  /* 字体 */
  --font-display: "Noto Serif SC", "Source Han Serif SC", serif;
  --font-ui: "DM Sans", "PingFang SC", "Hiragino Sans GB", sans-serif;

  /* 几何 — 圆角统一 */
  --radius: 8px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 阴影 — 降低强度，避免厚重 */
  --shadow: 0 4px 12px rgba(40, 30, 15, 0.06);
  --shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(40, 30, 15, 0.06);
  --shadow-lg: 0 12px 32px rgba(40, 30, 15, 0.12);

  /* 字号阶梯（新增） */
  --text-xs: 0.72rem;   /* 12px */
  --text-sm: 0.82rem;   /* 14px */
  --text-base: 0.94rem; /* 16px */
  --text-lg: 1.12rem;   /* 19px */
  --text-xl: 1.36rem;   /* 23px */
  --text-hero: 1.88rem; /* 32px */

  /* 间距（新增） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* ── 暗色主题（好莱坞黄金时代）──────────────────────────── */

[data-theme="dark"] {
  --bg: #0e0c08;
  --surface-1: #151210;
  --surface-2: #1e1a12;
  --surface-3: #272318;
  --surface-hover: #2e2920;

  --paper: #1a1611;
  --paper-warm: #1e1a12;

  --border: rgba(200, 164, 90, 0.28);
  --border-soft: rgba(200, 164, 90, 0.14);
  --border-strong: rgba(200, 164, 90, 0.45);
  --border-accent: rgba(200, 164, 90, 0.75);

  --ink: #f0e8d8;
  --ink-1: #f0e8d8;
  --ink-2: #c8b890;
  --muted: #a09278;
  --muted-2: #6a5e4a;

  --accent: #c8a45a;
  --accent-2: #d4b268;
  --accent-soft: rgba(200, 164, 90, 0.12);
  --accent-glow: rgba(200, 164, 90, 0.25);

  --critical: #e06060;
  --critical-soft: rgba(224, 96, 96, 0.12);
  --success: #5ac87a;
  --success-soft: rgba(90, 200, 122, 0.12);
  --info: #6aaad4;
  --info-soft: rgba(106, 170, 212, 0.12);
  --warning: #d4904a;
  --warning-soft: rgba(212, 144, 74, 0.12);

  --status-draft: #7a7060;
  --status-active: #6aaad4;
  --status-review: #d4904a;
  --status-done: #5ac87a;
  --status-discard: #e06060;

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.65);
}

/* ── 基础重置 ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 17px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; }
h1 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; }
h2 { font-size: 1.25rem; line-height: 1.2; }
h3 { font-size: 0.95rem; }

p { margin: 0; line-height: 1.65; }
a { color: var(--accent); text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* .panel 专用：不落 transform，避免动画结束后残留的 matrix(1,0,0,1,0,0)
   给子级 position:fixed 弹层（如 mode-picker-backdrop）建立错误的包含块，
   导致全屏遮罩被裁进面板盒子里，点不到实际按钮 */
@keyframes fadeUpNoTransform {
  from { opacity: 0; margin-top: 6px; }
  to { opacity: 1; margin-top: 0; }
}

/* ── App Shell ─────────────────────────────────────────────── */

.app-shell {
  width: calc(100vw - 24px);
  margin: 0 auto;
  padding: 14px 0 48px;
}

/* ── Hero（顶部导航栏）────────────────────────────────────── */

/* ── Hero base（亮暗通用）────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  margin-bottom: 14px;
  background: var(--surface-1);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 52px;
}

.hero::before { content: none; }
.hero::after  { content: none; }

.hero.is-compact { padding: 0 20px; min-height: 44px; }

.hero__copy {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 13px 0;
}

.hero__copy::before, .hero__copy::after { content: none; }

/* 项目名：大标题，超长时截断 */
#hero-eyebrow.eyebrow {
  font-size: 1.65rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  text-shadow: none;
}

#hero-title {
  display: none;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__text { display: none; }

.hero__side {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.hero__actions { display: flex; align-items: center; gap: 6px; }
.hero__sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 6px;
}
.hero__theme-btn { font-size: 1rem; padding: 4px 8px; }

/* ── Hero 暗色覆盖（好莱坞金框）────────────────────────── */

[data-theme="dark"] .hero {
  background: #16130e;
  border-bottom: none;
  box-shadow:
    inset 0 1px 0 rgba(200,164,90,0.8),
    inset 0 -1px 0 rgba(200,164,90,0.8),
    0 4px 20px rgba(0,0,0,0.5);
}

[data-theme="dark"] .hero::before {
  content: '';
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: rgba(200,164,90,0.18);
  pointer-events: none;
}

[data-theme="dark"] .hero::after {
  content: '◈';
  position: absolute;
  right: 12px;
  bottom: 5px;
  color: rgba(200,164,90,0.2);
  font-size: 0.9rem;
  pointer-events: none;
  line-height: 1;
}

[data-theme="dark"] .hero__copy {
  gap: 10px;
}

[data-theme="dark"] .hero__copy::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,164,90,0.6));
  flex-shrink: 0;
}

[data-theme="dark"] .hero__copy::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(200,164,90,0.6));
  flex-shrink: 0;
}

[data-theme="dark"] #hero-eyebrow.eyebrow {
  color: #e8d8a8;
  letter-spacing: 0.15em;
  text-shadow: 0 0 28px rgba(200,164,90,0.5), 0 1px 0 rgba(0,0,0,0.5);
}

[data-theme="dark"] #hero-title {
  color: rgba(200,164,90,0.5);
}

[data-theme="dark"] .hero .button--ghost {
  color: rgba(200,164,90,0.65);
  border-color: rgba(200,164,90,0.25);
  background: transparent;
}
[data-theme="dark"] .hero .button--ghost:hover {
  color: #c8a45a;
  border-color: rgba(200,164,90,0.55);
  background: rgba(200,164,90,0.08);
}
[data-theme="dark"] .hero .button--primary {
  background: rgba(200,164,90,0.15);
  border-color: rgba(200,164,90,0.4);
  color: #c8a45a;
}
[data-theme="dark"] .hero .button--primary:hover {
  background: rgba(200,164,90,0.25);
  border-color: rgba(200,164,90,0.65);
}

/* ── Wizard Shell（步骤导航）──────────────────────────────── */

.stepper-nav {
  display: flex;
  justify-content: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 8px;
}
.stepper-nav::-webkit-scrollbar { display: none; }

/* ── Step Button ───────────────────────────────────────────── */

.step-button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  white-space: nowrap;
  transition: all 140ms ease;
  flex-shrink: 0;
}

.step-button:hover {
  background: var(--surface-hover);
  color: var(--ink-2);
}

.step-button.is-active {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--accent);
}

[data-theme="dark"] .step-button { color: rgba(200,164,90,0.45); }
[data-theme="dark"] .step-button:hover { background: rgba(200,164,90,0.07); color: rgba(200,164,90,0.8); border-color: rgba(200,164,90,0.18); }
[data-theme="dark"] .step-button.is-active { background: rgba(200,164,90,0.12); border-color: rgba(200,164,90,0.38); color: #c8a45a; }

.step-button__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--muted);
  flex-shrink: 0;
  transition: all 140ms ease;
}

.step-button.is-active .step-button__count {
  background: var(--accent);
  color: white;
}

.step-button__label {
  font-size: 0.84rem;
  font-weight: 500;
  transition: all 140ms ease;
}

.step-button.is-active .step-button__label {
  font-weight: 600;
  color: var(--accent);
}

.step-button { position: relative; }

.step-button__hint { display: none; }

/* 窄屏顶栏防挤爆：1500px 以下非当前步骤只留数字圆点，1280px 以下隐藏运行状态 chips。
   否则步骤导航(704px)+CTA(151px)+右侧操作区(512px)在笔记本宽度下互相重叠 */
@media (max-width: 1500px) {
  .step-button:not(.is-active) .step-button__label { display: none; }
  .step-button { padding: 6px 8px; }
}
@media (max-width: 1280px) {
  .runtime-status { display: none; }
  #hero-eyebrow.eyebrow { font-size: 1.2rem; max-width: 12ch; }
}

.wizard-shell.is-compact .step-button__hint {
  display: block;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: white;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 20;
  box-shadow: var(--shadow-sm);
}

.wizard-shell.is-compact .step-button:hover .step-button__hint {
  opacity: 1;
}

/* ── Workspace & Panel ─────────────────────────────────────── */

.workspace {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.panel {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: fadeUpNoTransform 280ms ease both;
}

.panel--workflow,
.panel--projects,
.panel--bible,
.panel--library,
.panel--micro {
  grid-column: 1 / -1;
}

/* workflow 面板不加外框，直接融入页面背景 */
.panel--workflow,
.panel--library,
.panel--micro {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0;
  overflow: visible;
}

.panel--overview,
.panel--versions,
.panel--anchor,
.panel--scenes,
.panel--review,
.panel--experts {
  grid-column: span 6;
}

.panel[hidden] { display: none !important; }

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.panel__eyebrow,
.eyebrow,
.section-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel__header h2 {
  font-size: 1.15rem;
  color: var(--ink);
}

.panel--bible { padding: 18px; }
.panel--bible .panel__header { margin-bottom: 12px; gap: 10px; }

/* ── 按钮系统 ──────────────────────────────────────────────── */

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
  text-decoration: none;
}

.button:disabled, .button.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.button--primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}
.button--primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.button--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border-strong);
}
.button--ghost:hover {
  background: var(--surface-3);
  border-color: var(--border-accent);
  color: var(--ink);
}

.button--small {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
}

.button--tiny {
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 999px;
}

.button--danger {
  color: var(--critical);
  background: var(--critical-soft);
  border-color: rgba(192, 57, 43, 0.2);
}
.button--danger:hover {
  background: rgba(192, 57, 43, 0.18);
}

.button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
}

/* ── Tab 系统 ──────────────────────────────────────────────── */

.tab-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tab-button {
  appearance: none;
  padding: 0.4rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
}
.tab-button:hover {
  background: var(--surface-3);
  color: var(--ink-2);
}
.tab-button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
  font-weight: 600;
}

/* ── 表单系统 ──────────────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-grid--stacked { grid-template-columns: 1fr; }
.form-grid--ai { grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid--ai-connect { grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid--compact { gap: 10px; }

.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--paper);
  border: 1px solid rgba(40, 30, 15, 0.18);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 0.875rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  resize: vertical;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(40, 30, 15, 0.02);
}
.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: rgba(40, 30, 15, 0.28);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface-2);
}
.field textarea { min-height: 110px; line-height: 1.6; }
.field select { appearance: none; }

.field__hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.create-field { display: grid; gap: 6px; }
.create-field__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* ── Chip & Badge ──────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--border-accent); }
.chip--soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip--muted { background: transparent; color: var(--muted); border-color: transparent; font-size: 0.72rem; }
.chip--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.chip--info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* ── Tag & Tag Row ─────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.73rem;
  font-weight: 500;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* ── 卡片变体 ──────────────────────────────────────────────── */

.metric-card,
.summary-card,
.revision-card,
.list-card,
.issue-card,
.version-card,
.expert-output,
.scene-editor__card,
.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
}


.metric-card__label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}
.metric-card__value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-display);
}
.metric-card__value--zero {
  color: var(--muted);
  font-weight: 400;
}
.metric-card__detail,
.revision-card__meta,
.list-card__meta,
.issue__meta,
.scene-item__meta,
.expert-card__meta {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Project Card（亮色基础）────────────────────────────── */

.project-card {
  cursor: pointer;
  transition: all 180ms ease;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px;
}
.project-card::before { content: none; }
.project-card:hover {
  border-color: var(--border-accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.project-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3px;
}
.project-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.project-card__top > div > p {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}
.project-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* 继续创作 hover 才浮现，避免每张卡都有橙色按钮 */
.project-card__actions > .button--primary {
  opacity: 0.15;
  transition: opacity 180ms ease;
}
.project-card:hover .project-card__actions > .button--primary,
.project-card:focus-within .project-card__actions > .button--primary {
  opacity: 1;
}

/* ── Project Hero（最近一个项目的放大卡） ─────────────────── */
.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 32px;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.project-hero::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.project-hero__left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.project-hero__eyebrow {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  font-weight: 600;
}
.project-hero__title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
}
.project-hero__logline {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 4px 0 0;
}
.project-hero__placeholder { color: var(--muted); font-style: italic; }
.project-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.project-hero__right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.project-hero__metric { display: flex; flex-direction: column; gap: 2px; }
.project-hero__metric-num {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  line-height: 1;
}
.project-hero__metric-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.project-hero__progress {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.project-hero__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 240ms ease;
}
.project-hero__progress-label { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.project-hero .button--primary { margin-top: auto; align-self: flex-start; }
.project-card__delete {
  color: var(--muted);
  opacity: 0.55;
  transition: opacity 180ms ease, color 180ms ease;
}
.project-card:hover .project-card__delete {
  opacity: 1;
}
.project-card__delete:hover {
  color: var(--critical);
}
/* 删除按钮降权为 ⋯ 图标，hover 才完全显示，避免误点 */
.project-card__more {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 180ms, background 180ms, color 180ms, border-color 180ms;
}
.project-card:hover .project-card__more {
  opacity: 0.8;
}
.project-card__more:hover {
  opacity: 1;
  background: rgba(180, 60, 60, 0.08);
  border-color: rgba(180, 60, 60, 0.3);
  color: var(--critical);
}
.project-card__logline {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 10px;
}
.project-card .tag-row { margin-bottom: 10px; }
.project-card .summary-strip {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  gap: 5px;
}

.project-card__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── Project Card 暗色覆盖 ──────────────────────────────── */

[data-theme="dark"] .project-card {
  background: #221e15;
  border-color: rgba(200,164,90,0.32);
}
[data-theme="dark"] .project-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(200,164,90,0.75) 0%, rgba(200,164,90,0.08) 100%);
}
[data-theme="dark"] .project-card:hover {
  border-color: rgba(200,164,90,0.55);
  background: #1c1810;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,164,90,0.12);
}
[data-theme="dark"] .project-card h3 { color: #e0d8c8; letter-spacing: 0.01em; }
[data-theme="dark"] .project-card__top > div > p { color: #6a6055; }
[data-theme="dark"] .project-card__top .button { color: rgba(200,164,90,0.75); border-color: rgba(200,164,90,0.22); }
[data-theme="dark"] .project-card__top .button:hover { color: #c8a45a; border-color: rgba(200,164,90,0.5); background: rgba(200,164,90,0.08); }
[data-theme="dark"] .project-card__logline { color: #9a9080; }
.project-card__logline--empty { font-style: italic; opacity: 0.55; }
[data-theme="dark"] .project-card .tag { background: rgba(200,164,90,0.1); border-color: rgba(200,164,90,0.2); color: #b89858; font-size: 0.73rem; }
[data-theme="dark"] .project-card .summary-strip { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .project-card .chip--soft { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); color: #6a6258; font-size: 0.72rem; }
[data-theme="dark"] .project-card__plus { background: rgba(200,164,90,0.15); color: #c8a45a; }

.list-card {
  cursor: pointer;
  transition: all 120ms ease;
}
.list-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.list-card.is-active {
  border-color: var(--border-accent);
  background: var(--accent-soft);
}

.list-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* ── List Select ───────────────────────────────────────────── */

.list-select {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  cursor: pointer;
  transition: all 120ms ease;
}
.list-select:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.list-select.is-active {
  border-color: var(--border-accent);
  background: var(--accent-soft);
}
.list-select--static { cursor: default; }
.list-select--static:hover { border-color: var(--border); background: var(--surface-1); }

.ai-error-hint {
  font-size: 0.78rem;
  color: #c0392b;
  padding: 4px 0;
}
.scene-summary-hint {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── Summary card & 空状态 ─────────────────────────────────── */

.summary-card p, .empty-state p, .expert-output p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.875rem;
}

.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px 20px;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
}

.empty-state--compact { padding: 16px 14px; }

.empty-state__hint {
  margin-top: 6px !important;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.75;
}

/* ── Stack ─────────────────────────────────────────────────── */

.stack { display: grid; gap: 8px; }

/* ── Mini Copy ─────────────────────────────────────────────── */

.mini-copy {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Inline Actions ────────────────────────────────────────── */

.inline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Check List ────────────────────────────────────────────── */

.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
  cursor: pointer;
  padding: 2px 0;
}
.check-list__item input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.check-list__item span { flex: 1; }

/* ── Overview & Project Board ──────────────────────────────── */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project-board { display: grid; gap: 24px; }
.project-group { display: grid; gap: 12px; }
.project-group__head h3 { font-size: 0.82rem; color: var(--muted); font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.project-group__head p { margin: 3px 0 0; color: var(--muted-2); font-size: 0.78rem; }
.project-group__head--row { display: flex; align-items: center; justify-content: space-between; }

.project-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 160ms ease;
  flex-shrink: 0;
}
.project-create-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.project-create-btn .project-card__plus {
  width: 20px; height: 20px;
  font-size: 1rem;
  background: transparent;
  color: var(--accent);
  border: none;
  flex-shrink: 0;
}
.project-list__empty { color: #6a6258; font-size: 0.85rem; grid-column: 1 / -1; padding: 24px 0; }

.project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.project-list--wide { grid-template-columns: repeat(3, 1fr); }

/* 项目中心在手机上必须保持正常阅读顺序，不能让 hero 的双栏最小宽度把中文挤成竖排。 */
@media (max-width: 700px) {
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 10px;
  }
  .hero__copy {
    flex: 1 0 100%;
    padding: 10px 0 6px;
  }
  #hero-eyebrow.eyebrow {
    max-width: calc(100vw - 44px);
    font-size: 1rem;
  }
  .hero__side {
    order: 2;
    flex: 1 0 100%;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .hero__side::-webkit-scrollbar { display: none; }
  .hero__actions { flex-shrink: 0; }
  .stepper-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    border-top: 1px solid var(--border-soft);
    padding: 6px 0;
  }

  .panel--projects { padding: 14px 12px; }
  .project-group__head--row { align-items: flex-start; gap: 12px; }
  .project-create-btn { padding: 7px 11px; }
  .project-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 18px;
  }
  .project-hero__title { font-size: 1.8rem; }
  .project-hero__right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .project-hero__progress,
  .project-hero__progress-label { grid-column: 1 / -1; }
  .project-hero .button--primary { margin-top: 0; }
  .project-hero__right .project-card__actions { justify-content: flex-start !important; }
  .project-list,
  .project-list--wide { grid-template-columns: minmax(0, 1fr); }
  .project-card__actions > .button--primary { opacity: 1; }
}

.project-hub,
.version-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
}

.project-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 740px);
}

/* ── Overview & Workbench ─────────────────────────────────── */

.bible-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.choice-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scene-workbench--triple {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 270px;
  gap: 14px;
  align-items: start;
}

.relationship-workbench--dual {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* ── Relationship rail ─────────────────────────────────────── */

.rel-char-group { display: grid; gap: 4px; }
.rel-char-group + .rel-char-group { margin-top: 10px; }

.rel-char-group__name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
  margin-bottom: 2px;
}

.rel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.rel-item__arrow {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--muted-2);
}
.rel-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rel-item__body strong,
.rel-item__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Relationship editor ───────────────────────────────────── */

.rel-editor__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rel-editor__arrow {
  color: var(--muted);
  font-weight: 400;
}

.workbench-pane {
  display: grid;
  gap: 10px;
  align-content: start;
}

.workbench-scroll-list {
  display: grid;
  gap: 7px;
}

/* ── Workbench (generic) ───────────────────────────────────── */

.workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.workbench--structure { grid-template-columns: 400px minmax(0, 1fr); gap: 0; align-items: stretch; }
.workbench__side { display: grid; gap: 10px; align-content: start; }
.workbench__main { display: grid; gap: 12px; }

/* ── Genre Workbench ───────────────────────────────────────── */

.genre-workbench { display: grid; gap: 14px; }
.genre-workbench__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* ── Lock Workbench ────────────────────────────────────────── */

.lock-workbench { display: grid; gap: 14px; }
.lock-workbench__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.lock-workbench__lead { grid-column: 1 / -1; }

/* ── Story Core Layout (故事核心 + 海报) ───────────────────── */

.story-core-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 20px;
  align-items: start;
}

.story-core-fields { display: grid; gap: 0; }

.poster-upload-area {
  position: relative;
  width: 160px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  border: 1.5px dashed var(--border-strong);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster-upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.poster-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.poster-placeholder__icon {
  font-size: 1.8rem;
  color: var(--muted);
  line-height: 1;
}
.poster-placeholder__label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.poster-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(28, 22, 16, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms;
}
.poster-upload-area:hover .poster-remove { opacity: 1; }

/* ── Creation Origin Summary Card ─────────────────────────── */

.creation-origin-card {
  border-left: 3px solid var(--cf-gold, #c8a030);
}

.creation-origin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.creation-origin-item--wide {
  grid-column: 1 / -1;
}

.creation-origin-item__label {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.creation-origin-item__value {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

.chip__sub {
  opacity: 0.65;
  font-size: 0.85em;
  margin-left: 2px;
}

/* ── Structure Page (新版：幕行布局) ───────────────────────── */

.struct-workbench {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 顶部工具栏 */
.struct-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.struct-topbar__left { display: flex; align-items: center; gap: 10px; }
.struct-topbar__right { display: flex; align-items: center; gap: 8px; }
.struct-topbar__meta { font-size: 0.82rem; color: var(--muted); }
.struct-topbar__template-label {
  font-size: 0.7rem;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.struct-topbar__template-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  background: rgba(180, 110, 50, 0.08);
  border: 1px solid rgba(180, 140, 90, 0.35);
  border-radius: 16px;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.struct-topbar__template-chip:hover { background: rgba(180, 110, 50, 0.16); }
.struct-topbar__template-name { font-weight: 600; }
.struct-topbar__template-caret { font-size: 0.7rem; color: var(--muted); }
.struct-topbar__rhythm {
  font-size: 0.72rem;
  color: var(--muted-2);
  padding: 2px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
}

/* 故事核心折叠栏 */
.story-core-bar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  flex-shrink: 0;
}
.story-core-bar summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  user-select: none;
}
.story-core-bar summary::-webkit-details-marker { display: none; }
.sc-bar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sc-chevron {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
  transition: transform 0.2s;
}
.story-core-bar[open] .sc-chevron { transform: rotate(180deg); }
.sc-chips { display: flex; gap: 6px; flex: 1; overflow: hidden; }
.sc-chip {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-chips__empty { font-size: 0.78rem; color: var(--muted); }
.story-core-expanded {
  padding: 12px 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sc-field--wide { grid-column: span 2; }

/* 幕行区域 */
.struct-acts-area {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 幕行 */
.struct-act-row {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--act-border, var(--border));
  background: var(--surface-1);
}

/* 左侧标签 */
.struct-act-row__label {
  width: 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-right: 1px solid var(--act-border, var(--border));
  text-align: center;
  background: var(--act-bg, var(--surface-2));
  flex-shrink: 0;
}
.struct-act-row__num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--act-num-color, var(--accent));
}
.struct-act-row__range {
  font-size: 0.62rem;
  color: var(--muted-2);
  opacity: 0.55;
  margin-top: 4px;
}
.struct-act-row__title {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 6px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  outline: none;
  text-align: center;
  font-family: var(--font-ui);
  padding: 1px 2px;
  cursor: text;
  text-overflow: ellipsis;
}
.struct-act-row__title:focus { border-bottom-color: var(--act-border, var(--border-strong)); }
.struct-act-row__title::placeholder { color: var(--muted-2); font-weight: 400; }

/* 节点区域（横向） */
.struct-act-row__nodes {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  background: var(--act-bg, transparent);
}
.struct-act-row__nodes::-webkit-scrollbar { height: 4px; }
.struct-act-row__nodes::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.struct-act-row__empty {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  align-self: center;
}

/* 节点卡片 */
.struct-node-card {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px;
  cursor: pointer;
  transition: box-shadow 120ms, border-color 120ms, background 120ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  flex-shrink: 0;
}
.struct-node-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); background: var(--surface-2); }
.struct-node-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--surface-2); }
.struct-node-card.is-required { border-left: 2.5px solid var(--accent); }
.struct-node-card.is-empty { opacity: 0.6; border-style: dashed; }
.struct-node-card.is-empty:hover { opacity: 1; }

.struct-node-card__seq {
  position: absolute;
  top: 7px; right: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-2);
}
.struct-node-card.is-required .struct-node-card__seq { color: var(--accent); opacity: 0.6; }

.struct-node-card__type {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.struct-node-card__title {
  padding-right: 18px;
}
.struct-node-card__title-input {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-1);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-ui);
  padding: 0;
  cursor: text;
}
.struct-node-card__title-input::placeholder { color: var(--muted-2); font-weight: 400; }
.struct-node-card__preview {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  pointer-events: none;
}
.struct-node-card__status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 10px;
  align-self: flex-start;
  margin-top: auto;
  pointer-events: none;
}
.struct-node-card__status--filled { background: rgba(46,125,82,0.10); color: rgba(46,125,82,0.80); }
.struct-node-card__status--empty { background: var(--surface-3); color: var(--muted); }
.struct-node-card__status--key { background: var(--accent-soft); color: var(--accent); }
.struct-node-card__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

[data-theme="dark"] .struct-node-card { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .struct-node-card:hover,
[data-theme="dark"] .struct-node-card.is-active { background: rgba(255,255,255,0.06); }

/* 节点编辑抽屉 */
.struct-node-drawer {
  border-top: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  position: relative;
  margin-top: 4px;
}
.struct-node-drawer__close {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
}
.struct-node-drawer__close:hover { background: var(--surface-3); color: var(--ink-1); }
.struct-node-drawer__info {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.struct-node-drawer__info-type {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.struct-node-drawer__info-title {
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink-1);
}
.struct-node-drawer__hint {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: 7px 10px;
  font-size: 0.8rem;
  color: var(--ink-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.55;
  margin-top: 4px;
}
.struct-node-drawer__edit {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.struct-node-drawer__textarea {
  flex: 1;
  min-height: 90px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink-1);
  line-height: 1.6;
  resize: none;
  outline: none;
  transition: border-color 120ms;
}
.struct-node-drawer__textarea:focus { border-color: var(--border-strong); }
.struct-node-drawer__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Structure Page Columns (旧版保留供兼容) ────────────────── */

.structure-col { display: grid; gap: 12px; align-content: start; }
.structure-col--left {
  border-right: 1px solid var(--border);
  padding-right: 16px;
  overflow-y: auto;
}
.structure-col--right {
  padding-left: 16px;
  overflow-y: auto;
}

/* ── Story Core Body (结构页左列内) ────────────────────────── */

.structure-core-body {
  display: grid;
  grid-template-columns: 1fr 108px;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
.structure-core-fields { display: grid; gap: 0; }
.structure-core-body .poster-upload-area {
  width: 100%;
}

/* ── Structure Arc ──────────────────────────────────────────── */

.structure-arc { margin-top: 10px; }
.structure-arc__track {
  display: flex;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: 3px;
  background: var(--surface-3);
  padding: 3px;
  border: 1px solid var(--border);
}
.structure-arc__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid transparent;
  min-width: 32px;
  overflow: hidden;
  transition: opacity 150ms;
  cursor: default;
}
.structure-arc__seg:hover { opacity: 0.72; }
.structure-arc__seg-label {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.structure-arc__labels {
  display: flex;
  margin-top: 4px;
  align-items: flex-start;
}
.structure-arc__range {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 32px;
  padding-left: 2px;
}
.structure-arc__range-end {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 4px;
}
.structure-arc-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 8px 0 0;
  font-style: italic;
}

/* ── Structure Acts ────────────────────────────────────────── */

.structure-acts-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 6px;
}

.structure-acts {
  display: grid;
  gap: 10px;
}

/* ── Act Block (幕 + 嵌入节点) ─────────────────────────────── */

.act-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-1);
  transition: box-shadow 150ms;
}
.act-block:hover { box-shadow: var(--shadow-sm); }

.act-block__head {
  padding: 11px 14px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.act-block__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.act-block__num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.act-block__range {
  font-size: 0.78rem;
  color: var(--muted);
}
.act-block__fields { display: grid; gap: 5px; }

.act-block__title-input {
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 2px 0;
  outline: none;
  width: 100%;
  transition: border-color 120ms;
}
.act-block__title-input:focus { border-bottom-color: var(--accent); }
.act-block__title-input::placeholder { color: var(--muted-2); font-weight: 400; }

.act-block__purpose-input {
  font-size: 0.8rem;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 2px 0;
  outline: none;
  width: 100%;
  transition: border-color 120ms;
}
.act-block__purpose-input:focus { border-bottom-color: var(--border-strong); }
.act-block__purpose-input::placeholder { color: var(--muted-2); }

.act-block__nodes { padding: 0; }
.act-block__empty { padding: 10px 14px; font-size: 0.8rem; color: var(--muted); margin: 0; font-style: italic; }

/* ── Node Rail (横向滑动节点轨道) ──────────────────────── */

.node-rail-wrap {
  overflow-x: auto;
  padding: 12px 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.node-rail-wrap::-webkit-scrollbar { height: 5px; }
.node-rail-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.node-rail {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
}

.node-arrow {
  display: flex;
  align-items: center;
  color: var(--muted-2);
  font-size: 1rem;
  flex-shrink: 0;
  padding: 0 4px;
  margin-top: 20px;
}

/* ── Node Card ──────────────────────────────────────────── */

.node-card {
  width: 350px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: box-shadow 120ms, border-color 120ms;
}
.node-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }

.node-card.is-required { border-left: 2.5px solid var(--accent); }

.node-card.is-empty {
  background: var(--surface-1);
  border-style: dashed;
  opacity: 0.7;
}
.node-card.is-empty:hover { opacity: 1; }

.node-seq-badge {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-2);
}
.node-card.is-required .node-seq-badge { color: var(--accent); opacity: 0.55; }

.node-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-right: 22px;
}
.node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
  margin-top: 5px;
}
.node-dot.req { background: var(--accent); }
.node-dot.filled { background: var(--muted); }


[data-theme="dark"] .node-card { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .node-card.is-empty { background: transparent; }

/* ── Act Node Item ──────────────────────────────────────────── */

.act-node-item { display: grid; gap: 5px; }
.act-node-item__head { display: flex; align-items: center; gap: 6px; }

.act-node-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}
.act-node-item__dot.is-required { background: var(--accent); }

.act-node-item__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  flex: 1;
  min-width: 0;
}
.act-node-item__title-input {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  outline: none;
}
.act-node-item__title-input:focus {
  color: var(--ink-1);
}
.act-node-item__title-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.act-node-item__type-hint {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.act-node-item__req {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  padding: 1px 5px;
  border: 1px solid var(--border-accent);
  border-radius: 3px;
  background: var(--accent-soft);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.act-node-item__badge { flex-shrink: 0; }

.act-node-item__note {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8rem;
  font-family: var(--font-ui);
  color: var(--ink-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  resize: none;
  overflow: hidden;
  outline: none;
  line-height: 1.55;
  transition: border-color 120ms;
}
.act-node-item__note:focus { border-color: var(--border-strong); }
[data-theme="dark"] .act-node-item__note { background: rgba(255,255,255,0.04); }

/* ── Plot Board ────────────────────────────────────────────── */

.plot-board,
.plot-board-lanes {
  display: grid;
  gap: 12px;
}

.plot-board-panel { display: grid; gap: 12px; }

.plot-lane {
  border: none;
  border-radius: var(--radius);
  background: var(--surface-3);
  padding: 12px;
  min-height: 180px;
}

.plot-lane__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.plot-card-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 130ms ease;
  display: grid;
  gap: 4px;
}
.plot-card-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-1);
}
.plot-card-chip.is-selected {
  border-color: var(--border-accent);
  background: var(--accent-soft);
}
.plot-card-chip.is-mainline { border-left: 3px solid var(--accent); }
.plot-card-chip.is-enhancement { border-left: 3px solid var(--info); }
.plot-card-chip.is-alternate { border-left: 3px solid var(--muted-2); }

.dragging { opacity: 0.5; cursor: grabbing; }
.drag-over { border-color: var(--border-accent) !important; background: var(--accent-soft) !important; }

/* ── Plot Workbench & Studio ───────────────────────────────── */

.plot-workbench--triple {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}
.plot-workbench--triple.plot-workbench--studio { grid-template-columns: 220px minmax(0, 1fr) 260px; }

.plot-workbench__head-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.plot-toolbar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.plot-toolbar__row--scenario { margin-bottom: 10px; }

/* ── Plot Notes (v2) ───────────────────────────────────────── */

.plot-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 130ms ease;
  text-align: left;
  width: 100%;
}
.plot-note:hover { border-color: var(--border-strong); }
.plot-note.is-selected,
.plot-note--v2.is-selected {
  border-color: var(--border-accent);
  background: var(--accent-soft);
}

.plot-note__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.plot-note__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.plot-note__meta-group { display: flex; align-items: center; gap: 5px; }
.plot-note__status { font-size: 0.75rem; color: var(--muted); }
.plot-note__type {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── Plot Lane Strips & Tracks ─────────────────────────────── */

.plot-lane-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.plot-lane-strip__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 4px;
}
.plot-lane-strip__cards { display: grid; gap: 5px; }

.plot-lane-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plot-lane-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

/* Color slots for plot lanes */
.plot-lane-dot--red, .plot-lane-strip--red, .plot-lane-tag--red, .plot-track--red { --lane-color: #c0392b; }
.plot-lane-dot--orange, .plot-lane-strip--orange, .plot-lane-tag--orange, .plot-track--orange { --lane-color: #ba5616; }
.plot-lane-dot--yellow, .plot-lane-strip--yellow, .plot-lane-tag--yellow, .plot-track--yellow { --lane-color: #b45309; }
.plot-lane-dot--green, .plot-lane-strip--green, .plot-lane-tag--green, .plot-track--green { --lane-color: #2e7d52; }
.plot-lane-dot--blue, .plot-lane-strip--blue, .plot-lane-tag--blue, .plot-track--blue { --lane-color: #1e5fa8; }
.plot-lane-dot--purple, .plot-lane-strip--purple, .plot-lane-tag--purple, .plot-track--purple { --lane-color: #6d4c9e; }
.plot-lane-dot--gray, .plot-lane-strip--gray, .plot-lane-tag--gray, .plot-track--gray { --lane-color: #8a7560; }

.plot-lane-dot { background: var(--lane-color, var(--muted-2)); }
.plot-lane-tag { border-left: 3px solid var(--lane-color, var(--muted-2)); }
.plot-lane-strip { border-left: 3px solid var(--lane-color, var(--muted-2)); }
.plot-track { border-left: 3px solid var(--lane-color, var(--muted-2)); }

/* ── Plot Track List (Rehearsal Board) ─────────────────────── */

.plot-track-list { display: grid; gap: 6px; }
.plot-track {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-1);
}
.plot-track__label {
  padding: 8px 10px;
  background: var(--surface-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.plot-track__acts {
  display: flex;
  gap: 0;
}
.plot-track__cell {
  flex: 1;
  padding: 8px 6px;
  border-right: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plot-track__cell:last-child { border-right: none; }

.plot-rehearsal-board { display: grid; gap: 10px; }
.plot-rehearsal-head {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0;
}
.plot-rehearsal-head__corner {
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.plot-rehearsal-head__acts {
  display: flex;
}

/* ── Plot Stat & Nav ───────────────────────────────────────── */

.plot-stat-list { display: grid; gap: 8px; }
.plot-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--ink-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.plot-stat-row:last-child { border-bottom: none; }

.plot-nav-list { display: grid; gap: 6px; }

/* ── Plot Act Column (Structure Board) ─────────────────────── */

.plot-structure-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.plot-act-column {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: 12px;
  min-height: 160px;
}
.plot-act-column__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.plot-act-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

/* ── Plot Editor Drawer ────────────────────────────────────── */

.plot-editor-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.plot-editor-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
.plot-editor-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 16, 0.18);
  backdrop-filter: none;
}
.plot-editor-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(860px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Plot Editor v2 — Linear Issue 风格 ─────────────────────── */
.plot-edv2 { padding: 0; }
.plot-edv2__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}
.plot-edv2__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}
.plot-edv2__bc-act { color: var(--ink-2); font-weight: 600; }
.plot-edv2__bc-sep { color: var(--muted-2); }
.plot-edv2__bc-node { color: var(--muted); }
.plot-edv2__close {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.plot-edv2__close:hover { background: var(--surface-3); color: var(--ink-1); border-color: var(--border-strong); }

.plot-edv2__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.plot-edv2__main {
  padding: 32px 36px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plot-edv2__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink-1);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 4px 0 12px;
  border-bottom: 1px solid transparent;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: border-color 140ms;
}
.plot-edv2__title:focus { border-bottom-color: var(--accent); }
.plot-edv2__title::placeholder { color: var(--muted-2); font-style: italic; font-weight: 500; }

.plot-edv2__field { display: flex; flex-direction: column; gap: 6px; }
.plot-edv2__field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.plot-edv2__input {
  width: 100%;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-1);
  line-height: 1.55;
  resize: vertical;
  transition: border-color 140ms, background 140ms;
}
.plot-edv2__input:hover { background: var(--surface-hover); }
.plot-edv2__input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.plot-edv2__input::placeholder { color: var(--muted-2); }

.plot-edv2__side {
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 28px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plot-edv2__prop { display: flex; flex-direction: column; gap: 6px; }
.plot-edv2__prop-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plot-edv2__prop-count {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0;
  font-weight: 600;
}
.plot-edv2__prop-value {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plot-edv2__lane-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lane-color, var(--muted-2));
  flex-shrink: 0;
}
.plot-edv2__select {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-1);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
.plot-edv2__select:hover { background-color: var(--surface-hover); border-color: var(--border); }
.plot-edv2__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.plot-edv2__scenes { display: flex; flex-direction: column; gap: 4px; }
.plot-edv2__scene-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--paper);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--ink-1);
  text-align: left;
  width: 100%;
  transition: background 120ms, border-color 120ms;
}
.plot-edv2__scene-row:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.plot-edv2__scene-seq {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.plot-edv2__scene-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-edv2__scene-arrow { color: var(--muted); font-size: 0.78rem; transition: transform 140ms, color 140ms; }
.plot-edv2__scene-row:hover .plot-edv2__scene-arrow { color: var(--accent); transform: translateX(2px); }
.plot-edv2__scene-stub,
.plot-edv2__scene-add {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 140ms;
}
.plot-edv2__scene-stub:hover,
.plot-edv2__scene-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.plot-edv2__chars { display: flex; flex-direction: column; gap: 4px; }
.plot-edv2__empty { font-size: 0.78rem; color: var(--muted-2); font-style: italic; }
.plot-edv2__char {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink-2);
  transition: background 120ms;
}
.plot-edv2__char:hover { background: var(--surface-hover); }
.plot-edv2__char.is-active { color: var(--ink-1); font-weight: 500; }
.plot-edv2__char input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

.plot-edv2__group {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.plot-edv2__group > summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.plot-edv2__group > summary::-webkit-details-marker { display: none; }
.plot-edv2__group > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 140ms;
}
.plot-edv2__group[open] > summary::before { transform: rotate(90deg); }
.plot-edv2__group .element-group { margin-top: 12px; }
.plot-edv2__group .element-group__label { font-size: 0.72rem; color: var(--muted); margin: 0 0 6px; }

.plot-edv2__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
  gap: 12px;
}
.plot-edv2__footer-left, .plot-edv2__footer-right { display: flex; gap: 8px; align-items: center; }
.plot-edv2__danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.plot-edv2__danger:hover {
  color: var(--critical);
  border-color: var(--critical);
  background: var(--critical-soft);
}
.plot-editor-drawer__body {
  padding: 20px;
  flex: 1;
  display: grid;
  gap: 14px;
  align-content: start;
}

.plot-drop-hint {
  border: 2px dashed var(--border-accent);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--accent-soft);
}

/* ── Plot Inspector ────────────────────────────────────────── */

.plot-inspector__summary { font-size: 0.875rem; color: var(--muted); line-height: 1.65; }
.plot-inspector__lead { background: var(--surface-1); }
.plot-inspector__list { display: grid; gap: 8px; }

/* ── Plot Rail & Library ───────────────────────────────────── */

.plot-rail-card-list,
.plot-library-list { display: grid; gap: 7px; }

.plot-library-card { cursor: pointer; transition: all 120ms ease; }
.plot-library-card:hover { border-color: var(--border-strong); }

.plot-nav-card { cursor: pointer; transition: all 120ms ease; }
.plot-nav-card:hover { border-color: var(--border-strong); }

.plot-stat-card { background: var(--surface-1); }

.plot-workbench__toolbar { background: var(--surface-3); border: 1px solid var(--border); }

/* ── Plot Node Block ───────────────────────────────────────── */

.plot-node-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: 12px;
}
.plot-node-block__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.plot-node-stack { display: grid; gap: 8px; }
.plot-node-lanes { display: grid; gap: 6px; margin-top: 8px; }

/* ── Plot Grid Canvas (pgrid) ──────────────────────────────── */

.pgrid-workbench {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  position: relative;
  padding-bottom: 280px;
}

/* Canvas */
.pgrid-canvas-wrap {
  grid-column: 1;
  grid-row: 1;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

/* Toolbar */
.pgrid-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 12;
}
.pgrid-toolbar-info { font-size: 0.78rem; color: var(--muted); }
.pgrid-toolbar-sel { font-size: 0.78rem; color: var(--accent); font-weight: 600; }

/* 决议：矩阵超 viewport 时横向滚动 */
.pgrid-scroll { overflow-x: auto; max-width: 100%; }
/* Inner table */
.pgrid-inner {
  display: table;
  border-collapse: collapse;
  min-width: 100%;
}

/* Header rows */
.pgrid-hrow {
  display: table-row;
}
/* 顶部表头不再 sticky — 与卡片一起滚动，避免遮挡 */
.pgrid-hrow--acts .pgrid-hcell,
.pgrid-hrow--acts .pgrid-add-col-corner {
  background: var(--surface-3);
}
.pgrid-hrow--acts .pgrid-corner {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface-3);
}
.pgrid-hrow--nodes .pgrid-hcell,
.pgrid-hrow--nodes .pgrid-add-col-head {
  background: var(--surface-2);
}
.pgrid-hrow--nodes .pgrid-corner {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface-2);
}

.pgrid-corner {
  display: table-cell;
  width: 88px;
  min-width: 88px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
  position: sticky;
  left: 0;
  z-index: 9;
}

/* Act header cells — flex-like spanning via explicit width */
.pgrid-hcell {
  display: table-cell;
  width: 200px;
  min-width: 200px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.pgrid-hcell--act {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-2);
  height: 32px;
  border-right: 1px solid transparent;
}
/* 决议 5：act-head 是每幕第一格，act-fill 是后续填充格；同幕内格子之间不画竖线，让"幕表头跨多列"的视觉成立 */
.pgrid-hcell--act-head { padding-left: 14px; }
.pgrid-hcell--act-fill { padding: 0; }
.pgrid-act-title { margin-right: 8px; }
.pgrid-hcell--act-end {
  border-right: 2px solid var(--border-strong);
}
.pgrid-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--muted);
  background: var(--surface-1);
}
.pgrid-hcell--node {
  font-size: 0.79rem;
  color: var(--ink-2);
  text-align: center;
  height: 32px;
  border-right: 1px solid var(--border-soft);
  position: relative;
}
.pgrid-node-seq {
  font-style: italic;
  color: var(--muted);
  margin-right: 4px;
  font-size: 0.74rem;
}
.pgrid-del-col {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: rgba(192, 57, 43, 0.1);
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: #c0392b;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pgrid-hcell--node:hover .pgrid-del-col { display: flex; }
.pgrid-hcell--node:hover { background: var(--surface-3) !important; }

/* Add column */
.pgrid-add-col-corner,
.pgrid-add-col-head,
.pgrid-add-col-data {
  display: table-cell;
  width: 44px;
  min-width: 44px;
}
.pgrid-add-col-corner { border-bottom: 1px solid var(--border); }
.pgrid-add-col-head {
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
  padding: 0 6px;
}
.pgrid-add-col-btn {
  width: 26px;
  height: 26px;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pgrid-add-col-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Data rows */
.pgrid-row {
  display: table-row;
}
.pgrid-row:last-child .pgrid-cell,
.pgrid-row:last-child .pgrid-track-label,
.pgrid-row:last-child .pgrid-add-col-data { border-bottom: none; }

/* Track label cell — 横排两行：名字 / X 卡 */
.pgrid-track-label {
  display: table-cell;
  width: 96px;
  min-width: 96px;
  padding: 12px 14px;
  vertical-align: middle;
  text-align: left;
  background: var(--surface-3);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  left: 0;
  z-index: 6;
}
.pgrid-track-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 6px 2px 0;
  background: var(--lane-color, var(--muted-2));
  vertical-align: middle;
}
.pgrid-track-name {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-1);
  writing-mode: horizontal-tb;
  letter-spacing: 0;
  line-height: 1.2;
}
.pgrid-track-count {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  writing-mode: horizontal-tb;
  margin-top: 4px;
}

/* Grid cells */
.pgrid-cell {
  display: table-cell;
  width: 200px;
  min-width: 200px;
  padding: 6px;
  vertical-align: top;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s;
}
/* 所有 lane 行高度统一为正常卡片高 */
.pgrid-row .pgrid-cell,
.pgrid-row .pgrid-track-label { height: 170px; }
.pgrid-cell--act-end { border-right: 2px solid var(--border-strong); }
.pgrid-cell.drag-over { background: var(--accent-soft) !important; border-color: var(--border-accent) !important; }

/* Row tints（语义色名已在 ensurePlotBoardModel 迁移为颜色名，这里只保留一套） */
.pgrid-row--orange .pgrid-cell    { background: rgba(186,86,22,0.05); }
.pgrid-row--blue .pgrid-cell      { background: rgba(30,95,168,0.05); }
.pgrid-row--green .pgrid-cell     { background: rgba(46,125,82,0.05); }
.pgrid-row--purple .pgrid-cell    { background: rgba(109,76,158,0.05); }
.pgrid-row--gray .pgrid-cell      { background: transparent; }
.pgrid-row--red .pgrid-cell       { background: rgba(192,57,43,0.05); }
.pgrid-row--yellow .pgrid-cell    { background: rgba(180,83,9,0.05); }

/* 轨道左侧色标条 */
.pgrid-row--orange .pgrid-track-label { border-left: 3px solid #ba5616; }
.pgrid-row--blue .pgrid-track-label   { border-left: 3px solid #1e5fa8; }
.pgrid-row--green .pgrid-track-label  { border-left: 3px solid #2e7d52; }
.pgrid-row--purple .pgrid-track-label { border-left: 3px solid #6d4c9e; }

/* Add stub button inside empty cell */
.pgrid-add-stub {
  width: 32px;
  height: 32px;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.15s;
  margin: auto;
}
.pgrid-add-stub:hover { border-color: var(--accent); color: var(--accent); opacity: 1; background: var(--accent-soft); }
/* 空格子噪声降级：默认几乎不可见，hover 整个 cell 才浮现 + 按钮 */
.pgrid-cell .pgrid-add-stub { opacity: 0.18; transition: opacity 180ms ease; }
.pgrid-cell:hover .pgrid-add-stub { opacity: 0.85; }
/* 完全没卡片的整列：默认压窄成 80px，让有内容的列显得更紧凑 */
.pgrid-cell.pgrid-col--empty,
.pgrid-hcell.pgrid-col--empty {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  transition: max-width 220ms ease, width 220ms ease;
}
.pgrid-hcell.pgrid-col--empty .pgrid-node-title {
  opacity: 0.5;
  font-size: 0.7rem;
}
.pgrid-cell.pgrid-col--empty:hover,
.pgrid-hcell.pgrid-col--empty:hover {
  max-width: 200px;
  width: 200px;
}

/* Plot cards on grid */
.pgrid-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px 10px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  margin-bottom: 6px;
  /* 即使没内容也保持最小尺寸，与其他卡片对齐 */
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pgrid-card:last-child { margin-bottom: 0; }
.pgrid-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pgrid-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--lane-color, var(--muted-2));
  opacity: 0;
  transition: opacity 0.15s;
}
.pgrid-card:hover::before,
.pgrid-card.is-active::before { opacity: 1; }
.pgrid-card.is-active {
  border-color: var(--border-accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft), var(--shadow-sm);
}
.pgrid-card__quick {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs, 4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.pgrid-card:hover .pgrid-card__quick,
.pgrid-card.is-active .pgrid-card__quick {
  opacity: 1;
  pointer-events: auto;
}
.pgrid-card__qbtn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: 0.72rem;
  padding: 3px 4px;
  border-radius: var(--radius-xs, 4px);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.pgrid-card__qbtn:hover { border-color: var(--border-accent); color: var(--accent); }
.pgrid-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 4px;
}
.pgrid-card__lane {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.pgrid-card__status {
  font-size: 0.72rem;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.pgs-draft    { color: var(--muted); }
.pgs-explore  { color: #1e5fa8; }
.pgs-review   { color: #c97a1e; }
.pgs-locked   { color: #2e7d52; background: rgba(46,125,82,0.08); }
.pgs-discard  { color: #c0392b; }
.pgrid-card__title { font-size: 0.86rem; font-weight: 600; color: var(--ink-1); line-height: 1.3; margin-bottom: 4px; }
.pgrid-card__summary {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgrid-card__change {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgrid-card__change-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-bottom: 2px;
}

/* Color slot lane variables for cards */
.pgrid-card--orange { --lane-color: #ba5616; }
.pgrid-card--blue   { --lane-color: #1e5fa8; }
.pgrid-card--green  { --lane-color: #2e7d52; }
.pgrid-card--purple { --lane-color: #6d4c9e; }
.pgrid-card--red    { --lane-color: #c0392b; }
.pgrid-card--yellow { --lane-color: #b45309; }
.pgrid-card--gray   { --lane-color: #8a7560; }

/* Track dot color slots */
.pgrid-track-dot--orange    { --lane-color: #ba5616; }
.pgrid-track-dot--blue      { --lane-color: #1e5fa8; }
.pgrid-track-dot--green     { --lane-color: #2e7d52; }
.pgrid-track-dot--purple    { --lane-color: #6d4c9e; }
.pgrid-track-dot--red       { --lane-color: #c0392b; }
.pgrid-track-dot--yellow    { --lane-color: #b45309; }
.pgrid-track-dot--gray      { --lane-color: #8a7560; }

/* Empty state */
.pgrid-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Library panel */
.pgrid-library {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 270px;
  border-top: 1px solid var(--border-strong);
  background: var(--surface-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}
.pgrid-lib-unplaced-hint {
  font-size: 0.74rem;
  color: var(--accent);
  margin-right: auto;
  margin-left: 12px;
}
.pgrid-lib-body--row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
}
.pgrid-lib-body--row .pgrid-card {
  flex: 0 0 200px;
  width: 200px;
  margin-bottom: 0;
}

/* ── 废纸篓 ─────────────────────────────────────────────── */
.pgrid-lib-trash-toggle {
  margin-left: auto;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.pgrid-lib-trash-toggle:hover {
  background: var(--surface-hover);
  color: var(--ink-1);
  border-color: var(--border-strong);
}
.pgrid-lib-trash-toggle.is-active {
  background: var(--critical-soft);
  color: var(--critical);
  border-color: var(--critical);
}
.pgrid-lib-trash-count {
  background: var(--critical);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}
.pgrid-trash-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 0.86rem;
  font-style: italic;
}
.pgrid-card--trashed {
  opacity: 0.7;
  border-style: dashed;
}
.pgrid-card--trashed:hover { opacity: 1; }
.pgrid-card--trashed .pgrid-card__title { text-decoration: line-through; color: var(--muted); }
.pgrid-trash-actions {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  gap: 4px;
  border-top: 1px dashed var(--border-soft);
}
.pgrid-trash-restore,
.pgrid-trash-purge {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 0.72rem;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-2);
  transition: all 120ms;
}
.pgrid-trash-restore:hover {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-soft);
}
.pgrid-trash-purge:hover {
  color: var(--critical);
  border-color: var(--critical);
  background: var(--critical-soft);
}
.pgrid-lib-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pgrid-lib-title { font-weight: 600; font-size: 0.88rem; color: var(--ink-1); }
.pgrid-lib-body { overflow-y: auto; flex: 1; padding: 8px 0 16px; }
.pgrid-lib-group { padding: 8px 12px 4px; }
.pgrid-lib-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 6px;
  cursor: pointer;
}
.pgrid-lib-ct { margin-left: auto; font-variant-numeric: tabular-nums; }
.pgrid-lib-group--unplaced .pgrid-lib-group-head { color: var(--accent); }
.pgrid-lib-ct--accent { color: var(--accent); }

.pgrid-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px 7px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  cursor: grab;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.12s;
}
.pgrid-mini::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lane-color, var(--muted-2));
}
.pgrid-mini--orange { --lane-color: #ba5616; }
.pgrid-mini--blue   { --lane-color: #1e5fa8; }
.pgrid-mini--green  { --lane-color: #2e7d52; }
.pgrid-mini--purple { --lane-color: #6d4c9e; }
.pgrid-mini--red    { --lane-color: #c0392b; }
.pgrid-mini--yellow { --lane-color: #b45309; }
.pgrid-mini--gray   { --lane-color: #8a7560; }
.pgrid-mini:hover { border-color: var(--border-strong); transform: translateX(-2px); }
.pgrid-mini.is-active { border-color: var(--border-accent); background: var(--accent-soft); }
.pgrid-mini-title { font-size: 0.85rem; color: var(--ink-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgrid-mini-meta { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
.pgrid-mini-summary {
  font-size: 0.74rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom inspector bar */
.pgrid-inspector-bar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.pgrid-inspector-bar__info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  min-width: 0;
}
.pgrid-inspector-bar__info strong { color: var(--ink-1); font-weight: 600; flex-shrink: 0; }
.pgrid-inspector-bar__info span { color: var(--muted); white-space: nowrap; }
.pgrid-inspector-bar__summary {
  color: var(--ink-2) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
}
.pgrid-inspector-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pgrid-inspector-bar__chars { font-size: 0.76rem; color: var(--muted); }

/* ── CF Node Card (creation flow) ──────────────────────────── */

.cf-node-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 9px 11px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cf-node-card:hover { border-color: var(--border-strong); }
.cf-node-card.is-required { border-left: 3px solid var(--accent); }
.cf-node-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* ── Concept Option ────────────────────────────────────────── */

.concept-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.concept-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: 14px;
  cursor: pointer;
  transition: all 140ms ease;
}
.concept-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.concept-option.is-selected {
  border-color: var(--border-accent);
  background: var(--accent-soft);
}
.concept-option__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.concept-option__body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Create Wizard ─────────────────────────────────────────── */

.create-wizard__stage { display: grid; gap: 14px; }
.create-wizard__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.create-wizard__choices--providers { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ── Setup Board ───────────────────────────────────────────── */

.setup-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.setup-column {
  border: none;
  border-radius: var(--radius);
  background: var(--surface-3);
  padding: 12px;
}
.setup-column[data-status="open"] { border-top: 3px solid var(--warning); }
.setup-column[data-status="partial"] { border-top: 3px solid var(--info); }
.setup-column[data-status="closed"] { border-top: 3px solid var(--success); }

.setup-column__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.setup-column__body { display: grid; gap: 8px; }
.setup-column__empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.82rem;
}

/* ── Dialog ────────────────────────────────────────────────── */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 16, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 580px;
  width: calc(100% - 28px);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  animation: fadeUp 200ms ease both;
}
.dialog-panel--wizard { max-width: 700px; }

/* ── Wizard Actions & Progress ─────────────────────────────── */

.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.wizard-progress {
  height: 3px;
  background: var(--surface-3);
  border-radius: 999px;
  margin-bottom: 18px;
  overflow: hidden;
}
.wizard-progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 320ms ease;
}

/* ── Settings Danger Zone ──────────────────────────────────── */

.settings-danger-zone {
  padding-top: 14px;
  border-top: 1px solid rgba(192, 57, 43, 0.15);
  margin-top: 10px;
}
.reset-confirm-text {
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--critical);
}
.reset-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ── Reference Chips (原型/特质/套路/结局 通用) ────────────── */

.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ref-chip {
  appearance: none;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 110ms ease;
  white-space: nowrap;
}
.ref-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-accent);
  color: var(--accent);
}
.ref-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
  font-weight: 600;
}

/* ── Character Identity Hero ───────────────────────────────── */

.char-identity-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.char-name-hero {
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--ink-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  width: 100%;
  line-height: 1.2;
  transition: border-color 180ms ease;
  font-family: var(--font-display, inherit);
  letter-spacing: -0.005em;
}
.char-name-hero:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.char-name-hero::placeholder {
  color: var(--muted);
  font-style: italic;
}

.char-identity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.char-identity-meta .field {
  flex: 1;
  gap: 3px;
}
.char-identity-meta .field label {
  font-size: 0.72rem;
}

/* 关系编辑器限宽（人物 split 编辑器由 D 轮控制） */
.relationship-workbench--dual .workbench-pane--main .summary-card {
  max-width: 1100px;
}

/* ── Field lock toggle ─────────────────────────────────────── */

.field-lock {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 2px;
  margin-left: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 140ms ease, transform 140ms ease;
  flex-shrink: 0;
}
.field-lock:hover { opacity: 1; transform: scale(1.1); }
.field-lock.is-locked { opacity: 1; }

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-label--row,
.psych-block__label--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.is-locked-section {
  position: relative;
  background: rgba(255, 200, 0, 0.04);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin: -4px -8px;
}

.char-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.char-role-chip {
  appearance: none;
  -webkit-appearance: none;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  padding: 4px 22px 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.char-role-chip:hover { background-color: var(--accent-glow); }

.char-editor-hint {
  font-size: 0.75rem;
  color: var(--muted);
  align-self: center;
}

.ref-chip--sm {
  font-size: 0.72rem;
  padding: 2px 9px;
}

.section-label__hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Plot trope section ────────────────────────────────────── */

.plot-trope-section {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Genre Chip Grid ───────────────────────────────────────── */

.genre-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.genre-chip {
  appearance: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 120ms ease;
}
.genre-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-accent);
}
.genre-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
  font-weight: 600;
}

/* ── Choice Chips ──────────────────────────────────────────── */

.choice-chip {
  appearance: none;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 140ms ease;
}
.choice-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-accent);
}
.choice-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
  font-weight: 600;
}
.choice-chip--panel { border-radius: var(--radius); padding: 0.45rem 0.9rem; }
.choice-chip--nav { border-radius: 999px; }

/* ── Create Wizard Tools ───────────────────────────────────── */

.create-step-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.create-step-tools__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.create-step-tools__meta p {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.create-step-tools__actions { display: flex; gap: 6px; }

.create-ai-config {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 8px;
}
.create-ai-config--settings { margin-top: 0; }
.create-ai-config__actions { display: flex; gap: 8px; margin-top: 10px; }

.create-ai-feedback {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  margin-top: 8px;
  line-height: 1.5;
}
.create-ai-feedback.is-error { background: var(--critical-soft); color: var(--critical); border: 1px solid rgba(192,57,43,0.2); }
.create-ai-feedback.is-warning { background: var(--warning-soft); color: var(--warning); }
.create-ai-feedback.is-info { background: var(--info-soft); color: var(--info); }

/* ── Issue Cards ───────────────────────────────────────────── */

.issue-card { border-left: 3px solid var(--border-strong); }
.issue--critical .issue-card,
.issue-card.is-critical { border-left-color: var(--critical); }
.issue--high .issue-card,
.issue-card.is-high { border-left-color: var(--warning); }
.issue--medium .issue-card,
.issue-card.is-medium { border-left-color: var(--info); }
.issue--low .issue-card,
.issue-card.is-low { border-left-color: var(--success); }
.issue__body p { font-size: 0.85rem; color: var(--muted); }
.issue__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.issue__hint { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-top: 4px; }

/* ── Expert Output ─────────────────────────────────────────── */

.expert-output { line-height: 1.7; }
.expert-output p { font-size: 0.875rem; }
.expert-card__meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* ── Status Dots ───────────────────────────────────────────── */

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.status-dot--draft { background: var(--status-draft); }
.status-dot--active { background: var(--status-active); }
.status-dot--review { background: var(--status-review); }
.status-dot--done,
.status-dot--locked { background: var(--status-done); }
.status-dot--discard { background: var(--status-discard); }

/* ── Summary Strip ─────────────────────────────────────────── */

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Toolbar Reveal ────────────────────────────────────────── */

.toolbar-reveal {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 16px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink-2);
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: all 140ms ease;
}
.toolbar-reveal:hover { background: var(--surface-3); color: var(--ink); }

.toolbar-mode-group { display: flex; gap: 4px; }

/* ── Misc Helpers ──────────────────────────────────────────── */

.split-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.hero-stepper-nav { display: none; }

.page-switcher { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.page-switcher__spacer { flex: 1; order: 3; }
.page-switcher .button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-accent);
}

.version-card { cursor: pointer; transition: all 140ms ease; }
.version-card:hover { border-color: var(--border-strong); }
.version-card.is-active { border-color: var(--border-accent); background: var(--accent-soft); }

.character-role-label { font-size: 0.75rem; color: var(--muted); }

.scene-editor__card { margin-top: 10px; }
.scene-item__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 5px; }

/* ── 响应式断点 ────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .scene-workbench--triple {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .workbench-pane--context { display: none; }
}

/* ── 场景页优化 ──────────────────────────────────────────── */
.scene-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  text-align: left;
}
.scene-row__num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 22px;
}
.scene-row.is-active .scene-row__num { color: var(--accent); }
.scene-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.scene-row__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-row__meta {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.scene-row__orphan { color: var(--warning); font-weight: 600; }

/* 右侧关联区：折叠分组 */
.scene-ctx { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.scene-ctx-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 10px 14px;
  margin: 0;
}
.scene-ctx-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-1);
  padding: 2px 0;
}
.scene-ctx-group > summary::-webkit-details-marker { display: none; }
.scene-ctx-group > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.7rem;
  margin-right: 8px;
  transition: transform 140ms;
}
.scene-ctx-group[open] > summary::before { transform: rotate(90deg); }
.scene-ctx-group__title { flex: 1; }
.scene-ctx-group__count {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.scene-ctx-group__count.is-empty {
  background: transparent;
  color: var(--muted-2);
}
.scene-ctx-empty {
  margin: 8px 0 0;
  padding: 4px 0;
  color: var(--muted-2);
  font-size: 0.78rem;
  font-style: italic;
}
.scene-ctx-group .workbench-scroll-list { margin-top: 8px; max-height: 200px; }

/* ── Scene Editor v2 — Linear Issue 风格 ─────────────────── */
.scene-edv2 {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  max-width: 920px;
}
.scene-edv2__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
}
.scene-edv2__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.scene-edv2__bc-select {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 22px 4px 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-2);
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: background-color 120ms, border-color 120ms;
}
.scene-edv2__bc-select:hover { background-color: var(--surface-hover); border-color: var(--border); }
.scene-edv2__bc-select:focus { outline: none; border-color: var(--accent); }
.scene-edv2__bc-sep { color: var(--muted-2); }
.scene-edv2__bc-pov-label { color: var(--muted); font-size: 0.78rem; }

.scene-edv2__danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.scene-edv2__danger:hover {
  color: var(--critical);
  border-color: var(--critical);
  background: var(--critical-soft);
}

.scene-edv2__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink-1);
  background: transparent;
  border: none;
  outline: none;
  width: calc(100% - 56px);
  margin: 24px 28px 0;
  padding: 4px 0 12px;
  border-bottom: 1px solid transparent;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: border-color 140ms;
}
.scene-edv2__title:focus { border-bottom-color: var(--accent); }
.scene-edv2__title::placeholder { color: var(--muted-2); font-style: italic; font-weight: 500; }

.scene-edv2__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 28px 0;
}
.scene-edv2__inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 0.84rem;
}
.scene-edv2__inline-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scene-edv2__inline-input,
.scene-edv2__inline-select {
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink-1);
  font-weight: 500;
  min-width: 60px;
  max-width: 180px;
  padding: 0;
}
.scene-edv2__inline-input::placeholder { color: var(--muted-2); }
.scene-edv2__inline-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 7px) 50%, calc(100% - 3px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.scene-edv2__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 28px 0;
}
.scene-edv2__field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scene-edv2__field-hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}
.scene-edv2__input {
  width: 100%;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-1);
  line-height: 1.55;
  resize: vertical;
  transition: border-color 140ms, background 140ms;
}
.scene-edv2__input:hover { background: var(--surface-hover); }
.scene-edv2__input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.scene-edv2__input::placeholder { color: var(--muted-2); }

.scene-edv2__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 28px 0;
}
.scene-edv2__pair .scene-edv2__field {
  padding: 0;
}

.scene-edv2__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 28px 0;
  padding: 10px 14px;
  background: var(--warning-soft);
  border: 1px solid rgba(177, 115, 25, 0.3);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--warning);
  flex-wrap: wrap;
}
.scene-edv2__alert-icon { font-size: 0.95rem; line-height: 1.4; flex-shrink: 0; }
.scene-edv2__alert-text { color: var(--ink-2); flex-shrink: 0; }
.scene-edv2__alert-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.scene-edv2__alert-chip {
  background: var(--paper);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: background 120ms;
}
.scene-edv2__alert-chip:hover { background: var(--warning); color: #ffffff; }

.scene-edv2__notes {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.scene-edv2__notes > summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.scene-edv2__notes > summary::-webkit-details-marker { display: none; }
.scene-edv2__notes > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 140ms;
}
.scene-edv2__notes[open] > summary::before { transform: rotate(90deg); }

.scene-edv2__topbar-actions { display: flex; align-items: center; gap: 8px; }
.scene-edv2__ai-btn {
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.scene-edv2__ai-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}
.scene-edv2__ai-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.scene-edv2__drama {
  margin: 16px 28px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}
.scene-edv2__drama > summary {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scene-edv2__drama > summary::-webkit-details-marker { display: none; }
.scene-edv2__drama > summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 0.7rem;
  transition: transform 140ms;
}
.scene-edv2__drama[open] > summary::before { transform: rotate(90deg); }
.scene-edv2__drama .scene-edv2__field { padding: 0 0 0; }
.scene-edv2__drama .scene-edv2__input {
  background: var(--paper);
}

@media (max-width: 1080px) {
  .overview-grid { grid-template-columns: repeat(2, 1fr); }
  .plot-workbench--triple,
  .plot-workbench--triple.plot-workbench--studio {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .app-shell { width: calc(100vw - 16px); }
  .scene-workbench--triple,
  .relationship-workbench--dual {
    grid-template-columns: 1fr;
  }
  .workbench-pane--rail { max-height: 220px; overflow-y: auto; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .plot-workbench--triple,
  .plot-workbench--triple.plot-workbench--studio {
    grid-template-columns: 1fr;
  }
  .setup-board { grid-template-columns: 1fr; }
  .workbench { grid-template-columns: 1fr; }
  .workbench--structure { grid-template-columns: 1fr; }
}

/* ── Structure Library Dialog ──────────────────────────────── */

.dialog-panel--library {
  max-width: 960px;
  width: calc(100% - 32px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.dialog-panel--library .panel__header { flex-shrink: 0; }
.dialog-panel--library .wizard-actions { flex-shrink: 0; margin-top: 12px; }

#structure-library-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.lib-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}

.lib-filter-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}
.lib-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.lib-filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-bottom: 8px;
}

.lib-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 150ms ease;
}
.lib-card:hover { border-color: var(--accent); }

.lib-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.lib-card__title-group { flex: 1 1 auto; min-width: 0; }

.lib-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.lib-card__en {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-card__badge { flex-shrink: 0; }

.lib-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lib-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lib-tag-item {
  font-size: 0.72rem;
  padding: 2px 7px;
}

.lib-card__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.lib-act-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.lib-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.lib-card__meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* ── Section Label Row (structure page) ──────────────────── */

.section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-label-row .section-label { margin-bottom: 0; }

.library-applied-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: -4px 0 8px;
}
.library-applied-label strong {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 700px) {
  .lib-grid { grid-template-columns: 1fr; }
}

/* ── Scene Weaving Section ─────────────────────────────────── */

.scene-weaving-section {
  margin-top: 20px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.section-label--weaving {
  color: var(--accent);
  margin-bottom: 14px;
}

.weave-group {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.weave-group__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.weave-field { margin-bottom: 10px; }
.weave-field:last-child { margin-bottom: 0; }

.weave-field__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 5px;
}

.weave-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chip-wrap--dense { gap: 4px; }
/* 关系定义 - 按 4 大类分组的 segmented chip */
.rel-kind-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rel-kind-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  --grp-tint: var(--muted);
}
.rel-kind-group--love   { --grp-tint: #c0392b; }
.rel-kind-group--ally   { --grp-tint: #1e5fa8; }
.rel-kind-group--rival  { --grp-tint: #b17319; }
.rel-kind-group--family { --grp-tint: #2f7d5f; }

.rel-kind-group__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 4px 4px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 44px;
}
.rel-kind-group__icon {
  font-size: 1.1rem;
  color: var(--grp-tint);
  line-height: 1;
}
.rel-kind-group__label {
  font-size: 0.7rem;
  color: var(--grp-tint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rel-kind-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: center;
  flex: 1;
}
.rel-seg {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.rel-seg:hover {
  background: var(--surface-3);
  color: var(--ink-1);
}
.rel-seg.is-active {
  background: var(--grp-tint);
  color: #ffffff;
  border-color: var(--grp-tint);
  font-weight: 600;
}

.ref-chip--xs {
  font-size: 0.72rem;
  padding: 2px 8px;
}

.emotion-path-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.emotion-pill {
  background: var(--accent);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}

.emotion-arrow {
  color: var(--muted);
  font-size: 1rem;
}


.psych-block__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ── Plot Element Library Section ─────────────────────────── */

.plot-element-section {
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.element-group { margin-bottom: 10px; }
.element-group:last-child { margin-bottom: 0; }

.element-group__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 5px;
}

.element-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 700px) {
  .weave-row,
  .element-row { grid-template-columns: 1fr; }
}


/* ============================================================
   AI 创作流程 — 电影感暗色设计系统
   ============================================================ */

/* ── 面板背景覆盖（统一到米色书桌主题） ────────────────────── */

#panel-creation {
  background: transparent;
  min-height: 100%;
}

/* ── 顶部导航栏 ─────────────────────────────────────────── */

.cf-topbar {
  display: flex;
  align-items: center;
  padding: 16px 0 0;
}

.cf-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  opacity: 0.85;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
}

.cf-back-btn:hover { opacity: 1; }

/* ── 外层容器（cf-* 变量重绑到米色书桌 token） ───────────── */

.creation-flow {
  --cf-bg:         var(--surface-1);
  --cf-s1:         var(--surface-2);
  --cf-s2:         var(--surface-1);
  --cf-s3:         var(--surface-3);
  --cf-border:     var(--border);
  --cf-border-md:  var(--border-strong);
  --cf-gold:       var(--accent);
  --cf-gold-dim:   var(--accent-soft);
  --cf-gold-glow:  var(--accent-glow);
  --cf-text:       var(--ink);
  --cf-text-1:     var(--ink);
  --cf-text-2:     var(--ink-2);
  --cf-text-3:     var(--muted);
  --cf-ok:         #2e7d52;
  --cf-ok-dim:     rgba(46,125,82,0.12);

  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px 80px;
  color: var(--cf-text);
  font-family: var(--font-ui);
  position: relative;
}

/* ── 时间轴 Stepper ───────────────────────────────────────── */

.cf-timeline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 0 28px;
  gap: 8px;
}
.cf-tl-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
}
.cf-tl-meta__label {
  font-size: 0.78rem;
  color: var(--cf-text-3);
  letter-spacing: 0.08em;
}
.cf-tl-meta__progress {
  font-size: 0.72rem;
  color: var(--cf-text-3);
  opacity: 0.7;
}
.cf-tl-inner {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}
.cf-tl-inner::-webkit-scrollbar { display: none; }

.cf-tl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cf-tl-dot {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--cf-border-md);
  background: transparent;
  color: var(--cf-text-3);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 220ms ease;
  flex-shrink: 0;
}

.cf-tl-node.is-done .cf-tl-dot {
  border-color: var(--cf-gold);
  color: var(--cf-gold);
  background: var(--cf-gold-dim);
  cursor: pointer;
}
.cf-tl-node.is-done .cf-tl-dot:hover {
  background: rgba(200,164,90,0.22);
}

.cf-tl-node.is-current .cf-tl-dot {
  border-color: var(--cf-gold);
  background: var(--cf-gold);
  color: #0a0a10;
  box-shadow: 0 0 18px var(--cf-gold-glow);
}

.cf-tl-track {
  flex: 1;
  height: 1.5px;
  background: var(--cf-border);
  margin-top: 16px;
  align-self: flex-start;
  min-width: 16px;
  transition: background 220ms;
}
.cf-tl-track.is-done {
  background: var(--cf-gold-dim);
}

.cf-tl-label {
  font-size: 0.7rem;
  color: var(--cf-text-3);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cf-tl-node.is-done .cf-tl-label  { color: var(--cf-gold); opacity: 0.65; }
.cf-tl-node.is-current .cf-tl-label { color: var(--cf-gold); font-weight: 600; opacity: 1; }

/* ── 步骤内容动画 ─────────────────────────────────────────── */

.cf-main { animation: fadeUp 220ms ease; }

/* ── 每步区块 ─────────────────────────────────────────────── */

.cf-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── 步骤标题 ─────────────────────────────────────────────── */

.cf-step-header {
  padding-bottom: 4px;
}

.cf-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.7;
  margin: 0 0 10px;
}

.cf-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--cf-text);
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.cf-step-sub {
  font-size: 0.88rem;
  color: var(--cf-text-2);
  margin: 0;
  line-height: 1.5;
}

/* ── 类型芯片 ─────────────────────────────────────────────── */

.cf-genre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cf-genre-chip {
  appearance: none;
  padding: 7px 16px;
  border: 1px solid var(--cf-border-md);
  border-radius: 100px;
  background: var(--cf-s2);
  color: var(--cf-text-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}
.cf-genre-chip:hover:not(:disabled) {
  border-color: rgba(200,164,90,0.4);
  color: var(--cf-text);
  background: var(--cf-s3);
}
.cf-genre-chip.is-active {
  border-color: var(--cf-gold);
  background: var(--cf-gold-dim);
  color: var(--cf-gold);
  box-shadow: 0 0 12px var(--cf-gold-dim);
}
.cf-genre-chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── 自定义类型输入行 ──────────────────────────────────────── */

.cf-custom-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cf-custom-input {
  width: 160px;
  flex: none;
}

/* ── 表单字段 ─────────────────────────────────────────────── */

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-field--collapsible details summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cf-field--collapsible details summary::-webkit-details-marker { display: none; }
.cf-field--collapsible details summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  font-size: 0.7rem;
  color: var(--cf-text-3);
  transition: transform 150ms;
}
.cf-field--collapsible details[open] summary::before { transform: rotate(90deg); }
.cf-label--summary { font-weight: 500; opacity: 0.75; }
.cf-field--collapsible details[open] .cf-label--summary { opacity: 1; }

.cf-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-text-3);
}

.cf-label-opt {
  font-weight: 400;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
}

.cf-input {
  padding: 10px 14px;
  border: 1px solid var(--cf-border-md);
  border-radius: 8px;
  background: var(--cf-s2);
  color: var(--cf-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  transition: border-color 150ms;
  width: 100%;
  box-sizing: border-box;
}
.cf-input::placeholder { color: var(--cf-text-3); }
.cf-input:focus {
  outline: none;
  border-color: var(--cf-gold);
  background: var(--cf-s3);
}

.cf-textarea {
  padding: 12px 14px;
  border: 1px solid var(--cf-border-md);
  border-radius: 8px;
  background: var(--cf-s2);
  color: var(--cf-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
  width: 100%;
  resize: vertical;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.cf-textarea::placeholder { color: var(--cf-text-3); }
.cf-textarea:focus {
  outline: none;
  border-color: var(--cf-gold);
  background: var(--cf-s3);
}

/* ── 工具栏 ───────────────────────────────────────────────── */

.cf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── AI 生成按钮 ──────────────────────────────────────────── */

.cf-ai-btn {
  appearance: none;
  padding: 10px 22px;
  border: 1px solid var(--cf-gold);
  border-radius: 8px;
  background: var(--cf-gold-dim);
  color: var(--cf-gold);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 180ms ease;
}
.cf-ai-btn:hover:not(:disabled) {
  background: rgba(200,164,90,0.22);
  box-shadow: 0 0 20px var(--cf-gold-dim);
}
.cf-ai-btn:disabled,
.cf-ai-btn.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── 重新生成按钮 ─────────────────────────────────────────── */

.cf-regen-btn {
  appearance: none;
  padding: 6px 14px;
  border: 1px solid var(--cf-border-md);
  border-radius: 6px;
  background: transparent;
  color: var(--cf-text-2);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 160ms;
}
.cf-regen-btn:hover:not(:disabled) {
  border-color: var(--cf-gold);
  color: var(--cf-gold);
}
.cf-regen-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 操作行 ───────────────────────────────────────────────── */

.cf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

.cf-btn-primary {
  appearance: none;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  background: var(--cf-gold);
  color: #0a0a10;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 200ms ease;
  white-space: nowrap;
}
.cf-btn-primary:hover:not(:disabled) {
  background: #d4b26a;
  box-shadow: 0 4px 20px var(--cf-gold-glow);
  transform: translateY(-1px);
}
.cf-btn-primary:disabled {
  background: var(--cf-s3);
  color: var(--cf-text-3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cf-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.cf-btn-finalize {
  background: linear-gradient(135deg, #c8a45a, #e8c878);
}

.cf-btn-ghost {
  appearance: none;
  padding: 8px 16px;
  border: 1px solid var(--cf-border-md);
  border-radius: 8px;
  background: transparent;
  color: var(--cf-text-2);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 160ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-btn-ghost:hover { border-color: var(--cf-gold); color: var(--cf-gold); }

.cf-arrow { opacity: 0.8; }

.cf-next-hint {
  font-size: 0.8rem;
  color: var(--cf-text-3);
}

/* ── 错误提示 ─────────────────────────────────────────────── */

.cf-error-block {
  margin: 12px 0;
  padding: 14px 16px;
  background: rgba(192,57,43,0.06);
  border: 1px solid rgba(192,57,43,0.22);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.cf-error-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-error {
  font-size: 0.85rem;
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.22);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0;
}

/* ── 流式预览 ─────────────────────────────────────────────── */

.cf-stream-preview {
  padding: 14px 16px;
  background: var(--cf-s2);
  border: 1px solid var(--cf-border);
  border-left: 2px solid var(--cf-gold);
  border-radius: 8px;
  max-height: 160px;
  overflow: hidden;
}
.cf-stream-text {
  margin: 0;
  font-size: 0.76rem;
  color: var(--cf-text-3);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  font-family: inherit;
}

/* ── 锁定锚点 ─────────────────────────────────────────────── */

.cf-anchor {
  padding: 14px 18px;
  border: 1px solid var(--cf-border);
  border-left: 3px solid var(--cf-gold);
  border-radius: 0 8px 8px 0;
  background: var(--cf-s2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-anchor--compact { padding: 10px 14px; }

.cf-anchor-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.7;
}

.cf-anchor-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--cf-text);
}

.cf-anchor-body {
  font-size: 0.85rem;
  color: var(--cf-text-2);
  line-height: 1.55;
  margin: 0;
}

/* ── AI 选择卡片 ──────────────────────────────────────────── */

.cf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.cf-card-grid--wide {
  grid-template-columns: 1fr;
  max-width: 640px;
}

.cf-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--cf-border-md);
  border-radius: 12px;
  background: var(--cf-s1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 200ms ease;
  cursor: default;
}
.cf-card:hover {
  border-color: rgba(200,164,90,0.3);
  background: var(--cf-s2);
}
.cf-card.is-selected {
  border-color: var(--cf-gold);
  background: var(--cf-gold-dim);
  box-shadow: 0 0 0 1px var(--cf-gold-dim), 0 4px 24px var(--cf-gold-dim);
}
.cf-card.is-dimmed { opacity: 0.38; }

.cf-card-check {
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--cf-gold);
  font-size: 0.9rem;
  font-weight: 700;
}

.cf-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.65;
  margin: 0;
}

.cf-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cf-text);
  margin: 0;
  line-height: 1.3;
}

.cf-card-hook {
  font-size: 0.875rem;
  color: var(--cf-text-2);
  line-height: 1.55;
  margin: 0;
}

.cf-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cf-card-meta p {
  font-size: 0.8rem;
  color: var(--cf-text-3);
  margin: 0;
  display: flex;
  gap: 6px;
  line-height: 1.45;
}

.cf-meta-key {
  font-weight: 700;
  color: var(--cf-text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.cf-synopsis-angle {
  font-size: 0.8rem;
  color: var(--cf-gold);
  opacity: 0.7;
  margin: 0;
}
.cf-synopsis-body {
  font-size: 0.875rem;
  color: var(--cf-text-2);
  line-height: 1.65;
  margin: 0;
}

/* ── 选择按钮 ─────────────────────────────────────────────── */

.cf-choose-btn {
  appearance: none;
  padding: 7px 16px;
  border: 1px solid var(--cf-gold);
  border-radius: 6px;
  background: transparent;
  color: var(--cf-gold);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
  align-self: flex-start;
  margin-top: auto;
}
.cf-choose-btn:hover { background: var(--cf-gold-dim); }
.cf-choose-btn.is-chosen {
  background: var(--cf-gold-dim);
  cursor: default;
}

/* ── 自定义展开区 ─────────────────────────────────────────── */

.cf-custom-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-toggle-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--cf-text-3);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  cursor: pointer;
  align-self: flex-start;
  padding: 2px 0;
  letter-spacing: 0.02em;
  transition: color 150ms;
}
.cf-toggle-btn:hover { color: var(--cf-gold); }

.cf-custom-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeUp 180ms ease;
}

.cf-use-custom-btn {
  align-self: flex-start;
  font-size: 0.82rem;
}

/* ── 角色卡片 ─────────────────────────────────────────────── */

.cf-char-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf-char-card {
  padding: 18px 20px;
  border: 1px solid var(--cf-border-md);
  border-radius: 12px;
  background: var(--cf-s1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 200ms;
}
.cf-char-card.is-confirmed {
  border-color: var(--cf-ok);
  background: var(--cf-ok-dim);
}
.cf-char-card.is-skipped { opacity: 0.35; }

.cf-char-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cf-char-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.cf-char-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cf-text);
  margin: 0;
}

.cf-char-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.7;
}

.cf-char-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cf-discard-btn {
  appearance: none;
  padding: 6px 12px;
  border: 1px solid var(--cf-border-md);
  border-radius: 6px;
  background: transparent;
  color: var(--cf-text-3);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 150ms;
}
.cf-discard-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }

.cf-char-status {
  font-size: 0.8rem;
  color: var(--cf-text-3);
  flex-shrink: 0;
  margin-top: 2px;
}
.cf-char-card.is-confirmed .cf-char-status { color: var(--cf-ok); }

.cf-char-traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cf-trait {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--cf-text-2);
  line-height: 1.4;
}
.cf-trait--full { grid-column: 1 / -1; }

.cf-trait-key {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-3);
}

/* ── 场景选择 ─────────────────────────────────────────────── */

.cf-scene-status {
  font-size: 0.85rem;
  color: var(--cf-text-2);
}
.cf-scene-status strong { color: var(--cf-gold); }
.cf-scene-status-hint { color: var(--cf-text-3); margin-left: 6px; }

.cf-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.cf-scene-card {
  padding: 16px;
  border: 1px solid var(--cf-border-md);
  border-radius: 12px;
  background: var(--cf-s1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 200ms ease;
}
.cf-scene-card:hover { border-color: rgba(200,164,90,0.25); background: var(--cf-s2); }
.cf-scene-card.is-selected {
  border-color: var(--cf-gold);
  background: var(--cf-gold-dim);
}

.cf-scene-act {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.65;
}

.cf-scene-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--cf-text);
  margin: 0;
  line-height: 1.3;
}

.cf-scene-detail {
  font-size: 0.78rem;
  color: var(--cf-text-3);
  margin: 0;
  line-height: 1.45;
  display: flex;
  gap: 5px;
}

.cf-scene-toggle-btn {
  appearance: none;
  margin-top: auto;
  padding: 6px 12px;
  border: 1px solid var(--cf-border-md);
  border-radius: 6px;
  background: transparent;
  color: var(--cf-text-3);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 150ms;
  align-self: flex-start;
}
.cf-scene-toggle-btn:hover { border-color: var(--cf-gold); color: var(--cf-gold); }
.cf-scene-toggle-btn.is-selected {
  border-color: var(--cf-gold);
  color: var(--cf-gold);
  background: var(--cf-gold-dim);
}

/* ── 幕结构 ───────────────────────────────────────────────── */

.cf-act-structure {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cf-act-structure.is-confirmed {
  border-left: 3px solid var(--cf-gold);
  padding-left: 20px;
}

.cf-act-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-act-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cf-border);
}

.cf-act-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--cf-text);
  margin: 0;
}

.cf-act-range {
  font-size: 0.75rem;
  color: var(--cf-gold);
  opacity: 0.65;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cf-beat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-beat {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  background: var(--cf-s2);
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  align-items: flex-start;
}

.cf-beat-timing {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cf-gold);
  opacity: 0.6;
  flex-shrink: 0;
  padding-top: 2px;
  width: 36px;
  text-align: center;
}

.cf-beat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cf-beat-name {
  font-size: 0.875rem;
  color: var(--cf-text);
  font-weight: 600;
}

.cf-beat-desc {
  font-size: 0.8rem;
  color: var(--cf-text-2);
  line-height: 1.5;
}

/* ── 思路面板 ─────────────────────────────────────────────── */

.reasoning-panel {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 320px;
  max-height: calc(100vh - 100px);
  background: var(--cf-s2);
  border: 1px solid var(--cf-border-md);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  animation: fadeUp 180ms ease;
}
.reasoning-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cf-border);
}
.reasoning-panel__header h3 {
  font-size: 0.85rem;
  color: var(--cf-text);
  margin: 0;
  font-family: var(--font-ui);
}
.reasoning-panel__body {
  padding: 14px 16px;
  overflow-y: auto;
  font-size: 0.83rem;
  color: var(--cf-text-2);
  line-height: 1.65;
}

.cf-reasoning-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--cf-text-3);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
  align-self: flex-start;
  padding: 2px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all 150ms;
}
.cf-reasoning-btn:hover { color: var(--cf-gold); text-decoration-color: var(--cf-gold); }

.reasoning-panel .button--ghost {
  appearance: none;
  background: transparent;
  border: 1px solid var(--cf-border-md);
  color: var(--cf-text-2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-ui);
}
.reasoning-panel .button--ghost:hover { border-color: var(--cf-gold); color: var(--cf-gold); }

/* ── 响应式 ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .creation-flow { padding: 0 16px 60px; }
  .cf-timeline { padding: 24px 0 20px; }
  .cf-card-grid { grid-template-columns: 1fr; }
  .cf-char-traits { grid-template-columns: 1fr; }
  .cf-scene-grid { grid-template-columns: 1fr 1fr; }
  .cf-card-grid--wide { max-width: none; }
  .reasoning-panel { width: calc(100vw - 32px); right: 16px; }
}

/* ── AI 加载点动画 ────────────────────────────────────────── */

.ai-loading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.ai-loading span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-bounce 1s ease-in-out infinite;
}
.ai-loading span:nth-child(2) { animation-delay: 0.15s; }
.ai-loading span:nth-child(3) { animation-delay: 0.30s; }

@keyframes ai-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Art Deco 标题 ────────────────────────────────────────── */

.cf-deco-header {
  text-align: center;
  padding-bottom: 4px;
}

.cf-deco-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cf-text);
  letter-spacing: 0.06em;
}

.cf-deco-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.cf-deco-text {
  flex-shrink: 0;
}
.cf-deco-text::before,
.cf-deco-text::after {
  content: none;
}

/* ── 大图标类型卡片 ───────────────────────────────────────── */

.cf-genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.cf-genre-card {
  appearance: none;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: var(--cf-s2);
  cursor: pointer;
  transition: all 200ms ease;
  padding: 12px 8px 14px;
  position: relative;
  overflow: hidden;
}
.cf-genre-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(200,164,90,0) 0%, transparent 70%);
  transition: background 200ms ease;
}
.cf-genre-card:hover:not(:disabled)::before {
  background: radial-gradient(circle at center, rgba(200,164,90,0.06) 0%, transparent 70%);
}
.cf-genre-card:hover:not(:disabled) {
  border-color: rgba(200,164,90,0.35);
  background: var(--cf-s3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cf-genre-card.is-active {
  border-color: var(--cf-gold);
  background: linear-gradient(145deg, rgba(200,164,90,0.18) 0%, rgba(200,164,90,0.08) 100%);
  box-shadow: 0 0 0 1px rgba(200,164,90,0.25), 0 6px 24px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.cf-genre-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cf-gold);
}
.cf-genre-card:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

.cf-genre-icon {
  font-size: 1.75rem;
  line-height: 1;
  filter: saturate(0) brightness(1.8);
  transition: filter 200ms;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}
.cf-genre-card.is-active .cf-genre-icon {
  filter: saturate(0.4) brightness(1.6) sepia(0.3);
}
.cf-genre-card:hover:not(:disabled) .cf-genre-icon {
  filter: saturate(0.2) brightness(2);
}

.cf-genre-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cf-text-2);
  letter-spacing: 0.04em;
  transition: color 200ms;
}
.cf-genre-card.is-active .cf-genre-name {
  color: var(--cf-gold);
  font-weight: 600;
}
.cf-genre-card:hover:not(:disabled) .cf-genre-name {
  color: var(--cf-text);
}

/* ── Art Deco 主操作按钮 ──────────────────────────────────── */

.cf-deco-btn {
  appearance: none;
  padding: 12px 36px;
  border: 1px solid var(--cf-gold);
  border-radius: 4px;
  background: transparent;
  color: var(--cf-gold);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease, transform 160ms ease;
  white-space: nowrap;
}
.cf-deco-btn:hover:not(:disabled) {
  background: var(--cf-gold-dim);
  box-shadow: 0 0 28px var(--cf-gold-glow);
  transform: translateY(-1px);
}
.cf-deco-btn:active:not(:disabled) { transform: translateY(0); }
.cf-deco-btn:disabled {
  border-color: var(--cf-border-md);
  color: var(--cf-text-3);
  cursor: not-allowed;
}
.cf-deco-btn--gold {
  background: rgba(200,164,90,0.12);
}

.cf-deco-btn-inner { /* no wrapper needed, kept for compat */ }

/* ── 步骤条重写 (Art Deco 风格) ───────────────────────────── */

.cf-timeline {
  padding: 32px 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cf-timeline::-webkit-scrollbar { display: none; }

.cf-tl-inner {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
}

/* keep existing node/dot/sep styles, override sep */
.cf-tl-sep {
  flex: 1;
  height: 1px;
  background: var(--cf-border-md);
  margin-top: 16px;
  align-self: flex-start;
  min-width: 20px;
  transition: background 220ms;
}
.cf-tl-sep.is-done { background: rgba(200,164,90,0.3); }

@media (max-width: 640px) {
  .cf-genre-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .cf-genre-icon { font-size: 1.4rem; }
  .cf-genre-name { font-size: 0.72rem; }
  .cf-deco-btn { padding: 11px 24px; font-size: 0.875rem; }
}

/* 决议 1：原创作流程暗色模式覆盖已停用，沿用全局米色主题 */

/* ── 类型卡片主次样式 ─────────────────────────────────────── */

.cf-genre-card.is-secondary {
  border-color: rgba(160,140,200,0.5);
  background: rgba(120,100,180,0.1);
}
.cf-genre-card.is-secondary .cf-genre-name {
  color: #b8a8e0;
}
.cf-genre-card.is-secondary.cf-genre-card::after {
  color: #b8a8e0;
}

.cf-genre-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cf-gold);
  opacity: 0.85;
  line-height: 1;
}
.cf-genre-card.is-secondary .cf-genre-badge {
  color: #b8a8e0;
}

/* ── 自定义输入宽度修复 ───────────────────────────────────── */

.cf-custom-input.cf-custom-input {
  width: 150px;
  max-width: 150px;
  flex: 0 0 150px;
}

/* ── 类型插槽区 ───────────────────────────────────────────── */

.cf-genre-pool {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 点选区卡片缩小为紧凑版 */
.cf-genre-pool .cf-genre-grid {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
}

.cf-genre-pool .cf-genre-card {
  aspect-ratio: auto;
  flex-direction: row;
  gap: 6px;
  padding: 8px 10px;
  justify-content: flex-start;
  border-radius: 8px;
}

.cf-genre-pool .cf-genre-icon {
  font-size: 1.1rem;
}

.cf-genre-pool .cf-genre-name {
  font-size: 0.8rem;
}

/* 插槽容器 */
.cf-genre-slots {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 24px;
  background: rgba(10,10,20,0.6);
  border: 1px solid rgba(200,164,90,0.18);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(200,164,90,0.06), 0 4px 24px rgba(0,0,0,0.3);
}

.cf-slot-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-slot-divider {
  width: 1px;
  height: 80px;
  background: rgba(200,164,90,0.15);
  margin: 0 20px;
  flex-shrink: 0;
}

.cf-slot-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cf-slot-label--primary { color: var(--cf-gold); opacity: 0.7; }
.cf-slot-label--secondary { color: #b8a8e0; opacity: 0.7; }

.cf-slot-row {
  display: flex;
  gap: 10px;
}

.cf-slot {
  flex: 1;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 200ms ease;
  font-family: var(--font-ui);
}

.cf-slot.is-empty {
  border: 1.5px dashed rgba(255,255,255,0.1);
  background: transparent;
  cursor: default;
}
.cf-slot--primary.is-empty { border-color: rgba(200,164,90,0.2); }
.cf-slot--secondary.is-empty { border-color: rgba(160,130,200,0.2); }

.cf-slot-placeholder {
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.2;
}

.cf-slot.is-filled {
  appearance: none;
  border: 1.5px solid transparent;
  padding: 0 12px;
  cursor: pointer;
  gap: 6px;
}
.cf-slot--primary.is-filled {
  border-color: var(--cf-gold);
  background: rgba(200,164,90,0.12);
}
.cf-slot--secondary.is-filled {
  border-color: rgba(160,130,200,0.5);
  background: rgba(130,100,180,0.1);
}

.cf-slot.is-filled:hover {
  transform: scale(1.02);
  opacity: 0.85;
}

.cf-slot-icon {
  font-size: 1.1rem;
  filter: saturate(0) brightness(1.8);
  flex-shrink: 0;
}

.cf-slot-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 1;
  text-align: left;
}
.cf-slot--primary .cf-slot-name { color: var(--cf-gold); }
.cf-slot--secondary .cf-slot-name { color: #c0b0f0; }

.cf-slot-remove {
  font-size: 0.72rem;
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity 150ms;
}
.cf-slot.is-filled:hover .cf-slot-remove { opacity: 0.9; }

@media (max-width: 640px) {
  .cf-genre-slots { padding: 14px 12px; flex-direction: column; }
  .cf-slot-divider { width: 100%; height: 1px; margin: 10px 0; }
  .cf-genre-pool .cf-genre-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ============================================================
   Art Deco 视觉增强 — 暖色 / 厚边框 / 四角装饰
   ============================================================ */

/* ── 决议 1：旧暖棕调主题已停用，对齐全局米色书桌 token ──── */

/* （原 .creation-flow 暗色变量覆盖已移除，沿用第 3737 行的米色映射） */

/* （原 body[data-mode="creation"] / #panel-creation / hero 暗色覆盖已移除） */

/* ── 主容器装饰框（背景透明，让页面 surface 贯通） ─────────── */

.creation-flow {
  background: transparent;
}

/* ── 插槽区：四角 L 形装饰 + 厚实边框 ─────────────────────── */

.cf-genre-slots {
  position: relative;
  background:
    /* 四角 L 形金色装饰，每条 2px×20px */
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 20px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 2px  20px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 20px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 2px  20px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 20px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 2px  20px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 20px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 2px  20px no-repeat,
    /* 主背景 */
    linear-gradient(160deg, #1a160e 0%, #111008 100%);
  border: 1px solid rgba(200,160,48,0.35);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(200,160,48,0.08),
    0 4px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(200,160,48,0.08);
}

/* ── 插槽本体 ─────────────────────────────────────────────── */

.cf-slot.is-empty {
  border: 2px dashed rgba(200,160,48,0.22);
  background: rgba(200,160,48,0.03);
}

.cf-slot--primary.is-filled {
  border: 2px solid var(--cf-gold);
  background: linear-gradient(135deg, rgba(200,160,48,0.18) 0%, rgba(200,160,48,0.08) 100%);
  box-shadow: 0 0 12px rgba(200,160,48,0.15);
}

.cf-slot--secondary.is-empty {
  border: 2px dashed rgba(140,110,200,0.22);
}

.cf-slot--secondary.is-filled {
  border: 2px solid rgba(160,130,210,0.7);
  background: linear-gradient(135deg, rgba(130,100,190,0.18) 0%, rgba(100,80,160,0.08) 100%);
}

.cf-slot-divider {
  background: linear-gradient(180deg, transparent, rgba(200,160,48,0.3) 30%, rgba(200,160,48,0.3) 70%, transparent);
}

/* ── 类型卡片：厚边框 + 暖色 ─────────────────────────────── */

.cf-genre-pool .cf-genre-card {
  border: 1.5px solid rgba(200,160,48,0.16);
  background: var(--cf-s1);
}

.cf-genre-pool .cf-genre-card:hover:not(:disabled) {
  border-color: rgba(200,160,48,0.55);
  background: var(--cf-s2);
  box-shadow: 0 2px 16px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(200,160,48,0.08);
}

.cf-genre-pool .cf-genre-card.is-active {
  border: 2px solid var(--cf-gold);
  background: linear-gradient(145deg, rgba(200,160,48,0.2) 0%, rgba(200,160,48,0.08) 100%);
  box-shadow: 0 0 16px rgba(200,160,48,0.2), inset 0 0 0 1px rgba(200,160,48,0.12);
}

/* ── 装饰标题：更粗的金线 ───────────────────────────────── */

.cf-deco-title {
  color: var(--cf-text);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.cf-deco-title .cf-deco-line:first-child {
  background: linear-gradient(90deg, transparent 0%, rgba(200,160,48,0.6) 100%);
  height: 2px;
}

.cf-deco-title .cf-deco-line:last-child {
  background: linear-gradient(90deg, rgba(200,160,48,0.6) 0%, transparent 100%);
  height: 2px;
}

.cf-deco-text::before,
.cf-deco-text::after {
  color: var(--cf-gold);
  opacity: 0.7;
}

/* ── 主操作按钮：厚边 + 暖金 ─────────────────────────────── */

.cf-deco-btn {
  border: 2px solid var(--cf-gold);
  letter-spacing: 0.1em;
  padding: 13px 40px;
  font-size: 0.95rem;
}

.cf-deco-btn:hover:not(:disabled) {
  background: rgba(200,160,48,0.15);
  box-shadow: 0 0 32px rgba(200,160,48,0.35), inset 0 0 0 1px rgba(200,160,48,0.2);
}

/* ── 锚点框 ───────────────────────────────────────────────── */

.cf-anchor {
  border: 1px solid rgba(200,160,48,0.25);
  border-left: 4px solid var(--cf-gold);
  background: linear-gradient(90deg, rgba(200,160,48,0.08) 0%, transparent 60%);
}

/* ── AI 选择卡片 ──────────────────────────────────────────── */

.cf-card {
  border: 1.5px solid rgba(200,160,48,0.2);
  background: var(--cf-s1);
}

.cf-card:hover {
  border-color: rgba(200,160,48,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.cf-card.is-selected {
  border: 2px solid var(--cf-gold);
  box-shadow: 0 0 0 1px rgba(200,160,48,0.2), 0 6px 30px rgba(0,0,0,0.5);
}

/* ── AI 按钮 ──────────────────────────────────────────────── */

.cf-ai-btn {
  border: 2px solid rgba(200,160,48,0.7);
  padding: 10px 24px;
}

/* ── 角色 / 场景卡片 ──────────────────────────────────────── */

.cf-char-card {
  border: 1.5px solid rgba(200,160,48,0.18);
  background: var(--cf-s1);
}

.cf-char-card.is-confirmed {
  border: 2px solid var(--cf-ok);
}

.cf-scene-card {
  border: 1.5px solid rgba(200,160,48,0.16);
  background: var(--cf-s1);
}

.cf-scene-card.is-selected {
  border: 2px solid var(--cf-gold);
}

/* ── 幕结构 beat 行 ───────────────────────────────────────── */

.cf-beat {
  border: 1px solid rgba(200,160,48,0.16);
  background: var(--cf-s2);
}

.cf-act-head {
  border-bottom: 1px solid rgba(200,160,48,0.2);
}

/* ── Timeline 步骤线条 ────────────────────────────────────── */

.cf-tl-dot {
  border: 2px solid rgba(200,160,48,0.3);
  width: 36px;
  height: 36px;
}

.cf-tl-node.is-done .cf-tl-dot {
  border: 2px solid var(--cf-gold);
}

.cf-tl-node.is-current .cf-tl-dot {
  border: 2px solid var(--cf-gold);
  box-shadow: 0 0 20px rgba(200,160,48,0.5), 0 0 40px rgba(200,160,48,0.2);
}

.cf-tl-sep {
  height: 2px;
  background: rgba(200,160,48,0.18);
}

.cf-tl-sep.is-done {
  background: rgba(200,160,48,0.45);
}

/* ── 输入框 ───────────────────────────────────────────────── */

.cf-input, .cf-textarea {
  border: 1.5px solid rgba(200,160,48,0.2);
  background: var(--cf-s2);
}

.cf-input:focus, .cf-textarea:focus {
  border-color: var(--cf-gold);
  box-shadow: 0 0 0 3px rgba(200,160,48,0.1);
}

/* ── 错误框、流式预览 ─────────────────────────────────────── */

.cf-stream-preview {
  border: 1px solid rgba(200,160,48,0.2);
  border-left: 3px solid var(--cf-gold);
  background: var(--cf-s2);
}

/* ── 步骤内容面板：四角 L 形装饰 ─────────────────────────── */

/* 决议 1：cf-section 米色化（保留四角装饰线，去掉深色渐变） */
.cf-section {
  position: relative;
  padding: 32px 36px;
  background:
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 28px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 2px  28px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 28px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 2px  28px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 28px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 2px  28px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 28px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 2px  28px no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(40,30,15,0.06), 0 0 0 1px var(--accent-soft);
}

/* ── AI 选择卡片：四角 L 形装饰 ──────────────────────────── */

.cf-card.is-selected {
  background:
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 16px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    left  / 2px  16px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 16px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) top    right / 2px  16px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 16px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom left  / 2px  16px no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 16px 2px  no-repeat,
    linear-gradient(var(--cf-gold), var(--cf-gold)) bottom right / 2px  16px no-repeat,
    linear-gradient(145deg, rgba(200,160,48,0.14) 0%, rgba(200,160,48,0.06) 100%);
}

/* ── 横幅中心线 ───────────────────────────────────────────── */

body[data-mode="creation"] .hero {
  border-bottom: 1px solid var(--border);
}

/* ── Timeline 节点间隔线增强 ──────────────────────────────── */

.cf-tl-sep {
  height: 2px;
  background: linear-gradient(90deg, rgba(200,160,48,0.12) 0%, rgba(200,160,48,0.22) 50%, rgba(200,160,48,0.12) 100%);
}

.cf-tl-sep.is-done {
  background: linear-gradient(90deg, rgba(200,160,48,0.3) 0%, rgba(200,160,48,0.55) 50%, rgba(200,160,48,0.3) 100%);
}

/* ══════════════════════════════════════════════════════════════
   REDESIGN v2 — 参考图：游戏大卡风格 / 实色选中 / 胶囊按钮
   ══════════════════════════════════════════════════════════════ */

/* ── 背景：深色带景深感 ───────────────────────────────────── */

/* 决议 1：创作页不再使用独立深色主题，沿用全局米色书桌主题 */
body[data-mode="creation"] {
  background: var(--bg);
}

#panel-creation {
  background: transparent;
}

/* ── 标题装饰线：横线 + 圆点 ─────────────────────────────── */

.cf-deco-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: #e8dece;
  letter-spacing: 0.08em;
}

.cf-deco-line {
  flex: 1;
  max-width: 100px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,160,48,0.9) 100%);
  position: relative;
}

.cf-deco-line:last-child {
  background: linear-gradient(90deg, rgba(200,160,48,0.9) 0%, transparent 100%);
}

/* 圆点装饰 */
.cf-deco-line:first-child::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border: 1.5px solid rgba(200,160,48,0.9);
  border-radius: 50%;
  background: var(--cf-bg, #0e0c0a);
}

.cf-deco-line:last-child::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border: 1.5px solid rgba(200,160,48,0.9);
  border-radius: 50%;
  background: var(--cf-bg, #0e0c0a);
}

/* ── 类型卡片：大方块 / 实色选中 ─────────────────────────── */

.cf-genre-pool .cf-genre-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.cf-genre-pool .cf-genre-card {
  aspect-ratio: 1;
  padding: 18px 8px 16px;
  background: rgba(28, 23, 16, 0.92);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.cf-genre-pool .cf-genre-icon {
  font-size: 2.2rem;
  filter: grayscale(1) brightness(1.6);
  transition: filter 0.15s;
}

.cf-genre-pool .cf-genre-name {
  font-size: 0.78rem;
  color: rgba(220, 200, 170, 0.65);
  font-weight: 500;
  transition: color 0.15s;
}

.cf-genre-pool .cf-genre-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: rgba(200,160,48,0.3);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.cf-genre-pool .cf-genre-card:hover:not(:disabled) .cf-genre-icon {
  filter: grayscale(0.5) brightness(1.4);
}

/* 选中态：颜色由 inline style 决定，移除金色边框 */
.cf-genre-pool .cf-genre-card.is-active {
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}

.cf-genre-pool .cf-genre-card.is-active .cf-genre-icon {
  filter: grayscale(0) brightness(1.2);
}

.cf-genre-pool .cf-genre-card.is-active .cf-genre-name {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

/* 选中 checkmark 隐藏（颜色已经表意） */
.cf-genre-pool .cf-genre-card.is-active::after {
  display: none;
}

/* ── 胶囊形主按钮 ─────────────────────────────────────────── */

.cf-deco-btn {
  border-radius: 50px;
  padding: 13px 52px;
  border: 1.5px solid var(--cf-gold);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--cf-gold);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.cf-deco-btn:hover:not(:disabled) {
  background: rgba(200,160,48,0.12);
  box-shadow: 0 0 28px rgba(200,160,48,0.3), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}

.cf-deco-btn:active:not(:disabled) {
  transform: translateY(0);
}

.cf-deco-btn:disabled {
  border-color: rgba(200,160,48,0.25);
  color: rgba(200,160,48,0.3);
}

/* ── 宽屏利用率提升 ───────────────────────────────────────── */

.creation-flow {
  max-width: 1280px;
  padding: 0 48px 80px;
}

.cf-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cf-card-grid--wide {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.cf-genre-pool .cf-genre-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.cf-scene-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cf-char-list {
  display: grid;
  /* auto-fit：每组只有 1-2 张卡时收掉空轨，单卡撑满整行，不再偏在左侧 */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .creation-flow { padding: 0 24px 60px; }
  .cf-card-grid { grid-template-columns: 1fr 1fr; }
  .cf-card-grid--wide { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .creation-flow { padding: 0 16px 60px; }
  .cf-card-grid, .cf-card-grid--wide { grid-template-columns: 1fr; }
  .cf-char-list { grid-template-columns: 1fr; }
}

/* ── AI 加载遮罩 ──────────────────────────────────────────── */

.cf-ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.82);
  backdrop-filter: blur(4px);
  animation: cfOverlayIn 0.25s ease;
}

@keyframes cfOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cf-ai-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 56px;
  background:
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) top    left  / 24px 2px  no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) top    left  / 2px  24px no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) top    right / 24px 2px  no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) top    right / 2px  24px no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) bottom left  / 24px 2px  no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) bottom left  / 2px  24px no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) bottom right / 24px 2px  no-repeat,
    linear-gradient(var(--cf-gold, #c8a030), var(--cf-gold, #c8a030)) bottom right / 2px  24px no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 320px;
  max-width: 560px;
  text-align: center;
}

.cf-ai-cancel-btn {
  margin-top: 8px;
  color: rgba(200,160,48,0.7);
  border-color: rgba(200,160,48,0.3);
  font-size: 0.8rem;
}
.cf-ai-cancel-btn:hover {
  color: rgba(200,160,48,1);
  border-color: rgba(200,160,48,0.6);
  background: rgba(200,160,48,0.08);
}

/* 四格旋转 spinner */
.cf-ai-spinner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 40px;
  height: 40px;
}

.cf-ai-spinner span {
  border-radius: 2px;
  background: rgba(200,160,48,0.25);
  animation: cfSpinnerPulse 1.2s ease-in-out infinite;
}

.cf-ai-spinner span:nth-child(1) { animation-delay: 0s; }
.cf-ai-spinner span:nth-child(2) { animation-delay: 0.15s; }
.cf-ai-spinner span:nth-child(3) { animation-delay: 0.3s; }
.cf-ai-spinner span:nth-child(4) { animation-delay: 0.45s; }

@keyframes cfSpinnerPulse {
  0%, 100% { background: rgba(200,160,48,0.15); transform: scale(0.85); }
  50%       { background: rgba(200,160,48,0.9);  transform: scale(1); }
}

.cf-ai-overlay-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(200,160,48,0.9);
  margin: 0;
}

.cf-ai-overlay-stream {
  font-size: 0.72rem;
  color: rgba(200,180,140,0.5);
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow: hidden;
  margin: 0;
  text-align: left;
  width: 100%;
}

/* ── 角色分组显示 ─────────────────────────────────────────── */

.cf-char-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cf-char-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-gold);
  opacity: 0.75;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,160,48,0.18);
}

.cf-char-archetype {
  font-size: 0.72rem;
  color: var(--cf-text-2);
  background: rgba(200,160,48,0.08);
  border: 1px solid rgba(200,160,48,0.18);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
}

/* ── 角色卡片编辑模式 ─────────────────────────────────────── */

.cf-icon-btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(200,160,48,0.25);
  border-radius: 4px;
  color: var(--cf-text-2);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px 7px;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}

.cf-icon-btn:hover {
  border-color: var(--cf-gold);
  color: var(--cf-gold);
}

.cf-char-regen-indicator {
  font-size: 0.8rem;
  color: var(--cf-gold);
  opacity: 0.8;
}

.cf-char-card.is-editing {
  border-color: rgba(200,160,48,0.45);
}

.cf-char-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(200,160,48,0.15);
}

.cf-edit-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 8px;
}

.cf-edit-label {
  font-size: 0.72rem;
  color: var(--cf-text-2);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cf-edit-input {
  width: 100%;
  font-size: 0.82rem;
  padding: 5px 8px;
}

/* ── Structure picker grid (Step 6) ──────────────────────────────────────── */

.cf-struct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.cf-struct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,160,48,0.2);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
  color: var(--cf-text-1, #e8dcc8);
}

.cf-struct-card:hover {
  border-color: rgba(200,160,48,0.5);
  background: rgba(200,160,48,0.06);
}

.cf-struct-card.is-selected {
  border-color: var(--cf-gold, #c8a030);
  background: rgba(200,160,48,0.12);
  box-shadow: 0 0 0 1px var(--cf-gold, #c8a030);
}

.cf-struct-card.is-selected::before,
.cf-struct-card.is-selected::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--cf-gold, #c8a030);
  border-style: solid;
}
.cf-struct-card.is-selected::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.cf-struct-card.is-selected::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.cf-struct-name {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cf-gold, #c8a030);
  line-height: 1.2;
}

.cf-struct-desc {
  font-size: 0.75rem;
  color: var(--cf-text-2, #a09070);
  line-height: 1.5;
}

.cf-struct-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cf-struct-tag {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid rgba(200,160,48,0.3);
  color: var(--cf-text-2, #a09070);
  letter-spacing: 0.03em;
}

/* ── Structure zone headers ───────────────────────────────────────────────── */

.cf-struct-zone {
  margin-bottom: 32px;
}

.cf-struct-zone-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200,160,48,0.15);
}

.cf-struct-zone-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}

.cf-struct-zone-badge--primary {
  background: rgba(200,160,48,0.2);
  color: var(--cf-gold, #c8a030);
  border: 1px solid rgba(200,160,48,0.4);
}

.cf-struct-zone-badge--device {
  background: rgba(80,140,200,0.15);
  color: #6ab0e0;
  border: 1px solid rgba(80,140,200,0.35);
}

.cf-struct-zone-badge--lens {
  background: rgba(80,180,120,0.12);
  color: #70c090;
  border: 1px solid rgba(80,180,120,0.3);
}

.cf-struct-zone-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cf-text-1, #e8dcc8);
  letter-spacing: 0.04em;
}

.cf-struct-zone-rule {
  font-size: 0.72rem;
  color: var(--cf-text-2, #a09070);
  margin-left: auto;
}

.cf-struct-zone-count {
  font-weight: 700;
  color: var(--cf-gold, #c8a030);
}

/* Zone-specific card accent colors */
.cf-struct-card--device.is-selected {
  border-color: #6ab0e0;
  background: rgba(80,140,200,0.1);
  box-shadow: 0 0 0 1px #6ab0e0;
}
.cf-struct-card--device.is-selected::before,
.cf-struct-card--device.is-selected::after {
  border-color: #6ab0e0;
}
.cf-struct-card--device .cf-struct-name { color: #6ab0e0; }
.cf-struct-card--device:not(.is-selected):hover { border-color: rgba(80,140,200,0.5); background: rgba(80,140,200,0.06); }

.cf-struct-card--lens.is-selected {
  border-color: #70c090;
  background: rgba(80,180,120,0.08);
  box-shadow: 0 0 0 1px #70c090;
}
.cf-struct-card--lens.is-selected::before,
.cf-struct-card--lens.is-selected::after {
  border-color: #70c090;
}
.cf-struct-card--lens .cf-struct-name { color: #70c090; }
.cf-struct-card--lens:not(.is-selected):hover { border-color: rgba(80,180,120,0.4); background: rgba(80,180,120,0.06); }

.cf-struct-card.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Combo summary bar */
.cf-struct-combo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(200,160,48,0.06);
  border: 1px solid rgba(200,160,48,0.2);
  border-radius: 6px;
  margin-bottom: 24px;
}

.cf-struct-combo-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cf-text-2, #a09070);
  flex-shrink: 0;
}

.cf-struct-combo-value {
  font-size: 0.85rem;
  color: var(--cf-gold, #c8a030);
  font-weight: 600;
}

.cf-struct-combo-sep {
  color: var(--cf-text-2, #a09070);
  font-weight: 400;
}

/* ── One-click generate button ────────────────────────────────────────── */

.cf-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cf-one-click-btn {
  padding: 10px 22px;
  background: linear-gradient(135deg, #7a4a10 0%, #c8801a 100%);
  border: 1px solid rgba(200,128,26,0.5);
  border-radius: 6px;
  color: #fff8e8;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

.cf-one-click-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.cf-one-click-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none;
}

.cf-one-click-hint {
  font-size: 0.75rem;
  color: var(--cf-text-2, #a09070);
  margin: -4px 0 8px;
  opacity: 0.75;
}

/* ── Auto-gen progress panel ──────────────────────────────────────────── */

.cf-auto-progress {
  max-width: 680px;
  margin: 32px auto;
  padding: 28px 32px;
  background: var(--cf-surface, #181510);
  border: 1px solid rgba(200,160,48,0.18);
  border-radius: 10px;
}

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

.cf-ap-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cf-gold, #c8a030);
  letter-spacing: 0.04em;
}

.cf-ap-cancel {
  background: none;
  border: 1px solid rgba(200,80,60,0.4);
  border-radius: 5px;
  color: rgba(220,100,80,0.8);
  font-size: 0.8rem;
  padding: 5px 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.cf-ap-cancel:hover { opacity: 0.7; }

/* Step track */
.cf-ap-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.cf-ap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
}

.cf-ap-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cf-ap-step.is-done .cf-ap-dot {
  background: rgba(60,180,80,0.2);
  border-color: rgba(60,180,80,0.6);
  color: #6de090;
}

.cf-ap-step.is-current .cf-ap-dot {
  background: rgba(200,160,48,0.18);
  border-color: rgba(200,160,48,0.7);
  color: var(--cf-gold, #c8a030);
  box-shadow: 0 0 8px rgba(200,160,48,0.3);
}

.cf-ap-step-name {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

.cf-ap-step.is-done .cf-ap-step-name { color: rgba(100,220,120,0.8); }
.cf-ap-step.is-current .cf-ap-step-name { color: var(--cf-gold, #c8a030); }

.cf-ap-sep {
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  margin-bottom: 22px;
}

/* Status */
.cf-ap-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cf-ap-phase {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}

.cf-ap-score-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(200,160,48,0.15);
  border: 1px solid rgba(200,160,48,0.35);
  color: var(--cf-gold, #c8a030);
}

.cf-ap-retry-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(200,100,30,0.15);
  border: 1px solid rgba(200,100,30,0.35);
  color: #e0a060;
}

/* Preview stream */
.cf-ap-preview {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* Error */
.cf-ap-error {
  font-size: 0.82rem;
  color: #e07060;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(200,60,40,0.1);
  border-radius: 5px;
}

/* Log */
.cf-ap-log {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-ap-log-entry {
  font-size: 0.78rem;
}

.cf-ap-log-text {
  color: rgba(255,255,255,0.45);
}

.cf-ap-log-entry.is-pass .cf-ap-log-text { color: rgba(160,230,170,0.75); }
.cf-ap-log-entry.is-fail .cf-ap-log-text { color: rgba(230,140,120,0.75); }

/* ── Eval Rules Modal ──────────────────────────────────────────────────── */

.er-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 4, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.er-panel {
  background: var(--surface-2, #211d14);
  border: 1px solid rgba(200,160,48,0.25);
  border-radius: 10px;
  padding: 28px 30px;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: fadeUp 180ms ease both;
}

.er-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.er-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cf-gold, #c8a030);
  margin: 0;
  letter-spacing: 0.03em;
}

.er-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
  line-height: 1.6;
}

.er-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
}

.er-th {
  text-align: left;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.er-row td { border-bottom: 1px solid rgba(255,255,255,0.05); }
.er-row:last-child td { border-bottom: none; }

.er-cell {
  padding: 9px 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  vertical-align: middle;
}

.er-cell--label {
  font-weight: 500;
}

.er-step-name {
  display: block;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2px;
}

.er-step-note {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.4;
}

.er-cell--num {
  text-align: center;
  white-space: nowrap;
}

.er-th--num {
  text-align: center;
  white-space: nowrap;
}

.er-input {
  width: 64px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(255,255,255,0.85);
  padding: 5px 6px;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.15s;
}

.er-input:focus {
  outline: none;
  border-color: rgba(200,160,48,0.5);
}

.er-footer {
  display: flex;
  justify-content: flex-end;
}

.cf-rules-btn {
  background: none;
  border: 1px solid rgba(200,160,48,0.2);
  border-radius: 5px;
  color: rgba(200,160,48,0.5);
  font-size: 0.95rem;
  padding: 6px 10px;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}

.cf-rules-btn:hover {
  color: rgba(200,160,48,0.9);
  border-color: rgba(200,160,48,0.5);
}

.cf-deco-btn--small {
  padding: 7px 18px;
  font-size: 0.82rem;
}

/* ── 模式选择器 ─────────────────────────────────── */
.mode-picker-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.mode-picker-panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 28px 24px;
  width: min(600px, 92vw);
  position: relative;
}
.mode-picker-close {
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px;
  background: transparent; border: none; border-radius: 14px;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--muted);
  transition: background 120ms;
}
.mode-picker-close:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
.mode-picker-hint {
  margin: 16px 0 0;
  font-size: .7rem;
  color: var(--muted-2);
  text-align: center;
}
.mode-picker-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 16px;
}
.mode-picker-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 820px) { .mode-picker-cards { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-3); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 20px 18px; text-align: left;
  cursor: pointer; transition: border-color .15s;
}
.mode-card:hover { border-color: var(--accent); }
.mode-card--pro { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.mode-card--pro:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-3)); }
.mode-card__icon { font-size: 1.4rem; line-height: 1; }
.mode-card h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.mode-card p { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; }
.mode-card__tag { font-size: .7rem; color: var(--accent); margin-top: 4px; }

/* ── 精品创作主体 ───────────────────────────────── */
.pro-creation { max-width: 780px; margin: 0 auto; padding: 24px 16px; }
.pro-creation__header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.pro-creation__title {
  font-size: 1.15rem; font-weight: 600; margin: 0; flex: 1;
  color: var(--ink); letter-spacing: 0.02em;
  /* 让标题视觉上不像按钮：去掉任何边框/底色/padding */
  background: transparent; border: none; padding: 0;
  cursor: default;
}
.pro-creation__subtitle { font-size: .82rem; color: var(--muted); margin: 0; }
.pro-header-actions { margin-left: auto; }

/* anchor step */
.pro-anchor-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px;
}
.pro-anchor-genres { margin-bottom: 20px; }
.pro-anchor-textarea {
  width: 100%; min-height: 120px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; font-size: .88rem; resize: vertical; color: var(--ink);
  font-family: inherit;
}
.pro-anchor-textarea:focus { outline: none; border-color: var(--accent); }
.pro-anchor-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.pro-error { color: var(--critical); font-size: .82rem; margin: 8px 0 0; }

/* workbenches step */
.pro-anchor-summary {
  background: var(--surface-3); border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 4px; margin-bottom: 16px;
}
.pro-anchor-summary__label {
  font-size: .68rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 4px;
  font-weight: 600;
}
.pro-anchor-summary__text {
  font-size: .88rem;
  color: var(--ink-2);
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
}
.pro-wb-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.pro-wb-tab {
  padding: 8px 18px; border-radius: 20px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: .85rem; cursor: pointer; color: var(--ink);
  transition: background 150ms, border-color 150ms;
}
.pro-wb-tab--empty   { color: var(--muted-2); opacity: 0.72; }
.pro-wb-tab--ongoing { color: var(--accent); border-color: var(--accent); }
.pro-wb-tab--done    { color: var(--accent); border-color: var(--accent); background: rgba(180, 110, 50, 0.08); }
.pro-wb-tab.is-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(180, 110, 50, 0.25);
}
.pro-wb-panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px; min-height: 260px;
}
.pro-wb-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 220px; color: var(--muted); font-size: .9rem;
}
.pro-wb-loading__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(180, 110, 50, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pro-spin 1s linear infinite;
}
@keyframes pro-spin { to { transform: rotate(360deg); } }
.pro-wb-loading__hint {
  font-size: .75rem; color: var(--muted-2);
}
.pro-wb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; height: 220px; color: var(--muted); font-size: .85rem;
}
.pro-wb-empty__hint {
  margin: 0; max-width: 480px; text-align: center; line-height: 1.6;
}
.pro-qa-list { display: flex; flex-direction: column; gap: 20px; }
.pro-qa-item { display: flex; flex-direction: column; gap: 8px; }
.pro-qa-question {
  font-size: .88rem; font-weight: 500; color: var(--ink);
  margin: 0; line-height: 1.5;
}
.pro-qa-answer {
  width: 100%; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; font-size: .85rem; resize: vertical;
  color: var(--ink); font-family: inherit;
}
.pro-qa-answer:focus { outline: none; border-color: var(--accent); }
.pro-wb-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* assembling step */
.pro-assembling-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 300px; gap: 12px;
}
.pro-assembling-title { font-size: 1rem; font-weight: 500; margin: 0; }
.pro-assembling-sub { font-size: .82rem; color: var(--muted); margin: 0; }

/* ── Node Hollywood tooltip ─────────────────────────────── */
.node-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  position: relative;
  margin-left: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}
.node-tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a2e;
  color: #e8e8e8;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 10px 14px;
  width: 300px;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 400;
  white-space: pre-wrap;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.node-tooltip-trigger:hover::after { opacity: 1; }

/* ── Creation flow new step styles ──────────────────────── */
.cf-form-stack { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.cf-label-req  { font-size: 12px; color: #ff6b6b; margin-left: 4px; }

.cf-rec-banner {
  padding: 14px 16px;
  background: rgba(76,175,80,0.08);
  border: 1px solid rgba(76,175,80,0.28);
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.cf-rec-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(76,175,80,0.22);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
}
.cf-rec-reason { font-size: 13px; color: var(--cf-text-2, var(--ink-2)); }

.cf-act-progress { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.cf-act-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cf-s2, var(--surface-3));
  border: 2px solid var(--cf-border, var(--border));
  transition: all 0.2s;
}
.cf-act-dot.is-done    { background: #4caf50; border-color: #4caf50; }
.cf-act-dot.is-current { border-color: var(--cf-gold, var(--accent)); background: var(--cf-s3, var(--accent-soft)); }

.cf-act-nodes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cf-act-node {
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--cf-s1, var(--surface-2));
  border: 1px solid var(--cf-border, var(--border));
  transition: border-color 0.2s, background 0.2s;
}
.cf-act-node.is-generated {
  border-color: rgba(76,175,80,0.38);
  background: rgba(76,175,80,0.07);
}
.cf-act-node-name    { font-weight: 600; font-size: 14px; display: block; margin-bottom: 4px; color: var(--cf-text-1, var(--ink-1)); }
.cf-act-node-summary { font-size: 13px; color: var(--cf-text-2, var(--ink-2)); margin: 0; line-height: 1.55; }
.cf-act-node-shift { font-style: normal; font-size: 12px; color: var(--cf-gold, var(--accent)); }
.cf-act-node-pending { font-size: 12px; color: var(--cf-text-3, var(--ink-3)); }

.cf-confirm-acts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.cf-confirm-act {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--cf-s1, var(--surface-2));
  border: 1px solid var(--cf-border, var(--border));
  border-radius: 6px;
}
.cf-confirm-act-title { font-weight: 500; color: var(--cf-text-1, var(--ink-1)); }
.cf-confirm-act-count { font-size: 12px; color: var(--cf-text-3, var(--ink-3)); }

/* ── Step 1: AI 概念辅助 ──────────────────────────────────── */
.cf-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.cf-ai-btn {
  font-size: 12px; padding: 6px 12px;
  background: linear-gradient(135deg, rgba(200,164,90,0.18), rgba(200,164,90,0.08));
  border: 1px solid rgba(200,164,90,0.35);
  color: #c8a45a; border-radius: 6px;
  cursor: pointer; transition: all 0.18s ease;
  font-weight: 500;
}
.cf-ai-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(200,164,90,0.28), rgba(200,164,90,0.14));
  border-color: rgba(200,164,90,0.55);
}
.cf-ai-btn:disabled { opacity: 0.55; cursor: progress; }

.cf-stream-preview {
  background: rgba(0,0,0,0.04); border: 1px dashed rgba(200,164,90,0.3);
  border-radius: 8px; padding: 10px 14px; margin-top: 4px;
}
.cf-stream-label { font-size: 12px; color: #c8a45a; margin: 0 0 6px; }
.cf-stream-text {
  font-size: 12px; color: rgba(0,0,0,0.6); margin: 0;
  white-space: pre-wrap; max-height: 120px; overflow: hidden;
  font-family: inherit;
}
[data-theme="dark"] .cf-stream-text { color: rgba(255,255,255,0.6); }

.cf-concept-choices { margin-top: 4px; }
.cf-choices-title {
  font-size: 13px; color: #6a6055; margin: 0 0 12px;
  font-weight: 500; letter-spacing: 0.02em;
}
[data-theme="dark"] .cf-choices-title { color: #9a9080; }

.cf-choices-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.cf-choice-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all 0.18s ease;
}
.cf-choice-card:hover {
  border-color: rgba(200,164,90,0.5);
  box-shadow: 0 4px 16px rgba(200,164,90,0.12);
  transform: translateY(-1px);
}
.cf-choice-card.is-selected {
  border-color: var(--accent, #b5601d);
  border-width: 2px;
  background: rgba(181,96,29,0.06);
  box-shadow: 0 4px 16px rgba(181,96,29,0.15);
}
[data-theme="dark"] .cf-choice-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .cf-choice-card:hover { border-color: rgba(200,164,90,0.4); }

.cf-choice-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf-choice-tag {
  font-size: 12px; padding: 2px 8px; border-radius: 4px;
  background: rgba(200,164,90,0.15); color: #c8a45a;
  letter-spacing: 0.04em; font-weight: 600;
}
.cf-choice-title { font-size: 15px; color: #2a2620; }
[data-theme="dark"] .cf-choice-title { color: #e0d8c8; }

.cf-choice-hook {
  font-size: 13px; color: rgba(0,0,0,0.78); margin: 0;
  line-height: 1.5;
}
[data-theme="dark"] .cf-choice-hook { color: rgba(255,255,255,0.78); }

.cf-choice-meta {
  font-size: 12px; color: rgba(0,0,0,0.55); margin: 0;
  line-height: 1.5;
}
.cf-choice-meta b { color: rgba(0,0,0,0.7); font-weight: 500; }
[data-theme="dark"] .cf-choice-meta { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .cf-choice-meta b { color: rgba(255,255,255,0.7); }

.cf-choice-pick {
  margin-top: auto; align-self: flex-start;
  font-size: 12px; padding: 6px 14px;
  background: rgba(200,164,90,0.92); color: #fff;
  border: none; border-radius: 6px;
  cursor: pointer; font-weight: 500;
  transition: all 0.18s ease;
}
.cf-choice-pick:hover { background: #c8a45a; }


/* ============================================================
   A 轮 · 视觉层级与节奏升级
   目标：建立强层级对比、引入卡片呼吸感、统一留白节拍
   ============================================================ */

/* ── A1 · Typography 层级对比 ─────────────────────────────── */

/* card 头部 h3 从 0.95rem 提升为可读主标题 */
.summary-card .list-card__head > div > h3,
.summary-card > .list-card__head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* eyebrow/section-label 加细节：更窄更轻，与主标题拉开对比 */
.summary-card .section-label,
.summary-card .eyebrow {
  font-size: 0.645rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

/* 编辑器中的 section-label（动机与秘密/弧光变化/性格特质/心理剖面/备注）
   改为带装饰线的分组头，形成强视觉区隔 */
.character-workbench section > .section-label,
.relationship-workbench--dual section > .section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
  padding-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-1);
  text-transform: none;
  border-bottom: 1px solid var(--border);
}
/* 装饰线：在 label 文本后延伸；当有 lockBadge 时，让文本占自然宽度，线居中，badge 最后 */
.character-workbench section > .section-label > span:first-child,
.relationship-workbench--dual section > .section-label > span:first-child {
  flex-shrink: 0;
}
.character-workbench section > .section-label::after,
.relationship-workbench--dual section > .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-accent), transparent 70%);
  order: 5;
}
/* lockBadge 推到最右 */
.character-workbench section > .section-label > .field-lock,
.relationship-workbench--dual section > .section-label > .field-lock {
  order: 10;
  flex-shrink: 0;
}
/* hint「（多选）」等辅助文字取消 uppercase 与字距，视觉轻化 */
.character-workbench section > .section-label .section-label__hint,
.relationship-workbench--dual section > .section-label .section-label__hint {
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

/* field label 更紧凑、字重稍提 */
.character-workbench label,
.relationship-workbench--dual label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* ── A2 · Card 视觉语言 ──────────────────────────────────── */

/* summary-card 增加呼吸感 + 基础阴影 + hover 加强 */
.summary-card {
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(40, 30, 15, 0.08);
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.summary-card:hover {
  box-shadow: var(--shadow-sm);
}

/* 列表卡片 head 下方加细分割线，划分 head 与 body */
.summary-card .list-card__head {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
/* 但：compact card 和只有 head 的场合不加线 */
.summary-card.summary-card--compact .list-card__head,
.summary-card .list-card__head:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* list-select 左侧 accent bar（激活态）—— 比纯底色更有选中感 */
.list-select {
  position: relative;
  padding-left: 14px;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.list-select::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 140ms ease;
}
.list-select:hover {
  transform: translateX(1px);
  box-shadow: 0 1px 3px rgba(40, 30, 15, 0.06);
}
.list-select.is-active::before {
  background: var(--accent);
}

/* ── A3 · 留白节奏 ────────────────────────────────────────── */

/* .stack 间距按层级区分 */
.summary-card > .stack { gap: 22px; }
.character-workbench .stack,
.relationship-workbench--dual .stack { gap: 26px; }

/* section 内部 form-grid 更紧凑 */
.character-workbench section > .form-grid,
.relationship-workbench--dual section > .form-grid {
  gap: 12px;
}
.character-workbench section > .form-grid.form-grid--compact,
.relationship-workbench--dual section > .form-grid.form-grid--compact {
  gap: 10px 14px;
}

/* 工作台之间加强间距节奏 */
.scene-workbench--triple,
.relationship-workbench--dual {
  gap: 18px;
}

/* ── A4 · Input 聚焦微反馈（A 轮顺手） ─────────────────────── */

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* ============================================================
   B 轮 · 色彩系统语义化
   六步工作流各赋一个辅色；当前步骤通过 body[data-active-step]
   注入 --step-hue / --step-hue-soft，让全局 accent 呼吸感带上
   "我在哪一步" 的身份感
   ============================================================ */

/* 默认：无 step 时沿用全局 accent */
:root {
  --step-hue: var(--accent);
  --step-hue-soft: var(--accent-soft);
  --step-hue-glow: var(--accent-glow);
}

body[data-active-step="structure"] {
  --step-hue: #3d5a80;            /* 炭蓝 · 结构骨架 */
  --step-hue-soft: rgba(61, 90, 128, 0.10);
  --step-hue-glow: rgba(61, 90, 128, 0.22);
}
body[data-active-step="characters"] {
  --step-hue: #ba5616;            /* 暖橙 · 人物核心（同系统 accent） */
  --step-hue-soft: rgba(186, 86, 22, 0.10);
  --step-hue-glow: rgba(186, 86, 22, 0.22);
}
body[data-active-step="relationships"] {
  --step-hue: #6a3a8a;            /* 深紫 · 关系张力 */
  --step-hue-soft: rgba(106, 58, 138, 0.10);
  --step-hue-glow: rgba(106, 58, 138, 0.22);
}
body[data-active-step="plots"] {
  --step-hue: #2e6e4b;            /* 墨绿 · 剧情开发 */
  --step-hue-soft: rgba(46, 110, 75, 0.10);
  --step-hue-glow: rgba(46, 110, 75, 0.22);
}
body[data-active-step="locks"] {
  --step-hue: #a8751c;            /* 金棕 · 沉淀锁定 */
  --step-hue-soft: rgba(168, 117, 28, 0.10);
  --step-hue-glow: rgba(168, 117, 28, 0.22);
}
body[data-active-step="scenes"] {
  --step-hue: #2b5f8a;            /* 靛青 · 场景拆解 */
  --step-hue-soft: rgba(43, 95, 138, 0.10);
  --step-hue-glow: rgba(43, 95, 138, 0.22);
}

/* 导航激活态使用 step-hue */
body[data-active-step] .step-button.is-active {
  background: var(--step-hue);
  border-color: var(--step-hue);
  color: #fff;
  box-shadow: 0 2px 10px var(--step-hue-glow);
}
body[data-active-step] .step-button.is-active .step-button__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
body[data-active-step] .step-button.is-active .step-button__label {
  color: #fff;
}

/* 编辑器 section 分组头颜色跟随 step-hue */
body[data-active-step] .character-workbench section > .section-label,
body[data-active-step] .relationship-workbench--dual section > .section-label {
  color: var(--step-hue);
}
body[data-active-step] .character-workbench section > .section-label::after,
body[data-active-step] .relationship-workbench--dual section > .section-label::after {
  background: linear-gradient(to right, var(--step-hue-glow), transparent 70%);
}

/* list-select 激活左条跟随 step-hue */
body[data-active-step] .list-select.is-active::before {
  background: var(--step-hue);
}

/* 人物卡 role label、tab button 激活态 */
body[data-active-step] .char-card__role {
  color: var(--step-hue);
}
body[data-active-step] .tab-button.is-active {
  color: var(--step-hue);
  border-bottom-color: var(--step-hue);
}

/* Input 聚焦 glow 使用 step-hue */
body[data-active-step] input[type="text"]:focus,
body[data-active-step] input[type="number"]:focus,
body[data-active-step] textarea:focus,
body[data-active-step] select:focus {
  border-color: var(--step-hue);
  box-shadow: 0 0 0 3px var(--step-hue-soft);
}

/* 选中项目卡片、主按钮（仅工作台内）悬停使用 step-hue */
body[data-active-step] .char-card:hover {
  border-color: var(--step-hue);
}

/* ============================================================
   C 轮 · 微交互与状态反馈
   ============================================================ */

/* ── C1 · 按钮阶梯反馈 ──────────────────────────────────── */

.button {
  transition: background 160ms ease, border-color 160ms ease,
              color 160ms ease, box-shadow 160ms ease,
              transform 80ms ease;
}
.button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.button--ghost:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.button--tiny:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

/* ── C2 · 保存按钮状态 pill ─────────────────────────────── */

/* 已同步 / 待保存 / 保存中 — 在 hero 区 chip 上加视觉差异 */
.chip--save {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 200ms ease, color 200ms ease;
}
.chip--save-synced {
  background: var(--success-soft);
  color: var(--success);
  border-color: transparent;
}
.chip--save-synced::before {
  content: "✓ ";
  font-weight: 700;
}
.chip--save-dirty {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: transparent;
  animation: dirtyPulse 1.8s ease-in-out infinite;
}
.chip--save-dirty::before {
  content: "● ";
  font-weight: 700;
}
.chip--save-saving {
  background: var(--info-soft);
  color: var(--info);
  border-color: transparent;
}
.chip--save-saving::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  vertical-align: middle;
  animation: saveSpin 700ms linear infinite;
}

@keyframes dirtyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes saveSpin {
  to { transform: rotate(360deg); }
}

/* Save button 自身 dirty 态：主色 + subtle glow */
.button--primary.is-dirty {
  box-shadow: 0 0 0 3px var(--warning-soft), 0 2px 8px var(--accent-glow);
}
.button--primary.is-saving {
  opacity: 0.7;
  pointer-events: none;
}

/* ── C3 · AI 生成 skeleton 占位 ─────────────────────────── */

.ai-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--surface-1) 0%,
    var(--surface-hover) 50%,
    var(--surface-1) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.ai-skeleton--line { height: 12px; margin: 6px 0; }
.ai-skeleton--line-short { width: 60%; }
.ai-skeleton--line-mid { width: 80%; }

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── C4 · Chip 可点击 hover 反馈 ────────────────────────── */

.ref-chip {
  transition: background 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 80ms ease;
}
.ref-chip:hover:not(.is-active) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.ref-chip.is-active {
  background: var(--step-hue, var(--accent));
  color: white;
  border-color: var(--step-hue, var(--accent));
}
.ref-chip:active:not(:disabled) {
  transform: scale(0.96);
}

/* ── C5 · Loading 提示统一样式 ───────────────────────────── */

.scene-summary-hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  font-style: normal;
}

/* ── C6 · Runtime status 容器 ──────────────────────────── */

.runtime-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.runtime-status > * { white-space: nowrap; flex-shrink: 0; }
/* 顶部状态变成静态文字标签：去边框/去背景，仅余文字 + 状态点 */
.runtime-status .chip--soft {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
}
.runtime-status .chip--save {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 500;
}
.runtime-status:empty { display: none; }

/* ============================================================
   D 轮 · 人物页 split layout（rail + editor + 可选 compare）
   ============================================================ */

.character-workbench--split {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.char-rail-pane {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
}
.char-rail-pane .summary-card {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Rail 角色组 */
.char-rail-group + .char-rail-group { margin-top: 14px; }
.char-rail-group__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
  padding-left: 4px;
}
.char-rail-group__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Rail item（紧凑卡片） */
.char-rail-item {
  padding: 10px 12px 10px 14px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.char-rail-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.char-rail-item__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.char-rail-item__role {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--step-hue, var(--accent));
  text-transform: uppercase;
  font-weight: 600;
}
.char-rail-item__goal {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.char-rail-item.is-compare {
  border-color: var(--step-hue, var(--accent));
  background: var(--step-hue-soft, var(--accent-soft));
}
.char-rail-item.is-compare::before { background: var(--step-hue, var(--accent)); opacity: 0.5; }

/* 有 compare 时：编辑器 + compare 并排 */
.char-editor-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
}
.char-editor-pane .field textarea { min-height: 64px; }
.char-editor-pane .form-grid--compact { gap: 10px 16px; }
.char-editor-pane.has-compare {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.char-editor-head {
  /* 顶部工具条对齐 */
}

.char-compare-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 0.78rem;
}
.char-compare-trigger__label {
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.char-compare-trigger select {
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 4px;
}
.char-compare-trigger select:focus {
  box-shadow: none;
}

/* Compare card（只读侧） */
.char-compare-card {
  background: var(--surface-1);
  border-style: dashed;
  border-color: var(--step-hue-glow, var(--border-accent));
}
.char-compare__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.char-compare__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.char-compare__role {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--step-hue, var(--accent));
  text-transform: uppercase;
  margin: 4px 0 0;
  font-weight: 600;
}
.char-compare__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.char-compare-field__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.char-compare-field__value {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}
.char-compare-field__value--empty {
  color: var(--muted-2);
}

/* 窄屏降级 */
@media (max-width: 1200px) {
  .character-workbench--split {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .char-editor-pane.has-compare {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .character-workbench--split {
    grid-template-columns: 1fr;
  }
  .char-rail-pane {
    position: static;
    max-height: none;
  }
}

/* ============================================================
   E 轮 · 心理剖面视觉升级
   MBTI 16 型 · 马斯洛八层需求上限
   ============================================================ */

.psych-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.psych-details__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--surface-1);
}
.psych-details__summary::-webkit-details-marker { display: none; }
.psych-details__summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s;
}
.psych-details[open] .psych-details__summary::before { transform: rotate(90deg); }
.psych-details > .psych-block {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.psych-details > .psych-block + .psych-block { border-top: 1px solid var(--border); }
.psych-block {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.psych-block__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ── MBTI 16 型 · 紧凑 4×4 网格 ───────────────────── */

.mbti-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbti-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.mbti-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mbti-legend__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mbti-group-color);
}
.mbti-legend__item--analyst  { --mbti-group-color: #6a3a8a; }
.mbti-legend__item--diplomat { --mbti-group-color: #2e7d52; }
.mbti-legend__item--sentinel { --mbti-group-color: #1e5fa8; }
.mbti-legend__item--explorer { --mbti-group-color: #b45309; }

.mbti-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.mbti-cell {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--mbti-group-color, var(--border-strong));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-width: 0;
  transition: transform 120ms ease, box-shadow 120ms ease,
              border-color 120ms ease, background 120ms ease;
}
.mbti-cell__code {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  flex-shrink: 0;
}
.mbti-cell__name {
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbti-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.mbti-cell.is-active {
  background: var(--step-hue, var(--accent));
  border-color: var(--step-hue, var(--accent));
}
.mbti-cell.is-active .mbti-cell__code,
.mbti-cell.is-active .mbti-cell__name {
  color: #fff;
}

.mbti-cell--analyst  { --mbti-group-color: #6a3a8a; }
.mbti-cell--diplomat { --mbti-group-color: #2e7d52; }
.mbti-cell--sentinel { --mbti-group-color: #1e5fa8; }
.mbti-cell--explorer { --mbti-group-color: #b45309; }

@media (max-width: 900px) {
  .mbti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 性格特质只读 chip（AI 识别结果） ─────────────── */

.ref-chip--readonly {
  cursor: default;
  pointer-events: none;
}
.ref-chip--readonly:not(.is-active) {
  opacity: 0.4;
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.trait-pool .ref-chip--readonly.is-active {
  background: var(--step-hue, var(--accent));
  border-color: var(--step-hue, var(--accent));
  color: #fff;
  opacity: 1;
}

/* ── 马斯洛 · 需求上限（单选） ───────────────────── */

/* 上限层：满格填充高亮 */
.maslow-chip.is-ceiling {
  background: var(--step-hue, var(--accent));
  border-color: var(--step-hue, var(--accent));
  box-shadow: 0 0 0 3px var(--step-hue-soft, var(--accent-soft)),
              0 4px 14px var(--step-hue-glow, var(--accent-glow));
}
.maslow-chip.is-ceiling .maslow-chip__num {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.maslow-chip.is-ceiling .maslow-chip__label { color: #fff; }

/* 上限以下：半填充（也被驱动，但不是峰值） */
.maslow-chip.is-below {
  background: var(--step-hue-soft, var(--accent-soft));
  border-color: var(--step-hue-glow, var(--border-accent));
}
.maslow-chip.is-below .maslow-chip__label {
  color: var(--step-hue, var(--accent));
}
.maslow-chip.is-below .maslow-chip__num {
  background: var(--surface-2);
  color: var(--step-hue, var(--accent));
}

.maslow-row__note {
  margin: 4px 2px 0;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Hover 气泡 tooltip（data-tooltip 驱动） ───────── */

[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 320px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--surface-1);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow);
  animation: tooltipFade 160ms ease both;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  pointer-events: none;
  z-index: 100;
  animation: tooltipFade 160ms ease both;
}
@keyframes tooltipFade {
  from { opacity: 0; transform: translateX(-50%) translateY(3px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 靠近顶部的元素：tooltip 翻到下方 */
.psych-block--mbti [data-tooltip]:hover::after,
.psych-block--mbti [data-tooltip]:focus-visible::after,
.maslow-chip[data-tooltip]:hover::after,
.maslow-chip[data-tooltip]:focus-visible::after {
  /* 默认向上；若被遮挡，可手动改方向 */
}

/* ── 马斯洛八层 · 单行多选 ──────────────────────────── */

.maslow-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maslow-row__axis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 4px;
}
.maslow-row__axis-left {
  grid-column: 1 / span 4;
  color: var(--warning);
  text-align: left;
}
.maslow-row__axis-mid {
  grid-column: 5 / span 2;
  color: var(--info);
  text-align: center;
}
.maslow-row__axis-right {
  grid-column: 7 / span 2;
  color: var(--success);
  text-align: right;
}
.maslow-row__chips {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.maslow-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  min-width: 0;
  transition: all 140ms ease;
}
.maslow-chip__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}
.maslow-chip__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.maslow-chip--deficiency { border-top-color: rgba(180, 83, 9, 0.5); }
.maslow-chip--growth { border-top-color: rgba(30, 95, 168, 0.5); }
.maslow-chip--peak { border-top-color: rgba(46, 125, 82, 0.5); }

.maslow-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.maslow-chip.is-active {
  background: var(--step-hue, var(--accent));
  border-color: var(--step-hue, var(--accent));
  box-shadow: 0 0 0 3px var(--step-hue-soft, var(--accent-soft));
}
.maslow-chip.is-active .maslow-chip__num {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.maslow-chip.is-active .maslow-chip__label {
  color: #fff;
}

@media (max-width: 900px) {
  .maslow-row__axis,
  .maslow-row__chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .maslow-row__axis-left { grid-column: 1 / span 2; }
  .maslow-row__axis-mid { grid-column: 3 / span 1; text-align: left; }
  .maslow-row__axis-right { grid-column: 4 / span 1; }
}

/* 步骤完成态 + 下一步 CTA */
.step-button.is-completed .step-button__count {
  background: #cfe6c8;
  color: #2c5e2c;
}
.step-button.is-completed { opacity: 0.85; }
/* 进入下一步降为 ghost，避免和"保存"两个橙色 primary 同屏 */
/* 「进入下一步」CTA 固定槽：锚在右侧状态簇左缘，位置不随激活步标签宽度漂移 */
.step-cta-slot { display: flex; align-items: center; flex-shrink: 0; margin-right: 6px; }
.step-cta-slot:empty { display: none; }
.step-cta-slot .step-next-cta { margin-left: 0; }

.step-next-cta {
  margin-left: 12px;
  padding: 7px 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.step-next-cta:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* 工作台步骤底部导航：跟随内容的「上一步 / 下一步」 */
.workflow-step-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 14px 4px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.workflow-step-footer[hidden] { display: none; }
.workflow-step-footer .step-next-cta { margin-left: 0; }

/* 项目总览（常驻主页） */
.overview { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ov-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ov-format-badge {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--border-accent); border-radius: 12px; padding: 2px 10px; margin-bottom: 6px;
}
.ov-title { margin: 0; font-size: 1.5rem; }
.ov-logline { margin: 10px 0 0; color: var(--text-1); line-height: 1.6; }
.ov-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ov-tag { font-size: 12px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 2px 9px; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-card--wide { grid-column: 1 / -1; }
.ov-core-row { display: flex; gap: 10px; margin-top: 8px; line-height: 1.55; }
.ov-core-key { flex: 0 0 64px; color: var(--text-2); font-size: 13px; }
.ov-core-val { flex: 1; }
.ov-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ov-act-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  background: var(--surface-2, rgba(255,255,255,0.04)); border-radius: 10px; padding: 5px 11px;
}
.ov-act-chip em { font-style: normal; color: var(--text-2); font-size: 11px; }
.ov-arc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ov-arc-node {
  font-size: 13px; font-weight: 500;
  background: var(--surface-2, rgba(255,255,255,0.04)); border-radius: 10px; padding: 5px 12px;
}
.ov-arc-sep { color: var(--accent); font-size: 13px; }
.ov-char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ov-char-card { background: var(--surface-2, rgba(255,255,255,0.04)); border-radius: 12px; padding: 11px 14px; }
.ov-char-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ov-char-name { font-weight: 700; font-size: 15px; }
.ov-char-role-badge { font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 1px 7px; }
.ov-char-arch { font-size: 12px; color: var(--text-2); }
.ov-char-line { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-1); }
.ov-char-k { display: inline-block; min-width: 34px; color: var(--text-2); margin-right: 6px; }
@media (max-width: 720px) { .ov-char-grid { grid-template-columns: 1fr; } }
.ov-progress { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ov-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  background: var(--surface-2, rgba(255,255,255,0.04)); border: none; border-radius: 12px;
  padding: 12px 22px; transition: background 120ms;
}
.ov-stat:hover { background: var(--accent-soft); }
.ov-stat-num { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.ov-stat-label { font-size: 12px; color: var(--text-2); }
.ov-empty { color: var(--text-2); margin-top: 8px; font-size: 13px; }
@media (max-width: 860px) { .ov-grid { grid-template-columns: 1fr; } }

/* ========================================================================== */
/* 剧本撰写页 (screenplay) */
/* ========================================================================== */
.screenplay-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screenplay-page__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.screenplay-page__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  flex: 1 1 480px;
}
.screenplay-page__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.screenplay-page__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
.screenplay-page__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: 4px;
}
.screenplay-scene-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fbf6ec;
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms;
}
.screenplay-scene-item:hover {
  background: #f4ebd8;
  border-color: rgba(180, 140, 90, 0.45);
}
.screenplay-scene-item.is-active {
  background: #ece0c3;
  border-color: rgba(180, 110, 50, 0.6);
}
.screenplay-scene-item__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.screenplay-scene-item__order {
  font-size: 12px;
  color: rgba(70, 50, 30, 0.55);
  flex-shrink: 0;
}
.screenplay-scene-item__title {
  font-weight: 600;
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screenplay-scene-item__status {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.screenplay-scene-item__status.is-done  { background: #cfe6c8; color: #2c5e2c; }
.screenplay-scene-item__status.is-draft { background: #f4dfb8; color: #7a4a18; }
.screenplay-scene-item__status.is-empty { background: #ebe3d3; color: #888070; }
.screenplay-scene-item__meta {
  font-size: 12px;
  color: rgba(70, 50, 30, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screenplay-editor {
  background: #fdfaf2;
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.screenplay-editor__head {
  border-bottom: 1px solid rgba(180, 140, 90, 0.2);
  padding-bottom: 10px;
}
.screenplay-editor__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.screenplay-editor__title-row h3 {
  margin: 0;
  font-size: 18px;
}
.screenplay-editor__slug {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 600;
  color: rgba(70, 50, 30, 0.85);
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.screenplay-editor__meta {
  font-size: 13px;
  color: rgba(70, 50, 30, 0.65);
  margin-top: 4px;
}
.screenplay-editor__toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.screenplay-editor__hint {
  margin-left: auto;
  font-size: 12px;
  color: rgba(70, 50, 30, 0.55);
}

/* ── 幕评师面板 ─────────────────────────────────────────── */
.rater-panel {
  margin: 12px 0;
  padding: 16px 20px;
  border: 1px solid var(--border-accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rater-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rater-panel__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.rater-panel__overall {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink-1);
  margin: 4px 0 0;
  line-height: 1;
}
.rater-panel__overall-max { font-size: 1rem; color: var(--muted); font-weight: 500; }
.rater-panel__summary {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}
.rater-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rater-block {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.rater-block h4 {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.rater-cell {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  padding: 3px 0;
}
.rater-cell__label { color: var(--ink-2); }
.rater-cell__value { color: var(--ink-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.rater-cell__hint { font-size: 0.74rem; color: var(--muted); margin: 4px 0 0; line-height: 1.4; }

.rater-directives {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.rater-directives__head {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rater-directives__count {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
}
.rater-directives__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rater-directive {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--muted-2);
  background: var(--surface-3);
  border-radius: 6px;
}
.rater-directive.rater-sev-p0 { border-left-color: var(--critical); background: var(--critical-soft); }
.rater-directive.rater-sev-p1 { border-left-color: var(--warning); background: var(--warning-soft); }
.rater-directive.rater-sev-p2 { border-left-color: var(--info); background: var(--info-soft); }
.rater-directive__sev {
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink-1);
  flex-shrink: 0;
  padding-top: 2px;
}
.rater-directive__body { flex: 1; min-width: 0; }
.rater-directive__issue { font-size: 0.86rem; color: var(--ink-1); font-weight: 600; margin: 0 0 4px; }
.rater-directive__loc { font-size: 0.74rem; color: var(--muted); margin: 0 0 4px; font-style: italic; }
.rater-directive__do { font-size: 0.84rem; color: var(--ink-2); margin: 0; line-height: 1.5; }

.rater-apply { width: 100%; }

/* 全片模式 */
.rater-panel--full { margin: 0 0 16px; }
.rater-scene-scores {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.rater-scene-scores__head {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.rater-scene-scores__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rater-scene-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 0.82rem;
}
.rater-scene-score__num { color: var(--muted); font-weight: 600; font-size: 0.74rem; }
.rater-scene-score__title { color: var(--ink-1); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rater-scene-score__val { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 6px; }
.rater-scene-score__val.is-good { background: var(--success-soft); color: var(--success); }
.rater-scene-score__val.is-ok { background: var(--warning-soft); color: var(--warning); }
.rater-scene-score__val.is-weak { background: var(--critical-soft); color: var(--critical); }

.rater-cross {
  background: var(--critical-soft);
  border: 1px solid var(--critical);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.rater-cross__head {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--critical);
  margin: 0 0 6px;
}
.rater-cross__list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.rater-cross__list li { margin-bottom: 4px; }

.rater-directive__scene {
  display: inline-block;
  padding: 1px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 4px;
}
.screenplay-editor__body {
  font-family: "Courier New", "Noto Sans Mono CJK SC", monospace;
  font-size: 14px;
  line-height: 1.65;
  width: 100%;
  min-height: 480px;
  padding: 18px 22px;
  background: var(--paper-warm);
  border: 1px solid rgba(180, 140, 90, 0.3);
  border-radius: 8px;
  resize: vertical;
  white-space: pre-wrap;
}
.screenplay-editor__foot {
  border-top: 1px solid rgba(180, 140, 90, 0.2);
  padding-top: 10px;
}
.screenplay-editor__notes-label {
  font-size: 12px;
  color: rgba(70, 50, 30, 0.6);
  margin: 0 0 6px;
}
.screenplay-editor__notes {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--paper-warm);
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 6px;
  resize: vertical;
}

@media (max-width: 1100px) {
  .screenplay-page__body { grid-template-columns: 1fr; }
  .screenplay-page__list { max-height: 320px; }
}

@media (max-width: 700px) {
  .screenplay-page__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-basis: 100%;
    gap: 8px;
  }
  .screenplay-page__actions { gap: 6px; }
  .screenplay-page__actions .button { flex: 1 1 auto; }
}

/* ========================================================================== */
/* 资料库 / 外部知识源 tab */
/* ========================================================================== */
.kb-tab { display: flex; flex-direction: column; gap: 12px; }
.kb-tab__head {
  display: flex; gap: 16px; align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fdfaf2;
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 10px;
}
.kb-tab__source { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kb-select {
  padding: 6px 10px;
  background: var(--paper-warm);
  border: 1px solid rgba(180, 140, 90, 0.4);
  border-radius: 6px;
  font-size: 13px;
}
.kb-link {
  font-size: 12px; color: rgba(70, 50, 30, 0.75); text-decoration: none;
  border: 1px solid rgba(180, 140, 90, 0.3);
  padding: 3px 8px; border-radius: 4px;
}
.kb-link:hover { background: #f4ebd8; }
.kb-search-input {
  flex: 1 1 280px;
  padding: 8px 12px;
  background: var(--paper-warm);
  border: 1px solid rgba(180, 140, 90, 0.4);
  border-radius: 6px;
  font-size: 14px;
}
.kb-tab__meta {
  font-size: 12px;
  color: rgba(70, 50, 30, 0.65);
  margin: 0 4px;
}
.kb-banner {
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.kb-banner--error { background: #f6dcdc; color: #7a2828; }
.kb-banner--ok    { background: #d8ecd1; color: #2c5e2c; }
.kb-tab__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}
.kb-tab__list {
  max-height: calc(100vh - 360px);
  overflow-y: auto;
  padding-right: 4px;
}
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-list-item {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: 10px 12px;
  background: #fbf6ec;
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 8px;
  cursor: pointer;
}
.kb-list-item:hover { background: #f4ebd8; }
.kb-list-item.is-active { background: #ece0c3; border-color: rgba(180, 110, 50, 0.6); }
.kb-list-item__subtitle { font-size: 12px; color: rgba(70, 50, 30, 0.6); }
.kb-list-item__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.kb-list-item__tags em {
  font-size: 11px; padding: 1px 6px;
  background: #ebe0c3; color: #5a4520;
  border-radius: 3px; font-style: normal;
}
.kb-tab__detail {
  background: #fdfaf2;
  border: 1px solid rgba(180, 140, 90, 0.25);
  border-radius: 10px;
  padding: 16px 20px;
  min-height: 400px;
}
.kb-detail__head { border-bottom: 1px solid rgba(180, 140, 90, 0.2); padding-bottom: 10px; margin-bottom: 12px; }
.kb-detail__head h3 { margin: 0; font-size: 20px; }
.kb-detail__subtitle { font-size: 13px; color: rgba(70, 50, 30, 0.6); }
.kb-detail__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.kb-detail__tags em {
  font-size: 11px; padding: 2px 7px;
  background: #ebe0c3; color: #5a4520;
  border-radius: 3px; font-style: normal;
}
.kb-detail__aliases { font-size: 12px; color: rgba(70, 50, 30, 0.55); margin: 6px 0 0; }
.kb-detail__body { line-height: 1.7; font-size: 14px; }
.kb-detail__body h4 { margin: 14px 0 4px; font-size: 14px; color: #7a4a18; }
.kb-detail__body p { margin: 4px 0; }
.kb-detail__foot { border-top: 1px solid rgba(180, 140, 90, 0.2); padding-top: 10px; margin-top: 12px; }
.kb-detail__related { font-size: 12px; color: rgba(70, 50, 30, 0.6); margin-top: 8px; }

@media (max-width: 1100px) {
  .kb-tab__body { grid-template-columns: 1fr; }
  .kb-tab__list { max-height: 280px; }
}

/* 场景关联剧情卡 — 横向 chip 列表，节省竖向空间 */
.scene-plot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scene-plot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fbf6ec;
  border: 1px solid rgba(180, 140, 90, 0.3);
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, border-color 120ms;
}
.scene-plot-chip:hover { background: #f4ebd8; }
.scene-plot-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(180, 140, 90, 0.3);
  background: #fbf6ec;
  border-radius: 14px;
  transition: background 120ms, border-color 120ms;
  overflow: hidden;
}
.scene-plot-chip-row:hover { background: #f4ebd8; }
.scene-plot-chip-row.is-active {
  background: #ece0c3;
  border-color: rgba(180, 110, 50, 0.6);
}
.scene-plot-chip-row .scene-plot-chip {
  border: none;
  background: transparent;
  border-radius: 0;
}
.scene-plot-chip-row .scene-plot-chip:hover { background: transparent; }

.scene-plot-chip.is-active {
  background: #ece0c3;
  border-color: rgba(180, 110, 50, 0.6);
}
.scene-plot-chip input { margin: 0; }
.scene-plot-chip span { white-space: nowrap; }

[data-theme="dark"] .scene-edv2__input {
  background: var(--surface-3);
}
[data-theme="dark"] .scene-plot-chip,
[data-theme="dark"] .scene-plot-chip-row {
  background: var(--surface-3);
  border-color: var(--border);
}
[data-theme="dark"] .scene-plot-chip:hover,
[data-theme="dark"] .scene-plot-chip-row:hover { background: var(--surface-hover); }
[data-theme="dark"] .scene-plot-chip.is-active,
[data-theme="dark"] .scene-plot-chip-row.is-active {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}
[data-theme="dark"] .scene-plot-chip-row .scene-plot-chip,
[data-theme="dark"] .scene-plot-chip-row .scene-plot-chip:hover { background: transparent; }

.scene-plot-jump {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px 4px 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  border-left: 1px solid rgba(180, 110, 50, 0.35);
  transition: background 120ms, transform 120ms;
}
.scene-plot-jump:hover {
  background: rgba(180, 110, 50, 0.16);
  transform: translateX(1px);
}






/* ── 创作流程：类型卡片选择器（主导/调味） ─────────────────────── */
.cf-genre-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  /* 徽章上浮在卡片上沿（top:-7px），留出余量避免被容器裁切 */
  padding-top: 7px;
}
.cf-genre-card {
  position: relative;
  /* 全局 button 规则带 overflow:hidden，会把上浮徽章裁掉一半 */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: var(--cf-s2, var(--surface-3));
  border: 1px solid var(--cf-border, var(--border));
  border-radius: 10px;
  color: var(--cf-text-2, var(--ink-2));
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.cf-genre-card:hover { border-color: var(--cf-gold-dim, var(--border-strong)); }
.cf-genre-card.is-active {
  border-color: var(--cf-gold, var(--accent));
  color: var(--cf-gold, var(--accent));
  background: var(--cf-s3, var(--accent-soft));
}
.cf-genre-card__badge {
  position: absolute;
  top: -7px;
  right: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cf-gold, var(--accent));
  color: var(--cf-bg, #fff);
}

/* ── 资料库：类型契约兑现追踪 ─────────────────────────────────── */
.genre-contract-row {
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md, 10px);
  background: var(--paper);
}
.genre-contract-row + .genre-contract-row { margin-top: 6px; }
.genre-contract-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.genre-contract-row p { margin: 4px 0 0; }

/* 创作页第 1 步：形态只读展示（形态在新建入口选定） */
.cf-format-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-format-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--cf-gold, var(--accent));
  color: var(--cf-gold, var(--accent));
  background: var(--cf-s3, var(--accent-soft));
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 新建入口：形态选择段（电影长片 / 连续剧 / 微短剧） */
.mode-picker-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 4px;
}
.mode-format-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface-3, #f6f3ec);
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.mode-format-card strong { font-size: 0.95rem; color: var(--ink-1, #2c2a26); }
.mode-format-card span { font-size: 0.76rem; color: var(--ink-3, #8a8478); }
.mode-format-card:hover { border-color: var(--border-strong, #b9b1a0); }
.mode-format-card.is-active {
  border-color: var(--accent, #b46e32);
  background: var(--accent-soft, rgba(180, 110, 50, 0.08));
}
.mode-format-card.is-active strong { color: var(--accent, #b46e32); }

/* ── 微短剧独立创作区：节点流水线导航 ── */
.micro-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 18px;
  padding: 12px 4px 16px;
  margin-bottom: 6px;
}
.micro-group { display: flex; flex-direction: column; gap: 6px; }
.micro-group__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted, #999);
  padding-left: 2px;
}
.micro-group__steps { display: flex; flex-wrap: wrap; gap: 5px; }
.micro-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--muted-2);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-1);
  color: var(--ink, inherit);
  cursor: pointer;
  font-size: 13px;
  transition: all 160ms ease;
  white-space: nowrap;
}
.micro-step:hover { border-color: var(--accent, #b5601d); }
.micro-step.is-active {
  background: var(--accent, #b5601d);
  border-color: var(--accent, #b5601d);
  color: #fff;
  font-weight: 600;
}
.micro-step__dot { color: #3f9d5a; font-size: 9px; }
.micro-step.is-active .micro-step__dot { color: rgba(255,255,255,0.85); }

/* 流式剧本卷轴 · 折叠集块 */
.ep-script-list { display: flex; flex-direction: column; gap: 8px; }
.ep-script { border: 1px solid var(--border, #e6e0d6); border-radius: var(--radius-md, 10px); background: var(--surface-1); overflow: hidden; }
.ep-script[open] { border-color: var(--accent, #b5601d); }
.ep-script__sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; cursor: pointer; list-style: none; user-select: none;
}
.ep-script__sum::-webkit-details-marker { display: none; }
.ep-script__sum::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform 150ms ease; }
.ep-script[open] .ep-script__sum::before { transform: rotate(90deg); }
.ep-script__no { font-weight: 700; white-space: nowrap; }
.ep-script__title { flex: 0 1 auto; color: var(--ink); }
.ep-script__badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,0.06); color: var(--muted); white-space: nowrap; }
.ep-script__badge--ok { background: rgba(63,157,90,0.14); color: #3f9d5a; }
.ep-script__preview { flex: 1; min-width: 120px; color: var(--muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-script__body { padding: 0 14px 14px; }
.ep-script__hook { font-size: 13px; color: var(--accent, #b5601d); margin: 2px 0 6px; }

/* 微短剧只读结构化输出：表格 / 卡片 / 标签（取代 JSON 倾倒式密集列表） */
.micro-block { margin-top: 14px; }
.micro-block__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted, #999); margin-bottom: 6px; }
.micro-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.micro-table th, .micro-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border, #ece6dc); vertical-align: top; }
.micro-table th { font-size: 12px; font-weight: 600; color: var(--muted, #999); background: rgba(0,0,0,0.025); white-space: nowrap; }
.micro-table tr:last-child td { border-bottom: none; }
.micro-table td:first-child, .micro-table th:first-child { white-space: nowrap; color: var(--accent, #b5601d); font-weight: 600; }
.micro-cards { display: flex; flex-direction: column; gap: 8px; }
.micro-card { border: 1px solid var(--border, #ece6dc); border-radius: 8px; padding: 10px 12px; background: var(--surface-1); position: relative; }
.micro-card__badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent, #b5601d); background: rgba(181,96,29,0.1); padding: 2px 8px; border-radius: 10px; margin-bottom: 6px; }
.micro-card__row { display: flex; gap: 8px; line-height: 1.6; font-size: 13px; }
.micro-card__row + .micro-card__row { margin-top: 3px; }
.micro-card__k { flex: 0 0 56px; color: var(--muted, #999); font-size: 12px; }
.micro-card__v { flex: 1; color: var(--ink); }
.micro-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 微短剧节点流程导航：上一步 / 下一步（按编辑页面顺序） */
.micro-flow-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 18px 4px 8px; }

/* 微短剧创作区布局：内容收窄居中(不撑满,约 70%)；文本框随内容高度自适应(短框小、长框大) */
#panel-micro #micro-nav,
#panel-micro #micro-content { max-width: 1040px; margin-left: auto; margin-right: auto; }
#micro-content .cf-textarea { field-sizing: content; min-height: 2.4em; }

/* 暗色主题：裸 select（未包 .field 的，如资料库「系列挂载」下拉）跟随主题，不再 UA 默认白底 */
[data-theme="dark"] select {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm, 6px);
}

/* 全局页脚：作者署名 + 非商用声明 + 仓库地址 */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 18px 24px 22px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border-soft, rgba(0, 0, 0, 0.06));
  margin-top: 24px;
}
.app-footer strong { color: var(--ink-2); font-weight: 600; }
.app-footer a { color: var(--accent); }
.app-footer a:hover { text-decoration: underline; }
.app-footer__sep { color: var(--muted-2); }

/* 顶栏 PlotCat 猫头 logo；暗色主题下猫身为深色，垫浅色圆角底衬保持可见 */
.hero__logo {
  height: 34px;
  width: 34px;
  flex: none;
  margin-right: 10px;
}
[data-theme="dark"] .hero__logo {
  background: #faf6ee;
  border-radius: 9px;
  padding: 2px;
}