@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

/* =========================================================================
   Design Token System — 三层架构 (Primitive → Semantic → Component)
   详见 Wayfinder #96: https://github.com/ddcat-ai/open-ai-canvas/issues/96
   规范：禁止在组件中新增裸 text-[Npx]/rounded-[Npx]/z-[N]，必须使用 token
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layer 1: Primitive — 纯值，无语义，不随主题变（所有维度的基础）
   ------------------------------------------------------------------------- */
:root {
    /* --- 1. 色彩（oklch 色板）--- */
    --color-neutral-0: oklch(1 0 0);
    --color-neutral-50: oklch(0.985 0 0);
    --color-neutral-100: oklch(0.97 0 0);
    --color-neutral-200: oklch(0.922 0 0);
    --color-neutral-300: oklch(0.87 0 0);
    --color-neutral-400: oklch(0.708 0 0);
    --color-neutral-500: oklch(0.556 0 0);
    --color-neutral-600: oklch(0.439 0 0);
    --color-neutral-700: oklch(0.371 0 0);
    --color-neutral-800: oklch(0.269 0 0);
    --color-neutral-900: oklch(0.205 0 0);
    --color-neutral-950: oklch(0.145 0 0);

    /* 节点类型语义色板（对应 #97 色带+图标徽章方案）
       注意：用 --palette- 前缀避免与 @theme 的 --color-* 命名空间冲突导致循环引用 */
    --palette-node-image: oklch(0.75 0.15 75);        /* 琥珀 300 — 图片 */
    --palette-node-video: oklch(0.65 0.22 350);        /* 品红 400 — 视频 */
    --palette-node-text: oklch(0.45 0.02 250);         /* 中性蓝灰 700 — 文本 */
    --palette-node-audio: oklch(0.7 0.13 220);         /* 青蓝 400 — 音频 */
    --palette-node-config: oklch(0.55 0.04 250);       /* 灰蓝 500 — 配置 */
    --palette-node-script: oklch(0.6 0.18 300);        /* 紫色 400 — 脚本 */
    --palette-node-drawing: oklch(0.65 0.12 55);       /* 赭石 400 — 绘图 */
    --palette-node-frame: oklch(0.7 0.15 155);         /* 翠绿 400 — 帧 */
    --palette-node-character: oklch(0.78 0.13 20);     /* 桃红 300 — 角色引用 */
    --palette-node-skill: oklch(0.7 0.17 55);          /* 橙色 400 — 技能 */

    /* 状态色（用 --palette- 前缀避免循环引用）*/
    --palette-status-success: oklch(0.7 0.17 155);
    --palette-status-error: oklch(0.65 0.22 25);
    --palette-status-loading: oklch(0.62 0.18 250);
    --palette-status-warning: oklch(0.75 0.15 85);

    /* --- 2. 间距（4px 栅格 + 半距）--- */
    --space-0: 0px;
    --space-half: 2px;
    --space-1: 4px;
    --space-1-half: 6px;
    --space-2: 8px;
    --space-2-half: 10px;
    --space-3: 12px;
    --space-3-half: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* --- 3. 字号（10 档）--- */
    --fs-nano: 7px;         /* 纳米标注（角标计数、节点预览、% 后缀）*/
    --fs-micro: 9px;        /* 极小标注（分镜行号辅助）*/
    --fs-tiny: 10px;        /* 小标注（徽章、tag）*/
    --fs-label: 11px;       /* 标签文字 */
    --fs-caption: 12px;     /* 说明文字 */
    --fs-body: 14px;        /* 正文（基准）*/
    --fs-body-lg: 15px;     /* 大正文 */
    --fs-heading: 16px;     /* 小标题 */
    --fs-heading-lg: 18px;  /* 大标题 */
    --fs-title: 22px;       /* 页面标题 */
    --fs-display: 36px;     /* 展示标题 */

    /* --- 4. 圆角（10 档）--- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 14px;
    --r-2xl: 16px;
    --r-3xl: 20px;
    --r-4xl: 24px;
    --r-tight: 15px;
    --r-dock-compact: 13px;
    --r-wide-tight: 22px;
    --r-5xl: 32px;
    --r-full: 9999px;

    /* --- 5. 阴影（含 glow）--- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.16);
    --shadow-glow-sm: 0 0 12px rgba(125, 162, 255, 0.2);
    --shadow-glow-md: 0 0 24px rgba(125, 162, 255, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(125, 162, 255, 0.4);

    /* --- 6. Elevation（z-index 14 档，按视觉层划分，见 ADR-001）--- */
    --z-canvas: 0;              /* L0 画布底 */
    --z-canvas-overlay: 5;      /* L1 画布覆盖（网格、连线）*/
    --z-node: 10;               /* L2 节点层（未选中）*/
    --z-node-active: 20;        /* L3 激活节点（选中/拖拽）*/
    --z-toolbar: 30;            /* L4 浮动工具栏（顶栏、dock、zoom）*/
    --z-node-toolbar: 50;       /* L5 节点工具栏（click 触发）*/
    --z-panel: 60;              /* L6 侧边面板（侧栏、素材托盘）*/
    --z-panel-floating: 80;     /* L7 浮动面板（助手/agent/活动任务）*/
    --z-modal: 100;             /* L8 对话框 */
    --z-modal-overlay: 110;     /* L9 遮罩 */
    --z-popover: 200;           /* L10 弹出层 */
    --z-toast: 500;             /* L11 通知 */
    --z-tooltip: 1000;          /* L12 提示 */
    --z-loader: 1200;           /* 全屏加载遮罩 */
    --z-max: 2000;              /* L13 最高（紧急通知）*/

    /* --- 6b. Canvas 浮层定位 inset（画布安全区，对应审计 D2/P0-2）--- */
    --canvas-inset-x: 16px;             /* 浮层水平安全区（dock inset、顶栏 px）*/
    --canvas-inset-y: 16px;             /* 浮层垂直安全区（dock 底部）*/
    --canvas-topbar-h: 64px;            /* 顶部栏高度 */
    --canvas-topbar-offset: 72px;       /* 顶栏下方浮层顶部偏移（topbar-h + 8px 间距）*/
    --canvas-dock-popover-offset: 50px; /* dock 弹出面板底部偏移 */

    /* --- 7. 动效（对应 #99 动效 token）--- */
    /* duration */
    --motion-dur-instant: 80ms;
    --motion-dur-fast: 150ms;
    --motion-dur-base: 250ms;
    --motion-dur-slow: 400ms;
    --motion-dur-emphasize: 600ms;
    /* easing */
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
    --motion-ease-in-out: cubic-bezier(0.64, 0, 0.36, 1);
    --motion-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-ease-linear: linear;
    /* delay */
    --motion-delay-none: 0ms;
    --motion-delay-xs: 30ms;
    --motion-delay-sm: 60ms;
    --motion-delay-md: 100ms;
    --motion-delay-lg: 150ms;
    /* motion-scale（联动 prefers-reduced-motion）*/
    --motion-scale: 1;

    /* --- 8. 描边宽度 --- */
    --stroke-0: 0px;
    --stroke-1: 1px;
    --stroke-2: 2px;
    --stroke-3: 3px;

    /* --- 9. 不透明度（6 档）--- */
    --opa-hide: 0.08;
    --opa-faint: 0.2;
    --opa-muted: 0.45;
    --opa-subtle: 0.55;
    --opa-medium: 0.72;
    --opa-full: 1;
}

/* prefers-reduced-motion 降级（对应 #99 三级降级策略 L1）*/
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-scale: 0.3;
    }
}

/* 用户在应用内选择"无动效"时，JS 添加 .no-motion 类（L2 禁用）*/
.no-motion {
    --motion-scale: 0;
}

