/*
 * Appearance layer: two themes on one shared design system.
 *   shiqing   — 日光：浅灰底、白色浮层、黑色主按钮（浅色）
 *   screening — 放映厅：近黑底、石墨浮层、白色主按钮（深色）
 * The only colour is blue (--t-sel): selection, links, progress. Amber lives only in the logo.
 * Loaded after styles.css / brand.css. Every rule is scoped to :root[data-theme]
 * so it wins over the older layers without !important.
 */

/* ---------- Tokens ---------- */
:root[data-theme] {
  --t-font: "Segoe UI Variable Text", "Segoe UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  /* Static display copy only: the bundled subset covers those glyphs, system serifs cover the rest. */
  --t-font-display: "Lingou Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --t-mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;
  --t-r-sm: 5px;
  --t-r-md: 8px;
  --t-r-lg: 12px;
  --t-ease: cubic-bezier(.2, .8, .2, 1);
  --t-dur: 170ms;
  --t-blur: blur(18px) saturate(140%);
}
/* Lensmith is a tool, not a poster: neutral greys, one ink, hairlines. Colour is reserved for state
   (saved, failed) and for the pictures people make; the brand amber lives only in the mark. */
:root[data-theme="shiqing"] {
  /* 日光 (the key stays "shiqing" so saved choices keep working). */
  color-scheme: light;
  --t-bg: #f1f1ef;
  --t-glow: transparent;
  --t-dot: rgba(0, 0, 0, .075);
  --t-glass: rgba(255, 255, 255, .86);
  --t-glass-solid: rgba(255, 255, 255, .97);
  --t-panel: #ffffff;
  --t-raised: #ffffff;
  --t-hover: #f3f3f2;
  --t-field: #f6f6f5;
  --t-line: rgba(0, 0, 0, .07);
  --t-line-strong: rgba(0, 0, 0, .13);
  --t-text: #141416;
  --t-text-2: #5c5c66;
  --t-text-3: #75757e;
  --t-accent: #141416;
  --t-fill-hover: #2e2e33;
  --t-accent-hover: #141416;
  --t-accent-soft: rgba(24, 24, 27, .055);
  --t-accent-line: rgba(24, 24, 27, .3);
  --t-on-accent: #ffffff;
  /* Blue is the one colour: selection, links, progress. */
  --t-sel: #2f6bff;
  --t-sel-soft: rgba(47, 107, 255, .1);
  --t-sel-line: rgba(47, 107, 255, .5);
  --t-signal: #18181b;
  --t-signal-soft: rgba(24, 24, 27, .07);
  --t-ok: #2d7a52;
  --t-warn: #9a6512;
  --t-danger: #b4382c;
  --t-danger-soft: rgba(180, 56, 44, .08);
  --t-ok-soft: rgba(45, 122, 82, .09);
  --t-edge: rgba(0, 0, 0, .2);
  --t-edge-strong: rgba(0, 0, 0, .42);
  --t-highlight: transparent;
  --t-shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
  --t-shadow-md: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -14px rgba(0, 0, 0, .18);
  --t-shadow-lg: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 44px -16px rgba(0, 0, 0, .24);
  --t-scrim: rgba(24, 24, 27, .28);
  --t-seal: #141416;
  --t-vignette: transparent;
  --t-shadow-color: rgba(24, 24, 27, .12);
  --t-chip-ink: 100%;
  --t-beam: rgba(24, 24, 27, .7);
  --t-beam-soft: rgba(24, 24, 27, .14);
  --t-screen: #f2f2f1;
  --t-screen-ink: #8b8b93;
  --t-screen-shadow: inset 0 0 0 1px rgba(24, 24, 27, .04);
  --t-spotlight-dim: .62;
  --t-note: #fbfaf5;
  /* Node kinds no longer carry colour; the variables stay for the older layers. */
  --t-k-text: var(--t-text-2);
  --t-k-image: var(--t-text-2);
  --t-k-video: var(--t-text-2);
  --t-k-audio: var(--t-text-2);
  --t-k-llm: var(--t-text-2);
  --t-k-gen: var(--t-text-2);
  --t-k-output: var(--t-text-2);
  --t-k-note: var(--t-text-2);
}
:root[data-theme="screening"] {
  /* 放映厅: the same system in the dark. */
  color-scheme: dark;
  --t-bg: #0c0c0d;
  --t-glow: transparent;
  --t-dot: rgba(255, 255, 255, .055);
  --t-glass: rgba(24, 24, 27, .82);
  --t-glass-solid: rgba(24, 24, 27, .97);
  --t-panel: #141416;
  --t-raised: #161618;
  --t-hover: #1e1e21;
  --t-field: #1e1e21;
  --t-line: rgba(255, 255, 255, .07);
  --t-line-strong: rgba(255, 255, 255, .13);
  --t-text: #f2f2f3;
  --t-text-2: #a4a4ac;
  --t-text-3: #85858e;
  --t-accent: #f2f2f3;
  --t-fill-hover: #ffffff;
  --t-accent-hover: #f2f2f3;
  --t-accent-soft: rgba(255, 255, 255, .07);
  --t-accent-line: rgba(255, 255, 255, .34);
  --t-on-accent: #0c0c0d;
  --t-sel: #6b9bff;
  --t-sel-soft: rgba(107, 155, 255, .14);
  --t-sel-line: rgba(107, 155, 255, .55);
  --t-signal: #f2f2f3;
  --t-signal-soft: rgba(255, 255, 255, .08);
  --t-ok: #72c093;
  --t-warn: #d6a24e;
  --t-danger: #ef8273;
  --t-danger-soft: rgba(239, 130, 115, .1);
  --t-ok-soft: rgba(114, 192, 147, .1);
  --t-edge: rgba(255, 255, 255, .16);
  --t-edge-strong: rgba(255, 255, 255, .42);
  --t-highlight: transparent;
  --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --t-shadow-md: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -12px rgba(0, 0, 0, .7);
  --t-shadow-lg: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 56px -20px rgba(0, 0, 0, .8);
  --t-scrim: rgba(0, 0, 0, .55);
  --t-seal: #f2f2f3;
  --t-vignette: transparent;
  --t-shadow-color: rgba(0, 0, 0, .5);
  --t-chip-ink: 100%;
  --t-beam: rgba(255, 255, 255, .75);
  --t-beam-soft: rgba(255, 255, 255, .14);
  --t-screen: #121214;
  --t-screen-ink: #7d7d86;
  --t-screen-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  --t-spotlight-dim: .55;
  --t-note: #1e1d1a;
  --t-k-text: var(--t-text-2);
  --t-k-image: var(--t-text-2);
  --t-k-video: var(--t-text-2);
  --t-k-audio: var(--t-text-2);
  --t-k-llm: var(--t-text-2);
  --t-k-gen: var(--t-text-2);
  --t-k-output: var(--t-text-2);
  --t-k-note: var(--t-text-2);
}

/* Legacy variables used by the older layers follow the active theme. */
:root[data-theme] body,
:root[data-theme] .storyboard-workspace {
  --bg: var(--t-bg);
  --surface: var(--t-panel);
  --surface-2: var(--t-raised);
  --surface-3: var(--t-hover);
  --line: var(--t-line);
  --line-strong: var(--t-line-strong);
  --text: var(--t-text);
  --muted: var(--t-text-2);
  --blue: var(--t-accent);
  --blue-strong: var(--t-accent-hover);
  --danger: var(--t-danger);
  --shadow: var(--t-shadow-md);
  /* brand.css */
  --page: var(--t-bg);
  --surface-strong: var(--t-raised);
  --ink: var(--t-text);
  --accent: var(--t-accent);
  --accent-strong: var(--t-accent-hover);
  --on-accent: var(--t-on-accent);
}
/* ---------- Base ---------- */
:root[data-theme],
:root[data-theme] body { font-family: var(--t-font); color: var(--t-text); background: var(--t-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:root[data-theme] body,
:root[data-theme] .app-shell,
:root[data-theme] #canvasWorkspace { color: var(--t-text); background: var(--t-bg); }
:root[data-theme] button, :root[data-theme] input, :root[data-theme] textarea, :root[data-theme] select { font-family: inherit; }
:root[data-theme] ::selection { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--t-line-strong) transparent; }
:root[data-theme] :focus-visible { outline: 2px solid var(--t-accent-line); outline-offset: 2px; }
:root[data-theme] svg.lucide { stroke-width: 1.6; }
:root[data-theme].theme-switching *, :root[data-theme].theme-switching *::before, :root[data-theme].theme-switching *::after {
  transition: background-color 280ms var(--t-ease), border-color 280ms var(--t-ease), color 280ms var(--t-ease), fill 280ms var(--t-ease), stroke 280ms var(--t-ease) !important;
}

@font-face {
  font-family: "Lingou Serif";
  src: url("assets/fonts/lingou-serif.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* The Lensmith mark (assets/logo.svg): a viewfinder with a spark struck in it. The class name stays
   from the old text seal. The wordmark is Latin, so it uses the UI font, not the CJK display subset. */
:root[data-theme] img.site-seal { display: block; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 0; background: none; }
:root[data-theme] .site-wordmark, :root[data-theme] .creation-home-brand strong.site-wordmark { font-family: var(--t-font); font-weight: 650; letter-spacing: -.01em; }
/* A seal stamp: the one red mark on the page, as on a signed scroll. */
:root[data-theme] .site-seal { display: grid; place-items: center; width: 30px; height: 30px; padding: 2px; border-radius: 4px; color: #f6efe6; background: var(--t-seal); font-family: var(--t-font-display); font-size: 11px; font-weight: 600; line-height: 1.05; letter-spacing: 0; writing-mode: vertical-rl; }

/* Shared glass surface for every floating chrome element. */
:root[data-theme] #canvasWorkspace :is(.brand-lockup, .project-control, .workspace-view-switch, .tool-rail, .bottom-dock, .mini-map),
:root[data-theme] #canvasWorkspace .top-actions :is(.icon-button, .text-button:not(.primary)) {
  border: 1px solid var(--t-line-strong);
  background: var(--t-glass);
  -webkit-backdrop-filter: var(--t-blur);
  backdrop-filter: var(--t-blur);
  box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-md);
}
:root[data-theme] #canvasWorkspace :is(.workspace-sidebar, .inspector, .director-panel, .node-create-menu),
:root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu,
:root[data-theme] #canvasWorkspace .top-more-actions.open,
:root[data-theme] .operations-panel {
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r-lg);
  color: var(--t-text);
  background: var(--t-glass-solid);
  -webkit-backdrop-filter: var(--t-blur);
  backdrop-filter: var(--t-blur);
  box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-lg);
}
/* ---------- Canvas stage ---------- */
:root[data-theme] #canvasWorkspace .viewport {
  background-color: var(--t-bg);
  background-image: radial-gradient(circle, var(--t-dot) 1px, transparent 1.2px);
}
/* Soft vignette + accent glow above the dot grid, below the nodes. */
:root[data-theme] #canvasWorkspace .viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--t-glow), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, var(--t-vignette) 100%);
}
:root[data-theme] .edge-path { stroke: var(--t-edge); stroke-width: 1.8; opacity: 1; }
:root[data-theme] .edge-path.related { stroke: var(--t-edge-strong); stroke-width: 2.2; }
:root[data-theme] .edge-path.selected { stroke: var(--t-accent); stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--t-accent-soft)); }
:root[data-theme] .edge-preview { stroke: var(--t-accent); stroke-width: 2; stroke-dasharray: 6 6; animation: t-dash 0.8s linear infinite; }
@keyframes t-dash { to { stroke-dashoffset: -12; } }
:root[data-theme] .selection-box { border-color: var(--t-accent-line); border-radius: 4px; background: var(--t-accent-soft); box-shadow: none; }
:root[data-theme] .canvas-hint { color: var(--t-text-3); font-size: 12px; }

/* ---------- Top bar ----------
 * Left: seal (home), canvas name + list. Centre: the three views. Right: undo/redo,
 * the one primary action (运行流程), a "更多" menu for occasional commands, and the account.
 */
:root[data-theme] #canvasWorkspace .topbar { top: 14px; left: 16px; right: 16px; height: 42px; gap: 8px; align-items: center; }
:root[data-theme] #canvasWorkspace .brand-lockup { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: var(--t-r-md); }
:root[data-theme] #canvasWorkspace .brand-lockup .site-seal { width: 28px; height: 28px; font-size: 10.5px; }
:root[data-theme] #canvasWorkspace .project-control { height: 42px; padding: 0 6px 0 14px; gap: 4px; border-radius: var(--t-r-md); }
:root[data-theme] #canvasWorkspace .project-name { width: 180px; color: var(--t-text); font-size: 14px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .project-name:hover { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .project-control:focus-within { border-color: var(--t-accent-line); }
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle { width: 32px; height: 32px; min-height: 32px; flex-basis: 32px; border-radius: 8px; opacity: 1; }
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle:hover { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .workspace-view-switch { position: absolute; left: 50%; height: 42px; padding: 4px; gap: 2px; border-radius: 999px; transform: translateX(-50%); }
:root[data-theme] #canvasWorkspace .workspace-view-switch button { min-width: 0; padding: 0 16px; border-radius: 999px; color: var(--t-text-2); font-size: 13px; font-weight: 500; transition: color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .workspace-view-switch button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .workspace-view-switch button.active { color: var(--t-on-accent); background: var(--t-accent); font-weight: 600; }
:root[data-theme] #canvasWorkspace .history-actions { display: flex; height: 42px; margin-left: auto; padding: 4px; gap: 2px; border: 1px solid var(--t-line-strong); border-radius: var(--t-r-md); background: var(--t-glass); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-md); pointer-events: auto; }
:root[data-theme] #canvasWorkspace .history-actions .icon-button { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 7px; color: var(--t-text-2); background: transparent; box-shadow: none; }
:root[data-theme] #canvasWorkspace .history-actions .icon-button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .history-actions svg { width: 17px; height: 17px; }
:root[data-theme] #canvasWorkspace .top-actions { position: relative; margin-left: 0; gap: 8px; align-items: center; }
:root[data-theme] #canvasWorkspace .top-actions > :is(.icon-button, .text-button) {
  width: 42px; height: 42px; min-height: 42px;
  border-radius: var(--t-r-md);
  color: var(--t-text-2);
  transition: color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .top-actions > :is(.icon-button, .text-button):hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .top-actions > .text-button.primary { width: auto; min-width: 64px; padding: 0 18px; border: 1px solid var(--t-line-strong); border-radius: 999px; color: var(--t-text); background: var(--t-glass); font-size: 14px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .top-actions > .text-button.primary:hover { color: var(--t-text); border-color: var(--t-accent-line); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .top-actions .symbol-button svg { width: 18px; height: 18px; }
/* The single primary action on the canvas. */
:root[data-theme] #canvasWorkspace .run-button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; color: var(--t-on-accent); background: var(--t-accent); font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--t-shadow-md); cursor: pointer; transition: background var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .run-button:hover { background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .run-button svg { width: 16px; height: 16px; fill: currentColor; }
:root[data-theme] #canvasWorkspace .run-button:disabled { cursor: progress; opacity: .85; }
:root[data-theme] #canvasWorkspace .run-button.running svg { animation: t-pulse 1.2s ease-in-out infinite; }
@keyframes t-pulse { 50% { opacity: .35; } }
/* "更多": always a dropdown (the old layout flattened it into the bar on wide screens). */
:root[data-theme] #canvasWorkspace .top-more-toggle { display: grid; place-items: center; }
:root[data-theme] #canvasWorkspace .top-more-actions { display: none; }
:root[data-theme] #canvasWorkspace .top-more-actions.open {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  display: grid; min-width: 220px; padding: 6px; gap: 2px;
  animation: t-pop 160ms var(--t-ease);
}
:root[data-theme] #canvasWorkspace .top-more-actions .menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 38px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px;
  color: var(--t-text); background: transparent; box-shadow: none;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
:root[data-theme] #canvasWorkspace .top-more-actions .menu-item:is(:hover, :focus-visible, :focus-within) { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .top-more-actions .menu-item svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .top-more-actions .menu-item::after { content: none; }
:root[data-theme] #canvasWorkspace .top-more-actions .menu-check { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--t-line); border-radius: 0 0 8px 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .top-more-actions .menu-check input { width: 16px; height: 16px; margin: 0 1px; accent-color: var(--t-accent); }

/* Save status reads as part of the canvas name: a dot plus short text, full text in the tooltip. */
:root[data-theme] #canvasWorkspace .save-state {
  position: static; left: auto; bottom: auto;
  display: inline-flex; align-items: center; max-width: 230px; min-width: 0;
  padding: 0 4px; border: 0;
  color: var(--t-text-2); background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: auto;
}
:root[data-theme] #canvasWorkspace .save-state::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--t-ok); }
:root[data-theme] #canvasWorkspace .save-state[data-status="saving"]::before { background: var(--t-warn); }
:root[data-theme] #canvasWorkspace .save-state[data-status="warning"] { color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .save-state[data-status="warning"]::before { background: var(--t-danger); }

/* ---------- Bottom tool rail ---------- */
:root[data-theme] #canvasWorkspace .tool-rail { bottom: 16px; height: 52px; padding: 6px; gap: 4px; border-radius: 14px; }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button {
  width: 40px; height: 40px; flex-basis: 40px;
  border: 0; border-radius: var(--t-r-md);
  color: var(--t-text-2);
  transition: color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .tool-rail .tool-button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button.active { color: var(--t-accent-hover); background: var(--t-accent-soft); box-shadow: none; }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button:active { transform: scale(.94); }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button { color: var(--t-on-accent); background: var(--t-accent); box-shadow: 0 6px 18px -6px var(--t-accent-line); }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button:hover { color: var(--t-on-accent); background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .tool-rail .danger:hover { color: var(--t-danger); background: var(--t-danger-soft); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu { bottom: 62px; padding: 8px; gap: 4px; }
:root[data-theme] #canvasWorkspace .tool-more-menu .tool-button { height: 64px; border-radius: var(--t-r-md); }
:root[data-theme] #canvasWorkspace .tool-more-menu .tool-button::after { color: var(--t-text-2); font-size: 11px; }

/* ---------- Zoom dock & minimap ---------- */
:root[data-theme] #canvasWorkspace .bottom-dock { left: 16px; bottom: 16px; height: 40px; padding: 4px; gap: 2px; border-radius: var(--t-r-md); }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .zoom-readout, .mini-map-toggle) { height: 30px; border-radius: 7px; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .mini-map-toggle):hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .zoom-readout { min-width: 50px; color: var(--t-text); background: transparent; font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .reuse-control { color: var(--t-text-2); font-size: 11px; accent-color: var(--t-accent); }
:root[data-theme] #canvasWorkspace .mini-map { border-radius: var(--t-r-md); }
:root[data-theme] .mini-node { border-radius: 2px; background: var(--t-accent); opacity: .55; }
/* ---------- Nodes ---------- */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node {
  --k: var(--t-k-text);
  border: 1px solid var(--t-line-strong);
  border-radius: 12px;
  color: var(--t-text);
  /* A 3px band in the node type's hue: readable even when zoomed far out. */
  background: linear-gradient(var(--k), var(--k)) top / 100% 3px no-repeat, var(--t-raised);
  box-shadow: var(--t-shadow-md);
  transition: border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
  animation: t-node-in 220ms var(--t-ease);
}
@keyframes t-node-in { from { opacity: 0; transform: scale(.97); } }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:hover { border-color: color-mix(in srgb, var(--k) 30%, var(--t-line-strong)); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:focus-visible { outline: 2px solid var(--t-accent-line); outline-offset: 3px; }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.selected {
  border-color: var(--t-accent-line);
  box-shadow: 0 0 0 3px var(--t-accent-soft), inset 0 1px 0 var(--t-highlight), var(--t-shadow-lg);
}
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.related { border-color: var(--t-edge-strong); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.connection-target { border-color: var(--t-ok); box-shadow: 0 0 0 3px var(--t-ok-soft), var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.image) { --k: var(--t-k-image); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.video) { --k: var(--t-k-video); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.audio) { --k: var(--t-k-audio); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.llm, .comfyui) { --k: var(--t-k-llm); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.api-image, .api-video, .generation, .generate-image, .generate-video) { --k: var(--t-k-gen); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.output) { --k: var(--t-k-output); }
:root[data-theme] #canvasWorkspace .canvas-node:is(.note) { --k: var(--t-k-note); }
:root[data-theme] #canvasWorkspace .reference-node .node-head { height: 46px; padding: 0 12px 0 14px; gap: 8px; border-bottom: 1px solid var(--t-line); }
:root[data-theme] #canvasWorkspace .reference-node .node-kind { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 3px 8px 3px 7px; border-radius: 999px; color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--k)); background: color-mix(in srgb, var(--k) 13%, transparent); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
:root[data-theme] #canvasWorkspace .reference-node .node-kind-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
:root[data-theme] #canvasWorkspace .reference-node .node-inline-title { color: var(--t-text); font-size: 14px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .reference-node .node-inline-title:focus { border-color: transparent; color: var(--t-text); background: var(--t-field); caret-color: var(--t-accent); }
:root[data-theme] #canvasWorkspace .node-close { width: 26px; height: 26px; border-radius: 7px; color: var(--t-text-3); opacity: 0; transition: opacity var(--t-dur) var(--t-ease), color var(--t-dur), background var(--t-dur); }
:root[data-theme] #canvasWorkspace .canvas-node:is(:hover, .selected, :focus-within) .node-close { opacity: 1; }
:root[data-theme] #canvasWorkspace .node-close:hover { color: var(--t-danger); background: var(--t-danger-soft); }
:root[data-theme] #canvasWorkspace .reference-node .node-body { padding: 14px; color: var(--t-text-2); font-size: 13px; }
:root[data-theme] #canvasWorkspace .reference-node .node-section-label { margin: 14px 0 8px; color: var(--t-text-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .reference-node-output, .node-control, .node-tabs, .node-segmented) {
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
  color: var(--t-text);
  background: var(--t-field);
  font-size: 13px;
  line-height: 1.6;
}
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .node-control):focus { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-field); caret-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tabs, .node-segmented) { padding: 3px; gap: 2px; }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tab, .node-segment) { border-radius: 7px; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tab, .node-segment).active { color: var(--t-text); background: var(--t-hover); box-shadow: inset 0 0 0 1px var(--t-line-strong); font-weight: 600; }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button {
  margin-top: 14px; padding: 11px;
  border: 0; border-radius: var(--t-r-md);
  color: var(--t-on-accent); background: var(--t-accent);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 22px -10px var(--t-accent-line);
  transition: background var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .reference-node .node-run-button:hover { background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button:active { transform: translateY(1px); }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button.dark { color: var(--t-text); background: var(--t-hover); box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-media-empty, .node-media-placeholder) { border: 1px dashed var(--t-line-strong); border-radius: var(--t-r-md); color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .reference-node .node-media-upload { border: 1px solid var(--t-line-strong); border-radius: var(--t-r-md); color: var(--t-text-2); background: var(--t-raised); }
:root[data-theme] #canvasWorkspace .reference-node .node-media-upload:hover { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-output-card, .node-media-chip img, .node-media-chip video, .image-preview, .video-preview) { border-radius: var(--t-r-md); background: var(--t-field); }
:root[data-theme] #canvasWorkspace .reference-node .node-output-card figcaption { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-status, .node-output-status, .node-group-summary, .node-range-field) { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .reference-node .node-status.running { color: var(--t-accent-hover); }
:root[data-theme] #canvasWorkspace .reference-node .node-status.error { color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .reference-node .node-connection-badge { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-ok)); background: var(--t-ok-soft); font-size: 12px; }
:root[data-theme] #canvasWorkspace .reference-node .node-range-field output { color: var(--t-text); }
:root[data-theme] #canvasWorkspace .reference-node .node-range-field input { accent-color: var(--t-accent); }
/* Notes are annotations, not steps: tinted paper with no type band. */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.note { border-color: color-mix(in srgb, var(--t-k-note) 34%, var(--t-line)); background: color-mix(in srgb, var(--t-k-note) 9%, var(--t-raised)); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.note .node-head { border-bottom-color: color-mix(in srgb, var(--t-k-note) 22%, transparent); }
:root[data-theme] #canvasWorkspace .reference-node.group { border-style: dashed; background: color-mix(in srgb, var(--t-panel) 45%, transparent); box-shadow: none; }
:root[data-theme] #canvasWorkspace .reference-node.group { background-image: none; }
/* Ports appear on hover/selection so idle nodes read cleanly. */
:root[data-theme] #canvasWorkspace .port { width: 12px; height: 12px; border: 2px solid var(--t-bg); background: var(--k, var(--t-accent)); box-shadow: 0 0 0 1px var(--t-line-strong); opacity: 0; transition: opacity var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .canvas-node:is(:hover, .selected, .connecting, .connection-target, :focus-within) .port,
:root[data-theme] #canvasWorkspace .viewport:has(.edge-preview) .port { opacity: 1; }
:root[data-theme] #canvasWorkspace .port:hover { transform: translateY(-50%) scale(1.35); }
:root[data-theme] #canvasWorkspace .node-next-actions { padding: 5px; gap: 4px; border: 1px solid var(--t-line-strong); border-radius: var(--t-r-md); background: var(--t-glass-solid); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .node-next-actions button { border-radius: 7px; color: var(--t-text-2); background: transparent; font-size: 12px; }
:root[data-theme] #canvasWorkspace .node-next-actions button:hover { color: var(--t-text); background: var(--t-hover); }
/* ---------- Side panels (sidebar / inspector / TV Magic) ---------- */
:root[data-theme] #canvasWorkspace .workspace-sidebar { top: 66px; bottom: 80px; left: 16px; }
:root[data-theme] #canvasWorkspace :is(.inspector, .director-panel) { top: 66px; right: 16px; bottom: 16px; }
:root[data-theme] #canvasWorkspace :is(.workspace-pane-head, .inspector-header, .director-head) { border-bottom: 1px solid var(--t-line); background: transparent; }
:root[data-theme] #canvasWorkspace :is(.workspace-pane-head h2, .inspector h2, .director-head h2) { color: var(--t-text); font-family: var(--t-font-display); font-size: 15px; font-weight: 600; letter-spacing: .01em; }
:root[data-theme] :is(.eyebrow, #canvasWorkspace .director-head span) { color: var(--t-text-3); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
:root[data-theme] #canvasWorkspace :is(.workspace-pane-head, .director-head) button { border-radius: 7px; color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace :is(.workspace-pane-head, .director-head) button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search, .workspace-pane-toolbar select, .assets-toolbar select) {
  height: 36px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
  color: var(--t-text-3);
  background: var(--t-field);
}
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search):focus-within { border-color: var(--t-accent-line); box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search) input { color: var(--t-text); font-size: 13px; }
:root[data-theme] .workspace-pane-toolbar select, :root[data-theme] .assets-toolbar select { color: var(--t-text); font-size: 12px; }
:root[data-theme] .workspace-pane-status, :root[data-theme] .workspace-pane-empty { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] :is(.canvas-quick-actions button, .outline-button) {
  min-height: 34px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r-md);
  color: var(--t-text-2);
  background: var(--t-raised);
  font-size: 12px;
  transition: color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}
:root[data-theme] :is(.canvas-quick-actions button, .outline-button):hover { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .canvas-node-row { min-height: 48px; border: 1px solid transparent; border-radius: var(--t-r-md); color: var(--t-text-2); }
:root[data-theme] .canvas-node-row:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .canvas-node-row.selected { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .canvas-node-row-mark { border-radius: 8px; color: var(--t-accent-hover); background: var(--t-accent-soft); font-size: 11px; }
:root[data-theme] .canvas-node-row-title { font-size: 13px; font-weight: 500; }
:root[data-theme] .canvas-node-row-kind { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .canvas-node-row-index { color: var(--t-text-3); font: 11px var(--t-mono); }
:root[data-theme] :is(.prompt-card, .asset-card) { border-color: var(--t-line); }
:root[data-theme] .prompt-card { padding: 12px; border-radius: var(--t-r-md); background: var(--t-raised); transition: border-color var(--t-dur) var(--t-ease); }
:root[data-theme] .prompt-card:hover { border-color: var(--t-line-strong); }
:root[data-theme] .prompt-card h3 { color: var(--t-text); font-size: 13px; font-weight: 600; }
:root[data-theme] .prompt-card small { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .prompt-card p { color: var(--t-text-2); font-size: 12px; line-height: 1.6; }
:root[data-theme] .prompt-card-actions button { min-height: 30px; border: 1px solid var(--t-line-strong); border-radius: 8px; color: var(--t-text-2); background: transparent; font-size: 12px; }
:root[data-theme] .prompt-card-actions button:first-child { border-color: transparent; color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] .prompt-card-actions button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .prompt-card-actions button:first-child:hover { color: var(--t-on-accent); background: var(--t-fill-hover); }
:root[data-theme] .asset-card-title { color: var(--t-text); font-size: 13px; font-weight: 500; }
:root[data-theme] .asset-card-meta { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .asset-thumb { border-radius: 8px; background: var(--t-field); }
:root[data-theme] .asset-card-actions button { border-radius: 6px; color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .asset-card-actions button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .inspector-form label { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace :is(.inspector-form input, .inspector-form textarea, .inspector-form select, .generation-settings select) { border: 1px solid var(--t-line); border-radius: 8px; color: var(--t-text); background: var(--t-field); }
:root[data-theme] #canvasWorkspace :is(.inspector-form input, .inspector-form textarea, .inspector-form select):focus { border-color: var(--t-accent-line); outline: 0; }

/* TV Magic */
:root[data-theme] #canvasWorkspace .director-intro svg { color: var(--t-accent-hover); background: var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace .director-intro h3 { font-family: var(--t-font-display); font-size: 16px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .director-intro p { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace .director-body > button { min-height: 58px; border: 1px solid var(--t-line); border-radius: 12px; color: var(--t-text); background: var(--t-raised); transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .director-body > button:hover { border-color: var(--t-accent-line); background: var(--t-hover); transform: translateY(-1px); }
:root[data-theme] #canvasWorkspace .director-body strong { font-size: 13px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .director-body small { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] #canvasWorkspace .director-body > button svg:first-child { color: var(--t-accent-hover); }
:root[data-theme] #canvasWorkspace .director-compose { border-top: 1px solid var(--t-line); }
:root[data-theme] #canvasWorkspace .director-compose label { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace .director-compose textarea { border: 1px solid var(--t-line); border-radius: var(--t-r-md); color: var(--t-text); background: var(--t-field); font-size: 13px; }
:root[data-theme] #canvasWorkspace .director-compose textarea:focus { border-color: var(--t-accent-line); box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace .director-compose textarea::placeholder { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .director-compose button { min-height: 40px; border-radius: var(--t-r-md); color: var(--t-on-accent); background: var(--t-accent); font-size: 13px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .director-compose button:hover { background: var(--t-fill-hover); }
/* ---------- Menus, empty canvas, tooltip ---------- */
:root[data-theme] #canvasWorkspace .node-create-menu { padding: 10px; }
:root[data-theme] #canvasWorkspace .create-menu-head { color: var(--t-text); font-size: 13px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .node-options button { min-height: 52px; border-radius: var(--t-r-md); color: var(--t-text); }
:root[data-theme] #canvasWorkspace .node-options button:hover { background: var(--t-hover); }
:root[data-theme] .node-option-icon { border-radius: 9px; }
:root[data-theme] .node-option-icon svg { width: 17px; height: 17px; }
:root[data-theme] #canvasWorkspace .node-option-group { display: grid; gap: 2px; }
:root[data-theme] #canvasWorkspace .node-option-group + .node-option-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--t-line); }
:root[data-theme] #canvasWorkspace .node-option-group-label { padding: 4px 8px 2px; color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .node-option-group:not(:has(button:not([hidden]))) { display: none; }
:root[data-theme] #canvasWorkspace .node-options strong { font-size: 14px; }
:root[data-theme] #canvasWorkspace .node-options small { margin-top: 2px; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] #canvasWorkspace .node-options button:focus-visible { outline: 2px solid var(--t-accent-line); outline-offset: -2px; background: var(--t-hover); }
:root[data-theme] .text-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-text)); background: color-mix(in srgb, var(--t-k-text) 14%, transparent); }
:root[data-theme] .note-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-note)); background: color-mix(in srgb, var(--t-k-note) 14%, transparent); }
:root[data-theme] .image-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-image)); background: color-mix(in srgb, var(--t-k-image) 14%, transparent); }
:root[data-theme] .generate-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-gen)); background: color-mix(in srgb, var(--t-k-gen) 14%, transparent); }
:root[data-theme] .video-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-video)); background: color-mix(in srgb, var(--t-k-video) 14%, transparent); }
:root[data-theme] .audio-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-audio)); background: color-mix(in srgb, var(--t-k-audio) 14%, transparent); }
:root[data-theme] .upload-icon { color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-k-text)); background: color-mix(in srgb, var(--t-k-text) 14%, transparent); }

