/* ============================================================
   故事画布 v2 — 三主题:墨纸(默认) / 青焰 / 纸白
   所有主题相关颜色收敛为 token,body[data-theme] 切换整套配色;
   结构与交互样式只写一份。
   共同纪律:全画布唯一重音色 --accent 只给「生成/采用/选中」;
   端口语义色:红=出 绿=主链 蓝=模型 黄=指令 紫=原稿。
   ============================================================ */
:root {
  /* —— 墨纸:深灰工作台 + 暖纸稿面 + 赭石重音 —— */
  --bg: #17181c;
  --grid-dot: rgba(226, 222, 210, 0.075);
  --surface: #1f2126;
  --surface-2: #26282e;
  --surface-3: #2c2f36;
  --line: #2d3037;
  --line-strong: #3d414b;
  --line-hover: #4a4f5a;
  --text: #e6e4dd;
  --muted: #96938a;
  --faint: #6b6960;
  --field: #1a1b20;
  --chip-bg: rgba(255, 255, 255, 0.045);
  --chip-line: rgba(255, 255, 255, 0.07);
  --hover-veil: rgba(255, 255, 255, 0.045);
  --well: rgba(255, 255, 255, 0.02);
  --edge: rgba(160, 158, 148, 0.5);
  --zone-ink: rgba(230, 228, 221, 0.1);
  --topbar-bg: rgba(26, 27, 32, 0.92);
  --tabs-bg: rgba(23, 24, 28, 0.94);
  --backdrop: rgba(8, 8, 10, 0.6);
  --scroll-thumb: rgba(230, 228, 221, 0.16);

  --accent: #c96442;
  --accent-hover: #d97250;
  --accent-soft: rgba(201, 100, 66, 0.14);
  --accent-line: rgba(201, 100, 66, 0.45);
  --accent-ink: #e8b08e;
  --on-accent: #fff7ef;

  /* 稿纸(三主题共用的暖纸面) */
  --paper: #f0e9db;
  --paper-2: #e9e1d0;
  --paper-ink: #2b261d;
  --paper-muted: #7c7261;
  --paper-line: #d8cdb6;
  --paper-focus: #b89a5e;
  --paper-ring: rgba(217, 160, 91, 0.18);

  --amber: #d9a05b;
  --amber-soft: rgba(217, 160, 91, 0.13);
  --red: #e05d4c;

  --port-out: #d4574a;
  --port-in: #46a382;
  --port-model: #6d87dc;
  --port-cmd: #cf8f31;
  --port-ms: #a06cd5;
  --model-ink: #a3b3e8;
  --model-soft: rgba(109, 135, 220, 0.13);
  --ms-ink: #c39ae0;
  --ms-soft: rgba(160, 108, 213, 0.13);

  --toast-bg: #f0e9db;
  --toast-ink: #2b261d;
  --toast-line: #d8cdb6;

  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 34px rgba(0, 0, 0, 0.38);
}

/* —— 青焰:冷黑工作台 + 青绿重音(Claude Code 版配色) —— */
body[data-theme="teal"] {
  --bg: #131316;
  --grid-dot: rgba(233, 231, 226, 0.07);
  --surface: #1d1d21;
  --surface-2: #232328;
  --surface-3: #26262c;
  --line: #32323a;
  --line-strong: #4b4b58;
  --line-hover: #55555f;
  --text: #e9e7e2;
  --muted: #9a978f;
  --faint: #6e6c66;
  --field: #18181c;
  --topbar-bg: rgba(22, 22, 26, 0.92);
  --tabs-bg: rgba(19, 19, 22, 0.94);
  --edge: rgba(154, 151, 143, 0.5);
  --zone-ink: rgba(233, 231, 226, 0.1);

  --accent: #3fae93;
  --accent-hover: #4cc2a5;
  --accent-soft: rgba(63, 174, 147, 0.14);
  --accent-line: rgba(63, 174, 147, 0.5);
  --accent-ink: #7fd6c2;
  --on-accent: #f2fbf8;

  --amber: #d9a44a;
  --amber-soft: rgba(217, 164, 74, 0.12);
  --red: #e0655f;

  --port-out: #d95c4e;
  --port-in: #3fae93;
  --port-model: #6d87dc;
  --port-cmd: #e0a13d;
  --port-ms: #a06cd5;
}

/* —— 纸白:纸白工作台 + 墨绿重音(原浅色的打磨版) —— */
body[data-theme="light"] {
  --bg: #f3f1ea;
  --grid-dot: rgba(43, 38, 29, 0.13);
  --surface: #fffdf8;
  --surface-2: #f4f1e9;
  --surface-3: #fffdf8;
  --line: #e2ddd0;
  --line-strong: #c8bda2;
  --line-hover: #b3a78a;
  --text: #2b261d;
  --muted: #7c7261;
  --faint: #a39b8a;
  --field: #fbf9f2;
  --chip-bg: rgba(43, 38, 29, 0.045);
  --chip-line: rgba(43, 38, 29, 0.09);
  --hover-veil: rgba(43, 38, 29, 0.055);
  --well: rgba(43, 38, 29, 0.03);
  --edge: rgba(116, 98, 62, 0.65);
  --zone-ink: rgba(43, 38, 29, 0.18);
  --topbar-bg: rgba(255, 253, 248, 0.92);
  --tabs-bg: rgba(243, 241, 234, 0.94);
  --backdrop: rgba(30, 25, 15, 0.45);
  --scroll-thumb: rgba(43, 38, 29, 0.2);

  --accent: #2f6d5f;
  --accent-hover: #275a4e;
  --accent-soft: rgba(47, 109, 95, 0.11);
  --accent-line: rgba(47, 109, 95, 0.45);
  --accent-ink: #2f6d5f;
  --on-accent: #ffffff;

  --paper: #fbf8f0;
  --paper-2: #f4efe3;
  --paper-line: #ded4c0;
  --paper-focus: #2f6d5f;
  --paper-ring: rgba(47, 109, 95, 0.14);

  --amber: #9a6200;
  --amber-soft: rgba(154, 98, 0, 0.1);
  --red: #b43a3a;

  --port-out: #c0392b;
  --port-in: #2f8f6d;
  --port-model: #5b67c7;
  --port-cmd: #c9822b;
  --port-ms: #9b59b6;
  --model-ink: #4d56a9;
  --model-soft: rgba(91, 103, 199, 0.1);
  --ms-ink: #7d3f9e;
  --ms-soft: rgba(155, 89, 182, 0.1);

  --toast-bg: #33291a;
  --toast-ink: #ffffff;
  --toast-line: #33291a;

  --shadow: 0 10px 30px rgba(43, 38, 29, 0.12);
  --shadow-card: 0 1px 2px rgba(43, 38, 29, 0.05), 0 10px 28px rgba(43, 38, 29, 0.09);
  --shadow-card-hover: 0 1px 2px rgba(43, 38, 29, 0.06), 0 14px 36px rgba(43, 38, 29, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 8px;
  font-family: var(--serif);
  font-weight: 700;
}

.brand-title { font-weight: 700; letter-spacing: 0.3px; }
.brand-title small { color: var(--faint); font-weight: 400; margin-left: 4px; }

.topbar-hint { color: var(--muted); font-size: 12px; }

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

.points-pill {
  padding: 5px 12px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 13px;
}

button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

.ghost-button,
.secondary-button,
.theme-select {
  padding: 5px 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: border-color 120ms ease, background 120ms ease;
}
.ghost-button:hover, .secondary-button:hover, .theme-select:hover { border-color: var(--line-hover); background: var(--surface-2); }
.ghost-button.danger { color: var(--red); }
.theme-select { font-size: 13px; cursor: pointer; }
.theme-select option { color: #2b261d; background: #fffdf8; }

.primary-button {
  padding: 5px 14px;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  transition: background 120ms ease;
}
.primary-button:hover { background: var(--accent-hover); }
.primary-button.danger-fill { background: var(--red); border-color: var(--red); }

/* ---------- 画布 ---------- */
#viewport {
  position: fixed;
  inset: 88px 0 0 0;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 26px 26px,
    var(--bg);
}

#viewport.panning { cursor: default; }
body.no-select, body.no-select * { user-select: none; }

#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

#cards,
#zoneLabels {
  position: absolute;
  left: 0;
  top: 0;
}

#cards { z-index: 20; }
#zoneLabels { z-index: 5; pointer-events: none; }

