想法一闪任务即成

+ +

+ {agentModes.map((mode) => ( + + ))} +

+ +

setPrompt(event.target.value)}
+                onKeyDown={(event) => {
+                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                    event.preventDefault();
+                    void handleRun();
+                  }
+                }}
+              />
+
+              <div className="agent-composer__footer">
+                <div className="agent-composer__controls" aria-label="输入设置">
+                  <button type="button" className="agent-tool-icon" aria-label="上传附件">
+                    <PaperClipOutlined />
+                  </button>
+                  <button type="button" className="agent-tool-pill">
+                    <ThunderboltOutlined />
+                    自动模式
+                    <DownOutlined />
+                  </button>
+                  <button type="button" className="agent-tool-icon" aria-label="工具集">
+                    <AppstoreOutlined />
+                  </button>
+                </div>
+
+                <button
+                  type="button"
+                  className="agent-run-button"
+                  disabled={isRunning}
+                  onClick={() => void handleRun()}
+                >
+                  {isRunning ? <RocketOutlined /> : <SendOutlined />}
+                  {isRunning ? "运行中" : "运行"}
+                </button>
+              </div>
+            </section>
+
+            <p className="agent-status" aria-live="polite">{notice}</p>
+
+            <section className="agent-quick-start" aria-label="快速开始">
+              <span>快速开始</span>
+              <div>
+                {quickStarts.map((item) => (
+                  <button key={item} type="button" onClick={() => handleQuickStart(item)}>
+                    {item}
+                  </button>
+                ))}
+              </div>
+            </section>
+          </section>
+
+          {recentTasks.length > 0 ? (
+            <section className="agent-recent" aria-label="最近运行">
+              <div className="agent-recent__head">
+                <span>Recent Runs</span>
+                <strong>最近运行</strong>
+              </div>
+              <div className="agent-recent__grid">
+                {recentTasks.map((task) => {
+                  const sourceLabel = getTaskSourceLabel(task);
+
+                  return (
+                    <article key={task.id} className="agent-run-card">
+                      <div>
+                        <strong>{task.title}</strong>
+                        {sourceLabel ? <span>{sourceLabel}</span> : null}
+                      </div>
+                      <p>{task.prompt}</p>
+                      <small>{task.status} / {task.progress}%</small>
+                    </article>
+                  );
+                })}
+              </div>
+            </section>
+          ) : null}
+        </main>
+      </section>
+    </WorkspacePageShell>
+  );
+}
+
+export default AgentPage;
diff --git a/src/features/assets/AssetsPage.tsx b/src/features/assets/AssetsPage.tsx
new file mode 100644
index 0000000..5c94c07
--- /dev/null
+++ b/src/features/assets/AssetsPage.tsx
@@ -0,0 +1,403 @@
+import {
+  ClockCircleOutlined,
+  CloseOutlined,
+  DatabaseOutlined,
+  DeleteOutlined,
+  FileImageOutlined,
+  LoadingOutlined,
+  LoginOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
+import { assetClient, type ServerAssetItem } from "../../api/assetClient";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { useDebounce } from "../../hooks/useDebounce";
+import OptimizedImage from "../../components/OptimizedImage";
+import { SkeletonList } from "../../components/Skeleton";
+import { EmptyState } from "../../components/EmptyState";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebAssetItem } from "../../types";
+
+type AssetTypeFilter = WebAssetItem["type"] | "all";
+
+type LibraryAssetItem = WebAssetItem & {
+  project: string;
+  version: string;
+  ratio: string;
+  tags: string[];
+  thumbClass: string;
+};
+
+interface AssetsPageProps {
+  isAuthenticated: boolean;
+  onOpenLogin: () => void;
+}
+
+const typeTabs: Array<{ key: AssetTypeFilter; label: string; icon: JSX.Element | null }> = [
+  { key: "all", label: "全部", icon: null },
+  { key: "character", label: "人物", icon: <UserOutlined /> },
+  { key: "scene", label: "场景", icon: <FileImageOutlined /> },
+  { key: "prop", label: "物品", icon: <DatabaseOutlined /> },
+  { key: "video", label: "视频", icon: <FileImageOutlined /> },
+  { key: "image", label: "图片", icon: <FileImageOutlined /> },
+  { key: "asset", label: "素材", icon: <DatabaseOutlined /> },
+  { key: "other", label: "其他", icon: <DatabaseOutlined /> },
+];
+
+const statusLabel: Record<WebAssetItem["status"], string> = {
+  ready: "已完成",
+  draft: "草稿",
+  reviewing: "复核中",
+  pending: "同步中",
+  failed: "失败",
+};
+
+const statusBadgeClass: Record<WebAssetItem["status"], string> = {
+  ready: "studio-status-bar__badge--success",
+  draft: "studio-status-bar__badge--idle",
+  reviewing: "studio-status-bar__badge--running",
+  pending: "studio-status-bar__badge--running",
+  failed: "studio-status-bar__badge--danger",
+};
+
+function mapServerAsset(asset: ServerAssetItem): LibraryAssetItem {
+  return {
+    ...asset,
+    project: asset.sourceProjectId || "服务器资产库",
+    version: "Server",
+    ratio: String(asset.metadata?.ratio || "1:1"),
+    tags: asset.tags?.length ? asset.tags : ["服务器素材"],
+    thumbClass: asset.imageUrl ? "is-uploaded" : "is-station",
+  };
+}
+
+function getAssetPreviewUrl(asset: LibraryAssetItem) {
+  return asset.url || asset.imageUrl;
+}
+
+function isVideoPreview(asset: LibraryAssetItem) {
+  const url = getAssetPreviewUrl(asset) || "";
+  return asset.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
+}
+
+function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
+  const [activeType, setActiveType] = useState<AssetTypeFilter>("all");
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebounce(query, 300);
+  const [serverAssets, setServerAssets] = useState<ServerAssetItem[]>([]);
+  const [serverNotice, setServerNotice] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewAsset, setPreviewAsset] = useState<LibraryAssetItem | null>(null);
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; asset: LibraryAssetItem } | null>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const uploadInputRef = useRef<HTMLInputElement>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, asset: LibraryAssetItem) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, asset });
+  }, []);
+
+  const handleDeleteAsset = useCallback(async () => {
+    if (!contextMenu) return;
+    const { asset } = contextMenu;
+    setContextMenu(null);
+    try {
+      await assetClient.delete(asset.id);
+      setServerAssets((prev) => prev.filter((a) => a.id !== asset.id));
+      setServerNotice(`已删除 ${asset.name}`);
+    } catch (err) {
+      setServerNotice(err instanceof Error ? err.message : "删除失败");
+    }
+  }, [contextMenu]);
+
+  const handleUploadFiles = useCallback(async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    setIsUploading(true);
+    setServerNotice("正在上传...");
+    let successCount = 0;
+    for (const file of Array.from(files)) {
+      try {
+        const dataUrl = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = () => reject(new Error("读取文件失败"));
+          reader.readAsDataURL(file);
+        });
+        const mimeType = file.type || (file.name.match(/\.(mp4|mov|webm)$/i) ? "video/mp4" : "image/png");
+        const uploaded = await aiGenerationClient.uploadAsset({ dataUrl, name: file.name, mimeType, scope: "asset-library" });
+        const isVideo = mimeType.startsWith("video/");
+        const created = await assetClient.create({
+          type: isVideo ? "video" : "image",
+          name: file.name.replace(/\.[^.]+$/, ""),
+          description: `手动上传 · ${file.name}`,
+          url: uploaded.url,
+          imageUrl: isVideo ? "" : uploaded.url,
+          status: "ready",
+          tags: ["手动上传"],
+        });
+        setServerAssets((prev) => [created, ...prev]);
+        successCount++;
+      } catch (err) {
+        setServerNotice(err instanceof Error ? err.message : `上传 ${file.name} 失败`);
+      }
+    }
+    setIsUploading(false);
+    if (successCount > 0) setServerNotice(`已上传 ${successCount} 个文件`);
+    if (uploadInputRef.current) uploadInputRef.current.value = "";
+  }, []);
+
+  useEffect(() => {
+    if (!contextMenu) return undefined;
+    const handleClick = (e: MouseEvent) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(null);
+      }
+    };
+    window.addEventListener("mousedown", handleClick);
+    return () => window.removeEventListener("mousedown", handleClick);
+  }, [contextMenu]);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setServerAssets([]);
+      setServerNotice(null);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+    setServerNotice("正在同步服务器资产");
+
+    assetClient
+      .list()
+      .then((items) => {
+        if (cancelled) return;
+        setServerAssets(items);
+        setServerNotice(items.length ? "服务器资产已同步" : "暂无资产");
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setServerAssets([]);
+        setServerNotice(error instanceof Error && error.message ? error.message : "资产服务器暂时不可用");
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isAuthenticated]);
+
+  const allAssets = useMemo<LibraryAssetItem[]>(() => {
+    return serverAssets.map(mapServerAsset);
+  }, [serverAssets]);
+
+  const visibleAssets = useMemo(() => {
+    const normalizedQuery = debouncedQuery.trim().toLowerCase();
+    return allAssets.filter((asset) => {
+      const typeMatched = activeType === "all" || asset.type === activeType;
+      const queryMatched =
+        !normalizedQuery ||
+        asset.name.toLowerCase().includes(normalizedQuery) ||
+        asset.description.toLowerCase().includes(normalizedQuery) ||
+        asset.tags.some((tag) => tag.toLowerCase().includes(normalizedQuery));
+      return typeMatched && queryMatched;
+    });
+  }, [activeType, allAssets, debouncedQuery]);
+
+  const completeCount = allAssets.filter((asset) => asset.status === "ready").length;
+  const latestAsset = allAssets[0];
+
+  useEffect(() => {
+    if (!previewAsset) return undefined;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setPreviewAsset(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [previewAsset]);
+
+  if (!isAuthenticated) {
+    return (
+      <WorkspacePageShell title="资产库" fullWidth className="assets-page page-motion">
+        <div className="assets-centered-page assets-centered-page--empty">
+          <div className="assets-login-required" role="status">
+            <div className="assets-login-required__icon">
+              <LoginOutlined />
+            </div>
+            <strong>请登录</strong>
+            <p>登录后可查看与管理你的云端资产库。</p>
+            <button type="button" className="studio-generate-btn" onClick={onOpenLogin}>
+              <LoginOutlined />
+              登录 / 注册
+            </button>
+          </div>
+        </div>
+      </WorkspacePageShell>
+    );
+  }
+
+  return (
+    <WorkspacePageShell title="资产库" fullWidth className="assets-page page-motion">
+      <div className="assets-centered-page">
+        <div className="assets-centered-page__head">
+          <div className="studio-tabs">
+            {typeTabs.map((tab) => (
+              <button
+                key={tab.key}
+                type="button"
+                className={activeType === tab.key ? "is-active" : ""}
+                onClick={() => setActiveType(tab.key)}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+          <label className="asset-search">
+            <SearchOutlined />
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="搜索资产..."
+            />
+          </label>
+          <button type="button" className="studio-generate-btn studio-generate-btn--compact" onClick={() => uploadInputRef.current?.click()} disabled={isUploading}>
+            {isUploading ? <LoadingOutlined /> : <PlusOutlined />}
+            {isUploading ? "上传中..." : "添加"}
+          </button>
+          <input
+            ref={uploadInputRef}
+            type="file"
+            accept="image/*,video/*"
+            multiple
+            style={{ display: "none" }}
+            onChange={(e) => void handleUploadFiles(e.target.files)}
+          />
+        </div>
+
+        <div className="assets-centered-page__body">
+          {visibleAssets.length ? (
+            <div className="asset-grid asset-grid--desktop motion-stagger">
+              {visibleAssets.map((asset) => (
+                <button
+                  key={asset.id}
+                  type="button"
+                  className="asset-card asset-card--desktop"
+                  onClick={() => setPreviewAsset(asset)}
+                  onContextMenu={(e) => handleContextMenu(e, asset)}
+                  aria-label={`预览素材 ${asset.name}`}
+                >
+                  <div className={`asset-card__thumb ${asset.thumbClass}`}>
+                    {asset.imageUrl ? <OptimizedImage src={asset.imageUrl} alt={asset.name} /> : null}
+                  </div>
+                  <div className="asset-card__body">
+                    <div className="asset-card__head">
+                      <strong>{asset.name}</strong>
+                      <span className={`studio-status-bar__badge ${statusBadgeClass[asset.status]}`}>
+                        {statusLabel[asset.status]}
+                      </span>
+                    </div>
+                    <p className="asset-card__desc">{asset.description}</p>
+                    <div className="asset-card__tags">
+                      {asset.tags.slice(0, 2).map((tag) => (
+                        <span key={tag}>{tag}</span>
+                      ))}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : isLoading ? (
+            <SkeletonList count={6} />
+          ) : (
+            <EmptyState
+              icon={<FileImageOutlined style={{ fontSize: 48 }} />}
+              title="暂无资产"
+              description="在工作台生成图片或视频后，素材会自动同步到这里。"
+            />
+          )}
+        </div>
+
+        <footer className="assets-centered-page__footer">
+          <span className="studio-status-bar__badge studio-status-bar__badge--success">
+            {isLoading ? "同步中" : "就绪"}
+          </span>
+          <span className="studio-status-bar__text">
+            已加载 {allAssets.length} 个资产，{completeCount} 个已完成
+          </span>
+          {serverNotice ? <span className="studio-status-bar__meta">{serverNotice}</span> : null}
+          {latestAsset ? (
+            <span className="studio-status-bar__meta">
+              <ClockCircleOutlined /> 最近更新 {latestAsset.updatedAt}
+            </span>
+          ) : null}
+        </footer>
+
+        {previewAsset ? (
+          <div className="asset-preview-modal" role="dialog" aria-modal="true" aria-label={`预览素材 ${previewAsset.name}`}>
+            <button
+              type="button"
+              className="asset-preview-modal__backdrop"
+              aria-label="关闭预览"
+              onClick={() => setPreviewAsset(null)}
+            />
+            <section className="asset-preview-modal__panel" onClick={(event) => event.stopPropagation()}>
+              <header className="asset-preview-modal__head">
+                <div>
+                  <strong>{previewAsset.name}</strong>
+                  <span>{previewAsset.description}</span>
+                </div>
+                <button type="button" className="asset-preview-modal__close" aria-label="关闭预览" onClick={() => setPreviewAsset(null)}>
+                  <CloseOutlined />
+                </button>
+              </header>
+              <div className="asset-preview-modal__body">
+                {getAssetPreviewUrl(previewAsset) ? (
+                  isVideoPreview(previewAsset) ? (
+                    <video src={getAssetPreviewUrl(previewAsset) || undefined} controls playsInline />
+                  ) : (
+                    <img src={getAssetPreviewUrl(previewAsset) || undefined} alt={previewAsset.name} />
+                  )
+                ) : (
+                  <div className="asset-preview-modal__empty">
+                    <FileImageOutlined />
+                    <strong>暂无可预览素材</strong>
+                  </div>
+                )}
+              </div>
+              <footer className="asset-preview-modal__meta">
+                <span>{statusLabel[previewAsset.status]}</span>
+                <span>{previewAsset.ratio}</span>
+                <span>{previewAsset.project}</span>
+                <span>{previewAsset.updatedAt}</span>
+              </footer>
+            </section>
+          </div>
+        ) : null}
+
+        {contextMenu ? (
+          <div
+            ref={contextMenuRef}
+            className="asset-context-menu"
+            style={{ top: contextMenu.y, left: contextMenu.x }}
+          >
+            <button type="button" onClick={() => void handleDeleteAsset()}>
+              <DeleteOutlined />
+              删除资产
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </WorkspacePageShell>
+  );
+}
+
+export default AssetsPage;
diff --git a/src/features/assets/localAssetStore.ts b/src/features/assets/localAssetStore.ts
new file mode 100644
index 0000000..069401e
--- /dev/null
+++ b/src/features/assets/localAssetStore.ts
@@ -0,0 +1,58 @@
+import type { WebAssetItem } from "../../types";
+
+export type AssetLibraryCategory = WebAssetItem["type"];
+
+export interface SavedAssetItem extends WebAssetItem {
+  project: string;
+  version: string;
+  ratio: string;
+  tags: string[];
+  thumbClass: string;
+}
+
+const SAVED_ASSETS_STORAGE_KEY = "omniai-canvas-saved-assets";
+
+export function getSavedAssets(): SavedAssetItem[] {
+  if (typeof window === "undefined") return [];
+
+  try {
+    const rawAssets = window.localStorage.getItem(SAVED_ASSETS_STORAGE_KEY);
+    if (!rawAssets) return [];
+    const parsedAssets = JSON.parse(rawAssets);
+    return Array.isArray(parsedAssets) ? parsedAssets : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveAssetToLocalLibrary(asset: {
+  type: AssetLibraryCategory;
+  name: string;
+  description?: string;
+  url?: string;
+  imageUrl?: string;
+  tags?: string[];
+}) {
+  const savedAsset: SavedAssetItem = {
+    id: `canvas-asset-${Date.now()}`,
+    type: asset.type,
+    name: asset.name,
+    description: asset.description || "从画布保存的素材。",
+    imageUrl: asset.imageUrl || asset.url || "",
+    url: asset.url || asset.imageUrl || "",
+    updatedAt: "刚刚更新",
+    status: "ready",
+    project: "画布",
+    version: "V1",
+    ratio: "1:1",
+    tags: asset.tags?.length ? asset.tags : ["画布素材"],
+    thumbClass: "is-uploaded",
+  };
+
+  if (typeof window !== "undefined") {
+    const nextAssets = [savedAsset, ...getSavedAssets()];
+    window.localStorage.setItem(SAVED_ASSETS_STORAGE_KEY, JSON.stringify(nextAssets));
+  }
+
+  return savedAsset;
+}
diff --git a/src/features/canvas/CanvasPage.tsx b/src/features/canvas/CanvasPage.tsx
new file mode 100644
index 0000000..e57ad25
--- /dev/null
+++ b/src/features/canvas/CanvasPage.tsx
@@ -0,0 +1,5707 @@
+import {
+  BarsOutlined,
+  BgColorsOutlined,
+  CheckOutlined,
+  ClockCircleOutlined,
+  CloseOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  DownOutlined,
+  EditOutlined,
+  FileImageOutlined,
+  FileTextOutlined,
+  FolderOpenOutlined,
+  MutedOutlined,
+  PauseCircleOutlined,
+  PictureOutlined,
+  PlayCircleOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+  SearchOutlined,
+  SendOutlined,
+  SoundOutlined,
+  ThunderboltOutlined,
+  UploadOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import {
+  Background,
+  ReactFlow,
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { assetClient, type ServerAssetItem } from "../../api/assetClient";
+import { communityClient } from "../../api/communityClient";
+import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type {
+  WebCanvasWorkflow,
+  WebCanvasWorkflowNodePackage,
+} from "../../types";
+import type { AssetLibraryCategory } from "../assets/localAssetStore";
+import {
+  buildCanvasCommunityCaseInput,
+  buildCanvasWorkflowJson,
+  buildWorkflowFileName,
+  textToDataUrl,
+} from "./canvasCommunityPublish";
+import { createCanvasAssetRefFromGeneratedResult, persistCanvasGeneratedResultAsset } from "./canvasAssetPersistence";
+import { normalizeCanvasWorkflowSchema } from "./canvasWorkflowSchema";
+import { useCanvasHistory, type CanvasHistorySnapshot } from "./useCanvasHistory";
+import { useCanvasKeyboard } from "./useCanvasKeyboard";
+import { useCanvasNodeDrag } from "./useCanvasNodeDrag";
+import { useCanvasGeneration, addCanvasGenKeepalive, removeCanvasGenKeepalive } from "./useCanvasGeneration";
+import {
+  toHappyHorseDisplayModel,
+} from "../../utils/happyHorseRouting";
+import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
+import { ENTERPRISE_VIDEO_MODEL_OPTIONS } from "../../utils/enterpriseVideoPolicy";
+import { filterImageModelOptionsForSession } from "../../utils/imageModelVisibility";
+import { translateTaskError } from "../../utils/translateTaskError";
+import type {
+  CanvasAlignGuide,
+  CanvasAssetSaveSource,
+  CanvasCopiedNode,
+  CanvasConnectorDrag,
+  CanvasConnectorFollowOffset,
+  CanvasFloatingMenuPosition,
+  CanvasImageFocusDrag,
+  CanvasImageFocusSelection,
+  CanvasImageGenerationState,
+  CanvasImageNode,
+  CanvasImageNodeDrag,
+  CanvasImageReferenceItem,
+  CanvasManualLink,
+  CanvasNodeBounds,
+  CanvasNodeKind,
+  CanvasNodePackage,
+  CanvasNodePackageDrag,
+  CanvasNodePort,
+  CanvasNodeResizeDrag,
+  CanvasNodeSize,
+  CanvasOption,
+  CanvasPageProps,
+  CanvasPanDrag,
+  CanvasPoint,
+  CanvasProjectSaveState,
+  CanvasSelectedNode,
+  CanvasSelectionDrag,
+  CanvasStyleCase,
+  CanvasStylePickerTab,
+  CanvasStyleReference,
+  CanvasTextGenerationState,
+  CanvasPromptMentionOption,
+  CanvasPromptMentionState,
+  CanvasTextNode,
+  CanvasTextNodeDrag,
+  CanvasVideoGenerationState,
+  CanvasVideoMode,
+  CanvasVideoNode,
+  CanvasVideoNodeDrag,
+  CanvasViewport,
+} from "./canvasTypes";
+import {
+  assetLibraryCategories,
+  canvasAutoSaveDebounceMs,
+  canvasAutoSaveIdleTimeoutMs,
+  canvasNodeClickMoveThreshold,
+  canvasNodeDefaultSizes,
+  canvasStylePickerCategories,
+  canvasStylePickerTabs,
+  connectorAnchorOutset,
+  connectorFollowRadius,
+  connectorFollowStrength,
+  connectorMaxFollowOffset,
+  defaultImageModel,
+  defaultTextModelId,
+  defaultVideoModel,
+  image4kCapableModels,
+  imageFocusRatioOptions,
+  imageModelOptions,
+  imageRatioOptions,
+  textModelOptions,
+  videoDurationOptions,
+  videoRatioOptions,
+} from "./canvasConstants";
+import {
+  applyImageFocusRatioFromTopLeft,
+  blobToDataUrl,
+  buildCanvasStyleKeywords,
+  buildCopyTitle,
+  clampCanvasPercent,
+  buildReversePromptFromAsset,
+  canvasGenerationProgressStyle,
+  clampCanvasNodeSize,
+  clampCanvasViewportZoom,
+  communityCaseToCanvasStyleCase,
+  createCanvasNodeSize,
+  createStyleReferenceFromCase,
+  delay,
+  doCanvasRectsIntersect,
+  getCanvasLinkIdentity,
+  getCanvasNodeSideDirection,
+  getCanvasPortIdentity,
+  getCanvasSelectionKey,
+  getDefaultImageQuality,
+  getDefaultVideoQuality,
+  getImageQualityOptions,
+  getOptionLabel,
+  getVideoQualityOptions,
+  getWorkflowImageNodeFileName,
+  getWorkflowImageNodePrompt,
+  getWorkflowNodeFocusSelection,
+  getWorkflowNodeMetadataString,
+  getWorkflowNodeStyleReference,
+  hasCanvasOptionValue,
+  moveCanvasNodesForPackageDrag,
+  normalizeCanvasGenerationProgress,
+  normalizeCanvasLinkPorts,
+  normalizeCanvasSelectionRect,
+  normalizeImageFocusSelectionFromAnchor,
+  positionFloatingMenu,
+  resolveImageQuality,
+  resolveVideoQuality,
+  resolveWorkflowImageModel,
+  resolveWorkflowRatio,
+  resolveWorkflowVideoMode,
+  resolveWorkflowVideoModel,
+  waitForImageTaskResult,
+  waitForVideoTaskResult,
+} from "./canvasUtils";
+import {
+  createImageNodesFromWorkflow,
+  createManualLinksFromWorkflow,
+  createNodePackagesFromWorkflow,
+  createTextNodesFromWorkflow,
+  createVideoNodesFromWorkflow,
+  createWorkflowPackagesFromCanvasPackages,
+  formatCanvasProjectUpdatedAt,
+  formatCanvasVideoTime,
+  resolveAssetCategory,
+} from "./canvasWorkflowDeserialize";
+import { CanvasNodeToolbar, CanvasNodeVideoPlayer, CanvasSelectChip } from "./canvasComponents";
+import type { CanvasNodeToolbarAction } from "./canvasComponents";
+import { CanvasSmoothedProgressRing } from "./CanvasSmoothedProgressRing";
+
+const canvasEnterpriseVideoModelOptions: CanvasOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({
+  value: option.value,
+  label: option.label,
+}));
+
+// --- Canvas generation keep-alive (survives page refresh / view switch) ---
+
+const MENTION_TOKEN_RE = /@(?:图片|视频|文本)\d+/g;
+const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
+
+function buildNodeMentionOptions(
+  kind: CanvasNodeKind,
+  nodeId: string,
+  imageNodes: CanvasImageNode[],
+  videoNodes: CanvasVideoNode[],
+  textNodes: CanvasTextNode[],
+  getIncoming: (kind: CanvasNodeKind, nid: string) => CanvasNodePort[],
+  manualLinks: CanvasManualLink[],
+): CanvasPromptMentionOption[] {
+  const incomingPorts = getIncoming(kind, nodeId);
+  const outgoingPorts: CanvasNodePort[] = [];
+  manualLinks.forEach((link) => {
+    if (link.from.kind === kind && link.from.nodeId === nodeId) {
+      outgoingPorts.push(link.to);
+    } else if (link.to.kind === kind && link.to.nodeId === nodeId) {
+      outgoingPorts.push(link.from);
+    }
+  });
+  // Source property links
+  if (kind === "text") {
+    imageNodes.forEach((img) => {
+      if (img.sourceTextNodeId && img.sourceTextNodeId === nodeId) {
+        outgoingPorts.push({ kind: "image", nodeId: img.id, side: "left", slot: "center" });
+      }
+    });
+    videoNodes.forEach((vid) => {
+      if (vid.sourceTextNodeId && vid.sourceTextNodeId === nodeId) {
+        outgoingPorts.push({ kind: "video", nodeId: vid.id, side: "left", slot: "center" });
+      }
+    });
+  } else if (kind === "image") {
+    const self = imageNodes.find((n) => n.id === nodeId);
+    if (self?.sourceTextNodeId) {
+      outgoingPorts.push({ kind: "text", nodeId: self.sourceTextNodeId, side: "right", slot: "center" });
+    }
+    if (self?.sourceImageNodeId) {
+      outgoingPorts.push({ kind: "image", nodeId: self.sourceImageNodeId, side: "right", slot: "center" });
+    }
+  } else if (kind === "video") {
+    const self = videoNodes.find((n) => n.id === nodeId);
+    if (self?.sourceTextNodeId) {
+      outgoingPorts.push({ kind: "text", nodeId: self.sourceTextNodeId, side: "right", slot: "center" });
+    }
+  }
+  const allPorts = [...incomingPorts, ...outgoingPorts];
+  const options: CanvasPromptMentionOption[] = [];
+  let imageIdx = 0;
+  let videoIdx = 0;
+  let textIdx = 0;
+  const seen = new Set<string>();
+
+  for (const port of allPorts) {
+    if (seen.has(`${port.kind}:${port.nodeId}`)) continue;
+    seen.add(`${port.kind}:${port.nodeId}`);
+
+    if (port.kind === "image") {
+      const node = imageNodes.find((n) => n.id === port.nodeId);
+      imageIdx++;
+      const label = `图片${imageIdx}`;
+      options.push({
+        token: `@${label}`,
+        label,
+        kind: "image",
+        nodeId: port.nodeId,
+        nodeTitle: node?.title || label,
+        previewUrl: node?.imageUrl,
+        searchText: `${label} ${node?.title || ""} ${node?.prompt || ""}`.toLowerCase(),
+      });
+    } else if (port.kind === "video") {
+      const node = videoNodes.find((n) => n.id === port.nodeId);
+      videoIdx++;
+      const label = `视频${videoIdx}`;
+      options.push({
+        token: `@${label}`,
+        label,
+        kind: "video",
+        nodeId: port.nodeId,
+        nodeTitle: node?.title || label,
+        previewUrl: node?.videoUrl,
+        searchText: `${label} ${node?.title || ""} ${node?.prompt || ""}`.toLowerCase(),
+      });
+    } else if (port.kind === "text") {
+      const node = textNodes.find((n) => n.id === port.nodeId);
+      textIdx++;
+      const label = `文本${textIdx}`;
+      options.push({
+        token: `@${label}`,
+        label,
+        kind: "text",
+        nodeId: port.nodeId,
+        nodeTitle: node?.title || label,
+        searchText: `${label} ${node?.title || ""} ${node?.prompt || ""}`.toLowerCase(),
+      });
+    }
+  }
+  return options;
+}
+
+const CAMERA_MOTION_PRESETS = [
+  { value: "", label: "无运镜" },
+  { value: "push-in", label: "推近", prompt: "镜头缓慢推近主体" },
+  { value: "pull-out", label: "拉远", prompt: "镜头缓慢拉远，展现全景" },
+  { value: "pan-left", label: "左移", prompt: "镜头水平向左平移" },
+  { value: "pan-right", label: "右移", prompt: "镜头水平向右平移" },
+  { value: "tilt-up", label: "上仰", prompt: "镜头向上仰拍" },
+  { value: "tilt-down", label: "下俯", prompt: "镜头向下俯拍" },
+  { value: "orbit", label: "环绕", prompt: "镜头环绕主体360度旋转" },
+  { value: "handheld", label: "手持", prompt: "手持摄影风格，轻微晃动增加真实感" },
+  { value: "fixed", label: "固定机位", prompt: "固定机位，无镜头运动" },
+];
+
+function getCameraMotionPrompt(value: string): string {
+  return CAMERA_MOTION_PRESETS.find((p) => p.value === value)?.prompt || "";
+}
+
+function CanvasPage({
+  workflow,
+  projectId,
+  projects = [],
+  projectsLoaded = true,
+  onOpenCommunity,
+  onOpenProject,
+  onStartCreate,
+  isAuthenticated,
+  session,
+  onOpenLogin,
+  onSaveWorkflow,
+  onCreateTask,
+}: CanvasPageProps) {
+  const [contextMenu, setContextMenu] = useState<CanvasFloatingMenuPosition | null>(null);
+  const [nodeMenu, setNodeMenu] = useState<CanvasFloatingMenuPosition | null>(null);
+  const [textNodeMenu, setTextNodeMenu] = useState<{ left: number; top: number; nodeId: string } | null>(null);
+  const [textNodes, setTextNodes] = useState<CanvasTextNode[]>([]);
+  const [canvasSelectMenu, setCanvasSelectMenu] = useState<string | null>(null);
+  const [copiedCanvasNode, setCopiedCanvasNode] = useState<CanvasCopiedNode | null>(null);
+  const [imageNodeMenu, setImageNodeMenu] = useState<{ left: number; top: number; nodeId: string } | null>(null);
+  const [imageNodes, setImageNodes] = useState<CanvasImageNode[]>([]);
+  const [imageLoadErrors, setImageLoadErrors] = useState<Record<string, string>>({});
+  const [imageFocusNodeId, setImageFocusNodeId] = useState<string | null>(null);
+  const [imageFocusDraft, setImageFocusDraft] = useState<CanvasImageFocusSelection | null>(null);
+  const [imageFocusDrag, setImageFocusDrag] = useState<CanvasImageFocusDrag | null>(null);
+  const [stylePickerImageNodeId, setStylePickerImageNodeId] = useState<string | null>(null);
+  const [stylePickerCases, setStylePickerCases] = useState<CanvasStyleCase[]>([]);
+  const [stylePickerLoading, setStylePickerLoading] = useState(false);
+  const [stylePickerError, setStylePickerError] = useState<string | null>(null);
+  const [stylePickerReloadToken, setStylePickerReloadToken] = useState(0);
+  const [stylePickerTab, setStylePickerTab] = useState<CanvasStylePickerTab>("square");
+  const [stylePickerCategory, setStylePickerCategory] = useState(canvasStylePickerCategories[0]);
+  const [stylePickerSearch, setStylePickerSearch] = useState("");
+  const [recentStyleCases, setRecentStyleCases] = useState<CanvasStyleCase[]>([]);
+  const [styleSelectionToast, setStyleSelectionToast] = useState<string | null>(null);
+  const [recentProjectsOpen, setRecentProjectsOpen] = useState(false);
+  const [currentProjectTitle, setCurrentProjectTitle] = useState(workflow.title || "未命名项目");
+  const [projectNameDraft, setProjectNameDraft] = useState(workflow.title || "未命名项目");
+  const [projectNameEditing, setProjectNameEditing] = useState(false);
+  const [videoNodeMenu, setVideoNodeMenu] = useState<{ left: number; top: number; nodeId: string } | null>(null);
+  const [videoNodes, setVideoNodes] = useState<CanvasVideoNode[]>([]);
+  const [selectedNode, setSelectedNode] = useState<CanvasSelectedNode | null>(null);
+  const [selectedNodes, setSelectedNodes] = useState<CanvasSelectedNode[]>([]);
+  const [selectionContextMenu, setSelectionContextMenu] = useState<CanvasFloatingMenuPosition | null>(null);
+  const [nodePackages, setNodePackages] = useState<CanvasNodePackage[]>([]);
+  const [selectedPackageId, setSelectedPackageId] = useState<string | null>(null);
+  const [canvasViewport, setCanvasViewport] = useState<CanvasViewport>({ x: 0, y: 0, zoom: 1 });
+  const [manualLinks, setManualLinks] = useState<CanvasManualLink[]>([]);
+  const [pendingLinkPort, setPendingLinkPort] = useState<CanvasNodePort | null>(null);
+  const [pendingLinkPreviewPoint, setPendingLinkPreviewPoint] = useState<CanvasPoint | null>(null);
+  const [connectorFollowOffsets, setConnectorFollowOffsets] = useState<Record<string, CanvasConnectorFollowOffset>>({});
+  const [connectorDrag, setConnectorDrag] = useState<CanvasConnectorDrag | null>(null);
+  const [connectionDropMenu, setConnectionDropMenu] = useState<{ left: number; top: number; originLeft: number; originTop: number; sourcePort: CanvasNodePort } | null>(null);
+  const pendingAutoConnectRef = useRef<CanvasNodePort | null>(null);
+  const [pendingImagePosition, setPendingImagePosition] = useState({ x: 0, y: 0 });
+  const [pendingImageNodeId, setPendingImageNodeId] = useState<string | null>(null);
+  const [pendingImageToImageNodeId, setPendingImageToImageNodeId] = useState<string | null>(null);
+  const [markingPopoverNodeId, setMarkingPopoverNodeId] = useState<string | null>(null);
+  const [cameraMotionDropdownNodeId, setCameraMotionDropdownNodeId] = useState<string | null>(null);
+  const [saveAssetSource, setSaveAssetSource] = useState<CanvasAssetSaveSource | null>(null);
+  const [saveAssetOpen, setSaveAssetOpen] = useState(false);
+  const [assetName, setAssetName] = useState("文本素材");
+  const [assetCategory, setAssetCategory] = useState("");
+  const [assetCategoryOpen, setAssetCategoryOpen] = useState(false);
+  const [coverSourceOpen, setCoverSourceOpen] = useState(false);
+  const [coverLibraryOpen, setCoverLibraryOpen] = useState(false);
+  const [assetSaveMode, setAssetSaveMode] = useState<"create" | "existing">("create");
+  const [assetCoverUrl, setAssetCoverUrl] = useState("");
+  const [serverAssets, setServerAssets] = useState<ServerAssetItem[]>([]);
+  const [assetLibraryNotice, setAssetLibraryNotice] = useState<string | null>(null);
+  const [isSavingAsset, setIsSavingAsset] = useState(false);
+  const [selectedExistingCategory, setSelectedExistingCategory] = useState("");
+  const coverFileInputRef = useRef<HTMLInputElement>(null);
+  const canvasUploadInputRef = useRef<HTMLInputElement>(null);
+  const imageNodeInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLElement>(null);
+  const videoGenerationInFlightRef = useRef(new Set<string>());
+  const canvasReferenceUploadPromisesRef = useRef(new Map<string, Promise<string | null>>());
+  const suppressNextPaneClickRef = useRef(false);
+  const canvasAutoSaveTimerRef = useRef<number | null>(null);
+  const canvasAutoSaveIdleHandleRef = useRef<number | null>(null);
+  const canvasAutoSaveInFlightRef = useRef(false);
+  const canvasAutoSavePendingRef = useRef(false);
+  const lastAutoSavedWorkflowFingerprintRef = useRef("");
+  const canvasAutoSaveHydrationRef = useRef(true);
+  const textNodeIdRef = useRef(9);
+  const imageNodeIdRef = useRef(1);
+  const videoNodeIdRef = useRef(1);
+
+  const { pushSnapshot, undo, redo, canUndo, canRedo } = useCanvasHistory();
+  const {
+    textGenerationState, imageGenerationState, videoGenerationState,
+    generationToast, setGenerationToast,
+    imageGenerationInFlightRef, textGenerationInFlightRef, textGenerationAbortControllersRef,
+    setTextGenerationStatus, setImageGenerationStatus, setVideoGenerationStatus,
+    restoreKeepaliveTasks, resetGenerationState,
+  } = useCanvasGeneration({ setImageNodes, setVideoNodes });
+  const isDirtyRef = useRef(false);
+  const [spacePanning, setSpacePanning] = useState(false);
+
+  const textNodesRef = useRef(textNodes);
+  textNodesRef.current = textNodes;
+  const imageNodesRef = useRef(imageNodes);
+  imageNodesRef.current = imageNodes;
+  const videoNodesRef = useRef(videoNodes);
+  videoNodesRef.current = videoNodes;
+  const nodePackagesRef = useRef(nodePackages);
+  nodePackagesRef.current = nodePackages;
+  const zoomRef = useRef(canvasViewport.zoom);
+  zoomRef.current = canvasViewport.zoom;
+  const dragCallbacksRef = useRef<import("./useCanvasNodeDrag").CanvasNodeDragCallbacks>({
+    pushHistorySnapshot: () => {},
+    clearCanvasSelection: () => {},
+    selectCanvasNode: () => {},
+    applyCanvasSelection: () => {},
+    getCanvasPointFromClient: () => ({ x: 0, y: 0 }),
+    getNodesInSelectionRect: () => [],
+    expandCanvasNodePackage: () => {},
+  });
+
+  const {
+    textNodeDrag, setTextNodeDrag,
+    imageNodeDrag, setImageNodeDrag,
+    videoNodeDrag, setVideoNodeDrag,
+    packageDrag, setPackageDrag,
+    selectionDrag, setSelectionDrag,
+    nodeResizeDrag,
+    canvasPanDrag, setCanvasPanDrag,
+    alignGuides,
+    handleNodeResizeStart,
+  } = useCanvasNodeDrag({
+    zoomRef,
+    textNodesRef,
+    imageNodesRef,
+    videoNodesRef,
+    nodePackagesRef,
+    setTextNodes,
+    setImageNodes,
+    setVideoNodes,
+    setNodePackages,
+    setCanvasViewport,
+    callbacksRef: dragCallbacksRef,
+    suppressNextPaneClickRef,
+  });
+  const visibleImageModelOptions = useMemo(
+    () => filterImageModelOptionsForSession(imageModelOptions, session),
+    [session],
+  );
+  const fallbackVisibleImageModel = visibleImageModelOptions[0]?.value || defaultImageModel;
+  const resolveVisibleImageModel = useCallback(
+    (model: string | undefined | null) =>
+      hasCanvasOptionValue(visibleImageModelOptions, model || "") ? String(model) : fallbackVisibleImageModel,
+    [fallbackVisibleImageModel, visibleImageModelOptions],
+  );
+
+  // @-mention state per text node
+  const [textNodeMentionStates, setTextNodeMentionStates] = useState<Record<string, CanvasPromptMentionState>>({});
+
+  const closeTextNodeMention = (nodeId: string) => {
+    setTextNodeMentionStates((prev) => ({ ...prev, [nodeId]: { open: false, query: "", start: 0, caret: 0, activeIndex: 0 } }));
+  };
+
+  const insertTextNodeMention = (nodeId: string, option: CanvasPromptMentionOption, textarea: HTMLTextAreaElement | null, kind?: CanvasNodeKind) => {
+    const state = textNodeMentionStates[nodeId];
+    if (!state) return;
+    const value = textarea?.value || "";
+    const nextValue = `${value.slice(0, state.start)}${option.token} ${value.slice(state.caret)}`;
+    const nextCaret = state.start + option.token.length + 1;
+    if (kind === "image") updateImageNodePrompt(nodeId, nextValue);
+    else if (kind === "video") updateVideoNodePrompt(nodeId, nextValue);
+    else updateTextNodePrompt(nodeId, nextValue);
+    closeTextNodeMention(nodeId);
+    setTimeout(() => {
+      if (textarea) {
+        textarea.focus();
+        textarea.setSelectionRange(nextCaret, nextCaret);
+      }
+    }, 0);
+  };
+
+  const getHistorySnapshot = useCallback((): CanvasHistorySnapshot => ({
+    textNodes: textNodes.map((n) => ({ ...n })),
+    imageNodes: imageNodes.map((n) => ({ ...n })),
+    videoNodes: videoNodes.map((n) => ({ ...n })),
+    manualLinks: manualLinks.map((l) => ({ ...l })),
+    nodePackages: nodePackages.map((p) => ({ ...p, nodeIds: [...p.nodeIds] })),
+  }), [textNodes, imageNodes, videoNodes, manualLinks, nodePackages]);
+
+  const pushHistorySnapshot = useCallback(() => {
+    pushSnapshot(getHistorySnapshot());
+    isDirtyRef.current = true;
+  }, [pushSnapshot, getHistorySnapshot]);
+
+  const applyHistorySnapshot = useCallback((snapshot: CanvasHistorySnapshot) => {
+    setTextNodes(snapshot.textNodes as typeof textNodes);
+    setImageNodes(snapshot.imageNodes as typeof imageNodes);
+    setVideoNodes(snapshot.videoNodes as typeof videoNodes);
+    setManualLinks(snapshot.manualLinks as typeof manualLinks);
+    setNodePackages(snapshot.nodePackages as typeof nodePackages);
+  }, []);
+
+  // Viewport changes are browsing behavior, not content changes — don't trigger save
+  // (viewport is still persisted in the snapshot when a content change triggers save)
+
+  // Auto-save status indicator
+  const [autoSaveStatus, setAutoSaveStatus] = useState<"saved" | "saving" | "error" | "idle">("idle");
+  const autoSaveStatusTimerRef = useRef<number | null>(null);
+
+  // Save immediately when user leaves page or switches tab (placed after runCanvasAutoSave definition)
+  // — see useEffect below near runCanvasAutoSave
+
+  const canvasAssets = serverAssets.filter((asset) => asset.imageUrl);
+  const shouldShowEmptyProjectState =
+    projectsLoaded && projects.length === 0 && !projectId && workflow.source === "blank" && workflow.nodes.length === 0;
+  const [projectSaveState, setProjectSaveState] = useState<CanvasProjectSaveState>({
+    status: "idle",
+    message: "",
+  });
+  const [communityPublishState, setCommunityPublishState] = useState<CanvasProjectSaveState>({
+    status: "idle",
+    message: "",
+  });
+
+  useEffect(() => {
+    const normalizedWorkflow = normalizeCanvasWorkflowSchema(workflow);
+    const nextTextNodes = createTextNodesFromWorkflow(normalizedWorkflow);
+    const nextImageNodes = createImageNodesFromWorkflow(normalizedWorkflow);
+    const nextVideoNodes = createVideoNodesFromWorkflow(normalizedWorkflow);
+
+    resetGenerationState();
+    videoGenerationInFlightRef.current.clear();
+    setTextNodes(nextTextNodes);
+    setImageNodes(nextImageNodes);
+    setImageLoadErrors({});
+    setImageFocusNodeId(null);
+    setImageFocusDraft(null);
+    setImageFocusDrag(null);
+    setStylePickerImageNodeId(null);
+    setVideoNodes(nextVideoNodes);
+    setManualLinks(createManualLinksFromWorkflow(normalizedWorkflow));
+    setNodePackages(createNodePackagesFromWorkflow(normalizedWorkflow));
+    setSelectedNode(null);
+    setSelectedNodes([]);
+    setSelectedPackageId(null);
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+    setConnectorDrag(null);
+    setCanvasViewport(normalizedWorkflow.viewport || { x: 0, y: 0, zoom: 1 });
+    setRecentProjectsOpen(false);
+    setCurrentProjectTitle(workflow.title || "未命名项目");
+    setProjectNameDraft(workflow.title || "未命名项目");
+    setProjectNameEditing(false);
+    setProjectSaveState({ status: "idle", message: "" });
+    setCommunityPublishState({ status: "idle", message: "" });
+    canvasAutoSaveHydrationRef.current = true;
+    lastAutoSavedWorkflowFingerprintRef.current = buildCanvasWorkflowJson(normalizedWorkflow);
+    canvasAutoSavePendingRef.current = false;
+    textNodeIdRef.current = nextTextNodes.length + 1;
+    imageNodeIdRef.current = nextImageNodes.length + 1;
+    videoNodeIdRef.current = nextVideoNodes.length + 1;
+
+    if (projectId && isAuthenticated) {
+      restoreKeepaliveTasks(projectId, nextImageNodes, nextVideoNodes);
+    }
+  }, [workflow.id, workflow.nodes, projectId, isAuthenticated]);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setServerAssets([]);
+      setAssetLibraryNotice(null);
+      return;
+    }
+
+    let cancelled = false;
+    assetClient
+      .list()
+      .then((items) => {
+        if (cancelled) return;
+        setServerAssets(items);
+        setAssetLibraryNotice(items.length ? null : "服务器资产库暂无内容");
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setServerAssets([]);
+        setAssetLibraryNotice(error instanceof Error ? error.message : "服务器资产库暂时不可用");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    if (!stylePickerImageNodeId) return;
+
+    let cancelled = false;
+    setStylePickerLoading(true);
+    setStylePickerError(null);
+    communityClient
+      .listApprovedCases({ limit: 120, tag: "画布页面社区", sort: "latest" })
+      .then((items) => {
+        if (cancelled) return;
+        const seen = new Set<string>();
+        const cases = items.flatMap((item) => {
+          const styleCase = communityCaseToCanvasStyleCase(item);
+          if (!styleCase || seen.has(styleCase.id)) return [];
+          seen.add(styleCase.id);
+          return [styleCase];
+        });
+        setStylePickerCases(cases);
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setStylePickerCases([]);
+        setStylePickerError(error instanceof Error ? error.message : "社区风格暂时加载失败");
+      })
+      .finally(() => {
+        if (!cancelled) setStylePickerLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [stylePickerImageNodeId, stylePickerReloadToken]);
+
+  useEffect(() => {
+    if (!stylePickerImageNodeId) return undefined;
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setStylePickerImageNodeId(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [stylePickerImageNodeId]);
+
+  useEffect(() => {
+    if (!styleSelectionToast) return undefined;
+    const timer = window.setTimeout(() => setStyleSelectionToast(null), 2200);
+    return () => window.clearTimeout(timer);
+  }, [styleSelectionToast]);
+
+  useEffect(() => {
+    if (!recentProjectsOpen) return undefined;
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setRecentProjectsOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [recentProjectsOpen]);
+
+  useEffect(() => {
+    if (!imageFocusDrag) return;
+
+    const updateDraftFromClientPoint = (clientX: number, clientY: number) => {
+      const { rect } = imageFocusDrag;
+      const end = {
+        x: clampCanvasPercent(((clientX - rect.left) / rect.width) * 100),
+        y: clampCanvasPercent(((clientY - rect.top) / rect.height) * 100),
+      };
+      const ratio = imageFocusDraft?.ratio || "16:9";
+      const nextSelection = normalizeImageFocusSelectionFromAnchor(
+        { x: imageFocusDrag.startX, y: imageFocusDrag.startY },
+        end,
+        ratio,
+        rect.width / rect.height,
+      );
+      if (nextSelection.width < 1 || nextSelection.height < 1) {
+        setImageFocusDraft(null);
+        return;
+      }
+      setImageFocusDraft(nextSelection);
+    };
+
+    const handleMove = (event: globalThis.MouseEvent) => {
+      updateDraftFromClientPoint(event.clientX, event.clientY);
+    };
+    const handleUp = (event: globalThis.MouseEvent) => {
+      updateDraftFromClientPoint(event.clientX, event.clientY);
+      setImageFocusDrag(null);
+    };
+
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [imageFocusDrag, imageFocusDraft?.ratio]);
+
+  useEffect(() => {
+    if (!imageFocusNodeId) return undefined;
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setImageFocusNodeId(null);
+        setImageFocusDraft(null);
+        setImageFocusDrag(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [imageFocusNodeId]);
+
+  const saveCanvasAssetToServer = async (type: AssetLibraryCategory) => {
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+
+    setIsSavingAsset(true);
+    setAssetLibraryNotice(null);
+    try {
+      const savedAsset = await assetClient.create({
+        type,
+        name: saveAssetSource?.name || assetName || "画布素材",
+        description: saveAssetSource?.description || "从画布保存的素材。",
+        url: saveAssetSource?.url,
+        imageUrl: saveAssetSource?.imageUrl || assetCoverUrl,
+        tags: [
+          saveAssetSource?.kind === "image"
+            ? "图片节点"
+            : saveAssetSource?.kind === "video"
+              ? "视频节点"
+              : "文本节点",
+        ],
+        status: "ready",
+        sourceProjectId: projectId || workflow.id,
+      });
+      setServerAssets((current) => [savedAsset, ...current.filter((asset) => asset.id !== savedAsset.id)]);
+      setSaveAssetOpen(false);
+      setSaveAssetSource(null);
+      setSelectedExistingCategory("");
+      setAssetCategoryOpen(false);
+      setCoverSourceOpen(false);
+      setCoverLibraryOpen(false);
+    } catch (error) {
+      setAssetLibraryNotice(error instanceof Error ? error.message : "保存到服务器资产库失败");
+    } finally {
+      setIsSavingAsset(false);
+    }
+  };
+
+  const getTextNodePositionFromClient = (clientX: number, clientY: number) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+
+    const worldX = (clientX - rect.left - canvasViewport.x) / canvasViewport.zoom;
+    const worldY = (clientY - rect.top - canvasViewport.y) / canvasViewport.zoom;
+    return {
+      x: worldX - rect.width / 2,
+      y: worldY - rect.height / 2,
+    };
+  };
+
+  const getCanvasPointFromClient = (clientX: number, clientY: number) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+
+    return {
+      x: clientX - rect.left,
+      y: clientY - rect.top,
+    };
+  };
+
+  const getCanvasWorldPointFromClient = (clientX: number, clientY: number) => {
+    const point = getCanvasPointFromClient(clientX, clientY);
+    return {
+      x: (point.x - canvasViewport.x) / canvasViewport.zoom,
+      y: (point.y - canvasViewport.y) / canvasViewport.zoom,
+    };
+  };
+
+  const isActiveSelectedNode = (kind: CanvasNodeKind, id: string) =>
+    selectedNode?.kind === kind && selectedNode.id === id;
+
+  const isSelectedNode = (kind: CanvasNodeKind, id: string) =>
+    selectedNodes.some((node) => node.kind === kind && node.id === id);
+
+  const isMultiSelectedNode = (kind: CanvasNodeKind, id: string) =>
+    selectedNodes.length > 1 && isSelectedNode(kind, id);
+
+  const findNodePackage = (kind: CanvasNodeKind, id: string): CanvasNodePackage | null =>
+    nodePackages.find((pkg) =>
+      pkg.nodeIds.some((node) => node.kind === kind && node.id === id)
+    ) || null;
+
+  const applyCanvasSelection = (nodes: CanvasSelectedNode[]) => {
+    const uniqueNodes = Array.from(
+      new Map(nodes.map((node) => [getCanvasSelectionKey(node), node])).values()
+    );
+    setSelectedPackageId(null);
+    setSelectedNodes(uniqueNodes);
+    setSelectedNode(uniqueNodes.length === 1 ? uniqueNodes[0] : null);
+  };
+
+  const clearCanvasSelection = () => {
+    setSelectedNodes([]);
+    setSelectedNode(null);
+    setSelectedPackageId(null);
+    setSelectionContextMenu(null);
+  };
+
+  const selectCanvasNode = (kind: CanvasNodeKind, id: string, addToSelection = false) => {
+    if (addToSelection) {
+      const key = getCanvasSelectionKey({ kind, id });
+      const exists = selectedNodes.some((n) => getCanvasSelectionKey(n) === key);
+      if (exists) {
+        const next = selectedNodes.filter((n) => getCanvasSelectionKey(n) !== key);
+        applyCanvasSelection(next);
+      } else {
+        applyCanvasSelection([...selectedNodes, { kind, id }]);
+      }
+      return;
+    }
+    applyCanvasSelection([{ kind, id }]);
+  };
+
+  const openCanvasSelectionContextMenu = (clientX: number, clientY: number) => {
+    const menuPosition = positionFloatingMenu(clientX, clientY, 260, 180, 6);
+    setSelectionContextMenu({
+      ...menuPosition,
+      originLeft: clientX,
+      originTop: clientY,
+    });
+    setContextMenu(null);
+    setNodeMenu(null);
+    closeNodeContextMenus();
+    setCanvasSelectMenu(null);
+  };
+
+  const getCanvasSelectedPackageCount = (nodes = selectedNodes) => {
+    if (!nodes.length) return 0;
+    const selectedKeys = new Set(nodes.map((node) => getCanvasSelectionKey(node)));
+    return nodePackages.filter((nodePackage) =>
+      nodePackage.nodeIds.some((node) => selectedKeys.has(getCanvasSelectionKey(node)))
+    ).length;
+  };
+
+  const openCanvasNodePackageContextMenu = (
+    nodePackage: CanvasNodePackage,
+    clientX: number,
+    clientY: number
+  ) => {
+    setSelectedNodes([]);
+    setSelectedNode(null);
+    setSelectedPackageId(nodePackage.id);
+    openCanvasSelectionContextMenu(clientX, clientY);
+  };
+
+  const handleCanvasNodePackagePointer = (
+    event: MouseEvent<HTMLElement>,
+    nodePackage: CanvasNodePackage
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openCanvasNodePackageContextMenu(nodePackage, event.clientX, event.clientY);
+  };
+
+  const startPackageDrag = (
+    event: React.MouseEvent<HTMLElement>,
+    nodePackage: CanvasNodePackage,
+    collapsed: boolean
+  ) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const textOrigins: Record<string, CanvasPoint> = {};
+    const imageOrigins: Record<string, CanvasPoint> = {};
+    const videoOrigins: Record<string, CanvasPoint> = {};
+
+    for (const member of nodePackage.nodeIds) {
+      if (member.kind === "text") {
+        const node = textNodes.find((n) => n.id === member.id);
+        if (node) textOrigins[node.id] = { ...node.position };
+      } else if (member.kind === "image") {
+        const node = imageNodes.find((n) => n.id === member.id);
+        if (node) imageOrigins[node.id] = { ...node.position };
+      } else if (member.kind === "video") {
+        const node = videoNodes.find((n) => n.id === member.id);
+        if (node) videoOrigins[node.id] = { ...node.position };
+      }
+    }
+
+    setSelectedPackageId(nodePackage.id);
+    setPackageDrag({
+      packageId: nodePackage.id,
+      collapsed,
+      startX: event.clientX,
+      startY: event.clientY,
+      hasMoved: false,
+      textOrigins,
+      imageOrigins,
+      videoOrigins,
+      collapsedBounds: collapsed ? nodePackage.collapsedBounds : undefined,
+    });
+  };
+
+  const startSelectedNodesDrag = (event: React.MouseEvent<HTMLElement>) => {
+    if (event.button !== 0 || selectedNodes.length < 2) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const textOrigins: Record<string, CanvasPoint> = {};
+    const imageOrigins: Record<string, CanvasPoint> = {};
+    const videoOrigins: Record<string, CanvasPoint> = {};
+
+    for (const member of selectedNodes) {
+      if (member.kind === "text") {
+        const node = textNodes.find((n) => n.id === member.id);
+        if (node) textOrigins[node.id] = { ...node.position };
+      } else if (member.kind === "image") {
+        const node = imageNodes.find((n) => n.id === member.id);
+        if (node) imageOrigins[node.id] = { ...node.position };
+      } else if (member.kind === "video") {
+        const node = videoNodes.find((n) => n.id === member.id);
+        if (node) videoOrigins[node.id] = { ...node.position };
+      }
+    }
+
+    setPackageDrag({
+      packageId: `__selection_drag_${Date.now()}`,
+      collapsed: false,
+      startX: event.clientX,
+      startY: event.clientY,
+      hasMoved: false,
+      textOrigins,
+      imageOrigins,
+      videoOrigins,
+    });
+  };
+
+  const packageSelectedCanvasNodes = () => {
+    const uniqueNodes = Array.from(
+      new Map(selectedNodes.map((node) => [getCanvasSelectionKey(node), node])).values()
+    );
+    if (uniqueNodes.length < 2) return;
+    pushHistorySnapshot();
+    const nextPackage: CanvasNodePackage = {
+      id: `canvas-node-package-${Date.now()}`,
+      title: `打包节点 ${nodePackages.length + 1}`,
+      nodeIds: uniqueNodes,
+      updatedAt: new Date().toISOString(),
+    };
+    setNodePackages((currentPackages) => [...currentPackages, nextPackage]);
+    setSelectedNodes([]);
+    setSelectedNode(null);
+    setSelectedPackageId(nextPackage.id);
+    setSelectionContextMenu(null);
+    setStyleSelectionToast(`已打包 ${uniqueNodes.length} 个节点`);
+  };
+
+  const unpackageSelectedCanvasNodes = () => {
+    if (selectedPackageId) {
+      pushHistorySnapshot();
+      const activePackage = nodePackages.find((nodePackage) => nodePackage.id === selectedPackageId);
+      setNodePackages((currentPackages) =>
+        currentPackages.filter((nodePackage) => nodePackage.id !== selectedPackageId)
+      );
+      setSelectedNodes([]);
+      setSelectedNode(null);
+      setSelectedPackageId(null);
+      setSelectionContextMenu(null);
+      setStyleSelectionToast(activePackage ? `已取消打包「${activePackage.title}」` : "已取消打包");
+      return;
+    }
+
+    const uniqueNodes = Array.from(
+      new Map(selectedNodes.map((node) => [getCanvasSelectionKey(node), node])).values()
+    );
+    if (!uniqueNodes.length) {
+      setSelectionContextMenu(null);
+      return;
+    }
+
+    const selectedKeys = new Set(uniqueNodes.map((node) => getCanvasSelectionKey(node)));
+    const affectedPackages = nodePackages.filter((nodePackage) =>
+      nodePackage.nodeIds.some((node) => selectedKeys.has(getCanvasSelectionKey(node)))
+    );
+    if (!affectedPackages.length) {
+      setSelectionContextMenu(null);
+      setStyleSelectionToast("当前节点未被打包");
+      return;
+    }
+
+    setNodePackages((currentPackages) =>
+      currentPackages
+        .map((nodePackage) => {
+          if (!nodePackage.nodeIds.some((node) => selectedKeys.has(getCanvasSelectionKey(node)))) {
+            return nodePackage;
+          }
+          const remainingNodeIds = nodePackage.nodeIds.filter(
+            (node) => !selectedKeys.has(getCanvasSelectionKey(node))
+          );
+          return remainingNodeIds.length >= 2 ? { ...nodePackage, nodeIds: remainingNodeIds } : null;
+        })
+        .filter((nodePackage): nodePackage is CanvasNodePackage => Boolean(nodePackage))
+    );
+    setSelectionContextMenu(null);
+    setStyleSelectionToast(`已取消 ${affectedPackages.length} 个打包关联`);
+  };
+
+  const collapseSelectedCanvasPackage = () => {
+    if (!selectedPackageId) return;
+    const activePackage = nodePackages.find((nodePackage) => nodePackage.id === selectedPackageId);
+    if (!activePackage) return;
+    const collapsedBounds = getCanvasNodePackageBounds(activePackage) || activePackage.collapsedBounds;
+    setNodePackages((currentPackages) =>
+      currentPackages.map((nodePackage) =>
+        nodePackage.id === selectedPackageId
+          ? {
+              ...nodePackage,
+              collapsed: true,
+              collapsedBounds,
+              updatedAt: new Date().toISOString(),
+            }
+          : nodePackage
+      )
+    );
+    setSelectedNodes([]);
+    setSelectedNode(null);
+    setSelectionContextMenu(null);
+    setStyleSelectionToast(`已折叠「${activePackage.title}」`);
+  };
+
+  const expandCanvasNodePackage = (nodePackage: CanvasNodePackage) => {
+    setNodePackages((currentPackages) =>
+      currentPackages.map((currentPackage) =>
+        currentPackage.id === nodePackage.id
+          ? {
+              ...currentPackage,
+              collapsed: false,
+              updatedAt: new Date().toISOString(),
+            }
+          : currentPackage
+      )
+    );
+    setSelectedNodes([]);
+    setSelectedNode(null);
+    setSelectedPackageId(nodePackage.id);
+    setSelectionContextMenu(null);
+    setStyleSelectionToast(`已展开「${nodePackage.title}」`);
+  };
+
+  const addTextNode = (source?: CanvasTextNode, position = { x: 0, y: 0 }) => {
+    const nodeNumber = textNodeIdRef.current;
+    textNodeIdRef.current += 1;
+    pushHistorySnapshot();
+    const node: CanvasTextNode = {
+      id: `text-node-${nodeNumber}-${Date.now()}`,
+      title: source ? buildCopyTitle(source.title) : `文本节点 ${nodeNumber}`,
+      prompt: source?.prompt ?? "",
+      content: source?.content ?? "",
+      isEditingContent: false,
+      isComposerOpen: source?.isComposerOpen ?? !source?.content,
+      selectedModelId: defaultTextModelId,
+      position,
+      size: source?.size ?? createCanvasNodeSize("text"),
+    };
+
+    setTextNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "text", id: node.id });
+  };
+
+  const duplicateTextNode = (source: CanvasTextNode, position = { x: source.position.x + 120, y: source.position.y }) => {
+    addTextNode(source, position);
+  };
+
+  const updateTextNodePrompt = (nodeId: string, prompt: string) => {
+    setTextNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              prompt,
+            }
+          : node
+      )
+    );
+  };
+
+  const updateTextNodeContent = (nodeId: string, content: string) => {
+    setTextNodes((currentNodes) =>
+      currentNodes.map((node) => (node.id === nodeId ? { ...node, content } : node))
+    );
+  };
+
+  const setTextNodeContentEditing = (nodeId: string, isEditingContent: boolean) => {
+    setTextNodes((currentNodes) =>
+      currentNodes.map((node) => (node.id === nodeId ? { ...node, isEditingContent } : node))
+    );
+  };
+
+  const finishTextNodeContentEditing = (nodeId: string) => {
+    setTextNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              isEditingContent: false,
+              isComposerOpen: node.content.trim() ? false : node.isComposerOpen,
+            }
+          : node
+      )
+    );
+  };
+
+  const handleGenerateTextNode = async (nodeId: string) => {
+    const textNode = textNodes.find((node) => node.id === nodeId);
+    if (!textNode || textGenerationInFlightRef.current.has(nodeId)) return;
+
+    let prompt = getEffectiveNodePrompt("text", nodeId, textNode.prompt);
+    // Resolve @-mentions: @图片1 → 第1张图片
+    if (MENTION_TOKEN_RE.test(prompt)) {
+      const mentionOptions = buildNodeMentionOptions("text", nodeId, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
+      prompt = prompt.replace(MENTION_TOKEN_RE, (match) => {
+        const opt = mentionOptions.find((o) => o.token === match);
+        if (!opt) return match;
+        const num = match.match(/\d+/)![0];
+        const kindMap: Record<string, string> = { image: "张图片", video: "段视频", text: "个文本" };
+        return `第${num}${kindMap[opt.kind] || "个节点"}`;
+      });
+    }
+    if (!prompt) {
+      setTextGenerationStatus(nodeId, { status: "error", message: "请输入提示词或连接上游节点" });
+      return;
+    }
+
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+
+    const controller = new AbortController();
+    let streamedText = "";
+    textGenerationInFlightRef.current.add(nodeId);
+    textGenerationAbortControllersRef.current.set(nodeId, controller);
+    setTextGenerationStatus(nodeId, { status: "running", message: "AI 正在生成文本" });
+    setTextNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.id === nodeId
+          ? { ...node, content: "", isEditingContent: false }
+          : node
+      )
+    );
+
+    try {
+      await aiGenerationClient.streamChat(
+        {
+          model: defaultTextModelId,
+          messages: [{ role: "user", content: prompt }],
+          temperature: 0.7,
+        },
+        (chunk) => {
+          if (controller.signal.aborted) return;
+          streamedText += chunk;
+          setTextNodes((currentNodes) =>
+            currentNodes.map((node) =>
+              node.id === nodeId
+                ? { ...node, content: streamedText, isEditingContent: false }
+                : node
+            )
+          );
+        },
+        controller.signal,
+      );
+
+      if (controller.signal.aborted) return;
+      const finalText = streamedText.trim();
+      if (!finalText) {
+        throw new Error("AI 没有返回文本，请换个提示词再试");
+      }
+      setTextNodes((currentNodes) =>
+        currentNodes.map((node) =>
+          node.id === nodeId
+            ? { ...node, content: finalText, isEditingContent: false }
+            : node
+        )
+      );
+      setTextGenerationStatus(nodeId, { status: "success", message: "文本生成完成" });
+    } catch (error) {
+      if (controller.signal.aborted) return;
+      setTextGenerationStatus(nodeId, {
+        status: "error",
+        message: error instanceof Error ? error.message : "文本生成失败",
+      });
+    } finally {
+      textGenerationInFlightRef.current.delete(nodeId);
+      textGenerationAbortControllersRef.current.delete(nodeId);
+    }
+  };
+
+  const reversePromptFromLinkedNode = async (source: CanvasTextNode) => {
+    const sourceLinkedImages = imageNodes.filter((img) => img.sourceTextNodeId === source.id && img.imageUrl);
+    const manualLinkedImageIds = new Set(
+      manualLinks
+        .filter(
+          (link) =>
+            (link.from.kind === "image" && link.to.kind === "text" && link.to.nodeId === source.id) ||
+            (link.from.kind === "text" && link.to.kind === "image" && link.from.nodeId === source.id)
+        )
+        .map((link) => (link.from.kind === "image" ? link.from.nodeId : link.to.nodeId))
+    );
+    const manualLinkedImages = imageNodes.filter(
+      (img) => manualLinkedImageIds.has(img.id) && img.imageUrl
+    );
+    const allLinkedImages = [...sourceLinkedImages, ...manualLinkedImages];
+
+    if (!allLinkedImages.length) {
+      setAssetLibraryNotice("请先将图片链接到文本节点后再反推提示词");
+      return;
+    }
+
+    const linkedImage = allLinkedImages[0];
+    const imageUrl = linkedImage.imageUrl!;
+
+    setTextNodes((nodes) =>
+      nodes.map((n) => n.id === source.id ? { ...n, content: "正在分析图片，生成提示词...", isEditingContent: false } : n)
+    );
+
+    try {
+      const result = await aiGenerationClient.chatCompletion({
+        model: "qwen3.6-plus",
+        messages: [
+          {
+            role: "user",
+            content: [
+              { type: "image_url", image_url: { url: imageUrl } },
+              { type: "text", text: "请详细描述这张图片的内容，用于 AI 绘画提示词。包含：主体描述、构图方式、光影氛围、色彩风格、镜头语言。用英文输出，简洁精准，适合直接作为 Stable Diffusion 或 Midjourney 提示词使用。" },
+            ],
+          },
+        ],
+        temperature: 0.3,
+      });
+
+      const prompt = result.trim() || "（AI 未返回有效描述）";
+      setTextNodes((nodes) =>
+        nodes.map((n) => n.id === source.id ? { ...n, content: prompt, prompt: "", isEditingContent: false } : n)
+      );
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : "反推提示词失败";
+      setTextNodes((nodes) =>
+        nodes.map((n) => n.id === source.id ? { ...n, content: `反推失败：${msg}`, isEditingContent: false } : n)
+      );
+    }
+  };
+
+  const addVideoNodeFromText = (source: CanvasTextNode) => {
+    const nodeNumber = videoNodeIdRef.current;
+    videoNodeIdRef.current += 1;
+    const prompt = source.content || source.prompt || "";
+    const node: CanvasVideoNode = {
+      id: `video-node-${nodeNumber}-${Date.now()}`,
+      title: `视频节点 ${nodeNumber}`,
+      prompt,
+      model: defaultVideoModel,
+      aspectRatio: "16:9",
+      resolution: getDefaultVideoQuality(defaultVideoModel),
+      duration: "4",
+      videoMode: "text2video",
+      sourceTextNodeId: source.id,
+      position: {
+        x: source.position.x + 520,
+        y: source.position.y,
+      },
+      size: createCanvasNodeSize("video"),
+    };
+
+    setVideoNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "video", id: node.id });
+  };
+
+  const addVideoNode = (position = { x: 0, y: 0 }) => {
+    const nodeNumber = videoNodeIdRef.current;
+    videoNodeIdRef.current += 1;
+    const node: CanvasVideoNode = {
+      id: `video-node-${nodeNumber}-${Date.now()}`,
+      title: `视频节点 ${nodeNumber}`,
+      prompt: "",
+      model: defaultVideoModel,
+      aspectRatio: "16:9",
+      resolution: getDefaultVideoQuality(defaultVideoModel),
+      duration: "4",
+      videoMode: "text2video",
+      sourceTextNodeId: "",
+      position,
+      size: createCanvasNodeSize("video"),
+    };
+
+    setVideoNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "video", id: node.id });
+  };
+
+  const duplicateVideoNode = (source: CanvasVideoNode, position = { x: source.position.x + 120, y: source.position.y }) => {
+    const nodeNumber = videoNodeIdRef.current;
+    videoNodeIdRef.current += 1;
+    const node: CanvasVideoNode = {
+      ...source,
+      id: `video-node-${nodeNumber}-${Date.now()}`,
+      title: buildCopyTitle(source.title),
+      position: { ...position },
+      size: { ...source.size },
+    };
+
+    setVideoNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "video", id: node.id });
+  };
+
+  const updateVideoNodePrompt = (nodeId: string, prompt: string) => {
+    setVideoNodes((currentNodes) =>
+      currentNodes.map((node) => (node.id === nodeId ? { ...node, prompt } : node))
+    );
+  };
+
+  const updateVideoNodeSetting = (
+    nodeId: string,
+    patch: Partial<Pick<CanvasVideoNode, "model" | "aspectRatio" | "resolution" | "duration" | "videoMode">>
+  ) => {
+    setVideoNodes((currentNodes) =>
+      currentNodes.map((node) => {
+        if (node.id !== nodeId) return node;
+        const nextModel = patch.model ?? node.model;
+        return {
+          ...node,
+          ...patch,
+          resolution:
+            patch.model && !patch.resolution
+              ? getDefaultVideoQuality(nextModel)
+              : patch.resolution ?? resolveVideoQuality(nextModel, node.resolution),
+        };
+      })
+    );
+  };
+
+  const addImageNode = (
+    imageUrl = "",
+    fileName = "本地图片",
+    position = { x: 0, y: 0 },
+    options?: { title?: string; sourceImageNodeId?: string }
+  ) => {
+    const nodeNumber = imageNodeIdRef.current;
+    imageNodeIdRef.current += 1;
+    const node: CanvasImageNode = {
+      id: `image-node-${nodeNumber}-${Date.now()}`,
+      title: options?.title ?? `图片节点 ${nodeNumber}`,
+      prompt: "",
+      imageUrl,
+      model: fallbackVisibleImageModel,
+      aspectRatio: "16:9",
+      imageSize: getDefaultImageQuality(fallbackVisibleImageModel),
+      fileName,
+      sourceImageNodeId: options?.sourceImageNodeId,
+      position,
+      size: createCanvasNodeSize("image"),
+    };
+
+    setImageNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "image", id: node.id });
+  };
+
+  const duplicateImageNode = (source: CanvasImageNode, position = { x: source.position.x + 120, y: source.position.y }) => {
+    const nodeNumber = imageNodeIdRef.current;
+    imageNodeIdRef.current += 1;
+    const node: CanvasImageNode = {
+      ...source,
+      id: `image-node-${nodeNumber}-${Date.now()}`,
+      title: buildCopyTitle(source.title),
+      position: { ...position },
+      size: { ...source.size },
+    };
+
+    setImageNodes((currentNodes) => [...currentNodes, node]);
+    setSelectedNode({ kind: "image", id: node.id });
+  };
+
+  const duplicateCopiedCanvasNode = (source: CanvasCopiedNode, position: CanvasPoint) => {
+    if (source.kind === "text") {
+      duplicateTextNode(source.node, position);
+      return;
+    }
+    if (source.kind === "image") {
+      duplicateImageNode(source.node, position);
+      return;
+    }
+    duplicateVideoNode(source.node, position);
+  };
+
+  const updateImageNodePrompt = (nodeId: string, prompt: string) => {
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) => (node.id === nodeId ? { ...node, prompt } : node))
+    );
+  };
+
+  const updateImageNodeSetting = (
+    nodeId: string,
+    patch: Partial<Pick<CanvasImageNode, "model" | "aspectRatio" | "imageSize">>
+  ) => {
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) => {
+        if (node.id !== nodeId) return node;
+        const nextModel = resolveVisibleImageModel(patch.model ?? node.model);
+        return {
+          ...node,
+          ...patch,
+          model: nextModel,
+          imageSize:
+            patch.model && !patch.imageSize
+              ? getDefaultImageQuality(nextModel)
+              : patch.imageSize ?? resolveImageQuality(nextModel, node.imageSize),
+        };
+      })
+    );
+  };
+
+  const isHttpUrl = (url: string | undefined) => Boolean(url && /^https?:\/\//i.test(url));
+  const isDataImageUrl = (url: string | undefined) => Boolean(url && /^data:image\/[^;,]+;base64,/i.test(url));
+  const isBlobUrl = (url: string | undefined) => Boolean(url && /^blob:/i.test(url));
+  const isCanvasImageReferenceUrl = (url: string | undefined): url is string =>
+    Boolean(url && (isHttpUrl(url) || isDataImageUrl(url) || isBlobUrl(url)));
+
+  const getCanvasNodePositionX = (port: CanvasNodePort) => {
+    if (port.kind === "text") return textNodes.find((node) => node.id === port.nodeId)?.position.x ?? null;
+    if (port.kind === "image") return imageNodes.find((node) => node.id === port.nodeId)?.position.x ?? null;
+    return videoNodes.find((node) => node.id === port.nodeId)?.position.x ?? null;
+  };
+
+  const normalizeCanvasLinkForFlow = (first: CanvasNodePort, second: CanvasNodePort) => {
+    const sideValidatedLink = normalizeCanvasLinkPorts(first, second);
+    if (!sideValidatedLink) return null;
+
+    const firstX = getCanvasNodePositionX(first);
+    const secondX = getCanvasNodePositionX(second);
+    if (firstX !== null && secondX !== null && firstX !== secondX) {
+      const source = firstX < secondX ? first : second;
+      const target = source === first ? second : first;
+      return {
+        from: { ...source, side: "right" as const },
+        to: { ...target, side: "left" as const },
+      };
+    }
+
+    return {
+      from: { ...sideValidatedLink.from, side: "right" as const },
+      to: { ...sideValidatedLink.to, side: "left" as const },
+    };
+  };
+
+  const getIncomingCanvasPorts = (kind: CanvasNodeKind, nodeId: string): CanvasNodePort[] => {
+    const ports: CanvasNodePort[] = [];
+    const addPort = (port: CanvasNodePort | null | undefined) => {
+      if (!port) return;
+      if (ports.some((item) => getCanvasPortIdentity(item) === getCanvasPortIdentity(port))) return;
+      ports.push(port);
+    };
+
+    if (kind === "image") {
+      const node = imageNodes.find((item) => item.id === nodeId);
+      if (node?.sourceImageNodeId) {
+        addPort({ kind: "image", nodeId: node.sourceImageNodeId, side: "right", slot: "center" });
+      }
+      if (node?.sourceTextNodeId) {
+        addPort({ kind: "text", nodeId: node.sourceTextNodeId, side: "right", slot: "center" });
+      }
+    }
+
+    if (kind === "video") {
+      const node = videoNodes.find((item) => item.id === nodeId);
+      if (node?.sourceTextNodeId) {
+        addPort({ kind: "text", nodeId: node.sourceTextNodeId, side: "right", slot: "center" });
+      }
+    }
+
+    manualLinks.forEach((link) => {
+      const normalizedLink = normalizeCanvasLinkForFlow(link.from, link.to);
+      if (!normalizedLink) return;
+      if (normalizedLink.to.kind === kind && normalizedLink.to.nodeId === nodeId) {
+        addPort(normalizedLink.from);
+      }
+    });
+
+    return ports;
+  };
+
+  const getNodePromptContent = (
+    kind: CanvasNodeKind,
+    nodeId: string,
+    visited = new Set<string>()
+  ): string => {
+    const key = `${kind}:${nodeId}`;
+    if (visited.has(key)) return "";
+    visited.add(key);
+
+    if (kind === "text") {
+      const node = textNodes.find((item) => item.id === nodeId);
+      return node?.content.trim() || node?.prompt.trim() || "";
+    }
+
+    if (kind === "image") {
+      const node = imageNodes.find((item) => item.id === nodeId);
+      const ownPrompt = node?.prompt.trim();
+      if (ownPrompt) return ownPrompt;
+    }
+
+    if (kind === "video") {
+      const node = videoNodes.find((item) => item.id === nodeId);
+      const ownPrompt = node?.prompt.trim();
+      if (ownPrompt) return ownPrompt;
+    }
+
+    return getIncomingCanvasPorts(kind, nodeId)
+      .map((port) => getNodePromptContent(port.kind, port.nodeId, visited))
+      .filter(Boolean)
+      .join("\n");
+  };
+
+  const getEffectiveNodePrompt = (kind: CanvasNodeKind, nodeId: string, explicitPrompt: string) =>
+    explicitPrompt.trim() || getIncomingCanvasPorts(kind, nodeId)
+      .map((port) => getNodePromptContent(port.kind, port.nodeId))
+      .filter(Boolean)
+      .join("\n");
+
+  const getConnectedImageReferenceItems = (
+    kind: CanvasNodeKind,
+    nodeId: string,
+    ownImageNode?: CanvasImageNode
+  ) => {
+    const items: CanvasImageReferenceItem[] = [];
+    const seen = new Set<string>();
+    const addImageNode = (node: CanvasImageNode | undefined) => {
+      const imageUrl = node?.imageUrl?.trim();
+      if (!node || !isCanvasImageReferenceUrl(imageUrl)) return;
+      const identity = `${node.id}:${imageUrl}`;
+      if (seen.has(identity)) return;
+      seen.add(identity);
+      items.push({
+        nodeId: node.id,
+        title: node.title,
+        imageUrl,
+        fileName: node.fileName,
+      });
+    };
+
+    addImageNode(ownImageNode);
+    getIncomingCanvasPorts(kind, nodeId).forEach((port) => {
+      if (port.kind !== "image") return;
+      const imageNode = imageNodes.find((node) => node.id === port.nodeId);
+      addImageNode(imageNode);
+    });
+
+    return items;
+  };
+
+  const getConnectedImageReferenceUrls = (
+    kind: CanvasNodeKind,
+    nodeId: string,
+    ownImageNode?: CanvasImageNode
+  ) => {
+    const urls: string[] = [];
+    getConnectedImageReferenceItems(kind, nodeId, ownImageNode).forEach((item) => {
+      if (!isHttpUrl(item.imageUrl) || urls.includes(item.imageUrl)) return;
+      urls.push(item.imageUrl);
+    });
+    return urls;
+  };
+
+  const persistResolvedImageReferenceUrl = (nodeId: string, imageUrl: string) => {
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) => (node.id === nodeId && node.imageUrl !== imageUrl ? { ...node, imageUrl } : node))
+    );
+  };
+
+  const uploadCanvasImageReference = async (item: CanvasImageReferenceItem) => {
+    const rawUrl = item.imageUrl.trim();
+    if (isHttpUrl(rawUrl)) return rawUrl;
+
+    let dataUrl = rawUrl;
+    let mimeType = rawUrl.match(/^data:([^;,]+);base64,/i)?.[1] || "image/png";
+    if (isBlobUrl(rawUrl)) {
+      const response = await fetch(rawUrl);
+      if (!response.ok) {
+        throw new Error(`图片节点「${item.title}」读取失败，请重新上传后再生成。`);
+      }
+      const blob = await response.blob();
+      if (!blob.type.startsWith("image/")) {
+        throw new Error(`图片节点「${item.title}」不是可用的图片文件。`);
+      }
+      mimeType = blob.type || mimeType;
+      dataUrl = await blobToDataUrl(blob);
+    }
+
+    if (!isDataImageUrl(dataUrl)) {
+      throw new Error(`图片节点「${item.title}」不是可提交的图片地址，请重新上传。`);
+    }
+
+    const uploaded = await aiGenerationClient.uploadAsset({
+      dataUrl,
+      name: item.fileName || item.title || "canvas-reference.png",
+      mimeType,
+    });
+    const uploadedUrl = uploaded.url || uploaded.signedUrl;
+    if (!uploadedUrl) {
+      throw new Error(`图片节点「${item.title}」上传失败，请稍后重试。`);
+    }
+    persistResolvedImageReferenceUrl(item.nodeId, uploadedUrl);
+    return uploadedUrl;
+  };
+
+  const resolveConnectedImageReferenceUrls = async (
+    kind: CanvasNodeKind,
+    nodeId: string,
+    ownImageNode?: CanvasImageNode
+  ) => {
+    const items = getConnectedImageReferenceItems(kind, nodeId, ownImageNode);
+    const results = await Promise.all(items.map((item) => uploadCanvasImageReference(item)));
+    const seen = new Set<string>();
+    return results.filter((url): url is string => {
+      if (!url || seen.has(url)) return false;
+      seen.add(url);
+      return true;
+    });
+  };
+
+  const handleGenerateImageNode = async (nodeId: string) => {
+    const imageNode = imageNodes.find((node) => node.id === nodeId);
+    if (!imageNode) return;
+
+    if (imageGenerationInFlightRef.current.has(nodeId)) return;
+
+    const referenceItems = getConnectedImageReferenceItems("image", nodeId, imageNode);
+    const basePrompt = getEffectiveNodePrompt("image", nodeId, imageNode.prompt) || (referenceItems.length ? "根据参考图片生成图片" : "");
+    const markingSuffix = imageNode.marking ? `\n标记: ${imageNode.marking}` : "";
+    const prompt = basePrompt + markingSuffix;
+    if (!prompt) {
+      setImageGenerationStatus(nodeId, { status: "error", message: "请输入提示词或连接上游节点" });
+      return;
+    }
+
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+
+    if (!onCreateTask) {
+      setImageGenerationStatus(nodeId, { status: "error", message: "生成入口暂不可用" });
+      return;
+    }
+
+    const model = resolveVisibleImageModel(imageNode.model || defaultImageModel);
+    const ratio = imageNode.aspectRatio || "16:9";
+    const quality = resolveImageQuality(model, imageNode.imageSize || "");
+
+    imageGenerationInFlightRef.current.add(nodeId);
+    setImageGenerationStatus(nodeId, { status: "submitting", message: "正在提交生成", progress: 8 });
+    setGenerationToast("图片正在生成");
+
+    let task: Awaited<ReturnType<typeof onCreateTask>> | null = null;
+    try {
+      const referenceUrls = await resolveConnectedImageReferenceUrls("image", nodeId, imageNode);
+      const taskInput: CreatePreviewTaskInput = {
+        title: imageNode.title || "图片节点生成",
+        type: "image",
+        prompt,
+        params: {
+          projectId: projectId || undefined,
+          model,
+          ratio,
+          quality,
+          gridMode: "single",
+          referenceUrls: referenceUrls.length ? referenceUrls : undefined,
+        },
+      };
+      task = await onCreateTask(taskInput);
+      if (task.status === "failed") {
+        throw new Error(translateTaskError(task.errorMessage));
+      }
+      if (task.status === "completed" && !task.outputUrl) {
+        throw new Error("图片生成任务已完成，但服务器没有返回结果地址，请稍后重试");
+      }
+      addCanvasGenKeepalive(task.id, nodeId, "image", projectId || "");
+      setImageGenerationStatus(nodeId, { status: "running", message: "图片生成中", progress: Math.max(18, Number(task.progress || 0)) });
+      const outputUrl =
+        task.outputUrl ||
+        (await waitForImageTaskResult(task.id, (status) => {
+          const progress = Math.max(18, Math.min(status.status === "completed" ? 100 : 96, Math.trunc(status.progress || 0)));
+          const statusLabel =
+            status.status === "pending"
+              ? "图片排队中"
+              : status.status === "running"
+                ? "图片生成中"
+                : status.status === "completed"
+                  ? "图片生成完成"
+                  : "图片生成失败";
+          setImageGenerationStatus(nodeId, { status: "running", message: statusLabel, progress });
+        }));
+      setImageGenerationStatus(nodeId, { status: "success", message: "生成完成", progress: 100 });
+      removeCanvasGenKeepalive(task.id);
+      const immediateAssetRef = createCanvasAssetRefFromGeneratedResult({
+        url: outputUrl,
+        mediaType: "image/png",
+        resultType: "image",
+        taskId: task.id,
+        originalUrl: outputUrl,
+      });
+      setImageNodes((currentNodes) =>
+        currentNodes.map((node) =>
+          node.id === nodeId
+            ? {
+                ...node,
+                imageUrl: outputUrl,
+                assetRef: immediateAssetRef,
+                taskRef: {
+                  taskId: task!.id,
+                  status: "completed",
+                  resultUrl: outputUrl,
+                  updatedAt: new Date().toISOString(),
+                },
+                fileName: `${imageNode.title || "图片节点"}-${ratio}-${quality}`,
+              }
+            : node
+        )
+      );
+      let durableAssetRef = immediateAssetRef;
+      try {
+        durableAssetRef = await persistCanvasGeneratedResultAsset({
+        title: imageNode.title || "image-node",
+        url: outputUrl,
+        mediaType: "image/png",
+        resultType: "image",
+        taskId: task.id,
+        originalUrl: outputUrl,
+      });
+      } catch {
+        durableAssetRef = immediateAssetRef;
+      }
+      if (durableAssetRef.url !== outputUrl || durableAssetRef.ossKey) {
+        setImageNodes((currentNodes) =>
+          currentNodes.map((node) =>
+            node.id === nodeId
+              ? {
+                  ...node,
+                  imageUrl: durableAssetRef.url,
+                  assetRef: durableAssetRef,
+                  taskRef: {
+                    taskId: task!.id,
+                    status: "completed",
+                    resultUrl: durableAssetRef.url,
+                    updatedAt: new Date().toISOString(),
+                  },
+                  fileName: `${imageNode.title || "图片节点"}-${ratio}-${quality}`,
+                }
+              : node
+          )
+        );
+      }
+    } catch (error) {
+      setImageGenerationStatus(nodeId, {
+        status: "error",
+        message: error instanceof Error ? error.message : "图片生成失败",
+      });
+    } finally {
+      imageGenerationInFlightRef.current.delete(nodeId);
+      if (task?.id) removeCanvasGenKeepalive(task.id);
+    }
+  };
+
+  const getVideoFrameMode = (videoMode: CanvasVideoNode["videoMode"]) =>
+    videoMode === "firstlast" ? "start-end" : "omni";
+
+  const handleGenerateVideoNode = async (nodeId: string) => {
+    const videoNode = videoNodes.find((node) => node.id === nodeId);
+    if (!videoNode || videoGenerationInFlightRef.current.has(nodeId)) return;
+
+    const basePrompt = getEffectiveNodePrompt("video", nodeId, videoNode.prompt);
+    const extraParts: string[] = [];
+    if (videoNode.marking) extraParts.push(`标记: ${videoNode.marking}`);
+    const cameraPrompt = getCameraMotionPrompt(videoNode.cameraMotion || "");
+    if (cameraPrompt) extraParts.push(`运镜: ${cameraPrompt}`);
+    const prompt = extraParts.length > 0 ? `${basePrompt || ""}\n${extraParts.join("\n")}`.trim() : basePrompt;
+    const referenceItems = getConnectedImageReferenceItems("video", nodeId);
+    if (videoNode.videoMode === "img2video" && referenceItems.length === 0) {
+      setVideoGenerationStatus(nodeId, { status: "error", message: "图生视频需要先连接至少一个有图片的图片节点" });
+      return;
+    }
+    if (!prompt && referenceItems.length === 0) {
+      setVideoGenerationStatus(nodeId, { status: "error", message: "请输入提示词或连接图片节点" });
+      return;
+    }
+
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+
+    if (!onCreateTask) {
+      setVideoGenerationStatus(nodeId, { status: "error", message: "生成入口暂不可用" });
+      return;
+    }
+
+    const model = toHappyHorseDisplayModel(videoNode.model || defaultVideoModel);
+    const ratio = videoNode.aspectRatio || "16:9";
+    const quality = resolveVideoQuality(model, videoNode.resolution || "");
+    const duration = Number(videoNode.duration) || 4;
+
+    videoGenerationInFlightRef.current.add(nodeId);
+    setVideoGenerationStatus(nodeId, { status: "submitting", message: "正在提交视频生成", progress: 8 });
+    setGenerationToast("视频正在生成");
+
+    try {
+      const referenceUrls = await resolveConnectedImageReferenceUrls("video", nodeId);
+      if (videoNode.videoMode === "img2video" && referenceUrls.length === 0) {
+        throw new Error("图生视频需要先连接至少一个可用的图片节点");
+      }
+      let requestModel = resolveVideoRequestModel({ model, referenceUrls });
+      const task = await onCreateTask({
+        title: videoNode.title || "视频节点生成",
+        type: "video",
+        prompt: prompt || "根据参考图片生成视频",
+        params: {
+          projectId: projectId || undefined,
+          model: requestModel,
+          ratio,
+          quality,
+          resolution: quality,
+          duration,
+          frameMode: getVideoFrameMode(videoNode.videoMode),
+          referenceUrls: referenceUrls.length ? referenceUrls : undefined,
+          muted: false,
+          hasReferenceVideo: false,
+        },
+      });
+      if (task.status === "failed") {
+        throw new Error(translateTaskError(task.errorMessage));
+      }
+      if (task.status === "completed" && !task.outputUrl) {
+        throw new Error("视频生成任务已完成，但服务器没有返回结果地址，请稍后重试");
+      }
+      setVideoGenerationStatus(nodeId, { status: "running", message: "视频生成中", progress: Math.max(18, Number(task.progress || 0)) });
+      const outputUrl =
+        task.outputUrl ||
+        (await waitForImageTaskResult(task.id, (status) => {
+          const progress = Math.max(18, Math.min(status.status === "completed" ? 100 : 96, Math.trunc(status.progress || 0)));
+          const statusLabel =
+            status.status === "pending"
+              ? "视频排队中"
+              : status.status === "running"
+                ? "视频生成中"
+                : status.status === "completed"
+                  ? "视频生成完成"
+                  : "视频生成失败";
+          setVideoGenerationStatus(nodeId, { status: "running", message: statusLabel, progress });
+        }));
+      setVideoGenerationStatus(nodeId, { status: "success", message: "视频生成完成", progress: 100 });
+      const immediateAssetRef = createCanvasAssetRefFromGeneratedResult({
+        url: outputUrl,
+        mediaType: "video/mp4",
+        resultType: "video",
+        taskId: task.id,
+        originalUrl: outputUrl,
+      });
+      setVideoNodes((currentNodes) =>
+        currentNodes.map((node) =>
+          node.id === nodeId
+            ? {
+                ...node,
+                videoUrl: outputUrl,
+                assetRef: immediateAssetRef,
+                taskRef: {
+                  taskId: task.id,
+                  status: "completed",
+                  resultUrl: outputUrl,
+                  updatedAt: new Date().toISOString(),
+                },
+              }
+            : node
+        )
+      );
+      const assetRef = await persistCanvasGeneratedResultAsset({
+        title: videoNode.title || "video-node",
+        url: outputUrl,
+        mediaType: "video/mp4",
+        resultType: "video",
+        taskId: task.id,
+        originalUrl: outputUrl,
+      });
+      await delay(420);
+      if (assetRef.url !== outputUrl || assetRef.ossKey) {
+        setVideoNodes((currentNodes) =>
+          currentNodes.map((node) =>
+            node.id === nodeId
+              ? {
+                  ...node,
+                  videoUrl: assetRef.url,
+                  assetRef,
+                  taskRef: {
+                    taskId: task.id,
+                    status: "completed",
+                    resultUrl: assetRef.url,
+                    updatedAt: new Date().toISOString(),
+                  },
+                }
+              : node
+          )
+        );
+      }
+    } catch (error) {
+      setVideoGenerationStatus(nodeId, {
+        status: "error",
+        message: error instanceof Error ? error.message : "视频生成失败",
+      });
+    } finally {
+      videoGenerationInFlightRef.current.delete(nodeId);
+    }
+  };
+
+  const handleImageFileSelected = (
+    event: ChangeEvent<HTMLInputElement>,
+    position: { x: number; y: number }
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    const imageUrl = URL.createObjectURL(file);
+    if (pendingImageToImageNodeId) {
+      const sourceNode = imageNodes.find((node) => node.id === pendingImageToImageNodeId);
+      if (sourceNode) {
+        setImageNodes((currentNodes) =>
+          currentNodes.map((node) =>
+            node.id === sourceNode.id
+              ? { ...node, imageUrl, fileName: file.name, focusSelection: undefined, assetRef: null, taskRef: null }
+              : node
+          )
+        );
+        addImageNode(
+          "",
+          "图生图",
+          { x: sourceNode.position.x + 520, y: sourceNode.position.y },
+          { title: "图生图", sourceImageNodeId: sourceNode.id }
+        );
+      }
+      setPendingImageToImageNodeId(null);
+    } else if (pendingImageNodeId) {
+      setImageNodes((currentNodes) =>
+        currentNodes.map((node) =>
+          node.id === pendingImageNodeId
+            ? { ...node, imageUrl, fileName: file.name, focusSelection: undefined, assetRef: null, taskRef: null }
+            : node
+        )
+      );
+      selectCanvasNode("image", pendingImageNodeId);
+      setPendingImageNodeId(null);
+    } else {
+      addImageNode(imageUrl, file.name, position);
+    }
+    setContextMenu(null);
+    setNodeMenu(null);
+  };
+
+  const activeTextNode = textNodeMenu
+    ? textNodes.find((node) => node.id === textNodeMenu.nodeId) ?? null
+    : null;
+  const activeImageNode = imageNodeMenu
+    ? imageNodes.find((node) => node.id === imageNodeMenu.nodeId) ?? null
+    : null;
+  const activeVideoNode = videoNodeMenu
+    ? videoNodes.find((node) => node.id === videoNodeMenu.nodeId) ?? null
+    : null;
+
+  const openImageStylePicker = (nodeId: string) => {
+    selectCanvasNode("image", nodeId);
+    setCanvasSelectMenu(null);
+    setContextMenu(null);
+    setNodeMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setStylePickerTab("square");
+    setStylePickerCategory(canvasStylePickerCategories[0]);
+    setStylePickerSearch("");
+    setStylePickerImageNodeId(nodeId);
+  };
+
+  const handleSelectImageStyle = (styleCase: CanvasStyleCase) => {
+    if (!stylePickerImageNodeId) return;
+    const styleReference = createStyleReferenceFromCase(styleCase);
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.id === stylePickerImageNodeId
+          ? { ...node, styleReference }
+          : node
+      )
+    );
+    setRecentStyleCases((currentCases) => [
+      styleCase,
+      ...currentCases.filter((item) => item.id !== styleCase.id),
+    ].slice(0, 24));
+    setStyleSelectionToast(`已选择「${styleCase.title}」风格`);
+    setStylePickerImageNodeId(null);
+  };
+
+  const openImageFocusMode = (node: CanvasImageNode) => {
+    selectCanvasNode("image", node.id);
+    setCanvasSelectMenu(null);
+    setContextMenu(null);
+    setNodeMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setStylePickerImageNodeId(null);
+    setImageFocusNodeId(node.id);
+    setImageFocusDraft(node.focusSelection ?? null);
+    setImageFocusDrag(null);
+  };
+
+  const cancelImageFocusMode = () => {
+    setImageFocusNodeId(null);
+    setImageFocusDraft(null);
+    setImageFocusDrag(null);
+  };
+
+  const confirmImageFocusMode = () => {
+    if (!imageFocusNodeId || !imageFocusDraft) {
+      cancelImageFocusMode();
+      return;
+    }
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.id === imageFocusNodeId
+          ? { ...node, focusSelection: imageFocusDraft }
+          : node
+      )
+    );
+    setStyleSelectionToast("已确认聚焦区域");
+    cancelImageFocusMode();
+  };
+
+  const handleImageFocusDragStart = (event: MouseEvent<HTMLDivElement>, nodeId: string) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const startX = clampCanvasPercent(((event.clientX - rect.left) / rect.width) * 100);
+    const startY = clampCanvasPercent(((event.clientY - rect.top) / rect.height) * 100);
+    selectCanvasNode("image", nodeId);
+    setImageFocusNodeId(nodeId);
+    setCanvasSelectMenu(null);
+    setContextMenu(null);
+    setNodeMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setImageFocusDrag({
+      nodeId,
+      startX,
+      startY,
+      rect: {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+      },
+    });
+    setImageFocusDraft({
+      x: startX,
+      y: startY,
+      width: 0,
+      height: 0,
+      ratio: imageFocusDraft?.ratio || "16:9",
+    });
+  };
+
+  const handleImageFocusRatioChange = (ratio: string) => {
+    if (!imageFocusDraft) return;
+    const targetNode = imageFocusNodeId
+      ? imageNodes.find((node) => node.id === imageFocusNodeId)
+      : null;
+    const containerRatio = targetNode ? targetNode.size.width / targetNode.size.height : 16 / 9;
+    setImageFocusDraft(applyImageFocusRatioFromTopLeft(imageFocusDraft, ratio, containerRatio));
+  };
+
+  const stylePickerNode = stylePickerImageNodeId
+    ? imageNodes.find((node) => node.id === stylePickerImageNodeId) ?? null
+    : null;
+  const stylePickerSourceCases =
+    stylePickerTab === "recent"
+      ? recentStyleCases
+      : stylePickerTab === "favorites"
+        ? stylePickerCases.filter((item) => item.isFavorited)
+        : stylePickerCases;
+  const stylePickerQuery = stylePickerSearch.trim().toLowerCase();
+  const stylePickerVisibleCases = stylePickerSourceCases.filter((item) => {
+    const matchesCategory =
+      stylePickerCategory === canvasStylePickerCategories[0] ||
+      item.keywords.includes(stylePickerCategory.toLowerCase());
+    const matchesQuery = !stylePickerQuery || item.keywords.includes(stylePickerQuery);
+    return matchesCategory && matchesQuery;
+  });
+
+  const getCanvasNodeRect = (position: CanvasPoint, size: CanvasNodeSize) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    const canvasWidth = rect?.width ?? 0;
+    const canvasHeight = rect?.height ?? 0;
+    return {
+      left: canvasWidth / 2 + position.x - size.width / 2,
+      top: canvasHeight / 2 + position.y - size.height / 2,
+      width: size.width,
+      height: size.height,
+    };
+  };
+
+  const getCanvasNodeScreenRect = (position: CanvasPoint, size: CanvasNodeSize) => {
+    const worldRect = getCanvasNodeRect(position, size);
+    return {
+      left: canvasViewport.x + worldRect.left * canvasViewport.zoom,
+      top: canvasViewport.y + worldRect.top * canvasViewport.zoom,
+      width: worldRect.width * canvasViewport.zoom,
+      height: worldRect.height * canvasViewport.zoom,
+    };
+  };
+
+  const getNodesInSelectionRect = (selectionRect: { left: number; top: number; width: number; height: number }) => [
+    ...textNodes.flatMap((node) =>
+      doCanvasRectsIntersect(selectionRect, getCanvasNodeScreenRect(node.position, node.size))
+        ? [{ kind: "text" as const, id: node.id }]
+        : []
+    ),
+    ...imageNodes.flatMap((node) =>
+      doCanvasRectsIntersect(selectionRect, getCanvasNodeScreenRect(node.position, node.size))
+        ? [{ kind: "image" as const, id: node.id }]
+        : []
+    ),
+    ...videoNodes.flatMap((node) =>
+      doCanvasRectsIntersect(selectionRect, getCanvasNodeScreenRect(node.position, node.size))
+        ? [{ kind: "video" as const, id: node.id }]
+        : []
+    ),
+  ];
+
+  dragCallbacksRef.current = {
+    pushHistorySnapshot,
+    clearCanvasSelection,
+    selectCanvasNode,
+    applyCanvasSelection,
+    getCanvasPointFromClient,
+    getNodesInSelectionRect,
+    expandCanvasNodePackage,
+    onBeforeResize: () => {
+      setCanvasSelectMenu(null);
+      setImageFocusNodeId(null);
+      setImageFocusDraft(null);
+      setImageFocusDrag(null);
+    },
+  };
+
+  const getCanvasNodeBoundsFromSelection = (node: CanvasSelectedNode): CanvasNodeBounds | null => {
+    if (node.kind === "text") {
+      const textNode = textNodes.find((item) => item.id === node.id);
+      return textNode ? getCanvasNodeScreenRect(textNode.position, textNode.size) : null;
+    }
+    if (node.kind === "image") {
+      const imageNode = imageNodes.find((item) => item.id === node.id);
+      return imageNode ? getCanvasNodeScreenRect(imageNode.position, imageNode.size) : null;
+    }
+    const videoNode = videoNodes.find((item) => item.id === node.id);
+    return videoNode ? getCanvasNodeScreenRect(videoNode.position, videoNode.size) : null;
+  };
+
+  const mergeCanvasNodeBounds = (bounds: CanvasNodeBounds[]): CanvasNodeBounds | null => {
+    if (!bounds.length) return null;
+    const left = Math.min(...bounds.map((item) => item.left));
+    const top = Math.min(...bounds.map((item) => item.top));
+    const right = Math.max(...bounds.map((item) => item.left + item.width));
+    const bottom = Math.max(...bounds.map((item) => item.top + item.height));
+    return {
+      left,
+      top,
+      width: right - left,
+      height: bottom - top,
+    };
+  };
+
+  const getCanvasSelectedNodesBounds = () =>
+    selectedNodes.length > 1 && !selectedPackageId
+      ? mergeCanvasNodeBounds(
+          selectedNodes
+            .map((node) => getCanvasNodeBoundsFromSelection(node))
+            .filter((bounds): bounds is CanvasNodeBounds => Boolean(bounds))
+        )
+      : null;
+
+  const getCanvasNodePackageBounds = (nodePackage: CanvasNodePackage) =>
+    mergeCanvasNodeBounds(
+      nodePackage.nodeIds
+        .map((node) => getCanvasNodeBoundsFromSelection(node))
+        .filter((bounds): bounds is CanvasNodeBounds => Boolean(bounds))
+    );
+
+  const getCanvasNodePackageBoundsWithMeta = () =>
+    nodePackages
+      .filter((nodePackage) => !nodePackage.collapsed)
+      .map((nodePackage) => {
+        const bounds = getCanvasNodePackageBounds(nodePackage);
+        return bounds ? { nodePackage, bounds } : null;
+      })
+      .filter(
+        (item): item is { nodePackage: CanvasNodePackage; bounds: CanvasNodeBounds } =>
+          Boolean(item)
+      );
+
+  const getCanvasCollapsedPackageCardsWithMeta = () =>
+    nodePackages
+      .filter((nodePackage) => nodePackage.collapsed)
+      .map((nodePackage) => {
+        const bounds = nodePackage.collapsedBounds || getCanvasNodePackageBounds(nodePackage);
+        return bounds ? { nodePackage, bounds } : null;
+      })
+      .filter(
+        (item): item is { nodePackage: CanvasNodePackage; bounds: CanvasNodeBounds } =>
+          Boolean(item)
+      );
+
+  const isPendingPort = (port: CanvasNodePort) =>
+    pendingLinkPort?.kind === port.kind &&
+    pendingLinkPort.nodeId === port.nodeId &&
+    pendingLinkPort.side === port.side &&
+    pendingLinkPort.slot === port.slot;
+
+  const connectorButtonClassName = (
+    baseClassName: string,
+    port: CanvasNodePort
+  ) => `${baseClassName} studio-canvas-node-connector--${port.side} studio-canvas-node-connector--${port.slot}${isPendingPort(port) ? " is-linking" : ""}`;
+
+  const connectorPortKey = (port: CanvasNodePort) =>
+    `${port.kind}-${port.nodeId}-${port.side}-${port.slot}`;
+
+  const canConnectCanvasPorts = (from: CanvasNodePort, to: CanvasNodePort) =>
+    Boolean(normalizeCanvasLinkForFlow(from, to));
+
+  const resetConnectorFollow = (port: CanvasNodePort) => {
+    const portKey = connectorPortKey(port);
+    setConnectorFollowOffsets((currentOffsets) => {
+      if (!currentOffsets[portKey]) return currentOffsets;
+      const { [portKey]: _removed, ...nextOffsets } = currentOffsets;
+      return nextOffsets;
+    });
+  };
+
+  const updateConnectorFollow = (
+    port: CanvasNodePort,
+    event: MouseEvent<HTMLButtonElement>
+  ) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const deltaX = event.clientX - (rect.left + rect.width / 2);
+    const deltaY = event.clientY - (rect.top + rect.height / 2);
+    const distance = Math.hypot(deltaX, deltaY);
+    if (distance > connectorFollowRadius) {
+      resetConnectorFollow(port);
+      return;
+    }
+
+    const followScale = Math.min(connectorMaxFollowOffset, distance * connectorFollowStrength) / Math.max(distance, 1);
+    const portKey = connectorPortKey(port);
+    setConnectorFollowOffsets((currentOffsets) => ({
+      ...currentOffsets,
+      [portKey]: {
+        x: deltaX * followScale,
+        y: deltaY * followScale,
+      },
+    }));
+  };
+
+  const renderConnectorButton = (port: CanvasNodePort, baseClassName: string) => {
+    const portKey = connectorPortKey(port);
+    const followOffset = connectorFollowOffsets[portKey] ?? { x: 0, y: 0 };
+
+    return (
+      <button
+        type="button"
+        className={connectorButtonClassName(baseClassName, port)}
+        data-canvas-port-kind={port.kind}
+        data-canvas-port-node-id={port.nodeId}
+        data-canvas-port-side={port.side}
+        data-canvas-port-slot={port.slot}
+        onMouseDown={(event) => handleConnectorDragStart(event, port)}
+        onMouseMove={(event) => {
+          if (!connectorDrag) updateConnectorFollow(port, event);
+        }}
+        onMouseLeave={() => resetConnectorFollow(port)}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        style={{
+          "--connector-follow-x": `${followOffset.x}px`,
+          "--connector-follow-y": `${followOffset.y}px`,
+        } as CSSProperties}
+      >
+        <span>+</span>
+      </button>
+    );
+  };
+
+  const closeNodeContextMenus = () => {
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+  };
+
+  const renderCanvasNodeContextMenu = ({
+    left,
+    top,
+    saveAssetSource,
+    assetName,
+    assetCoverUrl = "",
+    copyNode,
+    duplicateNode,
+    deleteNode,
+  }: {
+    left: number;
+    top: number;
+    saveAssetSource: CanvasAssetSaveSource;
+    assetName: string;
+    assetCoverUrl?: string;
+    copyNode: () => void;
+    duplicateNode: () => void;
+    deleteNode: () => void;
+  }) => (
+    <div
+      className="studio-canvas-node-context-menu"
+      style={{ left, top }}
+      role="menu"
+      onClick={(event) => event.stopPropagation()}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        onClick={(event) => {
+          event.stopPropagation();
+          setSaveAssetSource(saveAssetSource);
+          setAssetName(assetName);
+          setAssetCoverUrl(assetCoverUrl);
+          setAssetSaveMode(saveAssetSource.kind === "text" ? "create" : "existing");
+          setSelectedExistingCategory("");
+          closeNodeContextMenus();
+          setSaveAssetOpen(true);
+        }}
+      >
+        保存到我的素材
+      </button>
+      <button type="button" role="menuitem" disabled>创建主体</button>
+      <span className="studio-canvas-node-context-menu__divider" />
+      <button
+        type="button"
+        role="menuitem"
+        onClick={(event) => {
+          event.stopPropagation();
+          copyNode();
+          closeNodeContextMenus();
+        }}
+      >
+        <span>复制节点 <span className="studio-canvas-node-context-menu__hint">?</span></span>
+        <kbd>⌘C</kbd>
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        onClick={(event) => {
+          event.stopPropagation();
+          duplicateNode();
+          closeNodeContextMenus();
+        }}
+      >
+        <span>创建副本 <span className="studio-canvas-node-context-menu__hint">?</span></span>
+      </button>
+      <button type="button" role="menuitem" disabled>
+        <span>粘贴</span>
+        <kbd>⌘V</kbd>
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        onClick={(event) => {
+          event.stopPropagation();
+          deleteNode();
+          closeNodeContextMenus();
+        }}
+      >
+        <span>删除</span>
+        <kbd>⌘⌫</kbd>
+      </button>
+      <span className="studio-canvas-node-context-menu__divider" />
+      <button
+        type="button"
+        role="menuitem"
+        className="studio-canvas-node-context-menu__primary"
+        onClick={(event) => {
+          event.stopPropagation();
+          copyNode();
+          closeNodeContextMenus();
+        }}
+      >
+        复制到剪贴板
+      </button>
+    </div>
+  );
+
+  const getNodePortPoint = (port: CanvasNodePort) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const canvasCenterX = rect.width / 2;
+    const canvasCenterY = rect.height / 2;
+
+    if (port.kind === "text") {
+      const node = textNodes.find((item) => item.id === port.nodeId);
+      if (!node) return null;
+      return {
+        x:
+          canvasCenterX +
+          node.position.x +
+          getCanvasNodeSideDirection(port.side) * (node.size.width / 2 + connectorAnchorOutset),
+        y: canvasCenterY + node.position.y,
+      };
+    }
+
+    if (port.kind === "image") {
+      const node = imageNodes.find((item) => item.id === port.nodeId);
+      if (!node) return null;
+      return {
+        x:
+          canvasCenterX +
+          node.position.x +
+          getCanvasNodeSideDirection(port.side) * (node.size.width / 2 + connectorAnchorOutset),
+        y: canvasCenterY + node.position.y,
+      };
+    }
+
+    const node = videoNodes.find((item) => item.id === port.nodeId);
+    if (!node) return null;
+    return {
+      x:
+        canvasCenterX +
+        node.position.x +
+        getCanvasNodeSideDirection(port.side) * (node.size.width / 2 + connectorAnchorOutset),
+      y: canvasCenterY + node.position.y,
+    };
+  };
+
+  const buildLinkFromPorts = (id: string, from: CanvasNodePort, to: CanvasNodePort) => {
+    const source = getNodePortPoint(from);
+    const target = getNodePortPoint(to);
+    if (!source || !target) return null;
+
+    return {
+      id,
+      sourceX: source.x,
+      sourceY: source.y,
+      targetX: target.x,
+      targetY: target.y,
+      sourceSide: from.side,
+      targetSide: to.side,
+      sourceKind: from.kind,
+      sourceNodeId: from.nodeId,
+      targetKind: to.kind,
+      targetNodeId: to.nodeId,
+    };
+  };
+
+  const isSameCanvasPort = (first: CanvasNodePort, second: CanvasNodePort) =>
+    first.nodeId === second.nodeId &&
+    first.kind === second.kind &&
+    first.side === second.side &&
+    first.slot === second.slot;
+
+  const connectCanvasPorts = (from: CanvasNodePort, to: CanvasNodePort) => {
+    if (isSameCanvasPort(from, to)) return;
+
+    const normalizedLink = normalizeCanvasLinkForFlow(from, to);
+    if (normalizedLink) {
+      pushHistorySnapshot();
+      const linkIdentity = getCanvasLinkIdentity(normalizedLink.from, normalizedLink.to);
+      setManualLinks((currentLinks) => {
+        const hasExistingLink = currentLinks.some((link) => {
+          const normalizedExistingLink = normalizeCanvasLinkForFlow(link.from, link.to);
+          return normalizedExistingLink
+            ? getCanvasLinkIdentity(normalizedExistingLink.from, normalizedExistingLink.to) === linkIdentity
+            : false;
+        });
+        return hasExistingLink
+          ? currentLinks
+          : [
+              ...currentLinks,
+              {
+                id: `manual-link-${Date.now()}`,
+                from: normalizedLink.from,
+                to: normalizedLink.to,
+              },
+            ];
+      });
+    }
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+  };
+
+  const getCanvasPortFromElement = (element: Element | null): CanvasNodePort | null => {
+    const target = element?.closest<HTMLElement>(
+      "[data-canvas-port-kind][data-canvas-port-node-id][data-canvas-port-side][data-canvas-port-slot]",
+    );
+    if (!target) return null;
+
+    const kind = target.dataset.canvasPortKind;
+    const nodeId = target.dataset.canvasPortNodeId;
+    const side = target.dataset.canvasPortSide;
+    const slot = target.dataset.canvasPortSlot;
+    if ((kind !== "text" && kind !== "image" && kind !== "video") || !nodeId) return null;
+    if (side !== "left" && side !== "right") return null;
+    if (slot !== "center") return null;
+    return { kind, nodeId, side, slot };
+  };
+
+  const handleConnectorDragStart = (event: MouseEvent<HTMLButtonElement>, port: CanvasNodePort) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setConnectorDrag({
+      port,
+      startX: event.clientX,
+      startY: event.clientY,
+      hasMoved: false,
+    });
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+    setContextMenu(null);
+    setNodeMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setCanvasSelectMenu(null);
+  };
+
+  const removeCanvasLink = (linkId: string) => {
+    pushHistorySnapshot();
+    setManualLinks((currentLinks) => currentLinks.filter((link) => link.id !== linkId));
+    setImageNodes((currentNodes) =>
+      currentNodes.map((node) => {
+        if (node.sourceImageNodeId && `${node.sourceImageNodeId}-${node.id}` === linkId) {
+          return { ...node, sourceImageNodeId: undefined };
+        }
+        if (node.sourceTextNodeId && `${node.sourceTextNodeId}-${node.id}` === linkId) {
+          return { ...node, sourceTextNodeId: undefined };
+        }
+        return node;
+      })
+    );
+    setVideoNodes((currentNodes) =>
+      currentNodes.map((node) =>
+        node.sourceTextNodeId && `${node.sourceTextNodeId}-${node.id}` === linkId
+          ? { ...node, sourceTextNodeId: "" }
+          : node
+      )
+    );
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+    setConnectorDrag(null);
+  };
+
+  const collapsedPackageNodeKeys = new Set(
+    nodePackages.flatMap((nodePackage) =>
+      nodePackage.collapsed ? nodePackage.nodeIds.map((node) => getCanvasSelectionKey(node)) : []
+    )
+  );
+  const isNodeCollapsedInPackage = (kind: CanvasNodeKind, id: string) =>
+    collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind, id }));
+  const isLinkCollapsedInPackage = (link: { sourceKind: CanvasNodeKind; sourceNodeId: string; targetKind: CanvasNodeKind; targetNodeId: string }) =>
+    isNodeCollapsedInPackage(link.sourceKind, link.sourceNodeId) ||
+    isNodeCollapsedInPackage(link.targetKind, link.targetNodeId);
+
+  const nodeLinks = [
+    ...imageNodes.flatMap((imageNode) => {
+      if (imageNode.sourceImageNodeId) {
+        const link = buildLinkFromPorts(
+          `${imageNode.sourceImageNodeId}-${imageNode.id}`,
+          { kind: "image", nodeId: imageNode.sourceImageNodeId, side: "right", slot: "center" },
+          { kind: "image", nodeId: imageNode.id, side: "left", slot: "center" }
+        );
+        return link ? [link] : [];
+      }
+      if (!imageNode.sourceTextNodeId) return [];
+      const link = buildLinkFromPorts(
+        `${imageNode.sourceTextNodeId}-${imageNode.id}`,
+        { kind: "text", nodeId: imageNode.sourceTextNodeId, side: "right", slot: "center" },
+        { kind: "image", nodeId: imageNode.id, side: "left", slot: "center" }
+      );
+      return link ? [link] : [];
+    }),
+    ...videoNodes.flatMap((videoNode) => {
+      const link = buildLinkFromPorts(
+        `${videoNode.sourceTextNodeId}-${videoNode.id}`,
+        { kind: "text", nodeId: videoNode.sourceTextNodeId, side: "right", slot: "center" },
+        { kind: "video", nodeId: videoNode.id, side: "left", slot: "center" }
+      );
+      return link ? [link] : [];
+    }),
+    ...manualLinks.flatMap((link) => {
+      const normalizedLink = normalizeCanvasLinkForFlow(link.from, link.to);
+      if (!normalizedLink) return [];
+      const positionedLink = buildLinkFromPorts(link.id, normalizedLink.from, normalizedLink.to);
+      return positionedLink ? [positionedLink] : [];
+    }),
+  ].filter((link) => !isLinkCollapsedInPackage(link));
+  const pendingLinkPreview =
+    pendingLinkPort && pendingLinkPreviewPoint
+      ? (() => {
+          const source = getNodePortPoint(pendingLinkPort);
+          return source
+            ? {
+                id: "pending-link-preview",
+                sourceX: source.x,
+                sourceY: source.y,
+                targetX: pendingLinkPreviewPoint.x,
+                targetY: pendingLinkPreviewPoint.y,
+                sourceSide: pendingLinkPort.side,
+                targetSide: null,
+              }
+            : null;
+        })()
+      : null;
+
+  const openCanvasAddNodeMenu = useCallback((clientX: number, clientY: number) => {
+    const menuPosition = positionFloatingMenu(clientX, clientY, 260, 390, 0);
+    clearCanvasSelection();
+    setSelectionDrag(null);
+    setContextMenu(null);
+    setSelectionContextMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setCanvasSelectMenu(null);
+    setNodeMenu({
+      ...menuPosition,
+      originLeft: clientX,
+      originTop: clientY,
+    });
+  }, []);
+
+  const handlePaneContextMenu = useCallback((event: MouseEvent | globalThis.MouseEvent) => {
+    event.preventDefault();
+    openCanvasAddNodeMenu(event.clientX, event.clientY);
+  }, [openCanvasAddNodeMenu]);
+
+  const handleCanvasContextMenu = (event: MouseEvent<HTMLElement>) => {
+    if (
+      event.target instanceof Element &&
+      event.target.closest(
+        ".studio-canvas-text-node, .studio-canvas-image-node, .studio-canvas-video-node, .studio-canvas-node-package-box, .studio-canvas-node-package-card, .react-flow__controls, .studio-canvas-project-bar, .studio-canvas-recent-drawer, .studio-canvas-context-menu, .studio-canvas-node-context-menu, .studio-canvas-selection-context-menu, .studio-canvas-add-node-menu, .studio-canvas-save-asset, textarea, input, button, [role='menu']"
+      )
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const clickPoint = getCanvasPointFromClient(event.clientX, event.clientY);
+    const expandedBounds = getCanvasNodePackageBoundsWithMeta();
+    for (const { nodePackage, bounds } of expandedBounds) {
+      const boxLeft = bounds.left - 18;
+      const boxTop = bounds.top - 34;
+      const boxRight = boxLeft + bounds.width + 36;
+      const boxBottom = boxTop + bounds.height + 54;
+      if (
+        clickPoint.x >= boxLeft &&
+        clickPoint.x <= boxRight &&
+        clickPoint.y >= boxTop &&
+        clickPoint.y <= boxBottom
+      ) {
+        openCanvasNodePackageContextMenu(nodePackage, event.clientX, event.clientY);
+        return;
+      }
+    }
+    const collapsedCards = getCanvasCollapsedPackageCardsWithMeta();
+    for (const { nodePackage, bounds } of collapsedCards) {
+      const cardW = Math.min(360, Math.max(240, bounds.width));
+      const cardH = Math.max(112, Math.min(150, bounds.height || 132));
+      if (
+        clickPoint.x >= bounds.left &&
+        clickPoint.x <= bounds.left + cardW &&
+        clickPoint.y >= bounds.top &&
+        clickPoint.y <= bounds.top + cardH
+      ) {
+        openCanvasNodePackageContextMenu(nodePackage, event.clientX, event.clientY);
+        return;
+      }
+    }
+    const selBounds = getCanvasSelectedNodesBounds();
+    if (selBounds) {
+      const selLeft = selBounds.left - 10;
+      const selTop = selBounds.top - 30;
+      const selRight = selLeft + selBounds.width + 20;
+      const selBottom = selTop + selBounds.height + 40;
+      if (
+        clickPoint.x >= selLeft &&
+        clickPoint.x <= selRight &&
+        clickPoint.y >= selTop &&
+        clickPoint.y <= selBottom
+      ) {
+        openCanvasSelectionContextMenu(event.clientX, event.clientY);
+        return;
+      }
+    }
+
+    openCanvasAddNodeMenu(event.clientX, event.clientY);
+  };
+
+  const handlePaneClick = useCallback(() => {
+    if (suppressNextPaneClickRef.current) {
+      suppressNextPaneClickRef.current = false;
+      return;
+    }
+    clearCanvasSelection();
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+    setConnectorDrag(null);
+    setCanvasSelectMenu(null);
+    setRecentProjectsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!contextMenu && !nodeMenu && !textNodeMenu && !imageNodeMenu && !videoNodeMenu && !selectionContextMenu && !canvasSelectMenu && !connectionDropMenu) return;
+    const closeMenu = () => {
+      setContextMenu(null);
+      setNodeMenu(null);
+      setTextNodeMenu(null);
+      setImageNodeMenu(null);
+      setVideoNodeMenu(null);
+      setSelectionContextMenu(null);
+      setCanvasSelectMenu(null);
+      if (connectionDropMenu) {
+        setConnectionDropMenu(null);
+        setPendingLinkPort(null);
+        setPendingLinkPreviewPoint(null);
+      }
+    };
+    const raf = requestAnimationFrame(() => {
+      window.addEventListener("click", closeMenu);
+      window.addEventListener("keydown", closeMenu);
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("click", closeMenu);
+      window.removeEventListener("keydown", closeMenu);
+    };
+  }, [contextMenu, nodeMenu, textNodeMenu, imageNodeMenu, videoNodeMenu, selectionContextMenu, canvasSelectMenu, connectionDropMenu]);
+
+  useEffect(() => {
+    if (!connectorDrag) return;
+
+    const clearPendingConnector = () => {
+      setPendingLinkPort(null);
+      setPendingLinkPreviewPoint(null);
+    };
+
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const hasDragged =
+        Math.hypot(event.clientX - connectorDrag.startX, event.clientY - connectorDrag.startY) > canvasNodeClickMoveThreshold;
+      if (!hasDragged && !connectorDrag.hasMoved) return;
+
+      if (!connectorDrag.hasMoved) {
+        setConnectorDrag((currentDrag) =>
+          currentDrag && isSameCanvasPort(currentDrag.port, connectorDrag.port)
+            ? { ...currentDrag, hasMoved: true }
+            : currentDrag
+        );
+        setPendingLinkPort(connectorDrag.port);
+        clearCanvasSelection();
+      }
+      setPendingLinkPreviewPoint(getCanvasWorldPointFromClient(event.clientX, event.clientY));
+    };
+
+    const handleUp = (event: globalThis.MouseEvent) => {
+      const hasDragged =
+        connectorDrag.hasMoved ||
+        Math.hypot(event.clientX - connectorDrag.startX, event.clientY - connectorDrag.startY) > canvasNodeClickMoveThreshold;
+
+      if (hasDragged) {
+        const targetPort = getCanvasPortFromElement(document.elementFromPoint(event.clientX, event.clientY));
+        if (targetPort) {
+          connectCanvasPorts(connectorDrag.port, targetPort);
+        } else {
+          const menuPosition = positionFloatingMenu(event.clientX, event.clientY, 200, 160, 0);
+          setConnectionDropMenu({
+            ...menuPosition,
+            originLeft: event.clientX,
+            originTop: event.clientY,
+            sourcePort: connectorDrag.port,
+          });
+        }
+      } else {
+        clearPendingConnector();
+      }
+      setConnectorDrag(null);
+    };
+
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [connectorDrag]);
+
+  useEffect(() => {
+    const sourcePort = pendingAutoConnectRef.current;
+    if (!sourcePort || !selectedNode) return;
+    pendingAutoConnectRef.current = null;
+    const targetSide = sourcePort.side === "right" ? "left" : "right";
+    connectCanvasPorts(sourcePort, { kind: selectedNode.kind, nodeId: selectedNode.id, side: targetSide, slot: "center" });
+  }, [selectedNode]);
+
+  const handleCanvasMouseMove = (event: MouseEvent<HTMLElement>) => {
+    if (!pendingLinkPort) return;
+    setPendingLinkPreviewPoint(getCanvasWorldPointFromClient(event.clientX, event.clientY));
+  };
+
+  const handleCanvasWheel = (event: WheelEvent<HTMLElement>) => {
+    if (!canvasRef.current) return;
+    if (
+      event.target instanceof Element &&
+      event.target.closest(
+        "textarea, input, .canvas-select-chip__dropdown, .studio-canvas-context-menu, .studio-canvas-node-context-menu, .studio-canvas-add-node-menu, .studio-canvas-save-asset, .studio-canvas-style-picker, .studio-canvas-recent-drawer"
+      )
+    ) {
+      return;
+    }
+
+    const point = getCanvasPointFromClient(event.clientX, event.clientY);
+    const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
+    setCanvasViewport((viewport) => {
+      const nextZoom = clampCanvasViewportZoom(viewport.zoom * zoomDelta);
+      if (nextZoom === viewport.zoom) return viewport;
+      const worldX = (point.x - viewport.x) / viewport.zoom;
+      const worldY = (point.y - viewport.y) / viewport.zoom;
+      return {
+        zoom: nextZoom,
+        x: point.x - worldX * nextZoom,
+        y: point.y - worldY * nextZoom,
+      };
+    });
+  };
+
+  const getAllCanvasNodeBounds = (): CanvasNodeBounds | null => {
+    const allBounds: CanvasNodeBounds[] = [];
+    for (const node of textNodes) allBounds.push(getCanvasNodeScreenRect(node.position, node.size));
+    for (const node of imageNodes) allBounds.push(getCanvasNodeScreenRect(node.position, node.size));
+    for (const node of videoNodes) allBounds.push(getCanvasNodeScreenRect(node.position, node.size));
+    return mergeCanvasNodeBounds(allBounds);
+  };
+
+  const fitCanvasView = () => {
+    const bounds = getAllCanvasNodeBounds();
+    if (!bounds || !canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const padding = 80;
+    const availW = rect.width - padding * 2;
+    const availH = rect.height - padding * 2;
+    const zoom = clampCanvasViewportZoom(Math.min(availW / bounds.width, availH / bounds.height));
+    const cx = bounds.left + bounds.width / 2;
+    const cy = bounds.top + bounds.height / 2;
+    setCanvasViewport({
+      zoom,
+      x: rect.width / 2 - cx * zoom,
+      y: rect.height / 2 - cy * zoom,
+    });
+  };
+
+  const zoomCanvasIn = () => {
+    if (!canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const center = { x: rect.width / 2, y: rect.height / 2 };
+    setCanvasViewport((vp) => {
+      const next = clampCanvasViewportZoom(vp.zoom * 1.25);
+      if (next === vp.zoom) return vp;
+      const wx = (center.x - vp.x) / vp.zoom;
+      const wy = (center.y - vp.y) / vp.zoom;
+      return { zoom: next, x: center.x - wx * next, y: center.y - wy * next };
+    });
+  };
+
+  const zoomCanvasOut = () => {
+    if (!canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const center = { x: rect.width / 2, y: rect.height / 2 };
+    setCanvasViewport((vp) => {
+      const next = clampCanvasViewportZoom(vp.zoom * 0.8);
+      if (next === vp.zoom) return vp;
+      const wx = (center.x - vp.x) / vp.zoom;
+      const wy = (center.y - vp.y) / vp.zoom;
+      return { zoom: next, x: center.x - wx * next, y: center.y - wy * next };
+    });
+  };
+
+  const resetCanvasZoom = () => {
+    if (!canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    setCanvasViewport((vp) => {
+      const wx = (rect.width / 2 - vp.x) / vp.zoom;
+      const wy = (rect.height / 2 - vp.y) / vp.zoom;
+      return { zoom: 1, x: rect.width / 2 - wx, y: rect.height / 2 - wy };
+    });
+  };
+
+  const handleCanvasDoubleClick = (event: MouseEvent<HTMLElement>) => {
+    if (event.button !== 0 || spacePanning || imageFocusNodeId) return;
+    const target = event.target instanceof Element ? event.target : null;
+    if (target?.closest("textarea, input, button, [role='menu'], .studio-canvas-text-node, .studio-canvas-image-node, .studio-canvas-video-node, .studio-canvas-node-package-box__label, .react-flow__controls, .studio-canvas-project-bar, .studio-canvas-recent-drawer, .studio-canvas-context-menu, .studio-canvas-node-context-menu, .studio-canvas-add-node-menu, .studio-canvas-save-asset, .studio-canvas-zoom-controls")) return;
+    const worldPoint = getCanvasWorldPointFromClient(event.clientX, event.clientY);
+    addTextNode(undefined, worldPoint);
+  };
+
+  const shouldStartSelectionDrag = (target: EventTarget | null) =>
+    target instanceof Element &&
+    Boolean(target.closest(".react-flow__pane, .studio-canvas, .studio-canvas-world, .studio-canvas-node-links")) &&
+    !target.closest(
+      ".studio-canvas-text-node, .studio-canvas-image-node, .studio-canvas-video-node, .studio-canvas-node-package-box, .studio-canvas-node-package-card, .studio-canvas-zoom-controls, .studio-canvas-project-bar, .studio-canvas-recent-drawer, .studio-canvas-context-menu, .studio-canvas-node-context-menu, .studio-canvas-selection-context-menu, .studio-canvas-add-node-menu, .studio-canvas-save-asset, textarea, input, button, [role='menu']"
+    );
+
+  const startProjectNameEditing = () => {
+    setProjectNameDraft(currentProjectTitle);
+    setProjectNameEditing(true);
+    setRecentProjectsOpen(false);
+  };
+
+  const cancelProjectNameEditing = () => {
+    setProjectNameDraft(currentProjectTitle);
+    setProjectNameEditing(false);
+  };
+
+  const commitProjectNameEditing = () => {
+    const nextTitle = projectNameDraft.trim() || "未命名项目";
+    setCurrentProjectTitle(nextTitle);
+    setProjectNameDraft(nextTitle);
+    setProjectNameEditing(false);
+    setProjectSaveState((current) =>
+      current.status === "saving" ? current : { status: "idle", message: "项目名称已更新，记得保存" },
+    );
+  };
+
+  const buildCanvasWorkflowSnapshot = (): WebCanvasWorkflow => {
+    const workflowNodes: WebCanvasWorkflow["nodes"] = [
+      ...textNodes.map((node) => ({
+        id: node.id,
+        kind: "text" as const,
+        label: node.title,
+        detail: node.content || node.prompt || "",
+        position: { ...node.position },
+        size: { ...node.size },
+        params: {
+          prompt: node.prompt,
+          content: node.content,
+          model: node.selectedModelId,
+        },
+      })),
+      ...imageNodes.map((node) => ({
+        id: node.id,
+        kind: "image" as const,
+        label: node.title,
+        detail: node.prompt || "",
+        position: { ...node.position },
+        size: { ...node.size },
+        previewUrl: node.assetRef?.url || node.imageUrl || undefined,
+        assetRef: node.assetRef || null,
+        taskRef: node.taskRef || null,
+        params: {
+          prompt: node.prompt,
+          fileName: node.fileName,
+          model: node.model,
+          aspectRatio: node.aspectRatio,
+          imageSize: node.imageSize,
+          styleReference: node.styleReference,
+          focusSelection: node.focusSelection,
+          marking: node.marking,
+        },
+        metadata: {
+          fileName: node.fileName,
+          model: node.model,
+          aspectRatio: node.aspectRatio,
+          imageSize: node.imageSize,
+          styleReference: node.styleReference,
+          focusSelection: node.focusSelection,
+          marking: node.marking,
+        },
+      })),
+      ...videoNodes.map((node) => ({
+        id: node.id,
+        kind: "video" as const,
+        label: node.title,
+        detail: node.prompt || "",
+        position: { ...node.position },
+        size: { ...node.size },
+        previewUrl: node.assetRef?.url || node.videoUrl || undefined,
+        assetRef: node.assetRef || null,
+        taskRef: node.taskRef || null,
+        params: {
+          model: node.model,
+          aspectRatio: node.aspectRatio,
+          resolution: node.resolution,
+          duration: node.duration,
+          videoMode: node.videoMode,
+          marking: node.marking,
+          cameraMotion: node.cameraMotion,
+        },
+        metadata: {
+          model: node.model,
+          aspectRatio: node.aspectRatio,
+          resolution: node.resolution,
+          duration: node.duration,
+          videoMode: node.videoMode,
+          marking: node.marking,
+          cameraMotion: node.cameraMotion,
+        },
+      })),
+    ];
+    const nodeIds = new Set(workflowNodes.map((node) => node.id));
+    const edgeMap = new Map<string, WebCanvasWorkflow["edges"][number]>();
+    const addEdge = (id: string, source: string, target: string, label = "连接") => {
+      if (!nodeIds.has(source) || !nodeIds.has(target) || source === target) return;
+      const edgeId = id || `${source}-${target}`;
+      edgeMap.set(edgeId, { id: edgeId, source, target, label, animated: true });
+    };
+
+    imageNodes.forEach((node) => {
+      if (node.sourceImageNodeId) addEdge(`${node.sourceImageNodeId}-${node.id}`, node.sourceImageNodeId, node.id, "图生图");
+      if (node.sourceTextNodeId) addEdge(`${node.sourceTextNodeId}-${node.id}`, node.sourceTextNodeId, node.id, "生成图片");
+    });
+    videoNodes.forEach((node) => {
+      if (node.sourceTextNodeId) addEdge(`${node.sourceTextNodeId}-${node.id}`, node.sourceTextNodeId, node.id, "生成视频");
+    });
+    manualLinks.forEach((link) => {
+      const normalizedLink = normalizeCanvasLinkForFlow(link.from, link.to);
+      if (normalizedLink) addEdge(link.id, normalizedLink.from.nodeId, normalizedLink.to.nodeId);
+    });
+
+    const firstVideoNode = videoNodes[0];
+    const firstImageNode = imageNodes[0];
+    return normalizeCanvasWorkflowSchema({
+      ...workflow,
+      title: currentProjectTitle.trim() || workflow.title || "未命名项目",
+      settings: {
+        model: firstVideoNode?.model || firstImageNode?.model || workflow.settings.model,
+        ratio: firstVideoNode?.aspectRatio || firstImageNode?.aspectRatio || workflow.settings.ratio,
+        duration: firstVideoNode ? `${firstVideoNode.duration}s` : workflow.settings.duration,
+        resolution: firstVideoNode?.resolution || firstImageNode?.imageSize || workflow.settings.resolution,
+      },
+      viewport: { ...canvasViewport },
+      nodes: workflowNodes,
+      edges: Array.from(edgeMap.values()),
+      packages: createWorkflowPackagesFromCanvasPackages(nodePackages),
+    });
+  };
+
+  const runCanvasAutoSave = useCallback(async () => {
+    if (!isAuthenticated || !onSaveWorkflow || shouldShowEmptyProjectState) return;
+    if (canvasAutoSaveInFlightRef.current) {
+      canvasAutoSavePendingRef.current = true;
+      return;
+    }
+
+    const snapshot = buildCanvasWorkflowSnapshot();
+    const fingerprint = buildCanvasWorkflowJson(snapshot);
+    if (fingerprint === lastAutoSavedWorkflowFingerprintRef.current) return;
+
+    canvasAutoSaveInFlightRef.current = true;
+    setAutoSaveStatus("saving");
+    try {
+      await onSaveWorkflow(snapshot, { silent: true, reason: "autosave" });
+      lastAutoSavedWorkflowFingerprintRef.current = fingerprint;
+      isDirtyRef.current = false;
+      setAutoSaveStatus("saved");
+      if (autoSaveStatusTimerRef.current) window.clearTimeout(autoSaveStatusTimerRef.current);
+      autoSaveStatusTimerRef.current = window.setTimeout(() => setAutoSaveStatus("idle"), 3000);
+    } catch (error) {
+      console.warn("[Canvas autosave] failed", error);
+      setAutoSaveStatus("error");
+    } finally {
+      canvasAutoSaveInFlightRef.current = false;
+      if (canvasAutoSavePendingRef.current) {
+        canvasAutoSavePendingRef.current = false;
+        window.setTimeout(() => void runCanvasAutoSave(), canvasAutoSaveIdleTimeoutMs);
+      }
+    }
+  }, [
+    isAuthenticated,
+    onSaveWorkflow,
+    projectId,
+    shouldShowEmptyProjectState,
+    textNodes,
+    imageNodes,
+    videoNodes,
+    manualLinks,
+    nodePackages,
+    currentProjectTitle,
+    workflow,
+  ]);
+
+  // Save immediately when user leaves page or switches tab
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && isDirtyRef.current) {
+        void runCanvasAutoSave();
+      }
+    };
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirtyRef.current) {
+        void runCanvasAutoSave();
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [runCanvasAutoSave]);
+
+  useEffect(() => {
+    if (canvasAutoSaveTimerRef.current !== null) {
+      window.clearTimeout(canvasAutoSaveTimerRef.current);
+      canvasAutoSaveTimerRef.current = null;
+    }
+    if (canvasAutoSaveIdleHandleRef.current !== null && "cancelIdleCallback" in window) {
+      window.cancelIdleCallback(canvasAutoSaveIdleHandleRef.current);
+      canvasAutoSaveIdleHandleRef.current = null;
+    }
+
+    if (!isAuthenticated || !onSaveWorkflow || shouldShowEmptyProjectState) return undefined;
+
+    if (canvasAutoSaveHydrationRef.current) {
+      canvasAutoSaveHydrationRef.current = false;
+      lastAutoSavedWorkflowFingerprintRef.current = buildCanvasWorkflowJson(buildCanvasWorkflowSnapshot());
+      return undefined;
+    }
+
+    canvasAutoSaveTimerRef.current = window.setTimeout(() => {
+      canvasAutoSaveTimerRef.current = null;
+      const requestIdleCallback = (window as unknown as {
+        requestIdleCallback?: typeof window.requestIdleCallback;
+      }).requestIdleCallback?.bind(window);
+      if (requestIdleCallback) {
+        canvasAutoSaveIdleHandleRef.current = requestIdleCallback(
+          () => void runCanvasAutoSave(),
+          { timeout: canvasAutoSaveIdleTimeoutMs }
+        );
+        return;
+      }
+      window.setTimeout(() => void runCanvasAutoSave(), canvasAutoSaveIdleTimeoutMs);
+    }, canvasAutoSaveDebounceMs);
+
+    return () => {
+      if (canvasAutoSaveTimerRef.current !== null) {
+        window.clearTimeout(canvasAutoSaveTimerRef.current);
+        canvasAutoSaveTimerRef.current = null;
+      }
+      if (canvasAutoSaveIdleHandleRef.current !== null && "cancelIdleCallback" in window) {
+        window.cancelIdleCallback(canvasAutoSaveIdleHandleRef.current);
+        canvasAutoSaveIdleHandleRef.current = null;
+      }
+    };
+  }, [
+    isAuthenticated,
+    onSaveWorkflow,
+    projectId,
+    shouldShowEmptyProjectState,
+    textNodes,
+    imageNodes,
+    videoNodes,
+    manualLinks,
+    nodePackages,
+    currentProjectTitle,
+    canvasViewport,
+    runCanvasAutoSave,
+  ]);
+
+  const handleSaveProject = async () => {
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+    if (!onSaveWorkflow || projectSaveState.status === "saving") return;
+
+    setProjectSaveState({ status: "saving", message: "正在保存到服务器..." });
+    try {
+      await onSaveWorkflow(buildCanvasWorkflowSnapshot(), { reason: "manual" });
+      isDirtyRef.current = false;
+      setProjectSaveState({ status: "success", message: "已保存到服务器" });
+    } catch (error) {
+      setProjectSaveState({
+        status: "error",
+        message: error instanceof Error ? error.message : "保存失败，请稍后重试",
+      });
+    }
+  };
+
+  const handleExportWorkflowJson = () => {
+    const snapshot = buildCanvasWorkflowSnapshot();
+    const workflowJson = buildCanvasWorkflowJson(snapshot);
+    const fileName = buildWorkflowFileName(snapshot.title);
+    const blob = new Blob([workflowJson], { type: "application/json;charset=utf-8" });
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = objectUrl;
+    anchor.download = fileName;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
+    setCommunityPublishState({ status: "success", message: `已导出 ${fileName}` });
+  };
+
+  const handlePublishWorkflowToCommunity = async () => {
+    if (communityPublishState.status === "saving") return;
+    if (!isAuthenticated) {
+      onOpenLogin();
+      return;
+    }
+    if (!onSaveWorkflow) {
+      setCommunityPublishState({ status: "error", message: "保存入口暂不可用，无法提交审核" });
+      return;
+    }
+
+    const snapshot = buildCanvasWorkflowSnapshot();
+    if (!snapshot.nodes.length) {
+      setCommunityPublishState({ status: "error", message: "画布为空，请先添加节点后再提交审核" });
+      return;
+    }
+
+    const fileName = buildWorkflowFileName(snapshot.title);
+    const workflowJson = buildCanvasWorkflowJson(snapshot);
+    setCommunityPublishState({ status: "saving", message: "正在保存并提交社区审核..." });
+    setProjectSaveState({ status: "saving", message: "提交前正在保存当前画布..." });
+
+    let projectSaved = false;
+    try {
+      const savedProject = await onSaveWorkflow(snapshot, { reason: "publish" });
+      projectSaved = true;
+      setProjectSaveState({ status: "success", message: "已保存到服务器" });
+
+      const uploadedWorkflow = await aiGenerationClient.uploadAsset({
+        dataUrl: textToDataUrl(workflowJson, "application/json"),
+        name: fileName,
+        mimeType: "application/json",
+        scope: "community-case-workflow",
+      });
+
+      await communityClient.publishCase(
+        buildCanvasCommunityCaseInput({
+          workflow: snapshot,
+          projectId: savedProject?.id || projectId || snapshot.id,
+          uploadedWorkflow: {
+            url: uploadedWorkflow.url,
+            ossKey: uploadedWorkflow.ossKey,
+            fileName,
+          },
+        }),
+      );
+
+      setCommunityPublishState({ status: "success", message: "已提交社区审核，通过后会显示在社区页面" });
+    } catch (error) {
+      if (!projectSaved) {
+        setProjectSaveState({
+          status: "error",
+          message: error instanceof Error ? error.message : "保存失败，请稍后重试",
+        });
+      }
+      setCommunityPublishState({
+        status: "error",
+        message: error instanceof Error ? error.message : "提交审核失败，请稍后重试",
+      });
+    }
+  };
+
+  const handleCanvasMouseDown = (event: MouseEvent<HTMLElement>) => {
+    if (event.button === 1) {
+      event.preventDefault();
+      event.stopPropagation();
+      setCanvasPanDrag({
+        startX: event.clientX,
+        startY: event.clientY,
+        originX: canvasViewport.x,
+        originY: canvasViewport.y,
+      });
+      setSelectionDrag(null);
+      setPendingLinkPort(null);
+      setPendingLinkPreviewPoint(null);
+      setConnectorDrag(null);
+      return;
+    }
+    if (event.button === 0 && imageFocusNodeId) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancelImageFocusMode();
+      return;
+    }
+    if (event.button === 0 && spacePanning) {
+      event.preventDefault();
+      event.stopPropagation();
+      setCanvasPanDrag({
+        startX: event.clientX,
+        startY: event.clientY,
+        originX: canvasViewport.x,
+        originY: canvasViewport.y,
+      });
+      return;
+    }
+    if (event.button !== 0) return;
+
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (
+      !target?.closest(
+        ".studio-canvas-text-node, .studio-canvas-image-node, .studio-canvas-video-node, .studio-canvas-node-package-box__label, .react-flow__controls, .studio-canvas-project-bar, .studio-canvas-recent-drawer, .studio-canvas-context-menu, .studio-canvas-node-context-menu, .studio-canvas-selection-context-menu, .studio-canvas-add-node-menu, .studio-canvas-save-asset, textarea, input, button, [role='menu']"
+      )
+    ) {
+      const clickPoint = getCanvasPointFromClient(event.clientX, event.clientY);
+      const expandedBounds = getCanvasNodePackageBoundsWithMeta();
+      for (const { nodePackage, bounds } of expandedBounds) {
+        const boxLeft = bounds.left - 18;
+        const boxTop = bounds.top - 34;
+        const boxRight = boxLeft + bounds.width + 36;
+        const boxBottom = boxTop + bounds.height + 54;
+        if (
+          clickPoint.x >= boxLeft &&
+          clickPoint.x <= boxRight &&
+          clickPoint.y >= boxTop &&
+          clickPoint.y <= boxBottom
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          startPackageDrag(event, nodePackage, false);
+          return;
+        }
+      }
+      const collapsedCards = getCanvasCollapsedPackageCardsWithMeta();
+      for (const { nodePackage, bounds } of collapsedCards) {
+        const cardW = Math.min(360, Math.max(240, bounds.width));
+        const cardH = Math.max(112, Math.min(150, bounds.height || 132));
+        if (
+          clickPoint.x >= bounds.left &&
+          clickPoint.x <= bounds.left + cardW &&
+          clickPoint.y >= bounds.top &&
+          clickPoint.y <= bounds.top + cardH
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          startPackageDrag(event, nodePackage, true);
+          return;
+        }
+      }
+      const selBounds = getCanvasSelectedNodesBounds();
+      if (selBounds) {
+        const selLeft = selBounds.left - 10;
+        const selTop = selBounds.top - 30;
+        const selRight = selLeft + selBounds.width + 20;
+        const selBottom = selTop + selBounds.height + 40;
+        if (
+          clickPoint.x >= selLeft &&
+          clickPoint.x <= selRight &&
+          clickPoint.y >= selTop &&
+          clickPoint.y <= selBottom
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          startSelectedNodesDrag(event);
+          return;
+        }
+      }
+    }
+
+    if (!shouldStartSelectionDrag(event.target)) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    const point = getCanvasPointFromClient(event.clientX, event.clientY);
+    setSelectionDrag({ start: point, current: point, hasMoved: false });
+    clearCanvasSelection();
+    setPendingLinkPort(null);
+    setPendingLinkPreviewPoint(null);
+    setConnectorDrag(null);
+    setContextMenu(null);
+    setNodeMenu(null);
+    setTextNodeMenu(null);
+    setImageNodeMenu(null);
+    setVideoNodeMenu(null);
+    setCanvasSelectMenu(null);
+    setImageFocusNodeId(null);
+    setImageFocusDraft(null);
+    setImageFocusDrag(null);
+  };
+
+  const handleCanvasAuxClick = (event: MouseEvent<HTMLElement>) => {
+    if (event.button !== 1) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  useCanvasKeyboard({
+    onDelete: () => {
+      if (!selectedNodes.length && !selectedNode && !selectedPackageId) return;
+      pushHistorySnapshot();
+      if (selectedPackageId) {
+        setNodePackages((pkgs) => pkgs.filter((p) => p.id !== selectedPackageId));
+        setSelectedPackageId(null);
+        return;
+      }
+      const toDelete = selectedNode ? [selectedNode] : selectedNodes;
+      const textIds = new Set(toDelete.filter((n) => n.kind === "text").map((n) => n.id));
+      const imageIds = new Set(toDelete.filter((n) => n.kind === "image").map((n) => n.id));
+      const videoIds = new Set(toDelete.filter((n) => n.kind === "video").map((n) => n.id));
+      if (textIds.size) setTextNodes((nodes) => nodes.filter((n) => !textIds.has(n.id)));
+      if (imageIds.size) setImageNodes((nodes) => nodes.filter((n) => !imageIds.has(n.id)));
+      if (videoIds.size) setVideoNodes((nodes) => nodes.filter((n) => !videoIds.has(n.id)));
+      clearCanvasSelection();
+    },
+    onUndo: () => {
+      const snapshot = undo(getHistorySnapshot());
+      if (snapshot) applyHistorySnapshot(snapshot);
+    },
+    onRedo: () => {
+      const snapshot = redo(getHistorySnapshot());
+      if (snapshot) applyHistorySnapshot(snapshot);
+    },
+    onSelectAll: () => {
+      const all: CanvasSelectedNode[] = [
+        ...textNodes.map((n) => ({ kind: "text" as const, id: n.id })),
+        ...imageNodes.map((n) => ({ kind: "image" as const, id: n.id })),
+        ...videoNodes.map((n) => ({ kind: "video" as const, id: n.id })),
+      ];
+      setSelectedNodes(all);
+      setSelectedNode(null);
+    },
+    onCopy: () => {
+      if (!selectedNode) return;
+      if (selectedNode.kind === "text") {
+        const node = textNodes.find((n) => n.id === selectedNode.id);
+        if (node) setCopiedCanvasNode({ kind: "text", node });
+      } else if (selectedNode.kind === "image") {
+        const node = imageNodes.find((n) => n.id === selectedNode.id);
+        if (node) setCopiedCanvasNode({ kind: "image", node });
+      } else if (selectedNode.kind === "video") {
+        const node = videoNodes.find((n) => n.id === selectedNode.id);
+        if (node) setCopiedCanvasNode({ kind: "video", node });
+      }
+    },
+    onPaste: () => {
+      if (!copiedCanvasNode) return;
+      const offset = 40;
+      const pos = { x: copiedCanvasNode.node.position.x + offset, y: copiedCanvasNode.node.position.y + offset };
+      duplicateCopiedCanvasNode(copiedCanvasNode, pos);
+    },
+    onDuplicate: () => {
+      if (!selectedNode) return;
+      const offset = 40;
+      if (selectedNode.kind === "text") {
+        const node = textNodes.find((n) => n.id === selectedNode.id);
+        if (node) duplicateTextNode(node, { x: node.position.x + offset, y: node.position.y + offset });
+      } else if (selectedNode.kind === "image") {
+        const node = imageNodes.find((n) => n.id === selectedNode.id);
+        if (node) duplicateImageNode(node, { x: node.position.x + offset, y: node.position.y + offset });
+      } else if (selectedNode.kind === "video") {
+        const node = videoNodes.find((n) => n.id === selectedNode.id);
+        if (node) duplicateVideoNode(node, { x: node.position.x + offset, y: node.position.y + offset });
+      }
+    },
+    onEscape: () => {
+      clearCanvasSelection();
+      setContextMenu(null);
+      setNodeMenu(null);
+      setTextNodeMenu(null);
+      setImageNodeMenu(null);
+      setVideoNodeMenu(null);
+      setSelectionContextMenu(null);
+      setCanvasSelectMenu(null);
+    },
+    setSpacePanning: setSpacePanning,
+    isInputFocused: () => {
+      const el = document.activeElement;
+      return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+    },
+  });
+
+  const isCanvasNodeMoving = Boolean(
+    textNodeDrag?.hasMoved ||
+      imageNodeDrag?.hasMoved ||
+      videoNodeDrag?.hasMoved ||
+      selectionDrag?.hasMoved ||
+      nodeResizeDrag
+  );
+  const selectionRect = selectionDrag?.hasMoved
+    ? normalizeCanvasSelectionRect(selectionDrag.start, selectionDrag.current)
+    : null;
+  const selectedNodesBounds = getCanvasSelectedNodesBounds();
+  const nodePackageBounds = getCanvasNodePackageBoundsWithMeta();
+  const collapsedPackageCards = getCanvasCollapsedPackageCardsWithMeta();
+  const activePackage = selectedPackageId
+    ? nodePackages.find((nodePackage) => nodePackage.id === selectedPackageId) || null
+    : null;
+  const selectedPackageCount = selectedPackageId ? 1 : getCanvasSelectedPackageCount();
+  const activeProjectNotice = communityPublishState.message ? communityPublishState : projectSaveState;
+
+  return (
+    <WorkspacePageShell title="画布" fullWidth className="canvas-page page-motion">
+      <div className={`studio-tool-layout studio-tool-layout--no-top studio-tool-layout--no-left studio-tool-layout--no-right studio-tool-layout--canvas${shouldShowEmptyProjectState ? " studio-tool-layout--canvas-empty" : ""}`}>
+        <section
+          className={`studio-canvas${pendingLinkPort ? " is-linking" : ""}${shouldShowEmptyProjectState ? " is-empty-projects" : ""}`}
+          ref={canvasRef}
+          onAuxClick={shouldShowEmptyProjectState ? undefined : handleCanvasAuxClick}
+          onContextMenu={shouldShowEmptyProjectState ? (event) => event.preventDefault() : handleCanvasContextMenu}
+          onMouseDownCapture={shouldShowEmptyProjectState ? undefined : handleCanvasMouseDown}
+          onDoubleClick={shouldShowEmptyProjectState ? undefined : handleCanvasDoubleClick}
+          onMouseMove={shouldShowEmptyProjectState ? undefined : handleCanvasMouseMove}
+          onWheel={shouldShowEmptyProjectState ? undefined : handleCanvasWheel}
+          style={{
+            "--canvas-bg-size": `${24 * canvasViewport.zoom}px`,
+            "--canvas-bg-x": `${canvasViewport.x}px`,
+            "--canvas-bg-y": `${canvasViewport.y}px`,
+            cursor: canvasPanDrag ? "grabbing" : spacePanning ? "grab" : undefined,
+          } as CSSProperties}
+        >
+          <input
+            ref={canvasUploadInputRef}
+            type="file"
+            accept="image/*"
+            className="studio-canvas-hidden-input"
+            onChange={(event) => handleImageFileSelected(event, pendingImagePosition)}
+          />
+          <input
+            ref={imageNodeInputRef}
+            type="file"
+            accept="image/*"
+            className="studio-canvas-hidden-input"
+            onChange={(event) => handleImageFileSelected(event, pendingImagePosition)}
+          />
+          {!shouldShowEmptyProjectState ? (
+          <div className="studio-canvas-project-bar" onMouseDown={(event) => event.stopPropagation()}>
+            <div className="studio-canvas-project-bar__identity">
+              {projectNameEditing ? (
+                <form
+                  className="studio-canvas-project-bar__name-form"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    commitProjectNameEditing();
+                  }}
+                >
+                  <input
+                    value={projectNameDraft}
+                    autoFocus
+                    aria-label="编辑项目名称"
+                    onChange={(event) => setProjectNameDraft(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Escape") {
+                        event.preventDefault();
+                        cancelProjectNameEditing();
+                      }
+                    }}
+                  />
+                  <button type="submit" aria-label="确认项目名称">
+                    <CheckOutlined />
+                  </button>
+                  <button type="button" aria-label="取消编辑项目名称" onClick={cancelProjectNameEditing}>
+                    <CloseOutlined />
+                  </button>
+                </form>
+              ) : (
+                <div className="studio-canvas-project-bar__name" title={currentProjectTitle}>
+                  <span>{currentProjectTitle}</span>
+                </div>
+              )}
+              <span className={`studio-canvas-project-bar__status is-${activeProjectNotice.status}`}>
+                {activeProjectNotice.message || (projectId ? "服务器项目" : "未保存项目")}
+              </span>
+            </div>
+            <button
+              type="button"
+              className="studio-canvas-project-bar__rename"
+              aria-label="编辑项目名称"
+              title="编辑项目名称"
+              onClick={startProjectNameEditing}
+            >
+              <EditOutlined />
+            </button>
+            <button
+              type="button"
+              className={`studio-canvas-project-bar__recent${recentProjectsOpen ? " is-active" : ""}`}
+              aria-controls="studio-canvas-recent-drawer"
+              aria-expanded={recentProjectsOpen}
+              onClick={(event) => {
+                event.stopPropagation();
+                setRecentProjectsOpen((current) => !current);
+              }}
+            >
+              <ClockCircleOutlined />
+              <span>最近项目</span>
+              {projects.length ? <em>{projects.length}</em> : null}
+            </button>
+            <button
+              type="button"
+              className="studio-canvas-project-bar__export"
+              aria-label="导出工作流 JSON"
+              title="导出工作流 JSON"
+              onClick={handleExportWorkflowJson}
+            >
+              <DownloadOutlined />
+              <span>导出 JSON</span>
+            </button>
+            <button
+              type="button"
+              className="studio-canvas-project-bar__save"
+              disabled={projectSaveState.status === "saving"}
+              onClick={() => void handleSaveProject()}
+            >
+              <SaveOutlined />
+              {projectSaveState.status === "saving" ? "保存中" : "保存"}
+            </button>
+            <span className={`studio-canvas-project-bar__autosave-status studio-canvas-project-bar__autosave-status--${autoSaveStatus}`}>
+              {autoSaveStatus === "saving" ? "保存中..." : autoSaveStatus === "saved" ? "已保存" : autoSaveStatus === "error" ? "保存失败" : ""}
+            </span>
+            <button
+              type="button"
+              className="studio-canvas-project-bar__publish"
+              disabled={communityPublishState.status === "saving"}
+              onClick={() => void handlePublishWorkflowToCommunity()}
+            >
+              <UploadOutlined />
+              <span>{communityPublishState.status === "saving" ? "提交中" : "提交审核"}</span>
+            </button>
+          </div>
+          ) : null}
+          {!shouldShowEmptyProjectState && recentProjectsOpen ? (
+            <aside
+              id="studio-canvas-recent-drawer"
+              className="studio-canvas-recent-drawer"
+              aria-label="最近项目"
+              onMouseDown={(event) => event.stopPropagation()}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div className="studio-canvas-recent-drawer__list">
+                {projects.length ? (
+                  projects.map((project, index) => (
+                    <button
+                      key={project.id}
+                      type="button"
+                      className="studio-canvas-recent-project"
+                      disabled={!onOpenProject}
+                      onClick={() => {
+                        setRecentProjectsOpen(false);
+                        onOpenProject?.(project);
+                      }}
+                    >
+                      {project.thumbnailUrl ? (
+                        <img src={project.thumbnailUrl} alt="" />
+                      ) : (
+                        <span className="studio-canvas-recent-project__thumb">
+                          <FolderOpenOutlined />
+                        </span>
+                      )}
+                      <span className="studio-canvas-recent-project__body">
+                        <strong>{project.source === "server" ? project.name : `预览项目 ${index + 1}`}</strong>
+                        <small>{project.description || formatCanvasProjectUpdatedAt(project.updatedAt)}</small>
+                        <em>
+                          {project.storyboardCount} 剧本 · {project.imageCount} 图 · {project.videoCount} 视频
+                        </em>
+                      </span>
+                    </button>
+                  ))
+                ) : (
+                  <div className="studio-canvas-recent-drawer__empty">
+                    <FileImageOutlined />
+                    <strong>暂无最近项目</strong>
+                    <span>{isAuthenticated ? "社区最近项目为空" : "登录后可查看最近项目"}</span>
+                  </div>
+                )}
+              </div>
+              <button
+                type="button"
+                className="studio-canvas-recent-drawer__community"
+                onClick={() => {
+                  setRecentProjectsOpen(false);
+                  onOpenCommunity();
+                }}
+              >
+                打开社区
+              </button>
+            </aside>
+          ) : null}
+          <ReactFlow
+            nodes={[]}
+            edges={[]}
+            minZoom={0.3}
+            maxZoom={1.6}
+            panOnDrag={false}
+            panOnScroll={false}
+            zoomOnDoubleClick={false}
+            zoomOnPinch={false}
+            zoomOnScroll={false}
+            proOptions={{ hideAttribution: true }}
+            onPaneClick={shouldShowEmptyProjectState ? undefined : handlePaneClick}
+            onPaneContextMenu={shouldShowEmptyProjectState ? undefined : handlePaneContextMenu}
+          >
+            <Background gap={24} color="transparent" className="studio-canvas__background" />
+          </ReactFlow>
+          <div className="studio-canvas-zoom-controls" onMouseDown={(e) => e.stopPropagation()}>
+            <button type="button" title="缩小" onClick={zoomCanvasOut}>−</button>
+            <button type="button" className="studio-canvas-zoom-controls__pct" title="重置缩放" onClick={resetCanvasZoom}>
+              {Math.round(canvasViewport.zoom * 100)}%
+            </button>
+            <button type="button" title="放大" onClick={zoomCanvasIn}>+</button>
+            <button type="button" title="适应视图" onClick={fitCanvasView}>⊡</button>
+          </div>
+          {shouldShowEmptyProjectState ? (
+            <div
+              className="studio-canvas-empty-projects"
+              role="status"
+              aria-live="polite"
+              onMouseDown={(event) => event.stopPropagation()}
+              onContextMenu={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+            >
+              <strong>没有画布项目，是否需要新建画布？</strong>
+              <button
+                type="button"
+                className="studio-canvas-empty-projects__button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (onStartCreate) {
+                    onStartCreate();
+                    return;
+                  }
+                  onOpenLogin();
+                }}
+              >
+                新建画布
+              </button>
+            </div>
+          ) : null}
+          {selectionRect ? (
+            <div
+              className="studio-canvas-selection-box"
+              style={{
+                left: selectionRect.left,
+                top: selectionRect.top,
+                width: selectionRect.width,
+                height: selectionRect.height,
+              }}
+            />
+          ) : null}
+          {nodePackageBounds.map(({ nodePackage, bounds }) => (
+            <div
+              key={nodePackage.id}
+              className={`studio-canvas-node-package-box${selectedPackageId === nodePackage.id ? " is-selected" : ""}${packageDrag?.packageId === nodePackage.id ? " is-dragging" : ""}`}
+              style={{
+                left: bounds.left - 18,
+                top: bounds.top - 34,
+                width: bounds.width + 36,
+                height: bounds.height + 54,
+              }}
+              onMouseDown={(event) => startPackageDrag(event, nodePackage, false)}
+              onContextMenu={(event) => handleCanvasNodePackagePointer(event, nodePackage)}
+            >
+              <button
+                type="button"
+                className="studio-canvas-node-package-box__label"
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={(event) => handleCanvasNodePackagePointer(event, nodePackage)}
+                onContextMenu={(event) => handleCanvasNodePackagePointer(event, nodePackage)}
+              >
+                <strong>{nodePackage.title}</strong>
+                <em>{nodePackage.nodeIds.length} 个节点</em>
+              </button>
+            </div>
+          ))}
+          {collapsedPackageCards.map(({ nodePackage, bounds }) => (
+            <button
+              key={nodePackage.id}
+              type="button"
+              className={`studio-canvas-node-package-card${packageDrag?.packageId === nodePackage.id ? " is-dragging" : ""}`}
+              style={{
+                left: bounds.left,
+                top: bounds.top,
+                width: Math.min(360, Math.max(240, bounds.width)),
+                height: Math.max(112, Math.min(150, bounds.height || 132)),
+              }}
+              onMouseDown={(event) => startPackageDrag(event, nodePackage, true)}
+              onContextMenu={(event) => handleCanvasNodePackagePointer(event, nodePackage)}
+            >
+              <span className="studio-canvas-node-package-card__label">{nodePackage.title}</span>
+              <span className="studio-canvas-node-package-card__meta">{nodePackage.nodeIds.length} 个节点</span>
+            </button>
+          ))}
+          {selectedNodesBounds ? (
+            <div
+              className="studio-canvas-selection-summary"
+              style={{
+                left: selectedNodesBounds.left - 10,
+                top: selectedNodesBounds.top - 30,
+                width: selectedNodesBounds.width + 20,
+                height: selectedNodesBounds.height + 40,
+              }}
+            >
+              <span className="studio-canvas-selection-summary__label">
+                已选中 {selectedNodes.length} 个节点
+              </span>
+            </div>
+          ) : null}
+          <div
+            className="studio-canvas-world"
+            style={{
+              transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px) scale(${canvasViewport.zoom})`,
+            }}
+          >
+          {alignGuides.length > 0 && (
+            <div className="studio-canvas-align-guides" aria-hidden="true">
+              {alignGuides.map((guide, i) => (
+                <div
+                  key={`${guide.axis}-${guide.position}-${i}`}
+                  className={`studio-canvas-align-guide studio-canvas-align-guide--${guide.axis}`}
+                  style={guide.axis === "x" ? { left: guide.position } : { top: guide.position }}
+                />
+              ))}
+            </div>
+          )}
+          {nodeLinks.length || pendingLinkPreview ? (
+            <svg className="studio-canvas-node-links" aria-hidden="true">
+              {nodeLinks.map((link) => {
+                const controlOffset = Math.max(120, Math.abs(link.targetX - link.sourceX) * 0.42);
+                const sourceControlX =
+                  link.sourceX + getCanvasNodeSideDirection(link.sourceSide) * controlOffset;
+                const targetControlX =
+                  link.targetX + getCanvasNodeSideDirection(link.targetSide) * controlOffset;
+                return (
+                  <g key={link.id}>
+                    <path
+                      className="studio-canvas-node-link-hit"
+                      d={`M ${link.sourceX} ${link.sourceY} C ${sourceControlX} ${link.sourceY}, ${targetControlX} ${link.targetY}, ${link.targetX} ${link.targetY}`}
+                      onContextMenu={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        removeCanvasLink(link.id);
+                      }}
+                    />
+                    <circle cx={link.sourceX} cy={link.sourceY} r="8" />
+                    <circle cx={link.targetX} cy={link.targetY} r="8" />
+                  </g>
+                );
+              })}
+              {pendingLinkPreview ? (
+                <g className="studio-canvas-node-link-preview">
+                  {(() => {
+                    const controlOffset = Math.max(
+                      120,
+                      Math.abs(pendingLinkPreview.targetX - pendingLinkPreview.sourceX) * 0.42
+                    );
+                    const sourceDirection = getCanvasNodeSideDirection(pendingLinkPreview.sourceSide);
+                    const sourceControlX = pendingLinkPreview.sourceX + sourceDirection * controlOffset;
+                    const targetControlX = pendingLinkPreview.targetX - sourceDirection * controlOffset;
+                    return (
+                      <>
+                        <path
+                          d={`M ${pendingLinkPreview.sourceX} ${pendingLinkPreview.sourceY} C ${sourceControlX} ${pendingLinkPreview.sourceY}, ${targetControlX} ${pendingLinkPreview.targetY}, ${pendingLinkPreview.targetX} ${pendingLinkPreview.targetY}`}
+                        />
+                        <circle cx={pendingLinkPreview.sourceX} cy={pendingLinkPreview.sourceY} r="8" />
+                        <circle cx={pendingLinkPreview.targetX} cy={pendingLinkPreview.targetY} r="6" />
+                      </>
+                    );
+                  })()}
+                </g>
+              ) : null}
+            </svg>
+          ) : null}
+          {textNodes.filter((textNode) => !isNodeCollapsedInPackage("text", textNode.id)).map((textNode) => {
+            const textNodeSelected = isSelectedNode("text", textNode.id);
+            const textNodeActive = isActiveSelectedNode("text", textNode.id);
+            const textNodeResizing = nodeResizeDrag?.kind === "text" && nodeResizeDrag.nodeId === textNode.id;
+            const textTaskState = textGenerationState[textNode.id];
+            const textNodeGenerating = textTaskState?.status === "running";
+            const textNodeCanGenerate = Boolean(getEffectiveNodePrompt("text", textNode.id, textNode.prompt));
+            const textNodeDisplayContent =
+              textNode.content ||
+              (textTaskState?.status === "running"
+                ? "AI 正在写入文本..."
+                : textTaskState?.status === "error"
+                  ? textTaskState.message
+                  : "");
+            return (
+            <div
+              className={`studio-canvas-text-node${textNodeDrag?.nodeId === textNode.id ? " is-dragging" : ""}${textNodeSelected ? " is-selected" : ""}${textNodeResizing ? " is-resizing" : ""}`}
+              key={textNode.id}
+              style={{
+                "--text-node-x": `${textNode.position.x}px`,
+                "--text-node-y": `${textNode.position.y}px`,
+                "--canvas-node-width": `${textNode.size.width}px`,
+                "--canvas-node-height": `${textNode.size.height}px`,
+              } as CSSProperties}
+            >
+              <div className="studio-canvas-text-node__scaled">
+                <div className="studio-canvas-text-node__title">
+                  <FileTextOutlined />
+                  <span>{textNode.title}</span>
+                </div>
+                <div
+                  className="studio-canvas-text-node__card"
+                  onContextMenu={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const pkg = findNodePackage("text", textNode.id);
+                    if (pkg) {
+                      openCanvasNodePackageContextMenu(pkg, event.clientX, event.clientY);
+                      return;
+                    }
+                    if (isMultiSelectedNode("text", textNode.id)) {
+                      openCanvasSelectionContextMenu(event.clientX, event.clientY);
+                      return;
+                    }
+                    selectCanvasNode("text", textNode.id);
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setSelectionContextMenu(null);
+                    setTextNodeMenu({ left: event.clientX, top: event.clientY, nodeId: textNode.id });
+                    setImageNodeMenu(null);
+                    setVideoNodeMenu(null);
+                  }}
+                  onMouseDown={(event) => {
+                    if (event.button !== 0) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!textNodeSelected) clearCanvasSelection();
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setTextNodeMenu(null);
+                    setImageNodeMenu(null);
+                    setVideoNodeMenu(null);
+                    setCanvasSelectMenu(null);
+                    setTextNodeDrag({
+                      nodeId: textNode.id,
+                      startX: event.clientX,
+                      startY: event.clientY,
+                      originX: textNode.position.x,
+                      originY: textNode.position.y,
+                      hasMoved: false,
+                    });
+                  }}
+                >
+                  {textNode.isEditingContent ? (
+                    <textarea
+                      className="studio-canvas-text-node__inline-input"
+                      value={textNode.content}
+                      autoFocus
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => event.stopPropagation()}
+                      onChange={(event) => updateTextNodeContent(textNode.id, event.target.value)}
+                      onBlur={() => finishTextNodeContentEditing(textNode.id)}
+                      placeholder="请编写您的内容"
+                    />
+                  ) : textNodeDisplayContent ? (
+                    <button
+                      type="button"
+                      className="studio-canvas-text-node__content"
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        selectCanvasNode("text", textNode.id);
+                        setTextNodeContentEditing(textNode.id, true);
+                      }}
+                    >
+                      {textNodeDisplayContent}
+                    </button>
+                  ) : (
+                    <>
+                      <div className="studio-canvas-text-node__glyph" aria-hidden="true">
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                      </div>
+                      <div className="studio-canvas-text-node__suggestions">
+                        <span>尝试:</span>
+                        <button
+                          type="button"
+                          onMouseDown={(event) => event.stopPropagation()}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setTextNodeContentEditing(textNode.id, true);
+                          }}
+                        >
+                          <FileTextOutlined /> 请编写您的内容
+                        </button>
+                        <button
+                          type="button"
+                          onMouseDown={(event) => event.stopPropagation()}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            addVideoNodeFromText(textNode);
+                          }}
+                        >
+                          <VideoCameraOutlined /> 文生视频
+                        </button>
+                        <button
+                          type="button"
+                          onMouseDown={(event) => event.stopPropagation()}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            reversePromptFromLinkedNode(textNode);
+                          }}
+                        >
+                          <FileImageOutlined /> 根据图片反推提示词
+                        </button>
+                      </div>
+                    </>
+                  )}
+                  {renderConnectorButton({ kind: "text", nodeId: textNode.id, side: "left", slot: "center" }, "studio-canvas-text-node__connector")}
+                  {renderConnectorButton({ kind: "text", nodeId: textNode.id, side: "right", slot: "center" }, "studio-canvas-text-node__connector")}
+                  <button
+                    type="button"
+                    className="studio-canvas-node-resize-handle"
+                    aria-label="Resize text node"
+                    onMouseDown={(event) => handleNodeResizeStart(event, "text", textNode.id, textNode.size)}
+                  />
+                </div>
+                {textNodeActive && !isCanvasNodeMoving ? (() => {
+                  const mentionOptions = buildNodeMentionOptions("text", textNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
+                  const mentionState = textNodeMentionStates[textNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
+                  const filteredMentions = mentionState.open
+                    ? mentionOptions.filter((o) => !mentionState.query || o.searchText.includes(mentionState.query.toLowerCase()))
+                    : [];
+
+                  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                    const value = e.target.value;
+                    const caret = e.target.selectionStart || 0;
+                    updateTextNodePrompt(textNode.id, value);
+
+                    // Detect @-mention trigger
+                    const beforeCaret = value.slice(0, caret);
+                    const atIdx = beforeCaret.lastIndexOf("@");
+                    if (atIdx >= 0) {
+                      const query = beforeCaret.slice(atIdx + 1);
+                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
+                        setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
+                        return;
+                      }
+                    }
+                    closeTextNodeMention(textNode.id);
+                  };
+
+                  const handlePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+                    if (!mentionState.open || filteredMentions.length === 0) return;
+                    if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex + 1) % filteredMentions.length } }));
+                    } else if (e.key === "ArrowUp") {
+                      e.preventDefault();
+                      setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex - 1 + filteredMentions.length) % filteredMentions.length } }));
+                    } else if (e.key === "Enter" || e.key === "Tab") {
+                      e.preventDefault();
+                      const opt = filteredMentions[mentionState.activeIndex];
+                      if (opt) {
+                        const ta = e.currentTarget;
+                        insertTextNodeMention(textNode.id, opt, ta);
+                      }
+                    } else if (e.key === "Escape") {
+                      e.preventDefault();
+                      closeTextNodeMention(textNode.id);
+                    }
+                  };
+
+                  const handlePromptSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+                    const ta = e.currentTarget;
+                    const caret = ta.selectionStart || 0;
+                    setTextNodeMentionStates((prev) => {
+                      const cur = prev[textNode.id];
+                      if (!cur?.open) return prev;
+                      return { ...prev, [textNode.id]: { ...cur, caret } };
+                    });
+                  };
+
+                  return (
+                  <div className="studio-canvas-text-composer">
+                    <div className="studio-canvas-text-composer__input-wrap">
+                    <textarea
+                      value={textNode.prompt}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onChange={handlePromptChange}
+                      onKeyDown={handlePromptKeyDown}
+                      onSelect={handlePromptSelect}
+                      placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
+                    />
+                    {mentionState.open ? (
+                      <div className="studio-canvas-mention-panel">
+                        {filteredMentions.length > 0 ? filteredMentions.map((opt, idx) => (
+                          <button
+                            key={opt.token}
+                            type="button"
+                            className={`studio-canvas-mention-item${idx === mentionState.activeIndex ? " is-active" : ""}`}
+                            onMouseDown={(e) => { e.preventDefault(); const ta = e.currentTarget.closest(".studio-canvas-text-composer")?.querySelector("textarea") || null; insertTextNodeMention(textNode.id, opt, ta as HTMLTextAreaElement | null); }}
+                          >
+                            <span className="studio-canvas-mention-thumb">
+                              {opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
+                            </span>
+                            <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
+                            <span className="studio-canvas-mention-token">{opt.token}</span>
+                          </button>
+                        )) : (
+                          <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
+                            <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
+                          </div>
+                        )}
+                      </div>
+                    ) : null}
+                    </div>
+                  <div className="studio-canvas-text-composer__footer">
+                    <button
+                      type="button"
+                      className={`studio-canvas-text-composer__send studio-canvas-generate-button${textNodeCanGenerate && !textNodeGenerating ? " is-ready" : ""}`}
+                      title={textNodeGenerating ? "生成中" : "生成"}
+                      disabled={textNodeGenerating || !textNodeCanGenerate}
+                      aria-busy={textNodeGenerating}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if (!textNodeGenerating && textNodeCanGenerate) {
+                          void handleGenerateTextNode(textNode.id);
+                        }
+                      }}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      }}
+                    >
+                      <SendOutlined />
+                    </button>
+                  </div>
+                </div>
+                );
+              })() : null}
+              </div>
+            </div>
+            );
+          })}
+          {imageNodes.filter((imageNode) => !isNodeCollapsedInPackage("image", imageNode.id)).map((imageNode) => {
+            const imageNodeSelected = isSelectedNode("image", imageNode.id);
+            const imageNodeActive = isActiveSelectedNode("image", imageNode.id);
+            const imageNodeResizing = nodeResizeDrag?.kind === "image" && nodeResizeDrag.nodeId === imageNode.id;
+            const imageTaskState = imageGenerationState[imageNode.id];
+            const imageNodeGenerating =
+              imageTaskState?.status === "submitting" || imageTaskState?.status === "running";
+            const imageNodeProgress = normalizeCanvasGenerationProgress(imageTaskState);
+            const imageNodeProgressVisible =
+              imageNodeGenerating || (imageTaskState?.status === "success" && !imageNode.imageUrl);
+            const imageNodeCanGenerate = Boolean(
+              getEffectiveNodePrompt("image", imageNode.id, imageNode.prompt) ||
+                getConnectedImageReferenceItems("image", imageNode.id, imageNode).length
+            );
+            const imageNodeFocusActive = imageFocusNodeId === imageNode.id;
+            const imageFocusToolActive = Boolean(imageFocusNodeId);
+            const imageNodeLoadFailed = Boolean(
+              imageNode.imageUrl && imageLoadErrors[imageNode.id] === imageNode.imageUrl
+            );
+            const imageFocusSelection = imageNodeFocusActive ? imageFocusDraft ?? imageNode.focusSelection ?? null : null;
+            const imageFocusSelectionReady = Boolean(
+              imageFocusSelection && imageFocusSelection.width >= 2 && imageFocusSelection.height >= 2
+            );
+            const imageFocusSelectionStyle = imageFocusSelection
+              ? {
+                  "--focus-x": `${imageFocusSelection.x}%`,
+                  "--focus-y": `${imageFocusSelection.y}%`,
+                  "--focus-w": `${imageFocusSelection.width}%`,
+                  "--focus-h": `${imageFocusSelection.height}%`,
+                } as CSSProperties
+              : undefined;
+            return (
+            <div
+              className={`studio-canvas-image-node${imageNodeDrag?.nodeId === imageNode.id ? " is-dragging" : ""}${imageNodeSelected ? " is-selected" : ""}${imageNodeResizing ? " is-resizing" : ""}${imageFocusToolActive ? " is-focus-tool-active" : ""}${imageNodeFocusActive ? " is-focus-selecting" : ""}`}
+              key={imageNode.id}
+              style={{
+                "--image-node-x": `${imageNode.position.x}px`,
+                "--image-node-y": `${imageNode.position.y}px`,
+                "--canvas-node-width": `${imageNode.size.width}px`,
+                "--canvas-node-height": `${imageNode.size.height}px`,
+              } as CSSProperties}
+            >
+              <div className="studio-canvas-image-node__scaled">
+                {imageNodeSelected && imageNode.imageUrl && (
+                  <CanvasNodeToolbar
+                    actions={[
+                      { key: "regenerate", label: "重绘", icon: <ReloadOutlined />, loading: imageNodeGenerating },
+                      { key: "upscale", label: "超分", icon: <ThunderboltOutlined />, disabled: imageNodeGenerating },
+                      { key: "save", label: "保存", icon: <SaveOutlined />, disabled: imageNodeGenerating },
+                    ]}
+                    onAction={(key) => {
+                      if (key === "regenerate") void handleGenerateImageNode(imageNode.id);
+                      if (key === "save") {
+                        setSaveAssetSource({
+                          kind: "image",
+                          name: imageNode.fileName || imageNode.title,
+                          description: imageNode.prompt || "从画布图片节点保存的素材。",
+                          imageUrl: imageNode.imageUrl,
+                        });
+                        setAssetName(imageNode.fileName || imageNode.title);
+                        setAssetCoverUrl(imageNode.imageUrl || "");
+                        setAssetSaveMode("existing");
+                        setSelectedExistingCategory("");
+                        setSaveAssetOpen(true);
+                      }
+                      if (key === "upscale") void handleGenerateImageNode(imageNode.id);
+                    }}
+                    moreActions={[
+                      { key: "copy", label: "复制链接", icon: <CopyOutlined />, disabled: !imageNode.imageUrl },
+                      { key: "download", label: "下载", icon: <DownloadOutlined />, disabled: !imageNode.imageUrl },
+                      { key: "duplicate", label: "创建副本", icon: <PictureOutlined /> },
+                      { key: "delete", label: "删除", icon: <DeleteOutlined /> },
+                    ]}
+                    onMoreAction={(key) => {
+                      if (key === "copy" && imageNode.imageUrl) void navigator.clipboard.writeText(imageNode.imageUrl);
+                      if (key === "download" && imageNode.imageUrl) {
+                        const a = document.createElement("a");
+                        a.href = imageNode.imageUrl;
+                        a.download = imageNode.fileName || `${imageNode.title}.png`;
+                        a.target = "_blank";
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                      }
+                      if (key === "duplicate") duplicateImageNode(imageNode);
+                      if (key === "delete") setImageNodes((currentNodes) => currentNodes.filter((n) => n.id !== imageNode.id));
+                    }}
+                  />
+                )}
+                <div className="studio-canvas-image-node__title">
+                  <FileImageOutlined />
+                  <span>{imageNode.title}</span>
+                </div>
+                <button
+                  type="button"
+                  className="studio-canvas-image-node__upload"
+                  onMouseDown={(event) => event.stopPropagation()}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    selectCanvasNode("image", imageNode.id);
+                    setPendingImageNodeId(imageNode.id);
+                    setPendingImagePosition(imageNode.position);
+                    imageNodeInputRef.current?.click();
+                  }}
+                >
+                  <UploadOutlined /> 上传
+                </button>
+                <div
+                  className="studio-canvas-image-node__card"
+                  onContextMenu={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const pkg = findNodePackage("image", imageNode.id);
+                    if (pkg) {
+                      openCanvasNodePackageContextMenu(pkg, event.clientX, event.clientY);
+                      return;
+                    }
+                    if (isMultiSelectedNode("image", imageNode.id)) {
+                      openCanvasSelectionContextMenu(event.clientX, event.clientY);
+                      return;
+                    }
+                    selectCanvasNode("image", imageNode.id);
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setSelectionContextMenu(null);
+                    setTextNodeMenu(null);
+                    setVideoNodeMenu(null);
+                    setImageNodeMenu({ left: event.clientX, top: event.clientY, nodeId: imageNode.id });
+                  }}
+                  onMouseDown={(event) => {
+                    if (event.button !== 0) return;
+                    if (imageFocusNodeId) {
+                      handleImageFocusDragStart(event, imageNode.id);
+                      return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!imageNodeSelected) clearCanvasSelection();
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setTextNodeMenu(null);
+                    setImageNodeMenu(null);
+                    setVideoNodeMenu(null);
+                    setCanvasSelectMenu(null);
+                    setImageNodeDrag({
+                      nodeId: imageNode.id,
+                      startX: event.clientX,
+                      startY: event.clientY,
+                      originX: imageNode.position.x,
+                      originY: imageNode.position.y,
+                      hasMoved: false,
+                    });
+                  }}
+                >
+                  {imageNode.imageUrl && !imageNodeLoadFailed ? (
+                    <img
+                      src={imageNode.imageUrl}
+                      alt={imageNode.fileName || imageNode.title}
+                      onLoad={(e) => {
+                        setImageLoadErrors((current) => {
+                          if (current[imageNode.id] !== imageNode.imageUrl) return current;
+                          const next = { ...current };
+                          delete next[imageNode.id];
+                          return next;
+                        });
+                        const img = e.currentTarget;
+                        const nw = img.naturalWidth;
+                        const nh = img.naturalHeight;
+                        if (nw > 0 && nh > 0) {
+                          const titleHeight = 36;
+                          const nodeWidth = imageNode.size.width;
+                          const newHeight = Math.round((nodeWidth * nh) / nw) + titleHeight;
+                          const clamped = clampCanvasNodeSize("image", nodeWidth, newHeight);
+                          if (clamped.height !== imageNode.size.height) {
+                            setImageNodes((cur) => cur.map((n) =>
+                              n.id === imageNode.id ? { ...n, size: clamped } : n
+                            ));
+                          }
+                        }
+                      }}
+                      onError={() => {
+                        setImageLoadErrors((current) => ({ ...current, [imageNode.id]: imageNode.imageUrl }));
+                      }}
+                    />
+                  ) : (
+                    <div
+                      className={`studio-canvas-image-node__placeholder${imageNodeLoadFailed ? " is-error" : ""}`}
+                      role={imageNodeLoadFailed ? "status" : undefined}
+                      aria-hidden={imageNodeLoadFailed ? undefined : true}
+                    >
+                      <FileImageOutlined className="studio-canvas-image-node__placeholder-icon" />
+                      {imageNodeLoadFailed ? (
+                        <div className="studio-canvas-image-node__placeholder-copy">
+                          <strong>图片链接已失效</strong>
+                          <small>原始临时地址已过期，请重新上传或重新生成。</small>
+                        </div>
+                      ) : null}
+                    </div>
+                  )}
+                  {imageNodeProgressVisible ? (
+                    <CanvasSmoothedProgressRing
+                      progress={imageNodeProgress}
+                      status={imageTaskState?.status || "running"}
+                      message={imageTaskState?.message || "图片生成中"}
+                    />
+                  ) : null}
+                  {imageNodeFocusActive && imageFocusSelectionReady ? (
+                    <div
+                      className={`studio-canvas-image-focus-layer${imageFocusDrag?.nodeId === imageNode.id ? " is-dragging" : ""}`}
+                      style={imageFocusSelectionStyle}
+                      onMouseDown={(event) => handleImageFocusDragStart(event, imageNode.id)}
+                    >
+                      <span className="studio-canvas-image-focus-layer__shade is-top" />
+                      <span className="studio-canvas-image-focus-layer__shade is-bottom" />
+                      <span className="studio-canvas-image-focus-layer__shade is-left" />
+                      <span className="studio-canvas-image-focus-layer__shade is-right" />
+                      <div className="studio-canvas-image-focus-layer__box" aria-hidden="true">
+                        {["nw", "n", "ne", "e", "se", "s", "sw", "w"].map((handle) => (
+                          <span key={handle} className={`studio-canvas-image-focus-layer__handle is-${handle}`} />
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+                  {renderConnectorButton({ kind: "image", nodeId: imageNode.id, side: "left", slot: "center" }, "studio-canvas-image-node__connector")}
+                  {renderConnectorButton({ kind: "image", nodeId: imageNode.id, side: "right", slot: "center" }, "studio-canvas-image-node__connector")}
+                  <button
+                    type="button"
+                    className="studio-canvas-node-resize-handle"
+                    aria-label="Resize image node"
+                    onMouseDown={(event) => handleNodeResizeStart(event, "image", imageNode.id, imageNode.size)}
+                  />
+                </div>
+                {imageNodeFocusActive && imageFocusSelectionReady ? (
+                  <div
+                    className="studio-canvas-image-focus-toolbar"
+                    onMouseDown={(event) => event.stopPropagation()}
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <div className="studio-canvas-image-focus-toolbar__ratios">
+                      {imageFocusRatioOptions.map((option) => (
+                        <button
+                          key={option.value}
+                          type="button"
+                          className={imageFocusSelection?.ratio === option.value ? "is-active" : ""}
+                          onClick={() => handleImageFocusRatioChange(option.value)}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                    <button type="button" className="studio-canvas-image-focus-toolbar__cancel" onClick={cancelImageFocusMode}>
+                      取消
+                    </button>
+                    <button type="button" className="studio-canvas-image-focus-toolbar__confirm" onClick={confirmImageFocusMode}>
+                      确认
+                    </button>
+                  </div>
+                ) : null}
+                {imageNodeActive && !isCanvasNodeMoving && !imageNodeFocusActive ? (() => {
+                  const imgMentionOptions = buildNodeMentionOptions("image", imageNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
+                  const imgMentionState = textNodeMentionStates[imageNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
+                  const imgFilteredMentions = imgMentionState.open
+                    ? imgMentionOptions.filter((o) => !imgMentionState.query || o.searchText.includes(imgMentionState.query.toLowerCase()))
+                    : [];
+
+                  const handleImagePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                    const value = e.target.value;
+                    const caret = e.target.selectionStart || 0;
+                    updateImageNodePrompt(imageNode.id, value);
+                    const beforeCaret = value.slice(0, caret);
+                    const atIdx = beforeCaret.lastIndexOf("@");
+                    if (atIdx >= 0) {
+                      const query = beforeCaret.slice(atIdx + 1);
+                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
+                        setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
+                        return;
+                      }
+                    }
+                    closeTextNodeMention(imageNode.id);
+                  };
+
+                  const handleImagePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+                    if (!imgMentionState.open || imgFilteredMentions.length === 0) return;
+                    if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex + 1) % imgFilteredMentions.length } })); }
+                    else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex - 1 + imgFilteredMentions.length) % imgFilteredMentions.length } })); }
+                    else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = imgFilteredMentions[imgMentionState.activeIndex]; if (opt) insertTextNodeMention(imageNode.id, opt, e.currentTarget, "image"); }
+                    else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(imageNode.id); }
+                  };
+
+                  return (
+                <div className="studio-canvas-image-composer">
+                  <div className="studio-canvas-image-composer__tools">
+                    <button
+                      type="button"
+                      className={`studio-canvas-image-composer__style-button${imageNode.styleReference ? " has-style" : ""}`}
+                      title={imageNode.styleReference ? `已选风格：${imageNode.styleReference.title}` : "选择社区风格"}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        openImageStylePicker(imageNode.id);
+                      }}
+                    >
+                      {imageNode.styleReference ? (
+                        <span className="studio-canvas-image-composer__style-thumb">
+                          <img src={imageNode.styleReference.imageUrl} alt={imageNode.styleReference.title} />
+                        </span>
+                      ) : (
+                        <BgColorsOutlined />
+                      )}
+                      <span className="studio-canvas-image-composer__style-label">
+                        {imageNode.styleReference?.title || "风格"}
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      className={imageNode.marking ? "is-active" : ""}
+                      title={imageNode.marking ? `标记: ${imageNode.marking}` : "添加标记描述"}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setMarkingPopoverNodeId(markingPopoverNodeId === imageNode.id ? null : imageNode.id);
+                        setCameraMotionDropdownNodeId(null);
+                      }}
+                    >
+                      <FileImageOutlined /><span>标记</span>
+                    </button>
+                    {markingPopoverNodeId === imageNode.id && (
+                      <div
+                        className="studio-canvas-marking-popover"
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <textarea
+                          className="studio-canvas-marking-input"
+                          placeholder="描述标记内容，如：主角站在桥上，远处是城市天际线"
+                          value={imageNode.marking || ""}
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            setImageNodes((nodes) =>
+                              nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: val } : n)),
+                            );
+                          }}
+                        />
+                        <div className="studio-canvas-marking-actions">
+                          {imageNode.marking && (
+                            <button
+                              type="button"
+                              className="studio-canvas-marking-clear"
+                              onClick={() => {
+                                setImageNodes((nodes) =>
+                                  nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: "" } : n)),
+                                );
+                              }}
+                            >
+                              清除
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            className="studio-canvas-marking-done"
+                            onClick={() => setMarkingPopoverNodeId(null)}
+                          >
+                            完成
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                    <button
+                      type="button"
+                      className={imageNodeFocusActive ? "is-active" : ""}
+                      title="框选聚焦区域"
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        openImageFocusMode(imageNode);
+                      }}
+                    >
+                      <BarsOutlined /><span>聚焦</span>
+                    </button>
+                    <button type="button" className="studio-canvas-image-composer__expand" aria-label="展开">↗</button>
+                  </div>
+                  <div className="studio-canvas-text-composer__input-wrap">
+                  <textarea
+                    value={imageNode.prompt}
+                    onMouseDown={(event) => event.stopPropagation()}
+                    onChange={handleImagePromptChange}
+                    onKeyDown={handleImagePromptKeyDown}
+                    placeholder="描述你想要生成的画面内容，按/呼出指令，@引用素材"
+                  />
+                  {imgMentionState.open && (
+                    <div className="studio-canvas-mention-panel">
+                      {imgFilteredMentions.length > 0 ? imgFilteredMentions.map((opt, idx) => (
+                        <button key={opt.token} type="button" className={`studio-canvas-mention-item${idx === imgMentionState.activeIndex ? " is-active" : ""}`} onMouseDown={(e) => { e.preventDefault(); insertTextNodeMention(imageNode.id, opt, e.currentTarget.closest(".studio-canvas-image-composer")?.querySelector("textarea") || null, "image"); }}>
+                          <span className="studio-canvas-mention-thumb">{opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}</span>
+                          <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
+                          <span className="studio-canvas-mention-token">{opt.token}</span>
+                        </button>
+                      )) : (
+                        <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}><span className="studio-canvas-mention-label">没有可引用的连接节点</span></div>
+                      )}
+                    </div>
+                  )}
+                  </div>
+                  <div className="studio-canvas-image-composer__footer">
+                    <CanvasSelectChip
+                      ariaLabel="选择生图模型"
+                      className="canvas-select-chip--model studio-canvas-composer-chip"
+                      value={resolveVisibleImageModel(imageNode.model || defaultImageModel)}
+                      options={visibleImageModelOptions}
+                      open={canvasSelectMenu === `${imageNode.id}:image-model`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${imageNode.id}:image-model` ? null : `${imageNode.id}:image-model`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateImageNodeSetting(imageNode.id, { model: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <CanvasSelectChip
+                      ariaLabel="选择图片比例"
+                      className="studio-canvas-composer-chip studio-canvas-composer-chip--compact"
+                      value={imageNode.aspectRatio || "16:9"}
+                      options={imageRatioOptions}
+                      open={canvasSelectMenu === `${imageNode.id}:image-ratio`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${imageNode.id}:image-ratio` ? null : `${imageNode.id}:image-ratio`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateImageNodeSetting(imageNode.id, { aspectRatio: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <CanvasSelectChip
+                      ariaLabel="选择图片清晰度"
+                      className="studio-canvas-composer-chip studio-canvas-composer-chip--mini"
+                      value={resolveImageQuality(resolveVisibleImageModel(imageNode.model || defaultImageModel), imageNode.imageSize || "")}
+                      options={getImageQualityOptions(resolveVisibleImageModel(imageNode.model || defaultImageModel))}
+                      open={canvasSelectMenu === `${imageNode.id}:image-size`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${imageNode.id}:image-size` ? null : `${imageNode.id}:image-size`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateImageNodeSetting(imageNode.id, { imageSize: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <button
+                      type="button"
+                      className={`studio-canvas-text-composer__send studio-canvas-generate-button${imageNodeCanGenerate && !imageNodeGenerating ? " is-ready" : ""}`}
+                      title={imageNodeGenerating ? "生成中" : "生成"}
+                      disabled={imageNodeGenerating || !imageNodeCanGenerate}
+                      aria-busy={imageNodeGenerating}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (!imageNodeGenerating && imageNodeCanGenerate) {
+                          void handleGenerateImageNode(imageNode.id);
+                        }
+                      }}
+                    >
+                      <SendOutlined />
+                    </button>
+                  </div>
+                </div>
+                ); })() : null}
+              </div>
+            </div>
+            );
+          })}
+          {videoNodes.filter((videoNode) => !isNodeCollapsedInPackage("video", videoNode.id)).map((videoNode) => {
+            const videoNodeSelected = isSelectedNode("video", videoNode.id);
+            const videoNodeActive = isActiveSelectedNode("video", videoNode.id);
+            const videoNodeResizing = nodeResizeDrag?.kind === "video" && nodeResizeDrag.nodeId === videoNode.id;
+            const videoTaskState = videoGenerationState[videoNode.id];
+            const videoNodeGenerating =
+              videoTaskState?.status === "submitting" || videoTaskState?.status === "running";
+            const videoNodeProgress = normalizeCanvasGenerationProgress(videoTaskState);
+            const videoNodeProgressVisible =
+              videoNodeGenerating || (videoTaskState?.status === "success" && !videoNode.videoUrl);
+            const videoNodeCanGenerate = Boolean(
+              getEffectiveNodePrompt("video", videoNode.id, videoNode.prompt) ||
+                getConnectedImageReferenceItems("video", videoNode.id).length
+            );
+            return (
+            <div
+              className={`studio-canvas-video-node${videoNodeDrag?.nodeId === videoNode.id ? " is-dragging" : ""}${videoNodeSelected ? " is-selected" : ""}${videoNodeResizing ? " is-resizing" : ""}`}
+              key={videoNode.id}
+              style={{
+                "--video-node-x": `${videoNode.position.x}px`,
+                "--video-node-y": `${videoNode.position.y}px`,
+                "--canvas-node-width": `${videoNode.size.width}px`,
+                "--canvas-node-height": `${videoNode.size.height}px`,
+              } as CSSProperties}
+            >
+              <div className="studio-canvas-video-node__scaled">
+                {videoNodeSelected && videoNode.videoUrl && (
+                  <CanvasNodeToolbar
+                    actions={[
+                      { key: "regenerate", label: "重新生成", icon: <ReloadOutlined />, loading: videoNodeGenerating },
+                      { key: "save", label: "保存", icon: <SaveOutlined />, disabled: videoNodeGenerating },
+                    ]}
+                    onAction={(key) => {
+                      if (key === "regenerate") void handleGenerateVideoNode(videoNode.id);
+                      if (key === "save") {
+                        setSaveAssetSource({
+                          kind: "video",
+                          name: videoNode.title,
+                          description: videoNode.prompt || "从画布视频节点保存的素材。",
+                          url: videoNode.videoUrl,
+                        });
+                        setAssetName(videoNode.title);
+                        setAssetCoverUrl("");
+                        setAssetSaveMode("existing");
+                        setSelectedExistingCategory("");
+                        setSaveAssetOpen(true);
+                      }
+                    }}
+                    moreActions={[
+                      { key: "copy", label: "复制链接", icon: <CopyOutlined />, disabled: !videoNode.videoUrl },
+                      { key: "download", label: "下载", icon: <DownloadOutlined />, disabled: !videoNode.videoUrl },
+                      { key: "duplicate", label: "创建副本", icon: <PictureOutlined /> },
+                      { key: "delete", label: "删除", icon: <DeleteOutlined /> },
+                    ]}
+                    onMoreAction={(key) => {
+                      if (key === "copy" && videoNode.videoUrl) void navigator.clipboard.writeText(videoNode.videoUrl);
+                      if (key === "download" && videoNode.videoUrl) {
+                        const a = document.createElement("a");
+                        a.href = videoNode.videoUrl;
+                        a.download = `${videoNode.title}.mp4`;
+                        a.target = "_blank";
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                      }
+                      if (key === "duplicate") duplicateVideoNode(videoNode);
+                      if (key === "delete") setVideoNodes((currentNodes) => currentNodes.filter((n) => n.id !== videoNode.id));
+                    }}
+                  />
+                )}
+                <div className="studio-canvas-video-node__title">
+                  <VideoCameraOutlined />
+                  <span>{videoNode.title}</span>
+                </div>
+                <div
+                  className="studio-canvas-video-node__preview"
+                  onContextMenu={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const pkg = findNodePackage("video", videoNode.id);
+                    if (pkg) {
+                      openCanvasNodePackageContextMenu(pkg, event.clientX, event.clientY);
+                      return;
+                    }
+                    if (isMultiSelectedNode("video", videoNode.id)) {
+                      openCanvasSelectionContextMenu(event.clientX, event.clientY);
+                      return;
+                    }
+                    selectCanvasNode("video", videoNode.id);
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setSelectionContextMenu(null);
+                    setTextNodeMenu(null);
+                    setImageNodeMenu(null);
+                    setVideoNodeMenu({ left: event.clientX, top: event.clientY, nodeId: videoNode.id });
+                  }}
+                  onMouseDown={(event) => {
+                    if (event.button !== 0) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!videoNodeSelected) clearCanvasSelection();
+                    setContextMenu(null);
+                    setNodeMenu(null);
+                    setTextNodeMenu(null);
+                    setImageNodeMenu(null);
+                    setVideoNodeMenu(null);
+                    setCanvasSelectMenu(null);
+                    setVideoNodeDrag({
+                      nodeId: videoNode.id,
+                      startX: event.clientX,
+                      startY: event.clientY,
+                      originX: videoNode.position.x,
+                      originY: videoNode.position.y,
+                      hasMoved: false,
+                    });
+                  }}
+                >
+                  {videoNode.videoUrl ? (
+                    <CanvasNodeVideoPlayer src={videoNode.videoUrl} title={videoNode.title} onVideoMeta={(vw, vh) => {
+                      if (vw > 0 && vh > 0) {
+                        const titleHeight = 36;
+                        const nodeWidth = videoNode.size.width;
+                        const newHeight = Math.round((nodeWidth * vh) / vw) + titleHeight;
+                        const clamped = clampCanvasNodeSize("video", nodeWidth, newHeight);
+                        if (clamped.height !== videoNode.size.height) {
+                          setVideoNodes((cur) => cur.map((n) =>
+                            n.id === videoNode.id ? { ...n, size: clamped } : n
+                          ));
+                        }
+                      }
+                    }} />
+                  ) : (
+                    <span className="studio-canvas-video-node__play"><VideoCameraOutlined /></span>
+                  )}
+                  {videoNodeProgressVisible ? (
+                    <CanvasSmoothedProgressRing
+                      progress={videoNodeProgress}
+                      status={videoTaskState?.status || "running"}
+                      message={videoTaskState?.message || "视频生成中"}
+                    />
+                  ) : null}
+                  {renderConnectorButton({ kind: "video", nodeId: videoNode.id, side: "left", slot: "center" }, "studio-canvas-video-node__connector")}
+                  {renderConnectorButton({ kind: "video", nodeId: videoNode.id, side: "right", slot: "center" }, "studio-canvas-video-node__connector")}
+                  <button
+                    type="button"
+                    className="studio-canvas-node-resize-handle"
+                    aria-label="Resize video node"
+                    onMouseDown={(event) => handleNodeResizeStart(event, "video", videoNode.id, videoNode.size)}
+                  />
+                </div>
+                {videoNodeActive && !isCanvasNodeMoving ? (() => {
+                  const vidMentionOptions = buildNodeMentionOptions("video", videoNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
+                  const vidMentionState = textNodeMentionStates[videoNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
+                  const vidFilteredMentions = vidMentionState.open
+                    ? vidMentionOptions.filter((o) => !vidMentionState.query || o.searchText.includes(vidMentionState.query.toLowerCase()))
+                    : [];
+
+                  const handleVideoPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                    const value = e.target.value;
+                    const caret = e.target.selectionStart || 0;
+                    updateVideoNodePrompt(videoNode.id, value);
+                    const beforeCaret = value.slice(0, caret);
+                    const atIdx = beforeCaret.lastIndexOf("@");
+                    if (atIdx >= 0) {
+                      const query = beforeCaret.slice(atIdx + 1);
+                      if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
+                        setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
+                        return;
+                      }
+                    }
+                    closeTextNodeMention(videoNode.id);
+                  };
+
+                  const handleVideoPromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+                    if (!vidMentionState.open || vidFilteredMentions.length === 0) return;
+                    if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex + 1) % vidFilteredMentions.length } })); }
+                    else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex - 1 + vidFilteredMentions.length) % vidFilteredMentions.length } })); }
+                    else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = vidFilteredMentions[vidMentionState.activeIndex]; if (opt) insertTextNodeMention(videoNode.id, opt, e.currentTarget, "video"); }
+                    else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(videoNode.id); }
+                  };
+
+                  return (
+                <div className="studio-canvas-video-composer">
+                  <div className="studio-canvas-video-composer__tabs studio-canvas-video-composer__mode-tabs">
+                    <button
+                      type="button"
+                      className={videoNode.videoMode === "text2video" ? "is-active" : ""}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={() => updateVideoNodeSetting(videoNode.id, { videoMode: "text2video" })}
+                    >
+                      文生视频
+                    </button>
+                    <button
+                      type="button"
+                      className={videoNode.videoMode === "img2video" ? "is-active" : ""}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={() => updateVideoNodeSetting(videoNode.id, { videoMode: "img2video" })}
+                    >
+                      图生视频
+                    </button>
+                    <button
+                      type="button"
+                      className={videoNode.videoMode === "firstlast" ? "is-active" : ""}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={() => updateVideoNodeSetting(videoNode.id, { videoMode: "firstlast" })}
+                    >
+                      首尾帧
+                    </button>
+                  </div>
+                  <div className="studio-canvas-video-composer__tools studio-canvas-video-composer__feature-tools">
+                    <button
+                      type="button"
+                      className={videoNode.marking ? "is-active" : ""}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setMarkingPopoverNodeId(markingPopoverNodeId === videoNode.id ? null : videoNode.id);
+                        setCameraMotionDropdownNodeId(null);
+                      }}
+                    >
+                      标记{videoNode.marking ? " ✓" : ""}
+                    </button>
+                    <button
+                      type="button"
+                      className={videoNode.cameraMotion ? "is-active" : ""}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setCameraMotionDropdownNodeId(cameraMotionDropdownNodeId === videoNode.id ? null : videoNode.id);
+                        setMarkingPopoverNodeId(null);
+                      }}
+                    >
+                      运镜{videoNode.cameraMotion ? ` ${CAMERA_MOTION_PRESETS.find((p) => p.value === videoNode.cameraMotion)?.label || ""}` : ""}
+                    </button>
+                    {markingPopoverNodeId === videoNode.id && (
+                      <div
+                        className="studio-canvas-marking-popover"
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <textarea
+                          className="studio-canvas-marking-input"
+                          placeholder="描述标记内容，如：主角在城市街头行走"
+                          value={videoNode.marking || ""}
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            setVideoNodes((nodes) =>
+                              nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: val } : n)),
+                            );
+                          }}
+                        />
+                        <div className="studio-canvas-marking-actions">
+                          {videoNode.marking && (
+                            <button
+                              type="button"
+                              className="studio-canvas-marking-clear"
+                              onClick={() => {
+                                setVideoNodes((nodes) =>
+                                  nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: "" } : n)),
+                                );
+                              }}
+                            >
+                              清除
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            className="studio-canvas-marking-done"
+                            onClick={() => setMarkingPopoverNodeId(null)}
+                          >
+                            完成
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                    {cameraMotionDropdownNodeId === videoNode.id && (
+                      <div
+                        className="studio-canvas-camera-dropdown"
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {CAMERA_MOTION_PRESETS.map((preset) => (
+                          <button
+                            key={preset.value}
+                            type="button"
+                            className={`studio-canvas-camera-dropdown__item${videoNode.cameraMotion === preset.value ? " is-active" : ""}`}
+                            onClick={() => {
+                              setVideoNodes((nodes) =>
+                                nodes.map((n) => (n.id === videoNode.id ? { ...n, cameraMotion: preset.value } : n)),
+                              );
+                              setCameraMotionDropdownNodeId(null);
+                            }}
+                          >
+                            {preset.label}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                    <button type="button">角色库</button>
+                    <button type="button" className="is-active">文本</button>
+                  </div>
+                  <div className="studio-canvas-text-composer__input-wrap">
+                  <textarea
+                    value={videoNode.prompt}
+                    onMouseDown={(event) => event.stopPropagation()}
+                    onChange={handleVideoPromptChange}
+                    onKeyDown={handleVideoPromptKeyDown}
+                    placeholder="根据文字描述生成视频。"
+                  />
+                  {vidMentionState.open ? (
+                    <div className="studio-canvas-mention-panel">
+                      {vidFilteredMentions.length > 0 ? vidFilteredMentions.map((opt, idx) => (
+                        <button
+                          key={opt.token}
+                          type="button"
+                          className={`studio-canvas-mention-item${idx === vidMentionState.activeIndex ? " is-active" : ""}`}
+                          onMouseDown={(ev) => { ev.preventDefault(); insertTextNodeMention(videoNode.id, opt, ev.currentTarget.closest(".studio-canvas-text-composer__input-wrap")?.querySelector("textarea")!, "video"); }}
+                        >
+                          <span className={`studio-canvas-mention-icon studio-canvas-mention-icon--${opt.kind}`}>
+                            {opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
+                          </span>
+                          <span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
+                          <span className="studio-canvas-mention-token">{opt.token}</span>
+                        </button>
+                      )) : (
+                        <div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
+                          <span className="studio-canvas-mention-label">没有可引用的连接节点</span>
+                        </div>
+                      )}
+                    </div>
+                  ) : null}
+                  </div>
+                  <div className="studio-canvas-video-composer__footer studio-canvas-video-composer__settings">
+                    <CanvasSelectChip
+                      ariaLabel="选择视频模型"
+                      className="canvas-select-chip--model studio-canvas-composer-chip"
+                      value={toHappyHorseDisplayModel(videoNode.model || defaultVideoModel)}
+                      options={canvasEnterpriseVideoModelOptions}
+                      open={canvasSelectMenu === `${videoNode.id}:video-model`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${videoNode.id}:video-model` ? null : `${videoNode.id}:video-model`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateVideoNodeSetting(videoNode.id, { model: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <CanvasSelectChip
+                      ariaLabel="选择视频比例"
+                      className="studio-canvas-composer-chip studio-canvas-composer-chip--compact"
+                      value={videoNode.aspectRatio || "16:9"}
+                      options={videoRatioOptions}
+                      open={canvasSelectMenu === `${videoNode.id}:video-ratio`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${videoNode.id}:video-ratio` ? null : `${videoNode.id}:video-ratio`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateVideoNodeSetting(videoNode.id, { aspectRatio: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <CanvasSelectChip
+                      ariaLabel="选择视频清晰度"
+                      className="studio-canvas-composer-chip studio-canvas-composer-chip--compact"
+                      value={resolveVideoQuality(videoNode.model || defaultVideoModel, videoNode.resolution || "")}
+                      options={getVideoQualityOptions(videoNode.model || defaultVideoModel)}
+                      open={canvasSelectMenu === `${videoNode.id}:video-resolution`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${videoNode.id}:video-resolution` ? null : `${videoNode.id}:video-resolution`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateVideoNodeSetting(videoNode.id, { resolution: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <CanvasSelectChip
+                      ariaLabel="选择视频时长"
+                      className="studio-canvas-composer-chip studio-canvas-composer-chip--mini"
+                      value={videoNode.duration || "4"}
+                      options={videoDurationOptions}
+                      open={canvasSelectMenu === `${videoNode.id}:video-duration`}
+                      onToggle={() =>
+                        setCanvasSelectMenu((current) =>
+                          current === `${videoNode.id}:video-duration` ? null : `${videoNode.id}:video-duration`
+                        )
+                      }
+                      onChange={(value) => {
+                        updateVideoNodeSetting(videoNode.id, { duration: value });
+                        setCanvasSelectMenu(null);
+                      }}
+                    />
+                    <button
+                      type="button"
+                      className={`studio-canvas-generate-button${videoNodeCanGenerate && !videoNodeGenerating ? " is-ready" : ""}`}
+                      title={videoNodeGenerating ? "生成中" : "生成"}
+                      disabled={videoNodeGenerating || !videoNodeCanGenerate}
+                      aria-busy={videoNodeGenerating}
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (!videoNodeGenerating && videoNodeCanGenerate) {
+                          void handleGenerateVideoNode(videoNode.id);
+                        }
+                      }}
+                    >
+                      <SendOutlined />
+                    </button>
+                  </div>
+                </div>
+                ); })() : null}
+              </div>
+            </div>
+            );
+          })}
+          </div>
+          {textNodeMenu && activeTextNode
+            ? renderCanvasNodeContextMenu({
+                left: textNodeMenu.left,
+                top: textNodeMenu.top,
+                saveAssetSource: {
+                  kind: "text",
+                  name: activeTextNode.title,
+                  description: activeTextNode.prompt || "从画布文本节点保存的素材。",
+                },
+                assetName: activeTextNode.title,
+                copyNode: () => setCopiedCanvasNode({ kind: "text", node: activeTextNode }),
+                duplicateNode: () => duplicateTextNode(activeTextNode),
+                deleteNode: () => setTextNodes((currentNodes) => currentNodes.filter((node) => node.id !== activeTextNode.id)),
+              })
+            : null}
+          {imageNodeMenu && activeImageNode
+            ? renderCanvasNodeContextMenu({
+                left: imageNodeMenu.left,
+                top: imageNodeMenu.top,
+                saveAssetSource: {
+                  kind: "image",
+                  name: activeImageNode.fileName || activeImageNode.title,
+                  description: activeImageNode.prompt || "从画布图片节点保存的素材。",
+                  imageUrl: activeImageNode.imageUrl,
+                },
+                assetName: activeImageNode.fileName || activeImageNode.title,
+                assetCoverUrl: activeImageNode.imageUrl,
+                copyNode: () => setCopiedCanvasNode({ kind: "image", node: activeImageNode }),
+                duplicateNode: () => duplicateImageNode(activeImageNode),
+                deleteNode: () => setImageNodes((currentNodes) => currentNodes.filter((node) => node.id !== activeImageNode.id)),
+              })
+            : null}
+          {videoNodeMenu && activeVideoNode
+            ? renderCanvasNodeContextMenu({
+                left: videoNodeMenu.left,
+                top: videoNodeMenu.top,
+                saveAssetSource: {
+                  kind: "video",
+                  name: activeVideoNode.title,
+                  description: activeVideoNode.prompt || "从画布视频节点保存的素材。",
+                  url: activeVideoNode.videoUrl,
+                },
+                assetName: activeVideoNode.title,
+                copyNode: () => setCopiedCanvasNode({ kind: "video", node: activeVideoNode }),
+                duplicateNode: () => duplicateVideoNode(activeVideoNode),
+                deleteNode: () => setVideoNodes((currentNodes) => currentNodes.filter((node) => node.id !== activeVideoNode.id)),
+              })
+            : null}
+          {selectionContextMenu ? (
+            <div
+              className="studio-canvas-selection-context-menu"
+              style={{ left: selectionContextMenu.left, top: selectionContextMenu.top }}
+              role="menu"
+              aria-label={activePackage ? "打包节点操作" : "已选节点操作"}
+              onClick={(event) => event.stopPropagation()}
+              onContextMenu={(event) => event.preventDefault()}
+            >
+              {activePackage ? (
+                <>
+                  <div className="studio-canvas-selection-context-menu__title">
+                    <strong>{activePackage.title}</strong>
+                    <span>{activePackage.nodeIds.length} 个节点</span>
+                  </div>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="studio-canvas-selection-context-menu__primary"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      collapseSelectedCanvasPackage();
+                    }}
+                  >
+                    <span>折叠打包</span>
+                    <kbd>Fold</kbd>
+                  </button>
+                  {selectedPackageCount > 0 ? (
+                    <button
+                      type="button"
+                      role="menuitem"
+                      className="studio-canvas-selection-context-menu__unpackage"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        unpackageSelectedCanvasNodes();
+                      }}
+                    >
+                      <span>取消打包</span>
+                      <kbd>Ungroup</kbd>
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      clearCanvasSelection();
+                    }}
+                  >
+                    <span>取消选择</span>
+                    <kbd>Esc</kbd>
+                  </button>
+                </>
+              ) : (
+                <>
+                  <div className="studio-canvas-selection-context-menu__title">
+                    <strong>已选节点</strong>
+                    <span>{selectedNodes.length} 个</span>
+                  </div>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="studio-canvas-selection-context-menu__primary"
+                    disabled={selectedNodes.length < 2}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      packageSelectedCanvasNodes();
+                    }}
+                  >
+                    <span>打包节点</span>
+                    <kbd>Group</kbd>
+                  </button>
+                  {selectedPackageCount > 0 ? (
+                    <button
+                      type="button"
+                      role="menuitem"
+                      className="studio-canvas-selection-context-menu__unpackage"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        unpackageSelectedCanvasNodes();
+                      }}
+                    >
+                      <span>取消打包</span>
+                      <kbd>Ungroup</kbd>
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      clearCanvasSelection();
+                    }}
+                  >
+                    <span>取消选择</span>
+                    <kbd>Esc</kbd>
+                  </button>
+                </>
+              )}
+            </div>
+          ) : null}
+          {saveAssetOpen ? (
+            <div className="studio-canvas-save-asset" role="dialog" aria-modal="true" aria-label="创建素材文件夹">
+              <div className="studio-canvas-save-asset__modal">
+                <header className="studio-canvas-save-asset__head">
+                  <button
+                    type="button"
+                    className={assetSaveMode === "create" ? "is-active" : ""}
+                    onClick={() => {
+                      setAssetSaveMode("create");
+                      setCoverLibraryOpen(false);
+                    }}
+                  >
+                    创建素材文件夹
+                  </button>
+                  <button
+                    type="button"
+                    className={assetSaveMode === "existing" ? "is-active" : ""}
+                    onClick={() => {
+                      setAssetSaveMode("existing");
+                      setCoverSourceOpen(false);
+                      setCoverLibraryOpen(false);
+                    }}
+                  >
+                    添加到现有素材文件
+                  </button>
+                  <button type="button" className="studio-canvas-save-asset__close" aria-label="关闭" onClick={() => setSaveAssetOpen(false)}>
+                    <CloseOutlined />
+                  </button>
+                </header>
+                {assetSaveMode === "create" ? (
+                  <>
+                    <div className="studio-canvas-save-asset__body">
+                      <section className="studio-canvas-save-asset__cover">
+                        <div className="studio-canvas-save-asset__label">封面</div>
+                        <div className={`studio-canvas-save-asset__placeholder${assetCoverUrl ? " has-cover" : ""}`}>
+                          {assetCoverUrl ? <img src={assetCoverUrl} alt="素材封面" /> : <span>暂无封面</span>}
+                          <button type="button" onClick={() => setCoverSourceOpen((open) => !open)}><UploadOutlined /> 更换封面</button>
+                          {coverSourceOpen ? (
+                            <div className="studio-canvas-save-asset__cover-menu">
+                              <button type="button" onClick={() => coverFileInputRef.current?.click()}>本地上传</button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setCoverSourceOpen(false);
+                                  setCoverLibraryOpen(true);
+                                }}
+                              >
+                                历史图库
+                              </button>
+                            </div>
+                          ) : null}
+                          {coverLibraryOpen ? (
+                            <div className="studio-canvas-save-asset__cover-library">
+                              {canvasAssets.length ? canvasAssets.slice(0, 6).map((asset) => (
+                                <button
+                                  type="button"
+                                  key={asset.id}
+                                  onClick={() => {
+                                    setAssetCoverUrl(asset.imageUrl);
+                                    setCoverLibraryOpen(false);
+                                  }}
+                                >
+                                  <img src={asset.imageUrl} alt={asset.name} />
+                                  <span>{asset.name}</span>
+                                </button>
+                              )) : <span>{assetLibraryNotice || "服务器资产库暂无封面"}</span>}
+                            </div>
+                          ) : null}
+                          <input
+                            ref={coverFileInputRef}
+                            type="file"
+                            accept="image/*"
+                            className="studio-canvas-save-asset__file-input"
+                            onChange={(event) => {
+                              const file = event.target.files?.[0];
+                              if (!file) return;
+                              setAssetCoverUrl(URL.createObjectURL(file));
+                              setCoverSourceOpen(false);
+                            }}
+                          />
+                        </div>
+                      </section>
+                      <section className="studio-canvas-save-asset__form">
+                        <label>
+                          <span>名称 <b>*</b></span>
+                          <input value={assetName} onChange={(event) => setAssetName(event.target.value)} />
+                        </label>
+                        <label>
+                          <span>分类 <b>*</b></span>
+                          <button
+                            type="button"
+                            className={`studio-canvas-save-asset__select${assetCategoryOpen ? " is-open" : ""}`}
+                            onClick={() => setAssetCategoryOpen((open) => !open)}
+                          >
+                            <span>{assetCategory || "请选择"}</span>
+                            <DownOutlined />
+                          </button>
+                          {assetCategoryOpen ? (
+                            <div className="studio-canvas-save-asset__select-menu">
+                              {["其它", "人物", "场景", "物品", "风格", "音效"].map((category) => (
+                                <button
+                                  type="button"
+                                  key={category}
+                                  className={assetCategory === category ? "is-selected" : ""}
+                                  onClick={() => {
+                                    setAssetCategory(category);
+                                    setAssetCategoryOpen(false);
+                                  }}
+                                >
+                                  {category}
+                                </button>
+                              ))}
+                            </div>
+                          ) : null}
+                        </label>
+                      </section>
+                    </div>
+                    <button
+                      type="button"
+                      className="studio-canvas-save-asset__create"
+                      disabled={isSavingAsset}
+                      onClick={() => void saveCanvasAssetToServer(resolveAssetCategory(assetCategory))}
+                    >
+                      {isSavingAsset ? "保存中" : "确认"}
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <div className="studio-canvas-save-asset__existing">
+                      <div className="studio-canvas-save-asset__existing-title">选择要加入的资产库分类</div>
+                      <div className="studio-canvas-save-asset__existing-grid">
+                        {assetLibraryCategories.map((category) => (
+                          <button
+                            type="button"
+                            key={category.key}
+                            className={selectedExistingCategory === category.key ? "is-selected" : ""}
+                            onClick={() => setSelectedExistingCategory(category.key)}
+                          >
+                            {category.label}
+                            <span>{serverAssets.filter((asset) => asset.type === category.key).length} 个素材</span>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      className="studio-canvas-save-asset__create"
+                      disabled={!selectedExistingCategory || isSavingAsset}
+                      onClick={() => {
+                        if (!selectedExistingCategory) return;
+                        void saveCanvasAssetToServer(selectedExistingCategory as AssetLibraryCategory);
+                      }}
+                    >
+                      {isSavingAsset ? "保存中" : "确认"}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          ) : null}
+          {contextMenu ? (
+            <div
+              className="studio-canvas-context-menu"
+              style={{ left: contextMenu.left, top: contextMenu.top }}
+              role="menu"
+              onClick={(event) => event.stopPropagation()}
+              onContextMenu={(event) => event.preventDefault()}
+            >
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!contextMenu) return;
+                  setPendingImagePosition(getTextNodePositionFromClient(contextMenu.originLeft, contextMenu.originTop));
+                  canvasUploadInputRef.current?.click();
+                }}
+              >
+                上传
+              </button>
+              <button type="button" role="menuitem" disabled>保存到我的素材</button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!contextMenu) return;
+                  const menuPosition = positionFloatingMenu(event.clientX, event.clientY, 260, 390, 0);
+                  setContextMenu(null);
+                  setNodeMenu({
+                    ...menuPosition,
+                    originLeft: contextMenu.originLeft,
+                    originTop: contextMenu.originTop,
+                  });
+                }}
+              >
+                添加节点
+              </button>
+              <span className="studio-canvas-context-menu__divider" />
+              <button type="button" role="menuitem">
+                <span>撤销</span>
+                <kbd>⌘Z</kbd>
+              </button>
+              <button type="button" role="menuitem" disabled>
+                <span>重做</span>
+                <kbd>⇧⌘Z</kbd>
+              </button>
+              <span className="studio-canvas-context-menu__divider" />
+              <button
+                type="button"
+                role="menuitem"
+                disabled={!copiedCanvasNode}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!copiedCanvasNode || !contextMenu) return;
+                  duplicateCopiedCanvasNode(
+                    copiedCanvasNode,
+                    getTextNodePositionFromClient(contextMenu.originLeft, contextMenu.originTop)
+                  );
+                  setContextMenu(null);
+                }}
+              >
+                <span>粘贴</span>
+                <kbd>⌘V</kbd>
+              </button>
+            </div>
+          ) : null}
+          {nodeMenu ? (
+            <div
+              className="studio-canvas-add-node-menu"
+              style={{ left: nodeMenu.left, top: nodeMenu.top }}
+              role="menu"
+              onClick={(event) => event.stopPropagation()}
+              onContextMenu={(event) => event.preventDefault()}
+            >
+              <div className="studio-canvas-add-node-menu__title">添加节点</div>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!nodeMenu) return;
+                  setNodeMenu(null);
+                  setContextMenu(null);
+                  addTextNode(undefined, getTextNodePositionFromClient(nodeMenu.originLeft, nodeMenu.originTop));
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><BarsOutlined /></span>
+                <span>文本</span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!nodeMenu) return;
+                  addImageNode("", "图片节点", getTextNodePositionFromClient(nodeMenu.originLeft, nodeMenu.originTop));
+                  setNodeMenu(null);
+                  setContextMenu(null);
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><FileImageOutlined /></span>
+                <span>图片</span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!nodeMenu) return;
+                  addVideoNode(getTextNodePositionFromClient(nodeMenu.originLeft, nodeMenu.originTop));
+                  setNodeMenu(null);
+                  setContextMenu(null);
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><VideoCameraOutlined /></span>
+                <span>视频</span>
+              </button>
+              <div className="studio-canvas-add-node-menu__title studio-canvas-add-node-menu__title--section">添加资源</div>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!nodeMenu) return;
+                  setPendingImagePosition(getTextNodePositionFromClient(nodeMenu.originLeft, nodeMenu.originTop));
+                  imageNodeInputRef.current?.click();
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><UploadOutlined /></span>
+                <span>上传</span>
+              </button>
+            </div>
+          ) : null}
+          {connectionDropMenu ? (
+            <div
+              className="studio-canvas-add-node-menu"
+              style={{ left: connectionDropMenu.left, top: connectionDropMenu.top }}
+              role="menu"
+              onClick={(event) => event.stopPropagation()}
+              onContextMenu={(event) => event.preventDefault()}
+            >
+              <div className="studio-canvas-add-node-menu__title">新建节点并连接</div>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!connectionDropMenu) return;
+                  const pos = getTextNodePositionFromClient(connectionDropMenu.originLeft, connectionDropMenu.originTop);
+                  pendingAutoConnectRef.current = connectionDropMenu.sourcePort;
+                  addTextNode(undefined, pos);
+                  setPendingLinkPort(null);
+                  setPendingLinkPreviewPoint(null);
+                  setConnectionDropMenu(null);
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><BarsOutlined /></span>
+                <span>文本</span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!connectionDropMenu) return;
+                  const pos = getTextNodePositionFromClient(connectionDropMenu.originLeft, connectionDropMenu.originTop);
+                  pendingAutoConnectRef.current = connectionDropMenu.sourcePort;
+                  addImageNode("", "图片节点", pos);
+                  setPendingLinkPort(null);
+                  setPendingLinkPreviewPoint(null);
+                  setConnectionDropMenu(null);
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><FileImageOutlined /></span>
+                <span>图片</span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!connectionDropMenu) return;
+                  const pos = getTextNodePositionFromClient(connectionDropMenu.originLeft, connectionDropMenu.originTop);
+                  pendingAutoConnectRef.current = connectionDropMenu.sourcePort;
+                  addVideoNode(pos);
+                  setPendingLinkPort(null);
+                  setPendingLinkPreviewPoint(null);
+                  setConnectionDropMenu(null);
+                }}
+              >
+                <span className="studio-canvas-add-node-menu__icon"><VideoCameraOutlined /></span>
+                <span>视频</span>
+              </button>
+            </div>
+          ) : null}
+          {stylePickerImageNodeId ? (
+            <div
+              className="studio-canvas-style-picker"
+              role="dialog"
+              aria-modal="true"
+              aria-label="选择社区风格"
+              onMouseDown={(event) => event.stopPropagation()}
+              onClick={(event) => event.stopPropagation()}
+              onContextMenu={(event) => event.preventDefault()}
+            >
+              <button
+                type="button"
+                className="studio-canvas-style-picker__backdrop"
+                aria-label="关闭风格选择"
+                onClick={() => setStylePickerImageNodeId(null)}
+              />
+              <div className="studio-canvas-style-picker__panel">
+                <header className="studio-canvas-style-picker__header">
+                  <nav className="studio-canvas-style-picker__tabs" aria-label="风格来源">
+                    {canvasStylePickerTabs.map((tab) => (
+                      <button
+                        key={tab.key}
+                        type="button"
+                        className={stylePickerTab === tab.key ? "is-active" : ""}
+                        onClick={() => setStylePickerTab(tab.key)}
+                      >
+                        {tab.label}
+                      </button>
+                    ))}
+                  </nav>
+                  <label className="studio-canvas-style-picker__search">
+                    <SearchOutlined />
+                    <input
+                      value={stylePickerSearch}
+                      placeholder="搜索作品名称、作者、标签"
+                      onChange={(event) => setStylePickerSearch(event.target.value)}
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    className="studio-canvas-style-picker__community-link"
+                    onClick={() => {
+                      setStylePickerImageNodeId(null);
+                      onOpenCommunity();
+                    }}
+                  >
+                    打开社区
+                  </button>
+                  <button
+                    type="button"
+                    className="studio-canvas-style-picker__close"
+                    aria-label="关闭"
+                    onClick={() => setStylePickerImageNodeId(null)}
+                  >
+                    <CloseOutlined />
+                  </button>
+                </header>
+                <div className="studio-canvas-style-picker__subbar">
+                  <div className="studio-canvas-style-picker__categories" role="tablist" aria-label="风格分类">
+                    {canvasStylePickerCategories.map((category) => (
+                      <button
+                        key={category}
+                        type="button"
+                        className={stylePickerCategory === category ? "is-active" : ""}
+                        onClick={() => setStylePickerCategory(category)}
+                      >
+                        {category}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="studio-canvas-style-picker__filters" aria-hidden="true">
+                    <span>推荐</span>
+                  </div>
+                </div>
+                <main className="studio-canvas-style-picker__body">
+                  {stylePickerLoading ? (
+                    <div className="studio-canvas-style-picker__grid" aria-busy="true">
+                      {Array.from({ length: 18 }).map((_, index) => (
+                        <div className="studio-canvas-style-picker__skeleton" key={index} />
+                      ))}
+                    </div>
+                  ) : stylePickerError ? (
+                    <div className="studio-canvas-style-picker__empty">
+                      <strong>社区风格加载失败</strong>
+                      <span>{stylePickerError}</span>
+                      <button type="button" onClick={() => setStylePickerReloadToken((token) => token + 1)}>
+                        重试
+                      </button>
+                    </div>
+                  ) : stylePickerVisibleCases.length ? (
+                    <div className="studio-canvas-style-picker__grid">
+                      {stylePickerVisibleCases.map((item) => (
+                        <button
+                          type="button"
+                          key={item.id}
+                          className={`studio-canvas-style-picker__card${stylePickerNode?.styleReference?.id === item.id ? " is-selected" : ""}`}
+                          onClick={() => handleSelectImageStyle(item)}
+                        >
+                          <span className="studio-canvas-style-picker__image">
+                            <img src={item.imageUrl} alt={item.title} loading="lazy" />
+                            <em>{Math.max(item.favoriteCount, item.likeCount, 0)}</em>
+                          </span>
+                          <strong>{item.title}</strong>
+                          <small>{item.author}</small>
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="studio-canvas-style-picker__empty">
+                      <strong>没有匹配的社区作品</strong>
+                      <span>换个分类或关键词再试试。</span>
+                    </div>
+                  )}
+                </main>
+              </div>
+            </div>
+          ) : null}
+          {styleSelectionToast ? (
+            <div className="studio-canvas-style-toast" role="status">
+              {styleSelectionToast}
+            </div>
+          ) : null}
+          {generationToast ? (
+            <div className="studio-canvas-generation-toast" role="status">
+              {generationToast}
+            </div>
+          ) : null}
+        </section>
+
+      </div>
+    </WorkspacePageShell>
+  );
+}
+
+export default CanvasPage;
diff --git a/src/features/canvas/CanvasSmoothedProgressRing.tsx b/src/features/canvas/CanvasSmoothedProgressRing.tsx
new file mode 100644
index 0000000..a80eefc
--- /dev/null
+++ b/src/features/canvas/CanvasSmoothedProgressRing.tsx
@@ -0,0 +1,26 @@
+import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+import { canvasGenerationProgressStyle } from "./canvasUtils";
+
+type NodeGenStatus = "submitting" | "running" | "success" | "error";
+
+interface CanvasSmoothedProgressRingProps {
+  progress: number;
+  status: NodeGenStatus;
+  message?: string;
+}
+
+export function CanvasSmoothedProgressRing({ progress, status, message }: CanvasSmoothedProgressRingProps) {
+  const smoothed = useSmoothedProgress(progress, status);
+  return (
+    <div
+      className="studio-canvas-node-generation-progress"
+      role="status"
+      aria-live="polite"
+      style={canvasGenerationProgressStyle(smoothed)}
+    >
+      <span className="studio-canvas-node-generation-progress__ring" aria-hidden="true" />
+      <strong>{message}</strong>
+      <em>{smoothed}%</em>
+    </div>
+  );
+}
diff --git a/src/features/canvas/canvasAssetPersistence.ts b/src/features/canvas/canvasAssetPersistence.ts
new file mode 100644
index 0000000..12e9079
--- /dev/null
+++ b/src/features/canvas/canvasAssetPersistence.ts
@@ -0,0 +1,191 @@
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import type { WebCanvasWorkflowAssetRef } from "../../types";
+
+interface CanvasGeneratedResultInput {
+  url: string;
+  taskId: string;
+  mediaType: string;
+  resultType?: "image" | "video";
+  ossKey?: string | null;
+  originalUrl?: string | null;
+  expiresAt?: string | null;
+}
+
+interface PersistCanvasGeneratedResultInput extends CanvasGeneratedResultInput {
+  title: string;
+  client?: CanvasAssetPersistenceClient;
+}
+
+interface CanvasAssetPersistenceClient {
+  downloadTaskResult(taskId: string): Promise<{ blob: Blob; filename?: string; contentType?: string }>;
+  uploadAsset(input: {
+    dataUrl: string;
+    name?: string;
+    mimeType?: string;
+    scope?: string;
+  }): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
+  uploadAssetByUrl(input: {
+    sourceUrl: string;
+    name?: string;
+    mimeType?: string;
+    scope?: string;
+  }): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
+  fetchAsset?: (url: string) => Promise<{
+    ok: boolean;
+    status: number;
+    headers: { get(name: string): string | null };
+    blob(): Promise<Blob>;
+  }>;
+}
+
+function getDefaultClient(): CanvasAssetPersistenceClient {
+  return {
+    downloadTaskResult: (taskId) => aiGenerationClient.downloadTaskResult(taskId),
+    uploadAsset: (input) => aiGenerationClient.uploadAsset(input),
+    uploadAssetByUrl: (input) => aiGenerationClient.uploadAssetByUrl(input),
+    fetchAsset: (url) => fetch(url, { credentials: "omit" }),
+  };
+}
+
+function getGeneratedResultOssKey(url: string): string | null {
+  try {
+    const key = decodeURIComponent(new URL(url, globalThis.location?.href || "http://localhost").pathname.replace(/^\/+/, ""));
+    return /^users\/[^/]+\/generation-results\/.+/i.test(key) ? key : null;
+  } catch {
+    return null;
+  }
+}
+
+export function createCanvasAssetRefFromGeneratedResult(
+  input: CanvasGeneratedResultInput,
+): WebCanvasWorkflowAssetRef {
+  const inferredOssKey = input.ossKey || getGeneratedResultOssKey(input.url);
+  const mediaType = input.mediaType || (input.resultType === "video" ? "video/mp4" : "image/png");
+  return {
+    url: input.url,
+    mediaType,
+    sourceTaskId: input.taskId,
+    ossKey: inferredOssKey || null,
+    originalUrl: input.originalUrl || null,
+    expiresAt: input.expiresAt || null,
+  };
+}
+
+function getCanvasResultExtension(mediaType: string, fallbackUrl: string) {
+  const mime = mediaType.split(";")[0]?.trim().toLowerCase();
+  if (mime === "image/jpeg") return "jpg";
+  if (mime === "image/png") return "png";
+  if (mime === "image/webp") return "webp";
+  if (mime === "image/gif") return "gif";
+  if (mime === "video/mp4") return "mp4";
+  if (mime === "video/webm") return "webm";
+
+  try {
+    const matched = new URL(fallbackUrl, globalThis.location?.href || "http://localhost")
+      .pathname
+      .match(/\.([a-z0-9]{2,5})$/i);
+    if (matched?.[1]) return matched[1].toLowerCase();
+  } catch {
+    // Keep media fallback below.
+  }
+
+  return mediaType.startsWith("video/") ? "mp4" : "png";
+}
+
+function buildCanvasResultFileName(title: string, mediaType: string, fallbackUrl: string) {
+  const normalized = title
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, " ")
+    .slice(0, 80)
+    .trim();
+  return `${normalized || "canvas-result"}.${getCanvasResultExtension(mediaType, fallbackUrl)}`;
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read canvas result"));
+    };
+    reader.onerror = () => reject(reader.error || new Error("Unable to read canvas result"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function downloadCanvasResultBlob(
+  input: PersistCanvasGeneratedResultInput,
+  client: CanvasAssetPersistenceClient,
+) {
+  try {
+    return await client.downloadTaskResult(input.taskId);
+  } catch {
+    const fetchAsset = client.fetchAsset || ((url: string) => fetch(url, { credentials: "omit" }));
+    const response = await fetchAsset(input.url);
+    if (!response.ok) throw new Error(`Canvas result request failed: ${response.status}`);
+    const blob = await response.blob();
+    return {
+      blob,
+      contentType: blob.type || response.headers.get("content-type") || undefined,
+    };
+  }
+}
+
+export async function persistCanvasGeneratedResultAsset(
+  input: PersistCanvasGeneratedResultInput,
+): Promise<WebCanvasWorkflowAssetRef> {
+  const fallbackRef = createCanvasAssetRefFromGeneratedResult(input);
+  if (fallbackRef.ossKey) return fallbackRef;
+
+  const client = input.client || getDefaultClient();
+  const fallbackMediaType = input.mediaType || (input.resultType === "video" ? "video/mp4" : "image/png");
+  const name = buildCanvasResultFileName(input.title, fallbackMediaType, input.url);
+
+  // Try server-side URL-to-OSS first
+  try {
+    const uploaded = await client.uploadAssetByUrl({
+      sourceUrl: input.url,
+      name,
+      mimeType: fallbackMediaType,
+      scope: "canvas-node-result",
+    });
+    return createCanvasAssetRefFromGeneratedResult({
+      ...input,
+      url: uploaded.url,
+      ossKey: uploaded.ossKey || null,
+      mediaType: fallbackMediaType,
+      originalUrl: input.originalUrl || input.url,
+    });
+  } catch (urlError) {
+    console.warn("[canvas] URL upload failed, falling back to download+base64:", urlError instanceof Error ? urlError.message : urlError);
+  }
+
+  // Fallback: download → base64 → upload
+  try {
+    const downloaded = await downloadCanvasResultBlob(input, client);
+    const mimeType = downloaded.contentType || downloaded.blob.type || fallbackMediaType;
+    const dataUrl = await blobToDataUrl(downloaded.blob);
+    const uploaded = await client.uploadAsset({
+      dataUrl,
+      name: downloaded.filename || name,
+      mimeType,
+      scope: "canvas-node-result",
+    });
+
+    return createCanvasAssetRefFromGeneratedResult({
+      ...input,
+      url: uploaded.url,
+      ossKey: uploaded.ossKey || null,
+      mediaType: mimeType,
+      originalUrl: input.originalUrl || input.url,
+    });
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error || "");
+    if (/413|too large/i.test(msg)) {
+      console.warn("[canvas] OSS upload rejected (file too large), using temporary URL:", msg);
+    } else {
+      console.warn("[canvas] result persistence fallback:", error);
+    }
+    return fallbackRef;
+  }
+}
diff --git a/src/features/canvas/canvasCommunityPublish.ts b/src/features/canvas/canvasCommunityPublish.ts
new file mode 100644
index 0000000..38d87fb
--- /dev/null
+++ b/src/features/canvas/canvasCommunityPublish.ts
@@ -0,0 +1,93 @@
+import type { PublishCommunityCaseInput } from "../../api/communityClient";
+import type { WebCanvasWorkflow } from "../../types";
+
+interface UploadedWorkflowAsset {
+  url: string;
+  ossKey?: string;
+  fileName: string;
+}
+
+interface CanvasCommunityCaseInput {
+  workflow: WebCanvasWorkflow;
+  projectId?: string | null;
+  uploadedWorkflow: UploadedWorkflowAsset;
+}
+
+function getCanvasWorkflowCoverUrl(workflow: WebCanvasWorkflow): string {
+  return workflow.nodes.find((node) => node.previewUrl)?.previewUrl || "";
+}
+
+function shortWorkflowDescription(workflow: WebCanvasWorkflow): string {
+  const promptNode = workflow.nodes.find((node) => node.detail.trim());
+  return promptNode?.detail.trim().slice(0, 120) || `包含 ${workflow.nodes.length} 个节点的画布工作流`;
+}
+
+export function textToDataUrl(text: string, mimeType: string): string {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return `data:${mimeType};base64,${btoa(binary)}`;
+}
+
+export function buildCanvasWorkflowJson(workflow: WebCanvasWorkflow): string {
+  return JSON.stringify(workflow, null, 2);
+}
+
+export function buildWorkflowFileName(title: string): string {
+  const normalized = title.trim().replace(/[\\/:*?"<>|]+/g, "-").replace(/\s+/g, "-");
+  return `${(normalized || "canvas-workflow").slice(0, 72)}.json`;
+}
+
+export function buildCanvasCommunityCaseInput({
+  workflow,
+  projectId,
+  uploadedWorkflow,
+}: CanvasCommunityCaseInput): PublishCommunityCaseInput {
+  const title = workflow.title.trim() || "画布工作流";
+  const coverUrl = getCanvasWorkflowCoverUrl(workflow);
+  const workflowAsset = {
+    assetType: "workflow" as const,
+    title,
+    url: uploadedWorkflow.url,
+    ossKey: uploadedWorkflow.ossKey,
+    metadata: {
+      workflow,
+      fileName: uploadedWorkflow.fileName,
+      contentType: "application/json",
+    },
+  };
+  const coverAsset = coverUrl
+    ? [
+        {
+          assetType: "cover" as const,
+          title: `${title} 封面`,
+          url: coverUrl,
+          metadata: { source: "workflow-preview" },
+        },
+      ]
+    : [];
+
+  return {
+    projectId: projectId || workflow.id,
+    title,
+    description: workflow.description.trim() || shortWorkflowDescription(workflow),
+    coverUrl: coverUrl || null,
+    tags: ["工作流案例", "画布页面社区"],
+    metadata: {
+      source: "canvas-workflow-export",
+      communitySurface: "canvas",
+      category: "工作流案例",
+      workflow,
+      workflowSnapshot: workflow,
+      workflowData: workflow,
+      workflowOssKey: uploadedWorkflow.ossKey || null,
+      workflowUrl: uploadedWorkflow.url || null,
+      nodeCount: workflow.nodes.length,
+      edgeCount: workflow.edges.length,
+      settings: workflow.settings,
+    },
+    assets: [workflowAsset, ...coverAsset],
+  };
+}
diff --git a/src/features/canvas/canvasComponents.tsx b/src/features/canvas/canvasComponents.tsx
new file mode 100644
index 0000000..5f9cd98
--- /dev/null
+++ b/src/features/canvas/canvasComponents.tsx
@@ -0,0 +1,312 @@
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  DownOutlined,
+  ExpandOutlined,
+  MutedOutlined,
+  PauseCircleOutlined,
+  PictureOutlined,
+  PlayCircleOutlined,
+  ReloadOutlined,
+  SaveOutlined,
+  SoundOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { useEffect, useRef, useState, type ChangeEvent, type MouseEvent } from "react";
+import type { CanvasOption } from "./canvasTypes";
+import { getOptionLabel } from "./canvasUtils";
+import { formatCanvasVideoTime } from "./canvasWorkflowDeserialize";
+
+export function CanvasSelectChip({
+  value,
+  options,
+  open,
+  onToggle,
+  onChange,
+  ariaLabel,
+  className,
+  compact = false,
+}: {
+  value: string;
+  options: CanvasOption[];
+  open: boolean;
+  onToggle: () => void;
+  onChange: (value: string) => void;
+  ariaLabel: string;
+  className?: string;
+  compact?: boolean;
+}) {
+  return (
+    <div className={`canvas-select-chip${open ? " is-open" : ""}${compact ? " canvas-select-chip--compact" : ""}${className ? ` ${className}` : ""}`}>
+      <button
+        type="button"
+        className="canvas-select-chip__trigger"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onMouseDown={(event) => event.stopPropagation()}
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onToggle();
+        }}
+      >
+        <span className="canvas-select-chip__value">{getOptionLabel(options, value)}</span>
+        <DownOutlined className="canvas-select-chip__arrow" />
+      </button>
+      {open ? (
+        <div
+          className="canvas-select-chip__dropdown"
+          role="listbox"
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {options.map((option, index) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`canvas-select-chip__option${option.value === value ? " is-active" : ""}`}
+              role="option"
+              aria-selected={option.value === value}
+              style={{ animationDelay: `${index * 18}ms` }}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onChange(option.value);
+              }}
+            >
+              <span className="canvas-select-chip__option-dot" />
+              <span>{option.label}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+
+export function CanvasNodeVideoPlayer({ src, title, onVideoMeta }: { src: string; title: string; onVideoMeta?: (width: number, height: number) => void }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+  }, [src]);
+
+  const stopPlayerEvent = (event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const syncVideoState = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    setCurrentTime(video.currentTime || 0);
+    setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+    setIsMuted(video.muted);
+    setIsPlaying(!video.paused && !video.ended);
+  };
+
+  const togglePlayback = async (event: MouseEvent<HTMLButtonElement>) => {
+    stopPlayerEvent(event);
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (video.paused || video.ended) {
+      try {
+        await video.play();
+      } catch {
+        setIsPlaying(false);
+      }
+    } else {
+      video.pause();
+    }
+    syncVideoState();
+  };
+
+  const toggleMuted = (event: MouseEvent<HTMLButtonElement>) => {
+    stopPlayerEvent(event);
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+    setIsMuted(video.muted);
+  };
+
+  const handleSeek = (event: ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    const video = videoRef.current;
+    const nextTime = Number(event.target.value);
+    if (!video || !Number.isFinite(nextTime)) return;
+    video.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  };
+
+  return (
+    <div className={`studio-canvas-video-player${isPlaying ? " is-playing" : ""}`}>
+      <video
+        ref={videoRef}
+        src={src}
+        playsInline
+        preload="metadata"
+        onLoadedMetadata={() => {
+          syncVideoState();
+          const video = videoRef.current;
+          if (video && video.videoWidth > 0 && video.videoHeight > 0 && onVideoMeta) {
+            onVideoMeta(video.videoWidth, video.videoHeight);
+          }
+        }}
+        onTimeUpdate={syncVideoState}
+        onPlay={syncVideoState}
+        onPause={syncVideoState}
+        onEnded={syncVideoState}
+        aria-label={title}
+      />
+      <span className="studio-canvas-video-player__shade" aria-hidden="true" />
+      <button
+        type="button"
+        className="studio-canvas-video-player__center"
+        aria-label={isPlaying ? "Pause video preview" : "Play video preview"}
+        title={isPlaying ? "Pause" : "Play"}
+        onMouseDown={stopPlayerEvent}
+        onClick={togglePlayback}
+      >
+        {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+      </button>
+      <div className="studio-canvas-video-player__controls" onMouseDown={stopPlayerEvent}>
+        <button
+          type="button"
+          className="studio-canvas-video-player__button"
+          aria-label={isPlaying ? "Pause video preview" : "Play video preview"}
+          onClick={togglePlayback}
+        >
+          {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+        </button>
+        <span className="studio-canvas-video-player__time">
+          {formatCanvasVideoTime(currentTime)} / {formatCanvasVideoTime(duration)}
+        </span>
+        <input
+          className="studio-canvas-video-player__seek"
+          type="range"
+          min="0"
+          max={Math.max(duration, 0)}
+          step="0.1"
+          value={Math.min(currentTime, duration || currentTime)}
+          aria-label="Video preview progress"
+          onMouseDown={stopPlayerEvent}
+          onChange={handleSeek}
+        />
+        <button
+          type="button"
+          className="studio-canvas-video-player__button"
+          aria-label={isMuted ? "Unmute video preview" : "Mute video preview"}
+          onClick={toggleMuted}
+        >
+          {isMuted ? <MutedOutlined /> : <SoundOutlined />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export interface CanvasNodeToolbarAction {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export function CanvasNodeToolbar({
+  actions,
+  onAction,
+  moreActions,
+  onMoreAction,
+}: {
+  actions: CanvasNodeToolbarAction[];
+  onAction: (key: string) => void;
+  moreActions?: CanvasNodeToolbarAction[];
+  onMoreAction?: (key: string) => void;
+}) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!moreOpen) return;
+    const handler = (e: globalThis.MouseEvent) => {
+      if (moreRef.current && !moreRef.current.contains(e.target as Node)) {
+        setMoreOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [moreOpen]);
+
+  return (
+    <div
+      className="studio-canvas-node-toolbar"
+      onMouseDown={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      {actions.map((action) => (
+        <button
+          key={action.key}
+          type="button"
+          className={`studio-canvas-node-toolbar__btn${action.disabled ? " is-disabled" : ""}${action.loading ? " is-loading" : ""}`}
+          disabled={action.disabled || action.loading}
+          title={action.label}
+          onClick={(e) => {
+            e.stopPropagation();
+            onAction(action.key);
+          }}
+        >
+          {action.icon}
+          <span>{action.label}</span>
+        </button>
+      ))}
+      {moreActions && moreActions.length > 0 && (
+        <div className="studio-canvas-node-toolbar__more" ref={moreRef}>
+          <button
+            type="button"
+            className={`studio-canvas-node-toolbar__btn studio-canvas-node-toolbar__more-trigger${moreOpen ? " is-open" : ""}`}
+            title="更多操作"
+            onClick={(e) => {
+              e.stopPropagation();
+              setMoreOpen((v) => !v);
+            }}
+          >
+            <ExpandOutlined />
+            <span>更多</span>
+          </button>
+          {moreOpen && (
+            <div className="studio-canvas-node-toolbar__dropdown">
+              {moreActions.map((action) => (
+                <button
+                  key={action.key}
+                  type="button"
+                  className={`studio-canvas-node-toolbar__dropdown-item${action.disabled ? " is-disabled" : ""}`}
+                  disabled={action.disabled}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setMoreOpen(false);
+                    onMoreAction?.(action.key);
+                  }}
+                >
+                  {action.icon}
+                  <span>{action.label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/canvas/canvasConstants.ts b/src/features/canvas/canvasConstants.ts
new file mode 100644
index 0000000..0c46451
--- /dev/null
+++ b/src/features/canvas/canvasConstants.ts
@@ -0,0 +1,203 @@
+import {
+  ENTERPRISE_DEFAULT_VIDEO_MODEL,
+  ENTERPRISE_DEFAULT_VIDEO_RESOLUTION,
+  ENTERPRISE_VIDEO_MODEL_OPTIONS,
+  ENTERPRISE_VIDEO_RESOLUTION_OPTIONS,
+} from "../../utils/enterpriseVideoPolicy";
+import type {
+  CanvasNodeKind,
+  CanvasNodeSize,
+  CanvasOption,
+  CanvasStylePickerTab,
+  CanvasVideoMode,
+} from "./canvasTypes";
+
+// --- Connector follow behavior ---
+export const connectorFollowRadius = 96;
+export const connectorFollowStrength = 1;
+export const connectorMaxFollowOffset = 62;
+export const connectorAnchorOutset = 9;
+
+// --- Interaction thresholds ---
+export const canvasNodeClickMoveThreshold = 5;
+
+// --- Auto-save timing ---
+export const canvasAutoSaveDebounceMs = 2_000;
+export const canvasAutoSaveIdleTimeoutMs = 800;
+
+// --- Viewport zoom limits ---
+export const canvasViewportMinZoom = 0.25;
+export const canvasViewportMaxZoom = 2.6;
+
+// --- Node sizes ---
+export const canvasNodeDefaultSizes: Record<CanvasNodeKind, CanvasNodeSize> = {
+  text: { width: 380, height: 260 },
+  image: { width: 460, height: 290 },
+  video: { width: 560, height: 315 },
+};
+
+export const canvasNodeMinSizes: Record<CanvasNodeKind, CanvasNodeSize> = {
+  text: { width: 300, height: 220 },
+  image: { width: 340, height: 220 },
+  video: { width: 420, height: 236 },
+};
+
+export const canvasNodeMaxSizes: Record<CanvasNodeKind, CanvasNodeSize> = {
+  text: { width: 720, height: 520 },
+  image: { width: 860, height: 620 },
+  video: { width: 960, height: 540 },
+};
+
+// --- Text model options ---
+export const textModelOptions = [
+  { id: "gemini-3.1-pro", label: "Gemini 3.1 Pro", description: "默认文本生成模型", speed: "20s" },
+  { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro", description: "通用文本生成模型", speed: "20s" },
+  { id: "gpt-4o", label: "GPT-4o", description: "通用文本生成模型", speed: "20s" },
+];
+export const defaultTextModelId = textModelOptions[0].id;
+
+// --- Image model options ---
+export const imageModelOptions: CanvasOption[] = [
+  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro · 0.20 积分" },
+  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
+  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
+  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
+];
+
+export const imageRatioOptions: CanvasOption[] = [
+  { value: "16:9", label: "16:9" },
+  { value: "9:16", label: "9:16" },
+  { value: "1:1", label: "1:1" },
+  { value: "4:3", label: "4:3" },
+  { value: "3:4", label: "3:4" },
+];
+
+export const imageFocusRatioOptions: CanvasOption[] = [
+  { value: "16:9", label: "16:9" },
+  { value: "3:2", label: "3:2" },
+  { value: "4:3", label: "4:3" },
+  { value: "1:1", label: "1:1" },
+  { value: "3:4", label: "3:4" },
+  { value: "2:3", label: "2:3" },
+  { value: "9:16", label: "9:16" },
+];
+
+export const imageQualityOptions: CanvasOption[] = [
+  { value: "1K", label: "1K" },
+  { value: "2K", label: "2K" },
+  { value: "4K", label: "4K" },
+];
+
+// --- Style picker ---
+export const canvasStylePickerTabs: Array<{ key: CanvasStylePickerTab; label: string }> = [
+  { key: "square", label: "广场" },
+  { key: "favorites", label: "我的收藏" },
+  { key: "recent", label: "最近使用" },
+];
+
+export const canvasStylePickerCategories = [
+  "推荐",
+  "摄影写真",
+  "电商营销",
+  "动漫游戏",
+  "风格插画",
+  "平面设计",
+  "建筑及室内设计",
+  "创意玩法",
+  "文创周边",
+  "小说推文",
+];
+
+// --- 4K capable image models ---
+export const image4kCapableModels = new Set([
+  "wan2.7-image-pro",
+  "nano-banana-2",
+  "nano-banana-pro",
+  "nano-banana-pro-4k",
+  "nano-banana-pro-4k-vip",
+  "gpt-image-2-vip",
+]);
+
+// --- Video model options ---
+export const videoModelOptions: CanvasOption[] = [
+  ...ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({
+    value: option.value,
+    label: option.label,
+  })),
+];
+
+// --- Video ratio & duration options ---
+export const videoRatioOptions: CanvasOption[] = [
+  { value: "21:9", label: "21:9" },
+  { value: "16:9", label: "16:9" },
+  { value: "4:3", label: "4:3" },
+  { value: "1:1", label: "1:1" },
+  { value: "3:4", label: "3:4" },
+  { value: "9:16", label: "9:16" },
+];
+
+export const videoDurationOptions: CanvasOption[] = [
+  { value: "4", label: "4s" },
+  { value: "5", label: "5s" },
+  { value: "6", label: "6s" },
+  { value: "7", label: "7s" },
+  { value: "8", label: "8s" },
+  { value: "9", label: "9s" },
+  { value: "10", label: "10s" },
+  { value: "11", label: "11s" },
+  { value: "12", label: "12s" },
+  { value: "13", label: "13s" },
+  { value: "14", label: "14s" },
+  { value: "15", label: "15s" },
+];
+
+// --- Video quality & resolution by model ---
+export const fallbackVideoQualityOptions: CanvasOption[] = [
+  ...ENTERPRISE_VIDEO_RESOLUTION_OPTIONS.map((option) => ({
+    value: option.value,
+    label: option.label,
+  })),
+];
+
+export const videoResolutionByModel: Record<string, CanvasOption[]> = {
+  ...Object.fromEntries(ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => [option.value, fallbackVideoQualityOptions])),
+};
+
+export const videoDefaultQualityByModel: Record<string, string> = {
+  ...Object.fromEntries(ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => [option.value, ENTERPRISE_DEFAULT_VIDEO_RESOLUTION])),
+};
+
+// --- Defaults ---
+export const defaultImageModel = "nano-banana-pro";
+export const defaultVideoModel = ENTERPRISE_DEFAULT_VIDEO_MODEL;
+export const canvasVideoModes: CanvasVideoMode[] = ["text2video", "img2video", "firstlast"];
+
+// --- Poll constants ---
+export const imageNodeTaskPollIntervalMs = 3000;
+export const imageNodeTaskPollAttempts = 180;
+export const videoNodeTaskPollIntervalMs = 5000;
+export const videoNodeTaskPollAttempts = 360;
+
+// --- Asset library ---
+export const assetTypePromptLabel: Record<import("../assets/localAssetStore").AssetLibraryCategory, string> = {
+  character: "角色主体",
+  scene: "环境场景",
+  prop: "关键道具",
+  video: "动态镜头",
+  image: "图片素材",
+  asset: "通用素材",
+  other: "其他素材",
+};
+
+export const assetLibraryCategories = [
+  { key: "character", label: "人物" },
+  { key: "scene", label: "场景" },
+  { key: "prop", label: "物品" },
+  { key: "video", label: "视频" },
+  { key: "image", label: "图片" },
+  { key: "asset", label: "素材" },
+  { key: "other", label: "其他" },
+] satisfies Array<{ key: import("../assets/localAssetStore").AssetLibraryCategory; label: string }>;
diff --git a/src/features/canvas/canvasTypes.ts b/src/features/canvas/canvasTypes.ts
new file mode 100644
index 0000000..7772e4b
--- /dev/null
+++ b/src/features/canvas/canvasTypes.ts
@@ -0,0 +1,338 @@
+import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
+import type {
+  WebCanvasWorkflow,
+  WebCanvasWorkflowAssetRef,
+  WebCanvasWorkflowTaskRef,
+  WebGenerationPreviewTask,
+  WebProjectSummary,
+  WebUserSession,
+} from "../../types";
+
+export type { CreatePreviewTaskInput, WebCanvasWorkflow, WebCanvasWorkflowAssetRef, WebCanvasWorkflowTaskRef, WebGenerationPreviewTask, WebProjectSummary, WebUserSession };
+
+export interface CanvasSaveWorkflowOptions {
+  silent?: boolean;
+  reason?: "manual" | "autosave" | "publish";
+}
+
+export interface CanvasPageProps {
+  workflow: WebCanvasWorkflow;
+  projectId?: string | null;
+  projects?: WebProjectSummary[];
+  projectsLoaded?: boolean;
+  onOpenCommunity: () => void;
+  onOpenProject?: (project: WebProjectSummary) => void;
+  onStartCreate?: () => void;
+  isAuthenticated: boolean;
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+  onSaveWorkflow?: (workflow: WebCanvasWorkflow, options?: CanvasSaveWorkflowOptions) => Promise<WebProjectSummary | void>;
+  onCreateTask?: (input: CreatePreviewTaskInput) => Promise<WebGenerationPreviewTask>;
+}
+
+export interface CanvasTextNode {
+  id: string;
+  title: string;
+  prompt: string;
+  content: string;
+  isEditingContent: boolean;
+  isComposerOpen: boolean;
+  selectedModelId: string;
+  position: {
+    x: number;
+    y: number;
+  };
+  size: CanvasNodeSize;
+}
+
+export interface CanvasTextNodeDrag {
+  nodeId: string;
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+  hasMoved: boolean;
+}
+
+export interface CanvasTextGenerationState {
+  status: "running" | "success" | "error";
+  message: string;
+}
+
+export interface CanvasImageNode {
+  id: string;
+  title: string;
+  prompt: string;
+  imageUrl: string;
+  model: string;
+  aspectRatio: string;
+  imageSize: string;
+  fileName?: string;
+  assetRef?: WebCanvasWorkflowAssetRef | null;
+  taskRef?: WebCanvasWorkflowTaskRef | null;
+  styleReference?: CanvasStyleReference;
+  focusSelection?: CanvasImageFocusSelection;
+  marking?: string;
+  sourceTextNodeId?: string;
+  sourceImageNodeId?: string;
+  position: {
+    x: number;
+    y: number;
+  };
+  size: CanvasNodeSize;
+}
+
+export interface CanvasImageReferenceItem {
+  nodeId: string;
+  title: string;
+  imageUrl: string;
+  fileName?: string;
+}
+
+export interface CanvasImageNodeDrag {
+  nodeId: string;
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+  hasMoved: boolean;
+}
+
+export interface CanvasImageGenerationState {
+  status: "submitting" | "running" | "success" | "error";
+  message: string;
+  progress?: number;
+}
+
+export interface CanvasImageFocusSelection {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ratio: string;
+}
+
+export interface CanvasImageFocusDrag {
+  nodeId: string;
+  startX: number;
+  startY: number;
+  rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
+}
+
+export interface CanvasStyleReference {
+  id: string;
+  title: string;
+  author: string;
+  category: string;
+  imageUrl: string;
+  prompt?: string;
+}
+
+export interface CanvasStyleCase extends CanvasStyleReference {
+  summary: string;
+  favoriteCount: number;
+  likeCount: number;
+  isFavorited: boolean;
+  keywords: string;
+}
+
+export type CanvasStylePickerTab = "square" | "favorites" | "recent";
+
+export interface CanvasVideoNode {
+  id: string;
+  title: string;
+  prompt: string;
+  videoUrl?: string;
+  model: string;
+  aspectRatio: string;
+  resolution: string;
+  duration: string;
+  videoMode: "text2video" | "img2video" | "firstlast";
+  assetRef?: WebCanvasWorkflowAssetRef | null;
+  taskRef?: WebCanvasWorkflowTaskRef | null;
+  marking?: string;
+  cameraMotion?: string;
+  sourceTextNodeId: string;
+  position: {
+    x: number;
+    y: number;
+  };
+  size: CanvasNodeSize;
+}
+
+export type CanvasVideoMode = CanvasVideoNode["videoMode"];
+
+export interface CanvasVideoNodeDrag {
+  nodeId: string;
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+  hasMoved: boolean;
+}
+
+export interface CanvasVideoGenerationState {
+  status: "submitting" | "running" | "success" | "error";
+  message: string;
+  progress?: number;
+}
+
+export type CanvasNodeKind = "text" | "image" | "video";
+export type CanvasNodeSide = "left" | "right";
+export type CanvasNodePortSlot = "center";
+
+export type CanvasCopiedNode =
+  | { kind: "text"; node: CanvasTextNode }
+  | { kind: "image"; node: CanvasImageNode }
+  | { kind: "video"; node: CanvasVideoNode };
+
+export interface CanvasNodeSize {
+  width: number;
+  height: number;
+}
+
+export interface CanvasSelectedNode {
+  kind: CanvasNodeKind;
+  id: string;
+}
+
+export interface CanvasNodePackage {
+  id: string;
+  title: string;
+  nodeIds: CanvasSelectedNode[];
+  collapsed?: boolean;
+  collapsedBounds?: CanvasNodeBounds;
+  updatedAt?: string;
+}
+
+export interface CanvasNodeBounds {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface CanvasNodePackageDrag {
+  packageId: string;
+  collapsed: boolean;
+  startX: number;
+  startY: number;
+  hasMoved: boolean;
+  textOrigins: Record<string, CanvasPoint>;
+  imageOrigins: Record<string, CanvasPoint>;
+  videoOrigins: Record<string, CanvasPoint>;
+  collapsedBounds?: CanvasNodeBounds;
+}
+
+export interface CanvasNodeResizeDrag {
+  kind: CanvasNodeKind;
+  nodeId: string;
+  startX: number;
+  startY: number;
+  originWidth: number;
+  originHeight: number;
+}
+
+export interface CanvasSelectionDrag {
+  start: CanvasPoint;
+  current: CanvasPoint;
+  hasMoved: boolean;
+}
+
+export interface CanvasViewport {
+  x: number;
+  y: number;
+  zoom: number;
+}
+
+export interface CanvasPanDrag {
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+}
+
+export interface CanvasAlignGuide {
+  axis: "x" | "y";
+  position: number;
+}
+
+export interface CanvasNodePort {
+  nodeId: string;
+  kind: CanvasNodeKind;
+  side: CanvasNodeSide;
+  slot: CanvasNodePortSlot;
+}
+
+export interface CanvasManualLink {
+  id: string;
+  from: CanvasNodePort;
+  to: CanvasNodePort;
+}
+
+// --- Canvas @-mention types ---
+
+export interface CanvasPromptMentionOption {
+  token: string;       // e.g. "@图片1"
+  label: string;       // e.g. "图片1"
+  kind: "image" | "video" | "text";
+  nodeId: string;
+  nodeTitle: string;
+  previewUrl?: string;
+  searchText: string;
+}
+
+export interface CanvasPromptMentionState {
+  open: boolean;
+  query: string;
+  start: number;
+  caret: number;
+  activeIndex: number;
+}
+
+export interface CanvasAssetSaveSource {
+  kind: "text" | "image" | "video";
+  name: string;
+  description: string;
+  url?: string;
+  imageUrl?: string;
+}
+
+export interface CanvasProjectSaveState {
+  status: "idle" | "saving" | "success" | "error";
+  message: string;
+}
+
+export interface CanvasFloatingMenuPosition {
+  left: number;
+  top: number;
+  originLeft: number;
+  originTop: number;
+}
+
+export interface CanvasConnectorFollowOffset {
+  x: number;
+  y: number;
+}
+
+export interface CanvasConnectorDrag {
+  port: CanvasNodePort;
+  startX: number;
+  startY: number;
+  hasMoved: boolean;
+}
+
+export interface CanvasPoint {
+  x: number;
+  y: number;
+}
+
+export interface CanvasOption {
+  value: string;
+  label: string;
+}
diff --git a/src/features/canvas/canvasUtils.ts b/src/features/canvas/canvasUtils.ts
new file mode 100644
index 0000000..2e1d004
--- /dev/null
+++ b/src/features/canvas/canvasUtils.ts
@@ -0,0 +1,498 @@
+import type { CSSProperties } from "react";
+import { aiGenerationClient, type AiTaskStatus } from "../../api/aiGenerationClient";
+import type { ServerCommunityCase } from "../../api/communityClient";
+import { waitForTask } from "../../api/taskSubscription";
+import type { WebCanvasWorkflow } from "../../types";
+import type { AssetLibraryCategory } from "../assets/localAssetStore";
+import { communityCaseToPromptCase, getCommunityCaseCover } from "../community/communityCaseUtils";
+import { toHappyHorseDisplayModel } from "../../utils/happyHorseRouting";
+import { toViduDisplayModel } from "../../utils/viduRouting";
+import { toPixverseDisplayModel } from "../../utils/pixverseRouting";
+import type {
+  CanvasImageFocusSelection,
+  CanvasNodeKind,
+  CanvasNodePort,
+  CanvasNodeSide,
+  CanvasNodeSize,
+  CanvasOption,
+  CanvasPoint,
+  CanvasSelectedNode,
+  CanvasStyleCase,
+  CanvasStyleReference,
+  CanvasVideoMode,
+} from "./canvasTypes";
+import {
+  assetLibraryCategories,
+  assetTypePromptLabel,
+  canvasNodeDefaultSizes,
+  canvasNodeMaxSizes,
+  canvasNodeMinSizes,
+  canvasVideoModes,
+  canvasViewportMaxZoom,
+  canvasViewportMinZoom,
+  defaultImageModel,
+  defaultVideoModel,
+  imageModelOptions,
+  videoModelOptions,
+} from "./canvasConstants";
+
+// ─── Utility Functions ─────────────────────────────────────────────────────────
+
+export function getCanvasNodeSideDirection(side: CanvasNodeSide) {
+  return side === "right" ? 1 : -1;
+}
+
+export function normalizeCanvasLinkPorts(first: CanvasNodePort, second: CanvasNodePort) {
+  if (first.side === second.side) return null;
+  if (first.kind === second.kind && first.nodeId === second.nodeId) return null;
+
+  return first.side === "right"
+    ? { from: first, to: second }
+    : { from: second, to: first };
+}
+
+export function getCanvasPortIdentity(port: CanvasNodePort) {
+  return `${port.kind}:${port.nodeId}:${port.side}:${port.slot}`;
+}
+
+export function getCanvasLinkIdentity(from: CanvasNodePort, to: CanvasNodePort) {
+  return `${getCanvasPortIdentity(from)}->${getCanvasPortIdentity(to)}`;
+}
+
+export function moveCanvasNodesForPackageDrag<T extends { id: string; position: CanvasPoint }>(
+  currentNodes: T[],
+  originPositions: Record<string, CanvasPoint>,
+  delta: CanvasPoint
+): T[] {
+  return currentNodes.map((node) => {
+    const origin = originPositions[node.id];
+    if (!origin) return node;
+    return {
+      ...node,
+      position: {
+        x: origin.x + delta.x,
+        y: origin.y + delta.y,
+      },
+    };
+  });
+}
+
+export function createCanvasNodeSize(kind: CanvasNodeKind) {
+  return { ...canvasNodeDefaultSizes[kind] };
+}
+
+export function clampCanvasNodeSize(kind: CanvasNodeKind, width: number, height: number): CanvasNodeSize {
+  const minSize = canvasNodeMinSizes[kind];
+  const maxSize = canvasNodeMaxSizes[kind];
+  return {
+    width: Math.min(maxSize.width, Math.max(minSize.width, Math.round(width))),
+    height: Math.min(maxSize.height, Math.max(minSize.height, Math.round(height))),
+  };
+}
+
+export function getCanvasSelectionKey(node: CanvasSelectedNode) {
+  return `${node.kind}:${node.id}`;
+}
+
+export function normalizeCanvasSelectionRect(start: CanvasPoint, current: CanvasPoint) {
+  const left = Math.min(start.x, current.x);
+  const top = Math.min(start.y, current.y);
+  const width = Math.abs(current.x - start.x);
+  const height = Math.abs(current.y - start.y);
+  return { left, top, width, height };
+}
+
+export function doCanvasRectsIntersect(
+  first: { left: number; top: number; width: number; height: number },
+  second: { left: number; top: number; width: number; height: number }
+) {
+  return (
+    first.left <= second.left + second.width &&
+    first.left + first.width >= second.left &&
+    first.top <= second.top + second.height &&
+    first.top + first.height >= second.top
+  );
+}
+
+export function clampCanvasViewportZoom(zoom: number) {
+  return Math.min(canvasViewportMaxZoom, Math.max(canvasViewportMinZoom, zoom));
+}
+
+export function getOptionLabel(options: CanvasOption[], value: string) {
+  return options.find((option) => option.value === value)?.label || value;
+}
+
+import {
+  getImageQualityOptions,
+  getDefaultImageQuality,
+  getVideoQualityOptions,
+  getDefaultVideoQuality,
+  getVideoQualityLabel,
+} from "../../utils/modelOptions";
+
+export {
+  getImageQualityOptions,
+  getDefaultImageQuality,
+  getVideoQualityOptions,
+  getDefaultVideoQuality,
+  getVideoQualityLabel,
+};
+
+export function hasCanvasOptionValue(options: CanvasOption[], value: string | undefined) {
+  return Boolean(value && options.some((option) => option.value === value));
+}
+
+export function getWorkflowNodeMetadataString(
+  node: WebCanvasWorkflow["nodes"][number],
+  key: string,
+  fallback = "",
+) {
+  const params = (node as unknown as { params?: Record<string, unknown> }).params;
+  const paramValue = params?.[key];
+  if (typeof paramValue === "string" && paramValue.trim()) return paramValue.trim();
+  const metadata = (node as unknown as { metadata?: Record<string, unknown> }).metadata;
+  const value = metadata?.[key];
+  return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+
+export function getWorkflowNodeStringField(
+  node: WebCanvasWorkflow["nodes"][number],
+  key: string,
+): string | undefined {
+  const params = (node as unknown as { params?: Record<string, unknown> }).params;
+  const paramValue = params?.[key];
+  if (typeof paramValue === "string") return paramValue;
+  const metadata = (node as unknown as { metadata?: Record<string, unknown> }).metadata;
+  const value = metadata?.[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+export function isLikelyImageFileName(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return /\.(png|jpe?g|webp)(\?.*)?$/i.test(trimmed);
+}
+
+export function getWorkflowImageNodePrompt(node: WebCanvasWorkflow["nodes"][number]) {
+  const storedPrompt = getWorkflowNodeStringField(node, "prompt");
+  if (storedPrompt !== undefined) return storedPrompt;
+  const detail = node.detail || "";
+  return isLikelyImageFileName(detail) ? "" : detail;
+}
+
+export function getWorkflowImageNodeFileName(node: WebCanvasWorkflow["nodes"][number], index: number) {
+  const storedFileName = getWorkflowNodeStringField(node, "fileName");
+  if (storedFileName?.trim()) return storedFileName.trim();
+  if (isLikelyImageFileName(node.detail || "")) return node.detail.trim();
+  return node.label || `图片节点 ${index + 1}`;
+}
+
+export function resolveWorkflowImageModel(node: WebCanvasWorkflow["nodes"][number], workflowModel: string) {
+  const storedModel = getWorkflowNodeMetadataString(node, "model");
+  if (hasCanvasOptionValue(imageModelOptions, storedModel)) return storedModel;
+  if (hasCanvasOptionValue(imageModelOptions, workflowModel)) return workflowModel;
+  return defaultImageModel;
+}
+
+export function resolveWorkflowVideoModel(node: WebCanvasWorkflow["nodes"][number], workflowModel: string) {
+  const raw = getWorkflowNodeMetadataString(node, "model");
+  const storedModel = toPixverseDisplayModel(toViduDisplayModel(toHappyHorseDisplayModel(raw)));
+  if (hasCanvasOptionValue(videoModelOptions, storedModel)) return storedModel;
+  return defaultVideoModel;
+}
+
+export function resolveWorkflowRatio(
+  node: WebCanvasWorkflow["nodes"][number],
+  workflowRatio: string,
+  options: CanvasOption[],
+  fallback: string,
+) {
+  const storedRatio = getWorkflowNodeMetadataString(node, "aspectRatio");
+  if (hasCanvasOptionValue(options, storedRatio)) return storedRatio;
+  if (hasCanvasOptionValue(options, workflowRatio)) return workflowRatio;
+  return fallback;
+}
+
+export function resolveWorkflowVideoMode(node: WebCanvasWorkflow["nodes"][number]) {
+  const storedMode = getWorkflowNodeMetadataString(node, "videoMode");
+  return canvasVideoModes.includes(storedMode as CanvasVideoMode) ? (storedMode as CanvasVideoMode) : "text2video";
+}
+
+export function resolveImageQuality(model: string, imageSize: string) {
+  const options = getImageQualityOptions(model || defaultImageModel);
+  return options.some((option) => option.value === imageSize)
+    ? imageSize
+    : getDefaultImageQuality(model || defaultImageModel);
+}
+
+export function resolveVideoQuality(model: string, resolution: string) {
+  const options = getVideoQualityOptions(model || defaultVideoModel);
+  return options.some((option) => option.value === resolution)
+    ? resolution
+    : getDefaultVideoQuality(model || defaultVideoModel);
+}
+
+export function delay(ms: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+}
+
+export function blobToDataUrl(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read canvas image"));
+    };
+    reader.onerror = () => reject(reader.error || new Error("Unable to read canvas image"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+export async function waitForImageTaskResult(taskId: string, onStatus?: (status: AiTaskStatus) => void) {
+  const resultUrl = await waitForTask(taskId, {
+    timeoutMs: 10 * 60 * 1000,
+    onProgress: (e) => {
+      onStatus?.({ taskId, status: e.status, progress: e.progress, resultUrl: e.resultUrl ?? undefined, error: e.error ?? undefined } as AiTaskStatus);
+    },
+  });
+  if (!resultUrl) throw new Error("生成任务已完成，但服务器没有返回结果地址，请稍后重试");
+  return resultUrl;
+}
+
+export async function waitForVideoTaskResult(taskId: string, onStatus?: (status: AiTaskStatus) => void) {
+  const resultUrl = await waitForTask(taskId, {
+    timeoutMs: 30 * 60 * 1000,
+    onProgress: (e) => {
+      onStatus?.({ taskId, status: e.status, progress: e.progress, resultUrl: e.resultUrl ?? undefined, error: e.error ?? undefined } as AiTaskStatus);
+    },
+  });
+  if (!resultUrl) throw new Error("视频生成任务已完成，但服务器没有返回结果地址，请稍后重试");
+  return resultUrl;
+}
+
+export function normalizeCanvasGenerationProgress(state?: { status: "submitting" | "running" | "success" | "error"; progress?: number }) {
+  if (!state) return 0;
+  if (state.status === "success") return 100;
+  if (state.status === "error") return 0;
+  const serverProgress = Number(state.progress || 0);
+  if (state.status === "submitting") return Math.max(6, Math.min(18, serverProgress || 8));
+  return Math.max(18, Math.min(96, serverProgress || 36));
+}
+
+export function canvasGenerationProgressStyle(progress: number) {
+  return {
+    "--canvas-generation-progress": `${Math.max(0, Math.min(100, progress)) * 3.6}deg`,
+  } as CSSProperties;
+}
+
+export function buildCopyTitle(title: string) {
+  return title.includes("副本") ? title : `${title} 副本`;
+}
+
+export function buildReversePromptFromAsset(asset: { type: AssetLibraryCategory; name: string; description: string }) {
+  return `AI 反推提示词：${assetTypePromptLabel[asset.type]}「${asset.name}」，${asset.description}，保留主体轮廓、材质细节、色彩氛围和镜头语言，电影感构图，高质量细节。`;
+}
+
+export function positionFloatingMenu(clientX: number, clientY: number, width: number, height: number, offset = 0) {
+  const edgeGap = 8;
+  const canOpenRight = clientX + offset + width + edgeGap <= window.innerWidth;
+  const canOpenBelow = clientY + offset + height + edgeGap <= window.innerHeight;
+
+  return {
+    left: Math.max(edgeGap, canOpenRight ? clientX + offset : clientX - width - offset),
+    top: Math.max(edgeGap, canOpenBelow ? clientY + offset : clientY - height - offset),
+  };
+}
+
+export function toCanvasStyleString(value: unknown, fallback = ""): string {
+  if (typeof value === "string") return value.trim() || fallback;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return fallback;
+}
+
+export function buildCanvasStyleKeywords(item: Omit<CanvasStyleCase, "keywords">, tags: string[] = []) {
+  return [
+    item.title,
+    item.author,
+    item.category,
+    item.summary,
+    item.prompt || "",
+    ...tags,
+  ]
+    .join(" ")
+    .toLowerCase();
+}
+
+export function communityCaseToCanvasStyleCase(item: ServerCommunityCase): CanvasStyleCase | null {
+  const promptCase = communityCaseToPromptCase(item);
+  const imageUrl = promptCase?.imageUrl || getCommunityCaseCover(item);
+  if (!imageUrl) return null;
+
+  const metadata = item.metadata || {};
+  const title = promptCase?.title || item.title;
+  const author = promptCase?.author || item.username || "OmniAI";
+  const category =
+    promptCase?.category ||
+    toCanvasStyleString(metadata.category ?? metadata.styleCategory) ||
+    item.tags.find(Boolean) ||
+    "社区风格";
+  const prompt =
+    promptCase?.prompt ||
+    toCanvasStyleString(metadata.prompt ?? metadata.inputPrompt ?? metadata.descriptionPrompt, item.description || "");
+  const summary = promptCase?.summary || item.description || prompt || "来自社区广场的风格参考";
+  const baseCase: Omit<CanvasStyleCase, "keywords"> = {
+    id: promptCase?.id || `server-style-case-${item.id}`,
+    title,
+    author,
+    category,
+    imageUrl,
+    prompt,
+    summary,
+    favoriteCount: item.favoriteCount,
+    likeCount: item.likeCount,
+    isFavorited: item.isFavorited,
+  };
+
+  return {
+    ...baseCase,
+    keywords: buildCanvasStyleKeywords(baseCase, item.tags),
+  };
+}
+
+export function createStyleReferenceFromCase(item: CanvasStyleCase): CanvasStyleReference {
+  return {
+    id: item.id,
+    title: item.title,
+    author: item.author,
+    category: item.category,
+    imageUrl: item.imageUrl,
+    prompt: item.prompt,
+  };
+}
+
+export function clampCanvasPercent(value: number) {
+  return Math.min(100, Math.max(0, value));
+}
+
+export function parseCanvasRatio(value: string): number | null {
+  const [width, height] = value.split(":").map(Number);
+  return width > 0 && height > 0 ? width / height : null;
+}
+
+export function normalizeImageFocusSelectionFromAnchor(
+  start: { x: number; y: number },
+  end: { x: number; y: number },
+  ratio: string,
+  containerRatio: number,
+): CanvasImageFocusSelection {
+  const targetRatio = parseCanvasRatio(ratio);
+  const directionX = end.x >= start.x ? 1 : -1;
+  const directionY = end.y >= start.y ? 1 : -1;
+  let width = Math.abs(end.x - start.x);
+  let height = Math.abs(end.y - start.y);
+
+  if (targetRatio && Number.isFinite(containerRatio) && containerRatio > 0 && width > 0 && height > 0) {
+    const percentRatio = targetRatio / containerRatio;
+    if (width / height > percentRatio) {
+      width = height * percentRatio;
+    } else {
+      height = width / percentRatio;
+    }
+  }
+
+  const maxWidth = directionX > 0 ? 100 - start.x : start.x;
+  const maxHeight = directionY > 0 ? 100 - start.y : start.y;
+  width = Math.min(width, maxWidth);
+  height = Math.min(height, maxHeight);
+
+  if (targetRatio && Number.isFinite(containerRatio) && containerRatio > 0 && width > 0 && height > 0) {
+    const percentRatio = targetRatio / containerRatio;
+    if (width / height > percentRatio) {
+      width = height * percentRatio;
+    } else {
+      height = width / percentRatio;
+    }
+  }
+
+  return {
+    x: clampCanvasPercent(directionX > 0 ? start.x : start.x - width),
+    y: clampCanvasPercent(directionY > 0 ? start.y : start.y - height),
+    width: clampCanvasPercent(width),
+    height: clampCanvasPercent(height),
+    ratio,
+  };
+}
+
+export function applyImageFocusRatioFromTopLeft(
+  selection: CanvasImageFocusSelection,
+  ratio: string,
+  containerRatio: number,
+): CanvasImageFocusSelection {
+  const targetRatio = parseCanvasRatio(ratio);
+  if (!targetRatio || !Number.isFinite(containerRatio) || containerRatio <= 0) {
+    return { ...selection, ratio };
+  }
+
+  const percentRatio = targetRatio / containerRatio;
+  let width = Math.max(4, selection.width);
+  let height = Math.max(4, selection.height);
+  if (width / height > percentRatio) {
+    width = height * percentRatio;
+  } else {
+    height = width / percentRatio;
+  }
+
+  const maxWidth = Math.max(4, 100 - selection.x);
+  const maxHeight = Math.max(4, 100 - selection.y);
+  if (width > maxWidth) {
+    width = maxWidth;
+    height = width / percentRatio;
+  }
+  if (height > maxHeight) {
+    height = maxHeight;
+    width = height * percentRatio;
+  }
+
+  return {
+    ...selection,
+    width: clampCanvasPercent(width),
+    height: clampCanvasPercent(height),
+    ratio,
+  };
+}
+
+export function getWorkflowNodeStyleReference(node: WebCanvasWorkflow["nodes"][number]): CanvasStyleReference | undefined {
+  const metadata = (node as unknown as { metadata?: Record<string, unknown> }).metadata;
+  const rawStyle = metadata?.styleReference;
+  if (!rawStyle || typeof rawStyle !== "object" || Array.isArray(rawStyle)) return undefined;
+  const style = rawStyle as Record<string, unknown>;
+  const imageUrl = toCanvasStyleString(style.imageUrl);
+  const title = toCanvasStyleString(style.title);
+  if (!imageUrl || !title) return undefined;
+  return {
+    id: toCanvasStyleString(style.id, `workflow-style-${node.id}`),
+    title,
+    author: toCanvasStyleString(style.author, "OmniAI"),
+    category: toCanvasStyleString(style.category, "社区风格"),
+    imageUrl,
+    prompt: toCanvasStyleString(style.prompt),
+  };
+}
+
+export function getWorkflowNodeFocusSelection(node: WebCanvasWorkflow["nodes"][number]): CanvasImageFocusSelection | undefined {
+  const metadata = (node as unknown as { metadata?: Record<string, unknown> }).metadata;
+  const rawSelection = metadata?.focusSelection;
+  if (!rawSelection || typeof rawSelection !== "object" || Array.isArray(rawSelection)) return undefined;
+  const selection = rawSelection as Record<string, unknown>;
+  const width = Number(selection.width);
+  const height = Number(selection.height);
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return undefined;
+  return {
+    x: clampCanvasPercent(Number(selection.x) || 0),
+    y: clampCanvasPercent(Number(selection.y) || 0),
+    width: clampCanvasPercent(width),
+    height: clampCanvasPercent(height),
+    ratio: toCanvasStyleString(selection.ratio, "16:9"),
+  };
+}
\ No newline at end of file
diff --git a/src/features/canvas/canvasWorkflowDeserialize.ts b/src/features/canvas/canvasWorkflowDeserialize.ts
new file mode 100644
index 0000000..c4cdec8
--- /dev/null
+++ b/src/features/canvas/canvasWorkflowDeserialize.ts
@@ -0,0 +1,221 @@
+import type { WebCanvasWorkflow, WebCanvasWorkflowNodePackage } from "../../types";
+import type { AssetLibraryCategory } from "../assets/localAssetStore";
+import type {
+  CanvasImageNode,
+  CanvasManualLink,
+  CanvasNodeKind,
+  CanvasNodePackage,
+  CanvasNodeSize,
+  CanvasSelectedNode,
+  CanvasTextNode,
+  CanvasVideoNode,
+} from "./canvasTypes";
+import {
+  assetLibraryCategories,
+  canvasNodeDefaultSizes,
+  defaultTextModelId,
+  imageRatioOptions,
+  videoRatioOptions,
+} from "./canvasConstants";
+import {
+  clampCanvasNodeSize,
+  getCanvasSelectionKey,
+  getWorkflowImageNodeFileName,
+  getWorkflowImageNodePrompt,
+  getWorkflowNodeFocusSelection,
+  getWorkflowNodeMetadataString,
+  getWorkflowNodeStyleReference,
+  resolveImageQuality,
+  resolveVideoQuality,
+  resolveWorkflowImageModel,
+  resolveWorkflowRatio,
+  resolveWorkflowVideoMode,
+  resolveWorkflowVideoModel,
+} from "./canvasUtils";
+
+export function resolveAssetCategory(value: string): AssetLibraryCategory {
+  return assetLibraryCategories.find((category) => category.key === value || category.label === value)?.key || "prop";
+}
+
+export function getWorkflowNodeCanvasKind(node: WebCanvasWorkflow["nodes"][number]): CanvasNodeKind {
+  if (node.kind === "image") return "image";
+  if (node.kind === "video") return "video";
+  return "text";
+}
+
+export function getWorkflowNodeSize(node: WebCanvasWorkflow["nodes"][number], kind: CanvasNodeKind): CanvasNodeSize {
+  return clampCanvasNodeSize(
+    kind,
+    Number(node.size?.width) || canvasNodeDefaultSizes[kind].width,
+    Number(node.size?.height) || canvasNodeDefaultSizes[kind].height,
+  );
+}
+
+export function createTextNodesFromWorkflow(workflow: WebCanvasWorkflow): CanvasTextNode[] {
+  return workflow.nodes
+    .filter((node) => getWorkflowNodeCanvasKind(node) === "text")
+    .map((node, index) => ({
+      id: node.id || `workflow-text-${index + 1}`,
+      title: node.label || `文本节点 ${index + 1}`,
+      prompt: node.kind === "prompt" ? node.detail : "",
+      content: node.kind === "prompt" ? "" : node.detail,
+      isEditingContent: false,
+      isComposerOpen: node.kind === "prompt" && !node.detail,
+      selectedModelId: defaultTextModelId,
+      position: { ...node.position },
+      size: getWorkflowNodeSize(node, "text"),
+    }));
+}
+
+export function createImageNodesFromWorkflow(workflow: WebCanvasWorkflow): CanvasImageNode[] {
+  return workflow.nodes
+    .filter((node) => getWorkflowNodeCanvasKind(node) === "image")
+    .map((node, index) => {
+      const model = resolveWorkflowImageModel(node, workflow.settings.model);
+      const aspectRatio = resolveWorkflowRatio(node, workflow.settings.ratio, imageRatioOptions, "16:9");
+      const imageSize = resolveImageQuality(
+        model,
+        getWorkflowNodeMetadataString(node, "imageSize", workflow.settings.resolution || "2K"),
+      );
+      return {
+      id: node.id || `workflow-image-${index + 1}`,
+      title: node.label || `图片节点 ${index + 1}`,
+      prompt: getWorkflowImageNodePrompt(node),
+      imageUrl: node.assetRef?.url || node.previewUrl || "",
+      model,
+      aspectRatio,
+      imageSize,
+      assetRef: node.assetRef || null,
+      taskRef: node.taskRef || null,
+      styleReference: getWorkflowNodeStyleReference(node),
+      focusSelection: getWorkflowNodeFocusSelection(node),
+      marking: getWorkflowNodeMetadataString(node, "marking", ""),
+      fileName: getWorkflowImageNodeFileName(node, index),
+      position: { ...node.position },
+      size: getWorkflowNodeSize(node, "image"),
+      };
+    });
+}
+
+export function createVideoNodesFromWorkflow(workflow: WebCanvasWorkflow): CanvasVideoNode[] {
+  return workflow.nodes
+    .filter((node) => getWorkflowNodeCanvasKind(node) === "video")
+    .map((node, index) => {
+      const model = resolveWorkflowVideoModel(node, workflow.settings.model);
+      const aspectRatio = resolveWorkflowRatio(node, workflow.settings.ratio, videoRatioOptions, "16:9");
+      const resolution = resolveVideoQuality(
+        model,
+        getWorkflowNodeMetadataString(node, "resolution", workflow.settings.resolution || "720p"),
+      );
+      return {
+      id: node.id || `workflow-video-${index + 1}`,
+      title: node.label || `视频节点 ${index + 1}`,
+      prompt: node.detail || "",
+      videoUrl: node.assetRef?.url || node.previewUrl || "",
+      model,
+      aspectRatio,
+      resolution,
+      duration: getWorkflowNodeMetadataString(node, "duration", String(workflow.settings.duration || "4")).replace(/s$/i, ""),
+      videoMode: resolveWorkflowVideoMode(node),
+      marking: getWorkflowNodeMetadataString(node, "marking", ""),
+      cameraMotion: getWorkflowNodeMetadataString(node, "cameraMotion", ""),
+      assetRef: node.assetRef || null,
+      taskRef: node.taskRef || null,
+      sourceTextNodeId: "",
+      position: { ...node.position },
+      size: getWorkflowNodeSize(node, "video"),
+      };
+    });
+}
+
+export function createManualLinksFromWorkflow(workflow: WebCanvasWorkflow): CanvasManualLink[] {
+  const kindById = new Map<string, CanvasNodeKind>(
+    workflow.nodes.map((node) => [node.id, getWorkflowNodeCanvasKind(node)]),
+  );
+
+  return workflow.edges.flatMap((edge, index) => {
+    const sourceKind = kindById.get(edge.source);
+    const targetKind = kindById.get(edge.target);
+    if (!sourceKind || !targetKind || edge.source === edge.target) return [];
+    return [
+      {
+        id: edge.id || `workflow-link-${index + 1}`,
+        from: { kind: sourceKind, nodeId: edge.source, side: "right", slot: "center" },
+        to: { kind: targetKind, nodeId: edge.target, side: "left", slot: "center" },
+      },
+    ];
+  });
+}
+
+export function createNodePackagesFromWorkflow(workflow: WebCanvasWorkflow): CanvasNodePackage[] {
+  const nodeKindById = new Map<string, CanvasNodeKind>(
+    workflow.nodes.map((node) => [node.id, getWorkflowNodeCanvasKind(node)]),
+  );
+
+  return (workflow.packages || []).flatMap((nodePackage, index) => {
+    const uniqueNodeKeys = new Set<string>();
+    const packageNodeIds = Array.isArray(nodePackage.nodeIds) ? nodePackage.nodeIds : [];
+    const nodeIds = packageNodeIds.reduce<CanvasSelectedNode[]>((items, node) => {
+      const kind = node.kind || nodeKindById.get(node.id);
+      if ((kind !== "text" && kind !== "image" && kind !== "video") || !nodeKindById.has(node.id)) return items;
+      const key = getCanvasSelectionKey({ kind, id: node.id });
+      if (uniqueNodeKeys.has(key)) return items;
+      uniqueNodeKeys.add(key);
+      items.push({ kind, id: node.id });
+      return items;
+    }, []);
+    if (nodeIds.length < 2) return [];
+
+    return [
+      {
+        id: nodePackage.id || `canvas-node-package-${index + 1}`,
+        title: nodePackage.title || `打包节点 ${index + 1}`,
+        nodeIds,
+        collapsed: nodePackage.collapsed === true,
+        collapsedBounds: nodePackage.collapsedBounds || undefined,
+        updatedAt: nodePackage.updatedAt,
+      },
+    ];
+  });
+}
+
+export function createWorkflowPackagesFromCanvasPackages(
+  nodePackages: CanvasNodePackage[],
+): WebCanvasWorkflowNodePackage[] {
+  return nodePackages.map((nodePackage) => ({
+    id: nodePackage.id,
+    title: nodePackage.title,
+    nodeIds: nodePackage.nodeIds.map((node) => ({ kind: node.kind, id: node.id })),
+    collapsed: nodePackage.collapsed === true,
+    collapsedBounds: nodePackage.collapsedBounds || null,
+    updatedAt: nodePackage.updatedAt,
+  }));
+}
+
+export function formatCanvasProjectUpdatedAt(updatedAt: string) {
+  const date = new Date(updatedAt);
+  if (Number.isNaN(date.getTime())) return "最近更新";
+
+  const diffMinutes = Math.max(0, Math.floor((Date.now() - date.getTime()) / 60000));
+  if (diffMinutes < 1) return "刚刚更新";
+  if (diffMinutes < 60) return `${diffMinutes} 分钟前`;
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours} 小时前`;
+
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays} 天前`;
+
+  return date.toLocaleDateString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+export function formatCanvasVideoTime(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return "0:00";
+  const totalSeconds = Math.floor(value);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
diff --git a/src/features/canvas/canvasWorkflowExecution.ts b/src/features/canvas/canvasWorkflowExecution.ts
new file mode 100644
index 0000000..5f40bab
--- /dev/null
+++ b/src/features/canvas/canvasWorkflowExecution.ts
@@ -0,0 +1,128 @@
+import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
+import type { WebCanvasWorkflow, WebCanvasWorkflowNode, WebCanvasWorkflowTaskRef } from "../../types";
+import { toHappyHorseDisplayModel } from "../../utils/happyHorseRouting";
+import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
+import { normalizeCanvasWorkflowSchema } from "./canvasWorkflowSchema";
+
+export interface CanvasExecutionImageReference {
+  nodeId: string;
+  title: string;
+  url: string;
+  ossKey?: string | null;
+}
+
+export interface CanvasNodeExecutionContext {
+  node: WebCanvasWorkflowNode;
+  prompt: string;
+  imageReferences: CanvasExecutionImageReference[];
+  upstreamTaskRefs: WebCanvasWorkflowTaskRef[];
+}
+
+function getNodeText(node: WebCanvasWorkflowNode | undefined): string {
+  if (!node) return "";
+  return String(node.detail || node.params?.prompt || "").trim();
+}
+
+function getNodeAssetUrl(node: WebCanvasWorkflowNode | undefined): string {
+  return String(node?.assetRef?.url || node?.previewUrl || "").trim();
+}
+
+function incomingEdges(workflow: WebCanvasWorkflow, nodeId: string) {
+  return workflow.edges.filter((edge) => edge.target === nodeId);
+}
+
+export function resolveCanvasNodeExecutionContext(
+  workflowInput: WebCanvasWorkflow,
+  nodeId: string,
+): CanvasNodeExecutionContext {
+  const workflow = normalizeCanvasWorkflowSchema(workflowInput);
+  const nodeById = new Map(workflow.nodes.map((node) => [node.id, node]));
+  const node = nodeById.get(nodeId);
+  if (!node) throw new Error(`Canvas node not found: ${nodeId}`);
+
+  const imageReferences: CanvasExecutionImageReference[] = [];
+  const upstreamPrompts: string[] = [];
+  const upstreamTaskRefs: WebCanvasWorkflowTaskRef[] = [];
+  const seenImages = new Set<string>();
+
+  incomingEdges(workflow, nodeId).forEach((edge) => {
+    const sourceNode = nodeById.get(edge.source);
+    if (!sourceNode) return;
+    if (sourceNode.taskRef) upstreamTaskRefs.push(sourceNode.taskRef);
+    const sourceKind = sourceNode.kind;
+    if (sourceKind === "image") {
+      const url = getNodeAssetUrl(sourceNode);
+      if (url && !seenImages.has(`${sourceNode.id}:${url}`)) {
+        seenImages.add(`${sourceNode.id}:${url}`);
+        imageReferences.push({
+          nodeId: sourceNode.id,
+          title: sourceNode.label,
+          url,
+          ossKey: sourceNode.assetRef?.ossKey || null,
+        });
+      }
+      return;
+    }
+    const text = getNodeText(sourceNode);
+    if (text) upstreamPrompts.push(text);
+  });
+
+  return {
+    node,
+    prompt: getNodeText(node) || upstreamPrompts.join("\n"),
+    imageReferences,
+    upstreamTaskRefs,
+  };
+}
+
+function normalizeDuration(value: unknown, fallback = 5): number {
+  const parsed = Number(String(value || "").replace(/s$/i, ""));
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+export function hasRunningCanvasTaskRef(node: WebCanvasWorkflowNode): boolean {
+  const status = node.taskRef?.status;
+  return status === "queued" || status === "pending" || status === "running";
+}
+
+export function buildCanvasVideoTaskInput(workflow: WebCanvasWorkflow, nodeId: string): CreatePreviewTaskInput {
+  const context = resolveCanvasNodeExecutionContext(workflow, nodeId);
+  const params = context.node.params || {};
+  const referenceUrls = context.imageReferences.map((item) => item.url);
+  const displayModel = toHappyHorseDisplayModel(String(params.model || workflow.settings.model || "happyhorse-1.0"));
+  let model = resolveVideoRequestModel({ model: displayModel, referenceUrls });
+  return {
+    title: context.node.label || "视频节点生成",
+    type: "video",
+    prompt: context.prompt || (referenceUrls.length ? "根据参考图片生成视频" : ""),
+    params: {
+      model,
+      ratio: String(params.aspectRatio || params.ratio || workflow.settings.ratio || "16:9"),
+      quality: String(params.resolution || workflow.settings.resolution || "720P"),
+      resolution: String(params.resolution || workflow.settings.resolution || "720P"),
+      duration: normalizeDuration(params.duration || workflow.settings.duration),
+      frameMode: params.videoMode === "firstlast" ? "start-end" : "omni",
+      referenceUrls: referenceUrls.length ? referenceUrls : undefined,
+      muted: false,
+      hasReferenceVideo: false,
+    },
+  };
+}
+
+export function buildCanvasImageTaskInput(workflow: WebCanvasWorkflow, nodeId: string): CreatePreviewTaskInput {
+  const context = resolveCanvasNodeExecutionContext(workflow, nodeId);
+  const params = context.node.params || {};
+  const referenceUrls = context.imageReferences.map((item) => item.url);
+  return {
+    title: context.node.label || "图片节点生成",
+    type: "image",
+    prompt: context.prompt || (referenceUrls.length ? "根据参考图片生成图片" : ""),
+    params: {
+      model: String(params.model || workflow.settings.model || "nano-banana-pro"),
+      ratio: String(params.aspectRatio || params.ratio || workflow.settings.ratio || "16:9"),
+      quality: String(params.imageSize || params.resolution || workflow.settings.resolution || "1K"),
+      gridMode: "single",
+      referenceUrls: referenceUrls.length ? referenceUrls : undefined,
+    },
+  };
+}
diff --git a/src/features/canvas/canvasWorkflowSchema.ts b/src/features/canvas/canvasWorkflowSchema.ts
new file mode 100644
index 0000000..ebffa6b
--- /dev/null
+++ b/src/features/canvas/canvasWorkflowSchema.ts
@@ -0,0 +1,202 @@
+import type {
+  WebCanvasWorkflow,
+  WebCanvasWorkflowAssetRef,
+  WebCanvasWorkflowEdge,
+  WebCanvasWorkflowNode,
+  WebCanvasWorkflowPort,
+  WebCanvasWorkflowTaskRef,
+} from "../../types";
+
+export const CANVAS_WORKFLOW_SCHEMA_VERSION = 2;
+
+type LegacyNodeKind = WebCanvasWorkflowNode["kind"];
+
+export type CanvasWorkflowNodeKind = "text" | "image" | "video";
+
+export interface CanvasTaskResultInput {
+  taskId: string;
+  status: WebCanvasWorkflowTaskRef["status"];
+  resultUrl?: string | null;
+  ossKey?: string | null;
+  mediaType?: string | null;
+  originalUrl?: string | null;
+  expiresAt?: string | null;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function toStringValue(value: unknown, fallback = ""): string {
+  return typeof value === "string" ? value : fallback;
+}
+
+function normalizeNodeKind(kind: LegacyNodeKind): CanvasWorkflowNodeKind {
+  if (kind === "image") return "image";
+  if (kind === "video") return "video";
+  return "text";
+}
+
+export function getCanvasWorkflowNodeOutputType(kind: CanvasWorkflowNodeKind): WebCanvasWorkflowPort["type"] {
+  if (kind === "image") return "image";
+  if (kind === "video") return "video";
+  return "text";
+}
+
+export function getCanvasWorkflowNodeInputType(kind: CanvasWorkflowNodeKind): WebCanvasWorkflowPort["type"] {
+  if (kind === "image" || kind === "video") return "image";
+  return "text";
+}
+
+export function createCanvasWorkflowPort(
+  direction: "input" | "output",
+  kind: CanvasWorkflowNodeKind,
+): WebCanvasWorkflowPort {
+  return {
+    id: direction === "output" ? "out" : "in",
+    type: direction === "output" ? getCanvasWorkflowNodeOutputType(kind) : getCanvasWorkflowNodeInputType(kind),
+  };
+}
+
+function inferMediaTypeFromNode(kind: CanvasWorkflowNodeKind): string {
+  if (kind === "image") return "image";
+  if (kind === "video") return "video";
+  return "text";
+}
+
+function normalizeAssetRef(node: WebCanvasWorkflowNode, normalizedKind: CanvasWorkflowNodeKind): WebCanvasWorkflowAssetRef | null {
+  const metadata = isRecord(node.metadata) ? node.metadata : {};
+  const candidate = isRecord(node.assetRef)
+    ? node.assetRef
+    : isRecord(metadata.assetRef)
+      ? metadata.assetRef
+      : null;
+  const url = toStringValue(candidate?.url, node.previewUrl || "");
+  if (!url) return null;
+
+  return {
+    url,
+    ossKey: toStringValue(candidate?.ossKey) || null,
+    mediaType: toStringValue(candidate?.mediaType, inferMediaTypeFromNode(normalizedKind)),
+    sourceTaskId: toStringValue(candidate?.sourceTaskId, toStringValue(metadata.sourceTaskId)) || null,
+    originalUrl: toStringValue(candidate?.originalUrl) || null,
+    expiresAt: toStringValue(candidate?.expiresAt) || null,
+  };
+}
+
+function normalizeTaskRef(node: WebCanvasWorkflowNode, assetRef: WebCanvasWorkflowAssetRef | null): WebCanvasWorkflowTaskRef | null {
+  const metadata = isRecord(node.metadata) ? node.metadata : {};
+  const candidate = isRecord(node.taskRef)
+    ? node.taskRef
+    : isRecord(metadata.taskRef)
+      ? metadata.taskRef
+      : null;
+  const taskId = toStringValue(candidate?.taskId, assetRef?.sourceTaskId || toStringValue(metadata.sourceTaskId));
+  if (!taskId) return null;
+  const status = toStringValue(candidate?.status, "completed") as WebCanvasWorkflowTaskRef["status"];
+  return {
+    taskId,
+    status,
+    resultUrl: toStringValue(candidate?.resultUrl, assetRef?.url || node.previewUrl || "") || null,
+    updatedAt: toStringValue(candidate?.updatedAt) || null,
+  };
+}
+
+function normalizeNodeParams(node: WebCanvasWorkflowNode): Record<string, unknown> {
+  const metadata = isRecord(node.metadata) ? node.metadata : {};
+  const params = isRecord(node.params) ? node.params : {};
+  const reserved = new Set(["assetRef", "taskRef", "sourceTaskId"]);
+  const metadataParams = Object.fromEntries(Object.entries(metadata).filter(([key]) => !reserved.has(key)));
+  return {
+    ...metadataParams,
+    ...params,
+  };
+}
+
+export function normalizeCanvasWorkflowNode(node: WebCanvasWorkflowNode): WebCanvasWorkflowNode {
+  const kind = normalizeNodeKind(node.kind);
+  const assetRef = normalizeAssetRef(node, kind);
+  const taskRef = normalizeTaskRef(node, assetRef);
+  const inputs = Array.isArray(node.inputs) && node.inputs.length ? node.inputs : [createCanvasWorkflowPort("input", kind)];
+  const outputs = Array.isArray(node.outputs) && node.outputs.length ? node.outputs : [createCanvasWorkflowPort("output", kind)];
+
+  return {
+    ...node,
+    kind,
+    inputs,
+    outputs,
+    assetRef,
+    taskRef,
+    params: normalizeNodeParams(node),
+    previewUrl: assetRef?.url || node.previewUrl,
+  };
+}
+
+export function normalizeCanvasWorkflowEdge(
+  edge: WebCanvasWorkflowEdge,
+  nodeById: Map<string, WebCanvasWorkflowNode>,
+): WebCanvasWorkflowEdge {
+  const sourceNode = nodeById.get(edge.source);
+  const targetNode = nodeById.get(edge.target);
+  const sourcePort = edge.sourcePort || sourceNode?.outputs?.[0] || createCanvasWorkflowPort("output", "text");
+  const targetPort = edge.targetPort || targetNode?.inputs?.[0] || createCanvasWorkflowPort("input", "text");
+  return {
+    ...edge,
+    sourcePort,
+    targetPort,
+  };
+}
+
+export function normalizeCanvasWorkflowSchema(workflow: WebCanvasWorkflow): WebCanvasWorkflow {
+  const nodes = workflow.nodes.map(normalizeCanvasWorkflowNode);
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  return {
+    ...workflow,
+    schemaVersion: CANVAS_WORKFLOW_SCHEMA_VERSION,
+    nodes,
+    edges: workflow.edges.map((edge) => normalizeCanvasWorkflowEdge(edge, nodeById)),
+  };
+}
+
+export function createCanvasAssetRefFromTaskResult(
+  kind: CanvasWorkflowNodeKind,
+  result: CanvasTaskResultInput,
+): WebCanvasWorkflowAssetRef | null {
+  const url = String(result.resultUrl || "").trim();
+  if (!url) return null;
+  return {
+    url,
+    ossKey: result.ossKey || null,
+    mediaType: result.mediaType || inferMediaTypeFromNode(kind),
+    sourceTaskId: result.taskId,
+    originalUrl: result.originalUrl || null,
+    expiresAt: result.expiresAt || null,
+  };
+}
+
+export function applyCanvasNodeTaskResult(
+  workflow: WebCanvasWorkflow,
+  nodeId: string,
+  result: CanvasTaskResultInput,
+): WebCanvasWorkflow {
+  const normalized = normalizeCanvasWorkflowSchema(workflow);
+  return {
+    ...normalized,
+    nodes: normalized.nodes.map((node) => {
+      if (node.id !== nodeId) return node;
+      const kind = normalizeNodeKind(node.kind);
+      const assetRef = createCanvasAssetRefFromTaskResult(kind, result);
+      return {
+        ...node,
+        assetRef: assetRef || node.assetRef || null,
+        taskRef: {
+          taskId: result.taskId,
+          status: result.status,
+          resultUrl: result.resultUrl || assetRef?.url || node.taskRef?.resultUrl || null,
+          updatedAt: new Date().toISOString(),
+        },
+        previewUrl: assetRef?.url || result.resultUrl || node.previewUrl,
+      };
+    }),
+  };
+}
diff --git a/src/features/canvas/useCanvasGeneration.ts b/src/features/canvas/useCanvasGeneration.ts
new file mode 100644
index 0000000..61c2e85
--- /dev/null
+++ b/src/features/canvas/useCanvasGeneration.ts
@@ -0,0 +1,189 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction, useEffect, useRef, useState } from "react";
+import type {
+  CanvasImageGenerationState,
+  CanvasImageNode,
+  CanvasTextGenerationState,
+  CanvasVideoGenerationState,
+  CanvasVideoNode,
+} from "./canvasTypes";
+import { createCanvasAssetRefFromGeneratedResult, persistCanvasGeneratedResultAsset } from "./canvasAssetPersistence";
+import { waitForImageTaskResult, waitForVideoTaskResult } from "./canvasUtils";
+
+const CANVAS_GEN_KEEPALIVE_KEY = "omniai:canvas-gen-tasks";
+
+interface CanvasGenKeepaliveEntry {
+  taskId: string;
+  nodeId: string;
+  nodeKind: "image" | "video";
+  projectId: string;
+}
+
+function loadCanvasGenKeepalive(): CanvasGenKeepaliveEntry[] {
+  try {
+    const raw = window.localStorage.getItem(CANVAS_GEN_KEEPALIVE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveCanvasGenKeepalive(entries: CanvasGenKeepaliveEntry[]): void {
+  window.localStorage.setItem(CANVAS_GEN_KEEPALIVE_KEY, JSON.stringify(entries));
+}
+
+export function addCanvasGenKeepalive(taskId: string, nodeId: string, nodeKind: "image" | "video", projectId: string): void {
+  const entries = loadCanvasGenKeepalive().filter((e) => e.taskId !== taskId);
+  entries.push({ taskId, nodeId, nodeKind, projectId });
+  saveCanvasGenKeepalive(entries);
+}
+
+export function removeCanvasGenKeepalive(taskId: string): void {
+  saveCanvasGenKeepalive(loadCanvasGenKeepalive().filter((e) => e.taskId !== taskId));
+}
+
+export interface UseCanvasGenerationParams {
+  setImageNodes: Dispatch<SetStateAction<CanvasImageNode[]>>;
+  setVideoNodes: Dispatch<SetStateAction<CanvasVideoNode[]>>;
+}
+
+export function useCanvasGeneration(params: UseCanvasGenerationParams) {
+  const { setImageNodes, setVideoNodes } = params;
+
+  const [textGenerationState, setTextGenerationState] = useState<Record<string, CanvasTextGenerationState>>({});
+  const [imageGenerationState, setImageGenerationState] = useState<Record<string, CanvasImageGenerationState>>({});
+  const [videoGenerationState, setVideoGenerationState] = useState<Record<string, CanvasVideoGenerationState>>({});
+  const [generationToast, setGenerationToast] = useState<string | null>(null);
+
+  const imageGenerationInFlightRef = useRef(new Set<string>());
+  const textGenerationInFlightRef = useRef(new Set<string>());
+  const textGenerationAbortControllersRef = useRef(new Map<string, AbortController>());
+  const canvasGenKeepaliveRestoredRef = useRef(false);
+
+  const setTextGenerationStatus = (nodeId: string, state: CanvasTextGenerationState) => {
+    setTextGenerationState((current) => ({ ...current, [nodeId]: state }));
+  };
+
+  const setImageGenerationStatus = (nodeId: string, state: CanvasImageGenerationState) => {
+    setImageGenerationState((current) => ({ ...current, [nodeId]: state }));
+  };
+
+  const setVideoGenerationStatus = (nodeId: string, state: CanvasVideoGenerationState) => {
+    setVideoGenerationState((current) => ({ ...current, [nodeId]: state }));
+  };
+
+  // Toast auto-dismiss
+  useEffect(() => {
+    if (!generationToast) return undefined;
+    const timer = window.setTimeout(() => setGenerationToast(null), 1800);
+    return () => window.clearTimeout(timer);
+  }, [generationToast]);
+
+  const restoreKeepaliveTasks = (
+    projectId: string,
+    imageNodesList: CanvasImageNode[],
+    videoNodesList: CanvasVideoNode[],
+  ) => {
+    if (canvasGenKeepaliveRestoredRef.current) return;
+    canvasGenKeepaliveRestoredRef.current = true;
+    const storedTasks = loadCanvasGenKeepalive().filter((e) => e.projectId === projectId);
+    for (const entry of storedTasks) {
+      const nodeExists = [...imageNodesList, ...videoNodesList].some((n) => n.id === entry.nodeId);
+      if (!nodeExists) {
+        removeCanvasGenKeepalive(entry.taskId);
+        continue;
+      }
+      if (entry.nodeKind === "image") {
+        imageGenerationInFlightRef.current.add(entry.nodeId);
+        setImageGenerationStatus(entry.nodeId, { status: "running", message: "正在恢复图片生成", progress: 20 });
+        void waitForImageTaskResult(entry.taskId, (status) => {
+          const progress = Math.max(18, Math.min(status.status === "completed" ? 100 : 96, Math.trunc(status.progress || 0)));
+          setImageGenerationStatus(entry.nodeId, { status: "running", message: "图片生成中", progress });
+        }).then(async (outputUrl) => {
+          removeCanvasGenKeepalive(entry.taskId);
+          setImageGenerationStatus(entry.nodeId, { status: "success", message: "生成完成", progress: 100 });
+          const ref = createCanvasAssetRefFromGeneratedResult({
+            url: outputUrl, mediaType: "image/png", resultType: "image", taskId: entry.taskId, originalUrl: outputUrl,
+          });
+          setImageNodes((current) => current.map((n) =>
+            n.id === entry.nodeId ? { ...n, imageUrl: outputUrl, assetRef: ref, taskRef: { taskId: entry.taskId, status: "completed", resultUrl: outputUrl, updatedAt: new Date().toISOString() } } : n
+          ));
+          let durableRef = ref;
+          try {
+            durableRef = await persistCanvasGeneratedResultAsset({
+              title: "image-node", url: outputUrl, mediaType: "image/png", resultType: "image", taskId: entry.taskId, originalUrl: outputUrl,
+            });
+          } catch { /* keep temp URL on failure */ }
+          if (durableRef.url !== outputUrl || durableRef.ossKey) {
+            setImageNodes((current) => current.map((n) =>
+              n.id === entry.nodeId ? { ...n, imageUrl: durableRef.url, assetRef: durableRef, taskRef: { taskId: entry.taskId, status: "completed", resultUrl: durableRef.url, updatedAt: new Date().toISOString() } } : n
+            ));
+          }
+        }).catch(() => {
+          removeCanvasGenKeepalive(entry.taskId);
+          setImageGenerationStatus(entry.nodeId, { status: "error", message: "图片生成失败" });
+        }).finally(() => {
+          imageGenerationInFlightRef.current.delete(entry.nodeId);
+        });
+      } else if (entry.nodeKind === "video") {
+        imageGenerationInFlightRef.current.add(entry.nodeId);
+        setVideoGenerationStatus(entry.nodeId, { status: "running", message: "正在恢复视频生成", progress: 20 });
+        void waitForVideoTaskResult(entry.taskId, (status) => {
+          const progress = Math.max(18, Math.min(status.status === "completed" ? 100 : 96, Math.trunc(status.progress || 0)));
+          setVideoGenerationStatus(entry.nodeId, { status: "running", message: "视频生成中", progress });
+        }).then(async (outputUrl) => {
+          removeCanvasGenKeepalive(entry.taskId);
+          setVideoGenerationStatus(entry.nodeId, { status: "success", message: "生成完成", progress: 100 });
+          const ref = createCanvasAssetRefFromGeneratedResult({
+            url: outputUrl, mediaType: "video/mp4", resultType: "video", taskId: entry.taskId, originalUrl: outputUrl,
+          });
+          setVideoNodes((current) => current.map((n) =>
+            n.id === entry.nodeId ? { ...n, videoUrl: outputUrl, assetRef: ref, taskRef: { taskId: entry.taskId, status: "completed", resultUrl: outputUrl, updatedAt: new Date().toISOString() } } : n
+          ));
+          let durableRef = ref;
+          try {
+            durableRef = await persistCanvasGeneratedResultAsset({
+              title: "video-node", url: outputUrl, mediaType: "video/mp4", resultType: "video", taskId: entry.taskId, originalUrl: outputUrl,
+            });
+          } catch { /* keep temp URL on failure */ }
+          if (durableRef.url !== outputUrl || durableRef.ossKey) {
+            setVideoNodes((current) => current.map((n) =>
+              n.id === entry.nodeId ? { ...n, videoUrl: durableRef.url, assetRef: durableRef, taskRef: { taskId: entry.taskId, status: "completed", resultUrl: durableRef.url, updatedAt: new Date().toISOString() } } : n
+            ));
+          }
+        }).catch(() => {
+          removeCanvasGenKeepalive(entry.taskId);
+          setVideoGenerationStatus(entry.nodeId, { status: "error", message: "视频生成失败" });
+        }).finally(() => {
+          imageGenerationInFlightRef.current.delete(entry.nodeId);
+        });
+      }
+    }
+  };
+
+  const resetGenerationState = () => {
+    textGenerationAbortControllersRef.current.forEach((c) => c.abort());
+    textGenerationAbortControllersRef.current.clear();
+    textGenerationInFlightRef.current.clear();
+    imageGenerationInFlightRef.current.clear();
+    setTextGenerationState({});
+    setImageGenerationState({});
+    setVideoGenerationState({});
+  };
+
+  return {
+    textGenerationState,
+    imageGenerationState,
+    videoGenerationState,
+    generationToast,
+    setGenerationToast,
+    imageGenerationInFlightRef,
+    textGenerationInFlightRef,
+    textGenerationAbortControllersRef,
+    canvasGenKeepaliveRestoredRef,
+    setTextGenerationStatus,
+    setImageGenerationStatus,
+    setVideoGenerationStatus,
+    restoreKeepaliveTasks,
+    resetGenerationState,
+  };
+}
diff --git a/src/features/canvas/useCanvasHistory.ts b/src/features/canvas/useCanvasHistory.ts
new file mode 100644
index 0000000..8e476ae
--- /dev/null
+++ b/src/features/canvas/useCanvasHistory.ts
@@ -0,0 +1,65 @@
+import { useCallback, useRef } from "react";
+
+export interface CanvasHistorySnapshot {
+  textNodes: unknown[];
+  imageNodes: unknown[];
+  videoNodes: unknown[];
+  manualLinks: unknown[];
+  nodePackages: unknown[];
+}
+
+interface CanvasHistoryState {
+  past: CanvasHistorySnapshot[];
+  future: CanvasHistorySnapshot[];
+}
+
+const MAX_HISTORY = 50;
+
+export function useCanvasHistory() {
+  const historyRef = useRef<CanvasHistoryState>({ past: [], future: [] });
+  const lastPushRef = useRef<number>(0);
+
+  const pushSnapshot = useCallback((snapshot: CanvasHistorySnapshot) => {
+    const now = Date.now();
+    // Debounce: skip if pushed within 300ms (e.g. rapid drag moves)
+    if (now - lastPushRef.current < 300) return;
+    lastPushRef.current = now;
+
+    const history = historyRef.current;
+    history.past = [...history.past.slice(-(MAX_HISTORY - 1)), snapshot];
+    history.future = [];
+  }, []);
+
+  const undo = useCallback(
+    (currentSnapshot: CanvasHistorySnapshot): CanvasHistorySnapshot | null => {
+      const history = historyRef.current;
+      if (!history.past.length) return null;
+      const previous = history.past[history.past.length - 1];
+      history.past = history.past.slice(0, -1);
+      history.future = [...history.future, currentSnapshot];
+      return previous;
+    },
+    []
+  );
+
+  const redo = useCallback(
+    (currentSnapshot: CanvasHistorySnapshot): CanvasHistorySnapshot | null => {
+      const history = historyRef.current;
+      if (!history.future.length) return null;
+      const next = history.future[history.future.length - 1];
+      history.future = history.future.slice(0, -1);
+      history.past = [...history.past, currentSnapshot];
+      return next;
+    },
+    []
+  );
+
+  const canUndo = useCallback(() => historyRef.current.past.length > 0, []);
+  const canRedo = useCallback(() => historyRef.current.future.length > 0, []);
+
+  const clear = useCallback(() => {
+    historyRef.current = { past: [], future: [] };
+  }, []);
+
+  return { pushSnapshot, undo, redo, canUndo, canRedo, clear };
+}
diff --git a/src/features/canvas/useCanvasKeyboard.ts b/src/features/canvas/useCanvasKeyboard.ts
new file mode 100644
index 0000000..dbb9d29
--- /dev/null
+++ b/src/features/canvas/useCanvasKeyboard.ts
@@ -0,0 +1,85 @@
+import { useEffect, useRef } from "react";
+
+export interface CanvasKeyboardActions {
+  onDelete: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onSelectAll: () => void;
+  onCopy: () => void;
+  onPaste: () => void;
+  onDuplicate: () => void;
+  onEscape: () => void;
+  setSpacePanning: (active: boolean) => void;
+  isInputFocused: () => boolean;
+}
+
+export function useCanvasKeyboard(actions: CanvasKeyboardActions) {
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const a = actionsRef.current;
+      if (a.isInputFocused()) return;
+
+      const ctrl = event.ctrlKey || event.metaKey;
+
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        a.onDelete();
+        return;
+      }
+      if (ctrl && event.key === "z" && !event.shiftKey) {
+        event.preventDefault();
+        a.onUndo();
+        return;
+      }
+      if (ctrl && (event.key === "y" || (event.key === "z" && event.shiftKey))) {
+        event.preventDefault();
+        a.onRedo();
+        return;
+      }
+      if (ctrl && event.key === "a") {
+        event.preventDefault();
+        a.onSelectAll();
+        return;
+      }
+      if (ctrl && event.key === "c") {
+        event.preventDefault();
+        a.onCopy();
+        return;
+      }
+      if (ctrl && event.key === "v") {
+        event.preventDefault();
+        a.onPaste();
+        return;
+      }
+      if (ctrl && event.key === "d") {
+        event.preventDefault();
+        a.onDuplicate();
+        return;
+      }
+      if (event.key === "Escape") {
+        a.onEscape();
+        return;
+      }
+      if (event.key === " " && !ctrl) {
+        event.preventDefault();
+        a.setSpacePanning(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === " ") {
+        actionsRef.current.setSpacePanning(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+}
diff --git a/src/features/canvas/useCanvasNodeDrag.ts b/src/features/canvas/useCanvasNodeDrag.ts
new file mode 100644
index 0000000..4db866d
--- /dev/null
+++ b/src/features/canvas/useCanvasNodeDrag.ts
@@ -0,0 +1,326 @@
+import { type Dispatch, type MouseEvent, type MutableRefObject, type SetStateAction, useEffect, useRef, useState } from "react";
+import { canvasNodeClickMoveThreshold } from "./canvasConstants";
+import type {
+  CanvasAlignGuide,
+  CanvasImageNode,
+  CanvasImageNodeDrag,
+  CanvasNodeKind,
+  CanvasNodePackage,
+  CanvasNodePackageDrag,
+  CanvasNodeResizeDrag,
+  CanvasNodeSize,
+  CanvasPanDrag,
+  CanvasPoint,
+  CanvasSelectedNode,
+  CanvasSelectionDrag,
+  CanvasTextNode,
+  CanvasTextNodeDrag,
+  CanvasVideoNode,
+  CanvasVideoNodeDrag,
+  CanvasViewport,
+} from "./canvasTypes";
+import { clampCanvasNodeSize, moveCanvasNodesForPackageDrag, normalizeCanvasSelectionRect } from "./canvasUtils";
+
+export interface CanvasNodeDragCallbacks {
+  pushHistorySnapshot: () => void;
+  clearCanvasSelection: () => void;
+  selectCanvasNode: (kind: CanvasNodeKind, id: string, addToSelection?: boolean) => void;
+  applyCanvasSelection: (nodes: CanvasSelectedNode[]) => void;
+  getCanvasPointFromClient: (clientX: number, clientY: number) => CanvasPoint;
+  getNodesInSelectionRect: (rect: { left: number; top: number; width: number; height: number }) => CanvasSelectedNode[];
+  expandCanvasNodePackage: (pkg: CanvasNodePackage) => void;
+  onBeforeResize?: () => void;
+}
+
+export interface UseCanvasNodeDragParams {
+  zoomRef: MutableRefObject<number>;
+  textNodesRef: MutableRefObject<CanvasTextNode[]>;
+  imageNodesRef: MutableRefObject<CanvasImageNode[]>;
+  videoNodesRef: MutableRefObject<CanvasVideoNode[]>;
+  nodePackagesRef: MutableRefObject<CanvasNodePackage[]>;
+  setTextNodes: Dispatch<SetStateAction<CanvasTextNode[]>>;
+  setImageNodes: Dispatch<SetStateAction<CanvasImageNode[]>>;
+  setVideoNodes: Dispatch<SetStateAction<CanvasVideoNode[]>>;
+  setNodePackages: Dispatch<SetStateAction<CanvasNodePackage[]>>;
+  setCanvasViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  callbacksRef: MutableRefObject<CanvasNodeDragCallbacks>;
+  suppressNextPaneClickRef: MutableRefObject<boolean>;
+}
+
+export function useCanvasNodeDrag(params: UseCanvasNodeDragParams) {
+  const {
+    zoomRef,
+    textNodesRef,
+    imageNodesRef,
+    videoNodesRef,
+    nodePackagesRef,
+    setTextNodes,
+    setImageNodes,
+    setVideoNodes,
+    setNodePackages,
+    setCanvasViewport,
+    callbacksRef,
+    suppressNextPaneClickRef,
+  } = params;
+
+  const [textNodeDrag, setTextNodeDrag] = useState<CanvasTextNodeDrag | null>(null);
+  const [imageNodeDrag, setImageNodeDrag] = useState<CanvasImageNodeDrag | null>(null);
+  const [videoNodeDrag, setVideoNodeDrag] = useState<CanvasVideoNodeDrag | null>(null);
+  const [packageDrag, setPackageDrag] = useState<CanvasNodePackageDrag | null>(null);
+  const [selectionDrag, setSelectionDrag] = useState<CanvasSelectionDrag | null>(null);
+  const [nodeResizeDrag, setNodeResizeDrag] = useState<CanvasNodeResizeDrag | null>(null);
+  const [canvasPanDrag, setCanvasPanDrag] = useState<CanvasPanDrag | null>(null);
+  const [alignGuides, setAlignGuides] = useState<CanvasAlignGuide[]>([]);
+
+  const didNodeDragStayClick = (event: globalThis.MouseEvent, drag: { startX: number; startY: number }) =>
+    Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) <= canvasNodeClickMoveThreshold;
+
+  const computeAlignGuides = (draggedId: string, pos: { x: number; y: number }, size: { width: number; height: number }): CanvasAlignGuide[] => {
+    const threshold = 6;
+    const guides: CanvasAlignGuide[] = [];
+    const cx = pos.x + size.width / 2;
+    const cy = pos.y + size.height / 2;
+    const right = pos.x + size.width;
+    const bottom = pos.y + size.height;
+    const others = [
+      ...textNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
+      ...imageNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
+      ...videoNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
+    ];
+    for (const other of others) {
+      const ocx = other.pos.x + other.size.width / 2;
+      const ocy = other.pos.y + other.size.height / 2;
+      const oRight = other.pos.x + other.size.width;
+      const oBottom = other.pos.y + other.size.height;
+      if (Math.abs(cx - ocx) < threshold) guides.push({ axis: "x", position: ocx });
+      if (Math.abs(pos.x - other.pos.x) < threshold) guides.push({ axis: "x", position: other.pos.x });
+      if (Math.abs(right - oRight) < threshold) guides.push({ axis: "x", position: oRight });
+      if (Math.abs(cy - ocy) < threshold) guides.push({ axis: "y", position: ocy });
+      if (Math.abs(pos.y - other.pos.y) < threshold) guides.push({ axis: "y", position: other.pos.y });
+      if (Math.abs(bottom - oBottom) < threshold) guides.push({ axis: "y", position: oBottom });
+    }
+    const seen = new Set<string>();
+    return guides.filter((g) => {
+      const key = `${g.axis}:${Math.round(g.position)}`;
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  };
+
+  useEffect(() => {
+    if (!textNodeDrag) return;
+    const draggedNode = textNodesRef.current.find((n) => n.id === textNodeDrag.nodeId);
+    const draggedSize = draggedNode?.size || { width: 320, height: 200 };
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const hasMoved = !didNodeDragStayClick(event, textNodeDrag);
+      if (hasMoved && !textNodeDrag.hasMoved) {
+        callbacksRef.current.pushHistorySnapshot();
+        callbacksRef.current.clearCanvasSelection();
+        setTextNodeDrag((d) => d?.nodeId === textNodeDrag.nodeId ? { ...d, hasMoved: true } : d);
+      }
+      if (!hasMoved && !textNodeDrag.hasMoved) return;
+      const newPos = {
+        x: textNodeDrag.originX + (event.clientX - textNodeDrag.startX) / zoomRef.current,
+        y: textNodeDrag.originY + (event.clientY - textNodeDrag.startY) / zoomRef.current,
+      };
+      setTextNodes((nodes) => nodes.map((n) => n.id === textNodeDrag.nodeId ? { ...n, position: newPos } : n));
+      setAlignGuides(computeAlignGuides(textNodeDrag.nodeId, newPos, draggedSize));
+    };
+    const handleUp = (event: globalThis.MouseEvent) => {
+      if (didNodeDragStayClick(event, textNodeDrag)) callbacksRef.current.selectCanvasNode("text", textNodeDrag.nodeId, event.shiftKey);
+      setTextNodeDrag(null);
+      setAlignGuides([]);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [textNodeDrag]);
+
+  useEffect(() => {
+    if (!imageNodeDrag) return;
+    const draggedNode = imageNodesRef.current.find((n) => n.id === imageNodeDrag.nodeId);
+    const draggedSize = draggedNode?.size || { width: 320, height: 320 };
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const hasMoved = !didNodeDragStayClick(event, imageNodeDrag);
+      if (hasMoved && !imageNodeDrag.hasMoved) {
+        callbacksRef.current.pushHistorySnapshot();
+        callbacksRef.current.clearCanvasSelection();
+        setImageNodeDrag((d) => d?.nodeId === imageNodeDrag.nodeId ? { ...d, hasMoved: true } : d);
+      }
+      if (!hasMoved && !imageNodeDrag.hasMoved) return;
+      const newPos = {
+        x: imageNodeDrag.originX + (event.clientX - imageNodeDrag.startX) / zoomRef.current,
+        y: imageNodeDrag.originY + (event.clientY - imageNodeDrag.startY) / zoomRef.current,
+      };
+      setImageNodes((nodes) => nodes.map((n) => n.id === imageNodeDrag.nodeId ? { ...n, position: newPos } : n));
+      setAlignGuides(computeAlignGuides(imageNodeDrag.nodeId, newPos, draggedSize));
+    };
+    const handleUp = (event: globalThis.MouseEvent) => {
+      if (didNodeDragStayClick(event, imageNodeDrag)) callbacksRef.current.selectCanvasNode("image", imageNodeDrag.nodeId, event.shiftKey);
+      setImageNodeDrag(null);
+      setAlignGuides([]);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [imageNodeDrag]);
+
+  useEffect(() => {
+    if (!videoNodeDrag) return;
+    const draggedNode = videoNodesRef.current.find((n) => n.id === videoNodeDrag.nodeId);
+    const draggedSize = draggedNode?.size || { width: 320, height: 240 };
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const hasMoved = !didNodeDragStayClick(event, videoNodeDrag);
+      if (hasMoved && !videoNodeDrag.hasMoved) {
+        callbacksRef.current.pushHistorySnapshot();
+        callbacksRef.current.clearCanvasSelection();
+        setVideoNodeDrag((d) => d?.nodeId === videoNodeDrag.nodeId ? { ...d, hasMoved: true } : d);
+      }
+      if (!hasMoved && !videoNodeDrag.hasMoved) return;
+      const newPos = {
+        x: videoNodeDrag.originX + (event.clientX - videoNodeDrag.startX) / zoomRef.current,
+        y: videoNodeDrag.originY + (event.clientY - videoNodeDrag.startY) / zoomRef.current,
+      };
+      setVideoNodes((nodes) => nodes.map((n) => n.id === videoNodeDrag.nodeId ? { ...n, position: newPos } : n));
+      setAlignGuides(computeAlignGuides(videoNodeDrag.nodeId, newPos, draggedSize));
+    };
+    const handleUp = (event: globalThis.MouseEvent) => {
+      if (didNodeDragStayClick(event, videoNodeDrag)) callbacksRef.current.selectCanvasNode("video", videoNodeDrag.nodeId, event.shiftKey);
+      setVideoNodeDrag(null);
+      setAlignGuides([]);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [videoNodeDrag]);
+
+  useEffect(() => {
+    if (!packageDrag) return;
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const deltaX = (event.clientX - packageDrag.startX) / zoomRef.current;
+      const deltaY = (event.clientY - packageDrag.startY) / zoomRef.current;
+      const hasMoved = Math.abs(event.clientX - packageDrag.startX) > canvasNodeClickMoveThreshold ||
+        Math.abs(event.clientY - packageDrag.startY) > canvasNodeClickMoveThreshold;
+      if (hasMoved && !packageDrag.hasMoved) {
+        callbacksRef.current.pushHistorySnapshot();
+        setPackageDrag((c) => c?.packageId === packageDrag.packageId ? { ...c, hasMoved: true } : c);
+      }
+      if (!hasMoved && !packageDrag.hasMoved) return;
+      const delta = { x: deltaX, y: deltaY };
+      if (packageDrag.collapsed && packageDrag.collapsedBounds) {
+        setNodePackages((current) => current.map((pkg) =>
+          pkg.id === packageDrag.packageId ? { ...pkg, collapsedBounds: { ...packageDrag.collapsedBounds!, left: packageDrag.collapsedBounds!.left + deltaX, top: packageDrag.collapsedBounds!.top + deltaY } } : pkg
+        ));
+      } else {
+        setTextNodes((nodes) => moveCanvasNodesForPackageDrag(nodes, packageDrag.textOrigins, delta));
+        setImageNodes((nodes) => moveCanvasNodesForPackageDrag(nodes, packageDrag.imageOrigins, delta));
+        setVideoNodes((nodes) => moveCanvasNodesForPackageDrag(nodes, packageDrag.videoOrigins, delta));
+      }
+    };
+    const handleUp = () => {
+      if (!packageDrag.hasMoved && packageDrag.collapsed) {
+        const pkg = nodePackagesRef.current.find((p) => p.id === packageDrag.packageId);
+        if (pkg) callbacksRef.current.expandCanvasNodePackage(pkg);
+      }
+      setPackageDrag(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [packageDrag]);
+
+  useEffect(() => {
+    if (!nodeResizeDrag) return;
+    callbacksRef.current.pushHistorySnapshot();
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const nextSize = clampCanvasNodeSize(
+        nodeResizeDrag.kind,
+        nodeResizeDrag.originWidth + (event.clientX - nodeResizeDrag.startX) / zoomRef.current,
+        nodeResizeDrag.originHeight + (event.clientY - nodeResizeDrag.startY) / zoomRef.current
+      );
+      if (nodeResizeDrag.kind === "text") {
+        setTextNodes((nodes) => nodes.map((n) => n.id === nodeResizeDrag.nodeId ? { ...n, size: nextSize } : n));
+      } else if (nodeResizeDrag.kind === "image") {
+        setImageNodes((nodes) => nodes.map((n) => n.id === nodeResizeDrag.nodeId ? { ...n, size: nextSize } : n));
+      } else {
+        setVideoNodes((nodes) => nodes.map((n) => n.id === nodeResizeDrag.nodeId ? { ...n, size: nextSize } : n));
+      }
+    };
+    const handleUp = () => setNodeResizeDrag(null);
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [nodeResizeDrag]);
+
+  useEffect(() => {
+    if (!selectionDrag) return;
+    const handleMove = (event: globalThis.MouseEvent) => {
+      const current = callbacksRef.current.getCanvasPointFromClient(event.clientX, event.clientY);
+      setSelectionDrag((drag) => drag ? { ...drag, current, hasMoved: drag.hasMoved || Math.hypot(current.x - drag.start.x, current.y - drag.start.y) > canvasNodeClickMoveThreshold } : drag);
+    };
+    const handleUp = (event: globalThis.MouseEvent) => {
+      const current = callbacksRef.current.getCanvasPointFromClient(event.clientX, event.clientY);
+      const hasMoved = selectionDrag.hasMoved || Math.hypot(current.x - selectionDrag.start.x, current.y - selectionDrag.start.y) > canvasNodeClickMoveThreshold;
+      if (hasMoved) {
+        const selectionRect = normalizeCanvasSelectionRect(selectionDrag.start, current);
+        callbacksRef.current.applyCanvasSelection(callbacksRef.current.getNodesInSelectionRect(selectionRect));
+        suppressNextPaneClickRef.current = true;
+      } else {
+        callbacksRef.current.clearCanvasSelection();
+      }
+      setSelectionDrag(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [selectionDrag]);
+
+  useEffect(() => {
+    if (!canvasPanDrag) return;
+    const handleMove = (event: globalThis.MouseEvent) => {
+      setCanvasViewport((vp) => ({ ...vp, x: canvasPanDrag.originX + event.clientX - canvasPanDrag.startX, y: canvasPanDrag.originY + event.clientY - canvasPanDrag.startY }));
+    };
+    const handleUp = () => setCanvasPanDrag(null);
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => { window.removeEventListener("mousemove", handleMove); window.removeEventListener("mouseup", handleUp); };
+  }, [canvasPanDrag]);
+
+  const handleNodeResizeStart = (
+    event: MouseEvent<HTMLButtonElement>,
+    kind: CanvasNodeKind,
+    nodeId: string,
+    size: CanvasNodeSize
+  ) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    callbacksRef.current.selectCanvasNode(kind, nodeId);
+    setSelectionDrag(null);
+    setTextNodeDrag(null);
+    setImageNodeDrag(null);
+    setVideoNodeDrag(null);
+    callbacksRef.current.onBeforeResize?.();
+    setNodeResizeDrag({
+      kind,
+      nodeId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originWidth: size.width,
+      originHeight: size.height,
+    });
+  };
+
+  return {
+    textNodeDrag, setTextNodeDrag,
+    imageNodeDrag, setImageNodeDrag,
+    videoNodeDrag, setVideoNodeDrag,
+    packageDrag, setPackageDrag,
+    selectionDrag, setSelectionDrag,
+    nodeResizeDrag, setNodeResizeDrag,
+    canvasPanDrag, setCanvasPanDrag,
+    alignGuides, setAlignGuides,
+    handleNodeResizeStart,
+  };
+}
diff --git a/src/features/character-mix/CharacterMixPage.tsx b/src/features/character-mix/CharacterMixPage.tsx
new file mode 100644
index 0000000..b90317c
--- /dev/null
+++ b/src/features/character-mix/CharacterMixPage.tsx
@@ -0,0 +1,471 @@
+import {
+  ArrowLeftOutlined,
+  CameraOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FontSizeOutlined,
+  InboxOutlined,
+  LoadingOutlined,
+  PlayCircleOutlined,
+  RightOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+  ThunderboltOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import StudioToolLayout from "../../components/StudioToolLayout";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
+import { waitForTask } from "../../api/taskSubscription";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import { CheckCircleOutlined, InfoCircleOutlined } from "@ant-design/icons";
+
+interface CharacterMixPageProps {
+  isAuthenticated: boolean;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function CharacterMixPage({
+  isAuthenticated,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: CharacterMixPageProps) {
+  const [characterFile, setCharacterFile] = useState("");
+  const [characterPreview, setCharacterPreview] = useState("");
+  const [characterDataUrl, setCharacterDataUrl] = useState("");
+  const [videoFile, setVideoFile] = useState("");
+  const [videoPreview, setVideoPreview] = useState("");
+  const [videoDataUrl, setVideoDataUrl] = useState("");
+  const [promptInput, setPromptInput] = useState("");
+  const [watermark, setWatermark] = useState(false);
+  const [checkImage, setCheckImage] = useState(true);
+  const [faceHint, setFaceHint] = useState<string | null>(null);
+  const faceDetectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [notice, setNotice] = useState("等待上传角色图和参考视频");
+  const [isCreating, setIsCreating] = useState(false);
+  const [isDownloadingResult, setIsDownloadingResult] = useState(false);
+  const [isSavingResultAsset, setIsSavingResultAsset] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [resultUrl, setResultUrl] = useState<string | null>(null);
+  const abortRef = useRef(false);
+  const taskIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (characterPreview) URL.revokeObjectURL(characterPreview);
+    };
+  }, [characterPreview]);
+
+  useEffect(() => {
+    return () => {
+      if (videoPreview) URL.revokeObjectURL(videoPreview);
+    };
+  }, [videoPreview]);
+
+  useEffect(() => {
+    if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
+    if (!checkImage || !characterPreview) {
+      setFaceHint(null);
+      return;
+    }
+    setFaceHint("analyzing");
+    faceDetectTimerRef.current = setTimeout(() => {
+      setFaceHint("ready");
+    }, 800);
+    return () => {
+      if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
+    };
+  }, [checkImage, characterPreview]);
+
+  useEffect(() => {
+    return () => {
+      abortRef.current = true;
+      if (taskIdRef.current) {
+        aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current = true;
+    if (taskIdRef.current) {
+      aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      taskIdRef.current = null;
+    }
+  }, []);
+
+  const pollTaskUntilDone = useCallback(async (taskId: string): Promise<string | null> => {
+    return waitForTask(taskId, {
+      abortRef,
+      onProgress: (e) => setProgress(e.progress || 0),
+    });
+  }, []);
+
+  const handleCreateTask = async () => {
+    if (isCreating) return;
+    if (!characterDataUrl) {
+      setNotice("请先上传人物图");
+      return;
+    }
+    if (!videoDataUrl) {
+      setNotice("请先上传参考视频");
+      return;
+    }
+    if (!isAuthenticated) {
+      setNotice("请先登录后再创建角色迁移任务。");
+      return;
+    }
+
+    abortRef.current = false;
+    setIsCreating(true);
+    setProgress(0);
+    setResultUrl(null);
+    setNotice("正在上传素材...");
+
+    try {
+      const [imageAsset, videoAsset] = await Promise.all([
+        uploadAssetWithProgress(
+          { dataUrl: characterDataUrl, scope: "character-mix", mimeType: "image/png" },
+          { onProgress: (p) => setNotice(`上传人物图 ${p}%`) },
+        ),
+        uploadAssetWithProgress(
+          { dataUrl: videoDataUrl, scope: "character-mix", mimeType: "video/mp4" },
+          { onProgress: (p) => setNotice(`上传参考视频 ${p}%`) },
+        ),
+      ]);
+
+      const prompt = promptInput.trim() || "保持角色原有服装和面部特征，动作流畅自然";
+      setNotice("正在生成角色迁移视频...");
+      const { taskId } = await aiGenerationClient.createVideoTask({
+        model: "wan2.2-animate-mix",
+        prompt,
+        imageUrl: imageAsset.url,
+        referenceUrls: [videoAsset.url],
+        hasReferenceVideo: true,
+        muted: !watermark,
+      });
+      taskIdRef.current = taskId;
+
+      const result = await pollTaskUntilDone(taskId);
+      setResultUrl(result);
+      setNotice(result ? "角色迁移完成" : "已取消");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "任务创建失败，请稍后重试。");
+    } finally {
+      setIsCreating(false);
+      setProgress(0);
+    }
+  };
+
+  const handleDownloadResult = async () => {
+    if (!resultUrl || isDownloadingResult) return;
+    setIsDownloadingResult(true);
+    try {
+      const status = await saveToolResultToLocal({
+        url: resultUrl,
+        name: `character-mix-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: taskIdRef.current || undefined,
+      });
+      setNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "保存本地失败");
+    } finally {
+      setIsDownloadingResult(false);
+    }
+  };
+
+  const handleAddResultToAssets = async () => {
+    if (!resultUrl || isSavingResultAsset) return;
+    setIsSavingResultAsset(true);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url: resultUrl,
+        name: `角色迁移-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: taskIdRef.current || undefined,
+        description: "从工具盒角色迁移生成的视频。",
+        tags: ["工具盒", "角色迁移", "生成视频"],
+      });
+      setNotice(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingResultAsset(false);
+    }
+  };
+
+  return (
+    <section className="image-workbench-page character-mix-page" aria-label="角色迁移">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" className="is-active">
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <ArrowLeftOutlined />
+        </button>
+        <strong>角色迁移</strong>
+        <div className="image-workbench-camera-summary" aria-label="角色迁移状态">
+          <strong>{characterFile && videoFile ? "素材已就绪" : "迁移预览"}</strong>
+          <span>{characterFile || videoFile ? "人物 + 视频" : "待上传"}</span>
+        </div>
+        <button type="button" className="image-workbench-icon-btn" aria-label="下一项">
+          <RightOutlined />
+        </button>
+      </div>
+
+      <StudioToolLayout
+        noTop
+        leftPanel={
+          <>
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">人物图</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${characterFile ? "ready" : "waiting"}`}>
+                  {characterFile ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={characterFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (characterPreview) URL.revokeObjectURL(characterPreview);
+                      setCharacterFile(file.name);
+                      setCharacterPreview(URL.createObjectURL(file));
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        if (typeof reader.result === "string") setCharacterDataUrl(reader.result);
+                      };
+                      reader.readAsDataURL(file);
+                      setNotice(`已选择人物图 ${file.name}`);
+                    }}
+                  />
+                  {characterPreview ? (
+                    <img src={characterPreview} alt="" className="studio-upload-slot--filled__thumb" />
+                  ) : (
+                    <span className="studio-upload-slot--empty__icon">
+                      <InboxOutlined />
+                    </span>
+                  )}
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{characterFile || "上传人物图"}</strong>
+                    <small>单人正面或半身更稳定</small>
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">参考视频</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${videoFile ? "ready" : "waiting"}`}>
+                  {videoFile ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={videoFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="video/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (videoPreview) URL.revokeObjectURL(videoPreview);
+                      setVideoFile(file.name);
+                      setVideoPreview(URL.createObjectURL(file));
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        if (typeof reader.result === "string") setVideoDataUrl(reader.result);
+                      };
+                      reader.readAsDataURL(file);
+                      setNotice(`已选择参考视频 ${file.name}`);
+                    }}
+                  />
+                  <span className="studio-upload-slot--empty__icon">
+                    <VideoCameraOutlined />
+                  </span>
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{videoFile || "上传参考视频"}</strong>
+                    <small>MP4 / MOV / AVI</small>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </>
+        }
+        canvas={
+          isCreating ? (
+            <div className="image-workbench-generating">
+              <LoadingOutlined style={{ fontSize: 32 }} />
+              <strong>角色迁移中...</strong>
+              <div className="image-workbench-progress-bar">
+                <div className="image-workbench-progress-fill" style={{ width: `${progress}%` }} />
+              </div>
+              <span>{progress}%</span>
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel}>取消</button>
+            </div>
+          ) : resultUrl ? (
+            <div className="studio-canvas-video">
+              <video src={resultUrl} controls playsInline style={{ maxHeight: "100%", maxWidth: "100%", borderRadius: 12 }} />
+              {characterPreview && (
+                <div className="studio-canvas-pip">
+                  <img src={characterPreview} alt="人物图" />
+                </div>
+              )}
+            </div>
+          ) : videoPreview ? (
+            <div className="studio-canvas-video">
+              <video src={videoPreview} controls muted playsInline />
+              {characterPreview ? (
+                <div className="studio-canvas-pip">
+                  <img src={characterPreview} alt="人物图" />
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="studio-canvas-ghost">
+              <div className="studio-canvas-ghost__icon">
+                <SwapOutlined />
+              </div>
+              <div className="studio-canvas-ghost__title">上传人物图与参考视频</div>
+              <div className="studio-canvas-ghost__hint">将静态角色迁移到参考视频的动作与表情中。</div>
+            </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>
+            <span className="studio-status-bar__text">{notice}</span>
+          </>
+        }
+      />
+    </section>
+  );
+}
+
+export default CharacterMixPage;
diff --git a/src/features/community-review/CommunityCaseAddPage.tsx b/src/features/community-review/CommunityCaseAddPage.tsx
new file mode 100644
index 0000000..8aff1a4
--- /dev/null
+++ b/src/features/community-review/CommunityCaseAddPage.tsx
@@ -0,0 +1,406 @@
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  FileTextOutlined,
+  LoginOutlined,
+  PictureOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { communityClient } from "../../api/communityClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebCanvasWorkflow, WebUserSession } from "../../types";
+import { getWorkflowCoverUrl, isCanvasWorkflow } from "../community/communityCaseUtils";
+import { canManageCommunityCases } from "./communityPermissions";
+
+interface CommunityCaseAddPageProps {
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+  onOpenReview: () => void;
+}
+
+type CaseTarget = "generation" | "canvas";
+
+const RATIO_OPTIONS = ["16:9", "9:16", "1:1", "4:5", "3:4", "21:9"];
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("图片读取失败"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("JSON 读取失败"));
+    reader.readAsText(file);
+  });
+}
+
+function textToDataUrl(text: string, mimeType: string): string {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return `data:${mimeType};base64,${btoa(binary)}`;
+}
+
+function parseWorkflowText(text: string): WebCanvasWorkflow {
+  const parsed = JSON.parse(text) as unknown;
+  if (!isCanvasWorkflow(parsed)) {
+    throw new Error("JSON 需要包含完整画布工作流：nodes、edges 和 settings。");
+  }
+  return parsed;
+}
+
+function shortDescription(value: string): string {
+  return value.trim().replace(/\s+/g, " ").slice(0, 120);
+}
+
+function ratioToCssAspectRatio(value: string): string {
+  const [width, height] = value.split(":").map((item) => Number(item));
+  return width > 0 && height > 0 ? `${width} / ${height}` : "16 / 9";
+}
+
+export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenReview }: CommunityCaseAddPageProps) {
+  const allowed = canManageCommunityCases(session);
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+  const workflowInputRef = useRef<HTMLInputElement | null>(null);
+  const [target, setTarget] = useState<CaseTarget>("generation");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState("图片案例");
+  const [ratio, setRatio] = useState("16:9");
+  const [prompt, setPrompt] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageDataUrl, setImageDataUrl] = useState("");
+  const [imageFileName, setImageFileName] = useState("");
+  const [workflowText, setWorkflowText] = useState("");
+  const [workflowFileName, setWorkflowFileName] = useState("");
+  const [workflow, setWorkflow] = useState<WebCanvasWorkflow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const previewUrl = imageDataUrl || imageUrl.trim();
+  const workflowCoverUrl = useMemo(() => getWorkflowCoverUrl(workflow), [workflow]);
+  const targetCopy = target === "generation" ? "生成页面社区" : "画布页面社区";
+  const previewAspectRatio = target === "generation" ? ratioToCssAspectRatio(ratio) : "16 / 10";
+
+  useEffect(() => {
+    setCategory((current) => {
+      if (target === "generation" && current === "工作流案例") return "图片案例";
+      if (target === "canvas" && current === "图片案例") return "工作流案例";
+      return current;
+    });
+  }, [target]);
+
+  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setError(null);
+    setImageFileName(file.name);
+    setImageDataUrl(await readFileAsDataUrl(file));
+  };
+
+  const applyWorkflowText = (text: string, fileName = "") => {
+    setWorkflowText(text);
+    setWorkflowFileName(fileName);
+    try {
+      const parsedWorkflow = parseWorkflowText(text);
+      setWorkflow(parsedWorkflow);
+      setError(null);
+      if (!title.trim()) setTitle(parsedWorkflow.title || "画布社区案例");
+      if (!description.trim()) setDescription(parsedWorkflow.description || "");
+      if (!category.trim()) setCategory("工作流案例");
+    } catch (parseError) {
+      setWorkflow(null);
+      setError(parseError instanceof Error ? parseError.message : "JSON 解析失败");
+    }
+  };
+
+  const handleWorkflowChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    applyWorkflowText(await readFileAsText(file), file.name);
+  };
+
+  const handleSubmit = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    setNotice(null);
+    setError(null);
+    try {
+      const cleanTitle = title.trim();
+      if (!cleanTitle) throw new Error("请填写案例标题。");
+
+      if (target === "generation") {
+        if (!prompt.trim()) throw new Error("请填写生成页面展示的提示词。");
+        if (!previewUrl) throw new Error("请上传案例图片或填写图片 URL。");
+
+        let coverUrl = imageUrl.trim();
+        let ossKey: string | undefined;
+        if (imageDataUrl) {
+          const uploaded = await aiGenerationClient.uploadAsset({
+            dataUrl: imageDataUrl,
+            name: imageFileName || `${cleanTitle}.png`,
+            scope: "community-case-cover",
+          });
+          coverUrl = uploaded.url || imageDataUrl;
+          ossKey = uploaded.ossKey;
+        }
+
+        await communityClient.publishCase({
+          title: cleanTitle,
+          description: description.trim() || shortDescription(prompt),
+          coverUrl,
+          tags: [category.trim() || "图片案例", "生成页面社区"],
+          metadata: {
+            source: "admin-case-add",
+            communitySurface: "generation",
+            prompt: prompt.trim(),
+            ratio,
+            category: category.trim() || "图片案例",
+          },
+          assets: [
+            {
+              assetType: "cover",
+              title: cleanTitle,
+              url: coverUrl,
+              ossKey,
+              metadata: { prompt: prompt.trim(), ratio },
+            },
+          ],
+        });
+      } else {
+        if (!workflow) throw new Error("请上传或粘贴有效的画布工作流 JSON。");
+        const workflowJson = JSON.stringify(workflow);
+        const uploadedWorkflow = await aiGenerationClient.uploadAsset({
+          dataUrl: textToDataUrl(workflowJson, "application/json"),
+          name: workflowFileName || `${cleanTitle}.json`,
+          mimeType: "application/json",
+          scope: "community-case-workflow",
+        });
+        const coverUrl = workflowCoverUrl || imageUrl.trim();
+        await communityClient.publishCase({
+          title: cleanTitle,
+          description: description.trim() || workflow.description || "管理员添加的画布工作流案例。",
+          coverUrl,
+          tags: [category.trim() || "工作流案例", "画布页面社区"],
+          metadata: {
+            source: "admin-case-add",
+            communitySurface: "canvas",
+            category: category.trim() || "工作流案例",
+            workflow,
+            workflowOssKey: uploadedWorkflow.ossKey || null,
+            workflowUrl: uploadedWorkflow.url || null,
+          },
+          assets: [
+            {
+              assetType: "workflow",
+              title: cleanTitle,
+              url: uploadedWorkflow.url,
+              ossKey: uploadedWorkflow.ossKey,
+              metadata: { workflow, fileName: workflowFileName || null, contentType: "application/json" },
+            },
+          ],
+        });
+      }
+
+      setNotice(`已提交到${targetCopy}审核列表，审核通过后会展示到对应社区。`);
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "案例提交失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!session) {
+    return (
+      <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <LoginOutlined />
+          <h1>请登录工作人员账号</h1>
+          <p>添加社区案例需要登录后访问。</p>
+          <button type="button" onClick={onOpenLogin}>登录 / 注册</button>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  if (!allowed) {
+    return (
+      <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <FileTextOutlined />
+          <h1>当前账号没有管理权限</h1>
+          <p>请切换到 admin 角色账号后再添加案例。</p>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  return (
+    <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+      <div className="community-review-page__inner">
+        <section className="community-review-toolbar">
+          <div>
+            <span>内部案例录入</span>
+            <h1>添加社区案例</h1>
+            <p>管理员录入的案例会先进入社区审核，审核通过后才展示给用户。</p>
+          </div>
+          <div className="community-review-toolbar__actions">
+            <button type="button" onClick={onOpenReview}>
+              <ArrowLeftOutlined />
+              返回审核
+            </button>
+          </div>
+        </section>
+
+        <div className="community-review-tabs community-case-add-targets" role="tablist" aria-label="案例展示位置">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={target === "generation"}
+            className={target === "generation" ? "is-active" : ""}
+            onClick={() => setTarget("generation")}
+          >
+            <PictureOutlined />
+            生成页面社区
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={target === "canvas"}
+            className={target === "canvas" ? "is-active" : ""}
+            onClick={() => setTarget("canvas")}
+          >
+            <FileTextOutlined />
+            画布页面社区
+          </button>
+        </div>
+
+        {error ? <p className="community-review-error">{error}</p> : null}
+        {notice ? (
+          <p className="community-case-add-success">
+            <CheckCircleOutlined />
+            {notice}
+          </p>
+        ) : null}
+
+        <section className="community-case-add-layout">
+          <form className="community-case-add-form" onSubmit={(event) => event.preventDefault()}>
+            <div className="community-case-add-form__grid">
+              <label>
+                <span>案例标题</span>
+                <input value={title} onChange={(event) => setTitle(event.target.value)} placeholder="例如：横版商品主图" />
+              </label>
+              <label>
+                <span>分类标签</span>
+                <input value={category} onChange={(event) => setCategory(event.target.value)} placeholder="图片案例 / 工作流案例" />
+              </label>
+              {target === "generation" ? (
+                <label>
+                  <span>展示比例</span>
+                  <select value={ratio} onChange={(event) => setRatio(event.target.value)}>
+                    {RATIO_OPTIONS.map((option) => (
+                      <option key={option} value={option}>{option}</option>
+                    ))}
+                  </select>
+                </label>
+              ) : null}
+            </div>
+
+            <label>
+              <span>案例简介</span>
+              <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder="审核页和社区卡片使用的简短说明" />
+            </label>
+
+            {target === "generation" ? (
+              <>
+                <label>
+                  <span>提示词</span>
+                  <textarea value={prompt} onChange={(event) => setPrompt(event.target.value)} placeholder="输入用户点击案例后可套用的提示词" />
+                </label>
+                <div className="community-case-add-upload-row">
+                  <input ref={imageInputRef} type="file" accept="image/*" hidden onChange={handleImageChange} />
+                  <button type="button" onClick={() => imageInputRef.current?.click()}>
+                    <UploadOutlined />
+                    上传图片
+                  </button>
+                  <label>
+                    <span>或填写图片 URL</span>
+                    <input value={imageUrl} onChange={(event) => setImageUrl(event.target.value)} placeholder="https://..." />
+                  </label>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="community-case-add-upload-row">
+                  <input ref={workflowInputRef} type="file" accept="application/json,.json" hidden onChange={handleWorkflowChange} />
+                  <button type="button" onClick={() => workflowInputRef.current?.click()}>
+                    <UploadOutlined />
+                    上传 JSON
+                  </button>
+                  <label>
+                    <span>可选封面 URL</span>
+                    <input value={imageUrl} onChange={(event) => setImageUrl(event.target.value)} placeholder="未填写时从节点预览图提取" />
+                  </label>
+                </div>
+                <label>
+                  <span>画布工作流 JSON</span>
+                  <textarea
+                    value={workflowText}
+                    onChange={(event) => applyWorkflowText(event.target.value, workflowFileName)}
+                    placeholder='{"id":"...","version":1,"title":"...","nodes":[...],"edges":[...],"settings":{...}}'
+                  />
+                </label>
+              </>
+            )}
+
+            <div className="community-case-add-actions">
+              <button type="button" onClick={() => void handleSubmit()} disabled={submitting}>
+                <CheckCircleOutlined />
+                {submitting ? "提交中..." : "提交审核"}
+              </button>
+              <button type="button" onClick={onOpenReview}>
+                查看审核列表
+              </button>
+            </div>
+          </form>
+
+          <aside className="community-case-add-preview">
+            <span>{targetCopy}</span>
+            <strong>{title.trim() || "未命名案例"}</strong>
+            <p>{description.trim() || (target === "generation" ? shortDescription(prompt) : workflow?.description) || "提交前可在这里预览案例信息。"}</p>
+            {target === "generation" ? (
+              previewUrl ? (
+                <img src={previewUrl} alt="" style={{ aspectRatio: previewAspectRatio }} />
+              ) : (
+                <div className="community-case-add-preview__empty" style={{ aspectRatio: previewAspectRatio }}>等待图片</div>
+              )
+            ) : workflowCoverUrl || imageUrl.trim() ? (
+              <img src={workflowCoverUrl || imageUrl.trim()} alt="" />
+            ) : (
+              <div className="community-case-add-preview__empty">等待工作流封面</div>
+            )}
+            <dl>
+              <dt>目标</dt>
+              <dd>{targetCopy}</dd>
+              <dt>{target === "generation" ? "比例" : "节点"}</dt>
+              <dd>{target === "generation" ? ratio : workflow ? workflow.nodes.length : 0}</dd>
+              <dt>文件</dt>
+              <dd>{target === "generation" ? imageFileName || "未上传" : workflowFileName || "未上传"}</dd>
+            </dl>
+          </aside>
+        </section>
+      </div>
+    </WorkspacePageShell>
+  );
+}
diff --git a/src/features/community-review/CommunityReviewPage.tsx b/src/features/community-review/CommunityReviewPage.tsx
new file mode 100644
index 0000000..87c9fdd
--- /dev/null
+++ b/src/features/community-review/CommunityReviewPage.tsx
@@ -0,0 +1,391 @@
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  FileSearchOutlined,
+  FlagOutlined,
+  LoginOutlined,
+  PlusCircleOutlined,
+  ReloadOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
+import { reportClient, type AdminReportItem } from "../../api/reportClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebUserSession } from "../../types";
+import { canManageCommunityCases, canReviewCommunity } from "./communityPermissions";
+
+interface CommunityReviewPageProps {
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+  onOpenReport: () => void;
+  onOpenCaseAdd: () => void;
+}
+
+type ReviewStatus = "" | ServerCommunityCase["status"];
+type ModerationTab = "cases" | "reports";
+
+const REVIEW_STATUS_OPTIONS: Array<{ value: ReviewStatus; label: string }> = [
+  { value: "pending", label: "待审核" },
+  { value: "approved", label: "已通过" },
+  { value: "rejected", label: "已驳回" },
+  { value: "", label: "全部" },
+];
+
+const STATUS_LABEL: Record<ServerCommunityCase["status"], string> = {
+  pending: "待审核",
+  approved: "已通过",
+  rejected: "已驳回",
+};
+
+function getCaseCover(item: ServerCommunityCase): string {
+  return (
+    item.coverUrl ||
+    item.assets.find((asset) => asset.assetType === "cover" && asset.url)?.url ||
+    item.assets.find((asset) => (asset.assetType === "image" || asset.assetType === "asset") && asset.url)?.url ||
+    ""
+  );
+}
+
+function getWorkflowStats(item: ServerCommunityCase): { nodes: number; edges: number } {
+  const workflow =
+    item.metadata.workflow ||
+    item.metadata.workflowSnapshot ||
+    (item.metadata.workflowData && typeof item.metadata.workflowData === "object"
+      ? (item.metadata.workflowData as Record<string, unknown>)
+      : null);
+
+  if (!workflow || typeof workflow !== "object" || Array.isArray(workflow)) {
+    return { nodes: 0, edges: 0 };
+  }
+
+  const workflowRecord = workflow as Record<string, unknown>;
+  const nodes = Array.isArray(workflowRecord.nodes) ? workflowRecord.nodes.length : 0;
+  const edges = Array.isArray(workflowRecord.edges) ? workflowRecord.edges.length : 0;
+  return { nodes, edges };
+}
+
+function formatDate(value?: string | null): string {
+  if (!value) return "暂无时间";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function compactType(value?: string | null): string {
+  return value?.trim() || "未填写";
+}
+
+export default function CommunityReviewPage({ session, onOpenLogin, onOpenReport, onOpenCaseAdd }: CommunityReviewPageProps) {
+  const allowed = canReviewCommunity(session);
+  const canAddCase = canManageCommunityCases(session);
+  const [activeTab, setActiveTab] = useState<ModerationTab>("cases");
+  const [status, setStatus] = useState<ReviewStatus>("pending");
+  const [cases, setCases] = useState<ServerCommunityCase[]>([]);
+  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [reports, setReports] = useState<AdminReportItem[]>([]);
+  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  const [reviewNote, setReviewNote] = useState("");
+  const [loadingCases, setLoadingCases] = useState(false);
+  const [loadingReports, setLoadingReports] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedCase = useMemo(
+    () => cases.find((item) => String(item.id) === selectedCaseId) ?? cases[0] ?? null,
+    [cases, selectedCaseId],
+  );
+
+  const selectedReport = useMemo(
+    () => reports.find((item) => String(item.id) === selectedReportId) ?? reports[0] ?? null,
+    [reports, selectedReportId],
+  );
+
+  const loadCases = useCallback(async () => {
+    if (!allowed) return;
+    setLoadingCases(true);
+    setError(null);
+    try {
+      const items = await communityClient.listCasesForReview(status);
+      setCases(items);
+      setSelectedCaseId((current) =>
+        current && items.some((item) => String(item.id) === current) ? current : String(items[0]?.id || ""),
+      );
+    } catch (loadError) {
+      setCases([]);
+      setError(loadError instanceof Error ? loadError.message : "审核列表加载失败");
+    } finally {
+      setLoadingCases(false);
+    }
+  }, [allowed, status]);
+
+  const loadReports = useCallback(async () => {
+    if (!allowed) return;
+    setLoadingReports(true);
+    setError(null);
+    try {
+      const items = await reportClient.listAdminReports();
+      setReports(items);
+      setSelectedReportId((current) =>
+        current && items.some((item) => String(item.id) === current) ? current : String(items[0]?.id || ""),
+      );
+    } catch (loadError) {
+      setReports([]);
+      setError(loadError instanceof Error ? loadError.message : "举报列表加载失败");
+    } finally {
+      setLoadingReports(false);
+    }
+  }, [allowed]);
+
+  useEffect(() => {
+    if (activeTab === "cases") {
+      void loadCases();
+    } else {
+      void loadReports();
+    }
+  }, [activeTab, loadCases, loadReports]);
+
+  const handleDecision = async (nextStatus: "approved" | "rejected") => {
+    if (!selectedCase || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await communityClient.updateReviewStatus(selectedCase.id, nextStatus, reviewNote.trim());
+      setReviewNote("");
+      await loadCases();
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "审核操作失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!session) {
+    return (
+      <WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <LoginOutlined />
+          <h1>请登录工作人员账号</h1>
+          <p>社区作品审核和举报查看需要登录后访问。</p>
+          <button type="button" onClick={onOpenLogin}>登录 / 注册</button>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  if (!allowed) {
+    return (
+      <WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <FileSearchOutlined />
+          <h1>当前账号没有审核权限</h1>
+          <p>请切换到 admin、staff、reviewer 或 moderator 角色账号后再进入审核台。</p>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  const caseStats = selectedCase ? getWorkflowStats(selectedCase) : { nodes: 0, edges: 0 };
+
+  return (
+    <WorkspacePageShell title="社区审核" fullWidth className="community-review-page page-motion">
+      <div className="community-review-page__inner">
+        <section className="community-review-toolbar">
+          <div>
+            <span>内部审核台</span>
+            <h1>社区审核与举报</h1>
+            <p>读取现有服务器审核接口，处理待审作品并查看用户举报。</p>
+          </div>
+          <div className="community-review-toolbar__actions">
+            {canAddCase ? (
+              <button type="button" onClick={onOpenCaseAdd}>
+                <PlusCircleOutlined />
+                添加案例
+              </button>
+            ) : null}
+            <button type="button" onClick={onOpenReport}>
+              <FlagOutlined />
+              举报入口
+            </button>
+            <button
+              type="button"
+              onClick={() => (activeTab === "cases" ? void loadCases() : void loadReports())}
+              disabled={loadingCases || loadingReports}
+            >
+              <ReloadOutlined />
+              刷新
+            </button>
+          </div>
+        </section>
+
+        <div className="community-review-tabs" role="tablist" aria-label="审核类型">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === "cases"}
+            className={activeTab === "cases" ? "is-active" : ""}
+            onClick={() => setActiveTab("cases")}
+          >
+            作品审核
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === "reports"}
+            className={activeTab === "reports" ? "is-active" : ""}
+            onClick={() => setActiveTab("reports")}
+          >
+            举报工单
+          </button>
+        </div>
+
+        {error ? <p className="community-review-error">{error}</p> : null}
+
+        {activeTab === "cases" ? (
+          <>
+            <div className="community-review-status-tabs" role="tablist" aria-label="作品审核状态">
+              {REVIEW_STATUS_OPTIONS.map((option) => (
+                <button
+                  key={option.value || "all"}
+                  type="button"
+                  role="tab"
+                  aria-selected={status === option.value}
+                  className={status === option.value ? "is-active" : ""}
+                  onClick={() => setStatus(option.value)}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+
+            <section className="community-review-layout">
+              <aside className="community-review-list" aria-label="作品列表">
+                {loadingCases ? <div className="community-review-list__empty">正在加载审核作品...</div> : null}
+                {!loadingCases && cases.length === 0 ? (
+                  <div className="community-review-list__empty">暂无需要显示的作品</div>
+                ) : null}
+                {cases.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`community-review-list__item${String(item.id) === String(selectedCase?.id) ? " is-active" : ""}`}
+                    onClick={() => setSelectedCaseId(String(item.id))}
+                  >
+                    {getCaseCover(item) ? <img src={getCaseCover(item)} alt="" /> : <span className="community-review-list__thumb" />}
+                    <span>{STATUS_LABEL[item.status]}</span>
+                    <strong>{item.title}</strong>
+                    <small>{item.username || `UID ${item.userId || "-"}`} · {formatDate(item.updatedAt)}</small>
+                  </button>
+                ))}
+              </aside>
+
+              {selectedCase ? (
+                <article className="community-review-detail">
+                  <div className="community-review-detail__cover">
+                    {getCaseCover(selectedCase) ? <img src={getCaseCover(selectedCase)} alt={selectedCase.title} /> : null}
+                    <span>{STATUS_LABEL[selectedCase.status]}</span>
+                  </div>
+                  <div className="community-review-detail__body">
+                    <header>
+                      <span>{selectedCase.tags[0] || "社区作品"}</span>
+                      <h2>{selectedCase.title}</h2>
+                      <p>{selectedCase.description || "作者未填写作品简介。"}</p>
+                    </header>
+                    <div className="community-review-meta">
+                      <span>作者：{selectedCase.username || `UID ${selectedCase.userId || "-"}`}</span>
+                      <span>状态：{STATUS_LABEL[selectedCase.status]}</span>
+                      <span>节点：{caseStats.nodes}</span>
+                      <span>连线：{caseStats.edges}</span>
+                      <span>收藏：{selectedCase.favoriteCount}</span>
+                      <span>点赞：{selectedCase.likeCount}</span>
+                    </div>
+                    {selectedCase.reviewNote ? (
+                      <p className="community-review-note-preview">上次备注：{selectedCase.reviewNote}</p>
+                    ) : null}
+                    <label className="community-review-note">
+                      <span>审核备注</span>
+                      <textarea
+                        value={reviewNote}
+                        onChange={(event) => setReviewNote(event.target.value)}
+                        placeholder="填写通过说明或驳回原因"
+                      />
+                    </label>
+                    <div className="community-review-actions">
+                      <button type="button" disabled={submitting} onClick={() => void handleDecision("rejected")}>
+                        <CloseCircleOutlined />
+                        驳回
+                      </button>
+                      <button type="button" disabled={submitting} onClick={() => void handleDecision("approved")}>
+                        <CheckCircleOutlined />
+                        通过
+                      </button>
+                    </div>
+                  </div>
+                </article>
+              ) : (
+                <div className="community-review-detail community-review-detail--empty">选择左侧作品查看详情</div>
+              )}
+            </section>
+          </>
+        ) : (
+          <section className="community-review-layout community-review-layout--reports">
+            <aside className="community-review-list" aria-label="举报列表">
+              {loadingReports ? <div className="community-review-list__empty">正在加载举报...</div> : null}
+              {!loadingReports && reports.length === 0 ? (
+                <div className="community-review-list__empty">暂无举报工单</div>
+              ) : null}
+              {reports.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`community-review-list__item${String(item.id) === String(selectedReport?.id) ? " is-active" : ""}`}
+                  onClick={() => setSelectedReportId(String(item.id))}
+                >
+                  <span>{item.status}</span>
+                  <strong>{item.title}</strong>
+                  <small>{compactType(item.reportType)} · {formatDate(item.createdAt)}</small>
+                </button>
+              ))}
+            </aside>
+
+            {selectedReport ? (
+              <article className="community-review-detail community-review-report-detail">
+                <div className="community-review-detail__body">
+                  <header>
+                    <span>{selectedReport.status}</span>
+                    <h2>{selectedReport.title}</h2>
+                    <p>{selectedReport.description || "举报人未填写详情。"}</p>
+                  </header>
+                  <div className="community-review-meta">
+                    <span>举报类型：{compactType(selectedReport.reportType)}</span>
+                    <span>对象类型：{compactType(selectedReport.targetType)}</span>
+                    <span>对象 ID：{compactType(selectedReport.targetId)}</span>
+                    <span>提交人：{selectedReport.username || selectedReport.contactName || "匿名"}</span>
+                    <span>邮箱：{compactType(selectedReport.contactEmail)}</span>
+                    <span>电话：{compactType(selectedReport.contactPhone)}</span>
+                  </div>
+                  {selectedReport.pageUrl ? (
+                    <a className="community-review-link" href={selectedReport.pageUrl} target="_blank" rel="noreferrer">
+                      打开举报页面来源
+                    </a>
+                  ) : null}
+                  <div className="community-review-report-raw">
+                    <span>客户端信息</span>
+                    <p>{selectedReport.userAgent || "暂无"}</p>
+                    <small>{selectedReport.ipAddress || "未记录 IP"}</small>
+                  </div>
+                </div>
+              </article>
+            ) : (
+              <div className="community-review-detail community-review-detail--empty">选择左侧举报查看详情</div>
+            )}
+          </section>
+        )}
+      </div>
+    </WorkspacePageShell>
+  );
+}
diff --git a/src/features/community-review/communityPermissions.ts b/src/features/community-review/communityPermissions.ts
new file mode 100644
index 0000000..d2f2bd6
--- /dev/null
+++ b/src/features/community-review/communityPermissions.ts
@@ -0,0 +1,15 @@
+import type { WebUserSession } from "../../types";
+
+const REVIEW_ROLES = new Set(["admin", "staff", "reviewer", "moderator"]);
+
+function getRole(session: WebUserSession | null): string {
+  return String(session?.user.role || "").toLowerCase();
+}
+
+export function canReviewCommunity(session: WebUserSession | null): boolean {
+  return REVIEW_ROLES.has(getRole(session));
+}
+
+export function canManageCommunityCases(session: WebUserSession | null): boolean {
+  return getRole(session) === "admin";
+}
diff --git a/src/features/community/CommunityPage.tsx b/src/features/community/CommunityPage.tsx
new file mode 100644
index 0000000..a04375f
--- /dev/null
+++ b/src/features/community/CommunityPage.tsx
@@ -0,0 +1,529 @@
+import {
+  DeleteOutlined,
+  HeartFilled,
+  HeartOutlined,
+  ImportOutlined,
+  LeftOutlined,
+  PictureOutlined,
+  PlusOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import OptimizedImage from "../../components/OptimizedImage";
+import { EmptyState } from "../../components/EmptyState";
+import { cloneWorkflow, createBlankWorkflow } from "../../data/workflows";
+import type { WebCanvasWorkflow, WebProjectSummary } from "../../types";
+import { getCommunityCaseCover, getWorkflowFromCase, shouldShowInCanvasCommunity } from "./communityCaseUtils";
+import { ossThumb } from "../../utils/ossImageOptimize";
+import wechatCaseImage10 from "../../../tu/微信图片_20260514125332_10_2.png";
+import wechatCaseImage11 from "../../../tu/微信图片_20260514125332_11_2.png";
+import wechatCaseImage12 from "../../../tu/微信图片_20260514125332_12_2.png";
+import wechatCaseImage7 from "../../../tu/微信图片_20260514125332_7_2.png";
+import wechatCaseImage8 from "../../../tu/微信图片_20260514125332_8_2.png";
+import wechatCaseImage9 from "../../../tu/微信图片_20260514125332_9_2.png";
+
+interface CommunityPageProps {
+  projects: WebProjectSummary[];
+  isAuthenticated: boolean;
+  onStartCreate: () => void;
+  onOpenProject: (project: WebProjectSummary) => void;
+  onDeleteProject?: (project: WebProjectSummary) => void;
+  onImportWorkflow: (workflow: WebCanvasWorkflow) => void;
+  onRequireLogin?: (action: string) => boolean | void;
+}
+
+const communityCardImages = [
+  wechatCaseImage7,
+  wechatCaseImage8,
+  wechatCaseImage9,
+  wechatCaseImage10,
+  wechatCaseImage11,
+  wechatCaseImage12,
+];
+
+const SLIDE_INTERVAL = 3000;
+const CAROUSEL_VISIBLE_COUNT = 3;
+const MANUAL_PAUSE_DURATION = 2000;
+const COMMUNITY_CAROUSEL_VIDEOS = [
+  "https://stringtest.oss-cn-hangzhou.aliyuncs.com/test3.mp4",
+  "https://stringtest.oss-cn-hangzhou.aliyuncs.com/test4.mp4",
+  "https://stringtest.oss-cn-hangzhou.aliyuncs.com/test6.mp4",
+];
+
+function buildWorkflowFromServerCase(item: ServerCommunityCase, fallback: WebCanvasWorkflow): WebCanvasWorkflow {
+  const workflow = getWorkflowFromCase(item);
+  if (workflow) {
+    return cloneWorkflow(workflow);
+  }
+
+  const coverUrl = getCommunityCaseCover(item);
+  return {
+    ...cloneWorkflow(fallback),
+    id: `community-server-${item.id}`,
+    title: item.title,
+    description: item.description || fallback.description,
+    author: item.username || fallback.author,
+    source: "community",
+    nodes: fallback.nodes.map((node) =>
+      node.id === "reference" && coverUrl ? { ...node, previewUrl: coverUrl } : node,
+    ),
+  };
+}
+
+function CommunityPage({ projects, isAuthenticated, onStartCreate, onOpenProject, onDeleteProject, onImportWorkflow, onRequireLogin }: CommunityPageProps) {
+  const [serverCases, setServerCases] = useState<ServerCommunityCase[]>([]);
+  const [serverNotice, setServerNotice] = useState<string | null>(null);
+  const [favoriteIds, setFavoriteIds] = useState<string[]>([]);
+  const canUseProtectedAction = (action: string) => onRequireLogin?.(action) !== false;
+
+  const handleStartCreate = () => {
+    if (!canUseProtectedAction("start-community-project")) return;
+    onStartCreate();
+  };
+
+  const handleImportWorkflow = (workflow: WebCanvasWorkflow) => {
+    if (!canUseProtectedAction("import-community-workflow")) return;
+    onImportWorkflow(workflow);
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    communityClient
+      .listApprovedCases()
+      .then((items) => {
+        if (!cancelled) {
+          const canvasItems = items.filter(shouldShowInCanvasCommunity);
+          setServerCases(canvasItems);
+          setServerNotice(
+            canvasItems.length
+              ? "已连接服务器画布社区"
+              : items.length
+                ? "服务器暂无已审核画布案例"
+                : "社区暂无模板",
+          );
+        }
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          setServerCases([]);
+          setServerNotice(error instanceof Error ? error.message : "社区服务暂时不可用");
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const getProjectTitle = (project: WebProjectSummary, index: number) =>
+    project.source === "server" ? project.name : `预览项目 ${index + 1}`;
+
+  const getProjectSummary = (project: WebProjectSummary) => {
+    if (project.source === "server") {
+      return project.description || "最近更新的项目";
+    }
+    return "预览数据";
+  };
+
+  /* Carousel state */
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [carouselTransitionEnabled, setCarouselTransitionEnabled] = useState(true);
+  const [isHoverPaused, setIsHoverPaused] = useState(false);
+  const [isManualPaused, setIsManualPaused] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const manualPauseTimerRef = useRef<number | null>(null);
+
+  const carouselCases = useMemo(
+    () =>
+      COMMUNITY_CAROUSEL_VIDEOS.map((videoUrl, index) => ({
+        title: `社区视频 ${index + 1}`,
+        videoUrl,
+      })),
+    [],
+  );
+  const totalSlides = carouselCases.length;
+  const visibleCarouselCases = useMemo(
+    () => [...carouselCases, ...carouselCases.slice(0, CAROUSEL_VISIBLE_COUNT)],
+    [carouselCases],
+  );
+  const activeCarouselIndex = (currentIndex + 1) % totalSlides;
+  const centerCarouselItemIndex = currentIndex + Math.floor(CAROUSEL_VISIBLE_COUNT / 2);
+  const isAutoPaused = isHoverPaused || isManualPaused;
+
+  const pauseAutoCarousel = useCallback(() => {
+    setIsManualPaused(true);
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    if (manualPauseTimerRef.current) {
+      window.clearTimeout(manualPauseTimerRef.current);
+    }
+    manualPauseTimerRef.current = window.setTimeout(() => {
+      setIsManualPaused(false);
+      manualPauseTimerRef.current = null;
+    }, MANUAL_PAUSE_DURATION);
+  }, []);
+
+  const goNext = useCallback((pause = true) => {
+    if (pause) pauseAutoCarousel();
+    setCarouselTransitionEnabled(true);
+    setCurrentIndex((prev) => prev + 1);
+  }, [pauseAutoCarousel]);
+
+  const goPrev = useCallback(() => {
+    pauseAutoCarousel();
+    setCarouselTransitionEnabled(true);
+    setCurrentIndex((prev) => {
+      if (prev > 0) return prev - 1;
+
+      setCarouselTransitionEnabled(false);
+      window.requestAnimationFrame(() => {
+        setCurrentIndex(totalSlides);
+        window.requestAnimationFrame(() => {
+          setCarouselTransitionEnabled(true);
+          setCurrentIndex(totalSlides - 1);
+        });
+      });
+      return prev;
+    });
+  }, [pauseAutoCarousel, totalSlides]);
+
+  const handlePrevClick = useCallback(() => {
+    goPrev();
+  }, [goPrev]);
+
+  const handleNextClick = useCallback(() => {
+    pauseAutoCarousel();
+    goNext(false);
+  }, [goNext, pauseAutoCarousel]);
+
+  const goTo = useCallback((index: number) => {
+    setCarouselTransitionEnabled(true);
+    setCurrentIndex((index - 1 + totalSlides) % totalSlides);
+  }, [totalSlides]);
+
+  const handleCarouselTransitionEnd = () => {
+    if (currentIndex < totalSlides) return;
+
+    setCarouselTransitionEnabled(false);
+    setCurrentIndex(0);
+    window.requestAnimationFrame(() => {
+      setCarouselTransitionEnabled(true);
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoPaused) return;
+    timerRef.current = setInterval(() => goNext(false), SLIDE_INTERVAL);
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [isAutoPaused, goNext]);
+
+  useEffect(() => {
+    return () => {
+      if (manualPauseTimerRef.current) {
+        window.clearTimeout(manualPauseTimerRef.current);
+      }
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const timeoutId = window.setTimeout(() => {
+      communityClient
+        .listApprovedCases({
+          limit: 30,
+          sort: "latest",
+        })
+        .then((items) => {
+          if (!cancelled) {
+            const canvasItems = items.filter(shouldShowInCanvasCommunity);
+            setServerCases(canvasItems);
+            setServerNotice(
+              canvasItems.length
+                ? "已连接服务器画布社区"
+                : items.length
+                  ? "服务器暂无匹配画布案例"
+                  : "社区暂无模板",
+            );
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            setServerNotice(error instanceof Error ? error.message : "社区服务暂时不可用");
+          }
+        });
+    }, 280);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+    };
+  }, []);
+
+  const handleToggleFavorite = async (item: ServerCommunityCase, cardId: string) => {
+    const nextActive = !(item.isFavorited || favoriteIds.includes(cardId));
+    setFavoriteIds((current) =>
+      nextActive ? Array.from(new Set([...current, cardId])) : current.filter((id) => id !== cardId),
+    );
+    setServerCases((current) =>
+      current.map((caseItem) =>
+        caseItem.id === item.id
+          ? {
+              ...caseItem,
+              isFavorited: nextActive,
+              favoriteCount: Math.max(0, caseItem.favoriteCount + (nextActive ? 1 : -1)),
+            }
+          : caseItem,
+      ),
+    );
+
+    if (!isAuthenticated || !serverCases.some((caseItem) => caseItem.id === item.id)) return;
+    try {
+      const stats = await communityClient.setReaction(item.id, "favorite", nextActive);
+      setServerCases((current) =>
+        current.map((caseItem) => (caseItem.id === item.id ? { ...caseItem, ...stats } : caseItem)),
+      );
+    } catch (error) {
+      setServerNotice(error instanceof Error ? error.message : "收藏状态同步失败");
+    }
+  };
+
+  const liveCases: ServerCommunityCase[] = serverCases.slice(0, 12);
+
+  return (
+    <WorkspacePageShell title="社区" fullWidth className="community-page page-motion">
+      <section className="community-hero">
+        <div
+          className="community-carousel"
+          onMouseEnter={() => setIsHoverPaused(true)}
+          onMouseLeave={() => setIsHoverPaused(false)}
+          role="region"
+          aria-label="示例预览轮播"
+        >
+          <div
+            className={`community-carousel__track${carouselTransitionEnabled ? "" : " is-resetting"}`}
+            style={{ transform: `translateX(-${currentIndex * (100 / CAROUSEL_VISIBLE_COUNT)}%)` }}
+            onTransitionEnd={handleCarouselTransitionEnd}
+          >
+            {visibleCarouselCases.map((card, index) => (
+              <article
+                key={`${card.videoUrl}-${index}`}
+                className={`community-carousel__slide community-carousel__slide--video${index === centerCarouselItemIndex ? " is-center" : ""}`}
+                aria-hidden={index !== centerCarouselItemIndex}
+              >
+                <video
+                  className="community-carousel__video"
+                  src={card.videoUrl}
+                  title={card.title}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  preload="metadata"
+                />
+              </article>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            className="community-carousel__arrow community-carousel__arrow--prev"
+            onClick={handlePrevClick}
+            aria-label="上一张"
+          >
+            <LeftOutlined />
+          </button>
+          <button
+            type="button"
+            className="community-carousel__arrow community-carousel__arrow--next"
+            onClick={handleNextClick}
+            aria-label="下一张"
+          >
+            <RightOutlined />
+          </button>
+
+          <div className="community-carousel__dots" role="tablist" aria-label="幻灯片指示器">
+            {carouselCases.map((_, index) => (
+              <button
+                key={index}
+                type="button"
+                role="tab"
+                aria-selected={index === activeCarouselIndex}
+                aria-label={`第 ${index + 1} 张`}
+                className={index === activeCarouselIndex ? "is-active" : ""}
+                onClick={() => goTo(index)}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="community-section">
+        <div className="community-section__head">
+          <div>
+            <h2>最近项目</h2>
+          </div>
+          {isAuthenticated && <span className="studio-pill">{projects.length} 个项目</span>}
+        </div>
+        <div className="project-row">
+          <button
+            type="button"
+            className="project-card project-card--button project-card--new"
+            onClick={handleStartCreate}
+          >
+            <PlusOutlined style={{ fontSize: 28 }} />
+            <div className="project-card__meta">
+              <strong>新建项目</strong>
+            </div>
+          </button>
+          {isAuthenticated && projects.map((project, index) => (
+            <div key={project.id} className="project-card-shell">
+              <button
+                type="button"
+                className="project-card project-card--button"
+                onClick={() => onOpenProject(project)}
+              >
+                {project.thumbnailUrl ? (
+                  <OptimizedImage src={ossThumb(project.thumbnailUrl)} alt="" />
+                ) : (
+                  <span className="project-card__empty project-card__empty--dark">
+                    <PictureOutlined />
+                  </span>
+                )}
+                <span className="project-card__caption">{getProjectSummary(project)}</span>
+                <div className="project-card__meta">
+                  <strong>{getProjectTitle(project, index)}</strong>
+                </div>
+              </button>
+              {onDeleteProject ? (
+                <button
+                  type="button"
+                  className="project-card__delete"
+                  aria-label={`删除项目 ${project.name}`}
+                  onClick={() => onDeleteProject(project)}
+                >
+                  <DeleteOutlined />
+                </button>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="community-section">
+        <div className="community-section__head">
+          <div>
+            <h2>社区精选</h2>
+          </div>
+          {serverNotice ? <span className="studio-pill">{serverNotice}</span> : null}
+        </div>
+        {liveCases.length ? (
+          <div className="community-case-grid community-case-grid--mosaic motion-stagger">
+            {liveCases.map((item, index) => {
+            const fallbackWorkflow = createBlankWorkflow(item.title);
+            const workflow = buildWorkflowFromServerCase(item, fallbackWorkflow);
+            const cardId = `case-${item.id}`;
+            const isFavorite = item.isFavorited || favoriteIds.includes(cardId);
+            const imageUrl = getCommunityCaseCover(item) || communityCardImages[index % communityCardImages.length] || fallbackWorkflow.nodes.find((node) => node.previewUrl)?.previewUrl || "";
+            return (
+              <article
+                key={cardId}
+                className={`community-case-card community-case-card--mosaic community-case-card--tile-${index % 8}`}
+                onClick={() => handleImportWorkflow(workflow)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    handleImportWorkflow(workflow);
+                  }
+                }}
+                tabIndex={0}
+              >
+                <button
+                  type="button"
+                  className="community-case-card__preview"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleImportWorkflow(workflow);
+                  }}
+                  aria-label={`导入 ${item.title} 工作流`}
+                >
+                  <OptimizedImage src={ossThumb(imageUrl)} alt={item.title} />
+                </button>
+                <p className="community-case-card__caption">{item.description || "可一键导入工作流继续创作。"}</p>
+                <div
+                  className="community-case-card__body"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => handleImportWorkflow(workflow)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      handleImportWorkflow(workflow);
+                    }
+                  }}
+                >
+                  <div className="community-case-card__author">
+                    <span>{item.username || "OmniAI"}</span>
+                    <span>{item.tags[0] || item.status}</span>
+                  </div>
+                  <strong>{item.title}</strong>
+                  <p>{item.description || "Import this workflow and continue creating."}</p>
+                  <div className="community-card-actions">
+                    <button
+                      type="button"
+                      className={isFavorite ? "is-active" : ""}
+                      aria-pressed={isFavorite}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        void handleToggleFavorite(item, cardId);
+                      }}
+                    >
+                      {isFavorite ? <HeartFilled /> : <HeartOutlined />}
+                      {isFavorite ? "已收藏" : `收藏${item.favoriteCount ? ` ${item.favoriteCount}` : ""}`}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleImportWorkflow(workflow);
+                      }}
+                    >
+                      <ImportOutlined />
+                      导入工作流
+                    </button>
+                  </div>
+                </div>
+              </article>
+            );
+            })}
+          </div>
+        ) : (
+          <EmptyState
+            icon={<ImportOutlined style={{ fontSize: 48 }} />}
+            title="社区暂无模板"
+            description="管理员审核通过后，画布社区案例会显示在这里。"
+          />
+        )}
+      </section>
+
+      <section className="community-section community-section--browse-more">
+        <button type="button" onClick={handleStartCreate}>
+          新建空白画布 <RightOutlined />
+        </button>
+      </section>
+    </WorkspacePageShell>
+  );
+}
+
+export default CommunityPage;
diff --git a/src/features/community/communityCaseUtils.ts b/src/features/community/communityCaseUtils.ts
new file mode 100644
index 0000000..18c8cd0
--- /dev/null
+++ b/src/features/community/communityCaseUtils.ts
@@ -0,0 +1,166 @@
+import type { ServerCommunityAsset, ServerCommunityCase } from "../../api/communityClient";
+import type { WebCanvasWorkflow } from "../../types";
+
+export type CommunityCaseSurface = "generation" | "canvas" | "unknown";
+
+export interface PromptCaseViewModel {
+  id: string;
+  title: string;
+  author: string;
+  category: string;
+  imageUrl: string;
+  summary: string;
+  prompt: string;
+  ratio: string;
+}
+
+export interface PromptCaseRatioLike {
+  ratio?: string | null;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function toStringValue(value: unknown, fallback = ""): string {
+  if (typeof value === "string") return value.trim() || fallback;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return fallback;
+}
+
+function normalizeSurface(value: unknown): CommunityCaseSurface {
+  const normalized = toStringValue(value).toLowerCase();
+  if (!normalized) return "unknown";
+  if (normalized === "generation" || normalized === "workbench" || normalized.includes("生成")) return "generation";
+  if (normalized === "canvas" || normalized === "workflow" || normalized.includes("画布")) return "canvas";
+  return "unknown";
+}
+
+function getMetadata(item: Pick<ServerCommunityCase, "metadata">): Record<string, unknown> {
+  return isRecord(item.metadata) ? item.metadata : {};
+}
+
+function getAssetUrl(asset: ServerCommunityAsset): string {
+  return toStringValue(asset.url);
+}
+
+export function isCanvasWorkflow(value: unknown): value is WebCanvasWorkflow {
+  return Boolean(
+    isRecord(value) &&
+      Array.isArray(value.nodes) &&
+      Array.isArray(value.edges) &&
+      isRecord(value.settings),
+  );
+}
+
+export function getWorkflowFromCase(item: Pick<ServerCommunityCase, "metadata">): WebCanvasWorkflow | null {
+  const metadata = getMetadata(item);
+  const candidates = [
+    metadata.workflow,
+    metadata.workflowSnapshot,
+    metadata.workflowData,
+    metadata.canvasWorkflow,
+  ];
+  return candidates.find(isCanvasWorkflow) ?? null;
+}
+
+export function getWorkflowCoverUrl(workflow: unknown): string {
+  if (!isRecord(workflow) || !Array.isArray(workflow.nodes)) return "";
+  const previewNode = workflow.nodes.find((node) => isRecord(node) && toStringValue(node.previewUrl));
+  return isRecord(previewNode) ? toStringValue(previewNode.previewUrl) : "";
+}
+
+export function getCommunityCaseCover(item: Pick<ServerCommunityCase, "coverUrl" | "assets" | "metadata">): string {
+  return (
+    toStringValue(item.coverUrl) ||
+    getWorkflowCoverUrl(getWorkflowFromCase(item)) ||
+    item.assets.find((asset) => asset.assetType === "cover" && getAssetUrl(asset))?.url ||
+    item.assets.find((asset) => (asset.assetType === "image" || asset.assetType === "asset") && getAssetUrl(asset))?.url ||
+    ""
+  );
+}
+
+export function getCommunityCaseSurface(item: Pick<ServerCommunityCase, "metadata" | "tags" | "coverUrl" | "assets">): CommunityCaseSurface {
+  const metadata = getMetadata(item);
+  const explicitSurface = normalizeSurface(
+    metadata.communitySurface ??
+      metadata.targetSurface ??
+      metadata.surface ??
+      metadata.communityTarget ??
+      metadata.targetCommunity,
+  );
+  if (explicitSurface !== "unknown") return explicitSurface;
+
+  const tags = item.tags.map((tag) => tag.trim()).filter(Boolean);
+  if (tags.some((tag) => tag.includes("生成页面社区") || tag === "Web生成")) return "generation";
+  if (tags.some((tag) => tag.includes("画布页面社区") || tag.includes("工作流"))) return "canvas";
+  if (getWorkflowFromCase(item)) return "canvas";
+  if (toStringValue(metadata.prompt) && getCommunityCaseCover(item)) return "generation";
+  return "unknown";
+}
+
+export function shouldShowInCanvasCommunity(item: Pick<ServerCommunityCase, "metadata" | "tags" | "coverUrl" | "assets">): boolean {
+  return getCommunityCaseSurface(item) === "canvas";
+}
+
+export function communityCaseToPromptCase(item: ServerCommunityCase): PromptCaseViewModel | null {
+  if (getCommunityCaseSurface(item) !== "generation") return null;
+
+  const metadata = getMetadata(item);
+  const imageUrl = getCommunityCaseCover(item);
+  const prompt = toStringValue(metadata.prompt ?? metadata.inputPrompt ?? metadata.descriptionPrompt, item.description || "");
+  if (!imageUrl || !prompt) return null;
+
+  const category =
+    toStringValue(metadata.category) ||
+    item.tags.find((tag) => tag !== "生成页面社区" && tag !== "Web生成" && tag !== "图片") ||
+    "图片案例";
+
+  return {
+    id: `server-prompt-case-${item.id}`,
+    title: item.title,
+    author: item.username || "OmniAI",
+    category,
+    imageUrl,
+    summary: item.description || "管理员添加的生成页图片案例。",
+    prompt,
+    ratio: toStringValue(metadata.ratio ?? metadata.imageRatio ?? metadata.aspectRatio, "16:9"),
+  };
+}
+
+function parseRatioValue(value: string): number | null {
+  const normalized = value.replace(/\s+/g, "");
+  const pair = normalized.match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
+  if (pair) {
+    const width = Number(pair[1]);
+    const height = Number(pair[2]);
+    return width > 0 && height > 0 ? width / height : null;
+  }
+
+  const numeric = Number(normalized);
+  return Number.isFinite(numeric) && numeric > 0 ? numeric : null;
+}
+
+function getPromptCaseRatioClassName(numericRatio: number): string {
+  return numericRatio >= 1.15
+    ? "wb-prompt-case-card--ratio-wide"
+    : numericRatio >= 0.95
+      ? "wb-prompt-case-card--ratio-square"
+      : numericRatio >= 0.72
+        ? "wb-prompt-case-card--ratio-portrait"
+        : "wb-prompt-case-card--ratio-tall";
+}
+
+export function getPromptCaseCardClassName(
+  item: PromptCaseRatioLike,
+  index: number,
+  measuredRatio?: number | null,
+): string {
+  const ratio = toStringValue(item.ratio, "16:9").replace(/\s+/g, "");
+  const measured = typeof measuredRatio === "number" && Number.isFinite(measuredRatio) && measuredRatio > 0 ? measuredRatio : null;
+  const numericRatio = measured ?? parseRatioValue(ratio) ?? 16 / 9;
+  const ratioClass = getPromptCaseRatioClassName(numericRatio);
+  const sourceRatioClass = ratio ? ` wb-prompt-case-card--source-${ratio.replace(":", "-")}` : "";
+  const measuredClass = measured ? " wb-prompt-case-card--measured" : "";
+  return `wb-prompt-case-card ${ratioClass} wb-prompt-case-card--index-${index % 8}${sourceRatioClass}${measuredClass}`;
+}
diff --git a/src/features/digital-human/AvatarConsolePage.tsx b/src/features/digital-human/AvatarConsolePage.tsx
new file mode 100644
index 0000000..2939295
--- /dev/null
+++ b/src/features/digital-human/AvatarConsolePage.tsx
@@ -0,0 +1,1441 @@
+import {
+  ApiOutlined,
+  ArrowLeftOutlined,
+  AudioOutlined,
+  CloseOutlined,
+  CommentOutlined,
+  CustomerServiceOutlined,
+  DeploymentUnitOutlined,
+  DownOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  FontSizeOutlined,
+  HistoryOutlined,
+  BlockOutlined,
+  InboxOutlined,
+  PictureOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SettingOutlined,
+  SoundOutlined,
+  StarFilled,
+  StarOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import { useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react";
+import type { WebViewKey } from "../../types";
+import {
+  bringAvatarEditorLayerForward,
+  createDefaultAvatarEditorLayers,
+  moveAvatarEditorLayer,
+  sendAvatarEditorLayerBackward,
+  type AvatarEditorLayer,
+  type AvatarEditorLayerId,
+} from "./avatarEditorModel";
+import {
+  VOICE_CLONE_SCRIPT,
+  createVoiceCloneDraft,
+  voiceCloneLanguageOptions,
+  voiceLibraryTabs,
+  type VoiceLibraryTabKey,
+} from "./voiceLibraryModel";
+import {
+  avatarTrainingScenarios,
+  continueAvatarTraining,
+  createAvatarTrainingDraft,
+  selectAvatarTrainingScenario,
+  type AvatarTrainingDraft,
+  type AvatarTrainingScenarioKey,
+} from "./avatarTrainingModel";
+
+type ConsoleView = "explore" | "videos" | "chat" | "live" | "avatars" | "voices";
+type BroadcastRatio = "16:9" | "9:16";
+type EditorTool = "avatar" | "content" | "subtitle" | "background" | "sticker";
+
+interface AvatarConsolePageProps {
+  onOpenMore?: () => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+interface ConsoleNavItem {
+  key: ConsoleView;
+  label: string;
+  icon: JSX.Element;
+}
+
+interface AvatarCard {
+  name: string;
+  type: string;
+  tone: string;
+  background: string;
+  accent: string;
+}
+
+interface VoiceCard {
+  name: string;
+  language: string;
+  gender: string;
+  description: string;
+  gradient: string;
+}
+
+const productNav: ConsoleNavItem[] = [
+  { key: "chat", label: "对话互动", icon: <CommentOutlined /> },
+  { key: "live", label: "直播", icon: <VideoCameraOutlined /> },
+];
+
+const assetNav: ConsoleNavItem[] = [
+  { key: "avatars", label: "形象库", icon: <CustomerServiceOutlined /> },
+  { key: "voices", label: "声音库", icon: <AudioOutlined /> },
+];
+
+const quickNav: ConsoleNavItem[] = [
+  { key: "explore", label: "探索", icon: <StarOutlined /> },
+  { key: "videos", label: "我的视频", icon: <PlayCircleOutlined /> },
+];
+
+const editorTools: Array<{
+  key: EditorTool;
+  label: string;
+  icon: JSX.Element;
+}> = [
+  { key: "avatar", label: "形象", icon: <CustomerServiceOutlined /> },
+  { key: "content", label: "内容", icon: <SoundOutlined /> },
+  { key: "subtitle", label: "字幕", icon: <FontSizeOutlined /> },
+  { key: "background", label: "背景", icon: <PictureOutlined /> },
+  { key: "sticker", label: "贴图", icon: <StarOutlined /> },
+];
+
+const avatarCards: AvatarCard[] = [
+  { name: "萌娃陪伴", type: "对话数字人", tone: "儿童陪伴", background: "rgb(246 230 232)", accent: "rgb(225 108 118)" },
+  { name: "心宁咨询", type: "对话数字人", tone: "心理咨询", background: "rgb(245 232 223)", accent: "rgb(196 126 86)" },
+  { name: "健康小助理", type: "对话数字人", tone: "健康科普", background: "rgb(238 240 251)", accent: "rgb(98 111 205)" },
+  { name: "口语陪练", type: "对话数字人", tone: "语言教学", background: "rgb(224 241 247)", accent: "rgb(67 141 167)" },
+  { name: "文旅杭韵", type: "对话数字人", tone: "文旅讲解", background: "rgb(252 235 244)", accent: "rgb(198 91 137)" },
+  { name: "街头潮燃", type: "对话数字人", tone: "年轻潮流", background: "rgb(230 239 245)", accent: "rgb(57 91 116)" },
+  { name: "金融顾问", type: "商务数字人", tone: "专业顾问", background: "rgb(238 238 237)", accent: "rgb(73 80 92)" },
+  { name: "情感陪伴", type: "对话数字人", tone: "温柔陪伴", background: "rgb(249 246 243)", accent: "rgb(188 119 93)" },
+  { name: "心理治疗师", type: "对话数字人", tone: "疗愈咨询", background: "rgb(242 232 222)", accent: "rgb(181 117 78)" },
+  { name: "灵舒", type: "2D图片训练数字人", tone: "温柔讲解", background: "rgb(221 232 238)", accent: "rgb(89 117 132)" },
+  { name: "雅韵", type: "直播数字人", tone: "美妆导购", background: "rgb(253 230 218)", accent: "rgb(226 126 91)" },
+  { name: "商务主持", type: "播报数字人", tone: "企业介绍", background: "rgb(225 233 249)", accent: "rgb(70 101 167)" },
+];
+
+const voiceCards: VoiceCard[] = [
+  { name: "冷静女孩", language: "中英文", gender: "女", description: "沉着淡定，理智清晰", gradient: "linear-gradient(135deg, rgb(93 224 199), rgb(99 120 242))" },
+  { name: "高亢直播女", language: "中英文", gender: "女", description: "洪亮昂扬，活力四射", gradient: "linear-gradient(135deg, rgb(108 213 198), rgb(255 194 104))" },
+  { name: "激情男主播", language: "中英文", gender: "男", description: "热烈奔放，超强感染", gradient: "linear-gradient(135deg, rgb(255 196 114), rgb(255 108 99))" },
+  { name: "青涩男孩", language: "中英文", gender: "男", description: "青涩稚嫩，真诚率直", gradient: "linear-gradient(135deg, rgb(250 202 241), rgb(255 111 73))" },
+  { name: "雅知清声", language: "中英文", gender: "女", description: "优雅知性，清晰明快", gradient: "linear-gradient(135deg, rgb(109 218 194), rgb(255 180 94))" },
+  { name: "慧海男声", language: "中英文", gender: "男", description: "睿智沉稳，学识渊博", gradient: "linear-gradient(135deg, rgb(99 116 247), rgb(103 215 221))" },
+  { name: "黛玉柔声", language: "中英文", gender: "女", description: "轻柔纤细，温婉多思", gradient: "linear-gradient(135deg, rgb(255 123 91), rgb(245 187 244))" },
+  { name: "日语女孩", language: "日文", gender: "女", description: "温柔甜美，日式清新", gradient: "linear-gradient(135deg, rgb(255 116 133), rgb(252 239 241))" },
+  { name: "天真女童", language: "中英文", gender: "女", description: "稚嫩清脆，天真无邪", gradient: "linear-gradient(135deg, rgb(87 231 205), rgb(63 129 218))" },
+  { name: "智慧男孩", language: "中英文", gender: "男", description: "朝气明亮，活力满满", gradient: "linear-gradient(135deg, rgb(69 135 224), rgb(225 243 255))" },
+  { name: "lauren", language: "英文", gender: "女", description: "俏皮美音，灵动活泼", gradient: "linear-gradient(135deg, rgb(255 188 99), rgb(246 114 93))" },
+  { name: "元气甜妹", language: "中英文", gender: "女", description: "清甜灵动，元气满格", gradient: "linear-gradient(135deg, rgb(106 186 236), rgb(225 240 252))" },
+  { name: "播音男孩", language: "中英文", gender: "男", description: "字正腔圆，播音质感", gradient: "linear-gradient(135deg, rgb(113 205 244), rgb(108 89 235))" },
+  { name: "体育女主播", language: "中英文", gender: "女", description: "活泼有趣，氛围担当", gradient: "linear-gradient(135deg, rgb(255 187 96), rgb(245 109 91))" },
+  { name: "贴心女友", language: "中英文", gender: "女", description: "温柔细腻，贴心共情", gradient: "linear-gradient(135deg, rgb(104 180 234), rgb(45 119 222))" },
+  { name: "暖心菲菲", language: "中英文", gender: "女", description: "温暖治愈，轻柔抚慰", gradient: "linear-gradient(135deg, rgb(255 182 94), rgb(255 116 100))" },
+  { name: "Daniel", language: "英文", gender: "男", description: "沉稳美音，成熟从容", gradient: "linear-gradient(135deg, rgb(106 185 240), rgb(39 118 218))" },
+  { name: "热场小甜椒", language: "中英文", gender: "女", description: "甜嗓控场，热梗连发", gradient: "linear-gradient(135deg, rgb(241 217 64), rgb(255 122 149))" },
+];
+
+const officialVoiceCards: VoiceCard[] = [
+  ...voiceCards,
+  { name: "风情女友", language: "中英文", gender: "女", description: "风情温婉，甜蜜亲昵", gradient: "linear-gradient(135deg, rgb(152 215 249), rgb(67 132 228))" },
+  { name: "磁性哥哥", language: "中英文", gender: "男", description: "磁性低沉，沉稳可靠", gradient: "linear-gradient(135deg, rgb(97 180 236), rgb(42 113 213))" },
+  { name: "Cindy", language: "英文", gender: "女", description: "美式甜嗓，青春明快", gradient: "linear-gradient(135deg, rgb(98 173 238), rgb(65 125 230))" },
+  { name: "宠溺弟弟", language: "中英文", gender: "男", description: "宠溺奶音，活力满满", gradient: "linear-gradient(135deg, rgb(255 204 246), rgb(255 111 93))" },
+  { name: "顽皮小男童", language: "中英文", gender: "男", description: "顽皮稚嫩，童真清澈", gradient: "linear-gradient(135deg, rgb(255 207 246), rgb(255 115 83))" },
+  { name: "萝莉小女宝", language: "中英文", gender: "女", description: "萝莉奶萌，软甜可爱", gradient: "linear-gradient(135deg, rgb(244 222 71), rgb(255 131 153))" },
+  { name: "懂懂乖乖女", language: "中英文", gender: "女", description: "懂懂纯真，青涩温柔", gradient: "linear-gradient(135deg, rgb(255 190 103), rgb(255 120 83))" },
+  { name: "东北老铁", language: "中英文", gender: "男", description: "东北豪爽，唠嗑实诚", gradient: "linear-gradient(135deg, rgb(112 139 255), rgb(150 125 245))" },
+  { name: "粤语姐姐", language: "中英文", gender: "女", description: "粤语温婉，随性活泼", gradient: "linear-gradient(135deg, rgb(140 216 247), rgb(62 132 223))" },
+  { name: "古代诗仙", language: "中英文", gender: "男", description: "嗓音诗意，古韵悠长", gradient: "linear-gradient(135deg, rgb(255 196 236), rgb(255 129 98))" },
+  { name: "Emily", language: "英文", gender: "女", description: "温柔美腔，优雅治愈", gradient: "linear-gradient(135deg, rgb(111 220 195), rgb(255 190 105))" },
+  { name: "日本男生", language: "日文", gender: "男", description: "阳光开朗，日式活力", gradient: "linear-gradient(135deg, rgb(87 225 200), rgb(60 128 224))" },
+  { name: "韩系姐妹", language: "韩文", gender: "女", description: "甜美俏皮，韩范十足", gradient: "linear-gradient(135deg, rgb(88 224 201), rgb(77 130 224))" },
+  { name: "Magic Boy", language: "英文", gender: "男", description: "美式腔调，魔法男孩", gradient: "linear-gradient(135deg, rgb(242 210 89), rgb(93 212 203))" },
+];
+
+const videoCards = [
+  { title: "未命名视频", time: "更新于 15:46:53", avatar: avatarCards[1]! },
+  { title: "未命名视频", time: "更新于 15:44:28", avatar: avatarCards[9]! },
+];
+
+function AvatarConsolePage({ onOpenMore }: AvatarConsolePageProps) {
+  const [activeView, setActiveView] = useState<ConsoleView>("voices");
+  const [createOpen, setCreateOpen] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [createRatio, setCreateRatio] = useState<BroadcastRatio>("16:9");
+  const [editorRatio, setEditorRatio] = useState<BroadcastRatio | null>(null);
+  const activeLabel = useMemo(() => findNavItem(activeView)?.label ?? "探索", [activeView]);
+  const openCreateModal = () => {
+    setCreateRatio("16:9");
+    setCreateOpen(true);
+  };
+  const createBroadcast = () => {
+    setCreateOpen(false);
+    setEditorRatio(createRatio);
+  };
+
+  if (editorRatio) {
+    return <BroadcastEditor ratio={editorRatio} onBack={() => setEditorRatio(null)} />;
+  }
+
+  return (
+    <section className="avatar-console-page" aria-label="数字人控制台">
+      <aside className="avatar-console-sidebar" aria-label="数字人工作台导航">
+        <button type="button" className="avatar-console-brand" onClick={onOpenMore}>
+          <span className="avatar-console-brand__mark">
+            <DeploymentUnitOutlined />
+          </span>
+          <strong>数字人工作台</strong>
+        </button>
+
+        <button type="button" className="avatar-console-create is-active" onClick={openCreateModal}>
+          <StarFilled />
+          <span>视频创作</span>
+        </button>
+
+        <nav className="avatar-console-nav">
+          {quickNav.map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              className={activeView === item.key ? "is-selected" : ""}
+              onClick={() => setActiveView(item.key)}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </button>
+          ))}
+        </nav>
+
+        <div className="avatar-console-nav-group">
+          <span>数字人产品</span>
+          <nav className="avatar-console-nav">
+            {productNav.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                className={activeView === item.key ? "is-selected" : ""}
+                onClick={() => setActiveView(item.key)}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        <div className="avatar-console-nav-group">
+          <span>数字人资产</span>
+          <nav className="avatar-console-nav">
+            {assetNav.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                className={activeView === item.key ? "is-selected" : ""}
+                onClick={() => setActiveView(item.key)}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        <button type="button" className="avatar-console-api">
+          <ApiOutlined />
+          <span>API服务</span>
+        </button>
+      </aside>
+
+      <main className="avatar-console-main">
+        <div className="avatar-console-scroll">
+          {activeView === "explore" ? <ExploreView avatars={avatarCards} onCreate={openCreateModal} /> : null}
+          {activeView === "videos" ? <VideosView videos={videoCards} onCreate={openCreateModal} /> : null}
+          {activeView === "chat" ? <ChatView avatars={avatarCards.slice(0, 9)} onCreate={openCreateModal} /> : null}
+          {activeView === "live" ? <LiveView onCreate={openCreateModal} onOpenAuthorization={() => setAuthOpen(true)} /> : null}
+          {activeView === "avatars" ? <AvatarsView /> : null}
+          {activeView === "voices" ? <VoicesView voices={voiceCards} /> : null}
+        </div>
+
+        <footer className="avatar-console-foot">
+          <span>{activeLabel}中的内容均为本地预览数据，其准确性和完整性无法保证，不代表我们的态度或观点</span>
+          <i />
+          <span>浙公网安备 33010602009975号</span>
+          <span>浙B2-20080101-4</span>
+        </footer>
+      </main>
+      {createOpen ? (
+        <CreateBroadcastModal
+          ratio={createRatio}
+          onRatioChange={setCreateRatio}
+          onClose={() => setCreateOpen(false)}
+          onCreate={createBroadcast}
+        />
+      ) : null}
+      {authOpen ? <LiveAuthorizationModal onClose={() => setAuthOpen(false)} /> : null}
+    </section>
+  );
+}
+
+function ExploreView({ avatars, onCreate }: { avatars: AvatarCard[]; onCreate: () => void }) {
+  return (
+    <section className="avatar-console-view avatar-console-view--explore">
+      <div className="avatar-console-explore-hero">
+        <div>
+          <h1>欢迎使用万相数字人</h1>
+          <p>快速实现你的数字人创作灵感，为你打造专业的数字人视频。</p>
+          <button type="button" onClick={onCreate}>
+            <PlayCircleOutlined />
+            立即创建
+          </button>
+        </div>
+        <div className="avatar-console-hero-person">
+          <AvatarPortrait avatar={avatars[10]!} size="large" />
+          <span className="avatar-console-hero-bubble avatar-console-hero-bubble--yellow">万相数字人视频播报</span>
+          <span className="avatar-console-hero-bubble avatar-console-hero-bubble--white">大家好，欢迎使用...</span>
+          <span className="avatar-console-hero-bubble avatar-console-hero-bubble--blue">灿烂阳光.mp3</span>
+        </div>
+      </div>
+      <CatalogHeader title="从你喜欢的数字人形象开始" />
+      <AvatarMosaic avatars={avatars.concat(avatars).slice(0, 30)} />
+    </section>
+  );
+}
+
+function VideosView({ videos, onCreate }: { videos: typeof videoCards; onCreate: () => void }) {
+  return (
+    <section className="avatar-console-view avatar-console-view--videos">
+      <div className="avatar-console-video-hero">
+        <div>
+          <h1>即刻开始，创建播报视频</h1>
+          <p>仅需一张照片即可开启创作之旅</p>
+          <button type="button" onClick={onCreate}>
+            <StarFilled />
+            立即创建
+          </button>
+        </div>
+        <div className="avatar-console-video-showcase">
+          <AvatarPortrait avatar={avatarCards[9]!} size="large" />
+          <AvatarPortrait avatar={avatarCards[4]!} size="small" />
+          <AvatarPortrait avatar={avatarCards[6]!} size="small" />
+          <AvatarPortrait avatar={avatarCards[7]!} size="tiny" />
+        </div>
+      </div>
+
+      <div className="avatar-console-list-head">
+        <h2>我的视频</h2>
+        <div>
+          <label>
+            <SearchOutlined />
+            <input placeholder="请输入名称" />
+          </label>
+          <button type="button">
+            <PlayCircleOutlined />
+            生成记录
+          </button>
+        </div>
+      </div>
+
+      <div className="avatar-console-video-grid">
+        {videos.map((video) => (
+          <article key={`${video.title}-${video.time}`} className="avatar-console-video-card">
+            <div>
+              <AvatarPortrait avatar={video.avatar} size="card" />
+            </div>
+            <strong>{video.title}</strong>
+            <span>草稿</span>
+            <p>{video.time}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ChatView({ avatars, onCreate }: { avatars: AvatarCard[]; onCreate: () => void }) {
+  return (
+    <section className="avatar-console-view avatar-console-view--chat">
+      <div className="avatar-console-chat-hero">
+        <div>
+          <h1>来和你的数字人聊聊吧</h1>
+          <p>适配多样业务场景，创建全天候可对话数字人</p>
+          <button type="button" onClick={onCreate}>
+            <StarFilled />
+            立即创建
+          </button>
+        </div>
+        <div className="avatar-console-chat-stack">
+          <AvatarPortrait avatar={avatars[2]!} size="medium" />
+          <AvatarPortrait avatar={avatars[5]!} size="medium" />
+        </div>
+      </div>
+      <CatalogHeader title="官方形象" secondary="我创建的" />
+      <AvatarShelf avatars={avatars} />
+    </section>
+  );
+}
+
+function LiveView({ onCreate, onOpenAuthorization }: { onCreate: () => void; onOpenAuthorization: () => void }) {
+  return (
+    <section className="avatar-console-view avatar-console-view--live">
+      <div className="avatar-console-live-hero">
+        <div>
+          <h1>欢迎体验数字人直播间</h1>
+          <p>支持电商直播场景的数字人主播推流，实现7*24小时无人直播</p>
+          <div>
+            <button type="button" onClick={onCreate}>
+              <StarFilled />
+              开通服务
+            </button>
+            <button type="button" onClick={onOpenAuthorization}>直播平台授权开通</button>
+          </div>
+        </div>
+        <div className="avatar-console-live-stage">
+          <div className="avatar-console-live-window">
+            <span />
+            <span />
+            <span />
+            <AvatarPortrait avatar={avatarCards[10]!} size="broadcast" />
+            <em>Live</em>
+            <strong>3.2K</strong>
+          </div>
+          <div className="avatar-console-live-card avatar-console-live-card--script">
+            <b>脚本润色</b>
+            <p>今天给大家带来的这支「雅韵」唇膏，是品牌沉淀多年的经典款。</p>
+          </div>
+          <div className="avatar-console-live-card avatar-console-live-card--room">
+            <b>灵活搭建直播间</b>
+            <div>
+              <span />
+              <span />
+              <span />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function LiveAuthorizationModal({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="avatar-auth-modal" role="dialog" aria-modal="true" aria-labelledby="avatar-auth-title">
+      <button type="button" className="avatar-auth-modal__backdrop" aria-label="关闭授权管理" onClick={onClose} />
+      <section className="avatar-auth-modal__panel">
+        <header className="avatar-auth-modal__head">
+          <h2 id="avatar-auth-title">授权管理</h2>
+          <button type="button" aria-label="关闭" onClick={onClose}>
+            <CloseOutlined />
+          </button>
+        </header>
+        <div className="avatar-auth-modal__body">
+          <div className="avatar-auth-modal__table-head" role="row">
+            <span role="columnheader">直播账号</span>
+            <span role="columnheader">授权平台</span>
+            <span role="columnheader">状态</span>
+            <span role="columnheader">操作</span>
+          </div>
+          <div className="avatar-auth-modal__empty" role="status">
+            <InboxOutlined />
+            <span>暂无数据</span>
+          </div>
+        </div>
+        <footer className="avatar-auth-modal__foot">
+          <button type="button">
+            <PlusOutlined />
+            新增授权
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
+function CreateBroadcastModal({
+  ratio,
+  onRatioChange,
+  onClose,
+  onCreate,
+}: {
+  ratio: BroadcastRatio;
+  onRatioChange: (ratio: BroadcastRatio) => void;
+  onClose: () => void;
+  onCreate: () => void;
+}) {
+  return (
+    <div className="avatar-create-modal" role="dialog" aria-modal="true" aria-labelledby="avatar-create-title">
+      <section className="avatar-create-modal__panel">
+        <button type="button" className="avatar-create-modal__close" aria-label="关闭" onClick={onClose}>
+          <CloseOutlined />
+        </button>
+        <div className="avatar-create-modal__head">
+          <h2 id="avatar-create-title">创建播报视频</h2>
+          <p>选择你想创建的视频比例</p>
+        </div>
+        <div className="avatar-create-modal__options">
+          <button
+            type="button"
+            className={`avatar-create-ratio-card${ratio === "16:9" ? " is-selected" : ""}`}
+            onClick={() => onRatioChange("16:9")}
+          >
+            <span className="avatar-create-ratio-card__preview avatar-create-ratio-card__preview--wide">
+              <i />
+              <em>16:9</em>
+              <PlayCircleOutlined />
+            </span>
+            <strong>横版  16:9</strong>
+          </button>
+          <button
+            type="button"
+            className={`avatar-create-ratio-card${ratio === "9:16" ? " is-selected" : ""}`}
+            onClick={() => onRatioChange("9:16")}
+          >
+            <span className="avatar-create-ratio-card__preview avatar-create-ratio-card__preview--tall">
+              <i />
+              <em>9:16</em>
+              <PlayCircleOutlined />
+            </span>
+            <strong>竖版  9:16</strong>
+          </button>
+        </div>
+        <button type="button" className="avatar-create-modal__submit" onClick={onCreate}>
+          立即创建
+        </button>
+      </section>
+    </div>
+  );
+}
+
+function BroadcastEditor({ ratio, onBack }: { ratio: BroadcastRatio; onBack: () => void }) {
+  const isPortrait = ratio === "9:16";
+  const actor = isPortrait ? avatarCards[8]! : avatarCards[7]!;
+  const [activeTool, setActiveTool] = useState<EditorTool>("content");
+  const [projectName, setProjectName] = useState("未命名视频");
+  const [nameDraft, setNameDraft] = useState("未命名视频");
+  const [editingName, setEditingName] = useState(false);
+  const [layers, setLayers] = useState<AvatarEditorLayer[]>(() => createDefaultAvatarEditorLayers(ratio));
+  const [activeLayerId, setActiveLayerId] = useState<AvatarEditorLayerId | null>(null);
+  const [layersOpen, setLayersOpen] = useState(false);
+  const sceneRef = useRef<HTMLDivElement | null>(null);
+  const dragStateRef = useRef<{
+    layerId: AvatarEditorLayerId;
+    offsetX: number;
+    offsetY: number;
+  } | null>(null);
+  const orderedLayers = useMemo(() => [...layers].sort((a, b) => a.zIndex - b.zIndex), [layers]);
+  const layerStack = useMemo(() => [...orderedLayers].reverse(), [orderedLayers]);
+  const activeLayer = activeLayerId ? layers.find((layer) => layer.id === activeLayerId) : undefined;
+  const selectedCanvasLayer = activeLayer?.id === "avatar" || activeLayer?.id === "sticker" ? activeLayer : undefined;
+
+  const startEditingName = () => {
+    setNameDraft(projectName);
+    setEditingName(true);
+  };
+
+  const saveProjectName = () => {
+    const nextName = nameDraft.trim() || "未命名视频";
+    setProjectName(nextName);
+    setNameDraft(nextName);
+    setEditingName(false);
+  };
+
+  const cancelProjectNameEdit = () => {
+    setNameDraft(projectName);
+    setEditingName(false);
+  };
+
+  const selectLayer = (layer: AvatarEditorLayer) => {
+    setActiveLayerId(layer.id);
+    setActiveTool(layer.tool);
+  };
+
+  const layerStyle = (layer: AvatarEditorLayer): CSSProperties => ({
+    left: `${layer.x}%`,
+    top: `${layer.y}%`,
+    width: `${layer.width}%`,
+    height: `${layer.height}%`,
+    zIndex: layer.zIndex,
+  });
+
+  const pointFromEvent = (event: PointerEvent<HTMLElement>) => {
+    const scene = sceneRef.current;
+    if (!scene) return null;
+    const rect = scene.getBoundingClientRect();
+    if (!rect.width || !rect.height) return null;
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * 100,
+      y: ((event.clientY - rect.top) / rect.height) * 100,
+    };
+  };
+
+  const handleLayerPointerDown = (event: PointerEvent<HTMLElement>, layer: AvatarEditorLayer) => {
+    event.stopPropagation();
+    selectLayer(layer);
+    if (layer.locked) return;
+    const point = pointFromEvent(event);
+    if (!point) return;
+    dragStateRef.current = {
+      layerId: layer.id,
+      offsetX: point.x - layer.x,
+      offsetY: point.y - layer.y,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const handleLayerPointerMove = (event: PointerEvent<HTMLElement>) => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    const point = pointFromEvent(event);
+    if (!point) return;
+    setLayers((current) =>
+      moveAvatarEditorLayer(current, drag.layerId, {
+        x: point.x - drag.offsetX,
+        y: point.y - drag.offsetY,
+      }),
+    );
+  };
+
+  const endLayerDrag = (event: PointerEvent<HTMLElement>) => {
+    dragStateRef.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  const renderCanvasLayer = (layer: AvatarEditorLayer) => {
+    if (layer.id === "solidBackground" || layer.id === "background") {
+      return (
+        <div
+          key={layer.id}
+          className={`avatar-editor-scene-layer avatar-editor-scene-layer--${layer.id}`}
+          style={layerStyle(layer)}
+          aria-hidden="true"
+        >
+          {layer.id === "background" ? (
+            <>
+              <div className="avatar-editor-wall-line" />
+              <div className="avatar-editor-floor" />
+              {isPortrait ? (
+                <div className="avatar-editor-nursery" />
+              ) : (
+                <>
+                  <div className="avatar-editor-plant" />
+                  <div className="avatar-editor-studio-vase avatar-editor-studio-vase--large" />
+                  <div className="avatar-editor-studio-vase avatar-editor-studio-vase--small" />
+                  <div className="avatar-editor-canvas-watermark">AI生成</div>
+                </>
+              )}
+            </>
+          ) : null}
+        </div>
+      );
+    }
+
+    const isSelected = selectedCanvasLayer?.id === layer.id;
+    return (
+      <div
+        key={layer.id}
+        role="button"
+        tabIndex={0}
+        className={`avatar-editor-canvas-layer avatar-editor-canvas-layer--${layer.id}${isSelected ? " is-selected" : ""}`}
+        style={layerStyle(layer)}
+        aria-label={`${layer.label} 图层`}
+        onPointerDown={(event) => handleLayerPointerDown(event, layer)}
+        onPointerMove={handleLayerPointerMove}
+        onPointerUp={endLayerDrag}
+        onPointerCancel={endLayerDrag}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          selectLayer(layer);
+        }}
+      >
+        {layer.id === "avatar" ? <EditorAvatarFigure compact={false} /> : null}
+        {layer.id === "sticker" ? <span className="avatar-editor-sticker-shape" /> : null}
+        <em>{layer.label}</em>
+        {isSelected ? (
+          <div
+            className="avatar-editor-selection-toolbar"
+            aria-label="选中图层操作"
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <button type="button" onClick={() => setLayersOpen(true)}>
+              <BlockOutlined />
+              图层
+            </button>
+            <button type="button">
+              <DeploymentUnitOutlined />
+              应用到全局
+            </button>
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <section className="avatar-editor-page" aria-label={`${ratio}播报视频编辑器`}>
+      <header className="avatar-editor-topbar">
+        <div className="avatar-editor-title">
+          <button type="button" aria-label="返回" onClick={onBack}>
+            <ArrowLeftOutlined />
+          </button>
+          {editingName ? (
+            <input
+              className="avatar-editor-title__input"
+              value={nameDraft}
+              maxLength={40}
+              autoFocus
+              aria-label="编辑项目名称"
+              onFocus={(event) => event.currentTarget.select()}
+              onChange={(event) => setNameDraft(event.target.value)}
+              onBlur={saveProjectName}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  saveProjectName();
+                }
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  cancelProjectNameEdit();
+                }
+              }}
+            />
+          ) : (
+            <button type="button" className="avatar-editor-title__name-button" aria-label="编辑项目名称" onClick={startEditingName}>
+              <strong>{projectName}</strong>
+              <EditOutlined />
+            </button>
+          )}
+          <span>已自动保存</span>
+        </div>
+        <div className="avatar-editor-actions">
+          <button type="button">
+            <HistoryOutlined />
+            生成记录
+          </button>
+          <button type="button">生成视频</button>
+        </div>
+      </header>
+
+      <main className="avatar-editor-workspace">
+        <nav className="avatar-editor-rail" aria-label="编辑工具">
+          {editorTools.map((tool) => (
+            <button
+              key={tool.key}
+              type="button"
+              className={activeTool === tool.key ? "is-active" : ""}
+              aria-pressed={activeTool === tool.key}
+              onClick={() => setActiveTool(tool.key)}
+            >
+              {tool.icon}
+              <span>{tool.label}</span>
+            </button>
+          ))}
+        </nav>
+
+        <EditorInspector activeTool={activeTool} actor={actor} isPortrait={isPortrait} />
+
+        <section className="avatar-editor-stage">
+          <div className="avatar-editor-undo">
+            <button type="button">↶</button>
+            <button type="button">↷</button>
+          </div>
+          <button
+            type="button"
+            className={`avatar-editor-layer${layersOpen ? " is-active" : ""}`}
+            aria-expanded={layersOpen}
+            aria-label="图层"
+            onClick={() => setLayersOpen((open) => !open)}
+          >
+            <BlockOutlined />
+          </button>
+          {layersOpen ? (
+            <aside className="avatar-editor-layer-panel" aria-label="图层面板">
+              <div className="avatar-editor-layer-panel__head">
+                <strong>图层</strong>
+                <span>{activeLayer?.label}</span>
+              </div>
+              <div className="avatar-editor-layer-panel__list">
+                {layerStack.map((layer) => (
+                  <button
+                    key={layer.id}
+                    type="button"
+                    className={`avatar-editor-layer-row${activeLayerId === layer.id ? " is-selected" : ""}`}
+                    onClick={() => selectLayer(layer)}
+                  >
+                    <span>{layer.label}</span>
+                    <em>{layer.locked ? "锁定" : `Z ${layer.zIndex}`}</em>
+                  </button>
+                ))}
+              </div>
+              <div className="avatar-editor-layer-panel__actions">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (!activeLayerId) return;
+                    setLayers((current) => bringAvatarEditorLayerForward(current, activeLayerId));
+                  }}
+                  disabled={!activeLayerId || activeLayer?.locked}
+                >
+                  上移
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (!activeLayerId) return;
+                    setLayers((current) => sendAvatarEditorLayerBackward(current, activeLayerId));
+                  }}
+                  disabled={!activeLayerId || activeLayer?.locked}
+                >
+                  下移
+                </button>
+              </div>
+            </aside>
+          ) : null}
+          <div className={`avatar-editor-canvas avatar-editor-canvas--${isPortrait ? "portrait" : "landscape"}`}>
+            <div
+              ref={sceneRef}
+              className="avatar-editor-scene"
+              onPointerDown={(event) => {
+                if (event.target !== event.currentTarget) return;
+                setActiveLayerId(null);
+              }}
+            >
+              {orderedLayers.map(renderCanvasLayer)}
+            </div>
+          </div>
+          {activeLayer ? (
+            <div className="avatar-editor-selection-readout">
+              <strong>{activeLayer.label}</strong>
+              <span>{`X ${Math.round(activeLayer.x)} · Y ${Math.round(activeLayer.y)} · Z ${activeLayer.zIndex}`}</span>
+            </div>
+          ) : null}
+        </section>
+      </main>
+
+      <footer className="avatar-editor-timeline">
+        <div className="avatar-editor-play">
+          <button type="button">
+            <PlayCircleOutlined />
+          </button>
+          <span>00:00 / 00:00</span>
+        </div>
+        <div className={`avatar-editor-clip avatar-editor-clip--${isPortrait ? "portrait" : "landscape"}`}>
+          <b>1</b>
+          <div>
+            {isPortrait ? <AvatarPortrait avatar={actor} size="clip" /> : <EditorClipPreview />}
+            <em>0.00s</em>
+          </div>
+          <button type="button" aria-label="更多">
+            <EllipsisOutlined />
+          </button>
+        </div>
+        <button type="button" className="avatar-editor-add">
+          <PlusOutlined />
+        </button>
+      </footer>
+    </section>
+  );
+}
+
+function EditorAvatarFigure({ compact }: { compact: boolean }) {
+  return (
+    <div className={`avatar-editor-figure${compact ? " avatar-editor-figure--compact" : ""}`} aria-hidden="true">
+      <span className="avatar-editor-figure__hair" />
+      <span className="avatar-editor-figure__head" />
+      <span className="avatar-editor-figure__neck" />
+      <span className="avatar-editor-figure__torso" />
+      <span className="avatar-editor-figure__pattern avatar-editor-figure__pattern--upper" />
+      <span className="avatar-editor-figure__pattern avatar-editor-figure__pattern--lower" />
+      <span className="avatar-editor-figure__skirt" />
+      <span className="avatar-editor-figure__arm avatar-editor-figure__arm--left" />
+      <span className="avatar-editor-figure__arm avatar-editor-figure__arm--right" />
+      <span className="avatar-editor-figure__leg avatar-editor-figure__leg--left" />
+      <span className="avatar-editor-figure__leg avatar-editor-figure__leg--right" />
+    </div>
+  );
+}
+
+function EditorClipPreview() {
+  return (
+    <span className="avatar-editor-clip-preview" aria-hidden="true">
+      <span className="avatar-editor-clip-plant" />
+      <span className="avatar-editor-clip-hat" />
+      <EditorAvatarFigure compact />
+    </span>
+  );
+}
+
+function EditorInspector({
+  activeTool,
+  actor,
+  isPortrait,
+}: {
+  activeTool: EditorTool;
+  actor: AvatarCard;
+  isPortrait: boolean;
+}) {
+  const speakerName = isPortrait ? "天真女童" : "日语女孩";
+
+  if (activeTool === "content") {
+    return (
+      <aside className="avatar-editor-script avatar-editor-inspector">
+        <div className="avatar-editor-script__head">
+          <h2>播报内容</h2>
+          <SettingOutlined />
+        </div>
+        <div className="avatar-editor-speaker">
+          <b>1</b>
+          <span />
+          <strong>{speakerName}</strong>
+          <PlayCircleOutlined />
+          <button type="button" aria-label="更多">
+            <EllipsisOutlined />
+          </button>
+        </div>
+        <textarea placeholder="点击输入内容" maxLength={800} />
+        <div className="avatar-editor-script__count">0/800</div>
+        <div className="avatar-editor-script__tools">
+          <button type="button">+ 片段</button>
+          <button type="button">音频</button>
+        </div>
+      </aside>
+    );
+  }
+
+  if (activeTool === "avatar") {
+    return (
+      <aside className="avatar-editor-script avatar-editor-inspector">
+        <div className="avatar-editor-picker-head">
+          <h2>形象选择</h2>
+          <button type="button">
+            公共形象
+            <DownOutlined />
+          </button>
+        </div>
+        <label className="avatar-editor-search-field">
+          <SearchOutlined />
+          <input placeholder="请输入名称" />
+        </label>
+        <div className="avatar-editor-avatar-pick-grid">
+          {[actor, ...avatarCards, ...avatarCards.slice(0, 8)].slice(0, 21).map((avatar, index) => (
+            <button
+              key={`${avatar.name}-${index}`}
+              type="button"
+              className={`avatar-editor-avatar-pick${index === 0 ? " is-selected" : ""}`}
+              aria-label={avatar.name}
+            >
+              <AvatarPortrait avatar={avatar} size="mosaic" />
+              {index === 0 ? <i /> : null}
+            </button>
+          ))}
+        </div>
+      </aside>
+    );
+  }
+
+  if (activeTool === "subtitle") {
+    return (
+      <aside className="avatar-editor-script avatar-editor-inspector">
+        <div className="avatar-editor-picker-head">
+          <div className="avatar-editor-subtitle-switch">
+            <h2>字幕设置</h2>
+            <label>
+              <input type="checkbox" />
+              <span />
+              字幕关
+            </label>
+          </div>
+          <button type="button">
+            官方样式
+            <DownOutlined />
+          </button>
+        </div>
+        <div className="avatar-editor-subtitle-grid">
+          {["blue", "orange", "pill", "underline", "solid", "black"].map((styleName) => (
+            <button key={styleName} type="button" className={`avatar-editor-subtitle-style is-${styleName}`}>
+              <span>欢迎使用数字人</span>
+            </button>
+          ))}
+        </div>
+      </aside>
+    );
+  }
+
+  if (activeTool === "background") {
+    return (
+      <aside className="avatar-editor-script avatar-editor-inspector">
+        <div className="avatar-editor-picker-head">
+          <h2>背景选择</h2>
+          <button type="button">
+            图片背景
+            <DownOutlined />
+          </button>
+        </div>
+        <div className="avatar-editor-background-palette">
+          {Array.from({ length: 17 }).map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`avatar-editor-background-tile bg-${index + 1}${index === 10 ? " is-selected" : ""}`}
+              aria-label={`背景 ${index + 1}`}
+            >
+              <span />
+              {index === 10 ? <i /> : null}
+            </button>
+          ))}
+        </div>
+      </aside>
+    );
+  }
+
+  return (
+    <aside className="avatar-editor-script avatar-editor-inspector">
+      <div className="avatar-editor-picker-head">
+        <h2>贴图选择</h2>
+        <button type="button">
+          官方素材
+          <DownOutlined />
+        </button>
+      </div>
+      <label className="avatar-editor-search-field">
+        <SearchOutlined />
+        <input placeholder="搜索贴图素材" />
+      </label>
+      <div className="avatar-editor-sticker-grid">
+        {["flower", "cone", "globe", "headset", "board", "cap", "desk", "chart"].map((name) => (
+          <button key={name} type="button" className="avatar-editor-sticker-card" aria-label={name}>
+            <span className={`avatar-editor-sticker-visual is-${name}`}>
+              <i />
+              <i />
+              <i />
+            </span>
+          </button>
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+function AvatarsView() {
+  const [trainingOpen, setTrainingOpen] = useState(false);
+
+  return (
+    <section className="avatar-console-view avatar-console-view--avatars">
+      <PageTitle title="形象库" tabs={["我创建的", "官方形象"]} activeTab="我创建的" />
+      <CatalogHeader title="我的数字人" compact info />
+      <button type="button" className="avatar-console-create-card" onClick={() => setTrainingOpen(true)}>
+        <PlusOutlined />
+        <span>创建数字人</span>
+      </button>
+      <CatalogHeader title="我的形象" compact filters info />
+      <div className="avatar-console-empty-state avatar-console-empty-state--avatar" role="status">
+        <div>
+          <CustomerServiceOutlined />
+        </div>
+        <strong>暂无形象</strong>
+      </div>
+      {trainingOpen ? <AvatarTrainingModal onClose={() => setTrainingOpen(false)} /> : null}
+    </section>
+  );
+}
+
+function AvatarTrainingModal({ onClose }: { onClose: () => void }) {
+  const [draft, setDraft] = useState<AvatarTrainingDraft>(() => createAvatarTrainingDraft());
+  const selectedScenario = avatarTrainingScenarios.find((scenario) => scenario.key === draft.selectedScenario);
+  const selectScenario = (scenario: AvatarTrainingScenarioKey) => {
+    setDraft((current) => selectAvatarTrainingScenario(current, scenario));
+  };
+
+  return (
+    <div className="avatar-training-modal" role="dialog" aria-modal="true" aria-labelledby="avatar-training-title">
+      <section className="avatar-training-modal__panel">
+        <button type="button" className="avatar-training-modal__close" aria-label="关闭" onClick={onClose}>
+          <CloseOutlined />
+        </button>
+
+        {draft.step === "scenario" ? (
+          <>
+            <div className="avatar-training-modal__head">
+              <h2 id="avatar-training-title">训练专属数字人</h2>
+              <p>选择你想应用的数字人场景</p>
+            </div>
+            <div className="avatar-training-scenarios">
+              {avatarTrainingScenarios.map((scenario) => (
+                <button
+                  key={scenario.key}
+                  type="button"
+                  className={`avatar-training-scenario avatar-training-scenario--${scenario.key}${draft.selectedScenario === scenario.key ? " is-selected" : ""}`}
+                  aria-pressed={draft.selectedScenario === scenario.key}
+                  onClick={() => selectScenario(scenario.key)}
+                >
+                  <span className="avatar-training-scenario__visual" aria-hidden="true">
+                    <i />
+                    <b />
+                    <em />
+                  </span>
+                  <strong>{scenario.label}</strong>
+                  <span>{scenario.description}</span>
+                </button>
+              ))}
+            </div>
+            <div className="avatar-training-modal__actions">
+              <button
+                type="button"
+                disabled={!draft.canContinue}
+                onClick={() => setDraft((current) => continueAvatarTraining(current))}
+              >
+                下一步
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="avatar-training-modal__head">
+              <h2 id="avatar-training-title">上传训练素材</h2>
+              <p>{selectedScenario ? `已选择「${selectedScenario.label}」场景，继续补充数字人素材。` : "继续补充数字人素材。"}</p>
+            </div>
+            <div className="avatar-training-next-step">
+              <div className="avatar-training-upload">
+                <PlusOutlined />
+                <strong>上传人物素材</strong>
+                <span>支持正面半身、全身或清晰肖像图片</span>
+              </div>
+              <div className="avatar-training-guides">
+                <strong>素材要求</strong>
+                <span>单人出镜，面部清晰无遮挡</span>
+                <span>光线均匀，背景简洁</span>
+                <span>建议上传高清原图以提升训练效果</span>
+              </div>
+            </div>
+            <div className="avatar-training-modal__actions">
+              <button type="button" onClick={() => setDraft((current) => ({ ...current, step: "scenario" }))}>
+                上一步
+              </button>
+              <button type="button" disabled>
+                开始训练
+              </button>
+            </div>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function VoicesView({ voices }: { voices: VoiceCard[] }) {
+  const [activeTab, setActiveTab] = useState<VoiceLibraryTabKey>("official");
+  const [cloneOpen, setCloneOpen] = useState(false);
+  const cards = voices.length > officialVoiceCards.length ? voices : officialVoiceCards;
+  const tabLabels = voiceLibraryTabs.map((tab) => tab.label);
+  const activeTabLabel = voiceLibraryTabs.find((tab) => tab.key === activeTab)?.label ?? tabLabels[0]!;
+  const handleVoiceTabChange = (label: string) => {
+    const nextTab = voiceLibraryTabs.find((tab) => tab.label === label);
+    if (nextTab) setActiveTab(nextTab.key);
+  };
+
+  return (
+    <section className="avatar-console-view avatar-console-view--voices">
+      <PageTitle title="声音库" tabs={tabLabels} activeTab={activeTabLabel} onTabChange={handleVoiceTabChange}>
+        <button type="button" onClick={() => setCloneOpen(true)}>
+          <PlusOutlined />
+          创建音色
+        </button>
+      </PageTitle>
+      {activeTab === "official" ? (
+        <>
+          <div className="avatar-console-filter-line avatar-console-filter-line--voices">
+            <button type="button">
+              性别
+              <DownOutlined />
+            </button>
+            <button type="button">
+              语言
+              <DownOutlined />
+            </button>
+          </div>
+          <div className="avatar-console-voice-grid">
+            {cards.map((voice) => (
+              <article key={voice.name} className="avatar-console-voice-card">
+                <span style={{ background: voice.gradient }} />
+                <button type="button" aria-label={`试听 ${voice.name}`}>
+                  <PlayCircleOutlined />
+                </button>
+                <div>
+                  <strong>{voice.name}</strong>
+                  <em>{voice.language}</em>
+                  <p>
+                    {voice.gender === "男" ? "♂" : "♀"} {voice.description}
+                  </p>
+                </div>
+              </article>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div className="avatar-console-empty-state avatar-console-empty-state--voice" role="status">
+          <div>
+            <SoundOutlined />
+          </div>
+          <strong>暂无声音</strong>
+          <span>请先创建一个音色</span>
+        </div>
+      )}
+      {cloneOpen ? <VoiceCloneModal onClose={() => setCloneOpen(false)} /> : null}
+    </section>
+  );
+}
+
+function PageTitle({
+  title,
+  tabs,
+  activeTab,
+  children,
+  onTabChange,
+}: {
+  title: string;
+  tabs: string[];
+  activeTab: string;
+  children?: ReactNode;
+  onTabChange?: (tab: string) => void;
+}) {
+  return (
+    <div className="avatar-console-titlebar">
+      <div>
+        <h1>{title}</h1>
+        <nav>
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              className={tab === activeTab ? "is-current" : ""}
+              onClick={() => onTabChange?.(tab)}
+            >
+              {tab}
+            </button>
+          ))}
+        </nav>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function VoiceCloneModal({ onClose }: { onClose: () => void }) {
+  const draft = useMemo(() => createVoiceCloneDraft(), []);
+  const [targetLanguage, setTargetLanguage] = useState(draft.targetLanguage);
+  const [languageOpen, setLanguageOpen] = useState(false);
+
+  return (
+    <div className="avatar-voice-clone" role="dialog" aria-modal="true" aria-labelledby="avatar-voice-clone-title">
+      <section className="avatar-voice-clone__panel">
+        <header className="avatar-voice-clone__head">
+          <h2 id="avatar-voice-clone-title">声音克隆</h2>
+          <button type="button" aria-label="关闭" onClick={onClose}>
+            <CloseOutlined />
+          </button>
+        </header>
+        <div className="avatar-voice-clone__body">
+          <div className="avatar-voice-clone__form">
+            <fieldset>
+              <legend>音色</legend>
+              <label>
+                <input type="radio" name="voice-gender" defaultChecked={draft.gender === "male"} />
+                男声
+              </label>
+              <label>
+                <input type="radio" name="voice-gender" defaultChecked={draft.gender === "female"} />
+                女声
+              </label>
+            </fieldset>
+            <label className="avatar-voice-clone__input">
+              <span>声音名称</span>
+              <input placeholder="为你的声音命名" maxLength={draft.nameMaxLength} />
+              <em>0 / {draft.nameMaxLength}</em>
+            </label>
+            <fieldset>
+              <legend>克隆方式</legend>
+              <label>
+                <input type="radio" name="voice-mode" defaultChecked={draft.cloneMode === "record"} />
+                录音
+              </label>
+              <label>
+                <input type="radio" name="voice-mode" defaultChecked={draft.cloneMode === "upload"} />
+                上传
+              </label>
+            </fieldset>
+            <div className="avatar-voice-clone__select">
+              <span>目标语种</span>
+              <button
+                type="button"
+                aria-expanded={languageOpen}
+                aria-haspopup="listbox"
+                onClick={() => setLanguageOpen((open) => !open)}
+              >
+                {targetLanguage}
+                <DownOutlined />
+              </button>
+              {languageOpen ? (
+                <div className="avatar-voice-clone__language-list" role="listbox" aria-label="目标语种">
+                  {voiceCloneLanguageOptions.map((language) => (
+                    <button
+                      key={language}
+                      type="button"
+                      className={language === targetLanguage ? "is-selected" : ""}
+                      role="option"
+                      aria-selected={language === targetLanguage}
+                      onClick={() => {
+                        setTargetLanguage(language);
+                        setLanguageOpen(false);
+                      }}
+                    >
+                      {language}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <div className="avatar-voice-clone__steps">
+              <strong>声音克隆流程</strong>
+              {["点击右侧录制按钮", "朗读右侧示例区的播报内容，并点击结束按钮", "点击开始克隆，等待约1分钟"].map((step, index) => (
+                <div key={step} className={index === 0 ? "is-current" : ""}>
+                  <b>{index + 1}</b>
+                  <span>{step}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="avatar-voice-clone__record">
+            <div className="avatar-voice-clone__script">{VOICE_CLONE_SCRIPT}</div>
+            <button type="button" className="avatar-voice-clone__refresh">
+              换一换
+              <span />
+            </button>
+            <button type="button" className="avatar-voice-clone__record-button" aria-label="开始录制" />
+            <span>点击红点开始录制</span>
+          </div>
+        </div>
+        <footer className="avatar-voice-clone__foot">
+          <label>
+            <input type="checkbox" />
+            <span>我确认我拥有复制当前音频的版权和使用权，我保证不会用数字人做违法创作，并且严格遵守</span>
+            <a href="#/avatarConsole">《通义智能产品服务协议》</a>
+          </label>
+          <div>
+            <button type="button" onClick={onClose}>
+              取消
+            </button>
+            <button type="button" disabled>
+              开始克隆
+            </button>
+          </div>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
+function CatalogHeader({
+  title,
+  secondary,
+  compact,
+  filters,
+  info,
+}: {
+  title: string;
+  secondary?: string;
+  compact?: boolean;
+  filters?: boolean;
+  info?: boolean;
+}) {
+  return (
+    <div className={`avatar-console-catalog-head${compact ? " is-compact" : ""}`}>
+      <div>
+        <h2>
+          {title}
+          {info ? <span>ⓘ</span> : null}
+        </h2>
+        {secondary ? <button type="button">{secondary}</button> : null}
+      </div>
+      {filters ? (
+        <div className="avatar-console-catalog-filters">
+          <button type="button">
+            性别
+            <DownOutlined />
+          </button>
+          <button type="button">
+            类型
+            <DownOutlined />
+          </button>
+          <button type="button">
+            场景
+            <DownOutlined />
+          </button>
+          <label>
+            <SearchOutlined />
+            <input placeholder="搜索数字人形象..." />
+          </label>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function AvatarMosaic({ avatars }: { avatars: AvatarCard[] }) {
+  return (
+    <div className="avatar-console-mosaic">
+      {avatars.map((avatar, index) => (
+        <article key={`${avatar.name}-${index}`} className="avatar-console-mosaic-card">
+          <AvatarPortrait avatar={avatar} size="mosaic" />
+          {index === 14 ? (
+            <div>
+              <strong>{avatar.name}</strong>
+              <span>{avatar.type}</span>
+            </div>
+          ) : null}
+        </article>
+      ))}
+    </div>
+  );
+}
+
+function AvatarShelf({ avatars }: { avatars: AvatarCard[] }) {
+  return (
+    <div className="avatar-console-avatar-shelf">
+      {avatars.map((avatar) => (
+        <article key={avatar.name}>
+          <AvatarPortrait avatar={avatar} size="shelf" />
+          <strong>{avatar.name}</strong>
+          <span>{avatar.type}</span>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+function AvatarPortrait({ avatar, size }: { avatar: AvatarCard; size: "tiny" | "small" | "medium" | "large" | "card" | "broadcast" | "mosaic" | "shelf" | "editor" | "clip" }) {
+  return (
+    <div className={`avatar-console-portrait avatar-console-portrait--${size}`} style={{ background: avatar.background }}>
+      <div style={{ background: avatar.accent }} />
+      <span />
+      <span />
+      <strong>{avatar.name.slice(0, 1)}</strong>
+    </div>
+  );
+}
+
+function findNavItem(view: ConsoleView) {
+  return [...quickNav, ...productNav, ...assetNav].find((item) => item.key === view);
+}
+
+export default AvatarConsolePage;
diff --git a/src/features/digital-human/DigitalHumanPage.tsx b/src/features/digital-human/DigitalHumanPage.tsx
new file mode 100644
index 0000000..f04d535
--- /dev/null
+++ b/src/features/digital-human/DigitalHumanPage.tsx
@@ -0,0 +1,590 @@
+import {
+  ArrowLeftOutlined,
+  AudioOutlined,
+  CameraOutlined,
+  CloseCircleOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FontSizeOutlined,
+  InboxOutlined,
+  PlayCircleOutlined,
+  RightOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+  ThunderboltOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
+import { waitForTask } from "../../api/taskSubscription";
+import { getServerBaseUrl } from "../../api/serverConnection";
+import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
+import StudioToolLayout from "../../components/StudioToolLayout";
+import type { WebGenerationPreviewTask, WebImageWorkbenchTool, WebViewKey } from "../../types";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+
+interface DigitalHumanPageProps {
+  isAuthenticated: boolean;
+  isAdmin?: boolean;
+  onCreateTask: (input: CreatePreviewTaskInput) => Promise<WebGenerationPreviewTask>;
+  onRequireLogin: (input: {
+    title: string;
+    type: WebGenerationPreviewTask["type"];
+    prompt: string;
+  }) => void;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 KB";
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function summarizeUrl(value: string): string {
+  try {
+    const url = new URL(value);
+    const lastSegment = url.pathname.split("/").filter(Boolean).pop();
+    return lastSegment ? `${url.host}/.../${lastSegment}` : url.host;
+  } catch {
+    return value.length > 72 ? `${value.slice(0, 34)}...${value.slice(-28)}` : value;
+  }
+}
+
+function getGenerationAssetUrl(asset: { url: string; signedUrl?: string }): string {
+  return asset.signedUrl || asset.url;
+}
+
+function getCurrentApiBaseLabel(): string {
+  return getServerBaseUrl() || "/api";
+}
+
+function DigitalHumanPage({
+  isAuthenticated,
+  onCreateTask,
+  onRequireLogin,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: DigitalHumanPageProps) {
+  const [imageName, setImageName] = useState("");
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState("");
+  const [audioName, setAudioName] = useState("");
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [audioPreview, setAudioPreview] = useState("");
+  const [promptInput, setPromptInput] = useState("");
+  const [watermark, setWatermark] = useState(false);
+  const [keepOriginalAudio, setKeepOriginalAudio] = useState(true);
+  const [notice, setNotice] = useState("等待上传参考图和音频");
+  const [isCreating, setIsCreating] = useState(false);
+  const [isDownloadingResult, setIsDownloadingResult] = useState(false);
+  const [isSavingResultAsset, setIsSavingResultAsset] = useState(false);
+  const [resultVideoUrl, setResultVideoUrl] = useState("");
+  const [activeTaskId, setActiveTaskId] = useState("");
+  const [taskProgress, setTaskProgress] = useState(0);
+  const pollRunRef = useRef(0);
+  const cancelRef = useRef(false);
+  const activeTaskIdRef = useRef(activeTaskId);
+  activeTaskIdRef.current = activeTaskId;
+
+  useEffect(() => {
+    return () => {
+      if (imagePreview) URL.revokeObjectURL(imagePreview);
+    };
+  }, [imagePreview]);
+
+  useEffect(() => {
+    return () => {
+      if (audioPreview) URL.revokeObjectURL(audioPreview);
+    };
+  }, [audioPreview]);
+
+  useEffect(() => {
+    return () => {
+      pollRunRef.current += 1;
+      cancelRef.current = true;
+      if (activeTaskIdRef.current) {
+        aiGenerationClient.cancelTask(activeTaskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const fileToDataUrl = (file: File) =>
+    new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result || ""));
+      reader.onerror = () => reject(new Error("读取素材失败"));
+      reader.readAsDataURL(file);
+    });
+
+  const handleCancel = useCallback(() => {
+    cancelRef.current = true;
+    if (activeTaskId) {
+      aiGenerationClient.cancelTask(activeTaskId).catch(() => {});
+    }
+    setIsCreating(false);
+    setNotice("已取消");
+  }, [activeTaskId]);
+
+  const handleDownloadResult = async () => {
+    if (!resultVideoUrl || isDownloadingResult) return;
+    setIsDownloadingResult(true);
+    try {
+      const status = await saveToolResultToLocal({
+        url: resultVideoUrl,
+        name: `digital-human-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: activeTaskId || undefined,
+      });
+      setNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "保存本地失败");
+    } finally {
+      setIsDownloadingResult(false);
+    }
+  };
+
+  const handleAddResultToAssets = async () => {
+    if (!resultVideoUrl || isSavingResultAsset) return;
+    setIsSavingResultAsset(true);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url: resultVideoUrl,
+        name: `数字人-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: activeTaskId || undefined,
+        description: "从工具盒数字人生成功能加入的视频。",
+        tags: ["工具盒", "数字人", "生成视频"],
+      });
+      setNotice(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingResultAsset(false);
+    }
+  };
+
+  const pushDebugEntry = (
+    label: string,
+    detail: string,
+    level: "info" | "success" | "error" = "info",
+    data?: Record<string, unknown>,
+  ) => {
+    console.debug("[DigitalHuman]", { stage: label, detail, level, ...(data ? { data } : {}) });
+  };
+
+  const waitForTaskResult = async (taskId: string): Promise<string> => {
+    const runId = ++pollRunRef.current;
+    setActiveTaskId(taskId);
+    setTaskProgress(0);
+    pushDebugEntry("开始订阅", `开始接收任务 ${taskId} 的生成结果。`);
+
+    const resultUrl = await waitForTask(taskId, {
+      abortRef: cancelRef,
+      onProgress: (e) => {
+        if (pollRunRef.current !== runId) return;
+        const progress = Math.max(0, Math.min(100, Math.trunc(e.progress || 0)));
+        setTaskProgress(progress);
+        setNotice(`任务 ${taskId} ${e.status}，进度 ${progress}%`);
+        pushDebugEntry(
+          "状态更新",
+          `${e.status} / ${progress}%${e.resultUrl ? ` / ${summarizeUrl(e.resultUrl)}` : ""}`,
+          e.status === "failed" ? "error" : e.status === "completed" ? "success" : "info",
+          { taskId, status: e },
+        );
+        if (e.status === "completed" && e.resultUrl) {
+          setResultVideoUrl(e.resultUrl);
+          setNotice(`任务完成，结果已接收：${taskId}`);
+          pushDebugEntry("结果已接收", summarizeUrl(e.resultUrl), "success", { taskId, resultUrl: e.resultUrl });
+        }
+      },
+    });
+
+    if (cancelRef.current) throw new Error("已取消");
+    if (pollRunRef.current !== runId) throw new Error("当前轮询已被新的任务替换。");
+    if (!resultUrl) throw new Error("任务已完成，但服务端没有返回 resultUrl。");
+    return resultUrl;
+  };
+
+  const handleCreateTask = async () => {
+    if (isCreating) {
+      pushDebugEntry("重复提交", "当前已有提交流程正在进行，已忽略本次点击。");
+      return;
+    }
+    const taskInput = {
+      title: "数字人口播预览",
+      type: "digital-human" as const,
+      prompt: promptInput.trim() || `参考图: ${imageName || "未上传"}; 音频: ${audioName || "未上传"}; 生成数字人预览。`,
+    };
+
+    if (!isAuthenticated) {
+      onRequireLogin(taskInput);
+      pushDebugEntry("登录检查", "当前没有有效登录态，已打开登录拦截。", "error");
+      setNotice("请先登录后再创建数字人预览任务。");
+      return;
+    }
+    if (!imageFile || !audioFile) {
+      pushDebugEntry("素材检查", "缺少参考人像或音频源，无法提交。", "error", {
+        hasImage: Boolean(imageFile),
+        hasAudio: Boolean(audioFile),
+      });
+      setNotice("请先上传参考人像和音频。");
+      return;
+    }
+
+    setIsCreating(true);
+    setResultVideoUrl("");
+    setTaskProgress(0);
+    cancelRef.current = false;
+    pushDebugEntry("开始提交", `图片 ${imageFile.name}，音频 ${audioFile.name}`, "info", {
+      image: { name: imageFile.name, type: imageFile.type, size: imageFile.size },
+      audio: { name: audioFile.name, type: audioFile.type, size: audioFile.size },
+    });
+    setNotice("正在上传素材...");
+    try {
+      pushDebugEntry(
+        "读取素材",
+        `${formatFileSize(imageFile.size)} 图片 / ${formatFileSize(audioFile.size)} 音频`,
+      );
+      const [imageDataUrl, audioDataUrl] = await Promise.all([
+        fileToDataUrl(imageFile),
+        fileToDataUrl(audioFile),
+      ]);
+      pushDebugEntry("读取完成", `DataURL 已生成：图片 ${formatFileSize(imageDataUrl.length)}，音频 ${formatFileSize(audioDataUrl.length)}`);
+      pushDebugEntry("上传素材", "正在上传参考图和音频到 OSS...");
+      const [imageAsset, audioAsset] = await Promise.all([
+        uploadAssetWithProgress(
+          { dataUrl: imageDataUrl, name: imageFile.name, mimeType: imageFile.type || "image/png" },
+          { onProgress: (p) => setNotice(`上传参考图 ${p}%`) },
+        ),
+        uploadAssetWithProgress(
+          { dataUrl: audioDataUrl, name: audioFile.name, mimeType: audioFile.type || "audio/mpeg" },
+          { onProgress: (p) => setNotice(`上传音频 ${p}%`) },
+        ),
+      ]);
+      const missingSignedAssets = [
+        imageAsset.signedUrl ? "" : "图片",
+        audioAsset.signedUrl ? "" : "音频",
+      ].filter(Boolean);
+      if (missingSignedAssets.length) {
+        const apiBase = getCurrentApiBaseLabel();
+        const message = `服务端上传接口未返回 signedUrl，${missingSignedAssets.join("、")}素材不能直接交给 DashScope。请先更新并重启 key server：${apiBase}`;
+        pushDebugEntry("服务端未更新", message, "error", {
+          apiBase,
+          imageUrl: imageAsset.url,
+          audioUrl: audioAsset.url,
+          hasImageSignedUrl: Boolean(imageAsset.signedUrl),
+          hasAudioSignedUrl: Boolean(audioAsset.signedUrl),
+        });
+        throw new Error(message);
+      }
+
+      setNotice("素材已上传，正在提交 wan2.2-s2v 任务...");
+      pushDebugEntry(
+        "上传完成",
+        `图片 ${summarizeUrl(getGenerationAssetUrl(imageAsset))}；音频 ${summarizeUrl(getGenerationAssetUrl(audioAsset))}`,
+        "success",
+        {
+          imageUrl: imageAsset.url,
+          imageSignedUrl: imageAsset.signedUrl ? summarizeUrl(imageAsset.signedUrl) : "",
+          audioUrl: audioAsset.url,
+          audioSignedUrl: audioAsset.signedUrl ? summarizeUrl(audioAsset.signedUrl) : "",
+        },
+      );
+      const imageGenerationUrl = getGenerationAssetUrl(imageAsset);
+      const audioGenerationUrl = getGenerationAssetUrl(audioAsset);
+      const videoTaskPayload = {
+        model: "wan2.2-s2v",
+        prompt: taskInput.prompt,
+        imageUrl: imageGenerationUrl,
+        audioUrl: audioGenerationUrl,
+        quality: "720p",
+        style: "speech",
+        referenceUrls: [imageGenerationUrl],
+      };
+      pushDebugEntry("提交任务", "正在请求 /api/ai/video，模型 wan2.2-s2v。", "info", {
+        ...videoTaskPayload,
+        imageUrl: summarizeUrl(imageGenerationUrl),
+        audioUrl: summarizeUrl(audioGenerationUrl),
+        referenceUrls: [summarizeUrl(imageGenerationUrl)],
+      });
+      const { taskId } = await aiGenerationClient.createVideoTask(videoTaskPayload);
+      pushDebugEntry("任务已创建", `DashScope 服务端任务 ID：${taskId}`, "success", { taskId });
+      await onCreateTask({
+        ...taskInput,
+        params: {
+          existingTaskId: taskId,
+          model: "wan2.2-s2v",
+          quality: "720p",
+          referenceUrls: [imageAsset.url],
+        },
+        title: "wan2.2-s2v 数字人口播",
+        prompt: `${taskInput.prompt} 任务ID: ${taskId}`,
+      });
+      setNotice(`任务已提交，服务端将使用 DashScope 并发池生成。任务ID：${taskId}`);
+      pushDebugEntry("队列已同步", "页面任务队列已记录这次数字人任务。", "success", { taskId });
+      await waitForTaskResult(taskId);
+    } catch (error) {
+      const debugErrorMessage = error instanceof Error ? error.message : String(error || "任务创建失败");
+      pushDebugEntry("提交失败", debugErrorMessage, "error", { message: debugErrorMessage });
+      console.error("[DigitalHuman] submit failed", error);
+      setNotice(error instanceof Error ? error.message : "任务创建失败，请稍后重试。");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <section className="image-workbench-page digital-human-page" aria-label="数字人">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" className="is-active">
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" onClick={() => onSelectView?.("characterMix")}>
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <ArrowLeftOutlined />
+        </button>
+        <strong>数字人</strong>
+        <div className="image-workbench-camera-summary" aria-label="数字人状态">
+          <strong>{imageName && audioName ? "素材已就绪" : "口播预览"}</strong>
+          <span>{imageName || audioName ? "人像 + 音频" : "待上传"}</span>
+        </div>
+        <button type="button" className="image-workbench-icon-btn" aria-label="下一项">
+          <RightOutlined />
+        </button>
+      </div>
+
+      <StudioToolLayout
+        noTop
+        leftPanel={
+          <>
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">参考人像</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${imageName ? "ready" : "waiting"}`}>
+                  {imageName ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={imageName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (imagePreview) URL.revokeObjectURL(imagePreview);
+                      setImageName(file.name);
+                      setImageFile(file);
+                      setImagePreview(URL.createObjectURL(file));
+                      pushDebugEntry("选择图片", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
+                      setNotice(`已选择参考图 ${file.name}`);
+                    }}
+                  />
+                  {imagePreview ? (
+                    <img src={imagePreview} alt="" className="studio-upload-slot--filled__thumb" />
+                  ) : (
+                    <span className="studio-upload-slot--empty__icon">
+                      <UserOutlined />
+                    </span>
+                  )}
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{imageName || "上传参考图"}</strong>
+                    <small>PNG / JPG / WEBP</small>
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">音频源</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${audioName ? "ready" : "waiting"}`}>
+                  {audioName ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={audioName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="audio/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (audioPreview) URL.revokeObjectURL(audioPreview);
+                      setAudioName(file.name);
+                      setAudioFile(file);
+                      setAudioPreview(URL.createObjectURL(file));
+                      pushDebugEntry("选择音频", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
+                      setNotice(`已选择音频 ${file.name}`);
+                    }}
+                  />
+                  <span className="studio-upload-slot--empty__icon">
+                    <AudioOutlined />
+                  </span>
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{audioName || "上传音频"}</strong>
+                    <small>MP3 / WAV / M4A，建议 5 分钟内</small>
+                  </span>
+                </label>
+                {audioPreview ? <audio src={audioPreview} controls className="studio-audio-preview" /> : null}
+              </div>
+            </div>
+          </>
+        }
+        canvas={
+          resultVideoUrl ? (
+            <div className="studio-canvas-video">
+              <video src={resultVideoUrl} controls playsInline />
+              <div className="studio-result-caption">
+                <strong>结果已接收</strong>
+                <span>{activeTaskId ? `任务 ${activeTaskId}` : summarizeUrl(resultVideoUrl)}</span>
+              </div>
+            </div>
+          ) : imagePreview ? (
+            <div className="studio-canvas-image">
+              <img src={imagePreview} alt="参考人像" />
+            </div>
+          ) : (
+            <div className="studio-canvas-ghost">
+              <div className="studio-canvas-ghost__icon">
+                <CustomerServiceOutlined />
+              </div>
+              <div className="studio-canvas-ghost__title">上传参考人像与音频</div>
+              <div className="studio-canvas-ghost__hint">网页端首版只做本地预览，正式生成仍会继续走服务端队列。</div>
+            </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 ? "生成中..." : "提交 wan2.2-s2v"}
+              </button>
+              {isCreating && (
+                <button type="button" className="studio-generate-btn digital-human-cancel-btn" onClick={handleCancel} aria-label="取消生成任务">
+                  <CloseCircleOutlined />
+                  取消生成
+                </button>
+              )}
+              {resultVideoUrl && (
+                <div className="studio-result-actions studio-result-actions--with-clear">
+                  <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
+                    <DownloadOutlined />
+                    {isDownloadingResult ? "保存中" : "保存本地"}
+                  </button>
+                  <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
+                    <InboxOutlined />
+                    {isSavingResultAsset ? "加入中" : "加入资产库"}
+                  </button>
+                  <button type="button" onClick={() => {
+                    setResultVideoUrl("");
+                    setActiveTaskId("");
+                    setTaskProgress(0);
+                    setNotice("已清空工作区");
+                  }}>
+                    清空
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+          </>
+        }
+        statusBar={
+          <>
+            <span className="studio-status-bar__badge studio-status-bar__badge--running">预览</span>
+            <span className="studio-status-bar__text">{notice}</span>
+            {activeTaskId ? <span className="studio-status-bar__meta">#{activeTaskId} · {taskProgress}%</span> : null}
+          </>
+        }
+      />
+    </section>
+  );
+}
+
+export default DigitalHumanPage;
diff --git a/src/features/digital-human/avatarEditorModel.ts b/src/features/digital-human/avatarEditorModel.ts
new file mode 100644
index 0000000..84ef4be
--- /dev/null
+++ b/src/features/digital-human/avatarEditorModel.ts
@@ -0,0 +1,121 @@
+export type AvatarEditorRatio = "16:9" | "9:16";
+
+export type AvatarEditorLayerId = "solidBackground" | "background" | "avatar" | "sticker";
+
+export interface AvatarEditorLayer {
+  id: AvatarEditorLayerId;
+  label: string;
+  tool: "avatar" | "content" | "subtitle" | "background" | "sticker";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  locked?: boolean;
+}
+
+export interface AvatarEditorPoint {
+  x: number;
+  y: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function normalizeZIndexes(layers: AvatarEditorLayer[]): AvatarEditorLayer[] {
+  return [...layers]
+    .sort((a, b) => a.zIndex - b.zIndex)
+    .map((layer, index) => ({ ...layer, zIndex: index * 10 }));
+}
+
+function assignZIndexes(layers: AvatarEditorLayer[]): AvatarEditorLayer[] {
+  return layers.map((layer, index) => ({ ...layer, zIndex: index * 10 }));
+}
+
+export function createDefaultAvatarEditorLayers(ratio: AvatarEditorRatio): AvatarEditorLayer[] {
+  const isPortrait = ratio === "9:16";
+  return [
+    {
+      id: "solidBackground",
+      label: "纯色背景",
+      tool: "background",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      zIndex: 0,
+      locked: true,
+    },
+    {
+      id: "background",
+      label: "背景",
+      tool: "background",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      zIndex: 10,
+      locked: true,
+    },
+    {
+      id: "avatar",
+      label: "数字人",
+      tool: "avatar",
+      x: isPortrait ? 30 : 42,
+      y: isPortrait ? 24 : 12,
+      width: isPortrait ? 40 : 23,
+      height: isPortrait ? 70 : 88,
+      zIndex: 20,
+    },
+    {
+      id: "sticker",
+      label: "贴图",
+      tool: "sticker",
+      x: isPortrait ? 62 : 46,
+      y: isPortrait ? 42 : 12,
+      width: isPortrait ? 24 : 8,
+      height: isPortrait ? 40 : 12,
+      zIndex: 30,
+    },
+  ];
+}
+
+export function moveAvatarEditorLayer(
+  layers: AvatarEditorLayer[],
+  layerId: AvatarEditorLayerId,
+  nextPosition: AvatarEditorPoint,
+): AvatarEditorLayer[] {
+  return layers.map((layer) => {
+    if (layer.id !== layerId || layer.locked) return layer;
+    return {
+      ...layer,
+      x: clamp(nextPosition.x, 0, 100 - layer.width),
+      y: clamp(nextPosition.y, 0, 100 - layer.height),
+    };
+  });
+}
+
+export function bringAvatarEditorLayerForward(
+  layers: AvatarEditorLayer[],
+  layerId: AvatarEditorLayerId,
+): AvatarEditorLayer[] {
+  const ordered = normalizeZIndexes(layers);
+  const index = ordered.findIndex((layer) => layer.id === layerId);
+  if (index < 0 || index >= ordered.length - 1) return ordered;
+  const next = [...ordered];
+  [next[index], next[index + 1]] = [next[index + 1], next[index]];
+  return assignZIndexes(next);
+}
+
+export function sendAvatarEditorLayerBackward(
+  layers: AvatarEditorLayer[],
+  layerId: AvatarEditorLayerId,
+): AvatarEditorLayer[] {
+  const ordered = normalizeZIndexes(layers);
+  const index = ordered.findIndex((layer) => layer.id === layerId);
+  if (index <= 0) return ordered;
+  const next = [...ordered];
+  [next[index - 1], next[index]] = [next[index], next[index - 1]];
+  return assignZIndexes(next);
+}
diff --git a/src/features/digital-human/avatarTrainingModel.ts b/src/features/digital-human/avatarTrainingModel.ts
new file mode 100644
index 0000000..ae26cd8
--- /dev/null
+++ b/src/features/digital-human/avatarTrainingModel.ts
@@ -0,0 +1,59 @@
+export type AvatarTrainingScenarioKey = "video" | "chat" | "live";
+export type AvatarTrainingStep = "scenario" | "material";
+
+export interface AvatarTrainingScenario {
+  key: AvatarTrainingScenarioKey;
+  label: string;
+  description: string;
+}
+
+export interface AvatarTrainingDraft {
+  selectedScenario: AvatarTrainingScenarioKey | null;
+  step: AvatarTrainingStep;
+  canContinue: boolean;
+}
+
+export const avatarTrainingScenarios: AvatarTrainingScenario[] = [
+  {
+    key: "video",
+    label: "视频创作",
+    description: "支持创作有声播报形式的新闻视频、培训视频、广告营销视频等。",
+  },
+  {
+    key: "chat",
+    label: "对话互动",
+    description: "支持用户与数字人之间互动交流，可用于业务咨询、智能问答等场景。",
+  },
+  {
+    key: "live",
+    label: "直播",
+    description: "支持电商直播场景的数字人主播推流，实现7*24小时无人直播。",
+  },
+];
+
+export function createAvatarTrainingDraft(): AvatarTrainingDraft {
+  return {
+    selectedScenario: null,
+    step: "scenario",
+    canContinue: false,
+  };
+}
+
+export function selectAvatarTrainingScenario(
+  draft: AvatarTrainingDraft,
+  scenario: AvatarTrainingScenarioKey,
+): AvatarTrainingDraft {
+  return {
+    ...draft,
+    selectedScenario: scenario,
+    canContinue: true,
+  };
+}
+
+export function continueAvatarTraining(draft: AvatarTrainingDraft): AvatarTrainingDraft {
+  if (!draft.canContinue) return draft;
+  return {
+    ...draft,
+    step: "material",
+  };
+}
diff --git a/src/features/digital-human/voiceLibraryModel.ts b/src/features/digital-human/voiceLibraryModel.ts
new file mode 100644
index 0000000..20f20b1
--- /dev/null
+++ b/src/features/digital-human/voiceLibraryModel.ts
@@ -0,0 +1,34 @@
+export type VoiceLibraryTabKey = "official" | "created";
+export type VoiceCloneGender = "male" | "female";
+export type VoiceCloneMode = "record" | "upload";
+
+export interface VoiceLibraryTab {
+  key: VoiceLibraryTabKey;
+  label: string;
+}
+
+export interface VoiceCloneDraft {
+  gender: VoiceCloneGender;
+  cloneMode: VoiceCloneMode;
+  targetLanguage: string;
+  nameMaxLength: number;
+}
+
+export const voiceLibraryTabs: VoiceLibraryTab[] = [
+  { key: "official", label: "官方音色" },
+  { key: "created", label: "我创建的声音" },
+];
+
+export const voiceCloneLanguageOptions = ["不指定", "中文", "英文", "日语", "韩语", "法语", "德语", "俄语"];
+
+export const VOICE_CLONE_SCRIPT =
+  "尊敬的患者您好，欢迎来到智能健康管理中心，接下来请您放松身心，我们将为您讲解日常养生的注意事项，包括合理膳食搭配、每日运动强度建议以及常见慢性病的预防方法，有需要定制个性化健康方案的可以随时告知。";
+
+export function createVoiceCloneDraft(): VoiceCloneDraft {
+  return {
+    gender: "male",
+    cloneMode: "record",
+    targetLanguage: "不指定",
+    nameMaxLength: 20,
+  };
+}
diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
new file mode 100644
index 0000000..1a40f25
--- /dev/null
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -0,0 +1,2916 @@
+import {
+  AppstoreOutlined,
+  CloudUploadOutlined,
+  CloseOutlined,
+  FileImageOutlined,
+  LoadingOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  QuestionCircleOutlined,
+  SettingOutlined,
+  SkinOutlined,
+} from "@ant-design/icons";
+import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
+import ecommerceGenerated from "../../assets/ecommerce-carousel-generated.png";
+import ecommerceSlide4 from "../../assets/ecommerce-hero-carousel/slide-4.png";
+import ecommerceSlide5 from "../../assets/ecommerce-hero-carousel/slide-5.png";
+import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
+import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import {
+  analyzeProductImages,
+  buildProductSummary,
+  extractSellingPoints,
+  generateCreativeOptions,
+  generateStoryboard,
+  generateVideoPrompts,
+  checkCompliance,
+  type AdVideoUserConfig,
+  type ProductSummary,
+  type SellingPointResult,
+  type CreativeOption,
+  type Storyboard,
+  type VideoPrompt,
+  type ComplianceCheck,
+} from "../../api/adVideoPlanClient";
+
+
+interface ProductClonePageProps {
+  [key: string]: unknown;
+}
+
+type ProductCloneStatus = "idle" | "ready" | "generating" | "done";
+type ProductSetOutputKey = "set" | "detail" | "model" | "video";
+type CloneOutputKey = ProductSetOutputKey | "hot";
+type CloneSetCountKey = "selling" | "white" | "scene";
+type CloneModelPanelTab = "scene" | "model";
+type CloneVideoQualityKey = "standard" | "high" | "ultra";
+type ProductSetStatus = "idle" | "ready" | "generating" | "done";
+type ProductKitToolKey = "set" | "detail" | "wear" | "clone";
+type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
+type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
+type CloneReferenceMode = "upload" | "link";
+type CloneReplicateLevelKey = "style" | "high";
+type TryOnModelSource = "ai" | "library";
+type TryOnStatus = "idle" | "modeling" | "ready" | "generating" | "done";
+type DetailStatus = "idle" | "ready" | "generating" | "done";
+
+interface CloneImageItem {
+  id: string;
+  src: string;
+  name: string;
+  width?: number;
+  height?: number;
+  format?: string;
+}
+
+interface CloneResult {
+  id: string;
+  src: string;
+  label: string;
+}
+
+interface CloneSavedSetting {
+  id: string;
+  name: string;
+  savedAt: string;
+  output: CloneOutputKey;
+  platform: string;
+  market: string;
+  language: string;
+  ratio: string;
+  setCounts: Record<CloneSetCountKey, number>;
+  detailModules: string[];
+  modelPanelTab: CloneModelPanelTab;
+  modelScenes: string[];
+  modelCustomScene: string;
+  modelGender: string;
+  modelAge: string;
+  modelEthnicity: string;
+  modelBody: string;
+  modelAppearance: string;
+  videoQuality: CloneVideoQualityKey;
+  videoDurationSeconds: number;
+  videoSmart: boolean;
+  referenceMode?: CloneReferenceMode;
+  replicateLevel?: CloneReplicateLevelKey;
+  requirement: string;
+}
+
+type PlatformRatioModeKey = ProductSetOutputKey | "hot";
+
+interface PlatformRatioGroup {
+  ratios: string[];
+  defaultRatio: string;
+}
+
+const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [
+  { key: "set", label: "商品套图", icon: <AppstoreOutlined /> },
+  { key: "detail", label: "A+详情", icon: <FileImageOutlined /> },
+  { key: "wear", label: "服饰穿戴", icon: <SkinOutlined /> },
+  { key: "clone", label: "电商AI作图", icon: <AppstoreOutlined /> },
+];
+
+const platformSpecOptions: Array<{
+  label: string;
+  ratios: string[];
+  defaultRatio: string;
+  ratioGroups?: Partial<Record<PlatformRatioModeKey, PlatformRatioGroup>>;
+  specs: string[];
+  tip?: string;
+  aliases?: string[];
+}> = [
+  {
+    label: "淘宝/天猫",
+    ratios: ["淘宝主图 / SKU 图 800×800px", "详情页宽 750px", "详情页宽 790px"],
+    defaultRatio: "淘宝主图 / SKU 图 800×800px",
+    ratioGroups: {
+      set: {
+        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1", "800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: [
+          "750×1000px\u00a0\u00a0\u00a03：4",
+          "790×1053px\u00a0\u00a0\u00a03：4",
+          "750×1125px\u00a0\u00a0\u00a02：3",
+          "790×1185px\u00a0\u00a0\u00a02：3",
+        ],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      model: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1080×1440px\u00a0\u00a0\u00a03：4", "1080×1080px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["主图 / SKU 图 800×800px，≤3MB", "详情页宽 750px 或 790px，单张高≤1546px"],
+    tip: "建议主图 200-400KB JPG，超过 500KB 会影响加载速度。",
+  },
+  {
+    label: "京东",
+    ratios: ["京东主图 / SKU 图 800×800px", "详情页宽 750px", "首图主体占比 ≥70%"],
+    defaultRatio: "京东主图 / SKU 图 800×800px",
+    ratioGroups: {
+      set: {
+        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: [
+          "750×1000px\u00a0\u00a0\u00a03：4",
+          "990×1320px\u00a0\u00a0\u00a03：4",
+          "750×1125px\u00a0\u00a0\u00a02：3",
+          "990×1485px\u00a0\u00a0\u00a02：3",
+        ],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      model: {
+        ratios: ["750×1125px\u00a0\u00a0\u00a02：3", "990×1485px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1920×1080px\u00a0\u00a0\u00a016：9"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["主图 / SKU 图 800×800px，白底，≤1MB", "详情页宽 750px，首图主体占比 ≥70%"],
+  },
+  {
+    label: "拼多多",
+    ratios: ["主图 750×352px", "主图 800×800px", "详情页宽 750px"],
+    defaultRatio: "主图 750×352px",
+    ratioGroups: {
+      set: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1", "750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      model: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["主图 750×352px 或 800×800px，≤1MB", "详情页宽 750px，要求纯白底、无水印、无拼接"],
+  },
+  {
+    label: "抖音电商",
+    ratios: ["短视频 1080×1920px"],
+    defaultRatio: "短视频 1080×1920px",
+    ratioGroups: {
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["短视频 1080×1920px，9:16", "30s 内最佳"],
+  },
+  {
+    label: "亚马逊 Amazon",
+    ratios: ["主图 ≥1600×1600px", "建议 2000×2000px+", "最小 500×500px"],
+    defaultRatio: "主图 ≥1600×1600px",
+    ratioGroups: {
+      set: {
+        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1", "1200×1800px\u00a0\u00a0\u00a02：3", "1200×1600px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "1200×1800px\u00a0\u00a0\u00a02：3",
+      },
+      model: {
+        ratios: ["1200×1800px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "1200×1800px\u00a0\u00a0\u00a02：3",
+      },
+      video: {
+        ratios: ["1920×1080px\u00a0\u00a0\u00a016：9"],
+        defaultRatio: "1920×1080px\u00a0\u00a0\u00a016：9",
+      },
+      hot: {
+        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["主图 1600×1600px+，纯白底，≤10MB", "最小 500×500px，建议 2000px+ 以支持缩放"],
+    aliases: ["亚马逊"],
+  },
+  {
+    label: "Shopee",
+    ratios: ["商品主图 1024×1024px", "基础主图 800×800px"],
+    defaultRatio: "商品主图 1024×1024px",
+    ratioGroups: {
+      set: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      model: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["商品主图推荐 1024×1024px，基础 800×800px", "≤2MB，白底或浅色底"],
+    aliases: ["虾皮 Shopee/Lazada", "虾皮"],
+  },
+  {
+    label: "Lazada",
+    ratios: ["商品主图 800×800px"],
+    defaultRatio: "商品主图 800×800px",
+    ratioGroups: {
+      set: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      model: {
+        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["商品主图 800×800px，1:1"],
+  },
+  {
+    label: "Instagram",
+    ratios: ["帖子 1080×1350px", "帖子 1080×1080px", "Stories / Reels 1080×1920px", "头像 320×320px"],
+    defaultRatio: "帖子 1080×1350px",
+    ratioGroups: {
+      set: {
+        ratios: ["1080×1080px\u00a0\u00a0\u00a01：1", "1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1080px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
+      },
+      model: {
+        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+    },
+    specs: ["帖子 1080×1350px 或 1080×1080px", "Stories / Reels 封面 1080×1920px，头像 320×320px"],
+    tip: "建议 ≤1MB JPG。",
+    aliases: ["Instagram Reels"],
+  },
+  {
+    label: "速卖通",
+    ratios: ["主图 800×800px", "主图 1000×1000px+"],
+    defaultRatio: "主图 800×800px",
+    ratioGroups: {
+      set: {
+        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["750×1125px\u00a0\u00a0\u00a02：3", "750×1000px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
+      },
+      model: {
+        ratios: ["750×1125px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1920×1080px\u00a0\u00a0\u00a016：9"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["主图建议 800×800px 或更高，1:1", "适合跨境电商主图、SKU 图和场景图"],
+  },
+  {
+    label: "eBay",
+    ratios: ["商品图 1:1", "白底多角度展示图 1:1"],
+    defaultRatio: "商品图 1:1",
+    ratioGroups: {
+      set: {
+        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["1000×1500px\u00a0\u00a0\u00a02：3", "1200×1600px\u00a0\u00a0\u00a03：4"],
+        defaultRatio: "1000×1500px\u00a0\u00a0\u00a02：3",
+      },
+      model: {
+        ratios: ["1000×1500px\u00a0\u00a0\u00a02：3"],
+        defaultRatio: "1000×1500px\u00a0\u00a0\u00a02：3",
+      },
+      video: {
+        ratios: ["1920×1080px\u00a0\u00a0\u00a016：9", "1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1920×1080px\u00a0\u00a0\u00a016：9",
+      },
+      hot: {
+        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["商品图建议 1:1，主体清晰居中", "适合白底主图和多角度展示图"],
+  },
+  {
+    label: "TikTok Shop",
+    ratios: ["商品主图 1:1", "短视频 / 竖版封面 9:16"],
+    defaultRatio: "商品主图 1:1",
+    ratioGroups: {
+      set: {
+        ratios: ["1280×1280px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "1280×1280px\u00a0\u00a0\u00a01：1",
+      },
+      detail: {
+        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
+      },
+      model: {
+        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
+        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
+      },
+      video: {
+        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
+        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
+      },
+      hot: {
+        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
+        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
+      },
+    },
+    specs: ["商品主图建议 1:1", "短视频/竖版封面建议 9:16"],
+  },
+];
+const platformOptions = platformSpecOptions.map((option) => option.label);
+const marketLanguageOptions: Array<{ country: string; languages: string[] }> = [
+  { country: "中国", languages: ["中文"] },
+  { country: "美国", languages: ["英文"] },
+  { country: "加拿大", languages: ["英文", "法文"] },
+  { country: "英国", languages: ["英文"] },
+  { country: "德国", languages: ["德文"] },
+  { country: "法国", languages: ["法文"] },
+  { country: "意大利", languages: ["意大利语"] },
+  { country: "西班牙", languages: ["西班牙语"] },
+  { country: "日本", languages: ["日文"] },
+  { country: "韩国", languages: ["韩文"] },
+  { country: "澳大利亚", languages: ["英文"] },
+  { country: "新加坡", languages: ["英文", "中文"] },
+  { country: "马来西亚", languages: ["马来语", "英文", "中文"] },
+  { country: "印尼", languages: ["印度尼西亚语", "英文"] },
+  { country: "越南", languages: ["越南语", "英文"] },
+  { country: "泰国", languages: ["泰语", "英文"] },
+  { country: "菲律宾", languages: ["菲律宾语（他加禄语）", "英文"] },
+  { country: "巴西", languages: ["葡萄牙语"] },
+  { country: "墨西哥", languages: ["西班牙语"] },
+  { country: "智利", languages: ["西班牙语"] },
+  { country: "哥伦比亚", languages: ["西班牙语"] },
+  { country: "阿联酋", languages: ["阿拉伯语", "英文"] },
+  { country: "沙特阿拉伯", languages: ["阿拉伯语", "英文"] },
+  { country: "俄罗斯", languages: ["俄语"] },
+  { country: "波兰", languages: ["波兰语"] },
+];
+const marketOptions = marketLanguageOptions.map((option) => option.country);
+const languageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages)));
+const languageAliases: Record<string, string> = {
+  英语: "英文",
+  日语: "日文",
+  德语: "德文",
+  法语: "法文",
+  韩语: "韩文",
+  西文: "西班牙语",
+  葡文: "葡萄牙语",
+  印尼语: "印度尼西亚语",
+  菲律宾语: "菲律宾语（他加禄语）",
+};
+const defaultPlatformSpec = platformSpecOptions[0]!;
+const getPlatformSpec = (value: string) =>
+  platformSpecOptions.find((option) => option.label === value || option.aliases?.includes(value)) ?? defaultPlatformSpec;
+const normalizePlatform = (value: string) => getPlatformSpec(value).label;
+const domesticPlatformLabels = new Set(["淘宝/天猫", "京东", "拼多多", "抖音电商"]);
+const domesticPlatformLanguages = ["中文"];
+const isDomesticPlatform = (platformValue: string) => domesticPlatformLabels.has(normalizePlatform(platformValue));
+const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): PlatformRatioGroup => {
+  const platformSpec = getPlatformSpec(value);
+  return (mode ? platformSpec.ratioGroups?.[mode] : null) ?? {
+    ratios: platformSpec.ratios,
+    defaultRatio: platformSpec.defaultRatio,
+  };
+};
+const getPlatformRatioOptions = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).ratios;
+const getPlatformDefaultRatio = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).defaultRatio;
+const getUniqueRatioOptions = (ratios: string[]) => Array.from(new Set(ratios));
+const normalizeRatioToken = (value: string) => value.replace(/：/g, ":").trim();
+const normalizeRatioForPlatform = (platformValue: string, ratioValue: string, mode?: PlatformRatioModeKey) => {
+  const platformRatios = getPlatformRatioOptions(platformValue, mode);
+  if (platformRatios.includes(ratioValue)) return ratioValue;
+  const normalizedRatio = normalizeRatioToken(ratioValue);
+  const matchedRatio = platformRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
+  return matchedRatio ?? getPlatformDefaultRatio(platformValue, mode);
+};
+const formatRatioDisplayValue = (value: string) => {
+  if (!value.includes("套图")) return value;
+  const size = value.match(/\d+\s*×\s*\d+\s*px?/u)?.[0]?.replace(/\s+/g, "") ?? "";
+  const ratio = value.match(/\d+(?:\.\d+)?\s*[:：]\s*\d+(?:\.\d+)?/u)?.[0]?.replace(/\s+/g, "").replace(/:/g, "：") ?? "";
+  return size && ratio ? `${size}\u00a0\u00a0\u00a0${ratio}` : value.replace(/^套图[:：]\s*/, "");
+};
+const greatestCommonDivisor = (left: number, right: number): number => {
+  let a = Math.abs(left);
+  let b = Math.abs(right);
+  while (b) {
+    [a, b] = [b, a % b];
+  }
+  return a || 1;
+};
+const formatAspectRatio = (width: number, height: number) => {
+  const divisor = greatestCommonDivisor(width, height);
+  return `${Math.round(width / divisor)}：${Math.round(height / divisor)}`;
+};
+const formatUploadedImageRatio = (image?: CloneImageItem) => {
+  if (!image) return null;
+  const format = image.format ? `\u00a0\u00a0\u00a0${image.format}` : "";
+  if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`;
+  return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`;
+};
+const defaultMarketLanguageOption = marketLanguageOptions[0]!;
+const normalizeMarket = (value: string) =>
+  marketLanguageOptions.some((option) => option.country === value) ? value : defaultMarketLanguageOption.country;
+const normalizeLanguage = (value: string) => languageAliases[value] ?? value;
+const uniqueLanguages = (languages: string[]) => Array.from(new Set(languages));
+const appendEnglish = (languages: string[]) => Array.from(new Set([...languages, "英文"]));
+const getMarketLanguageOptions = (marketValue: string) =>
+  appendEnglish((marketLanguageOptions.find((option) => option.country === marketValue) ?? defaultMarketLanguageOption).languages);
+const getPlatformLanguageOptions = (platformValue: string, marketValue: string) => {
+  const marketLanguages = getMarketLanguageOptions(marketValue);
+  if (!isDomesticPlatform(platformValue)) return marketLanguages;
+  const localLanguages = marketLanguages.filter((item) => item !== "英文");
+  return uniqueLanguages([...localLanguages, ...domesticPlatformLanguages, "英文"]);
+};
+const getPlatformDefaultLanguage = (platformValue: string, marketValue: string) =>
+  isDomesticPlatform(platformValue) ? "中文" : (getPlatformLanguageOptions(platformValue, marketValue)[0] ?? languageOptions[0] ?? "英文");
+const normalizeLanguageForPlatform = (platformValue: string, marketValue: string, languageValue: string) => {
+  const normalizedLanguage = normalizeLanguage(languageValue);
+  const platformLanguages = getPlatformLanguageOptions(platformValue, marketValue);
+  return platformLanguages.includes(normalizedLanguage) ? normalizedLanguage : getPlatformDefaultLanguage(platformValue, marketValue);
+};
+const productSetOutputOptions: Array<{ key: ProductSetOutputKey; label: string }> = [
+  { key: "set", label: "套图" },
+  { key: "detail", label: "详情图" },
+  { key: "model", label: "模特图" },
+  { key: "video", label: "短视频" },
+];
+const cloneOutputOptions: Array<{ key: CloneOutputKey; label: string }> = [
+  ...productSetOutputOptions,
+  { key: "hot", label: "爆款图复刻" },
+];
+const cloneSetCountOptions: Array<{
+  key: CloneSetCountKey;
+  title: string;
+  desc: string;
+}> = [
+  { key: "selling", title: "卖点图", desc: "展示商品的核心卖点及细节特写" },
+  { key: "white", title: "白底图", desc: "白底主图，多角度呈现商品细节" },
+  { key: "scene", title: "场景图", desc: "展示商品的生活使用场景和人物搭配" },
+];
+const defaultCloneSetCounts: Record<CloneSetCountKey, number> = {
+  selling: 3,
+  white: 1,
+  scene: 3,
+};
+const minCloneSetTotal = 1;
+const maxCloneSetTotal = 16;
+const maxCloneProductImages = 7;
+const maxCloneReferenceImages = 20;
+const cloneVideoDurationMin = 5;
+const cloneVideoDurationMax = 15;
+const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting";
+const cloneVideoQualityOptions: Array<{ key: CloneVideoQualityKey; label: string; desc: string }> = [
+  { key: "standard", label: "标准", desc: "快速出片" },
+  { key: "high", label: "高清", desc: "推荐" },
+  { key: "ultra", label: "超清", desc: "细节增强" },
+];
+const cloneReplicateLevelOptions: Array<{ key: CloneReplicateLevelKey; title: string; desc: string }> = [
+  { key: "style", title: "参考风格", desc: "参考整体风格和结构，自动调整色彩和重构场景。" },
+  { key: "high", title: "高度复刻", desc: "参照参考图视觉结构替换产品和文案，场景细节略有差异。" },
+];
+const tryOnRatioOptions = ["3:4", "1:1", "9:16"];
+const tryOnScenes = ["纯色棚拍", "都市街头", "街角咖啡", "自然草坪", "度假海滩", "温馨居家", "艺术展馆"];
+const normalizeCloneModelSceneSelection = (scenes: string[] | null | undefined) => {
+  const validScenes = (scenes ?? []).filter((scene) => typeof scene === "string" && scene.trim());
+  const latestScene = validScenes[validScenes.length - 1];
+  return latestScene ? [latestScene] : [];
+};
+const tryOnModelOptions = {
+  gender: ["女", "男"],
+  age: ["青年", "少年", "中年"],
+  ethnicity: ["欧美白人", "亚洲人", "拉美裔", "非洲裔"],
+  body: ["标准", "高挑", "微胖", "运动"],
+};
+const sampleResults = [ecommerceSlide4, ecommerceGenerated, ecommerceSlide5];
+const productSetAssets = {
+  main: "https://xiuxiu-pro.meitudata.com/poster/6e3eebacad8d5e47e1896ee7d54827bc.png?imageView2/2/w/800/format/webp/q/80/ignore-error/1",
+  scene: "https://xiuxiu-pro.meitudata.com/poster/21225fc86b28d9e4d85636483c67408e.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
+  model: "https://xiuxiu-pro.meitudata.com/poster/4b8e6d1bd0996be52822dd1fac73cffd.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
+  detail: "https://xiuxiu-pro.meitudata.com/poster/29dd195a450ee5a7f7451ded6680e969.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
+  selling: "https://xiuxiu-pro.meitudata.com/poster/66bdef541b67588e8db2a03b39dc815b.jpg?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
+  hosting: "https://xiuxiu-pro-new.meitudata.com/poster/50c17a98c77fac4d0523c8cbdf0d33ca.jpg?imageView2/2/format/webp/q/80/ignore-error/1",
+};
+const productSetPreviewCards = [
+  { id: "main", label: "01 主图 (白底/合规)", src: productSetAssets.main },
+  { id: "scene", label: "02 场景展示", src: productSetAssets.scene },
+  { id: "model", label: "03 模特场景图", src: productSetAssets.model },
+  { id: "detail", label: "04 细节说明", src: productSetAssets.detail },
+  { id: "selling", label: "05 卖点详解", src: productSetAssets.selling },
+];
+const tryOnAssets = {
+  dressA: "https://xiuxiu-pro-new.meitudata.com/poster/133ca2d6c13bac6cfaa11fa29a155551.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  dressB: "https://xiuxiu-pro-new.meitudata.com/poster/a661006820e888d9df13023075096e94.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  modelWoman: "https://xiuxiu-pro-new.meitudata.com/poster/f806c6afaf6f38f634c156c5b6058201.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  modelMan: "https://xiuxiu-pro-new.meitudata.com/poster/8c26503c67dc695e25e420e48caf4cde.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  modelAsian: "https://xiuxiu-pro-new.meitudata.com/poster/0f2a7c92707312ec74647d66f15a6ef9.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  tryA: "https://xiuxiu-pro-new.meitudata.com/poster/7f77e0866f05ff723959e1f48830713c.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+  tryB: "https://xiuxiu-pro-new.meitudata.com/poster/0b951004eabcdd7cae595dfdb4c7f8c3.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+  jacket: "https://xiuxiu-pro-new.meitudata.com/poster/fdbf10b4c92af5b1986444cdd9affaa5.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  jacketResultA: "https://xiuxiu-pro-new.meitudata.com/poster/b1152bb292323b87696dd2f6e518e818.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+  jacketResultB: "https://xiuxiu-pro-new.meitudata.com/poster/1c1e757702108fef92d85be0c2802c01.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+  hat: "https://xiuxiu-pro-new.meitudata.com/poster/278af735b076ab812888802d3e3db0b8.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
+  hatResultA: "https://xiuxiu-pro-new.meitudata.com/poster/a3ba241b7aa6060869b096d3f10e5db4.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+  hatResultB: "https://xiuxiu-pro-new.meitudata.com/poster/01ed1ae80a187c70c682bb6d0ec6fa68.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
+};
+
+const tryOnCards = [
+  {
+    title: "多件混搭自动融合",
+    tone: "red",
+    inputs: [tryOnAssets.dressA, tryOnAssets.dressB, tryOnAssets.modelWoman],
+    results: [tryOnAssets.tryA, tryOnAssets.tryB],
+  },
+  {
+    title: "一件也能出大片",
+    tone: "brown",
+    inputs: [tryOnAssets.jacket, tryOnAssets.modelMan],
+    results: [tryOnAssets.jacketResultA, tryOnAssets.jacketResultB],
+  },
+  {
+    title: "鞋帽饰品完美适配",
+    tone: "gold",
+    inputs: [tryOnAssets.hat, tryOnAssets.modelAsian],
+    results: [tryOnAssets.hatResultA, tryOnAssets.hatResultB],
+  },
+];
+
+const detailTypeOptions = ["普通A+", "品牌A+", "标准详情页", "移动端长图"];
+const detailModules = [
+  { id: "hero", title: "首屏主视觉", desc: "传递核心价值" },
+  { id: "selling", title: "核心卖点图", desc: "突出卖点优势" },
+  { id: "usage", title: "使用场景图", desc: "呈现真实使用场景" },
+  { id: "angle", title: "多角度图", desc: "多角度呈现外观" },
+  { id: "scene", title: "场景氛围图", desc: "展示使用场景" },
+  { id: "detail", title: "商品细节图", desc: "放大材质与工艺" },
+  { id: "story", title: "品牌故事图", desc: "传达品牌理念" },
+  { id: "size", title: "尺寸/容量/尺码图", desc: "展示规格信息" },
+  { id: "compare", title: "效果对比图", desc: "使用前后效果对比" },
+  { id: "spec", title: "详细规格/参数表", desc: "展示详细商品数据" },
+  { id: "craft", title: "工艺制作图", desc: "展示工艺制作过程" },
+  { id: "gift", title: "配件/赠品图", desc: "明确收货的所有物品" },
+  { id: "series", title: "系列展示图", desc: "多色或多SKU展示" },
+  { id: "ingredient", title: "商品成分图", desc: "展示配方/材质/成分" },
+  { id: "service", title: "售后保障图", desc: "说明质保退换政策" },
+  { id: "tips", title: "使用建议图", desc: "商品使用的注意事项" },
+];
+const defaultDetailModuleIds: string[] = [];
+const defaultCloneDetailModuleIds = ["hero", "selling", "usage", "angle", "scene", "detail"];
+const cloneDetailModules = detailModules;
+const detailAssets = {
+  productA: "https://xiuxiu-pro.meitudata.com/poster/182676711565ee98e20cf92d766d1643.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  productB: "https://xiuxiu-pro.meitudata.com/poster/ba6312cbc3a32ceb8966f9ea20b9ee9c.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  productC: "https://xiuxiu-pro.meitudata.com/poster/7ee5753a3141fa12cda155126c8225d3.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  longPage: "https://xiuxiu-pro.meitudata.com/poster/19ef313484fc87c9bdd3cd52ce2a5947.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridA: "https://xiuxiu-pro.meitudata.com/poster/e74e8d920ac0f87020f90457d42a7153.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridB: "https://xiuxiu-pro.meitudata.com/poster/1652064f17c5c2b32ce287244b505c15.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridC: "https://xiuxiu-pro.meitudata.com/poster/dd8abace327edf61d8a8e2d7db42cfbe.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridD: "https://xiuxiu-pro.meitudata.com/poster/7dc397f1cb76a35f7f0ed3c3ce78ba81.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridE: "https://xiuxiu-pro.meitudata.com/poster/1199bd8b968a5162752e1ee2b093d315.png?imageView2/2/format/webp/q/80/ignore-error/1",
+  gridF: "https://xiuxiu-pro.meitudata.com/poster/7a8cdb3693418df9915741960f8f5aa8.png?imageView2/2/format/webp/q/80/ignore-error/1",
+};
+const detailProductSamples = [detailAssets.productA, detailAssets.productB, detailAssets.productC];
+const detailGridSamples = [detailAssets.gridA, detailAssets.gridB, detailAssets.gridC, detailAssets.gridD, detailAssets.gridE, detailAssets.gridF];
+
+function getImageFileFormat(file: File) {
+  const mimeFormat = file.type.split("/")[1]?.replace("jpeg", "jpg").toUpperCase();
+  if (mimeFormat) return mimeFormat;
+  return file.name.split(".").pop()?.toUpperCase() ?? "";
+}
+
+function readImageDimensions(src: string): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight });
+    image.onerror = reject;
+    image.src = src;
+  });
+}
+
+function createObjectImageItems(files: File[], limit: number, prefix: string) {
+  return Array.from(files)
+    .filter((file) => file.type.startsWith("image/"))
+    .slice(0, limit)
+    .map<CloneImageItem>((file, index) => ({
+      id: `${prefix}-${Date.now()}-${index}`,
+      src: URL.createObjectURL(file),
+      name: file.name,
+      format: getImageFileFormat(file),
+    }));
+}
+
+function isCloneSavedSetting(item: unknown): item is CloneSavedSetting {
+  const candidate = item as Partial<CloneSavedSetting>;
+  return (
+    typeof candidate.id === "string" &&
+    typeof candidate.name === "string" &&
+    typeof candidate.savedAt === "string" &&
+    typeof candidate.output === "string" &&
+    typeof candidate.platform === "string" &&
+    typeof candidate.market === "string" &&
+    typeof candidate.language === "string" &&
+    typeof candidate.ratio === "string" &&
+    typeof candidate.videoDurationSeconds === "number"
+  );
+}
+
+function readCloneLatestSetting() {
+  if (typeof window === "undefined") return null;
+  try {
+    const rawValue = window.localStorage.getItem(cloneLatestSettingStorageKey);
+    if (rawValue) {
+      const parsedValue: unknown = JSON.parse(rawValue);
+      if (isCloneSavedSetting(parsedValue)) return parsedValue;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function writeCloneLatestSetting(setting: CloneSavedSetting) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(cloneLatestSettingStorageKey, JSON.stringify(setting));
+}
+
+function clampCloneVideoDuration(value: number) {
+  return Math.min(cloneVideoDurationMax, Math.max(cloneVideoDurationMin, Math.round(value)));
+}
+
+function ProductClonePage(_props: ProductClonePageProps = {}) {
+  const setInputRef = useRef<HTMLInputElement>(null);
+  const productInputRef = useRef<HTMLInputElement>(null);
+  const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
+  const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const garmentInputRef = useRef<HTMLInputElement>(null);
+  const detailInputRef = useRef<HTMLInputElement>(null);
+  const countHoldTimeoutRef = useRef<number | null>(null);
+  const countHoldIntervalRef = useRef<number | null>(null);
+  const latestCloneSettingRef = useRef<CloneSavedSetting | null>(null);
+  const skipInitialCloneAutoSaveRef = useRef(true);
+  const skipNextCloneAutoSaveRef = useRef(false);
+  const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
+  const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
+  const [productSetPlatform, setProductSetPlatform] = useState(platformOptions[0]);
+  const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
+  const [productSetLanguage, setProductSetLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
+  const [productSetRatio, setProductSetRatio] = useState(getPlatformDefaultRatio(platformOptions[0]));
+  const [productSetRequirement, setProductSetRequirement] = useState("");
+  const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>("video");
+  const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
+  const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
+  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
+  const [showHostingModal, setShowHostingModal] = useState(false);
+  const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
+  const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
+  const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>("detail");
+  const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
+  const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
+  const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
+  const [cloneReferenceMode, setCloneReferenceMode] = useState<CloneReferenceMode>("upload");
+  const [cloneReferenceImages, setCloneReferenceImages] = useState<CloneImageItem[]>([]);
+  const [cloneReplicateLevel, setCloneReplicateLevel] = useState<CloneReplicateLevelKey>("high");
+  const [cloneSetCounts, setCloneSetCounts] = useState(defaultCloneSetCounts);
+  const [selectedCloneDetailModules, setSelectedCloneDetailModules] = useState<string[]>(defaultCloneDetailModuleIds);
+  const [cloneModelPanelTab, setCloneModelPanelTab] = useState<CloneModelPanelTab>("scene");
+  const [selectedCloneModelScenes, setSelectedCloneModelScenes] = useState<string[]>([]);
+  const [cloneModelCustomScene, setCloneModelCustomScene] = useState("");
+  const [cloneModelGender, setCloneModelGender] = useState(tryOnModelOptions.gender[0]);
+  const [cloneModelAge, setCloneModelAge] = useState(tryOnModelOptions.age[0]);
+  const [cloneModelEthnicity, setCloneModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
+  const [cloneModelBody, setCloneModelBody] = useState(tryOnModelOptions.body[0]);
+  const [cloneModelAppearance, setCloneModelAppearance] = useState("");
+  const [cloneVideoQuality, setCloneVideoQuality] = useState<CloneVideoQualityKey>("high");
+  const [cloneVideoDuration, setCloneVideoDuration] = useState(10);
+  const [cloneVideoSmart, setCloneVideoSmart] = useState(true);
+  const [adVideoStep, setAdVideoStep] = useState<"idle" | "planning" | "planned" | "rendering">("idle");
+  const [adVideoBusy, setAdVideoBusy] = useState(false);
+  const [adVideoError, setAdVideoError] = useState<string | null>(null);
+  const [adVideoProgress, setAdVideoProgress] = useState("");
+  const [adVideoSummary, setAdVideoSummary] = useState<ProductSummary | null>(null);
+  const [adVideoSelling, setAdVideoSelling] = useState<SellingPointResult | null>(null);
+  const [adVideoCreatives, setAdVideoCreatives] = useState<CreativeOption[]>([]);
+  const [adVideoStoryboard, setAdVideoStoryboard] = useState<Storyboard | null>(null);
+  const [adVideoPrompts, setAdVideoPrompts] = useState<VideoPrompt[]>([]);
+  const [adVideoCompliance, setAdVideoCompliance] = useState<ComplianceCheck | null>(null);
+  const [adVideoScenes, setAdVideoScenes] = useState<
+    Array<{ sceneId: number; taskId?: string; status: string; progress: number; resultUrl?: string | null; error?: string }>
+  >([]);
+  const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
+  const [requirement, setRequirement] = useState("");
+  const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
+  const [cloneSettingName, setCloneSettingName] = useState("新建创作");
+  const [platform, setPlatform] = useState(platformOptions[0]);
+  const [market, setMarket] = useState(marketOptions[0]);
+  const [language, setLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
+  const [ratio, setRatio] = useState(getPlatformDefaultRatio(platformOptions[0]));
+  const [status, setStatus] = useState<ProductCloneStatus>("idle");
+  const [results, setResults] = useState<CloneResult[]>([]);
+  const [garmentImages, setGarmentImages] = useState<CloneImageItem[]>([]);
+  const [modelSource, setModelSource] = useState<TryOnModelSource>("ai");
+  const [modelGender, setModelGender] = useState(tryOnModelOptions.gender[0]);
+  const [modelAge, setModelAge] = useState(tryOnModelOptions.age[0]);
+  const [modelEthnicity, setModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
+  const [modelBody, setModelBody] = useState(tryOnModelOptions.body[0]);
+  const [appearance, setAppearance] = useState("");
+  const [selectedScenes, setSelectedScenes] = useState<string[]>([]);
+  const [customScene, setCustomScene] = useState("");
+  const [smartScene, setSmartScene] = useState(false);
+  const [tryOnRatio, setTryOnRatio] = useState(tryOnRatioOptions[0]);
+  const [tryOnStatus, setTryOnStatus] = useState<TryOnStatus>("idle");
+  const [tryOnResultImages, setTryOnResultImages] = useState<string[]>([]);
+  const [detailProductImages, setDetailProductImages] = useState<CloneImageItem[]>([]);
+  const [detailPlatform, setDetailPlatform] = useState(platformOptions[0]);
+  const [detailMarket, setDetailMarket] = useState(marketOptions[0]);
+  const [detailLanguage, setDetailLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
+  const [detailType, setDetailType] = useState(detailTypeOptions[0]);
+  const [detailRequirement, setDetailRequirement] = useState("");
+  const [selectedDetailModules, setSelectedDetailModules] = useState<string[]>(defaultDetailModuleIds);
+  const [detailStatus, setDetailStatus] = useState<DetailStatus>("idle");
+  const productSetRatioOptions = getPlatformRatioOptions(productSetPlatform, productSetOutput);
+  const hotUploadedRatioOption = cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null;
+  const baseCloneRatioOptions = getPlatformRatioOptions(platform, cloneOutput);
+  const cloneRatioOptions = hotUploadedRatioOption
+    ? getUniqueRatioOptions([...baseCloneRatioOptions, hotUploadedRatioOption])
+    : baseCloneRatioOptions;
+  const productSetLanguageOptions = getPlatformLanguageOptions(productSetPlatform, productSetMarket);
+  const cloneLanguageOptions = getPlatformLanguageOptions(platform, market);
+  const detailLanguageOptions = getPlatformLanguageOptions(detailPlatform, detailMarket);
+  const ecommerceMentionImages: MentionImageOption[] = [
+    ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
+    ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
+  ];
+
+  const selectedProductSetOutput =
+    productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
+  const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
+  const productSetPreviewReady = productSetStatus === "done";
+  const cloneSetTotal = Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0);
+  const canGenerateSet = setImages.length > 0 && productSetStatus !== "generating";
+  const canGenerate = productImages.length > 0 && status !== "generating";
+  const canGenerateTryOn = garmentImages.length > 0 && tryOnStatus !== "generating" && tryOnStatus !== "modeling";
+  const canGenerateDetail = detailProductImages.length > 0 && detailStatus !== "generating";
+  const cloneVideoDurationProgress =
+    ((cloneVideoDuration - cloneVideoDurationMin) / (cloneVideoDurationMax - cloneVideoDurationMin)) * 100;
+  const cloneVideoDurationStyle = {
+    "--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
+  } as CSSProperties;
+
+  const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
+    setRequirementImageMentionQuery(ecommerceMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
+  };
+
+  const insertRequirementImageMention = (image: MentionImageOption) => {
+    const textarea = requirementTextareaRef.current;
+    const cursor = textarea?.selectionStart ?? requirement.length;
+    const next = insertImageMentionValue(requirement, cursor, image.name, 500);
+    setRequirement(next.value);
+    setRequirementImageMentionQuery(null);
+    window.requestAnimationFrame(() => {
+      requirementTextareaRef.current?.focus();
+      requirementTextareaRef.current?.setSelectionRange(next.selectionStart, next.selectionStart);
+    });
+  };
+
+  const addSetImages = (files: File[]) => {
+    if (setImages.length >= 3) return;
+    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+    if (!imageFiles.length) return;
+    setSetImages((current) => {
+      const nextImages = createObjectImageItems(imageFiles, 3 - current.length, "set");
+      return nextImages.length ? [...current, ...nextImages].slice(0, 3) : current;
+    });
+    setProductSetStatus("ready");
+  };
+
+  const handleSetUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    addSetImages(Array.from(files));
+    event.target.value = "";
+  };
+
+  const handleSetDrop = (event: DragEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setIsSetUploadDragging(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length) addSetImages(files);
+  };
+
+  const removeSetImage = (imageId: string) => {
+    setSetImages((current) => {
+      const next = current.filter((item) => item.id !== imageId);
+      if (next.length === 0) setProductSetStatus("idle");
+      return next;
+    });
+  };
+
+  const addProductImages = (files: File[]) => {
+    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+    if (!imageFiles.length) return;
+    setProductImages((current) => {
+      if (current.length >= maxCloneProductImages) return current;
+      const nextImages = createObjectImageItems(imageFiles, maxCloneProductImages - current.length, "product");
+      return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneProductImages) : current;
+    });
+    setStatus("ready");
+    setResults([]);
+  };
+
+  const handleProductUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    addProductImages(Array.from(files));
+    event.target.value = "";
+  };
+
+  const handleProductDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsProductUploadDragging(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length) addProductImages(files);
+  };
+
+  const removeProductImage = (imageId: string) => {
+    setProductImages((current) => {
+      const next = current.filter((item) => item.id !== imageId);
+      if (next.length === 0) {
+        setStatus("idle");
+        setResults([]);
+      }
+      return next;
+    });
+  };
+
+  const hydrateCloneReferenceImageMeta = (items: CloneImageItem[]) => {
+    items.forEach((item) => {
+      readImageDimensions(item.src)
+        .then(({ width, height }) => {
+          setCloneReferenceImages((current) =>
+            current.map((currentItem) => (currentItem.id === item.id ? { ...currentItem, width, height } : currentItem)),
+          );
+        })
+        .catch(() => undefined);
+    });
+  };
+
+  const addCloneReferenceImages = (files: File[]) => {
+    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+    if (!imageFiles.length) return;
+    const remainingSlots = maxCloneReferenceImages - cloneReferenceImages.length;
+    if (remainingSlots <= 0) return;
+    const nextImages = createObjectImageItems(imageFiles, remainingSlots, "reference");
+    if (!nextImages.length) return;
+    setCloneReferenceImages((current) => {
+      if (current.length >= maxCloneReferenceImages) return current;
+      return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneReferenceImages) : current;
+    });
+    hydrateCloneReferenceImageMeta(nextImages);
+  };
+
+  const handleCloneReferenceUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    addCloneReferenceImages(Array.from(files));
+    event.target.value = "";
+  };
+
+  const updateCloneSetCount = (key: CloneSetCountKey, delta: -1 | 1) => {
+    setCloneSetCounts((current) => {
+      const total = Object.values(current).reduce((sum, value) => sum + value, 0);
+      const nextValue = current[key] + delta;
+      if (delta < 0 && (current[key] <= 0 || total <= minCloneSetTotal)) return current;
+      if (delta > 0 && total >= maxCloneSetTotal) return current;
+      return { ...current, [key]: Math.max(0, Math.min(maxCloneSetTotal, nextValue)) };
+    });
+  };
+
+  const clearCloneSetCountHold = () => {
+    if (countHoldTimeoutRef.current !== null) {
+      window.clearTimeout(countHoldTimeoutRef.current);
+      countHoldTimeoutRef.current = null;
+    }
+    if (countHoldIntervalRef.current !== null) {
+      window.clearInterval(countHoldIntervalRef.current);
+      countHoldIntervalRef.current = null;
+    }
+  };
+
+  const startCloneSetCountHold = (key: CloneSetCountKey, delta: -1 | 1, disabled: boolean) => {
+    if (disabled) return;
+    clearCloneSetCountHold();
+    updateCloneSetCount(key, delta);
+    window.addEventListener("pointerup", clearCloneSetCountHold, { once: true });
+    window.addEventListener("pointercancel", clearCloneSetCountHold, { once: true });
+    countHoldTimeoutRef.current = window.setTimeout(() => {
+      countHoldIntervalRef.current = window.setInterval(() => updateCloneSetCount(key, delta), 110);
+    }, 320);
+  };
+
+  const toggleCloneDetailModule = (moduleId: string) => {
+    setSelectedCloneDetailModules((current) =>
+      current.includes(moduleId) ? current.filter((item) => item !== moduleId) : [...current, moduleId],
+    );
+  };
+
+  const toggleCloneModelScene = (scene: string) => {
+    setSelectedCloneModelScenes((current) => (current[0] === scene ? [] : [scene]));
+  };
+
+  const handleProductSetPlatformChange = (nextPlatform: string) => {
+    const normalizedPlatform = normalizePlatform(nextPlatform);
+    setProductSetPlatform(normalizedPlatform);
+    setProductSetRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, productSetOutput));
+    setProductSetLanguage(getPlatformDefaultLanguage(normalizedPlatform, productSetMarket));
+  };
+
+  const handleProductSetOutputChange = (nextOutput: ProductSetOutputKey) => {
+    setProductSetOutput(nextOutput);
+    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, nextOutput));
+  };
+
+  const handleProductSetMarketChange = (nextMarket: string) => {
+    const normalizedMarket = normalizeMarket(nextMarket);
+    setProductSetMarket(normalizedMarket);
+    setProductSetLanguage(getPlatformDefaultLanguage(productSetPlatform, normalizedMarket));
+  };
+
+  const handleClonePlatformChange = (nextPlatform: string) => {
+    const normalizedPlatform = normalizePlatform(nextPlatform);
+    setPlatform(normalizedPlatform);
+    setRatio((current) =>
+      cloneOutput === "hot" && current.startsWith("上传图片") && hotUploadedRatioOption
+        ? hotUploadedRatioOption
+        : normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
+    );
+    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
+  };
+
+  const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
+    setCloneOutput(nextOutput);
+    setRatio((current) =>
+      nextOutput === "hot" && current.startsWith("上传图片") && hotUploadedRatioOption
+        ? hotUploadedRatioOption
+        : normalizeRatioForPlatform(platform, current, nextOutput),
+    );
+  };
+
+  const handleCloneMarketChange = (nextMarket: string) => {
+    const normalizedMarket = normalizeMarket(nextMarket);
+    setMarket(normalizedMarket);
+    setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket));
+  };
+
+  const handleDetailPlatformChange = (nextPlatform: string) => {
+    const normalizedPlatform = normalizePlatform(nextPlatform);
+    setDetailPlatform(normalizedPlatform);
+    setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket));
+  };
+
+  const handleDetailMarketChange = (nextMarket: string) => {
+    const normalizedMarket = normalizeMarket(nextMarket);
+    setDetailMarket(normalizedMarket);
+    setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket));
+  };
+
+  const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({
+    id,
+    name,
+    savedAt: new Date().toISOString(),
+    output: cloneOutput,
+    platform,
+    market,
+    language,
+    ratio,
+    setCounts: { ...cloneSetCounts },
+    detailModules: [...selectedCloneDetailModules],
+    modelPanelTab: cloneModelPanelTab,
+    modelScenes: [...selectedCloneModelScenes],
+    modelCustomScene: cloneModelCustomScene,
+    modelGender: cloneModelGender,
+    modelAge: cloneModelAge,
+    modelEthnicity: cloneModelEthnicity,
+    modelBody: cloneModelBody,
+    modelAppearance: cloneModelAppearance,
+    videoQuality: cloneVideoQuality,
+    videoDurationSeconds: cloneVideoDuration,
+    videoSmart: cloneVideoSmart,
+    referenceMode: cloneReferenceMode,
+    replicateLevel: cloneReplicateLevel,
+    requirement,
+  });
+
+  const persistLatestCloneSetting = () => {
+    const snapshot = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
+    latestCloneSettingRef.current = snapshot;
+    writeCloneLatestSetting(snapshot);
+    return snapshot;
+  };
+
+  const applyCloneSavedSetting = (setting: CloneSavedSetting) => {
+    const nextCounts = {
+      selling: Number.isFinite(setting.setCounts?.selling) ? setting.setCounts.selling : defaultCloneSetCounts.selling,
+      white: Number.isFinite(setting.setCounts?.white) ? setting.setCounts.white : defaultCloneSetCounts.white,
+      scene: Number.isFinite(setting.setCounts?.scene) ? setting.setCounts.scene : defaultCloneSetCounts.scene,
+    };
+    const nextPlatform = normalizePlatform(setting.platform);
+    const nextMarket = normalizeMarket(setting.market);
+    const nextOutput = cloneOutputOptions.some((option) => option.key === setting.output) ? setting.output : "detail";
+    setCloneOutput(nextOutput);
+    setPlatform(nextPlatform);
+    setMarket(nextMarket);
+    setLanguage(normalizeLanguageForPlatform(nextPlatform, nextMarket, setting.language));
+    setRatio(normalizeRatioForPlatform(nextPlatform, setting.ratio, nextOutput));
+    setCloneSetCounts(nextCounts);
+    setSelectedCloneDetailModules(setting.detailModules?.length ? setting.detailModules : defaultCloneDetailModuleIds);
+    setCloneModelPanelTab(setting.modelPanelTab === "model" ? "model" : "scene");
+    setSelectedCloneModelScenes(normalizeCloneModelSceneSelection(setting.modelScenes));
+    setCloneModelCustomScene(setting.modelCustomScene ?? "");
+    setCloneModelGender(tryOnModelOptions.gender.includes(setting.modelGender) ? setting.modelGender : tryOnModelOptions.gender[0]);
+    setCloneModelAge(tryOnModelOptions.age.includes(setting.modelAge) ? setting.modelAge : tryOnModelOptions.age[0]);
+    setCloneModelEthnicity(
+      tryOnModelOptions.ethnicity.includes(setting.modelEthnicity) ? setting.modelEthnicity : tryOnModelOptions.ethnicity[0],
+    );
+    setCloneModelBody(tryOnModelOptions.body.includes(setting.modelBody) ? setting.modelBody : tryOnModelOptions.body[0]);
+    setCloneModelAppearance(setting.modelAppearance ?? "");
+    setCloneVideoQuality(
+      cloneVideoQualityOptions.some((option) => option.key === setting.videoQuality) ? setting.videoQuality : "high",
+    );
+    setCloneVideoDuration(clampCloneVideoDuration(setting.videoDurationSeconds));
+    setCloneVideoSmart(Boolean(setting.videoSmart));
+    setCloneReferenceMode(setting.referenceMode === "link" ? "link" : "upload");
+    setCloneReplicateLevel(setting.replicateLevel === "style" ? "style" : "high");
+    setRequirement((setting.requirement ?? "").slice(0, 500));
+    setCloneSettingName(setting.name);
+    latestCloneSettingRef.current = setting;
+    writeCloneLatestSetting(setting);
+  };
+
+  useEffect(() => {
+    latestCloneSettingRef.current = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
+  });
+
+  useEffect(() => {
+    const latestSetting = readCloneLatestSetting();
+    if (!latestSetting) return;
+    skipNextCloneAutoSaveRef.current = true;
+    applyCloneSavedSetting(latestSetting);
+  }, []);
+
+  useEffect(() => {
+    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, productSetOutput));
+  }, [productSetOutput, productSetPlatform]);
+
+  useEffect(() => {
+    setRatio((current) => {
+      const platformRatios = getPlatformRatioOptions(platform, cloneOutput);
+      const availableRatios = hotUploadedRatioOption ? getUniqueRatioOptions([...platformRatios, hotUploadedRatioOption]) : platformRatios;
+      if (current.startsWith("上传图片") && hotUploadedRatioOption) return hotUploadedRatioOption;
+      if (availableRatios.includes(current)) return current;
+      const normalizedRatio = normalizeRatioToken(current);
+      const matchedRatio = availableRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
+      return matchedRatio ?? getPlatformDefaultRatio(platform, cloneOutput);
+    });
+  }, [cloneOutput, hotUploadedRatioOption, platform]);
+
+  useEffect(() => {
+    if (skipInitialCloneAutoSaveRef.current) {
+      skipInitialCloneAutoSaveRef.current = false;
+      return undefined;
+    }
+    if (skipNextCloneAutoSaveRef.current) {
+      skipNextCloneAutoSaveRef.current = false;
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      persistLatestCloneSetting();
+    }, 300);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [
+    activeTool,
+    cloneOutput,
+    platform,
+    market,
+    language,
+    ratio,
+    cloneSetCounts,
+    selectedCloneDetailModules,
+    cloneModelPanelTab,
+    selectedCloneModelScenes,
+    cloneModelCustomScene,
+    cloneModelGender,
+    cloneModelAge,
+    cloneModelEthnicity,
+    cloneModelBody,
+    cloneModelAppearance,
+    cloneVideoQuality,
+    cloneVideoDuration,
+    cloneVideoSmart,
+    cloneReferenceMode,
+    cloneReplicateLevel,
+    requirement,
+    cloneSettingName,
+  ]);
+
+  useEffect(() => {
+    const persistSnapshot = () => {
+      if (latestCloneSettingRef.current) writeCloneLatestSetting(latestCloneSettingRef.current);
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") persistSnapshot();
+    };
+
+    window.addEventListener("pagehide", persistSnapshot);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      persistSnapshot();
+      window.removeEventListener("pagehide", persistSnapshot);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+
+  useEffect(() => clearCloneSetCountHold, []);
+
+  useEffect(() => {
+    if (!openCloneBasicSelect) return undefined;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element) || target.closest("[data-clone-basic-select]")) return;
+      setOpenCloneBasicSelect(null);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpenCloneBasicSelect(null);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [openCloneBasicSelect]);
+
+  useEffect(() => {
+    if (!openCloneModelSelect) return undefined;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element) || target.closest("[data-clone-model-select]")) return;
+      setOpenCloneModelSelect(null);
+      setCloneModelSelectDropUp(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpenCloneModelSelect(null);
+        setCloneModelSelectDropUp(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [openCloneModelSelect]);
+
+  const handleGarmentUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    const uploadedFiles = Array.from(files);
+    setGarmentImages((current) => [...current, ...createObjectImageItems(uploadedFiles, 5 - current.length, "garment")].slice(0, 5));
+    setTryOnStatus("ready");
+    event.target.value = "";
+  };
+
+  const handleDetailUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    const uploadedFiles = Array.from(files);
+    setDetailProductImages((current) => [...current, ...createObjectImageItems(uploadedFiles, 3 - current.length, "detail")].slice(0, 3));
+    setDetailStatus("ready");
+    event.target.value = "";
+  };
+
+  const buildAdVideoConfig = (): AdVideoUserConfig => ({
+    platform,
+    aspectRatio: ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : "1:1",
+    durationSeconds: cloneVideoDuration,
+    style: "痛点解决",
+    language,
+    market,
+    needVoiceover: true,
+    needSubtitle: true,
+    conversionFocus: "conversion",
+  });
+
+  const uploadProductImages = async (): Promise<string[]> => {
+    const urls: string[] = [];
+    for (const item of productImages) {
+      try {
+        const resp = await fetch(item.src);
+        const blob = await resp.blob();
+        const dataUrl = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(String(reader.result));
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(blob);
+        });
+        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
+        urls.push(url);
+      } catch {
+        // skip images that fail to upload
+      }
+    }
+    return urls;
+  };
+
+  const adVideoUploadedUrlsRef = useRef<string[]>([]);
+
+  const handleAdVideoPlan = async () => {
+    if (productImages.length === 0 && !requirement.trim()) {
+      setAdVideoError("请先上传产品图片或填写商品说明");
+      return;
+    }
+    setAdVideoBusy(true);
+    setAdVideoError(null);
+    setAdVideoStep("planning");
+    try {
+      setAdVideoProgress("正在上传产品图片…");
+      const imageUrls = await uploadProductImages();
+      adVideoUploadedUrlsRef.current = imageUrls;
+
+      setAdVideoProgress("正在分析产品图片…");
+      const imageDesc = await analyzeProductImages(imageUrls);
+
+      setAdVideoProgress("正在生成商品理解…");
+      const summary = await buildProductSummary(imageDesc, requirement);
+      setAdVideoSummary(summary);
+
+      setAdVideoProgress("正在提炼卖点…");
+      const selling = await extractSellingPoints(summary);
+      setAdVideoSelling(selling);
+
+      const config = buildAdVideoConfig();
+      setAdVideoProgress("正在生成广告创意…");
+      const creatives = await generateCreativeOptions(selling, config);
+      setAdVideoCreatives(creatives);
+      const chosen = creatives[0];
+      if (!chosen) throw new Error("未能生成有效的广告创意");
+
+      setAdVideoProgress("正在生成视频分镜…");
+      const storyboard = await generateStoryboard(chosen, summary, config);
+      setAdVideoStoryboard(storyboard);
+
+      setAdVideoProgress("正在生成镜头提示词…");
+      const prompts = await generateVideoPrompts(storyboard, summary);
+      setAdVideoPrompts(prompts);
+
+      setAdVideoProgress("正在进行合规检查…");
+      const compliance = await checkCompliance(summary, selling, storyboard);
+      setAdVideoCompliance(compliance);
+
+      setAdVideoStep("planned");
+    } catch (err) {
+      setAdVideoError(err instanceof Error ? err.message : "广告策划生成失败");
+      setAdVideoStep("idle");
+    } finally {
+      setAdVideoBusy(false);
+      setAdVideoProgress("");
+    }
+  };
+
+  const pollAdVideoTask = async (sceneId: number, taskId: string) => {
+    for (let i = 0; i < 150; i++) {
+      await new Promise((r) => setTimeout(r, 4000));
+      let st;
+      try {
+        st = await aiGenerationClient.getTaskStatus(taskId);
+      } catch {
+        continue;
+      }
+      setAdVideoScenes((prev) =>
+        prev.map((s) =>
+          s.sceneId === sceneId
+            ? { ...s, status: st.status === "cancelled" ? "failed" : st.status, progress: st.progress, resultUrl: st.resultUrl }
+            : s,
+        ),
+      );
+      if (st.status === "completed" || st.status === "failed" || st.status === "cancelled") return;
+    }
+  };
+
+  const handleAdVideoRender = async () => {
+    if (!adVideoStoryboard) return;
+    setAdVideoStep("rendering");
+    setAdVideoError(null);
+    const referenceUrl = adVideoUploadedUrlsRef.current[0];
+    setAdVideoScenes(
+      adVideoStoryboard.scenes.map((s) => ({ sceneId: s.scene_id, status: "idle", progress: 0 })),
+    );
+    for (const scene of adVideoStoryboard.scenes) {
+      const prompt = adVideoPrompts.find((p) => p.scene_id === scene.scene_id);
+      const positivePrompt = prompt?.positive_prompt || scene.visual_description;
+      const sceneDuration = Number.parseInt(scene.duration, 10) || 5;
+      try {
+        const { taskId } = await aiGenerationClient.createVideoTask({
+          model: "happyhorse-1.0-i2v",
+          prompt: positivePrompt,
+          ratio: buildAdVideoConfig().aspectRatio,
+          duration: sceneDuration,
+          imageUrl: referenceUrl,
+          referenceUrls: referenceUrl ? [referenceUrl] : undefined,
+        });
+        setAdVideoScenes((prev) =>
+          prev.map((s) => (s.sceneId === scene.scene_id ? { ...s, taskId, status: "pending" } : s)),
+        );
+        void pollAdVideoTask(scene.scene_id, taskId);
+      } catch (err) {
+        setAdVideoScenes((prev) =>
+          prev.map((s) =>
+            s.sceneId === scene.scene_id
+              ? { ...s, status: "failed", error: err instanceof Error ? err.message : "提交失败" }
+              : s,
+          ),
+        );
+      }
+    }
+  };
+
+  const renderAdVideoCompliance = () => {
+    if (!adVideoCompliance) return null;
+    const level = adVideoCompliance.risk_level;
+    const canRender = adVideoCompliance.allow_video_generation;
+    const rendering = adVideoStep === "rendering";
+    return (
+      <div className="clone-ai-adwizard__block">
+        <span className={`clone-ai-adwizard__risk is-${level}`}>
+          合规风险：{level === "low" ? "低" : level === "medium" ? "中" : "高"}
+        </span>
+        {adVideoCompliance.issues.length > 0 ? (
+          <ul className="clone-ai-adwizard__issues">
+            {adVideoCompliance.issues.map((issue, i) => (
+              <li key={i}>{issue.field}：{issue.problem} → {issue.suggestion}</li>
+            ))}
+          </ul>
+        ) : null}
+        <button
+          type="button"
+          className="clone-ai-adwizard__render"
+          disabled={!canRender || rendering}
+          onClick={handleAdVideoRender}
+        >
+          {rendering ? "正在出视频…" : canRender ? "✦ 确认并逐镜头出视频" : "存在高风险，无法生成"}
+        </button>
+      </div>
+    );
+  };
+
+  const renderAdVideoPlan = () => {
+    if (adVideoStep !== "planned" && adVideoStep !== "rendering") return null;
+    return (
+      <div className="clone-ai-adwizard__plan-result">
+        {adVideoSummary ? (
+          <div className="clone-ai-adwizard__block">
+            <strong>{adVideoSummary.product_name} · {adVideoSummary.category}</strong>
+            <p>{adVideoSummary.appearance}</p>
+            <div className="clone-ai-adwizard__chips">
+              {adVideoSummary.selling_points.map((sp, i) => (
+                <span key={i}>{sp}</span>
+              ))}
+            </div>
+          </div>
+        ) : null}
+        {adVideoCreatives[0] ? (
+          <div className="clone-ai-adwizard__block">
+            <span className="clone-ai-adwizard__label">广告创意：{adVideoCreatives[0].creative_type}</span>
+            <p>{adVideoCreatives[0].hook}</p>
+          </div>
+        ) : null}
+        {adVideoStoryboard ? (
+          <div className="clone-ai-adwizard__block">
+            <span className="clone-ai-adwizard__label">分镜：{adVideoStoryboard.video_title}</span>
+            <div className="clone-ai-adwizard__scenes">
+              {adVideoStoryboard.scenes.map((scene) => {
+                const sceneVideo = adVideoScenes.find((s) => s.sceneId === scene.scene_id);
+                return (
+                  <div key={scene.scene_id} className="clone-ai-adwizard__scene">
+                    <div className="clone-ai-adwizard__scene-head">
+                      <span>镜头 {scene.scene_id} · {scene.duration}</span>
+                      {sceneVideo ? (
+                        <span className={`clone-ai-adwizard__scene-status is-${sceneVideo.status}`}>
+                          {sceneVideo.status === "completed"
+                            ? "完成"
+                            : sceneVideo.status === "failed"
+                              ? "失败"
+                              : sceneVideo.status === "idle"
+                                ? "等待"
+                                : `${sceneVideo.progress}%`}
+                        </span>
+                      ) : null}
+                    </div>
+                    <p>{scene.visual_description}</p>
+                    {sceneVideo?.resultUrl ? (
+                      <video src={sceneVideo.resultUrl} controls className="clone-ai-adwizard__scene-video" />
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+        {renderAdVideoCompliance()}
+      </div>
+    );
+  };
+
+  const handleGenerate = () => {
+    if (!canGenerate) return;
+    setStatus("generating");
+    window.setTimeout(() => {
+      const stamp = Date.now();
+      setResults(
+        sampleResults.map((src, index) => ({
+          id: `clone-result-${stamp}-${index}`,
+          src,
+          label: index === 0 ? "高度复刻" : index === 1 ? "参考风格" : "平台适配",
+        })),
+      );
+      setStatus("done");
+    }, 900);
+  };
+
+  const handleGenerateModel = () => {
+    setTryOnStatus("modeling");
+    window.setTimeout(() => setTryOnStatus("ready"), 700);
+  };
+
+  const handleTryOnGenerate = () => {
+    if (!canGenerateTryOn) return;
+    setTryOnStatus("generating");
+    window.setTimeout(() => {
+      setTryOnResultImages([tryOnAssets.tryA, tryOnAssets.tryB, tryOnAssets.hatResultA]);
+      setTryOnStatus("done");
+    }, 900);
+  };
+
+  const toggleScene = (scene: string) => {
+    setSelectedScenes((current) =>
+      current.includes(scene) ? current.filter((item) => item !== scene) : [...current, scene],
+    );
+  };
+
+  const toggleDetailModule = (moduleId: string) => {
+    setSelectedDetailModules((current) =>
+      current.includes(moduleId) ? current.filter((item) => item !== moduleId) : [...current, moduleId],
+    );
+  };
+
+  const handleSetGenerate = () => {
+    if (!canGenerateSet) return;
+    setProductSetStatus("generating");
+    window.setTimeout(() => setProductSetStatus("done"), 900);
+  };
+
+  const openProductSetPreview = (card: { src: string; label: string }) => {
+    setSelectedProductSetPreview(card);
+  };
+
+  const handleDetailAiWrite = () => {
+    setDetailRequirement(
+      "1.产品名称：无线降噪蓝牙耳机\n2.核心卖点：主动降噪、24H续航、低延迟连接、舒适佩戴\n3.适用人群：通勤、办公、运动和旅行用户\n4.期望场景：地铁通勤、居家办公、户外运动\n5.具体参数：蓝牙5.3、IPX4防水、快充10分钟使用2小时",
+    );
+  };
+
+  const handleDetailGenerate = () => {
+    if (!canGenerateDetail) return;
+    setDetailStatus("generating");
+    window.setTimeout(() => setDetailStatus("done"), 900);
+  };
+
+  const resetTask = () => {
+    setSetImages([]);
+    setProductSetRequirement("");
+    setProductSetOutput("video");
+    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, "video"));
+    setProductSetStatus("idle");
+    setIsSetUploadDragging(false);
+    setSelectedProductSetPreview(null);
+    setShowHostingModal(false);
+    setProductImages([]);
+    setIsProductUploadDragging(false);
+    setCloneOutput("detail");
+    setRatio((current) => normalizeRatioForPlatform(platform, current, "detail"));
+    setCloneSetCounts(defaultCloneSetCounts);
+    setSelectedCloneDetailModules(defaultCloneDetailModuleIds);
+    setCloneModelPanelTab("scene");
+    setSelectedCloneModelScenes([]);
+    setCloneModelCustomScene("");
+    setCloneModelGender(tryOnModelOptions.gender[0]);
+    setCloneModelAge(tryOnModelOptions.age[0]);
+    setCloneModelEthnicity(tryOnModelOptions.ethnicity[0]);
+    setCloneModelBody(tryOnModelOptions.body[0]);
+    setCloneModelAppearance("");
+    setCloneVideoQuality("high");
+    setCloneVideoDuration(10);
+    setCloneVideoSmart(true);
+    setCloneReferenceMode("upload");
+    setCloneReferenceImages([]);
+    setCloneReplicateLevel("high");
+    setRequirement("");
+    setCloneSettingName("新建创作");
+    setResults([]);
+    setStatus("idle");
+    setGarmentImages([]);
+    setAppearance("");
+    setSelectedScenes([]);
+    setCustomScene("");
+    setSmartScene(false);
+    setTryOnRatio(tryOnRatioOptions[0]);
+    setTryOnStatus("idle");
+    setTryOnResultImages([]);
+    setDetailProductImages([]);
+    setDetailRequirement("");
+    setSelectedDetailModules(defaultDetailModuleIds);
+    setDetailStatus("idle");
+  };
+
+  const activeToolMeta = sideTools.find((tool) => tool.key === activeTool);
+  const isSetTool = activeTool === "set";
+  const isDetail = activeTool === "detail";
+  const isTryOn = activeTool === "wear";
+  const isCloneTool = activeTool === "clone";
+  const pageLabel = isSetTool ? "商品套图" : isDetail ? "A+/详情页" : isTryOn ? "AI服饰穿戴" : activeToolMeta?.label || "商品工具";
+  const setPrimaryLabel =
+    setImages.length === 0
+      ? `请先上传商品原图`
+      : productSetStatus === "generating"
+        ? "生成中..."
+        : `生成${selectedProductSetOutput.label}`;
+  const tryOnPrimaryLabel =
+    garmentImages.length === 0 ? "请先上传服装图片" : tryOnStatus === "generating" ? "生成中..." : "生成服饰穿戴图";
+  const detailPrimaryLabel =
+    detailProductImages.length === 0 ? "请上传产品图" : detailStatus === "generating" ? "生成中..." : "生成A+详情页";
+  const clonePrimaryLabel =
+    productImages.length === 0 ? "请先上传商品原图" : status === "generating" ? "生成中..." : `生成${selectedCloneOutput.label}`;
+  const clonePreviewCards = productSetPreviewCards.map((card, index) => ({
+    ...card,
+    src: results[index]?.src ?? card.src,
+  }));
+  const cloneBasicSelects: Array<{
+    key: CloneBasicSelectKey;
+    label: string;
+    value: string;
+    options: string[];
+    onChange: (value: string) => void;
+  }> = [
+    { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange },
+    { key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
+    { key: "language", label: "语言", value: language, options: cloneLanguageOptions, onChange: setLanguage },
+    { key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio },
+  ];
+
+  const cloneModelSelects: Array<{
+    key: CloneModelSelectKey;
+    label: string;
+    value: string;
+    options: string[];
+    onChange: (value: string) => void;
+  }> = [
+    { key: "gender", label: "性别", value: cloneModelGender, options: tryOnModelOptions.gender, onChange: setCloneModelGender },
+    { key: "age", label: "年龄", value: cloneModelAge, options: tryOnModelOptions.age, onChange: setCloneModelAge },
+    {
+      key: "ethnicity",
+      label: "人种",
+      value: cloneModelEthnicity,
+      options: tryOnModelOptions.ethnicity,
+      onChange: setCloneModelEthnicity,
+    },
+    { key: "body", label: "体型", value: cloneModelBody, options: tryOnModelOptions.body, onChange: setCloneModelBody },
+  ];
+
+  const setPanel = (
+    <>
+      <div className="product-clone-panel__scroll">
+        <section className="product-clone-field product-set-upload-section">
+          <h2>
+            上传商品原图
+            <CloudUploadOutlined />
+          </h2>
+          <button
+            type="button"
+            className={`product-clone-upload-zone product-set-upload${isSetUploadDragging ? " is-dragging" : ""}`}
+            onClick={() => setInputRef.current?.click()}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsSetUploadDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={() => setIsSetUploadDragging(false)}
+            onDrop={handleSetDrop}
+          >
+            <span className="product-set-upload-icon">
+              <FileImageOutlined />
+            </span>
+            <span className="product-set-upload-title">拖拽或点击上传</span>
+            <strong>
+              <span aria-hidden="true">+</span>
+              上传图片
+            </strong>
+            <span className="product-set-upload-note">同一产品，最多 3 张</span>
+          </button>
+          <input ref={setInputRef} type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={handleSetUpload} />
+          {setImages.length ? (
+            <div className="product-clone-thumb-row product-set-thumb-row" aria-label="已上传商品原图">
+              {setImages.map((item) => (
+                <figure key={item.id} className="product-set-thumb">
+                  <img src={item.src} alt={item.name} />
+                  <span className="uploaded-image-zoom" aria-hidden="true">
+                    <img src={item.src} alt="" />
+                  </span>
+                  <button type="button" onClick={() => removeSetImage(item.id)} aria-label={`删除${item.name}`}>
+                    <CloseOutlined />
+                  </button>
+                </figure>
+              ))}
+            </div>
+          ) : null}
+        </section>
+
+        <section className="product-clone-field product-set-settings-section">
+          <h2>
+            生成设置
+            <SettingOutlined />
+          </h2>
+          <div className="product-set-setting-block">
+            <span className="product-set-setting-title">生成内容</span>
+            <div className="product-set-output-grid" role="radiogroup" aria-label="生成内容">
+              {productSetOutputOptions.map((option) => (
+                <button
+                  key={option.key}
+                  type="button"
+                  className={productSetOutput === option.key ? "is-active" : ""}
+                  aria-pressed={productSetOutput === option.key}
+                  onClick={() => handleProductSetOutputChange(option.key)}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="product-set-setting-block">
+            <span className="product-set-setting-title">基础设置</span>
+            <div className="product-set-field-grid">
+              <label>
+                <span>平台</span>
+                <select value={productSetPlatform} onChange={(event) => handleProductSetPlatformChange(event.target.value)}>
+                  {platformOptions.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                <span>国家</span>
+                <select value={productSetMarket} onChange={(event) => handleProductSetMarketChange(event.target.value)}>
+                  {marketOptions.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                <span>语言</span>
+                <select value={productSetLanguage} onChange={(event) => setProductSetLanguage(event.target.value)}>
+                  {productSetLanguageOptions.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                <span>尺寸/比例</span>
+                <select
+                  value={productSetRatio}
+                  onChange={(event) => setProductSetRatio(event.target.value)}
+                  disabled={productSetRatioOptions.length <= 1}
+                >
+                  {productSetRatioOptions.map((item) => (
+                    <option key={item} value={item}>{formatRatioDisplayValue(item)}</option>
+                  ))}
+                </select>
+              </label>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+
+  const clonePanel = (
+    <>
+      <div className="product-clone-panel__scroll clone-ai-panel">
+        <header className="clone-ai-logo">
+          <span className="clone-ai-logo__mark">AI</span>
+          <strong>电商生成</strong>
+        </header>
+
+        <section className="clone-ai-card">
+          <h2>
+            <CloudUploadOutlined />
+            上传商品原图
+          </h2>
+          <div
+            role="button"
+            tabIndex={0}
+            className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}`}
+            onClick={() => productInputRef.current?.click()}
+            onKeyDown={(event) => {
+              if (event.target !== event.currentTarget) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                productInputRef.current?.click();
+              }
+            }}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              setIsProductUploadDragging(true);
+            }}
+            onDragOver={(event) => event.preventDefault()}
+            onDragLeave={() => setIsProductUploadDragging(false)}
+            onDrop={handleProductDrop}
+          >
+            <div className="clone-ai-upload-main">
+              <span className="clone-ai-upload-icon">
+                <FileImageOutlined />
+              </span>
+              <span className="clone-ai-upload-title">拖拽或点击上传</span>
+              <strong>
+                <span aria-hidden="true">+</span>
+                上传图片
+              </strong>
+              <span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
+            </div>
+            {productImages.length ? (
+              <div className="clone-ai-uploaded-files" aria-label="已上传商品原图">
+                {productImages.map((item) => (
+                  <figure key={item.id} className="clone-ai-uploaded-file">
+                    <img src={item.src} alt={item.name} />
+                    <span className="uploaded-image-zoom" aria-hidden="true">
+                      <img src={item.src} alt="" />
+                    </span>
+                    <button
+                      type="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        removeProductImage(item.id);
+                      }}
+                      aria-label={`删除${item.name}`}
+                    >
+                      <CloseOutlined />
+                    </button>
+                  </figure>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <input ref={productInputRef} type="file" accept="image/*" multiple onChange={handleProductUpload} />
+        </section>
+
+        <section className="clone-ai-card">
+          <h2>
+            <SettingOutlined />
+            生成设置
+          </h2>
+          <div className="clone-ai-settings-section">
+            <span className="clone-ai-settings-label">生成内容</span>
+            <div className="clone-ai-tag-group" role="radiogroup" aria-label="生成内容">
+              {cloneOutputOptions.map((option) => (
+                <button
+                  key={option.key}
+                  type="button"
+                  className={cloneOutput === option.key ? "is-active" : ""}
+                  aria-pressed={cloneOutput === option.key}
+                  onClick={() => handleCloneOutputChange(option.key)}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="clone-ai-settings-section">
+            <span className="clone-ai-settings-label">基础设置</span>
+            <div className="clone-ai-select-group">
+              {cloneBasicSelects.map((item) => {
+                const hasMultipleOptions = item.options.length > 1;
+                const isOpen = hasMultipleOptions && openCloneBasicSelect === item.key;
+                return (
+                  <div key={item.key} className="clone-ai-basic-select" data-clone-basic-select>
+                    <button
+                      type="button"
+                      className={`${isOpen ? "is-open" : ""}${hasMultipleOptions ? "" : " is-static"}`}
+                      aria-expanded={hasMultipleOptions ? isOpen : undefined}
+                      aria-haspopup={hasMultipleOptions ? "listbox" : undefined}
+                      aria-controls={hasMultipleOptions ? `clone-basic-select-${item.key}` : undefined}
+                      onClick={() => setOpenCloneBasicSelect(hasMultipleOptions ? (isOpen ? null : item.key) : null)}
+                    >
+                      <span>{item.label}</span>
+                      <strong>{item.key === "ratio" ? formatRatioDisplayValue(item.value) : item.value}</strong>
+                      {hasMultipleOptions ? <i aria-hidden="true" /> : null}
+                    </button>
+                    {hasMultipleOptions && isOpen ? (
+                      <div id={`clone-basic-select-${item.key}`} className="clone-ai-basic-select__menu" role="listbox">
+                        {item.options.map((option) => (
+                          <button
+                            key={option}
+                            type="button"
+                            className={item.value === option ? "is-active" : ""}
+                            role="option"
+                            aria-selected={item.value === option}
+                            onClick={() => {
+                              item.onChange(option);
+                              setOpenCloneBasicSelect(null);
+                            }}
+                          >
+                            {item.key === "ratio" ? formatRatioDisplayValue(option) : option}
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {cloneOutput === "hot" ? (
+          <section className="clone-ai-replicate-panel" aria-label="爆款图复刻设置">
+            <div className="clone-ai-replicate-section">
+              <span className="clone-ai-replicate-title">参考内容</span>
+              <div className="clone-ai-replicate-tabs" role="tablist" aria-label="参考内容来源">
+                <button
+                  type="button"
+                  className={cloneReferenceMode === "upload" ? "is-active" : ""}
+                  aria-selected={cloneReferenceMode === "upload"}
+                  onClick={() => setCloneReferenceMode("upload")}
+                >
+                  上传参考图
+                </button>
+                <button
+                  type="button"
+                  className={cloneReferenceMode === "link" ? "is-active" : ""}
+                  aria-selected={cloneReferenceMode === "link"}
+                  onClick={() => setCloneReferenceMode("link")}
+                >
+                  导入链接
+                </button>
+              </div>
+              {cloneReferenceMode === "upload" ? (
+                <button type="button" className="clone-ai-replicate-upload" onClick={() => cloneReferenceInputRef.current?.click()}>
+                  <span>
+                    <CloudUploadOutlined />
+                    <span className="clone-ai-replicate-upload-text">添加图片</span>
+                  </span>
+                  <em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
+                  {cloneReferenceImages.length ? (
+                    <div className="clone-ai-replicate-preview" aria-hidden="true">
+                      {cloneReferenceImages.slice(0, 4).map((item) => (
+                        <figure key={item.id}>
+                          <img src={item.src} alt="" />
+                          <span className="uploaded-image-zoom">
+                            <img src={item.src} alt="" />
+                          </span>
+                        </figure>
+                      ))}
+                      {cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
+                    </div>
+                  ) : null}
+                </button>
+              ) : (
+                <label className="clone-ai-replicate-link">
+                  <input placeholder="粘贴商品图或详情页链接" />
+                </label>
+              )}
+              <input
+                ref={cloneReferenceInputRef}
+                type="file"
+                accept="image/jpeg,image/png,image/webp"
+                multiple
+                onChange={handleCloneReferenceUpload}
+              />
+            </div>
+            <div className="clone-ai-replicate-section">
+              <span className="clone-ai-replicate-title">复刻程度</span>
+              <div className="clone-ai-replicate-levels" role="radiogroup" aria-label="复刻程度">
+                {cloneReplicateLevelOptions.map((option) => (
+                  <button
+                    key={option.key}
+                    type="button"
+                    className={cloneReplicateLevel === option.key ? "is-active" : ""}
+                    aria-pressed={cloneReplicateLevel === option.key}
+                    onClick={() => setCloneReplicateLevel(option.key)}
+                  >
+                    <strong>{option.title}</strong>
+                    <span>{option.desc}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </section>
+        ) : null}
+
+        {cloneOutput === "set" ? (
+          <section className="clone-ai-count-panel" aria-label="套图图片数量">
+            <p>可自由调整各类型图片数量，总数 1-16 张</p>
+            <div className="clone-ai-count-list">
+              {cloneSetCountOptions.map((item) => {
+                const count = cloneSetCounts[item.key];
+                const decrementDisabled = count <= 0 || cloneSetTotal <= minCloneSetTotal;
+                const incrementDisabled = cloneSetTotal >= maxCloneSetTotal;
+                return (
+                  <div key={item.key} className="clone-ai-count-row">
+                    <div className="clone-ai-count-copy">
+                      <strong>{item.title}</strong>
+                      <span>{item.desc}</span>
+                    </div>
+                    <div className="clone-ai-count-stepper" aria-label={`${item.title}数量`}>
+                      <button
+                        type="button"
+                        disabled={decrementDisabled}
+                        onPointerDown={(event) => {
+                          event.preventDefault();
+                          startCloneSetCountHold(item.key, -1, decrementDisabled);
+                        }}
+                        onPointerUp={clearCloneSetCountHold}
+                        onPointerLeave={clearCloneSetCountHold}
+                        onPointerCancel={clearCloneSetCountHold}
+                        onBlur={clearCloneSetCountHold}
+                        aria-label={`减少${item.title}`}
+                      >
+                        -
+                      </button>
+                      <b>{count}</b>
+                      <button
+                        type="button"
+                        disabled={incrementDisabled}
+                        onPointerDown={(event) => {
+                          event.preventDefault();
+                          startCloneSetCountHold(item.key, 1, incrementDisabled);
+                        }}
+                        onPointerUp={clearCloneSetCountHold}
+                        onPointerLeave={clearCloneSetCountHold}
+                        onPointerCancel={clearCloneSetCountHold}
+                        onBlur={clearCloneSetCountHold}
+                        aria-label={`增加${item.title}`}
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        ) : null}
+
+        {cloneOutput === "detail" ? (
+          <section className="clone-ai-module-panel" aria-label="详情图包含模块">
+            <p>
+              包含模块（多选）
+              <QuestionCircleOutlined />
+            </p>
+            <div className="clone-ai-module-list">
+              {cloneDetailModules.map((module) => {
+                const isSelected = selectedCloneDetailModules.includes(module.id);
+                return (
+                  <button
+                    key={module.id}
+                    type="button"
+                    className={isSelected ? "is-active" : ""}
+                    aria-pressed={isSelected}
+                    onClick={() => toggleCloneDetailModule(module.id)}
+                  >
+                    <strong>{module.title}</strong>
+                    <span>{module.desc}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+        ) : null}
+
+        {cloneOutput === "model" ? (
+          <section className="clone-ai-model-panel" aria-label="模特图设置">
+            <div className="clone-ai-model-tabs" role="tablist" aria-label="模特图设置类型">
+              <button
+                type="button"
+                className={cloneModelPanelTab === "scene" ? "is-active" : ""}
+                aria-selected={cloneModelPanelTab === "scene"}
+                onClick={() => setCloneModelPanelTab("scene")}
+              >
+                拍摄场景
+              </button>
+              <button
+                type="button"
+                className={cloneModelPanelTab === "model" ? "is-active" : ""}
+                aria-selected={cloneModelPanelTab === "model"}
+                onClick={() => setCloneModelPanelTab("model")}
+              >
+                模特形象
+              </button>
+            </div>
+            <div className="clone-ai-model-scroll">
+              {cloneModelPanelTab === "scene" ? (
+                <div className="clone-ai-model-scenes">
+                  <div className="clone-ai-model-scene-grid">
+                    {tryOnScenes.map((scene) => {
+                      const isSelected = selectedCloneModelScenes.includes(scene);
+                      return (
+                        <button
+                          key={scene}
+                          type="button"
+                          className={isSelected ? "is-active" : ""}
+                          aria-pressed={isSelected}
+                          onClick={() => toggleCloneModelScene(scene)}
+                        >
+                          <span aria-hidden="true" />
+                          {scene}
+                        </button>
+                      );
+                    })}
+                  </div>
+                  <label className="clone-ai-model-textarea">
+                    <strong>或自定义描述场景（可选）</strong>
+                    <textarea
+                      value={cloneModelCustomScene}
+                      onChange={(event) => setCloneModelCustomScene(event.target.value)}
+                      placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
+                    />
+                  </label>
+                </div>
+              ) : (
+                <div className="clone-ai-model-profile">
+                  <div className="clone-ai-model-select-grid">
+                    {cloneModelSelects.map((item) => {
+                      const isOpen = openCloneModelSelect === item.key;
+                      return (
+                        <div
+                          key={item.key}
+                          className={`clone-ai-model-select${isOpen ? " is-open" : ""}${
+                            isOpen && cloneModelSelectDropUp ? " is-drop-up" : ""
+                          }`}
+                          data-clone-model-select
+                        >
+                          <span>{item.label}</span>
+                          <button
+                            type="button"
+                            className={isOpen ? "is-open" : ""}
+                            aria-expanded={isOpen}
+                            aria-haspopup="listbox"
+                            aria-controls={`clone-model-select-${item.key}`}
+                            onClick={(event) => {
+                              setOpenCloneBasicSelect(null);
+                              if (!isOpen) {
+                                event.currentTarget.scrollIntoView({ block: "center", inline: "nearest" });
+                                const triggerRect = event.currentTarget.getBoundingClientRect();
+                                const scrollRect = event.currentTarget.closest(".clone-ai-model-scroll")?.getBoundingClientRect();
+                                const lowerBoundary = Math.min(window.innerHeight, scrollRect?.bottom ?? window.innerHeight);
+                                const upperBoundary = Math.max(0, scrollRect?.top ?? 0);
+                                const estimatedMenuHeight = Math.min(150, item.options.length * 36 + 12);
+                                const belowSpace = lowerBoundary - triggerRect.bottom;
+                                const aboveSpace = triggerRect.top - upperBoundary;
+                                setCloneModelSelectDropUp(belowSpace < estimatedMenuHeight && aboveSpace > belowSpace);
+                              } else {
+                                setCloneModelSelectDropUp(false);
+                              }
+                              setOpenCloneModelSelect(isOpen ? null : item.key);
+                            }}
+                          >
+                            <strong>{item.value}</strong>
+                            <i aria-hidden="true" />
+                          </button>
+                          {isOpen ? (
+                            <div id={`clone-model-select-${item.key}`} className="clone-ai-model-select__menu" role="listbox">
+                              {item.options.map((option) => (
+                                <button
+                                  key={option}
+                                  type="button"
+                                  className={item.value === option ? "is-active" : ""}
+                                  role="option"
+                                  aria-selected={item.value === option}
+                                  onClick={() => {
+                                    item.onChange(option);
+                                    setOpenCloneModelSelect(null);
+                                    setCloneModelSelectDropUp(false);
+                                  }}
+                                >
+                                  {option}
+                                </button>
+                              ))}
+                            </div>
+                          ) : null}
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <label className="clone-ai-model-textarea">
+                    <strong>外貌细节（可选）</strong>
+                    <textarea
+                      value={cloneModelAppearance}
+                      onChange={(event) => setCloneModelAppearance(event.target.value)}
+                      placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
+                    />
+                  </label>
+                </div>
+              )}
+            </div>
+          </section>
+        ) : null}
+
+        {cloneOutput === "video" ? (
+          <section className="clone-ai-video-panel" aria-label="短视频设置">
+            <div className="clone-ai-video-section">
+              <span className="clone-ai-video-title">视频画质</span>
+              <div className="clone-ai-video-options">
+                {cloneVideoQualityOptions.map((option) => (
+                  <button
+                    key={option.key}
+                    type="button"
+                    className={cloneVideoQuality === option.key ? "is-active" : ""}
+                    aria-pressed={cloneVideoQuality === option.key}
+                    onClick={() => setCloneVideoQuality(option.key)}
+                  >
+                    <strong>{option.label}</strong>
+                    <span>{option.desc}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="clone-ai-video-section">
+              <div className="clone-ai-video-title-row">
+                <span className="clone-ai-video-title">时间设置</span>
+                <strong>{cloneVideoDuration}秒</strong>
+              </div>
+              <div className="clone-ai-duration-control" style={cloneVideoDurationStyle}>
+                <input
+                  type="range"
+                  min={cloneVideoDurationMin}
+                  max={cloneVideoDurationMax}
+                  step={1}
+                  value={cloneVideoDuration}
+                  onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
+                  aria-label="短视频时长"
+                />
+                <div className="clone-ai-duration-scale" aria-hidden="true">
+                  <span>5秒</span>
+                  <span>10秒</span>
+                  <span>15秒</span>
+                </div>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`clone-ai-video-smart${cloneVideoSmart ? " is-on" : ""}`}
+              aria-pressed={cloneVideoSmart}
+              onClick={() => setCloneVideoSmart((current) => !current)}
+            >
+              <span>
+                <strong>智能选择</strong>
+                <em>根据平台、商品图和尺寸自动匹配推荐参数</em>
+              </span>
+              <i aria-hidden="true" />
+            </button>
+          </section>
+        ) : null}
+
+        <button type="button" className="clone-ai-generate" disabled={!canGenerate || cloneOutput === "video"} onClick={handleGenerate} style={cloneOutput === "video" ? { display: "none" } : undefined}>
+          {status === "generating" ? <LoadingOutlined /> : null}
+          {status === "generating" ? "生成中..." : "✦ 开始生成"}
+        </button>
+      </div>
+    </>
+  );
+
+  const detailPanel = (
+    <>
+      <div className="product-clone-panel__scroll">
+        <section className="product-clone-field">
+          <h2>
+            商品原图
+            <QuestionCircleOutlined />
+          </h2>
+          <button type="button" className="product-clone-upload-zone product-detail-upload" onClick={() => detailInputRef.current?.click()}>
+            <strong>
+              <CloudUploadOutlined />
+              上传图片
+            </strong>
+            <span>同一产品，最多3张。</span>
+          </button>
+          <input ref={detailInputRef} type="file" accept="image/*" multiple onChange={handleDetailUpload} />
+          {detailProductImages.length ? (
+            <div className="product-clone-thumb-row" aria-label="已上传商品原图">
+              {detailProductImages.map((item) => (
+                <figure key={item.id} className="product-clone-uploaded-thumb">
+                  <img src={item.src} alt={item.name} />
+                  <span className="uploaded-image-zoom" aria-hidden="true">
+                    <img src={item.src} alt="" />
+                  </span>
+                </figure>
+              ))}
+            </div>
+          ) : null}
+        </section>
+
+        <section className="product-clone-field">
+          <h2>生成设置</h2>
+          <div className="product-detail-settings-grid">
+            <select value={detailPlatform} onChange={(event) => handleDetailPlatformChange(event.target.value)}>
+              {platformOptions.map((item) => (
+                <option key={item}>{item}</option>
+              ))}
+            </select>
+            <select value={detailMarket} onChange={(event) => handleDetailMarketChange(event.target.value)}>
+              {marketOptions.map((item) => (
+                <option key={item}>{item}</option>
+              ))}
+            </select>
+            <select value={detailLanguage} onChange={(event) => setDetailLanguage(event.target.value)}>
+              {detailLanguageOptions.map((item) => (
+                <option key={item}>{item}</option>
+              ))}
+            </select>
+            <select value={detailType} onChange={(event) => setDetailType(event.target.value)}>
+              {detailTypeOptions.map((item) => (
+                <option key={item}>{item}</option>
+              ))}
+            </select>
+          </div>
+        </section>
+
+        <section className="product-clone-field product-detail-requirement">
+          <h2>
+            商品卖点&要求
+            <QuestionCircleOutlined />
+            <button
+              type="button"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleDetailAiWrite();
+              }}
+            >
+              AI 帮写
+            </button>
+          </h2>
+          <textarea
+            value={detailRequirement}
+            onChange={(event) => setDetailRequirement(event.target.value)}
+            placeholder={"建议包含以下信息生成更精准：\n1.产品名称\n2.核心卖点\n3.适用人群\n4.期望场景\n5.具体参数"}
+          />
+        </section>
+
+        <section className="product-clone-field">
+          <h2>
+            包含模块（多选）
+            <QuestionCircleOutlined />
+          </h2>
+          <div className="product-detail-module-grid">
+            {detailModules.map((module) => (
+              <button
+                key={module.id}
+                type="button"
+                className={selectedDetailModules.includes(module.id) ? "is-active" : ""}
+                onClick={() => toggleDetailModule(module.id)}
+              >
+                <strong>{module.title}</strong>
+                <span>{module.desc}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <footer className="product-clone-panel__footer">
+        <button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
+          {detailStatus === "generating" ? <LoadingOutlined /> : null}
+          {detailPrimaryLabel}
+        </button>
+      </footer>
+    </>
+  );
+
+  const tryOnPanel = (
+    <>
+      <div className="product-clone-panel__scroll">
+        <section className="product-clone-field">
+          <h2>服装图片</h2>
+          <button type="button" className="product-clone-upload-zone product-try-on-upload" onClick={() => garmentInputRef.current?.click()}>
+            <strong>
+              <CloudUploadOutlined />
+              服装图片
+            </strong>
+            <span>整套搭配或同一件服装不同角度图，最多5张。</span>
+          </button>
+          <input ref={garmentInputRef} type="file" accept="image/*" multiple onChange={handleGarmentUpload} />
+          {garmentImages.length ? (
+            <div className="product-clone-thumb-row product-try-on-thumb-row" aria-label="已上传服装图片">
+              {garmentImages.map((item) => (
+                <figure key={item.id} className="product-clone-uploaded-thumb">
+                  <img src={item.src} alt={item.name} />
+                  <span className="uploaded-image-zoom" aria-hidden="true">
+                    <img src={item.src} alt="" />
+                  </span>
+                </figure>
+              ))}
+            </div>
+          ) : null}
+        </section>
+
+        <section className="product-clone-field">
+          <h2>模特形象</h2>
+          <div className="product-clone-segment" role="tablist" aria-label="模特来源">
+            <button type="button" className={modelSource === "ai" ? "is-active" : ""} onClick={() => setModelSource("ai")}>
+              AI 生成
+            </button>
+            <button type="button" className={modelSource === "library" ? "is-active" : ""} onClick={() => setModelSource("library")}>
+              模特库
+              <QuestionCircleOutlined />
+            </button>
+          </div>
+          {modelSource === "ai" ? (
+            <>
+              <div className="product-clone-model-grid">
+                <select value={modelGender} onChange={(event) => setModelGender(event.target.value)}>
+                  {tryOnModelOptions.gender.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+                <select value={modelAge} onChange={(event) => setModelAge(event.target.value)}>
+                  {tryOnModelOptions.age.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+                <select value={modelEthnicity} onChange={(event) => setModelEthnicity(event.target.value)}>
+                  {tryOnModelOptions.ethnicity.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+                <select value={modelBody} onChange={(event) => setModelBody(event.target.value)}>
+                  {tryOnModelOptions.body.map((item) => (
+                    <option key={item}>{item}</option>
+                  ))}
+                </select>
+              </div>
+              <label className="product-try-on-textarea-label">
+                <span>外貌细节（可选）</span>
+                <textarea
+                  value={appearance}
+                  onChange={(event) => setAppearance(event.target.value)}
+                  placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
+                />
+              </label>
+              <button type="button" className="product-clone-model-button" onClick={handleGenerateModel} disabled={tryOnStatus === "modeling"}>
+                {tryOnStatus === "modeling" ? <LoadingOutlined /> : null}
+                {tryOnStatus === "modeling" ? "生成中..." : "生成基准模特"}
+              </button>
+            </>
+          ) : (
+            <div className="product-try-on-library" aria-label="模特库">
+              {[tryOnAssets.modelWoman, tryOnAssets.modelMan, tryOnAssets.modelAsian].map((src, index) => (
+                <button key={src} type="button" className={index === 0 ? "is-active" : ""}>
+                  <img src={src} alt={`模特 ${index + 1}`} />
+                </button>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section className="product-clone-field">
+          <h2>拍摄场景</h2>
+          <div className="product-clone-scene-grid">
+            {tryOnScenes.map((scene) => (
+              <button
+                key={scene}
+                type="button"
+                className={selectedScenes.includes(scene) ? "is-active" : ""}
+                onClick={() => toggleScene(scene)}
+              >
+                <span aria-hidden="true" />
+                {scene}
+              </button>
+            ))}
+          </div>
+        </section>
+
+        <label className="product-clone-field product-try-on-scene-field">
+          <h2>或自定义描述场景（可选）</h2>
+          <textarea
+            value={customScene}
+            onChange={(event) => setCustomScene(event.target.value)}
+            placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
+          />
+        </label>
+
+        <section className="product-clone-field">
+          <button type="button" className="product-clone-switch-row" onClick={() => setSmartScene((current) => !current)}>
+            <span>
+              <strong>智能推荐场景</strong>
+              <em>根据服装自动匹配最佳场景</em>
+            </span>
+            <span className={`product-clone-switch${smartScene ? " is-on" : ""}`} role="switch" aria-checked={smartScene}>
+              <span />
+            </span>
+          </button>
+        </section>
+
+        <section className="product-clone-field">
+          <h2>图片比例</h2>
+          <div className="product-clone-ratio-row">
+            {tryOnRatioOptions.map((item) => (
+              <button key={item} type="button" className={tryOnRatio === item ? "is-active" : ""} onClick={() => setTryOnRatio(item)}>
+                {item}
+              </button>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <footer className="product-clone-panel__footer">
+        <button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
+          {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
+          {tryOnPrimaryLabel}
+        </button>
+      </footer>
+    </>
+  );
+
+  const placeholderPanel = (
+    <>
+      <div className="product-clone-panel__scroll">
+        <section className="product-clone-empty-panel">
+          <span>{activeToolMeta?.icon}</span>
+          <h2>{activeToolMeta?.label}</h2>
+          <p>该工具页面正在接入，当前可使用电商AI作图、商品套图、A+详情与服饰穿戴。</p>
+        </section>
+      </div>
+      <footer className="product-clone-panel__footer">
+        <button type="button" className="product-clone-primary" disabled>
+          暂未开放
+        </button>
+      </footer>
+    </>
+  );
+
+  const setPreview = (
+    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览">
+      <div className="product-clone-preview__headline">
+        <h1>预览</h1>
+        <p>
+          上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率商品套图。
+        </p>
+      </div>
+
+      {productSetPreviewReady ? (
+        <section className="product-set-demo-board">
+          <button
+            type="button"
+            className="product-set-main-card"
+            onClick={() => openProductSetPreview(productSetPreviewCards[0])}
+          >
+            <img src={productSetPreviewCards[0].src} alt="01 主图" />
+            <span>{productSetPreviewCards[0].label}</span>
+          </button>
+          <div className="product-set-flow-arrow" aria-hidden="true" />
+          <div className="product-set-card-grid">
+            {productSetPreviewCards.slice(1).map((card) => (
+              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
+                <img src={card.src} alt={card.label} />
+                <span>{card.label}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      ) : (
+        <section className="product-set-empty-preview" aria-live="polite">
+          {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
+          <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
+          <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}</span>
+        </section>
+      )}
+
+      {productSetStatus === "done" ? <p className="product-set-generated-note">已生成{selectedProductSetOutput.label}预览</p> : null}
+
+      <section className="product-set-floating-detail" aria-label="信息详情">
+        <div className="product-set-floating-detail__head">
+          <strong>信息详情</strong>
+          <span>{productSetRequirement.length}/500</span>
+        </div>
+        <textarea
+          value={productSetRequirement}
+          onChange={(event) => setProductSetRequirement(event.target.value)}
+          maxLength={500}
+          placeholder="建议包含以下信息：产品名称、核心卖点、期望场景、具体参数"
+        />
+        <button type="button" className="product-set-floating-submit" disabled={!canGenerateSet} onClick={handleSetGenerate}>
+          {productSetStatus === "generating" ? <LoadingOutlined /> : null}
+          {setPrimaryLabel}
+        </button>
+      </section>
+
+      <button type="button" className="product-clone-help" aria-label="帮助">
+        <QuestionCircleOutlined />
+      </button>
+    </main>
+  );
+
+  const clonePreview = (
+    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
+      <header className="clone-ai-preview-header">
+        <strong>预览</strong>
+        <span>
+          上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
+        </span>
+      </header>
+
+      {status === "done" ? (
+        <section className="clone-ai-preview-showcase" aria-label="生成结果">
+          <button type="button" className="clone-ai-main-result" onClick={() => openProductSetPreview(clonePreviewCards[0])}>
+            <img src={productImages[0]?.src ?? clonePreviewCards[0].src} alt="上传商品原图" />
+            <span>原图素材</span>
+          </button>
+          <div className="clone-ai-flow-arrow" aria-hidden="true" />
+          <div className="clone-ai-result-grid">
+            {clonePreviewCards.map((card) => (
+              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
+                <img src={card.src} alt={card.label} />
+                <span>{card.label}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      ) : (
+        <section className="clone-ai-empty-state" aria-live="polite">
+          {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
+          <strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
+          <span>
+            {status === "generating"
+              ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
+              : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
+          </span>
+        </section>
+      )}
+
+      <section className="clone-ai-bottom-input" aria-label="信息详情">
+        <div className="clone-ai-input-wrapper">
+          <textarea
+            ref={requirementTextareaRef}
+            value={requirement}
+            onChange={(event) => {
+              const nextValue = event.target.value.slice(0, 500);
+              setRequirement(nextValue);
+              syncRequirementMentionQuery(nextValue, event.target.selectionStart);
+            }}
+            onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
+            onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") setRequirementImageMentionQuery(null);
+            }}
+            maxLength={500}
+            placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
+          />
+          {requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
+            <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
+          ) : null}
+          <button type="button" className="clone-ai-send-button" disabled={!canGenerate} onClick={handleGenerate} aria-label={clonePrimaryLabel}>
+            {status === "generating" ? <LoadingOutlined /> : "↑"}
+          </button>
+        </div>
+        <span className="clone-ai-char-count">{requirement.length}/500</span>
+      </section>
+    </main>
+  );
+
+  const detailPreview = (
+    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
+      <div className="product-clone-preview__headline">
+        <h1>A+/详情页</h1>
+        <p>
+          上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的专业详情页。
+        </p>
+      </div>
+
+      <section className="product-detail-demo-board">
+        <div className="product-detail-source-stack">
+          {(detailProductImages.length ? detailProductImages.map((item) => item.src) : detailProductSamples).map((src, index) => (
+            <figure key={`${src}-${index}`}>
+              <img src={src} alt={`商品原图 ${index + 1}`} />
+            </figure>
+          ))}
+          <span>上传产品图</span>
+        </div>
+        <div className="product-detail-flow-arrow" aria-hidden="true" />
+        <div className="product-detail-long-result">
+          <img src={detailAssets.longPage} alt="生成电商长图" />
+          <span>{detailStatus === "done" ? "已生成电商长图" : "生成电商长图"}</span>
+        </div>
+        <div className="product-detail-grid-result">
+          {detailGridSamples.map((src, index) => (
+            <img key={src} src={src} alt={`详情页模块 ${index + 1}`} />
+          ))}
+          <span>符合多电商平台规范</span>
+        </div>
+      </section>
+
+      <button type="button" className="product-clone-help" aria-label="帮助">
+        <QuestionCircleOutlined />
+      </button>
+    </main>
+  );
+
+  const tryOnPreview = (
+    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
+      <div className="product-clone-preview__headline">
+        <h1>AI服饰穿戴</h1>
+        <p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>
+      </div>
+
+      {tryOnResultImages.length ? (
+        <section className="product-try-on-generated" aria-label="生成结果">
+          {tryOnResultImages.map((src, index) => (
+            <figure key={src}>
+              <img src={src} alt={`生成结果 ${index + 1}`} />
+              <figcaption>{selectedScenes[index % Math.max(selectedScenes.length, 1)] || "智能场景"}</figcaption>
+            </figure>
+          ))}
+        </section>
+      ) : null}
+
+      <section className="product-try-on-demo-board">
+        {tryOnCards.map((card) => (
+          <article key={card.title} className={`product-try-on-card product-try-on-card--${card.tone}`}>
+            <h2>{card.title}</h2>
+            <div className="product-try-on-inputs">
+              {card.inputs.map((src, index) => (
+                <div className="product-try-on-input-group" key={`${card.title}-${src}`}>
+                  <img src={src} alt={`${card.title} 输入 ${index + 1}`} />
+                  {index < card.inputs.length - 1 ? <span className="product-try-on-plus">+</span> : null}
+                </div>
+              ))}
+            </div>
+            <div className="product-try-on-arrow" aria-hidden="true" />
+            <div className="product-try-on-results">
+              {card.results.map((src, index) => (
+                <img key={src} src={src} alt={`${card.title} 示例 ${index + 1}`} />
+              ))}
+            </div>
+          </article>
+        ))}
+      </section>
+
+      <button type="button" className="product-clone-help" aria-label="帮助">
+        <QuestionCircleOutlined />
+      </button>
+    </main>
+  );
+
+  const placeholderPreview = (
+    <main className="product-clone-preview product-clone-preview--placeholder" aria-label={`${pageLabel}预览`}>
+      <div className="product-clone-preview__headline">
+        <h1>{pageLabel}</h1>
+        <p>选择左侧已接入的工具开始生成商品视觉内容。</p>
+      </div>
+      <button type="button" className="product-clone-help" aria-label="帮助">
+        <QuestionCircleOutlined />
+      </button>
+    </main>
+  );
+
+  return (
+    <section
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}`}
+      data-tool={activeTool}
+      aria-label={pageLabel}
+    >
+      <div className="product-clone-shell">
+        <aside className="product-clone-rail" aria-label="商品工具">
+          {sideTools.map((tool) => (
+            <button key={tool.key} type="button" className={activeTool === tool.key ? "is-active" : ""} onClick={() => setActiveTool(tool.key)}>
+              {tool.icon}
+              <span>{tool.label}</span>
+            </button>
+          ))}
+        </aside>
+
+        <aside
+          id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
+          className="product-clone-panel"
+          aria-label={`${pageLabel}参数`}
+          aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
+        >
+          {isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
+        </aside>
+
+        {isCloneTool ? (
+          <button
+            type="button"
+            className="clone-ai-settings-toggle"
+            onClick={() => setIsCloneSettingsCollapsed((current) => !current)}
+            aria-label={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
+            aria-controls="ecommerce-clone-settings-panel"
+            aria-expanded={!isCloneSettingsCollapsed}
+            title={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
+          >
+            {isCloneSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </button>
+        ) : null}
+
+        {isSetTool ? setPreview : isDetail ? detailPreview : isTryOn ? tryOnPreview : isCloneTool ? (cloneOutput === "video" ? (
+          <main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
+            <EcommerceVideoWorkspace
+              isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
+              productImageDataUrls={productImages.map((img) => img.src)}
+              requirement={requirement}
+              platform={platform}
+              aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
+              durationSeconds={cloneVideoDuration}
+              resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
+              onRequestLogin={() => ((_props as Record<string, (() => void) | undefined>).onRequireLogin?.())}
+            />
+          </main>
+        ) : clonePreview) : placeholderPreview}
+      </div>
+
+      {selectedProductSetPreview ? (
+        <div className="product-set-preview-backdrop" role="presentation" onClick={() => setSelectedProductSetPreview(null)}>
+          <section
+            className="product-set-preview-modal"
+            role="dialog"
+            aria-modal="true"
+            aria-label={selectedProductSetPreview.label}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <button
+              type="button"
+              className="product-set-preview-close"
+              onClick={() => setSelectedProductSetPreview(null)}
+              aria-label="关闭预览"
+            >
+              <CloseOutlined />
+            </button>
+            <img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
+            <strong>{selectedProductSetPreview.label}</strong>
+          </section>
+        </div>
+      ) : null}
+
+      {showHostingModal ? (
+        <div className="product-set-hosting-backdrop" role="presentation">
+          <section className="product-set-hosting-modal" role="dialog" aria-modal="true" aria-label="批量托管上线啦">
+            <img src={productSetAssets.hosting} alt="托管模式" />
+            <div className="product-set-hosting-content">
+              <button type="button" className="product-set-hosting-close" onClick={() => setShowHostingModal(false)} aria-label="关闭">
+                ×
+              </button>
+              <h2>
+                批量托管上线啦！
+                <span>批量6折</span>
+              </h2>
+              <strong>睡一觉，图就做好了！</strong>
+              <ul>
+                <li>
+                  <b>批量生产</b>
+                  <span>支持无限任务并行生成，效率直线飞升。</span>
+                </li>
+                <li>
+                  <b>成本立省40%</b>
+                  <span>调度夜间闲置算力，享受专属离线点数折扣。</span>
+                </li>
+                <li>
+                  <b>AI智能提取</b>
+                  <span>自动识别图片卖点，生成高转化销售卖点。</span>
+                </li>
+              </ul>
+              <button type="button" className="product-set-hosting-confirm" onClick={() => setShowHostingModal(false)}>
+                我知道了
+              </button>
+            </div>
+          </section>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export default ProductClonePage;
diff --git a/src/features/ecommerce/EcommerceTemplatesPage.tsx b/src/features/ecommerce/EcommerceTemplatesPage.tsx
new file mode 100644
index 0000000..93a40f6
--- /dev/null
+++ b/src/features/ecommerce/EcommerceTemplatesPage.tsx
@@ -0,0 +1,323 @@
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  DeleteOutlined,
+  PlayCircleOutlined,
+  SearchOutlined,
+  ShoppingOutlined,
+  TagsOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import type { WebProjectSummary } from "../../types";
+import { useDebounce } from "../../hooks/useDebounce";
+import { templateCarouselCases, templateCases, templateCategories, type TemplateCase } from "./ecommerceTemplates";
+
+interface EcommerceTemplatesPageProps {
+  projects: WebProjectSummary[];
+  onOpenMore?: () => void;
+  onOpenEcommerce?: () => void;
+  onSelectTemplate?: (template: TemplateCase) => void;
+  onStartCreate?: () => void;
+  onOpenProject: (project: WebProjectSummary) => void;
+  onDeleteProject?: (project: WebProjectSummary) => void;
+}
+
+const APPLE_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
+const APPLE_CAROUSEL_TRANSITION_MS = 760;
+
+interface AppleCarouselMotion {
+  direction: number;
+  progress: 0 | 1;
+}
+
+function getPositiveModulo(value: number, length: number) {
+  return ((value % length) + length) % length;
+}
+
+function getAppleCarouselCardStyle(offset: number): CSSProperties {
+  const depth = Math.abs(offset);
+  const direction = Math.sign(offset);
+  const isActive = depth === 0;
+  const xByDepth = [0, 286, 456, 610, 735, 840];
+  const yByDepth = [8, -2, -8, -13, -18, -24];
+  const rotateByDepth = [0, 0, 0, 0, 0];
+  const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
+  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
+  const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
+  const z = isActive ? 90 : 28 - depth;
+  const rotateY = 0;
+  const rotateZ = direction * (rotateByDepth[depth] ?? rotateByDepth[rotateByDepth.length - 1]!);
+  const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
+
+  return {
+    "--apple-card-offset": offset,
+    "--apple-card-depth": depth,
+    "--apple-card-z": 80 - depth,
+    "--apple-card-x": `${x}px`,
+    "--apple-card-y": `${y}px`,
+    "--apple-card-z-offset": `${z}px`,
+    "--apple-card-rotate-y": `${rotateY}deg`,
+    "--apple-card-rotate-z": `${rotateZ}deg`,
+    "--apple-card-scale": String(scale),
+    "--apple-card-opacity": String(depth > 4 ? 0 : 1),
+  } as CSSProperties;
+}
+
+function EcommerceTemplatesPage({
+  projects,
+  onOpenMore,
+  onOpenEcommerce,
+  onSelectTemplate,
+  onStartCreate,
+  onOpenProject,
+  onDeleteProject,
+}: EcommerceTemplatesPageProps) {
+  const [activeTemplateCategory, setActiveTemplateCategory] = useState("全部");
+  const [templateSearch, setTemplateSearch] = useState("");
+  const debouncedSearch = useDebounce(templateSearch, 300);
+  const [carouselIndex, setCarouselIndex] = useState(0);
+  const [carouselMotion, setCarouselMotion] = useState<AppleCarouselMotion | null>(null);
+  const [carouselIsResetting, setCarouselIsResetting] = useState(false);
+  const carouselFrameRef = useRef<number | null>(null);
+  const carouselResetFrameRef = useRef<number | null>(null);
+  const carouselTimerRef = useRef<number | null>(null);
+
+  const filteredTemplates = useMemo(() => {
+    const keyword = debouncedSearch.trim();
+    return templateCases.filter((item) => {
+      const categoryMatches = activeTemplateCategory === "全部" || item.category === activeTemplateCategory;
+      const keywordMatches =
+        !keyword || item.title.includes(keyword) || item.summary.includes(keyword) || item.category.includes(keyword);
+      return categoryMatches && keywordMatches;
+    });
+  }, [activeTemplateCategory, debouncedSearch]);
+  const carouselItems = useMemo(() => templateCarouselCases.slice(0, 5), []);
+  const carouselSlotOffsets = useMemo(() => {
+    const direction = carouselMotion?.direction ?? 0;
+    const minSlot = APPLE_CAROUSEL_SLOTS[0]! + Math.min(direction, 0);
+    const maxSlot = APPLE_CAROUSEL_SLOTS[APPLE_CAROUSEL_SLOTS.length - 1]! + Math.max(direction, 0);
+    return Array.from({ length: maxSlot - minSlot + 1 }, (_, index) => minSlot + index);
+  }, [carouselMotion?.direction]);
+
+  const startCarouselShift = useCallback(
+    (rawDirection: number) => {
+      const direction = Math.sign(rawDirection);
+      if (!direction || carouselItems.length <= 1 || carouselMotion) return;
+
+      if (carouselFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselFrameRef.current);
+      }
+      if (carouselTimerRef.current !== null) {
+        window.clearTimeout(carouselTimerRef.current);
+      }
+      if (carouselResetFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselResetFrameRef.current);
+      }
+
+      setCarouselIsResetting(false);
+      setCarouselMotion({ direction, progress: 0 });
+      carouselFrameRef.current = window.requestAnimationFrame(() => {
+        carouselFrameRef.current = window.requestAnimationFrame(() => {
+          setCarouselMotion((current) => (current?.direction === direction ? { direction, progress: 1 } : current));
+        });
+      });
+      carouselTimerRef.current = window.setTimeout(() => {
+        setCarouselIsResetting(true);
+        setCarouselIndex((current) => getPositiveModulo(current + direction, carouselItems.length));
+        setCarouselMotion(null);
+        carouselResetFrameRef.current = window.requestAnimationFrame(() => {
+          carouselResetFrameRef.current = window.requestAnimationFrame(() => {
+            setCarouselIsResetting(false);
+          });
+        });
+      }, APPLE_CAROUSEL_TRANSITION_MS);
+    },
+    [carouselItems.length, carouselMotion],
+  );
+
+  useEffect(() => {
+    if (carouselItems.length <= 1) return undefined;
+    const intervalId = window.setInterval(() => {
+      startCarouselShift(-1);
+    }, 2200);
+    return () => window.clearInterval(intervalId);
+  }, [carouselItems.length, startCarouselShift]);
+
+  useEffect(
+    () => () => {
+      if (carouselFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselFrameRef.current);
+      }
+      if (carouselTimerRef.current !== null) {
+        window.clearTimeout(carouselTimerRef.current);
+      }
+      if (carouselResetFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselResetFrameRef.current);
+      }
+    },
+    [],
+  );
+
+  return (
+    <section className="image-workbench-page ecommerce-template-page" aria-label="示例模板">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="电商工具入口">
+          <button type="button" onClick={onOpenEcommerce}>
+            <ShoppingOutlined />
+            电商生成
+          </button>
+          <button type="button" className="is-active">
+            <TagsOutlined />
+            示例模板
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <ArrowLeftOutlined />
+        </button>
+        <strong>示例模板</strong>
+        <div className="image-workbench-camera-summary" aria-label="模板数量">
+          <strong>{filteredTemplates.length} 个模板</strong>
+          <span>最近项目 {projects.length}</span>
+        </div>
+      </div>
+
+      <main className="ecommerce-template-page__scroll omni-commerce-page">
+        <section className={`ecommerce-template-apple-carousel${carouselIsResetting ? " is-resetting" : ""}`} aria-label="苹果卡片式模板轮播">
+          <div className="ecommerce-template-apple-carousel__stage" aria-roledescription="carousel">
+            <div className="ecommerce-template-apple-carousel__deck">
+              {carouselSlotOffsets.map((slotOffset) => {
+                const itemIndex = getPositiveModulo(carouselIndex + slotOffset, carouselItems.length);
+                const item = carouselItems[itemIndex];
+                const visualOffset = slotOffset - (carouselMotion?.direction ?? 0) * (carouselMotion?.progress ?? 0);
+                const isActive = visualOffset === 0;
+
+                if (!item) return null;
+
+                return (
+                  <button
+                    key={slotOffset}
+                    type="button"
+                    className={`ecommerce-template-apple-card${isActive ? " is-active" : ""}`}
+                    style={getAppleCarouselCardStyle(visualOffset)}
+                    aria-label={`套用模板：${item.title}`}
+                    aria-pressed={isActive}
+                    onClick={() => {
+                      if (isActive) {
+                        onSelectTemplate?.(item);
+                        return;
+                      }
+                      startCarouselShift(slotOffset);
+                    }}
+                  >
+                    <img src={item.imageUrl} alt="" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        <section className="omni-commerce-band ecommerce-template-page__band" aria-labelledby="commerce-template-title">
+          <div className="omni-commerce-section-head">
+            <div>
+              <span>
+                <TagsOutlined />
+                示例模板
+              </span>
+              <h2 id="commerce-template-title">常用电商场景</h2>
+            </div>
+            <label className="omni-commerce-search">
+              <SearchOutlined />
+              <input value={templateSearch} placeholder="搜索模板" onChange={(event) => setTemplateSearch(event.target.value)} />
+            </label>
+          </div>
+
+          <div className="omni-commerce-filter" role="tablist" aria-label="模板分类">
+            {templateCategories.map((category) => (
+              <button
+                key={category}
+                type="button"
+                role="tab"
+                aria-selected={activeTemplateCategory === category}
+                className={activeTemplateCategory === category ? "is-active" : ""}
+                onClick={() => setActiveTemplateCategory(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+
+          <div className="omni-commerce-template-grid motion-stagger">
+            {filteredTemplates.map((item) => (
+              <article key={item.title} className="omni-commerce-template">
+                <button type="button" className="omni-commerce-template__select" onClick={() => onSelectTemplate?.(item)}>
+                  <img src={item.imageUrl} alt={item.title} />
+                  <div>
+                    <span>{item.category}</span>
+                    <strong>{item.title}</strong>
+                    <p>{item.summary}</p>
+                    <em>选择此场景</em>
+                  </div>
+                </button>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="omni-commerce-band ecommerce-template-page__band omni-commerce-band--projects" aria-labelledby="commerce-project-title">
+          <div className="omni-commerce-section-head">
+            <div>
+              <span>
+                <CheckCircleOutlined />
+                最近处理
+              </span>
+              <h2 id="commerce-project-title">最近项目</h2>
+            </div>
+            <button type="button" className="omni-commerce-text-button" onClick={onStartCreate}>
+              新建项目
+            </button>
+          </div>
+
+          {projects.length ? (
+            <div className="omni-commerce-project-grid motion-stagger">
+              {projects.slice(0, 4).map((project, index) => (
+                <article key={project.id} className="omni-commerce-project">
+                  <button type="button" onClick={() => onOpenProject(project)}>
+                    <img src={project.thumbnailUrl || templateCases[index % templateCases.length]!.imageUrl} alt="" />
+                    <span>{project.description || "最近更新的电商项目"}</span>
+                    <strong>{project.name || `预览项目 ${index + 1}`}</strong>
+                  </button>
+                  {onDeleteProject ? (
+                    <button type="button" className="omni-commerce-project__delete" aria-label={`删除项目 ${project.name}`} onClick={() => onDeleteProject(project)}>
+                      <DeleteOutlined />
+                    </button>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="omni-commerce-empty">
+              <PlayCircleOutlined />
+              <strong>还没有最近项目</strong>
+              <span>完成一次生成后，这里会显示最近处理的商品内容。</span>
+            </div>
+          )}
+        </section>
+      </main>
+
+      <footer className="image-workbench-status">
+        <span>模板</span>
+        <p>选择模板后会回到电商生成并自动套用场景。</p>
+        <em>{activeTemplateCategory}</em>
+      </footer>
+    </section>
+  );
+}
+
+export default EcommerceTemplatesPage;
diff --git a/src/features/ecommerce/EcommerceVideoWorkspace.tsx b/src/features/ecommerce/EcommerceVideoWorkspace.tsx
new file mode 100644
index 0000000..8a3e584
--- /dev/null
+++ b/src/features/ecommerce/EcommerceVideoWorkspace.tsx
@@ -0,0 +1,347 @@
+import { Fragment, useCallback, useRef, useState } from "react";
+import {
+  CopyOutlined,
+  DownloadOutlined,
+  FolderAddOutlined,
+  LoadingOutlined,
+  PlayCircleOutlined,
+  ReloadOutlined,
+  SendOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
+import { runVideoPlan, renderScene, buildSceneTasks } from "./ecommerceVideoService";
+import {
+  PLAN_STEP_LABELS,
+  type EcommerceVideoStage,
+  type EcommerceVideoSceneTask,
+  type EcommerceVideoPlanResult,
+  type PlanStep,
+} from "./ecommerceVideoTypes";
+import type { AdVideoUserConfig } from "../../api/adVideoPlanClient";
+import { saveToolResultToLocal, addToolResultToAssetLibrary } from "../workbench/toolResultActions";
+import { useAppStore } from "../../stores";
+
+interface EcommerceVideoWorkspaceProps {
+  isAuthenticated: boolean;
+  productImageDataUrls: string[];
+  requirement: string;
+  platform: string;
+  aspectRatio: string;
+  durationSeconds: number;
+  resolution: string;
+  onRequestLogin?: () => void;
+}
+
+const ALL_STEPS: PlanStep[] = [
+  "upload", "analyze", "summary", "selling",
+  "creative", "storyboard", "prompts", "compliance",
+];
+
+function mapResolutionToQuality(res: string): "720P" | "1080P" {
+  return res.includes("720") ? "720P" : "1080P";
+}
+
+export default function EcommerceVideoWorkspace({
+  isAuthenticated,
+  productImageDataUrls,
+  requirement,
+  platform,
+  aspectRatio,
+  durationSeconds,
+  resolution,
+  onRequestLogin,
+}: EcommerceVideoWorkspaceProps) {
+  const [stage, setStage] = useState<EcommerceVideoStage>("idle");
+  const [planResult, setPlanResult] = useState<EcommerceVideoPlanResult | null>(null);
+  const [scenes, setScenes] = useState<EcommerceVideoSceneTask[]>([]);
+  const [completedSteps, setCompletedSteps] = useState<PlanStep[]>([]);
+  const [currentStep, setCurrentStep] = useState<PlanStep | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [actionNotice, setActionNotice] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const renderAbortRef = useRef({ current: false });
+  const setView = useAppStore((s) => s.setView);
+
+  const showNotice = (msg: string) => {
+    setActionNotice(msg);
+    setTimeout(() => setActionNotice(null), 3000);
+  };
+
+  const handleDownload = async (url: string) => {
+    try {
+      await saveToolResultToLocal({
+        url,
+        name: `ecommerce-video-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        tags: ["电商", "短视频", "生成视频"],
+      });
+      showNotice("下载完成");
+    } catch {
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "ecommerce-video.mp4";
+      a.click();
+    }
+  };
+
+  const handleSaveAsset = async (url: string) => {
+    try {
+      const result = await addToolResultToAssetLibrary({
+        url,
+        name: `电商短视频-${Date.now()}.mp4`,
+        description: "电商广告视频生成结果",
+        type: "video",
+        isVideo: true,
+        tags: ["电商", "短视频", "广告视频"],
+        metadata: { source: "ecommerce-video", platform },
+      });
+      showNotice(result === "server" ? "已保存到资产库" : "已保存到本地资产库");
+    } catch {
+      showNotice("保存失败");
+    }
+  };
+
+  const handleImportToCanvas = async (url: string) => {
+    try {
+      await addToolResultToAssetLibrary({
+        url,
+        name: `电商短视频-${Date.now()}.mp4`,
+        description: "电商广告视频 - 导入画布",
+        type: "video",
+        isVideo: true,
+        tags: ["电商", "短视频", "画布导入"],
+        metadata: { source: "ecommerce-video", platform },
+      });
+      setView("canvas");
+      showNotice("已保存资产并跳转画布");
+    } catch {
+      showNotice("导入失败");
+    }
+  };
+
+  const buildConfig = useCallback((): AdVideoUserConfig => ({
+    platform,
+    aspectRatio,
+    durationSeconds,
+    style: "痛点解决",
+    language: "中文",
+    market: "中国",
+    needVoiceover: true,
+    needSubtitle: true,
+    conversionFocus: "conversion",
+  }), [platform, aspectRatio, durationSeconds]);
+
+  const handlePlan = async () => {
+    if (!isAuthenticated) { onRequestLogin?.(); return; }
+    if (!productImageDataUrls.length && !requirement.trim()) {
+      setError("请先上传产品图片或填写商品说明");
+      return;
+    }
+    abortControllerRef.current?.abort();
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    setStage("planning");
+    setError(null);
+    setCompletedSteps([]);
+    setCurrentStep(null);
+    setPlanResult(null);
+    setScenes([]);
+    try {
+      const result = await runVideoPlan(
+        productImageDataUrls, requirement, buildConfig(),
+        {
+          onStepStart: (step) => setCurrentStep(step),
+          onStepDone: (step) => setCompletedSteps((prev) => [...prev, step]),
+          signal: controller.signal,
+        },
+      );
+      setPlanResult(result);
+      setScenes(buildSceneTasks(result));
+      setStage("planned");
+    } catch (err) {
+      if ((err as Error).name === "AbortError") return;
+      setError(err instanceof Error ? err.message : "策划失败");
+      setStage("idle");
+    } finally {
+      setCurrentStep(null);
+    }
+  };
+
+  const handleRender = async () => {
+    if (!planResult || !scenes.length) return;
+    const imageUrl = productImageDataUrls[0] || "";
+    setStage("rendering");
+    setError(null);
+    renderAbortRef.current = { current: false };
+    const quality = mapResolutionToQuality(resolution);
+
+    for (const scene of scenes) {
+      if (renderAbortRef.current.current) break;
+      setScenes((prev) => prev.map((s) =>
+        s.sceneId === scene.sceneId ? { ...s, status: "pending" } : s));
+      try {
+        await renderScene(
+          { sceneId: scene.sceneId, prompt: scene.prompt, durationSeconds: scene.durationSeconds, imageUrl, aspectRatio, resolution: quality },
+          {
+            onSceneSubmitted: (id, taskId) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, taskId, status: "running" } : s)),
+            onSceneProgress: (id, progress) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, progress } : s)),
+            onSceneCompleted: (id, url) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, status: "completed", progress: 100, resultUrl: url } : s)),
+            onSceneFailed: (id, err2) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, status: "failed", error: err2 } : s)),
+          },
+          renderAbortRef.current,
+        );
+      } catch (err) {
+        setScenes((prev) => prev.map((s) =>
+          s.sceneId === scene.sceneId ? { ...s, status: "failed", error: err instanceof Error ? err.message : "生成失败" } : s));
+      }
+    }
+    setScenes((current) => {
+      const hasFailed = current.some((s) => s.status === "failed");
+      const allDone = current.every((s) => s.status === "completed" || s.status === "failed");
+      if (allDone) setStage(hasFailed ? "partial_failed" : "completed");
+      return current;
+    });
+  };
+
+  const handleCancel = () => {
+    abortControllerRef.current?.abort();
+    renderAbortRef.current.current = true;
+    setStage("cancelled");
+  };
+
+  const completedScenes = scenes.filter((s) => s.status === "completed" && s.resultUrl);
+  const primaryVideo = completedScenes[0]?.resultUrl;
+  const canRender = planResult?.compliance.allow_video_generation && stage === "planned";
+  const sourceImage = productImageDataUrls[0] || "";
+  const flowHasStarted = stage !== "idle" || completedSteps.length > 0 || scenes.length > 0;
+  const flowMeta = `${platform} / ${aspectRatio} / ${durationSeconds}s / ${resolution}`;
+  const planActionLabel = stage === "planning"
+    ? "策划中"
+    : (stage === "planned" || stage === "completed" || stage === "partial_failed") ? "重新策划" : "一键策划";
+  const renderActionLabel = stage === "rendering" ? "生成中" : "确认生成";
+
+  return (
+    <div className="ecom-video-workspace" data-stage={stage}>
+      <header className="ecom-video-flowbar">
+        <div className="ecom-video-flowbar__title" aria-label={`短视频分镜流，${flowMeta}`} title={flowMeta}>
+          <span className={`ecom-video-flowbar__pulse${flowHasStarted ? " is-active" : ""}`} aria-hidden="true" />
+          <span className="ecom-video-flowbar__wave" aria-hidden="true"><i /><i /><i /></span>
+        </div>
+
+        <div className="ecom-video-step-dots" aria-label="策划进度">
+          {ALL_STEPS.map((step) => {
+            const isDone = completedSteps.includes(step);
+            const isActive = currentStep === step;
+            const cls = isDone ? "is-done" : isActive ? "is-active" : "";
+            return (
+              <span
+                key={step}
+                className={`ecom-video-step-dot ${cls}`}
+                title={PLAN_STEP_LABELS[step]}
+                aria-label={PLAN_STEP_LABELS[step]}
+              />
+            );
+          })}
+        </div>
+
+        <div className="ecom-video-flowbar__actions">
+          {error ? <span className="ecom-video-flowbar__error" role="alert">{error}</span> : null}
+          <button
+            type="button"
+            className="ecom-video-flow-action"
+            disabled={stage === "planning" || stage === "rendering"}
+            onClick={() => void handlePlan()}
+            aria-label={planActionLabel}
+            title={planActionLabel}
+          >
+            {stage === "planning" ? <LoadingOutlined /> : (stage === "planned" || stage === "completed" || stage === "partial_failed") ? <ReloadOutlined /> : <PlayCircleOutlined />}
+          </button>
+          {(stage === "rendering" || stage === "planned") ? (
+            <button
+              type="button"
+              className="ecom-video-flow-action ecom-video-flow-action--ghost"
+              disabled={!canRender}
+              onClick={() => void handleRender()}
+              aria-label={renderActionLabel}
+              title={renderActionLabel}
+            >
+              {stage === "rendering" ? <LoadingOutlined /> : <SendOutlined />}
+            </button>
+          ) : null}
+          {stage === "rendering" ? (
+            <button type="button" className="ecom-video-flow-action ecom-video-flow-action--danger" onClick={handleCancel} aria-label="取消生成" title="取消生成">
+              <StopOutlined />
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      <section className="ecom-video-flow-canvas" aria-label="视频分镜流程图">
+        {completedScenes.length === 0 && !sourceImage ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "#697486", fontSize: 13 }}>
+            <span>上传商品图并点击"一键策划"开始</span>
+          </div>
+        ) : (
+          <div className="ecom-video-flow-map">
+            {sourceImage ? (
+              <article className="ecom-video-flow-node ecom-video-flow-node--source is-ready" aria-label="商品图节点">
+                <div className="ecom-video-flow-node__media">
+                  <img src={sourceImage} alt="商品图" />
+                </div>
+                <span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
+              </article>
+            ) : null}
+
+            {sourceImage && completedScenes.length > 0 ? (
+              <div className="ecom-video-flow-connector is-active" aria-hidden="true"><i /></div>
+            ) : null}
+
+            <div className="ecom-video-scene-strip" aria-label="已完成分镜节点">
+              {completedScenes.map((scene, index) => (
+                <Fragment key={scene.sceneId}>
+                  <article
+                    className="ecom-video-flow-node ecom-video-flow-node--scene is-completed"
+                    aria-label={`镜头 ${scene.sceneId}，完成`}
+                    title={`镜头 ${scene.sceneId}`}
+                  >
+                    <div className="ecom-video-flow-node__media">
+                      <video src={scene.resultUrl!} muted playsInline loop autoPlay />
+                    </div>
+                    <span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
+                  </article>
+                  {index < completedScenes.length - 1 ? (
+                    <div className="ecom-video-scene-link is-active" aria-hidden="true"><i /></div>
+                  ) : null}
+                </Fragment>
+              ))}
+            </div>
+
+            {completedScenes.length > 0 && primaryVideo ? (
+              <div className="ecom-video-flow-connector is-active" aria-hidden="true"><i /></div>
+            ) : null}
+
+            {primaryVideo ? (
+              <article className="ecom-video-flow-node ecom-video-flow-node--final is-completed" aria-label="成片节点，已完成">
+                <div className="ecom-video-flow-node__media">
+                  <video src={primaryVideo} muted playsInline loop autoPlay />
+                </div>
+                <span className="ecom-video-flow-node__status-orb" aria-hidden="true" />
+              </article>
+            ) : null}
+          </div>
+        )}
+
+        {primaryVideo ? (
+          <div className="ecom-video-flow-dock" aria-label="视频交付操作">
+            <button type="button" aria-label="下载当前视频" title="下载当前视频" onClick={() => void handleDownload(primaryVideo)}><DownloadOutlined /></button>
+            <button type="button" aria-label="保存到资产库" title="保存到资产库" onClick={() => void handleSaveAsset(primaryVideo)}><FolderAddOutlined /></button>
+            <button type="button" aria-label="导入画布" title="导入画布" onClick={() => void handleImportToCanvas(primaryVideo)}><SendOutlined /></button>
+            <button type="button" aria-label="复制视频链接" title="复制视频链接" onClick={() => void navigator.clipboard.writeText(primaryVideo)}><CopyOutlined /></button>
+          </div>
+        ) : null}
+        {actionNotice ? <div className="ecom-video-flow-notice">{actionNotice}</div> : null}
+      </section>
+    </div>
+  );
+}
diff --git a/src/features/ecommerce/ImageMentionMenu.tsx b/src/features/ecommerce/ImageMentionMenu.tsx
new file mode 100644
index 0000000..bacfb88
--- /dev/null
+++ b/src/features/ecommerce/ImageMentionMenu.tsx
@@ -0,0 +1,71 @@
+export interface MentionImageOption {
+  id: string;
+  src: string;
+  name: string;
+  label?: string;
+}
+
+export function getImageMentionQuery(value: string, selectionStart: number | null | undefined): string | null {
+  if (selectionStart === null || selectionStart === undefined) return null;
+  const beforeCursor = value.slice(0, selectionStart);
+  const match = beforeCursor.match(/(?:^|\s)@([^\s@]*)$/);
+  return match ? match[1] ?? "" : null;
+}
+
+export function insertImageMentionValue(
+  value: string,
+  selectionStart: number,
+  imageName: string,
+  maxLength: number,
+): { value: string; selectionStart: number } {
+  const beforeCursor = value.slice(0, selectionStart);
+  const afterCursor = value.slice(selectionStart);
+  const match = beforeCursor.match(/(?:^|\s)@([^\s@]*)$/);
+  const mentionStart = match ? beforeCursor.length - match[0].length + (match[0].startsWith("@") ? 0 : 1) : selectionStart;
+  const mentionText = `@${imageName.trim() || "uploaded-image"} `;
+  const nextValue = `${value.slice(0, mentionStart)}${mentionText}${afterCursor}`.slice(0, maxLength);
+  const nextSelectionStart = Math.min(mentionStart + mentionText.length, nextValue.length);
+  return { value: nextValue, selectionStart: nextSelectionStart };
+}
+
+interface ImageMentionMenuProps {
+  images: MentionImageOption[];
+  query?: string;
+  onSelect: (image: MentionImageOption) => void;
+}
+
+function ImageMentionMenu({ images, query = "", onSelect }: ImageMentionMenuProps) {
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleImages = normalizedQuery
+    ? images.filter((image) => `${image.label ?? ""} ${image.name}`.toLowerCase().includes(normalizedQuery))
+    : images;
+
+  return (
+    <div className="image-mention-menu" role="listbox" aria-label="选择上传图片">
+      {visibleImages.length ? (
+        visibleImages.map((image) => (
+          <button
+            key={image.id}
+            type="button"
+            className="image-mention-menu__item"
+            role="option"
+            onMouseDown={(event) => {
+              event.preventDefault();
+              onSelect(image);
+            }}
+          >
+            <img src={image.src} alt="" />
+            <span>
+              <strong>{image.label ?? image.name}</strong>
+              <em>{image.name}</em>
+            </span>
+          </button>
+        ))
+      ) : (
+        <span className="image-mention-menu__empty">没有匹配的上传图片</span>
+      )}
+    </div>
+  );
+}
+
+export default ImageMentionMenu;
diff --git a/src/features/ecommerce/ecommerceTemplates.ts b/src/features/ecommerce/ecommerceTemplates.ts
new file mode 100644
index 0000000..45ee5e9
--- /dev/null
+++ b/src/features/ecommerce/ecommerceTemplates.ts
@@ -0,0 +1,129 @@
+import ecommerceCarouselGenerated from "../../assets/ecommerce-carousel-generated.png";
+import moreTemplateSlide1 from "../../assets/more-template-carousel/slide-1.jpg";
+import moreTemplateSlide2 from "../../assets/more-template-carousel/slide-2.jpg";
+import moreTemplateSlide3 from "../../assets/more-template-carousel/slide-3.jpg";
+import moreTemplateSlide4 from "../../assets/more-template-carousel/slide-4.png";
+import moreTemplateSlide5 from "../../assets/more-template-carousel/slide-5.gif";
+import ecommerceHeroSlide1 from "../../assets/ecommerce-hero-carousel/slide-1.webp";
+import ecommerceHeroSlide2 from "../../assets/ecommerce-hero-carousel/slide-2.webp";
+import ecommerceHeroSlide3 from "../../assets/ecommerce-hero-carousel/slide-3.webp";
+import ecommerceHeroSlide4 from "../../assets/ecommerce-hero-carousel/slide-4.webp";
+import ecommerceHeroSlide5 from "../../assets/ecommerce-hero-carousel/slide-5.webp";
+import ecommerceCarouselImage1 from "../../../tu/微信图片_20260514125332_8_2.png";
+import ecommerceCarouselImage2 from "../../../tu/微信图片_20260514125332_9_2.png";
+import ecommerceCarouselImage3 from "../../../tu/微信图片_20260514125332_7_2.png";
+import ecommerceCarouselImage4 from "../../../tu/微信图片_20260514125332_12_2.png";
+
+export interface TemplateCase {
+  title: string;
+  category: string;
+  summary: string;
+  imageUrl: string;
+}
+
+export const templateCategories = ["全部", "详情图", "主图", "模特图", "短视频", "营销图"];
+
+export const templateCarouselCases: TemplateCase[] = [
+  {
+    title: "霓虹水花动态猫",
+    category: "短视频",
+    summary: "适合展示高动势、强色彩和奇幻质感的视觉参考。",
+    imageUrl: moreTemplateSlide1,
+  },
+  {
+    title: "古风人物光影",
+    category: "模特图",
+    summary: "适合古装人物、柔光棚拍和氛围大片参考。",
+    imageUrl: moreTemplateSlide2,
+  },
+  {
+    title: "绘本郊游场景",
+    category: "营销图",
+    summary: "适合童趣插画、故事场景和清新户外主题。",
+    imageUrl: moreTemplateSlide3,
+  },
+  {
+    title: "动画乐队片段",
+    category: "短视频",
+    summary: "适合复古动画、角色表演和音乐节奏参考。",
+    imageUrl: moreTemplateSlide4,
+  },
+  {
+    title: "猫咪动态贴图",
+    category: "主图",
+    summary: "适合轻量动图、角色素材和趣味展示参考。",
+    imageUrl: moreTemplateSlide5,
+  },
+];
+
+export const ecommerceHeroCarouselCases: TemplateCase[] = [
+  {
+    title: "生成电商图 1",
+    category: "电商轮播",
+    summary: "电商页面轮播素材",
+    imageUrl: ecommerceHeroSlide1,
+  },
+  {
+    title: "生成电商图 2",
+    category: "电商轮播",
+    summary: "电商页面轮播素材",
+    imageUrl: ecommerceHeroSlide2,
+  },
+  {
+    title: "生成电商图 3",
+    category: "电商轮播",
+    summary: "电商页面轮播素材",
+    imageUrl: ecommerceHeroSlide3,
+  },
+  {
+    title: "生成电商图 4",
+    category: "电商轮播",
+    summary: "电商页面轮播素材",
+    imageUrl: ecommerceHeroSlide4,
+  },
+  {
+    title: "生成电商图 5",
+    category: "电商轮播",
+    summary: "电商页面轮播素材",
+    imageUrl: ecommerceHeroSlide5,
+  },
+];
+
+export const templateCases: TemplateCase[] = [
+  {
+    title: "香氛详情页场景图",
+    category: "详情图",
+    summary: "适合家居香氛、礼盒、美妆类目，突出氛围和质感。",
+    imageUrl: ecommerceCarouselImage1,
+  },
+  {
+    title: "护肤套装主图",
+    category: "主图",
+    summary: "白底构图清晰，适合天猫、淘宝、京东主图位。",
+    imageUrl: ecommerceCarouselImage3,
+  },
+  {
+    title: "美妆营销海报",
+    category: "营销图",
+    summary: "强化利益点和视觉冲击，适合活动页和投放素材。",
+    imageUrl: ecommerceCarouselGenerated,
+  },
+  {
+    title: "岩境香氛短视频",
+    category: "短视频",
+    summary: "首帧质感强，适合慢展示和品牌调性视频。",
+    imageUrl: ecommerceCarouselImage4,
+  },
+  {
+    title: "花漾香氛模特手持图",
+    category: "模特图",
+    summary: "增加真实使用感，适合礼品和生活方式类商品。",
+    imageUrl: ecommerceCarouselImage2,
+  },
+  {
+    title: "促销卖点组合图",
+    category: "详情图",
+    summary: "把成分、规格、卖点拆成清晰的详情页模块。",
+    imageUrl: "https://picsum.photos/id/1080/900/620",
+  },
+];
diff --git a/src/features/ecommerce/ecommerceVideoService.ts b/src/features/ecommerce/ecommerceVideoService.ts
new file mode 100644
index 0000000..f1f7639
--- /dev/null
+++ b/src/features/ecommerce/ecommerceVideoService.ts
@@ -0,0 +1,144 @@
+import {
+  analyzeProductImages,
+  buildProductSummary,
+  extractSellingPoints,
+  generateCreativeOptions,
+  generateStoryboard,
+  generateVideoPrompts,
+  checkCompliance,
+  type AdVideoUserConfig,
+} from "../../api/adVideoPlanClient";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
+import { waitForTask } from "../../api/taskSubscription";
+import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
+import type {
+  EcommerceVideoPlanResult,
+  EcommerceVideoSceneTask,
+  PlanStep,
+} from "./ecommerceVideoTypes";
+
+export interface PlanCallbacks {
+  onStepStart: (step: PlanStep) => void;
+  onStepDone: (step: PlanStep) => void;
+  signal?: AbortSignal;
+}
+
+export async function runVideoPlan(
+  imageDataUrls: string[],
+  manualText: string,
+  config: AdVideoUserConfig,
+  callbacks: PlanCallbacks,
+): Promise<EcommerceVideoPlanResult> {
+  const { onStepStart, onStepDone, signal } = callbacks;
+
+  onStepStart("upload");
+  const imageUrls: string[] = [];
+  for (const dataUrl of imageDataUrls) {
+    const result = await uploadAssetWithProgress(
+      { dataUrl, scope: "ecommerce-product", mimeType: "image/png" },
+      { signal },
+    );
+    imageUrls.push(result.url);
+  }
+  onStepDone("upload");
+
+  onStepStart("analyze");
+  const imageDesc = await analyzeProductImages(imageUrls, signal);
+  onStepDone("analyze");
+
+  onStepStart("summary");
+  const summary = await buildProductSummary(imageDesc, manualText, signal);
+  onStepDone("summary");
+
+  onStepStart("selling");
+  const selling = await extractSellingPoints(summary, signal);
+  onStepDone("selling");
+
+  onStepStart("creative");
+  const creatives = await generateCreativeOptions(selling, config, signal);
+  if (!creatives.length) throw new Error("未能生成有效的广告创意");
+  onStepDone("creative");
+
+  onStepStart("storyboard");
+  const storyboard = await generateStoryboard(creatives[0], summary, config, signal);
+  onStepDone("storyboard");
+
+  onStepStart("prompts");
+  const videoPrompts = await generateVideoPrompts(storyboard, summary, signal);
+  onStepDone("prompts");
+
+  onStepStart("compliance");
+  const compliance = await checkCompliance(summary, selling, storyboard, signal);
+  onStepDone("compliance");
+
+  return { summary, selling, creatives, storyboard, videoPrompts, compliance };
+}
+
+export interface RenderSceneInput {
+  sceneId: number;
+  prompt: string;
+  durationSeconds: number;
+  imageUrl: string;
+  aspectRatio: string;
+  resolution: string;
+  model?: string;
+}
+
+export interface RenderCallbacks {
+  onSceneSubmitted: (sceneId: number, taskId: string) => void;
+  onSceneProgress: (sceneId: number, progress: number) => void;
+  onSceneCompleted: (sceneId: number, resultUrl: string) => void;
+  onSceneFailed: (sceneId: number, error: string) => void;
+}
+
+export async function renderScene(
+  input: RenderSceneInput,
+  callbacks: RenderCallbacks,
+  abortRef: { current: boolean },
+): Promise<void> {
+  const model = resolveVideoRequestModel({
+    model: input.model || "happyhorse-1.0",
+    referenceUrls: [input.imageUrl],
+  });
+
+  const { taskId } = await aiGenerationClient.createVideoTask({
+    model,
+    prompt: input.prompt,
+    ratio: input.aspectRatio,
+    duration: input.durationSeconds,
+    quality: input.resolution,
+    resolution: input.resolution,
+    imageUrl: input.imageUrl,
+    referenceUrls: [input.imageUrl],
+    hasReferenceVideo: false,
+  });
+
+  callbacks.onSceneSubmitted(input.sceneId, taskId);
+
+  const resultUrl = await waitForTask(taskId, {
+    abortRef,
+    onProgress: (e) => callbacks.onSceneProgress(input.sceneId, e.progress),
+  });
+
+  if (resultUrl) {
+    callbacks.onSceneCompleted(input.sceneId, resultUrl);
+  } else {
+    callbacks.onSceneFailed(input.sceneId, "任务未返回结果");
+  }
+}
+
+export function buildSceneTasks(
+  plan: EcommerceVideoPlanResult,
+): EcommerceVideoSceneTask[] {
+  return plan.storyboard.scenes.map((scene) => {
+    const prompt = plan.videoPrompts.find((p) => p.scene_id === scene.scene_id);
+    return {
+      sceneId: scene.scene_id,
+      prompt: prompt?.positive_prompt || scene.visual_description,
+      durationSeconds: Number.parseInt(scene.duration, 10) || 5,
+      status: "idle",
+      progress: 0,
+    };
+  });
+}
diff --git a/src/features/ecommerce/ecommerceVideoTypes.ts b/src/features/ecommerce/ecommerceVideoTypes.ts
new file mode 100644
index 0000000..29ca564
--- /dev/null
+++ b/src/features/ecommerce/ecommerceVideoTypes.ts
@@ -0,0 +1,69 @@
+import type {
+  ProductSummary,
+  SellingPointResult,
+  CreativeOption,
+  Storyboard,
+  VideoPrompt,
+  ComplianceCheck,
+} from "../../api/adVideoPlanClient";
+
+export type EcommerceVideoStage =
+  | "idle"
+  | "uploading"
+  | "planning"
+  | "planned"
+  | "rendering"
+  | "partial_failed"
+  | "completed"
+  | "cancelled";
+
+export type SceneTaskStatus = "idle" | "pending" | "running" | "completed" | "failed" | "cancelled";
+
+export interface EcommerceVideoSceneTask {
+  sceneId: number;
+  taskId?: string;
+  prompt: string;
+  durationSeconds: number;
+  status: SceneTaskStatus;
+  progress: number;
+  resultUrl?: string | null;
+  error?: string | null;
+}
+
+export interface EcommerceVideoPlanResult {
+  summary: ProductSummary;
+  selling: SellingPointResult;
+  creatives: CreativeOption[];
+  storyboard: Storyboard;
+  videoPrompts: VideoPrompt[];
+  compliance: ComplianceCheck;
+}
+
+export interface EcommerceVideoDelivery {
+  planResult: EcommerceVideoPlanResult | null;
+  scenes: EcommerceVideoSceneTask[];
+  completedCount: number;
+  failedCount: number;
+  totalCount: number;
+}
+
+export type PlanStep =
+  | "upload"
+  | "analyze"
+  | "summary"
+  | "selling"
+  | "creative"
+  | "storyboard"
+  | "prompts"
+  | "compliance";
+
+export const PLAN_STEP_LABELS: Record<PlanStep, string> = {
+  upload: "上传商品图",
+  analyze: "分析商品图",
+  summary: "生成商品理解",
+  selling: "提炼卖点",
+  creative: "生成广告创意",
+  storyboard: "生成视频分镜",
+  prompts: "生成镜头提示词",
+  compliance: "合规检查",
+};
diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx
new file mode 100644
index 0000000..ac93136
--- /dev/null
+++ b/src/features/home/HomePage.tsx
@@ -0,0 +1,345 @@
+import {
+  ArrowRightOutlined,
+  DashboardOutlined,
+  FileSearchOutlined,
+  PlayCircleOutlined,
+  PlusOutlined,
+  ShoppingOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import WelcomeSplash from "./WelcomeSplash";
+import featureEcommerceImage from "../../assets/home-features/feature-ecommerce.jpg";
+import featureScriptImage from "../../assets/home-features/feature-script.jpg";
+import featureTokenImage from "../../assets/home-features/feature-token.jpg";
+import heroImage1 from "../../../projects/public/hero-1.png";
+import heroImage2 from "../../../projects/public/hero-2.png";
+import heroImage3 from "../../../projects/public/hero-3.png";
+
+interface HomePageProps {
+  onOpenGenerate: () => void;
+  onOpenCanvas?: () => void;
+  onOpenEcommerce: () => void;
+  onOpenScriptReview?: () => void;
+  onOpenTokenMonitor?: () => void;
+}
+
+const HOME_BACKGROUND_VIDEO = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/%E6%A0%B7%E7%89%87.mp4";
+
+const HOME_CAROUSEL_IMAGES = [
+  { imageUrl: heroImage1, title: "灵感生成" },
+  { imageUrl: heroImage2, title: "画布创作" },
+  { imageUrl: heroImage3, title: "商业素材" },
+];
+
+const HOME_FEATURES = [
+  {
+    key: "script",
+    eyebrow: "Script Review",
+    title: "剧本智能测评",
+    description: "用六维雷达评分拆解剧本质量，从结构、节奏、人物到商业潜力给出可执行的优化路径。",
+    imageUrl: featureScriptImage,
+    actionLabel: "开始测评",
+    icon: <FileSearchOutlined />,
+    stats: ["六维评分", "质量量化", "逐项优化"],
+  },
+  {
+    key: "token",
+    eyebrow: "Team Tokens",
+    title: "团队 Token 监控",
+    description: "实时追踪团队 Token 消耗、项目分布和成员使用情况，让预算、配额和成本都能被清楚管理。",
+    imageUrl: featureTokenImage,
+    actionLabel: "查看面板",
+    icon: <DashboardOutlined />,
+    stats: ["实时概览", "成员明细", "成本分析"],
+  },
+  {
+    key: "ecommerce",
+    eyebrow: "AI Commerce",
+    title: "AI 电商生成",
+    description: "上传产品图后自动生成主图、场景图、详情素材和短视频方案，快速覆盖多平台商品视觉。",
+    imageUrl: featureEcommerceImage,
+    actionLabel: "开始生成",
+    icon: <ShoppingOutlined />,
+    stats: ["多场景", "多角度", "批量输出"],
+  },
+];
+
+const HOME_EXPERIENCE_POINTS = [
+  { label: "生成", meta: "图像 / 视频", tone: "green" },
+  { label: "测评", meta: "剧本质量", tone: "cyan" },
+  { label: "成本", meta: "Token 用量", tone: "violet" },
+  { label: "电商", meta: "商品视觉", tone: "amber" },
+];
+
+const HOME_CAROUSEL_SLOTS = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
+const HOME_CAROUSEL_TRANSITION_MS = 860;
+
+interface HomeCarouselMotion {
+  direction: number;
+  progress: 0 | 1;
+}
+
+function getPositiveModulo(value: number, length: number) {
+  return ((value % length) + length) % length;
+}
+
+function getHomeCarouselCardStyle(offset: number): CSSProperties {
+  const depth = Math.abs(offset);
+  const direction = Math.sign(offset);
+  const isActive = depth === 0;
+  const xByDepth = [0, 286, 456, 610, 735, 840];
+  const yByDepth = [8, -2, -8, -13, -18, -24];
+  const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
+  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
+  const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
+  const z = isActive ? 90 : 28 - depth;
+  const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
+
+  return {
+    "--apple-card-offset": offset,
+    "--apple-card-depth": depth,
+    "--apple-card-z": 80 - depth,
+    "--apple-card-x": `${x}px`,
+    "--apple-card-y": `${y}px`,
+    "--apple-card-z-offset": `${z}px`,
+    "--apple-card-rotate-y": "0deg",
+    "--apple-card-rotate-z": "0deg",
+    "--apple-card-scale": String(scale),
+    "--apple-card-opacity": String(depth > 4 ? 0 : 1),
+  } as CSSProperties;
+}
+
+function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor }: HomePageProps) {
+  const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+  const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
+  const [carouselIsResetting, setCarouselIsResetting] = useState(false);
+  const carouselFrameRef = useRef<number | null>(null);
+  const carouselResetFrameRef = useRef<number | null>(null);
+  const carouselTimerRef = useRef<number | null>(null);
+  const carouselSlotOffsets = useMemo(() => {
+    const direction = carouselMotion?.direction ?? 0;
+    const minSlot = HOME_CAROUSEL_SLOTS[0]! + Math.min(direction, 0);
+    const maxSlot = HOME_CAROUSEL_SLOTS[HOME_CAROUSEL_SLOTS.length - 1]! + Math.max(direction, 0);
+    return Array.from({ length: maxSlot - minSlot + 1 }, (_, index) => minSlot + index);
+  }, [carouselMotion?.direction]);
+
+  const startCarouselShift = useCallback(
+    (rawDirection: number) => {
+      const direction = Math.sign(rawDirection);
+      if (!direction || HOME_CAROUSEL_IMAGES.length <= 1 || carouselMotion) return;
+
+      if (carouselFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselFrameRef.current);
+      }
+      if (carouselTimerRef.current !== null) {
+        window.clearTimeout(carouselTimerRef.current);
+      }
+      if (carouselResetFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselResetFrameRef.current);
+      }
+
+      setCarouselIsResetting(false);
+      setCarouselMotion({ direction, progress: 0 });
+      carouselFrameRef.current = window.requestAnimationFrame(() => {
+        carouselFrameRef.current = window.requestAnimationFrame(() => {
+          setCarouselMotion((current) => (current?.direction === direction ? { direction, progress: 1 } : current));
+        });
+      });
+      carouselTimerRef.current = window.setTimeout(() => {
+        setCarouselIsResetting(true);
+        setActiveSlideIndex((current) => getPositiveModulo(current + direction, HOME_CAROUSEL_IMAGES.length));
+        setCarouselMotion(null);
+        carouselResetFrameRef.current = window.requestAnimationFrame(() => {
+          carouselResetFrameRef.current = window.requestAnimationFrame(() => {
+            setCarouselIsResetting(false);
+          });
+        });
+      }, HOME_CAROUSEL_TRANSITION_MS);
+    },
+    [carouselMotion],
+  );
+
+  useEffect(() => {
+    const timerId = window.setInterval(() => {
+      startCarouselShift(-1);
+    }, 2600);
+    return () => window.clearInterval(timerId);
+  }, [startCarouselShift]);
+
+  useEffect(
+    () => () => {
+      if (carouselFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselFrameRef.current);
+      }
+      if (carouselTimerRef.current !== null) {
+        window.clearTimeout(carouselTimerRef.current);
+      }
+      if (carouselResetFrameRef.current !== null) {
+        window.cancelAnimationFrame(carouselResetFrameRef.current);
+      }
+    },
+    [],
+  );
+
+  const handleFeatureOpen = (featureKey: string) => {
+    if (featureKey === "script") {
+      (onOpenScriptReview ?? onOpenGenerate)();
+      return;
+    }
+    if (featureKey === "token") {
+      (onOpenTokenMonitor ?? onOpenGenerate)();
+      return;
+    }
+    if (featureKey === "ecommerce") {
+      onOpenEcommerce();
+      return;
+    }
+    onOpenGenerate();
+  };
+
+  return (
+    <>
+      {!splashDismissed && (
+        <WelcomeSplash
+          onEnter={() => {
+            sessionStorage.setItem("omniai:splash-seen", "1");
+            setSplashDismissed(true);
+          }}
+        />
+      )}
+    <section className="omni-home page-motion">
+      {splashDismissed && (
+      <video
+        className="omni-home__bg-video"
+        src={HOME_BACKGROUND_VIDEO}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        aria-hidden="true"
+      />
+      )}
+      <div className="omni-home__scrim" aria-hidden="true" />
+      <div className="omni-home__shell">
+        <section className="omni-home__hero" aria-label="OmniAI 首页">
+          <div className="omni-home__copy">
+            <h1>OmniAI 创作中心</h1>
+            <p>从灵感、生成、画布到商业素材，所有创作入口保持在一个安静的暗绿工作台里。</p>
+          </div>
+
+          <div className={`omni-home__carousel${carouselIsResetting ? " is-resetting" : ""}`} aria-label="创作案例轮播">
+            <div className="omni-home__carousel-stage">
+              <div className="omni-home__carousel-deck">
+                {carouselSlotOffsets.map((slotOffset) => {
+                  const itemIndex = getPositiveModulo(activeSlideIndex + slotOffset, HOME_CAROUSEL_IMAGES.length);
+                  const slide = HOME_CAROUSEL_IMAGES[itemIndex];
+                  const visualOffset = slotOffset - (carouselMotion?.direction ?? 0) * (carouselMotion?.progress ?? 0);
+                  const isActive = visualOffset === 0;
+
+                  if (!slide) return null;
+
+                  return (
+                    <button
+                      key={slotOffset}
+                      type="button"
+                      className={`omni-home__carousel-card${isActive ? " is-active" : ""}`}
+                      style={getHomeCarouselCardStyle(visualOffset)}
+                      aria-label={`切换到${slide.title}`}
+                      aria-pressed={isActive}
+                      onClick={() => {
+                        if (!isActive) startCarouselShift(slotOffset);
+                      }}
+                    >
+                      <img src={slide.imageUrl} alt={slide.title} />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="omni-home__actions" aria-label="首页入口">
+            <button type="button" className="omni-home__entry" onClick={onOpenGenerate}>
+              <PlusOutlined />
+              <span>新手</span>
+            </button>
+            <button type="button" className="omni-home__entry omni-home__entry--primary" onClick={onOpenGenerate}>
+              <PlayCircleOutlined />
+              <span>老手</span>
+            </button>
+            <button type="button" className="omni-home__entry" onClick={onOpenEcommerce}>
+              <ShoppingOutlined />
+              <span>电商</span>
+            </button>
+          </div>
+        </section>
+      </div>
+
+      <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" : ""}`}>
+            <div className="omni-home__feature-copy">
+              <span>
+                {feature.icon}
+                {feature.eyebrow}
+              </span>
+              <h2>{feature.title}</h2>
+              <p>{feature.description}</p>
+              <button type="button" onClick={() => handleFeatureOpen(feature.key)}>
+                {feature.actionLabel}
+                <ArrowRightOutlined />
+              </button>
+            </div>
+            <div className="omni-home__feature-visual" aria-hidden="true">
+              <img src={feature.imageUrl} alt="" />
+            </div>
+            <div className="omni-home__feature-stats" aria-hidden="true">
+              {feature.stats.map((item) => (
+                <span key={item}>{item}</span>
+              ))}
+            </div>
+          </section>
+        ))}
+
+        <section className="omni-home__experience" aria-label="点击体验">
+          <div className="omni-home__experience-copy">
+            <span>
+              <ThunderboltOutlined />
+              Click To Experience
+            </span>
+            <h2>一站进入 OmniAI</h2>
+            <p>选择入口，直接开始生成、评测、监控或电商作图。</p>
+          </div>
+          <div className="omni-home__experience-visual" aria-hidden="true">
+            <div className="omni-home__experience-line is-top" />
+            <div className="omni-home__experience-line is-bottom" />
+            <div className="omni-home__experience-routes">
+              {HOME_EXPERIENCE_POINTS.map((point) => (
+                <span key={point.label} className={`omni-home__experience-route is-${point.tone}`}>
+                  <b>{point.label}</b>
+                  <small>{point.meta}</small>
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className="omni-home__experience-actions">
+            <button type="button" className="is-primary" onClick={onOpenGenerate}>
+              <PlayCircleOutlined />
+              立即体验生成
+            </button>
+            <button type="button" onClick={onOpenEcommerce}>
+              <ShoppingOutlined />
+              体验电商生成
+            </button>
+          </div>
+        </section>
+      </main>
+    </section>
+    </>
+  );
+}
+
+export default HomePage;
diff --git a/src/features/home/WelcomeSplash.tsx b/src/features/home/WelcomeSplash.tsx
new file mode 100644
index 0000000..dc7c983
--- /dev/null
+++ b/src/features/home/WelcomeSplash.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface WelcomeSplashProps {
+  onEnter: () => void;
+}
+
+const MATRIX_CHARS =
+  "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
+
+export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef(0);
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [exiting, setExiting] = useState(false);
+
+  const handleEnter = useCallback(() => {
+    setExiting(true);
+    setTimeout(onEnter, 700);
+  }, [onEnter]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowWelcome(true), 6000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    canvas.width = width;
+    canvas.height = height;
+    const fontSize = width > 1200 ? 20 : width > 768 ? 18 : 14;
+    const columns = Math.floor(width / fontSize);
+    const drops: number[] = [];
+    for (let i = 0; i < columns; i++) {
+      drops[i] = Math.random() * -(height / fontSize);
+    }
+
+    function draw() {
+      ctx!.fillStyle = "rgba(0, 0, 0, 0.07)";
+      ctx!.fillRect(0, 0, width, height);
+      ctx!.font = `${fontSize}px "Courier New", monospace`;
+      ctx!.textAlign = "center";
+      for (let i = 0; i < drops.length; i++) {
+        const char = MATRIX_CHARS[Math.floor(Math.random() * MATRIX_CHARS.length)];
+        const intensity = Math.min(0.6 + (drops[i] / (height / fontSize)) * 0.4, 1);
+        const g = Math.floor(100 + 155 * intensity);
+        ctx!.fillStyle = `rgba(40, ${g}, 60, 0.9)`;
+        ctx!.shadowBlur = 6;
+        ctx!.shadowColor = "#0f0";
+        const x = i * fontSize + fontSize / 2;
+        const y = drops[i] * fontSize;
+        ctx!.fillText(char, x, y);
+        ctx!.shadowBlur = 0;
+        drops[i] += 0.7 + Math.random() * 1.4;
+        if (drops[i] * fontSize > height && Math.random() > 0.96) {
+          drops[i] = 0;
+        }
+      }
+    }
+
+    function animate() {
+      draw();
+      rafRef.current = requestAnimationFrame(animate);
+    }
+    animate();
+
+    function onResize() {
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas!.width = width;
+      canvas!.height = height;
+    }
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return (
+    <div className={`welcome-splash${exiting ? " is-exiting" : ""}`}>
+      <canvas ref={canvasRef} className="welcome-splash__canvas" />
+      <div className="welcome-splash__ambient" />
+      <div className="welcome-splash__hero">
+        <h1 className="welcome-splash__title">OmniAI</h1>
+        <p className="welcome-splash__subtitle">The future with OmniAI</p>
+        {showWelcome && (
+          <button
+            type="button"
+            className="welcome-splash__enter"
+            onClick={handleEnter}
+          >
+            欢迎进入未来
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/image-workbench/CameraViewport3D.tsx b/src/features/image-workbench/CameraViewport3D.tsx
new file mode 100644
index 0000000..8d01cab
--- /dev/null
+++ b/src/features/image-workbench/CameraViewport3D.tsx
@@ -0,0 +1,283 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface CameraViewport3DProps {
+  horizontal: number;
+  vertical: number;
+  roll: number;
+  zoom: number;
+  onOrbit: (horizontal: number, vertical: number) => void;
+  onZoom: (zoom: number) => void;
+  onReset: () => void;
+  referenceImage?: string | null;
+}
+
+interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+const DEG = Math.PI / 180;
+
+function rotateY(p: Vec3, angle: number): Vec3 {
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  return { x: p.x * c + p.z * s, y: p.y, z: -p.x * s + p.z * c };
+}
+
+function rotateX(p: Vec3, angle: number): Vec3 {
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  return { x: p.x, y: p.y * c - p.z * s, z: p.y * s + p.z * c };
+}
+
+function rotateZ(p: Vec3, angle: number): Vec3 {
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  return { x: p.x * c - p.y * s, y: p.x * s + p.y * c, z: p.z };
+}
+
+function project(p: Vec3, fov: number, w: number, h: number): { x: number; y: number; depth: number } | null {
+  if (p.z <= 0.1) return null;
+  const scale = fov / p.z;
+  return { x: w / 2 + p.x * scale, y: h / 2 - p.y * scale, depth: p.z };
+}
+
+function transformPoint(p: Vec3, azimuth: number, elevation: number, rollAngle: number, dist: number): Vec3 {
+  let pt = rotateY(p, -azimuth * DEG);
+  pt = rotateX(pt, elevation * DEG);
+  pt = rotateZ(pt, -rollAngle * DEG);
+  pt = { x: pt.x, y: pt.y, z: pt.z + dist };
+  return pt;
+}
+
+const HUMANOID: Vec3[][] = [
+  [{ x: 0, y: 1.7, z: 0 }, { x: 0, y: 1.5, z: 0 }],
+  [{ x: -0.15, y: 1.7, z: 0 }, { x: 0.15, y: 1.7, z: 0 }],
+  [{ x: 0, y: 1.5, z: 0 }, { x: 0, y: 0.9, z: 0 }],
+  [{ x: -0.25, y: 1.5, z: 0 }, { x: 0, y: 1.5, z: 0 }],
+  [{ x: 0, y: 1.5, z: 0 }, { x: 0.25, y: 1.5, z: 0 }],
+  [{ x: -0.25, y: 1.5, z: 0 }, { x: -0.3, y: 1.0, z: 0 }],
+  [{ x: 0.25, y: 1.5, z: 0 }, { x: 0.3, y: 1.0, z: 0 }],
+  [{ x: 0, y: 0.9, z: 0 }, { x: -0.15, y: 0, z: 0 }],
+  [{ x: 0, y: 0.9, z: 0 }, { x: 0.15, y: 0, z: 0 }],
+];
+
+function renderScene(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  azimuth: number,
+  elevation: number,
+  rollAngle: number,
+  focalLen: number,
+) {
+  const dist = 5.5 - (focalLen - 24) * 0.02;
+  const fov = w * 0.8;
+
+  ctx.clearRect(0, 0, w, h);
+
+  // Background gradient
+  const bg = ctx.createLinearGradient(0, 0, 0, h);
+  bg.addColorStop(0, "#1a1f2e");
+  bg.addColorStop(1, "#0d1117");
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, w, h);
+
+  // Ground grid
+  const gridLines: { p1: { x: number; y: number; depth: number }; p2: { x: number; y: number; depth: number }; alpha: number }[] = [];
+  const gridSize = 4;
+  const gridStep = 0.5;
+  for (let i = -gridSize; i <= gridSize; i += gridStep) {
+    const a = transformPoint({ x: i, y: 0, z: -gridSize }, azimuth, elevation, rollAngle, dist);
+    const b = transformPoint({ x: i, y: 0, z: gridSize }, azimuth, elevation, rollAngle, dist);
+    const pa = project(a, fov, w, h);
+    const pb = project(b, fov, w, h);
+    if (pa && pb) gridLines.push({ p1: pa, p2: pb, alpha: i === 0 ? 0.4 : 0.15 });
+
+    const c = transformPoint({ x: -gridSize, y: 0, z: i }, azimuth, elevation, rollAngle, dist);
+    const d = transformPoint({ x: gridSize, y: 0, z: i }, azimuth, elevation, rollAngle, dist);
+    const pc = project(c, fov, w, h);
+    const pd = project(d, fov, w, h);
+    if (pc && pd) gridLines.push({ p1: pc, p2: pd, alpha: i === 0 ? 0.4 : 0.15 });
+  }
+
+  for (const line of gridLines) {
+    ctx.beginPath();
+    ctx.moveTo(line.p1.x, line.p1.y);
+    ctx.lineTo(line.p2.x, line.p2.y);
+    ctx.strokeStyle = `rgba(45, 212, 191, ${line.alpha})`;
+    ctx.lineWidth = line.alpha > 0.3 ? 1.2 : 0.6;
+    ctx.stroke();
+  }
+
+  // Humanoid figure
+  for (const seg of HUMANOID) {
+    const a = transformPoint(seg[0], azimuth, elevation, rollAngle, dist);
+    const b = transformPoint(seg[1], azimuth, elevation, rollAngle, dist);
+    const pa = project(a, fov, w, h);
+    const pb = project(b, fov, w, h);
+    if (pa && pb) {
+      ctx.beginPath();
+      ctx.moveTo(pa.x, pa.y);
+      ctx.lineTo(pb.x, pb.y);
+      ctx.strokeStyle = "rgba(255, 255, 255, 0.85)";
+      ctx.lineWidth = 2.5;
+      ctx.lineCap = "round";
+      ctx.stroke();
+    }
+  }
+  // Head circle
+  const headCenter = transformPoint({ x: 0, y: 1.8, z: 0 }, azimuth, elevation, rollAngle, dist);
+  const headEdge = transformPoint({ x: 0.12, y: 1.8, z: 0 }, azimuth, elevation, rollAngle, dist);
+  const ph = project(headCenter, fov, w, h);
+  const pe = project(headEdge, fov, w, h);
+  if (ph && pe) {
+    const r = Math.hypot(pe.x - ph.x, pe.y - ph.y);
+    ctx.beginPath();
+    ctx.arc(ph.x, ph.y, r, 0, Math.PI * 2);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.85)";
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+  }
+
+  // Axis indicators (bottom-left)
+  const axisOrigin = { x: 44, y: h - 44 };
+  const axisLen = 28;
+  const axes: { dir: Vec3; color: string; label: string }[] = [
+    { dir: { x: 1, y: 0, z: 0 }, color: "#ef4444", label: "X" },
+    { dir: { x: 0, y: 1, z: 0 }, color: "#22c55e", label: "Y" },
+    { dir: { x: 0, y: 0, z: 1 }, color: "#3b82f6", label: "Z" },
+  ];
+  for (const axis of axes) {
+    let d = rotateY(axis.dir, -azimuth * DEG);
+    d = rotateX(d, elevation * DEG);
+    d = rotateZ(d, -rollAngle * DEG);
+    const ex = axisOrigin.x + d.x * axisLen;
+    const ey = axisOrigin.y - d.y * axisLen;
+    ctx.beginPath();
+    ctx.moveTo(axisOrigin.x, axisOrigin.y);
+    ctx.lineTo(ex, ey);
+    ctx.strokeStyle = axis.color;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.fillStyle = axis.color;
+    ctx.font = "bold 10px sans-serif";
+    ctx.fillText(axis.label, ex + 3, ey - 3);
+  }
+
+  // HUD info (top-left)
+  ctx.fillStyle = "rgba(255,255,255,0.6)";
+  ctx.font = "11px monospace";
+  ctx.fillText(`方位 ${azimuth.toFixed(0)}°  俯仰 ${elevation.toFixed(0)}°  倾斜 ${rollAngle.toFixed(0)}°`, 12, 20);
+  ctx.fillText(`焦距 ${focalLen}mm`, 12, 36);
+}
+
+export default function CameraViewport3D({
+  horizontal,
+  vertical,
+  roll,
+  zoom,
+  onOrbit,
+  onZoom,
+  onReset,
+  referenceImage,
+}: CameraViewport3DProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dragRef = useRef<{ startX: number; startY: number; startH: number; startV: number } | null>(null);
+  const rafRef = useRef(0);
+  const refImgRef = useRef<HTMLImageElement | null>(null);
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = rect.width * dpr;
+    const h = rect.height * dpr;
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    renderScene(ctx, rect.width, rect.height, horizontal, vertical, roll, zoom);
+
+    if (refImgRef.current && refImgRef.current.complete && refImgRef.current.naturalWidth) {
+      const img = refImgRef.current;
+      const thumbSize = 64;
+      const aspect = img.naturalWidth / img.naturalHeight;
+      const tw = aspect >= 1 ? thumbSize : thumbSize * aspect;
+      const th = aspect >= 1 ? thumbSize / aspect : thumbSize;
+      const tx = rect.width - tw - 10;
+      const ty = 10;
+      ctx.globalAlpha = 0.85;
+      ctx.drawImage(img, tx, ty, tw, th);
+      ctx.globalAlpha = 1;
+      ctx.strokeStyle = "rgba(45, 212, 191, 0.6)";
+      ctx.lineWidth = 1;
+      ctx.strokeRect(tx, ty, tw, th);
+    }
+  }, [horizontal, vertical, roll, zoom]);
+
+  useEffect(() => {
+    rafRef.current = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [draw]);
+
+  useEffect(() => {
+    if (!referenceImage) { refImgRef.current = null; return; }
+    const img = new Image();
+    img.src = referenceImage;
+    img.onload = () => { refImgRef.current = img; draw(); };
+    refImgRef.current = img;
+  }, [referenceImage, draw]);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.setPointerCapture(e.pointerId);
+    dragRef.current = { startX: e.clientX, startY: e.clientY, startH: horizontal, startV: vertical };
+  }, [horizontal, vertical]);
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    if (!dragRef.current) return;
+    const dx = e.clientX - dragRef.current.startX;
+    const dy = e.clientY - dragRef.current.startY;
+    const newH = Math.max(-180, Math.min(180, dragRef.current.startH - dx * 0.5));
+    const newV = Math.max(-85, Math.min(65, dragRef.current.startV + dy * 0.5));
+    onOrbit(newH, newV);
+  }, [onOrbit]);
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    const canvas = canvasRef.current;
+    if (canvas) canvas.releasePointerCapture(e.pointerId);
+    dragRef.current = null;
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? 4 : -4;
+    onZoom(Math.max(24, Math.min(100, zoom + delta)));
+  }, [zoom, onZoom]);
+
+  const handleDoubleClick = useCallback(() => {
+    onReset();
+  }, [onReset]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="camera-viewport-3d"
+      style={{ width: "100%", height: "100%", cursor: dragRef.current ? "grabbing" : "grab", touchAction: "none" }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onWheel={handleWheel}
+      onDoubleClick={handleDoubleClick}
+    />
+  );
+}
+
+
diff --git a/src/features/image-workbench/ImageWorkbenchPage.tsx b/src/features/image-workbench/ImageWorkbenchPage.tsx
new file mode 100644
index 0000000..8106e99
--- /dev/null
+++ b/src/features/image-workbench/ImageWorkbenchPage.tsx
@@ -0,0 +1,1309 @@
+import {
+  ArrowLeftOutlined,
+  CameraOutlined,
+  CheckCircleFilled,
+  ClearOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FileImageOutlined,
+  FontSizeOutlined,
+  HighlightOutlined,
+  LinkOutlined,
+  LoadingOutlined,
+  MinusOutlined,
+  PictureOutlined,
+  PlusOutlined,
+  InboxOutlined,
+  RightOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+  TableOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { waitForTask } from "../../api/taskSubscription";
+import { translateTaskError } from "../../utils/translateTaskError";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import { useCanvasDrawing } from "./useCanvasDrawing";
+import CameraViewport3D from "./CameraViewport3D";
+
+type WorkMode = "single" | "blend";
+type OutputSize = "9:16" | "16:9" | "4:3" | "3:4" | "1:1";
+type OutputCount = 1 | 2 | 3 | 4;
+
+const SIZE_TO_RATIO: Record<OutputSize, string> = {
+  "9:16": "9:16",
+  "16:9": "16:9",
+  "4:3": "4:3",
+  "3:4": "3:4",
+  "1:1": "1:1",
+};
+
+const cameraPresets = [
+  { name: "自定义", rotationX: 0, rotationY: 0, rotationZ: 0, shotScale: 5 },
+  { name: "正面平视", rotationX: 0, rotationY: 0, rotationZ: 0, shotScale: 5 },
+  { name: "正面俯拍", rotationX: -35, rotationY: 0, rotationZ: 0, shotScale: 4 },
+  { name: "正面仰拍", rotationX: 28, rotationY: 0, rotationZ: 0, shotScale: 6 },
+  { name: "左侧平视", rotationX: 0, rotationY: 90, rotationZ: 0, shotScale: 5 },
+  { name: "右侧平视", rotationX: 0, rotationY: -90, rotationZ: 0, shotScale: 5 },
+  { name: "正背面", rotationX: 0, rotationY: 180, rotationZ: 0, shotScale: 5 },
+  { name: "左肩越肩", rotationX: -5, rotationY: 35, rotationZ: 0, shotScale: 7 },
+  { name: "右肩越肩", rotationX: -5, rotationY: -35, rotationZ: 0, shotScale: 7 },
+  { name: "背身反打", rotationX: 2, rotationY: 180, rotationZ: 0, shotScale: 6 },
+  { name: "俯拍全景", rotationX: -55, rotationY: 20, rotationZ: 0, shotScale: 1 },
+  { name: "虫视角", rotationX: 65, rotationY: 0, rotationZ: 0, shotScale: 8 },
+  { name: "鸟瞰", rotationX: -85, rotationY: 0, rotationZ: 0, shotScale: 2 },
+  { name: "低斜近拍", rotationX: 4, rotationY: 78, rotationZ: 18, shotScale: 6 },
+  { name: "鱼眼贴脸", rotationX: 8, rotationY: 42, rotationZ: 0, shotScale: 2 },
+  { name: "英雄仰角", rotationX: 40, rotationY: -15, rotationZ: -8, shotScale: 7 },
+  { name: "戏剧肩角", rotationX: -50, rotationY: 45, rotationZ: 12, shotScale: 3 },
+];
+
+const CAMERA_EFFECT_PRESETS = [
+  { key: "dof", label: "浅景深", prompt: "浅景深，背景虚化，主体清晰突出" },
+  { key: "wide-angle", label: "广角畸变", prompt: "广角镜头畸变效果，边缘拉伸，空间感强" },
+  { key: "telephoto", label: "长焦压缩", prompt: "长焦镜头压缩感，前后景距离感缩小，画面扁平" },
+  { key: "motion-blur", label: "运动模糊", prompt: "运动模糊效果，速度感，动态拖影" },
+  { key: "handheld", label: "手持抖动", prompt: "手持摄影轻微晃动感，纪实风格，真实感" },
+  { key: "fisheye", label: "鱼眼", prompt: "鱼眼镜头效果，180度超广角，强烈桶形畸变" },
+  { key: "low-angle", label: "低机位", prompt: "低机位拍摄，从地面向上取景，增强高度感和力量感" },
+  { key: "high-angle", label: "高机位", prompt: "高机位俯拍，从上方取景，展示全貌和渺小感" },
+  { key: "aerial", label: "航拍感", prompt: "航拍视角，无人机空中俯瞰，大场景纵深感" },
+  { key: "cinematic", label: "电影感", prompt: "电影感色调，2.39:1宽银幕构图感觉，戏剧性光影" },
+  { key: "vintage", label: "复古胶片", prompt: "复古胶片质感，颗粒感，暖色调，怀旧氛围" },
+  { key: "hdr", label: "HDR", prompt: "HDR高动态范围，明暗细节丰富，色彩饱和" },
+] as const;
+
+function shotScaleToZoom(shotScale: number): number {
+  const map: Record<number, number> = { 1: 24, 2: 28, 3: 32, 4: 35, 5: 40, 6: 50, 7: 60, 8: 75, 9: 85, 10: 100 };
+  return map[Math.round(Math.max(1, Math.min(10, shotScale)))] || 40;
+}
+
+const cameraDirections = [
+  { key: "up", label: "↑" },
+  { key: "left", label: "←" },
+  { key: "center", label: "⌂" },
+  { key: "right", label: "→" },
+  { key: "down", label: "↓" },
+] as const;
+
+interface ImageWorkbenchPageProps {
+  initialTool?: WebImageWorkbenchTool;
+  onOpenMore?: () => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectView }: ImageWorkbenchPageProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const inpaintFileInputRef = useRef<HTMLInputElement>(null);
+  const cameraFileInputRef = useRef<HTMLInputElement>(null);
+  const [activeTool, setActiveTool] = useState<WebImageWorkbenchTool>(initialTool);
+  const [mode, setMode] = useState<WorkMode>("single");
+  const [imageUrlInput, setImageUrlInput] = useState("");
+  const [referenceImages, setReferenceImages] = useState<string[]>([]);
+  const [inpaintImage, setInpaintImage] = useState<string | null>(null);
+  const [inpaintUrlInput, setInpaintUrlInput] = useState("");
+  const [brushSize, setBrushSize] = useState(40);
+  const [isMaskEditing, setIsMaskEditing] = useState(false);
+  const [inpaintTool, setInpaintTool] = useState<"brush" | "eraser">("brush");
+  const [inpaintZoom, setInpaintZoom] = useState(1);
+  const [canvasInitCounter, setCanvasInitCounter] = useState(0);
+  const inpaintCanvasRef = useRef<HTMLCanvasElement>(null);
+  const [cameraImage, setCameraImage] = useState<string | null>(null);
+  const [cameraUrlInput, setCameraUrlInput] = useState("");
+  const [cameraPreset, setCameraPreset] = useState("自定义");
+  const [cameraDirection, setCameraDirection] = useState("center");
+  const [cameraHorizontal, setCameraHorizontal] = useState(0);
+  const [cameraVertical, setCameraVertical] = useState(0);
+  const [cameraRoll, setCameraRoll] = useState(0);
+  const [cameraZoom, setCameraZoom] = useState(40);
+  const [cameraPromptEnabled, setCameraPromptEnabled] = useState(true);
+  const [cameraPrompt, setCameraPrompt] = useState("");
+  const [cameraEffects, setCameraEffects] = useState<Set<string>>(new Set());
+  const [prompt, setPrompt] = useState("");
+  const [outputSize, setOutputSize] = useState<OutputSize>("1:1");
+  const [outputCount, setOutputCount] = useState<OutputCount>(1);
+  const [status, setStatus] = useState("上传参考图并输入提示词后开始");
+  const [generating, setGenerating] = useState(false);
+  const [generationProgress, setGenerationProgress] = useState(0);
+  const [resultImages, setResultImages] = useState<string[]>([]);
+  const [inpaintResultImages, setInpaintResultImages] = useState<string[]>([]);
+  const [cameraResultImages, setCameraResultImages] = useState<string[]>([]);
+  const [downloadingResultUrl, setDownloadingResultUrl] = useState<string | null>(null);
+  const [savingAssetResultUrl, setSavingAssetResultUrl] = useState<string | null>(null);
+  const [generationError, setGenerationError] = useState<string | null>(null);
+  const abortRef = useRef(false);
+  const taskIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    return () => {
+      abortRef.current = true;
+      if (taskIdRef.current) {
+        aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current = true;
+    if (taskIdRef.current) {
+      aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      taskIdRef.current = null;
+    }
+    setGenerating(false);
+    setGenerationProgress(0);
+    setStatus("已取消");
+  }, []);
+  const referenceImage = referenceImages[0] ?? null;
+
+  const {
+    imageSize: inpaintCanvasSize,
+    hasMask,
+    initCanvas: initInpaintCanvas,
+    startDrawing: maskStartDrawing,
+    draw: maskDraw,
+    stopDrawing: maskStopDrawing,
+    handleTouchStart: maskTouchStart,
+    handleTouchMove: maskTouchMove,
+    handleTouchEnd: maskTouchEnd,
+    clearMask,
+    exportMaskDataUrl,
+  } = useCanvasDrawing({ baseImage: inpaintImage, brushSize, activeTool: inpaintTool });
+
+  useEffect(() => {
+    if (!inpaintImage) return;
+    const timer = window.setTimeout(() => initInpaintCanvas(inpaintCanvasRef.current), 0);
+    return () => window.clearTimeout(timer);
+  }, [inpaintImage, initInpaintCanvas, canvasInitCounter]);
+
+  useEffect(() => {
+    setActiveTool(initialTool);
+  }, [initialTool]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    if (!files.length) return;
+
+    const selectedFiles = mode === "blend" ? files : files.slice(0, 1);
+    selectedFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result !== "string") return;
+        setReferenceImages((current) => (mode === "blend" ? [...current, reader.result as string] : [reader.result as string]));
+        setStatus(mode === "blend" ? `已追加 ${file.name}` : `已导入 ${file.name}`);
+      };
+      reader.readAsDataURL(file);
+    });
+    event.target.value = "";
+  };
+
+  const handleAddUrl = () => {
+    const nextUrl = imageUrlInput.trim();
+    if (!nextUrl) return;
+    setReferenceImages((current) => (mode === "blend" ? [...current, nextUrl] : [nextUrl]));
+    setImageUrlInput("");
+    setStatus("已添加 URL 参考图");
+  };
+
+  const handleRemoveReferenceImage = (index = 0) => {
+    setReferenceImages((current) => current.filter((_, imageIndex) => imageIndex !== index));
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setStatus("已删除参考图");
+  };
+
+  const handleInpaintFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") return;
+      setInpaintImage(reader.result);
+      setInpaintResultImages([]);
+      setIsMaskEditing(false);
+      setStatus(`已导入局部重绘素材 ${file.name}`);
+    };
+    reader.readAsDataURL(file);
+    event.target.value = "";
+  };
+
+  const handleInpaintDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("image/"));
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") return;
+      setInpaintImage(reader.result);
+      setInpaintResultImages([]);
+      setIsMaskEditing(false);
+      setStatus(`已导入局部重绘素材 ${file.name}`);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleAddInpaintUrl = () => {
+    const nextUrl = inpaintUrlInput.trim();
+    if (!nextUrl) return;
+    setInpaintImage(nextUrl);
+    setInpaintResultImages([]);
+    setIsMaskEditing(false);
+    setInpaintUrlInput("");
+    setStatus("已添加局部重绘素材 URL");
+  };
+
+  const handleRemoveInpaintImage = () => {
+    setInpaintImage(null);
+    setIsMaskEditing(false);
+    clearMask(inpaintCanvasRef.current);
+    if (inpaintFileInputRef.current) {
+      inpaintFileInputRef.current.value = "";
+    }
+    setStatus("已删除局部重绘素材");
+  };
+
+  const handleStartInpaint = async () => {
+    if (!inpaintImage) {
+      setStatus("请先上传原图再开始局部重绘");
+      return;
+    }
+    if (!hasMask) {
+      setStatus("请先编辑遮罩，涂抹需要重绘的区域");
+      return;
+    }
+    if (generating) return;
+
+    if (isMaskEditing) setIsMaskEditing(false);
+
+    abortRef.current = false;
+    setGenerating(true);
+    setGenerationProgress(0);
+    setGenerationError(null);
+    setResultImages([]);
+    setInpaintResultImages([]);
+    setCameraResultImages([]);
+    setStatus("正在上传素材...");
+    try {
+      const maskDataUrl = exportMaskDataUrl();
+      const imagesToUpload = maskDataUrl ? [inpaintImage, maskDataUrl] : [inpaintImage];
+      const refUrls = await uploadReferenceImages(imagesToUpload);
+      const ratio = SIZE_TO_RATIO[outputSize];
+      const model = "wan2.7-image";
+
+      setStatus("正在生成局部重绘...");
+      const { taskId } = await aiGenerationClient.createImageTask({
+        model,
+        prompt: prompt || "图1是原图，图2的绿色标记是需要重绘的区域，在图1的标记区域内生成与周围画面风格一致的新内容，光影融合自然，无拼接痕迹",
+        ratio,
+        referenceUrls: refUrls,
+      });
+      taskIdRef.current = taskId;
+
+      const tempUrl = await pollTaskUntilDone(taskId);
+      if (tempUrl) {
+        const durableUrl = await persistResultUrl(tempUrl);
+        setInpaintResultImages([durableUrl || tempUrl]);
+      }
+      setStatus(tempUrl ? "局部重绘完成" : "已取消");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "生成失败";
+      setGenerationError(msg);
+      setStatus(`局部重绘失败: ${msg}`);
+    } finally {
+      setGenerating(false);
+      setGenerationProgress(0);
+    }
+  };
+
+  const handleCameraFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") return;
+      setCameraImage(reader.result);
+      setStatus(`已导入镜头参考图 ${file.name}`);
+    };
+    reader.readAsDataURL(file);
+    event.target.value = "";
+  };
+
+  const handleAddCameraUrl = () => {
+    const nextUrl = cameraUrlInput.trim();
+    if (!nextUrl) return;
+    setCameraImage(nextUrl);
+    setCameraUrlInput("");
+    setStatus("已添加镜头参考图 URL");
+  };
+
+  const handleRemoveCameraImage = () => {
+    setCameraImage(null);
+    if (cameraFileInputRef.current) {
+      cameraFileInputRef.current.value = "";
+    }
+    setStatus("已删除镜头参考图");
+  };
+
+  const handleStartCamera = async () => {
+    if (!cameraImage) {
+      setStatus("请先导入参考图再构建镜头");
+      return;
+    }
+    if (generating) return;
+
+    abortRef.current = false;
+    setGenerating(true);
+    setGenerationProgress(0);
+    setGenerationError(null);
+    setCameraResultImages([]);
+    setStatus("正在上传镜头参考图...");
+
+    try {
+      const refUrls = await uploadReferenceImages([cameraImage]);
+      const model = "wan2.7-image-pro";
+      const cameraDesc = `镜头预设: ${cameraPreset}, 方向: ${cameraDirection}, 水平: ${cameraHorizontal}°, 垂直: ${cameraVertical}°, 倾斜: ${cameraRoll}°, 焦距: ${cameraZoom}mm`;
+      const effectsDesc = cameraEffects.size > 0
+        ? Array.from(cameraEffects).map((key) => CAMERA_EFFECT_PRESETS.find((e) => e.key === key)?.prompt).filter(Boolean).join("，")
+        : "";
+      const fullPrompt = cameraPromptEnabled && cameraPrompt.trim()
+        ? `${cameraDesc}${effectsDesc ? `。视觉效果: ${effectsDesc}` : ""}。${cameraPrompt}`
+        : `${cameraDesc}${effectsDesc ? `。视觉效果: ${effectsDesc}` : ""}。保持人物和场景一致，按照镜头参数重新构图。`;
+
+      setStatus("正在生成镜头画面...");
+      const { taskId } = await aiGenerationClient.createImageTask({
+        model,
+        prompt: fullPrompt,
+        ratio: "16:9",
+        referenceUrls: refUrls,
+      });
+      taskIdRef.current = taskId;
+
+      const tempUrl = await pollTaskUntilDone(taskId);
+      if (tempUrl) {
+        const durableUrl = await persistResultUrl(tempUrl);
+        setCameraResultImages([durableUrl || tempUrl]);
+      }
+      setStatus(tempUrl ? `镜头生成完成 · ${cameraPreset} · ${cameraZoom}mm` : "已取消");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "生成失败";
+      setGenerationError(msg);
+      setStatus(`镜头生成失败: ${msg}`);
+    } finally {
+      setGenerating(false);
+      setGenerationProgress(0);
+    }
+  };
+
+  const uploadReferenceImages = useCallback(async (images: string[]): Promise<string[]> => {
+    const urls: string[] = [];
+    for (const img of images) {
+      if (img.startsWith("data:")) {
+        const result = await aiGenerationClient.uploadAsset({ dataUrl: img, scope: "workbench-ref" });
+        urls.push(result.url);
+      } else {
+        urls.push(img);
+      }
+    }
+    return urls;
+  }, []);
+
+  const pollTaskUntilDone = useCallback(async (taskId: string): Promise<string | null> => {
+    return waitForTask(taskId, {
+      abortRef,
+      onProgress: (e) => setGenerationProgress(e.progress || 0),
+    });
+  }, []);
+
+  const persistResultUrl = useCallback(async (tempUrl: string | null): Promise<string | null> => {
+    if (!tempUrl) return null;
+    try {
+      const uploaded = await aiGenerationClient.uploadAssetByUrl({
+        sourceUrl: tempUrl,
+        name: `workbench-result-${Date.now()}`,
+        mimeType: "image/png",
+        scope: "workbench-result",
+      });
+      return uploaded.url || tempUrl;
+    } catch {
+      return tempUrl;
+    }
+  }, []);
+
+  const getResultBaseName = (index = 0) => {
+    const toolName = activeTool === "camera" ? "camera" : activeTool === "inpaint" ? "inpaint" : "image-workbench";
+    return `${toolName}-result-${index + 1}-${Date.now()}`;
+  };
+
+  const getResultTags = () => {
+    const toolName = activeTool === "camera" ? "镜头实验室" : activeTool === "inpaint" ? "局部重绘" : "图片工作台";
+    return ["工具盒", toolName, "生成图片"];
+  };
+
+  const handleDownloadResult = async (url: string, index = 0) => {
+    if (downloadingResultUrl) return;
+    setDownloadingResultUrl(url);
+    try {
+      const status = await saveToolResultToLocal({
+        url,
+        name: getResultBaseName(index),
+        type: "image",
+        isVideo: false,
+      });
+      setStatus(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "保存本地失败");
+    } finally {
+      setDownloadingResultUrl(null);
+    }
+  };
+
+  const handleAddResultToAssets = async (url: string, index = 0) => {
+    if (savingAssetResultUrl) return;
+    setSavingAssetResultUrl(url);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url,
+        name: getResultBaseName(index),
+        type: "image",
+        isVideo: false,
+        description: "从工具盒图片生成结果加入的素材。",
+        tags: getResultTags(),
+      });
+      setStatus(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setSavingAssetResultUrl(null);
+    }
+  };
+
+  const renderResultActions = (url: string, index = 0) => (
+    <div className="image-workbench-result-actions">
+      <button type="button" onClick={() => void handleDownloadResult(url, index)} disabled={downloadingResultUrl === url}>
+        <DownloadOutlined />
+        {downloadingResultUrl === url ? "保存中" : "保存本地"}
+      </button>
+      <button type="button" onClick={() => void handleAddResultToAssets(url, index)} disabled={savingAssetResultUrl === url}>
+        <InboxOutlined />
+        {savingAssetResultUrl === url ? "加入中" : "加入资产库"}
+      </button>
+    </div>
+  );
+
+  const handleGenerate = async () => {
+    if (!referenceImages.length && !prompt.trim()) {
+      setStatus("请先上传参考图或输入提示词");
+      return;
+    }
+    if (generating) return;
+
+    abortRef.current = false;
+    setGenerating(true);
+    setGenerationProgress(0);
+    setGenerationError(null);
+    setResultImages([]);
+    setStatus("正在上传参考图...");
+
+    try {
+      const refUrls = referenceImages.length ? await uploadReferenceImages(referenceImages) : undefined;
+      const ratio = SIZE_TO_RATIO[outputSize];
+      const model = "wan2.7-image";
+      const results: string[] = [];
+
+      for (let i = 0; i < outputCount; i++) {
+        if (abortRef.current) break;
+        setStatus(`正在生成第 ${i + 1}/${outputCount} 张...`);
+        setGenerationProgress(0);
+
+        const { taskId } = await aiGenerationClient.createImageTask({
+          model,
+          prompt: prompt || "按照参考图风格生成",
+          ratio,
+          referenceUrls: refUrls,
+        });
+        taskIdRef.current = taskId;
+
+        const tempUrl = await pollTaskUntilDone(taskId);
+        if (tempUrl) {
+          results.push(tempUrl);
+          setResultImages([...results]);
+          persistResultUrl(tempUrl).then((durableUrl) => {
+            if (durableUrl && durableUrl !== tempUrl) {
+              setResultImages((prev) => prev.map((u) => u === tempUrl ? durableUrl : u));
+            }
+          });
+        }
+      }
+
+      setResultImages(results);
+      setStatus(results.length ? `生成完成，共 ${results.length} 张` : "生成已取消");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "生成失败";
+      setGenerationError(msg);
+      setStatus(`生成失败: ${msg}`);
+    } finally {
+      setGenerating(false);
+      setGenerationProgress(0);
+    }
+  };
+
+  const handleClear = () => {
+    handleCancel();
+    setReferenceImages([]);
+    setPrompt("");
+    setImageUrlInput("");
+    setOutputSize("1:1");
+    setOutputCount(1);
+    setMode("single");
+    setGenerating(false);
+    setGenerationProgress(0);
+    setResultImages([]);
+    setInpaintResultImages([]);
+    setCameraResultImages([]);
+    setGenerationError(null);
+    setStatus("上传参考图并输入提示词后开始");
+  };
+  const activeToolTitle = activeTool === "inpaint" ? "局部重绘" : activeTool === "camera" ? "镜头实验室" : "图片工作台";
+
+  return (
+    <section className="image-workbench-page image-workbench-page--image-tool">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="图片工具">
+          <button type="button" className={activeTool === "workbench" ? "is-active" : ""} onClick={() => setActiveTool("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" className={activeTool === "inpaint" ? "is-active" : ""} onClick={() => setActiveTool("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" className={activeTool === "camera" ? "is-active" : ""} onClick={() => setActiveTool("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" onClick={() => onSelectView?.("characterMix")}>
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <div className="image-workbench-subbar__heading">
+          <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+            <ArrowLeftOutlined />
+          </button>
+          <strong className="image-workbench-subbar__title">{activeToolTitle}</strong>
+        </div>
+        {activeTool === "workbench" ? (
+          <div className="image-workbench-mode-tabs" role="tablist" aria-label="图片工作模式">
+            <button type="button" className={mode === "single" ? "is-active" : ""} onClick={() => setMode("single")}>
+              <PictureOutlined />
+              单图编辑
+            </button>
+            <button type="button" className={mode === "blend" ? "is-active" : ""} onClick={() => setMode("blend")}>
+              <TableOutlined />
+              多图融合
+            </button>
+          </div>
+        ) : activeTool === "camera" ? (
+          <div className="image-workbench-camera-summary" aria-label="镜头参数">
+            <strong>{cameraPreset === "自定义" ? "中景 / 正面" : cameraPreset}</strong>
+            <span>{cameraZoom}mm</span>
+          </div>
+        ) : null}
+        <button
+          type="button"
+          className={`image-workbench-icon-btn image-workbench-subbar__next${activeTool === "inpaint" ? " image-workbench-subbar__next--solo" : ""}`}
+          aria-label="下一项"
+        >
+          <RightOutlined />
+        </button>
+      </div>
+
+      {activeTool === "inpaint" ? (
+        <main className="image-workbench-layout image-workbench-layout--inpaint">
+          <aside className="image-workbench-panel image-workbench-panel--left">
+            <section className="image-workbench-control-card">
+              <div className="image-workbench-section-title">
+                <h3>素材</h3>
+                <span>{inpaintImage ? "待编辑" : "待上传"}</span>
+              </div>
+              <input
+                ref={inpaintFileInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp"
+                onChange={handleInpaintFileChange}
+              />
+              <div className="image-workbench-upload-shell">
+                <button type="button" className="image-workbench-upload" onClick={() => inpaintFileInputRef.current?.click()}>
+                  {inpaintImage ? <img src={inpaintImage} alt="" /> : <FileImageOutlined />}
+                  <strong>{inpaintImage ? "更换原图" : "选择图片"}</strong>
+                  <span>PNG / JPG / WebP</span>
+                </button>
+                {inpaintImage ? (
+                  <button
+                    type="button"
+                    className="image-workbench-upload-remove"
+                    aria-label="删除局部重绘素材"
+                    onClick={handleRemoveInpaintImage}
+                  >
+                    ×
+                  </button>
+                ) : null}
+              </div>
+              <div className="image-workbench-url-row">
+                <label>
+                  <LinkOutlined />
+                  <input
+                    value={inpaintUrlInput}
+                    placeholder="粘贴图片 URL"
+                    onChange={(event) => setInpaintUrlInput(event.target.value)}
+                  />
+                </label>
+                <button type="button" onClick={handleAddInpaintUrl}>添加</button>
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-brush-card">
+              <h3>笔刷</h3>
+              <label className="image-workbench-range">
+                <span>大小</span>
+                <input
+                  type="range"
+                  min="8"
+                  max="96"
+                  step="2"
+                  value={brushSize}
+                  onChange={(event) => setBrushSize(Number(event.target.value))}
+                />
+                <em>{brushSize}px</em>
+              </label>
+            </section>
+
+            <section className="image-workbench-control-card">
+              <h3>参数</h3>
+              <span className="image-workbench-field-label">输出分辨率</span>
+              <div className="image-workbench-segmented">
+                {(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
+                  <button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
+                    {s}
+                  </button>
+                ))}
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card">
+              <h3>提示词</h3>
+              <textarea
+                className="image-workbench-prompt"
+                placeholder="描述需要重绘的内容，例如：将背景替换为森林"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                rows={3}
+              />
+            </section>
+
+            <div className="image-workbench-actions">
+              <button type="button" className="image-workbench-primary" onClick={handleStartInpaint} disabled={generating}>
+                {generating && activeTool === "inpaint" ? <LoadingOutlined /> : <ScissorOutlined />}
+                {generating && activeTool === "inpaint" ? "重绘中..." : "开始重绘"}
+              </button>
+            </div>
+          </aside>
+
+          <section className="image-workbench-canvas image-workbench-canvas--inpaint" aria-label="局部重绘画布">
+            {generating && activeTool === "inpaint" ? (
+              <div className="image-workbench-generating">
+                <LoadingOutlined style={{ fontSize: 32 }} />
+                <strong>重绘中...</strong>
+                <div className="image-workbench-progress-bar">
+                  <div className="image-workbench-progress-fill" style={{ width: `${generationProgress}%` }} />
+                </div>
+                <span>{generationProgress}%</span>
+                <button type="button" className="image-workbench-cancel" onClick={handleCancel}>取消</button>
+              </div>
+            ) : inpaintResultImages.length && activeTool === "inpaint" ? (
+              <div className="image-workbench-inpaint-stage">
+                <img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "90%", maxHeight: "90%", borderRadius: 8, objectFit: "contain" }} />
+                <div className="image-workbench-inpaint-bottom-bar">
+                  <button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintResultImages([]); setIsMaskEditing(true); setInpaintTool("brush"); setCanvasInitCounter((c) => c + 1); }}>
+                    <HighlightOutlined /> 重新编辑遮罩
+                  </button>
+                  {renderResultActions(inpaintResultImages[0], 0)}
+                  {inpaintResultImages.length > 1 && (
+                    <span className="image-workbench-inpaint-zoom-controls">
+                      {inpaintResultImages.map((url, i) => (
+                        <a key={url} href={url} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: "var(--accent)" }}>
+                          结果{i + 1}
+                        </a>
+                      ))}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ) : inpaintImage ? (
+              <div
+                className="image-workbench-inpaint-stage"
+                onWheel={(e) => {
+                  setInpaintZoom((z) => Math.min(3, Math.max(0.5, z + (e.deltaY < 0 ? 0.1 : -0.1))));
+                }}
+              >
+                {isMaskEditing && (
+                  <div className="image-workbench-inpaint-toolbar">
+                    <button type="button" className={`image-workbench-inpaint-tool${inpaintTool === "brush" ? " is-active" : ""}`} onClick={() => setInpaintTool("brush")}>
+                      <HighlightOutlined /> 画笔
+                    </button>
+                    <button type="button" className={`image-workbench-inpaint-tool${inpaintTool === "eraser" ? " is-active" : ""}`} onClick={() => setInpaintTool("eraser")}>
+                      <EditOutlined /> 橡皮
+                    </button>
+                    <button type="button" className="image-workbench-inpaint-tool" onClick={() => clearMask(inpaintCanvasRef.current)}>
+                      <ClearOutlined /> 清除
+                    </button>
+                    <button type="button" className="image-workbench-inpaint-tool image-workbench-inpaint-tool--done" onClick={() => setIsMaskEditing(false)}>
+                      <CheckCircleFilled /> 完成
+                    </button>
+                  </div>
+                )}
+                <canvas
+                  ref={inpaintCanvasRef}
+                  className="image-workbench-inpaint-canvas"
+                  style={{
+                    width: (inpaintCanvasSize.width || 400) * inpaintZoom,
+                    height: (inpaintCanvasSize.height || 300) * inpaintZoom,
+                    cursor: isMaskEditing ? (inpaintTool === "eraser" ? "cell" : "crosshair") : "default",
+                  }}
+                  onMouseDown={isMaskEditing ? maskStartDrawing : undefined}
+                  onMouseMove={isMaskEditing ? maskDraw : undefined}
+                  onMouseUp={isMaskEditing ? maskStopDrawing : undefined}
+                  onMouseLeave={isMaskEditing ? maskStopDrawing : undefined}
+                  onTouchStart={isMaskEditing ? maskTouchStart : undefined}
+                  onTouchMove={isMaskEditing ? maskTouchMove : undefined}
+                  onTouchEnd={isMaskEditing ? maskTouchEnd : undefined}
+                />
+                <div className="image-workbench-inpaint-bottom-bar">
+                  {!isMaskEditing && (
+                    <button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintTool("brush"); setIsMaskEditing(true); }}>
+                      <HighlightOutlined /> {hasMask ? "重新编辑遮罩" : "编辑遮罩"}
+                    </button>
+                  )}
+                  <span className="image-workbench-inpaint-zoom-controls">
+                    <button type="button" onClick={() => setInpaintZoom((z) => Math.max(0.5, z - 0.2))}><MinusOutlined /></button>
+                    <span>{Math.round(inpaintZoom * 100)}%</span>
+                    <button type="button" onClick={() => setInpaintZoom((z) => Math.min(3, z + 0.2))}><PlusOutlined /></button>
+                  </span>
+                </div>
+              </div>
+            ) : (
+              <button
+                type="button"
+                className="image-workbench-empty image-workbench-empty--button"
+                onClick={() => inpaintFileInputRef.current?.click()}
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={handleInpaintDrop}
+              >
+                <FileImageOutlined />
+                <strong>拖拽或选择图片</strong>
+                <span>支持 PNG / JPG / WebP</span>
+              </button>
+            )}
+          </section>
+
+          <aside className="image-workbench-panel image-workbench-panel--right">
+            <section className="image-workbench-right-note">
+              <div className="image-workbench-section-title">
+                <h3>遮罩</h3>
+                <span>{isMaskEditing ? (inpaintTool === "eraser" ? "橡皮中" : "画笔中") : hasMask ? "已保存" : "待编辑"}</span>
+              </div>
+              <span>{inpaintImage ? (hasMask ? "遮罩区域已标记，可开始重绘。" : "点击画布上的「编辑遮罩」开始涂抹。") : "上传原图后可编辑遮罩"}</span>
+            </section>
+
+            <section className="image-workbench-right-note">
+              <div className="image-workbench-section-title">
+                <h3>结果</h3>
+                <span>{inpaintResultImages.length > 0 ? `${inpaintResultImages.length} 张` : "待生成"}</span>
+              </div>
+              {inpaintResultImages.length > 0 ? (
+                <div className="image-workbench-result-grid">
+                  {inpaintResultImages.map((url, i) => (
+                    <div key={url} className="image-workbench-result-card">
+                      <a href={url} target="_blank" rel="noopener noreferrer" className="image-workbench-result-thumb">
+                        <img src={url} alt={`重绘结果 ${i + 1}`} />
+                      </a>
+                      {renderResultActions(url, i)}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <span>重绘结果会显示在这里</span>
+              )}
+            </section>
+          </aside>
+        </main>
+      ) : 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">
+              <div className="image-workbench-section-title">
+                <h3>素材</h3>
+                <span>{cameraImage ? "已导入" : "待上传"}</span>
+              </div>
+              <input
+                ref={cameraFileInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp"
+                onChange={handleCameraFileChange}
+              />
+              <div className="image-workbench-upload-shell">
+                <button type="button" className="image-workbench-upload" onClick={() => cameraFileInputRef.current?.click()}>
+                  {cameraImage ? <img src={cameraImage} alt="" /> : <FileImageOutlined />}
+                  <strong>{cameraImage ? "更换参考图" : "导入参考图"}</strong>
+                  <span>PNG / JPG / WebP</span>
+                </button>
+                {cameraImage ? (
+                  <button
+                    type="button"
+                    className="image-workbench-upload-remove"
+                    aria-label="删除镜头参考图"
+                    onClick={handleRemoveCameraImage}
+                  >
+                    ×
+                  </button>
+                ) : null}
+              </div>
+              <div className="image-workbench-url-row">
+                <label>
+                  <LinkOutlined />
+                  <input
+                    value={cameraUrlInput}
+                    placeholder="粘贴图片 URL"
+                    onChange={(event) => setCameraUrlInput(event.target.value)}
+                  />
+                </label>
+                <button type="button" onClick={handleAddCameraUrl}>导入</button>
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-camera-presets">
+              <h3>预设</h3>
+              <div className="image-workbench-chip-grid">
+                {cameraPresets.map((preset) => (
+                  <button
+                    key={preset.name}
+                    type="button"
+                    className={cameraPreset === preset.name ? "is-active" : ""}
+                    onClick={() => {
+                      setCameraPreset(preset.name);
+                      if (preset.name !== "自定义") {
+                        setCameraVertical(preset.rotationX);
+                        setCameraHorizontal(preset.rotationY);
+                        setCameraRoll(preset.rotationZ);
+                        setCameraZoom(shotScaleToZoom(preset.shotScale));
+                      }
+                    }}
+                  >
+                    {preset.name}
+                  </button>
+                ))}
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-camera-direction">
+              <h3>方向</h3>
+              <div className="image-workbench-direction-pad">
+                {cameraDirections.map((direction) => (
+                  <button
+                    key={direction.key}
+                    type="button"
+                    className={cameraDirection === direction.key ? "is-active" : ""}
+                    onClick={() => {
+                      setCameraDirection(direction.key);
+                      setCameraPreset("自定义");
+                      const step = 15;
+                      if (direction.key === "up") setCameraVertical((v) => Math.min(45, v + step));
+                      else if (direction.key === "down") setCameraVertical((v) => Math.max(-45, v - step));
+                      else if (direction.key === "left") setCameraHorizontal((v) => Math.min(180, v + step));
+                      else if (direction.key === "right") setCameraHorizontal((v) => Math.max(-180, v - step));
+                      else { setCameraVertical(0); setCameraHorizontal(0); setCameraRoll(0); setCameraZoom(40); }
+                    }}
+                  >
+                    {direction.label}
+                  </button>
+                ))}
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-camera-fine">
+              <h3>微调</h3>
+              <label className="image-workbench-range">
+                <span>水平环绕</span>
+                <input
+                  type="range"
+                  min="-180"
+                  max="180"
+                  value={cameraHorizontal}
+                  onChange={(event) => { setCameraHorizontal(Number(event.target.value)); setCameraPreset("自定义"); }}
+                />
+                <em>{cameraHorizontal}°</em>
+              </label>
+              <label className="image-workbench-range">
+                <span>垂直俯仰</span>
+                <input
+                  type="range"
+                  min="-85"
+                  max="65"
+                  value={cameraVertical}
+                  onChange={(event) => { setCameraVertical(Number(event.target.value)); setCameraPreset("自定义"); }}
+                />
+                <em>{cameraVertical}°</em>
+              </label>
+              <label className="image-workbench-range">
+                <span>画面倾斜</span>
+                <input
+                  type="range"
+                  min="-30"
+                  max="30"
+                  value={cameraRoll}
+                  onChange={(event) => { setCameraRoll(Number(event.target.value)); setCameraPreset("自定义"); }}
+                />
+                <em>{cameraRoll}°</em>
+              </label>
+              <label className="image-workbench-range">
+                <span>景别缩放</span>
+                <input
+                  type="range"
+                  min="24"
+                  max="100"
+                  value={cameraZoom}
+                  onChange={(event) => { setCameraZoom(Number(event.target.value)); setCameraPreset("自定义"); }}
+                />
+                <em>{cameraZoom < 40 ? "广角" : cameraZoom > 70 ? "长焦" : "中景"}</em>
+              </label>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-camera-effects">
+              <div className="image-workbench-section-title">
+                <h3>视觉效果</h3>
+                <span style={{ fontSize: 11, color: "var(--fg-muted, #888)" }}>可多选</span>
+              </div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
+                {CAMERA_EFFECT_PRESETS.map((effect) => {
+                  const isActive = cameraEffects.has(effect.key);
+                  return (
+                    <button
+                      key={effect.key}
+                      type="button"
+                      className={`image-workbench-chip${isActive ? " is-active" : ""}`}
+                      style={{
+                        padding: "3px 8px",
+                        borderRadius: 999,
+                        fontSize: 11,
+                        border: `1px solid ${isActive ? "var(--accent, #2dd4bf)" : "var(--border-subtle, #333)"}`,
+                        background: isActive ? "rgba(45, 212, 191, 0.12)" : "transparent",
+                        color: isActive ? "var(--accent, #2dd4bf)" : "var(--fg-body, #eee)",
+                        cursor: "pointer",
+                        transition: "all 0.15s",
+                      }}
+                      onClick={() => {
+                        setCameraEffects((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(effect.key)) next.delete(effect.key);
+                          else next.add(effect.key);
+                          return next;
+                        });
+                        setCameraPreset("自定义");
+                      }}
+                    >
+                      {effect.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </section>
+
+            <section className="image-workbench-control-card image-workbench-camera-prompt">
+              <div className="image-workbench-section-title">
+                <h3>提示词</h3>
+                <button
+                  type="button"
+                  className={`image-workbench-toggle${cameraPromptEnabled ? " is-active" : ""}`}
+                  aria-label="启用提示词"
+                  onClick={() => setCameraPromptEnabled((current) => !current)}
+                />
+              </div>
+              <textarea
+                value={cameraPrompt}
+                disabled={!cameraPromptEnabled}
+                placeholder="可选：补充额外的镜头要求，如光线、氛围、运动感等"
+                onChange={(event) => setCameraPrompt(event.target.value)}
+              />
+            </section>
+
+            <div className="image-workbench-actions">
+              <button type="button" className="image-workbench-primary" onClick={handleStartCamera} disabled={generating}>
+                {generating && activeTool === "camera" ? <LoadingOutlined /> : <CameraOutlined />}
+                {generating && activeTool === "camera" ? "生成中..." : "生成"}
+              </button>
+            </div>
+          </aside>
+
+          <section className="image-workbench-canvas image-workbench-canvas--camera" aria-label="镜头实验室画布">
+            {generating && activeTool === "camera" ? (
+              <div className="image-workbench-generating">
+                <LoadingOutlined style={{ fontSize: 32 }} />
+                <strong>镜头生成中...</strong>
+                <div className="image-workbench-progress-bar">
+                  <div className="image-workbench-progress-fill" style={{ width: `${generationProgress}%` }} />
+                </div>
+                <span>{generationProgress}%</span>
+                <button type="button" className="image-workbench-cancel" onClick={handleCancel}>取消</button>
+              </div>
+            ) : cameraResultImages.length && activeTool === "camera" ? (
+              <div className="image-workbench-camera-stage">
+                <img src={cameraResultImages[0]} alt="镜头结果" />
+                <span>{cameraPreset} · {cameraZoom}mm</span>
+                {renderResultActions(cameraResultImages[0], 0)}
+              </div>
+            ) : (
+              <CameraViewport3D
+                horizontal={cameraHorizontal}
+                vertical={cameraVertical}
+                roll={cameraRoll}
+                zoom={cameraZoom}
+                onOrbit={(h, v) => { setCameraHorizontal(h); setCameraVertical(v); setCameraPreset("自定义"); }}
+                onZoom={(z) => { setCameraZoom(z); setCameraPreset("自定义"); }}
+                onReset={() => { setCameraHorizontal(0); setCameraVertical(0); setCameraRoll(0); setCameraZoom(40); setCameraPreset("正面平视"); }}
+                referenceImage={cameraImage}
+              />
+            )}
+          </section>
+        </main>
+      ) : (
+      <main className="image-workbench-layout">
+        <aside className="image-workbench-panel image-workbench-panel--left">
+          <section className="image-workbench-control-card image-workbench-mode-card">
+            <h3>模式</h3>
+            <div className="image-workbench-segmented">
+              <button type="button" className={mode === "single" ? "is-active" : ""} onClick={() => setMode("single")}>
+                <PictureOutlined />
+                单图
+              </button>
+              <button type="button" className={mode === "blend" ? "is-active" : ""} onClick={() => setMode("blend")}>
+                <TableOutlined />
+                融合
+              </button>
+            </div>
+          </section>
+
+          <section className="image-workbench-control-card">
+            <div className="image-workbench-section-title">
+              <h3>参考图</h3>
+              <span>{mode === "blend" ? `${referenceImages.length || 0} 张` : referenceImage ? "已导入" : "需1张"}</span>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              multiple={mode === "blend"}
+              onChange={handleFileChange}
+            />
+            {mode === "blend" ? (
+              <div className="image-workbench-reference-grid">
+                {referenceImages.map((image, index) => (
+                  <div className="image-workbench-reference-thumb" key={`${image}-${index}`}>
+                    <img src={image} alt={`参考图 ${index + 1}`} />
+                    <button
+                      type="button"
+                      className="image-workbench-upload-remove"
+                      aria-label={`删除参考图 ${index + 1}`}
+                      onClick={() => handleRemoveReferenceImage(index)}
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+                <button
+                  type="button"
+                  className="image-workbench-upload image-workbench-upload--tile"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <FileImageOutlined />
+                  <strong>{referenceImages.length ? "继续上传" : "导入参考图"}</strong>
+                  <span>PNG / JPG / WebP</span>
+                </button>
+              </div>
+            ) : (
+              <div className="image-workbench-upload-shell">
+                <button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
+                  {referenceImage ? <img src={referenceImage} alt="" /> : <FileImageOutlined />}
+                  <strong>{referenceImage ? "更换参考图" : "导入参考图"}</strong>
+                  <span>PNG / JPG / WebP</span>
+                </button>
+                {referenceImage ? (
+                  <button
+                    type="button"
+                    className="image-workbench-upload-remove"
+                    aria-label="删除参考图"
+                    onClick={() => handleRemoveReferenceImage(0)}
+                  >
+                    ×
+                  </button>
+                ) : null}
+              </div>
+            )}
+            <div className="image-workbench-url-row">
+              <label>
+                <LinkOutlined />
+                <input
+                  value={imageUrlInput}
+                  placeholder="粘贴图片 URL"
+                  onChange={(event) => setImageUrlInput(event.target.value)}
+                />
+              </label>
+              <button type="button" onClick={handleAddUrl}>添加</button>
+            </div>
+          </section>
+
+          <section className="image-workbench-control-card image-workbench-prompt">
+            <h3>提示词</h3>
+            <textarea
+              value={prompt}
+              placeholder="例如：改成米白色大衣，保留构图与人物特征。"
+              onChange={(event) => setPrompt(event.target.value)}
+            />
+          </section>
+
+          <div className="image-workbench-actions">
+            <button type="button" className="image-workbench-primary" onClick={handleGenerate} disabled={generating}>
+              {generating ? <LoadingOutlined /> : <ScissorOutlined />}
+              {generating ? "生成中..." : "开始生成"}
+            </button>
+            <button type="button" onClick={handleClear}>
+              <ClearOutlined />
+              清空工作区
+            </button>
+          </div>
+        </aside>
+
+        <section className="image-workbench-canvas" aria-label="图片预览区">
+          {generating ? (
+            <div className="image-workbench-generating">
+              <LoadingOutlined style={{ fontSize: 32 }} />
+              <strong>生成中...</strong>
+              <div className="image-workbench-progress-bar">
+                <div className="image-workbench-progress-fill" style={{ width: `${generationProgress}%` }} />
+              </div>
+              <span>{generationProgress}%</span>
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel}>
+                取消
+              </button>
+            </div>
+          ) : resultImages.length ? (
+            <div className="image-workbench-result-grid">
+              {resultImages.map((url, i) => (
+                <div key={url} className="image-workbench-result-card">
+                  <a href={url} target="_blank" rel="noopener noreferrer" className="image-workbench-result-item">
+                    <img src={url} alt={`生成结果 ${i + 1}`} />
+                  </a>
+                  {renderResultActions(url, i)}
+                </div>
+              ))}
+            </div>
+          ) : generationError ? (
+            <div className="image-workbench-empty image-workbench-empty--error">
+              <PictureOutlined />
+              <strong>生成失败</strong>
+              <span>{generationError}</span>
+            </div>
+          ) : mode === "blend" && referenceImages.length ? (
+            <div className="image-workbench-canvas-grid">
+              {referenceImages.map((image, index) => (
+                <img src={image} alt={`参考图预览 ${index + 1}`} key={`${image}-preview-${index}`} />
+              ))}
+            </div>
+          ) : referenceImage ? (
+            <img src={referenceImage} alt="参考图预览" />
+          ) : (
+            <div className="image-workbench-empty">
+              <PictureOutlined />
+              <strong>上传参考图后在此预览</strong>
+              <span>生成结果也会显示在这里</span>
+            </div>
+          )}
+        </section>
+
+        <aside className="image-workbench-panel image-workbench-panel--right">
+          <section className="image-workbench-control-card">
+            <h3>输出</h3>
+            <span className="image-workbench-field-label">尺寸</span>
+            <div className="image-workbench-segmented">
+              {(["9:16", "16:9", "4:3", "3:4", "1:1"] as OutputSize[]).map((s) => (
+                <button key={s} type="button" className={outputSize === s ? "is-active" : ""} onClick={() => setOutputSize(s)}>
+                  {s}
+                </button>
+              ))}
+            </div>
+            <div className="image-workbench-count">
+              <span>数量</span>
+              <div>
+                {([1, 2, 3, 4] as OutputCount[]).map((count) => (
+                  <button
+                    key={count}
+                    type="button"
+                    className={outputCount === count ? "is-active" : ""}
+                    onClick={() => setOutputCount(count)}
+                  >
+                    {count} 张
+                  </button>
+                ))}
+              </div>
+            </div>
+          </section>
+        </aside>
+      </main>
+      )}
+
+      <footer className="image-workbench-status">
+        <span>就绪</span>
+        <p>{status}</p>
+        <em>
+          <ColumnWidthOutlined />
+          {activeTool === "inpaint"
+            ? "局部重绘"
+            : activeTool === "camera"
+              ? `AZ ${cameraHorizontal} PT ${cameraVertical} ${cameraZoom}mm${cameraEffects.size ? ` + ${cameraEffects.size} 效果` : ""}`
+              : `${mode === "single" ? "单图" : "融合"} · ${outputSize}`}
+        </em>
+      </footer>
+    </section>
+  );
+}
+
+export default ImageWorkbenchPage;
diff --git a/src/features/image-workbench/useCanvasDrawing.ts b/src/features/image-workbench/useCanvasDrawing.ts
new file mode 100644
index 0000000..27086c4
--- /dev/null
+++ b/src/features/image-workbench/useCanvasDrawing.ts
@@ -0,0 +1,273 @@
+import { useCallback, useRef, useState } from "react";
+import type React from "react";
+
+type ToolType = "brush" | "eraser";
+
+interface UseCanvasDrawingOptions {
+  baseImage: string | null;
+  brushSize: number;
+  activeTool: ToolType;
+}
+
+const MASK_PREVIEW_COLOR = "rgba(129, 236, 255, 0.48)";
+const MASK_EXPORT_COLOR = "rgba(13, 148, 136, 0.88)";
+
+type CanvasPoint = { x: number; y: number };
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function drawMaskSegment(
+  context: CanvasRenderingContext2D,
+  from: CanvasPoint,
+  to: CanvasPoint,
+  lineWidth: number,
+  tool: ToolType,
+) {
+  context.save();
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.lineWidth = lineWidth;
+  context.globalCompositeOperation = tool === "brush" ? "source-over" : "destination-out";
+  context.strokeStyle = tool === "brush" ? MASK_EXPORT_COLOR : "#000000";
+  context.fillStyle = context.strokeStyle;
+  context.beginPath();
+  context.moveTo(from.x, from.y);
+  context.lineTo(to.x, to.y);
+  context.stroke();
+  context.beginPath();
+  context.arc(to.x, to.y, lineWidth / 2, 0, Math.PI * 2);
+  context.fill();
+  context.restore();
+}
+
+function getExportFeatherRadius(width: number, height: number): number {
+  const radius = Math.round(Math.min(width, height) * 0.004);
+  return clamp(radius, 2, 18);
+}
+
+function createExportMaskCanvas(
+  maskCanvas: HTMLCanvasElement,
+  width: number,
+  height: number,
+): HTMLCanvasElement | null {
+  const normalized = document.createElement("canvas");
+  normalized.width = width;
+  normalized.height = height;
+  const nCtx = normalized.getContext("2d");
+  if (!nCtx) return null;
+  nCtx.drawImage(maskCanvas, 0, 0, width, height);
+
+  const out = document.createElement("canvas");
+  out.width = width;
+  out.height = height;
+  const oCtx = out.getContext("2d");
+  if (!oCtx) return null;
+
+  oCtx.fillStyle = "#000000";
+  oCtx.fillRect(0, 0, width, height);
+  const feather = getExportFeatherRadius(width, height);
+  if (feather > 0) {
+    oCtx.save();
+    oCtx.filter = `blur(${feather}px)`;
+    oCtx.globalAlpha = 0.72;
+    oCtx.drawImage(normalized, 0, 0);
+    oCtx.restore();
+  }
+  oCtx.globalAlpha = 1;
+  oCtx.filter = "none";
+  oCtx.drawImage(normalized, 0, 0);
+  return out;
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("图片加载失败"));
+    img.src = src;
+  });
+}
+
+export function useCanvasDrawing({ baseImage, brushSize, activeTool }: UseCanvasDrawingOptions) {
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const [sourceSize, setSourceSize] = useState({ width: 0, height: 0 });
+  const [hasMask, setHasMask] = useState(false);
+  const [isDrawing, setIsDrawing] = useState(false);
+
+  const originalImgRef = useRef<HTMLImageElement | null>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const overlayRef = useRef<HTMLCanvasElement | null>(null);
+  const lastPointRef = useRef<CanvasPoint | null>(null);
+  const hasVisibleRef = useRef(false);
+  const loadTokenRef = useRef(0);
+  const metricsRef = useRef({ srcW: 0, srcH: 0, dispW: 0, dispH: 0 });
+
+  const ensureMaskCanvas = useCallback((w: number, h: number) => {
+    if (!maskCanvasRef.current) maskCanvasRef.current = document.createElement("canvas");
+    const c = maskCanvasRef.current;
+    if (c.width !== w) c.width = w;
+    if (c.height !== h) c.height = h;
+    return c;
+  }, []);
+
+  const renderComposite = useCallback((canvas: HTMLCanvasElement | null) => {
+    if (!canvas || !originalImgRef.current) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(originalImgRef.current, 0, 0, canvas.width, canvas.height);
+
+    const mask = maskCanvasRef.current;
+    if (!mask || !hasVisibleRef.current) return;
+
+    if (!overlayRef.current) overlayRef.current = document.createElement("canvas");
+    const ov = overlayRef.current;
+    if (ov.width !== canvas.width) ov.width = canvas.width;
+    if (ov.height !== canvas.height) ov.height = canvas.height;
+    const oCtx = ov.getContext("2d");
+    if (!oCtx) return;
+    oCtx.clearRect(0, 0, ov.width, ov.height);
+    oCtx.drawImage(mask, 0, 0, ov.width, ov.height);
+    oCtx.globalCompositeOperation = "source-in";
+    oCtx.fillStyle = MASK_PREVIEW_COLOR;
+    oCtx.fillRect(0, 0, ov.width, ov.height);
+    oCtx.globalCompositeOperation = "source-over";
+    ctx.drawImage(ov, 0, 0, canvas.width, canvas.height);
+  }, []);
+
+  const initCanvas = useCallback((canvas: HTMLCanvasElement | null) => {
+    if (!baseImage || !canvas) return;
+    const token = ++loadTokenRef.current;
+    loadImage(baseImage).then((img) => {
+      if (loadTokenRef.current !== token) return;
+      originalImgRef.current = img;
+      const srcW = img.naturalWidth || img.width;
+      const srcH = img.naturalHeight || img.height;
+      const maxW = 800, maxH = 500;
+      let dW = srcW, dH = srcH;
+      if (dW > maxW || dH > maxH) {
+        const r = Math.min(maxW / dW, maxH / dH);
+        dW = Math.round(dW * r);
+        dH = Math.round(dH * r);
+      }
+      metricsRef.current = { srcW, srcH, dispW: dW, dispH: dH };
+      setSourceSize({ width: srcW, height: srcH });
+      setImageSize({ width: dW, height: dH });
+      canvas.width = dW;
+      canvas.height = dH;
+      ensureMaskCanvas(srcW, srcH);
+      hasVisibleRef.current = false;
+      setHasMask(false);
+      renderComposite(canvas);
+    }).catch(() => {});
+  }, [baseImage, ensureMaskCanvas, renderComposite]);
+
+  const resolveMaskPoint = useCallback((canvas: HTMLCanvasElement, clientX: number, clientY: number) => {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+    const dispX = clamp((clientX - rect.left) * scaleX, 0, canvas.width);
+    const dispY = clamp((clientY - rect.top) * scaleY, 0, canvas.height);
+    const mask = maskCanvasRef.current;
+    const mScaleX = mask ? mask.width / Math.max(1, canvas.width) : 1;
+    const mScaleY = mask ? mask.height / Math.max(1, canvas.height) : 1;
+    return {
+      point: { x: dispX * mScaleX, y: dispY * mScaleY },
+      brushScale: Math.max(mScaleX, mScaleY),
+    };
+  }, []);
+
+  const paintAt = useCallback((canvas: HTMLCanvasElement, clientX: number, clientY: number) => {
+    const { srcW, srcH } = metricsRef.current;
+    const mask = ensureMaskCanvas(srcW, srcH);
+    const ctx = mask.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
+    const { point, brushScale } = resolveMaskPoint(canvas, clientX, clientY);
+    const prev = lastPointRef.current || point;
+    const naturalBrush = Math.max(1, brushSize * brushScale);
+    drawMaskSegment(ctx, prev, point, naturalBrush, activeTool);
+    if (activeTool === "brush") { hasVisibleRef.current = true; setHasMask(true); }
+    lastPointRef.current = point;
+    renderComposite(canvas);
+  }, [activeTool, brushSize, ensureMaskCanvas, renderComposite, resolveMaskPoint]);
+
+  const startDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    setIsDrawing(true);
+    paintAt(e.currentTarget, e.clientX, e.clientY);
+  }, [paintAt]);
+
+  const draw = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!isDrawing) return;
+    e.preventDefault();
+    paintAt(e.currentTarget, e.clientX, e.clientY);
+  }, [isDrawing, paintAt]);
+
+  const finishDrawing = useCallback((canvas: HTMLCanvasElement | null) => {
+    if (!isDrawing) { lastPointRef.current = null; setIsDrawing(false); return; }
+    setIsDrawing(false);
+    lastPointRef.current = null;
+    if (canvas) renderComposite(canvas);
+  }, [isDrawing, renderComposite]);
+
+  const stopDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    finishDrawing(e.currentTarget);
+  }, [finishDrawing]);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
+    if (e.touches.length !== 1) return;
+    e.preventDefault();
+    setIsDrawing(true);
+    paintAt(e.currentTarget, e.touches[0].clientX, e.touches[0].clientY);
+  }, [paintAt]);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
+    if (!isDrawing || e.touches.length !== 1) return;
+    e.preventDefault();
+    paintAt(e.currentTarget, e.touches[0].clientX, e.touches[0].clientY);
+  }, [isDrawing, paintAt]);
+
+  const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
+    finishDrawing(e.currentTarget);
+  }, [finishDrawing]);
+
+  const clearMask = useCallback((canvas: HTMLCanvasElement | null) => {
+    const mask = maskCanvasRef.current;
+    if (mask) {
+      const ctx = mask.getContext("2d");
+      if (ctx) ctx.clearRect(0, 0, mask.width, mask.height);
+    }
+    hasVisibleRef.current = false;
+    setHasMask(false);
+    lastPointRef.current = null;
+    if (canvas) renderComposite(canvas);
+  }, [renderComposite]);
+
+  const exportMaskDataUrl = useCallback((): string | null => {
+    const mask = maskCanvasRef.current;
+    if (!mask || !hasVisibleRef.current) return null;
+    const { srcW, srcH } = metricsRef.current;
+    const exportCanvas = createExportMaskCanvas(mask, srcW, srcH);
+    return (exportCanvas || mask).toDataURL("image/png");
+  }, []);
+
+  return {
+    imageSize,
+    sourceSize,
+    hasMask,
+    isDrawing,
+    initCanvas,
+    renderComposite,
+    startDrawing,
+    draw,
+    stopDrawing,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    clearMask,
+    exportMaskDataUrl,
+  };
+}
diff --git a/src/features/more/MorePage.tsx b/src/features/more/MorePage.tsx
new file mode 100644
index 0000000..62fb369
--- /dev/null
+++ b/src/features/more/MorePage.tsx
@@ -0,0 +1,271 @@
+import {
+  CameraOutlined,
+  ClockCircleOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DashboardOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  HighlightOutlined,
+  PictureOutlined,
+  ShoppingOutlined,
+  SwapOutlined,
+  TableOutlined,
+  ThunderboltOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+
+interface MorePageProps {
+  onSelectView?: (view: WebViewKey) => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+}
+
+type ToolCategory = "image" | "video" | "template";
+type FilterKey = "all" | ToolCategory | "upcoming";
+
+interface MoreTool {
+  id: string;
+  title: string;
+  text: string;
+  icon: ReactNode;
+  category: ToolCategory;
+  target?: WebViewKey;
+  imageTool?: WebImageWorkbenchTool;
+  ready: boolean;
+  badge?: string;
+  featured?: boolean;
+}
+
+const tools: MoreTool[] = [
+  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
+  { id: "inpaint", title: "局部重绘", text: "遮罩区域重新生成", icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
+  { id: "camera", title: "镜头实验室", text: "角度、焦段和机位控制", icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
+  { id: "upscale", title: "分辨率提升", text: "图片与视频高清超分", icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
+  { id: "watermarkRemoval", title: "去水印", text: "AI 智能去除图片水印和文字", icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
+  { id: "subtitleRemoval", title: "字幕去除", text: "AI 智能擦除视频字幕", icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
+  { id: "digitalHuman", title: "数字人", text: "参考人像与音频生成口播视频", icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
+  { id: "characterMix", title: "角色迁移", text: "人物图迁移到参考视频动作", icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
+  { id: "avatarConsole", title: "数字人控制台", text: "形象、播报、互动与接入配置", icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
+  { id: "ecommerce", title: "示例模板", text: "电商场景与最近项目", icon: <ShoppingOutlined />, category: "template", target: "ecommerceTemplates", ready: true },
+  { id: "grid", title: "多宫格", text: "9/25 宫格快速试拍", icon: <TableOutlined />, category: "template", ready: false, badge: "即将上线" },
+  { id: "refOrganize", title: "参考图整理", text: "素材进入资产库前的轻处理", icon: <PictureOutlined />, category: "template", ready: false, badge: "即将上线" },
+];
+
+interface FeaturedTool {
+  id: string;
+  title: string;
+  desc: string;
+  icon: ReactNode;
+  imageTool?: WebImageWorkbenchTool;
+  target?: WebViewKey;
+  category: ToolCategory;
+  gradient: string;
+}
+
+const featuredTools: FeaturedTool[] = [
+  {
+    id: "workbench",
+    title: "图片工作台",
+    desc: "融合、修复、局部增强 — 一站式图片创作",
+    icon: <EditOutlined />,
+    imageTool: "workbench",
+    category: "image",
+    gradient: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
+  },
+  {
+    id: "digitalHuman",
+    title: "数字人",
+    desc: "参考人像与音频，一键生成口播视频",
+    icon: <CustomerServiceOutlined />,
+    target: "digitalHuman",
+    category: "video",
+    gradient: "linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(6, 182, 212, 0.06))",
+  },
+];
+
+const categoryLabels: Record<ToolCategory, string> = {
+  image: "图像创作",
+  video: "视频生成",
+  template: "模板与素材",
+};
+
+const categoryIcons: Record<ToolCategory, ReactNode> = {
+  image: <EditOutlined />,
+  video: <VideoCameraOutlined />,
+  template: <ShoppingOutlined />,
+};
+
+const filters: { key: FilterKey; label: string }[] = [
+  { key: "all", label: "全部" },
+  { key: "image", label: "图像" },
+  { key: "video", label: "视频" },
+  { key: "template", label: "模板" },
+  { key: "upcoming", label: "即将上线" },
+];
+
+const RECENT_STORAGE_KEY = "omniai:more-recent-tools";
+const MAX_RECENT = 4;
+
+function getRecentToolIds(): string[] {
+  try {
+    const raw = localStorage.getItem(RECENT_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch { return []; }
+}
+
+function pushRecentToolId(id: string) {
+  const ids = getRecentToolIds().filter((x) => x !== id);
+  ids.unshift(id);
+  localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(ids.slice(0, MAX_RECENT)));
+}
+
+function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
+  const [filter, setFilter] = useState<FilterKey>("all");
+  const [recentIds, setRecentIds] = useState<string[]>(getRecentToolIds);
+
+  useEffect(() => {
+    setRecentIds(getRecentToolIds());
+  }, []);
+
+  const openTool = useCallback((tool: MoreTool) => {
+    if (!tool.ready) return;
+    pushRecentToolId(tool.id);
+    setRecentIds(getRecentToolIds());
+    if (tool.imageTool && onOpenImageTool) {
+      onOpenImageTool(tool.imageTool);
+      return;
+    }
+    if (tool.target && onSelectView) {
+      onSelectView(tool.target);
+    }
+  }, [onOpenImageTool, onSelectView]);
+
+  const filteredTools = tools.filter((t) => {
+    if (t.featured) return false;
+    if (filter === "all") return true;
+    if (filter === "upcoming") return !t.ready;
+    return t.category === filter;
+  });
+
+  const recentTools = recentIds
+    .map((id) => tools.find((t) => t.id === id))
+    .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
+
+  const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
+    if (!acc[t.category]) acc[t.category] = [];
+    acc[t.category].push(t);
+    return acc;
+  }, {} as Record<ToolCategory, MoreTool[]>);
+
+  return (
+    <div className="more-page-v2">
+      <header className="more-page-v2__header">
+        <h1>工具盒</h1>
+        <nav className="more-page-v2__filters">
+          {filters.map((f) => (
+            <button
+              key={f.key}
+              type="button"
+              className={filter === f.key ? "is-active" : ""}
+              onClick={() => setFilter(f.key)}
+            >
+              {f.label}
+            </button>
+          ))}
+        </nav>
+      </header>
+
+      <div className="more-page-v2__scroll">
+        {recentTools.length > 0 && filter === "all" && (
+          <section className="more-page-v2__section">
+            <h2 className="more-page-v2__section-title">
+              <ClockCircleOutlined /> 最近使用
+            </h2>
+            <div className="more-page-v2__recent-row">
+              {recentTools.map((tool) => (
+                <button
+                  key={tool.id}
+                  type="button"
+                  className="more-card more-card--recent"
+                  onClick={() => openTool(tool)}
+                >
+                  <span className="more-card__icon">{tool.icon}</span>
+                  <strong>{tool.title}</strong>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {filter === "all" && (
+          <section className="more-page-v2__section more-page-v2__featured">
+            <h2 className="more-page-v2__section-title">
+              <ThunderboltOutlined /> 核心工具
+            </h2>
+            <div className="more-page-v2__featured-grid">
+              {featuredTools.map((tool) => (
+                <button
+                  key={tool.id}
+                  type="button"
+                  className="more-card more-card--featured"
+                  style={{ "--card-gradient": tool.gradient } as React.CSSProperties}
+                  onClick={() => {
+                    pushRecentToolId(tool.id);
+                    setRecentIds(getRecentToolIds());
+                    if (tool.imageTool && onOpenImageTool) {
+                      onOpenImageTool(tool.imageTool);
+                      return;
+                    }
+                    if (tool.target && onSelectView) {
+                      onSelectView(tool.target);
+                    }
+                  }}
+                >
+                  <span className="more-card__featured-icon">{tool.icon}</span>
+                  <div className="more-card__featured-body">
+                    <strong>{tool.title}</strong>
+                    <span>{tool.desc}</span>
+                    <span className="more-card__cta">开始使用 →</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {(["image", "video", "template"] as ToolCategory[]).map((cat) => {
+          const group = groupedTools[cat];
+          if (!group || group.length === 0) return null;
+          return (
+            <section key={cat} className="more-page-v2__section">
+              <h2 className="more-page-v2__section-title">
+                {categoryIcons[cat]} {categoryLabels[cat]}
+              </h2>
+              <div className="more-page-v2__grid">
+                {group.map((tool) => (
+                  <button
+                    key={tool.id}
+                    type="button"
+                    className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
+                    onClick={() => openTool(tool)}
+                    disabled={!tool.ready}
+                  >
+                    <span className="more-card__icon">{tool.icon}</span>
+                    <strong>{tool.title}</strong>
+                    <span className="more-card__desc">{tool.text}</span>
+                    {tool.badge && <span className="more-card__badge">{tool.badge}</span>}
+                  </button>
+                ))}
+              </div>
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default MorePage;
diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx
new file mode 100644
index 0000000..9a06565
--- /dev/null
+++ b/src/features/profile/ProfilePage.tsx
@@ -0,0 +1,1026 @@
+import {
+  CameraOutlined,
+  CheckCircleFilled,
+  DeleteOutlined,
+  LockOutlined,
+  MailOutlined,
+  MobileOutlined,
+  PhoneOutlined,
+  PlusOutlined,
+  SafetyOutlined,
+  ShareAltOutlined,
+  UserOutlined,
+  WechatOutlined,
+} from "@ant-design/icons";
+import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { assetClient } from "../../api/assetClient";
+import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
+import { keyServerClient } from "../../api/keyServerClient";
+import { isServerRequestError } from "../../api/serverConnection";
+import type { WebAuthMode, WebGenerationPreviewTask, WebProjectSummary, WebUsageSummary, WebUserSession } from "../../types";
+import type { SavedAssetItem } from "../assets/localAssetStore";
+
+interface ProfilePageProps {
+  session: WebUserSession | null;
+  usage: WebUsageSummary;
+  projects: WebProjectSummary[];
+  tasks: WebGenerationPreviewTask[];
+  pendingActionLabel?: string | null;
+  onLogin: (username: string, password: string) => Promise<void>;
+  onRegister: (username: string, password: string, betaCode: string) => Promise<void>;
+  onAuthComplete?: (session: WebUserSession) => Promise<void>;
+  onSessionChange?: (session: WebUserSession) => void;
+  onLogout: () => void;
+  onOpenWorkbench: () => void;
+  onOpenCommunity: () => void;
+  onDeleteProject?: (project: WebProjectSummary) => void;
+}
+
+type AuthTab = "password" | "email" | "phone" | "wechat";
+type ProfilePanel = "works" | "projects" | "assets" | "community";
+type AccountPanel = "credits" | "tasks";
+
+const PROFILE_LOCAL_STORAGE_PREFIX = "omniai-web-profile-ui";
+const AUTH_LOGO_URL = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png";
+const AUTH_SHOWCASE_VIDEO_URL = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/test5.mp4";
+
+function profileStorageKey(userId: string | number | undefined, field: "avatar" | "bio" | "background"): string {
+  return `${PROFILE_LOCAL_STORAGE_PREFIX}:${userId ?? "guest"}:${field}`;
+}
+
+function readLocalProfileValue(userId: string | number | undefined, field: "avatar" | "bio" | "background"): string {
+  if (typeof window === "undefined") return "";
+  try {
+    return window.localStorage.getItem(profileStorageKey(userId, field)) || "";
+  } catch {
+    return "";
+  }
+}
+
+function writeLocalProfileValue(userId: string | number | undefined, field: "avatar" | "bio" | "background", value: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    const key = profileStorageKey(userId, field);
+    if (value) {
+      window.localStorage.setItem(key, value);
+    } else {
+      window.localStorage.removeItem(key);
+    }
+  } catch {
+    // Local decoration should never block the account page.
+  }
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("File read failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function formatProfileSyncError(error: unknown, fallback: string): string {
+  const raw = error instanceof Error ? error.message : String(error || "");
+  const message = raw.replace(/\s+/g, " ").trim();
+
+  if (!message) return fallback;
+
+  if (
+    /OSS PUT failed|UserDisable|AccessDenied|InvalidAccessKeyId|SignatureDoesNotMatch|<\?xml|<Error>/i.test(message)
+  ) {
+    return "对象存储服务拒绝上传，请检查服务器 OSS 账号或权限配置。本地预览已保留。";
+  }
+
+  if (/403|forbidden/i.test(message)) {
+    return "当前账号没有上传权限，请检查登录状态或服务器权限。本地预览已保留。";
+  }
+
+  if (/413|payload too large|too large/i.test(message)) {
+    return "文件过大，暂时无法上传。本地预览已保留。";
+  }
+
+  return `${fallback}：${message.slice(0, 90)}`;
+}
+
+function formatProfileLoadError(error: unknown, fallback: string): string {
+  const raw = error instanceof Error ? error.message : String(error || "");
+  const message = raw.replace(/\s+/g, " ").trim();
+
+  if (!message || /^<!doctype html|<html[\s>]|<head[\s>]|<body[\s>]|^<\?xml|<Error[\s>]/i.test(message)) {
+    return fallback;
+  }
+
+  if (isServerRequestError(error)) {
+    if (error.status === 401 || error.status === 403) return "登录状态或权限不足，请重新登录后再试。";
+    if (error.status === 404) return `${fallback}，服务端接口暂未开放或路径不存在。`;
+    if (error.status && error.status >= 500) return `${fallback}，服务器暂时异常。`;
+  }
+
+  if (/not found/i.test(message)) return `${fallback}，服务端接口暂未开放或路径不存在。`;
+  if (/forbidden|unauthorized/i.test(message)) return "登录状态或权限不足，请重新登录后再试。";
+
+  return `${fallback}：${message.slice(0, 90)}`;
+}
+
+function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>[number]): SavedAssetItem {
+  return {
+    ...asset,
+    project: asset.sourceProjectId || "服务器资产库",
+    version: "Server",
+    ratio: String(asset.metadata?.ratio || "1:1"),
+    tags: asset.tags?.length ? asset.tags : ["服务器素材"],
+    thumbClass: asset.imageUrl ? "is-uploaded" : "is-station",
+  };
+}
+
+function ProfilePage({
+  session,
+  usage,
+  projects,
+  tasks,
+  pendingActionLabel,
+  onLogin,
+  onRegister,
+  onAuthComplete,
+  onSessionChange,
+  onLogout,
+  onOpenWorkbench,
+  onOpenCommunity,
+  onDeleteProject,
+}: ProfilePageProps) {
+  const isLoggedIn = Boolean(session);
+  const userId = session?.user.id;
+  const displayName = session?.user.displayName || session?.user.username || "访客账号";
+  const avatarLabel = displayName.trim().slice(0, 1).toUpperCase() || "访";
+  const avatarInputRef = useRef<HTMLInputElement | null>(null);
+  const bannerInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [mode, setMode] = useState<WebAuthMode>("login");
+  const [authTab, setAuthTab] = useState<AuthTab>("password");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [betaCode, setBetaCode] = useState("");
+  const [phone, setPhone] = useState("");
+  const [smsCode, setSmsCode] = useState("");
+  const [notice, setNotice] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [smsCooldown, setSmsCooldown] = useState(0);
+  const [isSendingSms, setIsSendingSms] = useState(false);
+  const [wechatTicket, setWechatTicket] = useState<{ url?: string; state?: string; message?: string; configured?: boolean } | null>(null);
+  const [wechatStatus, setWechatStatus] = useState<string | null>(null);
+
+  const [activePanel, setActivePanel] = useState<ProfilePanel>("works");
+  const [accountPanel, setAccountPanel] = useState<AccountPanel>("credits");
+  const [savedAssets, setSavedAssets] = useState<SavedAssetItem[]>([]);
+  const [assetNotice, setAssetNotice] = useState<string | null>(null);
+  const [communityCases, setCommunityCases] = useState<ServerCommunityCase[]>([]);
+  const [communityNotice, setCommunityNotice] = useState<string | null>(null);
+  const [profileNotice, setProfileNotice] = useState<string | null>(null);
+  const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
+  const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
+  const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
+
+  const completedTasks = tasks.filter((task) => task.status === "completed");
+  const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
+  const totalBalance = usage.balanceCents + (session?.user.enterpriseBalanceCents || 0);
+  const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
+  const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
+  const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+
+  useEffect(() => {
+    setLocalAvatarUrl(session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
+    setProfileBio(session?.user.bio || readLocalProfileValue(userId, "bio"));
+    setBannerUrl(session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
+  }, [session?.user.avatarUrl, session?.user.backgroundUrl, session?.user.bio, userId]);
+
+  useEffect(() => {
+    if (!session) return;
+
+    setCommunityNotice(null);
+    setAssetNotice(null);
+    let cancelled = false;
+    void Promise.allSettled([assetClient.list(), communityClient.listMyCases()]).then((results) => {
+      if (cancelled) return;
+
+      const [assetResult, communityResult] = results;
+      if (assetResult.status === "fulfilled") {
+        setSavedAssets(assetResult.value.map(mapAssetToSavedItem));
+      } else {
+        setSavedAssets([]);
+        setAssetNotice(formatProfileLoadError(assetResult.reason, "资产记录暂时不可用"));
+      }
+
+      if (communityResult.status === "fulfilled") {
+        setCommunityCases(communityResult.value);
+      } else {
+        setCommunityCases([]);
+        setCommunityNotice(formatProfileLoadError(communityResult.reason, "社区记录暂时不可用"));
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [session]);
+
+  useEffect(() => {
+    if (!session || activePanel !== "assets") return;
+
+    setAssetNotice(null);
+    assetClient
+      .list()
+      .then((items) => setSavedAssets(items.map(mapAssetToSavedItem)))
+      .catch((error) => {
+        setSavedAssets([]);
+        setAssetNotice(formatProfileLoadError(error, "资产记录暂时不可用"));
+      });
+  }, [activePanel, session]);
+
+  useEffect(() => {
+    if (smsCooldown <= 0) return;
+    const timer = window.setInterval(() => {
+      setSmsCooldown((current) => Math.max(0, current - 1));
+    }, 1000);
+    return () => window.clearInterval(timer);
+  }, [smsCooldown]);
+
+  useEffect(() => {
+    if (authTab !== "wechat" || isLoggedIn) return;
+
+    let cancelled = false;
+    let pollTimer: number | undefined;
+
+    const startWechatLogin = async () => {
+      setWechatStatus("正在创建微信登录二维码...");
+      setWechatTicket(null);
+      try {
+        const ticket = await keyServerClient.getWechatLoginTicket();
+        if (cancelled) return;
+        setWechatTicket(ticket);
+        if (!ticket.configured || !ticket.url || !ticket.state) {
+          setWechatStatus(ticket.message || "微信登录暂未配置");
+          return;
+        }
+        setWechatStatus("请使用微信扫码登录");
+        pollTimer = window.setInterval(() => {
+          void keyServerClient
+            .getWechatLoginSession(ticket.state!)
+            .then(async (result) => {
+              if (cancelled) return;
+              if (result.status === "completed" && result.session) {
+                if (pollTimer) window.clearInterval(pollTimer);
+                setWechatStatus("微信登录成功，正在进入工作台...");
+                await onAuthComplete?.(result.session);
+              } else if (result.status !== "pending") {
+                if (pollTimer) window.clearInterval(pollTimer);
+                setWechatStatus(result.error || "微信登录已失效，请刷新二维码");
+              }
+            })
+            .catch((error) => {
+              if (!cancelled) setWechatStatus(error instanceof Error ? error.message : "微信登录状态查询失败");
+            });
+        }, 2000);
+      } catch (error) {
+        if (!cancelled) setWechatStatus(error instanceof Error ? error.message : "微信登录二维码创建失败");
+      }
+    };
+
+    void startWechatLogin();
+
+    return () => {
+      cancelled = true;
+      if (pollTimer) window.clearInterval(pollTimer);
+    };
+  }, [authTab, isLoggedIn, onAuthComplete]);
+
+  const handleSendSms = async () => {
+    if (smsCooldown > 0 || !phone.trim() || isSendingSms) return;
+    if (mode === "register" && !betaCode.trim()) {
+      setNotice("请输入企业邀请码 / 内测码后再获取验证码");
+      return;
+    }
+    setIsSendingSms(true);
+    setNotice(null);
+    try {
+      const result = await keyServerClient.sendSmsCode(phone, mode === "login" ? "login" : "register", betaCode);
+      setSmsCooldown(result.cooldownSeconds || 60);
+      setNotice("验证码已发送，请查收短信");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "验证码发送失败");
+    } finally {
+      setIsSendingSms(false);
+    }
+  };
+
+  const validateField = (field: string, value: string): string => {
+    switch (field) {
+      case "username":
+        if (!value.trim()) return "请输入用户名";
+        if (mode === "register" && value.trim().length < 2) return "用户名至少 2 个字符";
+        return "";
+      case "password":
+        if (!value) return "请输入密码";
+        if (mode === "register" && value.length < 6) return "密码至少 6 位";
+        return "";
+      case "email":
+        if (!value.trim()) return "请输入邮箱";
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "邮箱格式不正确";
+        return "";
+      case "phone":
+        if (!value.trim()) return "请输入手机号";
+        if (!/^1[3-9]\d{9}$/.test(value)) return "手机号格式不正确";
+        return "";
+      case "betaCode":
+        if (!value.trim()) return "请输入邀请码";
+        return "";
+      case "smsCode":
+        if (!value.trim()) return "请输入验证码";
+        if (value.length !== 6) return "验证码为 6 位数字";
+        return "";
+      default:
+        return "";
+    }
+  };
+
+  const handleFieldBlur = (field: string, value: string) => {
+    const error = validateField(field, value);
+    setFieldErrors((prev) => ({ ...prev, [field]: error }));
+  };
+
+  const clearFieldError = (field: string) => {
+    if (fieldErrors[field]) {
+      setFieldErrors((prev) => ({ ...prev, [field]: "" }));
+    }
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (isSubmitting || authTab === "wechat") return;
+
+    const errors: Record<string, string> = {};
+    if (mode === "register") {
+      const betaErr = validateField("betaCode", betaCode);
+      if (betaErr) errors.betaCode = betaErr;
+    }
+    if (authTab === "phone") {
+      const phoneErr = validateField("phone", phone);
+      if (phoneErr) errors.phone = phoneErr;
+      const smsErr = validateField("smsCode", smsCode);
+      if (smsErr) errors.smsCode = smsErr;
+      if (mode === "register") {
+        const pwErr = validateField("password", password);
+        if (pwErr) errors.password = pwErr;
+      }
+    } else if (authTab === "email") {
+      const emailErr = validateField("email", email);
+      if (emailErr) errors.email = emailErr;
+      const pwErr = validateField("password", password);
+      if (pwErr) errors.password = pwErr;
+    } else {
+      const userErr = validateField("username", username);
+      if (userErr) errors.username = userErr;
+      const pwErr = validateField("password", password);
+      if (pwErr) errors.password = pwErr;
+    }
+
+    if (Object.values(errors).some(Boolean)) {
+      setFieldErrors(errors);
+      return;
+    }
+
+    setIsSubmitting(true);
+    setNotice(null);
+
+    try {
+      if (authTab === "phone") {
+        const nextSession =
+          mode === "login"
+            ? await keyServerClient.loginPhone({ phone, code: smsCode })
+            : await keyServerClient.registerPhone({ phone, code: smsCode, password, betaCode });
+        await onAuthComplete?.(nextSession);
+      } else if (authTab === "email") {
+        const nextSession =
+          mode === "login"
+            ? await keyServerClient.loginEmail({ email, password })
+            : await keyServerClient.registerEmail({ email, password, username: username.trim() || undefined, betaCode });
+        await onAuthComplete?.(nextSession);
+      } else if (mode === "login") {
+        await onLogin(username.trim(), password);
+      } else {
+        await onRegister(username.trim(), password, betaCode);
+      }
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "操作失败，请稍后重试");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const updateProfileUser = (patch: Partial<WebUserSession["user"]>) => {
+    if (!session) return;
+    const nextUser = { ...session.user, ...patch };
+    const nextSession = keyServerClient.updateStoredSessionUser(nextUser) || { ...session, user: nextUser };
+    onSessionChange?.(nextSession);
+  };
+
+  const syncProfilePatch = async (patch: Parameters<typeof keyServerClient.updateProfile>[0]) => {
+    if (!session) return;
+    try {
+      const user = await keyServerClient.updateProfile(patch);
+      updateProfileUser(user);
+      setProfileNotice(null);
+    } catch (error) {
+      setProfileNotice(formatProfileSyncError(error, "个人资料同步失败"));
+    }
+  };
+
+  const handleAvatarUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file || !file.type.startsWith("image/")) return;
+
+    const dataUrl = await readFileAsDataUrl(file);
+    try {
+      const uploaded = await aiGenerationClient.uploadAsset({
+        dataUrl,
+        name: file.name,
+        mimeType: file.type,
+        scope: "profile-avatar",
+      });
+      const nextUrl = uploaded.url || dataUrl;
+      setLocalAvatarUrl(nextUrl);
+      writeLocalProfileValue(userId, "avatar", nextUrl);
+      updateProfileUser({ avatarUrl: nextUrl });
+      await syncProfilePatch({ avatarOssKey: uploaded.ossKey || null, avatarUrl: uploaded.url || nextUrl });
+    } catch (error) {
+      setLocalAvatarUrl(dataUrl);
+      writeLocalProfileValue(userId, "avatar", dataUrl);
+      updateProfileUser({ avatarUrl: dataUrl });
+      setProfileNotice(formatProfileSyncError(error, "头像上传失败，已先在本地预览"));
+    }
+  };
+
+  const handleBannerUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file || !file.type.startsWith("image/")) return;
+
+    const dataUrl = await readFileAsDataUrl(file);
+    try {
+      const uploaded = await aiGenerationClient.uploadAsset({
+        dataUrl,
+        name: file.name,
+        mimeType: file.type,
+        scope: "profile-background",
+      });
+      const nextUrl = uploaded.url || dataUrl;
+      setBannerUrl(nextUrl);
+      writeLocalProfileValue(userId, "background", nextUrl);
+      updateProfileUser({ backgroundUrl: nextUrl });
+      await syncProfilePatch({ backgroundUrl: nextUrl, profileBackgroundUrl: nextUrl });
+    } catch (error) {
+      setBannerUrl(dataUrl);
+      writeLocalProfileValue(userId, "background", dataUrl);
+      updateProfileUser({ backgroundUrl: dataUrl });
+      setProfileNotice(formatProfileSyncError(error, "背景上传失败，已先在本地预览"));
+    }
+  };
+
+  const handleBioBlur = () => {
+    const nextBio = profileBio.trim();
+    writeLocalProfileValue(userId, "bio", nextBio);
+    updateProfileUser({ bio: nextBio || null });
+    void syncProfilePatch({ bio: nextBio || null });
+  };
+
+  const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
+    <div className="profile-page__empty-state">
+      <p className="profile-page__empty-text">{text}</p>
+      <button type="button" className="profile-page__empty-btn" onClick={action}>
+        <PlusOutlined />
+        {actionLabel}
+      </button>
+    </div>
+  );
+
+  const renderActivePanel = () => {
+    if (activePanel === "works") {
+      return visibleWorks.length ? (
+        <div className="profile-page__list-grid motion-stagger">
+          {visibleWorks.map((task) => (
+            <article key={task.id} className="profile-page__list-card">
+              <div className="profile-page__list-card-head">
+                <strong>{task.title}</strong>
+                <span>{task.type}</span>
+              </div>
+              <p>{task.prompt}</p>
+              <div className="profile-page__list-card-meta">
+                <span>{task.status}</span>
+                <span>{task.createdAt}</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      ) : (
+        renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
+      );
+    }
+
+    if (activePanel === "projects") {
+      return projects.length ? (
+        <div className="profile-page__list-grid motion-stagger">
+          {projects.map((project) => (
+            <article key={project.id} className="profile-page__list-card">
+              <div className="profile-page__list-card-head">
+                <strong>{project.name}</strong>
+                <span>{project.updatedAt}</span>
+                {onDeleteProject ? (
+                  <button
+                    type="button"
+                    className="profile-page__delete-project"
+                    aria-label={`删除项目 ${project.name}`}
+                    onClick={() => onDeleteProject(project)}
+                  >
+                    <DeleteOutlined />
+                  </button>
+                ) : null}
+              </div>
+              <p>{project.description || "最近更新的项目"}</p>
+              <div className="profile-page__list-card-meta">
+                <span>{project.storyboardCount} 节点</span>
+                <span>{project.imageCount} 图 / {project.videoCount} 视频</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      ) : (
+        renderEmptyState("还没有同步到服务器的项目。", "进入工作台", onOpenWorkbench)
+      );
+    }
+
+    if (activePanel === "assets") {
+      return savedAssets.length ? (
+        <div className="profile-page__list-grid">
+          {savedAssets.map((asset) => (
+            <article key={asset.id} className="profile-page__list-card">
+              <div className="profile-page__list-card-head">
+                <strong>{asset.name}</strong>
+                <span>{asset.status}</span>
+              </div>
+              <p>{asset.description}</p>
+              <div className="profile-page__list-card-meta">
+                <span>{asset.type}</span>
+                <span>{asset.updatedAt}</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      ) : (
+        renderEmptyState(assetNotice || "服务器资产库暂无内容。", "去工作台生成", onOpenWorkbench)
+      );
+    }
+
+    return communityCases.length ? (
+      <div className="profile-page__review-list">
+        {communityCases.map((item) => (
+          <div key={item.id} className="profile-page__review-item">
+            {item.coverUrl ? <img src={item.coverUrl} alt="" /> : <span className="profile-page__review-thumb" />}
+            <div>
+              <strong>{item.title}</strong>
+              <span>
+                {item.status === "approved" ? "已通过" : item.status === "rejected" ? "未通过" : "审核中"}
+              </span>
+              <small>{item.copyCount} 次复用</small>
+            </div>
+          </div>
+        ))}
+      </div>
+    ) : (
+      renderEmptyState(communityNotice || "还没有发布到社区的内容。", "去社区发布", onOpenCommunity)
+    );
+  };
+
+  if (isLoggedIn) {
+    return (
+      <section className="profile-page profile-page--dashboard page-motion">
+        <input ref={avatarInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleAvatarUpload(event)} />
+        <input ref={bannerInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleBannerUpload(event)} />
+        <header
+          className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
+          style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
+        >
+          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
+            <CameraOutlined />
+            更换背景
+          </button>
+          <div className="profile-page__banner-overlay" />
+        </header>
+
+        <div className="profile-page__body">
+          <aside className="profile-page__sidebar">
+            <div className="profile-page__sidebar-head">
+              <div className="profile-page__avatar-ring">
+                {avatarUrl ? (
+                  <img className="profile-page__avatar" src={avatarUrl} alt="" />
+                ) : (
+                  <span className="profile-page__avatar">{avatarLabel}</span>
+                )}
+                <button type="button" className="profile-page__avatar-edit" onClick={() => avatarInputRef.current?.click()} aria-label="更换头像">
+                  <CameraOutlined />
+                </button>
+                <span className="profile-page__avatar-badge">
+                  <CheckCircleFilled />
+                </span>
+              </div>
+              <strong className="profile-page__username">{displayName}</strong>
+              <textarea
+                className="profile-page__bio"
+                value={profileBio}
+                onChange={(event) => setProfileBio(event.target.value)}
+                onBlur={handleBioBlur}
+                placeholder={displayedBio}
+                rows={2}
+                maxLength={80}
+              />
+              {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
+            </div>
+
+            <div className="profile-page__counts">
+              <div className="profile-page__count">
+                <strong>{projects.length}</strong>
+                <span>项目</span>
+              </div>
+              <div className="profile-page__count">
+                <strong>{completedTasks.length}</strong>
+                <span>作品</span>
+              </div>
+              <div className="profile-page__count">
+                <strong>{savedAssets.length}</strong>
+                <span>资产</span>
+              </div>
+            </div>
+
+            <button type="button" className="profile-page__share-btn">
+              <ShareAltOutlined />
+              {packageLabel}
+            </button>
+
+            <button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
+              进入工作台
+            </button>
+            <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
+              打开社区
+            </button>
+            <button type="button" className="profile-page__share-btn" onClick={onLogout}>
+              退出登录
+            </button>
+          </aside>
+
+          <main className="profile-page__main">
+            <div className="profile-page__main-tabs">
+              <button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
+                我的作品
+              </button>
+              <button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
+                我的项目
+              </button>
+              <button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
+                我的资产
+              </button>
+              <button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
+                社区发布
+              </button>
+            </div>
+
+            <div className="profile-page__section">
+              <span className="profile-page__section-label">
+                {activePanel === "works"
+                  ? "代表作"
+                  : activePanel === "projects"
+                    ? "服务器项目"
+                    : activePanel === "assets"
+                      ? "我的资产"
+                      : "社区审核"}
+              </span>
+              {renderActivePanel()}
+            </div>
+
+            <div className="profile-page__section">
+              <div className="profile-page__list-bar">
+                <div className="profile-page__list-tabs">
+                  <button
+                    type="button"
+                    className={accountPanel === "credits" ? "is-active" : ""}
+                    onClick={() => setAccountPanel("credits")}
+                  >
+                    积分 {(totalBalance / 100).toFixed(2)}
+                  </button>
+                  <button
+                    type="button"
+                    className={accountPanel === "tasks" ? "is-active" : ""}
+                    onClick={() => setAccountPanel("tasks")}
+                  >
+                    任务 {tasks.length}
+                  </button>
+                </div>
+              </div>
+              <div className="profile-page__upload-card profile-page__upload-card--meta">
+                {accountPanel === "credits" ? (
+                  <>
+                    <span>当前账号：{displayName}</span>
+                    <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
+                  </>
+                ) : (
+                  <>
+                    <span>任务总数：{tasks.length}</span>
+                    <span>已完成：{completedTasks.length}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="auth-page page-motion">
+      <div className="auth-page__showcase">
+        <div className="auth-page__video-wrap">
+          <video className="auth-page__video" autoPlay muted loop playsInline poster="">
+            <source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
+          </video>
+          <div className="auth-page__video-overlay">
+            <h1 className="auth-page__brand">OmniAI</h1>
+            <p className="auth-page__tagline">一句话，从创意到成片</p>
+            <div className="auth-page__features">
+              <span>AI 视频生成</span>
+              <span>AI 图片创作</span>
+              <span>AI 电商素材</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <aside className="auth-page__form-panel">
+        <div className="auth-page__form-inner">
+          <div className="auth-page__form-head">
+            <span className="auth-page__logo">
+              <img src={AUTH_LOGO_URL} alt="OmniAI" />
+            </span>
+            <h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
+            <p className="auth-page__subtitle">
+              {mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}
+            </p>
+          </div>
+
+          <div className="auth-page__mode-tabs">
+            <button
+              type="button"
+              className={mode === "login" ? "is-active" : ""}
+              onClick={() => {
+                setMode("login");
+                setNotice(null);
+                setFieldErrors({});
+              }}
+            >
+              登录
+            </button>
+            <button
+              type="button"
+              className={mode === "register" ? "is-active" : ""}
+              onClick={() => {
+                setMode("register");
+                setNotice(null);
+                setFieldErrors({});
+              }}
+            >
+              注册
+            </button>
+          </div>
+
+          <div className="auth-page__auth-tabs">
+            <button type="button" className={authTab === "password" ? "is-active" : ""} onClick={() => { setAuthTab("password"); setFieldErrors({}); }}>
+              <UserOutlined /> 账号密码
+            </button>
+            <button type="button" className={authTab === "email" ? "is-active" : ""} onClick={() => { setAuthTab("email"); setFieldErrors({}); }}>
+              <MailOutlined /> 邮箱
+            </button>
+            <button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
+              <MobileOutlined /> 手机验证码
+            </button>
+            <button type="button" className={authTab === "wechat" ? "is-active" : ""} onClick={() => { setAuthTab("wechat"); setFieldErrors({}); }}>
+              <WechatOutlined /> 微信
+            </button>
+          </div>
+
+          {pendingActionLabel ? (
+            <div className="auth-page__pending">
+              <span>登录后继续</span>
+              <strong>{pendingActionLabel}</strong>
+            </div>
+          ) : null}
+
+          <form className="auth-page__form" onSubmit={(event) => void handleSubmit(event)}>
+            {mode === "register" && authTab !== "wechat" ? (
+              <label className={`auth-page__field${fieldErrors.betaCode ? " auth-page__field--error" : ""}`}>
+                <span>
+                  <SafetyOutlined /> 企业邀请码 / 内测码
+                </span>
+                <input
+                  value={betaCode}
+                  onChange={(event) => { setBetaCode(event.target.value); clearFieldError("betaCode"); }}
+                  onBlur={() => handleFieldBlur("betaCode", betaCode)}
+                  placeholder="请输入企业邀请码或内测码"
+                  autoComplete="one-time-code"
+                />
+                {fieldErrors.betaCode ? <span className="auth-page__field-error">{fieldErrors.betaCode}</span> : null}
+              </label>
+            ) : null}
+
+            {authTab === "password" ? (
+              <>
+                <label className={`auth-page__field${fieldErrors.username ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <UserOutlined /> {mode === "register" ? "设置用户名" : "用户名"}
+                  </span>
+                  <input
+                    value={username}
+                    onChange={(event) => { setUsername(event.target.value); clearFieldError("username"); }}
+                    onBlur={() => handleFieldBlur("username", username)}
+                    placeholder="输入用户名或邮箱"
+                    autoComplete="username"
+                  />
+                  {fieldErrors.username ? <span className="auth-page__field-error">{fieldErrors.username}</span> : null}
+                </label>
+                <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <LockOutlined /> {mode === "register" ? "设置密码" : "密码"}
+                  </span>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }}
+                    onBlur={() => handleFieldBlur("password", password)}
+                    placeholder={mode === "register" ? "至少 8 位，含字母和数字" : "输入密码"}
+                    autoComplete={mode === "login" ? "current-password" : "new-password"}
+                  />
+                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                </label>
+                {mode === "login" ? (
+                  <div className="auth-page__forgot">
+                    <button type="button">忘记密码？</button>
+                  </div>
+                ) : null}
+              </>
+            ) : null}
+
+            {authTab === "email" ? (
+              <>
+                {mode === "register" ? (
+                  <label className="auth-page__field">
+                    <span>
+                      <UserOutlined /> 用户名
+                    </span>
+                    <input
+                      value={username}
+                      onChange={(event) => setUsername(event.target.value)}
+                      placeholder="可选，不填将自动生成"
+                      autoComplete="username"
+                    />
+                  </label>
+                ) : null}
+                <label className={`auth-page__field${fieldErrors.email ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <MailOutlined /> 邮箱
+                  </span>
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(event) => { setEmail(event.target.value); clearFieldError("email"); }}
+                    onBlur={() => handleFieldBlur("email", email)}
+                    placeholder="输入邮箱地址"
+                    autoComplete="email"
+                  />
+                  {fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
+                </label>
+                <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <LockOutlined /> {mode === "register" ? "设置密码" : "密码"}
+                  </span>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }}
+                    onBlur={() => handleFieldBlur("password", password)}
+                    placeholder={mode === "register" ? "至少 6 位" : "输入密码"}
+                    autoComplete={mode === "login" ? "current-password" : "new-password"}
+                  />
+                  {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                </label>
+              </>
+            ) : null}
+
+            {authTab === "phone" ? (
+              <>
+                <label className={`auth-page__field${fieldErrors.phone ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <PhoneOutlined /> 手机号
+                  </span>
+                  <div className="auth-page__phone-row">
+                    <span className="auth-page__phone-prefix">+86</span>
+                    <input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
+                  </div>
+                  {fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
+                </label>
+                <label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
+                  <span>
+                    <SafetyOutlined /> 验证码
+                  </span>
+                  <div className="auth-page__sms-row">
+                    <input value={smsCode} onChange={(event) => { setSmsCode(event.target.value); clearFieldError("smsCode"); }} onBlur={() => handleFieldBlur("smsCode", smsCode)} placeholder="输入 6 位验证码" maxLength={6} />
+                    <button
+                      type="button"
+                      className="auth-page__sms-btn"
+                      disabled={smsCooldown > 0 || !phone.trim() || isSendingSms || (mode === "register" && !betaCode.trim())}
+                      onClick={() => void handleSendSms()}
+                    >
+                      {isSendingSms ? "发送中" : smsCooldown > 0 ? `${smsCooldown}s` : "获取验证码"}
+                    </button>
+                  </div>
+                  {fieldErrors.smsCode ? <span className="auth-page__field-error">{fieldErrors.smsCode}</span> : null}
+                </label>
+                {mode === "register" ? (
+                  <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
+                    <span>
+                      <LockOutlined /> 设置密码
+                    </span>
+                    <input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
+                    {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
+                  </label>
+                ) : null}
+              </>
+            ) : null}
+
+            {authTab === "wechat" ? (
+              <div className="auth-page__wechat-qr">
+                <div className="auth-page__qr-placeholder">
+                  {wechatTicket?.url ? (
+                    <>
+                      <iframe className="auth-page__wechat-frame" title="微信扫码登录" src={wechatTicket.url} />
+                      <a className="auth-page__wechat-link" href={wechatTicket.url} target="_blank" rel="noreferrer">
+                        新窗口打开二维码
+                      </a>
+                    </>
+                  ) : (
+                    <>
+                      <WechatOutlined />
+                      <span>微信扫码登录</span>
+                      <p>{wechatStatus || "正在准备微信登录"}</p>
+                    </>
+                  )}
+                </div>
+                {wechatStatus ? <p className="auth-page__wechat-status">{wechatStatus}</p> : null}
+              </div>
+            ) : null}
+
+            {notice ? <p className="auth-page__notice">{notice}</p> : null}
+
+            {authTab !== "wechat" ? (
+              <button type="submit" className="auth-page__submit" disabled={isSubmitting}>
+                {isSubmitting ? "处理中..." : mode === "login" ? "登录" : "注册"}
+              </button>
+            ) : null}
+
+            <div className="auth-page__agreement">
+              <span>
+                {mode === "register" ? "注册即表示同意" : "登录即表示同意"}
+                <a href="#">《用户协议》</a>和<a href="#">《隐私政策》</a>
+              </span>
+            </div>
+
+            <div className="auth-page__divider">
+              <span>其他方式</span>
+            </div>
+
+            <div className="auth-page__social">
+              <button type="button" className="auth-page__social-btn" title="微信登录" onClick={() => setAuthTab("wechat")}>
+                <WechatOutlined />
+              </button>
+              <button type="button" className="auth-page__social-btn" title="手机号登录" onClick={() => setAuthTab("phone")}>
+                <MobileOutlined />
+              </button>
+            </div>
+          </form>
+        </div>
+      </aside>
+    </section>
+  );
+}
+
+export default ProfilePage;
diff --git a/src/features/provider-health/ProviderHealthPage.tsx b/src/features/provider-health/ProviderHealthPage.tsx
new file mode 100644
index 0000000..c382e3c
--- /dev/null
+++ b/src/features/provider-health/ProviderHealthPage.tsx
@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  ReloadOutlined,
+} from "@ant-design/icons";
+import { providerHealthClient, type ProviderHealthResponse } from "../../api/providerHealthClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebUserSession } from "../../types";
+
+interface ProviderHealthPageProps {
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+}
+
+const STATUS_ICON: Record<string, React.ReactNode> = {
+  healthy: <CheckCircleOutlined style={{ color: "#10b981" }} />,
+  arrears: <CloseCircleOutlined style={{ color: "#ef4444" }} />,
+  denied: <CloseCircleOutlined style={{ color: "#ef4444" }} />,
+  error: <ExclamationCircleOutlined style={{ color: "#f59e0b" }} />,
+  timeout: <ExclamationCircleOutlined style={{ color: "#f59e0b" }} />,
+  no_key: <ExclamationCircleOutlined style={{ color: "#f59e0b" }} />,
+  unknown: <ExclamationCircleOutlined style={{ color: "#9ca3af" }} />,
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  healthy: "正常",
+  arrears: "欠费",
+  denied: "权限拒绝",
+  error: "异常",
+  timeout: "超时",
+  no_key: "无密钥",
+  unknown: "未知",
+};
+
+export default function ProviderHealthPage({ session, onOpenLogin }: ProviderHealthPageProps) {
+  const isAdmin = session?.user?.role === "admin";
+  const [data, setData] = useState<ProviderHealthResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await providerHealthClient.getStatus();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "加载失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isAdmin) void load();
+  }, [isAdmin, load]);
+
+  if (!session) {
+    return (
+      <WorkspacePageShell title="服务商健康" fullWidth className="provider-health-page page-motion">
+        <section className="provider-health-access">
+          <p>请登录管理员账号后查看。</p>
+          <button type="button" onClick={onOpenLogin}>登录</button>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <WorkspacePageShell title="服务商健康" fullWidth className="provider-health-page page-motion">
+        <section className="provider-health-access">
+          <p>当前账号没有管理员权限。</p>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  return (
+    <WorkspacePageShell title="服务商健康" fullWidth className="provider-health-page page-motion">
+      <div className="provider-health-page__inner">
+        <section className="provider-health-toolbar">
+          <div>
+            <h2>服务商健康监控</h2>
+            <p>各 AI 服务商的健康状态、调用统计与密钥池负载。</p>
+          </div>
+          <button type="button" disabled={loading} onClick={() => void load()}>
+            <ReloadOutlined /> 刷新
+          </button>
+        </section>
+
+        {error ? <p className="provider-health-error">{error}</p> : null}
+
+        {/* Health status cards */}
+        <div className="provider-health-grid">
+          {data?.health ? Object.entries(data.health).map(([provider, entry]) => (
+            <div key={provider} className="provider-health-card">
+              <div className="provider-health-card__header">
+                {STATUS_ICON[entry.status] || STATUS_ICON.unknown}
+                <strong>{provider}</strong>
+                <span className={`provider-health-card__status provider-health-card__status--${entry.status}`}>
+                  {STATUS_LABEL[entry.status] || entry.status}
+                </span>
+              </div>
+              {entry.lastCheck ? (
+                <small className="provider-health-card__time">
+                  上次检查: {new Date(entry.lastCheck).toLocaleString("zh-CN")}
+                </small>
+              ) : null}
+              {entry.lastError ? (
+                <p className="provider-health-card__error">{entry.lastError}</p>
+              ) : null}
+            </div>
+          )) : null}
+        </div>
+
+        {/* Call stats table */}
+        {data?.callStats?.length ? (
+          <section className="provider-health-section">
+            <h3>最近 1h 调用统计</h3>
+            <table className="provider-health-table">
+              <thead>
+                <tr><th>服务商</th><th>模型</th><th>状态</th><th>调用数</th><th>平均耗时</th><th>总成本</th></tr>
+              </thead>
+              <tbody>
+                {data.callStats.map((row, i) => (
+                  <tr key={i}>
+                    <td>{row.provider}</td>
+                    <td>{row.model}</td>
+                    <td>{row.status}</td>
+                    <td>{row.count}</td>
+                    <td>{row.avg_ms ? `${Math.round(Number(row.avg_ms))}ms` : "-"}</td>
+                    <td>{row.total_cost ? `¥${Number(row.total_cost).toFixed(2)}` : "-"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </section>
+        ) : null}
+
+        {/* Key pool stats */}
+        {data?.keyStats?.length ? (
+          <section className="provider-health-section">
+            <h3>密钥池负载</h3>
+            <table className="provider-health-table">
+              <thead>
+                <tr><th>服务商</th><th>总密钥</th><th>活跃密钥</th><th>当前负载</th></tr>
+              </thead>
+              <tbody>
+                {data.keyStats.map((row, i) => (
+                  <tr key={i}>
+                    <td>{row.provider}</td>
+                    <td>{row.total_keys}</td>
+                    <td>{row.active_keys}</td>
+                    <td>{row.current_load}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </section>
+        ) : null}
+      </div>
+    </WorkspacePageShell>
+  );
+}
\ No newline at end of file
diff --git a/src/features/report/ReportPage.tsx b/src/features/report/ReportPage.tsx
new file mode 100644
index 0000000..0004248
--- /dev/null
+++ b/src/features/report/ReportPage.tsx
@@ -0,0 +1,177 @@
+import { CheckCircleOutlined, FlagOutlined, MailOutlined, PhoneOutlined } from "@ant-design/icons";
+import { useState, type FormEvent } from "react";
+import { reportClient, type ReportInput } from "../../api/reportClient";
+
+type SubmitState = "idle" | "loading" | "success" | "error";
+
+const REPORT_TYPES = [
+  { value: "spam", label: "垃圾内容" },
+  { value: "abuse", label: "滥用 / 骚扰" },
+  { value: "copyright", label: "侵权 / 版权" },
+  { value: "illegal", label: "违法违规" },
+  { value: "other", label: "其他" },
+];
+
+const TARGET_TYPES = [
+  { value: "project", label: "项目" },
+  { value: "community_post", label: "社区作品" },
+  { value: "user", label: "用户" },
+  { value: "comment", label: "评论" },
+  { value: "other", label: "其他" },
+];
+
+function ReportPage() {
+  const [reportType, setReportType] = useState("");
+  const [targetType, setTargetType] = useState("");
+  const [targetId, setTargetId] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [contactName, setContactName] = useState("");
+  const [contactEmail, setContactEmail] = useState("");
+  const [contactPhone, setContactPhone] = useState("");
+  const [submitState, setSubmitState] = useState<SubmitState>("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const canSubmit =
+    submitState !== "loading" && reportType !== "" && title.trim() !== "" && description.trim() !== "";
+
+  const resetForm = () => {
+    setReportType("");
+    setTargetType("");
+    setTargetId("");
+    setTitle("");
+    setDescription("");
+    setContactName("");
+    setContactEmail("");
+    setContactPhone("");
+    setSubmitState("idle");
+    setErrorMsg("");
+  };
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setSubmitState("loading");
+    setErrorMsg("");
+    try {
+      const input: ReportInput = {
+        reportType,
+        targetType: targetType || undefined,
+        targetId: targetId.trim() || undefined,
+        title: title.trim(),
+        description: description.trim(),
+        contactName: contactName.trim() || undefined,
+        contactEmail: contactEmail.trim() || undefined,
+        contactPhone: contactPhone.trim() || undefined,
+        pageUrl: window.location.href,
+      };
+      await reportClient.submit(input);
+      setSubmitState("success");
+    } catch (error: unknown) {
+      setErrorMsg(error instanceof Error ? error.message : "提交失败，请稍后重试");
+      setSubmitState("error");
+    }
+  };
+
+  return (
+    <section className="report-page page-motion">
+      <div className="report-page__inner">
+        <header className="report-hero">
+          <span className="report-hero__icon"><FlagOutlined /></span>
+          <div>
+            <h1>投诉举报</h1>
+            <p>提交后会同步到服务器举报工单，工作人员会在审核台中查看处理。</p>
+          </div>
+        </header>
+
+        <div className="report-contact-strip">
+          <span><MailOutlined /> {import.meta.env.VITE_REPORT_EMAIL || "support@omniai.com"}</span>
+          <span><PhoneOutlined /> {import.meta.env.VITE_REPORT_PHONE || "请在环境变量配置客服电话"}</span>
+          <span>{import.meta.env.VITE_ICP_RECORD || "ICP备案信息待配置"}</span>
+        </div>
+
+        {submitState === "success" ? (
+          <div className="report-success">
+            <CheckCircleOutlined />
+            <h2>提交成功</h2>
+            <p>感谢反馈，举报内容已进入服务器工单列表。</p>
+            <button type="button" onClick={resetForm}>继续举报</button>
+          </div>
+        ) : (
+          <form className="report-form" onSubmit={handleSubmit}>
+            <div className="report-form__grid">
+              <label>
+                举报类型 *
+                <select value={reportType} onChange={(event) => setReportType(event.target.value)}>
+                  <option value="">请选择</option>
+                  {REPORT_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
+                </select>
+              </label>
+              <label>
+                对象类型
+                <select value={targetType} onChange={(event) => setTargetType(event.target.value)}>
+                  <option value="">请选择</option>
+                  {TARGET_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
+                </select>
+              </label>
+              <label>
+                对象 ID
+                <input value={targetId} onChange={(event) => setTargetId(event.target.value)} placeholder="作品、项目或用户 ID" />
+              </label>
+            </div>
+
+            <label>
+              标题 *
+              <input
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                placeholder="简要描述问题"
+                maxLength={100}
+              />
+            </label>
+            <label>
+              详细说明 *
+              <textarea
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                placeholder="请说明举报原因、相关页面或证据线索"
+                maxLength={2000}
+              />
+            </label>
+
+            <div className="report-form__grid">
+              <label>
+                联系人
+                <input value={contactName} onChange={(event) => setContactName(event.target.value)} placeholder="可选" />
+              </label>
+              <label>
+                联系邮箱
+                <input
+                  type="email"
+                  value={contactEmail}
+                  onChange={(event) => setContactEmail(event.target.value)}
+                  placeholder="可选"
+                />
+              </label>
+              <label>
+                联系电话
+                <input value={contactPhone} onChange={(event) => setContactPhone(event.target.value)} placeholder="可选" />
+              </label>
+            </div>
+
+            {submitState === "error" ? <p className="report-form__error">{errorMsg}</p> : null}
+
+            <div className="report-form__actions">
+              <button type="submit" disabled={!canSubmit}>
+                {submitState === "loading" ? "提交中..." : "提交举报"}
+              </button>
+              <span>必填字段完整后才可提交。</span>
+            </div>
+          </form>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default ReportPage;
diff --git a/src/features/resolution-upscale/ResolutionUpscalePage.tsx b/src/features/resolution-upscale/ResolutionUpscalePage.tsx
new file mode 100644
index 0000000..0116b3f
--- /dev/null
+++ b/src/features/resolution-upscale/ResolutionUpscalePage.tsx
@@ -0,0 +1,573 @@
+import {
+  CameraOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FileImageOutlined,
+  FolderAddOutlined,
+  FontSizeOutlined,
+  LinkOutlined,
+  PictureOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+  ThunderboltOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { waitForTask } from "../../api/taskSubscription";
+import { translateTaskError } from "../../utils/translateTaskError";
+import { getServerBaseUrl, isServerRequestError } from "../../api/serverConnection";
+import { summarizeUrl, formatFileSize, fileToDataUrl, wait } from "../../utils/toolPageUtils";
+import TaskStatusBar from "../../components/TaskStatusBar";
+import BeforeAfterCompare from "../../components/BeforeAfterCompare";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+
+type UpscaleMode = "image" | "video";
+type ImageScale = "2x" | "4x";
+type VideoMinLen = 540 | 720;
+
+const videoStyles = [
+  { value: 0, label: "日式漫画", color: "#f9a8d4" },
+  { value: 1, label: "美式漫画", color: "#fbbf24" },
+  { value: 2, label: "清新漫画", color: "#86efac" },
+  { value: 3, label: "3D卡通", color: "#93c5fd" },
+  { value: 4, label: "国风卡通", color: "#fca5a5" },
+  { value: 5, label: "纸艺风格", color: "#d6d3d1" },
+  { value: 6, label: "简易插画", color: "#a5b4fc" },
+  { value: 7, label: "国风水墨", color: "#94a3b8" },
+];
+
+function formatCreateTaskError(error: unknown, taskMode: UpscaleMode): string {
+  if (isServerRequestError(error) && error.status === 404) {
+    const baseUrl = getServerBaseUrl() || window.location.origin;
+    const route = taskMode === "image" ? "/api/ai/image/super-resolve" : "/api/ai/video/super-resolve";
+    return `当前连接的服务端 ${baseUrl} 还没有部署 ${route} 接口，请更新并重启服务端后再试`;
+  }
+  return error instanceof Error ? error.message : "超分任务创建失败，请稍后重试";
+}
+
+interface ResolutionUpscalePageProps {
+  isAuthenticated?: boolean;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function ResolutionUpscalePage({
+  isAuthenticated = false,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: ResolutionUpscalePageProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pollRunRef = useRef(0);
+  const cancelRef = useRef(false);
+  const [mode, setMode] = useState<UpscaleMode>("image");
+  const [imageScale, setImageScale] = useState<ImageScale>("2x");
+  const [keepOriginalStyle, setKeepOriginalStyle] = useState(true);
+  const [videoStyle, setVideoStyle] = useState(0);
+  const [videoMinLen, setVideoMinLen] = useState<VideoMinLen>(540);
+  const [videoFps, setVideoFps] = useState(15);
+  const [useSR, setUseSR] = useState(true);
+  const [sourceName, setSourceName] = useState("");
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [sourceUrl, setSourceUrl] = useState("");
+  const [sourcePreview, setSourcePreview] = useState("");
+  const [resultPreview, setResultPreview] = useState("");
+  const [sourceDimensions, setSourceDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [videoViewMode, setVideoViewMode] = useState<"source" | "result">("source");
+  const [status, setStatus] = useState("上传素材并选择参数后点击开始超分");
+  const [activeTaskId, setActiveTaskId] = useState("");
+  const [taskProgress, setTaskProgress] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isSavingAsset, setIsSavingAsset] = useState(false);
+  const activeTaskIdRef = useRef(activeTaskId);
+  activeTaskIdRef.current = activeTaskId;
+
+  useEffect(() => {
+    return () => {
+      if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    };
+  }, [sourcePreview]);
+
+  useEffect(() => {
+    return () => {
+      if (resultPreview.startsWith("blob:")) URL.revokeObjectURL(resultPreview);
+    };
+  }, [resultPreview]);
+
+  useEffect(() => {
+    return () => {
+      pollRunRef.current += 1;
+      cancelRef.current = true;
+      if (activeTaskIdRef.current) {
+        aiGenerationClient.cancelTask(activeTaskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const clearSource = () => {
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName("");
+    setSourceFile(null);
+    setSourceUrl("");
+    setSourcePreview("");
+    setResultPreview("");
+    setSourceDimensions(null);
+    setVideoViewMode("source");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus("已清空素材");
+  };
+
+  const handleModeChange = (nextMode: UpscaleMode) => {
+    if (nextMode === mode) return;
+    clearSource();
+    setMode(nextMode);
+    setStatus(nextMode === "image" ? "已切换为图片超分，请上传图片素材" : "已切换为视频超分，请上传视频素材");
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName(file.name);
+    setSourceFile(file);
+    setSourceUrl("");
+    setSourcePreview(URL.createObjectURL(file));
+    setResultPreview("");
+    setSourceDimensions(null);
+    setVideoViewMode("source");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 ${file.name}`);
+    event.currentTarget.value = "";
+  };
+
+  const handleImportUrl = () => {
+    const normalizedUrl = sourceUrl.trim();
+    if (!/^https?:\/\//i.test(normalizedUrl)) {
+      setStatus("请输入可访问的 HTTP/HTTPS 素材 URL");
+      return;
+    }
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceFile(null);
+    setSourceName(summarizeUrl(normalizedUrl));
+    setSourcePreview(normalizedUrl);
+    setResultPreview("");
+    setVideoViewMode("source");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 URL：${summarizeUrl(normalizedUrl)}`);
+  };
+
+  const getSourceGenerationUrl = async () => {
+    if (!sourceFile) return sourcePreview;
+    setStatus(`正在上传 ${sourceFile.name}，${formatFileSize(sourceFile.size)}`);
+    const uploaded = await aiGenerationClient.uploadAsset({
+      dataUrl: await fileToDataUrl(sourceFile),
+      name: sourceFile.name,
+      mimeType: sourceFile.type || (mode === "image" ? "image/png" : "video/mp4"),
+    });
+    return uploaded.signedUrl || uploaded.url;
+  };
+
+  const waitForTaskResult = async (taskId: string, taskMode: UpscaleMode) => {
+    const runId = ++pollRunRef.current;
+    setActiveTaskId(taskId);
+    setTaskProgress(5);
+
+    await waitForTask(taskId, {
+      abortRef: cancelRef,
+      onProgress: (e) => {
+        if (pollRunRef.current !== runId) return;
+        const progress = Math.max(0, Math.min(100, Math.trunc(e.progress || 0)));
+        setTaskProgress(progress);
+        setStatus(`任务 ${taskId} ${e.status}，进度 ${progress}%`);
+        if (e.status === "completed" && e.resultUrl) {
+          setResultPreview(e.resultUrl);
+          setVideoViewMode("result");
+          setStatus(`${taskMode === "image" ? "图片" : "视频"}超分完成：${summarizeUrl(e.resultUrl)}`);
+          setTaskProgress(100);
+        }
+      },
+    });
+
+    if (cancelRef.current) throw new Error("已取消");
+    if (pollRunRef.current !== runId) throw new Error("当前任务已被新的超分任务替换");
+  };
+
+  const handleCancel = useCallback(() => {
+    cancelRef.current = true;
+    if (activeTaskId) {
+      aiGenerationClient.cancelTask(activeTaskId).catch(() => {});
+    }
+    setIsProcessing(false);
+    setStatus("已取消");
+  }, [activeTaskId]);
+
+  const handleDownload = async () => {
+    if (!resultPreview || isDownloading) return;
+    setIsDownloading(true);
+    try {
+      const isVideo = mode === "video";
+      const filenameBase = isVideo ? `upscaled-video-${Date.now()}` : `upscaled-image-${Date.now()}`;
+      await saveToolResultToLocal({
+        url: resultPreview,
+        name: filenameBase,
+        type: isVideo ? "video" : "image",
+        isVideo,
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "超分辨率", isVideo ? "生成视频" : "生成图片"],
+      });
+      setStatus("下载完成");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "下载失败");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleSaveToAssets = async () => {
+    if (!resultPreview || isSavingAsset) return;
+    setIsSavingAsset(true);
+    try {
+      const isVideo = mode === "video";
+      const status = await addToolResultToAssetLibrary({
+        url: resultPreview,
+        name: `upscaled-${isVideo ? "video" : "image"}-${Date.now()}.${isVideo ? "mp4" : "png"}`,
+        description: `工具盒${isVideo ? "视频" : "图片"}超分生成结果`,
+        type: isVideo ? "video" : "image",
+        isVideo,
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "超分辨率", isVideo ? "生成视频" : "生成图片"],
+      });
+      setStatus(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingAsset(false);
+    }
+  };
+
+  const handleStart = async () => {
+    if (!isAuthenticated) {
+      setStatus("请先登录后再创建超分任务");
+      return;
+    }
+    if (!sourcePreview) {
+      setStatus(mode === "image" ? "请先上传需要提升分辨率的图片" : "请先上传需要提升分辨率的视频");
+      return;
+    }
+    if (isProcessing) return;
+
+    setIsProcessing(true);
+    setResultPreview("");
+    setTaskProgress(0);
+    cancelRef.current = false;
+    try {
+      const generationUrl = await getSourceGenerationUrl();
+      setStatus(`素材已就绪：${summarizeUrl(generationUrl)}，正在提交任务`);
+
+      if (mode === "image") {
+        const result = await aiGenerationClient.createImageSuperResolveTask({
+          imageUrl: generationUrl,
+          scale: imageScale,
+        });
+        await waitForTaskResult(result.taskId, "image");
+      } else if (keepOriginalStyle) {
+        const result = await aiGenerationClient.createVideoSuperResolveTask({
+          videoUrl: generationUrl,
+        });
+        await waitForTaskResult(result.taskId, "video");
+      } else {
+        const result = await aiGenerationClient.createVideoSuperResolveTask({
+          videoUrl: generationUrl,
+          provider: "dashscope-style-transform",
+          style: videoStyle,
+          videoFps,
+          minLen: videoMinLen,
+          useSR,
+          animateEmotion: true,
+        });
+        await waitForTaskResult(result.taskId, "video");
+      }
+    } catch (error) {
+      setStatus(formatCreateTaskError(error, mode));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const currentVideoStyleLabel = keepOriginalStyle
+    ? "纯超分"
+    : videoStyles.find((style) => style.value === videoStyle)?.label || "日式漫画";
+  const scaleFactor = Number.parseInt(imageScale, 10);
+  const sourceSizeText = sourceDimensions ? `原图 ${sourceDimensions.width}*${sourceDimensions.height}` : "原图";
+  const resultSizeText = sourceDimensions
+    ? `结果图 ${sourceDimensions.width * scaleFactor}*${sourceDimensions.height * scaleFactor}`
+    : "结果图";
+  const modeLabel = mode === "image" ? `图片超分 ${imageScale}` : keepOriginalStyle ? "纯超分（保持原风格）" : `${currentVideoStyleLabel} ${videoMinLen}P${useSR ? " + SR" : ""}`;
+
+  return (
+    <section className="image-workbench-page resolution-upscale-page">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" onClick={() => onSelectView?.("characterMix")}>
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" className="is-active" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <ColumnWidthOutlined />
+        </button>
+        <strong>分辨率提升</strong>
+        <div className="image-workbench-mode-tabs" role="tablist" aria-label="素材类型">
+          <button type="button" className={mode === "image" ? "is-active" : ""} onClick={() => handleModeChange("image")}>
+            <PictureOutlined />
+            图片
+          </button>
+          <button type="button" className={mode === "video" ? "is-active" : ""} onClick={() => handleModeChange("video")}>
+            <VideoCameraOutlined />
+            视频
+          </button>
+        </div>
+      </div>
+
+      <main className="image-workbench-layout image-workbench-layout--camera resolution-upscale-layout">
+        <aside className="image-workbench-panel image-workbench-panel--left">
+          <section className="image-workbench-control-card">
+            <div className="image-workbench-section-title">
+              <h3>素材</h3>
+              <span>{sourcePreview ? "已上传" : "待上传"}</span>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={mode === "image" ? "image/png,image/jpeg,image/webp" : "video/mp4,video/quicktime,video/webm,video/*"}
+              onChange={handleFileChange}
+            />
+            <div className="image-workbench-upload-shell">
+              <button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
+                {sourcePreview && mode === "image" ? <img src={sourcePreview} alt="" /> : <FileImageOutlined />}
+                <strong>{sourceName || (mode === "image" ? "选择图片" : "选择视频")}</strong>
+                <span>{mode === "image" ? "PNG / JPG / WebP" : "MP4 / MOV / WebM"}</span>
+              </button>
+              {sourcePreview ? (
+                <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
+                  ×
+                </button>
+              ) : null}
+            </div>
+            <div className="image-workbench-url-row">
+              <label>
+                <LinkOutlined />
+                <input
+                  value={sourceUrl}
+                  placeholder="粘贴素材 URL"
+                  onChange={(event) => setSourceUrl(event.target.value)}
+                />
+              </label>
+              <button type="button" onClick={handleImportUrl}>导入</button>
+            </div>
+          </section>
+
+          <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-style-chips">
+                  <span className="resolution-upscale-style-chips__title">模式</span>
+                  <div className="resolution-upscale-style-chips__grid">
+                    <button
+                      type="button"
+                      className={`resolution-upscale-style-chip${keepOriginalStyle ? " is-active" : ""}`}
+                      onClick={() => setKeepOriginalStyle(true)}
+                    >
+                      <span className="resolution-upscale-style-chip__swatch" style={{ background: "#6ee7b7" }} />
+                      保持原风格
+                    </button>
+                    {videoStyles.map((style) => (
+                      <button
+                        key={style.value}
+                        type="button"
+                        className={`resolution-upscale-style-chip${!keepOriginalStyle && videoStyle === style.value ? " is-active" : ""}`}
+                        onClick={() => { setKeepOriginalStyle(false); setVideoStyle(style.value); }}
+                      >
+                        <span className="resolution-upscale-style-chip__swatch" style={{ background: style.color }} />
+                        {style.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                {!keepOriginalStyle && (
+                  <>
+                    <label className="image-workbench-select">
+                      <span>输出短边</span>
+                      <select value={videoMinLen} onChange={(event) => setVideoMinLen(Number(event.target.value) as VideoMinLen)}>
+                        <option value={540}>540P</option>
+                        <option value={720}>720P</option>
+                      </select>
+                    </label>
+                    <label className="image-workbench-select">
+                      <span>帧率</span>
+                      <select value={videoFps} onChange={(event) => setVideoFps(Number(event.target.value))}>
+                        <option value={15}>15 FPS</option>
+                        <option value={20}>20 FPS</option>
+                        <option value={25}>25 FPS</option>
+                      </select>
+                    </label>
+                    <div className="image-workbench-section-title">
+                      <h3>超分增强</h3>
+                      <button
+                        type="button"
+                        className={`image-workbench-toggle ${useSR ? "is-active" : ""}`}
+                        aria-pressed={useSR}
+                        onClick={() => setUseSR((current) => !current)}
+                      />
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+          </section>
+
+          <div className="image-workbench-actions">
+            <button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
+              <ColumnWidthOutlined />
+              {isProcessing ? "处理中" : "开始超分"}
+            </button>
+            {isProcessing && (
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
+                取消
+              </button>
+            )}
+          </div>
+        </aside>
+
+        <section className="image-workbench-canvas image-workbench-canvas--camera resolution-upscale-canvas" aria-label="分辨率提升画布">
+          {sourcePreview ? (
+            mode === "image" ? (
+              <div className="resolution-upscale-image-stage">
+                <BeforeAfterCompare
+                  sourceSrc={sourcePreview}
+                  resultSrc={resultPreview || sourcePreview}
+                  sourceLabel={sourceSizeText}
+                  resultLabel={resultPreview ? resultSizeText : "等待结果"}
+                  sourceAlt="原图预览"
+                  resultAlt="超分结果预览"
+                  onSourceLoad={(width, height) => setSourceDimensions({ width, height })}
+                />
+                {resultPreview && (
+                  <div className="resolution-upscale-result-actions">
+                    <button type="button" onClick={() => void handleSaveToAssets()} disabled={isSavingAsset}>
+                      <FolderAddOutlined />
+                      {isSavingAsset ? "加入中" : "加入资产库"}
+                    </button>
+                    <button type="button" onClick={() => void handleDownload()} disabled={isDownloading}>
+                      <DownloadOutlined />
+                      {isDownloading ? "保存中" : "保存本地"}
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="resolution-upscale-video-stage">
+                {resultPreview && (
+                  <div className="resolution-upscale-video-header">
+                    <div className="resolution-upscale-video-toggle">
+                      <button
+                        type="button"
+                        className={videoViewMode === "source" ? "is-active" : ""}
+                        onClick={() => setVideoViewMode("source")}
+                      >
+                        原始
+                      </button>
+                      <button
+                        type="button"
+                        className={videoViewMode === "result" ? "is-active" : ""}
+                        onClick={() => setVideoViewMode("result")}
+                      >
+                        超分结果
+                      </button>
+                    </div>
+                    <div className="resolution-upscale-result-actions">
+                      <button type="button" onClick={() => void handleSaveToAssets()} disabled={isSavingAsset}>
+                        <FolderAddOutlined />
+                        {isSavingAsset ? "加入中" : "加入资产库"}
+                      </button>
+                      <button type="button" onClick={() => void handleDownload()} disabled={isDownloading}>
+                        <DownloadOutlined />
+                        {isDownloading ? "保存中" : "保存本地"}
+                      </button>
+                    </div>
+                  </div>
+                )}
+                <video src={videoViewMode === "result" && resultPreview ? resultPreview : sourcePreview} controls muted playsInline />
+                <span>{resultPreview ? (videoViewMode === "result" ? "超分结果" : "原始视频") : "原始视频"} · {modeLabel}</span>
+              </div>
+            )
+          ) : (
+            <button type="button" className="image-workbench-empty image-workbench-empty--button" onClick={() => fileInputRef.current?.click()}>
+              <ColumnWidthOutlined />
+              <strong>{mode === "image" ? "拖拽或选择图片" : "拖拽或选择视频"}</strong>
+              <span>{mode === "image" ? "支持 PNG / JPG / WebP" : "支持 MP4 / MOV / WebM"}</span>
+            </button>
+          )}
+        </section>
+      </main>
+
+      <TaskStatusBar taskId={activeTaskId} status={status} progress={taskProgress} idleLabel={modeLabel} />
+    </section>
+  );
+}
+
+export default ResolutionUpscalePage;
diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx
new file mode 100644
index 0000000..9e43d2a
--- /dev/null
+++ b/src/features/script-tokens/ScriptTokensPage.tsx
@@ -0,0 +1,487 @@
+import { CopyOutlined, DownOutlined, DownloadOutlined, FileTextOutlined, ReloadOutlined, TrophyOutlined, UploadOutlined } from "@ant-design/icons";
+import { useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
+import { evaluateScript } from "../../api/scriptEvalClient";
+
+interface ScoreDimension {
+  key: string;
+  label: string;
+  maxScore: number;
+  weight: number;
+  description: string;
+}
+
+interface EvalResult {
+  totalScore: number;
+  grade: string;
+  dimensionScores: Record<string, number>;
+  summary: string;
+  issues: string[];
+  highlights: string[];
+  suggestions: string[];
+}
+
+const RADAR_CENTER = 100;
+const RADAR_RADIUS = 82;
+const RADAR_ANGLES = [-90, -30, 30, 90, 150, 210];
+
+const scoreDimensions: ScoreDimension[] = [
+  {
+    key: "hook",
+    label: "钩子设计",
+    maxScore: 20,
+    weight: 0.2,
+    description: "开篇吸引力、悬念设置、黄金三秒法则",
+  },
+  {
+    key: "character",
+    label: "角色塑造",
+    maxScore: 15,
+    weight: 0.15,
+    description: "人物立体度、动机合理性、弧光设计",
+  },
+  {
+    key: "plot",
+    label: "剧情结构",
+    maxScore: 20,
+    weight: 0.2,
+    description: "起承转合、节奏把控、冲突设计",
+  },
+  {
+    key: "dialogue",
+    label: "台词对白",
+    maxScore: 15,
+    weight: 0.15,
+    description: "语言质感、角色差异化、潜台词",
+  },
+  {
+    key: "visual",
+    label: "画面表现",
+    maxScore: 15,
+    weight: 0.15,
+    description: "镜头感、空间层次、视觉冲击力",
+  },
+  {
+    key: "content",
+    label: "内容深度",
+    maxScore: 15,
+    weight: 0.15,
+    description: "主题表达、情感共鸣、思想内核",
+  },
+];
+
+function radarPoint(angle: number, radius: number) {
+  const radians = (angle * Math.PI) / 180;
+  return {
+    x: RADAR_CENTER + radius * Math.cos(radians),
+    y: RADAR_CENTER + radius * Math.sin(radians),
+  };
+}
+
+function makeRadarPoints(scores: Record<string, number> | null) {
+  if (!scores) return "100,100 100,100 100,100 100,100 100,100 100,100";
+
+  return scoreDimensions
+    .map((dimension, index) => {
+      const ratio = Math.max(0, Math.min(1, (scores[dimension.key] ?? 0) / dimension.maxScore));
+      const point = radarPoint(RADAR_ANGLES[index] ?? 0, RADAR_RADIUS * ratio);
+      return `${point.x.toFixed(1)},${point.y.toFixed(1)}`;
+    })
+    .join(" ");
+}
+
+function RadarPreview({ result }: { result: EvalResult | null }) {
+  return (
+    <div className={`script-eval-v4-radar-container${result ? " has-glow" : ""}`}>
+      <svg className="script-eval-v4-radar-svg" viewBox="0 0 200 200" aria-hidden="true">
+        <defs>
+          <linearGradient id="scriptEvalV4RadarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="rgba(0, 255, 136, 0.34)" />
+            <stop offset="100%" stopColor="rgba(123, 231, 255, 0.1)" />
+          </linearGradient>
+        </defs>
+        <g className="script-eval-v4-radar-grid">
+          <polygon points="100,15 173,55 173,145 100,185 27,145 27,55" />
+          <polygon points="100,35 158,68 158,132 100,165 42,132 42,68" />
+          <polygon points="100,55 143,81 143,119 100,145 57,119 57,81" />
+          <polygon points="100,75 128,94 128,106 100,125 72,106 72,94" />
+          <line x1="100" y1="15" x2="100" y2="185" />
+          <line x1="27" y1="55" x2="173" y2="145" />
+          <line x1="173" y1="55" x2="27" y2="145" />
+        </g>
+        <polygon
+          className={`script-eval-v4-radar-outline${result ? " has-data" : ""}`}
+          points={makeRadarPoints(result?.dimensionScores ?? null)}
+        />
+      </svg>
+    </div>
+  );
+}
+
+function formatReportMarkdown(result: EvalResult, script: string): string {
+  const lines: string[] = [];
+  lines.push(`# 剧本评测报告`);
+  lines.push("");
+  lines.push(`**综合评分**: ${result.totalScore} / 100 · ${result.grade} 级`);
+  lines.push("");
+  lines.push(`## 概要`);
+  lines.push(result.summary);
+  lines.push("");
+  lines.push(`## 六维评分`);
+  for (const dim of scoreDimensions) {
+    const score = result.dimensionScores[dim.key] ?? 0;
+    const pct = Math.round((score / dim.maxScore) * 100);
+    lines.push(`- **${dim.label}**: ${score}/${dim.maxScore} (${pct}%) — ${dim.description}`);
+  }
+  if (result.highlights.length > 0) {
+    lines.push("");
+    lines.push(`## 亮点`);
+    result.highlights.forEach((h) => lines.push(`- ${h}`));
+  }
+  if (result.issues.length > 0) {
+    lines.push("");
+    lines.push(`## 扣分点`);
+    result.issues.forEach((i) => lines.push(`- ${i}`));
+  }
+  if (result.suggestions.length > 0) {
+    lines.push("");
+    lines.push(`## 优化建议`);
+    result.suggestions.forEach((s) => lines.push(`- ${s}`));
+  }
+  lines.push("");
+  lines.push(`---`);
+  lines.push(`*评测时间: ${new Date().toLocaleString("zh-CN")}*`);
+  lines.push("");
+  lines.push(`<details><summary>原始剧本 (${script.length} 字)</summary>`);
+  lines.push("");
+  lines.push("```");
+  lines.push(script.slice(0, 2000) + (script.length > 2000 ? "\n...(已截断)" : ""));
+  lines.push("```");
+  lines.push("</details>");
+  return lines.join("\n");
+}
+
+function ScriptTokensPage() {
+  const [script, setScript] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<EvalResult | null>(null);
+  const [evalError, setEvalError] = useState<string | null>(null);
+  const [detailsExpanded, setDetailsExpanded] = useState(true);
+  const [uploadedFile, setUploadedFile] = useState<{ name: string; size: number } | null>(null);
+  const [copied, setCopied] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const hasContent = Boolean(script.trim());
+  const lineNumbers = useMemo(() => {
+    const count = Math.min(160, Math.max(10, script.split(/\r\n|\r|\n/).length));
+    return Array.from({ length: count }, (_, index) => index + 1);
+  }, [script]);
+
+  const handleUploadKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const ext = file.name.slice(file.name.lastIndexOf(".")).toLowerCase();
+    const readable = [".txt", ".md"].includes(ext) || file.type === "text/plain" || file.type === "text/markdown";
+    setUploadedFile({ name: file.name, size: file.size });
+
+    if (readable) {
+      setScript(await file.text());
+    } else {
+      setScript(
+        `[已上传文件：${file.name}]\n\n暂不支持解析 ${ext.toUpperCase()} 格式，请上传 TXT 或 MD 文件，或直接粘贴剧本文本后开始评测。`,
+      );
+    }
+
+    event.target.value = "";
+  };
+
+  const handleEvaluate = async () => {
+    if (!hasContent) return;
+    setLoading(true);
+    setResult(null);
+    setEvalError(null);
+    try {
+      const aiResult = await evaluateScript(script);
+      setResult(aiResult);
+    } catch (err) {
+      setEvalError(err instanceof Error ? err.message : "评测服务暂时不可用，请稍后重试");
+    }
+    setDetailsExpanded(true);
+    setLoading(false);
+  };
+
+  const handleReset = () => {
+    setScript("");
+    setResult(null);
+    setDetailsExpanded(true);
+    setUploadedFile(null);
+    setCopied(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleCopyReport = async () => {
+    if (!result) return;
+    const text = formatReportMarkdown(result, script);
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleExportMarkdown = () => {
+    if (!result) return;
+    const md = formatReportMarkdown(result, script);
+    const blob = new Blob([md], { type: "text/markdown;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `剧本评测_${result.grade}级_${result.totalScore}分_${new Date().toISOString().slice(0, 10)}.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const scoreStatus = loading ? "评测中" : result ? "评测完成" : "待生成评分";
+  const scoreHint =
+    result?.summary ??
+    (hasContent ? "点击「开始评测」生成六维雷达评分和优化路径。" : "粘贴完整剧本后，点击「开始评测」生成六维雷达评分和优化路径。");
+
+  return (
+    <section className="script-token-page script-eval-v4 page-motion">
+      <main className="script-token-page__scroll script-eval-v4-stage">
+        <section className="script-eval-v4-app" aria-label="剧本评测工具">
+          <div className="script-eval-v4-panel-left">
+            <section className="script-eval-v4-glass script-eval-v4-input-card">
+              <div
+                className="script-eval-v4-upload-area"
+                role="button"
+                tabIndex={0}
+                onClick={() => fileInputRef.current?.click()}
+                onKeyDown={handleUploadKeyDown}
+              >
+                <UploadOutlined />
+                <div className="upload-text">
+                  {uploadedFile ? uploadedFile.name : "粘贴文本或上传文档"}
+                  <div className="hint">
+                    {uploadedFile ? `${(uploadedFile.size / 1024).toFixed(1)}KB，已载入文件信息` : "建议包含场景、角色、动作和台词"}
+                  </div>
+                </div>
+                <input ref={fileInputRef} type="file" accept=".txt,.md,.pdf,.doc,.docx" onChange={handleFileUpload} />
+                <button
+                  type="button"
+                  className="script-eval-v4-upload-btn"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    fileInputRef.current?.click();
+                  }}
+                >
+                  上传
+                </button>
+              </div>
+
+              <div className="script-eval-v4-text-shell">
+                <div className="script-eval-v4-line-numbers" aria-hidden="true">
+                  {lineNumbers.map((line) => (
+                    <span key={line}>{line}</span>
+                  ))}
+                </div>
+                <textarea
+                  className="script-eval-v4-text-input"
+                  value={script}
+                  onChange={(event) => setScript(event.target.value)}
+                  placeholder={
+                    "在此粘贴你的剧本内容...\n\n【第一幕】夜晚，城市天台。霓虹灯映照着雨后的地面。\n小凯独自站在天台边缘，手中握着一张皱巴巴的纸条..."
+                  }
+                />
+              </div>
+
+              <div className="script-eval-v4-button-group">
+                <button
+                  type="button"
+                  className="script-eval-v4-btn-primary"
+                  disabled={loading || !hasContent}
+                  onClick={() => void handleEvaluate()}
+                >
+                  <span>{loading ? "评测中..." : "开始评测"}</span>
+                </button>
+                <button type="button" className="script-eval-v4-btn-secondary" onClick={handleReset}>
+                  <ReloadOutlined />
+                  重置
+                </button>
+              </div>
+            </section>
+          </div>
+
+          <aside className="script-eval-v4-panel-right" aria-label="评分结果">
+            {evalError ? (
+              <div className="script-eval-v4-error" role="alert">
+                <span className="script-eval-v4-error__icon">⚠</span>
+                <span>{evalError}</span>
+              </div>
+            ) : null}
+
+            <section className={`script-eval-v4-glass script-eval-v4-score-card${loading ? " loading" : ""}${result ? " ready" : ""}`}>
+              <div className="script-eval-v4-score-header">
+                <div className="score-title">SCORE BOARD</div>
+                <span className={`score-status${result ? " ready" : ""}`}>{scoreStatus}</span>
+              </div>
+
+              <div className="script-eval-v4-score-main">
+                <RadarPreview result={result} />
+
+                <div className="script-eval-v4-score-display">
+                  <div className={`score-number${result ? " has-data" : ""}`}>
+                    {result ? (
+                      <>
+                        {result.totalScore} <span>/ 100</span>
+                      </>
+                    ) : (
+                      "— / 100"
+                    )}
+                  </div>
+                  <div className="score-label">综合评分 {result ? `· ${result.grade} 级` : ""}</div>
+                  <div className="score-hint">{scoreHint}</div>
+                </div>
+              </div>
+
+              <div className="script-eval-v4-dimensions-tags">
+                {scoreDimensions.map((dimension) => (
+                  <span className="tag" key={dimension.key}>
+                    {dimension.label}
+                  </span>
+                ))}
+              </div>
+            </section>
+
+            <section className="script-eval-v4-glass script-eval-v4-details-card">
+              <button
+                type="button"
+                className="script-eval-v4-details-header"
+                onClick={() => setDetailsExpanded((expanded) => !expanded)}
+                aria-expanded={detailsExpanded}
+              >
+                <span className="details-title">
+                  <TrophyOutlined />
+                  DIMENSIONS 六维详情
+                </span>
+                <DownOutlined className={`expand-icon${detailsExpanded ? " expanded" : ""}`} />
+              </button>
+
+              <div className={`script-eval-v4-details-content${detailsExpanded ? " expanded" : ""}`}>
+                <div className="script-eval-v4-details-list">
+                  {scoreDimensions.map((dimension) => {
+                    const score = result?.dimensionScores[dimension.key] ?? 0;
+                    const pct = result ? Math.round((score / dimension.maxScore) * 100) : 0;
+                    return (
+                      <article className="script-eval-v4-detail-row" key={dimension.key}>
+                        <div className="detail-row-main">
+                          <span className="dimension-name">{dimension.label}</span>
+                          <div className="dimension-bar" aria-hidden="true">
+                            <span className="dimension-bar-fill" style={{ width: `${pct}%` }} />
+                          </div>
+                          <span className="dimension-score">{result ? `${score}/${dimension.maxScore}` : `${dimension.maxScore}分`}</span>
+                        </div>
+                        <div className="dimension-desc">{dimension.description}</div>
+                      </article>
+                    );
+                  })}
+                </div>
+              </div>
+            </section>
+
+            {result && (result.highlights.length > 0 || result.issues.length > 0) && (
+              <section className="script-eval-v4-glass script-eval-v4-insights-card">
+                {result.highlights.length > 0 && (
+                  <div className="script-eval-v4-insight-group highlights">
+                    <div className="insight-group-title">
+                      <span className="insight-icon">✦</span>
+                      HIGHLIGHTS 亮点
+                    </div>
+                    <ul className="insight-list">
+                      {result.highlights.map((h, i) => (
+                        <li key={i} className="insight-item highlight-item">{h}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {result.issues.length > 0 && (
+                  <div className="script-eval-v4-insight-group issues">
+                    <div className="insight-group-title">
+                      <span className="insight-icon">△</span>
+                      ISSUES 扣分点
+                    </div>
+                    <ul className="insight-list">
+                      {result.issues.map((issue, i) => (
+                        <li key={i} className="insight-item issue-item">{issue}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </section>
+            )}
+
+            {result && result.suggestions.length > 0 && (
+              <section className="script-eval-v4-glass script-eval-v4-suggestions-card">
+                <div className="suggestions-header">
+                  <span className="suggestions-title">
+                    <span className="insight-icon">→</span>
+                    SUGGESTIONS 优化路径
+                  </span>
+                </div>
+                <ul className="suggestion-list">
+                  {result.suggestions.map((s, i) => (
+                    <li key={i} className="suggestion-item">
+                      <span className="suggestion-index">{i + 1}</span>
+                      <span className="suggestion-text">{s}</span>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            )}
+
+            {result && (
+              <div className="script-eval-v4-report-actions">
+                <button type="button" className="script-eval-v4-report-btn" onClick={() => void handleCopyReport()}>
+                  <CopyOutlined />
+                  <span>{copied ? "已复制" : "复制报告"}</span>
+                </button>
+                <button type="button" className="script-eval-v4-report-btn" onClick={handleExportMarkdown}>
+                  <DownloadOutlined />
+                  <span>导出 Markdown</span>
+                </button>
+              </div>
+            )}
+
+            {!result && (
+              <section className="script-eval-v4-note">
+                <FileTextOutlined />
+                <span>评分后会展示当前短板、改写方向和可执行优化路径。</span>
+              </section>
+            )}
+          </aside>
+        </section>
+      </main>
+    </section>
+  );
+}
+
+export default ScriptTokensPage;
diff --git a/src/features/script-tokens/TokenUsagePage.tsx b/src/features/script-tokens/TokenUsagePage.tsx
new file mode 100644
index 0000000..ea0fb1f
--- /dev/null
+++ b/src/features/script-tokens/TokenUsagePage.tsx
@@ -0,0 +1,415 @@
+import {
+  ArrowLeftOutlined,
+  BarChartOutlined,
+  CheckCircleOutlined,
+  LeftOutlined,
+  LineChartOutlined,
+  ReloadOutlined,
+  RightOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  UserOutlined,
+  WarningOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type {
+  WebEnterpriseUsageMember,
+  WebEnterpriseUsageRecord,
+  WebEnterpriseUsageSummary,
+  WebImageWorkbenchTool,
+  WebUsageSummary,
+  WebUserSession,
+  WebViewKey,
+} from "../../types";
+
+interface TokenUsagePageProps {
+  session: WebUserSession | null;
+  usage: WebUsageSummary;
+  loadEnterpriseUsage?: () => Promise<WebEnterpriseUsageSummary>;
+  loadPersonalUsage?: () => Promise<WebEnterpriseUsageSummary>;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function formatCredits(cents: number): string {
+  const value = Math.max(0, cents) / 100;
+  return value >= 1000 ? `${Math.round(value).toLocaleString()} 积分` : `${value.toFixed(2).replace(/\.00$/, "")} 积分`;
+}
+
+function formatDateTime(value?: string | null): string {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function getInitials(value: string): string {
+  const normalized = value.trim();
+  if (!normalized) return "U";
+  return normalized.slice(0, 2).toUpperCase();
+}
+
+function getEnterpriseBalanceCents(
+  session: WebUserSession | null,
+  usage: WebUsageSummary,
+  enterpriseUsage: WebEnterpriseUsageSummary | null,
+) {
+  if (enterpriseUsage) return enterpriseUsage.balanceCents;
+  if (typeof usage.enterpriseBalanceCents === "number") return usage.enterpriseBalanceCents;
+  return session?.user.enterpriseBalanceCents ?? usage.balanceCents;
+}
+
+function memberDisplayName(member: WebEnterpriseUsageMember): string {
+  return member.displayName || member.username || String(member.userId);
+}
+
+function recordDuration(record: WebEnterpriseUsageRecord): string {
+  return record.durationSeconds ? `${record.durationSeconds}s` : record.resolution || "-";
+}
+
+const LOW_BALANCE_THRESHOLD_CENTS = 2000;
+
+function formatDayLabel(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return `${date.getMonth() + 1}/${date.getDate()}`;
+}
+
+type TrendPoint = { date: string; usedCents: number; taskCount: number };
+
+function UsageTrendChart({ data }: { data: TrendPoint[] }) {
+  const W = 480;
+  const H = 120;
+  const padX = 28;
+  const padY = 18;
+  const maxCents = Math.max(1, ...data.map((d) => d.usedCents));
+  const stepX = data.length > 1 ? (W - padX * 2) / (data.length - 1) : 0;
+  const yOf = (cents: number) => H - padY - (cents / maxCents) * (H - padY * 2);
+  const xOf = (i: number) => padX + i * stepX;
+  const points = data.map((d, i) => ({ x: xOf(i), y: yOf(d.usedCents), ...d }));
+  const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+  const areaPath = points.length
+    ? `${linePath} L${points[points.length - 1].x.toFixed(1)},${H - padY} L${points[0].x.toFixed(1)},${H - padY} Z`
+    : "";
+  const totalCents = data.reduce((sum, d) => sum + d.usedCents, 0);
+  const peak = points.reduce((best, p) => (p.usedCents > best.usedCents ? p : best), points[0] || { usedCents: 0, x: 0, y: 0 });
+
+  return (
+    <div className="usage-trend">
+      <svg viewBox={`0 0 ${W} ${H}`} className="usage-trend__svg" role="img" aria-label="近 7 天积分消耗趋势">
+        <defs>
+          <linearGradient id="usageTrendFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.28" />
+            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        {[0.25, 0.5, 0.75, 1].map((f) => (
+          <line key={f} x1={padX} y1={yOf(maxCents * f)} x2={W - padX} y2={yOf(maxCents * f)} className="usage-trend__grid" />
+        ))}
+        {areaPath ? <path d={areaPath} fill="url(#usageTrendFill)" /> : null}
+        {linePath ? <path d={linePath} className="usage-trend__line" /> : null}
+        {points.map((p) => (
+          <circle key={p.date} cx={p.x} cy={p.y} r={3.5} className="usage-trend__dot">
+            <title>{`${formatDayLabel(p.date)} · ${formatCredits(p.usedCents)} · ${p.taskCount} 次`}</title>
+          </circle>
+        ))}
+        {points.map((p, i) => (
+          <text key={`lbl-${p.date}`} x={p.x} y={H - 6} className="usage-trend__xlabel" textAnchor={i === 0 ? "start" : i === points.length - 1 ? "end" : "middle"}>
+            {formatDayLabel(p.date)}
+          </text>
+        ))}
+      </svg>
+      <div className="usage-trend__meta">
+        <span>近 7 天共 <b>{formatCredits(totalCents)}</b></span>
+        {peak.usedCents > 0 ? <span>峰值 {formatDayLabel(peak.date)} · {formatCredits(peak.usedCents)}</span> : null}
+      </div>
+    </div>
+  );
+}
+
+function TokenUsagePage({
+  session,
+  usage,
+  loadEnterpriseUsage,
+  loadPersonalUsage,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: TokenUsagePageProps) {
+  const [enterpriseUsage, setEnterpriseUsage] = useState<WebEnterpriseUsageSummary | null>(null);
+  const [enterpriseUsageLoading, setEnterpriseUsageLoading] = useState(false);
+  const [enterpriseUsageError, setEnterpriseUsageError] = useState<string | null>(null);
+  const isEnterpriseAdmin = session?.user.enterpriseRole === "admin";
+  const isEnterpriseAccount = Boolean(session?.user.enterpriseId || session?.user.accountType === "enterprise");
+
+  const refreshEnterpriseUsage = useCallback(async () => {
+    const loader = isEnterpriseAdmin ? loadEnterpriseUsage : loadPersonalUsage;
+    if (!loader) {
+      setEnterpriseUsage(null);
+      setEnterpriseUsageError(null);
+      return;
+    }
+    setEnterpriseUsageLoading(true);
+    setEnterpriseUsageError(null);
+    try {
+      setEnterpriseUsage(await loader());
+    } catch (error) {
+      setEnterpriseUsage(null);
+      setEnterpriseUsageError(error instanceof Error ? error.message : "用量数据暂时不可用");
+    } finally {
+      setEnterpriseUsageLoading(false);
+    }
+  }, [isEnterpriseAdmin, loadEnterpriseUsage, loadPersonalUsage]);
+
+  useEffect(() => {
+    void refreshEnterpriseUsage();
+  }, [refreshEnterpriseUsage]);
+
+  const enterpriseBalanceCents = getEnterpriseBalanceCents(session, usage, enterpriseUsage);
+  const totalCalls = enterpriseUsage
+    ? enterpriseUsage.members.reduce((sum, member) => sum + member.taskCount, 0)
+    : usage.imageUsed + usage.videoUsed + usage.textUsed;
+  const totalUsedCents = enterpriseUsage?.totalUsedCents ?? 0;
+  const modelBreakdown = enterpriseUsage?.modelBreakdown ?? [];
+  const dailyTrend = enterpriseUsage?.dailyTrend ?? [];
+  const availableBalanceCents = isEnterpriseAccount ? enterpriseBalanceCents : usage.balanceCents;
+  const isLowBalance = !usage.betaUnlimited && availableBalanceCents < LOW_BALANCE_THRESHOLD_CENTS;
+  const maxModelCents = Math.max(1, ...modelBreakdown.map((m) => m.usedCents));
+  const records = enterpriseUsage?.records ?? [];
+  const [recordPage, setRecordPage] = useState(0);
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(records.length / pageSize));
+  const pagedRecords = records.slice(recordPage * pageSize, (recordPage + 1) * pageSize);
+  const members = useMemo<WebEnterpriseUsageMember[]>(() => {
+    if (enterpriseUsage && enterpriseUsage.members.length) return enterpriseUsage.members;
+    if (!session) return [];
+    return [
+      {
+        userId: session.user.id,
+        username: session.user.username,
+        displayName: session.user.displayName,
+        role: session.user.enterpriseRole || session.user.role || "personal",
+        usedCents: 0,
+        taskCount: totalCalls,
+        lastUsedAt: null,
+      },
+    ];
+  }, [enterpriseUsage, session, totalCalls]);
+
+  const metricCards = [
+    {
+      key: "balance",
+      label: "可用余额",
+      value: usage.betaUnlimited ? "不限量" : formatCredits(availableBalanceCents),
+      hint: isLowBalance ? "余额偏低，建议充值" : isEnterpriseAccount ? "企业共享额度" : "个人账户额度",
+      tone: isLowBalance ? "warn" : "accent",
+    },
+    {
+      key: "used",
+      label: "已用积分",
+      value: formatCredits(totalUsedCents),
+      hint: enterpriseUsage ? `${enterpriseUsage.enterpriseName || "企业"}累计` : "累计消耗",
+      tone: "neutral",
+    },
+    {
+      key: "calls",
+      label: "调用次数",
+      value: `${totalCalls}`,
+      hint: `${modelBreakdown.length || 0} 个模型`,
+      tone: "neutral",
+    },
+  ];
+
+  const systemStatus = [
+    { label: "账户类型", value: isEnterpriseAccount ? "企业账户" : "个人账户", tone: "good" },
+    { label: "企业空间", value: enterpriseUsage?.enterpriseName || session?.user.enterpriseName || "-" },
+  ];
+
+  return (
+    <section className="script-token-page token-usage-page management-center-page" aria-label="管理中心">
+      <main className="management-center-shell">
+        <header className="management-center-toolbar" aria-label="管理中心操作">
+          <div className="management-center-toolbar__title">
+            <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
+              <ArrowLeftOutlined />
+            </button>
+            <strong>管理中心</strong>
+          </div>
+          <span className="management-center-status-pill">
+            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
+          </span>
+          <button type="button" onClick={refreshEnterpriseUsage}>
+            <ReloadOutlined />
+            刷新数据
+          </button>
+          <button type="button">
+            <UserOutlined />
+            成员管理
+          </button>
+          <button type="button" className="is-primary" onClick={() => onSelectView?.("settings")}>
+            <SettingOutlined />
+            服务设置
+          </button>
+        </header>
+
+        {isLowBalance ? (
+          <div className="management-balance-alert" role="alert">
+            <WarningOutlined />
+            <span>当前余额 {formatCredits(availableBalanceCents)}，可能不足以完成下一次生成，请及时充值。</span>
+            <button type="button" onClick={() => onSelectView?.("settings")}>去充值</button>
+          </div>
+        ) : null}
+
+        <section className="management-metric-cards" aria-label="关键指标">
+          {metricCards.map((card) => (
+            <article key={card.key} className={`management-metric-card is-${card.tone}`}>
+              <span className="management-metric-card__label">{card.label}</span>
+              <strong className="management-metric-card__value">{card.value}</strong>
+              <span className="management-metric-card__hint">{card.hint}</span>
+            </article>
+          ))}
+        </section>
+
+        <section className="management-center-overview" aria-label="系统概览">
+          <article className="management-card management-card--chart">
+            <div className="management-card__head">
+              <h2>
+                <BarChartOutlined />
+                模型消耗分布
+              </h2>
+              <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
+            </div>
+            {modelBreakdown.length ? (
+              <div className="management-model-list">
+                {modelBreakdown.map((item) => (
+                  <div className="management-model-bar" key={item.model}>
+                    <div className="management-model-bar__top">
+                      <strong title={item.model}>{item.model}</strong>
+                      <em>{formatCredits(item.usedCents)}</em>
+                    </div>
+                    <div className="management-model-bar__track">
+                      <span style={{ width: `${Math.max(4, Math.round((item.usedCents / maxModelCents) * 100))}%` }} />
+                    </div>
+                    <span className="management-model-bar__sub">{item.taskCount} 次调用 · {Math.round((item.usedCents / Math.max(1, totalUsedCents)) * 100)}%</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="management-empty-chart">
+                <BarChartOutlined />
+                <span>暂无模型用量数据</span>
+              </div>
+            )}
+          </article>
+
+          <article className="management-card management-status-card">
+            <div className="management-card__head">
+              <h2>系统状态</h2>
+            </div>
+            <dl>
+              {systemStatus.map((item) => (
+                <div key={item.label}>
+                  <dt>{item.label}</dt>
+                  <dd className={item.tone === "good" ? "is-good" : undefined}>
+                    {item.tone === "good" ? <i /> : null}
+                    {item.value}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+            <div className="management-status-trend">
+              <span className="management-status-trend__title">近 7 天趋势</span>
+              {dailyTrend.some((d) => d.usedCents > 0) ? (
+                <UsageTrendChart data={dailyTrend} />
+              ) : (
+                <span className="management-status-trend__empty">暂无数据</span>
+              )}
+            </div>
+          </article>
+        </section>
+
+        <section className="management-card management-members">
+          <div className="management-card__head">
+            <h2>
+              <TeamOutlined />
+              团队成员 ({members.length})
+            </h2>
+            <button type="button">{isEnterpriseAdmin ? "企业管理员" : "当前账号"}</button>
+          </div>
+          <div className="management-member-list">
+            {members.map((member) => (
+              <article key={String(member.userId)} className="management-member-row">
+                <span className="management-member-avatar">{getInitials(memberDisplayName(member))}</span>
+                <div>
+                  <strong>{memberDisplayName(member)}</strong>
+                  <em>uid: {member.userId}</em>
+                </div>
+                <span className="management-member-role">{member.role === "admin" ? "管理员" : member.role === "employee" ? "员工" : member.role}</span>
+                <span>{formatCredits(member.usedCents)}</span>
+                <span className="management-member-meter">
+                  <b>{member.taskCount} 调用</b>
+                  <b>{formatDateTime(member.lastUsedAt)}</b>
+                </span>
+                <CheckCircleOutlined />
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="management-card management-records">
+          <div className="management-card__head">
+            <h2>调用记录</h2>
+            <span>{records.length} 条记录</span>
+          </div>
+          <div className="management-record-table" role="table" aria-label="调用记录">
+            <div role="row" className="management-record-table__head">
+              <span role="columnheader">时间</span>
+              <span role="columnheader">用户</span>
+              <span role="columnheader">模型</span>
+              <span role="columnheader">提示词</span>
+              <span role="columnheader">状态</span>
+              <span role="columnheader">耗时</span>
+              <span role="columnheader">积分</span>
+            </div>
+            {pagedRecords.length ? (
+              pagedRecords.map((record) => (
+                <div role="row" className="management-record-table__row" key={record.id}>
+                  <span>{formatDateTime(record.createdAt)}</span>
+                  <span>{record.username}</span>
+                  <span>{record.model}</span>
+                  <span title={record.prompt || ""}>{record.prompt || "-"}</span>
+                  <span className={record.status === "completed" ? "is-good" : record.status === "failed" ? "is-error" : undefined}>{record.status === "completed" ? "成功" : record.status === "failed" ? "失败" : record.status}</span>
+                  <span>{recordDuration(record)}</span>
+                  <span>{record.amountCents > 0 ? formatCredits(record.amountCents) : "-"}</span>
+                </div>
+              ))
+            ) : (
+              <div className="management-record-empty" role="row">
+                暂无调用记录
+              </div>
+            )}
+          </div>
+          {records.length > pageSize && (
+            <div className="management-record-pagination">
+              <button type="button" disabled={recordPage === 0} onClick={() => setRecordPage((p) => p - 1)}>
+                <LeftOutlined />
+              </button>
+              <span>{recordPage + 1} / {totalPages}</span>
+              <button type="button" disabled={recordPage >= totalPages - 1} onClick={() => setRecordPage((p) => p + 1)}>
+                <RightOutlined />
+              </button>
+            </div>
+          )}
+        </section>
+      </main>
+    </section>
+  );
+}
+
+export default TokenUsagePage;
diff --git a/src/features/settings/SettingsPage.tsx b/src/features/settings/SettingsPage.tsx
new file mode 100644
index 0000000..789f072
--- /dev/null
+++ b/src/features/settings/SettingsPage.tsx
@@ -0,0 +1,47 @@
+import { ApiOutlined, DatabaseOutlined, KeyOutlined, SettingOutlined } from "@ant-design/icons";
+
+function SettingsPage() {
+  return (
+    <section className="settings-page page-motion" aria-label="服务设置">
+      <main className="settings-page__shell">
+        <header className="settings-page__head">
+          <span>
+            <SettingOutlined />
+            管理中心
+          </span>
+          <h1>服务设置</h1>
+          <p>集中管理服务连接、密钥池与资源调用配置。</p>
+        </header>
+
+        <div className="settings-page__grid">
+          <article>
+            <ApiOutlined />
+            <div>
+              <strong>服务连接</strong>
+              <span>服务器已连接，当前使用本地预览配置。</span>
+            </div>
+            <button type="button">检查连接</button>
+          </article>
+          <article>
+            <KeyOutlined />
+            <div>
+              <strong>密钥池</strong>
+              <span>7 个 Provider 可用，支持统一调度。</span>
+            </div>
+            <button type="button">管理密钥</button>
+          </article>
+          <article>
+            <DatabaseOutlined />
+            <div>
+              <strong>调用记录</strong>
+              <span>记录模型、状态、耗时与积分消耗。</span>
+            </div>
+            <button type="button">查看记录</button>
+          </article>
+        </div>
+      </main>
+    </section>
+  );
+}
+
+export default SettingsPage;
diff --git a/src/features/size-template/SizeTemplatePage.tsx b/src/features/size-template/SizeTemplatePage.tsx
new file mode 100644
index 0000000..93750c3
--- /dev/null
+++ b/src/features/size-template/SizeTemplatePage.tsx
@@ -0,0 +1,1390 @@
+import {
+  CloseOutlined,
+  CloudUploadOutlined,
+  FileImageOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
+import type { WebViewKey } from "../../types";
+import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
+
+interface SizeTemplatePageProps {
+  isAuthenticated?: boolean;
+  onOpenMore?: () => void;
+  onOpenEcommerce?: () => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+interface SizeTemplatePreset {
+  title: string;
+  group: string;
+  category: string;
+  mainSpec: string;
+  ratio: string;
+  ratioCss: string;
+  limit: string;
+  summary: string;
+  details: string[];
+  tone: "green" | "cyan" | "violet" | "amber";
+}
+
+interface SizeTemplateSizeOption {
+  label: string;
+  mainSpec: string;
+  ratio: string;
+  ratioCss: string;
+}
+
+interface SizeTemplateUploadImage {
+  id: string;
+  src: string;
+  name: string;
+}
+
+const sizeTemplateGroups = [
+  { key: "socialCn", label: "社交/内容平台" },
+  { key: "socialGlobal", label: "国际社交平台" },
+  { key: "ecommerce", label: "电商平台" },
+  { key: "id", label: "证件照/官方证件" },
+];
+
+const socialContentPlatformOptions = [
+  { label: "微信公众号", category: "微信公众号" },
+  { label: "小红书", category: "小红书" },
+  { label: "抖音", category: "抖音/TikTok" },
+  { label: "B站", category: "B站" },
+  { label: "微博", category: "微博" },
+];
+
+const internationalSocialPlatformOptions = [
+  { label: "Instagram", category: "Instagram" },
+  { label: "YouTube", category: "YouTube" },
+  { label: "Twitter/X", category: "Twitter/X" },
+  { label: "Facebook", category: "Facebook" },
+  { label: "LinkedIn", category: "LinkedIn" },
+];
+
+const ecommercePlatformOptions = [
+  { label: "淘宝/天猫", category: "淘宝/天猫" },
+  { label: "京东", category: "京东" },
+  { label: "拼多多", category: "拼多多" },
+  { label: "亚马逊", category: "亚马逊" },
+  { label: "虾皮 Shopee/Lazada", category: "虾皮 Shopee/Lazada" },
+];
+
+const idPhotoPlatformOptions = [
+  { label: "常规证件照", category: "常规证件照" },
+  { label: "各国签证 / 护照电子照", category: "各国签证/护照电子照" },
+  { label: "考试报名照片", category: "考试报名照片" },
+  { label: "求职相关", category: "求职相关" },
+];
+
+const wechatTypeOptions = [
+  { label: "头条封面", title: "微信公众号头条封面" },
+  { label: "次条封面", title: "微信公众号次条封面" },
+  { label: "正文图", title: "微信公众号正文图" },
+];
+
+const xiaohongshuTypeOptions = [
+  { label: "笔记封面", title: "小红书笔记封面" },
+  { label: "头像", title: "小红书头像" },
+];
+
+const douyinTypeOptions = [
+  { label: "视频封面", title: "抖音/TikTok 视频封面" },
+  { label: "头像", title: "抖音/TikTok 头像" },
+];
+
+const bilibiliTypeOptions = [
+  { label: "视频封面", title: "B站视频封面" },
+  { label: "头像", title: "B站头像" },
+  { label: "专栏配图", title: "B站专栏配图" },
+];
+
+const weiboTypeOptions = [
+  { label: "正文图", title: "微博正文图" },
+  { label: "动图", title: "微博动图" },
+  { label: "头像", title: "微博头像" },
+  { label: "背景图", title: "微博背景图" },
+];
+
+const instagramTypeOptions = [
+  { label: "常规帖子", title: "Instagram 常规帖子" },
+  { label: "动态 / Reels 封面", title: "Instagram 动态/Reels 封面" },
+  { label: "头像", title: "Instagram 头像" },
+];
+
+const youtubeTypeOptions = [
+  { label: "视频缩略图", title: "YouTube 视频缩略图" },
+  { label: "频道横幅", title: "YouTube 频道横幅" },
+  { label: "频道头像", title: "YouTube 频道头像" },
+];
+
+const twitterTypeOptions = [
+  { label: "推文图", title: "Twitter/X 推文图" },
+  { label: "头部图", title: "Twitter/X 头部图" },
+  { label: "卡片图", title: "Twitter/X 卡片图" },
+  { label: "头像", title: "Twitter/X 头像" },
+];
+
+const facebookTypeOptions = [
+  { label: "帖子图", title: "Facebook 帖子图" },
+  { label: "桌面封面", title: "Facebook 桌面封面" },
+  { label: "移动端封面", title: "Facebook 移动端封面" },
+  { label: "故事", title: "Facebook 故事" },
+  { label: "群组封面", title: "Facebook 群组封面" },
+  { label: "头像", title: "Facebook 头像" },
+];
+
+const linkedInTypeOptions = [
+  { label: "帖子图", title: "LinkedIn 帖子图" },
+  { label: "文章封面", title: "LinkedIn 文章封面" },
+  { label: "个人背景图", title: "LinkedIn 个人背景图" },
+  { label: "个人头像", title: "LinkedIn 个人头像" },
+  { label: "企业 Logo", title: "LinkedIn 企业 Logo" },
+  { label: "企业横幅", title: "LinkedIn 企业横幅" },
+];
+
+const taobaoTypeOptions = [
+  { label: "主图 / SKU 图", title: "淘宝/天猫主图/SKU图" },
+  { label: "详情页", title: "淘宝/天猫详情页" },
+];
+
+const jingdongTypeOptions = [
+  { label: "主图 / SKU 图", title: "京东主图/SKU图" },
+  { label: "详情页", title: "京东详情页" },
+];
+
+const pinduoduoTypeOptions = [
+  { label: "主图", title: "拼多多主图" },
+  { label: "详情页", title: "拼多多详情页" },
+];
+
+const amazonTypeOptions = [{ label: "主图", title: "亚马逊主图" }];
+
+const shopeeLazadaTypeOptions = [{ label: "商品主图", title: "虾皮 Shopee/Lazada 商品主图" }];
+
+const regularIdPhotoTypeOptions = [
+  { label: "一寸照", title: "一寸照" },
+  { label: "二寸照", title: "二寸照" },
+  { label: "小二寸", title: "小二寸（护照/签证）" },
+];
+
+const visaPassportTypeOptions = [
+  { label: "中国护照", title: "中国护照" },
+  { label: "美国签证", title: "美国签证" },
+  { label: "英国签证", title: "英国签证" },
+  { label: "加拿大签证", title: "加拿大签证" },
+];
+
+const examPhotoTypeOptions = [
+  { label: "国考", title: "国考报名照片" },
+  { label: "英语四六级", title: "英语四六级报名照片" },
+  { label: "教资", title: "教资报名照片" },
+];
+
+const jobPhotoTypeOptions = [
+  { label: "简历照片", title: "简历照片" },
+  { label: "LinkedIn 头像", title: "求职 LinkedIn 头像" },
+];
+
+const typeOptionsByCategory = {
+  微信公众号: wechatTypeOptions,
+  小红书: xiaohongshuTypeOptions,
+  "抖音/TikTok": douyinTypeOptions,
+  B站: bilibiliTypeOptions,
+  微博: weiboTypeOptions,
+  Instagram: instagramTypeOptions,
+  YouTube: youtubeTypeOptions,
+  "Twitter/X": twitterTypeOptions,
+  Facebook: facebookTypeOptions,
+  LinkedIn: linkedInTypeOptions,
+  "淘宝/天猫": taobaoTypeOptions,
+  京东: jingdongTypeOptions,
+  拼多多: pinduoduoTypeOptions,
+  亚马逊: amazonTypeOptions,
+  "虾皮 Shopee/Lazada": shopeeLazadaTypeOptions,
+  常规证件照: regularIdPhotoTypeOptions,
+  "各国签证/护照电子照": visaPassportTypeOptions,
+  考试报名照片: examPhotoTypeOptions,
+  求职相关: jobPhotoTypeOptions,
+};
+
+const sizeOptionsByPresetTitle: Record<string, SizeTemplateSizeOption[]> = {
+  小红书笔记封面: [
+    { label: "1080×1440px", mainSpec: "1080×1440px", ratio: "3:4", ratioCss: "3 / 4" },
+    { label: "1080×1080px", mainSpec: "1080×1080px", ratio: "1:1", ratioCss: "1 / 1" },
+  ],
+  "Instagram 常规帖子": [
+    { label: "1080×1350px", mainSpec: "1080×1350px", ratio: "4:5", ratioCss: "4 / 5" },
+    { label: "1080×1080px", mainSpec: "1080×1080px", ratio: "1:1", ratioCss: "1 / 1" },
+  ],
+  "淘宝/天猫详情页": [
+    { label: "宽750px", mainSpec: "宽750px", ratio: "高≤1546px", ratioCss: "750 / 1546" },
+    { label: "宽790px", mainSpec: "宽790px", ratio: "高≤1546px", ratioCss: "790 / 1546" },
+  ],
+  拼多多主图: [
+    { label: "750×352px", mainSpec: "750×352px", ratio: "750:352", ratioCss: "750 / 352" },
+    { label: "800×800px", mainSpec: "800×800px", ratio: "1:1", ratioCss: "1 / 1" },
+  ],
+  "虾皮 Shopee/Lazada 商品主图": [
+    { label: "推荐 1024×1024px", mainSpec: "1024×1024px", ratio: "1:1", ratioCss: "1 / 1" },
+    { label: "基础 800×800px", mainSpec: "800×800px", ratio: "1:1", ratioCss: "1 / 1" },
+  ],
+};
+
+const sizeTemplatePresets: SizeTemplatePreset[] = [
+  {
+    title: "微信公众号头条封面",
+    group: "socialCn",
+    category: "微信公众号",
+    mainSpec: "900×383px",
+    ratio: "2.35:1",
+    ratioCss: "900 / 383",
+    limit: "≤5MB",
+    summary: "头条封面：900×383px，2.35:1，≤5MB。",
+    details: ["次条封面：200×200px，1:1", "正文图：宽≤1080px，单张≤10MB"],
+    tone: "green",
+  },
+  {
+    title: "微信公众号次条封面",
+    group: "socialCn",
+    category: "微信公众号",
+    mainSpec: "200×200px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "次条封面：200×200px，1:1。",
+    details: ["头条封面：900×383px，2.35:1，≤5MB", "正文图：宽≤1080px，单张≤10MB"],
+    tone: "green",
+  },
+  {
+    title: "微信公众号正文图",
+    group: "socialCn",
+    category: "微信公众号",
+    mainSpec: "宽≤1080px",
+    ratio: "自适应",
+    ratioCss: "4 / 3",
+    limit: "单张≤10MB",
+    summary: "正文图：宽≤1080px，单张≤10MB。",
+    details: ["头条封面：900×383px，2.35:1，≤5MB", "次条封面：200×200px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "小红书笔记封面",
+    group: "socialCn",
+    category: "小红书",
+    mainSpec: "1080×1440px",
+    ratio: "3:4",
+    ratioCss: "3 / 4",
+    limit: "单张≤20MB",
+    summary: "笔记封面：1080×1440px（3:4），单张≤20MB。",
+    details: ["可在尺寸中切换 1080×1080px，1:1", "头像：400×400px，1:1"],
+    tone: "cyan",
+  },
+  {
+    title: "小红书头像",
+    group: "socialCn",
+    category: "小红书",
+    mainSpec: "400×400px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "头像：400×400px，1:1。",
+    details: ["笔记封面：1080×1440px（3:4）、1080×1080px（1:1），单张≤20MB"],
+    tone: "cyan",
+  },
+  {
+    title: "抖音/TikTok 视频封面",
+    group: "socialCn",
+    category: "抖音/TikTok",
+    mainSpec: "1080×1920px",
+    ratio: "9:16",
+    ratioCss: "9 / 16",
+    limit: "≤2MB",
+    summary: "视频封面：1080×1920px，9:16，≤2MB（上下 15% 区域会被遮挡）。",
+    details: ["头像：200×200px，1:1"],
+    tone: "violet",
+  },
+  {
+    title: "抖音/TikTok 头像",
+    group: "socialCn",
+    category: "抖音/TikTok",
+    mainSpec: "200×200px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "头像：200×200px，1:1。",
+    details: ["视频封面：1080×1920px，9:16，≤2MB（上下 15% 区域会被遮挡）"],
+    tone: "violet",
+  },
+  {
+    title: "B站视频封面",
+    group: "socialCn",
+    category: "B站",
+    mainSpec: "1146×717px",
+    ratio: "16:10",
+    ratioCss: "1146 / 717",
+    limit: "≤2MB",
+    summary: "视频封面：1146×717px，16:10，≤2MB。",
+    details: ["头像：300×300px，1:1", "专栏配图：宽度≤1000px"],
+    tone: "amber",
+  },
+  {
+    title: "B站头像",
+    group: "socialCn",
+    category: "B站",
+    mainSpec: "300×300px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "头像：300×300px，1:1。",
+    details: ["视频封面：1146×717px，16:10，≤2MB", "专栏配图：宽度≤1000px"],
+    tone: "amber",
+  },
+  {
+    title: "B站专栏配图",
+    group: "socialCn",
+    category: "B站",
+    mainSpec: "宽度≤1000px",
+    ratio: "自适应",
+    ratioCss: "4 / 3",
+    limit: "按平台限制导出",
+    summary: "专栏配图：宽度≤1000px。",
+    details: ["视频封面：1146×717px，16:10，≤2MB", "头像：300×300px，1:1"],
+    tone: "amber",
+  },
+  {
+    title: "微博正文图",
+    group: "socialCn",
+    category: "微博",
+    mainSpec: "推荐宽1080px",
+    ratio: "长图≤1:3",
+    ratioCss: "4 / 3",
+    limit: "单张≤20MB",
+    summary: "正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3。",
+    details: ["动图：≤5MB", "头像：200×200px，1:1", "背景图：920×300px"],
+    tone: "green",
+  },
+  {
+    title: "微博动图",
+    group: "socialCn",
+    category: "微博",
+    mainSpec: "按内容导出",
+    ratio: "自适应",
+    ratioCss: "4 / 3",
+    limit: "≤5MB",
+    summary: "动图：≤5MB。",
+    details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "头像：200×200px，1:1", "背景图：920×300px"],
+    tone: "green",
+  },
+  {
+    title: "微博头像",
+    group: "socialCn",
+    category: "微博",
+    mainSpec: "200×200px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "头像：200×200px，1:1。",
+    details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "动图：≤5MB", "背景图：920×300px"],
+    tone: "green",
+  },
+  {
+    title: "微博背景图",
+    group: "socialCn",
+    category: "微博",
+    mainSpec: "920×300px",
+    ratio: "920:300",
+    ratioCss: "920 / 300",
+    limit: "按平台限制导出",
+    summary: "背景图：920×300px。",
+    details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "动图：≤5MB", "头像：200×200px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Instagram 常规帖子",
+    group: "socialGlobal",
+    category: "Instagram",
+    mainSpec: "1080×1350px",
+    ratio: "4:5",
+    ratioCss: "4 / 5",
+    limit: "图片≤1MB",
+    summary: "常规帖子：1080×1350px（4:5 推荐），图片≤1MB。",
+    details: ["可在尺寸中切换 1080×1080px，1:1", "动态 / Reels 封面：1080×1920px，9:16", "头像：320×320px，1:1"],
+    tone: "cyan",
+  },
+  {
+    title: "Instagram 动态/Reels 封面",
+    group: "socialGlobal",
+    category: "Instagram",
+    mainSpec: "1080×1920px",
+    ratio: "9:16",
+    ratioCss: "9 / 16",
+    limit: "图片≤1MB",
+    summary: "动态 / Reels 封面：1080×1920px，9:16，图片≤1MB。",
+    details: ["常规帖子：1080×1350px（4:5 推荐）或 1080×1080px（1:1）", "头像：320×320px，1:1"],
+    tone: "cyan",
+  },
+  {
+    title: "Instagram 头像",
+    group: "socialGlobal",
+    category: "Instagram",
+    mainSpec: "320×320px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "图片≤1MB",
+    summary: "头像：320×320px，1:1，图片≤1MB。",
+    details: ["常规帖子：1080×1350px（4:5 推荐）或 1080×1080px（1:1）", "动态 / Reels 封面：1080×1920px，9:16"],
+    tone: "cyan",
+  },
+  {
+    title: "YouTube 视频缩略图",
+    group: "socialGlobal",
+    category: "YouTube",
+    mainSpec: "1280×720px",
+    ratio: "16:9",
+    ratioCss: "16 / 9",
+    limit: "宽≥640px，≤2MB",
+    summary: "视频缩略图：1280×720px，16:9，宽≥640px，≤2MB。",
+    details: ["频道横幅：2560×1440px；安全区 1546×423px", "频道头像：800×800px，1:1"],
+    tone: "amber",
+  },
+  {
+    title: "YouTube 频道横幅",
+    group: "socialGlobal",
+    category: "YouTube",
+    mainSpec: "2560×1440px",
+    ratio: "16:9",
+    ratioCss: "16 / 9",
+    limit: "安全区1546×423px",
+    summary: "频道横幅：2560×1440px；安全区 1546×423px。",
+    details: ["视频缩略图：1280×720px，16:9，宽≥640px，≤2MB", "频道头像：800×800px，1:1"],
+    tone: "amber",
+  },
+  {
+    title: "YouTube 频道头像",
+    group: "socialGlobal",
+    category: "YouTube",
+    mainSpec: "800×800px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "频道头像：800×800px，1:1。",
+    details: ["视频缩略图：1280×720px，16:9，宽≥640px，≤2MB", "频道横幅：2560×1440px；安全区 1546×423px"],
+    tone: "amber",
+  },
+  {
+    title: "Twitter/X 推文图",
+    group: "socialGlobal",
+    category: "Twitter/X",
+    mainSpec: "1600×900px",
+    ratio: "16:9",
+    ratioCss: "16 / 9",
+    limit: "GIF≤15MB，视频≤512MB",
+    summary: "推文图：1600×900px，16:9。素材限制：GIF≤15MB，视频≤512MB。",
+    details: ["头部图：1500×500px，3:1", "卡片图：800×418px", "头像：400×400px，1:1"],
+    tone: "violet",
+  },
+  {
+    title: "Twitter/X 头部图",
+    group: "socialGlobal",
+    category: "Twitter/X",
+    mainSpec: "1500×500px",
+    ratio: "3:1",
+    ratioCss: "3 / 1",
+    limit: "GIF≤15MB，视频≤512MB",
+    summary: "头部图：1500×500px，3:1。素材限制：GIF≤15MB，视频≤512MB。",
+    details: ["推文图：1600×900px，16:9", "卡片图：800×418px", "头像：400×400px，1:1"],
+    tone: "violet",
+  },
+  {
+    title: "Twitter/X 卡片图",
+    group: "socialGlobal",
+    category: "Twitter/X",
+    mainSpec: "800×418px",
+    ratio: "800:418",
+    ratioCss: "800 / 418",
+    limit: "GIF≤15MB，视频≤512MB",
+    summary: "卡片图：800×418px。素材限制：GIF≤15MB，视频≤512MB。",
+    details: ["推文图：1600×900px，16:9", "头部图：1500×500px，3:1", "头像：400×400px，1:1"],
+    tone: "violet",
+  },
+  {
+    title: "Twitter/X 头像",
+    group: "socialGlobal",
+    category: "Twitter/X",
+    mainSpec: "400×400px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "GIF≤15MB，视频≤512MB",
+    summary: "头像：400×400px，1:1。素材限制：GIF≤15MB，视频≤512MB。",
+    details: ["推文图：1600×900px，16:9", "头部图：1500×500px，3:1", "卡片图：800×418px"],
+    tone: "violet",
+  },
+  {
+    title: "Facebook 帖子图",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "1200×630px",
+    ratio: "1.91:1",
+    ratioCss: "1200 / 630",
+    limit: "按平台压缩规则导出",
+    summary: "帖子图：1200×630px。",
+    details: ["桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Facebook 桌面封面",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "820×312px",
+    ratio: "820:312",
+    ratioCss: "820 / 312",
+    limit: "按平台压缩规则导出",
+    summary: "桌面封面：820×312px。",
+    details: ["帖子图：1200×630px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Facebook 移动端封面",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "640×360px",
+    ratio: "16:9",
+    ratioCss: "16 / 9",
+    limit: "按平台压缩规则导出",
+    summary: "移动端封面：640×360px。",
+    details: ["帖子图：1200×630px", "桌面封面：820×312px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Facebook 故事",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "1080×1920px",
+    ratio: "9:16",
+    ratioCss: "9 / 16",
+    limit: "按平台压缩规则导出",
+    summary: "故事：1080×1920px，9:16。",
+    details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "群组封面：1640×856px", "头像：170×170px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Facebook 群组封面",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "1640×856px",
+    ratio: "1640:856",
+    ratioCss: "1640 / 856",
+    limit: "按平台压缩规则导出",
+    summary: "群组封面：1640×856px。",
+    details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "头像：170×170px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "Facebook 头像",
+    group: "socialGlobal",
+    category: "Facebook",
+    mainSpec: "170×170px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台压缩规则导出",
+    summary: "头像：170×170px，1:1。",
+    details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px"],
+    tone: "green",
+  },
+  {
+    title: "LinkedIn 帖子图",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "1200×627px",
+    ratio: "1.91:1",
+    ratioCss: "1200 / 627",
+    limit: "按平台压缩规则导出",
+    summary: "帖子图：1200×627px。",
+    details: ["文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
+    tone: "cyan",
+  },
+  {
+    title: "LinkedIn 文章封面",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "1200×644px",
+    ratio: "1200:644",
+    ratioCss: "1200 / 644",
+    limit: "按平台压缩规则导出",
+    summary: "文章封面：1200×644px。",
+    details: ["帖子图：1200×627px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
+    tone: "cyan",
+  },
+  {
+    title: "LinkedIn 个人背景图",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "1584×396px",
+    ratio: "4:1",
+    ratioCss: "4 / 1",
+    limit: "按平台限制导出",
+    summary: "个人背景图：1584×396px。",
+    details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
+    tone: "cyan",
+  },
+  {
+    title: "LinkedIn 个人头像",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "400×400px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "个人头像：400×400px，1:1。",
+    details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
+    tone: "cyan",
+  },
+  {
+    title: "LinkedIn 企业 Logo",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "300×300px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "企业 Logo：300×300px，1:1。",
+    details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业横幅：1128×191px"],
+    tone: "cyan",
+  },
+  {
+    title: "LinkedIn 企业横幅",
+    group: "socialGlobal",
+    category: "LinkedIn",
+    mainSpec: "1128×191px",
+    ratio: "1128:191",
+    ratioCss: "1128 / 191",
+    limit: "按平台限制导出",
+    summary: "企业横幅：1128×191px。",
+    details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1"],
+    tone: "cyan",
+  },
+  {
+    title: "淘宝/天猫主图/SKU图",
+    group: "ecommerce",
+    category: "淘宝/天猫",
+    mainSpec: "800×800px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "≤3MB",
+    summary: "主图 / SKU 图：800×800px，1:1，≤3MB。",
+    details: ["详情页：宽 750px/790px，单张高≤1546px"],
+    tone: "green",
+  },
+  {
+    title: "淘宝/天猫详情页",
+    group: "ecommerce",
+    category: "淘宝/天猫",
+    mainSpec: "宽750px",
+    ratio: "高≤1546px",
+    ratioCss: "750 / 1546",
+    limit: "单张高≤1546px",
+    summary: "详情页：宽 750px/790px，单张高≤1546px。",
+    details: ["主图 / SKU 图：800×800px，1:1，≤3MB"],
+    tone: "green",
+  },
+  {
+    title: "京东主图/SKU图",
+    group: "ecommerce",
+    category: "京东",
+    mainSpec: "800×800px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "≤1MB（白底）",
+    summary: "主图 / SKU 图：800×800px，1:1，≤1MB（白底）。",
+    details: ["详情页：宽 750px"],
+    tone: "cyan",
+  },
+  {
+    title: "京东详情页",
+    group: "ecommerce",
+    category: "京东",
+    mainSpec: "宽750px",
+    ratio: "自适应",
+    ratioCss: "4 / 3",
+    limit: "按平台限制导出",
+    summary: "详情页：宽 750px。",
+    details: ["主图 / SKU 图：800×800px，1:1，≤1MB（白底）"],
+    tone: "cyan",
+  },
+  {
+    title: "拼多多主图",
+    group: "ecommerce",
+    category: "拼多多",
+    mainSpec: "750×352px",
+    ratio: "750:352",
+    ratioCss: "750 / 352",
+    limit: "≤1MB",
+    summary: "主图：750×352px，≤1MB。",
+    details: ["可在尺寸中切换 800×800px，1:1", "详情页：宽 750px"],
+    tone: "amber",
+  },
+  {
+    title: "拼多多详情页",
+    group: "ecommerce",
+    category: "拼多多",
+    mainSpec: "宽750px",
+    ratio: "自适应",
+    ratioCss: "4 / 3",
+    limit: "按平台限制导出",
+    summary: "详情页：宽 750px。",
+    details: ["主图：750×352px、800×800px（1:1），≤1MB"],
+    tone: "amber",
+  },
+  {
+    title: "亚马逊主图",
+    group: "ecommerce",
+    category: "亚马逊",
+    mainSpec: "≥1600×1600px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "≤10MB（纯白底）",
+    summary: "主图：≥1600×1600px，1:1，≤10MB（纯白底），最小 500×500px。",
+    details: ["最小 500×500px"],
+    tone: "violet",
+  },
+  {
+    title: "虾皮 Shopee/Lazada 商品主图",
+    group: "ecommerce",
+    category: "虾皮 Shopee/Lazada",
+    mainSpec: "1024×1024px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "≤2MB",
+    summary: "商品主图：推荐 1024×1024px，1:1，≤2MB。",
+    details: ["可在尺寸中切换基础 800×800px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "一寸照",
+    group: "id",
+    category: "常规证件照",
+    mainSpec: "295×413px",
+    ratio: "295:413",
+    ratioCss: "295 / 413",
+    limit: "按平台限制导出",
+    summary: "一寸照：295×413px。",
+    details: ["二寸照：413×579px", "小二寸（护照 / 签证）：413×531px"],
+    tone: "cyan",
+  },
+  {
+    title: "二寸照",
+    group: "id",
+    category: "常规证件照",
+    mainSpec: "413×579px",
+    ratio: "413:579",
+    ratioCss: "413 / 579",
+    limit: "按平台限制导出",
+    summary: "二寸照：413×579px。",
+    details: ["一寸照：295×413px", "小二寸（护照 / 签证）：413×531px"],
+    tone: "cyan",
+  },
+  {
+    title: "小二寸（护照/签证）",
+    group: "id",
+    category: "常规证件照",
+    mainSpec: "413×531px",
+    ratio: "413:531",
+    ratioCss: "413 / 531",
+    limit: "按平台限制导出",
+    summary: "小二寸（护照 / 签证）：413×531px。",
+    details: ["一寸照：295×413px", "二寸照：413×579px"],
+    tone: "cyan",
+  },
+  {
+    title: "中国护照",
+    group: "id",
+    category: "各国签证/护照电子照",
+    mainSpec: "354×472px",
+    ratio: "354:472",
+    ratioCss: "354 / 472",
+    limit: "≤40KB（白底）",
+    summary: "中国护照：354×472px，≤40KB（白底）。",
+    details: ["美国签证：600×600px，1:1，≤240KB", "英国签证：600×750px", "加拿大签证：420×540px"],
+    tone: "violet",
+  },
+  {
+    title: "美国签证",
+    group: "id",
+    category: "各国签证/护照电子照",
+    mainSpec: "600×600px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "≤240KB",
+    summary: "美国签证：600×600px，1:1，≤240KB。",
+    details: ["中国护照：354×472px，≤40KB（白底）", "英国签证：600×750px", "加拿大签证：420×540px"],
+    tone: "violet",
+  },
+  {
+    title: "英国签证",
+    group: "id",
+    category: "各国签证/护照电子照",
+    mainSpec: "600×750px",
+    ratio: "600:750",
+    ratioCss: "600 / 750",
+    limit: "按平台限制导出",
+    summary: "英国签证：600×750px。",
+    details: ["中国护照：354×472px，≤40KB（白底）", "美国签证：600×600px，1:1，≤240KB", "加拿大签证：420×540px"],
+    tone: "violet",
+  },
+  {
+    title: "加拿大签证",
+    group: "id",
+    category: "各国签证/护照电子照",
+    mainSpec: "420×540px",
+    ratio: "420:540",
+    ratioCss: "420 / 540",
+    limit: "按平台限制导出",
+    summary: "加拿大签证：420×540px。",
+    details: ["中国护照：354×472px，≤40KB（白底）", "美国签证：600×600px，1:1，≤240KB", "英国签证：600×750px"],
+    tone: "violet",
+  },
+  {
+    title: "国考报名照片",
+    group: "id",
+    category: "考试报名照片",
+    mainSpec: "宽130px",
+    ratio: "按公告",
+    ratioCss: "4 / 5",
+    limit: "≤30KB",
+    summary: "国考：宽 130px，≤30KB。",
+    details: ["英语四六级：192×144px，≤20KB", "教资：宽 114-480px，≤200KB"],
+    tone: "amber",
+  },
+  {
+    title: "英语四六级报名照片",
+    group: "id",
+    category: "考试报名照片",
+    mainSpec: "192×144px",
+    ratio: "4:3",
+    ratioCss: "4 / 3",
+    limit: "≤20KB",
+    summary: "英语四六级：192×144px，≤20KB。",
+    details: ["国考：宽 130px，≤30KB", "教资：宽 114-480px，≤200KB"],
+    tone: "amber",
+  },
+  {
+    title: "教资报名照片",
+    group: "id",
+    category: "考试报名照片",
+    mainSpec: "宽114-480px",
+    ratio: "按公告",
+    ratioCss: "4 / 5",
+    limit: "≤200KB",
+    summary: "教资：宽 114-480px，≤200KB。",
+    details: ["国考：宽 130px，≤30KB", "英语四六级：192×144px，≤20KB"],
+    tone: "amber",
+  },
+  {
+    title: "简历照片",
+    group: "id",
+    category: "求职相关",
+    mainSpec: "300dpi起",
+    ratio: "按简历要求",
+    ratioCss: "4 / 5",
+    limit: "≤200KB（部分≤100KB）",
+    summary: "简历照片：≤200KB（部分≤100KB），300dpi 起。",
+    details: ["LinkedIn 头像：400×400px，1:1"],
+    tone: "green",
+  },
+  {
+    title: "求职 LinkedIn 头像",
+    group: "id",
+    category: "求职相关",
+    mainSpec: "400×400px",
+    ratio: "1:1",
+    ratioCss: "1 / 1",
+    limit: "按平台限制导出",
+    summary: "LinkedIn 头像：400×400px，1:1。",
+    details: ["简历照片：≤200KB（部分≤100KB），300dpi 起"],
+    tone: "green",
+  },
+];
+
+function createSizeTemplateUploadItems(files: File[], remainingSlots: number): SizeTemplateUploadImage[] {
+  return files
+    .filter((file) => file.type.startsWith("image/"))
+    .slice(0, remainingSlots)
+    .map((file, index) => ({
+      id: `size-template-${Date.now()}-${index}-${file.name}`,
+      src: URL.createObjectURL(file),
+      name: file.name,
+    }));
+}
+
+function SizeTemplatePage({ onOpenEcommerce }: SizeTemplatePageProps) {
+  const uploadInputRef = useRef<HTMLInputElement>(null);
+  const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const uploadObjectUrlsRef = useRef<string[]>([]);
+  const [activeGroup, setActiveGroup] = useState(sizeTemplateGroups[0]!.key);
+  const [activePresetTitle, setActivePresetTitle] = useState(sizeTemplatePresets[0]!.title);
+  const [activePanelTab, setActivePanelTab] = useState<"preset" | "detail">("preset");
+  const [platformDialogOpen, setPlatformDialogOpen] = useState(false);
+  const [typeDialogOpen, setTypeDialogOpen] = useState(false);
+  const [sizeDialogOpen, setSizeDialogOpen] = useState(false);
+  const [activeSizeOptionByTitle, setActiveSizeOptionByTitle] = useState<Record<string, string>>({});
+  const [uploadedImages, setUploadedImages] = useState<SizeTemplateUploadImage[]>([]);
+  const [isUploadDragging, setIsUploadDragging] = useState(false);
+  const [isSettingsCollapsed, setIsSettingsCollapsed] = useState(false);
+  const [requirement, setRequirement] = useState("");
+  const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
+
+  const filteredTemplates = useMemo(
+    () => sizeTemplatePresets.filter((item) => item.group === activeGroup),
+    [activeGroup],
+  );
+  const selectedPreset =
+    filteredTemplates.find((item) => item.title === activePresetTitle) ?? filteredTemplates[0] ?? sizeTemplatePresets[0]!;
+  const activeGroupLabel = sizeTemplateGroups.find((item) => item.key === selectedPreset.group)?.label ?? "尺寸模板";
+  const platformOptions =
+    activeGroup === "socialCn"
+      ? socialContentPlatformOptions
+      : activeGroup === "socialGlobal"
+        ? internationalSocialPlatformOptions
+        : activeGroup === "ecommerce"
+          ? ecommercePlatformOptions
+          : activeGroup === "id"
+            ? idPhotoPlatformOptions
+          : [];
+  const selectedPlatformLabel =
+    platformOptions.length
+      ? (platformOptions.find((item) => item.category === selectedPreset.category)?.label ?? selectedPreset.category)
+      : selectedPreset.category;
+  const typeOptions = typeOptionsByCategory[selectedPreset.category as keyof typeof typeOptionsByCategory] ?? [];
+  const selectedTypeLabel = typeOptions.find((option) => option.title === selectedPreset.title)?.label ?? selectedPreset.title;
+  const sizeOptions = sizeOptionsByPresetTitle[selectedPreset.title] ?? [];
+  const selectedSizeOption =
+    sizeOptions.find((option) => option.mainSpec === activeSizeOptionByTitle[selectedPreset.title]) ?? sizeOptions[0];
+  const selectedMainSpec = selectedSizeOption?.mainSpec ?? selectedPreset.mainSpec;
+  const selectedRatio = selectedSizeOption?.ratio ?? selectedPreset.ratio;
+  const primaryUploadedImage = uploadedImages[0] ?? null;
+  const sizeTemplateMentionImages: MentionImageOption[] = uploadedImages.map((image, index) => ({
+    ...image,
+    label: `上传图 ${index + 1}`,
+  }));
+
+  const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
+    setRequirementImageMentionQuery(sizeTemplateMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
+  };
+
+  const insertRequirementImageMention = (image: MentionImageOption) => {
+    const textarea = requirementTextareaRef.current;
+    const cursor = textarea?.selectionStart ?? requirement.length;
+    const next = insertImageMentionValue(requirement, cursor, image.name, 500);
+    setRequirement(next.value);
+    setRequirementImageMentionQuery(null);
+    window.requestAnimationFrame(() => {
+      requirementTextareaRef.current?.focus();
+      requirementTextareaRef.current?.setSelectionRange(next.selectionStart, next.selectionStart);
+    });
+  };
+
+  useEffect(
+    () => () => {
+      uploadObjectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+      uploadObjectUrlsRef.current = [];
+    },
+    [],
+  );
+
+  const addUploadedImages = (files: File[]) => {
+    const remainingSlots = 7 - uploadedImages.length;
+    if (remainingSlots <= 0) return;
+    const nextImages = createSizeTemplateUploadItems(files, remainingSlots);
+    if (!nextImages.length) return;
+    uploadObjectUrlsRef.current.push(...nextImages.map((item) => item.src));
+    setUploadedImages((current) => [...current, ...nextImages].slice(0, 7));
+  };
+
+  const handleUploadChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files?.length) return;
+    addUploadedImages(Array.from(files));
+    event.target.value = "";
+  };
+
+  const handleUploadDrop = (event: DragEvent<HTMLElement>) => {
+    event.preventDefault();
+    setIsUploadDragging(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length) addUploadedImages(files);
+  };
+
+  const removeUploadedImage = (imageId: string) => {
+    setUploadedImages((current) => {
+      const removed = current.find((item) => item.id === imageId);
+      if (removed) {
+        URL.revokeObjectURL(removed.src);
+        uploadObjectUrlsRef.current = uploadObjectUrlsRef.current.filter((url) => url !== removed.src);
+      }
+      return current.filter((item) => item.id !== imageId);
+    });
+  };
+
+  const selectGroup = (group: string) => {
+    setActiveGroup(group);
+    setPlatformDialogOpen(false);
+    setTypeDialogOpen(false);
+    setSizeDialogOpen(false);
+    const firstPreset = sizeTemplatePresets.find((item) => item.group === group);
+    if (firstPreset) setActivePresetTitle(firstPreset.title);
+  };
+
+  const selectPlatform = (category: string) => {
+    const nextPreset = sizeTemplatePresets.find((item) => item.group === activeGroup && item.category === category);
+    if (nextPreset) setActivePresetTitle(nextPreset.title);
+    setPlatformDialogOpen(false);
+    setTypeDialogOpen(false);
+    setSizeDialogOpen(false);
+  };
+
+  const selectType = (title: string) => {
+    setActivePresetTitle(title);
+    setPlatformDialogOpen(false);
+    setTypeDialogOpen(false);
+    setSizeDialogOpen(false);
+  };
+
+  const selectSizeOption = (mainSpec: string) => {
+    setActiveSizeOptionByTitle((current) => ({ ...current, [selectedPreset.title]: mainSpec }));
+    setPlatformDialogOpen(false);
+    setTypeDialogOpen(false);
+    setSizeDialogOpen(false);
+  };
+
+  return (
+    <section
+      className={`product-clone-page page-motion size-template-workbench${isSettingsCollapsed ? " is-settings-collapsed" : ""}`}
+      data-tool="clone"
+      aria-label="尺寸模板"
+    >
+      <div className="product-clone-shell">
+        <aside
+          id="size-template-settings-panel"
+          className="product-clone-panel"
+          aria-label="尺寸模板参数"
+          aria-hidden={isSettingsCollapsed ? true : undefined}
+        >
+          <div className="product-clone-panel__scroll clone-ai-panel size-template-settings-panel">
+            <section className="clone-ai-card size-template-upload-card">
+              <h2>
+                <CloudUploadOutlined />
+                上传商品原图
+              </h2>
+              <div
+                role="button"
+                tabIndex={0}
+                className={`clone-ai-upload-zone size-template-upload-zone${isUploadDragging ? " is-dragging" : ""}`}
+                onClick={() => uploadInputRef.current?.click()}
+                onKeyDown={(event) => {
+                  if (event.target !== event.currentTarget) return;
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    uploadInputRef.current?.click();
+                  }
+                }}
+                onDragEnter={(event) => {
+                  event.preventDefault();
+                  setIsUploadDragging(true);
+                }}
+                onDragOver={(event) => event.preventDefault()}
+                onDragLeave={() => setIsUploadDragging(false)}
+                onDrop={handleUploadDrop}
+              >
+                <div className="clone-ai-upload-main">
+                  <span className="clone-ai-upload-icon">
+                    <FileImageOutlined />
+                  </span>
+                  <span className="clone-ai-upload-title">拖拽或点击上传</span>
+                  <strong>
+                    <span aria-hidden="true">+</span>
+                    上传图片
+                  </strong>
+                  <span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
+                </div>
+                {uploadedImages.length ? (
+                  <div className="clone-ai-uploaded-files size-template-uploaded-files" aria-label="已上传商品原图">
+                    {uploadedImages.map((item) => (
+                      <figure key={item.id} className="clone-ai-uploaded-file">
+                        <img src={item.src} alt={item.name} />
+                        <span className="uploaded-image-zoom" aria-hidden="true">
+                          <img src={item.src} alt="" />
+                        </span>
+                        <button
+                          type="button"
+                          aria-label={`移除 ${item.name}`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            removeUploadedImage(item.id);
+                          }}
+                        >
+                          <CloseOutlined />
+                        </button>
+                      </figure>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+              <input ref={uploadInputRef} type="file" accept="image/*" multiple onChange={handleUploadChange} />
+            </section>
+
+            <section className="clone-ai-card size-template-generate-card">
+              <h2>
+                <SettingOutlined />
+                生成设置
+              </h2>
+              <div className="clone-ai-settings-section">
+                <span className="clone-ai-settings-label">生成内容</span>
+                <div className="clone-ai-tag-group size-template-category-grid" role="tablist" aria-label="尺寸模板分类">
+                  {sizeTemplateGroups.map((group) => (
+                    <button
+                      key={group.key}
+                      type="button"
+                      role="tab"
+                      aria-selected={activeGroup === group.key}
+                      className={activeGroup === group.key ? "is-active" : ""}
+                      onClick={() => selectGroup(group.key)}
+                    >
+                      {group.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="clone-ai-settings-section">
+                <span className="clone-ai-settings-label">基础信息</span>
+                <div className="clone-ai-select-group">
+                  {[
+                    { key: "platform", label: "平台", value: selectedPlatformLabel },
+                    { key: "type", label: "类型", value: typeOptions.length > 0 ? selectedTypeLabel : selectedPreset.title },
+                    { key: "size", label: "尺寸", value: selectedMainSpec },
+                    { key: "ratio", label: "比例", value: selectedRatio },
+                  ].map((item) => {
+                    const isPlatformSelect = platformOptions.length > 0 && item.key === "platform";
+                    const isTypeSelect = typeOptions.length > 0 && item.key === "type";
+                    const isSizeSelect = sizeOptions.length > 0 && item.key === "size";
+                    const isClickable = isPlatformSelect || isTypeSelect || isSizeSelect;
+                    return (
+                      <div
+                        key={item.label}
+                        className={`clone-ai-basic-select size-template-static-field${isClickable ? " is-clickable" : ""}`}
+                      >
+                        <button
+                          type="button"
+                          aria-expanded={
+                            isClickable
+                              ? isPlatformSelect
+                                ? platformDialogOpen
+                                : isTypeSelect
+                                  ? typeDialogOpen
+                                  : sizeDialogOpen
+                              : undefined
+                          }
+                          aria-haspopup={isClickable ? "dialog" : undefined}
+                          onClick={
+                            isPlatformSelect
+                              ? () => {
+                                  setTypeDialogOpen(false);
+                                  setSizeDialogOpen(false);
+                                  setPlatformDialogOpen((current) => !current);
+                                }
+                              : isTypeSelect
+                                ? () => {
+                                    setPlatformDialogOpen(false);
+                                    setSizeDialogOpen(false);
+                                    setTypeDialogOpen((current) => !current);
+                                  }
+                                : isSizeSelect
+                                  ? () => {
+                                      setPlatformDialogOpen(false);
+                                      setTypeDialogOpen(false);
+                                      setSizeDialogOpen((current) => !current);
+                                    }
+                                  : undefined
+                          }
+                        >
+                          <span>{item.label}</span>
+                          <strong>{item.value}</strong>
+                          <i aria-hidden="true" />
+                        </button>
+                        {isPlatformSelect && platformDialogOpen ? (
+                          <div className="size-template-platform-dialog" role="dialog" aria-label="选择平台">
+                            {platformOptions.map((option) => (
+                              <button
+                                key={option.category}
+                                type="button"
+                                className={selectedPreset.category === option.category ? "is-active" : ""}
+                                onClick={() => selectPlatform(option.category)}
+                              >
+                                {option.label}
+                              </button>
+                            ))}
+                          </div>
+                        ) : null}
+                        {isTypeSelect && typeDialogOpen ? (
+                          <div className="size-template-platform-dialog" role="dialog" aria-label="选择类型">
+                            {typeOptions.map((option) => (
+                              <button
+                                key={option.title}
+                                type="button"
+                                className={selectedPreset.title === option.title ? "is-active" : ""}
+                                onClick={() => selectType(option.title)}
+                              >
+                                {option.label}
+                              </button>
+                            ))}
+                          </div>
+                        ) : null}
+                        {isSizeSelect && sizeDialogOpen ? (
+                          <div className="size-template-platform-dialog" role="dialog" aria-label="选择尺寸">
+                            {sizeOptions.map((option) => (
+                              <button
+                                key={option.mainSpec}
+                                type="button"
+                                className={selectedMainSpec === option.mainSpec ? "is-active" : ""}
+                                onClick={() => selectSizeOption(option.mainSpec)}
+                              >
+                                {option.label}
+                              </button>
+                            ))}
+                          </div>
+                        ) : null}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </section>
+
+            <section className="clone-ai-model-panel size-template-option-panel" aria-label="平台尺寸设置">
+              <div className="clone-ai-model-tabs" role="tablist" aria-label="尺寸模板设置类型">
+                <button
+                  type="button"
+                  className={activePanelTab === "preset" ? "is-active" : ""}
+                  aria-selected={activePanelTab === "preset"}
+                  onClick={() => setActivePanelTab("preset")}
+                >
+                  平台尺寸
+                </button>
+                <button
+                  type="button"
+                  className={activePanelTab === "detail" ? "is-active" : ""}
+                  aria-selected={activePanelTab === "detail"}
+                  onClick={() => setActivePanelTab("detail")}
+                >
+                  补充规格
+                </button>
+              </div>
+              <div className="clone-ai-model-scroll">
+                {activePanelTab === "preset" ? (
+                  <div className="clone-ai-model-scene-grid size-template-option-grid">
+                    {filteredTemplates.map((item) => (
+                      <button
+                        key={item.title}
+                        type="button"
+                        className={selectedPreset.title === item.title ? "is-active" : ""}
+                        aria-pressed={selectedPreset.title === item.title}
+                        onClick={() => {
+                          setActivePresetTitle(item.title);
+                          setPlatformDialogOpen(false);
+                          setTypeDialogOpen(false);
+                          setSizeDialogOpen(false);
+                        }}
+                      >
+                        <span aria-hidden="true" />
+                        {item.title}
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="clone-ai-model-scene-grid size-template-option-grid">
+                    {selectedPreset.details.map((item) => (
+                      <button key={item} type="button" className="is-active">
+                        <span aria-hidden="true" />
+                        {item}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </section>
+
+            <button type="button" className="clone-ai-generate size-template-submit" onClick={onOpenEcommerce}>
+              ✦ 开始生成
+            </button>
+          </div>
+        </aside>
+
+        <button
+          type="button"
+          className="clone-ai-settings-toggle"
+          onClick={() => setIsSettingsCollapsed((current) => !current)}
+          aria-label={isSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
+          aria-controls="size-template-settings-panel"
+          aria-expanded={!isSettingsCollapsed}
+          title={isSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
+        >
+          {isSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </button>
+
+        <main className="product-clone-preview clone-ai-preview size-template-preview" aria-label="尺寸模板预览">
+          <header className="clone-ai-preview-header size-template-preview-header">
+            <strong>预览</strong>
+            <span>
+              上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
+            </span>
+          </header>
+
+          <section className={`clone-ai-empty-state size-template-empty-state${primaryUploadedImage ? " has-upload" : ""}`} aria-live="polite">
+            {primaryUploadedImage ? (
+              <img className="size-template-empty-state__image" src={primaryUploadedImage.src} alt={primaryUploadedImage.name} />
+            ) : (
+              <FileImageOutlined />
+            )}
+            <strong>{primaryUploadedImage ? "已添加参考图" : "等待生成"}</strong>
+            <span>{primaryUploadedImage ? `已上传 ${uploadedImages.length}/7 张，开始生成后将套用当前尺寸。` : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}</span>
+          </section>
+
+          <section className="clone-ai-bottom-input" aria-label="信息详情">
+            <div className="clone-ai-input-wrapper">
+              <textarea
+                ref={requirementTextareaRef}
+                value={requirement}
+                onChange={(event) => {
+                  const nextValue = event.target.value.slice(0, 500);
+                  setRequirement(nextValue);
+                  syncRequirementMentionQuery(nextValue, event.target.selectionStart);
+                }}
+                onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
+                onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
+                onKeyDown={(event) => {
+                  if (event.key === "Escape") setRequirementImageMentionQuery(null);
+                }}
+                maxLength={500}
+                placeholder="补充尺寸用途，例如平台、商品类型、是否需要留白或安全区"
+              />
+              {requirementImageMentionQuery !== null && sizeTemplateMentionImages.length ? (
+                <ImageMentionMenu images={sizeTemplateMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
+              ) : null}
+              <button type="button" className="clone-ai-send-button" onClick={onOpenEcommerce} aria-label="应用到电商生成">
+                ↑
+              </button>
+            </div>
+            <span className="clone-ai-char-count">{requirement.length}/500</span>
+          </section>
+        </main>
+      </div>
+    </section>
+  );
+}
+
+export default SizeTemplatePage;
diff --git a/src/features/subtitle-removal/SubtitleRemovalPage.tsx b/src/features/subtitle-removal/SubtitleRemovalPage.tsx
new file mode 100644
index 0000000..3a3b48a
--- /dev/null
+++ b/src/features/subtitle-removal/SubtitleRemovalPage.tsx
@@ -0,0 +1,434 @@
+import {
+  CameraOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FileImageOutlined,
+  FolderAddOutlined,
+  FontSizeOutlined,
+  HighlightOutlined,
+  LinkOutlined,
+  SwapOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { waitForTask } from "../../api/taskSubscription";
+import { getServerBaseUrl, isServerRequestError } from "../../api/serverConnection";
+import { summarizeUrl, formatFileSize, fileToDataUrl } from "../../utils/toolPageUtils";
+import TaskStatusBar from "../../components/TaskStatusBar";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+
+interface SubtitleRegionPreset {
+  id: string;
+  label: string;
+  desc: string;
+  by: number;
+  bh: number;
+}
+
+const regionPresets: SubtitleRegionPreset[] = [
+  { id: "bottom", label: "底部字幕", desc: "最常见的字幕位置", by: 0.75, bh: 0.25 },
+  { id: "bottom-narrow", label: "底部单行", desc: "仅底部一小条区域", by: 0.85, bh: 0.15 },
+  { id: "top", label: "顶部字幕", desc: "顶部弹幕或标题区域", by: 0, bh: 0.2 },
+  { id: "full", label: "全屏扫描", desc: "去除画面中所有文字", by: 0, bh: 1 },
+];
+
+interface SubtitleRemovalPageProps {
+  isAuthenticated?: boolean;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function formatCreateTaskError(error: unknown): string {
+  if (isServerRequestError(error) && error.status === 404) {
+    const baseUrl = getServerBaseUrl() || window.location.origin;
+    return `当前连接的服务端 ${baseUrl} 还没有部署 /api/ai/video/erase-subtitles 接口，请更新并重启服务端后再试`;
+  }
+  return error instanceof Error ? error.message : "字幕去除任务创建失败，请稍后重试";
+}
+
+function SubtitleRemovalPage({
+  isAuthenticated = false,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: SubtitleRemovalPageProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pollRunRef = useRef(0);
+  const cancelRef = useRef(false);
+  const [sourceName, setSourceName] = useState("");
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [sourceUrl, setSourceUrl] = useState("");
+  const [sourcePreview, setSourcePreview] = useState("");
+  const [resultUrl, setResultUrl] = useState("");
+  const [activePreset, setActivePreset] = useState("bottom");
+  const [status, setStatus] = useState("上传视频后点击开始去除字幕");
+  const [activeTaskId, setActiveTaskId] = useState("");
+  const [taskProgress, setTaskProgress] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isSavingAsset, setIsSavingAsset] = useState(false);
+  const activeTaskIdRef = useRef(activeTaskId);
+  activeTaskIdRef.current = activeTaskId;
+
+  useEffect(() => {
+    return () => {
+      pollRunRef.current += 1;
+      cancelRef.current = true;
+      if (activeTaskIdRef.current) {
+        aiGenerationClient.cancelTask(activeTaskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const clearSource = () => {
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName("");
+    setSourceFile(null);
+    setSourceUrl("");
+    setSourcePreview("");
+    setResultUrl("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus("已清空素材");
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName(file.name);
+    setSourceFile(file);
+    setSourceUrl("");
+    setSourcePreview(URL.createObjectURL(file));
+    setResultUrl("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 ${file.name}`);
+    event.currentTarget.value = "";
+  };
+
+  const handleFileDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("video/"));
+    if (!file) return;
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName(file.name);
+    setSourceFile(file);
+    setSourceUrl("");
+    setSourcePreview(URL.createObjectURL(file));
+    setResultUrl("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 ${file.name}`);
+  };
+
+  const handleImportUrl = () => {
+    const normalized = sourceUrl.trim();
+    if (!/^https?:\/\//i.test(normalized)) {
+      setStatus("请输入可访问的 HTTP/HTTPS 视频 URL");
+      return;
+    }
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceFile(null);
+    setSourceName(summarizeUrl(normalized));
+    setSourcePreview(normalized);
+    setResultUrl("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 URL：${summarizeUrl(normalized)}`);
+  };
+
+  const getSourceGenerationUrl = async () => {
+    if (!sourceFile) return sourcePreview;
+    setStatus(`正在上传 ${sourceFile.name}，${formatFileSize(sourceFile.size)}`);
+    const uploaded = await aiGenerationClient.uploadAsset({
+      dataUrl: await fileToDataUrl(sourceFile),
+      name: sourceFile.name,
+      mimeType: sourceFile.type || "video/mp4",
+    });
+    return uploaded.signedUrl || uploaded.url;
+  };
+
+  const waitForTaskResult = async (taskId: string) => {
+    const runId = ++pollRunRef.current;
+    setActiveTaskId(taskId);
+    setTaskProgress(5);
+
+    await waitForTask(taskId, {
+      abortRef: cancelRef,
+      onProgress: (e) => {
+        if (pollRunRef.current !== runId) return;
+        const progress = Math.max(0, Math.min(100, Math.trunc(e.progress || 0)));
+        setTaskProgress(progress);
+        setStatus(`任务 ${taskId} ${e.status}，进度 ${progress}%`);
+        if (e.status === "completed" && e.resultUrl) {
+          setResultUrl(e.resultUrl);
+          setStatus("字幕去除完成");
+          setTaskProgress(100);
+        }
+      },
+    });
+
+    if (cancelRef.current) throw new Error("已取消");
+    if (pollRunRef.current !== runId) throw new Error("当前任务已被新任务替换");
+  };
+
+  const handleCancel = useCallback(() => {
+    cancelRef.current = true;
+    if (activeTaskId) {
+      aiGenerationClient.cancelTask(activeTaskId).catch(() => {});
+    }
+    setIsProcessing(false);
+    setStatus("已取消");
+  }, [activeTaskId]);
+
+  const handleDownload = async () => {
+    if (!resultUrl || isDownloading) return;
+    setIsDownloading(true);
+    try {
+      await saveToolResultToLocal({
+        url: resultUrl,
+        name: `subtitle-removed-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "去字幕", "生成视频"],
+      });
+      setStatus("下载完成");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "下载失败");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleSaveToAssets = async () => {
+    if (!resultUrl || isSavingAsset) return;
+    setIsSavingAsset(true);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url: resultUrl,
+        name: `subtitle-removed-${Date.now()}.mp4`,
+        description: "工具盒去字幕生成结果",
+        type: "video",
+        isVideo: true,
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "去字幕", "生成视频"],
+      });
+      setStatus(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingAsset(false);
+    }
+  };
+
+  const handleStart = async () => {
+    if (!isAuthenticated) {
+      setStatus("请先登录后再创建字幕去除任务");
+      return;
+    }
+    if (!sourcePreview) {
+      setStatus("请先上传需要去除字幕的视频");
+      return;
+    }
+    if (isProcessing) return;
+
+    setIsProcessing(true);
+    setResultUrl("");
+    setTaskProgress(0);
+    cancelRef.current = false;
+    try {
+      const generationUrl = await getSourceGenerationUrl();
+      setStatus(`素材已就绪：${summarizeUrl(generationUrl)}，正在提交任务`);
+      const preset = regionPresets.find((p) => p.id === activePreset) || regionPresets[0];
+      const result = await aiGenerationClient.createEraseSubtitlesTask({
+        videoUrl: generationUrl,
+        bx: 0,
+        by: preset.by,
+        bw: 1,
+        bh: preset.bh,
+      });
+      await waitForTaskResult(result.taskId);
+    } catch (error) {
+      setStatus(formatCreateTaskError(error));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <section className="image-workbench-page subtitle-removal-page">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <HighlightOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" onClick={() => onSelectView?.("characterMix")}>
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <VideoCameraOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" className="is-active">
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <FontSizeOutlined />
+        </button>
+        <strong>字幕去除</strong>
+      </div>
+
+      <main className="image-workbench-layout image-workbench-layout--camera subtitle-removal-layout">
+        <aside className="image-workbench-panel image-workbench-panel--left">
+          <section className="image-workbench-control-card">
+            <div className="image-workbench-section-title">
+              <h3>视频素材</h3>
+              <span>{sourcePreview ? "已上传" : "待上传"}</span>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="video/mp4"
+              onChange={handleFileChange}
+            />
+            <div className="image-workbench-upload-shell" onDragOver={(e) => e.preventDefault()} onDrop={handleFileDrop}>
+              <button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
+                <FileImageOutlined />
+                <strong>{sourceName || "拖拽或选择视频"}</strong>
+                <span>仅支持 MP4，最大 1GB，最高 1080P</span>
+              </button>
+              {sourcePreview ? (
+                <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
+                  ×
+                </button>
+              ) : null}
+            </div>
+            <div className="image-workbench-url-row">
+              <label>
+                <LinkOutlined />
+                <input
+                  value={sourceUrl}
+                  placeholder="粘贴视频 URL（不含中文字符）"
+                  onChange={(event) => setSourceUrl(event.target.value)}
+                />
+              </label>
+              <button type="button" onClick={handleImportUrl}>导入</button>
+            </div>
+          </section>
+
+          <section className="image-workbench-control-card">
+            <h3>字幕位置</h3>
+            <div className="subtitle-removal-presets">
+              {regionPresets.map((preset) => (
+                <button
+                  key={preset.id}
+                  type="button"
+                  className={`subtitle-removal-preset${activePreset === preset.id ? " is-active" : ""}`}
+                  onClick={() => setActivePreset(preset.id)}
+                >
+                  <div className="subtitle-removal-preset__visual">
+                    <div
+                      className="subtitle-removal-preset__region"
+                      style={{ "--region-top": `${preset.by * 100}%`, "--region-height": `${preset.bh * 100}%` } as CSSProperties}
+                    />
+                  </div>
+                  <strong>{preset.label}</strong>
+                  <span>{preset.desc}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+
+          <div className="image-workbench-actions">
+            <button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
+              <DeleteOutlined />
+              {isProcessing ? "处理中" : "开始去除字幕"}
+            </button>
+            {isProcessing && (
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
+                取消
+              </button>
+            )}
+          </div>
+        </aside>
+
+        <section className="image-workbench-canvas image-workbench-canvas--camera subtitle-removal-canvas" aria-label="字幕去除画布">
+          {sourcePreview ? (
+            <div className="subtitle-removal-preview">
+              <div className="subtitle-removal-preview__video-wrap">
+                <video src={sourcePreview} controls />
+                {!resultUrl && (
+                  <div
+                    className="subtitle-removal-preview__region-overlay"
+                    style={{
+                      "--region-top": `${(regionPresets.find((p) => p.id === activePreset) || regionPresets[0]).by * 100}%`,
+                      "--region-height": `${(regionPresets.find((p) => p.id === activePreset) || regionPresets[0]).bh * 100}%`,
+                    } as CSSProperties}
+                  />
+                )}
+              </div>
+              {resultUrl && (
+                <div className="subtitle-removal-preview__video-wrap">
+                  <h4>去除字幕后</h4>
+                  <video src={resultUrl} controls />
+                  <div className="subtitle-removal-preview__actions">
+                    <button type="button" onClick={() => void handleSaveToAssets()} disabled={isSavingAsset}>
+                      <FolderAddOutlined />
+                      {isSavingAsset ? "加入中" : "加入资产库"}
+                    </button>
+                    <button type="button" onClick={() => void handleDownload()} disabled={isDownloading}>
+                      <DownloadOutlined />
+                      {isDownloading ? "保存中" : "保存本地"}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="image-workbench-empty-canvas">
+              <DeleteOutlined style={{ fontSize: 48, opacity: 0.2 }} />
+              <p>上传视频后在此预览</p>
+            </div>
+          )}
+        </section>
+      </main>
+
+      <TaskStatusBar taskId={activeTaskId} status={status} progress={taskProgress} idleLabel="字幕去除" />
+    </section>
+  );
+}
+
+export default SubtitleRemovalPage;
diff --git a/src/features/watermark-removal/WatermarkRemovalPage.tsx b/src/features/watermark-removal/WatermarkRemovalPage.tsx
new file mode 100644
index 0000000..a6cf6d4
--- /dev/null
+++ b/src/features/watermark-removal/WatermarkRemovalPage.tsx
@@ -0,0 +1,407 @@
+import {
+  CameraOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FileImageOutlined,
+  FolderAddOutlined,
+  FontSizeOutlined,
+  LinkOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { waitForTask } from "../../api/taskSubscription";
+import { getServerBaseUrl, isServerRequestError } from "../../api/serverConnection";
+import { summarizeUrl, formatFileSize, fileToDataUrl } from "../../utils/toolPageUtils";
+import TaskStatusBar from "../../components/TaskStatusBar";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+
+interface WatermarkRemovalPageProps {
+  isAuthenticated?: boolean;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function WatermarkRemovalPage({
+  isAuthenticated = false,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: WatermarkRemovalPageProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pollRunRef = useRef(0);
+  const cancelRef = useRef(false);
+  const [sourceName, setSourceName] = useState("");
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [sourceUrl, setSourceUrl] = useState("");
+  const [sourcePreview, setSourcePreview] = useState("");
+  const [resultPreview, setResultPreview] = useState("");
+  const [status, setStatus] = useState("上传含水印的图片，点击开始去水印");
+  const [activeTaskId, setActiveTaskId] = useState("");
+  const [taskProgress, setTaskProgress] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isSavingAsset, setIsSavingAsset] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const activeTaskIdRef = useRef(activeTaskId);
+  activeTaskIdRef.current = activeTaskId;
+
+  useEffect(() => {
+    return () => {
+      if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    };
+  }, [sourcePreview]);
+
+  useEffect(() => {
+    return () => {
+      pollRunRef.current += 1;
+      cancelRef.current = true;
+      if (activeTaskIdRef.current) {
+        aiGenerationClient.cancelTask(activeTaskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const clearSource = () => {
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName("");
+    setSourceFile(null);
+    setSourceUrl("");
+    setSourcePreview("");
+    setResultPreview("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus("已清空素材");
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName(file.name);
+    setSourceFile(file);
+    setSourceUrl("");
+    setSourcePreview(URL.createObjectURL(file));
+    setResultPreview("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 ${file.name}`);
+    event.currentTarget.value = "";
+  };
+
+  const handleFileDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("image/"));
+    if (!file) return;
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceName(file.name);
+    setSourceFile(file);
+    setSourceUrl("");
+    setSourcePreview(URL.createObjectURL(file));
+    setResultPreview("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 ${file.name}`);
+  };
+
+  const handleImportUrl = () => {
+    const normalizedUrl = sourceUrl.trim();
+    if (!/^https?:\/\//i.test(normalizedUrl)) {
+      setStatus("请输入可访问的 HTTP/HTTPS 图片 URL");
+      return;
+    }
+    if (sourcePreview.startsWith("blob:")) URL.revokeObjectURL(sourcePreview);
+    setSourceFile(null);
+    setSourceName(summarizeUrl(normalizedUrl));
+    setSourcePreview(normalizedUrl);
+    setResultPreview("");
+    setActiveTaskId("");
+    setTaskProgress(0);
+    setStatus(`已导入 URL：${summarizeUrl(normalizedUrl)}`);
+  };
+
+  const getSourceGenerationUrl = async () => {
+    if (!sourceFile) return sourcePreview;
+    setStatus(`正在上传 ${sourceFile.name}，${formatFileSize(sourceFile.size)}`);
+    const uploaded = await aiGenerationClient.uploadAsset({
+      dataUrl: await fileToDataUrl(sourceFile),
+      name: sourceFile.name,
+      mimeType: sourceFile.type || "image/png",
+    });
+    return uploaded.signedUrl || uploaded.url;
+  };
+
+  const waitForTaskResult = async (taskId: string) => {
+    const runId = ++pollRunRef.current;
+    setActiveTaskId(taskId);
+    setTaskProgress(5);
+
+    await waitForTask(taskId, {
+      abortRef: cancelRef,
+      onProgress: (e) => {
+        if (pollRunRef.current !== runId) return;
+        const progress = Math.max(0, Math.min(100, Math.trunc(e.progress || 0)));
+        setTaskProgress(progress);
+        setStatus(`任务 ${taskId} ${e.status}，进度 ${progress}%`);
+        if (e.status === "completed" && e.resultUrl) {
+          setResultPreview(e.resultUrl);
+          setStatus("去水印完成");
+          setTaskProgress(100);
+        }
+      },
+    });
+
+    if (cancelRef.current) throw new Error("已取消");
+    if (pollRunRef.current !== runId) throw new Error("任务已被替换");
+  };
+
+  const handleCancel = useCallback(() => {
+    cancelRef.current = true;
+    if (activeTaskId) {
+      aiGenerationClient.cancelTask(activeTaskId).catch(() => {});
+    }
+    setIsProcessing(false);
+    setStatus("已取消");
+  }, [activeTaskId]);
+
+  const handleDownload = async () => {
+    if (!resultPreview || isDownloading) return;
+    setIsDownloading(true);
+    try {
+      await saveToolResultToLocal({
+        url: resultPreview,
+        name: "watermark-removed",
+        type: "image",
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "去水印", "生成图片"],
+      });
+      setStatus("下载完成");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "下载失败");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleSaveToAssets = async () => {
+    if (!resultPreview || isSavingAsset) return;
+    setIsSavingAsset(true);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url: resultPreview,
+        name: `watermark-removed-${Date.now()}.png`,
+        description: "工具盒去水印生成结果",
+        type: "image",
+        taskId: activeTaskId || undefined,
+        tags: ["工具盒", "去水印", "生成图片"],
+      });
+      setStatus(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingAsset(false);
+    }
+  };
+
+  const handleStart = async () => {
+    if (!isAuthenticated) {
+      setStatus("请先登录后再使用去水印功能");
+      return;
+    }
+    if (!sourcePreview) {
+      setStatus("请先上传需要去水印的图片");
+      return;
+    }
+    if (isProcessing) return;
+
+    setIsProcessing(true);
+    setResultPreview("");
+    setTaskProgress(0);
+    cancelRef.current = false;
+    try {
+      const generationUrl = await getSourceGenerationUrl();
+      setStatus(`素材已就绪，正在提交去水印任务`);
+      const result = await aiGenerationClient.createImageEditTask({
+        imageUrl: generationUrl,
+        function: "remove_watermark",
+        prompt: "去除图像中的文字",
+        n: 1,
+      });
+      await waitForTaskResult(result.taskId);
+    } catch (error) {
+      if (isServerRequestError(error) && error.status === 404) {
+        const baseUrl = getServerBaseUrl() || window.location.origin;
+        setStatus(`服务端 ${baseUrl} 还没有部署 /api/ai/image/edit 接口，请更新服务端`);
+      } else {
+        setStatus(error instanceof Error ? error.message : "去水印任务失败，请稍后重试");
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <section className="image-workbench-page watermark-removal-page">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" onClick={() => onSelectView?.("characterMix")}>
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" className="is-active" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <DeleteOutlined />
+        </button>
+        <strong>去水印</strong>
+      </div>
+
+      <main className="image-workbench-layout image-workbench-layout--camera watermark-removal-layout">
+        <aside className="image-workbench-panel image-workbench-panel--left">
+          <section className="image-workbench-control-card">
+            <div className="image-workbench-section-title">
+              <h3>素材</h3>
+              <span>{sourcePreview ? "已上传" : "待上传"}</span>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              onChange={handleFileChange}
+            />
+            <div className="image-workbench-upload-shell" onDragOver={(e) => e.preventDefault()} onDrop={handleFileDrop}>
+              <button type="button" className="image-workbench-upload" onClick={() => fileInputRef.current?.click()}>
+                {sourcePreview ? <img src={sourcePreview} alt="" /> : <FileImageOutlined />}
+                <strong>{sourceName || "拖拽或选择图片"}</strong>
+                <span>PNG / JPG / WebP</span>
+              </button>
+              {sourcePreview ? (
+                <button type="button" className="image-workbench-upload-remove" aria-label="删除素材" onClick={clearSource}>
+                  ×
+                </button>
+              ) : null}
+            </div>
+            <div className="image-workbench-url-row">
+              <label>
+                <LinkOutlined />
+                <input
+                  value={sourceUrl}
+                  placeholder="粘贴图片 URL"
+                  onChange={(event) => setSourceUrl(event.target.value)}
+                />
+              </label>
+              <button type="button" onClick={handleImportUrl}>导入</button>
+            </div>
+          </section>
+
+          <section className="image-workbench-control-card">
+            <h3>说明</h3>
+            <p className="watermark-removal-hint">
+              使用 AI 智能识别并去除图片中的水印和文字。上传含水印图片后点击开始即可。
+            </p>
+          </section>
+
+          <div className="image-workbench-actions">
+            <button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
+              <DeleteOutlined />
+              {isProcessing ? "处理中" : "开始去水印"}
+            </button>
+            {isProcessing && (
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
+                取消
+              </button>
+            )}
+          </div>
+        </aside>
+
+        <section className="image-workbench-canvas image-workbench-canvas--camera watermark-removal-canvas" aria-label="去水印画布">
+          {sourcePreview ? (
+            <div className="watermark-removal-compare">
+              <div className="watermark-removal-compare__panel">
+                <span className="watermark-removal-compare__label">原图</span>
+                <img src={sourcePreview} alt="原图预览" />
+              </div>
+              <div className="watermark-removal-compare__panel">
+                <span className="watermark-removal-compare__label">{resultPreview ? "去水印结果" : "等待结果"}</span>
+                {resultPreview ? (
+                  <>
+                    <img src={resultPreview} alt="去水印结果" />
+                    <div className="watermark-removal-compare__actions">
+                      <button type="button" onClick={() => void handleSaveToAssets()} disabled={isSavingAsset}>
+                        <FolderAddOutlined />
+                        {isSavingAsset ? "加入中" : "加入资产库"}
+                      </button>
+                      <button type="button" onClick={() => void handleDownload()} disabled={isDownloading}>
+                        <DownloadOutlined />
+                        {isDownloading ? "保存中" : "保存本地"}
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="watermark-removal-compare__placeholder">
+                    <DeleteOutlined />
+                    <span>{isProcessing ? "处理中..." : "点击开始去水印"}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              className="image-workbench-empty image-workbench-empty--button"
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={handleFileDrop}
+            >
+              <DeleteOutlined />
+              <strong>拖拽或选择含水印图片</strong>
+              <span>支持 PNG / JPG / WebP</span>
+            </button>
+          )}
+        </section>
+      </main>
+
+      <TaskStatusBar taskId={activeTaskId} status={status} progress={taskProgress} idleLabel="去水印" />
+    </section>
+  );
+}
+
+export default WatermarkRemovalPage;
diff --git a/src/features/workbench/ConversationSidebar.tsx b/src/features/workbench/ConversationSidebar.tsx
new file mode 100644
index 0000000..12d701d
--- /dev/null
+++ b/src/features/workbench/ConversationSidebar.tsx
@@ -0,0 +1,138 @@
+import {
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  MessageOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import { useCallback, useState } from "react";
+import type { ConversationSummary } from "../../api/conversationClient";
+
+interface ConversationSidebarProps {
+  conversations: ConversationSummary[];
+  activeId: number | null;
+  collapsed: boolean;
+  onToggle: () => void;
+  onSelect: (id: number) => void;
+  onNew: () => void;
+  onDelete: (id: number) => void;
+  onRename: (id: number, title: string) => void;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diff = now - then;
+  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");
+}
+
+export default function ConversationSidebar({
+  conversations,
+  activeId,
+  collapsed,
+  onToggle,
+  onSelect,
+  onNew,
+  onDelete,
+  onRename,
+}: ConversationSidebarProps) {
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const startRename = useCallback((id: number, currentTitle: string) => {
+    setEditingId(id);
+    setEditValue(currentTitle);
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (editingId !== null && editValue.trim()) {
+      onRename(editingId, editValue.trim());
+    }
+    setEditingId(null);
+  }, [editingId, editValue, onRename]);
+
+  return (
+    <aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
+      <div className="conversation-sidebar__header">
+        <button
+          type="button"
+          className="conversation-sidebar__toggle"
+          onClick={onToggle}
+          aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        >
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </button>
+        {!collapsed && (
+          <button type="button" className="conversation-sidebar__new" onClick={onNew}>
+            <PlusOutlined /> 新对话
+          </button>
+        )}
+      </div>
+
+      {!collapsed && (
+        <div className="conversation-sidebar__list">
+          {conversations.length === 0 ? (
+            <div className="conversation-sidebar__empty">
+              <MessageOutlined />
+              <span>暂无对话记录</span>
+            </div>
+          ) : (
+            conversations.map((conv) => (
+              <div
+                key={conv.id}
+                className={`conversation-sidebar__item${conv.id === activeId ? " is-active" : ""}`}
+              >
+                {editingId === conv.id ? (
+                  <input
+                    className="conversation-sidebar__rename-input"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onBlur={commitRename}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") commitRename();
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                    autoFocus
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className="conversation-sidebar__item-main"
+                    onClick={() => onSelect(conv.id)}
+                  >
+                    <span className="conversation-sidebar__item-title">{conv.title}</span>
+                    <span className="conversation-sidebar__item-time">
+                      {formatRelativeTime(conv.updatedAt)}
+                    </span>
+                  </button>
+                )}
+                <div className="conversation-sidebar__item-actions">
+                  <button
+                    type="button"
+                    aria-label="重命名"
+                    onClick={() => startRename(conv.id, conv.title)}
+                  >
+                    <EditOutlined />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="删除"
+                    onClick={() => onDelete(conv.id)}
+                  >
+                    <DeleteOutlined />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/src/features/workbench/ProjectSidebar.tsx b/src/features/workbench/ProjectSidebar.tsx
new file mode 100644
index 0000000..2502f93
--- /dev/null
+++ b/src/features/workbench/ProjectSidebar.tsx
@@ -0,0 +1,151 @@
+import {
+  CloudSyncOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  FolderOpenOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  ReloadOutlined,
+} from "@ant-design/icons";
+import { useCallback, useMemo, useState } from "react";
+import type { WebProjectSummary } from "../../types";
+
+interface ProjectSidebarProps {
+  projects: WebProjectSummary[];
+  activeId: string | null;
+  collapsed: boolean;
+  filterMode?: "chat" | "image" | "video";
+  loading?: boolean;
+  error?: string | null;
+  onToggle: () => void;
+  onSelect: (id: string) => void;
+  onRefresh: () => void;
+  onRename: (id: string, title: string) => void;
+  onDelete: (id: string) => void;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const then = new Date(dateStr).getTime();
+  if (!Number.isFinite(then)) return "";
+  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`;
+  return new Date(dateStr).toLocaleDateString("zh-CN");
+}
+
+export default function ProjectSidebar({
+  projects,
+  activeId,
+  collapsed,
+  filterMode,
+  loading,
+  error,
+  onToggle,
+  onSelect,
+  onRefresh,
+  onRename,
+  onDelete,
+}: ProjectSidebarProps) {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const filteredProjects = useMemo(
+    () => filterMode ? projects.filter((p) => p.mode === filterMode) : projects,
+    [projects, filterMode],
+  );
+
+  const startRename = useCallback((project: WebProjectSummary) => {
+    setEditingId(project.id);
+    setEditValue(project.name);
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (editingId && editValue.trim()) {
+      onRename(editingId, editValue.trim());
+    }
+    setEditingId(null);
+  }, [editValue, editingId, onRename]);
+
+  return (
+    <aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
+      <div className="conversation-sidebar__header">
+        <button
+          type="button"
+          className="conversation-sidebar__toggle"
+          onClick={onToggle}
+          aria-label={collapsed ? "Expand project sidebar" : "Collapse project sidebar"}
+        >
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </button>
+        {!collapsed && (
+          <div className="conversation-sidebar__header-actions">
+            <button type="button" className="conversation-sidebar__new" onClick={() => onSelect("")}>
+              <FolderOpenOutlined /> 新对话
+            </button>
+            <button type="button" className="conversation-sidebar__icon-button" onClick={onRefresh} aria-label="刷新记录">
+              <ReloadOutlined />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {!collapsed && (
+        <div className="conversation-sidebar__list">
+          {error ? (
+            <div className="conversation-sidebar__empty">
+              <CloudSyncOutlined />
+              <span>Server data failed to load</span>
+            </div>
+          ) : filteredProjects.length === 0 ? (
+            <div className="conversation-sidebar__empty">
+              <FolderOpenOutlined />
+              <span>{loading ? "正在加载记录..." : "暂无该类型记录"}</span>
+            </div>
+          ) : (
+            filteredProjects.map((project) => (
+              <div
+                key={project.id}
+                className={`conversation-sidebar__item${project.id === activeId ? " is-active" : ""}`}
+              >
+                {editingId === project.id ? (
+                  <input
+                    className="conversation-sidebar__rename-input"
+                    value={editValue}
+                    onChange={(event) => setEditValue(event.target.value)}
+                    onBlur={commitRename}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") commitRename();
+                      if (event.key === "Escape") setEditingId(null);
+                    }}
+                    autoFocus
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className="conversation-sidebar__item-main"
+                    onClick={() => onSelect(project.id)}
+                  >
+                    <span className="conversation-sidebar__item-title">{project.name}</span>
+                    <span className="conversation-sidebar__item-time">
+                      {project.source === "server" ? formatRelativeTime(project.updatedAt) : "preview"}
+                    </span>
+                  </button>
+                )}
+                <div className="conversation-sidebar__item-actions">
+                  <button type="button" aria-label="Rename project" onClick={() => startRename(project)}>
+                    <EditOutlined />
+                  </button>
+                  <button type="button" aria-label="Delete project" onClick={() => onDelete(project.id)}>
+                    <DeleteOutlined />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/src/features/workbench/SmoothedProgressBar.tsx b/src/features/workbench/SmoothedProgressBar.tsx
new file mode 100644
index 0000000..2d2d809
--- /dev/null
+++ b/src/features/workbench/SmoothedProgressBar.tsx
@@ -0,0 +1,27 @@
+import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+
+type MessageStatus = "thinking" | "completed" | "failed" | string;
+
+interface SmoothedProgressBarProps {
+  progress: number;
+  status: MessageStatus;
+  label?: string;
+}
+
+function mapMessageStatus(status: MessageStatus) {
+  if (status === "thinking") return "running" as const;
+  if (status === "completed") return "completed" as const;
+  if (status === "failed") return "failed" as const;
+  return "running" as const;
+}
+
+export function SmoothedProgressBar({ progress, status, label }: SmoothedProgressBarProps) {
+  const smoothed = useSmoothedProgress(progress, mapMessageStatus(status));
+  return (
+    <>
+      <span>{label || "超分处理中..."}</span>
+      <strong>{smoothed}%</strong>
+      <i style={{ width: `${smoothed}%` }} />
+    </>
+  );
+}
diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx
new file mode 100644
index 0000000..250f023
--- /dev/null
+++ b/src/features/workbench/WorkbenchPage.tsx
@@ -0,0 +1,4146 @@
+import {
+  AppstoreOutlined,
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  CaretRightOutlined,
+  ClockCircleOutlined,
+  CloseOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownOutlined,
+  DownloadOutlined,
+  FileTextOutlined,
+  FullscreenOutlined,
+  LoadingOutlined,
+  MessageOutlined,
+  MutedOutlined,
+  PictureOutlined,
+  PauseOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SendOutlined,
+  SettingOutlined,
+  SoundOutlined,
+  StopOutlined,
+  ThunderboltOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  type SyntheticEvent,
+} from "react";
+import type { WebGenerationPreviewTask, WebUserSession } from "../../types";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { claimGenerationSlot, getActiveGenerationTaskCount, getGenerationUserKey, releaseGenerationSlot } from "../../api/generationConcurrency";
+import { preUploadReference, resolvePreUploadedUrl } from "../../api/referenceUploadService";
+import { assetClient } from "../../api/assetClient";
+import { communityClient } from "../../api/communityClient";
+import { RechargeModal } from "../../components/RechargeModal/RechargeModal";
+
+function getCachedRole(): string {
+  try {
+    const raw = window.localStorage.getItem("omniai-web-session");
+    if (!raw) return "";
+    return String(JSON.parse(raw)?.user?.role || "").trim().toLowerCase();
+  } catch { return ""; }
+}
+import { conversationClient, type ConversationSummary } from "../../api/conversationClient";
+import { modelCapabilitiesClient } from "../../api/modelCapabilitiesClient";
+import { buildApiUrl, buildAuthHeaders, isServerRequestError } from "../../api/serverConnection";
+import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
+import type { WebProjectSummary } from "../../types";
+import {
+  communityCaseToPromptCase,
+  getPromptCaseCardClassName,
+  type PromptCaseViewModel,
+} from "../community/communityCaseUtils";
+import ProjectSidebar from "./ProjectSidebar";
+import {
+  ChatAttachmentPreview,
+  GenerationPendingCard,
+  ImmersiveVideoPlayer,
+  MarkdownMessage,
+  ResultCard,
+} from "./components/WorkbenchChatCards";
+import { renderMarkdownBlocks } from "./markdownRenderer";
+import { downloadResultAsset } from "./workbenchDownload";
+import { translateTaskError } from "../../utils/translateTaskError";
+import { detectMentionTrigger } from "../../utils/mentionTrigger";
+import {
+  isHappyHorseModel,
+  toHappyHorseDisplayModel,
+} from "../../utils/happyHorseRouting";
+import { isViduModel } from "../../utils/viduRouting";
+import { isPixverseModel } from "../../utils/pixverseRouting";
+import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
+import {
+  ENTERPRISE_DEFAULT_VIDEO_MODEL,
+  ENTERPRISE_VIDEO_MODEL_OPTIONS,
+} from "../../utils/enterpriseVideoPolicy";
+import {
+  getImageQualityOptions,
+  getDefaultImageQuality,
+  getVideoQualityOptions,
+  getDefaultVideoQuality,
+  getVideoQualityLabel,
+} from "../../utils/modelOptions";
+import { filterImageModelOptionsForSession } from "../../utils/imageModelVisibility";
+import { persistWorkbenchResultAsset, type PersistedWorkbenchResultAsset } from "./workbenchResultPersistence";
+import { SmoothedProgressBar } from "./SmoothedProgressBar";
+import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+
+interface WorkbenchPageProps {
+  isAuthenticated: boolean;
+  session: WebUserSession | null;
+  onRequireLogin: (input: CreatePreviewTaskInput) => void;
+  onOpenResultInCanvas?: (payload: WorkbenchResultActionPayload) => void;
+  onRefreshUsage?: () => void;
+}
+
+export interface WorkbenchResultActionPayload {
+  title: string;
+  prompt: string;
+  resultUrl: string;
+  resultType: "image" | "video";
+  taskId?: string;
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+}
+
+type WorkbenchMode = "chat" | "image" | "video";
+type ToolbarMenuId =
+  | "studio-mode"
+  | "image-model"
+  | "image-settings"
+  | "image-grid-mode"
+  | "video-model"
+  | "video-mode"
+  | "video-ratio"
+  | "video-duration"
+  | "video-quality"
+  | null;
+type ReferenceKind = "image" | "video" | "audio" | "file";
+
+type PromptMentionItem = Pick<ReferenceItem, "token" | "id" | "name" | "kind" | "previewUrl" | "remoteUrl">;
+
+interface PromptMentionTokenRange {
+  start: number;
+  end: number;
+  item: PromptMentionItem;
+}
+
+interface WorkbenchOption {
+  value: string;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+interface WorkbenchFieldGroup {
+  label: string;
+  value: string;
+  options: WorkbenchOption[];
+  onChange: (value: string) => void;
+  kind?: "ratio" | "pill";
+  columns?: 2 | 3 | 4;
+  icon?: ReactNode;
+}
+
+interface ReferenceItem {
+  id: string;
+  kind: ReferenceKind;
+  name: string;
+  previewUrl?: string;
+  file?: File;
+  remoteUrl?: string;
+  token: string;
+  fingerprint?: string;
+  originalSize?: number;
+  compressed?: boolean;
+}
+
+type ChatAttachment = Pick<ReferenceItem, "kind" | "name" | "token" | "previewUrl" | "remoteUrl">;
+
+function buildChatAttachments(items: ReferenceItem[]): ChatAttachment[] {
+  return items.map((item) => ({
+    kind: item.kind,
+    name: item.name,
+    token: item.token,
+    previewUrl: item.remoteUrl || item.previewUrl,
+    remoteUrl: item.remoteUrl,
+  }));
+}
+
+interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  author: string;
+  mode: WorkbenchMode;
+  body: string;
+  prompt?: string;
+  createdAt: string;
+  status?: "thinking" | "queued" | "completed" | "failed";
+  taskId?: string;
+  conversationId?: number;
+  taskProgress?: number;
+  taskStatusLabel?: string;
+  attachments?: ChatAttachment[];
+  resultUrl?: string;
+  resultType?: "image" | "video";
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+  result?: {
+    title: string;
+    summary: string;
+    specs: string[];
+  };
+}
+
+interface DeleteDialogState {
+  projectId: string;
+  title: string;
+}
+
+function getSessionUserId(): string {
+  try {
+    const raw = window.localStorage.getItem("omniai-web-session");
+    if (!raw) return "anon";
+    const id = JSON.parse(raw)?.user?.id;
+    return id ? String(id) : "anon";
+  } catch { return "anon"; }
+}
+
+function userKey(base: string): string {
+  return `${base}:${getSessionUserId()}`;
+}
+
+const MESSAGE_STORAGE_KEY = "omniai-web-workbench-messages";
+const ACTIVE_CONVERSATION_STORAGE_KEY = "omniai-web-workbench-active-conversation-id";
+const PROMPT_HISTORY_STORAGE_KEY = "omniai-web-workbench-prompt-history";
+const TASK_KEEPALIVE_STORAGE_KEY = "omniai-web-workbench-active-tasks";
+const WORKBENCH_TASK_STALE_MS = 6 * 60 * 60 * 1000;
+const WORKBENCH_TASK_MAX_POLL_FAILURES = 10;
+const REFERENCE_IMAGE_COMPRESS_THRESHOLD = 10 * 1024 * 1024;
+const REFERENCE_IMAGE_MAX_DIMENSION = 1920;
+const REFERENCE_IMAGE_INITIAL_QUALITY = 0.84;
+const REFERENCE_IMAGE_MIN_QUALITY = 0.62;
+const CHAT_MODEL = "gemini-3.1-pro";
+const CHAT_NATURAL_SYSTEM_PROMPT = [
+  "你是 OmniAI 的创作协作助手，像一个正在一起工作的同伴一样说话。",
+  "默认使用自然、简洁的中文，不要官腔，不要机械套话，不要频繁使用“首先、其次、最后”这种模板。",
+  "先直接回应用户当前关心的点；需要拆解时，用短段落或少量要点，把下一步说清楚。",
+  "不说“作为一个 AI”，不做空泛总结，不编造不确定的信息。",
+  "当用户在排查问题或调整页面时，优先给判断、原因和可执行的下一步。",
+].join("\n");
+const CHAT_TURN_STYLE_REMINDER = [
+  "本轮回答继续保持像正常人协作的口吻：",
+  "不要以“好的，以下是”“当然可以”“根据你的需求”这类模板开头。",
+  "能一句话说清就先一句话说清；需要展开时再分点。",
+  "少用宏大标题，多用具体判断和下一步动作。",
+].join("\n");
+
+const NON_CONVERSATIONAL_ASSISTANT_TEXT = new Set([
+  "我先看一下上下文，马上接上。",
+  "我在整理，马上说清楚。",
+  "正在读取当前模式、模型、规格和参考素材，准备创建生成任务。",
+  "Task submitted, generating...",
+  "任务已提交，正在生成中...",
+  "AI 正在整理回答...",
+]);
+
+function buildNaturalChatHistoryMessages(messages: ChatMessage[]): Array<{ role: "user" | "assistant"; content: string }> {
+  return messages
+    .filter((message) => {
+      const body = message.body.trim();
+      if (!body) return false;
+      if (message.role === "user") return true;
+      if (message.mode !== "chat") return false;
+      if (message.status === "thinking" || message.status === "queued") return false;
+      if (NON_CONVERSATIONAL_ASSISTANT_TEXT.has(body)) return false;
+      return true;
+    })
+    .slice(-10)
+    .map((message) => ({
+      role: message.role,
+      content: message.body.trim(),
+    }));
+}
+
+const MODE_META: Record<
+  WorkbenchMode,
+  {
+    label: string;
+    menuLabel: string;
+    accent: string;
+    icon: ReactNode;
+    placeholder: string;
+    description: string;
+    subline: string;
+    taskType: WebGenerationPreviewTask["type"];
+  }
+> = {
+  chat: {
+    label: "OmniChat",
+    menuLabel: "对话模式",
+    accent: "#6be7ff",
+    icon: <MessageOutlined />,
+    placeholder: "把创意、脚本、素材要求或工作流目标发给我",
+    description: "直接对话、拆解需求、整理上下文，并把想法推进到可执行结果。",
+    subline: "适合连续协作、问答推演、脚本整理和工作流规划。",
+    taskType: "agent",
+  },
+  image: {
+    label: "图像生成",
+    menuLabel: "图像生成",
+    accent: "#00b1cc",
+    icon: <PictureOutlined />,
+    placeholder: "描述角色、场景、商品图、首帧或尾帧画面",
+    description: "在同一界面完成文生图、图生图、参考图管理和候选筛选。",
+    subline: "模型、比例、清晰度和多宫格保持在同一条工作链里。",
+    taskType: "image",
+  },
+  video: {
+    label: "视频生成",
+    menuLabel: "视频生成",
+    accent: "#2197ff",
+    icon: <VideoCameraOutlined />,
+    placeholder: "描述成片目标、人物、场景、镜头运动、节奏、比例和时长",
+    description: "用统一工作台管理起始帧、动作描述、镜头节奏和视频输出。",
+    subline: "支持首尾帧、参考素材、比例、时长和画质等关键设置。",
+    taskType: "video",
+  },
+};
+
+const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as WorkbenchMode[]).map((mode) => ({
+  value: mode,
+  label: MODE_META[mode].menuLabel,
+  description: MODE_META[mode].subline,
+}));
+
+const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
+  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
+  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
+  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
+  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
+];
+
+const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));
+const RATIO_OPTIONS: WorkbenchOption[] = [
+  { value: "21:9", label: "21:9" },
+  { value: "16:9", label: "16:9" },
+  { value: "4:3", label: "4:3" },
+  { value: "1:1", label: "1:1" },
+  { value: "3:4", label: "3:4" },
+  { value: "9:16", label: "9:16" },
+];
+
+const GRID_MODE_OPTIONS: WorkbenchOption[] = [
+  { value: "single", label: "单图" },
+  { value: "grid-4", label: "4 宫格" },
+  { value: "grid-9", label: "9 宫格" },
+  { value: "grid-25", label: "25 宫格" },
+];
+
+const VIDEO_FRAME_OPTIONS: WorkbenchOption[] = [
+  { value: "omni", label: "全能参考" },
+  { value: "start-end", label: "首尾帧" },
+];
+
+const VIDEO_DURATION_OPTIONS: WorkbenchOption[] = [
+  { value: "4", label: "4s" },
+  { value: "5", label: "5s" },
+  { value: "6", label: "6s" },
+  { value: "7", label: "7s" },
+  { value: "8", label: "8s" },
+  { value: "9", label: "9s" },
+  { value: "10", label: "10s" },
+  { value: "11", label: "11s" },
+  { value: "12", label: "12s" },
+  { value: "13", label: "13s" },
+  { value: "14", label: "14s" },
+  { value: "15", label: "15s" },
+];
+
+function createId(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function formatWorkbenchTimestamp(date = new Date()): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+function parseWorkbenchTimestampValue(value: string): number {
+  const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/);
+  if (matched) {
+    const [, year, month, day, hours, minutes] = matched;
+    return new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes)).getTime();
+  }
+
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : NaN;
+}
+
+function readStoredMessages(): ChatMessage[] {
+  if (typeof window === "undefined") return [];
+
+  try {
+    const raw = window.localStorage.getItem(userKey(MESSAGE_STORAGE_KEY));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((item): item is ChatMessage => {
+      if (!item || typeof item !== "object") return false;
+      const candidate = item as Partial<ChatMessage>;
+      return (
+        typeof candidate.id === "string" &&
+        (candidate.role === "user" || candidate.role === "assistant") &&
+        typeof candidate.body === "string"
+      );
+    });
+  } catch {
+    return [];
+  }
+}
+
+function readStoredPromptHistory(): string[] {
+  if (typeof window === "undefined") return [];
+
+  try {
+    const raw = window.localStorage.getItem(userKey(PROMPT_HISTORY_STORAGE_KEY));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+function readStoredActiveConversationId(messages: ChatMessage[] = []): number | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const raw = window.localStorage.getItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    const value = raw ? Number(raw) : NaN;
+    if (Number.isFinite(value) && value > 0) return value;
+  } catch {
+    // Active conversation recovery is optional.
+  }
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const candidate = messages[index]?.conversationId;
+    if (typeof candidate === "number" && Number.isFinite(candidate) && candidate > 0) {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
+function persistActiveConversationId(conversationId: number | null) {
+  if (typeof window === "undefined") return;
+
+  try {
+    if (conversationId && Number.isFinite(conversationId)) {
+      window.localStorage.setItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY), String(conversationId));
+    } else {
+      window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    }
+  } catch {
+    // Local history is a convenience; generation still works without it.
+  }
+}
+
+function persistMessages(messages: ChatMessage[]) {
+  try {
+    window.localStorage.setItem(userKey(MESSAGE_STORAGE_KEY), JSON.stringify(messages.slice(-60)));
+  } catch {
+    // Local history is a convenience; generation still works without it.
+  }
+}
+
+function clearWorkbenchLocalState() {
+  if (typeof window === "undefined") return;
+
+  try {
+    window.localStorage.removeItem(userKey(MESSAGE_STORAGE_KEY));
+    window.localStorage.removeItem(userKey(ACTIVE_CONVERSATION_STORAGE_KEY));
+    window.localStorage.removeItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
+  } catch {
+    // Logout cleanup should never block the UI.
+  }
+}
+
+function isTransientMessage(message: ChatMessage): boolean {
+  return (message.status === "thinking" || message.status === "queued") && !message.taskId;
+}
+
+function getPersistableMessages(messages: ChatMessage[]): ChatMessage[] {
+  return messages.filter((message, index) => {
+    if (isTransientMessage(message)) return false;
+    if (message.role === "assistant") return true;
+
+    const nextMessage = messages[index + 1];
+    return (
+      nextMessage?.role === "assistant" &&
+      nextMessage.conversationId === message.conversationId &&
+      !isTransientMessage(nextMessage)
+    );
+  });
+}
+
+async function resolveReferenceUrls(items: ReferenceItem[]): Promise<string[]> {
+  const tasks = items.map(async (item) => {
+    if (item.remoteUrl) return item.remoteUrl;
+
+    if (!item.file) {
+      if (item.previewUrl && /^https?:\/\//i.test(item.previewUrl)) {
+        return item.previewUrl;
+      }
+      return null;
+    }
+
+    const url = await resolvePreUploadedUrl(item.file, item.name, item.fingerprint);
+    if (url) {
+      item.remoteUrl = url;
+      return url;
+    }
+    return null;
+  });
+
+  const results = await Promise.all(tasks);
+  return results.filter((url): url is string => url !== null);
+}
+
+function shouldPersistPatch(patch: Partial<ChatMessage>): boolean {
+  return (
+    patch.status === "completed" ||
+    patch.status === "failed" ||
+    typeof patch.taskId === "string" ||
+    typeof patch.resultUrl === "string" ||
+    typeof patch.resultOssKey === "string" ||
+    typeof patch.resultOriginalUrl === "string" ||
+    typeof patch.resultMimeType === "string"
+  );
+}
+
+function getErrorText(error: unknown): string {
+  return error instanceof Error ? error.message : String(error || "Unknown error");
+}
+
+function isAuthFailure(error: unknown): boolean {
+  return isServerRequestError(error) && (error.status === 401 || error.status === 403);
+}
+
+function isInsufficientBalance(error: unknown): boolean {
+  if (isServerRequestError(error) && error.status === 402) return true;
+  const msg = error instanceof Error ? error.message : String(error || "");
+  return /余额不足|积分不足|insufficient.?balance/i.test(msg);
+}
+
+function isInsufficientBalanceMessage(msg: string | undefined | null): boolean {
+  if (!msg) return false;
+  return /余额不足|积分不足|insufficient.?balance/i.test(msg);
+}
+
+function persistPromptHistory(history: string[]) {
+  try {
+    window.localStorage.setItem(userKey(PROMPT_HISTORY_STORAGE_KEY), JSON.stringify(history.slice(0, 20)));
+  } catch {
+    // Local history is optional.
+  }
+}
+
+interface WorkbenchKeepaliveTask {
+  taskId: string;
+  conversationId: number;
+  assistantMessageId: string;
+  concurrencySlotId?: string;
+  operation?: "generation" | "video-super-resolution";
+  mode: "image" | "video";
+  modelLabel: string;
+  specs: string[];
+  referenceCount: number;
+  progress: number;
+  statusLabel: string;
+  startedAt: number;
+}
+
+function buildRecoverableTaskFromMessage(conversationId: number, message: ChatMessage): WorkbenchKeepaliveTask | null {
+  if (message.role !== "assistant") return null;
+  if (!(message.status === "thinking" && message.taskId && message.mode !== "chat")) return null;
+  if (message.mode !== "image" && message.mode !== "video") return null;
+  if (Date.now() - parseWorkbenchTimestampValue(message.createdAt) > WORKBENCH_TASK_STALE_MS) return null;
+
+  const specs = message.result?.specs || [];
+  return {
+    taskId: message.taskId,
+    conversationId,
+    assistantMessageId: message.id,
+    operation: message.taskStatusLabel?.includes("超分") ? "video-super-resolution" : "generation",
+    mode: message.mode,
+    modelLabel: specs[0] || message.author || message.mode,
+    specs,
+    referenceCount: message.attachments?.length || 0,
+    progress: Math.max(10, Math.min(99, Number(message.taskProgress || 30))),
+    statusLabel: message.taskStatusLabel || "任务恢复中...",
+    startedAt: parseWorkbenchTimestampValue(message.createdAt) || Date.now(),
+  };
+}
+
+function readStoredKeepaliveTasks(): Record<string, WorkbenchKeepaliveTask> {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(userKey(TASK_KEEPALIVE_STORAGE_KEY));
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+
+    const tasks: Record<string, WorkbenchKeepaliveTask> = {};
+    Object.values(parsed as Record<string, Partial<WorkbenchKeepaliveTask>>).forEach((task) => {
+      if (
+        task &&
+        typeof task.taskId === "string" &&
+        typeof task.conversationId === "number" &&
+        typeof task.assistantMessageId === "string" &&
+        (task.mode === "image" || task.mode === "video")
+      ) {
+        tasks[task.taskId] = {
+          taskId: task.taskId,
+          conversationId: task.conversationId,
+          assistantMessageId: task.assistantMessageId,
+          concurrencySlotId: typeof task.concurrencySlotId === "string" ? task.concurrencySlotId : undefined,
+          operation: task.operation === "video-super-resolution" ? "video-super-resolution" : "generation",
+          mode: task.mode,
+          modelLabel: task.modelLabel || task.mode,
+          specs: Array.isArray(task.specs) ? task.specs.filter((item): item is string => typeof item === "string") : [],
+          referenceCount: Number(task.referenceCount || 0),
+          progress: Number(task.progress || 0),
+          statusLabel: task.statusLabel || "Generating...",
+          startedAt: Number(task.startedAt || Date.now()),
+        };
+      }
+    });
+    return tasks;
+  } catch {
+    return {};
+  }
+}
+
+function persistKeepaliveTasks(tasks: Record<string, WorkbenchKeepaliveTask>) {
+  try {
+    window.localStorage.setItem(userKey(TASK_KEEPALIVE_STORAGE_KEY), JSON.stringify(tasks));
+  } catch {
+    // Task restore is best-effort.
+  }
+}
+
+function getRatioOptionClassName(value: string) {
+  return `ai-workbench-ratio-option__preview--${value.replace(":", "-")}`;
+}
+
+function getSettingsGridColumnsClassName(columns: WorkbenchFieldGroup["columns"] = 3) {
+  return `ai-workbench-settings-panel__grid--cols-${columns}`;
+}
+
+function getReferenceAccept(mode: WorkbenchMode, videoFrameMode?: string) {
+  if (mode === "chat") return ".docx,.txt,.md,.xlsx,.xls,.png,.jpg,.jpeg,.gif,.webp";
+  if (mode === "image") return "image/*";
+  if (videoFrameMode === "start-end") return "image/*";
+  return "image/*,video/mp4,video/quicktime,video/webm,video/x-msvideo,.mp4,.mov,.webm,.avi,audio/mpeg,audio/mp3,audio/wav,audio/x-wav,.mp3,.wav";
+}
+
+function getReferenceUploadLabel(mode: WorkbenchMode) {
+  if (mode === "video") return "参考内容";
+  if (mode === "image") return "参考图";
+  return "附件";
+}
+
+function getReferenceLimit(mode: WorkbenchMode, videoFrameMode?: string) {
+  if (mode === "video" && videoFrameMode === "start-end") return 2;
+  if (mode === "video") return 12;
+  if (mode === "image") return 9;
+  return 4;
+}
+
+function getReferenceKindLabel(kind: ReferenceKind) {
+  if (kind === "image") return "图片";
+  if (kind === "video") return "视频";
+  if (kind === "audio") return "音频";
+  return "附件";
+}
+
+function getReferenceEmptyCopy(mode: WorkbenchMode) {
+  if (mode === "video") return "上传最多12个参考素材，首尾帧模式仅保留2张图片，输入文字或 @ 引用内容，自由组合图、文、音、视频多元素";
+  if (mode === "image") return "最多上传9张参考图，输入文字或 @ 引用内容，控制角色、风格和构图";
+  return "上传附件后可用 @ 引用，帮助 Agent 读取上下文";
+}
+
+function hexToRgbTriplet(hex: string) {
+  const normalized = hex.replace("#", "");
+  const full = normalized.length === 3
+    ? normalized
+        .split("")
+        .map((char) => `${char}${char}`)
+        .join("")
+    : normalized;
+
+  const value = Number.parseInt(full, 16);
+  const r = (value >> 16) & 255;
+  const g = (value >> 8) & 255;
+  const b = value & 255;
+  return `${r}, ${g}, ${b}`;
+}
+
+function inferReferenceKind(file: File, mode: WorkbenchMode): ReferenceKind {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  return mode === "chat" ? "file" : "image";
+}
+
+function disposeReferencePreview(item: Pick<ReferenceItem, "previewUrl">) {
+  if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+}
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("Unable to read reference file"));
+    };
+    reader.onerror = () => reject(reader.error || new Error("Unable to read reference file"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function bytesToHex(buffer: ArrayBuffer) {
+  return Array.from(new Uint8Array(buffer))
+    .map((byte) => byte.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+async function buildReferenceFingerprint(file: File, kind: ReferenceKind) {
+  if (kind === "image" && window.crypto?.subtle) {
+    const digest = await window.crypto.subtle.digest("SHA-256", await file.arrayBuffer());
+    return `image:${bytesToHex(digest)}`;
+  }
+  return `${kind}:${file.name}:${file.size}:${file.lastModified}:${file.type}`;
+}
+
+function canCompressReferenceImage(file: File) {
+  return (
+    file.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD &&
+    file.type.startsWith("image/") &&
+    !/svg|gif/i.test(file.type)
+  );
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number) {
+  return new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, type, quality);
+  });
+}
+
+function getCompressedImageName(fileName: string) {
+  const baseName = fileName.replace(/\.[^.]+$/, "");
+  return `${baseName || "reference"}.jpg`;
+}
+
+async function compressReferenceImageIfNeeded(file: File) {
+  if (!canCompressReferenceImage(file)) {
+    return { file, compressed: false };
+  }
+
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, REFERENCE_IMAGE_MAX_DIMENSION / Math.max(bitmap.width, bitmap.height));
+    let width = Math.max(1, Math.round(bitmap.width * scale));
+    let height = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      bitmap.close();
+      return { file, compressed: false };
+    }
+
+    const render = () => {
+      canvas.width = width;
+      canvas.height = height;
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, width, height);
+      context.drawImage(bitmap, 0, 0, width, height);
+    };
+
+    const encode = async () => {
+      let quality = REFERENCE_IMAGE_INITIAL_QUALITY;
+      let nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
+      while (nextBlob && nextBlob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && quality > REFERENCE_IMAGE_MIN_QUALITY) {
+        quality = Math.max(REFERENCE_IMAGE_MIN_QUALITY, quality - 0.08);
+        nextBlob = await canvasToBlob(canvas, "image/jpeg", quality);
+      }
+      return nextBlob;
+    };
+
+    render();
+    let blob = await encode();
+    while (blob && blob.size > REFERENCE_IMAGE_COMPRESS_THRESHOLD && Math.max(width, height) > 960) {
+      width = Math.max(1, Math.round(width * 0.82));
+      height = Math.max(1, Math.round(height * 0.82));
+      render();
+      blob = await encode();
+    }
+    bitmap.close();
+
+    if (!blob || blob.size >= file.size) {
+      return { file, compressed: false };
+    }
+
+    return {
+      file: new File([blob], getCompressedImageName(file.name), {
+        type: "image/jpeg",
+        lastModified: file.lastModified,
+      }),
+      compressed: true,
+    };
+  } catch {
+    return { file, compressed: false };
+  }
+}
+
+function buildReferenceToken(kind: ReferenceKind, index: number) {
+  if (kind === "image") return `@图片${index}`;
+  if (kind === "video") return `@视频${index}`;
+  if (kind === "audio") return `@音频${index}`;
+  return `@附件${index}`;
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function normalizePromptWhitespace(value: string) {
+  return value.replace(/[ \t]{2,}/g, " ").trim();
+}
+
+function removePromptMentionTokenFromText(text: string, token: string) {
+  if (!token) return text;
+  const escapedToken = escapeRegExp(token);
+  return normalizePromptWhitespace(
+    text.replace(new RegExp(`(^|\\s)${escapedToken}(?=\\s|$)`, "g"), " "),
+  );
+}
+
+function removePromptTextRange(text: string, start: number, end: number) {
+  return normalizePromptWhitespace(`${text.slice(0, start)}${text.slice(end)}`);
+}
+
+function ReferenceInlinePreview({
+  item,
+}: {
+  item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
+}) {
+  if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
+    return item.kind === "video" ? (
+      <video src={item.previewUrl} muted playsInline />
+    ) : (
+      <img src={item.previewUrl} alt={item.name} loading="lazy" />
+    );
+  }
+
+  return item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />;
+}
+
+function renderPromptPreviewNodes(
+  text: string,
+  items: PromptMentionItem[],
+) {
+  if (!text) return [];
+
+  const tokens = Array.from(new Set(items.map((item) => item.token))).sort((a, b) => b.length - a.length);
+  const tokenMap = new Map(items.map((item) => [item.token, item]));
+  const nodes: ReactNode[] = [];
+  let cursor = 0;
+  let index = 0;
+
+  while (cursor < text.length) {
+    const matchedToken = tokens.find((token) => text.startsWith(token, cursor));
+
+    if (matchedToken) {
+      const matchedItem = tokenMap.get(matchedToken);
+      if (matchedItem) {
+        nodes.push(
+          <span
+            key={`${matchedItem.id}-${cursor}`}
+            className="wb-composer__mention-inline-chip"
+            data-token-start={cursor}
+            data-token-end={cursor + matchedToken.length}
+            style={{ "--mention-token-chars": matchedToken.length } as CSSProperties}
+            title={`${matchedItem.token} ${matchedItem.name}`}
+          >
+            <span className="wb-composer__mention-inline-measure">{matchedToken}</span>
+            <span className="wb-composer__mention-inline-media">
+              <ReferenceInlinePreview item={{ kind: matchedItem.kind, name: matchedItem.name, previewUrl: matchedItem.previewUrl }} />
+            </span>
+          </span>,
+        );
+        cursor += matchedToken.length;
+        index += 1;
+        continue;
+      }
+    }
+
+    const nextTokenIndex = tokens.reduce<number>((acc, token) => {
+      const found = text.indexOf(token, cursor);
+      return found >= 0 && found < acc ? found : acc;
+    }, Number.POSITIVE_INFINITY);
+    const nextIndex = Number.isFinite(nextTokenIndex) ? nextTokenIndex : text.length;
+    const chunk = text.slice(cursor, nextIndex);
+    if (chunk) {
+      nodes.push(<span key={`prompt-${index}-${cursor}`}>{chunk}</span>);
+      index += 1;
+    }
+    cursor = nextIndex;
+  }
+
+  return nodes;
+}
+
+function getPromptMentionTokenRanges(text: string, items: PromptMentionItem[]) {
+  if (!text || items.length === 0) return [];
+
+  const tokens = Array.from(new Set(items.map((item) => item.token))).sort((a, b) => b.length - a.length);
+  const tokenMap = new Map(items.map((item) => [item.token, item]));
+  const ranges: PromptMentionTokenRange[] = [];
+  let cursor = 0;
+
+  while (cursor < text.length) {
+    const matchedToken = tokens.find((token) => text.startsWith(token, cursor));
+    const matchedItem = matchedToken ? tokenMap.get(matchedToken) : undefined;
+
+    if (matchedToken && matchedItem) {
+      ranges.push({
+        start: cursor,
+        end: cursor + matchedToken.length,
+        item: matchedItem,
+      });
+      cursor += matchedToken.length;
+      continue;
+    }
+
+    cursor += 1;
+  }
+
+  return ranges;
+}
+
+function findPromptMentionRangeInside(index: number, ranges: PromptMentionTokenRange[]) {
+  return ranges.find((range) => index > range.start && index < range.end);
+}
+
+function findPromptMentionRangeOverlap(start: number, end: number, ranges: PromptMentionTokenRange[]) {
+  return ranges.find((range) => start < range.end && end > range.start);
+}
+
+function ReferencePreview({
+  item,
+  label,
+}: {
+  item: Pick<ReferenceItem, "kind" | "name" | "previewUrl">;
+  label?: string;
+}) {
+  if ((item.kind === "image" || item.kind === "video") && item.previewUrl) {
+    return item.kind === "video" ? (
+      <video src={item.previewUrl} muted playsInline />
+    ) : (
+      <img src={item.previewUrl} alt={item.name} loading="lazy" />
+    );
+  }
+
+  return (
+    <span className="wb-composer__ref-icon">
+      {item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
+      {label ? <span>{label}</span> : null}
+    </span>
+  );
+}
+
+function PromptPreviewLayer({
+  text,
+  items,
+  onTokenPointerDown,
+}: {
+  text: string;
+  items: PromptMentionItem[];
+  onTokenPointerDown?: (index: number) => void;
+}) {
+  const nodes = renderPromptPreviewNodes(text, items);
+  if (nodes.length === 0) return null;
+
+  return (
+    <div
+      className="wb-composer__highlight"
+      aria-hidden="true"
+      onPointerDown={(event) => {
+        const target =
+          event.target instanceof Element
+            ? event.target.closest<HTMLElement>(".wb-composer__mention-inline-chip")
+            : null;
+        if (!target) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        const tokenEnd = Number(target.dataset.tokenEnd);
+        if (Number.isFinite(tokenEnd)) {
+          onTokenPointerDown?.(tokenEnd);
+        }
+      }}
+    >
+      {nodes}
+    </div>
+  );
+}
+
+function SelectChip({
+  chipId,
+  value,
+  options,
+  disabled,
+  isOpen,
+  onToggle,
+  onClose,
+  onChange,
+  ariaLabel,
+  direction = "up",
+}: {
+  chipId: string;
+  value: string;
+  options: WorkbenchOption[];
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
+  ariaLabel?: string;
+  direction?: "up" | "down";
+}) {
+  const activeOption = options.find((option) => option.value === value);
+
+  return (
+    <div
+      className={`ai-workbench-select-chip${chipId.endsWith("-model") ? " ai-workbench-select-chip--model" : ""}${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
+    >
+      <button
+        type="button"
+        className="ai-workbench-select-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-listbox`}
+      >
+        <span className="ai-workbench-select-chip__copy">
+          <span className="ai-workbench-select-chip__value">{activeOption?.label || value}</span>
+        </span>
+        <DownOutlined className="ai-workbench-select-chip__arrow" />
+      </button>
+
+      {isOpen ? (
+        <div
+          id={`${chipId}-listbox`}
+          className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--${direction} is-open`}
+          role="listbox"
+        >
+          {options.map((option, index) => {
+            const active = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                className={`ai-workbench-select-chip__option${active ? " is-active" : ""}`}
+                style={{ transitionDelay: `${index * 18}ms` }}
+                onClick={() => {
+                  onChange(option.value);
+                  onClose();
+                }}
+              >
+                <span className="ai-workbench-select-chip__option-label">
+                  <span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
+                  <span className="ai-workbench-select-chip__option-copy">
+                    <span className="ai-workbench-select-chip__option-title">
+                      <span>{option.label}</span>
+                      {option.badge ? (
+                        <span className="ai-workbench-select-chip__option-badge">{option.badge}</span>
+                      ) : null}
+                    </span>
+                    {option.description ? (
+                      <span className="ai-workbench-select-chip__option-desc">{option.description}</span>
+                    ) : null}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CompoundSelectChip({
+  chipId,
+  summary,
+  groups,
+  disabled,
+  isOpen,
+  onToggle,
+  direction = "up",
+}: {
+  chipId: string;
+  summary: string;
+  groups: WorkbenchFieldGroup[];
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  direction?: "up" | "down";
+}) {
+  return (
+    <div
+      className={`ai-workbench-select-chip ai-workbench-select-chip--compound${disabled ? " is-disabled" : ""}${isOpen ? " is-open" : ""}`}
+    >
+      <button
+        type="button"
+        className="ai-workbench-select-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-panel`}
+      >
+        <span className="ai-workbench-select-chip__copy">
+          <span className="ai-workbench-select-chip__value">{summary}</span>
+        </span>
+        <DownOutlined className="ai-workbench-select-chip__arrow" />
+      </button>
+
+      {isOpen ? (
+        <div
+          id={`${chipId}-panel`}
+          className={`ai-workbench-select-chip__dropdown ai-workbench-select-chip__dropdown--compound ai-workbench-select-chip__dropdown--${direction} is-open`}
+          role="dialog"
+        >
+          <div className="ai-workbench-settings-panel">
+            {groups.map((group) => {
+              const currentLabel =
+                group.options.find((option) => option.value === group.value)?.label || group.value;
+              const fieldKey = `${group.kind || "pill"}-${group.label}`;
+
+              return (
+                <div
+                  key={fieldKey}
+                  className={`ai-workbench-settings-panel__field ai-workbench-settings-panel__field--${group.kind || "pill"}`}
+                >
+                  <div className="ai-workbench-settings-panel__head">
+                    <div className="ai-workbench-settings-panel__title-wrap">
+                      {group.icon ? (
+                        <span className="ai-workbench-settings-panel__title-icon">{group.icon}</span>
+                      ) : null}
+                      <div className="ai-workbench-settings-panel__title-copy">
+                        <div className="ai-workbench-settings-panel__title">{group.label}</div>
+                      </div>
+                    </div>
+                    <span className="ai-workbench-settings-panel__current">{currentLabel}</span>
+                  </div>
+
+                  <fieldset
+                    className={`ai-workbench-settings-panel__grid ai-workbench-settings-panel__grid--${group.kind || "pill"} ${getSettingsGridColumnsClassName(group.columns || 3)}`}
+                  >
+                    <legend className="ai-workbench-visually-hidden">{group.label}</legend>
+                    {group.options.map((option) => {
+                      const active = option.value === group.value;
+                      return (
+                        <button
+                          key={`${fieldKey}-${option.value}`}
+                          type="button"
+                          aria-pressed={active}
+                          className={`ai-workbench-settings-panel__option ai-workbench-settings-panel__option--${group.kind || "pill"}${active ? " is-active" : ""}`}
+                          onClick={() => group.onChange(option.value)}
+                        >
+                          {group.kind === "ratio" ? (
+                            <span className="ai-workbench-ratio-option">
+                              <span
+                                className={`ai-workbench-ratio-option__preview ${getRatioOptionClassName(option.value)}`}
+                              >
+                                <span className="ai-workbench-ratio-option__frame" />
+                              </span>
+                              <span className="ai-workbench-ratio-option__label">{option.label}</span>
+                            </span>
+                          ) : (
+                            <span>{option.label}</span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </fieldset>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function InlineOptionChip({
+  chipId,
+  value,
+  options,
+  icon,
+  disabled,
+  isOpen,
+  onToggle,
+  onClose,
+  onChange,
+  direction = "up",
+}: {
+  chipId: string;
+  value: string;
+  options: WorkbenchOption[];
+  icon?: ReactNode;
+  disabled?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  onChange: (value: string) => void;
+  direction?: "up" | "down";
+}) {
+  const activeOption = options.find((option) => option.value === value);
+
+  return (
+    <div className={`wb-inline-chip${isOpen ? " is-open" : ""}${disabled ? " is-disabled" : ""}`}>
+      <button
+        type="button"
+        className="wb-inline-chip__trigger"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={`${chipId}-listbox`}
+      >
+        {icon ? <span className="wb-inline-chip__icon">{icon}</span> : null}
+        <span>{activeOption?.label || value}</span>
+      </button>
+      {isOpen ? (
+        <div id={`${chipId}-listbox`} className={`wb-inline-chip__menu wb-inline-chip__menu--${direction}`} role="listbox">
+          {options.map((option) => {
+            const active = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                className={`wb-inline-chip__option${active ? " is-active" : ""}`}
+                onClick={() => {
+                  onChange(option.value);
+                  onClose();
+                }}
+              >
+                <span>{option.label}</span>
+                {active ? <span className="wb-inline-chip__check">✓</span> : null}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function buildAssistantResult(
+  mode: WorkbenchMode,
+  model: string,
+  specs: string[],
+  referenceCount: number,
+): ChatMessage["result"] {
+  if (mode === "image") {
+    return {
+      title: "图像任务已创建",
+      summary: referenceCount > 0 ? "已携带参考图，后续结果会进入资产库和画布。" : "已按当前模型和规格进入图像生成流程。",
+      specs,
+    };
+  }
+
+  if (mode === "video") {
+    return {
+      title: "视频任务已创建",
+      summary: referenceCount > 0 ? "已携带参考素材，生成后可继续拆分镜头并发布案例。" : "已按当前镜头设置进入视频生成流程。",
+      specs,
+    };
+  }
+
+  return {
+    title: "Agent 已接管",
+    summary: "我会把当前输入整理成脚本、分镜、素材需求和可复制的工作流节点。",
+    specs: [model, ...specs],
+  };
+}
+
+function WorkbenchPage({
+  isAuthenticated,
+  session,
+  onRequireLogin,
+  onOpenResultInCanvas,
+  onRefreshUsage,
+}: WorkbenchPageProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const referenceInputRef = useRef<HTMLInputElement | null>(null);
+  const referenceRefsRef = useRef<HTMLDivElement | null>(null);
+  const toolbarRef = useRef<HTMLDivElement | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+  const messagesSurfaceRef = useRef<HTMLDivElement | null>(null);
+  const referenceItemsRef = useRef<ReferenceItem[]>([]);
+  const referenceTokenSequenceRef = useRef<Record<ReferenceKind, number>>({
+    image: 0,
+    video: 0,
+    audio: 0,
+    file: 0,
+  });
+  const generationAbortRef = useRef<AbortController | null>(null);
+  const activeConversationIdRef = useRef<number | null>(null);
+  const messagesRef = useRef<ChatMessage[]>([]);
+  const conversationMessagesCacheRef = useRef<Map<number, ChatMessage[]>>(new Map());
+  const skipConversationAutoSelectRef = useRef(false);
+  const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
+  const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
+  const lastScrollTopRef = useRef(0);
+  const shouldFollowNewMessagesRef = useRef(true);
+  const pendingScrollToLatestRef = useRef(true);
+  const renderedMessageIdsRef = useRef<string[]>([]);
+  const hasHandledInitialMessagesRef = useRef(false);
+
+  const [activeMode, setActiveMode] = useState<WorkbenchMode>("video");
+  const [inputValue, setInputValue] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>(() => readStoredMessages());
+  const [promptHistory, setPromptHistory] = useState<string[]>(() => readStoredPromptHistory());
+  const [toolbarMenuId, setToolbarMenuId] = useState<ToolbarMenuId>(null);
+  const [referenceItems, setReferenceItems] = useState<ReferenceItem[]>([]);
+  const [referencePreviewOpen, setReferencePreviewOpen] = useState(false);
+  const [messagePreviewAttachment, setMessagePreviewAttachment] = useState<ChatAttachment | null>(null);
+  const [selectedPromptCase, setSelectedPromptCase] = useState<PromptCaseViewModel | null>(null);
+  const [serverPromptCases, setServerPromptCases] = useState<PromptCaseViewModel[]>([]);
+  const [promptCaseMeasuredRatios, setPromptCaseMeasuredRatios] = useState<Record<string, number>>({});
+  const [mentionPanelPlacement, setMentionPanelPlacement] = useState<"above" | "below">("above");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationStatus, setGenerationStatus] = useState("准备就绪");
+  const [showRechargeModal, setShowRechargeModal] = useState(false);
+  const [savedAssetMentionItems, setSavedAssetMentionItems] = useState<
+    Pick<ReferenceItem, "id" | "kind" | "name" | "previewUrl" | "remoteUrl" | "token">[]
+  >([]);
+
+  const [projectError, setProjectError] = useState<string | null>(null);
+  const [conversations, setConversations] = useState<ConversationSummary[]>([]);
+  const [activeConversationId, setActiveConversationId] = useState<number | null>(() =>
+    readStoredActiveConversationId(readStoredMessages()),
+  );
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
+  const [deleteSubmitting, setDeleteSubmitting] = useState(false);
+  const [, setGenerationProgress] = useState(0);
+  const [cursorIndex, setCursorIndex] = useState(0);
+  const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
+  const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
+  const [composerHidden, setComposerHidden] = useState(false);
+  const [workspaceStarted, setWorkspaceStarted] = useState(false);
+
+  useEffect(() => {
+    activeConversationIdRef.current = activeConversationId;
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    assetClient
+      .list()
+      .then((assets) => {
+        if (cancelled) return;
+        const items = assets
+          .filter((a) => a.url && (a.type === "scene" || a.type === "video" || a.type === "image" || a.type === "character" || a.type === "prop"))
+          .slice(0, 20)
+          .map((a, i) => {
+            const kind: ReferenceKind = a.type === "video" ? "video" : "image";
+            return {
+              id: `asset-${a.id}`,
+              kind,
+              name: a.name || `素材 ${i + 1}`,
+              previewUrl: a.url || undefined,
+              remoteUrl: a.url || undefined,
+              token: `@素材${i + 1}`,
+            };
+          });
+        setSavedAssetMentionItems(items);
+      })
+      .catch(() => {
+        // Silently ignore — saved assets are optional enhancement
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const fallbackImageModelOptions = useMemo(
+    () => filterImageModelOptionsForSession(IMAGE_MODEL_OPTIONS, session),
+    [session],
+  );
+  const fallbackImageModelValue = fallbackImageModelOptions[0]?.value || IMAGE_MODEL_OPTIONS[0].value;
+
+  const [imageModelOptions, setImageModelOptions] = useState<WorkbenchOption[]>(() => fallbackImageModelOptions);
+  const [videoModelOptions, setVideoModelOptions] = useState<WorkbenchOption[]>(VIDEO_MODEL_OPTIONS);
+  const [imageModel, setImageModel] = useState(fallbackImageModelValue);
+  const [imageRatio, setImageRatio] = useState("16:9");
+  const [imageQuality, setImageQuality] = useState(() => getDefaultImageQuality(fallbackImageModelValue));
+  const [imageGridMode, setImageGridMode] = useState("single");
+
+  const [videoModel, setVideoModel] = useState(VIDEO_MODEL_OPTIONS[0].value);
+  const [videoFrameMode, setVideoFrameMode] = useState("omni");
+  const [videoRatio, setVideoRatio] = useState("16:9");
+  const [videoDuration, setVideoDuration] = useState("4");
+  const [videoQuality, setVideoQuality] = useState(() => getDefaultVideoQuality(VIDEO_MODEL_OPTIONS[0].value));
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const applyImageModels = (models: WorkbenchOption[]) => {
+      const filteredImageModels = filterImageModelOptionsForSession(
+        models.length ? models : IMAGE_MODEL_OPTIONS,
+        session,
+      );
+      const nextImageModels = filteredImageModels.length ? filteredImageModels : fallbackImageModelOptions;
+      setImageModelOptions(nextImageModels);
+      setImageModel((current) => {
+        if (nextImageModels.some((item) => item.value === current)) return current;
+        const nextValue = nextImageModels[0]?.value || fallbackImageModelValue;
+        setImageQuality(getDefaultImageQuality(nextValue));
+        return nextValue;
+      });
+    };
+
+    if (!isAuthenticated) {
+      applyImageModels(IMAGE_MODEL_OPTIONS);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    modelCapabilitiesClient
+      .get()
+      .then((capabilities) => {
+        if (cancelled) return;
+        const nextVideoModels = VIDEO_MODEL_OPTIONS;
+
+        applyImageModels(capabilities.imageModels);
+        setVideoModelOptions(nextVideoModels);
+        setVideoModel((current) => {
+          const normalizedCurrent = toHappyHorseDisplayModel(current);
+          if (nextVideoModels.some((item) => item.value === normalizedCurrent)) return normalizedCurrent;
+          const nextValue = nextVideoModels[0]?.value || VIDEO_MODEL_OPTIONS[0].value;
+          setVideoQuality(getDefaultVideoQuality(nextValue));
+          return nextValue;
+        });
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fallbackImageModelValue, isAuthenticated, session]);
+
+  const toolTheme = MODE_META[activeMode];
+  const workbenchAccent = "#00ff88";
+  const hasConversationRecords = activeConversationId !== null || messages.length > 0;
+  const hasActivatedWorkspace = workspaceStarted || isGenerating || hasConversationRecords;
+  const referenceCount = referenceItems.length;
+  const activeVideoModelValue = toHappyHorseDisplayModel(videoModel);
+  const activeModelValue =
+    activeMode === "image" ? imageModel : activeMode === "video" ? activeVideoModelValue : CHAT_MODEL;
+  const activeModel =
+    activeMode === "image"
+      ? imageModelOptions.find((item) => item.value === imageModel)?.label || imageModel
+      : activeMode === "video"
+        ? videoModelOptions.find((item) => item.value === activeVideoModelValue)?.label || activeVideoModelValue
+        : "OmniChat";
+  const conversationRecords = useMemo<WebProjectSummary[]>(
+    () =>
+      conversations.map((conversation) => ({
+        id: String(conversation.id),
+        name: conversation.title,
+        description: null,
+        thumbnailUrl: null,
+        updatedAt: conversation.updatedAt,
+        storyboardCount: 0,
+        imageCount: 0,
+        videoCount: 0,
+        source: "server",
+        mode: conversation.mode,
+      })),
+    [conversations],
+  );
+  const hasSidebarRecords = conversationRecords.length > 0;
+
+  const activeConversationTitle = useMemo(() => {
+    if (!activeConversationId) return "";
+    return conversations.find((c) => c.id === activeConversationId)?.title || "";
+  }, [conversations, activeConversationId]);
+
+  const downloadFilenameBase = useMemo(() => {
+    const today = new Date();
+    const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+    return activeConversationTitle ? `${activeConversationTitle}_${dateStr}` : dateStr;
+  }, [activeConversationTitle]);
+
+  useEffect(() => {
+    setSidebarCollapsed(!hasSidebarRecords);
+  }, [hasSidebarRecords]);
+
+  const imageQualityOptions = useMemo(() => getImageQualityOptions(imageModel), [imageModel]);
+  const videoQualityOptions = getVideoQualityOptions(videoModel);
+  const videoQualityLabel = getVideoQualityLabel(videoModel, videoQuality);
+
+  const imageSettingsSummary = `${imageRatio} / ${imageQuality}`;
+  const composerPlaceholder =
+    referenceItems.length > 0 ? `${toolTheme.placeholder}，可输入 @ 引用参考内容` : toolTheme.placeholder;
+  const dropdownDirection = hasActivatedWorkspace ? "up" : "down";
+  const accentRgb = hexToRgbTriplet(workbenchAccent);
+  const themeVars = {
+    "--accent": workbenchAccent,
+    "--accent-rgb": accentRgb,
+    "--accent-muted": `rgba(${accentRgb}, 0.12)`,
+    "--border-accent": `rgba(${accentRgb}, 0.24)`,
+    "--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`,
+  } as CSSProperties;
+
+  const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const scroll = () => {
+      const surface = messagesSurfaceRef.current;
+      if (!surface) {
+        messagesEndRef.current?.scrollIntoView({ block: "end", behavior });
+        return;
+      }
+
+      setComposerHidden(false);
+      shouldFollowNewMessagesRef.current = true;
+      surface.scrollTo({ top: surface.scrollHeight, behavior });
+      lastScrollTopRef.current = surface.scrollTop;
+    };
+
+    window.requestAnimationFrame(() => {
+      scroll();
+      window.setTimeout(scroll, 80);
+    });
+  }, []);
+
+  const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
+    () => [
+      {
+        label: "比例",
+        value: imageRatio,
+        options: RATIO_OPTIONS,
+        onChange: setImageRatio,
+        kind: "ratio",
+        columns: 3,
+        icon: <AppstoreOutlined />,
+      },
+      {
+        label: "清晰度",
+        value: imageQuality,
+        options: imageQualityOptions,
+        onChange: setImageQuality,
+        kind: "pill",
+        columns: imageQualityOptions.length >= 3 ? 3 : 2,
+        icon: <PictureOutlined />,
+      },
+    ],
+    [imageQuality, imageQualityOptions, imageRatio],
+  );
+
+  const videoRatioGroups = useMemo<WorkbenchFieldGroup[]>(
+    () => [
+      {
+        label: "比例",
+        value: videoRatio,
+        options: RATIO_OPTIONS.filter((item) => item.value !== "3:4"),
+        onChange: setVideoRatio,
+        kind: "ratio",
+        columns: 3,
+        icon: <AppstoreOutlined />,
+      },
+    ],
+    [videoRatio],
+  );
+
+  const promptMentionOptions = useMemo(() => {
+    const refOptions = referenceItems.map((item) => ({
+      token: item.token,
+      id: item.id,
+      name: item.name,
+      kind: item.kind,
+      previewUrl: item.previewUrl,
+      remoteUrl: item.remoteUrl,
+    }));
+    const existingTokens = new Set(refOptions.map((o) => o.token));
+    const assetOptions = savedAssetMentionItems.filter((item) => !existingTokens.has(item.token));
+    return [...refOptions, ...assetOptions];
+  }, [referenceItems, savedAssetMentionItems]);
+  const promptCaseDisplayItems = useMemo(() => {
+    return serverPromptCases;
+  }, [serverPromptCases]);
+
+  const handlePromptCaseImageLoad = useCallback((itemId: string, event: SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = event.currentTarget;
+    if (!naturalWidth || !naturalHeight) return;
+    const measuredRatio = naturalWidth / naturalHeight;
+    setPromptCaseMeasuredRatios((current) => {
+      const previousRatio = current[itemId];
+      if (previousRatio && Math.abs(previousRatio - measuredRatio) < 0.01) return current;
+      return {
+        ...current,
+        [itemId]: measuredRatio,
+      };
+    });
+  }, []);
+
+  const referenceUploadLabel = getReferenceUploadLabel(activeMode);
+  const referenceButtonLabel =
+    referenceItems.length > 0 ? (referencePreviewOpen ? "点击折叠" : "点击显示") : referenceUploadLabel;
+  const referenceLimit = getReferenceLimit(activeMode, videoFrameMode);
+
+  const promptBeforeCursor = inputValue.slice(0, cursorIndex);
+  const promptMentionMatch = detectMentionTrigger(promptBeforeCursor);
+  const promptMentionOpen = promptMentionMatch !== null;
+  const promptPreviewNodes = useMemo(
+    () => renderPromptPreviewNodes(inputValue, promptMentionOptions),
+    [inputValue, promptMentionOptions],
+  );
+  const promptMentionTokenRanges = useMemo(
+    () => getPromptMentionTokenRanges(inputValue, promptMentionOptions),
+    [inputValue, promptMentionOptions],
+  );
+  const hasPromptSelection = promptSelectionRange.start !== promptSelectionRange.end;
+  const showPromptPreview =
+    !hasPromptSelection &&
+    inputValue.length > 0 &&
+    promptPreviewNodes.length > 0 &&
+    /@(图片|视频|音频|附件|素材)\d+/.test(inputValue);
+
+  useEffect(() => {
+    let cancelled = false;
+    communityClient
+      .listApprovedCases({ limit: 100, tag: "生成页面社区", sort: "latest" })
+      .then((items) => {
+        if (cancelled) return;
+        setServerPromptCases(
+          items
+            .map(communityCaseToPromptCase)
+            .filter((item): item is PromptCaseViewModel => Boolean(item)),
+        );
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setServerPromptCases([]);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!videoQualityOptions.some((item) => item.value === videoQuality)) {
+      setVideoQuality(getDefaultVideoQuality(videoModel));
+    }
+  }, [videoModel, videoQuality, videoQualityOptions]);
+
+  useEffect(() => {
+    if (!messagePreviewAttachment) return undefined;
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMessagePreviewAttachment(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [messagePreviewAttachment]);
+
+  useEffect(() => {
+    if (!promptMentionOpen) return undefined;
+
+    const updatePlacement = () => {
+      const anchor = textareaRef.current;
+      const rect = anchor?.getBoundingClientRect();
+      if (!rect) return;
+      const estimatedHeight = promptMentionOptions.length > 0 ? Math.min(240, 116 + promptMentionOptions.length * 44) : 152;
+      const topSpace = rect.top;
+      const bottomSpace = window.innerHeight - rect.bottom;
+      setMentionPanelPlacement(topSpace < estimatedHeight + 24 || bottomSpace > topSpace ? "below" : "above");
+    };
+
+    updatePlacement();
+    window.addEventListener("resize", updatePlacement);
+    window.addEventListener("scroll", updatePlacement, true);
+    return () => {
+      window.removeEventListener("resize", updatePlacement);
+      window.removeEventListener("scroll", updatePlacement, true);
+    };
+  }, [promptMentionOpen, promptMentionOptions.length]);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      Object.values(keepaliveTasksRef.current).forEach((task) => {
+        taskAbortControllersRef.current.get(task.taskId)?.abort();
+        taskAbortControllersRef.current.delete(task.taskId);
+      });
+      generationAbortRef.current?.abort();
+      generationAbortRef.current = null;
+      keepaliveTasksRef.current = {};
+      skipConversationAutoSelectRef.current = false;
+      clearWorkbenchLocalState();
+      referenceItemsRef.current.forEach((item) => disposeReferencePreview(item));
+      referenceItemsRef.current = [];
+      setConversations([]);
+      setActiveConversationId(null);
+      activeConversationIdRef.current = null;
+      conversationMessagesCacheRef.current.clear();
+      messagesRef.current = [];
+      setMessages([]);
+      setInputValue("");
+      setReferenceItems([]);
+      setReferencePreviewOpen(false);
+      setMessagePreviewAttachment(null);
+      setWorkspaceStarted(false);
+      setComposerHidden(false);
+      setIsGenerating(false);
+      setGenerationStatus("准备就绪");
+      setGenerationProgress(0);
+      setProjectError(null);
+      return;
+    }
+  }, [isAuthenticated]);
+
+  const loadConversations = useCallback(async () => {
+    if (!isAuthenticated) {
+      setConversations([]);
+      return;
+    }
+    try {
+      const list = await conversationClient.list();
+      setConversations(list);
+      const restoredId = activeConversationIdRef.current || readStoredActiveConversationId(messagesRef.current);
+      if (restoredId && list.some((conversation) => conversation.id === restoredId)) {
+        setActiveConversationId(restoredId);
+        activeConversationIdRef.current = restoredId;
+        persistActiveConversationId(restoredId);
+        setWorkspaceStarted(true);
+      } else if (restoredId && !list.some((conversation) => conversation.id === restoredId)) {
+        setActiveConversationId(null);
+        activeConversationIdRef.current = null;
+        persistActiveConversationId(null);
+      } else if (
+        list.length > 0 &&
+        !activeConversationIdRef.current &&
+        messagesRef.current.length === 0 &&
+        !skipConversationAutoSelectRef.current
+      ) {
+        const nextConversationId = list[0].id;
+        setActiveConversationId(nextConversationId);
+        activeConversationIdRef.current = nextConversationId;
+        persistActiveConversationId(nextConversationId);
+        setWorkspaceStarted(true);
+      }
+      setProjectError(null);
+    } catch (error) {
+      if (isAuthFailure(error)) {
+        setProjectError(null);
+        return;
+      }
+      setProjectError(error instanceof Error ? error.message : String(error));
+    }
+  }, [isAuthenticated]);
+
+  const loadConversation = useCallback(async (conversationId: number) => {
+    try {
+      skipConversationAutoSelectRef.current = false;
+      const conversation = await conversationClient.get(conversationId);
+      const nextMessages = conversation.messages.filter((item): item is ChatMessage => {
+        return (
+          item &&
+          typeof item.id === "string" &&
+          (item.role === "user" || item.role === "assistant") &&
+          typeof item.body === "string"
+        );
+      }) as ChatMessage[];
+      setActiveConversationId(conversation.id);
+      activeConversationIdRef.current = conversation.id;
+      pendingScrollToLatestRef.current = true;
+      setMessages(nextMessages);
+      rememberConversationMessages(conversation.id, nextMessages);
+      setWorkspaceStarted(nextMessages.length > 0);
+      setComposerHidden(false);
+      setProjectError(null);
+    } catch (error) {
+      if (isAuthFailure(error)) {
+        setProjectError(null);
+        return;
+      }
+      setProjectError(error instanceof Error ? error.message : String(error));
+    }
+  }, []);
+
+  // Migrate orphaned localStorage messages (no conversationId) to server
+  const migrateOrphanedMessages = useCallback(async () => {
+    const stored = readStoredMessages();
+    if (stored.length === 0) return;
+    const hasConversationId = stored.some((m) => m.conversationId);
+    if (hasConversationId) return; // messages already linked to a server conversation
+
+    try {
+      const conv = await conversationClient.create(
+        stored[0]?.body?.slice(0, 20) || "历史对话",
+        stored[0]?.mode || "chat",
+        stored.map((m) => ({ ...m, conversationId: undefined })),
+      );
+      const migrated = stored.map((m) => ({ ...m, conversationId: conv.id }));
+      setMessages(migrated);
+      messagesRef.current = migrated;
+      rememberConversationMessages(conv.id, migrated);
+      setActiveConversationId(conv.id);
+      activeConversationIdRef.current = conv.id;
+      persistActiveConversationId(conv.id);
+      persistMessages(migrated);
+      void loadConversations();
+    } catch {
+      // Migration is best-effort; if it fails, keep using localStorage
+    }
+  }, [loadConversations]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    void migrateOrphanedMessages();
+  }, [isAuthenticated, migrateOrphanedMessages]);
+
+  useEffect(() => {
+    void loadConversations();
+  }, [loadConversations]);
+
+  useEffect(() => {
+    if (!isAuthenticated || !activeConversationId || messages.length > 0) return;
+    void loadConversation(activeConversationId);
+  }, [activeConversationId, isAuthenticated, loadConversation, messages.length]);
+
+  const saveProjectMessages = useCallback(
+    async (nextMessages: ChatMessage[], saveReason = "web-chat-autosave") => {
+      const conversationId = activeConversationIdRef.current;
+      if (!conversationId) return;
+      const persistableMessages = getPersistableMessages(nextMessages);
+      if (persistableMessages.length === 0) {
+        return;
+      }
+      await conversationClient.update(conversationId, { messages: persistableMessages as never[] });
+      setProjectError(null);
+      void loadConversations();
+      return { saveReason };
+    },
+    [loadConversations],
+  );
+
+  const handleProjectSaveError = useCallback((error: unknown) => {
+    if (isAuthFailure(error)) {
+      setProjectError(null);
+      return;
+    }
+    setProjectError(getErrorText(error));
+  }, []);
+
+  const rememberConversationMessages = (conversationId: number, nextMessages: ChatMessage[]) => {
+    conversationMessagesCacheRef.current.set(conversationId, nextMessages);
+  };
+
+  const getActiveKeepaliveTask = (conversationId: number | null) => {
+    if (!conversationId) return undefined;
+    return Object.values(keepaliveTasksRef.current).find((task) => task.conversationId === conversationId);
+  };
+
+  const syncActiveGenerationUi = useCallback((conversationId: number | null = activeConversationIdRef.current) => {
+    const activeTask = getActiveKeepaliveTask(conversationId);
+    setIsGenerating(Boolean(activeTask));
+    if (activeTask) {
+      setGenerationStatus(activeTask.statusLabel);
+      setGenerationProgress(activeTask.progress);
+    } else {
+      setGenerationProgress(0);
+    }
+  }, []);
+
+  const patchConversationMessage = useCallback(
+    async (conversationId: number, messageId: string, patch: Partial<ChatMessage>) => {
+      let sourceMessages =
+        activeConversationIdRef.current === conversationId
+          ? messagesRef.current
+          : conversationMessagesCacheRef.current.get(conversationId);
+
+      if (!sourceMessages) return;
+
+      let changed = false;
+      const nextMessages = sourceMessages.map((message) => {
+        if (message.id !== messageId) return message;
+        changed = true;
+        const nextPatch = { ...patch };
+        if (
+          typeof nextPatch.taskProgress === "number" &&
+          typeof message.taskProgress === "number" &&
+          nextPatch.taskProgress < message.taskProgress &&
+          nextPatch.status !== "failed"
+        ) {
+          nextPatch.taskProgress = message.taskProgress;
+        }
+        return { ...message, ...nextPatch };
+      });
+      if (!changed) return;
+
+      conversationMessagesCacheRef.current.set(conversationId, nextMessages);
+      if (activeConversationIdRef.current === conversationId) {
+        setMessages(nextMessages);
+      }
+      if (shouldPersistPatch(patch)) {
+        await saveProjectMessages(nextMessages).catch(handleProjectSaveError);
+      }
+    },
+    [handleProjectSaveError, saveProjectMessages],
+  );
+
+  const upsertKeepaliveTask = (task: WorkbenchKeepaliveTask) => {
+    keepaliveTasksRef.current = { ...keepaliveTasksRef.current, [task.taskId]: task };
+    persistKeepaliveTasks(keepaliveTasksRef.current);
+  };
+
+  const removeKeepaliveTask = (taskId: string) => {
+    const removed = keepaliveTasksRef.current[taskId];
+    releaseGenerationSlot(removed?.concurrencySlotId);
+    const { [taskId]: _removed, ...rest } = keepaliveTasksRef.current;
+    keepaliveTasksRef.current = rest;
+    persistKeepaliveTasks(rest);
+  };
+
+  const runKeepalivePoll = useCallback(
+    (task: WorkbenchKeepaliveTask) => {
+      if (taskAbortControllersRef.current.has(task.taskId)) return;
+
+      let lastKnownProgress = Math.max(0, Number(task.progress || 0));
+      let taskPollFailures = 0;
+      const abortController = new AbortController();
+      taskAbortControllersRef.current.set(task.taskId, abortController);
+      if (activeConversationIdRef.current === task.conversationId) {
+        generationAbortRef.current = abortController;
+        setIsGenerating(true);
+        setGenerationStatus(task.statusLabel);
+        setGenerationProgress(lastKnownProgress);
+      }
+
+      const sleep = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms));
+
+      void (async () => {
+        try {
+          for (let attempt = 0; attempt < 220; attempt += 1) {
+            if (abortController.signal.aborted) return;
+            if (attempt > 0) await sleep(3000);
+            if (abortController.signal.aborted) return;
+
+            let status;
+            try {
+              status = await aiGenerationClient.getTaskStatus(task.taskId);
+            } catch {
+              taskPollFailures += 1;
+              if (taskPollFailures >= WORKBENCH_TASK_MAX_POLL_FAILURES) {
+                await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+                  body: "任务状态连续查询失败，已停止等待。请重新生成或稍后在资产页查看。",
+                  status: "failed",
+                  taskProgress: 100,
+                  taskStatusLabel: "任务异常",
+                });
+                removeKeepaliveTask(task.taskId);
+                return;
+              }
+              continue;
+            }
+            taskPollFailures = 0;
+
+            const currentMessageProgress =
+              activeConversationIdRef.current === task.conversationId
+                ? messagesRef.current.find((message) => message.id === task.assistantMessageId)?.taskProgress || 0
+                : 0;
+            const serverProgress = Number(status.progress || 0);
+            const baseProgress = Number.isFinite(serverProgress) ? serverProgress : 0;
+            const progress = status.status === "completed"
+              ? 100
+              : Math.min(99, Math.max(10, lastKnownProgress, currentMessageProgress, Math.round(baseProgress)));
+            lastKnownProgress = Math.max(lastKnownProgress, progress);
+            const isSuperResolveTask = task.operation === "video-super-resolution";
+            const statusLabel =
+              status.status === "pending"
+                ? (isSuperResolveTask ? "超分排队中" : "任务排队中")
+                : status.status === "running"
+                  ? (isSuperResolveTask ? "超分处理中..." : "正在生成...")
+                  : status.status === "completed"
+                    ? (isSuperResolveTask ? "超分完成" : "生成完成")
+                    : (isSuperResolveTask ? "超分失败" : "生成失败");
+
+            const latestTask = {
+              ...task,
+              progress,
+              statusLabel,
+            };
+            upsertKeepaliveTask(latestTask);
+
+            if (activeConversationIdRef.current === task.conversationId) {
+              setIsGenerating(status.status !== "completed" && status.status !== "failed");
+              setGenerationStatus(statusLabel);
+              setGenerationProgress(progress);
+            }
+
+            if (status.status === "completed" && status.resultUrl) {
+              const completedPatch: Partial<ChatMessage> = {
+                body: isSuperResolveTask
+                  ? "视频已完成超分，并已替换为高清版本"
+                  : task.mode === "image" ? "图像已经生成完成。" : "视频已经生成完成。",
+                status: "completed",
+                taskProgress: 100,
+                taskStatusLabel: statusLabel,
+                resultUrl: status.resultUrl,
+                resultType: task.mode,
+                resultOriginalUrl: status.resultUrl,
+              };
+              if (!isSuperResolveTask) {
+                completedPatch.result = buildAssistantResult(task.mode, task.modelLabel, task.specs, task.referenceCount);
+              }
+              await patchConversationMessage(task.conversationId, task.assistantMessageId, completedPatch);
+              removeKeepaliveTask(task.taskId);
+              onRefreshUsage?.();
+              try {
+                if (status.resultUrl) {
+                  const persistedResult = await persistWorkbenchResultAsset({
+                    title: task.mode === "image" ? "生成图片" : isSuperResolveTask ? "超分视频" : "生成视频",
+                    sourceUrl: status.resultUrl,
+                    resultType: task.mode,
+                    taskId: task.taskId,
+                  });
+                  await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+                    resultUrl: persistedResult.url,
+                    resultOriginalUrl: persistedResult.originalUrl,
+                    resultOssKey: persistedResult.ossKey,
+                    resultMimeType: persistedResult.mimeType,
+                  });
+                }
+              } catch (error) {
+                console.warn("[workbench] result persistence skipped after visible completion:", error);
+              }
+              return;
+            }
+
+            if (status.status === "completed" && !status.resultUrl) {
+              await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+                body: "任务已结束，但没有返回可用资源。请重新生成。",
+                status: "failed",
+                taskProgress: 100,
+                taskStatusLabel: "结果缺失",
+              });
+              removeKeepaliveTask(task.taskId);
+              return;
+            }
+
+            if (status.status === "failed" || status.status === "cancelled") {
+              if (getCachedRole() === "admin") console.error("[轮询] 任务失败", { taskId: task.taskId, status, error: status.error });
+              if (isInsufficientBalanceMessage(status.error)) setShowRechargeModal(true);
+              await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+                body: translateTaskError(status.error),
+                status: "failed",
+                taskProgress: progress,
+                taskStatusLabel: statusLabel,
+              });
+              removeKeepaliveTask(task.taskId);
+              onRefreshUsage?.();
+              return;
+            }
+
+            await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+              body: isSuperResolveTask ? "视频超分任务已提交，正在增强画质..." : "任务已提交，正在生成中...",
+              status: "thinking",
+              taskProgress: progress,
+              taskStatusLabel: statusLabel,
+            });
+          }
+
+          await patchConversationMessage(task.conversationId, task.assistantMessageId, {
+            body: task.operation === "video-super-resolution"
+              ? "视频超分超时，请稍后重试"
+              : "生成超时，请稍后在资产页查看结果。",
+            status: "failed",
+            taskStatusLabel: task.operation === "video-super-resolution" ? "超分超时" : "生成超时",
+          });
+          removeKeepaliveTask(task.taskId);
+        } finally {
+          taskAbortControllersRef.current.delete(task.taskId);
+          if (generationAbortRef.current === abortController) {
+            generationAbortRef.current = null;
+          }
+          syncActiveGenerationUi();
+        }
+      })();
+    },
+    [patchConversationMessage, syncActiveGenerationUi],
+  );
+
+  useEffect(() => {
+    persistMessages(messages);
+    if (activeConversationIdRef.current) {
+      rememberConversationMessages(activeConversationIdRef.current, messages);
+    }
+    const previousMessageIds = renderedMessageIdsRef.current;
+    const currentMessageIds = messages.map((message) => message.id);
+    const messageListChanged =
+      currentMessageIds.length !== previousMessageIds.length ||
+      currentMessageIds.some((messageId, index) => messageId !== previousMessageIds[index]);
+
+    renderedMessageIdsRef.current = currentMessageIds;
+    messagesRef.current = messages;
+
+    const shouldForceScrollToLatest = pendingScrollToLatestRef.current && messages.length > 0;
+    if (shouldForceScrollToLatest) {
+      pendingScrollToLatestRef.current = false;
+    }
+
+    if (
+      shouldForceScrollToLatest ||
+      (hasHandledInitialMessagesRef.current && messageListChanged && shouldFollowNewMessagesRef.current)
+    ) {
+      scrollMessagesToLatest(shouldForceScrollToLatest ? "auto" : "smooth");
+    }
+
+    hasHandledInitialMessagesRef.current = true;
+  }, [messages, scrollMessagesToLatest]);
+
+  useEffect(() => {
+    activeConversationIdRef.current = activeConversationId;
+    persistActiveConversationId(activeConversationId);
+    syncActiveGenerationUi(activeConversationId);
+  }, [activeConversationId, syncActiveGenerationUi]);
+
+  useEffect(() => {
+    if (!imageQualityOptions.some((option) => option.value === imageQuality)) {
+      setImageQuality(getDefaultImageQuality(imageModel));
+    }
+  }, [imageModel, imageQuality, imageQualityOptions]);
+
+  useEffect(() => {
+    if (activeMode !== "video" || videoFrameMode !== "start-end" || referenceItems.length <= 2) return;
+
+    setReferenceItems((current) => {
+      if (current.length <= 2) return current;
+      const removed = current.slice(2);
+      removed.forEach((item) => disposeReferencePreview(item));
+      return current.slice(0, 2);
+    });
+  }, [activeMode, referenceItems.length, videoFrameMode]);
+
+  useEffect(() => {
+    Object.values(keepaliveTasksRef.current).forEach((task) => runKeepalivePoll(task));
+    return () => {
+      taskAbortControllersRef.current.forEach((controller) => controller.abort());
+      taskAbortControllersRef.current.clear();
+    };
+  }, [runKeepalivePoll]);
+
+  useEffect(() => {
+    persistPromptHistory(promptHistory);
+  }, [promptHistory]);
+
+  const handleRefreshProject = useCallback(() => {
+    void loadConversations();
+  }, [loadConversations]);
+
+  const handleRenameProject = useCallback(
+    async (projectId: string, title: string) => {
+      const conversationId = Number(projectId);
+      if (!Number.isFinite(conversationId)) return;
+      try {
+        await conversationClient.update(conversationId, { title });
+        setConversations((prev) => prev.map((c) => c.id === conversationId ? { ...c, title } : c));
+        setProjectError(null);
+      } catch (error) {
+        if (isAuthFailure(error)) {
+          setProjectError(null);
+          return;
+        }
+        setProjectError(error instanceof Error ? error.message : String(error));
+      }
+    },
+    [],
+  );
+
+  const requestDeleteProject = useCallback(
+    (projectId: string) => {
+      const record = conversationRecords.find((item) => item.id === projectId);
+      setDeleteDialog({ projectId, title: record?.name || projectId });
+    },
+    [conversationRecords],
+  );
+
+  const confirmDeleteProject = useCallback(
+    async () => {
+      if (!deleteDialog || deleteSubmitting) return;
+      const conversationId = Number(deleteDialog.projectId);
+      if (!Number.isFinite(conversationId)) {
+        setDeleteDialog(null);
+        return;
+      }
+      setDeleteSubmitting(true);
+      try {
+        await conversationClient.delete(conversationId, { cleanupUserData: true });
+        const remainingConversations = conversations.filter((conversation) => conversation.id !== conversationId);
+        setConversations(remainingConversations);
+        if (conversationId === activeConversationId) {
+          Object.values(keepaliveTasksRef.current)
+            .filter((task) => task.conversationId === activeConversationIdRef.current)
+            .forEach((task) => {
+              taskAbortControllersRef.current.get(task.taskId)?.abort();
+              taskAbortControllersRef.current.delete(task.taskId);
+              removeKeepaliveTask(task.taskId);
+              aiGenerationClient.cancelTask(task.taskId).catch(() => {});
+            });
+          const currentIndex = conversations.findIndex((conversation) => conversation.id === conversationId);
+          const nextConversation =
+            remainingConversations[Math.max(0, currentIndex)] ||
+            remainingConversations[Math.max(0, currentIndex - 1)] ||
+            remainingConversations[0] ||
+            null;
+
+          if (nextConversation) {
+            skipConversationAutoSelectRef.current = false;
+            setActiveConversationId(nextConversation.id);
+            activeConversationIdRef.current = nextConversation.id;
+            persistActiveConversationId(nextConversation.id);
+            setWorkspaceStarted(true);
+            setComposerHidden(false);
+            void loadConversation(nextConversation.id);
+          } else {
+            skipConversationAutoSelectRef.current = true;
+            setActiveConversationId(null);
+            activeConversationIdRef.current = null;
+            persistActiveConversationId(null);
+            messagesRef.current = [];
+            setMessages([]);
+            setInputValue("");
+            setWorkspaceStarted(false);
+            setComposerHidden(false);
+            syncActiveGenerationUi(null);
+          }
+        }
+        setProjectError(null);
+        setDeleteDialog(null);
+      } catch (error) {
+        if (isAuthFailure(error)) {
+          setProjectError(null);
+          setDeleteDialog(null);
+          return;
+        }
+        setProjectError(error instanceof Error ? error.message : String(error));
+      } finally {
+        setDeleteSubmitting(false);
+      }
+    },
+    [activeConversationId, conversations, deleteDialog, deleteSubmitting, loadConversation, syncActiveGenerationUi],
+  );
+
+  const handleNewConversation = useCallback(() => {
+    skipConversationAutoSelectRef.current = true;
+    setActiveConversationId(null);
+    persistActiveConversationId(null);
+    messagesRef.current = [];
+    pendingScrollToLatestRef.current = true;
+    setMessages([]);
+    setInputValue("");
+    setWorkspaceStarted(false);
+    setComposerHidden(false);
+    syncActiveGenerationUi(null);
+    activeConversationIdRef.current = null;
+  }, [syncActiveGenerationUi]);
+
+  const handleSelectProject = useCallback((id: string) => {
+    if (!id) {
+      handleNewConversation();
+      return;
+    }
+    const conversationId = Number(id);
+    if (Number.isFinite(conversationId)) {
+      skipConversationAutoSelectRef.current = false;
+      void loadConversation(conversationId);
+    }
+  }, [handleNewConversation, loadConversation]);
+
+  const handleDeleteConversation = useCallback(async (id: number) => {
+    try {
+      await conversationClient.delete(id, { cleanupUserData: true });
+      setConversations((prev) => prev.filter((c) => c.id !== id));
+      if (activeConversationId === id) {
+        setActiveConversationId(null);
+        activeConversationIdRef.current = null;
+        persistActiveConversationId(null);
+        setMessages([]);
+        setWorkspaceStarted(false);
+        setComposerHidden(false);
+        syncActiveGenerationUi(null);
+      }
+    } catch {}
+  }, [activeConversationId, syncActiveGenerationUi]);
+
+  const handleRenameConversation = useCallback(async (id: number, title: string) => {
+    try {
+      await conversationClient.update(id, { title });
+      setConversations((prev) => prev.map((c) => c.id === id ? { ...c, title } : c));
+    } catch {}
+  }, []);
+
+  useEffect(() => {
+    referenceItemsRef.current = referenceItems;
+  }, [referenceItems]);
+
+  const focusPromptAt = useCallback((index: number) => {
+    const nextIndex = Math.max(0, Math.min(inputValue.length, index));
+    setCursorIndex(nextIndex);
+    setPromptSelectionRange({ start: nextIndex, end: nextIndex });
+    window.requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.setSelectionRange(nextIndex, nextIndex);
+    });
+  }, [inputValue.length]);
+
+  const normalizePromptSelection = useCallback(
+    (selectionStart: number, selectionEnd: number) => {
+      if (promptMentionTokenRanges.length === 0) {
+        return { start: selectionStart, end: selectionEnd };
+      }
+
+      if (selectionStart === selectionEnd) {
+        const range = findPromptMentionRangeInside(selectionStart, promptMentionTokenRanges);
+        if (!range) return { start: selectionStart, end: selectionEnd };
+        return { start: range.end, end: range.end };
+      }
+
+      const selectionMin = Math.min(selectionStart, selectionEnd);
+      const selectionMax = Math.max(selectionStart, selectionEnd);
+      const overlappedRange = findPromptMentionRangeOverlap(selectionMin, selectionMax, promptMentionTokenRanges);
+      if (overlappedRange) {
+        return { start: overlappedRange.end, end: overlappedRange.end };
+      }
+
+      const startRange = findPromptMentionRangeInside(selectionStart, promptMentionTokenRanges);
+      const endRange = findPromptMentionRangeInside(selectionEnd, promptMentionTokenRanges);
+      const nextStart = startRange ? startRange.start : selectionStart;
+      const nextEnd = endRange ? endRange.end : selectionEnd;
+      return { start: Math.min(nextStart, nextEnd), end: Math.max(nextStart, nextEnd) };
+    },
+    [promptMentionTokenRanges],
+  );
+
+  useEffect(
+    () => () => {
+      referenceItemsRef.current.forEach((item) => {
+        disposeReferencePreview(item);
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!toolbarMenuId) return undefined;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!toolbarRef.current?.contains(event.target as Node)) {
+        setToolbarMenuId(null);
+      }
+    };
+
+    window.addEventListener("pointerdown", handlePointerDown);
+    return () => window.removeEventListener("pointerdown", handlePointerDown);
+  }, [toolbarMenuId]);
+
+  useEffect(() => {
+    if (!referencePreviewOpen) return undefined;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!referenceRefsRef.current?.contains(event.target as Node)) {
+        setReferencePreviewOpen(false);
+      }
+    };
+
+    window.addEventListener("pointerdown", handlePointerDown);
+    return () => window.removeEventListener("pointerdown", handlePointerDown);
+  }, [referencePreviewOpen]);
+
+  useEffect(() => {
+    if (referenceItems.length === 0 && referencePreviewOpen) {
+      setReferencePreviewOpen(false);
+    }
+  }, [referenceItems.length, referencePreviewOpen]);
+
+  useEffect(() => {
+    if (referenceItems.length === 0) {
+      referenceTokenSequenceRef.current = {
+        image: 0,
+        video: 0,
+        audio: 0,
+        file: 0,
+      };
+    }
+  }, [referenceItems.length]);
+
+  useEffect(() => {
+    if (referenceItems.length === 0) return;
+    if (referenceItems.length < referenceLimit) return;
+    setReferencePreviewOpen(true);
+  }, [referenceItems.length, referenceLimit]);
+
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(Math.max(el.scrollHeight, 42), 120)}px`;
+  }, [inputValue]);
+
+  useEffect(() => {
+    const surface = messagesSurfaceRef.current;
+    if (!surface) return;
+    const scrollDeltaThreshold = 8;
+    const edgeThreshold = 3;
+
+    const syncComposerVisibility = () => {
+      const top = surface.scrollTop;
+      const atTop = top <= edgeThreshold;
+      const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
+      shouldFollowNewMessagesRef.current = atBottom;
+      setComposerHidden(!(atTop || atBottom));
+      lastScrollTopRef.current = top;
+    };
+
+    lastScrollTopRef.current = surface.scrollTop;
+    syncComposerVisibility();
+
+    const handleScroll = () => {
+      const top = surface.scrollTop;
+      const delta = top - lastScrollTopRef.current;
+      const atTop = top <= edgeThreshold;
+      const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
+      shouldFollowNewMessagesRef.current = atBottom;
+      if (atTop || atBottom) {
+        setComposerHidden(false);
+      } else if (Math.abs(delta) > scrollDeltaThreshold) {
+        setComposerHidden(true);
+      }
+      lastScrollTopRef.current = top;
+    };
+
+    surface.addEventListener("scroll", handleScroll, { passive: true });
+    return () => surface.removeEventListener("scroll", handleScroll);
+  }, [hasActivatedWorkspace]);
+
+  const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
+    const surface = messagesSurfaceRef.current;
+    if (!surface) return;
+
+    const top = direction === "top" ? 0 : surface.scrollHeight;
+    setComposerHidden(false);
+    surface.scrollTo({ top, behavior: "smooth" });
+  }, []);
+
+  const closeToolbarMenus = () => setToolbarMenuId(null);
+  const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
+    setToolbarMenuId((current) => (current === menuId ? null : menuId));
+  };
+
+  const handleModeChange = (mode: WorkbenchMode) => {
+    setActiveMode(mode);
+    setToolbarMenuId(null);
+    setReferencePreviewOpen(false);
+    window.requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const handlePromptChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const selection = normalizePromptSelection(event.target.selectionStart, event.target.selectionEnd);
+    setInputValue(event.target.value);
+    setCursorIndex(selection.start);
+    setPromptSelectionRange(selection);
+    if (selection.start !== event.target.selectionStart || selection.end !== event.target.selectionEnd) {
+      window.requestAnimationFrame(() => event.target.setSelectionRange(selection.start, selection.end));
+    }
+  };
+
+  const handlePromptSelectionChange = (event: SyntheticEvent<HTMLTextAreaElement>) => {
+    const { selectionStart, selectionEnd } = event.currentTarget;
+    const selection = normalizePromptSelection(selectionStart, selectionEnd);
+    setCursorIndex(selection.start);
+    setPromptSelectionRange(selection);
+    if (selection.start !== selectionStart || selection.end !== selectionEnd) {
+      const target = event.currentTarget;
+      window.requestAnimationFrame(() => target.setSelectionRange(selection.start, selection.end));
+    }
+  };
+
+  const handlePromptScroll = (event: SyntheticEvent<HTMLTextAreaElement>) => {
+    const ta = event.currentTarget;
+    const highlight = ta.parentElement?.querySelector<HTMLElement>(".wb-composer__highlight");
+    if (highlight) highlight.scrollTop = ta.scrollTop;
+  };
+
+  const removeReferenceItem = (id: string) => {
+    const target = referenceItems.find((item) => item.id === id);
+    setReferenceItems((current) => {
+      if (target) disposeReferencePreview(target);
+      return current.filter((item) => item.id !== id);
+    });
+    if (target?.token) {
+      const nextValue = removePromptMentionTokenFromText(inputValue, target.token);
+      if (nextValue !== inputValue) {
+        const nextCursor = Math.min(cursorIndex, nextValue.length);
+        setInputValue(nextValue);
+        setCursorIndex(nextCursor);
+        setPromptSelectionRange({ start: nextCursor, end: nextCursor });
+        window.requestAnimationFrame(() => {
+          textareaRef.current?.setSelectionRange(nextCursor, nextCursor);
+        });
+      }
+    }
+  };
+
+  const applyReferenceRemoteUrl = (id: string, remoteUrl: string) => {
+    const nextItems = referenceItemsRef.current.map((item) =>
+      item.id === id ? { ...item, remoteUrl } : item,
+    );
+    referenceItemsRef.current = nextItems;
+    setReferenceItems(nextItems);
+  };
+
+  const handleReferenceUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    event.target.value = "";
+    if (files.length === 0) return;
+
+    const existingFingerprints = new Set(
+      referenceItemsRef.current
+        .map((item) => item.fingerprint)
+        .filter((fingerprint): fingerprint is string => Boolean(fingerprint)),
+    );
+    const selectedFingerprints = new Set<string>();
+    const preparedItems: Array<Omit<ReferenceItem, "id" | "token">> = [];
+
+    for (const file of files) {
+      try {
+        const kind = inferReferenceKind(file, activeMode);
+        const fingerprint = await buildReferenceFingerprint(file, kind);
+        if (kind === "image") {
+          if (existingFingerprints.has(fingerprint) || selectedFingerprints.has(fingerprint)) {
+            continue;
+          }
+          selectedFingerprints.add(fingerprint);
+        }
+
+        const result = kind === "image" ? await compressReferenceImageIfNeeded(file) : { file, compressed: false };
+        const canPreview = kind === "image" || kind === "video";
+        preparedItems.push({
+          kind,
+          name: file.name,
+          file: result.file,
+          previewUrl: canPreview ? URL.createObjectURL(result.file) : undefined,
+          fingerprint,
+          originalSize: file.size,
+          compressed: result.compressed,
+        });
+      } catch {
+        continue;
+      }
+    }
+
+    if (preparedItems.length > 0) {
+      const currentItems = referenceItemsRef.current;
+      const currentFingerprints = new Set(
+        currentItems
+          .map((item) => item.fingerprint)
+          .filter((fingerprint): fingerprint is string => Boolean(fingerprint)),
+      );
+      const acceptedItems: ReferenceItem[] = [];
+      const nextTokenSequence = { ...referenceTokenSequenceRef.current };
+
+      preparedItems.forEach((item) => {
+        if (currentItems.length + acceptedItems.length >= referenceLimit) {
+          disposeReferencePreview(item);
+          return;
+        }
+        if (item.kind === "image" && item.fingerprint && currentFingerprints.has(item.fingerprint)) {
+          disposeReferencePreview(item);
+          return;
+        }
+        if (item.fingerprint) currentFingerprints.add(item.fingerprint);
+        const nextTokenIndex = nextTokenSequence[item.kind] + 1;
+        nextTokenSequence[item.kind] = nextTokenIndex;
+        acceptedItems.push({
+          ...item,
+          id: createId("ref"),
+          token: buildReferenceToken(item.kind, nextTokenIndex),
+        });
+      });
+
+      if (acceptedItems.length > 0) {
+        referenceTokenSequenceRef.current = nextTokenSequence;
+        const nextReferenceItems = [...currentItems, ...acceptedItems];
+        referenceItemsRef.current = nextReferenceItems;
+        setReferenceItems(nextReferenceItems);
+        acceptedItems.forEach((item) => {
+          if (item.file && (item.kind === "image" || item.kind === "video")) {
+            void preUploadReference(item.file, item.name, item.fingerprint).then((url) => {
+              if (url) applyReferenceRemoteUrl(item.id, url);
+            });
+          }
+        });
+      }
+    }
+
+    setToolbarMenuId(null);
+    setReferencePreviewOpen(preparedItems.length > 0 || referenceItemsRef.current.length > 0);
+    window.requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const handleReferenceUploadClick = () => {
+    if (referenceItems.length > 0) {
+      setToolbarMenuId(null);
+      setReferencePreviewOpen((current) => !current);
+      return;
+    }
+    referenceInputRef.current?.click();
+  };
+
+  const handleReferenceAddMore = () => {
+    setToolbarMenuId(null);
+    setReferencePreviewOpen(true);
+    referenceInputRef.current?.click();
+  };
+
+  const insertPromptMention = (token: string) => {
+    const rawBefore = inputValue.slice(0, cursorIndex);
+    const after = inputValue.slice(cursorIndex);
+    const match = detectMentionTrigger(rawBefore);
+    const before = match
+      ? rawBefore.slice(0, match.atIndex) + token
+      : `${rawBefore}${rawBefore && !/\s$/.test(rawBefore) ? " " : ""}${token}`;
+    const spacer = after.length === 0 || !/^\s/.test(after) ? " " : "";
+    const nextValue = `${before}${spacer}${after}`;
+    const nextCursor = before.length + spacer.length;
+    setInputValue(nextValue);
+    setCursorIndex(nextCursor);
+    setPromptSelectionRange({ start: nextCursor, end: nextCursor });
+    setMentionActiveIndex(0);
+    setToolbarMenuId(null);
+    setReferencePreviewOpen(false);
+
+    const selectedOption = promptMentionOptions.find((o) => o.token === token);
+    if (selectedOption && selectedOption.id.startsWith("asset-")) {
+      const alreadyAdded = referenceItemsRef.current.some((r) => r.id === selectedOption.id);
+      if (!alreadyAdded) {
+        const newItem: ReferenceItem = {
+          id: selectedOption.id,
+          kind: selectedOption.kind as ReferenceKind,
+          name: selectedOption.name,
+          previewUrl: selectedOption.previewUrl,
+          remoteUrl: selectedOption.remoteUrl,
+          token: selectedOption.token,
+        };
+        const nextItems = [...referenceItemsRef.current, newItem];
+        referenceItemsRef.current = nextItems;
+        setReferenceItems(nextItems);
+      }
+    }
+
+    window.requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.setSelectionRange(nextCursor, nextCursor);
+    });
+  };
+
+  const buildTaskPrompt = (trimmedPrompt: string) => {
+    const specLines =
+      activeMode === "image"
+        ? [`模式：${MODE_META.image.label}`, `模型：${activeModel}`, `比例：${imageRatio}`, `清晰度：${imageQuality}`, `多宫格：${GRID_MODE_OPTIONS.find((item) => item.value === imageGridMode)?.label || imageGridMode}`]
+        : activeMode === "video"
+          ? [`模式：${MODE_META.video.label}`, `模型：${activeModel}`, `生成方式：${VIDEO_FRAME_OPTIONS.find((item) => item.value === videoFrameMode)?.label || videoFrameMode}`, `比例：${videoRatio}`, `时长：${videoDuration} 秒`, `清晰度：${videoQualityLabel}`]
+          : [`模式：${MODE_META.chat.label}`];
+
+    const referenceLines = referenceItems.map((item) => {
+      const token = item.token;
+      return `${token}：${item.name}`;
+    });
+
+    return [trimmedPrompt, "", ...specLines, ...(referenceLines.length ? ["", "参考素材：", ...referenceLines] : [])].join("\n");
+  };
+
+  const getCurrentSpecs = () => {
+    if (activeMode === "image") {
+      return [
+        activeModel,
+        imageSettingsSummary,
+        GRID_MODE_OPTIONS.find((item) => item.value === imageGridMode)?.label || imageGridMode,
+      ];
+    }
+
+    if (activeMode === "video") {
+      return [
+        activeModel,
+        VIDEO_FRAME_OPTIONS.find((item) => item.value === videoFrameMode)?.label || videoFrameMode,
+        `${videoRatio} / ${videoDuration}s / ${videoQualityLabel}`,
+      ];
+    }
+
+    return ["工作流拆解", "脚本与分镜", "可复制节点"];
+  };
+
+  const updateAssistantMessage = (id: string, patch: Partial<ChatMessage>) => {
+    const nextMessages = messagesRef.current.map((message) => {
+      if (message.id !== id) return message;
+      const nextPatch = { ...patch };
+      if (
+        typeof nextPatch.taskProgress === "number" &&
+        typeof message.taskProgress === "number" &&
+        nextPatch.taskProgress < message.taskProgress &&
+        nextPatch.status !== "failed"
+      ) {
+        nextPatch.taskProgress = message.taskProgress;
+      }
+      return { ...message, ...nextPatch };
+    });
+    messagesRef.current = nextMessages;
+    if (activeConversationIdRef.current) {
+      rememberConversationMessages(activeConversationIdRef.current, nextMessages);
+    }
+    setMessages(nextMessages);
+    return nextMessages;
+  };
+
+  const persistConversationAfterResult = (conversationId: number, nextMessages: ChatMessage[]) => {
+    rememberConversationMessages(conversationId, nextMessages);
+    void saveProjectMessages(nextMessages, "web-chat-result").catch(handleProjectSaveError);
+  };
+
+  const handleSendAction = async (promptOverride?: string) => {
+    const trimmedPrompt = (promptOverride ?? inputValue).trim();
+    if (!trimmedPrompt) return;
+    const userKey = getGenerationUserKey(session?.user.id);
+    if (activeMode !== "chat" && getActiveGenerationTaskCount(userKey) >= 3) return;
+    setReferencePreviewOpen(false);
+
+    let conversationId = activeConversationIdRef.current ?? activeConversationId;
+    let baseMessages =
+      conversationId && workspaceStarted
+        ? messages
+        : conversationId
+          ? conversationMessagesCacheRef.current.get(conversationId) || []
+          : [];
+    const taskInput: CreatePreviewTaskInput = {
+      title: `${MODE_META[activeMode].label} 创作任务`,
+      type: MODE_META[activeMode].taskType,
+      prompt: buildTaskPrompt(trimmedPrompt),
+      params: activeMode === "image"
+        ? { model: activeModelValue, ratio: imageRatio, quality: imageQuality, gridMode: imageGridMode }
+        : activeMode === "video"
+          ? {
+              model: toHappyHorseDisplayModel(activeModelValue),
+              ratio: videoRatio,
+              quality: videoQuality,
+              resolution: videoQuality,
+              duration: Number(videoDuration),
+              frameMode: videoFrameMode,
+              muted: false,
+              hasReferenceVideo: referenceItems.some((item) => item.kind === "video"),
+            }
+          : { model: activeModelValue },
+    };
+
+    if (activeMode === "image" && getCachedRole() === "admin") {
+      console.log("[ai/workbench-image-submit]", {
+        model: taskInput.params?.model,
+        ratio: taskInput.params?.ratio,
+        quality: taskInput.params?.quality,
+        gridMode: taskInput.params?.gridMode,
+        referenceCount: referenceItems.length,
+        promptLength: taskInput.prompt.length,
+        requestWillStart: isAuthenticated,
+        authRequired: !isAuthenticated,
+      });
+    }
+
+    if (!isAuthenticated) {
+      onRequireLogin(taskInput);
+      return;
+    }
+
+    if (conversationId && !conversationMessagesCacheRef.current.has(conversationId) && messages.length === 0) {
+      try {
+        const conversation = await conversationClient.get(conversationId);
+        const restoredMessages = conversation.messages.filter((item): item is ChatMessage => {
+          return (
+            item &&
+            typeof item.id === "string" &&
+            (item.role === "user" || item.role === "assistant") &&
+            typeof item.body === "string"
+          );
+        }) as ChatMessage[];
+        baseMessages = restoredMessages;
+        rememberConversationMessages(conversation.id, restoredMessages);
+        setActiveConversationId(conversation.id);
+        activeConversationIdRef.current = conversation.id;
+      } catch {
+        conversationId = null;
+        activeConversationIdRef.current = null;
+        setActiveConversationId(null);
+        persistActiveConversationId(null);
+        baseMessages = [];
+      }
+    }
+
+    if (conversationId) {
+      const conv = conversations.find((c) => c.id === conversationId);
+      if (conv?.title === "New conversation" || conv?.title.startsWith("新对话")) {
+        const newTitle = trimmedPrompt.slice(0, 20);
+        conversationClient.update(conversationId, { title: newTitle }).catch((err) => {
+          console.warn("[chat] conversation rename failed:", err?.message || err);
+        });
+        setConversations((prev) => prev.map((c) => c.id === conversationId ? { ...c, title: newTitle } : c));
+      }
+    }
+
+    const attachments = buildChatAttachments(referenceItems);
+    const messageCreatedAt = formatWorkbenchTimestamp();
+    const userMessage: ChatMessage = {
+      id: createId("user"),
+      role: "user",
+      author: "你",
+      mode: activeMode,
+      body: trimmedPrompt,
+      prompt: trimmedPrompt,
+      createdAt: messageCreatedAt,
+      conversationId: conversationId || undefined,
+      attachments,
+    };
+    const assistantMessageId = createId("assistant");
+    const assistantMessage: ChatMessage = {
+      id: assistantMessageId,
+      role: "assistant",
+      author: MODE_META[activeMode].label,
+      mode: activeMode,
+      prompt: trimmedPrompt,
+      body: activeMode === "chat" ? "我先看一下上下文，马上接上。" : "正在读取当前模式、模型、规格和参考素材，准备创建生成任务。",
+      createdAt: messageCreatedAt,
+      status: "thinking",
+      conversationId: conversationId || undefined,
+      taskProgress: 28,
+      taskStatusLabel: activeMode === "chat" ? "正在整理思路" : "Creating generation task",
+    };
+
+    setInputValue("");
+    setPromptHistory((current) => [trimmedPrompt, ...current.filter((item) => item !== trimmedPrompt)].slice(0, 20));
+    setWorkspaceStarted(true);
+    setComposerHidden(false);
+    const nextMessages = [...baseMessages, userMessage, assistantMessage];
+    messagesRef.current = nextMessages;
+    setMessages(nextMessages);
+    if (conversationId) {
+      rememberConversationMessages(conversationId, nextMessages);
+    }
+    setIsGenerating(true);
+    setGenerationStatus("正在创建生成任务");
+    setGenerationProgress(28);
+    const abortController = new AbortController();
+    generationAbortRef.current = abortController;
+    let keepaliveStarted = false;
+    let claimedGenerationSlotId: string | undefined;
+    let releaseClaimedGenerationSlot: (() => void) | null = null;
+
+    try {
+      if (activeMode === "image" || activeMode === "video") {
+        let taskId: string;
+        const isVideoFilteredModel =
+          activeMode === "video" && (isHappyHorseModel(taskInput.params?.model) || isViduModel(taskInput.params?.model) || isPixverseModel(taskInput.params?.model));
+        const requestReferenceItems = isVideoFilteredModel
+          ? referenceItems.filter((item) => item.kind === "image")
+          : referenceItems;
+        if (isVideoFilteredModel) {
+          const droppedVideoCount = referenceItems.length - requestReferenceItems.length;
+          if (droppedVideoCount > 0 && conversationId) {
+            await patchConversationMessage(conversationId, userMessage.id, {
+              body: `${userMessage.body}\n\n⚠ ${droppedVideoCount} 个视频参考素材已被忽略（当前模型仅支持图片参考）。`,
+            });
+          }
+        }
+        const refUrls = await resolveReferenceUrls(requestReferenceItems);
+        const latestReferenceItems = [...referenceItemsRef.current];
+        setReferenceItems(latestReferenceItems);
+        const uploadedAttachments = buildChatAttachments(latestReferenceItems);
+        if (uploadedAttachments.length) {
+          const refreshedMessages = messagesRef.current.map((message) =>
+            message.id === userMessage.id ? { ...message, attachments: uploadedAttachments } : message,
+          );
+          messagesRef.current = refreshedMessages;
+          setMessages(refreshedMessages);
+          if (conversationId) rememberConversationMessages(conversationId, refreshedMessages);
+        }
+
+        claimedGenerationSlotId = createId("workbench-generation");
+        releaseClaimedGenerationSlot = claimGenerationSlot({
+          userKey: getGenerationUserKey(session?.user.id),
+          kind: activeMode,
+          id: claimedGenerationSlotId,
+        });
+
+        if (activeMode === "image") {
+          const result = await aiGenerationClient.createImageTask({
+            conversationId: conversationId || undefined,
+            model: taskInput.params?.model || fallbackImageModelValue,
+            prompt: trimmedPrompt,
+            ratio: taskInput.params?.ratio || imageRatio || "16:9",
+            quality: taskInput.params?.quality || "1K",
+            gridMode: taskInput.params?.gridMode || "single",
+            referenceUrls: refUrls.length ? refUrls : undefined,
+          });
+          taskId = result.taskId;
+        } else {
+          let requestModel = resolveVideoRequestModel({
+            model: taskInput.params?.model || ENTERPRISE_DEFAULT_VIDEO_MODEL,
+            referenceUrls: refUrls,
+          });
+          const result = await aiGenerationClient.createVideoTask({
+            conversationId: conversationId || undefined,
+            model: requestModel,
+            prompt: trimmedPrompt,
+            ratio: taskInput.params?.ratio || "16:9",
+            duration: taskInput.params?.duration || 5,
+            quality: taskInput.params?.quality || taskInput.params?.resolution || "1080P",
+            resolution: taskInput.params?.resolution || taskInput.params?.quality || "1080P",
+            frameMode: taskInput.params?.frameMode || "start-end",
+            referenceUrls: refUrls.length ? refUrls : undefined,
+            muted: taskInput.params?.muted ?? false,
+            hasReferenceVideo: requestReferenceItems.some((item) => item.kind === "video"),
+          });
+          taskId = result.taskId;
+        }
+
+        onRefreshUsage?.();
+
+        if (!conversationId) {
+          const taskSpecs = buildAssistantResult(activeMode, activeModel, getCurrentSpecs(), referenceItems.length);
+          const submissionSourceMessages = messagesRef.current.length ? messagesRef.current : nextMessages;
+          const submittedMessages = submissionSourceMessages.map((message) => {
+            const base = { ...message, conversationId: 0 };
+            if (message.id !== assistantMessageId) return base;
+            return {
+              ...base,
+              body: "Task submitted, generating...",
+              status: "thinking" as const,
+              taskId,
+              taskProgress: 30,
+              taskStatusLabel: "Task submitted, generating...",
+              resultType: activeMode,
+              result: taskSpecs,
+            };
+          });
+          const conv = await conversationClient.create(
+            trimmedPrompt.slice(0, 20) || "新对话",
+            activeMode,
+            submittedMessages.map((message) => ({ ...message, conversationId: undefined })),
+          );
+          conversationId = conv.id;
+          skipConversationAutoSelectRef.current = false;
+          setActiveConversationId(conv.id);
+          activeConversationIdRef.current = conv.id;
+          setConversations((prev) => [conv, ...prev.filter((item) => item.id !== conv.id)]);
+
+          const boundMessages = submittedMessages.map((message) => ({ ...message, conversationId: conv.id }));
+          messagesRef.current = boundMessages;
+          setMessages(boundMessages);
+          rememberConversationMessages(conv.id, boundMessages);
+          await aiGenerationClient.bindTaskToConversation(taskId, conv.id).catch((error) => {
+            setProjectError(getErrorText(error));
+          });
+        }
+
+        if (!conversationId) return;
+        const keepaliveTask: WorkbenchKeepaliveTask = {
+          taskId,
+          conversationId,
+          assistantMessageId,
+          concurrencySlotId: claimedGenerationSlotId,
+          mode: activeMode,
+          modelLabel: activeModel,
+          specs: getCurrentSpecs(),
+          referenceCount: referenceItems.length,
+          progress: 30,
+          statusLabel: "Task submitted, generating...",
+          startedAt: Date.now(),
+        };
+        const taskSpecs = buildAssistantResult(activeMode, activeModel, getCurrentSpecs(), referenceItems.length);
+        keepaliveStarted = true;
+        upsertKeepaliveTask(keepaliveTask);
+        releaseClaimedGenerationSlot = null;
+        await patchConversationMessage(conversationId, assistantMessageId, {
+          body: "Task submitted, generating...",
+          status: "thinking",
+          taskId,
+          conversationId,
+          taskProgress: 30,
+          taskStatusLabel: "Task submitted, generating...",
+          resultType: activeMode,
+          result: taskSpecs,
+        });
+        runKeepalivePoll(keepaliveTask);
+      } else {
+        let streamedText = "";
+        setGenerationProgress(36);
+        setGenerationStatus("正在回复");
+        updateAssistantMessage(assistantMessageId, {
+          body: "我在整理，马上说清楚。",
+          status: "thinking",
+          taskStatusLabel: "正在整理思路",
+        });
+
+        const historyMessages = buildNaturalChatHistoryMessages(baseMessages);
+
+        await aiGenerationClient.streamChat(
+          {
+            model: activeModelValue,
+            messages: [
+              { role: "system", content: CHAT_NATURAL_SYSTEM_PROMPT },
+              ...historyMessages,
+              { role: "system", content: CHAT_TURN_STYLE_REMINDER },
+              { role: "user", content: trimmedPrompt },
+            ],
+            temperature: 0.82,
+          },
+          (chunk) => {
+            if (abortController.signal.aborted) return;
+            streamedText += chunk;
+            setGenerationProgress((current) => Math.min(95, current + 1));
+            updateAssistantMessage(assistantMessageId, {
+              body: streamedText || "我在整理，马上说清楚。",
+              status: "thinking",
+              taskStatusLabel: "正在回复",
+            });
+          },
+          abortController.signal,
+        );
+
+        if (abortController.signal.aborted) return;
+        setGenerationProgress(100);
+        setGenerationStatus("回复完成");
+        const completedMessages = updateAssistantMessage(assistantMessageId, {
+          body: streamedText.trim() || "收到。你可以继续补充目标，我会顺着当前上下文往下拆。",
+          status: "completed",
+        });
+        if (!conversationId) {
+          const conv = await conversationClient.create(
+            trimmedPrompt.slice(0, 20) || "新对话",
+            activeMode,
+            completedMessages.map((message) => ({ ...message, conversationId: undefined })),
+          );
+          conversationId = conv.id;
+          skipConversationAutoSelectRef.current = false;
+          setActiveConversationId(conv.id);
+          activeConversationIdRef.current = conv.id;
+          setConversations((prev) => [conv, ...prev.filter((item) => item.id !== conv.id)]);
+          const boundMessages = completedMessages.map((message) => ({ ...message, conversationId: conv.id }));
+          messagesRef.current = boundMessages;
+          setMessages(boundMessages);
+          rememberConversationMessages(conv.id, boundMessages);
+          await conversationClient.update(conv.id, { messages: getPersistableMessages(boundMessages) as never[] });
+          void loadConversations();
+        } else {
+          persistConversationAfterResult(conversationId, messagesRef.current);
+        }
+      }
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        setGenerationStatus("已停止");
+        updateAssistantMessage(assistantMessageId, {
+          body: "已停止当前生成。",
+          status: "failed",
+        });
+        return;
+      }
+      setGenerationStatus("创建失败");
+        if (isInsufficientBalance(error)) setShowRechargeModal(true);
+        updateAssistantMessage(assistantMessageId, {
+          body: isAuthFailure(error) ? "登录状态已失效，请重新登录后再继续。" : error instanceof Error ? error.message : "任务创建失败，请稍后重试。",
+          status: "failed",
+        });
+    } finally {
+      if (generationAbortRef.current === abortController) {
+        generationAbortRef.current = null;
+      }
+      releaseClaimedGenerationSlot?.();
+      if (keepaliveStarted) syncActiveGenerationUi(conversationId);
+      else setIsGenerating(false);
+    }
+  };
+
+  const handleStopAction = () => {
+    const conversationId = activeConversationIdRef.current;
+    const tasksToStop = Object.values(keepaliveTasksRef.current).filter(
+      (task) => task.conversationId === conversationId,
+    );
+    tasksToStop.forEach((task) => {
+      taskAbortControllersRef.current.get(task.taskId)?.abort();
+      taskAbortControllersRef.current.delete(task.taskId);
+      removeKeepaliveTask(task.taskId);
+      aiGenerationClient.cancelTask(task.taskId).catch(() => {});
+      void patchConversationMessage(task.conversationId, task.assistantMessageId, {
+        body: "Stopped on this page.",
+        status: "failed",
+        taskStatusLabel: "Stopped",
+      });
+    });
+    if (tasksToStop.length === 0) {
+      generationAbortRef.current?.abort();
+    }
+    setIsGenerating(false);
+    setGenerationStatus("Stopped");
+    setGenerationProgress(0);
+    setMessages((current) =>
+      current.map((message) =>
+        message.status === "thinking" && (!conversationId || message.conversationId === conversationId)
+          ? {
+              ...message,
+              body: "Stopped on this page.",
+              status: "failed",
+              taskStatusLabel: "Stopped",
+            }
+          : message,
+      ),
+    );
+  };
+
+  const handleStopSingleTask = (messageId: string) => {
+    const task = Object.values(keepaliveTasksRef.current).find(
+      (t) => t.assistantMessageId === messageId,
+    );
+    if (task) {
+      taskAbortControllersRef.current.get(task.taskId)?.abort();
+      taskAbortControllersRef.current.delete(task.taskId);
+      removeKeepaliveTask(task.taskId);
+      aiGenerationClient.cancelTask(task.taskId).catch(() => {});
+      void patchConversationMessage(task.conversationId, task.assistantMessageId, {
+        body: "已终止",
+        status: "failed",
+        taskStatusLabel: "已终止",
+      });
+    } else {
+      generationAbortRef.current?.abort();
+    }
+    setMessages((current) =>
+      current.map((msg) =>
+        msg.id === messageId
+          ? { ...msg, body: "已终止", status: "failed" as const, taskStatusLabel: "已终止" }
+          : msg,
+      ),
+    );
+    const remainingTasks = Object.values(keepaliveTasksRef.current).filter(
+      (t) => t.assistantMessageId !== messageId,
+    );
+    if (remainingTasks.length === 0) {
+      setIsGenerating(false);
+      setGenerationStatus("准备就绪");
+      setGenerationProgress(0);
+    }
+  };
+
+  const handleRegenerate = (message: ChatMessage) => {
+    const userMsg = messages.find(
+      (m, i) => m.role === "user" && messages[i + 1]?.id === message.id,
+    );
+    if (userMsg) {
+      setInputValue(userMsg.body);
+      void handleSendAction(userMsg.body);
+    }
+  };
+
+  const handleSuperResolveVideo = async (message: ChatMessage) => {
+    if (!message.resultUrl || message.resultType !== "video") {
+      setProjectError("仅支持对视频结果进行超分");
+      return;
+    }
+    if (getActiveGenerationTaskCount(getGenerationUserKey(session?.user.id)) >= 3) {
+      setProjectError("当前任务数已达上限（3个），请等待任务完成后再试");
+      return;
+    }
+    if (!isAuthenticated) {
+      setProjectError("请先登录后再进行视频超分");
+      return;
+    }
+
+    const conversationId = activeConversationIdRef.current || message.conversationId || activeConversationId;
+    if (!conversationId) {
+      setProjectError("请先在当前对话中保存记录后再进行视频超分");
+      return;
+    }
+
+    const assistantMessageId = message.id;
+    const previousResultUrl = message.resultUrl;
+    const previousStatus = message.status || "completed";
+    const previousTaskProgress = message.taskProgress;
+    const previousTaskId = message.taskId;
+    const previousResultOriginalUrl = message.resultOriginalUrl;
+    const previousResultOssKey = message.resultOssKey;
+    const previousResultMimeType = message.resultMimeType;
+    const isAdmin = getCachedRole() === "admin";
+    setIsGenerating(true);
+    setGenerationStatus("正在提交超分任务");
+    setGenerationProgress(12);
+
+    if (isAdmin) console.log("[超分] 开始处理", { resultUrl: previousResultUrl, resultType: message.resultType, ossKey: message.resultOssKey, taskId: previousTaskId });
+
+    let sourceResult: PersistedWorkbenchResultAsset;
+    try {
+      sourceResult = await persistWorkbenchResultAsset({
+        title: message.result?.title || "生成视频",
+        sourceUrl: previousResultUrl,
+        resultType: "video",
+        taskId: previousResultOssKey ? undefined : previousTaskId,
+        originalUrl: previousResultOriginalUrl,
+        existingOssKey: message.resultOssKey,
+        mimeType: previousResultMimeType,
+      });
+      if (isAdmin) console.log("[超分] 资源转存成功", sourceResult);
+    } catch (error) {
+      if (isAdmin) console.error("[超分] 资源转存失败", error);
+      setProjectError(error instanceof Error ? error.message : "视频资源转存失败，请重新生成后再试");
+      setIsGenerating(false);
+      setGenerationProgress(0);
+      setGenerationStatus("超分失败");
+      return;
+    }
+
+    await patchConversationMessage(conversationId, assistantMessageId, {
+      body: "视频超分任务已提交，正在增强画质...",
+      status: "thinking",
+      conversationId,
+      taskProgress: 12,
+      taskStatusLabel: "正在提交超分任务",
+      resultType: "video",
+      resultUrl: sourceResult.url,
+      resultOriginalUrl: sourceResult.originalUrl,
+      resultOssKey: sourceResult.ossKey,
+      resultMimeType: sourceResult.mimeType,
+    });
+
+    try {
+      const superResolveVideoUrl = sourceResult.url;
+      const result = await aiGenerationClient.createVideoSuperResolveTask({
+        conversationId,
+        videoUrl: superResolveVideoUrl,
+      });
+      if (isAdmin) console.log("[超分] API 提交成功", { taskId: result.taskId, videoUrl: superResolveVideoUrl });
+      const keepaliveTask: WorkbenchKeepaliveTask = {
+        taskId: result.taskId,
+        conversationId,
+        assistantMessageId,
+        operation: "video-super-resolution",
+        mode: "video",
+        modelLabel: "视频超分",
+        specs: ["2x", "MP4"],
+        referenceCount: 0,
+        progress: 18,
+        statusLabel: "超分处理中...",
+        startedAt: Date.now(),
+      };
+      upsertKeepaliveTask(keepaliveTask);
+      await patchConversationMessage(conversationId, assistantMessageId, {
+        taskId: result.taskId,
+        status: "thinking",
+        taskProgress: 18,
+        taskStatusLabel: "超分处理中...",
+        resultUrl: sourceResult.url,
+        resultOriginalUrl: sourceResult.originalUrl,
+        resultOssKey: sourceResult.ossKey,
+        resultMimeType: sourceResult.mimeType,
+      });
+      runKeepalivePoll(keepaliveTask);
+    } catch (error) {
+      if (isAdmin) console.error("[超分] API 提交失败", error, { videoUrl: sourceResult.url, conversationId });
+      if (isInsufficientBalance(error)) setShowRechargeModal(true);
+      await patchConversationMessage(conversationId, assistantMessageId, {
+        body: error instanceof Error ? error.message : "视频超分任务提交失败",
+        status: previousStatus,
+        taskId: previousTaskId,
+        taskProgress: previousTaskProgress,
+        taskStatusLabel: "超分失败",
+        resultUrl: sourceResult.url,
+        resultType: "video",
+        resultOriginalUrl: sourceResult.originalUrl,
+        resultOssKey: sourceResult.ossKey,
+        resultMimeType: sourceResult.mimeType,
+      });
+      setIsGenerating(false);
+      setGenerationProgress(0);
+      setGenerationStatus("超分失败");
+    }
+  };
+
+  const handleSuperResolveImage = async (message: ChatMessage) => {
+    if (!message.resultUrl || message.resultType === "video") {
+      setProjectError("仅支持对图片结果进行超分");
+      return;
+    }
+    if (getActiveGenerationTaskCount(getGenerationUserKey(session?.user.id)) >= 3) {
+      setProjectError("当前任务数已达上限（3个），请等待任务完成后再试");
+      return;
+    }
+    if (!isAuthenticated) {
+      setProjectError("请先登录后再进行图片超分");
+      return;
+    }
+
+    const conversationId = activeConversationIdRef.current || message.conversationId || activeConversationId;
+    if (!conversationId) {
+      setProjectError("请先在当前对话中保存记录后再进行图片超分");
+      return;
+    }
+
+    const assistantMessageId = message.id;
+    const previousResultUrl = message.resultUrl;
+    const previousStatus = message.status || "completed";
+    const previousTaskProgress = message.taskProgress;
+    const previousTaskId = message.taskId;
+    const isAdmin = getCachedRole() === "admin";
+
+    setIsGenerating(true);
+    setGenerationStatus("正在提交图片超分任务");
+    setGenerationProgress(12);
+
+    const imageUrl = message.resultOriginalUrl || message.resultUrl;
+    if (isAdmin) console.log("[图片超分] 开始处理", { imageUrl });
+
+    await patchConversationMessage(conversationId, assistantMessageId, {
+      body: "图片超分任务已提交，正在增强画质...",
+      status: "thinking",
+      conversationId,
+      taskProgress: 12,
+      taskStatusLabel: "正在提交超分任务",
+      resultType: "image",
+      resultUrl: previousResultUrl,
+    });
+
+    try {
+      const result = await aiGenerationClient.createImageSuperResolveTask({
+        conversationId,
+        imageUrl,
+        scale: 2,
+      });
+      if (isAdmin) console.log("[图片超分] API 提交成功", { taskId: result.taskId });
+
+      const keepaliveTask: WorkbenchKeepaliveTask = {
+        taskId: result.taskId,
+        conversationId,
+        assistantMessageId,
+        operation: "video-super-resolution",
+        mode: "image",
+        modelLabel: "图片超分",
+        specs: ["2x"],
+        referenceCount: 0,
+        progress: 18,
+        statusLabel: "超分处理中...",
+        startedAt: Date.now(),
+      };
+      upsertKeepaliveTask(keepaliveTask);
+      await patchConversationMessage(conversationId, assistantMessageId, {
+        taskId: result.taskId,
+        status: "thinking",
+        taskProgress: 18,
+        taskStatusLabel: "超分处理中...",
+        resultUrl: previousResultUrl,
+        resultType: "image",
+      });
+      runKeepalivePoll(keepaliveTask);
+    } catch (error) {
+      if (isAdmin) console.error("[图片超分] API 提交失败", error);
+      if (isInsufficientBalance(error)) setShowRechargeModal(true);
+      setProjectError(error instanceof Error ? error.message : "图片超分提交失败");
+      await patchConversationMessage(conversationId, assistantMessageId, {
+        body: "图片超分失败",
+        status: previousStatus,
+        taskId: previousTaskId,
+        taskProgress: previousTaskProgress,
+        taskStatusLabel: "超分失败",
+        resultUrl: previousResultUrl,
+        resultType: "image",
+      });
+      setIsGenerating(false);
+      setGenerationProgress(0);
+      setGenerationStatus("超分失败");
+    }
+  };
+
+  const handlePromptKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (promptMentionOpen && promptMentionOptions.length > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setMentionActiveIndex((current) => (current + 1) % promptMentionOptions.length);
+        return;
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setMentionActiveIndex((current) => (current - 1 + promptMentionOptions.length) % promptMentionOptions.length);
+        return;
+      }
+
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        insertPromptMention(promptMentionOptions[mentionActiveIndex]?.token || promptMentionOptions[0].token);
+        return;
+      }
+    }
+
+    const { selectionStart, selectionEnd } = event.currentTarget;
+    const selectionMin = Math.min(selectionStart, selectionEnd);
+    const selectionMax = Math.max(selectionStart, selectionEnd);
+    const selectedMentionRanges = promptMentionTokenRanges.filter(
+      (range) => selectionMin < range.end && selectionMax > range.start,
+    );
+
+    const getDeletionRange = () => {
+      if (selectionStart !== selectionEnd) {
+        if (selectedMentionRanges.length === 0) return null;
+        return {
+          start: selectedMentionRanges.reduce((min, range) => Math.min(min, range.start), selectionMin),
+          end: selectedMentionRanges.reduce((max, range) => Math.max(max, range.end), selectionMax),
+        };
+      }
+
+      if (event.key === "Backspace") {
+        return (
+          promptMentionTokenRanges.find(
+            (range) => selectionStart === range.end || (selectionStart > range.start && selectionStart < range.end),
+          ) || null
+        );
+      }
+
+      if (event.key === "Delete") {
+        return (
+          promptMentionTokenRanges.find(
+            (range) => selectionStart === range.start || (selectionStart > range.start && selectionStart < range.end),
+          ) || null
+        );
+      }
+
+      return null;
+    };
+
+    const deletionRange = event.key === "Backspace" || event.key === "Delete" ? getDeletionRange() : null;
+    if (deletionRange) {
+      event.preventDefault();
+      let start = deletionRange.start;
+      let end = deletionRange.end;
+      if (start > 0 && inputValue[start - 1] === " ") {
+        start -= 1;
+      } else if (end < inputValue.length && inputValue[end] === " ") {
+        end += 1;
+      }
+
+      const nextValue = removePromptTextRange(inputValue, start, end);
+      const nextCursor = Math.min(start, nextValue.length);
+      setInputValue(nextValue);
+      setCursorIndex(nextCursor);
+      setPromptSelectionRange({ start: nextCursor, end: nextCursor });
+      window.requestAnimationFrame(() => {
+        textareaRef.current?.setSelectionRange(nextCursor, nextCursor);
+      });
+      return;
+    }
+
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      void handleSendAction();
+    }
+  };
+
+  const sendDisabled = !inputValue.trim() || (activeMode !== "chat" && getActiveGenerationTaskCount(getGenerationUserKey(session?.user.id)) >= 3);
+
+  const suggestedPrompts = [
+    { text: "画一个赛博朋克风格的城市夜景", mode: "image" as WorkbenchMode },
+    { text: "生成一段雨中漫步的电影镜头", mode: "video" as WorkbenchMode },
+    { text: "帮我设计一个科幻短片的分镜脚本", mode: "chat" as WorkbenchMode },
+    { text: "画一组动漫角色定妆照", mode: "image" as WorkbenchMode },
+  ];
+
+  const handleSuggestedPrompt = (prompt: string, mode: WorkbenchMode) => {
+    setActiveMode(mode);
+    setInputValue(prompt);
+    window.requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const handleUsePromptCase = (item: PromptCaseViewModel) => {
+    setActiveMode("image");
+    setInputValue(item.prompt);
+    setSelectedPromptCase(null);
+    window.requestAnimationFrame(() => textareaRef.current?.focus());
+  };
+
+  const handleCopyPromptCase = async (item: PromptCaseViewModel) => {
+    await navigator.clipboard?.writeText(item.prompt);
+  };
+
+  const renderConversationSidebar = () => (
+    <ProjectSidebar
+      projects={conversationRecords}
+      activeId={activeConversationId ? String(activeConversationId) : null}
+      collapsed={sidebarCollapsed}
+      filterMode={activeMode}
+      loading={false}
+      error={projectError}
+      onToggle={() => setSidebarCollapsed((v) => (hasSidebarRecords ? !v : true))}
+      onSelect={handleSelectProject}
+      onRefresh={handleRefreshProject}
+      onRename={handleRenameProject}
+      onDelete={requestDeleteProject}
+    />
+  );
+
+  const renderDeleteDialog = () =>
+    deleteDialog ? (
+      <div className="workbench-delete-modal" role="dialog" aria-modal="true" aria-labelledby="workbench-delete-title">
+        <button
+          type="button"
+          className="workbench-delete-modal__backdrop"
+          aria-label="Cancel delete"
+          onClick={() => {
+            if (!deleteSubmitting) setDeleteDialog(null);
+          }}
+        />
+        <div className="workbench-delete-modal__panel">
+          <div className="workbench-delete-modal__icon">
+            <DeleteOutlined />
+          </div>
+          <div className="workbench-delete-modal__copy">
+            <span>删除对话记录</span>
+            <h2 id="workbench-delete-title">{deleteDialog.title}</h2>
+            <p>删除后这条首页任务记录会从当前账号移除，已生成的线上资源不会被这个操作清空。</p>
+          </div>
+          <div className="workbench-delete-modal__actions">
+            <button type="button" onClick={() => setDeleteDialog(null)} disabled={deleteSubmitting}>
+              取消
+            </button>
+            <button type="button" className="is-danger" onClick={() => void confirmDeleteProject()} disabled={deleteSubmitting}>
+              {deleteSubmitting ? "删除中..." : "确认删除"}
+            </button>
+          </div>
+        </div>
+      </div>
+    ) : null;
+
+  const renderMentionPanel = () => {
+    if (!promptMentionOpen) return null;
+    const refCount = referenceItems.length;
+    const assetCount = promptMentionOptions.length - refCount;
+    const hasBoth = refCount > 0 && assetCount > 0;
+    return (
+      <div
+        className={`ai-chat-mention-panel ai-chat-mention-panel--${mentionPanelPlacement}`}
+        role="listbox"
+        aria-label="选择参考内容"
+      >
+        <div className="ai-chat-mention-header">引用参考内容</div>
+        {promptMentionOptions.length > 0 ? (
+          <div className="ai-chat-mention-list">
+            {promptMentionOptions.flatMap((item, index) => {
+              const nodes: React.ReactNode[] = [];
+              if (hasBoth && index === 0) nodes.push(<div key="section-upload" className="ai-chat-mention-section">本次上传</div>);
+              if (hasBoth && index === refCount) nodes.push(<div key="section-assets" className="ai-chat-mention-section">资产库</div>);
+              nodes.push(
+                <button
+                  key={item.id}
+                  type="button"
+                  role="option"
+                  aria-selected={index === mentionActiveIndex}
+                  className={`ai-chat-mention-item${index === mentionActiveIndex ? " is-active" : ""}`}
+                  onMouseEnter={() => setMentionActiveIndex(index)}
+                  onClick={() => insertPromptMention(item.token)}
+                >
+                  <span className="ai-chat-mention-thumb">
+                    <ReferencePreview item={item} />
+                  </span>
+                  <span className="ai-chat-mention-label">{item.name}</span>
+                  <span className="ai-chat-mention-token">{item.token}</span>
+                </button>,
+              );
+              return nodes;
+            })}
+          </div>
+        ) : (
+          <div className="ai-chat-mention-empty">上传参考内容或保存结果到资产库后，用 @ 引用。</div>
+        )}
+      </div>
+    );
+  };
+
+  const renderComposerReferences = (disabled = false) => (
+    <div
+      ref={referenceRefsRef}
+      className={`wb-composer__refs${referenceItems.length > 0 ? " has-items" : ""}${referencePreviewOpen ? " is-open" : ""}`}
+    >
+      <button
+        type="button"
+        className="wb-composer__ref-upload"
+        onClick={handleReferenceUploadClick}
+        disabled={disabled}
+        aria-label={`上传${referenceUploadLabel}`}
+        aria-expanded={referenceItems.length > 0 ? referencePreviewOpen : undefined}
+        aria-controls={referenceItems.length > 0 ? "workbench-reference-stack" : undefined}
+      >
+        <PlusOutlined />
+        <span className="wb-composer__ref-label">{referenceButtonLabel}</span>
+        {referenceItems.length > 0 ? <span className="wb-composer__ref-count">{referenceItems.length}/{referenceLimit}</span> : null}
+      </button>
+      {referenceItems.length > 0 && referencePreviewOpen ? (
+        <div id="workbench-reference-stack" className="wb-composer__ref-stack" aria-label="已上传参考内容">
+          {referenceItems.map((item) => (
+            <div
+              key={item.id}
+              className="wb-composer__ref-card"
+              title={`${item.token} ${item.name}`}
+            >
+              <button
+                type="button"
+                className="wb-composer__ref-preview"
+                disabled={disabled}
+                aria-label={`${item.token} ${item.name}`}
+                onClick={() => insertPromptMention(item.token)}
+              >
+                <ReferencePreview item={item} label={getReferenceKindLabel(item.kind)} />
+              </button>
+              <button
+                type="button"
+                className="wb-composer__ref-remove"
+                aria-label={`移除${item.name}`}
+                disabled={disabled}
+                onClick={() => removeReferenceItem(item.id)}
+              >
+                <CloseOutlined />
+              </button>
+            </div>
+          ))}
+          {!disabled && referenceItems.length < referenceLimit ? (
+            <button
+              type="button"
+              className="wb-composer__ref-add-more"
+              onClick={handleReferenceAddMore}
+              aria-label={`继续上传${referenceUploadLabel}`}
+            >
+              <PlusOutlined />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+
+  const renderComposerToolbar = (disabled = false, showStop = false) => (
+    <div className="wb-composer__toolbar">
+      <div className="wb-composer__toolbar-left">
+        <SelectChip
+          chipId="studio-mode"
+          value={activeMode}
+          options={MODE_OPTIONS}
+          disabled={disabled}
+          isOpen={toolbarMenuId === "studio-mode"}
+          onToggle={() => toggleToolbarMenu("studio-mode")}
+          onClose={closeToolbarMenus}
+          onChange={(value) => handleModeChange(value as WorkbenchMode)}
+          ariaLabel="工作台模式"
+          direction={dropdownDirection}
+        />
+        {activeMode === "image" && (
+          <>
+            <SelectChip
+              chipId="image-model"
+              value={imageModel}
+              options={imageModelOptions}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "image-model"}
+              onToggle={() => toggleToolbarMenu("image-model")}
+              onClose={closeToolbarMenus}
+              onChange={setImageModel}
+              direction={dropdownDirection}
+            />
+            <CompoundSelectChip
+              chipId="image-settings"
+              summary={imageSettingsSummary}
+              groups={imageSettingGroups}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "image-settings"}
+              onToggle={() => toggleToolbarMenu("image-settings")}
+              direction={dropdownDirection}
+            />
+            <SelectChip
+              chipId="image-grid-mode"
+              value={imageGridMode}
+              options={GRID_MODE_OPTIONS}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "image-grid-mode"}
+              onToggle={() => toggleToolbarMenu("image-grid-mode")}
+              onClose={closeToolbarMenus}
+              onChange={setImageGridMode}
+              direction={dropdownDirection}
+            />
+          </>
+        )}
+        {activeMode === "video" && (
+          <>
+            <SelectChip
+              chipId="video-model"
+              value={videoModel}
+              options={videoModelOptions}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "video-model"}
+              onToggle={() => toggleToolbarMenu("video-model")}
+              onClose={closeToolbarMenus}
+              onChange={setVideoModel}
+              direction={dropdownDirection}
+            />
+            <SelectChip
+              chipId="video-mode"
+              value={videoFrameMode}
+              options={VIDEO_FRAME_OPTIONS}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "video-mode"}
+              onToggle={() => toggleToolbarMenu("video-mode")}
+              onClose={closeToolbarMenus}
+              onChange={setVideoFrameMode}
+              direction={dropdownDirection}
+            />
+            <CompoundSelectChip
+              chipId="video-ratio"
+              summary={videoRatio}
+              groups={videoRatioGroups}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "video-ratio"}
+              onToggle={() => toggleToolbarMenu("video-ratio")}
+              direction={dropdownDirection}
+            />
+            <InlineOptionChip
+              chipId="video-duration"
+              value={videoDuration}
+              options={VIDEO_DURATION_OPTIONS}
+              icon={<ClockCircleOutlined />}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "video-duration"}
+              onToggle={() => toggleToolbarMenu("video-duration")}
+              onClose={closeToolbarMenus}
+              onChange={setVideoDuration}
+              direction={dropdownDirection}
+            />
+            <InlineOptionChip
+              chipId="video-quality"
+              value={videoQuality}
+              options={videoQualityOptions}
+              icon={<SettingOutlined />}
+              disabled={disabled}
+              isOpen={toolbarMenuId === "video-quality"}
+              onToggle={() => toggleToolbarMenu("video-quality")}
+              onClose={closeToolbarMenus}
+              onChange={setVideoQuality}
+              direction={dropdownDirection}
+            />
+          </>
+        )}
+      </div>
+      <div className="wb-composer__toolbar-right">
+          <button
+            type="button"
+            className={`wb-composer__send-primary${isGenerating ? " is-loading" : ""}`}
+            disabled={sendDisabled || isGenerating}
+            onClick={() => {
+              if (getCachedRole() === "admin") console.log("[ai/workbench-send-click]", {
+                mode: activeMode,
+                model: activeModelValue,
+                inputLength: inputValue.trim().length,
+                isAuthenticated,
+                sendDisabled,
+                isGenerating,
+              });
+              void handleSendAction();
+            }}
+            data-smoke-id="ai-chat-send"
+          >
+            {isGenerating ? <LoadingOutlined /> : <SendOutlined />}
+          </button>
+      </div>
+    </div>
+  );
+
+  // ─── LAUNCH STATE (homepage) ───
+  const renderMessagePreviewOverlay = () =>
+    messagePreviewAttachment?.previewUrl ? (
+      <div className="ai-chat-media-preview" role="dialog" aria-modal="true" onClick={() => setMessagePreviewAttachment(null)}>
+        <div
+          className={`ai-chat-media-preview__panel${messagePreviewAttachment.kind === "video" ? " is-video" : ""}`}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div className="ai-chat-media-preview__head">
+            <span>{messagePreviewAttachment.name}</span>
+            <button type="button" onClick={() => setMessagePreviewAttachment(null)} aria-label="Close preview">
+              <CloseOutlined />
+            </button>
+          </div>
+          <div className="ai-chat-media-preview__body">
+            {messagePreviewAttachment.kind === "video" ? (
+              <ImmersiveVideoPlayer
+                src={messagePreviewAttachment.previewUrl}
+                title={messagePreviewAttachment.name}
+              />
+            ) : (
+              <img src={messagePreviewAttachment.previewUrl} alt={messagePreviewAttachment.name} />
+            )}
+          </div>
+        </div>
+      </div>
+    ) : null;
+
+  const renderPromptCaseOverlay = () =>
+    selectedPromptCase ? (
+      <div className="wb-prompt-case-modal" role="dialog" aria-modal="true" aria-labelledby="wb-prompt-case-title">
+        <button
+          type="button"
+          className="wb-prompt-case-modal__backdrop"
+          aria-label="关闭案例详情"
+          onClick={() => setSelectedPromptCase(null)}
+        />
+        <section className="wb-prompt-case-modal__panel">
+          <div className="wb-prompt-case-modal__media">
+            <img src={selectedPromptCase.imageUrl} alt={selectedPromptCase.title} />
+          </div>
+          <aside className="wb-prompt-case-modal__sidebar">
+            <button
+              type="button"
+              className="wb-prompt-case-modal__close"
+              aria-label="关闭案例详情"
+              onClick={() => setSelectedPromptCase(null)}
+            >
+              <CloseOutlined />
+            </button>
+            <div className="wb-prompt-case-author">
+              <span>{selectedPromptCase.author.slice(0, 1).toUpperCase()}</span>
+              <div>
+                <strong>{selectedPromptCase.author}</strong>
+                <em>{selectedPromptCase.category}</em>
+              </div>
+            </div>
+            <div className="wb-prompt-case-meta">
+              <h2 id="wb-prompt-case-title">{selectedPromptCase.title}</h2>
+              <p>{selectedPromptCase.summary}</p>
+              <span>{selectedPromptCase.ratio} · 图片案例</span>
+            </div>
+            <div className="wb-prompt-case-prompt">
+              <span>图片提示词</span>
+              <p>{selectedPromptCase.prompt}</p>
+            </div>
+            <div className="wb-prompt-case-actions">
+              <button type="button" onClick={() => handleUsePromptCase(selectedPromptCase)}>
+                <PictureOutlined />
+                套用提示词
+              </button>
+              <button type="button" onClick={() => void handleCopyPromptCase(selectedPromptCase)}>
+                <CopyOutlined />
+                复制提示词
+              </button>
+            </div>
+          </aside>
+        </section>
+      </div>
+    ) : null;
+
+  if (!hasActivatedWorkspace) {
+    return (
+      <section
+        className={`ai-workbench-page is-launch mode-${activeMode} page-motion`}
+        style={themeVars}
+      >
+        <input ref={referenceInputRef} type="file" accept={getReferenceAccept(activeMode, videoFrameMode)} multiple hidden onChange={handleReferenceUpload} />
+        <div className="ai-workbench-shell">
+          <div className="ai-workbench-main">
+        <div className="wb-home">
+        <div className="wb-home__glow" />
+
+          <div className="wb-home__hero">
+            <h1 className="wb-home__title">今天想生成什么？</h1>
+          </div>
+
+          <div className="wb-home__composer" ref={toolbarRef}>
+            <div className="wb-composer__content">
+              <div className="wb-composer__input-row">
+                {renderComposerReferences(false)}
+                <div className="wb-composer__main">
+                  <textarea
+                    ref={textareaRef}
+                    className={`wb-composer__textarea${showPromptPreview ? " wb-composer__textarea--overlay-mode" : ""}`}
+                    placeholder={composerPlaceholder}
+                    value={inputValue}
+                    onChange={handlePromptChange}
+                    onSelect={handlePromptSelectionChange}
+                    onKeyUp={handlePromptSelectionChange}
+                    onClick={handlePromptSelectionChange}
+                    onMouseUp={handlePromptSelectionChange}
+                    onKeyDown={handlePromptKeyDown}
+                    onScroll={handlePromptScroll}
+                    data-smoke-id="ai-workbench-prompt"
+                  />
+                  {showPromptPreview ? (
+                    <PromptPreviewLayer text={inputValue} items={promptMentionOptions} onTokenPointerDown={focusPromptAt} />
+                  ) : null}
+                  {renderMentionPanel()}
+                </div>
+              </div>
+              {renderComposerToolbar(false, false)}
+            </div>
+          </div>
+
+          <div className="wb-home__suggestions">
+            {suggestedPrompts.map((item) => (
+              <button key={item.text} type="button" className="wb-suggestion-chip" onClick={() => handleSuggestedPrompt(item.text, item.mode)}>
+                <span className="wb-suggestion-chip__icon">{MODE_META[item.mode].icon}</span>
+                <span>{item.text}</span>
+              </button>
+            ))}
+          </div>
+
+          <section className="wb-prompt-cases" aria-label="图片提示词案例">
+            <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>
+          </section>
+
+        </div>
+          </div>
+        </div>
+        {renderConversationSidebar()}
+        {renderMessagePreviewOverlay()}
+        {renderPromptCaseOverlay()}
+        {renderDeleteDialog()}
+      </section>
+    );
+  }
+
+  // ─── ACTIVE STATE (conversation) ───
+  return (
+    <section
+      className={`ai-workbench-page is-active mode-${activeMode} page-motion`}
+      style={themeVars}
+    >
+      <input ref={referenceInputRef} type="file" accept={getReferenceAccept(activeMode, videoFrameMode)} multiple hidden onChange={handleReferenceUpload} />
+
+      <div className="ai-workbench-shell">
+        <div className="ai-workbench-main">
+          <main className="ai-workbench-content-scroll">
+            <section className="ai-workbench-thread-shell">
+                <div className="ai-chat-main-panel">
+                  <div className="ai-chat-messages-surface" ref={messagesSurfaceRef}>
+                    <div className="ai-chat-message-list">
+                      {projectError && (
+                        <div className="conversation-sidebar__empty">
+                          <span>Server data failed to load: {projectError}</span>
+                        </div>
+                      )}
+                      {!projectError && messages.length === 0 && (
+                        <div className="conversation-sidebar__empty">
+                          <span>暂无记录内容</span>
+                        </div>
+                      )}
+                      {messages.map((message) => (
+                        <article key={message.id} className={`ai-chat-message-row${message.role === "user" ? " is-user" : ""}`}>
+                          <div className={`ai-chat-avatar${message.role === "user" ? " ai-chat-avatar--user" : ""}`}>
+                            {message.role === "user" ? "我" : "AI"}
+                          </div>
+                          <div className="ai-chat-message-stack">
+                            <div className="ai-chat-message-author">
+                              <span>{message.author}</span>
+                              <span>{message.createdAt}</span>
+                            </div>
+                            <div className={`ai-chat-message-bubble${message.role === "user" ? " ai-chat-message-bubble--user" : " ai-chat-message-bubble--assistant"}${message.status === "thinking" ? " is-thinking" : ""}`}>
+                              {message.role === "user" && message.attachments && message.attachments.length > 0 && (
+                                <div className="ai-chat-attachment-row">
+                                  {message.attachments.map((item) => (
+                                    <ChatAttachmentPreview key={`${message.id}-${item.token}`} item={item} onOpen={setMessagePreviewAttachment} />
+                                  ))}
+                                </div>
+                              )}
+                              {!(message.role === "assistant" && message.resultUrl && (message.mode === "image" || message.mode === "video")) && (
+                                message.role === "user" ? (
+                                  <p className="ai-chat-message-prompt">{message.body}</p>
+                                ) : (
+                                  <MarkdownMessage text={message.body} />
+                                )
+                              )}
+                              {message.role !== "user" && message.attachments && message.attachments.length > 0 && (
+                                <div className="ai-chat-attachment-row">
+                                  {message.attachments.map((item) => (
+                                    <ChatAttachmentPreview key={`${message.id}-${item.token}`} item={item} onOpen={setMessagePreviewAttachment} />
+                                  ))}
+                                </div>
+                              )}
+                              {message.status === "failed" && message.role === "assistant" && (message.mode === "image" || message.mode === "video") && (
+                                <div className="ai-chat-failed-actions">
+                                  <button type="button" className="ai-chat-failed-actions__retry" onClick={() => handleRegenerate(message)}>
+                                    <ReloadOutlined /> 重试
+                                  </button>
+                                  <button type="button" className="ai-chat-failed-actions__switch" onClick={() => { setToolbarMenuId(message.mode === "video" ? "video-model" : "image-model"); scrollMessagesSurface("bottom"); }}>
+                                    <AppstoreOutlined /> 切换模型
+                                  </button>
+                                </div>
+                              )}
+                              {message.status === "thinking" && !message.resultUrl && (message.mode === "image" || message.mode === "video") && (
+                                <GenerationPendingCard message={message} onStop={() => handleStopSingleTask(message.id)} />
+                              )}
+                              {message.status === "thinking" && message.mode === "chat" && (
+                                <div className="ai-chat-progress">
+                                  <span>{message.taskStatusLabel || generationStatus}</span>
+                                </div>
+                              )}
+                              {(message.resultUrl || (message.result && message.status !== "thinking")) && (
+                                <ResultCard
+                                  message={message}
+                                  onRegenerate={handleRegenerate}
+                                  onOpenMedia={setMessagePreviewAttachment}
+                                  onSuperResolveVideo={handleSuperResolveVideo}
+                                  onSuperResolveImage={handleSuperResolveImage}
+                                  onOpenResultInCanvas={onOpenResultInCanvas}
+                                  downloadFilenameBase={downloadFilenameBase}
+                                />
+                              )}
+                            </div>
+                          </div>
+                        </article>
+                      ))}
+                      <div ref={messagesEndRef} />
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+            <section className={`wb-composer${composerHidden ? " is-hidden" : ""}`} ref={toolbarRef}>
+              <div className="wb-composer__content">
+                <div className="wb-composer__input-row">
+                  {renderComposerReferences(false)}
+                  <div className="wb-composer__main">
+                    <textarea
+                      ref={textareaRef}
+                      className={`wb-composer__textarea${showPromptPreview ? " wb-composer__textarea--overlay-mode" : ""}`}
+                      placeholder={composerPlaceholder}
+                      value={inputValue}
+                      disabled={false}
+                      onChange={handlePromptChange}
+                      onSelect={handlePromptSelectionChange}
+                      onKeyUp={handlePromptSelectionChange}
+                      onClick={handlePromptSelectionChange}
+                      onMouseUp={handlePromptSelectionChange}
+                      onKeyDown={handlePromptKeyDown}
+                      onScroll={handlePromptScroll}
+                    />
+                    {showPromptPreview ? (
+                      <PromptPreviewLayer text={inputValue} items={promptMentionOptions} onTokenPointerDown={focusPromptAt} />
+                    ) : null}
+                    {renderMentionPanel()}
+                  </div>
+                </div>
+                {renderComposerToolbar(false, isGenerating)}
+              </div>
+            </section>
+            <div className="wb-chat-scroll-actions" aria-label="聊天滚动">
+              <button
+                type="button"
+                className="wb-chat-scroll-actions__button"
+                title="返回聊天顶部"
+                aria-label="返回聊天顶部"
+                onClick={() => scrollMessagesSurface("top")}
+              >
+                <ArrowUpOutlined />
+              </button>
+              <button
+                type="button"
+                className="wb-chat-scroll-actions__button"
+                title="到达聊天底部"
+                aria-label="到达聊天底部"
+                onClick={() => scrollMessagesSurface("bottom")}
+              >
+                <ArrowDownOutlined />
+              </button>
+            </div>
+          </main>
+        </div>
+        {renderConversationSidebar()}
+      </div>
+
+      {renderMessagePreviewOverlay()}
+      {renderDeleteDialog()}
+      <RechargeModal open={showRechargeModal} onClose={() => setShowRechargeModal(false)} currentBalance={session?.user?.balanceCents} />
+    </section>
+  );
+}
+
+export default WorkbenchPage;
diff --git a/src/features/workbench/components/WorkbenchChatCards.tsx b/src/features/workbench/components/WorkbenchChatCards.tsx
new file mode 100644
index 0000000..ace9f58
--- /dev/null
+++ b/src/features/workbench/components/WorkbenchChatCards.tsx
@@ -0,0 +1,611 @@
+import { memo, useCallback, useEffect, useRef, useState, type CSSProperties, type ChangeEvent } from "react";
+import {
+  AppstoreOutlined,
+  CaretRightOutlined,
+  ClockCircleOutlined,
+  CopyOutlined,
+  DownloadOutlined,
+  FileTextOutlined,
+  FullscreenOutlined,
+  MutedOutlined,
+  PauseOutlined,
+  PictureOutlined,
+  ReloadOutlined,
+  SoundOutlined,
+  StopOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+import { assetClient } from "../../../api/assetClient";
+import { communityClient } from "../../../api/communityClient";
+import { saveAssetToLocalLibrary } from "../../assets/localAssetStore";
+import { SmoothedProgressBar } from "../SmoothedProgressBar";
+import { useSmoothedProgress } from "../../../hooks/useSmoothedProgress";
+import { renderMarkdownBlocks } from "../markdownRenderer";
+import { downloadResultAsset } from "../workbenchDownload";
+import type { WorkbenchChatAttachment, WorkbenchChatMessage, WorkbenchResultActionPayload } from "../workbenchChatTypes";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function cleanModelDisplayLabel(label: string) {
+  const channelName = "百炼";
+  return label.replace(new RegExp(`\\s*[（(]\\s*${channelName}\\s*[）)]`, "g"), "").trim();
+}
+
+function formatMediaTime(value: number) {
+  if (!Number.isFinite(value) || value <= 0) return "0:00";
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value % 60);
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+// ─── MarkdownMessage ──────────────────────────────────────────────────────────
+
+export const MarkdownMessage = memo(function MarkdownMessage({ text }: { text: string }) {
+  const normalized = text.trim();
+  if (!normalized) return null;
+  return <div className="ai-chat-markdown">{renderMarkdownBlocks(normalized)}</div>;
+});
+
+// ─── ImmersiveVideoPlayer ─────────────────────────────────────────────────────
+
+export const ImmersiveVideoPlayer = memo(function ImmersiveVideoPlayer({
+  src,
+  title,
+}: {
+  src: string;
+  title: string;
+}) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const frameRef = useRef<HTMLDivElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [volume, setVolume] = useState(1);
+
+  const syncVideoState = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    setIsPlaying(!video.paused && !video.ended);
+    setIsMuted(video.muted);
+    setVolume(video.volume);
+    setCurrentTime(video.currentTime || 0);
+    setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return undefined;
+
+    video.volume = volume;
+    syncVideoState();
+
+    const events: Array<keyof HTMLMediaElementEventMap> = [
+      "loadedmetadata",
+      "durationchange",
+      "timeupdate",
+      "play",
+      "pause",
+      "ended",
+      "volumechange",
+    ];
+    events.forEach((eventName) => video.addEventListener(eventName, syncVideoState));
+    return () => events.forEach((eventName) => video.removeEventListener(eventName, syncVideoState));
+  }, [src, syncVideoState, volume]);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === frameRef.current);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+
+  const togglePlayback = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused || video.ended) {
+      void video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }, []);
+
+  const handleSeek = (event: ChangeEvent<HTMLInputElement>) => {
+    const video = videoRef.current;
+    const nextTime = Number(event.currentTarget.value);
+    if (!video || !Number.isFinite(nextTime)) return;
+    video.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  };
+
+  const handleVolumeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const video = videoRef.current;
+    const nextVolume = Number(event.currentTarget.value);
+    if (!video || !Number.isFinite(nextVolume)) return;
+    video.volume = nextVolume;
+    video.muted = nextVolume === 0;
+    setVolume(nextVolume);
+    setIsMuted(video.muted);
+  };
+
+  const toggleMute = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+    setIsMuted(video.muted);
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+    if (document.fullscreenElement === frame) {
+      void document.exitFullscreen?.();
+    } else {
+      void frame.requestFullscreen?.();
+    }
+  }, []);
+
+  const progress = duration > 0 ? Math.min(100, Math.max(0, (currentTime / duration) * 100)) : 0;
+  const volumeProgress = Math.min(100, Math.max(0, volume * 100));
+
+  return (
+    <div
+      ref={frameRef}
+      className={`ai-chat-media-player${isPlaying ? " is-playing" : ""}${isFullscreen ? " is-fullscreen" : ""}`}
+    >
+      <div className="ai-chat-media-player__stage" onClick={togglePlayback}>
+        <video
+          ref={videoRef}
+          key={src}
+          src={src}
+          playsInline
+          preload="metadata"
+          aria-label={title}
+        />
+        <span className="ai-chat-media-player__vignette" />
+        <button
+          type="button"
+          className="ai-chat-media-player__center-play"
+          onClick={(event) => {
+            event.stopPropagation();
+            togglePlayback();
+          }}
+          aria-label={isPlaying ? "Pause video" : "Play video"}
+        >
+          {isPlaying ? <PauseOutlined /> : <CaretRightOutlined />}
+        </button>
+      </div>
+      <div className="ai-chat-media-player__controls" onClick={(event) => event.stopPropagation()}>
+        <input
+          className="ai-chat-media-player__seek"
+          type="range"
+          min="0"
+          max={duration || 0}
+          step="0.01"
+          value={Math.min(currentTime, duration || currentTime)}
+          onChange={handleSeek}
+          disabled={duration <= 0}
+          aria-label="Video progress"
+          style={{ "--progress": `${progress}%` } as CSSProperties}
+        />
+        <div className="ai-chat-media-player__bar">
+          <button type="button" onClick={togglePlayback} aria-label={isPlaying ? "Pause video" : "Play video"}>
+            {isPlaying ? <PauseOutlined /> : <CaretRightOutlined />}
+          </button>
+          <span className="ai-chat-media-player__time">
+            {formatMediaTime(currentTime)} / {formatMediaTime(duration)}
+          </span>
+          <span className="ai-chat-media-player__spacer" />
+          <button type="button" onClick={toggleMute} aria-label={isMuted ? "Unmute video" : "Mute video"}>
+            {isMuted || volume === 0 ? <MutedOutlined /> : <SoundOutlined />}
+          </button>
+          <input
+            className="ai-chat-media-player__volume"
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={isMuted ? 0 : volume}
+            onChange={handleVolumeChange}
+            aria-label="Video volume"
+            style={{ "--progress": `${isMuted ? 0 : volumeProgress}%` } as CSSProperties}
+          />
+          <button type="button" onClick={toggleFullscreen} aria-label="Fullscreen video">
+            <FullscreenOutlined />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+// ─── ResultCard ───────────────────────────────────────────────────────────────
+
+export const ResultCard = memo(function ResultCard({
+  message,
+  onRegenerate,
+  onOpenMedia,
+  onSuperResolveVideo,
+  onSuperResolveImage,
+  onOpenResultInCanvas,
+  downloadFilenameBase,
+}: {
+  message: WorkbenchChatMessage;
+  onRegenerate: (message: WorkbenchChatMessage) => void;
+  onOpenMedia: (item: WorkbenchChatAttachment) => void;
+  onSuperResolveVideo: (message: WorkbenchChatMessage) => void;
+  onSuperResolveImage: (message: WorkbenchChatMessage) => void;
+  onOpenResultInCanvas?: (payload: WorkbenchResultActionPayload) => void;
+  downloadFilenameBase?: string;
+}) {
+  const [mediaRatio, setMediaRatio] = useState<string | null>(null);
+  const [actionNotice, setActionNotice] = useState<string | null>(null);
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [mediaExpired, setMediaExpired] = useState(false);
+  const isVideo = message.resultType === "video";
+  const hasMedia = !!message.resultUrl;
+  const isSuperResolving =
+    hasMedia &&
+    message.status === "thinking" &&
+    message.taskStatusLabel?.includes("超分");
+  const promptText = message.prompt || (message.resultUrl ? "" : message.body);
+
+  const handleCopyPrompt = () => {
+    if (promptText) {
+      navigator.clipboard.writeText(promptText);
+    }
+  };
+
+  const specs = message.result?.specs || [];
+  const modelTag = cleanModelDisplayLabel(specs[0] || "");
+  const modeTag = specs.length > 1 ? specs[1] : "";
+  const mediaStyle = mediaRatio ? ({ "--media-ratio": mediaRatio } as CSSProperties) : undefined;
+  const durationTag = specs.find((spec) => /\b\d+s\b|秒/.test(spec)) || "5s";
+  const openGeneratedMedia = () => {
+    if (!message.resultUrl) return;
+    onOpenMedia({
+      kind: isVideo ? "video" : "image",
+      name: message.result?.title || (isVideo ? "生成视频" : "生成图片"),
+      token: message.taskId ? `#${message.taskId}` : "@结果",
+      previewUrl: message.resultUrl,
+      remoteUrl: message.resultUrl,
+    });
+  };
+  const resultTitle = message.result?.title || (isVideo ? "生成视频" : "生成图片");
+
+  const handleDownload = async () => {
+    if (!message.resultUrl || isDownloading) return;
+    setIsDownloading(true);
+    setActionNotice("正在准备下载...");
+    try {
+      const filenameBase = downloadFilenameBase || resultTitle;
+      const status = await downloadResultAsset(message.resultUrl, filenameBase, isVideo, message.resultOssKey ? undefined : message.taskId);
+      setActionNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        setActionNotice("已取消保存");
+      } else {
+        setActionNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
+      }
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const buildResultPayload = (): WorkbenchResultActionPayload | null => {
+    if (!message.resultUrl || !message.resultType) return null;
+    return {
+      title: resultTitle,
+      prompt: promptText,
+      resultUrl: message.resultUrl,
+      resultType: message.resultType,
+      taskId: message.taskId,
+      resultOriginalUrl: message.resultOriginalUrl,
+      resultOssKey: message.resultOssKey,
+      resultMimeType: message.resultMimeType,
+    };
+  };
+
+  const handleSaveAsset = async () => {
+    const payload = buildResultPayload();
+    if (!payload) return;
+    saveAssetToLocalLibrary({
+      type: payload.resultType === "video" ? "video" : "scene",
+      name: payload.title,
+      description: payload.prompt || "从生成结果保存的素材。",
+      imageUrl: payload.resultUrl,
+      tags: [payload.resultType === "video" ? "生成视频" : "生成图片", "工作台"],
+    });
+    try {
+      await assetClient.create({
+        type: payload.resultType === "video" ? "video" : "image",
+        name: payload.title,
+        description: payload.prompt || "从生成结果保存的素材。",
+        url: payload.resultUrl,
+        ossKey: payload.resultOssKey,
+        tags: [payload.resultType === "video" ? "生成视频" : "生成图片", "工作台"],
+        sourceTaskId: payload.taskId,
+        metadata: {
+          source: "workbench-result",
+          prompt: payload.prompt,
+          resultType: payload.resultType,
+          originalUrl: payload.resultOriginalUrl || null,
+          mimeType: payload.resultMimeType || null,
+        },
+      });
+      setActionNotice("已保存到服务器资产库");
+    } catch {
+      setActionNotice("已保存到本地资产库，登录后可同步服务器。");
+    }
+  };
+
+  const handleContinueInCanvas = () => {
+    const payload = buildResultPayload();
+    if (!payload) return;
+    onOpenResultInCanvas?.(payload);
+    setActionNotice("已打开画布继续编辑");
+  };
+
+  const handlePublish = async () => {
+    const payload = buildResultPayload();
+    if (!payload || isPublishing) return;
+    setIsPublishing(true);
+    setActionNotice(null);
+    try {
+      await communityClient.publishCase({
+        title: payload.title,
+        description: payload.prompt || "从工作台生成结果提交的社区作品。",
+        coverUrl: payload.resultUrl,
+        tags: [payload.resultType === "video" ? "视频" : "图片", "Web生成"],
+        metadata: {
+          source: "workbench-result",
+          taskId: payload.taskId,
+          prompt: payload.prompt,
+          resultType: payload.resultType,
+          resultOssKey: payload.resultOssKey || null,
+          resultOriginalUrl: payload.resultOriginalUrl || null,
+          resultMimeType: payload.resultMimeType || null,
+        },
+        assets: [
+          {
+            assetType: payload.resultType,
+            title: payload.title,
+            url: payload.resultUrl,
+            ossKey: payload.resultOssKey,
+            metadata: {
+              prompt: payload.prompt,
+              taskId: payload.taskId,
+              originalUrl: payload.resultOriginalUrl || null,
+              mimeType: payload.resultMimeType || null,
+            },
+          },
+        ],
+      });
+      setActionNotice("已提交社区审核。");
+    } catch (error) {
+      setActionNotice(error instanceof Error ? error.message : "提交社区失败");
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  return (
+    <div className={`ai-chat-image-result-card result-card-enter${isVideo ? " is-video" : ""}`}>
+      {hasMedia ? (
+        <div className={`ai-chat-image-frame${isVideo ? " ai-chat-image-frame--video" : ""}${mediaExpired ? " is-expired" : ""}`} style={mediaStyle}>
+          {mediaExpired ? (
+            <div className="ai-chat-media-expired">
+              <span>资源已过期</span>
+              <button type="button" onClick={() => onRegenerate(message)}>
+                <ReloadOutlined /> 重新生成
+              </button>
+            </div>
+          ) : isVideo ? (
+            <button type="button" className="ai-chat-video-poster" onClick={openGeneratedMedia}>
+              <video
+                src={message.resultUrl}
+                playsInline
+                muted
+                loop
+                preload="metadata"
+                onError={() => setMediaExpired(true)}
+              />
+              <span className="ai-chat-video-poster__scrim" />
+              <span className="ai-chat-video-poster__play">
+                <CaretRightOutlined />
+              </span>
+              <span className="ai-chat-video-poster__duration">
+                <ClockCircleOutlined /> {durationTag}
+              </span>
+            </button>
+          ) : (
+            <button type="button" className="ai-chat-image-preview-button" onClick={openGeneratedMedia}>
+              <img
+                src={message.resultUrl}
+                alt="生成结果"
+                onError={() => setMediaExpired(true)}
+                onLoad={(event) => {
+                  const { naturalWidth, naturalHeight } = event.currentTarget;
+                  if (naturalWidth > 0 && naturalHeight > 0) {
+                    setMediaRatio(`${naturalWidth} / ${naturalHeight}`);
+                  }
+                }}
+              />
+            </button>
+          )}
+        </div>
+      ) : null}
+
+      <div className="ai-chat-image-result-meta">
+        <div className="ai-chat-image-result-meta__top">
+          <strong>{isVideo ? "视频已生成" : "图像已生成"}</strong>
+          <span>{message.taskStatusLabel || "Completed"}</span>
+        </div>
+        {promptText && <p className="ai-chat-image-result-meta__prompt">{promptText}</p>}
+        <div className="ai-chat-image-result-meta__chips">
+          {modelTag && <span className="ai-chat-chip">{modelTag}</span>}
+          {modeTag && <span className="ai-chat-chip">{modeTag}</span>}
+        </div>
+        {isSuperResolving ? (
+          <div className="ai-chat-image-result-progress" aria-label="视频超分进度">
+            <SmoothedProgressBar
+              progress={message.taskProgress ?? 18}
+              status={message.status || "thinking"}
+              label={message.taskStatusLabel || "超分处理中..."}
+            />
+          </div>
+        ) : null}
+      </div>
+
+      <div className="ai-chat-image-actions">
+        <button
+          type="button"
+          className="ai-chat-image-actions__primary"
+          onClick={() => onRegenerate(message)}
+        >
+          <ReloadOutlined /> 重新生成
+        </button>
+        <span className="ai-chat-image-actions__spacer" />
+        <button
+          type="button"
+          className="ai-chat-image-actions__icon"
+          onClick={() => void handleDownload()}
+          disabled={isDownloading}
+          title={isDownloading ? "正在准备下载" : "下载到本地"}
+          aria-label={isDownloading ? "正在准备下载" : "下载到本地"}
+        >
+          <DownloadOutlined />
+        </button>
+        {isVideo && message.resultUrl ? (
+          <button
+            type="button"
+            className="ai-chat-image-actions__icon ai-chat-image-actions__icon--super-resolution"
+            onClick={() => onSuperResolveVideo(message)}
+            disabled={isSuperResolving}
+            title="超分"
+            aria-label="超分"
+          >
+            <ThunderboltOutlined />
+          </button>
+        ) : null}
+        {!isVideo && message.resultUrl ? (
+          <button
+            type="button"
+            className="ai-chat-image-actions__icon ai-chat-image-actions__icon--super-resolution"
+            onClick={() => onSuperResolveImage(message)}
+            disabled={isSuperResolving}
+            title="超分"
+            aria-label="超分"
+          >
+            <ThunderboltOutlined />
+          </button>
+        ) : null}
+        <button type="button" className="ai-chat-image-actions__icon" onClick={handleCopyPrompt}>
+          <CopyOutlined />
+        </button>
+      </div>
+      {hasMedia ? (
+        <div className="ai-chat-result-flow">
+          <button type="button" onClick={() => void handleSaveAsset()}>
+            <AppstoreOutlined /> 存资产
+          </button>
+          <button type="button" onClick={handleContinueInCanvas} disabled={!onOpenResultInCanvas}>
+            <PictureOutlined /> 进画布
+          </button>
+          <button type="button" onClick={() => void handlePublish()} disabled={isPublishing}>
+            <ThunderboltOutlined /> {isPublishing ? "提交中..." : "发社区"}
+          </button>
+          {actionNotice ? <span>{actionNotice}</span> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+// ─── ChatAttachmentPreview ────────────────────────────────────────────────────
+
+export const ChatAttachmentPreview = memo(function ChatAttachmentPreview({
+  item,
+  onOpen,
+}: {
+  item: WorkbenchChatAttachment;
+  onOpen: (item: WorkbenchChatAttachment) => void;
+}) {
+  const [mediaFailed, setMediaFailed] = useState(false);
+  const urlExpired = !item.previewUrl || item.previewUrl.startsWith("blob:");
+  const hasMedia = !urlExpired && !mediaFailed && (item.kind === "image" || item.kind === "video");
+
+  return (
+    <button
+      type="button"
+      className={`ai-chat-attachment-thumb${!hasMedia ? " is-file" : ""}`}
+      onClick={() => hasMedia && onOpen(item)}
+      disabled={!hasMedia}
+      title={`${item.token} ${item.name}`}
+    >
+      <span className="ai-chat-attachment-thumb__media">
+        {hasMedia && item.kind === "image" ? (
+          <img src={item.previewUrl} alt={item.name} loading="lazy" onError={() => setMediaFailed(true)} />
+        ) : hasMedia && item.kind === "video" ? (
+          <video src={item.previewUrl} muted playsInline onError={() => setMediaFailed(true)} />
+        ) : (
+          <span className="ai-chat-attachment-thumb__icon">
+            {item.kind === "audio" ? <SoundOutlined /> : <FileTextOutlined />}
+          </span>
+        )}
+      </span>
+      <span className="ai-chat-attachment-thumb__label">{item.token}</span>
+    </button>
+  );
+});
+
+// ─── GenerationPendingCard ────────────────────────────────────────────────────
+
+export const GenerationPendingCard = memo(function GenerationPendingCard({
+  message,
+  onStop,
+}: {
+  message: WorkbenchChatMessage;
+  onStop?: () => void;
+}) {
+  const specs = message.result?.specs || [];
+  const prompt = message.prompt || message.body;
+  const isVideo = message.mode === "video";
+  const smoothed = useSmoothedProgress(message.taskProgress ?? 5, message.status === "thinking" ? "running" : "completed");
+
+  return (
+    <div className={`ai-generation-pending-card${isVideo ? " is-video" : " is-image"}`}>
+      <div className="ai-generation-pending-card__stage">
+        <div className="ai-generation-pending-card__grid" />
+        <div className="ai-generation-pending-card__glow" />
+        <div className="ai-generation-pending-card__loader">
+          <span className="ai-generation-pending-card__ring" />
+          <em className="ai-generation-pending-card__percent">{smoothed}%</em>
+        </div>
+        <div className="ai-generation-pending-card__scan" />
+      </div>
+      <div className="ai-generation-pending-card__meta">
+        <div>
+          <strong>{message.taskStatusLabel || "Generating..."}</strong>
+          <span>{prompt}</span>
+        </div>
+        {specs.length > 0 && (
+          <div className="ai-generation-pending-card__chips">
+            {specs.slice(0, 3).map((spec) => (
+              <span key={spec}>{spec}</span>
+            ))}
+          </div>
+        )}
+        {onStop && (
+          <button type="button" className="ai-generation-pending-card__stop" onClick={onStop} title="终止任务">
+            <StopOutlined /> 终止
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/src/features/workbench/markdownRenderer.tsx b/src/features/workbench/markdownRenderer.tsx
new file mode 100644
index 0000000..e8971e3
--- /dev/null
+++ b/src/features/workbench/markdownRenderer.tsx
@@ -0,0 +1,236 @@
+import type { ReactNode } from "react";
+
+export function renderPlainMarkdownText(text: string, keyPrefix: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const pattern = /https?:\/\/[^\s)]+/g;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > cursor) {
+      nodes.push(text.slice(cursor, match.index));
+    }
+
+    const url = match[0];
+    nodes.push(
+      <a key={`${keyPrefix}-link-${match.index}`} href={url} target="_blank" rel="noreferrer">
+        {url}
+      </a>,
+    );
+    cursor = match.index + url.length;
+  }
+
+  if (cursor < text.length) {
+    nodes.push(text.slice(cursor));
+  }
+
+  return nodes.length > 0 ? nodes : [text];
+}
+
+export function renderMarkdownInline(text: string, keyPrefix: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const pattern = /(`[^`\n]+`|\*\*[\s\S]+?\*\*|__[\s\S]+?__|~~[\s\S]+?~~|\[[^\]]+\]$https?:\/\/[^)\s]+$|https?:\/\/[^\s)]+)/g;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    const token = match[0];
+    if (match.index > cursor) {
+      nodes.push(...renderPlainMarkdownText(text.slice(cursor, match.index), `${keyPrefix}-text-${cursor}`));
+    }
+
+    if (token.startsWith("`") && token.endsWith("`")) {
+      nodes.push(<code key={`${keyPrefix}-code-${match.index}`}>{token.slice(1, -1)}</code>);
+    } else if ((token.startsWith("**") && token.endsWith("**")) || (token.startsWith("__") && token.endsWith("__"))) {
+      nodes.push(<strong key={`${keyPrefix}-strong-${match.index}`}>{renderMarkdownInline(token.slice(2, -2), `${keyPrefix}-strong-${match.index}`)}</strong>);
+    } else if (token.startsWith("~~") && token.endsWith("~~")) {
+      nodes.push(<del key={`${keyPrefix}-del-${match.index}`}>{renderMarkdownInline(token.slice(2, -2), `${keyPrefix}-del-${match.index}`)}</del>);
+    } else if (token.startsWith("[") && token.includes("](") && token.endsWith(")")) {
+      const labelEnd = token.indexOf("](");
+      const label = token.slice(1, labelEnd);
+      const href = token.slice(labelEnd + 2, -1);
+      nodes.push(
+        <a key={`${keyPrefix}-md-link-${match.index}`} href={href} target="_blank" rel="noreferrer">
+          {renderMarkdownInline(label, `${keyPrefix}-md-link-label-${match.index}`)}
+        </a>,
+      );
+    } else {
+      nodes.push(
+        <a key={`${keyPrefix}-raw-link-${match.index}`} href={token} target="_blank" rel="noreferrer">
+          {token}
+        </a>,
+      );
+    }
+
+    cursor = match.index + token.length;
+  }
+
+  if (cursor < text.length) {
+    nodes.push(...renderPlainMarkdownText(text.slice(cursor), `${keyPrefix}-text-${cursor}`));
+  }
+
+  return nodes.length > 0 ? nodes : [text];
+}
+
+export function splitMarkdownTableRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\|/, "")
+    .replace(/\|$/, "")
+    .split("|")
+    .map((cell) => cell.trim());
+}
+
+export function isMarkdownTableDivider(line: string): boolean {
+  return /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
+}
+
+export function isMarkdownBlockStart(line: string, nextLine?: string): boolean {
+  const trimmed = line.trim();
+  return (
+    trimmed === "" ||
+    /^```/.test(trimmed) ||
+    /^#{1,4}\s+/.test(trimmed) ||
+    /^>\s?/.test(trimmed) ||
+    /^[-*+]\s+/.test(trimmed) ||
+    /^\d+[.)]\s+/.test(trimmed) ||
+    /^[-*_]{3,}$/.test(trimmed) ||
+    (line.includes("|") && !!nextLine && isMarkdownTableDivider(nextLine))
+  );
+}
+
+export function renderMarkdownBlocks(text: string): ReactNode[] {
+  const lines = text.replace(/\r\n?/g, "\n").trim().split("\n");
+  const blocks: ReactNode[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index] ?? "";
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+
+    const fenceMatch = trimmed.match(/^```(\S+)?/);
+    if (fenceMatch) {
+      const language = fenceMatch[1] || "";
+      const codeLines: string[] = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith("```")) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+      if (index < lines.length) index += 1;
+      blocks.push(
+        <figure key={`code-${index}`} className="ai-chat-markdown-code">
+          {language ? <figcaption>{language}</figcaption> : null}
+          <pre>
+            <code>{codeLines.join("\n")}</code>
+          </pre>
+        </figure>,
+      );
+      continue;
+    }
+
+    const headingMatch = trimmed.match(/^(#{1,4})\s+(.+)$/);
+    if (headingMatch) {
+      const level = Math.min(headingMatch[1].length, 4);
+      const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+      blocks.push(<Tag key={`heading-${index}`}>{renderMarkdownInline(headingMatch[2], `heading-${index}`)}</Tag>);
+      index += 1;
+      continue;
+    }
+
+    if (/^[-*_]{3,}$/.test(trimmed)) {
+      blocks.push(<hr key={`rule-${index}`} />);
+      index += 1;
+      continue;
+    }
+
+    if (line.includes("|") && index + 1 < lines.length && isMarkdownTableDivider(lines[index + 1])) {
+      const headers = splitMarkdownTableRow(line);
+      const rows: string[][] = [];
+      index += 2;
+      while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
+        rows.push(splitMarkdownTableRow(lines[index]));
+        index += 1;
+      }
+      blocks.push(
+        <div key={`table-${index}`} className="ai-chat-markdown-table-wrap">
+          <table>
+            <thead>
+              <tr>
+                {headers.map((header, cellIndex) => (
+                  <th key={`table-head-${cellIndex}`}>{renderMarkdownInline(header, `table-head-${cellIndex}`)}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIndex) => (
+                <tr key={`table-row-${rowIndex}`}>
+                  {headers.map((_, cellIndex) => (
+                    <td key={`table-cell-${rowIndex}-${cellIndex}`}>
+                      {renderMarkdownInline(row[cellIndex] || "", `table-cell-${rowIndex}-${cellIndex}`)}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>,
+      );
+      continue;
+    }
+
+    if (/^>\s?/.test(trimmed)) {
+      const quoteLines: string[] = [];
+      while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
+        quoteLines.push(lines[index].trim().replace(/^>\s?/, ""));
+        index += 1;
+      }
+      blocks.push(
+        <blockquote key={`quote-${index}`}>
+          {quoteLines.map((quoteLine, quoteIndex) => (
+            <p key={`quote-line-${quoteIndex}`}>{renderMarkdownInline(quoteLine, `quote-${index}-${quoteIndex}`)}</p>
+          ))}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    const unorderedMatch = trimmed.match(/^[-*+]\s+(.+)$/);
+    const orderedMatch = trimmed.match(/^\d+[.)]\s+(.+)$/);
+    if (unorderedMatch || orderedMatch) {
+      const ordered = Boolean(orderedMatch);
+      const ListTag = ordered ? "ol" : "ul";
+      const items: string[] = [];
+      while (index < lines.length) {
+        const itemMatch = ordered ? lines[index].trim().match(/^\d+[.)]\s+(.+)$/) : lines[index].trim().match(/^[-*+]\s+(.+)$/);
+        if (!itemMatch) break;
+        items.push(itemMatch[1]);
+        index += 1;
+      }
+      blocks.push(
+        <ListTag key={`list-${index}`}>
+          {items.map((item, itemIndex) => (
+            <li key={`list-item-${itemIndex}`}>{renderMarkdownInline(item, `list-${index}-${itemIndex}`)}</li>
+          ))}
+        </ListTag>,
+      );
+      continue;
+    }
+
+    const paragraphLines: string[] = [line];
+    index += 1;
+    while (index < lines.length && !isMarkdownBlockStart(lines[index], lines[index + 1])) {
+      paragraphLines.push(lines[index]);
+      index += 1;
+    }
+    const paragraphText = paragraphLines.join("\n").trim();
+    blocks.push(<p key={`paragraph-${index}`}>{renderMarkdownInline(paragraphText, `paragraph-${index}`)}</p>);
+  }
+
+  return blocks;
+}
diff --git a/src/features/workbench/toolResultActions.ts b/src/features/workbench/toolResultActions.ts
new file mode 100644
index 0000000..cd4cdfe
--- /dev/null
+++ b/src/features/workbench/toolResultActions.ts
@@ -0,0 +1,53 @@
+import { assetClient } from "../../api/assetClient";
+import type { WebAssetItem } from "../../types";
+import { saveAssetToLocalLibrary } from "../assets/localAssetStore";
+import { downloadResultAsset } from "./workbenchDownload";
+
+export interface ToolResultAssetInput {
+  url: string;
+  name: string;
+  description?: string;
+  type: WebAssetItem["type"];
+  isVideo?: boolean;
+  taskId?: string;
+  tags?: string[];
+  metadata?: Record<string, unknown>;
+}
+
+export async function saveToolResultToLocal(input: ToolResultAssetInput) {
+  return downloadResultAsset(input.url, input.name, Boolean(input.isVideo), input.taskId);
+}
+
+export async function addToolResultToAssetLibrary(input: ToolResultAssetInput): Promise<"server" | "local"> {
+  const description = input.description || "从工具盒生成结果加入的素材。";
+  const tags = input.tags?.length ? input.tags : ["工具盒", input.isVideo ? "生成视频" : "生成图片"];
+
+  saveAssetToLocalLibrary({
+    type: input.type,
+    name: input.name,
+    description,
+    url: input.url,
+    imageUrl: input.url,
+    tags,
+  });
+
+  try {
+    await assetClient.create({
+      type: input.type,
+      name: input.name,
+      description,
+      url: input.url,
+      imageUrl: input.url,
+      tags,
+      sourceTaskId: input.taskId,
+      metadata: {
+        source: "toolbox-result",
+        resultType: input.isVideo ? "video" : "image",
+        ...input.metadata,
+      },
+    });
+    return "server";
+  } catch {
+    return "local";
+  }
+}
diff --git a/src/features/workbench/workbenchChatTypes.ts b/src/features/workbench/workbenchChatTypes.ts
new file mode 100644
index 0000000..a852b70
--- /dev/null
+++ b/src/features/workbench/workbenchChatTypes.ts
@@ -0,0 +1,46 @@
+export type WorkbenchMode = "chat" | "image" | "video";
+
+export interface WorkbenchChatAttachment {
+  kind: "image" | "video" | "audio" | "file";
+  name: string;
+  token: string;
+  previewUrl?: string;
+  remoteUrl?: string;
+}
+
+export interface WorkbenchChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  author: string;
+  mode: WorkbenchMode;
+  body: string;
+  prompt?: string;
+  createdAt: string;
+  status?: "thinking" | "queued" | "completed" | "failed";
+  taskId?: string;
+  conversationId?: number;
+  taskProgress?: number;
+  taskStatusLabel?: string;
+  attachments?: WorkbenchChatAttachment[];
+  resultUrl?: string;
+  resultType?: "image" | "video";
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+  result?: {
+    title: string;
+    summary: string;
+    specs: string[];
+  };
+}
+
+export interface WorkbenchResultActionPayload {
+  title: string;
+  prompt: string;
+  resultUrl: string;
+  resultType: "image" | "video";
+  taskId?: string;
+  resultOriginalUrl?: string;
+  resultOssKey?: string;
+  resultMimeType?: string;
+}
diff --git a/src/features/workbench/workbenchDownload.ts b/src/features/workbench/workbenchDownload.ts
new file mode 100644
index 0000000..1b5bbe8
--- /dev/null
+++ b/src/features/workbench/workbenchDownload.ts
@@ -0,0 +1,154 @@
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { buildApiUrl, buildAuthHeaders } from "../../api/serverConnection";
+
+function sanitizeDownloadFilename(value: string, fallback: string) {
+  const normalized = value
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, " ")
+    .slice(0, 80)
+    .trim();
+  return normalized || fallback;
+}
+
+function getResultDownloadExtension(url: string, contentType: string | null, isVideo: boolean) {
+  const mime = (contentType || "").split(";")[0]?.trim().toLowerCase();
+  if (mime === "image/jpeg") return "jpg";
+  if (mime === "image/png") return "png";
+  if (mime === "image/webp") return "webp";
+  if (mime === "image/gif") return "gif";
+  if (mime === "video/webm") return "webm";
+  if (mime === "video/quicktime") return "mov";
+  if (mime === "video/mp4") return "mp4";
+
+  try {
+    const pathname = new URL(url, window.location.href).pathname;
+    const matched = pathname.match(/\.([a-z0-9]{2,5})$/i);
+    if (matched?.[1]) return matched[1].toLowerCase();
+  } catch {
+    // Keep the fallback below for malformed but still browser-loadable URLs.
+  }
+
+  return isVideo ? "mp4" : "png";
+}
+
+type LocalFilePickerWritable = {
+  write: (data: Blob) => Promise<void>;
+  close: () => Promise<void>;
+};
+
+type LocalFilePickerHandle = {
+  createWritable: () => Promise<LocalFilePickerWritable>;
+};
+
+type LocalFilePickerWindow = Window & {
+  showSaveFilePicker?: (options?: {
+    suggestedName?: string;
+    types?: Array<{
+      description: string;
+      accept: Record<string, string[]>;
+    }>;
+  }) => Promise<LocalFilePickerHandle>;
+};
+
+async function saveBlobToLocal(blob: Blob, filename: string, isVideo: boolean): Promise<"saved" | "started"> {
+  const startBrowserDownload = () => {
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = objectUrl;
+    anchor.download = filename;
+    anchor.rel = "noopener";
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+
+    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
+    return "started" as const;
+  };
+
+  const savePicker = (window as LocalFilePickerWindow).showSaveFilePicker;
+  if (savePicker) {
+    try {
+      const pickerTypes = [
+        isVideo
+          ? { description: "Video", accept: { [blob.type || "video/mp4"]: [`.${filename.split(".").pop() || "mp4"}`] } }
+          : { description: "Image", accept: { [blob.type || "image/png"]: [`.${filename.split(".").pop() || "png"}`] } },
+      ];
+      const handle = await savePicker({ suggestedName: filename, types: pickerTypes });
+      const writable = await handle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+      return "saved";
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") throw error;
+      return startBrowserDownload();
+    }
+  }
+
+  return startBrowserDownload();
+}
+
+async function assertDownloadBlobIsUsable(blob: Blob, isVideo: boolean) {
+  const mime = String(blob.type || "").toLowerCase();
+  if (/^(?:application|text)\/(?:json|xml|html|plain)|\+xml/.test(mime)) {
+    throw new Error("下载失败：结果链接已过期或返回了错误内容，请重新生成后再下载。");
+  }
+
+  const header = new Uint8Array(await blob.slice(0, 16).arrayBuffer());
+  const asText = new TextDecoder("utf-8", { fatal: false }).decode(header);
+  const isPng = header[0] === 0x89 && header[1] === 0x50 && header[2] === 0x4e && header[3] === 0x47;
+  const isJpeg = header[0] === 0xff && header[1] === 0xd8 && header[2] === 0xff;
+  const isGif = asText.startsWith("GIF8");
+  const isWebp = asText.startsWith("RIFF") && asText.slice(8, 12) === "WEBP";
+  const isMp4 = asText.slice(4, 8) === "ftyp";
+  const looksLikeErrorDocument = asText.startsWith("<?xml") || asText.startsWith("<Error") || asText.startsWith("{\"") || asText.startsWith("<!DO");
+
+  if (looksLikeErrorDocument) {
+    throw new Error("下载失败：结果链接已过期或返回了错误内容，请重新生成后再下载。");
+  }
+
+  const hasExpectedMagic = isVideo ? isMp4 || mime.startsWith("video/") : isPng || isJpeg || isGif || isWebp || mime.startsWith("image/");
+  if (!hasExpectedMagic) {
+    throw new Error("下载失败：未收到有效的媒体文件。");
+  }
+}
+
+export async function downloadResultAsset(url: string, filenameBase: string, isVideo: boolean, taskId?: string): Promise<"saved" | "started"> {
+  let blob: Blob | null = null;
+  let contentType: string | null = null;
+
+  if (taskId) {
+    try {
+      const result = await aiGenerationClient.downloadTaskResult(taskId);
+      blob = result.blob;
+      contentType = result.contentType || result.blob.type || null;
+    } catch {
+      blob = null;
+    }
+  }
+
+  if (!blob) {
+    const needsProxy = /aliyuncs\.com/i.test(url);
+    const fetchUrl = needsProxy
+      ? buildApiUrl(`ai/proxy-download?url=${encodeURIComponent(url)}`)
+      : url;
+    const fetchOpts: RequestInit = needsProxy
+      ? { headers: buildAuthHeaders() }
+      : { credentials: "omit" };
+    const response = await fetch(fetchUrl, fetchOpts);
+    if (!response.ok) {
+      throw new Error(`下载失败：资源请求返回 ${response.status}`);
+    }
+    blob = await response.blob();
+    contentType = blob.type || response.headers.get("content-type");
+  }
+
+  if (!blob.size) {
+    throw new Error("下载失败：资源内容为空");
+  }
+  await assertDownloadBlobIsUsable(blob, isVideo);
+
+  const extension = getResultDownloadExtension(url, contentType, isVideo);
+  const filename = `${sanitizeDownloadFilename(filenameBase, isVideo ? "generated-video" : "generated-image")}.${extension}`;
+  return saveBlobToLocal(blob, filename, isVideo);
+}
diff --git a/src/features/workbench/workbenchResultPersistence.ts b/src/features/workbench/workbenchResultPersistence.ts
new file mode 100644
index 0000000..f60c45b
--- /dev/null
+++ b/src/features/workbench/workbenchResultPersistence.ts
@@ -0,0 +1,234 @@
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+
+export interface PersistedWorkbenchResultAsset {
+  url: string;
+  originalUrl: string;
+  ossKey?: string;
+  mimeType?: string;
+}
+
+interface PersistWorkbenchResultAssetInput {
+  title: string;
+  sourceUrl: string;
+  resultType: "image" | "video";
+  taskId?: string;
+  prompt?: string;
+  originalUrl?: string;
+  existingOssKey?: string | null;
+  mimeType?: string;
+  client?: WorkbenchResultPersistenceClient;
+}
+
+interface DownloadedTaskAsset {
+  blob: Blob;
+  filename?: string;
+  contentType?: string;
+}
+
+interface FetchLikeResponse {
+  ok: boolean;
+  status: number;
+  headers: {
+    get(name: string): string | null;
+  };
+  blob(): Promise<Blob>;
+}
+
+interface WorkbenchResultPersistenceClient {
+  downloadTaskResult(taskId: string): Promise<DownloadedTaskAsset>;
+  uploadAsset(input: {
+    dataUrl: string;
+    name?: string;
+    mimeType?: string;
+    scope?: string;
+  }): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
+  uploadAssetByUrl(input: {
+    sourceUrl: string;
+    name?: string;
+    mimeType?: string;
+    scope?: string;
+  }): Promise<{ url: string; signedUrl?: string; ossKey?: string }>;
+  fetchAsset?: (url: string) => Promise<FetchLikeResponse>;
+}
+
+function getDefaultClient(): WorkbenchResultPersistenceClient {
+  return {
+    downloadTaskResult: (taskId) => aiGenerationClient.downloadTaskResult(taskId),
+    uploadAsset: (input) => aiGenerationClient.uploadAsset(input),
+    uploadAssetByUrl: (input) => aiGenerationClient.uploadAssetByUrl(input),
+    fetchAsset: (url) => fetch(url, { credentials: "omit" }),
+  };
+}
+
+function getGeneratedResultOssKey(url: string): string | null {
+  try {
+    const key = decodeURIComponent(new URL(url, globalThis.location?.href || "http://localhost").pathname.replace(/^\/+/, ""));
+    return /^users\/[^/]+\/generation-results\/.+/i.test(key) ? key : null;
+  } catch {
+    return null;
+  }
+}
+
+function createFallbackResult(input: PersistWorkbenchResultAssetInput): PersistedWorkbenchResultAsset {
+  return {
+    url: input.sourceUrl,
+    originalUrl: input.originalUrl || input.sourceUrl,
+    ossKey: input.existingOssKey || getGeneratedResultOssKey(input.sourceUrl) || undefined,
+    mimeType: input.mimeType,
+  };
+}
+
+function getResultExtension(url: string, contentType: string | undefined, resultType: "image" | "video") {
+  const mime = (contentType || "").split(";")[0]?.trim().toLowerCase();
+  if (mime === "image/jpeg") return "jpg";
+  if (mime === "image/png") return "png";
+  if (mime === "image/webp") return "webp";
+  if (mime === "image/gif") return "gif";
+  if (mime === "video/webm") return "webm";
+  if (mime === "video/quicktime") return "mov";
+  if (mime === "video/mp4") return "mp4";
+
+  try {
+    const pathname = new URL(url, globalThis.location?.href || "http://localhost").pathname;
+    const matched = pathname.match(/\.([a-z0-9]{2,5})$/i);
+    if (matched?.[1]) return matched[1].toLowerCase();
+  } catch {
+    // Fall through to media-type fallback.
+  }
+
+  return resultType === "video" ? "mp4" : "png";
+}
+
+export function buildWorkbenchResultAssetName(
+  title: string,
+  sourceUrl: string,
+  resultType: "image" | "video",
+  contentType?: string,
+): string {
+  const normalized = title
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, " ")
+    .slice(0, 80)
+    .trim();
+  const base = normalized || (resultType === "video" ? "generated-video" : "generated-image");
+  return `${base}.${getResultExtension(sourceUrl, contentType, resultType)}`;
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("资源读取失败"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function assertMediaBlobIsUsable(blob: Blob, resultType: "image" | "video") {
+  const mime = String(blob.type || "").toLowerCase();
+  if (/^(?:application|text)\/(?:json|xml|html|plain)|\+xml/.test(mime)) {
+    throw new Error("结果资源已过期或返回了错误内容，请重新生成。");
+  }
+
+  const header = new Uint8Array(await blob.slice(0, 16).arrayBuffer());
+  const asText = new TextDecoder("utf-8", { fatal: false }).decode(header);
+  const isPng = header[0] === 0x89 && header[1] === 0x50 && header[2] === 0x4e && header[3] === 0x47;
+  const isJpeg = header[0] === 0xff && header[1] === 0xd8 && header[2] === 0xff;
+  const isGif = asText.startsWith("GIF8");
+  const isWebp = asText.startsWith("RIFF") && asText.slice(8, 12) === "WEBP";
+  const isMp4 = asText.slice(4, 8) === "ftyp";
+  const looksLikeErrorDocument = asText.startsWith("<?xml") || asText.startsWith("<Error") || asText.startsWith("{\"") || asText.startsWith("<!DO");
+  if (looksLikeErrorDocument) throw new Error("结果资源已过期或返回了错误内容，请重新生成。");
+
+  const hasExpectedMagic =
+    resultType === "video"
+      ? isMp4 || mime.startsWith("video/")
+      : isPng || isJpeg || isGif || isWebp || mime.startsWith("image/");
+  if (!hasExpectedMagic) throw new Error("未收到有效的媒体文件。");
+}
+
+async function downloadResultBlob(
+  input: PersistWorkbenchResultAssetInput,
+  client: WorkbenchResultPersistenceClient,
+): Promise<{ blob: Blob; contentType?: string; filename?: string }> {
+  if (input.taskId) {
+    try {
+      const result = await client.downloadTaskResult(input.taskId);
+      return {
+        blob: result.blob,
+        contentType: result.contentType || result.blob.type || undefined,
+        filename: result.filename,
+      };
+    } catch {
+      // Some older tasks may not support the proxy download route; fall back to the URL while it is still valid.
+    }
+  }
+
+  const fetchAsset = client.fetchAsset || ((url: string) => fetch(url, { credentials: "omit" }));
+  const response = await fetchAsset(input.sourceUrl);
+  if (!response.ok) throw new Error(`结果资源请求失败：${response.status}`);
+  const blob = await response.blob();
+  return {
+    blob,
+    contentType: blob.type || response.headers.get("content-type") || undefined,
+  };
+}
+
+export async function persistWorkbenchResultAsset(input: PersistWorkbenchResultAssetInput): Promise<PersistedWorkbenchResultAsset> {
+  const fallbackResult = createFallbackResult(input);
+  if (fallbackResult.ossKey) return fallbackResult;
+
+  const client = input.client || getDefaultClient();
+  const mimeType = input.mimeType || (input.resultType === "video" ? "video/mp4" : "image/png");
+  const name = buildWorkbenchResultAssetName(input.title, input.sourceUrl, input.resultType, mimeType);
+
+  // Try server-side URL-to-OSS first (no base64, no client download)
+  try {
+    const uploaded = await client.uploadAssetByUrl({
+      sourceUrl: input.sourceUrl,
+      name,
+      mimeType,
+      scope: "workbench-result",
+    });
+    return {
+      url: uploaded.url,
+      originalUrl: input.sourceUrl,
+      ossKey: uploaded.ossKey,
+      mimeType,
+    };
+  } catch (urlError) {
+    console.warn("[workbench] URL upload failed, falling back to download+base64:", urlError instanceof Error ? urlError.message : urlError);
+  }
+
+  // Fallback: download → base64 → upload
+  try {
+  const downloaded = await downloadResultBlob(input, client);
+  if (!downloaded.blob.size) throw new Error("结果资源内容为空");
+  await assertMediaBlobIsUsable(downloaded.blob, input.resultType);
+
+  const fallbackMime = downloaded.contentType || downloaded.blob.type || mimeType;
+  const fallbackName = downloaded.filename || name;
+  const dataUrl = await blobToDataUrl(downloaded.blob);
+  const uploaded = await client.uploadAsset({
+    dataUrl,
+    name: fallbackName,
+    mimeType: fallbackMime,
+    scope: "workbench-result",
+  });
+
+  return {
+    url: uploaded.url,
+    originalUrl: input.sourceUrl,
+    ossKey: uploaded.ossKey,
+    mimeType: fallbackMime,
+  };
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error || "");
+    if (/413|too large/i.test(msg)) {
+      console.warn("[workbench] OSS upload rejected (file too large), using temporary URL:", msg);
+    } else {
+      console.warn("[workbench] result persistence fallback:", error);
+    }
+    return fallbackResult;
+  }
+}
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..fe5a19b
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delayMs = 300): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debounced;
+}
diff --git a/src/hooks/useSmoothedProgress.ts b/src/hooks/useSmoothedProgress.ts
new file mode 100644
index 0000000..15309dd
--- /dev/null
+++ b/src/hooks/useSmoothedProgress.ts
@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from "react";
+
+type ProgressStatus = "queued" | "running" | "submitting" | "completed" | "failed" | "success" | "error";
+
+interface SmoothedProgressOptions {
+  creepSpeed?: number;
+  chaseRate?: number;
+  creepCeiling?: number;
+  creepAhead?: number;
+  completionDuration?: number;
+}
+
+const DEFAULT_CREEP_SPEED = 0.5;
+const DEFAULT_CHASE_RATE = 0.09;
+const DEFAULT_CREEP_CEILING = 97;
+const DEFAULT_CREEP_AHEAD = 25;
+const DEFAULT_COMPLETION_DURATION = 450;
+
+function isTerminal(status: ProgressStatus): boolean {
+  return status === "completed" || status === "success" || status === "failed" || status === "error";
+}
+
+function isSuccess(status: ProgressStatus): boolean {
+  return status === "completed" || status === "success";
+}
+
+/**
+ * Smoothly interpolates between coarse server-reported progress values.
+ * On completion, animates quickly to 100% instead of jumping.
+ */
+export function useSmoothedProgress(
+  realProgress: number,
+  status: ProgressStatus,
+  options?: SmoothedProgressOptions,
+): number {
+  const creepSpeed = options?.creepSpeed ?? DEFAULT_CREEP_SPEED;
+  const chaseRate = options?.chaseRate ?? DEFAULT_CHASE_RATE;
+  const creepCeiling = options?.creepCeiling ?? DEFAULT_CREEP_CEILING;
+  const creepAhead = options?.creepAhead ?? DEFAULT_CREEP_AHEAD;
+  const completionDuration = options?.completionDuration ?? DEFAULT_COMPLETION_DURATION;
+
+  const [displayed, setDisplayed] = useState(0);
+  const rafRef = useRef(0);
+  const targetRef = useRef(realProgress);
+  const statusRef = useRef(status);
+  const completionStartRef = useRef<number | null>(null);
+  const completionBaseRef = useRef(0);
+
+  useEffect(() => {
+    targetRef.current = realProgress;
+    statusRef.current = status;
+
+    if (isSuccess(status) && completionStartRef.current === null) {
+      completionStartRef.current = performance.now();
+      completionBaseRef.current = displayed;
+    }
+  }, [realProgress, status]);
+
+  useEffect(() => {
+    if (status === "failed" || status === "error") {
+      cancelAnimationFrame(rafRef.current);
+      return;
+    }
+
+    let lastFrame = performance.now();
+
+    const tick = (now: number) => {
+      const dt = Math.min((now - lastFrame) / 1000, 0.1);
+      lastFrame = now;
+
+      setDisplayed((current) => {
+        const currentStatus = statusRef.current;
+
+        if (isSuccess(currentStatus)) {
+          const start = completionStartRef.current ?? now;
+          const elapsed = now - start;
+          const t = Math.min(elapsed / completionDuration, 1);
+          const eased = 1 - (1 - t) * (1 - t);
+          const base = completionBaseRef.current;
+          return base + (100 - base) * eased;
+        }
+
+        if (isTerminal(currentStatus)) return current;
+
+        const target = targetRef.current;
+
+        if (current >= target) {
+          const ceiling = Math.min(target + creepAhead, creepCeiling);
+          if (current >= ceiling) return current;
+          return current + creepSpeed * dt;
+        }
+
+        const gap = target - current;
+        const step = (gap * chaseRate + 0.3) * dt * 60;
+        return Math.min(current + step, target);
+      });
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [status, chaseRate, creepSpeed, creepCeiling, creepAhead, completionDuration]);
+
+  if (status === "failed" || status === "error") return Math.round(displayed);
+  if (isSuccess(status) && displayed >= 99.5) return 100;
+  return Math.round(Math.max(0, Math.min(99, displayed)));
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..3efd374
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@xyflow/react/dist/style.css";
+import "./styles/index.css";
+import App from "./App";
+import { reportError } from "./utils/errorReporting";
+
+window.addEventListener("unhandledrejection", (event) => {
+  reportError(event.reason, "rejection");
+});
+
+window.addEventListener("error", (event) => {
+  if (event.error) reportError(event.error, "unhandled");
+});
+
+const root = document.getElementById("root");
+
+if (!root) {
+  throw new Error("Root element not found");
+}
+
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..7c3ef7b
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,8 @@
+// Zustand store exports
+export { useSessionStore } from './useSessionStore';
+export { useProjectStore } from './useProjectStore';
+export { useTaskStore } from './useTaskStore';
+export { useAppStore } from './useAppStore';
+
+// Type exports
+export type { PendingAction } from './useSessionStore';
diff --git a/src/stores/useAppStore.ts b/src/stores/useAppStore.ts
new file mode 100644
index 0000000..ee2dfa6
--- /dev/null
+++ b/src/stores/useAppStore.ts
@@ -0,0 +1,111 @@
+import { create } from 'zustand';
+import type {
+  WebUsageSummary,
+  WebNotification,
+  WebViewKey,
+  WebImageWorkbenchTool,
+} from '../types';
+import type { ServerConnectionHealth } from '../api/serverConnection';
+import type { TemplateCase } from '../features/ecommerce/ecommerceTemplates';
+
+interface AppState {
+  usage: WebUsageSummary;
+  runtimeNotifications: WebNotification[];
+  serverNotifications: WebNotification[];
+  activeView: WebViewKey;
+  workspaceExpanded: boolean;
+  imageWorkbenchTool: WebImageWorkbenchTool;
+  pendingEcommerceTemplate: TemplateCase | null;
+  backendHealth: ServerConnectionHealth;
+}
+
+interface AppActions {
+  setUsage: (usage: WebUsageSummary) => void;
+  pushNotification: (notification: Omit<WebNotification, 'id' | 'createdAt' | 'isRead'>) => void;
+  setRuntimeNotifications: (notifications: WebNotification[]) => void;
+  setServerNotifications: (notifications: WebNotification[]) => void;
+  setView: (view: WebViewKey) => void;
+  setWorkspaceExpanded: (expanded: boolean) => void;
+  setImageWorkbenchTool: (tool: WebImageWorkbenchTool) => void;
+  setPendingEcommerceTemplate: (template: TemplateCase | null) => void;
+  setBackendHealth: (health: ServerConnectionHealth) => void;
+  markNotificationRead: (id: string, isRead?: boolean) => void;
+  markAllNotificationsRead: () => void;
+  clearAppState: () => void;
+}
+
+const emptyUsageSummary: WebUsageSummary = {
+  balanceCents: 0,
+  imageUsed: 0,
+  videoUsed: 0,
+  textUsed: 0,
+  source: 'preview',
+};
+
+const initialState: AppState = {
+  usage: emptyUsageSummary,
+  runtimeNotifications: [],
+  serverNotifications: [],
+  activeView: 'home',
+  workspaceExpanded: false,
+  imageWorkbenchTool: 'workbench',
+  pendingEcommerceTemplate: null,
+  backendHealth: {
+    state: 'checking',
+    baseUrl: '',
+    checkedAt: new Date().toISOString(),
+  },
+};
+
+export const useAppStore = create<AppState & AppActions>((set) => ({
+  ...initialState,
+
+  setUsage: (usage) => set({ usage }),
+
+  pushNotification: (notification) => set((state) => ({
+    runtimeNotifications: [
+      {
+        ...notification,
+        id: `notice-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        createdAt: new Date().toISOString(),
+        isRead: false,
+      },
+      ...state.runtimeNotifications,
+    ].slice(0, 30),
+  })),
+
+  setRuntimeNotifications: (notifications) => set({ runtimeNotifications: notifications }),
+
+  setServerNotifications: (notifications) => set({ serverNotifications: notifications }),
+
+  setView: (view) => set({ activeView: view }),
+
+  setWorkspaceExpanded: (expanded) => set({ workspaceExpanded: expanded }),
+
+  setImageWorkbenchTool: (tool) => set({ imageWorkbenchTool: tool }),
+
+  setPendingEcommerceTemplate: (template) => set({ pendingEcommerceTemplate: template }),
+
+  setBackendHealth: (health) => set({ backendHealth: health }),
+
+  markNotificationRead: (id, isRead = true) => set((state) => ({
+    serverNotifications: state.serverNotifications.map((item) =>
+      item.id === id ? { ...item, isRead, readAt: isRead ? new Date().toISOString() : null } : item
+    ),
+  })),
+
+  markAllNotificationsRead: () => set((state) => ({
+    serverNotifications: state.serverNotifications.map((item) => ({
+      ...item,
+      isRead: true,
+      readAt: new Date().toISOString(),
+    })),
+  })),
+
+  clearAppState: () => set({
+    ...initialState,
+    usage: emptyUsageSummary,
+    runtimeNotifications: [],
+    serverNotifications: [],
+  }),
+}));
diff --git a/src/stores/useProjectStore.ts b/src/stores/useProjectStore.ts
new file mode 100644
index 0000000..989163f
--- /dev/null
+++ b/src/stores/useProjectStore.ts
@@ -0,0 +1,54 @@
+import { create } from 'zustand';
+import type { WebProjectSummary, WebCanvasWorkflow } from '../types';
+
+interface ProjectState {
+  projects: WebProjectSummary[];
+  projectsLoaded: boolean;
+  canvasWorkflow: WebCanvasWorkflow | null;
+  currentCanvasProjectId: string | null;
+  pendingDeleteProject: WebProjectSummary | null;
+  deleteProjectSubmitting: boolean;
+}
+
+interface ProjectActions {
+  setProjects: (projects: WebProjectSummary[]) => void;
+  setProjectsLoaded: (loaded: boolean) => void;
+  setCanvasWorkflow: (workflow: WebCanvasWorkflow | null) => void;
+  setCurrentCanvasProjectId: (id: string | null) => void;
+  openDeleteProject: (project: WebProjectSummary) => void;
+  closeDeleteProject: () => void;
+  setDeleteProjectSubmitting: (submitting: boolean) => void;
+  clearProjectState: () => void;
+}
+
+const initialState: ProjectState = {
+  projects: [],
+  projectsLoaded: false,
+  canvasWorkflow: null,
+  currentCanvasProjectId: null,
+  pendingDeleteProject: null,
+  deleteProjectSubmitting: false,
+};
+
+export const useProjectStore = create<ProjectState & ProjectActions>((set) => ({
+  ...initialState,
+
+  setProjects: (projects) => set({ projects }),
+
+  setProjectsLoaded: (loaded) => set({ projectsLoaded: loaded }),
+
+  setCanvasWorkflow: (workflow) => set({ canvasWorkflow: workflow }),
+
+  setCurrentCanvasProjectId: (id) => set({ currentCanvasProjectId: id }),
+
+  openDeleteProject: (project) => set({ pendingDeleteProject: project }),
+
+  closeDeleteProject: () => set({
+    pendingDeleteProject: null,
+    deleteProjectSubmitting: false,
+  }),
+
+  setDeleteProjectSubmitting: (submitting) => set({ deleteProjectSubmitting: submitting }),
+
+  clearProjectState: () => set(initialState),
+}));
diff --git a/src/stores/useSessionStore.ts b/src/stores/useSessionStore.ts
new file mode 100644
index 0000000..5a58060
--- /dev/null
+++ b/src/stores/useSessionStore.ts
@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+import type { WebCanvasWorkflow, WebUserSession } from '../types';
+import type { CreatePreviewTaskInput } from '../api/webGenerationGateway';
+
+export interface PendingAction {
+  kind: 'project' | 'task';
+  label: string;
+  description: string;
+  workflow?: WebCanvasWorkflow;
+  input?: CreatePreviewTaskInput;
+}
+
+interface SessionState {
+  session: WebUserSession | null;
+  loginPromptOpen: boolean;
+  pendingAction: PendingAction | null;
+  sessionReplacedOpen: boolean;
+  sessionReplacedMessage: string;
+}
+
+interface SessionActions {
+  setSession: (session: WebUserSession | null) => void;
+  openLoginPrompt: (action?: PendingAction) => void;
+  closeLoginPrompt: () => void;
+  setPendingAction: (action: PendingAction | null) => void;
+  showSessionReplaced: (message?: string) => void;
+  hideSessionReplaced: () => void;
+  clearSession: () => void;
+}
+
+const initialState: SessionState = {
+  session: null,
+  loginPromptOpen: false,
+  pendingAction: null,
+  sessionReplacedOpen: false,
+  sessionReplacedMessage: '您的账号已在其他设备登录，此设备的登录状态已失效。',
+};
+
+export const useSessionStore = create<SessionState & SessionActions>((set) => ({
+  ...initialState,
+
+  setSession: (session) => set({ session }),
+
+  openLoginPrompt: (action) => set({
+    loginPromptOpen: true,
+    pendingAction: action || null,
+  }),
+
+  closeLoginPrompt: () => set({
+    loginPromptOpen: false,
+    pendingAction: null,
+  }),
+
+  setPendingAction: (action) => set({ pendingAction: action }),
+
+  showSessionReplaced: (message) => set({
+    sessionReplacedOpen: true,
+    sessionReplacedMessage: message || '您的账号已在其他设备登录（最多同时 2 台设备），此设备的登录状态已失效。',
+  }),
+
+  hideSessionReplaced: () => set({ sessionReplacedOpen: false }),
+
+  clearSession: () => set({
+    session: null,
+    loginPromptOpen: false,
+    pendingAction: null,
+  }),
+}));
diff --git a/src/stores/useTaskStore.ts b/src/stores/useTaskStore.ts
new file mode 100644
index 0000000..d8d9368
--- /dev/null
+++ b/src/stores/useTaskStore.ts
@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+import type { WebGenerationPreviewTask } from '../types';
+
+interface TaskState {
+  tasks: WebGenerationPreviewTask[];
+}
+
+interface TaskActions {
+  setTasks: (tasks: WebGenerationPreviewTask[]) => void;
+  appendTask: (task: WebGenerationPreviewTask) => void;
+  mergeServerTasks: (serverTasks: WebGenerationPreviewTask[]) => void;
+  clearTasks: () => void;
+}
+
+const initialState: TaskState = {
+  tasks: [],
+};
+
+export const useTaskStore = create<TaskState & TaskActions>((set) => ({
+  ...initialState,
+
+  setTasks: (tasks) => set({ tasks }),
+
+  appendTask: (task) => set((state) => ({
+    tasks: [task, ...state.tasks],
+  })),
+
+  mergeServerTasks: (serverTasks) => set((state) => {
+    const serverIds = new Set(serverTasks.map((task) => task.id));
+    return {
+      tasks: [...serverTasks, ...state.tasks.filter((task) => !serverIds.has(task.id))].slice(0, 80),
+    };
+  }),
+
+  clearTasks: () => set({ tasks: [] }),
+}));
diff --git a/src/styles/app.css b/src/styles/app.css
new file mode 100644
index 0000000..0216f63
--- /dev/null
+++ b/src/styles/app.css
@@ -0,0 +1,2 @@
+/* Compatibility shim: app-wide styles are layered through index.css. */
+@import "./index.css";
diff --git a/src/styles/base/reset.css b/src/styles/base/reset.css
new file mode 100644
index 0000000..ba183e6
--- /dev/null
+++ b/src/styles/base/reset.css
@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+  overflow: hidden;
+  background: var(--page-bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  letter-spacing: 0;
+}
+
+button,
+textarea,
+input {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
+button:focus-visible,
+textarea:focus-visible,
+input:focus-visible {
+  outline: 2px solid rgba(var(--accent-rgb), 0.48);
+  outline-offset: 2px;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+}
diff --git a/src/styles/components/dropzone.css b/src/styles/components/dropzone.css
new file mode 100644
index 0000000..98b06ea
--- /dev/null
+++ b/src/styles/components/dropzone.css
@@ -0,0 +1,34 @@
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 28px 16px;
+  border: 2px dashed var(--border-weak, #333);
+  border-radius: var(--radius-lg, 14px);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  text-align: center;
+}
+
+.dropzone:hover {
+  border-color: var(--accent, #0d9488);
+  background: color-mix(in srgb, var(--accent, #0d9488) 5%, transparent);
+}
+
+.dropzone--active {
+  border-color: var(--accent, #0d9488);
+  background: color-mix(in srgb, var(--accent, #0d9488) 10%, transparent);
+  border-style: solid;
+}
+
+.dropzone__label {
+  font-size: 14px;
+  color: var(--text-primary, #e5e5e5);
+}
+
+.dropzone__hint {
+  font-size: 12px;
+  color: var(--text-tertiary, #888);
+}
diff --git a/src/styles/components/empty-state.css b/src/styles/components/empty-state.css
new file mode 100644
index 0000000..31a9d1a
--- /dev/null
+++ b/src/styles/components/empty-state.css
@@ -0,0 +1,50 @@
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.empty-state__illustration {
+  color: var(--fg-soft, #888);
+  margin-bottom: 8px;
+  opacity: 0.7;
+}
+
+.empty-state__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--fg-body, #e0e0e0);
+}
+
+.empty-state__desc {
+  font-size: 13px;
+  color: var(--fg-soft, #888);
+  max-width: 280px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.empty-state__action {
+  margin-top: 8px;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent, #0d9488);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.empty-state__action:hover {
+  background: var(--accent-hover, #0f766e);
+}
+
+.empty-state__action:active {
+  transform: scale(0.97);
+}
diff --git a/src/styles/components/legacy-components.css b/src/styles/components/legacy-components.css
new file mode 100644
index 0000000..5177651
--- /dev/null
+++ b/src/styles/components/legacy-components.css
@@ -0,0 +1,1167 @@
+/* Shared shell primitives and legacy top-level components. */
+.panel-surface {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.profile-button__avatar,
+.profile-popover__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #07100b;
+  font-weight: 900;
+}
+
+.profile-button__avatar {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+}
+
+.profile-button__avatar img,
+.profile-popover__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-popover-anchor {
+  position: relative;
+}
+
+.profile-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: 50;
+  width: 300px;
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-elevated);
+  backdrop-filter: none;
+}
+
+.profile-popover__head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.profile-popover__avatar {
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  border-radius: 14px;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.profile-popover__head strong,
+.profile-popover__head span {
+  display: block;
+}
+
+.profile-popover__head strong {
+  color: var(--fg-body);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.profile-popover__head span,
+.profile-popover__stats dt,
+.profile-popover__footer span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.profile-popover__stats {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px 14px;
+  margin: 0;
+  padding: 12px 0;
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.profile-popover__stats dd {
+  margin: 0;
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-popover__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.profile-popover__footer span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-popover__footer button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: none;
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+
+.profile-popover__footer button:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: rgba(var(--accent-rgb), 0.14);
+  transform: translate(-1px, -1px);
+}
+
+.profile-popover__center-btn,
+.profile-popover__report-btn,
+.profile-popover__review-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 36px;
+  margin-top: 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: var(--radius-sm);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: none;
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+
+.profile-popover__report-btn {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+}
+
+.profile-popover__review-btn {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent);
+  color: #061014;
+}
+
+.profile-popover__center-btn:hover,
+.profile-popover__report-btn:hover,
+.profile-popover__review-btn:hover {
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: rgba(var(--accent-rgb), 0.2);
+  transform: translate(-1px, -1px);
+}
+
+.profile-popover__review-btn:hover {
+  background: var(--accent-hover, var(--accent));
+  color: #061014;
+}
+
+.project-card-shell {
+  position: relative;
+  display: grid;
+  min-width: 0;
+}
+
+.project-card-shell > .project-card {
+  width: 100%;
+  height: 100%;
+}
+
+.project-card__delete,
+.profile-page__delete-project {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 90, 95, 0.32);
+  border-radius: 10px;
+  background: rgba(255, 90, 95, 0.12);
+  color: #ff9a9d;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.project-card__delete {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 4;
+  width: 34px;
+  height: 34px;
+  box-shadow: var(--shadow-tight);
+}
+
+.profile-page__delete-project {
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  margin-left: auto;
+}
+
+.project-card__delete:hover,
+.profile-page__delete-project:hover {
+  border-color: rgba(255, 90, 95, 0.58);
+  background: rgba(255, 90, 95, 0.18);
+  transform: translateY(-1px);
+}
+
+.auth-gate,
+.auth-gate-tab {
+  position: fixed;
+  right: 18px;
+  z-index: 35;
+  backdrop-filter: none;
+}
+
+.auth-gate {
+  top: 92px;
+  width: min(348px, calc(100vw - 36px));
+  padding: 16px;
+  border-radius: 20px;
+}
+
+.auth-gate__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.auth-gate__head strong {
+  display: block;
+  color: var(--fg-body);
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.auth-gate__eyebrow {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.auth-gate__close {
+  display: grid;
+  place-items: center;
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+
+.auth-gate__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-bottom: 14px;
+}
+
+.auth-gate__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.16);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.09);
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.auth-gate__rows {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.auth-gate__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: 12px;
+  background: var(--bg-inset);
+}
+
+.auth-gate__row span,
+.auth-gate__footer span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.auth-gate__row strong {
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.auth-gate__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.auth-gate__cta,
+.auth-gate-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #07100b;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.auth-gate__cta {
+  flex: 0 0 auto;
+  height: 32px;
+  padding: 0 13px;
+}
+
+.auth-gate-tab {
+  top: 96px;
+  height: 36px;
+  padding: 0 14px;
+  box-shadow: var(--shadow-tight);
+}
+
+.page-motion {
+  animation: page-in 220ms ease both;
+}
+
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1180px) {
+  .creator-button {
+    display: none;
+  }
+
+  .member-button {
+    max-width: 148px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 900px) {
+  body {
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  .event-strip {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    height: auto;
+    min-height: 40px;
+    padding: 8px 40px 8px 12px;
+    white-space: normal;
+    line-height: 1.25;
+    font-size: 12px;
+  }
+
+  .event-strip__close {
+    top: 10px;
+    right: 10px;
+    transform: none;
+  }
+
+  .web-shell {
+    min-height: 100%;
+    overflow: auto;
+  }
+
+  .web-shell__stage {
+    height: auto;
+    min-height: calc(100svh - 40px);
+  }
+
+  .web-shell.event-strip-hidden .web-shell__stage {
+    min-height: 100svh;
+  }
+
+  .web-shell__content {
+    min-height: calc(100svh - 40px);
+    padding-left: 0;
+    padding-bottom: 78px;
+  }
+
+  .web-topbar {
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    padding: 12px 14px 8px;
+  }
+
+  .brand-lockup__tone {
+    display: none;
+  }
+
+  .web-topbar__actions {
+    flex: 0 0 100%;
+    width: 100%;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+
+  .creator-button,
+  .member-button {
+    display: none;
+  }
+
+  .profile-button span:last-child {
+    display: none;
+  }
+
+  .profile-popover {
+    width: min(288px, calc(100vw - 28px));
+  }
+
+  .floating-nav {
+    top: auto;
+    right: 14px;
+    bottom: 14px;
+    left: 14px;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: auto;
+    gap: 6px;
+    padding: 7px 8px;
+    border-radius: 18px;
+    transform: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    overscroll-behavior-x: contain;
+  }
+
+  .floating-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .floating-nav__create,
+  .floating-nav__button {
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;
+  }
+
+  .floating-nav__label,
+  .floating-nav__button.is-active .floating-nav__label {
+    display: none;
+  }
+
+  .floating-nav__button.has-divider {
+    margin-top: 0;
+  }
+
+  .floating-nav__button.has-divider::before {
+    display: none;
+  }
+
+  .auth-gate {
+    top: auto;
+    right: 12px;
+    bottom: 82px;
+    left: 12px;
+    width: auto;
+    padding: 14px;
+  }
+
+  .auth-gate-tab {
+    top: auto;
+    right: 14px;
+    bottom: 82px;
+  }
+}
+
+.web-shell.is-auth-view .web-shell__page {
+  overflow: hidden;
+}
+
+.web-shell.is-immersive-view .web-shell__page {
+  overflow: hidden;
+}
+
+.web-shell[data-theme="dark"] .event-strip {
+  background: rgba(var(--accent-rgb), 0.14);
+}
+
+.web-shell[data-theme="dark"] .event-strip__pill {
+  color: var(--accent);
+}
+
+.login-gate-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+}
+
+.login-gate-modal__scrim {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(6, 12, 9, 0.5);
+  backdrop-filter: none;
+  animation: backdrop-in 150ms ease both;
+}
+
+.login-gate-modal__panel {
+  position: relative;
+  z-index: 1;
+  width: min(420px, 100%);
+  padding: 28px 24px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-elevated);
+  animation: scale-in 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.login-gate-modal__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  margin-bottom: 12px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 1000;
+  box-shadow: none;
+}
+
+.login-gate-modal__panel h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 20px;
+  font-weight: 1000;
+  line-height: 1.18;
+}
+
+.login-gate-modal__panel p {
+  margin: 10px 0 0;
+  color: #557466;
+  font-weight: 800;
+  line-height: 1.6;
+}
+
+.login-gate-modal__actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.login-gate-modal__primary,
+.login-gate-modal__secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-weight: 1000;
+  font-size: 14px;
+  box-shadow: none;
+  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
+}
+
+.login-gate-modal__primary:hover,
+.login-gate-modal__secondary:hover {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  transform: translateY(-1px);
+}
+
+.login-gate-modal__primary {
+  background: var(--accent);
+  color: #061014;
+}
+
+.login-gate-modal__secondary {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--fg-body);
+}
+
+.session-replaced-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 145;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+}
+
+.session-replaced-modal__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(3, 9, 7, 0.64);
+  backdrop-filter: none;
+  animation: backdrop-in 150ms ease both;
+}
+
+.session-replaced-modal__panel {
+  position: relative;
+  z-index: 1;
+  width: min(440px, 100%);
+  animation: scale-in 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  padding: 30px 26px 24px;
+  border: 1px solid rgba(var(--accent-rgb), 0.26);
+  border-radius: var(--radius-lg);
+  background: var(--surface-elevated);
+  box-shadow: none;
+}
+
+.session-replaced-modal__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  margin-bottom: 12px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 1000;
+}
+
+.session-replaced-modal__panel h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 22px;
+  font-weight: 1000;
+  line-height: 1.2;
+}
+
+.session-replaced-modal__panel p {
+  margin: 12px 0 0;
+  color: #557466;
+  font-weight: 800;
+  line-height: 1.7;
+}
+
+.session-replaced-modal__actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.session-replaced-modal__primary,
+.session-replaced-modal__secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-weight: 1000;
+  font-size: 14px;
+  box-shadow: none;
+  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
+}
+
+.session-replaced-modal__primary:hover,
+.session-replaced-modal__secondary:hover {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  transform: translateY(-1px);
+}
+
+.session-replaced-modal__primary {
+  background: var(--accent);
+  color: #061014;
+}
+
+.session-replaced-modal__secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--fg-body);
+}
+
+.project-delete-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+}
+
+.project-delete-modal__scrim {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(3, 9, 7, 0.62);
+  backdrop-filter: none;
+}
+
+.project-delete-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 14px;
+  width: min(420px, 100%);
+  padding: 26px;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: var(--radius-md);
+  background: #101815;
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.project-delete-modal__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(255, 104, 104, 0.28);
+  border-radius: 50%;
+  background: rgba(255, 104, 104, 0.12);
+  color: #ff7777;
+  font-size: 18px;
+}
+
+.project-delete-modal__panel h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.project-delete-modal__panel p {
+  margin: -4px 0 0;
+  color: var(--fg-muted);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.65;
+}
+
+.project-delete-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+.project-delete-modal__secondary,
+.project-delete-modal__danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 16px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 800;
+  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
+}
+
+.project-delete-modal__secondary:disabled,
+.project-delete-modal__danger:disabled,
+.project-delete-modal__scrim:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.project-delete-modal__secondary {
+  border: 1px solid var(--border-subtle);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--fg-body);
+}
+
+.project-delete-modal__danger {
+  border: 1px solid rgba(255, 104, 104, 0.48);
+  background: #d94848;
+  color: #fff;
+}
+
+.project-delete-modal__secondary:not(:disabled):hover,
+.project-delete-modal__danger:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+/* PDR UI refactor: quieter shell, stable core navigation, touch-safe mobile chrome. */
+.web-shell {
+  background: var(--page-bg);
+}
+
+.event-strip {
+  justify-content: flex-start;
+  height: 30px;
+  padding: 0 18px;
+  gap: 10px;
+  border-bottom-color: var(--border-weak);
+  background: rgba(226, 247, 231, 0.86);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.event-strip__pill {
+  padding: 3px 9px;
+}
+
+.event-strip__close {
+  position: static;
+  width: auto;
+  height: 24px;
+  margin-left: auto;
+  padding: 0 10px;
+  transform: none;
+  border: 1px solid rgba(35, 96, 57, 0.14);
+  background: rgba(255, 255, 255, 0.66);
+  color: #236039;
+}
+
+.web-shell__stage {
+  height: calc(100svh - 30px);
+}
+
+.web-topbar {
+  flex: 0 0 56px;
+  padding: 10px 22px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+
+.floating-nav {
+  left: 20px;
+  width: 58px;
+  padding: 7px;
+  gap: 4px;
+  border-radius: 18px;
+}
+
+.floating-nav__item {
+  width: 44px;
+}
+
+.floating-nav__button {
+  width: 44px;
+  height: 44px;
+}
+
+.floating-nav__button.is-active .floating-nav__label {
+  opacity: 0;
+  transform: translate(-6px, -50%);
+}
+
+.floating-nav__button:hover .floating-nav__label,
+.floating-nav__button:focus-visible .floating-nav__label,
+.floating-nav__button.is-active:hover .floating-nav__label,
+.floating-nav__button.is-active:focus-visible .floating-nav__label {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.creator-button,
+.member-button,
+.profile-button,
+.icon-button,
+.theme-toggle {
+  min-height: 40px;
+}
+
+.icon-button,
+.theme-toggle {
+  width: 40px;
+}
+
+@media (max-width: 900px) {
+  .event-strip {
+    display: none;
+  }
+
+  .web-shell__stage,
+  .web-shell.event-strip-hidden .web-shell__stage {
+    height: auto;
+    min-height: 100svh;
+  }
+
+  .web-shell__content {
+    min-height: 100svh;
+    padding-bottom: 78px;
+  }
+
+  .web-topbar {
+    position: sticky;
+    top: 0;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 12px 14px;
+  }
+
+  .web-topbar__actions {
+    flex: 0 1 auto;
+    width: auto;
+    gap: 8px;
+  }
+
+  .brand-lockup__name {
+    max-width: 110px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon-button,
+  .theme-toggle,
+  .profile-button {
+    min-width: 44px;
+    height: 44px;
+  }
+
+  .theme-switcher {
+    flex: 0 0 auto;
+    height: 44px;
+    padding: 3px;
+  }
+
+  .theme-switcher .theme-toggle.theme-switcher__option {
+    width: 38px;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: 0;
+  }
+
+  .theme-switcher__option span {
+    display: none;
+  }
+
+  .floating-nav {
+    right: 12px;
+    bottom: 10px;
+    left: 12px;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    width: auto;
+    gap: 4px;
+    padding: 7px;
+    overflow: visible;
+  }
+
+  .floating-nav__button {
+    flex-direction: column;
+    width: 100%;
+    height: 52px;
+    gap: 3px;
+    border-radius: 14px;
+    font-size: 18px;
+  }
+
+  .floating-nav__item {
+    width: 100%;
+  }
+
+  .floating-nav__submenu {
+    top: auto;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    min-width: 108px;
+    transform: translate(-50%, 6px);
+  }
+
+  .floating-nav__item.has-children.is-submenu-open .floating-nav__submenu {
+    transform: translate(-50%, 0);
+  }
+
+  .floating-nav__subbutton {
+    justify-content: center;
+    height: 34px;
+    padding: 0 9px;
+    font-size: 11px;
+  }
+
+  .floating-nav__label,
+  .floating-nav__button.is-active .floating-nav__label {
+    position: static;
+    display: block;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    padding: 0;
+    border: 0;
+    transform: none;
+    background: transparent;
+    box-shadow: none;
+    color: currentColor;
+    font-size: 10px;
+    line-height: 1.1;
+    opacity: 1;
+  }
+
+  .floating-nav__item.has-children.is-submenu-open .floating-nav__button .floating-nav__label {
+    opacity: 1;
+    transform: none;
+  }
+
+  .floating-nav__button:hover .floating-nav__label,
+  .floating-nav__button:focus-visible .floating-nav__label,
+  .floating-nav__button.is-active:hover .floating-nav__label,
+  .floating-nav__button.is-active:focus-visible .floating-nav__label {
+    transform: none;
+  }
+}
+
+@media (max-width: 900px) {
+  html,
+  body,
+  #root,
+  .web-shell {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  .web-shell__content {
+    width: 100%;
+    padding-left: 0;
+  }
+
+  .web-shell__page {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+.feature-access-gate {
+  position: relative;
+  min-height: inherit;
+  isolation: isolate;
+}
+
+.feature-access-gate__content {
+  min-height: inherit;
+  filter: blur(14px) saturate(0.72);
+  transform: scale(1.01);
+  pointer-events: none;
+  user-select: none;
+}
+
+.feature-access-gate__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(5, 9, 8, 0.68);
+  backdrop-filter: blur(2px);
+}
+
+.feature-access-gate__panel {
+  width: min(430px, calc(100vw - 40px));
+  padding: 28px 26px 30px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)),
+    var(--bg-panel);
+  color: var(--fg-body);
+  text-align: center;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+    0 24px 80px rgba(0, 0, 0, 0.44);
+}
+
+.feature-access-gate__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  margin-bottom: 14px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 1000;
+}
+
+.feature-access-gate__panel h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 24px;
+  font-weight: 1000;
+  line-height: 1.18;
+}
+
+.feature-access-gate__panel p {
+  margin: 12px 0 0;
+  color: var(--fg-muted);
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.7;
+}
diff --git a/src/styles/components/motion.css b/src/styles/components/motion.css
new file mode 100644
index 0000000..b94c26b
--- /dev/null
+++ b/src/styles/components/motion.css
@@ -0,0 +1,69 @@
+/* Global motion utilities and shared animations */
+
+/* Stagger entrance for list/grid children */
+@keyframes list-item-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Stagger utility: apply to parent, children get delayed entrance */
+.motion-stagger > * {
+  animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.motion-stagger > *:nth-child(1) { animation-delay: 0ms; }
+.motion-stagger > *:nth-child(2) { animation-delay: 40ms; }
+.motion-stagger > *:nth-child(3) { animation-delay: 80ms; }
+.motion-stagger > *:nth-child(4) { animation-delay: 120ms; }
+.motion-stagger > *:nth-child(5) { animation-delay: 160ms; }
+.motion-stagger > *:nth-child(6) { animation-delay: 200ms; }
+.motion-stagger > *:nth-child(7) { animation-delay: 240ms; }
+.motion-stagger > *:nth-child(8) { animation-delay: 280ms; }
+.motion-stagger > *:nth-child(9) { animation-delay: 320ms; }
+.motion-stagger > *:nth-child(10) { animation-delay: 360ms; }
+.motion-stagger > *:nth-child(n+11) { animation-delay: 400ms; }
+
+/* Global reduced-motion override */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/src/styles/components/page-transition.css b/src/styles/components/page-transition.css
new file mode 100644
index 0000000..8447dbf
--- /dev/null
+++ b/src/styles/components/page-transition.css
@@ -0,0 +1,17 @@
+.page-transition {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  animation: page-fade-in 150ms ease-out both;
+}
+
+@keyframes page-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/styles/components/primitives.css b/src/styles/components/primitives.css
new file mode 100644
index 0000000..5e31db7
--- /dev/null
+++ b/src/styles/components/primitives.css
@@ -0,0 +1,111 @@
+/* Shared primitives for new CSS. Keep legacy component debt in legacy-components.css. */
+.ui-surface {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface-panel);
+  box-shadow: var(--shadow-panel);
+}
+
+.ui-muted {
+  color: var(--text-muted);
+}
+
+.ui-focus-ring:focus-visible {
+  outline: 2px solid rgba(var(--accent-rgb), 0.48);
+  outline-offset: 2px;
+}
+
+.page-loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  padding: 32px;
+}
+
+.page-loading-skeleton__bar {
+  width: 40%;
+  height: 24px;
+  border-radius: 8px;
+  background: var(--surface-elevated, #222);
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+
+.page-loading-skeleton__row {
+  display: flex;
+  gap: 16px;
+}
+
+.page-loading-skeleton__card {
+  flex: 1;
+  height: 140px;
+  border-radius: 14px;
+  background: var(--surface-elevated, #222);
+  animation: skeleton-shimmer 1.4s ease infinite;
+  animation-delay: 0.15s;
+}
+
+.page-loading-skeleton__block {
+  width: 100%;
+  height: 200px;
+  border-radius: 14px;
+  background: var(--surface-elevated, #222);
+  animation: skeleton-shimmer 1.4s ease infinite;
+  animation-delay: 0.3s;
+}
+
+@keyframes skeleton-shimmer {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+.page-transition-wrap {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.page-motion--exit {
+  animation: page-out 180ms ease both;
+  pointer-events: none;
+}
+
+.page-motion--exit .page-motion {
+  animation: none;
+}
+
+@keyframes page-out {
+  to { opacity: 0; transform: translateY(-6px); }
+}
+
+.page-loading-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  gap: 12px;
+}
+
+.page-loading-center__text {
+  font: 400 13px/1 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
+  color: var(--text-muted, rgba(255,255,255,.45));
+  letter-spacing: 0.02em;
+}
+
+.page-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border-subtle, #e5e5e5);
+  border-top-color: var(--accent, #0d9488);
+  border-radius: 50%;
+  animation: page-spin 0.7s linear infinite;
+}
+
+@keyframes page-spin {
+  to { transform: rotate(360deg); }
+}
diff --git a/src/styles/components/recharge-modal.css b/src/styles/components/recharge-modal.css
new file mode 100644
index 0000000..94e1bdc
--- /dev/null
+++ b/src/styles/components/recharge-modal.css
@@ -0,0 +1,399 @@
+/* === Recharge Modal === */
+.recharge-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.recharge-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(0 0 0 / 72%);
+  cursor: pointer;
+  backdrop-filter: blur(5px);
+}
+
+@keyframes rechargeModalIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.recharge-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 20px;
+  width: min(1300px, 100%);
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%));
+  border-radius: 20px;
+  background: var(--bg-surface, #171a1f);
+  color: var(--fg-body, #edf2f7);
+  padding: 28px;
+  box-shadow: 0 28px 80px rgb(0 0 0 / 44%);
+  animation: rechargeModalIn 180ms ease both;
+  scrollbar-color: rgba(var(--accent-rgb), 0.36) transparent;
+}
+
+.recharge-modal__header {
+  position: relative;
+  display: block;
+  padding: 0 168px 18px;
+  border-bottom: 1px solid var(--border-weak, rgb(255 255 255 / 7%));
+  text-align: center;
+}
+
+.recharge-modal__header > div {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.recharge-modal__eyebrow {
+  color: var(--accent, #34d399);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.recharge-modal__header h2 {
+  margin: 4px 0 6px;
+  font-size: 22px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.recharge-modal__header p {
+  margin: 0;
+  color: var(--fg-muted, #9ba7b7);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.recharge-modal__balance {
+  position: absolute;
+  top: 8px;
+  right: 48px;
+  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--fg-body, #edf2f7);
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.recharge-modal__close {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--fg-muted, #9ba7b7);
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.recharge-modal__close:hover {
+  border-color: var(--border-subtle, rgb(255 255 255 / 10%));
+  background: var(--bg-hover, rgb(255 255 255 / 7%));
+  color: var(--fg-body, #edf2f7);
+}
+
+.recharge-modal__promo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
+  border-radius: 14px;
+  background:
+    linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06)),
+    var(--bg-elevated, #20242b);
+  color: var(--fg-muted, #9ba7b7);
+  padding: 12px 16px;
+  font-size: 13px;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.recharge-modal__promo strong {
+  color: var(--accent, #34d399);
+  font-weight: 950;
+  white-space: nowrap;
+}
+
+.recharge-modal__audience-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%));
+  border-radius: 12px;
+  background: var(--bg-inset, rgb(0 0 0 / 18%));
+  padding: 6px;
+}
+
+.recharge-modal__audience-tabs button {
+  min-height: 38px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--fg-muted, #9ba7b7);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.recharge-modal__audience-tabs button:hover {
+  border-color: var(--border-subtle, rgb(255 255 255 / 10%));
+  background: var(--bg-hover, rgb(255 255 255 / 7%));
+  color: var(--fg-body, #edf2f7);
+}
+
+.recharge-modal__audience-tabs button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent, #34d399);
+}
+
+.recharge-modal__grid {
+  display: grid;
+  gap: 14px;
+}
+
+.recharge-modal__grid[data-audience="personal"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.recharge-modal__grid[data-audience="enterprise"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.recharge-modal__card {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 390px;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%));
+  border-radius: 14px;
+  background: var(--bg-elevated, #20242b);
+  padding: 18px;
+}
+
+.recharge-modal__card.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.55);
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.16);
+}
+
+.recharge-modal__badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-radius: 999px;
+  background: var(--accent, #34d399);
+  color: #07110d;
+  padding: 4px 9px;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.recharge-modal__card-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-right: 84px;
+}
+
+.recharge-modal__card-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  min-width: 42px;
+  place-items: center;
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent, #34d399);
+  font-size: 18px;
+}
+
+.recharge-modal__card h3 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.recharge-modal__card-head span:not(.recharge-modal__card-icon) {
+  color: var(--fg-muted, #9ba7b7);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.recharge-modal__price strong {
+  color: var(--fg-body, #edf2f7);
+  font-size: 25px;
+  font-weight: 950;
+}
+
+.recharge-modal__period {
+  width: fit-content;
+  border: 1px solid rgba(var(--accent-rgb), 0.26);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent, #34d399);
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.recharge-modal__grant {
+  margin: 0;
+  border-radius: 10px;
+  background: var(--bg-inset, rgb(0 0 0 / 18%));
+  color: var(--fg-muted, #9ba7b7);
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.recharge-modal__diff-label {
+  width: fit-content;
+  color: var(--fg-body, #edf2f7);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.recharge-modal__features {
+  display: grid;
+  gap: 8px;
+  height: 92px;
+  margin: 0;
+  padding: 0;
+  padding-right: 6px;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  scrollbar-gutter: stable;
+}
+
+.recharge-modal__features::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.recharge-modal__features li {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr);
+  gap: 8px;
+  color: var(--fg-muted, #9ba7b7);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.recharge-modal__features .anticon {
+  margin-top: 2px;
+  color: var(--accent, #34d399);
+  font-size: 12px;
+}
+
+.recharge-modal__buy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  min-height: 38px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--accent, #34d399);
+  color: #07110d;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.recharge-modal__buy.is-selected {
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 10px 24px rgba(var(--accent-rgb), 0.18);
+}
+
+.recharge-modal__buy:hover {
+  filter: brightness(1.05);
+}
+
+.recharge-modal__rules {
+  border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%));
+  border-radius: 14px;
+  background: var(--bg-elevated, #20242b);
+  padding: 16px 18px;
+}
+
+.recharge-modal__rules h3 {
+  margin: 0 0 10px;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.recharge-modal__rules ol {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 20px;
+  color: var(--fg-muted, #9ba7b7);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+@media (max-width: 980px) {
+  .recharge-modal__grid[data-audience="personal"],
+  .recharge-modal__grid[data-audience="enterprise"] {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .recharge-modal {
+    padding: 12px;
+  }
+
+  .recharge-modal__panel {
+    padding: 18px;
+  }
+
+  .recharge-modal__header {
+    padding: 0 40px 16px;
+  }
+
+  .recharge-modal__balance {
+    position: static;
+    display: inline-flex;
+    margin-top: 12px;
+  }
+
+  .recharge-modal__promo {
+    align-items: flex-start;
+    flex-direction: column;
+    text-align: left;
+  }
+}
diff --git a/src/styles/components/skeleton.css b/src/styles/components/skeleton.css
new file mode 100644
index 0000000..b4f611b
--- /dev/null
+++ b/src/styles/components/skeleton.css
@@ -0,0 +1,56 @@
+@keyframes skeleton-shimmer {
+  0% { background-position: 120% 0; }
+  100% { background-position: -120% 0; }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.04),
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.04)
+  );
+  background-size: 220% 100%;
+  animation: skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+.skeleton-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border-radius: var(--radius-lg, 14px);
+  background: var(--bg-elevated, #222);
+}
+
+.skeleton-card__thumb {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 8px;
+}
+
+.skeleton-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.skeleton-card__title {
+  width: 60%;
+  height: 14px;
+  border-radius: 4px;
+}
+
+.skeleton-card__desc {
+  width: 85%;
+  height: 12px;
+  border-radius: 4px;
+}
+
+.skeleton-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
diff --git a/src/styles/components/toast.css b/src/styles/components/toast.css
new file mode 100644
index 0000000..18d0ec5
--- /dev/null
+++ b/src/styles/components/toast.css
@@ -0,0 +1,108 @@
+.app-toast-container {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+  max-width: min(420px, calc(100vw - 32px));
+}
+
+.app-toast {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(22, 22, 22, 0.95);
+  backdrop-filter: blur(8px);
+  font-size: 13px;
+  color: var(--text-primary, #e5e5e5);
+  pointer-events: auto;
+  animation: toast-in 220ms ease-out;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.app-toast--success {
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+.app-toast--error {
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.app-toast__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.app-toast--success .app-toast__icon {
+  background: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+}
+
+.app-toast--error .app-toast__icon {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+
+.app-toast--info .app-toast__icon {
+  background: rgba(99, 102, 241, 0.2);
+  color: #818cf8;
+}
+
+.app-toast__msg {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.app-toast__retry {
+  flex-shrink: 0;
+  padding: 3px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-primary, #e5e5e5);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.app-toast__retry:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.app-toast__close {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-tertiary, #888);
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.app-toast__close:hover {
+  color: var(--text-primary, #e5e5e5);
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..c6cc93d
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,35 @@
+@import "./tokens.css";
+@import "./base/reset.css";
+@import "./shell/app-shell.css";
+@import "./components/primitives.css";
+@import "./components/legacy-components.css";
+@import "./pages/home.css";
+@import "./pages/welcome-splash.css";
+@import "./pages/workbench.css";
+@import "./pages/ecommerce.css";
+@import "./pages/ecommerce-video.css";
+@import "./pages/community.css";
+@import "./pages/assets.css";
+@import "./pages/more.css";
+@import "./pages/avatar-console.css";
+@import "./pages/more-tools.css";
+@import "./pages/studio-layout.css";
+@import "./pages/image-workbench.css";
+@import "./pages/subtitle-removal.css";
+@import "./pages/size-template.css";
+@import "./pages/script-tokens.css";
+@import "./pages/profile.css";
+@import "./pages/canvas.css";
+@import "./pages/agent.css";
+@import "./pages/compliance.css";
+@import "./pages/provider-health.css";
+@import "./pages/legacy-pages.css";
+@import "./components/recharge-modal.css";
+@import "./components/dropzone.css";
+@import "./components/skeleton.css";
+@import "./components/toast.css";
+@import "./components/empty-state.css";
+@import "./components/page-transition.css";
+@import "./components/motion.css";
+@import "./themes/dark-green.css";
+@import "./pages/local-theme-parity.css";
diff --git a/src/styles/pages.css b/src/styles/pages.css
new file mode 100644
index 0000000..0854498
--- /dev/null
+++ b/src/styles/pages.css
@@ -0,0 +1,2 @@
+/* Compatibility shim: page styles are layered through index.css. */
+@import "./index.css";
diff --git a/src/styles/pages/agent.css b/src/styles/pages/agent.css
new file mode 100644
index 0000000..7da64da
--- /dev/null
+++ b/src/styles/pages/agent.css
@@ -0,0 +1 @@
+/* Agent page rules move here as they are retired from legacy-pages.css. */
diff --git a/src/styles/pages/assets.css b/src/styles/pages/assets.css
new file mode 100644
index 0000000..9c3fd3e
--- /dev/null
+++ b/src/styles/pages/assets.css
@@ -0,0 +1,211 @@
+/* Asset library page rules move here as they are retired from legacy-pages.css. */
+
+.asset-context-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 140px;
+  padding: 4px;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.asset-context-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #ef4444;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.asset-context-menu button:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.asset-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 140;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  color: var(--fg-body);
+}
+
+.asset-preview-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.72);
+  cursor: zoom-out;
+  backdrop-filter: none;
+  animation: backdrop-in 150ms ease both;
+}
+
+.asset-preview-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(1120px, calc(100vw - 64px));
+  animation: scale-in 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  max-height: min(820px, calc(100vh - 64px));
+  overflow: hidden;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
+  box-shadow: none;
+}
+
+.asset-preview-modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 58px;
+  padding: 12px 14px 12px 18px;
+  border-bottom: 1px solid var(--border-weak);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.asset-preview-modal__head > div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.asset-preview-modal__head strong,
+.asset-preview-modal__head span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.asset-preview-modal__head strong {
+  color: var(--fg-body);
+  font-size: 15px;
+  font-weight: 1000;
+}
+
+.asset-preview-modal__head span {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.asset-preview-modal__close {
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.asset-preview-modal__close:hover {
+  border-color: rgba(var(--accent-rgb), 0.44);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.asset-preview-modal__body {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  padding: 20px;
+  background: var(--bg-shell);
+}
+
+.asset-preview-modal__body img,
+.asset-preview-modal__body video {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: calc(100vh - 210px);
+  border-radius: 12px;
+  object-fit: contain;
+  box-shadow: none;
+}
+
+.asset-preview-modal__empty {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  color: var(--fg-muted);
+  text-align: center;
+}
+
+.asset-preview-modal__empty .anticon {
+  color: var(--accent);
+  font-size: 32px;
+}
+
+.asset-preview-modal__empty strong {
+  color: var(--fg-body);
+  font-size: 15px;
+}
+
+.asset-preview-modal__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--border-weak);
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.asset-preview-modal__meta span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.asset-card--desktop {
+  cursor: zoom-in;
+}
+
+@media (max-width: 720px) {
+  .asset-preview-modal {
+    padding: 14px;
+  }
+
+  .asset-preview-modal__panel {
+    width: calc(100vw - 28px);
+    max-height: calc(100vh - 28px);
+    border-radius: 14px;
+  }
+
+  .asset-preview-modal__body {
+    padding: 12px;
+  }
+
+  .asset-preview-modal__body img,
+  .asset-preview-modal__body video {
+    max-height: calc(100vh - 190px);
+  }
+}
diff --git a/src/styles/pages/avatar-console.css b/src/styles/pages/avatar-console.css
new file mode 100644
index 0000000..c3e4837
--- /dev/null
+++ b/src/styles/pages/avatar-console.css
@@ -0,0 +1,4213 @@
+.avatar-console-page {
+  --avatar-console-ink: var(--fg-body);
+  --avatar-console-muted: var(--fg-muted);
+  --avatar-console-faint: var(--bg-inset);
+  --avatar-console-border: var(--border-weak);
+  --avatar-console-purple: var(--accent);
+  --avatar-console-purple-soft: var(--accent-muted, rgba(var(--accent-rgb), 0.13));
+  --avatar-console-panel: var(--bg-surface, var(--bg-panel));
+  --avatar-console-panel-strong: var(--bg-elevated);
+  --avatar-console-inset: var(--bg-inset);
+  --avatar-console-hover: var(--bg-hover);
+  --avatar-console-line: var(--border-subtle);
+  display: grid;
+  grid-template-columns: 228px minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-base);
+  color: var(--avatar-console-ink);
+  font-family: var(--font-sans);
+}
+
+.avatar-console-sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  padding: 24px 16px 28px;
+  border-right: 1px solid var(--avatar-console-border);
+  background: var(--avatar-console-panel);
+}
+
+.avatar-console-brand,
+.avatar-console-create,
+.avatar-console-nav button,
+.avatar-console-api,
+.avatar-console-titlebar button,
+.avatar-console-explore-hero button,
+.avatar-console-video-hero button,
+.avatar-console-chat-hero button,
+.avatar-console-live-hero button,
+.avatar-console-list-head button,
+.avatar-console-filter-line button,
+.avatar-console-catalog-filters button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-console-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 4px;
+  color: var(--avatar-console-purple);
+  text-align: left;
+}
+
+.avatar-console-brand__mark {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  color: var(--avatar-console-purple);
+  font-size: 20px;
+  line-height: 1;
+}
+
+.avatar-console-brand strong {
+  font-size: 17px;
+  font-weight: 950;
+}
+
+.avatar-console-create {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 34px;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  box-shadow: none;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.avatar-console-nav-group {
+  display: grid;
+  gap: 8px;
+}
+
+.avatar-console-nav-group > span {
+  padding: 0 8px;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.avatar-console-nav {
+  display: grid;
+  gap: 4px;
+}
+
+.avatar-console-nav button,
+.avatar-console-api {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  color: var(--avatar-console-ink);
+  font-size: 15px;
+  font-weight: 850;
+  text-align: left;
+  transition: border-color var(--transition-fast, 140ms ease), background var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
+}
+
+.avatar-console-nav button .anticon,
+.avatar-console-api .anticon {
+  color: var(--avatar-console-muted);
+  font-size: 15px;
+}
+
+.avatar-console-nav button:hover,
+.avatar-console-nav button.is-selected {
+  border-color: var(--avatar-console-line);
+  background: var(--avatar-console-hover);
+  color: var(--accent);
+}
+
+.avatar-console-nav button:hover .anticon,
+.avatar-console-nav button.is-selected .anticon {
+  color: var(--accent);
+}
+
+.avatar-console-api {
+  margin-top: auto;
+  align-self: stretch;
+  justify-content: center;
+  min-height: 36px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+}
+
+.avatar-console-main {
+  position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 32px;
+  min-width: 0;
+  min-height: 0;
+  background: var(--bg-base);
+}
+
+.avatar-console-scroll {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px 32px 72px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.34) transparent;
+}
+
+.avatar-console-view {
+  min-width: 0;
+}
+
+.avatar-console-view h1,
+.avatar-console-view h2,
+.avatar-console-view p {
+  margin: 0;
+}
+
+.avatar-console-explore-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.48fr);
+  gap: 28px;
+  min-height: 264px;
+  padding: 46px 36px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel-strong);
+  color: var(--avatar-console-ink);
+  box-shadow: none;
+}
+
+.avatar-console-explore-hero h1,
+.avatar-console-video-hero h1,
+.avatar-console-chat-hero h1,
+.avatar-console-live-hero h1 {
+  color: inherit;
+  font-size: 30px;
+  font-weight: 950;
+  letter-spacing: 0;
+}
+
+.avatar-console-explore-hero p,
+.avatar-console-video-hero p,
+.avatar-console-chat-hero p,
+.avatar-console-live-hero p {
+  margin-top: 12px;
+  color: var(--avatar-console-muted);
+  font-size: 16px;
+  opacity: 1;
+}
+
+.avatar-console-explore-hero button,
+.avatar-console-video-hero button,
+.avatar-console-chat-hero button,
+.avatar-console-live-hero button,
+.avatar-console-titlebar > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 34px;
+  margin-top: 66px;
+  padding: 0 16px;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-purple);
+  color: var(--dg-button-text, rgb(255 255 255));
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-console-hero-person {
+  position: relative;
+  min-height: 190px;
+}
+
+.avatar-console-hero-person .avatar-console-portrait {
+  position: absolute;
+  right: 12px;
+  bottom: -72px;
+}
+
+.avatar-console-hero-bubble {
+  position: absolute;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: 999px;
+  box-shadow: var(--shadow-tight);
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.avatar-console-hero-bubble--yellow {
+  top: 34px;
+  right: 108px;
+  padding: 10px 18px;
+  background: rgba(216, 176, 75, 0.18);
+  color: var(--fg-body);
+  transform: rotate(10deg);
+}
+
+.avatar-console-hero-bubble--white {
+  top: 82px;
+  right: 84px;
+  padding: 11px 16px;
+  background: var(--avatar-console-panel);
+  color: var(--avatar-console-ink);
+}
+
+.avatar-console-hero-bubble--blue {
+  top: 132px;
+  right: 112px;
+  padding: 10px 18px;
+  background: rgba(39, 188, 205, 0.18);
+  color: var(--fg-body);
+}
+
+.avatar-console-catalog-head,
+.avatar-console-list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin: 32px 0 18px;
+}
+
+.avatar-console-catalog-head.is-compact {
+  margin-top: 26px;
+}
+
+.avatar-console-catalog-head > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.avatar-console-catalog-head h2,
+.avatar-console-list-head h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--avatar-console-ink);
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.avatar-console-catalog-head h2 span {
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.avatar-console-catalog-head > div:first-child button {
+  color: var(--avatar-console-muted);
+  font-size: 15px;
+}
+
+.avatar-console-catalog-filters,
+.avatar-console-list-head > div,
+.avatar-console-filter-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar-console-catalog-filters button,
+.avatar-console-filter-line button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--avatar-console-muted);
+  font-size: 14px;
+}
+
+.avatar-console-catalog-filters label,
+.avatar-console-list-head label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 220px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--fg-soft);
+}
+
+.avatar-console-catalog-filters input,
+.avatar-console-list-head input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--avatar-console-ink);
+  font: inherit;
+}
+
+.avatar-console-mosaic {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(120px, 1fr));
+  gap: 6px;
+}
+
+.avatar-console-mosaic-card {
+  position: relative;
+  overflow: hidden;
+  min-height: 236px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-faint);
+}
+
+.avatar-console-mosaic-card > div:last-child:not(.avatar-console-portrait) {
+  position: absolute;
+  inset: auto 0 0;
+  display: grid;
+  gap: 2px;
+  padding: 12px;
+  background: rgb(8 12 11 / 72%);
+  color: rgb(255 255 255);
+}
+
+.avatar-console-mosaic-card strong {
+  font-size: 15px;
+}
+
+.avatar-console-mosaic-card span {
+  font-size: 12px;
+  opacity: 0.82;
+}
+
+.avatar-console-titlebar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.avatar-console-titlebar h1 {
+  color: var(--avatar-console-ink);
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.avatar-console-titlebar nav {
+  display: flex;
+  gap: 28px;
+  margin-top: 28px;
+}
+
+.avatar-console-titlebar nav button {
+  color: var(--avatar-console-muted);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.avatar-console-titlebar nav button.is-current {
+  color: var(--accent);
+  font-weight: 900;
+}
+
+.avatar-console-titlebar > button {
+  margin-top: 0;
+  min-height: 34px;
+  padding: 0 18px;
+}
+
+.avatar-console-filter-line {
+  justify-content: flex-end;
+  margin: 0 0 18px;
+}
+
+.avatar-console-filter-line--voices {
+  margin-top: -8px;
+  margin-bottom: 16px;
+}
+
+.avatar-console-empty-state {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: calc(100svh - 260px);
+  color: var(--avatar-console-muted);
+  text-align: center;
+}
+
+.avatar-console-empty-state > div {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 72px;
+  height: 72px;
+  margin-bottom: 14px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-md);
+  background: var(--avatar-console-panel);
+  color: var(--accent);
+  box-shadow: var(--shadow-tight);
+  transform: rotate(18deg);
+}
+
+.avatar-console-empty-state > div::after {
+  position: absolute;
+  right: 9px;
+  bottom: -12px;
+  width: 54px;
+  height: 12px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: 50%;
+  background: var(--avatar-console-inset);
+  content: "";
+}
+
+.avatar-console-empty-state .anticon {
+  font-size: 26px;
+}
+
+.avatar-console-empty-state strong {
+  color: var(--avatar-console-ink);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.avatar-console-empty-state span {
+  margin-top: 8px;
+  font-size: 13px;
+}
+
+.avatar-console-empty-state--avatar {
+  min-height: calc(100svh - 520px);
+}
+
+.avatar-console-empty-state--voice {
+  min-height: calc(100svh - 270px);
+}
+
+.avatar-console-voice-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(190px, 1fr));
+  gap: 16px;
+}
+
+.avatar-console-voice-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  min-height: 68px;
+  padding: 10px 14px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-panel);
+  box-shadow: none;
+  transition:
+    border-color 140ms ease,
+    background 140ms ease,
+    transform 140ms ease;
+}
+
+.avatar-console-voice-card:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-console-panel-strong);
+  transform: translateY(-1px);
+}
+
+.avatar-console-voice-card > span {
+  display: block;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+}
+
+.avatar-console-voice-card > button {
+  position: absolute;
+  left: 48px;
+  bottom: 17px;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--avatar-console-purple);
+  color: rgb(255 255 255);
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.avatar-console-voice-card div {
+  min-width: 0;
+}
+
+.avatar-console-voice-card strong {
+  color: var(--avatar-console-ink);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.avatar-console-voice-card em {
+  margin-left: 8px;
+  padding: 1px 7px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.avatar-console-voice-card p {
+  margin-top: 5px;
+  overflow: hidden;
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-voice-clone {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  background: rgb(0 0 0 / 58%);
+}
+
+.avatar-voice-clone__panel {
+  display: grid;
+  grid-template-rows: 64px minmax(0, 1fr) 64px;
+  width: min(960px, calc(100vw - 56px));
+  height: min(620px, calc(100vh - 56px));
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  box-shadow: var(--shadow-panel);
+}
+
+.avatar-voice-clone__head,
+.avatar-voice-clone__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  min-width: 0;
+  padding: 0 28px;
+  border-bottom: 1px solid var(--avatar-console-border);
+}
+
+.avatar-voice-clone__head h2 {
+  margin: 0;
+  color: var(--avatar-console-ink);
+  font-size: 17px;
+  font-weight: 950;
+}
+
+.avatar-voice-clone__head button,
+.avatar-voice-clone__foot button,
+.avatar-voice-clone__select button,
+.avatar-voice-clone__refresh,
+.avatar-voice-clone__record-button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-voice-clone__head button {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  color: var(--avatar-console-muted);
+  font-size: 18px;
+}
+
+.avatar-voice-clone__body {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
+  min-height: 0;
+}
+
+.avatar-voice-clone__form {
+  display: grid;
+  align-content: start;
+  gap: 20px;
+  min-width: 0;
+  padding: 26px 28px;
+  overflow: auto;
+  background: var(--avatar-console-panel);
+}
+
+.avatar-voice-clone__form fieldset {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.avatar-voice-clone__form legend,
+.avatar-voice-clone__input > span,
+.avatar-voice-clone__select > span,
+.avatar-voice-clone__steps strong {
+  display: block;
+  width: 100%;
+  margin-bottom: 9px;
+  color: var(--avatar-console-ink);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.avatar-voice-clone__form fieldset label,
+.avatar-voice-clone__foot label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--avatar-console-muted);
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.avatar-voice-clone input[type="radio"],
+.avatar-voice-clone input[type="checkbox"] {
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  border: 1px solid var(--avatar-console-line);
+  background: var(--avatar-console-inset);
+  appearance: none;
+}
+
+.avatar-voice-clone input[type="radio"] {
+  border-radius: 50%;
+}
+
+.avatar-voice-clone input[type="checkbox"] {
+  border-radius: 4px;
+}
+
+.avatar-voice-clone input[type="radio"]::after,
+.avatar-voice-clone input[type="checkbox"]::after {
+  display: block;
+  content: "";
+}
+
+.avatar-voice-clone input[type="radio"]:checked {
+  border-color: var(--accent);
+}
+
+.avatar-voice-clone input[type="radio"]:checked::after {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.avatar-voice-clone input[type="checkbox"]:checked {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.avatar-voice-clone input[type="checkbox"]:checked::after {
+  width: 6px;
+  height: 9px;
+  border: solid rgb(255 255 255);
+  border-width: 0 2px 2px 0;
+  transform: rotate(42deg);
+}
+
+.avatar-voice-clone__input,
+.avatar-voice-clone__select {
+  display: block;
+  min-width: 0;
+}
+
+.avatar-voice-clone__input,
+.avatar-voice-clone__select {
+  position: relative;
+}
+
+.avatar-voice-clone__input input,
+.avatar-voice-clone__select button {
+  width: 100%;
+  min-height: 34px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-ink);
+  font: inherit;
+  font-size: 13px;
+}
+
+.avatar-voice-clone__input input {
+  padding: 0 58px 0 12px;
+  outline: 0;
+}
+
+.avatar-voice-clone__input input::placeholder {
+  color: var(--fg-soft);
+}
+
+.avatar-voice-clone__input em {
+  position: absolute;
+  right: 12px;
+  bottom: 9px;
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.avatar-voice-clone__select button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+}
+
+.avatar-voice-clone__select > button[aria-expanded="true"] {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.24);
+}
+
+.avatar-voice-clone__language-list {
+  position: absolute;
+  top: calc(100% + 5px);
+  right: 0;
+  left: 0;
+  z-index: 4;
+  display: grid;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-panel-strong);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-voice-clone__language-list button {
+  justify-content: flex-start;
+  min-height: 32px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--avatar-console-ink);
+  font-size: 15px;
+  font-weight: 780;
+}
+
+.avatar-voice-clone__language-list button:hover,
+.avatar-voice-clone__language-list button.is-selected {
+  background: var(--avatar-console-hover);
+  color: var(--accent);
+}
+
+.avatar-voice-clone__steps {
+  display: grid;
+  gap: 12px;
+}
+
+.avatar-voice-clone__steps div {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--fg-soft);
+  font-size: 13px;
+  font-weight: 780;
+}
+
+.avatar-voice-clone__steps b {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+}
+
+.avatar-voice-clone__steps .is-current {
+  color: var(--avatar-console-ink);
+}
+
+.avatar-voice-clone__steps .is-current b {
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+}
+
+.avatar-voice-clone__record {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  justify-items: center;
+  min-width: 0;
+  padding: 32px 48px;
+  background: var(--avatar-console-inset);
+}
+
+.avatar-voice-clone__script {
+  width: min(520px, 100%);
+  min-height: 184px;
+  padding: 44px 42px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  color: var(--avatar-console-ink);
+  font-size: 17px;
+  font-weight: 820;
+  line-height: 1.72;
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-voice-clone__refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-voice-clone__refresh span {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-left-color: transparent;
+  border-radius: 50%;
+}
+
+.avatar-voice-clone__record-button {
+  align-self: end;
+  width: 66px;
+  height: 66px;
+  border: 5px solid rgb(255 229 230);
+  border-radius: 50%;
+  background: rgb(255 70 74);
+  box-shadow: none;
+}
+
+.avatar-voice-clone__record > span {
+  margin-top: 16px;
+  color: var(--avatar-console-muted);
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.avatar-voice-clone__foot {
+  border-top: 1px solid var(--avatar-console-border);
+  border-bottom: 0;
+}
+
+.avatar-voice-clone__foot label {
+  min-width: 0;
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+  font-weight: 720;
+}
+
+.avatar-voice-clone__foot label span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-voice-clone__foot a {
+  flex: 0 0 auto;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.avatar-voice-clone__foot > div {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.avatar-voice-clone__foot button {
+  min-width: 64px;
+  min-height: 34px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-ink);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.avatar-voice-clone__foot button:last-child {
+  border-color: var(--avatar-console-border);
+  background: var(--bg-hover);
+  color: var(--fg-soft);
+  cursor: not-allowed;
+}
+
+.avatar-console-video-hero,
+.avatar-console-chat-hero,
+.avatar-console-live-hero {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 38px;
+  min-height: 350px;
+  padding: 36px 40px;
+  color: var(--avatar-console-ink);
+}
+
+.avatar-console-video-hero p,
+.avatar-console-chat-hero p,
+.avatar-console-live-hero p {
+  color: var(--avatar-console-muted);
+}
+
+.avatar-console-video-hero button,
+.avatar-console-chat-hero button,
+.avatar-console-live-hero button {
+  margin-top: 34px;
+}
+
+.avatar-console-live-hero > div:first-child > div {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 34px;
+}
+
+.avatar-console-live-hero > div:first-child > div button {
+  margin-top: 0;
+}
+
+.avatar-console-live-hero > div:first-child > div button + button {
+  border-color: var(--avatar-console-line);
+  background: var(--avatar-console-panel);
+  color: var(--avatar-console-ink);
+  box-shadow: none;
+}
+
+.avatar-auth-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 30px;
+}
+
+.avatar-auth-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(0 0 0 / 58%);
+  cursor: pointer;
+}
+
+.avatar-auth-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: 58px minmax(176px, 1fr) 56px;
+  width: min(760px, calc(100vw - 60px));
+  min-height: 292px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  color: var(--avatar-console-ink);
+  box-shadow: var(--shadow-panel);
+}
+
+.avatar-auth-modal__head,
+.avatar-auth-modal__foot {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 0 22px;
+}
+
+.avatar-auth-modal__head {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--avatar-console-border);
+}
+
+.avatar-auth-modal__head h2 {
+  margin: 0;
+  color: var(--avatar-console-ink);
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.avatar-auth-modal__head button,
+.avatar-auth-modal__foot button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-auth-modal__head button {
+  width: 30px;
+  height: 30px;
+  color: var(--avatar-console-muted);
+  font-size: 17px;
+}
+
+.avatar-auth-modal__body {
+  display: grid;
+  grid-template-rows: 44px minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  padding: 18px 22px 0;
+}
+
+.avatar-auth-modal__table-head {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr 0.8fr 0.9fr;
+  align-items: center;
+  min-width: 0;
+  padding: 0 14px;
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-auth-modal__empty {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  min-height: 118px;
+  color: var(--fg-soft);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.avatar-auth-modal__empty .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 34px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+  font-size: 22px;
+}
+
+.avatar-auth-modal__foot {
+  border-top: 1px solid var(--avatar-console-border);
+}
+
+.avatar-auth-modal__foot button {
+  gap: 7px;
+  min-height: 34px;
+  padding: 0 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-console-video-showcase,
+.avatar-console-chat-stack,
+.avatar-console-live-stage {
+  position: relative;
+  min-height: 300px;
+}
+
+.avatar-console-video-showcase .avatar-console-portrait--large {
+  position: absolute;
+  right: 136px;
+  top: 0;
+}
+
+.avatar-console-video-showcase .avatar-console-portrait--small:nth-child(2) {
+  position: absolute;
+  right: 346px;
+  top: 78px;
+}
+
+.avatar-console-video-showcase .avatar-console-portrait--small:nth-child(3) {
+  position: absolute;
+  right: 14px;
+  top: 126px;
+}
+
+.avatar-console-video-showcase .avatar-console-portrait--tiny {
+  position: absolute;
+  right: 276px;
+  top: 36px;
+}
+
+.avatar-console-list-head button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-ink);
+  font-weight: 850;
+}
+
+.avatar-console-video-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 306px);
+  gap: 22px;
+}
+
+.avatar-console-video-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px 10px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-panel);
+}
+
+.avatar-console-video-card > div {
+  grid-column: 1 / -1;
+  display: grid;
+  place-items: center;
+  height: 172px;
+  overflow: hidden;
+  background: var(--avatar-console-inset);
+}
+
+.avatar-console-video-card strong {
+  padding: 8px 0 0 16px;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.avatar-console-video-card span {
+  align-self: center;
+  justify-self: start;
+  margin: 8px 16px 0 0;
+  padding: 3px 8px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+}
+
+.avatar-console-video-card p {
+  grid-column: 1 / -1;
+  padding: 0 16px 14px;
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+}
+
+.avatar-console-chat-stack .avatar-console-portrait:nth-child(1) {
+  position: absolute;
+  right: 250px;
+  top: 44px;
+  transform: rotate(-3deg);
+}
+
+.avatar-console-chat-stack .avatar-console-portrait:nth-child(2) {
+  position: absolute;
+  right: 40px;
+  top: 16px;
+  transform: rotate(4deg);
+}
+
+.avatar-console-avatar-shelf {
+  display: grid;
+  grid-template-columns: repeat(9, minmax(150px, 1fr));
+  gap: 20px;
+}
+
+.avatar-console-avatar-shelf article {
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-panel);
+}
+
+.avatar-console-avatar-shelf strong,
+.avatar-console-avatar-shelf span {
+  display: block;
+  padding: 0 20px;
+}
+
+.avatar-console-avatar-shelf strong {
+  padding-top: 14px;
+  color: var(--avatar-console-ink);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.avatar-console-avatar-shelf span {
+  padding-bottom: 16px;
+  color: var(--avatar-console-muted);
+  font-size: 12px;
+}
+
+.avatar-training-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 30px;
+  background: rgb(0 0 0 / 58%);
+}
+
+.avatar-training-modal__panel {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(940px, calc(100vw - 60px));
+  min-height: 560px;
+  padding: 36px 48px 28px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  box-shadow: var(--shadow-panel);
+}
+
+.avatar-training-modal__close,
+.avatar-training-modal__actions button,
+.avatar-training-scenario {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-training-modal__close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  color: var(--avatar-console-muted);
+  font-size: 18px;
+}
+
+.avatar-training-modal__head h2 {
+  margin: 0;
+  color: var(--avatar-console-ink);
+  font-size: 20px;
+  font-weight: 950;
+}
+
+.avatar-training-modal__head p {
+  margin: 7px 0 0;
+  color: var(--avatar-console-muted);
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.avatar-training-scenarios {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 14px;
+  margin-top: 44px;
+}
+
+.avatar-training-scenario {
+  display: grid;
+  grid-template-rows: 252px auto auto;
+  min-width: 0;
+  min-height: 366px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  text-align: left;
+}
+
+.avatar-training-scenario.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.26);
+}
+
+.avatar-training-scenario__visual {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background: rgb(207 224 255);
+}
+
+.avatar-training-scenario--chat .avatar-training-scenario__visual {
+  background: rgb(253 237 113);
+}
+
+.avatar-training-scenario--live .avatar-training-scenario__visual {
+  background: rgb(165 148 255);
+}
+
+.avatar-training-scenario__visual i {
+  position: absolute;
+  right: 28px;
+  bottom: 0;
+  width: 98px;
+  height: 190px;
+  border: 8px solid rgb(255 255 255 / 92%);
+  border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+  background: rgb(237 239 245);
+  box-shadow: none;
+}
+
+.avatar-training-scenario--chat .avatar-training-scenario__visual i {
+  right: 42px;
+  width: 118px;
+  background: rgb(79 105 84);
+}
+
+.avatar-training-scenario--live .avatar-training-scenario__visual i {
+  right: 40px;
+  background: rgb(255 219 217);
+}
+
+.avatar-training-scenario__visual b,
+.avatar-training-scenario__visual em {
+  position: absolute;
+  display: block;
+  border: 1px solid rgb(255 255 255 / 74%);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 72%);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.avatar-training-scenario__visual b {
+  left: 22px;
+  bottom: 54px;
+  width: 128px;
+  height: 56px;
+}
+
+.avatar-training-scenario__visual em {
+  right: 12px;
+  bottom: 80px;
+  width: 104px;
+  height: 34px;
+}
+
+.avatar-training-scenario--live .avatar-training-scenario__visual b {
+  top: 22px;
+  left: 18px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  box-shadow:
+    16px 0 0 rgb(255 255 255 / 72%),
+    32px 0 0 rgb(255 255 255 / 72%);
+}
+
+.avatar-training-scenario--live .avatar-training-scenario__visual em {
+  top: 24px;
+  right: 26px;
+  bottom: auto;
+  width: 56px;
+  height: 18px;
+  border-radius: 999px;
+}
+
+.avatar-training-scenario > strong {
+  padding: 24px 20px 0;
+  color: var(--avatar-console-ink);
+  font-size: 16px;
+  font-weight: 950;
+}
+
+.avatar-training-scenario > span:last-child {
+  padding: 10px 20px 22px;
+  color: var(--avatar-console-muted);
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 1.55;
+}
+
+.avatar-training-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.avatar-training-modal__actions button {
+  min-width: 70px;
+  min-height: 34px;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.avatar-training-modal__actions button:first-child:not(:only-child) {
+  border-color: var(--avatar-console-line);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-ink);
+}
+
+.avatar-training-modal__actions button:disabled {
+  border-color: var(--avatar-console-border);
+  background: var(--bg-hover);
+  color: var(--fg-soft);
+  cursor: not-allowed;
+}
+
+.avatar-training-next-step {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.9fr) minmax(260px, 1fr);
+  align-items: stretch;
+  gap: 18px;
+  margin-top: 44px;
+}
+
+.avatar-training-upload,
+.avatar-training-guides {
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  min-height: 260px;
+  padding: 28px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-muted);
+}
+
+.avatar-training-upload {
+  justify-items: center;
+  text-align: center;
+}
+
+.avatar-training-upload .anticon {
+  display: grid;
+  place-items: center;
+  width: 54px;
+  height: 54px;
+  border: 1px dashed rgba(var(--accent-rgb), 0.5);
+  border-radius: 50%;
+  color: var(--accent);
+  font-size: 22px;
+}
+
+.avatar-training-upload strong,
+.avatar-training-guides strong {
+  color: var(--avatar-console-ink);
+  font-size: 16px;
+  font-weight: 950;
+}
+
+.avatar-training-upload span,
+.avatar-training-guides span {
+  color: var(--avatar-console-muted);
+  font-size: 13px;
+  font-weight: 760;
+}
+
+.avatar-console-live-stage {
+  min-height: 520px;
+}
+
+.avatar-console-live-window {
+  position: absolute;
+  right: 210px;
+  top: 0;
+  width: 530px;
+  height: 520px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-inset);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-console-live-window > span {
+  position: absolute;
+  top: 11px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--avatar-console-panel);
+}
+
+.avatar-console-live-window > span:nth-child(1) {
+  left: 20px;
+}
+
+.avatar-console-live-window > span:nth-child(2) {
+  left: 36px;
+}
+
+.avatar-console-live-window > span:nth-child(3) {
+  left: 52px;
+}
+
+.avatar-console-live-window .avatar-console-portrait {
+  position: absolute;
+  right: 72px;
+  bottom: -20px;
+}
+
+.avatar-console-live-window em,
+.avatar-console-live-window strong {
+  position: absolute;
+  top: 16px;
+  padding: 5px 10px;
+  border: 1px solid var(--avatar-console-border);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-console-panel);
+  color: var(--avatar-console-purple);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.avatar-console-live-window em {
+  right: 80px;
+}
+
+.avatar-console-live-window strong {
+  right: 20px;
+}
+
+.avatar-console-live-card {
+  position: absolute;
+  z-index: 2;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--avatar-console-panel) 88%, transparent);
+  box-shadow: var(--shadow-tight);
+  backdrop-filter: none;
+}
+
+.avatar-console-live-card--script {
+  left: 10px;
+  bottom: 60px;
+  width: 430px;
+  padding: 34px 38px;
+}
+
+.avatar-console-live-card--room {
+  right: 0;
+  bottom: 22px;
+  width: 360px;
+  padding: 30px;
+}
+
+.avatar-console-live-card b {
+  display: block;
+  color: var(--avatar-console-ink);
+  font-size: 18px;
+  font-weight: 950;
+}
+
+.avatar-console-live-card p {
+  margin-top: 18px;
+  color: var(--avatar-console-muted);
+  font-size: 17px;
+  line-height: 1.65;
+}
+
+.avatar-console-live-card--room div {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.avatar-console-live-card--room span {
+  display: block;
+  height: 112px;
+  border-radius: 6px;
+  background: rgb(238 234 227);
+}
+
+.avatar-console-live-card--room span:nth-child(2) {
+  background: rgb(244 244 243);
+}
+
+.avatar-console-live-card--room span:nth-child(3) {
+  border: 1px solid var(--avatar-console-purple);
+  background: rgb(245 250 248);
+}
+
+.avatar-console-create-card {
+  display: grid;
+  place-items: center;
+  gap: 12px;
+  width: 186px;
+  height: 248px;
+  border: 1px dashed rgba(var(--accent-rgb), 0.36);
+  border-radius: 14px;
+  background: var(--avatar-console-inset);
+  color: var(--avatar-console-purple);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 850;
+}
+
+.avatar-console-create-card .anticon {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  font-size: 11px;
+}
+
+.avatar-console-portrait {
+  position: relative;
+  display: grid;
+  place-items: end center;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.avatar-console-portrait > div {
+  position: absolute;
+  left: 50%;
+  bottom: 11%;
+  width: 42%;
+  height: 54%;
+  border-radius: 42% 42% 14% 14%;
+  transform: translateX(-50%);
+}
+
+.avatar-console-portrait > span:nth-of-type(1) {
+  position: absolute;
+  left: 50%;
+  top: 24%;
+  width: 28%;
+  height: 24%;
+  border-radius: 50%;
+  background: rgb(255 231 218);
+  box-shadow: 0 -8px 0 rgb(45 44 47);
+  transform: translateX(-50%);
+}
+
+.avatar-console-portrait > span:nth-of-type(2) {
+  position: absolute;
+  left: 50%;
+  top: 44%;
+  width: 34%;
+  height: 5%;
+  border-radius: 999px;
+  background: rgb(76 70 74 / 18%);
+  transform: translateX(-50%);
+}
+
+.avatar-console-portrait strong {
+  position: relative;
+  z-index: 1;
+  margin-bottom: 18%;
+  color: rgb(255 255 255);
+  font-size: 22px;
+  font-weight: 950;
+}
+
+.avatar-console-portrait--large {
+  width: 320px;
+  height: 300px;
+}
+
+.avatar-console-portrait--medium {
+  width: 224px;
+  height: 164px;
+  border: 5px solid var(--avatar-console-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-console-portrait--small {
+  width: 116px;
+  height: 82px;
+  border: 1px solid var(--avatar-console-border);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-console-portrait--tiny {
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.avatar-console-portrait--card {
+  width: 96px;
+  height: 172px;
+  border-radius: 0;
+}
+
+.avatar-console-portrait--broadcast {
+  width: 330px;
+  height: 470px;
+}
+
+.avatar-console-portrait--mosaic {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+.avatar-console-portrait--shelf {
+  width: 100%;
+  height: 236px;
+  border-radius: 0;
+}
+
+.avatar-console-foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  min-width: 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.avatar-console-foot i {
+  width: 1px;
+  height: 14px;
+  background: var(--avatar-console-line);
+}
+
+.avatar-create-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  background: rgb(0 0 0 / 58%);
+}
+
+.avatar-create-modal__panel {
+  position: relative;
+  display: grid;
+  width: min(638px, calc(100vw - 28px));
+  min-height: 542px;
+  padding: 34px 26px 20px 36px;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: var(--radius-sm);
+  background: var(--avatar-console-panel);
+  box-shadow: var(--shadow-panel);
+}
+
+.avatar-create-modal__close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--avatar-console-muted);
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.avatar-create-modal__head h2 {
+  margin: 0;
+  color: var(--avatar-console-ink);
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.avatar-create-modal__head p {
+  margin: 8px 0 0;
+  color: var(--avatar-console-muted);
+  font-size: 16px;
+}
+
+.avatar-create-modal__options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: center;
+  gap: 80px;
+  padding: 44px 34px 34px;
+}
+
+.avatar-create-ratio-card {
+  display: grid;
+  justify-items: center;
+  gap: 18px;
+  border: 0;
+  background: transparent;
+  color: var(--avatar-console-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 850;
+}
+
+.avatar-create-ratio-card__preview {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+  border: 1px solid var(--avatar-console-line);
+  border-radius: 15px;
+  background: var(--avatar-console-inset);
+  background-size: 34px 34px;
+}
+
+.avatar-create-ratio-card.is-selected .avatar-create-ratio-card__preview {
+  border-color: var(--avatar-console-purple);
+}
+
+.avatar-create-ratio-card__preview i {
+  display: block;
+  border: 1px solid var(--avatar-console-purple);
+  border-radius: 4px;
+  background: rgba(var(--accent-rgb), 0.24);
+}
+
+.avatar-create-ratio-card__preview--wide i {
+  width: 158px;
+  height: 86px;
+}
+
+.avatar-create-ratio-card__preview--tall i {
+  width: 86px;
+  height: 156px;
+  background: var(--avatar-console-panel);
+}
+
+.avatar-create-ratio-card__preview em {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 17px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.avatar-create-ratio-card__preview--wide em {
+  right: 27px;
+  bottom: 60px;
+  background: var(--avatar-console-panel);
+  color: var(--accent);
+}
+
+.avatar-create-ratio-card__preview--tall em {
+  top: 28px;
+  right: 62px;
+}
+
+.avatar-create-ratio-card__preview .anticon {
+  position: absolute;
+  color: var(--accent);
+  font-size: 16px;
+}
+
+.avatar-create-ratio-card__preview--wide .anticon {
+  left: 30px;
+  bottom: 64px;
+  color: var(--dg-button-text, rgb(255 255 255));
+}
+
+.avatar-create-ratio-card__preview--tall .anticon {
+  right: 62px;
+  bottom: 34px;
+}
+
+.avatar-create-modal__submit {
+  align-self: end;
+  justify-self: end;
+  min-width: 88px;
+  min-height: 32px;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  cursor: pointer;
+  font: inherit;
+  font-weight: 900;
+}
+
+.avatar-editor-page {
+  display: grid;
+  grid-template-columns: 56px 432px minmax(0, 1fr);
+  grid-template-rows: 56px minmax(0, 1fr) 196px;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: rgb(255 255 255);
+  color: rgb(38 45 74);
+  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
+}
+
+.avatar-editor-topbar {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  border-bottom: 1px solid rgb(236 238 246);
+  background: rgb(255 255 255);
+}
+
+.avatar-editor-title,
+.avatar-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 0 20px;
+}
+
+.avatar-editor-title button,
+.avatar-editor-actions button,
+.avatar-editor-rail button,
+.avatar-editor-speaker button,
+.avatar-editor-script__tools button,
+.avatar-editor-undo button,
+.avatar-editor-layer,
+.avatar-editor-play button,
+.avatar-editor-clip button,
+.avatar-editor-add {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-editor-title button {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 50%;
+  color: rgb(71 78 109);
+}
+
+.avatar-editor-title strong {
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.avatar-editor-title span {
+  color: rgb(164 171 192);
+  font-size: 12px;
+}
+
+.avatar-editor-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 28px;
+  padding: 0 14px;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 6px;
+  background: rgb(255 255 255);
+  color: rgb(64 70 101);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-editor-actions button:last-child {
+  border-color: rgb(75 76 226);
+  background: rgb(75 76 226);
+  color: rgb(255 255 255);
+}
+
+.avatar-editor-workspace {
+  display: contents;
+}
+
+.avatar-editor-rail {
+  grid-column: 1;
+  grid-row: 2 / 4;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  padding-top: 20px;
+  border-right: 1px solid rgb(238 240 247);
+  background: rgb(255 255 255);
+}
+
+.avatar-editor-rail button {
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+  min-height: 48px;
+  color: rgb(146 154 180);
+  font-size: 12px;
+}
+
+.avatar-editor-rail button.is-active {
+  border-radius: 7px;
+  background: rgb(239 239 255);
+  color: rgb(75 76 226);
+}
+
+.avatar-editor-script {
+  grid-column: 2;
+  grid-row: 2 / 4;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
+  gap: 13px;
+  min-width: 0;
+  padding: 22px 24px;
+  border-right: 1px solid rgb(238 240 247);
+  background: rgb(255 255 255);
+}
+
+.avatar-editor-script__head,
+.avatar-editor-speaker,
+.avatar-editor-script__tools {
+  display: flex;
+  align-items: center;
+}
+
+.avatar-editor-script__head {
+  justify-content: space-between;
+}
+
+.avatar-editor-script__head h2 {
+  margin: 0;
+  color: rgb(38 45 74);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.avatar-editor-speaker {
+  gap: 8px;
+  color: rgb(67 73 103);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-editor-speaker b {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgb(79 86 229);
+  color: rgb(255 255 255);
+  font-size: 12px;
+}
+
+.avatar-editor-speaker > span {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: rgb(245 226 213);
+}
+
+.avatar-editor-speaker button {
+  margin-left: auto;
+}
+
+.avatar-editor-script textarea {
+  width: 100%;
+  min-height: 76px;
+  padding: 13px 28px;
+  border: 0;
+  border-bottom: 1px solid rgb(238 240 247);
+  outline: 0;
+  resize: none;
+  background: rgb(255 255 255);
+  color: rgb(48 54 82);
+  font: inherit;
+  font-size: 13px;
+}
+
+.avatar-editor-script textarea::placeholder,
+.avatar-editor-script__count {
+  color: rgb(170 177 198);
+}
+
+.avatar-editor-script__count {
+  justify-self: end;
+  margin-top: -18px;
+  font-size: 12px;
+}
+
+.avatar-editor-script__tools {
+  justify-content: center;
+  gap: 16px;
+  color: rgb(93 99 241);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.avatar-editor-inspector {
+  align-content: start;
+  overflow: auto;
+}
+
+.avatar-editor-picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 36px;
+}
+
+.avatar-editor-picker-head h2 {
+  margin: 0;
+  color: rgb(34 41 71);
+  font-size: 16px;
+  font-weight: 950;
+}
+
+.avatar-editor-picker-head > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 0;
+  background: transparent;
+  color: rgb(50 57 91);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-editor-search-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgb(229 232 244);
+  border-radius: 6px;
+  background: rgb(255 255 255);
+  color: rgb(153 161 186);
+}
+
+.avatar-editor-search-field input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgb(37 44 74);
+  font: inherit;
+  font-size: 13px;
+}
+
+.avatar-editor-avatar-pick-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.avatar-editor-avatar-pick {
+  position: relative;
+  height: 140px;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 7px;
+  background: rgb(247 248 252);
+  cursor: pointer;
+}
+
+.avatar-editor-avatar-pick.is-selected {
+  border-color: rgb(87 93 245);
+  box-shadow: inset 0 0 0 1px rgb(87 93 245);
+}
+
+.avatar-editor-avatar-pick > i,
+.avatar-editor-background-tile > i {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 4px solid rgb(87 93 245);
+  border-radius: 50%;
+  background: rgb(255 255 255);
+}
+
+.avatar-editor-subtitle-switch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar-editor-subtitle-switch label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: rgb(78 86 116);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.avatar-editor-subtitle-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.avatar-editor-subtitle-switch label span {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  border-radius: 999px;
+  background: rgb(231 235 247);
+}
+
+.avatar-editor-subtitle-switch label span::after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgb(255 255 255);
+  box-shadow: 0 2px 6px rgb(128 137 166 / 28%);
+  content: "";
+}
+
+.avatar-editor-subtitle-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.avatar-editor-subtitle-style {
+  display: grid;
+  place-items: center;
+  min-height: 74px;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  cursor: pointer;
+}
+
+.avatar-editor-subtitle-style span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 0 6px;
+  color: rgb(255 255 255);
+  font-size: 16px;
+  font-weight: 950;
+  white-space: nowrap;
+}
+
+.avatar-editor-subtitle-style.is-blue span {
+  background: rgb(0 84 210);
+}
+
+.avatar-editor-subtitle-style.is-orange span {
+  background: rgb(252 167 52);
+  color: rgb(0 0 0);
+}
+
+.avatar-editor-subtitle-style.is-pill span {
+  padding: 0 16px;
+  border-radius: 999px;
+  background: rgb(32 31 72);
+}
+
+.avatar-editor-subtitle-style.is-underline span {
+  border-bottom: 4px solid rgb(91 96 240);
+  color: rgb(0 0 0);
+}
+
+.avatar-editor-subtitle-style.is-solid span {
+  background: rgb(88 83 238);
+}
+
+.avatar-editor-subtitle-style.is-black span {
+  background: rgb(4 10 14);
+}
+
+.avatar-editor-background-palette {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.avatar-editor-background-tile {
+  position: relative;
+  height: 118px;
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid rgb(229 232 244);
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  cursor: pointer;
+}
+
+.avatar-editor-background-tile.is-selected {
+  border-color: rgb(87 93 245);
+  box-shadow: inset 0 0 0 1px rgb(87 93 245);
+}
+
+.avatar-editor-background-tile span {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-editor-background-tile.bg-1 span {
+  background: rgb(238 241 243);
+}
+
+.avatar-editor-background-tile.bg-2 span {
+  background: rgb(198 218 222);
+}
+
+.avatar-editor-background-tile.bg-3 span {
+  background: rgb(255 247 241);
+}
+
+.avatar-editor-background-tile.bg-4 span {
+  background: rgb(220 246 249);
+}
+
+.avatar-editor-background-tile.bg-5 span {
+  background: rgb(3 33 101);
+}
+
+.avatar-editor-background-tile.bg-6 span {
+  background: rgb(205 225 226);
+}
+
+.avatar-editor-background-tile.bg-7 span {
+  background: rgb(7 76 130);
+}
+
+.avatar-editor-background-tile.bg-8 span {
+  background: rgb(225 215 200);
+}
+
+.avatar-editor-background-tile.bg-9 span {
+  background: rgb(211 228 224);
+}
+
+.avatar-editor-background-tile.bg-10 span {
+  background: rgb(246 211 218);
+}
+
+.avatar-editor-background-tile.bg-11 span {
+  background: rgb(230 220 196);
+}
+
+.avatar-editor-background-tile.bg-12 span {
+  background: rgb(235 216 190);
+  background-size: auto, 30px 100%, auto;
+}
+
+.avatar-editor-background-tile.bg-13 span {
+  background: rgb(34 170 255);
+}
+
+.avatar-editor-background-tile.bg-14 span {
+  background: rgb(246 246 246);
+}
+
+.avatar-editor-background-tile.bg-15 span {
+  background: rgb(229 223 211);
+}
+
+.avatar-editor-background-tile.bg-16 span {
+  background: rgb(226 226 226);
+}
+
+.avatar-editor-background-tile.bg-17 span {
+  background: rgb(177 195 203);
+}
+
+.avatar-editor-sticker-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.avatar-editor-sticker-card {
+  display: grid;
+  place-items: center;
+  min-height: 148px;
+  border: 1px solid rgb(229 232 244);
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  cursor: pointer;
+}
+
+.avatar-editor-sticker-visual {
+  position: relative;
+  display: block;
+  width: 98px;
+  height: 98px;
+}
+
+.avatar-editor-sticker-visual i {
+  position: absolute;
+  display: block;
+}
+
+.avatar-editor-sticker-visual.is-flower i:nth-child(1),
+.avatar-editor-sticker-visual.is-flower i:nth-child(2) {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: rgb(218 244 249);
+}
+
+.avatar-editor-sticker-visual.is-flower i:nth-child(1) {
+  top: 7px;
+  left: 12px;
+}
+
+.avatar-editor-sticker-visual.is-flower i:nth-child(2) {
+  top: 25px;
+  right: 4px;
+}
+
+.avatar-editor-sticker-visual.is-flower i:nth-child(3) {
+  right: 30px;
+  bottom: 4px;
+  width: 38px;
+  height: 46px;
+  border-radius: 0 0 20px 20px;
+  background: rgb(120 171 118);
+}
+
+.avatar-editor-sticker-visual.is-cone i:nth-child(1) {
+  top: 6px;
+  left: 22px;
+  width: 54px;
+  height: 76px;
+  clip-path: polygon(50% 0, 100% 88%, 0 88%);
+  background: rgb(255 151 92);
+}
+
+.avatar-editor-sticker-visual.is-cone i:nth-child(2),
+.avatar-editor-sticker-visual.is-cone i:nth-child(3) {
+  bottom: 6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgb(171 64 44);
+}
+
+.avatar-editor-sticker-visual.is-cone i:nth-child(2) {
+  left: 28px;
+}
+
+.avatar-editor-sticker-visual.is-cone i:nth-child(3) {
+  right: 28px;
+}
+
+.avatar-editor-sticker-visual.is-globe {
+  border-radius: 50%;
+  background: rgb(112 221 232);
+  box-shadow: inset -8px -10px 0 rgb(57 102 190 / 16%);
+}
+
+.avatar-editor-sticker-visual.is-globe i:nth-child(1) {
+  left: 36px;
+  bottom: -16px;
+  width: 26px;
+  height: 28px;
+  border-radius: 4px;
+  background: rgb(154 204 91);
+}
+
+.avatar-editor-sticker-visual.is-headset i:nth-child(1) {
+  inset: 10px 16px 22px;
+  border: 12px solid rgb(201 171 165);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  transform: rotate(-12deg);
+}
+
+.avatar-editor-sticker-visual.is-headset i:nth-child(2),
+.avatar-editor-sticker-visual.is-headset i:nth-child(3) {
+  bottom: 14px;
+  width: 36px;
+  height: 48px;
+  border-radius: 18px;
+  background: rgb(138 229 224);
+  box-shadow: none;
+}
+
+.avatar-editor-sticker-visual.is-headset i:nth-child(2) {
+  left: 15px;
+}
+
+.avatar-editor-sticker-visual.is-headset i:nth-child(3) {
+  right: 10px;
+}
+
+.avatar-editor-sticker-visual.is-board,
+.avatar-editor-sticker-visual.is-chart {
+  border-radius: 12px;
+  background: rgb(70 176 235);
+  box-shadow: inset 0 -8px 0 rgb(32 91 168 / 16%);
+}
+
+.avatar-editor-sticker-visual.is-chart {
+  background: rgb(255 222 121);
+}
+
+.avatar-editor-sticker-visual.is-board i,
+.avatar-editor-sticker-visual.is-chart i {
+  border-radius: 5px;
+  background: rgb(255 255 255 / 82%);
+}
+
+.avatar-editor-sticker-visual.is-board i:nth-child(1),
+.avatar-editor-sticker-visual.is-chart i:nth-child(1) {
+  top: 18px;
+  left: 18px;
+  width: 24px;
+  height: 18px;
+}
+
+.avatar-editor-sticker-visual.is-board i:nth-child(2),
+.avatar-editor-sticker-visual.is-chart i:nth-child(2) {
+  top: 42px;
+  left: 18px;
+  width: 58px;
+  height: 12px;
+}
+
+.avatar-editor-sticker-visual.is-board i:nth-child(3),
+.avatar-editor-sticker-visual.is-chart i:nth-child(3) {
+  right: 18px;
+  bottom: 18px;
+  width: 28px;
+  height: 20px;
+}
+
+.avatar-editor-sticker-visual.is-cap i:nth-child(1) {
+  top: 34px;
+  left: 8px;
+  width: 84px;
+  height: 34px;
+  border-radius: 80% 80% 12px 12px;
+  background: rgb(232 67 60);
+  transform: rotate(-10deg);
+}
+
+.avatar-editor-sticker-visual.is-cap i:nth-child(2) {
+  right: 5px;
+  bottom: 20px;
+  width: 46px;
+  height: 8px;
+  border-radius: 999px;
+  background: rgb(97 54 48);
+  transform: rotate(-10deg);
+}
+
+.avatar-editor-sticker-visual.is-cap i:nth-child(3) {
+  right: 8px;
+  bottom: 8px;
+  width: 3px;
+  height: 34px;
+  background: rgb(131 81 38);
+  box-shadow: 7px 24px 0 4px rgb(194 131 51);
+}
+
+.avatar-editor-sticker-visual.is-desk i:nth-child(1) {
+  left: 8px;
+  right: 8px;
+  bottom: 32px;
+  height: 18px;
+  border-radius: 12px;
+  background: rgb(169 222 219);
+}
+
+.avatar-editor-sticker-visual.is-desk i:nth-child(2),
+.avatar-editor-sticker-visual.is-desk i:nth-child(3) {
+  bottom: 4px;
+  width: 5px;
+  height: 32px;
+  border-radius: 999px;
+  background: rgb(139 101 54);
+}
+
+.avatar-editor-sticker-visual.is-desk i:nth-child(2) {
+  left: 22px;
+}
+
+.avatar-editor-sticker-visual.is-desk i:nth-child(3) {
+  right: 22px;
+}
+
+.avatar-editor-avatar-card {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 78px;
+  padding: 10px;
+  border: 1px solid rgb(232 235 246);
+  border-radius: 8px;
+  background: rgb(249 250 254);
+}
+
+.avatar-editor-avatar-card .avatar-console-portrait--clip {
+  width: 50px;
+  height: 58px;
+}
+
+.avatar-editor-avatar-card div {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.avatar-editor-avatar-card strong {
+  overflow: hidden;
+  color: rgb(38 45 74);
+  font-size: 14px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-editor-avatar-card span {
+  color: rgb(142 150 174);
+  font-size: 12px;
+}
+
+.avatar-editor-avatar-card button,
+.avatar-editor-option-grid button,
+.avatar-editor-upload-card,
+.avatar-editor-background-grid button {
+  border: 1px solid rgb(229 232 244);
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  color: rgb(62 69 101);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.avatar-editor-avatar-card button {
+  min-height: 28px;
+  padding: 0 10px;
+  color: rgb(91 96 240);
+}
+
+.avatar-editor-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.avatar-editor-option-grid button {
+  min-height: 36px;
+}
+
+.avatar-editor-option-grid button.is-selected,
+.avatar-editor-background-grid button.is-selected {
+  border-color: rgb(93 99 241);
+  background: rgb(242 242 255);
+  color: rgb(78 83 225);
+}
+
+.avatar-editor-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid rgb(232 235 246);
+  border-radius: 8px;
+  background: rgb(249 250 254);
+  color: rgb(45 52 82);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-editor-toggle-row input {
+  width: 16px;
+  height: 16px;
+  accent-color: rgb(91 96 240);
+}
+
+.avatar-editor-upload-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 70px;
+  border-style: dashed;
+  color: rgb(91 96 240);
+}
+
+.avatar-editor-background-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.avatar-editor-background-grid button {
+  height: 72px;
+  overflow: hidden;
+  padding: 4px;
+}
+
+.avatar-editor-background-grid span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  background: rgb(207 226 227);
+}
+
+.avatar-editor-background-grid button:nth-child(2) span {
+  background: rgb(218 202 175);
+}
+
+.avatar-editor-background-grid button:nth-child(3) span {
+  background: rgb(232 238 255);
+}
+
+.avatar-editor-stage {
+  grid-column: 3;
+  grid-row: 2;
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: rgb(247 248 252);
+}
+
+.avatar-editor-undo {
+  position: absolute;
+  top: 22px;
+  left: 30px;
+  z-index: 2;
+  display: flex;
+  gap: 18px;
+}
+
+.avatar-editor-undo button {
+  color: rgb(166 173 196);
+  font-size: 24px;
+}
+
+.avatar-editor-layer {
+  position: absolute;
+  top: 18px;
+  right: 20px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  color: rgb(70 77 108);
+  font-size: 18px;
+}
+
+.avatar-editor-layer.is-active {
+  color: rgb(75 76 226);
+  box-shadow: none;
+}
+
+.avatar-editor-layer-panel {
+  position: absolute;
+  top: 62px;
+  right: 20px;
+  z-index: 6;
+  display: grid;
+  gap: 12px;
+  width: 238px;
+  padding: 14px;
+  border: 1px solid rgb(228 231 244);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 96%);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.avatar-editor-layer-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.avatar-editor-layer-panel__head strong {
+  color: rgb(36 43 73);
+  font-size: 14px;
+  font-weight: 950;
+}
+
+.avatar-editor-layer-panel__head span {
+  overflow: hidden;
+  color: rgb(134 143 170);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-editor-layer-panel__list {
+  display: grid;
+  gap: 6px;
+}
+
+.avatar-editor-layer-row,
+.avatar-editor-layer-panel__actions button,
+.avatar-editor-mini-layers button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.avatar-editor-layer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgb(232 235 246);
+  border-radius: 7px;
+  background: rgb(249 250 254);
+  color: rgb(55 63 94);
+  font-size: 12px;
+  font-weight: 850;
+  text-align: left;
+}
+
+.avatar-editor-layer-row.is-selected {
+  border-color: rgb(95 101 244);
+  background: rgb(242 242 255);
+  color: rgb(75 76 226);
+}
+
+.avatar-editor-layer-row em {
+  color: rgb(150 158 184);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.avatar-editor-layer-panel__actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.avatar-editor-layer-panel__actions button {
+  min-height: 30px;
+  border: 1px solid rgb(224 228 243);
+  border-radius: 7px;
+  background: rgb(255 255 255);
+  color: rgb(75 76 226);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.avatar-editor-layer-panel__actions button:disabled {
+  cursor: not-allowed;
+  color: rgb(174 181 202);
+}
+
+.avatar-editor-canvas {
+  width: min(73vw, 1500px);
+  max-height: calc(100vh - 312px);
+  overflow: hidden;
+  border: 1px solid rgb(174 176 253);
+  background: rgb(205 211 213);
+}
+
+.avatar-editor-canvas--landscape {
+  aspect-ratio: 16 / 9;
+}
+
+.avatar-editor-canvas--portrait {
+  width: min(380px, 44vw);
+  height: min(670px, calc(100vh - 250px));
+  aspect-ratio: 9 / 16;
+}
+
+.avatar-editor-scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+.avatar-editor-scene-layer {
+  position: absolute;
+  pointer-events: none;
+}
+
+.avatar-editor-scene-layer--solidBackground {
+  background: rgb(220 225 225);
+}
+
+.avatar-editor-scene-layer--background {
+  background: rgb(92 88 82 / 24%);
+  background-size: auto, 100% 100%;
+}
+
+.avatar-editor-canvas--portrait .avatar-editor-scene-layer--solidBackground {
+  background: rgb(218 202 175);
+}
+
+.avatar-editor-canvas--portrait .avatar-editor-scene-layer--background {
+  background: rgb(196 168 113 / 12%);
+}
+
+.avatar-editor-wall-line {
+  position: absolute;
+  right: 0;
+  bottom: 8%;
+  left: 0;
+  height: 3px;
+  background: rgb(98 91 84 / 44%);
+}
+
+.avatar-editor-floor {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 8%;
+  background: rgb(188 182 173 / 62%);
+  background-size: auto, 58px 100%;
+}
+
+.avatar-editor-vase {
+  position: absolute;
+  left: 8%;
+  bottom: 18%;
+  width: 7%;
+  height: 13%;
+  border-radius: 48% 48% 36% 36%;
+  background: rgb(238 229 208);
+}
+
+.avatar-editor-vase::before {
+  position: absolute;
+  left: 45%;
+  bottom: 82%;
+  width: 2px;
+  height: 88%;
+  background: rgb(125 119 100);
+  box-shadow:
+    -14px 14px 0 -1px rgb(125 119 100),
+    11px 6px 0 -1px rgb(125 119 100);
+  content: "";
+  transform: rotate(-16deg);
+  transform-origin: bottom;
+}
+
+.avatar-editor-nursery {
+  position: absolute;
+  right: 6%;
+  bottom: 22%;
+  width: 22%;
+  height: 40%;
+  border-radius: 16px;
+  background: rgb(222 209 182);
+  background-size: auto;
+  opacity: 0.72;
+}
+
+.avatar-editor-plant {
+  position: absolute;
+  left: 4.2%;
+  bottom: 8%;
+  width: 11%;
+  height: 31%;
+}
+
+.avatar-editor-plant::before,
+.avatar-editor-plant::after {
+  position: absolute;
+  left: 50%;
+  bottom: 16%;
+  width: 2px;
+  height: 74%;
+  border-radius: 999px;
+  background: rgb(63 88 65);
+  content: "";
+  transform: rotate(-13deg);
+  transform-origin: bottom;
+}
+
+.avatar-editor-plant::after {
+  left: 58%;
+  height: 65%;
+  transform: rotate(16deg);
+}
+
+.avatar-editor-plant {
+  background: rgb(64 103 72);
+}
+
+.avatar-editor-studio-vase {
+  position: absolute;
+  bottom: 5.6%;
+  border-radius: 48% 48% 44% 44%;
+  background: rgb(30 34 36);
+  box-shadow: none;
+}
+
+.avatar-editor-studio-vase--large {
+  left: 4.8%;
+  width: 6.7%;
+  height: 13%;
+}
+
+.avatar-editor-studio-vase--small {
+  left: 13%;
+  width: 4.5%;
+  height: 8.5%;
+}
+
+.avatar-editor-studio-vase--small::before {
+  position: absolute;
+  top: -13%;
+  left: 35%;
+  width: 30%;
+  height: 14%;
+  border-radius: 4px 4px 0 0;
+  background: rgb(43 47 49);
+  content: "";
+}
+
+.avatar-editor-canvas-watermark {
+  position: absolute;
+  right: 3%;
+  bottom: 3.2%;
+  color: rgb(255 255 255 / 46%);
+  font-size: clamp(16px, 2.1vw, 34px);
+  font-weight: 950;
+  letter-spacing: 0;
+}
+
+.avatar-editor-canvas-layer {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid transparent;
+  background: transparent;
+  color: inherit;
+  cursor: grab;
+  font: inherit;
+  touch-action: none;
+}
+
+.avatar-editor-canvas-layer:active {
+  cursor: grabbing;
+}
+
+.avatar-editor-canvas-layer.is-selected {
+  border-color: rgb(90 94 255);
+  box-shadow: none;
+}
+
+.avatar-editor-canvas-layer.is-selected::before,
+.avatar-editor-canvas-layer.is-selected::after {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border: 1px solid rgb(90 94 255);
+  background: rgb(255 255 255);
+  content: "";
+}
+
+.avatar-editor-canvas-layer.is-selected::before {
+  top: -5px;
+  left: -5px;
+}
+
+.avatar-editor-canvas-layer.is-selected::after {
+  right: -5px;
+  bottom: -5px;
+}
+
+.avatar-editor-canvas-layer em {
+  position: absolute;
+  top: -24px;
+  left: 0;
+  display: none;
+  min-height: 20px;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: rgb(75 76 226);
+  color: rgb(255 255 255);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.avatar-editor-canvas-layer.is-selected em {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatar-editor-canvas-layer .avatar-console-portrait--editor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  border-radius: 0;
+  background: transparent !important;
+}
+
+.avatar-editor-canvas-layer--avatar {
+  min-width: 220px;
+  min-height: 420px;
+}
+
+.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--avatar {
+  min-width: 128px;
+  min-height: 260px;
+}
+
+.avatar-editor-figure {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 18px 16px rgb(20 26 32 / 18%));
+}
+
+.avatar-editor-figure span {
+  position: absolute;
+  display: block;
+}
+
+.avatar-editor-figure__hair {
+  top: 5%;
+  left: 25%;
+  width: 50%;
+  height: 38%;
+  border-radius: 48% 48% 32% 32%;
+  background: rgb(45 25 21);
+  box-shadow:
+    -18px 74px 0 -26px rgb(82 43 29),
+    18px 78px 0 -26px rgb(70 38 30);
+}
+
+.avatar-editor-figure__head {
+  top: 11%;
+  left: 37%;
+  width: 26%;
+  height: 17%;
+  border-radius: 44% 44% 48% 48%;
+  background: rgb(255 229 214);
+  box-shadow:
+    -4px 22px 0 -14px rgb(243 193 174),
+    4px 22px 0 -14px rgb(243 193 174);
+}
+
+.avatar-editor-figure__neck {
+  top: 26%;
+  left: 45%;
+  width: 10%;
+  height: 10%;
+  border-radius: 0 0 999px 999px;
+  background: rgb(233 178 159);
+}
+
+.avatar-editor-figure__torso {
+  top: 31%;
+  left: 25%;
+  width: 50%;
+  height: 40%;
+  border-radius: 18% 18% 10% 10%;
+  background: rgb(142 10 21);
+  box-shadow: inset 0 -18px 0 rgb(103 8 14 / 35%);
+}
+
+.avatar-editor-figure__torso::before {
+  position: absolute;
+  top: -4%;
+  left: 25%;
+  width: 50%;
+  height: 12%;
+  border-radius: 999px 999px 36% 36%;
+  background: rgb(255 255 255);
+  content: "";
+}
+
+.avatar-editor-figure__pattern {
+  left: 27%;
+  width: 46%;
+  height: 6%;
+  background: transparent;
+  background-size: 22px 100%;
+}
+
+.avatar-editor-figure__pattern--upper {
+  top: 44%;
+}
+
+.avatar-editor-figure__pattern--lower {
+  top: 56%;
+}
+
+.avatar-editor-figure__skirt {
+  top: 70%;
+  left: 30%;
+  width: 40%;
+  height: 18%;
+  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
+  background: rgb(15 17 23);
+}
+
+.avatar-editor-figure__arm {
+  top: 36%;
+  width: 12%;
+  height: 45%;
+  border-radius: 999px;
+  background: rgb(168 16 24);
+}
+
+.avatar-editor-figure__arm::after {
+  position: absolute;
+  right: 10%;
+  bottom: -3%;
+  left: 10%;
+  height: 10%;
+  border-radius: 999px;
+  background: rgb(255 244 240);
+  content: "";
+}
+
+.avatar-editor-figure__arm--left {
+  left: 18%;
+  transform: rotate(5deg);
+}
+
+.avatar-editor-figure__arm--right {
+  right: 18%;
+  transform: rotate(-5deg);
+}
+
+.avatar-editor-figure__leg {
+  top: 86%;
+  width: 8%;
+  height: 12%;
+  border-radius: 999px 999px 0 0;
+  background: rgb(238 184 166);
+}
+
+.avatar-editor-figure__leg--left {
+  left: 41%;
+}
+
+.avatar-editor-figure__leg--right {
+  right: 41%;
+}
+
+.avatar-editor-sticker-shape {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+.avatar-editor-sticker-shape::before {
+  position: absolute;
+  left: 16%;
+  top: 5%;
+  width: 70%;
+  height: 70%;
+  clip-path: polygon(18% 100%, 46% 8%, 95% 100%);
+  background: rgb(236 34 47);
+  content: "";
+  transform: rotate(13deg);
+  transform-origin: 50% 100%;
+}
+
+.avatar-editor-sticker-shape::after {
+  position: absolute;
+  left: 12%;
+  bottom: 18%;
+  width: 76%;
+  height: 22%;
+  border-radius: 999px;
+  background: rgb(255 255 255);
+  box-shadow: 28px -20px 0 -3px rgb(255 255 255);
+  content: "";
+}
+
+.avatar-editor-canvas-layer--sticker {
+  min-width: 62px;
+  min-height: 72px;
+}
+
+.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape {
+  border-radius: 16px;
+  background: rgb(222 209 182);
+  background-size: auto;
+  opacity: 0.78;
+}
+
+.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape::before,
+.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape::after {
+  display: none;
+}
+
+.avatar-editor-selection-toolbar {
+  position: absolute;
+  top: -1px;
+  left: calc(100% + 6px);
+  z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  min-height: 38px;
+  overflow: hidden;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 0 7px 7px 0;
+  background: rgb(255 255 255);
+  box-shadow: none;
+  white-space: nowrap;
+}
+
+.avatar-editor-selection-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 38px;
+  padding: 0 14px;
+  border: 0;
+  border-left: 1px solid rgb(232 235 244);
+  background: transparent;
+  color: rgb(45 53 83);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.avatar-editor-selection-toolbar button:first-child {
+  border-left: 0;
+}
+
+.avatar-editor-selection-toolbar button:hover {
+  background: rgb(247 248 255);
+  color: rgb(75 76 226);
+}
+
+.avatar-editor-selection-toolbar svg {
+  font-size: 16px;
+}
+
+.avatar-editor-subtitle-preview,
+.avatar-editor-watermark-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: rgb(255 255 255);
+  font-weight: 950;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.avatar-editor-subtitle-preview {
+  border-radius: 999px;
+  background: rgb(37 43 89 / 74%);
+  font-size: clamp(11px, 1.4vw, 18px);
+}
+
+.avatar-editor-watermark-preview {
+  position: absolute;
+  inset: 0;
+  font-size: clamp(13px, 1.6vw, 22px);
+  opacity: 0.88;
+}
+
+.avatar-editor-selection-readout {
+  position: absolute;
+  right: 20px;
+  bottom: 22px;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 92%);
+  color: rgb(132 140 166);
+  font-size: 12px;
+  box-shadow: none;
+}
+
+.avatar-editor-selection-readout strong {
+  color: rgb(64 71 104);
+  font-weight: 950;
+}
+
+.avatar-editor-timeline {
+  grid-column: 3;
+  grid-row: 3;
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) 40px;
+  align-items: center;
+  gap: 24px;
+  margin-left: 0;
+  padding: 24px 18px 24px 64px;
+  border-top: 1px solid rgb(235 238 247);
+  border-left: 1px solid rgb(235 238 247);
+  border-radius: 8px 0 0;
+  background: rgb(255 255 255);
+}
+
+.avatar-editor-play {
+  display: grid;
+  justify-items: center;
+  gap: 4px;
+}
+
+.avatar-editor-play button {
+  color: rgb(82 88 239);
+  font-size: 34px;
+}
+
+.avatar-editor-play span {
+  color: rgb(160 167 189);
+  font-size: 11px;
+}
+
+.avatar-editor-clip {
+  position: relative;
+  width: 214px;
+  height: 120px;
+  border: 2px solid rgb(110 114 255);
+  border-radius: 7px;
+  background: rgb(247 248 252);
+}
+
+.avatar-editor-clip b {
+  position: absolute;
+  top: -22px;
+  left: -6px;
+  color: rgb(100 106 237);
+  font-size: 12px;
+}
+
+.avatar-editor-clip > div {
+  position: absolute;
+  inset: 4px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.avatar-editor-clip .avatar-console-portrait--clip {
+  width: 64px;
+  height: 88px;
+  border-radius: 0;
+}
+
+.avatar-editor-clip--landscape > div {
+  background: rgb(219 224 224);
+}
+
+.avatar-editor-clip--portrait {
+  width: 170px;
+}
+
+.avatar-editor-clip--portrait > div {
+  background: rgb(226 213 190);
+}
+
+.avatar-editor-clip em {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgb(104 107 119 / 75%);
+  color: rgb(255 255 255);
+  font-size: 10px;
+  font-style: normal;
+}
+
+.avatar-editor-clip > button {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: rgb(96 102 117 / 72%);
+  color: rgb(255 255 255);
+}
+
+.avatar-editor-mini-layers {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 14px 4px;
+}
+
+.avatar-editor-mini-layers button {
+  flex: 0 0 auto;
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid rgb(230 233 244);
+  border-radius: 999px;
+  background: rgb(250 251 255);
+  color: rgb(120 129 158);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.avatar-editor-mini-layers button.is-selected {
+  border-color: rgb(99 105 244);
+  background: rgb(242 242 255);
+  color: rgb(75 76 226);
+}
+
+.avatar-editor-add {
+  grid-column: 4;
+  justify-self: end;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 120px;
+  border: 1px solid rgb(121 126 255);
+  border-radius: 8px;
+  color: rgb(94 100 241);
+  font-size: 20px;
+}
+
+.avatar-editor-clip-preview {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.avatar-editor-clip-preview .avatar-editor-figure {
+  position: absolute;
+  right: 23%;
+  bottom: -5%;
+  width: 33%;
+  height: 86%;
+  filter: drop-shadow(0 8px 8px rgb(20 26 32 / 18%));
+}
+
+.avatar-editor-clip-plant {
+  position: absolute;
+  left: 6%;
+  bottom: 7%;
+  width: 18%;
+  height: 33%;
+  background: rgb(58 100 65);
+}
+
+.avatar-editor-clip-plant::before {
+  position: absolute;
+  left: 52%;
+  bottom: 8%;
+  width: 1px;
+  height: 78%;
+  background: rgb(62 85 64);
+  box-shadow: 8px 8px 0 rgb(62 85 64);
+  content: "";
+  transform: rotate(-12deg);
+  transform-origin: bottom;
+}
+
+.avatar-editor-clip-hat {
+  position: absolute;
+  right: 35%;
+  top: 12%;
+  z-index: 3;
+  width: 13%;
+  height: 13%;
+}
+
+.avatar-editor-clip-hat::before {
+  position: absolute;
+  inset: 0;
+  clip-path: polygon(18% 100%, 47% 5%, 96% 100%);
+  background: rgb(236 34 47);
+  content: "";
+  transform: rotate(13deg);
+}
+
+.avatar-editor-clip-hat::after {
+  position: absolute;
+  left: 4%;
+  bottom: 2%;
+  width: 86%;
+  height: 26%;
+  border-radius: 999px;
+  background: rgb(255 255 255);
+  box-shadow: 14px -12px 0 -3px rgb(255 255 255);
+  content: "";
+}
+
+/* Localized digital-human editor skin. Keep layout rules above intact. */
+.avatar-editor-page {
+  --avatar-editor-text: var(--fg-body);
+  --avatar-editor-muted: var(--fg-muted);
+  --avatar-editor-soft: var(--fg-soft);
+  --avatar-editor-panel: var(--bg-surface, var(--bg-panel));
+  --avatar-editor-panel-strong: var(--bg-elevated);
+  --avatar-editor-inset: var(--bg-inset);
+  --avatar-editor-hover: var(--bg-hover);
+  --avatar-editor-line: var(--border-subtle);
+  --avatar-editor-border: var(--border-weak);
+  --avatar-editor-accent-soft: var(--accent-muted, rgba(var(--accent-rgb), 0.12));
+  background: var(--bg-base);
+  color: var(--avatar-editor-text);
+  font-family: var(--font-sans);
+}
+
+.avatar-editor-topbar {
+  border-bottom-color: var(--avatar-editor-border);
+  background: var(--avatar-editor-panel);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-title > button:not(.avatar-editor-title__name-button) {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-title > button:not(.avatar-editor-title__name-button):hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-hover);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-title__name-button {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 7px;
+  width: auto !important;
+  max-width: min(320px, 32vw);
+  height: 30px !important;
+  min-width: 0;
+  padding: 0 8px !important;
+  border: 1px solid transparent !important;
+  border-radius: var(--radius-xs) !important;
+  background: transparent !important;
+  color: var(--avatar-editor-text) !important;
+  text-align: left;
+}
+
+.avatar-editor-title__name-button strong {
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatar-editor-title__name-button .anticon {
+  flex: 0 0 auto;
+  color: var(--avatar-editor-soft);
+  font-size: 13px;
+}
+
+.avatar-editor-title__name-button:hover {
+  border-color: var(--avatar-editor-line) !important;
+  background: var(--avatar-editor-inset) !important;
+}
+
+.avatar-editor-title__name-button:hover .anticon {
+  color: var(--accent);
+}
+
+.avatar-editor-title__input {
+  width: min(260px, 32vw);
+  height: 30px;
+  min-width: 120px;
+  border: 1px solid var(--avatar-editor-line);
+  border-radius: var(--radius-xs);
+  outline: 0;
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-text);
+  padding: 0 10px;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.avatar-editor-title__input:focus {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
+}
+
+.avatar-editor-title span {
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-actions button {
+  border-color: var(--avatar-editor-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-actions button:hover {
+  border-color: rgba(var(--accent-rgb), 0.35);
+  background: var(--avatar-editor-hover);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-actions button:last-child {
+  border-color: rgba(var(--accent-rgb), 0.55);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+  box-shadow: none;
+}
+
+.avatar-editor-workspace {
+  background: var(--bg-base);
+}
+
+.avatar-editor-rail {
+  border-right-color: var(--avatar-editor-border);
+  background: var(--avatar-editor-panel);
+}
+
+.avatar-editor-rail button {
+  border: 1px solid transparent;
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-rail button:hover {
+  background: var(--avatar-editor-hover);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-rail button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-accent-soft);
+  color: var(--accent);
+}
+
+.avatar-editor-script {
+  border-right-color: var(--avatar-editor-border);
+  background: var(--avatar-editor-panel);
+}
+
+.avatar-editor-script__head h2,
+.avatar-editor-picker-head h2,
+.avatar-editor-avatar-card strong,
+.avatar-editor-layer-panel__head strong,
+.avatar-editor-selection-readout strong {
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-script__head > .anticon,
+.avatar-editor-picker-head > button,
+.avatar-editor-speaker,
+.avatar-editor-avatar-card span,
+.avatar-editor-layer-panel__head span,
+.avatar-editor-selection-readout {
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-speaker b,
+.avatar-editor-avatar-pick > i,
+.avatar-editor-background-tile > i {
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+}
+
+.avatar-editor-speaker b {
+  box-shadow: none;
+}
+
+.avatar-editor-script textarea {
+  border: 1px solid var(--avatar-editor-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-script textarea::placeholder,
+.avatar-editor-script__count {
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-script__tools {
+  color: var(--accent);
+}
+
+.avatar-editor-script__tools button {
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--avatar-editor-line);
+  border-radius: var(--radius-xs);
+  background: var(--avatar-editor-inset);
+  color: var(--accent);
+}
+
+.avatar-editor-script__tools button:hover,
+.avatar-editor-picker-head > button:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-hover);
+}
+
+.avatar-editor-search-field,
+.avatar-editor-avatar-card,
+.avatar-editor-toggle-row {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-search-field input {
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-avatar-pick,
+.avatar-editor-subtitle-style,
+.avatar-editor-background-tile,
+.avatar-editor-sticker-card,
+.avatar-editor-avatar-card button,
+.avatar-editor-option-grid button,
+.avatar-editor-upload-card,
+.avatar-editor-background-grid button {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-panel-strong);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-avatar-pick:hover,
+.avatar-editor-subtitle-style:hover,
+.avatar-editor-background-tile:hover,
+.avatar-editor-sticker-card:hover,
+.avatar-editor-avatar-card button:hover,
+.avatar-editor-option-grid button:hover,
+.avatar-editor-upload-card:hover,
+.avatar-editor-background-grid button:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-hover);
+}
+
+.avatar-editor-avatar-pick.is-selected,
+.avatar-editor-background-tile.is-selected,
+.avatar-editor-option-grid button.is-selected,
+.avatar-editor-background-grid button.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.58);
+  background: var(--avatar-editor-accent-soft);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
+}
+
+.avatar-editor-subtitle-switch label {
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-subtitle-switch label span {
+  background: var(--avatar-editor-inset);
+  box-shadow: inset 0 0 0 1px var(--avatar-editor-line);
+}
+
+.avatar-editor-subtitle-switch label span::after {
+  background: var(--avatar-editor-panel-strong);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-editor-stage {
+  background: rgb(0 0 0);
+}
+
+.avatar-editor-undo button {
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-undo button:hover {
+  color: var(--accent);
+}
+
+.avatar-editor-layer,
+.avatar-editor-layer-panel {
+  border: 1px solid var(--avatar-editor-line);
+  background: color-mix(in srgb, var(--avatar-editor-panel) 92%, transparent);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-layer {
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-editor-layer.is-active {
+  border-color: rgba(var(--accent-rgb), 0.44);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.avatar-editor-layer-panel {
+  box-shadow: var(--shadow-panel);
+}
+
+.avatar-editor-layer-row {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-layer-row:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-hover);
+}
+
+.avatar-editor-layer-row.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.52);
+  background: var(--avatar-editor-accent-soft);
+  color: var(--accent);
+}
+
+.avatar-editor-layer-row em,
+.avatar-editor-layer-panel__actions button:disabled {
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-layer-panel__actions button {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-inset);
+  color: var(--accent);
+}
+
+.avatar-editor-canvas {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: var(--avatar-editor-inset);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-editor-canvas-layer.is-selected {
+  border-color: var(--accent);
+  box-shadow: none;
+}
+
+.avatar-editor-canvas-layer.is-selected::before,
+.avatar-editor-canvas-layer.is-selected::after {
+  border-color: var(--accent);
+  background: var(--avatar-editor-panel-strong);
+}
+
+.avatar-editor-canvas-layer em {
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(255 255 255));
+}
+
+.avatar-editor-selection-toolbar {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-editor-selection-toolbar button {
+  border-left-color: var(--avatar-editor-border);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-selection-toolbar button:hover {
+  background: var(--avatar-editor-hover);
+  color: var(--accent);
+}
+
+.avatar-editor-selection-readout {
+  border: 1px solid var(--avatar-editor-line);
+  background: color-mix(in srgb, var(--avatar-editor-panel) 92%, transparent);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-editor-timeline {
+  border-top-color: var(--avatar-editor-border);
+  border-left-color: var(--avatar-editor-border);
+  background: var(--avatar-editor-panel);
+}
+
+.avatar-editor-play button {
+  color: var(--accent);
+}
+
+.avatar-editor-play span {
+  color: var(--avatar-editor-soft);
+}
+
+.avatar-editor-clip {
+  border-color: rgba(var(--accent-rgb), 0.56);
+  background: var(--avatar-editor-inset);
+  box-shadow: none;
+}
+
+.avatar-editor-clip b,
+.avatar-editor-mini-layers button.is-selected {
+  color: var(--accent);
+}
+
+.avatar-editor-mini-layers button {
+  border-color: var(--avatar-editor-line);
+  background: var(--avatar-editor-inset);
+  color: var(--avatar-editor-muted);
+}
+
+.avatar-editor-mini-layers button:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--avatar-editor-hover);
+  color: var(--avatar-editor-text);
+}
+
+.avatar-editor-mini-layers button.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: var(--avatar-editor-accent-soft);
+}
+
+.avatar-editor-add {
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: var(--avatar-editor-inset);
+  color: var(--accent);
+}
+
+@media (max-width: 1500px) {
+  .avatar-console-voice-grid {
+    grid-template-columns: repeat(4, minmax(190px, 1fr));
+  }
+
+  .avatar-console-mosaic {
+    grid-template-columns: repeat(6, minmax(120px, 1fr));
+  }
+
+  .avatar-console-avatar-shelf {
+    grid-template-columns: repeat(5, minmax(150px, 1fr));
+  }
+}
+
+@media (max-width: 980px) {
+  .avatar-console-page {
+    grid-template-columns: 76px minmax(0, 1fr);
+  }
+
+  .avatar-console-sidebar {
+    padding: 18px 10px;
+  }
+
+  .avatar-console-brand strong,
+  .avatar-console-create span,
+  .avatar-console-nav button span,
+  .avatar-console-nav-group > span,
+  .avatar-console-api span {
+    display: none;
+  }
+
+  .avatar-console-nav button,
+  .avatar-console-api {
+    justify-content: center;
+  }
+
+  .avatar-console-explore-hero,
+  .avatar-console-video-hero,
+  .avatar-console-chat-hero,
+  .avatar-console-live-hero {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 760px) {
+  .avatar-console-page {
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+  }
+
+  .avatar-console-main {
+    min-height: 100vh;
+  }
+
+  .avatar-console-scroll {
+    padding: 14px;
+  }
+
+  .avatar-console-voice-grid,
+  .avatar-console-mosaic,
+  .avatar-console-avatar-shelf,
+  .avatar-console-video-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/src/styles/pages/canvas.css b/src/styles/pages/canvas.css
new file mode 100644
index 0000000..4939941
--- /dev/null
+++ b/src/styles/pages/canvas.css
@@ -0,0 +1,711 @@
+.studio-canvas-project-bar {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  z-index: 80;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: calc(100vw - 104px);
+  min-height: 44px;
+  padding: 6px 6px 6px 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: var(--bg-panel);
+  color: var(--fg-muted);
+  box-shadow: var(--shadow-tight);
+}
+
+.studio-canvas .react-flow__attribution {
+  display: none;
+}
+
+.canvas-page .studio-canvas-video-player {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  background: #050806;
+}
+
+.canvas-page .studio-canvas-video-player video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.canvas-page .studio-canvas-video-player__shade {
+  position: absolute;
+  inset: auto 0 0;
+  height: 38%;
+  background: rgba(0, 0, 0, 0.62);
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-video-player__center,
+.canvas-page .studio-canvas-video-player__button {
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.48);
+  color: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.canvas-page .studio-canvas-video-player__center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 8;
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  font-size: 22px;
+  transform: translate(-50%, -50%);
+}
+
+.canvas-page .studio-canvas-video-player.is-playing:not(:hover) .studio-canvas-video-player__center {
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(0.92);
+}
+
+.canvas-page .studio-canvas-video-player__controls {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  z-index: 9;
+  display: grid;
+  grid-template-columns: 30px auto minmax(90px, 1fr) 30px;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 5px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(5, 9, 7, 0.58);
+  box-shadow: none;
+  backdrop-filter: none;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-video-player__button {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  font-size: 14px;
+}
+
+.canvas-page .studio-canvas-video-player__center:hover,
+.canvas-page .studio-canvas-video-player__button:hover {
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: rgba(var(--accent-rgb), 0.18);
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+.canvas-page .studio-canvas-video-player__center:hover {
+  transform: translate(-50%, -50%) scale(1.04);
+}
+
+.canvas-page .studio-canvas-video-player__time {
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-video-player__seek {
+  width: 100%;
+  min-width: 0;
+  height: 4px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.canvas-page .studio-canvas-video-player__seek::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+}
+
+.studio-canvas-project-bar__identity {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  max-width: min(320px, 34vw);
+}
+
+.studio-canvas-project-bar__name {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 1000;
+  line-height: 1.2;
+}
+
+.studio-canvas-project-bar__name span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-canvas-project-bar__name-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: min(260px, 32vw);
+}
+
+.studio-canvas-project-bar__name-form input {
+  width: min(220px, 28vw);
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.42);
+  border-radius: 9px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.studio-canvas-project-bar__name-form button,
+.studio-canvas-project-bar__rename {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 9px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.studio-canvas-project-bar__name-form button:hover,
+.studio-canvas-project-bar__rename:hover {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.studio-canvas-project-bar__status {
+  max-width: min(360px, 42vw);
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-canvas-project-bar__status.is-success {
+  color: var(--accent);
+}
+
+.studio-canvas-project-bar__status.is-error {
+  color: var(--error);
+}
+
+.studio-canvas-project-bar__save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 84px;
+  min-height: 34px;
+  padding: 0 13px;
+  border: 1px solid var(--accent);
+  border-radius: 11px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.studio-canvas-project-bar__save:hover:not(:disabled) {
+  border-color: var(--accent-hover, var(--accent));
+  background: var(--accent-hover, var(--accent));
+  transform: translateY(-1px);
+}
+
+.studio-canvas-project-bar__save:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.studio-canvas-project-bar__autosave-status {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 0 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.studio-canvas-project-bar__autosave-status--saving {
+  opacity: 1;
+  color: var(--fg-muted, #888);
+}
+
+.studio-canvas-project-bar__autosave-status--saved {
+  opacity: 1;
+  color: #10b981;
+}
+
+.studio-canvas-project-bar__autosave-status--error {
+  opacity: 1;
+  color: #ef4444;
+}
+
+.studio-canvas-project-bar__export,
+.studio-canvas-project-bar__publish {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 11px;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease,
+    opacity 160ms ease;
+}
+
+.studio-canvas-project-bar__export {
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+}
+
+.studio-canvas-project-bar__export:hover {
+  border-color: rgba(var(--accent-rgb), 0.44);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.studio-canvas-project-bar__publish {
+  border: 1px solid #35d27d;
+  background: #35d27d;
+  color: #06140b;
+}
+
+.studio-canvas-project-bar__publish:hover:not(:disabled) {
+  border-color: #4ade80;
+  background: #4ade80;
+  transform: translateY(-1px);
+}
+
+.studio-canvas-project-bar__publish:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.studio-canvas-project-bar__recent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 11px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.studio-canvas-project-bar__recent em {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 1000;
+}
+
+.studio-canvas-project-bar__recent:hover,
+.studio-canvas-project-bar__recent.is-active {
+  border-color: rgba(var(--accent-rgb), 0.44);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.studio-canvas-recent-drawer {
+  position: absolute;
+  top: 72px;
+  right: 14px;
+  z-index: 82;
+  display: grid;
+  grid-template-rows: 1fr;
+  width: min(360px, calc(100vw - 104px));
+  height: min(284px, calc(100vh - 92px));
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
+  color: var(--fg-body);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.studio-canvas-recent-drawer__list {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  min-height: 0;
+  height: 100%;
+  padding: 12px;
+  overflow-y: auto;
+}
+
+.studio-canvas-recent-project {
+  display: grid;
+  grid-template-columns: 76px 1fr;
+  gap: 12px;
+  width: 100%;
+  min-height: 84px;
+  padding: 9px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.studio-canvas-recent-project:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.46);
+  background: rgba(var(--accent-rgb), 0.1);
+  transform: translateX(-2px);
+}
+
+.studio-canvas-recent-project:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.studio-canvas-recent-project img,
+.studio-canvas-recent-project__thumb {
+  width: 76px;
+  height: 66px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-elevated);
+}
+
+.studio-canvas-recent-project img {
+  object-fit: cover;
+}
+
+.studio-canvas-recent-project__thumb {
+  display: grid;
+  place-items: center;
+  color: var(--accent);
+  font-size: 22px;
+}
+
+.studio-canvas-recent-project__body {
+  display: grid;
+  align-content: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.studio-canvas-recent-project__body strong,
+.studio-canvas-recent-project__body small,
+.studio-canvas-recent-project__body em {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-canvas-recent-project__body strong {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 1000;
+}
+
+.studio-canvas-recent-project__body small {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.studio-canvas-recent-project__body em {
+  color: var(--fg-soft);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.studio-canvas-recent-drawer__empty {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  padding: 54px 20px;
+  color: var(--fg-muted);
+  text-align: center;
+}
+
+.studio-canvas-recent-drawer__empty .anticon {
+  color: var(--accent);
+  font-size: 30px;
+}
+
+.studio-canvas-recent-drawer__empty strong {
+  color: var(--fg-body);
+  font-size: 15px;
+}
+
+.studio-canvas-recent-drawer__empty span {
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.studio-canvas-recent-drawer__community {
+  display: none;
+  min-height: 42px;
+  margin: 0 12px 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.44);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 1000;
+  cursor: pointer;
+}
+
+.studio-canvas-recent-drawer__community:hover {
+  background: var(--accent);
+  color: #061014;
+}
+
+.studio-tool-layout--canvas-empty {
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-areas: "canvas";
+}
+
+.studio-canvas.is-empty-projects {
+  overflow: hidden;
+}
+
+.studio-canvas.is-empty-projects .react-flow__controls {
+  display: none;
+}
+
+.studio-canvas-empty-projects {
+  position: absolute;
+  inset: 0;
+  z-index: 84;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 18px;
+  padding: 32px;
+  color: var(--fg-body);
+  text-align: center;
+  pointer-events: none;
+}
+
+.studio-canvas-empty-projects strong {
+  max-width: min(560px, calc(100vw - 180px));
+  color: var(--fg-body);
+  font-size: clamp(20px, 2vw, 28px);
+  font-weight: 1000;
+  line-height: 1.35;
+}
+
+.studio-canvas-empty-projects__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 132px;
+  min-height: 42px;
+  padding: 0 22px;
+  border: 1px solid var(--accent);
+  border-radius: 12px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 14px;
+  font-weight: 1000;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: none;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.studio-canvas-empty-projects__button:hover {
+  border-color: var(--accent-hover, var(--accent));
+  background: var(--accent-hover, var(--accent));
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+@media (max-width: 640px) {
+  .studio-canvas-project-bar {
+    right: 10px;
+    left: 10px;
+    gap: 6px;
+    justify-content: space-between;
+  }
+
+  .studio-canvas-project-bar__status {
+    max-width: calc(100vw - 140px);
+  }
+
+  .studio-canvas-project-bar__identity {
+    max-width: none;
+  }
+
+  .studio-canvas-project-bar__name-form {
+    min-width: 0;
+  }
+
+  .studio-canvas-project-bar__name-form input {
+    width: min(180px, 42vw);
+  }
+
+  .studio-canvas-project-bar__recent span,
+  .studio-canvas-project-bar__export span,
+  .studio-canvas-project-bar__publish span {
+    display: none;
+  }
+
+  .studio-canvas-project-bar__export,
+  .studio-canvas-project-bar__publish,
+  .studio-canvas-project-bar__save,
+  .studio-canvas-project-bar__recent {
+    min-width: 34px;
+    padding: 0 9px;
+  }
+
+  .studio-canvas-recent-drawer {
+    top: 68px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+  }
+
+  .studio-canvas-empty-projects strong {
+    max-width: calc(100vw - 48px);
+    font-size: 20px;
+  }
+}
+
+.studio-canvas-zoom-controls {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  z-index: 80;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--bg-panel);
+  pointer-events: auto;
+}
+
+.studio-canvas-zoom-controls button {
+  display: inline-grid;
+  place-items: center;
+  min-width: 32px;
+  height: 30px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+  transition: background 140ms ease, color 140ms ease;
+}
+
+.studio-canvas-zoom-controls button:hover {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.studio-canvas-zoom-controls__pct {
+  min-width: 48px !important;
+  font-size: 12px !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.studio-canvas-align-guides {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 15;
+}
+
+.studio-canvas-align-guide {
+  position: absolute;
+  background: var(--accent);
+  opacity: 0.6;
+}
+
+.studio-canvas-align-guide--x {
+  top: -9999px;
+  bottom: -9999px;
+  width: 1px;
+}
+
+.studio-canvas-align-guide--y {
+  left: -9999px;
+  right: -9999px;
+  height: 1px;
+}
diff --git a/src/styles/pages/community.css b/src/styles/pages/community.css
new file mode 100644
index 0000000..8991a70
--- /dev/null
+++ b/src/styles/pages/community.css
@@ -0,0 +1,119 @@
+/* Community page rules move here as they are retired from legacy-pages.css. */
+
+.community-page .community-case-card__preview {
+  grid-area: 1 / 1 / 2 / 2;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  cursor: pointer;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.community-page .community-case-card__preview > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.community-page .community-case-card__preview:hover,
+.community-page .community-case-card__preview:focus-visible {
+  background: transparent;
+  box-shadow: none;
+}
+
+.community-page .community-carousel__slide--video {
+  padding: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.community-page .community-carousel__slide--video::before,
+.community-page .community-carousel__slide--video::after {
+  content: none;
+  display: none;
+}
+
+.community-page .community-carousel__video {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  object-fit: cover;
+}
+
+.community-page .community-carousel__slide--video:not(.is-center) .community-carousel__video {
+  filter: brightness(0.72) saturate(0.9);
+}
+
+.community-case-empty {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 260px;
+  overflow: hidden;
+  padding: 42px 24px;
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.2);
+  border-radius: var(--radius-md, 8px);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb, 0, 255, 136), 0.1), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
+    var(--bg-surface, rgba(255, 255, 255, 0.04));
+  color: var(--fg-muted, #8b968f);
+  text-align: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.community-case-empty::before {
+  content: "";
+  position: absolute;
+  inset: 14px;
+  border: 1px dashed rgba(var(--accent-rgb, 0, 255, 136), 0.16);
+  border-radius: calc(var(--radius-md, 8px) - 2px);
+  pointer-events: none;
+}
+
+.community-case-empty__icon {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
+  border-radius: var(--radius-sm, 8px);
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
+  color: var(--accent, #00ff88);
+  font-size: 22px;
+}
+
+.community-case-empty strong {
+  position: relative;
+  z-index: 1;
+  color: var(--fg-body, #f3f5f2);
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.community-case-empty > span:not(.community-case-empty__icon) {
+  position: relative;
+  z-index: 1;
+  max-width: 360px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.6;
+}
diff --git a/src/styles/pages/compliance.css b/src/styles/pages/compliance.css
new file mode 100644
index 0000000..cf51f51
--- /dev/null
+++ b/src/styles/pages/compliance.css
@@ -0,0 +1,789 @@
+.community-review-page,
+.report-page {
+  min-height: 100%;
+  background: #0d0d0f;
+  color: var(--fg-body);
+}
+
+.community-review-page__inner,
+.report-page__inner {
+  width: min(1180px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 34px 0 48px;
+}
+
+.community-review-toolbar,
+.report-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.community-review-toolbar {
+  margin-bottom: 18px;
+}
+
+.community-review-toolbar span,
+.report-hero p,
+.community-review-meta,
+.community-review-list__item small,
+.community-review-note-preview,
+.report-contact-strip span,
+.report-form label,
+.report-form__actions span {
+  color: var(--fg-muted);
+}
+
+.community-review-toolbar h1,
+.report-hero h1 {
+  margin: 4px 0 6px;
+  color: var(--fg-body);
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.15;
+}
+
+.community-review-toolbar p,
+.report-hero p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.community-review-toolbar__actions,
+.community-review-tabs,
+.community-review-status-tabs,
+.community-review-actions,
+.report-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.community-review-toolbar__actions button,
+.community-review-tabs button,
+.community-review-status-tabs button,
+.community-review-actions button,
+.community-review-access button,
+.report-form__actions button,
+.report-success button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-weight: 800;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.community-review-toolbar__actions button:hover,
+.community-review-tabs button:hover,
+.community-review-status-tabs button:hover,
+.community-review-actions button:hover,
+.community-review-access button:hover,
+.report-form__actions button:hover,
+.report-success button:hover {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--bg-hover);
+  transform: translateY(-1px);
+}
+
+.community-review-toolbar__actions button:first-child,
+.community-review-tabs button.is-active,
+.community-review-status-tabs button.is-active,
+.community-review-actions button:last-child,
+.community-review-access button,
+.report-form__actions button,
+.report-success button {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #061014;
+}
+
+.community-review-actions button:first-child {
+  border-color: rgba(255, 90, 95, 0.42);
+  background: rgba(255, 90, 95, 0.12);
+  color: #ff9a9d;
+}
+
+.community-review-toolbar__actions button:disabled,
+.community-review-actions button:disabled,
+.report-form__actions button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.community-review-tabs,
+.community-review-status-tabs {
+  margin: 0 0 14px;
+}
+
+.community-review-tabs {
+  padding: 5px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  background: var(--bg-inset);
+}
+
+.community-review-tabs button {
+  min-width: 112px;
+  border-color: transparent;
+  background: transparent;
+}
+
+.community-review-status-tabs button {
+  min-height: 34px;
+  padding: 0 12px;
+}
+
+.community-review-error,
+.report-form__error {
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 90, 95, 0.28);
+  border-radius: 12px;
+  background: rgba(255, 90, 95, 0.1);
+  color: #ff9a9d;
+}
+
+.community-case-add-success {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.32);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-weight: 800;
+}
+
+.community-review-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  min-height: 580px;
+}
+
+.community-review-list,
+.community-review-detail,
+.community-case-add-form,
+.community-case-add-preview,
+.report-form,
+.report-success,
+.community-review-access {
+  border: 1px solid var(--border-subtle);
+  border-radius: 18px;
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.community-case-add-targets button {
+  gap: 8px;
+}
+
+.community-case-add-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
+  gap: 16px;
+  align-items: start;
+}
+
+.community-case-add-form {
+  display: grid;
+  gap: 16px;
+  padding: 22px;
+}
+
+.community-case-add-form__grid {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr 150px;
+  gap: 12px;
+}
+
+.community-case-add-form label,
+.community-case-add-upload-row label {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.community-case-add-form input,
+.community-case-add-form select,
+.community-case-add-form textarea {
+  width: 100%;
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  outline: none;
+}
+
+.community-case-add-form input,
+.community-case-add-form select {
+  min-height: 42px;
+  padding: 0 12px;
+}
+
+.community-case-add-form textarea {
+  min-height: 132px;
+  padding: 12px;
+  resize: vertical;
+}
+
+.community-case-add-form input:focus,
+.community-case-add-form select:focus,
+.community-case-add-form textarea:focus {
+  border-color: rgba(var(--accent-rgb), 0.52);
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
+}
+
+.community-case-add-upload-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: end;
+}
+
+.community-case-add-upload-row > button,
+.community-case-add-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-weight: 800;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.community-case-add-upload-row > button:hover,
+.community-case-add-actions button:hover {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--bg-hover);
+  transform: translateY(-1px);
+}
+
+.community-case-add-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.community-case-add-actions button:first-child {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #061014;
+}
+
+.community-case-add-actions button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.community-case-add-preview {
+  position: sticky;
+  top: 24px;
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.community-case-add-preview > span {
+  width: fit-content;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.community-case-add-preview strong {
+  color: var(--fg-body);
+  font-size: 20px;
+  line-height: 1.25;
+}
+
+.community-case-add-preview p {
+  margin: 0;
+  color: var(--fg-muted);
+  line-height: 1.65;
+}
+
+.community-case-add-preview img,
+.community-case-add-preview__empty {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: var(--bg-inset);
+  object-fit: cover;
+}
+
+.community-case-add-preview__empty {
+  display: grid;
+  place-items: center;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.community-case-add-preview dl {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px 10px;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.community-case-add-preview dt {
+  font-weight: 800;
+}
+
+.community-case-add-preview dd {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--fg-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.community-review-list {
+  min-height: 0;
+  max-height: calc(100svh - 230px);
+  padding: 10px;
+  overflow: auto;
+}
+
+.community-review-list__item {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  grid-template-areas:
+    "thumb status"
+    "thumb title"
+    "thumb meta";
+  gap: 4px 12px;
+  width: 100%;
+  min-height: 92px;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 14px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.community-review-layout--reports .community-review-list__item {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "status"
+    "title"
+    "meta";
+  min-height: 84px;
+}
+
+.community-review-list__item:hover,
+.community-review-list__item.is-active {
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: var(--bg-hover);
+}
+
+.community-review-list__item img,
+.community-review-list__thumb {
+  grid-area: thumb;
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+  background: var(--bg-inset);
+  object-fit: cover;
+}
+
+.community-review-list__item > span:not(.community-review-list__thumb) {
+  grid-area: status;
+  justify-self: start;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.community-review-list__item strong {
+  grid-area: title;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.community-review-list__item small {
+  grid-area: meta;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.community-review-list__empty,
+.community-review-detail--empty {
+  display: grid;
+  place-items: center;
+  min-height: 180px;
+  color: var(--fg-muted);
+  text-align: center;
+}
+
+.community-review-detail {
+  display: grid;
+  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.community-review-layout--reports .community-review-detail {
+  grid-template-columns: 1fr;
+}
+
+.community-review-detail__cover {
+  position: relative;
+  min-height: 100%;
+  background: var(--bg-inset);
+}
+
+.community-review-detail__cover img {
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  object-fit: cover;
+}
+
+.community-review-detail__cover span {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(13, 13, 15, 0.78);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.community-review-detail__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 22px;
+}
+
+.community-review-detail__body header span,
+.report-hero__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.community-review-detail__body h2 {
+  margin: 10px 0 8px;
+  color: var(--fg-body);
+  font-size: 24px;
+}
+
+.community-review-detail__body p {
+  margin: 0;
+  color: var(--fg-muted);
+  line-height: 1.7;
+}
+
+.community-review-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  font-size: 13px;
+}
+
+.community-review-meta span,
+.community-review-note-preview,
+.community-review-report-raw {
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--bg-inset);
+}
+
+.community-review-note {
+  display: grid;
+  gap: 8px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.community-review-note textarea,
+.report-form input,
+.report-form select,
+.report-form textarea {
+  width: 100%;
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  outline: none;
+}
+
+.community-review-note textarea {
+  min-height: 118px;
+  padding: 12px;
+  resize: vertical;
+}
+
+.community-review-note textarea:focus,
+.report-form input:focus,
+.report-form select:focus,
+.report-form textarea:focus {
+  border-color: rgba(var(--accent-rgb), 0.52);
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
+}
+
+.community-review-report-detail .community-review-detail__body {
+  padding: 26px;
+}
+
+.community-review-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.36);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 800;
+}
+
+.community-review-report-raw {
+  display: grid;
+  gap: 6px;
+  color: var(--fg-muted);
+}
+
+.community-review-report-raw span {
+  color: var(--fg-body);
+  font-weight: 800;
+}
+
+.community-review-access {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  width: min(520px, calc(100% - 40px));
+  margin: 80px auto;
+  padding: 34px 28px;
+  text-align: center;
+}
+
+.community-review-access > .anticon {
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  font-size: 24px;
+}
+
+.community-review-access h1,
+.report-success h2 {
+  margin: 0;
+  color: var(--fg-body);
+}
+
+.community-review-access p,
+.report-success p {
+  margin: 0;
+  color: var(--fg-muted);
+  line-height: 1.7;
+}
+
+.report-page__inner {
+  width: min(920px, calc(100% - 48px));
+}
+
+.report-hero {
+  justify-content: flex-start;
+  margin-bottom: 18px;
+}
+
+.report-hero__icon {
+  flex: 0 0 52px;
+  width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  font-size: 22px;
+}
+
+.report-contact-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.report-contact-strip span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  font-size: 13px;
+}
+
+.report-form {
+  display: grid;
+  gap: 16px;
+  padding: 22px;
+}
+
+.report-form label {
+  display: grid;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.report-form input,
+.report-form select {
+  min-height: 42px;
+  padding: 0 12px;
+}
+
+.report-form textarea {
+  min-height: 132px;
+  padding: 12px;
+  resize: vertical;
+}
+
+.report-form__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.report-success {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  padding: 42px 24px;
+  text-align: center;
+}
+
+.report-success > .anticon {
+  color: var(--accent);
+  font-size: 42px;
+}
+
+@media (max-width: 900px) {
+  .community-review-page__inner,
+  .report-page__inner {
+    width: min(100% - 28px, 720px);
+    padding-top: 24px;
+  }
+
+  .community-review-toolbar {
+    flex-direction: column;
+  }
+
+  .community-review-layout,
+  .community-review-detail,
+  .community-case-add-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .community-case-add-form__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .community-case-add-preview {
+    position: static;
+  }
+
+  .community-review-list {
+    max-height: none;
+  }
+
+  .community-review-detail__cover img {
+    min-height: 240px;
+  }
+
+  .community-review-meta,
+  .report-form__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .community-review-toolbar__actions,
+  .community-review-actions,
+  .community-case-add-upload-row,
+  .community-case-add-actions,
+  .report-form__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .community-review-toolbar__actions button,
+  .community-review-actions button,
+  .community-case-add-upload-row > button,
+  .community-case-add-actions button,
+  .report-form__actions button {
+    width: 100%;
+  }
+
+  .community-review-tabs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
diff --git a/src/styles/pages/ecommerce-video.css b/src/styles/pages/ecommerce-video.css
new file mode 100644
index 0000000..2d91b1e
--- /dev/null
+++ b/src/styles/pages/ecommerce-video.css
@@ -0,0 +1,510 @@
+.product-clone-page[data-tool="clone"] .product-clone-preview--video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  align-content: initial;
+  justify-items: initial;
+  gap: 0;
+  overflow: hidden;
+  background: #0e1014;
+  scrollbar-color: #353b45 #0e1014;
+}
+
+.ecom-video-workspace {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #0e1014;
+  color: #e5ebf4;
+}
+
+.ecom-video-flowbar {
+  position: relative;
+  z-index: 3;
+  display: grid;
+  grid-template-columns: auto minmax(96px, 1fr) auto;
+  align-items: center;
+  gap: 18px;
+  min-height: 58px;
+  border-bottom: 1px solid #242a33;
+  background: #11151b;
+  padding: 10px 16px;
+}
+
+.ecom-video-flowbar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ecom-video-flowbar__pulse {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #48505c;
+}
+
+.ecom-video-flowbar__pulse.is-active {
+  background: #34d399;
+}
+
+.ecom-video-flowbar__wave {
+  display: inline-flex;
+  align-items: end;
+  gap: 3px;
+  width: 24px;
+  height: 18px;
+}
+
+.ecom-video-flowbar__wave i {
+  display: block;
+  width: 4px;
+  height: 8px;
+  border-radius: 999px;
+  background: #5b6675;
+  animation: ecom-video-wave 1.1s ease-in-out infinite;
+}
+
+.ecom-video-flowbar__wave i:nth-child(2) {
+  height: 15px;
+  animation-delay: 120ms;
+}
+
+.ecom-video-flowbar__wave i:nth-child(3) {
+  height: 11px;
+  animation-delay: 240ms;
+}
+
+.ecom-video-step-dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ecom-video-step-dot {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #343b46;
+}
+
+.ecom-video-step-dot.is-done {
+  background: #34d399;
+}
+
+.ecom-video-step-dot.is-active {
+  background: #53e5ff;
+  animation: ecom-video-node-breathe 1.2s ease-in-out infinite;
+}
+
+.ecom-video-flowbar__actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.ecom-video-flowbar__error {
+  max-width: min(260px, 28vw);
+  overflow: hidden;
+  color: #ff9f9f;
+  font-size: 12px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ecom-video-flow-action {
+  display: inline-grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid #1c4d3a;
+  border-radius: 8px;
+  background: #34d399;
+  color: #06110e;
+  padding: 0;
+  font-size: 17px;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.ecom-video-flow-action:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.ecom-video-flow-action--ghost {
+  background: #0e2b26;
+  color: #baf6ff;
+  border-color: #1a4d40;
+}
+
+.ecom-video-flow-action--danger {
+  border-color: #4d1a1a;
+  background: #2b1212;
+  color: #ffb1b1;
+}
+
+.ecom-video-flow-action:disabled {
+  border-color: #303743;
+  background: #20252d;
+  color: #697486;
+  cursor: not-allowed;
+}
+
+.ecom-video-flow-canvas {
+  position: relative;
+  min-height: 0;
+  overflow: auto;
+  background: #101318;
+  padding: 26px;
+}
+
+.ecom-video-flow-map {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(24px, 3vw, 48px);
+  min-width: 0;
+  min-height: 100%;
+}
+
+.ecom-video-flow-lines {
+  position: absolute;
+  inset: 50% 0 auto;
+  z-index: 0;
+  width: 100%;
+  height: min(72%, 420px);
+  overflow: visible;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.ecom-video-flow-lines path {
+  fill: none;
+  stroke: #485365;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 12 14;
+}
+
+.ecom-video-flow-lines path.is-active {
+  stroke: #34d399;
+  animation: ecom-video-path-dash 1.8s linear infinite;
+}
+
+.ecom-video-flow-map > :not(.ecom-video-flow-lines) {
+  position: relative;
+  z-index: 1;
+}
+
+.ecom-video-scene-strip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(12px, 2vw, 24px);
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding: 28px 4px;
+  scrollbar-width: thin;
+  scrollbar-color: #414958 #101318;
+}
+
+.ecom-video-flow-node {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border: 1px solid #333a45;
+  border-radius: 8px;
+  background: #172027;
+  animation: ecom-video-node-in 360ms ease both;
+}
+
+.ecom-video-flow-node.is-ready,
+.ecom-video-flow-node.is-completed {
+  border-color: #1c4d3a;
+  background: #162820;
+}
+
+.ecom-video-flow-node.is-running,
+.ecom-video-flow-node.is-pending {
+  border-color: #1a4d4d;
+  animation: ecom-video-node-breathe 1.6s ease-in-out infinite;
+}
+
+.ecom-video-flow-node.is-failed {
+  border-color: #4d1a1a;
+  background: #2a1b1d;
+}
+
+.ecom-video-flow-node--source,
+.ecom-video-flow-node--final {
+  width: min(100%, 142px);
+  aspect-ratio: 9 / 13;
+}
+
+.ecom-video-flow-node--final {
+  border-color: #3d3020;
+}
+
+.ecom-video-flow-node--final.is-completed {
+  border-color: #4d3a1a;
+  background: #2a2116;
+}
+
+.ecom-video-flow-node--scene {
+  width: clamp(76px, 7vw, 104px);
+  aspect-ratio: 9 / 16;
+}
+
+.ecom-video-flow-node__media,
+.ecom-video-flow-node__media img,
+.ecom-video-flow-node__media video {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ecom-video-flow-node__media img,
+.ecom-video-flow-node__media video {
+  object-fit: cover;
+}
+
+.ecom-video-flow-node__placeholder {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  background: #18231f;
+  color: #7eeecf;
+  font-size: 30px;
+}
+
+.ecom-video-flow-node__status-orb {
+  position: absolute;
+  left: 9px;
+  top: 9px;
+  z-index: 4;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #0c1016;
+  border-radius: 999px;
+  background: #687386;
+}
+
+.ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
+.ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
+  background: #34d399;
+}
+
+.ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
+.ecom-video-flow-node.is-pending .ecom-video-flow-node__status-orb {
+  background: #53e5ff;
+}
+
+.ecom-video-flow-node.is-failed .ecom-video-flow-node__status-orb {
+  background: #ff5e5e;
+}
+
+.ecom-video-flow-node--final.is-completed .ecom-video-flow-node__status-orb {
+  background: #ffb84d;
+}
+
+.ecom-video-flow-node__progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  height: 4px;
+  overflow: hidden;
+  background: #242830;
+}
+
+.ecom-video-flow-node__progress i {
+  display: block;
+  height: 100%;
+  background: #53e5ff;
+  transition: width 240ms ease;
+}
+
+.ecom-video-flow-node__retry {
+  position: absolute;
+  right: 9px;
+  top: 9px;
+  z-index: 5;
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid #4d1a1a;
+  border-radius: 999px;
+  background: #241417;
+  color: #ffb1b1;
+  cursor: pointer;
+}
+
+.ecom-video-flow-connector,
+.ecom-video-scene-link {
+  position: relative;
+  height: 4px;
+  border-radius: 999px;
+  background: #303843;
+}
+
+.ecom-video-flow-connector {
+  flex: 0 0 clamp(30px, 3vw, 56px);
+}
+
+.ecom-video-scene-link {
+  flex: 0 0 clamp(26px, 3vw, 44px);
+}
+
+.ecom-video-flow-connector i,
+.ecom-video-scene-link i {
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: #34d399;
+}
+
+.ecom-video-flow-connector.is-active i,
+.ecom-video-scene-link.is-active i {
+  animation: ecom-video-flow-line 1.55s linear infinite;
+}
+
+.ecom-video-flow-dock {
+  position: sticky;
+  z-index: 4;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 20px;
+}
+
+.ecom-video-flow-dock button {
+  display: inline-grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid #3d3020;
+  border-radius: 8px;
+  background: #15181f;
+  color: #ffe1ad;
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+
+.ecom-video-flow-dock button:hover {
+  border-color: #4d3a1a;
+  background: #241c12;
+  transform: translateY(-1px);
+}
+
+.ecom-video-flow-notice {
+  position: absolute;
+  right: 22px;
+  bottom: 18px;
+  z-index: 5;
+  border: 1px solid #1c3d2a;
+  border-radius: 999px;
+  background: #08110f;
+  color: #a8ffe3;
+  padding: 7px 11px;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+@keyframes ecom-video-flow-line {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes ecom-video-path-dash {
+  to { stroke-dashoffset: -52; }
+}
+
+@keyframes ecom-video-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ecom-video-node-breathe {
+  0%, 100% { border-color: #1a4d4d; }
+  50% { border-color: #53e5ff; }
+}
+
+@keyframes ecom-video-pulse {
+  from {
+    opacity: 0.8;
+    transform: scale(0.7);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+}
+
+@keyframes ecom-video-wave {
+  0%, 100% {
+    opacity: 0.45;
+    transform: scaleY(0.72);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@media (max-width: 900px) {
+  .ecom-video-flowbar {
+    grid-template-columns: auto 1fr;
+    gap: 12px;
+  }
+
+  .ecom-video-step-dots {
+    justify-content: flex-start;
+    order: 3;
+    grid-column: 1 / -1;
+  }
+
+  .ecom-video-flowbar__actions {
+    justify-content: flex-end;
+  }
+
+  .ecom-video-flow-canvas {
+    padding: 20px;
+  }
+
+  .ecom-video-flow-node--scene {
+    width: 118px;
+  }
+}
diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css
new file mode 100644
index 0000000..c4972a3
--- /dev/null
+++ b/src/styles/pages/ecommerce.css
@@ -0,0 +1,7893 @@
+.product-clone-page {
+  display: grid;
+  grid-template-rows: 54px minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f5f6f8;
+  color: #111827;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
+}
+
+/* Product set page: target dark two-column workspace with floating detail input. */
+.product-clone-page[data-tool="set"] {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  background: #101115;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] > .product-clone-shell {
+  display: grid;
+  grid-template-columns: minmax(440px, 570px) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background: #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail {
+  display: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr);
+  min-height: 0;
+  border-right: 1px solid #2a2d36;
+  background: #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+  display: block;
+  min-height: 0;
+  overflow: auto;
+  padding: 44px 36px 46px;
+  scrollbar-color: #3a3d49 #101115;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
+  margin: 0 0 30px;
+  border: 1px solid #2b2e39;
+  border-radius: 18px;
+  background: #17181f;
+  padding: 28px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 24px;
+  color: #d8deed;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) h2 .anticon {
+  color: #737786;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload {
+  min-height: 316px;
+  gap: 14px;
+  border: 2px dashed #3a3d4b;
+  border-radius: 18px;
+  background: #1a1d21;
+  color: #dbe7f7;
+  padding: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload:hover,
+.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
+  border-color: #34d399;
+  background: #1a2421;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-icon {
+  display: grid;
+  width: 72px;
+  height: 72px;
+  place-items: center;
+  border-radius: 999px;
+  background: #20282a;
+  color: #34d399;
+  font-size: 32px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-title {
+  color: #bdd0e6;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 168px;
+  height: 52px;
+  border-radius: 10px;
+  background: #34d399;
+  color: #03130d;
+  padding: 0 22px;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload strong span {
+  color: inherit;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-note {
+  color: #788294;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb-row {
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb {
+  border-color: #2c303a;
+  background: #202229;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb button {
+  border-color: #303541;
+  background: #17181f;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-block {
+  gap: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-block + .product-set-setting-block {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 0;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-title {
+  color: #7f8798;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button {
+  height: 56px;
+  border: 1px solid #2d303b;
+  border-radius: 10px;
+  background: #1d1e26;
+  color: #c1ccdd;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button:hover {
+  border-color: #414653;
+  background: #232530;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
+  border-color: #34d399;
+  background: #34d399;
+  color: #04130e;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid label {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid label > span {
+  position: absolute;
+  left: 18px;
+  top: 10px;
+  z-index: 1;
+  color: #7d8392;
+  font-size: 13px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid select {
+  width: 100%;
+  height: 72px;
+  border: 1px solid #2d303b;
+  border-radius: 10px;
+  background: #1d1e26;
+  color: #ffffff;
+  padding: 28px 18px 8px;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview {
+  position: relative;
+  display: grid;
+  min-height: 0;
+  overflow: hidden;
+  align-content: center;
+  justify-items: center;
+  gap: 24px;
+  background: #101115;
+  padding: 64px 56px 210px;
+  scrollbar-color: #3a3d49 #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline {
+  position: absolute;
+  left: 32px;
+  right: 32px;
+  top: 10px;
+  text-align: center;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline h1 {
+  display: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p {
+  color: #758096;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p span {
+  color: #758096;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview {
+  width: min(100%, 640px);
+  min-height: 300px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: #80899c;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview .anticon {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #2b2e39;
+  border-radius: 999px;
+  background: #1a1b22;
+  color: #565b69;
+  font-size: 46px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview strong {
+  color: #dbe3f2;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview span {
+  max-width: 620px;
+  color: #747d90;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board {
+  width: min(100%, 980px);
+  min-height: 470px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board :is(button, figure) {
+  border: 1px solid #2b2e39;
+  background: #17181f;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail {
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 28px;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  border: 1px solid #2b2e39;
+  border-radius: 18px;
+  background: #17181f;
+  padding: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail__head {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #d8deed;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail__head span {
+  color: #767f91;
+  font-size: 13px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea {
+  min-width: 0;
+  min-height: 72px;
+  max-height: 150px;
+  border: 1px solid #2d303b;
+  border-radius: 12px;
+  outline: none;
+  resize: vertical;
+  background: #1d1e26;
+  color: #e7ecf6;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea::placeholder {
+  color: #687184;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
+  border-color: #34d399;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-submit {
+  align-self: stretch;
+  min-width: 148px;
+  border: 0;
+  border-radius: 12px;
+  background: #34d399;
+  color: #04130e;
+  padding: 0 18px;
+  font-size: 17px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-submit:disabled {
+  background: #26342f;
+  color: #687568;
+  cursor: not-allowed;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-help {
+  display: none;
+}
+
+@media (max-width: 1520px) {
+  .product-clone-page[data-tool="set"] > .product-clone-shell {
+    grid-template-columns: minmax(370px, 535px) minmax(0, 1fr);
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+    padding: 44px 36px 46px;
+  }
+
+  .product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
+    margin-bottom: 30px;
+    border-radius: 18px;
+    padding: 28px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-upload {
+    min-height: 316px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-output-grid button {
+    height: 56px;
+    font-size: 20px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-field-grid select {
+    height: 72px;
+    font-size: 20px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-preview {
+    padding: 64px 56px 210px;
+  }
+}
+
+/* Tail guard for ecommerce AI color parity. */
+.product-clone-page[data-tool="clone"] {
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  background: var(--bg-base);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo, .clone-ai-card, .clone-ai-platform-spec, .clone-ai-count-panel, .clone-ai-replicate-panel, .clone-ai-module-panel, .clone-ai-model-panel, .clone-ai-video-panel, .clone-ai-empty-state .anticon, .clone-ai-main-result, .clone-ai-result-grid button, .clone-ai-input-wrapper) {
+  border-color: var(--border-weak);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo, .clone-ai-card, .clone-ai-platform-spec, .clone-ai-count-panel, .clone-ai-replicate-panel, .clone-ai-module-panel, .clone-ai-model-panel, .clone-ai-video-panel, .clone-ai-empty-state .anticon, .clone-ai-main-result, .clone-ai-result-grid button, .clone-ai-input-wrapper) {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo em, .clone-ai-upload-zone, .clone-ai-upload-icon, .clone-ai-uploaded-file, .clone-ai-tag-group button, .clone-ai-basic-select > button, .clone-ai-basic-select__menu, .clone-ai-basic-select__menu button, .clone-ai-replicate-tabs button, .clone-ai-replicate-upload, .clone-ai-replicate-link input, .clone-ai-replicate-levels button, .clone-ai-count-row, .clone-ai-count-stepper button, .clone-ai-module-list button, .clone-ai-model-tabs button, .clone-ai-model-scene-grid button, .clone-ai-model-select, .clone-ai-model-select > button, .clone-ai-model-select__menu, .clone-ai-model-select__menu button, .clone-ai-video-options button, .clone-ai-video-smart, .clone-ai-video-smart i, .clone-ai-send-button) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-upload-zone:hover, .clone-ai-upload-zone.is-dragging, .clone-ai-tag-group button:hover, .clone-ai-basic-select > button:hover, .clone-ai-basic-select > button.is-open, .clone-ai-basic-select__menu button:hover, .clone-ai-basic-select__menu button.is-active, .clone-ai-replicate-tabs button:hover, .clone-ai-replicate-upload:hover, .clone-ai-replicate-levels button:hover, .clone-ai-count-stepper button:hover:not(:disabled), .clone-ai-module-list button:hover, .clone-ai-model-tabs button:hover, .clone-ai-model-scene-grid button:hover, .clone-ai-model-select > button:hover, .clone-ai-model-select > button.is-open, .clone-ai-model-select__menu button:hover, .clone-ai-model-select__menu button.is-active, .clone-ai-video-options button:hover, .clone-ai-video-smart:hover, .clone-ai-send-button:hover:not(:disabled), .clone-ai-main-result:hover, .clone-ai-result-grid button:hover) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo em.is-ready, .clone-ai-tag-group button.is-active, .clone-ai-basic-select__menu button.is-active, .clone-ai-replicate-tabs button.is-active, .clone-ai-replicate-levels button.is-active, .clone-ai-module-list button.is-active, .clone-ai-model-tabs button.is-active, .clone-ai-model-scene-grid button.is-active, .clone-ai-model-select__menu button.is-active, .clone-ai-video-options button.is-active, .clone-ai-video-smart.is-on) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo strong, .clone-ai-card h2, .clone-ai-platform-spec strong, .clone-ai-basic-select > button strong, .clone-ai-model-select > button strong, .clone-ai-preview-header strong, .clone-ai-empty-state strong, .clone-ai-input-wrapper textarea) {
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo em, .clone-ai-card h2 .anticon, .clone-ai-upload-title, .clone-ai-upload-hint, .clone-ai-settings-label, .clone-ai-basic-select > button span, .clone-ai-model-select > button span, .clone-ai-preview-header span, .clone-ai-empty-state, .clone-ai-empty-state span, .clone-ai-char-count, .clone-ai-input-wrapper textarea::placeholder) {
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo__mark, .clone-ai-upload-zone strong, .clone-ai-generate, .clone-ai-send-button) {
+  background: var(--accent);
+  color: var(--dg-button-text, #061014);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-logo strong span, .clone-ai-upload-icon, .clone-ai-preview-header b, .clone-ai-video-smart.is-on i::after) {
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:disabled, .clone-ai-send-button:disabled) {
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+  background: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+}
+
+/* Final ecommerce AI color parity. Keep this block limited to colors and border tones. */
+.product-clone-page[data-tool="clone"] {
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  background: var(--bg-base);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel {
+  border-right-color: var(--border-weak);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel {
+  scrollbar-color: var(--border-default) var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-thumb {
+  border-color: var(--bg-panel);
+  background: var(--border-default);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo,
+  .clone-ai-card,
+  .clone-ai-platform-spec,
+  .clone-ai-count-panel,
+  .clone-ai-replicate-panel,
+  .clone-ai-module-panel,
+  .clone-ai-model-panel,
+  .clone-ai-video-panel,
+  .clone-ai-empty-state .anticon,
+  .clone-ai-main-result,
+  .clone-ai-result-grid button,
+  .clone-ai-input-wrapper
+) {
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-upload-zone,
+  .clone-ai-upload-icon,
+  .clone-ai-uploaded-file,
+  .clone-ai-tag-group button,
+  .clone-ai-basic-select > button,
+  .clone-ai-basic-select__menu,
+  .clone-ai-basic-select__menu button,
+  .clone-ai-replicate-tabs button,
+  .clone-ai-replicate-upload,
+  .clone-ai-replicate-link input,
+  .clone-ai-replicate-levels button,
+  .clone-ai-count-row,
+  .clone-ai-count-stepper button,
+  .clone-ai-module-list button,
+  .clone-ai-model-tabs button,
+  .clone-ai-model-scene-grid button,
+  .clone-ai-model-select,
+  .clone-ai-model-select > button,
+  .clone-ai-model-select__menu,
+  .clone-ai-model-select__menu button,
+  .clone-ai-video-options button,
+  .clone-ai-video-smart,
+  .clone-ai-video-smart i,
+  .clone-ai-send-button
+) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-upload-zone:hover,
+  .clone-ai-upload-zone.is-dragging,
+  .clone-ai-tag-group button:hover,
+  .clone-ai-basic-select > button:hover,
+  .clone-ai-basic-select > button.is-open,
+  .clone-ai-basic-select__menu button:hover,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button:hover,
+  .clone-ai-replicate-upload:hover,
+  .clone-ai-replicate-levels button:hover,
+  .clone-ai-count-stepper button:hover:not(:disabled),
+  .clone-ai-module-list button:hover,
+  .clone-ai-model-tabs button:hover,
+  .clone-ai-model-scene-grid button:hover,
+  .clone-ai-model-select > button:hover,
+  .clone-ai-model-select > button.is-open,
+  .clone-ai-model-select__menu button:hover,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button:hover,
+  .clone-ai-video-smart:hover,
+  .clone-ai-send-button:hover:not(:disabled),
+  .clone-ai-main-result:hover,
+  .clone-ai-result-grid button:hover
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em.is-ready,
+  .clone-ai-tag-group button.is-active,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-tabs button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button.is-active,
+  .clone-ai-video-smart.is-on
+) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong,
+  .clone-ai-card h2,
+  .clone-ai-platform-spec strong,
+  .clone-ai-basic-select > button strong,
+  .clone-ai-model-select > button strong,
+  .clone-ai-preview-header strong,
+  .clone-ai-empty-state strong,
+  .clone-ai-input-wrapper textarea
+) {
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-card h2 .anticon,
+  .clone-ai-upload-title,
+  .clone-ai-upload-hint,
+  .clone-ai-settings-label,
+  .clone-ai-basic-select > button span,
+  .clone-ai-model-select > button span,
+  .clone-ai-preview-header span,
+  .clone-ai-empty-state,
+  .clone-ai-empty-state span,
+  .clone-ai-char-count,
+  .clone-ai-input-wrapper textarea::placeholder
+) {
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo__mark,
+  .clone-ai-upload-zone strong,
+  .clone-ai-generate,
+  .clone-ai-send-button
+) {
+  background: var(--accent);
+  color: var(--dg-button-text, #061014);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong span,
+  .clone-ai-upload-icon,
+  .clone-ai-preview-header b,
+  .clone-ai-video-smart.is-on i::after
+) {
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-upload-zone:focus-visible,
+  .clone-ai-basic-select > button:focus-visible
+) {
+  outline-color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-generate:disabled,
+  .clone-ai-send-button:disabled
+) {
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+  background: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+}
+
+/* Ecommerce AI workspace theme parity: colors and borders only. */
+.product-clone-page[data-tool="clone"] {
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  background: var(--bg-base);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel {
+  border-right-color: var(--border-weak);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel {
+  scrollbar-color: var(--border-default) var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-thumb {
+  border-color: var(--bg-panel);
+  background: var(--border-default);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo,
+  .clone-ai-card,
+  .clone-ai-platform-spec,
+  .clone-ai-count-panel,
+  .clone-ai-replicate-panel,
+  .clone-ai-module-panel,
+  .clone-ai-model-panel,
+  .clone-ai-video-panel,
+  .clone-ai-empty-state .anticon,
+  .clone-ai-main-result,
+  .clone-ai-result-grid button,
+  .clone-ai-input-wrapper
+) {
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-upload-zone,
+  .clone-ai-upload-icon,
+  .clone-ai-uploaded-file,
+  .clone-ai-tag-group button,
+  .clone-ai-basic-select > button,
+  .clone-ai-basic-select__menu,
+  .clone-ai-basic-select__menu button,
+  .clone-ai-replicate-tabs button,
+  .clone-ai-replicate-upload,
+  .clone-ai-replicate-link input,
+  .clone-ai-replicate-levels button,
+  .clone-ai-count-row,
+  .clone-ai-count-stepper button,
+  .clone-ai-module-list button,
+  .clone-ai-model-tabs button,
+  .clone-ai-model-scene-grid button,
+  .clone-ai-model-select,
+  .clone-ai-model-select > button,
+  .clone-ai-model-select__menu,
+  .clone-ai-model-select__menu button,
+  .clone-ai-video-options button,
+  .clone-ai-video-smart,
+  .clone-ai-video-smart i,
+  .clone-ai-send-button
+) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-upload-zone:hover,
+  .clone-ai-upload-zone.is-dragging,
+  .clone-ai-tag-group button:hover,
+  .clone-ai-basic-select > button:hover,
+  .clone-ai-basic-select > button.is-open,
+  .clone-ai-basic-select__menu button:hover,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button:hover,
+  .clone-ai-replicate-upload:hover,
+  .clone-ai-replicate-levels button:hover,
+  .clone-ai-count-stepper button:hover:not(:disabled),
+  .clone-ai-module-list button:hover,
+  .clone-ai-model-tabs button:hover,
+  .clone-ai-model-scene-grid button:hover,
+  .clone-ai-model-select > button:hover,
+  .clone-ai-model-select > button.is-open,
+  .clone-ai-model-select__menu button:hover,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button:hover,
+  .clone-ai-video-smart:hover,
+  .clone-ai-send-button:hover:not(:disabled),
+  .clone-ai-main-result:hover,
+  .clone-ai-result-grid button:hover
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em.is-ready,
+  .clone-ai-tag-group button.is-active,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-tabs button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button.is-active,
+  .clone-ai-video-smart.is-on
+) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong,
+  .clone-ai-card h2,
+  .clone-ai-platform-spec strong,
+  .clone-ai-basic-select > button strong,
+  .clone-ai-model-select > button strong,
+  .clone-ai-preview-header strong,
+  .clone-ai-empty-state strong,
+  .clone-ai-input-wrapper textarea
+) {
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-card h2 .anticon,
+  .clone-ai-upload-title,
+  .clone-ai-upload-hint,
+  .clone-ai-settings-label,
+  .clone-ai-basic-select > button span,
+  .clone-ai-model-select > button span,
+  .clone-ai-preview-header span,
+  .clone-ai-empty-state,
+  .clone-ai-empty-state span,
+  .clone-ai-char-count,
+  .clone-ai-input-wrapper textarea::placeholder
+) {
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo__mark,
+  .clone-ai-upload-zone strong,
+  .clone-ai-generate,
+  .clone-ai-send-button
+) {
+  background: var(--accent);
+  color: var(--dg-button-text, #061014);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong span,
+  .clone-ai-upload-icon,
+  .clone-ai-preview-header b,
+  .clone-ai-video-smart.is-on i::after
+) {
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-upload-zone:focus-visible,
+  .clone-ai-basic-select > button:focus-visible
+) {
+  outline-color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-generate:disabled,
+  .clone-ai-send-button:disabled
+) {
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+  background: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+}
+
+/* Hot-image clone page: replaced by the uploaded ecommerce AI art tool. */
+.product-clone-page[data-tool="clone"] {
+  --clone-settings-panel-width: 550px;
+  --clone-settings-toggle-size: 36px;
+  --clone-settings-motion-duration: 520ms;
+  --clone-settings-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  background: #101115;
+  color: #eef2f6;
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--clone-settings-panel-width) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background: #101115;
+  transition: grid-template-columns var(--clone-settings-motion-duration) var(--clone-settings-motion-ease);
+  will-change: grid-template-columns;
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-rail {
+  display: none;
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel {
+  display: block;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid #2c3038;
+  background: #15171c;
+  transition:
+    border-color 340ms ease,
+    opacity var(--clone-settings-motion-duration) var(--clone-settings-motion-ease);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel {
+  display: flex;
+  width: var(--clone-settings-panel-width);
+  max-width: var(--clone-settings-panel-width);
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  gap: 14px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 20px 18px;
+  scrollbar-color: #3a3f49 #15171c;
+  scrollbar-width: thin;
+  transition:
+    opacity 360ms ease,
+    transform var(--clone-settings-motion-duration) var(--clone-settings-motion-ease);
+  will-change: opacity, transform;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
+  background: #15171c;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-thumb {
+  border: 2px solid #15171c;
+  border-radius: 999px;
+  background: #3a3f49;
+}
+
+.product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="clone"].is-settings-collapsed .product-clone-panel {
+  border-right-color: transparent;
+}
+
+.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-panel {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-18px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
+  position: absolute;
+  z-index: 8;
+  top: 50%;
+  left: calc(var(--clone-settings-panel-width) - (var(--clone-settings-toggle-size) / 2));
+  display: grid;
+  width: var(--clone-settings-toggle-size);
+  height: var(--clone-settings-toggle-size);
+  place-items: center;
+  border: 1px solid #3a3f49;
+  border-radius: 999px;
+  outline: none;
+  background: #1b1d23;
+  color: #cbd5e1;
+  box-shadow: 0 14px 30px rgb(0 0 0 / 24%);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition:
+    left var(--clone-settings-motion-duration) var(--clone-settings-motion-ease),
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
+  border-color: #34d399;
+  background: #202c28;
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
+  transform: translateY(-50%) scale(0.94);
+}
+
+.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-settings-toggle {
+  left: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid #2c3038;
+  padding: 0 0 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo__mark {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 7px;
+  background: #34d399;
+  color: #06130d;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo strong {
+  min-width: 0;
+  color: #eef2f6;
+  font-size: 16px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo strong span {
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo em {
+  border: 1px solid #343944;
+  border-radius: 999px;
+  background: #1d2027;
+  color: #7d8798;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo em.is-ready {
+  border-color: #34d399;
+  background: #17352a;
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card {
+  margin: 0;
+  border: 1px solid #2c3038;
+  border-radius: 12px;
+  background: #1b1d23;
+  padding: 14px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0 0 11px;
+  color: #b8c0cd;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card h2 .anticon {
+  color: #7c8492;
+  font-size: 15px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+  display: grid;
+  width: 100%;
+  min-height: 152px;
+  align-content: center;
+  justify-items: center;
+  gap: 8px;
+  border: 1.5px dashed #3a3f49;
+  border-radius: 10px;
+  background: #20232a;
+  color: #eef2f6;
+  padding: 14px 12px;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging {
+  border-color: #34d399;
+  background: #202c28;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:focus-visible {
+  outline: 2px solid #34d399;
+  outline-offset: 3px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-main {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 999px;
+  background: #262a33;
+  color: #34d399;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-title {
+  color: #aab4c2;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-width: 122px;
+  height: 38px;
+  border-radius: 9px;
+  background: #34d399;
+  color: #06130d;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone strong span {
+  color: inherit;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-hint {
+  color: #747d8e;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel input[type="file"] {
+  display: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
+  display: flex;
+  flex-wrap: wrap;
+  justify-self: stretch;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid #303540;
+  border-radius: 8px;
+  background: #20232a;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file button {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: #101115;
+  color: #eef2f6;
+  cursor: pointer;
+  font-size: 10px;
+  opacity: 0;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover button {
+  opacity: 1;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file button:active {
+  transform: scale(0.92);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-section {
+  display: grid;
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-section + .clone-ai-settings-section {
+  margin-top: 13px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-label {
+  color: #737d8e;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-tag-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-tag-group button {
+  height: 39px;
+  min-width: 0;
+  border: 1px solid #303540;
+  border-radius: 9px;
+  background: #22252d;
+  color: #b7bfcc;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+  color 160ms ease,
+  transform 160ms ease;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-tag-group button:hover {
+  border-color: #454b57;
+  background: #282c35;
+  color: #eef2f6;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-tag-group button.is-active {
+  border-color: #34d399;
+  background: #34d399;
+  color: #06130d;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-tag-group button:active {
+  transform: scale(0.96);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec {
+  display: grid;
+  gap: 10px;
+  margin-top: 13px;
+  border: 1px solid #303540;
+  border-radius: 12px;
+  background: #1c1f26;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec strong {
+  min-width: 0;
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec > div span {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #17352a;
+  color: #34d399;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec ul {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec li {
+  position: relative;
+  color: #8f98a8;
+  padding-left: 12px;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.45;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec li::before {
+  position: absolute;
+  top: 0.72em;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background: #34d399;
+  content: "";
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-platform-spec p {
+  margin: 0;
+  border-top: 1px solid #303540;
+  color: #34d399;
+  padding-top: 9px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-panel {
+  display: grid;
+  flex: 0 0 auto;
+  gap: 10px;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #1c1f26;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-panel p {
+  margin: 0;
+  color: #8f98a8;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.4;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-list {
+  display: grid;
+  gap: 10px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 66px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  padding: 12px 14px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-copy strong {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: #eef2f6;
+  font-size: 15px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-copy strong em {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  border-radius: 4px;
+  background: #dfeeff;
+  color: #245b9f;
+  padding: 0 5px;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-copy span {
+  color: #8f98a8;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper {
+  display: inline-grid;
+  grid-template-columns: 24px 28px 24px;
+  align-items: center;
+  justify-items: center;
+  min-width: 76px;
+  height: 38px;
+  border: 1px solid #303540;
+  border-radius: 8px;
+  background: #101115;
+  color: #eef2f6;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button {
+  display: grid;
+  width: 24px;
+  height: 30px;
+  place-items: center;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #8f98a8;
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:hover:not(:disabled) {
+  background: #26342f;
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:active:not(:disabled) {
+  transform: scale(0.92);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper button:disabled {
+  color: #4f5865;
+  cursor: not-allowed;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-count-stepper b {
+  color: #eef2f6;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-panel {
+  display: grid;
+  flex: 0 0 272px;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 9px;
+  height: 272px;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #1c1f26;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-section {
+  display: grid;
+  gap: 7px;
+  min-height: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-title {
+  color: #8f98a8;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1.15;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  height: 38px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #151922;
+  padding: 3px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button {
+  min-width: 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #9aa4b4;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button:hover {
+  color: #eef2f6;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button.is-active {
+  background: #34d399;
+  color: #06130d;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-tabs button:active {
+  transform: scale(0.97);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload {
+  position: relative;
+  display: grid;
+  min-height: 78px;
+  overflow: visible;
+  place-items: center;
+  align-content: center;
+  gap: 7px;
+  border: 1px dashed #5d84bd;
+  border-radius: 12px;
+  background: #20242c;
+  color: #eef2f6;
+  padding: 8px;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover {
+  border-color: #34d399;
+  background: #202c28;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload > span {
+  display: inline-grid;
+  grid-template-columns: auto minmax(0, max-content);
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: fit-content;
+  max-width: calc(100% - 8px);
+  height: 34px;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 9px;
+  background: #2b3039;
+  color: #eef2f6;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 900;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload > span .anticon {
+  min-width: 0;
+  color: currentcolor;
+  font-size: 15px;
+  line-height: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload em {
+  color: #9aa4b4;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview {
+  position: absolute;
+  inset: 6px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 56px);
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 10px;
+  background: #20242c;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.98);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:hover .clone-ai-replicate-preview,
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-upload:focus-visible .clone-ai-replicate-preview {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure {
+  position: relative;
+  display: block;
+  width: 56px;
+  height: 52px;
+  min-width: 0;
+  overflow: visible;
+  margin: 0;
+  border-radius: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #3a4555;
+  border-radius: 8px;
+  background: #111720;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child {
+  width: min(170px, 100%);
+  height: 52px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview figure:only-child > img {
+  object-fit: contain;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-preview b {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border: 1px solid #3a4555;
+  border-radius: 999px;
+  background: #151b24;
+  color: #eef2f6;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-link input {
+  width: 100%;
+  height: 72px;
+  border: 1px solid #303540;
+  border-radius: 12px;
+  outline: none;
+  background: #22252d;
+  color: #eef2f6;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-link input:focus {
+  border-color: #34d399;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  min-height: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  min-width: 0;
+  min-height: 82px;
+  border: 1px solid #303540;
+  border-radius: 12px;
+  background: #22252d;
+  padding: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button:hover {
+  border-color: #454b57;
+  background: #252934;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button.is-active {
+  border-color: #34d399;
+  background: #26342f;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels strong {
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-replicate-levels span {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #8f98a8;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-panel {
+  display: grid;
+  flex: 0 0 272px;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 10px;
+  height: 272px;
+  min-height: 0;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #1c1f26;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-panel p {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 0;
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-panel p svg {
+  color: #8f98a8;
+  font-size: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: start;
+  gap: 8px;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: #3d4552 #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #3d4552;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button {
+  display: grid;
+  align-content: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 68px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  padding: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button:hover {
+  border-color: #454b57;
+  background: #252934;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active {
+  border-color: #34d399;
+  background: #26342f;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list strong {
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list span {
+  overflow: hidden;
+  color: #8f98a8;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-panel {
+  display: grid;
+  flex: 0 0 272px;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 10px;
+  height: 272px;
+  min-height: 0;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #1c1f26;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-tabs button {
+  height: 34px;
+  min-width: 0;
+  border: 1px solid #303540;
+  border-radius: 8px;
+  background: #22252d;
+  color: #b7bfcc;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-tabs button:hover {
+  border-color: #454b57;
+  background: #282c35;
+  color: #eef2f6;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-tabs button.is-active {
+  border-color: #34d399;
+  background: #34d399;
+  color: #06130d;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-tabs button:active {
+  transform: scale(0.97);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: #3d4552 #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #3d4552;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scenes,
+.product-clone-page[data-tool="clone"] .clone-ai-model-profile {
+  display: grid;
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  min-height: 42px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  color: #eef2f6;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button > span {
+  display: block;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  border: 1px solid #596272;
+  border-radius: 4px;
+  background: #101115;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button:hover {
+  border-color: #454b57;
+  background: #252934;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active {
+  border-color: #34d399;
+  background: #26342f;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button.is-active > span {
+  border-color: #34d399;
+  background: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-scene-grid button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid label,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select {
+  position: relative;
+  z-index: 1;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select.is-open {
+  z-index: 24;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid label > span,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > span {
+  color: #8f98a8;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid select,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button {
+  width: 100%;
+  height: 40px;
+  min-width: 0;
+  border: 1px solid #303540;
+  border-radius: 9px;
+  outline: none;
+  background: #22252d;
+  color: #eef2f6;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 14px;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button.is-open {
+  border-color: #34d399;
+  background: #26342f;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 10%);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button:focus-visible {
+  border-color: #34d399;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button strong {
+  min-width: 0;
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button i {
+  display: block;
+  width: 8px;
+  height: 8px;
+  justify-self: end;
+  border-right: 2px solid #d9dee8;
+  border-bottom: 2px solid #d9dee8;
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select > button.is-open i {
+  transform: translateY(2px) rotate(225deg);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu {
+  position: absolute;
+  top: calc(100% + 7px);
+  left: 0;
+  right: 0;
+  z-index: 30;
+  display: grid;
+  gap: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+  border: 1px solid #303540;
+  border-radius: 8px;
+  background: #22252d;
+  background-image: none;
+  padding: 5px;
+  box-shadow: none;
+  scrollbar-width: thin;
+  scrollbar-color: #3d4552 #171a20;
+  transform-origin: top center;
+  animation: clone-ai-model-select-pop 160ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select.is-drop-up .clone-ai-model-select__menu {
+  top: auto;
+  bottom: calc(100% + 7px);
+  transform-origin: bottom center;
+  animation-name: clone-ai-model-select-pop-up;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #3d4552;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #b7bfcc;
+  padding: 0 9px;
+  font-size: 13px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 140ms ease,
+    background-color 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button.is-active {
+  background: #17352a;
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button:active {
+  transform: scale(0.98);
+}
+
+@keyframes clone-ai-model-select-pop {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes clone-ai-model-select-pop-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-textarea {
+  display: grid;
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-textarea strong {
+  color: #8f98a8;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-textarea textarea {
+  width: 100%;
+  min-height: 92px;
+  resize: none;
+  border: 1px solid #303540;
+  border-radius: 12px;
+  outline: none;
+  background: #22252d;
+  color: #eef2f6;
+  padding: 12px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-textarea textarea::placeholder {
+  color: #737d8e;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-model-textarea textarea:focus,
+.product-clone-page[data-tool="clone"] .clone-ai-model-select-grid select:focus {
+  border-color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-panel {
+  display: grid;
+  flex: 1 1 auto;
+  align-content: start;
+  gap: 12px;
+  min-height: 0;
+  overflow-y: auto;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #1c1f26;
+  padding: 12px;
+  scrollbar-width: thin;
+  scrollbar-color: #3d4552 #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: #171a20;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #3d4552;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-section {
+  display: grid;
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-title {
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-title-row strong {
+  color: #34d399;
+  font-size: 13px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options button {
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  min-width: 0;
+  min-height: 54px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  padding: 9px 8px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options button:hover {
+  border-color: #454b57;
+  background: #252934;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options button.is-active {
+  border-color: #34d399;
+  background: #26342f;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options strong {
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-options span {
+  overflow: hidden;
+  color: #8f98a8;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control {
+  display: grid;
+  gap: 10px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  padding: 18px 14px 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control input {
+  width: 100%;
+  height: 18px;
+  appearance: none;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-webkit-slider-runnable-track {
+  height: 5px;
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-webkit-slider-thumb {
+  width: 18px;
+  height: 18px;
+  margin-top: -6.5px;
+  appearance: none;
+  border: 3px solid #101115;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 0 1px #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-track {
+  height: 5px;
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, #34d399 0 var(--clone-video-duration-progress), #3a4050 var(--clone-video-duration-progress) 100%);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-control input::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 3px solid #101115;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 0 1px #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-duration-scale {
+  display: flex;
+  justify-content: space-between;
+  color: #8f98a8;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #22252d;
+  padding: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart:hover {
+  border-color: #454b57;
+  background: #252934;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on {
+  border-color: #34d399;
+  background: #26342f;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart span {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart strong {
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart em {
+  overflow: hidden;
+  color: #8f98a8;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart i {
+  position: relative;
+  display: block;
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: #101115;
+  border: 1px solid #303540;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart i::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #596272;
+  content: "";
+  transition:
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
+  border-color: #34d399;
+  background: #17352a;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i::after {
+  background: #34d399;
+  transform: translateX(16px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-select-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select {
+  position: relative;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-height: 68px;
+  min-width: 0;
+  justify-items: start;
+  gap: 6px;
+  border: 1px solid #303540;
+  border-radius: 11px;
+  background: #22252d;
+  color: #eef2f6;
+  padding: 11px 40px 11px 14px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-open {
+  border-color: #34d399;
+  background: #202c28;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-static {
+  padding-right: 14px;
+  cursor: default;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-static:hover {
+  border-color: #303540;
+  background: #22252d;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-static:active {
+  transform: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button:focus-visible {
+  outline: 2px solid #34d399;
+  outline-offset: 2px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button span {
+  color: #737d8e;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button strong {
+  max-width: 100%;
+  overflow: hidden;
+  color: #eef2f6;
+  font-size: 15px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button i {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #7c8492;
+  border-bottom: 2px solid #7c8492;
+  transform: translateY(-65%) rotate(45deg);
+  transition: transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select > button.is-open i {
+  transform: translateY(-35%) rotate(225deg);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  display: grid;
+  max-height: 184px;
+  overflow-y: auto;
+  border: 1px solid #303540;
+  border-radius: 8px;
+  background: #22252d;
+  padding: 5px;
+  animation: clone-ai-select-fade 150ms ease both;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button {
+  min-height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #b7bfcc;
+  padding: 0 9px;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-basic-select__menu button.is-active {
+  background: #17352a;
+  color: #34d399;
+}
+
+@keyframes clone-ai-select-fade {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-generate {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 52px;
+  border: 0;
+  border-radius: 11px;
+  background: #34d399;
+  color: #06130d;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-generate:hover:not(:disabled) {
+  background: #5eead4;
+  transform: translateY(-1px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-generate:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-generate:disabled {
+  background: #26342f;
+  color: #677569;
+  cursor: not-allowed;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  position: relative;
+  display: grid;
+  min-height: 0;
+  overflow: hidden;
+  align-content: center;
+  justify-items: center;
+  gap: 22px;
+  background: #101115;
+  padding: 92px 46px 142px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+  position: absolute;
+  top: 84px;
+  left: 32px;
+  right: 414px;
+  display: grid;
+  justify-items: start;
+  gap: 7px;
+  max-width: 560px;
+  text-align: left;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header strong {
+  color: #eef2f6;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header span {
+  color: #758096;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header b {
+  color: #34d399;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+  display: grid;
+  width: min(100%, 600px);
+  min-height: 300px;
+  place-items: center;
+  align-content: center;
+  gap: 12px;
+  color: #747d90;
+  text-align: center;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state .anticon {
+  display: grid;
+  width: 96px;
+  height: 96px;
+  place-items: center;
+  border: 1px solid #2c3038;
+  border-radius: 999px;
+  background: #1b1d23;
+  color: #565d6b;
+  font-size: 40px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state strong {
+  color: #d8deed;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state span {
+  max-width: 500px;
+  color: #747d90;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+  display: grid;
+  grid-template-columns: minmax(210px, 300px) 54px minmax(330px, 560px);
+  align-items: center;
+  gap: 20px;
+  width: min(100%, 960px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result,
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid button {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #2c3038;
+  border-radius: 14px;
+  background: #1b1d23;
+  padding: 0;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:hover {
+  border-color: #34d399;
+  transform: translateY(-1px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result:active,
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:active {
+  transform: scale(0.98);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result img,
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result {
+  height: 360px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid button {
+  height: 172px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid button:first-child {
+  grid-column: 1 / -1;
+  height: 190px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-main-result span,
+.product-clone-page[data-tool="clone"] .clone-ai-result-grid span {
+  position: absolute;
+  left: 11px;
+  top: 11px;
+  max-width: calc(100% - 22px);
+  overflow: hidden;
+  border: 1px solid #303540;
+  border-radius: 999px;
+  background: #15171c;
+  color: #d8deed;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+  width: 54px;
+  height: 26px;
+  background: #34d399;
+  clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
+  animation: clone-ai-arrow-pulse 1.35s ease-in-out infinite;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+  position: absolute;
+  left: 46px;
+  right: 46px;
+  bottom: 24px;
+  z-index: 2;
+  display: grid;
+  gap: 8px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 38px;
+  align-items: end;
+  gap: 10px;
+  border: 1px solid #2c3038;
+  border-radius: 18px;
+  background: #1b1d23;
+  padding: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-send-button {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid #303540;
+  border-radius: 999px;
+  background: #22252d;
+  color: #eef2f6;
+  font-size: 20px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-send-button:hover:not(:disabled) {
+  border-color: #34d399;
+  background: #202c28;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-send-button:active:not(:disabled) {
+  transform: scale(0.94);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
+  min-width: 0;
+  min-height: 44px;
+  max-height: 183px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: #eef2f6;
+  padding: 10px 0 8px;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea::placeholder {
+  color: #687184;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-send-button {
+  background: #34d399;
+  color: #06130d;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-send-button:disabled {
+  background: #26342f;
+  color: #677569;
+  cursor: not-allowed;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-char-count {
+  justify-self: end;
+  color: #70798a;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-clone-page .clone-ai-input-wrapper {
+  position: relative;
+}
+
+.image-mention-menu {
+  position: absolute;
+  z-index: 18;
+  left: 12px;
+  right: 60px;
+  bottom: calc(100% + 8px);
+  display: grid;
+  max-height: 226px;
+  overflow-y: auto;
+  gap: 6px;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #20232a;
+  padding: 8px;
+  box-shadow: 0 18px 42px rgb(0 0 0 / 36%);
+  animation: image-mention-menu-rise 150ms ease both;
+}
+
+.image-mention-menu__item {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: #d8deed;
+  padding: 5px 7px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.image-mention-menu__item:hover,
+.image-mention-menu__item:focus-visible {
+  background: #17352a;
+  outline: none;
+}
+
+.image-mention-menu__item img {
+  width: 42px;
+  height: 42px;
+  border: 1px solid #3a4555;
+  border-radius: 9px;
+  background: #101115;
+  object-fit: cover;
+}
+
+.image-mention-menu__item span {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.image-mention-menu__item strong,
+.image-mention-menu__item em {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-mention-menu__item strong {
+  color: #eef2f6;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.image-mention-menu__item em,
+.image-mention-menu__empty {
+  color: #8f98a8;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.image-mention-menu__empty {
+  padding: 10px 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file,
+.product-clone-page[data-tool="set"] .product-set-thumb,
+.product-set-thumb,
+.product-clone-uploaded-thumb {
+  overflow: visible;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file > img,
+.product-set-thumb > img,
+.product-clone-uploaded-thumb > img {
+  border-radius: inherit;
+}
+
+.product-clone-uploaded-thumb {
+  position: relative;
+  display: block;
+  min-width: 0;
+  overflow: visible;
+  margin: 0;
+  border: 1px solid #dfe5ee;
+  border-radius: 10px;
+  background: #f5f6f8;
+  aspect-ratio: 1;
+}
+
+.product-clone-uploaded-thumb > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.uploaded-image-zoom {
+  position: absolute;
+  z-index: 70;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  display: block;
+  width: min(230px, 58vw);
+  max-height: 280px;
+  border: 1px solid #3a4555;
+  border-radius: 14px;
+  background: #101115;
+  padding: 8px;
+  box-shadow: 0 22px 48px rgb(0 0 0 / 42%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 8px) scale(0.96);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 160ms ease;
+  visibility: hidden;
+}
+
+.uploaded-image-zoom img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 260px;
+  border-radius: 10px;
+  object-fit: contain;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover .uploaded-image-zoom,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within .uploaded-image-zoom,
+.product-set-thumb:hover .uploaded-image-zoom,
+.product-set-thumb:focus-within .uploaded-image-zoom,
+.product-clone-uploaded-thumb:hover .uploaded-image-zoom,
+.product-clone-uploaded-thumb:focus-within .uploaded-image-zoom,
+.clone-ai-replicate-preview figure:hover .uploaded-image-zoom,
+.clone-ai-replicate-preview figure:focus-within .uploaded-image-zoom {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+  visibility: visible;
+}
+
+@keyframes image-mention-menu-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes clone-ai-arrow-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: translateX(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateX(5px);
+  }
+}
+
+@media (max-width: 1280px) {
+  .product-clone-page[data-tool="clone"] {
+    --clone-settings-panel-width: 520px;
+  }
+
+  .product-clone-page[data-tool="clone"] > .product-clone-shell {
+    grid-template-columns: var(--clone-settings-panel-width) minmax(0, 1fr);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    padding-inline: 30px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+    grid-template-columns: minmax(180px, 260px) 44px minmax(280px, 1fr);
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+    left: 30px;
+    right: 30px;
+  }
+}
+
+/* Ecommerce route keeps the main floating sidebar visible, so offset the embedded AI art tool. */
+.web-shell[data-view="ecommerce"] .product-clone-page[data-tool="clone"] {
+  padding-left: 92px;
+}
+
+.web-shell[data-view="ecommerce"] .product-clone-page[data-tool="clone"] > .product-clone-shell {
+  width: 100%;
+}
+
+@media (max-width: 860px) {
+  .web-shell[data-view="ecommerce"] .product-clone-page[data-tool="clone"] {
+    padding-left: 0;
+  }
+
+  .product-clone-page[data-tool="clone"] {
+    --clone-settings-panel-width: 100%;
+  }
+
+  .product-clone-page[data-tool="clone"] > .product-clone-shell,
+  .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .product-clone-panel {
+    display: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 640px;
+    align-content: start;
+    gap: 28px;
+    padding: 86px 20px 132px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+    position: static;
+    width: 100%;
+    max-width: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    width: min(100%, 320px);
+    min-height: 260px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+    left: 20px;
+    right: 20px;
+    bottom: 24px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle,
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-settings-toggle {
+    top: 18px;
+    right: 18px;
+    left: auto;
+    transform: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
+    transform: scale(0.94);
+  }
+}
+
+.product-clone-topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  border-bottom: 1px solid #e5e7eb;
+  background: #ffffff;
+  padding: 10px 20px;
+}
+
+.product-clone-brand,
+.product-clone-new-task,
+.product-clone-back-to-more,
+.product-clone-member {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-clone-back-to-more {
+  gap: 6px;
+  height: 34px;
+  border: 0;
+  border-radius: 8px;
+  background: #f0f2f5;
+  color: #111827;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-brand {
+  gap: 8px;
+  min-width: 0;
+  font-size: 16px;
+}
+
+.product-clone-brand__mark {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border-radius: 6px;
+  background: #111827;
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.product-clone-new-task,
+.product-clone-member {
+  height: 34px;
+  gap: 6px;
+  border: 0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.product-clone-new-task {
+  padding: 0 14px;
+  background: #f0f2f5;
+  color: #111827;
+}
+
+.product-clone-member {
+  padding: 0 12px;
+  background: #ffe0cc;
+  color: #8a3a12;
+}
+
+.product-clone-topbar__spacer {
+  flex: 1;
+}
+
+.product-clone-shell {
+  display: grid;
+  grid-template-columns: 68px 400px minmax(0, 1fr);
+  min-height: 0;
+}
+
+.product-clone-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  border-right: 1px solid #e5e7eb;
+  background: #ffffff;
+  padding: 18px 10px;
+}
+
+.product-clone-rail button {
+  display: grid;
+  place-items: center;
+  gap: 6px;
+  min-height: 62px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #111827;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.product-clone-rail button .anticon {
+  font-size: 20px;
+}
+
+.product-clone-rail button.is-active {
+  background: #eef5ff;
+  color: #0f57ff;
+  font-weight: 800;
+}
+
+.product-clone-panel {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 72px;
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid #e5e7eb;
+  background: #ffffff;
+}
+
+.product-clone-panel__scroll {
+  min-height: 0;
+  overflow: auto;
+  padding: 20px 16px 28px;
+}
+
+.product-clone-field {
+  display: block;
+  margin: 0 0 28px;
+}
+
+.product-clone-field h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 0 0 12px;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-clone-field input {
+  display: none;
+}
+
+.product-clone-upload-zone {
+  display: grid;
+  width: 100%;
+  min-height: 104px;
+  place-items: center;
+  gap: 8px;
+  border: 1px dashed #d9e0ec;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+}
+
+.product-clone-upload-zone .anticon {
+  font-size: 18px;
+}
+
+.product-clone-upload-zone strong {
+  padding: 9px 14px;
+  border-radius: 8px;
+  background: #f3f5f8;
+  font-size: 13px;
+}
+
+.product-clone-upload-zone span {
+  color: #8a94a6;
+  font-size: 13px;
+}
+
+.product-clone-thumb-row,
+.product-clone-ref-grid {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.product-clone-thumb-row {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.product-clone-thumb-row img,
+.product-clone-ref-grid img {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.product-clone-thumb-row img {
+  aspect-ratio: 1;
+}
+
+.product-clone-segment {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  margin-bottom: 16px;
+  border-radius: 10px;
+  background: #f1f3f6;
+  padding: 2px;
+}
+
+.product-clone-segment button {
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #111827;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.product-clone-segment button.is-active {
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgb(17 24 39 / 10%);
+}
+
+.product-clone-link-box {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) 58px;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  border: 1px solid #dfe5ef;
+  border-radius: 10px;
+  padding: 0 8px 0 12px;
+}
+
+.product-clone-link-box input {
+  display: block;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  color: #111827;
+  font-size: 13px;
+}
+
+.product-clone-link-box button {
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: #111827;
+  color: #ffffff;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-ref-grid {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.product-clone-ref-grid figure {
+  min-width: 0;
+  margin: 0;
+}
+
+.product-clone-ref-grid img {
+  aspect-ratio: 1.25;
+}
+
+.product-clone-ref-grid figcaption {
+  margin-top: 4px;
+  overflow: hidden;
+  color: #6b7280;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-mode-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.product-clone-mode-grid button {
+  min-height: 110px;
+  padding: 16px;
+  border: 1px solid #eef0f4;
+  border-radius: 10px;
+  background: #f6f7f9;
+  text-align: left;
+  cursor: pointer;
+}
+
+.product-clone-mode-grid button.is-active {
+  border-color: #2b6cff;
+  background: #f8fbff;
+}
+
+.product-clone-mode-grid strong,
+.product-clone-mode-grid span {
+  display: block;
+}
+
+.product-clone-mode-grid strong {
+  margin-bottom: 9px;
+  font-size: 14px;
+}
+
+.product-clone-mode-grid span {
+  color: #7b8495;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.product-clone-field textarea {
+  width: 100%;
+  min-height: 82px;
+  resize: vertical;
+  border: 1px solid #dfe5ef;
+  border-radius: 10px;
+  outline: none;
+  padding: 12px;
+  color: #111827;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.product-clone-select-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.product-clone-select-grid select {
+  height: 38px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  background: #f2f4f7;
+  color: #111827;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.product-clone-panel__footer {
+  display: grid;
+  align-items: center;
+  border-top: 1px solid #e5e7eb;
+  padding: 12px 16px;
+}
+
+.product-clone-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  border: 0;
+  border-radius: 8px;
+  background: #2b6cff;
+  color: #ffffff;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-primary:disabled {
+  background: #c7dcff;
+  color: #ffffff;
+  cursor: not-allowed;
+}
+
+.product-clone-preview {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 34px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: #f5f6f8;
+  padding: 42px;
+}
+
+.product-clone-preview__headline {
+  text-align: center;
+}
+
+.product-clone-preview__headline h1 {
+  margin: 0 0 10px;
+  color: #111827;
+  font-size: 38px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.product-clone-preview__headline p {
+  margin: 0;
+  color: #647084;
+  font-size: 16px;
+}
+
+.product-clone-demo-board {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(260px, 340px) 44px minmax(300px, 360px);
+  align-items: center;
+  gap: 30px;
+  width: min(100%, 780px);
+  border-radius: 22px;
+  background: #ffffff;
+  padding: 30px;
+}
+
+.product-clone-source-card,
+.product-clone-result-stack figure {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px;
+  background: #f2f4f7;
+}
+
+.product-clone-source-card img,
+.product-clone-result-stack img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.55;
+  object-fit: cover;
+}
+
+.product-clone-source-card span,
+.product-clone-result-stack figcaption {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 6px 10px;
+  color: #111827;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-clone-product-chip {
+  position: absolute;
+  bottom: 30px;
+  left: 104px;
+  display: grid;
+  width: 96px;
+  height: 96px;
+  place-items: center;
+  overflow: hidden;
+  border: 8px solid #ffffff;
+  border-radius: 999px;
+  background: #eef5ff;
+  color: #111827;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-clone-product-chip img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-clone-product-chip .anticon {
+  font-size: 28px;
+}
+
+.product-clone-flow {
+  display: grid;
+  gap: 14px;
+}
+
+.product-clone-flow span {
+  display: block;
+  width: 44px;
+  height: 18px;
+  border-radius: 999px;
+  background: #c6d0df;
+  clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%);
+}
+
+.product-clone-result-stack {
+  display: grid;
+  gap: 10px;
+}
+
+.product-clone-result-stack figure {
+  margin: 0;
+}
+
+.product-clone-preview__status {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  gap: 6px 10px;
+  min-width: min(100%, 520px);
+  border-radius: 14px;
+  background: #ffffff;
+  padding: 14px 18px;
+  color: #111827;
+  font-weight: 800;
+}
+
+.product-clone-preview__status em {
+  grid-column: 2;
+  color: #7b8495;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.product-clone-preview__status[data-state="done"] .anticon {
+  color: #0b9f62;
+}
+
+/* Target-page alignment */
+.product-clone-page {
+  grid-template-rows: 80px minmax(0, 1fr);
+  background: #f3f4f6;
+}
+
+.product-clone-topbar {
+  min-height: 80px;
+  gap: 12px;
+  padding: 0 30px;
+  border-bottom-color: #e6e9ef;
+}
+
+.product-clone-brand {
+  gap: 12px;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.product-clone-brand__mark {
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  border-radius: 8px;
+  background: #090d15;
+}
+
+.product-clone-brand__mark span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+}
+
+.product-clone-brand__mark span:nth-child(1) {
+  background: #ff5b6f;
+}
+
+.product-clone-brand__mark span:nth-child(2) {
+  background: #28d46f;
+}
+
+.product-clone-brand__mark span:nth-child(3) {
+  background: #7b61ff;
+}
+
+.product-clone-brand__mark span:nth-child(4) {
+  background: #ffdd35;
+}
+
+.product-clone-new-task {
+  height: 48px;
+  padding: 0 22px;
+  border-radius: 12px;
+  background: #f3f5f8;
+  font-size: 20px;
+}
+
+.product-clone-back-to-more {
+  height: 48px;
+  padding: 0 18px;
+  border-radius: 12px;
+  background: #f3f5f8;
+  font-size: 18px;
+}
+
+.product-clone-member,
+.product-clone-beans,
+.product-clone-history,
+.product-clone-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: 0;
+  border-radius: 10px;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-member {
+  gap: 8px;
+  padding: 0 18px;
+  background: #ffd8be;
+  color: #7b3413;
+}
+
+.product-clone-member__badge {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px 5px 9px 9px;
+  background: #8a4b22;
+  transform: rotate(-35deg);
+}
+
+.product-clone-beans {
+  gap: 8px;
+  min-width: 88px;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1px #dfe3ea;
+  color: #111827;
+}
+
+.product-clone-beans__drop {
+  display: block;
+  width: 17px;
+  height: 22px;
+  border-radius: 13px 13px 13px 4px;
+  background: #ffb178;
+  transform: rotate(-25deg);
+}
+
+.product-clone-history {
+  gap: 8px;
+  min-width: 146px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-avatar {
+  width: 52px;
+  border-radius: 999px;
+  background: #e1e3e7;
+  color: #ffffff;
+  font-size: 28px;
+  box-shadow: inset 0 0 0 3px #d6d9de;
+}
+
+.product-clone-shell {
+  grid-template-columns: 102px 600px minmax(0, 1fr);
+}
+
+.product-clone-rail {
+  gap: 22px;
+  padding: 30px 14px;
+}
+
+.product-clone-rail button {
+  min-height: 88px;
+  border-radius: 12px;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.product-clone-rail button .anticon {
+  font-size: 31px;
+}
+
+.product-clone-rail button.is-active {
+  background: #eaf4ff;
+  color: #111827;
+}
+
+.product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 111px;
+}
+
+.product-clone-panel__scroll {
+  padding: 29px 47px 36px 24px;
+  scrollbar-color: #8b8b8b #f2f3f5;
+  scrollbar-width: auto;
+}
+
+.product-clone-panel__scroll::-webkit-scrollbar,
+.product-clone-preview::-webkit-scrollbar {
+  width: 16px;
+}
+
+.product-clone-panel__scroll::-webkit-scrollbar-track,
+.product-clone-preview::-webkit-scrollbar-track {
+  background: #f2f3f5;
+}
+
+.product-clone-panel__scroll::-webkit-scrollbar-thumb,
+.product-clone-preview::-webkit-scrollbar-thumb {
+  border: 4px solid #f2f3f5;
+  border-radius: 999px;
+  background: #8b8b8b;
+}
+
+.product-clone-field {
+  margin-bottom: 42px;
+}
+
+.product-clone-field h2 {
+  margin-bottom: 18px;
+  font-size: 20px;
+}
+
+.product-clone-upload-zone {
+  min-height: 155px;
+  border-color: #dfe5ef;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.product-clone-upload-zone .anticon {
+  color: #8b97aa;
+  font-size: 18px;
+}
+
+.product-clone-upload-zone strong {
+  padding: 11px 18px;
+  border-radius: 10px;
+  background: #f3f5f8;
+  font-size: 20px;
+}
+
+.product-clone-upload-zone span {
+  color: #9098a6;
+  font-size: 20px;
+}
+
+.product-clone-segment {
+  height: 50px;
+  margin-bottom: 16px;
+  border-radius: 12px;
+}
+
+.product-clone-segment button {
+  height: 46px;
+  border-radius: 10px;
+  font-size: 20px;
+}
+
+.product-clone-mode-grid {
+  gap: 12px;
+}
+
+.product-clone-mode-grid button {
+  min-height: 168px;
+  padding: 24px 24px 20px;
+  border-radius: 14px;
+  background: #f2f3f5;
+}
+
+.product-clone-mode-grid button.is-active {
+  border-color: #2b6cff;
+  background: #f7fbff;
+}
+
+.product-clone-mode-grid strong {
+  margin-bottom: 10px;
+  font-size: 22px;
+}
+
+.product-clone-mode-grid span {
+  color: #8c95a3;
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.product-clone-field textarea {
+  min-height: 120px;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #111827;
+  font-size: 18px;
+}
+
+.product-clone-field textarea::placeholder {
+  color: #9aa3af;
+}
+
+.product-clone-select-grid {
+  gap: 18px;
+}
+
+.product-clone-select-grid select {
+  height: 52px;
+  border-radius: 10px;
+  background: #f2f3f6;
+  color: #111827;
+  font-size: 20px;
+}
+
+.product-clone-panel__footer {
+  padding: 18px 24px;
+}
+
+.product-clone-primary {
+  height: 66px;
+  border-radius: 10px;
+  background: #2b6cff;
+  font-size: 22px;
+}
+
+.product-clone-primary:disabled {
+  background: #c9ddff;
+}
+
+.product-clone-preview {
+  position: relative;
+  align-content: start;
+  gap: 91px;
+  overflow: auto;
+  padding: 66px 0 48px 34px;
+  background: #f3f4f6;
+  scrollbar-color: #a2a2a2 #f3f4f6;
+}
+
+.product-clone-preview__headline h1 {
+  margin-bottom: 18px;
+  font-size: 48px;
+  line-height: 1.12;
+}
+
+.product-clone-preview__headline p {
+  color: #626b78;
+  font-size: 24px;
+}
+
+.product-clone-demo-board {
+  grid-template-columns: minmax(390px, 468px) 62px minmax(420px, 496px);
+  gap: 44px;
+  width: min(100%, 1168px);
+  min-height: 664px;
+  padding: 35px 36px;
+  border-radius: 34px;
+}
+
+.product-clone-source-card,
+.product-clone-result-stack figure {
+  border-radius: 16px;
+}
+
+.product-clone-source-card img,
+.product-clone-result-stack img {
+  aspect-ratio: 1.58;
+}
+
+.product-clone-source-card span,
+.product-clone-result-stack figcaption {
+  top: 14px;
+  right: 14px;
+  padding: 8px 14px;
+  font-size: 18px;
+}
+
+.product-clone-product-chip {
+  bottom: 96px;
+  left: 120px;
+  width: 162px;
+  height: 162px;
+  border-width: 10px;
+  color: #111827;
+  font-size: 17px;
+}
+
+.product-clone-product-chip .anticon {
+  color: #111827;
+  font-size: 42px;
+}
+
+.product-clone-flow {
+  gap: 24px;
+}
+
+.product-clone-flow span {
+  width: 62px;
+  height: 27px;
+  background: #cbd4e1;
+}
+
+.product-clone-result-stack {
+  gap: 12px;
+}
+
+.product-clone-help {
+  position: absolute;
+  right: 36px;
+  bottom: 44px;
+  display: grid;
+  width: 64px;
+  height: 64px;
+  place-items: center;
+  border: 1px solid #d9dde5;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #111827;
+  font-size: 30px;
+  box-shadow: 0 4px 14px rgb(17 24 39 / 10%);
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="set"] {
+  grid-template-rows: 54px minmax(0, 1fr);
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-topbar {
+  min-height: 54px;
+  gap: 8px;
+  padding: 0 20px;
+  border-bottom-color: #e8ebf0;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-brand {
+  gap: 8px;
+  font-size: 19px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-brand__mark {
+  gap: 3px;
+  width: 26px;
+  height: 26px;
+  padding: 4px;
+  border-radius: 7px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-new-task,
+.product-clone-page[data-tool="set"] .product-clone-back-to-more,
+.product-clone-page[data-tool="set"] .product-clone-member,
+.product-clone-page[data-tool="set"] .product-clone-history {
+  height: 34px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-new-task,
+.product-clone-page[data-tool="set"] .product-clone-back-to-more {
+  padding: 0 12px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-member {
+  padding: 0 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-member__badge {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px 4px 7px 7px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-beans {
+  display: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-history {
+  min-width: 104px;
+  padding: 0 12px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-shell {
+  grid-template-columns: 68px 400px minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail {
+  gap: 18px;
+  padding: 18px 8px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail button {
+  min-height: 54px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail button .anticon {
+  font-size: 22px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 68px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+  padding: 20px 20px 24px;
+  scrollbar-color: #a8adb6 #f5f6f8;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-field {
+  margin-bottom: 28px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-field h2 {
+  width: 100%;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone {
+  min-height: 104px;
+  gap: 12px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 16px;
+  border-radius: 9px;
+  background: #f2f4f7;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone span {
+  color: #7d8796;
+  font-size: 14px;
+}
+
+.product-set-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-set-settings-grid select {
+  height: 34px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  outline: none;
+  background: #f0f2f5;
+  color: #111827;
+  padding: 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.product-set-requirement h2 {
+  justify-content: flex-start;
+}
+
+.product-set-requirement h2 button {
+  margin-left: auto;
+  border: 0;
+  border-radius: 7px;
+  background: #e8f3ff;
+  color: #1677ff;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="set"] .product-set-requirement textarea {
+  min-height: 158px;
+  border: 1px solid #dbe3ee;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 12px;
+  color: #111827;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.product-set-structure-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.product-set-structure-grid button {
+  position: relative;
+  display: grid;
+  min-height: 70px;
+  align-content: center;
+  gap: 6px;
+  border: 1px solid #e1e7f0;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 13px 44px 13px 14px;
+  color: #111827;
+  text-align: left;
+  cursor: pointer;
+}
+
+.product-set-structure-grid button > span {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #cbd3df;
+  border-radius: 4px;
+  background: #ffffff;
+  transform: translateY(-50%);
+}
+
+.product-set-structure-grid button.is-active {
+  border-color: #1677ff;
+  box-shadow: inset 0 0 0 1px #1677ff;
+}
+
+.product-set-structure-grid button.is-active > span {
+  border-color: #1677ff;
+  background: #1677ff;
+  box-shadow: inset 0 0 0 3px #ffffff;
+}
+
+.product-set-structure-grid strong,
+.product-set-style-toggle strong {
+  color: #111827;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-set-structure-grid em {
+  color: #7d8796;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.35;
+}
+
+.product-set-count-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+  border-radius: 10px;
+  background: #f7f8fa;
+  padding: 10px;
+}
+
+.product-set-count-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  color: #111827;
+  font-size: 13px;
+}
+
+.product-set-count-row div {
+  display: inline-grid;
+  grid-template-columns: 28px 32px 28px;
+  align-items: center;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.product-set-count-row button {
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: #1677ff;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-set-count-row strong {
+  text-align: center;
+  font-size: 13px;
+}
+
+.product-set-style-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 44px;
+  border: 0;
+  border-radius: 9px;
+  background: #f2f4f7;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__footer {
+  padding: 12px 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-primary {
+  height: 44px;
+  border-radius: 9px;
+  background: #5a9bff;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-primary:disabled {
+  background: #5a9bff;
+  opacity: 0.72;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview {
+  align-content: center;
+  justify-items: center;
+  gap: 38px;
+  padding: 44px 32px 44px;
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline h1 {
+  margin-bottom: 12px;
+  font-size: 38px;
+  line-height: 1.15;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p {
+  color: #4b5565;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p span {
+  color: #1677ff;
+}
+
+.product-set-demo-board {
+  display: grid;
+  grid-template-columns: 336px 40px 338px;
+  align-items: center;
+  gap: 24px;
+  width: min(100%, 802px);
+  min-height: 336px;
+}
+
+.product-set-demo-board figure {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.product-set-demo-board img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-set-demo-board figcaption {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.86);
+  color: #111827;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-set-main-card {
+  height: 336px;
+}
+
+.product-set-flow-arrow {
+  width: 40px;
+  height: 24px;
+  border-radius: 999px;
+  background: #b8c3d1;
+  clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%);
+}
+
+.product-set-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-set-card-grid figure {
+  height: 162px;
+}
+
+.product-set-generated-note {
+  margin: -20px 0 0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #1677ff;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-help {
+  right: 24px;
+  bottom: 28px;
+  width: 44px;
+  height: 44px;
+  font-size: 22px;
+  box-shadow: none;
+}
+
+.product-set-hosting-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  background: rgba(17, 24, 39, 0.42);
+}
+
+.product-set-hosting-modal {
+  display: grid;
+  grid-template-columns: 320px 360px;
+  overflow: hidden;
+  width: min(92vw, 680px);
+  min-height: 428px;
+  border-radius: 22px;
+  background: #ffffff;
+}
+
+.product-set-hosting-modal img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-set-hosting-content {
+  position: relative;
+  display: grid;
+  align-content: start;
+  padding: 28px 24px 24px;
+}
+
+.product-set-hosting-close {
+  position: absolute;
+  right: 18px;
+  top: 18px;
+  border: 0;
+  background: transparent;
+  color: #8a94a6;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.product-set-hosting-content h2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 8px;
+  color: #111827;
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.product-set-hosting-content h2 span {
+  border-radius: 999px;
+  background: #ffeef2;
+  color: #e04868;
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+.product-set-hosting-content > strong {
+  width: fit-content;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background: #e8f3ff;
+  color: #1677ff;
+  padding: 5px 9px;
+  font-size: 12px;
+}
+
+.product-set-hosting-content ul {
+  display: grid;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.product-set-hosting-content li {
+  display: grid;
+  gap: 6px;
+}
+
+.product-set-hosting-content b {
+  color: #111827;
+  font-size: 14px;
+}
+
+.product-set-hosting-content li span {
+  color: #7d8796;
+  font-size: 13px;
+}
+
+.product-set-hosting-confirm {
+  align-self: end;
+  height: 40px;
+  margin-top: 26px;
+  border: 0;
+  border-radius: 10px;
+  background: #18191b;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+/* Product set target-page alignment */
+.product-clone-page[data-tool="set"] {
+  grid-template-rows: 80px minmax(0, 1fr);
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-topbar {
+  min-height: 80px;
+  gap: 12px;
+  padding: 0 30px;
+  border-bottom-color: #e6e9ef;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-back-to-more,
+.product-clone-page[data-tool="set"] .product-clone-new-task,
+.product-clone-page[data-tool="set"] .product-clone-member,
+.product-clone-page[data-tool="set"] .product-clone-history,
+.product-clone-page[data-tool="set"] .product-clone-avatar {
+  height: 48px;
+  border: 0;
+  border-radius: 10px;
+  font-size: 18px;
+  font-weight: 900;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-back-to-more,
+.product-clone-page[data-tool="set"] .product-clone-new-task {
+  padding: 0 18px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-brand {
+  gap: 12px;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-brand__mark {
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  border-radius: 8px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-member {
+  gap: 8px;
+  padding: 0 18px;
+  background: #ffd8be;
+  color: #7b3413;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-member__badge {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px 5px 9px 9px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-history {
+  min-width: 146px;
+  padding: 0 18px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-avatar {
+  width: 52px;
+  border-radius: 999px;
+  background: #e1e3e7;
+  color: #ffffff;
+  font-size: 28px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-shell {
+  grid-template-columns: 102px 600px minmax(0, 1fr);
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail {
+  gap: 22px;
+  padding: 30px 14px;
+  border-right-color: #e6e9ef;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail button {
+  min-height: 88px;
+  border-radius: 12px;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail button .anticon {
+  font-size: 31px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail button.is-active {
+  background: #eaf4ff;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 116px;
+  border-right-color: #e6e9ef;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+  padding: 34px 30px 44px;
+  scrollbar-color: #b4b7bd #f3f4f6;
+  scrollbar-width: auto;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-field {
+  margin-bottom: 44px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-field h2 {
+  margin-bottom: 20px;
+  color: #111827;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone {
+  min-height: 156px;
+  gap: 18px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone strong {
+  gap: 8px;
+  padding: 13px 22px;
+  border-radius: 11px;
+  background: #f3f5f8;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-upload-zone span {
+  color: #8d96a4;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-settings-grid {
+  gap: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-settings-grid select {
+  height: 52px;
+  border-radius: 10px;
+  background: #f0f1f4;
+  padding: 0 18px;
+  color: #111827;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="set"] .product-set-requirement h2 button {
+  padding: 10px 16px;
+  border-radius: 9px;
+  background: #e3f1ff;
+  color: #1677ff;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-requirement textarea {
+  min-height: 240px;
+  border: 1px solid #dbe3ee;
+  border-radius: 14px;
+  background: #ffffff;
+  padding: 18px;
+  color: #111827;
+  font-size: 20px;
+  line-height: 1.48;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid {
+  gap: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid button {
+  min-height: 108px;
+  gap: 12px;
+  border: 1px solid #dfe5ee;
+  border-radius: 16px;
+  background: #ffffff;
+  padding: 24px 64px 24px 28px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid button > span {
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid button.is-active {
+  border-color: #2b7cff;
+  background: #ffffff;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid button.is-active > span {
+  border-color: #2b7cff;
+  background: #2b7cff;
+  box-shadow: inset 0 0 0 5px #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid strong,
+.product-clone-page[data-tool="set"] .product-set-style-toggle strong {
+  color: #111827;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="set"] .product-set-structure-grid em {
+  color: #8a94a3;
+  font-size: 20px;
+  line-height: 1.35;
+}
+
+.product-clone-page[data-tool="set"] .product-set-count-list {
+  gap: 12px;
+  margin-top: 16px;
+  border-radius: 14px;
+  background: #f2f3f5;
+  padding: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-count-row {
+  min-height: 42px;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-count-row div {
+  grid-template-columns: 36px 42px 36px;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-set-count-row button {
+  height: 36px;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-count-row strong {
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-style-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 52px;
+  border: 0;
+  border-radius: 12px;
+  background: #f0f1f4;
+  color: #111827;
+  padding: 0 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-style-toggle .anticon {
+  color: #8fc8ff;
+  font-size: 22px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-style-toggle.is-active {
+  background: #f0f1f4;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__footer {
+  padding: 24px 30px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-primary {
+  height: 70px;
+  border-radius: 12px;
+  background: #5a9bff;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-primary:disabled {
+  background: #b9d6ff;
+  opacity: 1;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview {
+  align-content: start;
+  justify-items: center;
+  gap: 84px;
+  padding: 88px 36px 56px;
+  background: #f3f4f6;
+  scrollbar-color: #b4b7bd #f3f4f6;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline h1 {
+  margin-bottom: 22px;
+  color: #111827;
+  font-size: 56px;
+  line-height: 1.12;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p {
+  color: #69717d;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p span {
+  color: #1f7aff;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board {
+  grid-template-columns: minmax(360px, 486px) 44px minmax(360px, 486px);
+  gap: 28px;
+  width: min(100%, 1150px);
+  min-height: 576px;
+  border-radius: 32px;
+  background: #ffffff;
+  padding: 37px 30px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board figure {
+  border-radius: 18px;
+  background: #f3f4f6;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-main-card {
+  height: 502px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="set"] .product-set-card-grid {
+  gap: 18px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-card-grid figure {
+  height: 242px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board figcaption {
+  left: 14px;
+  top: 14px;
+  max-width: calc(100% - 28px);
+  background: #ffffff;
+  color: #111827;
+  padding: 9px 16px;
+  font-size: 16px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-flow-arrow {
+  width: 44px;
+  height: 28px;
+  background: #d7dde6;
+}
+
+.product-clone-page[data-tool="set"] .product-set-generated-note {
+  background: #ffffff;
+  color: #1677ff;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-help {
+  right: 36px;
+  bottom: 44px;
+  width: 64px;
+  height: 64px;
+  background: #ffffff;
+  font-size: 30px;
+  box-shadow: none;
+}
+
+@media (max-width: 1520px) {
+  .product-clone-page[data-tool="set"] {
+    grid-template-rows: 54px minmax(0, 1fr);
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-topbar {
+    min-height: 54px;
+    gap: 8px;
+    padding: 0 20px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-back-to-more,
+  .product-clone-page[data-tool="set"] .product-clone-new-task,
+  .product-clone-page[data-tool="set"] .product-clone-member,
+  .product-clone-page[data-tool="set"] .product-clone-history {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-brand {
+    gap: 8px;
+    font-size: 19px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-brand__mark {
+    gap: 3px;
+    width: 26px;
+    height: 26px;
+    padding: 4px;
+    border-radius: 7px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-member__badge {
+    width: 14px;
+    height: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-history {
+    min-width: 104px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-avatar {
+    width: 34px;
+    height: 34px;
+    font-size: 18px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-shell {
+    grid-template-columns: 68px 400px minmax(0, 1fr);
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-rail {
+    gap: 18px;
+    padding: 18px 8px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-rail button {
+    min-height: 54px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 800;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-rail button .anticon {
+    font-size: 22px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-panel {
+    grid-template-rows: minmax(0, 1fr) 78px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+    padding: 20px 20px 24px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-field {
+    margin-bottom: 28px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-field h2 {
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-upload-zone {
+    min-height: 104px;
+    gap: 12px;
+    border-radius: 10px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-upload-zone strong {
+    padding: 9px 16px;
+    border-radius: 9px;
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-upload-zone span {
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-settings-grid {
+    gap: 8px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-settings-grid select {
+    height: 34px;
+    border-radius: 8px;
+    padding: 0 10px;
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-requirement h2 button {
+    padding: 6px 10px;
+    border-radius: 7px;
+    font-size: 12px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-requirement textarea {
+    min-height: 158px;
+    border-radius: 10px;
+    padding: 12px;
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-structure-grid button {
+    min-height: 70px;
+    gap: 6px;
+    border-radius: 10px;
+    padding: 13px 44px 13px 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-structure-grid button > span {
+    right: 16px;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-structure-grid strong,
+  .product-clone-page[data-tool="set"] .product-set-style-toggle strong {
+    font-size: 14px;
+    font-weight: 800;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-structure-grid em {
+    font-size: 12px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-style-toggle {
+    min-height: 44px;
+    border-radius: 9px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-style-toggle .anticon {
+    font-size: 16px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-panel__footer {
+    padding: 12px 16px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-primary {
+    height: 44px;
+    border-radius: 9px;
+    font-size: 14px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-preview {
+    gap: 38px;
+    padding: 44px 32px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-preview__headline h1 {
+    margin-bottom: 12px;
+    font-size: 38px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-preview__headline p {
+    font-size: 16px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-demo-board {
+    grid-template-columns: 336px 40px 338px;
+    gap: 24px;
+    width: min(100%, 802px);
+    min-height: 336px;
+    border-radius: 22px;
+    background: transparent;
+    padding: 0;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-main-card {
+    height: 336px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-card-grid {
+    gap: 12px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-card-grid figure {
+    height: 162px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-demo-board figcaption {
+    left: 12px;
+    top: 12px;
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-help {
+    right: 24px;
+    bottom: 28px;
+    width: 44px;
+    height: 44px;
+    font-size: 22px;
+  }
+}
+
+.product-clone-page[data-tool="detail"] {
+  grid-template-rows: 54px minmax(0, 1fr);
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-topbar {
+  min-height: 54px;
+  gap: 8px;
+  padding: 0 20px;
+  border-bottom-color: #e8ebf0;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-brand {
+  gap: 8px;
+  font-size: 19px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-brand__mark {
+  gap: 3px;
+  width: 26px;
+  height: 26px;
+  padding: 4px;
+  border-radius: 7px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-new-task,
+.product-clone-page[data-tool="detail"] .product-clone-back-to-more,
+.product-clone-page[data-tool="detail"] .product-clone-member,
+.product-clone-page[data-tool="detail"] .product-clone-history {
+  height: 34px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-new-task,
+.product-clone-page[data-tool="detail"] .product-clone-back-to-more {
+  padding: 0 12px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-member {
+  padding: 0 14px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-member__badge {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px 4px 7px 7px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-beans {
+  display: none;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-history {
+  min-width: 104px;
+  padding: 0 12px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-shell {
+  grid-template-columns: 68px 480px minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail {
+  gap: 18px;
+  padding: 18px 8px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail button {
+  min-height: 54px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail button .anticon {
+  font-size: 22px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 78px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel__scroll {
+  padding: 20px;
+  scrollbar-color: #a8adb6 #f5f6f8;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-field {
+  margin-bottom: 28px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-field h2 {
+  width: 100%;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone {
+  min-height: 104px;
+  gap: 12px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 16px;
+  border-radius: 9px;
+  background: #f2f4f7;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone span {
+  color: #7d8796;
+  font-size: 14px;
+}
+
+.product-detail-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-detail-settings-grid select {
+  height: 34px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  outline: none;
+  background: #f0f2f5;
+  color: #111827;
+  padding: 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.product-detail-settings-grid select:nth-child(4) {
+  grid-column: 1 / -1;
+}
+
+.product-detail-requirement h2 {
+  justify-content: flex-start;
+}
+
+.product-detail-requirement h2 button {
+  margin-left: auto;
+  border: 0;
+  border-radius: 7px;
+  background: #e8f3ff;
+  color: #1677ff;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-requirement textarea {
+  min-height: 158px;
+  border: 1px solid #dbe3ee;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 12px;
+  color: #111827;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.product-detail-module-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-detail-module-grid button {
+  display: grid;
+  min-height: 76px;
+  align-content: center;
+  gap: 8px;
+  border: 1px solid #e1e7f0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 14px 16px;
+  color: #111827;
+  text-align: left;
+  cursor: pointer;
+}
+
+.product-detail-module-grid button.is-active {
+  border-color: #1677ff;
+  box-shadow: inset 0 0 0 1px #1677ff;
+}
+
+.product-detail-module-grid strong {
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-detail-module-grid span {
+  color: #7d8796;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel__footer {
+  padding: 12px 20px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-primary {
+  height: 50px;
+  border-radius: 9px;
+  background: #5a9bff;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-primary:disabled {
+  background: #5a9bff;
+  opacity: 0.92;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview {
+  align-content: center;
+  justify-items: center;
+  gap: 54px;
+  padding: 52px 32px 44px;
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline h1 {
+  margin-bottom: 12px;
+  font-size: 38px;
+  line-height: 1.15;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline p {
+  color: #4b5565;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline p span {
+  color: #1677ff;
+}
+
+.product-detail-demo-board {
+  display: grid;
+  grid-template-columns: 104px 32px 94px 360px;
+  align-items: center;
+  gap: 14px;
+  width: min(100%, 680px);
+  min-height: 385px;
+  border-radius: 22px;
+  background: #ffffff;
+  padding: 24px;
+}
+
+.product-detail-source-stack {
+  display: grid;
+  position: relative;
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 14px;
+  background: #f3f6fb;
+}
+
+.product-detail-source-stack figure {
+  margin: 0;
+  overflow: hidden;
+  background: #eef2f7;
+}
+
+.product-detail-source-stack img {
+  display: block;
+  width: 100%;
+  height: 108px;
+  object-fit: cover;
+}
+
+.product-detail-source-stack span,
+.product-detail-long-result span,
+.product-detail-grid-result span {
+  position: absolute;
+  left: 50%;
+  bottom: 8px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.62);
+  color: #ffffff;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-detail-flow-arrow {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: #eef2f7;
+  clip-path: polygon(0 32%, 55% 32%, 55% 8%, 100% 50%, 55% 92%, 55% 68%, 0 68%);
+}
+
+.product-detail-long-result {
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  background: #eff4f8;
+}
+
+.product-detail-long-result img {
+  display: block;
+  width: 100%;
+  height: 336px;
+  object-fit: cover;
+}
+
+.product-detail-grid-result {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 14px;
+}
+
+.product-detail-grid-result img {
+  display: block;
+  width: 100%;
+  height: 108px;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-help {
+  right: 24px;
+  bottom: 28px;
+  width: 44px;
+  height: 44px;
+  font-size: 22px;
+  box-shadow: none;
+}
+
+/* A+ detail target-page alignment */
+.product-clone-page[data-tool="detail"] {
+  grid-template-rows: 80px minmax(0, 1fr);
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-topbar {
+  min-height: 80px;
+  gap: 12px;
+  padding: 0 30px;
+  border-bottom-color: #e6e9ef;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-back-to-more {
+  display: none;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-brand {
+  gap: 12px;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-brand__mark {
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  border-radius: 8px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-new-task {
+  height: 48px;
+  padding: 0 22px;
+  border-radius: 12px;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-member,
+.product-clone-page[data-tool="detail"] .product-clone-beans,
+.product-clone-page[data-tool="detail"] .product-clone-history,
+.product-clone-page[data-tool="detail"] .product-clone-batch,
+.product-clone-page[data-tool="detail"] .product-clone-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: 0;
+  border-radius: 10px;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-member {
+  gap: 8px;
+  padding: 0 18px;
+  background: #ffd8be;
+  color: #7b3413;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-member__badge {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px 5px 9px 9px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-beans {
+  gap: 8px;
+  min-width: 88px;
+  background: #ffffff;
+  color: #111827;
+  box-shadow: inset 0 0 0 1px #dfe3ea;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-batch {
+  position: relative;
+  gap: 8px;
+  min-width: 146px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-batch__tag {
+  position: absolute;
+  right: -8px;
+  top: -11px;
+  border-radius: 999px;
+  background: #ffeef2;
+  color: #cb2445;
+  padding: 2px 8px;
+  font-size: 16px;
+  line-height: 1.1;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-history {
+  min-width: 146px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-avatar {
+  width: 52px;
+  border-radius: 999px;
+  background: #e1e3e7;
+  color: #ffffff;
+  font-size: 28px;
+  box-shadow: inset 0 0 0 3px #d6d9de;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-shell {
+  grid-template-columns: 102px 720px minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail {
+  gap: 22px;
+  padding: 30px 14px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail button {
+  min-height: 88px;
+  border-radius: 12px;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail button .anticon {
+  font-size: 31px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-rail button.is-active {
+  background: #eaf4ff;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 116px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel__scroll {
+  padding: 34px 30px 44px;
+  scrollbar-color: #b4b7bd #f3f4f6;
+  scrollbar-width: auto;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-field {
+  margin-bottom: 44px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-field h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone {
+  min-height: 156px;
+  gap: 18px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone strong {
+  gap: 8px;
+  padding: 13px 22px;
+  border-radius: 11px;
+  background: #f3f5f8;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-upload-zone span {
+  max-width: 480px;
+  color: #8d96a4;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-settings-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-settings-grid select {
+  height: 52px;
+  border-radius: 10px;
+  padding: 0 14px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-settings-grid select:nth-child(4) {
+  grid-column: 1 / -1;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-requirement h2 button {
+  padding: 10px 16px;
+  border-radius: 9px;
+  background: #e3f1ff;
+  color: #1677ff;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-requirement textarea {
+  min-height: 240px;
+  border-radius: 14px;
+  padding: 18px;
+  font-size: 20px;
+  line-height: 1.48;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-module-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-module-grid button {
+  min-height: 116px;
+  align-content: center;
+  gap: 12px;
+  border: 0;
+  border-radius: 9px;
+  background: #f2f3f5;
+  padding: 24px 28px;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-module-grid button.is-active {
+  border: 0;
+  background: #eaf4ff;
+  box-shadow: inset 0 0 0 2px #2b7cff;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-module-grid strong {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-module-grid span {
+  color: #8a94a3;
+  font-size: 20px;
+  line-height: 1.35;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-panel__footer {
+  padding: 24px 30px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-primary {
+  height: 70px;
+  border-radius: 12px;
+  background: #5a9bff;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-primary:disabled {
+  background: #5a9bff;
+  opacity: 0.96;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview {
+  align-content: start;
+  justify-items: center;
+  gap: 84px;
+  padding: 88px 36px 56px;
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline h1 {
+  margin-bottom: 22px;
+  font-size: 56px;
+  line-height: 1.12;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline p {
+  color: #69717d;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-preview__headline p span {
+  color: #1f7aff;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-demo-board {
+  grid-template-columns: 156px 44px 140px 539px;
+  gap: 28px;
+  width: min(100%, 1010px);
+  min-height: 576px;
+  border-radius: 32px;
+  background: #ffffff;
+  padding: 37px 30px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-source-stack {
+  border-radius: 18px;
+  background: #f3f6fb;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-source-stack img {
+  height: 164px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-flow-arrow {
+  width: 44px;
+  height: 28px;
+  background: #d7dde6;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-long-result {
+  border-radius: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-long-result img {
+  height: 502px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-grid-result {
+  gap: 5px;
+  border-radius: 18px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-grid-result img {
+  height: 164px;
+}
+
+.product-clone-page[data-tool="detail"] .product-detail-source-stack span,
+.product-clone-page[data-tool="detail"] .product-detail-long-result span,
+.product-clone-page[data-tool="detail"] .product-detail-grid-result span {
+  bottom: 12px;
+  padding: 8px 18px;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="detail"] .product-clone-help {
+  right: 36px;
+  bottom: 44px;
+  width: 64px;
+  height: 64px;
+  font-size: 30px;
+  box-shadow: 0 4px 14px rgb(17 24 39 / 10%);
+}
+
+.product-clone-page[data-tool="wear"] {
+  grid-template-rows: 54px minmax(0, 1fr);
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-topbar {
+  min-height: 54px;
+  gap: 8px;
+  padding: 0 20px;
+  border-bottom-color: #e8ebf0;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-brand {
+  gap: 8px;
+  font-size: 19px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-brand__mark {
+  gap: 3px;
+  width: 26px;
+  height: 26px;
+  padding: 4px;
+  border-radius: 7px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-new-task {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-back-to-more {
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-member {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-member__badge {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px 4px 7px 7px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-beans,
+.product-clone-page[data-tool="wear"] .product-clone-history {
+  display: none;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-shell {
+  grid-template-columns: 68px 400px minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail {
+  gap: 18px;
+  padding: 18px 8px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail button {
+  min-height: 54px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail button .anticon {
+  font-size: 22px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 78px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel__scroll {
+  padding: 20px 20px 24px;
+  scrollbar-color: #a8adb6 #f5f6f8;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field {
+  margin-bottom: 24px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field h2 {
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone {
+  min-height: 130px;
+  gap: 16px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 16px;
+  border-radius: 9px;
+  background: #f2f4f7;
+  font-size: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone span {
+  max-width: 300px;
+  color: #7d8796;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.product-try-on-thumb-row {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-segment {
+  height: 34px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  background: #f0f2f5;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-segment button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 30px;
+  border-radius: 7px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.product-clone-model-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-model-grid select {
+  height: 34px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  outline: none;
+  background: #f0f2f5;
+  color: #111827;
+  padding: 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.product-try-on-textarea-label {
+  display: block;
+  margin-top: 16px;
+}
+
+.product-try-on-textarea-label span {
+  display: block;
+  margin-bottom: 10px;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field textarea,
+.product-try-on-textarea-label textarea {
+  min-height: 80px;
+  border-color: #dbe3ee;
+  border-radius: 10px;
+  padding: 12px;
+  background: #ffffff;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.product-clone-model-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 40px;
+  margin-top: 16px;
+  border: 0;
+  border-radius: 9px;
+  background: #e3f1ff;
+  color: #1677ff;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-model-button:disabled {
+  color: #6aa8ff;
+  cursor: not-allowed;
+}
+
+.product-try-on-library {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-try-on-library button {
+  overflow: hidden;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background: #f2f4f7;
+  padding: 0;
+  cursor: pointer;
+}
+
+.product-try-on-library button.is-active {
+  border-color: #5b9cff;
+}
+
+.product-try-on-library img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 0.76;
+  object-fit: cover;
+}
+
+.product-clone-scene-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-scene-grid button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 49px;
+  min-width: 0;
+  border: 0;
+  border-radius: 8px;
+  background: #f2f4f7;
+  color: #111827;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.product-clone-scene-grid button span {
+  display: block;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  border: 1px solid #cfd6e2;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.product-clone-scene-grid button.is-active {
+  background: #e9f3ff;
+  color: #1677ff;
+}
+
+.product-clone-scene-grid button.is-active span {
+  border-color: #1677ff;
+  background: #1677ff;
+  box-shadow: inset 0 0 0 3px #ffffff;
+}
+
+.product-try-on-scene-field {
+  margin-top: -4px;
+}
+
+.product-clone-switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 64px;
+  border: 0;
+  border-radius: 10px;
+  background: #f2f4f7;
+  padding: 12px 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.product-clone-switch-row > span:first-child {
+  display: grid;
+  gap: 4px;
+}
+
+.product-clone-switch-row strong {
+  color: #111827;
+  font-size: 14px;
+}
+
+.product-clone-switch-row em {
+  color: #7d8796;
+  font-size: 12px;
+  font-style: normal;
+}
+
+.product-clone-switch {
+  display: inline-flex;
+  align-items: center;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: #cbd3df;
+  padding: 2px;
+}
+
+.product-clone-switch span {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: #ffffff;
+  transition: transform 0.16s ease;
+}
+
+.product-clone-switch.is-on {
+  background: #2b7cff;
+}
+
+.product-clone-switch.is-on span {
+  transform: translateX(18px);
+}
+
+.product-clone-ratio-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-clone-ratio-row button {
+  height: 38px;
+  border: 0;
+  border-radius: 8px;
+  background: #f2f4f7;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-clone-ratio-row button.is-active {
+  background: #e8f2ff;
+  color: #1677ff;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel__footer {
+  padding: 12px 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-primary {
+  height: 50px;
+  border-radius: 9px;
+  background: #5a9bff;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-primary:disabled {
+  background: #5a9bff;
+  opacity: 0.92;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview {
+  align-content: center;
+  justify-items: center;
+  gap: 54px;
+  padding: 52px 32px 44px;
+  background: #f5f6f8;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview__headline h1 {
+  margin-bottom: 12px;
+  font-size: 38px;
+  line-height: 1.15;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview__headline p {
+  color: #4b5565;
+  font-size: 16px;
+}
+
+.product-try-on-demo-board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  width: min(100%, 766px);
+  min-height: 385px;
+  border-radius: 22px;
+  background: #ffffff;
+  padding: 24px;
+}
+
+.product-try-on-card {
+  display: grid;
+  grid-template-rows: auto 70px 26px minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 12px;
+  background: #eef3f5;
+  padding: 32px 12px 24px;
+  text-align: center;
+}
+
+.product-try-on-card h2 {
+  margin: 0 0 18px;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-try-on-card--red h2 {
+  color: #d83c42;
+}
+
+.product-try-on-card--brown h2 {
+  color: #7a5739;
+}
+
+.product-try-on-card--gold h2 {
+  color: #b57914;
+}
+
+.product-try-on-inputs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+.product-try-on-input-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.product-try-on-inputs img {
+  display: block;
+  width: 56px;
+  height: 70px;
+  border-radius: 8px;
+  background: #ffffff;
+  object-fit: cover;
+}
+
+.product-try-on-plus {
+  color: #a9b4c2;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.product-try-on-arrow {
+  width: 18px;
+  height: 18px;
+  justify-self: center;
+  border-right: 4px solid #aeb9c7;
+  border-bottom: 4px solid #aeb9c7;
+  transform: rotate(45deg);
+}
+
+.product-try-on-results {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
+  align-self: end;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.product-try-on-results img {
+  display: block;
+  width: 100%;
+  height: 152px;
+  object-fit: cover;
+}
+
+.product-try-on-generated {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  width: min(100%, 766px);
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 14px;
+}
+
+.product-try-on-generated figure {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: 12px;
+  background: #edf1f6;
+}
+
+.product-try-on-generated img {
+  display: block;
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+
+.product-try-on-generated figcaption {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 5px 10px;
+  color: #111827;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-help {
+  right: 24px;
+  bottom: 28px;
+  width: 44px;
+  height: 44px;
+  font-size: 22px;
+  box-shadow: none;
+}
+
+/* Clothing try-on target-page alignment */
+.product-clone-page[data-tool="wear"] {
+  grid-template-rows: 80px minmax(0, 1fr);
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-topbar {
+  min-height: 80px;
+  gap: 12px;
+  padding: 0 30px;
+  border-bottom-color: #e6e9ef;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-back-to-more {
+  display: none;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-brand {
+  gap: 12px;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-brand__mark {
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  border-radius: 8px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-new-task {
+  height: 48px;
+  padding: 0 22px;
+  border-radius: 12px;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-member,
+.product-clone-page[data-tool="wear"] .product-clone-beans,
+.product-clone-page[data-tool="wear"] .product-clone-history,
+.product-clone-page[data-tool="wear"] .product-clone-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: 0;
+  border-radius: 10px;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-member {
+  gap: 8px;
+  padding: 0 18px;
+  background: #ffd8be;
+  color: #7b3413;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-member__badge {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px 5px 9px 9px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-beans {
+  gap: 8px;
+  min-width: 88px;
+  background: #ffffff;
+  color: #111827;
+  box-shadow: inset 0 0 0 1px #dfe3ea;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-history {
+  gap: 8px;
+  min-width: 146px;
+  background: #f3f5f8;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-avatar {
+  width: 52px;
+  border-radius: 999px;
+  background: #e1e3e7;
+  color: #ffffff;
+  font-size: 28px;
+  box-shadow: inset 0 0 0 3px #d6d9de;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-shell {
+  grid-template-columns: 102px 600px minmax(0, 1fr);
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail {
+  gap: 22px;
+  padding: 30px 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail button {
+  min-height: 88px;
+  border-radius: 12px;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail button .anticon {
+  font-size: 31px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-rail button.is-active {
+  background: #eaf4ff;
+  color: #111827;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel {
+  grid-template-rows: minmax(0, 1fr) 116px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel__scroll {
+  padding: 34px 30px 44px;
+  scrollbar-color: #b4b7bd #f3f4f6;
+  scrollbar-width: auto;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field {
+  margin-bottom: 42px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone {
+  min-height: 194px;
+  gap: 18px;
+  border: 2px dashed #dfe5ee;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone strong {
+  gap: 8px;
+  padding: 13px 22px;
+  border-radius: 11px;
+  background: #f3f5f8;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-upload-zone span {
+  max-width: 480px;
+  color: #8d96a4;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-segment {
+  height: 50px;
+  margin-bottom: 24px;
+  border-radius: 12px;
+  background: #f0f2f5;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-segment button {
+  height: 46px;
+  border-radius: 10px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-model-grid {
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-model-grid select {
+  height: 52px;
+  border-radius: 10px;
+  padding: 0 14px;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-textarea-label {
+  margin-top: 24px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-textarea-label span {
+  margin-bottom: 14px;
+  color: #69717d;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-field textarea,
+.product-clone-page[data-tool="wear"] .product-try-on-textarea-label textarea {
+  min-height: 120px;
+  border: 1px solid #dbe3ee;
+  border-radius: 12px;
+  padding: 16px;
+  background: #ffffff;
+  font-size: 20px;
+  line-height: 1.45;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-model-button {
+  height: 56px;
+  margin-top: 24px;
+  border-radius: 12px;
+  background: #e3f1ff;
+  color: #1677ff;
+  font-size: 20px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-scene-grid {
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-scene-grid button {
+  height: 72px;
+  gap: 14px;
+  border-radius: 8px;
+  background: #f2f3f5;
+  padding: 0 18px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-scene-grid button span {
+  width: 24px;
+  height: 24px;
+  border-color: #cbd3df;
+  border-radius: 5px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-scene-field {
+  margin-top: 0;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch-row {
+  min-height: 100px;
+  border-radius: 12px;
+  background: #f2f3f5;
+  padding: 22px 24px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch-row strong {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch-row em {
+  color: #8a94a3;
+  font-size: 18px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch {
+  width: 52px;
+  height: 32px;
+  background: #e1e5eb;
+  padding: 3px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch span {
+  width: 26px;
+  height: 26px;
+  box-shadow: 0 2px 8px rgb(17 24 39 / 18%);
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-switch.is-on span {
+  transform: translateX(20px);
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-ratio-row {
+  height: 60px;
+  gap: 0;
+  border-radius: 14px;
+  background: #f2f3f5;
+  padding: 4px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-ratio-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  height: 52px;
+  border-radius: 12px;
+  background: transparent;
+  color: #4b5565;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-ratio-row button::before {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 18px;
+  border: 2px solid currentColor;
+  border-radius: 3px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-ratio-row button:nth-child(2)::before {
+  width: 14px;
+  height: 14px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-ratio-row button.is-active {
+  background: #ffffff;
+  color: #111827;
+  box-shadow: 0 1px 5px rgb(17 24 39 / 8%);
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-panel__footer {
+  padding: 24px 30px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-primary {
+  height: 70px;
+  border-radius: 12px;
+  background: #5a9bff;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview {
+  align-content: start;
+  justify-items: center;
+  gap: 84px;
+  padding: 88px 36px 56px;
+  background: #f3f4f6;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview__headline h1 {
+  margin-bottom: 22px;
+  font-size: 56px;
+  line-height: 1.12;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-preview__headline p {
+  color: #69717d;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-demo-board {
+  gap: 18px;
+  width: min(100%, 1100px);
+  min-height: 576px;
+  border-radius: 32px;
+  background: #ffffff;
+  padding: 37px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-card {
+  grid-template-rows: auto 118px 44px minmax(0, 1fr);
+  border-radius: 20px;
+  background: #eef3f5;
+  padding: 48px 0 36px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-card h2 {
+  margin-bottom: 28px;
+  font-size: 30px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-inputs img {
+  width: 105px;
+  height: 105px;
+  border-radius: 10px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-plus {
+  color: #a9b4c2;
+  font-size: 32px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-arrow {
+  width: 28px;
+  height: 28px;
+  border-right-width: 6px;
+  border-bottom-width: 6px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-results {
+  gap: 3px;
+  border-radius: 10px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-results img {
+  height: 228px;
+}
+
+.product-clone-page[data-tool="wear"] .product-try-on-generated {
+  width: min(100%, 1100px);
+  border-radius: 24px;
+  padding: 18px;
+}
+
+.product-clone-page[data-tool="wear"] .product-clone-help {
+  right: 36px;
+  bottom: 44px;
+  width: 64px;
+  height: 64px;
+  font-size: 30px;
+  box-shadow: 0 4px 14px rgb(17 24 39 / 10%);
+}
+
+.product-clone-empty-panel {
+  display: grid;
+  min-height: 340px;
+  place-items: center;
+  align-content: center;
+  gap: 10px;
+  color: #7b8495;
+  text-align: center;
+}
+
+.product-clone-empty-panel > span {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 14px;
+  background: #f2f4f7;
+  color: #111827;
+  font-size: 28px;
+}
+
+.product-clone-empty-panel h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 22px;
+}
+
+.product-clone-empty-panel p {
+  max-width: 260px;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+@media (max-width: 1180px) {
+  .product-clone-shell {
+    grid-template-columns: 64px 360px minmax(0, 1fr);
+  }
+
+  .product-clone-demo-board {
+    grid-template-columns: 1fr;
+    max-width: 560px;
+  }
+
+  .product-clone-flow {
+    display: none;
+  }
+
+  .product-clone-product-chip {
+    left: 52px;
+  }
+
+  .product-try-on-demo-board {
+    grid-template-columns: 1fr;
+    max-width: 360px;
+  }
+}
+
+@media (max-width: 860px) {
+  .product-clone-page {
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+  }
+
+  .product-clone-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .product-clone-rail {
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .product-clone-rail button {
+    min-width: 82px;
+  }
+
+  .product-clone-panel {
+    min-height: 680px;
+    border-right: 0;
+  }
+
+  .product-clone-page[data-tool="wear"] .product-clone-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .product-try-on-generated {
+    grid-template-columns: 1fr;
+  }
+}
+
+.product-clone-page,
+.product-clone-page[data-tool="set"],
+.product-clone-page[data-tool="detail"],
+.product-clone-page[data-tool="wear"],
+.product-clone-page[data-tool="clone"] {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.product-clone-page > .product-clone-shell {
+  min-height: 0;
+  height: 100%;
+}
+
+.product-clone-page[data-tool="set"] :is(
+  .product-set-upload-section,
+  .product-set-settings-section,
+  .product-set-detail-section
+) {
+  margin-bottom: 18px;
+  border: 1px solid #dfe5ee;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 16px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] :is(
+  .product-set-upload-section,
+  .product-set-settings-section,
+  .product-set-detail-section
+) h2 {
+  margin-bottom: 14px;
+}
+
+.product-set-setting-block {
+  display: grid;
+  gap: 10px;
+}
+
+.product-set-setting-block + .product-set-setting-block {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5eaf1;
+}
+
+.product-set-setting-title {
+  display: block;
+  color: #596272;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.product-set-output-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.product-set-output-grid button {
+  height: 38px;
+  min-width: 0;
+  border: 1px solid #dfe5ee;
+  border-radius: 9px;
+  background: #f5f6f8;
+  color: #111827;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.product-set-output-grid button:hover,
+.product-set-output-grid button.is-active {
+  border-color: #2b7cff;
+  background: #eaf4ff;
+  color: #0f57ff;
+}
+
+.product-set-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.product-set-field-grid label {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.product-set-field-grid label > span {
+  color: #6b7280;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.product-set-field-grid select {
+  height: 38px;
+  min-width: 0;
+  border: 1px solid #dfe5ee;
+  border-radius: 9px;
+  outline: none;
+  background: #f5f6f8;
+  color: #111827;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="set"] .product-set-detail-section textarea {
+  min-height: 176px;
+  resize: vertical;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload {
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload:hover,
+.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
+  border-color: #34d399;
+  background: #eefbf5;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload:active {
+  transform: scale(0.98);
+}
+
+.product-set-thumb-row {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.product-set-thumb {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid #dfe5ee;
+  border-radius: 10px;
+  background: #f5f6f8;
+  aspect-ratio: 1;
+}
+
+.product-set-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-set-thumb button {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 1px solid #dfe5ee;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-set-thumb button:hover {
+  background: #111827;
+  color: #ffffff;
+}
+
+.product-set-thumb button:active {
+  transform: scale(0.94);
+}
+
+.product-set-textarea-wrap {
+  position: relative;
+}
+
+.product-set-textarea-wrap textarea {
+  padding-bottom: 32px;
+}
+
+.product-set-textarea-wrap textarea:focus {
+  border-color: #34d399;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 16%);
+}
+
+.product-set-char-count {
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  color: #8a94a6;
+  font-size: 12px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.product-set-demo-board :is(button, figure) {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border: 0;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 0;
+  cursor: pointer;
+}
+
+.product-set-demo-board button {
+  transition:
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-set-demo-board button:hover {
+  transform: translateY(-1px);
+}
+
+.product-set-demo-board button:active {
+  transform: scale(0.98);
+}
+
+.product-set-demo-board :is(span, figcaption) {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  max-width: calc(100% - 24px);
+  overflow: hidden;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #111827;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-set-card-grid button {
+  height: 162px;
+}
+
+.product-set-flow-arrow {
+  animation: product-set-arrow-pulse 1.35s ease-in-out infinite;
+}
+
+.product-set-empty-preview {
+  display: grid;
+  width: min(100%, 620px);
+  min-height: 336px;
+  place-items: center;
+  align-content: center;
+  gap: 12px;
+  border: 1px dashed #d9e0ec;
+  border-radius: 18px;
+  background: #ffffff;
+  color: #6b7280;
+  padding: 32px;
+  text-align: center;
+}
+
+.product-set-empty-preview .anticon {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  place-items: center;
+  border-radius: 14px;
+  background: #eefbf5;
+  color: #34d399;
+  font-size: 26px;
+}
+
+.product-set-empty-preview strong {
+  color: #111827;
+  font-size: 18px;
+}
+
+.product-set-empty-preview span {
+  max-width: 360px;
+  color: #7b8495;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.product-set-preview-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 24;
+  display: grid;
+  place-items: center;
+  background: rgb(17 24 39 / 58%);
+  padding: 28px;
+  animation: product-set-modal-fade 180ms ease both;
+}
+
+.product-set-preview-modal {
+  position: relative;
+  display: grid;
+  width: min(820px, 92vw);
+  max-height: 88vh;
+  gap: 12px;
+  border: 1px solid #dfe5ee;
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 18px;
+  animation: product-set-modal-rise 180ms ease both;
+}
+
+.product-set-preview-modal img {
+  width: 100%;
+  max-height: 72vh;
+  object-fit: contain;
+  border-radius: 12px;
+  background: #f5f6f8;
+}
+
+.product-set-preview-modal strong {
+  color: #111827;
+  font-size: 15px;
+}
+
+.product-set-preview-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid #dfe5ee;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.product-set-preview-close:hover {
+  background: #111827;
+  color: #ffffff;
+}
+
+.product-set-preview-close:active {
+  transform: scale(0.94);
+}
+
+@keyframes product-set-arrow-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: translateX(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateX(5px);
+  }
+}
+
+@keyframes product-set-modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes product-set-modal-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (min-width: 1521px) {
+  .product-clone-page[data-tool="set"] :is(
+    .product-set-upload-section,
+    .product-set-settings-section,
+    .product-set-detail-section
+  ) {
+    margin-bottom: 24px;
+    border-radius: 16px;
+    padding: 24px;
+  }
+
+  .product-set-setting-block {
+    gap: 14px;
+  }
+
+  .product-set-setting-block + .product-set-setting-block {
+    margin-top: 22px;
+    padding-top: 22px;
+  }
+
+  .product-set-setting-title {
+    font-size: 18px;
+  }
+
+  .product-set-output-grid,
+  .product-set-field-grid {
+    gap: 14px;
+  }
+
+  .product-set-output-grid button,
+  .product-set-field-grid select {
+    height: 52px;
+    border-radius: 12px;
+    font-size: 18px;
+  }
+
+  .product-set-field-grid label > span {
+    font-size: 16px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-detail-section textarea {
+    min-height: 240px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-demo-board :is(button, figure) {
+    border-radius: 18px;
+    background: #f3f4f6;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-card-grid button {
+    height: 242px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-demo-board :is(span, figcaption) {
+    left: 14px;
+    top: 14px;
+    max-width: calc(100% - 28px);
+    padding: 9px 16px;
+    font-size: 16px;
+  }
+
+  .product-set-empty-preview {
+    min-height: 576px;
+  }
+
+  .product-set-empty-preview .anticon {
+    width: 72px;
+    height: 72px;
+    border-radius: 18px;
+    font-size: 34px;
+  }
+
+  .product-set-empty-preview strong {
+    font-size: 24px;
+  }
+
+  .product-set-empty-preview span {
+    font-size: 18px;
+  }
+}
+
+/* Product set final target: dark two-column workspace with floating input. */
+.product-clone-page[data-tool="set"] {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  background: #101115;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] > .product-clone-shell {
+  display: grid;
+  grid-template-columns: minmax(440px, 570px) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background: #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-rail {
+  display: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel {
+  display: block;
+  min-height: 0;
+  border-right: 1px solid #2a2d36;
+  background: #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  padding: 44px 36px 46px;
+  scrollbar-color: #3a3d49 #101115;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
+  margin: 0 0 30px;
+  border: 1px solid #2b2e39;
+  border-radius: 18px;
+  background: #17181f;
+  padding: 28px;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 24px;
+  color: #d8deed;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) h2 .anticon {
+  color: #737786;
+  font-size: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload {
+  min-height: 316px;
+  gap: 14px;
+  border: 2px dashed #3a3d4b;
+  border-radius: 18px;
+  background: #1a1d21;
+  color: #dbe7f7;
+  padding: 24px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload:hover,
+.product-clone-page[data-tool="set"] .product-set-upload.is-dragging {
+  border-color: #34d399;
+  background: #1a2421;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-icon {
+  display: grid;
+  width: 72px;
+  height: 72px;
+  place-items: center;
+  border-radius: 999px;
+  background: #20282a;
+  color: #34d399;
+  font-size: 32px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-title {
+  color: #bdd0e6;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload strong {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 168px;
+  height: 52px;
+  border-radius: 10px;
+  background: #34d399;
+  color: #03130d;
+  padding: 0 22px;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload strong span {
+  color: inherit;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.product-clone-page[data-tool="set"] .product-set-upload-note {
+  color: #788294;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb-row {
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb {
+  border-color: #2c303a;
+  background: #202229;
+}
+
+.product-clone-page[data-tool="set"] .product-set-thumb button {
+  border-color: #303541;
+  background: #17181f;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-block {
+  gap: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-block + .product-set-setting-block {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 0;
+}
+
+.product-clone-page[data-tool="set"] .product-set-setting-title {
+  color: #7f8798;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button {
+  height: 56px;
+  border: 1px solid #2d303b;
+  border-radius: 10px;
+  background: #1d1e26;
+  color: #c1ccdd;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button:hover {
+  border-color: #414653;
+  background: #232530;
+  color: #e7ecf6;
+}
+
+.product-clone-page[data-tool="set"] .product-set-output-grid button.is-active {
+  border-color: #34d399;
+  background: #34d399;
+  color: #04130e;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid label {
+  position: relative;
+  display: block;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid label > span {
+  position: absolute;
+  left: 18px;
+  top: 10px;
+  z-index: 1;
+  color: #7d8392;
+  font-size: 13px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.product-clone-page[data-tool="set"] .product-set-field-grid select {
+  width: 100%;
+  height: 72px;
+  border: 1px solid #2d303b;
+  border-radius: 10px;
+  background: #1d1e26;
+  color: #ffffff;
+  padding: 28px 18px 8px;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview {
+  position: relative;
+  display: grid;
+  min-height: 0;
+  overflow: hidden;
+  align-content: center;
+  justify-items: center;
+  gap: 24px;
+  background: #101115;
+  padding: 64px 56px 210px;
+  scrollbar-color: #3a3d49 #101115;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline {
+  position: absolute;
+  left: 32px;
+  right: 32px;
+  top: 10px;
+  text-align: center;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline h1 {
+  display: none;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p,
+.product-clone-page[data-tool="set"] .product-clone-preview__headline p span {
+  color: #758096;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview {
+  width: min(100%, 640px);
+  min-height: 300px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: #80899c;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview .anticon {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #2b2e39;
+  border-radius: 999px;
+  background: #1a1b22;
+  color: #565b69;
+  font-size: 46px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview strong {
+  color: #dbe3f2;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-empty-preview span {
+  max-width: 620px;
+  color: #747d90;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board {
+  width: min(100%, 980px);
+  min-height: 470px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.product-clone-page[data-tool="set"] .product-set-demo-board :is(button, figure) {
+  border: 1px solid #2b2e39;
+  background: #17181f;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail {
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 28px;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  border: 1px solid #2b2e39;
+  border-radius: 18px;
+  background: #17181f;
+  padding: 16px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail__head {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #d8deed;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail__head span {
+  color: #767f91;
+  font-size: 13px;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea {
+  min-width: 0;
+  min-height: 72px;
+  max-height: 150px;
+  border: 1px solid #2d303b;
+  border-radius: 12px;
+  outline: none;
+  resize: vertical;
+  background: #1d1e26;
+  color: #e7ecf6;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea::placeholder {
+  color: #687184;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail textarea:focus {
+  border-color: #34d399;
+  box-shadow: 0 0 0 3px rgb(52 211 153 / 14%);
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-submit {
+  align-self: stretch;
+  min-width: 148px;
+  border: 0;
+  border-radius: 12px;
+  background: #34d399;
+  color: #04130e;
+  padding: 0 18px;
+  font-size: 17px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-submit:disabled {
+  background: #26342f;
+  color: #687568;
+  cursor: not-allowed;
+}
+
+.product-clone-page[data-tool="set"] .product-clone-help {
+  display: none;
+}
+
+@media (max-width: 1520px) {
+  .product-clone-page[data-tool="set"] > .product-clone-shell {
+    grid-template-columns: minmax(370px, 535px) minmax(0, 1fr);
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-panel__scroll {
+    padding: 44px 36px 46px;
+  }
+
+  .product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
+    margin-bottom: 30px;
+    border-radius: 18px;
+    padding: 28px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-upload {
+    min-height: 316px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-output-grid button {
+    height: 56px;
+    font-size: 20px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-set-field-grid select {
+    height: 72px;
+    font-size: 20px;
+  }
+
+  .product-clone-page[data-tool="set"] .product-clone-preview {
+    padding: 64px 56px 210px;
+  }
+}
+
+.clone-ai-adwizard {
+  margin-top: 14px;
+  padding: 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.clone-ai-adwizard__head { display: flex; flex-direction: column; gap: 2px; }
+.clone-ai-adwizard__head strong { font-size: 14px; }
+.clone-ai-adwizard__head span { font-size: 12px; opacity: 0.6; }
+.clone-ai-adwizard__error { font-size: 12px; color: #ff7875; background: rgba(255, 90, 95, 0.12); border-radius: 8px; padding: 8px 10px; }
+.clone-ai-adwizard__progress { font-size: 12px; opacity: 0.8; display: flex; align-items: center; gap: 6px; }
+.clone-ai-adwizard__plan,
+.clone-ai-adwizard__render { padding: 10px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; background: linear-gradient(135deg, #6a5cff, #8b5cf6); color: #fff; }
+.clone-ai-adwizard__plan:disabled,
+.clone-ai-adwizard__render:disabled { opacity: 0.5; cursor: not-allowed; }
+.clone-ai-adwizard__plan-result { display: flex; flex-direction: column; gap: 10px; }
+.clone-ai-adwizard__block { padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 6px; }
+.clone-ai-adwizard__block strong { font-size: 13px; }
+.clone-ai-adwizard__block p { font-size: 12px; opacity: 0.8; margin: 0; }
+.clone-ai-adwizard__label { font-size: 12px; opacity: 0.6; }
+.clone-ai-adwizard__chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.clone-ai-adwizard__chips span { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
+.clone-ai-adwizard__scenes { display: flex; flex-direction: column; gap: 8px; }
+.clone-ai-adwizard__scene { padding: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.2); }
+.clone-ai-adwizard__scene-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
+.clone-ai-adwizard__scene-status.is-completed { color: #52c41a; }
+.clone-ai-adwizard__scene-status.is-failed { color: #ff4d4f; }
+.clone-ai-adwizard__scene-video { width: 100%; border-radius: 6px; margin-top: 6px; }
+.clone-ai-adwizard__risk { font-size: 12px; font-weight: 600; }
+.clone-ai-adwizard__risk.is-low { color: #52c41a; }
+.clone-ai-adwizard__risk.is-medium { color: #faad14; }
+.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
+.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
diff --git a/src/styles/pages/home.css b/src/styles/pages/home.css
new file mode 100644
index 0000000..15513d5
--- /dev/null
+++ b/src/styles/pages/home.css
@@ -0,0 +1,887 @@
+.omni-home {
+  --fg-body: #f3f5f2;
+  --fg-muted: #aeb8b1;
+  --fg-soft: #7e8983;
+  --accent: #00ff88;
+  --accent-rgb: 0, 255, 136;
+  --accent-hover: #58ffac;
+  --bg-inset: #101214;
+  --bg-hover: #202527;
+  --border-subtle: #2a3032;
+  --border-default: #394044;
+  --home-section-min-height: 100%;
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+  scroll-behavior: smooth;
+  scroll-snap-type: y proximity;
+  background: #05080d;
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.web-shell[data-view="home"] .omni-home {
+  --home-section-min-height: calc(100svh - 62px);
+}
+
+.omni-home button {
+  font: inherit;
+}
+
+.omni-home.page-motion {
+  animation: omni-home-page-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes omni-home-page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .omni-home {
+    scroll-behavior: auto;
+  }
+
+  .omni-home.page-motion {
+    animation: none;
+  }
+}
+
+.omni-home__bg-video,
+.omni-home__scrim {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.omni-home__bg-video {
+  z-index: 0;
+  object-fit: cover;
+}
+
+.omni-home__scrim {
+  z-index: 1;
+  background:
+    linear-gradient(180deg, rgba(5, 8, 13, 0.72), rgba(5, 8, 13, 0.48) 42%, rgba(5, 8, 13, 0.88)),
+    linear-gradient(90deg, rgba(5, 8, 13, 0.82), rgba(5, 8, 13, 0.56) 48%, rgba(5, 8, 13, 0.82));
+}
+
+.omni-home__shell {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  min-height: var(--home-section-min-height);
+  place-items: center;
+  padding: clamp(30px, 4vw, 58px) clamp(22px, 5vw, 72px) clamp(36px, 5vw, 76px);
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+
+.omni-home__hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  align-content: center;
+  gap: clamp(14px, 2.1vw, 26px);
+  width: min(100%, 1180px);
+  margin: 0 auto;
+}
+
+.omni-home__copy {
+  order: 1;
+  display: grid;
+  justify-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.omni-home__copy h1 {
+  max-width: none;
+  margin: 0;
+  color: #f6fff9;
+  font-size: clamp(38px, 4.4vw, 64px);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.05;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.omni-home__copy p {
+  max-width: 720px;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: clamp(15px, 1.45vw, 19px);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.75;
+  text-align: center;
+}
+
+.omni-home__actions {
+  order: 3;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(154px, 1fr));
+  gap: 14px;
+  width: min(100%, 660px);
+  margin-top: clamp(2px, 0.7vw, 10px);
+}
+
+.omni-home__entry {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-width: 0;
+  min-height: 72px;
+  padding: 0 28px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  cursor: pointer;
+  font-size: 17px;
+  font-weight: 850;
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.omni-home__entry .anticon {
+  font-size: 18px;
+}
+
+.omni-home__entry:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+.omni-home__entry--primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text, #061014);
+}
+
+.omni-home__entry--primary:hover {
+  border-color: var(--accent-hover, var(--accent));
+  background: var(--accent-hover, var(--accent));
+  color: var(--dg-button-text, #061014);
+}
+
+.omni-home__carousel {
+  order: 2;
+  position: relative;
+  justify-self: center;
+  width: min(68vw, 820px);
+  min-height: 0;
+  aspect-ratio: 16 / 9;
+  transform: none;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.omni-home__carousel-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  background: transparent;
+}
+
+.omni-home__carousel-stage img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 78%;
+  height: auto;
+  max-height: calc(100% - 34px);
+  aspect-ratio: 16 / 9;
+  border: 0;
+  border-radius: 8px;
+  object-fit: cover;
+  opacity: 0.42;
+  transform: translate(-50%, -50%) scale(0.72);
+  transition:
+    left 520ms cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 360ms ease,
+    transform 520ms cubic-bezier(0.32, 0.72, 0, 1),
+    filter 360ms ease;
+}
+
+.omni-home__carousel-stage img.is-active {
+  z-index: 3;
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+  filter: none;
+}
+
+.omni-home__carousel-stage img.is-prev,
+.omni-home__carousel-stage img.is-next {
+  z-index: 1;
+  width: 56%;
+  max-height: calc(100% - 72px);
+  filter: brightness(0.62) saturate(0.78);
+}
+
+.omni-home__carousel-stage img.is-prev {
+  left: 18%;
+}
+
+.omni-home__carousel-stage img.is-next {
+  left: 82%;
+}
+
+.omni-home__carousel-dots {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transform: translateX(-50%);
+}
+
+.omni-home__carousel-dots button {
+  width: 9px;
+  height: 9px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.46);
+  cursor: pointer;
+  transition: width 180ms ease, background 180ms ease;
+}
+
+.omni-home__carousel-dots button.is-active {
+  width: 28px;
+  background: var(--accent);
+}
+
+.omni-home__carousel {
+  width: min(100%, 1280px);
+  min-height: clamp(340px, 34vw, 500px);
+  aspect-ratio: auto;
+  overflow: hidden;
+  color: #f6f8f6;
+  isolation: isolate;
+}
+
+.omni-home__carousel-stage {
+  width: min(100%, 1160px);
+  height: clamp(320px, 31vw, 450px);
+  margin: 0 auto;
+  overflow: visible;
+  transform-style: preserve-3d;
+}
+
+.omni-home__carousel-deck {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+}
+
+.omni-home__carousel-card {
+  --apple-card-offset: 0;
+  --apple-card-depth: 0;
+  --apple-card-z: 20;
+  --apple-card-x: 0;
+  --apple-card-y: 0;
+  --apple-card-z-offset: 0;
+  --apple-card-rotate-y: 0deg;
+  --apple-card-rotate-z: 0deg;
+  --apple-card-scale: 1;
+  --apple-card-opacity: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  width: clamp(214px, 17vw, 286px);
+  height: clamp(122px, 9.8vw, 162px);
+  place-items: center;
+  overflow: hidden;
+  border: 0;
+  border-radius: clamp(10px, 1.2vw, 16px);
+  background: #0d1110;
+  color: #101412;
+  padding: 0;
+  cursor: pointer;
+  opacity: var(--apple-card-opacity);
+  box-shadow:
+    0 10px 24px rgb(0 0 0 / 16%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+  transform:
+    translate(-50%, -50%)
+    translateX(var(--apple-card-x))
+    translateY(var(--apple-card-y))
+    translateZ(var(--apple-card-z-offset))
+    rotateY(var(--apple-card-rotate-y))
+    rotateZ(var(--apple-card-rotate-z))
+    scale(var(--apple-card-scale));
+  transform-origin: center;
+  transform-style: preserve-3d;
+  transition:
+    transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 860ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 860ms cubic-bezier(0.22, 1, 0.36, 1);
+  z-index: var(--apple-card-z);
+}
+
+.omni-home__carousel-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 14%), transparent 24%),
+    linear-gradient(0deg, rgb(0 0 0 / 20%), transparent 44%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.omni-home__carousel-stage .omni-home__carousel-card img {
+  position: static;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  aspect-ratio: auto;
+  border: 0;
+  border-radius: inherit;
+  opacity: 1;
+  filter:
+    saturate(1.08)
+    contrast(1.02)
+    drop-shadow(0 18px 18px rgb(0 0 0 / 14%));
+  object-fit: cover;
+  transform: translateZ(12px);
+  transition:
+    filter 640ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 860ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.omni-home__carousel.is-resetting .omni-home__carousel-card,
+.omni-home__carousel.is-resetting .omni-home__carousel-card img {
+  transition: none;
+}
+
+.omni-home__carousel-card.is-active {
+  width: clamp(390px, 37vw, 620px);
+  height: clamp(220px, 20.8vw, 350px);
+  border-radius: clamp(16px, 1.8vw, 24px);
+  box-shadow:
+    0 18px 40px rgb(0 0 0 / 26%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+}
+
+.omni-home__carousel-stage .omni-home__carousel-card.is-active img {
+  width: 100%;
+  height: 100%;
+  filter:
+    saturate(1.12)
+    contrast(1.04)
+    drop-shadow(0 22px 20px rgb(0 0 0 / 16%));
+  transform: translateZ(20px) scale(1.02);
+}
+
+.omni-home__carousel-card:hover {
+  box-shadow:
+    0 28px 58px rgb(0 0 0 / 34%),
+    inset 0 -1px 0 rgb(0 0 0 / 8%);
+}
+
+.omni-home__carousel-dots {
+  display: none;
+}
+
+.omni-home__feature-pages {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  gap: 0;
+  width: 100%;
+  min-height: var(--home-section-min-height);
+  background:
+    linear-gradient(180deg, rgb(5 8 13 / 0%), #05080d 2%, #05080d 100%),
+    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
+    linear-gradient(180deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
+  background-size: auto, 36px 36px, 36px 36px;
+}
+
+.omni-home__feature-page {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.62fr) minmax(520px, 1.38fr);
+  align-items: center;
+  gap: clamp(28px, 5vw, 72px);
+  min-height: var(--home-section-min-height);
+  overflow: hidden;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  padding: clamp(42px, 6vw, 82px) clamp(22px, 7vw, 92px);
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+
+.omni-home__feature-page::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgb(5 8 13 / 94%) 0%, rgb(5 8 13 / 78%) 38%, rgb(5 8 13 / 40%) 100%),
+    linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 32%);
+  pointer-events: none;
+}
+
+.omni-home__feature-page.is-token::before {
+  background:
+    linear-gradient(90deg, rgb(5 8 13 / 96%) 0%, rgb(5 8 13 / 80%) 42%, rgb(5 8 13 / 48%) 100%),
+    linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 34%);
+}
+
+.omni-home__feature-page.is-ecommerce::before {
+  background:
+    linear-gradient(90deg, rgb(5 8 13 / 92%) 0%, rgb(5 8 13 / 76%) 36%, rgb(5 8 13 / 36%) 100%),
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 30%);
+}
+
+.omni-home__feature-copy,
+.omni-home__feature-visual,
+.omni-home__feature-stats {
+  position: relative;
+  z-index: 1;
+}
+
+.omni-home__feature-copy {
+  display: grid;
+  justify-items: start;
+  gap: 20px;
+  max-width: 620px;
+}
+
+.omni-home__feature-copy > span,
+.omni-home__experience-copy > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.omni-home__feature-copy > span .anticon,
+.omni-home__experience-copy > span .anticon {
+  font-size: 17px;
+}
+
+.omni-home__feature-copy h2,
+.omni-home__experience-copy h2 {
+  margin: 0;
+  color: #ffffff;
+  font-size: clamp(42px, 6.8vw, 96px);
+  font-weight: 950;
+  letter-spacing: 0;
+  line-height: 1.04;
+}
+
+.omni-home__feature-copy p,
+.omni-home__experience-copy p {
+  max-width: 720px;
+  margin: 0;
+  color: rgb(232 238 236 / 78%);
+  font-size: clamp(17px, 2vw, 25px);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.65;
+}
+
+.omni-home__feature-copy button,
+.omni-home__experience-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 58px;
+  border: 1px solid rgb(255 255 255 / 82%);
+  border-radius: 999px;
+  background: #ffffff;
+  color: #05080d;
+  padding: 0 30px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 900;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.omni-home__feature-copy button:hover,
+.omni-home__experience-actions button:hover {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #061014;
+  transform: translateY(-2px);
+}
+
+.omni-home__feature-visual {
+  justify-self: stretch;
+  display: grid;
+  min-height: clamp(280px, 31vw, 520px);
+  max-height: min(58vh, 560px);
+  aspect-ratio: 6240 / 2656;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 20px;
+  background: #101214;
+  box-shadow: 0 28px 72px rgb(0 0 0 / 36%);
+}
+
+.omni-home__feature-visual img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: saturate(1.04) contrast(1.04);
+  object-fit: contain;
+  object-position: center;
+  transform: none;
+  transform-origin: center;
+}
+
+.omni-home__feature-stats {
+  position: absolute;
+  right: clamp(22px, 7vw, 92px);
+  bottom: clamp(26px, 5vw, 58px);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+  max-width: min(760px, 48vw);
+}
+
+.omni-home__feature-stats span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  border: 1px solid rgb(255 255 255 / 16%);
+  border-radius: 999px;
+  background: rgb(255 255 255 / 8%);
+  color: rgb(255 255 255 / 82%);
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 850;
+  backdrop-filter: blur(12px);
+}
+
+.omni-home__experience {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.86fr) minmax(360px, 1.14fr) minmax(240px, auto);
+  align-items: center;
+  gap: clamp(24px, 4.5vw, 72px);
+  min-height: var(--home-section-min-height);
+  overflow: hidden;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  padding: clamp(46px, 7vw, 96px) clamp(22px, 7vw, 92px);
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+  background:
+    linear-gradient(112deg, rgb(0 255 136 / 16%) 0 1px, transparent 1px 18%),
+    linear-gradient(68deg, rgb(70 170 255 / 13%) 0 1px, transparent 1px 22%),
+    linear-gradient(135deg, rgb(170 95 255 / 12%) 0%, transparent 32%),
+    linear-gradient(180deg, #070b10 0%, #05080d 100%);
+}
+
+.omni-home__experience::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgb(0 255 136 / 12%) 1px, transparent 1px),
+    linear-gradient(180deg, rgb(70 170 255 / 9%) 1px, transparent 1px),
+    linear-gradient(135deg, transparent 0 44%, rgb(255 211 93 / 20%) 44% 44.35%, transparent 44.35% 100%);
+  background-size: 36px 36px, 36px 36px, 100% 100%;
+  mask-image: linear-gradient(180deg, rgb(0 0 0 / 78%), rgb(0 0 0 / 28%));
+  pointer-events: none;
+}
+
+.omni-home__experience-copy,
+.omni-home__experience-visual,
+.omni-home__experience-actions {
+  position: relative;
+  z-index: 1;
+}
+
+.omni-home__experience-copy {
+  display: grid;
+  gap: 20px;
+  max-width: 940px;
+}
+
+.omni-home__experience-copy h2 {
+  max-width: 560px;
+  font-size: clamp(42px, 5.4vw, 84px);
+}
+
+.omni-home__experience-copy p {
+  max-width: 520px;
+  font-size: clamp(18px, 1.55vw, 24px);
+}
+
+.omni-home__experience-visual {
+  display: grid;
+  min-height: clamp(280px, 31vw, 420px);
+  place-items: center;
+  isolation: isolate;
+}
+
+.omni-home__experience-visual::before,
+.omni-home__experience-visual::after {
+  content: "";
+  position: absolute;
+  inset: 8% 5%;
+  border: 1px solid rgb(0 255 136 / 28%);
+  transform: skewX(-12deg);
+  pointer-events: none;
+}
+
+.omni-home__experience-visual::after {
+  inset: 22% 15%;
+  border-color: rgb(70 170 255 / 24%);
+  transform: skewX(14deg);
+}
+
+.omni-home__experience-line {
+  position: absolute;
+  left: 5%;
+  right: 5%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgb(0 255 136 / 78%), rgb(70 170 255 / 68%), transparent);
+  transform: rotate(-8deg);
+  transform-origin: center;
+  z-index: 0;
+}
+
+.omni-home__experience-line.is-top {
+  top: 24%;
+}
+
+.omni-home__experience-line.is-bottom {
+  bottom: 25%;
+  background: linear-gradient(90deg, transparent, rgb(255 211 93 / 70%), rgb(170 95 255 / 66%), transparent);
+  transform: rotate(8deg);
+}
+
+.omni-home__experience-routes {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(130px, 1fr));
+  gap: 16px;
+  width: min(100%, 520px);
+}
+
+.omni-home__experience-route {
+  --route-color: var(--accent);
+  display: grid;
+  gap: 7px;
+  min-height: 106px;
+  align-content: center;
+  border: 1px solid color-mix(in srgb, var(--route-color) 42%, transparent);
+  border-left-width: 5px;
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--route-color) 19%, transparent), rgb(255 255 255 / 5%)),
+    rgb(6 12 14 / 72%);
+  color: #ffffff;
+  padding: 16px 18px;
+  box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
+  backdrop-filter: blur(12px);
+}
+
+.omni-home__experience-route b {
+  font-size: clamp(24px, 2.4vw, 36px);
+  font-weight: 950;
+  line-height: 1;
+}
+
+.omni-home__experience-route small {
+  color: rgb(235 245 242 / 72%);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.omni-home__experience-route.is-green {
+  --route-color: #00ff88;
+}
+
+.omni-home__experience-route.is-cyan {
+  --route-color: #46aaff;
+}
+
+.omni-home__experience-route.is-violet {
+  --route-color: #aa5fff;
+}
+
+.omni-home__experience-route.is-amber {
+  --route-color: #ffd35d;
+}
+
+.omni-home__experience-actions {
+  display: grid;
+  gap: 14px;
+  min-width: min(100%, 320px);
+}
+
+.omni-home__experience-actions button {
+  width: 100%;
+  min-height: 64px;
+  border-color: rgb(255 255 255 / 20%);
+  background: rgb(255 255 255 / 7%);
+  color: #ffffff;
+  backdrop-filter: blur(14px);
+}
+
+.omni-home__experience-actions button.is-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #061014;
+}
+
+@media (max-width: 980px) {
+  .omni-home__shell {
+    align-items: start;
+    padding: 34px 18px 48px;
+  }
+
+  .omni-home__hero {
+    grid-template-columns: 1fr;
+  }
+
+  .omni-home__carousel {
+    width: 100%;
+    min-height: 0;
+    transform: none;
+  }
+
+  .omni-home__carousel-stage {
+    min-height: 0;
+  }
+
+  .omni-home__feature-page,
+  .omni-home__experience {
+    grid-template-columns: 1fr;
+  }
+
+  .omni-home__feature-page {
+    min-height: var(--home-section-min-height);
+    padding-block: 48px 86px;
+  }
+
+  .omni-home__feature-copy {
+    max-width: 720px;
+  }
+
+  .omni-home__feature-visual {
+    min-height: 0;
+    max-height: none;
+  }
+
+  .omni-home__feature-stats {
+    right: 22px;
+    left: 22px;
+    max-width: none;
+    justify-content: flex-start;
+  }
+
+  .omni-home__experience-actions {
+    width: min(100%, 520px);
+  }
+}
+
+@media (max-width: 560px) {
+  .omni-home__copy h1 {
+    font-size: 30px;
+  }
+
+  .omni-home__actions,
+  .omni-home__entry {
+    width: 100%;
+  }
+
+  .omni-home__actions {
+    grid-template-columns: 1fr;
+  }
+
+  .omni-home__carousel {
+    padding: 0;
+  }
+
+  .omni-home__carousel-stage {
+    min-height: 0;
+  }
+
+  .omni-home__carousel-stage img {
+    width: 82%;
+  }
+
+  .omni-home__feature-page,
+  .omni-home__experience {
+    padding-inline: 18px;
+  }
+
+  .omni-home__feature-copy h2,
+  .omni-home__experience-copy h2 {
+    font-size: 34px;
+  }
+
+  .omni-home__feature-copy p,
+  .omni-home__experience-copy p {
+    font-size: 16px;
+  }
+
+  .omni-home__feature-copy button,
+  .omni-home__experience-actions button {
+    width: 100%;
+    min-height: 56px;
+    font-size: 16px;
+  }
+
+  .omni-home__feature-visual {
+    min-height: 0;
+    border-radius: 12px;
+  }
+
+  .omni-home__feature-stats {
+    bottom: 34px;
+  }
+
+  .omni-home__feature-stats span {
+    min-height: 32px;
+    font-size: 12px;
+  }
+}
diff --git a/src/styles/pages/image-workbench.css b/src/styles/pages/image-workbench.css
new file mode 100644
index 0000000..10cd3f0
--- /dev/null
+++ b/src/styles/pages/image-workbench.css
@@ -0,0 +1,1691 @@
+/* === Image Workbench === */
+.image-workbench-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.digital-human-page.image-workbench-page > .studio-tool-layout--no-top,
+.character-mix-page.image-workbench-page > .studio-tool-layout--no-top {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.digital-human-page .image-workbench-mode-tabs,
+.character-mix-page .image-workbench-mode-tabs,
+.token-usage-page .image-workbench-mode-tabs {
+  margin-left: 0;
+}
+
+.digital-human-page .image-workbench-camera-summary,
+.character-mix-page .image-workbench-camera-summary,
+.token-usage-page .image-workbench-camera-summary {
+  margin-left: auto;
+}
+
+.digital-human-page .digital-human-cancel-btn {
+  margin-top: 8px;
+  border-color: color-mix(in srgb, #9ca3af 66%, transparent);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, #9ca3af 22%, var(--bg-elevated, #171d1b)),
+    color-mix(in srgb, #6b7280 16%, var(--bg-elevated, #171d1b))
+  );
+  color: color-mix(in srgb, var(--fg-body, #f3f5f2) 92%, white 8%);
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset, 0 10px 24px rgb(148 163 184 / 0.16);
+  font-weight: 900;
+  letter-spacing: 0;
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 140ms ease, transform 140ms ease;
+}
+
+.digital-human-page .digital-human-cancel-btn:hover {
+  border-color: color-mix(in srgb, #d1d5db 76%, transparent);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, #d1d5db 28%, var(--bg-elevated, #171d1b)),
+    color-mix(in srgb, #9ca3af 20%, var(--bg-elevated, #171d1b))
+  );
+  color: color-mix(in srgb, var(--fg-body, #f3f5f2) 96%, white 4%);
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset, 0 12px 28px rgb(148 163 184 / 0.2);
+  opacity: 1;
+}
+
+.digital-human-page .digital-human-cancel-btn:focus-visible {
+  outline: 2px solid color-mix(in srgb, #d1d5db 78%, transparent);
+  outline-offset: 2px;
+}
+
+.digital-human-page .digital-human-cancel-btn .anticon {
+  font-size: 15px;
+}
+
+.character-mix-face-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  line-height: 1.4;
+  margin-top: 4px;
+}
+
+.character-mix-face-hint--analyzing {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--text-secondary);
+}
+
+.character-mix-face-hint--ready {
+  background: color-mix(in srgb, #10b981 10%, transparent);
+  color: #10b981;
+}
+
+.image-workbench-topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.image-workbench-back-to-more {
+  padding: 6px 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.image-workbench-back-to-more:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-tool-strip {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.image-workbench-tool-strip button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-tool-strip button.is-active {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.image-workbench-subbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 20px;
+  border-bottom: 1px solid var(--border-weak);
+  background: var(--bg-elevated);
+}
+
+.image-workbench-page--image-tool > .image-workbench-subbar {
+  justify-content: flex-start;
+  overflow: hidden;
+  border-bottom-left-radius: var(--radius-md);
+}
+
+.image-workbench-subbar__heading {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-width: 0;
+  gap: 12px;
+}
+
+.image-workbench-subbar__next--solo {
+  margin-left: auto;
+}
+
+.image-workbench-subbar strong {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.image-workbench-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+
+.image-workbench-icon-btn:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-mode-tabs {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.image-workbench-mode-tabs button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.image-workbench-mode-tabs button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.image-workbench-camera-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.image-workbench-camera-summary strong {
+  color: var(--fg-body);
+}
+
+.image-workbench-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr 220px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.image-workbench-layout--inpaint {
+  grid-template-columns: 260px 1fr 240px;
+}
+
+.image-workbench-layout--camera {
+  grid-template-columns: 300px 1fr;
+}
+
+.image-workbench-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  overflow-y: auto;
+  border-right: 1px solid var(--border-weak);
+}
+
+.image-workbench-panel--right {
+  border-right: none;
+  border-left: 1px solid var(--border-weak);
+}
+
+.image-workbench-control-card {
+  padding: 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.image-workbench-control-card h3 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.image-workbench-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.image-workbench-section-title h3 {
+  margin: 0;
+}
+
+.image-workbench-section-title span {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.image-workbench-upload-shell {
+  position: relative;
+}
+
+.image-workbench-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 140px;
+  padding: 20px;
+  border: 1px dashed var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.image-workbench-upload:hover {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.04);
+}
+
+.image-workbench-upload img {
+  max-width: 100%;
+  max-height: 120px;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
+.image-workbench-upload strong {
+  color: var(--fg-body);
+}
+
+.image-workbench-upload--tile {
+  min-height: 140px;
+}
+
+.image-workbench-upload-remove {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 50%;
+  background: var(--error);
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.image-workbench-control-card input[type="file"] {
+  display: none;
+}
+
+.image-workbench-url-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.image-workbench-url-row label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.image-workbench-url-row label input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 13px;
+  outline: none;
+}
+
+.image-workbench-url-row button {
+  padding: 6px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.image-workbench-url-row button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-reference-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 8px;
+}
+
+.image-workbench-reference-grid .image-workbench-upload--tile {
+  grid-column: 1 / -1;
+}
+
+.image-workbench-reference-thumb {
+  position: relative;
+}
+
+.image-workbench-reference-thumb img {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.image-workbench-segmented {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.image-workbench-segmented button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.image-workbench-segmented button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.image-workbench-field-label {
+  display: block;
+  font-size: 12px;
+  color: var(--fg-muted);
+  margin-bottom: 6px;
+}
+
+textarea.image-workbench-prompt {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  resize: vertical;
+  font-family: inherit;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.image-workbench-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.image-workbench-select span {
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.image-workbench-select select {
+  width: 100%;
+  padding: 7px 28px 7px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs, 8px);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.image-workbench-select select:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+}
+
+.image-workbench-select select:focus {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
+}
+
+.image-workbench-count {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.image-workbench-count span {
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.image-workbench-count div {
+  display: flex;
+  gap: 4px;
+}
+
+.image-workbench-count button {
+  padding: 4px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.image-workbench-count button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.image-workbench-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 0 0;
+}
+
+.image-workbench-actions button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.image-workbench-actions button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.image-workbench-primary {
+  border-color: var(--accent) !important;
+  background: rgba(var(--accent-rgb), 0.1) !important;
+  color: var(--accent) !important;
+}
+
+.image-workbench-primary:hover {
+  background: rgba(var(--accent-rgb), 0.18) !important;
+}
+
+.image-workbench-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--bg-inset);
+}
+
+.image-workbench-canvas img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.image-workbench-canvas-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+  padding: 16px;
+  width: 100%;
+  align-content: start;
+}
+
+.image-workbench-canvas-grid img {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.image-workbench-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-dim);
+  font-size: 14px;
+}
+
+.image-workbench-empty .anticon {
+  font-size: 32px;
+  opacity: 0.5;
+}
+
+.image-workbench-empty--button {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.image-workbench-empty--button:hover {
+  color: var(--accent);
+}
+
+.image-workbench-inpaint-stage,
+.image-workbench-camera-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.image-workbench-inpaint-stage img,
+.image-workbench-camera-stage img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.image-workbench-inpaint-stage > span,
+.image-workbench-camera-stage > span {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 12px;
+  border-radius: var(--radius-xs);
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* Inpaint mask canvas */
+.image-workbench-inpaint-canvas {
+  display: block;
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+}
+
+.image-workbench-inpaint-toolbar {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(8px);
+  z-index: 10;
+}
+
+.image-workbench-inpaint-tool {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.image-workbench-inpaint-tool:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.image-workbench-camera-stage > span {
+  bottom: 64px;
+}
+
+.image-workbench-camera-stage > .image-workbench-result-actions {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  width: min(360px, calc(100% - 32px));
+  transform: translateX(-50%);
+}
+
+.image-workbench-inpaint-tool.is-active {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.image-workbench-inpaint-tool--done {
+  color: #2dd4bf;
+}
+
+.image-workbench-inpaint-tool--done:hover {
+  color: #5eead4;
+}
+
+.image-workbench-inpaint-edit-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-md);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.image-workbench-inpaint-bottom-bar > .image-workbench-inpaint-edit-btn {
+  position: static;
+  transform: none;
+}
+
+.image-workbench-inpaint-edit-btn:hover {
+  background: rgba(0, 0, 0, 0.85);
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.image-workbench-inpaint-stage {
+  overflow: auto;
+}
+
+.image-workbench-inpaint-tool-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.image-workbench-inpaint-zoom-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  min-width: 36px;
+  text-align: center;
+  padding: 0 4px;
+}
+
+.image-workbench-inpaint-bottom-bar {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.image-workbench-inpaint-zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+}
+
+.image-workbench-inpaint-zoom-controls button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.image-workbench-inpaint-zoom-controls button:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.image-workbench-inpaint-zoom-controls span {
+  position: static;
+  transform: none;
+  padding: 0 4px;
+  background: none;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  min-width: 36px;
+  text-align: center;
+}
+
+.image-workbench-result-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.image-workbench-result-thumb {
+  display: block;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  aspect-ratio: 1;
+  transition: border-color 0.15s;
+}
+
+.image-workbench-result-thumb:hover {
+  border-color: var(--accent, #2dd4bf);
+}
+
+.image-workbench-result-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-workbench-range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.image-workbench-range span {
+  min-width: 56px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.image-workbench-range input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+}
+
+.image-workbench-range em {
+  min-width: 40px;
+  font-size: 12px;
+  font-style: normal;
+  color: var(--fg-soft);
+  text-align: right;
+}
+
+.image-workbench-chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.image-workbench-chip-grid button {
+  padding: 4px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.image-workbench-chip-grid button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.image-workbench-direction-pad {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+}
+
+.image-workbench-direction-pad button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.image-workbench-direction-pad button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.image-workbench-toggle {
+  width: 36px;
+  height: 20px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-inset);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.image-workbench-toggle.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.2);
+}
+
+.image-workbench-camera-prompt textarea {
+  width: 100%;
+  min-height: 56px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  resize: vertical;
+}
+
+.image-workbench-camera-prompt textarea:disabled {
+  opacity: 0.5;
+}
+
+.image-workbench-right-note {
+  padding: 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.image-workbench-right-note h3 {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.image-workbench-right-note span {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.image-workbench-switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.image-workbench-switch-row h3 {
+  margin: 0;
+}
+
+.image-workbench-status {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 20px;
+  border-top: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.image-workbench-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 0 999px 999px 0;
+  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.58));
+  pointer-events: none;
+  transform-origin: left center;
+  transition: transform 0.25s ease;
+}
+
+.image-workbench-status span {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.image-workbench-status p {
+  flex: 1;
+  margin: 0;
+  color: var(--fg-muted);
+}
+
+.image-workbench-status em {
+  font-style: normal;
+  color: var(--fg-soft);
+}
+
+/* BeforeAfterCompare generic component */
+.before-after-compare {
+  --compare-position: 50%;
+  position: relative;
+  display: block;
+  width: min(100%, 980px);
+  aspect-ratio: 16 / 9;
+  max-height: 72vh;
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 50%, rgba(118, 150, 255, 0.08) 50% 100%),
+    var(--bg-inset);
+}
+
+.before-after-compare__layer {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.before-after-compare__layer--source {
+  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.before-after-compare__layer--result {
+  clip-path: inset(0 0 0 var(--compare-position));
+  background: rgba(105, 137, 255, 0.08);
+}
+
+.before-after-compare__layer img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  object-fit: contain;
+}
+
+.before-after-compare__layer--source img {
+  filter: saturate(0.82) contrast(0.86) brightness(0.88);
+}
+
+.before-after-compare__layer--result img {
+  filter: saturate(1.12) contrast(1.08) brightness(1.03);
+  transform: scale(1.06);
+  transform-origin: center;
+}
+
+.before-after-compare__label {
+  position: absolute;
+  top: 0;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 20px;
+  color: rgb(255 255 255);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.before-after-compare__label--source {
+  left: 0;
+  background: rgba(0, 0, 0, 0.34);
+}
+
+.before-after-compare__label--result {
+  left: var(--compare-position);
+  background: rgba(65, 116, 246, 0.42);
+}
+
+.before-after-compare__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--compare-position);
+  z-index: 4;
+  width: 2px;
+  padding: 0;
+  border: 0;
+  background: rgb(37 102 244);
+  cursor: ew-resize;
+  touch-action: none;
+  transform: translateX(-50%);
+}
+
+.before-after-compare__divider:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.86);
+  outline-offset: 4px;
+}
+
+.before-after-compare__divider span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: rgb(37 102 244);
+  box-shadow: none;
+  transform: translate(-50%, -50%);
+}
+
+.before-after-compare__divider span::before,
+.before-after-compare__divider span::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.before-after-compare__divider span::before {
+  left: 9px;
+  border-right: 6px solid rgb(255 255 255);
+}
+
+.before-after-compare__divider span::after {
+  right: 9px;
+  border-left: 6px solid rgb(255 255 255);
+}
+
+/* Resolution Upscale specific */
+.resolution-upscale-compare-stage {
+  --resolution-compare-position: 50%;
+  position: relative;
+  display: block;
+  width: min(100%, 980px);
+  aspect-ratio: 16 / 9;
+  max-height: 72vh;
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 50%, rgba(118, 150, 255, 0.08) 50% 100%),
+    var(--bg-inset);
+}
+
+.resolution-upscale-compare__image {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.resolution-upscale-compare__image--source {
+  clip-path: inset(0 calc(100% - var(--resolution-compare-position)) 0 0);
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.resolution-upscale-compare__image--result {
+  clip-path: inset(0 0 0 var(--resolution-compare-position));
+  background: rgba(105, 137, 255, 0.08);
+}
+
+.resolution-upscale-compare__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  object-fit: contain;
+}
+
+.resolution-upscale-compare__image--source img {
+  filter: saturate(0.82) contrast(0.86) brightness(0.88);
+}
+
+.resolution-upscale-compare__image--result img {
+  filter: saturate(1.12) contrast(1.08) brightness(1.03);
+  transform: scale(1.06);
+  transform-origin: center;
+}
+
+.resolution-upscale-compare__label {
+  position: absolute;
+  top: 0;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 20px;
+  color: rgb(255 255 255);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.resolution-upscale-compare__label--source {
+  left: 0;
+  background: rgba(0, 0, 0, 0.34);
+}
+
+.resolution-upscale-compare__label--result {
+  left: var(--resolution-compare-position);
+  background: rgba(65, 116, 246, 0.42);
+}
+
+.resolution-upscale-compare__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--resolution-compare-position);
+  z-index: 4;
+  width: 2px;
+  padding: 0;
+  border: 0;
+  background: rgb(37 102 244);
+  cursor: ew-resize;
+  touch-action: none;
+  transform: translateX(-50%);
+}
+
+.resolution-upscale-compare__divider:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.86);
+  outline-offset: 4px;
+}
+
+.resolution-upscale-compare__divider span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: rgb(37 102 244);
+  box-shadow: none;
+  transform: translate(-50%, -50%);
+}
+
+.resolution-upscale-compare__divider span::before,
+.resolution-upscale-compare__divider span::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.resolution-upscale-compare__divider span::before {
+  left: 9px;
+  border-right: 6px solid rgb(255 255 255);
+}
+
+.resolution-upscale-compare__divider span::after {
+  right: 9px;
+  border-left: 6px solid rgb(255 255 255);
+}
+
+/* Video style chips */
+.resolution-upscale-style-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.resolution-upscale-style-chips__title {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.resolution-upscale-style-chips__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 6px;
+}
+
+.resolution-upscale-style-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  white-space: nowrap;
+}
+
+.resolution-upscale-style-chip:hover {
+  border-color: var(--border-medium, var(--border-weak));
+  background: var(--bg-hover, var(--bg-elevated));
+}
+
+.resolution-upscale-style-chip.is-active {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.resolution-upscale-style-chip__swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+/* Video toggle */
+.resolution-upscale-video-toggle {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  z-index: 5;
+  display: inline-flex;
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  overflow: hidden;
+  transform: translateX(-50%);
+}
+
+.resolution-upscale-video-toggle button {
+  padding: 5px 14px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.resolution-upscale-video-toggle button:hover {
+  color: #fff;
+}
+
+.resolution-upscale-video-toggle button.is-active {
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.resolution-upscale-video-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.resolution-upscale-video-stage video {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
+}
+
+.resolution-upscale-video-stage span {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 12px;
+  border-radius: var(--radius-xs);
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 12px;
+}
+
+.resolution-upscale-image-stage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 12px;
+}
+
+.resolution-upscale-image-stage > .before-after-compare {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.resolution-upscale-result-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.resolution-upscale-result-actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.resolution-upscale-result-actions button:hover:not(:disabled) {
+  background: var(--accent);
+}
+
+.resolution-upscale-result-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.resolution-upscale-video-header {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 10;
+}
+
+.resolution-upscale-video-header .resolution-upscale-video-toggle {
+  position: static;
+  transform: none;
+}
+
+.resolution-upscale-video-header .resolution-upscale-result-actions {
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+/* === Watermark Removal === */
+.watermark-removal-hint {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.watermark-removal-compare {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+}
+
+.watermark-removal-compare__panel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  overflow: hidden;
+}
+
+.watermark-removal-compare__panel img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.watermark-removal-compare__label {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 3px 10px;
+  border-radius: var(--radius-xs);
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 12px;
+}
+
+.watermark-removal-compare__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 14px;
+}
+
+.watermark-removal-compare__placeholder .anticon {
+  font-size: 32px;
+  opacity: 0.4;
+}
+
+.watermark-removal-compare__actions {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.watermark-removal-compare__actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  transition: background 0.15s;
+}
+
+.watermark-removal-compare__actions button:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.watermark-removal-compare__actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* === Generation Progress & Results === */
+.image-workbench-generating {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  color: var(--fg-muted);
+}
+
+.image-workbench-generating strong {
+  font-size: 15px;
+  color: var(--fg-default);
+}
+
+.image-workbench-progress-bar {
+  width: 200px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-inset);
+  overflow: hidden;
+}
+
+.image-workbench-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--accent);
+  transition: width 0.3s ease;
+}
+
+.image-workbench-cancel {
+  margin-top: 8px;
+  padding: 6px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.image-workbench-cancel:hover {
+  background: var(--bg-hover);
+  color: var(--fg-default);
+}
+
+.image-workbench-result-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow-y: auto;
+  align-content: start;
+}
+
+.image-workbench-result-item {
+  display: block;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.image-workbench-result-item:hover {
+  border-color: var(--accent);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.image-workbench-result-item img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  background: var(--bg-inset);
+}
+
+.image-workbench-result-card {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 8px;
+}
+
+.image-workbench-result-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.image-workbench-result-actions button {
+  display: inline-flex;
+  min-width: 0;
+  min-height: 34px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
+}
+
+.image-workbench-result-actions button:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.11);
+  color: var(--accent);
+}
+
+.image-workbench-result-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.image-workbench-inpaint-bottom-bar .image-workbench-result-actions {
+  flex: 1 1 260px;
+}
+
+.image-workbench-empty--error {
+  color: var(--fg-muted);
+}
+
+.image-workbench-empty--error strong {
+  color: var(--error, #ef4444);
+}
+
+.image-workbench-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
diff --git a/src/styles/pages/legacy-pages.css b/src/styles/pages/legacy-pages.css
new file mode 100644
index 0000000..c0ecb0b
--- /dev/null
+++ b/src/styles/pages/legacy-pages.css
@@ -0,0 +1,16956 @@
+/* Legacy page layer. Page-by-page extraction now happens beside this file. */
+.workspace-page-shell {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Latest generate page pixel menu/sidebar overrides */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-menu__panel {
+  top: calc(100% + 12px) !important;
+  width: 255px !important;
+  padding: 16px 12px 10px 14px !important;
+  border: 2px solid #71efac !important;
+  border-radius: 0 !important;
+  background: #f0fff4 !important;
+  background-size: auto !important;
+  box-shadow:
+    8px 8px 0 #111,
+    inset 0 0 36px rgba(56, 215, 118, 0.13) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-menu__panel button {
+  justify-content: flex-start !important;
+  min-height: 56px !important;
+  padding: 0 14px !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: #11251a !important;
+  box-shadow: none !important;
+  font-size: 16px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-menu__panel button .anticon {
+  color: #38d776 !important;
+  font-size: 18px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-menu__panel button:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-menu__panel button.is-active {
+  background: rgba(56, 215, 118, 0.16) !important;
+  color: #22ca68 !important;
+  transform: none !important;
+  box-shadow: 6px 6px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-trigger {
+  min-width: 178px !important;
+  height: 48px !important;
+  border: 4px solid #111 !important;
+  border-radius: 0 !important;
+  background: #21f29a !important;
+  color: #111 !important;
+  box-shadow: 5px 5px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-trigger:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-generation-trigger[aria-expanded="true"] {
+  background: #21f29a !important;
+  box-shadow: 3px 3px 0 #111 !important;
+  transform: translate(2px, 2px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 62px !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 48 !important;
+  width: 228px !important;
+  min-height: 0 !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  color: #f6fff8 !important;
+  box-shadow: -5px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+  box-shadow: -4px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__toolbar {
+  display: grid !important;
+  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
+  align-items: center !important;
+  gap: 10px !important;
+  padding: 14px 10px !important;
+  border-bottom: 3px solid #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr !important;
+  padding: 14px 5px !important;
+  border-bottom: 0 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new {
+  min-height: 40px !important;
+  border: 2px solid #39443f !important;
+  border-radius: 0 !important;
+  background: #17211e !important;
+  color: #f6fff8 !important;
+  box-shadow: none !important;
+  font-size: 14px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new {
+  background: #17211e !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new:hover {
+  border-color: #38d776 !important;
+  background: #10271f !important;
+  color: #38d776 !important;
+  transform: none !important;
+}
+
+/* Pixel workbench and canvas menu refinements */
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu,
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu button,
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu kbd {
+  color: #111 !important;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif !important;
+  font-weight: 1000 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu button:disabled {
+  color: #8aa196 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page {
+  background: #f5fff4;
+  background-size: auto;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-title {
+  color: #11251a;
+  font-weight: 1000;
+  text-shadow: 3px 3px 0 #d9f8dd;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-subtitle {
+  color: #557466;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__panel {
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  box-shadow: 7px 7px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  box-shadow: 5px 5px 0 #111;
+  transform: translate(2px, 2px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip__icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip.is-active .workbench-mode-chip__icon {
+  background: #38d776;
+  color: #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-textarea {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-textarea::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell {
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-footer {
+  border-top: 2px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-tool,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__resize,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option,
+.web-shell[data-ui-theme="pixel"] .workbench-resolution-grid button,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid input {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-tool:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option.is-active,
+.web-shell[data-ui-theme="pixel"] .workbench-resolution-grid button.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #11251a;
+  box-shadow: 2px 2px 0 #111;
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send {
+  background: #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send:disabled {
+  background: #dce8df;
+  color: #8aa196;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-preferences,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__scrim {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__section-label,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid label span,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid > span {
+  color: #557466;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option__icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #d9f8dd;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid input:focus {
+  outline: none;
+  border-color: #111;
+  box-shadow: 4px 4px 0 #111;
+}
+
+/* Final override: remove the green gap above the generate right sidebar */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 137px !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 80 !important;
+  width: 228px !important;
+  min-height: 0 !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 0 0 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  box-shadow: -5px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+}
+
+/* Final override: draggable sidebar and local reference image preview */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-shell {
+  display: grid !important;
+  grid-template-columns: 76px minmax(0, 1fr) !important;
+  column-gap: 14px !important;
+  align-items: start !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card {
+  grid-column: 1 !important;
+  grid-row: 1 !important;
+  display: grid !important;
+  place-items: center !important;
+  gap: 6px !important;
+  width: 72px !important;
+  height: 72px !important;
+  padding: 8px !important;
+  border: 2px solid #0b6f4e !important;
+  border-radius: 10px !important;
+  background: #10271f !important;
+  color: #21f29a !important;
+  box-shadow: inset 0 0 20px rgba(33, 242, 154, 0.1) !important;
+  cursor: pointer !important;
+  overflow: hidden !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card span {
+  font-size: 11px !important;
+  font-weight: 1000 !important;
+  line-height: 1 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card .anticon {
+  font-size: 20px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card.has-image {
+  padding: 0 !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  box-shadow: 4px 4px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+  display: block !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-textarea {
+  grid-column: 2 !important;
+  grid-row: 1 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-footer {
+  grid-column: 1 / -1 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-tool {
+  min-width: 128px !important;
+  gap: 8px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  width: var(--workbench-sidebar-width, 228px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: var(--workbench-sidebar-collapsed-width, 42px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__resize {
+  position: absolute !important;
+  left: -7px !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  z-index: 3 !important;
+  width: 10px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  cursor: ew-resize !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__resize::after {
+  content: "" !important;
+  position: absolute !important;
+  left: 3px !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 3px !important;
+  background: #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__resize:hover::after {
+  background: #21f29a !important;
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+    top: 137px !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 228px !important;
+    height: auto !important;
+    min-height: 0 !important;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+    width: 42px !important;
+    height: auto !important;
+  }
+}
+
+/* Final sidebar dock position: align with the pale yellow top action band */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 62px !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 228px !important;
+  min-height: 0 !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  box-shadow: -5px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+}
+
+/* Restore generate composer size and dock the conversation sidebar to the page edge */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-scroll {
+  width: min(100%, 860px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+  display: block !important;
+  width: 100% !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 70px !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 48 !important;
+  width: 220px !important;
+  min-height: 0 !important;
+  border-width: 0 0 0 2px !important;
+  border-style: solid !important;
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  background: rgba(13, 18, 17, 0.96) !important;
+  color: rgba(245, 255, 248, 0.86) !important;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.22) !important;
+  transform: translateX(0) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+  box-shadow: -5px 0 18px rgba(0, 0, 0, 0.2) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 32px minmax(0, 1fr) 32px !important;
+  gap: 8px !important;
+  padding: 10px 8px !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr !important;
+  padding: 10px 5px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  min-height: 30px !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: rgba(245, 255, 248, 0.86) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  background: rgba(255, 255, 255, 0.035) !important;
+  color: #f6fff8 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new:hover {
+  background: rgba(56, 215, 118, 0.16) !important;
+  color: #38d776 !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body {
+  padding: 46px 12px 14px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body > strong {
+  display: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty {
+  padding: 20px 10px !important;
+  color: rgba(245, 255, 248, 0.42) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list {
+  display: none !important;
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+    top: auto !important;
+    width: 100% !important;
+    height: 188px !important;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+    width: 100% !important;
+    height: 42px !important;
+  }
+}
+
+/* Final generate page mode menu and right conversation sidebar */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-scroll {
+  width: min(100%, 1120px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 278px;
+  align-items: stretch;
+  gap: 18px;
+  width: 100%;
+  transition: grid-template-columns 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr) 46px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar button {
+  border-radius: 0 !important;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger {
+  border: 3px solid #111 !important;
+  background: #38d776 !important;
+  color: #111 !important;
+  box-shadow: 4px 4px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger[aria-expanded="true"] {
+  background: #21f29a !important;
+  transform: translate(1px, 1px);
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel {
+  top: calc(100% + 10px) !important;
+  width: 205px !important;
+  padding: 8px !important;
+  border: 3px solid #111 !important;
+  background: #10271f !important;
+  background-size: auto !important;
+  box-shadow:
+    5px 5px 0 #111,
+    0 0 0 3px #38d776 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button {
+  justify-content: flex-start !important;
+  min-height: 46px !important;
+  border: 2px solid transparent !important;
+  background: transparent !important;
+  color: #f6fff8 !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button .anticon {
+  color: #38d776 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active {
+  border-color: #111 !important;
+  background: #d9f8dd !important;
+  color: #111 !important;
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover .anticon,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active .anticon {
+  color: #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+  min-height: 100%;
+  border: 3px solid #111;
+  background: #17201c;
+  background-size: auto;
+  color: #f6fff8;
+  box-shadow: 7px 7px 0 #111;
+  overflow: hidden;
+  transition:
+    width 180ms ease,
+    transform 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  box-shadow: 4px 4px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__toolbar {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 3px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr;
+  padding: 8px 5px;
+  border-bottom: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 0;
+  min-height: 34px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  background: #38d776;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new:hover {
+  background: #21f29a;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body {
+  display: grid;
+  gap: 12px;
+  padding: 14px 12px;
+  animation: workbenchSidebarRefresh 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body > strong {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 10px;
+  border-bottom: 3px solid #38d776;
+  color: #f6fff8;
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  padding: 36px 10px;
+  color: rgba(246, 255, 248, 0.62);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty .anticon {
+  color: rgba(56, 215, 118, 0.72);
+  font-size: 22px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list {
+  display: grid;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button {
+  justify-content: flex-start;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  text-align: left;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button:hover {
+  background: #d9f8dd;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+@keyframes workbenchSidebarRefresh {
+  from {
+    opacity: 0.4;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage,
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+    min-height: 180px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+    min-height: 46px;
+  }
+}
+
+/* Final generate page mode menu and right conversation sidebar */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-scroll {
+  width: min(100%, 1120px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 278px;
+  align-items: stretch;
+  gap: 18px;
+  width: 100%;
+  transition: grid-template-columns 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr) 46px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar button {
+  border-radius: 0 !important;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger {
+  border: 3px solid #111 !important;
+  background: #38d776 !important;
+  color: #111 !important;
+  box-shadow: 4px 4px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger[aria-expanded="true"] {
+  background: #21f29a !important;
+  transform: translate(1px, 1px);
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel {
+  top: calc(100% + 10px);
+  width: 205px;
+  padding: 8px;
+  border: 3px solid #111;
+  background: #10271f;
+  background-size: auto;
+  box-shadow:
+    5px 5px 0 #111,
+    0 0 0 3px #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button {
+  justify-content: flex-start;
+  min-height: 46px;
+  border: 2px solid transparent;
+  background: transparent;
+  color: #f6fff8;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button .anticon {
+  color: #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover .anticon,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active .anticon {
+  color: #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+  min-height: 100%;
+  border: 3px solid #111;
+  background: #17201c;
+  background-size: auto;
+  color: #f6fff8;
+  box-shadow: 7px 7px 0 #111;
+  overflow: hidden;
+  transition:
+    width 180ms ease,
+    transform 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  box-shadow: 4px 4px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__toolbar {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 3px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr;
+  padding: 8px 5px;
+  border-bottom: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 0;
+  min-height: 34px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  background: #38d776;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new:hover {
+  background: #21f29a;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body {
+  display: grid;
+  gap: 12px;
+  padding: 14px 12px;
+  animation: workbenchSidebarRefresh 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body > strong {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 10px;
+  border-bottom: 3px solid #38d776;
+  color: #f6fff8;
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  padding: 36px 10px;
+  color: rgba(246, 255, 248, 0.62);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty .anticon {
+  color: rgba(56, 215, 118, 0.72);
+  font-size: 22px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list {
+  display: grid;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button {
+  justify-content: flex-start;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  text-align: left;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button:hover {
+  background: #d9f8dd;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+@keyframes workbenchSidebarRefresh {
+  from {
+    opacity: 0.4;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage,
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+    min-height: 180px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+    min-height: 46px;
+  }
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-scroll {
+  width: min(100%, 1120px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 278px;
+  align-items: stretch;
+  gap: 18px;
+  width: 100%;
+  transition: grid-template-columns 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr) 46px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar button {
+  border-radius: 0 !important;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger {
+  border: 3px solid #111 !important;
+  background: #38d776 !important;
+  color: #111 !important;
+  box-shadow: 4px 4px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-trigger[aria-expanded="true"] {
+  background: #21f29a !important;
+  transform: translate(1px, 1px);
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel {
+  top: calc(100% + 10px);
+  width: 205px;
+  padding: 8px;
+  border: 3px solid #111;
+  background: #10271f;
+  background-size: auto;
+  box-shadow:
+    5px 5px 0 #111,
+    0 0 0 3px #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button {
+  justify-content: flex-start;
+  min-height: 46px;
+  border: 2px solid transparent;
+  background: transparent;
+  color: #f6fff8;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button .anticon {
+  color: #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button:hover .anticon,
+.web-shell[data-ui-theme="pixel"] .workbench-generation-menu__panel button.is-active .anticon {
+  color: #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+  min-height: 100%;
+  border: 3px solid #111;
+  background: #17201c;
+  background-size: auto;
+  color: #f6fff8;
+  box-shadow: 7px 7px 0 #111;
+  overflow: hidden;
+  transition:
+    width 180ms ease,
+    transform 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  box-shadow: 4px 4px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__toolbar {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 3px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr;
+  padding: 8px 5px;
+  border-bottom: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 0;
+  min-height: 34px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new {
+  background: #38d776;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__new:hover {
+  background: #21f29a;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body {
+  display: grid;
+  gap: 12px;
+  padding: 14px 12px;
+  animation: workbenchSidebarRefresh 180ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__body > strong {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 10px;
+  border-bottom: 3px solid #38d776;
+  color: #f6fff8;
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  padding: 36px 10px;
+  color: rgba(246, 255, 248, 0.62);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__empty .anticon {
+  color: rgba(56, 215, 118, 0.72);
+  font-size: 22px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list {
+  display: grid;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button {
+  justify-content: flex-start;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  text-align: left;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar__list button:hover {
+  background: #d9f8dd;
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+@keyframes workbenchSidebarRefresh {
+  from {
+    opacity: 0.4;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage,
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-conversation-sidebar {
+    min-height: 180px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+    min-height: 46px;
+  }
+}
+
+/* Final ecommerce composer toolbar parity with generate page */
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-shell {
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  background-size: auto !important;
+  box-shadow: 7px 7px 0 #111 !important;
+  backdrop-filter: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-footer {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 14px !important;
+  border-top: 2px solid #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-toolbar {
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-file-input {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send {
+  border: 2px solid #111 !important;
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 #111 !important;
+  color: #11251a !important;
+  font-weight: 1000 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 4px !important;
+  min-width: 40px !important;
+  height: 40px !important;
+  padding: 0 12px !important;
+  background: #fff !important;
+  font-size: 13px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool--ratio {
+  min-width: 190px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool__text {
+  font-size: 13px !important;
+  font-weight: 1000 !important;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:hover {
+  background: #d9f8dd !important;
+  color: #e60012 !important;
+  box-shadow: 2px 2px 0 #111 !important;
+  transform: translate(1px, 1px) !important;
+  filter: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send {
+  background: #38d776 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:disabled {
+  background: #dce8df !important;
+  color: #8aa196 !important;
+  box-shadow: 3px 3px 0 #111 !important;
+  transform: none !important;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="pixel"] .ecommerce-composer-footer {
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .ecommerce-composer-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool--ratio {
+    min-width: 0 !important;
+    flex: 1 1 auto;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .ecommerce-composer-send {
+    width: 100%;
+  }
+}
+
+/* Final ecommerce composer matches generate page pixel UI */
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-shell {
+  position: relative;
+  width: 100%;
+  padding: 12px 14px 14px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  box-shadow: 7px 7px 0 #111;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-textarea {
+  width: 100%;
+  min-height: 90px;
+  max-height: 180px;
+  padding: 4px 2px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: #11251a;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1.7;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-textarea::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 2px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-hint {
+  color: #557466;
+  font-size: 12px;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-file-input {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 40px;
+  height: 40px;
+  padding: 0 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  font-size: 13px;
+  font-weight: 1000;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool--ratio {
+  min-width: 190px;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool__text {
+  font-size: 13px;
+  font-weight: 1000;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool:hover {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #e60012;
+  box-shadow: 2px 2px 0 #111;
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+  font-size: 13px;
+  font-weight: 1000;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:hover {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #e60012;
+  box-shadow: 2px 2px 0 #111;
+  transform: translate(1px, 1px);
+  filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:disabled {
+  background: #dce8df;
+  color: #8aa196;
+  box-shadow: 3px 3px 0 #111;
+  transform: none;
+  filter: none;
+}
+
+/* Pixel ecommerce page */
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page {
+  --ecommerce-pixel-red: #e60012;
+  --ecommerce-pixel-cream: #fff8e7;
+  --ecommerce-pixel-green: #d9f8dd;
+  --ecommerce-pixel-ink: #111;
+  padding: 24px 28px 34px;
+  background: #f5fff4 !important;
+  background-size: auto;
+  color: #11251a;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-scroll,
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content {
+  position: relative;
+  width: min(100%, 1220px);
+  border: 3px solid var(--ecommerce-pixel-ink);
+  background: var(--ecommerce-pixel-cream);
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-scroll {
+  padding: 28px;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content {
+  margin: 28px auto 0;
+  padding: 24px 28px 34px;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-scroll::before,
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content::before,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-shell::before,
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card::before,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  z-index: 4;
+  width: 42px;
+  height: 10px;
+  border-right: 3px solid var(--ecommerce-pixel-ink);
+  border-bottom: 3px solid var(--ecommerce-pixel-ink);
+  background: var(--ecommerce-pixel-red);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel {
+  border: 3px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background: var(--ecommerce-pixel-cream);
+  box-shadow: 7px 7px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__slide {
+  border: 3px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background-image: var(--carousel-image);
+  background-position: center;
+  background-size: cover;
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58);
+  opacity: 1;
+  filter: saturate(1.1) contrast(1.05);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__slide::before {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__slide::after {
+  background: rgba(17, 17, 17, 0.68);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__slide span {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__slide strong {
+  color: #fff;
+  font-weight: 1000;
+  text-shadow:
+    3px 3px 0 var(--ecommerce-pixel-ink),
+    -1px 0 0 var(--ecommerce-pixel-ink),
+    0 -1px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow,
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__dots button,
+.web-shell[data-ui-theme="pixel"] .ecommerce-carousel-upload,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-chip,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-search,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card button,
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .studio-pill {
+  border: 2px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 var(--ecommerce-pixel-ink);
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-carousel-upload:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-tool:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-chip:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-chip.is-active,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card button:hover {
+  border-color: var(--ecommerce-pixel-ink);
+  background: var(--ecommerce-pixel-green);
+  color: var(--ecommerce-pixel-red);
+  box-shadow: 2px 2px 0 var(--ecommerce-pixel-ink);
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow--prev,
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow--next {
+  transform: translateY(-50%);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow--prev:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__arrow--next:hover {
+  transform: translateY(calc(-50% + 1px)) translateX(1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__dots button {
+  width: 12px;
+  height: 12px;
+  background: var(--ecommerce-pixel-cream);
+  transition: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-generate-carousel .community-carousel__dots button.is-active {
+  width: 28px;
+  background: var(--ecommerce-pixel-red);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-carousel-upload {
+  right: 18px;
+  background: var(--ecommerce-pixel-cream);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-carousel-upload:active {
+  box-shadow: 2px 2px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-shell {
+  position: relative;
+  border: 3px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--ecommerce-pixel-ink);
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-textarea {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-textarea::placeholder,
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-hint {
+  color: #557466;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-footer {
+  border-top: 2px solid var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send {
+  background: var(--ecommerce-pixel-red);
+  color: #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-composer-send:disabled {
+  background: #dce8df;
+  color: #8aa196;
+  box-shadow: 3px 3px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-divider {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .community-section__head h2 {
+  color: #11251a;
+  font-weight: 1000;
+  text-shadow: 3px 3px 0 var(--ecommerce-pixel-green);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card {
+  position: relative;
+  overflow: visible;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card > img,
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card__empty {
+  border: 3px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background: var(--ecommerce-pixel-cream);
+  box-shadow: 5px 5px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card:hover > img,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card:hover {
+  box-shadow: 3px 3px 0 var(--ecommerce-pixel-ink);
+  transform: translate(2px, 2px);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-community-content .project-card__caption,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card__caption {
+  border-top: 2px solid var(--ecommerce-pixel-ink);
+  background: rgba(17, 17, 17, 0.82);
+  color: #fff;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-bar,
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card {
+  position: relative;
+  border: 3px solid var(--ecommerce-pixel-ink);
+  border-radius: 0;
+  background: var(--ecommerce-pixel-cream);
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--ecommerce-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-search {
+  background: #fff;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-search input {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-filter-search input::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card {
+  transition: transform 140ms ease, box-shadow 140ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card > img {
+  filter: saturate(1.04) contrast(1.02);
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card__body span {
+  width: fit-content;
+  padding: 3px 8px;
+  border: 2px solid var(--ecommerce-pixel-ink);
+  background: var(--ecommerce-pixel-cream);
+  color: var(--ecommerce-pixel-red);
+  box-shadow: 3px 3px 0 var(--ecommerce-pixel-ink);
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-template-library .community-case-card strong {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="pixel"] .ecommerce-landing-page {
+    padding: 16px 14px 28px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .ecommerce-landing-scroll,
+  .web-shell[data-ui-theme="pixel"] .ecommerce-community-content {
+    padding: 18px;
+  }
+}
+
+/* Pixel assets and more pages */
+.web-shell[data-ui-theme="pixel"] .assets-page,
+.web-shell[data-ui-theme="pixel"] .more-page {
+  --utility-pixel-red: #e60012;
+  --utility-pixel-cream: #fff8e7;
+  --utility-pixel-green: #d9f8dd;
+  --utility-pixel-ink: #111;
+  background: #f5fff4;
+  background-size: auto;
+  color: #11251a;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page {
+  background: #f5fff4;
+  background-size: auto;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__head,
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__footer,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-toolstrip,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-panel,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-status-bar,
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool,
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card--desktop {
+  position: relative;
+  border: 3px solid var(--utility-pixel-ink);
+  border-radius: 0;
+  background: var(--utility-pixel-cream);
+  background-size: auto;
+  box-shadow: 6px 6px 0 var(--utility-pixel-ink);
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__head::before,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-toolstrip::before,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-panel::before,
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool::before,
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card--desktop::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  z-index: 2;
+  width: 42px;
+  height: 10px;
+  border-right: 3px solid var(--utility-pixel-ink);
+  border-bottom: 3px solid var(--utility-pixel-ink);
+  background: var(--utility-pixel-red);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__head {
+  margin: 18px 24px 0;
+  border-bottom: 3px solid var(--utility-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__body .asset-grid--desktop {
+  padding: 24px 30px;
+  gap: 20px;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__footer {
+  flex: 0 0 auto;
+  min-height: 42px;
+  margin: 0 24px 18px;
+  color: #11251a;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card--desktop {
+  padding: 10px;
+  color: #11251a;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card--desktop:hover,
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool:hover {
+  border-color: var(--utility-pixel-ink);
+  box-shadow: 3px 3px 0 var(--utility-pixel-ink);
+  transform: translate(3px, 3px);
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card__thumb {
+  border: 3px solid var(--utility-pixel-ink);
+  border-radius: 0;
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.56);
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card__head strong,
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool strong,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-panel__section-title {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card__desc,
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool span,
+.web-shell[data-ui-theme="pixel"] .more-page .canvas-meta__note {
+  color: #557466;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-tabs button,
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-search,
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-generate-btn,
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-status-bar__badge,
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-card__tags span,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tabs button,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-generate-btn,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-status-bar__badge {
+  border: 2px solid var(--utility-pixel-ink);
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 var(--utility-pixel-ink);
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-tabs button:hover,
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-tabs button.is-active,
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-generate-btn:hover,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tabs button:hover,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tabs button.is-active,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-generate-btn:hover {
+  background: var(--utility-pixel-green);
+  color: var(--utility-pixel-red);
+  box-shadow: 2px 2px 0 var(--utility-pixel-ink);
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-search {
+  min-height: 38px;
+  background: #fff;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-search input {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .asset-search input::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .studio-status-bar__badge--success,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-status-bar__badge--idle {
+  background: var(--utility-pixel-cream);
+  color: var(--utility-pixel-red);
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tool-layout {
+  background: #f5fff4;
+  background-size: auto;
+  gap: 18px;
+  padding: 18px 24px 20px;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .studio-canvas {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .more-grid {
+  gap: 18px;
+  padding: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool {
+  min-height: 160px;
+  padding: 18px;
+  overflow: visible;
+  color: #11251a;
+  text-align: left;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .more-tool .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border: 3px solid var(--utility-pixel-ink);
+  background: var(--utility-pixel-green);
+  color: var(--utility-pixel-red);
+  box-shadow: 3px 3px 0 var(--utility-pixel-ink);
+  font-size: 20px;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .studio-panel__section-body {
+  gap: 14px;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .studio-status-bar {
+  min-height: 42px;
+  color: #11251a;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__head,
+  .web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__footer,
+  .web-shell[data-ui-theme="pixel"] .more-page .studio-tool-layout {
+    margin-right: 14px;
+    margin-left: 14px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .more-page .studio-tool-layout {
+    padding: 14px;
+  }
+}
+
+/* Pixel community page */
+.web-shell[data-ui-theme="pixel"] .community-page {
+  --community-pixel-red: #e60012;
+  --community-pixel-cream: #fff8e7;
+  --community-pixel-green: #d9f8dd;
+  --community-pixel-ink: #111;
+  padding: 24px 28px 34px;
+  background: #f5fff4 !important;
+  background-size: auto;
+  color: #11251a;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .workspace-page-shell__content {
+  gap: 26px;
+  padding: 18px;
+  border: 3px solid var(--community-pixel-ink);
+  background: var(--community-pixel-cream);
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-bar,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card {
+  position: relative;
+  border: 3px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background: var(--community-pixel-cream);
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel::before,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-bar::before,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card::before,
+.web-shell[data-ui-theme="pixel"] .community-page .project-card::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  z-index: 4;
+  width: 42px;
+  height: 10px;
+  border-right: 3px solid var(--community-pixel-ink);
+  border-bottom: 3px solid var(--community-pixel-ink);
+  background: var(--community-pixel-red);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel {
+  min-height: 318px;
+  padding: 10px;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__track {
+  height: 100%;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide {
+  min-height: 292px;
+  border: 3px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background-image: var(--carousel-image);
+  background-position: center;
+  background-size: cover;
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.62);
+  opacity: 1;
+  filter: saturate(1.12) contrast(1.06);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide--video {
+  padding: 0;
+  background: #05080d;
+  background-image: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide.is-center {
+  box-shadow:
+    inset 0 0 0 2px rgba(255, 255, 255, 0.62),
+    5px 5px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide::before {
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide::after {
+  background: rgba(17, 17, 17, 0.7);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide--video::before,
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide--video::after {
+  content: none;
+  display: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide span {
+  display: none;
+  border: 2px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background: var(--community-pixel-cream);
+  color: var(--community-pixel-red);
+  box-shadow: 3px 3px 0 var(--community-pixel-ink);
+  font-weight: 1000;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide strong {
+  color: #fff;
+  font-weight: 1000;
+  text-shadow:
+    3px 3px 0 var(--community-pixel-ink),
+    -1px 0 0 var(--community-pixel-ink),
+    0 -1px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow,
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__dots button,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-chip,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-search,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card button,
+.web-shell[data-ui-theme="pixel"] .community-page .community-section--browse-more button {
+  border: 2px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 var(--community-pixel-ink);
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow {
+  opacity: 1;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow:hover,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-chip:hover,
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-chip.is-active,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card button:hover,
+.web-shell[data-ui-theme="pixel"] .community-page .community-section--browse-more button:hover {
+  border-color: var(--community-pixel-ink);
+  background: var(--community-pixel-green);
+  color: var(--community-pixel-red);
+  box-shadow: 2px 2px 0 var(--community-pixel-ink);
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow--prev,
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow--next {
+  transform: translateY(-50%);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow--prev:hover,
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__arrow--next:hover {
+  transform: translateY(calc(-50% + 1px)) translateX(1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__dots {
+  bottom: 18px;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__dots button {
+  width: 12px;
+  height: 12px;
+  background: var(--community-pixel-cream);
+  transition: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-carousel__dots button.is-active {
+  width: 28px;
+  background: var(--community-pixel-red);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-section__head h2 {
+  margin: 0;
+  color: #11251a;
+  font-weight: 1000;
+  text-shadow: 3px 3px 0 var(--community-pixel-green);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .studio-pill {
+  border: 2px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background: var(--community-pixel-cream);
+  color: var(--community-pixel-red);
+  box-shadow: 3px 3px 0 var(--community-pixel-ink);
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-bar {
+  padding: 14px;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-chip {
+  height: 34px;
+  padding: 0 13px;
+  font-size: 12px;
+  transition: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-search {
+  background: #fff;
+  transition: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-search:focus-within {
+  border-color: var(--community-pixel-ink);
+  background: var(--community-pixel-cream);
+  box-shadow: 4px 4px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-search input {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-filter-search input::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card {
+  position: relative;
+  overflow: visible;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card > img,
+.web-shell[data-ui-theme="pixel"] .community-page .project-card__empty {
+  border: 3px solid var(--community-pixel-ink);
+  border-radius: 0;
+  background: var(--community-pixel-cream);
+  box-shadow: 5px 5px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card:hover > img,
+.web-shell[data-ui-theme="pixel"] .community-page .project-card:hover .project-card__empty,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card:hover {
+  box-shadow: 3px 3px 0 var(--community-pixel-ink);
+  transform: translate(2px, 2px);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card__caption,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card__caption {
+  border-top: 2px solid var(--community-pixel-ink);
+  background: rgba(17, 17, 17, 0.82);
+  color: #fff;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card__meta strong,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card strong {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .project-card__meta span,
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card span {
+  color: #557466;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card {
+  transition: transform 140ms ease, box-shadow 140ms ease;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card > img {
+  filter: saturate(1.04) contrast(1.02);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card__body {
+  z-index: 3;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 180ms ease, transform 180ms ease;
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card:hover .community-case-card__body {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card__body span {
+  display: none;
+  width: fit-content;
+  padding: 3px 8px;
+  border: 2px solid var(--community-pixel-ink);
+  background: var(--community-pixel-cream);
+  color: var(--community-pixel-red);
+  box-shadow: 3px 3px 0 var(--community-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card__body strong {
+  display: none;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card button,
+.web-shell[data-ui-theme="pixel"] .community-page .community-section--browse-more button {
+  min-height: 34px;
+  padding: 0 12px;
+  cursor: pointer;
+  transition: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .community-page .community-case-card button {
+  position: absolute;
+  right: 18px;
+  bottom: 70px;
+  justify-self: end;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="pixel"] .community-page .community-carousel,
+  .web-shell[data-ui-theme="pixel"] .community-page .community-filter-bar,
+  .web-shell[data-ui-theme="pixel"] .community-page .community-case-card {
+    box-shadow: 5px 5px 0 var(--community-pixel-ink);
+  }
+
+  .web-shell[data-ui-theme="pixel"] .community-page .community-filter-bar {
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="pixel"] .community-page .community-carousel {
+    padding: 8px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .community-page .community-carousel__slide strong {
+    font-size: 22px;
+  }
+
+  .web-shell[data-ui-theme="pixel"] .community-page .community-filter-chip {
+    height: 32px;
+    padding: 0 10px;
+  }
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .workspace-page-shell__content,
+.web-shell[data-ui-theme="pixel"] .more-page .workspace-page-shell__content {
+  height: 100%;
+  padding: 24px 28px 34px;
+  overflow: auto;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page,
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tool-layout {
+  border: 3px solid var(--utility-pixel-ink);
+  background: var(--utility-pixel-cream);
+  background-size: auto;
+  box-shadow: 7px 7px 0 var(--utility-pixel-ink);
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page {
+  height: auto;
+  min-height: 100%;
+  overflow: visible;
+}
+
+.web-shell[data-ui-theme="pixel"] .more-page .studio-tool-layout {
+  min-height: 100%;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__head {
+  margin: 18px 18px 0;
+}
+
+.web-shell[data-ui-theme="pixel"] .assets-page .assets-centered-page__footer {
+  margin: 0 18px 18px;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="pixel"] .community-page,
+  .web-shell[data-ui-theme="pixel"] .assets-page .workspace-page-shell__content,
+  .web-shell[data-ui-theme="pixel"] .more-page .workspace-page-shell__content {
+    padding: 16px 14px 28px;
+  }
+}
+
+/* Subtle page-local NES accents */
+.web-shell[data-ui-theme="pixel"] .profile-page,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page,
+.web-shell[data-ui-theme="pixel"] .studio-canvas {
+  --pixel-red: #e60012;
+  --pixel-cream: #fff8e7;
+}
+
+.web-shell[data-ui-theme="pixel"] .profile-page__sidebar::before,
+.web-shell[data-ui-theme="pixel"] .profile-page__empty-state::before,
+.web-shell[data-ui-theme="pixel"] .profile-page__card::before,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell::before,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-text-node__card::before,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-image-node__card::before,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-video-node__preview::before,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-context-menu::before,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-add-node-menu::before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 42px;
+  height: 10px;
+  background: var(--pixel-red);
+  border-right: 3px solid #111;
+  border-bottom: 3px solid #111;
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .profile-page__sidebar,
+.web-shell[data-ui-theme="pixel"] .profile-page__empty-state,
+.web-shell[data-ui-theme="pixel"] .profile-page__card,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-text-node__card,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-image-node__card,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-video-node__preview,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-context-menu,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-add-node-menu {
+  position: relative;
+}
+
+.web-shell[data-ui-theme="pixel"] .profile-page__main-tabs button.is-active,
+.web-shell[data-ui-theme="pixel"] .profile-page__list-tabs button.is-active,
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip.is-active,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-add-node-menu button:hover,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-context-menu button:hover:not(:disabled),
+.web-shell[data-ui-theme="pixel"] .studio-canvas-node-context-menu button:hover:not(:disabled) {
+  color: var(--pixel-red);
+}
+
+.web-shell[data-ui-theme="pixel"] .profile-page__main-tabs button.is-active::after {
+  background: var(--pixel-red);
+}
+
+.web-shell[data-ui-theme="pixel"] .profile-page__primary,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-text-composer__send,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-video-composer__footer button,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-save-asset__create {
+  background: var(--pixel-red) !important;
+  color: #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option.is-active,
+.web-shell[data-ui-theme="pixel"] .workbench-resolution-grid button.is-active,
+.web-shell[data-ui-theme="pixel"] .studio-canvas-text-composer__model-menu button.is-selected {
+  background: var(--pixel-cream) !important;
+  color: var(--pixel-red) !important;
+}
+
+.home-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: #0d0e10;
+  color: #fff;
+}
+
+.home-page__scroll {
+  display: grid;
+  align-content: start;
+  gap: 58px;
+  min-height: 100%;
+  padding: 96px 24px 80px;
+}
+
+.home-carousel {
+  position: relative;
+  width: 100%;
+  min-height: 390px;
+  overflow: hidden;
+}
+
+.home-carousel__track {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.92fr) minmax(420px, 1.08fr) minmax(280px, 0.92fr);
+  align-items: center;
+  gap: 0;
+  width: min(100%, 1850px);
+  margin: 0 auto;
+}
+
+.home-carousel__card {
+  position: relative;
+  height: 332px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #171819;
+  box-shadow: none;
+}
+
+.home-carousel__card:first-child {
+  border-radius: 22px 0 0 22px;
+}
+
+.home-carousel__card:last-child {
+  border-radius: 0 22px 22px 0;
+}
+
+.home-carousel__card.is-active {
+  z-index: 2;
+  height: 360px;
+  border-color: rgba(255, 255, 255, 0.28);
+  border-radius: 22px;
+  transform: scale(1.04);
+}
+
+.home-carousel__card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.home-carousel__card:not(.is-active) img {
+  filter: saturate(0.92) brightness(0.78);
+}
+
+.home-carousel__shade {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.72);
+}
+
+.home-carousel__copy {
+  position: absolute;
+  left: 28px;
+  bottom: 26px;
+  display: grid;
+  gap: 4px;
+  text-transform: uppercase;
+}
+
+.home-carousel__copy span {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.home-carousel__copy strong {
+  color: #fff;
+  font-size: clamp(24px, 2.2vw, 38px);
+  font-weight: 1000;
+  line-height: 0.95;
+}
+
+.home-carousel__nav {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border: 0;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.home-carousel__nav:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.home-carousel__nav--left {
+  left: 16px;
+}
+
+.home-carousel__nav--right {
+  right: 16px;
+}
+
+.home-carousel__dots {
+  position: absolute;
+  left: 50%;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transform: translateX(-50%);
+}
+
+.home-carousel__dots button {
+  width: 18px;
+  height: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.28);
+  cursor: pointer;
+}
+
+.home-carousel__dots button.is-active {
+  width: 38px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.home-entry {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(160px, 240px));
+  justify-content: center;
+  gap: 18px;
+}
+
+.home-entry__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 76px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+  font: inherit;
+  font-size: 20px;
+  font-weight: 950;
+  cursor: pointer;
+}
+
+.home-entry__button:hover {
+  border-color: rgba(255, 255, 255, 0.34);
+  background: rgba(255, 255, 255, 0.13);
+}
+
+.home-entry__button--primary {
+  background: rgba(var(--accent-rgb), 0.86);
+  color: #071017;
+}
+
+.pixel-home {
+  --pixel-red: #e60023;
+  --pixel-yellow: #ffcc00;
+  --pixel-blue: #2196f3;
+  --pixel-green: #4caf50;
+  --pixel-purple: #9c27b0;
+  --pixel-orange: #ff5722;
+  width: 100%;
+  min-height: 100%;
+  overflow: auto;
+  background: #fffdf5;
+  color: #050505;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.pixel-home button {
+  font: inherit;
+}
+
+.pixel-home-hero {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 220px;
+  gap: 18px;
+  padding: 22px 22px 34px;
+  border-bottom: 2px solid #000;
+  background: #121212;
+}
+
+.pixel-home-hero__media {
+  position: relative;
+  min-height: 360px;
+  overflow: hidden;
+  border: 2px solid #000;
+  background: #222;
+  box-shadow: 6px 6px 0 #000;
+}
+
+.pixel-home-hero__media img,
+.pixel-home-hero__preview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pixel-home-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.72);
+}
+
+.pixel-home-hero__copy {
+  position: absolute;
+  right: 52px;
+  bottom: 44px;
+  display: grid;
+  justify-items: end;
+  width: min(720px, calc(100% - 130px));
+  color: #fff;
+  text-align: right;
+}
+
+.pixel-home-hero__copy span,
+.pixel-home-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  min-height: 34px;
+  padding: 0 14px;
+  border: 2px solid #000;
+  background: var(--pixel-yellow);
+  color: #000;
+  font-size: 12px;
+  font-weight: 1000;
+  letter-spacing: 0.08em;
+  box-shadow: 2px 2px 0 #000;
+}
+
+.pixel-home-hero__copy h1 {
+  margin: 18px 0 10px;
+  font-size: clamp(34px, 6vw, 76px);
+  font-weight: 1000;
+  line-height: 0.95;
+  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.82);
+}
+
+.pixel-home-hero__copy p {
+  max-width: 660px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: clamp(14px, 2vw, 21px);
+  font-weight: 900;
+  line-height: 1.5;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.64);
+}
+
+.pixel-home-hero__nav {
+  position: absolute;
+  top: 50%;
+  display: inline-grid;
+  place-items: center;
+  width: 54px;
+  height: 54px;
+  border: 2px solid #000;
+  border-radius: 0;
+  background: rgba(255, 255, 255, 0.92);
+  color: #000;
+  box-shadow: 4px 4px 0 #000;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.pixel-home-hero__nav:hover {
+  box-shadow: 2px 2px 0 #000;
+  transform: translate(2px, calc(-50% + 2px));
+}
+
+.pixel-home-hero__nav--left {
+  left: 22px;
+  z-index: 32;
+}
+
+.pixel-home-hero__nav--right {
+  right: 22px;
+}
+
+.pixel-home-hero__preview {
+  position: relative;
+  min-height: 360px;
+  overflow: hidden;
+  border: 2px solid #000;
+  background: #fff;
+  box-shadow: 6px 6px 0 #000;
+}
+
+.pixel-home-hero__preview span {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding: 4px 8px;
+  border: 2px solid #000;
+  background: #fff;
+  color: #000;
+  font-size: 12px;
+  font-weight: 1000;
+}
+
+.pixel-home-hero__dots {
+  position: absolute;
+  left: 50%;
+  bottom: 13px;
+  display: flex;
+  gap: 8px;
+  transform: translateX(-50%);
+}
+
+.pixel-home-hero__dots button {
+  width: 16px;
+  height: 8px;
+  border: 2px solid #000;
+  background: #fff;
+  cursor: pointer;
+}
+
+.pixel-home-hero__dots button.is-active {
+  width: 34px;
+  background: var(--pixel-red);
+}
+
+.pixel-home-intro,
+.pixel-home-features,
+.pixel-home-bottom {
+  position: relative;
+  padding: 72px 24px;
+}
+
+.pixel-home-intro {
+  display: grid;
+  justify-items: center;
+  overflow: hidden;
+  min-height: 300px;
+  align-content: center;
+  border-bottom: 2px solid #000;
+  text-align: center;
+}
+
+.pixel-home-intro::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  background-image: none;
+  pointer-events: none;
+}
+
+.pixel-home-intro__logo {
+  position: relative;
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+  margin-bottom: 18px;
+  image-rendering: auto;
+}
+
+.pixel-home-entry-actions {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(160px, 240px));
+  justify-content: center;
+  gap: 28px;
+  width: min(100%, 900px);
+}
+
+.pixel-home-entry-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  height: 118px;
+  border: 4px solid #000;
+  border-radius: 0;
+  background: #fff;
+  color: #000;
+  box-shadow: 8px 8px 0 #000;
+  font-size: 24px;
+  font-weight: 1000;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.pixel-home-entry-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 42px;
+  height: 8px;
+  background: var(--pixel-yellow);
+}
+
+.pixel-home-entry-button .anticon {
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  font-size: 28px;
+}
+
+.pixel-home-entry-button:hover {
+  box-shadow: 5px 5px 0 #000;
+  transform: translate(2px, 2px);
+}
+
+.pixel-home-entry-button:active {
+  box-shadow: none;
+  transform: translate(6px, 6px);
+}
+
+.pixel-home-entry-button--primary {
+  background: var(--pixel-red);
+  color: #fff;
+}
+
+.pixel-home-entry-button--primary::before {
+  background: #fff;
+}
+
+.pixel-home-entry-button:nth-child(3)::before {
+  background: var(--pixel-green);
+}
+
+.pixel-home-intro h2,
+.pixel-home-section-head h2,
+.pixel-home-bottom h2 {
+  position: relative;
+  margin: 20px 0 14px;
+  color: #000;
+  font-size: clamp(36px, 6vw, 76px);
+  font-weight: 1000;
+  line-height: 1.02;
+}
+
+.pixel-home-intro h2 span,
+.pixel-home-section-head h2 span {
+  color: var(--pixel-red);
+}
+
+.pixel-home-intro p,
+.pixel-home-section-head p,
+.pixel-home-bottom p {
+  position: relative;
+  max-width: 680px;
+  margin: 0 auto;
+  color: #4f4f4f;
+  font-size: clamp(15px, 2vw, 20px);
+  font-weight: 900;
+  line-height: 1.6;
+}
+
+.pixel-home-actions {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 34px;
+}
+
+.pixel-home-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 174px;
+  height: 56px;
+  padding: 0 24px;
+  border: 2px solid #000;
+  border-radius: 0;
+  background: #fff;
+  color: #000;
+  box-shadow: 6px 6px 0 #000;
+  font-size: 18px;
+  font-weight: 1000;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.pixel-home-action:hover {
+  box-shadow: 4px 4px 0 #000;
+  transform: translate(2px, 2px);
+}
+
+.pixel-home-action:active {
+  box-shadow: none;
+  transform: translate(6px, 6px);
+}
+
+.pixel-home-action--primary {
+  background: var(--pixel-red);
+  color: #fff;
+}
+
+.pixel-home-stats {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: clamp(28px, 6vw, 80px);
+  margin-top: 44px;
+}
+
+.pixel-home-stats div {
+  display: grid;
+  gap: 4px;
+}
+
+.pixel-home-stats strong {
+  color: var(--pixel-red);
+  font-size: clamp(26px, 4vw, 42px);
+  font-weight: 1000;
+}
+
+.pixel-home-stats span {
+  color: #555;
+  font-size: 13px;
+  font-weight: 1000;
+}
+
+.pixel-home-features {
+  background: #fffdf5;
+}
+
+.pixel-home-section-head {
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  margin-bottom: 42px;
+}
+
+.pixel-home-badge--dark {
+  background: var(--pixel-red);
+  color: #fff;
+}
+
+.pixel-home-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
+  max-width: 1160px;
+  margin: 0 auto;
+}
+
+.pixel-home-feature {
+  position: relative;
+  min-height: 230px;
+  padding: 28px;
+  border: 2px solid #000;
+  background: #fff;
+  box-shadow: 4px 4px 0 #000;
+  transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.pixel-home-feature:hover {
+  box-shadow: 6px 6px 0 #000;
+  transform: translateY(-4px);
+}
+
+.pixel-home-feature::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 36px;
+  height: 6px;
+  background: var(--feature-color, var(--pixel-red));
+}
+
+.pixel-home-feature__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  margin-bottom: 20px;
+  border: 2px solid #000;
+  background: var(--feature-color, var(--pixel-red));
+  color: #fff;
+  font-size: 28px;
+  box-shadow: 2px 2px 0 #000;
+}
+
+.pixel-home-feature h3 {
+  margin: 0 0 12px;
+  color: #000;
+  font-size: 20px;
+  font-weight: 1000;
+}
+
+.pixel-home-feature p {
+  margin: 0;
+  color: #555;
+  font-family: "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.7;
+}
+
+.pixel-home-feature--red {
+  --feature-color: var(--pixel-red);
+}
+
+.pixel-home-feature--yellow {
+  --feature-color: var(--pixel-yellow);
+}
+
+.pixel-home-feature--green {
+  --feature-color: var(--pixel-green);
+}
+
+.pixel-home-feature--blue {
+  --feature-color: var(--pixel-blue);
+}
+
+.pixel-home-feature--purple {
+  --feature-color: var(--pixel-purple);
+}
+
+.pixel-home-feature--orange {
+  --feature-color: var(--pixel-orange);
+}
+
+.pixel-home-bottom {
+  display: grid;
+  justify-items: center;
+  border-top: 2px solid #000;
+  background: var(--pixel-red);
+  text-align: center;
+}
+
+.pixel-home-bottom h2,
+.pixel-home-bottom p {
+  color: #fff;
+}
+
+.pixel-home-bottom .pixel-home-action {
+  margin-top: 26px;
+}
+
+@media (max-width: 1050px) {
+  .pixel-home-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .pixel-home-hero__preview {
+    display: none;
+  }
+
+  .pixel-home-feature-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 680px) {
+  .pixel-home-hero {
+    padding: 14px 14px 32px;
+  }
+
+  .pixel-home-hero__media {
+    min-height: 300px;
+  }
+
+  .pixel-home-hero__nav {
+    width: 44px;
+    height: 44px;
+  }
+
+  .pixel-home-hero__nav--left {
+    position: absolute;
+    left: 14px;
+  }
+
+  .pixel-home-hero__copy {
+    right: 18px;
+    bottom: 32px;
+    justify-items: end;
+    width: calc(100% - 36px);
+    text-align: right;
+  }
+
+  .pixel-home-intro,
+  .pixel-home-features,
+  .pixel-home-bottom {
+    padding: 52px 16px;
+  }
+
+  .pixel-home-actions,
+  .pixel-home-stats,
+  .pixel-home-entry-actions {
+    width: 100%;
+  }
+
+  .pixel-home-action,
+  .pixel-home-entry-button {
+    width: 100%;
+  }
+
+  .pixel-home-entry-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .pixel-home-feature-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .home-page__scroll {
+    gap: 32px;
+    padding: 44px 14px 100px;
+  }
+
+  .home-carousel {
+    min-height: 290px;
+  }
+
+  .home-carousel__track {
+    grid-template-columns: 1fr;
+  }
+
+  .home-carousel__card:not(.is-active) {
+    display: none;
+  }
+
+  .home-carousel__card.is-active {
+    height: 270px;
+    transform: none;
+  }
+
+  .home-entry {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workspace-page-shell--full {
+  padding: 0;
+}
+
+.workspace-page-shell__content {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.studio-tool-layout {
+  display: grid;
+  grid-template-columns: 282px minmax(0, 1fr) 320px;
+  grid-template-rows: 52px minmax(0, 1fr) 34px;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-shell);
+}
+
+.studio-tool-layout--no-left {
+  grid-template-columns: minmax(0, 1fr) 320px;
+}
+
+.studio-tool-layout--no-right {
+  grid-template-columns: 282px minmax(0, 1fr);
+}
+
+.studio-tool-layout--no-left.studio-tool-layout--no-right {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.studio-tool-layout--no-top {
+  grid-template-rows: minmax(0, 1fr) 34px;
+  grid-template-areas:
+    "left canvas right"
+    "status status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-left {
+  grid-template-areas:
+    "canvas right"
+    "status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-right {
+  grid-template-areas:
+    "left canvas"
+    "status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-left.studio-tool-layout--no-right {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) 34px;
+  grid-template-areas:
+    "canvas"
+    "status";
+}
+
+.studio-toolstrip {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 14px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border-weak);
+  background: rgba(255, 255, 255, 0.74);
+  backdrop-filter: none;
+}
+
+.web-shell[data-theme="dark"] .studio-toolstrip {
+  background: rgba(16, 20, 25, 0.92);
+}
+
+.studio-toolstrip__left,
+.studio-toolstrip__actions {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+}
+
+.studio-toolstrip__breadcrumb {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.studio-toolstrip__divider {
+  width: 1px;
+  height: 18px;
+  background: var(--border-weak);
+}
+
+.studio-tabs,
+.studio-segmented {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.studio-tabs::-webkit-scrollbar,
+.studio-segmented::-webkit-scrollbar {
+  display: none;
+}
+
+.studio-tabs button,
+.studio-segmented__btn,
+.studio-toolstrip__toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  gap: 6px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.studio-tabs .is-active,
+.studio-segmented__btn.is-active {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--fg-body);
+}
+
+.studio-panel {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border-right: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.studio-panel--right {
+  border-right: 0;
+  border-left: 1px solid var(--border-weak);
+}
+
+.studio-panel__section {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.studio-panel__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 10px;
+}
+
+.studio-panel__section-title {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-panel__section-chip,
+.studio-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.studio-panel__section-chip--ready,
+.studio-status-bar__badge--success {
+  background: rgba(34, 197, 94, 0.16);
+  color: #63e6a4;
+}
+
+.studio-panel__section-chip--waiting,
+.studio-status-bar__badge--idle {
+  background: rgba(245, 158, 11, 0.14);
+  color: #f6c453;
+}
+
+.studio-panel__section-body {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.studio-canvas {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--page-bg);
+}
+
+.web-shell[data-theme="dark"] .studio-canvas {
+  background: var(--page-bg);
+}
+
+.studio-status-bar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+  padding: 0 14px;
+  border-top: 1px solid var(--border-weak);
+  background: rgba(255, 255, 255, 0.74);
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.web-shell[data-theme="dark"] .studio-status-bar {
+  background: rgba(12, 15, 18, 0.95);
+}
+
+.studio-status-bar__badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.studio-status-bar__badge--running {
+  background: rgba(69, 211, 255, 0.14);
+  color: var(--accent-cyan);
+}
+
+.studio-status-bar__badge--danger {
+  background: rgba(239, 68, 68, 0.16);
+  color: #fca5a5;
+}
+
+.studio-status-bar__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-status-bar__meta {
+  margin-left: auto;
+  color: var(--fg-dim);
+  white-space: nowrap;
+}
+
+.studio-kicker {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.studio-generate-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: #061014;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.studio-toggle-row__copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.studio-toggle-row__title {
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.studio-toggle-row__desc {
+  color: var(--fg-soft);
+  font-size: 11px;
+}
+
+.studio-toggle {
+  position: relative;
+  flex: 0 0 38px;
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  cursor: pointer;
+}
+
+.studio-toggle__thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--fg-body);
+  transition: transform 160ms ease;
+}
+
+.studio-toggle.is-on {
+  background: rgba(var(--accent-rgb), 0.34);
+}
+
+.studio-toggle.is-on .studio-toggle__thumb {
+  transform: translateX(16px);
+}
+
+.ai-workbench-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-shell);
+}
+
+.ai-workbench-content-scroll {
+  display: grid;
+  align-content: start;
+  gap: 22px;
+  width: min(100%, 1080px);
+  min-width: 0;
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 18px 24px 34px;
+  overflow: auto;
+}
+
+.ai-workbench-landing {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ai-workbench-brand-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.ai-workbench-brand-row__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 78px;
+  height: 26px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #08080b;
+  font-size: 15px;
+  font-weight: 950;
+  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.4);
+}
+
+.ai-workbench-hero {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  max-width: 760px;
+  text-align: center;
+}
+
+.ai-workbench-hero__title {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: clamp(30px, 3vw, 42px);
+  line-height: 1.05;
+}
+
+.ai-workbench-hero__copy {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.ai-workbench-composer-section {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  width: min(100%, 690px);
+  min-width: 0;
+}
+
+.ai-workbench-composer-shell {
+  width: 100%;
+  border: 1px solid rgba(var(--accent-rgb), 0.45);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.web-shell[data-theme="dark"] .ai-workbench-composer-shell {
+  background: rgba(8, 8, 10, 0.84);
+  box-shadow: none;
+}
+
+.ai-workbench-composer-shell__inner {
+  display: grid;
+  gap: 10px;
+  padding: 14px 14px 12px;
+}
+
+.ai-workbench-composer-shell__textarea,
+.ai-workbench-composer-shell__input textarea {
+  width: 100%;
+  min-height: 82px;
+  max-height: 150px;
+  padding: 2px 4px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 14px;
+  line-height: 1.65;
+  box-shadow: none;
+}
+
+.ai-workbench-composer-shell__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ai-workbench-composer-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ai-workbench-tool-button,
+.ai-workbench-mode-switch__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 11px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.ai-workbench-tool-button {
+  width: 32px;
+  padding: 0;
+}
+
+.ai-workbench-mode-switch__button:hover,
+.ai-workbench-tool-button:hover,
+.ai-workbench-prompt-row button:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  color: var(--fg-body);
+}
+
+.ai-workbench-composer-shell__send,
+.agent-input button {
+  display: grid;
+  place-items: center;
+  flex: 0 0 38px;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  background: rgba(var(--accent-rgb), 0.72);
+  color: #08080b;
+  cursor: pointer;
+}
+
+.ai-workbench-composer-shell__send:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.ai-workbench-prompt-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.ai-workbench-prompt-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.ai-workbench-prompt-row button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.4);
+  background: rgba(var(--accent-rgb), 0.22);
+  color: var(--fg-body);
+  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.28);
+}
+
+.ai-workbench-status {
+  min-height: 20px;
+  margin: 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+  text-align: center;
+}
+
+.ai-workbench-dashboard {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: 28px;
+  min-width: 0;
+}
+
+.ai-workbench-panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ai-workbench-section-head,
+.community-section__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 14px;
+}
+
+.ai-workbench-section-head h2,
+.community-section__head h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 20px;
+  line-height: 1.2;
+}
+
+.ai-workbench-section-head h2::before,
+.community-section__head h2::before {
+  content: "✦";
+  margin-right: 8px;
+  color: var(--accent);
+}
+
+.ai-workbench-section-head button,
+.community-section--browse-more button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ai-workbench-project-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.ai-workbench-project-card {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.055);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease;
+}
+
+.ai-workbench-project-card:hover,
+.ai-workbench-highlight-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--accent-rgb), 0.34);
+}
+
+.ai-workbench-project-card img,
+.ai-workbench-project-card__empty {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.08);
+  object-fit: cover;
+}
+
+.ai-workbench-project-card__empty {
+  display: grid;
+  place-items: center;
+  color: var(--fg-body);
+  font-size: 22px;
+}
+
+.ai-workbench-project-card strong,
+.ai-workbench-highlight-card strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai-workbench-project-card span,
+.ai-workbench-highlight-card span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.ai-workbench-highlight-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.ai-workbench-highlight-card {
+  position: relative;
+  display: grid;
+  grid-column: span 2;
+  min-width: 0;
+  min-height: 128px;
+  overflow: hidden;
+  align-content: end;
+  gap: 4px;
+  padding: 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ai-workbench-highlight-card.is-large {
+  grid-column: span 3;
+  min-height: 184px;
+}
+
+.ai-workbench-highlight-card img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-workbench-highlight-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.76);
+}
+
+.ai-workbench-highlight-card span,
+.ai-workbench-highlight-card strong {
+  position: relative;
+  z-index: 1;
+}
+
+.ai-workbench-thread-shell {
+  min-width: 0;
+  max-width: 760px;
+  padding: 2px 0 0;
+}
+
+.ai-chat-message-list {
+  display: grid;
+  gap: 12px;
+}
+
+.ai-chat-message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.ai-chat-message-row.is-user {
+  flex-direction: row-reverse;
+}
+
+.ai-chat-avatar {
+  display: grid;
+  place-items: center;
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.ai-chat-avatar--user {
+  background: var(--accent);
+  color: #08080b;
+}
+
+.ai-chat-message-stack {
+  display: grid;
+  max-width: min(680px, 78%);
+  min-width: 0;
+  gap: 6px;
+}
+
+.ai-chat-message-row.is-user .ai-chat-message-stack {
+  justify-items: end;
+}
+
+.ai-chat-message-author {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.ai-chat-message-bubble {
+  padding: 10px 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.055);
+  color: var(--fg-body);
+  line-height: 1.65;
+}
+
+.ai-chat-message-bubble--user {
+  border-color: rgba(var(--accent-rgb), 0.26);
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.community-page {
+  overflow: auto;
+  padding: 16px 24px 34px;
+  background: var(--bg-shell);
+}
+
+.community-page .workspace-page-shell__content {
+  display: grid;
+  gap: 22px;
+  max-width: 1220px;
+  margin: 0 auto;
+}
+
+.community-hero {
+  min-width: 0;
+}
+
+.community-hero {
+  min-width: 0;
+}
+
+.community-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: var(--radius-md);
+  min-height: 310px;
+  border: 0;
+  background: transparent;
+}
+
+.community-carousel__track {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 0;
+  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.community-carousel__track.is-resetting {
+  transition: none;
+}
+
+.community-carousel__slide {
+  position: relative;
+  flex: 0 0 calc(100% / 3);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 286px;
+  padding: 28px 32px;
+  border: 0 solid transparent;
+  border-radius: 22px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
+    var(--carousel-image);
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0.62;
+  transform: scale(0.92);
+  transition:
+    opacity 520ms cubic-bezier(0.32, 0.72, 0, 1),
+    transform 520ms cubic-bezier(0.32, 0.72, 0, 1),
+    box-shadow 520ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.community-carousel__slide.is-center {
+  z-index: 2;
+  opacity: 1;
+  transform: scale(1.04);
+  box-shadow: none;
+}
+
+.community-carousel__slide::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.community-carousel__slide::before {
+  content: "";
+  position: absolute;
+  inset: -18px;
+  background-image: var(--carousel-image);
+  background-position: center;
+  background-size: cover;
+  filter: blur(18px) saturate(1.08);
+  transform: scale(1.04);
+}
+
+.community-carousel__full-image {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+
+.community-carousel__slide span,
+.community-carousel__slide strong {
+  position: relative;
+  z-index: 2;
+}
+
+.community-carousel__slide span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: none;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.community-carousel__slide strong {
+  margin-top: 10px;
+  color: white;
+  font-size: 32px;
+  line-height: 1.15;
+}
+
+.community-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.32);
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  backdrop-filter: none;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 220ms ease, background 160ms ease;
+}
+
+.community-carousel:hover .community-carousel__arrow {
+  opacity: 1;
+}
+
+.community-carousel__arrow:hover {
+  background: rgba(0, 0, 0, 0.52);
+}
+
+.community-carousel__arrow--prev {
+  left: 14px;
+}
+
+.community-carousel__arrow--next {
+  right: 14px;
+}
+
+.community-carousel__dots {
+  position: absolute;
+  bottom: 14px;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  gap: 8px;
+  transform: translateX(-50%);
+}
+
+.community-carousel__dots button {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.35);
+  cursor: pointer;
+  transition: width 220ms ease, background 160ms ease;
+}
+
+.community-carousel__dots button.is-active {
+  width: 24px;
+  background: white;
+}
+
+.community-section__head p,
+.canvas-meta p,
+.canvas-meta__note {
+  margin: 0;
+  color: var(--fg-muted);
+  line-height: 1.65;
+}
+
+.community-section {
+  display: grid;
+  gap: 14px;
+}
+
+/* Community filter bar */
+.community-filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+}
+
+.community-filter-categories {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.community-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.community-filter-chip:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  color: var(--fg-body);
+}
+
+.community-filter-chip.is-active {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--fg-body);
+}
+
+.community-filter-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 220px;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  transition: border-color 160ms ease;
+}
+
+.community-filter-search:focus-within {
+  border-color: rgba(var(--accent-rgb), 0.45);
+}
+
+.community-filter-search .anticon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.community-filter-search input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 13px;
+}
+
+.community-filter-search input::placeholder {
+  color: var(--fg-dim);
+}
+
+.project-row,
+.community-case-grid,
+.asset-grid--desktop,
+.more-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.community-case-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.community-case-grid--ratio-reference {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.more-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.project-card--button,
+.community-case-card,
+.asset-card--desktop,
+.more-tool {
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.project-card img,
+.project-card__empty {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  object-fit: cover;
+}
+
+.project-card__empty {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+}
+
+.project-card__empty .anticon {
+  font-size: 30px;
+  line-height: 1;
+}
+
+.project-card__meta {
+  display: grid;
+  gap: 3px;
+  padding: 9px 2px 0;
+}
+
+.project-card__meta strong,
+.community-case-card strong,
+.more-tool strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-card__meta span,
+.community-case-card span,
+.more-tool span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.community-page .project-card {
+  display: grid;
+  position: relative;
+  overflow: hidden;
+}
+
+.community-page .project-card > img,
+.community-page .project-card__caption {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.community-page .project-card__caption {
+  align-self: end;
+  z-index: 2;
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 180ms ease, transform 180ms ease;
+  pointer-events: none;
+}
+
+.community-page .project-card:hover .project-card__caption {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.community-page .project-card__meta {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.ecommerce-community-content .project-card {
+  display: grid;
+  position: relative;
+  overflow: hidden;
+}
+
+.ecommerce-community-content .project-card > img,
+.ecommerce-community-content .project-card__caption {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.ecommerce-community-content .project-card__caption {
+  align-self: end;
+  z-index: 2;
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 180ms ease, transform 180ms ease;
+  pointer-events: none;
+}
+
+.ecommerce-community-content .project-card:hover .project-card__caption {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ecommerce-community-content .project-card__meta {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.community-case-card {
+  display: grid;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+}
+
+.community-case-card--ratio-reference {
+  aspect-ratio: 3 / 4;
+}
+
+.community-case-card--ratio-reference > img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.08);
+  transform-origin: center;
+}
+
+.ecommerce-template-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.ecommerce-template-card {
+  aspect-ratio: 4 / 5;
+}
+
+.ecommerce-template-card > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.community-case-card > img,
+.community-case-card__caption {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.community-case-card__caption {
+  align-self: end;
+  z-index: 2;
+  padding: 10px 18px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 180ms ease, transform 180ms ease;
+  pointer-events: none;
+  margin: 0;
+}
+
+.community-case-card:hover .community-case-card__caption {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.community-case-card__body {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  display: grid;
+  gap: 7px;
+  padding: 18px;
+}
+
+.community-case-card button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: fit-content;
+  min-height: 32px;
+  padding: 0 11px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.community-section--browse-more {
+  justify-items: center;
+  padding-bottom: 10px;
+}
+
+.canvas-page,
+.assets-page,
+.digital-human-page,
+.character-mix-page,
+.more-page,
+.agent-page {
+  height: 100%;
+}
+
+.canvas-meta {
+  display: grid;
+  gap: 6px;
+}
+
+.canvas-meta strong {
+  color: var(--fg-body);
+  font-size: 14px;
+}
+
+.canvas-detail-list {
+  display: grid;
+  gap: 8px;
+}
+
+.canvas-detail-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.canvas-detail-list span,
+.canvas-node-list__item span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.canvas-detail-list strong,
+.canvas-node-list__item strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-node-list {
+  display: grid;
+  gap: 8px;
+}
+
+.canvas-node-list__item {
+  display: grid;
+  gap: 4px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.workflow-json-preview {
+  max-height: 420px;
+  margin: 0;
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.react-flow__node {
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  color: var(--fg-body);
+}
+
+.react-flow,
+.react-flow__renderer,
+.react-flow__pane,
+.react-flow__viewport {
+  background: var(--page-bg);
+  --xy-edge-label-background-color: var(--page-bg);
+  --xy-edge-label-background-color-default: var(--page-bg);
+}
+
+.studio-canvas .react-flow,
+.studio-canvas .react-flow__renderer,
+.studio-canvas .react-flow__pane,
+.studio-canvas .react-flow__viewport {
+  background: transparent !important;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output {
+  background: var(--page-bg);
+  color: var(--fg-body);
+}
+
+.react-flow__edge-textbg {
+  fill: #fffdf5 !important;
+  stroke: #111 !important;
+  stroke-width: 2px;
+  paint-order: stroke fill;
+}
+
+.react-flow__edge-text {
+  fill: #11251a;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 12px;
+  font-weight: 1000;
+}
+
+.studio-canvas__background {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.studio-canvas-hidden-input {
+  display: none;
+}
+
+.studio-canvas-node-links {
+  position: absolute;
+  inset: 0;
+  z-index: 11;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.studio-canvas-node-links path {
+  fill: none;
+  stroke: rgba(90, 177, 255, 0.88);
+  stroke-width: 3;
+  stroke-linecap: round;
+  filter: drop-shadow(0 0 5px rgba(90, 177, 255, 0.55));
+}
+
+.studio-canvas-node-links circle {
+  fill: #1e1e1e;
+  stroke: rgba(255, 255, 255, 0.66);
+  stroke-width: 2;
+}
+
+.studio-canvas-node-link-preview path {
+  stroke: #38d776;
+  stroke-dasharray: 8 8;
+  filter: drop-shadow(0 0 7px rgba(56, 215, 118, 0.52));
+}
+
+.studio-canvas-node-link-preview circle {
+  fill: #38d776;
+  stroke: #111;
+}
+
+.studio-canvas-text-node {
+  position: absolute;
+  left: 50%;
+  bottom: 40px;
+  z-index: 12;
+  width: min(92vw, 960px);
+  transform: translate(calc(-50% + var(--text-node-x, 0px)), var(--text-node-y, 0px));
+  pointer-events: none;
+}
+
+.studio-canvas-text-node__scaled {
+  position: relative;
+  width: 960px;
+  height: 665px;
+  transform: scale(0.2);
+  transform-origin: bottom center;
+  pointer-events: auto;
+}
+
+.studio-canvas-text-node__title {
+  position: absolute;
+  left: 31%;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.studio-canvas-text-node__card {
+  position: absolute;
+  left: 29%;
+  top: 34px;
+  width: 406px;
+  height: 404px;
+  border: 2px solid rgba(255, 255, 255, 0.56);
+  border-radius: 14px;
+  background: rgba(36, 36, 36, 0.98);
+  color: rgba(255, 255, 255, 0.92);
+  pointer-events: auto;
+  cursor: grab;
+  user-select: none;
+}
+
+.studio-canvas-text-node.is-dragging .studio-canvas-text-node__card {
+  cursor: grabbing;
+}
+
+.studio-canvas-text-node.is-dragging .studio-canvas-text-composer {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.studio-canvas-text-node__glyph {
+  display: grid;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 58px;
+}
+
+.studio-canvas-text-node__glyph span {
+  display: block;
+  width: 64px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.studio-canvas-text-node__glyph span:nth-child(4) {
+  width: 38px;
+}
+
+.studio-canvas-text-node__suggestions {
+  display: grid;
+  gap: 18px;
+  margin-top: 42px;
+  padding: 0 30px;
+}
+
+.studio-canvas-text-node__suggestions > span {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.studio-canvas-text-node__suggestions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  width: max-content;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 17px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-text-node__inline-input,
+.studio-canvas-text-node__content {
+  position: absolute;
+  inset: 26px 28px 26px;
+  width: auto;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.94);
+  font: inherit;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1.45;
+  text-align: left;
+}
+
+.studio-canvas-text-node__inline-input {
+  resize: none;
+}
+
+.studio-canvas-text-node__inline-input::placeholder {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.studio-canvas-text-node__content {
+  display: block;
+  overflow: hidden;
+  cursor: text;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.studio-canvas-text-node__connector {
+  position: absolute;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 176px;
+  height: 176px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font: inherit;
+  font-size: 19px;
+  font-weight: 900;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.studio-canvas-text-node__connector span,
+.studio-canvas-image-node__connector span,
+.studio-canvas-video-node__connector span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  border: 2px solid rgba(255, 255, 255, 0.55);
+  border-radius: 50%;
+  background: rgba(40, 40, 40, 0.96);
+  transform: translate(var(--connector-follow-x, 0), var(--connector-follow-y, 0));
+  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.studio-canvas-node-connector--left {
+  left: -106px;
+}
+
+.studio-canvas-node-connector--right {
+  right: -106px;
+}
+
+.studio-canvas-node-connector--center {
+  top: 50%;
+}
+
+.studio-canvas-text-node__connector.is-linking,
+.studio-canvas-image-node__connector.is-linking,
+.studio-canvas-video-node__connector.is-linking {
+  color: #071017;
+}
+
+.studio-canvas-text-node__connector.is-linking span,
+.studio-canvas-image-node__connector.is-linking span,
+.studio-canvas-video-node__connector.is-linking span {
+  border-color: rgba(90, 177, 255, 0.95);
+  background: rgba(90, 177, 255, 0.92);
+  color: #071017;
+  box-shadow: 0 0 18px rgba(90, 177, 255, 0.72);
+}
+
+.studio-canvas-text-composer {
+  position: absolute;
+  left: 0;
+  top: 460px;
+  width: 960px;
+  height: 214px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(37, 37, 37, 0.98);
+  color: #fff;
+  box-shadow: none;
+  pointer-events: auto;
+  transition: opacity 0.12s ease;
+}
+
+.studio-canvas-text-composer textarea {
+  width: 100%;
+  height: 132px;
+  resize: none;
+  padding: 26px 20px 10px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1.55;
+}
+
+.studio-canvas-text-composer textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.studio-canvas-text-composer__footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 76px;
+  padding: 0 13px 14px 18px;
+}
+
+.studio-canvas-text-composer__footer button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.88);
+  font: inherit;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.studio-canvas-text-composer__footer span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.56);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.studio-canvas-text-composer__model {
+  gap: 9px;
+  height: 48px;
+  padding: 0 13px 0 10px;
+  border-radius: 10px !important;
+  background: rgba(255, 255, 255, 0.09) !important;
+  font-size: 18px !important;
+  font-weight: 900;
+}
+
+.studio-canvas-text-composer__model-wrap {
+  position: relative;
+  margin-right: auto;
+}
+
+.studio-canvas-text-composer__model-mark,
+.studio-canvas-text-composer__model-menu-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 1000;
+}
+
+.studio-canvas-text-composer__model-menu {
+  position: absolute;
+  left: -8px;
+  bottom: 58px;
+  z-index: 30;
+  width: 552px;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  background: rgba(36, 36, 36, 0.98);
+  box-shadow: none;
+}
+
+.studio-canvas-text-composer__model-menu button {
+  display: grid;
+  grid-template-columns: 42px 1fr auto;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  min-height: 80px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  color: rgba(255, 255, 255, 0.95);
+  text-align: left;
+}
+
+.studio-canvas-text-composer__model-menu button.is-selected,
+.studio-canvas-text-composer__model-menu button:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.studio-canvas-text-composer__model-menu-copy {
+  display: grid;
+  gap: 4px;
+}
+
+.studio-canvas-text-composer__model-menu-copy strong {
+  font-size: 20px;
+  line-height: 1.1;
+}
+
+.studio-canvas-text-composer__model-menu-copy small {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.studio-canvas-text-composer__model-menu em {
+  padding: 3px 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.09);
+  color: rgba(255, 255, 255, 0.55);
+  font-style: normal;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.studio-canvas-text-composer__translate:disabled {
+  cursor: default;
+  opacity: 0.35;
+}
+
+.studio-canvas-text-composer__cost {
+  min-width: 54px;
+}
+
+.studio-canvas-text-composer__send {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.74) !important;
+  color: #171717 !important;
+}
+
+.studio-canvas-image-node {
+  position: absolute;
+  left: 50%;
+  bottom: 40px;
+  z-index: 13;
+  width: min(92vw, 960px);
+  transform: translate(calc(-50% + var(--image-node-x, 0px)), var(--image-node-y, 0px));
+  pointer-events: none;
+}
+
+.studio-canvas-image-node__scaled {
+  position: relative;
+  width: 960px;
+  height: 760px;
+  transform: scale(0.1);
+  transform-origin: bottom center;
+  pointer-events: auto;
+}
+
+.studio-canvas-image-node__title {
+  position: absolute;
+  left: 245px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.studio-canvas-image-node__upload {
+  position: absolute;
+  top: -62px;
+  left: 50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  transform: translateX(-50%);
+  background: rgba(38, 38, 38, 0.96);
+  color: rgba(255, 255, 255, 0.92);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: none;
+}
+
+.studio-canvas-image-node__card {
+  position: absolute;
+  left: 235px;
+  top: 42px;
+  width: 490px;
+  height: 276px;
+  overflow: hidden;
+  border: 2px solid rgba(255, 255, 255, 0.56);
+  border-radius: 14px;
+  background: rgba(36, 36, 36, 0.98);
+  color: rgba(255, 255, 255, 0.92);
+  pointer-events: auto;
+  cursor: grab;
+  user-select: none;
+}
+
+.studio-canvas-image-node__placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  align-items: center;
+  justify-items: center;
+  padding: 34px 26px 42px;
+  color: rgba(255, 255, 255, 0.42);
+}
+
+.studio-canvas-image-node__placeholder-icon {
+  color: rgba(255, 255, 255, 0.22);
+  font-size: 58px;
+}
+
+.studio-canvas-image-node__placeholder-actions {
+  justify-self: stretch;
+  display: grid;
+  gap: 12px;
+  justify-items: start;
+}
+
+.studio-canvas-image-node__placeholder-actions span {
+  width: 100%;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.studio-canvas-image-node__placeholder-actions button {
+  justify-self: start;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.88);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-image-node__placeholder-actions button:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+
+.studio-canvas-image-node.is-dragging .studio-canvas-image-node__card {
+  cursor: grabbing;
+}
+
+.studio-canvas-image-node.is-dragging .studio-canvas-image-composer {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.studio-canvas-image-node__card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.studio-canvas-image-node__connector {
+  position: absolute;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 176px;
+  height: 176px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font: inherit;
+  font-size: 19px;
+  font-weight: 900;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.studio-canvas-image-composer {
+  position: absolute;
+  left: 0;
+  top: 330px;
+  width: 960px;
+  height: 318px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(35, 35, 35, 0.98);
+  color: #fff;
+  box-shadow: none;
+  pointer-events: auto;
+  transition: opacity 0.12s ease;
+}
+
+.studio-canvas-image-composer__tools {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 18px 0;
+}
+
+.studio-canvas-image-composer__tools button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 72px;
+  height: 72px;
+  padding: 0 18px;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  color: rgba(255, 255, 255, 0.55);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.studio-canvas-image-composer__tools .anticon {
+  font-size: 22px;
+}
+
+.studio-canvas-image-composer__expand {
+  min-width: 44px !important;
+  width: 44px;
+  height: 44px !important;
+  margin-left: auto;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: rgba(255, 255, 255, 0.46) !important;
+  font-size: 26px !important;
+}
+
+.studio-canvas-image-composer textarea {
+  width: 100%;
+  height: 142px;
+  resize: none;
+  padding: 26px 18px 10px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1.55;
+}
+
+.studio-canvas-image-composer textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.studio-canvas-image-composer__footer {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  height: 70px;
+  padding: 0 13px 12px 18px;
+}
+
+.studio-canvas-video-node {
+  position: absolute;
+  left: 50%;
+  bottom: 40px;
+  z-index: 14;
+  width: min(94vw, 980px);
+  transform: translate(calc(-50% + var(--video-node-x, 0px)), var(--video-node-y, 0px));
+  pointer-events: none;
+}
+
+.studio-canvas-video-node__scaled {
+  position: relative;
+  width: 980px;
+  height: 790px;
+  transform: scale(0.24);
+  transform-origin: bottom center;
+  pointer-events: auto;
+}
+
+.studio-canvas-video-node__title {
+  position: absolute;
+  left: 160px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.56);
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.studio-canvas-video-node__preview {
+  position: absolute;
+  left: 160px;
+  top: 46px;
+  display: grid;
+  place-items: center;
+  width: 640px;
+  height: 360px;
+  border: 2px solid rgba(255, 255, 255, 0.48);
+  border-radius: 12px;
+  background: #242424;
+  color: rgba(255, 255, 255, 0.28);
+  cursor: grab;
+}
+
+.studio-canvas-video-node.is-dragging .studio-canvas-video-node__preview {
+  cursor: grabbing;
+}
+
+.studio-canvas-video-node__play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 58px;
+}
+
+.studio-canvas-video-node__connector {
+  position: absolute;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 176px;
+  height: 176px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.studio-canvas-video-node__connector.studio-canvas-node-connector--left {
+  left: -108px;
+}
+
+.studio-canvas-video-node__connector.studio-canvas-node-connector--right {
+  right: -108px;
+}
+
+.studio-canvas-video-composer {
+  position: absolute;
+  left: 0;
+  top: 420px;
+  width: 960px;
+  height: 360px;
+  padding: 16px;
+  border-radius: 16px 16px 0 0;
+  background: #252525;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: none;
+}
+
+.studio-canvas-video-composer__tabs,
+.studio-canvas-video-composer__tools,
+.studio-canvas-video-composer__footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.studio-canvas-video-composer__tabs button,
+.studio-canvas-video-composer__tools button {
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 12px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.38);
+  font: inherit;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-video-composer__tabs button.is-active,
+.studio-canvas-video-composer__tools button.is-active {
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.studio-canvas-video-composer__tabs button:disabled {
+  cursor: not-allowed;
+}
+
+.studio-canvas-video-composer__tools {
+  margin-top: 12px;
+}
+
+.studio-canvas-video-composer__tools button {
+  min-width: 72px;
+  min-height: 72px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.studio-canvas-video-composer textarea {
+  width: 100%;
+  height: 128px;
+  margin-top: 18px;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font: inherit;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.5;
+}
+
+.studio-canvas-video-composer textarea::placeholder {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.studio-canvas-video-composer__footer {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  left: 18px;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 19px;
+  font-weight: 850;
+}
+
+.studio-canvas-video-composer__footer button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 12px;
+  background: #f7f7f7;
+  color: #121212;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.canvas-select-chip {
+  position: relative;
+  min-width: 0;
+}
+
+.studio-canvas-composer-chip {
+  flex: 1 1 150px;
+  min-width: 108px;
+}
+
+.studio-canvas-composer-chip--compact {
+  flex: 0 1 92px;
+  min-width: 72px;
+}
+
+.studio-canvas-composer-chip--mini {
+  flex: 0 1 66px;
+  min-width: 56px;
+}
+
+.canvas-select-chip__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  min-height: 42px;
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.88);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.canvas-select-chip__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-select-chip__arrow {
+  flex: 0 0 auto;
+  font-size: 11px;
+  transition: transform 0.16s ease;
+}
+
+.canvas-select-chip.is-open .canvas-select-chip__arrow {
+  transform: rotate(180deg);
+}
+
+.canvas-select-chip__dropdown {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 9px);
+  z-index: 120;
+  display: grid;
+  width: max(100%, 190px);
+  max-height: 250px;
+  overflow-y: auto;
+  gap: 4px;
+  padding: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 12px;
+  background: rgba(30, 30, 30, 0.98);
+  box-shadow: none;
+  animation: canvas-select-dropdown-in 160ms cubic-bezier(0.2, 0.82, 0.2, 1);
+}
+
+.canvas-select-chip--model .canvas-select-chip__dropdown {
+  width: max(100%, 248px);
+}
+
+.canvas-select-chip__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  margin: 0;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.72);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+  opacity: 0;
+  animation: canvas-select-option-in 140ms ease forwards;
+}
+
+.canvas-select-chip__option:hover,
+.canvas-select-chip__option.is-active {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.canvas-select-chip__option-dot {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  background: #38d776;
+  opacity: 0;
+}
+
+.canvas-select-chip__option.is-active .canvas-select-chip__option-dot {
+  opacity: 1;
+}
+
+@keyframes canvas-select-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes canvas-select-option-in {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.studio-canvas-text-node,
+.studio-canvas-image-node {
+  width: 960px;
+}
+
+.studio-canvas-text-node__scaled {
+  width: 960px;
+  height: 665px;
+  transform: scale(0.4);
+}
+
+.studio-canvas-image-node__scaled {
+  width: 960px;
+  height: 760px;
+  transform: scale(0.4);
+}
+
+.studio-canvas-video-node {
+  width: 980px;
+}
+
+.studio-canvas-video-node__scaled {
+  transform: scale(0.48);
+}
+
+.react-flow__controls button {
+  border-color: var(--border-subtle);
+  background: rgba(18, 22, 27, 0.92);
+  color: var(--fg-body);
+}
+
+.studio-canvas-context-menu {
+  position: fixed;
+  z-index: 90;
+  display: grid;
+  gap: 0;
+  width: 200px;
+  min-height: 360px;
+  padding: 18px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  background: rgba(34, 34, 34, 0.98);
+  color: #f5f5f5;
+  box-shadow: none;
+  transform: scale(1);
+  transform-origin: top left;
+}
+
+.studio-canvas-context-menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 44px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font-size: 15px;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-canvas-context-menu button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.studio-canvas-context-menu button:disabled {
+  color: rgba(255, 255, 255, 0.25);
+  cursor: not-allowed;
+}
+
+.studio-canvas-context-menu kbd {
+  color: rgba(255, 255, 255, 0.35);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.studio-canvas-context-menu__divider {
+  height: 1px;
+  margin: 9px 0;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.studio-canvas-node-context-menu {
+  position: fixed;
+  z-index: 94;
+  display: grid;
+  width: 330px;
+  padding: 18px 20px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  background: rgba(34, 34, 34, 0.98);
+  color: #f5f5f5;
+  box-shadow: none;
+  transform: scale(0.25);
+  transform-origin: top left;
+}
+
+.studio-canvas-node-context-menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font-size: 20px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-canvas-node-context-menu button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.studio-canvas-node-context-menu button:disabled {
+  color: rgba(255, 255, 255, 0.24);
+  cursor: not-allowed;
+}
+
+.studio-canvas-node-context-menu kbd {
+  color: rgba(255, 255, 255, 0.4);
+  font-family: inherit;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.studio-canvas-node-context-menu__divider {
+  height: 1px;
+  margin: 7px 0;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.studio-canvas-node-context-menu__hint {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  margin-left: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.38);
+  border-radius: 50%;
+  color: rgba(255, 255, 255, 0.52);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.studio-canvas-node-context-menu .studio-canvas-node-context-menu__primary {
+  min-height: 62px;
+  margin-top: 5px;
+  background: rgba(255, 255, 255, 0.09);
+}
+
+.studio-canvas-save-asset {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.74);
+  backdrop-filter: none;
+}
+
+.studio-canvas-save-asset__modal {
+  position: relative;
+  width: 960px;
+  height: 796px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  background: rgba(20, 20, 20, 0.96);
+  color: #f4f4f4;
+  box-shadow: none;
+  overflow: visible;
+  transform: scale(0.5);
+}
+
+.studio-canvas-save-asset__head {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  height: 74px;
+  padding: 0 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.studio-canvas-save-asset__head button {
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.42);
+  font: inherit;
+  font-size: 20px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__head button.is-active {
+  color: #f7f7f7;
+}
+
+.studio-canvas-save-asset__close {
+  margin-left: auto;
+  color: rgba(255, 255, 255, 0.68) !important;
+  font-size: 28px !important;
+}
+
+.studio-canvas-save-asset__body {
+  display: grid;
+  grid-template-columns: 450px minmax(0, 1fr);
+  gap: 24px;
+  padding: 24px;
+}
+
+.studio-canvas-save-asset__label,
+.studio-canvas-save-asset__form label > span {
+  display: block;
+  margin-bottom: 14px;
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.studio-canvas-save-asset__form b {
+  color: #ff7875;
+}
+
+.studio-canvas-save-asset__placeholder {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 564px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.studio-canvas-save-asset__placeholder img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+.studio-canvas-save-asset__placeholder.has-cover > span {
+  display: none;
+}
+
+.studio-canvas-save-asset__placeholder button {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__file-input {
+  display: none;
+}
+
+.studio-canvas-save-asset__cover-menu {
+  position: absolute;
+  left: 326px;
+  bottom: -84px;
+  z-index: 2;
+  display: grid;
+  width: 150px;
+  padding: 8px 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  background: rgba(38, 38, 38, 0.98);
+  box-shadow: none;
+}
+
+.studio-canvas-save-asset__cover-menu button {
+  position: static;
+  justify-content: flex-start;
+  min-height: 48px;
+  width: 100%;
+  padding: 0 18px;
+  border-radius: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 17px;
+}
+
+.studio-canvas-save-asset__cover-menu button:hover {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.studio-canvas-save-asset__cover-library {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 58px;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  max-height: 220px;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(30, 30, 30, 0.98);
+  box-shadow: none;
+}
+
+.studio-canvas-save-asset__cover-library button {
+  position: static;
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  min-height: 0;
+  padding: 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 12px;
+}
+
+.studio-canvas-save-asset__cover-library button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.studio-canvas-save-asset__cover-library img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.studio-canvas-save-asset__form {
+  display: grid;
+  align-content: start;
+  gap: 28px;
+  padding-top: 26px;
+}
+
+.studio-canvas-save-asset__form label {
+  position: relative;
+}
+
+.studio-canvas-save-asset__form input,
+.studio-canvas-save-asset__select {
+  width: 100%;
+  height: 60px;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.16);
+  color: #f7f7f7;
+  font: inherit;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.studio-canvas-save-asset__form input {
+  padding: 0 18px;
+}
+
+.studio-canvas-save-asset__select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__select.is-open svg {
+  transform: rotate(180deg);
+}
+
+.studio-canvas-save-asset__select-menu {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 3;
+  display: grid;
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px 0;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 14px;
+  background: rgba(30, 30, 30, 0.98);
+  box-shadow: none;
+}
+
+.studio-canvas-save-asset__select-menu button {
+  min-height: 61px;
+  padding: 0 14px;
+  border: 0;
+  background: transparent;
+  color: #f3f3f3;
+  font: inherit;
+  font-size: 20px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__select-menu button:hover,
+.studio-canvas-save-asset__select-menu button.is-selected {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.studio-canvas-save-asset__create {
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  min-width: 74px;
+  height: 48px;
+  border: 0;
+  border-radius: 12px;
+  background: #22c8f5;
+  color: #fff;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__create:disabled {
+  background: rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.34);
+  cursor: not-allowed;
+}
+
+.studio-canvas-save-asset__empty {
+  position: absolute;
+  inset: 74px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.42);
+  font-size: 20px;
+  font-weight: 900;
+  pointer-events: none;
+}
+
+.studio-canvas-save-asset__existing {
+  padding: 34px 24px;
+}
+
+.studio-canvas-save-asset__existing-title {
+  margin-bottom: 18px;
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.studio-canvas-save-asset__existing-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.studio-canvas-save-asset__existing-grid button {
+  display: grid;
+  gap: 12px;
+  min-height: 108px;
+  padding: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+  font: inherit;
+  font-size: 21px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-canvas-save-asset__existing-grid button:hover,
+.studio-canvas-save-asset__existing-grid button.is-selected {
+  border-color: rgba(34, 200, 245, 0.65);
+  background: rgba(34, 200, 245, 0.14);
+}
+
+.studio-canvas-save-asset__existing-grid span {
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.studio-canvas-add-node-menu {
+  position: fixed;
+  z-index: 92;
+  display: grid;
+  align-content: start;
+  width: min(360px, calc(100vw - 28px));
+  max-height: min(620px, calc(100vh - 28px));
+  overflow: auto;
+  padding: 24px 22px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 22px;
+  background: rgba(35, 35, 35, 0.98);
+  color: #f5f5f5;
+  box-shadow: none;
+}
+
+.studio-canvas-add-node-menu__head {
+  display: grid;
+  gap: 7px;
+  margin-bottom: 18px;
+}
+
+.studio-canvas-add-node-menu__head strong {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 1000;
+}
+
+.studio-canvas-add-node-menu__head small {
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.4;
+}
+
+.studio-canvas-add-node-menu__title {
+  margin-bottom: 12px;
+  color: rgba(255, 255, 255, 0.58);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.studio-canvas-add-node-menu__title--section {
+  margin-top: 14px;
+}
+
+.studio-canvas-add-node-menu button {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  min-height: 74px;
+  padding: 8px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  font-size: 18px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-canvas-add-node-menu button:hover {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.studio-canvas-add-node-menu button:disabled {
+  opacity: 0.52;
+  cursor: not-allowed;
+}
+
+.studio-canvas-add-node-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 54px;
+  height: 54px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  font-size: 25px;
+}
+
+.studio-canvas-add-node-menu button > span:not(.studio-canvas-add-node-menu__icon):not(.studio-canvas-add-node-menu__badge) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-canvas-add-node-menu__badge {
+  justify-self: start;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+/* Pixel canvas theme */
+.studio-canvas {
+  background: #f5fff4;
+  background-position: 0 0;
+  background-size: auto;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output {
+  border: 2px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  color: #11251a !important;
+  box-shadow: 4px 4px 0 #111 !important;
+  font-weight: 1000;
+}
+
+.studio-canvas-node-links path {
+  stroke: #52645a;
+  stroke-width: 3;
+  stroke-dasharray: 10 10;
+  filter: none;
+}
+
+.studio-canvas-node-link-preview path {
+  stroke: #38d776;
+  stroke-dasharray: 7 7;
+}
+
+.studio-canvas-node-links circle {
+  fill: #111;
+  stroke: #fffdf5;
+}
+
+.studio-canvas-node-link-preview circle {
+  fill: #38d776;
+  stroke: #111;
+}
+
+.studio-canvas-text-node__title,
+.studio-canvas-image-node__title,
+.studio-canvas-video-node__title {
+  color: #11251a;
+  text-shadow: 2px 2px 0 #fffdf5;
+}
+
+.studio-canvas-text-node__card,
+.studio-canvas-image-node__card,
+.studio-canvas-video-node__preview,
+.studio-canvas-text-composer,
+.studio-canvas-image-composer,
+.studio-canvas-video-composer,
+.studio-canvas-text-composer__model-menu,
+.studio-canvas-context-menu,
+.studio-canvas-node-context-menu,
+.studio-canvas-add-node-menu,
+.studio-canvas-save-asset__modal,
+.studio-canvas-save-asset__cover-menu,
+.studio-canvas-save-asset__cover-library,
+.studio-canvas-save-asset__select-menu {
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  color: #11251a;
+  box-shadow: 7px 7px 0 #111;
+}
+
+.studio-canvas-text-node__card,
+.studio-canvas-image-node__card,
+.studio-canvas-video-node__preview {
+  cursor: grab;
+}
+
+.studio-canvas-text-node__inline-input,
+.studio-canvas-text-node__content,
+.studio-canvas-text-composer textarea,
+.studio-canvas-image-composer textarea,
+.studio-canvas-video-composer textarea {
+  color: #11251a;
+}
+
+.studio-canvas-text-node__inline-input::placeholder,
+.studio-canvas-text-composer textarea::placeholder,
+.studio-canvas-image-composer textarea::placeholder,
+.studio-canvas-video-composer textarea::placeholder {
+  color: #557466;
+}
+
+.studio-canvas-text-node__glyph span {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #d9f8dd;
+}
+
+.studio-canvas-text-node__suggestions > span,
+.studio-canvas-image-node__placeholder,
+.studio-canvas-image-node__placeholder-actions span,
+.studio-canvas-video-node__play,
+.studio-canvas-text-composer__footer span,
+.studio-canvas-save-asset__label,
+.studio-canvas-save-asset__form label > span,
+.studio-canvas-save-asset__existing-title,
+.studio-canvas-add-node-menu__title {
+  color: #557466;
+}
+
+.studio-canvas-text-node__suggestions button,
+.studio-canvas-image-node__placeholder-actions button,
+.studio-canvas-text-composer__footer button,
+.studio-canvas-context-menu button,
+.studio-canvas-node-context-menu button,
+.studio-canvas-add-node-menu button,
+.studio-canvas-save-asset__head button,
+.studio-canvas-save-asset__cover-menu button,
+.studio-canvas-save-asset__cover-library button,
+.studio-canvas-save-asset__select-menu button,
+.studio-canvas-save-asset__existing-grid button {
+  color: #11251a;
+}
+
+.studio-canvas-context-menu button:hover:not(:disabled),
+.studio-canvas-node-context-menu button:hover:not(:disabled),
+.studio-canvas-add-node-menu button:hover,
+.studio-canvas-text-composer__model-menu button:hover,
+.studio-canvas-text-composer__model-menu button.is-selected,
+.studio-canvas-save-asset__select-menu button:hover,
+.studio-canvas-save-asset__select-menu button.is-selected,
+.studio-canvas-save-asset__existing-grid button:hover,
+.studio-canvas-save-asset__existing-grid button.is-selected {
+  background: #d9f8dd;
+}
+
+.studio-canvas-text-composer__model,
+.studio-canvas-text-composer__send,
+.studio-canvas-image-node__upload,
+.studio-canvas-image-composer__tools button,
+.studio-canvas-video-composer__tabs button,
+.studio-canvas-video-composer__tools button,
+.studio-canvas-video-composer__footer button,
+.studio-canvas-save-asset__placeholder button,
+.studio-canvas-save-asset__create,
+.studio-canvas-add-node-menu__icon,
+.studio-canvas-add-node-menu__badge,
+.react-flow__controls button {
+  border: 2px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  color: #11251a !important;
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.studio-canvas-text-composer__send,
+.studio-canvas-video-composer__footer button,
+.studio-canvas-save-asset__create {
+  background: #38d776 !important;
+}
+
+.studio-canvas-composer-chip .canvas-select-chip__trigger {
+  width: 100% !important;
+  height: 42px !important;
+  min-height: 42px;
+  margin-left: 0 !important;
+  border: 2px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  color: #11251a !important;
+  box-shadow: 3px 3px 0 #111 !important;
+}
+
+.studio-canvas-composer-chip .canvas-select-chip__dropdown {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  color: #11251a;
+  box-shadow: 5px 5px 0 #111;
+}
+
+.studio-canvas-composer-chip .canvas-select-chip__option {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 34px;
+  margin-left: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: #11251a !important;
+  box-shadow: none !important;
+}
+
+.studio-canvas-composer-chip .canvas-select-chip__option:hover,
+.studio-canvas-composer-chip .canvas-select-chip__option.is-active {
+  background: #d9f8dd !important;
+}
+
+.studio-canvas-text-composer__model-mark,
+.studio-canvas-text-composer__model-menu-icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+}
+
+.studio-canvas-text-node__connector span,
+.studio-canvas-image-node__connector span,
+.studio-canvas-video-node__connector span {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.studio-canvas-text-node__connector.is-linking span,
+.studio-canvas-image-node__connector.is-linking span,
+.studio-canvas-video-node__connector.is-linking span {
+  border-color: #111;
+  background: #38d776;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.studio-canvas.is-linking .studio-canvas-text-node__connector span,
+.studio-canvas.is-linking .studio-canvas-image-node__connector span,
+.studio-canvas.is-linking .studio-canvas-video-node__connector span {
+  outline: 2px dashed rgba(17, 17, 17, 0.42);
+  outline-offset: 4px;
+}
+
+.studio-canvas-context-menu__divider,
+.studio-canvas-node-context-menu__divider,
+.studio-canvas-save-asset__head {
+  border-color: #111;
+  background: #111;
+}
+
+.studio-canvas-context-menu kbd,
+.studio-canvas-node-context-menu kbd,
+.studio-canvas-node-context-menu__hint,
+.studio-canvas-save-asset__existing-grid span {
+  color: #557466;
+}
+
+.studio-canvas-save-asset {
+  background: rgba(245, 255, 244, 0.82);
+  backdrop-filter: none;
+}
+
+.studio-canvas-save-asset__placeholder,
+.studio-canvas-save-asset__form input,
+.studio-canvas-save-asset__select,
+.studio-canvas-save-asset__existing-grid button {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.studio-canvas-save-asset__placeholder img,
+.studio-canvas-save-asset__cover-library img {
+  border-radius: 0;
+}
+
+.studio-canvas-context-menu {
+  transform: scale(1);
+}
+
+.assets-centered-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-shell);
+}
+
+.assets-centered-page__head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex: 0 0 auto;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border-weak);
+  background: rgba(255, 255, 255, 0.62);
+  backdrop-filter: none;
+}
+
+.web-shell[data-theme="dark"] .assets-centered-page__head {
+  background: rgba(9, 16, 14, 0.88);
+}
+
+.assets-centered-page__head .studio-tabs {
+  flex: 1;
+}
+
+.assets-centered-page__head .asset-search {
+  flex: 0 0 auto;
+}
+
+.assets-centered-page__head .studio-tabs button {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 900;
+  border-radius: var(--radius-sm);
+}
+
+.assets-centered-page__head .studio-generate-btn--compact {
+  width: auto;
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 14px;
+}
+
+.assets-centered-page__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.assets-centered-page--empty,
+.assets-centered-page__body:has(.assets-empty-state) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.assets-login-required,
+.assets-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  width: min(100% - 32px, 440px);
+  min-height: 240px;
+  padding: 34px 28px;
+  border: 3px solid var(--utility-pixel-ink);
+  border-radius: 0;
+  background: var(--utility-pixel-cream);
+  background-size: auto;
+  box-shadow: 6px 6px 0 var(--utility-pixel-ink);
+  color: #11251a;
+  text-align: center;
+}
+
+.assets-login-required__icon,
+.assets-empty-state__icon {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  height: 46px;
+  border: 3px solid var(--utility-pixel-ink);
+  background: var(--utility-pixel-yellow);
+  color: #11251a;
+  font-size: 22px;
+  box-shadow: 3px 3px 0 var(--utility-pixel-ink);
+}
+
+.assets-login-required strong,
+.assets-empty-state strong {
+  font-size: 20px;
+  font-weight: 1000;
+}
+
+.assets-login-required p,
+.assets-empty-state p {
+  max-width: 300px;
+  margin: 0;
+  color: #557466;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.7;
+}
+
+.assets-centered-page__body .asset-grid--desktop {
+  width: min(100%, 1160px);
+  margin: 0 auto;
+  padding: 24px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.assets-centered-page__body .asset-card--desktop {
+  padding: 8px;
+  gap: 8px;
+}
+
+.assets-centered-page__body .asset-card__head strong {
+  font-size: 13px;
+}
+
+.assets-centered-page__body .asset-card__desc {
+  font-size: 11px;
+  -webkit-line-clamp: 2;
+}
+
+.assets-centered-page__body .asset-card__tags span {
+  min-height: 18px;
+  padding: 0 6px;
+  font-size: 10px;
+}
+
+.assets-centered-page__footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 0 0 34px;
+  padding: 0 24px;
+  border-top: 1px solid var(--border-weak);
+  background: var(--bg-elevated);
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.assets-centered-page__footer .studio-status-bar__meta {
+  margin-left: auto;
+  color: var(--fg-dim);
+  white-space: nowrap;
+}
+
+
+.asset-grid--desktop {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  height: 100%;
+  align-content: start;
+  overflow: auto;
+  padding: 18px;
+}
+
+.asset-card--desktop {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.asset-card--desktop:hover {
+  border-color: rgba(var(--accent-rgb), 0.35);
+  box-shadow: var(--shadow-tight);
+  transform: translateY(-1px);
+}
+
+.asset-card--desktop.is-selected {
+  border-color: rgba(var(--accent-rgb), 0.55);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12), var(--shadow-tight);
+}
+
+.asset-card__thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.asset-card__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-card__body {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.asset-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.asset-card__head strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.asset-card__desc {
+  margin: 0;
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.asset-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.asset-card__tags span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.asset-grid--panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  max-height: 520px;
+  overflow: auto;
+  padding: 2px;
+}
+
+.asset-card--panel {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel);
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.asset-card--panel:hover {
+  border-color: rgba(var(--accent-rgb), 0.35);
+  box-shadow: var(--shadow-tight);
+}
+
+.asset-card--panel .asset-card__thumb {
+  aspect-ratio: 1 / 1;
+  border-radius: 6px;
+}
+
+.asset-card--panel .asset-card__body {
+  gap: 4px;
+}
+
+.asset-card--panel .asset-card__head strong {
+  font-size: 12px;
+}
+
+.asset-card--panel .asset-card__desc {
+  -webkit-line-clamp: 1;
+  font-size: 11px;
+}
+
+.asset-card--panel .asset-card__tags {
+  gap: 4px;
+}
+
+.asset-card--panel .asset-card__tags span {
+  min-height: 18px;
+  padding: 0 6px;
+  font-size: 10px;
+}
+
+.asset-detail {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+}
+
+.asset-detail__preview {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+}
+
+.asset-detail h2,
+.asset-detail p {
+  margin: 0;
+}
+
+.asset-detail h2 {
+  color: var(--fg-body);
+  font-size: 18px;
+}
+
+.asset-detail p {
+  color: var(--fg-muted);
+  line-height: 1.65;
+}
+
+.asset-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.asset-search input {
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 13px;
+}
+
+.asset-search input::placeholder {
+  color: var(--fg-dim);
+}
+
+.asset-mini-thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.asset-detail dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.asset-detail dl > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.asset-detail dt {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.asset-detail dd {
+  margin: 0;
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Asset thumb color classes */
+.is-mark {
+  background: #2a5a3e;
+}
+
+.is-ava {
+  background: #3a5a6e;
+}
+
+.is-armor {
+  background: #4a4a52;
+}
+
+.is-station {
+  background: #2a4a5a;
+}
+
+.is-sea {
+  background: #1a3a5a;
+}
+
+.is-case {
+  background: #3a3a42;
+}
+
+.is-alert {
+  background: #5a2a2a;
+}
+
+.is-hud {
+  background: #2a5a4a;
+}
+
+.page-grid {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.15fr);
+  grid-template-rows: minmax(0, 1fr) minmax(220px, 0.7fr);
+  gap: 16px;
+  height: 100%;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.agent-chat-panel,
+.agent-plan,
+.agent-results {
+  min-width: 0;
+  padding: 18px;
+}
+
+.agent-chat-panel {
+  grid-row: 1 / span 2;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 16px;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.panel-title h1,
+.panel-title h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 18px;
+}
+
+.panel-title .anticon {
+  color: var(--accent);
+}
+
+.agent-thread,
+.plan-list,
+.task-list {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  overflow: auto;
+}
+
+.agent-message {
+  max-width: 84%;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.agent-message.is-user {
+  justify-self: end;
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.agent-message span,
+.agent-message p {
+  margin: 0;
+}
+
+.agent-message span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.agent-message p {
+  margin-top: 5px;
+  color: var(--fg-body);
+  line-height: 1.6;
+}
+
+.agent-input {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 42px;
+  gap: 10px;
+}
+
+.agent-input textarea {
+  min-height: 92px;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  outline: none;
+  resize: none;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  line-height: 1.5;
+}
+
+.agent-input button {
+  align-self: end;
+  width: 42px;
+  height: 42px;
+}
+
+.plan-list div,
+.task-list article {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.plan-list div {
+  grid-template-columns: 28px minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.plan-list span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.plan-list .is-done span {
+  background: rgba(34, 197, 94, 0.16);
+  color: #63e6a4;
+}
+
+.plan-list strong,
+.task-list strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.plan-list small,
+.task-list span,
+.task-list p {
+  margin: 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.studio-upload-slot--empty,
+.studio-upload-slot--filled {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 96px;
+  padding: 12px;
+  border: 1px dashed var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  cursor: pointer;
+}
+
+.studio-upload-slot--filled {
+  border-style: solid;
+}
+
+.studio-upload-slot--empty input,
+.studio-upload-slot--filled input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.studio-upload-slot--empty__icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 38px;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+}
+
+.studio-upload-slot--filled__thumb {
+  flex: 0 0 56px;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+}
+
+.studio-upload-slot--filled__info {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.studio-upload-slot--filled__info strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-upload-slot--filled__info small {
+  color: var(--fg-soft);
+  font-size: 11px;
+}
+
+.studio-audio-preview {
+  width: 100%;
+  height: 32px;
+}
+
+.studio-canvas-ghost,
+.studio-canvas-image,
+.studio-canvas-video {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+.studio-canvas-ghost {
+  align-content: center;
+  gap: 10px;
+  padding: 24px;
+  text-align: center;
+}
+
+.studio-canvas-ghost__icon {
+  display: grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  border-radius: 18px;
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  font-size: 24px;
+}
+
+.studio-canvas-ghost__title {
+  color: var(--fg-body);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.studio-canvas-ghost__hint {
+  max-width: 420px;
+  color: var(--fg-soft);
+  line-height: 1.6;
+}
+
+.studio-canvas-image img {
+  max-width: min(70%, 720px);
+  max-height: 78%;
+  border-radius: var(--radius-md);
+  object-fit: contain;
+  box-shadow: var(--shadow-panel);
+}
+
+.studio-canvas-video video {
+  max-width: min(80%, 860px);
+  max-height: 78%;
+  border-radius: var(--radius-md);
+  background: #000;
+  box-shadow: var(--shadow-panel);
+}
+
+.studio-canvas-pip {
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  width: 118px;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.studio-canvas-pip img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}
+
+.more-grid {
+  align-content: start;
+  padding: 18px;
+  overflow: auto;
+}
+
+.more-tool {
+  display: grid;
+  justify-items: start;
+  gap: 10px;
+  min-height: 150px;
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+}
+
+.more-tool .anticon {
+  color: var(--accent);
+  font-size: 24px;
+}
+
+
+@media (max-width: 1180px) {
+  .studio-tool-layout,
+  .studio-tool-layout--no-left,
+  .studio-tool-layout--no-right {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(520px, 1fr) auto auto;
+    overflow: auto;
+  }
+
+  .studio-panel,
+  .studio-panel--right,
+  .studio-canvas,
+  .studio-status-bar {
+    grid-column: 1;
+  }
+
+  .studio-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-weak);
+  }
+
+  .studio-panel--right {
+    border-left: 0;
+  }
+
+  .studio-canvas {
+    min-height: 520px;
+  }
+
+  .community-hero {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .community-case-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ecommerce-template-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .project-row,
+  .asset-grid--desktop {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .community-filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .community-filter-search {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  .ai-workbench-content-scroll {
+    padding: 18px 14px 86px;
+  }
+
+  .ai-workbench-dashboard {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 18px;
+  }
+
+  .ai-workbench-highlight-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ai-workbench-highlight-card,
+  .ai-workbench-highlight-card.is-large {
+    grid-column: span 1;
+    min-height: 150px;
+  }
+
+  .ai-chat-message-stack {
+    max-width: 86%;
+  }
+
+  .community-page {
+    padding: 16px 14px 86px;
+  }
+
+  .community-carousel {
+    min-height: 220px;
+    border-radius: var(--radius-sm);
+  }
+
+  .community-carousel__slide {
+    min-height: 220px;
+    padding: 22px 20px;
+  }
+
+  .community-carousel__slide strong {
+    font-size: 24px;
+  }
+
+  .community-carousel__arrow {
+    opacity: 1;
+    width: 34px;
+    height: 34px;
+    font-size: 12px;
+  }
+
+  .community-carousel__arrow--prev {
+    left: 8px;
+  }
+
+  .community-carousel__arrow--next {
+    right: 8px;
+  }
+
+  .community-section__head,
+  .ai-workbench-composer-shell__footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .ai-workbench-composer-shell__send {
+    align-self: flex-end;
+  }
+
+  .community-case-grid,
+  .more-grid,
+  .page-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ecommerce-template-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .community-filter-chip {
+    height: 30px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+
+  .community-filter-search {
+    height: 34px;
+  }
+
+  .page-grid {
+    height: auto;
+    overflow: visible;
+  }
+
+  .agent-chat-panel {
+    grid-row: auto;
+  }
+}
+
+@media (max-width: 560px) {
+  .ai-workbench-project-grid,
+  .ai-workbench-highlight-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ai-workbench-highlight-card,
+  .ai-workbench-highlight-card.is-large {
+    grid-column: auto;
+  }
+
+  .project-row,
+  .asset-grid--desktop {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .studio-toolstrip {
+    flex-wrap: wrap;
+    min-height: 52px;
+    padding: 8px 10px;
+  }
+}
+
+/* PDR UI alignment: light green default with canvas-first work surfaces. */
+.studio-toolstrip {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: none;
+}
+
+.web-shell[data-theme="dark"] .studio-toolstrip {
+  background: rgba(9, 16, 14, 0.88);
+}
+
+.studio-canvas {
+  background: var(--page-bg);
+}
+
+.canvas-page .studio-canvas {
+  background: #f5fff4;
+  background-position: var(--canvas-bg-x, 0px) var(--canvas-bg-y, 0px);
+  background-size: auto;
+}
+
+.web-shell[data-theme="dark"] .canvas-page .studio-canvas {
+  background: #09100e;
+  background-position: var(--canvas-bg-x, 0px) var(--canvas-bg-y, 0px);
+  background-size: auto;
+}
+
+.studio-status-bar {
+  background: var(--bg-elevated);
+  color: var(--fg-soft);
+}
+
+.workflow-json-preview {
+  background: var(--bg-inset);
+}
+
+.react-flow__controls button {
+  border-color: var(--border-subtle);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+}
+
+.ai-workbench-content-scroll {
+  width: min(100%, 1160px);
+}
+
+.ai-workbench-composer-shell {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: none;
+}
+
+.web-shell[data-theme="dark"] .ai-workbench-composer-shell {
+  background: rgba(8, 13, 11, 0.88);
+  box-shadow: none;
+}
+
+.ai-workbench-tool-button,
+.ai-workbench-mode-switch__button,
+.ai-workbench-prompt-row button,
+.ai-workbench-section-head button,
+.community-section--browse-more button {
+  background: var(--bg-inset);
+}
+
+.ai-workbench-project-card,
+.ai-chat-message-bubble {
+  background: rgba(255, 255, 255, 0.64);
+}
+
+.web-shell[data-theme="dark"] .ai-workbench-project-card,
+.web-shell[data-theme="dark"] .ai-chat-message-bubble {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.ai-workbench-project-card,
+.ai-workbench-highlight-card,
+.community-case-card,
+.project-card img,
+.project-card__empty,
+.asset-card--desktop img,
+.more-tool {
+  border-color: var(--border-subtle);
+}
+
+.community-hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.community-hero__actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.community-hero__actions button + button {
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+}
+
+.task-list__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.profile-page {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-shell);
+}
+
+/* ===== Banner ===== */
+.profile-page__banner {
+  position: relative;
+  height: 240px;
+  overflow: hidden;
+  background: var(--bg-shell);
+}
+
+.profile-page__banner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+.profile-page__banner-overlay {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.profile-page__banner-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
+  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
+  backdrop-filter: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.profile-page__banner-btn:hover {
+  background: var(--bg-panel);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  transform: translateY(-1px);
+  box-shadow: none;
+}
+
+.profile-page__banner-icon {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset));
+  color: var(--accent);
+  font-size: 16px;
+}
+
+/* ===== Body Layout ===== */
+.profile-page__body {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 28px;
+  padding: 0 40px 40px;
+  max-width: 1200px;
+  margin: -52px auto 0;
+  position: relative;
+  z-index: 2;
+}
+
+/* ===== Sidebar ===== */
+.profile-page__sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 28px 22px;
+  border-radius: 18px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  background: var(--bg-panel);
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
+  height: fit-content;
+  transition: box-shadow 0.3s ease;
+}
+
+.profile-page__sidebar:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+}
+
+.profile-page__sidebar-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.profile-page__avatar-ring {
+  position: relative;
+  padding: 3px;
+  border-radius: 50%;
+  background: conic-gradient(from 180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent), var(--accent));
+}
+
+.profile-page__avatar {
+  display: grid;
+  place-items: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--bg-inset);
+  color: var(--text);
+  font-size: 32px;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.profile-page__avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-page__avatar-badge {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  color: var(--accent);
+  font-size: 20px;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+}
+
+.profile-page__avatar-badge .anticon {
+  display: block;
+}
+
+.profile-page__username {
+  color: var(--text);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.profile-page__bio {
+  color: var(--text-soft);
+  font-size: 11px;
+  text-align: center;
+  letter-spacing: 0.02em;
+}
+
+/* Counts */
+.profile-page__counts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.profile-page__count {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  flex: 1;
+  position: relative;
+}
+
+.profile-page__count:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 24px;
+  background: color-mix(in srgb, var(--line) 45%, transparent);
+}
+
+.profile-page__count strong {
+  color: var(--text);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.profile-page__count span {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* Share btn */
+.profile-page__share-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 38px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-page__share-btn:hover {
+  background: var(--bg-hover);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+  color: var(--text);
+}
+
+/* Honor */
+.profile-page__honor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  padding-top: 16px;
+  border-top: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
+}
+
+.profile-page__honor-title {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.profile-page__honor-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.profile-page__honor-icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent) 15%, var(--bg-inset));
+  color: var(--accent);
+  font-size: 14px;
+}
+
+.profile-page__honor-level {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* ===== Main Content ===== */
+.profile-page__main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+}
+
+/* Main tabs */
+.profile-page__main-tabs {
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
+}
+
+.profile-page__main-tabs button {
+  padding: 12px 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s ease;
+}
+
+.profile-page__main-tabs button:hover {
+  color: var(--text);
+}
+
+.profile-page__main-tabs button.is-active {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.profile-page__main-tabs button.is-active::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2.5px;
+  background: var(--accent);
+  border-radius: 2px;
+}
+
+/* Section */
+.profile-page__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.profile-page__section-label {
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Empty state */
+.profile-page__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 60px 32px;
+  border-radius: 18px;
+  border: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
+  background: var(--bg-panel);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
+  min-height: 260px;
+  transition: box-shadow 0.3s ease;
+}
+
+.profile-page__empty-state:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.profile-page__empty-art {
+  position: relative;
+  width: 84px;
+  height: 60px;
+}
+
+.profile-page__empty-card {
+  position: absolute;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+}
+
+.profile-page__empty-card--back {
+  top: 0;
+  right: 6px;
+  transform: rotate(-14deg) scale(0.9);
+  opacity: 0.55;
+}
+
+.profile-page__empty-card--front {
+  bottom: 2px;
+  left: 6px;
+  transform: rotate(8deg) scale(1);
+}
+
+.profile-page__empty-text {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.profile-page__empty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-page__empty-btn:hover {
+  background: var(--bg-hover);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+  color: var(--text);
+  transform: translateY(-1px);
+}
+
+/* List bar */
+.profile-page__list-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.profile-page__list-tabs {
+  display: flex;
+  gap: 16px;
+}
+
+.profile-page__list-tabs button {
+  padding: 6px 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.18s;
+}
+
+.profile-page__list-tabs button.is-active {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.profile-page__list-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  background: var(--bg-inset);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-page__list-filter:hover {
+  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--text);
+}
+
+/* Upload card */
+.profile-page__upload-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 220px;
+  height: 220px;
+  border-radius: 16px;
+  border: 2px dashed color-mix(in srgb, var(--line) 50%, transparent);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.profile-page__upload-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 3%, transparent);
+  transform: translateY(-2px);
+}
+
+.profile-page__upload-card .anticon {
+  font-size: 28px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.profile-page__upload-card:hover .anticon {
+  opacity: 1;
+}
+
+/* ===== Auth (not logged in) ===== */
+.profile-page__center {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 520px;
+  margin: 60px auto 0;
+  width: 100%;
+  padding: 0 24px;
+}
+
+.profile-page__card {
+  padding: 28px;
+  border-radius: 20px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  background: var(--bg-panel);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s ease;
+}
+
+.profile-page__card:hover {
+  box-shadow: none;
+}
+
+.profile-page__card--auth {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.profile-page__auth-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+}
+
+.profile-page__auth-icon {
+  display: grid;
+  place-items: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset));
+  color: var(--accent);
+  font-size: 26px;
+}
+
+.profile-page__auth-head h2 {
+  margin: 0;
+  color: var(--text);
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.profile-page__auth-head p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.profile-page__pending {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--accent) 6%, var(--bg-inset));
+  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.profile-page__pending span {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.profile-page__pending strong {
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.profile-page__form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.profile-page__tabs {
+  display: inline-flex;
+  gap: 6px;
+  width: fit-content;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--bg-inset);
+}
+
+.profile-page__tabs button {
+  min-height: 36px;
+  padding: 0 18px;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.profile-page__tabs button.is-active {
+  background: var(--accent);
+  color: #061014;
+}
+
+.profile-page__field {
+  display: grid;
+  gap: 6px;
+}
+
+.profile-page__field span {
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.profile-page__field input {
+  min-height: 46px;
+  padding: 0 16px;
+  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--text);
+  font-size: 14px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.profile-page__field input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-rgb) 12%, transparent);
+}
+
+.profile-page__primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 46px;
+  padding: 0 18px;
+  border-radius: 12px;
+  background: var(--accent);
+  color: #061014;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-rgb) 20%, transparent);
+  transition: all 0.2s ease;
+}
+
+.profile-page__primary:hover {
+  background: color-mix(in srgb, var(--accent) 88%, #061014);
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+.profile-page__hint,
+.profile-page__notice-copy {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 900px) {
+  .profile-page__body {
+    grid-template-columns: 1fr;
+    padding: 0 16px 86px;
+    margin-top: -28px;
+  }
+
+  .profile-page__sidebar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .profile-page__honor {
+    border-top: 0;
+    padding-top: 0;
+    border-left: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
+    padding-left: 16px;
+  }
+
+  .profile-page__center {
+    margin-top: 28px;
+    padding: 0 16px 86px;
+  }
+
+  .profile-page__banner {
+    height: 180px;
+  }
+}
+
+/* Pixel profile theme */
+.profile-page {
+  background: #f5fff4;
+  background-size: auto;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.profile-page__banner {
+  height: 220px;
+  border-bottom: 3px solid #111;
+  background: #dff8e7;
+  background-size: auto;
+}
+
+.profile-page__banner::before {
+  display: none;
+}
+
+.profile-page__banner-btn,
+.profile-page__sidebar,
+.profile-page__empty-state,
+.profile-page__card,
+.profile-page__upload-card {
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  box-shadow: 7px 7px 0 #111;
+  backdrop-filter: none;
+}
+
+.profile-page__banner-btn {
+  padding: 12px 20px;
+  color: #153926;
+  font-weight: 900;
+}
+
+.profile-page__banner-icon,
+.profile-page__avatar,
+.profile-page__auth-icon,
+.profile-page__honor-icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #3bd176;
+  color: #111;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.profile-page__avatar-ring {
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.profile-page__avatar {
+  font-weight: 1000;
+}
+
+.profile-page__avatar-badge {
+  color: #111;
+  filter: none;
+}
+
+.profile-page__username,
+.profile-page__count strong,
+.profile-page__honor-level,
+.profile-page__auth-head h2 {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+.profile-page__bio,
+.profile-page__count span,
+.profile-page__honor-title,
+.profile-page__section-label,
+.profile-page__empty-text,
+.profile-page__hint,
+.profile-page__notice-copy {
+  color: #557466;
+}
+
+.profile-page__share-btn,
+.profile-page__empty-btn,
+.profile-page__list-filter,
+.profile-page__tabs,
+.profile-page__primary {
+  border: 2px solid #111;
+  border-radius: 0;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.profile-page__share-btn,
+.profile-page__empty-btn,
+.profile-page__list-filter {
+  background: #fff;
+  color: #153926;
+  font-weight: 900;
+}
+
+.profile-page__share-btn:hover,
+.profile-page__empty-btn:hover,
+.profile-page__list-filter:hover,
+.profile-page__primary:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.profile-page__main-tabs {
+  border-bottom: 3px solid #111;
+}
+
+.profile-page__main-tabs button,
+.profile-page__list-tabs button {
+  color: #557466;
+  font-weight: 900;
+}
+
+.profile-page__main-tabs button.is-active,
+.profile-page__list-tabs button.is-active {
+  color: #20c76a;
+}
+
+.profile-page__main-tabs button.is-active::after {
+  height: 5px;
+  border-radius: 0;
+  background: #20c76a;
+}
+
+.profile-page__empty-card {
+  border: 2px solid #111;
+  border-radius: 0;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.profile-page__upload-card {
+  border-style: dashed;
+  color: #557466;
+  font-weight: 900;
+}
+
+.profile-page__card {
+  background: #fffdf5;
+  background-size: auto;
+}
+
+.profile-page__tabs {
+  padding: 0;
+  background: #fff;
+}
+
+.profile-page__tabs button {
+  border-radius: 0;
+  color: #557466;
+  font-weight: 1000;
+}
+
+.profile-page__tabs button.is-active,
+.profile-page__primary {
+  background: #38d776;
+  color: #111;
+}
+
+.profile-page__field input {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.profile-page__field input:focus {
+  border-color: #111;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.profile-page__pending {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff2b8;
+}
+
+
+/* PDR UI refactor: workbench becomes a focused operating surface, not a card mosaic. */
+.ai-workbench-page {
+  background: var(--bg-shell);
+}
+
+.ai-workbench-content-scroll {
+  width: min(100%, 1040px);
+  gap: 28px;
+  padding: 28px 24px 48px;
+}
+
+.ai-workbench-landing {
+  gap: 14px;
+  min-height: auto;
+}
+
+.ai-workbench-brand-row {
+  min-height: 28px;
+}
+
+.ai-workbench-brand-row__mark {
+  min-width: 82px;
+  height: 28px;
+  border-radius: 14px;
+  font-size: 13px;
+  box-shadow: none;
+}
+
+.ai-workbench-hero {
+  max-width: 680px;
+  gap: 10px;
+}
+
+.ai-workbench-hero__title {
+  font-size: 40px;
+  line-height: 1.08;
+  letter-spacing: 0;
+}
+
+.ai-workbench-hero__copy {
+  max-width: 620px;
+  color: var(--fg-muted);
+  font-size: 15px;
+}
+
+.ai-workbench-composer-section {
+  width: min(100%, 720px);
+}
+
+.ai-workbench-composer-shell {
+  border-color: rgba(var(--accent-rgb), 0.26);
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  box-shadow: none;
+}
+
+.ai-workbench-composer-shell__inner {
+  padding: 16px;
+}
+
+.ai-workbench-composer-shell__textarea {
+  min-height: 96px;
+  font-size: 15px;
+}
+
+.ai-workbench-tool-button,
+.ai-workbench-mode-switch__button,
+.ai-workbench-prompt-row button,
+.ai-workbench-section-head button {
+  min-height: 36px;
+}
+
+.ai-workbench-composer-shell__send {
+  flex-basis: 44px;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: var(--accent);
+}
+
+.ai-workbench-prompt-row {
+  gap: 10px;
+}
+
+.ai-workbench-dashboard {
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+  gap: 22px;
+  align-items: start;
+}
+
+.ai-workbench-section-head {
+  align-items: center;
+}
+
+.ai-workbench-section-head > span {
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.ai-workbench-section-head h2::before,
+.community-section__head h2::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 10px;
+  border-radius: 999px;
+  background: var(--accent);
+  vertical-align: 2px;
+}
+
+.ai-workbench-start-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.ai-workbench-start-card {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-height: 224px;
+  padding: 14px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.ai-workbench-start-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--accent-rgb), 0.36);
+  box-shadow: var(--shadow-tight);
+}
+
+.ai-workbench-start-card__visual {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.ai-workbench-start-card.is-community .ai-workbench-start-card__visual {
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.ai-workbench-start-card.is-agent .ai-workbench-start-card__visual {
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.ai-workbench-start-card__tag {
+  color: var(--fg-soft);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.ai-workbench-start-card strong {
+  color: var(--fg-body);
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.ai-workbench-start-card span:last-child {
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.ai-workbench-panel--recent {
+  padding: 0;
+}
+
+.ai-workbench-thread-shell {
+  max-width: none;
+  padding: 0;
+}
+
+.ai-chat-message-bubble {
+  border: 1px solid var(--border-weak);
+  border-radius: 14px;
+}
+
+@media (max-width: 900px) {
+  .ai-workbench-content-scroll {
+    gap: 22px;
+    padding: 20px 14px 92px;
+  }
+
+  .ai-workbench-hero__title {
+    font-size: 30px;
+  }
+
+  .ai-workbench-hero__copy {
+    font-size: 14px;
+  }
+
+  .ai-workbench-composer-section {
+    width: 100%;
+  }
+
+  .ai-workbench-dashboard {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ai-workbench-start-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ai-workbench-start-card {
+    min-height: auto;
+    grid-template-columns: 96px minmax(0, 1fr);
+    align-items: center;
+    gap: 6px 12px;
+  }
+
+  .ai-workbench-start-card__visual {
+    grid-row: span 3;
+    aspect-ratio: 1 / 1;
+  }
+}
+
+@media (max-width: 560px) {
+  .ai-workbench-composer-shell__footer {
+    gap: 12px;
+  }
+
+  .ai-workbench-prompt-row {
+    justify-content: flex-start;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    padding-bottom: 2px;
+    scrollbar-width: none;
+  }
+
+  .ai-workbench-prompt-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ai-workbench-prompt-row button {
+    flex: 0 0 auto;
+  }
+}
+
+/* Video creation agent homepage. */
+.video-agent-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-shell);
+}
+
+.video-agent-scroll {
+  display: grid;
+  gap: 24px;
+  width: min(100%, 1240px);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 30px 28px 56px;
+}
+
+.video-agent-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
+  align-items: center;
+  gap: 34px;
+  min-height: 520px;
+}
+
+.video-agent-hero__copy {
+  display: grid;
+  justify-items: start;
+  gap: 18px;
+  min-width: 0;
+  animation: video-agent-rise 520ms ease both;
+}
+
+.video-agent-kicker,
+.video-agent-section-head span,
+.video-agent-composer__head span,
+.video-agent-agent-panel__top span {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.video-agent-hero h1 {
+  max-width: 620px;
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 64px;
+  line-height: 0.98;
+  letter-spacing: 0;
+}
+
+.video-agent-hero__copy p {
+  max-width: 560px;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 16px;
+  line-height: 1.75;
+}
+
+.video-agent-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.video-agent-primary,
+.video-agent-secondary,
+.video-agent-send,
+.video-agent-prompt-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 15px;
+  border-radius: 8px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    border-color 170ms ease,
+    background 170ms ease,
+    color 170ms ease;
+}
+
+.video-agent-primary,
+.video-agent-send {
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  background: var(--accent);
+  color: #061014;
+}
+
+.video-agent-secondary,
+.video-agent-prompt-row button {
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+}
+
+.video-agent-primary:hover,
+.video-agent-secondary:hover,
+.video-agent-send:hover,
+.video-agent-prompt-row button:hover,
+.video-agent-shot:hover,
+.video-agent-timeline__item:hover,
+.video-agent-launch:hover {
+  transform: translateY(-2px);
+}
+
+.video-agent-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 112px));
+  gap: 16px;
+  margin: 8px 0 0;
+}
+
+.video-agent-metrics div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.video-agent-metrics dt {
+  color: var(--fg-body);
+  font-size: 28px;
+  font-weight: 950;
+  line-height: 1;
+}
+
+.video-agent-metrics dd {
+  margin: 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.video-agent-hero__visual {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 154px;
+  gap: 12px;
+  min-width: 0;
+  min-height: 430px;
+  animation: video-agent-rise 620ms ease 80ms both;
+}
+
+.video-agent-preview {
+  position: relative;
+  min-width: 0;
+  min-height: 430px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.46);
+  border-radius: 8px;
+  background: #050708;
+  box-shadow: none;
+  isolation: isolate;
+}
+
+.video-agent-preview__image,
+.video-agent-shot__image {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #101417;
+  background-size: cover;
+  background-position: center;
+}
+
+.video-agent-preview__image {
+  position: absolute;
+  inset: 0;
+  filter: saturate(1.06) contrast(1.03);
+  transform: scale(1.02);
+  transition: transform 520ms ease;
+}
+
+.video-agent-preview:hover .video-agent-preview__image {
+  transform: scale(1.06);
+}
+
+.video-agent-preview__image::before,
+.video-agent-preview__image::after,
+.video-agent-shot__image::before,
+.video-agent-shot__image::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.video-agent-preview__image::before,
+.video-agent-shot__image::before {
+  inset: 0;
+  background: inherit;
+}
+
+.video-agent-preview__image::after,
+.video-agent-shot__image::after {
+  inset: 0;
+  background: transparent;
+  mix-blend-mode: screen;
+}
+
+.video-agent-preview__image.is-rain,
+.video-agent-shot__image.is-rain {
+  background: #1c3540;
+}
+
+.video-agent-preview__image.is-rain::before,
+.video-agent-shot__image.is-rain::before {
+  background: transparent;
+  opacity: 0.78;
+}
+
+.video-agent-preview__image.is-product,
+.video-agent-shot__image.is-product {
+  background: #101214;
+}
+
+.video-agent-preview__image.is-product::before,
+.video-agent-shot__image.is-product::before {
+  top: 20%;
+  right: 28%;
+  bottom: 18%;
+  left: 28%;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 28px;
+  background: #202827;
+  box-shadow: none;
+  transform: rotate(-8deg);
+}
+
+.video-agent-preview__image.is-scene,
+.video-agent-shot__image.is-scene {
+  background: #1b221f;
+}
+
+.video-agent-preview__image.is-scene::before,
+.video-agent-shot__image.is-scene::before {
+  inset: 22% 13% 20%;
+  border-radius: 18px;
+  background: #20313b;
+  box-shadow: none;
+}
+
+.video-agent-preview::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: transparent;
+  mix-blend-mode: screen;
+  opacity: 0.38;
+  transform: translateX(-100%);
+  animation: video-agent-scan 5.6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.video-agent-preview__shade {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.72);
+}
+
+.video-agent-preview__meta {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+  z-index: 3;
+  display: grid;
+  gap: 8px;
+  color: #fff;
+}
+
+.video-agent-preview__meta span {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.video-agent-preview__meta strong {
+  font-size: 28px;
+  line-height: 1.12;
+}
+
+.video-agent-preview__meta small {
+  display: -webkit-box;
+  max-width: 620px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 13px;
+  line-height: 1.6;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.video-agent-preview__play {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  z-index: 3;
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.34);
+  color: #fff;
+  font-size: 24px;
+  backdrop-filter: none;
+}
+
+.video-agent-shot-rail {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.video-agent-shot {
+  position: relative;
+  display: grid;
+  align-content: end;
+  min-width: 0;
+  min-height: 136px;
+  overflow: hidden;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: #0b0d0f;
+  color: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    border-color 170ms ease,
+    box-shadow 170ms ease;
+}
+
+.video-agent-shot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.78);
+}
+
+.video-agent-shot__image {
+  position: absolute;
+  inset: 0;
+}
+
+.video-agent-shot span:not(.video-agent-shot__image),
+.video-agent-shot strong {
+  position: relative;
+  z-index: 1;
+}
+
+.video-agent-shot span:not(.video-agent-shot__image) {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.video-agent-shot strong {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.video-agent-shot.is-active {
+  border-color: rgba(var(--accent-rgb), 0.74);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
+}
+
+.video-agent-composer,
+.video-agent-shot-board,
+.video-agent-agent-panel,
+.video-agent-step {
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: var(--shadow-tight);
+  backdrop-filter: none;
+}
+
+.video-agent-composer {
+  display: grid;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  padding: 16px;
+}
+
+.video-agent-composer__head,
+.video-agent-agent-panel__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.video-agent-composer__head strong,
+.video-agent-agent-panel__top strong {
+  color: var(--fg-body);
+  font-size: 14px;
+}
+
+.video-agent-composer__textarea {
+  width: 100%;
+  min-height: 92px;
+  max-height: 180px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.video-agent-composer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-width: 0;
+}
+
+.video-agent-prompt-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.video-agent-prompt-row button {
+  min-height: 36px;
+  padding: 0 12px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.video-agent-prompt-row button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--fg-body);
+}
+
+.video-agent-send {
+  flex: 0 0 auto;
+  min-width: 112px;
+}
+
+.video-agent-send:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+  transform: none;
+}
+
+.video-agent-status {
+  min-height: 20px;
+  margin: 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.video-agent-pipeline,
+.video-agent-workspace {
+  display: grid;
+  gap: 14px;
+}
+
+.video-agent-section-head {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.video-agent-section-head h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 24px;
+  line-height: 1.22;
+}
+
+.video-agent-pipeline__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.video-agent-step {
+  display: grid;
+  align-content: start;
+  gap: 9px;
+  min-height: 170px;
+  padding: 16px;
+}
+
+.video-agent-step__icon {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.video-agent-step span {
+  color: var(--accent-cyan);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.video-agent-step strong {
+  color: var(--fg-body);
+  font-size: 16px;
+}
+
+.video-agent-step p {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.video-agent-workspace {
+  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
+  align-items: start;
+}
+
+.video-agent-shot-board,
+.video-agent-agent-panel {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 18px;
+}
+
+.video-agent-timeline {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  min-width: 0;
+}
+
+.video-agent-timeline__item {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+  min-width: 0;
+  min-height: 126px;
+  padding: 14px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    border-color 170ms ease,
+    background 170ms ease;
+}
+
+.video-agent-timeline__item::before {
+  content: "";
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  left: 14px;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.video-agent-timeline__item::after {
+  content: "";
+  position: absolute;
+  bottom: 14px;
+  left: 14px;
+  width: 38%;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--accent);
+  animation: video-agent-timeline 2.8s ease-in-out infinite;
+}
+
+.video-agent-timeline__item span {
+  color: var(--fg-soft);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.video-agent-timeline__item strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 15px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.video-agent-timeline__item small {
+  color: var(--accent-gold);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.video-agent-timeline__item.is-active {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(var(--accent-rgb), 0.1);
+}
+
+.video-agent-agent-panel__top span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.video-agent-message-list {
+  display: grid;
+  gap: 10px;
+}
+
+.video-agent-message {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.video-agent-message > span {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.video-agent-message--assistant > span {
+  background: var(--accent);
+  color: #061014;
+}
+
+.video-agent-message p {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.video-agent-launch-row {
+  display: grid;
+  gap: 8px;
+}
+
+.video-agent-launch {
+  display: grid;
+  justify-items: start;
+  gap: 5px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    border-color 170ms ease,
+    background 170ms ease;
+}
+
+.video-agent-launch span {
+  color: var(--accent-cyan);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.video-agent-launch.is-agent span {
+  color: var(--accent-gold);
+}
+
+.video-agent-launch strong {
+  color: var(--fg-body);
+  font-size: 14px;
+}
+
+.video-agent-launch small {
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.web-shell[data-theme="dark"] .video-agent-page {
+  background: var(--bg-shell);
+}
+
+.web-shell[data-theme="dark"] .video-agent-composer,
+.web-shell[data-theme="dark"] .video-agent-shot-board,
+.web-shell[data-theme="dark"] .video-agent-agent-panel,
+.web-shell[data-theme="dark"] .video-agent-step {
+  background: rgba(12, 19, 17, 0.86);
+}
+
+.web-shell[data-theme="dark"] .video-agent-secondary,
+.web-shell[data-theme="dark"] .video-agent-prompt-row button {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+@keyframes video-agent-rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes video-agent-scan {
+  0%,
+  58% {
+    transform: translateX(-115%);
+  }
+
+  82%,
+  100% {
+    transform: translateX(115%);
+  }
+}
+
+@keyframes video-agent-timeline {
+  0%,
+  100% {
+    width: 30%;
+  }
+
+  50% {
+    width: 72%;
+  }
+}
+
+@media (max-width: 1180px) {
+  .video-agent-hero {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+  }
+
+  .video-agent-hero h1 {
+    max-width: 760px;
+    font-size: 54px;
+  }
+
+  .video-agent-hero__copy p {
+    max-width: 720px;
+  }
+
+  .video-agent-pipeline__grid,
+  .video-agent-workspace {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .video-agent-agent-panel {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 900px) {
+  .video-agent-scroll {
+    gap: 20px;
+    padding: 20px 14px 92px;
+  }
+
+  .video-agent-hero {
+    gap: 22px;
+  }
+
+  .video-agent-composer {
+    order: -1;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .video-agent-hero h1 {
+    font-size: 40px;
+  }
+
+  .video-agent-hero__copy p {
+    font-size: 15px;
+  }
+
+  .video-agent-hero__visual {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+  }
+
+  .video-agent-preview {
+    min-height: 340px;
+  }
+
+  .video-agent-shot-rail {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .video-agent-shot {
+    min-height: 118px;
+  }
+
+  .video-agent-composer__footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .video-agent-send {
+    width: 100%;
+  }
+
+  .video-agent-pipeline__grid,
+  .video-agent-workspace,
+  .video-agent-timeline {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .video-agent-agent-panel {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 560px) {
+  .video-agent-hero h1 {
+    font-size: 34px;
+  }
+
+  .video-agent-metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .video-agent-preview {
+    min-height: 300px;
+  }
+
+  .video-agent-shot-rail {
+    display: none;
+  }
+
+  .video-agent-composer__head,
+  .video-agent-agent-panel__top {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .video-agent-preview__meta {
+    right: 14px;
+    bottom: 14px;
+    left: 14px;
+  }
+
+  .video-agent-preview__meta strong {
+    font-size: 22px;
+  }
+
+  .video-agent-shot-rail {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding-bottom: 2px;
+    scrollbar-width: none;
+  }
+
+  .video-agent-shot-rail::-webkit-scrollbar {
+    display: none;
+  }
+
+  .video-agent-shot {
+    flex: 0 0 148px;
+  }
+
+  .video-agent-prompt-row {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 2px;
+    scrollbar-width: none;
+  }
+
+  .video-agent-prompt-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .video-agent-prompt-row button {
+    flex: 0 0 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .video-agent-hero__copy,
+  .video-agent-hero__visual,
+  .video-agent-preview::before,
+  .video-agent-timeline__item::after {
+    animation: none;
+  }
+
+  .video-agent-preview__image,
+  .video-agent-primary,
+  .video-agent-secondary,
+  .video-agent-send,
+  .video-agent-prompt-row button,
+  .video-agent-shot,
+  .video-agent-timeline__item,
+  .video-agent-launch {
+    transition: none;
+  }
+}
+
+/* === Workbench landing page: hei layout + lv green palette === */
+.workbench-landing-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-shell);
+}
+
+.workbench-landing-scroll {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 28px;
+  width: min(100%, 860px);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 48px 28px 64px;
+}
+
+.workbench-landing-hero {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.workbench-landing-title {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: clamp(32px, 4vw, 48px);
+  font-weight: 950;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+}
+
+.workbench-landing-subtitle {
+  max-width: 560px;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+.workbench-mode-strip {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.workbench-mode-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 84px;
+  height: 80px;
+  padding: 0 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    background 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.workbench-mode-chip:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--accent-rgb), 0.28);
+  color: var(--fg-body);
+}
+
+.workbench-mode-chip.is-active {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--fg-body);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
+}
+
+.workbench-mode-chip__icon {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 16px;
+}
+
+.workbench-mode-chip.is-active .workbench-mode-chip__icon {
+  background: rgba(var(--accent-rgb), 0.2);
+}
+
+.workbench-composer-shell {
+  width: 100%;
+  padding: 16px;
+  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.workbench-composer-textarea {
+  width: 100%;
+  min-height: 110px;
+  max-height: 220px;
+  padding: 4px 2px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.workbench-composer-textarea::placeholder {
+  color: var(--fg-dim);
+}
+
+.workbench-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.workbench-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.workbench-composer-file-input {
+  display: none;
+}
+
+.workbench-composer-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.workbench-composer-tool[aria-haspopup="dialog"] {
+  min-width: 146px;
+  padding: 0 14px;
+}
+
+.workbench-composer-tool:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  color: var(--fg-body);
+}
+
+.workbench-composer-tool__text {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.workbench-generation-menu {
+  position: relative;
+  z-index: 4;
+}
+
+.workbench-generation-trigger {
+  min-width: 132px;
+  border-color: rgba(var(--accent-rgb), 0.46);
+  background: var(--bg-inset);
+  color: var(--accent);
+  box-shadow:
+    0 0 0 2px rgba(var(--accent-rgb), 0.08),
+    0 8px 0 rgba(0, 0, 0, 0.08);
+}
+
+.workbench-generation-trigger .anticon:last-child {
+  font-size: 10px;
+}
+
+.workbench-generation-menu__panel {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 8px);
+  display: grid;
+  width: 190px;
+  padding: 8px;
+  border: 2px solid rgba(var(--accent-rgb), 0.5);
+  border-radius: 12px;
+  background: var(--bg-elevated);
+  box-shadow: none;
+}
+
+.workbench-generation-menu__panel button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 900;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbench-generation-menu__panel button .anticon {
+  color: var(--accent);
+  font-size: 15px;
+}
+
+.workbench-generation-menu__panel button:hover,
+.workbench-generation-menu__panel button.is-active {
+  background: rgba(var(--accent-rgb), 0.18);
+  color: var(--accent);
+}
+
+.workbench-preferences {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  pointer-events: none;
+}
+
+.workbench-preferences__scrim {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.workbench-preferences__panel {
+  position: fixed;
+  z-index: 1;
+  display: grid;
+  align-content: start;
+  gap: 28px;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  padding: 24px 26px;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.985);
+  color: #111827;
+  box-shadow: none;
+  pointer-events: auto;
+}
+
+.workbench-preferences__resize {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 18px;
+  height: 18px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  cursor: nwse-resize;
+}
+
+.workbench-preferences__resize:hover {
+  background-color: rgba(15, 23, 42, 0.04);
+}
+
+.workbench-preferences__section-label {
+  margin-bottom: -18px;
+  color: #9aa1aa;
+  font-size: 14px;
+}
+
+.workbench-ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 16px;
+  background: #fafafa;
+}
+
+.workbench-ratio-option {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 78px;
+  padding: 9px 4px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: #8a8f98;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.workbench-ratio-option.is-active {
+  border-color: transparent;
+  background: #fff;
+  color: #1f2937;
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
+}
+
+.workbench-ratio-option__icon {
+  display: block;
+  width: 18px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-radius: 4px;
+}
+
+.workbench-ratio-option__icon[data-ratio="智能"] {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+}
+
+.workbench-ratio-option__icon[data-ratio="21:9"] {
+  width: 22px;
+  height: 8px;
+}
+
+.workbench-ratio-option__icon[data-ratio="16:9"] {
+  width: 22px;
+  height: 10px;
+}
+
+.workbench-ratio-option__icon[data-ratio="3:2"] {
+  width: 20px;
+  height: 12px;
+}
+
+.workbench-ratio-option__icon[data-ratio="4:3"] {
+  width: 18px;
+  height: 13px;
+}
+
+.workbench-ratio-option__icon[data-ratio="1:1"] {
+  width: 18px;
+  height: 18px;
+}
+
+.workbench-ratio-option__icon[data-ratio="3:4"] {
+  width: 14px;
+  height: 18px;
+}
+
+.workbench-ratio-option__icon[data-ratio="2:3"] {
+  width: 12px;
+  height: 19px;
+}
+
+.workbench-ratio-option__icon[data-ratio="9:16"] {
+  width: 11px;
+  height: 20px;
+}
+
+.workbench-resolution-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 4px;
+  border-radius: 14px;
+  background: #f8f8f8;
+}
+
+.workbench-resolution-grid button {
+  min-height: 58px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: #222831;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.workbench-resolution-grid button.is-active {
+  background: #fff;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
+}
+
+.workbench-size-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  color: #a2abb5;
+}
+
+.workbench-size-grid label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  height: 60px;
+  padding: 0 22px;
+  border-radius: 12px;
+  background: #f7f7f7;
+}
+
+.workbench-size-grid label span {
+  color: #c7d0da;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.workbench-size-grid input {
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #c7d0da;
+  font-size: 16px;
+  text-align: right;
+}
+
+.workbench-size-grid > .anticon {
+  justify-self: center;
+  color: #c1cbd5;
+  font-size: 18px;
+}
+
+.workbench-size-grid > span {
+  color: #607083;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.workbench-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    filter 170ms ease;
+}
+
+.workbench-composer-send:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.06);
+}
+
+.workbench-composer-send:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+  filter: none;
+}
+
+/* Dark theme overrides for workbench landing */
+.web-shell[data-theme="dark"] .workbench-landing-page {
+  background: var(--bg-shell);
+}
+
+.web-shell[data-theme="dark"] .workbench-composer-shell {
+  background: rgba(12, 17, 15, 0.88);
+  box-shadow: none;
+}
+
+.web-shell[data-theme="dark"] .workbench-mode-chip {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+/* Workbench responsive */
+@media (max-width: 900px) {
+  .workbench-landing-scroll {
+    gap: 22px;
+    padding: 32px 18px 92px;
+  }
+
+  .workbench-landing-title {
+    font-size: clamp(28px, 6vw, 38px);
+  }
+
+  .workbench-landing-subtitle {
+    font-size: 14px;
+  }
+
+  .workbench-mode-chip {
+    min-width: 72px;
+    height: 72px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+
+  .workbench-mode-chip__icon {
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+  }
+
+  .workbench-composer-shell {
+    padding: 14px;
+  }
+
+  .workbench-composer-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .workbench-composer-send {
+    width: 100%;
+  }
+
+  .workbench-preferences__panel {
+    gap: 20px;
+    padding: 22px 18px;
+    border-radius: 18px;
+  }
+
+  .workbench-ratio-grid {
+    grid-template-columns: repeat(9, minmax(48px, 1fr));
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .workbench-ratio-grid::-webkit-scrollbar {
+    display: none;
+  }
+
+}
+
+@media (max-width: 560px) {
+  .workbench-landing-scroll {
+    padding: 24px 14px 92px;
+  }
+
+  .workbench-mode-strip {
+    gap: 6px;
+  }
+
+  .workbench-mode-chip {
+    min-width: 64px;
+    height: 64px;
+    padding: 0 8px;
+  }
+
+  .workbench-mode-chip__icon {
+    width: 24px;
+    height: 24px;
+    font-size: 13px;
+  }
+
+  .workbench-preferences__panel {
+    gap: 18px;
+    padding: 18px 14px;
+  }
+
+  .workbench-ratio-option {
+    min-height: 66px;
+    font-size: 12px;
+  }
+
+  .workbench-resolution-grid button {
+    min-height: 46px;
+    font-size: 14px;
+  }
+
+  .workbench-size-grid {
+    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) auto;
+    gap: 8px;
+  }
+
+  .workbench-size-grid label {
+    height: 50px;
+    padding: 0 12px;
+  }
+
+  .workbench-size-grid input {
+    font-size: 14px;
+  }
+}
+
+
+/* ===== Ecommerce Page ===== */
+.ecommerce-landing-page {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  background: var(--bg-shell);
+}
+
+.ecommerce-landing-scroll {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 28px;
+  width: min(100%, 1040px);
+  margin: 0 auto;
+  padding: 48px 28px 64px;
+}
+
+.ecommerce-generate-carousel {
+  width: min(100%, 1040px);
+  min-height: 310px;
+  box-shadow: none;
+}
+
+.ecommerce-generate-carousel .community-carousel__slide {
+  min-height: 286px;
+}
+
+.ecommerce-generate-carousel .community-carousel__arrow {
+  opacity: 1;
+}
+
+.ecommerce-carousel-file-input {
+  display: none;
+}
+
+.ecommerce-carousel-upload {
+  position: absolute;
+  top: 50%;
+  right: -132px;
+  z-index: 3;
+  width: 108px;
+  min-height: 42px;
+  padding: 9px 12px;
+  border: 2px solid #1d2a1d;
+  border-radius: 0;
+  background: #fff2b8;
+  color: #1d2a1d;
+  font-size: 14px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+  box-shadow: 4px 4px 0 #1d2a1d;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition:
+    transform 140ms ease,
+    box-shadow 140ms ease,
+    background 140ms ease;
+}
+
+.ecommerce-carousel-upload:hover {
+  background: #ffd76b;
+  transform: translateY(calc(-50% - 2px));
+  box-shadow: 5px 5px 0 #1d2a1d;
+}
+
+.ecommerce-carousel-upload:active {
+  transform: translateY(calc(-50% + 2px));
+  box-shadow: 2px 2px 0 #1d2a1d;
+}
+
+@media (max-width: 1320px) {
+  .ecommerce-carousel-upload {
+    right: 16px;
+    top: 16px;
+    transform: none;
+  }
+
+  .ecommerce-carousel-upload:hover {
+    transform: translateY(-2px);
+  }
+
+  .ecommerce-carousel-upload:active {
+    transform: translateY(2px);
+  }
+}
+
+.ecommerce-mode-carousel {
+  position: relative;
+  width: min(100%, 760px);
+  padding: 0;
+}
+
+.ecommerce-mode-carousel--hidden {
+  display: none;
+}
+
+.ecommerce-mode-carousel__viewport {
+  width: 100%;
+  overflow: hidden;
+}
+
+.ecommerce-mode-carousel__track {
+  display: flex;
+  width: 100%;
+  transition: transform 560ms cubic-bezier(0.64, 0, 0.32, 1);
+  will-change: transform;
+}
+
+.ecommerce-mode-carousel__track.is-resetting {
+  transition: none;
+}
+
+.ecommerce-mode-carousel__slide {
+  flex: 0 0 33.333333%;
+  height: 126px;
+  padding: 0 7px;
+}
+
+.ecommerce-mode-carousel__slide img {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  object-fit: cover;
+  box-shadow: none;
+}
+
+.ecommerce-mode-carousel__button {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  transform: translateY(-50%);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    color 160ms ease;
+}
+
+.ecommerce-mode-carousel:hover .ecommerce-mode-carousel__button,
+.ecommerce-mode-carousel__button:hover,
+.ecommerce-mode-carousel__button:focus-visible,
+.ecommerce-mode-carousel__button:active {
+  opacity: 1;
+}
+
+.ecommerce-mode-carousel__button:hover {
+  transform: translateY(-50%) scale(1.04);
+  background: transparent;
+  color: var(--accent);
+}
+
+.ecommerce-mode-carousel__button--prev {
+  left: 14px;
+}
+
+.ecommerce-mode-carousel__button--next {
+  right: 14px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ecommerce-mode-carousel__track {
+    transition: none;
+  }
+}
+
+.ecommerce-landing-hero {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.ecommerce-landing-title {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: clamp(28px, 3.4vw, 40px);
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: 0.05em;
+}
+
+.ecommerce-landing-subtitle {
+  max-width: 560px;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  letter-spacing: 0.02em;
+}
+
+.ecommerce-mode-strip {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+  width: 100%;
+}
+
+.ecommerce-composer-shell .ecommerce-mode-strip {
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.ecommerce-mode-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0;
+  flex: 1;
+  min-width: 0;
+  height: 148px;
+  padding: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.ecommerce-mode-chip:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--accent-rgb), 0.55);
+  box-shadow: none;
+}
+
+.ecommerce-mode-chip.is-active {
+  border-color: rgba(var(--accent-rgb), 0.65);
+  box-shadow: none;
+}
+
+.ecommerce-mode-chip__thumb {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.ecommerce-mode-chip__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 500ms ease;
+}
+
+.ecommerce-mode-chip:hover .ecommerce-mode-chip__thumb img {
+  transform: scale(1.06);
+}
+
+.ecommerce-mode-chip__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.62);
+  transition: background 200ms ease;
+}
+
+.ecommerce-mode-chip:hover .ecommerce-mode-chip__overlay {
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.ecommerce-mode-chip.is-active .ecommerce-mode-chip__overlay {
+  background: rgba(0, 0, 0, 0.58);
+}
+
+.ecommerce-mode-chip__content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ecommerce-mode-chip__icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  font-size: 18px;
+  backdrop-filter: none;
+}
+
+.ecommerce-mode-chip.is-active .ecommerce-mode-chip__icon {
+  background: rgba(var(--accent-rgb), 0.35);
+}
+
+.ecommerce-composer-shell {
+  width: 100%;
+  padding: 12px 14px 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.28);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.ecommerce-composer-textarea {
+  width: 100%;
+  min-height: 90px;
+  max-height: 180px;
+  padding: 4px 2px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  letter-spacing: 0.01em;
+}
+
+.ecommerce-composer-textarea::placeholder {
+  color: var(--fg-dim);
+}
+
+.ecommerce-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.ecommerce-composer-hint {
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.ecommerce-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ecommerce-composer-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.ecommerce-composer-tool:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  color: var(--fg-body);
+}
+
+.ecommerce-composer-tool__text {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.ecommerce-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition:
+    transform 170ms ease,
+    filter 170ms ease;
+}
+
+.ecommerce-composer-send:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.06);
+}
+
+.ecommerce-composer-send:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+  filter: none;
+}
+
+/* Results */
+.ecommerce-results {
+  width: 100%;
+  display: grid;
+  gap: 16px;
+}
+
+.ecommerce-results__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-body);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.ecommerce-results__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.ecommerce-result-card {
+  display: grid;
+  gap: 6px;
+  padding: 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.ecommerce-result-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(var(--accent-rgb), 0.28);
+  box-shadow: none;
+}
+
+.ecommerce-result-card__type {
+  justify-self: start;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.ecommerce-result-card__title {
+  color: var(--fg-body);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+.ecommerce-result-card__preview {
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.ecommerce-result-card__time {
+  color: var(--fg-dim);
+  font-size: 11px;
+}
+
+/* Dark theme overrides for ecommerce */
+.web-shell[data-theme="dark"] .ecommerce-landing-page {
+  background: var(--bg-shell);
+}
+
+.web-shell[data-theme="dark"] .ecommerce-composer-shell {
+  background: rgba(12, 17, 15, 0.88);
+  box-shadow: none;
+}
+
+.web-shell[data-theme="dark"] .ecommerce-mode-chip {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.ecommerce-community-divider {
+  width: min(100%, 860px);
+  margin: 0 auto;
+  height: 1px;
+  background: transparent;
+  opacity: 0.6;
+}
+
+.ecommerce-community-content {
+  width: 100%;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 32px 28px 64px;
+  display: grid;
+  gap: 28px;
+}
+
+/* Ecommerce responsive */
+@media (max-width: 900px) {
+  .ecommerce-landing-scroll {
+    gap: 18px;
+    padding: 32px 18px 48px;
+  }
+
+  .ecommerce-mode-carousel {
+    width: min(100%, 680px);
+    padding: 0;
+  }
+
+  .ecommerce-mode-carousel__slide {
+    height: 106px;
+    padding: 0 5px;
+  }
+
+  .ecommerce-mode-carousel__button {
+    width: 30px;
+    height: 30px;
+  }
+
+  .ecommerce-community-content {
+    padding: 18px 18px 48px;
+    gap: 18px;
+  }
+
+  .ecommerce-landing-title {
+    font-size: clamp(24px, 5.2vw, 32px);
+  }
+
+  .ecommerce-landing-subtitle {
+    font-size: 15px;
+  }
+
+  .ecommerce-mode-chip {
+    flex: 1;
+    min-width: 0;
+    height: 118px;
+    padding: 0;
+    font-size: 13px;
+  }
+
+  .ecommerce-mode-chip__icon {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+
+  .ecommerce-composer-shell {
+    padding: 14px;
+  }
+
+  .ecommerce-composer-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .ecommerce-composer-send {
+    width: 100%;
+  }
+
+  .ecommerce-results__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 560px) {
+  .ecommerce-landing-scroll {
+    gap: 14px;
+    padding: 24px 14px 32px;
+  }
+
+  .ecommerce-mode-carousel {
+    padding: 0;
+  }
+
+  .ecommerce-mode-carousel__slide {
+    height: 82px;
+    padding: 0 4px;
+  }
+
+  .ecommerce-mode-carousel__button {
+    width: 26px;
+    height: 26px;
+  }
+
+  .ecommerce-community-content {
+    padding: 14px 14px 32px;
+    gap: 14px;
+  }
+
+  .ecommerce-mode-strip {
+    gap: 6px;
+  }
+
+  .ecommerce-mode-chip {
+    flex: 1;
+    min-width: 0;
+    height: 96px;
+    padding: 0;
+    font-size: 12px;
+  }
+
+  .ecommerce-mode-chip__icon {
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+  }
+}
+
+/* Final pixel overrides for workbench and canvas context menus */
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu,
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu button,
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu kbd {
+  color: #111 !important;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif !important;
+  font-weight: 1000 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .studio-canvas .studio-canvas-context-menu button:disabled {
+  color: #8aa196 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page {
+  background: #f5fff4;
+  background-size: auto;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-title {
+  color: #11251a;
+  font-weight: 1000;
+  text-shadow: 3px 3px 0 #d9f8dd;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-subtitle {
+  color: #557466;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__panel {
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  background-size: auto;
+  box-shadow: 7px 7px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip {
+  color: #11251a;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  box-shadow: 5px 5px 0 #111;
+  transform: translate(2px, 2px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip__icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-mode-chip.is-active .workbench-mode-chip__icon {
+  background: #38d776;
+  color: #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-textarea {
+  color: #11251a;
+  font-weight: 900;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-textarea::placeholder {
+  color: #557466;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-shell {
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-footer {
+  border-top: 2px solid #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-tool,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__resize,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option,
+.web-shell[data-ui-theme="pixel"] .workbench-resolution-grid button,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid input {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  box-shadow: 3px 3px 0 #111;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-tool:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option.is-active,
+.web-shell[data-ui-theme="pixel"] .workbench-resolution-grid button.is-active {
+  border-color: #111;
+  background: #d9f8dd;
+  color: #11251a;
+  box-shadow: 2px 2px 0 #111;
+  transform: translate(1px, 1px);
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send {
+  background: #38d776;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-composer-send:disabled {
+  background: #dce8df;
+  color: #8aa196;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-preferences,
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__scrim {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-preferences__section-label,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid label span,
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid > span {
+  color: #557466;
+  font-weight: 1000;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-ratio-option__icon {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #d9f8dd;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-size-grid input:focus {
+  outline: none;
+  border-color: #111;
+  box-shadow: 4px 4px 0 #111;
+}
+
+/* Final override: remove the green gap above the generate right sidebar */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: var(--workbench-sidebar-top, 137px) !important;
+  right: var(--workbench-sidebar-right, 0) !important;
+  left: var(--workbench-sidebar-left, auto) !important;
+  bottom: 0 !important;
+  z-index: 80 !important;
+  width: 228px !important;
+  min-height: 0 !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  box-shadow: -5px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+}
+
+/* Final override: move sidebar by dragging and center the tilted reference box */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-shell {
+  align-items: center !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card {
+  align-self: center !important;
+  transform: rotate(-5deg) !important;
+  transform-origin: center !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card:hover {
+  transform: rotate(-5deg) translate(1px, 1px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  cursor: move !important;
+  user-select: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar button {
+  cursor: pointer !important;
+}
+
+/* Final fixed generate sidebar and pixel reference controls */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 164px !important;
+  right: 0 !important;
+  left: auto !important;
+  bottom: 0 !important;
+  z-index: 80 !important;
+  width: 315px !important;
+  min-height: 0 !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  box-shadow: -6px 0 0 #111 !important;
+  cursor: default !important;
+  user-select: auto !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__toolbar {
+  display: grid !important;
+  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
+  gap: 12px !important;
+  padding: 20px 14px 18px !important;
+  border-bottom: 3px solid #111 !important;
+  background: #101916 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar__toolbar {
+  grid-template-columns: 1fr !important;
+  padding: 20px 5px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__icon,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new {
+  min-height: 52px !important;
+  border: 2px solid #39443f !important;
+  border-radius: 0 !important;
+  background: #17211e !important;
+  color: #f6fff8 !important;
+  box-shadow: none !important;
+  font-size: 17px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new {
+  gap: 10px !important;
+  font-size: 18px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__icon:hover,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar__new:hover {
+  border-color: #21f29a !important;
+  background: #0f2d23 !important;
+  color: #21f29a !important;
+  transform: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card {
+  align-self: center !important;
+  width: 88px !important;
+  height: 88px !important;
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #10271f !important;
+  background-size: auto !important;
+  color: #21f29a !important;
+  box-shadow:
+    inset 0 0 0 2px #0c7d58,
+    5px 5px 0 #111 !important;
+  transform: rotate(-5deg) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card:hover {
+  transform: rotate(-5deg) translate(1px, 1px) !important;
+  box-shadow:
+    inset 0 0 0 2px #21f29a,
+    4px 4px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card span {
+  color: #21f29a !important;
+  font-size: 13px !important;
+  text-shadow: 1px 1px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card.has-image {
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  box-shadow:
+    inset 0 0 0 2px #fffdf5,
+    5px 5px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-tool {
+  min-width: 176px !important;
+  height: 52px !important;
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  color: #111 !important;
+  box-shadow: 5px 5px 0 #111 !important;
+  gap: 10px !important;
+}
+
+/* Final multi-reference preview row */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-shell {
+  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip {
+  grid-column: 1 !important;
+  grid-row: 1 !important;
+  align-self: center !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  max-width: 230px !important;
+  padding: 4px 8px 8px 4px !important;
+  overflow-x: auto !important;
+  overflow-y: visible !important;
+  scrollbar-width: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip::-webkit-scrollbar {
+  display: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip .workbench-reference-card {
+  flex: 0 0 88px !important;
+  grid-column: auto !important;
+  grid-row: auto !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) {
+  flex-basis: 64px !important;
+  width: 64px !important;
+  height: 64px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) span {
+  display: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) .anticon {
+  font-size: 22px !important;
+}
+
+/* Final requested target layout: sidebar at page split, add-reference card keeps label */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-conversation-sidebar {
+  position: fixed !important;
+  top: 283px !important;
+  right: 0 !important;
+  left: auto !important;
+  bottom: 0 !important;
+  width: 315px !important;
+  border-width: 3px 0 0 3px !important;
+  border-style: solid !important;
+  border-color: #111 !important;
+  border-radius: 0 !important;
+  background: #101916 !important;
+  background-size: auto !important;
+  box-shadow: -6px 0 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: 42px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) {
+  flex-basis: 88px !important;
+  width: 88px !important;
+  height: 88px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) span {
+  display: inline !important;
+  color: #21f29a !important;
+  font-size: 13px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) .anticon {
+  font-size: 20px !important;
+}
+
+/* Final theme-color reference cards inside the composer */
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card {
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #ddf5e2 !important;
+  background-size: auto !important;
+  color: #0f5f3f !important;
+  box-shadow:
+    inset 0 0 0 2px #21f29a,
+    5px 5px 0 #111 !important;
+  transform: rotate(-5deg) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card:hover {
+  background: #c8f4d6 !important;
+  color: #0a4f33 !important;
+  box-shadow:
+    inset 0 0 0 2px #14c976,
+    4px 4px 0 #111 !important;
+  transform: rotate(-5deg) translate(1px, 1px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card span,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) span {
+  color: #0f5f3f !important;
+  text-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card .anticon,
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-strip.has-images .workbench-reference-card:not(.has-image) .anticon {
+  color: #0f5f3f !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .workbench-landing-page .workbench-reference-card.has-image {
+  background: #fffdf5 !important;
+  box-shadow:
+    inset 0 0 0 2px #ddf5e2,
+    5px 5px 0 #111 !important;
+}
+
+/* Ecommerce composer copied from generate page dialog */
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-shell {
+  display: grid !important;
+  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
+  column-gap: 14px !important;
+  align-items: start !important;
+  width: 100% !important;
+  padding: 16px !important;
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fffdf5 !important;
+  background-size: auto !important;
+  box-shadow: 7px 7px 0 #111 !important;
+  backdrop-filter: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-strip {
+  grid-column: 1 !important;
+  grid-row: 1 !important;
+  align-self: center !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  max-width: 230px !important;
+  padding: 4px 8px 8px 4px !important;
+  overflow-x: auto !important;
+  overflow-y: visible !important;
+  scrollbar-width: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-strip::-webkit-scrollbar {
+  display: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card {
+  flex: 0 0 88px !important;
+  display: grid !important;
+  place-items: center !important;
+  gap: 6px !important;
+  width: 88px !important;
+  height: 88px !important;
+  padding: 8px !important;
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #ddf5e2 !important;
+  background-size: auto !important;
+  color: #0f5f3f !important;
+  box-shadow:
+    inset 0 0 0 2px #21f29a,
+    5px 5px 0 #111 !important;
+  transform: rotate(-5deg) !important;
+  cursor: pointer !important;
+  overflow: hidden !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card:hover {
+  background: #c8f4d6 !important;
+  color: #0a4f33 !important;
+  box-shadow:
+    inset 0 0 0 2px #14c976,
+    4px 4px 0 #111 !important;
+  transform: rotate(-5deg) translate(1px, 1px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card span,
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card .anticon {
+  color: #0f5f3f !important;
+  font-size: 13px !important;
+  font-weight: 1000 !important;
+  text-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card.has-image {
+  background: #fffdf5 !important;
+  box-shadow:
+    inset 0 0 0 2px #ddf5e2,
+    5px 5px 0 #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-card img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+  border: 0 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-strip.has-images .ecommerce-reference-card:not(.has-image) {
+  flex-basis: 88px !important;
+  width: 88px !important;
+  height: 88px !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-reference-strip.has-images .ecommerce-reference-card:not(.has-image) span {
+  display: inline !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-textarea {
+  grid-column: 2 !important;
+  grid-row: 1 !important;
+  min-height: 110px !important;
+  max-height: 220px !important;
+  padding: 4px 2px !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: #11251a !important;
+  font-size: 15px !important;
+  font-weight: 900 !important;
+  line-height: 1.7 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-footer {
+  grid-column: 1 / -1 !important;
+  grid-row: 2 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 14px !important;
+  margin-top: 10px !important;
+  padding-top: 12px !important;
+  border-top: 2px solid #111 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-tool,
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-send {
+  border: 2px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  color: #11251a !important;
+  box-shadow: 3px 3px 0 #111 !important;
+  font-weight: 1000 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-generation-trigger {
+  min-width: 132px !important;
+  background: #fff !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-tool:hover,
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-send:hover {
+  border-color: #111 !important;
+  background: #d9f8dd !important;
+  color: #11251a !important;
+  box-shadow: 2px 2px 0 #111 !important;
+  transform: translate(1px, 1px) !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-send {
+  background: #38d776 !important;
+}
+
+.web-shell[data-ui-theme="pixel"] .ecommerce-landing-page .ecommerce-composer-send:disabled {
+  background: #dce8df !important;
+  color: #8aa196 !important;
+  box-shadow: 3px 3px 0 #111 !important;
+  transform: none !important;
+  filter: none !important;
+}
+
+/* Generate page: keep the conversation sidebar logically attached to the composer */
+.web-shell .workbench-landing-page .workbench-composer-stage {
+  display: grid !important;
+  grid-template-columns: minmax(360px, 760px) var(--workbench-sidebar-width, 315px) !important;
+  align-items: start !important;
+  gap: 16px !important;
+  width: 100% !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr) var(--workbench-sidebar-collapsed-width, 42px) !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-shell {
+  grid-column: 1 !important;
+  min-width: 0 !important;
+}
+
+.web-shell .workbench-landing-page .workbench-conversation-sidebar {
+  position: sticky !important;
+  top: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  left: auto !important;
+  grid-column: 2 !important;
+  align-self: start !important;
+  justify-self: stretch !important;
+  width: var(--workbench-sidebar-width, 315px) !important;
+  max-height: calc(100vh - 36px) !important;
+  overflow: auto !important;
+  margin: 0 !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed .workbench-conversation-sidebar {
+  width: var(--workbench-sidebar-collapsed-width, 42px) !important;
+}
+
+@media (max-width: 980px) {
+  .web-shell .workbench-landing-page .workbench-composer-stage,
+  .web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .web-shell .workbench-landing-page .workbench-conversation-sidebar {
+    position: relative !important;
+    top: auto !important;
+    grid-column: 1 !important;
+    width: 100% !important;
+    max-height: none !important;
+  }
+}
+
+/* Generate page: right-edge, top-flush conversation sidebar */
+.web-shell .workbench-landing-page .workbench-landing-scroll {
+  width: 100% !important;
+  padding-right: 0 !important;
+  padding-left: max(128px, 7vw) !important;
+}
+
+.web-shell .workbench-landing-page .workbench-landing-hero,
+.web-shell .workbench-landing-page .workbench-mode-strip {
+  width: min(860px, calc(100% - var(--workbench-sidebar-width, 315px) - 36px)) !important;
+  justify-self: start !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-stage {
+  grid-template-columns: minmax(420px, 860px) var(--workbench-sidebar-width, 315px) !important;
+  justify-content: end !important;
+  gap: 18px !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed {
+  grid-template-columns: minmax(420px, 860px) var(--workbench-sidebar-collapsed-width, 42px) !important;
+}
+
+.web-shell .workbench-landing-page .workbench-conversation-sidebar {
+  top: 0 !important;
+  justify-self: end !important;
+  max-height: 100vh !important;
+  border-right: 0 !important;
+  box-shadow: -6px 0 0 #111 !important;
+}
+
+@media (max-width: 980px) {
+  .web-shell .workbench-landing-page .workbench-landing-scroll {
+    padding-right: 18px !important;
+    padding-left: 18px !important;
+  }
+
+  .web-shell .workbench-landing-page .workbench-landing-hero,
+  .web-shell .workbench-landing-page .workbench-mode-strip {
+    width: 100% !important;
+    justify-self: center !important;
+  }
+
+  .web-shell .workbench-landing-page .workbench-composer-stage,
+  .web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}
+
+/* Generate page: sidebar removed, recenter the full page */
+.web-shell .workbench-landing-page .workbench-landing-scroll {
+  width: min(100%, 940px) !important;
+  margin: 0 auto !important;
+  padding: 48px 28px 64px !important;
+  justify-items: center !important;
+}
+
+.web-shell .workbench-landing-page .workbench-landing-hero,
+.web-shell .workbench-landing-page .workbench-mode-strip {
+  width: 100% !important;
+  justify-self: center !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-stage,
+.web-shell .workbench-landing-page .workbench-composer-stage.is-sidebar-collapsed {
+  display: block !important;
+  width: min(100%, 860px) !important;
+  justify-self: center !important;
+}
+
+.web-shell .workbench-landing-page .workbench-composer-shell {
+  width: 100% !important;
+  grid-column: auto !important;
+}
+
+.web-shell .workbench-landing-page .workbench-conversation-sidebar {
+  display: none !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   8-BIT PIXEL WORKBENCH — Comprehensive styles for WorkbenchPage (web3)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Page Container ─── */
+.ai-workbench-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #fffdf5;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.ai-workbench-page.is-launch {
+  overflow-y: auto;
+}
+
+.ai-workbench-page.is-active {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ai-workbench-page.mode-chat {
+  --wb-accent: #6be7ff;
+  --wb-accent-rgb: 107, 231, 255;
+}
+
+.ai-workbench-page.mode-image {
+  --wb-accent: #00b1cc;
+  --wb-accent-rgb: 0, 177, 204;
+}
+
+.ai-workbench-page.mode-video {
+  --wb-accent: #2197ff;
+  --wb-accent-rgb: 33, 151, 255;
+}
+
+/* ─── Shell / Main / Scroll ─── */
+.ai-workbench-shell {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ai-workbench-main {
+  display: grid;
+  grid-template-rows: 1fr;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ai-workbench-page.is-active .ai-workbench-main {
+  grid-template-rows: 1fr auto;
+}
+
+.ai-workbench-content-scroll {
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 900px);
+  min-height: 0;
+  margin: 0 auto;
+  padding: 24px 20px 16px;
+  overflow-y: auto;
+}
+
+.ai-workbench-thread-shell {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Home / Landing ─── */
+.wb-home {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 28px;
+  width: min(100%, 860px);
+  margin: 0 auto;
+  padding: 56px 24px 48px;
+}
+
+.wb-home__glow {
+  position: absolute;
+  top: -60px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 320px;
+  height: 180px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.wb-home__hero {
+  text-align: center;
+}
+
+.wb-home__title {
+  margin: 0;
+  font-size: clamp(28px, 4vw, 42px);
+  font-weight: 1000;
+  color: #11251a;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.wb-home__composer {
+  width: 100%;
+  max-width: 720px;
+}
+
+.wb-home__suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 720px;
+}
+
+.wb-home__showcase {
+  width: 100%;
+  max-width: 860px;
+  margin-top: 16px;
+}
+
+/* ─── Suggestion Chips ─── */
+.wb-suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-suggestion-chip:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.wb-suggestion-chip__icon {
+  display: inline-flex;
+  color: #38d776;
+  font-size: 14px;
+}
+
+/* ─── Showcase Grid ─── */
+.wb-showcase__header {
+  margin-bottom: 16px;
+}
+
+.wb-showcase__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 1000;
+  color: #11251a;
+}
+
+.wb-showcase__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.wb-showcase__card {
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  overflow: hidden;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-showcase__card:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.wb-showcase__thumb {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border-bottom: 2px solid #111;
+}
+
+.wb-showcase__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wb-showcase__tag {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 8px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.wb-showcase__play {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #e60012;
+  font-size: 14px;
+}
+
+.wb-showcase__meta {
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wb-showcase__meta strong {
+  font-size: 13px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.wb-showcase__meta span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+}
+
+/* ─── Composer (shared between home + active) ─── */
+.wb-composer {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  width: min(100%, 900px);
+  margin: 0 auto;
+  padding: 12px 0 16px;
+  background: #fffdf5;
+}
+
+.wb-composer.is-hidden {
+  display: none;
+}
+
+.wb-composer__content {
+  position: relative;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.wb-chat-scroll-actions {
+  position: fixed;
+  z-index: 25;
+  left: 30px;
+  top: calc(50% + 265px);
+  display: grid;
+  gap: 7px;
+  pointer-events: auto;
+}
+
+.wb-chat-scroll-actions__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 58px;
+  height: 38px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  color: #557466;
+  box-shadow: 4px 4px 0 #111;
+  font-size: 18px;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.wb-chat-scroll-actions__button:hover {
+  background: #ddf5e2;
+  color: #20c76a;
+  box-shadow: 2px 2px 0 #111;
+  transform: translate(2px, 2px);
+}
+
+.wb-composer__input-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.wb-composer__main {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.wb-composer__textarea {
+  display: block;
+  width: 100%;
+  min-height: 56px;
+  max-height: 180px;
+  padding: 14px 64px 18px 16px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #11251a;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
+
+.wb-composer__textarea:focus,
+.wb-composer__textarea:focus-visible {
+  outline: none !important;
+}
+
+.wb-composer__textarea::placeholder {
+  color: #557466;
+  font-weight: 700;
+  opacity: 0.7;
+}
+
+.wb-composer__textarea--overlay-mode {
+  color: transparent;
+  caret-color: #11251a;
+}
+
+/* ─── Composer Toolbar ─── */
+.wb-composer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 2px solid #eee;
+}
+
+.wb-composer__toolbar-right {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 24;
+}
+
+.wb-composer__toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.wb-composer__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wb-composer__send-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-composer__send-primary:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.wb-composer__send-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.wb-composer__send-primary.is-loading {
+  cursor: wait;
+  animation: send-pulse 1s ease infinite;
+}
+
+@keyframes send-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+.wb-composer__send-primary.is-stop {
+  background: #e60012;
+  color: #fff;
+}
+
+.wb-composer__mention {
+  position: relative;
+}
+
+.wb-composer__mention-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-composer__mention-button:hover,
+.wb-composer__mention-button.is-open {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+/* ─── Composer Mention Inline Chip (keep border-radius for image previews) ─── */
+.wb-composer__mention-inline-chip {
+  position: relative;
+  display: inline;
+  vertical-align: baseline;
+  border-radius: 4px;
+  background: rgba(56, 215, 118, 0.1);
+  box-shadow: inset 0 0 0 1.5px #38d776;
+  color: #11251a;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  cursor: default;
+  pointer-events: auto;
+}
+
+.wb-composer__mention-inline-measure {
+  visibility: hidden;
+  white-space: pre;
+  font-size: inherit;
+}
+
+.wb-composer__mention-inline-media {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 3px;
+}
+
+.wb-composer__mention-inline-media img,
+.wb-composer__mention-inline-media video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─── Composer Highlight Layer ─── */
+.wb-composer__highlight {
+  position: absolute;
+  inset: 0;
+  padding: 14px 64px 18px 16px;
+  pointer-events: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.5;
+  color: #11251a;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+.wb-composer__highlight::-webkit-scrollbar {
+  display: none;
+}
+
+/* ─── Composer References ─── */
+.wb-composer__refs {
+  position: relative;
+}
+
+.wb-composer__refs .wb-composer__ref-stack {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px;
+  border: 3px solid #111;
+  background: #fffdf5;
+  box-shadow: 4px 4px 0 #111;
+  z-index: 20;
+}
+
+.wb-composer__ref-upload {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff8e7;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-composer__ref-upload:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.wb-composer__ref-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #38d776;
+  font-size: 14px;
+}
+
+.wb-composer__ref-label {
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.wb-composer__ref-count {
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+  margin-left: 4px;
+}
+
+.wb-composer__ref-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.wb-composer__ref-card {
+  position: relative;
+  display: block;
+  width: 64px;
+  height: 64px;
+}
+
+.wb-composer__ref-preview {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  border: 2px solid #111;
+  border-radius: 0;
+  overflow: hidden;
+  background: #f5fff4;
+}
+
+.wb-composer__ref-preview img,
+.wb-composer__ref-preview video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wb-composer__ref-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #e60012;
+  color: #fff;
+  font-size: 9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 0 #111;
+}
+
+.wb-composer__ref-add-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border: 2px dashed #557466;
+  border-radius: 0;
+  background: #f5fff4;
+  color: #557466;
+  font-size: 20px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.wb-composer__ref-add-more:hover {
+  border-color: #38d776;
+  background: #ddf5e2;
+  color: #38d776;
+}
+
+/* ─── Mode Switch (Agent/Image/Video) ─── */
+.ai-workbench-mode-switch {
+  position: relative;
+  display: inline-flex;
+}
+
+.ai-workbench-mode-switch__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.ai-workbench-mode-switch__button:hover,
+.ai-workbench-mode-switch__button.is-open {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.ai-workbench-mode-switch__caret {
+  font-size: 10px;
+  color: #557466;
+}
+
+.ai-workbench-mode-switch__menu {
+  display: none;
+  position: absolute;
+  left: 0;
+  z-index: 100;
+  min-width: 200px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  padding: 6px 0;
+}
+
+.ai-workbench-mode-switch__menu--above {
+  bottom: calc(100% + 8px);
+}
+
+.ai-workbench-mode-switch__menu--below {
+  top: calc(100% + 8px);
+}
+
+.ai-workbench-mode-switch__menu.is-open {
+  display: block;
+}
+
+.ai-workbench-mode-switch__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ai-workbench-mode-switch__item:hover {
+  background: #ddf5e2;
+}
+
+.ai-workbench-mode-switch__item.is-active {
+  background: rgba(56, 215, 118, 0.18);
+  color: #11251a;
+}
+
+.ai-workbench-mode-switch__item-icon {
+  display: inline-flex;
+  color: #38d776;
+  font-size: 16px;
+}
+
+/* ─── Select Chip (model/settings dropdowns) ─── */
+.ai-workbench-select-chip {
+  position: relative;
+  display: inline-flex;
+}
+
+.ai-workbench-select-chip.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ai-workbench-select-chip__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.ai-workbench-select-chip__trigger:hover,
+.ai-workbench-select-chip.is-open .ai-workbench-select-chip__trigger {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.ai-workbench-select-chip__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ai-workbench-select-chip__value {
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.ai-workbench-select-chip__arrow {
+  font-size: 9px;
+  color: #557466;
+}
+
+.ai-workbench-select-chip__dropdown {
+  display: none;
+  position: absolute;
+  left: 0;
+  z-index: 120;
+  min-width: 220px;
+  max-height: 320px;
+  overflow-y: auto;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  padding: 6px 0;
+}
+
+.ai-workbench-select-chip__dropdown--above {
+  bottom: calc(100% + 8px);
+}
+
+.ai-workbench-select-chip__dropdown--below {
+  top: calc(100% + 8px);
+}
+
+.ai-workbench-select-chip__dropdown--compound {
+  min-width: 320px;
+  padding: 12px;
+}
+
+#video-ratio-panel.ai-workbench-select-chip__dropdown--compound {
+  width: max-content;
+  min-width: 0;
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel {
+  gap: 0;
+  padding: 0;
+  background: transparent;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__field--ratio {
+  gap: 0;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__field--ratio .ai-workbench-settings-panel__head {
+  display: none;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__grid--ratio {
+  grid-template-columns: repeat(3, 88px);
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid rgba(56, 215, 118, 0.24);
+  border-radius: 16px;
+  background: #171b1d;
+}
+
+.ai-workbench-select-chip__dropdown.is-open {
+  display: block;
+}
+
+.ai-workbench-select-chip__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ai-workbench-select-chip__option:hover {
+  background: #ddf5e2;
+}
+
+.ai-workbench-select-chip__option.is-active {
+  background: rgba(56, 215, 118, 0.18);
+}
+
+.ai-workbench-select-chip__option-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+}
+
+.ai-workbench-select-chip__option-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-top: 4px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  flex-shrink: 0;
+}
+
+.ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-dot {
+  background: #e60012;
+}
+
+.ai-workbench-select-chip__option-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ai-workbench-select-chip__option-title {
+  font-size: 12px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.ai-workbench-select-chip__option-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 5px;
+  border: 1.5px solid #e60012;
+  border-radius: 0;
+  background: #e60012;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 900;
+  vertical-align: middle;
+}
+
+.ai-workbench-select-chip__option-desc {
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+  line-height: 1.3;
+}
+
+/* ─── Select Chip: Compound variant ─── */
+.ai-workbench-select-chip--compound .ai-workbench-select-chip__trigger {
+  gap: 8px;
+}
+
+.ai-workbench-select-chip--model .ai-workbench-select-chip__trigger {
+  background: #fff8e7;
+}
+
+/* ─── Settings Panel (inside compound dropdown) ─── */
+.ai-workbench-settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ai-workbench-settings-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ai-workbench-settings-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ai-workbench-settings-panel__title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ai-workbench-settings-panel__title-icon {
+  display: inline-flex;
+  color: #38d776;
+  font-size: 14px;
+}
+
+.ai-workbench-settings-panel__title-copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-workbench-settings-panel__title {
+  font-size: 12px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.ai-workbench-settings-panel__current {
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+}
+
+/* Settings Grid */
+.ai-workbench-settings-panel__grid {
+  display: grid;
+  gap: 6px;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.ai-workbench-settings-panel__grid--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.ai-workbench-settings-panel__grid--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.ai-workbench-settings-panel__grid--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.ai-workbench-settings-panel__grid--pill {
+  gap: 6px;
+}
+
+.ai-workbench-settings-panel__grid--ratio {
+  gap: 8px;
+}
+
+.ai-workbench-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Settings Option (pill) */
+.ai-workbench-settings-panel__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.ai-workbench-settings-panel__option:hover {
+  background: #ddf5e2;
+}
+
+.ai-workbench-settings-panel__option.is-active {
+  background: #38d776;
+  color: #111;
+  box-shadow: 1px 1px 0 #111;
+  transform: translate(1px, 1px);
+}
+
+.ai-workbench-settings-panel__option--pill {
+  padding: 5px 12px;
+}
+
+.ai-workbench-settings-panel__option--ratio {
+  padding: 8px;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__option--ratio {
+  width: 88px;
+  height: 64px;
+  padding: 8px 10px;
+  border: 1px solid #293235;
+  border-radius: 11px;
+  background: #111518;
+  color: rgba(238, 246, 240, 0.7);
+  box-shadow: none;
+  transform: none;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__option--ratio:hover {
+  border-color: rgba(0, 255, 136, 0.45);
+  background: #1d2427;
+  transform: none;
+}
+
+#video-ratio-panel .ai-workbench-settings-panel__option--ratio.is-active {
+  border-color: #00ff88;
+  background: rgba(0, 255, 136, 0.14);
+  color: #00ff88;
+  box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.2);
+  transform: none;
+}
+
+/* ─── Ratio Option ─── */
+.ai-workbench-ratio-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.ai-workbench-ratio-option__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #f5fff4;
+}
+
+.ai-workbench-ratio-option__preview--21-9 {
+  width: 42px;
+  height: 18px;
+}
+
+.ai-workbench-ratio-option__preview--16-9 {
+  width: 36px;
+  height: 20px;
+}
+
+.ai-workbench-ratio-option__preview--4-3 {
+  width: 28px;
+  height: 21px;
+}
+
+.ai-workbench-ratio-option__preview--1-1 {
+  width: 24px;
+  height: 24px;
+}
+
+.ai-workbench-ratio-option__preview--3-4 {
+  width: 21px;
+  height: 28px;
+}
+
+.ai-workbench-ratio-option__preview--9-16 {
+  width: 18px;
+  height: 32px;
+}
+
+.ai-workbench-ratio-option__frame {
+  display: block;
+  width: 60%;
+  height: 60%;
+  border: 1.5px solid #38d776;
+  border-radius: 0;
+}
+
+.ai-workbench-ratio-option__label {
+  font-size: 10px;
+  font-weight: 800;
+  color: #11251a;
+}
+
+#video-ratio-panel .ai-workbench-ratio-option {
+  gap: 6px;
+}
+
+#video-ratio-panel .ai-workbench-ratio-option__preview {
+  border: 1px solid #00ff88;
+  border-radius: 2px;
+  background: transparent;
+}
+
+#video-ratio-panel .ai-workbench-ratio-option__frame {
+  border: 1px solid #00ff88;
+  border-radius: 1px;
+}
+
+#video-ratio-panel .ai-workbench-ratio-option__label {
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+/* ─── Inline Chip (toolbar sub-menus) ─── */
+.wb-inline-chip {
+  position: relative;
+  display: inline-flex;
+}
+
+.wb-inline-chip.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.wb-inline-chip__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.wb-inline-chip__trigger:hover,
+.wb-inline-chip.is-open .wb-inline-chip__trigger {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.wb-inline-chip__icon {
+  display: inline-flex;
+  color: #38d776;
+  font-size: 13px;
+}
+
+.wb-inline-chip__menu {
+  display: none;
+  position: absolute;
+  left: 0;
+  z-index: 110;
+  min-width: 140px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 3px 3px 0 #111;
+  padding: 4px 0;
+}
+
+.wb-inline-chip__menu--above {
+  bottom: calc(100% + 6px);
+}
+
+.wb-inline-chip__menu--below {
+  top: calc(100% + 6px);
+}
+
+.wb-inline-chip.is-open .wb-inline-chip__menu {
+  display: block;
+}
+
+.wb-inline-chip__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 7px 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  text-align: left;
+}
+
+.wb-inline-chip__option:hover {
+  background: #ddf5e2;
+}
+
+.wb-inline-chip__option.is-active {
+  background: rgba(56, 215, 118, 0.18);
+}
+
+.wb-inline-chip__check {
+  color: #38d776;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+/* ─── Chat Main Panel ─── */
+.ai-chat-main-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-chat-messages-surface {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 0;
+}
+
+.ai-chat-message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ─── Chat Message Row ─── */
+.ai-chat-message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.ai-chat-message-row.is-user {
+  flex-direction: row-reverse;
+}
+
+/* ─── Chat Avatar ─── */
+.ai-chat-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  font-size: 12px;
+  font-weight: 1000;
+  box-shadow: 2px 2px 0 #111;
+}
+
+.ai-chat-avatar--user {
+  background: #fff8e7;
+  color: #11251a;
+}
+
+/* ─── Chat Message Stack ─── */
+.ai-chat-message-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 75%;
+  min-width: 0;
+}
+
+.ai-chat-message-row.is-user .ai-chat-message-stack {
+  align-items: flex-end;
+}
+
+.ai-chat-message-author {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+}
+
+.ai-chat-message-bubble {
+  padding: 12px 16px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.6;
+  box-shadow: 3px 3px 0 #111;
+  word-break: break-word;
+}
+
+.ai-chat-message-bubble--user {
+  background: #fff8e7;
+  border-color: #111;
+}
+
+.ai-chat-message-bubble--assistant {
+  max-width: min(760px, 100%);
+}
+
+.ai-chat-message-bubble.is-thinking {
+  opacity: 0.8;
+  border-style: dashed;
+}
+
+.ai-chat-message-bubble:has(.ai-chat-image-result-card) {
+  width: min(440px, 100%);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  line-height: 1.4;
+}
+
+.ai-chat-message-prompt {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* ─── Chat Progress ─── */
+.ai-chat-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0 4px;
+  font-size: 12px;
+  font-weight: 800;
+  color: #557466;
+  position: relative;
+}
+
+.ai-chat-progress span {
+  flex: 1;
+}
+
+.ai-chat-progress strong {
+  color: #38d776;
+  font-weight: 1000;
+}
+
+.ai-chat-progress i {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: #38d776;
+  border-radius: 0;
+  font-style: normal;
+  transition: width 0.3s;
+}
+
+/* ─── Chat Attachment Row ─── */
+.ai-chat-attachment-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+/* ─── Chat Attachment Thumb ─── */
+.ai-chat-attachment-thumb {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 56px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.ai-chat-attachment-thumb.is-file {
+  cursor: default;
+}
+
+.ai-chat-attachment-thumb__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 2px solid #111;
+  border-radius: 0;
+  overflow: hidden;
+  background: #f5fff4;
+}
+
+.ai-chat-attachment-thumb__media img,
+.ai-chat-attachment-thumb__media video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-chat-attachment-thumb__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #557466;
+  font-size: 18px;
+}
+
+.ai-chat-attachment-thumb__label {
+  font-size: 9px;
+  font-weight: 800;
+  color: #38d776;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Chat Chip (model/mode tags) ─── */
+.ai-chat-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1.5px solid #111;
+  border-radius: 0;
+  background: #ddf5e2;
+  color: #11251a;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+/* ─── Image Result Card ─── */
+.ai-chat-image-result-card {
+  display: flex;
+  flex-direction: column;
+  width: min(560px, 100%);
+  max-width: 100%;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 3px 3px 0 #111;
+  overflow: hidden;
+}
+
+.ai-chat-image-result-card.is-video {
+  border-color: #2197ff;
+}
+
+.result-card-enter {
+  animation: pixel-fade-in 0.25s ease-out;
+}
+
+@keyframes pixel-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ─── Image Frame ─── */
+.ai-chat-image-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--media-ratio, auto);
+  overflow: hidden;
+  border-bottom: 2px solid #111;
+  background: #f5fff4;
+}
+
+.ai-chat-image-frame--video {
+  aspect-ratio: 16 / 9;
+  border-bottom-color: #2197ff;
+}
+
+.ai-chat-image-frame img,
+.ai-chat-image-frame video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-chat-image-preview-button {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: #f5fff4;
+  cursor: pointer;
+}
+
+.ai-chat-image-preview-button img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: min(38vh, 360px);
+  object-fit: contain;
+}
+
+/* ─── Video Poster ─── */
+.ai-chat-video-poster {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: #111;
+  cursor: pointer;
+}
+
+.ai-chat-video-poster video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-chat-video-poster__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(17, 17, 17, 0.25);
+  pointer-events: none;
+}
+
+.ai-chat-video-poster__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #e60012;
+  font-size: 20px;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.ai-chat-video-poster__duration {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+/* ─── Image Result Meta ─── */
+.ai-chat-image-result-meta {
+  padding: 10px 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ai-chat-image-result-meta__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ai-chat-image-result-meta__top strong {
+  font-size: 12px;
+  font-weight: 1000;
+  color: #11251a;
+}
+
+.ai-chat-image-result-meta__top span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+}
+
+.ai-chat-image-result-meta__prompt {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 700;
+  color: #557466;
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ai-chat-image-result-meta__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* ─── Image Result Progress (super-resolution) ─── */
+.ai-chat-image-result-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  font-size: 11px;
+  font-weight: 800;
+  color: #557466;
+  position: relative;
+}
+
+.ai-chat-image-result-progress span {
+  flex: 1;
+}
+
+.ai-chat-image-result-progress strong {
+  color: #38d776;
+  font-weight: 1000;
+}
+
+.ai-chat-image-result-progress i {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  background: #2197ff;
+  border-radius: 0;
+  font-style: normal;
+  transition: width 0.3s;
+}
+
+/* ─── Image Actions ─── */
+.ai-chat-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  border-top: 2px solid #eee;
+}
+
+.ai-chat-image-actions__primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 9px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  font-size: 11px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.ai-chat-image-actions__primary:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.ai-chat-image-actions__spacer {
+  flex: 1;
+}
+
+.ai-chat-image-actions__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.ai-chat-image-actions__icon:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.ai-chat-image-actions__icon:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.ai-chat-image-actions__icon--super-resolution {
+  color: #2197ff;
+}
+
+/* ─── Generation Pending Card ─── */
+.ai-generation-pending-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(340px, 100%);
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  overflow: hidden;
+  margin-top: 8px;
+}
+
+.ai-generation-pending-card.is-video {
+  border-color: #2197ff;
+}
+
+.ai-generation-pending-card.is-image {
+  border-color: #00b1cc;
+}
+
+.ai-generation-pending-card__stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  background: #f5fff4;
+  overflow: hidden;
+}
+
+.ai-generation-pending-card__grid {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+}
+
+.ai-generation-pending-card__glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  background: transparent;
+}
+
+.ai-generation-pending-card__loader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+}
+
+.ai-generation-pending-card__loader strong {
+  font-size: 14px;
+  font-weight: 1000;
+  color: #38d776;
+}
+
+.ai-generation-pending-card__ring {
+  position: absolute;
+  inset: 0;
+  border: 3px solid #ddf5e2;
+  border-top-color: #38d776;
+  border-radius: 0;
+  animation: pixel-spin 1s linear infinite;
+}
+
+@keyframes pixel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ai-generation-pending-card__percent {
+  position: relative;
+  z-index: 1;
+  color: #38d776;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  text-shadow: 0 0 6px rgba(56, 215, 118, 0.3);
+}
+
+.ai-generation-pending-card__scan {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: transparent;
+  animation: pixel-scan 2s ease-in-out infinite;
+}
+
+@keyframes pixel-scan {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(117px);
+  }
+}
+
+.ai-generation-pending-card__meta {
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ai-generation-pending-card__meta strong {
+  font-size: 13px;
+  font-weight: 1000;
+  color: #11251a;
+}
+
+.ai-generation-pending-card__meta span {
+  font-size: 12px;
+  font-weight: 700;
+  color: #557466;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ai-generation-pending-card__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ai-generation-pending-card__chips span {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1.5px solid #111;
+  border-radius: 0;
+  background: #ddf5e2;
+  color: #11251a;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.ai-generation-pending-card__bar {
+  display: block;
+  height: 4px;
+  background: #38d776;
+  border-radius: 0;
+  font-style: normal;
+  transition: width 0.4s;
+}
+
+.ai-generation-pending-card.is-video .ai-generation-pending-card__bar {
+  background: #2197ff;
+}
+
+/* ─── Mention Panel ─── */
+.ai-chat-mention-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 130;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.ai-chat-mention-panel--above {
+  bottom: calc(100% + 6px);
+}
+
+.ai-chat-mention-panel--below {
+  top: calc(100% + 6px);
+}
+
+.ai-chat-mention-header {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 900;
+  color: #557466;
+  border-bottom: 2px solid #eee;
+}
+
+.ai-chat-mention-section {
+  padding: 6px 12px 2px;
+  font-size: 10px;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #999;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 2px;
+}
+
+.ai-chat-mention-list .ai-chat-mention-item:first-child + .ai-chat-mention-section,
+.ai-chat-mention-section:first-child {
+  border-top: 0;
+  margin-top: 0;
+}
+
+/* === Failed Task Actions === */
+.ai-chat-failed-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.ai-chat-failed-actions__retry,
+.ai-chat-failed-actions__switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border: 1px solid var(--border-weak, #e0e0e0);
+  border-radius: 6px;
+  background: var(--bg-surface, #fff);
+  font-size: 12px;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.ai-chat-failed-actions__retry:hover {
+  border-color: var(--accent, #0d9488);
+  color: var(--accent, #0d9488);
+  background: var(--accent-subtle, rgba(13, 148, 136, 0.06));
+}
+
+.ai-chat-failed-actions__switch:hover {
+  border-color: var(--accent, #0d9488);
+  color: var(--accent, #0d9488);
+  background: var(--accent-subtle, rgba(13, 148, 136, 0.06));
+}
+
+/* === Expired Media Recovery === */
+.ai-chat-image-frame.is-expired {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--bg-surface, #f9f9f9);
+  border: 1px dashed var(--border-weak, #e0e0e0);
+  border-radius: 10px;
+}
+
+.ai-chat-media-expired {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+  color: var(--text-tertiary, #999);
+  font-size: 13px;
+}
+
+.ai-chat-media-expired button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border: 1px solid var(--accent, #0d9488);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--accent, #0d9488);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.ai-chat-media-expired button:hover {
+  background: var(--accent-subtle, rgba(13, 148, 136, 0.06));
+}
+
+/* === Canvas Node Toolbar === */
+.studio-canvas-node-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: absolute;
+  top: -36px;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  pointer-events: auto;
+}
+
+.studio-canvas-node-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 7px;
+  background: rgba(18, 18, 18, 0.88);
+  backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.studio-canvas-node-toolbar__btn:hover:not(:disabled) {
+  background: rgba(30, 30, 30, 0.95);
+  border-color: rgba(255, 255, 255, 0.25);
+  color: #fff;
+}
+
+.studio-canvas-node-toolbar__btn:disabled,
+.studio-canvas-node-toolbar__btn.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.studio-canvas-node-toolbar__btn.is-loading {
+  opacity: 0.7;
+  cursor: wait;
+  position: relative;
+}
+
+.studio-canvas-node-toolbar__btn.is-loading::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
+  background-size: 200% 100%;
+  animation: toolbar-shimmer 1.2s ease infinite;
+}
+
+@keyframes toolbar-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.studio-canvas-node-toolbar__more {
+  position: relative;
+}
+
+.studio-canvas-node-toolbar__more-trigger.is-open {
+  background: rgba(30, 30, 30, 0.95);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.studio-canvas-node-toolbar__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 140px;
+  padding: 4px 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: rgba(18, 18, 18, 0.95);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 30;
+}
+
+.studio-canvas-node-toolbar__dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+}
+
+.studio-canvas-node-toolbar__dropdown-item:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.studio-canvas-node-toolbar__dropdown-item:disabled,
+.studio-canvas-node-toolbar__dropdown-item.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* === Canvas Marking Popover & Camera Motion Dropdown === */
+.studio-canvas-marking-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 25;
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  background: rgba(18, 18, 18, 0.95);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.studio-canvas-marking-input {
+  width: 100%;
+  min-height: 60px;
+  max-height: 120px;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  font-family: inherit;
+}
+
+.studio-canvas-marking-input:focus {
+  border-color: rgba(45, 212, 191, 0.5);
+}
+
+.studio-canvas-marking-input::placeholder {
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.studio-canvas-marking-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.studio-canvas-marking-clear,
+.studio-canvas-marking-done {
+  padding: 4px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 5px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.studio-canvas-marking-clear:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.studio-canvas-marking-done {
+  background: rgba(45, 212, 191, 0.15);
+  border-color: rgba(45, 212, 191, 0.3);
+  color: #2dd4bf;
+}
+
+.studio-canvas-marking-done:hover {
+  background: rgba(45, 212, 191, 0.25);
+}
+
+.studio-canvas-camera-dropdown {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  min-width: 120px;
+  padding: 4px 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: rgba(18, 18, 18, 0.95);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 25;
+}
+
+.studio-canvas-camera-dropdown__item {
+  display: block;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+}
+
+.studio-canvas-camera-dropdown__item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.studio-canvas-camera-dropdown__item.is-active {
+  color: #2dd4bf;
+  background: rgba(45, 212, 191, 0.1);
+}
+
+.ai-chat-mention-list {
+  padding: 4px 0;
+}
+
+.ai-chat-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ai-chat-mention-item:hover {
+  background: #ddf5e2;
+}
+
+.ai-chat-mention-item.is-active {
+  background: rgba(56, 215, 118, 0.18);
+}
+
+.ai-chat-mention-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #111;
+  border-radius: 0;
+  overflow: hidden;
+  background: #f5fff4;
+  flex-shrink: 0;
+}
+
+.ai-chat-mention-thumb img,
+.ai-chat-mention-thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-chat-mention-label {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 800;
+  color: #11251a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai-chat-mention-token {
+  font-size: 10px;
+  font-weight: 700;
+  color: #38d776;
+}
+
+.ai-chat-mention-empty {
+  padding: 16px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #557466;
+  text-align: center;
+}
+
+/* ─── Media Preview Modal ─── */
+.ai-chat-media-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 17, 17, 0.7);
+}
+
+.ai-chat-media-preview__panel {
+  display: flex;
+  flex-direction: column;
+  width: min(90vw, 800px);
+  max-height: 85vh;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 6px 6px 0 #111;
+  overflow: hidden;
+}
+
+.ai-chat-media-preview__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 2px solid #111;
+  background: #fffdf5;
+}
+
+.ai-chat-media-preview__head span {
+  font-size: 13px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.ai-chat-media-preview__head button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+}
+
+.ai-chat-media-preview__head button:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.ai-chat-media-preview__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: #f5fff4;
+}
+
+.ai-chat-media-preview__body img,
+.ai-chat-media-preview__body video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border: 2px solid #111;
+  border-radius: 0;
+}
+
+/* ─── Conversation Sidebar ─── */
+.conversation-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  height: 100%;
+  border-left: 3px solid #111;
+  background: #fffdf5;
+  transition: width 0.2s;
+}
+
+.conversation-sidebar.is-collapsed {
+  width: 48px;
+}
+
+.conversation-sidebar__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 10px;
+  border-bottom: 2px solid #111;
+}
+
+.conversation-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.conversation-sidebar__toggle:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.conversation-sidebar__new {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  color: #111;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.conversation-sidebar__new:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.conversation-sidebar__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.conversation-sidebar__filter-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 8px 10px 0;
+  border-bottom: 2px solid #eee;
+}
+
+.conversation-sidebar__filter-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: #557466;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  margin-bottom: -2px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.conversation-sidebar__filter-tab:hover {
+  color: #11251a;
+}
+
+.conversation-sidebar__filter-tab.is-active {
+  color: #11251a;
+  border-bottom-color: #38d776;
+}
+
+.conversation-sidebar__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px 12px;
+  color: #557466;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.conversation-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.conversation-sidebar__item.is-active {
+  background: rgba(56, 215, 118, 0.12);
+  border-left: 3px solid #38d776;
+}
+
+.conversation-sidebar__rename-input {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 2px solid #38d776;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  outline: none;
+}
+
+.conversation-sidebar__item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 4px;
+  border: 0;
+  background: transparent;
+  color: #11251a;
+  cursor: pointer;
+  text-align: left;
+}
+
+.conversation-sidebar__item-main:hover {
+  background: rgba(56, 215, 118, 0.06);
+}
+
+.conversation-sidebar__item-title {
+  font-size: 12px;
+  font-weight: 800;
+  color: #11251a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-sidebar__item-time {
+  font-size: 10px;
+  font-weight: 700;
+  color: #557466;
+}
+
+.conversation-sidebar__item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.conversation-sidebar__item:hover .conversation-sidebar__item-actions {
+  opacity: 1;
+}
+
+.conversation-sidebar__item-actions button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 1.5px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #557466;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.conversation-sidebar__item-actions button:hover {
+  background: #ddf5e2;
+  color: #11251a;
+}
+
+/* ─── Delete Modal ─── */
+.workbench-delete-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.workbench-delete-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(17, 17, 17, 0.6);
+}
+
+.workbench-delete-modal__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: min(90vw, 360px);
+  padding: 28px 24px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 6px 6px 0 #111;
+  text-align: center;
+}
+
+.workbench-delete-modal__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 3px solid #e60012;
+  border-radius: 0;
+  background: #fff;
+  color: #e60012;
+  font-size: 22px;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.workbench-delete-modal__copy {
+  font-size: 13px;
+  font-weight: 800;
+  color: #11251a;
+  line-height: 1.5;
+}
+
+.workbench-delete-modal__copy strong {
+  display: block;
+  font-size: 15px;
+  font-weight: 1000;
+  margin-bottom: 4px;
+}
+
+.workbench-delete-modal__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.workbench-delete-modal__actions button {
+  padding: 8px 18px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.workbench-delete-modal__actions button:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.workbench-delete-modal__actions button.is-danger {
+  background: #e60012;
+  color: #fff;
+  border-color: #111;
+}
+
+.workbench-delete-modal__actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* ─── Page Motion Animation ─── */
+.page-motion {
+  animation: pixel-page-enter 0.3s ease-out;
+}
+
+@keyframes pixel-page-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ─── Workbench Page Layout Overrides ─── */
+.ai-workbench-page.is-active .ai-workbench-shell {
+  grid-template-columns: 1fr auto;
+}
+
+.ai-workbench-page.is-launch .ai-workbench-shell {
+  overflow-y: auto;
+}
+
+.ai-workbench-page.is-launch .ai-workbench-main {
+  overflow-y: auto;
+}
+
+/* ─── Override dark backgrounds to pixel light ─── */
+.ai-workbench-page,
+.ai-workbench-page .ai-workbench-shell,
+.ai-workbench-page .ai-workbench-main,
+.ai-workbench-page .ai-workbench-content-scroll,
+.ai-workbench-page .wb-home,
+.ai-workbench-page .wb-composer,
+.ai-workbench-page .ai-chat-main-panel,
+.ai-workbench-page .ai-chat-messages-surface {
+  background-color: #fffdf5;
+}
+
+/* ─── Responsive adjustments ─── */
+@media (max-width: 768px) {
+  .wb-home {
+    padding: 32px 16px 36px;
+  }
+
+  .wb-home__suggestions {
+    gap: 8px;
+  }
+
+  .wb-showcase__grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 12px;
+  }
+
+  .ai-chat-message-stack {
+    max-width: 85%;
+  }
+
+  .conversation-sidebar {
+    width: 200px;
+  }
+
+  .ai-workbench-select-chip__dropdown {
+    min-width: 180px;
+  }
+
+  .ai-workbench-select-chip__dropdown--compound {
+    min-width: 260px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   AGENT PAGE — 8-bit pixel styling
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.agent-experience {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fffdf5;
+  background-size: auto;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.agent-nav {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  border-bottom: 3px solid #111;
+  background: #fff;
+}
+
+.agent-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: #111;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.agent-logo__mark {
+  display: block;
+  width: 24px;
+  height: 24px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #21f29a;
+  box-shadow: 2px 2px 0 #111;
+}
+
+/* AGENT_PIXEL_PART2 */
+
+.agent-nav__links {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.agent-nav__links button {
+  padding: 6px 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #111;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-nav__links button:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.agent-nav__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.agent-nav__login {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #111;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+/* AGENT_PIXEL_PART3 */
+
+.agent-nav__login:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.agent-nav__login:disabled {
+  opacity: 0.6;
+  cursor: default;
+  transform: none;
+}
+
+.agent-nav__start {
+  padding: 6px 16px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #21f29a;
+  color: #111;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-nav__start:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.agent-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 24px;
+  overflow-y: auto;
+  gap: 32px;
+}
+
+.agent-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  max-width: 680px;
+}
+
+/* AGENT_PIXEL_PART4 */
+
+.agent-hero h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 1000;
+  color: #11251a;
+  text-align: center;
+}
+
+.agent-mode-selector {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.agent-mode {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
+}
+
+.agent-mode:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+  background: #ddf5e2;
+}
+
+.agent-mode.is-active {
+  background: #21f29a;
+  color: #111;
+  box-shadow: 3px 3px 0 #111;
+  transform: none;
+}
+
+.agent-mode__glyph {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #38d776;
+}
+
+.agent-mode.is-active .agent-mode__glyph {
+  color: #111;
+}
+
+/* AGENT_PIXEL_PART5 */
+
+.agent-composer {
+  width: 100%;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+  overflow: hidden;
+}
+
+.agent-composer textarea {
+  display: block;
+  width: 100%;
+  min-height: 100px;
+  padding: 14px 16px;
+  border: none;
+  border-bottom: 2px solid #eee;
+  background: #fffdf5;
+  color: #11251a;
+  font-size: 14px;
+  font-weight: 700;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+  resize: vertical;
+  outline: none;
+}
+
+.agent-composer textarea::placeholder {
+  color: #999;
+  font-weight: 700;
+}
+
+.agent-composer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: #fff;
+}
+
+.agent-composer__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-tool-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+/* AGENT_PIXEL_PART6 */
+
+.agent-tool-icon:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.agent-tool-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff8e7;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-tool-pill:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+.agent-run-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  border: 3px solid #111;
+  border-radius: 0;
+  background: #21f29a;
+  color: #111;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-run-button:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.agent-run-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+  transform: none;
+}
+
+/* AGENT_PIXEL_PART7 */
+
+.agent-status {
+  margin: 0;
+  padding: 8px 16px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff8e7;
+  color: #557466;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  box-shadow: 2px 2px 0 #111;
+}
+
+.agent-quick-start {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.agent-quick-start > span {
+  font-size: 12px;
+  font-weight: 800;
+  color: #557466;
+}
+
+.agent-quick-start > div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.agent-quick-start button {
+  padding: 6px 14px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #11251a;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-quick-start button:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+  background: #ddf5e2;
+}
+
+/* AGENT_PIXEL_PART8 */
+
+.agent-recent {
+  width: 100%;
+  max-width: 680px;
+}
+
+.agent-recent__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.agent-recent__head span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.agent-recent__head strong {
+  font-size: 16px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.agent-recent__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.agent-run-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.agent-run-card:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.agent-run-card > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* AGENT_PIXEL_PART9 */
+
+.agent-run-card > div strong {
+  font-size: 13px;
+  font-weight: 900;
+  color: #11251a;
+}
+
+.agent-run-card > div span {
+  padding: 2px 8px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #ddf5e2;
+  color: #11251a;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.agent-run-card > p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: #557466;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-run-card > small {
+  font-size: 11px;
+  font-weight: 700;
+  color: #999;
+}
+
+/* ===== Notification Center ===== */
+.notification-center {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.notification-center__bell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  color: #111;
+  font-size: 16px;
+  cursor: pointer;
+  box-shadow: 3px 3px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.notification-center__bell:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.notification-center__badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #e60012;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 14px;
+  text-align: center;
+}
+
+.notification-center__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1200;
+  width: 340px;
+  max-height: 420px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fffdf5;
+  box-shadow: 4px 4px 0 #111;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.notification-center__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 2px solid #111;
+  background: #fff8e7;
+}
+
+.notification-center__title {
+  font-size: 13px;
+  font-weight: 800;
+  color: #111;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.notification-center__mark-read {
+  padding: 3px 8px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #ddf5e2;
+  color: #111;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 2px 2px 0 #111;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.notification-center__mark-read:hover {
+  transform: translate(1px, 1px);
+  box-shadow: 1px 1px 0 #111;
+}
+
+.notification-center__list {
+  overflow-y: auto;
+  flex: 1;
+  max-height: 340px;
+}
+
+.notification-center__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  border-bottom: 1px solid #e5e5e5;
+  border-radius: 0;
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
+}
+
+.notification-center__item:last-child {
+  border-bottom: none;
+}
+
+.notification-center__item:hover {
+  background: #fff8e7;
+  transform: translate(1px, 1px);
+}
+
+.notification-center__item.is-unread {
+  background: #ddf5e2;
+}
+
+.notification-center__item.is-unread:hover {
+  background: #c8efd2;
+}
+
+.notification-center__item-icon {
+  flex-shrink: 0;
+  font-size: 16px;
+  margin-top: 2px;
+}
+
+.notification-center__item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.notification-center__item-title {
+  font-size: 12px;
+  font-weight: 800;
+  color: #111;
+  font-family: "Arial Black", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+.notification-center__item-desc {
+  font-size: 11px;
+  font-weight: 600;
+  color: #555;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification-center__item-time {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 700;
+  color: #999;
+  margin-top: 2px;
+}
+
+.notification-center__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 20px;
+  color: #999;
+  font-size: 12px;
+  font-weight: 700;
+}
+/* ─── Fix: Remove green border from composer ─── */
+.web-shell[data-ui-theme="pixel"] .ai-workbench-composer-shell,
+.web-shell[data-ui-theme="pixel"] .ai-workbench-composer-section .ai-workbench-composer-shell {
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  box-shadow: 4px 4px 0 #111 !important;
+  backdrop-filter: none !important;
+}
+.web-shell[data-ui-theme="pixel"] .wb-composer__content {
+  border: 3px solid #111 !important;
+  border-radius: 0 !important;
+  background: #fff !important;
+  box-shadow: 4px 4px 0 #111 !important;
+}
+.web-shell[data-ui-theme="pixel"] .wb-composer__content:focus-within {
+  border-color: #111 !important;
+  box-shadow: 4px 4px 0 #111 !important;
+  outline: none !important;
+}
+
+/* ─── FORCE: Conversation sidebar on the right ─── */
+.ai-workbench-page.is-active .ai-workbench-shell {
+  display: flex !important;
+  flex-direction: row !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+.ai-workbench-page.is-active .ai-workbench-shell > .ai-workbench-main {
+  flex: 1 !important;
+  min-width: 0 !important;
+  height: 100% !important;
+  overflow: hidden !important;
+}
+.ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar {
+  flex-shrink: 0 !important;
+  width: 240px !important;
+  height: 100% !important;
+  overflow-y: auto !important;
+}
+.ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed {
+  width: 48px !important;
+}
+
+.ai-chat-result-flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 0;
+  padding: 0 12px 12px;
+}
+
+.ai-chat-result-flow button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 26px;
+  padding: 0 8px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #f7fff2;
+  box-shadow: 2px 2px 0 #111;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.ai-chat-result-flow button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ai-chat-result-flow span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #555;
+}
+
+/* Workbench two-state conversation layout */
+.ai-workbench-page.is-launch > .conversation-sidebar {
+  display: none;
+}
+
+.ai-workbench-page.is-active {
+  display: flex !important;
+  align-items: stretch;
+  grid-template-columns: none;
+  grid-template-rows: none;
+  background: #fffdf5;
+}
+
+.ai-workbench-page.is-active > .ai-workbench-shell {
+  flex: 1 1 auto !important;
+  width: auto !important;
+  min-width: 0 !important;
+  height: 100% !important;
+}
+
+.ai-workbench-page.is-active > .conversation-sidebar {
+  flex: 0 0 240px;
+  min-width: 240px;
+  height: 100%;
+}
+
+.ai-workbench-page.is-active > .conversation-sidebar.is-collapsed {
+  flex-basis: 48px;
+  min-width: 48px;
+}
+
+.ai-workbench-page.is-active .ai-workbench-main,
+.ai-workbench-page.is-active .ai-workbench-shell > .ai-workbench-main {
+  display: block !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+.ai-workbench-page.is-active .ai-workbench-content-scroll {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+.ai-workbench-page.is-active .ai-workbench-thread-shell,
+.ai-workbench-page.is-active .ai-chat-main-panel {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.ai-workbench-page.is-active .ai-chat-messages-surface {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: clamp(20px, 3vh, 34px) clamp(18px, 4vw, 52px) clamp(190px, 25vh, 260px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f8fff2;
+}
+
+.ai-workbench-page.is-active .ai-chat-message-list {
+  width: min(100%, 980px);
+  min-height: 100%;
+  margin: 0 auto;
+  gap: 22px;
+}
+
+.ai-workbench-page.is-active .ai-chat-message-list > .conversation-sidebar__empty {
+  width: min(100%, 520px);
+  margin: clamp(80px, 16vh, 160px) auto 0;
+  padding: 22px 18px;
+  border: 2px dashed #111;
+  background: #fff;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.ai-workbench-page.is-active .wb-composer {
+  position: absolute;
+  left: 50%;
+  right: auto;
+  bottom: 0;
+  z-index: 20;
+  width: min(100%, 980px);
+  max-width: 980px;
+  margin: 0;
+  padding: 0 clamp(16px, 3vw, 30px) 18px;
+  background: #fffdf5;
+  transform: translateX(-50%);
+  opacity: 1;
+  pointer-events: none;
+  filter: none;
+  transition:
+    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 180ms ease,
+    filter 240ms ease;
+  will-change: transform, opacity;
+}
+
+.ai-workbench-page.is-active .wb-composer__content {
+  pointer-events: auto;
+  transition:
+    box-shadow 180ms ease,
+    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ai-workbench-page.is-active .wb-composer.is-hidden {
+  display: block;
+  transform: translateX(-50%) translateY(calc(100% + 18px));
+  opacity: 0;
+  filter: saturate(0.9);
+}
+
+.ai-workbench-page.is-active .wb-composer.is-hidden .wb-composer__content {
+  pointer-events: none;
+  transform: translateY(6px);
+}
+
+.ai-workbench-mode-switch__menu--up {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.ai-workbench-mode-switch__menu--down {
+  top: calc(100% + 8px);
+  bottom: auto;
+}
+
+.ai-workbench-select-chip__dropdown--up {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.ai-workbench-select-chip__dropdown--down {
+  top: calc(100% + 8px);
+  bottom: auto;
+}
+
+.wb-inline-chip__menu--up {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+.wb-inline-chip__menu--down {
+  top: calc(100% + 6px);
+  bottom: auto;
+}
+
+@media (max-width: 860px) {
+  .ai-workbench-page.is-active > .conversation-sidebar {
+    position: absolute;
+    inset: 0 0 auto auto;
+    z-index: 30;
+    width: min(240px, 78vw);
+    min-width: 0;
+    height: 100%;
+    box-shadow: -4px 0 0 #111;
+  }
+
+  .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed {
+    width: 48px;
+  }
+
+  .ai-workbench-page.is-active .ai-chat-messages-surface {
+    padding: 18px 14px clamp(210px, 34vh, 300px);
+  }
+
+  .ai-workbench-page.is-active .wb-composer {
+    width: 100%;
+    padding: 0 10px 12px;
+  }
+}
+
+.ecommerce-result-panel {
+  margin: 16px 24px 0;
+  padding-bottom: 8px;
+}
+
+.ecommerce-result-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  box-shadow: 4px 4px 0 #111;
+}
+
+.ecommerce-result-card strong {
+  font-size: 13px;
+}
+
+.ecommerce-result-card span,
+.ecommerce-result-card p {
+  font-size: 11px;
+  font-weight: 700;
+  color: #555;
+}
+
+.ecommerce-result-card__meta {
+  display: flex;
+  gap: 12px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #777;
+}
+
+.community-card-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.community-card-actions button {
+  padding: 5px 9px;
+  border: 2px solid #111;
+  background: #fff;
+  box-shadow: 2px 2px 0 #111;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.profile-page__list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.profile-page__list-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 120px;
+  padding: 12px;
+  border: 2px solid #111;
+  background: #fffdf5;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.profile-page__list-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.profile-page__list-card-head strong {
+  font-size: 12px;
+}
+
+.profile-page__list-card-head span,
+.profile-page__list-card p,
+.profile-page__list-card-meta {
+  font-size: 10px;
+  font-weight: 700;
+  color: #555;
+}
+
+.profile-page__list-card-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.profile-page__upload-card--meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+  cursor: default;
+}
+
+/* Canvas node interaction pass: real node sizes, selected controls, resize handles. */
+.canvas-page .studio-canvas-text-node,
+.canvas-page .studio-canvas-image-node,
+.canvas-page .studio-canvas-video-node {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  bottom: auto;
+  z-index: 40;
+  width: var(--canvas-node-width);
+  height: var(--canvas-node-height);
+  pointer-events: none;
+}
+
+.canvas-page .react-flow {
+  z-index: 1;
+}
+
+.canvas-page .studio-canvas-world {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  overflow: visible;
+  pointer-events: none;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.canvas-page .studio-canvas-node-links {
+  z-index: 30;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-node-link-hit {
+  pointer-events: stroke;
+  cursor: context-menu;
+}
+
+.canvas-page .studio-canvas-selection-box {
+  position: absolute;
+  z-index: 46;
+  border: 2px dashed #111;
+  background: rgba(56, 215, 118, 0.12);
+  background-size: auto;
+  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.82);
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-selection-summary,
+.canvas-page .studio-canvas-node-package-box {
+  position: absolute;
+  z-index: 18;
+  border: 2px solid rgba(44, 146, 104, 0.42);
+  border-radius: 10px;
+  background: rgba(56, 215, 118, 0.035);
+  box-shadow: none;
+  pointer-events: none;
+  cursor: move;
+  transition:
+    border-color 0.16s ease,
+    background 0.16s ease;
+}
+
+.canvas-page .studio-canvas-selection-summary__label {
+  position: absolute;
+  top: -1px;
+  left: 12px;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  font-size: 11px;
+  color: rgba(56, 215, 118, 0.82);
+  background: rgba(17, 24, 20, 0.88);
+  border-radius: 0 0 6px 6px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.canvas-page .studio-canvas-node-package-box:hover {
+  border-color: rgba(44, 146, 104, 0.72);
+  background: rgba(56, 215, 118, 0.06);
+}
+
+.canvas-page .studio-canvas-node-package-box.is-selected {
+  border-color: rgba(26, 126, 78, 0.92);
+  background: rgba(56, 215, 118, 0.09);
+  box-shadow: none;
+}
+
+.canvas-page .studio-canvas-node-package-box.is-dragging {
+  border-color: rgba(26, 126, 78, 0.96);
+  background: rgba(56, 215, 118, 0.12);
+  transition: none;
+}
+
+.canvas-page .studio-canvas-node-package-hit-area {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-node-package-drag-zone {
+  position: absolute;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-node-package-drag-zone.is-top {
+  top: -4px;
+  left: 40px;
+  right: 40px;
+  height: 8px;
+  cursor: move;
+}
+
+.canvas-page .studio-canvas-node-package-drag-zone.is-right {
+  top: 40px;
+  right: -4px;
+  bottom: 40px;
+  width: 8px;
+  cursor: move;
+}
+
+.canvas-page .studio-canvas-node-package-drag-zone.is-bottom {
+  bottom: -4px;
+  left: 40px;
+  right: 40px;
+  height: 8px;
+  cursor: move;
+}
+
+.canvas-page .studio-canvas-node-package-drag-zone.is-left {
+  top: 40px;
+  left: -4px;
+  bottom: 40px;
+  width: 8px;
+  cursor: move;
+}
+
+.canvas-page .studio-canvas-node-package-box__label {
+  position: absolute;
+  top: -1px;
+  left: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+  padding: 2px 10px;
+  border: 1px solid rgba(44, 146, 104, 0.52);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  background: rgba(20, 30, 24, 0.92);
+  color: #6ee7b7;
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-node-package-box__label:hover {
+  background: rgba(26, 46, 36, 0.96);
+  color: #a7f3d0;
+}
+
+.canvas-page .studio-canvas-node-package-box__label strong {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.canvas-page .studio-canvas-node-package-box__label em {
+  color: rgba(167, 243, 208, 0.7);
+  font-size: 11px;
+  font-style: normal;
+}
+
+.canvas-page .studio-canvas-node-package-card {
+  position: absolute;
+  z-index: 48;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 5px;
+  padding: 14px 16px;
+  border: 2px solid rgba(44, 146, 104, 0.68);
+  border-radius: 10px;
+  background: rgba(20, 30, 24, 0.94);
+  color: #a7f3d0;
+  box-shadow: none;
+  cursor: pointer;
+  pointer-events: auto;
+  text-align: left;
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease,
+    transform 0.16s ease;
+}
+
+.canvas-page .studio-canvas-node-package-card:hover {
+  border-color: rgba(26, 126, 78, 0.96);
+  box-shadow: none;
+}
+
+.canvas-page .studio-canvas-node-package-card.is-dragging {
+  border-color: rgba(26, 126, 78, 0.96);
+  box-shadow: none;
+  transform: scale(1.02);
+  transition: none;
+  cursor: grabbing;
+}
+
+.canvas-page .studio-canvas-node-package-card__label {
+  max-width: 100%;
+  overflow: hidden;
+  color: #6ee7b7;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-node-package-card__meta {
+  color: rgba(167, 243, 208, 0.7);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.canvas-page .studio-canvas-selection-context-menu__unpackage:hover:not(:disabled) {
+  border-color: rgba(44, 146, 104, 0.72);
+  background: rgba(20, 30, 24, 0.92);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.canvas-page .studio-canvas-text-node {
+  transform: translate(calc(-50% + var(--text-node-x, 0px)), calc(-50% + var(--text-node-y, 0px)));
+}
+
+.canvas-page .studio-canvas-image-node {
+  transform: translate(calc(-50% + var(--image-node-x, 0px)), calc(-50% + var(--image-node-y, 0px)));
+}
+
+.canvas-page .studio-canvas-video-node {
+  transform: translate(calc(-50% + var(--video-node-x, 0px)), calc(-50% + var(--video-node-y, 0px)));
+}
+
+.canvas-page .studio-canvas-text-node.is-selected,
+.canvas-page .studio-canvas-image-node.is-selected,
+.canvas-page .studio-canvas-video-node.is-selected {
+  z-index: 58;
+}
+
+.canvas-page .studio-canvas-text-node__scaled,
+.canvas-page .studio-canvas-image-node__scaled,
+.canvas-page .studio-canvas-video-node__scaled {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transform: none;
+  transform-origin: center center;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-text-node__title,
+.canvas-page .studio-canvas-image-node__title,
+.canvas-page .studio-canvas-video-node__title {
+  left: 0;
+  top: -30px;
+  max-width: 100%;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-text-node__card,
+.canvas-page .studio-canvas-image-node__card,
+.canvas-page .studio-canvas-video-node__preview {
+  position: absolute;
+  inset: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.canvas-page .studio-canvas-text-node.is-selected .studio-canvas-text-node__card,
+.canvas-page .studio-canvas-image-node.is-selected .studio-canvas-image-node__card,
+.canvas-page .studio-canvas-video-node.is-selected .studio-canvas-video-node__preview {
+  border-color: #38d776;
+  box-shadow:
+    7px 7px 0 #111,
+    0 0 0 3px rgba(56, 215, 118, 0.3);
+}
+
+.canvas-page .studio-canvas-text-node.is-resizing .studio-canvas-text-node__card,
+.canvas-page .studio-canvas-image-node.is-resizing .studio-canvas-image-node__card,
+.canvas-page .studio-canvas-video-node.is-resizing .studio-canvas-video-node__preview {
+  cursor: nwse-resize;
+}
+
+.canvas-page .studio-canvas-image-node.is-focus-tool-active .studio-canvas-image-node__card,
+.canvas-page .studio-canvas-image-node.is-focus-selecting .studio-canvas-image-node__card {
+  cursor: crosshair;
+}
+
+.canvas-page .studio-canvas-image-node.is-focus-tool-active .studio-canvas-node-resize-handle,
+.canvas-page .studio-canvas-image-node.is-focus-tool-active .studio-canvas-image-node__connector,
+.canvas-page .studio-canvas-image-node.is-focus-tool-active .studio-canvas-image-node__upload {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-image-focus-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 18;
+  overflow: hidden;
+  border-radius: inherit;
+  cursor: crosshair;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-image-focus-layer--global {
+  z-index: 74;
+  border-radius: 0;
+}
+
+.canvas-page .studio-canvas-image-focus-layer__hint {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  padding: 8px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.58);
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 12px;
+  font-weight: 900;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-image-focus-layer__shade {
+  position: absolute;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.52);
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-image-focus-layer__shade.is-top {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: var(--focus-y, 0%);
+}
+
+.canvas-page .studio-canvas-image-focus-layer__shade.is-bottom {
+  left: 0;
+  top: calc(var(--focus-y, 0%) + var(--focus-h, 0%));
+  width: 100%;
+  height: calc(100% - var(--focus-y, 0%) - var(--focus-h, 0%));
+}
+
+.canvas-page .studio-canvas-image-focus-layer__shade.is-left {
+  left: 0;
+  top: var(--focus-y, 0%);
+  width: var(--focus-x, 0%);
+  height: var(--focus-h, 0%);
+}
+
+.canvas-page .studio-canvas-image-focus-layer__shade.is-right {
+  left: calc(var(--focus-x, 0%) + var(--focus-w, 0%));
+  top: var(--focus-y, 0%);
+  width: calc(100% - var(--focus-x, 0%) - var(--focus-w, 0%));
+  height: var(--focus-h, 0%);
+}
+
+.canvas-page .studio-canvas-image-focus-layer__box {
+  position: absolute;
+  left: var(--focus-x, 0%);
+  top: var(--focus-y, 0%);
+  z-index: 2;
+  width: var(--focus-w, 0%);
+  height: var(--focus-h, 0%);
+  border: 2px solid #fff;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.28),
+    0 0 22px rgba(0, 0, 0, 0.24);
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-image-focus-layer__handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.34);
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
+  transform: translate(-50%, -50%);
+}
+
+.canvas-page .studio-canvas-image-focus-layer__handle.is-nw { left: 0; top: 0; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-n { left: 50%; top: 0; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-ne { left: 100%; top: 0; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-e { left: 100%; top: 50%; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-se { left: 100%; top: 100%; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-s { left: 50%; top: 100%; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-sw { left: 0; top: 100%; }
+.canvas-page .studio-canvas-image-focus-layer__handle.is-w { left: 0; top: 50%; }
+
+.canvas-page .studio-canvas-image-focus-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: -50px;
+  z-index: 64;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: min(560px, calc(100vw - 72px));
+  min-height: 38px;
+  padding: 6px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  background: rgba(10, 10, 10, 0.94);
+  color: rgba(255, 255, 255, 0.82);
+  box-shadow: none;
+  transform: translateX(-50%);
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-image-focus-layer--global .studio-canvas-image-focus-toolbar {
+  left: var(--focus-cx, 50%);
+  top: var(--focus-toolbar-y, 60%);
+  bottom: auto;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar__ratios {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar button {
+  flex: 0 0 auto;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar__ratios button {
+  min-width: 34px;
+  padding: 0 7px;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar__ratios button:hover,
+.canvas-page .studio-canvas-image-focus-toolbar__ratios button.is-active {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar__cancel {
+  padding: 0 10px;
+  color: rgba(255, 255, 255, 0.68) !important;
+}
+
+.canvas-page .studio-canvas-image-focus-toolbar__confirm {
+  min-width: 48px;
+  padding: 0 12px;
+  background: #1677ff !important;
+  color: #fff !important;
+}
+
+.canvas-page .studio-canvas-node-toolbar {
+  top: -80px;
+}
+
+.canvas-page .studio-canvas-image-node__upload {
+  top: -44px;
+  left: 50%;
+  height: 34px;
+  padding: 0 12px;
+  font-size: 12px;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+
+.canvas-page .studio-canvas-image-node:not(.is-selected) .studio-canvas-image-node__upload {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-text-node__glyph {
+  gap: 6px;
+  padding-top: 34px;
+}
+
+.canvas-page .studio-canvas-text-node__glyph span {
+  width: 48px;
+  height: 6px;
+}
+
+.canvas-page .studio-canvas-text-node__glyph span:nth-child(4) {
+  width: 30px;
+}
+
+.canvas-page .studio-canvas-text-node__suggestions {
+  gap: 10px;
+  margin-top: 22px;
+  padding: 0 18px 18px;
+}
+
+.canvas-page .studio-canvas-text-node__suggestions > span,
+.canvas-page .studio-canvas-image-node__placeholder-actions span {
+  font-size: 12px;
+}
+
+.canvas-page .studio-canvas-text-node__suggestions button,
+.canvas-page .studio-canvas-image-node__placeholder-actions button {
+  max-width: 100%;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.3;
+  white-space: normal;
+}
+
+.canvas-page .studio-canvas-text-node__inline-input,
+.canvas-page .studio-canvas-text-node__content {
+  inset: 18px;
+  overflow: auto;
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder {
+  padding: 28px 24px 30px;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder.is-error {
+  gap: 12px;
+  background: rgba(8, 18, 15, 0.72);
+  color: rgba(236, 255, 245, 0.92);
+}
+
+.canvas-page .studio-canvas-image-node__placeholder-copy {
+  display: grid;
+  gap: 5px;
+  max-width: min(300px, calc(100% - 32px));
+  text-align: center;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder-copy strong {
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder-copy small {
+  color: rgba(196, 218, 207, 0.72);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder-icon,
+.canvas-page .studio-canvas-video-node__play {
+  font-size: 44px;
+}
+
+.canvas-page .studio-canvas-video-node__preview video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.canvas-page .studio-canvas-image-node__placeholder-actions {
+  gap: 8px;
+}
+
+.canvas-page .studio-canvas-text-composer,
+.canvas-page .studio-canvas-image-composer,
+.canvas-page .studio-canvas-video-composer {
+  left: 0;
+  top: calc(100% + 14px);
+  width: var(--canvas-node-width);
+  min-width: min(420px, calc(100vw - 56px));
+  max-width: min(760px, calc(100vw - 56px));
+  height: auto;
+  min-height: 0;
+  border-radius: 0;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-text-composer {
+  min-width: min(360px, calc(100vw - 56px));
+}
+
+.canvas-page .studio-canvas-text-composer textarea,
+.canvas-page .studio-canvas-image-composer textarea,
+.canvas-page .studio-canvas-video-composer textarea {
+  height: 92px;
+  margin: 0;
+  padding: 14px 14px 6px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.canvas-page .studio-canvas-text-composer textarea {
+  padding: 14px 56px 16px 14px;
+}
+
+.canvas-page .studio-canvas-text-composer__footer,
+.canvas-page .studio-canvas-image-composer__footer,
+.canvas-page .studio-canvas-video-composer__footer {
+  position: static;
+  left: auto;
+  right: auto;
+  bottom: auto;
+  height: auto;
+  min-height: 54px;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 12px 12px;
+  font-size: 12px;
+}
+
+.canvas-page .studio-canvas-image-composer__footer,
+.canvas-page .studio-canvas-video-composer__footer {
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.canvas-page .studio-canvas-text-composer__footer {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  height: 34px;
+  min-height: 34px;
+  flex-wrap: nowrap;
+  padding: 0;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-text-composer__footer button,
+.canvas-page .studio-canvas-image-composer__footer button,
+.canvas-page .studio-canvas-video-composer__footer button {
+  flex: 0 0 auto;
+}
+
+.canvas-page .studio-canvas-text-composer__footer button {
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-text-composer__footer span,
+.canvas-page .studio-canvas-image-composer__footer span,
+.canvas-page .studio-canvas-video-composer__footer span {
+  font-size: 12px;
+}
+
+.canvas-page .studio-canvas-text-composer__send {
+  width: 34px;
+  height: 34px;
+  margin-left: auto;
+  border-radius: 10px;
+}
+
+.canvas-page .studio-canvas-text-composer__state,
+.canvas-page .studio-canvas-image-composer__state,
+.canvas-page .studio-canvas-video-composer__state {
+  flex: 1 1 130px;
+  min-width: 120px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.68);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-text-composer__state.is-success,
+.canvas-page .studio-canvas-image-composer__state.is-success,
+.canvas-page .studio-canvas-video-composer__state.is-success {
+  color: #7ce7a3;
+}
+
+.canvas-page .studio-canvas-text-composer__state.is-error,
+.canvas-page .studio-canvas-image-composer__state.is-error,
+.canvas-page .studio-canvas-video-composer__state.is-error {
+  color: #ff9b9b;
+}
+
+.canvas-page .studio-canvas-node-generation-progress {
+  position: absolute;
+  inset: 0;
+  z-index: 34;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: inherit;
+  background: rgba(8, 16, 12, 0.88);
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  pointer-events: none;
+  overflow: hidden;
+  animation: canvas-progress-fade-in 280ms ease-out both;
+}
+
+.canvas-page .studio-canvas-node-generation-progress::before {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 40%, rgba(var(--accent-rgb, 0, 255, 136), 0.06) 0%, transparent 70%);
+  content: "";
+  animation: canvas-progress-glow-pulse 2.4s ease-in-out infinite;
+}
+
+.canvas-page .studio-canvas-node-generation-progress__ring {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background:
+    conic-gradient(from -90deg, var(--accent, #00ff88) 0 var(--canvas-generation-progress, 0deg), rgba(255, 255, 255, 0.08) var(--canvas-generation-progress, 0deg) 360deg);
+  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.canvas-page .studio-canvas-node-generation-progress__ring::after {
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: rgba(10, 20, 16, 0.96);
+  content: "";
+}
+
+.canvas-page .studio-canvas-node-generation-progress__ring::before {
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  border: 1.5px solid transparent;
+  border-top-color: rgba(var(--accent-rgb, 0, 255, 136), 0.6);
+  border-right-color: rgba(var(--accent-rgb, 0, 255, 136), 0.2);
+  animation: canvas-progress-orbit 1.8s linear infinite;
+  content: "";
+}
+
+.canvas-page .studio-canvas-node-generation-progress strong {
+  position: relative;
+  max-width: min(200px, 80%);
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-node-generation-progress em {
+  position: absolute;
+  inset: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent, #00ff88);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 0 8px rgba(var(--accent-rgb, 0, 255, 136), 0.3);
+}
+
+.canvas-page .studio-canvas-generate-button {
+  border-color: rgba(255, 255, 255, 0.12) !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: rgba(255, 255, 255, 0.36) !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  opacity: 0.54;
+}
+
+.canvas-page .studio-canvas-generate-button .anticon {
+  font-size: 15px;
+  line-height: 1;
+  transform: translateX(0) rotate(0deg);
+  transition:
+    color 160ms ease,
+    filter 160ms ease,
+    font-size 160ms ease,
+    transform 160ms ease;
+}
+
+.canvas-page .studio-canvas-generate-button.is-ready:not(:disabled) {
+  border-color: rgba(var(--accent-rgb, 0, 255, 136), 0.72) !important;
+  background: var(--accent, #00ff88) !important;
+  color: var(--dg-button-text, #061014) !important;
+  box-shadow:
+    0 0 0 1px rgba(var(--accent-rgb, 0, 255, 136), 0.18),
+    0 0 20px rgba(var(--accent-rgb, 0, 255, 136), 0.32) !important;
+  cursor: pointer !important;
+  opacity: 1;
+}
+
+.canvas-page .studio-canvas-generate-button.is-ready:not(:disabled) .anticon {
+  color: var(--dg-button-text, #061014);
+  font-size: 18px;
+  filter:
+    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32))
+    drop-shadow(0 0 8px rgba(6, 16, 20, 0.28));
+  transform: translate(1px, -1px) rotate(-10deg);
+}
+
+.canvas-page .studio-canvas-generate-button.is-ready:not(:disabled):hover .anticon {
+  transform: translate(2px, -2px) rotate(-14deg) scale(1.06);
+}
+
+.canvas-page .studio-canvas-generate-button[aria-busy="true"] {
+  border-color: rgba(var(--accent-rgb, 0, 255, 136), 0.52) !important;
+  background: var(--accent, #00ff88) !important;
+  color: var(--dg-button-text, #061014) !important;
+  cursor: wait !important;
+  opacity: 1;
+}
+
+.canvas-page .studio-canvas-generation-toast {
+  position: absolute;
+  left: 50%;
+  bottom: 78px;
+  z-index: 270;
+  min-width: 152px;
+  padding: 10px 16px;
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.36);
+  border-radius: 999px;
+  background: rgba(5, 12, 10, 0.92);
+  color: var(--accent, #00ff88);
+  font-size: 13px;
+  font-weight: 900;
+  text-align: center;
+  box-shadow: none;
+  transform: translateX(-50%);
+  animation: canvas-generation-toast-in 180ms ease-out;
+  pointer-events: none;
+}
+
+@keyframes canvas-progress-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes canvas-progress-glow-pulse {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes canvas-progress-orbit {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes canvas-generation-toast-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+
+.canvas-page .studio-canvas-text-composer__model {
+  height: 38px;
+  font-size: 12px !important;
+}
+
+.canvas-page .studio-canvas-text-composer__model-menu {
+  bottom: 48px;
+  width: min(430px, calc(100vw - 64px));
+  padding: 10px;
+}
+
+.canvas-page .studio-canvas-text-composer__model-menu button {
+  min-height: 58px;
+  grid-template-columns: 34px 1fr auto;
+  gap: 10px;
+  padding: 8px 10px;
+}
+
+.canvas-page .studio-canvas-text-composer__model-menu-copy strong {
+  font-size: 14px;
+}
+
+.canvas-page .studio-canvas-text-composer__model-menu-copy small,
+.canvas-page .studio-canvas-text-composer__model-menu em {
+  font-size: 11px;
+}
+
+.canvas-page .studio-canvas-image-composer__tools,
+.canvas-page .studio-canvas-video-composer__tabs,
+.canvas-page .studio-canvas-video-composer__tools {
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 12px 0;
+}
+
+.canvas-page .studio-canvas-video-composer__tools {
+  margin-top: 0;
+}
+
+.canvas-page .studio-canvas-image-composer__tools button,
+.canvas-page .studio-canvas-video-composer__tabs button,
+.canvas-page .studio-canvas-video-composer__tools button {
+  min-width: 0;
+  min-height: 34px;
+  height: 36px;
+  padding: 0 10px;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.canvas-page .studio-canvas-image-composer__tools .anticon {
+  font-size: 15px;
+}
+
+.canvas-page .studio-canvas-image-composer__expand {
+  width: 36px;
+  height: 36px !important;
+  font-size: 18px !important;
+}
+
+.canvas-page .studio-canvas-image-composer__style-button {
+  max-width: 176px;
+  overflow: hidden;
+}
+
+.canvas-page .studio-canvas-image-composer__style-button.has-style {
+  justify-content: flex-start;
+  min-width: 128px;
+  padding: 4px 10px 4px 6px;
+  border-color: rgba(0, 255, 136, 0.42);
+  background: rgba(0, 255, 136, 0.1);
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.canvas-page .studio-canvas-image-composer__style-thumb {
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.canvas-page .studio-canvas-image-composer__style-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.canvas-page .studio-canvas-image-composer__style-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-style-picker {
+  position: fixed;
+  inset: 0;
+  z-index: 260;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  pointer-events: auto;
+}
+
+.canvas-page .studio-canvas-style-picker__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(6, 7, 7, 0.78);
+  cursor: default;
+}
+
+.canvas-page .studio-canvas-style-picker__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: min(1500px, calc(100vw - 48px));
+  height: min(920px, calc(100vh - 48px));
+  min-height: 520px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  background: #242424;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: none;
+}
+
+.canvas-page .studio-canvas-style-picker__header {
+  display: grid;
+  grid-template-columns: auto minmax(260px, 380px) auto 36px;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 16px 10px;
+}
+
+.canvas-page .studio-canvas-style-picker__tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.canvas-page .studio-canvas-style-picker__tabs button,
+.canvas-page .studio-canvas-style-picker__categories button,
+.canvas-page .studio-canvas-style-picker__community-link,
+.canvas-page .studio-canvas-style-picker__close,
+.canvas-page .studio-canvas-style-picker__empty button {
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.canvas-page .studio-canvas-style-picker__tabs button {
+  min-width: 80px;
+  height: 34px;
+  padding: 0 18px;
+  border-radius: 7px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.canvas-page .studio-canvas-style-picker__tabs button.is-active {
+  background: rgba(255, 255, 255, 0.13);
+  color: #fff;
+}
+
+.canvas-page .studio-canvas-style-picker__search {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  align-items: center;
+  gap: 8px;
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.74);
+}
+
+.canvas-page .studio-canvas-style-picker__search input {
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+}
+
+.canvas-page .studio-canvas-style-picker__search input::placeholder {
+  color: rgba(255, 255, 255, 0.44);
+}
+
+.canvas-page .studio-canvas-style-picker__community-link {
+  justify-self: end;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 8px;
+  background: rgba(0, 255, 136, 0.12);
+  color: #7dffb3;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.canvas-page .studio-canvas-style-picker__close {
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.54);
+}
+
+.canvas-page .studio-canvas-style-picker__subbar {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.canvas-page .studio-canvas-style-picker__categories {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.canvas-page .studio-canvas-style-picker__categories::-webkit-scrollbar {
+  display: none;
+}
+
+.canvas-page .studio-canvas-style-picker__categories button {
+  flex: 0 0 auto;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 7px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.canvas-page .studio-canvas-style-picker__categories button.is-active {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.canvas-page .studio-canvas-style-picker__filters {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.canvas-page .studio-canvas-style-picker__filters span {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.09);
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 32px;
+}
+
+.canvas-page .studio-canvas-style-picker__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+}
+
+.canvas-page .studio-canvas-style-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.canvas-page .studio-canvas-style-picker__card {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  gap: 6px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.canvas-page .studio-canvas-style-picker__card.is-selected .studio-canvas-style-picker__image {
+  outline: 2px solid #00ff88;
+  outline-offset: 2px;
+}
+
+.canvas-page .studio-canvas-style-picker__image {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 4 / 5;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.canvas-page .studio-canvas-style-picker__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.18s ease;
+}
+
+.canvas-page .studio-canvas-style-picker__card:hover .studio-canvas-style-picker__image img {
+  transform: scale(1.035);
+}
+
+.canvas-page .studio-canvas-style-picker__image::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: 44%;
+  background: rgba(0, 0, 0, 0.58);
+}
+
+.canvas-page .studio-canvas-style-picker__image em {
+  position: absolute;
+  left: 8px;
+  bottom: 7px;
+  z-index: 1;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.canvas-page .studio-canvas-style-picker__card strong,
+.canvas-page .studio-canvas-style-picker__card small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-style-picker__card strong {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.canvas-page .studio-canvas-style-picker__card small {
+  color: rgba(255, 255, 255, 0.48);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.canvas-page .studio-canvas-style-picker__skeleton {
+  aspect-ratio: 4 / 5.55;
+  border-radius: 8px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
+  background-size: 220% 100%;
+  animation: canvas-style-skeleton 1.15s ease-in-out infinite;
+}
+
+.canvas-page .studio-canvas-style-picker__empty {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 10px;
+  min-height: 320px;
+  color: rgba(255, 255, 255, 0.56);
+  text-align: center;
+}
+
+.canvas-page .studio-canvas-style-picker__empty strong {
+  color: #fff;
+  font-size: 17px;
+}
+
+.canvas-page .studio-canvas-style-picker__empty button {
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 8px;
+  background: #00ff88;
+  color: #111;
+  font-weight: 900;
+}
+
+.canvas-page .studio-canvas-style-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 34px;
+  z-index: 280;
+  max-width: min(520px, calc(100vw - 48px));
+  padding: 12px 16px;
+  border: 1px solid rgba(0, 255, 136, 0.32);
+  border-radius: 8px;
+  background: rgba(22, 28, 24, 0.96);
+  color: #7dffb3;
+  font-size: 13px;
+  font-weight: 900;
+  box-shadow: none;
+  transform: translateX(-50%);
+}
+
+@keyframes canvas-style-skeleton {
+  0% {
+    background-position: 120% 0;
+  }
+
+  100% {
+    background-position: -120% 0;
+  }
+}
+
+@media (max-width: 820px) {
+  .canvas-page .studio-canvas-style-picker {
+    padding: 12px;
+  }
+
+  .canvas-page .studio-canvas-style-picker__panel {
+    width: calc(100vw - 24px);
+    height: calc(100vh - 24px);
+    min-height: 0;
+  }
+
+  .canvas-page .studio-canvas-style-picker__header {
+    grid-template-columns: 1fr 36px;
+  }
+
+  .canvas-page .studio-canvas-style-picker__search,
+  .canvas-page .studio-canvas-style-picker__community-link {
+    grid-column: 1 / -1;
+  }
+
+  .canvas-page .studio-canvas-style-picker__community-link {
+    justify-self: start;
+  }
+
+  .canvas-page .studio-canvas-style-picker__subbar {
+    grid-template-columns: 1fr;
+  }
+
+  .canvas-page .studio-canvas-style-picker__filters {
+    display: none;
+  }
+
+  .canvas-page .studio-canvas-style-picker__grid {
+    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+    gap: 12px;
+  }
+}
+
+.canvas-page .studio-canvas-composer-chip {
+  flex: 1 1 118px;
+  min-width: 0;
+}
+
+.canvas-page .studio-canvas-composer-chip--compact {
+  flex: 0 1 82px;
+  min-width: 64px;
+}
+
+.canvas-page .studio-canvas-composer-chip--mini {
+  flex: 0 1 58px;
+  min-width: 48px;
+}
+
+.canvas-page .studio-canvas-composer-chip .canvas-select-chip__trigger {
+  height: 34px !important;
+  min-height: 34px;
+  font-size: 11px;
+}
+
+.canvas-page .studio-canvas-text-node__connector,
+.canvas-page .studio-canvas-image-node__connector,
+.canvas-page .studio-canvas-video-node__connector {
+  width: 58px;
+  height: 58px;
+  z-index: 8;
+  font-size: 14px;
+}
+
+.canvas-page .studio-canvas-node-connector--left,
+.canvas-page .studio-canvas-video-node__connector.studio-canvas-node-connector--left {
+  left: -38px;
+}
+
+.canvas-page .studio-canvas-node-connector--right,
+.canvas-page .studio-canvas-video-node__connector.studio-canvas-node-connector--right {
+  right: -38px;
+}
+
+.canvas-page .studio-canvas-text-node__connector span,
+.canvas-page .studio-canvas-image-node__connector span,
+.canvas-page .studio-canvas-video-node__connector span {
+  width: 24px;
+  height: 24px;
+}
+
+.canvas-page .studio-canvas-node-resize-handle {
+  position: absolute;
+  right: -12px;
+  bottom: -12px;
+  z-index: 12;
+  width: 28px;
+  height: 28px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #38d776;
+  box-shadow: 3px 3px 0 #111;
+  cursor: nwse-resize;
+  opacity: 1;
+}
+
+.canvas-page .studio-canvas-node-resize-handle::before,
+.canvas-page .studio-canvas-node-resize-handle::after {
+  content: "";
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  width: 10px;
+  height: 2px;
+  background: #111;
+}
+
+.canvas-page .studio-canvas-node-resize-handle::after {
+  width: 2px;
+  height: 10px;
+}
+
+.canvas-page .studio-canvas-text-node:not(.is-selected) .studio-canvas-node-resize-handle,
+.canvas-page .studio-canvas-image-node:not(.is-selected) .studio-canvas-node-resize-handle,
+.canvas-page .studio-canvas-video-node:not(.is-selected) .studio-canvas-node-resize-handle {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.canvas-page .studio-canvas-node-context-menu {
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(560px, calc(100vh - 24px));
+  padding: 10px;
+  gap: 3px;
+  border: 3px solid #111;
+  border-radius: 0;
+  transform: none;
+  background: #fffdf5;
+  background-size: auto;
+  color: #11251a;
+  box-shadow: 7px 7px 0 #111;
+  overflow: auto;
+}
+
+.canvas-page .studio-canvas-node-context-menu button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 42px;
+  padding: 0 10px;
+  border: 2px solid transparent;
+  border-radius: 0;
+  color: #11251a;
+  font-size: 13px;
+  font-weight: 1000;
+  line-height: 1.2;
+}
+
+.canvas-page .studio-canvas-node-context-menu button > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-page .studio-canvas-node-context-menu button:hover:not(:disabled) {
+  border-color: #111;
+  background: #d9f8dd;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.canvas-page .studio-canvas-node-context-menu button:disabled {
+  color: #8aa095;
+}
+
+.canvas-page .studio-canvas-node-context-menu kbd {
+  min-width: 42px;
+  color: #557466;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 1000;
+  text-align: right;
+}
+
+.canvas-page .studio-canvas-node-context-menu__divider {
+  height: 3px;
+  margin: 7px 0;
+  border: 0;
+  background: #111;
+}
+
+.canvas-page .studio-canvas-node-context-menu__hint {
+  width: 18px;
+  height: 18px;
+  margin-left: 6px;
+  border: 2px solid #111;
+  border-radius: 0;
+  background: #fff;
+  color: #557466;
+  font-size: 11px;
+  font-weight: 1000;
+}
+
+.canvas-page .studio-canvas-node-context-menu .studio-canvas-node-context-menu__primary {
+  min-height: 44px;
+  margin-top: 5px;
+  border-color: #111;
+  background: #38d776;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.canvas-page .studio-canvas-selection-context-menu {
+  position: fixed;
+  z-index: 95;
+  display: grid;
+  width: min(280px, calc(100vw - 24px));
+  max-height: min(360px, calc(100vh - 24px));
+  gap: 4px;
+  padding: 10px;
+  border: 1px solid rgba(44, 146, 104, 0.4);
+  border-radius: 10px;
+  background: rgba(18, 24, 20, 0.96);
+  color: #e2e8f0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.canvas-page .studio-canvas-selection-context-menu__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 4px 8px;
+  border-bottom: 1px solid rgba(44, 146, 104, 0.3);
+  color: #a7f3d0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.canvas-page .studio-canvas-selection-context-menu__title span {
+  color: rgba(167, 243, 208, 0.6);
+  font-size: 12px;
+}
+
+.canvas-page .studio-canvas-selection-context-menu button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #e2e8f0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.canvas-page .studio-canvas-selection-context-menu button:hover:not(:disabled) {
+  border-color: rgba(44, 146, 104, 0.5);
+  background: rgba(44, 146, 104, 0.15);
+}
+
+.canvas-page .studio-canvas-selection-context-menu button:disabled {
+  color: rgba(226, 232, 240, 0.4);
+}
+
+.canvas-page .studio-canvas-selection-context-menu kbd {
+  min-width: 42px;
+  color: rgba(167, 243, 208, 0.5);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  text-align: right;
+}
+
+.canvas-page .studio-canvas-selection-context-menu .studio-canvas-selection-context-menu__primary {
+  margin-top: 4px;
+  border-color: rgba(44, 146, 104, 0.6);
+  background: rgba(44, 146, 104, 0.25);
+  color: #6ee7b7;
+}
diff --git a/src/styles/pages/local-theme-parity.css b/src/styles/pages/local-theme-parity.css
new file mode 100644
index 0000000..884189d
--- /dev/null
+++ b/src/styles/pages/local-theme-parity.css
@@ -0,0 +1,373 @@
+/* Local preview theme parity: scoped to ecommerce/template pages, colors and border tones only. */
+
+.product-clone-page[data-tool="clone"] {
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+  background: var(--bg-base);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel,
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo,
+  .clone-ai-card,
+  .clone-ai-platform-spec,
+  .clone-ai-count-panel,
+  .clone-ai-replicate-panel,
+  .clone-ai-module-panel,
+  .clone-ai-model-panel,
+  .clone-ai-video-panel,
+  .clone-ai-empty-state .anticon,
+  .clone-ai-main-result,
+  .clone-ai-result-grid button,
+  .clone-ai-input-wrapper
+) {
+  border-color: var(--border-weak);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo,
+  .clone-ai-card,
+  .clone-ai-platform-spec,
+  .clone-ai-count-panel,
+  .clone-ai-replicate-panel,
+  .clone-ai-module-panel,
+  .clone-ai-model-panel,
+  .clone-ai-video-panel,
+  .clone-ai-empty-state .anticon,
+  .clone-ai-main-result,
+  .clone-ai-result-grid button,
+  .clone-ai-input-wrapper
+) {
+  background: var(--bg-panel);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-upload-zone,
+  .clone-ai-upload-icon,
+  .clone-ai-uploaded-file,
+  .clone-ai-tag-group button,
+  .clone-ai-basic-select > button,
+  .clone-ai-basic-select__menu,
+  .clone-ai-basic-select__menu button,
+  .clone-ai-replicate-tabs button,
+  .clone-ai-replicate-upload,
+  .clone-ai-replicate-link input,
+  .clone-ai-replicate-levels button,
+  .clone-ai-count-row,
+  .clone-ai-count-stepper button,
+  .clone-ai-module-list button,
+  .clone-ai-model-tabs button,
+  .clone-ai-model-scene-grid button,
+  .clone-ai-model-select,
+  .clone-ai-model-select > button,
+  .clone-ai-model-select__menu,
+  .clone-ai-model-select__menu button,
+  .clone-ai-video-options button,
+  .clone-ai-video-smart,
+  .clone-ai-video-smart i,
+  .clone-ai-send-button
+) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-upload-zone:hover,
+  .clone-ai-upload-zone.is-dragging,
+  .clone-ai-tag-group button:hover,
+  .clone-ai-basic-select > button:hover,
+  .clone-ai-basic-select > button.is-open,
+  .clone-ai-basic-select__menu button:hover,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button:hover,
+  .clone-ai-replicate-upload:hover,
+  .clone-ai-replicate-levels button:hover,
+  .clone-ai-count-stepper button:hover:not(:disabled),
+  .clone-ai-module-list button:hover,
+  .clone-ai-model-tabs button:hover,
+  .clone-ai-model-scene-grid button:hover,
+  .clone-ai-model-select > button:hover,
+  .clone-ai-model-select > button.is-open,
+  .clone-ai-model-select__menu button:hover,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button:hover,
+  .clone-ai-video-smart:hover,
+  .clone-ai-send-button:hover:not(:disabled),
+  .clone-ai-main-result:hover,
+  .clone-ai-result-grid button:hover
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em.is-ready,
+  .clone-ai-tag-group button.is-active,
+  .clone-ai-basic-select__menu button.is-active,
+  .clone-ai-replicate-tabs button.is-active,
+  .clone-ai-replicate-levels button.is-active,
+  .clone-ai-module-list button.is-active,
+  .clone-ai-model-tabs button.is-active,
+  .clone-ai-model-scene-grid button.is-active,
+  .clone-ai-model-select__menu button.is-active,
+  .clone-ai-video-options button.is-active,
+  .clone-ai-video-smart.is-on
+) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong,
+  .clone-ai-card h2,
+  .clone-ai-platform-spec strong,
+  .clone-ai-basic-select > button strong,
+  .clone-ai-model-select > button strong,
+  .clone-ai-preview-header strong,
+  .clone-ai-empty-state strong,
+  .clone-ai-input-wrapper textarea
+) {
+  color: var(--fg-body);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo em,
+  .clone-ai-card h2 .anticon,
+  .clone-ai-upload-title,
+  .clone-ai-upload-hint,
+  .clone-ai-settings-label,
+  .clone-ai-basic-select > button span,
+  .clone-ai-model-select > button span,
+  .clone-ai-preview-header span,
+  .clone-ai-empty-state,
+  .clone-ai-empty-state span,
+  .clone-ai-char-count,
+  .clone-ai-input-wrapper textarea::placeholder
+) {
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo__mark,
+  .clone-ai-upload-zone strong,
+  .clone-ai-generate,
+  .clone-ai-send-button
+) {
+  background: var(--accent);
+  color: var(--dg-button-text, #061014);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-logo strong span,
+  .clone-ai-upload-icon,
+  .clone-ai-preview-header b,
+  .clone-ai-video-smart.is-on i::after
+) {
+  color: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+  .clone-ai-generate:disabled,
+  .clone-ai-send-button:disabled
+) {
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+  background: var(--accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
+  border-color: var(--border-default);
+  background: var(--bg-panel);
+  color: var(--fg-muted);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+
+.size-template-workbench {
+  --size-green: var(--accent);
+  --size-cyan: var(--accent);
+  --size-violet: var(--accent);
+  --size-amber: var(--accent);
+}
+
+.size-template-workbench .product-clone-panel,
+.size-template-workbench :is(
+  .size-template-upload-card,
+  .size-template-generate-card,
+  .size-template-platform-dialog,
+  .size-template-main-frame,
+  .size-template-spec-grid,
+  .size-template-preview-note,
+  .size-template-empty-state__image
+) {
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+}
+
+.size-template-workbench :is(.size-template-detail-card span, .size-template-check-list span) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.size-template-workbench :is(
+  .size-template-upload-card h2,
+  .size-template-generate-card h2,
+  .size-template-main-frame span,
+  .size-template-spec-grid b,
+  .size-template-preview-note > div:first-child
+) {
+  color: var(--fg-body);
+}
+
+.size-template-workbench :is(.size-template-platform-dialog button, .size-template-preview-note p) {
+  color: var(--fg-muted);
+}
+
+.size-template-workbench :is(
+  .size-template-static-field.is-clickable > button:hover,
+  .size-template-static-field.is-clickable > button[aria-expanded="true"],
+  .size-template-platform-dialog button:hover,
+  .size-template-platform-dialog button.is-active
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.size-template-workbench :is(
+  .size-template-preview-note > div:first-child .anticon,
+  .size-template-check-list .anticon
+) {
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page {
+  --commerce-accent: var(--accent);
+  --commerce-accent-strong: var(--accent);
+  --commerce-accent-rgb: var(--accent-rgb);
+  --commerce-ink: var(--fg-body);
+  --commerce-muted: var(--fg-muted);
+  --commerce-line: var(--border-subtle);
+  --commerce-panel: var(--bg-panel);
+  --commerce-soft: var(--bg-inset);
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-panel,
+  .omni-commerce-band,
+  .omni-commerce-flow-head,
+  .omni-commerce-template,
+  .omni-commerce-project
+) {
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-ghost-action,
+  .omni-commerce-text-button,
+  .omni-commerce-segmented button,
+  .omni-commerce-ratio-grid button,
+  .omni-commerce-filter button,
+  .omni-commerce-flow-head button,
+  .omni-commerce-template em,
+  .omni-commerce-search,
+  .omni-commerce-project__delete
+) {
+  border-color: var(--border-subtle);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-ghost-action:hover,
+  .omni-commerce-text-button:hover,
+  .omni-commerce-segmented button:hover,
+  .omni-commerce-ratio-grid button:hover,
+  .omni-commerce-filter button:hover,
+  .omni-commerce-flow-head button:hover,
+  .omni-commerce-template__select:hover em,
+  .omni-commerce-project__delete:hover
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-segmented button.is-active,
+  .omni-commerce-ratio-grid button.is-active,
+  .omni-commerce-filter button.is-active,
+  .omni-commerce-step-head > span,
+  .omni-commerce-template span
+) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-section-head h2,
+  .omni-commerce-template strong,
+  .omni-commerce-project strong,
+  .omni-commerce-search input
+) {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
+  .omni-commerce-section-head span,
+  .omni-commerce-template p,
+  .omni-commerce-project span,
+  .omni-commerce-search,
+  .omni-commerce-search input::placeholder
+) {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page .omni-commerce-section-head .anticon {
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card {
+  border: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card:hover,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card.is-active {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--bg-panel);
+}
diff --git a/src/styles/pages/more-tools.css b/src/styles/pages/more-tools.css
new file mode 100644
index 0000000..2f38e3d
--- /dev/null
+++ b/src/styles/pages/more-tools.css
@@ -0,0 +1,1288 @@
+.image-workbench-page {
+  --image-workbench-bg: var(--bg-base);
+  --image-workbench-panel: var(--bg-panel);
+  --image-workbench-panel-soft: var(--bg-inset);
+  --image-workbench-border: var(--border-weak);
+  --image-workbench-border-strong: var(--border-subtle);
+  --image-workbench-text: var(--fg-body);
+  --image-workbench-muted: var(--fg-muted);
+  --image-workbench-accent: var(--accent);
+  --image-workbench-accent-soft: var(--accent-muted, rgba(var(--accent-rgb), 0.13));
+  --image-workbench-canvas: var(--bg-inset);
+  display: grid;
+  grid-template-rows: 46px 52px minmax(0, 1fr) 42px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding-left: 82px;
+  background: var(--image-workbench-bg);
+  color: var(--image-workbench-text);
+  font-family: var(--font-sans);
+}
+
+.image-workbench-topbar,
+.image-workbench-subbar,
+.token-usage-topbar {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 12px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--image-workbench-border);
+  background: var(--bg-surface, var(--image-workbench-panel));
+  color: var(--image-workbench-text);
+}
+
+.image-workbench-topbar,
+.token-usage-topbar {
+  background:
+    linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), transparent 44%),
+    var(--bg-surface, var(--image-workbench-panel));
+}
+
+.image-workbench-subbar {
+  justify-content: space-between;
+}
+
+.image-workbench-back-to-more,
+.image-workbench-icon-btn,
+.image-workbench-mode-tabs button,
+.image-workbench-tool-strip button,
+.image-workbench-segmented button,
+.image-workbench-url-row button,
+.image-workbench-actions button,
+.image-workbench-count button,
+.image-workbench-chip-grid button,
+.image-workbench-direction-pad button,
+.token-usage-tool-strip button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  gap: 7px;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--image-workbench-panel-soft);
+  color: var(--image-workbench-muted);
+  box-shadow: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    border-color 140ms ease,
+    background 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.image-workbench-back-to-more {
+  flex: 0 0 auto;
+  padding: 0 12px;
+  color: var(--image-workbench-text);
+}
+
+.image-workbench-icon-btn {
+  width: 34px;
+  padding: 0;
+  background: transparent;
+}
+
+.image-workbench-back-to-more:hover,
+.image-workbench-icon-btn:hover,
+.image-workbench-mode-tabs button:hover,
+.image-workbench-tool-strip button:hover,
+.image-workbench-segmented button:hover,
+.image-workbench-url-row button:hover,
+.image-workbench-actions button:hover,
+.image-workbench-count button:hover,
+.image-workbench-chip-grid button:hover,
+.image-workbench-direction-pad button:hover,
+.token-usage-tool-strip button:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: var(--bg-hover);
+  color: var(--image-workbench-text);
+  transform: translateY(-1px);
+}
+
+.image-workbench-mode-tabs button.is-active,
+.image-workbench-tool-strip button.is-active,
+.image-workbench-segmented button.is-active,
+.image-workbench-count button.is-active,
+.image-workbench-chip-grid button.is-active,
+.image-workbench-direction-pad button.is-active,
+.token-usage-tool-strip button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: var(--image-workbench-accent-soft);
+  color: var(--image-workbench-accent);
+}
+
+.image-workbench-tool-strip,
+.token-usage-tool-strip {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 2px 2px 6px;
+  scrollbar-width: none;
+}
+
+.image-workbench-tool-strip::-webkit-scrollbar,
+.token-usage-tool-strip::-webkit-scrollbar {
+  display: none;
+}
+
+.image-workbench-tool-strip button,
+.token-usage-tool-strip button {
+  flex: 0 0 auto;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.image-workbench-subbar > strong,
+.token-usage-title {
+  flex: 0 0 auto;
+  color: var(--image-workbench-text);
+  font-size: 14px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.image-workbench-mode-tabs,
+.image-workbench-segmented,
+.image-workbench-count > div {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+}
+
+.image-workbench-camera-summary {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 12px;
+  color: var(--image-workbench-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.image-workbench-camera-summary strong {
+  color: var(--image-workbench-accent);
+}
+
+.image-workbench-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(238px, 280px);
+  min-height: 0;
+  gap: 14px;
+  padding: 14px 16px;
+  overflow: hidden;
+}
+
+.image-workbench-layout--camera,
+.image-workbench-layout--inpaint {
+  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+}
+
+.image-workbench-layout--inpaint {
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(220px, 280px);
+}
+
+.image-workbench-panel {
+  display: grid;
+  align-content: start;
+  min-width: 0;
+  min-height: 0;
+  gap: 12px;
+  overflow: auto;
+  scrollbar-color: rgba(var(--accent-rgb), 0.34) transparent;
+}
+
+.image-workbench-control-card,
+.image-workbench-right-note {
+  display: grid;
+  min-width: 0;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--image-workbench-border);
+  border-radius: var(--radius-sm);
+  background: var(--image-workbench-panel);
+  box-shadow: none;
+}
+
+.image-workbench-section-title,
+.image-workbench-switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 10px;
+}
+
+.image-workbench-panel h3,
+.image-workbench-section-title h3 {
+  margin: 0;
+  color: var(--image-workbench-text);
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.image-workbench-section-title span,
+.image-workbench-count > span,
+.image-workbench-select > span,
+.image-workbench-upload span,
+.image-workbench-empty span,
+.image-workbench-status p,
+.image-workbench-status em,
+.image-workbench-right-note span,
+.image-workbench-range span,
+.image-workbench-range em {
+  color: var(--image-workbench-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.image-workbench-panel input[type="file"] {
+  display: none;
+}
+
+.image-workbench-upload-shell {
+  position: relative;
+  min-width: 0;
+}
+
+.image-workbench-upload,
+.image-workbench-empty {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 132px;
+  padding: 16px;
+  border: 1px dashed rgba(var(--accent-rgb), 0.46);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent),
+    var(--bg-inset);
+  color: var(--image-workbench-text);
+  text-align: center;
+  cursor: pointer;
+}
+
+.image-workbench-upload--tile {
+  min-height: 116px;
+}
+
+.image-workbench-upload img,
+.image-workbench-reference-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-workbench-upload img {
+  max-height: 168px;
+  border-radius: var(--radius-xs);
+}
+
+.image-workbench-upload > .anticon,
+.image-workbench-empty > .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-sm);
+  background: var(--image-workbench-accent-soft);
+  color: var(--image-workbench-accent);
+  font-size: 20px;
+}
+
+.image-workbench-upload strong,
+.image-workbench-empty strong {
+  color: var(--image-workbench-text);
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.image-workbench-upload-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(255, 90, 95, 0.34);
+  border-radius: var(--radius-xs);
+  background: rgba(255, 90, 95, 0.14);
+  color: #ff9a9d;
+  cursor: pointer;
+}
+
+.image-workbench-reference-grid,
+.image-workbench-canvas-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.image-workbench-reference-thumb {
+  position: relative;
+  min-height: 118px;
+  overflow: hidden;
+  border: 1px solid var(--image-workbench-border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.image-workbench-url-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.image-workbench-url-row label,
+.image-workbench-select select,
+.image-workbench-prompt textarea,
+.image-workbench-camera-prompt textarea,
+.token-limit-row input,
+.script-input-card textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: var(--radius-xs);
+  background-color: var(--bg-inset);
+  color: var(--image-workbench-text);
+  font: inherit;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.image-workbench-url-row label {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 10px;
+}
+
+.image-workbench-url-row input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  outline: none;
+}
+
+.image-workbench-url-row button {
+  padding: 0 12px;
+}
+
+textarea.image-workbench-prompt,
+.image-workbench-camera-prompt textarea {
+  min-height: 104px;
+  padding: 10px;
+  resize: vertical;
+}
+
+.image-workbench-camera-prompt textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.image-workbench-select {
+  display: grid;
+  gap: 8px;
+}
+
+.image-workbench-select select {
+  width: 100%;
+  height: 38px;
+  padding: 0 28px 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.image-workbench-select select:hover {
+  border-color: rgba(var(--accent-rgb), 0.34);
+}
+
+.image-workbench-select select:focus {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
+}
+
+.image-workbench-range {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr) 54px;
+  align-items: center;
+  gap: 10px;
+}
+
+.image-workbench-range input {
+  width: 100%;
+  accent-color: var(--image-workbench-accent);
+}
+
+.image-workbench-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.image-workbench-chip-grid button {
+  min-height: 32px;
+}
+
+.image-workbench-direction-pad {
+  display: grid;
+  grid-template-columns: repeat(3, 34px);
+  grid-template-rows: repeat(3, 34px);
+  justify-content: center;
+  gap: 8px;
+}
+
+.image-workbench-direction-pad button:nth-child(1) {
+  grid-column: 2;
+}
+
+.image-workbench-direction-pad button:nth-child(2) {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.image-workbench-direction-pad button:nth-child(3) {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.image-workbench-direction-pad button:nth-child(4) {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.image-workbench-direction-pad button:nth-child(5) {
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.image-workbench-toggle {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  cursor: pointer;
+}
+
+.image-workbench-toggle::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--image-workbench-muted);
+  transition: transform 140ms ease, background 140ms ease;
+}
+
+.image-workbench-toggle.is-active {
+  background: var(--image-workbench-accent-soft);
+}
+
+.image-workbench-toggle.is-active::after {
+  background: var(--image-workbench-accent);
+  transform: translateX(18px);
+}
+
+.image-workbench-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-workbench-actions button {
+  min-height: 38px;
+  padding: 0 14px;
+}
+
+.image-workbench-actions .image-workbench-primary {
+  border-color: var(--image-workbench-accent);
+  background: var(--image-workbench-accent);
+  color: #061014;
+}
+
+.image-workbench-canvas {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+  border: 1px solid var(--image-workbench-border);
+  border-radius: var(--radius-sm);
+  background:
+    radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 1px, transparent 1.4px),
+    var(--image-workbench-canvas);
+  background-size: 22px 22px;
+}
+
+.image-workbench-canvas > img,
+.image-workbench-canvas-grid img,
+.image-workbench-inpaint-stage img,
+.image-workbench-camera-stage img,
+.resolution-upscale-video-stage video {
+  display: block;
+  max-width: 100%;
+  max-height: 72vh;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: var(--radius-sm);
+  background: #060808;
+  object-fit: contain;
+}
+
+.image-workbench-canvas-grid {
+  width: min(100%, 740px);
+}
+
+.image-workbench-inpaint-stage,
+.image-workbench-camera-stage,
+.resolution-upscale-video-stage {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  width: min(100%, 920px);
+}
+
+.image-workbench-inpaint-stage span,
+.image-workbench-camera-stage span,
+.resolution-upscale-video-stage span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: 999px;
+  background: var(--bg-panel);
+  color: var(--image-workbench-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.image-workbench-empty--button {
+  width: min(100%, 420px);
+}
+
+.image-workbench-switch-row button {
+  position: relative;
+  width: 42px;
+  height: 22px;
+  border: 1px solid var(--image-workbench-border-strong);
+  border-radius: 999px;
+  background: var(--image-workbench-accent-soft);
+}
+
+.image-workbench-switch-row button::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--image-workbench-accent);
+}
+
+.image-workbench-count {
+  display: grid;
+  gap: 8px;
+}
+
+.image-workbench-right-note {
+  align-content: start;
+}
+
+.image-workbench-right-note > .anticon {
+  color: var(--image-workbench-accent);
+  font-size: 20px;
+}
+
+.image-workbench-right-note strong {
+  color: var(--image-workbench-text);
+}
+
+.image-workbench-status {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+  padding: 0 16px;
+  border-top: 1px solid var(--image-workbench-border);
+  background: var(--bg-surface, var(--image-workbench-panel));
+}
+
+.image-workbench-status span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--image-workbench-accent-soft);
+  color: var(--image-workbench-accent);
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.image-workbench-status p {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-workbench-status em {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-style: normal;
+  white-space: nowrap;
+}
+
+.script-token-page {
+  width: 100%;
+  min-height: 100%;
+  overflow: auto;
+  padding: 24px 0 64px;
+  background: var(--bg-base);
+  color: var(--fg-body);
+}
+
+.script-token-page__scroll {
+  display: grid;
+  gap: 20px;
+  width: min(100%, 1180px);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.script-token-hero,
+.script-score-panel,
+.token-panel,
+.script-card,
+.script-empty-card,
+.script-loading-card,
+.script-input-card,
+.script-score-summary,
+.token-distribution-card,
+.token-member-card {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-panel);
+  box-shadow: none;
+}
+
+.script-token-hero {
+  display: grid;
+  gap: 10px;
+  padding: 20px;
+  background:
+    linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), transparent 58%),
+    var(--bg-panel);
+}
+
+.script-token-hero h1,
+.script-token-section-head h2,
+.script-card h3,
+.token-member-stack h3 {
+  margin: 0;
+  color: var(--fg-body);
+}
+
+.script-token-hero h1 {
+  font-size: clamp(24px, 4vw, 34px);
+  line-height: 1.12;
+}
+
+.script-token-hero p,
+.script-score-summary p,
+.script-accordion p,
+.script-accordion div,
+.token-stat-grid article span,
+.token-stat-grid article em,
+.token-distribution-card > div:first-child span,
+.token-legend span,
+.token-member-usage small,
+.token-detail-grid em,
+.token-limit-row span {
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+.script-token-badge,
+.script-score-count,
+.token-avatar,
+.token-legend b {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-height: 28px;
+  gap: 8px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.script-token-badge--soft,
+.script-score-count {
+  background: var(--accent-muted, rgba(var(--accent-rgb), 0.13));
+  color: var(--accent);
+}
+
+.script-score-panel,
+.token-panel,
+.script-card {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+}
+
+.script-token-section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.script-input-card {
+  overflow: hidden;
+}
+
+.script-input-card__bar,
+.script-input-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-inset);
+}
+
+.script-input-card__bar {
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.script-input-card__footer {
+  justify-content: flex-start;
+  border-top: 1px solid var(--border-weak);
+}
+
+.script-input-card__footer input {
+  display: none;
+}
+
+.script-input-card textarea {
+  min-height: 280px;
+  padding: 14px;
+  border: 0;
+  border-radius: 0;
+  resize: vertical;
+}
+
+.script-input-card__footer button,
+.script-action-row button,
+.token-range-tabs button,
+.token-limit-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  gap: 7px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.script-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.script-action-primary {
+  border-color: var(--accent) !important;
+  background: var(--accent) !important;
+  color: #061014 !important;
+}
+
+.script-action-row button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.script-loading-card,
+.script-empty-card {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  padding: 28px 20px;
+  text-align: center;
+}
+
+.script-loading-card__pixels {
+  display: flex;
+  gap: 6px;
+}
+
+.script-loading-card__pixels span {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  background: var(--accent);
+}
+
+.script-result-stack,
+.script-list,
+.token-member-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.script-score-summary {
+  display: grid;
+  grid-template-columns: 132px minmax(0, 1fr);
+  align-items: center;
+  gap: 18px;
+  padding: 18px;
+}
+
+.script-score-ring {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 132px;
+  height: 132px;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  border-radius: 50%;
+  background: var(--bg-inset);
+}
+
+.script-score-ring strong {
+  color: var(--accent);
+  font-size: 40px;
+}
+
+.script-score-ring span {
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.script-score-ring em {
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #061014;
+  font-style: normal;
+  transform: translateX(-50%);
+}
+
+.script-score-summary h3 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.script-score-meta,
+.token-range-tabs,
+.token-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.score-dimension-grid,
+.token-stat-grid,
+.token-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.token-stat-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.score-dimension-card,
+.token-stat-grid article,
+.token-detail-grid span,
+.token-limit-row {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.score-dimension-card > div,
+.token-distribution-card > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 10px;
+}
+
+.score-bar,
+.token-distribution-bar {
+  position: relative;
+  width: 100%;
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.token-distribution-bar {
+  display: flex;
+  height: 24px;
+}
+
+.score-bar span,
+.score-bar i {
+  display: block;
+  height: 100%;
+}
+
+.tone-good {
+  color: #63e6a4;
+}
+
+.tone-warn {
+  color: #f6c453;
+}
+
+.tone-orange {
+  color: #ffb37b;
+}
+
+.tone-bad {
+  color: #ff9a9d;
+}
+
+.tone-bg-good {
+  background: #22c55e;
+}
+
+.tone-bg-warn {
+  background: #f59e0b;
+}
+
+.tone-bg-orange {
+  background: #f97316;
+}
+
+.tone-bg-bad {
+  background: #ef4444;
+}
+
+.script-accordion {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  overflow: hidden;
+}
+
+.script-accordion button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 0;
+  background: transparent;
+  color: var(--fg-body);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.script-accordion p,
+.script-accordion div {
+  margin: 0;
+  padding: 0 14px 12px;
+  font-size: 13px;
+}
+
+.script-accordion--guide div {
+  border-top: 1px solid var(--border-weak);
+  padding-top: 12px;
+  background: var(--bg-panel);
+}
+
+.token-usage-page {
+  display: grid;
+  grid-template-rows: 46px minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 0 0 82px;
+}
+
+.token-usage-page.script-token-page {
+  background: var(--bg-base);
+}
+
+.token-usage-page .script-token-page__scroll {
+  width: min(100%, 1180px);
+  overflow: auto;
+  padding: 18px 24px 64px;
+}
+
+.token-panel,
+.token-distribution-card {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+}
+
+.token-stat-grid article strong,
+.token-detail-grid strong,
+.token-member-info strong {
+  color: var(--fg-body);
+}
+
+.token-stat-grid article strong {
+  font-size: 26px;
+}
+
+.token-distribution-card {
+  padding: 14px;
+}
+
+.token-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  font-size: 11px;
+}
+
+.token-avatar,
+.token-legend b {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 8px;
+}
+
+.token-member-card {
+  overflow: hidden;
+}
+
+.token-member-card__head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.token-member-info {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+}
+
+.token-member-info strong {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.token-member-info em {
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-style: normal;
+}
+
+.token-member-usage {
+  display: grid;
+  justify-items: end;
+  min-width: 112px;
+  gap: 3px;
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.token-member-card__body {
+  display: grid;
+  gap: 12px;
+  padding: 0 14px 14px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.token-detail-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.token-limit-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.token-limit-row input {
+  width: 120px;
+  height: 34px;
+  padding: 0 10px;
+}
+
+
+@media (max-width: 1180px) {
+  .image-workbench-page,
+  .token-usage-page {
+    padding-left: 20px;
+  }
+
+  .image-workbench-layout,
+  .image-workbench-layout--inpaint,
+  .image-workbench-layout--camera,
+  .resolution-upscale-layout {
+    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+  }
+
+  .image-workbench-panel--right {
+    display: none;
+  }
+}
+
+@media (max-width: 860px) {
+  .image-workbench-page {
+    grid-template-rows: auto auto auto 42px;
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+    padding: 0 12px 72px;
+  }
+
+  .image-workbench-topbar,
+  .image-workbench-subbar,
+  .token-usage-topbar {
+    min-height: 52px;
+    flex-wrap: wrap;
+    padding: 8px 10px;
+  }
+
+  .image-workbench-layout,
+  .image-workbench-layout--inpaint,
+  .image-workbench-layout--camera,
+  .resolution-upscale-layout {
+    grid-template-columns: minmax(0, 1fr);
+    overflow: visible;
+    padding: 12px 0;
+  }
+
+  .image-workbench-panel {
+    overflow: visible;
+  }
+
+  .image-workbench-canvas {
+    min-height: 360px;
+  }
+
+  .image-workbench-status {
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+  }
+
+  .token-usage-page {
+    height: auto;
+    min-height: 100%;
+    overflow: auto;
+    padding: 0 12px 72px;
+  }
+
+  .token-usage-page .script-token-page__scroll,
+  .script-token-page__scroll {
+    padding-inline: 12px;
+  }
+
+  .score-dimension-grid,
+  .token-stat-grid,
+  .token-detail-grid,
+  .script-score-summary {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .token-member-card__head {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .token-member-usage {
+    grid-column: 1 / -1;
+    justify-items: start;
+  }
+}
diff --git a/src/styles/pages/more.css b/src/styles/pages/more.css
new file mode 100644
index 0000000..efa9b84
--- /dev/null
+++ b/src/styles/pages/more.css
@@ -0,0 +1,315 @@
+.more-page-v2 {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding-left: 82px;
+  background: var(--bg-base);
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.more-page-v2__header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 18px 28px 14px;
+  border-bottom: 1px solid var(--border-weak);
+  background:
+    linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 50%),
+    var(--bg-surface, var(--bg-panel));
+}
+
+.more-page-v2__header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.more-page-v2__filters {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.more-page-v2__filters button {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 140ms ease;
+}
+
+.more-page-v2__filters button:hover {
+  border-color: rgba(var(--accent-rgb), 0.3);
+  color: var(--fg-body);
+}
+
+.more-page-v2__filters button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.more-page-v2__scroll {
+  overflow-y: auto;
+  padding: 24px 28px 64px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent;
+}
+
+.more-page-v2__section {
+  margin-bottom: 28px;
+}
+
+.more-page-v2__section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 14px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.more-page-v2__section-title .anticon {
+  font-size: 13px;
+  color: var(--accent);
+}
+
+.more-page-v2__recent-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.more-page-v2__featured-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.more-card--featured {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 24px;
+  border-radius: var(--radius-md, 14px);
+  background: var(--card-gradient);
+  border: 1px solid var(--border-weak);
+  transition: all 200ms ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.more-card--featured::before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  right: -20px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06), transparent 70%);
+  pointer-events: none;
+}
+
+.more-card--featured:hover {
+  border-color: rgba(var(--accent-rgb), 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+.more-card__featured-icon {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.more-card__featured-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+}
+
+.more-card__featured-body strong {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.more-card__featured-body span {
+  font-size: 13px;
+  color: var(--fg-muted);
+  line-height: 1.5;
+}
+
+.more-card__cta {
+  margin-top: 4px;
+  font-size: 12px !important;
+  font-weight: 600;
+  color: var(--accent) !important;
+}
+
+.more-page-v2__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.more-card {
+  position: relative;
+  display: grid;
+  align-content: start;
+  justify-items: start;
+  gap: 8px;
+  padding: 18px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm, 10px);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: all 160ms ease;
+}
+
+.more-card:hover {
+  border-color: rgba(var(--accent-rgb), 0.4);
+  background: var(--bg-hover, rgba(255, 255, 255, 0.03));
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.more-card--pending {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.more-card--pending:hover {
+  transform: none;
+  box-shadow: none;
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.more-card--recent {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  min-width: 140px;
+}
+
+.more-card__icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-xs, 8px);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.more-card--recent .more-card__icon {
+  width: 30px;
+  height: 30px;
+  font-size: 14px;
+}
+
+.more-card strong {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.more-card__desc {
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.more-card__badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+@media (max-width: 1180px) {
+  .more-page-v2 {
+    padding-left: 20px;
+  }
+}
+
+@media (max-width: 860px) {
+  .more-page-v2 {
+    padding-left: 0;
+  }
+
+  .more-page-v2__header {
+    flex-wrap: wrap;
+    padding: 14px 16px 12px;
+    gap: 12px;
+  }
+
+  .more-page-v2__scroll {
+    padding: 16px 16px 48px;
+  }
+
+  .more-page-v2__grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+  }
+
+  .more-page-v2__recent-row {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    padding-bottom: 4px;
+  }
+
+  .more-page-v2__featured-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .more-card--featured {
+    padding: 18px;
+    gap: 12px;
+  }
+
+  .more-card__featured-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    font-size: 20px;
+  }
+
+  .more-card__featured-body strong {
+    font-size: 15px;
+  }
+}
diff --git a/src/styles/pages/profile.css b/src/styles/pages/profile.css
new file mode 100644
index 0000000..7621d3b
--- /dev/null
+++ b/src/styles/pages/profile.css
@@ -0,0 +1 @@
+/* Profile page rules move here as they are retired from legacy-pages.css. */
diff --git a/src/styles/pages/provider-health.css b/src/styles/pages/provider-health.css
new file mode 100644
index 0000000..9668a23
--- /dev/null
+++ b/src/styles/pages/provider-health.css
@@ -0,0 +1,166 @@
+.provider-health-page__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  max-width: 960px;
+}
+
+.provider-health-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.provider-health-toolbar h2 {
+  font-size: 18px;
+  margin: 0 0 4px;
+}
+
+.provider-health-toolbar p {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.provider-health-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.provider-health-toolbar button:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.provider-health-access {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 80px 0;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.provider-health-access button {
+  padding: 8px 20px;
+  border-radius: 10px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+.provider-health-error {
+  color: var(--error, #ef4444);
+  font-size: 13px;
+}
+
+.provider-health-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.provider-health-card {
+  padding: 16px;
+  border-radius: 14px;
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.provider-health-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+}
+
+.provider-health-card__status {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 500;
+}
+
+.provider-health-card__status--healthy {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+
+.provider-health-card__status--arrears,
+.provider-health-card__status--denied,
+.provider-health-card__status--error {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.provider-health-card__status--timeout,
+.provider-health-card__status--no_key {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.provider-health-card__status--unknown {
+  background: rgba(156, 163, 175, 0.15);
+  color: #9ca3af;
+}
+
+.provider-health-card__time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.provider-health-card__error {
+  font-size: 12px;
+  color: var(--error, #ef4444);
+  margin: 0;
+}
+
+.provider-health-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.provider-health-section h3 {
+  font-size: 14px;
+  margin: 0;
+}
+
+.provider-health-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.provider-health-table th {
+  text-align: left;
+  padding: 8px 12px;
+  border-bottom: 2px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.provider-health-table td {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.provider-health-table tr:hover td {
+  background: var(--surface-elevated);
+}
\ No newline at end of file
diff --git a/src/styles/pages/script-tokens.css b/src/styles/pages/script-tokens.css
new file mode 100644
index 0000000..488dba1
--- /dev/null
+++ b/src/styles/pages/script-tokens.css
@@ -0,0 +1,5372 @@
+/* === Script Tokens & Token Usage === */
+.script-token-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.script-token-page__scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.script-token-hero {
+  margin-bottom: 24px;
+}
+
+.script-token-hero h1 {
+  margin: 8px 0 6px;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--fg-body);
+}
+
+.script-token-hero p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--fg-muted);
+  line-height: 1.5;
+}
+
+.script-token-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.script-token-badge--soft {
+  background: rgba(var(--accent-rgb), 0.06);
+}
+
+.script-token-section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.script-token-section-head h2 {
+  margin: 6px 0 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.script-score-count {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.script-score-panel {
+  max-width: 820px;
+}
+
+.script-input-card {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  overflow: hidden;
+}
+
+.script-input-card__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-weak);
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.script-input-card__bar strong {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--fg-body);
+}
+
+.script-input-card textarea {
+  width: 100%;
+  min-height: 140px;
+  padding: 14px;
+  border: none;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 14px;
+  line-height: 1.6;
+  resize: vertical;
+  outline: none;
+}
+
+.script-input-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.script-input-card__footer input[type="file"] {
+  display: none;
+}
+
+.script-input-card__footer button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.script-input-card__footer button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.script-action-row {
+  display: flex;
+  gap: 10px;
+  margin: 16px 0;
+}
+
+.script-action-row button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.script-action-row button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.script-action-primary {
+  border-color: var(--accent) !important;
+  background: rgba(var(--accent-rgb), 0.1) !important;
+  color: var(--accent) !important;
+}
+
+.script-action-primary:hover {
+  background: rgba(var(--accent-rgb), 0.18) !important;
+}
+
+.script-action-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.script-loading-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 32px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  text-align: center;
+}
+
+.script-loading-card__pixels {
+  display: flex;
+  gap: 6px;
+}
+
+.script-loading-card__pixels span {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--accent);
+  animation: script-pulse 0.8s ease-in-out infinite alternate;
+}
+
+.script-loading-card__pixels span:nth-child(2) { animation-delay: 0.1s; }
+.script-loading-card__pixels span:nth-child(3) { animation-delay: 0.2s; }
+.script-loading-card__pixels span:nth-child(4) { animation-delay: 0.3s; }
+.script-loading-card__pixels span:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes script-pulse {
+  from { opacity: 0.3; }
+  to { opacity: 1; }
+}
+
+.script-loading-card strong {
+  color: var(--fg-body);
+}
+
+.script-loading-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.script-result-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.script-score-summary {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.script-score-ring {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+}
+
+.script-score-ring strong {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.script-score-ring span {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.script-score-ring em {
+  font-style: normal;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.script-score-summary h3 {
+  margin: 0 0 6px;
+  font-size: 15px;
+  color: var(--fg-body);
+}
+
+.script-score-summary p {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: var(--fg-muted);
+  line-height: 1.5;
+}
+
+.script-score-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.script-card {
+  padding: 16px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.script-card h3 {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.score-dimension-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.score-dimension-card {
+  padding: 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.score-dimension-card > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.score-dimension-card strong {
+  font-size: 13px;
+  color: var(--fg-body);
+}
+
+.score-dimension-card p {
+  margin: 6px 0 0;
+  font-size: 11px;
+  color: var(--fg-soft);
+}
+
+.score-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-inset);
+  overflow: hidden;
+}
+
+.score-bar span,
+.score-bar i {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+
+.tone-good { color: var(--success); }
+.tone-warn { color: var(--warning); }
+.tone-orange { color: #e67e22; }
+.tone-bad { color: var(--error); }
+.tone-bg-good { background: var(--success); }
+.tone-bg-warn { background: var(--warning); }
+.tone-bg-orange { background: #e67e22; }
+.tone-bg-bad { background: var(--error); }
+
+.script-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.script-accordion {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  overflow: hidden;
+}
+
+.script-accordion button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  background: transparent;
+  color: var(--fg-body);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.script-accordion button em {
+  margin-left: auto;
+  font-style: normal;
+  color: var(--error);
+  font-size: 12px;
+}
+
+.script-accordion p {
+  margin: 0;
+  padding: 0 14px 10px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.script-accordion > div {
+  padding: 0 14px 12px;
+  font-size: 12px;
+  color: var(--success);
+}
+
+.script-empty-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 40px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  text-align: center;
+  color: var(--fg-dim);
+}
+
+.script-empty-card .anticon {
+  font-size: 28px;
+  opacity: 0.5;
+}
+
+.script-empty-card strong {
+  color: var(--fg-body);
+}
+
+.script-empty-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+/* === Token Usage Page === */
+.token-usage-topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.token-usage-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.token-usage-tool-strip {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+}
+
+.token-usage-tool-strip button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.token-usage-tool-strip button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.token-usage-tool-strip button.is-active {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.token-panel {
+  max-width: 820px;
+}
+
+.token-range-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.token-range-tabs button {
+  padding: 5px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.token-range-tabs button.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.token-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.token-stat-grid article {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.token-stat-grid article .anticon {
+  font-size: 16px;
+  color: var(--accent);
+}
+
+.token-stat-grid article span {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.token-stat-grid article strong {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--fg-body);
+}
+
+.token-stat-grid article em {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--fg-soft);
+}
+
+.token-distribution-card {
+  padding: 16px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  margin-bottom: 16px;
+}
+
+.token-distribution-card > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.token-distribution-card > div:first-child strong {
+  font-size: 14px;
+  color: var(--fg-body);
+}
+
+.token-distribution-card > div:first-child span {
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.token-distribution-bar {
+  display: flex;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--bg-inset);
+  margin-bottom: 10px;
+}
+
+.token-distribution-bar span {
+  height: 100%;
+  transition: width 0.3s;
+}
+
+.token-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.token-legend b {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  border-radius: 4px;
+  background: var(--bg-inset);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--fg-soft);
+}
+
+.token-member-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.token-member-stack h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg-body);
+}
+
+.token-member-card {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  overflow: hidden;
+}
+
+.token-member-card__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.token-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.token-member-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.token-member-info strong {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--fg-body);
+}
+
+.token-member-info em {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--fg-soft);
+}
+
+.token-member-info .score-bar {
+  margin-top: 6px;
+}
+
+.token-usage-page.script-token-page {
+  display: grid;
+  grid-template-rows: 46px 52px minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 0 0 82px;
+  background: #06090b;
+}
+
+.token-usage-page .script-token-page__scroll {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 34px;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  overflow: auto;
+  padding: 24px 24px 72px;
+  background: #0b0f11;
+  background-size: 100% 100%;
+  scrollbar-color: rgba(var(--accent-rgb), 0.72) transparent;
+}
+
+.token-usage-page .script-token-page__scroll::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: transparent;
+}
+
+.token-usage-page .script-token-hero,
+.token-usage-page .token-panel {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 820px);
+}
+
+.token-usage-page .script-token-hero,
+.token-usage-page .token-panel,
+.token-usage-page .token-stat-grid article,
+.token-usage-page .token-distribution-card,
+.token-usage-page .token-member-card {
+  background: var(--bg-panel);
+  box-shadow: none;
+}
+
+.token-usage-page .script-token-hero {
+  background: var(--bg-panel);
+}
+
+.token-member-usage {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.token-member-usage small {
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.token-member-card__body {
+  padding: 0 14px 14px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.token-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  padding: 12px 0;
+}
+
+.token-detail-grid span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.token-detail-grid strong {
+  color: var(--fg-body);
+  margin: 0 4px;
+}
+
+.token-detail-grid em {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--fg-soft);
+}
+
+.token-limit-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0 0;
+  border-top: 1px solid var(--border-weak);
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.token-limit-row strong {
+  color: var(--fg-body);
+}
+
+.token-limit-row input {
+  width: 80px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 12px;
+}
+
+.token-limit-row button {
+  padding: 4px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.token-limit-row button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+/* === Script Eval Redesign === */
+.script-eval-page {
+  --script-bg: #0d0f10;
+  --script-panel: #15191b;
+  --script-panel-2: #101315;
+  --script-panel-soft: #1b2022;
+  --script-ink: #f3f5f2;
+  --script-muted: #aeb8b1;
+  --script-soft: #77827c;
+  --script-line: #2a3032;
+  --script-accent: #00ff88;
+  --script-accent-dim: #183527;
+  --script-gold: #f3aa26;
+  --script-green: #26d06e;
+  --script-red: #ff5a5f;
+  background: var(--script-bg);
+  color: var(--script-ink);
+}
+
+.script-eval-shell {
+  width: min(100%, 1480px);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 24px clamp(18px, 3vw, 42px) 56px;
+}
+
+.script-eval-page .script-token-badge {
+  border: 1px solid rgba(0, 255, 136, 0.22);
+  background: rgba(0, 255, 136, 0.08);
+  color: var(--script-accent);
+  font-weight: 800;
+}
+
+.script-eval-workbench {
+  display: grid;
+  grid-template-columns: minmax(480px, 0.95fr) minmax(520px, 1.05fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.script-eval-left,
+.script-eval-right {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.script-eval-card,
+.script-eval-scoreboard {
+  border: 1px solid var(--script-line);
+  border-radius: 18px;
+  background: var(--script-panel);
+  box-shadow: none;
+}
+
+.script-eval-card {
+  padding: 18px;
+}
+
+.script-eval-card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.script-eval-card__head span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--script-accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.script-eval-card__head h2 {
+  margin: 5px 0 0;
+  color: var(--script-ink);
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.script-eval-card__head em {
+  flex: 0 0 auto;
+  font-style: normal;
+  color: var(--script-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.script-eval-card__head h2,
+.script-eval-scoreboard h2,
+.script-eval-total-score strong,
+.script-eval-empty strong,
+.script-eval-preview strong,
+.script-eval-loading strong,
+.script-eval-insight-grid strong,
+.script-eval-criteria strong,
+.script-eval-page .score-dimension-card strong,
+.script-eval-page .script-accordion button {
+  color: var(--script-ink);
+}
+
+.script-eval-loading p,
+.script-eval-empty p,
+.script-eval-preview p,
+.script-eval-diagnosis > p,
+.script-eval-scoreboard p,
+.script-eval-page .score-dimension-card p,
+.script-eval-page .script-accordion p,
+.script-eval-criteria p {
+  color: var(--script-muted);
+}
+
+.script-eval-import-strip {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 12px;
+  border: 1px solid var(--script-line);
+  border-radius: 14px;
+  background: var(--script-panel-2);
+}
+
+.script-eval-import-strip > div {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 2px 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.script-eval-import-strip .anticon {
+  grid-row: span 2;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: var(--script-accent-dim);
+  color: var(--script-accent);
+}
+
+.script-eval-import-strip strong {
+  overflow: hidden;
+  color: var(--script-ink);
+  font-size: 14px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.script-eval-import-strip span {
+  color: var(--script-soft);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.script-eval-import-strip input {
+  display: none;
+}
+
+.script-eval-page button {
+  border-radius: 12px;
+}
+
+.script-eval-import-strip button,
+.script-eval-actions button,
+.script-accordion button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 38px;
+  border: 1px solid var(--script-line);
+  background: var(--script-panel-soft);
+  color: var(--script-ink);
+  padding: 0 13px;
+  font-size: 13px;
+  font-weight: 750;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease;
+}
+
+.script-eval-import-strip button:hover,
+.script-eval-actions button:hover,
+.script-accordion button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(0, 255, 136, 0.38);
+  background: #202527;
+}
+
+.script-eval-input-card textarea {
+  width: 100%;
+  min-height: 430px;
+  padding: 16px;
+  border: 1px solid var(--script-line);
+  border-radius: 16px;
+  outline: none;
+  resize: vertical;
+  background: var(--script-panel-2);
+  color: var(--script-ink);
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.75;
+}
+
+.script-eval-input-card textarea:focus {
+  border-color: rgba(0, 255, 136, 0.45);
+  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.08);
+}
+
+.script-eval-input-card textarea::placeholder {
+  color: #6f7b74;
+}
+
+.script-eval-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.script-eval-actions .script-eval-primary {
+  border-color: var(--script-accent);
+  background: var(--script-accent);
+  color: #061014;
+  box-shadow: none;
+}
+
+.script-eval-actions .script-eval-primary:hover:not(:disabled) {
+  background: #58ffac;
+}
+
+.script-eval-actions .script-eval-primary:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+  box-shadow: none;
+}
+
+.script-eval-loading {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  padding: 28px;
+  text-align: center;
+}
+
+.script-eval-loading strong,
+.script-eval-empty strong,
+.script-eval-preview strong {
+  color: var(--script-ink);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.script-eval-loading p,
+.script-eval-empty p,
+.script-eval-preview p,
+.script-eval-diagnosis > p,
+.script-eval-scoreboard p {
+  margin: 0;
+  color: var(--script-muted);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.65;
+}
+
+.script-eval-empty,
+.script-eval-preview {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 13px;
+  align-items: center;
+}
+
+.script-eval-empty > .anticon,
+.script-eval-preview > .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: var(--script-accent-dim);
+  color: var(--script-accent);
+  font-size: 20px;
+}
+
+.script-eval-scoreboard {
+  display: grid;
+  grid-template-columns: 132px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  padding: 18px;
+  background: var(--script-panel);
+  color: var(--script-ink);
+}
+
+.script-eval-score-ring {
+  --score: 0;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  width: 124px;
+  height: 124px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at center, var(--script-panel) 0 58%, transparent 59%),
+    conic-gradient(var(--script-accent) calc(var(--score) * 1%), rgba(255, 255, 255, 0.1) 0);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.script-eval-score-ring strong {
+  color: var(--script-ink);
+  font-size: 36px;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.script-eval-score-ring span {
+  color: var(--script-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.script-eval-score-ring em {
+  margin-top: 5px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--script-accent-dim);
+  color: var(--script-accent);
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.script-eval-scoreboard h2 {
+  margin: 10px 0 8px;
+  color: var(--script-ink);
+  font-size: 24px;
+  font-weight: 850;
+}
+
+.script-eval-scoreboard p {
+  color: var(--script-muted);
+}
+
+.script-eval-diagnosis {
+  display: grid;
+  gap: 14px;
+}
+
+.script-eval-insight-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.script-eval-insight-grid article {
+  display: grid;
+  gap: 4px;
+  min-height: 66px;
+  padding: 12px;
+  border: 1px solid var(--script-line);
+  border-radius: 14px;
+  background: var(--script-panel-soft);
+}
+
+.script-eval-insight-grid strong {
+  color: var(--script-ink);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.script-eval-insight-grid span {
+  color: var(--script-muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.script-eval-dimensions .score-dimension-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.script-eval-page .score-dimension-card {
+  border-color: var(--script-line);
+  border-radius: 14px;
+  background: var(--script-panel-2);
+}
+
+.script-eval-page .score-dimension-card strong,
+.script-eval-page .script-accordion button {
+  color: var(--script-ink);
+}
+
+.script-eval-page .score-dimension-card p,
+.script-eval-page .script-accordion p {
+  color: var(--script-muted);
+}
+
+.script-eval-page .score-bar {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.script-eval-criteria {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.script-eval-criteria article {
+  min-height: 96px;
+  padding: 13px;
+  border: 1px solid var(--script-line);
+  border-radius: 14px;
+  background: var(--script-panel-2);
+}
+
+.script-eval-criteria div {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.script-eval-criteria strong {
+  color: var(--script-ink);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.script-eval-criteria span {
+  color: var(--script-accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.script-eval-criteria p {
+  margin: 0;
+  color: var(--script-muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.script-eval-page .script-list {
+  gap: 10px;
+}
+
+.script-eval-page .script-accordion {
+  border-color: var(--script-line);
+  border-radius: 14px;
+  background: var(--script-panel-2);
+}
+
+.script-eval-page .script-accordion button {
+  justify-content: flex-start;
+  min-height: 44px;
+  background: transparent;
+}
+
+.script-eval-page .script-accordion button span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.script-eval-page .script-accordion button em {
+  margin-left: auto;
+  color: var(--script-accent);
+  font-weight: 800;
+}
+
+.script-eval-page .script-accordion > div {
+  margin: 0 12px 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--script-accent-dim);
+  color: var(--script-green);
+  font-weight: 650;
+  line-height: 1.55;
+}
+
+.script-eval-scope-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.script-eval-scope-list span {
+  padding: 7px 10px;
+  border: 1px solid var(--script-line);
+  border-radius: 999px;
+  background: var(--script-panel-2);
+  color: var(--script-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.script-eval-page .tone-good { color: var(--script-green); }
+.script-eval-page .tone-warn { color: var(--script-gold); }
+.script-eval-page .tone-orange { color: #da7b20; }
+.script-eval-page .tone-bad { color: var(--script-accent); }
+.script-eval-page .tone-bg-good { background: var(--script-green); }
+.script-eval-page .tone-bg-warn { background: var(--script-gold); }
+.script-eval-page .tone-bg-orange { background: #da7b20; }
+.script-eval-page .tone-bg-bad { background: var(--script-accent); }
+
+/* === Radar Chart System === */
+.radar-chart-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 260px;
+}
+
+.radar-chart-svg {
+  width: 100%;
+  height: auto;
+}
+
+.radar-grid-line {
+  fill: none;
+  stroke: var(--script-line);
+  stroke-width: 0.8;
+}
+
+.radar-axis-line {
+  stroke: var(--script-line);
+  stroke-width: 0.5;
+  stroke-dasharray: 3 3;
+}
+
+.radar-data-area {
+  fill: url(#radarFill);
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.radar-data-stroke {
+  fill: none;
+  stroke: #2dd4bf;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  filter: url(#radarGlow);
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.radar-data-dot {
+  fill: #2dd4bf;
+  stroke: var(--script-panel);
+  stroke-width: 2;
+  filter: url(#radarGlow);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.radar-label {
+  fill: var(--script-muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+.script-eval-scoreboard--radar {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  padding: 22px;
+  background: var(--script-panel);
+}
+
+.script-eval-scoreboard__info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.script-eval-total-score {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin: 4px 0;
+}
+
+.script-eval-total-score strong {
+  font-size: 42px;
+  font-weight: 850;
+  color: var(--script-ink);
+  line-height: 1;
+}
+
+.script-eval-total-score span {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--script-soft);
+}
+
+.script-eval-total-score em {
+  font-style: normal;
+  margin-left: 8px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: rgba(45, 212, 191, 0.12);
+  border: 1px solid rgba(45, 212, 191, 0.25);
+  color: #2dd4bf;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+@media (max-width: 1180px) {
+  .script-eval-workbench {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .script-eval-shell {
+    padding: 18px 14px 38px;
+  }
+
+  .script-eval-insight-grid,
+  .script-eval-dimensions .score-dimension-grid,
+  .script-eval-criteria,
+  .script-eval-scoreboard--radar {
+    grid-template-columns: 1fr;
+  }
+
+  .radar-chart-wrap {
+    max-width: 220px;
+    margin: 0 auto;
+  }
+
+  .script-eval-workbench {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .script-eval-input-card textarea {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 520px) {
+  .script-eval-import-strip,
+  .script-eval-empty,
+  .script-eval-preview {
+    grid-template-columns: 1fr;
+  }
+
+  .script-eval-actions,
+  .script-eval-actions button,
+  .script-eval-import-strip button {
+    width: 100%;
+  }
+
+  .script-eval-actions button,
+  .script-eval-import-strip button {
+    justify-content: center;
+  }
+}
+
+/* === Script Evaluation V2: glass review console === */
+.script-eval-page {
+  --eval-bg-primary: #050508;
+  --eval-bg-layer-1: rgba(20, 22, 35, 0.4);
+  --eval-bg-layer-2: rgba(30, 33, 48, 0.3);
+  --eval-glass-border: rgba(100, 116, 139, 0.12);
+  --eval-glass-highlight: rgba(255, 255, 255, 0.06);
+  --eval-backdrop-blur: blur(20px);
+  --eval-text-white: #fff;
+  --eval-text-primary: #e2e8f0;
+  --eval-text-secondary: #94a3b8;
+  --eval-text-tertiary: #64748b;
+  --eval-text-placeholder: #475569;
+  --eval-accent-start: #34d399;
+  --eval-accent-mid: #10b981;
+  --eval-accent-end: #059669;
+  --eval-accent-glow: rgba(16, 185, 129, 0.3);
+  --eval-accent-subtle: rgba(16, 185, 129, 0.08);
+  --eval-glow-gradient: none;
+  background: var(--eval-bg-primary);
+  color: var(--eval-text-primary);
+}
+
+.script-eval-page .script-token-page__scroll.script-eval-stage {
+  position: relative;
+  min-height: 100%;
+  padding: 0;
+  overflow-x: hidden;
+  background: var(--eval-bg-primary);
+}
+
+.script-eval-stage::before,
+.script-eval-stage::after {
+  position: fixed;
+  z-index: 0;
+  border-radius: 50%;
+  content: "";
+  pointer-events: none;
+}
+
+.script-eval-stage::before {
+  top: -120px;
+  left: -120px;
+  width: 420px;
+  height: 420px;
+  background: var(--eval-accent-glow);
+}
+
+.script-eval-stage::after {
+  right: -160px;
+  bottom: -170px;
+  width: 520px;
+  height: 520px;
+  background: rgba(59, 130, 246, 0.15);
+}
+
+.script-eval-app {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: 48px;
+  width: min(100%, 1600px);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 32px;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+.script-eval-sidebar-icons {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 24px;
+  padding-top: 16px;
+}
+
+.script-eval-sidebar-icons .anticon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  color: var(--eval-text-tertiary);
+  cursor: pointer;
+  transition:
+    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-sidebar-icons .anticon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.script-eval-sidebar-icons .anticon:hover {
+  background: var(--eval-accent-subtle);
+  color: var(--eval-text-white);
+  transform: scale(1.05);
+}
+
+.script-eval-sidebar-icons .anticon.active {
+  background: var(--eval-accent-subtle);
+  color: var(--eval-accent-mid);
+  box-shadow: 0 0 20px var(--eval-accent-glow);
+}
+
+.script-eval-sidebar-icons .spacer {
+  flex: 1;
+}
+
+.script-eval-panel-left,
+.script-eval-panel-right {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.script-eval-panel-left {
+  flex: 1.2;
+}
+
+.script-eval-panel-right {
+  flex: 1;
+  gap: 24px;
+}
+
+.script-eval-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.script-eval-panel-title .label {
+  background: var(--eval-accent-start);
+  background-clip: text;
+  color: transparent;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.script-eval-panel-title .divider {
+  width: 1px;
+  height: 12px;
+  background: var(--eval-glass-border);
+}
+
+.script-eval-panel-title .text {
+  color: var(--eval-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.script-eval-glass-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--eval-bg-layer-1);
+  backdrop-filter: var(--eval-backdrop-blur);
+  -webkit-backdrop-filter: var(--eval-backdrop-blur);
+}
+
+.script-eval-glass-card::before {
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: 16px;
+  background: var(--eval-glow-gradient);
+  content: "";
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.script-eval-glass-card::after {
+  position: absolute;
+  top: 0;
+  right: 15%;
+  left: 15%;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.15);
+  content: "";
+  pointer-events: none;
+}
+
+.script-eval-input-card-v2,
+.script-eval-score-card-v2,
+.script-eval-details-card-v2 {
+  transition:
+    box-shadow 0.3s ease,
+    transform 0.3s ease;
+}
+
+.script-eval-input-card-v2:hover,
+.script-eval-score-card-v2:hover,
+.script-eval-details-card-v2:hover {
+  box-shadow: none;
+  transform: translateY(-2px);
+}
+
+.script-eval-input-card-v2 {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+}
+
+.script-eval-upload-area {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  overflow: hidden;
+  padding: 16px 24px;
+  border: 1px dashed var(--eval-glass-border);
+  border-radius: 12px;
+  background: var(--eval-bg-layer-2);
+  cursor: pointer;
+  transition:
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-upload-area::before {
+  position: absolute;
+  inset: 0;
+  background: var(--eval-accent-subtle);
+  content: "";
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.script-eval-upload-area:hover {
+  border-color: rgba(16, 185, 129, 0.4);
+  transform: translateY(-1px);
+}
+
+.script-eval-upload-area:hover::before {
+  opacity: 1;
+}
+
+.script-eval-upload-area > .anticon,
+.script-eval-upload-area .upload-text,
+.script-eval-upload-area .script-eval-upload-btn {
+  position: relative;
+  z-index: 1;
+}
+
+.script-eval-upload-area > .anticon {
+  flex: 0 0 auto;
+  color: var(--eval-text-tertiary);
+  font-size: 18px;
+}
+
+.script-eval-upload-area:hover > .anticon {
+  color: var(--eval-accent-mid);
+}
+
+.script-eval-upload-area input {
+  display: none;
+}
+
+.script-eval-upload-area .upload-text {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: var(--eval-text-primary);
+  font-size: 13px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.script-eval-upload-area .hint {
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--eval-text-tertiary);
+  font-size: 11px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.script-eval-upload-btn {
+  min-height: 34px;
+  padding: 8px 20px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--eval-accent-start);
+  color: var(--eval-bg-primary);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  font-size: 12px;
+  font-weight: 700;
+  transition:
+    box-shadow 0.3s,
+    transform 0.3s;
+}
+
+.script-eval-upload-btn:hover {
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+.script-eval-text-input-container {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid var(--eval-glass-border);
+  border-radius: 12px;
+  background: var(--eval-bg-layer-2);
+  transition:
+    border-color 0.3s,
+    box-shadow 0.3s;
+}
+
+.script-eval-text-input-container:focus-within {
+  border-color: rgba(16, 185, 129, 0.3);
+  box-shadow: 0 0 30px var(--eval-accent-subtle);
+}
+
+.script-eval-line-numbers {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  align-content: start;
+  width: 48px;
+  padding: 24px 14px;
+  border-right: 1px solid var(--eval-glass-border);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--eval-text-tertiary);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.8;
+  opacity: 0.4;
+  text-align: right;
+  user-select: none;
+}
+
+.script-eval-line-numbers span {
+  height: 21.6px;
+}
+
+.script-eval-text-input {
+  width: 100%;
+  height: 100%;
+  min-height: 430px;
+  padding: 24px;
+  padding-left: 64px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--eval-text-white);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.8;
+}
+
+.script-eval-text-input::placeholder {
+  color: var(--eval-text-placeholder);
+}
+
+.script-eval-button-group {
+  display: flex;
+  gap: 16px;
+}
+
+.script-eval-btn-primary,
+.script-eval-btn-secondary,
+.script-eval-details-header {
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.script-eval-btn-primary {
+  position: relative;
+  overflow: hidden;
+  min-height: 46px;
+  padding: 12px 28px;
+  border: 1px solid rgba(16, 185, 129, 0.5);
+  background: transparent;
+  color: var(--eval-accent-start);
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  transition:
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-btn-primary::before {
+  position: absolute;
+  inset: 0;
+  background: var(--eval-accent-start);
+  content: "";
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.script-eval-btn-primary span {
+  position: relative;
+  z-index: 1;
+}
+
+.script-eval-btn-primary:hover:not(:disabled)::before {
+  opacity: 1;
+}
+
+.script-eval-btn-primary:hover:not(:disabled) {
+  border-color: transparent;
+  color: var(--eval-bg-primary);
+  box-shadow: none;
+  transform: translateY(-2px);
+}
+
+.script-eval-btn-primary:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.script-eval-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 46px;
+  padding: 12px 24px;
+  border: 1px solid var(--eval-glass-border);
+  background: transparent;
+  color: var(--eval-text-secondary);
+  font-weight: 500;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    color 0.3s;
+}
+
+.script-eval-btn-secondary:hover {
+  border-color: var(--eval-text-tertiary);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--eval-text-white);
+}
+
+.script-eval-score-card-v2 {
+  padding: 24px;
+}
+
+.script-eval-score-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.script-eval-score-title,
+.script-eval-details-title {
+  color: var(--eval-text-tertiary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.script-eval-score-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--eval-text-tertiary);
+  font-size: 12px;
+}
+
+.script-eval-score-status::before {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--eval-text-tertiary);
+  content: "";
+}
+
+.script-eval-score-status.ready::before {
+  background: var(--eval-accent-mid);
+  box-shadow: 0 0 8px var(--eval-accent-glow);
+}
+
+.script-eval-score-main {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.script-eval-radar-container {
+  position: relative;
+  display: flex;
+  flex: 0 0 200px;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+}
+
+.script-eval-radar-container::before {
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: var(--eval-accent-subtle);
+  content: "";
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.script-eval-radar-container.has-glow::before {
+  opacity: 1;
+}
+
+.script-eval-radar-svg {
+  position: relative;
+  z-index: 1;
+  width: 180px;
+  height: 180px;
+}
+
+.script-eval-radar-grid polygon {
+  fill: none;
+  stroke: var(--eval-glass-border);
+  stroke-width: 1;
+}
+
+.script-eval-radar-grid line {
+  stroke: var(--eval-glass-border);
+  stroke-width: 0.5;
+}
+
+.script-eval-radar-outline {
+  fill: url(#scriptEvalRadarGradient);
+  stroke: var(--eval-accent-mid);
+  stroke-width: 2;
+  opacity: 0;
+  transform: scale(0.8);
+  transform-origin: center;
+  transition:
+    opacity 0.5s,
+    transform 0.5s;
+}
+
+.script-eval-radar-outline.has-data {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.script-eval-score-display {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  padding-left: 16px;
+}
+
+.script-eval-score-number {
+  color: var(--eval-text-tertiary);
+  font-size: 64px;
+  font-weight: 200;
+  letter-spacing: -3px;
+  line-height: 1;
+  transition: all 0.5s;
+}
+
+.script-eval-score-number.has-data {
+  background: var(--eval-accent-start);
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 0 20px var(--eval-accent-glow));
+  text-shadow: 0 0 40px var(--eval-accent-glow);
+}
+
+.script-eval-score-label {
+  margin-top: 8px;
+  color: var(--eval-text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.script-eval-score-hint {
+  max-width: 380px;
+  margin-top: 12px;
+  color: var(--eval-text-tertiary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.script-eval-dimensions-tags {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+  padding-top: 24px;
+  border-top: 1px solid var(--eval-glass-border);
+}
+
+.script-eval-dimensions-tags::after {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 40px;
+  height: 1px;
+  background: var(--eval-accent-mid);
+  content: "";
+}
+
+.script-eval-dimensions-tags .tag {
+  color: var(--eval-text-tertiary);
+  cursor: default;
+  font-size: 12px;
+  transition: color 0.3s;
+}
+
+.script-eval-dimensions-tags .tag:hover {
+  color: var(--eval-text-white);
+}
+
+.script-eval-dimensions-tags .tag::after {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  margin-bottom: 3px;
+  margin-left: 20px;
+  border-radius: 50%;
+  background: var(--eval-text-placeholder);
+  content: "";
+  opacity: 0.5;
+}
+
+.script-eval-dimensions-tags .tag:last-child::after {
+  display: none;
+}
+
+.script-eval-details-card-v2 {
+  overflow: hidden;
+}
+
+.script-eval-details-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 64px;
+  padding: 0 24px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  transition: background 0.2s;
+}
+
+.script-eval-details-header:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.script-eval-expand-icon {
+  color: var(--eval-text-tertiary);
+  font-size: 10px;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-expand-icon.expanded {
+  transform: rotate(180deg);
+}
+
+.script-eval-details-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-details-content.expanded {
+  max-height: 680px;
+}
+
+.script-eval-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 24px 24px;
+}
+
+.script-eval-detail-row {
+  padding: 12px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.script-eval-detail-row:hover {
+  background: var(--eval-bg-layer-2);
+}
+
+.script-eval-detail-row-main {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.script-eval-dimension-name {
+  width: 80px;
+  flex: 0 0 auto;
+  color: var(--eval-text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.script-eval-dimension-bar {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--eval-glass-border);
+}
+
+.script-eval-dimension-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: var(--eval-accent-start);
+  box-shadow: 0 0 10px var(--eval-accent-glow);
+  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-eval-dimension-score {
+  width: 54px;
+  flex: 0 0 auto;
+  color: var(--eval-text-tertiary);
+  font-size: 13px;
+  font-weight: 500;
+  text-align: right;
+}
+
+.script-eval-dimension-desc {
+  margin-top: 6px;
+  padding-left: 96px;
+  color: var(--eval-text-tertiary);
+  font-size: 11px;
+  opacity: 0.8;
+}
+
+.script-eval-score-card-v2.loading .script-eval-radar-outline {
+  animation: script-eval-pulse-soft 1.5s ease-in-out infinite;
+  opacity: 0.3;
+}
+
+.script-eval-score-card-v2.loading .script-eval-score-number {
+  background: var(--eval-text-secondary);
+  background-size: 200% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: script-eval-shimmer 1.5s infinite;
+}
+
+@keyframes script-eval-pulse-soft {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes script-eval-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@media (max-width: 1180px) {
+  .script-eval-app {
+    flex-direction: column;
+  }
+
+  .script-eval-sidebar-icons {
+    flex-direction: row;
+    padding-top: 0;
+  }
+
+  .script-eval-sidebar-icons .spacer {
+    flex: 1;
+  }
+}
+
+@media (max-width: 760px) {
+  .script-eval-app {
+    gap: 24px;
+    padding: 20px 14px 38px;
+  }
+
+  .script-eval-score-main {
+    flex-direction: column;
+  }
+
+  .script-eval-radar-container {
+    align-self: center;
+  }
+
+  .script-eval-score-display {
+    padding-left: 0;
+    text-align: center;
+  }
+
+  .script-eval-score-hint {
+    max-width: none;
+  }
+
+  .script-eval-text-input {
+    min-height: 320px;
+  }
+}
+
+@media (max-width: 520px) {
+  .script-eval-upload-area,
+  .script-eval-button-group,
+  .script-eval-detail-row-main {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .script-eval-upload-btn,
+  .script-eval-btn-primary,
+  .script-eval-btn-secondary {
+    width: 100%;
+  }
+
+  .script-eval-dimension-name,
+  .script-eval-dimension-score {
+    width: auto;
+    text-align: left;
+  }
+
+  .script-eval-dimension-desc {
+    padding-left: 0;
+  }
+}
+
+/* === Script Evaluation V3: screenshot-aligned distribution === */
+.script-eval-page {
+  --eval-bg-primary: #040807;
+  --eval-bg-panel: rgba(18, 23, 24, 0.88);
+  --eval-bg-panel-soft: rgba(15, 21, 21, 0.78);
+  --eval-bg-field: rgba(7, 12, 13, 0.72);
+  --eval-border: rgba(168, 255, 212, 0.16);
+  --eval-border-strong: rgba(0, 255, 136, 0.28);
+  --eval-main-green: #00ff88;
+  --eval-dark-green: #00cc6a;
+  --eval-soft-green: rgba(0, 255, 136, 0.08);
+  --eval-text-white: #fff;
+  --eval-text-main: #e6efec;
+  --eval-text-muted: #9aa8a3;
+  --eval-text-dim: #6f7f79;
+  --eval-shadow: none;
+  background: var(--eval-bg-primary);
+  color: var(--eval-text-main);
+}
+
+.script-eval-page .script-token-page__scroll.script-eval-stage {
+  min-height: 100%;
+  padding: 0;
+  overflow-x: hidden;
+  background: transparent;
+}
+
+.script-eval-stage::before,
+.script-eval-stage::after {
+  display: none;
+}
+
+.script-eval-app {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(520px, 0.95fr) minmax(620px, 1.05fr);
+  gap: 20px;
+  width: min(calc(100% - 240px), 1536px);
+  min-height: auto;
+  margin: 0 auto;
+  padding: 56px 0 82px;
+  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.script-eval-sidebar-icons {
+  position: fixed;
+  top: 50%;
+  left: 18px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 70px;
+  padding: 18px 0;
+  border: 1px solid var(--eval-border);
+  border-radius: 20px;
+  background: rgba(8, 10, 12, 0.92);
+  box-shadow: none;
+  transform: translateY(-50%);
+}
+
+.script-eval-sidebar-icons .anticon {
+  width: 44px;
+  height: 44px;
+  margin: 0 auto;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  color: var(--eval-text-muted);
+}
+
+.script-eval-sidebar-icons .anticon:hover {
+  border-color: var(--eval-border-strong);
+  background: var(--eval-soft-green);
+  color: var(--eval-main-green);
+}
+
+.script-eval-sidebar-icons .anticon.active {
+  border-color: var(--eval-main-green);
+  background: rgba(0, 255, 136, 0.12);
+  color: var(--eval-main-green);
+  box-shadow: 0 0 20px rgba(0, 255, 136, 0.22);
+}
+
+.script-eval-sidebar-icons .spacer {
+  width: 34px;
+  height: 1px;
+  flex: 0 0 auto;
+  margin: 2px auto;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.script-eval-panel-left,
+.script-eval-panel-right {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.script-eval-glass-card {
+  border: 1px solid var(--eval-border);
+  border-radius: 18px;
+  background: var(--eval-bg-panel);
+  box-shadow: var(--eval-shadow);
+  backdrop-filter: none;
+}
+
+.script-eval-glass-card::before {
+  display: none;
+}
+
+.script-eval-glass-card::after {
+  right: 24px;
+  left: 24px;
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.script-eval-input-card-v2,
+.script-eval-score-card-v2,
+.script-eval-details-card-v2 {
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease,
+    transform 0.25s ease;
+}
+
+.script-eval-input-card-v2:hover,
+.script-eval-score-card-v2:hover,
+.script-eval-details-card-v2:hover {
+  border-color: rgba(0, 255, 136, 0.24);
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+.script-eval-input-card-v2 {
+  display: flex;
+  min-height: 730px;
+  padding: 24px 20px 22px;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.script-eval-input-card-head {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px 16px;
+  align-items: start;
+}
+
+.script-eval-input-card-head h2,
+.script-eval-diagnosis-card h2,
+.script-eval-details-header strong,
+.script-eval-score-display h2 {
+  margin: 0;
+  color: var(--eval-text-white);
+  font-size: 26px;
+  font-weight: 850;
+  letter-spacing: 0;
+  line-height: 1.15;
+}
+
+.script-eval-input-card-head h2 {
+  grid-column: 1 / -1;
+}
+
+.script-eval-file-types {
+  color: var(--eval-text-muted);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.8px;
+}
+
+.script-eval-section-kicker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.script-eval-section-kicker__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--eval-main-green);
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0.6px;
+  line-height: 1;
+}
+
+.script-eval-section-kicker__label .anticon {
+  font-size: 13px;
+}
+
+.script-eval-section-kicker__meta {
+  color: var(--eval-text-muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.script-eval-upload-area {
+  min-height: 70px;
+  padding: 14px;
+  border: 1px solid var(--eval-border);
+  border-radius: 16px;
+  background: var(--eval-bg-field);
+}
+
+.script-eval-upload-area > .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: rgba(0, 255, 136, 0.12);
+  color: var(--eval-main-green);
+  font-size: 16px;
+}
+
+.script-eval-upload-area .upload-text {
+  color: var(--eval-text-white);
+  font-size: 15px;
+  font-weight: 850;
+}
+
+.script-eval-upload-area .hint {
+  margin-top: 2px;
+  color: var(--eval-text-muted);
+  font-size: 13px;
+}
+
+.script-eval-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 96px;
+  min-height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--eval-text-white);
+  box-shadow: none;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.script-eval-upload-btn::before {
+  margin-right: 8px;
+  color: var(--eval-main-green);
+  content: "↥";
+}
+
+.script-eval-text-input {
+  flex: 1;
+  min-height: 470px;
+  padding: 22px 18px;
+  border: 1px solid var(--eval-border);
+  border-radius: 16px;
+  outline: none;
+  resize: none;
+  background: var(--eval-bg-field);
+  color: var(--eval-text-main);
+  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  line-height: 1.85;
+}
+
+.script-eval-text-input:focus {
+  border-color: var(--eval-border-strong);
+  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.05);
+}
+
+.script-eval-text-input::placeholder {
+  color: var(--eval-text-muted);
+}
+
+.script-eval-button-group {
+  display: flex;
+  gap: 10px;
+  margin-top: 2px;
+}
+
+.script-eval-btn-primary,
+.script-eval-btn-secondary {
+  min-height: 44px;
+  border-radius: 14px;
+  font-size: 14px;
+}
+
+.script-eval-btn-primary {
+  min-width: 112px;
+  padding: 0 20px;
+  border: 0;
+  background: #00d975;
+  color: #02120b;
+  box-shadow: none;
+  font-weight: 900;
+}
+
+.script-eval-btn-primary::before {
+  background: var(--eval-main-green);
+}
+
+.script-eval-btn-primary span::before {
+  margin-right: 8px;
+  content: "⬡";
+}
+
+.script-eval-btn-secondary {
+  min-width: 84px;
+  padding: 0 16px;
+  border: 1px solid var(--eval-border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--eval-text-white);
+}
+
+.script-eval-helper-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 88px;
+  padding: 18px 22px;
+  background: rgba(18, 23, 24, 0.82);
+}
+
+.script-eval-helper-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 auto;
+  border-radius: 14px;
+  background: rgba(0, 255, 136, 0.12);
+  color: var(--eval-main-green);
+  font-size: 20px;
+}
+
+.script-eval-helper-card strong {
+  display: block;
+  color: var(--eval-text-white);
+  font-size: 16px;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.script-eval-helper-card p {
+  margin: 5px 0 0;
+  color: var(--eval-text-main);
+  font-size: 13px;
+}
+
+.script-eval-score-card-v2 {
+  display: grid;
+  min-height: 334px;
+  padding: 26px 30px;
+  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
+  align-items: center;
+  gap: 26px;
+}
+
+.script-eval-radar-container {
+  width: min(100%, 286px);
+  height: 252px;
+  margin: 0 auto;
+  flex: none;
+}
+
+.script-eval-radar-svg {
+  width: 212px;
+  height: 212px;
+  opacity: 0.72;
+}
+
+.script-eval-radar-label {
+  position: absolute;
+  z-index: 2;
+  color: #d7fff0;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.script-eval-radar-label.label-hook {
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.script-eval-radar-label.label-character {
+  top: 68px;
+  right: -2px;
+}
+
+.script-eval-radar-label.label-plot {
+  right: 18px;
+  bottom: 36px;
+}
+
+.script-eval-radar-label.label-dialogue {
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.script-eval-radar-label.label-visual {
+  bottom: 70px;
+  left: -2px;
+}
+
+.script-eval-radar-label.label-content {
+  top: 74px;
+  left: -2px;
+}
+
+.script-eval-radar-grid polygon {
+  stroke: rgba(168, 255, 212, 0.1);
+}
+
+.script-eval-radar-grid line {
+  stroke: rgba(168, 255, 212, 0.09);
+}
+
+.script-eval-score-display {
+  padding-left: 0;
+  gap: 14px;
+}
+
+.script-eval-score-display .script-eval-section-kicker {
+  width: fit-content;
+  padding: 9px 16px;
+  border: 1px solid var(--eval-border-strong);
+  border-radius: 999px;
+  background: var(--eval-soft-green);
+}
+
+.script-eval-score-display h2 {
+  margin-top: 8px;
+}
+
+.script-eval-score-number {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  color: var(--eval-text-white);
+  font-size: 0;
+  letter-spacing: 0;
+}
+
+.script-eval-score-number span {
+  font-size: 58px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.script-eval-score-number em {
+  color: var(--eval-text-muted);
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 850;
+}
+
+.script-eval-score-number b {
+  display: inline-grid;
+  place-items: center;
+  min-width: 38px;
+  height: 28px;
+  margin-left: 8px;
+  border: 1px solid var(--eval-border-strong);
+  border-radius: 999px;
+  color: var(--eval-main-green);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.script-eval-score-number.has-data span {
+  color: var(--eval-main-green);
+  filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.22));
+}
+
+.script-eval-score-hint {
+  max-width: 520px;
+  margin: 0;
+  color: var(--eval-text-main);
+  font-size: 14px;
+}
+
+.script-eval-diagnosis-card {
+  min-height: 160px;
+  padding: 24px 22px 22px;
+}
+
+.script-eval-diagnosis-card h2 {
+  margin-top: 10px;
+  font-size: 24px;
+}
+
+.script-eval-dimensions-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 28px;
+  border: 0;
+}
+
+.script-eval-dimensions-tags::after,
+.script-eval-dimensions-tags .tag::after {
+  display: none;
+}
+
+.script-eval-dimensions-tags .tag {
+  padding: 8px 13px;
+  border: 1px solid var(--eval-border);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.12);
+  color: #d8fff1;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.script-eval-details-card-v2 {
+  padding: 0;
+}
+
+.script-eval-details-header {
+  min-height: auto;
+  padding: 24px 22px 8px;
+  border-radius: 18px 18px 0 0;
+}
+
+.script-eval-details-header > span {
+  display: grid;
+  gap: 10px;
+}
+
+.script-eval-details-header strong {
+  display: block;
+  font-size: 24px;
+}
+
+.script-eval-expand-icon {
+  color: var(--eval-text-muted);
+}
+
+.script-eval-details-content.expanded {
+  max-height: 760px;
+}
+
+.script-eval-details-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding: 12px 22px 22px;
+}
+
+.script-eval-detail-row {
+  min-height: 104px;
+  padding: 16px;
+  border: 1px solid var(--eval-border);
+  border-radius: 14px;
+  background: rgba(5, 9, 10, 0.52);
+}
+
+.script-eval-detail-row:hover {
+  border-color: var(--eval-border-strong);
+  background: rgba(0, 255, 136, 0.045);
+}
+
+.script-eval-detail-row-main {
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.script-eval-dimension-name {
+  width: auto;
+  color: var(--eval-text-white);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.script-eval-dimension-score {
+  width: auto;
+  color: var(--eval-main-green);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.script-eval-dimension-desc {
+  margin-top: 10px;
+  padding-left: 0;
+  color: var(--eval-text-main);
+  font-size: 13px;
+  opacity: 1;
+}
+
+.script-eval-dimension-bar {
+  height: 4px;
+  margin-top: 14px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.script-eval-dimension-bar-fill {
+  background: var(--eval-main-green);
+  box-shadow: 0 0 12px rgba(0, 255, 136, 0.24);
+}
+
+.script-eval-helper-card--right {
+  min-height: 90px;
+}
+
+@media (max-width: 1380px) {
+  .script-eval-app {
+    width: min(calc(100% - 120px), 1280px);
+    grid-template-columns: minmax(460px, 0.92fr) minmax(560px, 1.08fr);
+  }
+
+  .script-eval-score-card-v2 {
+    grid-template-columns: minmax(220px, 0.82fr) minmax(280px, 1.18fr);
+  }
+}
+
+@media (max-width: 1180px) {
+  .script-eval-app {
+    width: min(calc(100% - 44px), 920px);
+    grid-template-columns: 1fr;
+    padding-top: 34px;
+  }
+
+  .script-eval-sidebar-icons {
+    position: sticky;
+    top: 12px;
+    flex-direction: row;
+    width: 100%;
+    transform: none;
+  }
+
+  .script-eval-sidebar-icons .spacer {
+    flex: 1;
+    width: auto;
+    height: auto;
+    background: transparent;
+  }
+}
+
+@media (max-width: 760px) {
+  .script-eval-app {
+    width: calc(100% - 28px);
+    gap: 16px;
+    padding: 20px 0 44px;
+  }
+
+  .script-eval-input-card-v2 {
+    min-height: 640px;
+  }
+
+  .script-eval-score-card-v2,
+  .script-eval-details-list {
+    grid-template-columns: 1fr;
+  }
+
+  .script-eval-score-card-v2 {
+    gap: 18px;
+    padding: 22px;
+  }
+
+  .script-eval-radar-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 520px) {
+  .script-eval-input-card-head {
+    grid-template-columns: 1fr;
+  }
+
+  .script-eval-upload-area,
+  .script-eval-button-group,
+  .script-eval-helper-card {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .script-eval-upload-btn,
+  .script-eval-btn-primary,
+  .script-eval-btn-secondary {
+    width: 100%;
+  }
+}
+
+/* === Script Evaluation V3.1: fit inside existing app shell === */
+.script-eval-sidebar-icons {
+  display: none;
+}
+
+.script-eval-app {
+  grid-template-columns: minmax(500px, 0.94fr) minmax(560px, 1.06fr);
+  gap: 24px;
+  width: min(calc(100% - 96px), 1396px);
+  max-width: calc(100vw - 128px);
+  padding: 52px 0 96px;
+}
+
+.script-eval-input-card-v2 {
+  height: 664px;
+  min-height: 0;
+  flex: 0 0 auto;
+}
+
+.script-eval-text-input {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.script-eval-panel-right {
+  min-width: 0;
+}
+
+.script-eval-score-card-v2 {
+  min-width: 0;
+  min-height: 306px;
+  grid-template-columns: minmax(236px, 0.86fr) minmax(270px, 1.14fr);
+  gap: 30px;
+}
+
+.script-eval-diagnosis-card,
+.script-eval-details-card-v2,
+.script-eval-helper-card--right {
+  min-width: 0;
+}
+
+.script-eval-dimensions-tags {
+  overflow: visible;
+}
+
+.script-eval-dimensions-tags .tag {
+  white-space: nowrap;
+}
+
+.script-eval-detail-row {
+  min-width: 0;
+}
+
+.script-eval-dimension-desc {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 1280px) {
+  .script-eval-app {
+    grid-template-columns: minmax(430px, 0.92fr) minmax(500px, 1.08fr);
+    width: min(calc(100% - 64px), 1180px);
+    max-width: calc(100vw - 96px);
+  }
+
+  .script-eval-score-card-v2 {
+    grid-template-columns: minmax(210px, 0.8fr) minmax(248px, 1.2fr);
+    gap: 22px;
+  }
+
+  .script-eval-radar-container {
+    transform: scale(0.94);
+    transform-origin: center;
+  }
+}
+
+@media (max-width: 1120px) {
+  .script-eval-app {
+    grid-template-columns: 1fr;
+    width: min(calc(100% - 48px), 880px);
+    max-width: none;
+  }
+
+  .script-eval-input-card-v2 {
+    height: auto;
+    min-height: 620px;
+  }
+}
+
+@media (max-width: 760px) {
+  .script-eval-app {
+    width: calc(100% - 28px);
+    padding-top: 24px;
+  }
+
+  .script-eval-score-card-v2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* === Script Evaluation V4: 三版 UI replacement === */
+.script-eval-v4 {
+  --eval4-bg: #050508;
+  --eval4-layer-1: rgba(20, 22, 35, 0.48);
+  --eval4-layer-2: rgba(30, 33, 48, 0.34);
+  --eval4-accent-rgb: var(--accent-rgb, 0, 255, 136);
+  --eval4-border: rgba(var(--eval4-accent-rgb), 0.18);
+  --eval4-border-strong: rgba(var(--eval4-accent-rgb), 0.46);
+  --eval4-highlight: rgba(255, 255, 255, 0.08);
+  --eval4-text-white: #fff;
+  --eval4-text-main: #e2e8f0;
+  --eval4-text-muted: #94a3b8;
+  --eval4-text-soft: #64748b;
+  --eval4-placeholder: #475569;
+  --eval4-green: var(--accent, #00ff88);
+  --eval4-green-deep: var(--accent-dim, #00d874);
+  --eval4-cyan: var(--accent-cyan, #7be7ff);
+  --eval4-glow: rgba(var(--eval4-accent-rgb), 0.24);
+  --eval4-subtle: rgba(var(--eval4-accent-rgb), 0.08);
+  background: var(--eval4-bg);
+  color: var(--eval4-text-main);
+}
+
+.script-eval-v4 .script-eval-v4-stage {
+  position: relative;
+  padding: 0;
+  overflow-x: hidden;
+  background: #050508;
+}
+
+.script-eval-v4 .script-eval-v4-stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: none;
+  background-size: 56px 56px;
+  opacity: 0.18;
+}
+
+.script-eval-v4-app {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(520px, 1.08fr) minmax(580px, 1fr);
+  gap: 18px;
+  width: min(calc(100% - 12px), 1680px);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 10px 0 18px;
+}
+
+.script-eval-v4-panel-left,
+.script-eval-v4-panel-right {
+  min-width: 0;
+}
+
+.script-eval-v4-panel-left {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.script-eval-v4-panel-right {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.script-eval-v4-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 24px;
+}
+
+.script-eval-v4-panel-title .label,
+.script-eval-v4-details-header .details-title {
+  color: var(--eval4-green);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.script-eval-v4-panel-title .divider {
+  width: 1px;
+  height: 12px;
+  background: var(--eval4-border);
+}
+
+.script-eval-v4-panel-title .text {
+  color: var(--eval4-text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.script-eval-v4-panel-title .file-types {
+  margin-left: auto;
+  color: var(--eval4-text-soft);
+  font-size: 12px;
+}
+
+.script-eval-v4-glass {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--eval4-border);
+  border-radius: 12px;
+  background: var(--eval4-layer-1);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.script-eval-v4-glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background: rgba(var(--eval4-accent-rgb), 0.16);
+  opacity: 0.72;
+}
+
+.script-eval-v4-glass::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 14%;
+  left: 14%;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.18);
+  pointer-events: none;
+}
+
+.script-eval-v4-input-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 748px;
+  padding: 16px;
+}
+
+.script-eval-v4-upload-area,
+.script-eval-v4-text-shell,
+.script-eval-v4-button-group,
+.script-eval-v4-score-header,
+.script-eval-v4-score-main,
+.script-eval-v4-dimensions-tags,
+.script-eval-v4-details-header,
+.script-eval-v4-details-list,
+.script-eval-v4-note {
+  position: relative;
+  z-index: 1;
+}
+
+.script-eval-v4-upload-area {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 70px;
+  padding: 14px 18px;
+  border: 1px dashed var(--eval4-border);
+  border-radius: 12px;
+  background: var(--eval4-layer-2);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    transform 0.2s;
+}
+
+.script-eval-v4-upload-area:hover,
+.script-eval-v4-upload-area:focus-visible {
+  border-color: var(--eval4-border-strong);
+  background: rgba(var(--eval4-accent-rgb), 0.07);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.script-eval-v4-upload-area > .anticon {
+  color: var(--eval4-text-soft);
+  font-size: 18px;
+}
+
+.script-eval-v4-upload-area:hover > .anticon,
+.script-eval-v4-upload-area:focus-visible > .anticon {
+  color: var(--eval4-green);
+}
+
+.script-eval-v4-upload-area input {
+  display: none;
+}
+
+.script-eval-v4-upload-area .upload-text {
+  flex: 1;
+  min-width: 0;
+  color: var(--eval4-text-main);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.script-eval-v4-upload-area .hint {
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--eval4-text-soft);
+  font-size: 12px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.script-eval-v4-upload-btn {
+  min-width: 84px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background: var(--eval4-green);
+  box-shadow: none;
+  color: #04100b;
+  font-size: 13px;
+  font-weight: 900;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+
+.script-eval-v4-upload-btn:hover {
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+.script-eval-v4-text-shell {
+  display: grid;
+  grid-template-columns: 50px minmax(0, 1fr);
+  flex: 1;
+  min-height: 520px;
+  overflow: hidden;
+  border: 1px solid var(--eval4-border);
+  border-radius: 12px;
+  background: rgba(8, 11, 18, 0.62);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.script-eval-v4-text-shell:focus-within {
+  border-color: rgba(var(--eval4-accent-rgb), 0.4);
+  box-shadow: 0 0 30px rgba(var(--eval4-accent-rgb), 0.1);
+}
+
+.script-eval-v4-line-numbers {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 18px 12px 18px 0;
+  overflow: hidden;
+  border-right: 1px solid var(--eval4-border);
+  background: rgba(0, 0, 0, 0.18);
+  color: var(--eval4-text-soft);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.9;
+  text-align: right;
+  user-select: none;
+}
+
+.script-eval-v4-text-input {
+  width: 100%;
+  height: 100%;
+  min-height: 520px;
+  padding: 18px 22px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--eval4-text-white);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.9;
+  resize: none;
+}
+
+.script-eval-v4-text-input::placeholder {
+  color: var(--eval4-placeholder);
+}
+
+.script-eval-v4-button-group {
+  display: flex;
+  gap: 12px;
+}
+
+.script-eval-v4-btn-primary,
+.script-eval-v4-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 46px;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 800;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    color 0.2s,
+    transform 0.2s,
+    background 0.2s;
+}
+
+.script-eval-v4-btn-primary {
+  position: relative;
+  min-width: 142px;
+  padding: 0 30px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--eval4-accent-rgb), 0.55);
+  background: transparent;
+  color: var(--eval4-green);
+}
+
+.script-eval-v4-btn-primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--eval4-green);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.script-eval-v4-btn-primary span {
+  position: relative;
+  z-index: 1;
+}
+
+.script-eval-v4-btn-primary:hover:not(:disabled) {
+  border-color: transparent;
+  box-shadow: none;
+  color: #04100b;
+  transform: translateY(-2px);
+}
+
+.script-eval-v4-btn-primary:hover:not(:disabled)::before {
+  opacity: 1;
+}
+
+.script-eval-v4-btn-primary:disabled {
+  opacity: 0.46;
+  cursor: not-allowed;
+}
+
+.script-eval-v4-score-card.loading .score-number {
+  background: var(--eval4-text-main);
+  background-size: 220% 100%;
+  animation: script-eval-v4-shimmer 1.4s linear infinite;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.script-eval-v4-score-card.loading .script-eval-v4-radar-outline {
+  opacity: 0.34;
+  animation: script-eval-v4-pulse 1.2s ease-in-out infinite;
+}
+
+.script-eval-v4-btn-secondary {
+  min-width: 118px;
+  padding: 0 26px;
+  border: 1px solid var(--eval4-border);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--eval4-text-muted);
+}
+
+.script-eval-v4-btn-secondary:hover {
+  border-color: rgba(148, 163, 184, 0.34);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--eval4-text-white);
+  transform: translateY(-1px);
+}
+
+.script-eval-v4-score-card {
+  padding: 20px 26px 22px;
+}
+
+.script-eval-v4-score-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.script-eval-v4-score-header .score-title {
+  color: var(--eval4-text-soft);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.script-eval-v4-score-header .score-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--eval4-text-soft);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.script-eval-v4-score-header .score-status::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--eval4-text-soft);
+}
+
+.script-eval-v4-score-header .score-status.ready::before {
+  background: var(--eval4-green);
+  box-shadow: 0 0 10px var(--eval4-glow);
+}
+
+.script-eval-v4-score-main {
+  display: grid;
+  grid-template-columns: 276px minmax(0, 1fr);
+  gap: 28px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.script-eval-v4-radar-container {
+  position: relative;
+  display: grid;
+  width: 276px;
+  height: 276px;
+  place-items: center;
+}
+
+.script-eval-v4-radar-container::before {
+  content: "";
+  position: absolute;
+  width: 226px;
+  height: 226px;
+  border: 1px solid rgba(var(--eval4-accent-rgb), 0.16);
+  border-radius: 50%;
+  background: rgba(var(--eval4-accent-rgb), 0.045);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.script-eval-v4-radar-container.has-glow::before {
+  opacity: 1;
+}
+
+.script-eval-v4-radar-svg {
+  position: relative;
+  z-index: 1;
+  width: 254px;
+  height: 254px;
+}
+
+.script-eval-v4-radar-grid polygon {
+  fill: none;
+  stroke: rgba(var(--eval4-accent-rgb), 0.3);
+  stroke-width: 1.15;
+}
+
+.script-eval-v4-radar-grid line {
+  stroke: rgba(var(--eval4-accent-rgb), 0.22);
+  stroke-width: 0.7;
+}
+
+.script-eval-v4-radar-outline {
+  fill: url(#scriptEvalV4RadarGradient);
+  stroke: var(--eval4-green);
+  stroke-width: 2.35;
+  opacity: 0;
+  filter: drop-shadow(0 0 14px rgba(var(--eval4-accent-rgb), 0.36));
+  transform: scale(0.84);
+  transform-origin: center;
+  transition:
+    opacity 0.35s,
+    transform 0.35s;
+}
+
+.script-eval-v4-radar-outline.has-data {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.script-eval-v4-score-display {
+  min-width: 0;
+}
+
+.script-eval-v4-score-display .score-number {
+  color: var(--eval4-text-soft);
+  font-size: 72px;
+  font-weight: 300;
+  line-height: 1;
+}
+
+.script-eval-v4-score-display .score-number span {
+  color: inherit;
+  font-size: 28px;
+}
+
+.script-eval-v4-score-display .score-number.has-data {
+  background: var(--eval4-green);
+  background-clip: text;
+  filter: drop-shadow(0 0 16px rgba(var(--eval4-accent-rgb), 0.28));
+  -webkit-text-fill-color: transparent;
+}
+
+.script-eval-v4-score-display .score-label {
+  margin-top: 10px;
+  color: var(--eval4-text-muted);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.script-eval-v4-score-display .score-hint {
+  margin-top: 12px;
+  color: var(--eval4-text-soft);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.script-eval-v4-dimensions-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  padding-top: 16px;
+  border-top: 1px solid var(--eval4-border);
+}
+
+.script-eval-v4-dimensions-tags .tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--eval4-text-soft);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.script-eval-v4-dimensions-tags .tag::after {
+  content: "";
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--eval4-placeholder);
+  opacity: 0.65;
+}
+
+.script-eval-v4-dimensions-tags .tag:last-child::after {
+  display: none;
+}
+
+.script-eval-v4-details-card {
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+
+.script-eval-v4-details-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 22px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.script-eval-v4-details-header:hover {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.script-eval-v4-details-header .details-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.script-eval-v4-details-header .expand-icon {
+  color: var(--eval4-text-soft);
+  font-size: 12px;
+  transition: transform 0.2s;
+}
+
+.script-eval-v4-details-header .expand-icon.expanded {
+  transform: rotate(180deg);
+}
+
+.script-eval-v4-details-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.28s ease;
+}
+
+.script-eval-v4-details-content.expanded {
+  max-height: 620px;
+}
+
+.script-eval-v4-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 22px 20px;
+}
+
+.script-eval-v4-detail-row {
+  padding: 13px 12px;
+  border-radius: 10px;
+  transition: background 0.2s;
+}
+
+.script-eval-v4-detail-row:hover {
+  background: var(--eval4-layer-2);
+}
+
+.script-eval-v4-detail-row .detail-row-main {
+  display: grid;
+  grid-template-columns: 88px minmax(140px, 1fr) 64px;
+  gap: 16px;
+  align-items: center;
+}
+
+.script-eval-v4-detail-row .dimension-name {
+  color: var(--eval4-text-muted);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.script-eval-v4-detail-row .dimension-bar {
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.14);
+}
+
+.script-eval-v4-detail-row .dimension-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--eval4-green);
+  box-shadow: 0 0 10px rgba(var(--eval4-accent-rgb), 0.34);
+  transition: width 0.45s ease;
+}
+
+.script-eval-v4-detail-row .dimension-score {
+  color: var(--eval4-text-soft);
+  font-size: 14px;
+  font-weight: 700;
+  text-align: right;
+}
+
+.script-eval-v4-detail-row .dimension-desc {
+  margin-top: 7px;
+  padding-left: 104px;
+  color: var(--eval4-text-soft);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.script-eval-v4-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  padding: 0 18px;
+  border: 1px solid var(--eval4-border);
+  border-radius: 12px;
+  background: rgba(20, 22, 35, 0.34);
+  color: var(--eval4-text-muted);
+  font-size: 12px;
+}
+
+.script-eval-v4-note .anticon {
+  color: var(--eval4-green);
+  font-size: 16px;
+}
+
+@keyframes script-eval-v4-pulse {
+  0%,
+  100% {
+    transform: scale(0.84);
+  }
+
+  50% {
+    transform: scale(0.96);
+  }
+}
+
+@keyframes script-eval-v4-shimmer {
+  0% {
+    background-position: 220% 0;
+  }
+
+  100% {
+    background-position: -220% 0;
+  }
+}
+
+@media (max-width: 1280px) {
+  .script-eval-v4-app {
+    grid-template-columns: minmax(500px, 1fr) minmax(560px, 1fr);
+    width: min(calc(100% - 10px), 1248px);
+    gap: 14px;
+    padding-top: 8px;
+  }
+
+  .script-eval-v4-score-main {
+    grid-template-columns: 244px minmax(0, 1fr);
+    gap: 22px;
+  }
+
+  .script-eval-v4-radar-container {
+    width: 244px;
+    height: 244px;
+  }
+
+  .script-eval-v4-radar-svg {
+    width: 224px;
+    height: 224px;
+  }
+
+  .script-eval-v4-score-display .score-number {
+    font-size: 60px;
+  }
+
+  .script-eval-v4-input-card {
+    min-height: 730px;
+    padding: 14px;
+  }
+
+  .script-eval-v4-score-card {
+    padding: 18px 22px 20px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .script-eval-v4-app {
+    grid-template-columns: 1fr;
+    width: min(calc(100% - 24px), 980px);
+    padding: 32px 0 56px;
+  }
+
+  .script-eval-v4-input-card {
+    min-height: 560px;
+  }
+}
+
+@media (max-width: 640px) {
+  .script-eval-v4-app {
+    width: calc(100% - 24px);
+    padding: 20px 0 40px;
+  }
+
+  .script-eval-v4-panel-title {
+    flex-wrap: wrap;
+  }
+
+  .script-eval-v4-panel-title .file-types {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .script-eval-v4-input-card,
+  .script-eval-v4-score-card {
+    padding: 16px;
+  }
+
+  .script-eval-v4-score-main {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .script-eval-v4-radar-container {
+    justify-self: center;
+  }
+
+  .script-eval-v4-button-group,
+  .script-eval-v4-upload-area {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .script-eval-v4-btn-primary,
+  .script-eval-v4-btn-secondary,
+  .script-eval-v4-upload-btn {
+    width: 100%;
+  }
+
+  .script-eval-v4-detail-row .detail-row-main {
+    grid-template-columns: 1fr 58px;
+  }
+
+  .script-eval-v4-detail-row .dimension-bar {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .script-eval-v4-detail-row .dimension-desc {
+    padding-left: 0;
+  }
+}
+
+/* === Script Evaluation V4.1: reference scale and color tuning === */
+.script-eval-v4 {
+  --eval4-bg: #0b1110;
+  --eval4-layer-1: rgba(21, 24, 26, 0.96);
+  --eval4-layer-2: rgba(16, 18, 20, 0.92);
+  --eval4-border: rgba(255, 255, 255, 0.1);
+  --eval4-border-strong: rgba(var(--eval4-accent-rgb), 0.38);
+  --eval4-text-main: #f3f5f2;
+  --eval4-text-muted: #aeb8b1;
+  --eval4-text-soft: #7e8983;
+  --eval4-placeholder: #7e8983;
+  --eval4-glow: rgba(var(--eval4-accent-rgb), 0.16);
+}
+
+.script-eval-v4 .script-eval-v4-stage {
+  background: #0b1110;
+}
+
+.script-eval-v4 .script-eval-v4-stage::before {
+  background-size: 64px 64px;
+  opacity: 0.07;
+}
+
+.script-eval-v4-app {
+  grid-template-columns: minmax(560px, 0.96fr) minmax(620px, 1.04fr);
+  gap: 18px;
+  width: min(calc(100% - 96px), 1396px);
+  padding: 50px 0 72px;
+}
+
+.script-eval-v4-panel-left,
+.script-eval-v4-panel-right {
+  gap: 16px;
+}
+
+.script-eval-v4-glass {
+  border-color: var(--eval4-border);
+  background: var(--eval4-layer-1);
+  box-shadow: none;
+}
+
+.script-eval-v4-glass::before {
+  background: rgba(var(--eval4-accent-rgb), 0.07);
+  opacity: 1;
+}
+
+.script-eval-v4-input-card {
+  min-height: 664px;
+  padding: 18px;
+}
+
+.script-eval-v4-upload-area {
+  min-height: 64px;
+  border-color: var(--eval4-border);
+  background: var(--eval4-layer-2);
+}
+
+.script-eval-v4-upload-area:hover,
+.script-eval-v4-upload-area:focus-visible {
+  background: rgba(var(--eval4-accent-rgb), 0.06);
+}
+
+.script-eval-v4-upload-btn {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: #202527;
+  box-shadow: none;
+  color: var(--eval4-text-main);
+}
+
+.script-eval-v4-upload-btn:hover {
+  border-color: rgba(var(--eval4-accent-rgb), 0.34);
+  background: rgba(var(--eval4-accent-rgb), 0.12);
+  box-shadow: none;
+  color: var(--eval4-green);
+}
+
+.script-eval-v4-text-shell {
+  min-height: 428px;
+  border-color: var(--eval4-border);
+  background: #101214;
+}
+
+.script-eval-v4-text-input {
+  min-height: 428px;
+}
+
+.script-eval-v4-btn-primary {
+  min-width: 104px;
+  min-height: 38px;
+  padding: 0 18px;
+  border-color: rgba(var(--eval4-accent-rgb), 0.45);
+  font-size: 13px;
+}
+
+.script-eval-v4-btn-secondary {
+  min-width: 76px;
+  min-height: 38px;
+  padding: 0 16px;
+  background: #202527;
+  font-size: 13px;
+}
+
+.script-eval-v4-score-card {
+  padding: 24px 28px;
+}
+
+.script-eval-v4-score-main {
+  grid-template-columns: 248px minmax(0, 1fr);
+  gap: 28px;
+  margin-bottom: 20px;
+}
+
+.script-eval-v4-radar-container {
+  width: 248px;
+  height: 220px;
+}
+
+.script-eval-v4-radar-container::before {
+  width: 176px;
+  height: 176px;
+}
+
+.script-eval-v4-radar-svg {
+  width: 198px;
+  height: 198px;
+}
+
+.script-eval-v4-radar-grid polygon {
+  stroke: rgba(var(--eval4-accent-rgb), 0.18);
+  stroke-width: 0.85;
+}
+
+.script-eval-v4-radar-grid line {
+  stroke: rgba(var(--eval4-accent-rgb), 0.12);
+  stroke-width: 0.6;
+}
+
+.script-eval-v4-radar-outline {
+  stroke-width: 2;
+  filter: drop-shadow(0 0 10px rgba(var(--eval4-accent-rgb), 0.24));
+}
+
+.script-eval-v4-score-display .score-number {
+  color: var(--eval4-text-main);
+  font-size: 50px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.script-eval-v4-score-display .score-number span {
+  color: var(--eval4-text-muted);
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.script-eval-v4-dimensions-tags {
+  border-top-color: var(--eval4-border);
+}
+
+.script-eval-v4-dimensions-tags .tag {
+  padding: 6px 11px;
+  border: 1px solid var(--eval4-border);
+  border-radius: 999px;
+  color: var(--eval4-text-main);
+  font-size: 12px;
+}
+
+.script-eval-v4-dimensions-tags .tag::after {
+  display: none;
+}
+
+.script-eval-v4-details-header {
+  padding: 18px 20px 10px;
+}
+
+.script-eval-v4-details-list {
+  padding: 0 20px 20px;
+}
+
+.script-eval-v4-detail-row {
+  border: 1px solid var(--eval4-border);
+  background: #101214;
+}
+
+.script-eval-v4-detail-row:hover {
+  background: rgba(var(--eval4-accent-rgb), 0.05);
+}
+
+.script-eval-v4-note {
+  min-height: 64px;
+  border-color: var(--eval4-border);
+  background: var(--eval4-layer-1);
+}
+
+@media (max-width: 1280px) {
+  .script-eval-v4-app {
+    grid-template-columns: minmax(500px, 0.98fr) minmax(520px, 1.02fr);
+    width: min(calc(100% - 24px), 1128px);
+    gap: 16px;
+    margin-right: auto;
+    margin-left: 16px;
+    padding: 28px 0 44px;
+  }
+
+  .script-eval-v4-input-card {
+    min-height: 664px;
+  }
+
+  .script-eval-v4-score-main {
+    grid-template-columns: 196px minmax(0, 1fr);
+    gap: 18px;
+  }
+
+  .script-eval-v4-radar-container {
+    width: 196px;
+    height: 190px;
+  }
+
+  .script-eval-v4-radar-svg {
+    width: 168px;
+    height: 168px;
+  }
+
+  .script-eval-v4-score-display .score-number {
+    font-size: 42px;
+  }
+
+  .script-eval-v4-score-display .score-hint {
+    max-width: 280px;
+  }
+}
+
+/* === Script Evaluation V4.2: prevent clipping inside the app shell === */
+.script-eval-v4-app {
+  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
+  width: min(calc(100% - 40px), 1396px);
+  margin-right: auto;
+  margin-left: 24px;
+}
+
+.script-eval-v4-panel-left,
+.script-eval-v4-panel-right,
+.script-eval-v4-score-card,
+.script-eval-v4-details-card,
+.script-eval-v4-note,
+.script-eval-v4-score-display {
+  min-width: 0;
+}
+
+.script-eval-v4-score-main {
+  grid-template-columns: minmax(168px, 0.74fr) minmax(220px, 1fr);
+  gap: 20px;
+}
+
+.script-eval-v4-radar-container {
+  width: 100%;
+  max-width: 220px;
+  height: 198px;
+}
+
+.script-eval-v4-radar-svg {
+  width: min(184px, 100%);
+  height: min(184px, 100%);
+}
+
+.script-eval-v4-score-header .score-status {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.script-eval-v4-score-display .score-number {
+  white-space: nowrap;
+}
+
+.script-eval-v4-score-display .score-hint {
+  max-width: none;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 1280px) {
+  .script-eval-v4-app {
+    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
+    width: min(calc(100% - 32px), 1180px);
+    margin-left: 16px;
+  }
+
+  .script-eval-v4-score-main {
+    grid-template-columns: minmax(150px, 0.68fr) minmax(210px, 1fr);
+    gap: 18px;
+  }
+
+  .script-eval-v4-radar-container {
+    max-width: 196px;
+    height: 184px;
+  }
+
+  .script-eval-v4-radar-svg {
+    width: min(168px, 100%);
+    height: min(168px, 100%);
+  }
+}
+
+@media (max-width: 1160px) {
+  .script-eval-v4-app {
+    grid-template-columns: 1fr;
+    width: min(calc(100% - 32px), 980px);
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+/* === Script Evaluation V4.3: enlarge workspace and use surrounding space === */
+.script-eval-v4 .script-eval-v4-stage {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+
+.script-eval-v4-app {
+  gap: 18px;
+  width: min(calc(100% - 174px), 1530px);
+  margin-right: auto;
+  margin-left: auto;
+  padding: 34px 0 44px;
+}
+
+.script-eval-v4-input-card {
+  min-height: calc(100vh - 244px);
+  padding: 18px;
+}
+
+.script-eval-v4-text-shell,
+.script-eval-v4-text-input {
+  min-height: calc(100vh - 422px);
+}
+
+.script-eval-v4-score-card {
+  padding: 24px 28px;
+}
+
+.script-eval-v4-score-main {
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.script-eval-v4-radar-container {
+  max-width: 220px;
+  height: 198px;
+}
+
+.script-eval-v4-radar-svg {
+  width: min(184px, 100%);
+  height: min(184px, 100%);
+}
+
+.script-eval-v4-details-header {
+  padding: 18px 20px 10px;
+}
+
+.script-eval-v4-details-list {
+  padding: 0 20px 20px;
+}
+
+@media (max-width: 1280px) {
+  .script-eval-v4-app {
+    width: calc(100% - 162px);
+    margin-left: auto;
+    padding: 28px 0 38px;
+  }
+
+  .script-eval-v4-input-card {
+    min-height: calc(100vh - 224px);
+  }
+
+  .script-eval-v4-text-shell,
+  .script-eval-v4-text-input {
+    min-height: calc(100vh - 400px);
+  }
+
+  .script-eval-v4-score-card {
+    padding: 22px 26px;
+  }
+
+  .script-eval-v4-radar-container {
+    max-width: 202px;
+    height: 186px;
+  }
+
+  .script-eval-v4-radar-svg {
+    width: min(170px, 100%);
+    height: min(170px, 100%);
+  }
+}
+
+@media (max-width: 1160px) {
+  .script-eval-v4-app {
+    width: min(calc(100% - 32px), 1040px);
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 760px) {
+  .script-eval-v4-app {
+    width: calc(100% - 24px);
+  }
+}
+
+/* === Script Evaluation V4.4: Insights, Suggestions, and Report Actions === */
+.script-eval-v4-insights-card,
+.script-eval-v4-suggestions-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-color: var(--eval4-border);
+  background: var(--eval4-layer-1);
+  padding: 20px 22px;
+}
+
+.script-eval-v4-insight-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.script-eval-v4-insight-group + .script-eval-v4-insight-group {
+  padding-top: 14px;
+  border-top: 1px solid var(--eval4-border);
+}
+
+.insight-group-title,
+.suggestions-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 780;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.insight-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  font-weight: 900;
+  border-radius: 5px;
+}
+
+.highlights .insight-icon {
+  background: rgba(16, 185, 129, 0.12);
+  color: #10b981;
+}
+
+.issues .insight-icon {
+  background: rgba(245, 158, 11, 0.12);
+  color: #f59e0b;
+}
+
+.suggestions-title .insight-icon {
+  background: rgba(var(--eval4-accent-rgb), 0.12);
+  color: var(--eval4-accent, var(--accent));
+}
+
+.insight-list,
+.suggestion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.insight-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--fg-body);
+}
+
+.highlight-item {
+  background: rgba(16, 185, 129, 0.06);
+  border-left: 3px solid rgba(16, 185, 129, 0.5);
+}
+
+.issue-item {
+  background: rgba(245, 158, 11, 0.06);
+  border-left: 3px solid rgba(245, 158, 11, 0.5);
+}
+
+.suggestion-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: rgba(var(--eval4-accent-rgb), 0.05);
+  border-left: 3px solid rgba(var(--eval4-accent-rgb), 0.4);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--fg-body);
+}
+
+.suggestion-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: rgba(var(--eval4-accent-rgb), 0.12);
+  color: var(--eval4-accent, var(--accent));
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.suggestion-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.script-eval-v4-report-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.script-eval-v4-report-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  flex: 1;
+  min-height: 38px;
+  border: 1px solid var(--eval4-border);
+  border-radius: 10px;
+  background: var(--eval4-layer-1);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.18s, color 0.18s, border-color 0.18s;
+}
+
+.script-eval-v4-report-btn:hover {
+  border-color: rgba(var(--eval4-accent-rgb), 0.4);
+  background: rgba(var(--eval4-accent-rgb), 0.08);
+  color: var(--fg-body);
+}
+
+.script-eval-v4-report-btn:active {
+  background: rgba(var(--eval4-accent-rgb), 0.14);
+}
+
+.script-eval-v4-panel-right {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* === Management Center === */
+.token-usage-page.management-center-page {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 0 0 82px;
+  background: var(--bg-base);
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.management-center-shell {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0 auto;
+  overflow: auto;
+  padding: 0 28px 36px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.36) transparent;
+}
+
+.management-center-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  min-height: 52px;
+  margin: 0 -28px;
+  padding: 0 28px;
+  border-bottom: 1px solid var(--border-weak);
+  border-bottom-left-radius: var(--radius-md);
+  background: var(--bg-surface, var(--bg-panel));
+  overflow: hidden;
+}
+
+.management-center-toolbar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  margin-right: auto;
+}
+
+.management-center-toolbar__title strong {
+  color: var(--fg-body);
+  font-size: 14px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.management-center-toolbar button,
+.management-card__head button,
+.management-center-status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  gap: 7px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.management-center-toolbar button {
+  padding: 0 13px;
+  cursor: pointer;
+}
+
+.management-center-toolbar button.management-center-toolbar__back {
+  width: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--fg-muted);
+}
+
+.management-center-toolbar button:hover,
+.management-card__head button:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.management-center-toolbar button.is-primary {
+  border-color: rgba(var(--accent-rgb), 0.56);
+  background: var(--accent);
+  color: var(--dg-button-text, rgb(6 12 10));
+}
+
+.management-center-status-pill {
+  min-height: 28px;
+  padding: 0 10px;
+  color: var(--fg-muted);
+}
+
+.management-center-overview {
+  display: grid;
+  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.88fr);
+  align-items: start;
+  gap: 12px;
+}
+
+.management-card {
+  min-width: 0;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  box-shadow: none;
+}
+
+.management-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.management-card__head h2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.management-card__head h2 .anticon {
+  color: var(--fg-muted);
+}
+
+.management-card__head > span,
+.management-card__head button {
+  min-height: 24px;
+  padding: 0 9px;
+  border-radius: var(--radius-xs);
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+.management-card--chart {
+  display: flex;
+  flex-direction: column;
+  height: clamp(360px, 48vh, 560px);
+  min-height: 0;
+}
+
+.management-empty-chart {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  justify-items: center;
+  min-height: calc(100% - 76px);
+  margin: 12px 16px 16px;
+  padding: 44px 20px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-soft);
+  font-size: 13px;
+  text-align: center;
+}
+
+.management-empty-chart .anticon {
+  margin: 0 0 12px;
+  color: var(--fg-dim);
+  font-size: 44px;
+  opacity: 0.26;
+}
+
+.management-model-list {
+  display: grid;
+  gap: 8px;
+  padding: 10px 14px 14px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.management-model-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.management-model-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.management-model-list::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.42);
+  background-clip: padding-box;
+}
+
+.management-model-row,
+.management-record-table__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) auto auto;
+  align-items: center;
+  gap: 14px;
+  min-height: 42px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.management-model-row strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.management-model-row em {
+  color: var(--accent);
+  font-style: normal;
+  font-weight: 850;
+}
+
+.management-balance-alert {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 14px;
+  padding: 11px 16px;
+  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--bg-inset));
+  color: var(--fg-body);
+  font-size: 13px;
+}
+
+.management-balance-alert .anticon {
+  color: var(--warning, #f59e0b);
+  font-size: 18px;
+}
+
+.management-balance-alert span {
+  flex: 1;
+  min-width: 0;
+}
+
+.management-balance-alert button {
+  flex-shrink: 0;
+  min-height: 28px;
+  padding: 0 14px;
+  border-radius: var(--radius-xs);
+  background: var(--warning, #f59e0b);
+  color: #1a1205;
+  font-size: 12px;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.management-metric-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0 0 12px;
+}
+
+.management-metric-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+}
+
+.management-metric-card.is-accent {
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.management-metric-card.is-warn {
+  border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, transparent);
+}
+
+.management-metric-card__label {
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+.management-metric-card__value {
+  color: var(--fg-body);
+  font-size: 20px;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.management-metric-card.is-warn .management-metric-card__value {
+  color: var(--warning, #f59e0b);
+}
+
+.management-metric-card__hint {
+  color: var(--fg-soft);
+  font-size: 11px;
+}
+
+.management-model-bar {
+  display: grid;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.management-model-bar__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.management-model-bar__top strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.management-model-bar__top em {
+  flex-shrink: 0;
+  color: var(--accent);
+  font-style: normal;
+  font-weight: 850;
+  font-size: 12px;
+}
+
+.management-model-bar__track {
+  height: 5px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fg-dim) 18%, transparent);
+  overflow: hidden;
+}
+
+.management-model-bar__track span {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent-cyan, var(--accent)), var(--accent));
+  transition: width 0.4s ease;
+}
+
+.management-model-bar__sub {
+  color: var(--fg-soft);
+  font-size: 11px;
+}
+
+.management-trend-card {
+  margin-top: 12px;
+}
+
+.management-status-trend {
+  padding: 6px 14px 10px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.management-status-trend__title {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+.management-status-trend__empty {
+  display: block;
+  padding: 12px 0;
+  color: var(--fg-soft);
+  font-size: 12px;
+  text-align: center;
+}
+
+.usage-trend {
+  padding: 4px 0 0;
+}
+
+.usage-trend__svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.usage-trend__grid {
+  stroke: color-mix(in srgb, var(--fg-dim) 16%, transparent);
+  stroke-width: 1;
+  stroke-dasharray: 3 4;
+}
+
+.usage-trend__line {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.usage-trend__dot {
+  fill: var(--bg-elevated);
+  stroke: var(--accent);
+  stroke-width: 2;
+}
+
+.usage-trend__xlabel {
+  fill: var(--fg-soft);
+  font-size: 11px;
+}
+
+.usage-trend__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 18px;
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-weak);
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.usage-trend__meta b {
+  color: var(--accent);
+  font-weight: 850;
+}
+
+@media (max-width: 760px) {
+  .management-metric-cards {
+    grid-template-columns: 1fr;
+  }
+}
+
+.management-status-card {
+  min-height: auto;
+}
+
+.management-status-card dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 10px 14px 8px;
+}
+
+.management-status-card div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.management-status-card dt {
+  color: var(--accent-cyan);
+  font-size: 12px;
+}
+
+.management-status-card dd {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.management-status-card dd.is-good {
+  color: var(--accent);
+}
+
+.management-status-card dd i,
+.management-member-meter b::before {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  content: "";
+}
+
+.management-members,
+.management-records {
+  padding-bottom: 12px;
+}
+
+.management-member-list {
+  display: grid;
+  gap: 8px;
+  padding: 8px 14px 0;
+}
+
+.management-member-row {
+  display: grid;
+  grid-template-columns: auto minmax(160px, 1fr) auto auto auto auto;
+  align-items: center;
+  gap: 18px;
+  min-height: 54px;
+  padding: 0 14px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.management-member-avatar {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.88);
+  color: var(--fg-body);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.management-member-row div {
+  display: grid;
+  gap: 2px;
+}
+
+.management-member-row strong {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.management-member-row em {
+  color: var(--fg-soft);
+  font-size: 11px;
+  font-style: normal;
+}
+
+.management-member-role {
+  min-width: 76px;
+  padding: 3px 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-panel);
+  color: var(--fg-muted);
+  font-size: 11px;
+  text-align: center;
+}
+
+.management-member-meter {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.management-member-meter b {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.management-member-row > .anticon {
+  color: var(--accent);
+}
+
+.management-record-table {
+  display: grid;
+  min-height: calc(100% - 48px);
+  padding: 12px 16px 0;
+}
+
+.management-record-table__head {
+  display: grid;
+  grid-template-columns: 1fr 0.8fr 1.2fr 2fr 0.7fr 0.7fr 0.8fr;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.management-record-table__row {
+  grid-template-columns: 1fr 0.8fr 1.2fr 2fr 0.7fr 0.7fr 0.8fr;
+  min-height: 38px;
+  margin-top: 8px;
+}
+
+.management-record-table__row span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.management-record-table__row span:last-child {
+  color: var(--accent);
+  font-weight: 850;
+}
+
+.management-record-empty {
+  display: grid;
+  place-items: center;
+  min-height: 230px;
+  color: var(--fg-soft);
+  font-size: 13px;
+}
+
+.management-record-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--border-weak);
+  margin-top: 4px;
+}
+
+.management-record-pagination button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border-weak);
+  background: var(--bg-elevated);
+  color: var(--fg-base);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.management-record-pagination button:hover:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.management-record-pagination button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.management-record-pagination span {
+  font-size: 12px;
+  color: var(--fg-soft);
+  min-width: 48px;
+  text-align: center;
+}
+
+.management-record-table__row span.is-good {
+  color: var(--success, #10b981);
+}
+
+.management-record-table__row span.is-error {
+  color: var(--error, #ef4444);
+}
+
+@media (max-width: 1180px) {
+  .token-usage-page.management-center-page {
+    padding-left: 20px;
+  }
+
+  .management-center-shell {
+    grid-template-rows: auto auto auto auto;
+    padding: 0 20px 32px;
+  }
+
+  .management-center-toolbar {
+    margin: 0 -20px;
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: 900px) {
+  .management-center-overview,
+  .management-member-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .management-card--chart {
+    height: min(420px, 58vh);
+  }
+
+  .management-center-toolbar {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+
+/* === Service Settings === */
+.settings-page {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding-left: 82px;
+  background: var(--bg-base);
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.settings-page__shell {
+  display: grid;
+  align-content: start;
+  gap: 18px;
+  width: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 28px;
+}
+
+.settings-page__head,
+.settings-page__grid article {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+}
+
+.settings-page__head {
+  padding: 24px;
+}
+
+.settings-page__head span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.settings-page__head h1,
+.settings-page__head p {
+  margin: 0;
+}
+
+.settings-page__head h1 {
+  color: var(--fg-body);
+  font-size: 26px;
+  font-weight: 900;
+}
+
+.settings-page__head p {
+  margin-top: 8px;
+  color: var(--fg-muted);
+  font-size: 14px;
+}
+
+.settings-page__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.settings-page__grid article {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+  min-height: 168px;
+  padding: 18px;
+}
+
+.settings-page__grid article > .anticon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: var(--radius-xs);
+  background: var(--accent-muted, rgba(var(--accent-rgb), 0.13));
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.settings-page__grid article div {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+}
+
+.settings-page__grid strong {
+  color: var(--fg-body);
+  font-size: 15px;
+}
+
+.settings-page__grid span {
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.settings-page__grid button {
+  grid-column: 1 / -1;
+  align-self: end;
+  justify-self: start;
+  min-height: 34px;
+  padding: 0 13px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.settings-page__grid button:hover {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+@media (max-width: 1180px) {
+  .settings-page {
+    padding-left: 20px;
+  }
+
+  .settings-page__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.script-eval-v4-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 90, 95, 0.1);
+  border: 1px solid rgba(255, 90, 95, 0.25);
+  color: var(--error);
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.script-eval-v4-error__icon {
+  flex-shrink: 0;
+  font-size: 16px;
+}
diff --git a/src/styles/pages/size-template.css b/src/styles/pages/size-template.css
new file mode 100644
index 0000000..1f7ef74
--- /dev/null
+++ b/src/styles/pages/size-template.css
@@ -0,0 +1,476 @@
+.product-clone-page[data-tool="clone"].size-template-workbench {
+  --clone-settings-panel-width: 640px;
+  --size-green: #34d399;
+  --size-cyan: #38bdf8;
+  --size-violet: #a78bfa;
+  --size-amber: #fbbf24;
+}
+
+.web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"] {
+  padding-left: 92px;
+}
+
+.web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"] > .product-clone-shell {
+  width: 100%;
+  grid-template-columns: var(--clone-settings-panel-width) minmax(0, 1fr);
+}
+
+.web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.size-template-workbench .product-clone-panel {
+  background: #15171c;
+}
+
+.size-template-workbench .size-template-settings-panel {
+  gap: 18px;
+  padding: 22px 22px;
+}
+
+.size-template-workbench .size-template-upload-card,
+.size-template-workbench .size-template-generate-card {
+  border-color: #303540;
+  border-radius: 14px;
+  background: #1b1d23;
+  padding: 16px;
+}
+
+.size-template-workbench .size-template-upload-card h2,
+.size-template-workbench .size-template-generate-card h2 {
+  margin-bottom: 11px;
+  color: #b8c0cd;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.size-template-workbench .size-template-upload-zone {
+  min-height: 174px;
+  border-radius: 10px;
+}
+
+.size-template-workbench .size-template-uploaded-files {
+  margin-top: 10px;
+}
+
+.size-template-empty-state.has-upload {
+  gap: 12px;
+}
+
+.size-template-empty-state__image {
+  width: min(72%, 420px);
+  max-height: min(46vh, 420px);
+  object-fit: contain;
+  border: 1px solid #303540;
+  border-radius: 14px;
+  background: #101115;
+}
+
+.size-template-workbench .size-template-category-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.size-template-workbench .size-template-category-grid button {
+  height: 54px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.2;
+  white-space: normal;
+}
+
+.size-template-workbench .clone-ai-settings-section {
+  gap: 10px;
+}
+
+.size-template-workbench .clone-ai-settings-section + .clone-ai-settings-section {
+  margin-top: 16px;
+}
+
+.size-template-workbench .clone-ai-select-group {
+  gap: 12px;
+}
+
+.size-template-workbench .size-template-static-field > button {
+  height: 66px;
+  padding: 10px 38px 10px 14px;
+}
+
+.size-template-workbench .size-template-static-field > button {
+  cursor: default;
+}
+
+.size-template-workbench .size-template-static-field.is-clickable > button {
+  cursor: pointer;
+}
+
+.size-template-workbench .size-template-static-field.is-clickable > button:hover,
+.size-template-workbench .size-template-static-field.is-clickable > button[aria-expanded="true"] {
+  border-color: #34d399;
+  background: #202c28;
+}
+
+.size-template-workbench .size-template-static-field > button:active {
+  transform: none;
+}
+
+.size-template-workbench .size-template-static-field > button i {
+  display: none;
+}
+
+.size-template-workbench .size-template-static-field.is-clickable > button i {
+  display: block;
+}
+
+.size-template-platform-dialog {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  display: grid;
+  gap: 5px;
+  overflow: hidden;
+  border: 1px solid #303540;
+  border-radius: 10px;
+  background: #20232a;
+  padding: 6px;
+  box-shadow: 0 18px 40px rgb(0 0 0 / 34%);
+  animation: size-template-dialog-rise 150ms ease both;
+}
+
+.size-template-platform-dialog button {
+  min-height: 38px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #b7bfcc;
+  padding: 0 12px;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.size-template-platform-dialog button:hover,
+.size-template-platform-dialog button.is-active {
+  background: #17352a;
+  color: #34d399;
+}
+
+@keyframes size-template-dialog-rise {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.size-template-workbench .size-template-preset-panel {
+  max-height: none;
+}
+
+.size-template-workbench .size-template-preset-list button span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.size-template-workbench .size-template-option-panel {
+  flex: 1 1 auto;
+  min-height: 238px;
+  height: auto;
+  max-height: none;
+  gap: 12px;
+  padding: 14px;
+}
+
+.size-template-workbench .clone-ai-model-tabs {
+  gap: 10px;
+}
+
+.size-template-workbench .clone-ai-model-tabs button {
+  height: 42px;
+  font-size: 13px;
+}
+
+.size-template-workbench .clone-ai-model-scroll {
+  padding-right: 6px;
+}
+
+.size-template-workbench .size-template-option-grid {
+  align-content: start;
+  gap: 10px;
+}
+
+.size-template-workbench .size-template-option-grid button {
+  justify-content: flex-start;
+  min-height: 50px;
+  padding: 11px 12px;
+  font-size: 13px;
+  text-align: left;
+  line-height: 1.3;
+}
+
+.size-template-workbench .size-template-submit {
+  flex: 0 0 auto;
+  min-height: 58px;
+  margin-top: 0;
+  font-size: 16px;
+}
+
+.size-template-workbench .size-template-demo-board {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) 54px minmax(330px, 520px);
+  align-items: center;
+  gap: 20px;
+  width: min(100%, 930px);
+}
+
+.size-template-workbench .size-template-demo-board::before {
+  content: "";
+  display: block;
+  grid-column: 2;
+  grid-row: 1;
+  width: 54px;
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #34d399, rgb(52 211 153 / 0%));
+  box-shadow: 0 0 18px rgb(52 211 153 / 35%);
+}
+
+.size-template-main-frame {
+  --size-template-ratio: 1 / 1;
+  --size-tone: var(--size-green);
+  display: grid;
+  grid-column: 1;
+  grid-row: 1;
+  width: min(100%, 300px);
+  aspect-ratio: var(--size-template-ratio);
+  min-height: 180px;
+  max-height: 360px;
+  align-content: center;
+  justify-items: center;
+  gap: 10px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--size-tone) 48%, #2c3038);
+  border-left: 6px solid var(--size-tone);
+  border-radius: 14px;
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px),
+    linear-gradient(180deg, rgb(255 255 255 / 8%) 1px, transparent 1px),
+    linear-gradient(135deg, color-mix(in srgb, var(--size-tone) 18%, transparent), rgb(255 255 255 / 5%)),
+    #1b1d23;
+  background-size: 20px 20px, 20px 20px, auto, auto;
+  color: #eef2f6;
+  cursor: pointer;
+  box-shadow: 0 26px 70px rgb(0 0 0 / 35%);
+}
+
+.size-template-main-frame span {
+  color: #eef2f6;
+  font-size: clamp(42px, 6vw, 72px);
+  font-weight: 950;
+  line-height: 1;
+}
+
+.size-template-main-frame strong {
+  color: rgb(238 242 246 / 72%);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.size-template-main-frame.is-green {
+  --size-tone: var(--size-green);
+}
+
+.size-template-main-frame.is-cyan {
+  --size-tone: var(--size-cyan);
+}
+
+.size-template-main-frame.is-violet {
+  --size-tone: var(--size-violet);
+}
+
+.size-template-main-frame.is-amber {
+  --size-tone: var(--size-amber);
+}
+
+.size-template-spec-grid {
+  display: grid;
+  grid-column: 3;
+  grid-row: 1;
+  grid-template-columns: repeat(2, minmax(130px, 1fr));
+  gap: 12px;
+}
+
+.size-template-spec-grid span {
+  display: grid;
+  min-height: 112px;
+  align-content: center;
+  gap: 8px;
+  border: 1px solid #2c3038;
+  border-radius: 14px;
+  background: #1b1d23;
+  color: #8f98a8;
+  padding: 16px;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.size-template-spec-grid b {
+  color: #eef2f6;
+  font-size: 18px;
+  font-weight: 950;
+}
+
+.size-template-preview-note {
+  position: absolute;
+  left: 46px;
+  right: 46px;
+  bottom: 118px;
+  display: grid;
+  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  border: 1px solid #2c3038;
+  border-radius: 18px;
+  background: #1b1d23;
+  padding: 14px 16px;
+}
+
+.size-template-preview-note > div:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: #eef2f6;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.size-template-preview-note > div:first-child .anticon {
+  color: #34d399;
+}
+
+.size-template-preview-note p {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: #8f98a8;
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.size-template-detail-card {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: min(100%, 930px);
+}
+
+.size-template-detail-card span {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  border: 1px solid #2c3038;
+  border-radius: 12px;
+  background: #1b1d23;
+  color: #b7bfcc;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.size-template-check-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.size-template-check-list span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  border: 1px solid #303540;
+  border-radius: 999px;
+  background: #22252d;
+  color: #b7bfcc;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.size-template-check-list .anticon {
+  color: #34d399;
+}
+
+@media (max-width: 1320px) {
+  .size-template-workbench .size-template-demo-board {
+    grid-template-columns: minmax(180px, 260px) 44px minmax(280px, 1fr);
+  }
+
+  .size-template-preview-note {
+    left: 30px;
+    right: 30px;
+  }
+
+  .size-template-detail-card {
+    width: min(100%, 840px);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"] {
+    --clone-settings-panel-width: 100%;
+    padding-left: 0;
+  }
+
+  .web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"] > .product-clone-shell,
+  .web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="sizeTemplate"] .product-clone-page[data-tool="clone"].is-settings-collapsed .product-clone-panel {
+    display: none;
+  }
+
+  .size-template-workbench .size-template-demo-board {
+    grid-template-columns: 1fr;
+    max-width: 430px;
+  }
+
+  .size-template-workbench .size-template-demo-board::before {
+    display: none;
+  }
+
+  .size-template-main-frame,
+  .size-template-spec-grid {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .size-template-spec-grid,
+  .size-template-preview-note,
+  .size-template-detail-card {
+    grid-template-columns: 1fr;
+  }
+
+  .size-template-preview-note,
+  .size-template-detail-card {
+    position: static;
+    width: min(100%, 430px);
+  }
+}
diff --git a/src/styles/pages/studio-layout.css b/src/styles/pages/studio-layout.css
new file mode 100644
index 0000000..743cfd7
--- /dev/null
+++ b/src/styles/pages/studio-layout.css
@@ -0,0 +1,680 @@
+/* Unified studio layout — shared by Digital Human, Character Mix, and similar workspace pages. */
+.studio-tool-layout {
+  display: grid;
+  grid-template-rows: 46px minmax(0, 1fr) 36px;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(238px, 280px);
+  grid-template-areas:
+    "toolstrip toolstrip toolstrip"
+    "left canvas right"
+    "status status status";
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-base);
+}
+
+.studio-tool-layout--no-left {
+  grid-template-columns: minmax(0, 1fr) minmax(238px, 280px);
+  grid-template-areas:
+    "toolstrip toolstrip"
+    "canvas right"
+    "status status";
+}
+
+.studio-tool-layout--no-right {
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
+  grid-template-areas:
+    "toolstrip toolstrip"
+    "left canvas"
+    "status status";
+}
+
+.studio-tool-layout--no-left.studio-tool-layout--no-right {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "toolstrip"
+    "canvas"
+    "status";
+}
+
+.studio-tool-layout--no-top {
+  grid-template-rows: minmax(0, 1fr) 36px;
+  grid-template-areas:
+    "left canvas right"
+    "status status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-left {
+  grid-template-areas:
+    "canvas right"
+    "status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-right {
+  grid-template-areas:
+    "left canvas"
+    "status status";
+}
+
+.studio-tool-layout--no-top.studio-tool-layout--no-left.studio-tool-layout--no-right {
+  grid-template-areas:
+    "canvas"
+    "status";
+}
+
+.studio-toolstrip {
+  grid-area: toolstrip;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 12px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border-weak);
+  background:
+    linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), transparent 48%),
+    var(--bg-panel);
+}
+
+.studio-toolstrip__left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 12px;
+}
+
+.studio-toolstrip__breadcrumb {
+  color: var(--fg-body);
+  font-size: 14px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.studio-toolstrip__divider {
+  width: 1px;
+  height: 18px;
+  background: var(--border-subtle);
+}
+
+.studio-segmented {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.studio-segmented__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
+}
+
+.studio-segmented__btn:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.studio-segmented__btn.is-active {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+}
+
+/* Panels */
+.studio-panel {
+  grid-area: left;
+  display: grid;
+  align-content: start;
+  min-width: 0;
+  min-height: 0;
+  gap: 0;
+  overflow-y: auto;
+  padding: 14px;
+  border-right: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+  scrollbar-color: rgba(var(--accent-rgb), 0.34) transparent;
+}
+
+.studio-panel--right {
+  grid-area: right;
+  border-right: 0;
+  border-left: 1px solid var(--border-weak);
+}
+
+.studio-panel__section {
+  display: grid;
+  gap: 10px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.studio-panel__section:first-child {
+  padding-top: 0;
+}
+
+.studio-panel__section:last-child {
+  border-bottom: 0;
+}
+
+.studio-panel__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 10px;
+}
+
+.studio-panel__section-title {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.studio-panel__section-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.studio-panel__section-chip--waiting {
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.studio-panel__section-chip--ready {
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+}
+
+/* Upload slots */
+.studio-upload-slot--empty,
+.studio-upload-slot--filled {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  min-height: 100px;
+  padding: 16px;
+  border: 1px dashed rgba(var(--accent-rgb), 0.36);
+  border-radius: var(--radius-sm);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent),
+    var(--bg-inset);
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+
+.studio-upload-slot--empty:hover,
+.studio-upload-slot--filled:hover {
+  border-color: rgba(var(--accent-rgb), 0.56);
+  background: var(--bg-hover);
+}
+
+.studio-upload-slot--filled {
+  border-style: solid;
+  border-color: rgba(var(--accent-rgb), 0.28);
+}
+
+.studio-upload-slot--empty input[type="file"],
+.studio-upload-slot--filled input[type="file"] {
+  display: none;
+}
+
+.studio-upload-slot--empty__icon {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-xs);
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+  font-size: 24px;
+}
+
+.studio-upload-slot--filled__thumb {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+  border: 1px solid var(--border-subtle);
+}
+
+.studio-upload-slot--filled__info {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.studio-upload-slot--filled__info strong {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-upload-slot--filled__info small {
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+/* Canvas */
+.studio-canvas {
+  grid-area: canvas;
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+  background:
+    radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
+    var(--bg-inset);
+  background-size: 22px 22px;
+}
+
+.studio-canvas-ghost {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  padding: 32px;
+  text-align: center;
+}
+
+.studio-canvas-ghost__icon {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-sm);
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+  font-size: 26px;
+}
+
+.studio-canvas-ghost__title {
+  color: var(--fg-body);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.studio-canvas-ghost__hint {
+  max-width: 320px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.studio-canvas-image {
+  display: grid;
+  place-items: center;
+}
+
+.studio-canvas-image img {
+  display: block;
+  max-width: 100%;
+  max-height: 68vh;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  object-fit: contain;
+}
+
+.studio-canvas-video {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+}
+
+.studio-canvas-video video {
+  display: block;
+  max-width: 100%;
+  max-height: 68vh;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+}
+
+.studio-result-caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 10px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.studio-result-caption strong {
+  color: var(--accent);
+  font-weight: 750;
+}
+
+.studio-result-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.studio-result-actions--with-clear {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.studio-result-actions button {
+  display: inline-flex;
+  min-width: 0;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 750;
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
+}
+
+.studio-result-actions button:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.11);
+  color: var(--accent);
+}
+
+.studio-result-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.studio-canvas-pip {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  width: 96px;
+  height: 96px;
+  overflow: hidden;
+  border: 2px solid rgba(var(--accent-rgb), 0.42);
+  border-radius: var(--radius-xs);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.studio-canvas-pip img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Controls: toggles, generate button, audio preview */
+.studio-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 12px;
+  padding: 10px 0;
+}
+
+.studio-toggle-row__copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.studio-toggle-row__title {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.studio-toggle-row__desc {
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+.studio-toggle {
+  position: relative;
+  flex: 0 0 auto;
+  width: 40px;
+  height: 22px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease;
+}
+
+.studio-toggle__thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fg-muted);
+  transition: transform 140ms ease, background 140ms ease;
+}
+
+.studio-toggle.is-on {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.13);
+}
+
+.studio-toggle.is-on .studio-toggle__thumb {
+  background: var(--accent);
+  transform: translateX(18px);
+}
+
+.studio-generate-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  margin-top: 8px;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  color: #061014;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 750;
+  cursor: pointer;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.studio-generate-btn:hover {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}
+
+.studio-generate-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.studio-audio-preview {
+  width: 100%;
+  height: 36px;
+  margin-top: 8px;
+  border-radius: var(--radius-xs);
+}
+
+/* Debug panel */
+.studio-debug-panel__clear {
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  cursor: pointer;
+}
+
+.studio-debug-panel__clear:hover {
+  color: var(--fg-body);
+  border-color: rgba(var(--accent-rgb), 0.36);
+}
+
+.studio-debug-panel__list {
+  display: grid;
+  gap: 8px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.studio-debug-panel__item {
+  display: grid;
+  gap: 5px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid rgba(var(--accent-rgb), 0.42);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.studio-debug-panel__item--success {
+  border-left-color: var(--accent);
+}
+
+.studio-debug-panel__item--error {
+  border-left-color: #ff5c7a;
+}
+
+.studio-debug-panel__item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 8px;
+}
+
+.studio-debug-panel__item-head strong {
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 750;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-debug-panel__item-head span,
+.studio-debug-panel__empty {
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+.studio-debug-panel__item p {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+/* Status bar */
+.studio-status-bar {
+  grid-area: status;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+  padding: 0 16px;
+  border-top: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.studio-status-bar__badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.studio-status-bar__badge--idle {
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.studio-status-bar__badge--running {
+  background: rgba(var(--accent-rgb), 0.13);
+  color: var(--accent);
+}
+
+.studio-status-bar__text {
+  color: var(--fg-muted);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-status-bar__meta {
+  margin-left: auto;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* Responsive */
+@media (max-width: 1080px) {
+  .studio-tool-layout {
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+    grid-template-areas:
+      "toolstrip toolstrip"
+      "left canvas"
+      "status status";
+  }
+
+  .studio-panel--right {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .studio-tool-layout {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 46px auto minmax(260px, 1fr) 36px;
+    grid-template-areas:
+      "toolstrip"
+      "left"
+      "canvas"
+      "status";
+  }
+
+  .studio-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-weak);
+    max-height: 320px;
+  }
+}
diff --git a/src/styles/pages/subtitle-removal.css b/src/styles/pages/subtitle-removal.css
new file mode 100644
index 0000000..efc87b9
--- /dev/null
+++ b/src/styles/pages/subtitle-removal.css
@@ -0,0 +1,135 @@
+.subtitle-removal-presets {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.subtitle-removal-preset {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 8px;
+  border: 1.5px solid var(--border-weak, #e5e5e5);
+  border-radius: 10px;
+  background: var(--bg-surface, #fff);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.subtitle-removal-preset:hover {
+  border-color: var(--accent, #0d9488);
+  background: var(--bg-elevated, #f8f8f8);
+}
+
+.subtitle-removal-preset.is-active {
+  border-color: var(--accent, #0d9488);
+  background: color-mix(in srgb, var(--accent, #0d9488) 6%, transparent);
+}
+
+.subtitle-removal-preset strong {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.subtitle-removal-preset span {
+  font-size: 11px;
+  opacity: 0.55;
+  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);
+  overflow: hidden;
+}
+
+.subtitle-removal-preset__region {
+  position: absolute;
+  left: 0;
+  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);
+}
+
+.subtitle-removal-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.subtitle-removal-preview__video-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+}
+
+.subtitle-removal-preview__video-wrap video {
+  max-width: 100%;
+  max-height: 40vh;
+  border-radius: 8px;
+}
+
+.subtitle-removal-preview__video-wrap h4 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.subtitle-removal-preview__region-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: var(--region-top);
+  height: var(--region-height);
+  background: rgba(13, 148, 136, 0.15);
+  border-top: 2px dashed rgba(13, 148, 136, 0.6);
+  border-bottom: 2px dashed rgba(13, 148, 136, 0.6);
+  pointer-events: none;
+  border-radius: 2px;
+}
+
+.subtitle-removal-preview__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.subtitle-removal-preview__actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.subtitle-removal-preview__actions button:hover:not(:disabled) {
+  background: var(--accent, #0d9488);
+}
+
+.subtitle-removal-preview__actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/src/styles/pages/welcome-splash.css b/src/styles/pages/welcome-splash.css
new file mode 100644
index 0000000..3e157ab
--- /dev/null
+++ b/src/styles/pages/welcome-splash.css
@@ -0,0 +1,124 @@
+.welcome-splash {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  transition: opacity 0.7s ease;
+}
+
+.welcome-splash.is-exiting {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.welcome-splash__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.welcome-splash__ambient {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 80%, rgba(0, 255, 0, 0.08), transparent 70%);
+  pointer-events: none;
+}
+
+.welcome-splash__hero {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 1rem;
+}
+
+.welcome-splash__title {
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
+  font-weight: 900;
+  font-size: clamp(4.5rem, 18vw, 9rem);
+  letter-spacing: 0.08em;
+  background: linear-gradient(135deg, #0f0, #0fa, #2eff7a, #aaffaa);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin: 0 0 0.3em;
+  animation: welcome-splash-glow 3s infinite alternate;
+}
+
+@keyframes welcome-splash-glow {
+  0% { text-shadow: 0 0 15px #0f0, 0 0 30px #0f8a3a; }
+  100% { text-shadow: 0 0 30px #2eff7a, 0 0 60px #0f0, 0 0 10px #aaffaa; }
+}
+
+.welcome-splash__subtitle {
+  font-family: "Microsoft YaHei", "PingFang SC", monospace;
+  font-size: clamp(1.1rem, 5vw, 1.8rem);
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  color: #caffb0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  padding: 0.6rem 1.5rem;
+  border-radius: 60px;
+  border: 1px solid rgba(0, 255, 0, 0.5);
+  box-shadow: 0 0 18px rgba(0, 255, 0, 0.25);
+  margin: 0;
+}
+
+.welcome-splash__enter {
+  font-family: "Microsoft YaHei", "PingFang SC", monospace;
+  font-size: clamp(1.3rem, 6vw, 2.2rem);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: #e0ffc0;
+  background: linear-gradient(135deg, rgba(0, 30, 0, 0.7), rgba(0, 60, 0, 0.6));
+  backdrop-filter: blur(8px);
+  padding: 0.7rem 1.8rem;
+  border-radius: 50px;
+  margin-top: 2rem;
+  border: 1px solid #2eff7a;
+  box-shadow: 0 0 25px rgba(50, 255, 50, 0.4);
+  cursor: pointer;
+  animation: welcome-splash-enter-in 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.2) both;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.welcome-splash__enter:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 40px rgba(50, 255, 50, 0.6);
+}
+
+.welcome-splash__enter:active {
+  transform: scale(0.97);
+}
+
+@keyframes welcome-splash-enter-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  .welcome-splash__subtitle {
+    white-space: normal;
+    width: 85%;
+    line-height: 1.4;
+    font-size: 1rem;
+    padding: 0.4rem 1rem;
+  }
+  .welcome-splash__title {
+    letter-spacing: 0.05em;
+  }
+}
diff --git a/src/styles/pages/workbench.css b/src/styles/pages/workbench.css
new file mode 100644
index 0000000..740d45a
--- /dev/null
+++ b/src/styles/pages/workbench.css
@@ -0,0 +1,442 @@
+/* Workbench page rules move here as they are retired from legacy-pages.css. */
+
+.wb-prompt-cases {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 1600px);
+  margin-top: 8px;
+}
+
+.wb-prompt-cases__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-auto-flow: dense;
+  grid-auto-rows: 10px;
+  gap: 10px;
+}
+
+.wb-prompt-case-card {
+  position: relative;
+  display: block;
+  min-width: 0;
+  min-height: 0;
+  grid-row: span 14;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  padding: 0;
+  cursor: zoom-in;
+  text-align: left;
+  isolation: isolate;
+}
+
+.wb-prompt-case-card--ratio-wide {
+  grid-column: span 1;
+  grid-row: span 8;
+}
+
+.wb-prompt-case-card--ratio-tall {
+  grid-column: span 1;
+  grid-row: span 23;
+}
+
+.wb-prompt-case-card--ratio-square {
+  grid-column: span 1;
+  grid-row: span 13;
+}
+
+.wb-prompt-case-card--ratio-portrait {
+  grid-column: span 1;
+  grid-row: span 16;
+}
+
+.wb-prompt-case-card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #07111b;
+  transform: scale(1.001);
+  transition: filter 180ms ease, transform 180ms ease;
+}
+
+.wb-prompt-case-card:hover img,
+.wb-prompt-case-card:focus-visible img {
+  filter: brightness(0.72);
+  transform: scale(1.035);
+}
+
+.wb-prompt-case-card > div {
+  position: absolute;
+  z-index: 1;
+}
+
+.wb-prompt-case-card > div {
+  inset: auto 0 0;
+  display: grid;
+  gap: 4px;
+  padding: 36px 12px 12px;
+  background: rgba(0, 0, 0, 0.82);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.wb-prompt-case-card:hover > div,
+.wb-prompt-case-card:focus-visible > div {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.wb-prompt-case-card strong {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.wb-prompt-case-card em {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 650;
+}
+
+.web-shell .ai-workbench-page.is-launch .wb-home {
+  gap: 20px;
+}
+
+.web-shell .ai-workbench-page.is-launch .wb-prompt-cases .wb-showcase__header {
+  margin-bottom: 10px;
+}
+
+.wb-prompt-case-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  background: rgba(2, 6, 12, 0.42);
+}
+
+.wb-prompt-case-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(2, 6, 12, 0.58);
+  backdrop-filter: none;
+  cursor: zoom-out;
+}
+
+.wb-prompt-case-modal__panel {
+  --prompt-case-modal-max-height: min(720px, calc(100svh - 56px));
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.95fr) minmax(300px, 1fr);
+  width: min(880px, calc(100vw - 56px));
+  max-height: var(--prompt-case-modal-max-height);
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 16px;
+  background: #070b10;
+  color: #e5edf7;
+  box-shadow: none;
+}
+
+.wb-prompt-case-modal__media {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px;
+  background: #05080d;
+}
+
+.wb-prompt-case-modal__media img {
+  display: block;
+  width: 100%;
+  max-height: min(560px, calc(100svh - 108px));
+  border-radius: 12px;
+  object-fit: contain;
+  box-shadow: none;
+}
+
+.wb-prompt-case-modal__sidebar {
+  position: relative;
+  display: grid;
+  align-content: start;
+  min-height: 0;
+  max-height: var(--prompt-case-modal-max-height);
+  gap: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 34px 26px 26px;
+  scrollbar-gutter: stable;
+  border-left: 1px solid rgba(148, 163, 184, 0.16);
+  background: #0c1118;
+}
+
+.wb-prompt-case-modal__close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.72);
+  color: #e5edf7;
+  cursor: pointer;
+}
+
+.wb-prompt-case-modal__close:hover {
+  background: rgba(30, 41, 59, 0.95);
+  color: #ffffff;
+}
+
+.wb-prompt-case-author {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.wb-prompt-case-author > span {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #00ff88;
+  color: #061014;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.wb-prompt-case-author strong,
+.wb-prompt-case-meta h2 {
+  color: #f8fafc;
+}
+
+.wb-prompt-case-author strong {
+  display: block;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-prompt-case-author em,
+.wb-prompt-case-meta span {
+  color: #94a3b8;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.wb-prompt-case-meta {
+  display: grid;
+  gap: 8px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+}
+
+.wb-prompt-case-meta h2 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 900;
+  line-height: 1.25;
+}
+
+.wb-prompt-case-meta p {
+  margin: 0;
+  color: #cbd5e1;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.65;
+}
+
+.wb-prompt-case-prompt {
+  display: grid;
+  gap: 10px;
+}
+
+.wb-prompt-case-prompt span {
+  color: #94a3b8;
+  font-size: 14px;
+  font-weight: 850;
+}
+
+.wb-prompt-case-prompt p {
+  margin: 0;
+  color: #e2e8f0;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.75;
+  white-space: pre-wrap;
+}
+
+.wb-prompt-case-actions {
+  position: sticky;
+  bottom: -1px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0 -2px -2px;
+  padding: 10px 2px 2px;
+  background: #0c1118;
+}
+
+.wb-prompt-case-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 44px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 8px;
+  background: #16202c;
+  color: #e5edf7;
+  font-size: 14px;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.wb-prompt-case-actions button:hover {
+  background: #1f2c3a;
+  color: #ffffff;
+}
+
+.wb-prompt-case-actions button:first-child {
+  background: #00ff88;
+  border-color: #00ff88;
+  color: #061014;
+}
+
+.wb-prompt-case-actions button:first-child:hover {
+  background: #42ffa6;
+  color: #061014;
+}
+
+@media (max-width: 980px) {
+  .wb-prompt-cases__grid {
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    grid-auto-rows: 8px;
+    gap: 8px;
+  }
+
+  .wb-prompt-case-card {
+    grid-row: span 13;
+  }
+
+  .wb-prompt-case-card--ratio-wide {
+    grid-column: span 1;
+    grid-row: span 7;
+  }
+
+  .wb-prompt-case-card--ratio-tall {
+    grid-column: span 1;
+    grid-row: span 19;
+  }
+
+  .wb-prompt-case-card--ratio-square {
+    grid-column: span 1;
+    grid-row: span 11;
+  }
+
+  .wb-prompt-case-card--ratio-portrait {
+    grid-column: span 1;
+    grid-row: span 14;
+  }
+
+  .wb-prompt-case-modal__panel {
+    --prompt-case-modal-max-height: calc(100svh - 28px);
+    width: min(640px, calc(100vw - 28px));
+    max-height: var(--prompt-case-modal-max-height);
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+  }
+
+  .wb-prompt-case-modal__media {
+    min-height: 0;
+    overflow: visible;
+    padding: 18px;
+  }
+
+  .wb-prompt-case-modal__sidebar {
+    max-height: none;
+    overflow: visible;
+    border-left: 0;
+    border-top: 1px solid rgba(148, 163, 184, 0.16);
+    padding: 24px 22px 24px;
+  }
+
+  .wb-prompt-case-modal__close {
+    right: 14px;
+    top: 14px;
+  }
+}
+
+@media (max-width: 560px) {
+  .wb-prompt-cases__grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-auto-rows: 8px;
+    gap: 8px;
+  }
+
+  .wb-prompt-case-card {
+    grid-row: span 12;
+  }
+
+  .wb-prompt-case-card--ratio-wide {
+    grid-column: span 1;
+    grid-row: span 7;
+  }
+
+  .wb-prompt-case-card--ratio-tall {
+    grid-column: span 1;
+    grid-row: span 18;
+  }
+
+  .wb-prompt-case-card--ratio-square {
+    grid-column: span 1;
+    grid-row: span 11;
+  }
+
+  .wb-prompt-case-card--ratio-portrait {
+    grid-column: span 1;
+    grid-row: span 13;
+  }
+
+  .wb-prompt-case-card > div {
+    padding: 34px 10px 10px;
+  }
+
+  .wb-prompt-case-card strong {
+    font-size: 12px;
+  }
+
+  .wb-prompt-case-card em {
+    font-size: 11px;
+  }
+
+  .wb-prompt-case-modal__media {
+    padding: 16px;
+  }
+
+  .wb-prompt-case-modal__sidebar {
+    padding: 22px 16px 22px;
+  }
+
+  .wb-prompt-case-actions {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/styles/shell/app-shell.css b/src/styles/shell/app-shell.css
new file mode 100644
index 0000000..5de0b7a
--- /dev/null
+++ b/src/styles/shell/app-shell.css
@@ -0,0 +1,542 @@
+/* Shell layout extracted from the legacy app stylesheet. */
+.web-shell {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--page-bg);
+  background-size: auto;
+}
+
+.web-shell[data-theme="dark"] {
+  background: var(--page-bg);
+  background-size: auto;
+}
+
+.event-strip {
+  position: relative;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  height: 36px;
+  padding: 0 44px 0 18px;
+  border-bottom: 1px solid rgba(37, 96, 56, 0.12);
+  background: rgba(210, 246, 219, 0.94);
+  color: #173425;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.web-shell[data-theme="dark"] .event-strip {
+  border-color: rgba(var(--accent-rgb), 0.2);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+}
+
+.event-strip__pill {
+  padding: 5px 13px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.86);
+  color: #236039;
+  box-shadow: inset 0 0 0 1px rgba(35, 96, 57, 0.11);
+}
+
+.web-shell[data-theme="dark"] .event-strip__pill {
+  background: rgba(255, 255, 255, 0.11);
+  color: var(--accent);
+}
+
+.event-strip button {
+  height: 24px;
+  padding: 0 12px;
+  border: 1px solid rgba(35, 96, 57, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.7);
+  color: #236039;
+  font-weight: 900;
+  cursor: pointer;
+  transition: background var(--transition-fast, 140ms ease), border-color var(--transition-fast, 140ms ease), transform var(--transition-fast, 140ms ease);
+}
+
+.event-strip button:hover {
+  transform: translateY(-1px);
+}
+
+.web-shell[data-theme="dark"] .event-strip button {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--fg-body);
+}
+
+.event-strip__close {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  transform: translateY(-50%);
+  border: 0;
+  background: transparent;
+  color: rgba(23, 52, 37, 0.7);
+  cursor: pointer;
+}
+
+.web-shell[data-theme="dark"] .event-strip__close {
+  color: rgba(244, 247, 245, 0.72);
+}
+
+.web-shell__stage {
+  position: relative;
+  height: calc(100svh - 36px);
+  min-height: 0;
+}
+
+.web-shell.event-strip-hidden .web-shell__stage {
+  height: 100svh;
+}
+
+.web-shell__content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.web-topbar {
+  position: relative;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 62px;
+  gap: 18px;
+  padding: 12px 22px 10px;
+  border-bottom: 1px solid var(--border-weak);
+  background: var(--bg-panel);
+}
+
+.web-shell[data-theme="dark"] .web-topbar {
+  background: var(--bg-panel);
+}
+
+.brand-lockup {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  background: transparent;
+  color: var(--text);
+  font-size: 15px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.brand-lockup__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font-size: 0;
+  box-shadow: none;
+}
+
+.brand-lockup__logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.brand-lockup__name {
+  white-space: nowrap;
+}
+
+.brand-lockup__tone {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.web-topbar__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  gap: 8px;
+}
+
+.creator-button,
+.member-button,
+.profile-button,
+.icon-button,
+.theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-width: 0;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 850;
+  cursor: pointer;
+  box-shadow: none;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease;
+}
+
+.web-shell[data-theme="dark"] .creator-button,
+.web-shell[data-theme="dark"] .member-button,
+.web-shell[data-theme="dark"] .profile-button,
+.web-shell[data-theme="dark"] .icon-button,
+.web-shell[data-theme="dark"] .theme-toggle {
+  background: var(--bg-inset);
+  box-shadow: none;
+}
+
+.creator-button {
+  border-color: rgba(var(--accent-rgb), 0.26);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: #1f6d3c;
+}
+
+.web-shell[data-theme="dark"] .creator-button {
+  color: var(--accent);
+}
+
+.member-button {
+  color: var(--cyan-strong);
+}
+
+.member-button--community {
+  color: var(--text);
+}
+
+.icon-button,
+.theme-toggle {
+  width: 36px;
+  padding: 0;
+}
+
+.theme-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 40px;
+  padding: 3px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: var(--bg-inset);
+  box-shadow: none;
+}
+
+.web-shell[data-theme="dark"] .theme-switcher {
+  border-color: rgba(var(--accent-rgb), 0.18);
+  background: var(--bg-inset);
+  box-shadow: none;
+}
+
+.theme-switcher .theme-toggle.theme-switcher__option {
+  width: auto;
+  min-width: 70px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0 10px;
+  border-color: transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+}
+
+.theme-switcher .theme-toggle.theme-switcher__option.is-active {
+  border-color: rgba(var(--accent-rgb), 0.24);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+}
+
+.theme-switcher .theme-toggle.theme-switcher__option:hover {
+  background: rgba(var(--accent-rgb), 0.12);
+  transform: translateY(0);
+}
+
+.profile-button--guest {
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: var(--accent);
+  color: #07100b;
+}
+
+.creator-button:hover,
+.member-button:hover,
+.profile-button:hover,
+.icon-button:hover,
+.theme-toggle:hover {
+  transform: translateY(-1px);
+  border-color: var(--line-strong);
+  background: var(--bg-hover);
+}
+
+.profile-button--guest:hover {
+  background: rgba(var(--accent-rgb), 0.88);
+  color: #07100b;
+}
+
+.status-dot {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--danger);
+}
+
+.floating-nav {
+  position: fixed;
+  z-index: 24;
+  left: 22px;
+  top: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 62px;
+  padding: 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: 20px;
+  transform: translateY(-50%);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-theme="dark"] .floating-nav {
+  background: var(--bg-panel);
+}
+
+.floating-nav__create,
+.floating-nav__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.floating-nav__item {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 44px;
+}
+
+.floating-nav__submenu {
+  position: absolute;
+  left: calc(100% + 12px);
+  top: 50%;
+  z-index: 3;
+  display: grid;
+  gap: 6px;
+  min-width: 112px;
+  padding: 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: 16px;
+  transform: translate(-6px, -50%);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-tight);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.web-shell[data-theme="dark"] .floating-nav__submenu {
+  background: var(--bg-elevated);
+}
+
+.floating-nav__item.has-children.is-submenu-open .floating-nav__submenu {
+  opacity: 1;
+  transform: translate(0, -50%);
+  pointer-events: auto;
+}
+
+.floating-nav__item.has-children.is-submenu-open .floating-nav__button .floating-nav__label {
+  opacity: 0;
+  transform: translate(-6px, -50%);
+}
+
+.floating-nav__subbutton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.floating-nav__subbutton:hover,
+.floating-nav__subbutton.is-active {
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+}
+
+.floating-nav__create {
+  margin-bottom: 6px;
+  background: var(--accent);
+  color: #07100b;
+  font-size: 26px;
+  font-weight: 900;
+  box-shadow: none;
+}
+
+.floating-nav__label {
+  position: absolute;
+  left: calc(100% + 12px);
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  max-width: 180px;
+  height: 30px;
+  padding: 0 11px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  transform: translate(-6px, -50%);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 900;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: var(--shadow-tight);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.floating-nav__button:hover,
+.floating-nav__button.is-active {
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--text);
+  transform: translateY(-1px);
+}
+
+.floating-nav__button:active {
+  transform: scale(0.92);
+  transition-duration: 80ms;
+}
+
+.floating-nav__button.is-active {
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
+}
+
+.floating-nav__button:hover .floating-nav__label,
+.floating-nav__button:focus-visible .floating-nav__label,
+.floating-nav__button.is-active .floating-nav__label {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.floating-nav__button.has-divider {
+  margin-top: 9px;
+}
+
+.floating-nav__button.has-divider::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  width: 30px;
+  height: 1px;
+  background: var(--line);
+}
+
+.floating-page-scroll-actions {
+  position: fixed;
+  z-index: 25;
+  left: 30px;
+  top: calc(50% + 265px);
+  display: grid;
+  gap: 7px;
+}
+
+.floating-page-scroll-actions__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 36px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.floating-page-scroll-actions__button:hover {
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.web-shell__page {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+}
diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css
new file mode 100644
index 0000000..bc1b417
--- /dev/null
+++ b/src/styles/themes/dark-green.css
@@ -0,0 +1,6662 @@
+/*
+ * Dark-green theme mapped from:
+ * - F:/AIagent/web (3)/src/styles/app.css
+ * - F:/AIagent/web (3)/src/styles/pages.css
+ *
+ * Keep this file as a source-aligned theme layer, not a patch pile.
+ */
+
+.web-shell[data-ui-theme="dark-green"] {
+  --dg-page: #0d0d0f;
+  --dg-shell: #0e0e10;
+  --dg-surface: #151719;
+  --dg-elevated: #181b1d;
+  --dg-inset: rgba(255, 255, 255, 0.05);
+  --dg-hover: rgba(255, 255, 255, 0.085);
+  --dg-line: rgba(255, 255, 255, 0.08);
+  --dg-line-strong: rgba(255, 255, 255, 0.2);
+  --dg-button-text: #061014;
+  background: var(--dg-page);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] *,
+.web-shell[data-ui-theme="dark-green"] *::before,
+.web-shell[data-ui-theme="dark-green"] *::after {
+  text-shadow: none;
+}
+
+/* Shell: migrated from web (3)/src/styles/app.css. */
+.web-shell[data-ui-theme="dark-green"] .web-shell__stage {
+  height: calc(100svh - 36px);
+  min-height: 0;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"].event-strip-hidden .web-shell__stage {
+  height: 100svh;
+}
+
+.web-shell[data-ui-theme="dark-green"] .web-shell__content,
+.web-shell[data-ui-theme="dark-green"] .web-shell__page {
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .event-strip {
+  height: 30px;
+  border-color: rgba(var(--accent-rgb), 0.2);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .event-strip__pill {
+  background: rgba(255, 255, 255, 0.11);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .event-strip button {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .event-strip__close {
+  color: rgba(244, 247, 245, 0.72);
+}
+
+.web-shell[data-ui-theme="dark-green"] .web-topbar {
+  flex: 0 0 56px;
+  gap: 16px;
+  padding: 0 20px;
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
+  background: var(--dg-surface);
+  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.06);
+}
+
+.web-shell[data-ui-theme="dark-green"] .brand-lockup {
+  gap: 10px;
+  color: var(--fg-body);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .brand-lockup__mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .brand-lockup__name {
+  color: var(--fg-body);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .brand-lockup__tone {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .web-topbar__actions {
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .creator-button,
+  .member-button,
+  .profile-button,
+  .icon-button,
+  .theme-toggle,
+  .notification-center__bell
+) {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .creator-button:hover,
+  .member-button:hover,
+  .profile-button:hover,
+  .icon-button:hover,
+  .theme-toggle:hover,
+  .notification-center__bell:hover
+) {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .creator-button {
+  border-color: var(--border-accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center {
+  isolation: isolate;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__bell {
+  width: 34px;
+  min-width: 34px;
+  padding: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__badge {
+  top: -5px;
+  right: -5px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border: 1px solid #0d0d0f;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--dg-button-text);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 14px;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+  top: calc(100% + 12px);
+  right: -88px;
+  width: min(420px, calc(100vw - 24px));
+  max-height: min(560px, calc(100vh - 92px));
+  border: 1px solid var(--dg-line);
+  border-radius: 16px;
+  background: #151719;
+  box-shadow: none;
+  color: var(--fg-body);
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__panel::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  right: 102px;
+  width: 10px;
+  height: 10px;
+  border-top: 1px solid var(--dg-line);
+  border-left: 1px solid var(--dg-line);
+  background: #151719;
+  transform: rotate(45deg);
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__header {
+  position: relative;
+  z-index: 1;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--dg-line);
+  background: #151719;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__title {
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__mark-read {
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.42);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__mark-read:hover {
+  background: rgba(var(--accent-rgb), 0.2);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__list {
+  max-height: min(486px, calc(100vh - 158px));
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: flex-start;
+  min-height: 72px;
+  padding: 12px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item + .notification-center__item {
+  margin-top: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item:last-child {
+  border-bottom: 1px solid transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item:hover {
+  border-color: var(--dg-line);
+  background: var(--dg-hover);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item.is-unread {
+  border-color: rgba(var(--accent-rgb), 0.24);
+  background: rgba(var(--accent-rgb), 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item.is-unread:hover {
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item-icon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  margin-top: 0;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.06);
+  font-size: 15px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item-body {
+  min-width: 0;
+  gap: 5px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item-title {
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.35;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item-desc {
+  display: -webkit-box;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__item-time {
+  margin-top: 2px;
+  color: var(--fg-dim);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .notification-center__empty {
+  min-height: 180px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .creator-button:hover {
+  background: rgba(var(--accent-rgb), 0.2);
+  color: var(--accent);
+  box-shadow: var(--accent-glow);
+}
+
+.web-shell[data-ui-theme="dark-green"] .member-button {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .member-button--community {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-button--guest {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-button--guest:hover {
+  background: var(--accent-dim);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-button--member {
+  border-color: var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .theme-switcher {
+  height: 40px;
+  padding: 3px;
+  border: 1px solid rgba(var(--accent-rgb), 0.18);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .theme-switcher .theme-toggle.theme-switcher__option {
+  min-width: 70px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0 10px;
+  border-color: transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .theme-switcher .theme-toggle.theme-switcher__option.is-active {
+  border-color: rgba(var(--accent-rgb), 0.24);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .theme-switcher .theme-toggle.theme-switcher__option:hover {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav {
+  left: 16px;
+  width: 52px;
+  padding: 6px;
+  gap: 2px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-lg);
+  background: #0e0e10;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav.is-expanded {
+  width: 64px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__item {
+  width: 40px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__button {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 16px;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__button.is-active {
+  background: var(--accent-muted);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--border-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__submenu {
+  left: calc(100% + 12px);
+  min-width: 112px;
+  padding: 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__subbutton {
+  height: 36px;
+  padding: 0 10px;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__subbutton:hover,
+.web-shell[data-ui-theme="dark-green"] .floating-nav__subbutton.is-active {
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__label {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  font-size: 11px;
+  font-weight: 500;
+  box-shadow: var(--shadow-md);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-nav__button.has-divider::before {
+  width: 24px;
+  background: var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-page-scroll-actions__button {
+  border-color: var(--border-weak);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .floating-page-scroll-actions__button:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-chat-scroll-actions__button {
+  width: 44px;
+  height: 36px;
+  border: 1px solid var(--border-weak);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-chat-scroll-actions__button:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+/* Page backgrounds: source-aligned solid dark base. */
+.web-shell[data-ui-theme="dark-green"] :is(
+  .home-page,
+  .pixel-home,
+  .workbench-landing-page,
+  .ecommerce-landing-page,
+  .community-page,
+  .assets-page,
+  .assets-centered-page,
+  .more-page,
+  .profile-page,
+  .ai-workbench-page,
+  .agent-experience,
+  .canvas-page
+) {
+  background: var(--dg-page);
+  background-image: none;
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .workbench-landing-scroll,
+  .ecommerce-landing-scroll,
+  .assets-centered-page,
+  .agent-composer,
+  .agent-run-card,
+  .agent-status,
+  .profile-page__card,
+  .profile-page__sidebar,
+  .profile-page__banner,
+  .profile-page__empty-state,
+  .notification-center__panel,
+  .profile-popover,
+  .login-gate-modal__panel
+) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .workbench-landing-scroll::before,
+  .workbench-composer-shell::before,
+  .ecommerce-landing-scroll::before,
+  .ecommerce-community-content::before,
+  .ecommerce-composer-shell::before,
+  .community-page .community-carousel::before,
+  .community-page .community-filter-bar::before,
+  .community-page .community-case-card::before,
+  .community-page .project-card::before,
+  .more-page .more-tool::before,
+  .assets-page .asset-card--desktop::before,
+  .profile-page__card::before,
+  .profile-page__sidebar::before
+) {
+  content: none;
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .assets-page .workspace-page-shell__content {
+  height: 100%;
+  overflow: auto;
+  padding: 32px clamp(24px, 5vw, 72px) 40px;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .assets-page .assets-centered-page {
+  width: min(100%, 1180px);
+  height: auto;
+  min-height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .workspace-page-shell__content {
+  height: 100%;
+  overflow: auto;
+  padding: 32px clamp(24px, 5vw, 72px) 40px;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .studio-tool-layout {
+  width: min(100%, 1180px);
+  height: auto;
+  min-height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(.assets-login-required, .assets-empty-state) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  background-image: none;
+  box-shadow: none;
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(.assets-login-required__icon, .assets-empty-state__icon) {
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  box-shadow: none;
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(.assets-login-required strong, .assets-empty-state strong) {
+  color: var(--fg-body);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(.assets-login-required p, .assets-empty-state p) {
+  color: var(--fg-muted);
+  font-weight: 500;
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"] .assets-page .workspace-page-shell__content,
+  .web-shell[data-ui-theme="dark-green"] .more-page .workspace-page-shell__content {
+    padding: 16px 14px 24px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .assets-page .assets-centered-page,
+  .web-shell[data-ui-theme="dark-green"] .more-page .studio-tool-layout {
+    width: 100%;
+  }
+}
+
+/* Ecommerce: migrated from web (3)/src/styles/pages.css actual component rules. */
+.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-scroll {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+  padding: 48px 24px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-shell {
+  width: auto;
+  max-width: 720px;
+  margin: 32px auto;
+  padding: 20px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  resize: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-tool:hover {
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-send {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 8px 18px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-send:hover:not(:disabled) {
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-send:disabled {
+  opacity: 0.4;
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+}
+
+/* Workbench: migrated from web (3)/src/styles/pages.css. */
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch {
+  background: #0d0d0f;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active {
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-shell,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-main,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-content-scroll,
+.web-shell[data-ui-theme="dark-green"] .wb-home,
+.web-shell[data-ui-theme="dark-green"] .wb-home__composer,
+.web-shell[data-ui-theme="dark-green"] .wb-composer,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-main-panel,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-messages-surface {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  background-image: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-shell {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch .ai-workbench-main {
+  overflow-y: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer {
+  position: absolute;
+  left: 50%;
+  right: auto;
+  bottom: 0;
+  z-index: 20;
+  width: min(100%, 980px);
+  max-width: 980px;
+  padding: 0 clamp(16px, 3vw, 30px) 18px;
+  transform: translateX(-50%);
+  background: transparent;
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  margin: 0;
+  padding: clamp(28px, 7vh, 72px) clamp(16px, 4vw, 56px) 56px;
+  gap: 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home__hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home__title {
+  color: var(--fg-body);
+  text-shadow: none;
+  font-family: var(--font-sans);
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home__composer {
+  width: min(100%, 980px);
+  max-width: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home__suggestions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 860px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 400;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-suggestion-chip:hover {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.04);
+  color: var(--fg-body);
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-suggestion-chip__icon {
+  display: inline-flex;
+  color: var(--accent);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-home__showcase {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 1460px);
+  max-width: none;
+  margin-top: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__header h2 {
+  margin: 0;
+  color: var(--fg-muted);
+  text-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
+  grid-auto-flow: dense;
+  grid-auto-rows: 8px;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card {
+  position: relative;
+  grid-row: span 30;
+  min-height: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-weight: 400;
+  isolation: isolate;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-0,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-5 {
+  grid-row: span 42;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-1,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-6 {
+  grid-row: span 34;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-2 {
+  grid-row: span 24;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-3,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-7 {
+  grid-row: span 29;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card--tile-4 {
+  grid-row: span 38;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:hover,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__thumb {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.001);
+  transition: transform 220ms ease, filter 220ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:hover .wb-showcase__thumb img,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:focus-within .wb-showcase__thumb img {
+  filter: brightness(0.72);
+  transform: scale(1.035);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__tag {
+  position: absolute;
+  left: 14px;
+  top: 14px;
+  z-index: 2;
+  padding: 4px 9px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.32);
+  color: rgba(255, 255, 255, 0.82);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 600;
+  backdrop-filter: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__play {
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(var(--accent-rgb), 0.34);
+  border-radius: 999px;
+  background: rgba(13, 13, 15, 0.72);
+  color: var(--accent);
+  box-shadow: none;
+  font-size: 18px;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:hover .wb-showcase__tag,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:focus-within .wb-showcase__tag,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:hover .wb-showcase__play,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:focus-within .wb-showcase__play {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__meta {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 6px;
+  min-height: 0;
+  padding: 44px 14px 14px;
+  border: 0;
+  background: rgba(0, 0, 0, 0.82);
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transform: none;
+  transition: opacity 180ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__meta strong {
+  min-width: 0;
+  color: #fff;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.25;
+  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__meta span {
+  flex: 0 0 auto;
+  max-width: 100%;
+  padding: 2px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.32);
+  color: rgba(255, 255, 255, 0.82);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:hover .wb-showcase__meta,
+.web-shell[data-ui-theme="dark-green"] .wb-showcase__card:focus-within .wb-showcase__meta {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (min-width: 1180px) {
+  .web-shell[data-ui-theme="dark-green"] .wb-showcase__grid {
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .web-shell[data-ui-theme="dark-green"] .wb-showcase__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: 7px;
+    gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .wb-showcase__card {
+    grid-row: span 28;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .wb-showcase__meta {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 14px;
+  padding: 18px 18px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  background: rgba(var(--bg-elevated-rgb), 0.92);
+  color: var(--fg-body);
+  box-shadow: none;
+  pointer-events: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch .wb-composer__content {
+  padding: 22px 20px 16px;
+  border-radius: 30px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__content:focus-within {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__input-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 18px;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__refs {
+  position: relative;
+  z-index: 18;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  gap: 10px;
+  width: 78px;
+  min-width: 78px;
+  padding: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-upload {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 76px;
+  height: 76px;
+  border: 1px solid rgba(var(--accent-rgb), 0.42);
+  border-radius: 14px;
+  background: rgba(var(--accent-rgb), 0.04);
+  color: var(--accent);
+  box-shadow: none;
+  font-size: 21px;
+  transform: rotate(-7deg);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-upload:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.58);
+  background: rgba(var(--accent-rgb), 0.07);
+  color: var(--accent);
+  box-shadow: none;
+  transform: rotate(-4deg) translateY(-2px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__main {
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__textarea,
+.web-shell[data-ui-theme="dark-green"] .wb-composer__highlight {
+  width: 100%;
+  min-height: 52px;
+  max-height: 160px;
+  padding: 18px 64px 18px 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.55;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch .wb-composer__textarea,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch .wb-composer__highlight {
+  min-height: 58px;
+  font-size: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__textarea::placeholder {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__textarea.wb-composer__textarea--overlay-mode {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__textarea.wb-composer__textarea--overlay-mode::selection {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background: rgba(var(--accent-rgb), 0.24);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 10px 64px 0 4px;
+  border: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch .wb-composer__toolbar {
+  padding-top: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__toolbar-left {
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__trigger,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__button,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.035);
+  color: var(--fg-body);
+  box-shadow: none;
+  font-size: 13px;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-launch :is(
+  .wb-composer__ref-upload,
+  .ai-workbench-mode-switch__button,
+  .ai-workbench-select-chip__trigger,
+  .wb-inline-chip__trigger
+) {
+  overflow: hidden;
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(12, 16, 18, 0.72);
+  color: rgba(244, 247, 245, 0.82);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__trigger:hover:not(:disabled),
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__trigger:hover,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__button:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip.is-open .wb-inline-chip__trigger,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip.is-open .ai-workbench-select-chip__trigger,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__button.is-open {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .ai-workbench-select-chip__copy,
+  .ai-workbench-select-chip__value,
+  .ai-workbench-select-chip__arrow,
+  .wb-inline-chip__icon
+) {
+  color: currentColor;
+}
+
+@keyframes dgWorkbenchMenuIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__dropdown,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__dropdown--compound,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__menu,
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__menu,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-panel,
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-stack {
+  z-index: 120;
+  border: 1px solid rgba(var(--accent-rgb), 0.12);
+  border-radius: 16px;
+  background: #181b1d;
+  color: var(--fg-body);
+  box-shadow: none;
+  backdrop-filter: none;
+  font-family: var(--font-sans);
+  font-weight: 400;
+  transform-origin: top center;
+  animation: dgWorkbenchMenuIn 160ms ease both;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__dropdown--up,
+.web-shell[data-ui-theme="dark-green"] .wb-composer__refs .wb-composer__ref-stack {
+  transform-origin: bottom center;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel.ai-workbench-select-chip__dropdown--compound {
+  width: max-content;
+  min-width: 0;
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  animation: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel {
+  gap: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__field--ratio {
+  gap: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__field--ratio .ai-workbench-settings-panel__head {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__grid--ratio {
+  grid-template-columns: repeat(3, 88px);
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
+  border-radius: 16px;
+  background: #171b1d;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__dropdown,
+  .web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__dropdown--compound,
+  .web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__menu,
+  .web-shell[data-ui-theme="dark-green"] .wb-inline-chip__menu,
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-mention-panel,
+  .web-shell[data-ui-theme="dark-green"] .wb-composer__ref-stack {
+    animation: none;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__refs .wb-composer__ref-stack {
+  position: absolute;
+  left: 0;
+  right: auto;
+  bottom: calc(100% + 10px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: flex-start;
+  width: max-content;
+  min-width: 236px;
+  max-width: min(520px, calc(100vw - 32px));
+  gap: 10px;
+  padding: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option,
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__option,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__item,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-item {
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active,
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__option:hover,
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__option.is-active,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__item:hover,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__item.is-active,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-item:hover,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-item.is-active {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__item-icon,
+.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__check {
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-dot {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  margin-top: 6px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0.32;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-dot {
+  background: var(--accent);
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-copy {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-title,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-title {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-desc {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-desc,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-desc {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  margin-left: 0;
+  padding: 0 5px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel {
+  display: grid;
+  gap: 18px;
+  padding: 4px;
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__field,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__field--ratio,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__field--pill {
+  display: grid;
+  gap: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__title-icon {
+  color: var(--fg-muted);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__title-copy {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__title {
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__current {
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option--ratio,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option--pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 4px 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: 12px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option--pill {
+  border-radius: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option--ratio {
+  height: auto;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__option--ratio {
+  width: 88px;
+  height: 64px;
+  min-height: 64px;
+  padding: 8px 10px;
+  border: 1px solid #293235;
+  border-radius: 11px;
+  background: #111518;
+  color: rgba(238, 246, 240, 0.7);
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__option--ratio:hover {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: #1d2427;
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-settings-panel__option--ratio.is-active {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option.is-active {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-ratio-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: currentColor;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-ratio-option__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--border-default);
+  border-radius: 3px;
+  background: var(--bg-inset);
+  transition: border-color var(--transition-fast), background var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-ratio-option__frame {
+  display: block;
+  width: 60%;
+  height: 60%;
+  border: 1.5px solid var(--accent);
+  border-radius: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-ratio-option__label {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option.is-active .ai-workbench-ratio-option__preview {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-settings-panel__option.is-active .ai-workbench-ratio-option__label {
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-ratio-option {
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-ratio-option__preview {
+  border: 1px solid var(--accent);
+  border-radius: 2px;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-ratio-option__frame {
+  border: 1px solid var(--accent);
+  border-radius: 1px;
+}
+
+.web-shell[data-ui-theme="dark-green"] #video-ratio-panel .ai-workbench-ratio-option__label {
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-label,
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-count {
+  color: currentColor;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-card {
+  position: relative;
+  display: block;
+  width: 64px;
+  height: 64px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-preview {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgba(255, 90, 95, 0.42);
+  border-radius: 50%;
+  background: rgba(255, 90, 95, 0.18);
+  color: #ffb4b6;
+  box-shadow: none;
+  font-size: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-add-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border: 1px dashed var(--border-default);
+  border-radius: 10px;
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-add-more:hover {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__send-primary {
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__send-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .wb-composer__send-primary:disabled {
+  opacity: 0.5;
+  background: var(--bg-hover);
+  color: var(--fg-dim);
+  box-shadow: none;
+}
+
+/* Workbench active conversation, result cards, and right rail. */
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-messages-surface {
+  height: 100%;
+  padding: clamp(18px, 3vh, 32px) 30px clamp(220px, 28vh, 300px);
+  background: transparent;
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-list {
+  display: grid;
+  gap: 16px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 clamp(24px, 5vw, 80px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-message-list {
+  width: min(100%, 980px);
+  min-height: 100%;
+  gap: 22px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-row.is-user {
+  flex-direction: row-reverse;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-avatar {
+  display: grid;
+  place-items: center;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-avatar--user {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-stack {
+  display: grid;
+  gap: 4px;
+  max-width: 80%;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-author {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble {
+  padding: 10px 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble > p {
+  margin: 0;
+  color: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble--assistant {
+  max-width: min(780px, 100%);
+  padding: 14px 16px;
+  border-color: rgba(255, 255, 255, 0.11);
+  background: rgba(8, 18, 14, 0.92);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble--user {
+  border-color: var(--border-accent);
+  background: var(--accent-muted);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown {
+  display: grid;
+  gap: 10px;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 520;
+  line-height: 1.78;
+  word-break: break-word;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown > * {
+  margin: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h1,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h2,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h3,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h4 {
+  color: var(--fg-strong);
+  font-weight: 760;
+  letter-spacing: 0;
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h1 {
+  font-size: 19px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h2 {
+  font-size: 17px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h3,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown h4 {
+  font-size: 15px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown p {
+  color: rgba(230, 238, 233, 0.9);
+  white-space: pre-wrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown strong {
+  color: #ffffff;
+  font-weight: 760;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown del {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown a {
+  color: var(--accent);
+  font-weight: 720;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(0, 255, 136, 0.36);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown a:hover {
+  color: var(--accent-strong);
+  border-bottom-color: var(--accent-strong);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown ul,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown ol {
+  display: grid;
+  gap: 7px;
+  padding-left: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown li {
+  padding-left: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown li::marker {
+  color: var(--accent);
+  font-weight: 780;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown blockquote {
+  display: grid;
+  gap: 7px;
+  padding: 10px 12px;
+  border: 1px solid rgba(0, 255, 136, 0.14);
+  border-left: 3px solid var(--accent);
+  border-radius: 12px;
+  background: rgba(0, 255, 136, 0.06);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown code {
+  padding: 2px 6px;
+  border: 1px solid rgba(0, 255, 136, 0.14);
+  border-radius: 7px;
+  background: rgba(0, 255, 136, 0.08);
+  color: #b6ffd6;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown-code {
+  overflow: hidden;
+  border: 1px solid rgba(0, 255, 136, 0.12);
+  border-radius: 12px;
+  background: #07100d;
+  color: #d7ffe8;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown-code figcaption {
+  padding: 7px 11px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown-code pre {
+  max-width: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown-code pre code {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown hr {
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown-table-wrap {
+  max-width: 100%;
+  overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown table {
+  width: 100%;
+  min-width: 420px;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown th,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown td {
+  padding: 9px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: left;
+  vertical-align: top;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-markdown th {
+  background: rgba(0, 255, 136, 0.08);
+  color: #caffdf;
+  font-weight: 760;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble.is-thinking {
+  opacity: 0.8;
+  border-style: solid;
+  animation: pulse 1.5s ease infinite;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-generation-pending-card),
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-chat-image-result-card) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  line-height: 1.4;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-generation-pending-card) {
+  width: min(560px, 100%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-chat-image-result-card) {
+  width: min(560px, 100%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble.is-thinking:has(.ai-generation-pending-card) {
+  opacity: 1;
+  animation: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-message-prompt {
+  margin: 0;
+  color: inherit;
+  white-space: pre-wrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb {
+  position: relative;
+  display: block;
+  width: 82px;
+  height: 82px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--fg-muted);
+  box-shadow: none;
+  cursor: zoom-in;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb:hover {
+  border-color: rgba(var(--accent-rgb), 0.55);
+  box-shadow: none;
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb:disabled,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb.is-file {
+  cursor: default;
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media img,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media video {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media img,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__media video {
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__icon {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: var(--fg-muted);
+  font-size: 22px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-attachment-thumb__label {
+  position: absolute;
+  left: 6px;
+  bottom: 6px;
+  max-width: calc(100% - 12px);
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.66);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-progress {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px 10px;
+  margin-top: 8px;
+  padding: 0;
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-progress::after {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-progress strong {
+  color: var(--fg-muted);
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-progress i {
+  grid-column: 1 / -1;
+  height: 100%;
+  min-height: 3px;
+  border-radius: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card {
+  position: relative;
+  width: min(680px, 100%);
+  margin-top: 0;
+  overflow: hidden;
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: 8px;
+  background: #101114;
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card.is-video,
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card.is-image {
+  border-color: rgba(var(--accent-rgb), 0.2);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  min-height: 240px;
+  overflow: hidden;
+  background: #17191d;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__grid {
+  position: absolute;
+  inset: 0;
+  background-image: none;
+  background-size: 36px 36px;
+  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__glow {
+  position: absolute;
+  top: auto;
+  left: auto;
+  width: 34%;
+  height: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.12);
+  filter: blur(24px);
+  animation: pendingFloat 4s ease-in-out infinite;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__loader {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 112px;
+  height: 112px;
+  border-radius: 50%;
+  background: rgba(8, 9, 11, 0.72);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__loader strong {
+  color: var(--fg-strong);
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__ring {
+  position: absolute;
+  inset: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.12);
+  border-top-color: var(--accent);
+  border-right-color: rgba(var(--accent-rgb), 0.5);
+  border-radius: 50%;
+  animation: pendingSpin 1s linear infinite;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__scan {
+  position: absolute;
+  inset: -40% 0 auto;
+  width: auto;
+  height: 42%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-120%);
+  animation: pendingScan 2.6s ease-in-out infinite;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 16px 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__meta > div:first-child {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__meta strong {
+  color: var(--fg-strong);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__meta span {
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__chips span {
+  max-width: 160px;
+  padding: 3px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  border-radius: 6px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #f87171;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__stop:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.6);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card__bar,
+.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card.is-video .ai-generation-pending-card__bar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: block;
+  height: 3px;
+  border-radius: 0;
+  background: var(--accent);
+  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
+  transition: width 0.25s ease;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes pendingSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pendingScan {
+  0% {
+    opacity: 0;
+    transform: translateY(-120%);
+  }
+  28%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(340%);
+  }
+}
+
+@keyframes pendingFloat {
+  0%,
+  100% {
+    transform: translate3d(-18%, -8%, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(18%, 10%, 0) scale(1.18);
+  }
+}
+
+@keyframes resultCardEnter {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-generated-card {
+  padding: 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-card {
+  display: block;
+  width: min(560px, 100%);
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: #111316;
+  color: var(--fg-body);
+  box-shadow: none;
+  animation: resultCardEnter 0.35s ease both;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-card.is-video {
+  border-color: rgba(33, 151, 255, 0.18);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--media-ratio, auto);
+  overflow: hidden;
+  border: 0;
+  border-bottom: 0;
+  background: #0a0a0a;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-frame--video {
+  aspect-ratio: 16 / 9;
+  max-height: 520px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-frame img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: min(38vh, 360px);
+  object-fit: contain;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-frame video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster video {
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-preview-button,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: #0a0a0a;
+  box-shadow: none;
+  cursor: zoom-in;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster {
+  position: relative;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster__play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #fff;
+  box-shadow: none;
+  font-size: 36px;
+  text-shadow: none;
+  transform: none;
+  transition: transform 0.2s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster:hover .ai-chat-video-poster__play {
+  transform: scale(1.12);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-video-poster__duration {
+  position: absolute;
+  right: 10px;
+  bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  box-shadow: none;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta {
+  display: grid;
+  gap: 10px;
+  padding: 14px 16px 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__top strong {
+  color: var(--fg-strong);
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__top span {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__prompt {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-progress {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 8px 10px 10px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: 8px;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-progress span,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-progress strong {
+  position: relative;
+  z-index: 1;
+  color: var(--fg-body);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-progress span {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-progress i {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  min-width: 8%;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width 0.28s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px 14px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__primary:hover {
+  border-color: var(--accent-dim);
+  background: var(--accent-dim);
+  color: var(--dg-button-text);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__primary:active {
+  transform: scale(0.96);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__spacer {
+  flex: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon--super-resolution {
+  color: rgba(var(--accent-rgb), 0.92);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon--super-resolution:hover {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 0;
+  padding: 0 16px 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 11px;
+  font-weight: 500;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow button:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow span {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 5000;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  background: rgba(0, 0, 0, 0.86);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__panel {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(94vw, 1280px);
+  max-height: 92vh;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  background: rgba(10, 12, 15, 0.94);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__panel.is-video {
+  width: min(96vw, 1360px);
+  border-color: rgba(var(--accent-rgb), 0.32);
+  border-radius: 12px;
+  background: rgba(2, 6, 7, 0.96);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__head span {
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__head button {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__head button:hover {
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__body {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  padding: 18px;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__panel.is-video .ai-chat-media-preview__body {
+  padding: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__body img,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview__body video {
+  max-width: 100%;
+  max-height: calc(92vh - 84px);
+  border: 0;
+  border-radius: 8px;
+  background: #050607;
+  object-fit: contain;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player {
+  position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  width: 100%;
+  max-height: calc(92vh - 66px);
+  overflow: hidden;
+  border-radius: 10px;
+  background: #020405;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player.is-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  max-height: none;
+  border-radius: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: min(62vh, 690px);
+  min-width: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player.is-fullscreen .ai-chat-media-player__stage {
+  min-height: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__stage video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: calc(92vh - 156px);
+  border: 0;
+  border-radius: 0;
+  object-fit: contain;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player.is-fullscreen .ai-chat-media-player__stage video {
+  max-height: calc(100vh - 82px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__vignette {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__center-play,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__bar button {
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(4, 10, 10, 0.58);
+  color: rgba(245, 255, 250, 0.94);
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease,
+    color 160ms ease,
+    opacity 160ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__center-play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 70px;
+  height: 70px;
+  border-radius: 999px;
+  font-size: 30px;
+  opacity: 0.96;
+  transform: translate(-50%, -50%);
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player.is-playing:not(:hover) .ai-chat-media-player__center-play {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.92);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__center-play:hover,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__bar button:hover {
+  border-color: rgba(var(--accent-rgb), 0.52);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__center-play:hover {
+  transform: translate(-50%, -50%) scale(1.04);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__controls {
+  position: relative;
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 0;
+  background: rgba(8, 16, 16, 0.98);
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__bar button {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  font-size: 15px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__time {
+  min-width: 92px;
+  color: rgba(237, 255, 246, 0.86);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__spacer {
+  flex: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__seek,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__volume {
+  height: 6px;
+  margin: 0;
+  border-radius: 999px;
+  appearance: none;
+  background:
+    linear-gradient(90deg, rgb(var(--accent-rgb)) 0 var(--progress, 0%), rgba(255, 255, 255, 0.22) var(--progress, 0%) 100%);
+  cursor: pointer;
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__seek {
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__volume {
+  width: 96px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__seek::-webkit-slider-thumb,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__volume::-webkit-slider-thumb {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(2, 6, 7, 0.9);
+  border-radius: 999px;
+  appearance: none;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__seek::-moz-range-thumb,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__volume::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(2, 6, 7, 0.9);
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__seek:disabled {
+  cursor: wait;
+  opacity: 0.5;
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-media-preview {
+    padding: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__stage {
+    min-height: 52vh;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__controls {
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
+    padding: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__volume {
+    display: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .ai-chat-media-player__time {
+    min-width: 74px;
+    font-size: 11px;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-header {
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--border-weak);
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-list {
+  padding: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-thumb {
+  width: 22px;
+  height: 22px;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-thumb img,
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-thumb video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-label {
+  color: var(--fg-body);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-token {
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-chat-mention-empty {
+  padding: 14px 12px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  min-width: 260px;
+  height: 100%;
+  overflow: hidden;
+  border: 0;
+  border-left: 1px solid var(--border-subtle);
+  border-radius: 0;
+  background: var(--bg-surface);
+  color: var(--fg-body);
+  box-shadow: none;
+  transition: width 0.25s ease, min-width 0.25s ease, opacity 0.2s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar.is-collapsed {
+  width: 48px;
+  min-width: 48px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__header-actions {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__toggle,
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__icon-button {
+  border-color: var(--border-weak);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__toggle:hover,
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__icon-button:hover {
+  border-color: var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__new {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__new:hover {
+  border-color: var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px 16px;
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-message-list > .conversation-sidebar__empty {
+  width: min(100%, 520px);
+  margin: clamp(80px, 16vh, 160px) auto 0;
+  padding: 22px 18px;
+  border: 1px dashed var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item:hover {
+  background: var(--bg-elevated);
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item.is-active {
+  border-left: 0;
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 0;
+  background: transparent;
+  color: var(--fg-body);
+  text-align: left;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-main:hover {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-title {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-time {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-actions {
+  display: flex;
+  gap: 2px;
+  padding-right: 8px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item:hover .conversation-sidebar__item-actions {
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-actions button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-actions button:hover {
+  background: var(--bg-surface);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__rename-input {
+  flex: 1;
+  min-width: 0;
+  margin: 6px 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-accent);
+  border-radius: 4px;
+  background: var(--bg-base);
+  color: var(--fg-body);
+  font-size: 13px;
+  font-weight: 400;
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.76);
+  cursor: pointer;
+}
+
+@keyframes dgDeleteModalIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 16px;
+  width: min(520px, 100%);
+  padding: 22px;
+  border: 1px solid rgba(var(--accent-rgb), 0.12);
+  border-radius: 24px;
+  background: #151719;
+  color: var(--fg-body);
+  box-shadow: none;
+  animation: dgDeleteModalIn 160ms ease both;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid rgba(255, 105, 105, 0.2);
+  border-radius: 16px;
+  background: rgba(255, 105, 105, 0.1);
+  color: #ff8f8f;
+  font-size: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__copy {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__copy span,
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__copy strong {
+  width: fit-content;
+  padding: 3px 9px;
+  border: 1px solid rgba(255, 105, 105, 0.16);
+  border-radius: 999px;
+  background: rgba(255, 105, 105, 0.08);
+  color: #ff9a9a;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__copy h2 {
+  margin: 0;
+  color: var(--fg-strong);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__copy p {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button {
+  min-height: 38px;
+  padding: 0 16px;
+  border: 1px solid var(--border-default);
+  border-radius: 999px;
+  background: #0d0d0f;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button:hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--fg-body);
+  transform: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button.is-danger {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button.is-danger:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__panel {
+    grid-template-columns: 1fr;
+    padding: 20px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions {
+    flex-direction: column-reverse;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__actions button {
+    width: 100%;
+  }
+}
+
+/* Community: migrated from web (3)/src/styles/pages.css. */
+.web-shell[data-ui-theme="dark-green"] .community-page {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .workspace-page-shell__content {
+  display: grid;
+  align-content: start;
+  gap: 28px;
+  width: min(100% - 96px, 1760px);
+  max-width: none;
+  margin: 0 auto;
+  padding: 32px 0 48px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel {
+  position: relative;
+  min-height: 318px;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.4s ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__slide {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  min-width: 100%;
+  aspect-ratio: 21 / 9;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background-position: center;
+  background-size: cover;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__track {
+  align-items: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__slide {
+  flex: 0 0 calc(100% / 3);
+  min-width: 0;
+  min-height: 286px;
+  height: 286px;
+  aspect-ratio: auto;
+  padding: 28px 32px;
+  opacity: 0.62;
+  transform: scale(0.92);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__slide--video {
+  padding: 0;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__slide--video::before,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__slide--video::after {
+  content: none;
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-carousel__slide.is-center {
+  z-index: 2;
+  opacity: 1;
+  transform: scale(1.04);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__arrow:hover {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  transform: translateY(-50%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__dots button {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  color: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-carousel__dots button.is-active {
+  width: 20px;
+  border-radius: 4px;
+  background: var(--accent);
+  box-shadow: var(--accent-glow);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-section {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 40px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-section__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-section__head h2 {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-section__head h2::before {
+  content: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-row,
+.web-shell[data-ui-theme="dark-green"] .community-case-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-grid--ratio-reference {
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card,
+.web-shell[data-ui-theme="dark-green"] .project-card--button {
+  display: flex;
+  flex-direction: column;
+  min-height: 160px;
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 14px;
+  transition: all var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card:hover,
+.web-shell[data-ui-theme="dark-green"] .project-card--button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card--new {
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: center;
+  background: var(--bg-surface);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card--new .anticon {
+  color: var(--accent);
+  line-height: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card--new .project-card__meta {
+  padding: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card--new .project-card__meta strong {
+  color: var(--fg-body);
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card > img,
+.web-shell[data-ui-theme="dark-green"] .project-card__empty {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  object-fit: cover;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card__meta {
+  display: grid;
+  gap: 3px;
+  padding: 9px 2px 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card__meta strong {
+  color: var(--fg-body);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .project-card__meta span {
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) {
+  position: relative;
+  display: grid;
+  grid-template: 1fr / 1fr;
+  min-height: 220px;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > .project-card__empty {
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border: 0;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > .project-card__empty--dark {
+  display: grid;
+  place-items: center;
+  background: #202020;
+  color: rgba(255, 255, 255, 0.22);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > .project-card__empty--dark .anticon {
+  font-size: 34px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new)::after {
+  content: "";
+  grid-area: 1 / 1;
+  align-self: end;
+  height: 58%;
+  background: rgba(0, 0, 0, 0.86);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__caption,
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__meta {
+  grid-area: 1 / 1;
+  z-index: 1;
+  padding-inline: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__caption {
+  align-self: end;
+  margin-bottom: 46px;
+  padding-block: 0;
+  background: none;
+  color: rgba(255, 255, 255, 0.78);
+  opacity: 1;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__meta {
+  align-self: end;
+  padding-block: 0 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__meta strong {
+  color: #fff;
+  font-size: 15px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+  padding: 12px 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-categories {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-chip:hover {
+  border-color: var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-chip.is-active {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 200px;
+  margin-left: auto;
+  padding: 8px 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-surface);
+  color: var(--fg-muted);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-filter-search input {
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-size: 13px;
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--fg-body);
+  box-shadow: none;
+  transition: all var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card:hover {
+  border-color: var(--border-default);
+  transform: translateY(-2px);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card > img {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card__body > span {
+  display: inline-block;
+  width: fit-content;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--accent-muted);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card__body > strong {
+  color: var(--fg-body);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card__body > button,
+.web-shell[data-ui-theme="dark-green"] .community-card-actions button,
+.web-shell[data-ui-theme="dark-green"] .community-section--browse-more button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  margin-top: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-case-card__body > button:hover,
+.web-shell[data-ui-theme="dark-green"] .community-card-actions button:hover,
+.web-shell[data-ui-theme="dark-green"] .community-section--browse-more button:hover {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-grid--mosaic {
+  display: block;
+  column-count: 6;
+  column-gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin: 0 0 8px;
+  min-height: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px;
+  background: var(--bg-inset);
+  box-shadow: none;
+  transform: none;
+  isolation: isolate;
+  break-inside: avoid;
+  aspect-ratio: 4 / 5;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-5 {
+  aspect-ratio: 16 / 9;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-1,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-6 {
+  aspect-ratio: 9 / 16;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-2 {
+  aspect-ratio: 1 / 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-3,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-7 {
+  aspect-ratio: 3 / 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-4 {
+  aspect-ratio: 3 / 4;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__preview,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__preview > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__preview {
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__preview > img {
+  transform: scale(1.001);
+  transition: transform 220ms ease, filter 220ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:focus-within > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover .community-case-card__preview > img,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:focus-within .community-case-card__preview > img {
+  filter: brightness(0.72);
+  transform: scale(1.035);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__caption {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__body {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px;
+  background: rgba(0, 0, 0, 0.82);
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover .community-case-card__body,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:focus-within .community-case-card__body {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card__author {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card__author span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card__author span:last-child {
+  flex: 0 0 auto;
+  max-width: 48%;
+  padding: 2px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.32);
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__body > strong {
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.25;
+  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__body > p {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 12px;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-card-actions button {
+  min-height: 32px;
+  margin: 0;
+  padding: 6px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-card-actions button:hover,
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-card-actions button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.58);
+  background: var(--accent);
+  color: var(--dg-button-text);
+}
+
+@media (min-width: 1180px) {
+  .web-shell[data-ui-theme="dark-green"] .community-page .community-case-grid--mosaic {
+    column-count: 6;
+  }
+}
+
+@media (min-width: 1540px) {
+  .web-shell[data-ui-theme="dark-green"] .community-page .community-case-grid--mosaic {
+    column-count: 7;
+  }
+}
+
+@media (max-width: 760px) {
+  .web-shell[data-ui-theme="dark-green"] .community-page .community-case-grid--mosaic {
+    column-count: 2;
+    column-gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic .community-case-card__body {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* Canvas and More page exceptions requested in this build. */
+.web-shell[data-ui-theme="dark-green"] .studio-canvas,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas {
+  background-color: var(--dg-page);
+  background-image: none;
+  background-position: var(--canvas-bg-x, 0px) var(--canvas-bg-y, 0px);
+  background-size: var(--canvas-bg-size, 24px) var(--canvas-bg-size, 24px);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .studio-canvas {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-width: 0;
+  overflow: auto;
+  background: var(--dg-page);
+  background-image: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .more-tool {
+  overflow: visible;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+  box-shadow: none;
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .more-tool:hover {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .more-tool .anticon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+  font-size: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .more-tool strong {
+  color: var(--fg-body);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .more-tool span,
+.web-shell[data-ui-theme="dark-green"] .more-page .studio-status-bar__text {
+  color: var(--fg-muted);
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .studio-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .more-page .studio-status-bar__badge--idle {
+  border: 1px solid var(--border-weak);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-text-node__card,
+  .studio-canvas-image-node__card,
+  .studio-canvas-video-node__preview,
+  .studio-canvas-text-composer,
+  .studio-canvas-image-composer,
+  .studio-canvas-video-composer,
+  .studio-canvas-context-menu,
+  .studio-canvas-node-context-menu,
+  .studio-canvas-add-node-menu,
+  .studio-canvas-save-asset__modal
+) {
+  border-color: var(--border-weak);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu,
+  .studio-canvas-node-context-menu,
+  .studio-canvas-add-node-menu,
+  .studio-canvas-text-composer__model-menu,
+  .studio-canvas-save-asset__cover-menu,
+  .studio-canvas-save-asset__select-menu
+) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  background-image: none;
+  color: var(--fg-body);
+  box-shadow: var(--shadow-panel);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu button,
+  .studio-canvas-node-context-menu button,
+  .studio-canvas-add-node-menu button,
+  .studio-canvas-text-composer__model-menu button,
+  .studio-canvas-save-asset__cover-menu button,
+  .studio-canvas-save-asset__select-menu button
+) {
+  border-color: transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu button:hover:not(:disabled),
+  .studio-canvas-node-context-menu button:hover:not(:disabled),
+  .studio-canvas-add-node-menu button:hover:not(:disabled),
+  .studio-canvas-text-composer__model-menu button:hover,
+  .studio-canvas-text-composer__model-menu button.is-selected,
+  .studio-canvas-save-asset__cover-menu button:hover,
+  .studio-canvas-save-asset__select-menu button:hover,
+  .studio-canvas-save-asset__select-menu button.is-selected
+) {
+  border-color: rgba(var(--accent-rgb), 0.22);
+  background: var(--bg-hover);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu button:disabled,
+  .studio-canvas-node-context-menu button:disabled,
+  .studio-canvas-add-node-menu button:disabled,
+  .studio-canvas-save-asset__cover-menu button:disabled,
+  .studio-canvas-save-asset__select-menu button:disabled
+) {
+  color: var(--fg-dim);
+  opacity: 0.72;
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu kbd,
+  .studio-canvas-node-context-menu kbd,
+  .studio-canvas-node-context-menu__hint,
+  .studio-canvas-add-node-menu__head small,
+  .studio-canvas-add-node-menu__title,
+  .studio-canvas-text-composer__model-menu-copy small,
+  .studio-canvas-text-composer__model-menu em
+) {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] :is(
+  .studio-canvas-context-menu__divider,
+  .studio-canvas-node-context-menu__divider
+) {
+  border: 0;
+  background: var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-add-node-menu__head strong,
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-text-composer__model-menu-copy strong {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-add-node-menu button > span:not(.studio-canvas-add-node-menu__icon):not(.studio-canvas-add-node-menu__badge) {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-add-node-menu__icon {
+  border: 1px solid rgba(var(--accent-rgb), 0.24) !important;
+  border-radius: var(--radius-sm) !important;
+  background: var(--accent-muted) !important;
+  color: var(--accent) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-add-node-menu__badge {
+  border: 1px solid rgba(var(--accent-rgb), 0.24) !important;
+  border-radius: 999px !important;
+  background: rgba(var(--accent-rgb), 0.14) !important;
+  color: var(--accent) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu {
+  width: min(260px, calc(100vw - 28px));
+  max-height: min(390px, calc(100vh - 28px));
+  padding: 14px;
+  border-radius: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__head {
+  gap: 4px;
+  margin-bottom: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__head strong {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__head small {
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__title {
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__title--section {
+  margin-top: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu button {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  gap: 10px;
+  min-height: 42px;
+  padding: 4px 6px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-add-node-menu__icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px !important;
+  font-size: 17px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-add-node-menu button:hover:not(:disabled) .studio-canvas-add-node-menu__icon {
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-node-context-menu .studio-canvas-node-context-menu__primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .studio-canvas-node-context-menu .studio-canvas-node-context-menu__primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+}
+
+/* Auth and profile: migrated from web (3), adapted to the solid dark-green theme. */
+.web-shell[data-ui-theme="dark-green"] .auth-page {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dg-page);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__showcase {
+  position: relative;
+  overflow: hidden;
+  background: #0d0d0f;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__video-wrap {
+  position: absolute;
+  inset: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.34;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  background: rgba(13, 13, 15, 0.86);
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__brand {
+  margin: 0;
+  color: var(--accent);
+  font-size: 48px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__tagline {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__features {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__features span {
+  padding: 6px 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__form-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 32px 28px;
+  border-left: 1px solid var(--border-weak);
+  background: var(--bg-surface);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__form-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 360px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__form-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  overflow: visible;
+  border-radius: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__logo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__title {
+  margin: 0;
+  color: var(--fg-body);
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__subtitle {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs button {
+  flex: 1;
+  padding: 10px 0;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs button:hover {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs button.is-active {
+  border-bottom-color: var(--accent);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs {
+  display: flex;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button {
+  display: inline-flex;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 8px 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button:hover {
+  border-color: var(--border-default);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button.is-active {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__pending {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__pending span {
+  color: var(--fg-soft);
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__pending strong {
+  color: var(--fg-body);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field > span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field input,
+.web-shell[data-ui-theme="dark-green"] .auth-page__phone-row,
+.web-shell[data-ui-theme="dark-green"] .auth-page__qr-placeholder {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field input {
+  width: 100%;
+  padding: 11px 14px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field input:focus {
+  border-color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field input::placeholder {
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field--error input,
+.web-shell[data-ui-theme="dark-green"] .auth-page__field--error .auth-page__phone-row {
+  border-color: #ef4444;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field--error input:focus {
+  border-color: #ef4444;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__field-error {
+  font-size: 12px;
+  color: #ef4444;
+  margin-top: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__forgot {
+  text-align: right;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__forgot button {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  box-shadow: none;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__phone-row {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__phone-prefix {
+  padding: 0 12px;
+  border-right: 1px solid var(--border-weak);
+  color: var(--fg-muted);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__phone-row input {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__sms-row {
+  display: flex;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__sms-row input {
+  flex: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn {
+  padding: 0 14px;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--accent);
+  box-shadow: none;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn:hover {
+  background: var(--accent-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn:disabled {
+  border-color: var(--border-weak);
+  color: var(--fg-dim);
+  cursor: not-allowed;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__wechat-qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 24px 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__qr-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: min(260px, 100%);
+  min-height: 250px;
+  padding: 16px;
+  overflow: hidden;
+  color: var(--fg-dim);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__qr-placeholder .anticon {
+  color: #07c160;
+  font-size: 48px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__qr-placeholder p,
+.web-shell[data-ui-theme="dark-green"] .auth-page__wechat-status {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: 12px;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__wechat-frame {
+  width: 230px;
+  height: 230px;
+  border: 0;
+  background: #fff;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__wechat-link,
+.web-shell[data-ui-theme="dark-green"] .auth-page__agreement a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__notice {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid rgba(255, 90, 95, 0.22);
+  border-radius: var(--radius-xs);
+  background: rgba(255, 90, 95, 0.1);
+  color: var(--error);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__submit {
+  width: 100%;
+  padding: 12px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__submit:hover {
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__submit:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__agreement {
+  color: var(--fg-dim);
+  font-size: 11px;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--fg-dim);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__divider::before,
+.web-shell[data-ui-theme="dark-green"] .auth-page__divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__social {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__social-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border-weak);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 18px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .auth-page__social-btn:hover {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page {
+  height: 100%;
+  overflow-y: auto;
+  background: var(--dg-page);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: var(--bg-surface);
+  background-position: center;
+  background-size: cover;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
+  background-color: var(--bg-surface);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--dg-page);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: var(--radius-sm);
+  background: rgba(0, 0, 0, 0.48);
+  color: #fff;
+  box-shadow: none;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
+  border-color: rgba(255, 255, 255, 0.5);
+  background: rgba(0, 0, 0, 0.68);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__body {
+  position: relative;
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 32px;
+  width: min(1200px, calc(100% - 48px));
+  min-height: calc(100% - 140px);
+  margin: -60px auto 0;
+  padding: 0 0 48px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head,
+.web-shell[data-ui-theme="dark-green"] .profile-page__count {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border: 3px solid var(--dg-page);
+  border-radius: 50%;
+  background: var(--accent-muted);
+  color: var(--accent);
+  object-fit: cover;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
+  position: absolute;
+  right: -6px;
+  top: 8px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.72);
+  color: #fff;
+  box-shadow: none;
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:hover {
+  background: rgba(0, 0, 0, 0.88);
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
+  position: absolute;
+  right: -4px;
+  bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--dg-button-text);
+  font-size: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__username,
+.web-shell[data-ui-theme="dark-green"] .profile-page__count strong,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__username {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
+  width: min(220px, 100%);
+  min-height: 44px;
+  padding: 9px 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+  outline: none;
+  resize: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
+  border-color: var(--accent);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio::placeholder {
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sync-notice {
+  max-width: 220px;
+  color: var(--warning);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count {
+  gap: 2px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count span,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item span,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item small,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
+  color: var(--fg-dim);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-filter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
+  width: 100%;
+  padding: 8px 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
+  padding: 8px 18px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-filter:hover {
+  border-color: var(--accent);
+  background: var(--accent-muted);
+  color: var(--accent);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__honor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__honor-title,
+.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
+  color: var(--fg-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__honor-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--accent-muted);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border-weak);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+  padding: 10px 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button:hover {
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
+  border-bottom-color: var(--accent);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section {
+  margin: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  padding: 14px;
+  transition: border-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover {
+  border-color: var(--border-default);
+  transform: translateY(-2px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
+  flex: 0 0 auto;
+  color: var(--accent);
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+  margin: 0;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
+  flex: 0 0 56px;
+  width: 56px;
+  height: 42px;
+  border-radius: var(--radius-xs);
+  background: var(--bg-elevated);
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item div {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item span,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item small {
+  font-size: 11px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
+  display: flex;
+  gap: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-filter {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  max-width: none;
+  min-height: auto;
+  height: auto;
+  aspect-ratio: auto;
+  padding: 14px;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
+  flex-direction: row;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  min-height: auto;
+  aspect-ratio: auto;
+}
+
+/* Ecommerce generation page: keep its carousel and composer independent from
+   the community carousel rules that share class names. */
+.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  overflow: visible;
+  background: var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-scroll {
+  display: grid;
+  flex: none;
+  justify-items: center;
+  align-content: start;
+  gap: 28px;
+  width: min(100%, 1040px);
+  height: auto;
+  min-height: 0;
+  margin: 0 auto;
+  overflow: visible;
+  padding: 48px 28px 32px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generate-carousel {
+  width: min(100%, 1040px);
+  min-height: 310px;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generate-carousel .community-carousel__track {
+  align-items: center;
+  height: 100%;
+  padding: 0;
+  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generate-carousel .community-carousel__slide {
+  flex: 0 0 calc(100% / 3);
+  min-width: 0;
+  min-height: 286px;
+  height: 286px;
+  aspect-ratio: auto;
+  padding: 28px 32px;
+  border-radius: var(--radius-lg);
+  opacity: 0.62;
+  transform: scale(0.92);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generate-carousel .community-carousel__slide.is-center {
+  z-index: 2;
+  opacity: 1;
+  transform: scale(1.04);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generate-carousel .community-carousel__full-image {
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-carousel-upload {
+  top: 16px;
+  right: 16px;
+  width: auto;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-carousel-upload:hover,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-carousel-upload:active {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: var(--bg-hover);
+  color: var(--accent);
+  box-shadow: none;
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-shell {
+  width: min(100%, 720px);
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-reference-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 0 0 10px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-bottom: 1px solid var(--border-weak);
+  scrollbar-width: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-reference-strip::-webkit-scrollbar {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-reference-card {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 104px;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-reference-card.has-image {
+  width: 54px;
+  min-width: 54px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-reference-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-toolbar {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generation-trigger,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-tool--ratio {
+  width: auto;
+  min-width: 0;
+  padding: 0 10px;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu {
+  position: relative;
+  z-index: 20;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel {
+  position: absolute;
+  left: 0;
+  top: auto;
+  bottom: calc(100% + 10px);
+  z-index: 90;
+  display: grid;
+  width: max-content;
+  min-width: 168px;
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-generation-menu__panel {
+  min-width: 176px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: left;
+  text-shadow: none;
+  cursor: pointer;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button .anticon {
+  color: var(--fg-muted);
+  font-size: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button span {
+  color: inherit;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+  transform: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button:hover .anticon,
+.web-shell[data-ui-theme="dark-green"] .workbench-generation-menu__panel button.is-active .anticon {
+  color: currentColor;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-composer-footer {
+  flex-wrap: wrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences {
+  z-index: 120;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-panel);
+  color: var(--fg-body);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-preferences__section-label {
+  margin-bottom: -4px;
+  color: var(--fg-muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-ratio-option {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 5px;
+  min-height: 44px;
+  padding: 6px 4px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-ratio-option:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-ratio-option.is-active {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-ratio-option__icon {
+  border-width: 1.5px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-resolution-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-resolution-grid button {
+  min-height: 38px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-resolution-grid button:hover {
+  border-color: var(--border-default);
+  background: var(--bg-hover);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-resolution-grid button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.36);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid {
+  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
+  gap: 8px;
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid label {
+  height: 38px;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid label span,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid > span,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid > .anticon {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-size-grid input {
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-preferences__panel .workbench-preferences__resize {
+  display: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-result-panel,
+.web-shell[data-ui-theme="dark-green"] .ecommerce-community-content {
+  width: min(100%, 1040px);
+  margin: 0 auto;
+  padding: 0 28px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-result-panel {
+  margin-top: 8px;
+  margin-bottom: 32px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ecommerce-community-content {
+  padding-bottom: 64px;
+}
+
+/* Canvas full dark-green legibility pass. Legacy canvas rules still contain pixel
+   colors, so this late theme block owns every visible canvas control. */
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas {
+  color: var(--fg-body);
+  font-family: var(--font-sans);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  button,
+  input,
+  textarea,
+  span,
+  strong,
+  small,
+  kbd,
+  em
+) {
+  text-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__title,
+  .studio-canvas-image-node__title,
+  .studio-canvas-video-node__title
+) {
+  color: var(--fg-muted);
+  text-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__card,
+  .studio-canvas-image-node__card,
+  .studio-canvas-video-node__preview,
+  .studio-canvas-text-composer,
+  .studio-canvas-image-composer,
+  .studio-canvas-video-composer,
+  .studio-canvas-save-asset__modal,
+  .studio-canvas-save-asset__cover-library
+) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  background-image: none;
+  color: var(--fg-body);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node.is-selected .studio-canvas-text-node__card,
+  .studio-canvas-image-node.is-selected .studio-canvas-image-node__card,
+  .studio-canvas-video-node.is-selected .studio-canvas-video-node__preview
+) {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.34);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__inline-input,
+  .studio-canvas-text-node__content,
+  .studio-canvas-text-composer textarea,
+  .studio-canvas-image-composer textarea,
+  .studio-canvas-video-composer textarea,
+  .studio-canvas-save-asset__form input
+) {
+  background: transparent;
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__inline-input::placeholder,
+  .studio-canvas-text-composer textarea::placeholder,
+  .studio-canvas-image-composer textarea::placeholder,
+  .studio-canvas-video-composer textarea::placeholder,
+  .studio-canvas-save-asset__form input::placeholder
+) {
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__suggestions > span,
+  .studio-canvas-image-node__placeholder,
+  .studio-canvas-image-node__placeholder-actions span,
+  .studio-canvas-video-node__play,
+  .studio-canvas-text-composer__footer span,
+  .studio-canvas-image-composer__footer span,
+  .studio-canvas-video-composer__footer span,
+  .studio-canvas-save-asset__label,
+  .studio-canvas-save-asset__form label > span,
+  .studio-canvas-save-asset__existing-title,
+  .studio-canvas-save-asset__empty
+) {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-node__placeholder-icon {
+  color: var(--fg-soft);
+  opacity: 0.72;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__suggestions button,
+  .studio-canvas-image-node__placeholder-actions button,
+  .studio-canvas-text-composer__footer button,
+  .studio-canvas-image-composer__footer button,
+  .studio-canvas-image-node__upload,
+  .studio-canvas-image-composer__tools button,
+  .studio-canvas-video-composer__tabs button,
+  .studio-canvas-video-composer__tools button,
+  .studio-canvas-video-composer__footer button,
+  .studio-canvas-save-asset__head button,
+  .studio-canvas-save-asset__placeholder button,
+  .studio-canvas-save-asset__cover-library button,
+  .studio-canvas-save-asset__existing-grid button,
+  .react-flow__controls button
+) {
+  border-color: var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__suggestions button:hover,
+  .studio-canvas-image-node__placeholder-actions button:hover,
+  .studio-canvas-text-composer__footer button:hover,
+  .studio-canvas-image-composer__footer button:hover,
+  .studio-canvas-image-node__upload:hover,
+  .studio-canvas-image-composer__tools button:hover,
+  .studio-canvas-video-composer__tabs button:hover,
+  .studio-canvas-video-composer__tools button:hover,
+  .studio-canvas-video-composer__footer button:hover,
+  .studio-canvas-save-asset__head button:hover,
+  .studio-canvas-save-asset__placeholder button:hover,
+  .studio-canvas-save-asset__cover-library button:hover,
+  .studio-canvas-save-asset__existing-grid button:hover
+) {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-video-composer__tabs button.is-active,
+  .studio-canvas-video-composer__tools button.is-active,
+  .studio-canvas-save-asset__head button.is-active,
+  .studio-canvas-save-asset__existing-grid button.is-selected
+) {
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-composer__model,
+  .studio-canvas-text-composer__send,
+  .studio-canvas-image-node__upload,
+  .studio-canvas-image-composer__tools button,
+  .studio-canvas-video-composer__tabs button,
+  .studio-canvas-video-composer__tools button,
+  .studio-canvas-video-composer__footer button,
+  .studio-canvas-save-asset__placeholder button,
+  .studio-canvas-save-asset__create,
+  .react-flow__controls button
+) {
+  border: 1px solid var(--border-weak) !important;
+  border-radius: var(--radius-sm) !important;
+  background: var(--bg-inset) !important;
+  color: var(--fg-body) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-composer__send,
+  .studio-canvas-video-composer__footer button,
+  .studio-canvas-save-asset__create
+) {
+  border-color: var(--accent) !important;
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-composer__expand {
+  background: transparent !important;
+  color: var(--fg-muted) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-text-composer__model-mark,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-text-composer__model-menu-icon {
+  border: 1px solid rgba(var(--accent-rgb), 0.24);
+  border-radius: var(--radius-xs);
+  background: var(--accent-muted);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-composer-chip .canvas-select-chip__trigger,
+  .canvas-select-chip__trigger
+) {
+  border: 1px solid var(--border-weak) !important;
+  border-radius: var(--radius-sm) !important;
+  background: var(--bg-inset) !important;
+  color: var(--fg-body) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-composer-chip .canvas-select-chip__dropdown,
+  .canvas-select-chip__dropdown
+) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  background-image: none;
+  color: var(--fg-body);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-composer-chip .canvas-select-chip__option,
+  .canvas-select-chip__option
+) {
+  border: 0 !important;
+  border-radius: var(--radius-sm) !important;
+  background: transparent !important;
+  color: var(--fg-muted) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-composer-chip .canvas-select-chip__option:hover,
+  .studio-canvas-composer-chip .canvas-select-chip__option.is-active,
+  .canvas-select-chip__option:hover,
+  .canvas-select-chip__option.is-active
+) {
+  background: var(--accent-muted) !important;
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .canvas-select-chip__option-dot {
+  background: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__glyph span,
+  .studio-canvas-text-node__connector span,
+  .studio-canvas-image-node__connector span,
+  .studio-canvas-video-node__connector span
+) {
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xs);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-text-node__connector.is-linking span,
+  .studio-canvas-image-node__connector.is-linking span,
+  .studio-canvas-video-node__connector.is-linking span
+) {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-node-links path {
+  stroke: rgba(var(--accent-rgb), 0.5);
+  filter: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-node-links circle {
+  fill: var(--accent);
+  stroke: var(--bg-elevated);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-selection-box {
+  border: 1px dashed var(--accent);
+  background: rgba(var(--accent-rgb), 0.12);
+  background-image: none;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-node-resize-handle {
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-xs);
+  background: var(--accent);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-node-resize-handle::before,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-node-resize-handle::after {
+  background: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-save-asset {
+  background: rgba(0, 0, 0, 0.74);
+  backdrop-filter: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-save-asset__placeholder,
+  .studio-canvas-save-asset__select,
+  .studio-canvas-save-asset__existing-grid button
+) {
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-inset);
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-save-asset__existing-grid span {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-node,
+  .studio-canvas-image-node,
+  .studio-canvas-video-node,
+  .studio-canvas-text-composer,
+  .studio-canvas-image-composer,
+  .studio-canvas-video-composer,
+  .studio-canvas-context-menu,
+  .studio-canvas-node-context-menu,
+  .studio-canvas-add-node-menu,
+  .studio-canvas-save-asset,
+  .canvas-select-chip
+) :is(
+  button,
+  input,
+  textarea,
+  label,
+  p,
+  span,
+  strong,
+  small,
+  kbd,
+  em,
+  .anticon,
+  svg
+) {
+  color: inherit;
+  text-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-node__card,
+  .studio-canvas-image-node__card,
+  .studio-canvas-video-node__preview,
+  .studio-canvas-text-composer,
+  .studio-canvas-image-composer,
+  .studio-canvas-video-composer,
+  .studio-canvas-context-menu,
+  .studio-canvas-node-context-menu,
+  .studio-canvas-add-node-menu,
+  .studio-canvas-save-asset__modal,
+  .studio-canvas-save-asset__cover-menu,
+  .studio-canvas-save-asset__select-menu,
+  .canvas-select-chip__dropdown
+) {
+  color: var(--fg-body) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-node__title,
+  .studio-canvas-image-node__title,
+  .studio-canvas-video-node__title,
+  .studio-canvas-text-node__suggestions > span,
+  .studio-canvas-image-node__placeholder,
+  .studio-canvas-image-node__placeholder-actions span,
+  .studio-canvas-video-node__play,
+  .studio-canvas-text-composer__footer span,
+  .studio-canvas-image-composer__footer span,
+  .studio-canvas-video-composer__footer span,
+  .studio-canvas-text-composer__model-menu-copy small,
+  .studio-canvas-text-composer__model-menu em,
+  .studio-canvas-node-context-menu kbd,
+  .studio-canvas-node-context-menu__hint,
+  .studio-canvas-add-node-menu__head small,
+  .studio-canvas-add-node-menu__title,
+  .studio-canvas-save-asset__label,
+  .studio-canvas-save-asset__form label > span,
+  .studio-canvas-save-asset__existing-title,
+  .studio-canvas-save-asset__existing-grid span,
+  .studio-canvas-save-asset__empty,
+  .canvas-select-chip__value,
+  .canvas-select-chip__arrow
+) {
+  color: var(--fg-muted) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-node__suggestions button,
+  .studio-canvas-image-node__placeholder-actions button,
+  .studio-canvas-text-composer__footer button,
+  .studio-canvas-image-composer__footer button,
+  .studio-canvas-video-composer__tabs button,
+  .studio-canvas-video-composer__tools button,
+  .studio-canvas-video-composer__footer button,
+  .studio-canvas-image-composer__tools button,
+  .studio-canvas-context-menu button,
+  .studio-canvas-node-context-menu button,
+  .studio-canvas-add-node-menu button,
+  .studio-canvas-save-asset__head button,
+  .studio-canvas-save-asset__cover-menu button,
+  .studio-canvas-save-asset__cover-library button,
+  .studio-canvas-save-asset__select-menu button,
+  .studio-canvas-save-asset__existing-grid button,
+  .canvas-select-chip__trigger,
+  .canvas-select-chip__option,
+  .react-flow__controls button
+) {
+  color: var(--fg-body) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-composer__send,
+  .studio-canvas-image-composer__footer .studio-canvas-text-composer__send,
+  .studio-canvas-video-composer__footer > button:last-child,
+  .studio-canvas-save-asset__create
+) {
+  color: var(--dg-button-text) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-add-node-menu__icon,
+  .studio-canvas-add-node-menu__badge,
+  .studio-canvas-text-composer__model-mark,
+  .studio-canvas-text-composer__model-menu-icon,
+  .canvas-select-chip__option-dot
+) {
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas .canvas-select-chip__option > span:not(.canvas-select-chip__option-dot) {
+  color: currentColor !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-composer__state,
+  .studio-canvas-image-composer__state,
+  .studio-canvas-video-composer__state
+) {
+  color: var(--fg-muted) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-composer__state.is-success,
+  .studio-canvas-image-composer__state.is-success,
+  .studio-canvas-video-composer__state.is-success
+) {
+  color: #6fdc96 !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-text-composer__state.is-error,
+  .studio-canvas-image-composer__state.is-error,
+  .studio-canvas-video-composer__state.is-error
+) {
+  color: #ff8f8f !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-add-node-menu button:hover:not(:disabled),
+  .studio-canvas-text-composer__model-menu button:hover,
+  .studio-canvas-text-composer__model-menu button.is-selected,
+  .canvas-select-chip__option:hover,
+  .canvas-select-chip__option.is-active
+) {
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .canvas-select-chip__option:hover,
+  .canvas-select-chip__option.is-active
+) > span:not(.canvas-select-chip__option-dot) {
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas :is(
+  .studio-canvas-add-node-menu button:hover:not(:disabled) .studio-canvas-add-node-menu__icon,
+  .studio-canvas-text-node__connector.is-linking span,
+  .studio-canvas-image-node__connector.is-linking span,
+  .studio-canvas-video-node__connector.is-linking span
+) {
+  color: var(--dg-button-text) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas .studio-canvas-node-context-menu__hint {
+  border: 1px solid var(--border-default) !important;
+  border-radius: var(--radius-xs) !important;
+  background: var(--bg-inset) !important;
+  color: var(--fg-muted) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page [hidden] {
+  display: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__mode-tabs,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__feature-tools,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings {
+  position: static;
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__mode-tabs {
+  display: grid !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__feature-tools {
+  display: flex !important;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__mode-tabs button,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__feature-tools button {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  min-width: 0 !important;
+  min-height: 34px !important;
+  height: 34px !important;
+  padding: 0 10px !important;
+  border-radius: var(--radius-sm) !important;
+  font-size: 12px !important;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__mode-tabs button:hover,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__feature-tools button:hover {
+  border-color: rgba(var(--accent-rgb), 0.28) !important;
+  background: var(--bg-hover) !important;
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__mode-tabs button.is-active,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__feature-tools button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.36) !important;
+  background: var(--accent-muted) !important;
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer textarea {
+  height: 84px;
+  min-height: 84px;
+  padding: 12px 12px 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings {
+  display: grid !important;
+  grid-template-columns: minmax(150px, 1fr) minmax(76px, 0.5fr) minmax(76px, 0.5fr) minmax(58px, 0.35fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings .studio-canvas-composer-chip {
+  min-width: 0;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings .canvas-select-chip__trigger {
+  width: 100% !important;
+  height: 36px !important;
+  min-height: 36px !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 42px;
+  height: 36px;
+  padding: 0 8px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-sm);
+  background: var(--bg-inset);
+  color: var(--fg-muted) !important;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-video-composer__settings > button {
+  width: 38px !important;
+  min-width: 38px !important;
+  height: 38px !important;
+  margin-left: 0 !important;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="dark-green"] .auth-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: 200px 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .auth-page__form-panel {
+    padding: 24px 20px;
+    border-top: 1px solid var(--border-weak);
+    border-left: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .auth-page__brand {
+    font-size: 32px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .auth-page__tagline {
+    font-size: 16px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    width: min(100% - 28px, 1200px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+    overflow-x: auto;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+    flex: 0 0 auto;
+    padding: 10px 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-bar,
+  .web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-ui-theme="dark-green"] .web-topbar {
+    flex: 0 0 auto;
+    min-height: 56px;
+    padding: 8px 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .web-topbar__actions {
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] :is(.creator-button, .member-button) {
+    height: 32px;
+    padding: 0 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .community-page .workspace-page-shell__content {
+    width: min(100% - 32px, 900px);
+    padding: 24px 0 40px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .community-filter-search {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer {
+    padding: 0 12px 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .wb-composer__content {
+    border-radius: 22px;
+    padding: 14px;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-page {
+  --commerce-ink: #f3f5f2;
+  --commerce-muted: #aeb8b1;
+  --commerce-line: rgba(255, 255, 255, 0.12);
+  --commerce-panel: #151719;
+  --commerce-soft: #101214;
+  background: #0d0d0f;
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-panel,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-band {
+  background: var(--commerce-panel);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-ghost-action,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-text-button,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-segmented button,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-ratio-grid button,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-filter button,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-flow-head button,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-template em,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-template,
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-project {
+  background: #181b1d;
+}
+
+.web-shell[data-ui-theme="dark-green"] .omni-commerce-flow-head {
+  background: #151719;
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-composer__style-button.has-style {
+  border-color: rgba(var(--accent-rgb), 0.42) !important;
+  background: rgba(var(--accent-rgb), 0.1) !important;
+  color: var(--fg-body) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-style-picker__panel {
+  border-color: var(--border-weak);
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: var(--shadow-strong);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-style-picker__tabs,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-style-picker__search,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-style-picker__filters span {
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page :is(
+  .studio-canvas-style-picker__tabs button.is-active,
+  .studio-canvas-style-picker__categories button.is-active
+) {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-style-picker__community-link {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-focus-toolbar {
+  border-color: var(--border-weak);
+  background: rgba(8, 10, 9, 0.95);
+  color: var(--fg-body);
+  box-shadow: var(--shadow-tight);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-focus-toolbar__ratios button:hover,
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-focus-toolbar__ratios button.is-active {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas-image-focus-toolbar__confirm {
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas .studio-canvas-generate-button {
+  border-color: var(--border-weak) !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+  color: var(--fg-soft) !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  opacity: 0.54;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas .studio-canvas-generate-button.is-ready:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.62) !important;
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+  box-shadow:
+    0 0 0 1px rgba(var(--accent-rgb), 0.16),
+    0 0 20px rgba(var(--accent-rgb), 0.28) !important;
+  cursor: pointer !important;
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .canvas-page .studio-canvas .studio-canvas-generate-button[aria-busy="true"] {
+  border-color: rgba(var(--accent-rgb), 0.46) !important;
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+  cursor: wait !important;
+  opacity: 1;
+}
+
+/* ---- Canvas @-mention panel ---- */
+
+.studio-canvas-text-composer__input-wrap {
+  position: relative;
+}
+
+.studio-canvas-mention-panel {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 4px;
+  border: 1px solid var(--border-weak);
+  border-radius: var(--radius-md);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
+}
+
+.studio-canvas-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--fg-body);
+  cursor: pointer;
+  text-align: left;
+}
+
+.studio-canvas-mention-item:hover,
+.studio-canvas-mention-item.is-active {
+  background: var(--accent-soft);
+}
+
+.studio-canvas-mention-thumb {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--bg-surface);
+  font-size: 14px;
+}
+
+.studio-canvas-mention-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.studio-canvas-mention-label {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-canvas-mention-token {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..df06cf9
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,86 @@
+:root {
+  color-scheme: dark;
+  --bg-base: #0d0d0f;
+  --bg-page: var(--bg-base);
+  --bg-shell: #0d0d0f;
+  --bg-surface: #151719;
+  --bg-panel: #151719;
+  --bg-elevated: #181b1d;
+  --bg-elevated-rgb: 24, 27, 29;
+  --bg-inset: #101214;
+  --bg-hover: #202527;
+  --bg-active: #243129;
+  --border-weak: #242a2c;
+  --border-subtle: #2a3032;
+  --border-default: #394044;
+  --border-accent: #00ff88;
+  --fg-body: #f3f5f2;
+  --fg-muted: #aeb8b1;
+  --fg-soft: #7e8983;
+  --fg-dim: #5f6a64;
+  --accent: #00ff88;
+  --accent-rgb: 0, 255, 136;
+  --accent-dim: #00d874;
+  --accent-hover: #58ffac;
+  --accent-muted: #183527;
+  --accent-glow: none;
+  --accent-cyan: #7be7ff;
+  --accent-gold: #d9f99d;
+  --success: #26d06e;
+  --warning: #f3aa26;
+  --error: #ff5a5f;
+  --radius-xs: 8px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-tight: 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-glow: 0 0 26px rgba(45, 212, 191, 0.18);
+
+  /* Motion tokens */
+  --transition-fast: 140ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 320ms ease;
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
+
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Microsoft YaHei", sans-serif;
+
+  /* Semantic aliases used by the layered stylesheet structure. */
+  --surface-canvas: var(--bg-base);
+  --surface-shell: var(--bg-shell);
+  --surface-panel: var(--bg-panel);
+  --surface-elevated: var(--bg-elevated);
+  --surface-muted: var(--bg-inset);
+  --surface-hover: var(--bg-hover);
+  --text-primary: var(--fg-body);
+  --text-muted: var(--fg-muted);
+  --text-subtle: var(--fg-soft);
+  --text-disabled: var(--fg-dim);
+  --border-soft: var(--border-weak);
+  --border-normal: var(--border-subtle);
+  --border-strong: var(--border-default);
+  --radius-control: var(--radius-sm);
+  --radius-panel: var(--radius-lg);
+  --shadow-surface: var(--shadow-tight);
+  --shadow-elevated: var(--shadow-panel);
+  --accent-primary: var(--accent);
+  --accent-primary-rgb: var(--accent-rgb);
+
+  /* Legacy aliases used by the first web preview. */
+  --page-bg: var(--bg-base);
+  --page-bg-soft: var(--bg-shell);
+  --surface: var(--bg-panel);
+  --surface-strong: var(--bg-elevated);
+  --line: var(--border-subtle);
+  --line-strong: var(--border-default);
+  --text: var(--fg-body);
+  --text-soft: var(--fg-soft);
+  --cyan: var(--accent-cyan);
+  --cyan-strong: #5eead4;
+  --gold: var(--accent-gold);
+  --green: var(--success);
+  --danger: var(--error);
+  --shadow-soft: var(--shadow-panel);
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..5eb1580
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,307 @@
+import type { ReactNode } from "react";
+
+export type WebViewKey =
+  | "home"
+  | "workbench"
+  | "community"
+  | "login"
+  | "agent"
+  | "canvas"
+  | "assets"
+  | "ecommerceHub"
+  | "ecommerce"
+  | "ecommerceTemplates"
+  | "sizeTemplate"
+  | "scriptTokens"
+  | "tokenUsage"
+  | "settings"
+  | "imageWorkbench"
+  | "resolutionUpscale"
+  | "digitalHuman"
+  | "avatarConsole"
+  | "characterMix"
+  | "more"
+  | "watermarkRemoval"
+  | "subtitleRemoval"
+  | "communityReview"
+  | "communityCaseAdd"
+  | "report"
+  | "providerHealth";
+
+export type WebImageWorkbenchTool = "workbench" | "inpaint" | "camera";
+
+export type WebThemeMode = "light" | "dark";
+
+export type WebAuthMode = "login" | "register";
+
+export interface WebNavItem {
+  key: WebViewKey;
+  label: string;
+  hint: string;
+  icon: ReactNode;
+  children?: WebNavItem[];
+}
+
+export interface WebApiResultMeta {
+  source?: "server" | "preview" | "mock-fallback";
+  errorMessage?: string;
+}
+
+export interface WebUserSession extends WebApiResultMeta {
+  token: string;
+  user: {
+    id: number | string;
+    username: string;
+    displayName?: string | null;
+    bio?: string | null;
+    avatarUrl?: string | null;
+    backgroundUrl?: string | null;
+    email?: string | null;
+    emailVerified?: boolean;
+    phone?: string | null;
+    authProvider?: string | null;
+    sessionId?: string | null;
+    sessionStartedAt?: string | null;
+    role?: string;
+    accountType?: "personal" | "enterprise" | string;
+    enterpriseId?: string | null;
+    enterpriseName?: string | null;
+    enterpriseRole?: "admin" | "employee" | string;
+    enterpriseAdminUserId?: number | string | null;
+    balanceCents?: number;
+    enterpriseBalanceCents?: number;
+    activePackages?: Array<{
+      name: string;
+      expiresAt: string;
+      remainingImage: number;
+      remainingVideo: number;
+      remainingText: number;
+    }>;
+  };
+}
+
+export interface WebProjectSummary extends WebApiResultMeta {
+  id: string;
+  name: string;
+  description?: string | null;
+  thumbnailUrl?: string | null;
+  updatedAt: string;
+  storyboardCount: number;
+  imageCount: number;
+  videoCount: number;
+  mode?: string;
+}
+
+export interface WebGenerationPreviewTask extends WebApiResultMeta {
+  id: string;
+  title: string;
+  type: "image" | "video" | "agent" | "digital-human" | "character-mix";
+  status: "queued" | "running" | "completed" | "failed";
+  progress: number;
+  prompt: string;
+  createdAt: string;
+  projectId?: string;
+  outputUrl?: string;
+}
+
+export interface WebUsageSummary extends WebApiResultMeta {
+  balanceCents: number;
+  enterpriseBalanceCents?: number;
+  imageUsed: number;
+  videoUsed: number;
+  textUsed: number;
+  betaUnlimited?: boolean;
+}
+
+export interface WebEnterpriseUsageMember {
+  userId: number | string;
+  username: string;
+  displayName?: string | null;
+  role: "admin" | "employee" | string;
+  usedCents: number;
+  taskCount: number;
+  lastUsedAt?: string | null;
+}
+
+export interface WebEnterpriseUsageRecord {
+  id: string;
+  userId: number | string;
+  username: string;
+  model: string;
+  taskType: "image" | "video" | "text" | string;
+  resolution?: string | null;
+  durationSeconds?: number | null;
+  amountCents: number;
+  prompt?: string | null;
+  status: string;
+  createdAt: string;
+}
+
+export interface WebEnterpriseUsageSummary extends WebApiResultMeta {
+  enterpriseId: string;
+  enterpriseName: string;
+  balanceCents: number;
+  totalUsedCents: number;
+  members: WebEnterpriseUsageMember[];
+  modelBreakdown: Array<{ model: string; usedCents: number; taskCount: number }>;
+  dailyTrend: Array<{ date: string; usedCents: number; taskCount: number }>;
+  records: WebEnterpriseUsageRecord[];
+}
+
+export interface ShowcaseItem {
+  id: string;
+  title: string;
+  author: string;
+  imageUrl: string;
+  tag: string;
+}
+
+export interface WebAssetItem {
+  id: string;
+  type: "character" | "scene" | "prop" | "video" | "image" | "asset" | "other";
+  name: string;
+  description: string;
+  imageUrl: string;
+  updatedAt: string;
+  status: "ready" | "draft" | "reviewing" | "pending" | "failed";
+  url?: string | null;
+  ossKey?: string | null;
+  tags?: string[];
+  sourceTaskId?: string | null;
+  sourceProjectId?: string | null;
+  metadata?: Record<string, unknown>;
+  createdAt?: string;
+}
+
+export interface WebCanvasWorkflowNode {
+  id: string;
+  kind: "prompt" | "text" | "image" | "video" | "model" | "output";
+  label: string;
+  detail: string;
+  position: {
+    x: number;
+    y: number;
+  };
+  size?: {
+    width: number;
+    height: number;
+  };
+  inputs?: WebCanvasWorkflowPort[];
+  outputs?: WebCanvasWorkflowPort[];
+  assetRef?: WebCanvasWorkflowAssetRef | null;
+  taskRef?: WebCanvasWorkflowTaskRef | null;
+  params?: Record<string, unknown>;
+  previewUrl?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface WebCanvasWorkflowPort {
+  id: string;
+  type: "text" | "image" | "video" | "asset";
+  label?: string;
+}
+
+export interface WebCanvasWorkflowAssetRef {
+  url: string;
+  ossKey?: string | null;
+  mediaType: "text" | "image" | "video" | string;
+  sourceTaskId?: string | null;
+  originalUrl?: string | null;
+  expiresAt?: string | null;
+}
+
+export interface WebCanvasWorkflowTaskRef {
+  taskId: string;
+  status: "queued" | "pending" | "running" | "completed" | "failed" | "cancelled";
+  resultUrl?: string | null;
+  updatedAt?: string | null;
+}
+
+export interface WebCanvasWorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourcePort?: WebCanvasWorkflowPort;
+  targetPort?: WebCanvasWorkflowPort;
+  label?: string;
+  animated?: boolean;
+}
+
+export interface WebCanvasWorkflowNodePackage {
+  id: string;
+  title: string;
+  nodeIds: Array<{
+    kind: "text" | "image" | "video";
+    id: string;
+  }>;
+  collapsed?: boolean;
+  collapsedBounds?: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null;
+  updatedAt?: string;
+}
+
+export interface WebCanvasWorkflow {
+  id: string;
+  version: 1;
+  schemaVersion?: 1 | 2;
+  title: string;
+  description: string;
+  author?: string;
+  source: "blank" | "community";
+  settings: {
+    model: string;
+    ratio: string;
+    duration: string;
+    resolution: string;
+  };
+  viewport?: {
+    x: number;
+    y: number;
+    zoom: number;
+  };
+  nodes: WebCanvasWorkflowNode[];
+  edges: WebCanvasWorkflowEdge[];
+  packages?: WebCanvasWorkflowNodePackage[];
+}
+
+export interface WebCommunityCase {
+  id: string;
+  title: string;
+  author: string;
+  tag: string;
+  summary: string;
+  imageUrl: string;
+  workflow: WebCanvasWorkflow;
+  favoriteCount?: number;
+  likeCount?: number;
+  isFavorited?: boolean;
+  isLiked?: boolean;
+}
+
+export type WebNotificationType =
+  | "task_completed"
+  | "task_failed"
+  | "review_pending"
+  | "review_passed"
+  | "review_rejected"
+  | "credits_low"
+  | "session_expired"
+  | "info";
+
+export interface WebNotification {
+  id: string;
+  type: WebNotificationType;
+  title: string;
+  description: string;
+  createdAt: string;
+  isRead: boolean;
+  targetView?: WebViewKey;
+  targetId?: string;
+  targetType?: string | null;
+  readAt?: string | null;
+  metadata?: Record<string, unknown>;
+}
diff --git a/src/utils/enterpriseVideoPolicy.ts b/src/utils/enterpriseVideoPolicy.ts
new file mode 100644
index 0000000..ee73655
--- /dev/null
+++ b/src/utils/enterpriseVideoPolicy.ts
@@ -0,0 +1,98 @@
+import { HAPPY_HORSE_UI_MODEL } from "./happyHorseRouting";
+import { VIDU_UI_MODEL } from "./viduRouting";
+import { PIXVERSE_UI_MODEL } from "./pixverseRouting";
+
+export const ENTERPRISE_KLING_MODEL = "kling-3.0-dashscope";
+export const ENTERPRISE_WANXIANG_I2V_MODEL = "wan2.7-i2v";
+
+export const ENTERPRISE_VIDEO_MODEL_OPTIONS = [
+  {
+    value: HAPPY_HORSE_UI_MODEL,
+    label: "HappyHorse 1.0 · 0.72 积分/秒起",
+    description: "自动匹配文生视频、首帧图生视频或参考图生视频",
+  },
+  {
+    value: VIDU_UI_MODEL,
+    label: "Vidu Q3 Turbo · 0.40 积分/秒起",
+    description: "自动匹配文生视频或图生视频，支持16秒",
+  },
+  {
+    value: PIXVERSE_UI_MODEL,
+    label: "PixVerse V6 · 0.40 积分/秒起",
+    description: "自动匹配文生视频或图生视频，擅长动作特效",
+  },
+  {
+    value: ENTERPRISE_WANXIANG_I2V_MODEL,
+    label: "万相 图生视频 · 0.60 积分/秒起",
+    description: "图生视频模型，支持首帧图驱动",
+  },
+  {
+    value: ENTERPRISE_KLING_MODEL,
+    label: "Kling V3 Omni · 0.60 积分/秒起",
+    description: "支持文生视频、图生视频及多模态参考生成",
+  },
+] as const;
+
+export const ENTERPRISE_VIDEO_RESOLUTION_OPTIONS = [
+  { value: "720P", label: "720P" },
+  { value: "1080P", label: "1080P" },
+] as const;
+
+export const ENTERPRISE_DEFAULT_VIDEO_MODEL = HAPPY_HORSE_UI_MODEL;
+export const ENTERPRISE_DEFAULT_VIDEO_RESOLUTION = "1080P";
+
+export interface EnterpriseVideoPricingInput {
+  model: string;
+  resolution: string;
+  durationSeconds: number;
+  muted?: boolean;
+  hasReferenceVideo?: boolean;
+}
+
+export function normalizeEnterpriseResolution(value: string): "720P" | "1080P" {
+  return String(value || "").toUpperCase() === "720P" ? "720P" : "1080P";
+}
+
+export function getEnterpriseVideoCreditRate(input: EnterpriseVideoPricingInput): number {
+  const resolution = normalizeEnterpriseResolution(input.resolution);
+  const model = String(input.model || "").toLowerCase();
+
+  if (model.includes("happyhorse")) {
+    return resolution === "720P" ? 0.72 : 1.28;
+  }
+
+  if (model.includes("wan2.7-i2v") || model.includes("wanxiang")) {
+    return resolution === "720P" ? 0.6 : 1;
+  }
+
+  if (model.includes("animate-mix")) {
+    return resolution === "720P" ? 0.6 : 1;
+  }
+
+  if (model.includes("s2v")) {
+    return resolution === "720P" ? 0.6 : 1;
+  }
+
+  if (model.includes("vidu")) {
+    return resolution === "720P" ? 0.4 : 0.8;
+  }
+
+  if (model.includes("pixverse")) {
+    return resolution === "720P" ? 0.4 : 0.8;
+  }
+
+  if (model.includes("kling")) {
+    if (input.muted) {
+      if (input.hasReferenceVideo) return resolution === "720P" ? 0.9 : 1.2;
+      return resolution === "720P" ? 0.6 : 0.8;
+    }
+    return resolution === "720P" ? 0.9 : 1.2;
+  }
+
+  throw new Error(`Unsupported enterprise video model: ${input.model}`);
+}
+
+export function calculateEnterpriseVideoCredits(input: EnterpriseVideoPricingInput): number {
+  const duration = Math.max(1, Math.ceil(Number(input.durationSeconds) || 1));
+  return Number((getEnterpriseVideoCreditRate(input) * duration).toFixed(2));
+}
diff --git a/src/utils/errorReporting.ts b/src/utils/errorReporting.ts
new file mode 100644
index 0000000..fb62355
--- /dev/null
+++ b/src/utils/errorReporting.ts
@@ -0,0 +1,59 @@
+const ERROR_REPORT_ENDPOINT = "/api/client-errors";
+
+interface ErrorReport {
+  message: string;
+  stack?: string;
+  source: "boundary" | "unhandled" | "rejection" | "manual";
+  url: string;
+  timestamp: number;
+  userAgent: string;
+  sessionId?: string;
+}
+
+let reportQueue: ErrorReport[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+function getSessionId(): string | undefined {
+  try {
+    const raw = localStorage.getItem("omniai:session") || sessionStorage.getItem("omniai:session");
+    if (!raw) return undefined;
+    const parsed = JSON.parse(raw);
+    return parsed?.user?.sessionId ?? undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function flush() {
+  if (reportQueue.length === 0) return;
+  const batch = reportQueue.splice(0, 10);
+  const baseUrl = import.meta.env.VITE_API_BASE_URL || "";
+  const url = `${baseUrl}${ERROR_REPORT_ENDPOINT}`;
+  const token = localStorage.getItem("omniai:token") || sessionStorage.getItem("omniai:token") || "";
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (token) headers["Authorization"] = `Bearer ${token}`;
+  navigator.sendBeacon?.(url, new Blob([JSON.stringify({ errors: batch })], { type: "application/json" }));
+}
+
+function scheduleFlush() {
+  if (flushTimer) return;
+  flushTimer = setTimeout(() => {
+    flushTimer = null;
+    flush();
+  }, 2000);
+}
+
+export function reportError(error: unknown, source: ErrorReport["source"] = "manual") {
+  const err = error instanceof Error ? error : new Error(String(error));
+  const report: ErrorReport = {
+    message: err.message,
+    stack: err.stack?.slice(0, 2000),
+    source,
+    url: window.location.href,
+    timestamp: Date.now(),
+    userAgent: navigator.userAgent,
+    sessionId: getSessionId(),
+  };
+  reportQueue.push(report);
+  scheduleFlush();
+}
diff --git a/src/utils/happyHorseRouting.ts b/src/utils/happyHorseRouting.ts
new file mode 100644
index 0000000..79e6242
--- /dev/null
+++ b/src/utils/happyHorseRouting.ts
@@ -0,0 +1,58 @@
+export const HAPPY_HORSE_UI_MODEL = "happyhorse-1.0";
+export const HAPPY_HORSE_UI_LABEL = "HappyHorse 1.0";
+export const HAPPY_HORSE_T2V_MODEL = "happyhorse-1.0-t2v";
+export const HAPPY_HORSE_I2V_MODEL = "happyhorse-1.0-i2v";
+export const HAPPY_HORSE_R2V_MODEL = "happyhorse-1.0-r2v";
+
+export interface HappyHorseModelOption {
+  value: string;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+export function isHappyHorseModel(model: string | undefined | null): boolean {
+  return String(model || "").toLowerCase().includes("happyhorse");
+}
+
+export function toHappyHorseDisplayModel(model: string): string {
+  return isHappyHorseModel(model) ? HAPPY_HORSE_UI_MODEL : model;
+}
+
+export function normalizeHappyHorseModelOptions<T extends HappyHorseModelOption>(options: T[]): T[] {
+  let hasHappyHorse = false;
+
+  return options.reduce<T[]>((result, option) => {
+    if (!isHappyHorseModel(option.value)) {
+      result.push(option);
+      return result;
+    }
+
+    if (hasHappyHorse) return result;
+    hasHappyHorse = true;
+    result.push({
+      ...option,
+      value: HAPPY_HORSE_UI_MODEL,
+      label: HAPPY_HORSE_UI_LABEL,
+      description: "自动匹配文生、首帧图生或参考图生视频",
+    });
+    return result;
+  }, []);
+}
+
+export function resolveHappyHorseRequestModel(input: {
+  model: string;
+  referenceUrls?: string[];
+  imageReferenceCount?: number;
+}): string {
+  if (!isHappyHorseModel(input.model)) return input.model;
+
+  const imageReferenceCount =
+    typeof input.imageReferenceCount === "number"
+      ? input.imageReferenceCount
+      : (input.referenceUrls || []).filter((url) => String(url || "").trim()).length;
+
+  if (imageReferenceCount <= 0) return HAPPY_HORSE_T2V_MODEL;
+  if (imageReferenceCount === 1) return HAPPY_HORSE_I2V_MODEL;
+  return HAPPY_HORSE_R2V_MODEL;
+}
diff --git a/src/utils/imageModelVisibility.ts b/src/utils/imageModelVisibility.ts
new file mode 100644
index 0000000..0afff1c
--- /dev/null
+++ b/src/utils/imageModelVisibility.ts
@@ -0,0 +1,40 @@
+export interface ImageModelVisibilityOption {
+  value: string;
+  label?: string;
+}
+
+export interface ImageModelVisibilitySession {
+  user?: {
+    role?: unknown;
+    enterpriseRole?: unknown;
+    isEnterpriseAdmin?: unknown;
+  } | null;
+}
+
+function normalizeRole(value: unknown): string {
+  return typeof value === "string" ? value.trim().toLowerCase() : "";
+}
+
+export function isVipImageModelOption(option: ImageModelVisibilityOption): boolean {
+  const value = String(option.value || "").trim().toLowerCase();
+  const label = String(option.label || "").trim().toLowerCase();
+  return value.endsWith("-vip") || value.includes("-vip-") || /\bvip\b/.test(label);
+}
+
+export function isAdminImageModelUser(session: ImageModelVisibilitySession | null | undefined): boolean {
+  const user = session?.user;
+  if (!user) return false;
+  return (
+    normalizeRole(user.role) === "admin" ||
+    normalizeRole(user.enterpriseRole) === "admin" ||
+    user.isEnterpriseAdmin === true
+  );
+}
+
+export function filterImageModelOptionsForSession<T extends ImageModelVisibilityOption>(
+  options: T[],
+  session: ImageModelVisibilitySession | null | undefined,
+): T[] {
+  if (isAdminImageModelUser(session)) return options;
+  return options.filter((option) => !isVipImageModelOption(option));
+}
diff --git a/src/utils/mentionTrigger.ts b/src/utils/mentionTrigger.ts
new file mode 100644
index 0000000..ca74b42
--- /dev/null
+++ b/src/utils/mentionTrigger.ts
@@ -0,0 +1,49 @@
+/**
+ * Shared mention trigger detection.
+ *
+ * Detects when the user has typed "@" followed by an optional query
+ * at the cursor position, and returns the match info for opening
+ * a mention panel.
+ */
+
+/** Characters that BLOCK @ trigger (only @ itself, to prevent @@). */
+const BLOCKED_BEFORE_AT = /[@]/;
+
+export interface MentionTriggerMatch {
+  /** Index of the @ character in the full text. */
+  atIndex: number;
+  /** The query text after @ (may be empty). */
+  query: string;
+}
+
+/**
+ * Check whether the text before the cursor contains an active @ mention trigger.
+ *
+ * Rules:
+ * - @ must be at position 0, or preceded by a boundary character
+ *   (whitespace, Chinese/English punctuation, brackets).
+ * - The query (text after @ up to the cursor) must not contain
+ *   any boundary character or space.
+ * - Returns null if no trigger is found.
+ */
+export function detectMentionTrigger(textBeforeCursor: string): MentionTriggerMatch | null {
+  const atIdx = textBeforeCursor.lastIndexOf("@");
+  if (atIdx < 0) return null;
+
+  // @ must be at start or not preceded by another @
+  if (atIdx > 0 && BLOCKED_BEFORE_AT.test(textBeforeCursor[atIdx - 1])) {
+    return null;
+  }
+
+  const query = textBeforeCursor.slice(atIdx + 1);
+
+  // Query must not contain spaces or punctuation that would break a mention token
+  if (/[\s，。、；：！？?!.,;:(){}\[\]<>""''《》【】@]/.test(query)) {
+    return null;
+  }
+
+  return { atIndex: atIdx, query };
+}
+
+/** Token pattern for @图片1, @视频1, @文本1, @音频1, @附件1, @素材1, etc. */
+export const MENTION_TOKEN_RE = /@(?:图片|视频|文本|音频|附件|素材)\d+/g;
diff --git a/src/utils/modelOptions.ts b/src/utils/modelOptions.ts
new file mode 100644
index 0000000..9b452d9
--- /dev/null
+++ b/src/utils/modelOptions.ts
@@ -0,0 +1,53 @@
+/**
+ * Shared model option utilities.
+ *
+ * Single source of truth for image/video quality option lookups and defaults,
+ * consumed by both the canvas and workbench feature modules.
+ */
+
+import type { CanvasOption } from "../features/canvas/canvasTypes";
+import {
+  fallbackVideoQualityOptions,
+  image4kCapableModels,
+  imageQualityOptions,
+  videoDefaultQualityByModel,
+  videoResolutionByModel,
+} from "../features/canvas/canvasConstants";
+import { toHappyHorseDisplayModel } from "./happyHorseRouting";
+import { toPixverseDisplayModel } from "./pixverseRouting";
+import { toViduDisplayModel } from "./viduRouting";
+
+// ─── Image quality ────────────────────────────────────────────────────────────
+
+export function getImageQualityOptions(model: string): CanvasOption[] {
+  return image4kCapableModels.has(String(model || "").toLowerCase())
+    ? imageQualityOptions
+    : imageQualityOptions.filter((option) => option.value !== "4K");
+}
+
+export function getDefaultImageQuality(model: string): string {
+  const options = getImageQualityOptions(model);
+  return options.some((option) => option.value === "2K") ? "2K" : options[0]?.value || "1K";
+}
+
+// ─── Video quality ────────────────────────────────────────────────────────────
+
+function normalizeVideoModel(model: string): string {
+  return toPixverseDisplayModel(toViduDisplayModel(toHappyHorseDisplayModel(model)));
+}
+
+export function getVideoQualityOptions(model: string): CanvasOption[] {
+  const normalized = normalizeVideoModel(model);
+  return videoResolutionByModel[normalized] || fallbackVideoQualityOptions;
+}
+
+export function getDefaultVideoQuality(model: string): string {
+  const options = getVideoQualityOptions(model);
+  const normalized = normalizeVideoModel(model);
+  const preferred = videoDefaultQualityByModel[normalized] || "pro";
+  return options.some((option) => option.value === preferred) ? preferred : options[0]?.value || preferred;
+}
+
+export function getVideoQualityLabel(model: string, value: string): string {
+  return getVideoQualityOptions(model).find((item) => item.value === value)?.label || value;
+}
diff --git a/src/utils/ossImageOptimize.ts b/src/utils/ossImageOptimize.ts
new file mode 100644
index 0000000..5bdee7a
--- /dev/null
+++ b/src/utils/ossImageOptimize.ts
@@ -0,0 +1,17 @@
+const OSS_HOST_RE = /\.aliyuncs\.com/;
+
+export function ossThumb(url: string | undefined | null, width = 400): string {
+  if (!url) return "";
+  if (!OSS_HOST_RE.test(url)) return url;
+  if (url.includes("x-oss-process")) return url;
+  const sep = url.includes("?") ? "&" : "?";
+  return `${url}${sep}x-oss-process=image/resize,w_${width}/format,webp`;
+}
+
+export function ossWebp(url: string | undefined | null): string {
+  if (!url) return "";
+  if (!OSS_HOST_RE.test(url)) return url;
+  if (url.includes("x-oss-process")) return url;
+  const sep = url.includes("?") ? "&" : "?";
+  return `${url}${sep}x-oss-process=image/format,webp`;
+}
diff --git a/src/utils/pixverseRouting.ts b/src/utils/pixverseRouting.ts
new file mode 100644
index 0000000..484d0f9
--- /dev/null
+++ b/src/utils/pixverseRouting.ts
@@ -0,0 +1,58 @@
+export const PIXVERSE_UI_MODEL = "pixverse-c1";
+export const PIXVERSE_UI_LABEL = "PixVerse V6";
+export const PIXVERSE_T2V_MODEL = "pixverse-c1-t2v";
+export const PIXVERSE_I2V_MODEL = "pixverse-c1-i2v";
+export const PIXVERSE_KF2V_MODEL = "pixverse-c1-kf2v";
+
+export interface PixverseModelOption {
+  value: string;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+export function isPixverseModel(model: string | undefined | null): boolean {
+  return String(model || "").toLowerCase().includes("pixverse");
+}
+
+export function toPixverseDisplayModel(model: string): string {
+  return isPixverseModel(model) ? PIXVERSE_UI_MODEL : model;
+}
+
+export function normalizePixverseModelOptions<T extends PixverseModelOption>(options: T[]): T[] {
+  let hasPixverse = false;
+
+  return options.reduce<T[]>((result, option) => {
+    if (!isPixverseModel(option.value)) {
+      result.push(option);
+      return result;
+    }
+
+    if (hasPixverse) return result;
+    hasPixverse = true;
+    result.push({
+      ...option,
+      value: PIXVERSE_UI_MODEL,
+      label: PIXVERSE_UI_LABEL,
+      description: "自动匹配文生视频或图生视频",
+    });
+    return result;
+  }, []);
+}
+
+export function resolvePixverseRequestModel(input: {
+  model: string;
+  referenceUrls?: string[];
+  imageReferenceCount?: number;
+}): string {
+  if (!isPixverseModel(input.model)) return input.model;
+
+  const imageReferenceCount =
+    typeof input.imageReferenceCount === "number"
+      ? input.imageReferenceCount
+      : (input.referenceUrls || []).filter((url) => String(url || "").trim()).length;
+
+  if (imageReferenceCount >= 2) return PIXVERSE_KF2V_MODEL;
+  if (imageReferenceCount <= 0) return PIXVERSE_T2V_MODEL;
+  return PIXVERSE_I2V_MODEL;
+}
diff --git a/src/utils/resolveVideoModel.ts b/src/utils/resolveVideoModel.ts
new file mode 100644
index 0000000..939c0c4
--- /dev/null
+++ b/src/utils/resolveVideoModel.ts
@@ -0,0 +1,16 @@
+import { resolveHappyHorseRequestModel } from "./happyHorseRouting";
+import { resolveViduRequestModel } from "./viduRouting";
+import { resolvePixverseRequestModel } from "./pixverseRouting";
+
+export interface ResolveModelInput {
+  model: string;
+  referenceUrls?: string[];
+  imageReferenceCount?: number;
+}
+
+export function resolveVideoRequestModel(input: ResolveModelInput): string {
+  let model = resolveHappyHorseRequestModel(input);
+  model = resolveViduRequestModel({ ...input, model });
+  model = resolvePixverseRequestModel({ ...input, model });
+  return model;
+}
diff --git a/src/utils/toolPageUtils.ts b/src/utils/toolPageUtils.ts
new file mode 100644
index 0000000..f6db3e8
--- /dev/null
+++ b/src/utils/toolPageUtils.ts
@@ -0,0 +1,32 @@
+/** Summarize a URL for display in tool pages. */
+export function summarizeUrl(value: string): string {
+  try {
+    const url = new URL(value);
+    const lastSegment = url.pathname.split("/").filter(Boolean).pop();
+    return lastSegment ? `${url.host}/.../${lastSegment}` : url.host;
+  } catch {
+    return value.length > 72 ? `${value.slice(0, 34)}...${value.slice(-28)}` : value;
+  }
+}
+
+/** Format a byte count to human-readable file size. */
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 KB";
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+/** Read a File as a data URL string via FileReader. */
+export function fileToDataUrl(file: File): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(new Error("读取素材失败"));
+    reader.readAsDataURL(file);
+  });
+}
+
+/** Return a Promise that resolves after the given milliseconds. */
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
diff --git a/src/utils/translateTaskError.ts b/src/utils/translateTaskError.ts
new file mode 100644
index 0000000..3febe18
--- /dev/null
+++ b/src/utils/translateTaskError.ts
@@ -0,0 +1,175 @@
+/**
+ * Translate API error messages to user-friendly Chinese.
+ *
+ * Classifies errors into categories and provides user-friendly messages
+ * with suggested recovery actions.
+ */
+
+export type TaskErrorCategory =
+  | "content_policy"
+  | "auth_failure"
+  | "insufficient_balance"
+  | "unsupported_model"
+  | "concurrency_busy"
+  | "invalid_asset"
+  | "network_failure"
+  | "timeout"
+  | "cancelled"
+  | "unknown";
+
+export interface TaskErrorInfo {
+  category: TaskErrorCategory;
+  message: string;
+  action: string;
+}
+
+const ERROR_RULES: Array<{
+  pattern: RegExp;
+  category: TaskErrorCategory;
+  message: string;
+  action: string;
+}> = [
+  // Content policy
+  {
+    pattern: /violated? our (?:relevant )?policies|content policies|violated? content policy|content.*filter|safety.*filter|moderation|blocked by.*filter|nsfw|inappropriate|explicit.*content|adult.*content/i,
+    category: "content_policy",
+    message: "输入词汇包含违规信息，已停止生成",
+    action: "修改提示词后重试",
+  },
+  // Auth failure
+  {
+    pattern: /unauthorized|authentication.*fail|invalid.*token|token.*expired|session.*expired|401|login.*required/i,
+    category: "auth_failure",
+    message: "登录已过期，请重新登录",
+    action: "重新登录",
+  },
+  // Insufficient balance
+  {
+    pattern: /insufficient.*balance|余额不足|积分不足|INSUFFICIENT_BALANCE|balance.*not.*enough|402/i,
+    category: "insufficient_balance",
+    message: "余额不足，请充值后重试",
+    action: "去充值",
+  },
+  // Concurrency busy
+  {
+    pattern: /concurrency pool.*full|pool is full|concurrency.*limit|too many.*concurrent|排队繁忙/i,
+    category: "concurrency_busy",
+    message: "当前模型排队繁忙，请稍后重试或切换其他模型",
+    action: "稍后重试或切换模型",
+  },
+  // Rate limit
+  {
+    pattern: /rate limit|too many requests|429/i,
+    category: "concurrency_busy",
+    message: "请求过于频繁，请稍后再试",
+    action: "稍后重试",
+  },
+  // Unsupported model
+  {
+    pattern: /unsupported.*model|model.*not.*support|model.*not.*found|ENTERPRISE_VIDEO_MODEL_NOT_ALLOWED|not.*available/i,
+    category: "unsupported_model",
+    message: "当前模型暂不可用，请切换其他模型重试",
+    action: "切换模型",
+  },
+  // Invalid asset / upload
+  {
+    pattern: /upload.*fail|asset.*fail|素材|invalid.*image|invalid.*video|file.*too.*large/i,
+    category: "invalid_asset",
+    message: "素材上传失败，请重新上传后重试",
+    action: "重新上传素材",
+  },
+  // Network failure
+  {
+    pattern: /network|connection|fetch failed|ECONNREFUSED|ENOTFOUND|socket.*hang/i,
+    category: "network_failure",
+    message: "网络错误，请检查网络后重试",
+    action: "检查网络后重试",
+  },
+  // Timeout
+  {
+    pattern: /timeout|timed? out|ETIMEDOUT/i,
+    category: "timeout",
+    message: "任务超时，请稍后在任务历史中查看结果",
+    action: "稍后重试",
+  },
+  // Quota exceeded
+  {
+    pattern: /quota exceeded|quota.*limit/i,
+    category: "insufficient_balance",
+    message: "配额已用完，请联系管理员",
+    action: "联系管理员",
+  },
+  // Cancelled
+  {
+    pattern: /cancelled|已取消/i,
+    category: "cancelled",
+    message: "已取消",
+    action: "重新开始",
+  },
+  // All providers failed
+  {
+    pattern: /all.*providers.*failed|provider.*fail/i,
+    category: "concurrency_busy",
+    message: "所有可用模型均暂时不可用，请稍后重试",
+    action: "稍后重试",
+  },
+  // Upstream / service error
+  {
+    pattern: /upstream.*error|文本服务返回|服务返回.*HTTP|openai_error|internal.*server.*error|500|502|503/i,
+    category: "network_failure",
+    message: "AI 服务暂时不可用，请稍后重试",
+    action: "稍后重试",
+  },
+  // Access denied / forbidden
+  {
+    pattern: /access.*denied|forbidden|403|permission.*denied|权限/i,
+    category: "auth_failure",
+    message: "模型权限未开通，请联系管理员",
+    action: "联系管理员",
+  },
+  // Image format / size issues
+  {
+    pattern: /image.*too.*large|image.*format|图片.*大小|图片.*格式|invalid.*file.*type/i,
+    category: "invalid_asset",
+    message: "图片格式或大小不符合要求，请调整后重试",
+    action: "调整图片后重试",
+  },
+  // Aborted (user or timeout abort)
+  {
+    pattern: /aborted|abort/i,
+    category: "timeout",
+    message: "请求已中断，请重试",
+    action: "重试",
+  },
+];
+
+/**
+ * Classify an API error into a structured result with category, message, and action.
+ */
+export function classifyTaskError(error: string | undefined | null): TaskErrorInfo {
+  if (!error) {
+    return { category: "unknown", message: "任务失败，请重试", action: "重试" };
+  }
+
+  for (const rule of ERROR_RULES) {
+    if (rule.pattern.test(error)) {
+      return { category: rule.category, message: rule.message, action: rule.action };
+    }
+  }
+
+  const hasChinese = /[一-鿿]/.test(error);
+  if (hasChinese) {
+    const truncated = error.length > 80 ? `${error.slice(0, 80)}...` : error;
+    return { category: "unknown", message: truncated, action: "重试" };
+  }
+
+  return { category: "unknown", message: "服务异常，请稍后重试", action: "重试" };
+}
+
+/**
+ * Translate an API error message to a user-friendly Chinese message.
+ * Convenience wrapper around classifyTaskError.
+ */
+export function translateTaskError(error: string | undefined | null): string {
+  return classifyTaskError(error).message;
+}
diff --git a/src/utils/viduRouting.ts b/src/utils/viduRouting.ts
new file mode 100644
index 0000000..9af90df
--- /dev/null
+++ b/src/utils/viduRouting.ts
@@ -0,0 +1,56 @@
+export const VIDU_UI_MODEL = "vidu-q3-turbo";
+export const VIDU_UI_LABEL = "Vidu Q3 Turbo";
+export const VIDU_T2V_MODEL = "vidu-q3-turbo-t2v";
+export const VIDU_I2V_MODEL = "vidu-q3-turbo-i2v";
+
+export interface ViduModelOption {
+  value: string;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+export function isViduModel(model: string | undefined | null): boolean {
+  return String(model || "").toLowerCase().includes("vidu");
+}
+
+export function toViduDisplayModel(model: string): string {
+  return isViduModel(model) ? VIDU_UI_MODEL : model;
+}
+
+export function normalizeViduModelOptions<T extends ViduModelOption>(options: T[]): T[] {
+  let hasVidu = false;
+
+  return options.reduce<T[]>((result, option) => {
+    if (!isViduModel(option.value)) {
+      result.push(option);
+      return result;
+    }
+
+    if (hasVidu) return result;
+    hasVidu = true;
+    result.push({
+      ...option,
+      value: VIDU_UI_MODEL,
+      label: VIDU_UI_LABEL,
+      description: "自动匹配文生视频或图生视频",
+    });
+    return result;
+  }, []);
+}
+
+export function resolveViduRequestModel(input: {
+  model: string;
+  referenceUrls?: string[];
+  imageReferenceCount?: number;
+}): string {
+  if (!isViduModel(input.model)) return input.model;
+
+  const imageReferenceCount =
+    typeof input.imageReferenceCount === "number"
+      ? input.imageReferenceCount
+      : (input.referenceUrls || []).filter((url) => String(url || "").trim()).length;
+
+  if (imageReferenceCount <= 0) return VIDU_T2V_MODEL;
+  return VIDU_I2V_MODEL;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a3d0976
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..9138051
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,45 @@
+import react from "@vitejs/plugin-react";
+import { compression } from "vite-plugin-compression2";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+  ],
+  server: {
+    port: 5174,
+    host: "127.0.0.1",
+    proxy: {
+      "/api": {
+        target: "http://47.110.225.76:3600",
+        changeOrigin: true,
+      },
+    },
+  },
+  preview: {
+    port: 4174,
+    host: "127.0.0.1",
+  },
+  esbuild: {
+    drop: ["console", "debugger"],
+  },
+  build: {
+    sourcemap: "hidden",
+    rollupOptions: {
+      output: {
+        manualChunks(id: string) {
+          if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
+            return "vendor-react";
+          }
+          if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
+            return "vendor-antd";
+          }
+          if (id.includes("node_modules/@xyflow")) {
+            return "vendor-xyflow";
+          }
+        },
+      },
+    },
+  },
+});

暂未开放

用户已在别处登录

删除项目

+ 页面出错了 +

{plan.name}

想法一闪任务即成

+ 页面出错了 +

想法一闪 任务即成

想法一闪任务即成