From a6626beb3249e04f5ecd6e1999b7a3b116410ba5 Mon Sep 17 00:00:00 2001
From: ludan <251918489@qq.com>
Date: Wed, 10 Jun 2026 17:54:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E9=A1=B5=E9=9D=A2UI=E6=89=93?=
 =?UTF-8?q?=E7=A3=A8=20=E2=80=94=20=E8=AE=BE=E7=BD=AE=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E3=80=81=E7=8A=B6=E6=80=81=E5=8F=8D=E9=A6=88=E4=B8=8E=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本次更新对多个功能页面进行了系统性的 UI/UX 打磨，统一了交互模式并补充了缺失的状态反馈。

## 新增功能
- WorkbenchPage: 图片提示词案例区域新增加载骨架屏、错误回退、空数据三种状态展示
- CharacterMixPage: 新增左侧设置面板（驱动提示词、图像检测开关、水印开关），支持清除已上传的人物图/参考视频
- DigitalHumanPage: 新增左侧设置面板（提示词输入、去水印/保留原声开关），支持清除已上传的人像/音频，增加取消生成按钮
- ImageWorkbenchPage / ResolutionUpscalePage: 新增参数设置面板和资产清除交互
- MorePage: 新增页面入口

## UI 优化
- 统一 Toggle 开关组件: 所有设置页面采用一致的 .studio-toggle 交互模式
- 资产清除: 各上传区域新增清除按钮，含二次确认和提示反馈
- 生成按钮: 统一为带图标的 .studio-generate-btn，增加 disabled/loading 状态
- ConversationSidebar / ProjectSidebar: 侧边栏交互细节优化

## 样式升级
- image-workbench.css: 大幅扩展样式 (+1900 行)，覆盖设置面板、上传区、结果展示等
- workbench.css: 新增 666 行样式，含骨架屏动画、案例卡片网格、状态占位等
- subtitle-removal.css: 补充设置面板样式
---
 src/components/BeforeAfterCompare.tsx         |    7 +-
 .../character-mix/CharacterMixPage.tsx        |  193 +-
 .../digital-human/DigitalHumanPage.tsx        |  197 +-
 src/features/home/HomePage.tsx                |   20 +-
 .../image-workbench/ImageWorkbenchPage.tsx    |   38 +-
 src/features/more/MorePage.tsx                |    2 +
 .../ResolutionUpscalePage.tsx                 |   24 +-
 .../subtitle-removal/SubtitleRemovalPage.tsx  |    2 +-
 .../WatermarkRemovalPage.tsx                  |    2 +-
 .../workbench/ConversationSidebar.tsx         |   14 +
 src/features/workbench/ProjectSidebar.tsx     |   23 +-
 src/features/workbench/WorkbenchPage.tsx      |   70 +-
 src/styles/pages/image-workbench.css          | 1874 ++++++++++++++++-
 src/styles/pages/subtitle-removal.css         |   68 +-
 src/styles/pages/workbench.css                |  666 ++++++
 15 files changed, 2949 insertions(+), 251 deletions(-)

diff --git a/src/components/BeforeAfterCompare.tsx b/src/components/BeforeAfterCompare.tsx
index 0a67142..18ebcda 100644
--- a/src/components/BeforeAfterCompare.tsx
+++ b/src/components/BeforeAfterCompare.tsx
@@ -8,6 +8,7 @@ interface BeforeAfterCompareProps {
   sourceAlt?: string;
   resultAlt?: string;
   className?: string;
+  aspectRatio?: string;
   onSourceLoad?: (width: number, height: number) => void;
 }
 
