From 54f51c44edf76d4814e17a9a6108e4466a61c583 Mon Sep 17 00:00:00 2001
From: ddCat <2695092045@qq.com>
Date: Wed, 16 Sep 2026 22:59:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E7=94=A8=E6=88=B7=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E5=8F=B0=20-=20=E4=BA=A7=E5=93=81=E5=8C=96=E5=A3=B3?=
 =?UTF-8?q?=E5=B1=82=E3=80=81=E5=86=85=E5=AE=B9=E5=BA=93=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=8E=E7=A7=AF=E5=88=86=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/index.html                                |    7 +-
 .../components/assets/asset-library-card.tsx  |    2 +-
 web/src/components/auth/require-feature.tsx   |    6 +-
 web/src/components/cached-resource-image.tsx  |   13 +-
 .../components/canvas/canvas-folder-card.tsx  |   39 +-
 .../components/canvas/canvas-project-card.tsx |    3 +-
 .../canvas/canvas-project-sidebar.tsx         |   26 +-
 web/src/components/layout/app-top-nav.tsx     |    6 +
 .../components/layout/collection-toolbar.tsx  |   20 +
 web/src/components/layout/user-avatar.tsx     |   22 +
 .../layout/workspace-account-card.css         |   25 +
 .../layout/workspace-account-card.tsx         |   33 +
 .../layout/workspace-account-menu.tsx         |   56 +-
 .../layout/workspace-sidebar-nav.tsx          |  191 +-
 .../components/layout/workspace-top-bar.tsx   |   57 +-
 .../layout/workspace-wallet-modal.tsx         |  289 ++
 .../ui/base/buttons/delete-button.tsx         |   37 +
 .../ui/product/media-placeholder.tsx          |    9 +
 .../ui/product/settings-row/settings-row.tsx  |    2 +-
 .../hooks/use-workspace-button-feedback.ts    |   31 +
 web/src/layouts/user-layout.tsx               |   20 +-
 web/src/lib/app-theme.ts                      |   28 +
 web/src/pages/assets/index.tsx                |  108 +-
 .../canvas-project-selection-toolbar.tsx      |    4 +-
 .../pages/canvas/canvas-project-top-bar.tsx   |    8 +-
 web/src/pages/canvas/index.tsx                |  125 +-
 web/src/pages/canvas/project.tsx              |   15 +-
 web/src/pages/canvas/shared.tsx               |   21 +-
 .../canvas/use-canvas-project-lifecycle.ts    |    6 +-
 web/src/pages/plugins/index.tsx               |   37 +-
 web/src/pages/plugins/plugins.css             |   58 +-
 web/src/pages/projects/detail.tsx             |   99 +-
 web/src/pages/projects/index.tsx              |  103 +-
 web/src/pages/settings/index.tsx              |   69 +-
 web/src/pages/skills/index.tsx                |   56 +-
 web/src/pages/tasks/index.tsx                 |   20 +-
 web/src/pages/tasks/task-grid-card.tsx        |   17 +-
 web/src/pages/tasks/task-list-row.tsx         |    9 +-
 web/src/pages/wallet/index.tsx                |   14 +-
 web/src/stores/use-theme-store.ts             |    6 +-
 web/src/styles/globals.css                    | 3847 +++++++++++++++--
 web/src/styles/workspace-product.css          |  680 +++
 web/test/asset-header-button-style.test.ts    |   18 +-
 web/test/assets-collection-layout.test.ts     |   29 +
 web/test/settings-preference-spacing.test.ts  |   23 +
 web/test/workspace-route-loading.test.ts      |    5 +-
 46 files changed, 5355 insertions(+), 944 deletions(-)
 create mode 100644 web/src/components/layout/collection-toolbar.tsx
 create mode 100644 web/src/components/layout/user-avatar.tsx
 create mode 100644 web/src/components/layout/workspace-account-card.css
 create mode 100644 web/src/components/layout/workspace-account-card.tsx
 create mode 100644 web/src/components/layout/workspace-wallet-modal.tsx
 create mode 100644 web/src/components/ui/base/buttons/delete-button.tsx
 create mode 100644 web/src/components/ui/product/media-placeholder.tsx
 create mode 100644 web/src/hooks/use-workspace-button-feedback.ts
 create mode 100644 web/src/styles/workspace-product.css
 create mode 100644 web/test/assets-collection-layout.test.ts
 create mode 100644 web/test/settings-preference-spacing.test.ts

diff --git a/web/index.html b/web/index.html
index ab775c955..486549976 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,12 +4,13 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="AI 影视与短剧创作工作台" />
+        <link rel="icon" href="/logo.svg" type="image/svg+xml" />
         <title>正在加载</title>
         <style>
             html,
             body {
                 margin: 0;
-                background: #0b0c10;
+                background: #ffffff;
             }
             #root:empty {
                 min-height: 100vh;
@@ -52,13 +53,13 @@
         <script>
             try {
                 var s = JSON.parse(localStorage.getItem("infinite-canvas:theme_store") || "{}");
-                var t = s.state && s.state.theme === "light" ? "light" : "dark";
+                var t = s.state && s.state.theme === "dark" ? "dark" : "light";
                 document.documentElement.classList.toggle("dark", t === "dark");
                 document.documentElement.style.colorScheme = t;
             } catch (e) {}
         </script>
     </head>
-    <body class="bg-background text-foreground antialiased">
+    <body class="bg-background text-foreground antialiased" style="background:#ffffff">
         <div id="root"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>
diff --git a/web/src/components/assets/asset-library-card.tsx b/web/src/components/assets/asset-library-card.tsx
index 3afc64850..6bfa547b0 100644
--- a/web/src/components/assets/asset-library-card.tsx
+++ b/web/src/components/assets/asset-library-card.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 
 /** 资产库卡片的共同外壳；页面只负责业务动作和卡片内的信息层级。 */
 export function AssetLibraryCard({ children, className, selected = false }: { children: ReactNode; className?: string; selected?: boolean }) {
-    return <article className={cn("library-card library-card-surface asset-library-card group", selected && "is-selected", className)}>{children}</article>;
+    return <article className={cn("product-collection-card library-card library-card-surface asset-library-card group", selected && "is-selected", className)}>{children}</article>;
 }
 
 export function AssetLibraryCardMedia({ children, className }: { children: ReactNode; className?: string }) {
diff --git a/web/src/components/auth/require-feature.tsx b/web/src/components/auth/require-feature.tsx
index 64af5bfba..639d5ca39 100644
--- a/web/src/components/auth/require-feature.tsx
+++ b/web/src/components/auth/require-feature.tsx
@@ -17,8 +17,6 @@ const featureNames: Record<FeatureKey, string> = {
     pluginCenterEnabled: "插件中心",
 };
 
-let featureAvailabilityCheckedOnce = false;
-
 export function RequireFeature({ feature, children }: { feature: FeatureKey; children: ReactNode }) {
     const navigate = useNavigate();
     const user = useUserStore((state) => state.user);
@@ -28,8 +26,6 @@ export function RequireFeature({ feature, children }: { feature: FeatureKey; chi
     const [error, setError] = useState("");
 
     useEffect(() => {
-        if (featureAvailabilityCheckedOnce) return;
-        featureAvailabilityCheckedOnce = true;
         let cancelled = false;
         setError("");
         refreshFeatureAvailability()
@@ -42,7 +38,7 @@ export function RequireFeature({ feature, children }: { feature: FeatureKey; chi
         return () => {
             cancelled = true;
         };
-    }, []);
+    }, [feature, user?.id]);
 
     if (checking) return <WorkspacePage><WorkspaceLoadingState label="正在确认功能状态" detail={featureNames[feature]} rows={3} /></WorkspacePage>;
     if (error) return <WorkspacePage><WorkspaceErrorState title="无法确认功能状态" description={error} actionLabel="返回创作台" onRetry={() => navigate("/", { replace: true })} /></WorkspacePage>;
diff --git a/web/src/components/cached-resource-image.tsx b/web/src/components/cached-resource-image.tsx
index f30b29853..aef38261b 100644
--- a/web/src/components/cached-resource-image.tsx
+++ b/web/src/components/cached-resource-image.tsx
@@ -8,6 +8,7 @@ type CachedResourceImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src">
     storageKey?: string;
     src?: string;
     fallback?: ReactNode;
+    loadingFallback?: ReactNode;
     eager?: boolean;
 };
 
@@ -15,7 +16,7 @@ type CachedResourceImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src">
  * 资源图片优先读取按用户隔离的本地 Blob 缓存，避免刷新后再次从对象存储下载。
  * 本地 image: 类型的 storageKey 也会自动从 LocalForage 恢复有效的 Object URL。
  */
-export function CachedResourceImage({ storageKey, src = "", fallback = null, eager = false, onError, ...props }: CachedResourceImageProps) {
+export function CachedResourceImage({ storageKey, src = "", fallback = null, loadingFallback = fallback, eager = false, onError, ...props }: CachedResourceImageProps) {
     const remoteResource = Boolean(resourceIdFromStorageKey(storageKey));
     const localImageResource = Boolean(storageKey && storageKey.startsWith("image:"));
     const targetRef = useRef<HTMLSpanElement>(null);
@@ -61,11 +62,15 @@ export function CachedResourceImage({ storageKey, src = "", fallback = null, eag
             const resolve = cacheResourceObjectUrl(storageKey);
             void resolve
                 .then((url) => {
-                    if (!cancelled) setCachedSrc(url || src);
+                    if (!cancelled) {
+                        setCachedSrc(url || src);
+                        setCacheFailed(!url && !src);
+                    }
                 })
                 .catch(() => {
                     if (!cancelled) {
-                        setCacheFailed(true);
+                        // 缓存读取失败时仍允许原始地址加载，真正的解码失败再显示占位。
+                        setCacheFailed(!src);
                         setCachedSrc(src);
                     }
                 });
@@ -120,7 +125,7 @@ export function CachedResourceImage({ storageKey, src = "", fallback = null, eag
     }
     return (
         <span ref={targetRef} className="cached-resource-image-shell">
-            {cachedSrc && !(cacheFailed && !src) ? <img {...props} src={cachedSrc} onError={handleImgError} /> : fallback}
+            {cachedSrc && !cacheFailed ? <img {...props} src={cachedSrc} onError={handleImgError} /> : cacheFailed ? fallback : loadingFallback}
         </span>
     );
 }
diff --git a/web/src/components/canvas/canvas-folder-card.tsx b/web/src/components/canvas/canvas-folder-card.tsx
index 67baf169e..2bc00c657 100644
--- a/web/src/components/canvas/canvas-folder-card.tsx
+++ b/web/src/components/canvas/canvas-folder-card.tsx
@@ -54,22 +54,22 @@ export function CanvasFolderCard({ project, projectName, onClick, onPrefetch, op
         if (event.target !== event.currentTarget) return;
         if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
-            if (!editing) onClick();
+            if (!editing && !opening) onClick();
         }
     };
 
     return (
-        <article className={cn("canvas-folder-card", selected && "is-selected", editing && "is-editing", opening && "is-opening")} onPointerEnter={onPrefetch} onPointerDown={onPrefetch} onFocusCapture={onPrefetch}>
-            <div className="canvas-folder-open" role="button" tabIndex={0} aria-label={`打开画布 ${project.title}`} aria-busy={opening} onClick={() => !editing && !opening && onClick()} onKeyDown={handleOpenKeyDown}>
-                <div className="canvas-folder-preview" aria-hidden="true">
+        <article className={cn("product-collection-card canvas-collection-card", selected && "is-selected", editing && "is-editing", opening && "is-opening")} onPointerEnter={onPrefetch} onPointerDown={onPrefetch} onFocusCapture={onPrefetch}>
+            <div className="canvas-collection-open" role="button" tabIndex={0} aria-label={`打开画布 ${project.title}`} aria-busy={opening} onClick={() => !editing && !opening && onClick()} onKeyDown={handleOpenKeyDown}>
+                <div className="canvas-collection-preview" aria-hidden="true">
                     <ProjectPreview project={{ id: project.id, nodes: project.previewNodes }} preferLatestImage />
-                    {opening ? <div className="canvas-folder-opening"><LoaderCircle className="size-5 animate-spin" /><span>正在打开</span></div> : null}
+                    {opening ? <div className="canvas-collection-opening"><LoaderCircle className="size-5 animate-spin" /><span>正在打开</span></div> : null}
                 </div>
-                <div className="canvas-folder-body">
-                    <div className="canvas-folder-heading-row">
+                <div className="canvas-collection-body">
+                    <div className="canvas-collection-heading-row">
                         {editing ? (
                             <Input
-                                className="canvas-folder-title-input"
+                                className="canvas-collection-title-input"
                                 value={editingTitle}
                                 onChange={(event) => setEditingTitle(event.target.value)}
                                 onClick={(event) => event.stopPropagation()}
@@ -81,22 +81,19 @@ export function CanvasFolderCard({ project, projectName, onClick, onPrefetch, op
                                 autoFocus
                             />
                         ) : (
-                            <span className="canvas-folder-title">{project.title}</span>
+                            <span className="canvas-collection-title">{project.title}</span>
                         )}
                     </div>
-                    <div className="canvas-folder-meta">
-                        <span className="canvas-folder-meta-item">{projectName ? `所属项目：${projectName}` : "自由画布"}</span>
-                        <span className="canvas-folder-meta-separator" aria-hidden="true">·</span>
-                        <span className="canvas-folder-meta-item">{project.nodeCount} 节点</span>
-                    </div>
-                    <div className="canvas-folder-dates">
-                        <span><small>创建时间</small><time dateTime={project.createdAt}>{formatCanvasDate(project.createdAt)}</time></span>
-                        <span><small>最后更新</small><time dateTime={project.updatedAt}>{formatCanvasDate(project.updatedAt)}</time></span>
+                    <div className="canvas-collection-meta">
+                        <span className="canvas-collection-meta-item">{projectName ? `所属项目：${projectName}` : "自由画布"}</span>
+                        <span className="canvas-collection-meta-separator" aria-hidden="true">·</span>
+                        <span className="canvas-collection-meta-item">{project.nodeCount} 节点</span>
                     </div>
+                    <time className="canvas-collection-updated" dateTime={project.updatedAt} title={`创建于 ${formatCanvasDate(project.createdAt)}`}>{formatCanvasDate(project.updatedAt)} 更新</time>
                 </div>
             </div>
 
-            <span className={cn("canvas-folder-select", selected && "is-visible")} onClick={(event) => event.stopPropagation()}>
+            <span className={cn("canvas-collection-select", selected && "is-visible")} onClick={(event) => event.stopPropagation()}>
                 <input
                     type="checkbox"
                     checked={selected}
@@ -105,11 +102,11 @@ export function CanvasFolderCard({ project, projectName, onClick, onPrefetch, op
                 />
             </span>
 
-            <div className="canvas-folder-actions" onClick={(event) => event.stopPropagation()}>
+            <div className="canvas-collection-actions" onClick={(event) => event.stopPropagation()}>
                 {!editing ? (
                     <button
                         type="button"
-                        className="canvas-folder-rename"
+                        className="product-icon-button canvas-collection-rename"
                         aria-label={`重命名 ${project.title}`}
                         title="重命名"
                         onClick={(event) => {
@@ -133,7 +130,7 @@ export function CanvasFolderCard({ project, projectName, onClick, onPrefetch, op
                         ],
                     }}
                 >
-                    <button type="button" className="canvas-folder-more" aria-label={`${project.title} 画布操作`} title="更多操作" onClick={(event) => event.stopPropagation()}>
+                    <button type="button" className="product-icon-button canvas-collection-more" aria-label={`${project.title} 画布操作`} title="更多操作" onClick={(event) => event.stopPropagation()}>
                         <MoreHorizontal />
                     </button>
                 </Dropdown>
diff --git a/web/src/components/canvas/canvas-project-card.tsx b/web/src/components/canvas/canvas-project-card.tsx
index 29c9f8c66..7ac0188a7 100644
--- a/web/src/components/canvas/canvas-project-card.tsx
+++ b/web/src/components/canvas/canvas-project-card.tsx
@@ -10,6 +10,7 @@ import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resources";
 import { resolveBackendApiUrl } from "@/stores/use-config-store";
 import { CachedResourceImage } from "@/components/cached-resource-image";
+import { MediaPlaceholder } from "@/components/ui/product/media-placeholder";
 import { cn } from "@/lib/utils";
 import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
 
@@ -154,7 +155,7 @@ export function ProjectPreview({ project, preferLatestImage = false }: { project
                     <Video className="size-8" aria-label={media.node.title || "项目视频"} />
                 </div>
             ) : (
-                <CachedResourceImage storageKey={media.storageKey} src={media.url} alt={media.node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" />
+                <CachedResourceImage storageKey={media.storageKey} src={media.url} alt={media.node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" fallback={<MediaPlaceholder failed />} loadingFallback={<MediaPlaceholder label="正在读取封面" />} />
             )}
         </div>
     ) : !project.nodes.length ? (
diff --git a/web/src/components/canvas/canvas-project-sidebar.tsx b/web/src/components/canvas/canvas-project-sidebar.tsx
index b1cf5e3a1..ac5cbcd48 100644
--- a/web/src/components/canvas/canvas-project-sidebar.tsx
+++ b/web/src/components/canvas/canvas-project-sidebar.tsx
@@ -102,11 +102,11 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
 
     if (collapsed) {
         return (
-            <aside className="relative z-[var(--z-panel)] hidden w-11 shrink-0 flex-col items-center border-r border-border bg-background/94 py-2 backdrop-blur-xl lg:flex">
+            <aside className="canvas-project-sidebar is-collapsed relative z-[var(--z-panel)] hidden w-11 shrink-0 flex-col items-center border-r border-border bg-background/94 py-2 backdrop-blur-xl lg:flex">
                 <button type="button" className="grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-surface-hover" title="展开项目侧栏" aria-label="展开项目侧栏" onClick={() => setCollapsed(false)}>
                     <ChevronRight className="size-4" />
                 </button>
-                <Link to={`/projects/${projectId}/canvases`} className="mt-2 grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-surface-hover" title="返回项目画布列表">
+                <Link to={`/projects/${projectId}/canvases`} className="canvas-project-sidebar-back-link mt-2 grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-surface-hover" title="返回项目画布列表">
                     <FolderKanban className="size-4" />
                 </Link>
             </aside>
@@ -114,8 +114,8 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
     }
 
     return (
-        <aside className="relative z-[var(--z-panel)] hidden w-[var(--canvas-sidebar-width)] shrink-0 flex-col border-r border-border bg-background/94 backdrop-blur-xl lg:flex">
-            <header className="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border px-2.5">
+        <aside className="canvas-project-sidebar relative z-[var(--z-panel)] hidden w-[var(--canvas-sidebar-width)] shrink-0 flex-col border-r border-border bg-background/94 backdrop-blur-xl lg:flex">
+            <header className="canvas-project-sidebar-header flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border px-2.5">
                 <Link to={`/projects/${projectId}/canvases`} className="flex min-w-0 items-center gap-2 text-xs font-semibold" title="返回项目画布列表">
                     <FolderKanban className="size-3.5 shrink-0" />
                     <span className="truncate">{projectDetail?.project.name || "项目空间"}</span>
@@ -125,7 +125,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                 </button>
             </header>
 
-            <section className="shrink-0 border-b border-border/70 p-2">
+            <section className="canvas-project-sidebar-style shrink-0 border-b border-border/70 p-2">
                 <div className="mb-1.5 flex h-5 items-center justify-between px-1 text-[var(--fs-label)] font-medium text-foreground/48">
                     <span className="flex items-center gap-1.5">
                         <Palette className="size-3.5" />
@@ -139,7 +139,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                     type="button"
                     disabled={!style}
                     onClick={onLocateStyle}
-                    className="group flex h-11 w-full items-center gap-2 rounded-md px-1.5 text-left hover:bg-surface-hover disabled:cursor-default disabled:hover:bg-transparent"
+                    className="canvas-project-sidebar-style-button group flex h-11 w-full items-center gap-2 rounded-md px-1.5 text-left hover:bg-surface-hover disabled:cursor-default disabled:hover:bg-transparent"
                     title={style ? "定位画布中的项目画风节点" : "项目尚未设置画风"}
                 >
                     {style ? (
@@ -157,8 +157,8 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                 </button>
             </section>
 
-            <section className="flex min-h-0 flex-1 flex-col">
-                <div className="flex h-9 shrink-0 items-center justify-between px-3">
+            <section className="canvas-project-sidebar-chapters flex min-h-0 flex-1 flex-col">
+                <div className="canvas-project-sidebar-section-heading flex h-9 shrink-0 items-center justify-between px-3">
                     <span className="flex items-center gap-1.5 text-[var(--fs-label)] font-medium text-foreground/48">
                         <BookOpenText className="size-3.5" />
                         剧情章节 <span className="tabular-nums text-foreground/32">{orderedUnits.length.toLocaleString("zh-CN")}</span>
@@ -170,7 +170,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                     ) : null}
                 </div>
                 <div className="shrink-0 px-2 pb-2">
-                    <label className="flex h-8 items-center gap-1.5 rounded-md border border-border/75 bg-foreground/[.025] px-2 focus-within:border-[var(--workspace-accent)] focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
+                    <label className="canvas-project-sidebar-search flex h-8 items-center gap-1.5 rounded-md border border-border/75 bg-foreground/[.025] px-2 focus-within:border-[var(--workspace-accent)] focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
                         <Search className="size-3.5 shrink-0 text-foreground/32" />
                         <input
                             value={query}
@@ -191,7 +191,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                     {deferredQuery ? <div className="mt-1 px-0.5 text-[var(--fs-micro)] tabular-nums text-foreground/35">找到 {visibleUnits.length.toLocaleString("zh-CN")} 章</div> : null}
                 </div>
 
-                <div ref={scrollRef} className="thin-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5" aria-label="项目章节列表">
+                <div ref={scrollRef} className="canvas-project-sidebar-chapter-scroll thin-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5" aria-label="项目章节列表">
                     {visibleUnits.length ? (
                         <div className="relative w-full" style={{ height: chapterVirtualizer.getTotalSize() }}>
                             {chapterVirtualizer.getVirtualItems().map((virtualItem) => {
@@ -208,7 +208,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                                                 event.dataTransfer.setData(CANVAS_PROJECT_CHAPTER_DND_TYPE, JSON.stringify(payload));
                                                 event.dataTransfer.effectAllowed = "copy";
                                             }}
-                                            className={`group flex h-9 cursor-grab items-center gap-1 rounded-md px-1 text-xs active:cursor-grabbing ${active ? "bg-surface-active" : "hover:bg-surface-hover"}`}
+                                            className={`canvas-project-sidebar-chapter-row group flex h-9 cursor-grab items-center gap-1 rounded-md px-1 text-xs active:cursor-grabbing ${active ? "bg-surface-active" : "hover:bg-surface-hover"}`}
                                         >
                                             <GripVertical className="size-3.5 shrink-0 text-foreground/22" />
                                             <button
@@ -241,8 +241,8 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                 </div>
             </section>
 
-            <section className="shrink-0 border-t border-border/70 p-2">
-                <button type="button" onClick={onOpenAssets} className="flex h-9 w-full items-center gap-2 rounded-md border border-border/45 px-2 text-xs text-foreground/65 hover:border-[var(--workspace-accent)] hover:bg-[var(--workspace-accent-soft)]">
+            <section className="canvas-project-sidebar-assets shrink-0 border-t border-border/70 p-2">
+                <button type="button" onClick={onOpenAssets} className="canvas-project-sidebar-assets-button flex h-9 w-full items-center gap-2 rounded-md border border-border/45 px-2 text-xs text-foreground/65 hover:border-[var(--workspace-accent)] hover:bg-[var(--workspace-accent-soft)]">
                     <Images className="size-3.5 text-foreground/42" />
                     <span className="flex-1 text-left">引用项目资产</span>
                     <span className="rounded bg-foreground/[.06] px-1.5 py-0.5 text-[var(--fs-micro)] tabular-nums text-foreground/45">{mediaAssetCount.toLocaleString("zh-CN")}</span>
diff --git a/web/src/components/layout/app-top-nav.tsx b/web/src/components/layout/app-top-nav.tsx
index 0bc29db9a..3c27ad0ba 100644
--- a/web/src/components/layout/app-top-nav.tsx
+++ b/web/src/components/layout/app-top-nav.tsx
@@ -42,6 +42,11 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
         writeWorkspaceSidebarCollapsed(false);
     };
 
+    const collapseDesktopSidebar = () => {
+        setDesktopSidebarCollapsed(true);
+        writeWorkspaceSidebarCollapsed(true);
+    };
+
     const handleNavClick = () => {
         if (isMobileViewport()) setMobileSidebarExpanded(false);
     };
@@ -89,6 +94,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                                     onNavigate={handleNavClick}
                                     onOpenSearch={() => setPaletteOpen(true)}
                                     onExpand={expandDesktopSidebar}
+                                    onCollapse={collapseDesktopSidebar}
                                 />
                             </aside>
                         ) : null}
diff --git a/web/src/components/layout/collection-toolbar.tsx b/web/src/components/layout/collection-toolbar.tsx
new file mode 100644
index 000000000..61beca342
--- /dev/null
+++ b/web/src/components/layout/collection-toolbar.tsx
@@ -0,0 +1,20 @@
+import { Button } from "antd";
+import { RotateCcw } from "lucide-react";
+import type { ReactNode } from "react";
+
+/** 内容库的浏览控件，不复用后台表格的筛选外框。 */
+export function CollectionToolbar({ children, trailing, active, onReset, label = "搜索与筛选" }: {
+    children: ReactNode;
+    trailing?: ReactNode;
+    active?: boolean;
+    onReset?: () => void;
+    label?: string;
+}) {
+    return <section className="collection-toolbar" aria-label={label}>
+        <div className="collection-toolbar-controls">{children}</div>
+        <div className="collection-toolbar-actions">
+            {active && onReset ? <Button type="text" icon={<RotateCcw />} onClick={onReset}>重置</Button> : null}
+            {trailing}
+        </div>
+    </section>;
+}
diff --git a/web/src/components/layout/user-avatar.tsx b/web/src/components/layout/user-avatar.tsx
new file mode 100644
index 000000000..d763dbcf1
--- /dev/null
+++ b/web/src/components/layout/user-avatar.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { CircleUserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { LocalUser } from "@/stores/use-user-store";
+
+export function UserAvatar({ user, className }: { user: LocalUser; className?: string }) {
+    const [failed, setFailed] = useState(false);
+    const avatarUrl = /^https?:\/\//i.test(user.avatarUrl || "") ? user.avatarUrl : "";
+
+    useEffect(() => setFailed(false), [avatarUrl]);
+
+    // 结构保持 button > span > svg：占位图标自动复用顶栏图标按钮的 18px/1.8 描边与配色合同；默认不套圆角容器，hover 由按钮背景反馈。
+    return (
+        <span className={cn("grid shrink-0 place-items-center overflow-hidden", className)}>
+            {avatarUrl && !failed ? (
+                <img src={avatarUrl} alt="" referrerPolicy="no-referrer" className="size-full object-cover" onError={() => setFailed(true)} />
+            ) : (
+                <CircleUserRound className="size-full" aria-hidden />
+            )}
+        </span>
+    );
+}
diff --git a/web/src/components/layout/workspace-account-card.css b/web/src/components/layout/workspace-account-card.css
new file mode 100644
index 000000000..03a186d69
--- /dev/null
+++ b/web/src/components/layout/workspace-account-card.css
@@ -0,0 +1,25 @@
+.workspace-account-popover .ant-popover-container { padding: 6px; border: 0 !important; border-radius: 20px; background: var(--user-surface-raised) !important; box-shadow: none !important; }
+.workspace-account-popover .workspace-topbar-account-menu { width: auto; min-width: 0; padding: 0; }
+.workspace-account-card { width: min(304px, calc(100vw - 48px)); color: var(--user-ink); padding: 12px; }
+.workspace-account-card-identity { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; }
+.workspace-account-card-avatar { width: 42px; height: 42px; border-radius: 14px; background: var(--user-accent-soft); color: var(--user-accent); padding: 8px; }
+.workspace-account-card-identity > div { flex: 1; min-width: 0; }
+.workspace-account-card-identity strong, .workspace-account-card-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-account-card-identity strong { font-size: 15px; line-height: 24px; }
+.workspace-account-card-identity span { color: var(--user-ink-muted); font-size: 12px; }
+.workspace-account-card-identity em { font-style: normal; font-size: 10px; padding: 4px 8px; border-radius: 999px; background: var(--user-surface-muted); color: var(--user-ink-muted); }
+.workspace-account-card-wallet { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(120deg, var(--user-accent-soft), color-mix(in srgb, var(--product-accent-blue) 10%, var(--user-surface))); }
+.workspace-account-card-balance > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--user-ink-muted); }
+.workspace-account-card-balance strong { display: block; margin-top: 4px; font-size: 26px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
+.workspace-account-card-wallet > button { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--user-accent); white-space: nowrap; padding: 6px 0; }
+.workspace-account-card svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.7; }
+.workspace-account-card-avatar svg { width: 100%; height: 100%; }
+.workspace-account-card-actions { display: grid; gap: 4px; }
+.workspace-account-card-actions > a, .workspace-account-card-actions > button { display: flex; align-items: center; gap: 10px; min-height: 40px; height: auto; width: 100%; padding: 10px; border: 0; border-radius: 12px; font-size: 13px; text-align: left; justify-content: flex-start; transition: background var(--user-motion), transform var(--user-motion); }
+.workspace-account-card-actions > a { color: var(--user-ink); }
+.workspace-account-card-actions > a > span { flex: 1; }
+.workspace-account-card-actions > a > svg:last-child { color: var(--user-ink-soft); width: 14px; }
+.workspace-account-card-actions > a:hover { background: var(--user-surface-muted); }
+.workspace-account-card-actions > a:active { transform: scale(.98); }
+.workspace-account-card-actions > a:focus-visible, .workspace-account-card-wallet > button:focus-visible { outline: 2px solid var(--user-accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .workspace-account-card-actions > a:active { transform: none; } }
diff --git a/web/src/components/layout/workspace-account-card.tsx b/web/src/components/layout/workspace-account-card.tsx
new file mode 100644
index 000000000..4c8430d23
--- /dev/null
+++ b/web/src/components/layout/workspace-account-card.tsx
@@ -0,0 +1,33 @@
+import { Button } from "antd";
+import { ArrowUpRight, Coins, LogOut, RefreshCw, Settings, ShieldCheck } from "lucide-react";
+import { Link } from "react-router";
+import { useWalletBalance } from "@/hooks/use-wallet-balance";
+import { useWorkspaceLogout } from "@/hooks/use-workspace-logout";
+import { useUserStore } from "@/stores/use-user-store";
+import { UserAvatar } from "./user-avatar";
+import "./workspace-account-card.css";
+
+/** 同一账户卡片用于顶部和侧栏；余额与退出均复用真实服务。 */
+export function WorkspaceAccountCard({ onWallet, onNavigate }: { onWallet: () => void; onNavigate: () => void }) {
+    const user = useUserStore((state) => state.user);
+    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
+    const { availableMicrocredits, refreshing, refresh } = useWalletBalance(user?.id, creditsEnabled);
+    const { handleLogout, loggingOut } = useWorkspaceLogout();
+    if (!user) return null;
+    return <section className="workspace-account-card" aria-label="我的账户">
+        <header className="workspace-account-card-identity">
+            <UserAvatar user={user} className="workspace-account-card-avatar" />
+            <div><strong>{user.displayName || user.username}</strong><span>@{user.username}</span></div>
+            <em>{user.role === "admin" ? "管理员" : "创作者"}</em>
+        </header>
+        {creditsEnabled ? <div className="workspace-account-card-wallet">
+            <div className="workspace-account-card-balance"><span><Coins />可用积分</span><strong>{availableMicrocredits === null ? "—" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 2 })}</strong></div>
+            {availableMicrocredits === null ? <Button size="small" loading={refreshing} icon={<RefreshCw />} onClick={() => void refresh()}>刷新余额</Button> : <button type="button" onClick={onWallet}>充值 / 兑换<ArrowUpRight /></button>}
+        </div> : null}
+        <nav className="workspace-account-card-actions" aria-label="账户操作">
+            <Link to="/settings" onClick={onNavigate}><Settings /><span>账户与设置</span><ArrowUpRight /></Link>
+            {user.role === "admin" ? <Link to="/admin" onClick={onNavigate}><ShieldCheck /><span>管理员后台</span><ArrowUpRight /></Link> : null}
+            <Button danger type="text" icon={<LogOut />} loading={loggingOut} onClick={() => void handleLogout()}>退出登录</Button>
+        </nav>
+    </section>;
+}
diff --git a/web/src/components/layout/workspace-account-menu.tsx b/web/src/components/layout/workspace-account-menu.tsx
index c6efeda64..a4f6d771c 100644
--- a/web/src/components/layout/workspace-account-menu.tsx
+++ b/web/src/components/layout/workspace-account-menu.tsx
@@ -1,56 +1,46 @@
 import { Popover } from "antd";
 import { Switch } from "@/components/ui/base/switch";
-import { CircleUserRound, LogIn, Moon, Sun } from "lucide-react";
-import { useEffect, useState } from "react";
+import { LogIn, Moon, Sun } from "lucide-react";
+import { useState } from "react";
 import { Link } from "react-router";
 
 import { AppChangelogButton } from "@/components/layout/app-changelog-modal";
-import { IdentityProviderBadge } from "@/components/layout/identity-provider-badge";
-import { useWalletBalance } from "@/hooks/use-wallet-balance";
-import { cn } from "@/lib/utils";
+import { WorkspaceAccountCard } from "./workspace-account-card";
+import { WorkspaceWalletModal } from "./workspace-wallet-modal";
+import { UserAvatar } from "./user-avatar";
 import { useThemeStore } from "@/stores/use-theme-store";
-import { useUserStore, type LocalUser } from "@/stores/use-user-store";
+import { useUserStore } from "@/stores/use-user-store";
 
-/** 顶部栏头像账户菜单：只承载账户信息、版本和显示偏好；管理与退出入口统一放在侧栏。 */
+/** 顶部与侧栏复用同一账户卡片；顶部额外保留版本和主题偏好。 */
 export function WorkspaceAccountMenu() {
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const user = useUserStore((state) => state.user);
     const hydrated = useUserStore((state) => state.hydrated);
     const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
-    const { availableMicrocredits } = useWalletBalance(user?.id, creditsEnabled);
     const [menuOpen, setMenuOpen] = useState(false);
-
-    const balance = availableMicrocredits === null
-        ? "--"
-        : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 2 });
+    const [walletOpen, setWalletOpen] = useState(false);
 
     if (!hydrated) {
         return <span className="size-9 animate-pulse rounded-[var(--r-md)] bg-foreground/[.06]" aria-hidden />;
     }
 
     return user ? (
-        <Popover
+        <><Popover
             trigger="click"
             placement="bottomRight"
             rootClassName="workspace-account-popover"
             open={menuOpen}
             onOpenChange={setMenuOpen}
             content={(
-                <div className="w-56 py-0.5">
-                    <div className="flex items-center gap-3 px-1 pb-3">
-                        <UserAvatar user={user} className="size-8" />
-                        <div className="min-w-0 flex-1">
-                            <div className="flex min-w-0 items-center gap-1.5"><span className="truncate text-sm font-medium">{user.displayName || user.username}</span><IdentityProviderBadge user={user} /></div>
-                            {creditsEnabled ? <div className="mt-0.5 truncate text-[var(--fs-label)] tabular-nums text-foreground/45">可用 {balance} 积分</div> : null}
-                        </div>
-                    </div>
+                <div className="workspace-topbar-account-menu">
+                    <WorkspaceAccountCard onNavigate={() => setMenuOpen(false)} onWallet={() => { setMenuOpen(false); setWalletOpen(true); }} />
 
-                    <div className="border-t border-border/35 py-2">
+                    <div className="workspace-topbar-account-section">
                         <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[var(--fs-label)] text-foreground/58 hover:bg-surface-hover hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[var(--fs-micro)] tabular-nums text-foreground/32" />
                     </div>
 
-                    <div className="flex h-10 items-center px-2">
+                    <div className="workspace-topbar-account-theme">
                         {theme === "dark" ? <Moon className="size-3.5 text-foreground/45" /> : <Sun className="size-3.5 text-foreground/45" />}
                         <span className="ml-2 flex-1 text-xs text-foreground/65">深色模式</span>
                         <Switch size="sm" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
@@ -61,28 +51,10 @@ export function WorkspaceAccountMenu() {
             <button type="button" className="app-workspace-topbar-icon-button app-workspace-account-trigger" aria-label="账户菜单" title={user.displayName || user.username}>
                 <UserAvatar user={user} className="size-6" />
             </button>
-        </Popover>
+        </Popover>{creditsEnabled ? <WorkspaceWalletModal open={walletOpen} onClose={() => setWalletOpen(false)} /> : null}</>
     ) : (
         <Link to="/login" className="app-workspace-topbar-icon-button" aria-label="登录" title="登录">
             <LogIn />
         </Link>
     );
 }
-
-function UserAvatar({ user, className }: { user: LocalUser; className?: string }) {
-    const [failed, setFailed] = useState(false);
-    const avatarUrl = /^https?:\/\//i.test(user.avatarUrl || "") ? user.avatarUrl : "";
-
-    useEffect(() => setFailed(false), [avatarUrl]);
-
-    // 结构保持 button > span > svg：占位图标自动复用顶栏图标按钮的 18px/1.8 描边与配色合同；默认不套圆角容器，hover 由按钮背景反馈。
-    return (
-        <span className={cn("grid shrink-0 place-items-center overflow-hidden", className)}>
-            {avatarUrl && !failed ? (
-                <img src={avatarUrl} alt="" referrerPolicy="no-referrer" className="size-full object-cover" onError={() => setFailed(true)} />
-            ) : (
-                <CircleUserRound className="size-full" aria-hidden />
-            )}
-        </span>
-    );
-}
diff --git a/web/src/components/layout/workspace-sidebar-nav.tsx b/web/src/components/layout/workspace-sidebar-nav.tsx
index 7715da259..99b9ccb5b 100644
--- a/web/src/components/layout/workspace-sidebar-nav.tsx
+++ b/web/src/components/layout/workspace-sidebar-nav.tsx
@@ -1,16 +1,19 @@
-import { ChevronDown, ChevronRight, Home, Infinity as InfinityIcon, LogOut, PanelLeftOpen, Plus, Search, ShieldCheck } from "lucide-react";
+import { Popover } from "antd";
+import { Bell, ChevronDown, ChevronRight, CircleUserRound, History as HistoryIcon, Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Plus } from "lucide-react";
 import { useEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from "react";
 import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
 
 import { BrandLogoFrame } from "@/components/brand/brand-logo";
 import { Kbd } from "@/components/ui/base/kbd";
 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
-import { useWalletBalance } from "@/hooks/use-wallet-balance";
 import { useWorkspaceLogout } from "@/hooks/use-workspace-logout";
+import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
 import { cn } from "@/lib/utils";
 import { preloadWorkspaceRoute } from "@/lib/workspace-route-modules";
 import { useUserStore, type FeatureAvailability } from "@/stores/use-user-store";
 import { useAppearanceStore } from "@/stores/use-appearance-store";
+import { WorkspaceAccountCard } from "./workspace-account-card";
+import { WorkspaceWalletModal } from "./workspace-wallet-modal";
 
 export type WorkspaceNavItem = {
     id: string;
@@ -28,64 +31,65 @@ type WorkspaceNavGroup = {
     items: WorkspaceNavItem[];
 };
 
-/** 设置页分区子项，沿用 /settings?section=<key> 路由合同。 */
-const SETTINGS_SECTIONS: Array<{ key: string; label: string }> = [
-    { key: "channels", label: "自定义渠道" },
-    { key: "models", label: "模型选择" },
-    { key: "preferences", label: "生成偏好" },
-    { key: "prompts", label: "提示词偏好" },
-    { key: "storage", label: "我的对象存储" },
-];
-
 function toolItem(slug: NavigationToolSlug, to: string): WorkspaceNavItem {
     const tool = navigationTools.find((item) => item.slug === slug);
     return { id: slug, title: tool?.label ?? slug, icon: tool?.icon, to };
 }
 
-function buildNav(features: FeatureAvailability, balance: string, isAdmin: boolean): { groups: WorkspaceNavGroup[]; footer: WorkspaceNavItem[] } {
+function buildNav(features: FeatureAvailability, isAdmin: boolean): { groups: WorkspaceNavGroup[]; footer: WorkspaceNavItem[] } {
     const groups: WorkspaceNavGroup[] = [
         {
             items: [
-                { id: "home", title: "首页", icon: Home, to: "/" },
-toolItem("projects", "/projects"),
-                toolItem("canvas", "/canvas"),
-                ...(features.taskCenterEnabled ? [toolItem("tasks", "/tasks")] : []),
-                toolItem("assets", "/assets"),
+                { ...toolItem("create", "/"), id: "home", title: "创作" },
+                { ...toolItem("projects", "/projects"), title: "短剧 Agent" },
+                { ...toolItem("canvas", "/canvas"), title: "自由画布" },
             ],
         },
         {
-            heading: "工作台管理",
-            items: [toolItem("skills", "/skills"), ...(features.pluginCenterEnabled || isAdmin ? [toolItem("plugins", "/plugins")] : []), ...(features.creditsEnabled ? [{ ...toolItem("wallet", "/wallet"), badge: balance }] : [])],
+            heading: "资源与工具",
+            items: [{ ...toolItem("assets", "/assets"), title: "资产" }, { ...toolItem("skills", "/skills"), title: "技能" }, ...(features.pluginCenterEnabled || isAdmin ? [{ ...toolItem("plugins", "/plugins"), title: "插件" }] : [])],
         },
+        ...(features.taskCenterEnabled ? [{ items: [{ ...toolItem("tasks", "/tasks"), title: "创作历史", icon: HistoryIcon }] }] : []),
     ];
 
-    const settingsSections = SETTINGS_SECTIONS.filter((section) => section.key !== "channels" || features.customChannelsEnabled);
-    const footer: WorkspaceNavItem[] = [
-        ...(isAdmin ? [{ id: "admin", title: "管理员后台", icon: ShieldCheck, to: "/admin" }] : []),
-        {
-            ...toolItem("settings", "/settings"),
-            children: settingsSections.map((section) => ({
-                id: `settings:${section.key}`,
-                title: section.label,
-                to: `/settings?section=${section.key}`,
-            })),
-        },
-        { id: "logout", title: "退出登录", icon: LogOut, action: "logout" },
-    ];
-
-    return { groups, footer };
+    // 管理、设置和退出登录不再占据参考站式侧栏底部，而是通过用户卡片菜单进入。
+    // 路由和写操作仍保留，避免把用户端导航变成无法访问的装饰。
+    return { groups, footer: [] };
 }
 
-function WorkspaceSwitcher({ collapsed, onNavigate, onExpand }: { collapsed: boolean; onNavigate: () => void; onExpand: () => void }) {
-    const appearance = useAppearanceStore((state) => state.appearance);
-    const [isOpen, setIsOpen] = useState(false);
-    const navigate = useNavigate();
+function WorkspaceSidebarProfile({ collapsed, user }: { collapsed: boolean; user: NonNullable<ReturnType<typeof useUserStore.getState>["user"]> | null }) {
+    const [failed, setFailed] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [walletOpen, setWalletOpen] = useState(false);
+    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
+    const avatarUrl = /^https?:\/\//i.test(user?.avatarUrl || "") ? user?.avatarUrl : "";
+    const profileName = user?.displayName || user?.username || "未登录";
 
-    const go = (to: string) => {
-        setIsOpen(false);
-        onNavigate();
-        navigate(to);
-    };
+    useEffect(() => setFailed(false), [avatarUrl]);
+
+    if (!user) {
+        return <Link to="/login" className={cn("app-workspace-sidebar-profile", collapsed && "is-collapsed")} aria-label="登录" title="登录"><CircleUserRound className="size-5" /><span>登录</span></Link>;
+    }
+
+    const avatar = avatarUrl && !failed ? <img src={avatarUrl} alt="" referrerPolicy="no-referrer" onError={() => setFailed(true)} /> : <CircleUserRound aria-hidden />;
+    const content = <WorkspaceAccountCard onNavigate={() => setMenuOpen(false)} onWallet={() => { setMenuOpen(false); setWalletOpen(true); }} />;
+
+    return (
+        <div className={cn("app-workspace-sidebar-profile-row", collapsed && "is-collapsed")}>
+            <Popover open={menuOpen} onOpenChange={setMenuOpen} trigger="click" placement="topLeft" rootClassName="workspace-account-popover" content={content}>
+                <button type="button" className={cn("app-workspace-sidebar-profile", collapsed && "is-collapsed")} aria-label="打开账户菜单" title={profileName}>
+                    <span className="app-workspace-sidebar-profile-avatar">{avatar}</span>
+                    {!collapsed ? <span className="app-workspace-sidebar-profile-copy"><strong>{profileName}</strong><span>创作工作台</span></span> : null}
+                </button>
+            </Popover>
+            {creditsEnabled ? <WorkspaceWalletModal open={walletOpen} onClose={() => setWalletOpen(false)} /> : null}
+            {!collapsed ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-sidebar-notification" /> : <span className="app-workspace-sidebar-notification-spacer" aria-hidden />}
+        </div>
+    );
+}
+
+function WorkspaceSwitcher({ collapsed, onNavigate, onExpand, onCollapse }: { collapsed: boolean; onNavigate: () => void; onExpand: () => void; onCollapse: () => void }) {
+    const appearance = useAppearanceStore((state) => state.appearance);
 
     if (collapsed) {
         return (
@@ -98,52 +102,19 @@ function WorkspaceSwitcher({ collapsed, onNavigate, onExpand }: { collapsed: boo
     }
 
     return (
-        <div className="relative shrink-0 px-3 pt-3">
-            <button
-                type="button"
-                onClick={() => setIsOpen((open) => !open)}
-                aria-haspopup="listbox"
-                aria-expanded={isOpen}
-                className="group flex w-full items-center justify-between rounded-[var(--r-sm)] px-2 py-2 text-left transition-colors select-none hover:bg-surface-hover"
-            >
-                <span className="flex min-w-0 items-center gap-3">
-                    <BrandLogoFrame className="app-workspace-brand-mark grid size-8 shrink-0 place-items-center rounded-[var(--r-sm)] shadow-sm" logoClassName="size-5 object-contain" alt="" fallback={<InfinityIcon className="size-4" strokeWidth={2} />} />
+        <div className="app-workspace-sidebar-brand-row relative shrink-0 px-3 pt-3">
+            <Link to="/" onClick={onNavigate} className="app-workspace-sidebar-brand-button group" aria-label={`${appearance.brandName}首页`}>
+                <span className="flex min-w-0 items-center gap-2">
+                    <BrandLogoFrame className="app-workspace-brand-mark grid size-8 shrink-0 place-items-center rounded-[var(--r-sm)] shadow-sm" logoClassName="size-5 object-contain" alt="" fallback={<InfinityIcon className="size-4" strokeWidth={2.2} />} />
                     <span className="flex min-w-0 flex-col">
-                        <span className="app-workspace-brand-wordmark truncate text-[var(--fs-body)] leading-none font-medium">{appearance.brandName}</span>
-                        <span className="mt-1 truncate text-[var(--fs-label)] leading-none text-foreground/42">创作工作台</span>
+                        <span className="app-workspace-brand-wordmark truncate text-[var(--fs-body)] leading-none font-semibold">{appearance.brandName}</span>
+                        <span className="mt-1 truncate text-[var(--fs-label)] leading-none text-foreground/60">创作工作台</span>
                     </span>
                 </span>
-                <ChevronDown className="size-4 shrink-0 text-foreground/40 transition-colors group-hover:text-foreground/70" strokeWidth={1.5} />
+            </Link>
+            <button type="button" className="app-workspace-sidebar-collapse-button" aria-label="收起侧栏" title="收起侧栏" onClick={onCollapse}>
+                <PanelLeftClose className="size-4" strokeWidth={1.7} />
             </button>
-
-            {isOpen ? (
-                <>
-                    <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
-                    <div className="app-workspace-nav-popover absolute left-3 right-3 top-full z-50 mt-1 overflow-hidden rounded-lg border border-[var(--workspace-border)] bg-[var(--workspace-surface-strong)] py-1 animate-in fade-in zoom-in-95 duration-100">
-                        <div className="px-3 py-2.5">
-                            <div className="truncate text-[var(--fs-body)] font-semibold">{appearance.brandName}</div>
-                            <div className="mt-0.5 truncate text-[var(--fs-label)] text-foreground/45">创作工作台</div>
-                        </div>
-                        <div className="mx-2 my-1 h-px bg-[var(--workspace-border)]" />
-                        <a href="/welcome" className="flex w-full items-center gap-2 px-3 py-2 text-[var(--fs-body)] text-foreground/80 transition-colors hover:bg-surface-hover hover:text-foreground">
-                            品牌首页
-                        </a>
-                        {[
-                            { label: "首页", to: "/" },
-                            { label: "画布", to: "/canvas" },
-                            { label: "设置", to: "/settings" },
-                        ].map((entry) => (
-                            <button key={entry.to} type="button" onClick={() => go(entry.to)} className="flex w-full items-center gap-2 px-3 py-2 text-[var(--fs-body)] text-foreground/80 transition-colors hover:bg-surface-hover hover:text-foreground">
-                                {entry.label}
-                            </button>
-                        ))}
-                        <div className="mx-2 my-1 h-px bg-[var(--workspace-border)]" />
-                        <button type="button" onClick={() => go("/canvas?mode=new")} className="flex w-full items-center gap-2 px-3 py-2 text-[var(--fs-body)] text-foreground/45 transition-colors hover:bg-surface-hover hover:text-foreground">
-                            <Plus className="size-3.5" /> 新建画布
-                        </button>
-                    </div>
-                </>
-            ) : null}
         </div>
     );
 }
@@ -177,15 +148,18 @@ function NavItem({
     const Icon = item.icon;
     const rowStyle = collapsed ? undefined : ({ paddingLeft: `${level * 12 + 10}px` } as CSSProperties);
 
+    const collapsedTitle = item.id === "home" ? "创作" : item.id === "projects" ? "短剧" : item.id === "canvas" ? "画布" : item.id === "assets" ? "资产" : item.id === "skills" ? "技能" : item.id === "plugins" ? "插件" : item.id === "tasks" ? "历史" : item.title.slice(0, 2);
     const rowContent = (
         <>
             <span className="app-workspace-nav-main flex min-w-0 items-center gap-2.5">
                 {Icon ? (
-                    <Icon className={cn("size-4 shrink-0", isActive ? "text-foreground" : "text-foreground/60 group-hover:text-foreground/80")} strokeWidth={1.6} />
+                    <span className="app-workspace-nav-icon" aria-hidden>
+                        <Icon className="size-4 shrink-0" strokeWidth={1.8} />
+                    </span>
                 ) : (
                     <span className="size-1.5 shrink-0 rounded-full bg-current opacity-40" aria-hidden />
                 )}
-                <span className="app-workspace-nav-title truncate">{item.title}</span>
+                <span className="app-workspace-nav-title truncate">{collapsed ? collapsedTitle : item.title}</span>
             </span>
             <span className="app-workspace-nav-meta flex shrink-0 items-center gap-2">
                 {item.shortcut ? (
@@ -198,7 +172,7 @@ function NavItem({
     );
 
     const rowClassName = cn(
-        "app-workspace-nav-link group flex min-h-9 w-full items-center justify-between gap-2 rounded-[var(--r-sm)] px-2.5 py-2 text-[var(--fs-body)] transition-colors duration-200 select-none",
+        "app-workspace-nav-link group flex min-h-11 w-full items-center justify-between gap-2 rounded-[var(--r-md)] px-3 py-2 text-[var(--fs-body)] transition-[background-color,color,transform] duration-200 select-none",
         collapsed && "is-collapsed",
         isActive ? "is-active font-medium" : "text-foreground/62 hover:bg-surface-hover hover:text-foreground",
     );
@@ -228,6 +202,7 @@ function NavItem({
                 <Link
                     to={linkTo}
                     className={rowClassName}
+                    data-nav-id={item.id}
                     style={rowStyle}
                     aria-label={collapsed ? item.title : undefined}
                     title={collapsed ? item.title : undefined}
@@ -239,7 +214,7 @@ function NavItem({
                     {rowContent}
                 </Link>
             ) : (
-                <button type="button" className={rowClassName} style={rowStyle} aria-label={collapsed ? item.title : undefined} title={collapsed ? item.title : undefined} onClick={handleClick} aria-expanded={hasChildren ? isOpen : undefined}>
+                <button type="button" className={rowClassName} data-nav-id={item.id} style={rowStyle} aria-label={collapsed ? item.title : undefined} title={collapsed ? item.title : undefined} onClick={handleClick} aria-expanded={hasChildren ? isOpen : undefined}>
                     {rowContent}
                 </button>
             )}
@@ -268,7 +243,7 @@ function NavGroup({ group, activeId, onNavigate, onOpenSearch, onLogout, collaps
     }, [hasActive]);
 
     const content = (
-        <div className="flex flex-col gap-0.5">
+        <div className="flex flex-col gap-2">
             {group.items.map((item) => (
                 <NavItem key={item.id} item={item} activeId={activeId} onSelect={onNavigate} onOpenSearch={onOpenSearch} onLogout={onLogout} collapsed={collapsed} />
             ))}
@@ -277,11 +252,11 @@ function NavGroup({ group, activeId, onNavigate, onOpenSearch, onLogout, collaps
 
     // 无标题分组（核心导航入口）常驻展示，不做折叠。
     if (!group.heading || collapsed) {
-        return <div className="flex shrink-0 flex-col">{content}</div>;
+        return <div className="app-workspace-nav-group flex shrink-0 flex-col" data-nav-group-heading={group.heading || ""}>{content}</div>;
     }
 
     return (
-        <div className="flex shrink-0 flex-col">
+        <div className="app-workspace-nav-group flex shrink-0 flex-col" data-nav-group-heading={group.heading}>
             <button type="button" onClick={() => setIsOpen((open) => !open)} aria-expanded={isOpen} className="app-workspace-nav-group-toggle select-none">
                 <span className="app-workspace-nav-group-label">{group.heading}</span>
                 <ChevronRight className={cn("size-3.5 shrink-0 text-foreground/35 transition-transform duration-200", isOpen && "rotate-90")} strokeWidth={2} />
@@ -293,18 +268,13 @@ function NavGroup({ group, activeId, onNavigate, onOpenSearch, onLogout, collaps
     );
 }
 
-export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExpand }: { collapsed: boolean; onNavigate: () => void; onOpenSearch: () => void; onExpand: () => void }) {
+export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExpand, onCollapse }: { collapsed: boolean; onNavigate: () => void; onOpenSearch: () => void; onExpand: () => void; onCollapse: () => void }) {
     const { pathname } = useLocation();
     const [searchParams] = useSearchParams();
     const features = useUserStore((state) => state.features);
     const user = useUserStore((state) => state.user);
-    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
-    const { availableMicrocredits } = useWalletBalance(user?.id, creditsEnabled);
     const { handleLogout } = useWorkspaceLogout();
-
-    const balance = availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 2 });
-
-    const { groups, footer } = useMemo(() => buildNav(features, balance, user?.role === "admin"), [features, balance, user?.role]);
+    const { groups, footer } = useMemo(() => buildNav(features, user?.role === "admin"), [features, user?.role]);
 
     const slug = pathname.split("/").filter(Boolean)[0] || "home";
     const section = searchParams.get("section");
@@ -327,26 +297,12 @@ export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExp
 
     return (
         <div className={cn("app-workspace-sidebar-nav flex h-full shrink-0 flex-col", collapsed && "is-collapsed")}>
-            <WorkspaceSwitcher collapsed={collapsed} onNavigate={onNavigate} onExpand={onExpand} />
-
-            <div className="app-workspace-sidebar-search shrink-0 px-3 pb-1 pt-2">
-                <button
-                    type="button"
-                    onClick={onOpenSearch}
-                    className="group flex h-9 w-full items-center gap-2 rounded-[var(--r-lg)] bg-foreground/5 px-3 text-left text-[var(--fs-caption)] text-muted-foreground transition-colors hover:bg-foreground/[.07] hover:text-foreground/70"
-                    aria-label={collapsed ? "快速搜索" : undefined}
-                    title={collapsed ? "快速搜索" : undefined}
-                >
-                    <Search className="size-4 shrink-0 text-muted-foreground group-hover:text-foreground/70" strokeWidth={1.6} />
-                    <span className="app-workspace-sidebar-search-label flex-1 truncate">快速搜索</span>
-                    <Kbd className="app-workspace-sidebar-search-shortcut">⌘K</Kbd>
-                </button>
-            </div>
+            <WorkspaceSwitcher collapsed={collapsed} onNavigate={onNavigate} onExpand={onExpand} onCollapse={onCollapse} />
 
             <div
                 ref={scrollRef}
                 onScroll={handleScroll}
-                className={cn("app-workspace-sidebar-scroll-area flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-3 pb-3 pt-2", collapsed && "is-collapsed", scrollState.hasTopFade && "has-top-fade", scrollState.hasBottomFade && "has-bottom-fade")}
+                className={cn("app-workspace-sidebar-scroll-area flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-3 pb-3 pt-7", collapsed && "is-collapsed", scrollState.hasTopFade && "has-top-fade", scrollState.hasBottomFade && "has-bottom-fade")}
             >
                 {groups.map((group, index) => (
                     <NavGroup key={index} group={group} activeId={activeId} onNavigate={onNavigate} onOpenSearch={onOpenSearch} onLogout={() => void handleLogout()} collapsed={collapsed} />
@@ -354,11 +310,12 @@ export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExp
             </div>
 
             <div className="app-workspace-sidebar-footer shrink-0 px-3 py-3">
-                <div className="flex flex-col gap-0.5">
+                <WorkspaceSidebarProfile collapsed={collapsed} user={user} />
+                {footer.length ? <div className="mt-2 flex flex-col gap-0.5">
                     {footer.map((item) => (
                         <NavItem key={item.id} item={item} activeId={activeId} onSelect={onNavigate} onOpenSearch={onOpenSearch} onLogout={() => void handleLogout()} collapsed={collapsed} />
                     ))}
-                </div>
+                </div> : null}
             </div>
         </div>
     );
diff --git a/web/src/components/layout/workspace-top-bar.tsx b/web/src/components/layout/workspace-top-bar.tsx
index 4c56ccd2f..76582e414 100644
--- a/web/src/components/layout/workspace-top-bar.tsx
+++ b/web/src/components/layout/workspace-top-bar.tsx
@@ -1,4 +1,5 @@
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Coins, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { useState } from "react";
 import { Link, useLocation } from "react-router";
 
 import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
@@ -8,49 +9,59 @@ import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import { useAppearanceStore } from "@/stores/use-appearance-store";
+import { useWalletBalance } from "@/hooks/use-wallet-balance";
+import { WorkspaceWalletModal } from "@/components/layout/workspace-wallet-modal";
 
 const PAGE_TITLES: Record<string, string> = {
-    home: "首页",
+    home: "创作",
     create: "创作",
-    projects: "短剧创作",
-    canvas: "画布",
-    tasks: "任务",
-    assets: "素材",
-    skills: "技能库",
-    wallet: "积分中心",
+    projects: "短剧 Agent",
+    canvas: "自由画布",
+    tasks: "创作历史",
+    assets: "资产",
+    skills: "技能",
+    plugins: "插件",
+    wallet: "积分超市",
     settings: "设置",
 };
 
 export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen: boolean; onToggleSidebar: () => void }) {
+    const [walletOpen, setWalletOpen] = useState(false);
     const brandName = useAppearanceStore((state) => state.appearance.brandName);
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const user = useUserStore((state) => state.user);
+    const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
+    const { availableMicrocredits } = useWalletBalance(user?.id, creditsEnabled);
     const { pathname } = useLocation();
     const extension = useWorkspaceTopBarContent();
 
     const slug = pathname.split("/").filter(Boolean)[0];
-    const pageTitle = (slug && PAGE_TITLES[slug]) || brandName;
+    const pageTitle = slug ? PAGE_TITLES[slug] || brandName : PAGE_TITLES.home;
+    const balance = availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 2 });
 
     return (
-        <header className={`app-workspace-topbar flex shrink-0 items-center justify-between gap-2 px-3 sm:px-4 ${extension ? "has-extension" : ""}`}>
-            <div className="flex min-w-0 flex-1 items-center gap-2">
-                <button type="button" className="app-workspace-topbar-icon-button" aria-label={sidebarOpen ? "收起侧栏" : "展开侧栏"} onClick={onToggleSidebar}>
-                    {sidebarOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
-                </button>
-                <nav className={`${extension ? "hidden 2xl:flex" : "flex"} min-w-0 items-center gap-2 text-[var(--fs-caption)] text-foreground/50`} aria-label="当前位置">
-                    <Link to="/" className="shrink-0 font-medium text-foreground/70 transition-colors hover:text-foreground">{brandName}</Link>
-                    <span className="shrink-0 text-foreground/30">/</span>
-                    <span className="truncate font-medium text-foreground">{pageTitle}</span>
-                </nav>
-                {extension ? <div className="min-w-0 flex-1">{extension}</div> : null}
-            </div>
-
-            <div className="flex shrink-0 items-center gap-1">
+        <header className={`app-workspace-topbar ${extension ? "has-extension" : ""}`}>
+            <button type="button" className="app-workspace-mobile-menu app-workspace-topbar-icon-button" aria-label={sidebarOpen ? "收起侧栏" : "展开侧栏"} onClick={onToggleSidebar}>
+                {sidebarOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+            </button>
+            <nav className="app-workspace-topbar-breadcrumb" aria-label="当前位置">
+                <Link to="/" className="font-medium text-foreground/65 transition-colors hover:text-foreground">{brandName}</Link>
+                <span aria-hidden="true">/</span>
+                <span className="truncate font-medium text-foreground">{pageTitle}</span>
+            </nav>
+            {extension ? <div className="app-workspace-topbar-extension">{extension}</div> : null}
+            <div className="app-workspace-topbar-actions">
+                {creditsEnabled ? <button type="button" className="app-workspace-topbar-credit-pill" aria-label={`打开积分中心，可用 ${balance} 积分`} onClick={() => setWalletOpen(true)}>
+                    <Coins aria-hidden="true" />
+                    <span>积分</span>
+                    <strong>{balance}</strong>
+                </button> : null}
                 {user ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-topbar-icon-button" autoOpen /> : null}
                 <AnimatedThemeToggler className="app-workspace-topbar-icon-button" theme={theme} onThemeChange={setTheme} aria-label="切换主题" />
                 <WorkspaceAccountMenu />
             </div>
+            {creditsEnabled ? <WorkspaceWalletModal open={walletOpen} onClose={() => setWalletOpen(false)} /> : null}
         </header>
     );
 }
diff --git a/web/src/components/layout/workspace-wallet-modal.tsx b/web/src/components/layout/workspace-wallet-modal.tsx
new file mode 100644
index 000000000..24a318343
--- /dev/null
+++ b/web/src/components/layout/workspace-wallet-modal.tsx
@@ -0,0 +1,289 @@
+import { App, Button, Input, QRCode, Skeleton } from "antd";
+import { Check, ChevronLeft, ChevronRight, CircleAlert, Coins, CreditCard, History, RefreshCw, TicketCheck, WalletCards } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { AppModal } from "@/components/ui/product/app-modal";
+import { formatCredits } from "@/constant/credits";
+import { closePaymentOrder, createPaymentOrder, listPaymentProviders, listTopupProducts, queryPaymentOrder, refreshPaymentCheckout, type PaymentOrder, type PaymentProvider, type TopupProduct } from "@/services/api/payments";
+import { getWallet, redeemCredits, type CreditLedgerEntry, type WalletSummary } from "@/services/api/wallet";
+import { cn } from "@/lib/utils";
+
+type WalletModalTab = "topup" | "history";
+
+export function WorkspaceWalletModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+    const { message } = App.useApp();
+    const [tab, setTab] = useState<WalletModalTab>("topup");
+    const [wallet, setWallet] = useState<WalletSummary | null>(null);
+    const [walletLoading, setWalletLoading] = useState(false);
+    const [walletError, setWalletError] = useState("");
+    const [page, setPage] = useState(1);
+    const [products, setProducts] = useState<TopupProduct[]>([]);
+    const [providers, setProviders] = useState<PaymentProvider[]>([]);
+    const [paymentsLoading, setPaymentsLoading] = useState(false);
+    const [selectedProductId, setSelectedProductId] = useState("");
+    const [selectedProviderId, setSelectedProviderId] = useState("");
+    const [code, setCode] = useState("");
+    const [redeeming, setRedeeming] = useState(false);
+    const [paymentCreating, setPaymentCreating] = useState(false);
+    const [paymentQuerying, setPaymentQuerying] = useState(false);
+    const [paymentOrder, setPaymentOrder] = useState<PaymentOrder | null>(null);
+    const [paymentOpen, setPaymentOpen] = useState(false);
+    const [clock, setClock] = useState(Date.now());
+    const idempotencyKey = useRef("");
+    const completedOrderId = useRef("");
+    const requestSequence = useRef(0);
+
+    const selectedProduct = useMemo(() => products.find((item) => item.id === selectedProductId), [products, selectedProductId]);
+    const selectedProvider = useMemo(() => providers.find((item) => item.id === selectedProviderId), [providers, selectedProviderId]);
+
+    const reloadWallet = async (targetPage = page) => {
+        const sequence = ++requestSequence.current;
+        setWalletLoading(true);
+        setWalletError("");
+        try {
+            const result = await getWallet(targetPage, 20, "all");
+            if (sequence === requestSequence.current) setWallet(result);
+        } catch (error) {
+            if (sequence === requestSequence.current) setWalletError(error instanceof Error ? error.message : "读取积分账户失败");
+        } finally {
+            if (sequence === requestSequence.current) setWalletLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!open) return;
+        setPage(1);
+        void reloadWallet(1);
+        setPaymentsLoading(true);
+        Promise.all([listTopupProducts(), listPaymentProviders()])
+            .then(([productResult, providerResult]) => {
+                setProducts(productResult.products.filter((item) => item.enabled));
+                setProviders(providerResult.providers.filter((item) => item.enabled && item.pluginEnabled && item.configured));
+                setSelectedProductId((current) => current || productResult.products.find((item) => item.enabled)?.id || "");
+                setSelectedProviderId((current) => current || providerResult.providers.find((item) => item.enabled && item.pluginEnabled && item.configured)?.id || "");
+            })
+            .catch((error) => message.error(error instanceof Error ? error.message : "读取充值配置失败"))
+            .finally(() => setPaymentsLoading(false));
+    }, [open]);
+
+    useEffect(() => {
+        idempotencyKey.current = "";
+    }, [selectedProductId, selectedProviderId]);
+
+    useEffect(() => {
+        if (!paymentOpen || !paymentOrder || !["created", "pending", "closing"].includes(paymentOrder.status)) return;
+        const interval = window.setInterval(() => {
+            void refreshPaymentStatus(paymentOrder.id, true);
+        }, 4_000);
+        return () => window.clearInterval(interval);
+    }, [paymentOpen, paymentOrder?.id, paymentOrder?.status]);
+
+    useEffect(() => {
+        if (!paymentOpen) return;
+        const interval = window.setInterval(() => setClock(Date.now()), 1_000);
+        return () => window.clearInterval(interval);
+    }, [paymentOpen]);
+
+    const announceWalletUpdated = async (orderId?: string) => {
+        if (orderId && completedOrderId.current === orderId) return;
+        if (orderId) completedOrderId.current = orderId;
+        setPage(1);
+        await reloadWallet(1);
+        window.dispatchEvent(new CustomEvent("wallet:updated"));
+    };
+
+    const redeem = async () => {
+        const normalized = code.trim().toLowerCase();
+        if (normalized.length !== 32) {
+            message.error("请输入完整的 32 位兑换码");
+            return;
+        }
+        setRedeeming(true);
+        try {
+            await redeemCredits(normalized);
+            setCode("");
+            await announceWalletUpdated();
+            message.success("兑换成功，积分已到账");
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "兑换失败");
+        } finally {
+            setRedeeming(false);
+        }
+    };
+
+    const startPayment = async () => {
+        if (!selectedProduct || !selectedProvider) {
+            message.error("请选择充值商品和支付方式");
+            return;
+        }
+        setPaymentCreating(true);
+        try {
+            if (!idempotencyKey.current) idempotencyKey.current = crypto.randomUUID();
+            const result = await createPaymentOrder({ productId: selectedProduct.id, providerId: selectedProvider.id, idempotencyKey: idempotencyKey.current });
+            idempotencyKey.current = "";
+            setPaymentOrder(result.order);
+            if (result.order.status === "credited") await announceWalletUpdated(result.order.id);
+            if (result.order.checkout.mode === "redirect" && result.order.checkout.url) {
+                window.location.assign(result.order.checkout.url);
+                return;
+            }
+            setPaymentOpen(true);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "创建支付订单失败");
+        } finally {
+            setPaymentCreating(false);
+        }
+    };
+
+    async function refreshPaymentStatus(orderId = paymentOrder?.id, silent = false) {
+        if (!orderId || paymentQuerying) return;
+        setPaymentQuerying(true);
+        try {
+            const result = await queryPaymentOrder(orderId);
+            setPaymentOrder(result.order);
+            if (result.order.status === "credited") {
+                await announceWalletUpdated(result.order.id);
+                if (!silent) message.success("支付已确认，积分已到账");
+            } else if (!silent && result.order.status === "closed") message.warning("订单已关闭，未产生积分充值");
+            else if (!silent) message.info("渠道尚未确认支付，请稍后再试");
+        } catch (error) {
+            if (!silent) message.error(error instanceof Error ? error.message : "查询支付结果失败");
+        } finally {
+            setPaymentQuerying(false);
+        }
+    }
+
+    const cancelPayment = async () => {
+        if (!paymentOrder) return;
+        setPaymentQuerying(true);
+        try {
+            const result = await closePaymentOrder(paymentOrder.id);
+            setPaymentOrder(result.order);
+            if (result.order.status === "credited") await announceWalletUpdated(result.order.id);
+            else message.success("未支付订单已关闭");
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "关闭订单失败");
+        } finally {
+            setPaymentQuerying(false);
+        }
+    };
+
+    const retryCheckout = async () => {
+        if (!paymentOrder) return;
+        setPaymentQuerying(true);
+        try {
+            const result = await refreshPaymentCheckout(paymentOrder.id);
+            setPaymentOrder(result.order);
+            if (result.order.checkout.mode === "redirect" && result.order.checkout.url) window.location.assign(result.order.checkout.url);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "刷新支付入口失败");
+        } finally {
+            setPaymentQuerying(false);
+        }
+    };
+
+    const available = wallet?.account.availableMicrocredits ?? 0;
+    const totalPages = Math.max(1, Math.ceil((wallet?.total || 0) / 20));
+
+    return (
+        <>
+            <AppModal flush open={open} title={null} footer={null} centered width="min(880px, calc(100vw - 28px))" onCancel={onClose} rootClassName="workspace-wallet-modal">
+                <div className="workspace-wallet-shell">
+                    <header className="workspace-wallet-header">
+                        <div>
+                            <span className="workspace-wallet-kicker"><Coins />积分中心</span>
+                            <h2>充值、兑换与消费记录</h2>
+                            <p>为下一次创作补充积分，随时查看每一笔收支。</p>
+                        </div>
+                        <div className="workspace-wallet-balance">
+                            <span>可用积分</span>
+                            <strong>{wallet ? formatCredits(available, 6) : "--"}</strong>
+                            <small>冻结 {wallet ? formatCredits(wallet.account.reservedMicrocredits, 6) : "--"}</small>
+                        </div>
+                    </header>
+
+                    <div className="workspace-wallet-tabs" role="tablist" aria-label="积分中心">
+                        <button type="button" role="tab" aria-selected={tab === "topup"} onClick={() => setTab("topup")}><WalletCards />充值 / 兑换</button>
+                        <button type="button" role="tab" aria-selected={tab === "history"} onClick={() => setTab("history")}><History />积分消耗历史</button>
+                    </div>
+
+                    {tab === "topup" ? (
+                        <div className="workspace-wallet-content is-topup">
+                            <section className="workspace-wallet-section">
+                                <div className="workspace-wallet-section-heading"><div><h3>在线充值</h3><p>选择积分套餐和支付方式。</p></div><CreditCard /></div>
+                                {paymentsLoading ? <Skeleton active paragraph={{ rows: 4 }} /> : products.length && providers.length ? <>
+                                    <div className="workspace-wallet-products">
+                                        {products.map((product) => <button key={product.id} type="button" className={cn("workspace-wallet-product", selectedProductId === product.id && "is-selected")} aria-pressed={selectedProductId === product.id} onClick={() => setSelectedProductId(product.id)}>
+                                            <span>{product.name}</span><strong>{formatCredits(product.creditsMicrocredits, 6)} 积分</strong><small>¥ {(product.amountFen / 100).toFixed(2)}{product.description ? ` · ${product.description}` : ""}</small>{selectedProductId === product.id ? <Check /> : null}
+                                        </button>)}
+                                    </div>
+                                    <div className="workspace-wallet-provider-row">
+                                        <div className="workspace-wallet-providers" role="radiogroup" aria-label="支付方式">
+                                            {providers.map((provider) => <button key={provider.id} type="button" role="radio" aria-checked={selectedProviderId === provider.id} className={selectedProviderId === provider.id ? "is-selected" : ""} onClick={() => setSelectedProviderId(provider.id)}><CreditCard />{provider.name}</button>)}
+                                        </div>
+                                        <Button type="primary" size="large" loading={paymentCreating} disabled={!selectedProduct || !selectedProvider} onClick={() => void startPayment()}>立即充值</Button>
+                                    </div>
+                                </> : <div className="workspace-wallet-inline-state"><CircleAlert /><div><strong>在线充值暂不可用</strong><span>当前没有已启用的充值商品或支付渠道，请使用兑换码或联系管理员。</span></div></div>}
+                            </section>
+
+                            <section className="workspace-wallet-section is-redeem">
+                                <div className="workspace-wallet-section-heading"><div><h3>兑换码</h3><p>输入兑换码，将积分存入当前账户。</p></div><TicketCheck /></div>
+                                <div className="workspace-wallet-redeem-row">
+                                    <Input size="large" value={code} maxLength={32} placeholder="输入 32 位兑换码" onChange={(event) => setCode(event.target.value.replace(/\s/g, ""))} onPressEnter={() => void redeem()} />
+                                    <Button size="large" loading={redeeming} disabled={code.trim().length !== 32} onClick={() => void redeem()}>确认兑换</Button>
+                                </div>
+                            </section>
+                        </div>
+                    ) : (
+                        <div className="workspace-wallet-content is-history">
+                            <div className="workspace-wallet-history-toolbar"><div><h3>积分消耗历史</h3><p>包含充值、兑换、生成消费、冻结与退款。</p></div><Button type="text" icon={<RefreshCw />} loading={walletLoading} onClick={() => void reloadWallet(page)}>刷新</Button></div>
+                            <div className="workspace-wallet-history-scroll">
+                                {walletError ? <div className="workspace-wallet-inline-state is-error"><CircleAlert /><div><strong>记录加载失败</strong><span>{walletError}</span></div><Button onClick={() => void reloadWallet(page)}>重试</Button></div> : walletLoading && !wallet ? <Skeleton active paragraph={{ rows: 6 }} /> : wallet?.entries.length ? <div className="workspace-wallet-ledger">
+                                    {wallet.entries.map((entry) => <WalletLedgerRow key={entry.id} entry={entry} />)}
+                                </div> : <div className="workspace-wallet-empty"><History /><strong>还没有积分记录</strong><span>完成充值、兑换或生成任务后，记录会显示在这里。</span></div>}
+                            </div>
+                            <div className="workspace-wallet-pagination">
+                                <span>第 {page} / {totalPages} 页</span>
+                                <button type="button" disabled={page <= 1 || walletLoading} aria-label="上一页" onClick={() => { const next = page - 1; setPage(next); void reloadWallet(next); }}><ChevronLeft /></button>
+                                <button type="button" disabled={page >= totalPages || walletLoading} aria-label="下一页" onClick={() => { const next = page + 1; setPage(next); void reloadWallet(next); }}><ChevronRight /></button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </AppModal>
+
+            <AppModal open={paymentOpen} title={paymentOrder?.status === "credited" ? "充值完成" : paymentOrder?.checkout.mode === "qr_code" ? "扫码支付" : "确认支付结果"} centered width={430} onCancel={() => setPaymentOpen(false)} footer={paymentFooter(paymentOrder, paymentQuerying, () => setPaymentOpen(false), cancelPayment, refreshPaymentStatus, retryCheckout)}>
+                {paymentOrder ? <div className="workspace-wallet-payment">
+                    <span className="workspace-wallet-payment-icon"><CreditCard /></span>
+                    <strong>¥ {(paymentOrder.amountFen / 100).toFixed(2)}</strong>
+                    <p>{paymentOrder.productName} · {formatCredits(paymentOrder.creditsMicrocredits, 6)} 积分</p>
+                    {paymentOrder.status === "pending" && paymentOrder.checkout.mode === "qr_code" && paymentOrder.checkout.value ? <><QRCode value={paymentOrder.checkout.value} size={208} bordered={false} /><span>请使用支付应用扫码完成支付</span></> : null}
+                    <PaymentStatus order={paymentOrder} now={clock} />
+                </div> : null}
+            </AppModal>
+        </>
+    );
+}
+
+function WalletLedgerRow({ entry }: { entry: CreditLedgerEntry }) {
+    const positive = entry.amountMicrocredits > 0;
+    const title = entry.type === "consume" ? "模型调用" : entry.type === "refund" ? "消费退款" : entry.type === "payment_topup" ? "在线充值" : entry.type === "redeem" ? "兑换码充值" : entry.note || "积分调整";
+    return <article className="workspace-wallet-ledger-row"><span className={cn("workspace-wallet-ledger-icon", positive ? "is-income" : "is-consume")}>{positive ? <Coins /> : <CreditCard />}</span><div><strong>{title}</strong><span>{[entry.scene, entry.model, entry.note].filter(Boolean).join(" · ") || "积分账户变动"}</span></div><time>{new Date(entry.createdAt).toLocaleString("zh-CN", { hour12: false })}</time><b className={positive ? "is-income" : "is-consume"}>{positive ? "+" : ""}{formatCredits(entry.amountMicrocredits, 6)}</b></article>;
+}
+
+function PaymentStatus({ order, now }: { order: PaymentOrder; now: number }) {
+    if (order.status === "credited") return <div className="workspace-wallet-payment-status is-success">支付已确认，积分已经到账</div>;
+    if (order.status === "closed") return <div className="workspace-wallet-payment-status">订单已关闭，未产生积分充值</div>;
+    if (order.status === "create_failed") return <div className="workspace-wallet-payment-status is-error">支付入口创建失败，请重新生成支付入口。</div>;
+    const remaining = Math.max(0, Math.floor((new Date(order.expiresAt).getTime() - now) / 1000));
+    const hours = Math.floor(remaining / 3600);
+    const minutes = Math.floor((remaining % 3600) / 60);
+    const seconds = remaining % 60;
+    return <div className="workspace-wallet-payment-status">订单剩余 {String(hours).padStart(2, "0")}:{String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}，将自动确认支付结果</div>;
+}
+
+function paymentFooter(order: PaymentOrder | null, loading: boolean, close: () => void, cancel: () => Promise<void>, query: (id?: string, silent?: boolean) => Promise<void>, retry: () => Promise<void>) {
+    if (order?.status === "pending") return [<Button key="cancel" danger disabled={loading} onClick={() => void cancel()}>关闭订单</Button>, <Button key="query" type="primary" loading={loading} onClick={() => void query()}>我已完成支付</Button>];
+    if (order?.status === "create_failed") return [<Button key="close" onClick={close}>稍后处理</Button>, <Button key="retry" type="primary" loading={loading} onClick={() => void retry()}>重新生成支付入口</Button>];
+    return [<Button key="done" type="primary" onClick={close}>完成</Button>];
+}
diff --git a/web/src/components/ui/base/buttons/delete-button.tsx b/web/src/components/ui/base/buttons/delete-button.tsx
new file mode 100644
index 000000000..98f9890f9
--- /dev/null
+++ b/web/src/components/ui/base/buttons/delete-button.tsx
@@ -0,0 +1,37 @@
+import { Button, Popover } from "antd";
+import { Check, Trash2, X } from "lucide-react";
+import { useRef, useState } from "react";
+
+/** 原位确认只在真实请求完成后关闭；失败保留操作上下文。 */
+export function DeleteButton({ label, description, onConfirm }: { label: string; description: string; onConfirm: () => Promise<unknown> }) {
+    const [open, setOpen] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState("");
+    const busy = useRef(false);
+    const trigger = useRef<HTMLButtonElement>(null);
+    const close = () => { if (!busy.current) { setOpen(false); trigger.current?.focus(); } };
+    const confirm = async () => {
+        if (busy.current) return;
+        busy.current = true;
+        setPending(true);
+        setError("");
+        try { await onConfirm(); setOpen(false); }
+        catch (cause) { setError(cause instanceof Error ? cause.message : "删除失败，请重试"); }
+        finally { busy.current = false; setPending(false); }
+    };
+    return <span className="product-delete" onClick={(event) => { event.preventDefault(); event.stopPropagation(); }} onKeyDown={(event) => { if (event.key === "Escape") { event.stopPropagation(); close(); } }}>
+        <Popover trigger="click" placement="bottomRight" open={open} onOpenChange={(next) => { if (!busy.current) { setOpen(next); setError(""); } }} content={
+            <div className="product-delete-confirm" role="dialog" aria-label={label} aria-busy={pending}>
+                <strong>{label}？</strong>
+                <p>{description}</p>
+                {error ? <p role="alert" className="product-delete-error">{error}</p> : null}
+                <div className="product-delete-confirm-actions">
+                    <Button autoFocus icon={<X />} disabled={pending} onClick={close}>取消</Button>
+                    <Button danger type="primary" icon={<Check />} loading={pending} onClick={() => void confirm()}>确认删除</Button>
+                </div>
+            </div>
+        }>
+            <button ref={trigger} type="button" className="product-icon-button product-delete-trigger" aria-label={label} aria-expanded={open} aria-haspopup="dialog"><Trash2 /></button>
+        </Popover>
+    </span>;
+}
diff --git a/web/src/components/ui/product/media-placeholder.tsx b/web/src/components/ui/product/media-placeholder.tsx
new file mode 100644
index 000000000..1f468c8b7
--- /dev/null
+++ b/web/src/components/ui/product/media-placeholder.tsx
@@ -0,0 +1,9 @@
+import { ImageOff, Layers3 } from "lucide-react";
+
+export function MediaPlaceholder({ failed = false, label }: { failed?: boolean; label?: string }) {
+    const Icon = failed ? ImageOff : Layers3;
+    return <span className="product-media-placeholder" role={failed ? "img" : undefined} aria-label={failed ? "封面加载失败" : undefined}>
+        <span className="product-media-placeholder-icon"><Icon aria-hidden="true" /></span>
+        <span>{label || (failed ? "封面暂不可用" : "从一个想法开始")}</span>
+    </span>;
+}
diff --git a/web/src/components/ui/product/settings-row/settings-row.tsx b/web/src/components/ui/product/settings-row/settings-row.tsx
index 17c3213c3..06cf19565 100644
--- a/web/src/components/ui/product/settings-row/settings-row.tsx
+++ b/web/src/components/ui/product/settings-row/settings-row.tsx
@@ -20,7 +20,7 @@ export interface SettingsRowProps {
  */
 export function SettingsRow({ label, description, control, align = "center", className, controlClassName }: SettingsRowProps) {
     return (
-        <div className={cn("flex w-full items-center gap-4 border-b border-foreground/10 py-2.5 last:border-b-0", align === "top" && "items-start", className)}>
+        <div className={cn("flex w-full items-center gap-4 border-b border-foreground/10 py-3.5 last:border-b-0 last:pb-1", align === "top" && "items-start", className)}>
             <div className="min-w-0 flex-1">
                 <span className="block text-sm font-medium text-foreground">{label}</span>
                 {description ? <span className="mt-0.5 block text-xs leading-4 text-foreground/55">{description}</span> : null}
diff --git a/web/src/hooks/use-workspace-button-feedback.ts b/web/src/hooks/use-workspace-button-feedback.ts
new file mode 100644
index 000000000..c3ebe5767
--- /dev/null
+++ b/web/src/hooks/use-workspace-button-feedback.ts
@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+
+/** 一次点击的触觉式反馈，不表达请求成功，也不接管业务回调或画布事件。 */
+export function useWorkspaceButtonFeedback(enabled: boolean) {
+    useEffect(() => {
+        if (!enabled) return;
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const animations = new Set<Animation>();
+        const clicked = (event: MouseEvent) => {
+            if (reduced.matches || !(event.target instanceof Element)) return;
+            const button = event.target.closest<HTMLElement>('button, [role="button"]');
+            if (!button || button.matches(':disabled, [aria-disabled="true"], .ant-btn-loading') || !button.closest(".app-product-workspace, .ant-popover, .ant-dropdown, .ant-modal, .ant-drawer")) return;
+            if (typeof button.animate === "function") {
+                const press = button.animate([{ scale: ".98" }, { scale: "1" }], { duration: 180, easing: "cubic-bezier(.16,1,.3,1)" });
+                animations.add(press);
+                press.onfinish = press.oncancel = () => animations.delete(press);
+            }
+            const icon = button.querySelector<SVGElement>("svg:not(.animate-spin)");
+            if (!icon || typeof icon.animate !== "function" || getComputedStyle(icon).animationName !== "none") return;
+            const animation = icon.animate([
+                { translate: "0 0", scale: "1" },
+                { translate: "0 -2px", scale: ".88", offset: .35 },
+                { translate: "0 0", scale: "1" },
+            ], { duration: 360, easing: "cubic-bezier(.16,1,.3,1)" });
+            animations.add(animation);
+            animation.onfinish = animation.oncancel = () => animations.delete(animation);
+        };
+        document.addEventListener("click", clicked, true);
+        return () => { document.removeEventListener("click", clicked, true); animations.forEach((animation) => animation.cancel()); };
+    }, [enabled]);
+}
diff --git a/web/src/layouts/user-layout.tsx b/web/src/layouts/user-layout.tsx
index e501ae7f8..ed8c457d2 100644
--- a/web/src/layouts/user-layout.tsx
+++ b/web/src/layouts/user-layout.tsx
@@ -1,27 +1,39 @@
 import { useLayoutEffect, type ReactNode } from "react";
 import { useLocation } from "react-router";
+import { ConfigProvider } from "antd";
 
 import { AppWorkspaceShell } from "@/components/layout/app-top-nav";
 import { cn } from "@/lib/utils";
 import { isSpatialWorkbenchPath } from "@/lib/workspace-routes";
+import { getWorkspaceAntThemeConfig } from "@/lib/app-theme";
+import { useWorkspaceButtonFeedback } from "@/hooks/use-workspace-button-feedback";
+import "@/styles/workspace-product.css";
+
+const workspaceTheme = getWorkspaceAntThemeConfig();
 
 export default function UserLayout({ children }: { children: ReactNode }) {
     const { pathname } = useLocation();
     const spatialWorkbench = isSpatialWorkbenchPath(pathname);
+    const productWorkspace = !/^\/canvas\/[^/]+(?:\/|$)/.test(pathname);
+    useWorkspaceButtonFeedback(productWorkspace);
 
     useLayoutEffect(() => {
         // Ant Design 浮层挂载在 body，必须用路由级标记隔离用户工作台与画布编辑器、运营后台。
         document.body.classList.add("app-user-overlays");
         document.body.classList.toggle("app-spatial-overlays", spatialWorkbench);
+        document.body.classList.toggle("app-product-overlays", productWorkspace);
         return () => {
             document.body.classList.remove("app-user-overlays");
             document.body.classList.remove("app-spatial-overlays");
+            document.body.classList.remove("app-product-overlays");
         };
-    }, [spatialWorkbench]);
+    }, [spatialWorkbench, productWorkspace]);
 
     return (
-        <div className={cn("app-user-workspace h-dvh overflow-hidden text-foreground", spatialWorkbench && "app-spatial-workspace")}>
-            <AppWorkspaceShell>{children}</AppWorkspaceShell>
-        </div>
+        <ConfigProvider theme={productWorkspace ? workspaceTheme : undefined}>
+            <div className={cn("app-user-workspace h-dvh overflow-hidden text-foreground", spatialWorkbench && "app-spatial-workspace", productWorkspace && "app-product-workspace")}>
+                <AppWorkspaceShell>{children}</AppWorkspaceShell>
+            </div>
+        </ConfigProvider>
     );
 }
diff --git a/web/src/lib/app-theme.ts b/web/src/lib/app-theme.ts
index a61ca2312..dc52613fd 100644
--- a/web/src/lib/app-theme.ts
+++ b/web/src/lib/app-theme.ts
@@ -361,6 +361,34 @@ export function getAntThemeConfig(dark: boolean, skinID: unknown = "classic"): T
 /**
  * 管理后台使用更高密度的控件节奏；只在 AdminShell 内挂载，避免改变创作端的视觉契约。
  */
+/** 用户端与后台共享业务控件，但使用独立的产品尺寸和柔和表面。 */
+export function getWorkspaceAntThemeConfig(): ThemeConfig {
+    return {
+        token: {
+            borderRadius: 12, borderRadiusLG: 16, borderRadiusSM: 8,
+            controlHeight: 38, controlHeightSM: 30, controlHeightLG: 44,
+            motionDurationFast: "0.12s", motionDurationMid: "0.18s", motionDurationSlow: "0.36s",
+            motionEaseInOut: "cubic-bezier(0.16, 1, 0.3, 1)",
+            motionEaseOut: "cubic-bezier(0.16, 1, 0.3, 1)",
+        },
+        components: {
+            Button: {
+                borderRadius: 12, borderRadiusSM: 8, borderRadiusLG: 14, fontWeight: 550,
+                defaultBg: "var(--user-surface-muted)", defaultColor: "var(--user-ink)", defaultBorderColor: "transparent",
+                defaultHoverBg: "var(--user-surface-hover)", defaultHoverColor: "var(--user-ink)", defaultHoverBorderColor: "transparent",
+                defaultActiveBg: "var(--user-control-pressed)", defaultActiveColor: "var(--user-ink)", defaultActiveBorderColor: "transparent",
+                defaultShadow: "none", primaryShadow: "none", dangerShadow: "none",
+                paddingInline: 14, paddingInlineSM: 10,
+            },
+            Input: { borderRadius: 12, activeShadow: "0 0 0 2px var(--user-accent-soft)", paddingInline: 12 },
+            Select: { borderRadius: 12, optionSelectedBg: "var(--user-accent-soft)", optionSelectedColor: "var(--user-ink)", optionActiveBg: "var(--user-surface-muted)", optionPadding: "9px 12px" },
+            Dropdown: { borderRadiusLG: 16, controlItemBgHover: "var(--user-surface-muted)", paddingBlock: 6 },
+            Modal: { borderRadiusLG: 20 },
+            Popconfirm: { borderRadiusLG: 16 },
+        },
+    };
+}
+
 export function getAdminAntThemeConfig(dark: boolean, skinID: unknown = "classic"): ThemeConfig {
     const base = getAntThemeConfig(dark, skinID);
     const skin = getSkinAntOverrides(skinID, dark ? "dark" : "light");
diff --git a/web/src/pages/assets/index.tsx b/web/src/pages/assets/index.tsx
index ef8e563d4..25258b518 100644
--- a/web/src/pages/assets/index.tsx
+++ b/web/src/pages/assets/index.tsx
@@ -1,3 +1,5 @@
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
+import { DeleteButton } from "@/components/ui/base/buttons/delete-button";
 import { AlertTriangle, AudioLines, Box, CheckCheck, Clapperboard, Copy, Download, FileText, FileUp, FolderOpen, FolderPlus, Image as ImageIcon, Images, LayoutGrid, Link2, Maximize2, MoreHorizontal, PencilLine, Play, Plus, RotateCcw, Search, Trash2, Upload, ZoomIn, ZoomOut, type LucideIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -5,7 +7,7 @@ import { App, Button, Drawer, Dropdown, Form, Input, Modal, Popconfirm, Progress
 import type { MenuProps } from "antd";
 import { useNavigate } from "react-router";
 
-import { CollectionGrid, ListToolbar, PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
+import { CollectionGrid, PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceState } from "@/components/layout/workspace-state";
 import { AssetMediaPreview } from "@/components/asset-media-preview";
 import { AssetLibraryCard, AssetLibraryCardMedia } from "@/components/assets/asset-library-card";
@@ -170,7 +172,6 @@ export default function AssetsPage() {
     );
     const visibleAssetIds = useMemo(() => visibleAssets.map((asset) => asset.id), [visibleAssets]);
     const allFilteredSelected = visibleAssetIds.length > 0 && visibleAssetIds.every((id) => selectedIds.includes(id));
-    const canCreateAsset = page === 1 && viewMode === "library" && !keyword.trim() && kindFilter === "all" && categoryFilter === "all" && folderFilter === "all";
     const totalAssets = assetPageQuery.data?.total ?? filteredAssets.length;
     const kindCounts = useMemo(() => assetCountMap(kindOptions, assetPageQuery.data?.kindCounts, viewMode === "trash" ? trashAssets : activeAssets, (asset) => asset.kind), [activeAssets, assetPageQuery.data?.kindCounts, trashAssets, viewMode]);
     const categoryCounts = useMemo(() => assetCountMap(categoryOptions, assetPageQuery.data?.categoryCounts, viewMode === "trash" ? trashAssets : activeAssets, (asset) => asset.category || "other"), [activeAssets, assetPageQuery.data?.categoryCounts, trashAssets, viewMode]);
@@ -233,6 +234,7 @@ export default function AssetsPage() {
             message.success(`已删除分类「${folder.name}」，其中素材已移至未分类`);
         } catch (error) {
             message.error(error instanceof Error ? error.message : "素材分类删除失败");
+            throw error;
         }
     };
 
@@ -525,7 +527,7 @@ export default function AssetsPage() {
                     <PageHeader
                         title={viewMode === "trash" ? "素材库 / 回收站" : "素材库"}
                         description={viewMode === "trash" ? "已删除画布或手动归档的临时素材，可随时还原或彻底清理。" : "管理文本、图片、视频、音频和 3D 模型素材。"}
-                        meta={<span className="app-projects-header-meta assets-header-meta">{validAssets.length} 个素材</span>}
+                        meta={<span className="app-projects-header-meta assets-header-meta">{totalAssets} 个素材</span>}
                         actions={
                             <div className="assets-header-actions">
                                 <div className="assets-header-action-buttons">
@@ -558,26 +560,15 @@ export default function AssetsPage() {
                                         </>
                                     ) : (
                                         <>
-                                            <Button icon={<Plus className="size-3.5" />} onClick={openCreate}>
-                                                新增素材
-                                            </Button>
-                                            <Button icon={<Images className="size-3.5" />} onClick={() => setBatchUploadOpen(true)}>
-                                                批量上传图片
-                                            </Button>
-                                            <Button icon={<FolderOpen className="size-3.5" />} onClick={() => navigate("/plugins/eagle")}>
-                                                Eagle 素材库
-                                            </Button>
-                                            <Button aria-label="导出全部素材" title="导出全部素材" icon={<Download className="size-3.5" />} onClick={() => void exportAllAssets()} />
-                                            <Dropdown
-                                                trigger={["click"]}
-                                                menu={{
-                                                    items: [
-                                                        { key: "package", icon: <FileUp className="size-4" />, label: "导入素材包", onClick: () => assetInputRef.current?.click() },
-                                                        { key: "model", icon: <Upload className="size-4" />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() },
-                                                    ],
-                                                }}
-                                            >
-                                                <Button aria-label="导入素材" title="导入素材" icon={<FileUp className="size-3.5" />} />
+                                            <Button type="primary" icon={<Plus />} onClick={openCreate}>新增素材</Button>
+                                            <Button icon={<Images />} onClick={() => setBatchUploadOpen(true)}>上传图片</Button>
+                                            <Dropdown trigger={["click"]} menu={{ items: [
+                                                { key: "eagle", icon: <FolderOpen />, label: "Eagle 素材库", onClick: () => navigate("/plugins/eagle") },
+                                                { key: "package", icon: <FileUp />, label: "导入素材包", onClick: () => assetInputRef.current?.click() },
+                                                { key: "model", icon: <Upload />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() },
+                                                { key: "export", icon: <Download />, label: "导出全部素材", onClick: () => void exportAllAssets() },
+                                            ] }}>
+                                                <Button type="text" aria-label="更多素材操作" icon={<MoreHorizontal />} />
                                             </Dropdown>
                                         </>
                                     )}
@@ -586,9 +577,8 @@ export default function AssetsPage() {
                             </div>
                         }
                     />
-                    <ListToolbar
-                        className="library-toolbar"
-                        active={Boolean(keyword || kindFilter !== "all" || categoryFilter !== "all")}
+                    <CollectionToolbar
+                        active={Boolean(keyword || kindFilter !== "all" || categoryFilter !== "all" || folderFilter !== "all")}
                         onReset={() => {
                             setKeyword("");
                             setKindFilter("all");
@@ -608,28 +598,20 @@ export default function AssetsPage() {
                                 setKeyword(event.target.value);
                             }}
                             />
-                            <Select
-                                value={folderFilter}
-                                className="w-full sm:w-44"
-                                options={[{ label: "全部自定义分类", value: "all" }, { label: "未分类", value: "uncategorized" }, ...folders.map((folder) => ({ label: folder.name, value: folder.id }))]}
-                                onChange={(value) => {
-                                    setFolderFilter(value as AssetFolderFilter);
-                                    setPage(1);
-                                }}
-                            />
                             <Select
                                 value={gridDensity}
                                 className="w-full sm:w-32"
                                 suffixIcon={<LayoutGrid className="size-3.5" />}
-                                options={[{ label: "舒适 · 6 列", value: 6 }, { label: "标准 · 8 列", value: 8 }, { label: "紧凑 · 10 列", value: 10 }]}
+                                options={[{ label: "舒适", value: 6 }, { label: "标准", value: 8 }, { label: "紧凑", value: 10 }]}
                                 onChange={(value) => setGridDensity(value as AssetGridDensity)}
                             />
-                        </ListToolbar>
+                        </CollectionToolbar>
                 </div>
 
-                <div className="canvas-library-frame assets-library-frame">
-                    <div className="grid min-h-0 gap-4 lg:grid-cols-[176px_minmax(0,1fr)]">
-                        <aside className="thin-scrollbar flex gap-2 overflow-x-auto py-3 lg:sticky lg:top-0 lg:block lg:max-h-[calc(100vh-150px)] lg:overflow-y-auto lg:pr-3">
+                <div className="collection-content assets-collection-content">
+                    <div className="assets-collection-layout">
+                        <aside className="assets-collection-filters" aria-label="素材分类">
+                            <div className="assets-collection-filter-scroll">
                             <AssetFilterGroup
                                 title="素材类型"
                                 options={kindOptions}
@@ -651,15 +633,17 @@ export default function AssetsPage() {
                                     setCategoryFilter(value as AssetCategory | "all");
                                     setPage(1);
                                 }}
-                                className="lg:mt-5"
                             />
-                            <div className="mt-5">
-                                <div className="mb-1.5 flex items-center justify-between px-1 text-[var(--fs-tiny)] font-semibold uppercase tracking-[0.08em] text-foreground/38">
-                                    <span>我的分类</span>
+                            <section className="collection-filter-group assets-folder-filter">
+                                <div className="collection-folder-heading">
+                                    <span className="collection-filter-label">我的分类</span>
                                     <button type="button" className="assets-folder-add" title="新建分类" aria-label="新建分类" onClick={() => { setFolderName(""); setFolderEditor("new"); }}><FolderPlus className="size-3.5" /></button>
                                 </div>
-                                <div className="space-y-0.5">
-                                    <button type="button" aria-pressed={folderFilter === "uncategorized"} className={`assets-filter-item w-full ${folderFilter === "uncategorized" ? "is-active" : ""}`} onClick={() => { setFolderFilter("uncategorized"); setPage(1); }}>
+                                <div className="collection-folder-list">
+                                    <button type="button" aria-pressed={folderFilter === "all"} className={`assets-filter-item ${folderFilter === "all" ? "is-active" : ""}`} onClick={() => { setFolderFilter("all"); setPage(1); }}>
+                                        <span className="assets-filter-item-label">全部</span><span className="assets-filter-count">{activeAssets.length}</span>
+                                    </button>
+                                    <button type="button" aria-pressed={folderFilter === "uncategorized"} className={`assets-filter-item ${folderFilter === "uncategorized" ? "is-active" : ""}`} onClick={() => { setFolderFilter("uncategorized"); setPage(1); }}>
                                         <span className="assets-filter-item-label">未分类</span><span className="assets-filter-count">{folderCounts[""] ?? activeAssets.filter((asset) => !asset.folderId).length}</span>
                                     </button>
                                     {folders.map((folder) => (
@@ -667,15 +651,14 @@ export default function AssetsPage() {
                                             <button type="button" aria-pressed={folderFilter === folder.id} className={`assets-filter-item min-w-0 flex-1 ${folderFilter === folder.id ? "is-active" : ""}`} onClick={() => { setFolderFilter(folder.id); setPage(1); }}>
                                                 <span className="assets-filter-item-label min-w-0 truncate">{folder.name}</span><span className="assets-filter-count">{folderCounts[folder.id] ?? activeAssets.filter((asset) => asset.folderId === folder.id).length}</span>
                                             </button>
-                                            <Dropdown trigger={["click"]} menu={{ items: [{ key: "rename", icon: <PencilLine className="size-3.5" />, label: "重命名", onClick: () => { setFolderName(folder.name); setFolderEditor(folder); } }, { key: "delete", danger: true, icon: <Trash2 className="size-3.5" />, label: "删除分类", onClick: () => void removeFolder(folder) }] }}>
-                                                <button type="button" className="assets-folder-more" aria-label={`管理分类 ${folder.name}`} title="管理分类"><MoreHorizontal className="size-3.5" /></button>
-                                            </Dropdown>
+                                            <button type="button" className="product-icon-button" aria-label={`重命名分类 ${folder.name}`} onClick={() => { setFolderName(folder.name); setFolderEditor(folder); }}><PencilLine /></button>
+                                            <DeleteButton label={`删除分类 ${folder.name}`} description="分类删除后，其中的素材会移至未分类，素材文件会保留。" onConfirm={() => removeFolder(folder)} />
                                         </div>
                                     ))}
                                 </div>
+                            </section>
                             </div>
-                            <div className="mt-6 border-t border-border/40 pt-3">
-                                <div className="mb-1.5 px-1 text-[var(--fs-tiny)] font-semibold uppercase tracking-[0.08em] text-foreground/38">垃圾箱与归档</div>
+                            <div className="collection-trash-entry">
                                 <button
                                     type="button"
                                     aria-pressed={viewMode === "trash"}
@@ -737,15 +720,6 @@ export default function AssetsPage() {
                                         <WorkspaceState icon="assets" compact title="没有匹配的素材" description="调整关键词或左侧分类后再试。" />
                                     ) : (
                                         <CollectionGrid className="library-grid assets-library-grid" style={{ "--assets-grid-columns": gridDensity } as React.CSSProperties}>
-                                            {canCreateAsset ? (
-                                                <button type="button" className="library-create-card" onClick={openCreate}>
-                                                    <span className="library-create-cover">
-                                                        <Plus className="size-8" />
-                                                    </span>
-                                                    <span className="library-create-title">新增素材</span>
-                                                    <span className="library-create-meta">文本、图片、音视频或模型</span>
-                                                </button>
-                                            ) : null}
                                             {visibleAssets.map((asset) => (
                                                 <AssetCard
                                                     key={asset.id}
@@ -1086,12 +1060,12 @@ function AssetCard({
     return (
         <AssetLibraryCard selected={selected}>
             <AssetCover asset={asset} selected={selected} isTrash={isTrash} onSelect={onSelect} onOpen={onOpen} menuItems={menuItems} />
-            <button type="button" className="block w-full px-2.5 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--workspace-accent)]" onClick={onOpen}>
+            <button type="button" className="asset-collection-body block w-full px-2.5 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--workspace-accent)]" onClick={onOpen}>
                 <div className="flex min-w-0 items-center justify-between gap-2">
                     <h2 className="truncate text-[var(--fs-body)] font-semibold text-foreground" title={asset.title}>
                         {asset.title}
                     </h2>
-                    <span className="shrink-0 text-[var(--fs-tiny)] tabular-nums text-foreground/38">{formatAssetTime(asset.updatedAt)}</span>
+                    <span className="asset-collection-date shrink-0 tabular-nums">{formatAssetTime(asset.updatedAt)}</span>
                 </div>
                 {isTrash ? (
                     <div className="mt-1 flex items-center gap-1 text-[var(--fs-tiny)] font-medium text-amber-600 dark:text-amber-400" title={formatExpirationDate(asset.updatedAt, retentionDays)}>
@@ -1099,11 +1073,11 @@ function AssetCard({
                         <span>{formatExpirationHint(asset.updatedAt, retentionDays)}</span>
                     </div>
                 ) : (
-                    <div className="mt-1 truncate text-[var(--fs-label)] text-foreground/52" title={summary}>
+                    <div className="asset-collection-summary mt-1 truncate" title={summary}>
                         {summary}
                     </div>
                 )}
-                <div className="mt-1 flex min-w-0 items-center gap-1.5 text-[var(--fs-tiny)] text-foreground/38">
+                <div className="asset-collection-source mt-1 flex min-w-0 items-center gap-1.5">
                     <span className="truncate">{asset.source || "未标注来源"}</span>
                     <span aria-hidden="true">·</span>
                     <span className="truncate">{assetProjectLabel(asset)}</span>
@@ -1323,9 +1297,9 @@ function AssetFilterGroup({
     className?: string;
 }) {
     return (
-        <div className={className}>
-            <div className="mb-1.5 px-1 text-[var(--fs-tiny)] font-semibold uppercase tracking-[0.08em] text-foreground/38">{title}</div>
-            <div className="flex gap-1.5 lg:block lg:space-y-0.5">
+        <div className={`collection-filter-group ${className}`}>
+            <span className="collection-filter-label">{title}</span>
+            <div className="collection-filter-options">
                 {options.map((option) => {
                     const active = value === option.value;
                     return (
diff --git a/web/src/pages/canvas/canvas-project-selection-toolbar.tsx b/web/src/pages/canvas/canvas-project-selection-toolbar.tsx
index 2dcde3080..1847a6bd8 100644
--- a/web/src/pages/canvas/canvas-project-selection-toolbar.tsx
+++ b/web/src/pages/canvas/canvas-project-selection-toolbar.tsx
@@ -6,7 +6,7 @@ import { canvasThemes } from "@/lib/canvas-theme";
 import { canvasDockStyle } from "@/lib/canvas/canvas-aceternity-style";
 import { defaultToolbarPrefs, readToolbarPrefs, resolveToolbarEntries, type ToolContext, type ToolbarHandlers } from "@/lib/canvas/tool-registry";
 import type { CanvasAlignmentMode } from "@/lib/canvas/canvas-layout";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useCanvasThemeStore } from "@/stores/canvas/use-canvas-theme-store";
 
 type CanvasProjectSelectionToolbarProps = {
     anchorRef: RefObject<HTMLDivElement | null>;
@@ -23,7 +23,7 @@ type CanvasProjectSelectionToolbarProps = {
 };
 
 export function CanvasProjectSelectionToolbar({ anchorRef, containerRef, count, selectedVideoCount, mergingVideos, onAlign, onArrange, onCreateStoryboard, onCreateReferenceGroup, onBatchConnect, onMergeVideos }: CanvasProjectSelectionToolbarProps) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useCanvasThemeStore((state) => state.theme)];
 
     const handlers = {
         onAlign, onArrange, onCreateStoryboard, onCreateReferenceGroup, onBatchConnect, onMergeVideos,
diff --git a/web/src/pages/canvas/canvas-project-top-bar.tsx b/web/src/pages/canvas/canvas-project-top-bar.tsx
index fe711e60b..167f4545d 100644
--- a/web/src/pages/canvas/canvas-project-top-bar.tsx
+++ b/web/src/pages/canvas/canvas-project-top-bar.tsx
@@ -8,7 +8,7 @@ import { canvasDockStyle } from "@/lib/canvas/canvas-aceternity-style";
 import type { CanvasContextSummary } from "@/lib/canvas/canvas-context-summary";
 import type { CanvasShortDramaProgress } from "@/lib/canvas/canvas-short-drama";
 import { canvasThemes } from "@/lib/canvas-theme";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useCanvasThemeStore } from "@/stores/canvas/use-canvas-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import type { CanvasMediaPerformanceMode } from "@/types/canvas";
 import { CanvasShortcutsModal } from "./canvas-shortcuts-modal";
@@ -66,7 +66,7 @@ export function CanvasTopBar({
     onEnterFocusMode,
     shortDramaGuide,
 }: CanvasTopBarProps) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useCanvasThemeStore((state) => state.theme)];
     const dockStyle = canvasDockStyle(theme, theme.node.text);
     const user = useUserStore((state) => state.user);
     const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
@@ -226,12 +226,12 @@ export function CanvasTopBar({
                         </Dropdown>
                     </CanvasTopBarTooltip>
                     {user && creditsEnabled ? (
-                        <CanvasTopBarTooltip label="查看积分明细">
+                        <CanvasTopBarTooltip label="进入积分超市">
                             <Link
                                 to="/wallet"
                                 className="canvas-topbar-action inline-flex h-9 min-w-[5.5rem] items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-medium tabular-nums"
                                 style={{ color: theme.node.text }}
-                                aria-label="查看积分明细"
+                                aria-label="进入积分超市"
                             >
                                 {refreshing && availableMicrocredits === null ? <LoaderCircle className="size-3.5 animate-spin opacity-60" style={{ color: theme.accent.primary }} /> : <Coins className="size-3.5" style={{ color: theme.accent.primary }} />}
                                 <span>{availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 3 })}</span>
diff --git a/web/src/pages/canvas/index.tsx b/web/src/pages/canvas/index.tsx
index fdd836253..8cdfa0159 100644
--- a/web/src/pages/canvas/index.tsx
+++ b/web/src/pages/canvas/index.tsx
@@ -1,17 +1,17 @@
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { App, Button, Dropdown, Modal } from "antd";
+import { App, Button, Dropdown, Input, Modal } from "antd";
 import { Select } from "@/components/ui/base/select";
-import { ArrowDownAZ, Clock3, Download, FileUp, History, ListFilter, MoreHorizontal, Plus, Search, SlidersHorizontal, Trash2, X } from "lucide-react";
+import { ArrowDownAZ, Clock3, Download, FileUp, History, ListFilter, MoreHorizontal, Plus, Search, SlidersHorizontal, Trash2 } from "lucide-react";
 
 import { CollectionGrid, PageHeader, WorkspacePage } from "@/components/layout/workspace-page";
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
 import { WorkspaceLoadingState, WorkspaceState } from "@/components/layout/workspace-state";
 
 import { readZip } from "@/lib/zip";
 import { setMediaBlob } from "@/services/file-storage";
 import { setImageBlob } from "@/services/image-storage";
-import { CanvasCreateCard } from "@/components/canvas/canvas-project-card";
 import { CanvasFolderCard } from "@/components/canvas/canvas-folder-card";
 import { CanvasHistoryDrawer } from "@/components/canvas/canvas-history-drawer";
 import type { CanvasExportFile } from "@/types/canvas-export";
@@ -80,7 +80,7 @@ export default function CanvasPage() {
     const mode = searchParams.get("mode");
     const agentMode = mode === "new" || mode === "recent" || mode === "choose";
     const handoffMode = mode === "handoff";
-    const forwardedQuery = agentMode || handoffMode ? `?${searchParams.toString()}` : "";
+    const forwardedQuery = agentMode || handoffMode || searchParams.get("agent") === "1" ? `?${searchParams.toString()}` : "";
     const preloadProject = useCallback(() => {
         void loadCanvasProjectPage();
     }, []);
@@ -111,7 +111,6 @@ export default function CanvasPage() {
     const projectNames = useMemo(() => new Map((projectQuery.data?.projects || []).map(({ project }) => [project.id, project.name])), [projectQuery.data]);
     const visibleProjects = userId ? filteredProjects : filteredProjects.slice(0, loadedProjectCount);
     const hasMore = userId ? libraryQuery.hasNextPage : visibleProjects.length < filteredProjects.length;
-    const showCreateCard = !keyword.trim() && projectFilter === "all";
     const selectedProjects = projects.filter((project) => selectedIds.includes(project.id));
     const projectFilterLabel = projectFilter === "all" ? "全部画布" : projectFilter === "independent" ? "自由画布" : projectNames.get(projectFilter) || "项目画布";
     const sortLabel = sort === "name" ? "按名称" : sort === "nodes" ? "按节点" : "最近更新";
@@ -402,15 +401,15 @@ export default function CanvasPage() {
     if (hydrated && !libraryQuery.isError && (mode === "new" || mode === "recent" || mode === "handoff")) return <main className="flex h-full items-center justify-center bg-background text-sm text-stone-500">正在打开画布...</main>;
 
     return (
-        <WorkspacePage grid className="canvas-library-page">
+        <WorkspacePage className="studio-collection-page">
             <div className="studio-band">
                 <PageHeader
-                    title="画布"
+                    title="我的画布"
                     description="把镜头、素材和想法留在同一张画布里。"
                     meta={<span className="app-projects-header-meta">{totalProjects} 个</span>}
                     actions={
-                        <div className="canvas-library-header-actions">
-                            <Button className="canvas-library-header-action is-primary library-primary-action" type="primary" disabled={!hydrated} icon={<Plus className="size-3.5" />} onClick={createAndEnter}>
+                        <div className="collection-header-actions">
+                            <Button type="primary" disabled={!hydrated} icon={<Plus />} onClick={createAndEnter}>
                                 新建画布
                             </Button>
                             {projects.length ? (
@@ -423,100 +422,35 @@ export default function CanvasPage() {
                                     placement="bottomRight"
                                     trigger={["click"]}
                                 >
-                                    <Button className="canvas-library-header-action is-icon" aria-label="更多画布操作" title="更多操作" icon={<MoreHorizontal className="size-4" />} />
+                                    <Button type="text" aria-label="更多画布操作" title="更多操作" icon={<MoreHorizontal />} />
                                 </Dropdown>
                             ) : null}
-                            <Button className="canvas-library-header-action" disabled={!hydrated} icon={<FileUp className="size-3.5" />} onClick={() => inputRef.current?.click()}>
+                            <Button disabled={!hydrated} icon={<FileUp />} onClick={() => inputRef.current?.click()}>
                                 导入
                             </Button>
                         </div>
                     }
                 />
 
-                <section className="canvas-library-discovery" aria-label="画布浏览工具">
-                    <div className="canvas-library-search">
-                        <Search aria-hidden="true" />
-                        <input
-                            value={keyword}
-                            placeholder="搜索画布"
-                            aria-label="搜索画布"
-                            onChange={(event) => {
-                                setKeyword(event.target.value);
-                            }}
-                        />
-                        {keyword ? (
-                            <button
-                                type="button"
-                                aria-label="清除搜索"
-                                onClick={() => {
-                                    setKeyword("");
-                                }}
-                            >
-                                <X />
-                            </button>
-                        ) : null}
-                    </div>
-                    <div className="canvas-library-filters">
-                        <Dropdown
-                            trigger={["click"]}
-                            placement="bottomLeft"
-                            menu={{
-                                items: projectFilterItems,
-                                selectedKeys: [projectFilter],
-                                onClick: ({ key }) => {
-                                    setProjectFilter(String(key));
-                                },
-                            }}
-                        >
-                            <button type="button" className={`canvas-library-filter${projectFilter !== "all" ? " is-active" : ""}`} aria-label="按所属项目筛选">
-                                <SlidersHorizontal />
-                                <span>{projectFilterLabel}</span>
-                            </button>
-                        </Dropdown>
-                        <Dropdown
-                            trigger={["click"]}
-                            placement="bottomLeft"
-                            menu={{
-                                items: sortItems,
-                                selectedKeys: [sort],
-                                onClick: ({ key }) => {
-                                    setSort(key as typeof sort);
-                                },
-                            }}
-                        >
-                            <button type="button" className={`canvas-library-filter${sort !== "updated" ? " is-active" : ""}`} aria-label="画布排序">
-                                {sort === "updated" ? <Clock3 /> : sort === "name" ? <ArrowDownAZ /> : <ListFilter />}
-                                <span>{sortLabel}</span>
-                            </button>
-                        </Dropdown>
-                        <button type="button" className="canvas-library-filter flex items-center gap-1.5" onClick={() => setHistoryOpen(true)} aria-label="查看画布创建与变更历史时间线" title="查看画布创建与变更历史时间线">
-                            <History className="size-3.5 text-[var(--workspace-accent)]" />
-                            <span>历史</span>
-                        </button>
-                        {keyword || projectFilter !== "all" || sort !== "updated" ? (
-                            <button
-                                type="button"
-                                className="canvas-library-reset"
-                                onClick={() => {
-                                    setKeyword("");
-                                    setProjectFilter("all");
-                                    setSort("updated");
-                                }}
-                            >
-                                重置
-                            </button>
-                        ) : null}
-                    </div>
-                    <span className="canvas-library-count">
-                        <strong>{String(filteredProjects.length).padStart(2, "0")}</strong>
-                        <span>/ {String(totalProjects).padStart(2, "0")} 画布</span>
-                    </span>
-                </section>
+                <CollectionToolbar
+                    label="画布浏览工具"
+                    active={Boolean(keyword || projectFilter !== "all" || sort !== "updated")}
+                    onReset={() => { setKeyword(""); setProjectFilter("all"); setSort("updated"); }}
+                    trailing={<Button type="text" icon={<History />} onClick={() => setHistoryOpen(true)}>创作历史</Button>}
+                >
+                    <Input prefix={<Search />} value={keyword} allowClear placeholder="搜索画布" aria-label="搜索画布" onChange={(event) => setKeyword(event.target.value)} />
+                    <Dropdown trigger={["click"]} placement="bottomLeft" menu={{ items: projectFilterItems, selectedKeys: [projectFilter], onClick: ({ key }) => setProjectFilter(String(key)) }}>
+                        <Button icon={<SlidersHorizontal />} aria-label="按所属项目筛选">{projectFilterLabel}</Button>
+                    </Dropdown>
+                    <Dropdown trigger={["click"]} placement="bottomLeft" menu={{ items: sortItems, selectedKeys: [sort], onClick: ({ key }) => setSort(key as typeof sort) }}>
+                        <Button icon={sort === "updated" ? <Clock3 /> : sort === "name" ? <ArrowDownAZ /> : <ListFilter />} aria-label="画布排序">{sortLabel}</Button>
+                    </Dropdown>
+                </CollectionToolbar>
             </div>
 
-            <div className="canvas-library-frame">
+            <div className="collection-content">
                 {selectedIds.length ? (
-                    <div className="app-canvas-selection-toolbar mt-2 flex min-h-10 flex-wrap items-center gap-2 rounded-md border px-3 py-1.5 text-xs">
+                    <div className="collection-selection-bar">
                         <strong className="mr-auto font-medium">已选 {selectedIds.length} 个画布</strong>
                         <Button
                             size="small"
@@ -553,9 +487,8 @@ export default function CanvasPage() {
                     <div role="alert">画布列表读取失败<Button onClick={() => void libraryQuery.refetch()}>重试</Button></div>
                 ) : !hydrated || (userId && libraryQuery.isPending) ? (
                     <WorkspaceLoadingState label="正在恢复画布" detail="读取本地缓存与账号同步状态" />
-                ) : showCreateCard || visibleProjects.length ? (
-                    <CollectionGrid className="canvas-library-grid">
-                        {showCreateCard ? <CanvasCreateCard disabled={!hydrated} onClick={createAndEnter} /> : null}
+                ) : visibleProjects.length ? (
+                    <CollectionGrid className="canvas-collection-grid">
                         {visibleProjects.map((project) => (
                             <CanvasFolderCard
                                 key={project.id}
@@ -568,7 +501,7 @@ export default function CanvasPage() {
                         ))}
                     </CollectionGrid>
                 ) : (
-                    <WorkspaceState icon="canvas" title="没有匹配的画布" description="换一个画布名称或重置筛选条件。" />
+                    <WorkspaceState icon="canvas" title={keyword || projectFilter !== "all" ? "没有匹配的画布" : "让第一个想法落在画布上"} description={keyword || projectFilter !== "all" ? "换一个画布名称或重置筛选条件。" : "图片、分镜和灵感，都可以在这里自由组织。"} action={!keyword && projectFilter === "all" ? <Button type="primary" icon={<Plus />} disabled={!hydrated} onClick={createAndEnter}>新建画布</Button> : undefined} />
                 )}
                 {hydrated && visibleProjects.length ? (
                     <div ref={loadMoreRef} className="library-load-more" aria-live="polite">
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 7ea9c7b80..e1e262fdf 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -24,7 +24,7 @@ import { refreshCanvasCharacterReferenceNodes } from "@/lib/canvas/canvas-charac
 import { useAssetStore } from "@/stores/use-asset-store";
 import { flushCanvasStorePersistence } from "@/stores/canvas/use-canvas-store";
 import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useCanvasThemeStore, useCanvasThemeScope } from "@/stores/canvas/use-canvas-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import { App, Button } from "antd";
 import { ArrowLeftRight } from "lucide-react";
@@ -227,6 +227,7 @@ function visibleGenerationBatch(node: CanvasNodeData) {
 }
 
 export default function CanvasPage() {
+    useCanvasThemeScope();
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
@@ -257,8 +258,8 @@ function InfiniteCanvasPage() {
     const assets = useAssetStore((state) => state.assets);
     const assetsHydrated = useAssetStore((state) => state.hydrated);
     const cleanupAssetImages = useAssetStore((state) => state.cleanupImages);
-    const colorTheme = useThemeStore((state) => state.theme);
-    const setTheme = useThemeStore((state) => state.setTheme);
+    const colorTheme = useCanvasThemeStore((state) => state.theme);
+    const setTheme = useCanvasThemeStore((state) => state.setTheme);
     const theme = canvasThemes[colorTheme];
     const defaultDrawingEngine = useUserStore((state) => state.drawingEngine.defaultEngine);
     const shortDramaEnabled = useUserStore((state) => state.features.shortDramaEnabled);
@@ -570,6 +571,14 @@ function InfiniteCanvasPage() {
         setSearchParams(next, { replace: true });
     }, [projectLoaded, chatSessions, searchParams, setSearchParams, openAgent, message]);
 
+    useEffect(() => {
+        if (!projectLoaded || searchParams.get("agent") !== "1") return;
+        openAgent();
+        const next = new URLSearchParams(searchParams);
+        next.delete("agent");
+        setSearchParams(next, { replace: true });
+    }, [projectLoaded, searchParams, setSearchParams, openAgent]);
+
     // 沉浸专注进入时收起智能体与小地图、重置 Dock 唤出态；仅响应「进入」瞬间，避免关闭专注内主动唤出的面板。
     const prevFocusModeRef = useRef(focusMode);
     useEffect(() => {
diff --git a/web/src/pages/canvas/shared.tsx b/web/src/pages/canvas/shared.tsx
index dd464597c..d88ac716d 100644
--- a/web/src/pages/canvas/shared.tsx
+++ b/web/src/pages/canvas/shared.tsx
@@ -20,16 +20,17 @@ import { FOLDER_COLLAPSED_HEIGHT, FOLDER_COLLAPSED_WIDTH, isCanvasFolderNode, is
 import { ensureMediaNodeMinimumSize } from "@/lib/canvas/canvas-node-size";
 import { getContextResourceNodes } from "@/lib/canvas/canvas-resource-references";
 import { getPublicCanvasShare } from "@/services/api/canvas-share";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useCanvasThemeStore, useCanvasThemeScope } from "@/stores/canvas/use-canvas-theme-store";
 import { CanvasNodeType, type CanvasNodeData, type Position, type ViewportTransform } from "@/types/canvas";
 
 type ContextMenu = { x: number; y: number; world: Position; nodeId?: string };
 type DragState = { primaryId: string; nodeIds: string[]; startX: number; startY: number; origins: Map<string, Position>; moved: boolean };
 
 export default function SharedCanvasPage() {
+    useCanvasThemeScope();
     const { token = "" } = useParams();
     const { message } = App.useApp();
-    const colorTheme = useThemeStore((state) => state.theme);
+    const colorTheme = useCanvasThemeStore((state) => state.theme);
     const theme = canvasThemes[colorTheme];
     const containerRef = useRef<HTMLDivElement>(null);
     const viewportRef = useRef<ViewportTransform>({ x: 0, y: 0, k: 1 });
@@ -79,10 +80,10 @@ export default function SharedCanvasPage() {
 
     useEffect(() => {
         let active = true;
-        const themeBeforeShare = useThemeStore.getState().theme;
+        const themeBeforeShare = useCanvasThemeStore.getState().theme;
         let appliedShareTheme: typeof themeBeforeShare | null = null;
         let themeChangedAfterApply = false;
-        const unsubscribeTheme = useThemeStore.subscribe((state, previous) => {
+        const unsubscribeTheme = useCanvasThemeStore.subscribe((state, previous) => {
             if (appliedShareTheme && state.theme !== previous.theme && state.theme !== appliedShareTheme) themeChangedAfterApply = true;
         });
         setLoading(true);
@@ -94,7 +95,7 @@ export default function SharedCanvasPage() {
             const nextAppearance = project.appearance ? normalizeCanvasAppearance(project.appearance, themeBeforeShare) : canvasAppearanceForTheme(themeBeforeShare);
             setAppearance(nextAppearance);
             appliedShareTheme = canvasAppearanceBaseTheme(nextAppearance, themeBeforeShare);
-            useThemeStore.getState().setTheme(appliedShareTheme);
+            useCanvasThemeStore.getState().setTheme(appliedShareTheme);
             setBackgroundMode(project.backgroundMode || DEFAULT_CANVAS_BACKGROUND_MODE);
             const initial = project.viewport || { x: 0, y: 0, k: 1 };
             viewportRef.current = initial;
@@ -107,8 +108,8 @@ export default function SharedCanvasPage() {
         return () => {
             active = false;
             unsubscribeTheme();
-            if (appliedShareTheme && !themeChangedAfterApply && useThemeStore.getState().theme === appliedShareTheme) {
-                useThemeStore.getState().setTheme(themeBeforeShare);
+            if (appliedShareTheme && !themeChangedAfterApply && useCanvasThemeStore.getState().theme === appliedShareTheme) {
+                useCanvasThemeStore.getState().setTheme(themeBeforeShare);
             }
         };
     }, [token]);
@@ -293,7 +294,7 @@ export default function SharedCanvasPage() {
 }
 
 function SharedContextMenu({ menu, onAdd, onInfo, onUnauthorized }: { menu: ContextMenu; onAdd: (type: CanvasNodeType) => void; onInfo: () => void; onUnauthorized: () => void }) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useCanvasThemeStore((state) => state.theme)];
     return <div data-canvas-no-zoom className="absolute z-[var(--z-modal)] min-w-48 rounded-lg border p-1.5 shadow-xl" style={{ left: menu.x, top: menu.y, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
         {menu.nodeId ? <><MenuButton icon={<Eye />} label="查看节点信息" onClick={onInfo} /><MenuButton icon={<LockKeyhole />} label="编辑或生成" onClick={onUnauthorized} /></> : <>
             <div className="px-2 py-1.5 text-[var(--fs-label)]" style={{ color: theme.node.muted }}>添加临时节点</div>
@@ -310,7 +311,7 @@ function MenuButton({ icon, label, onClick }: { icon: ReactNode; label: string;
 }
 
 function SharedConfigNode({ node, onUnauthorized }: { node: CanvasNodeData; onUnauthorized: () => void }) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useCanvasThemeStore((state) => state.theme)];
     return <div className="flex h-full w-full flex-col overflow-hidden rounded-[var(--panel-radius)]">
         <div className="flex h-10 shrink-0 items-center gap-2 border-b px-4" style={{ background: theme.node.panel, borderColor: theme.node.stroke }}><ImageIcon className="size-4" /><span className="min-w-0 flex-1 truncate text-sm font-semibold">{node.title}</span></div>
         <div className="min-h-0 flex-1 whitespace-pre-wrap break-words p-4 text-sm leading-6" style={{ color: theme.node.muted }}>{node.metadata?.composerContent || node.metadata?.prompt || "未填写提示词"}</div>
@@ -319,7 +320,7 @@ function SharedConfigNode({ node, onUnauthorized }: { node: CanvasNodeData; onUn
 }
 
 function SharedScriptNode({ node, onUnauthorized }: { node: CanvasNodeData; onUnauthorized: () => void }) {
-    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const theme = canvasThemes[useCanvasThemeStore((state) => state.theme)];
     const rows = node.metadata?.storyboard?.rows || [];
     return <div className="flex h-full w-full flex-col overflow-hidden rounded-[var(--panel-radius)]">
         <div className="flex h-10 shrink-0 items-center gap-2 border-b px-4" style={{ background: theme.node.panel, borderColor: theme.node.stroke }}><Clapperboard className="size-4" /><span className="min-w-0 flex-1 truncate text-sm font-semibold">{node.title}</span><span className="text-xs" style={{ color: theme.node.muted }}>{rows.length} 镜</span><button type="button" className="grid size-7 place-items-center rounded hover:bg-black/5 dark:hover:bg-white/10" onMouseDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onUnauthorized(); }} aria-label="一键创建视频节点"><Video className="size-3.5" /></button></div>
diff --git a/web/src/pages/canvas/use-canvas-project-lifecycle.ts b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
index 2071a4029..d443f86d0 100644
--- a/web/src/pages/canvas/use-canvas-project-lifecycle.ts
+++ b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
@@ -11,7 +11,7 @@ import { hydrateAssistantImages, resetInterruptedGeneration } from "@/lib/canvas
 import { listAddedSkills, type Skill } from "@/services/api/skills";
 import { createCanvasProjectWithRemoteSync, deleteCanvasProjectsWithRemoteSync, loadCanvasProjectForEditing, localSavedRemotePendingMessage, saveRemoteUserDataNow, subscribeAgentCanvasRefresh } from "@/services/user-data-sync";
 import { flushCanvasStorePersistence, useCanvasStore, type CanvasProject } from "@/stores/canvas/use-canvas-store";
-import { useThemeStore } from "@/stores/use-theme-store";
+import { useCanvasThemeStore } from "@/stores/canvas/use-canvas-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
 import type { CanvasAssistantSession, CanvasConnection, CanvasNodeData, ViewportTransform } from "@/types/canvas";
 import type { CanvasHistorySnapshot } from "./use-canvas-history";
@@ -94,7 +94,7 @@ export function useCanvasProjectLifecycle({
         setLoadError("");
         const applyRestoredProject = (targetProject: CanvasProject) => {
             if (cancelled) return;
-            const fallbackTheme = useThemeStore.getState().theme;
+            const fallbackTheme = useCanvasThemeStore.getState().theme;
             const restoredAppearance = targetProject.appearance
                 ? normalizeCanvasAppearance(targetProject.appearance, fallbackTheme)
                 : canvasAppearanceForTheme(fallbackTheme);
@@ -119,7 +119,7 @@ export function useCanvasProjectLifecycle({
             setChatSessions(snapshot.chatSessions);
             setActiveChatId(snapshot.activeChatId);
             setCanvasAppearance(snapshot.canvasAppearance);
-            useThemeStore.getState().setTheme(canvasAppearanceBaseTheme(snapshot.canvasAppearance, fallbackTheme));
+            useCanvasThemeStore.getState().setTheme(canvasAppearanceBaseTheme(snapshot.canvasAppearance, fallbackTheme));
             setBackgroundMode(snapshot.backgroundMode);
             setShowImageInfo(snapshot.showImageInfo);
             setViewport(targetProject.viewport);
diff --git a/web/src/pages/plugins/index.tsx b/web/src/pages/plugins/index.tsx
index 28fe6391c..80603a2ff 100644
--- a/web/src/pages/plugins/index.tsx
+++ b/web/src/pages/plugins/index.tsx
@@ -1,3 +1,4 @@
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
 import { App, Button, Input, Modal, Select, Typography } from "antd";
 import { Switch } from "@/components/ui/base/switch";
 import { AudioLines, CalendarDays, CheckCircle2, Clock3, CreditCard, ExternalLink, Film, FolderOpen, Image as ImageIcon, MessageSquareText, PlugZap, RefreshCw, Search, Settings2, ShieldCheck, SlidersHorizontal } from "lucide-react";
@@ -5,6 +6,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 
 import { EmptyState } from "@/components/ui/product/empty-state";
+import { PageHeader } from "@/components/layout/workspace-page";
 import { listRegisteredPlugins } from "@/lib/plugins/plugin-registry";
 import "@/lib/plugins/builtin";
 import { EAGLE_PLUGIN_ID } from "@/lib/plugins/builtin/eagle";
@@ -250,9 +252,7 @@ export default function PluginsPage() {
                 <div className="plugins-page-layout">
                     <aside className="plugins-sidebar" aria-label="插件分类">
                         <div className="plugins-sidebar-heading">
-                            <span className="plugins-sidebar-kicker">PLUGIN CENTER</span>
-                            <h1>插件中心</h1>
-                            <p>统一管理 provider、工作流、画布节点和其他扩展能力。</p>
+                            <PageHeader title="插件中心" description="连接模型、素材与工作流，拓展你的创作工具。" />
                         </div>
                         <nav className="plugins-sidebar-nav">
                             <button type="button" className={`plugins-sidebar-item${categoryFilter === "all" ? " is-active" : ""}`} aria-current={categoryFilter === "all" ? "page" : undefined} onClick={() => selectCategory("all")}>
@@ -290,7 +290,16 @@ export default function PluginsPage() {
                         </nav>
                     </aside>
                     <div className="plugins-page-content">
-                        <div className="plugins-toolbar" aria-label="插件筛选">
+                        <CollectionToolbar label="插件筛选" trailing={<div className="plugins-toolbar-actions">
+                                <Button icon={<RefreshCw className="size-4" />} loading={backendPluginsLoading} onClick={() => void reloadBackendPlugins()}>
+                                    刷新插件
+                                </Button>
+                                {user?.role === "admin" ? (
+                                    <Button type="primary" onClick={() => navigate("/admin/plugins")}>
+                                        管理员插件管理
+                                    </Button>
+                                ) : null}
+                            </div>}>
                             <Input
                                 className="plugins-search"
                                 prefix={<Search className="size-4 text-foreground/38" aria-hidden="true" />}
@@ -320,20 +329,7 @@ export default function PluginsPage() {
                                 onChange={(value) => setTrustFilter(value as "all" | "trusted")}
                                 aria-label="按来源筛选"
                             />
-                            <span className="plugins-filter-icon" aria-hidden="true">
-                                <SlidersHorizontal className="size-4" />
-                            </span>
-                            <div className="plugins-toolbar-actions">
-                                <Button icon={<RefreshCw className="size-4" />} loading={backendPluginsLoading} onClick={() => void reloadBackendPlugins()}>
-                                    刷新插件
-                                </Button>
-                                {user?.role === "admin" ? (
-                                    <Button type="primary" onClick={() => navigate("/admin/plugins")}>
-                                        管理员插件管理
-                                    </Button>
-                                ) : null}
-                            </div>
-                        </div>
+                        </CollectionToolbar>
 
                         {filteredPlugins.length ? (
                             <div className="plugins-sections">
@@ -348,6 +344,7 @@ export default function PluginsPage() {
                                                 sectionRefs.current[section.key] = element;
                                             }}
                                             className="plugin-section"
+                                            data-category={section.key === "image" ? "creative" : section.key === "video" ? "drama" : section.key === "audio" ? "social" : section.key === "payment" ? "ecommerce" : undefined}
                                         >
                                             <header className="plugin-section-heading">
                                                 <span className="plugin-section-icon">
@@ -369,7 +366,7 @@ export default function PluginsPage() {
                                                     const sourceLabel = pluginSourceLabel(plugin, state);
                                                     const canConfigure = canConfigurePlugin(plugin);
                                                     return (
-                                                        <section key={plugin.manifest.id} className={`plugin-card library-card-surface${trusted ? " is-trusted" : ""}`}>
+                                                        <section key={plugin.manifest.id} className={`product-collection-card plugin-card library-card-surface${trusted ? " is-trusted" : ""}`}>
                                                             <button
                                                                 type="button"
                                                                 className="plugin-card-main"
@@ -383,7 +380,7 @@ export default function PluginsPage() {
                                                             >
                                                                 <div className="plugin-card-heading">
                                                                     <span className={`plugin-icon-tile${trusted ? " is-trusted" : ""}`} aria-hidden="true">
-                                                                        <PlugZap className="size-5" />
+                                                                        <SectionIcon className="size-5" />
                                                                     </span>
                                                                     <div className="min-w-0 flex-1">
                                                                         <div className="plugin-card-title-row">
diff --git a/web/src/pages/plugins/plugins.css b/web/src/pages/plugins/plugins.css
index f765f6019..e592bc5b8 100644
--- a/web/src/pages/plugins/plugins.css
+++ b/web/src/pages/plugins/plugins.css
@@ -1,5 +1,6 @@
 .plugins-page {
-    --plugins-card-radius: var(--r-md);
+    --plugins-card-radius: var(--user-radius-card);
+    background: var(--user-page-bg);
 }
 
 .plugin-trust-label {
@@ -14,29 +15,28 @@
     width: auto;
     min-width: 0;
     margin: 0;
-    padding: var(--space-5) var(--space-6) var(--space-8);
+    padding: 0 0 var(--space-8);
 }
 
 .plugins-page-layout {
     display: grid;
-    width: 100%;
+    width: min(var(--product-content-max), calc(100% - 64px));
     min-height: 100%;
-    margin: 0;
-    grid-template-columns: 208px minmax(0, 1fr);
+    margin: 24px auto 0;
+    grid-template-columns: minmax(0, 1fr);
     align-items: start;
 }
 
 .plugins-sidebar {
-    position: sticky;
-    top: 0;
+    position: static;
     min-width: 0;
-    min-height: calc(100vh - 72px);
-    border-right: 1px solid var(--workspace-border);
-    padding: var(--space-6) var(--space-3) var(--space-8) var(--space-5);
+    min-height: 0;
+    padding: 0 0 var(--space-4);
 }
 
 .plugins-sidebar-heading {
-    padding: 0 var(--space-2) var(--space-4);
+    padding: 0;
+    background: transparent;
 }
 
 .plugins-sidebar-kicker {
@@ -63,13 +63,16 @@
 }
 
 .plugins-sidebar-nav {
-    display: grid;
+    display: flex;
+    overflow-x: auto;
     gap: var(--space-1);
 }
 
 .plugins-sidebar-item {
     display: flex;
-    width: 100%;
+    width: auto;
+    flex-shrink: 0;
+    white-space: nowrap;
     min-height: 36px;
     align-items: center;
     justify-content: space-between;
@@ -100,9 +103,10 @@
 }
 
 .plugins-sidebar-item.is-active {
-    border-color: color-mix(in srgb, var(--foreground) 11%, transparent);
-    background: color-mix(in srgb, var(--foreground) 7%, transparent);
-    color: var(--foreground);
+    border-color: transparent;
+    border-radius: var(--user-radius-control);
+    background: var(--user-surface-muted);
+    color: var(--user-ink);
     font-weight: 600;
     box-shadow: none;
 }
@@ -178,7 +182,7 @@
 .plugins-sections {
     display: grid;
     gap: var(--space-8);
-    margin-top: var(--space-8);
+    margin-top: var(--space-5);
 }
 
 .plugin-section {
@@ -192,7 +196,7 @@
     align-items: center;
     gap: var(--space-3);
     padding-bottom: var(--space-3);
-    border-bottom: 1px solid var(--workspace-border);
+    border-bottom: 0;
 }
 
 .plugin-section-icon {
@@ -201,10 +205,10 @@
     height: 34px;
     flex: 0 0 auto;
     place-items: center;
-    border: 1px solid var(--workspace-border);
+    border: 0;
     border-radius: var(--r-md);
-    background: color-mix(in srgb, var(--foreground) 5%, transparent);
-    color: color-mix(in srgb, var(--foreground) 68%, transparent);
+    background: color-mix(in srgb, var(--category-accent, var(--user-ink-muted)) 12%, var(--user-surface));
+    color: var(--category-accent, var(--user-ink-muted));
 }
 
 .plugin-section-heading > div {
@@ -249,10 +253,12 @@
 .plugin-card {
     display: flex;
     min-width: 0;
-    min-height: 232px;
+    min-height: 214px;
     flex-direction: column;
     padding: var(--space-3);
     border-radius: var(--plugins-card-radius);
+    border: 1px solid var(--user-border);
+    background: var(--user-surface);
     transition: background-color var(--motion-state) ease-out;
 }
 
@@ -430,7 +436,7 @@
     gap: var(--space-2);
     margin-top: var(--space-3);
     padding-top: var(--space-2);
-    border-top: 1px solid color-mix(in srgb, var(--workspace-border) 72%, transparent);
+    border-top: 0;
 }
 
 .plugin-card-actions .settings-channel-status {
@@ -835,8 +841,7 @@
         position: static;
         min-height: 0;
         border-right: 0;
-        border-bottom: 1px solid var(--workspace-border);
-        padding: var(--space-4) var(--space-4) 0;
+        padding: 0 0 var(--space-4);
     }
 
     .plugins-sidebar-heading {
@@ -895,8 +900,9 @@
 }
 
 @media (max-width: 640px) {
+    .plugins-page-layout { width: calc(100% - 24px); }
     .plugins-page-content {
-        padding-inline: var(--space-4);
+        padding-inline: 0;
     }
 
     .plugins-sidebar-heading {
diff --git a/web/src/pages/projects/detail.tsx b/web/src/pages/projects/detail.tsx
index 29158689a..55761555f 100644
--- a/web/src/pages/projects/detail.tsx
+++ b/web/src/pages/projects/detail.tsx
@@ -1,14 +1,12 @@
 import { lazy, Suspense } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Alert, App } from "antd";
-import { Tooltip } from "@/components/ui/base/tooltip";
-import { ArrowLeft, BookOpenText, Clapperboard, Images, LayoutDashboard, LayoutGrid, Plus, Scissors, Settings2, type LucideIcon } from "lucide-react";
+import { ArrowLeft, Plus } from "lucide-react";
 import { Link, Navigate, useNavigate, useParams } from "react-router";
 
 import { getProjectCore, getProjectOverview, getProjectUnitWorkspace, linkCanvasUnit, listProjectUnits } from "@/services/api/projects";
 import { WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceLoadingState } from "@/components/layout/workspace-state";
-import { useWorkspaceTopBarExtension } from "@/components/layout/workspace-top-bar-extension";
 import type { ProjectDetail } from "@/services/api/projects";
 
 import { WorkflowChapterNavigator } from "./detail/workflow-chapter-navigator";
@@ -23,14 +21,14 @@ const ProjectEditorView = lazy(() => import("./detail/editor"));
 
 type DetailView = "overview" | "chapters" | "workflow" | "canvases" | "editor" | "assets" | "settings";
 
-const views: Array<{ key: DetailView; label: string; icon: LucideIcon }> = [
-    { key: "overview", label: "制作概览", icon: LayoutDashboard },
-    { key: "chapters", label: "剧情章节", icon: BookOpenText },
-    { key: "workflow", label: "分镜制作", icon: Clapperboard },
-    { key: "canvases", label: "项目画布", icon: LayoutGrid },
-    { key: "editor", label: "剪辑成片", icon: Scissors },
-    { key: "assets", label: "角色与资产", icon: Images },
-    { key: "settings", label: "项目设置", icon: Settings2 },
+const views: Array<{ key: DetailView; label: string }> = [
+    { key: "overview", label: "制作概览" },
+    { key: "chapters", label: "剧情章节" },
+    { key: "workflow", label: "分镜制作" },
+    { key: "canvases", label: "项目画布" },
+    { key: "editor", label: "剪辑成片" },
+    { key: "assets", label: "角色与资产" },
+    { key: "settings", label: "项目设置" },
 ];
 
 export default function ProjectDetailPage() {
@@ -115,18 +113,6 @@ export default function ProjectDetailPage() {
     };
     const chapterHref = detail ? projectChapterHref(detail.units, projectId, chapterId) : `/projects/${projectId}/chapters`;
     const workflowHref = detail ? projectWorkflowHref(detail.units, projectId, unitId, stage) : `/projects/${projectId}/workflow`;
-    useWorkspaceTopBarExtension(detail ? (
-        <ProjectWorkspaceTopBar
-            detail={detail}
-            projectId={projectId}
-            activeView={activeView}
-            unitId={unitId}
-            stage={stage}
-            chapterHref={chapterHref}
-            workflowHref={workflowHref}
-            onCreateCanvas={createCanvas}
-        />
-    ) : null);
     if (coreQuery.isLoading || unitsQuery.isLoading) return <WorkspacePage><WorkspaceLoadingState label="正在打开项目工作台" detail="读取项目与章节索引" /></WorkspacePage>;
     if (coreQuery.isError || unitsQuery.isError || !detail) return <WorkspacePage><WorkspaceErrorState title="项目不可用" description="项目不存在、已被删除，或当前账号没有访问权限。" actionLabel="返回项目中心" onRetry={() => navigate("/projects")} /></WorkspacePage>;
     if (!chapterId && !unitId && (!view || !views.some((item) => item.key === view))) return <Navigate to={`/projects/${projectId}/overview`} replace />;
@@ -136,6 +122,16 @@ export default function ProjectDetailPage() {
     return (
         <WorkspacePage className="project-workbench-page !overflow-hidden" fluid>
             <div className="flex h-full min-h-0 flex-col">
+                <ProjectWorkspaceHeader
+                    detail={detail}
+                    projectId={projectId}
+                    activeView={activeView}
+                    unitId={unitId}
+                    stage={stage}
+                    chapterHref={chapterHref}
+                    workflowHref={workflowHref}
+                    onCreateCanvas={createCanvas}
+                />
                 {detail.project.status === "archived" ? <Alert type="warning" showIcon banner message="项目已归档，恢复后才能创建画布和生成任务" className="!border-x-0 !border-t-0" /> : null}
                 <main className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
                     <div className={activeView === "chapters" || activeView === "workflow" || activeView === "editor" ? "min-h-0 flex-1" : "thin-scrollbar min-h-0 flex-1 overflow-y-auto px-3 py-5 sm:px-5 lg:px-8 lg:py-7"}>
@@ -157,43 +153,48 @@ export default function ProjectDetailPage() {
     );
 }
 
-function ProjectWorkspaceTopBar({ detail, projectId, activeView, unitId, stage, chapterHref, workflowHref, onCreateCanvas }: { detail: ProjectDetail; projectId: string; activeView: DetailView; unitId?: string; stage?: string; chapterHref: string; workflowHref: string; onCreateCanvas: () => void }) {
-    const navigate = useNavigate();
+function ProjectWorkspaceHeader({ detail, projectId, activeView, unitId, stage, chapterHref, workflowHref, onCreateCanvas }: { detail: ProjectDetail; projectId: string; activeView: DetailView; unitId?: string; stage?: string; chapterHref: string; workflowHref: string; onCreateCanvas: () => void }) {
+    const archived = detail.project.status === "archived";
     const createCanvasLabel = activeView === "chapters" && detail.units.length ? "新建当前章节画布" : "新建项目画布";
     return (
-        <div className="project-workspace-topbar">
-            <button type="button" onClick={() => navigate("/projects")} className="project-workspace-back" aria-label="返回项目" title="返回项目"><ArrowLeft /></button>
+        <header className="project-workspace-header">
             <div className="project-workspace-identity">
-                <h1 title={detail.project.name}>{detail.project.name}</h1>
-                <span className={`project-workspace-status-dot ${detail.project.status === "archived" ? "is-archived" : ""}`} />
-                <span className="project-workspace-status-label">{detail.project.status === "archived" ? "已归档" : "进行中"}</span>
+                <Link to="/projects" className="project-workspace-back" aria-label="返回项目列表">
+                    <ArrowLeft />
+                    <span className="sr-only">返回</span>
+                </Link>
+                <div className="project-workspace-title">
+                    <h1 title={detail.project.name}>{detail.project.name}</h1>
+                    <span className={`project-workspace-status ${archived ? "is-archived" : "is-active"}`}>{archived ? "已归档" : "进行中"}</span>
+                </div>
             </div>
-            <nav className="project-workspace-tabs thin-scrollbar" aria-label="项目导航">
+            <nav className="project-workspace-tabs" aria-label="项目导航">
                 {views.map((item) => {
-                    const Icon = item.icon;
                     const active = item.key === activeView;
                     const href = item.key === "chapters" ? chapterHref : item.key === "workflow" ? workflowHref : `/projects/${projectId}/${item.key}`;
                     return (
-                        <Tooltip key={item.key} title={item.label} delay={150}>
-                            <Link
-                                to={href}
-                                aria-label={item.label}
-                                aria-current={active ? "page" : undefined}
-                                className={`project-workspace-tab ${active ? "is-active" : ""}`}
-                            >
-                                <Icon />
-                                <span>{item.label}</span>
-                            </Link>
-                        </Tooltip>
+                        <Link
+                            key={item.key}
+                            to={href}
+                            aria-current={active ? "page" : undefined}
+                            className={`project-workspace-tab ${active ? "is-active" : ""}`}
+                        >
+                            {item.label}
+                        </Link>
                     );
                 })}
             </nav>
-            {activeView === "workflow" ? (
-                <WorkflowChapterNavigator projectId={projectId} units={detail.units} unitId={unitId} stage={stage} />
-            ) : (
-                <Tooltip title={createCanvasLabel} delay={150}><button type="button" onClick={onCreateCanvas} className="grid size-8 shrink-0 place-items-center rounded-md text-foreground/42 transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label={createCanvasLabel}><Plus className="size-4" /></button></Tooltip>
-            )}
-        </div>
+            <div className="project-workspace-actions">
+                {activeView === "workflow" ? (
+                    <WorkflowChapterNavigator projectId={projectId} units={detail.units} unitId={unitId} stage={stage} />
+                ) : (
+                    <button type="button" onClick={onCreateCanvas} className="project-workspace-create" aria-label={createCanvasLabel} title={createCanvasLabel}>
+                        <Plus />
+                        <span>新建画布</span>
+                    </button>
+                )}
+            </div>
+        </header>
     );
 }
 
diff --git a/web/src/pages/projects/index.tsx b/web/src/pages/projects/index.tsx
index 281ea0d27..5aba73350 100644
--- a/web/src/pages/projects/index.tsx
+++ b/web/src/pages/projects/index.tsx
@@ -1,10 +1,14 @@
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
+import { DeleteButton } from "@/components/ui/base/buttons/delete-button";
+import { CachedResourceImage } from "@/components/cached-resource-image";
+import { MediaPlaceholder } from "@/components/ui/product/media-placeholder";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { App, Button, Form, Input, Modal, Select } from "antd";
-import { ArrowRight, BookOpenText, FileText, FolderKanban, Images, LayoutGrid, Palette, Plus, Search, Sparkles, Trash2 } from "lucide-react";
+import { ArrowRight, BookOpenText, FileText, FolderKanban, Images, LayoutGrid, Palette, Plus, Search, Sparkles } from "lucide-react";
 import { Link, useNavigate, useSearchParams } from "react-router";
 
-import { CollectionGrid, ListToolbar, PageHeader, WorkspacePage } from "@/components/layout/workspace-page";
+import { CollectionGrid, PageHeader, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceLoadingState, WorkspaceState } from "@/components/layout/workspace-state";
 import { CanvasStylePickerModal, resolveCanvasStylePreset, resolveProjectCanvasStyle, type CanvasStylePreset } from "@/components/canvas/canvas-style-picker-modal";
 import { resourceFileUrl } from "@/services/api/resources";
@@ -152,16 +156,6 @@ export default function ProjectsPage() {
         },
         onError: (error) => message.error(error instanceof Error ? error.message : "项目删除失败"),
     });
-    const confirmDeleteProject = (projectId: string, name: string) => {
-        modal.confirm({
-            title: "删除项目",
-            content: `确定删除「${name}」吗？项目章节、画布关联和素材归属将一并移除；独立画布与素材库原始素材会保留。此操作不可撤销。`,
-            okText: "删除",
-            okButtonProps: { danger: true, loading: deleteMutation.isPending },
-            cancelText: "取消",
-            onOk: () => deleteMutation.mutate(projectId),
-        });
-    };
     const allProjects = useMemo(() => query.data?.pages.flatMap((page) => page.projects) || [], [query.data]);
     const rows = useMemo(() => {
         const normalizedKeyword = keyword.trim().toLowerCase();
@@ -189,20 +183,37 @@ export default function ProjectsPage() {
     }, [query.fetchNextPage, query.hasNextPage, query.isError, query.isFetchingNextPage]);
     const hasInitialError = query.isError && !query.data;
     return (
-        <WorkspacePage className="library-page" grid>
-            <section className="app-story-create-panel mt-4" aria-label="开始一部新短剧">
-                <div className="app-story-create-head">
-                    <div className="app-story-create-title">
-                        <span className="app-story-create-mark"><Sparkles className="size-4" /></span>
+        <WorkspacePage className="library-page project-library-page" grid>
+            <PageHeader title="短剧 Agent" description="你的故事、章节与镜头，都在这里。" meta={<span className="app-projects-header-meta">{totalProjectCount} 个项目</span>} />
+            <details className="story-launcher-panel" aria-label="开始一部新短剧">
+                <summary className="story-launcher-head">
+                    <div className="story-launcher-title">
+                        <span className="story-launcher-mark"><Sparkles className="size-4" /></span>
                         <div>
                             <h2>开始一部新短剧</h2>
-                            <p>写下一句话故事，或选择一个创建方式。</p>
+                            <p>一句话生成章节，也可以导入小说或从空白开始</p>
                         </div>
                     </div>
-                    <div className="app-story-create-actions">
-                        <button type="button" className="app-story-create-shortcut" onClick={() => openCreate("blank")}><FolderKanban className="size-4" />空白项目</button>
-                        <button type="button" className="app-story-create-shortcut" onClick={() => openCreate("novel")}><FileText className="size-4" />导入小说</button>
-                        <button type="button" className="app-story-create-shortcut" onClick={() => setStylePickerOpen(true)}><Palette className="size-4" />{selectedStyle ? "更换画风" : "选画风"}</button>
+                    <span className="story-launcher-expand"><Plus className="size-4" /><span>展开创作</span></span>
+                </summary>
+                <div className="story-launcher-main">
+                    <Input.TextArea
+                        className="story-launcher-input"
+                        value={storyDraft}
+                        onChange={(event) => setStoryDraft(event.target.value)}
+                        placeholder="例如：一个失忆的快递员，每天收到十年前寄出的信件……"
+                        autoSize={{ minRows: 2, maxRows: 5 }}
+                        aria-label="一句话故事"
+                    />
+                    {selectedStyle ? <button type="button" className="story-launcher-style-chip" onClick={() => setStylePickerOpen(true)} title={selectedStyle.title}>
+                        <img src={selectedStyle.imageUrl} alt="" />
+                        <span>{selectedStyle.title}</span>
+                    </button> : null}
+                </div>
+                    <div className="story-launcher-actions">
+                        <Button icon={<FolderKanban />} onClick={() => openCreate("blank")}>空白项目</Button>
+                        <Button icon={<FileText />} onClick={() => openCreate("novel")}>导入小说</Button>
+                        <Button icon={<Palette />} onClick={() => setStylePickerOpen(true)}>{selectedStyle ? "更换画风" : "选画风"}</Button>
                         <ModelPicker
                             config={effectiveConfig}
                             value={generateModel || effectiveConfig.textModel}
@@ -215,22 +226,9 @@ export default function ProjectsPage() {
                         <Button type="default" icon={<Sparkles className="size-3.5" />} disabled={!storyDraft.trim() || generating} loading={generating} onClick={() => void generateStory()}>AI 生成章节</Button>
                         <Button type="primary" icon={<Plus className="size-3.5" />} onClick={() => openCreate(createSource)}>开始创作</Button>
                     </div>
-                </div>
-                <div className="app-story-create-main">
-                    <Input.TextArea
-                        className="app-story-create-input"
-                        value={storyDraft}
-                        onChange={(event) => setStoryDraft(event.target.value)}
-                        placeholder="例如：一个失忆的快递员，每天收到十年前寄出的信件……"
-                        autoSize={{ minRows: 1, maxRows: 3 }}
-                        aria-label="一句话故事"
-                    />
-                    {selectedStyle ? <button type="button" className="app-story-create-style-chip" onClick={() => setStylePickerOpen(true)} title={selectedStyle.title}>
-                        <img src={selectedStyle.imageUrl} alt="" />
-                        <span>{selectedStyle.title}</span>
-                    </button> : null}
-                </div>
-                <div className="app-story-create-controls">
+                <details className="story-launcher-options">
+                    <summary>故事设置 · {generateChapterCount} 章 · {generatePerspective} · {generateTone}</summary>
+                <div className="story-launcher-controls">
                     <label><span>章节数量</span><Select size="small" className="min-w-28" value={generateChapterCount} onChange={setGenerateChapterCount} options={[{ label: "3 章", value: "3" }, { label: "5 章", value: "5" }, { label: "8 章", value: "8" }, { label: "10 章", value: "10" }]} /></label>
                     <label><span>叙事结构</span><Select size="small" className="min-w-32" value={generateStructure} onChange={setGenerateStructure} options={[{ label: "单线推进", value: "单线推进" }, { label: "双线并行", value: "双线并行" }, { label: "群像多线", value: "群像多线" }, { label: "反转嵌套", value: "反转嵌套" }]} /></label>
                     <label><span>章节篇幅</span><Select size="small" className="min-w-28" value={generateChapterLength} onChange={setGenerateChapterLength} options={[{ label: "精炼", value: "短" }, { label: "均衡", value: "中" }, { label: "丰满", value: "长" }]} /></label>
@@ -239,18 +237,19 @@ export default function ProjectsPage() {
                     <label><span>故事基调</span><Select size="small" className="min-w-32" value={generateTone} onChange={setGenerateTone} options={[{ label: "平稳叙事", value: "平稳叙事" }, { label: "轻松喜剧", value: "轻松喜剧" }, { label: "紧张悬疑", value: "紧张悬疑" }, { label: "热血成长", value: "热血成长" }, { label: "甜宠治愈", value: "甜宠治愈" }]} /></label>
                     <label><span>角色规模</span><Select size="small" className="min-w-28" value={generateCharacterScale} onChange={setGenerateCharacterScale} options={[{ label: "2 个", value: "2 个" }, { label: "3-4 个", value: "3-4 个" }, { label: "5-6 个", value: "5-6 个" }]} /></label>
                 </div>
-            </section>
-            <ListToolbar className="library-toolbar" active={Boolean(keyword || status !== "all" || sort !== "updated")} onReset={() => { setKeyword(""); setStatus("all"); setSort("updated"); }}>
+                </details>
+            </details>
+            <CollectionToolbar active={Boolean(keyword || status !== "all" || sort !== "updated")} onReset={() => { setKeyword(""); setStatus("all"); setSort("updated"); }}>
                 <Input allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索项目、简介或画风" onChange={(event) => setKeyword(event.target.value)} />
                 <Select className="w-32" value={status} onChange={setStatus} options={[{ label: "全部状态", value: "all" }, { label: "进行中", value: "active" }, { label: "已归档", value: "archived" }]} />
                 <Select className="w-32" value={sort} onChange={setSort} options={[{ label: "最近更新", value: "updated" }, { label: "章节进度", value: "progress" }, { label: "项目名称", value: "name" }]} />
-            </ListToolbar>
+            </CollectionToolbar>
 
             {hasInitialError ? <WorkspaceErrorState description={query.error instanceof Error ? query.error.message : "项目列表加载失败"} onRetry={() => void query.refetch()} /> : null}
             {query.isLoading ? <WorkspaceLoadingState label="正在整理项目" detail="读取章节、画布与资产进度" /> : null}
             {!query.isLoading && !hasInitialError && rows.length ? (
                 <CollectionGrid className="library-grid project-library-grid">
-                    {rows.map((row) => <ProjectRow key={row.project.id} row={row} onDelete={() => confirmDeleteProject(row.project.id, row.project.name)} />)}
+                    {rows.map((row) => <ProjectRow key={row.project.id} row={row} onDelete={() => deleteMutation.mutateAsync(row.project.id)} />)}
                 </CollectionGrid>
             ) : null}
             {!query.isLoading && !hasInitialError ? <div ref={loadMoreRef} className="library-load-more" aria-live="polite">
@@ -358,32 +357,20 @@ function generationStepDone(label: string, status: string) {
     return false;
 }
 
-function ProjectRow({ row, onDelete }: { row: ProjectSummary; onDelete: () => void }) {
+function ProjectRow({ row, onDelete }: { row: ProjectSummary; onDelete: () => Promise<unknown> }) {
     const completion = projectSummaryCompletion(row);
     const stage = projectSummaryStage(row);
     const projectStyle = resolveProjectCanvasStyle(row.project.stylePresetId, row.project.styleProfileJson);
     const styleTitle = projectStyle?.title || parseStyleProfile(row.project.styleProfileJson)?.title || resolveCanvasStylePreset(row.project.stylePresetId)?.title || (row.project.stylePresetId ? "自定义画风" : "未设置画风");
     const coverUrl = row.project.coverResourceId ? resourceFileUrl(row.project.coverResourceId) : projectStyle?.imageUrl;
     return (
-        <Link to={`/projects/${row.project.id}/overview`} className="library-card project-library-card group">
+        <Link to={`/projects/${row.project.id}/overview`} className="product-collection-card library-card project-library-card group">
             <span className="project-library-cover">
-                {coverUrl ? <img className="project-library-cover-art" src={coverUrl} alt="" /> : <span className="project-library-cover-icon"><FolderKanban className="size-7" /></span>}
+                {coverUrl ? <CachedResourceImage className="project-library-cover-art" src={coverUrl} alt="" fallback={<MediaPlaceholder failed />} /> : <MediaPlaceholder label="故事由此开始" />}
                 <span className="project-library-cover-scrim" />
                 <span className="project-library-cover-ratio">{row.project.aspectRatio}</span>
                 <span className="project-library-cover-stage">{stage.label}</span>
-                <button
-                    type="button"
-                    className="project-library-cover-delete"
-                    title="删除项目"
-                    aria-label={`删除项目 ${row.project.name}`}
-                    onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        onDelete();
-                    }}
-                >
-                    <Trash2 className="size-3.5" />
-                </button>
+                <span className="project-collection-delete"><DeleteButton label={`删除项目 ${row.project.name}`} description="项目章节、画布关联和素材归属将一并移除；独立画布与素材库原始素材会保留。此操作不可撤销。" onConfirm={onDelete} /></span>
             </span>
             <span className="project-library-body">
                 <span className="project-library-heading"><strong title={row.project.name}>{row.project.name}</strong>{row.project.status === "archived" ? <em>已归档</em> : null}<ArrowRight className="project-library-arrow size-4" /></span>
diff --git a/web/src/pages/settings/index.tsx b/web/src/pages/settings/index.tsx
index 9546a9b22..08256bf4c 100644
--- a/web/src/pages/settings/index.tsx
+++ b/web/src/pages/settings/index.tsx
@@ -1,12 +1,10 @@
-import { App, Button, Input, InputNumber } from "antd";
-import { Select } from "@/components/ui/base/select";
+import { App, Button, InputNumber } from "antd";
 import { SettingsRow } from "@/components/ui/product/settings-row";
 import { ArrowLeft, Boxes, Bug, Cloud, MessageSquareText, RadioTower, SlidersHorizontal, Workflow } from "lucide-react";
 import { useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 
 import { UserOSSSettingsForm } from "@/components/layout/user-oss-settings-form";
-import { audioFormatOptions, audioVoiceOptions, normalizeAudioSpeedValue } from "@/lib/audio-generation";
 import { refreshSystemChannels } from "@/lib/user-session";
 import { defaultConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import { useUserStore } from "@/stores/use-user-store";
@@ -24,7 +22,7 @@ const configSections: Array<{ key: ConfigSectionKey; label: string; description:
     { key: "channels", label: "个人渠道", description: "模型服务与个人工作流", icon: <RadioTower className="size-4" /> },
     { key: "runninghub", label: "RunningHub 工作流", description: "个人渠道的云端工作流配置", icon: <Workflow className="size-4" /> },
     { key: "models", label: "模型选择", description: "按领域选择默认模型", icon: <Boxes className="size-4" /> },
-    { key: "preferences", label: "生成偏好", description: "画布、视频与音频默认值", icon: <SlidersHorizontal className="size-4" /> },
+    { key: "preferences", label: "生成偏好", description: "画布生成默认值", icon: <SlidersHorizontal className="size-4" /> },
     { key: "prompts", label: "提示词偏好", description: "按任务定制平台模板", icon: <MessageSquareText className="size-4" /> },
     { key: "storage", label: "我的对象存储", description: "管理个人媒体存储", icon: <Cloud className="size-4" /> },
     { key: "diagnostics", label: "问题诊断", description: "导出日志协助排查", icon: <Bug className="size-4" /> },
@@ -127,14 +125,14 @@ export default function SettingsPage() {
                 <div className="settings-pane-header">
                     <div className="min-w-0">
                         <h2>生成偏好</h2>
-                        <p>画布、视频与音频默认值，节点内仍可单独覆盖。</p>
+                        <p>设置新建生成任务时使用的初始值，节点内仍可单独覆盖。</p>
                     </div>
                 </div>
                 <div className="settings-section">
-                    <section className="settings-preference-block py-4">
-                        <div className="mb-3">
-                            <h3 className="text-[13px] font-medium text-foreground/60">画布生成</h3>
-                            <p className="mt-1 text-xs text-foreground/55">设置新建生成任务时使用的初始值，节点内仍可单独覆盖。</p>
+                    <section className="settings-preference-block">
+                        <div className="settings-preference-heading">
+                            <h3>画布生成</h3>
+                            <p>用于新建图片生成任务，节点内仍可单独覆盖。</p>
                         </div>
                         <SettingsRow
                             label="默认生图张数"
@@ -151,42 +149,6 @@ export default function SettingsPage() {
                             controlClassName="w-[200px]"
                         />
                     </section>
-                    <section className="settings-preference-block py-4">
-                        <div className="mb-3">
-                            <h3 className="text-[13px] font-medium text-foreground/60">音频默认值</h3>
-                            <p className="mt-1 text-xs text-foreground/55">用于新建音频节点和未单独设置参数的生成任务。</p>
-                        </div>
-                        <SettingsRow label="默认声音" control={<Select value={config.audioVoice} options={audioVoiceOptions} onChange={(value) => updateConfig("audioVoice", value)} />} controlClassName="w-[200px]" />
-                        <SettingsRow label="文件格式" control={<Select value={config.audioFormat} options={audioFormatOptions} onChange={(value) => updateConfig("audioFormat", value)} />} controlClassName="w-[200px]" />
-                        <SettingsRow
-                            label="语速"
-                            description="音频朗读速度（0.25–4）。"
-                            control={
-                                <InputNumber
-                                    min={0.25}
-                                    max={4}
-                                    step={0.05}
-                                    precision={2}
-                                    className="w-full"
-                                    value={Number(config.audioSpeed)}
-                                    onChange={(value) => updateConfig("audioSpeed", normalizeAudioSpeedValue(String(value ?? defaultConfig.audioSpeed)))}
-                                />
-                            }
-                            controlClassName="w-[200px]"
-                        />
-                    </section>
-                    <section className="settings-preference-block py-4">
-                        <div className="mb-3">
-                            <h3 className="text-[13px] font-medium text-foreground/60">音频指令</h3>
-                            <p className="mt-1 text-xs text-foreground/55">在音频节点没有单独填写时使用。</p>
-                        </div>
-                        <SettingsRow
-                            label="默认音频指令"
-                            align="top"
-                            control={<Input.TextArea rows={5} value={config.audioInstructions} placeholder="例如：自然、温暖、适合旁白。" onChange={(event) => updateConfig("audioInstructions", event.target.value)} />}
-                            controlClassName="w-full max-w-[480px]"
-                        />
-                    </section>
                 </div>
             </SettingsPane>
         ),
@@ -203,17 +165,14 @@ export default function SettingsPage() {
 
     return (
         <main className="settings-page app-workspace-page app-user-workspace flex h-full min-h-0 flex-col text-foreground">
-            <header className="settings-topbar shrink-0">
-                <div className="flex min-w-0 items-center gap-2.5">
-                    {shouldPromptContinue ? (
-                        <button type="button" className="app-workspace-icon-button shrink-0" onClick={() => navigate(-1)} aria-label="返回创作页面" title="返回创作页面">
-                            <ArrowLeft className="size-4" />
-                        </button>
-                    ) : null}
-                    <h1 className="truncate text-sm font-semibold">设置</h1>
+            {shouldPromptContinue ? (
+                <div className="settings-topbar shrink-0">
+                    <div className="ml-auto flex flex-wrap items-center justify-end gap-2">
+                        <Button icon={<ArrowLeft className="size-4" />} onClick={() => navigate(-1)}>返回创作</Button>
+                        <Button type="primary" onClick={finishConfig}>保存并返回</Button>
+                    </div>
                 </div>
-                {shouldPromptContinue ? <Button type="primary" size="small" onClick={finishConfig}>保存并返回</Button> : null}
-            </header>
+            ) : null}
             <div className="settings-library-frame flex min-h-0 flex-1 flex-col md:flex-row">
                 <aside className="settings-nav-panel w-full shrink-0 md:w-[200px]">
                     <nav className="thin-scrollbar flex gap-1 overflow-x-auto p-2 md:block md:space-y-1 md:p-2.5" aria-label="配置分类">
diff --git a/web/src/pages/skills/index.tsx b/web/src/pages/skills/index.tsx
index bb0dcd201..61b092407 100644
--- a/web/src/pages/skills/index.tsx
+++ b/web/src/pages/skills/index.tsx
@@ -1,3 +1,4 @@
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
 import { App, Button, Dropdown, Input, Select } from "antd";
 import { Tooltip } from "@/components/ui/base/tooltip";
 
@@ -5,7 +6,7 @@ import { Boxes, Check, Clapperboard, Heart, Library, LoaderCircle, Megaphone, Mo
 import type { LucideIcon } from "lucide-react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 
-import { ListToolbar, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
+import { PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceState } from "@/components/layout/workspace-state";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { fallbackSkillCategories, formatSkillCount, groupSkills, skillCategoryLabel } from "@/pages/skills/skill-catalog";
@@ -205,17 +206,19 @@ export default function SkillsPage() {
     return (
         <>
             <WorkspacePage className="library-page skills-library-page" grid>
-                <section className="skills-hero" aria-labelledby="skills-hero-title">
-                    <div className="skills-hero-inner">
-                        <span className="skills-hero-badge"><Sparkles className="size-3.5" />技能广场</span>
-                        <h1 id="skills-hero-title" className="skills-hero-title">技能库</h1>
-                        <p className="skills-hero-description">把常用的提示词、角色设定和创作方法收进自己的工具架。</p>
-                        <span className="skills-hero-meta">{total} 个技能</span>
-                    </div>
-                </section>
+                <PageHeader title="技能库" description="把提示词、角色设定和创作方法，变成随时可用的能力。" actions={<Button type="primary" icon={<Plus className="size-4" />} onClick={() => setInstallOpen(true)}>安装技能</Button>} />
 
-                <ListToolbar className="library-toolbar skills-toolbar mt-7" active={filtersActive} onReset={resetFilters}>
-                    <div className="skills-tabs" ref={tabsRef} role="tablist" aria-label="技能库范围">
+                <div className="skills-browse-bar">
+                <div className="skills-navigation">
+                    <div className="skills-tabs" ref={tabsRef} role="tablist" aria-label="技能库范围" onKeyDown={(event) => {
+                        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+                        event.preventDefault();
+                        const current = scopeOptions.findIndex((option) => option.value === scope);
+                        const next = event.key === "Home" ? 0 : event.key === "End" ? scopeOptions.length - 1 : (current + (event.key === "ArrowRight" ? 1 : -1) + scopeOptions.length) % scopeOptions.length;
+                        setScope(scopeOptions[next].value as SkillScope);
+                        setPage(1);
+                        tabsRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[next]?.focus();
+                    }}>
                         <span className="skills-tabs-indicator" ref={indicatorRef} aria-hidden="true" />
                         {scopeOptions.map((option) => {
                             const Icon = option.icon;
@@ -226,6 +229,7 @@ export default function SkillsPage() {
                                     key={option.value}
                                     type="button"
                                     role="tab"
+                                    tabIndex={active ? 0 : -1}
                                     aria-selected={active}
                                     className={`skills-tab${active ? " is-active" : ""}`}
                                     onClick={() => { setScope(option.value as SkillScope); setPage(1); }}
@@ -237,19 +241,21 @@ export default function SkillsPage() {
                             );
                         })}
                     </div>
-
+                </div>
+                <CollectionToolbar active={filtersActive} onReset={resetFilters}>
                         <Input className="min-w-0 sm:!w-56" prefix={<Search className="size-4 text-foreground/38" />} value={search} allowClear placeholder="搜索技能或作者" onChange={(event) => { setSearch(event.target.value); setPage(1); }} />
-                        <Select className="w-28" value={tag} options={[{ value: "all", label: "全部分类" }, ...categories]} onChange={(value) => { setTag(value); setPage(1); }} />
-                        <Select className="w-24" value={sort} options={sortOptions} onChange={(value) => { setSort(value); setPage(1); }} />
-                </ListToolbar>
+                        <Select aria-label="技能分类" className="w-28" value={tag} options={[{ value: "all", label: "全部分类" }, ...categories]} onChange={(value) => { setTag(value); setPage(1); }} />
+                        <Select aria-label="技能排序" className="w-24" value={sort} options={sortOptions} onChange={(value) => { setSort(value); setPage(1); }} />
+                </CollectionToolbar>
+                </div>
 
                 {loading && !skills.length ? <SkillSkeleton /> : loadError ? <WorkspaceErrorState compact description={loadError} onRetry={reload} /> : groupedSkills.length ? (
-                    <div key={`${scope}-${page}`} className="skills-scope-panel space-y-9 py-6">
+                    <div key={`${scope}-${page}`} className="skills-scope-panel">
                         {groupedSkills.map((group) => {
                             const GroupIcon = categoryIconOf(group.value);
                             return (
-                                <section key={group.value} aria-labelledby={`skill-category-${group.value}`}>
-                                    <div className="mb-3 flex items-center justify-between px-0.5">
+                                <section key={group.value} data-category={group.value} aria-labelledby={`skill-category-${group.value}`}>
+                                    <div className="skill-section-heading">
                                         <h2 id={`skill-category-${group.value}`} className="flex items-center gap-2 text-base font-semibold text-foreground/75">
                                             <span className="skill-group-icon"><GroupIcon /></span>
                                             {group.label}
@@ -257,8 +263,7 @@ export default function SkillsPage() {
                                         <span className="text-[var(--fs-label)] text-foreground/32">{group.skills.length} 个</span>
                                     </div>
                                     <div className="library-grid skill-library-grid">
-                                        {groupedSkills[0] === group ? <button type="button" className="library-create-card" onClick={() => setInstallOpen(true)}><span className="library-create-cover"><Plus className="size-8" /></span><span className="library-create-title">安装技能</span><span className="library-create-meta">上传 MD / ZIP 或连接 GitHub</span></button> : null}
-                                        {group.skills.map((skill, index) => <SkillCard key={skill.skillId} skill={skill} categories={categories} loading={mutatingID === skill.skillId} style={{ animationDelay: `${Math.min(index, 10) * 45}ms` }} onOpen={() => void openSkill(skill)} onAdd={() => void toggleAdded(skill)} onLike={() => void toggleLiked(skill)} onEdit={() => void openEditor(skill)} onDelete={() => confirmDelete(skill)} />)}
+                                        {group.skills.map((skill, index) => <SkillCard key={skill.skillId} skill={skill} categories={categories} loading={mutatingID === skill.skillId} style={{ animationDelay: `${Math.min(index, 5) * 30}ms` }} onOpen={() => void openSkill(skill)} onAdd={() => void toggleAdded(skill)} onLike={() => void toggleLiked(skill)} onEdit={() => void openEditor(skill)} onDelete={() => confirmDelete(skill)} />)}
                                     </div>
                                 </section>
                             );
@@ -292,9 +297,9 @@ export default function SkillsPage() {
 function SkillCard({ skill, categories, loading, style, onOpen, onAdd, onLike, onEdit, onDelete }: { skill: Skill; categories: SkillCategory[]; loading: boolean; style?: CSSProperties; onOpen: () => void; onAdd: () => void; onLike: () => void; onEdit: () => void; onDelete: () => void }) {
     const CategoryIcon = categoryIconOf(skill.tag);
     return (
-        <article style={style} className={`library-card library-card-surface skill-library-card group${skill.isAdded ? " is-selected is-added" : ""}`}>
-            <span className="library-icon-tile skill-card-icon" aria-hidden="true"><CategoryIcon /></span>
+        <article style={style} className={`product-collection-card library-card library-card-surface skill-library-card group${skill.isAdded ? " is-added" : ""}`}>
             <div className="skill-card-top">
+                <span className="library-icon-tile skill-card-icon" aria-hidden="true"><CategoryIcon /></span>
                 <button type="button" className="skill-card-title-button" onClick={onOpen}>
                     <h3>{skill.skillName}</h3>
                 </button>
@@ -332,10 +337,9 @@ function SkillCard({ skill, categories, loading, style, onOpen, onAdd, onLike, o
                 ? <div className="skill-card-action"><span className="skill-card-owner-flag">我创建的</span><span className="skill-card-added-count">{formatSkillCount(skill.addedCount)} 人已加入</span></div>
                 : (
                     <div className="skill-card-action">
-                        <button type="button" disabled={loading} aria-pressed={skill.isAdded} className={`skill-card-join${skill.isAdded ? " is-added" : ""}`} onClick={onAdd}>
-                            {loading ? <LoaderCircle className="size-3.5 animate-spin" /> : skill.isAdded ? <Check className="size-3.5" /> : <Plus className="size-3.5" />}
-                            <span>{skill.isAdded ? "已加入" : "加入我的技能库"}</span>
-                        </button>
+                        <Button loading={loading} aria-pressed={skill.isAdded} icon={skill.isAdded ? <Check /> : <Plus />} onClick={onAdd}>
+                            {skill.isAdded ? "已加入" : "加入技能库"}
+                        </Button>
                         <Tooltip title={`${formatSkillCount(skill.addedCount)} 人已加入`}><span className="skill-card-added-count">{formatSkillCount(skill.addedCount)}</span></Tooltip>
                     </div>
                 )}
diff --git a/web/src/pages/tasks/index.tsx b/web/src/pages/tasks/index.tsx
index ab6eef1b5..25ad4a703 100644
--- a/web/src/pages/tasks/index.tsx
+++ b/web/src/pages/tasks/index.tsx
@@ -1,3 +1,4 @@
+import { CollectionToolbar } from "@/components/layout/collection-toolbar";
 import { App, Button, Drawer, Form, Input, Modal, Select, Typography } from "antd";
 import { Switch } from "@/components/ui/base/switch";
 import { SegmentedControl } from "@/components/ui/base/segmented-control";
@@ -6,7 +7,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 
 import { MediaPreview } from "@/components/media-preview";
-import { ListToolbar, PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
+import { PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceState } from "@/components/layout/workspace-state";
 import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerationError } from "@/lib/generation-error";
 import { formatTaskKind, operationOptions, statusLabel } from "@/lib/generation-task-display";
@@ -383,8 +384,17 @@ export default function TasksPage() {
         <>
             <WorkspacePage grid className="library-page task-library-page">
                 <div className="studio-band">
-                    <ListToolbar
-                        className="library-toolbar task-library-toolbar"
+                    <PageHeader
+                        title="创作历史"
+                        description="查看文本、图片和视频生成任务，跟踪进度并处理失败任务。"
+                        meta={<span className="app-projects-header-meta">{taskStats.total} 个任务</span>}
+                        actions={
+                            <Button type="primary" icon={<Plus className="size-3.5" />} onClick={() => setCreateOpen(true)}>
+                                新建任务
+                            </Button>
+                        }
+                    />
+                    <CollectionToolbar
                         active={Boolean(keyword || projectFilter !== "all" || kindFilter !== "all" || modelFilter !== "all" || statusFilter !== "all")}
                         onReset={() => { setKeyword(""); setProjectFilter("all"); setKindFilter("all"); setModelFilter("all"); setStatusFilter("all"); setPage(1); }}
                         trailing={(
@@ -415,10 +425,10 @@ export default function TasksPage() {
                         <Select className="w-full sm:w-48" value={projectFilter} onChange={(value) => { setProjectFilter(value); setPage(1); }} options={[{ label: "全部画布", value: "all" }, ...projectOptions]} />
                         <Select className="w-full sm:w-32" value={kindFilter} onChange={(value) => { setKindFilter(value as TaskKindFilter); setPage(1); }} options={[{ label: "全部类型", value: "all" }, { label: "文本", value: "text" }, { label: "图片", value: "image" }, { label: "视频", value: "video" }]} />
                         <Select className="w-full sm:w-44" value={modelFilter} onChange={(value) => { setModelFilter(value); setPage(1); }} options={[{ label: "全部模型", value: "all" }, ...modelOptions.map((model) => ({ label: model, value: model }))]} />
-                    </ListToolbar>
+                    </CollectionToolbar>
                 </div>
 
-                <div className="canvas-library-frame task-library-frame">
+                <div className="collection-content task-collection-content">
                     {loading && !tasks.length ? <div className="library-loading-grid" aria-label="正在加载任务">{Array.from({ length: 8 }, (_, index) => <div key={index} className="library-skeleton" />)}</div> : null}
                     {!loading || tasks.length ? (
                         visibleTasks.length ? (
diff --git a/web/src/pages/tasks/task-grid-card.tsx b/web/src/pages/tasks/task-grid-card.tsx
index fcd2e439f..c4a8684a0 100644
--- a/web/src/pages/tasks/task-grid-card.tsx
+++ b/web/src/pages/tasks/task-grid-card.tsx
@@ -7,18 +7,19 @@ import { MediaPreview } from "@/components/media-preview";
 import { CONTENT_MODERATION_ERROR_CODE, isContentModerationError } from "@/lib/generation-error";
 import { statusLabel } from "@/lib/generation-task-display";
 import type { GenerationTask } from "@/services/api/task-center";
-import { isTaskFailed, statusDotClassName, TaskDate } from "./task-shared";
+import { isTaskFailed, statusDotClassName, taskAttentionReason, TaskDate } from "./task-shared";
 import { TaskVideoThumbnail } from "./task-video-thumbnail";
 
 export function TaskGridCard({ task, actingId, onOpen, onRetry }: { task: GenerationTask; actingId: string; onOpen: () => void; onRetry: () => void }) {
     const isActive = task.status === "queued" || task.status === "running";
     const isFailed = isTaskFailed(task);
+    const retryDisabled = task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error);
     const isVideo = task.previewKind === "video";
     const thumbnailUrl = isVideo ? task.previewPosterUrl : task.previewUrl;
     const fallbackVideo = task.type.includes("video");
     const Icon = fallbackVideo ? Video : task.type.includes("image") ? ImageIcon : FileText;
     return (
-        <article className={`task-grid-card${isFailed ? " is-attention" : ""}`}>
+        <article className={`product-collection-card task-grid-card${isFailed ? " is-attention" : ""}`}>
             <div className="task-grid-thumb">
                 {thumbnailUrl ? (
                     <MediaPreview src={thumbnailUrl} kind="image" loading="lazy" className="h-full w-full object-cover" />
@@ -32,14 +33,14 @@ export function TaskGridCard({ task, actingId, onOpen, onRetry }: { task: Genera
                         <IconButton size="sm" variant="ghost" icon={Eye} aria-label="查看详情" onClick={onOpen} />
                     </Tooltip>
                     {isFailed ? (
-                        <Tooltip title="重试任务">
+                        <Tooltip title={retryDisabled ? "内容审核失败，无法自动重试" : "重试任务"}>
                             <Button
                                 type="text"
                                 size="small"
                                 icon={<RotateCcw className="size-3.5" />}
                                 aria-label="重试任务"
                                 loading={actingId === task.id}
-                                disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)}
+                                disabled={retryDisabled}
                                 onClick={onRetry}
                             />
                         </Tooltip>
@@ -59,6 +60,14 @@ export function TaskGridCard({ task, actingId, onOpen, onRetry }: { task: Genera
                         <TaskDate value={task.createdAt} />
                     </span>
                 </div>
+                {isActive ? (
+                    <div className="task-grid-progress" role="progressbar" aria-label={task.stage || "任务生成进度"} aria-valuemin={0} aria-valuemax={100} aria-valuenow={task.progress || 0}>
+                        <span>{task.stage || "正在生成"}</span>
+                        <strong>{task.progress || 0}%</strong>
+                        <i><b style={{ width: `${task.progress || 0}%` }} /></i>
+                    </div>
+                ) : null}
+                {isFailed ? <p className="task-grid-error" title={task.error || undefined}>{taskAttentionReason(task)}</p> : null}
             </div>
         </article>
     );
diff --git a/web/src/pages/tasks/task-list-row.tsx b/web/src/pages/tasks/task-list-row.tsx
index 1f1c794eb..7035e0e2f 100644
--- a/web/src/pages/tasks/task-list-row.tsx
+++ b/web/src/pages/tasks/task-list-row.tsx
@@ -36,8 +36,9 @@ export function TaskListRow({
     const context = getTaskCanvasContext(task, canvasById, projectNameById);
     const isActive = task.status === "queued" || task.status === "running";
     const isFailed = isTaskFailed(task);
+    const retryDisabled = task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error);
     return (
-        <article className={`task-record-row group${isFailed ? " is-attention" : ""}`}>
+        <article className={`product-collection-card task-record-row group${isFailed ? " is-attention" : ""}`}>
             <TaskPreviewThumbnail task={task} onOpen={onPreview} />
             <div className="task-record-main">
                 <div className="task-record-heading">
@@ -60,7 +61,7 @@ export function TaskListRow({
                     </span>
                 </div>
                 {isActive ? (
-                    <div className="task-record-progress">
+                    <div className="task-record-progress" role="progressbar" aria-label={task.stage || "任务生成进度"} aria-valuemin={0} aria-valuemax={100} aria-valuenow={task.progress || 0}>
                         <span>{task.stage || "正在生成"}</span>
                         <span>{task.progress || 0}%</span>
                         <i>
@@ -83,14 +84,14 @@ export function TaskListRow({
                     <IconButton size="sm" variant="ghost" icon={Eye} aria-label="查看详情" onClick={onOpen} />
                 </Tooltip>
                 {isFailed ? (
-                    <Tooltip title="重试任务">
+                    <Tooltip title={retryDisabled ? "内容审核失败，无法自动重试" : "重试任务"}>
                         <Button
                             type="text"
                             size="small"
                             icon={<RotateCcw className="size-3.5" />}
                             aria-label="重试任务"
                             loading={actingId === task.id}
-                            disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)}
+                            disabled={retryDisabled}
                             onClick={onRetry}
                         />
                     </Tooltip>
diff --git a/web/src/pages/wallet/index.tsx b/web/src/pages/wallet/index.tsx
index 14194cf1c..31feed6a7 100644
--- a/web/src/pages/wallet/index.tsx
+++ b/web/src/pages/wallet/index.tsx
@@ -298,7 +298,7 @@ export default function WalletPage() {
     ];
 
     return (
-        <main className="app-user-content app-workspace-scroll library-page wallet-library-page relative h-full overflow-y-auto text-foreground">
+        <main className="app-user-content app-workspace-scroll library-page wallet-library-page wallet-market-page relative h-full overflow-y-auto text-foreground">
             <div className="relative w-full px-4 py-6 sm:px-6 lg:px-8">
                 <div className="studio-band">
                     <motion.header
@@ -309,8 +309,8 @@ export default function WalletPage() {
                     >
                         <div className="flex min-w-0 items-center gap-3">
                             <div className="min-w-0">
-                                <h1 className="text-[var(--fs-heading-lg)] font-semibold leading-7">积分中心</h1>
-                                <p className="mt-1 text-xs leading-5 text-foreground/58">模型调用、冻结与退款都在同一条可追溯流水中。</p>
+                                <h1 className="text-[var(--fs-heading-lg)] font-semibold leading-7">积分超市</h1>
+                                <p className="mt-1 text-xs leading-5 text-foreground/58">用真实余额补充创作额度，兑换码、充值与消费记录都可追溯。</p>
                             </div>
                         </div>
                         <div className="flex flex-wrap items-center gap-2">
@@ -344,7 +344,7 @@ export default function WalletPage() {
                                         <Coins />
                                     </span>
                                     <div>
-                                        <strong>可用创作积分</strong>
+                                        <strong>我的创作积分</strong>
                                         <span>最近更新 {formatTime(account?.updatedAt)}</span>
                                     </div>
                                 </div>
@@ -375,7 +375,7 @@ export default function WalletPage() {
                                 <TicketCheck className="size-4" />
                             </span>
                             <div>
-                                <h2 className="text-base font-semibold">兑换积分</h2>
+                                <h2 className="text-base font-semibold">兑换码入账</h2>
                                 <p className="mt-1 text-xs leading-5 text-foreground/55">输入管理员发放的 32 位兑换码。</p>
                             </div>
                         </div>
@@ -411,7 +411,7 @@ export default function WalletPage() {
                                     <CreditCard className="size-4" />
                                 </span>
                                 <div>
-                                    <h2 className="text-base font-semibold">在线充值</h2>
+                                    <h2 className="text-base font-semibold">购买创作积分</h2>
                                     <p className="mt-1 text-xs leading-5 text-foreground/55">支付成功后自动充值积分。平台不提供退款，请确认商品和金额后付款。</p>
                                 </div>
                             </div>
@@ -473,7 +473,7 @@ export default function WalletPage() {
                 <section className="wallet-ledger-panel app-workspace-surface mt-9 rounded-lg p-4 backdrop-blur-xl sm:p-5">
                     <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                         <div>
-                            <h2 className="text-base font-semibold">积分流水</h2>
+                            <h2 className="text-base font-semibold">积分使用明细</h2>
                             <p className="mt-1 text-xs text-foreground/55">当前展示最近 {wallet?.entries.length || 0} 条记录。</p>
                         </div>
                         <SegmentedControl
diff --git a/web/src/stores/use-theme-store.ts b/web/src/stores/use-theme-store.ts
index 466f337f8..59ff58e51 100644
--- a/web/src/stores/use-theme-store.ts
+++ b/web/src/stores/use-theme-store.ts
@@ -13,19 +13,19 @@ const VALID_THEMES: ThemeName[] = ["light", "dark"];
 export const useThemeStore = create<ThemeStore>()(
     persist(
         (set) => ({
-            theme: "dark",
+            theme: "light",
             // 写入前校验：非法 theme 直接忽略，防止 syncRemoteUserData 等路径绕过 merge 写入坏值
             setTheme: (next) => set((state) => (VALID_THEMES.includes(next) ? { theme: next } : state)),
         }),
         {
             name: "infinite-canvas:theme_store",
-            // 持久化恢复校验：旧版本/坏 session 写入的非法值回退到 dark，
+            // 持久化恢复校验：旧版本/坏 session 写入的非法值回退到 light，
             // 避免 canvasThemes[非法值] = undefined 触发 "reading 'node'" 崩溃
             merge: (persisted, current) => {
                 const stored = (persisted || {}) as Partial<ThemeStore>;
                 const theme = VALID_THEMES.includes(stored.theme as ThemeName)
                     ? (stored.theme as ThemeName)
-                    : "dark";
+                    : "light";
                 return { ...current, theme };
             },
         },
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 1183dccbe..6dbe0021f 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -565,9 +565,9 @@
     --workspace-accent-soft: rgba(17, 17, 17, 0.07);
     --workspace-nav-active-bg: color-mix(in srgb, var(--workspace-accent) 12%, transparent);
     --workspace-nav-active-hover-bg: color-mix(in srgb, var(--workspace-accent) 16%, transparent);
-    --workspace-sidebar-width: 208px;        /* 侧栏展开宽度：较原 260px 收窄 20% */
-    --workspace-sidebar-nav-width: 208px;    /* 展开态导航内容宽度 */
-    --workspace-sidebar-collapsed-width: 56px; /* 折叠态保留可发现的图标菜单轨 */
+    --workspace-sidebar-width: 250px;        /* 侧栏展开宽度：较 208px 加宽 20% */
+    --workspace-sidebar-nav-width: 250px;    /* 展开态导航内容宽度 */
+    --workspace-sidebar-collapsed-width: 67px; /* 折叠态保留可发现的图标菜单轨 */
 
     --workspace-shell-gutter: 6px;        /* 工作区外壳画布留白与卡片间隙（组件 token）*/
 
@@ -1521,9 +1521,104 @@
     }
 
     .app-user-workspace {
+        /* 用户端工作区：浅灰画布 + 白色内容面，弱化后台式分隔线。 */
+        --workspace-canvas: #f4f4f5;
+        --workspace-page: var(--workspace-canvas);
+        --workspace-navigation: #efeff0;
+        --workspace-content: #f8f8f9;
+        --workspace-sidebar: var(--workspace-navigation);
+        --workspace-surface: #ffffff;
+        --workspace-surface-strong: #ffffff;
+        --workspace-border: rgba(17, 17, 17, 0.08);
+        --workspace-border-strong: rgba(17, 17, 17, 0.14);
+        --workspace-nav: var(--workspace-navigation);
+        --workspace-accent: #171717;
+        --workspace-accent-soft: rgba(17, 17, 17, 0.06);
+        --workspace-nav-active-bg: rgba(17, 17, 17, 0.075);
+        --workspace-nav-active-hover-bg: rgba(17, 17, 17, 0.11);
+        --workspace-sidebar-width: 312px;
+        --workspace-sidebar-nav-width: 312px;
+        --workspace-sidebar-collapsed-width: 86px;
+        --workspace-shell-gutter: 0px;
+        --workspace-card-gap: 0px;
+        --workspace-topbar-height: 56px;
         background-color: var(--workspace-page);
     }
 
+    .dark .app-user-workspace {
+        --workspace-canvas: #101011;
+        --workspace-page: var(--workspace-canvas);
+        --workspace-navigation: #171718;
+        --workspace-content: #121213;
+        --workspace-sidebar: var(--workspace-navigation);
+        --workspace-surface: #1b1b1d;
+        --workspace-surface-strong: #222224;
+        --workspace-border: rgba(255, 255, 255, 0.09);
+        --workspace-border-strong: rgba(255, 255, 255, 0.16);
+        --workspace-nav: var(--workspace-navigation);
+        --workspace-accent: #f5f5f5;
+        --workspace-accent-soft: rgba(255, 255, 255, 0.08);
+        --workspace-nav-active-bg: rgba(255, 255, 255, 0.09);
+        --workspace-nav-active-hover-bg: rgba(255, 255, 255, 0.13);
+    }
+
+    /* 画布编辑器保持独立的全屏工作区，但沿用用户端的安全区和控件密度。 */
+    .app-user-workspace.app-spatial-workspace {
+        --canvas-topbar-h: 64px;
+        --canvas-inset-x: 16px;
+        --canvas-inset-y: 16px;
+        --canvas-dock-popover-offset: 50px;
+    }
+
+    /* 画布编辑器和管理后台不继承用户端的圆角卡片外壳。 */
+    .app-user-workspace .app-workspace-sidebar {
+        background: var(--workspace-sidebar);
+    }
+
+    .app-user-workspace .app-workspace-stage {
+        background: var(--workspace-content);
+    }
+
+    .app-user-workspace .app-workspace-sidebar-search > button {
+        min-height: 40px;
+        border-radius: var(--r-md);
+        background: color-mix(in srgb, var(--foreground) 4%, transparent);
+    }
+
+    .app-user-workspace .app-workspace-sidebar-search > button:hover,
+    .app-user-workspace .app-workspace-sidebar-search > button:focus-visible {
+        background: color-mix(in srgb, var(--foreground) 8%, transparent);
+    }
+
+    .app-user-workspace .app-workspace-nav-link {
+        min-height: 40px;
+        border-radius: 14px;
+        padding-inline: 12px;
+        color: color-mix(in srgb, var(--foreground) 62%, transparent);
+        transition:
+            background-color var(--motion-instant) var(--ease-product-enter),
+            color var(--motion-instant) var(--ease-product-enter),
+            transform var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .app-user-workspace .app-workspace-nav-link:hover:not(.is-active) {
+        background: color-mix(in srgb, var(--foreground) 5%, transparent);
+        color: var(--foreground);
+    }
+
+    .app-user-workspace .app-workspace-nav-link:active,
+    .app-user-workspace .app-workspace-topbar-icon-button:active,
+    .app-user-workspace .app-workspace-sidebar-search > button:active {
+        transform: scale(0.985);
+    }
+
+    .app-user-workspace .app-workspace-nav-link:focus-visible,
+    .app-user-workspace .app-workspace-sidebar-search > button:focus-visible,
+    .app-user-workspace .app-workspace-sidebar-rail-button:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--workspace-accent) 42%, transparent);
+        outline-offset: 2px;
+    }
+
     .app-workspace-shell {
         position: relative;
         padding: var(--workspace-shell-gutter);
@@ -1699,6 +1794,18 @@
         max-width: min(360px, calc(50vw - 88px));
     }
 
+    /* 右侧命令组在窄屏保持可达，不挤压项目标题，也不制造横向溢出。 */
+    .canvas-topbar > .canvas-topbar-cluster:last-child {
+        min-width: 0;
+        max-width: min(52vw, 620px);
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .canvas-topbar > .canvas-topbar-cluster:last-child::-webkit-scrollbar {
+        display: none;
+    }
+
     .canvas-topbar-title-block,
     .canvas-topbar-title-row,
     .canvas-topbar-project-context {
@@ -1709,16 +1816,184 @@
         width: fit-content;
     }
 
-    @media (max-width: 720px) {
+    @media (max-width: 767px) {
+        .app-user-workspace.app-spatial-workspace {
+            --canvas-topbar-h: 56px;
+            --canvas-inset-x: 12px;
+            --canvas-inset-y: max(12px, env(safe-area-inset-bottom));
+            --canvas-dock-popover-offset: 48px;
+        }
+
+        .canvas-topbar {
+            padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
+        }
+
         .canvas-topbar-project-cluster {
             max-width: min(260px, calc(100vw - 132px));
         }
 
+        .canvas-topbar > .canvas-topbar-cluster:last-child {
+            max-width: calc(50vw - 12px);
+        }
+
         .canvas-topbar-project-context {
             display: none;
         }
     }
 
+    /* 画布项目侧栏：把章节、画风和资产入口收敛成低干扰的创作导航。 */
+    .canvas-project-sidebar {
+        --canvas-sidebar-surface: color-mix(in srgb, var(--background) 94%, var(--foreground) 6%);
+        width: var(--canvas-sidebar-width);
+        border-color: color-mix(in srgb, var(--foreground) 9%, transparent) !important;
+        background: var(--canvas-sidebar-surface) !important;
+        box-shadow: inset -1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    }
+
+    .canvas-project-sidebar.is-collapsed {
+        width: 48px;
+        background: color-mix(in srgb, var(--canvas-sidebar-surface) 96%, var(--foreground) 4%) !important;
+    }
+
+    .canvas-project-sidebar-header {
+        min-height: 56px;
+        border-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
+        padding-inline: 12px;
+    }
+
+    .canvas-project-sidebar-header a,
+    .canvas-project-sidebar-header button,
+    .canvas-project-sidebar-back-link {
+        transition:
+            background-color var(--motion-instant) var(--ease-product-enter),
+            color var(--motion-instant) var(--ease-product-enter),
+            transform var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .canvas-project-sidebar-header a:hover,
+    .canvas-project-sidebar-header button:hover,
+    .canvas-project-sidebar-back-link:hover {
+        background: color-mix(in srgb, var(--foreground) 6%, transparent);
+        color: var(--foreground);
+    }
+
+    .canvas-project-sidebar-header a:active,
+    .canvas-project-sidebar-header button:active,
+    .canvas-project-sidebar-back-link:active,
+    .canvas-project-sidebar-assets-button:active {
+        transform: scale(0.985);
+    }
+
+    .canvas-project-sidebar-header a:focus-visible,
+    .canvas-project-sidebar-header button:focus-visible,
+    .canvas-project-sidebar-back-link:focus-visible,
+    .canvas-project-sidebar-assets-button:focus-visible,
+    .canvas-project-sidebar-chapter-row button:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--workspace-accent) 42%, transparent);
+        outline-offset: 2px;
+    }
+
+    .canvas-project-sidebar-style,
+    .canvas-project-sidebar-assets {
+        border-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
+    }
+
+    .canvas-project-sidebar-style-button {
+        min-height: 44px;
+        border-radius: var(--r-md);
+        transition:
+            background-color var(--motion-instant) var(--ease-product-enter),
+            color var(--motion-instant) var(--ease-product-enter),
+            transform var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .canvas-project-sidebar-style-button:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    }
+
+    .canvas-project-sidebar-style-button img,
+    .canvas-project-sidebar-style-button > span:first-of-type {
+        border-radius: var(--r-sm);
+    }
+
+    .canvas-project-sidebar-section-heading {
+        color: color-mix(in srgb, var(--foreground) 52%, transparent);
+    }
+
+    .canvas-project-sidebar-search {
+        min-height: 34px;
+        border-color: color-mix(in srgb, var(--foreground) 10%, transparent) !important;
+        background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
+        transition:
+            border-color var(--motion-instant) var(--ease-product-enter),
+            background-color var(--motion-instant) var(--ease-product-enter),
+            box-shadow var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .canvas-project-sidebar-search:focus-within {
+        border-color: color-mix(in srgb, var(--workspace-accent) 42%, transparent) !important;
+        background: var(--background) !important;
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent);
+    }
+
+    .canvas-project-sidebar-chapter-scroll {
+        scrollbar-width: thin;
+        scrollbar-color: color-mix(in srgb, var(--foreground) 12%, transparent) transparent;
+    }
+
+    .canvas-project-sidebar-chapter-row {
+        border-radius: var(--r-md);
+        color: color-mix(in srgb, var(--foreground) 70%, transparent);
+        transition:
+            background-color var(--motion-instant) var(--ease-product-enter),
+            color var(--motion-instant) var(--ease-product-enter),
+            transform var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .canvas-project-sidebar-chapter-row:hover {
+        background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
+        color: var(--foreground);
+    }
+
+
+    .canvas-project-sidebar-chapter-row.bg-surface-active {
+        background: color-mix(in srgb, var(--workspace-accent) 9%, transparent) !important;
+        color: var(--foreground);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 12%, transparent);
+    }
+
+    .canvas-project-sidebar-assets-button {
+        min-height: 40px;
+        border-color: color-mix(in srgb, var(--foreground) 10%, transparent) !important;
+        border-radius: var(--r-md);
+        background: color-mix(in srgb, var(--background) 74%, var(--foreground) 3%);
+        transition:
+            background-color var(--motion-instant) var(--ease-product-enter),
+            border-color var(--motion-instant) var(--ease-product-enter),
+            color var(--motion-instant) var(--ease-product-enter),
+            transform var(--motion-instant) var(--ease-product-enter);
+    }
+
+    .canvas-project-sidebar-assets-button:hover {
+        border-color: color-mix(in srgb, var(--workspace-accent) 30%, transparent) !important;
+        background: color-mix(in srgb, var(--workspace-accent) 7%, var(--background));
+        color: var(--foreground);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .canvas-project-sidebar-header a,
+        .canvas-project-sidebar-header button,
+        .canvas-project-sidebar-back-link,
+        .canvas-project-sidebar-style-button,
+        .canvas-project-sidebar-search,
+        .canvas-project-sidebar-chapter-row,
+        .canvas-project-sidebar-assets-button {
+            transition: none;
+        }
+    }
+
     .app-workspace-main-row {
         display: flex;
         gap: var(--workspace-card-gap);
@@ -1731,10 +2006,11 @@
     .app-workspace-topbar {
         position: relative;
         z-index: var(--z-toolbar);
-        height: 44px;
+        height: var(--workspace-topbar-height, 56px);
         border: 0;
+        border-bottom: 1px solid var(--workspace-border);
         border-radius: 0;
-        background: transparent;
+        background: color-mix(in srgb, var(--workspace-content) 94%, transparent);
         box-shadow: none;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
@@ -2244,46 +2520,6 @@
         color: var(--control-selected-fg) !important;
     }
 
-    /* 用户端主按钮与弹窗确认：统一描边，不再用实心填充。后台和管理登录 CTA 不受影响。 */
-    .app-user-workspace .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]),
-    .app-user-overlays .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]),
-    .library-primary-action {
-        border: 1px solid var(--btn-outline-border) !important;
-        background: transparent !important;
-        color: var(--foreground) !important;
-        box-shadow: none !important;
-    }
-
-    .app-user-workspace .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):hover,
-    .app-user-overlays .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):hover,
-    .library-primary-action:not(:disabled):hover {
-        border-color: var(--btn-outline-hover-border) !important;
-        background: var(--btn-outline-hover-bg) !important;
-        color: var(--foreground) !important;
-    }
-
-    .app-user-workspace .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):active,
-    .app-user-overlays .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):active,
-    .library-primary-action:not(:disabled):active {
-        background: var(--btn-outline-active-bg) !important;
-        color: var(--foreground) !important;
-    }
-
-    .app-user-workspace .ant-btn-primary.ant-btn-dangerous:not([aria-pressed="true"]),
-    .app-user-overlays .ant-btn-primary.ant-btn-dangerous:not([aria-pressed="true"]) {
-        border: 1px solid color-mix(in srgb, var(--status-error) 42%, transparent) !important;
-        background: transparent !important;
-        color: var(--status-error) !important;
-        box-shadow: none !important;
-    }
-
-    .app-user-workspace .ant-btn-primary.ant-btn-dangerous:not([aria-pressed="true"]):not(:disabled):hover,
-    .app-user-overlays .ant-btn-primary.ant-btn-dangerous:not([aria-pressed="true"]):not(:disabled):hover {
-        border-color: color-mix(in srgb, var(--status-error) 58%, transparent) !important;
-        background: color-mix(in srgb, var(--status-error) 8%, transparent) !important;
-        color: var(--status-error) !important;
-    }
-
     /* AntD Switch 只有一个 handleBg token，无法分别表达开/关滑块颜色。
        这里是全应用唯一的状态配对层，确保任何容器和 Portal 中都保持对比。 */
     :where(.ant-switch.ant-switch-checked) {
@@ -2731,34 +2967,34 @@
         transform: rotate(180deg);
     }
 
-    .creation-model-picker.canvas-composer-model-picker {
-        width: min(210px, 25vw) !important;
-        height: 36px !important;
-        border: 1px solid var(--creation-border) !important;
-        border-radius: 8px !important;
-        background: color-mix(in srgb, var(--creation-surface-muted) 70%, transparent) !important;
-        color: var(--creation-text) !important;
-        padding: 0 9px !important;
+.creation-model-picker.canvas-composer-model-picker {
+        width: min(210px, 25vw);
+        height: 36px;
+        border: 1px solid var(--creation-border);
+        border-radius: 8px;
+        background: color-mix(in srgb, var(--creation-surface-muted) 70%, transparent);
+        color: var(--creation-text);
+        padding: 0 9px;
         font-size: 11px;
         font-weight: 600;
     }
 
-    .creation-model-picker.canvas-composer-model-picker:hover,
+.creation-model-picker.canvas-composer-model-picker:hover,
     .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-        border-color: var(--creation-border-strong) !important;
-        background: var(--creation-surface-hover) !important;
+        border-color: var(--creation-border-strong);
+        background: var(--creation-surface-hover);
     }
 
-    .dark .creation-model-picker.canvas-composer-model-picker {
-        border: 1px solid rgba(255, 255, 255, .075) !important;
-        background: rgba(38, 41, 48, .64) !important;
+.dark .creation-model-picker.canvas-composer-model-picker {
+        border: 1px solid rgba(255, 255, 255, .075);
+        background: rgba(38, 41, 48, .64);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
     }
 
-    .dark .creation-model-picker.canvas-composer-model-picker:hover,
+.dark .creation-model-picker.canvas-composer-model-picker:hover,
     .dark .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-        border-color: rgba(255, 255, 255, .13) !important;
-        background: rgba(48, 52, 61, .82) !important;
+        border-color: rgba(255, 255, 255, .13);
+        background: rgba(48, 52, 61, .82);
     }
 
     .creation-model-picker .canvas-model-picker-trigger-icon {
@@ -3438,19 +3674,19 @@
         gap: 10px;
     }
 
-    .creation-studio-control,
+.creation-studio-control,
     .creation-model-picker.canvas-composer-model-picker {
         display: inline-flex;
-        height: 48px !important;
+        height: 48px;
         min-width: 0;
         align-items: center;
         justify-content: center;
         gap: 10px;
-        border: 1px solid rgba(255, 255, 255, .12) !important;
-        border-radius: 14px !important;
-        background: #202329 !important;
-        color: #f1f3f5 !important;
-        padding: 0 15px !important;
+        border: 1px solid rgba(255, 255, 255, .12);
+        border-radius: 14px;
+        background: #202329;
+        color: #f1f3f5;
+        padding: 0 15px;
         font-size: 14px;
         font-weight: 600;
         white-space: nowrap;
@@ -3458,27 +3694,27 @@
         transition: transform 150ms var(--motion-ease-out), border-color 150ms ease, background-color 150ms ease;
     }
 
-    html:not(.dark) .creation-studio-control,
+html:not(.dark) .creation-studio-control,
     html:not(.dark) .creation-model-picker.canvas-composer-model-picker {
-        border-color: rgba(32, 37, 45, .12) !important;
-        background: #f0f2f5 !important;
-        color: #20242a !important;
+        border-color: rgba(32, 37, 45, .12);
+        background: #f0f2f5;
+        color: #20242a;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
     }
 
-    .creation-studio-control:hover,
+.creation-studio-control:hover,
     .creation-studio-control[aria-expanded="true"],
     .creation-model-picker.canvas-composer-model-picker:hover,
     .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-        border-color: rgba(255, 255, 255, .25) !important;
-        background: #292d34 !important;
+        border-color: rgba(255, 255, 255, .25);
+        background: #292d34;
         transform: translateY(-1px);
     }
 
-    html:not(.dark) .creation-studio-control:hover,
+html:not(.dark) .creation-studio-control:hover,
     html:not(.dark) .creation-studio-control[aria-expanded="true"],
     html:not(.dark) .creation-model-picker.canvas-composer-model-picker:hover,
-    html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { background: #e7eaee !important; border-color: rgba(32, 37, 45, .22) !important; }
+    html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { background: #e7eaee; border-color: rgba(32, 37, 45, .22); }
 
     .creation-studio-control:active { transform: scale(.98); }
     .creation-studio-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(4, 73, 89, .28) !important; color: #18c2e1 !important; }
@@ -3486,8 +3722,8 @@
     .creation-studio-control > svg:last-child { width: 17px; height: 17px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); }
     .creation-studio-control > svg:last-child.is-open { transform: rotate(180deg); }
 
-    .creation-model-picker.canvas-composer-model-picker {
-        width: min(328px, 30vw) !important;
+.creation-model-picker.canvas-composer-model-picker {
+        width: min(328px, 30vw);
         justify-content: flex-start;
         font-size: 15px;
     }
@@ -3658,16 +3894,16 @@
     .creation-chat-control,
     .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
         display: inline-flex;
-        height: 32px !important;
+        height: 32px;
         min-width: 0;
         align-items: center;
         justify-content: center;
         gap: 6px;
-        border: 1px solid rgba(255, 255, 255, .055) !important;
-        border-radius: 8px !important;
-        background: rgba(30, 33, 39, .78) !important;
-        color: #e6e9ed !important;
-        padding: 0 9px !important;
+        border: 1px solid rgba(255, 255, 255, .055);
+        border-radius: 8px;
+        background: rgba(30, 33, 39, .78);
+        color: #e6e9ed;
+        padding: 0 9px;
         font-size: 11px;
         font-weight: 600;
         white-space: nowrap;
@@ -3677,18 +3913,18 @@
     .creation-chat-control:hover,
     .creation-chat-control[aria-expanded="true"],
     .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
-    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { border-color: rgba(255, 255, 255, .12) !important; background: #272b32 !important; transform: translateY(-1px); }
+    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { border-color: rgba(255, 255, 255, .12); background: #272b32; transform: translateY(-1px); }
     .creation-chat-control:active { transform: scale(.98); }
     .creation-chat-control > svg { width: 15px; height: 15px; flex: 0 0 auto; }
     .creation-chat-control > svg:last-child { width: 14px; height: 14px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); }
     .creation-chat-control > svg:last-child.is-open { transform: rotate(180deg); }
-    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(196px, 26vw) !important; justify-content: flex-start; }
+    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(196px, 26vw); justify-content: flex-start; }
     .creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 19px; height: 19px; border-radius: 5px; }
 
     html:not(.dark) .creation-chat-control,
-    html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { border-color: transparent !important; background: #f1f3f5 !important; color: #262b32 !important; }
+    html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { border-color: transparent; background: #f1f3f5; color: #262b32; }
     html:not(.dark) .creation-chat-control:hover,
-    html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { border-color: rgba(20, 26, 35, .2) !important; background: #e9edf1 !important; }
+    html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { border-color: rgba(20, 26, 35, .2); background: #e9edf1; }
 
     .creation-control-popover-surface {
         border: 0 !important;
@@ -3787,8 +4023,8 @@
         .creation-chat-editor textarea { min-height: 68px; font-size: 14px; }
         .creation-chat-dock { align-items: flex-end; padding: 8px 9px 9px 12px; }
         .creation-chat-controls { max-width: calc(100% - 42px); gap: 5px; }
-        .creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 34px !important; padding: 0 8px !important; font-size: 11px; }
-        .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(152px, 48vw) !important; }
+.creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 34px; padding: 0 8px; font-size: 11px; }
+.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(152px, 48vw); }
         .creation-thread-stage { padding-top: 28px; }
         .creation-assistant-message { margin-bottom: 32px; }
         .creation-message-content, .creation-message-error { padding-left: 0; }
@@ -3853,9 +4089,9 @@
             padding: 0 9px;
         }
 
-        .creation-model-picker.canvas-composer-model-picker {
-            width: min(194px, 62vw) !important;
-            height: 34px !important;
+.creation-model-picker.canvas-composer-model-picker {
+            width: min(194px, 62vw);
+            height: 34px;
         }
 
         .creation-submit-button {
@@ -3979,9 +4215,9 @@
         }
 
         .creation-studio-controls { max-width: calc(100% - 58px); gap: 8px; }
-        .creation-studio-control,
-        .creation-model-picker.canvas-composer-model-picker { height: 42px !important; border-radius: 12px !important; padding: 0 11px !important; font-size: 12px; }
-        .creation-model-picker.canvas-composer-model-picker { width: min(150px, 44vw) !important; }
+.creation-studio-control,
+        .creation-model-picker.canvas-composer-model-picker { height: 42px; border-radius: 12px; padding: 0 11px; font-size: 12px; }
+.creation-model-picker.canvas-composer-model-picker { width: min(150px, 44vw); }
         .creation-studio-control > svg { width: 16px; height: 16px; }
         .creation-studio-submit { width: 50px; height: 50px; }
     }
@@ -4357,6 +4593,107 @@
         padding-inline: 0;
     }
 
+    /* 用户端内容库统一壳层：让资产、技能、任务和项目共享同一套创作型浏览节奏。 */
+    .app-user-workspace .library-page > div {
+        width: min(100%, 1440px);
+        margin-inline: auto;
+    }
+
+    .app-user-workspace .library-page .app-page-header {
+        min-height: 72px;
+        padding-block: 12px 14px;
+    }
+
+    .app-user-workspace .library-page .app-page-header > div:first-child {
+        min-width: 0;
+    }
+
+    .app-user-workspace .library-page .app-page-header h1,
+    .app-user-workspace .library-page .app-page-header p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .app-user-workspace .library-page .library-toolbar {
+        min-height: 52px;
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-xl);
+        background: color-mix(in srgb, var(--workspace-surface) 84%, transparent);
+        padding: 6px 8px;
+        box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 3%, transparent);
+        backdrop-filter: blur(14px) saturate(1.08);
+        -webkit-backdrop-filter: blur(14px) saturate(1.08);
+    }
+
+    .app-user-workspace .library-page .library-toolbar:focus-within {
+        border-color: color-mix(in srgb, var(--workspace-accent) 20%, transparent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 7%, transparent), 0 8px 24px color-mix(in srgb, var(--foreground) 3%, transparent);
+    }
+
+    .app-user-workspace .library-page .library-toolbar .ant-input-affix-wrapper,
+    .app-user-workspace .library-page .library-toolbar .ant-select,
+    .app-user-workspace .library-page .library-toolbar .ant-segmented {
+        min-height: 38px;
+    }
+
+    .app-user-workspace .library-page .library-toolbar .ant-btn:focus-visible,
+    .app-user-workspace .library-page .library-toolbar .ant-input-affix-wrapper:focus-within,
+    .app-user-workspace .library-page .library-toolbar .ant-select-focused .ant-select-selector,
+    .app-user-workspace .library-page .library-toolbar .ant-segmented:focus-within {
+        outline: 2px solid color-mix(in srgb, var(--workspace-accent) 28%, transparent);
+        outline-offset: 2px;
+    }
+
+    .app-user-workspace .library-page .canvas-library-frame,
+    .app-user-workspace .library-page .assets-library-frame,
+    .app-user-workspace .library-page .task-library-frame {
+        border-radius: var(--r-xl);
+    }
+
+    .app-user-workspace .library-page .library-card,
+    .app-user-workspace .library-page .task-record-row,
+    .app-user-workspace .library-page .task-grid-card {
+        transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) ease-out, box-shadow var(--motion-state) ease-out;
+    }
+
+    .app-user-workspace .library-page .library-card:hover,
+    .app-user-workspace .library-page .library-card:focus-within,
+    .app-user-workspace .library-page .task-record-row:hover,
+    .app-user-workspace .library-page .task-record-row:focus-within,
+    .app-user-workspace .library-page .task-grid-card:hover,
+    .app-user-workspace .library-page .task-grid-card:focus-within {
+        box-shadow: 0 12px 32px color-mix(in srgb, var(--foreground) 5%, transparent);
+    }
+
+    @media (max-width: 767px) {
+        .app-user-workspace .library-page > div {
+            padding-inline: 12px;
+        }
+
+        .app-user-workspace .library-page .app-page-header {
+            min-height: 64px;
+            padding-block: 10px 12px;
+        }
+
+        .app-user-workspace .library-page .app-page-header > div:last-child {
+            max-width: 100%;
+        }
+
+        .app-user-workspace .library-page .library-toolbar {
+            align-items: stretch;
+            border-radius: var(--r-lg);
+            padding: 6px;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .app-user-workspace .library-page .library-card,
+        .app-user-workspace .library-page .task-record-row,
+        .app-user-workspace .library-page .task-grid-card {
+            transition: none;
+        }
+    }
+
     /* 技能中心 hero：GalleryGridBlock 式标题区——徽章 + 大标题 + 描述居中，背景点阵 + 双光斑，底部淡出到页面背景。仅技能页。 */
     .skills-hero { position: relative; overflow: hidden; margin-top: 4px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--foreground) 2%, transparent); }
     .skills-hero::before { position: absolute; inset: 0; background-image: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 42%), radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 40%), radial-gradient(circle at 50% 130%, color-mix(in srgb, var(--foreground) 10%, transparent), transparent 46%), radial-gradient(circle, color-mix(in srgb, var(--foreground) 4.5%, transparent) 1px, transparent 1.6px); background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px; content: ""; pointer-events: none; }
@@ -4454,7 +4791,20 @@
     .settings-channel-status i { width: var(--space-1-half); height: var(--space-1-half); flex: 0 0 auto; border-radius: var(--r-full); background: currentColor; }
     .settings-channel-status.is-ready { color: color-mix(in srgb, var(--palette-status-success) 74%, var(--foreground)); }
     .settings-channel-status.is-warning { color: color-mix(in srgb, var(--palette-status-warning) 78%, var(--foreground)); }
-    .settings-preference-block + .settings-preference-block { margin-top: var(--space-2); }
+    .settings-preference-block + .settings-preference-block { margin-top: var(--space-5); }
+    .settings-preference-heading { margin-bottom: var(--space-5); }
+    .settings-preference-heading h3 {
+        margin: 0;
+        color: color-mix(in srgb, var(--foreground) 62%, transparent);
+        font-size: 13px;
+        font-weight: 600;
+    }
+    .settings-preference-heading p {
+        margin: 8px 0 0;
+        color: color-mix(in srgb, var(--foreground) 52%, transparent);
+        font-size: var(--fs-caption);
+        line-height: 1.6;
+    }
 
     .workflow-workspace-tabs {
         display: flex;
@@ -5113,7 +5463,7 @@
         align-items: flex-end;
         justify-content: space-between;
         gap: 10px 14px;
-        margin-bottom: 14px;
+        margin-bottom: 20px;
     }
 
     .settings-pane-header h2 {
@@ -5235,25 +5585,6 @@
     .library-page .app-page-header .workspace-signal-icon,
     .library-page .app-page-header .workspace-signal-icon > svg { transition: transform 420ms var(--motion-ease-out); }
     .library-page .app-page-header:hover .workspace-signal-icon { transform: rotate(-6deg) scale(1.04); }
-    /* 页面头部按钮优化 - 去除重边框 */
-    html:not(.dark) .library-page .app-page-header .ant-btn,
-    html:not(.dark) .canvas-library-page .app-page-header .ant-btn {
-        border: 1px solid var(--btn-outline-border) !important;
-        background: transparent !important;
-        color: var(--foreground) !important;
-        box-shadow: none !important;
-        transition: all 180ms ease-out !important;
-    }
-    html:not(.dark) .library-page .app-page-header .ant-btn:hover,
-    html:not(.dark) .canvas-library-page .app-page-header .ant-btn:hover {
-        border-color: var(--btn-outline-hover-border) !important;
-        background: var(--btn-outline-hover-bg) !important;
-        color: var(--foreground) !important;
-        box-shadow: none !important;
-        transform: translateY(-1px);
-    }
-    .library-primary-action { border: 1px solid var(--btn-outline-border) !important; border-radius: var(--r-md) !important; background: transparent !important; color: var(--foreground) !important; box-shadow: none !important; font-weight: 560; }
-
     /* 画布库页头操作：沿用现有配色，只统一几何比例与触感反馈。 */
     .canvas-library-header-actions {
         display: flex;
@@ -5550,7 +5881,7 @@
     .task-grid-card:hover .task-grid-overlay, .task-grid-card:focus-within .task-grid-overlay { opacity: 1; }
     .task-grid-overlay .ant-btn { width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--background) 86%, transparent); box-shadow: none; color: var(--foreground); }
     .task-grid-overlay .ant-btn:hover { color: var(--foreground); background: var(--background); }
-    .task-grid-body { padding: 10px 12px 11px; }
+    .task-grid-body { padding: 10px 12px 12px; }
     .task-grid-title { display: block; width: 100%; min-width: 0; overflow: hidden; border: 0; background: transparent; padding: 0; color: color-mix(in srgb, var(--foreground) 90%, transparent); text-align: left; font-size: var(--fs-body); font-weight: 560; line-height: 1.45; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
     .task-grid-title:hover { color: var(--foreground); }
     .task-grid-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
@@ -5559,6 +5890,12 @@
     .task-grid-status.is-active { color: color-mix(in srgb, var(--palette-status-warning) 80%, var(--foreground)); }
     .task-grid-status.is-success { color: color-mix(in srgb, var(--palette-status-success) 80%, var(--foreground)); }
     .task-grid-date { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 36%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
+    .task-grid-progress { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; margin-top: 10px; color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-label); }
+    .task-grid-progress span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .task-grid-progress strong { color: color-mix(in srgb, var(--foreground) 68%, transparent); font-size: var(--fs-tiny); font-weight: 620; font-variant-numeric: tabular-nums; }
+    .task-grid-progress i { grid-column: 1 / -1; display: block; height: 3px; overflow: hidden; border-radius: var(--r-full); background: color-mix(in srgb, var(--foreground) 9%, transparent); }
+    .task-grid-progress b { display: block; height: 100%; border-radius: inherit; background: var(--workspace-accent); transition: width 420ms var(--motion-ease-out); }
+    .task-grid-error { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: color-mix(in srgb, var(--palette-status-error) 72%, var(--foreground)); font-size: var(--fs-label); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
     @media (max-width: 640px) {
         .task-group-name { flex-wrap: wrap; }
         .task-group-reset { margin-left: 0; }
@@ -5575,49 +5912,116 @@
 
     /* 项目概览：原本是「有边框的浅色盒子 + 一堆等重小字」，层级读不出来。
        改成：主区留白撑开、标题字阶拉高、右栏用背景色而非边框分隔、流水线行给足行高。 */
-    .project-workspace-topbar { display: flex; width: 100%; min-width: 0; height: 44px; align-items: center; gap: 6px; transform: translateY(1px); }
-    .project-workspace-back, .project-workspace-create { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: var(--r-md); color: color-mix(in srgb, var(--foreground) 44%, transparent); transition: background-color var(--motion-instant), color var(--motion-instant); }
-    .project-workspace-back:hover, .project-workspace-create:hover { background: var(--surface-hover); color: var(--foreground); }
-    .project-workspace-back:focus-visible, .project-workspace-create:focus-visible, .project-workspace-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
-    .project-workspace-back svg, .project-workspace-create svg { width: 15px; height: 15px; }
-    .project-workspace-identity { display: flex; min-width: 84px; max-width: clamp(118px, 15vw, 220px); flex: 1 1 180px; align-items: center; gap: 7px; overflow: hidden; }
-    .project-workspace-identity h1 { min-width: 0; margin: 0; overflow: hidden; color: color-mix(in srgb, var(--foreground) 90%, transparent); font-size: var(--fs-caption); font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
-    .project-workspace-status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: var(--workspace-accent); }
-    .project-workspace-status-dot.is-archived { background: color-mix(in srgb, var(--foreground) 30%, transparent); }
-    .project-workspace-status-label { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 42%, transparent); font-size: var(--fs-tiny); white-space: nowrap; }
-    .project-workspace-tabs { display: flex; min-width: 0; height: 44px; flex: 1 1 auto; align-items: center; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
-    .project-workspace-tabs::-webkit-scrollbar { display: none; }
-    .project-workspace-tab { position: relative; display: inline-flex; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; border-radius: var(--r-md); padding: 0 clamp(6px, .62vw, 9px); color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: clamp(11px, .76vw, 12px); font-weight: 560; line-height: 1; white-space: nowrap; transition: background-color var(--motion-instant), color var(--motion-instant); }
-    .project-workspace-tab:hover { background: var(--surface-hover); color: var(--foreground); }
-    .project-workspace-tab.is-active { background: var(--workspace-accent-soft); color: var(--workspace-accent); }
-    .project-workspace-tab.is-active::after { position: absolute; right: 9px; bottom: 0; left: 9px; height: 2px; border-radius: 999px; background: var(--workspace-accent); content: ""; }
-    .project-workspace-tab svg { width: 14px; height: 14px; flex: 0 0 auto; stroke-width: 1.8; }
-    @media (max-width: 1380px) {
-        .project-workspace-identity { max-width: 150px; flex-basis: 130px; }
-        .project-workspace-status-label { display: none; }
-        .project-workspace-tab { gap: 4px; padding-inline: 6px; font-size: 11px; }
+    .project-workspace-header {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        align-items: center;
+        gap: 16px 20px;
+        width: 100%;
+        min-width: 0;
+        flex: 0 0 auto;
+        min-height: 56px;
+        padding: 8px 20px;
+        border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        background: transparent;
+        color: var(--user-ink, var(--foreground));
+    }
+    .project-workspace-identity { display: flex; min-width: 0; align-items: center; gap: 8px; }
+    .project-workspace-back, .project-workspace-create {
+        display: inline-flex;
+        height: 32px;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        border: 0;
+        border-radius: 10px;
+        background: transparent;
+        color: color-mix(in srgb, var(--foreground) 48%, transparent);
+        transition: background-color var(--motion-instant), color var(--motion-instant);
+    }
+    .project-workspace-back { width: 32px; }
+    .project-workspace-create { padding: 0 10px 0 8px; }
+    .project-workspace-header a { color: inherit; text-decoration: none; }
+    .project-workspace-create span { font-size: 12px; font-weight: 600; }
+    .project-workspace-back:hover, .project-workspace-create:hover { background: var(--user-surface-muted, var(--surface-hover)); color: var(--user-ink, var(--foreground)); }
+    .project-workspace-back:focus-visible, .project-workspace-create:focus-visible, .project-workspace-tab:focus-visible { outline: 2px solid var(--user-accent, var(--ring)); outline-offset: 2px; }
+    .project-workspace-back svg, .project-workspace-create svg { width: 16px; height: 16px; stroke-width: 1.8; }
+    .project-workspace-title { display: flex; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 8px; }
+    .project-workspace-title h1 { min-width: 0; max-width: 22ch; margin: 0; overflow: hidden; color: var(--user-ink, var(--foreground)); font-size: 15px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
+    .project-workspace-status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
+    .project-workspace-status.is-active { background: var(--user-accent-soft, var(--workspace-accent-soft)); color: var(--user-accent, var(--workspace-accent)); }
+    .project-workspace-status.is-archived { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: color-mix(in srgb, var(--foreground) 48%, transparent); }
+    .project-workspace-tabs {
+        display: flex;
+        min-width: 0;
+        width: fit-content;
+        max-width: 100%;
+        height: 40px;
+        align-items: center;
+        gap: 2px;
+        justify-self: start;
+        padding: 3px;
+        overflow-x: auto;
+        overscroll-behavior-x: contain;
+        scrollbar-width: none;
+        border-radius: 12px;
+        background: var(--user-surface-muted, color-mix(in srgb, var(--foreground) 5%, transparent));
+        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
+    }
+    .project-workspace-tabs:not(:hover) { mask-image: none; }
+    .project-workspace-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
+    .project-workspace-tab {
+        display: inline-flex;
+        height: 34px;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        padding: 0 12px;
+        border-radius: 9px;
+        color: var(--user-ink-muted, color-mix(in srgb, var(--foreground) 48%, transparent));
+        font-size: 13px;
+        font-weight: 560;
+        line-height: 1;
+        white-space: nowrap;
+        transition: background-color var(--motion-instant), color var(--motion-instant), box-shadow var(--motion-instant);
+    }
+    .project-workspace-tab:hover { color: var(--user-ink, var(--foreground)); }
+    .project-workspace-tab.is-active {
+        background: var(--user-surface, var(--background));
+        color: var(--user-ink, var(--foreground));
+        font-weight: 650;
+        box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent);
+    }
+    .project-workspace-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
+    @media (max-width: 1180px) {
+        .project-workspace-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; padding-inline: 16px; }
+        .project-workspace-tab { padding-inline: 10px; font-size: 12px; }
+        .project-workspace-create span { display: none; }
+        .project-workspace-create { width: 32px; padding: 0; }
     }
     @media (max-width: 900px) {
-        .project-workspace-identity { max-width: 112px; flex-basis: 96px; }
-        .project-workspace-status-dot { display: none; }
+        .project-workspace-header { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 14px 10px; }
+        .project-workspace-tabs { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
+        .project-workspace-title h1 { font-size: 14px; }
     }
     @media (max-width: 640px) {
-        .project-workspace-topbar { gap: 4px; }
-        .project-workspace-identity { min-width: 72px; max-width: 96px; flex-basis: 82px; }
+        .project-workspace-header { padding-inline: 12px; gap: 10px; }
+        .project-workspace-tab { padding-inline: 9px; }
     }
 
-    .workflow-chapter-navigator { display: none; height: 30px; flex: 0 0 auto; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
-    @media (min-width: 1280px) { .workflow-chapter-navigator { display: flex; } }
+    .workflow-chapter-navigator { display: none; height: 32px; flex: 0 0 auto; align-items: center; overflow: hidden; border: 0; border-radius: 10px; background: var(--user-surface-muted, var(--surface)); }
+    @media (min-width: 1100px) { .workflow-chapter-navigator { display: flex; } }
     .workflow-chapter-navigator > button { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: color-mix(in srgb, var(--foreground) 48%, transparent); transition: background-color var(--motion-instant), color var(--motion-instant); }
     .workflow-chapter-navigator > button:hover:not(:disabled) { background: var(--surface-hover); color: var(--foreground); }
     .workflow-chapter-navigator > button:disabled { cursor: not-allowed; opacity: .28; }
     .workflow-chapter-navigator > button svg { width: 14px; height: 14px; }
-    .workflow-chapter-navigator .workflow-chapter-current { display: flex; width: clamp(124px, 11vw, 156px); padding: 0 7px; border-right: 1px solid var(--border); border-left: 1px solid var(--border); gap: 5px; text-align: left; }
+    .workflow-chapter-navigator .workflow-chapter-current { display: flex; width: clamp(124px, 11vw, 156px); padding: 0 7px; border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); border-left: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); gap: 5px; text-align: left; }
     .workflow-chapter-current > span { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 44%, transparent); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
     .workflow-chapter-current > strong { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--foreground); font-size: var(--fs-label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
     .workflow-chapter-current > em { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 35%, transparent); font-size: var(--fs-micro); font-style: normal; font-variant-numeric: tabular-nums; }
     .workflow-chapter-current > svg { flex: 0 0 auto; }
-    @media (min-width: 1280px) and (max-width: 1439px) {
+    @media (min-width: 1100px) and (max-width: 1279px) {
         .workflow-chapter-navigator > button:first-child, .workflow-chapter-navigator > button:last-child { display: none; }
         .workflow-chapter-navigator .workflow-chapter-current { width: 88px; justify-content: center; border: 0; padding-inline: 7px; }
         .workflow-chapter-current > strong, .workflow-chapter-current > svg { display: none; }
@@ -6016,6 +6420,124 @@
         .wallet-account-status { grid-row: auto; grid-column: auto; }
     }
 
+    /* 积分超市：消费型入口优先，真实余额与可追溯明细保持在同一条工作流内。 */
+    .wallet-market-page {
+        --wallet-market-wash: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
+    }
+
+    .wallet-market-page > div {
+        max-width: 1440px;
+        margin-inline: auto;
+    }
+
+    .wallet-market-page .studio-band {
+        position: relative;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-xl);
+        background:
+            radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--workspace-accent) 9%, transparent), transparent 30%),
+            linear-gradient(135deg, color-mix(in srgb, var(--workspace-surface) 94%, transparent), color-mix(in srgb, var(--workspace-surface) 70%, var(--workspace-canvas)));
+        box-shadow: 0 14px 40px color-mix(in srgb, var(--workspace-canvas) 26%, transparent);
+    }
+
+    .wallet-market-page .studio-band::after {
+        position: absolute;
+        inset: auto -10% -58% 42%;
+        height: 180px;
+        border-radius: 50%;
+        background: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
+        content: "";
+        filter: blur(22px);
+        pointer-events: none;
+    }
+
+    .wallet-market-page .app-page-header {
+        position: relative;
+        z-index: 1;
+        min-height: 108px;
+        align-items: center;
+        padding: 22px 24px;
+    }
+
+    .wallet-market-page .app-page-header h1 {
+        letter-spacing: -0.025em;
+    }
+
+    .wallet-market-page .wallet-credit-meta {
+        border: 1px solid color-mix(in srgb, var(--workspace-accent) 18%, transparent);
+        background: var(--wallet-market-wash);
+    }
+
+    .wallet-market-page .library-feature-grid {
+        align-items: stretch;
+    }
+
+    .wallet-market-page .credit-balance-card,
+    .wallet-market-page .wallet-redeem-panel,
+    .wallet-market-page > div > section:not(.library-feature-grid) {
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-xl);
+        box-shadow: 0 12px 30px color-mix(in srgb, var(--workspace-canvas) 20%, transparent);
+    }
+
+    .wallet-market-page .credit-balance-card {
+        background:
+            linear-gradient(145deg, color-mix(in srgb, var(--workspace-surface-strong) 98%, transparent), color-mix(in srgb, var(--workspace-surface-strong) 82%, var(--workspace-accent)));
+    }
+
+    .wallet-market-page .wallet-redeem-panel {
+        background: color-mix(in srgb, var(--workspace-surface) 92%, transparent);
+    }
+
+    .wallet-market-page .wallet-redeem-panel .ant-input-affix-wrapper,
+    .wallet-market-page .wallet-redeem-panel .ant-input {
+        border-radius: var(--r-md);
+    }
+
+    .wallet-market-page .wallet-redeem-panel .ant-btn,
+    .wallet-market-page .wallet-ledger-panel .ant-segmented,
+    .wallet-market-page .app-workspace-surface > .ant-btn {
+        border-radius: var(--r-md);
+    }
+
+    .wallet-market-page .wallet-ledger-panel {
+        background: color-mix(in srgb, var(--workspace-surface) 90%, transparent);
+    }
+
+    .wallet-market-page .wallet-ledger-panel .ant-table-wrapper {
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
+        border-radius: var(--r-lg);
+    }
+
+    .wallet-market-page .wallet-ledger-panel .ant-table-thead > tr > th {
+        background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
+    }
+
+    .wallet-market-page .wallet-ledger-panel .ant-table-tbody > tr:last-child > td {
+        border-bottom: 0;
+    }
+
+    @media (max-width: 640px) {
+        .wallet-market-page .app-page-header {
+            min-height: 0;
+            padding: 18px;
+        }
+
+        .wallet-market-page .app-page-header > div:last-child {
+            width: 100%;
+        }
+
+        .wallet-market-page .app-page-header > div:last-child > * {
+            flex: 1 1 auto;
+        }
+
+        .wallet-market-page .app-page-header .ant-btn {
+            min-width: 0;
+        }
+    }
+
     .library-loading-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; margin-top: 20px; }
     /* 画布骨架屏 - 使用新token */
     .library-skeleton { aspect-ratio: 16 / 10; border-radius: var(--r-xl); background: var(--skeleton-surface); animation: library-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@@ -6054,13 +6576,21 @@
     @media (max-width: 639px) {
         .project-library-grid, .project-assets-grid, .assets-library-grid, .skill-library-grid, .library-loading-grid { grid-template-columns: 1fr; gap: 22px; }
         .library-create-title, .project-library-heading strong, .skill-library-card h3 { font-size: var(--fs-body); }
-        .task-record-row { grid-template-columns: 60px minmax(0, 1fr) 64px 92px; align-items: start; gap: 12px; min-height: 0; padding: 12px 8px; }
+        .task-record-row { grid-template-columns: 60px minmax(0, 1fr) 36px; align-items: start; gap: 10px; min-height: 0; padding: 12px 8px; }
         .task-record-row > .task-record-thumb { width: 60px; height: 44px; }
         .task-record-heading { flex-wrap: wrap; gap: 6px 8px; }
         .task-record-title { max-width: none; flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
         .task-record-date { display: none; }
-        .task-record-billing { min-width: 64px; }
+        .task-record-billing, .task-record-billing-empty { display: none; }
         .task-record-actions { opacity: 1; transform: none; }
+        .task-record-actions { justify-content: flex-end; }
+        .task-record-actions .ant-btn { width: 30px; height: 30px; }
+        .task-record-meta { flex-wrap: wrap; white-space: normal; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .task-grid-progress b,
+        .task-record-progress b { transition: none; }
     }
 
     @media (max-width: 639px) {
@@ -7518,12 +8048,18 @@
     }
 
     .canvas-floating-dock {
-        border: 0 !important;
+        border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent) !important;
+        max-width: calc(100vw - 24px);
+        scrollbar-width: none;
         box-shadow:
             0 1px 2px rgba(15, 23, 42, 0.06),
             0 10px 26px rgba(15, 23, 42, 0.08);
     }
 
+    .canvas-floating-dock::-webkit-scrollbar {
+        display: none;
+    }
+
     .dark .canvas-floating-dock {
         box-shadow:
             0 1px 1px rgba(0, 0, 0, 0.28),
@@ -10362,7 +10898,7 @@ html:not(.dark) .creation-home {
 }
 
 .creation-empty-workspace {
-    width: min(1000px, calc(100% - 56px));
+    width: min(1120px, calc(100% - 64px));
     min-height: 100%;
     margin: 0 auto;
     padding: 0 0 5vh;
@@ -10377,22 +10913,25 @@ html:not(.dark) .creation-home {
 .creation-chat-composer {
     width: 100%;
     overflow: hidden;
-    border: 0;
-    border-radius: 16px;
+    border: 1px solid var(--creation-border);
+    border-radius: var(--r-lg);
     background: var(--creation-surface);
-    box-shadow: 0 20px 58px rgba(0, 0, 0, .15);
+    box-shadow: var(--creation-shadow);
 }
 
 html:not(.dark) .creation-chat-composer {
-    box-shadow: 0 18px 48px rgba(30, 34, 38, .08);
+    box-shadow: 0 12px 28px rgba(25, 31, 41, .08), 0 1px 2px rgba(25, 31, 41, .04);
 }
 
-.creation-chat-composer:focus-within { box-shadow: 0 20px 58px rgba(0, 0, 0, .18); }
+.creation-chat-composer:focus-within {
+    border-color: var(--creation-border-strong);
+    box-shadow: var(--elevation-card-hover);
+}
 
 .creation-chat-writing-surface,
 .creation-chat-composer.is-empty .creation-chat-writing-surface {
     display: grid;
-    min-height: 88px;
+    min-height: 104px;
     grid-template-columns: 34px minmax(0, 1fr);
     gap: 12px;
     padding: 16px 18px 6px;
@@ -10457,11 +10996,11 @@ html:not(.dark) .creation-chat-reference:hover:not(:disabled) { background: rgba
 
 .creation-chat-dock {
     display: flex;
-    min-height: 46px;
+    min-height: 48px;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: 4px 10px 10px 14px;
+    padding: 6px 12px 12px 14px;
 }
 
 .creation-chat-controls {
@@ -10479,83 +11018,84 @@ html:not(.dark) .creation-chat-reference:hover:not(:disabled) { background: rgba
 .creation-chat-control,
 .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
     display: inline-flex;
-    height: 30px !important;
+    height: 32px;
     min-width: 0;
     align-items: center;
     gap: 5px;
-    border: 0 !important;
-    border-radius: 7px !important;
-    background: transparent !important;
-    color: var(--creation-muted) !important;
-    padding: 0 8px !important;
+    border: 0;
+    border-radius: var(--r-md);
+    background: transparent;
+    color: var(--creation-muted);
+    padding: 0 8px;
     font-size: 11px;
     font-weight: 500;
-    box-shadow: none !important;
-    transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
+    box-shadow: none;
+    transition: color var(--motion-state) ease, background-color var(--motion-state) ease, transform var(--motion-state) var(--motion-ease-out);
 }
 
 .creation-chat-control:hover,
 .creation-chat-control[aria-expanded="true"],
 .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
 .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-    border: 0 !important;
-    background: rgba(255, 255, 255, .075) !important;
-    color: var(--creation-text) !important;
+    border: 0;
+    background: rgba(255, 255, 255, .075);
+    color: var(--creation-text);
     transform: none;
 }
 
 .creation-chat-control[aria-pressed="true"],
 .creation-chat-control[aria-pressed="true"]:hover {
-    background: rgba(6, 182, 212, .16) !important;
-    color: #4dd6ea !important;
+    background: var(--control-selected-bg);
+    color: var(--control-selected-fg);
 }
-.creation-chat-control[aria-pressed="true"] > svg { color: #4dd6ea !important; }
+.creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg); }
 .creation-chat-control[aria-pressed="true"]:disabled,
-.creation-chat-control[aria-pressed="true"]:disabled:hover { background: rgba(6, 182, 212, .1) !important; color: #4dd6ea !important; opacity: .42 !important; }
+.creation-chat-control[aria-pressed="true"]:disabled:hover { background: var(--control-selected-bg); color: var(--control-selected-fg); opacity: .42; }
 
 .creation-chat-control > svg { width: 14px; height: 14px; }
 .creation-chat-control > svg:last-child { width: 12px; height: 12px; color: var(--creation-faint); }
-.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(180px, 30vw) !important; justify-content: flex-start; }
+.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(180px, 30vw); justify-content: flex-start; }
 .creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 16px; height: 16px; border-radius: 4px; background: transparent !important; }
 
 html:not(.dark) .creation-chat-control,
-html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { background: transparent !important; color: var(--creation-muted) !important; }
+html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { background: transparent; color: var(--creation-muted); }
 html:not(.dark) .creation-chat-control:hover,
-html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(29, 33, 37, .06) !important; color: var(--creation-text) !important; }
+html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(29, 33, 37, .06); color: var(--creation-text); }
 
 .creation-mode-capsule {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     gap: 2px;
+    border: 1px solid var(--creation-border);
     border-radius: 999px;
-    background: rgba(255, 255, 255, .06);
+    background: var(--creation-surface-muted);
     padding: 2px;
 }
-.creation-mode-capsule .creation-chat-control { height: 24px !important; border-radius: 999px !important; }
+.creation-mode-capsule .creation-chat-control { height: 26px; border-radius: 999px; }
 .creation-mode-capsule .creation-chat-control:hover,
-.creation-home .creation-mode-capsule .creation-chat-control:hover { background: rgba(255, 255, 255, .09) !important; color: var(--creation-text) !important; }
+.creation-home .creation-mode-capsule .creation-chat-control:hover { background: rgba(255, 255, 255, .09); color: var(--creation-text); }
 .creation-mode-capsule .creation-chat-control[aria-pressed="true"],
 .creation-mode-capsule .creation-chat-control[aria-pressed="true"]:hover,
-.creation-home .creation-mode-capsule .creation-chat-control[aria-pressed="true"]:hover { background: var(--control-selected-bg) !important; color: var(--control-selected-fg) !important; }
-.creation-mode-capsule .creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg) !important; }
-html:not(.dark) .creation-mode-capsule { background: rgba(28, 32, 37, .05); }
-html:not(.dark) .creation-mode-capsule .creation-chat-control:hover { background: rgba(28, 32, 37, .07) !important; }
+.creation-home .creation-mode-capsule .creation-chat-control[aria-pressed="true"]:hover { background: var(--control-selected-bg); color: var(--control-selected-fg); }
+.creation-mode-capsule .creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg); }
+html:not(.dark) .creation-mode-capsule { background: var(--creation-surface-muted); }
+html:not(.dark) .creation-mode-capsule .creation-chat-control:hover { background: var(--creation-surface-hover); }
 html:not(.dark) .creation-mode-capsule .creation-chat-control[aria-pressed="true"],
-html:not(.dark) .creation-mode-capsule .creation-chat-control[aria-pressed="true"]:hover { background: var(--control-selected-bg) !important; color: var(--control-selected-fg) !important; }
-html:not(.dark) .creation-mode-capsule .creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg) !important; }
+html:not(.dark) .creation-mode-capsule .creation-chat-control[aria-pressed="true"]:hover { background: var(--control-selected-bg); color: var(--control-selected-fg); }
+html:not(.dark) .creation-mode-capsule .creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg); }
 
 .creation-chat-control:disabled {
-    opacity: .42 !important;
+    opacity: .42;
     cursor: not-allowed;
-    background: transparent !important;
-    color: var(--creation-muted) !important;
-    transform: none !important;
+    background: transparent;
+    color: var(--creation-muted);
+    transform: none;
 }
-html:not(.dark) .creation-chat-control:disabled { background: transparent !important; color: var(--creation-muted) !important; }
+html:not(.dark) .creation-chat-control:disabled { background: transparent; color: var(--creation-muted); }
 html:not(.dark) .creation-chat-control[aria-pressed="true"],
-html:not(.dark) .creation-chat-control[aria-pressed="true"]:hover { background: rgba(6, 182, 212, .13) !important; color: #0e7490 !important; }
-html:not(.dark) .creation-chat-control[aria-pressed="true"] > svg { color: #0e7490 !important; }
+html:not(.dark) .creation-chat-control[aria-pressed="true"]:hover { background: var(--control-selected-bg); color: var(--control-selected-fg); }
+html:not(.dark) .creation-chat-control[aria-pressed="true"] > svg { color: var(--control-selected-fg); }
 
 .creation-control-popover-surface,
 .creation-model-picker-surface {
@@ -10658,8 +11198,8 @@ html:not(.dark) .creation-model-picker-menu .canvas-model-picker-option > span:f
     .creation-chat-dock { align-items: flex-end; padding: 4px 7px 8px 8px; }
     .creation-chat-controls { max-width: none; }
     .creation-chat-controls:has(> .voice-recording-inline) { flex-wrap: wrap; }
-    .creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 29px !important; padding: 0 6px !important; font-size: 10px; }
-    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(136px, 42vw) !important; }
+.creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 29px; padding: 0 6px; font-size: 10px; }
+.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(136px, 42vw); }
     .creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
     .creation-parameter-menu { width: min(274px, calc(100vw - 24px)); }
 }
@@ -11543,25 +12083,25 @@ html:not(.dark) .creation-duration-choices button:hover { background: rgba(28, 3
 
 .creation-home .creation-chat-control,
 .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
-    border: 0 !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    color: var(--creation-muted) !important;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--creation-muted);
 }
 
 .creation-home .creation-chat-control:hover,
 .creation-home .creation-chat-control[aria-expanded="true"],
 .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
 .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-    border: 0 !important;
-    background: rgba(255, 255, 255, .065) !important;
-    color: var(--creation-text) !important;
+    border: 0;
+    background: rgba(255, 255, 255, .065);
+    color: var(--creation-text);
     transform: none;
 }
 
 html:not(.dark) .creation-home .creation-chat-control:hover,
 html:not(.dark) .creation-home .creation-chat-control[aria-expanded="true"],
-html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(28, 32, 37, .06) !important; }
+html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(28, 32, 37, .06); }
 
 .creation-home .creation-chat-controls > .voice-recording-inline {
     max-width: 236px;
@@ -11572,7 +12112,7 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
     overflow: hidden;
     border: 0;
     border-radius: 7px;
-    background: transparent !important;
+    background: transparent;
     padding: 0 2px;
 }
 .creation-home .creation-chat-controls > .voice-recording-inline > svg {
@@ -12811,19 +13351,19 @@ html:not(.dark) .creation-media-preview-modal .ant-modal-container { background:
 @layer utilities {
     .creation-home .creation-chat-control,
     .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
-        border: 0 !important;
-        background: transparent !important;
-        box-shadow: none !important;
-        color: var(--creation-muted) !important;
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        color: var(--creation-muted);
     }
 
     .creation-home .creation-chat-control:hover,
     .creation-home .creation-chat-control[aria-expanded="true"],
     .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
     .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
-        border: 0 !important;
-        background: rgba(255, 255, 255, .065) !important;
-        color: var(--creation-text) !important;
+        border: 0;
+        background: rgba(255, 255, 255, .065);
+        color: var(--creation-text);
         transform: none;
     }
 
@@ -13306,12 +13846,13 @@ html:not(.dark) .creation-history-drawer-root {
 .creation-home {
     --creation-accent: var(--workspace-accent);
     --creation-bg: var(--workspace-page);
-    --creation-surface: color-mix(in srgb, var(--background) 96%, var(--foreground) 4%);
-    --creation-surface-muted: color-mix(in srgb, var(--background) 91%, var(--foreground) 9%);
-    --creation-surface-hover: color-mix(in srgb, var(--background) 86%, var(--foreground) 14%);
-    --creation-surface-selected: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
-    --creation-border: color-mix(in srgb, var(--foreground) 14%, transparent);
-    --creation-border-strong: color-mix(in srgb, var(--foreground) 24%, transparent);
+    --creation-surface: var(--workspace-surface, color-mix(in srgb, var(--background) 96%, var(--foreground) 4%));
+    --creation-surface-muted: color-mix(in srgb, var(--creation-surface) 88%, var(--foreground) 12%);
+    --creation-surface-hover: color-mix(in srgb, var(--creation-surface) 78%, var(--foreground) 22%);
+    --creation-surface-selected: color-mix(in srgb, var(--creation-surface) 68%, var(--foreground) 32%);
+    --creation-border: var(--workspace-border, color-mix(in srgb, var(--foreground) 14%, transparent));
+    --creation-border-strong: var(--workspace-border-strong, color-mix(in srgb, var(--foreground) 24%, transparent));
+    --creation-shadow: var(--elevation-card);
 }
 
 :where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-selector, .ant-select-multiple .ant-select-selection-search-input) {
@@ -14002,12 +14543,33 @@ html:not(.dark) .creation-history-drawer-root {
 .app-story-create-panel {
     position: relative;
     overflow: hidden;
-    border: 0;
-    border-radius: var(--r-lg);
-    background: var(--card-surface);
+    border: 1px solid var(--user-border);
+    border-radius: var(--user-radius-card);
+    background: var(--user-surface);
     box-shadow: none;
 }
 
+.app-story-options {
+    border-top: 1px solid var(--user-border);
+    color: var(--user-ink-muted);
+}
+
+.app-story-options > summary {
+    padding: 16px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.app-story-options > summary:hover {
+    color: var(--user-ink);
+    background: var(--user-surface-hover);
+}
+
+.app-story-options > summary:focus-visible {
+    outline: 2px solid var(--user-accent);
+    outline-offset: -4px;
+}
+
 .app-story-create-head {
     display: flex;
     min-width: 0;
@@ -15054,18 +15616,21 @@ html:not(.dark) .creation-history-drawer-root {
     gap: 11px;
     min-height: 72px;
     padding: 14px 16px;
-    border: 0;
-    border-radius: var(--r-md);
-    background: var(--library-surface);
+    border: 1px solid var(--creation-border);
+    border-radius: var(--r-lg);
+    background: var(--creation-surface);
     color: inherit;
     text-align: left;
     cursor: pointer;
-    transition: background var(--motion-state) var(--motion-ease-out), transform var(--motion-state) var(--motion-ease-out);
+    box-shadow: var(--elevation-card);
+    transition: background var(--motion-state) var(--motion-ease-out), border-color var(--motion-state) var(--motion-ease-out), box-shadow var(--motion-state) var(--motion-ease-out), transform var(--motion-state) var(--motion-ease-out);
 }
 
 .creation-home .creation-empty-suggest .suggest-card:hover {
+    border-color: var(--creation-border-strong);
     transform: translateY(-2px);
-    background: var(--library-surface-hover);
+    background: var(--creation-surface-hover);
+    box-shadow: var(--elevation-card-hover);
 }
 
 .creation-home .creation-empty-suggest .suggest-card:focus-visible {
@@ -15192,30 +15757,6 @@ html:not(.dark) .creation-history-drawer-root {
     .assets-storage-usage { width: 100%; }
     .assets-storage-usage-track { min-width: 32px; }
 }
-/* 页头操作：明暗都用描边，压过 light 主题下 app-page-header 的白底实心覆盖。 */
-html .assets-library-page .app-page-header .assets-header-action-buttons .ant-btn {
-    height: 32px;
-    border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent) !important;
-    background: transparent !important;
-    color: var(--foreground) !important;
-    box-shadow: none !important;
-    font-weight: 560;
-}
-html .assets-library-page .app-page-header .assets-header-action-buttons .ant-btn:not(:disabled):hover {
-    border-color: color-mix(in srgb, var(--foreground) 28%, transparent) !important;
-    background: color-mix(in srgb, var(--foreground) 6%, transparent) !important;
-    color: var(--foreground) !important;
-    transform: translateY(-1px);
-}
-html .assets-library-page .app-page-header .assets-header-action-buttons .ant-btn-icon-only {
-    width: 32px;
-    padding-inline: 0;
-}
-html .assets-library-page .app-page-header .assets-header-action-buttons .ant-btn-dangerous {
-    border-color: color-mix(in srgb, var(--status-error) 42%, transparent) !important;
-    color: var(--status-error) !important;
-}
-
 /* 筛选胶囊：激活态 accent 反白 + 计数徽章反白 */
 .assets-filter-item {
     display: flex;
@@ -15263,7 +15804,7 @@ html .assets-library-page .app-page-header .assets-header-action-buttons .ant-bt
 .assets-cover-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
 .assets-cover-media { width: 100%; height: 100%; object-fit: contain; background: color-mix(in srgb, var(--foreground) 5%, transparent); }
 .assets-cover-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
-.assets-cover-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, transparent 32%, transparent 58%, rgba(0, 0, 0, .32) 100%); }
+.assets-cover-vignette { display: none; }
 .assets-cover-badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; pointer-events: none; }
 .assets-cover-badge {
     display: inline-flex;
@@ -15512,11 +16053,10 @@ html .assets-library-page .app-page-header .assets-header-action-buttons .ant-bt
 }
 
 /* 3. 素材网格以 6 列为桌面基准；首格是新增素材，因此每页 35 项时正好组成 6×6 完整网格。 */
-.assets-library-page .assets-library-grid { grid-template-columns: repeat(var(--assets-grid-columns, 8), minmax(0, 1fr)); gap: 18px 14px; }
+.assets-library-page .assets-library-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(180px, calc(100% / var(--assets-grid-columns, 6) - 14px))), 1fr)); gap: 18px 14px; }
 .assets-library-page .library-create-title { margin-top: 12px; font-size: var(--fs-body); }
 .assets-library-page .library-create-meta { margin-top: 4px; font-size: var(--fs-label); }
-@media (max-width: 1200px) and (min-width: 900px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
-@media (max-width: 899px) and (min-width: 640px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+@media (max-width: 899px) and (min-width: 640px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
 
 /* 4. 封面浮层统一：窄屏隐藏分类徽章；浅底封面（文本/音频/模型）改用自适应玻璃浮层 */
 @media (max-width: 1100px) { .assets-cover-badge.is-category { display: none; } }
@@ -16337,6 +16877,7 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 .creation-home .creation-hero-prompt-copy strong { color: var(--creation-text); font-size: var(--fs-body); font-weight: 640; }
 .creation-home .creation-hero-prompt-hint { color: var(--creation-muted); font-size: var(--fs-caption); }
 .creation-home .creation-hero-prompt-text {
+    max-width: 100%;
     overflow: hidden;
     margin-top: var(--space-1);
     color: color-mix(in srgb, var(--creation-text) 78%, var(--creation-accent));
@@ -16470,3 +17011,2797 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     .canvas-file-upload-glow, .canvas-file-upload-frost::after { animation: none; }
     .canvas-file-upload-glow, .canvas-file-upload-frost { transition: none; }
 }
+
+/* ===== 2026-09 user workspace alignment =====
+   这一组规则只作用于真实用户端壳层和首页，后台与画布编辑器保持原有职责和交互。
+   几何基准：侧栏 216px、顶部 64px、导航行 44px、首页内容最大宽度 1180px。 */
+.app-user-workspace {
+    --workspace-reference-sidebar: 216px;
+    --workspace-reference-collapsed: 70px;
+    --workspace-reference-topbar: 64px;
+    --workspace-reference-row: 44px;
+    --workspace-reference-page-bg: #ffffff;
+    background: var(--workspace-reference-page-bg);
+}
+
+.app-user-workspace .app-workspace-sidebar {
+    width: var(--workspace-reference-sidebar) !important;
+    flex-basis: var(--workspace-reference-sidebar);
+    background: #f7f7f8;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.app-user-workspace .app-workspace-sidebar.is-collapsed {
+    width: var(--workspace-reference-collapsed) !important;
+    flex-basis: var(--workspace-reference-collapsed);
+}
+
+.app-user-workspace .app-workspace-sidebar-nav {
+    width: 100%;
+    background: #f7f7f8;
+}
+
+.app-user-workspace .app-workspace-sidebar-brand-row {
+    display: flex;
+    min-height: 54px;
+    align-items: center;
+    gap: 2px;
+    padding: 10px 8px 0;
+}
+
+.app-user-workspace .app-workspace-sidebar-brand-button {
+    display: flex;
+    min-width: 0;
+    min-height: 38px;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    border-radius: 10px;
+    padding: 0 7px;
+    text-align: left;
+    transition: background-color 160ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.app-user-workspace .app-workspace-sidebar-brand-button:hover,
+.app-user-workspace .app-workspace-sidebar-brand-button:focus-visible {
+    background: rgba(62, 62, 68, .055);
+}
+
+.app-user-workspace .app-workspace-sidebar-collapse-button {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    flex: 0 0 30px;
+    place-items: center;
+    border-radius: 9px;
+    color: rgba(25, 25, 28, .42);
+    opacity: .72;
+    transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms cubic-bezier(.16, 1, .3, 1), opacity 160ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.app-user-workspace .app-workspace-sidebar-collapse-button:hover,
+.app-user-workspace .app-workspace-sidebar-collapse-button:focus-visible {
+    background: rgba(62, 62, 68, .075);
+    color: #17171a;
+    opacity: 1;
+}
+
+.app-user-workspace .app-workspace-sidebar-rail-header {
+    display: grid;
+    min-height: 60px;
+    place-items: center;
+    padding-top: 6px;
+}
+
+.app-user-workspace .app-workspace-sidebar-rail-button {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border-radius: 11px;
+    color: rgba(25, 25, 28, .55);
+    transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.app-user-workspace .app-workspace-sidebar-rail-button:hover,
+.app-user-workspace .app-workspace-sidebar-rail-button:focus-visible {
+    background: rgba(62, 62, 68, .075);
+    color: #17171a;
+}
+
+.app-user-workspace .app-workspace-sidebar-scroll-area {
+    gap: 22px;
+    padding: 24px 12px 12px;
+}
+
+.app-user-workspace .app-workspace-sidebar-footer {
+    padding: 10px 9px 12px;
+    border-top: 1px solid rgba(0, 0, 0, .055);
+}
+
+.app-user-workspace .app-workspace-sidebar-search {
+    display: none;
+}
+
+.app-user-workspace .app-workspace-brand-mark {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: transparent;
+    box-shadow: none;
+    color: var(--user-accent) !important;
+    border: 1px solid color-mix(in srgb, var(--user-accent) 28%, transparent);
+    background: color-mix(in srgb, var(--user-accent) 8%, transparent);
+}
+
+.app-user-workspace .app-workspace-nav-link {
+    min-height: var(--workspace-reference-row);
+    padding: 0 11px;
+    border-radius: 13px;
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: -.01em;
+}
+
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main {
+    gap: 10px;
+}
+
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-icon {
+    display: grid;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 28px;
+    place-items: center;
+    border-radius: 9px;
+}
+
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-icon svg,
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main > svg {
+    width: 16px;
+    height: 16px;
+}
+
+.app-user-workspace .app-workspace-nav-link.is-active {
+    background: #ececee;
+    color: #111111;
+    font-weight: 650;
+}
+
+.app-user-workspace .app-workspace-nav-link:hover:not(.is-active) {
+    background: rgba(72, 72, 73, .04);
+}
+
+.app-user-workspace .app-workspace-nav-group-toggle {
+    min-height: 28px;
+    padding: 0 11px 4px;
+    color: rgba(0, 0, 0, .48);
+    font-size: 12px;
+    letter-spacing: .02em;
+}
+
+.app-user-workspace .app-workspace-nav-group-toggle > svg {
+    display: none;
+}
+
+.app-user-workspace .app-workspace-nav-group-label {
+    font-weight: 600;
+}
+
+.app-user-workspace .app-workspace-nav-group[data-nav-group-heading=""] + .app-workspace-nav-group[data-nav-group-heading=""] {
+    padding-top: 12px;
+    border-top: 1px solid rgba(0, 0, 0, .055);
+}
+
+.app-user-workspace .app-workspace-brand-wordmark {
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -.03em;
+}
+
+.app-user-workspace .app-workspace-topbar {
+    position: relative;
+    display: flex;
+    height: var(--workspace-reference-topbar);
+    min-height: var(--workspace-reference-topbar);
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 0 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, .055);
+    background: #ffffff;
+}
+
+.app-user-workspace .app-workspace-topbar-breadcrumb {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+    margin-right: auto;
+    color: rgba(0, 0, 0, .42);
+    font-size: 13px;
+}
+
+.app-user-workspace .app-workspace-topbar-breadcrumb > span:not(.truncate) {
+    color: rgba(0, 0, 0, .2);
+}
+
+.app-user-workspace .app-workspace-topbar-announcement {
+    position: absolute;
+    left: 50%;
+    display: inline-flex;
+    max-width: min(420px, 40vw);
+    align-items: center;
+    gap: 8px;
+    padding: 7px 14px;
+    overflow: hidden;
+    border: 1px solid var(--user-border);
+    border-radius: 999px;
+    background: var(--user-surface);
+    color: var(--user-ink-muted);
+    font-size: 12px;
+    transform: translateX(-50%);
+}
+
+.app-user-workspace .app-workspace-topbar-announcement svg {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+    color: var(--user-accent);
+}
+
+.app-user-workspace .app-workspace-topbar-announcement span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-user-workspace .app-workspace-topbar-extension {
+    min-width: 0;
+    flex: 0 1 auto;
+}
+
+.app-user-workspace .app-workspace-topbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.app-user-workspace .app-workspace-topbar-credit-pill {
+    display: inline-flex;
+    flex-shrink: 0;
+    white-space: nowrap;
+    height: 36px;
+    align-items: center;
+    gap: 7px;
+    padding: 0 12px;
+    border: 1px solid rgba(0, 0, 0, .075);
+    border-radius: 999px;
+    background: #fff;
+    color: rgba(0, 0, 0, .68);
+    font-size: 12px;
+    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
+}
+
+.app-user-workspace .app-workspace-topbar-credit-pill:hover {
+    border-color: rgba(91, 78, 224, .26);
+    background: #fbfaff;
+    transform: translateY(-1px);
+}
+
+.app-user-workspace .app-workspace-topbar-credit-pill svg {
+    width: 15px;
+    height: 15px;
+    color: #6a58e8;
+}
+
+.app-user-workspace .app-workspace-topbar-credit-pill strong {
+    min-width: 24px;
+    color: #171717;
+    font-weight: 650;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-row {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 6px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-row.is-collapsed {
+    justify-content: center;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile {
+    display: flex;
+    min-width: 0;
+    height: 42px;
+    flex: 1;
+    align-items: center;
+    gap: 10px;
+    padding: 0 8px;
+    border-radius: 12px;
+    color: #222;
+    text-align: left;
+    transition: background-color .18s ease, transform .18s ease;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile:hover,
+.app-user-workspace .app-workspace-sidebar-profile:focus-visible {
+    background: rgba(72, 72, 73, .055);
+}
+
+.app-user-workspace .app-workspace-sidebar-profile.is-collapsed {
+    flex: 0 0 42px;
+    justify-content: center;
+    padding: 0;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    flex: 0 0 auto;
+    place-items: center;
+    overflow: hidden;
+    border-radius: 50%;
+    background: #e6e6e6;
+    color: rgba(0, 0, 0, .52);
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar.is-large {
+    width: 36px;
+    height: 36px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar svg {
+    width: 18px;
+    height: 18px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-copy {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-copy strong,
+.app-user-workspace .app-workspace-sidebar-profile-copy span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-copy strong {
+    font-size: 13px;
+    font-weight: 650;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-copy span {
+    color: rgba(0, 0, 0, .42);
+    font-size: 11px;
+}
+
+.app-user-workspace .app-workspace-sidebar-notification,
+.app-user-workspace .app-workspace-sidebar-notification-spacer {
+    display: grid;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 34px;
+    place-items: center;
+    border-radius: 10px;
+    color: rgba(0, 0, 0, .46);
+    transition: background-color .18s ease, color .18s ease;
+}
+
+.app-user-workspace .app-workspace-sidebar-notification:hover {
+    background: rgba(72, 72, 73, .055);
+    color: #171717;
+}
+
+.app-user-workspace .app-workspace-sidebar-notification svg {
+    width: 16px;
+    height: 16px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-popover {
+    width: 230px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 2px 2px 12px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary > div {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary strong,
+.app-user-workspace .app-workspace-sidebar-profile-summary span:not(.app-workspace-sidebar-profile-avatar) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary strong {
+    font-size: 13px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary span:not(.app-workspace-sidebar-profile-avatar) {
+    color: rgba(0, 0, 0, .46);
+    font-size: 11px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    border-top: 1px solid rgba(0, 0, 0, .07);
+    padding-top: 8px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a,
+.app-user-workspace .app-workspace-sidebar-profile-menu button {
+    display: flex;
+    width: 100%;
+    height: 34px;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    border-radius: 8px;
+    color: rgba(0, 0, 0, .68);
+    font-size: 12px;
+    text-align: left;
+    transition: background-color .18s ease, color .18s ease;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a:hover,
+.app-user-workspace .app-workspace-sidebar-profile-menu button:hover {
+    background: #f4f3ff;
+    color: #5647ce;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu button:last-child:hover {
+    background: #fff1f1;
+    color: #c33a3a;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu svg {
+    width: 15px;
+    height: 15px;
+}
+
+.app-user-workspace .app-workspace-mobile-menu {
+    display: none;
+}
+
+/* 首页：把视觉重心从装饰图改到标题、模式切换和真实 Composer。 */
+.app-user-workspace .creation-home {
+    background: #ffffff;
+}
+
+.app-user-workspace .creation-empty-workspace {
+    width: min(860px, calc(100% - 56px));
+    min-height: 100%;
+    justify-content: flex-start;
+    padding: 42px 0 64px;
+}
+
+.app-user-workspace .creation-home-heading {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-direction: column;
+    gap: 8px;
+    margin: 18px auto 22px;
+    text-align: center;
+}
+
+.app-user-workspace .creation-home-heading-mark {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border-radius: 10px;
+    background: #f1efff;
+    color: #6a58e8;
+}
+
+.app-user-workspace .creation-home-heading-mark svg {
+    width: 16px;
+    height: 16px;
+}
+
+.app-user-workspace .creation-home-heading h1 {
+    margin: 0;
+    color: #151515;
+    font-size: clamp(24px, 2.4vw, 32px);
+    font-weight: 650;
+    letter-spacing: -.04em;
+    line-height: 1.2;
+}
+
+.app-user-workspace .creation-home-heading p {
+    margin: 0;
+    color: rgba(0, 0, 0, .42);
+    font-size: 13px;
+}
+
+.app-user-workspace .creation-empty-workspace > .creation-mode-capsule {
+    display: inline-flex;
+    align-self: center;
+    gap: 4px;
+    margin: 0 auto 14px;
+    padding: 4px;
+    border: 1px solid rgba(0, 0, 0, .07);
+    border-radius: 999px;
+    background: #f7f7f7;
+}
+
+.app-user-workspace .creation-empty-workspace > .creation-mode-capsule .creation-chat-control {
+    min-width: 76px;
+    min-height: 32px;
+    justify-content: center;
+    border-radius: 999px;
+    color: rgba(0, 0, 0, .54);
+    font-size: 13px;
+}
+
+.app-user-workspace .creation-empty-workspace > .creation-mode-capsule .creation-chat-control[aria-selected="true"] {
+    background: #ffffff;
+    color: #161616;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .09);
+}
+
+.app-user-workspace .creation-empty-composer {
+    width: min(820px, 100%);
+}
+
+.app-user-workspace .creation-composer {
+    border: 1px solid rgba(0, 0, 0, .10);
+    border-radius: 18px;
+    background: #ffffff;
+    box-shadow: 0 10px 36px rgba(31, 35, 42, .08);
+}
+
+.app-user-workspace .creation-composer:focus-within {
+    border-color: rgba(91, 78, 224, .38);
+    box-shadow: 0 12px 40px rgba(31, 35, 42, .11), 0 0 0 3px rgba(91, 78, 224, .08);
+}
+
+.app-user-workspace .creation-chat-writing-surface {
+    min-height: 154px;
+    padding: 20px 22px 10px;
+}
+
+.app-user-workspace .creation-chat-mention-editor,
+.app-user-workspace .creation-chat-editor textarea {
+    min-height: 90px;
+    font-size: 15px;
+    line-height: 1.65;
+}
+
+.app-user-workspace .creation-chat-dock {
+    min-height: 54px;
+    padding: 7px 12px 10px 16px;
+    border-top: 1px solid rgba(0, 0, 0, .06);
+}
+
+.app-user-workspace .creation-home .creation-chat-control {
+    min-height: 32px;
+    border-radius: 9px;
+}
+
+.app-user-workspace .creation-empty-suggest {
+    display: grid;
+    width: min(820px, 100%);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    margin: 16px auto 0;
+}
+
+.app-user-workspace .creation-empty-suggest-grid {
+    display: contents;
+}
+
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+.app-user-workspace .creation-empty-suggest .suggest-card {
+    display: flex;
+    min-width: 0;
+    min-height: 74px;
+    align-items: flex-start;
+    gap: 9px;
+    padding: 12px;
+    border: 1px solid rgba(0, 0, 0, .07);
+    border-radius: 13px;
+    background: #ffffff;
+    box-shadow: 0 3px 12px rgba(31, 35, 42, .035);
+    text-align: left;
+}
+
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt:hover,
+.app-user-workspace .creation-empty-suggest .suggest-card:hover {
+    border-color: rgba(91, 78, 224, .28);
+    background: #fcfbff;
+    box-shadow: 0 8px 20px rgba(31, 35, 42, .07);
+    transform: translateY(-1px);
+}
+
+.app-user-workspace .creation-empty-suggest .suggest-icon {
+    width: 28px;
+    height: 28px;
+    flex: 0 0 auto;
+    border-radius: 8px;
+    background: #f3f2ff;
+    color: #6657d9;
+}
+
+.app-user-workspace .creation-empty-suggest .suggest-copy,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-copy {
+    min-width: 0;
+}
+
+.app-user-workspace .creation-empty-suggest .suggest-copy strong,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-copy strong {
+    overflow: hidden;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-user-workspace .creation-empty-suggest .suggest-copy span,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-hint,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-text {
+    display: -webkit-box;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 1.45;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-ray,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-spark {
+    display: none;
+}
+
+@media (max-width: 900px) {
+    .app-user-workspace .app-workspace-topbar-announcement { display: none; }
+    .app-user-workspace .creation-empty-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 1023px) {
+    .app-user-workspace .app-workspace-sidebar {
+        position: absolute;
+        inset: 0 auto 0 0;
+        z-index: 40;
+        visibility: hidden;
+        width: min(260px, calc(100vw - 48px)) !important;
+        transform: translateX(-100%);
+    }
+    .app-user-workspace .app-workspace-sidebar.is-mobile-expanded { visibility: visible; transform: translateX(0); }
+    .app-user-workspace .app-workspace-mobile-menu { display: grid; }
+    .app-user-workspace .app-workspace-topbar { padding: 0 14px; }
+    .app-user-workspace .app-workspace-topbar-breadcrumb { margin-left: 2px; }
+    .app-user-workspace .creation-empty-workspace { width: min(100% - 28px, 820px); padding-top: 24px; }
+}
+
+@media (max-width: 560px) {
+    .app-user-workspace .creation-home-heading { margin-top: 8px; }
+    .app-user-workspace .creation-home-heading h1 { font-size: 24px; }
+    .app-user-workspace .creation-empty-suggest { grid-template-columns: 1fr; }
+    .app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+    .app-user-workspace .creation-empty-suggest .suggest-card { min-height: 58px; }
+}
+
+.dark .app-user-workspace .app-workspace-sidebar,
+.dark .app-user-workspace .app-workspace-sidebar-nav { background: #1b1b1d; }
+.dark .app-user-workspace .app-workspace-topbar,
+.dark .app-user-workspace .creation-home,
+.dark .app-user-workspace .creation-composer,
+.dark .app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+.dark .app-user-workspace .creation-empty-suggest .suggest-card { background: #18181a; }
+.dark .app-user-workspace .app-workspace-sidebar-footer { border-top-color: rgba(255,255,255,.08); }
+.dark .app-user-workspace .app-workspace-topbar-credit-pill { border-color: rgba(255,255,255,.11); background: #202024; color: rgba(255,255,255,.72); }
+.dark .app-user-workspace .app-workspace-topbar-credit-pill strong { color: #fff; }
+.dark .app-user-workspace .app-workspace-sidebar-profile { color: #f5f5f5; }
+.dark .app-user-workspace .app-workspace-sidebar-profile-copy span,
+.dark .app-user-workspace .app-workspace-sidebar-profile-summary span:not(.app-workspace-sidebar-profile-avatar) { color: rgba(255,255,255,.46); }
+.dark .app-user-workspace .app-workspace-sidebar-profile-menu { border-top-color: rgba(255,255,255,.08); }
+.dark .app-user-workspace .app-workspace-sidebar-profile-menu a,
+.dark .app-user-workspace .app-workspace-sidebar-profile-menu button { color: rgba(255,255,255,.72); }
+.dark .app-user-workspace .app-workspace-sidebar-profile-menu a:hover,
+.dark .app-user-workspace .app-workspace-sidebar-profile-menu button:hover { background: rgba(108,94,236,.15); color: #dcd8ff; }
+.dark .app-user-workspace .creation-home-heading h1 { color: #f5f5f5; }
+.dark .app-user-workspace .creation-home-heading p,
+.dark .app-user-workspace .app-workspace-topbar-breadcrumb { color: rgba(255, 255, 255, .48); }
+.dark .app-user-workspace .app-workspace-topbar { border-bottom-color: rgba(255, 255, 255, .08); }
+.dark .app-user-workspace .creation-empty-workspace > .creation-mode-capsule { background: #232326; border-color: rgba(255,255,255,.08); }
+.dark .app-user-workspace .creation-empty-workspace > .creation-mode-capsule .creation-chat-control[aria-selected="true"] { background: #303034; color: #ffffff; }
+
+/* 用户首页：扩大内容承载区，但让输入区保持聚焦；精选作品采用一大四小的信息层级。 */
+.app-user-workspace .creation-empty-workspace {
+    width: min(1180px, calc(100% - 40px));
+    justify-content: flex-start;
+    padding-top: clamp(22px, 4vh, 42px);
+    padding-bottom: 64px;
+}
+
+.app-user-workspace .creation-home-heading,
+.app-user-workspace .creation-empty-workspace > .creation-mode-capsule,
+.app-user-workspace .creation-empty-composer,
+.app-user-workspace .creation-empty-suggest {
+    width: min(860px, 100%);
+    margin-inline: auto;
+}
+
+.app-user-workspace .creation-home-heading {
+    margin-bottom: 20px;
+}
+
+.app-user-workspace .creation-empty-suggest {
+    margin-top: 14px;
+}
+
+.creation-featured-works {
+    width: 100%;
+    margin-top: clamp(42px, 6vh, 72px);
+    text-align: left;
+}
+
+.creation-featured-heading {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 16px;
+    padding: 0 2px;
+}
+
+.creation-featured-heading > div {
+    min-width: 0;
+}
+
+.creation-featured-heading span {
+    display: block;
+    margin-bottom: 5px;
+    color: color-mix(in srgb, var(--foreground) 42%, transparent);
+    font-size: 11px;
+    font-weight: 650;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+}
+
+.creation-featured-heading h2 {
+    margin: 0;
+    color: var(--foreground);
+    font-size: clamp(20px, 2vw, 26px);
+    font-weight: 690;
+    letter-spacing: -.035em;
+}
+
+.creation-featured-heading p {
+    max-width: 430px;
+    margin: 0 0 2px;
+    color: color-mix(in srgb, var(--foreground) 43%, transparent);
+    font-size: 12px;
+    line-height: 1.6;
+    text-align: right;
+}
+
+.creation-featured-layout {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 16px;
+}
+
+.creation-featured-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.creation-featured-card {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid rgba(28, 28, 32, .075);
+    border-radius: 18px;
+    background: #fff;
+    padding: 0;
+    color: #18181b;
+    text-align: left;
+    box-shadow: 0 1px 1px rgba(24, 24, 28, .02);
+    transition: transform 220ms cubic-bezier(.16, 1, .3, 1), border-color 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.creation-featured-card:hover,
+.creation-featured-card:focus-visible {
+    border-color: rgba(28, 28, 32, .14);
+    box-shadow: 0 16px 36px -22px rgba(20, 20, 28, .35);
+    transform: translateY(-3px);
+}
+
+.creation-featured-card:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--workspace-accent) 58%, transparent);
+    outline-offset: 3px;
+}
+
+.creation-featured-media {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: #ececef;
+}
+
+.creation-featured-card.is-hero .creation-featured-media {
+    flex: 1 1 auto;
+    min-height: 322px;
+}
+
+.creation-featured-media::after {
+    position: absolute;
+    inset: auto 0 0;
+    height: 34%;
+    background: linear-gradient(transparent, rgba(0, 0, 0, .18));
+    content: "";
+    opacity: .6;
+    pointer-events: none;
+}
+
+.creation-featured-media img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 500ms cubic-bezier(.16, 1, .3, 1), filter 220ms ease;
+}
+
+.creation-featured-card:hover .creation-featured-media img,
+.creation-featured-card:focus-visible .creation-featured-media img {
+    filter: saturate(1.04) contrast(1.02);
+    transform: scale(1.035);
+}
+
+.creation-featured-badge {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+    z-index: 1;
+    border: 1px solid rgba(255, 255, 255, .25);
+    border-radius: 999px;
+    background: rgba(25, 25, 28, .58);
+    padding: 5px 9px;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 620;
+    backdrop-filter: blur(12px);
+}
+
+.creation-featured-copy {
+    display: grid;
+    min-width: 0;
+    gap: 4px;
+    padding: 13px 14px 14px;
+}
+
+.creation-featured-card.is-hero .creation-featured-copy {
+    gap: 6px;
+    padding: 17px 18px 18px;
+}
+
+.creation-featured-copy strong {
+    overflow: hidden;
+    color: inherit;
+    font-size: 14px;
+    font-weight: 650;
+    letter-spacing: -.015em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.creation-featured-card.is-hero .creation-featured-copy strong {
+    font-size: 18px;
+}
+
+.creation-featured-copy > span {
+    overflow: hidden;
+    color: rgba(24, 24, 27, .48);
+    font-size: 11px;
+    line-height: 1.5;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.creation-featured-copy em {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin-top: 4px;
+    color: #6b5ee7;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 620;
+}
+
+.creation-featured-copy em svg {
+    width: 12px;
+    height: 12px;
+}
+
+/* 模型下拉：选中项与当前 hover/focus 项展示说明，其他项保持安静。 */
+.canvas-model-picker-option {
+    transition: min-height 180ms cubic-bezier(.16, 1, .3, 1), background-color 160ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1) !important;
+}
+
+.canvas-model-picker-option.is-previewed:not(:disabled) {
+    background: color-mix(in srgb, var(--workspace-accent) 8%, var(--workspace-surface-strong)) !important;
+}
+
+.canvas-model-picker-description {
+    max-height: 0;
+    margin-top: 0 !important;
+    opacity: 0;
+    transform: translateY(-2px);
+    transition: max-height 180ms cubic-bezier(.16, 1, .3, 1), margin-top 180ms cubic-bezier(.16, 1, .3, 1), opacity 130ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.canvas-model-picker-description.is-visible {
+    max-height: 32px;
+    margin-top: 5px !important;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.creation-model-picker-menu .canvas-model-picker-option.is-previewed,
+.creation-model-picker-menu .canvas-model-picker-option[aria-selected="true"] {
+    min-height: 58px;
+    border-radius: 12px;
+}
+
+/* 顶栏积分中心：真实余额、充值、兑换与流水集中在一个消费型弹窗中。 */
+.workspace-wallet-modal .ant-modal-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 0;
+    border-radius: 24px;
+    background: var(--user-page-bg);
+    box-shadow: 0 28px 90px rgba(20, 20, 28, .2);
+    max-height: min(82vh, 760px);
+}
+.workspace-wallet-modal .ant-modal-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.workspace-wallet-shell {
+    display: flex;
+    flex-direction: column;
+    height: min(82vh, 760px);
+    min-height: min(590px, 82vh);
+    color: var(--user-ink);
+}
+
+.workspace-wallet-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px;
+    padding: 30px 34px 24px;
+    background:
+        radial-gradient(circle at 82% 18%, rgba(110, 94, 236, .13), transparent 34%),
+        var(--user-surface);
+}
+
+.workspace-wallet-header h2 {
+    margin: 7px 0 6px;
+    color: var(--user-ink);
+    font-size: 25px;
+    font-weight: 690;
+    letter-spacing: -.035em;
+}
+
+.workspace-wallet-header p {
+    margin: 0;
+    color: var(--user-ink-muted);
+    font-size: 12px;
+    line-height: 1.6;
+}
+
+.workspace-wallet-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--user-accent);
+    font-size: 12px;
+    font-weight: 650;
+}
+
+.workspace-wallet-kicker svg {
+    width: 15px;
+    height: 15px;
+}
+
+.workspace-wallet-balance {
+    display: grid;
+    min-width: 156px;
+    gap: 2px;
+    border: 1px solid rgba(107, 94, 231, .13);
+    border-radius: 18px;
+    background: var(--user-surface-raised);
+    padding: 14px 17px;
+    box-shadow: none;
+    
+}
+
+.workspace-wallet-balance span,
+.workspace-wallet-balance small {
+    color: var(--user-ink-muted);
+    font-size: 10px;
+}
+
+.workspace-wallet-balance strong {
+    color: var(--user-ink);
+    font-size: 24px;
+    font-weight: 720;
+    letter-spacing: -.04em;
+}
+
+.workspace-wallet-tabs {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    margin: 12px 24px 0;
+    border-radius: 14px;
+    background: var(--user-surface-muted);
+    padding: 4px;
+}
+
+.workspace-wallet-tabs button {
+    display: inline-flex;
+    height: 40px;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    border-radius: 11px;
+    color: var(--user-ink-muted);
+    font-size: 12px;
+    font-weight: 600;
+    transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), color 160ms ease, box-shadow 160ms ease;
+}
+
+.workspace-wallet-tabs button svg {
+    width: 15px;
+    height: 15px;
+}
+
+.workspace-wallet-tabs button[aria-selected="true"] {
+    background: var(--user-surface);
+    color: var(--user-ink);
+    box-shadow: none;
+}
+
+.workspace-wallet-content {
+    display: grid;
+    flex: 1;
+    min-height: 0;
+    gap: 16px;
+    overflow: auto;
+    margin: 16px 24px 24px;
+    padding: 0;
+}
+
+.workspace-wallet-section,
+.workspace-wallet-content.is-history {
+    border: 1px solid var(--user-border);
+    border-radius: 18px;
+    background: var(--user-surface);
+    padding: 20px;
+}
+
+.workspace-wallet-content.is-history {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.workspace-wallet-history-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+
+.workspace-wallet-section-heading,
+.workspace-wallet-history-toolbar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.workspace-wallet-section-heading h3,
+.workspace-wallet-history-toolbar h3 {
+    margin: 0;
+    color: var(--user-ink);
+    font-size: 15px;
+    font-weight: 660;
+}
+
+.workspace-wallet-section-heading p,
+.workspace-wallet-history-toolbar p {
+    margin: 4px 0 0;
+    color: var(--user-ink-muted);
+    font-size: 11px;
+}
+
+.workspace-wallet-section-heading > svg {
+    width: 20px;
+    height: 20px;
+    color: var(--user-accent);
+}
+
+.workspace-wallet-products {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.workspace-wallet-product {
+    position: relative;
+    display: grid;
+    min-width: 0;
+    gap: 5px;
+    border: 1px solid var(--user-border);
+    border-radius: 14px;
+    background: var(--user-surface-muted);
+    padding: 14px;
+    color: var(--user-ink);
+    text-align: left;
+    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
+}
+
+.workspace-wallet-product:hover,
+.workspace-wallet-product:focus-visible {
+    border-color: rgba(107, 94, 231, .28);
+    background: var(--user-surface);
+    box-shadow: 0 12px 24px -20px rgba(41, 32, 125, .45);
+    transform: translateY(-2px);
+}
+
+.workspace-wallet-product.is-selected {
+    border-color: rgba(107, 94, 231, .45);
+    background: var(--user-accent-soft);
+}
+
+.workspace-wallet-product span,
+.workspace-wallet-product small {
+    overflow: hidden;
+    color: var(--user-ink-muted);
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-wallet-product strong {
+    font-size: 15px;
+    font-weight: 680;
+}
+
+.workspace-wallet-product > svg {
+    position: absolute;
+    top: 11px;
+    right: 11px;
+    width: 15px;
+    height: 15px;
+    color: var(--user-accent);
+}
+
+.workspace-wallet-provider-row,
+.workspace-wallet-redeem-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 14px;
+}
+
+.workspace-wallet-providers {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.workspace-wallet-providers button {
+    display: inline-flex;
+    min-height: 36px;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid var(--user-border);
+    border-radius: 11px;
+    background: var(--user-surface-muted);
+    padding: 0 11px;
+    color: var(--user-ink-muted);
+    font-size: 11px;
+}
+
+.workspace-wallet-providers button.is-selected {
+    border-color: rgba(107, 94, 231, .32);
+    background: var(--user-accent-soft);
+    color: var(--user-accent);
+}
+
+.workspace-wallet-providers button svg {
+    width: 14px;
+    height: 14px;
+}
+
+.workspace-wallet-redeem-row .ant-input-affix-wrapper,
+.workspace-wallet-redeem-row .ant-input {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.workspace-wallet-ledger {
+    display: grid;
+    gap: 2px;
+}
+
+.workspace-wallet-ledger-row {
+    display: grid;
+    grid-template-columns: 38px minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 12px;
+    min-height: 62px;
+    border-bottom: 1px solid var(--user-border);
+}
+
+.workspace-wallet-ledger-row:last-child {
+    border-bottom: 0;
+}
+
+.workspace-wallet-ledger-icon {
+    display: grid;
+    width: 34px;
+    height: 34px;
+    place-items: center;
+    border-radius: 11px;
+    background: var(--user-accent-soft);
+    color: var(--user-accent);
+}
+
+.workspace-wallet-ledger-icon.is-consume {
+    background: var(--user-surface-muted);
+    color: #6c6c72;
+}
+
+.workspace-wallet-ledger-icon svg {
+    width: 15px;
+    height: 15px;
+}
+
+.workspace-wallet-ledger-row > div {
+    display: grid;
+    min-width: 0;
+    gap: 3px;
+}
+
+.workspace-wallet-ledger-row strong {
+    font-size: 12px;
+    font-weight: 630;
+}
+
+.workspace-wallet-ledger-row span,
+.workspace-wallet-ledger-row time {
+    overflow: hidden;
+    color: var(--user-ink-muted);
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-wallet-ledger-row b {
+    min-width: 76px;
+    font-size: 12px;
+    font-weight: 690;
+    text-align: right;
+}
+
+.workspace-wallet-ledger-row b.is-income { color: #3c8f68; }
+.workspace-wallet-ledger-row b.is-consume { color: var(--user-ink); }
+
+.workspace-wallet-inline-state,
+.workspace-wallet-empty {
+    display: flex;
+    min-height: 96px;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    border: 1px dashed var(--user-border);
+    border-radius: 14px;
+    background: var(--user-surface-muted);
+    padding: 18px;
+    color: var(--user-ink-muted);
+    text-align: left;
+}
+
+.workspace-wallet-inline-state > svg,
+.workspace-wallet-empty > svg {
+    width: 22px;
+    height: 22px;
+}
+
+.workspace-wallet-inline-state > div,
+.workspace-wallet-empty {
+    font-size: 11px;
+}
+
+.workspace-wallet-inline-state strong,
+.workspace-wallet-inline-state span,
+.workspace-wallet-empty strong,
+.workspace-wallet-empty span {
+    display: block;
+}
+
+.workspace-wallet-inline-state strong,
+.workspace-wallet-empty strong {
+    color: var(--user-ink);
+    font-size: 12px;
+}
+
+.workspace-wallet-inline-state span,
+.workspace-wallet-empty span {
+    margin-top: 3px;
+}
+
+.workspace-wallet-pagination {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-top: auto;
+    padding-top: 12px;
+    border-top: 1px solid var(--user-border);
+    color: var(--user-ink-muted);
+    font-size: 10px;
+}
+
+.workspace-wallet-pagination button {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border-radius: 9px;
+    background: #f0f0f1;
+}
+
+.workspace-wallet-pagination button svg {
+    width: 14px;
+    height: 14px;
+}
+
+.workspace-wallet-payment {
+    display: grid;
+    justify-items: center;
+    gap: 9px;
+    padding: 10px 0 4px;
+    text-align: center;
+}
+
+.workspace-wallet-payment-icon {
+    display: grid;
+    width: 48px;
+    height: 48px;
+    place-items: center;
+    border-radius: 16px;
+    background: var(--user-accent-soft);
+    color: var(--user-accent);
+}
+
+.workspace-wallet-payment > strong {
+    font-size: 25px;
+}
+
+.workspace-wallet-payment p,
+.workspace-wallet-payment > span:not(.workspace-wallet-payment-icon) {
+    margin: 0;
+    color: color-mix(in srgb, var(--foreground) 48%, transparent);
+    font-size: 11px;
+}
+
+.workspace-wallet-payment-status {
+    width: 100%;
+    margin-top: 6px;
+    border-radius: 11px;
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+    padding: 10px 12px;
+    color: color-mix(in srgb, var(--foreground) 62%, transparent);
+    font-size: 11px;
+}
+
+.workspace-wallet-payment-status.is-success { background: rgba(57, 150, 103, .1); color: #357e5c; }
+.workspace-wallet-payment-status.is-error { background: rgba(207, 65, 75, .09); color: #b23d47; }
+
+@media (max-width: 980px) {
+    .app-user-workspace .creation-empty-workspace { width: min(100% - 28px, 860px); }
+    .creation-featured-layout { grid-template-columns: 1fr; }
+    .creation-featured-card.is-hero .creation-featured-media { min-height: 0; aspect-ratio: 16 / 8; }
+}
+
+@media (max-width: 700px) {
+    .creation-featured-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
+    .creation-featured-heading p { text-align: left; }
+    .creation-featured-grid { grid-template-columns: 1fr; }
+    .workspace-wallet-header { align-items: stretch; flex-direction: column; padding: 26px 22px 20px; }
+    .workspace-wallet-balance { min-width: 0; }
+    .workspace-wallet-tabs { margin: 8px 14px 0; }
+    .workspace-wallet-content { margin: 14px 14px 18px; padding: 0; }
+    .workspace-wallet-products { grid-template-columns: 1fr; }
+    .workspace-wallet-provider-row,
+    .workspace-wallet-redeem-row { align-items: stretch; flex-direction: column; }
+    .workspace-wallet-provider-row > .ant-btn,
+    .workspace-wallet-redeem-row > .ant-btn { width: 100%; }
+    .workspace-wallet-ledger-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
+    .workspace-wallet-ledger-row time { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .creation-featured-card,
+    .creation-featured-media img,
+    .canvas-model-picker-option,
+    .canvas-model-picker-description,
+    .workspace-wallet-product { transition: none !important; }
+    .creation-featured-card:hover,
+    .creation-featured-card:focus-visible,
+    .workspace-wallet-product:hover,
+    .workspace-wallet-product:focus-visible { transform: none; }
+}
+
+/* =========================================================================
+   User workspace visual pass — clear surfaces, compact navigation, readable data
+   This is intentionally scoped to the user shell; admin and canvas internals keep
+   their own contracts while sharing the same semantic tokens.
+   ========================================================================= */
+.app-user-workspace {
+    --user-page-bg: #f8f8fa;
+    --user-surface: #ffffff;
+    --user-surface-muted: #f1f1f3;
+    --user-border: rgba(25, 25, 30, .095);
+    --user-border-strong: rgba(25, 25, 30, .15);
+    --user-ink: #1b1b1f;
+    --user-ink-muted: #65656c;
+    --user-ink-soft: #85858d;
+    --user-accent: #5f55d9;
+    background: var(--user-page-bg);
+}
+
+.app-user-workspace .app-user-content {
+    background: var(--user-page-bg);
+}
+
+.app-user-workspace .app-workspace-sidebar,
+.app-user-workspace .app-workspace-sidebar-nav {
+    background: #f6f6f7;
+}
+
+.app-user-workspace .app-workspace-sidebar {
+    width: var(--workspace-reference-sidebar) !important;
+    flex-basis: var(--workspace-reference-sidebar);
+    border-right: 1px solid rgba(25, 25, 30, .07);
+}
+
+.app-user-workspace .app-workspace-sidebar.is-collapsed {
+    width: var(--workspace-reference-collapsed) !important;
+    flex-basis: var(--workspace-reference-collapsed);
+}
+
+.app-user-workspace .app-workspace-sidebar-scroll-area {
+    padding: 24px 10px 12px;
+    gap: 22px;
+}
+
+.app-user-workspace .app-workspace-sidebar-footer {
+    padding: 12px 10px 14px;
+    border-top: 1px solid rgba(25, 25, 30, .07);
+}
+
+.app-user-workspace .app-workspace-nav-link {
+    min-height: 38px;
+    padding: 0 11px;
+    border-radius: 11px;
+    color: #66666d;
+    font-size: 13px;
+    font-weight: 520;
+}
+
+.app-user-workspace .app-workspace-nav-link.is-active {
+    background: #e9e8ec;
+    color: var(--user-ink);
+    font-weight: 680;
+}
+
+.app-user-workspace .app-workspace-nav-link:hover:not(.is-active),
+.app-user-workspace .app-workspace-nav-link:focus-visible:not(.is-active) {
+    background: #ededee;
+    color: var(--user-ink);
+}
+
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main {
+    gap: 10px;
+}
+
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main > svg {
+    width: 16px;
+    height: 16px;
+    color: currentColor;
+    opacity: .78;
+}
+
+.app-user-workspace .app-workspace-nav-group-toggle {
+    min-height: 26px;
+    padding: 0 11px 4px;
+    color: #929299;
+    font-size: 11px;
+    font-weight: 650;
+    letter-spacing: .04em;
+}
+
+.app-user-workspace .app-workspace-sidebar.is-collapsed .app-workspace-sidebar-scroll-area {
+    padding-inline: 9px;
+    align-items: center;
+}
+
+.app-user-workspace .app-workspace-sidebar.is-collapsed .app-workspace-nav-link {
+    width: 40px;
+    justify-content: center;
+    padding: 0;
+}
+
+.app-user-workspace .app-workspace-sidebar.is-collapsed .app-workspace-nav-main {
+    justify-content: center;
+}
+
+/* Account popover: every action gets its own row so icon and label can never collide. */
+.workspace-account-popover .ant-popover-inner {
+    width: auto;
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 16px !important;
+    background: var(--user-surface) !important;
+    box-shadow: none !important;
+}
+
+.workspace-account-popover .ant-popover-inner-content {
+    padding: 0 !important;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-popover {
+    width: 100%;
+    padding: 14px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary {
+    min-height: 48px;
+    gap: 11px;
+    padding: 0 1px 13px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary-copy {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary-copy strong,
+.app-user-workspace .app-workspace-sidebar-profile-summary-copy span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary-copy strong {
+    color: var(--user-ink);
+    font-size: 14px;
+    font-weight: 680;
+    line-height: 1.25;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-summary-copy span {
+    color: var(--user-ink-soft);
+    font-size: 11px;
+    line-height: 1.25;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu {
+    gap: 3px;
+    padding-top: 11px;
+    border-top-color: var(--user-border);
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a,
+.app-user-workspace .app-workspace-sidebar-profile-menu button {
+    min-height: 40px;
+    height: 40px;
+    gap: 11px;
+    padding: 0 10px;
+    border-radius: 10px;
+    color: #45454c;
+    font-size: 13px;
+    font-weight: 520;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a span,
+.app-user-workspace .app-workspace-sidebar-profile-menu button span {
+    min-width: 0;
+    flex: 1;
+    line-height: 1;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a svg,
+.app-user-workspace .app-workspace-sidebar-profile-menu button svg {
+    width: 17px;
+    height: 17px;
+    flex: 0 0 17px;
+    stroke-width: 1.8;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu a:hover,
+.app-user-workspace .app-workspace-sidebar-profile-menu a:focus-visible,
+.app-user-workspace .app-workspace-sidebar-profile-menu button:hover,
+.app-user-workspace .app-workspace-sidebar-profile-menu button:focus-visible {
+    background: #f2f1ff;
+    color: var(--user-accent);
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-menu button:last-child:hover,
+.app-user-workspace .app-workspace-sidebar-profile-menu button:last-child:focus-visible {
+    background: #fff1f1;
+    color: #b93b48;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar {
+    width: 32px;
+    height: 32px;
+    background: #e9e9ec;
+    color: #686870;
+}
+
+.app-user-workspace .app-workspace-sidebar-profile-avatar.is-large {
+    width: 40px;
+    height: 40px;
+    background: #eeeeef;
+}
+
+/* Top-right account menu uses the same vertical rhythm as the sidebar menu. */
+.workspace-topbar-account-menu {
+    width: 248px;
+    padding: 14px;
+}
+
+.workspace-topbar-account-summary {
+    display: flex;
+    min-height: 48px;
+    align-items: center;
+    gap: 11px;
+    padding-bottom: 13px;
+}
+
+.workspace-topbar-account-summary > div {
+    min-width: 0;
+    flex: 1;
+}
+
+.workspace-topbar-account-name {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 6px;
+    color: var(--user-ink);
+    font-size: 14px;
+    font-weight: 680;
+}
+
+.workspace-topbar-account-name > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.workspace-topbar-account-section {
+    padding: 11px 0 4px;
+    border-top: 1px solid var(--user-border);
+}
+
+.workspace-topbar-account-theme {
+    display: flex;
+    height: 40px;
+    align-items: center;
+    padding: 0 8px;
+    border-radius: 10px;
+    color: var(--user-ink-muted);
+}
+
+/* Shared library pages: a quiet grey canvas, white surfaces, and unambiguous controls. */
+.app-user-workspace .library-page > div {
+    width: min(1180px, calc(100% - 48px));
+    margin-inline: auto;
+    padding: 28px 0 52px;
+}
+
+.app-user-workspace .app-page-header {
+    min-height: 72px;
+    margin: 0;
+    padding: 0 2px 20px;
+    border-bottom: 0;
+}
+
+.app-user-workspace .app-page-header-title {
+    color: var(--user-ink);
+    font-size: 24px;
+    letter-spacing: -.035em;
+}
+
+.app-user-workspace .app-page-header p {
+    color: var(--user-ink-muted);
+    font-size: 13px;
+}
+
+.app-user-workspace .library-page .library-toolbar,
+.app-user-workspace .library-page .admin-list-toolbar {
+    min-height: 72px;
+    margin: 0;
+    padding: 12px;
+    border: 1px solid var(--user-border);
+    border-radius: 16px;
+    background: var(--user-surface);
+    box-shadow: 0 8px 22px rgba(25, 25, 30, .035);
+}
+
+.app-user-workspace .library-page .library-toolbar .ant-input-affix-wrapper,
+.app-user-workspace .library-page .library-toolbar .ant-select-selector,
+.app-user-workspace .library-page .library-toolbar .ant-btn {
+    min-height: 38px;
+    border-color: transparent !important;
+    border-radius: 10px !important;
+    background: var(--user-surface-muted) !important;
+    box-shadow: none !important;
+}
+
+.app-user-workspace .library-page .library-toolbar .ant-input-affix-wrapper:hover,
+.app-user-workspace .library-page .library-toolbar .ant-input-affix-wrapper:focus-within,
+.app-user-workspace .library-page .library-toolbar .ant-select-focused .ant-select-selector {
+    border-color: rgba(95, 85, 217, .32) !important;
+    background: var(--user-surface) !important;
+    box-shadow: 0 0 0 3px rgba(95, 85, 217, .08) !important;
+}
+
+.app-user-workspace .skills-hero {
+    position: relative;
+    min-height: 220px;
+    overflow: hidden;
+    border: 1px solid var(--user-border);
+    border-radius: 22px;
+    background: var(--user-surface);
+    box-shadow: 0 12px 30px rgba(25, 25, 30, .035);
+}
+
+.app-user-workspace .skills-hero::before {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(rgba(95, 85, 217, .13) 1px, transparent 1px);
+    background-size: 18px 18px;
+    content: "";
+    opacity: .42;
+    mask-image: linear-gradient(to bottom, #000, transparent 86%);
+}
+
+.app-user-workspace .skills-hero-inner {
+    position: relative;
+    display: flex;
+    min-height: 220px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    padding: 32px 24px;
+    text-align: center;
+}
+
+.app-user-workspace .skills-hero-badge {
+    background: #efeeff;
+    color: #5a50c9;
+    font-size: 12px;
+    font-weight: 650;
+}
+
+.app-user-workspace .skills-hero-title {
+    color: var(--user-ink);
+    font-size: clamp(30px, 4vw, 42px);
+    letter-spacing: -.055em;
+}
+
+.app-user-workspace .skills-hero-description {
+    max-width: 560px;
+    color: var(--user-ink-muted);
+    font-size: 14px;
+}
+
+.app-user-workspace .skills-hero-meta {
+    margin-top: 4px;
+    border-radius: 999px;
+    background: var(--user-surface-muted);
+    padding: 5px 11px;
+    color: #6d6d74;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+
+.app-user-workspace .skills-tabs {
+    min-height: 38px;
+    gap: 3px;
+    padding: 3px;
+    border-radius: 12px;
+    background: var(--user-surface-muted);
+}
+
+.app-user-workspace .skills-navigation {
+    margin: 8px 0 20px;
+    overflow-x: auto;
+}
+
+.app-user-workspace .skills-tab {
+    min-height: 32px;
+    gap: 7px;
+    padding: 0 11px;
+    border-radius: 9px;
+    color: var(--user-ink-muted);
+    font-size: 12px;
+    font-weight: 560;
+}
+
+.app-user-workspace .skills-tab.is-active {
+    background: var(--user-surface);
+    color: var(--user-ink);
+    box-shadow: 0 2px 7px rgba(25, 25, 30, .09);
+}
+
+.app-user-workspace .skills-tab-count {
+    min-width: 20px;
+    border-radius: 999px;
+    background: #e7e7ea;
+    color: #5f5f66;
+    font-size: 10px;
+    line-height: 20px;
+}
+
+.app-user-workspace .skill-group-icon {
+    display: grid;
+    width: 28px;
+    height: 28px;
+    place-items: center;
+    border: 1px solid var(--user-border);
+    border-radius: 9px;
+    background: var(--user-surface);
+    color: var(--user-ink-muted);
+}
+
+.app-user-workspace .skill-group-icon svg {
+    width: 15px;
+    height: 15px;
+}
+
+.app-user-workspace .skills-scope-panel > section > div:first-child h2 {
+    color: var(--user-ink) !important;
+    font-size: 15px;
+    font-weight: 680;
+}
+
+.app-user-workspace .skills-scope-panel > section > div:first-child > span {
+    color: #8a8a91 !important;
+    font-size: 12px;
+}
+
+.app-user-workspace .skill-library-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.app-user-workspace .skill-library-card {
+    min-height: 272px;
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(25, 25, 30, .10);
+    border-radius: 16px;
+    background: var(--user-surface);
+    box-shadow: 0 5px 16px rgba(25, 25, 30, .025);
+}
+
+.app-user-workspace .skill-library-card:hover,
+.app-user-workspace .skill-library-card:focus-within {
+    border-color: rgba(95, 85, 217, .38);
+    box-shadow: 0 12px 26px rgba(25, 25, 30, .08);
+    transform: translateY(-2px);
+}
+
+.app-user-workspace .skill-card-icon {
+    width: 42px;
+    height: 42px;
+    margin-bottom: 17px;
+    border: 1px solid rgba(25, 25, 30, .08);
+    border-radius: 12px;
+    background: var(--user-accent-soft);
+    color: var(--user-accent);
+}
+
+.app-user-workspace .skill-library-card h3 {
+    color: var(--user-ink);
+    font-size: 16px;
+    font-weight: 680;
+}
+
+.app-user-workspace .skill-card-description p {
+    color: var(--user-ink-muted);
+    font-size: 14px;
+    line-height: 1.65;
+}
+
+.app-user-workspace .skill-card-footer {
+    color: var(--user-ink-muted);
+    font-size: 11px;
+}
+
+.app-user-workspace .skill-card-tag {
+    background: var(--user-surface-muted);
+    color: var(--user-ink-muted);
+}
+
+.app-user-workspace .skill-card-join {
+    height: 36px;
+    border: 1px solid rgba(25, 25, 30, .08);
+    background: var(--user-surface-muted);
+    color: var(--user-ink);
+    font-size: 12px;
+}
+
+.app-user-workspace .skill-card-join:hover,
+.app-user-workspace .skill-card-join:focus-visible {
+    border-color: rgba(95, 85, 217, .28);
+    background: #ebeaff;
+    color: #5148c2;
+}
+
+.app-user-workspace .skill-card-join.is-added {
+    border-color: var(--user-border);
+    background: var(--user-accent-soft);
+    color: var(--user-accent);
+}
+
+.app-user-workspace .library-card-surface,
+.app-user-workspace .app-table-surface,
+.app-user-workspace .canvas-library-frame,
+.app-user-workspace .project-library-card,
+.app-user-workspace .asset-library-card,
+.app-user-workspace .task-library-frame {
+    border-color: var(--user-border);
+    background: var(--user-surface);
+    box-shadow: 0 7px 22px rgba(25, 25, 30, .035);
+}
+
+.app-user-workspace .admin-list-toolbar-main,
+.app-user-workspace .admin-list-toolbar-actions {
+    gap: 8px;
+}
+
+@media (max-width: 1180px) {
+    .app-user-workspace .skill-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (max-width: 820px) {
+    .app-user-workspace .library-page > div { width: min(100% - 28px, 1180px); padding-top: 20px; }
+    .app-user-workspace .skill-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .app-user-workspace .skills-hero, .app-user-workspace .skills-hero-inner { min-height: 196px; }
+}
+
+@media (max-width: 580px) {
+    .app-user-workspace .library-page > div { width: calc(100% - 24px); }
+    .app-user-workspace .skill-library-grid { grid-template-columns: 1fr; }
+    .app-user-workspace .skills-tabs { width: 100%; overflow-x: auto; justify-content: flex-start; }
+    .app-user-workspace .skills-tab { flex: 0 0 auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-user-workspace .skill-library-card { animation: none !important; transition: none !important; }
+}
+
+/* Large desktop follows the reference gallery rhythm: five readable cards rather
+   than a dense admin-table conversion. */
+.app-user-workspace .library-page > div {
+    width: min(1680px, calc(100% - 64px));
+}
+
+.app-user-workspace .skill-library-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.app-user-workspace .skill-library-card {
+    min-height: 268px;
+}
+
+.app-user-workspace .task-library-frame {
+    overflow: hidden;
+    border: 1px solid var(--user-border);
+    border-radius: 16px;
+    background: var(--user-surface);
+}
+
+.app-user-workspace .task-record-row {
+    min-height: 88px;
+    border-bottom: 1px solid rgba(25, 25, 30, .07);
+    border-radius: 0;
+    background: var(--user-surface);
+    color: var(--user-ink);
+}
+
+.app-user-workspace .task-record-row:last-child {
+    border-bottom: 0;
+}
+
+.app-user-workspace .task-record-row:hover,
+.app-user-workspace .task-record-row:focus-within {
+    background: var(--user-surface-hover);
+}
+
+.app-user-workspace .task-grid-card {
+    border: 1px solid var(--user-border);
+    border-radius: 16px;
+    background: var(--user-surface);
+    box-shadow: 0 5px 16px rgba(25, 25, 30, .025);
+}
+
+.app-user-workspace .task-grid-card:hover,
+.app-user-workspace .task-grid-card:focus-within {
+    background: var(--user-surface);
+    border-color: rgba(95, 85, 217, .32);
+    box-shadow: 0 12px 26px rgba(25, 25, 30, .08);
+}
+
+.app-user-workspace .project-library-grid {
+    gap: 16px;
+}
+
+.app-user-workspace .project-library-card {
+    border: 1px solid var(--user-border);
+    border-radius: 16px;
+    background: var(--user-surface);
+    box-shadow: 0 5px 16px rgba(25, 25, 30, .025);
+}
+
+.app-user-workspace .project-library-card:hover,
+.app-user-workspace .project-library-card:focus-within {
+    border-color: rgba(95, 85, 217, .32);
+    box-shadow: 0 12px 26px rgba(25, 25, 30, .08);
+}
+
+.app-user-workspace .assets-library-page .canvas-library-frame {
+    border: 1px solid var(--user-border);
+    border-radius: 16px;
+    background: var(--user-surface);
+}
+
+.app-user-workspace .assets-library-page .assets-filter-item {
+    color: var(--user-ink-muted);
+    border-radius: 9px;
+}
+
+.app-user-workspace .assets-library-page .assets-filter-item.is-active {
+    background: var(--control-selected-bg);
+    color: var(--control-selected-fg);
+}
+
+@media (max-width: 1400px) {
+    .app-user-workspace .skill-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+@media (max-width: 1180px) {
+    .app-user-workspace .skill-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+.app-user-workspace.settings-page {
+    background: var(--user-page-bg);
+}
+
+.app-user-workspace.settings-page .settings-topbar {
+    display: block;
+    min-height: 0;
+    padding: 16px 32px 0;
+    color: var(--user-ink);
+}
+
+.app-user-workspace.settings-page .settings-library-frame {
+    width: min(1680px, calc(100% - 64px));
+    margin: 20px auto 32px;
+    border: 1px solid var(--user-border);
+    border-radius: 18px;
+    background: var(--user-surface);
+    box-shadow: 0 8px 24px rgba(25, 25, 30, .035);
+}
+
+.app-user-workspace.settings-page .settings-nav-panel {
+    border-right: 1px solid var(--user-border);
+    background: var(--user-surface-muted);
+}
+
+.app-user-workspace.settings-page .settings-nav-item {
+    margin: 3px 8px;
+    border-radius: 10px;
+    color: #6b6b73;
+}
+
+.app-user-workspace.settings-page .settings-nav-item.is-active {
+    background: #ecebff;
+    color: #5148c2;
+    font-weight: 650;
+}
+
+.app-user-workspace.settings-page .settings-content {
+    background: var(--user-surface);
+}
+
+.app-user-workspace.settings-page .settings-pane-header h2 {
+    color: var(--user-ink);
+}
+
+.app-user-workspace.settings-page .settings-pane-header p,
+.app-user-workspace.settings-page .settings-field-group-label {
+    color: var(--user-ink-muted);
+}
+
+.app-user-workspace.settings-page .settings-channel,
+.app-user-workspace.settings-page .settings-preference-block {
+    border: 1px solid var(--user-border);
+    border-radius: 14px;
+    background: var(--user-surface);
+}
+
+.app-user-workspace.settings-page .settings-preference-block {
+    padding: 20px 20px 12px;
+}
+
+.app-user-workspace.settings-page .settings-preference-heading h3 {
+    color: var(--user-ink-muted);
+}
+
+.app-user-workspace.settings-page .settings-preference-heading p {
+    color: var(--user-ink-muted);
+}
+
+@media (max-width: 720px) {
+    .app-user-workspace.settings-page .settings-library-frame {
+        width: calc(100% - 24px);
+        margin-bottom: 18px;
+    }
+    .app-user-workspace.settings-page .settings-topbar { padding-inline: 16px; }
+    .app-user-workspace.settings-page .settings-nav-panel { border-right: 0; border-bottom: 1px solid var(--user-border); }
+}
+
+/* ========================================================================
+   User workspace redesign — creation-first layout
+   ------------------------------------------------------------------------
+   This is the single visual contract for the authenticated user shell.  The
+   creation home is intentionally rebuilt as a wide studio surface instead of
+   a narrow admin column.  Light/dark only swap semantic tokens; geometry and
+   interaction states remain identical.
+   ======================================================================== */
+.app-user-workspace,
+.app-user-overlays {
+    --user-page-bg: #f8f8fa;
+    --user-surface: #ffffff;
+    --user-surface-raised: #ffffff;
+    --user-surface-muted: #f1f1f3;
+    --user-surface-hover: #eaeaec;
+    --user-border: rgba(25, 25, 30, .10);
+    --user-border-strong: rgba(25, 25, 30, .17);
+    --user-ink: #1d1d21;
+    --user-ink-muted: #686872;
+    --user-ink-soft: #85858e;
+    --user-accent: #695df0;
+    --user-accent-soft: #eeecff;
+    --user-action-gradient: linear-gradient(115deg, #6554df, #386fbc);
+    --user-action-gradient-hover: linear-gradient(115deg, #5744cf, #356bbb);
+    --user-action-foreground: #ffffff;
+    --user-shadow-card: none;
+    --user-shadow-hover: none;
+    --user-radius-card: 16px;
+    --user-radius-control: 12px;
+    --user-control-pressed: #e1e1e5;
+    --user-control-height: 38px;
+    --user-icon-size: 16px;
+    --user-motion: 180ms cubic-bezier(.16, 1, .3, 1);
+    min-width: 0;
+    background: var(--user-page-bg);
+    color: var(--user-ink);
+}
+
+.dark .app-user-workspace,
+.dark .app-user-overlays {
+    --user-page-bg: #151517;
+    --user-surface: #1c1c1f;
+    --user-surface-raised: #222226;
+    --user-surface-muted: #26262a;
+    --user-surface-hover: #303036;
+    --user-control-pressed: #3a3a40;
+    --user-border: rgba(255, 255, 255, .09);
+    --user-border-strong: rgba(255, 255, 255, .16);
+    --user-ink: #f3f3f5;
+    --user-ink-muted: #b4b4bc;
+    --user-ink-soft: #9797a1;
+    --user-accent: #a69cff;
+    --user-accent-soft: rgba(126, 113, 255, .16);
+    --user-shadow-card: none;
+    --user-shadow-hover: none;
+}
+
+.app-user-workspace .app-workspace-stage,
+.app-user-workspace .app-user-content,
+.app-user-workspace .app-workspace-grid {
+    background: var(--user-page-bg);
+}
+
+/* Navigation rail: 20% wider than the previous 180 / 58 compact track. */
+.app-user-workspace .app-workspace-sidebar {
+    width: var(--workspace-reference-sidebar) !important;
+    flex-basis: var(--workspace-reference-sidebar) !important;
+    background: var(--user-page-bg) !important;
+    border-right: 0 !important;
+    transition: width var(--user-motion);
+}
+.app-user-workspace .app-workspace-sidebar.is-collapsed {
+    width: var(--workspace-reference-collapsed) !important;
+    flex-basis: var(--workspace-reference-collapsed) !important;
+}
+.app-user-workspace .app-workspace-sidebar-scroll-area { padding: 22px 12px 12px !important; gap: 24px !important; }
+.app-user-workspace .app-workspace-sidebar-footer { padding: 12px 12px 14px !important; border-top: 0 !important; }
+.app-user-workspace .app-workspace-nav-link {
+    min-height: 44px !important;
+    padding: 4px 10px !important;
+    border-radius: 13px !important;
+    color: var(--user-ink-muted) !important;
+    font-size: 13px !important;
+    font-weight: 560 !important;
+    transition: background var(--user-motion), color var(--user-motion), transform var(--user-motion);
+}
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main { gap: 10px !important; }
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-icon svg,
+.app-user-workspace .app-workspace-nav-link .app-workspace-nav-main > svg { width: 16px !important; height: 16px !important; }
+.app-user-workspace .app-workspace-nav-link.is-active { background: var(--user-surface-muted) !important; color: var(--user-ink) !important; font-weight: 680 !important; }
+.app-user-workspace .app-workspace-nav-link:hover:not(.is-active),
+.app-user-workspace .app-workspace-nav-link:focus-visible:not(.is-active) { background: var(--user-surface-hover) !important; color: var(--user-ink) !important; }
+.app-user-workspace .app-workspace-nav-group-toggle { color: var(--user-ink-soft) !important; }
+.app-user-workspace .app-workspace-sidebar.is-collapsed .app-workspace-sidebar-scroll-area { padding-inline: 8px !important; }
+.app-user-workspace .app-workspace-sidebar.is-collapsed .app-workspace-nav-link { width: 54px !important; }
+
+.app-user-workspace .app-workspace-topbar {
+    min-height: 64px !important;
+    height: 64px !important;
+    padding-inline: 24px !important;
+    border-bottom: 0 !important;
+    background: color-mix(in srgb, var(--user-page-bg) 92%, transparent) !important;
+    color: var(--user-ink) !important;
+}
+.app-user-workspace .app-workspace-topbar-breadcrumb { color: var(--user-ink-muted) !important; }
+.app-user-workspace .app-workspace-topbar-credit-pill { border-color: var(--user-border) !important; background: var(--user-surface) !important; color: var(--user-ink-muted) !important; }
+.app-user-workspace .app-workspace-topbar-credit-pill strong { color: var(--user-ink) !important; }
+
+/* One scroll owner on the creation route. */
+.app-user-workspace .creation-home {
+    min-height: 0 !important;
+    height: 100% !important;
+    overflow: hidden !important;
+    background: var(--user-page-bg) !important;
+    color: var(--user-ink) !important;
+}
+.app-user-workspace .creation-home > .creation-empty-workspace,
+.app-user-workspace .creation-home > .creation-thread-workbench {
+    min-height: 0 !important;
+    flex: 1 1 auto !important;
+}
+.app-user-workspace .creation-home > .creation-empty-workspace {
+    display: block !important;
+    width: min(1680px, calc(100% - 72px)) !important;
+    height: 100% !important;
+    max-width: none !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    padding: 28px 0 56px !important;
+}
+.app-user-workspace .creation-home > .creation-empty-workspace::-webkit-scrollbar { display: none; width: 0; }
+
+/* Reference page order: title → mode tabs → large composer → quick actions → works. */
+.app-user-workspace .creation-home-heading {
+    width: 100% !important;
+    margin: 0 auto 24px !important;
+    text-align: center !important;
+}
+.app-user-workspace .creation-home-heading-mark {
+    width: 48px !important;
+    height: 48px !important;
+    margin: 0 auto 16px !important;
+    border-radius: 15px !important;
+    background: var(--user-accent-soft) !important;
+    color: var(--user-accent) !important;
+}
+.app-user-workspace .creation-home-heading-mark svg { width: 24px !important; height: 24px !important; }
+.app-user-workspace .creation-home-heading h1 {
+    margin: 0 !important;
+    color: var(--user-ink) !important;
+    font-size: clamp(26px, 2vw, 32px) !important;
+    font-weight: 600 !important;
+    letter-spacing: -.04em !important;
+    line-height: 1.12 !important;
+}
+.app-user-workspace .creation-home-heading p {
+    margin: 12px 0 0 !important;
+    color: var(--user-ink-muted) !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.creation-launchpad {
+    width: min(100%, 960px);
+    margin-inline: auto;
+    container-type: inline-size;
+}
+
+.app-user-workspace .creation-launchpad > .creation-mode-capsule {
+    display: flex !important;
+    width: fit-content !important;
+    height: 44px !important;
+    margin: 0 auto 16px !important;
+    align-items: center !important;
+    gap: 4px !important;
+    padding: 4px !important;
+    border: 0 !important;
+    border-radius: var(--user-radius-card) !important;
+    background: var(--user-surface-muted) !important;
+    box-shadow: none !important;
+}
+.app-user-workspace .creation-launchpad > .creation-mode-capsule .creation-chat-control {
+    height: 36px !important;
+    min-height: 36px !important;
+    min-width: 92px !important;
+    padding: 0 20px !important;
+    border-radius: var(--user-radius-control) !important;
+    color: var(--user-ink-muted) !important;
+    font-size: 14px !important;
+    font-weight: 620 !important;
+}
+.app-user-workspace .creation-launchpad > .creation-mode-capsule .creation-chat-control[aria-selected="true"] {
+    background: var(--user-surface) !important;
+    color: var(--user-ink) !important;
+    box-shadow: var(--user-shadow-card);
+}
+.app-user-workspace .creation-launchpad > .creation-mode-capsule .creation-chat-control:hover:not([aria-selected="true"]) { background: var(--user-surface-hover) !important; color: var(--user-ink) !important; }
+.app-user-workspace .creation-launchpad > .creation-mode-capsule .creation-chat-control svg { width: 16px !important; height: 16px !important; }
+
+.app-user-workspace .creation-empty-composer { width: 100% !important; margin: 0 0 20px !important; }
+.app-user-workspace .creation-chat-composer {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border: 0 !important;
+    border-radius: 22px !important;
+    background:
+        radial-gradient(920px 180px at 8% -30%, color-mix(in srgb, var(--user-accent) 11%, transparent), transparent 58%),
+        var(--user-surface) !important;
+    box-shadow: 0 6px 16px color-mix(in srgb, var(--user-ink) 8%, transparent) !important;
+    transition: box-shadow var(--user-motion), transform var(--user-motion) !important;
+}
+.app-user-workspace .creation-chat-composer:focus-within {
+    box-shadow: 0 8px 18px color-mix(in srgb, var(--user-ink) 10%, transparent) !important;
+    transform: none;
+}
+.dark .app-user-workspace .creation-chat-composer {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, .28) !important;
+}
+.dark .app-user-workspace .creation-chat-composer:focus-within {
+    box-shadow: 0 8px 18px rgba(0, 0, 0, .34) !important;
+}
+.app-user-workspace .creation-chat-composer.is-empty .creation-chat-writing-surface {
+    min-height: 216px !important;
+    grid-template-columns: 1fr !important;
+    gap: 16px !important;
+    padding: 30px 32px 18px !important;
+}
+.app-user-workspace .creation-chat-editor textarea,
+.app-user-workspace .creation-chat-mention-editor { min-height: 112px !important; font-size: 18px !important; line-height: 1.55 !important; caret-color: var(--user-accent); }
+.app-user-workspace .creation-chat-editor textarea::placeholder,
+.app-user-workspace .creation-chat-mention-editor:empty::before { color: var(--user-ink-soft) !important; opacity: .86 !important; }
+.app-user-workspace .creation-reference-panel { margin-top: auto !important; }
+.app-user-workspace .creation-chat-dock {
+    min-height: 64px !important;
+    padding: 12px 18px 12px 24px !important;
+    border-top: 0 !important;
+    background: transparent !important;
+}
+.app-user-workspace .creation-chat-controls { gap: 8px !important; }
+.app-user-workspace .creation-chat-control,
+.app-user-workspace .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
+    min-height: 40px !important;
+    border-radius: 999px !important;
+    background: var(--user-surface-muted) !important;
+    color: var(--user-ink-muted) !important;
+    transition: background var(--user-motion), color var(--user-motion), transform var(--user-motion), box-shadow var(--user-motion) !important;
+}
+.app-user-workspace .creation-chat-control:hover,
+.app-user-workspace .creation-chat-control[aria-expanded="true"],
+.app-user-workspace .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
+.app-user-workspace .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
+    background: var(--user-surface-hover) !important;
+    color: var(--user-ink) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px color-mix(in srgb, var(--user-ink) 8%, transparent);
+}
+.app-user-workspace .creation-home .canvas-node-composer-submit-action { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
+
+.app-user-workspace .creation-launchpad .creation-chat-composer {
+    border-radius: 22px !important;
+}
+.app-user-workspace .creation-launchpad .creation-chat-composer.is-empty .creation-chat-writing-surface {
+    min-height: 152px !important;
+    padding: 22px 24px 10px !important;
+}
+.app-user-workspace .creation-launchpad .creation-chat-composer.is-empty .creation-chat-mention-editor {
+    min-height: 64px !important;
+    font-size: 16px !important;
+}
+.app-user-workspace .creation-launchpad .creation-chat-dock {
+    min-height: 64px !important;
+    padding: 8px 16px 16px !important;
+    border-top: 0 !important;
+}
+.app-user-workspace .creation-launchpad .creation-chat-controls .creation-chat-control,
+.app-user-workspace .creation-launchpad .creation-model-picker.canvas-composer-model-picker {
+    min-height: 36px !important;
+    height: 36px !important;
+    padding-inline: 12px;
+    font-size: 12px;
+    border: 0 !important;
+}
+.app-user-workspace .creation-launchpad .creation-model-picker.canvas-composer-model-picker {
+    width: min(232px, 60cqw) !important;
+}
+.app-user-workspace .creation-launchpad .creation-reference-add-button {
+    border-style: dashed;
+    border-color: color-mix(in srgb, var(--user-accent) 28%, var(--user-border));
+    background: color-mix(in srgb, var(--user-accent) 7%, var(--user-surface-muted));
+    color: var(--user-accent);
+    font-size: 12px;
+    transition: background var(--user-motion), border-color var(--user-motion), color var(--user-motion), transform var(--user-motion);
+}
+
+/* 模型选择器：先选品牌，再选模型；品牌列表保持完整可见，不用内部滚动条。 */
+.app-user-workspace .creation-model-picker-menu {
+    max-height: none !important;
+    overflow: visible !important;
+    width: min(360px, calc(100vw - 24px)) !important;
+    padding: 10px !important;
+}
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brands { display: grid; gap: 5px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-subheading { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 5px 8px; color: var(--user-ink); font-size: 12px; font-weight: 650; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-subheading small { color: var(--user-ink-soft); font-size: 10px; font-weight: 500; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand { display: flex; min-height: 58px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 13px; padding: 8px 10px; background: transparent; color: var(--user-ink); text-align: left; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.16,1,.3,1); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand:hover { border-color: var(--user-border); background: var(--user-surface-hover); transform: translateX(2px); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--user-accent) 20%, var(--user-surface)), color-mix(in srgb, var(--user-accent) 6%, var(--user-surface))); color: var(--user-accent); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand:nth-child(3n) .canvas-model-picker-brand-icon { background: linear-gradient(135deg, color-mix(in srgb, #e99a3d 24%, var(--user-surface)), color-mix(in srgb, #e99a3d 7%, var(--user-surface))); color: #d57b16; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand:nth-child(4n) .canvas-model-picker-brand-icon { background: linear-gradient(135deg, color-mix(in srgb, #41a87b 22%, var(--user-surface)), color-mix(in srgb, #41a87b 7%, var(--user-surface))); color: #25845d; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-copy small { color: var(--user-ink-muted); font-size: 10px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-arrow { width: 15px; height: 15px; color: var(--user-ink-soft); transform: rotate(-90deg); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-secondary-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 9px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-back { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--user-border); border-radius: 9px; background: var(--user-surface-muted); color: var(--user-ink-muted); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-back:hover { background: var(--user-surface-hover); color: var(--user-ink); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-back svg { width: 15px; height: 15px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-secondary-head > span { display: grid; gap: 2px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-secondary-head strong { color: var(--user-ink); font-size: 13px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-secondary-head small { color: var(--user-ink-soft); font-size: 10px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option { min-height: 55px; border-radius: 12px; padding: 8px 9px; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--user-accent) 10%, var(--user-surface)) !important; color: var(--user-accent); }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option:nth-child(3n) > span:first-child > span:first-child { color: #d57b16; background: color-mix(in srgb, #e99a3d 12%, var(--user-surface)) !important; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option:nth-child(4n) > span:first-child > span:first-child { color: #25845d; background: color-mix(in srgb, #41a87b 12%, var(--user-surface)) !important; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option .text-amber-600,
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option .dark\:text-amber-300 { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: color-mix(in srgb, #e28a17 12%, var(--user-surface)); color: #c66d00 !important; padding: 5px 8px; font-size: 11px; font-weight: 700; }
+.app-user-workspace .creation-model-picker-menu .canvas-model-picker-option .text-amber-600 svg { width: 13px; height: 13px; }
+.dark .app-user-workspace .creation-model-picker-menu .canvas-model-picker-option .text-amber-600,
+.dark .app-user-workspace .creation-model-picker-menu .canvas-model-picker-option .dark\:text-amber-300 { color: #f0a943 !important; background: color-mix(in srgb, #e28a17 18%, var(--user-surface)) !important; }
+.app-user-workspace .creation-launchpad .creation-mode-capsule .creation-chat-control:focus-visible,
+.app-user-workspace .creation-launchpad .suggest-card:focus-visible {
+    outline: 2px solid var(--user-accent);
+    outline-offset: 3px;
+}
+
+.app-user-workspace .creation-empty-suggest {
+    display: grid !important;
+    width: 100% !important;
+    margin: 0 0 0 !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+    gap: 8px !important;
+}
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+.app-user-workspace .creation-empty-suggest .suggest-card {
+    min-height: 80px !important;
+    margin: 0 !important;
+    padding: 12px !important;
+    border: 1px solid transparent !important;
+    border-radius: var(--user-radius-card) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: var(--user-ink) !important;
+    transition: transform var(--user-motion), background var(--user-motion), box-shadow var(--user-motion), border-color var(--user-motion) !important;
+}
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt { grid-column: auto !important; }
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt:hover,
+.app-user-workspace .creation-empty-suggest .suggest-card:hover,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt:focus-visible,
+.app-user-workspace .creation-empty-suggest .suggest-card:focus-visible { transform: translateY(-2px) !important; border-color: var(--user-border-strong) !important; background: var(--user-surface-hover) !important; box-shadow: var(--user-shadow-hover) !important; }
+.app-user-workspace .creation-empty-suggest .suggest-icon { width: 32px !important; height: 32px !important; margin-bottom: 0 !important; flex-shrink: 0; border: 0 !important; border-radius: 12px !important; background: var(--user-accent-soft) !important; color: var(--user-accent) !important; }
+.app-user-workspace .creation-empty-suggest .suggest-copy,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-copy { gap: 4px !important; }
+.app-user-workspace .creation-empty-suggest .suggest-copy strong,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-copy strong { color: var(--user-ink) !important; font-size: 14px !important; }
+.app-user-workspace .creation-empty-suggest .suggest-copy span,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-hint,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-text { color: var(--user-ink-muted) !important; font-size: 12px !important; }
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-spark,
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-ray { display: none !important; }
+
+/* Featured works are part of the home page rhythm, not an afterthought. */
+.app-user-workspace .creation-featured-works { margin-top: 40px !important; }
+.app-user-workspace .creation-featured-heading { margin-bottom: 24px !important; }
+.app-user-workspace .creation-featured-heading span { color: var(--user-ink-soft) !important; font-size: 13px !important; }
+.app-user-workspace .creation-featured-heading h2 { color: var(--user-ink) !important; font-size: 22px !important; letter-spacing: -.025em !important; }
+.app-user-workspace .creation-featured-heading p { color: var(--user-ink-muted) !important; }
+.app-user-workspace .creation-featured-layout { gap: 18px !important; }
+.app-user-workspace .creation-featured-card { border: 0 !important; border-radius: var(--user-radius-card) !important; background: var(--user-surface) !important; box-shadow: var(--user-shadow-card) !important; }
+.app-user-workspace .creation-featured-card:hover,
+.app-user-workspace .creation-featured-card:focus-visible { border-color: var(--user-border-strong) !important; box-shadow: var(--user-shadow-hover) !important; transform: translateY(-2px) !important; }
+.app-user-workspace .creation-featured-copy strong { color: var(--user-ink) !important; }
+.app-user-workspace .creation-featured-copy > span { color: var(--user-ink-muted) !important; }
+.app-user-workspace .creation-featured-copy em { color: var(--user-accent) !important; }
+
+/* 首页精选灵感：一张主推荐带动右侧节奏，避免机械等宽网格。 */
+.app-user-workspace .creation-featured-layout {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+    grid-auto-rows: auto;
+    align-items: stretch;
+}
+.app-user-workspace .creation-featured-card.is-featured-hero { grid-column: span 2; grid-row: span 2; }
+.app-user-workspace .creation-featured-card.is-featured-hero .creation-featured-media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
+.app-user-workspace .creation-featured-card.is-featured-hero .creation-featured-media img { position: absolute; inset: 0; }
+.app-user-workspace .creation-featured-card:not(.is-featured-hero) .creation-featured-media { aspect-ratio: 1.55 / 1; }
+.app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) { grid-column: span 2; min-height: clamp(160px, 14vw, 210px); flex-direction: row; }
+.app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) .creation-featured-media { width: 48%; height: 100%; flex: 0 0 48%; aspect-ratio: auto; }
+.app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) .creation-featured-media img { position: absolute; inset: 0; }
+.app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) .creation-featured-copy { align-content: center; flex: 1; padding: 18px 22px; }
+.app-user-workspace .creation-featured-card:not(.is-featured-hero) .creation-featured-copy { padding: 12px 14px 14px; }
+.app-user-workspace .creation-featured-card:not(.is-featured-hero) .creation-featured-copy > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* 对话记录统一成窄而有层次的工作区，不让输入区吞掉首屏。 */
+.app-user-workspace .creation-thread-toolbar,
+.app-user-workspace .creation-thread-stage,
+.app-user-workspace .creation-thread-composer { width: min(820px, calc(100% - 48px)); }
+.app-user-workspace .creation-thread-toolbar { min-height: 54px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--user-border) 70%, transparent); }
+.app-user-workspace .creation-thread-scroll { background: color-mix(in srgb, var(--user-bg) 82%, var(--user-surface)); }
+.app-user-workspace .creation-thread-stage { padding-top: 28px; padding-bottom: 18px; }
+.app-user-workspace .creation-thread-composer { padding: 8px 0 18px; }
+.app-user-workspace .creation-home .creation-user-message { width: min(520px, 82%); margin-bottom: 28px; gap: 8px; }
+.app-user-workspace .creation-user-message-copy-wrap { border: 1px solid color-mix(in srgb, var(--user-accent) 12%, var(--user-border)); border-radius: 18px 18px 5px 18px; padding: 11px 14px; background: color-mix(in srgb, var(--user-accent) 7%, var(--user-surface)); box-shadow: 0 8px 24px color-mix(in srgb, var(--user-ink) 5%, transparent); }
+.app-user-workspace .creation-assistant-message { width: min(700px, 100%); margin-bottom: 28px; }
+.app-user-workspace .creation-message-content,
+.app-user-workspace .creation-message-error,
+.app-user-workspace .creation-message-reasoning-wrap { max-width: 680px; padding-top: 8px; }
+.app-user-workspace .creation-message-heading { min-height: 28px; }
+.app-user-workspace .creation-home .creation-thread-composer .creation-mode-tabs { transform: none; margin-bottom: 0; }
+.app-user-workspace .creation-history-drawer .ant-drawer-body { background: var(--user-bg); }
+
+@media (max-width: 720px) {
+    .app-user-workspace .creation-featured-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; }
+    .app-user-workspace .creation-featured-card.is-featured-hero { grid-column: 1 / -1; grid-row: auto; }
+    .app-user-workspace .creation-featured-card.is-featured-hero .creation-featured-media { flex: none; aspect-ratio: 1.7 / 1; }
+    .app-user-workspace .creation-featured-card.is-featured-hero .creation-featured-media img { position: static; }
+    .app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) { grid-column: auto; min-height: 0; flex-direction: column; }
+    .app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) .creation-featured-media { width: 100%; height: auto; flex: none; aspect-ratio: 1.55 / 1; }
+    .app-user-workspace .creation-featured-layout > .creation-featured-card:nth-child(4) .creation-featured-media img { position: static; }
+    .app-user-workspace .creation-thread-toolbar,
+    .app-user-workspace .creation-thread-stage,
+    .app-user-workspace .creation-thread-composer { width: calc(100% - 28px); }
+    .app-user-workspace .creation-home .creation-user-message { width: 90%; }
+}
+
+/* Shared library surfaces: no dark-mode geometry fork, only token changes. */
+.app-user-workspace .library-page > div,
+.app-user-workspace .task-library-frame,
+.app-user-workspace .settings-library-frame,
+.app-user-workspace .assets-library-page .canvas-library-frame,
+.app-user-workspace .project-library-card,
+.app-user-workspace .task-grid-card,
+.app-user-workspace .skill-library-card {
+    color: var(--user-ink) !important;
+}
+.app-user-workspace .task-library-frame,
+.app-user-workspace .settings-library-frame,
+.app-user-workspace .assets-library-page .canvas-library-frame {
+    border-color: var(--user-border) !important;
+    background: var(--user-surface) !important;
+    box-shadow: var(--user-shadow-card) !important;
+}
+.dark .app-user-workspace .task-library-frame,
+.dark .app-user-workspace .settings-library-frame,
+.dark .app-user-workspace .assets-library-page .canvas-library-frame { background: var(--user-surface) !important; }
+
+@media (max-width: 1100px) {
+    .app-user-workspace .creation-home > .creation-empty-workspace { width: min(100% - 40px, 900px) !important; }
+    .app-user-workspace .creation-empty-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+}
+@media (max-width: 680px) {
+    .app-user-workspace .app-workspace-topbar { padding-inline: 12px !important; gap: 8px; }
+    .app-user-workspace .app-workspace-topbar-breadcrumb > a,
+    .app-user-workspace .app-workspace-topbar-breadcrumb > span[aria-hidden] { display: none; }
+    .app-user-workspace .app-workspace-topbar-breadcrumb { min-width: 0; white-space: nowrap; }
+    .app-user-workspace .app-workspace-sidebar { width: 180px !important; }
+    .app-user-workspace .creation-home > .creation-empty-workspace { width: calc(100% - 24px) !important; padding-top: 28px !important; padding-bottom: 40px !important; }
+    .app-user-workspace .creation-home-heading h1 { font-size: 28px !important; }
+    .app-user-workspace .creation-home-heading p { font-size: 14px !important; }
+    .app-user-workspace .creation-launchpad > .creation-mode-capsule .creation-chat-control { min-width: 0 !important; padding-inline: 16px !important; }
+    .app-user-workspace .creation-chat-writing-surface,
+    .app-user-workspace .creation-chat-composer.is-empty .creation-chat-writing-surface { min-height: 250px !important; padding: 22px 18px 12px !important; }
+    .app-user-workspace .creation-chat-editor textarea,
+    .app-user-workspace .creation-chat-mention-editor { min-height: 120px !important; font-size: 17px !important; }
+    .app-user-workspace .creation-empty-suggest { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+    .app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+    .app-user-workspace .creation-empty-suggest .suggest-card { min-height: 80px !important; }
+    .app-user-workspace .creation-featured-works { margin-top: 48px !important; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .app-user-workspace .app-workspace-sidebar,
+    .app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+    .app-user-workspace .creation-empty-suggest .suggest-card,
+    .app-user-workspace .creation-featured-card { transition: none !important; }
+    .app-user-workspace .creation-empty-suggest .creation-hero-prompt:hover,
+    .app-user-workspace .creation-empty-suggest .suggest-card:hover,
+    .app-user-workspace .creation-featured-card:hover { transform: none !important; }
+}
+
+/* Quick actions are four independent tiles, not a nested list. */
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt,
+.app-user-workspace .creation-empty-suggest .suggest-card {
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 12px !important;
+    align-items: flex-start !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+}
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-copy,
+.app-user-workspace .creation-empty-suggest .suggest-copy {
+    display: flex !important;
+    min-width: 0 !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+}
+.app-user-workspace .creation-empty-suggest .creation-hero-prompt-text { display: block !important; margin-top: 6px !important; }
+
+/* Keep list/detail pages in the same semantic palette in dark mode. */
+.app-user-workspace .library-page,
+.app-user-workspace .library-page > div,
+.app-user-workspace .settings-page,
+.app-user-workspace .settings-page .settings-content,
+.app-user-workspace .assets-library-page,
+.app-user-workspace .project-library-page {
+    color: var(--user-ink) !important;
+}
+.app-user-workspace .task-record-row,
+.app-user-workspace .task-grid-card,
+.app-user-workspace .project-library-card,
+.app-user-workspace .skill-library-card,
+.app-user-workspace .assets-library-page .canvas-library-frame,
+.app-user-workspace .settings-library-frame,
+.app-user-workspace .settings-nav-panel,
+.app-user-workspace .settings-channel,
+.app-user-workspace .settings-preference-block {
+    background: var(--user-surface) !important;
+    border-color: var(--user-border) !important;
+    color: var(--user-ink) !important;
+    box-shadow: var(--user-shadow-card) !important;
+}
+.app-user-workspace .task-record-row:hover,
+.app-user-workspace .task-record-row:focus-within,
+.app-user-workspace .task-grid-card:hover,
+.app-user-workspace .task-grid-card:focus-within,
+.app-user-workspace .project-library-card:hover,
+.app-user-workspace .project-library-card:focus-within,
+.app-user-workspace .skill-library-card:hover,
+.app-user-workspace .skill-library-card:focus-within {
+    background: var(--user-surface-hover) !important;
+    border-color: var(--user-border-strong) !important;
+    box-shadow: var(--user-shadow-hover) !important;
+}
+.app-user-workspace .settings-nav-item { color: var(--user-ink-muted) !important; }
+.app-user-workspace .settings-nav-item.is-active { background: var(--user-accent-soft) !important; color: var(--user-accent) !important; }
+.app-user-workspace :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number) {
+    border-color: var(--user-border) !important;
+    background: var(--user-surface) !important;
+    color: var(--user-ink) !important;
+    box-shadow: none !important;
+}
+.app-user-workspace :where(.ant-input::placeholder, .ant-select-selection-placeholder) { color: var(--user-ink-soft) !important; }
+.app-user-workspace .ant-input-affix-wrapper > .ant-input {
+    background: transparent !important;
+    border: 0 !important;
+    box-shadow: none !important;
+}
+.app-user-workspace :where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-select-selector:hover, .ant-picker:hover) { border-color: var(--user-border-strong) !important; }
+.app-user-workspace :where(.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector, .ant-picker-focused) { border-color: var(--user-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--user-accent) 14%, transparent) !important; }
+.creation-model-picker-surface .creation-model-picker-menu {
+    max-height: none !important;
+    overflow: visible !important;
+    width: min(360px, calc(100vw - 24px)) !important;
+    padding: 10px !important;
+}
+.creation-model-picker-surface .canvas-model-picker-brands { display: grid; gap: 5px; }
+.creation-model-picker-surface .canvas-model-picker-subheading { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 5px 8px; color: var(--foreground); font-size: 12px; font-weight: 650; }
+.creation-model-picker-surface .canvas-model-picker-subheading small { color: color-mix(in srgb, var(--foreground) 52%, transparent); font-size: 10px; font-weight: 500; }
+.creation-model-picker-surface .canvas-model-picker-brand { display: flex; min-height: 58px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 13px; padding: 8px 10px; background: transparent; color: var(--foreground); text-align: left; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.16,1,.3,1); }
+.creation-model-picker-surface .canvas-model-picker-brand:hover { border-color: var(--workspace-border); background: var(--workspace-surface-hover); transform: translateX(2px); }
+.creation-model-picker-surface .canvas-model-picker-brand-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--workspace-accent) 20%, var(--workspace-surface-strong)), color-mix(in srgb, var(--workspace-accent) 6%, var(--workspace-surface-strong))); color: var(--workspace-accent); }
+.creation-model-picker-surface .canvas-model-picker-brand-icon svg { color: currentColor !important; opacity: 1 !important; }
+.creation-model-picker-surface .canvas-model-picker-brand:nth-child(3n) .canvas-model-picker-brand-icon { color: #d57b16; }
+.creation-model-picker-surface .canvas-model-picker-brand:nth-child(4n) .canvas-model-picker-brand-icon { color: #25845d; }
+.creation-model-picker-surface .canvas-model-picker-brand-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
+.creation-model-picker-surface .canvas-model-picker-brand-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.creation-model-picker-surface .canvas-model-picker-brand-copy small { color: color-mix(in srgb, var(--foreground) 55%, transparent); font-size: 10px; }
+.creation-model-picker-surface .canvas-model-picker-brand-arrow { width: 15px; height: 15px; color: color-mix(in srgb, var(--foreground) 48%, transparent); transform: rotate(-90deg); }
+.creation-model-picker-surface .canvas-model-picker-secondary-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 9px; }
+.creation-model-picker-surface .canvas-model-picker-back { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--workspace-border); border-radius: 9px; background: var(--workspace-surface-hover); color: var(--foreground); }
+.creation-model-picker-surface .canvas-model-picker-back svg { width: 15px; height: 15px; }
+.creation-model-picker-surface .canvas-model-picker-secondary-head > span { display: grid; gap: 2px; }
+.creation-model-picker-surface .canvas-model-picker-secondary-head strong { color: var(--foreground); font-size: 13px; }
+.creation-model-picker-surface .canvas-model-picker-secondary-head small { color: color-mix(in srgb, var(--foreground) 52%, transparent); font-size: 10px; }
+.creation-model-picker-surface .canvas-model-picker-option { min-height: 55px; border-radius: 12px; padding: 8px 9px; }
+.creation-model-picker-surface .canvas-model-picker-option > span:first-child > span:first-child { width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--workspace-accent) 10%, var(--workspace-surface-strong)) !important; color: var(--workspace-accent); }
+.creation-model-picker-surface .canvas-model-picker-option > span:first-child > span:first-child svg { color: currentColor !important; opacity: 1 !important; }
+.creation-model-picker-surface .canvas-model-picker-option:nth-child(3n) > span:first-child > span:first-child { color: #d57b16; }
+.creation-model-picker-surface .canvas-model-picker-option:nth-child(4n) > span:first-child > span:first-child { color: #25845d; }
+.creation-model-picker-surface .canvas-model-picker-option .text-amber-600 { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: color-mix(in srgb, #e28a17 12%, var(--workspace-surface-strong)); color: #c66d00 !important; padding: 5px 8px; font-size: 11px; font-weight: 700; }
diff --git a/web/src/styles/workspace-product.css b/web/src/styles/workspace-product.css
new file mode 100644
index 000000000..726889abb
--- /dev/null
+++ b/web/src/styles/workspace-product.css
@@ -0,0 +1,680 @@
+/* Shared product components. Page files own composition; these rules own material,
+   control geometry and interaction. Spatial canvas and admin layouts stay isolated. */
+.app-user-workspace .studio-collection-page > div {
+    width: min(var(--product-content-max), calc(100% - 64px));
+    margin-inline: auto;
+    padding: 24px 0 48px;
+}
+.collection-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.app-user-workspace.app-product-workspace .app-page-header { background: transparent; }
+.app-user-workspace .collection-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin: var(--space-4) 0 var(--space-6);
+    padding: 0;
+}
+.collection-toolbar-controls { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
+.collection-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }
+.collection-toolbar-controls > .ant-input-affix-wrapper { width: 280px; max-width: 100%; }
+.collection-content { min-width: 0; }
+.collection-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); border-radius: var(--user-radius-control); padding: var(--space-3) var(--space-4); background: var(--user-accent-soft); font-size: var(--fs-caption); }
+
+.app-user-workspace .canvas-collection-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
+    align-items: start;
+    gap: var(--space-6) var(--space-5);
+    margin: 0;
+}
+.canvas-collection-card { position: relative; min-width: 0; padding: var(--space-2); }
+.canvas-collection-open { display: block; width: 100%; cursor: pointer; outline-offset: 4px; }
+.canvas-collection-preview { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--user-radius-control); background: var(--user-surface-muted); }
+.canvas-collection-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--user-motion); }
+.canvas-collection-card:hover .canvas-collection-preview img { transform: scale(1.025); }
+.canvas-collection-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2) var(--space-2); }
+.canvas-collection-heading-row { display: flex; min-width: 0; align-items: center; padding-right: 64px; min-height: 26px; }
+.canvas-collection-title { overflow: hidden; color: var(--user-ink); font-size: 15px; font-weight: 600; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
+.canvas-collection-title-input { width: 100%; }
+.canvas-collection-meta { display: flex; min-width: 0; gap: var(--space-2); color: var(--user-ink-muted); font-size: var(--fs-caption); }
+.canvas-collection-meta-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.canvas-collection-meta-item:first-child { flex: 1; }
+.canvas-collection-meta-separator { display: none; }
+.canvas-collection-updated { color: var(--user-ink-soft); font-size: var(--fs-caption); }
+.canvas-collection-actions { display: flex; gap: 2px; position: absolute; right: var(--space-3); bottom: 67px; }
+.canvas-collection-select { position: absolute; top: var(--space-4); left: var(--space-4); opacity: 0; transition: opacity var(--user-motion); }
+.canvas-collection-select input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--user-accent); }
+.canvas-collection-select.is-visible, .canvas-collection-card:hover .canvas-collection-select, .canvas-collection-card:focus-within .canvas-collection-select { opacity: 1; }
+.canvas-collection-opening { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: color-mix(in srgb, var(--user-surface) 88%, transparent); color: var(--user-ink); font-size: var(--fs-caption); }
+.product-media-placeholder { display: flex; width: 100%; height: 100%; min-height: 80px; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-3); background: var(--user-surface-muted, var(--library-cover-surface)); color: var(--user-ink-soft, var(--muted-foreground)); font-size: var(--fs-caption); }
+.product-media-placeholder-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--user-radius-control, var(--r-lg)); background: var(--user-surface, var(--library-surface)); }
+.product-media-placeholder-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
+.canvas-collection-preview .canvas-project-empty { background: var(--user-surface-muted); }
+.canvas-collection-preview .canvas-project-empty-icon { width: 24px; height: 24px; }
+
+.product-icon-button { display: inline-grid; width: 30px; height: 30px; flex-shrink: 0; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--user-ink-muted); cursor: pointer; transition: background var(--user-motion), color var(--user-motion), transform var(--user-motion); }
+.product-icon-button svg { width: var(--user-icon-size); height: var(--user-icon-size); stroke-width: 1.7; }
+.product-icon-button:hover { background: var(--user-surface-muted); color: var(--user-ink); }
+.product-icon-button:active { transform: scale(.94); }
+.product-icon-button:focus-visible, .canvas-collection-open:focus-visible { outline: 2px solid var(--user-accent); }
+.product-delete { display: inline-flex; }
+.product-delete-trigger { background: var(--user-surface); }
+.product-delete-trigger:hover, .product-delete-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--status-error) 12%, var(--user-surface)); color: var(--status-error); }
+.product-delete-trigger .lucide-trash-2 > path { transform-origin: 12px 6px; transition: transform var(--user-motion); }
+.product-delete-trigger[aria-expanded="true"] .lucide-trash-2 > path:first-child { transform: translateY(-2px) rotate(-8deg); }
+.product-delete-confirm { width: min(280px, calc(100vw - 64px)); padding: var(--space-1); color: var(--user-ink); }
+.product-delete-confirm strong { display: block; margin-bottom: var(--space-2); font-size: 14px; }
+.product-delete-confirm p { margin: 0; color: var(--user-ink-muted); font-size: var(--fs-caption); line-height: 1.7; }
+.product-delete-confirm .product-delete-error { margin-top: var(--space-2); color: var(--status-error); }
+.product-delete-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
+.project-collection-delete { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }
+.story-launcher-panel { border-radius: var(--user-radius-card); background: var(--user-surface); padding: var(--space-4); margin-bottom: var(--space-5); }
+.story-launcher-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; }
+.story-launcher-head::-webkit-details-marker { display: none; }
+.story-launcher-head:focus-visible { outline: 2px solid var(--user-accent); outline-offset: 8px; border-radius: var(--user-radius-control); }
+.story-launcher-expand { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--user-radius-control); color: var(--user-accent); background: var(--user-accent-soft); font-size: 12px; white-space: nowrap; }
+.story-launcher-expand svg { transition: transform var(--user-motion); }
+.story-launcher-panel[open] .story-launcher-expand svg { transform: rotate(45deg); }
+.story-launcher-title { display: flex; align-items: center; gap: var(--space-3); }
+.story-launcher-title h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--user-ink); }
+.story-launcher-title p { margin: var(--space-1) 0 0; font-size: var(--fs-caption); color: var(--user-ink-muted); }
+.story-launcher-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--user-radius-control); background: var(--user-accent-soft); color: var(--user-accent); }
+.story-launcher-main { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-4); }
+.story-launcher-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.story-launcher-actions > .ant-btn-primary { margin-left: auto; }
+.story-launcher-style-chip { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 140px; border-radius: var(--user-radius-control); overflow: hidden; background: var(--user-surface-muted); font-size: var(--fs-caption); color: var(--user-ink); }
+.story-launcher-style-chip img { width: 56px; height: 56px; object-fit: cover; }
+.story-launcher-options { margin-top: var(--space-4); color: var(--user-ink-muted); font-size: var(--fs-caption); }
+.story-launcher-options summary { width: fit-content; padding-block: var(--space-2); cursor: pointer; }
+.story-launcher-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
+.story-launcher-controls label { display: flex; flex-direction: column; gap: var(--space-2); }
+.story-launcher-controls .ant-select { width: 100%; }
+.app-product-workspace .product-collection-card .project-library-heading strong { font-size: 15px; }
+.app-product-workspace .product-collection-card :is(.project-library-subtitle, .project-library-progress, .project-library-stats, .library-card-meta, .library-card-description) { color: var(--user-ink-muted); }
+.app-product-workspace .product-collection-card .project-library-cover-scrim { background: linear-gradient(transparent 65%, rgba(0, 0, 0, .12)); }
+.app-product-workspace .skill-library-grid.library-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
+.app-product-workspace .skill-library-card.product-collection-card { min-height: 220px; padding: var(--space-4); }
+.app-product-workspace .skill-library-card .skill-card-top { align-items: center; gap: var(--space-3); }
+.app-product-workspace .skill-library-card .skill-card-icon { width: 36px; height: 36px; flex-shrink: 0; margin: 0; border: 0; background: color-mix(in srgb, var(--category-accent, var(--user-ink-muted)) 12%, var(--user-surface)); color: var(--category-accent, var(--user-ink-muted)); }
+.app-product-workspace .skill-library-card h3 { margin: 0; font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.app-product-workspace .skill-library-card .skill-card-description { margin-top: var(--space-3); }
+.app-product-workspace .skill-library-card .skill-card-description p { margin: 0; font-size: 13px; line-height: 1.7; -webkit-line-clamp: 3; }
+.asset-collection-date, .asset-collection-source { color: var(--user-ink-soft); font-size: var(--fs-caption); }
+.asset-collection-summary { color: var(--user-ink-muted); font-size: var(--fs-caption); }
+.app-product-workspace .asset-collection-body h2 { font-size: 14px; line-height: 1.6; }
+.app-product-workspace .task-collection-content .task-record-list { display: grid; gap: var(--space-2); }
+.app-product-workspace .task-collection-content .task-record-row { padding-inline: var(--space-4); }
+.assets-collection-layout {
+    display: grid;
+    grid-template-columns: 220px minmax(0, 1fr);
+    align-items: start;
+    gap: 28px;
+}
+.assets-collection-filters {
+    position: sticky;
+    top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    max-height: calc(100dvh - 120px);
+    overflow: hidden;
+    margin-bottom: 0;
+}
+.assets-collection-filter-scroll {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 18px;
+    overflow: auto;
+    padding-right: 4px;
+}
+.collection-filter-group { display: flex; flex-direction: column; gap: 6px; }
+.collection-filter-label { color: var(--user-ink-soft); font-size: 11px; font-weight: 650; letter-spacing: .04em; white-space: nowrap; }
+.collection-filter-options,
+.assets-collection-filters .collection-folder-list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 2px;
+}
+.assets-collection-filters .assets-filter-item { width: 100%; }
+.assets-collection-filters .collection-folder-list > button,
+.assets-collection-filters .collection-folder-list .assets-folder-row { width: 100%; max-width: none; }
+.collection-folder-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
+.collection-folder-heading .collection-filter-label { padding: 0; }
+.collection-trash-entry {
+    flex-shrink: 0;
+    padding-top: 8px;
+    border-top: 1px solid color-mix(in srgb, var(--user-ink) 8%, transparent);
+}
+.app-user-workspace .assets-collection-content .assets-library-grid { margin-top: 0; }
+
+/* Shared component material replaces legacy per-page strokes and shadows. */
+@layer utilities {
+    .app-product-workspace .story-launcher-input.ant-input { border: 0 !important; border-radius: var(--user-radius-control); padding: var(--space-3) var(--space-4); background: var(--user-surface-muted) !important; color: var(--user-ink); font-size: 14px; line-height: 1.8; }
+    .app-product-workspace .story-launcher-input.ant-input::placeholder { color: var(--user-ink-soft) !important; }
+    .app-product-workspace .ant-btn-default:not(.ant-btn-dangerous):not([aria-pressed="true"]) { background: var(--user-surface-muted) !important; color: var(--user-ink) !important; }
+    .app-product-workspace .ant-btn-default:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):hover { background: var(--user-surface-hover) !important; }
+    .app-user-workspace .product-collection-card {
+        overflow: hidden;
+        border: 0 !important;
+        border-radius: var(--user-radius-card) !important;
+        background: var(--user-surface) !important;
+        color: var(--user-ink) !important;
+        box-shadow: none !important;
+        transition: background var(--user-motion), transform var(--user-motion);
+    }
+    .app-user-workspace .product-collection-card:hover,
+    .app-user-workspace .product-collection-card:focus-within {
+        background: color-mix(in srgb, var(--user-surface) 65%, var(--user-surface-muted)) !important;
+        box-shadow: none !important;
+        transform: translateY(-2px);
+    }
+    .app-user-workspace .product-collection-card.is-selected { outline: 2px solid var(--user-accent); outline-offset: 2px; }
+    .app-user-workspace .asset-library-card { padding: var(--space-2); }
+    .app-user-workspace .asset-library-card .library-card-media { border-radius: var(--user-radius-control); }
+    .app-user-workspace .asset-library-card .library-card-body { padding: var(--space-3) var(--space-2) var(--space-2); }
+    .app-user-workspace .skill-card-action { margin-top: var(--space-4); border: 0; padding-top: 0; }
+    .app-user-workspace .skill-library-card.is-added { outline: 0; }
+    .app-user-workspace .project-library-card { padding: var(--space-2); }
+    .app-user-workspace .project-library-cover { border-radius: var(--user-radius-control); }
+    .app-user-workspace .project-library-body { padding: var(--space-3) var(--space-2); }
+    .app-user-workspace .project-library-stats { border-top: 0; padding-top: var(--space-3); }
+    .app-product-workspace .ant-btn,
+    .app-product-overlays .ant-btn {
+        height: var(--user-control-height);
+        border-radius: var(--user-radius-control);
+        border-color: transparent !important;
+        box-shadow: none !important;
+        font-size: 13px;
+        gap: var(--space-2);
+    }
+    .app-product-workspace .ant-btn-sm { height: 30px; border-radius: 8px; font-size: 12px; }
+    .app-product-workspace .ant-btn > .ant-btn-icon svg,
+    .app-product-overlays .ant-btn > .ant-btn-icon svg { width: var(--user-icon-size); height: var(--user-icon-size); stroke-width: 1.7; }
+    .app-product-workspace .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]),
+    .app-product-overlays .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]) {
+        background: var(--user-action-gradient) !important;
+        color: var(--user-action-foreground) !important;
+    }
+    .app-product-workspace .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):hover,
+    .app-product-overlays .ant-btn-primary:not(.ant-btn-dangerous):not([aria-pressed="true"]):not(:disabled):hover { background: var(--user-action-gradient-hover) !important; }
+    .app-product-workspace .ant-btn:disabled,
+    .app-product-overlays .ant-btn:disabled { opacity: .42; }
+    .app-user-workspace .collection-toolbar .ant-input-affix-wrapper,
+    .app-user-workspace .collection-toolbar .ant-select,
+    .app-user-workspace .collection-toolbar .ant-select-selector {
+        height: var(--user-control-height);
+        border: 0 !important;
+        border-radius: var(--user-radius-control) !important;
+        background: var(--user-surface-muted) !important;
+        box-shadow: none !important;
+    }
+    .app-user-workspace .collection-toolbar .ant-input-affix-wrapper:focus-within { outline: 2px solid var(--user-accent-soft); }
+    .app-user-workspace .collection-toolbar .ant-input-affix-wrapper svg { width: var(--user-icon-size); height: var(--user-icon-size); color: var(--user-ink-soft); }
+}
+
+@media (max-width: 720px) {
+    .app-product-workspace .library-page > div { width: calc(100% - 32px); }
+    .app-product-workspace .assets-library-page .assets-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
+    .app-product-workspace .app-pagination-bar { flex-wrap: wrap; gap: var(--space-2); padding-inline: 0; }
+    .app-product-workspace .app-pagination-pages { justify-content: center; flex: 1 1 100%; }
+    .app-user-workspace .studio-collection-page > div { width: calc(100% - 32px); padding-top: 20px; }
+    .app-user-workspace .canvas-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
+    .collection-toolbar-controls > .ant-input-affix-wrapper { width: 100%; }
+    .collection-toolbar-controls { flex-basis: 100%; }
+    .canvas-collection-meta { flex-wrap: wrap; gap: var(--space-1); }
+    .canvas-collection-updated { font-size: 11px; }
+    .canvas-collection-heading-row { padding-right: 0; }
+    .canvas-collection-actions { position: static; justify-content: flex-end; padding: 0 var(--space-2) var(--space-1); }
+    .canvas-collection-select { opacity: 1; }
+    .assets-collection-layout { grid-template-columns: 1fr; gap: var(--space-4); }
+    .assets-collection-filters {
+        position: static;
+        max-height: none;
+        overflow: visible;
+    }
+    .assets-collection-filter-scroll { overflow: visible; }
+    .collection-filter-group { gap: var(--space-2); }
+    .assets-collection-filters .collection-filter-options,
+    .assets-collection-filters .collection-folder-list { flex-direction: row; flex-wrap: wrap; }
+    .assets-collection-filters .assets-filter-item { width: auto; }
+    .assets-collection-filters .collection-folder-list > button,
+    .assets-collection-filters .collection-folder-list .assets-folder-row { width: auto; max-width: 220px; }
+    .app-user-workspace .skill-library-grid { grid-template-columns: minmax(0, 1fr); }
+    .app-product-workspace .skill-library-grid.library-grid { grid-template-columns: minmax(0, 1fr); }
+    .story-launcher-panel { padding: var(--space-4); }
+    .story-launcher-main { flex-wrap: wrap; }
+}
+@media (hover: none) { .canvas-collection-select { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+    .app-user-workspace .product-collection-card, .product-icon-button, .canvas-collection-preview img, .product-delete-trigger .lucide-trash-2 > path { transition: none; transform: none; }
+    .app-user-workspace .product-collection-card:hover { transform: none; }
+}
+
+/* ========================================================================
+   Product interaction contract
+   ------------------------------------------------------------------------
+   This is the final user-workspace layer. It deliberately owns shared
+   geometry and motion so pages do not invent a new button, card or overlay
+   language for every route. The canvas editor keeps its own spatial chrome.
+   ======================================================================== */
+.app-user-workspace,
+.app-product-overlays {
+    --product-ease: cubic-bezier(.16, 1, .3, 1);
+    --product-fast: 120ms;
+    --product-state: 180ms;
+    --product-enter: 360ms;
+    --product-content-max: 1480px;
+    --product-focus-ring: color-mix(in srgb, var(--user-accent) 22%, transparent);
+    --product-accent-blue: #4167bf;
+    --product-accent-green: #287f65;
+    --product-accent-orange: #a46524;
+    --product-accent-pink: #ae4c77;
+    --product-accent-violet: #6b4fc2;
+    --product-accent-cyan: #2f6f8f;
+}
+
+.dark .app-user-workspace,
+.dark .app-product-workspace,
+.dark .app-product-overlays {
+    --product-accent-blue: #96b4ff;
+    --product-accent-green: #79cfb1;
+    --product-accent-orange: #edb77c;
+    --product-accent-pink: #efa2c3;
+    --product-accent-violet: #c4b5fd;
+    --product-accent-cyan: #7ec4e0;
+}
+.app-product-workspace [data-category="drama"] { --category-accent: var(--product-accent-blue); }
+.app-product-workspace [data-category="ecommerce"] { --category-accent: var(--product-accent-orange); }
+.app-product-workspace [data-category="creative"] { --category-accent: var(--product-accent-pink); }
+.app-product-workspace [data-category="social"] { --category-accent: var(--product-accent-green); }
+
+.app-product-workspace .library-page > div,
+.app-product-workspace .studio-collection-page > div {
+    width: min(var(--product-content-max), calc(100% - 64px));
+    padding-top: 24px;
+    padding-bottom: 44px;
+}
+
+.app-product-workspace .library-page .app-page-header,
+.app-product-workspace .studio-collection-page .app-page-header {
+    min-height: 64px;
+    align-items: center;
+    gap: 16px;
+    padding: 0 0 16px;
+}
+
+.app-product-workspace .app-page-header-title,
+.app-product-workspace .app-page-header h1 {
+    max-width: 38ch;
+    margin: 0;
+    color: var(--user-ink) !important;
+    font-size: 20px !important;
+    font-weight: 680 !important;
+    letter-spacing: -.025em;
+    line-height: 1.25 !important;
+}
+
+.app-product-workspace .app-page-header p {
+    max-width: 58ch;
+    margin: 4px 0 0 !important;
+    color: var(--user-ink-muted) !important;
+    font-size: 12px !important;
+    line-height: 1.5 !important;
+}
+
+.app-product-workspace .app-page-header > div:last-child {
+    gap: 8px;
+}
+
+.app-product-workspace .collection-toolbar,
+.app-product-workspace .library-page .library-toolbar,
+.app-product-workspace .library-page .admin-list-toolbar {
+    min-height: 0;
+    margin: 0 0 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+.app-product-workspace .collection-toolbar-controls,
+.app-product-workspace .admin-list-toolbar-main {
+    gap: 8px;
+}
+
+.app-product-workspace .collection-toolbar-actions,
+.app-product-workspace .admin-list-toolbar-actions {
+    gap: 8px;
+}
+
+.app-product-workspace .collection-content {
+    min-height: 0;
+}
+
+.app-product-workspace .canvas-collection-grid,
+.app-product-workspace .library-grid,
+.app-product-workspace .assets-library-grid,
+.app-product-workspace .skill-library-grid,
+.app-product-workspace .plugins-grid,
+.app-product-workspace .task-grid-view {
+    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
+    gap: 24px 16px;
+}
+
+.app-product-workspace .assets-library-grid,
+.app-product-workspace .skill-library-grid {
+    gap: 20px 16px;
+}
+.app-product-workspace .project-library-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 312px), 1fr)); gap: 24px; }
+
+.app-product-workspace .product-collection-card,
+.app-product-workspace .library-card,
+.app-product-workspace .task-grid-card,
+.app-product-workspace .plugin-card,
+.app-product-workspace .skill-library-card {
+    animation: product-card-enter var(--product-enter) var(--product-ease) backwards;
+}
+
+.app-product-workspace .story-launcher-panel {
+    margin-top: 0;
+    padding: 16px;
+    border: 0;
+    border-radius: 18px;
+    background: var(--user-surface);
+    box-shadow: none;
+}
+
+.app-product-workspace .story-launcher-main {
+    margin-block: 14px;
+}
+
+.app-product-workspace .story-launcher-input.ant-input {
+    min-height: 64px;
+    padding: 14px 16px;
+    background: var(--user-surface-muted) !important;
+    transition: background var(--product-state) var(--product-ease), box-shadow var(--product-state) var(--product-ease);
+}
+
+.app-product-workspace .story-launcher-input.ant-input:focus {
+    background: var(--user-surface) !important;
+    box-shadow: 0 0 0 3px var(--product-focus-ring) !important;
+}
+
+.app-product-workspace .skills-navigation {
+    margin: 0;
+    max-width: 100%;
+}
+.app-product-workspace .skills-browse-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
+.app-product-workspace .skills-browse-bar .collection-toolbar { margin: 0; max-width: 100%; }
+
+.app-product-workspace .skills-scope-panel { display: grid; gap: 28px; padding: 0; animation: none; }
+.app-product-workspace .skill-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.app-product-workspace .skill-section-heading h2 { margin: 0; }
+.app-product-workspace .skill-group-icon { border: 0; color: var(--category-accent, var(--user-ink-muted)); background: transparent; }
+.app-product-workspace .skills-tabs-indicator { top: 3px; bottom: 3px; background: var(--user-surface); box-shadow: none; transition: left var(--product-enter) var(--product-ease), width var(--product-enter) var(--product-ease); }
+
+.app-product-workspace .skills-tabs {
+    width: fit-content;
+    max-width: 100%;
+    border-radius: 12px;
+    background: var(--user-surface-muted);
+    padding: 3px;
+}
+
+.app-product-workspace .skills-tab {
+    min-height: 32px;
+    border-radius: 9px;
+    color: var(--user-ink-muted);
+    transition: color var(--product-state) var(--product-ease), background var(--product-state) var(--product-ease), transform var(--product-state) var(--product-ease);
+}
+
+.app-product-workspace .skills-tab:hover { color: var(--user-ink); }
+.app-product-workspace .skills-tab.is-active { background: transparent; color: var(--user-ink); box-shadow: none; }
+.app-product-workspace .skills-tab-count { background: var(--user-surface-hover); color: var(--user-ink-muted); }
+
+.app-product-workspace .task-record-list,
+.app-product-workspace .task-group-list {
+    gap: 8px !important;
+}
+
+.app-product-workspace .task-record-row {
+    min-height: 72px;
+    border: 0 !important;
+    border-radius: 14px !important;
+    background: var(--user-surface) !important;
+    transition: background var(--product-state) var(--product-ease), transform var(--product-state) var(--product-ease);
+}
+
+.app-product-workspace .task-record-row:hover,
+.app-product-workspace .task-record-row:focus-within {
+    transform: translateX(2px);
+}
+
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link { min-height: 62px; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px; border-radius: 14px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-main { flex-direction: column; gap: 4px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link.is-collapsed .app-workspace-nav-title { display: block !important; max-width: 100%; color: var(--user-ink-muted); font-size: 10px; line-height: 1.1; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link.is-active .app-workspace-nav-title { color: var(--user-ink); }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link.is-collapsed .app-workspace-nav-meta { display: none !important; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-group { gap: 10px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link { width: 54px !important; padding: 6px 0 !important; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-main { width: 100%; align-items: center; justify-content: center; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-icon { width: 30px; height: 30px; flex-basis: 30px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link .app-workspace-nav-icon svg,
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link .app-workspace-nav-main > svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile-row { width: 100%; justify-content: center; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; margin-inline: auto; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-notification-spacer { display: none; }
+
+.app-user-workspace .app-workspace-nav-link { --nav-accent: var(--user-ink-muted); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="home"] { --nav-accent: var(--product-accent-orange); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="projects"] { --nav-accent: var(--product-accent-blue); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="canvas"] { --nav-accent: var(--product-accent-green); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="assets"] { --nav-accent: #c4891a; }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="skills"] { --nav-accent: var(--product-accent-pink); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="plugins"] { --nav-accent: var(--product-accent-violet); }
+.app-user-workspace .app-workspace-nav-link[data-nav-id="tasks"] { --nav-accent: var(--product-accent-cyan); }
+.dark .app-user-workspace .app-workspace-nav-link[data-nav-id="assets"] { --nav-accent: #e8c37a; }
+.app-user-workspace .app-workspace-nav-icon {
+    display: grid;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 28px;
+    place-items: center;
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--nav-accent) 14%, transparent);
+    color: var(--nav-accent);
+    transition: background var(--product-state) var(--product-ease), transform var(--product-state) var(--product-ease), box-shadow var(--product-state) var(--product-ease);
+}
+.app-user-workspace .app-workspace-nav-icon svg {
+    color: var(--nav-accent) !important;
+    opacity: 1 !important;
+    transform-origin: center;
+    transition: transform var(--product-state) var(--product-ease);
+}
+.app-user-workspace .app-workspace-nav-link:hover .app-workspace-nav-icon,
+.app-user-workspace .app-workspace-nav-link:focus-visible .app-workspace-nav-icon {
+    background: color-mix(in srgb, var(--nav-accent) 22%, transparent);
+    transform: translateY(-1px);
+}
+.app-user-workspace .app-workspace-nav-link:hover .app-workspace-nav-icon svg,
+.app-user-workspace .app-workspace-nav-link:focus-visible .app-workspace-nav-icon svg {
+    animation: workspace-nav-icon-nudge 420ms var(--product-ease);
+}
+.app-user-workspace .app-workspace-nav-link.is-active {
+    background: color-mix(in srgb, var(--nav-accent) 12%, var(--user-surface-muted)) !important;
+}
+.app-user-workspace .app-workspace-nav-link.is-active .app-workspace-nav-icon {
+    background: color-mix(in srgb, var(--nav-accent) 24%, transparent);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nav-accent) 10%, transparent);
+}
+.app-user-workspace .app-workspace-nav-link:active .app-workspace-nav-icon { transform: scale(.94); }
+.app-user-workspace .app-workspace-nav-group > div > div .app-workspace-nav-link {
+    animation: workspace-nav-item-enter var(--product-enter) var(--product-ease) both;
+}
+.app-user-workspace .app-workspace-nav-group > div > div:nth-child(1) .app-workspace-nav-link { animation-delay: 0ms; }
+.app-user-workspace .app-workspace-nav-group > div > div:nth-child(2) .app-workspace-nav-link { animation-delay: 40ms; }
+.app-user-workspace .app-workspace-nav-group > div > div:nth-child(3) .app-workspace-nav-link { animation-delay: 80ms; }
+.app-user-workspace .app-workspace-nav-group > div > div:nth-child(4) .app-workspace-nav-link { animation-delay: 120ms; }
+.app-user-workspace .app-workspace-nav-group > div > div:nth-child(n + 5) .app-workspace-nav-link { animation-delay: 160ms; }
+
+@keyframes workspace-nav-icon-nudge {
+    0% { transform: rotate(0deg) scale(1); }
+    42% { transform: rotate(-10deg) scale(1.08); }
+    100% { transform: rotate(0deg) scale(1); }
+}
+@keyframes workspace-nav-item-enter {
+    from { opacity: 0; transform: translateX(-6px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+.creation-floating-prompt { position: absolute; z-index: 40; top: 14px; left: 50%; display: flex; width: min(860px, calc(100% - 96px)); min-height: 72px; align-items: center; gap: 16px; border: 1px solid var(--user-border); border-radius: 24px; padding: 10px 12px 10px 22px; background: var(--user-surface-raised); color: var(--user-accent); box-shadow: 0 16px 42px color-mix(in srgb, var(--user-ink) 12%, transparent); }
+.creation-floating-prompt > svg { width: 22px; height: 22px; flex: 0 0 22px; }
+.creation-floating-prompt input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--user-ink); font-size: 16px; }
+.creation-floating-prompt input::placeholder { color: var(--user-ink-soft); }
+.creation-floating-prompt button { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 0; border-radius: 15px; background: var(--user-accent-soft); color: var(--user-accent); transition: transform var(--user-motion), background var(--user-motion); }
+.creation-floating-prompt button:hover { background: var(--user-surface-hover); transform: scale(1.05); }
+.creation-floating-prompt button:focus-visible { outline: 2px solid var(--user-accent); outline-offset: 2px; }
+.creation-floating-prompt button svg { width: 19px; height: 19px; }
+.app-user-workspace .creation-chat-composer.is-thread { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 10px; }
+.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row { grid-column: 1; grid-row: 1 / 3; min-width: 0; padding: 8px 0 8px 8px; }
+.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-tabs { display: grid; width: 100%; height: 100%; grid-template-rows: repeat(3, minmax(52px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 16px; transform: none; }
+.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-button { height: auto; min-height: 52px; flex-direction: column; gap: 3px; padding: 5px 2px; font-size: 11px; }
+.app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row .creation-mode-indicator { top: 4px; left: 4px; }
+.app-user-workspace .creation-chat-composer.is-thread .creation-chat-writing-surface,
+.app-user-workspace .creation-chat-composer.is-thread .creation-chat-dock { grid-column: 2; min-width: 0; }
+.app-user-workspace .creation-composer-stage { display: flex; min-width: 0; align-items: stretch; gap: 14px; }
+.app-user-workspace .creation-composer-stage.is-thread-mode { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
+.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs { display: grid; width: 76px; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(54px, 1fr)); align-self: stretch; margin: 0; padding: 4px; border-radius: 18px; }
+.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs .creation-mode-button { min-width: 0; min-height: 0; flex-direction: column; gap: 3px; padding: 7px 3px; font-size: 11px; }
+.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs .creation-mode-indicator { inset: 4px 4px auto; width: calc(100% - 8px); height: calc((100% - 8px) / 3); transition: transform 360ms var(--product-ease); }
+.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs[data-active-mode="image"] .creation-mode-indicator { transform: translateY(100%); }
+.app-user-workspace .creation-composer-stage.is-thread-mode > .creation-mode-tabs[data-active-mode="text"] .creation-mode-indicator { transform: translateY(200%); }
+.app-user-workspace .creation-composer-stage.is-home-mode { display: block; }
+.app-user-workspace .creation-composer-stage.is-home-mode > .creation-mode-tabs { display: grid; width: min(456px, 100%); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; margin: 0 auto 20px; padding: 4px; }
+.app-user-workspace .creation-composer-stage.is-home-mode > .creation-mode-tabs .creation-mode-button { min-height: 46px; flex-direction: row; gap: 6px; padding: 0 8px; font-size: 13px; }
+.app-user-workspace .creation-composer-stage .creation-empty-composer { min-width: 0; flex: 1 1 auto; }
+.app-user-workspace .creation-composer-stage.is-agent-mode .creation-agent-entry { min-width: 0; flex: 1 1 auto; }
+
+.creation-model-picker-surface .creation-model-picker-menu.is-brand-list { width: min(360px, calc(100vw - 24px)) !important; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list { width: min(720px, calc(100vw - 24px)) !important; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; min-height: 300px; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand-rail { display: grid; align-content: start; gap: 5px; border-right: 1px solid var(--workspace-border); padding-right: 14px; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand { width: 100%; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand.is-active { border-color: var(--workspace-border); background: var(--workspace-surface-hover); }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-model-pane { border: 0; margin: 0; padding: 0; }
+
+@media (max-width: 720px) { .creation-floating-prompt { top: 8px; width: calc(100% - 24px); min-height: 60px; gap: 10px; padding: 8px 9px 8px 16px; border-radius: 19px; } .creation-floating-prompt input { font-size: 14px; } .creation-floating-prompt button { width: 40px; height: 40px; flex-basis: 40px; } .creation-model-picker-surface .creation-model-picker-menu:is(.is-brand-list, .is-model-list) { width: calc(100vw - 24px) !important; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { grid-template-columns: minmax(0, 1fr); min-height: 0; } .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand-rail { display: none; } .app-user-workspace .creation-chat-composer.is-thread { grid-template-columns: 58px minmax(0, 1fr); column-gap: 4px; } .app-user-workspace .creation-chat-composer.is-thread .creation-composer-mode-row { padding: 6px 0 6px 6px; } }
+
+/* Shared controls: one size system and one state vocabulary. */
+.app-product-workspace :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number),
+.app-product-overlays :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number) {
+    transition: background var(--product-state) var(--product-ease), color var(--product-state) var(--product-ease), border-color var(--product-state) var(--product-ease), box-shadow var(--product-state) var(--product-ease), transform var(--product-fast) var(--product-ease) !important;
+}
+
+.app-product-workspace :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number),
+.app-product-overlays :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number) {
+    border-radius: var(--user-radius-control);
+}
+
+.app-product-workspace .ant-btn:not(:disabled):active,
+.app-product-overlays .ant-btn:not(:disabled):active { transform: scale(.975); }
+
+.app-product-workspace :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number):focus-visible,
+.app-product-overlays :where(.ant-btn, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker, .ant-input-number):focus-visible {
+    outline: 2px solid var(--product-focus-ring);
+    outline-offset: 2px;
+}
+
+.app-product-workspace .ant-btn-default:not(:disabled):not(.ant-btn-dangerous):not([aria-pressed="true"]):hover,
+.app-product-overlays .ant-btn-default:not(:disabled):not(.ant-btn-dangerous):not([aria-pressed="true"]):hover {
+    color: var(--user-ink) !important;
+    background: var(--user-surface-hover) !important;
+}
+
+.app-product-workspace .ant-btn-primary:not(:disabled):hover,
+.app-product-overlays .ant-btn-primary:not(:disabled):hover { transform: translateY(-1px); }
+
+.app-product-workspace .ant-btn-primary:not(:disabled):active,
+.app-product-overlays .ant-btn-primary:not(:disabled):active { transform: scale(.975); }
+
+/* Floating surfaces and their enter/leave lifecycle belong to app-theme.ts.
+   Do not animate portal positioning nodes here: that breaks dismissal/placement. */
+
+/* Icon actions use one compact interaction language across the user workspace. */
+.app-product-workspace button:has(> svg):not(:has(> span)):not(.ant-btn-icon-only),
+.app-product-overlays button:has(> svg):not(:has(> span)):not(.ant-btn-icon-only) {
+    transition: color var(--product-state) var(--product-ease), background-color var(--product-state) var(--product-ease), border-color var(--product-state) var(--product-ease), transform var(--product-fast) var(--product-ease), box-shadow var(--product-state) var(--product-ease) !important;
+}
+.app-product-workspace button:has(> svg):not(:has(> span)):not(:disabled):hover,
+.app-product-overlays button:has(> svg):not(:has(> span)):not(:disabled):hover { color: var(--user-accent) !important; background: color-mix(in srgb, var(--user-accent) 9%, var(--user-surface)) !important; box-shadow: 0 5px 16px color-mix(in srgb, var(--user-accent) 13%, transparent); transform: translateY(-1px); }
+.app-product-workspace button:has(> svg):not(:has(> span)):not(:disabled):active,
+.app-product-overlays button:has(> svg):not(:has(> span)):not(:disabled):active { transform: scale(.92) translateY(0); }
+.app-product-workspace button:has(> svg):not(:has(> span)):focus-visible,
+.app-product-overlays button:has(> svg):not(:has(> span)):focus-visible { outline: 2px solid var(--product-focus-ring); outline-offset: 2px; }
+
+/* 列表进入节奏：卡片和图片错开出现，慢网络时仍有内容层次。 */
+.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card) { animation: product-card-enter var(--product-enter) var(--product-ease) both; }
+.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card):nth-child(2) { animation-delay: 45ms; }
+.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card):nth-child(3) { animation-delay: 90ms; }
+.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card):nth-child(4) { animation-delay: 135ms; }
+.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card):nth-child(n + 5) { animation-delay: 180ms; }
+.app-product-workspace .library-card img, .app-product-workspace .product-collection-card img { animation: product-image-reveal 520ms var(--product-ease) both; }
+
+
+@keyframes product-image-reveal { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
+@keyframes product-card-enter {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 900px) {
+    .app-product-workspace .library-page > div,
+    .app-product-workspace .studio-collection-page > div { width: calc(100% - 32px); }
+}
+
+.app-product-workspace .project-workspace-header {
+    border-bottom-color: var(--user-border);
+    color: var(--user-ink);
+}
+.app-product-workspace .project-workspace-header button:has(> svg):not(:disabled):hover,
+.app-product-workspace .project-workspace-header button:has(> svg):not(:disabled):active {
+    color: var(--user-ink) !important;
+    background: var(--user-surface-hover) !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+@media (max-width: 620px) {
+    .app-product-workspace .library-page > div,
+    .app-product-workspace .studio-collection-page > div { width: calc(100% - 24px); padding-top: 16px; padding-bottom: 32px; }
+    .app-product-workspace .app-page-header { align-items: flex-start; padding-bottom: 10px; }
+    .app-product-workspace .app-page-header-title,
+    .app-product-workspace .app-page-header h1 { font-size: 19px !important; }
+    .app-product-workspace .collection-toolbar-controls { flex-basis: 100%; }
+    .app-product-workspace .collection-toolbar-actions { width: 100%; justify-content: flex-start; }
+    .app-product-workspace .canvas-collection-grid,
+    .app-product-workspace .assets-library-grid,
+    .app-product-workspace .task-grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
+    .app-product-workspace .plugins-grid { grid-template-columns: minmax(0, 1fr); }
+    .app-product-workspace .story-launcher-panel { padding: 16px; border-radius: 16px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-product-workspace *,
+    .app-product-overlays * { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
+    .app-product-workspace .product-collection-card:hover,
+    .app-product-workspace .library-card:hover,
+    .app-product-workspace .task-grid-card:hover,
+    .app-product-workspace .plugin-card:hover,
+    .app-product-workspace .skill-library-card:hover,
+    .app-product-workspace .task-record-row:hover { transform: none !important; }
+    .app-user-workspace .app-workspace-nav-link,
+    .app-user-workspace .app-workspace-nav-icon,
+    .app-user-workspace .app-workspace-nav-icon svg { animation: none !important; transform: none !important; }
+}
diff --git a/web/test/asset-header-button-style.test.ts b/web/test/asset-header-button-style.test.ts
index 6fe0316d0..a6048ced4 100644
--- a/web/test/asset-header-button-style.test.ts
+++ b/web/test/asset-header-button-style.test.ts
@@ -1,18 +1,16 @@
 import { describe, expect, test } from "bun:test";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
+import { getWorkspaceAntThemeConfig } from "../src/lib/app-theme";
 
 describe("asset library header buttons", () => {
-    test("only restyles header buttons in light mode and uses outline tokens", () => {
+    test("user pages share control geometry without a light-only outline override", () => {
         const css = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
-        const headerButtonRule = css.match(/html:not\(\.dark\) \.library-page \.app-page-header \.ant-btn,[\s\S]*?transition: all 180ms ease-out !important;\s*}/)?.[0] || "";
-        const headerButtonHoverRule = css.match(/html:not\(\.dark\) \.library-page \.app-page-header \.ant-btn:hover,[\s\S]*?transform: translateY\(-1px\);\s*}/)?.[0] || "";
-
-        expect(headerButtonRule).toContain("html:not(.dark) .canvas-library-page .app-page-header .ant-btn");
-        expect(headerButtonRule).toContain("background: transparent !important;");
-        expect(headerButtonRule).toContain("color: var(--foreground) !important;");
-        expect(headerButtonHoverRule).toContain("background: var(--btn-outline-hover-bg) !important;");
-        expect(headerButtonHoverRule).toContain("color: var(--foreground) !important;");
-        expect(css).not.toContain("\n    .library-page .app-page-header .ant-btn,\n");
+        const theme = getWorkspaceAntThemeConfig();
+        expect(theme.token?.controlHeight).toBe(38);
+        expect(theme.components?.Button?.borderRadius).toBe(theme.token?.borderRadius);
+        expect(theme.components?.Button?.defaultBorderColor).toBe("transparent");
+        expect(css).not.toContain("html:not(.dark) .library-page .app-page-header .ant-btn");
+        expect(css).not.toContain("html .assets-library-page .app-page-header .assets-header-action-buttons .ant-btn");
     });
 });
diff --git a/web/test/assets-collection-layout.test.ts b/web/test/assets-collection-layout.test.ts
new file mode 100644
index 000000000..1f6813f78
--- /dev/null
+++ b/web/test/assets-collection-layout.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("asset library category sidebar", () => {
+    test("keeps type, business and folder filters in a left-hand nav", () => {
+        const page = readFileSync(resolve(import.meta.dir, "../src/pages/assets/index.tsx"), "utf8");
+        const css = readFileSync(resolve(import.meta.dir, "../src/styles/workspace-product.css"), "utf8");
+        expect(page).toContain('className="assets-collection-layout"');
+        expect(page).toContain('aria-label="素材分类"');
+        expect(page).toContain('title="素材类型"');
+        expect(page).toContain('title="业务分类"');
+        expect(page).toContain("我的分类");
+        expect(page).not.toContain("全部自定义分类");
+        expect(css).toMatch(/\.assets-collection-layout\s*\{[^}]*grid-template-columns:\s*220px minmax\(0, 1fr\)/s);
+    });
+});
+
+describe("wallet history pagination", () => {
+    test("pins ledger pagination to the history panel footer", () => {
+        const modal = readFileSync(resolve(import.meta.dir, "../src/components/layout/workspace-wallet-modal.tsx"), "utf8");
+        const css = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+        expect(modal).toContain("workspace-wallet-history-scroll");
+        expect(modal).toContain("workspace-wallet-pagination");
+        expect(modal).not.toContain("wallet.total > 20");
+        expect(css).toMatch(/\.workspace-wallet-content\.is-history\s*\{[^}]*overflow:\s*hidden/s);
+        expect(css).toMatch(/\.workspace-wallet-pagination\s*\{[^}]*margin-top:\s*auto/s);
+    });
+});
diff --git a/web/test/settings-preference-spacing.test.ts b/web/test/settings-preference-spacing.test.ts
new file mode 100644
index 000000000..81964b6b5
--- /dev/null
+++ b/web/test/settings-preference-spacing.test.ts
@@ -0,0 +1,23 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+test("settings page drops the page header copy and audio preference blocks", () => {
+    const source = readFileSync(resolve(import.meta.dir, "../src/pages/settings/index.tsx"), "utf8");
+    expect(source).not.toContain("创作偏好");
+    expect(source).not.toContain("配置默认模型、生成参数和素材存储。");
+    expect(source).not.toContain("音频默认值");
+    expect(source).not.toContain("音频指令");
+    expect(source).not.toContain("默认音频指令");
+    expect(source).toContain("默认生图张数");
+    expect(source).toContain("settings-preference-heading");
+});
+
+test("wallet tabs and preference blocks keep a visible gap from neighboring surfaces", () => {
+    const css = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+    expect(css).toContain(".workspace-wallet-tabs {");
+    expect(css).toContain("margin: 12px 24px 0;");
+    expect(css).toContain("margin: 16px 24px 24px;");
+    expect(css).toContain(".settings-preference-heading { margin-bottom: var(--space-5); }");
+    expect(css).toContain(".app-user-workspace.settings-page .settings-preference-block {\n    padding: 20px 20px 12px;");
+});
diff --git a/web/test/workspace-route-loading.test.ts b/web/test/workspace-route-loading.test.ts
index 72395ffde..6e7ed0d2d 100644
--- a/web/test/workspace-route-loading.test.ts
+++ b/web/test/workspace-route-loading.test.ts
@@ -39,7 +39,7 @@ describe("workspace route loading", () => {
         expect(router).toContain('{ path: "/create", element: <RequireAuth>{deferred(<CreatePage />)}</RequireAuth> }');
         expect(router).not.toContain('path: "/home"');
         expect(router).not.toContain("HomePage");
-        expect(navigation).toContain('{ id: "home", title: "首页", icon: Home, to: "/" }');
+        expect(navigation).toContain('{ ...toolItem("create", "/"), id: "home", title: "创作" }');
         expect(navigation).not.toContain('to: "/create"');
         expect(navigation).not.toContain('to: "/home"');
     });
@@ -69,6 +69,9 @@ describe("workspace route loading", () => {
         expect(layout).not.toContain("useCanvasUiStore");
         expect(layout).not.toContain("CanvasDeleteProjectsDialog");
         expect(canvas).toContain("deleteDialogOpen ? <Suspense");
+        expect(detail).toContain("project-workspace-header");
+        expect(detail).not.toContain("useWorkspaceTopBarExtension");
+        expect(detail).toContain("新建画布");
     });