From c805012adcedcdbba80b2321e15bf315ed37ac60 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Thu, 21 May 2026 10:37:54 +0800
Subject: [PATCH] feat: restyle workbench with glassmorphism shell

---
 docs/source-analysis.html              |  18 +-
 web/app/globals.css                    | 180 ++++++++++----
 web/components/ad-recreation-board.tsx | 315 +++++++++++++++----------
 3 files changed, 336 insertions(+), 177 deletions(-)

diff --git a/docs/source-analysis.html b/docs/source-analysis.html
index 438f418..a651ce0 100644
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
@@ -591,13 +591,13 @@
             <table>
               <tbody>
                 <tr><td><code>web/next.config.mjs</code></td><td>Next.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 <code>eslint</code> 顶层配置，避免本地 dev 出现配置 Issue 提示。</td></tr>
-                <tr><td><code>web/app/globals.css</code></td><td>全局主题变量、登录页视觉样式、信息流工作台同源品牌 token、ReactFlow 样式引用，以及本地开发态 <code>nextjs-portal</code> 遮挡隐藏规则。工作台在 <code>skg-board-theme</code> 内定义 <code>--skg-gold-1</code>、<code>--skg-gold-2</code>、<code>--skg-cream</code>、<code>--skg-bg-*</code>、<code>--skg-text-*</code>、<code>--skg-radius-*</code> 和按钮阴影等变量，并新增 <code>skg-board-brand</code>、<code>skg-stat-card</code>、<code>skg-primary-action</code>、<code>skg-secondary-action</code>、<code>skg-empty-state</code> 等样式。暗色工作台复用登录页金色聚焦、米白主按钮和弱暖光氛围；明亮模式通过 <code>skg-board-theme--light</code> 复用同一套结构，改成暖白底、白色 panel、黑底主 CTA 和深色文本，不另起一套界面。</td></tr>
+                <tr><td><code>web/app/globals.css</code></td><td>全局主题变量、登录页视觉样式、信息流工作台玻璃拟态 token、ReactFlow 样式引用，以及本地开发态 <code>nextjs-portal</code> 遮挡隐藏规则。工作台在 <code>skg-board-theme</code> 内按 Figma 本地 MCP 参考改成黑灰玻璃系统：深灰背景、<code>#383838</code> 胶囊侧栏、<code>rgba(255,255,255,.1)</code> 玻璃面、<code>backdrop-filter: blur(5px)</code>、<code>20px</code> 圆角、<code>10px 10px 10px rgba(0,0,0,.3)</code> 阴影和绿黄状态色；新增 <code>skg-board-shell</code>、<code>skg-board-rail</code>、<code>skg-glass-card</code>、<code>skg-glass-card--flat</code>、<code>skg-status-orb</code> 等样式。主/次按钮、指标卡和空状态继续走统一类，避免各板块散写不同玻璃效果。</td></tr>
                 <tr><td><code>web/app/page.tsx</code></td><td>产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 信息流广告复刻工作表；“开始分析”会把 job 放入并行素材分析队列，下载完成后触发 <code>triggerTranscribe</code> 解析音频，并触发 <code>analyzeJob</code> 自动抽 12 张参考帧，形成“音频文案路 + 视频视觉路”同步推进；音频失败时会忽略失败状态下残留的半成品 transcript，允许再次触发音频解析；底部吸附音频条和旧全局浮动主题按钮不再从主界面渲染，避免和工作台内的明暗模式切换重复。</td></tr>