/* infinite 装饰动画在 reduced-motion / no-motion 下降级（对应 #99 三级降级）*/
@media (prefers-reduced-motion: reduce) {
    .canvas-connection-flow,
    .canvas-connection-draft,
    .canvas-generation-border-flow,
    .canvas-task-progress-shimmer,
    .ai-title-aurora,
    .creation-intro-mark,
    .creation-intro-word,
    .creation-intro-signal,
    .creation-intro-emphasis {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}
.no-motion .canvas-connection-flow,
.no-motion .canvas-connection-draft,
.no-motion .canvas-generation-border-flow,
.no-motion .canvas-task-progress-shimmer,
.no-motion .ai-title-aurora,
.no-motion .creation-intro-mark,
.no-motion .creation-intro-word,
.no-motion .creation-intro-signal,
.no-motion .creation-intro-emphasis {
    animation: none;
}

/* 动效计算函数（实际 duration = base * motion-scale）*/
:root {
    --motion-dur-instant-calc: calc(var(--motion-dur-instant) * var(--motion-scale));
    --motion-dur-fast-calc: calc(var(--motion-dur-fast) * var(--motion-scale));
    --motion-dur-base-calc: calc(var(--motion-dur-base) * var(--motion-scale));
    --motion-dur-slow-calc: calc(var(--motion-dur-slow) * var(--motion-scale));
    --motion-dur-emphasize-calc: calc(var(--motion-dur-emphasize) * var(--motion-scale));
}

@theme inline {
    /* 响应式断点（对应 #99 四断点体系：mobile/tablet/desktop/wide）*/
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-border: var(--border);
    --color-ring: var(--ring);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --font-heading: var(--font-sans);
    --font-sans: var(--font-sans);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar: var(--sidebar);
    --color-chart-5: var(--chart-5);
    --color-chart-4: var(--chart-4);
    --color-chart-3: var(--chart-3);
    --color-chart-2: var(--chart-2);
    --color-chart-1: var(--chart-1);
    --color-input: var(--input);
    --color-destructive: var(--destructive);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent: var(--accent);
    --color-muted-foreground: var(--muted-foreground);
    --color-muted: var(--muted);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-secondary: var(--secondary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary: var(--primary);
    --color-popover-foreground: var(--popover-foreground);
    --color-popover: var(--popover);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card);
    --radius-2xl: calc(var(--radius) * 1.8);
    --radius-3xl: calc(var(--radius) * 2.2);
    --radius-4xl: calc(var(--radius) * 2.6);

    /* === Design Token System 映射（对应 #96 三层架构）=== */
    /* 色彩 — 节点类型色（可用 text-node-image / bg-node-video 等）*/
    --color-node-image: var(--cn-type-image);
    --color-node-video: var(--cn-type-video);
    --color-node-text: var(--cn-type-text);
    --color-node-audio: var(--cn-type-audio);
    --color-node-config: var(--cn-type-config);
    --color-node-script: var(--cn-type-script);
    --color-node-drawing: var(--cn-type-drawing);
    --color-node-frame: var(--cn-type-frame);
    --color-node-character: var(--cn-type-character);
    --color-node-skill: var(--cn-type-skill);

    /* 色彩 — 状态色（可用 text-status-success / bg-status-error 等）*/
    --color-status-success: var(--status-success);
    --color-status-error: var(--status-error);
    --color-status-loading: var(--status-loading);
    --color-status-warning: var(--status-warning);

    /* 色彩 — Canvas 语义色 */
    --color-cn-text: var(--cn-text);
    --color-cn-muted: var(--cn-muted);
    --color-cn-faint: var(--cn-faint);
    --color-cn-stroke: var(--cn-stroke);
    --color-cn-fill: var(--cn-fill);

    /* 字号（可用 text-fs-body / text-fs-caption 等）*/
    --font-size-micro: var(--fs-micro);
    --font-size-tiny: var(--fs-tiny);
    --font-size-label: var(--fs-label);
    --font-size-caption: var(--fs-caption);
    --font-size-body: var(--fs-body);
    --font-size-body-lg: var(--fs-body-lg);
    --font-size-heading: var(--fs-heading);
    --font-size-heading-lg: var(--fs-heading-lg);
    --font-size-title: var(--fs-title);
    --font-size-display: var(--fs-display);
}

:root {
    --radius: 0.5rem;
    --motion-instant: 120ms;
    --motion-state: 180ms;
    --motion-panel: 240ms;
    --ease-aceternity: var(--motion-ease-out);
    --ease-product-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --workspace-canvas: var(--background);
    /* 页面、导航和内容区共用同一底色；卡片/浮层才允许使用 surface token。 */
    --workspace-page: var(--workspace-canvas);
    --workspace-navigation: var(--workspace-page);
    --workspace-content: var(--workspace-page);
    --workspace-surface: #ffffff;
    --workspace-surface-strong: #ffffff;
    --workspace-border: rgba(17, 17, 17, 0.14);
    --workspace-border-strong: rgba(17, 17, 17, 0.22);
    --workspace-grid-line: rgba(17, 17, 17, 0.045);
    --workspace-nav: var(--workspace-navigation);
    --workspace-sidebar: var(--workspace-navigation);
    --workspace-accent: #171717;
    --workspace-accent-soft: rgba(17, 17, 17, 0.07);

    /* --- Semantic 层（引用 Primitive，随主题切换）--- */
    /* 通用语义色（引用 Primitive neutral 色板）*/
    --bg: var(--color-neutral-0);
    --fg: var(--color-neutral-950);
    --border-semantic: var(--color-neutral-200);
    --accent: var(--workspace-accent);
    --accent-soft: var(--workspace-accent-soft);
    --muted: var(--color-neutral-100);

    /* Canvas Theme 语义（从 CSS 变量反序列化到 TS 主题对象，对应 #96 决策3）*/
    --cn-text: var(--color-neutral-950);
    --cn-muted: var(--color-neutral-500);
    --cn-faint: var(--color-neutral-400);
    --cn-stroke: var(--color-neutral-200);
    --cn-fill: var(--color-neutral-50);
    --cn-active-stroke: var(--workspace-accent);
    --cn-active-stroke-soft: var(--workspace-accent-soft);

    /* Aceternity spatial 语义（对应 #96 决策3：CSS→TS 单向同步）*/
    --cn-spatial-surface: var(--workspace-surface);
    --cn-spatial-surface-strong: var(--workspace-surface-strong);
    --cn-spatial-shadow: rgba(0, 0, 0, 0.12);
    --cn-spatial-glow: rgba(125, 162, 255, 0.2);
    --cn-spatial-glow-strong: rgba(125, 162, 255, 0.35);
    --cn-spatial-elevated: var(--color-neutral-0);
    --cn-spatial-toolbar-border: var(--color-neutral-200);

    --director-sequencer-surface: var(--color-neutral-900);
    --director-sequencer-surface-raised: var(--color-neutral-800);
    --director-sequencer-border: rgba(255, 255, 255, 0.11);
    --director-sequencer-muted: rgba(255, 255, 255, 0.48);
    --director-sequencer-grid: rgba(255, 255, 255, 0.055);
    --director-dock-surface: rgba(17, 19, 21, 0.92);
    --director-dock-fg: rgba(255, 255, 255, 0.62);
    --director-dock-fg-strong: rgba(255, 255, 255, 0.96);
    --director-dock-active-surface: rgba(255, 255, 255, 0.14);
    --director-control-hover: rgba(255, 255, 255, 0.09);
    --director-swatch-inset: rgba(0, 0, 0, 0.18);

    /* 节点类型色（引用 Primitive 节点色板，对应 #97 决策1 色带方案）*/
    --cn-type-image: var(--palette-node-image);
    --cn-type-video: var(--palette-node-video);
    --cn-type-text: var(--palette-node-text);
    --cn-type-audio: var(--palette-node-audio);
    --cn-type-config: var(--palette-node-config);
    --cn-type-script: var(--palette-node-script);
    --cn-type-drawing: var(--palette-node-drawing);
    --cn-type-frame: var(--palette-node-frame);
    --cn-type-character: var(--palette-node-character);
    --cn-type-skill: var(--palette-node-skill);

    /* 状态语义色 */
    --status-success: var(--palette-status-success);
    --status-error: var(--palette-status-error);
    --status-loading: var(--palette-status-loading);
    --status-warning: var(--palette-status-warning);

    --border: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --input: oklch(0.922 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --ring: oklch(0.556 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --input: oklch(1 0 0 / 15%);
    --workspace-canvas: var(--background);
    --workspace-page: var(--workspace-canvas);
    --workspace-navigation: var(--workspace-page);
    --workspace-content: var(--workspace-page);
    --workspace-surface: #181818;
    --workspace-surface-strong: #181818;
    --workspace-border: rgba(255, 255, 255, 0.085);
    --workspace-border-strong: rgba(255, 255, 255, 0.16);
    --workspace-grid-line: rgba(255, 255, 255, 0.038);
    --workspace-nav: var(--workspace-navigation);
    --workspace-sidebar: var(--workspace-navigation);
    --workspace-accent: #f5f5f5;
    --workspace-accent-soft: rgba(255, 255, 255, 0.09);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.922 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);

    /* --- Semantic 层 dark 覆盖 --- */
    --bg: var(--color-neutral-950);
    --fg: var(--color-neutral-50);
    --border-semantic: var(--color-neutral-800);
    --muted: var(--color-neutral-900);

    --cn-text: var(--color-neutral-50);
    --cn-muted: var(--color-neutral-400);
    --cn-faint: var(--color-neutral-500);
    --cn-stroke: rgba(255, 255, 255, 0.1);
    --cn-fill: rgba(255, 255, 255, 0.04);
    --cn-active-stroke: var(--workspace-accent);
    --cn-active-stroke-soft: var(--workspace-accent-soft);

    --cn-spatial-surface: var(--workspace-surface);
    --cn-spatial-surface-strong: var(--workspace-surface-strong);
    --cn-spatial-shadow: rgba(0, 0, 0, 0.4);
    --cn-spatial-glow: rgba(125, 162, 255, 0.15);
    --cn-spatial-glow-strong: rgba(125, 162, 255, 0.25);
    --cn-spatial-elevated: var(--color-neutral-900);
    --cn-spatial-toolbar-border: rgba(255, 255, 255, 0.1);

    --director-sequencer-surface: #111315;
    --director-sequencer-surface-raised: #191c1f;
    --director-sequencer-border: rgba(255, 255, 255, 0.11);
    --director-sequencer-muted: rgba(255, 255, 255, 0.48);
    --director-sequencer-grid: rgba(255, 255, 255, 0.055);
    --director-dock-surface: rgba(17, 19, 21, 0.92);
    --director-dock-fg: rgba(255, 255, 255, 0.62);
    --director-dock-fg-strong: rgba(255, 255, 255, 0.96);
    --director-dock-active-surface: rgba(255, 255, 255, 0.14);
    --director-control-hover: rgba(255, 255, 255, 0.09);
    --director-swatch-inset: rgba(0, 0, 0, 0.18);

    /* --- Shadow dark 覆盖（暗色下黑影不可见，改用白色微影制造抬升感，审计 D4/P2-D2）---
       组件 token（--node-shadow/--dock-shadow/--panel-shadow/--modal-shadow）均引用
       var(--shadow-*)，此处覆盖自动级联。--cn-spatial-shadow（内联 boxShadow 用）已有
       暗色变体(0.4)，保留不动。 */
    --shadow-xs: 0 1px 2px rgba(255, 255, 255, 0.04);
    --shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 4px 12px rgba(255, 255, 255, 0.06);
    --shadow-lg: 0 8px 24px rgba(255, 255, 255, 0.07);
    --shadow-xl: 0 16px 40px rgba(255, 255, 255, 0.08);
    --shadow-2xl: 0 24px 60px rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------
   Layer 3: Component — 引用 Semantic，某组件专属
   ------------------------------------------------------------------------- */
:root {
    /* Dock 组件（FloatingDock、悬停工具栏，对应 #95 工具栏方案）*/
    --dock-radius: var(--r-xl);            /* 14px */
    --dock-padding: var(--space-2);       /* 8px */
    --dock-icon-size: 32px;
    --dock-icon-size-labeled: 36px;
    --dock-label-fs: var(--fs-label);     /* 11px */
    --dock-blur: 24px;
    --dock-surface: var(--cn-spatial-surface);
    --dock-border: var(--cn-spatial-toolbar-border);
    --dock-shadow: var(--shadow-lg);
    --dock-item-radius: var(--r-md);      /* 8px */
    --dock-item-radius-labeled: var(--r-lg); /* 12px */
    --dock-radius-tight: var(--r-tight);
    --dock-radius-compact: var(--r-dock-compact);
    --dock-tooltip-z: 140;
    --dock-precision-width: var(--space-12);
    --dock-z-popover: 30;                 /* dock 子面板在 toolbar 根 stacking context 内的层级（见 ADR-001）*/

    /* Canvas 创建菜单：固定行高保证图标、徽标和单行标签互不挤占 */
    --canvas-create-node-height: var(--space-12);
    --canvas-create-resource-height: var(--space-8);

    /* Node 组件（画布节点，对应 #97 节点视觉规范）*/
    --node-radius: var(--r-2xl);          /* 16px */
    --node-border-width: var(--stroke-1); /* 1px */
    --node-border: var(--cn-stroke);
    --node-active-border-width: var(--stroke-2); /* 2px */
    --node-active-border: var(--cn-active-stroke);
    --node-active-glow: 0 0 0 4px var(--cn-active-stroke-soft);
    --node-active-glow-strong: 0 0 0 6px var(--cn-active-stroke-soft);
    --node-shadow: var(--shadow-sm);
    --node-shadow-hover: var(--shadow-md);
    --node-shadow-selected: var(--shadow-lg);
    --node-shadow-selected-primary: var(--shadow-xl);
    --node-shadow-active: var(--shadow-2xl);
    --node-header-height: 24px;
    --node-title-fs: var(--fs-label);     /* 11px */
    --node-badge-fs: var(--fs-tiny);      /* 10px */
    --node-type-strip-width: 3px;         /* 色带宽度 */
    --node-type-badge-size: 20px;         /* 图标徽章尺寸 */
    --node-z-content: 30;                 /* 节点遮罩层（stacking context 内，见 ADR-001）*/
    --node-z-overlay: 40;                 /* 节点角标/按钮层 */
    --node-z-handle: 50;                  /* 节点 resize handle 层 */

    /* Modal 组件（对话框，对应 #98 面板层级）*/
    --modal-radius: var(--r-3xl);         /* 20px */
    --modal-max-width: 480px;
    --modal-overlay-opacity: 0.5;
    --modal-shadow: var(--shadow-2xl);
    --modal-padding: var(--space-5);      /* 20px */

    /* Panel 组件（侧边面板，对应 #98 五层体系 L2）*/
    --panel-radius: var(--r-2xl);         /* 16px */
    --panel-padding: var(--space-4);      /* 16px */
    --panel-shadow: var(--shadow-lg);
    --panel-section-gap: var(--space-3);  /* 12px */
    --panel-width-compact: 320px;
    --panel-radius-wide-tight: var(--r-wide-tight);
    --loader-z: var(--z-loader);

    /* Director workbench / Sequencer */
    --director-sequencer-min-height: 180px;
    --director-sequencer-label-width: 208px;
    --director-sequencer-row-height: 30px;
    --director-sequencer-base-width: 860px;
    --director-sequencer-shot-select-width: 144px;
    --director-dock-button-size: var(--space-8);
    --director-dock-bottom: var(--space-2);
    --director-pose-button-height: var(--space-8);
    --director-color-swatch-size: var(--space-6);

    /* Canvas 布局（画布页浮层定位，对应审计 P0-8.1/P1-2.1）*/
    --canvas-sidebar-width: 232px;        /* 项目侧栏宽度（短剧模式）*/
    --canvas-panel-width: min(332px, calc(100vw - 24px)); /* 浮动面板默认宽度（活动任务等）*/

    /* Prompt 面板（对应 #98 决策2 渐进式三区）*/
    --prompt-panel-max-height: min(70vh, 640px);
    --prompt-panel-input-min-height: 72px;
    --prompt-panel-input-max-height: 224px;
    --prompt-panel-section-fs: var(--fs-body);     /* 14px A区 */
    --prompt-panel-caption-fs: var(--fs-caption);  /* 12px B区 */
    --prompt-panel-label-fs: var(--fs-label);      /* 11px 标签 */
    --prompt-panel-heading-fs: var(--fs-heading);  /* 16px 区标题 */

    /* 进度条（对应 #98 决策3 任务进度）*/
    --progress-bar-height: 6px;
    --progress-bar-radius: var(--r-xs);   /* 3px */
    --progress-bar-fill: var(--status-loading);
    --progress-bar-fill-success: var(--status-success);
    --progress-bar-fill-error: var(--status-error);

    /* 缩放控制（对应 #95 决策5）*/
    --zoom-control-min: 0.05;
    --zoom-control-max: 2;
    --zoom-control-step: 0.1;

    /* 短剧流程引导步骤（里程碑节点 + 状态轨道）*/
    --flow-step-node: var(--space-5);             /* 20px 完成/待办节点直径 */
    --flow-step-node-current: var(--space-6);     /* 24px 当前节点直径 */
    --flow-step-gap: var(--space-1);              /* 4px 节点与标签间距 */
    --flow-step-track-height: var(--stroke-2);    /* 2px 状态轨道高 */
    --flow-step-track-width: var(--space-5);      /* 20px 轨道段长 */
    --flow-step-current-glow: 0 0 0 4px var(--cn-active-stroke-soft); /* 当前节点光晕 */
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    html,
    body,
    #root,
    .ant-app {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        overscroll-behavior: none;
        background: var(--workspace-page);
    }
    body {
        background: var(--workspace-page);
        color: var(--foreground);
    }
    #root {
        position: fixed;
        inset: 0;
        isolation: isolate;
    }
    textarea {
        resize: none;
    }
    textarea::-webkit-resizer {
        display: none;
    }
    html {
        @apply font-sans;
    }
}

/* CodeMirror 使用运行时注入样式，需在全局覆盖中绑定项目主题 token。 */
.prompt-code-editor,
.prompt-code-editor .cm-editor {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.prompt-code-editor .cm-editor {
    background: var(--workspace-surface-strong) !important;
    color: var(--foreground);
    font-size: var(--fs-caption);
}

.prompt-code-editor .cm-editor.cm-focused {
    outline: 2px solid color-mix(in srgb, var(--workspace-accent) 42%, transparent);
    outline-offset: -2px;
}

.prompt-code-editor .cm-scroller {
    overflow: auto;
    overflow-x: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.65;
}

.prompt-code-editor .cm-content {
    padding-block: var(--space-3);
    color: var(--foreground) !important;
    caret-color: var(--foreground);
}

.prompt-code-editor .cm-line {
    padding-inline: var(--space-3);
    overflow-wrap: anywhere;
}

.prompt-code-editor .cm-gutters {
    border-right: 1px solid var(--workspace-border) !important;
    background: color-mix(in srgb, var(--workspace-surface-strong) 92%, var(--foreground) 8%) !important;
    color: color-mix(in srgb, var(--foreground) 42%, transparent) !important;
}

.prompt-code-editor .cm-activeLine,
.prompt-code-editor .cm-activeLineGutter {
    background: color-mix(in srgb, var(--workspace-accent) 7%, transparent) !important;
}

.prompt-code-editor .cm-selectionBackground,
.prompt-code-editor .cm-content ::selection {
    background: color-mix(in srgb, var(--workspace-accent) 24%, transparent) !important;
}

@layer utilities {
    .app-spatial-workspace {
        --workspace-canvas: var(--background);
        --workspace-page: var(--workspace-canvas);
        --workspace-navigation: var(--workspace-page);
        --workspace-content: var(--workspace-page);
        --workspace-surface: rgba(255, 255, 255, 0.74);
        --workspace-surface-strong: rgba(255, 255, 255, 0.94);
        --workspace-border: rgba(17, 17, 17, 0.1);
        --workspace-border-strong: rgba(17, 17, 17, 0.2);
        --workspace-grid-line: rgba(17, 17, 17, 0.035);
        --workspace-nav: var(--workspace-navigation);
        --workspace-sidebar: var(--workspace-navigation);
        --workspace-accent: #171717;
        --workspace-accent-soft: rgba(17, 17, 17, 0.065);
        background-color: var(--workspace-canvas);
        background-image:
            linear-gradient(var(--workspace-grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--workspace-grid-line) 1px, transparent 1px);
        background-size: 34px 34px;
    }

    .dark .app-spatial-workspace {
        --workspace-canvas: var(--background);
        --workspace-page: var(--workspace-canvas);
        --workspace-navigation: var(--workspace-page);
        --workspace-content: var(--workspace-page);
        --workspace-surface: rgba(18, 18, 18, 0.76);
        --workspace-surface-strong: rgba(22, 22, 22, 0.94);
        --workspace-border: rgba(255, 255, 255, 0.09);
        --workspace-border-strong: rgba(255, 255, 255, 0.18);
        --workspace-grid-line: rgba(255, 255, 255, 0.026);
        --workspace-nav: var(--workspace-navigation);
        --workspace-sidebar: var(--workspace-navigation);
        --workspace-accent: #f5f5f5;
        --workspace-accent-soft: rgba(255, 255, 255, 0.08);
    }

    .app-workspace-shell.is-spatial {
        position: relative;
        gap: 0;
        padding: 0;
    }

    .app-workspace-sidebar-scrim {
        position: absolute;
        z-index: 30;
        inset: 0;
        border: 0;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(2px);
    }

    .app-workspace-shell.is-spatial .app-workspace-sidebar {
        border: 0;
        border-right: 1px solid var(--workspace-border);
        border-radius: 0;
        background: var(--workspace-navigation);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .dark .app-workspace-shell.is-spatial .app-workspace-sidebar {
        box-shadow: none;
    }

    body.app-spatial-overlays {
        --workspace-overlay-bg: rgba(244, 244, 245, 0.78);
        --workspace-overlay-bg-strong: rgba(250, 250, 250, 0.88);
        --workspace-overlay-border: rgba(17, 17, 17, 0.22);
        --workspace-overlay-divider: rgba(17, 17, 17, 0.1);
        --workspace-overlay-highlight: rgba(255, 255, 255, 0.86);
        --workspace-overlay-hover: rgba(17, 17, 17, 0.065);
        --workspace-overlay-selected: rgba(17, 17, 17, 0.1);
        --workspace-overlay-shadow: 0 26px 72px rgba(15, 23, 42, 0.18), 0 4px 18px rgba(15, 23, 42, 0.08);
    }

    .dark body.app-spatial-overlays {
        --workspace-overlay-bg: rgba(10, 10, 11, 0.78);
        --workspace-overlay-bg-strong: rgba(15, 15, 16, 0.88);
        --workspace-overlay-border: rgba(255, 255, 255, 0.22);
        --workspace-overlay-divider: rgba(255, 255, 255, 0.105);
        --workspace-overlay-highlight: rgba(255, 255, 255, 0.2);
        --workspace-overlay-hover: rgba(255, 255, 255, 0.075);
        --workspace-overlay-selected: rgba(255, 255, 255, 0.115);
        --workspace-overlay-shadow: 0 30px 84px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.34);
    }

    body.app-spatial-overlays :where(
        .ant-dropdown-menu,
        .ant-select-dropdown,
        .ant-popover-inner,
        .ant-picker-dropdown .ant-picker-panel-container,
        .ant-cascader-menus,
        .ant-mentions-dropdown,
        .ant-tooltip-inner,
        .ant-modal-content,
        .ant-drawer-content,
        .ant-message-notice-content,
        .ant-notification-notice
    ) {
        border: 1px solid var(--workspace-overlay-border) !important;
        background:
            linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 24%, transparent 76%, rgba(158, 178, 214, 0.055)),
            var(--workspace-overlay-bg) !important;
        box-shadow:
            var(--workspace-overlay-shadow),
            inset 0 1px 0 var(--workspace-overlay-highlight),
            inset 1px 0 0 color-mix(in srgb, var(--workspace-overlay-highlight) 36%, transparent) !important;
        backdrop-filter: blur(30px) saturate(138%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(138%) !important;
    }

    body.app-spatial-overlays :where(.ant-modal-content, .ant-drawer-content, .ant-notification-notice) {
        background:
            linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 20%, transparent 82%, rgba(158, 178, 214, 0.05)),
            var(--workspace-overlay-bg-strong) !important;
    }

    body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-cascader-menus, .ant-mentions-dropdown) {
        border-radius: 8px !important;
    }

    body.app-spatial-overlays :where(
        .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled),
        .ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled),
        .ant-select-item-option:not(.ant-select-item-option-disabled),
        .ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled),
        .ant-mentions-dropdown-menu-item
    ) {
        border-radius: 5px;
        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
    }

    body.app-spatial-overlays :where(
        .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):hover,
        .ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled):hover,
        .ant-select-item-option-active:not(.ant-select-item-option-disabled),
        .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
        .ant-mentions-dropdown-menu-item-active
    ) {
        background: var(--workspace-overlay-hover) !important;
    }

    body.app-spatial-overlays :where(
        .ant-dropdown-menu-item-selected,
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
        .ant-cascader-menu-item-active
    ) {
        background: var(--workspace-overlay-selected) !important;
        color: var(--foreground) !important;
    }

    body.app-spatial-overlays :where(
        .ant-dropdown-menu-item-divider,
        .ant-popover-inner-content > .border-b,
        .ant-popover-inner-content > .border-y,
        .ant-modal-header,
        .ant-modal-footer,
        .ant-drawer-header
    ) {
        border-color: var(--workspace-overlay-divider) !important;
    }

    body.app-spatial-overlays :where(.ant-popover-arrow::before, .ant-tooltip-arrow::before) {
        border: 1px solid var(--workspace-overlay-border);
        background: var(--workspace-overlay-bg-strong) !important;
    }

    body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
        background: rgba(0, 0, 0, 0.48) !important;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    @media (prefers-reduced-transparency: reduce) {
        body.app-spatial-overlays :where(
            .ant-dropdown-menu,
            .ant-select-dropdown,
            .ant-popover-inner,
            .ant-picker-dropdown .ant-picker-panel-container,
            .ant-cascader-menus,
            .ant-mentions-dropdown,
            .ant-tooltip-inner,
            .ant-modal-content,
            .ant-drawer-content,
            .ant-message-notice-content,
            .ant-notification-notice
        ) {
            background: var(--workspace-overlay-bg-strong) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
    }

    .app-workspace-shell.is-spatial .app-workspace-brand-mark {
        border: 1px solid color-mix(in srgb, var(--workspace-accent) 36%, transparent);
        background: var(--workspace-accent);
        color: color-mix(in srgb, var(--workspace-canvas) 92%, black);
        box-shadow: 0 8px 24px color-mix(in srgb, var(--workspace-accent) 18%, transparent);
    }

    .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active {
        background: var(--workspace-accent-soft);
        color: var(--foreground);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 13%, transparent);
    }

    .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active::before {
        left: -9px;
        width: 3px;
        height: 20px;
        box-shadow: 0 0 18px color-mix(in srgb, var(--workspace-accent) 42%, transparent);
    }

    .app-workspace-shell.is-spatial .app-workspace-stage {
        border-radius: 0;
        background: var(--workspace-content);
    }

    /* 工作区保留滚轮与触控板滚动，只隐藏会形成额外竖向分割的浏览器轨道。 */
    .app-spatial-workspace .app-workspace-scroll {
        scrollbar-width: none;
    }

    .app-spatial-workspace .app-workspace-scroll::-webkit-scrollbar {
        display: none;
    }

    .app-spatial-workspace .app-page-header {
        border-color: var(--workspace-border);
    }

    .app-spatial-workspace .app-page-header h1 {
        letter-spacing: 0;
        text-wrap: balance;
    }

    .app-spatial-workspace .app-workspace-surface,
    .app-spatial-workspace .app-collection-card {
        border-color: var(--workspace-border);
        background: var(--workspace-surface);
        box-shadow:
            0 18px 50px color-mix(in srgb, var(--workspace-canvas) 54%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
        backdrop-filter: blur(18px) saturate(118%);
    }

    .app-spatial-workspace .app-collection-card:hover,
    .app-spatial-workspace .app-collection-card:focus-within {
        border-color: var(--workspace-border-strong);
        background: color-mix(in srgb, var(--workspace-surface-strong) 96%, var(--workspace-accent) 4%);
        box-shadow: 0 18px 42px color-mix(in srgb, var(--workspace-accent) 7%, transparent);
    }

    .app-spatial-workspace .app-table-surface {
        border-color: var(--workspace-border);
        background: var(--workspace-surface-strong);
        box-shadow:
            0 20px 54px color-mix(in srgb, var(--workspace-canvas) 58%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
    }

    .app-spatial-workspace .app-data-table .ant-table,
    .app-spatial-workspace .app-data-table .ant-table-container {
        background: transparent;
    }

    .app-spatial-workspace .app-list-search:focus-within {
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--workspace-accent) 10%, transparent));
    }

    .app-spatial-workspace .app-pagination-bar {
        border-color: var(--workspace-border);
        background: transparent;
    }

    .app-spatial-workspace .app-home-header {
        border-color: var(--workspace-border);
    }

    .app-spatial-workspace .app-home-metric {
        border-color: var(--workspace-border);
        background: var(--workspace-surface);
        box-shadow:
            0 16px 42px color-mix(in srgb, var(--workspace-canvas) 56%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
        backdrop-filter: blur(18px) saturate(115%);
    }

    .app-spatial-workspace .app-home-metric svg {
        width: 17px;
        height: 17px;
    }

    .app-spatial-workspace .workspace-signal-icon path {
        stroke: var(--workspace-accent) !important;
    }

    .app-spatial-workspace .workspace-signal-icon circle {
        fill: color-mix(in srgb, var(--workspace-accent) 62%, transparent) !important;
    }

    .app-spatial-workspace .ant-switch.ant-switch-checked {
        background: var(--workspace-accent);
    }

    .dark .app-spatial-workspace .ant-switch.ant-switch-checked .ant-switch-handle::before {
        background: #171717;
    }

    .app-spatial-workspace .app-home-focus-panel,
    .app-spatial-workspace .project-overview-focus,
    .app-spatial-workspace .project-pipeline-surface {
        border-color: var(--workspace-border);
        background: var(--workspace-surface-strong);
        box-shadow:
            0 26px 72px color-mix(in srgb, var(--workspace-canvas) 64%, transparent),
            inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    }

    .app-spatial-workspace .app-home-focus-panel {
        min-height: 330px;
    }

    .app-spatial-workspace .spatial-chapter-panel,
    .app-spatial-workspace .project-overview-status {
        background: color-mix(in srgb, var(--workspace-surface) 82%, var(--workspace-accent) 3%);
    }

    .spatial-chapter-deck {
        position: relative;
        min-height: 242px;
        perspective: 900px;
        perspective-origin: 50% 34%;
        transform-style: preserve-3d;
    }

    .spatial-chapter-card {
        position: absolute;
        top: 0;
        left: 3%;
        display: block;
        width: min(82%, 290px);
        height: 92px;
        overflow: hidden;
        border: 1px solid var(--workspace-border-strong);
        border-radius: 7px;
        background: color-mix(in srgb, var(--workspace-surface-strong) 95%, white 5%);
        padding: 13px 15px;
        color: color-mix(in srgb, var(--foreground) 76%, transparent);
        box-shadow:
            0 18px 28px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 color-mix(in srgb, white 13%, transparent);
        transform: translate3d(var(--deck-x), var(--deck-y), var(--deck-z)) rotateX(46deg) rotateZ(-7deg);
        transform-origin: center top;
        transition:
            border-color var(--motion-state) var(--ease-aceternity),
            background-color var(--motion-state) var(--ease-aceternity),
            color var(--motion-state) var(--ease-aceternity),
            transform var(--motion-state) var(--ease-aceternity);
    }

    .spatial-chapter-card:hover,
    .spatial-chapter-card:focus-visible {
        z-index: 20 !important;
        border-color: color-mix(in srgb, var(--workspace-accent) 58%, var(--workspace-border));
        color: var(--foreground);
        outline: none;
        transform: translate3d(calc(var(--deck-x) + 8px), calc(var(--deck-y) - 5px), 18px) rotateX(34deg) rotateZ(-5deg);
    }

    .spatial-chapter-card.is-active {
        border-color: color-mix(in srgb, var(--workspace-accent) 74%, white 8%);
        background: var(--workspace-accent);
        color: color-mix(in srgb, var(--workspace-canvas) 90%, black);
        box-shadow:
            0 22px 50px color-mix(in srgb, var(--workspace-accent) 23%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .spatial-chapter-card.is-loading {
        border-color: var(--workspace-border);
        background: color-mix(in srgb, var(--foreground) 4%, var(--workspace-surface-strong));
    }

    .app-spatial-workspace .app-workflow-rail {
        border-color: var(--workspace-border);
    }

    .app-spatial-workspace .app-workflow-step {
        border-color: var(--workspace-border);
        transition: background-color var(--motion-instant) ease-out;
    }

    .app-spatial-workspace .app-workflow-step:hover {
        background: var(--workspace-accent-soft);
    }

    .app-spatial-workspace .project-workbench-header {
        border-color: var(--workspace-border);
        background: color-mix(in srgb, var(--workspace-nav) 92%, transparent);
        box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--workspace-accent) 4%, transparent);
        backdrop-filter: blur(22px) saturate(120%);
    }

    .app-spatial-workspace .project-pipeline-surface > div > a:hover {
        background: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
    }

    @media (max-width: 639px) {
        .app-workspace-shell.is-spatial {
            gap: 6px;
            padding: 6px;
        }

        .app-workspace-shell.is-spatial .app-workspace-sidebar,
        .app-workspace-shell.is-spatial .app-workspace-stage {
            border-radius: 6px;
        }

    }

    @media (max-width: 1023px) {
        .app-workspace-sidebar-scrim {
            left: 0;
        }

        .app-workspace-shell .app-workspace-sidebar.is-mobile-expanded {
            position: absolute;
            z-index: 40;
            inset: 6px auto 6px 6px;
            width: min(196px, calc(100vw - 58px));
            box-shadow: 22px 0 70px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .app-spatial-workspace .app-home-focus-panel {
            min-height: 0;
        }

        .spatial-chapter-deck {
            display: grid;
            min-height: 0;
            gap: 8px;
            perspective: none;
        }

        .spatial-chapter-card {
            position: relative;
            left: auto;
            top: auto;
            width: 100%;
            height: auto;
            min-height: 68px;
            transform: none;
        }

        .spatial-chapter-card:hover,
        .spatial-chapter-card:focus-visible {
            transform: translateX(3px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .spatial-chapter-card,
        .spatial-chapter-card:hover,
        .spatial-chapter-card:focus-visible {
            transition: none;
            transform: none;
        }
    }

    .app-user-workspace {
        background-color: var(--workspace-page);
    }

    .app-workspace-shell {
        background: var(--workspace-page);
    }

    .app-workspace-sidebar {
        border-right: 1px solid var(--workspace-border);
        background: var(--workspace-navigation);
        transition: width var(--motion-state) var(--ease-aceternity);
    }

    .app-workspace-stage,
    .app-user-content,
    .app-workspace-grid {
        background: var(--workspace-content);
    }

    .app-workspace-page {
        background: var(--workspace-content);
    }

    .app-workspace-navigation {
        background: var(--workspace-navigation);
    }

    .app-workspace-nav-link.is-active {
        background: color-mix(in srgb, var(--foreground) 6%, transparent);
        color: var(--foreground);
    }

    .app-workspace-nav-link.is-active::before {
        position: absolute;
        left: -8px;
        width: 2px;
        height: 18px;
        border-radius: 0 2px 2px 0;
        background: var(--workspace-accent);
        content: "";
    }

    .app-workspace-icon-button {
        display: inline-flex;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: color-mix(in srgb, var(--foreground) 58%, transparent);
        transition: color var(--motion-instant) ease-out, background-color var(--motion-instant) ease-out;
    }

    .app-workspace-icon-button:hover {
        background: color-mix(in srgb, var(--foreground) 6%, transparent);
        color: var(--foreground);
    }

    /* Sidebar custom scrollbar - 隐身融入设计 */
    .app-workspace-sidebar-scroll-area {
        position: relative; /* 为渐变遮罩定位 */
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent; /* 默认完全隐藏 */
        transition: scrollbar-color var(--motion-state) ease-in-out;
    }

    .app-workspace-sidebar-scroll-area::-webkit-scrollbar {
        width: 4px;
        background: transparent; /* 默认轨道透明 */
    }

    .app-workspace-sidebar-scroll-area::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb {
        background: transparent; /* 默认滑块透明 */
        border-radius: 9999px;
        transition: background-color var(--motion-state) ease-in-out;
    }

    /* Hover state - 显示滚动条 */
    .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area,
    .app-workspace-sidebar-scroll-area:hover {
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb,
    .app-workspace-sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Dark mode scrollbar */
    .dark .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area,
    .dark .app-workspace-sidebar-scroll-area:hover {
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    }

    .dark .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb,
    .dark .app-workspace-sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Scroll fade gradients - 光影提示设计 */
    .app-workspace-sidebar-scroll-area.has-top-fade::before,
    .app-workspace-sidebar-scroll-area.has-bottom-fade::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 12px;
        pointer-events: none; /* 不阻塞点击事件 */
        z-index: 10;
    }

    .app-workspace-sidebar-scroll-area.has-top-fade::before {
        top: 0;
        background: var(--workspace-navigation);
    }

    .app-workspace-sidebar-scroll-area.has-bottom-fade::after {
        bottom: 0;
        background: var(--workspace-navigation);
    }

    .workspace-signal-icon {
        filter: drop-shadow(0 7px 16px color-mix(in srgb, var(--workspace-accent) 14%, transparent));
    }

    .workspace-state {
        animation: workspace-state-enter var(--motion-panel) var(--ease-product-enter) both;
    }

    .workspace-loading-state .ant-skeleton-title,
    .workspace-loading-state .ant-skeleton-paragraph > li {
        border-radius: 4px;
    }

    :where(.ant-btn) {
        letter-spacing: 0;
        transition:
            color var(--motion-instant) ease-out,
            background-color var(--motion-instant) ease-out,
            border-color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out,
            transform 90ms ease-out;
    }

    :where(.ant-btn:not(:disabled)):active {
        transform: scale(0.98);
    }

    :where(.ant-select-item-option-content) {
        min-width: 0;
    }

    .creation-home {
        --creation-accent: var(--workspace-accent);
        --creation-bg: var(--workspace-page);
        --creation-surface: rgba(255, 255, 255, .68);
        --creation-surface-muted: rgba(238, 241, 245, .68);
        --creation-surface-hover: rgba(228, 232, 237, .7);
        --creation-surface-selected: rgba(218, 223, 229, .72);
        --creation-border: rgba(179, 188, 199, .34);
        --creation-border-strong: rgba(123, 136, 151, .42);
        --creation-text: #17191d;
        --creation-muted: #929aa5;
        --creation-faint: #b5bbc3;
        isolation: isolate;
        background: var(--creation-bg);
        color: var(--creation-text);
        backdrop-filter: blur(18px) saturate(112%);
        -webkit-backdrop-filter: blur(18px) saturate(112%);
    }

    .dark .creation-home {
        --creation-accent: var(--workspace-accent);
        --creation-bg: var(--workspace-page);
        --creation-surface: rgba(27, 29, 34, .72);
        --creation-surface-muted: rgba(35, 38, 44, .68);
        --creation-surface-hover: rgba(47, 50, 58, .72);
        --creation-surface-selected: rgba(57, 61, 70, .74);
        --creation-border: rgba(104, 111, 124, .24);
        --creation-border-strong: rgba(137, 146, 160, .36);
        --creation-text: #f2f4f6;
        --creation-muted: #737b86;
        --creation-faint: #565d67;
    }

    .creation-new-button {
        position: absolute;
        z-index: 30;
        top: 24px;
        right: 28px;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid var(--creation-border);
        border-radius: 9px;
        background: var(--creation-surface);
        color: var(--creation-muted);
        box-shadow: 0 8px 24px rgba(31, 37, 45, .06), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
        backdrop-filter: blur(18px) saturate(125%);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
    }

    .creation-new-button:hover {
        border-color: var(--creation-border-strong);
        background: var(--creation-surface-hover);
        color: var(--creation-text);
    }

    .creation-empty-workspace {
        display: flex;
        width: min(1000px, calc(100% - 64px));
        min-height: 100%;
        flex: 1 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 0 0 20px;
    }

    .creation-empty-composer {
        width: 100%;
        animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both;
    }

    .creation-composer {
        position: relative;
        width: 100%;
        min-width: 0;
        border: 1px solid var(--creation-border);
        border-radius: 16px;
        background: var(--creation-surface);
        box-shadow: 0 22px 72px rgba(27, 33, 42, .065), inset 0 1px 0 color-mix(in srgb, white 76%, transparent);
        overflow: hidden;
        backdrop-filter: blur(26px) saturate(128%);
        -webkit-backdrop-filter: blur(26px) saturate(128%);
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .creation-composer::before {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 22px;
        left: 22px;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, white 72%, transparent), transparent);
        content: "";
        pointer-events: none;
    }

    .creation-composer:focus-within {
        border-color: var(--creation-border-strong);
        box-shadow: 0 24px 68px rgba(27, 33, 42, .11), 0 0 0 3px color-mix(in srgb, var(--creation-accent) 7%, transparent), inset 0 1px 0 color-mix(in srgb, white 78%, transparent);
    }

    .dark .creation-composer {
        border-color: rgba(255, 255, 255, .075);
        background: rgba(22, 24, 29, .66);
        box-shadow: 0 20px 72px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .dark .creation-composer:focus-within {
        border-color: rgba(6, 182, 212, .34);
        box-shadow: 0 28px 84px rgba(0, 0, 0, .32), 0 0 0 1px rgba(6, 182, 212, .1), inset 0 1px 0 rgba(255, 255, 255, .055);
    }

    .creation-prompt-area {
        display: grid;
        min-height: 174px;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
        padding: 24px 24px 14px;
    }

    .creation-reference-tile {
        display: flex;
        width: 56px;
        height: 70px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid var(--creation-border);
        border-radius: 5px;
        background: color-mix(in srgb, var(--creation-surface-muted) 80%, transparent);
        color: var(--creation-muted);
        transform: rotate(-7deg);
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--motion-ease-out);
    }

    .creation-reference-tile:hover:not(:disabled) {
        border-color: var(--creation-border-strong);
        background: var(--creation-surface-hover);
        color: var(--creation-text);
        transform: rotate(-3deg) translateY(-2px);
    }

    .creation-reference-tile:disabled {
        cursor: not-allowed;
        opacity: .45;
    }

    .creation-reference-tile svg {
        width: 17px;
        height: 17px;
    }

    .creation-reference-tile span {
        font-size: 9px;
        font-weight: 600;
    }

    .creation-prompt-editor {
        min-width: 0;
    }

    .creation-prompt-editor textarea {
        width: 100%;
        min-height: 126px;
        resize: none;
        border: 0;
        background: transparent;
        color: var(--creation-text);
        font-size: 14px;
        line-height: 1.75;
        outline: none;
    }

    .creation-prompt-editor textarea::placeholder {
        color: var(--creation-muted);
        opacity: .82;
    }

    .creation-prompt-editor textarea:disabled {
        cursor: wait;
        opacity: .62;
    }

    .creation-attachment-strip {
        display: flex;
        gap: 8px;
        padding-top: 8px;
        overflow-x: auto;
    }

    .creation-attachment {
        position: relative;
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid var(--creation-border);
        border-radius: 8px;
        background: var(--creation-surface-muted);
    }

    .creation-attachment img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .creation-attachment button {
        position: absolute;
        top: 3px;
        right: 3px;
        display: grid;
        width: 17px;
        height: 17px;
        place-items: center;
        border-radius: 50%;
        background: rgba(15, 16, 18, .72);
        color: white;
        opacity: 0;
        transition: opacity 140ms ease;
    }

    .creation-attachment:hover button,
    .creation-attachment button:focus-visible {
        opacity: 1;
    }

    .creation-attachment button svg {
        width: 10px;
        height: 10px;
    }

    .creation-composer-toolbar {
        display: flex;
        min-height: 64px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-top: 1px solid color-mix(in srgb, var(--creation-border) 72%, transparent);
        padding: 10px 16px 10px 18px;
    }

    .creation-composer-control-row {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 8px;
    }

    .creation-reference-button {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--creation-border);
        border-radius: 9px;
        background: color-mix(in srgb, var(--creation-surface-muted) 68%, transparent);
        color: var(--creation-muted);
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
    }

    .creation-reference-button svg {
        width: 16px;
        height: 16px;
    }

    .creation-reference-button:hover:not(:disabled) {
        border-color: var(--creation-border-strong);
        background: var(--creation-surface-hover);
        color: var(--creation-text);
        transform: translateY(-1px);
    }

    .creation-reference-button:active:not(:disabled) {
        transform: scale(.96);
    }

    .creation-reference-button:disabled {
        cursor: not-allowed;
        opacity: .45;
    }

    .creation-composer-primary-tools {
        display: flex;
        min-width: 0;
        flex: 0 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .dark .creation-composer-primary-tools {
        gap: 6px;
        border: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .dark .creation-reference-button {
        border-color: rgba(255, 255, 255, .07);
        background: rgba(38, 41, 48, .44);
    }

    .creation-chip {
        display: inline-flex;
        height: 36px;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 7px;
        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 10px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
    }

    .creation-chip:hover,
    .creation-chip[aria-expanded="true"] {
        border-color: var(--creation-border-strong);
        background: var(--creation-surface-hover);
    }

    .creation-chip:active {
        transform: scale(.98);
    }

    .creation-chip.is-accent {
        color: var(--creation-accent);
    }

    .creation-chip.is-accent[aria-expanded="true"] {
        background: color-mix(in srgb, var(--creation-accent) 9%, transparent);
    }

    .dark .creation-chip {
        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-chip:hover,
    .dark .creation-chip[aria-expanded="true"] {
        border-color: rgba(255, 255, 255, .13);
        background: rgba(48, 52, 61, .82);
    }

    .dark .creation-chip.is-accent {
        border-color: rgba(6, 182, 212, .2);
        background: rgba(6, 182, 212, .08);
    }

    .creation-chip > svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

    .creation-chip > svg:last-child {
        width: 13px;
        height: 13px;
        color: var(--creation-muted);
        transition: transform 160ms var(--motion-ease-out);
    }

    .creation-chip > svg:last-child.is-open {
        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;
        font-size: 11px;
        font-weight: 600;
    }

    .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;
    }

    .dark .creation-model-picker.canvas-composer-model-picker {
        border: 1px solid rgba(255, 255, 255, .075) !important;
        background: rgba(38, 41, 48, .64) !important;
        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[aria-expanded="true"] {
        border-color: rgba(255, 255, 255, .13) !important;
        background: rgba(48, 52, 61, .82) !important;
    }

    .creation-model-picker .canvas-model-picker-trigger-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .creation-submit-button {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        background: var(--creation-text);
        color: var(--creation-bg);
        margin-left: auto;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent), 0 8px 20px rgba(19, 23, 29, .14);
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    }

    .creation-composer-toolbar > .creation-submit-button {
        margin-left: auto;
    }

    .creation-submit-button:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .creation-submit-button:active:not(:disabled) {
        transform: scale(.96);
    }

    .creation-submit-button:disabled {
        cursor: not-allowed;
        background: var(--creation-surface-selected);
        color: var(--creation-faint);
    }

    .creation-submit-button.is-stopping {
        background: #c84646;
        color: white;
    }

    .creation-new-button:focus-visible,
    .creation-reference-tile:focus-visible,
    .creation-reference-button:focus-visible,
    .creation-chip:focus-visible,
    .creation-submit-button:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--creation-accent) 55%, transparent);
        outline-offset: 2px;
    }

    .creation-inspiration-strip {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 26px;
    }

    .creation-inspiration-strip button {
        display: flex;
        min-width: 0;
        height: 76px;
        align-items: center;
        gap: 11px;
        overflow: hidden;
        border: 1px solid var(--creation-border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--creation-surface) 74%, transparent);
        color: var(--creation-text);
        padding: 8px 11px;
        text-align: left;
        box-shadow: inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
        backdrop-filter: blur(18px) saturate(120%);
        -webkit-backdrop-filter: blur(18px) saturate(120%);
        transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--motion-ease-out);
    }

    .creation-inspiration-strip button:hover {
        border-color: var(--creation-border-strong);
        background: var(--creation-surface-muted);
        transform: translateY(-2px);
    }

    .creation-inspiration-strip img {
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        border-radius: 8px;
        object-fit: cover;
    }

    .creation-inspiration-strip span {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dark .creation-inspiration-strip button {
        border-color: rgba(255, 255, 255, .06);
        background: rgba(25, 27, 32, .72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .dark .creation-inspiration-strip button:hover {
        border-color: rgba(255, 255, 255, .13);
        background: rgba(33, 36, 43, .86);
    }

    .creation-thread-stage {
        width: min(840px, calc(100% - 48px));
        flex: 1 0 auto;
        margin: 0 auto;
        padding: 72px 0 48px;
    }

    .creation-results {
        width: 100%;
        animation: creation-results-enter var(--motion-dur-base-calc) var(--motion-ease-out) both;
    }

    .creation-thread-composer {
        position: sticky;
        z-index: 20;
        bottom: 0;
        width: min(840px, calc(100% - 48px));
        flex: 0 0 auto;
        margin: 0 auto;
        padding: 10px 0 22px;
        background: linear-gradient(180deg, transparent, var(--creation-bg) 22%);
    }

    .creation-composer-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 4px 0;
        color: var(--creation-muted);
        font-size: 10px;
    }

    .creation-composer-meta a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: inherit;
    }

    .creation-composer-meta a:hover {
        color: var(--creation-text);
    }

    .creation-control-popover {
        filter: none !important;
    }

    .creation-control-popover-surface,
    .creation-model-picker-surface {
        border: 1px solid rgba(220, 225, 231, .82) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .78) !important;
        box-shadow: 0 18px 46px rgba(20, 26, 35, .14), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
        overflow: hidden;
        padding: 0 !important;
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
        animation: creation-popover-enter var(--motion-dur-fast-calc) var(--motion-ease-out) both;
    }

    .dark .creation-control-popover-surface,
    .dark .creation-model-picker-surface {
        border-color: rgba(61, 66, 76, .72) !important;
        background: rgba(25, 27, 32, .92) !important;
        box-shadow: 0 20px 52px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    }

    .creation-control-popover-content,
    .creation-model-picker-surface .ant-popover-inner-content {
        padding: 0 !important;
    }

    .creation-mode-picker-menu {
        width: 176px;
        padding: 6px;
        color: #17191d;
    }

    .dark .creation-mode-picker-menu {
        color: #f2f4f6;
    }

    .creation-mode-picker-menu button {
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        padding: 0 8px;
        color: inherit;
        font-size: 13px;
        text-align: left;
        transition: background-color 150ms ease;
    }

    .creation-mode-picker-menu button:hover,
    .creation-mode-picker-menu button.is-selected {
        background: #f1f2f4;
    }

    .dark .creation-mode-picker-menu button:hover,
    .dark .creation-mode-picker-menu button.is-selected {
        background: #282b31;
    }

    .creation-mode-picker-menu button > svg {
        width: 15px;
        height: 15px;
        margin-left: auto;
    }

    .creation-menu-icon {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border: 1px solid #e5e7eb;
        border-radius: 7px;
    }

    .dark .creation-menu-icon {
        border-color: #30343b;
    }

    .creation-menu-icon svg {
        width: 15px;
        height: 15px;
    }

    .creation-settings-panel {
        width: min(400px, calc(100vw - 24px));
        padding: 16px;
        color: #17191d;
    }

    .dark .creation-settings-panel {
        color: #f2f4f6;
    }

    .creation-settings-section + .creation-settings-section {
        margin-top: 18px;
    }

    .creation-settings-section h3,
    .creation-duration-panel h3 {
        margin: 0 0 9px;
        color: #8c949f;
        font-size: 12px;
        font-weight: 520;
    }

    .dark .creation-settings-section h3,
    .dark .creation-duration-panel h3 {
        color: #69717c;
    }

    .creation-segmented-grid {
        display: grid;
        gap: 4px;
        border: 1px solid rgba(226, 230, 235, .7);
        border-radius: 10px;
        background: rgba(240, 242, 245, .7);
        padding: 3px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .dark .creation-segmented-grid {
        border-color: rgba(58, 63, 72, .58);
        background: rgba(35, 38, 44, .72);
    }

    .creation-segmented-grid.is-ratio {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .creation-segmented-grid.is-resolution {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .creation-segmented-grid.is-quality,
    .creation-segmented-grid.is-count {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .creation-segmented-grid button {
        display: flex;
        min-width: 0;
        min-height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 8px;
        color: #3f454d;
        font-size: 13px;
        box-shadow: inset 0 1px 0 transparent;
        transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
    }

    .dark .creation-segmented-grid button {
        color: #e3e6ea;
    }

    .creation-segmented-grid button:hover {
        background: rgba(255, 255, 255, .58);
        transform: translateY(-1px);
    }

    .creation-segmented-grid button:active {
        transform: scale(.97);
    }

    .dark .creation-segmented-grid button:hover {
        background: #2b2e35;
    }

    .creation-segmented-grid button.is-selected {
        background: rgba(255, 255, 255, .84);
        color: #17191d;
        box-shadow: 0 2px 10px rgba(22, 28, 36, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
    }

    .dark .creation-segmented-grid button.is-selected {
        background: rgba(58, 62, 71, .86);
        color: #ffffff;
        box-shadow: 0 5px 14px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .07);
    }

    .creation-segmented-grid button small {
        color: #9ba2ac;
        font-size: 9px;
    }

    .dark .creation-segmented-grid button small {
        color: #747b85;
    }

    .creation-ratio-preview {
        display: grid;
        width: 28px;
        height: 19px;
        place-items: center;
    }

    .creation-ratio-preview > span {
        display: block;
        border: 1.5px solid currentColor;
        border-radius: 3px;
    }

    .creation-segmented-grid.is-resolution button,
    .creation-segmented-grid.is-count button {
        min-height: 42px;
        font-size: 13px;
    }

    .creation-duration-panel {
        width: min(400px, calc(100vw - 24px));
        padding: 16px 18px 18px;
        color: #17191d;
    }

    .dark .creation-duration-panel {
        color: #f2f4f6;
    }

    .creation-duration-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 96px;
        align-items: center;
        gap: 24px;
    }

    .creation-range-wrap input {
        width: 100%;
        height: 24px;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }

    .creation-range-wrap input::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 999px;
        background: #e1e4e8;
    }

    .dark .creation-range-wrap input::-webkit-slider-runnable-track {
        background: #30343b;
    }

    .creation-range-wrap input::-webkit-slider-thumb {
        width: 8px;
        height: 26px;
        margin-top: -9px;
        appearance: none;
        border-radius: 4px;
        background: #17191d;
        box-shadow: none;
    }

    .dark .creation-range-wrap input::-webkit-slider-thumb {
        background: #ffffff;
    }

    .creation-range-wrap input::-moz-range-track {
        height: 8px;
        border-radius: 999px;
        background: #e1e4e8;
    }

    .dark .creation-range-wrap input::-moz-range-track {
        background: #30343b;
    }

    .creation-range-wrap input::-moz-range-thumb {
        width: 8px;
        height: 26px;
        border: 0;
        border-radius: 4px;
        background: #17191d;
    }

    .dark .creation-range-wrap input::-moz-range-thumb {
        background: #ffffff;
    }

    .creation-range-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
        color: #6f7781;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }

    .creation-duration-value {
        display: flex;
        height: 56px;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(226, 230, 235, .7);
        border-radius: 9px;
        background: rgba(240, 242, 244, .72);
        padding: 0 17px;
    }

    .dark .creation-duration-value {
        border-color: rgba(58, 63, 72, .6);
        background: rgba(43, 46, 53, .78);
    }

    .creation-duration-value strong {
        font-size: 17px;
        font-weight: 550;
    }

    .creation-duration-value span {
        color: #8f97a2;
        font-size: 16px;
    }

    .creation-model-picker-menu {
        width: min(384px, calc(100vw - 24px)) !important;
        max-height: min(460px, calc(100vh - 24px));
        padding: 8px !important;
        background: rgba(255, 255, 255, .7) !important;
        color: #17191d !important;
    }

    .dark .creation-model-picker-menu {
        background: rgba(25, 27, 32, .7) !important;
        color: #f2f4f6 !important;
    }

    .creation-model-picker-menu .canvas-model-picker-group-label {
        padding: 7px 8px 6px;
        font-size: 11px;
    }

    .creation-model-picker-heading {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 7px;
        padding: 3px 8px 9px;
        color: #929aa5;
        font-size: 12px;
    }

    .creation-model-picker-heading strong {
        min-width: 0;
        overflow: hidden;
        color: #17191d;
        font-weight: 520;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dark .creation-model-picker-heading {
        color: #69717c;
    }

    .dark .creation-model-picker-heading strong {
        color: #f2f4f6;
    }

    .creation-model-picker-menu .canvas-model-picker-option {
        min-height: 52px;
        border-radius: 9px;
        padding: 7px 9px;
        transition: background-color 150ms ease, transform 120ms ease;
    }

    .creation-model-picker-menu .canvas-model-picker-option:hover {
        transform: translateY(-1px);
    }

    .creation-model-picker-menu .canvas-model-picker-option > span:first-child {
        gap: 12px;
    }

    .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child {
        width: 34px;
        height: 34px;
        border: 1px solid #e6e8eb;
        border-radius: 8px;
        background: rgba(255, 255, 255, .66) !important;
    }

    .dark .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child {
        border-color: #30343b;
        background: rgba(35, 38, 44, .72) !important;
    }

    .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:first-child {
        font-size: 13px;
    }

    .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:nth-child(2) {
        margin-top: 5px;
        font-size: 10px;
    }

    @keyframes creation-results-enter {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes creation-popover-enter {
        from { opacity: 0; transform: translateY(6px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes creation-workbench-enter {
        from { opacity: 0; transform: translateY(12px) scale(.992); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* 创作首页使用独立的“编辑面 + 操作 Dock”结构，避免继承画布的面板语言。 */
    .creation-home {
        --creation-bg: var(--workspace-page);
        --creation-surface: #131519;
        --creation-surface-muted: #1e2127;
        --creation-surface-hover: #262a31;
        --creation-surface-selected: #343841;
        --creation-border: rgba(255, 255, 255, .105);
        --creation-border-strong: rgba(255, 255, 255, .2);
        --creation-text: #f3f4f6;
        --creation-muted: #737985;
        --creation-faint: #4d535e;
        background: var(--creation-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html:not(.dark) .creation-home {
        --creation-bg: var(--workspace-page);
        --creation-surface: #ffffff;
        --creation-surface-muted: #f0f2f5;
        --creation-surface-hover: #e9edf1;
        --creation-surface-selected: #dde1e7;
        --creation-border: rgba(32, 37, 45, .13);
        --creation-border-strong: rgba(32, 37, 45, .25);
        --creation-text: #17191d;
        --creation-muted: #89919d;
        --creation-faint: #abb2bb;
    }

    .creation-empty-workspace {
        width: min(1280px, calc(100% - 80px));
        padding: 0 0 12px;
    }

    .creation-studio-composer {
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--creation-border);
        border-radius: 26px;
        background: var(--creation-surface);
        box-shadow: 0 28px 70px rgba(0, 0, 0, .18);
        animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both;
    }

    html:not(.dark) .creation-studio-composer {
        box-shadow: 0 24px 62px rgba(25, 31, 41, .08);
    }

    .creation-studio-composer:focus-within {
        border-color: var(--creation-border-strong);
        box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
    }

    .creation-studio-writing-surface {
        display: grid;
        min-height: 232px;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 22px;
        padding: 28px 34px 18px;
    }

    .creation-studio-reference {
        display: flex;
        width: 74px;
        height: 92px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        align-self: start;
        border: 1px solid rgba(132, 143, 161, .24);
        border-radius: 8px;
        background: #1c1f25;
        color: #c8cdd5;
        transform: rotate(-7deg);
        transition: transform 180ms var(--motion-ease-out), border-color 180ms ease, background-color 180ms ease;
    }

    html:not(.dark) .creation-studio-reference {
        background: #f1f3f6;
        color: #69717c;
    }

    .creation-studio-reference:hover:not(:disabled) {
        border-color: rgba(6, 182, 212, .55);
        background: #22262d;
        transform: rotate(-3deg) translateY(-3px);
    }

    .creation-studio-reference:disabled { cursor: wait; opacity: .5; }
    .creation-studio-reference svg { width: 23px; height: 23px; }
    .creation-studio-reference span { font-size: 11px; font-weight: 600; }

    .creation-studio-editor { min-width: 0; }

    .creation-studio-editor textarea {
        display: block;
        width: 100%;
        min-height: 170px;
        resize: none;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--creation-text);
        font-size: 17px;
        line-height: 1.75;
    }

    .creation-studio-editor textarea::placeholder { color: var(--creation-muted); opacity: .72; }
    .creation-studio-editor textarea:disabled { cursor: wait; opacity: .56; }

    .creation-studio-attachment-strip {
        display: flex;
        gap: 8px;
        padding-top: 6px;
        overflow-x: auto;
    }

    .creation-studio-attachment {
        position: relative;
        width: 54px;
        height: 54px;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid var(--creation-border);
        border-radius: 10px;
        background: var(--creation-surface-muted);
    }

    .creation-studio-attachment img { width: 100%; height: 100%; object-fit: cover; }
    .creation-studio-attachment button {
        position: absolute;
        top: 4px;
        right: 4px;
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, .7);
        color: white;
        opacity: 0;
        transition: opacity 140ms ease;
    }
    .creation-studio-attachment:hover button,
    .creation-studio-attachment button:focus-visible { opacity: 1; }
    .creation-studio-attachment button svg { width: 11px; height: 11px; }

    .creation-studio-dock {
        display: flex;
        min-height: 80px;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid var(--creation-border);
        padding: 14px 32px 14px 34px;
    }

    .creation-studio-controls {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .creation-studio-control,
    .creation-model-picker.canvas-composer-model-picker {
        display: inline-flex;
        height: 48px !important;
        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;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
        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-model-picker.canvas-composer-model-picker {
        border-color: rgba(32, 37, 45, .12) !important;
        background: #f0f2f5 !important;
        color: #20242a !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    }

    .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;
        transform: translateY(-1px);
    }

    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; }

    .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; }
    .creation-studio-control > svg { width: 19px; height: 19px; flex: 0 0 auto; }
    .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;
        justify-content: flex-start;
        font-size: 15px;
    }
    .creation-model-picker .canvas-model-picker-trigger-icon { width: 25px; height: 25px; border-radius: 8px; }

    .creation-studio-submit {
        display: grid;
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 50%;
        background: #383d47;
        color: #e5e8ec;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
        cursor: pointer;
        transition: transform 150ms var(--motion-ease-out), background-color 150ms ease, color 150ms ease;
    }
    .creation-studio-submit:hover:not(:disabled) { background: #f4f5f6; color: #111317; transform: translateY(-1px); }
    .creation-studio-submit:active:not(:disabled) { transform: scale(.96); }
    .creation-studio-submit:disabled { cursor: not-allowed; background: #2d3139; color: #5a606b; }
    .creation-studio-submit.is-stopping { background: #bd4949; color: white; }

    /* 对话态不沿用空态大面板：编辑、控制与消息流各自保持紧凑的固定职责。 */
    .creation-empty-workspace {
        width: min(1120px, calc(100% - 64px));
        justify-content: center;
        padding-bottom: 6vh;
    }

    .creation-empty-composer { width: 100%; margin: 0; }

    .creation-chat-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0 28px;
    }
    .creation-chat-intro-mark {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        margin-bottom: 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .055);
        color: var(--creation-accent);
        animation: creation-intro-mark 2.8s var(--motion-ease-out) infinite;
    }
    .creation-chat-intro-mark svg { width: 16px; height: 16px; }
    .creation-chat-headline {
        margin: 0;
        color: var(--creation-text);
        font-size: 26px;
        font-weight: 620;
        line-height: 1.25;
        text-align: center;
    }
    .creation-chat-headline span { display: inline-block; margin-left: 4px; color: var(--creation-accent); animation: creation-intro-word 2.8s var(--motion-ease-out) infinite; }
    .creation-chat-intro p { margin: 8px 0 0; color: var(--creation-muted); font-size: 12px; }

    .creation-chat-composer {
        width: 100%;
        overflow: hidden;
        border: 0;
        border-radius: 22px;
        background: #1a1c21;
        box-shadow: none;
    }

    html:not(.dark) .creation-chat-composer {
        background: #fff;
        box-shadow: 0 10px 32px rgba(20, 26, 35, .05);
    }

    .creation-chat-composer:focus-within { box-shadow: none; }

    .creation-chat-writing-surface {
        display: grid;
        min-height: 92px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
        padding: 15px 18px 8px;
    }

    .creation-chat-reference {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 0;
        border-radius: 12px;
        background: #242730;
        color: #eef1f4;
        box-shadow: none;
        transition: transform 140ms var(--motion-ease-out), background-color 140ms ease, border-color 140ms ease;
    }

    .creation-chat-reference:hover:not(:disabled) {
        background: #2c3039;
        transform: translateY(-1px);
    }
    .creation-chat-reference:active:not(:disabled) { transform: scale(.96); }
    .creation-chat-reference:disabled { cursor: wait; opacity: .45; }
    .creation-chat-reference svg { width: 21px; height: 21px; }

    html:not(.dark) .creation-chat-reference { background: #eff2f5; color: #1d2229; box-shadow: none; }

    .creation-chat-composer.is-empty .creation-chat-writing-surface {
        min-height: 126px;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 24px 9px;
    }
    .creation-chat-reference.is-paper {
        width: 56px;
        height: 72px;
        flex-direction: column;
        gap: 4px;
        border-radius: 4px;
        background: #242730;
        color: #bec5ce;
        transform: rotate(-7deg);
    }
    .creation-chat-reference.is-paper:hover:not(:disabled) { background: #2c3039; transform: rotate(-4deg) translateY(-2px); }
    .creation-chat-reference.is-paper svg { width: 18px; height: 18px; }
    .creation-chat-reference.is-paper span { font-size: 9px; font-weight: 600; }

    .creation-chat-editor { min-width: 0; }
    .creation-chat-editor textarea {
        display: block;
        width: 100%;
        min-height: 78px;
        resize: none;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--creation-text);
        font-size: 14px;
        line-height: 1.7;
    }
    .creation-chat-editor textarea::placeholder { color: var(--creation-muted); opacity: .76; }
    .creation-chat-editor textarea:disabled { cursor: wait; opacity: .55; }

    .creation-chat-attachment-strip { display: flex; gap: 7px; padding-top: 6px; overflow-x: auto; }
    .creation-chat-attachment { position: relative; width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--creation-border); border-radius: 8px; }
    .creation-chat-attachment img { width: 100%; height: 100%; object-fit: cover; }
    .creation-chat-attachment button { position: absolute; top: 2px; right: 2px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .7); color: white; opacity: 0; transition: opacity 140ms ease; }
    .creation-chat-attachment:hover button, .creation-chat-attachment button:focus-visible { opacity: 1; }
    .creation-chat-attachment button svg { width: 10px; height: 10px; }

    .creation-chat-dock {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-top: 0;
        padding: 8px 14px 12px;
    }
    .creation-chat-controls { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
    .creation-chat-control,
    .creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
        display: inline-flex;
        height: 32px !important;
        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;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: none;
        transition: border-color 140ms ease, background-color 140ms ease, transform 140ms 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-color: rgba(255, 255, 255, .12) !important; background: #272b32 !important; transform: translateY(-1px); }
    .creation-chat-control:active { transform: scale(.98); }
    .creation-chat-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(5, 80, 98, .24) !important; color: #17c4e2 !important; }
    .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-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-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; }

    .creation-chat-submit {
        display: grid;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #303540;
        color: #f1f3f5;
        transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--motion-ease-out);
    }
    .creation-chat-submit:hover:not(:disabled) { background: #f3f4f6; color: #121417; transform: translateY(-1px); }
    .creation-chat-submit:active:not(:disabled) { transform: scale(.96); }
    .creation-chat-submit:disabled { cursor: not-allowed; background: #282c33; color: #5c6370; }
    .creation-chat-submit.is-stopping { background: #bd4949; color: white; }

    .creation-control-popover-surface {
        border: 0 !important;
        border-radius: 12px !important;
        background: #202227 !important;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .36) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .creation-parameter-menu { width: 292px; padding: 12px; }
    .creation-parameter-section + .creation-parameter-section { margin-top: 14px; }
    .creation-parameter-section h3 { margin: 0 0 8px; color: #858c97; font-size: 11px; font-weight: 500; }
    .creation-choice-grid { display: grid; gap: 4px; }
    .creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .creation-choice-grid.is-quality, .creation-choice-grid.is-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .creation-choice-grid button {
        display: flex;
        min-width: 0;
        min-height: 42px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 8px;
        color: #cdd1d7;
        font-size: 11px;
        transition: background-color 140ms ease, color 140ms ease;
    }
    .creation-choice-grid button:hover { background: rgba(255, 255, 255, .055); }
    .creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
    .creation-choice-grid button small { display: none; }
    .creation-choice-grid.is-resolution button, .creation-choice-grid.is-count button { min-height: 34px; font-size: 12px; }
    .creation-choice-grid .creation-ratio-preview { width: 24px; height: 15px; }
    .creation-choice-grid .creation-ratio-preview > span { border-width: 1px; border-radius: 2px; }

    .creation-duration-menu { width: 250px; padding: 12px 14px; }
    .creation-duration-menu > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #858c97; font-size: 11px; }
    .creation-duration-menu strong { color: #f3f4f6; font-size: 12px; font-weight: 600; }
    .creation-range-wrap input { height: 18px; }
    .creation-range-wrap input::-webkit-slider-runnable-track { height: 5px; }
    .creation-range-wrap input::-webkit-slider-thumb { width: 7px; height: 19px; margin-top: -7px; border-radius: 4px; }
    .creation-range-wrap input::-moz-range-track { height: 5px; }
    .creation-range-wrap input::-moz-range-thumb { width: 7px; height: 19px; border-radius: 4px; }
    .creation-range-labels { margin-top: 3px; font-size: 10px; }
    html:not(.dark) .creation-control-popover-surface { background: #fff !important; box-shadow: 0 14px 34px rgba(20, 26, 35, .14) !important; }
    html:not(.dark) .creation-parameter-section h3, html:not(.dark) .creation-duration-menu > div:first-child { color: #7b8490; }
    html:not(.dark) .creation-choice-grid button { color: #4d5661; }
    html:not(.dark) .creation-choice-grid button.is-selected { background: #e8ecf0; color: #20242a; }
    html:not(.dark) .creation-duration-menu strong { color: #20242a; }

    @keyframes creation-intro-mark {
        0%, 100% { transform: translateY(0) rotate(0deg); opacity: .72; }
        44% { transform: translateY(-3px) rotate(5deg); opacity: 1; }
    }
    @keyframes creation-intro-word {
        0%, 100% { transform: translateY(0); filter: brightness(1); }
        44% { transform: translateY(-2px); filter: brightness(1.18); }
    }

    @media (prefers-reduced-motion: reduce) {
        .creation-chat-intro-mark,
        .creation-chat-headline span {
            animation: none;
        }
    }

    .creation-thread-stage { width: min(960px, calc(100% - 48px)); padding: 48px 0 28px; }
    .creation-thread-composer { width: min(960px, calc(100% - 48px)); padding: 10px 0 18px; }
    .creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 76px; padding-top: 12px; }
    .creation-chat-composer.is-thread .creation-chat-editor textarea { min-height: 50px; }

    .creation-user-message { width: fit-content; max-width: min(70%, 520px); margin: 0 0 34px auto; border-radius: 16px 16px 5px 16px; background: rgba(255, 255, 255, .075); padding: 10px 14px; font-size: 14px; line-height: 1.65; }
    html:not(.dark) .creation-user-message { background: rgba(20, 26, 35, .065); }
    .creation-user-message-attachments { display: flex; gap: 6px; margin-top: 8px; }
    .creation-user-message-attachments img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }

    .creation-assistant-message { max-width: 760px; margin: 0 0 42px; }
    .creation-message-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--creation-muted); font-size: 12px; }
    .creation-message-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #f3f4f6; color: #15171b; }
    .creation-message-mark svg { width: 18px; height: 18px; }
    .creation-message-model { max-width: min(400px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .creation-message-state { border-radius: 6px; background: rgba(255, 255, 255, .08); padding: 3px 6px; color: var(--creation-muted); }
    .creation-message-state.is-error { background: rgba(185, 61, 61, .18); color: #ec7474; }
    .creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
    .creation-message-content > span { color: var(--creation-muted); }
    .creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: #ef5350; font-size: 14px; line-height: 1.6; }
    .creation-message-error button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-text); padding: 6px 9px; font-size: 12px; transition: background-color 140ms ease; }
    .creation-message-error button:hover { background: rgba(255, 255, 255, .11); }
    .creation-message-error button svg { width: 14px; height: 14px; }

    @media (max-width: 800px) {
        .creation-empty-workspace, .creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
        .creation-empty-workspace { padding-bottom: 5vh; }
        .creation-chat-writing-surface { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 13px 14px 8px; }
        .creation-chat-reference { width: 38px; height: 38px; border-radius: 11px; }
        .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-submit { width: 36px; height: 36px; }
        .creation-thread-stage { padding-top: 28px; }
        .creation-assistant-message { margin-bottom: 32px; }
        .creation-message-content, .creation-message-error { padding-left: 0; }
        .creation-user-message { max-width: 82%; }
    }

    @media (min-width: 1024px) {
        .app-workspace-shell.is-spatial {
            gap: 0;
            padding: 0;
            background: var(--workspace-canvas);
        }
        .app-workspace-shell.is-spatial .app-workspace-sidebar {
            width: 88px !important;
            border: 0;
            border-radius: 0;
            background: var(--workspace-canvas);
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .dark .app-workspace-shell.is-spatial .app-workspace-sidebar { box-shadow: none; }
        .app-workspace-shell.is-spatial .app-workspace-stage {
            border-radius: 0;
            background: transparent;
        }
        .app-workspace-shell.is-spatial .app-workspace-sidebar > div:first-child {
            height: 96px;
            border-bottom: 0;
        }
        .app-workspace-shell.is-spatial .app-workspace-sidebar > div:first-child a > span:not(.app-workspace-brand-mark) { display: none; }
        .app-workspace-shell.is-spatial .app-workspace-sidebar .app-workspace-brand-mark {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: transparent;
            color: var(--foreground);
        }
        .app-workspace-shell.is-spatial .app-workspace-sidebar nav { padding: 18px 10px; }
        .app-workspace-shell.is-spatial .app-workspace-sidebar nav > div { display: none; }
        .app-workspace-shell.is-spatial .app-workspace-nav-link {
            height: 62px !important;
            flex-direction: column;
            justify-content: center !important;
            gap: 5px !important;
            margin: 0 0 9px;
            padding: 0 !important;
            color: var(--foreground);
            font-size: 10px;
        }
        .app-workspace-shell.is-spatial .app-workspace-nav-link > svg { width: 20px; height: 20px; }
        .app-workspace-shell.is-spatial .app-workspace-nav-link > span { display: block !important; font-size: 10px; line-height: 1.1; }
        .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active { background: transparent; color: var(--foreground); box-shadow: none; }
        .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active::before { display: none; }
        .app-workspace-shell.is-spatial .app-workspace-sidebar > div:last-child { border-top: 0; padding: 12px 10px 18px; }
    }

    @media (max-width: 800px) {
        .creation-new-button {
            top: 16px;
            right: 16px;
        }

        .creation-empty-workspace {
            width: calc(100% - 32px);
            padding: 72px 0 36px;
        }

        .creation-headline {
            max-width: 300px;
            font-size: 24px;
            line-height: 1.35;
        }

        .creation-empty-composer {
            margin-top: 28px;
        }

        .creation-prompt-area {
            min-height: 158px;
            grid-template-columns: 50px minmax(0, 1fr);
            gap: 12px;
            padding: 20px 16px 8px;
        }

        .creation-reference-tile {
            width: 46px;
            height: 62px;
        }

        .creation-reference-tile span {
            font-size: 9px;
        }

        .creation-prompt-editor textarea {
            min-height: 96px;
            font-size: 15px;
        }

        .creation-composer-toolbar {
            align-items: flex-end;
            padding: 8px 12px 12px;
        }

        .creation-composer-primary-tools {
            max-width: calc(100% - 46px);
            gap: 2px;
        }

        .creation-chip {
            height: 34px;
            padding: 0 9px;
        }

        .creation-model-picker.canvas-composer-model-picker {
            width: min(194px, 62vw) !important;
            height: 34px !important;
        }

        .creation-submit-button {
            width: 38px;
            height: 38px;
        }

        .creation-inspiration-strip {
            grid-template-columns: 1fr;
            gap: 8px;
            margin-top: 20px;
        }

        .creation-inspiration-strip button {
            height: 66px;
        }

        .creation-inspiration-strip img {
            width: 48px;
            height: 48px;
        }

        .creation-settings-panel {
            width: min(440px, calc(100vw - 96px));
            padding: 10px;
        }

        .creation-model-picker-menu,
        .creation-duration-panel {
            width: min(440px, calc(100vw - 96px)) !important;
        }

        .creation-settings-section + .creation-settings-section {
            margin-top: 10px;
        }

        .creation-settings-section h3,
        .creation-duration-panel h3 {
            margin-bottom: 6px;
            font-size: 11px;
        }

        .creation-segmented-grid.is-ratio {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .creation-segmented-grid {
            gap: 2px;
            padding: 2px;
        }

        .creation-segmented-grid.is-ratio button {
            min-height: 42px;
        }

        .creation-segmented-grid.is-quality,
        .creation-segmented-grid.is-quality {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .creation-segmented-grid.is-quality button {
            min-height: 40px;
        }

        .creation-segmented-grid.is-quality button small {
            display: none;
        }

        .creation-segmented-grid.is-count {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .creation-segmented-grid.is-count button {
            min-height: 36px;
        }

        .creation-duration-panel {
            padding: 14px;
        }

        .creation-duration-control {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .creation-duration-value {
            height: 50px;
        }

        .creation-thread-stage,
        .creation-thread-composer {
            width: calc(100% - 24px);
        }
    }

    @media (max-width: 800px) {
        .creation-empty-workspace {
            width: calc(100% - 16px);
            padding: 0 0 18px;
        }

        .creation-studio-composer { border-radius: 22px; }

        .creation-studio-writing-surface {
            min-height: 214px;
            grid-template-columns: 64px minmax(0, 1fr);
            gap: 14px;
            padding: 24px 18px 14px;
        }

        .creation-studio-reference { width: 58px; height: 76px; }
        .creation-studio-reference svg { width: 19px; height: 19px; }
        .creation-studio-reference span { font-size: 9px; }
        .creation-studio-editor textarea { min-height: 150px; font-size: 14px; }

        .creation-studio-dock {
            min-height: 0;
            align-items: flex-end;
            gap: 10px;
            padding: 12px 14px 14px 18px;
        }

        .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 > svg { width: 16px; height: 16px; }
        .creation-studio-submit { width: 50px; height: 50px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .creation-reference-tile,
        .creation-reference-button,
        .creation-empty-composer,
        .creation-submit-button,
        .creation-results {
            animation: none;
            transition: none;
        }
    }
    .app-workspace-surface {
        border-color: var(--workspace-border);
        background: var(--workspace-surface);
        box-shadow: 0 18px 54px color-mix(in srgb, var(--workspace-canvas) 62%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
    }

    .credit-balance-card {
        border-color: rgba(225, 185, 74, 0.3);
        background: #11100d;
        color: #f8edc5;
        box-shadow: 0 28px 78px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 228, 145, 0.16);
    }

    .credit-balance-card::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        border-radius: inherit;
        background-image:
            linear-gradient(to right, rgba(232, 193, 86, 0.055) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(232, 193, 86, 0.055) 1px, transparent 1px);
        background-size: 28px 28px;
        content: "";
        pointer-events: none;
    }

    .credit-balance-card > * {
        position: relative;
        z-index: 3;
    }

    .app-collection-card {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--workspace-surface-strong);
        transition:
            background-color var(--motion-instant) ease-out,
            border-color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out;
    }

    .app-collection-card:hover,
    .app-collection-card:focus-within {
        border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
        background: color-mix(in srgb, var(--workspace-surface-strong) 96%, var(--foreground) 4%);
        box-shadow: none;
    }

    .canvas-library-search {
        max-width: 680px;
    }

    .canvas-library-page .app-page-header {
        border-bottom: 0;
        padding-bottom: 8px;
    }

    .canvas-library-toolbar {
        min-height: 56px;
        border: 0;
        border-radius: 8px;
        background: color-mix(in srgb, var(--workspace-surface-strong) 66%, transparent);
        padding: 8px;
    }

    .canvas-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
        align-items: start;
        gap: 20px 16px;
    }

    .canvas-library-page .app-pagination-bar {
        position: static;
        margin-top: var(--space-4);
        border-color: var(--workspace-border);
        background: transparent;
        padding: var(--space-1-half) var(--space-2);
        backdrop-filter: none;
    }

    /* 画布文件是单个可点击对象，缩略图与元信息共用一个容器，避免视觉割裂。 */
    .app-canvas-project-card {
        min-width: 0;
        color: var(--foreground);
    }

    .app-canvas-project-card.is-library {
        border-color: var(--workspace-border);
        background: color-mix(in srgb, var(--workspace-surface-strong) 76%, transparent);
        content-visibility: auto;
        contain-intrinsic-size: 0 260px;
        transition:
            border-color var(--motion-instant) ease-out,
            background-color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out,
            transform var(--motion-instant) ease-out;
    }

    .app-canvas-project-card.is-library .app-canvas-project-preview {
        overflow: hidden;
        border-bottom: 1px solid var(--workspace-border);
        background: var(--workspace-surface-strong);
    }

    .app-canvas-project-card.is-library:hover,
    .app-canvas-project-card.is-library:focus-within {
        border-color: color-mix(in srgb, var(--foreground) 24%, var(--workspace-border));
        background: color-mix(in srgb, var(--workspace-surface-strong) 90%, transparent);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
        transform: translateY(-1px);
    }

    .app-canvas-project-card.is-library.is-selected {
        border-color: var(--workspace-accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 22%, transparent);
    }

    .app-canvas-project-card.is-library .app-canvas-project-body {
        min-height: 82px;
    }

    .app-canvas-project-card.is-recent .app-canvas-project-preview {
        overflow: hidden;
        border: 1px solid var(--workspace-border);
        border-radius: 8px;
        background: var(--workspace-surface-strong);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition:
            border-color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out;
    }

    .app-canvas-project-card.is-recent:hover .app-canvas-project-preview,
    .app-canvas-project-card.is-recent:focus-within .app-canvas-project-preview {
        border-color: color-mix(in srgb, var(--foreground) 24%, var(--workspace-border));
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    .app-canvas-project-checkbox {
        accent-color: var(--workspace-accent);
    }

    .app-canvas-selection-toolbar {
        border-color: color-mix(in srgb, var(--workspace-accent) 24%, var(--workspace-border));
        background: var(--workspace-accent-soft);
        color: color-mix(in srgb, var(--workspace-accent) 48%, var(--foreground));
    }

    .dark .app-canvas-project-card.is-library:hover,
    .dark .app-canvas-project-card.is-library:focus-within {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
    }

    .dark .app-canvas-project-card.is-recent .app-canvas-project-preview {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    }

    .dark .app-canvas-project-card.is-recent:hover .app-canvas-project-preview,
    .dark .app-canvas-project-card.is-recent:focus-within .app-canvas-project-preview {
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    }

    @media (max-width: 639px) {
        .canvas-library-search {
            max-width: none;
        }

        .canvas-library-grid {
            grid-template-columns: 1fr;
        }
    }

    .app-data-table .ant-table-pagination {
        position: sticky;
        z-index: 10;
        bottom: 0;
        margin: 0 !important;
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--background) 94%, transparent);
        padding: 12px 16px;
        backdrop-filter: blur(12px);
    }

    .app-list-search {
        width: 100%;
    }

    @media (min-width: 640px) {
        .app-list-search {
            width: 20rem !important;
            flex: 0 0 20rem;
        }
    }

    .app-table-surface {
        box-shadow: 0 14px 38px color-mix(in srgb, var(--foreground) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 72%, transparent);
    }

    .app-data-table .ant-table-container,
    .app-data-table .ant-table-content,
    .app-data-table .ant-table-body {
        min-width: 0;
    }

    .app-data-table .ant-table-thead > tr > th,
    .app-data-table .ant-table-tbody > tr > td {
        overflow: hidden;
    }

    .app-data-table .ant-table-thead > tr > th {
        white-space: nowrap;
    }

    .task-table-surface {
        border-radius: 6px;
        box-shadow: none;
    }

    .task-table-surface .ant-table-thead > tr > th {
        height: 38px;
        padding: 8px 12px !important;
        background: color-mix(in srgb, var(--foreground) 4%, var(--background)) !important;
        color: color-mix(in srgb, var(--foreground) 52%, transparent) !important;
        font-size: 11px;
        font-weight: 500;
    }

    .task-table-surface .ant-table-tbody > tr > td {
        height: 72px;
        padding: 10px 12px !important;
        background: var(--background);
        transition: background-color var(--motion-instant) ease-out;
    }

    .task-table-surface .ant-table-tbody > tr:hover > td {
        background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
    }

    .task-media-preview-modal .ant-modal-body {
        display: grid;
        min-height: 240px;
        place-items: center;
        padding: 0 !important;
        background: #000;
    }

    @media (max-width: 767px) {
        .task-table-surface .ant-table-content table {
            width: 100% !important;
            min-width: 100% !important;
        }

        .task-table-surface .ant-table-tbody > tr > td {
            height: auto;
            padding: 12px !important;
        }
    }

    .wallet-ledger-table .ant-table-cell:nth-last-child(-n + 2) {
        white-space: nowrap;
    }

    .app-pagination-bar .ant-pagination {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-1) 0;
    }

    :where(.ant-modal-content, .ant-drawer-content) {
        border: 1px solid var(--border);
        box-shadow: 0 28px 84px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(24px);
    }

    :where(.ant-modal) .ant-modal-content {
        padding: 0;
        overflow: hidden;
    }

    :where(.ant-modal) .ant-modal-header {
        margin: 0;
        border-bottom: 1px solid var(--border);
        padding: 13px 16px 12px;
    }

    :where(.ant-modal) .ant-modal-body {
        padding: 14px 16px;
    }

    :where(.ant-modal) .ant-modal-footer {
        margin: 0;
        border-top: 1px solid var(--border);
        padding: 10px 16px;
    }

    :where(.ant-modal) .ant-modal-close {
        top: 9px;
        right: 10px;
    }

    .ant-drawer .ant-drawer-header {
        min-height: 48px;
        padding: 10px 14px;
    }

    .ant-drawer .ant-drawer-body {
        padding: 14px;
    }

    .dark :where(.ant-modal-content, .ant-drawer-content) {
        box-shadow: 0 32px 96px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    :where(.ant-modal-mask, .ant-drawer-mask) {
        backdrop-filter: blur(5px);
    }

    /* 画风选择器自身就是完整工作区表面，移除 AntD 外壳避免形成双层厚边。 */
    .canvas-style-picker-modal .ant-modal-container,
    .canvas-style-detail-modal .ant-modal-container {
        overflow: hidden;
        border: var(--stroke-1) solid var(--border) !important;
        border-radius: var(--r-2xl) !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .canvas-style-picker-modal .ant-modal-body,
    .canvas-style-detail-modal .ant-modal-body {
        padding: 0 !important;
    }

    .canvas-style-picker-modal .ant-modal-close,
    .canvas-style-detail-modal .ant-modal-close {
        top: var(--space-2);
        right: var(--space-2);
        color: var(--cn-text);
        background: color-mix(in srgb, var(--cn-spatial-elevated) 84%, transparent);
        backdrop-filter: blur(var(--space-2));
    }

    .canvas-toolbar-settings-modal {
        max-width: calc(100vw - var(--space-8));
    }

    .canvas-toolbar-settings-modal .ant-modal-container,
    .canvas-toolbar-settings-modal .ant-modal-content {
        overflow: hidden;
        border: 0 !important;
        border-radius: var(--r-xl);
        padding: 0 !important;
        background: var(--cn-spatial-elevated) !important;
    }

    .canvas-toolbar-settings-modal .ant-modal-content {
        box-shadow: var(--workspace-overlay-shadow) !important;
    }

    .canvas-toolbar-settings-modal .ant-modal-container {
        box-shadow: none !important;
    }

    .canvas-toolbar-settings-modal .ant-modal-body {
        padding: 0 !important;
    }

    .canvas-toolbar-settings-card {
        background: var(--cn-spatial-surface);
        transition: background-color var(--motion-dur-fast) var(--motion-ease-out), opacity var(--motion-dur-fast) var(--motion-ease-out);
    }

    .canvas-toolbar-settings-card:hover {
        background: color-mix(in srgb, var(--cn-spatial-surface) 72%, var(--cn-spatial-elevated));
    }

    .canvas-toolbar-settings-card.is-hidden {
        background: color-mix(in srgb, var(--cn-spatial-surface) 52%, transparent);
    }

    .canvas-toolbar-settings-card.is-hidden .canvas-toolbar-settings-card-content {
        opacity: var(--opa-subtle);
    }

    .canvas-toolbar-settings-card.is-dragging {
        opacity: var(--opa-muted);
    }

    :where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner) {
        border: 1px solid var(--border);
        box-shadow: 0 20px 56px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(22px);
    }

    .dark :where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner) {
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    :where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-content) {
        transition:
            border-color var(--motion-instant) ease-out,
            background-color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out !important;
    }

    .auth-card-tabs .ant-tabs-nav {
        margin: 0;
    }

    .auth-card-tabs .ant-tabs-nav::before {
        display: none;
    }

    .auth-card-tabs .ant-tabs-nav-list {
        width: 100%;
    }

    .auth-card-tabs .ant-tabs-tab {
        position: relative;
        flex: 1;
        justify-content: center;
        margin: 0 !important;
        padding: 8px 0 12px !important;
        color: rgba(255, 255, 255, 0.38);
        font-weight: 500;
        transition: color var(--motion-instant) ease-out;
    }

    .auth-card-tabs .ant-tabs-tab:hover {
        color: rgba(255, 255, 255, 0.68);
    }

    .auth-card-tabs .ant-tabs-tab-active::after {
        position: absolute;
        bottom: 3px;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.82);
        content: "";
        transform: translateX(-50%);
    }

    .auth-card-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
        color: rgba(255, 255, 255, 0.94) !important;
        text-shadow: none;
    }

    .auth-card-tabs .ant-tabs-tab-btn:focus-visible {
        border-radius: 3px;
        outline: 1px solid rgba(255, 255, 255, 0.48);
        outline-offset: 3px;
    }

    .auth-card-tabs .ant-tabs-ink-bar {
        display: none;
    }

    .auth-card-dark :where(.ant-input, .ant-input-affix-wrapper) {
        border-color: transparent !important;
        background: rgba(255, 255, 255, 0.055) !important;
        box-shadow: none !important;
        transition: border-color var(--motion-instant) ease-out, background-color var(--motion-instant) ease-out !important;
    }

    .auth-card-dark .ant-input-affix-wrapper > .ant-input {
        background: transparent !important;
    }

    .auth-card-dark :where(.ant-input:hover, .ant-input-affix-wrapper:hover) {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

    .auth-card-dark :where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused) {
        border-color: transparent !important;
        background: rgba(255, 255, 255, 0.085) !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .auth-card-dark .ant-input-affix-wrapper-focused .ant-input-prefix svg {
        color: rgba(255, 255, 255, 0.62) !important;
    }

    .auth-card-dark input:-webkit-autofill,
    .auth-card-dark input:-webkit-autofill:hover,
    .auth-card-dark input:-webkit-autofill:focus {
        box-shadow: 0 0 0 1000px #17181c inset !important;
        -webkit-text-fill-color: #f5f5f5 !important;
        caret-color: #f5f5f5;
    }

    :where(.ant-modal, .ant-drawer, .ant-select-dropdown, .ant-dropdown, .ant-popover) {
        overscroll-behavior: contain;
    }

    @media (prefers-reduced-motion: reduce) {
        .app-collection-card {
            transition: none;
        }
        .app-collection-card:hover,
        .app-collection-card:focus-within {
            transform: none;
        }

        :where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-content) {
            transition: none !important;
        }
    }

    .ant-table-wrapper .ant-table-thead > tr > th {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.015em;
    }

    .ant-form-item-label > label {
        font-weight: 500;
        letter-spacing: 0.01em;
    }

    .aceternity-floating-dock {
        isolation: isolate;
        transform-origin: bottom center;
        box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .aceternity-dock-command {
        border-color: color-mix(in srgb, currentColor 11%, transparent);
        background: var(--dock-command-bg);
        color: inherit;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 15px rgba(15, 23, 42, 0.08);
        transition:
            border-color var(--motion-instant) ease-out,
            background-color var(--motion-instant) ease-out,
            color var(--motion-instant) ease-out,
            box-shadow var(--motion-instant) ease-out;
    }

    .aceternity-dock-command > span:first-child svg {
        width: 100%;
        height: 100%;
        stroke-width: 1.8;
    }

    .aceternity-dock-command:hover:not(:disabled) {
        border-color: color-mix(in srgb, currentColor 20%, transparent);
        background: var(--dock-command-hover);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(15, 23, 42, 0.14);
    }

    .aceternity-dock-command.is-labeled {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .aceternity-dock-command.is-labeled:hover:not(:disabled) {
        border-color: transparent;
        background: var(--dock-command-hover);
        box-shadow: none;
    }

    .aceternity-dock-command.is-labeled.is-active {
        border-color: transparent;
        box-shadow: none;
    }

    .aceternity-dock-command.is-active {
        border-color: color-mix(in srgb, var(--dock-command-active) 28%, transparent);
        background: var(--dock-command-active);
        color: var(--dock-command-active-text);
        box-shadow: 0 12px 30px color-mix(in srgb, var(--dock-command-active) 22%, transparent);
    }

    .aceternity-dock-command.is-active > span:first-child,
    .aceternity-dock-command.is-active > span:first-child svg {
        color: var(--dock-command-active-text);
        stroke: currentColor;
        opacity: 1;
    }

    .aceternity-dock-command.is-quiet {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .aceternity-dock-command.is-quiet:hover:not(:disabled),
    .aceternity-dock-command.is-quiet.is-active {
        border-color: transparent;
        background: var(--dock-command-hover);
        box-shadow: none;
    }

    .aceternity-dock-command.is-danger {
        color: var(--dock-command-danger);
    }

    .aceternity-dock-danger-group {
        background: color-mix(in srgb, var(--dock-command-danger) 8%, transparent);
    }

    .aceternity-dock-command:focus-visible {
        box-shadow: 0 0 0 2px var(--dock-command-bg), 0 0 0 4px var(--dock-command-active);
    }

    .aceternity-dock-command:disabled {
        cursor: not-allowed;
        opacity: 0.3;
        box-shadow: none;
    }

    .canvas-image-tool-checkbox .ant-checkbox-inner {
        border-color: color-mix(in srgb, var(--tool-accent) 44%, transparent) !important;
        background: transparent !important;
    }

    .canvas-image-tool-checkbox.ant-checkbox-wrapper-checked .ant-checkbox-inner,
    .canvas-image-tool-checkbox .ant-checkbox-checked .ant-checkbox-inner {
        border-color: var(--tool-accent) !important;
        background: var(--tool-accent) !important;
    }

    .aceternity-dock-separator {
        background: color-mix(in srgb, currentColor 13%, transparent);
    }

    .aceternity-dock-tooltip {
        border-color: var(--dock-tooltip-border);
        background: var(--dock-tooltip-bg);
        color: inherit;
    }

    .aceternity-floating-panel {
        transform-origin: bottom center;
        box-shadow: 0 30px 90px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .app-workspace-canvas {
        background: var(--workspace-content);
    }

    .dark .app-workspace-canvas {
        background: var(--workspace-content);
    }

    .app-spatial-surface {
        border: 1px solid rgba(17, 24, 39, 0.1);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(22px);
    }

    .dark .app-spatial-surface {
        border-color: rgba(255, 255, 255, 0.11);
        background: rgba(28, 28, 30, 0.88);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .app-spatial-interactive {
        transition:
            transform var(--motion-state) cubic-bezier(0.16, 1, 0.3, 1),
            border-color var(--motion-state) ease-out,
            box-shadow var(--motion-state) ease-out;
    }

    .app-spatial-interactive:hover {
        transform: translateY(-2px);
        border-color: rgba(79, 110, 232, 0.34);
        box-shadow: 0 24px 68px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(79, 110, 232, 0.08);
    }

    .dark .app-spatial-interactive:hover {
        border-color: rgba(130, 144, 240, 0.42);
        box-shadow: 0 28px 76px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(130, 144, 240, 0.1);
    }

    @media (prefers-reduced-motion: reduce) {
        .app-spatial-interactive {
            transition: none;
        }

        .app-spatial-interactive:hover {
            transform: none;
        }
    }

    .aceternity-zoom-range {
        appearance: none;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 12%, transparent);
        cursor: ew-resize;
        outline: none;
    }

    .aceternity-zoom-range::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        appearance: none;
        border: 2px solid currentColor;
        border-radius: 999px;
        background: var(--background);
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.22);
    }

    .aceternity-zoom-range:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
    }

    .aceternity-comet-perspective[data-comet-active="true"] {
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .aceternity-comet-card {
        transform-origin: center center;
    }

    .aceternity-comet-card[data-comet-active="true"] {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        will-change: transform;
    }

    .aceternity-comet-card::after {
        position: absolute;
        z-index: 2;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.08));
        content: "";
        pointer-events: none;
    }

    .aceternity-drop-grid {
        background-image:
            linear-gradient(color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1px);
        background-position: center;
        background-size: 34px 34px;
        mask-image: radial-gradient(circle at center, black 12%, transparent 72%);
    }

    .ai-title-aurora {
        background: linear-gradient(90deg, #111827 0%, #111827 36%, #6b7280 54%, #111827 72%, #111827 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: ai-title-aurora 7s var(--motion-ease-in-out) infinite;
    }

    .dark .ai-title-aurora {
        background: linear-gradient(90deg, #fafaf9 0%, #fafaf9 36%, #a8a29e 54%, #fafaf9 72%, #fafaf9 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
    }

    @keyframes ai-title-aurora {
        0%,
        100% {
            background-position: 0% 50%;
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
        }
        50% {
            background-position: 100% 50%;
            filter: drop-shadow(0 12px 28px rgba(28, 25, 23, 0.08));
        }
    }

    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .prompt-filter-tag.ant-tag-checkable {
        margin: 0;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 5px 10px;
        color: #57534e;
        font-size: 14px;
        line-height: 1;
        transition:
            background 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            color 0.15s ease;
    }

    .prompt-filter-tag.ant-tag-checkable:hover {
        background: rgba(28, 25, 23, 0.06);
        color: #1c1917;
    }

    .prompt-filter-tag.ant-tag-checkable.is-active,
    .prompt-filter-tag.ant-tag-checkable-checked {
        background: #111111;
        border-color: #111111;
        color: #ffffff;
        font-weight: 600;
    }

    .dark .prompt-filter-tag.ant-tag-checkable {
        color: #e7e5e4;
    }

    .dark .prompt-filter-tag.ant-tag-checkable:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .dark .prompt-filter-tag.ant-tag-checkable.is-active,
    .dark .prompt-filter-tag.ant-tag-checkable-checked {
        background: rgba(250, 250, 249, 0.96);
        border-color: rgba(255, 255, 255, 0.88);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.18),
            0 6px 18px rgba(0, 0, 0, 0.22);
        color: #0c0a09 !important;
        font-weight: 700;
    }

    .thin-scrollbar {
        scrollbar-color: rgba(120, 113, 108, 0.45) transparent;
        scrollbar-width: thin;
    }

    .script-column-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: 12px;
    }

    .script-column-picker .ant-checkbox-wrapper {
        margin-inline-start: 0;
        color: inherit;
    }

    .script-column-picker .ant-checkbox-inner {
        width: 15px;
        height: 15px;
        border-radius: 4px;
        border-color: rgba(120, 113, 108, 0.58);
        background: transparent;
    }

    .script-column-picker .ant-checkbox-checked .ant-checkbox-inner {
        border-color: #5b6ee1;
        background: #5b6ee1;
    }

    .script-column-picker .ant-checkbox-checked .ant-checkbox-inner::after {
        width: 4px;
        height: 7px;
    }

    .script-column-picker .ant-checkbox-wrapper:hover .ant-checkbox-inner,
    .script-column-picker .ant-checkbox:hover .ant-checkbox-inner {
        border-color: #7485ee;
    }

    .thin-scrollbar::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }

    .thin-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(120, 113, 108, 0.45);
        border-radius: 999px;
    }

    .storyboard-scrollbar {
        overscroll-behavior: contain;
        scrollbar-color: rgba(148, 163, 184, 0.72) rgba(120, 113, 108, 0.14);
        scrollbar-gutter: stable;
        scrollbar-width: auto;
    }

    .storyboard-scrollbar::-webkit-scrollbar {
        width: 12px;
    }

    .storyboard-scrollbar::-webkit-scrollbar-track {
        background: rgba(120, 113, 108, 0.14);
        border-left: 1px solid rgba(120, 113, 108, 0.18);
    }

    .storyboard-scrollbar::-webkit-scrollbar-thumb {
        min-height: 40px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.72);
        background-clip: content-box;
    }

    .storyboard-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(186, 196, 210, 0.9);
        background-clip: content-box;
    }

    .hover-scrollbar {
        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }

    .hover-scrollbar:hover {
        scrollbar-color: rgba(120, 113, 108, 0.5) transparent;
    }

    .hover-scrollbar::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .hover-scrollbar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 999px;
    }

    .hover-scrollbar:hover::-webkit-scrollbar-track {
        background: rgba(120, 113, 108, 0.12);
        border-radius: 999px;
    }

    .hover-scrollbar:hover::-webkit-scrollbar-thumb {
        background: rgba(120, 113, 108, 0.5);
    }

    .hover-scrollbar-hint {
        position: relative;
    }

    .hover-scrollbar-hint::after {
        background: rgba(120, 113, 108, 0.42);
        border-radius: 999px;
        bottom: 4px;
        content: "";
        height: 3px;
        left: 12px;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 12px;
        transition: opacity 0.18s ease;
    }

    .hover-scrollbar-hint:hover::after {
        opacity: 1;
    }

    .canvas-control-select.ant-select .ant-select-content,
    .canvas-control-number.ant-input-number {
        border-color: rgba(120, 113, 108, 0.32) !important;
        box-shadow: none !important;
    }

    .canvas-compact-control.canvas-control-select.ant-select {
        height: 100%;
    }

    .canvas-compact-control.canvas-control-select.ant-select .ant-select-content,
    .canvas-compact-control.canvas-control-number.ant-input-number {
        height: 100% !important;
    }

    .canvas-compact-control.canvas-control-select.ant-select .ant-select-content > :first-child {
        align-items: center;
        display: flex;
    }

    .canvas-compact-control.canvas-control-select.ant-select .ant-select-content,
    .canvas-compact-control.canvas-control-select.ant-select .ant-select-input,
    .canvas-compact-control.canvas-control-number.ant-input-number .ant-input-number-input {
        height: 100% !important;
        line-height: 1 !important;
    }

    .canvas-composer-icon.ant-btn {
        flex: 0 0 32px;
        width: 32px;
    }

    .canvas-composer-tools {
        container-type: inline-size;
    }

    .canvas-composer-mode-button {
        width: 32px;
    }

    .canvas-composer-tools .canvas-composer-mode-button span,
    .canvas-composer-tools .canvas-model-picker-label > span:nth-child(n + 2),
    .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
        display: none;
    }

    .canvas-composer-tools .canvas-composer-model-picker {
        width: 32px;
        min-width: 32px;
    }

    .canvas-composer-tools .canvas-composer-model-picker {
        padding-inline: 7px !important;
    }

    .canvas-composer-tools .canvas-model-picker-label {
        min-width: 0;
    }

    .canvas-composer-model-picker {
        align-items: center;
        appearance: none;
        background: color-mix(in srgb, var(--workspace-surface-strong) 94%, var(--workspace-accent) 6%);
        border: 0;
        border-radius: 9px;
        color: var(--foreground);
        cursor: pointer;
        display: flex;
        font: inherit;
        gap: 8px;
        height: 32px;
        justify-content: space-between;
        line-height: 1;
        max-width: 100%;
        min-width: 0;
        outline: none !important;
        padding: 0 9px;
        text-align: left;
        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
    }

    .canvas-composer-model-picker:hover {
        background: color-mix(in srgb, var(--workspace-surface-strong) 88%, var(--workspace-accent) 12%);
    }

    .canvas-composer-model-picker:focus,
    .canvas-composer-model-picker:focus-visible,
    .canvas-composer-model-picker[aria-expanded="true"] {
        background: color-mix(in srgb, var(--workspace-surface-strong) 84%, var(--workspace-accent) 16%);
        box-shadow: none !important;
        outline: none !important;
    }

    .canvas-model-picker-label {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .canvas-model-picker-trigger-icon {
        align-items: center;
        border-radius: 6px;
        display: inline-flex;
        flex: 0 0 22px;
        height: 22px;
        justify-content: center;
        width: 22px;
    }

    .canvas-model-picker-chevron {
        color: color-mix(in srgb, var(--foreground) 52%, transparent);
        flex: 0 0 14px;
        height: 14px;
        transition: transform var(--motion-instant) ease-out;
        width: 14px;
    }

    .canvas-model-picker-chevron.is-open {
        transform: rotate(180deg);
    }

    .canvas-model-picker-popover,
    .canvas-preset-picker-popover {
        filter: none !important;
    }

    .canvas-composer-popover-surface {
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--workspace-surface-strong) !important;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
        overflow: hidden;
        padding: 0 !important;
        backdrop-filter: blur(22px) saturate(118%);
        -webkit-backdrop-filter: blur(22px) saturate(118%);
    }

    .dark .canvas-composer-popover-surface {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34) !important;
    }

    .canvas-composer-popover-content {
        padding: 0 !important;
    }

    .canvas-model-picker-menu {
        max-height: min(420px, calc(100vh - 32px));
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4px;
    }

    .canvas-model-picker-group + .canvas-model-picker-group {
        border-top: 1px solid var(--workspace-border);
        margin-top: 5px;
        padding-top: 5px;
    }

    .canvas-model-picker-group-label {
        align-items: center;
        display: flex;
        font-size: 10px;
        font-weight: 600;
        gap: 6px;
        letter-spacing: 0.02em;
        min-width: 0;
        padding: 5px 7px 4px;
    }

    .canvas-model-picker-option {
        align-items: center;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        display: flex;
        gap: 8px;
        max-width: 100%;
        min-height: 44px;
        min-width: 0;
        outline: none;
        overflow: hidden;
        padding: 6px 7px;
        text-align: left;
        transition: background-color var(--motion-instant) ease-out;
        width: 100%;
    }

    .canvas-model-picker-option:hover {
        background: color-mix(in srgb, var(--workspace-accent) 9%, transparent) !important;
    }

    .canvas-model-picker-option:focus-visible {
        background: color-mix(in srgb, var(--workspace-accent) 13%, transparent) !important;
        outline: none;
    }

    .canvas-model-picker-option > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .canvas-model-picker-option-check {
        flex: 0 0 14px;
        height: 14px;
        width: 14px;
    }

    .canvas-model-picker-empty {
        font-size: 11px;
        padding: 22px 12px;
        text-align: center;
    }

    .canvas-preset-picker-trigger:focus-visible,
    .canvas-preset-picker-trigger[aria-expanded="true"] {
        background: color-mix(in srgb, var(--workspace-accent) 18%, transparent) !important;
        outline: none;
    }

    .canvas-preset-picker-trigger {
        cursor: pointer;
        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out, transform 90ms ease-out;
    }

    .canvas-preset-picker-trigger:active {
        transform: scale(0.97);
    }

    .canvas-generation-settings-trigger.ant-btn {
        background: color-mix(in srgb, var(--workspace-surface-strong) 94%, var(--workspace-accent) 6%) !important;
        border: 0 !important;
        color: var(--foreground) !important;
        cursor: pointer;
        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out, transform 90ms ease-out;
    }

    .canvas-generation-settings-trigger.ant-btn:hover,
    .canvas-generation-settings-trigger.ant-btn:focus-visible,
    .canvas-generation-settings-trigger.ant-btn[aria-expanded="true"] {
        background: color-mix(in srgb, var(--workspace-surface-strong) 86%, var(--workspace-accent) 14%) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .canvas-generation-settings-trigger.ant-btn .ant-btn-icon {
        color: color-mix(in srgb, var(--workspace-accent) 72%, var(--foreground));
    }

    html:not(.dark) .canvas-composer-model-picker,
    html:not(.dark) .canvas-generation-settings-trigger.ant-btn {
        background: rgba(15, 23, 42, 0.045) !important;
        color: #1f2937 !important;
    }

    html:not(.dark) .canvas-composer-model-picker:hover,
    html:not(.dark) .canvas-composer-model-picker[aria-expanded="true"],
    html:not(.dark) .canvas-generation-settings-trigger.ant-btn:hover,
    html:not(.dark) .canvas-generation-settings-trigger.ant-btn:focus-visible,
    html:not(.dark) .canvas-generation-settings-trigger.ant-btn[aria-expanded="true"] {
        background: rgba(15, 23, 42, 0.075) !important;
    }

    html:not(.dark) .canvas-generation-cost-badge {
        background: rgba(79, 110, 232, 0.09) !important;
        color: #4f6ee8 !important;
    }

    .canvas-preset-picker-menu {
        padding: 6px;
    }

    .canvas-preset-picker-search.ant-input-affix-wrapper {
        border: 0 !important;
        border-radius: 8px;
        background: color-mix(in srgb, var(--workspace-accent) 7%, transparent) !important;
        box-shadow: none !important;
        color: color-mix(in srgb, var(--foreground) 66%, transparent);
        height: 32px;
        padding-inline: 9px;
    }

    .canvas-preset-picker-search.ant-input-affix-wrapper:focus,
    .canvas-preset-picker-search.ant-input-affix-wrapper:focus-within {
        background: color-mix(in srgb, var(--workspace-accent) 11%, transparent) !important;
        box-shadow: none !important;
    }

    .canvas-preset-picker-option {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 7px;
        cursor: pointer;
        display: flex;
        gap: 9px;
        min-height: 48px;
        outline: none;
        padding: 6px 8px;
        text-align: left;
        transition: background-color var(--motion-instant) ease-out;
        width: 100%;
    }

    .canvas-preset-picker-option:hover,
    .canvas-preset-picker-option:focus-visible {
        background: color-mix(in srgb, var(--workspace-accent) 9%, transparent);
        outline: none;
    }

    .canvas-preset-picker-option-icon {
        align-items: center;
        border-radius: 7px;
        display: inline-flex;
        flex: 0 0 28px;
        height: 28px;
        justify-content: center;
        width: 28px;
    }

    body.app-spatial-overlays .canvas-composer-popover-surface {
        border: 0 !important;
        background: var(--workspace-surface-strong) !important;
    }

    html:not(.dark) body.app-spatial-overlays .canvas-composer-popover-surface {
        background: #ffffff !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13) !important;
    }

    .dark body.app-spatial-overlays .canvas-composer-popover-surface {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
    }

    .agent-text-model-select .ant-select-content {
        padding-inline: 6px !important;
    }

    .agent-text-model-select .ant-select-content {
        min-width: 0;
    }

    @container (min-width: 440px) {
        .canvas-composer-mode-button {
            padding-inline: 8px;
            width: auto;
        }

        .canvas-composer-tools .canvas-composer-mode-button span {
            display: inline;
            font-size: 12px;
            line-height: 1;
        }

        .canvas-composer-icon.ant-btn {
            flex: 0 1 auto;
            max-width: 170px;
            width: auto !important;
        }

        .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
            display: inline-flex;
            min-width: 0;
        }

        .canvas-composer-tools .canvas-composer-model-picker {
            width: auto;
            min-width: 9rem;
        }

        .canvas-composer-tools .canvas-composer-model-picker {
            padding-inline: 10px !important;
        }

        .canvas-composer-tools .canvas-model-picker-label > span:nth-child(n + 2) {
            display: inline-flex;
        }
    }

    .canvas-control-select.ant-select-focused .ant-select-content,
    .canvas-control-number.ant-input-number-focused {
        border-color: #a8a29e !important;
    }

    .dark .canvas-control-select.ant-select .ant-select-content,
    .dark .canvas-control-number.ant-input-number {
        border-color: rgba(214, 211, 209, 0.2) !important;
    }

    .dark .canvas-control-select.ant-select-focused .ant-select-content,
    .dark .canvas-control-number.ant-input-number-focused {
        border-color: #78716c !important;
    }

    .canvas-image-settings-popover .ant-popover-inner {
        border-radius: 18px;
        box-shadow: 0 18px 54px rgba(28, 25, 23, 0.16);
        padding: 18px;
    }

    .canvas-image-settings-popover .ant-popover-inner-content {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }

    .canvas-image-settings-popover .ant-segmented {
        border-radius: 999px;
        padding: 3px;
    }

    .canvas-image-settings-popover .ant-segmented-item {
        border-radius: 999px;
    }

    .dark .canvas-image-settings-popover .ant-popover-inner {
        box-shadow: 0 18px 54px rgba(0, 0, 0, 0.45);
    }

    .canvas-floating-dock,
    .canvas-floating-panel,
    .canvas-node-toolbar {
        animation: canvas-panel-in var(--motion-dur-fast-calc) var(--motion-ease-out) both;
    }

    /* 覆盖工具栏与节点之间的视觉留白，避免鼠标途中被相邻节点抢走悬浮状态。 */
    .canvas-node-toolbar::after {
        position: absolute;
        top: 100%;
        right: -8px;
        left: -8px;
        height: 14px;
        content: "";
    }

    .canvas-floating-dock {
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 10px 26px rgba(15, 23, 42, 0.08);
    }

    .dark .canvas-floating-dock {
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.28),
            0 12px 28px rgba(0, 0, 0, 0.3);
    }

    .canvas-floating-panel {
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.06),
            0 14px 34px rgba(15, 23, 42, 0.1);
    }

    @media (max-width: 1024px) {
        .aceternity-mode-switch {
            top: 56px;
        }
    }

    .dark .canvas-floating-panel {
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.28),
            0 14px 34px rgba(0, 0, 0, 0.34);
    }

    .canvas-tool-button,
    .canvas-menu-item,
    .canvas-node-tool-button {
        transform: translate3d(0, 0, 0) scale(1);
        transition:
            background-color 140ms ease,
            color 140ms ease,
            opacity 140ms ease,
            box-shadow 140ms ease,
            transform 160ms var(--motion-ease-out);
    }

    .canvas-connection-handle {
        touch-action: none;
    }

    @media (pointer: coarse) {
        .canvas-connection-handle {
            width: 44px !important;
            height: 44px !important;
        }
    }

    .canvas-tool-button:not(:disabled):hover,
    .canvas-node-tool-button:not(:disabled):hover {
        transform: translate3d(0, -1px, 0) scale(1.04);
    }

    .canvas-tool-button:not(:disabled):active,
    .canvas-node-tool-button:not(:disabled):active,
    .canvas-menu-item:not(:disabled):active {
        transform: translate3d(0, 0, 0) scale(0.94);
    }

    .canvas-menu-item:not(:disabled):hover {
        transform: translate3d(4px, 0, 0);
    }

    .canvas-menu-item:not(:disabled):hover .canvas-menu-item-icon,
    .canvas-node-tool-button:not(:disabled):hover .canvas-node-tool-icon {
        transform: scale(1.08);
    }

    .canvas-menu-item-icon,
    .canvas-node-tool-icon {
        transition: transform 160ms var(--motion-ease-out);
    }

    .canvas-node-shell {
        transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            background-color 160ms ease;
    }

    .canvas-node-shell.aceternity-comet-card {
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
    }

    .canvas-node-shell.aceternity-comet-card:hover {
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), 0 6px 20px rgba(15, 23, 42, 0.1);
    }

    .dark .canvas-node-shell.aceternity-comet-card {
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .dark .canvas-node-shell.aceternity-comet-card:hover {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52), 0 8px 26px rgba(0, 0, 0, 0.36);
    }

    [data-canvas-viewport-interacting="true"] .canvas-node-shell,
    [data-canvas-viewport-interacting="true"] .aceternity-comet-card {
        transition: none !important;
    }

    /* 静止期用最终倍率重新排版 DOM，避免 Windows Chromium 复用交互期的低分辨率合成纹理。 */
    .canvas-world-layer {
        transform: translate(var(--canvas-live-x), var(--canvas-live-y)) scale(var(--canvas-live-scale-ratio));
        transform-origin: 0 0;
    }

    .canvas-world-raster-layer {
        zoom: var(--canvas-committed-scale);
    }

    [data-canvas-viewport-interacting="true"] .canvas-world-layer {
        transform: translate3d(var(--canvas-live-x), var(--canvas-live-y), 0) scale(var(--canvas-live-scale-ratio));
        will-change: transform;
    }

    [data-canvas-viewport-interacting="true"] .canvas-node-shell.aceternity-comet-card,
    [data-canvas-viewport-interacting="true"] .canvas-node-shell.aceternity-comet-card:hover {
        box-shadow: none !important;
    }

    [data-canvas-viewport-interacting="true"] :where(.canvas-node-shell-generating::before, .canvas-connection-flow, .canvas-connection-draft) {
        animation: none !important;
    }

    /* 节点状态徽章 success 淡出动画（对应 #97 决策2）*/
    @keyframes canvas-status-success-fade {
        0% { opacity: 1; transform: scale(1); }
        70% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.9); }
    }

    /* 任务进度条 shimmer 扫描动画（对应 #98 决策3）*/
    @keyframes canvas-task-progress-shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    .canvas-task-progress-shimmer {
        animation: canvas-task-progress-shimmer 1.4s linear infinite;
    }

    .canvas-node-shell-generating::before {
        position: absolute;
        z-index: 45;
        inset: -1.5px;
        padding: 1px;
        border-radius: 19px;
        background: linear-gradient(110deg, rgba(91, 110, 225, 0.66), rgba(96, 165, 250, 0.62), rgba(167, 139, 250, 0.58), rgba(244, 114, 182, 0.54), rgba(250, 204, 21, 0.5), rgba(52, 211, 153, 0.58), rgba(91, 110, 225, 0.66));
        background-size: 300% 100%;
        content: "";
        filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.2));
        pointer-events: none;
        animation: canvas-generation-border-flow 2.4s var(--motion-ease-linear) infinite;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .dark .canvas-node-shell-generating::before {
        filter: drop-shadow(0 0 4px rgba(91, 110, 225, 0.22));
    }

    .canvas-connection-flow {
        animation: canvas-connection-flow 1.25s var(--motion-ease-linear) infinite;
    }

    .canvas-connection-draft {
        animation: canvas-connection-flow 0.9s var(--motion-ease-linear) infinite;
    }

    @keyframes canvas-panel-in {
        from {
            opacity: 0;
            filter: saturate(0.92);
        }

        to {
            opacity: 1;
            filter: saturate(1);
        }
    }

    @keyframes canvas-connection-flow {
        to {
            stroke-dashoffset: -44;
        }
    }

    @keyframes canvas-generation-border-flow {
        to {
            background-position: 300% 0;
        }
    }

    .canvas-node-info-modal .ant-modal-header {
        padding-right: 0;
    }

    .canvas-node-info-modal .ant-modal-title {
        line-height: 1;
    }

    .canvas-node-info-modal .ant-modal-close {
        top: 21px;
    }

    @keyframes canvas-batch-child-in {
        from {
            opacity: 0;
            transform: translate(var(--batch-from-x), var(--batch-from-y)) rotate(var(--batch-from-rotate)) scale(0.72);
        }

        72% {
            opacity: 1;
            transform: translate(0, 0) rotate(-1deg) scale(1.015);
        }

        to {
            opacity: 1;
            transform: translate(0, 0) rotate(0) scale(1);
        }
    }

    @keyframes canvas-batch-child-out {
        from {
            opacity: 1;
            transform: translate(0, 0) rotate(0) scale(1);
        }

        to {
            opacity: 0;
            transform: translate(var(--batch-from-x), var(--batch-from-y)) rotate(var(--batch-from-rotate)) scale(0.72);
        }
    }
}