:root[data-theme] #canvasWorkspace .canvas-empty p { margin-bottom: 22px; color: var(--t-text); font-family: var(--t-font-display); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
:root[data-theme] #canvasWorkspace .canvas-empty-actions { gap: 10px; }
:root[data-theme] #canvasWorkspace .canvas-empty-actions button {
  min-height: 64px;
  border: 1px solid var(--t-line-strong);
  border-radius: 14px;
  color: var(--t-text);
  background: var(--t-glass);
  -webkit-backdrop-filter: var(--t-blur);
  backdrop-filter: var(--t-blur);
  font-size: 13px;
  box-shadow: inset 0 1px 0 var(--t-highlight);
  transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .canvas-empty-actions button:hover { border-color: var(--t-accent-line); background: var(--t-hover); transform: translateY(-2px); }
:root[data-theme] #canvasWorkspace .canvas-empty-actions svg { color: var(--t-accent-hover); }

:root[data-theme] .control-tooltip { padding: 6px 10px; border: 1px solid var(--t-line-strong); border-radius: 8px; color: var(--t-text); background: var(--t-glass-solid); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: var(--t-shadow-md); font-size: 12px; }

/* ---------- Modals ---------- */
:root[data-theme] .modal-backdrop { background: var(--t-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme] .modal-backdrop:not([hidden]) > * { animation: t-pop 200ms var(--t-ease); }
@keyframes t-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
:root[data-theme] :is(#authModal, #settingsModal, #agentModal, #assetEditorModal) .auth-modal {
  border: 1px solid var(--t-line-strong);
  border-radius: 18px;
  color: var(--t-text);
  background: var(--t-panel);
  box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-lg);
}
:root[data-theme] .auth-modal :is(.inspector-header, .auth-body) { border-bottom-color: var(--t-line); color: var(--t-text); background: transparent; }
:root[data-theme] .auth-modal .inspector-header { padding: 22px 24px 12px; }
:root[data-theme] .auth-modal .auth-body { padding: 10px 24px 24px; }
:root[data-theme] .auth-modal h2 { color: var(--t-text); font-family: var(--t-font-display); font-size: 22px; font-weight: 600; }
:root[data-theme] .auth-modal .eyebrow { color: var(--t-accent-hover); }
:root[data-theme] .auth-modal .icon-button { border: 0; border-radius: 8px; color: var(--t-text-3); }
:root[data-theme] .auth-modal .icon-button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .auth-modal label { color: var(--t-text-2); font-size: 12px; font-weight: 500; }
:root[data-theme] .auth-modal :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
:root[data-theme] #authModal .auth-body input,
:root[data-theme] #authModal .auth-body input:focus {
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r-md);
  color: var(--t-text);
  caret-color: var(--t-accent);
  background: var(--t-field);
  color-scheme: dark;
}
:root[data-theme] .auth-modal :is(input, select, textarea):focus,
:root[data-theme] #authModal .auth-body input:focus { border-color: var(--t-accent-line); outline: 0; box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] .auth-modal :is(input, textarea)::placeholder { color: var(--t-text-3); opacity: 1; }
/* Long option text (the video protocols) must not widen a settings select past the dialog. */
.auth-modal select { max-width: 100%; }
:root[data-theme] #authModal .auth-body input:-webkit-autofill { -webkit-text-fill-color: var(--t-text); -webkit-box-shadow: 0 0 0 100px var(--t-field) inset; }
:root[data-theme] :is(.auth-submit, .generate-button, #authModal .auth-submit) {
  min-height: 44px;
  border: 0;
  border-radius: var(--t-r-md);
  color: var(--t-on-accent);
  background: var(--t-accent);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 26px -12px var(--t-accent-line);
}
:root[data-theme] :is(.auth-submit, .generate-button, #authModal .auth-submit):hover { background: var(--t-fill-hover); }
:root[data-theme] :is(.auth-switch, #authModal .auth-switch) { color: var(--t-text-2); }
:root[data-theme] :is(.auth-switch, #authModal .auth-switch):hover { color: var(--t-text); }
:root[data-theme] :is(.auth-context, #authModal .auth-context, .settings-intro, .settings-endpoint-note, .agent-intro, .settings-note) { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] :is(.auth-error, #authModal .auth-error) { color: var(--t-danger); }
:root[data-theme] :is(.settings-endpoint-note code, .setup-guide code) { color: var(--t-accent-hover); font-family: var(--t-mono); }
:root[data-theme] .setup-guide { border-color: var(--t-line-strong); border-radius: 12px; background: var(--t-raised); }
:root[data-theme] .setup-guide > summary { color: var(--t-text); font-size: 13px; }
:root[data-theme] .setup-guide > summary:hover { background: var(--t-hover); }
:root[data-theme] :is(.guide-step strong) { color: var(--t-text); font-size: 12px; }
:root[data-theme] :is(.guide-step p, .guide-note) { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] .guide-step { border-top-color: var(--t-line); }
:root[data-theme] .guide-step pre { border-color: var(--t-line); color: var(--t-text); background: var(--t-field); font: 11px/1.6 var(--t-mono); }
:root[data-theme] .guide-note { border-color: var(--t-accent-line); }
:root[data-theme] .guide-note strong { color: var(--t-accent-hover); font-size: 12px; }
:root[data-theme] .copy-button { border-color: var(--t-line-strong); border-radius: 6px; color: var(--t-text-2); font-size: 11px; }
:root[data-theme] .copy-button:hover { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .guide-os { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] .guide-os-switch { width: 180px; margin: 0; }
:root[data-theme] .guide-step pre + .copy-button + pre { margin-top: 10px; }
/* ---------- Creation home ---------- */
/* A quiet sheet of paper: no glow, the composer is the only raised object. */
:root[data-theme] .creation-home { color: var(--t-text); background: var(--t-bg); }
:root[data-theme] .creation-home-bar { padding: 20px 32px; }
:root[data-theme] .creation-home-brand { gap: 12px; }
:root[data-theme] .creation-home-brand strong { color: var(--t-text); font-family: var(--t-font-display); font-size: 17px; font-weight: 600; letter-spacing: .08em; }
:root[data-theme] .creation-home-bar-actions { display: flex; align-items: center; gap: 10px; }
:root[data-theme] .creation-home-bar :is(#homeOpenCanvas, .home-theme-toggle) {
  min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  color: var(--t-text);
  background: transparent;
  font-size: 14px;
  transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}
:root[data-theme] .creation-home-bar #homeOpenCanvas { padding: 0 16px; }
:root[data-theme] .creation-home-bar .home-theme-toggle { width: 38px; height: 38px; flex: 0 0 38px; padding: 0; color: var(--t-text-2); }
:root[data-theme] .creation-home-bar .home-theme-toggle svg { width: 17px; height: 17px; }
:root[data-theme] .creation-home-bar :is(#homeOpenCanvas, .home-theme-toggle):hover { border-color: var(--t-accent-line); background: var(--t-hover); }
:root[data-theme] .creation-home-content { width: min(760px, calc(100% - 40px)); }
:root[data-theme] .creation-home-heading { margin-bottom: 36px; }
:root[data-theme] .creation-home-heading h1 { margin-bottom: 14px; color: var(--t-text); font-family: var(--t-font-display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 600; letter-spacing: .06em; line-height: 1.25; }
:root[data-theme] .creation-home-heading p { color: var(--t-text-2); font-size: 16px; }
:root[data-theme] .creation-home-modes { margin-bottom: 14px; padding: 4px; gap: 2px; border: 1px solid var(--t-line-strong); border-radius: 999px; background: var(--t-panel); }
:root[data-theme] .creation-home-modes button { min-width: 92px; height: 34px; border-radius: 999px; color: var(--t-text-2); font-size: 14px; transition: color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease); }
:root[data-theme] .creation-home-modes button:hover:not(.active) { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .creation-home-modes button.active { color: var(--t-on-accent); background: var(--t-accent); font-weight: 600; }
:root[data-theme] .creation-home-modes button.active svg { color: currentColor; }
:root[data-theme] .creation-home-composer {
  padding: 20px 20px 16px;
  border: 1px solid var(--t-line-strong);
  border-radius: 18px;
  background: var(--t-raised);
  box-shadow: var(--t-shadow-lg);
  transition: border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
:root[data-theme] .creation-home-composer:focus-within { border-color: var(--t-accent-line); box-shadow: 0 0 0 4px var(--t-accent-soft), var(--t-shadow-lg); }
:root[data-theme] .creation-home-composer textarea { color: var(--t-text); font-size: 16px; line-height: 1.75; caret-color: var(--t-accent); }
:root[data-theme] .creation-home-composer textarea::placeholder { color: var(--t-text-3); }
/* The card's focus-within ring is the focus cue; the field itself stays flat so it doesn't read as a box inside the box. */
:root[data-theme] #starterPrompt:is(:focus, :focus-visible) { outline: none; background: transparent; }
:root[data-theme] .creation-home-references button { min-height: 34px; border: 1px solid var(--t-line); border-radius: 999px; color: var(--t-text-2); background: transparent; font-size: 13px; transition: border-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease); }
:root[data-theme] .creation-home-references button:hover { border-color: var(--t-accent-line); color: var(--t-text); }
:root[data-theme] .creation-home-reference { border: 1px solid var(--t-line-strong); background: var(--t-field); box-shadow: var(--t-shadow-md); }
:root[data-theme] .creation-home-reference button:hover { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] .creation-home-composer #starterCreate { min-height: 40px; padding: 0 20px; border-radius: 999px; color: var(--t-on-accent); background: var(--t-accent); font-size: 14px; font-weight: 600; transition: background var(--t-dur) var(--t-ease); }
:root[data-theme] .creation-home-composer #starterCreate:hover { background: var(--t-fill-hover); }
:root[data-theme] .creation-home-composer #starterCreate:disabled { color: var(--t-text-2); background: var(--t-hover); cursor: not-allowed; }
:root[data-theme] .creation-home-shortcuts { gap: 10px; margin-top: 18px; }
:root[data-theme] .creation-home-shortcuts button { min-height: 50px; border: 1px solid var(--t-line); border-radius: 12px; color: var(--t-text-2); background: transparent; font-size: 14px; transition: border-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease); }
:root[data-theme] .creation-home-shortcuts button:hover { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-panel); }
:root[data-theme] .creation-home-shortcuts svg { color: var(--t-accent-hover); }
/* ---------- Storyboard & editing ---------- */
:root[data-theme] .storyboard-workspace { color: var(--t-text); background: var(--t-bg); }
:root[data-theme] .storyboard-topbar { min-height: 60px; border-bottom: 1px solid var(--t-line); background: var(--t-glass-solid); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); }
:root[data-theme] .storyboard-title h1 { font-family: var(--t-font-display); font-size: 17px; font-weight: 600; }
:root[data-theme] .storyboard-mark { border-color: var(--t-accent-line); border-radius: 9px; color: var(--t-accent-hover); background: var(--t-accent-soft); }
:root[data-theme] .storyboard-project-name { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] .storyboard-project-name input { border: 1px solid var(--t-line); border-radius: 8px; color: var(--t-text); background: var(--t-field); }
:root[data-theme] .storyboard-primary-actions { padding: 4px; gap: 2px; border: 1px solid var(--t-line-strong); border-radius: var(--t-r-md); background: var(--t-raised); }
:root[data-theme] .storyboard-primary-actions button { min-height: 30px; padding: 0 12px; border-radius: 7px; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] .storyboard-primary-actions button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .storyboard-primary-actions button.active { color: var(--t-text); background: var(--t-hover); box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] .storyboard-top-actions :is(.outline-button, .icon-button) { min-height: 34px; border: 1px solid var(--t-line-strong); border-radius: 9px; color: var(--t-text-2); background: var(--t-raised); font-size: 12px; }
:root[data-theme] .storyboard-top-actions :is(.outline-button, .icon-button):hover,
:root[data-theme] .storyboard-top-actions .outline-button.active { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] :is(.storyboard-board, .storyboard-editing) { gap: 10px; padding: 10px; background: var(--t-bg); }
:root[data-theme] :is(.storyboard-column, .storyboard-column-text .storyboard-board-section) { border: 1px solid var(--t-line); border-radius: 14px; background: var(--t-panel); }
:root[data-theme] .storyboard-board-section { padding: 18px 20px; }
:root[data-theme] .storyboard-board-section h2 { color: var(--t-text); font-family: var(--t-font-display); font-size: 14px; font-weight: 600; }
:root[data-theme] .storyboard-board-section h2 span { color: var(--t-text-3); font-size: 12px; font-weight: 400; }
:root[data-theme] .storyboard-item { border-bottom-color: var(--t-line); }
:root[data-theme] .storyboard-item-heading strong { font-size: 13px; }
:root[data-theme] .storyboard-item-heading small { color: var(--t-accent-hover); font-size: 11px; }
:root[data-theme] .storyboard-item-text p { color: var(--t-text-2); font-size: 13px; line-height: 1.65; }
:root[data-theme] .storyboard-item-action { color: var(--t-accent-hover); font-size: 12px; }
:root[data-theme] .storyboard-list-empty, :root[data-theme] .project-empty, :root[data-theme] .project-hint { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] .storyboard-workflow { border-bottom-color: var(--t-line); background: var(--t-panel); }
:root[data-theme] .project-field { color: var(--t-text-2); font-size: 12px; }
:root[data-theme] .project-field :is(textarea, input, select) { border: 1px solid var(--t-line); border-radius: 9px; color: var(--t-text); background: var(--t-field); }
:root[data-theme] .project-field :is(textarea, input, select):focus { border-color: var(--t-accent-line); box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] .project-primary-button { min-height: 36px; border-radius: 9px; color: var(--t-on-accent); background: var(--t-accent); font-weight: 600; }
:root[data-theme] .project-primary-button:hover { background: var(--t-fill-hover); }
:root[data-theme] .project-stage-list button { border: 1px solid var(--t-line); border-radius: var(--t-r-md); color: var(--t-text-2); background: var(--t-raised); }
:root[data-theme] .project-stage-list button:hover { border-color: var(--t-line-strong); background: var(--t-hover); }
:root[data-theme] .project-stage-list button.active { border-color: var(--t-accent-line); color: var(--t-text); background: var(--t-accent-soft); box-shadow: inset 3px 0 var(--t-accent); }
:root[data-theme] .project-stage-list button > span { color: var(--t-text-3); font-family: var(--t-mono); }
:root[data-theme] .project-stage-list button strong { font-size: 12px; }
:root[data-theme] .project-stage-list button small { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .project-stage-list button.active :is(> span, small) { color: var(--t-accent-hover); }
:root[data-theme] .project-shot { border-color: var(--t-line); border-radius: 12px; background: var(--t-panel); }
:root[data-theme] .project-shot:focus-within { border-color: var(--t-accent-line); }
:root[data-theme] .project-shot-media { border-radius: 8px; background: var(--t-field); }
/* The preview is a monitor in both themes: dark with light text. */
:root[data-theme] .edit-clips-head h2 { font-size: 14px; font-weight: 600; }
:root[data-theme] .edit-clip-row { border-bottom-color: var(--t-line); }
:root[data-theme] .edit-clip-row.selected { background: var(--t-accent-soft); box-shadow: inset 3px 0 var(--t-accent); }
:root[data-theme] .edit-clip-number { color: var(--t-accent-hover); font-family: var(--t-mono); }
:root[data-theme] .edit-clip-details strong { font-size: 12px; }
:root[data-theme] .edit-clip-details small, :root[data-theme] .edit-clip-trim { color: var(--t-text-3); font-size: 11px; }
:root[data-theme] .edit-clip-trim input { border-color: var(--t-line-strong); border-radius: 6px; color: var(--t-text); background: var(--t-field); }
:root[data-theme] .edit-clip-action { border-radius: 6px; color: var(--t-text-2); }
:root[data-theme] .edit-clip-action:hover:not(:disabled) { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .operations-row { border-bottom-color: var(--t-line); }
:root[data-theme] .operations-row small { color: var(--t-text-3); }
:root[data-theme] .operations-panel :is(button, select) { border-color: var(--t-line-strong); color: var(--t-text); background: var(--t-raised); }
:root[data-theme] .operations-panel #templateName { border-color: var(--t-line-strong); color: var(--t-text); background: var(--t-field); }
/* The old layer forces a light background on focused fields; keep fields dark. */
:root[data-theme] body.dxos-reference :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
:root[data-theme] .operations-panel #templateName:focus {
  color: var(--t-text);
  caret-color: var(--t-accent);
  background: var(--t-field);
  border-color: var(--t-accent-line);
  color-scheme: dark;
}
:root[data-theme] body.dxos-reference :is(input, textarea):focus::placeholder { color: var(--t-text-3); }
:root[data-theme] body.dxos-reference :is(input, textarea):focus::selection { color: var(--t-on-accent); background: var(--t-accent); }

/* Theme toggle glyph: a split disc showing the next accent. */
:root[data-theme] [data-theme-toggle] svg { color: var(--t-accent-hover); }

/* ---------- One top bar for all three views ----------
 * 分镜制作 and 成片剪辑 open under the canvas's own top bar: the canvas shell shrinks to the bar and
 * the storyboard fills the rest, so the name, save state, view switch and actions never move.
 */
:root[data-theme] #canvasWorkspace.project-open { flex: 0 0 70px; }
:root[data-theme] #canvasWorkspace.project-open > :not(.topbar) { display: none; }
:root[data-theme] #canvasWorkspace.project-open :is(#directorToggle, .history-actions) { display: none; }
:root[data-theme] .storyboard-topbar { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; }

/* The command trigger reads as a search field: Ctrl K does anything from anywhere. */
:root[data-theme] #canvasWorkspace .command-trigger { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-left: auto; padding: 0 8px 0 14px; border: 1px solid var(--t-line-strong); border-radius: 999px; color: var(--t-text-3); background: var(--t-glass); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-md); font: inherit; font-size: 13px; cursor: text; pointer-events: auto; transition: border-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .command-trigger:hover { border-color: var(--t-accent-line); color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .command-trigger svg { width: 16px; height: 16px; color: var(--t-accent); }
:root[data-theme] #canvasWorkspace .command-trigger + .history-actions { margin-left: 0; }
:root[data-theme] #canvasWorkspace .command-trigger kbd { padding: 2px 7px; border: 1px solid var(--t-line-strong); border-radius: 6px; color: var(--t-text-2); font: 12px var(--t-font); }

/* ---------- Command palette ---------- */
:root[data-theme] .command-palette { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; padding-top: 14vh; background: var(--t-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: t-fade-in 140ms var(--t-ease); }
:root[data-theme] .command-palette[hidden] { display: none; }
:root[data-theme] .command-palette-box { width: min(640px, calc(100vw - 32px)); max-height: 62vh; display: flex; flex-direction: column; align-self: flex-start; overflow: hidden; border: 1px solid var(--t-line-strong); border-radius: 16px; background: var(--t-glass-solid); box-shadow: var(--t-shadow-lg); animation: t-pop 180ms var(--t-ease); }
:root[data-theme] .command-palette-input { flex: 0 0 60px; padding: 0 22px; border: 0; border-bottom: 1px solid var(--t-line); color: var(--t-text); background: transparent; font: inherit; font-size: 18px; outline: none; caret-color: var(--t-accent); }
:root[data-theme] .command-palette-input::placeholder { color: var(--t-text-3); }
:root[data-theme] .command-palette-list { overflow-y: auto; padding: 8px; }
:root[data-theme] .command-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; color: var(--t-text); background: transparent; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
:root[data-theme] .command-row svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--t-text-2); }
:root[data-theme] .command-row[aria-selected="true"] { background: var(--t-hover); }
:root[data-theme] .command-row[aria-selected="true"] svg { color: var(--t-accent); }
:root[data-theme] .command-label { flex: 0 0 auto; }
:root[data-theme] .command-hint { margin-left: auto; color: var(--t-text-3); font-size: 13px; }
:root[data-theme] .command-quote { min-width: 0; overflow: hidden; color: var(--t-accent-hover); white-space: nowrap; text-overflow: ellipsis; }
:root[data-theme] .command-empty { display: block; padding: 16px; color: var(--t-text-3); font-size: 14px; }

/* ---------- Film strip: every picture, shot by shot, above the tool rail ---------- */
:root[data-theme] #canvasWorkspace .film-strip { position: absolute; left: 50%; bottom: 82px; z-index: 14; width: min(980px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; transform: translateX(-50%); border: 1px solid var(--t-line-strong); border-radius: var(--t-r-lg); background: var(--t-glass-solid); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: inset 0 1px 0 var(--t-highlight), var(--t-shadow-lg); }
:root[data-theme] #canvasWorkspace .film-strip[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .film-strip-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
:root[data-theme] #canvasWorkspace .film-strip-head span { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .film-strip-head .icon-button { width: 26px; height: 26px; min-height: 26px; margin-left: auto; }
:root[data-theme] #canvasWorkspace .film-strip-reel { display: flex; gap: 8px; height: 84px; overflow-x: auto; overscroll-behavior: contain; }
:root[data-theme] #canvasWorkspace .film-strip-empty { align-self: center; color: var(--t-text-3); font-size: 13px; }
:root[data-theme] #canvasWorkspace .film-frame { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid var(--t-line); border-radius: 6px; background: #000; cursor: pointer; transition: transform var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease); }
:root[data-theme] #canvasWorkspace .film-frame :is(img, video) { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
:root[data-theme] #canvasWorkspace .film-frame:hover { transform: translateY(-2px); border-color: var(--t-accent-line); }
:root[data-theme] #canvasWorkspace .film-frame.current { border-color: var(--t-accent); box-shadow: 0 0 0 1px var(--t-accent); }
:root[data-theme] #canvasWorkspace .film-frame-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 3px; overflow: hidden; color: #f4f4f5; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); font-size: 11px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
:root[data-theme] #canvasWorkspace .film-frame-mark { position: absolute; top: 4px; left: 4px; padding: 0 5px; border-radius: 3px; color: var(--t-on-accent); background: var(--t-accent); font-size: 10px; font-weight: 600; line-height: 16px; }
:root[data-theme] #canvasWorkspace .bottom-dock #filmStripToggle.active { color: var(--t-accent-hover); background: var(--t-accent-soft); }

/* ---------- Empty canvas: one sentence to start, the quick starts below ---------- */
:root[data-theme] #canvasWorkspace .canvas-empty { width: min(720px, calc(100% - 48px)); }
:root[data-theme] #canvasWorkspace .canvas-empty > p { margin: 0 0 12px; color: var(--t-text-3); font-family: inherit; font-size: 13px; font-weight: 500; text-align: center; }
:root[data-theme] #canvasWorkspace .canvas-empty-actions button { min-height: 52px; }

@media (max-width: 1280px) {
  :root[data-theme] #canvasWorkspace .command-trigger { width: 42px; padding: 0; justify-content: center; }
  :root[data-theme] #canvasWorkspace .command-trigger :is(span, kbd) { display: none; }
}
/* The centred view switch reaches the save status around here: keep only its dot (the label stays as a tooltip). */
/* Below this the centred view switch would run into the canvas tools: it joins the row instead, and the
   canvas name gives up some width. */
@media (max-width: 1180px) {
  :root[data-theme] #canvasWorkspace .save-state { width: 22px; max-width: 22px; padding: 0 0 0 8px; font-size: 0; }
  :root[data-theme] #canvasWorkspace .workspace-view-switch { position: static; flex: none; order: 1; margin: 0 auto; transform: none; }
  :root[data-theme] #canvasWorkspace .workspace-view-switch button { white-space: nowrap; }
  :root[data-theme] #canvasWorkspace .topbar > :is(.command-trigger, .history-actions, .top-actions) { order: 2; }
  :root[data-theme] #canvasWorkspace .project-control { flex: 0 1 238px; min-width: 120px; }
  :root[data-theme] #canvasWorkspace .project-name { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  :root[data-theme] #canvasWorkspace .command-trigger { display: none; }
  :root[data-theme] #canvasWorkspace .film-strip { bottom: 132px; }
  }

/* ---------- Motion & responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] *, :root[data-theme] *::before, :root[data-theme] *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 800px) {
  :root[data-theme] #canvasWorkspace .topbar { left: 10px; right: 10px; top: 10px; }
  :root[data-theme] #canvasWorkspace :is(.workspace-sidebar, .inspector, .director-panel) { top: 60px; left: 10px; right: 10px; bottom: 76px; width: auto; }
  :root[data-theme] #canvasWorkspace .tool-rail { bottom: 10px; }
  :root[data-theme] #canvasWorkspace .bottom-dock { left: 10px; bottom: 72px; }
  :root[data-theme] .creation-home-bar { padding: 14px 16px; }
  /* The view switch hides here; the save label shrinks to its dot. */
  :root[data-theme] #canvasWorkspace .save-state { max-width: 92px; }
}
@media (max-width: 560px) {
  :root[data-theme] #canvasWorkspace .topbar { gap: 6px; }
  :root[data-theme] #canvasWorkspace .brand-lockup { display: none; }
  :root[data-theme] #canvasWorkspace .project-control { flex: 1 1 auto; min-width: 0; max-width: none; }
  :root[data-theme] #canvasWorkspace .project-name { width: 100%; min-width: 0; }
  :root[data-theme] #canvasWorkspace .save-state { width: 22px; max-width: 22px; padding: 0 0 0 8px; font-size: 0; }
  :root[data-theme] #canvasWorkspace .history-actions { display: none; }
  :root[data-theme] #canvasWorkspace .run-button { width: 42px; padding: 0; justify-content: center; }
  :root[data-theme] #canvasWorkspace .run-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root[data-theme] #canvasWorkspace #directorToggle { display: none; }
}
@media (max-width: 420px) {
  :root[data-theme] #canvasWorkspace .tool-rail { height: 48px; padding: 4px; gap: 2px; }
  :root[data-theme] #canvasWorkspace .tool-rail .tool-button { width: 36px; height: 38px; flex-basis: 36px; }
  :root[data-theme] #canvasWorkspace .top-actions > :is(.icon-button, .text-button) { width: 40px; height: 42px; min-height: 42px; }
  :root[data-theme] #canvasWorkspace .top-actions > .text-button.primary { width: auto; min-width: 52px; padding: 0 12px; }
}

/* Canvas list */
:root[data-theme] .canvas-list-panel #canvasListStatus,
:root[data-theme] .canvas-list-open small { color: var(--t-text-3); }
:root[data-theme] .canvas-list-item { border-color: var(--t-line-strong); background: var(--t-raised); transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur); }
:root[data-theme] .canvas-list-item:hover { background: var(--t-hover); }
:root[data-theme] .canvas-list-item.current { border-color: var(--t-accent-line); box-shadow: inset 0 0 0 1px var(--t-accent-soft); }
:root[data-theme] .operations-panel .canvas-list-open { border: 0; background: transparent; color: var(--t-text); }
:root[data-theme] .canvas-list-actions .danger:hover { border-color: var(--t-danger); color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle { border: 0; background: transparent; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle:hover,
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle[aria-expanded="true"] { color: var(--t-accent-hover); }
:root[data-theme] .creation-home-recent-heading h2 { color: var(--t-text); font-family: var(--t-font); }
:root[data-theme] .creation-home-recent-heading button { color: var(--t-text-2); }
:root[data-theme] .creation-home-recent-heading button:hover { color: var(--t-accent-hover); }
:root[data-theme] .creation-home-recent .canvas-list-item { border-color: var(--t-line); background: var(--t-glass); }
:root[data-theme] .creation-home-recent .canvas-list-item:hover { border-color: var(--t-accent-line); background: var(--t-hover); }
:root[data-theme] .creation-home-recent .canvas-list-open { color: var(--t-text); }

/* ---------- Toasts & confirm dialogs (ui-feedback.js) ---------- */
:root[data-theme] .toast-region { position: fixed; left: 50%; bottom: 84px; z-index: 60; display: grid; justify-items: center; gap: 8px; width: min(460px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
:root[data-theme] .toast { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 10px 12px 16px; border: 1px solid var(--t-line-strong); border-left: 3px solid var(--t-accent); border-radius: 10px; color: var(--t-text); background: var(--t-glass-solid); -webkit-backdrop-filter: var(--t-blur); backdrop-filter: var(--t-blur); box-shadow: var(--t-shadow-lg); font-size: 14px; line-height: 1.6; pointer-events: auto; animation: t-toast-in 220ms var(--t-ease); }
:root[data-theme] .toast.toast-error { border-left-color: var(--t-danger); }
:root[data-theme] .toast.toast-success { border-left-color: var(--t-ok); }
:root[data-theme] .toast p { flex: 1; margin: 1px 0 0; }
:root[data-theme] .toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 160ms var(--t-ease), transform 160ms var(--t-ease); }
:root[data-theme] .toast-action { flex: 0 0 auto; min-height: 28px; padding: 0 12px; border: 1px solid var(--t-accent-line); border-radius: 999px; color: var(--t-accent-hover); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
:root[data-theme] .toast-close { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; color: var(--t-text-3); background: transparent; font-size: 17px; line-height: 1; cursor: pointer; }
:root[data-theme] .toast-close:hover { color: var(--t-text); background: var(--t-hover); }
@keyframes t-toast-in { from { opacity: 0; transform: translateY(8px); } }
:root[data-theme] .confirm-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--t-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: t-fade-in 160ms var(--t-ease); }
:root[data-theme] .confirm-dialog { width: min(420px, 100%); padding: 24px 24px 20px; border: 1px solid var(--t-line-strong); border-radius: 14px; color: var(--t-text); background: var(--t-panel); box-shadow: var(--t-shadow-lg); animation: t-pop 200ms var(--t-ease); }
:root[data-theme] .confirm-dialog h2 { margin: 0; color: var(--t-text); font-size: 17px; font-weight: 600; line-height: 1.45; }
:root[data-theme] .confirm-body { margin-top: 10px; color: var(--t-text-2); font-size: 14px; line-height: 1.7; }
:root[data-theme] .confirm-body p { margin: 0; }
:root[data-theme] .confirm-body p + p { margin-top: 4px; }
:root[data-theme] .confirm-input { width: 100%; height: 40px; margin-top: 14px; padding: 0 12px; border: 1px solid var(--t-line-strong); border-radius: 8px; color: var(--t-text); background: var(--t-field); font: inherit; font-size: 14px; }
:root[data-theme] .confirm-input:focus { border-color: var(--t-accent-line); outline: none; box-shadow: 0 0 0 3px var(--t-accent-soft); }
:root[data-theme] .confirm-dialog-wide { width: min(720px, 100%); }
:root[data-theme] .confirm-paint { position: relative; width: fit-content; max-width: 100%; margin: 14px auto 0; border-radius: 8px; overflow: hidden; background: var(--t-field); line-height: 0; }
:root[data-theme] .confirm-paint img { display: block; max-width: 100%; max-height: 52vh; user-select: none; }
:root[data-theme] .confirm-paint canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; cursor: crosshair; touch-action: none; }
:root[data-theme] .confirm-paint-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--t-text-2); font-size: 13px; }
:root[data-theme] .confirm-paint-tools label { display: flex; align-items: center; gap: 8px; }
:root[data-theme] .confirm-paint-clear { min-height: 30px; padding: 0 12px; border: 1px solid var(--t-line-strong); border-radius: 999px; color: var(--t-text); background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
:root[data-theme] .confirm-paint-clear:hover { background: var(--t-hover); }
:root[data-theme] .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
:root[data-theme] .confirm-actions button { min-height: 38px; padding: 0 18px; border: 1px solid var(--t-line-strong); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease); }
:root[data-theme] .confirm-cancel { color: var(--t-text); background: transparent; }
:root[data-theme] .confirm-cancel:hover { background: var(--t-hover); }
:root[data-theme] .confirm-ok { border-color: transparent !important; color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] .confirm-ok:hover { background: var(--t-fill-hover); }
:root[data-theme] .confirm-ok.danger { color: #fff; background: var(--t-danger); }
:root[data-theme] .confirm-ok.danger:hover { background: color-mix(in srgb, var(--t-danger) 86%, #000); }
@keyframes t-fade-in { from { opacity: 0; } }
@media (max-width: 520px) {
  :root[data-theme] .confirm-actions { flex-direction: column-reverse; }
  :root[data-theme] .confirm-actions button { width: 100%; }
}
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search) > span { color: var(--t-text-2); }

/* ---------- Model settings ---------- */
:root[data-theme] .settings-modal .inspector-header { align-items: flex-start; padding: 22px 22px 6px; border: 0; background: transparent; }
:root[data-theme] .settings-modal h2 { margin: 0; color: var(--t-text); font-size: 19px; font-weight: 600; }
:root[data-theme] .settings-lede { margin: 6px 0 0; color: var(--t-text-2); font-size: 14px; line-height: 1.6; }
:root[data-theme] .settings-modal .settings-body { padding: 14px 22px 22px; background: transparent; }
:root[data-theme] .settings-modal label { color: var(--t-text-2); font-size: 13px; }
:root[data-theme] .settings-hint { margin: -6px 0 14px; color: var(--t-text-3); font-size: 12px; line-height: 1.6; }
:root[data-theme] .settings-hint code { color: var(--t-accent-hover); font-family: var(--t-mono); }
:root[data-theme] .settings-advanced { margin: 4px 0 16px; padding: 0; border: 1px solid var(--t-line); border-radius: 10px; }
:root[data-theme] .settings-advanced > summary { padding: 12px 14px; color: var(--t-text); font-size: 14px; cursor: pointer; list-style-position: inside; }
:root[data-theme] .settings-advanced > summary:hover { background: var(--t-hover); border-radius: 10px; }
:root[data-theme] .settings-advanced[open] > summary { border-bottom: 1px solid var(--t-line); border-radius: 10px 10px 0 0; }
:root[data-theme] .settings-advanced > :not(summary) { margin-left: 14px; margin-right: 14px; }
:root[data-theme] .settings-advanced > .settings-hint:first-of-type { margin-top: 12px; }
:root[data-theme] .settings-advanced .settings-channel-row button { min-width: 64px; }
:root[data-theme] .settings-actions { display: flex; justify-content: flex-end; gap: 10px; }
:root[data-theme] .settings-actions :is(.auth-submit, .outline-button) { width: auto; min-height: 40px; margin: 0; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; }
:root[data-theme] #settingsTestStatus:not(:empty) { margin-top: 12px; color: color-mix(in srgb, var(--t-text) var(--t-chip-ink), var(--t-ok)); font-size: 13px; line-height: 1.6; }
:root[data-theme] #settingsError:not(:empty) { margin-top: 12px; font-size: 13px; }
:root[data-theme] #authModal .inspector-header { align-items: center; padding: 22px 22px 4px; border: 0; background: transparent; }
:root[data-theme] .auth-heading { display: flex; align-items: center; gap: 12px; }
:root[data-theme] .auth-heading h2 { margin: 0; color: var(--t-text); font-size: 19px; font-weight: 600; }
:root[data-theme] #authModal .auth-body { padding: 16px 22px 22px; background: transparent; }
:root[data-theme] #authPasswordHint { margin-top: -8px; }
:root[data-theme] .project-stage-list button > span { color: var(--t-text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
:root[data-theme] .project-stage-list button.active > span { color: var(--t-accent-hover); }

/* Touch screens: every control gets at least a 44px target. */
@media (pointer: coarse) {
  :root[data-theme] :is(.creation-home-modes button, .creation-home-references button, .creation-home-bar :is(#homeOpenCanvas, .home-theme-toggle), .confirm-actions button, .toast-close, .toast-action) { min-height: 44px; }
  :root[data-theme] .creation-home-bar .home-theme-toggle { width: 44px; flex-basis: 44px; }
  :root[data-theme] .creation-home-recent-heading button { min-height: 44px; padding: 0 8px; }
  :root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .zoom-readout, .mini-map-toggle) { min-width: 40px; height: 40px; }
  :root[data-theme] #canvasWorkspace .bottom-dock { height: 48px; }
  :root[data-theme] #canvasWorkspace .node-close { width: 36px; height: 36px; opacity: 1; }
  :root[data-theme] #canvasWorkspace .port { width: 18px; height: 18px; opacity: 1; }
  :root[data-theme] #canvasWorkspace .port.in { left: -9px; }
  :root[data-theme] #canvasWorkspace .port.out { right: -9px; }
}

/* ---------- Cinema layer: beams, screens, developing results, spotlight ---------- */
/* A run is light travelling down the graph: a short bright dash rides each live connector. */
:root[data-theme] .edge-path.live { stroke: var(--t-beam-soft); stroke-width: 2.4; }
:root[data-theme] .edge-beam { fill: none; stroke: var(--t-beam); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 91; filter: drop-shadow(0 0 6px var(--t-beam-soft)); animation: t-beam 1.6s linear infinite; }
@keyframes t-beam { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* Spotlight: with one node selected, everything it does not touch steps back. */
:root[data-theme] #canvasWorkspace .viewport.spotlight .canvas-node:not(.selected, .related) { opacity: var(--t-spotlight-dim); filter: saturate(.6); }
:root[data-theme] #canvasWorkspace .viewport.spotlight .edge-path:not(.related, .selected, .live) { opacity: .25; }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node { transition: border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease), opacity 260ms var(--t-ease), filter 260ms var(--t-ease); }
:root[data-theme] #canvasWorkspace .edge-path { transition: opacity 260ms var(--t-ease); }
/* The screening room: deeper falloff at the edges and a faint film grain over the stage. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .edge-beam { animation: none; stroke-dasharray: none; opacity: .5; }
}
:root[data-theme] #canvasWorkspace .canvas-world { z-index: 1; }
/* A fresh result develops like a print: dark and soft, then sharp. */
:root[data-theme] #canvasWorkspace :is(.image-preview, .video-preview).developing { animation: t-develop 1.8s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes t-develop {
  0% { opacity: 0; filter: blur(18px) brightness(.35) saturate(.3); transform: scale(1.04); }
  45% { opacity: 1; filter: blur(6px) brightness(.8) saturate(.7); }
  100% { opacity: 1; filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] #canvasWorkspace :is(.image-preview, .video-preview).developing { animation: none; }
}
/* Generation node screen */
:root[data-theme] #canvasWorkspace .node-screen { position: relative; display: grid; place-items: center; max-height: 260px; margin: -2px 0 14px; overflow: hidden; border-radius: 8px; background: var(--t-screen); box-shadow: var(--t-screen-shadow); }
:root[data-theme] #canvasWorkspace .node-screen :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme] #canvasWorkspace .node-screen-caption { color: var(--t-screen-ink); font-size: 12px; letter-spacing: .08em; }
:root[data-theme] #canvasWorkspace .node-screen-badge { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; color: #f4f4f5; background: rgba(0, 0, 0, .55); font-size: 11px; }
/* Running: a projector warming up — a soft beam sweeps the frame, the caption breathes. */
:root[data-theme] #canvasWorkspace .node-screen.is-running::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--t-text) 4%, transparent) 46%, color-mix(in srgb, var(--t-text) 8%, transparent) 50%, color-mix(in srgb, var(--t-text) 4%, transparent) 54%, transparent 62%); animation: t-sweep 2.4s ease-in-out infinite; }
:root[data-theme] #canvasWorkspace .node-screen.is-running .node-screen-caption { position: relative; color: var(--t-text-2); animation: t-breathe 2.4s ease-in-out infinite; }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:has(.node-screen.is-running) { border-color: var(--t-accent-line); box-shadow: 0 0 0 1px var(--t-accent-soft), 0 0 46px -10px var(--t-beam-soft), var(--t-shadow-md); }
@keyframes t-sweep { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
@keyframes t-breathe { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] #canvasWorkspace .node-screen.is-running::before { animation: none; opacity: .5; }
  :root[data-theme] #canvasWorkspace .node-screen.is-running .node-screen-caption { animation: none; }
}

/* ---------- Creation home: composer on the left, the canvas-to-be on the right ---------- */
:root[data-theme] .creation-home { background: radial-gradient(90% 70% at 70% 30%, var(--t-glow), transparent 70%), var(--t-bg); }
:root[data-theme="screening"] .creation-home { background: var(--t-bg); }
:root[data-theme] .creation-home-content { width: min(1180px, calc(100% - 64px)); }
:root[data-theme] .creation-home-columns { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
:root[data-theme] .creation-home-heading h1 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.18; }
:root[data-theme] .creation-home-shortcuts, :root[data-theme] .creation-home-recent { max-width: none; }

:root[data-theme] .creation-stage { position: relative; margin: 0; aspect-ratio: 600 / 420; border-radius: 14px; background-color: var(--t-panel); background-image: radial-gradient(circle, var(--t-dot) 1px, transparent 1.3px); background-size: 20px 20px; box-shadow: inset 0 0 0 1px var(--t-line-strong), var(--t-shadow-lg); overflow: hidden; transition: transform 520ms cubic-bezier(.6, 0, .2, 1), opacity 520ms var(--t-ease); }
:root[data-theme] .creation-stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-theme] .creation-stage-lines path { fill: none; stroke: var(--t-edge); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke var(--t-dur) var(--t-ease); }
:root[data-theme] .creation-stage.has-prompt .creation-stage-lines #stageLinePrompt,
:root[data-theme] .creation-stage.has-refs .creation-stage-lines .stage-line-ref { stroke: var(--t-edge-strong); stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--t-beam-soft)); }
:root[data-theme] .stage-node { position: absolute; padding: 3% 3.4%; border: 1px solid var(--t-line-strong); border-radius: 10px; background: linear-gradient(var(--k, var(--t-k-text)), var(--k, var(--t-k-text))) top / 100% 3px no-repeat, var(--t-raised); box-shadow: var(--t-shadow-md); transition: opacity var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease); }
:root[data-theme] .stage-kind { display: block; margin-bottom: 6px; color: var(--t-text-2); font-size: 12px; }
:root[data-theme] .stage-prompt { left: 5%; top: 14%; width: 33%; --k: var(--t-k-text); }
:root[data-theme] .stage-prompt p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: var(--t-text-3); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
:root[data-theme] .creation-stage.has-prompt .stage-prompt { border-color: var(--t-accent-line); }
:root[data-theme] .creation-stage.has-prompt .stage-prompt p { color: var(--t-text); }
:root[data-theme] .stage-ref { left: 5%; top: 62%; width: 33%; --k: var(--t-k-image); opacity: .55; }
:root[data-theme] .creation-stage.has-refs .stage-ref { opacity: 1; }
:root[data-theme] .stage-ref-strip { display: flex; gap: 4px; min-height: 32px; }
:root[data-theme] .stage-ref-strip:empty::before { content: "可选"; color: var(--t-text-3); font-size: 12px; line-height: 32px; }
:root[data-theme] .stage-ref-strip img { width: 32px; height: 32px; border-radius: 5px; object-fit: cover; }
:root[data-theme] .stage-gen { left: 62%; top: 22%; width: 33%; --k: var(--t-k-gen); }
:root[data-theme] .stage-screen { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--t-screen); box-shadow: var(--t-screen-shadow); }
:root[data-theme] .creation-stage[data-mode="video"] .stage-screen { aspect-ratio: 16 / 9; }
:root[data-theme] .creation-stage[data-mode="text"] .stage-screen { aspect-ratio: 4 / 3; background: var(--t-field); }
:root[data-theme] .stage-screen span { padding: 0 8px; color: var(--t-screen-ink); font-size: 12px; text-align: center; }
:root[data-theme] .creation-stage[data-mode="text"] .stage-screen span { color: var(--t-text-3); }
:root[data-theme] .creation-stage.has-prompt .stage-screen { position: relative; overflow: hidden; }
:root[data-theme] .creation-stage.has-prompt .stage-screen::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--t-text) 6%, transparent) 50%, transparent 60%); animation: t-sweep 3.2s ease-in-out infinite; }
/* Launch: the stage leans into the screen, then the real canvas takes over. */
:root[data-theme] .creation-stage.launching { transform: scale(1.12); opacity: 0; }
:root[data-theme] .creation-home.launching :is(.creation-home-compose-column, .creation-home-shortcuts, .creation-home-recent, .creation-home-bar) { opacity: 0; transition: opacity 360ms var(--t-ease); }
@media (max-width: 980px) {
  :root[data-theme] .creation-home-columns { grid-template-columns: 1fr; }
  :root[data-theme] .creation-stage { order: -1; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  :root[data-theme] .creation-home-content { width: calc(100% - 32px); }
  :root[data-theme] .creation-stage { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .creation-stage.has-prompt .stage-screen::before { animation: none; }
}
:root[data-theme] .creation-home-compose-column .creation-home-heading { text-align: left; }
:root[data-theme] .creation-home-compose-column .creation-home-modes { margin-left: 0; }
:root[data-theme] .creation-home-content { padding: 32px 0 56px; }
@media (max-width: 980px) {
  :root[data-theme] .creation-home-content { width: min(720px, calc(100% - 40px)); }
  :root[data-theme] .creation-home-compose-column .creation-home-heading { text-align: center; }
  :root[data-theme] .creation-home-compose-column .creation-home-modes { margin-left: auto; }
}
:root[data-theme] .home-studio-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--t-accent-line); border-radius: 999px; color: var(--t-accent-hover); font-size: 14px; font-weight: 600; text-decoration: none; }
:root[data-theme] .home-studio-link:hover { background: var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace .top-more-actions a.menu-item { text-decoration: none; }

/* ---------- Canvas v3: shots, cards, episodes (docs/design-canvas-v3.md) ----------
   Functional styling only; the visual redesign comes later. */
#canvasWorkspace .canvas-node.shot-node { display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; border: 1px solid var(--t-line-strong); border-radius: 14px; background: var(--t-raised); box-shadow: var(--t-shadow-md); color: var(--t-text); overflow: hidden; }
#canvasWorkspace .canvas-node.shot-node.selected { border-color: var(--t-accent); box-shadow: 0 0 0 2px var(--t-accent-soft), var(--t-shadow-md); }
#canvasWorkspace .canvas-node.shot-node.expanded { background: var(--t-panel); border-style: dashed; box-shadow: var(--t-shadow-lg); overflow: visible; }
.shot-node .shot-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--t-line); cursor: move; }
.shot-node .shot-number { font: 600 13px var(--t-mono); color: var(--t-accent); }
.shot-node .node-inline-title { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--t-text); font-weight: 650; font-size: 14px; }
.shot-status { flex: none; padding: 2px 8px; border-radius: 99px; font-size: 11px; background: var(--t-field); color: var(--t-muted, #5b6a6e); }
.shot-status.status-done { background: var(--t-ok-soft); color: var(--t-ok); }
.shot-status.status-video, .shot-status.status-frame { background: var(--t-accent-soft); color: var(--t-accent); }
.shot-status.status-running { background: var(--t-accent-soft); color: var(--t-accent); }
.shot-status.status-error { background: var(--t-danger-soft); color: var(--t-danger); }
.shot-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px; }
.shot-cell { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--t-field); overflow: hidden; display: grid; place-items: center; }
.shot-cell img, .shot-cell video { width: 100%; height: 100%; object-fit: cover; }
.shot-cell.is-running { outline: 2px solid var(--t-accent-line); }
.shot-cell.is-error { outline: 2px solid var(--t-danger); }
.shot-cell-mark { font-size: 11px; color: var(--t-muted, #5b6a6e); }
.shot-cell figcaption { position: absolute; left: 4px; bottom: 3px; padding: 0 5px; border-radius: 4px; font-size: 10px; background: var(--t-glass); color: var(--t-text); }
.shot-meta { padding: 0 12px; font-size: 11px; color: var(--t-muted, #5b6a6e); }
.shot-description, .shot-line { margin: 0; padding: 0 12px; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shot-line { color: var(--t-accent); -webkit-line-clamp: 1; }
.shot-cast { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px; }
.shot-cast-chip { padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--t-field); }
.shot-cast-chip.scene { background: var(--t-ok-soft); }
.shot-node .node-stale { margin: 0 10px; }
.shot-actions { display: flex; gap: 6px; margin-top: auto; padding: 0 10px; }
.shot-actions .node-run-button { flex: 1; margin: 0; }
/* Cards are their picture (see the picture-layout rules); a fixed shape, so no resize handle. */
#canvasWorkspace .canvas-node.card-layout .resize-handle { display: none; }
:root[data-theme] #canvasWorkspace .card-layout .card-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 16px 20px; text-align: center; }
:root[data-theme] #canvasWorkspace .card-layout .card-look { display: -webkit-box; flex: none; margin: 0; overflow: hidden; color: var(--t-text-2); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 8; }
:root[data-theme] #canvasWorkspace .card-layout.scene .card-look { -webkit-line-clamp: 2; }
:root[data-theme] #canvasWorkspace .card-layout .card-look.is-hint { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .card-layout .card-actions { display: flex; flex: none; gap: 6px; }
:root[data-theme] #canvasWorkspace .card-layout .card-action { height: 32px; padding: 0 8px; border: 0; border-radius: 8px; color: var(--t-text); background: var(--t-field); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
:root[data-theme] #canvasWorkspace .card-layout .card-action:hover { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .card-layout .card-action.primary { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] #canvasWorkspace .card-layout .card-action.primary:hover { background: var(--t-fill-hover); }
.node-restore-auto { align-self: flex-start; border: 0; padding: 2px 0; background: none; color: var(--t-accent); font-size: 12px; text-decoration: underline; cursor: pointer; }
.episode-band-label { position: absolute; padding: 4px 12px; border: 1px solid var(--t-line-strong); border-radius: 99px; background: var(--t-glass-solid); color: var(--t-text); font: 600 14px var(--t-font); cursor: pointer; white-space: nowrap; }
.episode-band-label.active { border-color: var(--t-accent); color: var(--t-accent); }
/* Zoomed out (below 60%, js/render.js applyTransform): titles grow by 1/zoom (`--far`, at most 3x) so they
   stay about 14px on screen. A collapsed shot becomes its title, status and first frame. Cards and generation
   nodes keep their size (it is measured and the layout depends on it); only their title grows. */
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-head { height: auto; min-height: 44px; padding: calc(6px * var(--far)) 12px; gap: calc(4px * var(--far)); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-number { font-size: min(calc(12px * var(--far)), 34px); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .node-inline-title { font-size: min(calc(14px * var(--far)), 40px); pointer-events: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-status { font-size: min(calc(11px * var(--far)), 30px); padding: 0 calc(6px * var(--far)); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .node-close { display: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) :is(.shot-meta, .shot-description, .shot-line, .shot-cast, .node-stale, .shot-actions) { display: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-strip { flex: 1; min-height: 0; grid-template-columns: 1fr; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-cell:not(:first-child) { display: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-cell { aspect-ratio: auto; height: 100%; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-cell-mark { font-size: min(calc(11px * var(--far)), 30px); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-cell figcaption { display: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .reference-node .node-inline-title { font-size: min(calc(14px * var(--far)), 36px); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .reference-node .node-head .node-close { display: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .episode-band-label { transform: scale(var(--far)); transform-origin: left bottom; }
/* Storyboard: episodes, cards, richer shot rows. */
.episode-bar { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; }
.episode-tabs { display: flex; gap: 4px; }
.episode-tab { padding: 5px 12px; border: 1px solid var(--t-line); border-radius: 99px; background: transparent; color: var(--t-text); font-size: 12px; white-space: nowrap; cursor: pointer; }
.episode-tab.active { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent); font-weight: 650; }
.episode-tab.episode-add { border-style: dashed; color: var(--t-muted, #5b6a6e); }
.storyboard-cards { display: grid; gap: 8px; }
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.project-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-panel); }
.project-card-portrait { width: 64px; height: 84px; padding: 0; border: 0; border-radius: 8px; background: var(--t-field); color: var(--t-muted, #5b6a6e); font-size: 12px; overflow: hidden; cursor: pointer; }
.project-card-portrait img { width: 100%; height: 100%; object-fit: cover; }
.project-card-body { display: grid; gap: 4px; min-width: 0; }
.project-card-body small { font-size: 11px; color: var(--t-muted, #5b6a6e); }
.project-card-body input, .project-card-body textarea { width: 100%; border: 1px solid var(--t-line); border-radius: 6px; padding: 3px 6px; background: var(--t-raised); color: var(--t-text); font-size: 12px; }
.project-card-name { font-weight: 650; }
:root[data-theme] .project-shot, .project-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.project-shot > * { grid-area: auto; }
.project-shot-number { font: 600 12px var(--t-mono); color: var(--t-accent); }
.project-shot .project-shot-title { flex: 1 1 120px; width: auto; }
.project-shot .project-shot-description, .project-shot-meta, .project-shot-cast, .project-shot-line, .project-shot-details, .project-shot .project-shot-media { flex: 1 1 100%; }
.project-shot .project-shot-duration { width: 56px; }
.project-shot .project-shot-generate { width: auto; flex: 1 1 auto; }
.project-shot-meta, .project-shot-line { display: flex; gap: 6px; flex-wrap: wrap; }
.project-shot-meta > *, .project-shot-line > input { flex: 1 1 90px; min-width: 0; border: 1px solid var(--t-line); border-radius: 6px; padding: 3px 6px; background: var(--t-raised); color: var(--t-text); font-size: 12px; }
.project-shot-line > select { flex: 0 0 90px; }
.project-shot-cast { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--t-muted, #5b6a6e); }
.project-cast-chip { padding: 2px 9px; border: 1px solid var(--t-line); border-radius: 99px; background: transparent; color: var(--t-text); font-size: 12px; cursor: pointer; }
.project-cast-chip.active { border-color: var(--t-accent); background: var(--t-accent-soft); color: var(--t-accent); }
.project-shot-status.status-done { color: var(--t-ok); }
.project-shot-status.status-error { color: var(--t-danger); }
.project-sequence { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; color: var(--t-accent); }
.storyboard-content { grid-template-rows: auto auto minmax(160px, 1fr); }
.storyboard-cards { padding: 16px 20px; border-bottom: 1px solid var(--t-line); }
.project-shot .project-shot-status { font-size: 11px; }

/* ---------- Stage 5 step 3: storyboard and cut layouts (docs/design-canvas-v3.md §9) ----------
   Overrides the older grid rules in styles.css; scoped by :root[data-theme] to win over them. */
/* Brief column: the main action spans the width, the two smaller ones share a row. */
:root[data-theme] .project-director-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
:root[data-theme] .project-director-actions > .project-primary-button { grid-column: 1 / -1; margin: 0; }
:root[data-theme] .project-director-actions > .outline-button { min-height: 34px; white-space: nowrap; }
/* Shot cards: picture, heading, text fields, then one action bar at the bottom. */
:root[data-theme] .storyboard-shots .project-shots { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
:root[data-theme] .project-shot { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 0 0 10px; overflow: hidden; }
:root[data-theme] .project-shot > * { flex: none; width: auto; min-width: 0; }
:root[data-theme] .project-shot > :not(.project-shot-thumb) { margin-left: 10px; margin-right: 10px; }
.project-shot-thumb { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 16 / 9; background: var(--t-field); color: var(--t-text-3); font-size: 12px; }
:root[data-theme] .project-shot-thumb .project-shot-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; background: #111113; }
.project-shot-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
:root[data-theme] .project-shot-head .project-shot-title { flex: 1; min-width: 0; font-size: 13px; }
.project-shot-head .project-shot-status { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--t-field); }
:root[data-theme] .project-shot-head .project-shot-delete { flex: none; width: 26px; height: 26px; }
:root[data-theme] .project-shot .project-shot-description { flex: none; min-height: 52px; font-size: 12px; }
:root[data-theme] .project-shot .project-shot-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px; gap: 6px; }
:root[data-theme] .project-shot .project-shot-meta > .project-shot-scene { grid-column: span 2; }
:root[data-theme] .project-shot .project-shot-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px; }
:root[data-theme] .project-shot :is(.project-shot-meta, .project-shot-line) > * { min-width: 0; height: 30px; font-size: 12px; }
:root[data-theme] .project-shot .project-shot-meta > .project-shot-length { padding: 0 6px 0 0; border: 1px solid var(--t-line); border-radius: 6px; background: var(--t-raised); }
.project-shot-actions { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--t-line); }
.project-shot-length { display: flex; align-items: center; gap: 4px; color: var(--t-text-3); font-size: 12px; }
:root[data-theme] .project-shot-length .project-shot-duration { flex: 1; width: 100%; min-width: 0; height: 28px; border: 0; padding: 0 2px; text-align: center; background: transparent; }
:root[data-theme] .project-shot-actions .project-shot-order { width: 30px; height: 30px; border-radius: 6px; }
:root[data-theme] .project-shot-actions .project-shot-locate { flex: none; width: auto; height: 30px; margin: 0; padding: 0 12px; }
:root[data-theme] .project-shot-actions .project-shot-generate { flex: 1; width: auto; min-height: 30px; height: 30px; margin: 0; padding: 0 10px; font-size: 12px; white-space: nowrap; }
:root[data-theme] .project-shot-actions .project-shot-generate:disabled { opacity: .45; cursor: default; }
/* Cut: clips on top of the side panel, export settings pinned at its bottom; one-line timeline title. */
/* The right column scrolls as one page, so the shot list gets the full height; its heading stays in view. */
:root[data-theme] .storyboard-content { grid-template-rows: auto auto auto; align-content: start; }
:root[data-theme] .storyboard-shots { min-height: auto; overflow: visible; border-bottom: 0; }
:root[data-theme] .storyboard-shots .project-shots { overflow: visible; }
:root[data-theme] .storyboard-shots > .project-section-head { position: sticky; top: 0; z-index: 2; margin: -16px -20px 8px; padding: 12px 20px; background: var(--t-bg); border-bottom: 1px solid var(--t-line); }
/* Narrow side panel: the trim row wraps instead of squeezing its labels, and nothing scrolls sideways. */
/* Stacked (≤800px): the page scrolls, so the panel shows all its clips instead of a clipped list. */
@media (max-width: 800px) {
}
/* The trim row runs under the thumbnail too, so 入点 / 出点 / 移出 fit on one line in a narrow panel. */

/* ==========================================================================
   Lensmith quiet layer (2026-10-22, second pass)
   A working tool should step back from the work. Rules:
   - One ink. Primary actions, selection and focus are ink (light) or bone white (dark); no hue.
   - Hairlines and space instead of fills and bands; fields are a faint tint until touched.
   - One sans for everything you work with; the serif only for the few large headlines.
   - Colour only for state that matters (saved, stale, failed) and for the pictures themselves.
   ========================================================================== */
:root[data-theme] {
  --t-r-sm: 6px;
  --t-r-md: 8px;
  --t-r-lg: 12px;
  --q-node-r: 12px;
  --q-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238b8b93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}

/* ---- Stage: a plain sheet with a faint grid, nothing over it ---- */
:root[data-theme] #canvasWorkspace .viewport::before { content: none; }
:root[data-theme] #canvasWorkspace .viewport { background-image: radial-gradient(circle, var(--t-dot) .9px, transparent 1.1px); }
:root[data-theme] #canvasWorkspace .viewport.spotlight .canvas-node:not(.selected, .related) { filter: none; }

/* ---- Typography: headings in the panels are sans like the rest ---- */
:root[data-theme] :is(#canvasWorkspace .workspace-pane-head h2, #canvasWorkspace .inspector h2, #canvasWorkspace .director-head h2, #canvasWorkspace .director-intro h3, .auth-modal h2, .storyboard-title h1, .storyboard-board-section h2, #canvasWorkspace .canvas-empty p) {
  font-family: var(--t-font); letter-spacing: -.005em;
}
:root[data-theme] .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--t-text-3); }
:root[data-theme] .auth-modal .eyebrow { color: var(--t-text-3); }
:root[data-theme] :is(.creation-home-heading h1) { letter-spacing: .02em; }

/* ---- Chrome: white (or graphite) plates, hairline edge, a low shadow ---- */
:root[data-theme] #canvasWorkspace :is(.brand-lockup, .project-control, .workspace-view-switch, .tool-rail, .bottom-dock, .mini-map, .history-actions, .command-trigger),
:root[data-theme] #canvasWorkspace .top-actions :is(.icon-button, .text-button:not(.primary)) {
  border-color: var(--t-line-strong);
  background: var(--t-glass);
  box-shadow: var(--t-shadow-sm);
}
:root[data-theme] #canvasWorkspace :is(.brand-lockup, .project-control, .bottom-dock, .history-actions) { border-radius: 10px; }
:root[data-theme] #canvasWorkspace .top-actions > :is(.icon-button, .text-button) { border-radius: 10px; }
:root[data-theme] #canvasWorkspace .project-name { font-weight: 600; letter-spacing: -.005em; }
/* View switch: a recessed track; the current view is a raised tab, not a black pill. */
:root[data-theme] #canvasWorkspace .workspace-view-switch { padding: 3px; border-radius: 10px; }
:root[data-theme] #canvasWorkspace .workspace-view-switch button { border-radius: 7px; color: var(--t-text-3); font-weight: 500; }
:root[data-theme] #canvasWorkspace .workspace-view-switch button:hover { color: var(--t-text); background: transparent; }
:root[data-theme] #canvasWorkspace .workspace-view-switch button.active { color: var(--t-text); background: var(--t-hover); font-weight: 600; box-shadow: none; }
:root[data-theme="shiqing"] #canvasWorkspace .workspace-view-switch { background: var(--t-hover); }
:root[data-theme="shiqing"] #canvasWorkspace .workspace-view-switch button.active { background: var(--t-raised); box-shadow: 0 1px 2px rgba(24, 24, 27, .08), 0 0 0 1px rgba(24, 24, 27, .04); }
:root[data-theme] #canvasWorkspace .command-trigger { border-radius: 10px; }
:root[data-theme] #canvasWorkspace .command-trigger:hover { border-color: var(--t-line-strong); color: var(--t-text-2); background: var(--t-raised); }
:root[data-theme] #canvasWorkspace .command-trigger svg { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .command-trigger kbd { border-color: var(--t-line); color: var(--t-text-3); font-size: 11px; }
/* The one filled button on the page. */
:root[data-theme] #canvasWorkspace .run-button { border-radius: 10px; box-shadow: none; font-weight: 600; letter-spacing: 0; }
:root[data-theme] #canvasWorkspace .run-button svg { width: 14px; height: 14px; }
:root[data-theme] #canvasWorkspace .save-state { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .save-state::before { width: 6px; height: 6px; flex-basis: 6px; }

/* Tool rail: plain icons; the add button is tinted, the active tool is a quiet fill. */
:root[data-theme] #canvasWorkspace .tool-rail { height: 48px; padding: 4px; gap: 2px; border-radius: 12px; }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button { width: 38px; height: 38px; flex-basis: 38px; border-radius: 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button svg { width: 18px; height: 18px; }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button.active { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button { color: var(--t-on-accent); background: var(--t-accent); box-shadow: none; }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button:hover { color: var(--t-on-accent); background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu { bottom: 56px; }
:root[data-theme] #canvasWorkspace .bottom-dock { height: 38px; padding: 3px; }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .zoom-readout, .mini-map-toggle) { height: 30px; }
:root[data-theme] #canvasWorkspace .zoom-readout { color: var(--t-text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .bottom-dock #filmStripToggle.active { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .mini-node { background: var(--t-text-3); opacity: .5; }

/* Floating panels and menus share one surface. */
:root[data-theme] #canvasWorkspace :is(.workspace-sidebar, .inspector, .director-panel, .node-create-menu),
:root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu,
:root[data-theme] #canvasWorkspace .top-more-actions.open,
:root[data-theme] .operations-panel,
:root[data-theme] #canvasWorkspace .film-strip,
:root[data-theme] .command-palette-box {
  border-color: var(--t-line-strong);
  background: var(--t-glass-solid);
  box-shadow: var(--t-shadow-lg);
}
:root[data-theme] .command-row[aria-selected="true"] svg { color: var(--t-text); }
:root[data-theme] .command-quote { color: var(--t-text-2); }

/* ---- Nodes ---- */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node,
:root[data-theme] #canvasWorkspace .canvas-node.shot-node {
  border: 1px solid var(--t-line-strong);
  border-radius: var(--q-node-r);
  background: var(--t-raised);
  box-shadow: var(--t-shadow-md);
}
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:hover,
:root[data-theme] #canvasWorkspace .canvas-node.shot-node:hover { border-color: color-mix(in srgb, var(--t-text) 22%, transparent); }
/* Selected: a crisp ink edge, two pixels, nothing else. */
:root[data-theme] #canvasWorkspace .canvas-node:is(.reference-node, .shot-node).selected {
  border-color: var(--t-text);
  box-shadow: 0 0 0 1px var(--t-text), var(--t-shadow-lg);
}
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.related { border-color: color-mix(in srgb, var(--t-text) 30%, transparent); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.connection-target { border-color: var(--t-text); box-shadow: 0 0 0 3px var(--t-accent-soft), var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:focus-visible { outline: 2px solid var(--t-accent-line); outline-offset: 3px; }

/* Head: the title is the head. The kind sits to its right in grey, only when the title says something else. */
:root[data-theme] #canvasWorkspace .reference-node .node-head { height: 44px; padding: 0 8px 0 10px; gap: 6px; border-bottom: 0; }
:root[data-theme] #canvasWorkspace .reference-node .node-head .node-inline-title { order: 1; }
:root[data-theme] #canvasWorkspace .reference-node .node-kind { order: 2; padding: 0; gap: 0; border-radius: 0; background: none; color: var(--t-text-3); font: 400 12px/1 var(--t-font); letter-spacing: 0; white-space: nowrap; }
:root[data-theme] #canvasWorkspace .reference-node .node-kind[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .reference-node .node-kind-mark { display: none; }
:root[data-theme] #canvasWorkspace .reference-node .node-head .node-close { order: 3; }
:root[data-theme] #canvasWorkspace :is(.reference-node, .shot-node) .node-inline-title {
  min-width: 0; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px;
  color: var(--t-text); background: transparent; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace :is(.reference-node, .shot-node) .node-inline-title:hover { background: var(--t-accent-soft); }
:root[data-theme] #canvasWorkspace :is(.reference-node, .shot-node) .node-inline-title:focus { border-color: var(--t-line-strong); color: var(--t-text); background: var(--t-raised); box-shadow: none; outline: none; caret-color: var(--t-text); }
:root[data-theme] #canvasWorkspace .node-close { width: 26px; height: 26px; border-radius: 6px; color: var(--t-text-3); font-size: 16px; }
:root[data-theme] #canvasWorkspace .node-close:hover { color: var(--t-danger); background: var(--t-danger-soft); }

/* Body: labels are quiet sentence-case, fields are a faint tint that sharpens on touch. */
:root[data-theme] #canvasWorkspace .reference-node .node-body { padding: 2px 14px 14px; color: var(--t-text-2); font-size: 13px; }
:root[data-theme] #canvasWorkspace .reference-node .node-section-label { margin: 14px 0 6px; color: var(--t-text-3); font: 500 12px/1.3 var(--t-font); letter-spacing: 0; text-transform: none; }
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .reference-node-output, .node-control) {
  border: 1px solid transparent;
  border-radius: var(--t-r-md);
  color: var(--t-text);
  background: var(--t-field);
  box-shadow: none;
  font-size: 13px;
  transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .node-control):hover { border-color: var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .node-control):focus {
  border-color: var(--t-accent-line); background: var(--t-raised); box-shadow: 0 0 0 3px var(--t-accent-soft); outline: none; caret-color: var(--t-text);
}
:root[data-theme] #canvasWorkspace .reference-node :is(.reference-node-editor, .node-control)::placeholder { color: var(--t-text-3); opacity: 1; }
:root[data-theme] #canvasWorkspace .reference-node select.node-control {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background: var(--q-chevron) right 10px center / 12px 12px no-repeat, var(--t-field);
}
:root[data-theme] #canvasWorkspace .reference-node select.node-control:focus { background: var(--q-chevron) right 10px center / 12px 12px no-repeat, var(--t-raised); }
/* A button among the fields (模型接口) reads as a link to settings, not as another field. */
:root[data-theme] #canvasWorkspace .reference-node button.node-control { border-color: var(--t-line-strong); color: var(--t-text-2); background: transparent; font-weight: 500; cursor: pointer; }
:root[data-theme] #canvasWorkspace .reference-node button.node-control:hover { color: var(--t-text); background: var(--t-accent-soft); }
/* Segmented: recessed track, raised current tab. */
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tabs, .node-segmented) { padding: 2px; gap: 2px; border: 0; border-radius: var(--t-r-md); background: var(--t-field); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tab, .node-segment) { border: 0; border-radius: 6px; color: var(--t-text-3); background: transparent; font-size: 12.5px; font-weight: 500; box-shadow: none; }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tab, .node-segment):hover:not(.active) { color: var(--t-text); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-tab, .node-segment).active { color: var(--t-text); background: var(--t-raised); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--t-line); }
:root[data-theme="screening"] #canvasWorkspace .reference-node :is(.node-tab, .node-segment).active { background: var(--t-hover); box-shadow: 0 0 0 1px var(--t-line-strong); }
/* Actions. */
:root[data-theme] #canvasWorkspace .reference-node .node-run-button {
  margin-top: 14px; padding: 10px; border: 0; border-radius: var(--t-r-md);
  color: var(--t-on-accent); background: var(--t-accent); box-shadow: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
}
:root[data-theme] #canvasWorkspace .reference-node .node-run-button:hover { background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button:disabled { opacity: .4; cursor: default; }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button.cancel-node-run,
:root[data-theme] #canvasWorkspace .reference-node .node-run-button.dark { margin-top: 8px; color: var(--t-text); background: transparent; box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .reference-node .node-run-button.cancel-node-run:hover { color: var(--t-danger); background: var(--t-danger-soft); }
:root[data-theme] :is(.outline-button, .canvas-quick-actions button) { border-color: var(--t-line-strong); border-radius: var(--t-r-md); color: var(--t-text-2); background: transparent; }
:root[data-theme] :is(.outline-button, .canvas-quick-actions button):hover { border-color: var(--t-line-strong); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .project-primary-button { border-radius: var(--t-r-md); box-shadow: none; }
:root[data-theme] .project-edit-actions :is(.project-primary-button, .outline-button).compact-button { min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
/* Media. */
:root[data-theme] #canvasWorkspace .node-screen { margin: 0 0 4px; border-radius: var(--t-r-md); background: var(--t-screen); box-shadow: var(--t-screen-shadow); }
:root[data-theme] #canvasWorkspace .node-screen-caption { color: var(--t-screen-ink); font-size: 12.5px; letter-spacing: 0; }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:has(.node-screen.is-running) { border-color: var(--t-line-strong); box-shadow: var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.selected:has(.node-screen.is-running) { border-color: var(--t-text); box-shadow: 0 0 0 1px var(--t-text), var(--t-shadow-lg); }
:root[data-theme] #canvasWorkspace .reference-node :is(.node-media-empty, .node-media-placeholder) { border: 1px dashed var(--t-line-strong); border-radius: var(--t-r-md); color: var(--t-text-3); background: transparent; font-size: 11.5px; }
:root[data-theme] #canvasWorkspace .reference-node .node-media-chip { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .reference-node .node-media-upload { border-color: var(--t-line-strong); color: var(--t-text-2); background: transparent; }
:root[data-theme] #canvasWorkspace .reference-node .node-media-upload:hover { border-color: var(--t-line-strong); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .node-take { border-color: var(--t-line-strong); border-radius: 6px; }
:root[data-theme] .node-take.active { border-color: var(--t-text); box-shadow: 0 0 0 1px var(--t-text); }
:root[data-theme] .node-take:focus-visible { outline-color: var(--t-accent-line); }
:root[data-theme] .node-stale { border: 0; border-radius: 6px; color: var(--t-warn); background: color-mix(in srgb, var(--t-warn) 9%, transparent); font-size: 11.5px; }
:root[data-theme] .node-revised { color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] #canvasWorkspace .reference-node .node-status.running { color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .reference-node .node-connection-badge { color: var(--t-text-2); background: var(--t-field); }
:root[data-theme] #canvasWorkspace .reference-node .node-range-field input { accent-color: var(--t-text); }
:root[data-theme] .node-restore-auto { color: var(--t-text-2); }
/* Notes: a sheet of paper, not a coloured card. Groups: a hairline frame. */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.note { border-color: var(--t-line-strong); background: var(--t-note); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.group { border: 1px dashed color-mix(in srgb, var(--t-text) 18%, transparent); background: color-mix(in srgb, var(--t-text) 2%, transparent); box-shadow: none; }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.group:is(.selected) { border-style: solid; }
/* Ports: small rings that appear with the node's attention; a larger invisible target. */
:root[data-theme] #canvasWorkspace .port {
  width: 11px; height: 11px; border: 1.5px solid var(--t-edge-strong); border-radius: 50%;
  background: var(--t-raised); box-shadow: 0 0 0 3px var(--t-bg);
}
:root[data-theme] #canvasWorkspace .port::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
:root[data-theme] #canvasWorkspace .port.in { left: -6px; }
:root[data-theme] #canvasWorkspace .port.out { right: -6px; }
:root[data-theme] #canvasWorkspace .port:hover { border-color: var(--t-text); background: var(--t-text); transform: translateY(-50%) scale(1.25); }
:root[data-theme] #canvasWorkspace .resize-handle { border-color: var(--t-line-strong); }
/* The next-step bar under a selected node. */
:root[data-theme] #canvasWorkspace .node-next-actions { padding: 4px; gap: 2px; border-color: var(--t-line-strong); border-radius: 10px; background: var(--t-glass-solid); box-shadow: var(--t-shadow-lg); }
:root[data-theme] #canvasWorkspace .node-next-actions button { padding: 0 10px; border-radius: 7px; color: var(--t-text-2); font-size: 12.5px; }
:root[data-theme] #canvasWorkspace .node-next-actions button:hover { color: var(--t-text); background: var(--t-hover); }

/* ---- Edges: graphite threads; a run is a short ink dash travelling along ---- */
:root[data-theme] .edge-path { stroke: var(--t-edge); stroke-width: 1.5; }
:root[data-theme] .edge-path.related { stroke: var(--t-edge-strong); stroke-width: 1.75; }
:root[data-theme] #canvasWorkspace .edge-path.selected { stroke: var(--t-text); stroke-width: 2; filter: none; }
:root[data-theme] #canvasWorkspace .edge-preview { stroke: var(--t-edge-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
:root[data-theme] .edge-path.live { stroke: var(--t-edge); }
:root[data-theme] .edge-beam { stroke: var(--t-beam); stroke-width: 2; filter: none; }
:root[data-theme] .selection-box { border: 1px solid var(--t-accent-line); border-radius: 4px; background: var(--t-accent-soft); }

/* ---- Shots ---- */
:root[data-theme] #canvasWorkspace .canvas-node.shot-node { gap: 8px; }
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.expanded { border: 1px solid var(--t-line-strong); background: color-mix(in srgb, var(--t-text) 2.5%, transparent); box-shadow: none; }
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.expanded.selected { border-color: var(--t-text); box-shadow: 0 0 0 1px var(--t-text); }
:root[data-theme] .shot-node .shot-head { height: 44px; padding: 0 8px 0 12px; gap: 4px; border-bottom: 0; }
:root[data-theme] :is(.shot-node .shot-number, .project-shot-number) { color: var(--t-text-3); font: 600 12px/1 var(--t-font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
:root[data-theme] :is(.shot-status, .project-shot-head .project-shot-status) { padding: 2px 8px; border-radius: 999px; color: var(--t-text-2); background: var(--t-field); font: 500 11px/1.5 var(--t-font); letter-spacing: 0; }
:root[data-theme] :is(.shot-status, .project-shot-status).status-done { color: var(--t-ok); background: var(--t-ok-soft); }
:root[data-theme] :is(.shot-status, .project-shot-status).status-error { color: var(--t-danger); background: var(--t-danger-soft); }
:root[data-theme] :is(.shot-status, .project-shot-status):is(.status-video, .status-frame, .status-running) { color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .shot-cell { border-radius: 6px; background: var(--t-field); }
:root[data-theme] .shot-cell.is-running { outline: 1.5px solid var(--t-accent-line); outline-offset: -1.5px; }
:root[data-theme] .shot-cell.is-error { outline: 1.5px solid var(--t-danger); outline-offset: -1.5px; }
:root[data-theme] .shot-cell-mark { color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] .shot-cell figcaption { border-radius: 4px; color: var(--t-text-2); background: var(--t-glass-solid); font-size: 10.5px; }
:root[data-theme] .shot-meta { color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] .shot-description { color: var(--t-text); font-size: 12.5px; line-height: 1.55; }
:root[data-theme] .shot-line { color: var(--t-text-2); }
:root[data-theme] .shot-cast-chip { color: var(--t-text-2); background: var(--t-field); }
:root[data-theme] .shot-cast-chip.scene { background: var(--t-field); }
:root[data-theme] .shot-actions .node-run-button { padding: 8px; border: 0; border-radius: var(--t-r-md); color: var(--t-on-accent); background: var(--t-accent); font-size: 12.5px; font-weight: 600; }
:root[data-theme] .shot-actions .node-run-button:hover { background: var(--t-fill-hover); }
:root[data-theme] .shot-actions .node-run-button:disabled { color: var(--t-text-2); background: var(--t-field); cursor: default; }
/* Episode labels: a line of type above the band; the current one is ink, the rest grey. */
:root[data-theme] .episode-band-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px; border: 0; border-radius: 6px;
  color: var(--t-text-3); background: transparent; box-shadow: none;
  font: 600 13px/1.2 var(--t-font); letter-spacing: 0;
}
:root[data-theme] .episode-band-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
:root[data-theme] .episode-band-label:hover { color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .episode-band-label.active { color: var(--t-text); background: transparent; }
:root[data-theme] .episode-band-label.active::before { opacity: 1; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .episode-band-label { font-size: 13px; }

/* ---- Add menu: monochrome glyphs on a faint plate ---- */
:root[data-theme] :is(.text-icon, .note-icon, .image-icon, .generate-icon, .video-icon, .audio-icon, .upload-icon) {
  border-radius: 8px; color: var(--t-text-2); background: var(--t-field); box-shadow: none;
}
:root[data-theme] #canvasWorkspace .node-options button:hover :is(.text-icon, .note-icon, .image-icon, .generate-icon, .video-icon, .audio-icon, .upload-icon) { color: var(--t-text); background: var(--t-raised); box-shadow: 0 0 0 1px var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .create-menu-head { color: var(--t-text-3); font: 500 12px/1.3 var(--t-font); letter-spacing: 0; text-transform: none; }
:root[data-theme] #canvasWorkspace .node-option-group-label { font: 500 12px/1.3 var(--t-font); letter-spacing: 0; text-transform: none; }
:root[data-theme] #canvasWorkspace .node-options strong { font-size: 13.5px; font-weight: 500; }

/* ---- Accents that used to be amber ---- */
:root[data-theme] #canvasWorkspace :is(.director-intro svg, .director-body > button svg:first-child, .canvas-empty-actions svg) { color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .director-intro svg { background: var(--t-field); }
:root[data-theme] #canvasWorkspace .director-body > button:hover { border-color: var(--t-line-strong); transform: none; }
:root[data-theme] #canvasWorkspace .canvas-empty-actions button { transition: border-color 160ms var(--t-ease), background-color 160ms var(--t-ease), color 160ms var(--t-ease); }
/* Every start button looks the same at rest; the one under the pointer (or keyboard, or finger) fills with ink. */
:root[data-theme] #canvasWorkspace .canvas-empty-actions button:is(:hover, :focus-visible, :active) { border-color: transparent; color: var(--t-on-accent); background: var(--t-accent); transform: none; }
:root[data-theme] #canvasWorkspace .canvas-empty-actions button:is(:hover, :focus-visible, :active) svg { color: var(--t-on-accent); transition: color 160ms var(--t-ease); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] #canvasWorkspace .canvas-empty-actions :is(button, svg) { transition: none; }
}
:root[data-theme] .canvas-node-row-mark { color: var(--t-text-2); background: var(--t-field); }
:root[data-theme] .canvas-node-row.selected { border-color: var(--t-line-strong); background: var(--t-hover); }
:root[data-theme] [data-theme-toggle] svg { color: currentColor; }
:root[data-theme] #canvasWorkspace .film-frame.current { border-color: var(--t-text); box-shadow: 0 0 0 1px var(--t-text); }
:root[data-theme] #canvasWorkspace .film-frame:hover { border-color: var(--t-line-strong); }
:root[data-theme] .toast { border-left-width: 1px; }
:root[data-theme] .toast::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--t-text-3); }
:root[data-theme] .toast.toast-error::before { background: var(--t-danger); }
:root[data-theme] .toast.toast-success::before { background: var(--t-ok); }
:root[data-theme] .toast-action { border-color: var(--t-line-strong); color: var(--t-text); }
:root[data-theme] :is(.settings-endpoint-note code, .setup-guide code, .settings-hint code) { color: var(--t-text); }
:root[data-theme] .guide-note { border-color: var(--t-line-strong); }
:root[data-theme] .guide-note strong { color: var(--t-text); }
:root[data-theme] .canvas-list-item.current { border-color: var(--t-text); box-shadow: none; }
:root[data-theme] #canvasWorkspace .project-control .canvas-list-toggle:is(:hover, [aria-expanded="true"]) { color: var(--t-text); }
:root[data-theme] :is(.creation-home-shortcuts svg, .creation-home-recent-heading button:hover) { color: var(--t-text-2); }
:root[data-theme] .home-studio-link { border-color: var(--t-line-strong); color: var(--t-text); }

/* ---- Search fields: the frame shows focus, not the input inside it ---- */
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search) { border-color: transparent; background: var(--t-field); }
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search) input { background: transparent; }
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search) input:focus-visible { outline: none; }
:root[data-theme] :is(.sidebar-search, .asset-search, .node-search):focus-within { border-color: var(--t-accent-line); background: var(--t-raised); box-shadow: 0 0 0 3px var(--t-accent-soft); }

/* ---- Creation home ---- */
:root[data-theme] .creation-home { background: var(--t-bg); }
:root[data-theme] .creation-home-modes { padding: 3px; border: 0; border-radius: 10px; background: var(--t-hover); }
:root[data-theme] .creation-home-modes button { border-radius: 7px; color: var(--t-text-3); }
:root[data-theme] .creation-home-modes button:hover:not(.active) { color: var(--t-text); background: transparent; }
:root[data-theme] .creation-home-modes button.active { color: var(--t-text); background: var(--t-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--t-line); }
:root[data-theme="screening"] .creation-home-modes button.active { background: var(--t-field); box-shadow: 0 0 0 1px var(--t-line-strong); }
:root[data-theme] .creation-home-composer { border-color: var(--t-line-strong); border-radius: 16px; box-shadow: var(--t-shadow-md); }
:root[data-theme] .creation-home-composer:focus-within { border-color: var(--t-accent-line); box-shadow: 0 0 0 4px var(--t-accent-soft), var(--t-shadow-md); }
:root[data-theme] .creation-home-composer #starterCreate { border-radius: 10px; }
:root[data-theme] .creation-home-references button { border-radius: 8px; }
:root[data-theme] .creation-home-references button:hover { border-color: var(--t-line-strong); background: var(--t-accent-soft); }
:root[data-theme] .creation-home-shortcuts button { border-color: var(--t-line-strong); border-radius: 12px; background: var(--t-glass); }
:root[data-theme] .creation-home-shortcuts button:hover { border-color: var(--t-line-strong); background: var(--t-raised); }
:root[data-theme] .creation-stage { border-radius: 16px; background-color: var(--t-panel); box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] .stage-node { border-color: var(--t-line-strong); border-radius: 10px; background: var(--t-raised); box-shadow: var(--t-shadow-md); }
:root[data-theme] .creation-stage.has-prompt .stage-prompt { border-color: var(--t-text); }
:root[data-theme] .creation-stage.has-prompt .creation-stage-lines #stageLinePrompt,
:root[data-theme] .creation-stage.has-refs .creation-stage-lines .stage-line-ref { filter: none; }

/* ---- Storyboard & cut ---- */
:root[data-theme] .storyboard-mark { border-color: var(--t-line-strong); color: var(--t-text-2); background: var(--t-field); }
:root[data-theme] :is(.storyboard-item-heading small, .storyboard-item-action, .edit-clip-number, .project-shot-number, .project-sequence) { color: var(--t-text-2); }
:root[data-theme] .project-sequence { font: 600 12px/1.3 var(--t-font); letter-spacing: 0; }
:root[data-theme] .project-stage-list button.active { border-color: var(--t-line-strong); background: var(--t-hover); box-shadow: inset 2px 0 var(--t-text); }
:root[data-theme] .project-stage-list button > span { font: 500 11px/1.3 var(--t-font); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
:root[data-theme] .project-stage-list button.active :is(> span, small) { color: var(--t-text-2); }
:root[data-theme] .project-shot:focus-within { border-color: var(--t-accent-line); }
:root[data-theme] .edit-clip-row.selected { background: var(--t-hover); box-shadow: inset 2px 0 var(--t-text); }
:root[data-theme] :is(.episode-tab.active, .project-cast-chip.active) { border-color: var(--t-text); color: var(--t-text); background: var(--t-accent-soft); }
:root[data-theme] .storyboard-top-actions :is(.outline-button, .icon-button):hover,
:root[data-theme] .storyboard-top-actions .outline-button.active { border-color: var(--t-line-strong); background: var(--t-hover); }
:root[data-theme] .project-field :is(textarea, input, select) { border-color: var(--t-line-strong); }
:root[data-theme] .project-field :is(textarea, input, select):focus { border-color: var(--t-accent-line); box-shadow: 0 0 0 3px var(--t-accent-soft); }
/* The older focus rule paints every focused input; inside a search frame the frame carries the focus. */
:root[data-theme] body.dxos-reference :is(.sidebar-search, .asset-search, .node-search) input:focus { border: 0; background: transparent; box-shadow: none; }
/* Mode switch: as wide as its two tabs. */
:root[data-theme] #canvasWorkspace .reference-node .node-segmented { width: fit-content; }
:root[data-theme] #canvasWorkspace .reference-node .node-segment { min-width: 56px; }
:root[data-theme] :is(.creation-home-heading h1, .hero-title, .brand-page h2) { text-wrap: balance; }
/* Disabled primaries go flat grey instead of a faded ink slab. */
:root[data-theme] :is(.project-primary-button, .auth-submit, .generate-button, #canvasWorkspace .run-button, #starterCreate, .shot-actions .node-run-button, #canvasWorkspace .reference-node .node-run-button):disabled { color: var(--t-text-3); background: var(--t-field); box-shadow: inset 0 0 0 1px var(--t-line); opacity: 1; }
:root[data-theme] #canvasWorkspace .run-button.running:disabled { color: var(--t-text); }

/* ============================================================================
   Lensmith v3 layer (2026-10-22). Step 1 of porting design/lensmith-v3.html:
   chrome floats in small translucent plates (top left / centre / right, tools on
   the left, zoom bottom left), primary buttons are ink, and blue (--t-sel) is
   kept for selection, links and progress.
   ========================================================================== */
:root[data-theme] #canvasWorkspace .topbar :is(.top-left, .workspace-view-switch, .top-right),
:root[data-theme] #canvasWorkspace :is(.tool-rail, .bottom-dock) {
  border: 1px solid var(--t-line);
  background: var(--t-glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--t-shadow-md);
}
/* Inside a plate nothing carries its own plate. */
:root[data-theme] #canvasWorkspace .topbar .top-cluster :is(.brand-lockup, .project-control, .history-actions, .command-trigger),
:root[data-theme] #canvasWorkspace .topbar .top-cluster .top-actions > :is(.icon-button, .text-button:not(.primary)) {
  border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
:root[data-theme] #canvasWorkspace .topbar { top: 14px; left: 14px; right: 14px; height: 44px; gap: 8px; }
:root[data-theme] #canvasWorkspace .topbar .top-cluster { display: flex; align-items: center; gap: 2px; height: 44px; min-width: 0; border-radius: 12px; pointer-events: auto; }

/* Top left: mark, canvas name, save state. */
:root[data-theme] #canvasWorkspace .topbar .top-left { padding: 0 6px 0 8px; }
:root[data-theme] #canvasWorkspace .topbar .brand-lockup { display: grid; width: 30px; height: 32px; margin-right: 2px; border-radius: 8px; }
:root[data-theme] #canvasWorkspace .topbar .brand-lockup .site-seal { width: 22px; height: 22px; }
:root[data-theme] #canvasWorkspace .topbar .project-control { height: 32px; padding: 0; gap: 0; border-radius: 8px; }
:root[data-theme] #canvasWorkspace .topbar .project-control:focus-within { border-color: transparent; }
:root[data-theme] #canvasWorkspace .topbar .project-name { width: auto; min-width: 72px; max-width: 260px; field-sizing: content; height: 32px; padding: 0 4px 0 8px; border: 0; border-radius: 8px; color: var(--t-text); background: transparent; font-size: 13.5px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .topbar .project-name:hover { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .topbar .project-name:focus { background: var(--t-field); outline: none; }
:root[data-theme] #canvasWorkspace .topbar .project-control .canvas-list-toggle { width: 28px; height: 32px; min-height: 32px; flex-basis: 28px; border: 0; border-radius: 8px; color: var(--t-text-3); background: transparent; }
:root[data-theme] #canvasWorkspace .topbar .project-control .canvas-list-toggle svg { width: 15px; height: 15px; }
:root[data-theme] #canvasWorkspace .topbar .project-control .canvas-list-toggle:is(:hover, [aria-expanded="true"]) { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .topbar .save-state { padding: 0 6px 0 6px; color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .topbar .save-state::before { width: 6px; height: 6px; flex-basis: 6px; margin-right: 6px; }

/* Centre: the three views, the current one underlined. */
:root[data-theme] #canvasWorkspace .topbar .workspace-view-switch { height: 44px; padding: 0 6px; gap: 2px; align-items: center; border-radius: 12px; }
:root[data-theme] #canvasWorkspace .topbar .workspace-view-switch button { position: relative; height: 32px; padding: 0 14px; border-radius: 8px; color: var(--t-text-3); background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
:root[data-theme] #canvasWorkspace .topbar .workspace-view-switch button:hover { color: var(--t-text); background: transparent; }
:root[data-theme] #canvasWorkspace .topbar .workspace-view-switch button.active { color: var(--t-text); background: transparent; box-shadow: none; font-weight: 500; }
:root[data-theme] #canvasWorkspace .topbar .workspace-view-switch button.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px; border-radius: 1px; background: var(--t-text); }

/* Top right: quiet icon buttons, the run as a ghost button, the account in ink. */
:root[data-theme] #canvasWorkspace .topbar .top-right { margin-left: auto; padding: 0 6px; }
:root[data-theme] #canvasWorkspace .topbar .command-trigger { width: 32px; height: 32px; margin: 0; padding: 0; justify-content: center; border-radius: 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .topbar .command-trigger :is(span, kbd) { display: none; }
:root[data-theme] #canvasWorkspace .topbar .command-trigger svg { color: currentColor; }
:root[data-theme] #canvasWorkspace .topbar .history-actions { height: 32px; margin: 0; padding: 0; gap: 2px; }
:root[data-theme] #canvasWorkspace .topbar .top-cluster :is(.command-trigger, .history-actions .icon-button, .top-actions > .icon-button) { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .topbar .top-cluster :is(.command-trigger, .history-actions .icon-button, .top-actions > .icon-button):hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .topbar .top-cluster :is(.command-trigger, .history-actions, .top-actions) svg { width: 16px; height: 16px; }
:root[data-theme] #canvasWorkspace .topbar .top-actions { gap: 2px; }
:root[data-theme] #canvasWorkspace .topbar .run-button { height: 32px; margin: 0 2px; padding: 0 12px 0 10px; gap: 6px; border-radius: 8px; color: var(--t-text-2); background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
:root[data-theme] #canvasWorkspace .topbar .run-button:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .topbar .run-button svg { width: 15px; height: 15px; fill: none; }
:root[data-theme] #canvasWorkspace .topbar .run-button.running { color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .topbar .run-button:disabled { color: var(--t-text-3); background: transparent; }
:root[data-theme] #canvasWorkspace .topbar .run-button.running:disabled { color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .topbar .top-actions > .text-button.primary { min-width: 0; height: 28px; min-height: 28px; margin-left: 4px; padding: 0 12px; border: 0; border-radius: 999px; color: var(--t-on-accent); background: var(--t-accent); font-size: 12.5px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .topbar .top-actions > .text-button.primary:hover { color: var(--t-on-accent); background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .topbar .top-theme-toggle svg { width: 16px; height: 16px; }
/* lucide "contrast" is a ring plus a half disc; fill the half so it reads as light / dark. */
:root[data-theme] #canvasWorkspace .topbar .top-theme-toggle svg path { fill: currentColor; }

/* Tools: a slim column on the left, vertically centred. */
:root[data-theme] #canvasWorkspace .tool-rail { left: 14px; top: 50%; bottom: auto; width: auto; height: auto; max-height: calc(100% - 180px); flex-direction: column; padding: 5px; gap: 2px; border-radius: 12px; transform: translateY(-50%); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button svg { width: 16px; height: 16px; }
:root[data-theme] #canvasWorkspace .tool-rail .tool-button:hover,
:root[data-theme] #canvasWorkspace .tool-rail .tool-button.active { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] #canvasWorkspace .tool-rail .add-node-button:hover { color: var(--t-on-accent); background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .tool-rail #canvasButton { position: relative; margin-top: 9px; }
:root[data-theme] #canvasWorkspace .tool-rail #canvasButton::before { content: ""; position: absolute; top: -6px; left: 6px; right: 6px; height: 1px; background: var(--t-line); }
:root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu { left: calc(100% + 10px); right: auto; top: auto; bottom: -5px; }
:root[data-theme] #canvasWorkspace .tool-more-menu .tool-button { width: 100%; height: 60px; flex: none; }

/* Zoom: bottom left, small. */
:root[data-theme] #canvasWorkspace .bottom-dock { left: 14px; bottom: 14px; height: 40px; padding: 0 4px; gap: 0; border-radius: 10px; }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .mini-map-toggle) { width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 7px; color: var(--t-text-2); background: transparent; }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .mini-map-toggle):hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .mini-map-toggle) svg { width: 16px; height: 16px; }
:root[data-theme] #canvasWorkspace .bottom-dock .zoom-readout { min-width: 46px; height: 28px; padding: 0; color: var(--t-text-2); background: transparent; font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .bottom-dock .dock-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .bottom-dock #filmStripToggle.active { color: var(--t-text); background: var(--t-hover); }

/* Tooltips: a small ink label, as in the prototype. */
:root[data-theme] .control-tooltip { padding: 5px 8px; border: 0; border-radius: 6px; color: var(--t-on-accent); background: var(--t-accent); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--t-shadow-md); font-size: 12px; }

/* Side panel opens beside the tool column, under the top plates. */
@media (min-width: 801px) {
  :root[data-theme] #canvasWorkspace .workspace-sidebar { left: 70px; top: 72px; bottom: 68px; border-radius: 14px; }
}

/* ---- Blue: selection, links, progress ---- */
:root[data-theme] #canvasWorkspace .canvas-node:is(.reference-node, .shot-node).selected,
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.selected:has(.node-screen.is-running),
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.expanded.selected { border-color: var(--t-sel); box-shadow: 0 0 0 1px var(--t-sel), var(--t-shadow-lg); }
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.connection-target { border-color: var(--t-sel); box-shadow: 0 0 0 3px var(--t-sel-soft), var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .edge-path.related { stroke: var(--t-sel); stroke-width: 1.5; }
:root[data-theme] #canvasWorkspace .edge-path.selected { stroke: var(--t-sel); stroke-width: 2; }
:root[data-theme] #canvasWorkspace .edge-preview { stroke: var(--t-sel); stroke-width: 1.5; stroke-dasharray: 4 4; }
:root[data-theme] #canvasWorkspace .edge-beam { stroke: var(--t-sel); }
:root[data-theme] .selection-box { border: 1px solid var(--t-sel); background: var(--t-sel-soft); }
:root[data-theme] #canvasWorkspace .port:hover { border-color: var(--t-sel); background: var(--t-sel); }
:root[data-theme] #canvasWorkspace .canvas-node.selected .resize-handle { border-color: var(--t-sel); }
:root[data-theme] :is(.shot-status, .project-shot-status).status-running { color: var(--t-sel); background: var(--t-sel-soft); }
:root[data-theme] .shot-cell.is-running { outline-color: var(--t-sel-line); }
:root[data-theme] #canvasWorkspace .film-frame.current { border-color: var(--t-sel); box-shadow: 0 0 0 1px var(--t-sel); }

/* ---- Narrow screens: keep the older behaviour where the plates no longer fit ---- */
@media (max-width: 1180px) {
  :root[data-theme] #canvasWorkspace .topbar .workspace-view-switch { position: static; order: 1; margin: 0 auto; transform: none; }
  :root[data-theme] #canvasWorkspace .topbar .top-right { order: 2; margin-left: 0; }
  :root[data-theme] #canvasWorkspace .topbar .project-name { max-width: 160px; }
  /* Only the dot; the full text stays in the tooltip. */
  :root[data-theme] #canvasWorkspace .topbar .save-state { width: 22px; max-width: 22px; padding: 0 0 0 8px; font-size: 0; }
}
@media (max-width: 800px) {
  :root[data-theme] #canvasWorkspace .topbar { left: 10px; right: 10px; top: 10px; }
  /* The tool column would cover too much of a phone canvas: it goes back to a bottom row. */
  :root[data-theme] #canvasWorkspace .tool-rail { left: 50%; top: auto; bottom: 10px; max-height: none; flex-direction: row; transform: translateX(-50%); }
  :root[data-theme] #canvasWorkspace .tool-rail #canvasButton { margin-top: 0; }
  :root[data-theme] #canvasWorkspace .tool-rail #canvasButton::before { content: none; }
  :root[data-theme] #canvasWorkspace .tool-rail .tool-more-menu { left: auto; right: 0; bottom: 52px; }
  :root[data-theme] #canvasWorkspace .bottom-dock { left: 10px; bottom: 66px; }
}
@media (max-width: 560px) {
  :root[data-theme] #canvasWorkspace .topbar .brand-lockup,
  :root[data-theme] #canvasWorkspace .topbar .history-actions,
  :root[data-theme] #canvasWorkspace .topbar .command-trigger,
  :root[data-theme] #canvasWorkspace .topbar .top-theme-toggle { display: none; }
  :root[data-theme] #canvasWorkspace .topbar .top-left { flex: 1 1 auto; }
  :root[data-theme] #canvasWorkspace .topbar .project-name { max-width: none; width: 100%; field-sizing: fixed; }
  :root[data-theme] #canvasWorkspace .topbar .run-button { width: 32px; padding: 0; justify-content: center; }
}
/* Touch: the small plates keep finger-sized targets. */
@media (pointer: coarse) {
  :root[data-theme] #canvasWorkspace .bottom-dock { height: 48px; }
  :root[data-theme] #canvasWorkspace .bottom-dock :is(.dock-button, .mini-map-toggle) { width: 40px; min-width: 40px; height: 40px; }
  :root[data-theme] #canvasWorkspace .bottom-dock .zoom-readout { height: 40px; }
  :root[data-theme] #canvasWorkspace .tool-rail .tool-button { width: 40px; height: 40px; flex-basis: 40px; }
  :root[data-theme] #canvasWorkspace .topbar .top-cluster { height: 48px; }
  :root[data-theme] #canvasWorkspace .topbar .top-cluster :is(.command-trigger, .history-actions .icon-button, .top-actions > .icon-button) { width: 40px; height: 40px; min-height: 40px; }
  :root[data-theme] #canvasWorkspace .topbar .project-control .canvas-list-toggle { width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; }
  :root[data-theme] #canvasWorkspace .topbar :is(.run-button, .project-name, .workspace-view-switch button) { height: 40px; }
  :root[data-theme] #canvasWorkspace .topbar .top-actions > .text-button.primary { height: 36px; min-height: 36px; }
}
@media (pointer: coarse) and (max-width: 560px) {
  :root[data-theme] #canvasWorkspace .topbar .run-button { width: 40px; }
}

/* ==========================================================================
   Lensmith v3, step 2 (2026-10-22): the node is its picture.
   Image, video and generator nodes show only the picture; their name floats
   above at a constant on-screen size. Prompt, settings and takes live in the
   detail panel on the right; pictures are made in the composer at the bottom.
   ========================================================================== */
/* Names above nodes: --far is 1 / zoom (capped), so the label keeps its screen size; --name-room (set in
   render.js) caps it at the free space above the node, so it never grows onto the node above. */
:root[data-theme] #canvasWorkspace .reference-node .node-label {
  --name-scale: min(var(--far, 1), var(--name-room, 3));
  position: absolute; left: 0; bottom: 100%; z-index: 2;
  display: flex; align-items: center; gap: 6px; width: calc(100% / var(--name-scale)); height: 26px; padding-bottom: 4px;
  transform: scale(var(--name-scale)); transform-origin: 0 100%; white-space: nowrap; pointer-events: none;
}
:root[data-theme] #canvasWorkspace .reference-node .node-label > * { order: 0; pointer-events: auto; }
:root[data-theme] #canvasWorkspace .reference-node .node-label > .node-close { order: 1; }
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-inline-title {
  flex: 0 1 auto; width: auto; min-width: 2ch; max-width: 100%; height: 22px; padding: 0 4px; margin-left: -4px;
  field-sizing: content; border: 0; border-radius: 5px; color: var(--t-text-2); background: transparent;
  font: 500 12px/22px var(--t-font); letter-spacing: 0; text-overflow: ellipsis;
}
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-inline-title:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-inline-title:focus { color: var(--t-text); background: var(--t-field); box-shadow: none; outline: none; }
:root[data-theme] #canvasWorkspace .reference-node.selected .node-label .node-inline-title { color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-kind { flex: none; padding: 0; border-radius: 0; color: var(--t-text-3); background: none; font: 400 12px/22px var(--t-font); letter-spacing: 0; }
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-kind[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .reference-node .node-label .node-close { display: none; flex: none; width: 20px; height: 20px; min-height: 20px; margin-left: 2px; padding: 0; border-radius: 5px; font-size: 14px; line-height: 1; }
:root[data-theme] #canvasWorkspace .reference-node.selected .node-label .node-close { display: grid; place-items: center; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .reference-node .node-label .node-inline-title { font-size: 12px; pointer-events: none; }
/* Inside an expanded shot the name has only the strip between the shot's head and the picture: it never
   grows past its own size there, and is left out when zoomed far out (the shot names its parts). */
:root[data-theme] #canvasWorkspace .reference-node.in-shot .node-label { width: 100%; transform: none; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .reference-node.in-shot .node-label { visibility: hidden; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .reference-node .node-label .node-close { display: none; }

/* Text, cards and the other nodes stay cards, without the coloured band and the head row. */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node:not(.picture-layout) { border-radius: 10px; background: var(--t-raised); }
:root[data-theme] #canvasWorkspace .reference-node:not(.picture-layout) .node-body { padding: 14px; }

/* Pictures: no card, no border; the picture itself carries the radius and the selection ring. */
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.picture-layout,
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.picture-layout:is(:hover, .selected, .related, .connection-target),
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.picture-layout.selected:has(.node-screen.is-running),
:root[data-theme] #canvasWorkspace .canvas-node.reference-node.picture-layout:has(.node-screen.is-running) {
  min-height: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
}
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-body { height: 100%; padding: 0; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; max-height: none; margin: 0;
  overflow: hidden; border-radius: 10px; background: var(--t-screen); box-shadow: var(--t-shadow-md);
  outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color var(--t-dur) var(--t-ease);
}
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: none; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout.selected .node-screen { outline-color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout.connection-target .node-screen { outline-color: var(--t-sel); box-shadow: 0 0 0 6px var(--t-sel-soft), var(--t-shadow-md); }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-caption { padding: 0 12px; color: var(--t-text-3); font-size: 12px; letter-spacing: 0; text-align: center; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen.is-running .node-screen-caption { color: var(--t-text-2); font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen.is-running .node-screen-caption::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--t-sel); vertical-align: 1px; animation: t-blink 1.2s ease-in-out infinite; }
@keyframes t-blink { 50% { opacity: .25; } }
/* Running: a thin blue line travels along the bottom (real progress comes with step 4). */
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-progress { position: absolute; left: 0; bottom: 0; width: 32%; height: 2px; background: var(--t-sel); animation: t-progress 1.6s var(--t-ease) infinite; }
@keyframes t-progress { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout :is(.node-screen-badge, .node-stale, .node-screen-note) {
  position: absolute; margin: 0; padding: 2px 8px; border: 0; border-radius: 999px; color: #f4f4f5; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: auto;
}
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-badge { right: 8px; bottom: 8px; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-stale { left: 8px; top: 8px; color: #ffd48a; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-note { left: 8px; bottom: 8px; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-note.is-error { color: #ffb3a8; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-media-upload { width: calc(100% - 16px); height: calc(100% - 16px); min-height: 0; border: 1px dashed var(--t-line-strong); border-radius: 8px; color: var(--t-text-3); background: transparent; font-size: 12px; }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-media-upload:hover { border-color: var(--t-sel-line); color: var(--t-text); background: var(--t-sel-soft); }
:root[data-theme] #canvasWorkspace .reference-node.picture-layout .resize-handle { right: -4px; bottom: -4px; }

/* ---- Composer: the one place where pictures are made ---- */
:root[data-theme] #canvasWorkspace .composer {
  position: absolute; left: 50%; bottom: 14px; z-index: 12; width: min(640px, calc(100vw - 2 * (var(--dock-r, 220px) + 16px)));
  padding: 8px 8px 8px 14px; border: 1px solid var(--t-line); border-radius: 16px;
  background: var(--t-glass); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--t-shadow-md);
  transform: translateX(-50%); transition: border-color var(--t-dur) var(--t-ease), left .28s var(--t-ease), width .28s var(--t-ease);
}
:root[data-theme] #canvasWorkspace .composer[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .composer:focus-within { border-color: var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .composer-refs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px -6px; }
:root[data-theme] #canvasWorkspace .composer-refs:empty { display: none; }
:root[data-theme] #canvasWorkspace .composer-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; height: 32px; padding: 0 2px 0 4px; border-radius: 8px; color: var(--t-text-2); background: var(--t-hover); font-size: 12px; }
:root[data-theme] #canvasWorkspace .composer-ref > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] #canvasWorkspace .composer-ref i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; color: var(--t-text-3); background: var(--t-field) center / cover no-repeat; font-size: 11px; font-style: normal; }
:root[data-theme] #canvasWorkspace .composer-ref button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 5px; color: var(--t-text-3); background: transparent; font-size: 14px; }
:root[data-theme] #canvasWorkspace .composer-ref button:hover { color: var(--t-text); background: var(--t-field); }
:root[data-theme] #canvasWorkspace .composer textarea {
  display: block; width: 100%; min-height: 40px; max-height: 160px; margin: 2px 0 6px; padding: 4px 0; resize: none;
  border: 0; outline: none; color: var(--t-text); background: transparent; box-shadow: none; font: 14px/1.6 var(--t-font);
}
:root[data-theme] #canvasWorkspace .composer textarea::placeholder { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .composer-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
:root[data-theme] #canvasWorkspace .composer-modes { display: flex; flex: none; padding: 2px; border-radius: 9px; background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .composer-modes button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--t-text-3); background: transparent; font-size: 12.5px; font-weight: 500; }
:root[data-theme] #canvasWorkspace .composer-modes button.active { color: var(--t-text); background: var(--t-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="screening"] #canvasWorkspace .composer-modes button.active { background: #2a2a2e; }
:root[data-theme] #canvasWorkspace .composer-pill { display: inline-flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; height: 30px; padding: 0 6px 0 8px; border: 0; border-radius: 8px; color: var(--t-text-2); background: transparent; font: 12.5px var(--t-font); white-space: nowrap; cursor: pointer; }
:root[data-theme] #canvasWorkspace .composer-pill:hover, :root[data-theme] #canvasWorkspace .composer-pill[aria-expanded="true"] { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] #canvasWorkspace #composerModel { max-width: 150px; }
/* On a narrow screen only the model name gives way; ratio and count stay whole. */
:root[data-theme] #canvasWorkspace :is(#composerRatio, #composerExtra) { flex: none; }
:root[data-theme] .picker-button .picker-value { overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] .picker-chevron { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
:root[data-theme] #canvasWorkspace .detail-picker { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; cursor: pointer; }
:root[data-theme] #canvasWorkspace .detail-picker[aria-expanded="true"] { border-color: var(--t-line-strong); }
/* The picker's menu: drawn in the theme, above the composer or below a field, always on screen. */
:root[data-theme] .picker {
  position: fixed; z-index: 80; display: flex; flex-direction: column; min-width: 200px; max-width: min(320px, calc(100vw - 16px));
  padding: 4px; border: 1px solid var(--t-line); border-radius: 12px; color: var(--t-text);
  background: var(--t-glass-solid); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--t-shadow-md); font: 12.5px var(--t-font);
}
:root[data-theme] .picker-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
:root[data-theme] .picker-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; outline: none; color: var(--t-text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
:root[data-theme] .picker-option:is(:hover, :focus-visible) { background: var(--t-hover); }
:root[data-theme] .picker-option[aria-selected="true"] { color: var(--t-sel); font-weight: 500; }
:root[data-theme] .picker-frame { display: grid; place-items: center; flex: none; width: 18px; height: 18px; }
:root[data-theme] .picker-option[aria-selected="true"] .picker-frame::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
:root[data-theme] .picker-option[aria-selected="true"] .picker-frame:has(.picker-shape)::before { content: none; }
:root[data-theme] .picker-shape { display: block; border: 1.5px solid currentColor; border-radius: 2px; opacity: .7; }
:root[data-theme] .picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .picker-option small { flex: none; color: var(--t-text-3); font-size: 11.5px; font-weight: 400; }
:root[data-theme] .picker-search, :root[data-theme] .picker-custom input { flex: none; width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; outline: none; color: var(--t-text); background: var(--t-field); font: inherit; }
:root[data-theme] .picker-search { margin-bottom: 4px; }
:root[data-theme] :is(.picker-search, .picker-custom input):focus { border-color: var(--t-line-strong); }
:root[data-theme] .picker-search[hidden], :root[data-theme] .picker-status[hidden] { display: none; }
:root[data-theme] .picker-status { flex: none; margin: 0; padding: 6px 8px; color: var(--t-text-3); font-size: 12px; line-height: 1.5; }
:root[data-theme] .picker-link { padding: 0; border: 0; color: var(--t-sel); background: none; font: inherit; cursor: pointer; }
:root[data-theme] .picker-custom input { flex: 1; width: auto; }
:root[data-theme] .picker-custom { display: flex; flex: none; gap: 4px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--t-line); }
:root[data-theme] .picker-custom button { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--t-text); background: var(--t-hover); font: inherit; cursor: pointer; }
:root[data-theme] #canvasWorkspace .composer-hint { margin-left: auto; overflow: hidden; color: var(--t-text-3); font-size: 12px; white-space: nowrap; }
:root[data-theme] #canvasWorkspace .composer-hint kbd { padding: 0 5px; border: 1px solid var(--t-line-strong); border-radius: 4px; font: inherit; font-size: 10.5px; line-height: 16px; }
:root[data-theme] #canvasWorkspace .composer-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: var(--t-on-accent); background: var(--t-accent); transition: transform var(--t-dur) var(--t-ease), opacity var(--t-dur); }
:root[data-theme] #canvasWorkspace .composer-send:hover:not(:disabled) { transform: scale(1.06); }
:root[data-theme] #canvasWorkspace .composer-send:disabled { opacity: .25; cursor: default; }
:root[data-theme] #canvasWorkspace .composer-send svg { width: 17px; height: 17px; stroke-width: 2.2; }
/* The film strip rises above the composer. */
:root[data-theme] #canvasWorkspace:has(.composer:not([hidden])) .film-strip { bottom: calc(var(--composer-h, 110px) + 26px); }

/* ---- Detail panel: one picture's prompt, settings and takes ---- */
:root[data-theme] #canvasWorkspace .detail-panel {
  position: absolute; right: 14px; top: 72px; bottom: 14px; z-index: 12; width: 320px;
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--t-line); border-radius: 14px;
  background: var(--t-glass); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--t-shadow-md);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .28s var(--t-ease), visibility 0s linear .28s;
}
:root[data-theme] #canvasWorkspace .detail-panel.open { transform: none; visibility: visible; transition: transform .28s var(--t-ease), visibility 0s; }
:root[data-theme] #canvasWorkspace .detail-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 16px; }
:root[data-theme] #canvasWorkspace .detail-head h3 { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--t-text); font-size: 14px; font-weight: 600; white-space: nowrap; }
:root[data-theme] #canvasWorkspace .detail-head h3 > span { overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] #canvasWorkspace .detail-head small { flex: none; color: var(--t-text-3); font-size: 12px; font-weight: 400; }
:root[data-theme] #canvasWorkspace .detail-head small[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .detail-head .icon-button { width: 32px; height: 32px; min-height: 32px; border-radius: 8px; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .detail-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
:root[data-theme] #canvasWorkspace .detail-preview { position: relative; display: grid; place-items: center; max-height: 320px; overflow: hidden; border-radius: 8px; color: var(--t-text-3); background: var(--t-screen); font-size: 12px; }
:root[data-theme] #canvasWorkspace .detail-preview :is(img, video) { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }
:root[data-theme] #canvasWorkspace .detail-takes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
:root[data-theme] #canvasWorkspace .detail-take { position: relative; width: 52px; height: 36px; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: var(--t-field); box-shadow: inset 0 0 0 1px var(--t-line); }
:root[data-theme] #canvasWorkspace .detail-take :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme] #canvasWorkspace .detail-take span { position: absolute; right: 3px; bottom: 1px; color: #fff; font-size: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
:root[data-theme] #canvasWorkspace .detail-take.active { box-shadow: 0 0 0 1.5px var(--t-sel); }
:root[data-theme] #canvasWorkspace .detail-status { margin: 10px 0 0; color: var(--t-text-3); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
:root[data-theme] #canvasWorkspace .detail-status.is-running { color: var(--t-sel); font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .detail-status.is-error { color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .detail-status.detail-stale { color: var(--t-warn); }
:root[data-theme] #canvasWorkspace .detail-meta { margin: 8px 0 0; color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .detail-section { margin-top: 18px; }
:root[data-theme] #canvasWorkspace .detail-section h4 { margin: 0 0 8px; color: var(--t-text-3); font-size: 12px; font-weight: 500; }
:root[data-theme] #canvasWorkspace .detail-prompt { display: block; width: 100%; min-height: 96px; padding: 10px 12px; resize: vertical; border: 1px solid transparent; border-radius: 8px; outline: none; color: var(--t-text); background: var(--t-field); font: 13px/1.65 var(--t-font); transition: border-color var(--t-dur), background var(--t-dur); }
:root[data-theme] #canvasWorkspace .detail-prompt:focus { border-color: var(--t-line-strong); background: transparent; }
:root[data-theme] #canvasWorkspace .detail-section .node-restore-auto { margin-top: 6px; padding: 0; border: 0; color: var(--t-text-2); background: none; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] #canvasWorkspace .detail-revised { margin-top: 8px; color: var(--t-text-3); font-size: 12px; }
:root[data-theme] #canvasWorkspace .detail-revised p { margin: 6px 0 0; color: var(--t-text-2); line-height: 1.6; }
:root[data-theme] #canvasWorkspace .detail-kv { display: grid; grid-template-columns: 56px 1fr; align-items: center; row-gap: 6px; margin: 0; font-size: 12.5px; }
:root[data-theme] #canvasWorkspace .detail-kv dt { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .detail-kv dd { min-width: 0; margin: 0; }
:root[data-theme] #canvasWorkspace .detail-field { width: 100%; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; outline: none; color: var(--t-text); background: var(--t-field); font: 12.5px var(--t-font); }
:root[data-theme] #canvasWorkspace .detail-field:focus { border-color: var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .detail-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--t-field); }
:root[data-theme] #canvasWorkspace .detail-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; color: var(--t-text-3); background: transparent; font-size: 12.5px; }
:root[data-theme] #canvasWorkspace .detail-seg button.active { color: var(--t-text); background: var(--t-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="screening"] #canvasWorkspace .detail-seg button.active { background: #2a2a2e; }
:root[data-theme] #canvasWorkspace .detail-refs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--t-text-3); font-size: 12.5px; }
:root[data-theme] #canvasWorkspace .detail-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 8px 0 3px; border: 0; border-radius: 8px; color: var(--t-text-2); background: var(--t-field); font-size: 12px; }
:root[data-theme] #canvasWorkspace .detail-ref:hover { color: var(--t-text); }
:root[data-theme] #canvasWorkspace .detail-ref i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; color: var(--t-text-3); background: var(--t-screen) center / cover no-repeat; font-size: 11px; font-style: normal; }
:root[data-theme] #canvasWorkspace .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
:root[data-theme] #canvasWorkspace .detail-action { height: 34px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--t-text); background: var(--t-field); font-size: 12.5px; font-weight: 500; }
:root[data-theme] #canvasWorkspace .detail-action:hover { background: var(--t-hover); box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .detail-action.active { color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .detail-foot { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--t-line); }
:root[data-theme] #canvasWorkspace .detail-foot[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .detail-button { flex: 1; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 600; }
:root[data-theme] #canvasWorkspace .detail-button.primary { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] #canvasWorkspace .detail-button.primary:hover:not(:disabled) { background: var(--t-fill-hover); }
:root[data-theme] #canvasWorkspace .detail-button.secondary { color: var(--t-text); background: transparent; box-shadow: inset 0 0 0 1px var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .detail-button.secondary:hover:not(:disabled) { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .detail-button:disabled { opacity: .4; cursor: default; }

/* Wide: with the detail panel open, the composer centres between the zoom plate and the panel.
   Medium: the composer takes the row right of the zoom plate, and the panel stops above it.
   (--dock-r is the zoom plate's right edge, --composer-h the composer's height; composer.js sets both.) */
@media (min-width: 1181px) {
  :root[data-theme] #canvasWorkspace:has(.detail-panel.open) .composer { left: calc((var(--dock-r, 220px) + 16px + 100vw - 350px) / 2); width: min(640px, calc(100vw - 366px - var(--dock-r, 220px))); }
}
@media (min-width: 801px) and (max-width: 1180px) {
  :root[data-theme] #canvasWorkspace .composer { left: calc(var(--dock-r, 220px) + 16px); right: 14px; width: auto; transform: none; }
  :root[data-theme] #canvasWorkspace .detail-panel { bottom: calc(var(--composer-h, 110px) + 28px); }
}
/* Phones: the composer sits above the tool row, the zoom plate moves up under the top bar, and the
   detail panel becomes a sheet over the bottom of the screen (the composer steps aside for it). */
@media (max-width: 800px) {
  :root[data-theme] #canvasWorkspace .composer { left: 10px; right: 10px; bottom: 64px; width: auto; min-width: 0; transform: none; }
  :root[data-theme] #canvasWorkspace .composer-hint { display: none; }
  :root[data-theme] #canvasWorkspace .composer-row { gap: 4px; }
  :root[data-theme] #canvasWorkspace .composer-send { margin-left: auto; }
  :root[data-theme] #canvasWorkspace .bottom-dock { top: 62px; bottom: auto; }
  :root[data-theme] #canvasWorkspace .detail-panel { left: 10px; right: 10px; top: auto; bottom: 64px; width: auto; max-height: 62%; transform: translateY(calc(100% + 80px)); }
  :root[data-theme] #canvasWorkspace .detail-panel.open { transform: none; }
  :root[data-theme] #canvasWorkspace .detail-preview { max-height: 180px; }
  :root[data-theme] #canvasWorkspace .detail-preview :is(img, video) { max-height: 180px; }
  :root[data-theme] #canvasWorkspace:has(.detail-panel.open) .composer { display: none; }
}
@media (pointer: coarse) {
  :root[data-theme] #canvasWorkspace .composer-modes button { height: 36px; padding: 0 14px; }
  :root[data-theme] #canvasWorkspace .composer-pill { height: 40px; }
  :root[data-theme] .picker-option { min-height: 40px; }
  :root[data-theme] :is(.picker-search, .picker-custom input, .picker-custom button) { height: 40px; }
  :root[data-theme] #canvasWorkspace .composer-send { width: 40px; height: 40px; }
  :root[data-theme] #canvasWorkspace .composer-ref { height: 40px; }
  :root[data-theme] #canvasWorkspace .composer-ref button { width: 36px; height: 36px; }
  :root[data-theme] #canvasWorkspace .detail-ref { height: 36px; }
  :root[data-theme] #canvasWorkspace .detail-head .icon-button { width: 40px; height: 40px; min-height: 40px; }
  :root[data-theme] #canvasWorkspace .detail-field { height: 40px; }
  :root[data-theme] #canvasWorkspace .detail-seg button { height: 36px; }
  :root[data-theme] #canvasWorkspace .detail-button, :root[data-theme] #canvasWorkspace .detail-action { height: 44px; }
}
@media (pointer: coarse) and (max-width: 800px) {
  :root[data-theme] #canvasWorkspace .composer, :root[data-theme] #canvasWorkspace .detail-panel { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] #canvasWorkspace .reference-node.picture-layout .node-screen-progress { animation: none; width: 100%; opacity: .5; }
}

/* ==========================================================================
   Lensmith v3, step 3 (2026-10-22): the shot is a frame.
   A quiet tray holding the shot's keyframe and video; its number, title, terms
   and status float above it, like the names of pictures. The size is unchanged
   (production.js LAYOUT), so room-making and saved layouts stay as they were.
   ========================================================================== */
:root[data-theme] #canvasWorkspace .canvas-node.shot-node,
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.expanded {
  gap: 10px; padding: 12px; overflow: visible;
  border: 1px solid var(--t-line); border-radius: 12px;
  background: color-mix(in srgb, var(--t-text) 2.2%, transparent); box-shadow: none;
}
:root[data-theme] #canvasWorkspace .canvas-node.shot-node:hover { border-color: var(--t-line-strong); }
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.selected,
:root[data-theme] #canvasWorkspace .canvas-node.shot-node.expanded.selected { border-color: var(--t-sel); box-shadow: 0 0 0 .5px var(--t-sel); }
/* The head floats above the frame (26px, the same strip the names of pictures take). */
:root[data-theme] #canvasWorkspace .shot-node .shot-head {
  position: absolute; left: 0; bottom: 100%; width: 100%; height: 26px; min-height: 0; padding: 0 0 4px; gap: 8px; justify-content: flex-start;
  border: 0; background: none; white-space: nowrap;
}
:root[data-theme] #canvasWorkspace .shot-node .shot-number { flex: none; color: var(--t-text-3); font: 500 12px/22px var(--t-font); font-variant-numeric: tabular-nums; }
:root[data-theme] #canvasWorkspace .shot-node .shot-head .node-inline-title {
  flex: 0 1 auto; width: auto; min-width: 2ch; height: 22px; padding: 0 4px; margin-left: -4px;
  field-sizing: content; border: 0; border-radius: 5px; color: var(--t-text); font: 600 13px/22px var(--t-font); text-overflow: ellipsis;
}
:root[data-theme] #canvasWorkspace .shot-node .shot-head .node-inline-title:hover { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .shot-node .shot-head .node-inline-title:focus { border: 0; background: var(--t-field); }
:root[data-theme] #canvasWorkspace .shot-node.selected .shot-head .node-inline-title { color: var(--t-sel); }
:root[data-theme] #canvasWorkspace .shot-node .shot-terms { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--t-text-3); font: 400 12px/22px var(--t-font); text-overflow: ellipsis; }
:root[data-theme] #canvasWorkspace .shot-node .shot-head .shot-status { flex: none; padding: 1px 7px; font-size: 11px; line-height: 1.45; }
:root[data-theme] #canvasWorkspace .shot-node .shot-head .node-close { display: none; flex: none; width: 20px; height: 20px; min-height: 20px; margin-left: auto; padding: 0; border-radius: 5px; font-size: 14px; line-height: 1; }
:root[data-theme] #canvasWorkspace .shot-node.selected .shot-head .node-close { display: grid; place-items: center; }
/* In the tray: keyframe and video, the picture's words, the line, who is in it. */
:root[data-theme] #canvasWorkspace .shot-node .shot-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
:root[data-theme] #canvasWorkspace .shot-node .shot-cell { aspect-ratio: 16 / 9; border-radius: 8px; background: var(--t-screen, var(--t-field)); }
:root[data-theme] #canvasWorkspace .shot-node .shot-cell.is-empty { border: 1px dashed var(--t-line-strong); background: transparent; }
:root[data-theme] #canvasWorkspace .shot-node .shot-cell.is-empty figcaption { color: var(--t-text-3); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme] #canvasWorkspace .shot-node .shot-cell figcaption { left: 6px; bottom: 6px; padding: 0 6px; color: #f4f4f5; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-theme] #canvasWorkspace .shot-node :is(.shot-description, .shot-line, .shot-cast) { padding: 0; }
:root[data-theme] #canvasWorkspace .shot-node .shot-description { color: var(--t-text); font-size: 12.5px; line-height: 1.55; }
:root[data-theme] #canvasWorkspace .shot-node .shot-line { color: var(--t-text-2); font-size: 12.5px; }
:root[data-theme] #canvasWorkspace .shot-node .shot-speaker { color: var(--t-text-3); }
:root[data-theme] #canvasWorkspace .shot-node .shot-voice { margin-left: 8px; color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] #canvasWorkspace .shot-node .shot-voice.is-error { color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .shot-node .shot-cast-chip { padding: 0 7px; color: var(--t-text-3); background: var(--t-field); font-size: 11px; line-height: 1.6; }
:root[data-theme] #canvasWorkspace .shot-node .node-stale { margin: 0; }
/* Zoomed far out the head goes back inside the frame: above it, its larger letters would reach the row above. */
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) { padding: 0; gap: 0; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-head { position: static; width: auto; height: auto; min-height: 44px; padding: calc(6px * var(--far)) 12px; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-head .node-inline-title { height: auto; font-size: min(calc(14px * var(--far)), 40px); line-height: 1.2; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-number { line-height: 1.2; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node .shot-terms { display: none; }
/* In an expanded shot the head has the 72 canvas units above the pictures (LAYOUT.child): far out it grows
   only as far as fits there, so it never runs into them (at most ~55 units: 34px text, 7px padding). */
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node.expanded .shot-head { min-height: 0; padding: min(calc(6px * var(--far)), 7px) 12px; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node.expanded .shot-head .node-inline-title { font-size: min(calc(14px * var(--far)), 34px); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node.expanded :is(.shot-number, .shot-status) { font-size: min(calc(12px * var(--far)), 28px); }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-strip { padding: 0 12px 12px; }
:root[data-theme] #canvasWorkspace #viewport.far-zoom .shot-node:not(.expanded) .shot-cell { aspect-ratio: auto; }

/* ==========================================================================
   Lensmith v3, step 4 (2026-10-22): the context bar.
   Floats above the selection with the usual next steps (js/contextbar.js);
   the node itself carries no buttons.
   ========================================================================== */
:root[data-theme] #canvasWorkspace .context-bar {
  position: absolute; z-index: 13; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px;
  border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-glass-solid); box-shadow: var(--t-shadow-lg);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  transform: translate(-50%, -100%); white-space: nowrap; animation: t-ctx-pop .16s var(--t-ease);
}
:root[data-theme] #canvasWorkspace .context-bar[hidden] { display: none; }
:root[data-theme] #canvasWorkspace .context-bar.below { transform: translate(-50%, 0); animation-name: t-ctx-pop-below; }
@keyframes t-ctx-pop { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); } }
@keyframes t-ctx-pop-below { from { opacity: 0; transform: translate(-50%, -4px); } }
:root[data-theme] #canvasWorkspace .context-bar button {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 7px; color: var(--t-text); background: transparent; box-shadow: none;
  font: 500 12.5px/1 var(--t-font); letter-spacing: 0; cursor: pointer;
}
:root[data-theme] #canvasWorkspace .context-bar button:hover:not(:disabled) { background: var(--t-hover); }
:root[data-theme] #canvasWorkspace .context-bar button:disabled { color: var(--t-text-3); cursor: default; }
:root[data-theme] #canvasWorkspace .context-bar button:focus-visible { outline: 2px solid var(--t-sel-line, var(--t-sel)); outline-offset: -2px; }
:root[data-theme] #canvasWorkspace .context-bar svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--t-text-2); }
:root[data-theme] #canvasWorkspace .context-bar button.primary { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] #canvasWorkspace .context-bar button.primary svg { color: currentColor; }
:root[data-theme] #canvasWorkspace .context-bar button.primary:hover:not(:disabled) { background: var(--t-fill-hover, var(--t-accent)); }
:root[data-theme] #canvasWorkspace .context-bar button.primary:disabled { color: var(--t-text-3); background: var(--t-field); }
:root[data-theme] #canvasWorkspace .context-bar .context-icon { width: 32px; padding: 0; justify-content: center; }
:root[data-theme] #canvasWorkspace .context-bar .context-delete:hover:not(:disabled) svg { color: var(--t-danger); }
:root[data-theme] #canvasWorkspace .context-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--t-line-strong); }
@media (pointer: coarse) {
  :root[data-theme] #canvasWorkspace .context-bar { height: 46px; }
  :root[data-theme] #canvasWorkspace .context-bar button { height: 38px; min-height: 38px; }
  :root[data-theme] #canvasWorkspace .context-bar .context-icon { width: 38px; }
}

/* ---------- Lensmith v3: the cut view ----------
 * The cut is watched, not filled in: a player in the middle, the episode along one timeline below.
 * A shot without video keeps its place as a dashed slot; a selected clip's actions take the timeline's
 * header; export settings wait in the sheet under 合成成片 in the top bar (design/lensmith-cut.html).
 */
:root[data-theme] .storyboard-workspace.cut-view > .storyboard-topbar { display: none; }
:root[data-theme] .storyboard-editing.cut-view { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0 14px 14px; overflow: hidden; color: var(--t-text); background: var(--t-bg); font: 13px/1.5 var(--t-font); }
:root[data-theme] .storyboard-editing.cut-view[hidden] { display: none; }
:root[data-theme] .cut-view button { font: inherit; }
:root[data-theme] .cut-view :is(svg.lucide, .cut-play svg) { flex: none; }
/* 合成成片: shown in the top bar on the cut view only, in place of 运行流程. */
:root[data-theme] #canvasWorkspace #cutRender { display: none; }
:root[data-theme] #canvasWorkspace.cut-view #cutRender { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 104px; height: 34px; padding: 0 16px; overflow: hidden; border: 0; border-radius: 9px; color: var(--t-on-accent); background: var(--t-accent); font: 600 13px/1 var(--t-font); cursor: pointer; }
:root[data-theme] #canvasWorkspace.cut-view #cutRender:hover:not(:disabled) { background: var(--t-accent-hover, var(--t-accent)); }
:root[data-theme] #canvasWorkspace.cut-view #cutRender:disabled { opacity: .35; cursor: default; }
:root[data-theme] #canvasWorkspace.cut-view #cutRender.busy { color: var(--t-text); background: var(--t-hover); cursor: default; opacity: 1; }
:root[data-theme] #canvasWorkspace.cut-view #cutRender.busy::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; background: var(--t-sel); animation: t-cut-busy 1.2s ease-in-out infinite; }
@keyframes t-cut-busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
:root[data-theme] #canvasWorkspace.cut-view #runWorkflowButton { display: none; }

/* Episode and its numbers. */
:root[data-theme] .cut-episode { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; }
:root[data-theme] .cut-episode-button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: 8px; color: var(--t-text); background: transparent; font-weight: 600; cursor: pointer; }
:root[data-theme] .cut-episode-button:hover { background: var(--t-hover); }
:root[data-theme] .cut-episode-button svg { width: 13px; height: 13px; color: var(--t-text-3); }
:root[data-theme] .cut-meta { color: var(--t-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-theme] .cut-status { margin-left: auto; overflow: hidden; color: var(--t-text-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* Player. */
:root[data-theme] .cut-player { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
:root[data-theme] .cut-screen { position: relative; flex: none; overflow: hidden; border-radius: 12px; background: #0e0e10; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
:root[data-theme] .cut-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
:root[data-theme] .cut-screen video[hidden] { display: none; }
:root[data-theme] .cut-subtitle { position: absolute; left: 50%; bottom: 7%; max-width: 80%; padding: 3px 10px; border-radius: 4px; transform: translateX(-50%); color: #fff; background: rgba(0, 0, 0, .35); font-size: 15px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); pointer-events: none; }
:root[data-theme] .cut-subtitle:empty { display: none; }
:root[data-theme] .cut-screen-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; color: rgba(255, 255, 255, .62); text-align: center; }
:root[data-theme] .cut-screen-empty[hidden] { display: none; }
:root[data-theme] .cut-screen-empty strong { color: #fff; font-size: 15px; font-weight: 600; }
:root[data-theme] .cut-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
/* The player's controls lie over the bottom of the picture, on a soft scrim: always there while paused,
 * fading out while playing once the pointer rests. Subtitles step up while the bar shows. */
:root[data-theme] .cut-controls { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 28px 14px 10px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62)); transition: opacity .25s var(--t-ease); }
:root[data-theme] .cut-screen.empty .cut-controls { display: none; }
:root[data-theme] .cut-screen.playing.idle .cut-controls { opacity: 0; }
:root[data-theme] .cut-screen.playing.idle { cursor: none; }
:root[data-theme] .cut-screen:not(.playing.idle) .cut-subtitle { bottom: calc(7% + 34px); }
:root[data-theme] .cut-screen video { cursor: pointer; }
:root[data-theme] .cut-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: rgba(255, 255, 255, .78); background: transparent; cursor: pointer; }
:root[data-theme] .cut-icon:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .14); }
:root[data-theme] .cut-icon svg { width: 16px; height: 16px; }
:root[data-theme] .cut-play { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: #0c0c0d; background: #fff; cursor: pointer; }
:root[data-theme] .cut-play:hover { transform: scale(1.06); }
:root[data-theme] .cut-play svg { width: 14px; height: 14px; fill: currentColor; }
:root[data-theme] .cut-controls :disabled { opacity: .35; cursor: default; }
:root[data-theme] .cut-buttons { display: flex; align-items: center; gap: 6px; }
:root[data-theme] .cut-clock { justify-self: start; color: rgba(255, 255, 255, .7); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-theme] .cut-clock b, :root[data-theme] .cut-now b { color: #fff; font-weight: 500; }
:root[data-theme] .cut-now { justify-self: end; max-width: 100%; overflow: hidden; color: rgba(255, 255, 255, .7); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 800px) {
  :root[data-theme] .cut-controls { padding: 22px 6px 6px; }
  :root[data-theme] .cut-now { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .cut-controls { transition: none; }
}
:root[data-theme] .cut-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; font-weight: 600; white-space: nowrap; cursor: pointer; }
:root[data-theme] .cut-btn.primary { color: var(--t-on-accent); background: var(--t-accent); }
:root[data-theme] .cut-btn.primary:hover { opacity: .9; }
:root[data-theme] .cut-btn.wide { width: 100%; height: 36px; }
:root[data-theme] .cut-screen-empty .cut-btn.primary { color: #0c0c0d; background: #f2f2f3; }
:root[data-theme] .cut-screen-empty .cut-btn.secondary { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* Timeline. */
:root[data-theme] .cut-timeline { flex: none; display: flex; flex-direction: column; height: 236px; padding: 0 14px 10px; border: 1px solid var(--t-line); border-radius: 14px; background: var(--t-glass-solid); box-shadow: var(--t-shadow-md); }
:root[data-theme] .cut-tl-head { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; min-width: 0; }
:root[data-theme] .cut-tl-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
:root[data-theme] .cut-tl-title h2 { margin: 0; font-size: 13px; font-weight: 600; }
:root[data-theme] .cut-tl-title span { overflow: hidden; color: var(--t-text-3); font-size: 12px; text-overflow: ellipsis; }
:root[data-theme] .cut-tl-head.has-selection .cut-tl-title { display: none; }
:root[data-theme] .cut-actions { display: none; align-items: center; gap: 2px; min-width: 0; margin-left: -8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
:root[data-theme] .cut-tl-head.has-selection .cut-actions { display: flex; animation: t-cut-fade .16s var(--t-ease); }
@keyframes t-cut-fade { from { opacity: 0; transform: translateY(2px); } }
:root[data-theme] .cut-what { padding: 0 10px 0 8px; font-weight: 600; }
:root[data-theme] .cut-actions button { display: flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--t-text); background: transparent; font-size: 12.5px; font-weight: 500; cursor: pointer; }
:root[data-theme] .cut-actions button:hover:not(:disabled) { background: var(--t-hover); }
:root[data-theme] .cut-actions button:disabled { color: var(--t-text-3); cursor: default; }
:root[data-theme] .cut-actions svg { width: 15px; height: 15px; color: var(--t-text-2); }
:root[data-theme] .cut-actions [data-cut="out"]:hover svg { color: var(--t-danger); }
:root[data-theme] .cut-sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--t-line-strong); }
:root[data-theme] .cut-val { flex: none; padding: 0 6px; color: var(--t-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-theme] .cut-tl-right { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
:root[data-theme] .cut-chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--t-text-2); background: transparent; font-size: 12px; cursor: pointer; }
:root[data-theme] .cut-chip[hidden] { display: none; }
:root[data-theme] .cut-chip:hover { color: var(--t-text); background: var(--t-hover); }
:root[data-theme] .cut-chip svg { width: 13px; height: 13px; }
:root[data-theme] .cut-tl-body { position: relative; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; }
:root[data-theme] .cut-lanes { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 22px 76px 30px 30px; column-gap: 4px; row-gap: 6px; }
:root[data-theme] .cut-lane-name { display: flex; align-items: center; color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] .cut-lane { position: relative; }
:root[data-theme] .cut-ruler { position: relative; color: var(--t-text-3); font-size: 11px; font-variant-numeric: tabular-nums; cursor: ew-resize; }
:root[data-theme] .cut-ruler span { position: absolute; top: 2px; padding-left: 4px; border-left: 1px solid var(--t-line-strong); line-height: 16px; white-space: nowrap; pointer-events: none; }
:root[data-theme] .cut-clip { position: absolute; top: 0; height: 76px; overflow: hidden; border-radius: 8px; background: #111; cursor: grab; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: left .22s var(--t-ease), width .22s var(--t-ease); touch-action: none; }
:root[data-theme] .cut-tiles { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; }
:root[data-theme] .cut-tiles video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
:root[data-theme] .cut-tiles::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 45%, transparent 60%, rgba(0, 0, 0, .5)); }
:root[data-theme] .cut-cap { position: absolute; left: 8px; right: 8px; top: 6px; overflow: hidden; color: #fff; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); pointer-events: none; }
:root[data-theme] :is(.cut-len, .cut-trimmed) { position: absolute; bottom: 5px; color: rgba(255, 255, 255, .85); font-size: 11px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }
:root[data-theme] .cut-len { right: 8px; }
:root[data-theme] .cut-trimmed { left: 8px; }
:root[data-theme] .cut-clip.selected { box-shadow: 0 0 0 1.5px var(--t-sel); }
:root[data-theme] .cut-clip.selected :is(.cut-cap, .cut-trimmed) { left: 16px; }
:root[data-theme] .cut-clip.selected .cut-len { right: 16px; }
:root[data-theme] .cut-clip.dragging { z-index: 3; opacity: .9; cursor: grabbing; transition: none; box-shadow: 0 0 0 1.5px var(--t-sel), 0 14px 30px -10px rgba(0, 0, 0, .6); }
:root[data-theme] .cut-grip { position: absolute; top: 0; bottom: 0; display: none; width: 10px; background: var(--t-sel); cursor: ew-resize; }
:root[data-theme] .cut-grip::after { content: ""; position: absolute; left: 4px; top: 30px; width: 2px; height: 16px; border-radius: 1px; background: rgba(255, 255, 255, .85); }
:root[data-theme] .cut-grip.in { left: 0; }
:root[data-theme] .cut-grip.out { right: 0; }
:root[data-theme] .cut-clip.selected .cut-grip { display: block; }
:root[data-theme] .cut-slot { position: absolute; top: 0; height: 76px; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 0 6px; border: 1px dashed var(--t-line-strong); border-radius: 8px; color: var(--t-text-3); font-size: 11.5px; text-align: center; cursor: pointer; transition: left .22s var(--t-ease); touch-action: none; }
:root[data-theme] .cut-slot b { max-width: 100%; overflow: hidden; color: var(--t-text-2); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
:root[data-theme] .cut-slot:hover { border-color: var(--t-text-3); }
:root[data-theme] .cut-slot.selected { border: 1.5px solid var(--t-sel); }
:root[data-theme] .cut-slot.dragging { z-index: 3; transition: none; background: var(--t-glass-solid); }
:root[data-theme] .cut-drop { position: absolute; top: -4px; display: none; width: 2px; height: 84px; border-radius: 1px; background: var(--t-sel); }
:root[data-theme] .cut-voice { position: absolute; top: 3px; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; border-radius: 6px; color: var(--t-text-2); background: var(--t-hover); box-shadow: inset 0 0 0 1px var(--t-line); font-size: 11.5px; white-space: nowrap; transition: left .22s var(--t-ease), width .22s var(--t-ease); }
:root[data-theme] .cut-voice svg { flex: none; width: 12px; height: 12px; color: var(--t-text-3); }
:root[data-theme] .cut-music { position: absolute; left: 0; top: 3px; height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; color: var(--t-text-2); font-size: 11.5px; white-space: nowrap; }
:root[data-theme] .cut-music svg { flex: none; width: 13px; height: 13px; }
:root[data-theme] .cut-music.set { color: var(--t-text); background: var(--t-sel-soft); }
:root[data-theme] .cut-music.unset { border: 1px dashed var(--t-line-strong); color: var(--t-text-3); background: transparent; cursor: pointer; }
:root[data-theme] .cut-music.unset:hover { border-color: var(--t-text-3); color: var(--t-text); }
:root[data-theme] .cut-music input { width: 90px; accent-color: var(--t-sel); }
:root[data-theme] .cut-volume { min-width: 32px; font-variant-numeric: tabular-nums; }
:root[data-theme] .cut-music-clear { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; color: var(--t-text-3); background: transparent; cursor: pointer; }
:root[data-theme] .cut-music-clear:hover { color: var(--t-text); }
:root[data-theme] .cut-music-clear svg { width: 12px; height: 12px; }
:root[data-theme] .cut-playhead { position: absolute; top: 0; bottom: 0; z-index: 4; width: 0; pointer-events: none; }
:root[data-theme] .cut-playhead[hidden] { display: none; }
:root[data-theme] .cut-playhead::before { content: ""; position: absolute; left: -.75px; top: 14px; bottom: 0; width: 1.5px; background: var(--t-sel); }
:root[data-theme] .cut-playhead::after { content: ""; position: absolute; left: -5px; top: 4px; width: 10px; height: 10px; border-radius: 2px 2px 5px 5px; background: var(--t-sel); }
:root[data-theme] .cut-edit-status { position: absolute; left: 0; right: 0; bottom: -2px; margin: 0; color: var(--t-text-3); font-size: 11px; text-align: center; pointer-events: none; }
:root[data-theme] .cut-timeline { position: relative; }

/* Menus and the export sheet. */
:root[data-theme] .cut-menu { position: fixed; z-index: 60; min-width: 200px; padding: 6px; border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-glass-solid); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--t-shadow-lg); animation: t-cut-drop .16s var(--t-ease); }
:root[data-theme] .cut-menu[hidden] { display: none; }
@keyframes t-cut-drop { from { opacity: 0; transform: translateY(-4px); } }
:root[data-theme] .cut-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--t-text); background: transparent; text-align: left; cursor: pointer; }
:root[data-theme] .cut-menu-item:hover { background: var(--t-hover); }
:root[data-theme] .cut-menu-item small { margin-left: auto; color: var(--t-text-3); }
:root[data-theme] .cut-menu-item.on::after { content: "✓"; margin-left: 8px; color: var(--t-sel); }
:root[data-theme] .cut-menu-label { padding: 6px 10px 4px; color: var(--t-text-3); font-size: 11.5px; }
:root[data-theme] .cut-sheet { width: 320px; padding: 16px; }
:root[data-theme] .cut-sheet h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
:root[data-theme] .cut-row { display: flex; align-items: center; gap: 12px; min-height: 36px; }
:root[data-theme] .cut-row > span { width: 64px; color: var(--t-text-3); font-size: 12.5px; }
:root[data-theme] .cut-row small { color: var(--t-text-3); font-size: 12px; }
:root[data-theme] .cut-seg { display: flex; padding: 2px; border-radius: 9px; background: var(--t-hover); }
:root[data-theme] .cut-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--t-text-3); background: transparent; font-size: 12.5px; font-weight: 500; cursor: pointer; }
:root[data-theme] .cut-seg button.on { color: var(--t-text); background: var(--t-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme] .cut-switch { position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--t-line-strong); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .15s; }
:root[data-theme] .cut-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--t-ease); }
:root[data-theme] .cut-switch:checked { background: var(--t-sel); }
:root[data-theme] .cut-switch:checked::after { transform: translateX(14px); }
:root[data-theme] .cut-switch:focus-visible, :root[data-theme] .cut-view button:focus-visible { outline: 2px solid var(--t-sel); outline-offset: 1px; }
:root[data-theme] .cut-sheet-note { margin: 12px 0 14px; padding-top: 12px; border-top: 1px solid var(--t-line); color: var(--t-text-2); font-size: 12.5px; line-height: 1.7; }
:root[data-theme] .cut-sheet-note p { margin: 0; }
:root[data-theme] .cut-sheet-note .skip { color: var(--t-text-3); }