-                <tr><td><code>web/components/ad-recreation-board.tsx</code></td><td>信息流广告复刻工作表：顶部先展示与登录页连续的 SKG brand strip，包含 SKG 字标、“未来健康 · 营销内容工作台”和“营销内容工作台 · TK 二创”；右侧素材/任务/视频/文案统计改为米白 stat 卡片，主动作按钮统一走 <code>skg-primary-action</code>，次动作走 <code>skg-secondary-action</code>，空状态复用 <code>AnimatedLoginCharacters</code>。工作台外层已取消 <code>1800x1000</code> 固定基准画布、<code>ResizeObserver</code> 档位计算和 CSS <code>zoom</code> 整页缩放，改为正常流式桌面容器：<code>min-height: 100vh</code>、<code>width: 100%</code>、<code>max-width: 1920px</code>，并保留 <code>min-width: 1280px</code> 作为最低操作宽度；核心列宽不再被整体缩放，文字、图标和边线由浏览器原生字号渲染，避免小数缩放导致发虚。<code>buildWorkflowSteps</code> 仍统一生成 01-09 流程顺序、状态和判定依据，<code>WorkflowStepBadge</code> / <code>PipelineLane</code> / 分镜列标题也继续共用同一套编号；但完整 <code>WorkflowOrderBar</code>、右侧素材/视频/音频/文案/参考帧需求 chips、文案依据下拉和“音频文案、抽帧参考、主体重构、产品素材池”四个状态条不再默认渲染在工作区顶部。左侧素材输入只负责链接/上传和任务切换，不再重复放横版原视频预览；右侧源视频工作区直接进入核心操作。讲话人、节奏和背景音分析仍写入 <code>AudioScript</code>，但不再作为“音频解析结果”卡片默认渲染；源视频工作区撤销右上“布局调节”临时面板，不再读取或写入 <code>localStorage["skg-source-workspace-layout:v1"]</code>；当前固定为左侧原视频列 380px、9:16 视频高 500px、逐句时间轴最大高 270px、参考帧池 140px、主体空态 78px；转换层不再固定拉长，按内容自然高度显示，内容过多时最多到 560px 后在自身区域内滚动；上方是按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧，播放器下方是逐句时间轴，英文和中文都最多显示两行；右侧上方是无标题的波形与切点参考框，下方主体链路改为上方参考帧池 + 转换层、下方主体元素结果栏。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，顶部把低/中/高密度按钮和当前播放秒数、总时长、鼠标指针停点秒数直接放在波形上方。视频播放时通过 <code>requestAnimationFrame</code> 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。音频波形下方同框渲染无标题的 <code>TimelineFilmstrip</code> 临时画面胶片，前端按低/中/高密度从源视频 canvas 截取预览缩略图，并按 <code>frame.time / duration</code> 的百分比定位到和波形同一条时间轴上；波形与胶片之间不显示分隔横线，胶片轨道贴近波形，缩略图轻微上下错落并倾斜重叠排列，hover 时用同一张胶片卡在原位置生成固定顶层克隆，约 4.8 倍放大并自动限制在视口内，避免被工作区、滚动容器或相邻面板遮挡；单击胶片只跳转原视频时间，不写入任务数据，双击胶片或拖进参考帧池时才调用手动抽帧并正式加入 <code>job.frames</code>，已加入的胶片显示“已添加”；胶片预览按 job、视频、密度和时长缓存，未切换低/中/高时返回页面不重新扫视频。参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。转换层改为轻量对话式生图确认区并拿到主操作宽度：左侧参考帧可点 <code>+</code> 或直接拖入转换层，本地图片拖入会通过 <code>uploadReferenceFrame</code> 保存为参考帧；转换层上方是参考输入区，下方不再显示当前要求摘要、保留元素副本或对话记录计数，只保留带张数控件的“发送消息”输入 composer；模型确认类回复不再逐条展示，生成英文 prompt 后发送区主按钮直接切换为“确认生成 N 张”，点击后才调用主体套图生成。主体元素结果栏在转换层下方，空态只占紧凑提示；有结果时按每次生成的套图文件夹显示，左侧横向展示当前套图，右侧切换套图包，保留单张重生和删除；缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 <code>replace_views=true</code> 替换同一视角。前端对卡通重构传 <code>subject_style=cartoon_subject</code>，其他方向传 <code>subject_style=source_actor</code>；形象锁定或自主描述空文本可走 <code>reconstruction_mode=same</code>，其他参考创新走 <code>similar</code> 并把参考帧作为 <code>/images/edits</code> 的 image refs 一起提交。主体生成完成后会形成 <code>subject_consensus_brief</code>。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写。每条音频分镜默认是左侧三字段、右侧横向视频候选轨；高级区仍保留首尾帧 prompt、产品出现方式和旧 6 字段。<code>ModelTrace</code> 会在音频解析、产品识别/补图、主体重构视图包、脚本改写等入口旁直接展示模型名；生图入口会显示 <code>gpt-image-2 / gemini-3-pro-image-preview</code> 链路和短时熔断规则，点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。</td></tr>
+                <tr><td><code>web/components/ad-recreation-board.tsx</code></td><td>信息流广告复刻工作表：外壳按 Figma “Dashboard Glassmorphism”参考整体改为黑灰玻璃工作台，新增 <code>WorkbenchRail</code> 左侧胶囊导航，素材任务、源视频、音频、参考帧、主体套图、视频候选、资源库和主题切换都收进 65px 侧栏；顶部从登录页式 brand strip 改为轻量生产控制条，左侧显示 <code>Marketing Production Console</code> 和“信息流广告复刻工作台”，右侧保留素材/当前/视频/文案段/背景音指标，但改成深色玻璃 stat 卡片。主内容仍是素材输入列 + 源视频拆解工作区，数据流、接口、模型调用和状态推导不变。工作台外层已取消 <code>1800x1000</code> 固定基准画布、<code>ResizeObserver</code> 档位计算和 CSS <code>zoom</code> 整页缩放，改为正常流式桌面容器：<code>min-height: 100vh</code>、<code>width: 100%</code>、<code>max-width: 1920px</code>，并保留 <code>min-width: 1280px</code> 作为最低操作宽度；核心列宽不再被整体缩放，文字、图标和边线由浏览器原生字号渲染，避免小数缩放导致发虚。<code>buildWorkflowSteps</code> 仍统一生成 01-09 流程顺序、状态和判定依据，<code>WorkflowStepBadge</code> / <code>PipelineLane</code> / 分镜列标题也继续共用同一套编号；但完整 <code>WorkflowOrderBar</code>、右侧素材/视频/音频/文案/参考帧需求 chips、文案依据下拉和“音频文案、抽帧参考、主体重构、产品素材池”四个状态条不再默认渲染在工作区顶部。左侧素材输入只负责链接/上传和任务切换，不再重复放横版原视频预览；右侧源视频工作区直接进入核心操作。讲话人、节奏和背景音分析仍写入 <code>AudioScript</code>，但不再作为“音频解析结果”卡片默认渲染；源视频工作区撤销右上“布局调节”临时面板，不再读取或写入 <code>localStorage["skg-source-workspace-layout:v1"]</code>；当前固定为左侧原视频列 380px、9:16 视频高 500px、逐句时间轴最大高 270px、参考帧池 140px、主体空态 78px；转换层不再固定拉长，按内容自然高度显示，内容过多时最多到 560px 后在自身区域内滚动；上方是按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧，播放器下方是逐句时间轴，英文和中文都最多显示两行；右侧上方是无标题的波形与切点参考框，下方主体链路改为上方参考帧池 + 转换层、下方主体元素结果栏。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，顶部把低/中/高密度按钮和当前播放秒数、总时长、鼠标指针停点秒数直接放在波形上方。视频播放时通过 <code>requestAnimationFrame</code> 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。音频波形下方同框渲染无标题的 <code>TimelineFilmstrip</code> 临时画面胶片，前端按低/中/高密度从源视频 canvas 截取预览缩略图，并按 <code>frame.time / duration</code> 的百分比定位到和波形同一条时间轴上；波形与胶片之间不显示分隔横线，胶片轨道贴近波形，缩略图轻微上下错落并倾斜重叠排列，hover 时用同一张胶片卡在原位置生成固定顶层克隆，约 4.8 倍放大并自动限制在视口内，避免被工作区、滚动容器或相邻面板遮挡；单击胶片只跳转原视频时间，不写入任务数据，双击胶片或拖进参考帧池时才调用手动抽帧并正式加入 <code>job.frames</code>，已加入的胶片显示“已添加”；胶片预览按 job、视频、密度和时长缓存，未切换低/中/高时返回页面不重新扫视频。参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。转换层改为轻量对话式生图确认区并拿到主操作宽度：左侧参考帧可点 <code>+</code> 或直接拖入转换层，本地图片拖入会通过 <code>uploadReferenceFrame</code> 保存为参考帧；转换层上方是参考输入区，下方不再显示当前要求摘要、保留元素副本或对话记录计数，只保留带张数控件的“发送消息”输入 composer；模型确认类回复不再逐条展示，生成英文 prompt 后发送区主按钮直接切换为“确认生成 N 张”，点击后才调用主体套图生成。主体元素结果栏在转换层下方，空态只占紧凑提示；有结果时按每次生成的套图文件夹显示，左侧横向展示当前套图，右侧切换套图包，保留单张重生和删除；缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 <code>replace_views=true</code> 替换同一视角。前端对卡通重构传 <code>subject_style=cartoon_subject</code>，其他方向传 <code>subject_style=source_actor</code>；形象锁定或自主描述空文本可走 <code>reconstruction_mode=same</code>，其他参考创新走 <code>similar</code> 并把参考帧作为 <code>/images/edits</code> 的 image refs 一起提交。主体生成完成后会形成 <code>subject_consensus_brief</code>。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写。每条音频分镜默认是左侧三字段、右侧横向视频候选轨；高级区仍保留首尾帧 prompt、产品出现方式和旧 6 字段。<code>ModelTrace</code> 会在音频解析、产品识别/补图、主体重构视图包、脚本改写等入口旁直接展示模型名；生图入口会显示 <code>gpt-image-2 / gemini-3-pro-image-preview</code> 链路和短时熔断规则，点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。</td></tr>
                 <tr><td><code>SourceSubjectPipeline</code></td><td>源视频工作区主体管线主路径：上方是竖向 <strong>参考帧池</strong> 和宽幅 <strong>转换层</strong>，下方是 <strong>主体元素</strong> 结果栏。参考帧池固定 140px，转换层不再固定高度，按内容自然显示并以 560px 为最大高度，超出后在自身区域内滚动；主体空态固定为 78px 紧凑提示。参考帧池保留自动 12 张、胶片拖入正式成帧、点击勾选和删除；参考帧缩略图保持小尺寸固定宽度、<code>aspect-[9/16]</code> 和 <code>object-contain</code> 显示，hover 预览通过 <code>MediaAssetTile</code> 的左侧紧凑浮层显示，并新增 <code>+</code> 操作把参考帧送入转换层。转换层是轻量对话式生图确认区：顶部选择 GPT 套件或 Gemini 套件，参考输入区支持左侧 <code>+</code>、拖拽参考帧、胶片拖入和本地图片拖拽上传（上传图会写入 <code>job.frames</code>），下方固定为带张数控件的“发送消息”输入 composer，不再重复显示当前要求摘要、保留元素副本或收起记录计数；模型确认类回复不再逐条显示，复刻、参考创意换人物、卡通风格和人物占比等常用意图也不再显示为独立快捷 chip；识别结果里的特征 chip 是“保留元素”选择，点亮表示随下一条消息提交给 <code>subject-agent/message</code>，再次点击取消，清空按钮一次性取消全部，单次点击不再直接请求模型；<code>subject-agent/message</code> 返回英文 <code>generation_prompt_en</code> 后不再自动弹窗，标题右侧显示“提示词就绪”，底部主按钮从“发送消息”切换为“确认生成 N 张”；用户继续输入会更新需求，点击确认生成才调用 <code>generateSubjectAssets</code>。后端会为每次主体套图注入同一份 pack bible：参考创新模式锁定同一个全新主体和同一套服装，源形象锁定模式锁定参考帧里的可见主体、体态、发型、服装和配色；后处理会裁出白底主体并允许放大到画布高度上限约 96%，实测典型主体有效高度约 90%，避免模型生成“小人 + 大白边”。主体元素结果栏按每次生成的 <code>pack_id</code> 组织成“套图文件夹”：左侧横向展开当前选中套图，右侧显示可滚动的套图包列表；同一方向可保留多套，生成中按 pack 显示 <code>2/6</code> 这类进度，单张完成就替换对应占位卡；空态只显示紧凑提示，不再占右侧整列。缩略图复用 <code>MediaAssetTile</code>，支持 hover 放大、单张重生和删除。旧下方 <code>SourceReferenceBuildPanel</code> 不再主路径渲染。</td></tr>
                 <tr><td><code>AudioStoryboardPlanPanel</code> 三字段候选生成</td><td>当前分镜主路径：每行是左右双栏，左侧默认显示 <code>skg_copy_*</code>、<code>scene_one_line_*</code>、<code>action_one_line_*</code> 三组中英字段，右侧直接显示视频候选横向轨。用户改中文镜像后，字段失焦会通过 <code>refineStoryboard</code> 优化对应英文主值，失败时退回 <code>translateText</code>；英文仍是后续 prompt 主值。<code>quickPlanStoryboard</code> 把三字段和主体 brief 展开为完整 <code>StoryboardScene</code>，<code>generateStoryboardVideo</code> 的 <code>count</code> 可由单行数字控件选择，候选新生成后持续向右追加，不再用 4-grid 撑高每行。整片生成同样可选择每行数量，并以 <code>concurrency=1</code> 按行排队提交。产品素材池、批量控制、每行主体区和高级区都可折叠，高级抽屉仍展示旧 6 字段、首尾帧 prompt 和首尾帧资产槽，但客户默认不用先处理首尾帧。</td></tr>
                 <tr><td><code>web/components/resource-library/library-drawer.tsx</code></td><td>全局资源中心浮窗：由工作台顶部“资源库”按钮打开，叠加在工作台上方但不阻塞主界面；尺寸、位置和当前 Tab 写入 <code>localStorage["skg-resource-library-drawer"]</code>。提示词 Tab 固定 5 列（场景描述、视频描述、主体描述、SKG 文案、产品角度），每列先显示 use_count 排名前 5 的“常用”，再按月份倒序分组；提示词节点常驻复制按钮，hover 可选英文/中文/双语复制，并调用 use 接口。素材 Tab 固定 4 列（主体、产品、场景、视频），节点不可拖动，按月份倒序硬编码排列；“应用到当前 job”只调用后端复制接口，得到普通 <code>ImageRef(kind="asset")</code> 后再写入产品素材池或复制 ID。浮窗顶部最近 24 小时横条混合显示提示词和素材；新建提示词、上传素材、删除前查引用、详情侧栏都在该组件内完成。</td></tr>