@keyframes workspace-state-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-state { animation: none; }
    :where(.ant-btn:not(:disabled)):active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aceternity-comet-card,
    .aceternity-dock-command,
    .aceternity-floating-panel,
    .canvas-menu-item {
        transform: none !important;
        transition-duration: 0.01ms !important;
    }

    .canvas-node-shell-generating::before,
    .canvas-connection-flow,
    .canvas-connection-draft {
        animation: none;
    }

    .canvas-node-shell-generating::before {
        background-position: 50% 0;
    }
}

/* 章节编辑区用清晰边界区分工具栏与正文，同时保留连续写作空间。 */
.project-workbench-page .project-chapter-editor-wrap {
    min-height: 100%;
}

.project-chapter-editor {
    min-height: 100%;
    width: 100%;
    padding: 24px 28px 48px;
    color: var(--foreground);
    font-size: 15px;
    line-height: 1.8;
}

.project-chapter-editor p {
    margin: 0 0 1em;
}

.project-chapter-editor h1,
.project-chapter-editor h2,
.project-chapter-editor h3 {
    margin: 1.35em 0 0.55em;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.project-chapter-editor h1 { font-size: 1.55em; }
.project-chapter-editor h2 { font-size: 1.3em; }
.project-chapter-editor h3 { font-size: 1.12em; }

.project-chapter-editor ul,
.project-chapter-editor ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.project-chapter-editor blockquote {
    margin: 1.2em 0;
    border-left: 2px solid color-mix(in srgb, var(--workspace-accent) 55%, transparent);
    padding-left: 1em;
    color: color-mix(in srgb, var(--foreground) 66%, transparent);
}

.project-chapter-editor p.is-editor-empty:first-child::before {
    float: left;
    height: 0;
    color: color-mix(in srgb, var(--foreground) 34%, transparent);
    content: attr(data-placeholder);
    pointer-events: none;
}

@media (max-width: 1023px) {
    .project-workbench-page .project-chapter-editor-wrap {
        min-height: 100%;
    }

    .project-chapter-editor {
        min-height: 420px;
        padding: 18px 20px 36px;
        font-size: 15px;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html[data-theme-switching="true"] :where(.canvas-node-shell, .aceternity-comet-card, .aceternity-floating-panel, .canvas-connection-flow, .canvas-connection-draft) {
    animation: none !important;
    transition: none !important;
}

/* 创作页是工作舞台，不使用管理台的边框、卡片和分段控件语言。 */
.creation-home {
    --creation-accent: var(--workspace-accent);
    --creation-bg: var(--workspace-page);
    --creation-surface: #191b20;
    --creation-surface-raised: #22252b;
    --creation-text: #f2f3f4;
    --creation-muted: #838991;
    --creation-faint: #555b64;
    min-width: 0;
    background: var(--creation-bg);
    color: var(--creation-text);
}

.creation-scrollbar {
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
}

.creation-scrollbar::-webkit-scrollbar { width: 10px; }
.creation-scrollbar::-webkit-scrollbar-track { background: transparent; }
.creation-scrollbar::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    background-clip: content-box;
}
.creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }

html:not(.dark) .creation-scrollbar {
    scrollbar-color: rgba(35, 41, 49, .24) transparent;
}
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(35, 41, 49, .24); }
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(35, 41, 49, .38); }