#edges,
#edgeOverlay {
  position: absolute;
  left: -50000px;
  top: -50000px;
  width: 100000px;
  height: 100000px;
  overflow: visible;
}

#edges { z-index: 10; }
#edgeOverlay {
  z-index: 15; /* 线在卡片与端口下层（点击热区仍在 10） */
  pointer-events: none;
}

#edges path {
  fill: none;
}

#edgeOverlay path {
  fill: none;
  stroke: var(--edge);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.zone-label {
  position: absolute;
  color: var(--zone-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- 卡片通用 ---------- */
.card {
  position: absolute;
  width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  cursor: default;
  user-select: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card-hover);
}

.card textarea,
.card input,
.card .reader-body {
  cursor: auto;
  user-select: text;
}

.card button, .card summary { cursor: pointer; }
.card .port { cursor: default; }

.card.is-archive { border-top: 2px solid var(--amber); }
.card.is-flow { border-top: 2px solid var(--accent); }
.card.is-note {
  width: 340px;
  background: var(--paper);
  border-color: var(--paper-line);
  border-top-width: 1px;
  color: var(--paper-ink);
}
.card.is-note .card-head { border-bottom-color: var(--paper-line); }
.card.is-note .card-head h3 { color: var(--paper-ink); }
.card.is-note .card-kicker { color: var(--paper-muted); }
.card.is-note .card-body p.muted, .card.is-note .muted { color: var(--paper-muted); }
.card.is-note .mini-button {
  color: var(--paper-ink);
  background: transparent;
  border-color: var(--paper-line);
}
.card.is-note .mini-button:hover { background: rgba(43, 38, 29, 0.06); border-color: #c4b799; }
.card.is-note .mini-button.danger { color: #a83a2c; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: default;
  user-select: none;
}

.card-head:active { cursor: default; }
.card-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.2px; }
.card-head h3 .card-code {
  flex: 0 0 auto;
  padding: 1px 8px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.card-head .head-tools { display: flex; align-items: center; gap: 6px; }
.card-kicker { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; }

.card-body { padding: 12px 14px; }
.card-body p.muted { margin: 0; color: var(--muted); line-height: 1.7; }

.mini-button {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.mini-button:hover { border-color: var(--line-hover); background: var(--surface-2); }
.mini-button:active { transform: translateY(1px); }
.mini-button.accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.mini-button.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.mini-button.danger { color: var(--red); }
.mini-button.danger:hover { border-color: var(--red); background: transparent; }

.tier-pill {
  padding: 3px 9px;
  font-size: 12px;
  color: var(--model-ink);
  background: var(--model-soft);
  border: 1px solid var(--model-soft);
  border-radius: 999px;
}

.model-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 8px;
  padding: 0 8px;
  color: var(--model-ink);
  background: var(--model-soft);
  border: 1px solid var(--model-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.card.model-node {
  width: 360px;
  border-top: 2px solid var(--port-model);
}

.model-node .card-head {
  align-items: flex-start;
}

.model-node .card-head .head-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 106px;
}

.model-node .card-body {
  display: grid;
  gap: 8px;
}

.model-node .cfg-option {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
  padding: 9px 40px 9px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.model-node .tier-option .model-tier-port {
  right: -10px;
  top: 50%;
  background: var(--port-model);
}

.model-node .tier-option .model-tier-port:hover {
  box-shadow: 0 0 0 5px rgba(109, 135, 220, 0.25);
}

/* 行式候选 */
.row-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 120ms ease, background 120ms ease;
}
.row-option:hover { border-color: var(--line-strong); }

.row-option:last-child { margin-bottom: 0; }
.row-option.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.row-main { flex: 1; min-width: 0; }

.row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }

.tag {
  padding: 2px 8px;
  color: var(--muted);
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
}

.row-line { line-height: 1.65; }
/* 候选核心句用衬线:这是「作品的文字」,和工具字体拉开 */
.pitch-node .row-line { font-family: var(--serif); font-size: 14.5px; letter-spacing: 0.2px; }
.row-sub { color: var(--muted); font-size: 12px; line-height: 1.65; margin-top: 3px; }

.port {
  position: absolute;
  right: -11px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--port-out);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: default;
}

.port::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.port:hover { box-shadow: 0 0 0 5px rgba(212, 87, 74, 0.25); }
.port.in { left: -11px; right: auto; background: var(--port-in); cursor: default; }
.port.in:hover { box-shadow: 0 0 0 5px rgba(70, 163, 130, 0.25); }
.port.model-port {
  top: 48px;
  background: var(--port-model);
}
.port.model-port:hover {
  box-shadow: 0 0 0 5px rgba(109, 135, 220, 0.25);
}
/* K2 左侧输入点:蓝(模型)在上、绿(主链)在下 */
.card.pitch-node { min-height: 150px; }
.card.pitch-node .port.model-port { top: 44px; }
.card.pitch-node .port.in:not(.model-port) { top: 92px; }

/* C5 负面词:点选词签 */
.card.is-cfg.cfg-node.neg-node {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--port-out);
  box-shadow: var(--shadow-card);
}
.card.neg-node .card-head { padding: 10px 12px 6px; }
.card.neg-node .card-body { padding: 4px 12px 12px; }
.neg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.neg-chip {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.neg-chip:hover { border-color: var(--line-hover); color: var(--text); }
.neg-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* K1 的选填大纲栏 */
.outline-box { margin-top: 8px; }
.outline-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

/* K4 人物组:一人一行 */
.cast-person {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
}
.cast-person .role-tag { flex: 0 0 auto; }
.outline-input {
  display: block;
  width: 100%;
  min-height: 120px;
  margin-top: 6px;
  padding: 8px 10px;
  resize: both;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.8;
  outline: none;
  transition: border-color 120ms ease;
}
.outline-input:focus { border-color: var(--accent-line); }

/* 笔记卡(纸质便签,摘录暂存) */
.card.is-note.note-card { width: auto; min-width: 0; }
.note-editor {
  display: block;
  width: 380px;
  min-width: 280px;
  min-height: 200px;
  padding: 10px;
  resize: both;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: transparent;
  color: var(--paper-ink);
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.9;
  outline: none;
}
.note-editor:focus { border-color: var(--paper-focus); }

/* K5 章节细纲 */
.route-detail {
  margin: 6px 0;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line-strong);
}
.route-detail .row-sub { margin-top: 4px; }
.road-detail {
  white-space: pre-line;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 6px;
}
.row-line .tag { margin-left: 6px; }