-                <tr><td><code>AdRecreationBoard</code> 主题切换</td><td>顶部指标区左侧有“明亮/暗色”按钮，使用 <code>Sun</code> / <code>Moon</code> 图标切换 <code>skg-board-theme--light</code> 类名，并把选择写入 <code>localStorage["skg-board-theme"]</code>。暗色仍是默认模式；明亮模式只改变工作台外观，不改变任务、素材、分镜、模型调用或接口数据。</td></tr>
+                <tr><td><code>AdRecreationBoard</code> 主题切换</td><td>左侧胶囊导航底部有 <code>Sun</code> / <code>Moon</code> 图标按钮，切换 <code>skg-board-theme--light</code> 类名，并把选择写入 <code>localStorage["skg-board-theme"]</code>。暗色仍是默认模式；明亮模式只改变工作台外观，不改变任务、素材、分镜、模型调用或接口数据。</td></tr>
                 <tr><td><code>SourceReferenceBuildPanel</code></td><td>旧的“相似主体 / 主体模板”大面板代码仍保留在文件里，方便以后恢复模板库复用、入库命名和自定义视图选择；但当前源视频工作区主路径已经由 <code>SourceSubjectPipeline</code> 承接，不再在页面下方渲染这块，避免和“参考帧池 → 转换层 → 主体元素”重复。</td></tr>
                 <tr><td><code>web/components/media-asset-tile.tsx</code></td><td>项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、重新生成等操作按钮、忙碌遮罩和图片/视频共用预览，避免每个新板块重复手写不同的媒体交互。hover 预览支持 <code>previewPlacement</code> 和 <code>previewMaxWidth</code>，参考帧池用左侧紧凑预览避免遮住转换层；画面胶片是例外：为了保持胶片原位浏览，不使用额外弹出预览，只让胶片缩略图自己在轨道内放大。</td></tr>
                 <tr><td><code>web/app/login/page.tsx</code></td><td>生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。</td></tr>