html:not(.dark) .creation-home {
    --creation-bg: var(--workspace-page);
    --creation-surface: #ffffff;
    --creation-surface-raised: #f0f1ee;
    --creation-text: #1d2024;
    --creation-muted: #7c838b;
    --creation-faint: #b5babf;
}

.creation-empty-workspace {
    width: min(1000px, calc(100% - 56px));
    min-height: 100%;
    margin: 0 auto;
    padding: 0 0 5vh;
}

.creation-empty-composer {
    width: 100%;
    margin: 0;
    animation: creation-composer-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
}

.creation-chat-composer {
    width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--creation-surface);
    box-shadow: 0 20px 58px rgba(0, 0, 0, .15);
}

html:not(.dark) .creation-chat-composer {
    box-shadow: 0 18px 48px rgba(30, 34, 38, .08);
}

.creation-chat-composer:focus-within { box-shadow: 0 20px 58px rgba(0, 0, 0, .18); }

.creation-chat-writing-surface,
.creation-chat-composer.is-empty .creation-chat-writing-surface {
    display: grid;
    min-height: 88px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px 6px;
}

.creation-chat-reference,
.creation-chat-reference.is-paper {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    align-self: start;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--creation-muted);
    box-shadow: none;
    transform: none;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
}

.creation-chat-reference svg,
.creation-chat-reference.is-paper svg { width: 17px; height: 17px; }
.creation-chat-reference.is-paper span { display: none; }
.creation-chat-reference:hover:not(:disabled),
.creation-chat-reference.is-paper:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: var(--creation-text); transform: translateY(-1px); }
html:not(.dark) .creation-chat-reference:hover:not(:disabled) { background: rgba(28, 32, 36, .06); }