@@ -26,6 +27,7 @@ export default function BeforeAfterCompare({
   sourceAlt = "原图",
   resultAlt = "结果",
   className = "",
+  aspectRatio,
   onSourceLoad,
 }: BeforeAfterCompareProps) {
   const stageRef = useRef<HTMLDivElement>(null);
@@ -43,7 +45,10 @@ export default function BeforeAfterCompare({
     <div
       ref={stageRef}
       className={`before-after-compare ${className}`}
-      style={{ "--compare-position": `${position}%` } as CSSProperties}
+      style={{
+        "--compare-position": `${position}%`,
+        ...(aspectRatio ? { "--compare-aspect-ratio": aspectRatio } : {}),
+      } as CSSProperties}
       aria-label="前后对比"
     >
       <div className="before-after-compare__layer before-after-compare__layer--source">
diff --git a/src/features/character-mix/CharacterMixPage.tsx b/src/features/character-mix/CharacterMixPage.tsx
index 6a5121a..27d777b 100644
--- a/src/features/character-mix/CharacterMixPage.tsx
+++ b/src/features/character-mix/CharacterMixPage.tsx
@@ -281,6 +281,94 @@ function CharacterMixPage({
     }
   };
 
+  const clearCharacterAsset = () => {
+    if (characterPreview) URL.revokeObjectURL(characterPreview);
+    setCharacterFile("");
+    setCharacterPreview("");
+    setCharacterDataUrl("");
+    setFaceHint(null);
+    if (characterInputRef.current) characterInputRef.current.value = "";
+    setNotice("已移除人物图");
+  };
+
+  const clearReferenceVideo = () => {
+    if (videoPreview) URL.revokeObjectURL(videoPreview);
+    setVideoFile("");
+    setVideoPreview("");
+    setVideoDataUrl("");
+    if (videoInputRef.current) videoInputRef.current.value = "";
+    setNotice("已移除参考视频");
+  };
+
+  const characterMixSettingsPanel = (
+    <div className="studio-panel__section character-mix-settings-panel">
+      <div className="studio-panel__section-head">
+        <span className="studio-panel__section-title">迁移设置</span>
+      </div>
+      <div className="studio-panel__section-body">
+        <div className="character-mix-prompt-field">
+          <div className="studio-label">驱动提示词</div>
+          <textarea
+            value={promptInput}
+            onChange={(e) => setPromptInput(e.target.value)}
+            placeholder="保持角色原有服装，动作流畅自然"
+            rows={3}
+            maxLength={1000}
+          />
+        </div>
+        <div className="studio-toggle-row">
+          <div className="studio-toggle-row__copy">
+            <span className="studio-toggle-row__title">图像检测</span>
+            <span className="studio-toggle-row__desc">检测人物朝向</span>
+          </div>
+          <button type="button" className={`studio-toggle${checkImage ? " is-on" : ""}`} onClick={() => setCheckImage(!checkImage)}>
+            <span className="studio-toggle__thumb" />
+          </button>
+        </div>
+        {checkImage && characterPreview && faceHint && (
+          <div className={`character-mix-face-hint character-mix-face-hint--${faceHint}`}>
+            {faceHint === "analyzing" ? (
+              <>
+                <InfoCircleOutlined />
+                <span>正在分析人物图像...</span>
+              </>
+            ) : (
+              <>
+                <CheckCircleOutlined />
+                <span>图像已就绪，将自动检测人物面部朝向</span>
+              </>
+            )}
+          </div>
+        )}
+        <div className="studio-toggle-row">
+          <div className="studio-toggle-row__copy">
+            <span className="studio-toggle-row__title">水印输出</span>
+            <span className="studio-toggle-row__desc">含水印版本</span>
+          </div>
+          <button type="button" className={`studio-toggle${watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
+            <span className="studio-toggle__thumb" />
+          </button>
+        </div>
+        <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !characterDataUrl || !videoDataUrl}>
+          {isCreating ? <LoadingOutlined /> : <PlayCircleOutlined />}
+          {isCreating ? "生成中..." : "开始迁移"}
+        </button>
+        {resultUrl && (
+          <div className="studio-result-actions">
+            <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
+              <DownloadOutlined />
+              {isDownloadingResult ? "保存中" : "保存本地"}
+            </button>
+            <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
+              <InboxOutlined />
+              {isSavingResultAsset ? "加入中" : "加入资产库"}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <section className="image-workbench-page character-mix-page" aria-label="角色迁移">
       <header className="image-workbench-topbar">
@@ -339,8 +427,10 @@ function CharacterMixPage({
 
       <StudioToolLayout
         noTop
+        noRight
         leftPanel={
           <div
+            className="character-mix-source-panel"
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
@@ -389,6 +479,20 @@ function CharacterMixPage({
                     <strong>{characterFile || "上传人物图"}</strong>
                     <small>单人正面或半身更稳定</small>
                   </span>
+                  {characterPreview ? (
+                    <button
+                      type="button"
+                      className="studio-upload-slot__remove"
+                      aria-label="移除人物图"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        clearCharacterAsset();
+                      }}
+                    >
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
                 </label>
               </div>
             </div>
@@ -427,9 +531,24 @@ function CharacterMixPage({
                     <strong>{videoFile || "上传参考视频"}</strong>
                     <small>MP4 / MOV / AVI</small>
                   </span>
+                  {videoPreview ? (
+                    <button
+                      type="button"
+                      className="studio-upload-slot__remove"
+                      aria-label="移除参考视频"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        clearReferenceVideo();
+                      }}
+                    >
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
                 </label>
               </div>
             </div>
+            {characterMixSettingsPanel}
           </div>
         }
         canvas={
@@ -480,80 +599,6 @@ function CharacterMixPage({
             </div>
           )
         }
-        rightPanel={
-          <div className="studio-panel__section">
-            <div className="studio-panel__section-head">
-              <span className="studio-panel__section-title">迁移设置</span>
-            </div>
-            <div className="studio-panel__section-body">
-              <div style={{ marginBottom: 10 }}>
-                <div className="studio-label" style={{ fontSize: 11, color: "var(--fg-muted, #999)", marginBottom: 4 }}>驱动提示词</div>
-                <textarea
-                  value={promptInput}
-                  onChange={(e) => setPromptInput(e.target.value)}
-                  placeholder="保持角色原有服装，动作流畅自然"
-                  rows={3}
-                  maxLength={1000}
-                  style={{
-                    width: "100%", resize: "vertical", background: "var(--bg-elevated, #1a1a1a)",
-                    border: "1px solid var(--border-subtle, #333)", borderRadius: 6,
-                    padding: "6px 8px", fontSize: 12, color: "var(--fg-body, #eee)",
-                    fontFamily: "inherit", outline: "none", boxSizing: "border-box",
-                  }}
-                />
-              </div>
-              <div className="studio-toggle-row">
-                <div className="studio-toggle-row__copy">
-                  <span className="studio-toggle-row__title">图像检测</span>
-                  <span className="studio-toggle-row__desc">检测人物朝向</span>
-                </div>
-                <button type="button" className={`studio-toggle${checkImage ? " is-on" : ""}`} onClick={() => setCheckImage(!checkImage)}>
-                  <span className="studio-toggle__thumb" />
-                </button>
-              </div>
-              {checkImage && characterPreview && faceHint && (
-                <div className={`character-mix-face-hint character-mix-face-hint--${faceHint}`}>
-                  {faceHint === "analyzing" ? (
-                    <>
-                      <InfoCircleOutlined />
-                      <span>正在分析人物图像...</span>
-                    </>
-                  ) : (
-                    <>
-                      <CheckCircleOutlined />
-                      <span>图像已就绪，将自动检测人物面部朝向</span>
-                    </>
-                  )}
-                </div>
-              )}
-              <div className="studio-toggle-row">
-                <div className="studio-toggle-row__copy">
-                  <span className="studio-toggle-row__title">水印输出</span>
-                  <span className="studio-toggle-row__desc">含水印版本</span>
-                </div>
-                <button type="button" className={`studio-toggle${watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
-                  <span className="studio-toggle__thumb" />
-                </button>
-              </div>
-              <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !characterDataUrl || !videoDataUrl}>
-                {isCreating ? <LoadingOutlined /> : <PlayCircleOutlined />}
-                {isCreating ? "生成中..." : "开始迁移"}
-              </button>
-              {resultUrl && (
-                <div className="studio-result-actions">
-                  <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
-                    <DownloadOutlined />
-                    {isDownloadingResult ? "保存中" : "保存本地"}
-                  </button>
-                  <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
-                    <InboxOutlined />
-                    {isSavingResultAsset ? "加入中" : "加入资产库"}
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        }
         statusBar={
           <>
             <span className="studio-status-bar__badge studio-status-bar__badge--idle">就绪</span>
diff --git a/src/features/digital-human/DigitalHumanPage.tsx b/src/features/digital-human/DigitalHumanPage.tsx
index abe7d34..90293a4 100644
--- a/src/features/digital-human/DigitalHumanPage.tsx
+++ b/src/features/digital-human/DigitalHumanPage.tsx
@@ -206,6 +206,24 @@ function DigitalHumanPage({
     }
   };
 
+  const clearImageAsset = () => {
+    if (imagePreview) URL.revokeObjectURL(imagePreview);
+    setImageName("");
+    setImageFile(null);
+    setImagePreview("");
+    if (imageInputRef.current) imageInputRef.current.value = "";
+    setNotice("已移除参考人像");
+  };
+
+  const clearAudioAsset = () => {
+    if (audioPreview) URL.revokeObjectURL(audioPreview);
+    setAudioName("");
+    setAudioFile(null);
+    setAudioPreview("");
+    if (audioInputRef.current) audioInputRef.current.value = "";
+    setNotice("已移除音频源");
+  };
+
   const handleDownloadResult = async () => {
     if (!resultVideoUrl || isDownloadingResult) return;
     setIsDownloadingResult(true);
@@ -418,6 +436,76 @@ function DigitalHumanPage({
     }
   };
 
+  const digitalHumanSettingsPanel = (
+    <div className="studio-panel__section digital-human-settings-panel">
+      <div className="studio-panel__section-head">
+        <span className="studio-panel__section-title">参数</span>
+      </div>
+      <div className="studio-panel__section-body">
+        <div className="digital-human-prompt-field">
+          <div className="studio-label">提示词</div>
+          <textarea
+            value={promptInput}
+            onChange={(e) => setPromptInput(e.target.value)}
+            placeholder="例如：自然微笑，边说边轻微点头"
+            rows={3}
+            maxLength={2500}
+          />
+        </div>
+        <div className="studio-toggle-row">
+          <div className="studio-toggle-row__copy">
+            <span className="studio-toggle-row__title">去水印</span>
+            <span className="studio-toggle-row__desc">生成无水印预览</span>
+          </div>
+          <button type="button" className={`studio-toggle${!watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
+            <span className="studio-toggle__thumb" />
+          </button>
+        </div>
+        <div className="studio-toggle-row">
+          <div className="studio-toggle-row__copy">
+            <span className="studio-toggle-row__title">保留原声</span>
+            <span className="studio-toggle-row__desc">音频作为驱动源</span>
+          </div>
+          <button type="button" className={`studio-toggle${keepOriginalAudio ? " is-on" : ""}`} onClick={() => setKeepOriginalAudio(!keepOriginalAudio)}>
+            <span className="studio-toggle__thumb" />
+          </button>
+        </div>
+        <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !imageFile || !audioFile}>
+          <PlayCircleOutlined />
+          {isCreating ? "生成中..." : "开始生成"}
+        </button>
+        {isCreating && (
+          <button type="button" className="studio-generate-btn digital-human-cancel-btn" onClick={handleCancel} aria-label="取消生成任务">
+            <CloseCircleOutlined />
+            取消生成
+          </button>
+        )}
+        {resultVideoUrl && (
+          <button type="button" className="studio-generate-btn" onClick={() => {
+            setResultVideoUrl("");
+            setActiveTaskId("");
+            setTaskProgress(0);
+            setNotice("已清空工作区");
+          }}>
+            清空
+          </button>
+        )}
+        {resultVideoUrl && (
+          <div className="studio-result-actions">
+            <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
+              <DownloadOutlined />
+              {isDownloadingResult ? "保存中" : "保存本地"}
+            </button>
+            <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
+              <InboxOutlined />
+              {isSavingResultAsset ? "加入中" : "加入资产库"}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <section className="image-workbench-page digital-human-page" aria-label="数字人">
       <header className="image-workbench-topbar">
@@ -476,8 +564,10 @@ function DigitalHumanPage({
 
       <StudioToolLayout
         noTop
+        noRight
         leftPanel={
           <div
+            className="digital-human-source-panel"
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
@@ -523,6 +613,20 @@ function DigitalHumanPage({
                     <strong>{imageName || "上传参考图"}</strong>
                     <small>PNG / JPG / WEBP</small>
                   </span>
+                  {imagePreview ? (
+                    <button
+                      type="button"
+                      className="studio-upload-slot__remove"
+                      aria-label="移除参考人像"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        clearImageAsset();
+                      }}
+                    >
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
                 </label>
               </div>
             </div>
@@ -558,10 +662,26 @@ function DigitalHumanPage({
                     <strong>{audioName || "上传音频"}</strong>
                     <small>MP3 / WAV / M4A，建议 5 分钟内</small>
                   </span>
+                  {audioPreview ? (
+                    <button
+                      type="button"
+                      className="studio-upload-slot__remove"
+                      aria-label="移除音频源"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        clearAudioAsset();
+                      }}
+                    >
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
                 </label>
                 {audioPreview ? <audio src={audioPreview} controls className="studio-audio-preview" /> : null}
               </div>
             </div>
+
+            {digitalHumanSettingsPanel}
           </div>
         }
         canvas={
@@ -596,83 +716,6 @@ function DigitalHumanPage({
             </div>
           )
         }
-        rightPanel={
-          <>
-          <div className="studio-panel__section">
-            <div className="studio-panel__section-head">
-              <span className="studio-panel__section-title">参数</span>
-            </div>
-            <div className="studio-panel__section-body">
-              <div style={{ marginBottom: 8 }}>
-                <div className="studio-label" style={{ fontSize: 11, color: "var(--fg-muted, #999)", marginBottom: 4 }}>提示词</div>
-                <textarea
-                  value={promptInput}
-                  onChange={(e) => setPromptInput(e.target.value)}
-                  placeholder="例如：自然微笑，边说边轻微点头"
-                  rows={3}
-                  maxLength={2500}
-                  style={{
-                    width: "100%", resize: "vertical", background: "var(--bg-elevated, #1a1a1a)",
-                    border: "1px solid var(--border-subtle, #333)", borderRadius: 6,
-                    padding: "6px 8px", fontSize: 12, color: "var(--fg-body, #eee)",
-                    fontFamily: "inherit", outline: "none", boxSizing: "border-box",
-                  }}
-                />
-              </div>
-              <div className="studio-toggle-row">
-                <div className="studio-toggle-row__copy">
-                  <span className="studio-toggle-row__title">去水印</span>
-                  <span className="studio-toggle-row__desc">生成无水印预览</span>
-                </div>
-                <button type="button" className={`studio-toggle${!watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
-                  <span className="studio-toggle__thumb" />
-                </button>
-              </div>
-              <div className="studio-toggle-row">
-                <div className="studio-toggle-row__copy">
-                  <span className="studio-toggle-row__title">保留原声</span>
-                  <span className="studio-toggle-row__desc">音频作为驱动源</span>
-                </div>
-                <button type="button" className={`studio-toggle${keepOriginalAudio ? " is-on" : ""}`} onClick={() => setKeepOriginalAudio(!keepOriginalAudio)}>
-                  <span className="studio-toggle__thumb" />
-                </button>
-              </div>
-              <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !imageFile || !audioFile}>
-                <PlayCircleOutlined />
-                {isCreating ? "生成中..." : "开始生成"}
-              </button>
-              {isCreating && (
-                <button type="button" className="studio-generate-btn digital-human-cancel-btn" onClick={handleCancel} aria-label="取消生成任务">
-                  <CloseCircleOutlined />
-                  取消生成
-                </button>
-              )}
-              {resultVideoUrl && (
-                <button type="button" className="studio-generate-btn" onClick={() => {
-                  setResultVideoUrl("");
-                  setActiveTaskId("");
-                  setTaskProgress(0);
-                  setNotice("已清空工作区");
-                }}>
-                  清空
-                </button>
-              )}
-              {resultVideoUrl && (
-                <div className="studio-result-actions">
-                  <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
-                    <DownloadOutlined />
-                    {isDownloadingResult ? "保存中" : "保存本地"}
-                  </button>
-                  <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
-                    <InboxOutlined />
-                    {isSavingResultAsset ? "加入中" : "加入资产库"}
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-          </>
-        }
         statusBar={
           <>
             <span className="studio-status-bar__badge studio-status-bar__badge--running">预览</span>
diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx
index fa60aa9..5a83073 100644
--- a/src/features/home/HomePage.tsx
+++ b/src/features/home/HomePage.tsx
@@ -13,13 +13,11 @@ import "../../styles/pages/home.css";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewShowcase from "./ScriptReviewShowcase";
-import ModelGenerationShowcase from "./ModelGenerationShowcase";
 
 const [heroImage1, heroImage2, heroImage3] = ossAssets.home.heroSlides;
 const {
   ecommerce: featureEcommerceImage,
   script: featureScriptImage,
-  token: featureTokenImage,
 } = ossAssets.home.features;
 
 interface HomePageProps {
@@ -42,16 +40,6 @@ const HOME_CAROUSEL_IMAGES = [
 ];
 
 const HOME_FEATURES = [
-  {
-    key: "model",
-    eyebrow: "AI Generation",
-    title: "模型生成",
-    description: "通过AI模型生成文本、图片、视频，三种模式覆盖全内容类型，Agent对话式交互智能产出。",
-    imageUrl: featureTokenImage,
-    actionLabel: "开始生成",
-    icon: <ThunderboltOutlined />,
-    stats: ["文本生成", "图片生成", "视频生成"],
-  },
   {
     key: "ecommerce",
     eyebrow: "AI Commerce",
@@ -646,7 +634,7 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
           <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
-            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+            {feature.key !== "script" && feature.key !== "ecommerce" ? (
               <div className="omni-home__feature-copy">
                 <span>
                   {feature.icon}
@@ -660,18 +648,16 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
                 </button>
               </div>
             ) : null}
-            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce"}>
+            <div className="omni-home__feature-visual" aria-hidden={feature.key !== "script" && feature.key !== "ecommerce"}>
               {feature.key === "script" ? (
                 <ScriptReviewShowcase />
-              ) : feature.key === "model" ? (
-                <ModelGenerationShowcase />
               ) : feature.key === "ecommerce" ? (
                 <EcommerceFeatureShowcase />
               ) : (
                 <img src={feature.imageUrl} alt="" />
               )}
             </div>
-            {feature.key !== "script" && feature.key !== "model" && feature.key !== "ecommerce" ? (
+            {feature.key !== "script" && feature.key !== "ecommerce" ? (
               <div className="omni-home__feature-stats" aria-hidden="true">
                 {feature.stats.map((item) => (
                   <span key={item}>{item}</span>
diff --git a/src/features/image-workbench/ImageWorkbenchPage.tsx b/src/features/image-workbench/ImageWorkbenchPage.tsx
index ebd74e1..9361565 100644
--- a/src/features/image-workbench/ImageWorkbenchPage.tsx
+++ b/src/features/image-workbench/ImageWorkbenchPage.tsx
@@ -609,6 +609,20 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
     </div>
   );
 
+  const handleRemoveWorkbenchResult = (index: number) => {
+    setResultImages((current) => {
+      const next = current.filter((_, imageIndex) => imageIndex !== index);
+      if (next.length) {
+        saveToolTaskState("imagewb", { taskId: taskIdRef.current || "", resultUrl: next[0], status: "完成", progress: 100 });
+        setStatus(`已移除生成图，剩余 ${next.length} 张`);
+      } else {
+        clearToolTaskState("imagewb");
+        setStatus("已移除生成图");
+      }
+      return next;
+    });
+  };
+
   const handleGenerate = async () => {
     if (!referenceImages.length && !prompt.trim()) {
       setStatus("请先上传参考图或输入提示词");
@@ -797,7 +811,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
                     aria-label="删除局部重绘素材"
                     onClick={handleRemoveInpaintImage}
                   >
-                    ×
+                    <DeleteOutlined />
                   </button>
                 ) : null}
               </div>
@@ -830,7 +844,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
               </label>
             </section>
 
-            <section className="image-workbench-control-card">
+            <section className="image-workbench-control-card image-workbench-inpaint-params-card">
               <h3>参数</h3>
               <span className="image-workbench-field-label">输出分辨率</span>
               <div className="image-workbench-segmented">
@@ -842,7 +856,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
               </div>
             </section>
 
-            <section className="image-workbench-control-card">
+            <section className="image-workbench-control-card image-workbench-inpaint-prompt-card">
               <h3>提示词</h3>
               <textarea
                 className="image-workbench-prompt"
@@ -967,7 +981,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
       ) : activeTool === "camera" ? (
         <main className="image-workbench-layout image-workbench-layout--camera">
           <aside className="image-workbench-panel image-workbench-panel--left">
-            <section className="image-workbench-control-card">
+            <section className="image-workbench-control-card image-workbench-camera-material">
               <div className="image-workbench-section-title">
                 <h3>素材</h3>
                 <span>{cameraImage ? "已导入" : "待上传"}</span>
@@ -997,7 +1011,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
                     aria-label="删除镜头参考图"
                     onClick={handleRemoveCameraImage}
                   >
-                    ×
+                    <DeleteOutlined />
                   </button>
                 ) : null}
               </div>
@@ -1248,7 +1262,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
                       aria-label={`删除参考图 ${index + 1}`}
                       onClick={() => handleRemoveReferenceImage(index)}
                     >
-                      ×
+                      <DeleteOutlined />
                     </button>
                   </div>
                 ))}
@@ -1282,7 +1296,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
                     aria-label="删除参考图"
                     onClick={() => handleRemoveReferenceImage(0)}
                   >
-                    ×
+                    <DeleteOutlined />
                   </button>
                 ) : null}
               </div>
@@ -1300,7 +1314,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
             </div>
           </section>
 
-          <section className="image-workbench-control-card">
+          <section className="image-workbench-control-card image-workbench-output-card">
             <h3>输出</h3>
             <span className="image-workbench-field-label">尺寸</span>
             <div className="image-workbench-segmented">
@@ -1365,6 +1379,14 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
             <div className="image-workbench-result-grid">
               {resultImages.map((url, i) => (
                 <div key={url} className="image-workbench-result-card">
+                  <button
+                    type="button"
+                    className="image-workbench-result-remove"
+                    aria-label={`移除生成结果 ${i + 1}`}
+                    onClick={() => handleRemoveWorkbenchResult(i)}
+                  >
+                    <DeleteOutlined />
+                  </button>
                   <a href={url} target="_blank" rel="noopener noreferrer" className="image-workbench-result-item">
                     <img src={url} alt={`生成结果 ${i + 1}`} />
                   </a>
diff --git a/src/features/more/MorePage.tsx b/src/features/more/MorePage.tsx
index bf740ad..f38dacd 100644
--- a/src/features/more/MorePage.tsx
+++ b/src/features/more/MorePage.tsx
@@ -40,12 +40,14 @@ interface MoreTool {
 }
 
 const toolPreviewImages: Record<string, string> = {
+  workbench: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/toolbox/image-workbench-20260609132455.png",
   inpaint: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%B1%80%E9%83%A8%E9%87%8D%E7%BB%98.PNG",
   camera: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E9%95%9C%E5%A4%B4%E5%AE%9E%E9%AA%8C%E5%AE%A4.PNG",
   upscale: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%88%86%E8%BE%A8%E7%8E%87%E6%8F%90%E5%8D%87.PNG",
   watermarkRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%8E%BB%E6%B0%B4%E5%8D%B0.PNG",
   dialogGenerator: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%94%9F%E6%88%90%E5%99%A8.PNG",
   subtitleRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%AD%97%E5%B9%95%E5%8E%BB%E9%99%A4.PNG",
+  digitalHuman: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/toolbox/digital-human-20260609132455.png",
   characterMix: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E8%A7%92%E8%89%B2%E8%BF%81%E7%A7%BB.PNG",
   avatarConsole: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E6%95%B0%E5%AD%97%E4%BA%BA%E6%8E%A7%E5%88%B6%E5%8F%B0.PNG",
 };
diff --git a/src/features/resolution-upscale/ResolutionUpscalePage.tsx b/src/features/resolution-upscale/ResolutionUpscalePage.tsx
index 5044bc4..b07ef22 100644
--- a/src/features/resolution-upscale/ResolutionUpscalePage.tsx
+++ b/src/features/resolution-upscale/ResolutionUpscalePage.tsx
@@ -439,7 +439,7 @@ function ResolutionUpscalePage({
               </button>
               {sourcePreview ? (
                 <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
-                  ×
+                  <DeleteOutlined />
                 </button>
               ) : null}
             </div>
@@ -459,13 +459,20 @@ function ResolutionUpscalePage({
           <section className="image-workbench-control-card">
             <h3>参数</h3>
             {mode === "image" ? (
-              <label className="image-workbench-select">
-                <span>放大倍数</span>
-                <select value={imageScale} onChange={(event) => setImageScale(event.target.value as ImageScale)}>
-                  <option value="2x">2x</option>
-                  <option value="4x">4x</option>
-                </select>
-              </label>
+              <div className="resolution-upscale-scale-options" role="radiogroup" aria-label="放大倍数">
+                {(["2x", "4x"] as ImageScale[]).map((scale) => (
+                  <button
+                    key={scale}
+                    type="button"
+                    className={`resolution-upscale-scale-option${imageScale === scale ? " is-active" : ""}`}
+                    aria-pressed={imageScale === scale}
+                    onClick={() => setImageScale(scale)}
+                  >
+                    <strong>{scale}</strong>
+                    <span>{scale === "2x" ? "日常清晰增强" : "高倍细节修复"}</span>
+                  </button>
+                ))}
+              </div>
             ) : (
               <>
                 <div className="resolution-upscale-style-chips">
@@ -548,6 +555,7 @@ function ResolutionUpscalePage({
                   resultLabel={resultPreview ? resultSizeText : "等待结果"}
                   sourceAlt="原图预览"
                   resultAlt="超分结果预览"
+                  aspectRatio={sourceDimensions ? `${sourceDimensions.width} / ${sourceDimensions.height}` : undefined}
                   onSourceLoad={(width, height) => setSourceDimensions({ width, height })}
                 />
                 {resultPreview && (
diff --git a/src/features/subtitle-removal/SubtitleRemovalPage.tsx b/src/features/subtitle-removal/SubtitleRemovalPage.tsx
index c375a94..3ce8b00 100644
--- a/src/features/subtitle-removal/SubtitleRemovalPage.tsx
+++ b/src/features/subtitle-removal/SubtitleRemovalPage.tsx
@@ -360,7 +360,7 @@ function SubtitleRemovalPage({
               </button>
               {sourcePreview ? (
                 <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
-                  ×
+                  <DeleteOutlined />
                 </button>
               ) : null}
             </div>
diff --git a/src/features/watermark-removal/WatermarkRemovalPage.tsx b/src/features/watermark-removal/WatermarkRemovalPage.tsx
index bef879e..8e3f00b 100644
--- a/src/features/watermark-removal/WatermarkRemovalPage.tsx
+++ b/src/features/watermark-removal/WatermarkRemovalPage.tsx
@@ -339,7 +339,7 @@ function WatermarkRemovalPage({
               </button>
               {sourcePreview ? (
                 <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
-                  ×
+                  <DeleteOutlined />
                 </button>
               ) : null}
             </div>
diff --git a/src/features/workbench/ConversationSidebar.tsx b/src/features/workbench/ConversationSidebar.tsx
index 64ec94e..7351229 100644
--- a/src/features/workbench/ConversationSidebar.tsx
+++ b/src/features/workbench/ConversationSidebar.tsx
@@ -21,8 +21,22 @@ interface ConversationSidebarProps {
 }
 
 function formatRelativeTime(dateStr: string): string {
+  const relativeMatch = dateStr.trim().match(/^(\d+)\s*(s|sec|secs|second|seconds|m|min|mins|minute|minutes|h|hr|hrs|hour|hours|d|day|days|w|week|weeks|mo|month|months|y|yr|year|years)\s+ago$/i);
+  if (relativeMatch) {
+    const value = Number(relativeMatch[1]);
+    const unit = relativeMatch[2].toLowerCase();
+    if (unit.startsWith("s")) return "刚刚";
+    if (unit === "m" || unit.startsWith("min")) return `${value} 分钟前`;
+    if (unit === "h" || unit.startsWith("hr") || unit.startsWith("hour")) return `${value} 小时前`;
+    if (unit === "d" || unit.startsWith("day")) return `${value} 天前`;
+    if (unit === "w" || unit.startsWith("week")) return `${value} 周前`;
+    if (unit === "mo" || unit.startsWith("month")) return `${value} 个月前`;
+    if (unit === "y" || unit.startsWith("yr") || unit.startsWith("year")) return `${value} 年前`;
+  }
+
   const now = Date.now();
   const then = new Date(dateStr).getTime();
+  if (!Number.isFinite(then)) return dateStr;
   const diff = now - then;
   if (diff < 60_000) return "刚刚";
   if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
diff --git a/src/features/workbench/ProjectSidebar.tsx b/src/features/workbench/ProjectSidebar.tsx
index 2502f93..db3b2d1 100644
--- a/src/features/workbench/ProjectSidebar.tsx
+++ b/src/features/workbench/ProjectSidebar.tsx
@@ -25,13 +25,26 @@ interface ProjectSidebarProps {
 }
 
 function formatRelativeTime(dateStr: string): string {
+  const relativeMatch = dateStr.trim().match(/^(\d+)\s*(s|sec|secs|second|seconds|m|min|mins|minute|minutes|h|hr|hrs|hour|hours|d|day|days|w|week|weeks|mo|month|months|y|yr|year|years)\s+ago$/i);
+  if (relativeMatch) {
+    const value = Number(relativeMatch[1]);
+    const unit = relativeMatch[2].toLowerCase();
+    if (unit.startsWith("s")) return "刚刚";
+    if (unit === "m" || unit.startsWith("min")) return `${value} 分钟前`;
+    if (unit === "h" || unit.startsWith("hr") || unit.startsWith("hour")) return `${value} 小时前`;
+    if (unit === "d" || unit.startsWith("day")) return `${value} 天前`;
+    if (unit === "w" || unit.startsWith("week")) return `${value} 周前`;
+    if (unit === "mo" || unit.startsWith("month")) return `${value} 个月前`;
+    if (unit === "y" || unit.startsWith("yr") || unit.startsWith("year")) return `${value} 年前`;
+  }
+
   const then = new Date(dateStr).getTime();
-  if (!Number.isFinite(then)) return "";
+  if (!Number.isFinite(then)) return dateStr;
   const diff = Date.now() - then;
-  if (diff < 60_000) return "just now";
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} min ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} h ago`;
-  if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} d ago`;
+  if (diff < 60_000) return "刚刚";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
+  if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`;
   return new Date(dateStr).toLocaleDateString("zh-CN");
 }
 
diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx
index a7c5967..ddf97aa 100644
--- a/src/features/workbench/WorkbenchPage.tsx
+++ b/src/features/workbench/WorkbenchPage.tsx
@@ -278,6 +278,7 @@ function WorkbenchPage({
   const [messagePreviewAttachment, setMessagePreviewAttachment] = useState<ChatAttachment | null>(null);
   const [selectedPromptCase, setSelectedPromptCase] = useState<PromptCaseViewModel | null>(null);
   const [serverPromptCases, setServerPromptCases] = useState<PromptCaseViewModel[]>([]);
+  const [promptCaseStatus, setPromptCaseStatus] = useState<"loading" | "ready" | "error">("loading");
   const [promptCaseMeasuredRatios, setPromptCaseMeasuredRatios] = useState<Record<string, number>>({});
   const [mentionPanelPlacement, setMentionPanelPlacement] = useState<"above" | "below">("above");
   const [isGenerating, setIsGenerating] = useState(false);
@@ -718,6 +719,7 @@ function WorkbenchPage({
 
   useEffect(() => {
     let cancelled = false;
+    setPromptCaseStatus("loading");
     communityClient
       .listApprovedCases({ limit: 100, tag: "生成页面社区", sort: "latest" })
       .then((items) => {
@@ -727,10 +729,12 @@ function WorkbenchPage({
             .map(communityCaseToPromptCase)
             .filter((item): item is PromptCaseViewModel => Boolean(item)),
         );
+        setPromptCaseStatus("ready");
       })
       .catch(() => {
         if (!cancelled) {
           setServerPromptCases([]);
+          setPromptCaseStatus("error");
         }
       });
 
@@ -3371,30 +3375,48 @@ function WorkbenchPage({
             <div className="wb-showcase__header">
               <h2>图片提示词案例</h2>
             </div>
-            <div className="wb-prompt-cases__grid">
-              {promptCaseDisplayItems.map((item, index) => {
-                const measuredRatio = promptCaseMeasuredRatios[item.id];
-                return (
-                  <button
-                    key={item.id}
-                    type="button"
-                    className={getPromptCaseCardClassName(item, index, measuredRatio)}
-                    onClick={() => setSelectedPromptCase(item)}
-                  >
-                    <img
-                      src={item.imageUrl}
-                      alt={item.title}
-                      loading="lazy"
-                      onLoad={(event) => handlePromptCaseImageLoad(item.id, event)}
-                    />
-                    <div>
-                      <strong>{item.title}</strong>
-                      <em>{item.author}</em>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
+            {promptCaseStatus === "loading" ? (
+              <div className="wb-prompt-cases__grid wb-prompt-cases__grid--skeleton" aria-label="图片提示词案例加载中">
+                {Array.from({ length: 8 }, (_, index) => (
+                  <span key={index} className={`wb-prompt-case-skeleton wb-prompt-case-skeleton--${index % 4}`} />
+                ))}
+              </div>
+            ) : promptCaseStatus === "error" ? (
+              <div className="wb-prompt-cases__state">
+                <strong>案例暂时没有加载成功</strong>
+                <span>你仍然可以直接输入提示词开始生成。</span>
+              </div>
+            ) : promptCaseDisplayItems.length === 0 ? (
+              <div className="wb-prompt-cases__state">
+                <strong>暂无可展示案例</strong>
+                <span>稍后会在这里展示社区精选提示词。</span>
+              </div>
+            ) : (
+              <div className="wb-prompt-cases__grid">
+                {promptCaseDisplayItems.map((item, index) => {
+                  const measuredRatio = promptCaseMeasuredRatios[item.id];
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      className={getPromptCaseCardClassName(item, index, measuredRatio)}
+                      onClick={() => setSelectedPromptCase(item)}
+                    >
+                      <img
+                        src={item.imageUrl}
+                        alt={item.title}
+                        loading="lazy"
+                        onLoad={(event) => handlePromptCaseImageLoad(item.id, event)}
+                      />
+                      <div>
+                        <strong>{item.title}</strong>
+                        <em>{item.author}</em>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
           </section>
 
         </div>
diff --git a/src/styles/pages/image-workbench.css b/src/styles/pages/image-workbench.css
index 0b854ab..37fc21e 100644
--- a/src/styles/pages/image-workbench.css
+++ b/src/styles/pages/image-workbench.css
@@ -26,6 +26,236 @@
   margin-left: auto;
 }
 
+.digital-human-page .studio-tool-layout--no-top.studio-tool-layout--no-right,
+.character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right {
+  grid-template-columns: 400px minmax(0, 1fr);
+}
+
+.digital-human-page .studio-panel--left,
+.character-mix-page .studio-panel--left {
+  padding: 14px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.012), transparent 42%),
+    var(--bg-panel);
+}
+
+.digital-human-page .digital-human-source-panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.digital-human-page .digital-human-source-panel > .studio-panel__section {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--border-weak) 88%, white 8%);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.024), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+}
+
+.digital-human-page .digital-human-source-panel > .studio-panel__section:first-child {
+  padding-top: 14px;
+}
+
+.digital-human-page .digital-human-source-panel > .studio-panel__section:last-child {
+  border-bottom: 1px solid color-mix(in srgb, var(--border-weak) 88%, white 8%);
+}
+
+.digital-human-page .digital-human-source-panel .studio-panel__section-head {
+  min-height: 24px;
+}
+
+.digital-human-page .digital-human-source-panel .studio-panel__section-title {
+  color: var(--fg-body);
+  font-weight: 820;
+}
+
+.digital-human-page .digital-human-source-panel .studio-panel__section-chip {
+  min-height: 22px;
+  padding-inline: 8px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 68%, transparent);
+  background: var(--bg-inset);
+}
+
+.digital-human-page .digital-human-source-panel .studio-panel__section-chip--ready {
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--empty,
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled {
+  min-height: 92px;
+  padding: 14px;
+  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 78%),
+    var(--bg-inset);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--empty:hover,
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled:hover {
+  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-subtle));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 78%),
+    var(--bg-hover);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--empty__icon {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled__thumb {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-sm);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled__info strong {
+  font-weight: 800;
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled,
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled {
+  position: relative;
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot__remove,
+.character-mix-page .character-mix-source-panel .studio-upload-slot__remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--error, #ef4444) 48%, white 16%);
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent),
+    color-mix(in srgb, var(--error, #ef4444) 86%, black 14%);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 10px 22px rgb(0 0 0 / 0.26);
+  transform: translateY(-4px) scale(0.94);
+  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot--filled:hover .studio-upload-slot__remove,
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled:hover .studio-upload-slot__remove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot__remove:hover,
+.character-mix-page .character-mix-source-panel .studio-upload-slot__remove:hover {
+  border-color: color-mix(in srgb, var(--error, #ef4444) 70%, white 20%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.2), transparent),
+    var(--error, #ef4444);
+}
+
+.digital-human-page .digital-human-source-panel .studio-upload-slot__remove:focus-visible,
+.character-mix-page .character-mix-source-panel .studio-upload-slot__remove:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--error, #ef4444) 62%, transparent);
+  outline-offset: 2px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.digital-human-page .digital-human-source-panel .studio-audio-preview {
+  margin-top: 2px;
+}
+
+.digital-human-page .digital-human-settings-panel {
+  gap: 12px;
+  margin-top: 0;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--border-weak) 88%, white 8%);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.024), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+}
+
+.digital-human-page .digital-human-settings-panel .studio-panel__section-head {
+  margin-bottom: 0;
+}
+
+.digital-human-page .digital-human-settings-panel .studio-panel__section-body {
+  display: grid;
+  gap: 10px;
+}
+
+.digital-human-page .digital-human-prompt-field {
+  display: grid;
+  gap: 6px;
+}
+
+.digital-human-page .digital-human-prompt-field .studio-label {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.digital-human-page .digital-human-prompt-field textarea {
+  width: 100%;
+  min-height: 86px;
+  padding: 10px 11px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  border-radius: var(--radius-xs);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.digital-human-page .digital-human-prompt-field textarea:focus {
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-subtle));
+  background: color-mix(in srgb, var(--bg-inset) 94%, var(--accent) 6%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent);
+}
+
+.digital-human-page .digital-human-settings-panel .studio-toggle-row {
+  min-height: 44px;
+  padding: 9px 10px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--bg-inset) 94%, transparent);
+}
+
+.digital-human-page .digital-human-settings-panel .studio-generate-btn {
+  min-height: 42px;
+  border-radius: var(--radius-xs);
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.18) inset,
+    0 10px 22px rgb(0 255 136 / 0.12);
+}
+
 .digital-human-page .digital-human-cancel-btn {
   margin-top: 8px;
   border-color: color-mix(in srgb, #9ca3af 66%, transparent);
@@ -62,6 +292,193 @@
   font-size: 15px;
 }
 
+.character-mix-page .character-mix-source-panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.character-mix-page .character-mix-source-panel > .studio-panel__section {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--border-weak) 88%, white 8%);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.024), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+}
+
+.character-mix-page .character-mix-source-panel > .studio-panel__section:first-child {
+  padding-top: 14px;
+}
+
+.character-mix-page .character-mix-source-panel > .studio-panel__section:last-child {
+  border-bottom: 1px solid color-mix(in srgb, var(--border-weak) 88%, white 8%);
+}
+
+.character-mix-page .character-mix-source-panel .studio-panel__section-head {
+  min-height: 24px;
+}
+
+.character-mix-page .character-mix-source-panel .studio-panel__section-title {
+  color: var(--fg-body);
+  font-weight: 820;
+}
+
+.character-mix-page .character-mix-source-panel .studio-panel__section-chip {
+  min-height: 22px;
+  padding-inline: 8px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 68%, transparent);
+  background: var(--bg-inset);
+}
+
+.character-mix-page .character-mix-source-panel .studio-panel__section-chip--ready {
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.character-mix-page .character-mix-source-panel .studio-upload-slot--empty,
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled {
+  min-height: 88px;
+  padding: 14px;
+  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 78%),
+    var(--bg-inset);
+}
+
+.character-mix-page .character-mix-source-panel .studio-upload-slot--empty:hover,
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled:hover {
+  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-subtle));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 78%),
+    var(--bg-hover);
+}
+
+.character-mix-page .character-mix-source-panel .studio-upload-slot--empty__icon {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
+}
+
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled__thumb {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-sm);
+}
+
+.character-mix-page .character-mix-source-panel .studio-upload-slot--filled__info strong {
+  font-weight: 800;
+}
+
+.character-mix-page .character-mix-settings-panel {
+  gap: 12px;
+  margin-top: 0;
+}
+
+.character-mix-page .character-mix-settings-panel .studio-panel__section-head {
+  margin-bottom: 0;
+}
+
+.character-mix-page .character-mix-settings-panel .studio-panel__section-body {
+  display: grid;
+  gap: 10px;
+}
+
+.character-mix-page .character-mix-prompt-field {
+  display: grid;
+  gap: 6px;
+}
+
+.character-mix-page .character-mix-prompt-field .studio-label {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.character-mix-page .character-mix-prompt-field textarea {
+  width: 100%;
+  min-height: 92px;
+  padding: 10px 11px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  border-radius: var(--radius-xs);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.character-mix-page .character-mix-prompt-field textarea:focus {
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-subtle));
+  background: color-mix(in srgb, var(--bg-inset) 94%, var(--accent) 6%);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent);
+}
+
+.character-mix-page .character-mix-settings-panel .studio-toggle-row {
+  min-height: 44px;
+  padding: 9px 10px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--bg-inset) 94%, transparent);
+}
+
+.character-mix-page .character-mix-settings-panel .studio-generate-btn {
+  min-height: 42px;
+  border-radius: var(--radius-xs);
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.18) inset,
+    0 10px 22px rgb(0 255 136 / 0.12);
+}
+
+@media (min-width: 1440px) {
+  .digital-human-page .studio-tool-layout--no-top.studio-tool-layout--no-right,
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right {
+    grid-template-columns: 420px minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .digital-human-page .studio-tool-layout--no-top.studio-tool-layout--no-right,
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "left"
+      "canvas"
+      "status";
+  }
+
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right {
+    grid-template-rows: minmax(220px, 34vh) minmax(280px, 1fr) 36px;
+  }
+
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right .studio-panel--left {
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right .studio-canvas {
+    min-height: 280px;
+  }
+
+  .character-mix-page .studio-tool-layout--no-top.studio-tool-layout--no-right .studio-status-bar {
+    min-height: 36px;
+    max-height: 36px;
+  }
+}
+
 .character-mix-face-hint {
   display: flex;
   align-items: center;
@@ -339,16 +756,36 @@
 
 .image-workbench-upload-remove {
   position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 22px;
-  height: 22px;
-  border: none;
-  border-radius: 50%;
-  background: var(--error);
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--error, #ef4444) 54%, white 18%);
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent),
+    color-mix(in srgb, var(--error, #ef4444) 86%, black 14%);
   color: #fff;
-  font-size: 12px;
+  font-size: 13px;
+  line-height: 1;
   cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 10px 22px rgb(0 0 0 / 0.26);
+  transform: translateY(-4px) scale(0.94);
+  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
+}
+
+.image-workbench-upload-remove:hover {
+  border-color: color-mix(in srgb, var(--error, #ef4444) 72%, white 20%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.2), transparent),
+    var(--error, #ef4444);
+  transform: translateY(0) scale(1);
 }
 
 .image-workbench-control-card input[type="file"] {
@@ -1068,7 +1505,7 @@ textarea.image-workbench-prompt {
   position: relative;
   display: block;
   width: min(100%, 980px);
-  aspect-ratio: 16 / 9;
+  aspect-ratio: var(--compare-aspect-ratio, 16 / 9);
   max-height: 72vh;
   overflow: hidden;
   border: 1px solid var(--border-weak);
@@ -1112,7 +1549,7 @@ textarea.image-workbench-prompt {
 
 .before-after-compare__layer--result img {
   filter: saturate(1.12) contrast(1.08) brightness(1.03);
-  transform: scale(1.06);
+  transform: none;
   transform-origin: center;
 }
 
@@ -1243,7 +1680,7 @@ textarea.image-workbench-prompt {
 
 .resolution-upscale-compare__image--result img {
   filter: saturate(1.12) contrast(1.08) brightness(1.03);
-  transform: scale(1.06);
+  transform: none;
   transform-origin: center;
 }
 
@@ -1451,8 +1888,10 @@ textarea.image-workbench-prompt {
 }
 
 .resolution-upscale-image-stage > .before-after-compare {
-  flex: 1;
-  width: 100%;
+  flex: 0 1 auto;
+  width: min(100%, 980px);
+  max-width: 100%;
+  max-height: 100%;
   min-height: 0;
 }
 
@@ -1628,6 +2067,373 @@ textarea.image-workbench-prompt {
   cursor: not-allowed;
 }
 
+/* === Utility tool left panels: upscale, watermark removal, subtitle removal === */
+@media (min-width: 861px) {
+  .resolution-upscale-page > .image-workbench-layout--camera,
+  .watermark-removal-page > .image-workbench-layout--camera,
+  .subtitle-removal-page > .image-workbench-layout--camera {
+    grid-template-columns: 400px minmax(0, 1fr);
+  }
+}
+
+@media (min-width: 1440px) {
+  .resolution-upscale-page > .image-workbench-layout--camera,
+  .watermark-removal-page > .image-workbench-layout--camera,
+  .subtitle-removal-page > .image-workbench-layout--camera {
+    grid-template-columns: 420px minmax(0, 1fr);
+  }
+}
+
+.resolution-upscale-page .image-workbench-panel--left,
+.watermark-removal-page .image-workbench-panel--left,
+.subtitle-removal-page .image-workbench-panel--left {
+  gap: 12px;
+  padding: 14px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.012), transparent 42%),
+    var(--bg-panel);
+  scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
+}
+
+.resolution-upscale-page .image-workbench-control-card,
+.watermark-removal-page .image-workbench-control-card,
+.subtitle-removal-page .image-workbench-control-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border-color: color-mix(in srgb, var(--border-weak) 88%, white 8%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.024), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+}
+
+.resolution-upscale-page .image-workbench-control-card h3,
+.watermark-removal-page .image-workbench-control-card h3,
+.subtitle-removal-page .image-workbench-control-card h3 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 820;
+}
+
+.resolution-upscale-page .image-workbench-section-title,
+.watermark-removal-page .image-workbench-section-title,
+.subtitle-removal-page .image-workbench-section-title {
+  min-height: 24px;
+  margin-bottom: 0;
+}
+
+.resolution-upscale-page .image-workbench-section-title h3,
+.watermark-removal-page .image-workbench-section-title h3,
+.subtitle-removal-page .image-workbench-section-title h3 {
+  font-weight: 850;
+}
+
+.resolution-upscale-page .image-workbench-section-title span,
+.watermark-removal-page .image-workbench-section-title span,
+.subtitle-removal-page .image-workbench-section-title span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 68%, transparent);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.resolution-upscale-page .image-workbench-upload,
+.watermark-removal-page .image-workbench-upload,
+.subtitle-removal-page .image-workbench-upload {
+  min-height: 126px;
+  padding: 16px;
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 78%),
+    var(--bg-inset);
+  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
+}
+
+.resolution-upscale-page .image-workbench-upload:hover,
+.watermark-removal-page .image-workbench-upload:hover,
+.subtitle-removal-page .image-workbench-upload:hover {
+  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-subtle));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 78%),
+    var(--bg-hover);
+}
+
+.resolution-upscale-page .image-workbench-upload .anticon,
+.watermark-removal-page .image-workbench-upload .anticon,
+.subtitle-removal-page .image-workbench-upload .anticon {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  height: 46px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent);
+  font-size: 22px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
+}
+
+.resolution-upscale-page .image-workbench-upload strong,
+.watermark-removal-page .image-workbench-upload strong,
+.subtitle-removal-page .image-workbench-upload strong {
+  max-width: 100%;
+  color: var(--fg-body);
+  font-weight: 820;
+  line-height: 1.35;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resolution-upscale-page .image-workbench-upload span,
+.watermark-removal-page .image-workbench-upload span,
+.subtitle-removal-page .image-workbench-upload span {
+  max-width: 100%;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.resolution-upscale-page .image-workbench-upload:has(img),
+.watermark-removal-page .image-workbench-upload:has(img) {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  justify-items: start;
+  min-height: 116px;
+  column-gap: 14px;
+  row-gap: 4px;
+  text-align: left;
+}
+
+.resolution-upscale-page .image-workbench-upload:has(img) img,
+.watermark-removal-page .image-workbench-upload:has(img) img {
+  grid-row: 1 / 3;
+  width: 88px;
+  height: 88px;
+  max-width: none;
+  max-height: none;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, white 10%);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  object-fit: contain;
+}
+
+.resolution-upscale-page .image-workbench-upload:has(img) strong,
+.watermark-removal-page .image-workbench-upload:has(img) strong,
+.resolution-upscale-page .image-workbench-upload:has(img) span,
+.watermark-removal-page .image-workbench-upload:has(img) span {
+  text-align: left;
+}
+
+.resolution-upscale-page .image-workbench-url-row,
+.watermark-removal-page .image-workbench-url-row,
+.subtitle-removal-page .image-workbench-url-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 58px;
+  gap: 8px;
+  margin-top: 0;
+}
+
+.resolution-upscale-page .image-workbench-url-row label,
+.watermark-removal-page .image-workbench-url-row label,
+.subtitle-removal-page .image-workbench-url-row label,
+.resolution-upscale-page .image-workbench-url-row button,
+.watermark-removal-page .image-workbench-url-row button,
+.subtitle-removal-page .image-workbench-url-row button {
+  min-height: 36px;
+  border-color: color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  border-radius: var(--radius-xs);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+}
+
+.resolution-upscale-page .image-workbench-select {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+  margin-bottom: 0;
+  padding: 9px 10px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--bg-inset) 94%, transparent);
+}
+
+.resolution-upscale-page .image-workbench-select span {
+  color: var(--fg-muted);
+  font-weight: 750;
+  line-height: 1.25;
+}
+
+.resolution-upscale-page .image-workbench-select select {
+  min-height: 34px;
+  border-color: color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  background-color: var(--bg-inset);
+}
+
+.resolution-upscale-page .resolution-upscale-scale-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option {
+  display: grid;
+  justify-items: start;
+  gap: 4px;
+  min-width: 0;
+  min-height: 64px;
+  padding: 11px 12px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option:hover {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-subtle));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent),
+    var(--bg-hover);
+  color: var(--fg-body);
+  transform: translateY(-1px);
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option.is-active {
+  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
+  background: color-mix(in srgb, var(--accent) 13%, var(--bg-inset));
+  color: var(--accent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset,
+    0 12px 24px rgb(0 255 136 / 0.08);
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option strong {
+  color: var(--fg-body);
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option.is-active strong {
+  color: var(--accent);
+}
+
+.resolution-upscale-page .resolution-upscale-scale-option span {
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+  opacity: 0.8;
+}
+
+.resolution-upscale-page .image-workbench-actions,
+.watermark-removal-page .image-workbench-actions,
+.subtitle-removal-page .image-workbench-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  padding-top: 10px;
+}
+
+.resolution-upscale-page .image-workbench-actions button,
+.watermark-removal-page .image-workbench-actions button,
+.subtitle-removal-page .image-workbench-actions button {
+  min-height: 46px;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 850;
+  letter-spacing: 0;
+}
+
+.resolution-upscale-page .image-workbench-actions .image-workbench-primary,
+.watermark-removal-page .image-workbench-actions .image-workbench-primary,
+.subtitle-removal-page .image-workbench-actions .image-workbench-primary {
+  width: 100%;
+  border-color: color-mix(in srgb, var(--accent) 82%, white 18%) !important;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, white 16%, transparent), transparent),
+    var(--accent) !important;
+  color: #061014 !important;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.2) inset,
+    0 12px 26px rgb(0 255 136 / 0.13);
+}
+
+.resolution-upscale-page .image-workbench-actions .image-workbench-primary:hover:not(:disabled),
+.watermark-removal-page .image-workbench-actions .image-workbench-primary:hover:not(:disabled),
+.subtitle-removal-page .image-workbench-actions .image-workbench-primary:hover:not(:disabled) {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, white 22%, transparent), transparent),
+    var(--accent-hover) !important;
+  color: #061014 !important;
+  transform: translateY(-1px);
+}
+
+.resolution-upscale-page .image-workbench-actions button:not(.image-workbench-primary),
+.watermark-removal-page .image-workbench-actions button:not(.image-workbench-primary),
+.subtitle-removal-page .image-workbench-actions button:not(.image-workbench-primary) {
+  border-color: color-mix(in srgb, var(--border-subtle) 80%, white 12%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent),
+    var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.watermark-removal-page .watermark-removal-hint {
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--bg-inset) 94%, transparent);
+  color: var(--fg-muted);
+}
+
+.watermark-removal-page .watermark-removal-actions {
+  padding-top: 10px;
+}
+
+.watermark-removal-page .watermark-removal-actions .image-workbench-primary {
+  min-height: 46px;
+  font-size: 13px;
+}
+
+@media (max-width: 860px) {
+  .resolution-upscale-page > .image-workbench-layout--camera,
+  .watermark-removal-page > .image-workbench-layout--camera,
+  .subtitle-removal-page > .image-workbench-layout--camera {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+    overflow: visible;
+  }
+
+  .resolution-upscale-page .image-workbench-panel--left,
+  .watermark-removal-page .image-workbench-panel--left,
+  .subtitle-removal-page .image-workbench-panel--left {
+    overflow: visible;
+    max-height: none;
+  }
+}
+
 /* === Generation Progress & Results === */
 .image-workbench-generating {
   display: flex;
@@ -1719,6 +2525,7 @@ textarea.image-workbench-prompt {
 
 .image-workbench-result-card {
   display: grid;
+  position: relative;
   min-width: 0;
   width: 100%;
   max-width: 560px;
@@ -1726,6 +2533,37 @@ textarea.image-workbench-prompt {
   gap: 14px;
 }
 
+.image-workbench-result-remove {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
+  display: inline-grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid color-mix(in srgb, var(--error) 55%, white 12%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--error) 82%, black 18%);
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0;
+  box-shadow: 0 12px 24px rgb(0 0 0 / 0.24);
+  transform: translateY(-4px) scale(0.96);
+  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
+}
+
+.image-workbench-result-card:hover .image-workbench-result-remove,
+.image-workbench-result-card:focus-within .image-workbench-result-remove {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.image-workbench-result-remove:hover {
+  background: var(--error);
+}
+
 .image-workbench-result-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1797,3 +2635,1013 @@ textarea.image-workbench-prompt {
 .image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
 .image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
 .image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
+
+/* Scoped adjustments from image workbench review comments. */
+@media (min-width: 861px) {
+  .image-workbench-page--image-tool > .image-workbench-layout:not(.image-workbench-layout--camera):not(.image-workbench-layout--inpaint),
+  .image-workbench-page--image-tool > .image-workbench-layout--camera,
+  .image-workbench-page--image-tool > .image-workbench-layout--inpaint {
+    grid-template-columns: 400px minmax(0, 1fr);
+  }
+}
+
+@media (min-width: 1440px) {
+  .image-workbench-page--image-tool > .image-workbench-layout:not(.image-workbench-layout--camera):not(.image-workbench-layout--inpaint),
+  .image-workbench-page--image-tool > .image-workbench-layout--camera,
+  .image-workbench-page--image-tool > .image-workbench-layout--inpaint {
+    grid-template-columns: 420px minmax(0, 1fr);
+  }
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card {
+  grid-template-columns: 44px minmax(0, 1fr);
+  align-items: center;
+  column-gap: 14px;
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card h3 {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card .image-workbench-segmented {
+  justify-content: stretch;
+}
+
+.image-workbench-page--image-tool .image-workbench-prompt textarea {
+  min-height: 132px;
+}
+
+.image-workbench-page--image-tool .image-workbench-panel--left {
+  gap: 11px;
+}
+
+.image-workbench-page--image-tool .image-workbench-control-card {
+  border-color: color-mix(in srgb, var(--border-weak) 88%, white 8%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+}
+
+.image-workbench-page--image-tool .image-workbench-section-title {
+  margin-bottom: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-url-row {
+  margin-top: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-url-row label,
+.image-workbench-page--image-tool .image-workbench-url-row button {
+  min-height: 36px;
+}
+
+.image-workbench-page--image-tool .image-workbench-output-card {
+  grid-template-columns: 46px minmax(0, 1fr);
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-output-card h3 {
+  grid-column: 1 / -1;
+  margin-bottom: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-output-card .image-workbench-field-label {
+  grid-column: 1;
+  margin: 0;
+  align-self: center;
+  color: var(--fg-muted);
+  font-weight: 700;
+}
+
+.image-workbench-page--image-tool .image-workbench-output-card > .image-workbench-segmented {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.image-workbench-page--image-tool .image-workbench-output-card > .image-workbench-segmented button,
+.image-workbench-page--image-tool .image-workbench-count button {
+  min-width: 0;
+  min-height: 34px;
+  padding-inline: 8px;
+  border-radius: 9px;
+  font-weight: 750;
+}
+
+.image-workbench-page--image-tool .image-workbench-count {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-count > span {
+  color: var(--fg-muted);
+  font-weight: 700;
+}
+
+.image-workbench-page--image-tool .image-workbench-count > div {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.image-workbench-page--image-tool .image-workbench-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.82fr);
+  gap: 10px;
+  padding-top: 10px;
+}
+
+.image-workbench-page--image-tool .image-workbench-actions button {
+  min-width: 0;
+  min-height: 44px;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.image-workbench-page--image-tool .image-workbench-actions .image-workbench-primary {
+  border-color: color-mix(in srgb, var(--accent) 82%, white 18%) !important;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, white 16%, transparent), transparent),
+    var(--accent) !important;
+  color: #061014 !important;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.2) inset,
+    0 10px 24px rgb(0 255 136 / 0.14);
+}
+
+.image-workbench-page--image-tool .image-workbench-actions .image-workbench-primary:hover:not(:disabled) {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, white 22%, transparent), transparent),
+    var(--accent-hover) !important;
+  color: #061014 !important;
+  transform: translateY(-1px);
+}
+
+.image-workbench-page--image-tool .image-workbench-actions button:not(.image-workbench-primary) {
+  border-color: color-mix(in srgb, var(--border-subtle) 80%, white 12%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent),
+    var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.image-workbench-page--image-tool .image-workbench-actions button:not(.image-workbench-primary):hover {
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-subtle));
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card {
+  display: grid;
+  grid-template-columns: 68px minmax(0, 1fr);
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 12px;
+  padding: 15px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card h3 {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: var(--fg-body);
+  font-weight: 850;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card .image-workbench-field-label {
+  margin: 0;
+  color: var(--fg-muted);
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card .image-workbench-segmented {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 5px;
+  min-width: 0;
+  padding: 3px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card .image-workbench-segmented button {
+  min-width: 0;
+  min-height: 34px;
+  padding-inline: 5px;
+  border-color: transparent;
+  border-radius: 7px;
+  background: transparent;
+  font-weight: 750;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card .image-workbench-segmented button:hover {
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-params-card .image-workbench-segmented button.is-active {
+  border-color: color-mix(in srgb, var(--accent) 64%, transparent);
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-prompt-card {
+  display: grid;
+  gap: 11px;
+  padding: 15px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-prompt-card h3 {
+  margin: 0;
+  color: var(--fg-body);
+  font-weight: 850;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-prompt-card textarea.image-workbench-prompt {
+  min-height: 152px;
+  padding: 13px 14px;
+  border-radius: var(--radius-sm);
+  border-color: color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+  line-height: 1.62;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-inpaint-prompt-card textarea.image-workbench-prompt:focus {
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-subtle));
+  background: color-mix(in srgb, var(--bg-inset) 94%, var(--accent) 6%);
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent),
+    0 12px 28px rgb(0 0 0 / 0.12);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-actions {
+  grid-template-columns: minmax(0, 1fr);
+  padding-top: 8px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--inpaint .image-workbench-actions .image-workbench-primary {
+  width: 100%;
+  min-height: 46px;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.18) inset,
+    0 12px 26px rgb(0 255 136 / 0.13);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-prompt {
+  display: grid;
+  gap: 11px;
+  padding: 15px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-prompt .image-workbench-section-title {
+  margin-bottom: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-prompt h3 {
+  color: var(--fg-body);
+  font-weight: 850;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-prompt textarea {
+  min-height: 112px;
+  padding: 13px 14px;
+  border-radius: var(--radius-sm);
+  border-color: color-mix(in srgb, var(--border-subtle) 82%, white 10%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset);
+  line-height: 1.62;
+  outline: none;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-prompt textarea:focus {
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-subtle));
+  background: color-mix(in srgb, var(--bg-inset) 94%, var(--accent) 6%);
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent),
+    0 12px 28px rgb(0 0 0 / 0.12);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-actions {
+  grid-template-columns: minmax(0, 1fr);
+  padding-top: 8px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-actions .image-workbench-primary {
+  width: 100%;
+  min-height: 46px;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.18) inset,
+    0 12px 26px rgb(0 255 136 / 0.13);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-panel--left {
+  gap: 10px;
+  scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-control-card {
+  padding: 14px;
+  border-color: color-mix(in srgb, var(--border-weak) 86%, white 8%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.022), transparent),
+    color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-control-card h3 {
+  color: var(--fg-body);
+  font-weight: 820;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-material .image-workbench-upload,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-panel--left > .image-workbench-control-card:first-child .image-workbench-upload {
+  min-height: 118px;
+  padding: 16px;
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--border-subtle) 76%, white 8%);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 74%),
+    var(--bg-inset);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-material .image-workbench-upload .anticon,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-panel--left > .image-workbench-control-card:first-child .image-workbench-upload .anticon {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--accent);
+  font-size: 20px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-material .image-workbench-url-row,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-panel--left > .image-workbench-control-card:first-child .image-workbench-url-row {
+  grid-template-columns: minmax(0, 1fr) 56px;
+  gap: 8px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-presets .image-workbench-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-presets .image-workbench-chip-grid button,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects .image-workbench-chip {
+  min-width: 0;
+  min-height: 31px;
+  padding: 0 8px !important;
+  border-radius: 8px !important;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.016), transparent),
+    var(--bg-inset) !important;
+  color: var(--fg-muted) !important;
+  font-size: 12px !important;
+  font-weight: 650;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-presets .image-workbench-chip-grid button:hover,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects .image-workbench-chip:hover {
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-subtle)) !important;
+  color: var(--fg-body) !important;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-presets .image-workbench-chip-grid button.is-active,
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects .image-workbench-chip.is-active {
+  border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset)) !important;
+  color: var(--accent) !important;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-direction {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: 9px;
+  min-height: 164px;
+  padding: 12px 14px 14px;
+  overflow: hidden;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-direction h3 {
+  margin: 0;
+  align-self: start;
+  color: var(--fg-body);
+  font-weight: 820;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad {
+  display: grid;
+  grid-template-columns: repeat(3, 30px);
+  grid-template-rows: repeat(3, 30px);
+  align-self: center;
+  justify-self: center;
+  justify-content: center;
+  width: 118px;
+  gap: 5px;
+  min-width: 0;
+  min-height: 0;
+  height: auto;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 66%),
+    var(--bg-inset);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.025) inset;
+  box-sizing: border-box;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  min-width: 0;
+  min-height: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  line-height: 1;
+  font-size: 12px;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:nth-child(1) {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:nth-child(2) {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:nth-child(4) {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:nth-child(5) {
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-direction-pad button:hover {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-subtle));
+  color: var(--fg-body);
+  transform: translateY(-1px);
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-fine {
+  display: grid;
+  gap: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-fine h3 {
+  margin-bottom: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-fine .image-workbench-range {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr) 44px;
+  gap: 10px;
+  margin: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-fine .image-workbench-range span {
+  min-width: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-fine .image-workbench-range input[type="range"] {
+  min-width: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects .image-workbench-section-title {
+  margin-bottom: 10px;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects .image-workbench-section-title span {
+  font-weight: 700;
+}
+
+.image-workbench-page--image-tool .image-workbench-layout--camera .image-workbench-camera-effects > div:last-child {
+  display: grid !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 7px !important;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-ghost {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  max-width: min(460px, 92%);
+  padding: 28px 34px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, transparent);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
+    rgb(0 0 0 / 0.12);
+  text-align: center;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.04) inset,
+    0 16px 34px rgb(0 0 0 / 0.16);
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-ghost:hover {
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
+    rgb(0 0 0 / 0.16);
+  outline: none;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-ghost__icon {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent);
+  font-size: 26px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-ghost__title {
+  color: var(--fg-body);
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-ghost__hint {
+  max-width: 390px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-image {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: clamp(18px, 2.4vw, 34px);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas .studio-canvas-image img {
+  display: block;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: calc(100% - 2px);
+  max-height: calc(100% - 2px);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, white 10%);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  box-sizing: border-box;
+  object-fit: contain;
+  box-shadow:
+    0 1px 0 rgb(255 255 255 / 0.04) inset,
+    0 16px 36px rgb(0 0 0 / 0.22);
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) {
+  grid-template-columns: minmax(0, 1fr);
+  align-content: stretch;
+  place-items: center;
+  padding: clamp(18px, 2.4vw, 34px);
+  overflow: hidden;
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-card {
+  grid-template-rows: minmax(0, 1fr) auto;
+  width: min(74%, 680px);
+  height: min(100%, 940px);
+  max-width: calc(100% - 4px);
+  max-height: calc(100% - 4px);
+  align-content: stretch;
+  gap: 0;
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-item {
+  display: grid;
+  min-height: 0;
+  place-items: center;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: var(--bg-inset);
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-item img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-actions {
+  border: 1px solid var(--border-weak);
+  border-top: 0;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  background: color-mix(in srgb, var(--bg-elevated) 92%, black 8%);
+  overflow: hidden;
+}
+
+.image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-actions button {
+  min-height: 46px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+@media (max-width: 1180px) {
+  .image-workbench-page--image-tool .image-workbench-result-grid:has(.image-workbench-result-card:only-child) .image-workbench-result-card {
+    width: min(82%, 620px);
+  }
+}
+
+.image-workbench-page--image-tool .image-workbench-upload:has(img) {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  justify-items: start;
+  min-height: 112px;
+  padding: 14px;
+  column-gap: 14px;
+  row-gap: 4px;
+  text-align: left;
+}
+
+.image-workbench-page--image-tool .image-workbench-upload:has(img) img {
+  grid-row: 1 / 3;
+  width: 84px;
+  height: 96px;
+  max-width: none;
+  max-height: none;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, white 12%);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  object-fit: contain;
+}
+
+.image-workbench-page--image-tool .image-workbench-upload:has(img) strong {
+  align-self: end;
+}
+
+.image-workbench-page--image-tool .image-workbench-upload:has(img) span {
+  align-self: start;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: 92px;
+  max-height: 238px;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile {
+  grid-column: auto;
+  order: -1;
+  display: grid;
+  grid-template-rows: auto auto auto;
+  place-items: center;
+  height: 92px;
+  min-height: 92px;
+  padding: 10px 8px;
+  gap: 4px;
+  border-style: solid;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
+    var(--bg-inset);
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile strong,
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile .anticon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile strong {
+  font-size: 12px;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-grid .image-workbench-upload--tile span {
+  font-size: 11px;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-thumb {
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-xs);
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, white 10%);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  box-sizing: border-box;
+  object-fit: contain;
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-thumb .image-workbench-upload-remove {
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-3px) scale(0.94);
+}
+
+.image-workbench-page--image-tool .image-workbench-reference-thumb:hover .image-workbench-upload-remove,
+.image-workbench-page--image-tool .image-workbench-reference-thumb:focus-within .image-workbench-upload-remove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.image-workbench-page--image-tool .image-workbench-upload-shell .image-workbench-upload-remove,
+.resolution-upscale-page .image-workbench-upload-shell .image-workbench-upload-remove,
+.watermark-removal-page .image-workbench-upload-shell .image-workbench-upload-remove,
+.subtitle-removal-page .image-workbench-upload-shell .image-workbench-upload-remove {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-3px) scale(0.94);
+}
+
+.image-workbench-page--image-tool .image-workbench-upload-shell:hover .image-workbench-upload-remove,
+.resolution-upscale-page .image-workbench-upload-shell:hover .image-workbench-upload-remove,
+.watermark-removal-page .image-workbench-upload-shell:hover .image-workbench-upload-remove,
+.subtitle-removal-page .image-workbench-upload-shell:hover .image-workbench-upload-remove {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.image-workbench-page--image-tool .image-workbench-upload-shell .image-workbench-upload-remove:focus-visible,
+.resolution-upscale-page .image-workbench-upload-shell .image-workbench-upload-remove:focus-visible,
+.watermark-removal-page .image-workbench-upload-shell .image-workbench-upload-remove:focus-visible,
+.subtitle-removal-page .image-workbench-upload-shell .image-workbench-upload-remove:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  outline: 2px solid color-mix(in srgb, var(--error, #ef4444) 62%, transparent);
+  outline-offset: 2px;
+  transform: translateY(0) scale(1);
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card {
+  min-height: 58px;
+  padding-block: 12px;
+  border-color: color-mix(in srgb, var(--border-weak) 86%, white 10%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent),
+    color-mix(in srgb, var(--bg-elevated) 92%, black 8%);
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card h3 {
+  color: var(--fg-body);
+  font-weight: 850;
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card .image-workbench-segmented {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 3px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, white 10%);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  gap: 3px;
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card .image-workbench-segmented button {
+  min-height: 32px;
+  min-width: 0;
+  padding-inline: 12px;
+  border-color: transparent;
+  border-radius: 7px;
+  background: transparent;
+}
+
+.image-workbench-page--image-tool .image-workbench-mode-card .image-workbench-segmented button.is-active {
+  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas-grid {
+  place-items: center;
+  align-content: center;
+  padding: clamp(18px, 2.4vw, 34px);
+}
+
+.image-workbench-page--image-tool .image-workbench-canvas-grid img {
+  object-fit: contain;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, white 10%);
+  background: var(--bg-inset);
+  box-shadow: 0 14px 30px rgb(0 0 0 / 0.16);
+}
+
+@media (max-width: 860px) {
+  .image-workbench-page--image-tool {
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+    padding: 0 12px max(72px, env(safe-area-inset-bottom));
+    box-sizing: border-box;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-topbar {
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    min-width: 0;
+    min-height: 52px;
+    padding: 8px 0;
+    overflow: hidden;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-back-to-more {
+    flex: 0 0 auto;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-tool-strip {
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 2px 2px 6px;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-tool-strip::-webkit-scrollbar {
+    display: none;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-tool-strip button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-subbar {
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    min-width: 0;
+    min-height: 52px;
+    padding: 8px 0;
+    overflow: hidden;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-subbar__heading {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-mode-tabs {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-left: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 3px;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-mode-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-mode-tabs button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .image-workbench-page--image-tool > .image-workbench-layout,
+  .image-workbench-page--image-tool > .image-workbench-layout--camera,
+  .image-workbench-page--image-tool > .image-workbench-layout--inpaint {
+    grid-template-columns: minmax(0, 1fr);
+    flex: 0 0 auto;
+    min-height: 0;
+    overflow: visible;
+    gap: 12px;
+    padding: 12px 0;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-panel {
+    overflow: visible;
+    max-height: none;
+    padding: 0;
+    border-right: 0;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-canvas {
+    min-height: min(440px, 58vh);
+    overflow: hidden;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-status {
+    position: fixed;
+    bottom: 0;
+    left: 12px;
+    right: 12px;
+    z-index: 5;
+    flex: 0 0 auto;
+    width: auto;
+    min-width: 0;
+    min-height: 42px;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+    box-sizing: border-box;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-status p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-status em {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 520px) {
+  .image-workbench-page--image-tool {
+    padding-inline: 10px;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-status {
+    left: 10px;
+    right: 10px;
+  }
+
+  .image-workbench-page--image-tool .image-workbench-canvas {
+    min-height: 360px;
+  }
+}
diff --git a/src/styles/pages/subtitle-removal.css b/src/styles/pages/subtitle-removal.css
index efc87b9..b92ba8e 100644
--- a/src/styles/pages/subtitle-removal.css
+++ b/src/styles/pages/subtitle-removal.css
@@ -2,50 +2,74 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
-  margin-top: 8px;
+  margin-top: 0;
 }
 
 .subtitle-removal-preset {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  justify-items: center;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+  min-width: 0;
+  min-height: 92px;
   padding: 10px 8px;
-  border: 1.5px solid var(--border-weak, #e5e5e5);
-  border-radius: 10px;
-  background: var(--bg-surface, #fff);
+  border: 1px solid color-mix(in srgb, var(--border-subtle, #333) 82%, white 10%);
+  border-radius: var(--radius-xs, 8px);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent),
+    var(--bg-inset, #111);
+  color: var(--fg-muted, #aaa);
   cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
 }
 
 .subtitle-removal-preset:hover {
-  border-color: var(--accent, #0d9488);
-  background: var(--bg-elevated, #f8f8f8);
+  border-color: color-mix(in srgb, var(--accent, #0d9488) 42%, var(--border-subtle, #333));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--accent, #0d9488) 8%, transparent), transparent),
+    var(--bg-hover, #171717);
+  color: var(--fg-body, #eee);
+  transform: translateY(-1px);
 }
 
 .subtitle-removal-preset.is-active {
-  border-color: var(--accent, #0d9488);
-  background: color-mix(in srgb, var(--accent, #0d9488) 6%, transparent);
+  border-color: color-mix(in srgb, var(--accent, #0d9488) 72%, transparent);
+  background: color-mix(in srgb, var(--accent, #0d9488) 13%, var(--bg-inset, #111));
+  color: var(--accent, #0d9488);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0d9488) 8%, transparent) inset;
 }
 
 .subtitle-removal-preset strong {
+  max-width: 100%;
+  color: var(--fg-body, #eee);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .subtitle-removal-preset span {
+  max-width: 100%;
+  color: var(--fg-muted, #aaa);
   font-size: 11px;
-  opacity: 0.55;
+  line-height: 1.35;
+  opacity: 0.82;
   text-align: center;
 }
 
 .subtitle-removal-preset__visual {
   position: relative;
-  width: 48px;
-  height: 32px;
-  border-radius: 4px;
-  background: var(--bg-page, #f0f0f0);
-  border: 1px solid var(--border-weak, #e0e0e0);
+  width: 54px;
+  height: 34px;
+  border: 1px solid color-mix(in srgb, var(--border-subtle, #333) 78%, white 10%);
+  border-radius: 6px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent),
+    color-mix(in srgb, var(--bg-elevated, #161616) 92%, black 8%);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 0.035) inset;
   overflow: hidden;
 }
 
@@ -55,9 +79,9 @@
   right: 0;
   top: var(--region-top);
   height: var(--region-height);
-  background: color-mix(in srgb, var(--accent, #0d9488) 30%, transparent);
-  border-top: 1.5px dashed var(--accent, #0d9488);
-  border-bottom: 1.5px dashed var(--accent, #0d9488);
+  background: color-mix(in srgb, var(--accent, #0d9488) 24%, transparent);
+  border-top: 1px dashed var(--accent, #0d9488);
+  border-bottom: 1px dashed var(--accent, #0d9488);
 }
 
 .subtitle-removal-preview {
diff --git a/src/styles/pages/workbench.css b/src/styles/pages/workbench.css
index 97b1abc..0bb195b 100644
--- a/src/styles/pages/workbench.css
+++ b/src/styles/pages/workbench.css
@@ -2319,3 +2319,669 @@
     display: none;
   }
 }
+
+/* Workbench new-conversation commercial polish. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page {
+  --wb-elevated-line: rgba(210, 255, 232, 0.12);
+  --wb-elevated-line-active: rgba(var(--accent-rgb), 0.38);
+  --wb-elevated-fill: rgba(18, 22, 21, 0.94);
+  --wb-control-fill: rgba(255, 255, 255, 0.052);
+  --wb-control-fill-hover: rgba(var(--accent-rgb), 0.105);
+  --wb-copy-dim: rgba(202, 215, 207, 0.68);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home {
+  gap: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title {
+  color: rgba(246, 250, 247, 0.96);
+  font-weight: 760;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content {
+  border-color: var(--wb-elevated-line);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.024)),
+    var(--wb-elevated-fill);
+  box-shadow:
+    0 20px 46px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.065);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content:focus-within {
+  border-color: var(--wb-elevated-line-active);
+  box-shadow:
+    0 0 0 1px rgba(var(--accent-rgb), 0.12),
+    0 24px 56px rgba(0, 0, 0, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__highlight {
+  color: rgba(246, 250, 247, 0.95);
+  font-weight: 450;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar {
+  align-items: center;
+  gap: 10px;
+  border-top-color: rgba(210, 255, 232, 0.095);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left {
+  row-gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger {
+  border-color: rgba(210, 255, 232, 0.105);
+  background: var(--wb-control-fill);
+  color: rgba(246, 250, 247, 0.86);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger:hover:not(:disabled),
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger:hover,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--wb-control-fill-hover);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__billing-estimate {
+  color: var(--wb-copy-dim);
+  font-size: 11px;
+  font-weight: 580;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary {
+  box-shadow:
+    0 12px 26px rgba(var(--accent-rgb), 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.26);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary.is-loading {
+  cursor: progress;
+  opacity: 0.92;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0.045)),
+    rgba(255, 255, 255, 0.02);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-label,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-count {
+  color: rgba(210, 255, 232, 0.84);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__suggestions {
+  align-items: center;
+  margin-top: -2px;
+  min-height: 34px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip {
+  border-color: rgba(210, 255, 232, 0.105);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)),
+    rgba(255, 255, 255, 0.018);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip__icon {
+  color: rgba(var(--accent-rgb), 0.88);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases {
+  padding-bottom: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases .wb-showcase__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-showcase__header h2 {
+  color: rgba(224, 236, 229, 0.72);
+  font-size: 12px;
+  font-weight: 680;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card {
+  border-color: rgba(210, 255, 232, 0.085);
+  background: #090e0d;
+  box-shadow:
+    0 14px 28px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card:hover,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.32);
+  box-shadow:
+    0 18px 36px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(var(--accent-rgb), 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card > div {
+  gap: 5px;
+  background:
+    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.54) 24%, rgba(0, 0, 0, 0.9));
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card strong {
+  color: rgba(255, 255, 255, 0.95);
+  line-height: 1.38;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card em {
+  color: rgba(210, 224, 216, 0.68);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__state {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 6px;
+  min-height: 188px;
+  padding: 26px;
+  border: 1px dashed rgba(210, 255, 232, 0.13);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
+    rgba(255, 255, 255, 0.018);
+  color: rgba(246, 250, 247, 0.9);
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__state strong {
+  font-size: 14px;
+  font-weight: 720;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__state span {
+  color: var(--wb-copy-dim);
+  font-size: 12px;
+  font-weight: 520;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-skeleton {
+  display: block;
+  min-height: 160px;
+  grid-row: span 16;
+  overflow: hidden;
+  border: 1px solid rgba(210, 255, 232, 0.07);
+  border-radius: 14px;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
+    rgba(255, 255, 255, 0.025);
+  background-size: 220% 100%;
+  animation: wb-prompt-case-loading 1.15s ease-in-out infinite;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-skeleton--1,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-skeleton--3 {
+  grid-row: span 22;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-message-list > .conversation-sidebar__empty {
+  border-color: rgba(210, 255, 232, 0.14);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
+    rgba(255, 255, 255, 0.018);
+  color: rgba(210, 224, 216, 0.78);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar {
+  border-left-color: rgba(210, 255, 232, 0.095);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%),
+    rgba(12, 15, 15, 0.97);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__header {
+  border-bottom-color: rgba(210, 255, 232, 0.095);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__new {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.17), rgba(var(--accent-rgb), 0.095)),
+    rgba(255, 255, 255, 0.02);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item {
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item:hover {
+  transform: translateX(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__item-title {
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__empty {
+  border-color: rgba(210, 255, 232, 0.12);
+  background: rgba(255, 255, 255, 0.022);
+}
+
+@keyframes wb-prompt-case-loading {
+  0% {
+    background-position: 120% 0;
+  }
+
+  100% {
+    background-position: -120% 0;
+  }
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .ai-workbench-shell > .conversation-sidebar.is-collapsed {
+    inset: calc(56px + var(--dg-mobile-nav-space, 70px) + 16px) 8px auto auto !important;
+    transform: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home {
+    gap: 16px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__composer {
+    width: 100%;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__content,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__content {
+    padding: 13px;
+    border-radius: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs {
+    width: 60px;
+    min-width: 60px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload {
+    width: 58px;
+    height: 58px;
+    transform: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__highlight,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__textarea,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__highlight {
+    min-height: 88px;
+    padding-right: 0;
+    font-size: 15px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    padding-top: 9px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left {
+    max-width: none;
+    overflow-x: auto;
+    padding-bottom: 2px;
+    scrollbar-width: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left::-webkit-scrollbar,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__suggestions::-webkit-scrollbar {
+    display: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-right {
+    align-self: stretch;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    justify-items: end;
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__billing-estimate {
+    max-width: 112px;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases {
+    margin-top: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__state {
+    min-height: 156px;
+    border-radius: 14px;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__title {
+    font-size: 23px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__input-row {
+    gap: 9px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger {
+    height: 32px;
+    max-width: 132px;
+    border-radius: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-suggestion-chip {
+    min-height: 32px;
+    height: 32px;
+    padding: 0 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases__grid {
+    gap: 7px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-card {
+    border-radius: 12px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-case-skeleton {
+    animation: none;
+  }
+}
+
+/* Browser feedback: scale the launch composer with large canvases and keep reference previews intact. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__composer {
+  width: min(100%, clamp(920px, 72vw, 1160px));
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__content {
+  padding: clamp(18px, 1.25vw, 24px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__textarea,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__highlight {
+  min-height: clamp(78px, 8svh, 112px);
+  max-height: clamp(180px, 24svh, 260px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__suggestions {
+  max-width: min(100%, clamp(920px, 72vw, 1160px));
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card {
+  isolation: isolate;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom {
+  z-index: 12;
+  width: min(280px, calc(100vw - 48px));
+  height: auto;
+  min-height: 188px;
+  max-height: min(340px, calc(100svh - 180px));
+  aspect-ratio: 1 / 1;
+  padding: 8px;
+  border-color: rgba(210, 255, 232, 0.18);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
+    rgba(5, 8, 8, 0.96);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom img,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom video {
+  border-radius: 11px;
+  object-fit: contain;
+}
+
+@media (min-width: 1600px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__composer,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__suggestions {
+    width: min(100%, clamp(1040px, 64vw, 1240px));
+    max-width: none;
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__composer,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-home__suggestions {
+    width: 100%;
+    max-width: 920px;
+  }
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__content {
+    padding: 13px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__textarea,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__highlight {
+    min-height: 88px;
+    max-height: 190px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-zoom {
+    width: min(230px, calc(100vw - 32px));
+    min-height: 168px;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-stack {
+  top: calc(100% + 12px);
+  bottom: auto;
+  isolation: isolate;
+  z-index: 120;
+  width: min(320px, calc(100vw - 64px));
+  max-width: calc(100vw - 64px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-zoom {
+  top: 0;
+  transform: translateY(0) scale(0.98);
+  transform-origin: left top;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__ref-card:hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}
+
+/* Keep reference previews above the feed, and open lower-row thumbnails upward. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__composer {
+  position: relative;
+  z-index: 30;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-home__suggestions {
+  position: relative;
+  z-index: 10;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-prompt-cases {
+  position: relative;
+  z-index: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs.has-items.is-open {
+  z-index: 220;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack {
+  z-index: 240;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5) .wb-composer__ref-zoom {
+  top: auto;
+  bottom: calc(100% + 12px);
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: left bottom;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5):hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5) .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 4) .wb-composer__ref-zoom {
+    top: auto;
+    bottom: calc(100% + 10px);
+    transform: translateY(-6px) scale(0.98);
+    transform-origin: left bottom;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 4):hover .wb-composer__ref-zoom,
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:nth-child(n + 4) .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+    transform: translateY(0) scale(1);
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack {
+  isolation: isolate;
+  z-index: 120;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card {
+  isolation: auto;
+  z-index: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-add-more {
+  position: relative;
+  z-index: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:hover,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:focus-within {
+  z-index: 180;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-zoom {
+  left: 0;
+  top: calc(100% + 12px);
+  z-index: 80;
+  transform: translateY(6px) scale(0.98);
+  transform-origin: left top;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-card:hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-stack {
+    top: calc(100% + 8px);
+    width: min(230px, calc(100vw - 24px));
+    max-width: calc(100vw - 24px);
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card:hover,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card:focus-within {
+  z-index: 140;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card:hover .wb-composer__ref-preview,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-card:focus-within .wb-composer__ref-preview {
+  border-color: rgba(var(--accent-rgb), 0.48);
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card {
+  isolation: auto;
+  z-index: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-add-more {
+  position: relative;
+  z-index: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card:hover,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card:focus-within {
+  z-index: 180;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-zoom {
+  left: 0;
+  top: calc(100% + 12px);
+  z-index: 80;
+  transform: translateY(6px) scale(0.98);
+  transform-origin: left top;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__ref-card:hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}
+
+/* Final override for multi-row reference stacks on the launch composer. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5) .wb-composer__ref-zoom {
+  top: auto;
+  bottom: calc(100% + 12px);
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: left bottom;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5):hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-launch .wb-composer__refs .wb-composer__ref-card:nth-child(n + 5) .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}
+
+/* Keep the reference stack balanced in the active bottom composer. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack {
+  grid-template-columns: repeat(4, 58px);
+  width: min(286px, calc(100vw - 40px));
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs .wb-composer__ref-stack {
+    grid-template-columns: repeat(3, 58px);
+    width: min(218px, calc(100vw - 24px));
+  }
+}
+
+/* The active bottom composer sits below the upload stack, so previews should open upward. */
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer__refs .wb-composer__ref-card .wb-composer__ref-zoom {
+  top: auto;
+  bottom: calc(100% + 12px);
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: left bottom;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer__refs .wb-composer__ref-card:hover .wb-composer__ref-zoom,
+.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer__refs .wb-composer__ref-preview:focus-visible + .wb-composer__ref-zoom {
+  transform: translateY(0) scale(1);
+}