@media (max-width: 800px) {
  :root[data-theme] .storyboard-editing.cut-view { padding: 0 8px 8px; }
  :root[data-theme] .cut-tl-title span { display: none; }
  :root[data-theme] .cut-timeline { height: 220px; padding: 0 10px 8px; }
  :root[data-theme] .cut-status { display: none; }
}
@media (pointer: coarse) {
  :root[data-theme] .cut-grip { width: 16px; }
  :root[data-theme] .cut-actions button { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] :is(.cut-clip, .cut-slot, .cut-voice) { transition: none; }
}
/* Narrow screens: the selected clip's actions show their icons alone and take the whole header. */
@media (max-width: 800px) {
  :root[data-theme] .cut-actions .cut-label, :root[data-theme] .cut-actions .cut-val { display: none; }
  :root[data-theme] .cut-actions button { width: 36px; justify-content: center; padding: 0; }
  :root[data-theme] .cut-tl-head.has-selection .cut-tl-right { display: none; }
  :root[data-theme] #canvasWorkspace.cut-view #cutRender { min-width: 0; height: 32px; padding: 0 10px; font-size: 12.5px; }
  /* 合成成片 takes the place of 运行流程 but is wider: the canvas name gives up the difference. */
  :root[data-theme] #canvasWorkspace.cut-view .project-name { width: 92px; min-width: 0; }
}

/* Long-text boxes (2026-10-23): grow with the text up to a cap, then scroll, instead of hiding
   lines inside a fixed height. js/util.js autoGrow does the same where field-sizing is missing. */
:root[data-theme] :is(#starterPrompt, #directorBrief, #projectBriefInput, #agentPromptInput) { field-sizing: content; overflow-y: auto; }
:root[data-theme] #starterPrompt { max-height: min(48vh, 420px); }
:root[data-theme] #canvasWorkspace #directorBrief { max-height: min(40vh, 320px); }
:root[data-theme] #projectBriefInput { max-height: min(50vh, 480px); }
:root[data-theme] #agentPromptInput { min-height: 86px; max-height: 240px; }