/* 卡上模型档位点选 */
.tier-picker { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.tier-picker-label { color: var(--model-ink); font-size: 11px; font-weight: 600; }
.tier-chip.is-on { background: var(--port-model); border-color: var(--port-model); color: #f2f4fd; }

/* R1 原稿卡 ↔ K1 原稿口:紫对紫 */
.card.ms-node .port { background: var(--port-ms); }
.card.ms-node .port:hover { box-shadow: 0 0 0 5px rgba(160, 108, 213, 0.25); }
.port.ms-port { background: var(--port-ms); }
.port.ms-port:hover { box-shadow: 0 0 0 5px rgba(160, 108, 213, 0.25); }

/* X 下一步卡与 K5 指令口:黄对黄 */
.card.nextstep-node .port:not(.in) { background: var(--port-cmd); }
.card.nextstep-node .port:not(.in):hover { box-shadow: 0 0 0 5px rgba(207, 143, 49, 0.25); }
.port.cmd-port { background: var(--port-cmd); }
.port.cmd-port:hover { box-shadow: 0 0 0 5px rgba(207, 143, 49, 0.25); }

/* L1 路线卡:卡级黄色指令 in 放右上 */
.card.roadmap-node .card-body > .port.cmd-port { top: 44px; left: auto; right: -11px; }

/* K5 / L1 工作台加宽 */
.card.route-node,
.card.roadmap-node { width: 450px; }

/* K5 输入口:左侧 蓝+绿;黄放右上 */
.card.route-node { min-height: 150px; }
.card.route-node .port.model-port { top: 44px; }
.card.route-node .port.in:not(.model-port):not(.cmd-port) { top: 92px; }
.card.route-node .port.cmd-port { top: 44px; left: auto; right: -11px; }

/* 便签条目化 */
.note-block h4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.note-block .note-add { padding: 0 7px; }
.note-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.note-entry p { margin: 0; flex: 1; font-size: 13px; line-height: 1.6; }
.note-entry-tools { display: flex; gap: 4px; flex: 0 0 auto; }

/* K5 方案行内的单独重抽 */
.plan-tools { display: flex; justify-content: flex-end; margin-top: 6px; }
.row-option.plan-slot { border-style: dashed; background: transparent; }

/* R1 原稿卡与 K1 原稿识别 */
.card.set-node.ms-node { width: auto; min-width: 0; border-top: 2px solid var(--port-ms); }
.ms-editor {
  display: block;
  width: 420px;
  min-width: 300px;
  min-height: 220px;
  padding: 12px 14px;
  resize: both;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  outline: none;
}
.ms-editor:focus { border-color: var(--paper-focus); box-shadow: 0 0 0 3px var(--paper-ring); }
.ms-editor::placeholder { color: var(--paper-muted); }
.ms-summary {
  padding: 10px 12px;
  background: var(--ms-soft);
  border: 1px solid var(--ms-soft);
  border-radius: 8px;
}
.ms-line { margin: 6px 0 0; font-size: 13px; line-height: 1.7; }

/* 版本对比窗与诊断窗 */
.ver-columns { display: flex; gap: 16px; align-items: flex-start; }
.ver-columns > .ver-col { flex: 1 1 0; min-width: 0; }
.ver-columns > .ver-pane { flex: 1 1 0; min-width: 0; margin-top: 0; }
.card:has(.ver-columns > .ver-pane) { width: 880px; }
.ver-pane {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--well);
}
.row-option > .ver-pane.row-ver {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  align-self: stretch;
}
.row-option:has(> .ver-pane.row-ver) { align-items: flex-start; }
.card:has(.ver-pane.row-ver) { width: 880px; }
.diag-pane {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-soft);
  border-radius: 8px;
}
.diag-pane .draft-meta { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.diag-text { white-space: pre-line; font-size: 13px; line-height: 1.8; }

/* 行文案双击编辑 */
.editable { cursor: text; border-radius: 4px; }
.editable:hover { background: var(--hover-veil); }
.inline-edit-input {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  resize: both;
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  outline: none;
}
.inline-edit-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.inline-edit-label { font-size: 11px; color: var(--muted); margin: 6px 0 3px; }
.inline-edit-tools { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.card > .port { top: 26px; }
.port.stacked { top: auto; }

#edgeOverlay path.temp { stroke: var(--accent); stroke-dasharray: 6 5; }

/* 引导幽灵线：X 入库后指向 K5/L1 的流动虚线，连上即消失 */
#edgeOverlay path.ghost {
  stroke: #e0a13d;
  stroke-width: 2;
  stroke-dasharray: 9 8;
  opacity: 0.55;
  animation: ghost-flow 1.1s linear infinite;
}
@keyframes ghost-flow { to { stroke-dashoffset: -34; } }

.dock-tab { position: relative; }
.dock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e05d5f;
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  font-weight: 600;
  pointer-events: none;
}

.port.cmd-port.pulse { animation: port-pulse 1.4s ease-out infinite; }
@keyframes port-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 161, 61, 0.7); }
  70% { box-shadow: 0 0 0 9px rgba(224, 161, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 161, 61, 0); }
}

/* 摘要列表(作品配置卡) */
.kv { display: grid; gap: 6px; margin: 0; }
.kv div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; font-weight: 600; }

/* 正文卡:初始单窗口 520;出现对比稿时左右分栏 */
.card.draft { width: 520px; }
.card.draft:has(.ch-result) { width: 1060px; }

.ch-columns { display: flex; gap: 16px; align-items: flex-start; }
.ch-main { flex: 1 1 0; min-width: 0; }
/* 对比窗打开时：两栏各占一半，编辑框忽略用户拖出的内联宽度，避免左右窗压叠 */
.ch-columns:has(.ch-result) .ch-editor { width: 100% !important; max-width: 100%; }
.ch-result .ch-editor { width: 100% !important; max-width: 100%; }
.ver-columns:has(> .ver-pane) > .ver-col textarea,
.ver-columns > .ver-pane textarea { width: 100% !important; max-width: 100%; }
.row-option:has(> .ver-pane.row-ver) textarea { width: 100% !important; max-width: 100%; }
.ch-result {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px dashed var(--line-strong);
}

/* 稿纸:正文编辑区是全画布最亮的东西——文字即主角 */
.draft-editor {
  width: 100%;
  min-height: 300px;
  padding: 14px 16px;
  resize: both;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2;
  outline: none;
}
.draft-editor:focus { border-color: var(--paper-focus); box-shadow: 0 0 0 3px var(--paper-ring); }

.draft-meta { display: flex; gap: 8px; margin: 8px 0; color: var(--muted); font-size: 12px; }