.creation-chat-editor textarea {
    display: block;
    width: 100%;
    min-height: 60px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--creation-text);
    font-size: 14px;
    line-height: 1.65;
}

.creation-chat-editor textarea::placeholder { color: var(--creation-muted); opacity: .72; }

.creation-chat-mention-container { min-height: 76px; }
.creation-chat-mention-editor {
    display: block;
    width: 100%;
    min-height: 76px;
    max-height: 220px;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--creation-text);
    font-size: 14px;
    line-height: 1.65;
    resize: none;
}

.creation-chat-mention-editor:empty::before { color: var(--creation-muted); opacity: .72; }
.creation-chat-mention-editor[aria-disabled="true"],
.creation-chat-mention-editor:disabled { cursor: wait; opacity: .55; }

.creation-chat-dock {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 10px 10px 14px;
}

.creation-chat-controls {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.creation-chat-control,
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
    display: inline-flex;
    height: 30px !important;
    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;
    font-size: 11px;
    font-weight: 500;
    box-shadow: none !important;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms 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;
    transform: none;
}

.creation-chat-control.is-mode {
    background: rgba(255, 255, 255, .075) !important;
    color: var(--creation-text) !important;
}

.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-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-control.is-mode,
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; }

.creation-chat-submit {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #f3f4f5;
    color: #1b1d21;
    cursor: pointer;
    transition: transform 140ms var(--motion-ease-out), background-color 140ms ease;
}

