From f06e583c9ba60d43aa1a8146623e3fc70bc65e14 Mon Sep 17 00:00:00 2001
From: xz <xz@yuye-2.local>
Date: Wed, 26 Aug 2026 20:56:06 +0800
Subject: [PATCH] feat: polish director studio responsive layout

---
 src/components/ProductionPages.jsx | 117 +++++++++++++++++-
 src/styles.css                     | 185 ++++++++++++++++++++++++++++-
 2 files changed, 298 insertions(+), 4 deletions(-)

diff --git a/src/components/ProductionPages.jsx b/src/components/ProductionPages.jsx
index d386619..e64004b 100644
--- a/src/components/ProductionPages.jsx
+++ b/src/components/ProductionPages.jsx
@@ -32,6 +32,7 @@ import {
   XCircle
 } from "lucide-react";
 import { workflowTemplates } from "../data/sampleProject";
+import { ScenePreview } from "./ScenePreview";
 import {
   addProductionReviewComment,
   activateDeliveryBatch,
@@ -107,6 +108,22 @@ function StatusTag({ status }) {
   return <span className={`production-status ${tone}`}><span />{labels[status] || status || "未设置"}</span>;
 }
 
+function StudioPill({ label, value, tone = "neutral" }) {
+  return <div className={`studio-pill ${tone}`}><span>{label}</span><strong>{value}</strong></div>;
+}
+
+function formatStudioValue(value) {
+  if (Array.isArray(value)) return value.filter(Boolean).join(" · ");
+  if (value && typeof value === "object") return JSON.stringify(value);
+  return String(value || "");
+}
+
+function continuityEntries(shot) {
+  return Object.entries(shot?.continuity || {})
+    .filter(([, value]) => value !== undefined && value !== null && value !== "")
+    .slice(0, 8);
+}
+
 function useProductionGraph(contextOverrides) {
   const [graph, setGraph] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -473,8 +490,26 @@ export function DirectorProductionPage({ project, contextOverrides, canCreateJob
   const [busy, setBusy] = useState(false);
   const [notice, setNotice] = useState("");
   const [showCreate, setShowCreate] = useState(false);
+  const [stageTab, setStageTab] = useState("preview");
   useEffect(() => { const next = graph?.shots?.find((shot) => shot.id === selectedId) || graph?.shots?.[0]; if (next) { setSelectedId(next.id); setDraft(next); } }, [graph, selectedId]);
-  const selected = graph?.shots?.find((shot) => shot.id === selectedId) || graph?.shots?.[0];
+  const shots = graph?.shots || [];
+  const selected = shots.find((shot) => shot.id === selectedId) || shots[0];
+  const totalDuration = shots.reduce((sum, shot) => sum + Number(shot.durationSec || 0), 0);
+  const voiceLineCount = selected?.voiceLines?.length || 0;
+  const bridgeLabel = selected?.transitionFromPrevious === "actual-last-frame" ? "实际末帧" : selected?.transitionFromPrevious === "insert-bridge-shot" ? "过渡镜头" : selected?.transitionFromPrevious || "本集开场";
+  const stageTabs = [
+    { id: "preview", label: "预览与提示词" },
+    { id: "continuity", label: "连续性锁" },
+    { id: "versions", label: "版本记录" },
+    { id: "queue", label: "辅助与生成" }
+  ];
+  const summaryPills = [
+    { label: "镜头", value: `${shots.length} 个` },
+    { label: "时长", value: `${totalDuration}s` },
+    { label: "对白", value: `${voiceLineCount} 句` },
+    { label: "版本", value: `v${selected?.versionNumber || 1}` },
+    { label: "衔接", value: bridgeLabel }
+  ];
   const updateField = (key, value) => setDraft((current) => ({ ...current, [key]: key === "durationSec" || key === "seed" ? (value === "" ? "" : Number(value)) : value }));
   async function loadVersions(shotId = selected?.id) {
     if (!shotId) return;
@@ -518,7 +553,85 @@ export function DirectorProductionPage({ project, contextOverrides, canCreateJob
     const form = new FormData(event.currentTarget);
     try { const result = await createProductionShot({ episodeId: graph.episode.id, title: form.get("title"), durationSec: Number(form.get("durationSec") || 6), action: form.get("action") }, contextOverrides); setGraph(result.graph); setSelectedId(result.shot.id); setDraft(result.shot); setShowCreate(false); setNotice(`已创建 ${result.shot.id}，请继续补齐角色、场景、道具和 Prompt。`); } catch (error) { setNotice(error.message); } finally { setBusy(false); }
   }
-  return <div className="production-page"><ProductionHeader kicker="PRODUCTION / DIRECTOR DESK" title="导演工作台" description="每一行是一个独立镜头生产单，镜头编辑、Prompt 版本、首尾帧连续性、对白和任务入口都在同一条记录上。" actions={<><button className="subtle" onClick={reload}><RefreshCw size={15} />刷新镜头</button><button className="primary" onClick={() => setShowCreate(true)}><Plus size={15} />新建镜头</button></>} />{notice && <Notice onClose={() => setNotice("")}>{notice}</Notice>}{error && <Notice tone="warn">导演图谱读取失败：{error}</Notice>}<div className="director-production-layout"><section className="production-card director-shot-list"><SectionBar title="镜头清单" detail={loading ? "读取中…" : `${graph?.shots?.length || 0} 个镜头`} /><div className="director-shot-rows">{graph?.shots?.map((shot) => <button type="button" key={shot.id} className={shot.id === selected?.id ? "selected" : ""} onClick={() => { setSelectedId(shot.id); setDraft(shot); }}><span className="shot-index">{String(shot.episodeNumber || 1).padStart(2, "0")}.{String(shot.shot_number || shot.shotNumber || 1).padStart(2, "0")}</span><span><strong>{shot.title}</strong><small>{shot.durationSec}s · {shot.camera}</small></span><span className="shot-bridge">{shot.transitionFromPrevious === "actual-last-frame" ? "实际末帧" : shot.transitionFromPrevious}</span><StatusTag status={shot.status} /><ChevronRight size={15} /></button>)}</div></section><section className="production-card director-editor"><SectionBar title={selected ? `${selected.id} · 镜头编辑器` : "镜头编辑器"} detail={selected ? `版本 v${selected.versionNumber || 1}` : "请选择镜头"} action={selected && <div className="row-actions"><button className="subtle" onClick={() => { setShowVersions(true); loadVersions(selected.id); }} disabled={busy}><History size={14} />版本记录</button><button className="subtle" onClick={saveShot} disabled={busy}><Save size={14} />保存镜头</button><button className="primary" onClick={savePrompt} disabled={busy}><Wand2 size={14} />保存 Prompt 版本</button></div>} />{selected && draft ? <div className="director-editor-body"><div className="editor-grid"><label>标题<input value={draft.title || ""} onChange={(event) => updateField("title", event.target.value)} /></label><label>时长（秒）<input type="number" min="1" max="15" value={draft.durationSec ?? 6} onChange={(event) => updateField("durationSec", event.target.value)} /></label><label>机位<input value={draft.camera || ""} onChange={(event) => updateField("camera", event.target.value)} /></label><label>衔接策略<select value={draft.transitionFromPrevious || "episode-start"} onChange={(event) => updateField("transitionFromPrevious", event.target.value)}><option value="episode-start">本集开场</option><option value="actual-last-frame">上一段实际末帧</option><option value="hard-cut-risk">硬切风险</option><option value="insert-bridge-shot">插入过渡镜头</option></select></label><label className="full-span">动作描述<textarea rows="3" value={draft.action || ""} onChange={(event) => updateField("action", event.target.value)} /></label><label>首帧引用<input value={draft.firstFrame || ""} onChange={(event) => updateField("firstFrame", event.target.value)} /></label><label>实际末帧路径<input value={draft.lastFrame || ""} onChange={(event) => updateField("lastFrame", event.target.value)} /></label></div><div className="prompt-editor-grid"><label>单画面图片 Prompt<textarea rows="6" value={draft.prompt || ""} onChange={(event) => updateField("prompt", event.target.value)} /></label><label>Negative Prompt<textarea rows="6" value={draft.negativePrompt || ""} onChange={(event) => updateField("negativePrompt", event.target.value)} /></label><label>图生视频动作 Prompt<textarea rows="5" value={draft.videoPrompt || ""} onChange={(event) => updateField("videoPrompt", event.target.value)} /></label></div><div className="director-contract"><ShieldCheck size={16} /><span>生成契约：一次一张完整连续画面；下一片段继承上一段实际末帧；没有锁定角色/场景/道具时不得进入批量生产。</span></div>{canCreateJob && <div className="director-action-bar"><button className="subtle" onClick={() => onQueueJob?.("关键帧", selected.id)}><Sparkles size={15} />创建关键帧任务</button><button className="primary" onClick={() => onQueueJob?.("首尾帧图生视频", selected.id)}><Film size={15} />创建视频任务</button></div>}</div> : <div className="production-empty">请选择一个镜头。</div>}</section></div>{showVersions && selected && <div className="production-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setShowVersions(false)}><section className="production-modal"><div className="production-modal-head"><div><span className="card-kicker">SHOT VERSION HISTORY</span><h3>{selected.id} · 版本记录</h3></div><button type="button" className="icon-only-button" onClick={() => setShowVersions(false)}><XCircle size={16} /></button></div><div className="shot-version-list">{versions.map((version) => <div className="shot-version-row" key={version.id}><div><strong>v{version.version_number}</strong><span>{version.created_by_name || version.created_by} · {version.created_at?.replace("T", " ").slice(0, 19)}</span><small>{version.id}</small></div><div className="row-actions">{version.isCurrent ? <StatusTag status="approved" /> : <button className="icon-text-button" onClick={() => restoreVersion(version.id)} disabled={busy}><History size={14} />恢复</button>}</div></div>)}{!versions.length && <div className="production-empty">暂无历史版本。</div>}</div></section></div>}{showCreate && <div className="production-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setShowCreate(false)}><form className="production-modal" onSubmit={addShot}><div className="production-modal-head"><div><span className="card-kicker">NEW SHOT</span><h3>新建生产镜头</h3></div><button type="button" className="icon-only-button" onClick={() => setShowCreate(false)}><XCircle size={16} /></button></div><label>镜头标题<input name="title" placeholder="例如：人物停步看向积水" required /></label><label>动作描述<textarea name="action" rows="4" placeholder="描述一个 5-10 秒内的连续动作" /></label><label>目标时长<input name="durationSec" type="number" min="1" max="15" defaultValue="6" /></label><div className="form-actions"><button type="button" className="subtle" onClick={() => setShowCreate(false)}>取消</button><button className="primary" type="submit" disabled={busy}><Plus size={15} />创建镜头</button></div></form></div>}</div>;
+  return <div className="production-page studio-console">
+    <div className="studio-banner">
+      <div className="studio-banner-copy">
+        <span className="card-kicker">VIDEO STUDIO / DIRECTOR DESK</span>
+        <h2>{project?.series?.title || project?.title || "导演工作台"}</h2>
+        <p>{project?.episode?.title || "当前分集"} · {shots.length} 个镜头 · {project?.series?.continuityRule || "连续性台账与实际末帧优先"}</p>
+        <div className="studio-chip-row">{summaryPills.map((chip) => <StudioPill key={chip.label} label={chip.label} value={chip.value} tone={chip.label === "衔接" && bridgeLabel === "实际末帧" ? "ok" : chip.label === "版本" ? "neutral" : "neutral"} />)}</div>
+      </div>
+      <div className="studio-banner-side">
+        <div className="studio-console-stat">
+          <span>当前镜头</span>
+          <strong>{selected?.id || "未选择"}</strong>
+          <small>{selected?.title || "请选择一个镜头查看预览、提示词和连续性"}</small>
+        </div>
+        <div className="studio-banner-actions">
+          <button className="subtle" onClick={reload}><RefreshCw size={15} />刷新镜头</button>
+          <button className="primary" onClick={() => setShowCreate(true)}><Plus size={15} />新建镜头</button>
+        </div>
+      </div>
+    </div>
+    {notice && <Notice onClose={() => setNotice("")}>{notice}</Notice>}
+    {error && <Notice tone="warn">导演图谱读取失败：{error}</Notice>}
+    <div className="studio-workbench">
+      <aside className="studio-shot-rail">
+        <SectionBar title="故事板" detail={loading ? "读取中…" : `${shots.length} 个镜头`} />
+        <div className="studio-shot-list">
+          {shots.map((shot) => (
+            <button type="button" key={shot.id} className={`studio-shot-card ${shot.id === selected?.id ? "selected" : ""}`} onClick={() => { setSelectedId(shot.id); setDraft(shot); setStageTab("preview"); }}>
+              <div className="studio-shot-thumb"><ScenePreview shot={shot} active={shot.id === selected?.id} /></div>
+              <div className="studio-shot-copy">
+                <div className="studio-shot-head"><span className="shot-index">{String(shot.episodeNumber || 1).padStart(2, "0")}.{String(shot.shot_number || shot.shotNumber || 1).padStart(2, "0")}</span><StatusTag status={shot.status} /></div>
+                <strong>{shot.title}</strong>
+                <small>{shot.durationSec}s · {shot.camera || "未设置机位"}</small>
+              </div>
+              <span className="shot-bridge">{shot.transitionFromPrevious === "actual-last-frame" ? "实际末帧" : shot.transitionFromPrevious === "insert-bridge-shot" ? "过渡镜头" : shot.transitionFromPrevious || "本集开场"}</span>
+            </button>
+          ))}
+          {!shots.length && <div className="production-empty">当前项目还没有镜头。</div>}
+        </div>
+      </aside>
+      <section className="studio-stage">
+        <div className="studio-stage-head">
+          <div className="studio-stage-title">
+            <span className="card-kicker">SCENE INSPECTOR</span>
+            <h3>{selected ? `${selected.id} · ${selected.title}` : "镜头检视器"}</h3>
+            <p>{selected ? `v${selected.versionNumber || 1} · ${selected.durationSec || 0} 秒 · ${selected.camera || "未设置机位"}` : "选择左侧镜头查看预览、提示词、连续性和版本。"}</p>
+          </div>
+          <div className="stage-tabs">{stageTabs.map((tab) => <button key={tab.id} type="button" className={stageTab === tab.id ? "selected" : ""} onClick={() => setStageTab(tab.id)}>{tab.label}</button>)}</div>
+        </div>
+        {selected && draft ? <>
+          {stageTab === "preview" && <div className="studio-preview-panel"><div className="studio-preview-frame"><ScenePreview shot={selected} active /><div className="studio-preview-summary"><StudioPill label="机位" value={selected.camera || "未设置"} /><StudioPill label="时长" value={`${selected.durationSec || 0} 秒`} tone="ok" /><StudioPill label="衔接" value={bridgeLabel} tone={bridgeLabel === "实际末帧" ? "ok" : "neutral"} /></div></div><div className="studio-preview-stats"><div><span>首帧</span><strong>{selected.firstFrame || "episode-start"}</strong></div><div><span>末帧</span><strong>{selected.lastFrame || "pending-actual-last-frame"}</strong></div><div><span>对白</span><strong>{voiceLineCount} 句</strong></div></div><div className="studio-preview-copy"><div><span>动作描述</span><p>{selected.action || "暂无动作描述。"}</p></div><div><span>当前 Prompt</span><p>{selected.prompt || "尚未填写单画面提示词。"}</p></div><div><span>视频动作 Prompt</span><p>{selected.videoPrompt || "尚未填写图生视频动作提示词。"}</p></div></div></div>}
+          {stageTab === "continuity" && <div className="studio-continuity-panel"><div className="studio-continuity-grid"><div className="studio-inspector-section"><SectionBar title="连续性锁" detail="角色 / 场景 / 道具 / 机位 / 声音" /><dl className="studio-definition-list"><dt>首帧</dt><dd>{selected.firstFrame || "episode-start"}</dd><dt>末帧</dt><dd>{selected.lastFrame || "pending-actual-last-frame"}</dd><dt>衔接策略</dt><dd>{bridgeLabel}</dd><dt>机位</dt><dd>{selected.camera || "未设置"}</dd><dt>版本</dt><dd>v{selected.versionNumber || 1}</dd></dl></div><div className="studio-inspector-section"><SectionBar title="连续性台账" detail={`${continuityEntries(selected).length} 条`}/><div className="studio-ledger">{continuityEntries(selected).map(([key, value]) => <div key={key}><span>{key}</span><strong>{formatStudioValue(value)}</strong></div>)}{!continuityEntries(selected).length && <div className="production-empty">当前镜头没有额外连续性台账。</div>}</div></div></div><div className="studio-inspector-section"><SectionBar title="对白" detail={`${voiceLineCount} 句`} /><div className="studio-voice-list">{voiceLineCount ? selected.voiceLines.map((line, index) => <div key={line.id}><span>{String(index + 1).padStart(2, "0")}</span><strong>{line.text}</strong><small>{line.characterId || "角色未命名"} · {line.emotion || "neutral"} · {line.targetDurationSec || 0}s</small></div>) : <div className="production-empty">当前镜头还没有对白。</div>}</div></div></div>}
+          {stageTab === "versions" && <div className="studio-version-panel"><div className="studio-inspector-section"><SectionBar title="版本记录" detail="保存 Prompt 或镜头后会生成新版本" action={<button className="subtle" onClick={() => { setShowVersions(true); loadVersions(selected.id); }} disabled={busy}><History size={14} />打开版本历史</button>} /><div className="shot-version-list">{versions.slice(0, 6).map((version) => <div className="shot-version-row" key={version.id}><div><strong>v{version.version_number}</strong><span>{version.created_by_name || version.created_by} · {version.created_at?.replace("T", " ").slice(0, 19)}</span><small>{version.id}</small></div><div className="row-actions">{version.isCurrent ? <StatusTag status="approved" /> : <button className="icon-text-button" onClick={() => restoreVersion(version.id)} disabled={busy}><History size={14} />恢复</button>}</div></div>)}{!versions.length && <div className="production-empty">暂无历史版本。</div>}</div></div></div>}
+          {stageTab === "queue" && <div className="studio-queue-panel"><div className="studio-queue-grid"><div className="studio-inspector-section"><SectionBar title="生成入口" detail="直接进入本地队列或仅保存提示词版本" /><div className="studio-queue-actions">{canCreateJob && <><button className="subtle" onClick={() => onQueueJob?.("关键帧", selected.id)}><Sparkles size={15} />创建关键帧任务</button><button className="primary" onClick={() => onQueueJob?.("首尾帧图生视频", selected.id)}><Film size={15} />创建视频任务</button></>}{!canCreateJob && <div className="production-empty">当前角色没有创建生成任务的权限。</div>}</div></div><div className="studio-inspector-section"><SectionBar title="请求预览" detail="只展示当前镜头的生产合同" /><pre className="studio-request-preview">{JSON.stringify({ shotId: selected.id, title: selected.title, firstFrame: selected.firstFrame, lastFrame: selected.lastFrame, prompt: selected.prompt, negativePrompt: selected.negativePrompt, videoPrompt: selected.videoPrompt }, null, 2)}</pre></div></div><div className="director-contract"><ShieldCheck size={16} /><span>生成契约：一次一张完整连续画面；下一片段继承上一段实际末帧；没有锁定角色/场景/道具时不得进入批量生产。</span></div></div>}
+        </> : <div className="production-empty">请选择一个镜头。</div>}
+      </section>
+      <aside className="studio-inspector">
+        <div className="studio-inspector-section">
+          <SectionBar title="镜头台账" detail={`v${selected?.versionNumber || 1}`} action={selected && <button className="subtle" onClick={() => { setShowVersions(true); loadVersions(selected.id); }} disabled={busy}><History size={14} />版本历史</button>} />
+          {selected ? <dl className="studio-definition-list"><dt>标题</dt><dd>{selected.title || "未命名镜头"}</dd><dt>时长</dt><dd>{selected.durationSec || 0} 秒</dd><dt>机位</dt><dd>{selected.camera || "未设置"}</dd><dt>状态</dt><dd><StatusTag status={selected.status} /></dd><dt>首帧</dt><dd>{selected.firstFrame || "episode-start"}</dd><dt>末帧</dt><dd>{selected.lastFrame || "pending-actual-last-frame"}</dd></dl> : <div className="production-empty">先从左侧选择一个镜头。</div>}
+        </div>
+        <div className="studio-inspector-section">
+          <SectionBar title="提示词" detail="可保存为 Prompt Pack" />
+          {selected ? <div className="studio-mini-prompts"><div><span>单画面</span><p>{selected.prompt || "尚未填写。"}</p></div><div><span>Negative</span><p>{selected.negativePrompt || "尚未填写。"}</p></div><div><span>动作</span><p>{selected.videoPrompt || "尚未填写。"}</p></div></div> : <div className="production-empty">请选择镜头后查看提示词。</div>}
+        </div>
+        <div className="studio-inspector-section">
+          <SectionBar title="生成动作" detail="保留当前版本和审计" />
+          <div className="studio-queue-actions">
+            {selected && <>
+              <button className="subtle" onClick={saveShot} disabled={busy}><Save size={14} />保存镜头</button>
+              <button className="subtle" onClick={savePrompt} disabled={busy}><Wand2 size={14} />保存 Prompt 版本</button>
+            </>}
+          </div>
+        </div>
+      </aside>
+    </div>
+    {showVersions && selected && <div className="production-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setShowVersions(false)}><section className="production-modal"><div className="production-modal-head"><div><span className="card-kicker">SHOT VERSION HISTORY</span><h3>{selected.id} · 版本记录</h3></div><button type="button" className="icon-only-button" onClick={() => setShowVersions(false)}><XCircle size={16} /></button></div><div className="shot-version-list">{versions.map((version) => <div className="shot-version-row" key={version.id}><div><strong>v{version.version_number}</strong><span>{version.created_by_name || version.created_by} · {version.created_at?.replace("T", " ").slice(0, 19)}</span><small>{version.id}</small></div><div className="row-actions">{version.isCurrent ? <StatusTag status="approved" /> : <button className="icon-text-button" onClick={() => restoreVersion(version.id)} disabled={busy}><History size={14} />恢复</button>}</div></div>)}{!versions.length && <div className="production-empty">暂无历史版本。</div>}</div></section></div>}
+    {showCreate && <div className="production-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setShowCreate(false)}><form className="production-modal" onSubmit={addShot}><div className="production-modal-head"><div><span className="card-kicker">NEW SHOT</span><h3>新建生产镜头</h3></div><button type="button" className="icon-only-button" onClick={() => setShowCreate(false)}><XCircle size={16} /></button></div><label>镜头标题<input name="title" placeholder="例如：人物停步看向积水" required /></label><label>动作描述<textarea name="action" rows="4" placeholder="描述一个 5-10 秒内的连续动作" /></label><label>目标时长<input name="durationSec" type="number" min="1" max="15" defaultValue="6" /></label><div className="form-actions"><button type="button" className="subtle" onClick={() => setShowCreate(false)}>取消</button><button className="primary" type="submit" disabled={busy}><Plus size={15} />创建镜头</button></div></form></div>}
+  </div>;
 }
 
 function jobText(job) {
diff --git a/src/styles.css b/src/styles.css
index f3045be..e05f586 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -29,7 +29,7 @@ body {
     #eef2ef;
 }
 
-.app-shell { min-width: 1180px; }
+.app-shell { min-width: 0; }
 
 button,
 select {
@@ -42,7 +42,7 @@ button {
 
 .app-shell {
   display: grid;
-  grid-template-columns: 304px minmax(920px, 1fr);
+  grid-template-columns: 304px minmax(0, 1fr);
   min-height: 100vh;
 }
 
@@ -5253,6 +5253,156 @@ body {
 .production-section-bar h3 { margin: 0; color: var(--ink); font-size: 14px; }
 .production-section-bar span { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; }
 .production-card { min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(27, 38, 31, 0.035); }
+.studio-console {
+  --ink: #edf3fb;
+  --muted: #aebad0;
+  --faint: #7f8ca4;
+  --line: rgba(150, 170, 199, 0.18);
+  --panel: #111826;
+  --panel-2: #0d1420;
+  --accent: #7d9bff;
+  --accent-2: #ffb36d;
+  --gold: #f0c56b;
+  --blue: #8eb0ff;
+  background:
+    radial-gradient(circle at top left, rgba(125, 155, 255, 0.18), transparent 30%),
+    radial-gradient(circle at top right, rgba(255, 179, 109, 0.12), transparent 28%),
+    linear-gradient(180deg, #090d14 0%, #0b1119 100%);
+}
+.studio-console .production-header { padding: 0 0 2px; }
+.studio-console .production-header h2 { color: #f4f7ff; font-size: 31px; }
+.studio-console .production-header p { color: #9da9be; }
+.studio-console .production-card,
+.studio-console .production-modal {
+  color: #edf3fb;
+  background: linear-gradient(180deg, rgba(17, 24, 38, 0.96), rgba(11, 17, 26, 0.98));
+  border-color: rgba(144, 165, 201, 0.18);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.33);
+}
+.studio-console .production-card input,
+.studio-console .production-card select,
+.studio-console .production-card textarea,
+.studio-console .production-modal input,
+.studio-console .production-modal select,
+.studio-console .production-modal textarea {
+  color: #eef3fb;
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(150, 170, 199, 0.2);
+}
+.studio-console .production-empty { color: #8f9db5; }
+.studio-console .production-status { color: #b8c3d9; background: rgba(255, 255, 255, 0.04); border-color: rgba(150, 170, 199, 0.18); }
+.studio-console .production-status.ok { color: #9dd5b8; background: rgba(84, 180, 130, 0.12); border-color: rgba(84, 180, 130, 0.24); }
+.studio-console .production-status.warn { color: #efbb72; background: rgba(239, 187, 114, 0.12); border-color: rgba(239, 187, 114, 0.24); }
+.studio-banner { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 18px 14px; border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 12px; background: linear-gradient(180deg, rgba(18, 25, 39, 0.92), rgba(12, 18, 28, 0.96)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); }
+.studio-banner-copy { display: grid; gap: 10px; min-width: 0; flex: 1; }
+.studio-banner-copy h2 { margin: 0; color: #f6f8ff; font-size: 28px; line-height: 1.08; }
+.studio-banner-copy p { margin: 0; color: #9caac0; font-size: 12px; line-height: 1.6; }
+.studio-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.studio-pill { display: grid; gap: 3px; min-width: 118px; padding: 9px 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 10px; }
+.studio-pill span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
+.studio-pill strong { color: #edf3fb; font-size: 12px; }
+.studio-pill.ok { border-color: rgba(84, 180, 130, 0.28); background: rgba(84, 180, 130, 0.12); }
+.studio-pill.ok strong { color: #b7f0d0; }
+.studio-banner-side { display: grid; gap: 10px; width: min(280px, 100%); }
+.studio-console-stat { display: grid; gap: 4px; padding: 12px 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.18); border-radius: 10px; }
+.studio-console-stat span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.studio-console-stat strong { color: #f6f8ff; font-size: 15px; }
+.studio-console-stat small { color: #9caac0; font-size: 11px; line-height: 1.45; }
+.studio-banner-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.studio-workbench { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.46fr) minmax(300px, .84fr); gap: 14px; align-items: start; }
+.studio-shot-rail,
+.studio-stage,
+.studio-inspector { display: grid; gap: 12px; min-width: 0; }
+.studio-shot-list { display: grid; gap: 10px; max-height: 1070px; overflow: auto; padding-right: 2px; }
+.studio-shot-card { display: grid; gap: 10px; align-items: start; width: 100%; padding: 10px; color: #aebad0; text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.15); border-radius: 12px; }
+.studio-shot-card:hover,
+.studio-shot-card.selected { border-color: rgba(125, 155, 255, 0.6); background: rgba(125, 155, 255, 0.09); box-shadow: 0 0 0 1px rgba(125, 155, 255, 0.18) inset; }
+.studio-shot-thumb .scene-preview { aspect-ratio: 16 / 9; min-height: 126px; border-color: rgba(150, 170, 199, 0.16); }
+.studio-shot-copy { display: grid; gap: 4px; min-width: 0; }
+.studio-shot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.studio-shot-copy strong { overflow: hidden; color: #f4f7ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.studio-shot-copy small { overflow: hidden; color: #93a0b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.studio-shot-card .shot-bridge { justify-self: start; max-width: none; color: #86a4ff; font-size: 10px; }
+.studio-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; }
+.studio-stage-title { display: grid; gap: 4px; min-width: 0; }
+.studio-stage-title h3 { margin: 0; color: #f4f7ff; font-size: 18px; }
+.studio-stage-title p { margin: 0; color: #93a0b7; font-size: 11px; line-height: 1.55; }
+.stage-tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 12px; }
+.stage-tabs button { min-height: 34px; padding: 0 12px; color: #9caac0; background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 11px; font-weight: 800; }
+.stage-tabs button.selected,
+.stage-tabs button:hover { color: #f4f7ff; background: rgba(125, 155, 255, 0.18); }
+.studio-preview-panel,
+.studio-continuity-panel,
+.studio-version-panel,
+.studio-queue-panel { display: grid; gap: 12px; }
+.studio-preview-frame { display: grid; gap: 12px; padding: 12px; background: linear-gradient(180deg, rgba(8, 12, 18, 0.8), rgba(10, 14, 22, 0.96)); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 14px; }
+.studio-preview-frame .scene-preview { min-height: 520px; aspect-ratio: 16 / 9; border-color: rgba(144, 165, 201, 0.16); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
+.studio-preview-summary,
+.studio-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.studio-preview-stats > div,
+.studio-preview-copy > div,
+.studio-inspector-section,
+.studio-queue-grid > .studio-inspector-section { display: grid; gap: 6px; padding: 12px 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.14); border-radius: 12px; }
+.studio-preview-stats span,
+.studio-preview-copy span,
+.studio-definition-list dt,
+.studio-ledger span,
+.studio-mini-prompts span,
+.studio-voice-list span,
+.studio-queue-summary span { color: #7f8ca4; font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.studio-preview-stats strong,
+.studio-preview-copy p,
+.studio-definition-list dd,
+.studio-ledger strong,
+.studio-mini-prompts p,
+.studio-voice-list strong,
+.studio-queue-summary strong { color: #eef3fb; font-size: 11px; line-height: 1.55; }
+.studio-preview-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.studio-preview-copy p { margin: 0; }
+.studio-continuity-grid,
+.studio-queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.studio-definition-list { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 7px 10px; }
+.studio-definition-list dd { margin: 0; color: #edf3fb; }
+.studio-ledger { display: grid; gap: 8px; }
+.studio-ledger > div { display: grid; gap: 4px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-ledger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.studio-mini-prompts { display: grid; gap: 8px; }
+.studio-mini-prompts > div { display: grid; gap: 4px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-mini-prompts p { margin: 0; white-space: pre-wrap; }
+.studio-voice-list { display: grid; gap: 8px; }
+.studio-voice-list > div { display: grid; gap: 3px; padding: 10px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(144, 165, 201, 0.12); border-radius: 10px; }
+.studio-voice-list > div strong { color: #f4f7ff; }
+.studio-request-preview { overflow: auto; margin: 0; padding: 12px; color: #b9c6dc; background: rgba(6, 10, 16, 0.88); border: 1px solid rgba(144, 165, 201, 0.16); border-radius: 10px; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
+.studio-queue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.studio-queue-actions button { min-height: 36px; }
+.studio-console .director-contract { color: #86a4ff; background: rgba(125, 155, 255, 0.08); border-color: rgba(125, 155, 255, 0.18); }
+.studio-console .director-contract span { color: #9caac0; }
+.studio-console .production-notice { color: #d7e4ff; background: rgba(125, 155, 255, 0.12); border-color: rgba(125, 155, 255, 0.18); }
+.studio-console .production-notice.warn { color: #ffd7a4; background: rgba(255, 179, 109, 0.12); border-color: rgba(255, 179, 109, 0.2); }
+.studio-console .production-notice button { color: inherit; }
+.studio-console .shot-version-row,
+.studio-console .workflow-run-list > div,
+.studio-console .workflow-step-strip > div,
+.studio-console .review-list > button { background: rgba(255, 255, 255, 0.03); border-color: rgba(144, 165, 201, 0.12); }
+.studio-console .shot-version-row strong,
+.studio-console .workflow-run-list strong,
+.studio-console .workflow-step-strip strong,
+.studio-console .review-list strong { color: #f4f7ff; }
+.studio-console .shot-version-row span,
+.studio-console .shot-version-row small,
+.studio-console .workflow-run-list span,
+.studio-console .workflow-run-list small,
+.studio-console .workflow-step-strip span,
+.studio-console .workflow-step-strip small,
+.studio-console .review-list small { color: #8f9db5; }
+.studio-console .production-modal-backdrop { background: rgba(5, 8, 13, 0.78); }
+.studio-console .production-modal { background: linear-gradient(180deg, rgba(17, 24, 38, 0.98), rgba(12, 17, 26, 0.98)); border-color: rgba(144, 165, 201, 0.18); }
+.studio-console .production-modal-head h3 { color: #f4f7ff; }
+.studio-console .production-modal input,
+.studio-console .production-modal textarea,
+.studio-console .production-modal select { background: rgba(255, 255, 255, 0.03); border-color: rgba(144, 165, 201, 0.2); }
+.studio-console .production-modal .form-actions { border-top-color: rgba(144, 165, 201, 0.14); }
+.studio-console .scene-preview { background: linear-gradient(180deg, #182232 0%, #39526c 48%, #0f1826 100%); border-color: rgba(150, 170, 199, 0.2); }
 .production-two-column { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 14px; }
 .production-three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
 .production-form { display: grid; gap: 12px; }
@@ -5767,6 +5917,18 @@ body {
   .episode-catalog-layout,
   .director-production-layout,
   .qa-review-layout { grid-template-columns: 1fr; }
+  .studio-banner,
+  .studio-workbench,
+  .studio-preview-copy,
+  .studio-preview-summary,
+  .studio-preview-stats,
+  .studio-continuity-grid,
+  .studio-queue-grid { grid-template-columns: 1fr; }
+  .studio-banner,
+  .studio-stage-head { flex-direction: column; }
+  .studio-banner-side { width: 100%; }
+  .studio-stage { min-width: 0; }
+  .studio-inspector { min-width: 0; }
   .asset-governance-bar,
   .qa-review-summary,
   .delivery-contract-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -5776,6 +5938,25 @@ body {
 @media (max-width: 680px) {
   .production-header h2 { font-size: 21px; }
   .production-header p { font-size: 11px; }
+  .studio-banner { padding: 14px; }
+  .studio-banner-copy h2 { font-size: 23px; }
+  .studio-banner-actions { justify-content: stretch; }
+  .studio-banner-actions button { flex: 1 1 100%; }
+  .studio-chip-row { display: grid; grid-template-columns: 1fr 1fr; }
+  .studio-pill { min-width: 0; }
+  .studio-workbench { gap: 12px; }
+  .studio-shot-list { max-height: none; }
+  .studio-stage-head { align-items: stretch; }
+  .stage-tabs { width: 100%; overflow: auto; }
+  .stage-tabs button { flex: 1 0 auto; }
+  .studio-preview-frame .scene-preview { min-height: 300px; }
+  .studio-preview-copy,
+  .studio-preview-stats { grid-template-columns: 1fr; }
+  .studio-continuity-grid,
+  .studio-queue-grid { grid-template-columns: 1fr; }
+  .studio-definition-list { grid-template-columns: 76px minmax(0, 1fr); }
+  .studio-queue-actions { flex-direction: column; }
+  .studio-queue-actions button { width: 100%; justify-content: flex-start; }
   .production-three-column,
   .production-template-grid,
   .asset-governance-bar,