.draft-section {
  position: relative;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
}
.draft-section:first-of-type { border-top: none; padding-top: 4px; }
.draft-section .ch-head { margin: 0 0 8px; font-size: 14px; font-family: var(--serif); letter-spacing: 0.5px; }
.draft-section .ch-editor { min-height: 300px; }
.ch-tools { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.draft-section .port.ch-port { left: -25px; top: 16px; }

/* 生成卡内嵌的「内容控制」输入区 */
.ref-box { margin: 8px 0 10px; }
.ctrl-ref-input {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 8px 10px;
  resize: both;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.8;
  outline: none;
  transition: border-color 120ms ease;
}
.ctrl-ref-input:focus { border-color: var(--accent-line); }
.ref-tools { margin-top: 6px; }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.card.is-note .card-foot { border-top-color: var(--paper-line); }

.badge {
  padding: 2px 9px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.card.is-note .badge { color: #8a5a10; background: rgba(154, 98, 0, 0.12); border-color: rgba(154, 98, 0, 0.3); }

/* 便签 */
.note-block { margin-bottom: 8px; }
.note-block:last-child { margin-bottom: 0; }
.note-block h4 { margin: 0 0 3px; font-size: 12px; color: #8a5a10; }
.note-block p { margin: 0; font-size: 12.5px; line-height: 1.65; }

/* 档案卡内部 */
.log-block { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.log-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.log-block h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.log-block p { margin: 0 0 3px; font-size: 13px; line-height: 1.65; }

.ledger-status { font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.ledger-status.open { color: var(--amber); background: var(--amber-soft); }

.shelf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shelf-row:last-child { margin-bottom: 0; }
.shelf-row .muted { color: var(--muted); font-size: 12px; }

.reader-body {
  max-height: 420px;
  overflow: auto;
  padding: 4px 6px 4px 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2;
  white-space: pre-wrap;
}

/* ---------- 档案抽屉(屏幕右缘竖排便签) ---------- */
#dock {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 12px;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.dock-tabs { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.dock-tab {
  writing-mode: vertical-rl;
  padding: 14px 7px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #6d5a2e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
}
.dock-tab:hover { background: var(--paper-2); }
.dock-tab.is-open { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dock-panel {
  pointer-events: auto;
  width: 400px;
  max-height: 100%;
  overflow-y: auto;
  margin-left: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  border-radius: 10px 0 0 10px;
  box-shadow: var(--shadow);
}
.dock-panel h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
}
.dock-reader {
  white-space: pre-line;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 2;
  user-select: text;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  padding: 14px 16px;
}
.dock-panel .shelf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: none; }

/* ---------- 弹窗与提示 ---------- */
.confirm-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; }
.confirm-modal.is-open { display: flex; }
.confirm-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.confirm-panel {
  position: relative;
  width: min(440px, 100%);
  padding: 20px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.confirm-panel h2 { margin: 0 0 8px; font-size: 17px; }
.confirm-panel p { margin: 0 0 16px; color: var(--muted); line-height: 1.7; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* toast:深色主题下是"纸条",纸白主题下是深色浮签 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 70;
  max-width: min(460px, calc(100vw - 40px));
  padding: 10px 16px;
  color: var(--toast-ink);
  background: var(--toast-bg);
  border: 1px solid var(--toast-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 13px;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 配置节点:标签 + 选项胶囊,轻量无卡框 */
.card.is-cfg { border-top: 2px solid var(--port-out); }
.card.set-node { width: 250px; }
.card.cfg-node { width: 200px; }

.card.cfg-node:not(.is-note) {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cfg-node .card-head {
  padding: 0 0 8px;
  border-bottom: 0;
  background: transparent;
}

.cfg-node .card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
}

.cfg-node .card-head .card-code {
  margin-right: 0;
  color: var(--muted);
  background: var(--chip-bg);
  border-color: transparent;
  vertical-align: 0;
}

.cfg-node .card-kicker { display: none; }
.cfg-node .card-body { padding: 0 0 0 14px; }

.cfg-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: max-content;
  min-width: 108px;
  margin-bottom: 7px;
  padding: 5px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  font-size: 12.5px;
  color: var(--muted);
  transition: border-color 120ms ease, color 120ms ease;
}

.cfg-option:hover { border-color: var(--line-strong); color: var(--text); }

.cfg-option:last-child { margin-bottom: 0; }

.cfg-option.is-locked { opacity: 0.5; cursor: not-allowed; }
.cfg-option.is-locked:hover { border-color: var(--line); color: var(--muted); }
.cfg-locked { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cfg-option .muted { font-size: 11px; }

.card-code {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}

.waiting { padding: 14px 6px; text-align: center; }
.foot-hint { font-size: 12px; align-self: center; }
.cfg-snapshot { font-size: 11px; opacity: 0.75; }

/* 连线的点击热区与断连 */
#edges path.hit {
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
}

#edges path:not(.hit) { pointer-events: none; }

/* 想法卡配置 */
.config-groups { margin-top: 10px; }
.config-groups summary { cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; }
.chip-group { margin-top: 8px; }
.chip-group .group-label { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.chip.is-selected { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }

/* K1 想法输入:作者的一句话,也是稿纸 */
.idea-input {
  width: 100%;
  padding: 12px 14px;
  resize: both;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.8;
  outline: none;
}
.idea-input:focus { border-color: var(--paper-focus); box-shadow: 0 0 0 3px var(--paper-ring); }

/* ---------- 顶栏项目区 ---------- */
.topbar-project {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.work-title {
  width: 220px;
  padding: 5px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.work-title:hover { border-color: var(--line); }
.work-title:focus { border-color: var(--accent-line); background: var(--surface); }
.work-title::placeholder { color: var(--faint); font-weight: 400; }
.mode-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.mode-badge.is-ms {
  color: var(--ms-ink);
  background: var(--ms-soft);
  border-color: var(--ms-soft);
}
.progress-pill {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* 细滚动条 */
.dock-panel::-webkit-scrollbar,
textarea::-webkit-scrollbar { width: 9px; height: 9px; }
.dock-panel::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.dock-panel::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track { background: transparent; }

/* 稿纸内的滚动条走纸色 */
.draft-editor::-webkit-scrollbar-thumb,
.ms-editor::-webkit-scrollbar-thumb { background: rgba(43, 38, 29, 0.2); }

/* 文本选区与聚焦细节 */
::selection { background: var(--accent-soft); }
textarea { scrollbar-width: thin; }

/* 空态提示统一:安静地退后 */
p.muted.waiting {
  padding: 12px;
  color: var(--faint);
  background: var(--well);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

/* ---------- 作品标签页(多存档槽) ---------- */
.worktabs {
  position: fixed;
  inset: 52px 0 auto 0;
  z-index: 29;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  background: var(--tabs-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  overflow-x: auto;
}
.worktab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  color: var(--faint);
  font-size: 13px;
  white-space: nowrap;
  transition: color 120ms ease, background 120ms ease;
}
.worktab:hover { color: var(--text); background: var(--hover-veil); }
.worktab.is-active {
  color: var(--text);
  font-weight: 700;
  background: var(--bg);
  border-color: var(--line);
  box-shadow: 0 1px 0 var(--bg);
}
.worktab-title { overflow: hidden; text-overflow: ellipsis; }
.worktab-x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--faint);
  font-size: 12px;
}
.worktab-x:hover { background: var(--accent-soft); color: var(--red); }
.worktab-add {
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 8px 8px 0 0;
  color: var(--faint);
  font-size: 16px;
}
.worktab-add:hover { color: var(--accent-hover); background: var(--hover-veil); }

/* ---------- 小地图(右下角:卡片布局 + 视口框,点击/拖动跳转) ---------- */
#minimap {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 35;
  width: 200px;
  height: 140px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  opacity: 0.92;
  transition: opacity 120ms ease;
}
#minimap:hover { opacity: 1; }
#minimap canvas { display: block; width: 200px; height: 140px; cursor: crosshair; }

/* 账号占位与帮助面板 */
.avatar-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 700;
}
.avatar-button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.help-panel {
  position: fixed;
  top: 96px;
  right: 14px;
  z-index: 50;
  width: 420px;
  padding: 14px 16px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.help-panel h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 15px;
}
.help-panel ul { margin: 0; padding-left: 18px; }
.help-panel li { margin: 6px 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.help-panel li strong { color: var(--text); }


/* ============================================================
   studio 主题：纸卡工作室（UI 参考稿移植）
   深色外壳 + 橄榄画布 + 米色纸卡 + 三色端口环 + 左侧图标栏
   ============================================================ */

body[data-theme="studio"] {
  --bg: #292a28;
  --grid-dot: rgba(235, 230, 218, 0.10);
  --surface: #1d2022;
  --surface-2: #24282a;
  --surface-3: #2c3033;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-hover: rgba(255, 255, 255, 0.28);
  --text: #ece9e2;
  --muted: #949894;
  --faint: #70736d;
  --field: #25292b;
  --chip-bg: rgba(255, 255, 255, 0.05);
  --chip-line: rgba(255, 255, 255, 0.08);
  --hover-veil: rgba(255, 255, 255, 0.06);
  --well: rgba(255, 255, 255, 0.03);
  --edge: rgba(105, 185, 162, 0.55);
  --zone-ink: rgba(238, 234, 224, 0.26);
  --topbar-bg: #181a1c;
  --tabs-bg: #141617;
  --backdrop: rgba(8, 8, 10, 0.62);
  --scroll-thumb: #363b3d;

  --accent: #69b9a2;
  --accent-hover: #7cc7b1;
  --accent-soft: rgba(105, 185, 162, 0.14);
  --accent-line: rgba(105, 185, 162, 0.42);
  --accent-ink: #9ed6c5;
  --on-accent: #10221d;

  --paper: #faf7ef;
  --paper-2: #f0ece1;
  --paper-ink: #222522;
  --paper-muted: #70736d;
  --paper-line: #ddd7c9;
  --paper-focus: #69b9a2;
  --paper-ring: rgba(105, 185, 162, 0.18);

  --amber: #d1a857;
  --amber-soft: rgba(209, 168, 87, 0.13);
  --red: #d77767;

  --port-out: #d0554b;
  --port-in: #69b9a2;
  --port-model: #7b86d5;
  --port-cmd: #d1a857;
  --port-ms: #a08bd8;
  --model-ink: #aab3e6;
  --model-soft: rgba(123, 134, 213, 0.13);
  --ms-ink: #e0a196;
}

/* —— 卡片＝米色纸面：卡内 token 整体翻转 —— */
body[data-theme="studio"] .card {
  --surface: #f4f1e9;
  --surface-2: #fbf9f2;
  --surface-3: #efece3;
  --line: #dcd6c9;
  --line-strong: #c9c3b4;
  --line-hover: #b3ad9c;
  --text: #222522;
  --muted: #70736d;
  --faint: #8f9289;
  --field: #faf7ef;
  --chip-bg: #e6e2d8;
  --chip-line: #d6d1c5;
  --hover-veil: rgba(0, 0, 0, 0.045);
  --well: rgba(255, 255, 255, 0.4);
  --scroll-thumb: rgba(34, 37, 34, 0.22);
  --accent: #287966;
  --accent-hover: #2f8b74;
  --accent-soft: rgba(40, 121, 102, 0.11);
  --accent-line: rgba(40, 121, 102, 0.4);
  --accent-ink: #287966;
  --on-accent: #f4f5ef;
  --amber: #946b1c;
  --amber-soft: rgba(148, 107, 28, 0.12);
  --model-ink: #5965b5;
  --model-soft: rgba(89, 101, 181, 0.12);
  --ms-ink: #a75144;
  background: #f4f1e9;
  color: #222522;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 2px 5px rgba(0, 0, 0, 0.20);
}
body[data-theme="studio"] .card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.22);
}

/* —— 端口＝纸芯彩环（画布色光晕）—— */
body[data-theme="studio"] .port {
  width: 15px;
  height: 15px;
  background: #f4f1e9;
  border: 3.5px solid var(--port-out);
  box-shadow: 0 0 0 3px var(--bg);
}
body[data-theme="studio"] .port:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent-line); }
body[data-theme="studio"] .port.in { background: #f4f1e9; border-color: var(--port-in); }
body[data-theme="studio"] .port.model-port { background: #f4f1e9; border-color: var(--port-model); }
body[data-theme="studio"] .port.model-port:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(123, 134, 213, 0.25); }
body[data-theme="studio"] .port.cmd-port,
body[data-theme="studio"] .card.nextstep-node .port:not(.in) { background: #f4f1e9; border-color: var(--port-cmd); }
body[data-theme="studio"] .port.cmd-port:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(209, 168, 87, 0.25); }
body[data-theme="studio"] .port.ms-port,
body[data-theme="studio"] .card.ms-node .port:not(.in) { background: #f4f1e9; border-color: var(--port-ms); }
body[data-theme="studio"] .port.ms-port:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(215, 119, 103, 0.25); }
body[data-theme="studio"] .port::after { display: none; }

/* —— 左侧图标栏 —— */
.primary-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 58px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 12px;
  background: var(--tabs-bg);
  border-right: 1px solid var(--line);
}
.primary-rail .logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: #13201c;
  background: var(--accent);
  border-radius: 8px;
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 16px;
}
.primary-rail nav { display: grid; gap: 7px; }
.rail-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.rail-action:hover { color: var(--text); background: var(--hover-veil); }
.rail-action.is-active { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.rail-action svg { width: 18px; height: 18px; }
.rail-bottom { margin-top: auto; display: grid; gap: 9px; justify-items: center; }
.primary-rail .profile,
.primary-rail #avatarButton {
  width: 31px;
  height: 31px;
  color: #1f2724;
  background: #c8c6be;
  border: 0;
  border-radius: 50%;
  font-weight: 800;
  cursor: pointer;
}

/* —— 布局让位给左栏 —— */
.topbar { left: 58px; }

#viewport { inset: 88px 0 0 58px; }
.help-panel { left: 74px; }

/* —— 顶栏 studio 化 —— */
body[data-theme="studio"] .topbar { height: 56px; backdrop-filter: none; }
body[data-theme="studio"] .brand-mark { display: none; }
body[data-theme="studio"] .points-pill {
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 7px;
}
body[data-theme="studio"] .points-pill strong { color: var(--accent-ink); }

/* —— 画布控制条（左下）—— */
.canvas-controls {
  position: fixed;
  left: 74px;
  bottom: 15px;
  z-index: 45;
  height: 37px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--topbar-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.canvas-controls .ghost-button { border: 0; background: transparent; }
.canvas-controls .ghost-button:hover { background: var(--hover-veil); }
.cc-divider { width: 1px; height: 18px; background: var(--line); }

/* —— 档案抽屉 studio 化（右缘竖签 → 深色检查器风）—— */
body[data-theme="studio"] .dock-tab {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: none;
  box-shadow: -6px 4px 18px rgba(0, 0, 0, 0.2);
}
body[data-theme="studio"] .dock-tab:hover { background: var(--surface-2); }
body[data-theme="studio"] .dock-tab.is-open { color: var(--accent-ink); background: var(--surface-2); box-shadow: inset -2px 0 var(--accent); }
body[data-theme="studio"] .dock-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: -10px 0 26px rgba(0, 0, 0, 0.22);
  color: var(--text);
}

/* —— 小地图 / 提示 —— */
body[data-theme="studio"] #minimap {
  background: var(--topbar-bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

/* 左栏底色随主题 token（--tabs-bg），四主题自动融合 */


/* ============ studio v2：卡头徽章 / 候选序号 / 检查器 / 衬线 ============ */

/* —— 卡头：图标徽章 + 两行标识 —— */
.card-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.card-identity > div { min-width: 0; }
.node-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; }
.node-icon svg { width: 14px; height: 14px; }
body[data-theme="studio"] .card .node-icon.mint { color: #216a5a; background: #d7e9e2; }
body[data-theme="studio"] .card .node-icon.indigo { color: #5965b5; background: #e0e2f5; }
body[data-theme="studio"] .card .node-icon.gold { color: #946b1c; background: #eee0be; }
body[data-theme="studio"] .card .node-icon.coral { color: #a75144; background: #f0d7d2; }
body[data-theme="studio"] .card .card-head { min-height: 54px; align-items: center; }
body[data-theme="studio"] .card .card-kicker { font-size: 10px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
body[data-theme="studio"] .card .card-kicker .card-code { margin-right: 6px; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 700; }
body[data-theme="studio"] .card .card-head h3 { font-size: 14px; }
/* 其他主题下徽章融入原风格 */
body:not([data-theme="studio"]) .node-icon { color: var(--muted); background: var(--chip-bg); }

/* —— 候选行：A/B/C 序号 + 选中态薄荷填充 —— */
body[data-theme="studio"] .card .ver-col { counter-reset: choice; }
body[data-theme="studio"] .card .ver-col > .row-option {
  counter-increment: choice;
  position: relative;
  padding-left: 40px;
  background: #fdfcf8;
  border: 1px solid #e2dccd;
  border-radius: 6px;
  margin-bottom: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
body[data-theme="studio"] .card .ver-col > .row-option::before {
  content: counter(choice, upper-alpha);
  position: absolute;
  left: 10px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #757970;
  background: #e1ddd3;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
body[data-theme="studio"] .card .ver-col > .row-option.is-selected {
  background: #e4efe9;
  border-color: #8fb7aa;
  box-shadow: inset 3px 0 #287966;
}
body[data-theme="studio"] .card .ver-col > .row-option.is-selected::before { color: #fff; background: #287966; }

/* —— 叙事文本用衬线（样例段 / 正文 / 原稿 / 想法）—— */
body[data-theme="studio"] .card .row-sub,
body[data-theme="studio"] .card .draft-editor,
body[data-theme="studio"] .card .ch-editor,
body[data-theme="studio"] .card .ms-editor,
body[data-theme="studio"] .card .ms-line,
body[data-theme="studio"] .card .idea-input,
body[data-theme="studio"] .card textarea[data-action-input="idea"] {
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
}
body[data-theme="studio"] .card textarea[data-action-input="idea"] { font-size: 14px; line-height: 1.8; }

/* —— 检查器面板（故事档案）—— */
body[data-theme="studio"] #dock { top: 88px; bottom: 0; }
.dock-panel.inspector {
  width: 370px;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 26px rgba(0, 0, 0, 0.12);
  color: var(--text);
}
.inspector-header { min-height: 64px; flex: 0 0 auto; padding: 12px 11px 10px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.inspector-header > div { display: flex; flex-direction: column; gap: 2px; }
.inspector-header span { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.inspector-header h2 { margin: 0; font-size: 17px; }
.inspector-header .icon-button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.inspector-header .icon-button:hover { color: var(--text); background: var(--hover-veil); }
.inspector-header .icon-button svg { width: 16px; height: 16px; }
.inspector-tabs { height: 48px; flex: 0 0 auto; padding: 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.inspector-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 11px; cursor: pointer; }
.inspector-tabs button:hover { color: var(--text); }
.inspector-tabs button.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.inspector-tabs button svg { width: 14px; height: 14px; }
.inspector-tabs .dock-badge { position: static; margin-left: 2px; }
.inspector-content { min-height: 0; flex: 1; overflow: auto; padding: 12px 13px 24px; }
.inspector-content::-webkit-scrollbar { width: 7px; }
.inspector-content::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; }
.inspector-content h3 { margin: 2px 2px 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
body[data-theme="studio"] .inspector-content .log-block { padding: 12px 11px 12px 16px; position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 7px; }
body[data-theme="studio"] .inspector-content .log-block::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; background: var(--amber); border-radius: 1px; }
body[data-theme="studio"] .inspector-content .log-block h4 { margin: 0 0 6px; font-size: 11px; color: var(--text); }
body[data-theme="studio"] .inspector-content .log-block p { margin: 4px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
body[data-theme="studio"] .inspector-content .shelf-row { padding: 11px 8px; display: flex; justify-content: space-between; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
body[data-theme="studio"] .inspector-content .shelf-row .muted { color: var(--muted); font-size: 10px; }
body[data-theme="studio"] .inspector-content .dock-reader { color: #cfd3ce; font-size: 12px; line-height: 1.8; white-space: pre-wrap; font-family: "Noto Serif SC", "Songti SC", Georgia, serif; }

/* —— 收起态：右缘竖排还原按钮 —— */
.inspector-restore {
  pointer-events: auto;
  width: 36px;
  margin-top: 12px;
  padding: 11px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 7px 0 0 7px;
  box-shadow: -6px 4px 18px rgba(0, 0, 0, 0.22);
  writing-mode: vertical-rl;
  font-size: 11px;
  cursor: pointer;
}
.inspector-restore:hover { background: var(--surface-2); }
.inspector-restore svg { width: 15px; height: 15px; writing-mode: horizontal-tb; }
.inspector-restore .dock-badge { position: static; writing-mode: horizontal-tb; }

/* —— 顶栏封面块 —— */
.cover-mini { width: 25px; height: 33px; flex: 0 0 auto; border-radius: 3px; background: linear-gradient(145deg, #456e66, #262f2d); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 2px 7px rgba(0,0,0,.25); }
body:not([data-theme="studio"]) .cover-mini { display: none; }

/* —— 画布区域标签（studio）—— */
body[data-theme="studio"] .zone-label { color: rgba(238, 234, 224, 0.26); font-weight: 700; letter-spacing: .12em; }


/* ============ studio v3：项目栏 + 视图栏 + 竖签精修 ============ */

.topbar {
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
}
.project-meta { min-width: 0; display: flex; align-items: center; gap: 9px; }
.project-title { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.project-meta .work-title { field-sizing: content; width: auto; min-width: 60px; max-width: 240px; border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 700; text-align: left; }
.project-meta .work-subtitle { white-space: nowrap; }
.work-subtitle { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-button { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.icon-button:hover { color: var(--text); background: var(--hover-veil); }
.icon-button.danger:hover { color: var(--red); background: var(--accent-soft); }
.icon-button svg { width: 16px; height: 16px; }

.chapter-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.chapter-progress strong { color: var(--muted); font-weight: 600; }
.progress-track { width: 128px; height: 5px; overflow: hidden; background: var(--line-strong); border: 1px solid var(--line); border-radius: 3px; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 300ms ease; }

.top-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.save-state { margin-right: 4px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.save-state svg { width: 14px; height: 14px; color: var(--accent); }
.credit {
  height: 34px;
  margin-left: 4px;
  padding: 0 9px 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  cursor: pointer;
}
.credit:hover { background: var(--accent-soft); }
.credit span { color: var(--muted); font-size: 10px; }
.credit b { font-size: 14px; }
.credit svg { width: 13px; height: 13px; }

.viewbar {
  position: fixed;
  left: 58px;
  right: 0;
  top: 58px;
  z-index: 29;
  height: 42px;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
body[data-theme="studio"] .viewbar { background: var(--surface-2); }
.view-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.view-title strong { font-size: 12px; white-space: nowrap; }
.view-title .quiet, .view-title .progress-pill { color: var(--muted); font-size: 10px; background: transparent; border: 0; padding: 0; white-space: nowrap; }
.viewbar .mode-badge { padding: 0; background: transparent; border: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.live-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.view-actions { display: flex; align-items: center; gap: 3px; }
.quiet-button { width: 30px; height: 29px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.quiet-button:hover:not(:disabled) { color: var(--text); background: var(--hover-veil); }
.quiet-button:disabled { opacity: 0.4; cursor: default; }
.quiet-button svg { width: 14px; height: 14px; }
.divider { width: 1px; height: 18px; margin: 0 5px; background: var(--line); }
.mode-button { height: 29px; padding: 0 8px; display: flex; align-items: center; gap: 5px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 11px; cursor: pointer; }
.mode-button svg { width: 13px; height: 13px; }
.mode-button.is-active { color: var(--accent-ink); background: var(--accent-soft); }

/* —— 三层顶部后的布局偏移 —— */
.worktabs { top: 58px; left: 58px; padding-left: 10px; }
#viewport { inset: 94px 0 0 58px; }
body[data-theme="studio"] #dock { top: 94px; }
.help-panel { top: 104px; }

/* —— 档案竖签精修（图标+竖字+珊瑚角标）—— */
.inspector-restore { color: var(--text); gap: 9px; padding: 12px 0 13px; }
.inspector-restore .dock-badge { background: var(--red); color: #2c1d18; }


/* ============ studio v4：档案面板内容层（参考稿组件） ============ */

.inspector-toolbar { height: 52px; flex: 0 0 auto; padding: 9px 11px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.search-field { min-width: 0; flex: 1; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); background: var(--field); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.search-field svg { width: 13px; height: 13px; }

.panel-section-title { margin: 9px 4px 8px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.panel-section-title b { font-weight: 500; color: var(--faint); }

.ledger-item { position: relative; padding: 12px 11px 12px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 7px; }
.ledger-item::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; background: var(--amber); border-radius: 1px; }
.ledger-item.resolved::before { background: var(--accent); }
.ledger-item header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.ledger-item strong { font-size: 12px; color: var(--text); }
.ledger-item header span { padding: 3px 6px; color: var(--amber); background: var(--amber-soft); border-radius: 3px; font-size: 9px; }
.ledger-item.resolved header span { color: var(--accent-ink); background: var(--accent-soft); }
.ledger-item p { margin: 7px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ledger-meta { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 9px; }

.character-row { padding: 11px 7px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.character-avatar { width: 31px; height: 31px; display: grid; place-items: center; color: #1b2924; background: var(--accent); border-radius: 8px; font-weight: 800; }
.character-avatar.rival { background: var(--red); color: #2c1d18; }
.character-row div { min-width: 0; }
.character-row strong { display: block; font-size: 11px; color: var(--text); }
.character-row p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.book-row { padding: 11px 8px; display: grid; grid-template-columns: 29px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid var(--line); }
.chapter-index { color: var(--amber); font-family: Georgia, serif; font-size: 14px; text-align: center; }
.book-row strong { display: block; font-size: 11px; color: var(--text); }
.book-row p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.book-row button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.book-row button:hover { color: var(--text); background: var(--hover-veil); }
.book-row svg { width: 14px; height: 14px; }

.plan-row { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.plan-row header { display: flex; justify-content: space-between; gap: 10px; }
.plan-row strong { font-size: 11px; color: var(--text); }
.plan-row span { color: var(--accent); font-size: 9px; white-space: nowrap; }
.plan-row p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.inspector-content .muted { color: var(--muted); font-size: 11px; line-height: 1.6; padding: 6px 4px; }



/* 作品标签双击改名 */
.worktab-rename {
  width: 110px;
  padding: 1px 4px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  outline: none;
}


/* ============ studio v6：档案竖签定稿 + 标签栏层次配色 ============ */

/* —— 档案竖签：图标在上 → 竖排「故事档案」 → 角标在下 —— */
.inspector-restore {
  pointer-events: auto;
  width: 36px;
  margin-top: 14px;
  padding: 13px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  writing-mode: horizontal-tb;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 7px 0 0 7px;
  box-shadow: -6px 4px 18px rgba(0, 0, 0, 0.22);
  font-size: 11px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.inspector-restore:hover { background: var(--surface-2); color: var(--text); }
.inspector-restore svg { width: 15px; height: 15px; flex: 0 0 auto; }
.inspector-restore span { writing-mode: vertical-rl; letter-spacing: 5px; line-height: 1; }
.inspector-restore .dock-badge {
  position: static;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: var(--red);
  color: #2c1d18;
  font-size: 10px;
}

/* —— 档案展开：从右缘滑入 —— */
.dock-panel.inspector {
  animation: inspector-in 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform, opacity;
}
@keyframes inspector-in {
  from { transform: translateX(56px); opacity: 0.2; }
  to { transform: translateX(0); opacity: 1; }
}

/* —— 作品标签栏：次级层配色（顶栏 var(--topbar-bg) → 标签栏 var(--surface-2) → 画布 var(--bg)）—— */
body[data-theme="studio"] .worktabs {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
body[data-theme="studio"] .worktab {
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}
body[data-theme="studio"] .worktab:hover { color: var(--text); background: var(--hover-veil); }
body[data-theme="studio"] .worktab.is-active {
  color: var(--text);
  background: var(--bg);
  border-color: var(--line);
}
body[data-theme="studio"] .worktab-add {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
}
body[data-theme="studio"] .worktab-add:hover { color: var(--text); border-color: var(--line-hover); }


/* ============ studio v7：档案真滑动 + 加号融入 ============ */

/* dock 容器改为固定宽度裁剪区，面板在里面滑进滑出 */
body[data-theme="studio"] #dock {
  top: 94px;
  bottom: 0;
  width: 372px;
  overflow: hidden;
  pointer-events: none;
}
.dock-panel.inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 370px;
  pointer-events: auto;
  transform: translateX(103%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1);
  animation: none;
}
.dock-panel.inspector.is-open { transform: translateX(0); }

.inspector-restore {
  position: absolute;
  right: 0;
  top: 14px;
  margin-top: 0;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 160ms ease;
}
.inspector-restore.is-hidden { transform: translateX(110%); opacity: 0; pointer-events: none; }
.inspector-restore .restore-badge-slot { display: contents; }
.inspector-tabs .tab-badge-slot { display: contents; }

/* 加号融入标签栏：和标签同形态的幽灵方块 */
body[data-theme="studio"] .worktab-add {
  width: 28px;
  height: 26px;
  align-self: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
}
body[data-theme="studio"] .worktab-add:hover { color: var(--text); background: var(--hover-veil); border: 0; }


/* 书架行：第X章 金色衬线前缀，两列布局 */
.book-row { grid-template-columns: 1fr auto; }
.chapter-cn { margin-right: 7px; color: var(--amber); font-style: normal; font-family: "Noto Serif SC", Georgia, serif; }


/* 阅读器：头部固定，正文在阅读框内独立滚动 */
.inspector-content:has(.reader-wrap) { overflow: hidden; display: flex; flex-direction: column; }
.reader-wrap { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.reader-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
.reader-head h3 { margin: 0; font-size: 13px; color: var(--text); }
.dock-reader {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dock-reader::-webkit-scrollbar { width: 7px; }
.dock-reader::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; }


/* 品牌 logo 图片化 */
.primary-rail .logo { background: transparent; width: 30px; height: 26px; }
.primary-rail .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 左栏重置：常态低调，悬停出危险色 */
.rail-action.rail-danger:hover { color: var(--red); background: var(--accent-soft); }


/* C 系列（studio）：保持透明芯片簇，编号在标题药丸内高亮 */
body[data-theme="studio"] .cfg-node .card-head { background: transparent; border-bottom: 0; }
body[data-theme="studio"] .cfg-node .card-head h3 { background: #f4f1e9; border-color: rgba(255,255,255,.24); color: #222522; }
body[data-theme="studio"] .cfg-node .card-head .card-code { color: #216a5a; background: #d7e9e2; border-radius: 4px; padding: 0 5px; }


/* ============ studio v8：四主题融合补丁 ============ */

/* M 卡档位端口 = 模型语义：纸芯 + 靛蓝环（与 K1 蓝色模型口配对） */
body[data-theme="studio"] .model-node .tier-option .model-tier-port {
  background: #f4f1e9;
  border-color: var(--port-model);
}
body[data-theme="studio"] .model-node .tier-option .model-tier-port:hover {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(123, 134, 213, 0.3);
}

/* 旧主题的端口保持原样式：studio 的纸芯彩环只在 studio 生效（原规则已限定） */

/* 旧主题下卡头图标徽章的柔和配色 */
body:not([data-theme="studio"]) .node-icon.mint { color: var(--accent-ink); background: var(--accent-soft); }
body:not([data-theme="studio"]) .node-icon.indigo { color: var(--model-ink); background: var(--model-soft); }
body:not([data-theme="studio"]) .node-icon.gold { color: var(--amber); background: var(--amber-soft); }
body:not([data-theme="studio"]) .node-icon.coral { color: var(--red); background: rgba(224, 93, 76, 0.12); }

/* 旧主题下候选行 A/B/C 序号与选中态（token 版，与主题融合） */
body:not([data-theme="studio"]) .card .ver-col { counter-reset: choice; }
body:not([data-theme="studio"]) .card .ver-col > .row-option { counter-increment: choice; position: relative; padding-left: 40px; }
body:not([data-theme="studio"]) .card .ver-col > .row-option::before {
  content: counter(choice, upper-alpha);
  position: absolute;
  left: 10px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
body:not([data-theme="studio"]) .card .ver-col > .row-option.is-selected::before { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }


/* 双 logo：深色主题用奶白页版，纸白主题用深色页版（选择器压过 .logo img 通配） */
.primary-rail .logo .logo-for-light { display: none; }
.primary-rail .logo .logo-for-dark { display: block; }
body[data-theme="light"] .primary-rail .logo .logo-for-dark { display: none; }
body[data-theme="light"] .primary-rail .logo .logo-for-light { display: block; }

/* 创作点胶囊防挤压换行 */
.credit { flex: 0 0 auto; }
.credit span { white-space: nowrap; }


/* 阅读器文字色随主题 token */
.dock-reader { color: var(--text); }
body[data-theme="studio"] .inspector-content .dock-reader { color: var(--text); }


/* ============ studio v9：端口方向语义——出=实心点，入=空心环（同色系配对） ============ */
/* 出端口：实心色点 + 纸色描边 */
body[data-theme="studio"] .port {
  background: var(--port-out);
  border: 3px solid #f4f1e9;
  box-shadow: 0 0 0 3px var(--bg);
}
/* 入端口：纸芯 + 色环 */
body[data-theme="studio"] .port.in {
  background: #f4f1e9;
  border: 3.5px solid var(--port-in);
}
/* 模型族：M 档位出=靛蓝实心；K1 模型入=靛蓝空心环 */
body[data-theme="studio"] .model-node .tier-option .model-tier-port {
  background: var(--port-model);
  border: 3px solid #f4f1e9;
}
body[data-theme="studio"] .port.model-port {
  background: #f4f1e9;
  border: 3.5px solid var(--port-model);
}
/* 指令族（黄）：X/L1 行出=实心；K5/L1 入口=空心环 */
body[data-theme="studio"] .port.cmd-port:not(.in),
body[data-theme="studio"] .card.nextstep-node .port:not(.in) {
  background: var(--port-cmd);
  border: 3px solid #f4f1e9;
}
body[data-theme="studio"] .port.in.cmd-port {
  background: #f4f1e9;
  border: 3.5px solid var(--port-cmd);
}
/* 原稿族（珊瑚）：R1 出=实心；K1 原稿入=空心环 */
body[data-theme="studio"] .port.ms-port:not(.in),
body[data-theme="studio"] .card.ms-node .port:not(.in) {
  background: var(--port-ms);
  border: 3px solid #f4f1e9;
}
body[data-theme="studio"] .port.in.ms-port {
  background: #f4f1e9;
  border: 3.5px solid var(--port-ms);
}


/* ============ studio v10：卡头醒目化——编号徽章+大标题一行，说明单行 ============ */
.card-titles { min-width: 0; }
.card-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.card-title-row h3 { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title-row .card-code { flex: 0 0 auto; }
.card-identity .card-kicker {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 说明文字放不下就靠加宽卡片解决：主流程卡最小宽 470（对比窗的 :has 加宽不受影响；全主题生效） */
.card:not(.cfg-node):not(.model-node):not(.is-note) { min-width: 470px; }
body[data-theme="studio"] .card .card-title-row .card-code {
  margin: 0;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #216a5a;
  background: #d7e9e2;
  border: 1px solid #b7d6cc;
  border-radius: 5px;
}
body[data-theme="studio"] .card .card-head h3 { font-size: 15px; }


/* M 卡：拉宽保证说明一行、复制按钮不挤竖（全主题生效） */
.card.model-node { min-width: 340px; }
.model-node .head-tools { flex: 0 0 auto; }
.model-node .head-tools .mini-button { white-space: nowrap; }


/* C 系列端口统一绿色（配置选项特殊：连线即选择，不区分出入语义；全主题生效） */
.cfg-node .port { background: var(--port-in); }
body[data-theme="studio"] .cfg-node .port {
  background: var(--port-in);
  border: 3px solid #f4f1e9;
}


/* 原稿模式徽章：仅原稿接管时亮起（紫色，提示连线锁定状态） */
.project-meta .mode-badge.is-ms {
  padding: 2px 8px;
  font-size: 10px;
  color: var(--ms-ink);
  background: rgba(160, 139, 216, 0.14);
  border: 1px solid rgba(160, 139, 216, 0.35);
  border-radius: 5px;
  white-space: nowrap;
}


/* 圆徽章 logo：本体自带深底徽章，容器彻底透明；左栏加宽承载 64px */
.primary-rail { width: 80px; }
.topbar { left: 80px; }
.worktabs { left: 80px; }
#viewport { inset: 94px 0 0 80px; }
.help-panel { left: 96px; }
.canvas-controls { left: 96px; }
.primary-rail .logo {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background: transparent;
  border-radius: 50%;
  box-shadow: none;
}



/* K2/K4 方向词签 */
.dir-box { margin-bottom: 10px; }
.dir-box .outline-label { margin-bottom: 6px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 5px; }


/* 配置卡折叠：透明芯片簇上的展开钮做成纸片小徽章（各主题跟 token 走） */
.cfg-expand {
  min-width: 26px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.cfg-expand:hover { color: var(--accent); border-color: var(--accent-line); }
body[data-theme="studio"] .cfg-node .cfg-expand {
  color: #216a5a;
  background: #f4f1e9;
  border-color: rgba(255, 255, 255, 0.24);
}
.cfg-more { margin-top: 2px; color: var(--zone-ink); font-size: 10px; }
body[data-theme="studio"] .cfg-more { color: rgba(238, 234, 224, 0.4); }


/* 行内端口骑边：M1 档位 / X 指令 / L1 细化行 的出点补上卡片内边距偏移，与其他端口一致半内半外 */
.model-node .tier-option .model-tier-port { right: -22px; }
.card.nextstep-node .row-option .port.cmd-port { right: -23px; }
.card.roadmap-node .row-option .port.cmd-port { right: -23px; }


/* 确认弹窗的输入框（补章节名等） */
.confirm-input {
  width: 100%;
  margin: 10px 0 2px;
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
}
.confirm-input:focus { border-color: var(--accent-line); }


/* ============ 卡片演示（微剧场） ============ */
body.demo-dim .card { opacity: 0.22; transition: opacity 300ms ease; }
body.demo-dim .card.demo-focus { opacity: 1; }
body.demo-dim .zone-label { opacity: 0.1; }

#demoShield { position: fixed; inset: 0; z-index: 80; background: transparent; }
#demoBubble {
  position: fixed;
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  max-width: 340px;
  background: #fffdf6;
  color: #2c2a26;
  border: 1px solid #d8d2c2;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.75;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
#demoBubble::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fffdf6;
  border-left: 1px solid #d8d2c2;
  border-bottom: 1px solid #d8d2c2;
  transform: rotate(45deg);
}
#demoBubble[data-tail="left"]::before { left: -7px; top: 16px; }
#demoBubble[data-tail="right"]::before { right: -7px; top: 16px; transform: rotate(225deg); }
#demoBubble[data-tail="top"]::before { top: -7px; left: 24px; transform: rotate(135deg); }
#demoBubble[data-tail="bottom"]::before { bottom: -7px; left: 24px; transform: rotate(-45deg); }
#demoBubble[data-tail="none"]::before { display: none; }
#demoBubble.show { opacity: 1; visibility: visible; }
#demoBubble.pop { animation: demo-bubble-pop 0.28s ease; }
@keyframes demo-bubble-pop {
  0% { transform: scale(0.94); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}
#demoExit {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(30, 30, 28, 0.88);
  color: #f2efe6;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
#demoExit:hover { background: rgba(60, 58, 52, 0.95); border-color: rgba(255, 255, 255, 0.5); }

#edgeOverlay path.demo-line { stroke: var(--accent); stroke-width: 2.5; opacity: 0.9; animation: none; }

.demo-play { min-width: auto; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
body[data-theme="studio"] .card .demo-play { color: #216a5a; background: #d7e9e2; border: 1px solid #b7d6cc; }
body[data-theme="studio"] .card .demo-play:hover { background: #c9e2d8; }


/* 演示：配置标签生效闪亮 */
.demo-flash .tag, .row-tags.demo-flash > *,
.model-tag.demo-flash,
.dir-chips.demo-flash, .ref-box.demo-flash, .ver-col > .row-option.demo-flash,
.plan-tools.demo-flash, .ch-tools.demo-flash, .primary-button.demo-flash,
.tier-picker.demo-flash, .card-body.demo-flash, .row-option.demo-flash,
.kv > div.demo-flash, .row-sub.demo-flash,
.ms-summary.demo-flash, .row-text.demo-flash, .ref-meta.demo-flash, .ref-tools.demo-flash,
.port.demo-flash,
#dock .book-row.demo-flash, .rail-action.demo-flash {
  animation: demo-tag-flash 800ms ease-in-out 2;
  border-radius: 8px;
}
@keyframes demo-tag-flash {
  0%, 100% { box-shadow: none; filter: none; background-color: transparent; }
  50% {
    box-shadow: 0 0 0 3px var(--accent-line), 0 0 22px 4px var(--accent-line);
    background-color: var(--accent-line);
    filter: brightness(1.12);
  }
}


/* 演示：点击模拟（按下+光圈） */
.demo-click {
  animation: demo-press 650ms ease;
}
@keyframes demo-press {
  0% { transform: scale(1); box-shadow: none; }
  30% { transform: scale(0.88); box-shadow: 0 0 0 5px var(--accent-line); }
  60% { transform: scale(1.04); box-shadow: 0 0 0 2px var(--accent-line); }
  100% { transform: scale(1); box-shadow: none; }
}


/* 演示：场务淡出（挡镜头的卡整卡隐去，落幕恢复） */
.card.demo-hide { opacity: 0 !important; pointer-events: none; transition: opacity 0.45s ease; }


/* 宣传片模式：清场 + 演出层 */
body.film-mode .topbar, body.film-mode .primary-rail, body.film-mode #minimap,
body.film-mode .worktabs, body.film-mode .canvas-controls,
body.film-mode #dock, body.film-mode .demo-play, body.film-mode #demoBubble,
body.film-mode #demoExit { display: none !important; }
body.film-mode #viewport { left: 0 !important; top: 0 !important; }
#filmFade {
  position: fixed; inset: 0; z-index: 120; background: #14140f; pointer-events: none;
  opacity: 1; transition: opacity 1.1s ease;
}
#filmFade.out { opacity: 0; }
#filmTitle {
  position: fixed; left: 50%; bottom: 10%; transform: translateX(-50%) translateY(12px);
  z-index: 110; max-width: 86vw; text-align: center;
  font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  font-size: clamp(22px, 3.8vw, 38px); font-weight: 700; letter-spacing: 5px;
  color: #f7f4ea; padding: 14px 34px; border-radius: 16px;
  background: rgba(22, 22, 17, 0.78);
  border: 1px solid rgba(244, 241, 233, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none;
}
#filmTitle.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#filmEnd {
  position: fixed; inset: 0; z-index: 130; background: #292a28;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
#filmEnd.show { opacity: 1; }
#filmEnd img { width: clamp(84px, 14vw, 132px); margin-bottom: 14px; }
#filmEnd .film-name {
  font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  font-size: clamp(38px, 7vw, 64px); font-weight: 700; letter-spacing: 14px;
  color: #f4f1e9; text-indent: 14px;
}
#filmEnd .film-en { font-size: clamp(12px, 1.8vw, 16px); letter-spacing: 8px; color: #b3ad9c; text-indent: 8px; }
#filmEnd .film-slogan {
  margin-top: 18px; font-size: clamp(16px, 2.6vw, 22px); letter-spacing: 10px; text-indent: 10px;
  color: #d0cbbd; border-top: 1px solid rgba(244, 241, 233, 0.25); padding-top: 16px;
}
#filmEnd .film-tagline {
  margin-top: 26px; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: 6px; text-indent: 6px;
  color: #8f8a7c;
}
#filmEnd .film-name, #filmEnd .film-en, #filmEnd .film-slogan, #filmEnd .film-tagline { white-space: nowrap; }
/* 竖屏：字幕带与收尾卡缩字，保证每句一行过 */
@media (orientation: portrait) {
  #filmTitle {
    white-space: nowrap;
    font-size: clamp(13px, 3.4vw, 24px);
    letter-spacing: 2px;
    padding: 10px 18px;
    max-width: 96vw;
  }
  #filmEnd .film-name { font-size: clamp(34px, 12vw, 56px); letter-spacing: 10px; text-indent: 10px; }
  #filmEnd .film-en { font-size: clamp(11px, 3vw, 14px); letter-spacing: 6px; text-indent: 6px; }
  #filmEnd .film-slogan { font-size: clamp(14px, 4.4vw, 20px); letter-spacing: 7px; text-indent: 7px; }
  #filmEnd .film-tagline { font-size: clamp(11px, 3.2vw, 14px); letter-spacing: 4px; text-indent: 4px; }
}

/* 宣传片：演示线带光晕，终幕全卡压暗时线是唯一亮部 */
body.film-mode #edgeOverlay path.demo-line {
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 7px var(--accent-line)) drop-shadow(0 0 2px var(--accent));
}