.creation-chat-submit:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.creation-chat-submit:disabled { background: #292d34; color: #606771; cursor: not-allowed; }
.creation-chat-submit.is-stopping { background: #d06060; color: #fff; }
html:not(.dark) .creation-chat-submit { background: #202328; color: #fff; }
html:not(.dark) .creation-chat-submit:hover:not(:disabled) { background: #2d3139; }

.creation-control-popover-surface,
.creation-model-picker-surface {
    overflow: hidden;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(30, 32, 37, .92) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3) !important;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.creation-control-popover-content,
.creation-model-picker-surface .ant-popover-inner-content { padding: 0 !important; }

.creation-parameter-menu { width: 274px; padding: 10px 12px 12px; }
.creation-parameter-section { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 8px; }
.creation-parameter-section + .creation-parameter-section { margin-top: 12px; }
.creation-parameter-section h3 { margin: 7px 0 0; color: var(--creation-muted); font-size: 10px; font-weight: 500; }
.creation-choice-grid { display: grid; gap: 2px; }
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creation-choice-grid.is-quality, .creation-choice-grid.is-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.creation-choice-grid button {
    display: flex;
    min-width: 0;
    min-height: 36px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #989ea7;
    font-size: 10px;
    line-height: 1;
    transition: color 120ms ease, background-color 120ms ease;
}

.creation-choice-grid button:hover { background: rgba(255, 255, 255, .06); color: #e9ebed; }
.creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .11); color: #fff; }
.creation-choice-grid button small { display: none; }
.creation-choice-grid.is-resolution button, .creation-choice-grid.is-count button { min-height: 30px; font-size: 11px; }
.creation-choice-grid .creation-ratio-preview { width: 20px; height: 13px; }
.creation-choice-grid .creation-ratio-preview > span { border-width: 1px; border-radius: 2px; }

.creation-duration-menu { display: flex; width: 212px; align-items: center; gap: 10px; padding: 10px 12px; }
.creation-duration-menu > div:first-child { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; color: var(--creation-muted); font-size: 10px; }
.creation-duration-menu strong { color: #f1f2f3; font-size: 12px; font-weight: 600; }
.creation-range-wrap { min-width: 0; flex: 1; }
.creation-range-wrap input { height: 14px; }
.creation-range-wrap input::-webkit-slider-runnable-track { height: 3px; }
.creation-range-wrap input::-webkit-slider-thumb { width: 6px; height: 14px; margin-top: -5px; border-radius: 4px; }
.creation-range-wrap input::-moz-range-track { height: 3px; }
.creation-range-wrap input::-moz-range-thumb { width: 6px; height: 14px; border-radius: 4px; }
.creation-range-labels { margin-top: 2px; color: var(--creation-faint); font-size: 9px; }

.creation-mode-picker-menu { width: 158px; padding: 5px; color: #f0f1f2; }
.creation-mode-picker-menu button { display: flex; width: 100%; height: 34px; align-items: center; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 0 7px; font-size: 11px; text-align: left; }
.creation-mode-picker-menu button:hover, .creation-mode-picker-menu button.is-selected { background: rgba(255, 255, 255, .075); }
.creation-mode-picker-menu button > svg { width: 13px; height: 13px; margin-left: auto; }
.creation-menu-icon { display: grid; width: 19px; height: 19px; place-items: center; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .07); }
.creation-menu-icon svg { width: 12px; height: 12px; }

.creation-model-picker-menu { width: min(332px, calc(100vw - 24px)) !important; max-height: min(420px, calc(100vh - 24px)); padding: 7px !important; background: transparent !important; color: #f0f1f2 !important; }
.creation-model-picker-heading { display: flex; align-items: center; gap: 6px; padding: 4px 7px 7px; color: #8e949d; font-size: 10px; }
.creation-model-picker-heading strong { color: #e6e8eb; font-weight: 500; }
.creation-model-picker-menu .canvas-model-picker-group-label { padding: 6px 7px 5px; font-size: 10px; }
.creation-model-picker-menu .canvas-model-picker-option { min-height: 43px; border-radius: 6px; padding: 5px 7px; }
.creation-model-picker-menu .canvas-model-picker-option:hover { transform: none; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child { gap: 8px; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { width: 26px; height: 26px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .07) !important; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:first-child { font-size: 11px; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:nth-child(2) { margin-top: 3px; font-size: 9px; }

.creation-thread-stage { width: min(820px, calc(100% - 48px)); padding: 44px 0 22px; }
.creation-thread-composer { width: min(820px, calc(100% - 48px)); padding: 8px 0 16px; }
.creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 70px; padding: 12px 14px 4px; }
.creation-chat-composer.is-thread .creation-chat-editor textarea { min-height: 48px; }
.creation-user-message { border-radius: 13px 13px 4px 13px; background: rgba(255, 255, 255, .07); box-shadow: none; }
.creation-assistant-message { margin-bottom: 36px; }
.creation-message-mark { width: 28px; height: 28px; border-radius: 8px; background: #f0f1f2; color: #1c1e22; }

.creation-new-button { border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: none; }
.creation-new-button:hover { border: 0; background: rgba(255, 255, 255, .12); }

html:not(.dark) .creation-control-popover-surface,
html:not(.dark) .creation-model-picker-surface { background: rgba(255, 255, 255, .94) !important; box-shadow: 0 16px 38px rgba(28, 32, 37, .12) !important; }
html:not(.dark) .creation-parameter-section h3,
html:not(.dark) .creation-duration-menu > div:first-child,
html:not(.dark) .creation-mode-picker-menu,
html:not(.dark) .creation-model-picker-menu { color: #727980 !important; }
html:not(.dark) .creation-choice-grid button { color: #737a82; }
html:not(.dark) .creation-choice-grid button:hover { background: rgba(28, 32, 37, .06); color: #25292e; }
html:not(.dark) .creation-choice-grid button.is-selected { background: rgba(28, 32, 37, .09); color: #20242a; }
html:not(.dark) .creation-duration-menu strong,
html:not(.dark) .creation-model-picker-heading strong { color: #20242a; }
html:not(.dark) .creation-mode-picker-menu button:hover,
html:not(.dark) .creation-mode-picker-menu button.is-selected,
html:not(.dark) .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { background: rgba(28, 32, 37, .06) !important; }

@keyframes creation-composer-arrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
    .creation-empty-workspace { width: calc(100% - 28px); padding-bottom: 8vh; }
    .creation-chat-writing-surface, .creation-chat-composer.is-empty .creation-chat-writing-surface { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 14px 12px 5px; }
    .creation-chat-dock { align-items: flex-end; padding: 4px 7px 8px 8px; }
    .creation-chat-controls { max-width: calc(100% - 38px); }
    .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-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
    .creation-parameter-menu { width: min(274px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
    .creation-empty-composer,
    .creation-chat-reference,
    .creation-chat-submit { animation: none; transition: none; }
}

/* 创作入口与空间导航在同一块画布上，避免视觉断层。 */

.director-sequencer {
    position: relative;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--fs-caption);
}

.director-viewport-dock {
    position: absolute;
    z-index: var(--z-toolbar);
    bottom: var(--director-dock-bottom);
    left: 50%;
    display: flex;
    max-width: calc(100% - var(--space-6));
    align-items: center;
    gap: var(--space-half);
    padding: var(--space-1);
    overflow-x: auto;
    border: var(--stroke-1) solid var(--director-sequencer-border);
    border-radius: var(--r-lg);
    background: var(--director-dock-surface);
    box-shadow: var(--shadow-xl);
    color: var(--director-dock-fg);
    transform: translateX(-50%);
    backdrop-filter: blur(var(--space-4));
}

.director-viewport-dock-button {
    display: grid;
    width: var(--director-dock-button-size);
    height: var(--director-dock-button-size);
    flex: 0 0 var(--director-dock-button-size);
    place-items: center;
    border-radius: var(--r-md);
    transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out), transform var(--motion-dur-fast) var(--motion-ease-out);
}

.director-viewport-dock-button > svg {
    width: var(--space-4);
    height: var(--space-4);
}

.director-viewport-dock-button:hover {
    background: var(--director-control-hover);
    color: var(--director-dock-fg-strong);
}

.director-viewport-dock-button:active {
    transform: translateY(1px);
}

.director-viewport-dock-button.is-active {
    background: var(--director-dock-active-surface);
    color: var(--director-dock-fg-strong);
    box-shadow: inset 0 0 0 var(--stroke-1) var(--director-sequencer-border);
}

.director-viewport-dock-divider {
    width: var(--stroke-1);
    height: var(--space-5);
    flex: 0 0 var(--stroke-1);
    margin: 0 var(--space-half);
    background: var(--director-sequencer-border);
}

.director-actor-colors {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-1-half);
}

.director-actor-color {
    width: var(--director-color-swatch-size);
    height: var(--director-color-swatch-size);
    flex: 0 0 var(--director-color-swatch-size);
    border: var(--stroke-1) solid var(--director-sequencer-border);
    border-radius: var(--r-full);
    box-shadow: inset 0 0 0 var(--stroke-1) var(--director-swatch-inset);
}

.director-actor-color.is-active {
    outline: var(--stroke-2) solid var(--workspace-accent);
    outline-offset: var(--space-half);
}

.director-pose-section {
    display: grid;
    gap: var(--space-2);
}

.director-inspector-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cn-muted);
    font-size: var(--fs-label);
}

.director-inspector-section-title > span:last-child {
    color: var(--workspace-accent);
}

.director-pose-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
}

.director-pose-button {
    min-width: 0;
    height: var(--director-pose-button-height);
    padding: 0 var(--space-1);
    overflow: hidden;
    border: var(--stroke-1) solid var(--cn-stroke);
    border-radius: var(--r-sm);
    color: var(--cn-muted);
    font-size: var(--fs-tiny);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color var(--motion-dur-fast) var(--motion-ease-out), background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
}

.director-pose-button:hover {
    border-color: var(--workspace-accent);
    color: var(--cn-text);
}

.director-pose-button.is-active {
    border-color: var(--workspace-accent);
    background: var(--workspace-accent-soft);
    color: var(--workspace-accent);
}

@media (prefers-reduced-motion: reduce) {
    .director-viewport-dock-button,
    .director-pose-button {
        transition: none;
    }
}

.director-sequencer-resizer {
    position: absolute;
    z-index: 2;
    inset: -4px 0 auto;
    height: 8px;
    cursor: ns-resize;
}

.director-sequencer-resizer::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 44px;
    height: 2px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.28);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--motion-dur-fast) var(--motion-ease-out);
}

.director-sequencer:hover .director-sequencer-resizer::after,
.director-sequencer-resizer:focus-visible::after {
    opacity: 1;
}

.director-sequencer-body {
    position: relative;
    height: calc(100% - 40px);
    min-height: 0;
}

.director-sequencer-grid {
    position: relative;
    display: grid;
    min-width: calc(var(--director-sequencer-base-width) * var(--director-sequencer-track-scale, 1));
    grid-template-columns: var(--director-sequencer-label-width) minmax(640px, 1fr);
}

.director-sequencer-global-playhead {
    position: absolute;
    z-index: 1;
    top: 28px;
    bottom: 0;
    right: 0;
    left: var(--director-sequencer-label-width);
    pointer-events: none;
}

.director-sequencer-global-playhead > i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #f0b36a;
}

.director-sequencer-label,
.director-sequencer-track {
    min-width: 0;
    height: var(--director-sequencer-row-height);
    border-bottom: 1px solid var(--director-sequencer-border);
}

.director-sequencer-row {
    display: contents;
}

.director-sequencer-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: var(--director-sequencer-label-width);
    padding: 0 var(--space-3);
    color: rgba(255, 255, 255, 0.64);
    text-align: left;
    white-space: nowrap;
    transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
}

.director-sequencer-label:hover,
.director-sequencer-row.is-selected > .director-sequencer-label {
    background: rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.96);
}

.director-sequencer-label.is-indent {
    padding-left: var(--space-6);
    color: rgba(255, 255, 255, 0.46);
}

.director-sequencer-ruler-label,
.director-sequencer-ruler {
    height: 28px;
    border-bottom-color: var(--director-sequencer-border);
    background: var(--director-sequencer-surface-raised);
}

.director-sequencer-ruler-label {
    padding-left: var(--space-3);
    color: rgba(255, 255, 255, 0.42);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.director-sequencer-ruler {
    position: relative;
    cursor: ew-resize;
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--director-sequencer-grid) 20%);
}

.director-sequencer-tick {
    position: absolute;
    top: var(--space-2);
    color: rgba(255, 255, 255, 0.38);
    font-size: var(--fs-micro);
    transform: translateX(-50%);
}

.director-sequencer-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #f0b36a;
    pointer-events: none;
}

.director-sequencer-track {
    position: relative;
    overflow: hidden;
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--director-sequencer-grid) 20%);
}

.director-sequencer-track-content {
    position: absolute;
    inset: 0;
}

.director-sequencer-key {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--r-xs);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
    transform: translate(-50%, -50%) rotate(45deg);
}