@@ -1132,6 +1132,18 @@ ProductRefStateItem {
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-21 · 按 Figma Glassmorphism 全面改造工作台外观</h3>
+              <span class="tag violet">UI</span>
+              <span class="tag cyan">Figma MCP</span>
+            </header>
+            <div class="body">
+              <p><strong>依据：</strong>通过本地 <code>figma-desktop</code> MCP 读取 <code>Dashboard Glassmorphism (Community)</code>：主 frame <code>2:3</code> 为 <code>1366x768</code>，普通指标卡约 <code>288x160</code>、<code>rgba(255,255,255,.1)</code>、<code>backdrop-blur(5px)</code>、<code>20px</code> 圆角，左侧栏为 <code>#383838</code>、宽 <code>65px</code>、右侧 <code>70px</code> 圆角。</p>
+              <p><strong>改动：</strong><code>web/app/globals.css</code> 新增黑灰玻璃工作台 token 和 <code>skg-board-shell</code>、<code>skg-board-rail</code>、<code>skg-glass-card</code> 等类；<code>AdRecreationBoard</code> 新增 <code>WorkbenchRail</code>，把资源库和主题切换收进左侧胶囊栏，顶部改为轻量生产控制条，素材列、视频拆解面板、源视频工作区、转换层和主体结果栏统一套深色玻璃面。</p>
+              <p><strong>影响：</strong>这是纯前端视觉壳改造，不改变后端接口、模型路由、任务状态、转换层确认逻辑或媒体缩略图交互；后续描述 UI 需求时可说“按 2026-05-21 玻璃工作台外壳继续扩展”，不要再回到旧的顶部大 brand strip。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-20 · 取消工作台固定画布缩放</h3>
diff --git a/web/app/globals.css b/web/app/globals.css
index 7328b25..088e817 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -469,29 +469,33 @@ nextjs-portal {
    信息流工作台 · 登录页同源质感
    ============================================================ */
 .skg-board-theme {
-  --skg-gold-1: #d6b36a;
-  --skg-gold-2: #c89b3c;
-  --skg-cream: #f5efe3;
-  --skg-bg-1: #0a0a0a;
-  --skg-bg-2: #111111;
-  --skg-bg-3: rgba(255, 255, 255, 0.035);
-  --skg-border: rgba(255, 255, 255, 0.1);
+  --skg-gold-1: #c8cd19;
+  --skg-gold-2: #a2c638;
+  --skg-cream: #f6f6ee;
+  --skg-bg-1: #1b1b1b;
+  --skg-bg-2: #242424;
+  --skg-bg-3: rgba(255, 255, 255, 0.1);
+  --skg-border: rgba(255, 255, 255, 0.14);
   --skg-text-1: #ffffff;
-  --skg-text-2: rgba(255, 255, 255, 0.62);
-  --skg-text-3: rgba(255, 255, 255, 0.34);
-  --skg-success: #34d399;
-  --skg-warn: #fcd34d;
+  --skg-text-2: rgba(255, 255, 255, 0.56);
+  --skg-text-3: rgba(255, 255, 255, 0.36);
+  --skg-success: #a2c638;
+  --skg-warn: #c8cd19;
   --skg-danger: #fb7185;
-  --skg-info: #67e8f9;
+  --skg-info: #a6d533;
   --skg-radius-sm: 6px;
   --skg-radius-md: 8px;
-  --skg-radius-lg: 12px;
-  --skg-shadow-button: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
+  --skg-radius-lg: 20px;
+  --skg-shadow-button: 10px 10px 10px rgba(0, 0, 0, 0.3);
+  --skg-shadow-card: 10px 10px 10px rgba(0, 0, 0, 0.3);
+  --skg-glass-bg: rgba(255, 255, 255, 0.1);
+  --skg-glass-bg-soft: rgba(255, 255, 255, 0.055);
+  --skg-rail: #383838;
   color: var(--skg-text-1);
   background:
-    radial-gradient(circle at 52% 4%, rgba(214, 179, 106, 0.1), transparent 30%),
-    radial-gradient(circle at 12% 96%, rgba(214, 179, 106, 0.065), transparent 34%),
-    linear-gradient(120deg, #0a0a0a 0%, #10100f 46%, #050505 100%);
+    radial-gradient(circle at 20% 18%, rgba(162, 198, 56, 0.11), transparent 28%),
+    radial-gradient(circle at 86% 78%, rgba(200, 205, 25, 0.12), transparent 28%),
+    linear-gradient(120deg, #202020 0%, #242424 48%, #171717 100%);
 }
 
 .skg-board-theme::before {
@@ -501,10 +505,10 @@ nextjs-portal {
   z-index: 0;
   pointer-events: none;
   background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
-  background-size: 64px 64px;
-  opacity: 0.44;
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
+  background-size: 56px 56px;
+  opacity: 0.34;
 }
 
 .skg-board-theme::after {
@@ -514,39 +518,38 @@ nextjs-portal {
   z-index: 0;
   pointer-events: none;
   background:
-    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 42%, rgba(0, 0, 0, 0.4)),
-    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 38%, rgba(0, 0, 0, 0.24));
+    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(0, 0, 0, 0.38)),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 36%, rgba(0, 0, 0, 0.2));
 }
 
 .skg-board-ambient {
   background:
-    radial-gradient(circle at 78% 0%, rgba(232, 201, 122, 0.08), transparent 30%),
-    radial-gradient(circle at 8% 100%, rgba(214, 179, 106, 0.06), transparent 34%);
+    radial-gradient(circle at 72% 12%, rgba(162, 198, 56, 0.13), transparent 28%),
+    radial-gradient(circle at 18% 92%, rgba(200, 205, 25, 0.12), transparent 32%);
 }
 
 .skg-board-topbar,
 .skg-board-panel {
   border-color: var(--skg-border) !important;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
-    rgba(17, 17, 17, 0.74) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 18px 54px rgba(0, 0, 0, 0.34);
-  backdrop-filter: blur(10px);
+    radial-gradient(circle at 88% 22%, rgba(162, 198, 56, 0.08), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.052)),
+    rgba(36, 36, 36, 0.68) !important;
+  box-shadow: var(--skg-shadow-card);
+  backdrop-filter: blur(5px);
 }
 
 .skg-board-topbar {
   background:
-    linear-gradient(100deg, rgba(214, 179, 106, 0.075), rgba(255, 255, 255, 0.03) 54%, rgba(214, 179, 106, 0.035)),
-    rgba(12, 12, 12, 0.76) !important;
+    linear-gradient(100deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045) 58%, rgba(162, 198, 56, 0.08)),
+    rgba(38, 38, 38, 0.72) !important;
 }
 
 .skg-board-theme input:focus,
 .skg-board-theme textarea:focus,
 .skg-board-theme select:focus {
   border-color: rgba(214, 179, 106, 0.58) !important;
-  box-shadow: 0 0 0 2px rgba(214, 179, 106, 0.14);
+  box-shadow: 0 0 0 2px rgba(162, 198, 56, 0.18);
 }
 
 .skg-board-theme input[type="checkbox"] {
@@ -558,6 +561,80 @@ nextjs-portal {
   color: #fff;
 }
 
+.skg-board-shell {
+  min-height: calc(100vh - 32px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
+    rgba(26, 26, 26, 0.58);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
+  backdrop-filter: blur(8px);
+}
+
+.skg-board-rail {
+  width: 65px;
+  min-height: 514px;
+  border: 1px solid #383838;
+  border-radius: 0 70px 70px 0;
+  background: #383838;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+}
+
+.skg-board-rail__logo {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  background:
+    radial-gradient(circle at 68% 38%, #a2c638 0 34%, transparent 36%),
+    radial-gradient(circle at 50% 50%, #c8cd19 0 47%, transparent 49%),
+    #ffffff;
+  color: #ffffff;
+}
+
+.skg-board-rail__button {
+  color: rgba(255, 255, 255, 0.52);
+  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
+}
+
+.skg-board-rail__button:hover,
+.skg-board-rail__button:focus-visible,
+.skg-board-rail__button.is-active {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.08);
+  transform: translateX(2px);
+}
+
+.skg-glass-card {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at 80% 86%, rgba(162, 198, 56, 0.18), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.052)),
+    rgba(56, 56, 56, 0.62);
+  box-shadow: var(--skg-shadow-card);
+  backdrop-filter: blur(5px);
+}
+
+.skg-glass-card--flat {
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
+    rgba(24, 24, 24, 0.52);
+}
+
+.skg-status-orb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 78% 32%, #a2c638 0 12%, transparent 13%),
+    conic-gradient(from 40deg, #a2c638 0 74%, rgba(255, 255, 255, 0.22) 75% 100%);
+  color: #ffffff;
+}
+
 .skg-board-theme--light {
   --skg-bg-1: #faf8f4;
   --skg-bg-2: #ffffff;
@@ -748,43 +825,46 @@ nextjs-portal {
 }
 
 .skg-stat-card {
-  border: 1px solid rgba(214, 179, 106, 0.18);
-  border-radius: var(--skg-radius-md);
-  background: var(--skg-cream);
-  color: #0a0a0a;
-  box-shadow: var(--skg-shadow-button);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
+    rgba(0, 0, 0, 0.16);
+  color: #ffffff;
+  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(5px);
 }
 
 .skg-stat-card__label {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.48);
 }
 
 .skg-stat-card__value {
-  color: #0a0a0a;
+  color: #ffffff;
 }
 
 .skg-primary-action {
   border-radius: var(--skg-radius-md);
-  background: #f5efe3;
-  color: #0a0a0a;
+  background: linear-gradient(135deg, #c8cd19, #a2c638);
+  color: #101010;
   box-shadow: var(--skg-shadow-button);
 }
 
 .skg-primary-action:hover {
-  background: #fff7df;
+  background: linear-gradient(135deg, #d6db25, #b0d83d);
 }
 
 .skg-secondary-action {
-  border: 1px solid rgba(214, 179, 106, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.13);
   border-radius: var(--skg-radius-md);
-  background: rgba(214, 179, 106, 0.08);
-  color: var(--skg-gold-1);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.76);
 }
 
 .skg-secondary-action:hover {
-  border-color: rgba(214, 179, 106, 0.54);
-  background: rgba(214, 179, 106, 0.12);
-  color: #f5d98e;
+  border-color: rgba(162, 198, 56, 0.44);
+  background: rgba(162, 198, 56, 0.11);
+  color: #ffffff;
 }
 
 .skg-empty-state {
diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx
index 2db34b0..4d0d912 100644
--- a/web/components/ad-recreation-board.tsx
+++ b/web/components/ad-recreation-board.tsx
@@ -2476,108 +2476,104 @@ export function AdRecreationBoard({
   return (
     <section className={`skg-board-theme ${boardTheme === "light" ? "skg-board-theme--light" : ""} relative z-20 min-h-screen w-full overflow-auto bg-black text-white`}>
       <div className="skg-board-ambient pointer-events-none fixed inset-0" />
-      <div className="relative z-10 mx-auto flex min-h-screen w-full min-w-[1280px] max-w-[1920px] flex-col px-4 py-4 xl:px-5">
-        <header className="skg-board-topbar mb-3 flex items-center justify-between gap-4 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
-          <div className="skg-board-brand">
-            <div className="skg-board-brand__logo-chip" aria-hidden="true">
-              <img className="skg-board-brand__logo" src="/skg-logo-black.svg" alt="" />
-            </div>
-            <div className="min-w-0">
-              <div className="skg-board-brand__system">未来健康 · 营销内容工作台</div>
-              <h1 className="skg-board-brand__title">营销内容工作台 · TK 二创</h1>
-              <p className="skg-board-brand__subtitle">信息流广告复刻生产线</p>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <button
-              type="button"
-              onClick={() => setLibraryOpen(true)}
-              className="skg-secondary-action inline-flex h-10 items-center gap-1.5 px-3 text-[11px] font-semibold transition"
-              title="打开全局资源中心"
-            >
-              <BookOpen className="h-3.5 w-3.5" />
-              资源库
-            </button>
-            <button
-              type="button"
-              onClick={toggleBoardTheme}
-              className="skg-board-theme-toggle skg-secondary-action inline-flex h-10 items-center gap-1.5 px-3 text-[11px] font-semibold transition"
-              title={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
-            >
-              {boardTheme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-              {boardTheme === "dark" ? "明亮" : "暗色"}
-            </button>
-            <div className="grid min-w-[520px] grid-cols-5 gap-2 text-[11px]">
-              <Metric label="素材" value={`${jobs.length}`} />
-              <Metric label="当前" value={shortId(activeJobId)} />
-              <Metric label="视频" value={job?.video_url ? "ready" : "-"} />
-              <Metric label="文案段" value={`${transcriptCount}`} />
-              <Metric label="背景音" value={backgroundReady ? "ready" : "-"} />
-            </div>
-          </div>
-        </header>
-
-        <div className="grid min-h-0 flex-1 grid-cols-[320px_minmax(0,1fr)] gap-3">
-          <MaterialColumn
-            data={data}
-            step={workflow.input}
-            jobs={jobs}
+      <div className="relative z-10 mx-auto min-h-screen w-full min-w-[1280px] max-w-[1920px] px-4 py-4 xl:px-5">
+        <div className="skg-board-shell flex gap-4 p-4">
+          <WorkbenchRail
             job={job}
-            activeJobId={activeJobId}
-            url={url}
-            setUrl={setUrl}
-            fileRef={fileRef}
-            onSubmitUrl={submitUrl}
-            onStartProduction={startProduction}
+            jobsCount={jobs.length}
+            audioReady={audioReady}
+            visualReady={visualReady}
+            subjectAssetCount={subjectAssetCount}
+            generatedVideoCount={generatedVideos.length}
+            onOpenLibrary={() => setLibraryOpen(true)}
+            onToggleTheme={toggleBoardTheme}
+            boardTheme={boardTheme}
           />
 
-          <section className="skg-board-panel flex min-h-0 flex-col rounded-lg border border-white/10 bg-white/[0.035] shadow-2xl">
-            <header className="shrink-0 border-b border-white/10 p-3">
-              <div className="flex items-center justify-between gap-4">
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[#d6b36a]/18 bg-[#d6b36a]/10 text-[#f2d58a]"><Mic className="h-3.5 w-3.5" /></span>
-                    <WorkflowStepBadge step={workflow.source} compact />
-                    <h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
-                  </div>
-                  <div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
-                    {statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
+          <div className="flex min-w-0 flex-1 flex-col gap-3">
+            <header className="skg-board-topbar flex items-center justify-between gap-4 rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-3">
+                  <span className="skg-status-orb shrink-0 text-[10px] font-semibold">SKG</span>
+                  <div className="min-w-0">
+                    <div className="text-[11px] font-medium uppercase tracking-[0.28em] text-white/40">Marketing Production Console</div>
+                    <h1 className="mt-1 truncate text-[22px] font-semibold leading-tight text-white">信息流广告复刻工作台</h1>
                   </div>
                 </div>
-                <div className="flex shrink-0 items-center gap-2">
-                  <ModelTrace trace={audioModelTrace(runtimeModels)} compact />
-                  <ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
-                    <Mic className="h-3.5 w-3.5" />
-                    解析音频
-                  </ActionButton>
-                </div>
+                <p className="mt-2 truncate text-[12px] text-white/42">源视频分析、转换层确认、主体套图、逐句分镜和视频候选集中生产。</p>
+              </div>
+              <div className="grid min-w-[560px] grid-cols-5 gap-2 text-[11px]">
+                <Metric label="素材" value={`${jobs.length}`} />
+                <Metric label="当前" value={shortId(activeJobId)} />
+                <Metric label="视频" value={job?.video_url ? "ready" : "-"} />
+                <Metric label="文案段" value={`${transcriptCount}`} />
+                <Metric label="背景音" value={backgroundReady ? "ready" : "-"} />
               </div>
             </header>
 
-            <div className="min-h-0 flex-1 overflow-y-auto p-4">
-              <AudioIntakePanel
+            <div className="grid min-h-0 flex-1 grid-cols-[340px_minmax(0,1fr)] gap-3">
+              <MaterialColumn
+                data={data}
+                step={workflow.input}
+                jobs={jobs}
                 job={job}
-                selectedFrames={data.selectedFrames}
-                onToggleFrame={data.onToggleFrame}
-                onJobUpdate={data.onJobUpdate}
-                onAddFrame={data.onAddManualFrameForJob}
-                onDeleteFrame={data.onDeleteFrameForJob}
-                runtimeModels={runtimeModels}
-              />
-              <AudioStoryboardPlanPanel
-                job={job}
-                selectedFrames={data.selectedFrames}
-                onJobUpdate={data.onJobUpdate}
-                onDeleteVideo={data.onDeleteVideo}
-                runtimeModels={runtimeModels}
-                productStep={workflow.product}
-                scriptStep={workflow.script}
-                sceneStep={workflow.scene}
-                videoStep={workflow.video}
+                activeJobId={activeJobId}
+                url={url}
+                setUrl={setUrl}
+                fileRef={fileRef}
+                onSubmitUrl={submitUrl}
+                onStartProduction={startProduction}
               />
+
+              <section className="skg-board-panel flex min-h-0 flex-col rounded-[20px] border border-white/10 bg-white/[0.035] shadow-2xl">
+                <header className="shrink-0 border-b border-white/10 p-3">
+                  <div className="flex items-center justify-between gap-4">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Mic className="h-4 w-4" /></span>
+                        <WorkflowStepBadge step={workflow.source} compact />
+                        <h2 className="text-[15px] font-semibold leading-tight text-white">视频拆解</h2>
+                      </div>
+                      <div className="mt-1 truncate text-[11px] text-white/38" title={statusMessage}>
+                        {statusMessage || "下载源视频后解析音频，再抽参考帧并生成相似主体。"}
+                      </div>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      <ModelTrace trace={audioModelTrace(runtimeModels)} compact />
+                      <ActionButton disabled={!job?.video_url || audioRunning} onClick={() => data.onTranscribeAudio?.(job?.id)}>
+                        <Mic className="h-3.5 w-3.5" />
+                        解析音频
+                      </ActionButton>
+                    </div>
+                  </div>
+                </header>
+
+                <div className="min-h-0 flex-1 overflow-y-auto p-4">
+                  <AudioIntakePanel
+                    job={job}
+                    selectedFrames={data.selectedFrames}
+                    onToggleFrame={data.onToggleFrame}
+                    onJobUpdate={data.onJobUpdate}
+                    onAddFrame={data.onAddManualFrameForJob}
+                    onDeleteFrame={data.onDeleteFrameForJob}
+                    runtimeModels={runtimeModels}
+                  />
+                  <AudioStoryboardPlanPanel
+                    job={job}
+                    selectedFrames={data.selectedFrames}
+                    onJobUpdate={data.onJobUpdate}
+                    onDeleteVideo={data.onDeleteVideo}
+                    runtimeModels={runtimeModels}
+                    productStep={workflow.product}
+                    scriptStep={workflow.script}
+                    sceneStep={workflow.scene}
+                    videoStep={workflow.video}
+                  />
+                </div>
+              </section>
             </div>
-          </section>
-      </div>
+          </div>
+        </div>
       </div>
       <LibraryDrawer
         open={libraryOpen}
@@ -2589,6 +2585,77 @@ export function AdRecreationBoard({
   )
 }
 
+function WorkbenchRail({
+  job,
+  jobsCount,
+  audioReady,
+  visualReady,
+  subjectAssetCount,
+  generatedVideoCount,
+  onOpenLibrary,
+  onToggleTheme,
+  boardTheme,
+}: {
+  job: Job | null
+  jobsCount: number
+  audioReady: boolean
+  visualReady: boolean
+  subjectAssetCount: number
+  generatedVideoCount: number
+  onOpenLibrary: () => void
+  onToggleTheme: () => void
+  boardTheme: BoardThemeMode
+}) {
+  const railItems = [
+    { key: "jobs", label: "素材任务", icon: <Link2 className="h-[18px] w-[18px]" />, active: jobsCount > 0 },
+    { key: "source", label: "源视频", icon: <Play className="h-[18px] w-[18px]" />, active: !!job?.video_url },
+    { key: "audio", label: "音频文案", icon: <Mic className="h-[18px] w-[18px]" />, active: audioReady },
+    { key: "frames", label: "参考帧", icon: <ImageIcon className="h-[18px] w-[18px]" />, active: visualReady },
+    { key: "subject", label: "主体套图", icon: <Sparkles className="h-[18px] w-[18px]" />, active: subjectAssetCount > 0 },
+    { key: "video", label: "视频候选", icon: <Film className="h-[18px] w-[18px]" />, active: generatedVideoCount > 0 },
+  ]
+  return (
+    <aside className="skg-board-rail sticky top-4 flex shrink-0 flex-col items-center py-5" aria-label="工作台导航">
+      <div className="skg-board-rail__logo mb-8 flex h-9 w-9 items-center justify-center rounded-full text-[12px] font-semibold" title="SKG Marketing Studio">
+        S
+      </div>
+      <nav className="flex flex-1 flex-col items-center gap-4">
+        {railItems.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            className={`skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full ${item.active ? "is-active" : ""}`}
+            title={item.label}
+            aria-label={item.label}
+          >
+            {item.icon}
+          </button>
+        ))}
+      </nav>
+      <div className="mt-8 flex flex-col items-center gap-3">
+        <button
+          type="button"
+          onClick={onOpenLibrary}
+          className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
+          title="资源库"
+          aria-label="打开资源库"
+        >
+          <BookOpen className="h-[18px] w-[18px]" />
+        </button>
+        <button
+          type="button"
+          onClick={onToggleTheme}
+          className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
+          title={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
+          aria-label={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
+        >
+          {boardTheme === "dark" ? <Sun className="h-[18px] w-[18px]" /> : <Moon className="h-[18px] w-[18px]" />}
+        </button>
+      </div>
+    </aside>
+  )
+}
+
 function MaterialColumn({
   data,
   step,
@@ -2616,10 +2683,10 @@ function MaterialColumn({
     ? job.video_url ? "重新解析" : "重新下载"
     : "开始分析"
   return (
-    <section className="skg-board-panel flex min-h-0 flex-col gap-3 rounded-lg border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
+    <section className="skg-board-panel flex min-h-0 flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
       <header className="shrink-0 border-b border-white/10 pb-3">
         <div className="mb-2 flex items-center gap-2">
-          <span className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[#d6b36a]/18 bg-[#d6b36a]/10 text-[#f2d58a]"><Plus className="h-4 w-4" /></span>
+          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>
           <WorkflowStepBadge step={step} compact />
         </div>
         <h2 className="text-[15px] font-semibold leading-tight text-white">素材输入</h2>
@@ -2632,7 +2699,7 @@ function MaterialColumn({
           onChange={(e) => setUrl(e.target.value)}
           onKeyDown={(e) => { if (e.key === "Enter") onSubmitUrl() }}
           placeholder="粘贴 TK / 信息流视频链接"
-          className="h-10 min-w-0 flex-1 rounded-md border border-white/10 bg-black/45 px-3 text-[13px] text-white outline-none placeholder:text-white/28 focus:border-[#d6b36a]/60"
+          className="h-10 min-w-0 flex-1 rounded-md border border-white/10 bg-black/35 px-3 text-[13px] text-white outline-none placeholder:text-white/28 focus:border-[#a2c638]/60"
         />
         <button
           type="button"
@@ -2909,7 +2976,7 @@ function AudioIntakePanel({
   }
 
   return (
-    <section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
+    <section className="skg-glass-card border border-white/10 p-3">
       <div className="mb-2 flex items-center justify-between gap-3">
         <SectionTitle icon={<Film className="h-4 w-4" />} title="源视频工作区" />
         <div className="flex items-center gap-2 font-mono text-[11px] text-white/38">
@@ -2930,7 +2997,7 @@ function AudioIntakePanel({
                 <span className="font-mono text-[11px] text-white/38">{currentTime.toFixed(1)}s</span>
               </div>
               <div
-                className="relative mx-auto aspect-[9/16] overflow-hidden rounded-md border border-white/10 bg-black"
+                className="relative mx-auto aspect-[9/16] overflow-hidden rounded-[20px] border border-white/10 bg-black shadow-[10px_10px_10px_rgba(0,0,0,0.3)]"
                 style={{ height: SOURCE_VIDEO_HEIGHT }}
               >
                 {job.video_url ? (
@@ -2959,7 +3026,7 @@ function AudioIntakePanel({
                   onClick={() => void addFrameAtCurrentTime()}
                   disabled={!job.video_url || !onAddFrame || manualBusy || job.status === "splitting"}
                   title={`按当前播放位置手动抽帧：${currentTime.toFixed(1)}s`}
-                  className="absolute right-2 top-2 inline-flex h-7 items-center justify-center gap-1 rounded-md border border-emerald-200/30 bg-black/78 px-2 text-[10.5px] font-semibold text-emerald-100 shadow-lg backdrop-blur transition hover:border-emerald-100/65 hover:bg-emerald-300/18 disabled:cursor-not-allowed disabled:opacity-35"
+                  className="absolute right-2 top-2 inline-flex h-7 items-center justify-center gap-1 rounded-md border border-[#a2c638]/35 bg-black/78 px-2 text-[10.5px] font-semibold text-[#e0f5a0] shadow-lg backdrop-blur transition hover:border-[#a2c638]/70 hover:bg-[#a2c638]/18 disabled:cursor-not-allowed disabled:opacity-35"
                 >
                   {manualBusy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
                   当前点抽帧
@@ -2976,7 +3043,7 @@ function AudioIntakePanel({
             </div>
 
             <div className="min-w-0 space-y-2">
-              <div className="relative z-40 overflow-visible rounded-md border border-white/10 bg-black/32 p-2">
+              <div className="skg-glass-card--flat relative z-40 overflow-visible border border-white/10 p-2">
                 <div className="mb-1 flex items-center justify-end gap-3 text-[10px] text-white/40">
                   <FilmstripDensityControls
                     density={filmstripDensity}
@@ -3916,13 +3983,13 @@ function SourceSubjectPipeline({
           </button>
         </div>
         <div
-          className={`rounded-md border p-1.5 transition ${
-            filmstripDragging
-              ? referenceDropActive
-                ? "border-[#d6b36a]/80 bg-[#d6b36a]/12 ring-1 ring-[#d6b36a]/45"
-                : "border-[#d6b36a]/45 bg-[#d6b36a]/[0.065]"
-              : "border-white/10 bg-black/32"
-          }`}
+	          className={`skg-glass-card--flat border p-1.5 transition ${
+	            filmstripDragging
+	              ? referenceDropActive
+	                ? "border-[#a2c638]/80 bg-[#a2c638]/12 ring-1 ring-[#a2c638]/45"
+	                : "border-[#a2c638]/45 bg-[#a2c638]/[0.065]"
+	              : "border-white/10 bg-black/28"
+	          }`}
           onDragEnter={(event) => {
             if (!onDropFilmstripFrame) return
             event.preventDefault()
@@ -4017,7 +4084,7 @@ function SourceSubjectPipeline({
           </span>
         </div>
         <div
-          className="flex flex-col gap-2 overflow-y-auto rounded-md border border-white/10 bg-black/24 p-2"
+	          className="skg-glass-card--flat flex flex-col gap-2 overflow-y-auto border border-white/10 p-2"
           style={{ maxHeight: SOURCE_CONVERSION_MAX_HEIGHT }}
         >
           <div className="grid shrink-0 grid-cols-2 gap-1.5">
@@ -4028,8 +4095,8 @@ function SourceSubjectPipeline({
                 onClick={() => setSubjectModelBundle(option.value)}
                 className={`rounded-md border px-2 py-1.5 text-left transition ${
                   subjectModelBundle === option.value
-                    ? "border-cyan-200/65 bg-cyan-300/12 text-cyan-50"
-                    : "border-white/10 bg-black/26 text-white/52 hover:border-white/24 hover:text-white/76"
+	                    ? "border-[#a2c638]/65 bg-[#a2c638]/12 text-white"
+	                    : "border-white/10 bg-black/24 text-white/52 hover:border-white/24 hover:text-white/76"
                 }`}
                 title={option.detail}
               >
@@ -4041,9 +4108,9 @@ function SourceSubjectPipeline({
 
           <div
             className={`shrink-0 rounded-md border p-2 transition ${
-              agentDropActive || referenceFrameDragging || filmstripDragging || agentReferenceUploadBusy
-                ? "border-cyan-200/65 bg-cyan-300/[0.08] ring-1 ring-cyan-200/25"
-                : "border-white/10 bg-black/22"
+	              agentDropActive || referenceFrameDragging || filmstripDragging || agentReferenceUploadBusy
+	                ? "border-[#a2c638]/65 bg-[#a2c638]/[0.08] ring-1 ring-[#a2c638]/25"
+	                : "border-white/10 bg-black/22"
             }`}
             onDragEnter={handleAgentReferenceDragEnter}
             onDragOver={handleAgentReferenceDragOver}
@@ -4076,7 +4143,7 @@ function SourceSubjectPipeline({
               </div>
             ) : (
               <div className="flex h-[72px] flex-col items-center justify-center rounded border border-dashed border-white/15 px-3 text-center text-[10px] leading-snug text-white/34">
-                {agentReferenceUploadBusy ? <Loader2 className="mb-1.5 h-4 w-4 animate-spin text-cyan-100/80" /> : <Upload className="mb-1.5 h-4 w-4 text-cyan-100/55" />}
+	                {agentReferenceUploadBusy ? <Loader2 className="mb-1.5 h-4 w-4 animate-spin text-[#d7efbc]" /> : <Upload className="mb-1.5 h-4 w-4 text-[#d7efbc]/70" />}
                 <span className="font-semibold text-white/50">拖入参考帧或本地图片</span>
                 <span className="mt-0.5 text-white/28">也可点左侧缩略图上的 +</span>
               </div>
@@ -4098,9 +4165,9 @@ function SourceSubjectPipeline({
           </div>
 
           {agentAnalysis ? (
-            <div className="shrink-0 rounded-md border border-emerald-200/18 bg-emerald-300/[0.055] p-2">
+	            <div className="shrink-0 rounded-md border border-[#a2c638]/24 bg-[#a2c638]/[0.07] p-2">
               <div className="flex items-center justify-between gap-2">
-                <span className="text-[10px] font-semibold text-emerald-50/76">识别结果</span>
+	                <span className="text-[10px] font-semibold text-[#d7efbc]">识别结果</span>
                 <span className="text-[9px] text-white/34">
                   点亮=保留 · 再点取消
                 </span>
@@ -4109,7 +4176,7 @@ function SourceSubjectPipeline({
               {agentTraits.length ? (
                 <>
                   <div className="mt-2 flex items-center justify-between gap-2 text-[9px]">
-                    <span className={agentSelectedTraitsDirty ? "text-cyan-100/56" : "text-white/34"}>
+	                    <span className={agentSelectedTraitsDirty ? "text-[#d7efbc]/70" : "text-white/34"}>
                       保留元素 {selectedAgentTraits.length} 个{agentSelectedTraitsDirty ? " · 待发送" : ""}
                     </span>
                     {selectedAgentTraits.length ? (
@@ -4134,7 +4201,7 @@ function SourceSubjectPipeline({
                           title={active ? "已作为保留元素，再点取消" : "点一下加入保留元素"}
                           className={`inline-flex min-h-[22px] cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-[9px] transition ${
                             active
-                              ? "border-emerald-100/65 bg-emerald-300/16 text-emerald-50 shadow-[0_0_0_1px_rgba(167,243,208,0.12)]"
+	                              ? "border-[#a2c638]/65 bg-[#a2c638]/16 text-[#e9f6b8] shadow-[0_0_0_1px_rgba(162,198,56,0.12)]"
                               : "border-white/10 bg-black/26 text-white/46 hover:border-white/22 hover:text-white/70"
                           }`}
                         >
@@ -4149,14 +4216,14 @@ function SourceSubjectPipeline({
             </div>
           ) : null}
 
-          <div className="flex shrink-0 flex-col rounded-md border border-white/10 bg-black/22 p-2">
+	          <div className="flex shrink-0 flex-col rounded-md border border-white/10 bg-black/22 p-2">
             <div className="mb-1.5 flex items-center justify-between gap-2">
               <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-white/72">
-                <MessageSquare className="h-3.5 w-3.5 text-cyan-100/55" />
+	                <MessageSquare className="h-3.5 w-3.5 text-[#d7efbc]/70" />
                 生成要求
               </span>
               {effectivePrompt ? (
-                <span className="inline-flex h-6 items-center gap-1 rounded-md border border-[#d6b36a]/24 bg-[#d6b36a]/[0.07] px-2 text-[9px] font-semibold text-[#f4dc88]">
+	                <span className="inline-flex h-6 items-center gap-1 rounded-md border border-[#a2c638]/28 bg-[#a2c638]/[0.08] px-2 text-[9px] font-semibold text-[#d7efbc]">
                   <Check className="h-3 w-3" />
                   提示词就绪 · {effectiveAgentViews.length} 张
                 </span>
@@ -4171,7 +4238,7 @@ function SourceSubjectPipeline({
                 value={agentInput}
                 onChange={(event) => setAgentInput(event.target.value)}
                 placeholder="直接写要怎么生成，或补充要改什么。"
-                className="h-32 w-full resize-none rounded border border-transparent bg-transparent px-2 py-2 text-[11px] leading-relaxed text-white outline-none transition placeholder:text-white/24 focus:border-cyan-200/45"
+	                className="h-32 w-full resize-none rounded border border-transparent bg-transparent px-2 py-2 text-[11px] leading-relaxed text-white outline-none transition placeholder:text-white/24 focus:border-[#a2c638]/45"
               />
               <div className="mt-2 flex items-center gap-2">
                 <div className="flex h-10 shrink-0 items-center overflow-hidden rounded-md border border-white/10 bg-black/35">
@@ -4242,7 +4309,7 @@ function SourceSubjectPipeline({
             {subjectAssetPacks.length ? `${subjectAssetPacks.length} 套` : "待生成"}
           </span>
         </div>
-        <div className="rounded-md border border-white/10 bg-black/32 p-2">
+	        <div className="skg-glass-card--flat border border-white/10 p-2">
           {subjectBusyFor ? (
             <div className="mb-2 rounded-md border border-cyan-200/20 bg-cyan-300/[0.07] px-2.5 py-2 text-[10px] leading-snug text-cyan-50/70">
               正在生成{reconstructionModeConfig(subjectBusyFor.mode).label} {subjectBusyFor.viewCount} 张；参考 {subjectBusyFor.sourceCount || "自主描述"}。
@@ -4253,7 +4320,7 @@ function SourceSubjectPipeline({
           {subjectAssetPacks.length ? (
             <div className="grid grid-cols-[minmax(0,1fr)_260px] gap-2">
               {activeSubjectPack ? (
-                <div className="rounded-md border border-[#d6b36a]/28 bg-[#d6b36a]/[0.07] p-2">
+	                <div className="rounded-md border border-[#a2c638]/28 bg-[#a2c638]/[0.07] p-2">
                   <div className="mb-2 flex items-center justify-between gap-2">
                     <div className="min-w-0">
                       <div className="truncate text-[11px] font-semibold text-white">{activeSubjectPack.label}</div>
@@ -7883,7 +7950,7 @@ function MaterialCard({
     <button
       type="button"
       onClick={onClick}
-      className={`group w-full rounded-lg border p-3 text-left transition ${active ? "border-[#d6b36a]/55 bg-[#d6b36a]/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]" : "border-white/10 bg-black/28 hover:border-[#d6b36a]/28 hover:bg-white/[0.045]"}`}
+      className={`group skg-glass-card--flat w-full border p-3 text-left transition ${active ? "border-[#a2c638]/55 bg-[#a2c638]/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]" : "border-white/10 bg-black/24 hover:border-[#a2c638]/30 hover:bg-white/[0.055]"}`}
     >
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0">
@@ -7918,7 +7985,7 @@ function MaterialCard({
               onDelete()
             }
           }}
-          className="mt-3 hidden h-8 items-center justify-center gap-1 rounded-md border border-white/10 text-[11px] text-white/50 transition hover:border-[#d6b36a]/40 hover:text-[#f2d58a] group-hover:flex"
+          className="mt-3 hidden h-8 items-center justify-center gap-1 rounded-md border border-white/10 text-[11px] text-white/50 transition hover:border-[#a2c638]/40 hover:text-[#c8cd19] group-hover:flex"
         >
           <Trash2 className="h-3.5 w-3.5" />
           删除素材