.director-sequencer-clip {
    position: absolute;
    top: 5px;
    bottom: 5px;
    display: flex;
    align-items: center;
    min-width: 30px;
    padding: 0 var(--space-2);
    overflow: hidden;
    border: 1px solid;
    border-radius: var(--r-xs);
    font-size: var(--fs-micro);
}

.director-sequencer-transport,
.director-sequencer-icon,
.director-sequencer-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--space-8);
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, 0.62);
    transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
}

.director-sequencer-transport,
.director-sequencer-icon {
    width: var(--space-8);
}

.director-sequencer-tool {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--fs-micro);
}

.director-sequencer-shot-select {
    width: var(--director-sequencer-shot-select-width);
    height: var(--space-8);
    padding: 0 var(--space-2);
    overflow: hidden;
    border: 1px solid var(--director-sequencer-border);
    border-radius: var(--r-sm);
    background: var(--director-sequencer-surface-raised);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-micro);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.director-sequencer-transport:hover,
.director-sequencer-icon:hover,
.director-sequencer-tool:hover,
.director-sequencer-icon.is-active,
.director-sequencer-tool.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.app-workspace-shell.is-creation-workspace,
.app-workspace-shell.is-creation-workspace .app-workspace-sidebar,
.app-workspace-shell.is-creation-workspace .app-workspace-stage {
    background: var(--workspace-page) !important;
}

html:not(.dark) .app-workspace-shell.is-creation-workspace,
html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-sidebar,
html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-stage {
    background: var(--workspace-page) !important;
}

.creation-empty-workspace {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.creation-chat-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 24px;
    text-align: center;
    animation: creation-intro-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
}

.creation-chat-intro p {
    margin: 0 0 7px;
    color: var(--creation-faint);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
}

.creation-chat-intro h1 {
    margin: 0;
    color: var(--creation-text);
    font-size: 24px;
    font-weight: 580;
    line-height: 1.3;
    letter-spacing: 0;
}

.creation-intro-signal {
    position: absolute;
    top: -12px;
    left: calc(50% - 50px);
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227, 231, 235, .88), transparent);
    animation: creation-intro-signal 2.8s var(--motion-ease-out) infinite;
}

.creation-chat-reference.is-paper {
    display: flex;
    width: 58px;
    height: 74px;
    flex-direction: column;
    align-items: center;
    align-self: start;
    justify-content: center;
    gap: 7px;
    border: 1px dashed rgba(255, 255, 255, .09);
    border-radius: 4px;
    background: #242730;
    color: #9097a1;
    transform: rotate(-7deg);
}

.creation-chat-reference.is-paper svg { width: 21px; height: 21px; }
.creation-chat-reference.is-paper span { display: block; font-size: 10px; font-weight: 520; line-height: 1; white-space: nowrap; }
.creation-chat-reference.is-paper:hover:not(:disabled) { background: #2b2e37; color: #f1f3f5; transform: rotate(-4deg) translateY(-2px); }
.creation-chat-reference.is-paper:active:not(:disabled) { transform: rotate(-4deg) translateY(0) scale(.97); }
.creation-chat-reference.is-paper:focus-visible { outline: 2px solid color-mix(in srgb, #83d6ec 68%, transparent); outline-offset: 3px; }
.creation-chat-composer .creation-chat-writing-surface { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }

.creation-custom-value {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 0 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .045);
    color: var(--creation-faint);
    font-size: 10px;
}

.creation-custom-value span { flex: 0 0 auto; }
.creation-custom-value input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #edf0f2;
    font-size: 11px;
    line-height: 1;
}

.creation-custom-value input::-webkit-inner-spin-button,
.creation-custom-value input::-webkit-outer-spin-button { margin: 0; }
.creation-custom-value em { font-style: normal; }

.creation-duration-menu {
    display: grid;
    width: 224px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 7px 8px;
    padding: 10px 11px;
}

.creation-duration-heading { display: flex; flex-direction: column; gap: 2px; color: var(--creation-muted); font-size: 10px; }
.creation-duration-heading strong { color: #f1f2f3; font-size: 12px; font-weight: 600; }
.creation-duration-choices { display: flex; min-width: 0; align-items: center; gap: 2px; }
.creation-duration-choices button { height: 26px; min-width: 0; flex: 1; border: 0; border-radius: 5px; background: transparent; color: #969ca5; font-size: 10px; transition: color 120ms ease, background-color 120ms ease; }
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .06); color: #eef0f2; }
.creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .11); color: #fff; }
.creation-custom-value.is-duration { grid-column: 2; width: 100%; margin-top: 0; }

html:not(.dark) .creation-chat-reference.is-paper { border-color: rgba(28, 32, 37, .10); background: #e9ebed; color: #626b75; }
html:not(.dark) .creation-chat-reference.is-paper:hover:not(:disabled) { background: #dfe3e6; color: #1c2025; }
html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055); }
html:not(.dark) .creation-custom-value input,
html:not(.dark) .creation-duration-heading strong { color: #23272c; }
html:not(.dark) .creation-duration-choices button:hover { background: rgba(28, 32, 37, .06); color: #23272c; }
html:not(.dark) .creation-duration-choices button.is-selected { background: rgba(28, 32, 37, .10); color: #23272c; }

@keyframes creation-intro-arrive {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes creation-intro-signal {
    0%, 100% { opacity: .3; transform: translateX(-14px) scaleX(.55); }
    50% { opacity: 1; transform: translateX(14px) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .creation-chat-intro,
    .creation-intro-signal { animation: none; }
}

/* 创作对话使用同一套 Composer 规格；空态仅改变位置，不改变组件密度。 */
.creation-home .creation-chat-composer { border-radius: 18px; }
.creation-home .creation-chat-writing-surface,
.creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
.creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface {
    min-height: 140px;
    padding: 18px 20px 8px;
}

.creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
.creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
.creation-home .creation-chat-editor textarea,
.creation-home .creation-chat-composer.is-thread .creation-chat-editor textarea,
.creation-home .creation-chat-mention-container,
.creation-home .creation-chat-mention-editor { min-height: 76px; }
.creation-home .creation-chat-dock { min-height: 48px; padding: 4px 12px 12px 16px; }

.creation-home .creation-chat-control,
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker,
.creation-home .creation-chat-control.is-mode {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--creation-muted) !important;
}

.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;
    transform: none;
}

.creation-home .creation-chat-control.is-mode { color: var(--creation-text) !important; }
.creation-home .creation-chat-control.is-mode > svg:first-child { color: #81d3e6; }
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; }

.creation-chat-intro h1 span {
    display: inline-block;
    margin: 0 4px;
    color: #83d6ec;
    font-size: 1.25em;
    font-weight: 760;
    text-shadow: 0 0 24px rgba(89, 202, 232, .24);
    animation: creation-intro-emphasis 2.6s var(--motion-ease-out) infinite;
}

.creation-thread-stage,
.creation-thread-composer { width: min(1068px, calc(100% - 56px)); }
.creation-thread-stage { padding: 52px 0 24px; }
.creation-thread-composer { padding: 10px 0 18px; }

.creation-results { width: 100%; }
.creation-user-message {
    max-width: min(62%, 640px);
    margin: 0 0 42px auto;
    border-radius: 14px 14px 5px 14px;
    background: rgba(255, 255, 255, .07);
    padding: 11px 14px;
    color: var(--creation-text);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.creation-user-message-references { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.creation-user-message-reference { display: inline-flex; min-width: 0; max-width: 180px; height: 25px; align-items: center; gap: 5px; border-radius: 6px; background: rgba(255, 255, 255, .075); padding: 0 7px; color: var(--creation-muted); font-size: 10px; line-height: 1; }
.creation-user-message-reference img { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; }
.creation-user-message-reference svg { width: 12px; height: 12px; flex: 0 0 auto; }
.creation-user-message-reference span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37, .07); }
.creation-user-message-attachments button { position: relative; width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden; border: 0; border-radius: 7px; background: transparent; padding: 0; }
.creation-user-message-attachments button:focus-visible { outline: 2px solid var(--creation-text); outline-offset: 2px; }
.creation-user-message-attachments button > span { position: absolute; right: 3px; bottom: 3px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 5px; background: rgba(0, 0, 0, .68); color: #fff; opacity: 0; transition: opacity 140ms ease; }
.creation-user-message-attachments button:hover > span,
.creation-user-message-attachments button:focus-visible > span { opacity: 1; }
.creation-user-message-attachments button > span svg { width: 10px; height: 10px; }

.creation-assistant-message { max-width: 900px; margin: 0 0 48px; }
.creation-message-heading { gap: 7px; color: var(--creation-faint); font-size: 11px; }
.creation-message-mark { width: 26px; height: 26px; border-radius: 8px; background: #eff1f3; color: #202329; }
.creation-message-mark svg { width: 15px; height: 15px; }
.creation-message-model { max-width: 300px; color: var(--creation-faint); }
.creation-message-state { border: 0; border-radius: 5px; background: rgba(255, 255, 255, .06); padding: 2px 5px; color: var(--creation-muted); font-size: 10px; }

.creation-message-content { max-width: 800px; padding: 14px 0 0 34px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
.creation-message-content p { margin: 0 0 12px; }
.creation-message-content p:last-child { margin-bottom: 0; }
.creation-message-content h1, .creation-message-content h2, .creation-message-content h3 { margin: 20px 0 8px; color: var(--creation-text); font-weight: 650; line-height: 1.35; }
.creation-message-content h1 { font-size: 21px; }
.creation-message-content h2 { font-size: 18px; }
.creation-message-content h3 { font-size: 16px; }
.creation-message-content ul, .creation-message-content ol { margin: 10px 0; padding-left: 22px; }
.creation-message-content li + li { margin-top: 4px; }
.creation-message-content blockquote { margin: 14px 0; border-left: 2px solid rgba(131, 214, 236, .65); padding: 2px 0 2px 12px; color: var(--creation-muted); }
.creation-message-content code { border-radius: 4px; background: rgba(255, 255, 255, .08); padding: 2px 5px; font-size: .88em; }
.creation-message-content pre { overflow-x: auto; border-radius: 8px; background: #181b20; padding: 12px 14px; }
.creation-message-content pre code { background: transparent; padding: 0; }
.creation-message-content a { color: #83d6ec; text-decoration: none; }

.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: #ee8585; font-size: 13px; line-height: 1.6; }
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgba(226, 96, 96, .12); color: #ef8b8b; padding: 0 8px; font-size: 11px; }
.creation-message-error button:hover { background: rgba(226, 96, 96, .2); }

.creation-media-pending,
.creation-media-empty { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin: 14px 0 0 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .055); padding: 0 12px; color: var(--creation-muted); font-size: 12px; }
.creation-media-empty button { border: 0; background: transparent; color: #83d6ec; font-size: 12px; }
.creation-media-result { max-width: 860px; padding: 14px 0 0 34px; }
.creation-image-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.creation-image-result { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 9px; background: #181a1e; }
.creation-image-result img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--motion-ease-out); }
.creation-image-result span, .creation-video-result > span { position: absolute; right: 8px; bottom: 8px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: rgba(13, 14, 16, .62); color: #fff; opacity: 0; transition: opacity 160ms ease; backdrop-filter: blur(8px); }
.creation-image-result span svg, .creation-video-result span svg { width: 14px; height: 14px; }
.creation-image-result:hover img { transform: scale(1.025); }
.creation-image-result:hover span, .creation-video-result:hover > span { opacity: 1; }

.creation-video-result { position: relative; display: block; width: min(760px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 10px; background: #121316; }
.creation-video-result > span { display: inline-flex; width: auto; height: 30px; align-items: center; gap: 5px; padding: 0 9px; font-size: 11px; }
.creation-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; color: var(--creation-faint); font-size: 11px; }
.creation-media-actions > span { margin-right: 2px; }
.creation-media-actions a, .creation-media-actions button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--creation-muted); font-size: 11px; text-decoration: none; }
.creation-media-actions a:hover, .creation-media-actions button:hover { color: var(--creation-text); }
.creation-media-actions svg { width: 13px; height: 13px; }

.creation-media-preview-modal .ant-modal-content { overflow: hidden; border: 0; border-radius: 12px; background: #111215; padding: 0; }
.creation-media-preview-modal .ant-modal-close { color: #fff; }
.creation-media-preview-image, .creation-media-preview-video { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.creation-media-preview-video { width: 100%; background: #050505; }

html:not(.dark) .creation-user-message { background: rgba(28, 32, 37, .07); }
html:not(.dark) .creation-message-content pre,
html:not(.dark) .creation-video-result,
html:not(.dark) .creation-media-preview-modal .ant-modal-content { background: #1f2227; }
html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .08); }

@keyframes creation-intro-emphasis {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    45% { transform: translateY(-1px); filter: brightness(1.14); }
}

@media (max-width: 800px) {
    .creation-home .creation-chat-writing-surface,
    .creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
    .creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 96px; padding: 14px 13px 6px; }
    .creation-home .creation-chat-editor textarea,
    .creation-home .creation-chat-composer.is-thread .creation-chat-editor textarea,
    .creation-home .creation-chat-mention-container,
    .creation-home .creation-chat-mention-editor { min-height: 64px; }
    .creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
    .creation-thread-stage { padding-top: 36px; }
    .creation-user-message { max-width: 78%; }
    .creation-assistant-message { max-width: 100%; }
    .creation-message-content, .creation-message-error, .creation-media-result { padding-left: 0; }
    .creation-media-pending, .creation-media-empty { margin-left: 0; }
    .creation-image-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .creation-chat-intro h1 span { animation: none; }
}

/* 旧创作规则位于 utilities 层且使用 !important；必须在同层覆盖。 */
@layer utilities {
    .creation-home .creation-chat-control,
    .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker,
    .creation-home .creation-chat-control.is-mode {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--creation-muted) !important;
    }

    .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;
        transform: none;
    }

    .creation-home .creation-chat-control.is-mode { color: var(--creation-text) !important; }

    .creation-parameter-menu {
        width: 304px;
        padding: 13px 14px 14px;
    }

    .creation-parameter-section {
        display: block;
        margin: 0;
    }

    .creation-parameter-section + .creation-parameter-section { margin-top: 16px; }
    .creation-parameter-section h3 {
        margin: 0 0 8px;
        color: var(--creation-muted);
        font-size: 11px;
        font-weight: 500;
    }

    .creation-parameter-content { min-width: 0; }
    .creation-choice-grid { gap: 3px; }
    .creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .creation-choice-grid button {
        min-height: 46px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #959ca5;
        font-size: 10px;
    }

    .creation-choice-grid button:hover { background: rgba(255, 255, 255, .055); color: #edf0f2; }
    .creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
    .creation-choice-grid .creation-ratio-preview { width: 25px; height: 17px; }
    .creation-choice-grid .creation-ratio-preview > span { border-width: 1px; }
    .creation-choice-grid.is-resolution button,
    .creation-choice-grid.is-count button { min-height: 32px; font-size: 11px; }

    .creation-custom-trigger {
        display: inline-flex;
        height: 27px;
        align-items: center;
        border: 0;
        background: transparent;
        color: #8bcfe0;
        padding: 0 4px;
        font-size: 10px;
    }

    .creation-custom-trigger:hover { color: #c4edf6; }
    .creation-custom-value {
        display: flex;
        width: 100%;
        height: 32px;
        align-items: center;
        gap: 7px;
        margin-top: 7px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .055);
        padding: 0 9px;
        color: var(--creation-muted);
        font-size: 11px;
    }

    .creation-custom-value input {
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #edf0f2;
        font-size: 12px;
    }

    .creation-duration-menu {
        display: block;
        width: 270px;
        padding: 13px 14px 14px;
    }

    .creation-duration-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 8px;
        color: var(--creation-muted);
        font-size: 11px;
    }

    .creation-duration-heading strong { color: #f1f3f4; font-size: 13px; font-weight: 600; }
    .creation-duration-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
    .creation-duration-choices button {
        height: 30px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #969ca5;
        font-size: 11px;
    }

    .creation-duration-choices button:hover { background: rgba(255, 255, 255, .055); color: #eff1f2; }
    .creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
    .creation-custom-value.is-duration { width: 100%; grid-column: auto; margin-top: 7px; }
}

/* 解除旧版参数侧栏 Grid，Popover 必须是纵向信息分组。 */
.creation-parameter-section {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.creation-parameter-section h3 { margin: 0 0 8px !important; }
.creation-parameter-content { min-width: 0; }
.creation-choice-grid { gap: 3px; }
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.creation-choice-grid button { min-height: 46px; }
.creation-choice-grid.is-resolution button,
.creation-choice-grid.is-count button { min-height: 32px; }
.creation-duration-menu { display: block !important; width: 270px !important; grid-template-columns: none !important; padding: 13px 14px 14px !important; }
.creation-duration-heading { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.creation-duration-choices { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.creation-duration-choices button { height: 30px; }
.creation-custom-value.is-duration { grid-column: auto !important; width: 100%; margin-top: 7px; }

/* 创作参数是即时选择，不使用后台式表单控件。 */
.creation-control-popover-surface {
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(25, 27, 31, .96) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .34) !important;
}

.creation-parameter-menu {
    width: 288px !important;
    padding: 12px !important;
}

.creation-parameter-section,
.creation-parameter-section + .creation-parameter-section {
    display: block !important;
    margin: 0 !important;
}

.creation-parameter-section + .creation-parameter-section { margin-top: 14px !important; }

.creation-parameter-section > header,
.creation-duration-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    min-height: 18px;
    margin: 0 2px 7px !important;
}

.creation-parameter-section h3,
.creation-duration-heading > span {
    margin: 0 !important;
    color: var(--creation-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.creation-parameter-section > header > span,
.creation-duration-heading strong {
    color: var(--creation-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.creation-choice-grid { gap: 3px !important; }
.creation-choice-grid.is-ratio { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.creation-choice-grid.is-ratio button,
.creation-choice-grid.is-resolution button,
.creation-choice-grid.is-quality button,
.creation-choice-grid.is-count button {
    display: flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--creation-muted) !important;
    font-size: 11px !important;
    font-weight: 500;
    transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out), transform 160ms var(--motion-ease-out) !important;
}

.creation-choice-grid button:hover {
    background: rgba(255, 255, 255, .055) !important;
    color: var(--creation-text) !important;
}

.creation-choice-grid button.is-selected {
    background: rgba(255, 255, 255, .105) !important;
    color: var(--creation-text) !important;
}

.creation-choice-grid .creation-ratio-preview {
    display: grid;
    width: 18px !important;
    height: 14px !important;
    flex: 0 0 18px;
    place-items: center;
}

.creation-choice-grid .creation-ratio-preview > span {
    max-width: 18px;
    max-height: 14px;
    border-width: 1px !important;
    border-radius: 2px !important;
}

.creation-custom-trigger {
    display: inline-flex !important;
    height: 26px !important;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0 2px;
    border: 0 !important;
    border-radius: 4px;
    background: transparent !important;
    padding: 0 2px !important;
    color: var(--creation-muted) !important;
    font-size: 10px !important;
    transition: color 160ms var(--motion-ease-out), background-color 160ms var(--motion-ease-out) !important;
}

.creation-custom-trigger svg { width: 12px; height: 12px; }
.creation-custom-trigger:hover { background: rgba(255, 255, 255, .05) !important; color: var(--creation-text) !important; }

.creation-custom-value,
.creation-custom-value.is-duration {
    display: flex !important;
    width: 100% !important;
    height: 32px !important;
    align-items: center;
    gap: 8px;
    margin-top: 5px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .055) !important;
    padding: 0 9px !important;
    color: var(--creation-muted) !important;
    font-size: 10px !important;
}

.creation-custom-value input {
    min-width: 0;
    flex: 1;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--creation-text) !important;
    font-size: 11px !important;
}

.creation-custom-value em { color: var(--creation-muted); font-size: 11px; font-style: normal; }

.creation-duration-custom-field {
    display: inline-flex;
    min-width: 64px;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-left: auto;
    color: var(--creation-text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.creation-custom-value .creation-duration-custom-field input {
    width: 42px;
    flex: 0 0 42px;
    padding: 0;
    text-align: right;
}

.creation-duration-custom-field em { color: currentColor; }

.creation-duration-menu {
    display: block !important;
    width: 262px !important;
    padding: 12px !important;
}

.creation-duration-choices {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
}

.creation-duration-choices button {
    height: 32px !important;
    min-width: 0;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--creation-muted) !important;
    font-size: 11px !important;
    font-weight: 500;
    transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out) !important;
}

.creation-duration-choices button:hover { background: rgba(255, 255, 255, .055) !important; color: var(--creation-text) !important; }
.creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .105) !important; color: var(--creation-text) !important; }

html:not(.dark) .creation-control-popover-surface { background: rgba(255, 255, 255, .98) !important; box-shadow: 0 20px 48px rgba(25, 29, 35, .14) !important; }
html:not(.dark) .creation-choice-grid button:hover,
html:not(.dark) .creation-duration-choices button:hover,
html:not(.dark) .creation-custom-trigger:hover { background: rgba(28, 32, 37, .055) !important; }
html:not(.dark) .creation-choice-grid button.is-selected,
html:not(.dark) .creation-duration-choices button.is-selected { background: rgba(28, 32, 37, .09) !important; }
html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055) !important; }

/* 历史对话使用右侧时间轴，避免重新引入占据主舞台的常驻会话栏。 */
.creation-top-actions {
    position: absolute;
    z-index: 30;
    top: 24px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.creation-top-action {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--creation-muted);
    transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--motion-ease-out);
}

.creation-top-action svg { width: 16px; height: 16px; }
.creation-top-action:hover,
.creation-top-action[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--creation-text); transform: translateY(-1px); }
.creation-top-action:focus-visible { outline: 2px solid color-mix(in srgb, #83d6ec 70%, transparent); outline-offset: 2px; }
html:not(.dark) .creation-top-action { background: rgba(28, 32, 37, .055); }
html:not(.dark) .creation-top-action:hover,
html:not(.dark) .creation-top-action[aria-expanded="true"] { background: rgba(28, 32, 37, .11); }

.creation-history-drawer,
.creation-history-drawer-root {
    --creation-history-bg: #111316;
    --creation-history-surface: #1a1d22;
    --creation-history-hover: #20242a;
    --creation-history-text: #f1f3f4;
    --creation-history-muted: #858c96;
    --creation-history-faint: #555c66;
    --creation-history-line: rgba(255, 255, 255, .09);
    --creation-history-accent: #83d6ec;
}

html:not(.dark) .creation-history-drawer,
html:not(.dark) .creation-history-drawer-root {
    --creation-history-bg: #f8f8f6;
    --creation-history-surface: #ffffff;
    --creation-history-hover: #f0f1ee;
    --creation-history-text: #202328;
    --creation-history-muted: #747c85;
    --creation-history-faint: #b0b6bc;
    --creation-history-line: rgba(28, 32, 37, .11);
    --creation-history-accent: #1688a3;
}

.creation-history-drawer.ant-drawer-content,
.creation-history-drawer .ant-drawer-content,
.creation-history-drawer-root .ant-drawer-content { background: var(--creation-history-bg); color: var(--creation-history-text); }
.creation-history-drawer .ant-drawer-header { min-height: 58px; border-bottom: 1px solid var(--creation-history-line); padding: 10px 14px 10px 18px; }
.creation-history-drawer .ant-drawer-title { color: var(--creation-history-text); }
.creation-history-drawer .ant-drawer-close { display: grid; width: 36px; height: 36px; place-items: center; margin-inline-end: 8px; border-radius: 8px; color: var(--creation-history-muted); }
.creation-history-drawer .ant-drawer-close:hover { background: var(--creation-history-hover); color: var(--creation-history-text); }
.creation-history-drawer .ant-drawer-close:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 66%, transparent); outline-offset: 1px; }
.creation-history-drawer .ant-drawer-body { overscroll-behavior: contain; }

.creation-history-title { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.creation-history-title > span { font-size: 14px; font-weight: 650; letter-spacing: 0; }
.creation-history-title small { color: var(--creation-history-muted); font-size: 10px; font-weight: 500; }

.creation-history-timeline { margin: 0; padding: 8px 12px 18px 18px; list-style: none; }
.creation-history-timeline > li { position: relative; min-width: 0; padding-left: 14px; content-visibility: auto; contain-intrinsic-size: 0 68px; }
.creation-history-timeline > li::before { position: absolute; top: 0; bottom: 0; left: 2px; width: 1px; background: var(--creation-history-line); content: ""; }
.creation-history-timeline > li:first-child::before { top: 15px; }
.creation-history-timeline > li:last-child::before { bottom: calc(100% - 16px); }
.creation-history-dot { position: absolute; z-index: 1; top: 13px; left: 0; width: 5px; height: 5px; border: 1px solid var(--creation-history-bg); border-radius: 50%; background: var(--creation-history-faint); box-sizing: content-box; }
.creation-history-timeline > li.is-active .creation-history-dot { background: var(--creation-history-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--creation-history-accent) 12%, transparent); }

.creation-history-timeline button {
    display: flex;
    width: 100%;
    min-height: 64px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 7px 9px;
    color: var(--creation-history-text);
    text-align: left;
    transition: background-color 150ms ease;
}

.creation-history-timeline button:hover { background: var(--creation-history-hover); }
.creation-history-timeline button:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 68%, transparent); outline-offset: -2px; }
.creation-history-timeline > li.is-active button { background: color-mix(in srgb, var(--creation-history-accent) 5%, var(--creation-history-surface)); }
.creation-history-time { display: flex; width: 100%; align-items: center; justify-content: space-between; color: var(--creation-history-muted); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.creation-history-time em { color: var(--creation-history-faint); font-size: 9px; font-style: normal; }
.creation-history-item-heading { width: 100%; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 630; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.creation-history-snippet { display: block; width: 100%; overflow: hidden; color: var(--creation-history-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .creation-top-actions { top: 14px; right: 14px; }
    .creation-top-action { width: 40px; height: 40px; }
    .creation-history-drawer { width: 100vw !important; max-width: 100vw; }
    .creation-history-drawer-root .ant-drawer-content-wrapper { width: 100vw !important; max-width: 100vw; }
    .creation-history-timeline { padding-right: 12px; padding-left: 18px; }
}

/* -------------------------------------------------------------------------
   Monochrome product surfaces
   页面级黑白主题收口：焦点用边框表达，浮层使用单一表面，避免渐变、米色和蓝紫光圈在不同页面漂移。
   ------------------------------------------------------------------------- */
.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);
}

:where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-selector, .ant-select-multiple .ant-select-selection-search-input) {
    box-shadow: none !important;
}

:where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused, .ant-input-number-focused, .ant-select-focused .ant-select-selector) {
    border-color: var(--foreground) !important;
    box-shadow: none !important;
    outline: none !important;
}

:where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-input-number:hover, .ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
    border-color: color-mix(in srgb, var(--foreground) 42%, var(--border)) !important;
}

:where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner, .ant-picker-dropdown .ant-picker-panel-container) {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    background: var(--popover) !important;
    background-image: none !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: none !important;
}

:where(.ant-select-item-option, .ant-dropdown-menu-item, .ant-cascader-menu-item) {
    border-radius: var(--r-sm) !important;
    color: var(--popover-foreground) !important;
}

:where(.ant-select-item-option-active:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item:hover, .ant-cascader-menu-item-active) {
    background: color-mix(in srgb, var(--popover-foreground) 6%, var(--popover)) !important;
}

:where(.ant-select-item-option-selected:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item-selected) {
    background: color-mix(in srgb, var(--popover-foreground) 12%, var(--popover)) !important;
    color: var(--popover-foreground) !important;
    font-weight: 600;
}

:where(.ant-tag-success, .ant-tag-warning, .ant-tag-processing, .ant-tag-cyan, .ant-tag-blue, .ant-tag-green, .ant-tag-gold, .ant-tag-orange) {
    border-color: color-mix(in srgb, var(--foreground) 18%, transparent) !important;
    background: color-mix(in srgb, var(--foreground) 7%, transparent) !important;
    color: color-mix(in srgb, var(--foreground) 76%, transparent) !important;
}

body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-modal-content, .ant-drawer-content, .ant-message-notice-content, .ant-notification-notice) {
    background: var(--popover) !important;
    background-image: none !important;
    box-shadow: var(--shadow-xl) !important;
    backdrop-filter: none !important;
}

body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
    background: color-mix(in srgb, var(--foreground) 48%, transparent) !important;
    backdrop-filter: blur(3px) !important;
}

.app-workspace-shell.is-spatial .app-workspace-sidebar {
    background: var(--workspace-navigation) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}