From 79ab9b4f738cf3db3a99db30b0cca2c7f2344930 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Mon, 21 Sep 2026 01:52:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(student-ui):=20=E5=AD=A6=E7=94=9F=E7=AB=AF?=
 =?UTF-8?q?=E5=AE=9E=E8=AE=AD=E9=A1=B5=E5=A2=A8=E9=BB=91=E6=9E=81=E7=AE=80?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新产品调查与分析页作为墨黑极简标准样例
- 产品开发关键因素、产品开发主要流程页重设计：
  任务头合并、杂志章节风步骤导航（大号编号+引导线）、
  纯白表格、按钮四级层级、甘特图上传区中性化
- 学生首页贴边纯白、图表灰度配色
- 移除 app-container 与第三方AIGC页蓝色重投影
- 新增项目级 skill：ink-training-theme
- 新增学生端页面 UI 清单文档
---
 .trae/skills/ink-training-theme/SKILL.md      |  244 +++
 docs/学生端页面UI清单.md               |  245 +++
 src/assets/styles/index.scss                  |    2 -
 .../components/thirdPartyAIGC.vue             |   32 +-
 src/views/foundation/new-product-survey.vue   | 1395 +++++++++++------
 .../product-development-factors.vue           | 1251 +++++++++------
 .../product-development-process.vue           | 1374 +++++++++++++++-
 src/views/student/index.vue                   |   93 +-
 8 files changed, 3600 insertions(+), 1036 deletions(-)
 create mode 100644 .trae/skills/ink-training-theme/SKILL.md
 create mode 100644 docs/学生端页面UI清单.md

diff --git a/.trae/skills/ink-training-theme/SKILL.md b/.trae/skills/ink-training-theme/SKILL.md
new file mode 100644
index 0000000..a7f0543
--- /dev/null
+++ b/.trae/skills/ink-training-theme/SKILL.md
@@ -0,0 +1,244 @@
+---
+name: ink-training-theme
+description: Apply the ink-minimal visual style to student training pages (Vue 3 + Element Plus + student-training.scss). Use when restyling or redesigning student practical-training pages, buttons, tables, or type scale in this repo. Do not use for admin/management pages or business-logic changes.
+---
+
+# 墨黑极简 · 学生实训页设计规范
+
+本技能用于把学生端实训页（`.student-training-shell` 体系）统一为当前已在
+`src/views/foundation/new-product-survey.vue` 落地的「墨黑极简」风格：纯白画布、
+墨黑主操作、中性灰层次、紧凑排版。该 Vue 文件是整体标准样例；**步骤导航**
+以本规范「步骤导航：杂志章节风」一节为准（已在 `product-development-factors.vue`、
+`product-development-process.vue` 落地），拿不准时先读这三个文件。
+
+## 边界
+
+- 只动 template 结构与样式；script 业务逻辑（判题/保存/草稿/上传/接口）一律不碰。
+- 仅作用于当前页根类，不得影响其他页面；不修改全局 `student-training.scss`。
+- 表格类内容区不铺任何底色，对错只靠文字反馈，不靠行背景。
+
+## 实施流程
+
+1. 读目标页，确认根类（如 `.xxx-page.student-training-shell`）和现有 DOM。
+2. 在页面 scoped 样式的根类块内定义全部令牌（见下），让所有
+   `var(--student-*)` 规则自动重着色，不要逐处打补丁。
+3. 新增一个非 scoped `<style lang="scss">` 块，选择器全部以页面根类为锚：
+   - 覆盖祖先 `app-main` 画布背景（scoped 触及不到祖先）；
+   - 重写步骤导航（全局规则带 `!important`，scoped 无法取胜，见步骤导航一节）；
+   - 给子组件（AI 侧栏、工具栏等）换肤。
+4. 按按钮四级层级、字号梯度、间距规则逐区收紧。
+5. 完成后用 GetDiagnostics 校验，并全文搜索蓝色旧值确认无残留。
+
+## 颜色令牌
+
+在页面根类中定义：
+
+```scss
+.xxx-page {
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 点缀：暖橙，仅极小面积 */
+  --student-terracotta: #e8953c;
+  /* 语义色 */
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  /* 三层次标识：石墨 / 青灰 / 灰紫（仅小色条，不做行底色） */
+  --student-layer-1: #374151;
+  --student-layer-2: #43a294;
+  --student-layer-3: #8b6fc0;
+  /* 结构色 */
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+}
+```
+
+非 scoped 块中的画布与行高：
+
+```scss
+#app .studentLayout .app-main:has(.xxx-page) {
+  background: #ffffff !important;          /* 纯白，无渐变 */
+}
+#app .studentLayout .app-main:has(.xxx-page) .xxx-page {
+  line-height: 1.55 !important;            /* 全局为 1.8，本页收紧 */
+}
+```
+
+## 字号层级（紧凑）
+
+覆盖全局字号令牌，整体下调一档：
+
+| 令牌 | 值 | 用途 |
+|------|----|------|
+| --student-fs-display | 17px | 页面主标题（700，行高 1.35） |
+| --student-fs-h1 | 15px | 步骤大标题（700） |
+| --student-fs-h2 | 14px | 面板/行标题（600） |
+| --student-fs-h3 | 13px | 区块小标题 |
+| --student-fs-body | 13px | 正文 |
+| --student-fs-body-sm | 12px | 表格/次要文字 |
+| --student-fs-caption | 11px | 标签/徽章 |
+| --student-fs-button / -lg | 13px | 按钮文字 |
+| --student-fs-data | 14px | 数字/成绩，配等宽字体 |
+
+标题区三级关系：上方灰色宽字距小标签（11px，`#6b7280`，letter-spacing 0.12em，
+无底色胶囊）→ 黑色步骤标题 → 灰色说明文字。禁止再用实底色 "STEP 01" 胶囊。
+
+## 步骤导航：杂志章节风
+
+大号编号做视觉主角，像书籍目录页。无底色、无边框、无凹槽、无连接线。
+已落地样例：`product-development-factors.vue`、`product-development-process.vue`。
+
+### 结构
+
+```html
+<nav class="step-indicator" aria-label="实训步骤">
+  <button
+    v-for="(step, index) in trainingSteps"
+    :key="`${step}-${index}`"
+    type="button"
+    :class="['step-tab', { active: /* 当前 */, complete: /* 已完成 */ }]"
+    @click="/* 切换步骤 */"
+  >
+    <span class="step-bar" aria-hidden="true"></span>
+    <span class="step-no">{{ String(index + 1).padStart(2, '0') }}</span>
+    <span class="step-name">{{ step }}</span>
+  </button>
+</nav>
+```
+
+编号**常显**，不随完成态切 ✓。注意各页 `currentStep` 基准不同
+（factors 为 0-based、process 为 1-based），只改模板/样式时不要动这个逻辑。
+
+### 视觉规格
+
+| 元素 | 规格 |
+|------|------|
+| `.step-indicator` | flex 水平居中，gap 28px；无 border/底色/阴影；margin `2px 0 20px` |
+| `.step-tab` | `flex: 1 1 0`，max-width 160px；纵向排列（引导线→编号→名称），左对齐，gap 8px；无 border/底色 |
+| `.step-bar` | 24×3px；默认透明，仅当前步骤 `#1f2937` |
+| `.step-no` | **32px**、800 字重、等宽字体、letter-spacing -1px |
+| `.step-name` | 12px，左对齐、允许换行 |
+
+三态：
+
+- **未到达**：编号 `#d1d5db`，名称 `#9ca3af`；hover 编号与名称转 `#6b7280`，无底色。
+- **已完成**：编号与名称 `#6b7280`（名称 600）；编号右上角缀 7px 绿色小圆点
+  （`.step-no::after`，top -3px / right -8px，`--student-success`）。
+- **当前**：引导线墨黑，编号 `#1f2937`，名称 `#1f2937`、700。
+
+### 覆盖机制（不做这步，页面仍是浅蓝大胶囊）
+
+全局 `student-training.scss` 对 `.student-training-shell .step-indicator` 与
+`.step-tab` 全部以 `!important` 锁定浅蓝底（`#f0f6fd`）、全胶囊圆角、固定高度、
+`white-space: nowrap`，并在 ≤1100px 用 `!important` 强制纵向堆叠。
+**scoped 样式无论怎么写特异性都打不赢**（scoped 属性选择器不增加 id 级特异性）。
+
+正确做法——规则放进页面**非 scoped** 块，选择器带 id 锚点且每条声明 `!important`：
+
+```scss
+#app .studentLayout section.app-main:has(.xxx-page) .step-indicator { /* … */ !important; }
+#app .studentLayout section.app-main:has(.xxx-page) .step-indicator .step-tab { /* … */ !important; }
+```
+
+必须显式重置的全局残留：容器的 `padding / border / border-radius / background /
+box-shadow`；tab 的 `min-height / height / padding / border / border-radius /
+white-space`（改回 `normal` 以允许步骤名换行）。
+
+窄屏在非 scoped 块自行处理，**不要**接受全局 1100px 纵向规则：
+
+```scss
+@media (max-width: 900px) {
+  #app …:has(.xxx-page) .step-indicator {
+    justify-content: flex-start;
+    overflow-x: auto;          /* 横向滑动 */
+  }
+  #app …:has(.xxx-page) .step-tab { flex: 0 0 112px; max-width: none; }
+}
+```
+
+## 按钮规范
+
+扁平无渐变，强制 `text-shadow: none`；圆角矩形而非全胶囊。标准页有两个按钮位置，
+规格不同，不要混用：
+
+### 四级层级
+
+1. **一级主操作**：墨黑实底 `#1f2937` 白字 + 中性柔影，hover `#111827`。
+   用于下一步/提交任务/AI 发送/智能评分。
+2. **二级描边**：白底 + 描边 + `#1f2937` 字，hover 墨黑描边 + `#f3f4f6` 底。
+   用于上一步/下载/重新实训/导出/清空。
+3. **三级浅灰底**：`#f3f4f6` 底 + `#374151` 字，hover `#e9ecef`。用于保存草稿。
+4. **危险文字**：无底色，`#d9554c` 文字链接，hover 深红加下划线。用于删除。
+
+禁用态统一 `opacity: 0.5` + `not-allowed`，`transform: none`、去掉阴影，形状不跳变。
+loading 态保持原配色。
+
+### 位置 A：底部步骤导航（40px 标准按钮）
+
+结构（原生 `<button>`，容器 `.step-navigation` 居中 flex，gap 14px）：
+
+```html
+<div class="step-navigation">
+  <button class="btn-nav btn-ghost" @click="prevStep"><el-icon><ArrowLeft /></el-icon>上一步</button>
+  <button class="btn-nav btn-save" @click="saveCurrentProgress"><el-icon><CircleCheck /></el-icon>保存当前进度</button>
+  <button class="btn-nav btn-primary" @click="nextStep">下一步<el-icon><ArrowRight /></el-icon></button>
+  <span class="step-progress">Step 01 / 04</span>
+</div>
+```
+
+- 三按钮统一 **40px 高、10px 圆角、700 字重、13px 字、gap 8px**；
+  ghost/primary 横向 padding 18px（primary 可 22px）。
+- 次按钮基类（`.outline-action, .btn-nav` 共用）：白底，描边
+  `1px solid rgba(31, 41, 55, 0.4)`，字色 `var(--student-accent)`。
+- hover：`translateY(-1px)` + 描边变实色墨黑 + 底变 `var(--student-accent-soft)`
+  + 阴影 `0 3px 10px rgba(31,41,55,.12)`；active 回落 `translateY(0)`。
+- primary：墨黑实底 + 阴影 `0 3px 10px rgba(31,41,55,.28)`，hover 加深为
+  `#111827`、阴影 `0 5px 14px rgba(31,41,55,.32)`。
+- save：`#f3f4f6` 底、`#e5e7eb` 描边、`#374151` 字，无重投影；视觉权重
+  低于 ghost，形成 实底黑 > 描边白 > 浅灰底 的层级。
+- `.step-progress`：绝对定位右侧，12px 等宽数字、`#6b7280`、800 字重；
+  ≤1100px 时改为静态独占一行居中。
+- ≤900px：导航纵向排列，`.btn-nav` 全部 `width: 100%`。
+
+### 位置 B：顶部任务工具栏（36px 紧凑小按钮）
+
+工具栏是子组件（Element Plus `.el-button`），在页面非 scoped 块中以页面根类为锚
+换肤（如 `.xxx-page .task-toolbar-button.el-button`），容器 gap 8px：
+
+- 次按钮（下载案例资料/重新实训/导出实训成果）：**36px 高、8px 圆角、600 字重、
+  13px 字**，白底 + `#d1d5db` 描边 + `#374151` 字；hover 描边和字变 `#1f2937`、
+  底 `#f9fafb`、阴影 `0 2px 6px rgba(17,24,39,.1)`。图标 14px 且 `color: inherit`。
+- 提交按钮（`.task-toolbar-button--submit`）：墨黑实底白字 +
+  `0 2px 8px rgba(17,24,39,.22)`，hover `#111827` + 阴影加深。
+- loading 态强制保持白底灰描边，不随 Element Plus 默认变蓝。
+- 无资料时的 plain 态：字色 `#9ca3af`，hover 只到 `#6b7280` + `#f9fafb`。
+- 步骤标题行内的小号导出按钮可再缩到 32px 高、12px 字。
+
+## 表格规则
+
+- 表头、单元格、外容器一律不设 background（默认透明白），包括 hover、选中、判题后。
+- 表头仅用 12–13px、800–900 字重，无渐变底。
+- 只保留 `#e5e7eb` 浅灰边框与行间分隔线。
+- 序号用 22px 浅灰圆角方块（`#f3f4f6`）+ 等宽数字。
+- 判题结果：单元格内文字反馈（绿/红）+ 底部汇总横幅（8–10px 圆角、8% 同色底）。
+- 三层次概念仅靠维度名前 3–4px 小色条标识。
+
+## 间距（紧凑）
+
+- 主列 gap 10px；卡片内 padding 12px；字段组 padding 12px。
+- 步骤标题下 10px、说明下 14px、字段块间 12px、表格上 14px。
+- 行高：页面 1.55，标题 1.35，说明 1.6，表格次要文字 1.55。
+
+## 子组件换肤要点
+
+- AI 侧栏面板、气泡、输入框、发送按钮全部中性灰白；其内部 Element Plus
+  主色按钮通过覆盖组件内 CSS 变量或 `.el-button--primary` 改墨黑。
+- 工具栏 `TrainingTaskToolbar` / `TrainingMaterialButton` 按「按钮规范 · 位置 B」
+  换肤；提交按钮保留墨黑实底作为主操作。
+- Element Plus 单选：选中圆点 `#1f2937` 填充白勾，覆盖默认蓝；带边框单选项
+  选中墨黑描边黑字。下拉选中值用深色 + `-webkit-text-fill-color` 防透明。
diff --git a/docs/学生端页面UI清单.md b/docs/学生端页面UI清单.md
new file mode 100644
index 0000000..8144c94
--- /dev/null
+++ b/docs/学生端页面UI清单.md
@@ -0,0 +1,245 @@
+# 学生端页面 UI 清单
+
+> 用途：学生端 UI 调整前的页面盘点。信息来源：`src/router/index.js`（`roles: ["student"]` 路由组）、`src/utils/studentTrainingNavigation.js`（学生实训导航映射）及各页面源码。
+> 生成日期：2026-09-20
+
+---
+
+## 1. 学生端页面总览
+
+学生端路由全部位于 `src/router/index.js` 中 `roles: ["student"]` 的分组，共 **44 个路由**（对应约 42 个视图文件：`analysis.vue`/`dialogue.vue` 各被 2 条路由复用，`GenericTrainingPage.vue` 服务 2 条路由）。按性质分为三类：
+
+| 分类 | 数量 | 说明 |
+|------|------|------|
+| 入口/功能页 | 13 | 首页仪表盘、AI 助手、学情分析、BI 可视化、实验报告、考试等 |
+| 实训模块页 | 28 | 6 大模块下的实训任务页（本次 UI 调整重点） |
+| 公共实训壳 | 3 | 综合实训、动态任务页、自定义步骤页（多任务复用） |
+
+---
+
+## 2. 入口/功能页
+
+| # | 路由 | 菜单标题 | 视图文件 | 布局形态 |
+|---|------|---------|---------|---------|
+| 1 | `/index` | 首页（学生仪表盘） | `views/index.vue` 按角色渲染 → 学生仪表盘 `views/student/index.vue` | 卡片 + ECharts |
+| 2 | `/assistant/index` | AI智能助手 | `views/AI/index.vue` | 对话式 |
+| 3 | `/ai/learning-situation-analysis` | AI学情分析 | `views/analysis-of-students/analysis.vue` | 对话入口列表 |
+| 4 | `/ai/learning-situation-dialogue` | AI学情对话 | `views/analysis-of-students/dialogue.vue` | 对话式 |
+| 5 | `/ai/teaching-plan` | AI助手（实训教案） | `views/analysis-of-students/training-lesson-plan.vue` | 对话式 |
+| 6 | `/analysis/index` | 学情分析（旧入口） | `views/analysis-of-students/analysis.vue` | 同 #3 同组件 |
+| 7 | `/analysis/dialogue` | 学情对话（旧入口） | `views/analysis-of-students/dialogue.vue` | 同 #4 同组件 |
+| 8 | `/bi` | BI可视化分析 | `views/visual-analysis/index.vue` | el-tabs + iframe |
+| 9 | `/report/index` | 实验报告 | `views/test-report/index.vue` | 表格卡片 |
+| 10 | `/examination/index` | 考试考核 | `views/exam/index.vue` | 列表页（浅色） |
+| 11 | `/examination/take/:id` | 考试作答 | `views/exam/take.vue` | 表单 |
+| 12 | `/examination/result/:id` | 考试成绩 | `views/exam/result.vue` | 详情 |
+| 13 | `/student-demo`（hidden） | 学生演示页 | `views/studentDemo/index.vue` | 演示页 |
+
+### 各页 UI 结构要点
+
+**① 学生首页仪表盘**（`views/student/index.vue`，经 `views/index.vue` 按角色渲染）
+- 「我的实训成绩」卡片：模块成绩分布 ECharts 饼图 + 成绩明细表格
+- 「实训进度概览」卡片：学习时长条形图、任务完成进度条形图
+- ECharts 需 `resize` 监听与 `dispose` 清理
+
+**② AI智能助手**（`views/AI/index.vue`）
+- 顶部 tab 导航 + 步骤/章节导航（左侧）
+- 上传/导出按钮、QA 对话列表、加载态、底部输入框
+
+**③④ 学情分析 / 对话**（`analysis-of-students/analysis.vue`、`dialogue.vue`）
+- `stu-analysis-of-students` 根 class，顶部提示标题 + 分析入口按钮列表（点击触发 AI 分段输出）
+- 深蓝色系提示条，无成绩数据时 `el-empty`
+
+**⑤ BI可视化分析**（`views/visual-analysis/index.vue`）
+- `el-tabs` 两个页签：「数据源管理」（`digitalMarketingAlgorithms/bigData` 组件）、「BI可视化分析」（iframe 嵌入 `VITE_APP_BI_URL`）
+- 深色主题：背景 `#06121f`、tab 文字 `#a9d8ff`（硬编码，UI 调整注意）
+
+**⑥ 实验报告**（`views/test-report/index.vue`）
+- 标题（白字 + 深蓝 text-shadow）→ 学生信息行（姓名/学号/班级）→ 总成绩卡片（含班级排名 + 模块成绩表格）→ 实训任务明细卡片（任务名/模块/完成状态/AI 评分表格）
+- 深色背景浅色文字，样式简单（约 5 条 scoped 规则）
+
+**⑦ 考试考核**（`views/exam/index.vue`）
+- 页头（标题+刷新按钮）→ 状态筛选按钮组（全部/未开始/进行中/已结束，带数量徽标）→ 考试列表行（日期块 | 信息区 el-tag+标题+时间 | 操作按钮）
+- 浅色主题 `#20282d`，主题色 `#16839c`（青绿色，与其他模块蓝色系不一致，UI 调整注意）
+- 有移动端断点 `@media(max-width:650px)`
+
+**⑧⑨ 考试作答/成绩**（`exam/take.vue`、`exam/result.vue`）
+- 本轮未深入调研，UI 调整时单独阅读
+
+---
+
+## 3. 实训模块页（UI 调整重点）
+
+> 通用结构（新版实训壳，绝大多数页面遵循）：
+> `student-training-shell` 根容器 → `task-header` 顶部任务标题/背景（内嵌 `TrainingTaskBrief`）→ 步骤导航（`step-indicator` / `step-tabs`）→ 分步骤表单/表格/上传区 → 底部操作栏（上一步/保存/下一步/提交）→ 右侧 `TrainingAiSidebar`（AI 学习提示，可折叠）
+
+### 3.1 互联网产品开发基础（`/foundation`，3 页）
+
+| # | 路由 | 标题 | 文件 |
+|---|------|------|------|
+| 1 | `/foundation/new-product-survey` | 新产品调查与分析 | `views/foundation/new-product-survey.vue` |
+| 2 | `/foundation/product-development-factors` | 产品开发关键因素 | `views/foundation/product-development-factors.vue` |
+| 3 | `/foundation/product-development-process` | 产品开发主要流程 | `views/foundation/product-development-process.vue` |
+
+- **新产品调查与分析**：4 步。Step01 产品卖点三层次分类（`TrainingStepOneChoiceQuestions` + 分类表格 + `el-select` + 判题反馈）；Step02 实地调研记录（表单分组、平台/场景单选、关键词、产品名、图片上传预览列表）；Step03 三层次对照分析表格 + textarea；Step04 价值判断 3 个文本域。含图片预览 Dialog。
+- **产品开发关键因素**：4 步表单。Step1-3 成功/失败产品对比表格 + textarea；Step4 关键因素总结 textarea。头部含 `TrainingMaterialButton`（资料按钮）与导出按钮。
+- **产品开发主要流程**：Step01 关键任务识别（任务表格 + select 分类 + 判题反馈 + 保存/清空）；Step02 排期表格 + 甘特图上传预览；Step03/04 工具说明 + 并行协同复盘 textarea。
+
+### 3.2 市场需求挖掘（`/demand`，8 路由）
+
+| # | 路由 | 标题 | 实际视图文件 |
+|---|------|------|-------------|
+| 1 | `/demand/index` | 行业需求分析 | `views/demand/industry-demand-analysis.vue` |
+| 2 | `/demand/environment` | 竞争环境分析 | `views/demand/competitive-environment-analysis.vue` |
+| 3 | `/demand/people` | 目标用户画像 | `views/demand/people.vue` |
+| 4 | `/demand/user` | 用户数据分析 | `views/demand/user.vue`（legacy） |
+| 5 | `/demand/business-feasibility` | 商业可行性论证 | `views/demand/business-feasibility.vue` |
+| 6 | `/demand/consumer-behavior` | 消费者需求与行为 | `views/demand/consumer-behavior.vue` |
+| 7 | `/demand/consumer-scenario` | 消费场景解构 | `views/demand/consumer-scenario.vue` |
+| 8 | `/demand/feature-conversion` | 需求转化为功能 | `views/demand/feature-conversion.vue` |
+
+- **行业需求分析**（根 class `industry-pest-page`，scoped）：四步实训卡片、PEST 表格、机会挑战表、结论表单；使用 `TrainingTaskToolbar`、`TrainingStepOneChoiceQuestions`。
+- **竞争环境分析**（根 class `competitive-analysis-page`，scoped）：SWOT 表格、策略矩阵、最终决策区。
+- **目标用户画像**：文件上传面板、Excel 预览弹窗、RFM 图表上传区、洞察表格、访谈记录 tab、用户画像表单。
+- **用户数据分析**（旧版 legacy 壳）：`student-training-shell` + 顶部 tab 切换 + `TrainingIntro` + 动态组件渲染区 + `TrainingLegacyActions`。
+- **商业可行性论证**（根 class `feasibility-core`/`workbench`）：多步 form-section/table、上传面板、`el-dialog` 预览，布局与其他 demand 页不同。
+- **消费者需求与行为**：分步骤表单/表格/问卷编辑器弹窗。
+- **消费场景解构**：旅程排序、旅程分析表格、旅程图上传区、优化建议表格。
+- **需求转化为功能**：需求转化表、RICE 优先级打分表、优先级决策表。
+
+### 3.3 产品规划（`/product`，7 路由）
+
+| # | 路由 | 标题 | 实际视图文件 |
+|---|------|------|-------------|
+| 1 | `/product/index` | 市场机会识别与选品 | `views/product/market-opportunity-selection.vue`（`hideSupplementSteps`） |
+| 2 | `/product/price` | 产品定价 | `views/product/price.vue` |
+| 3 | `/product/differentiation` | 产品价值主张及定位 | `views/product/differentiation.vue` |
+| 4 | `/product/structure` | 产品结构规划 | `views/product/structure.vue` |
+| 5 | `/product/after-sales-service` | 售后服务流程设计 | `views/product/after-sales-service.vue` |
+| 6 | `/product/requirements-doc` | 产品需求说明书 | `views/product/requirements-doc.vue` |
+| 7 | `/product/hardware-cost` | 智能硬件成本估算 | `views/product/hardware-cost.vue` |
+
+- **市场机会识别与选品**（根 class `opportunity-core`）：6 步——指标分类、权重设置、综合得分计算、可视化上传、用户需求洞察、选品结论。
+- **产品定价**（标题区 `PRODUCT PRICING`）：按 `currentStep` 动态渲染定价步骤。
+- **产品价值主张及定位**：核心价值 / 用户档案 / 价值地图 / 定位陈述 / MRD 表单区块。
+- **产品结构规划**：四层架构排序、操作链路排序、场景分析表格、架构图上传区（`ProductStructureImageUpload`）。
+- **售后服务流程设计**：3 步——故障分类拖拽、处理流程表格、售后政策表格；通过 `getStudentTrainingPage("after-sales-service")` 接入页面体系。
+- **产品需求说明书**：3 步——PRD 模块匹配拖拽、PRD 详细信息表格、文档上传/预览。
+- **智能硬件成本估算**（标题区 `BOM COSTING`）：4 步——BOM 选型（可编辑物料明细表格，增删行 + 合计）、批量成本核算、制造成本核算、成本优化决策（可视化上传 + 优化方案文本 + 下载模板按钮）。
+
+### 3.4 产品投放测试（`/test`，4 路由）
+
+| # | 路由 | 标题 | 视图文件 |
+|---|------|------|---------|
+| 1 | `/test/index` | 发布渠道评估 | `views/test/index.vue` |
+| 2 | `/test/promotion` | 产品推广测试 | `views/test/promotion.vue` |
+| 3 | `/test/channelas` | 渠道表现分析 | `views/test/channel.vue`（legacy） |
+| 4 | `/test/marketing` | 产品营销定位 | `views/test/marketing.vue`（legacy） |
+
+- **发布渠道评估**（TASK_KEY `release-channel-evaluation`）：新版壳，`step-tabs` 四步表单/表格。
+- **产品推广测试**（TASK_KEY `promotion-effect-optimization`）：4 步——预算分配、投放策略、投放数据与 ROI、效果评估与优化。
+- **渠道表现分析**（旧版）：`TrainingIntro`（漏斗模型介绍）+ `funnelAnalysis` 组件 + 旧式操作栏。
+- **产品营销定位**（旧版 `legacy-training-page`）：`TrainingIntro` + 案例说明 + 广告数据 `el-table` + ECharts 四象限图（坐标轴可选）+ textarea 分析 + 提交/重置。
+
+### 3.5 供应渠道管理（`/channel`，3 路由）
+
+| # | 路由 | 标题 | 视图文件 |
+|---|------|------|---------|
+| 1 | `/channel/index` | 采购需求预测 | `views/channel/index.vue` |
+| 2 | `/channel/purchase` | 采购产品定位 | `views/channel/purchase.vue`（legacy） |
+| 3 | `/channel/supplier` | 供应商评估与选择 | `views/channel/supplier.vue` |
+
+- **采购需求预测**：4 步——线性需求预测表格（`el-table` + `el-input-number`）、预测可视化上传/预览卡片、采购计划规则表格（安全库存/期初库存/采购量输入）、采购量预测表格 + ECharts 容器 + 代码查看弹窗。
+- **采购产品定位**（旧版）：`TrainingIntro`（卡拉杰克模型长文介绍）+ 四象限矩阵分析。
+- **供应商评估与选择**（`workspace` header）：3 步，Step1 场景 A/B 权重卡片 + 表格。
+
+### 3.6 产品评估与考核（`/assessment`，3 路由）
+
+| # | 路由 | 标题 | 视图文件 |
+|---|------|------|---------|
+| 1 | `/assessment/index` | 产品表现分析（功效系数法） | `views/assessment/index.vue` |
+| 2 | `/assessment/diagnosis` | 产品问题诊断 | `views/assessment/diagnosis.vue` |
+| 3 | `/assessment/optimization` | 品类结构优化 | `views/assessment/optimization.vue` |
+
+- **产品表现分析**：`TrainingIntro` 背景与目标 + `TrainingTaskToolbar` + 多个 `el-table`（指标/绩效数据/功效值/权重）+ 底部 `taskfooter` 提交/重置。
+- **产品问题诊断**（`workbench-top`）：步骤 tab、漏斗计算表格、对比图上传、词云分析、情感倾向表格、根因 textarea、AB 测试方案与结论。
+- **品类结构优化**（`workbench-head`）：品类表格（`el-input`/`el-input-number` 增删行）、帕累托图上传区（`el-image` 预览 + 重传/移除）。
+
+---
+
+## 4. 公共实训壳（多任务复用，改一处影响面大）
+
+| 路由 | 标题 | 视图文件 | 说明 |
+|------|------|---------|------|
+| `/comprehensive/index` | 综合实训 | `views/training/GenericTrainingPage.vue` | `pageKey: comprehensive-case-training`，`hideSupplementSteps` |
+| `/training/task/:pageKey` | 实训任务（动态） | `views/training/GenericTrainingPage.vue` | 后端下发任务 → 通用渲染，`studentTrainingNavigation.js` 生成菜单 |
+| `/training/:taskKey/:stepId` | 自定义实训步骤 | `views/training/CustomTrainingStepPage.vue` | 步骤 header + `TrainingTaskBrief` + textarea + 附件上传 + 上一步/保存/下一步 + empty 状态 |
+
+- **GenericTrainingPage**：公共步骤导航（步骤 tab / marker / connector）→ 步骤标题+任务说明 → 流程表格、上传提示/按钮/文件名展示 → 综合案例 PEST/SWOT 输入区 + 结论 textarea。**未走专属 .vue 的实训任务全部由它渲染，UI 调整优先级最高。**
+
+---
+
+## 5. 公共组件与样式
+
+### 5.1 实训公共组件（`src/views/components/`）
+
+| 组件 | 作用 |
+|------|------|
+| `TrainingAiSidebar.vue` | 右侧 AI 学习提示侧边栏（可折叠），几乎所有实训页右栏 |
+| `DynamicTrainingStepNavigator.vue` | 动态步骤导航条 |
+| `TrainingTaskBrief.vue` | 任务背景/目标简介卡片（页面头部内嵌） |
+| `TrainingTaskToolbar.vue` | 任务工具栏 |
+| `TrainingMaterialButton.vue` | 资料查看按钮 |
+| `TrainingIntro.vue` | 旧版页介绍区（background / goal 插槽） |
+| `TrainingStepOneChoiceQuestions.vue` | 单选判题题组（含 `StepOneChoiceQuestionEditor.vue` 编辑器） |
+| `TrainingAiEvaluation.vue` | AI 评价展示 |
+| `TrainingLegacyActions.vue` | 旧版页底部操作栏 |
+| `popModal.vue` / `mainContent.vue` | 弹窗 / 主内容容器 |
+
+### 5.2 product 模块公共组件（`src/views/product/components/`）
+
+- `ProductStandardTrainingPage.vue`：product 模块标准实训页组件（任务标题 + 简介 + 步骤导航 + 步骤内容 + 操作按钮 + AI 侧边栏），自带 scoped 样式。
+- `ProductStructureImageUpload.vue`：图片上传封装（`el-upload` + 预览列表）。
+
+### 5.3 学生端公共样式
+
+- `src/assets/styles/student-training.scss`：学生实训页全局样式根。定义 `:root` 字号变量、`.student-training-shell` 主题色、背景渐变、网格布局、侧边 AI 栏折叠/展开宽度等。**统一 UI 风格首选改这里 + 各页 scoped 样式。**
+
+---
+
+## 6. 三种布局形态（UI 统一的关键）
+
+| 形态 | 识别特征 | 使用页面 |
+|------|---------|---------|
+| 新版实训壳 | `student-training-shell` + `task-header` + `TrainingTaskBrief` + `step-indicator/step-tabs` + `TrainingAiSidebar` | foundation 全部、demand 大部分、product 大部分、test/index、test/promotion、channel/index、channel/supplier、assessment 全部 |
+| 旧版 legacy 页 | `legacy-training-page` + `TrainingIntro` + `TrainingLegacyActions` | `demand/user`、`test/marketing`、`test/channel`、`channel/purchase` |
+| 通用渲染页 | `GenericTrainingPage` / `CustomTrainingStepPage` / `ProductStandardTrainingPage` | 综合实训、动态任务、自定义步骤、product 部分页 |
+
+**UI 调整建议**：
+1. 优先统一 `student-training.scss` 与 `TrainingAiSidebar`/`TrainingTaskBrief`/步骤导航等公共件——影响面覆盖 20+ 页。
+2. 旧版 legacy 4 页（demand/user、test/marketing、test/channel、channel/purchase）风格最不统一，建议重点处理。
+3. 注意孤立硬编码配色：`visual-analysis`（`#06121f` 深蓝）、`exam/index`（`#16839c` 青绿）、`test-report`（text-shadow 白字）与学生实训蓝色系不一致。
+4. 部分页面有独立 scoped 根 class（`industry-pest-page`、`competitive-analysis-page`、`opportunity-core`、`feasibility-core` 等），调整时需逐页确认。
+
+---
+
+## 7. 未注册路由的孤儿页面（UI 调整可忽略，建议后续清理）
+
+| 文件 | 说明 |
+|------|------|
+| `views/demand/index.vue` | 已被 `demand/industry-demand-analysis.vue` 取代（路由 `/demand/index` 指向后者） |
+| `views/demand/environment.vue` | 已被 `demand/competitive-environment-analysis.vue` 取代 |
+| `views/product/index.vue` | 已被 `product/market-opportunity-selection.vue` 取代（路由 `/product/index` 指向后者） |
+| `views/assessment/kano.vue` / `five.vue` / `market.vue` / `traffic.vue` | 未在路由中注册，疑似旧版遗留 |
+| `views/learningCenter/*.vue`（learningResources / evaluation / Achievement） | 未在学生路由中注册 |
+| `views/demand/industry-demand-analysis` 之外的重复实现 | 见上 |
+
+> 注意：`studentDemo/index.vue` 有 hidden 路由 `/student-demo`，属演示页。
+
+---
+
+## 8. 学生端实训模块导航来源（菜单 ≠ 路由）
+
+- 学生左侧/顶部实训模块页签由后端接口返回任务列表，经 `src/utils/studentTrainingNavigation.js` 的 `buildStudentTaskSections()` 按模块分组生成，任务 `taskKey` → 路由映射写在 `knownTaskPaths` 中（23 个映射）。
+- **改路由前先对照 `knownTaskPaths`**，新增页面需在此登记 `taskKey → path`，否则学生菜单点不进去。
+- 综合实训（`comprehensive-case-training`）单独作为顶部任务，指向 `/comprehensive/index`。
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ae45377..78449c8 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -533,7 +533,6 @@ aside {
 
 .app-container {
     margin: 10px;
-    box-shadow: 0px 0px 13px 0px #0452c6;
     border-radius: 10px;
     padding: 25px;
     //   overflow-y: auto;
@@ -541,7 +540,6 @@ aside {
 
 .app-container3 {
     margin: 10px;
-    box-shadow: 0px 0px 13px 0px #0452c6;
     border-radius: 10px;
     padding: 25px 25px 3px;
 }
diff --git a/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue b/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
index f87328c..118c94f 100644
--- a/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
+++ b/src/views/digitalMarketTech/AIGCLargeModel/components/thirdPartyAIGC.vue
@@ -7,29 +7,29 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="app-containerO" v-loading="loding">
-    <iframe v-lazy="'https://pidoutv.com/'" src="https://pidoutv.com/" frameborder="0"></iframe>
-  </div>
+    <div class="app-containerO" v-loading="loding">
+        <iframe v-lazy="'https://pidoutv.com/'" src="https://pidoutv.com/" frameborder="0"></iframe>
+    </div>
 </template>
 <script setup>
-const { proxy } = getCurrentInstance();
-const loding = ref(true);
+const { proxy } = getCurrentInstance()
+const loding = ref(true)
 onMounted(() => {
-  setTimeout(()=>{
-    loding.value = false;
-  },2000)
-});
+    setTimeout(() => {
+        loding.value = false
+    }, 2000)
+})
 </script>
 <style scoped lang="scss">
 .app-containerO {
-  margin: 10px;
-  box-shadow: 0px 0px 13px 0px #0452c6;
-  border-radius: 10px;
-  width: 100%;
-  height: 740px;
+    margin: 10px;
+    border-radius: 10px;
+    width: 100%;
+    height: 740px;
 }
+
 iframe {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 </style>
diff --git a/src/views/foundation/new-product-survey.vue b/src/views/foundation/new-product-survey.vue
index 73b9370..63b121a 100644
--- a/src/views/foundation/new-product-survey.vue
+++ b/src/views/foundation/new-product-survey.vue
@@ -2,43 +2,46 @@
   <div class="new-product-value-page student-training-shell">
     <main class="training-core">
       <section class="task-header">
-        <div class="task-badge">
-          <el-icon><Operation /></el-icon>
-          核心实训 · 产品开发基础
+        <div class="task-head-main">
+          <span class="task-badge">
+            <el-icon><Operation /></el-icon>
+            核心实训 · 产品开发基础
+          </span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul>
+                <li v-for="goal in taskGoals" :key="goal">{{ goal }}</li>
+              </ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
         </div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <TrainingTaskToolbar class="new-product-survey-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" :show-toolbar="false" />
-
       <section class="task-card">
-        <div class="workbench-head">
-          <div>
-            <p class="workbench-eyebrow">PRODUCT DEVELOPMENT · NEW PRODUCT SURVEY</p>
-            <h2>{{ getStepName(currentStep) || taskTitle }}</h2>
-          </div>
-          <TrainingTaskToolbar class="new-product-survey-toolbar" :task-key="TASK_KEY" :on-export="exportOutcome" />
-        </div>
 
         <nav class="step-indicator" aria-label="新产品调查与分析步骤">
-          <template v-for="(step, index) in steps" :key="step.no">
-            <button
-              type="button"
-              :class="['step-tab', { active: currentStep === step.no, complete: currentStep > step.no }]"
-              :aria-label="`切换至第 ${step.no} 步：${step.name}`"
-              :aria-current="currentStep === step.no ? 'step' : undefined"
-              @click="currentStep = step.no"
-            >
-              <span class="step-marker" aria-hidden="true">
-                {{ String(step.no).padStart(2, '0') }}
-              </span>
-              <span class="step-copy">
-                <strong class="step-name" :title="step.name">{{ step.name }}</strong>
-                <span class="step-action">{{ currentStep === step.no ? '当前步骤' : '点击切换' }} <span aria-hidden="true">→</span></span>
-              </span>
-            </button>
-            <span v-if="index < steps.length - 1" class="step-connector" aria-hidden="true" />
-          </template>
+          <button
+            v-for="step in steps"
+            :key="step.no"
+            type="button"
+            :class="['step-tab', { active: currentStep === step.no, complete: currentStep > step.no }]"
+            :aria-label="`切换至第 ${step.no} 步：${step.name}`"
+            :aria-current="currentStep === step.no ? 'step' : undefined"
+            :title="step.name"
+            @click="currentStep = step.no"
+          >
+            <span class="step-no" aria-hidden="true">{{ currentStep > step.no ? "✓" : String(step.no).padStart(2, "0") }}</span>
+            <span class="step-name">{{ step.name }}</span>
+          </button>
         </nav>
 
         <section v-show="currentStep === 1" class="step-content active-step">
@@ -62,11 +65,18 @@
                   <tr>
                     <th>序号</th>
                     <th>卖点</th>
-                    <th>三层次分类</th>
+                    <th>
+                      三层次分类
+                      <span class="layer-legend" aria-hidden="true">
+                        <i style="--dot: var(--student-layer-1)"></i>
+                        <i style="--dot: var(--student-layer-2)"></i>
+                        <i style="--dot: var(--student-layer-3)"></i>
+                      </span>
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(point, index) in STEP_ONE_SELLING_POINTS" :key="point.id" :class="feedbackClass(point.id)">
+                  <tr v-for="(point, index) in STEP_ONE_SELLING_POINTS" :key="point.id" :class="[feedbackClass(point.id), layerClass(classifications[point.id])]">
                     <td class="classification-number">{{ index + 1 }}</td>
                     <td class="classification-selling-point">{{ point.text }}</td>
                     <td class="classification-select-cell">
@@ -201,15 +211,15 @@
             </div>
             <p class="step-desc">结合上面实训，针对AI技术在产品中的应用价值进行分析，回答以下问题。</p>
 
-            <label class="field-block">
+            <label class="field-block is-layer layer-core">
               <span><b>（1）核心层：</b>AI技术是否实现产品功能突破？是否形成差异化卖点？</span>
               <textarea v-model="step4Form.coreValue" class="input-field step4-input" rows="7" placeholder="请填写核心层AI应用价值分析" />
             </label>
-            <label class="field-block">
+            <label class="field-block is-layer layer-tangible">
               <span><b>（2）有形层：</b>AI技术是否影响产品形态？如产品外形包装、电商主图设计、参数配置、价格带定位。</span>
               <textarea v-model="step4Form.tangibleValue" class="input-field step4-input" rows="7" placeholder="请填写有形层AI应用价值分析" />
             </label>
-            <label class="field-block">
+            <label class="field-block is-layer layer-extended">
               <span><b>（3）延伸层：</b>AI技术如何通过服务升级、内容更新提升用户粘性，推动付费服务？</span>
               <textarea v-model="step4Form.extendedValue" class="input-field step4-input" rows="7" placeholder="请填写延伸层AI应用价值分析" />
             </label>
@@ -217,7 +227,7 @@
         </section>
 
         <div class="step-navigation">
-          <button v-if="currentStep > 1" type="button" class="btn-nav" @click="prevStep">
+          <button v-if="currentStep > 1" type="button" class="btn-nav btn-ghost" @click="prevStep">
             <el-icon><ArrowLeft /></el-icon>
             上一步
           </button>
@@ -229,6 +239,7 @@
             {{ checking ? "正在判题" : "下一步" }}
             <el-icon><ArrowRight /></el-icon>
           </button>
+          <span class="step-progress">Step {{ String(currentStep).padStart(2, "0") }} / {{ String(steps.length).padStart(2, "0") }}</span>
         </div>
 
       </section>
@@ -266,7 +277,6 @@ import useUserStore from "@/store/modules/user";
 import { isExternal } from "@/utils/validate";
 import { extractTrainingStepNames } from "@/views/training/taskKeyMap";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue";
 import TrainingStepOneChoiceQuestions from "@/views/components/TrainingStepOneChoiceQuestions.vue";
 
@@ -282,6 +292,7 @@ const imagePreviewOpen = ref(false);
 const imagePreviewUrl = ref("");
 const draftReady = ref(false);
 const currentStep = ref(1);
+const briefOpen = ref(false);
 
 const defaultSteps = [
   { no: 1, name: "产品卖点的三层次分类", icon: Search },
@@ -318,6 +329,12 @@ const steps = computed(() => {
 });
 
 const LAYER_OPTIONS = ["核心层", "有形层", "延伸层"];
+/* 纯 UI 辅助：按已选层次为表格行上色，不影响判题数据 */
+const LAYER_CLASS_MAP = { "核心层": "is-layer-core", "有形层": "is-layer-tangible", "延伸层": "is-layer-extended" };
+
+function layerClass(value) {
+  return LAYER_CLASS_MAP[value] || "";
+}
 const MAX_STEP_TWO_IMAGES = 5;
 
 const STEP_TWO_PLATFORM_OPTIONS = [
@@ -869,142 +886,172 @@ function exportOutcome() {
 </script>
 
 <style lang="scss" scoped>
+/*
+ * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次。
+ * 覆盖全局主色/文字/边框令牌，使所有 var(--student-*) 规则自动重着色。
+ */
 .new-product-value-page {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  width: 100%;
-  min-height: calc(100vh - 106px);
-  padding: 0 0 32px;
-  color: #1e3a5f;
-  background: transparent;
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 点缀色：暖橙（小面积使用） */
+  --student-terracotta: #e8953c;
+  /* 语义色 */
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  /* 三层次标识色：石墨 / 青灰 / 灰紫 */
+  --student-layer-1: #374151;
+  --student-layer-2: #43a294;
+  --student-layer-3: #8b6fc0;
+  /* 结构色：中性灰白系 */
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  /* 紧凑字号梯度：在全局 --student-fs-* 基础上整体下调一档（11→17px） */
+  --student-fs-display: 17px;   /* 任务主标题 */
+  --student-fs-h1: 15px;         /* 步骤大标题 */
+  --student-fs-h2: 14px;         /* 面板/行标题 */
+  --student-fs-h3: 13px;         /* 区块小标题 */
+  --student-fs-body: 13px;       /* 正文 */
+  --student-fs-body-sm: 12px;    /* 次要文字/表格 */
+  --student-fs-caption: 11px;    /* 标签/徽章 */
+  --student-fs-button: 13px;     /* 按钮文字 */
+  --student-fs-button-lg: 13px;  /* 主按钮文字 */
+  --student-fs-data: 14px;       /* 数字/成绩 */
+  min-width: 0;
+  color: var(--student-text);
 }
 
+/* 主列布局：容器栅格与内边距由全局 .student-training-shell 统一提供 */
 .training-core {
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.06);
-  backdrop-filter: blur(8px);
+  display: grid;
+  gap: 10px;
+  align-content: start;
 }
 
+/* 任务头：徽章 + 标题 + 单行简介 + 右侧工具栏（合并原 task-header 与 workbench-head 双标题） */
 .task-header {
-  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .task-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  margin-bottom: 12px;
-  padding: 4px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 30px;
-  color: #1565c0;
-  background: #e3f2fd;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
   font-size: 12px;
   font-weight: 700;
 }
 
 .task-title {
   margin: 0;
-  color: transparent;
-  background: linear-gradient(135deg, #1565c0, #1e88e5);
-  -webkit-background-clip: text;
-  background-clip: text;
-  font-size: 30px;
-  line-height: 1.3;
-  font-weight: 900;
+  color: var(--student-text);
+  font-size: 17px;
+  line-height: 1.35;
+  font-weight: 700;
 }
 
-.goal-bg,
-.task-card,
-.step-card {
-  margin-bottom: 28px;
-  padding: 18px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.goal-bg {
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: 14px;
-    line-height: 1.8;
-  }
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.subtitle-icon {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  color: #1565c0;
-  font-weight: 800;
-}
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 
-.subtitle-icon--spaced {
-  margin-top: 12px;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-.workbench-head,
-.step-title-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 18px;
-}
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
 
-.workbench-head {
-  margin-bottom: 22px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid #cfe2f5;
+  b {
+    color: var(--student-text);
+  }
 
-  h3 {
-    margin: 4px 0 8px;
-    color: #1e3a5f;
-    font-size: 26px !important;
-    font-weight: 800 !important;
-    line-height: 1.3 !important;
+  ul {
+    display: grid;
+    gap: 4px;
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  p {
+    margin: 0;
   }
 }
 
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+.task-card {
+  border: 0;
+  background: transparent;
 }
 
-.workbench-actions {
+.step-title-row {
   display: flex;
-  flex: 0 0 auto;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
+/* Step 编号小标签：弱化处理，作为标题上方的灰色引导文字 */
 .section-eyebrow {
+  display: inline-flex;
+  align-items: center;
   margin: 0;
-  color: #1565c0;
-  font-size: 12px;
+  padding: 0;
+  color: var(--student-text-secondary);
+  font-size: 11px;
   font-weight: 800;
-  line-height: 1.4;
-}
-
-.workbench-description {
-  margin: 0;
-  color: #2c4a6a;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 1.8;
+  line-height: 1.3;
+  letter-spacing: 0.12em;
 }
 
+/*
+ * 次按钮基类（.outline-action / .btn-nav / .btn-ghost 共用语言）：
+ * 白底 + 墨黑描边 + 墨黑文字；圆角矩形而非全胶囊。
+ */
 .outline-action,
 .btn-nav {
   display: inline-flex;
@@ -1013,19 +1060,20 @@ function exportOutcome() {
   gap: 8px;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #90caf9;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
   font-family: inherit;
-  font-weight: 800;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
-    border-color: #42a5f5;
-    background: #bbdefb;
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
 
   &:disabled {
@@ -1034,160 +1082,86 @@ function exportOutcome() {
   }
 }
 
-.step-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  width: calc(100% + 24px);
-  margin: 0 -12px 32px;
-  padding: 18px 22px;
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(90deg, #e3f2fd, #f0f6fd),
-    rgba(0, 0, 0, 0.04);
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.06);
-  scrollbar-width: thin;
+/*
+ * 步骤导航精修：页面级覆盖全局胶囊样式，做成"内凹槽 + 白底浮起"的分段控件。
+ * 页面根类前缀提高特异性，确保稳定覆盖全局 !important 规则。
+ */
+.new-product-value-page .step-indicator {
+  padding: 5px !important;
+  border-color: #e4e7eb !important;
+  background: linear-gradient(180deg, #f3f4f6, #f3f4f6) !important;
+  box-shadow: inset 0 1px 3px rgba(17, 24, 39, 0.08) !important;
 }
 
-.step-tab {
-  display: flex;
-  flex: 1 0 145px;
-  align-items: center;
-  min-width: 0;
-  min-height: 66px;
-  padding: 8px 10px;
-  border: 1px solid #cfe2f5;
-  border-radius: 8px;
-  color: #5a7a9a;
-  background: #f0f6fd;
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.04);
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: #42a5f5;
-    color: #1e3a5f;
-    background: #e3f2fd;
-    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.1);
-    transform: translateY(-2px);
-
-    .step-action {
-      color: #1e88e5;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid #1e88e5;
-    outline-offset: 4px;
-  }
-
-  &.active {
-    border-color: #42a5f5;
-    color: #ffffff;
-    background: linear-gradient(115deg, #1e88e5, #1565c0);
-    box-shadow: 0 0 18px rgba(30, 136, 229, 0.15), inset 0 1px 0 rgba(30, 136, 229, 0.1);
-
-    .step-marker {
-      border-color: #1e88e5;
-      color: #ffffff;
-      background: linear-gradient(135deg, #1e88e5, #1565c0);
-      box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.12), 0 0 18px rgba(30, 136, 229, 0.3);
-    }
+.new-product-value-page .step-indicator .step-tab {
+  gap: 7px !important;
+  color: #6b7280 !important;
+  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
+}
 
-  }
+.new-product-value-page .step-indicator .step-tab:hover:not(.active) {
+  color: var(--student-accent-deep) !important;
+  background: rgba(255, 255, 255, 0.6) !important;
+}
 
-  &.complete {
-    color: #2c4a6a;
+/* 当前步骤：白底浮起 + 蓝字，形成"实体按键"手感 */
+.new-product-value-page .step-indicator .step-tab.active {
+  border-color: rgba(31, 41, 55, 0.28) !important;
+  color: var(--student-accent-deep) !important;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;
+  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18) !important;
+}
 
-    .step-marker {
-      border-color: #26a69a;
-      color: #ffffff;
-      background: #26a69a;
-      box-shadow: 0 0 12px rgba(38, 166, 154, 0.2);
-    }
-  }
+/* 已完成步骤：恢复安静底色，仅用绿色圆点标记 */
+.new-product-value-page .step-indicator .step-tab.complete:not(.active) {
+  color: #4b5563 !important;
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
-.step-marker {
+/* 步骤圆点：默认空心描边，随状态填充 */
+.step-no {
   display: inline-flex;
-  flex: 0 0 38px;
+  flex: 0 0 20px;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #90caf9;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  color: #5a7a9a;
-  background: #f0f6fd;
-  box-shadow: inset 0 0 12px rgba(30, 136, 229, 0.06);
-  font-size: 12px;
-  font-weight: 900;
-  letter-spacing: 0.04em;
-  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-}
-
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-}
-
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  color: inherit;
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.step-action {
-  color: #5a7a9a;
+  color: #9ca3af;
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px #d1d5db;
   font-size: 10px;
   font-weight: 800;
-  letter-spacing: 0.06em;
   line-height: 1;
-  transition: color 0.2s ease;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.step-connector {
-  position: relative;
-  flex: 0 1 40px;
-  min-width: 18px;
-  height: 2px;
-  margin: 0 8px;
-  overflow: visible;
-  background: #cfe2f5;
-
-  &::after {
-    position: absolute;
-    top: 50%;
-    right: -1px;
-    width: 6px;
-    height: 6px;
-    border-top: 1px solid #5a7a9a;
-    border-right: 1px solid #5a7a9a;
-    content: '';
-    transform: translateY(-50%) rotate(45deg);
-  }
+.step-tab:hover:not(.active) .step-no {
+  color: var(--student-accent-deep);
+  box-shadow: inset 0 0 0 1.5px #b6bdc6;
 }
 
-.step-tab.complete + .step-connector {
-  background: linear-gradient(90deg, #26a69a, #1e88e5);
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.2);
+.step-tab.active .step-no {
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: none;
+}
 
-  &::after {
-    border-color: #26a69a;
-  }
+.step-tab.complete .step-no {
+  color: #ffffff;
+  background: var(--student-success);
+  box-shadow: none;
+  font-size: 11px;
+}
+
+.step-name {
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  color: inherit;
+  text-overflow: ellipsis;
 }
 
 .step-content {
@@ -1207,35 +1181,36 @@ function exportOutcome() {
 
 .step-card {
   margin-bottom: 0;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 16px;
+  background: var(--student-card-bg);
 }
 
 .step-title-row {
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 
   h3 {
-    margin: 4px 0 0;
-    color: #1e3a5f;
-    font-size: 22px;
-    font-weight: 900;
+    margin: 2px 0 0;
+    color: var(--student-text);
   }
 }
 
 .step-chip {
   flex: 0 0 auto;
   padding: 6px 12px;
-  border: 1px solid #90caf9;
+  border: 1px solid #d6dae0;
   border-radius: 999px;
-  color: #1e88e5;
-  background: #e3f2fd;
+  color: #1f2937;
+  background: #f3f4f6;
   font-size: 12px;
   font-weight: 800;
 }
 
 .step-desc {
-  margin: 0 0 20px;
-  color: #2c4a6a;
-  font-size: 15px;
-  line-height: 1.8;
+  margin: 0 0 14px;
+  color: #374151;
+  font-size: 13px;
+  line-height: 1.6;
 }
 
 .form-grid {
@@ -1250,14 +1225,14 @@ function exportOutcome() {
 
 .field-block {
   display: grid;
-  gap: 8px;
-  margin-bottom: 16px;
-  color: #2c4a6a;
-  font-size: 14px;
+  gap: 6px;
+  margin-bottom: 12px;
+  color: #374151;
+  font-size: 13px;
   font-weight: 800;
 
   > span {
-    line-height: 1.6;
+    line-height: 1.5;
   }
 }
 
@@ -1266,9 +1241,9 @@ function exportOutcome() {
 .cell-input,
 .cell-textarea {
   width: 100%;
-  border: 1px solid #90caf9;
+  border: 1px solid #d6dae0;
   border-radius: 14px;
-  color: #1e3a5f;
+  color: #1f2937;
   background: #ffffff;
   font-family: inherit;
   font-size: 13px;
@@ -1276,12 +1251,12 @@ function exportOutcome() {
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
 
   &::placeholder {
-    color: #7a8fa3;
+    color: #9ca3af;
   }
 
   &:focus {
-    border-color: #42a5f5;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
+    border-color: #4b5563;
+    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
   }
 }
 
@@ -1309,9 +1284,9 @@ function exportOutcome() {
 
 .price-option {
   min-height: 42px;
-  border: 1px solid #90caf9;
+  border: 1px solid #d6dae0;
   border-radius: 14px;
-  color: #5a7a9a;
+  color: #6b7280;
   background: #ffffff;
   font-family: inherit;
   font-weight: 800;
@@ -1319,49 +1294,50 @@ function exportOutcome() {
 
   &.active {
     color: #ffffff;
-    border-color: #42a5f5;
-    background: linear-gradient(95deg, #1e88e5, #1565c0);
+    border-color: var(--student-accent);
+    background: var(--student-accent);
+    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.25);
   }
 }
 
 .survey-form {
   display: grid;
-  gap: 18px;
+  gap: 12px;
 }
 
 .survey-field-group {
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: linear-gradient(135deg, #e3f2fd, #f0f6fd);
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #f3f4f6, #fafbfc);
 }
 
 .survey-field-title {
   display: flex;
   align-items: center;
-  gap: 9px;
-  margin: 0 0 12px;
-  color: #1e3a5f;
-  font-size: 16px;
+  gap: 8px;
+  margin: 0 0 10px;
+  color: #1f2937;
+  font-size: 14px;
   font-weight: 900;
 
   b {
     display: inline-grid;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     place-items: center;
     border-radius: 50%;
     color: #ffffff;
-    background: #1e88e5;
-    font-size: 12px;
+    background: #1f2937;
+    font-size: 11px;
   }
 }
 
 .survey-field-hint {
-  margin: -4px 0 13px 33px;
-  color: #5a7a9a;
-  font-size: 13px;
-  line-height: 1.65;
+  margin: -2px 0 10px 28px;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.55;
 }
 
 .survey-options {
@@ -1372,7 +1348,7 @@ function exportOutcome() {
 .step-two-survey {
   .step-title-row {
     h3 {
-      font-size: 19px;
+      font-size: 15px;
     }
   }
 
@@ -1403,10 +1379,10 @@ function exportOutcome() {
   height: auto;
   margin-right: 0;
   padding: 10px 12px;
-  border: 1px solid #cfe2f5;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
-  color: #2c4a6a;
-  background: #f0f6fd;
+  color: #374151;
+  background: #fafbfc;
   transition: border-color 0.18s ease, background 0.18s ease;
 
   .el-radio__label {
@@ -1417,22 +1393,58 @@ function exportOutcome() {
   }
 
   strong {
-    color: #1e3a5f;
+    color: #1f2937;
     font-weight: 800;
   }
 
   span {
-    color: #5a7a9a;
+    color: #6b7280;
     font-size: 12px;
     line-height: 1.55;
   }
 
   &.is-checked {
-    border-color: #42a5f5;
-    background: #e3f2fd;
+    border-color: #4b5563;
+    background: #f3f4f6;
   }
 }
 
+/* 单选圆形标记：选中时墨黑填充，覆盖 Element Plus 默认蓝色 */
+:deep(.survey-option.el-radio .el-radio__input.is-checked .el-radio__inner) {
+  border-color: #1f2937;
+  background: #1f2937;
+}
+
+:deep(.survey-option.el-radio .el-radio__input.is-checked .el-radio__inner::after) {
+  background: #ffffff;
+}
+
+:deep(.survey-option.el-radio .el-radio__input .el-radio__inner) {
+  border-color: #9ca3af;
+}
+
+/*
+ * 全页单选统一墨黑（Step 1 选择题带边框单选等）：
+ * 圆形标记墨黑填充 + 带边框单选选中时墨黑描边/文字。
+ */
+.new-product-value-page :deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: #1f2937;
+  background: #1f2937;
+}
+
+.new-product-value-page :deep(.el-radio__input.is-checked .el-radio__inner::after) {
+  background: #ffffff;
+}
+
+.new-product-value-page :deep(.el-radio.is-checked) {
+  border-color: #1f2937;
+  color: #1f2937;
+}
+
+.new-product-value-page :deep(.el-radio.is-checked .el-radio__label) {
+  color: #1f2937;
+}
+
 .custom-scene-input {
   margin-top: 10px;
 }
@@ -1442,9 +1454,9 @@ function exportOutcome() {
   grid-template-columns: 76px minmax(0, 1fr);
   align-items: center;
   gap: 10px;
-  margin-bottom: 14px;
-  color: #2c4a6a;
-  font-size: 14px;
+  margin-bottom: 10px;
+  color: #374151;
+  font-size: 12px;
   font-weight: 800;
 }
 
@@ -1454,13 +1466,13 @@ function exportOutcome() {
   align-items: center;
   justify-content: center;
   padding: 0 18px;
-  border: 1px dashed #42a5f5;
+  border: 1px dashed #9ca3af;
   border-radius: 12px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-weight: 800;
+  color: #374151;
+  background: #fafbfc;
+  font-weight: 700;
   cursor: pointer;
-  transition: background 0.18s ease, transform 0.18s ease;
+  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
 
   input {
     position: absolute;
@@ -1472,7 +1484,8 @@ function exportOutcome() {
 
   &:hover:not(.disabled) {
     transform: translateY(-1px);
-    background: #bbdefb;
+    border-color: #1f2937;
+    background: #f3f4f6;
   }
 
   &.disabled {
@@ -1494,13 +1507,13 @@ function exportOutcome() {
   min-width: 0;
   margin: 0;
   padding: 8px;
-  border: 1px solid #cfe2f5;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
-  background: #f0f6fd;
+  background: #fafbfc;
 
   figcaption {
     overflow: hidden;
-    color: #5a7a9a;
+    color: #6b7280;
     font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1513,7 +1526,7 @@ function exportOutcome() {
   padding: 0;
   border: 0;
   border-radius: 8px;
-  background: #f0f6fd;
+  background: #fafbfc;
   cursor: zoom-in;
 
   img {
@@ -1533,11 +1546,18 @@ function exportOutcome() {
   justify-self: start;
   padding: 0;
   border: 0;
-  color: #e53935;
+  color: var(--student-danger);
   background: transparent;
   font: inherit;
   font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
+  transition: color 0.16s ease;
+
+  &:hover {
+    color: #b0443d;
+    text-decoration: underline;
+  }
 }
 
 .product-image-full {
@@ -1549,9 +1569,8 @@ function exportOutcome() {
 
 .training-table-wrap {
   overflow-x: auto;
-  border: 1px solid #cfe2f5;
+  border: 1px solid #e5e7eb;
   border-radius: 22px;
-  background: #f0f6fd;
 }
 
 .training-data-table {
@@ -1561,22 +1580,20 @@ function exportOutcome() {
 
   th,
   td {
-    border: 1px solid #cfe2f5;
+    border: 1px solid #e5e7eb;
     padding: 12px;
     vertical-align: top;
   }
 
   th {
-    color: #1e3a5f;
-    background: linear-gradient(180deg, #eef6fe, #dcebfb);
-    font-size: 14px;
+    color: #1f2937;
+    font-size: 13px;
     font-weight: 900;
     text-align: center;
   }
 
   td {
-    color: #2c4a6a;
-    background: #f0f6fd;
+    color: #374151;
   }
 }
 
@@ -1594,7 +1611,7 @@ function exportOutcome() {
 
 .dimension-cell {
   min-width: 170px;
-  color: #1e3a5f;
+  color: #1f2937;
   text-align: left;
 
   strong,
@@ -1608,7 +1625,7 @@ function exportOutcome() {
   }
 
   span {
-    color: #5a7a9a;
+    color: #6b7280;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.55;
@@ -1618,12 +1635,12 @@ function exportOutcome() {
 .requirement-cell,
 .example-cell {
   min-width: 170px;
-  color: #2c4a6a;
+  color: #374151;
   line-height: 1.65;
 }
 
 .example-cell {
-  color: #b8860b;
+  color: #c08a2e;
 }
 
 .reference-points {
@@ -1639,12 +1656,12 @@ function exportOutcome() {
 
 .analysis-count {
   margin: 8px 2px 0;
-  color: #d32f2f;
+  color: #d9554c;
   font-size: 12px;
   font-weight: 700;
 
   &.is-ready {
-    color: #2e7d32;
+    color: #4a9d6e;
   }
 }
 
@@ -1654,90 +1671,199 @@ function exportOutcome() {
   align-items: flex-start;
   margin-top: 12px;
   padding: 12px 14px;
-  border: 1px solid #ffe082;
+  border: 1px solid #ffe3a3;
   border-radius: 16px;
-  color: #b8860b;
-  background: rgba(184, 134, 11, 0.1);
+  color: #c08a2e;
+  background: rgba(192, 138, 46, 0.1);
   font-size: 13px;
   line-height: 1.6;
 }
 
-.step-navigation,
-.task-actions {
+.step-navigation {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 22px;
 }
 
-.task-actions {
-  gap: 52px;
-  margin-top: 36px;
+/*
+ * 主次层级：主按钮实底墨黑 + 中性柔影（扁平不渐变）；
+ * 次按钮白底墨黑描边；统一 10px 圆角矩形。
+ */
+.btn-primary {
+  min-height: 40px;
+  padding: 0 22px;
+  border: 1px solid var(--student-accent);
+  border-radius: 10px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font-family: inherit;
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+  cursor: pointer;
+  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
-.task-actions .btn-nav {
-  min-width: 172px;
-  min-height: 64px;
-  padding: 0 28px;
-  border: 1px solid #1e88e5;
-  border-radius: 6px;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  box-shadow: none;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-  text-shadow: none;
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: var(--student-accent-deep);
+  background: var(--student-accent-deep);
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
 }
 
-.task-actions .btn-nav .el-icon {
-  display: none;
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
 }
 
-.task-actions .btn-nav:hover:not(:disabled) {
-  border-color: #1565c0;
-  color: #ffffff;
-  background: #1e88e5;
+.btn-ghost {
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.16s ease, border-color 0.16s ease;
 }
 
-.btn-primary,
-.btn-submit,
+.btn-ghost:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+
+/*
+ * 三级按钮（保存草稿）：浅灰实底 + 深灰字，无重描边，
+ * 视觉权重低于"上一步"描边按钮，形成 实底黑 > 描边白 > 浅灰底 的层级。
+ */
 .btn-save {
-  border-color: #42a5f5;
-  color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  color: #374151;
+  background: #f3f4f6;
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.16s ease, border-color 0.16s ease;
+}
+
+.btn-save:hover:not(:disabled) {
+  border-color: #d1d5db;
+  background: #e9ecef;
 }
 
-.task-actions .btn-submit,
-.task-actions .btn-save {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
+/* 底部三按钮统一禁用态：不改变形状，只降低不透明度 */
+.btn-primary:disabled,
+.btn-ghost:disabled,
+.btn-save:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
+}
+
+.step-progress {
+  position: absolute;
+  right: 14px;
+  color: #6b7280;
+  font-family: var(--student-font-data);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
 }
 
+/*
+ * 三层次分类表格（Step 01）：白底卡片化行式表格。
+ * 去掉全边框大色块，改为细分隔线 + 序号徽章 + 层次语义色条。
+ */
 .classification-table-wrap {
-  margin-top: 20px;
+  margin-top: 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
 }
 
-.classification-table th:first-child,
-.classification-table td:first-child {
-  width: 84px;
-  text-align: center;
+.classification-table {
+  th,
+  td {
+    border: none;
+    border-bottom: 1px solid #eceef1;
+  }
+
+  th {
+    padding: 11px 14px;
+    color: var(--student-text-secondary);
+    background: #ffffff;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 2px;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 9px 14px;
+    color: #374151;
+    background: #ffffff;
+    font-size: 12px;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  th:first-child,
+  td:first-child {
+    width: 64px;
+    text-align: center;
+  }
+
+  th:last-child,
+  td:last-child {
+    width: 230px;
+  }
 }
 
-.classification-table th:last-child,
-.classification-table td:last-child {
-  width: 240px;
+/* 表头层次图例：三个语义色小色条 */
+.layer-legend {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 8px;
+  vertical-align: 2px;
+
+  i {
+    width: 12px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--dot);
+  }
 }
 
+/* 序号徽章：浅灰圆角方块 + 等宽数字 */
 .classification-number {
-  color: #1565c0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  color: var(--student-accent-deep);
+  background: #f3f4f6;
+  font-family: var(--student-font-data);
+  font-size: 12px;
   font-weight: 800;
 }
 
 .classification-selling-point {
+  color: #28303c;
+  font-weight: 600;
   line-height: 1.65;
 }
 
@@ -1745,95 +1871,140 @@ function exportOutcome() {
   width: 100%;
 }
 
-.classification-row--correct td {
-  background: rgba(46, 125, 50, 0.1);
+/* 选中值文字强制深色不透明（覆盖禁用态浅色与全局浅色文字污染） */
+.classification-select-cell {
+  :deep(.el-select__selected-item),
+  :deep(.el-select__placeholder),
+  :deep(.el-input__inner) {
+    color: #1f2937 !important;
+    -webkit-text-fill-color: #1f2937 !important;
+    font-weight: 600;
+  }
+
+  /* 判题请求中（禁用态）：用清晰可见的中度灰蓝，而非近乎透明白 */
+  :deep(.el-select.is-disabled .el-select__selected-item),
+  :deep(.el-input.is-disabled .el-input__inner) {
+    color: #565e6b !important;
+    -webkit-text-fill-color: #565e6b !important;
+  }
+
+  :deep(.el-select__caret) {
+    color: #6b7280;
+  }
 }
 
-.classification-row--incorrect td {
-  background: rgba(211, 47, 47, 0.1);
+/* 数据行统一纯白：不随层次选择/判题结果变色，对错仅以文字反馈提示 */
+.classification-table tbody td {
+  background: #ffffff !important;
+  box-shadow: none !important;
 }
 
 .classification-feedback,
 .classification-summary {
   margin: 8px 0 0;
-  color: #d32f2f;
+  color: #d9554c;
   font-size: 12px;
   line-height: 1.45;
 }
 
 .classification-row--correct .classification-feedback,
 .classification-summary.is-success {
-  color: #2e7d32;
+  color: var(--student-success);
 }
 
+.classification-summary.is-success {
+  background: rgba(74, 157, 110, 0.08);
+}
+
+/* 判题汇总横幅 */
 .classification-summary {
-  margin-top: 16px;
-  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  color: var(--student-danger);
+  background: rgba(217, 85, 76, 0.08);
+  font-size: 12px;
   font-weight: 700;
 }
 
-@media (max-width: 1100px) {
-  .new-product-value-page {
-    grid-template-columns: 1fr;
-  }
+/* 三层次彩色标识条：Step 03 维度列 / Step 04 分层卡片共用同一组语义色 */
+.dimension-cell::before {
+  content: "";
+  display: block;
+  width: 26px;
+  height: 4px;
+  margin-bottom: 7px;
+  border-radius: 2px;
+  background: var(--student-accent);
 }
 
-@media (max-width: 900px) {
-  .training-core {
-    padding: 18px;
-    border-radius: 24px;
-  }
+.layer-table tr:nth-child(1) .dimension-cell::before {
+  background: var(--student-layer-1);
+}
 
-  .step-indicator,
-  .step-navigation,
-  .task-actions,
-  .workbench-actions,
-  .workbench-head,
-  .step-title-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
+.layer-table tr:nth-child(2) .dimension-cell::before {
+  background: var(--student-layer-2);
+}
 
-  .step-tab,
-  .outline-action,
-  .btn-nav {
-    width: 100%;
+.layer-table tr:nth-child(3) .dimension-cell::before {
+  background: var(--student-layer-3);
+}
+
+.field-block.is-layer {
+  position: relative;
+  margin-bottom: 12px;
+  padding: 12px 14px 12px 20px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  background: var(--student-card-bg);
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 5px;
+    background: var(--bar, var(--student-accent));
   }
+}
+
+.field-block.layer-core {
+  --bar: var(--student-layer-1);
+}
 
-  .step-indicator {
+.field-block.layer-tangible {
+  --bar: var(--student-layer-2);
+}
+
+.field-block.layer-extended {
+  --bar: var(--student-layer-3);
+}
+
+@media (max-width: 1100px) {
+  .step-progress {
+    position: static;
     width: 100%;
-    margin: 0 0 32px;
-    padding: 16px;
-    border-radius: 20px;
-    overflow-x: visible;
+    text-align: center;
   }
+}
 
-  .step-tab {
-    flex: 0 0 auto;
-    min-width: 0;
+@media (max-width: 900px) {
+  .task-header {
+    flex-direction: column;
   }
 
-  .step-connector {
-    flex: 0 0 20px;
-    align-self: flex-start;
-    width: 2px;
-    min-width: 0;
-    height: 20px;
-    margin: 4px 0 4px 18px;
-
-    &::after {
-      top: auto;
-      right: auto;
-      bottom: -1px;
-      left: 50%;
-      transform: translateX(-50%) rotate(135deg);
-    }
+  .step-navigation {
+    flex-direction: column;
+    align-items: stretch;
   }
 
-  .form-grid,
-  .form-grid.three,
-  .price-options {
-    grid-template-columns: 1fr;
+  .btn-nav {
+    width: 100%;
   }
 
   .classification-table {
@@ -1849,21 +2020,6 @@ function exportOutcome() {
   }
 }
 
-.workbench-eyebrow {
-  margin: 0 0 6px;
-  color: #1565c0;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: .1em;
-}
-
-.workbench-head h2 {
-  margin: 0;
-  color: #1e3a5f;
-  font-size: 25px;
-  line-height: 1.25;
-}
-
 .new-product-survey-toolbar {
   flex: 0 0 auto;
   justify-content: flex-end;
@@ -1877,3 +2033,298 @@ function exportOutcome() {
   }
 }
 </style>
+
+<!--
+  非 scoped 全局微调（墨黑极简主题，仅作用于本页）：
+  1) app-main 画布改为纯白（scoped 无法触及祖先节点）；
+  2) AI 助学侧栏组件整体中性灰白换肤，避免与页面风格割裂。
+  所有选择器均以 .new-product-value-page 为根，不影响其他页面。
+-->
+<style lang="scss">
+/* 页面画布：纯白，不使用任何底色渐变 */
+#app .studentLayout .app-main:has(.new-product-value-page) {
+  background: #ffffff !important;
+}
+
+/* 全局 shell 行高为 1.8，本页收紧为 1.55（选择器特异性对齐全局规则） */
+#app .studentLayout .app-main:has(.new-product-value-page) .new-product-value-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== AI 侧栏中性灰白换肤（关键项加 !important 稳定覆盖组件 scoped 规则） ===== */
+.new-product-value-page .training-ai-sidebar {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 50% 0%, rgba(31, 41, 55, 0.09), transparent 42%) !important;
+  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
+}
+
+.new-product-value-page .training-ai-sidebar.is-collapsed {
+  border-color: #e5e7eb !important;
+  background: linear-gradient(180deg, #f8f9fa, #ffffff) !important;
+  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.09) !important;
+}
+
+.new-product-value-page .ai-sidebar-toggle {
+  border-color: rgba(31, 41, 55, 0.3) !important;
+  color: #1f2937 !important;
+  background: #f8f9fa !important;
+  box-shadow: none !important;
+}
+
+.new-product-value-page .ai-sidebar-toggle:hover,
+.new-product-value-page .ai-sidebar-toggle:focus-visible {
+  border-color: #1f2937 !important;
+  background: #f3f4f6 !important;
+}
+
+.new-product-value-page .ai-panel {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    repeating-linear-gradient(90deg, rgba(31, 41, 55, 0.035) 0 1px, transparent 1px 26px) !important;
+  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.07) !important;
+}
+
+.new-product-value-page .ai-panel::before {
+  background: linear-gradient(90deg, #1f2937, transparent) !important;
+}
+
+.new-product-value-page .ai-panel h3 {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .ai-panel h3 .el-icon {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .ai-output {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 18% 12%, rgba(31, 41, 55, 0.07), transparent 32%) !important;
+  box-shadow: inset 0 0 24px rgba(31, 41, 55, 0.05) !important;
+}
+
+.new-product-value-page .output-glow {
+  background:
+    linear-gradient(90deg, rgba(31, 41, 55, 0.06), transparent 22%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 26%) !important;
+}
+
+/* 对话气泡 */
+.new-product-value-page .study-message {
+  border-color: rgba(31, 41, 55, 0.18) !important;
+}
+
+.new-product-value-page .study-message strong {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .study-message span {
+  color: #374151 !important;
+}
+
+.new-product-value-page .study-message--student {
+  background: #e5e7eb !important;
+}
+
+.new-product-value-page .study-message--assistant {
+  background: #f3f4f6 !important;
+}
+
+.new-product-value-page .ai-instruction,
+.new-product-value-page .assessment-hint {
+  color: #6b7280 !important;
+}
+
+/* 参考提示块 */
+.new-product-value-page .reference-block {
+  border-top-color: rgba(31, 41, 55, 0.18) !important;
+  color: #374151 !important;
+}
+
+.new-product-value-page .reference-block strong {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .reference-block:hover strong {
+  color: #1f2937 !important;
+}
+
+/* 提问输入框 */
+.new-product-value-page .ai-input-shell textarea {
+  border-color: #e5e7eb !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
+}
+
+.new-product-value-page .ai-input-shell textarea::placeholder {
+  color: #9ca3af !important;
+}
+
+.new-product-value-page .ai-input-shell textarea:focus {
+  border-color: #1f2937 !important;
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12) !important;
+}
+
+/* 发送按钮：扁平墨黑 */
+.new-product-value-page .send-btn {
+  border-color: #1f2937 !important;
+  background: #1f2937 !important;
+  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.3) !important;
+}
+
+.new-product-value-page .send-btn:hover {
+  box-shadow: 0 12px 26px rgba(31, 41, 55, 0.36) !important;
+}
+
+/* 成绩徽章 */
+.new-product-value-page .score-badge {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background: linear-gradient(90deg, #f3f4f6, #f8f9fa) !important;
+  box-shadow: none !important;
+}
+
+.new-product-value-page .score-badge span {
+  color: #374151 !important;
+}
+
+.new-product-value-page .score-badge em {
+  color: #6b7280 !important;
+}
+
+.new-product-value-page .score-badge strong {
+  color: #1f2937 !important;
+  text-shadow: none !important;
+}
+
+/* AI 助评结果 */
+.new-product-value-page .assessment-summary {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .assessment-criterion {
+  border-color: #e5e7eb !important;
+  background: #f2f6fb !important;
+}
+
+.new-product-value-page .assessment-criterion__heading {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .assessment-criterion__heading span {
+  color: #1f2937 !important;
+}
+
+.new-product-value-page .assessment-criterion__heading small,
+.new-product-value-page .assessment-criterion p {
+  color: #6b7280 !important;
+}
+
+.new-product-value-page .assessment-actions {
+  border-left-color: #1f2937 !important;
+  color: #374151 !important;
+  background: rgba(31, 41, 55, 0.07) !important;
+}
+
+.new-product-value-page .assessment-actions strong {
+  color: #1f2937 !important;
+}
+
+/* AI 智能评分按钮：把 Element Plus 主色按钮局部改为墨黑 */
+.new-product-value-page .assessment-button.el-button {
+  --el-color-primary: #1f2937;
+  --el-color-primary-light-3: #6b7280;
+  --el-color-primary-light-5: #9ca3af;
+  --el-color-primary-light-7: #d1d5db;
+  --el-color-primary-light-8: #d9eaf7;
+  --el-color-primary-light-9: #f3f4f6;
+  --el-color-primary-dark-2: #111827;
+  border-radius: 10px;
+}
+
+/*
+ * 顶部任务工具栏四按钮统一设计（下载案例资料 / 提交任务 / 重新实训 / 导出实训成果）：
+ * 统一 36px 高、8px 圆角；主操作墨黑实底，次操作白底灰描边。
+ * 强制 text-shadow:none 消除文字重影。
+ */
+.new-product-value-page .training-task-toolbar {
+  gap: 8px;
+}
+
+/* 次按钮基类：白底 + 中性灰描边 + 深灰字 */
+.new-product-value-page .task-toolbar-button.el-button,
+.new-product-value-page .material-button.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  box-shadow: none;
+  text-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.new-product-value-page .task-toolbar-button.el-button .el-icon,
+.new-product-value-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
+}
+
+.new-product-value-page .task-toolbar-button.el-button:hover,
+.new-product-value-page .task-toolbar-button.el-button:focus,
+.new-product-value-page .material-button.el-button:hover,
+.new-product-value-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
+
+/* 主按钮（提交任务）：墨黑实底白字 */
+.new-product-value-page .task-toolbar-button--submit.el-button {
+  border-color: #1f2937;
+  color: #ffffff;
+  background: #1f2937;
+  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
+}
+
+.new-product-value-page .task-toolbar-button--submit.el-button:hover,
+.new-product-value-page .task-toolbar-button--submit.el-button:focus {
+  border-color: #111827;
+  color: #ffffff;
+  background: #111827;
+  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.28);
+}
+
+/* 导出按钮 loading 态保持白底灰描边不变 */
+.new-product-value-page .task-toolbar-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
+}
+
+/* 无案例资料时的 plain 禁用提示态：浅灰底虚线感弱化 */
+.new-product-value-page .material-button.el-button.is-plain {
+  color: #9ca3af;
+  background: #ffffff;
+}
+
+.new-product-value-page .material-button.el-button.is-plain:hover {
+  border-color: #d1d5db;
+  color: #6b7280;
+  background: #f9fafb;
+}
+</style>
diff --git a/src/views/foundation/product-development-factors.vue b/src/views/foundation/product-development-factors.vue
index a7571bc..c1213d2 100644
--- a/src/views/foundation/product-development-factors.vue
+++ b/src/views/foundation/product-development-factors.vue
@@ -2,15 +2,29 @@
   <div class="product-factors student-training-shell">
     <main class="factors-core">
       <section class="task-header">
-        <div class="task-badge">
-          <el-icon><Operation /></el-icon>
-          核心实训 · 互联网产品开发基础
+        <div class="task-head-main">
+          <span class="task-badge">
+            <el-icon><Operation /></el-icon>
+            核心实训 · 互联网产品开发基础
+          </span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul>
+                <li v-for="goal in taskGoals" :key="goal">{{ goal }}</li>
+              </ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
         </div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
       <section class="factors-workbench">
       <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
@@ -23,22 +37,20 @@
         </div>
 
         <nav v-if="trainingSteps.length" class="step-indicator" aria-label="实训步骤">
-          <template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
-            <button
-              type="button"
-              :class="['step-tab', { active: currentStep === index, complete: currentStep > index }]"
-              :aria-label="`切换至第 ${index + 1} 步：${step}`"
-              :aria-current="currentStep === index ? 'step' : undefined"
-              @click="currentStep = index"
-            >
-              <span class="step-marker" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy">
-                <strong class="step-name" :title="step">{{ step }}</strong>
-                <span class="step-action">{{ currentStep === index ? '当前步骤' : '点击切换' }} <span aria-hidden="true">→</span></span>
-              </span>
-            </button>
-            <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true" />
-          </template>
+          <button
+            v-for="(step, index) in trainingSteps"
+            :key="`${step}-${index}`"
+            type="button"
+            :class="['step-tab', { active: currentStep === index, complete: currentStep > index }]"
+            :aria-label="`切换至第 ${index + 1} 步：${step}`"
+            :aria-current="currentStep === index ? 'step' : undefined"
+            :title="step"
+            @click="currentStep = index"
+          >
+            <span class="step-bar" aria-hidden="true"></span>
+            <span class="step-no" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
+            <span class="step-name">{{ step }}</span>
+          </button>
         </nav>
 
         <section class="factor-step-card">
@@ -144,7 +156,6 @@ import { checkProductDevelopmentFactorsStepOne, checkProductDevelopmentFactorsSt
 import useUserStore from "@/store/modules/user";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 
 const { proxy } = getCurrentInstance();
 const TASK_KEY = "product-development-factors";
@@ -153,6 +164,7 @@ const taskConfig = ref(null);
 const saving = ref(false);
 const draftReady = ref(false);
 const currentStep = ref(0);
+const briefOpen = ref(false);
 
 const getLocalDraftKey = () => {
   const userInfo = userStore.userInfo || {};
@@ -473,389 +485,238 @@ function exportOutcome() {
 </script>
 
 <style lang="scss" scoped>
+/*
+ * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次。
+ * 覆盖全局主色/文字/边框令牌，使所有 var(--student-*) 规则自动重着色。
+ */
 .product-factors {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  width: 100%;
-  min-height: calc(100vh - 106px);
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
-  background: transparent;
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 点缀色：暖橙（小面积使用） */
+  --student-terracotta: #e8953c;
+  /* 语义色 */
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  /* 结构色：中性灰白系 */
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  /* 紧凑字号梯度：在全局 --student-fs-* 基础上整体下调一档（11→17px） */
+  --student-fs-display: 17px;   /* 任务主标题 */
+  --student-fs-h1: 15px;         /* 步骤大标题 */
+  --student-fs-h2: 14px;         /* 面板/行标题 */
+  --student-fs-h3: 13px;         /* 区块小标题 */
+  --student-fs-body: 13px;       /* 正文 */
+  --student-fs-body-sm: 12px;    /* 次要文字/表格 */
+  --student-fs-caption: 11px;    /* 标签/徽章 */
+  --student-fs-button: 13px;     /* 按钮文字 */
+  --student-fs-button-lg: 13px;  /* 主按钮文字 */
+  --student-fs-data: 14px;       /* 数字/成绩 */
+  min-width: 0;
+  color: var(--student-text);
 }
 
+/* 主列布局：容器栅格与内边距由全局 .student-training-shell 统一提供 */
 .factors-core {
-  min-width: 0;
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.06);
-  backdrop-filter: blur(8px);
+  display: grid;
+  gap: 10px;
+  align-content: start;
 }
 
+/* 任务头：徽章 + 标题 + 可折叠简介 */
 .task-header {
-  margin-bottom: 24px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .task-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  margin-bottom: 12px;
-  padding: 4px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 30px;
-  color: #1565c0;
-  background: #e3f2fd;
-  font-size: var(--student-fs-caption);
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
   font-weight: 700;
 }
 
 .task-title {
   margin: 0;
-  color: transparent;
-  background: linear-gradient(135deg, #1565c0, #1e88e5);
-  -webkit-background-clip: text;
-  background-clip: text;
-  font-size: var(--student-fs-display);
-  line-height: 1.3;
-  font-weight: 900;
-  letter-spacing: 0;
-}
-
-.goal-bg {
-  margin-bottom: 28px;
-  padding: 16px 20px;
-  border: 1px solid #cfe2f5;
-  border-radius: 24px;
-  background: #f0f6fd;
-
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
+  color: var(--student-text);
+  font-size: 17px;
+  line-height: 1.35;
+  font-weight: 700;
 }
 
-.subtitle-icon {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  color: #1565c0;
-  font-weight: 800;
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.subtitle-icon--spaced {
-  margin-top: 12px;
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.factors-workbench {
-  margin: 0;
-  padding: 18px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
-  box-shadow: none;
-  backdrop-filter: none;
-}
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 
-/* The legacy training wrapper injects a task pill through ::before. */
-.factors-workbench::before {
-  content: none !important;
-  display: none !important;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-.workbench-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 18px;
-  margin-bottom: 22px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid #cfe2f5;
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
 
-  h3 {
-    margin: 4px 0 8px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h1) !important;
-    font-weight: 800 !important;
-    line-height: 1.3 !important;
+  b {
+    color: var(--student-text);
   }
 
-  .section-eyebrow {
+  ul {
+    display: grid;
+    gap: 4px;
     margin: 0;
-    color: #1565c0;
-    font-size: var(--student-fs-caption);
-    font-weight: 800;
-    line-height: 1.4;
+    padding-left: 18px;
   }
 
-  > div > .workbench-description {
+  p {
     margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    font-weight: 400;
-    line-height: 1.8;
   }
 }
 
-.workbench-actions {
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
-}
+/* 工作台：白底卡片（内含操作区、步骤导航、步骤内容） */
+.factors-workbench {
+  margin: 0;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
 
-.step-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  width: calc(100% + 24px);
-  margin: 0 -12px 32px;
-  padding: 18px 22px;
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(90deg, #e3f2fd, #f0f6fd),
-    rgba(0, 0, 0, 0.04);
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.06);
-  scrollbar-width: thin;
+  &::before {
+    content: none !important;
+    display: none !important;
+  }
 }
 
-.step-tab {
+/* 仅含操作按钮的头部：右对齐，无分隔线 */
+.workbench-head--actions-only {
   display: flex;
-  flex: 1 0 145px;
-  align-items: center;
-  min-width: 0;
-  min-height: 66px;
-  padding: 8px 10px;
-  border: 1px solid #cfe2f5;
-  border-radius: 8px;
-  color: #5a7a9a;
-  background: #f0f6fd;
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.04);
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  cursor: pointer;
-  text-align: left;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: #42a5f5;
-    color: #1e3a5f;
-    background: #e3f2fd;
-    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.1);
-    transform: translateY(-2px);
-
-    .step-action {
-      color: #1e88e5;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid #1e88e5;
-    outline-offset: 4px;
-  }
-
-  &.active {
-    border-color: #42a5f5;
-    color: #ffffff;
-    background: linear-gradient(115deg, #1e88e5, #1565c0);
-    box-shadow: 0 0 18px rgba(30, 136, 229, 0.15), inset 0 1px 0 rgba(30, 136, 229, 0.1);
-
-    .step-marker {
-      border-color: #1e88e5;
-      color: #ffffff;
-      background: linear-gradient(135deg, #1e88e5, #1565c0);
-      box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.12), 0 0 18px rgba(30, 136, 229, 0.3);
-    }
-  }
-
-  &.complete {
-    color: #2c4a6a;
-
-    .step-marker {
-      border-color: #26a69a;
-      color: #ffffff;
-      background: #26a69a;
-      box-shadow: 0 0 12px rgba(38, 166, 154, 0.2);
-    }
-  }
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #90caf9;
-  border-radius: 50%;
-  color: #5a7a9a;
-  background: #f0f6fd;
-  box-shadow: inset 0 0 12px rgba(30, 136, 229, 0.06);
-  font-size: var(--student-fs-caption);
-  font-weight: 900;
-  letter-spacing: 0.04em;
-  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+.workbench-actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
 }
 
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-}
+/* 步骤导航（极简文字下划线）的换肤见非 scoped 块 */
 
 .step-name {
-  display: -webkit-box;
+  display: block;
   overflow: hidden;
+  min-width: 0;
   color: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  line-height: 1.25;
   text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.step-action {
-  color: #5a7a9a;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  transition: color 0.2s ease;
-}
-
-.step-connector {
-  position: relative;
-  flex: 0 1 40px;
-  min-width: 18px;
-  height: 2px;
-  margin: 0 8px;
-  background: #cfe2f5;
-
-  &::after {
-    position: absolute;
-    top: 50%;
-    right: -1px;
-    width: 6px;
-    height: 6px;
-    border-top: 1px solid #5a7a9a;
-    border-right: 1px solid #5a7a9a;
-    content: '';
-    transform: translateY(-50%) rotate(45deg);
-  }
-}
-
-.step-tab.complete + .step-connector {
-  background: linear-gradient(90deg, #26a69a, #1e88e5);
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.2);
-
-  &::after {
-    border-color: #26a69a;
-  }
 }
 
+/* 步骤卡片：透明嵌入工作台，不再单独铺底 */
 .factor-step-card {
   margin: 0;
-  padding: 18px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
+  background: transparent;
 }
 
 .step-title-row {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 14px;
+  gap: 12px;
+  margin-bottom: 10px;
 
   h3 {
-    margin: 4px 0 0;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h2);
-    font-weight: 900;
-    line-height: 1.3;
+    margin: 2px 0 0;
+    color: var(--student-text);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.35;
   }
 }
 
+/* Step 编号小标签：弱化处理，标题上方灰色引导文字 */
 .section-eyebrow {
   margin: 0;
-  color: #1565c0;
-  font-size: var(--student-fs-caption);
+  color: var(--student-text-secondary);
+  font-size: 11px;
   font-weight: 800;
-  line-height: 1.4;
-}
-
-.table-textarea {
-  width: 100%;
-  border: 1px solid #90caf9;
-  border-radius: 14px;
-  outline: none;
-  color: #1e3a5f;
-  background: #ffffff;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease;
-
-  &::placeholder {
-    color: #7a8fa3;
-  }
-
-  &:focus {
-    border-color: #42a5f5;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
-  }
+  line-height: 1.3;
+  letter-spacing: 0.12em;
 }
 
+/* 表格：纯白 + 中性边框，无任何底色 */
 .training-table-wrap {
   overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #ffffff;
 }
 
 .factor-table {
   width: 100%;
-  min-width: 980px;
+  min-width: 960px;
   border-collapse: collapse;
   table-layout: fixed;
 
   th {
-    padding: 12px;
-    border-right: 1px solid #cfe2f5;
-    color: #1e3a5f;
-    background: #bbdefb;
-    font-size: var(--student-fs-body);
-    font-weight: 900;
+    padding: 9px 10px;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #ffffff;
+    font-size: 12px;
+    font-weight: 700;
     text-align: center;
   }
 
   td {
-    min-height: 118px;
-    padding: 12px;
-    border-top: 1px solid #cfe2f5;
-    border-right: 1px solid #cfe2f5;
-    color: #2c4a6a;
-    background: #f0f6fd;
+    padding: 9px 10px;
+    border-top: 1px solid #f0f1f3;
+    color: #374151;
+    background: #ffffff;
     vertical-align: top;
   }
-
-  th:last-child,
-  td:last-child {
-    border-right: 0;
-  }
 }
 
 .dimension-col {
@@ -867,63 +728,89 @@ function exportOutcome() {
 }
 
 .dimension-cell {
-  color: #1e3a5f;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 700;
   text-align: center;
 }
 
 .criteria-cell {
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.55;
   text-align: center;
 }
 
+/* 表格内文本域：中性描边，聚焦墨黑 */
 .table-textarea {
-  min-height: 104px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 96px;
+  padding: 9px 11px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  color: #1f2937;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.55;
   resize: vertical;
-  padding: 12px 14px;
-  line-height: 1.6;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+
+  &:focus {
+    border-color: #1f2937;
+    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+  }
+}
+
+.summary-textarea {
+  min-height: 84px;
 }
 
 .factor-intro {
-  margin: 0 0 18px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
-  font-weight: 700;
-  line-height: 1.8;
+  margin: 0 0 12px;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.6;
 }
 
 .step-placeholder {
   display: grid;
   place-items: center;
-  min-height: 280px;
-  padding: 28px;
-  border: 1px dashed #cfe2f5;
-  border-radius: 18px;
-  color: #5a7a9a;
-  background: #f0f6fd;
+  min-height: 220px;
+  padding: 24px;
+  border: 1px dashed #d1d5db;
+  border-radius: 12px;
+  color: #6b7280;
+  background: #ffffff;
   text-align: center;
 
   p {
-    margin: 0 0 8px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-display);
-    font-weight: 800;
+    margin: 0 0 6px;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 700;
   }
 
   span {
-    font-size: var(--student-fs-body);
-    line-height: 1.7;
+    font-size: 12px;
+    line-height: 1.6;
   }
 }
 
+/* 操作按钮区：居中紧凑排列（与标准页 .step-navigation 同规格） */
 .task-actions {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
+  gap: 14px;
+  margin-top: 20px;
 }
 
 .outline-action,
@@ -936,152 +823,604 @@ function exportOutcome() {
   cursor: pointer;
 }
 
-.outline-action {
+/*
+ * 次按钮（清空填写）：白底 + 墨黑半透明描边 + 墨黑字；
+ * 与标准样例一致：40px 高、10px 圆角、700 字重、hover 轻微浮起。
+ */
+.btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #90caf9;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-weight: 800;
-  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: none;
+  cursor: pointer;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
-  &:hover {
+  &:hover:not(:disabled) {
     transform: translateY(-1px);
-    border-color: #42a5f5;
-    background: #bbdefb;
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+    box-shadow: none;
   }
 }
 
-.workbench-actions .outline-action {
-  min-width: 0 !important;
-  min-height: 40px !important;
-  height: 40px !important;
-  padding: 0 18px !important;
-  border: 1px solid #90caf9 !important;
-  border-radius: 999px !important;
-  color: #1e3a5f !important;
-  background: #e3f2fd !important;
+/* 主按钮（保存进入下一步 / 提交任务）：墨黑实底白字 + 中性柔影 */
+.btn-submit {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: var(--student-accent-deep);
+    background: var(--student-accent-deep);
+    box-shadow: 0 5px 14px rgba(31, 41, 55, 0.32);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+}
+
+/* 工作台顶部"导出实训成果"按钮：白底灰描边次按钮 */
+.outline-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+
+  &:hover {
+    border-color: #1f2937;
+    color: #1f2937;
+    background: #f9fafb;
+    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+  }
+}
+
+/* 案例资料按钮（TrainingMaterialButton 子组件）的换肤见非 scoped 块 */
+
+@media (max-width: 900px) {
+  /* 窄屏全宽规则的强制覆盖见非 scoped 块（scoped 打不赢全局 !important） */
+
+  /* 步骤标题行纵向（全局未锁，scoped 可生效） */
+  .step-title-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
+
+<style lang="scss">
+/* 页面画布：纯白，不使用任何底色渐变（scoped 无法触及祖先 app-main） */
+#app .studentLayout section.app-main:has(.product-factors) {
+  background: #ffffff !important;
+  background-image: none !important;
+}
+
+/* 全局 shell 行高 1.8，本页收紧为 1.55 */
+#app .studentLayout .app-main:has(.product-factors) .product-factors {
+  line-height: 1.55 !important;
+}
+
+/* ===== AI 侧栏中性灰白换肤（关键项 !important 稳定覆盖组件 scoped 规则） ===== */
+.product-factors .training-ai-sidebar {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 50% 0%, rgba(31, 41, 55, 0.09), transparent 42%) !important;
+  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.1) !important;
+}
+
+.product-factors .training-ai-sidebar.is-collapsed {
+  border-color: #e5e7eb !important;
+  background: linear-gradient(180deg, #f8f9fa, #ffffff) !important;
+  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.09) !important;
+}
+
+.product-factors .ai-sidebar-toggle {
+  border-color: rgba(31, 41, 55, 0.3) !important;
+  color: #1f2937 !important;
+  background: #f8f9fa !important;
   box-shadow: none !important;
-  font-size: var(--student-fs-button) !important;
-  font-weight: 800 !important;
-  line-height: 1 !important;
 }
 
-.workbench-actions :deep(.material-download) {
-  min-height: 40px !important;
-  padding: 0 18px !important;
-  border-color: #90caf9 !important;
-  border-radius: 999px !important;
-  color: #1e3a5f !important;
-  background: #e3f2fd !important;
+.product-factors .ai-sidebar-toggle:hover,
+.product-factors .ai-sidebar-toggle:focus-visible {
+  border-color: #1f2937 !important;
+  background: #f3f4f6 !important;
+}
+
+.product-factors .ai-panel {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    repeating-linear-gradient(90deg, rgba(31, 41, 55, 0.035) 0 1px, transparent 1px 26px) !important;
+  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.07) !important;
+}
+
+.product-factors .ai-panel::before {
+  background: linear-gradient(90deg, #1f2937, transparent) !important;
+}
+
+.product-factors .ai-panel h3,
+.product-factors .ai-panel h3 .el-icon {
+  color: #1f2937 !important;
+}
+
+.product-factors .ai-output {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 18% 12%, rgba(31, 41, 55, 0.07), transparent 32%) !important;
+  box-shadow: inset 0 0 24px rgba(31, 41, 55, 0.05) !important;
+}
+
+.product-factors .output-glow {
+  background:
+    linear-gradient(90deg, rgba(31, 41, 55, 0.06), transparent 22%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 26%) !important;
+}
+
+/* 对话气泡 */
+.product-factors .study-message {
+  border-color: rgba(31, 41, 55, 0.18) !important;
+}
+
+.product-factors .study-message strong {
+  color: #1f2937 !important;
+}
+
+.product-factors .study-message span {
+  color: #374151 !important;
+}
+
+.product-factors .study-message--student {
+  background: #e5e7eb !important;
+}
+
+.product-factors .study-message--assistant {
+  background: #f3f4f6 !important;
+}
+
+.product-factors .ai-instruction,
+.product-factors .assessment-hint {
+  color: #6b7280 !important;
+}
+
+/* 参考提示块 */
+.product-factors .reference-block {
+  border-top-color: rgba(31, 41, 55, 0.18) !important;
+  color: #374151 !important;
+}
+
+.product-factors .reference-block strong {
+  color: #1f2937 !important;
+}
+
+/* 提问输入框 */
+.product-factors .ai-input-shell textarea {
+  border-color: #e5e7eb !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
+}
+
+.product-factors .ai-input-shell textarea::placeholder {
+  color: #9ca3af !important;
+}
+
+.product-factors .ai-input-shell textarea:focus {
+  border-color: #1f2937 !important;
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12) !important;
+}
+
+/* 发送按钮：扁平墨黑 */
+.product-factors .send-btn {
+  border-color: #1f2937 !important;
+  background: #1f2937 !important;
+  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.3) !important;
+}
+
+.product-factors .send-btn:hover {
+  background: #111827 !important;
+}
+
+/* 成绩徽章 */
+.product-factors .score-badge {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background: linear-gradient(90deg, #f3f4f6, #f8f9fa) !important;
   box-shadow: none !important;
-  font-size: var(--student-fs-button) !important;
+}
+
+.product-factors .score-badge span {
+  color: #374151 !important;
+}
+
+.product-factors .score-badge em {
+  color: #6b7280 !important;
+}
+
+.product-factors .score-badge strong {
+  color: #1f2937 !important;
+  text-shadow: none !important;
+}
+
+/* AI 助评结果 */
+.product-factors .assessment-summary {
+  color: #1f2937 !important;
+}
+
+.product-factors .assessment-criterion {
+  border-color: #e5e7eb !important;
+  background: #f8f9fa !important;
+}
+
+.product-factors .assessment-criterion__heading,
+.product-factors .assessment-criterion__heading span {
+  color: #1f2937 !important;
+}
+
+.product-factors .assessment-criterion__heading small,
+.product-factors .assessment-criterion p {
+  color: #6b7280 !important;
+}
+
+.product-factors .assessment-actions {
+  border-left-color: #1f2937 !important;
+  color: #374151 !important;
+  background: rgba(31, 41, 55, 0.07) !important;
+}
+
+.product-factors .assessment-actions strong {
+  color: #1f2937 !important;
+}
+
+/* AI 智能评分按钮：Element Plus 主色按钮局部改墨黑 */
+.product-factors .assessment-button.el-button {
+  --el-color-primary: #1f2937;
+  --el-color-primary-light-3: #6b7280;
+  --el-color-primary-light-5: #9ca3af;
+  --el-color-primary-light-7: #d1d5db;
+  --el-color-primary-light-9: #f3f4f6;
+  --el-color-primary-dark-2: #111827;
+  border-radius: 10px;
+}
+
+/* ============================================================
+ * 步骤导航重设计：杂志章节风（大号编号 + 短粗引导线）
+ * id 锚点 + !important 覆盖全局浅蓝胶囊与 1100px 纵向规则。
+ * ============================================================ */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: flex-start !important;
+  justify-content: center !important;
+  gap: 28px !important;
+  width: 100% !important;
+  margin: 2px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab {
+  flex: 1 1 0 !important;
+  max-width: 160px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  gap: 8px !important;
+  width: auto !important;
+  min-width: 0 !important;
+  height: auto !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #9ca3af !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1.4 !important;
+  letter-spacing: 0 !important;
+  white-space: normal !important;
+  text-align: left !important;
+  transition: color 0.16s ease !important;
+}
+
+/* 顶部短粗引导线 */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-bar {
+  width: 24px !important;
+  height: 3px !important;
+  background: transparent !important;
+  transition: background 0.16s ease !important;
+}
+
+/* 大号编号：视觉主角 */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-no {
+  position: relative;
+  color: #d1d5db !important;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace !important;
+  font-size: 32px !important;
   font-weight: 800 !important;
   line-height: 1 !important;
+  letter-spacing: -1px !important;
+  transition: color 0.16s ease !important;
 }
 
-.workbench-actions :deep(.material-download:hover) {
-  transform: translateY(-1px);
-  border-color: #42a5f5 !important;
-  color: #1e3a5f !important;
-  background: #bbdefb !important;
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-name {
+  color: inherit !important;
 }
 
-.btn-nav {
-  display: inline-flex;
-  min-width: 172px;
-  min-height: 64px;
-  padding: 0 28px;
-  border: 1px solid #1e88e5;
-  border-radius: 6px;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  box-shadow: none;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-  text-shadow: none;
+/* 未到达项 hover：编号与文字转深灰 */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab:hover:not(.active):not(.complete) {
+  color: #6b7280 !important;
 }
 
-.btn-submit {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab:hover:not(.active):not(.complete) .step-no {
+  color: #6b7280 !important;
 }
 
-.task-actions .btn-nav .el-icon {
-  display: none;
+/* 已完成步骤：深灰编号 + 右上角绿色小圆点 */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.complete:not(.active) {
+  color: #6b7280 !important;
 }
 
-.btn-nav:hover:not(:disabled) {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: #bbdefb;
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.complete:not(.active) .step-no {
+  color: #6b7280 !important;
 }
 
-@media (max-width: 1100px) {
-  .product-factors {
-    grid-template-columns: 1fr;
-  }
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.complete .step-no::after {
+  content: "";
+  position: absolute;
+  top: -3px;
+  right: -8px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #4a9d6e;
+}
+
+/* 当前步骤：引导线墨黑 + 墨黑编号 + 加粗黑字 */
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.active {
+  color: #1f2937 !important;
+  font-weight: 700 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.active .step-bar {
+  background: #1f2937 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab.active .step-no {
+  color: #1f2937 !important;
 }
 
 @media (max-width: 900px) {
-  .product-factors {
-    padding: 14px 14px 18px;
+  #app .studentLayout section.app-main:has(.product-factors) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 20px !important;
+    overflow-x: auto !important;
   }
 
-  .factors-core {
-    padding: 18px;
-    border-radius: 24px;
+  #app .studentLayout section.app-main:has(.product-factors) .step-indicator .step-tab {
+    flex: 0 0 112px !important;
+    max-width: none !important;
   }
+}
 
-  .workbench-head,
-  .workbench-actions,
-  .task-actions,
-  .step-indicator,
-  .step-title-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
+/* ============================================================
+ * 按钮风格强制同步：
+ * 全局 student-training.scss 用 !important 把 .workbench-actions /
+ * .task-actions 按钮锁成浅蓝大胶囊，scoped 规则无法取胜。
+ * 这里用 id 锚点（特异性含 #app）+ !important 稳定覆盖。
+ * ============================================================ */
+
+/* --- 顶部工具栏：36px 白底灰描边小按钮（位置 B） --- */
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  max-height: none !important;
+  padding: 0 14px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+  color: #374151 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button .el-icon {
+  color: inherit !important;
+  font-size: 14px !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button:hover,
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button:focus {
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1) !important;
+}
+
+/* 无案例资料时的 plain 态 */
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button.is-plain {
+  border-color: #e5e7eb !important;
+  color: #9ca3af !important;
+  background: #ffffff !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button.is-plain:hover {
+  border-color: #d1d5db !important;
+  color: #6b7280 !important;
+  background: #f9fafb !important;
+  box-shadow: none !important;
+}
 
-  .step-indicator {
-    width: 100%;
-    margin: 0 0 32px;
-    padding: 16px;
-    overflow-x: visible;
-    border-radius: 20px;
+/* 顶部"导出实训成果"原生按钮：全局 L592 锁为 34px 浅蓝胶囊 */
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions > button.outline-action {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  max-height: none !important;
+  padding: 0 14px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+  color: #374151 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .workbench-actions > button.outline-action:hover {
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1) !important;
+  transform: none !important;
+}
+
+/* --- 底部步骤按钮：40px 标准按钮（位置 A） --- */
+#app .studentLayout section.app-main:has(.product-factors) .task-actions {
+  gap: 14px !important;
+  margin-top: 20px !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  min-width: 0 !important;
+  width: auto !important;
+  height: 40px !important;
+  min-height: 40px !important;
+  padding: 0 18px !important;
+  border: 1px solid rgba(31, 41, 55, 0.4) !important;
+  border-radius: 10px !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button .el-icon {
+  display: inline-flex !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button:hover:not(:disabled) {
+  transform: translateY(-1px) !important;
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f3f4f6 !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
+}
+
+/* 主按钮：墨黑实底白字 + 中性柔影 */
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button.btn-submit {
+  border-color: #1f2937 !important;
+  color: #ffffff !important;
+  background: #1f2937 !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button.btn-submit:hover:not(:disabled) {
+  border-color: #111827 !important;
+  color: #ffffff !important;
+  background: #111827 !important;
+  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.32) !important;
+}
+
+#app .studentLayout section.app-main:has(.product-factors) .task-actions > button:disabled {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* 窄屏：按钮纵向全宽（全局容器 min-width/布局均为 !important，须在此覆盖） */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.product-factors) .workbench-head,
+  #app .studentLayout section.app-main:has(.product-factors) .workbench-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    min-width: 0 !important;
+    width: 100% !important;
   }
 
-  .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
-    min-width: 0;
+  #app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-actions {
+    display: grid !important;
+    width: 100% !important;
   }
 
-  .step-connector {
-    flex: 0 0 20px;
-    align-self: flex-start;
-    width: 2px;
-    min-width: 0;
-    height: 20px;
-    margin: 4px 0 4px 18px;
-
-    &::after {
-      top: auto;
-      right: auto;
-      bottom: -1px;
-      left: 50%;
-      transform: translateX(-50%) rotate(135deg);
-    }
+  #app .studentLayout section.app-main:has(.product-factors) .workbench-actions .material-button.el-button,
+  #app .studentLayout section.app-main:has(.product-factors) .workbench-actions > button.outline-action,
+  #app .studentLayout section.app-main:has(.product-factors) .task-actions > button {
+    width: 100% !important;
   }
 
-}
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+  #app .studentLayout section.app-main:has(.product-factors) .task-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
 }
 </style>
diff --git a/src/views/foundation/product-development-process.vue b/src/views/foundation/product-development-process.vue
index 682d36b..f64b218 100644
--- a/src/views/foundation/product-development-process.vue
+++ b/src/views/foundation/product-development-process.vue
@@ -2,12 +2,26 @@
   <div class="product-process student-training-shell">
     <main class="process-core">
       <section class="task-header">
-        <div class="task-badge"><el-icon><Operation /></el-icon>核心实训 · 产品开发基础</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <span class="task-badge"><el-icon><Operation /></el-icon>核心实训 · 产品开发基础</span>
+          <h1 class="task-title">{{ taskTitle }}</h1>
+          <p class="task-brief">
+            <span class="task-brief-text">{{ taskBackground }}</span>
+            <button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
+              {{ briefOpen ? "收起" : "展开目标与要求" }}
+            </button>
+            <span v-if="briefOpen" class="task-brief-more">
+              <b>实训目标</b>
+              <ul>
+                <li v-for="goal in taskGoals" :key="goal">{{ goal }}</li>
+              </ul>
+              <b>实训要求</b>
+              <p>{{ taskRequirement }}</p>
+            </span>
+          </p>
+        </div>
       </section>
 
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
       <section class="process-workbench">
         <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
@@ -17,19 +31,20 @@
         </div>
 
         <nav v-if="trainingSteps.length" class="step-indicator" aria-label="产品开发主要流程步骤">
-          <template v-for="(step, index) in trainingSteps" :key="`${step}-${index}`">
-            <button
-              type="button"
-              :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]"
-              :aria-label="`切换至第 ${index + 1} 步：${step}`"
-              :aria-current="currentStep === index + 1 ? 'step' : undefined"
-              @click="currentStep = index + 1"
-            >
-              <span class="step-marker" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy"><strong class="step-name" :title="step">{{ step }}</strong><span class="step-action">{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</span></span>
-            </button>
-            <span v-if="index < trainingSteps.length - 1" class="step-connector" aria-hidden="true" />
-          </template>
+          <button
+            v-for="(step, index) in trainingSteps"
+            :key="`${step}-${index}`"
+            type="button"
+            :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]"
+            :aria-label="`切换至第 ${index + 1} 步：${step}`"
+            :aria-current="currentStep === index + 1 ? 'step' : undefined"
+            :title="step"
+            @click="currentStep = index + 1"
+          >
+            <span class="step-bar" aria-hidden="true"></span>
+            <span class="step-no" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
+            <span class="step-name">{{ step }}</span>
+          </button>
         </nav>
 
         <section class="process-step-card">
@@ -111,7 +126,7 @@
                 <span>支持 PNG、JPG、JPEG、WEBP、GIF</span>
               </label>
               <figure v-if="ganttImage.url" class="gantt-preview">
-                <img :src="ganttImage.url" alt="已上传的甘特图" @click="previewGanttImage" />
+                <img :src="resolveGanttImageUrl(ganttImage.url)" alt="已上传的甘特图" @click="previewGanttImage" />
                 <figcaption>{{ ganttImage.name }}</figcaption>
               </figure>
             </section>
@@ -170,10 +185,10 @@ import * as XLSX from "xlsx";
 import { checkProductDevelopmentProcessStepOne, checkProductDevelopmentProcessStepTwo, checkProductDevelopmentProcessStepThree, checkProductDevelopmentProcessStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
+import { isExternal } from "@/utils/validate";
 import useUserStore from "@/store/modules/user";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 
 const { proxy } = getCurrentInstance();
 const userStore = useUserStore();
@@ -201,6 +216,7 @@ const defaultTask = {
 const taskConfig = ref(null);
 const processRows = ref(createProcessRows());
 const currentStep = ref(1);
+const briefOpen = ref(false);
 const checking = ref(false);
 const draftReady = ref(false);
 const checkResult = ref(null);
@@ -531,8 +547,24 @@ function resetStepFour() {
   proxy?.$modal?.msgSuccess("已清空第 4 步填写内容");
 }
 
+function resolveGanttImageUrl(url) {
+  const source = String(url || "").trim();
+  if (!source || source.startsWith("data:") || source.startsWith("blob:")) return source;
+  if (!isExternal(source)) return source.startsWith("/") ? source : `/${source}`;
+
+  try {
+    const parsed = new URL(source);
+    if (["localhost", "127.0.0.1", "::1"].includes(parsed.hostname)) {
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    }
+  } catch {
+    return source;
+  }
+  return source;
+}
+
 function previewGanttImage() {
-  window.open(ganttImage.value.url, "_blank", "noopener,noreferrer");
+  window.open(resolveGanttImageUrl(ganttImage.value.url), "_blank", "noopener,noreferrer");
 }
 
 function downloadPracticeGuide() {
@@ -587,54 +619,1268 @@ function exportOutcome() {
 </script>
 
 <style lang="scss" scoped>
+/*
+ * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次。
+ * 覆盖全局主色/文字/边框令牌，使所有 var(--student-*) 规则自动重着色。
+ */
 .product-process {
-  position: relative;
-  z-index: 2;
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 点缀色：暖橙（小面积使用） */
+  --student-terracotta: #e8953c;
+  /* 语义色 */
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  /* 结构色：中性灰白系 */
+  --student-panel-border: #e5e7eb;
+  --student-card-bg: #ffffff;
+  --student-panel-bg: #fafbfc;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  /* 紧凑字号梯度：整体下调一档（11→17px） */
+  --student-fs-display: 17px;   /* 任务主标题 */
+  --student-fs-h1: 15px;         /* 步骤大标题 */
+  --student-fs-h2: 14px;         /* 面板/行标题 */
+  --student-fs-h3: 13px;         /* 区块小标题 */
+  --student-fs-body: 13px;       /* 正文 */
+  --student-fs-body-sm: 12px;    /* 次要文字/表格 */
+  --student-fs-caption: 11px;    /* 标签/徽章 */
+  --student-fs-button: 13px;     /* 按钮文字 */
+  --student-fs-button-lg: 13px;  /* 主按钮文字 */
+  --student-fs-data: 14px;       /* 数字/成绩 */
+  min-width: 0;
+  color: var(--student-text);
+}
+
+/* 主列布局：容器栅格与内边距由全局 .student-training-shell 统一提供 */
+.process-core {
   display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  width: 100%;
-  min-height: calc(100vh - 106px);
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
+  gap: 10px;
+  align-content: start;
+}
+
+/* 任务头：徽章 + 标题 + 可折叠简介 */
+.task-header {
+  margin: 0;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.task-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.task-title {
+  margin: 0;
+  color: var(--student-text);
+  font-size: 17px;
+  line-height: 1.35;
+  font-weight: 700;
+}
+
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
   background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-.process-core {
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+
+  b {
+    color: var(--student-text);
+  }
+
+  ul {
+    display: grid;
+    gap: 4px;
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+/* 工作台：白底卡片 */
+.process-workbench {
+  margin: 0;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+
+  &::before {
+    display: none !important;
+    content: none !important;
+  }
+}
+
+/* 仅含操作按钮的头部：右对齐，无分隔线 */
+.workbench-head--actions-only {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.workbench-actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* 顶部"导出实训成果"按钮：白底灰描边次按钮 */
+.outline-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+
+  &:hover {
+    border-color: #1f2937;
+    color: #1f2937;
+    background: #f9fafb;
+    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+  }
+}
+
+/* 案例资料按钮（TrainingMaterialButton 子组件）的换肤见非 scoped 块 */
+
+/* 步骤导航（极简文字下划线）的换肤见非 scoped 块 */
+
+.step-name {
+  display: block;
+  overflow: hidden;
   min-width: 0;
-  padding: 20px;
-  border: 1px solid #cfe2f5;
-  border-radius: 24px;
-  background: #f0f6fd;
-  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.06);
-  backdrop-filter: blur(8px);
-}
-
-.task-header { margin-bottom: 16px; }
-.task-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 14px; border: 1px solid #cfe2f5; border-radius: 30px; color: #1565c0; background: #e3f2fd; font-size: 12px; font-weight: 700; }
-.task-title { margin: 0; color: transparent; background: linear-gradient(135deg, #1565c0, #1e88e5); -webkit-background-clip: text; background-clip: text; font-size: 30px; font-weight: 900; line-height: 1.3; }
-.process-workbench { min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid #cfe2f5; border-radius: 20px; background: #f0f6fd; }
-.process-workbench::before { display: none !important; content: none !important; }
-.workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #cfe2f5; }
-.workbench-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
-.outline-action, .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; cursor: pointer; }
-.outline-action, .workbench-actions :deep(.material-download) { min-height: 40px; padding: 0 18px; border: 1px solid #90caf9; border-radius: 999px; color: #1e3a5f; background: #e3f2fd; box-shadow: none; font-size: 14px; font-weight: 800; line-height: 1; }
-.outline-action:hover, .workbench-actions :deep(.material-download:hover) { border-color: #42a5f5; color: #1e3a5f; background: #bbdefb; transform: translateY(-1px); }
-.workbench-head--actions-only { justify-content: flex-end; margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; }
-
-.step-indicator { position: relative; display: flex; align-items: center; gap: 0; width: calc(100% + 24px); margin: 0 -12px 32px; padding: 18px 22px; overflow-x: auto; border: 1px solid #cfe2f5; border-radius: 18px; background: linear-gradient(90deg, #e3f2fd, #f0f6fd), rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.06); scrollbar-width: thin; }
-.step-tab { display: flex; flex: 1 0 145px; align-items: center; min-width: 0; min-height: 66px; padding: 8px 10px; border: 1px solid #cfe2f5; border-radius: 8px; color: #5a7a9a; background: #f0f6fd; box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.04); font-family: inherit; cursor: pointer; text-align: left; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
-.step-tab:hover { border-color: #42a5f5; color: #1e3a5f; background: #e3f2fd; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(30, 136, 229, 0.1); transform: translateY(-2px); }.step-tab:hover .step-action { color: #1e88e5; }.step-tab:focus-visible { outline: 2px solid #1e88e5; outline-offset: 4px; }
-.step-tab.active { border-color: #42a5f5; color: #ffffff; background: linear-gradient(115deg, #1e88e5, #1565c0); box-shadow: 0 0 18px rgba(30, 136, 229, 0.15), inset 0 1px 0 rgba(30, 136, 229, 0.1); }.step-tab.active .step-marker { border-color: #1e88e5; color: #ffffff; background: linear-gradient(135deg, #1e88e5, #1565c0); box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.12), 0 0 18px rgba(30, 136, 229, 0.3); }.step-tab.complete { color: #2c4a6a; }.step-tab.complete .step-marker { border-color: #26a69a; color: #ffffff; background: #26a69a; box-shadow: 0 0 12px rgba(38, 166, 154, 0.2); }
-.step-marker { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #90caf9; border-radius: 50%; color: #5a7a9a; background: #f0f6fd; font-size: 12px; font-weight: 900; letter-spacing: .04em; }.step-copy { display: grid; min-width: 0; gap: 4px; margin-left: 10px; }.step-name { display: -webkit-box; overflow: hidden; color: inherit; font-size: 14px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.step-action { color: #5a7a9a; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; }.step-connector { position: relative; flex: 0 1 40px; min-width: 18px; height: 2px; margin: 0 8px; background: #cfe2f5; }.step-connector::after { position: absolute; top: 50%; right: -1px; width: 6px; height: 6px; border-top: 1px solid #5a7a9a; border-right: 1px solid #5a7a9a; content: ''; transform: translateY(-50%) rotate(45deg); }.step-tab.complete + .step-connector { background: linear-gradient(90deg, #26a69a, #1e88e5); box-shadow: 0 0 9px rgba(30, 136, 229, 0.2); }.step-tab.complete + .step-connector::after { border-color: #26a69a; }
-
-.process-step-card { margin: 0; padding: 16px; border: 1px solid #cfe2f5; border-radius: 20px; background: #f0f6fd; }.step-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }.step-title-row h3 { margin: 4px 0 0; color: #1e3a5f; font-size: 22px; font-weight: 900; line-height: 1.3; }.step-title-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }.schedule-export-action { min-height: 34px; padding: 0 13px; font-size: 13px; }.section-eyebrow { margin: 0; color: #1565c0; font-size: 12px; font-weight: 800; line-height: 1.4; }.step-chip { padding: 6px 12px; border: 1px solid #90caf9; border-radius: 999px; color: #1e88e5; background: #e3f2fd; font-size: 13px; font-weight: 800; }
-.process-intro { margin: 0 0 18px; color: #2c4a6a; font-size: 15px; line-height: 1.8; }.training-table-wrap { overflow-x: auto; border: 1px solid #cfe2f5; border-radius: 22px; background: #f0f6fd; }.process-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }.process-table th { padding: 12px; border-right: 1px solid #cfe2f5; color: #1e3a5f; background: #bbdefb; font-size: 14px; font-weight: 900; text-align: center; }.process-table td { padding: 12px; border-top: 1px solid #cfe2f5; border-right: 1px solid #cfe2f5; color: #2c4a6a; background: #f0f6fd; vertical-align: middle; }.process-table th:last-child, .process-table td:last-child { border-right: 0; }.stage-cell { width: 17%; color: #1e3a5f; font-size: 14px; font-weight: 900; text-align: center; }.task-no-cell { width: 12%; color: #1e3a5f; font-size: 14px; font-weight: 800; text-align: center; }.task-cell { color: #2c4a6a; font-size: 14px; line-height: 1.7; text-align: center; }.select-cell { width: 23%; }.select-cell select, .schedule-table input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #90caf9; border-radius: 10px; outline: none; color: #1e3a5f; background: #ffffff; font: inherit; }.select-cell select:focus, .schedule-table input:focus { border-color: #42a5f5; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12); }.classification-feedback { margin: 6px 0 0; color: #e53935; font-size: 12px; line-height: 1.5; }.is-correct { background: rgba(46, 125, 50, 0.1); }.is-incorrect { background: rgba(211, 47, 47, 0.1); }.classification-summary { margin: 16px 0 0; color: #e65100; }.classification-summary.is-success { color: #2e7d32; }
-.task-actions { display: flex; justify-content: center; gap: 52px; margin-top: 36px; }.btn-nav { min-width: 172px; min-height: 64px; padding: 0 28px; border: 1px solid #1e88e5; border-radius: 6px; color: #2c4a6a; background: #e3f2fd; box-shadow: none; font-size: 24px; font-weight: 900; line-height: 1; }.btn-submit { border-color: #1e88e5; background: #e3f2fd; }.task-actions .btn-nav .el-icon { display: none; }.btn-nav:hover:not(:disabled) { border-color: #1565c0; color: #1e3a5f; background: #bbdefb; }.btn-nav:disabled { cursor: not-allowed; opacity: .6; }.step-placeholder { display: grid; place-items: center; min-height: 280px; padding: 28px; border: 1px dashed #cfe2f5; border-radius: 18px; color: #5a7a9a; background: #f0f6fd; text-align: center; }.step-placeholder p { margin: 0 0 8px; color: #1e3a5f; font-size: 20px; font-weight: 800; }
-.step-warning { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #ffb74d; border-radius: 10px; color: #e65100; background: rgba(230, 81, 0, 0.1); }.schedule-table { min-width: 1020px; }.schedule-table .stage-cell { width: 7%; }.schedule-table .task-no-cell { width: 7%; }.schedule-table .task-cell { width: 18%; }.classification-cell { width: 12%; color: #1e3a5f; font-weight: 800; text-align: center; }.schedule-table th:nth-child(5), .schedule-table td:nth-child(5), .schedule-table th:nth-child(6), .schedule-table td:nth-child(6) { width: 18%; }.schedule-table .dependency-input { min-width: 0; }.schedule-table .dependency-input::placeholder { color: #5a7a9a; opacity: 1; }.schedule-table th:nth-child(7), .schedule-table td:nth-child(7) { width: 20%; }.schedule-table input:disabled { cursor: not-allowed; opacity: .6; }
-.gantt-upload-panel { display: grid; justify-items: center; gap: 22px; min-height: 320px; padding: 32px 16px; border: 1px dashed #42a5f5; border-radius: 18px; background: radial-gradient(circle at center, rgba(30, 136, 229, 0.1), transparent 55%); }.gantt-upload-trigger { display: grid; place-items: center; align-content: center; gap: 9px; width: 280px; height: 138px; border-radius: 12px; color: #ffffff; background: linear-gradient(135deg, #1e88e5, #1565c0); cursor: pointer; box-shadow: 0 14px 30px rgba(30, 136, 229, 0.15); }.gantt-upload-trigger input { position: absolute; width: 1px; height: 1px; opacity: 0; }.gantt-upload-trigger .el-icon { font-size: 26px; }.gantt-upload-trigger span { color: #ffffff; font-size: 12px; }.gantt-upload-trigger.disabled { cursor: not-allowed; opacity: .55; }.gantt-preview { width: min(100%, 760px); margin: 0; text-align: center; }.gantt-preview img { display: block; width: 100%; max-height: 410px; object-fit: contain; border: 1px solid #90caf9; border-radius: 12px; background: #fff; cursor: zoom-in; }.gantt-preview figcaption { margin-top: 8px; color: #5a7a9a; font-size: 13px; }.gantt-guide { margin-top: 26px; padding: 18px 22px; border-left: 3px solid #1e88e5; border-radius: 0 14px 14px 0; color: #2c4a6a; background: #e3f2fd; }.gantt-guide h4 { margin: 0 0 14px; color: #1e3a5f; }.gantt-guide ol { margin: 0; padding-left: 20px; }.gantt-guide li { margin: 11px 0; line-height: 1.7; }.gantt-guide button { margin-left: 12px; border: 0; border-radius: 6px; padding: 5px 10px; color: #ffffff; background: #1e88e5; cursor: pointer; }
-.process-reflection { display: grid; gap: 28px; }.reflection-field { display: grid; gap: 12px; color: #2c4a6a; font-size: 16px; line-height: 1.7; }.reflection-field span { color: #1e3a5f; font-weight: 600; }.reflection-field textarea { min-height: 190px; resize: vertical; padding: 14px; border: 1px solid #90caf9; border-radius: 14px; color: #1e3a5f; background: #ffffff; font: inherit; line-height: 1.7; }.reflection-field textarea:focus { outline: 0; border-color: #42a5f5; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12); }.reflection-field textarea:disabled { cursor: not-allowed; opacity: .55; }.reflection-question { color: #1e3a5f; font-size: 16px; font-weight: 600; line-height: 1.8; }.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }.scenario-grid .reflection-field textarea { min-height: 180px; }.process-reflection.disabled { opacity: .72; }
-
-@media (max-width: 1100px) { .product-process { grid-template-columns: 1fr; } }
-@media (max-width: 900px) { .product-process { padding: 14px 14px 18px; }.process-core { padding: 18px; border-radius: 24px; }.workbench-head, .workbench-actions, .task-actions, .step-indicator, .step-title-row { flex-direction: column; align-items: stretch; }.workbench-actions :deep(.material-download), .outline-action { width: 100%; }.step-indicator { width: 100%; margin: 0 0 32px; padding: 16px; overflow-x: visible; border-radius: 20px; }.step-tab { flex: 0 0 auto; width: 100%; min-width: 0; }.step-connector { flex: 0 0 20px; align-self: flex-start; width: 2px; min-width: 0; height: 20px; margin: 4px 0 4px 18px; }.step-connector::after { top: auto; right: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }.step-chip { display: none; }.scenario-grid { grid-template-columns: 1fr; gap: 18px; }.task-actions { gap: 14px; }.btn-nav { width: 100%; } }
+  color: inherit;
+  text-overflow: ellipsis;
+}
+
+/* 步骤卡片：透明嵌入工作台 */
+.process-step-card {
+  margin: 0;
+  background: transparent;
+}
+
+.step-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.step-title-row h3 {
+  margin: 2px 0 0;
+  color: var(--student-text);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.step-title-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* 标题行内联导出：次按钮的紧凑小号（继承 .outline-action 描边与圆角语言） */
+.schedule-export-action {
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Step 编号小标签：灰色宽字距引导文字 */
+.section-eyebrow {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.3;
+  letter-spacing: 0.12em;
+}
+
+/* 步骤小徽章：中性灰白 */
+.step-chip {
+  padding: 3px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 999px;
+  color: #6b7280;
+  background: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+/* 步骤说明 */
+.process-intro {
+  margin: 0 0 12px;
+  color: #4b5563;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* 表格：纯白 + 中性边框 */
+.training-table-wrap {
+  overflow-x: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.process-table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.process-table th {
+  padding: 9px 10px;
+  border-bottom: 1px solid #e5e7eb;
+  color: #374151;
+  background: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.process-table td {
+  padding: 9px 10px;
+  border-top: 1px solid #f0f1f3;
+  color: #374151;
+  background: #ffffff;
+  vertical-align: middle;
+}
+
+.stage-cell,
+.task-no-cell {
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.task-cell {
+  color: #374151;
+  font-size: 12px;
+  line-height: 1.55;
+  text-align: center;
+}
+
+/* 下拉与日期输入：中性描边，聚焦墨黑 */
+.select-cell select,
+.schedule-table input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 34px;
+  padding: 5px 9px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  color: #1f2937;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.select-cell select:focus,
+.schedule-table input:focus {
+  border-color: #1f2937;
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+}
+
+/* 判题反馈：仅文字着色，不铺行底色 */
+.classification-feedback {
+  margin: 5px 0 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+tr.is-correct .classification-feedback {
+  color: var(--student-success);
+}
+
+tr.is-incorrect .classification-feedback {
+  color: var(--student-danger);
+}
+
+/* 判题汇总横幅 */
+.classification-summary {
+  margin: 12px 0 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: var(--student-danger);
+  background: rgba(217, 85, 76, 0.08);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.classification-summary.is-success {
+  color: var(--student-success);
+  background: rgba(74, 157, 110, 0.08);
+}
+/* 步骤操作按钮：居中紧凑排列（与标准页 .step-navigation 同规格） */
+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 20px;
+}
+
+/*
+ * 次按钮（清空填写/本步）：白底 + 墨黑半透明描边 + 墨黑字；
+ * 与标准样例一致：40px 高、10px 圆角、700 字重、hover 轻微浮起。
+ */
+.btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: none;
+  cursor: pointer;
+  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+}
+
+.btn-nav:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: var(--student-accent);
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+}
+
+.btn-nav:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* 主按钮（保存进入下一步 / 提交任务）：墨黑实底白字 + 中性柔影 */
+.btn-nav.btn-submit {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.btn-nav.btn-submit:hover:not(:disabled) {
+  border-color: var(--student-accent-deep);
+  color: #ffffff;
+  background: var(--student-accent-deep);
+  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.32);
+}
+
+.btn-nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
+}
+
+/* 空步骤占位 */
+.step-placeholder {
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+  padding: 24px;
+  border: 1px dashed #d1d5db;
+  border-radius: 12px;
+  color: #9ca3af;
+  background: #fafbfc;
+  text-align: center;
+}
+
+.step-placeholder p {
+  margin: 0 0 6px;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 600;
+}
+/* 步骤门控提示：中性灰底，安静提示 */
+.step-warning {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid #e5e7eb;
+  border-left: 3px solid #9ca3af;
+  border-radius: 8px;
+  color: #6b7280;
+  background: #f9fafb;
+  font-size: 12px;
+}
+
+/* 排期表列宽 */
+.schedule-table { min-width: 1020px; }
+.schedule-table .stage-cell { width: 7%; }
+.schedule-table .task-no-cell { width: 7%; }
+.schedule-table .task-cell { width: 18%; }
+
+.classification-cell {
+  width: 12%;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.schedule-table th:nth-child(5),
+.schedule-table td:nth-child(5),
+.schedule-table th:nth-child(6),
+.schedule-table td:nth-child(6) { width: 18%; }
+.schedule-table .dependency-input { min-width: 0; }
+.schedule-table .dependency-input::placeholder {
+  color: #9ca3af;
+  opacity: 1;
+}
+.schedule-table th:nth-child(7),
+.schedule-table td:nth-child(7) { width: 20%; }
+.schedule-table input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* 甘特图上传区：白底 + 中性虚线，无光晕 */
+.gantt-upload-panel {
+  display: grid;
+  justify-items: center;
+  gap: 16px;
+  min-height: 260px;
+  padding: 24px 16px;
+  border: 1px dashed #d1d5db;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+/* 上传触发器：墨黑实底主操作 */
+.gantt-upload-trigger {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  width: 240px;
+  height: 110px;
+  border-radius: 10px;
+  color: #ffffff;
+  background: #1f2937;
+  cursor: pointer;
+  transition: background 0.18s ease;
+}
+
+.gantt-upload-trigger:hover:not(.disabled) {
+  background: #111827;
+}
+
+.gantt-upload-trigger input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.gantt-upload-trigger .el-icon {
+  font-size: 22px;
+  color: #ffffff;
+}
+
+.gantt-upload-trigger span {
+  color: #ffffff;
+  font-size: 12px;
+}
+
+.gantt-upload-trigger.disabled {
+  cursor: not-allowed;
+  background: #9ca3af;
+}
+
+.gantt-preview {
+  width: min(100%, 720px);
+  margin: 0;
+  text-align: center;
+}
+
+.gantt-preview img {
+  display: block;
+  width: 100%;
+  max-height: 380px;
+  object-fit: contain;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  cursor: zoom-in;
+}
+
+.gantt-preview figcaption {
+  margin-top: 6px;
+  color: #9ca3af;
+  font-size: 11px;
+}
+
+/* 练习指引：白底中性左色条 */
+.gantt-guide {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 16px;
+  padding: 14px 18px;
+  border: 1px solid #e5e7eb;
+  border-left: 3px solid #1f2937;
+  border-radius: 8px;
+  color: #4b5563;
+  background: #ffffff;
+}
+
+.gantt-guide h4 {
+  margin: 0 0 10px;
+  color: #1f2937;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.gantt-guide ol {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.gantt-guide li {
+  margin: 6px 0;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.gantt-guide button {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 2px 10px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 6px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+
+.gantt-guide button:hover {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+/* 复盘区 */
+.process-reflection {
+  display: grid;
+  gap: 18px;
+}
+
+.reflection-field {
+  display: grid;
+  gap: 8px;
+  color: #4b5563;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.reflection-field span {
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.reflection-field textarea {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 150px;
+  resize: vertical;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #1f2937;
+  background: #ffffff;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.reflection-field textarea:focus {
+  outline: 0;
+  border-color: #1f2937;
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+}
+
+.reflection-field textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: #f9fafb;
+}
+
+.reflection-question {
+  color: #1f2937;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+/* 两个场景并排 */
+.scenario-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.scenario-grid .reflection-field textarea {
+  min-height: 150px;
+}
+
+.process-reflection.disabled {
+  opacity: 0.7;
+}
+
+@media (max-width: 1100px) {
+  .product-process {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .product-process {
+    padding: 12px;
+  }
+
+  .process-core {
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .step-title-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .step-indicator {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .step-tab {
+    flex: 0 0 auto;
+  }
+
+  .step-chip {
+    display: none;
+  }
+
+  .scenario-grid {
+    grid-template-columns: 1fr;
+  }
+
+  /* 按钮区窄屏全宽的强制覆盖见非 scoped 块 */
+}
+</style>
+
+<style lang="scss">
+/* 页面画布：纯白，不使用任何底色渐变（scoped 无法触及祖先 app-main） */
+#app .studentLayout section.app-main:has(.product-process) {
+  background: #ffffff !important;
+  background-image: none !important;
+}
+
+/* 全局 shell 行高 1.8，本页收紧为 1.55 */
+#app .studentLayout .app-main:has(.product-process) .product-process {
+  line-height: 1.55 !important;
+}
+
+/* ===== AI 侧栏中性灰白换肤（关键项 !important 稳定覆盖组件 scoped 规则） ===== */
+.product-process .training-ai-sidebar {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 50% 0%, rgba(31, 41, 55, 0.09), transparent 42%) !important;
+  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.1) !important;
+}
+
+.product-process .training-ai-sidebar.is-collapsed {
+  border-color: #e5e7eb !important;
+  background: linear-gradient(180deg, #f8f9fa, #ffffff) !important;
+  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.09) !important;
+}
+
+.product-process .ai-sidebar-toggle {
+  border-color: rgba(31, 41, 55, 0.3) !important;
+  color: #1f2937 !important;
+  background: #f8f9fa !important;
+  box-shadow: none !important;
+}
+
+.product-process .ai-sidebar-toggle:hover,
+.product-process .ai-sidebar-toggle:focus-visible {
+  border-color: #1f2937 !important;
+  background: #f3f4f6 !important;
+}
+
+.product-process .ai-panel {
+  border-color: #e5e7eb !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    repeating-linear-gradient(90deg, rgba(31, 41, 55, 0.035) 0 1px, transparent 1px 26px) !important;
+  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.07) !important;
+}
+
+.product-process .ai-panel::before {
+  background: linear-gradient(90deg, #1f2937, transparent) !important;
+}
+
+.product-process .ai-panel h3,
+.product-process .ai-panel h3 .el-icon {
+  color: #1f2937 !important;
+}
+
+.product-process .ai-output {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(circle at 18% 12%, rgba(31, 41, 55, 0.07), transparent 32%) !important;
+  box-shadow: inset 0 0 24px rgba(31, 41, 55, 0.05) !important;
+}
+
+.product-process .output-glow {
+  background:
+    linear-gradient(90deg, rgba(31, 41, 55, 0.06), transparent 22%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 26%) !important;
+}
+
+/* 对话气泡 */
+.product-process .study-message {
+  border-color: rgba(31, 41, 55, 0.18) !important;
+}
+
+.product-process .study-message strong {
+  color: #1f2937 !important;
+}
+
+.product-process .study-message span {
+  color: #374151 !important;
+}
+
+.product-process .study-message--student {
+  background: #e5e7eb !important;
+}
+
+.product-process .study-message--assistant {
+  background: #f3f4f6 !important;
+}
+
+.product-process .ai-instruction,
+.product-process .assessment-hint {
+  color: #6b7280 !important;
+}
+
+/* 参考提示块 */
+.product-process .reference-block {
+  border-top-color: rgba(31, 41, 55, 0.18) !important;
+  color: #374151 !important;
+}
+
+.product-process .reference-block strong {
+  color: #1f2937 !important;
+}
+
+/* 提问输入框 */
+.product-process .ai-input-shell textarea {
+  border-color: #e5e7eb !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
+}
+
+.product-process .ai-input-shell textarea::placeholder {
+  color: #9ca3af !important;
+}
+
+.product-process .ai-input-shell textarea:focus {
+  border-color: #1f2937 !important;
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12) !important;
+}
+
+/* 发送按钮：扁平墨黑 */
+.product-process .send-btn {
+  border-color: #1f2937 !important;
+  background: #1f2937 !important;
+  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.3) !important;
+}
+
+.product-process .send-btn:hover {
+  background: #111827 !important;
+}
+
+/* 成绩徽章 */
+.product-process .score-badge {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background: linear-gradient(90deg, #f3f4f6, #f8f9fa) !important;
+  box-shadow: none !important;
+}
+
+.product-process .score-badge span {
+  color: #374151 !important;
+}
+
+.product-process .score-badge em {
+  color: #6b7280 !important;
+}
+
+.product-process .score-badge strong {
+  color: #1f2937 !important;
+  text-shadow: none !important;
+}
+
+/* AI 助评结果 */
+.product-process .assessment-summary {
+  color: #1f2937 !important;
+}
+
+.product-process .assessment-criterion {
+  border-color: #e5e7eb !important;
+  background: #f8f9fa !important;
+}
+
+.product-process .assessment-criterion__heading,
+.product-process .assessment-criterion__heading span {
+  color: #1f2937 !important;
+}
+
+.product-process .assessment-criterion__heading small,
+.product-process .assessment-criterion p {
+  color: #6b7280 !important;
+}
+
+.product-process .assessment-actions {
+  border-left-color: #1f2937 !important;
+  color: #374151 !important;
+  background: rgba(31, 41, 55, 0.07) !important;
+}
+
+.product-process .assessment-actions strong {
+  color: #1f2937 !important;
+}
+
+/* AI 智能评分按钮：Element Plus 主色按钮局部改墨黑 */
+.product-process .assessment-button.el-button {
+  --el-color-primary: #1f2937;
+  --el-color-primary-light-3: #6b7280;
+  --el-color-primary-light-5: #9ca3af;
+  --el-color-primary-light-7: #d1d5db;
+  --el-color-primary-light-9: #f3f4f6;
+  --el-color-primary-dark-2: #111827;
+  border-radius: 10px;
+}
+
+/* ============================================================
+ * 步骤导航重设计：杂志章节风（大号编号 + 短粗引导线）
+ * id 锚点 + !important 覆盖全局浅蓝胶囊与 1100px 纵向规则。
+ * ============================================================ */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: flex-start !important;
+  justify-content: center !important;
+  gap: 28px !important;
+  width: 100% !important;
+  margin: 2px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab {
+  flex: 1 1 0 !important;
+  max-width: 160px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  gap: 8px !important;
+  width: auto !important;
+  min-width: 0 !important;
+  height: auto !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #9ca3af !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1.4 !important;
+  letter-spacing: 0 !important;
+  white-space: normal !important;
+  text-align: left !important;
+  transition: color 0.16s ease !important;
+}
+
+/* 顶部短粗引导线 */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-bar {
+  width: 24px !important;
+  height: 3px !important;
+  background: transparent !important;
+  transition: background 0.16s ease !important;
+}
+
+/* 大号编号：视觉主角 */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-no {
+  position: relative;
+  color: #d1d5db !important;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace !important;
+  font-size: 32px !important;
+  font-weight: 800 !important;
+  line-height: 1 !important;
+  letter-spacing: -1px !important;
+  transition: color 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-name {
+  color: inherit !important;
+}
+
+/* 未到达项 hover：编号与文字转深灰 */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab:hover:not(.active):not(.complete) {
+  color: #6b7280 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab:hover:not(.active):not(.complete) .step-no {
+  color: #6b7280 !important;
+}
+
+/* 已完成步骤：深灰编号 + 右上角绿色小圆点 */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.complete:not(.active) {
+  color: #6b7280 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.complete:not(.active) .step-no {
+  color: #6b7280 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.complete .step-no::after {
+  content: "";
+  position: absolute;
+  top: -3px;
+  right: -8px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #4a9d6e;
+}
+
+/* 当前步骤：引导线墨黑 + 墨黑编号 + 加粗黑字 */
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.active {
+  color: #1f2937 !important;
+  font-weight: 700 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.active .step-bar {
+  background: #1f2937 !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab.active .step-no {
+  color: #1f2937 !important;
+}
+
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.product-process) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 20px !important;
+    overflow-x: auto !important;
+  }
+
+  #app .studentLayout section.app-main:has(.product-process) .step-indicator .step-tab {
+    flex: 0 0 112px !important;
+    max-width: none !important;
+  }
+}
+
+/* ============================================================
+ * 按钮风格强制同步：
+ * 全局 student-training.scss 用 !important 把 .workbench-actions /
+ * .task-actions 按钮锁成浅蓝大胶囊，scoped 规则无法取胜。
+ * 这里用 id 锚点（特异性含 #app）+ !important 稳定覆盖。
+ * ============================================================ */
+
+/* --- 顶部工具栏：36px 白底灰描边小按钮（位置 B） --- */
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  max-height: none !important;
+  padding: 0 14px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+  color: #374151 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button .el-icon {
+  color: inherit !important;
+  font-size: 14px !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button:hover,
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button:focus {
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1) !important;
+}
+
+/* 无案例资料时的 plain 态 */
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button.is-plain {
+  border-color: #e5e7eb !important;
+  color: #9ca3af !important;
+  background: #ffffff !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button.is-plain:hover {
+  border-color: #d1d5db !important;
+  color: #6b7280 !important;
+  background: #f9fafb !important;
+  box-shadow: none !important;
+}
+
+/* 顶部"导出实训成果"原生按钮：全局 L592 锁为 34px 浅蓝胶囊 */
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions > button.outline-action {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  max-height: none !important;
+  padding: 0 14px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+  color: #374151 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .workbench-actions > button.outline-action:hover {
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1) !important;
+  transform: none !important;
+}
+
+/* Step 02 标题行"导出列表"：32px 紧凑小号；全局 L532 button.outline-action 锁 40px 胶囊 */
+#app .studentLayout section.app-main:has(.product-process) .step-title-actions button.outline-action {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 5px !important;
+  width: auto !important;
+  height: 32px !important;
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 8px !important;
+  color: #374151 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-title-actions button.outline-action .el-icon {
+  color: inherit !important;
+  font-size: 12px !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .step-title-actions button.outline-action:hover {
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  transform: none !important;
+}
+
+/* --- 底部步骤按钮：40px 标准按钮（位置 A） --- */
+#app .studentLayout section.app-main:has(.product-process) .task-actions {
+  gap: 14px !important;
+  margin-top: 20px !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  min-width: 0 !important;
+  width: auto !important;
+  height: 40px !important;
+  min-height: 40px !important;
+  padding: 0 18px !important;
+  border: 1px solid rgba(31, 41, 55, 0.4) !important;
+  border-radius: 10px !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button .el-icon {
+  display: inline-flex !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button:hover:not(:disabled) {
+  transform: translateY(-1px) !important;
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f3f4f6 !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
+}
+
+/* 主按钮：墨黑实底白字 + 中性柔影 */
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button.btn-submit {
+  border-color: #1f2937 !important;
+  color: #ffffff !important;
+  background: #1f2937 !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button.btn-submit:hover:not(:disabled) {
+  border-color: #111827 !important;
+  color: #ffffff !important;
+  background: #111827 !important;
+  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.32) !important;
+}
+
+#app .studentLayout section.app-main:has(.product-process) .task-actions > button:disabled {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* 窄屏：按钮纵向全宽（全局容器 min-width/布局均为 !important，须在此覆盖） */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.product-process) .workbench-head,
+  #app .studentLayout section.app-main:has(.product-process) .workbench-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+
+  #app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-actions {
+    display: grid !important;
+    width: 100% !important;
+  }
+
+  #app .studentLayout section.app-main:has(.product-process) .workbench-actions .material-button.el-button,
+  #app .studentLayout section.app-main:has(.product-process) .workbench-actions > button.outline-action,
+  #app .studentLayout section.app-main:has(.product-process) .step-title-actions button.outline-action,
+  #app .studentLayout section.app-main:has(.product-process) .task-actions > button {
+    width: 100% !important;
+  }
+
+  #app .studentLayout section.app-main:has(.product-process) .task-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
+}
 </style>
diff --git a/src/views/student/index.vue b/src/views/student/index.vue
index 78bce85..f771525 100644
--- a/src/views/student/index.vue
+++ b/src/views/student/index.vue
@@ -97,7 +97,7 @@ const projectStudyTimes = ref([]);
 const loading = ref(true);
 const loadError = ref("");
 
-const MODULE_COLORS = ["#6958e7", "#3698ee", "#ffb83e", "#ff6f4a", "#45b982", "#39b8ce"];
+const MODULE_COLORS = ["#1f2937", "#4b5563", "#6b7280", "#9ca3af", "#c4c9d1", "#374151"];
 
 let scoreChart;
 let studyTimeChart;
@@ -180,7 +180,7 @@ const renderProgressChart = () => {
         type: "bar",
         stack: "tasks",
         barMaxWidth: 18,
-        itemStyle: { color: "#3e9cf4", borderRadius: [9, 0, 0, 9] },
+        itemStyle: { color: "#1f2937", borderRadius: [9, 0, 0, 9] },
         data: modules.map((module) => Number(module.completedTaskCount) || 0)
       },
       {
@@ -188,7 +188,7 @@ const renderProgressChart = () => {
         type: "bar",
         stack: "tasks",
         barMaxWidth: 18,
-        itemStyle: { color: "#e8eef8", borderRadius: [0, 9, 9, 0] },
+        itemStyle: { color: "#e5e7eb", borderRadius: [0, 9, 9, 0] },
         data: modules.map((module) => Math.max(0, (Number(module.totalTaskCount) || 0) - (Number(module.completedTaskCount) || 0)))
       }
     ]
@@ -217,7 +217,7 @@ const renderStudyTimeChart = () => {
       name: "学习时长",
       type: "bar",
       barMaxWidth: 18,
-      itemStyle: { color: "#6958e7", borderRadius: [0, 9, 9, 0] },
+      itemStyle: { color: "#4b5563", borderRadius: [0, 9, 9, 0] },
       data: projects.map((item) => Number((item.studySeconds / 60).toFixed(1))),
     }],
   }, true);
@@ -274,18 +274,18 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .student-home {
   min-height: calc(100vh - 70px);
-  background: #f5f8fd;
-  padding: 20px;
+  background: #ffffff;
+  padding: 0;
 }
 
-.load-error { margin-bottom: 14px; }
+.load-error { margin-bottom: 12px; }
 
 .dashboard-card {
-  margin-bottom: 16px;
-  border: 0;
-  box-shadow: 0 10px 30px rgba(37, 77, 135, 0.08);
+  margin-bottom: 14px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
 
-  :deep(.el-card__header) { padding: 17px 20px; }
+  :deep(.el-card__header) { padding: 13px 16px; border-bottom: 1px solid #e5e7eb; }
 }
 
 .card-header {
@@ -294,8 +294,8 @@ onBeforeUnmount(() => {
   justify-content: space-between;
   gap: 12px;
 
-  span { color: #1d2b4a; font-size: 18px; font-weight: 700; }
-  small { color: #8a98af; font-size: 13px; }
+  span { color: #1f2937; font-size: 15px; font-weight: 700; }
+  small { color: #9ca3af; font-size: 12px; }
 }
 
 .score-layout { display: grid; grid-template-columns: minmax(520px, 0.95fr) minmax(760px, 1.35fr); min-height: 330px; }
@@ -304,7 +304,7 @@ onBeforeUnmount(() => {
   position: relative;
   display: flex;
   min-width: 0;
-  border-right: 1px dashed #d8e2f1;
+  border-right: 1px dashed #e5e7eb;
 }
 
 .score-chart { width: 100%; min-height: 330px; }
@@ -325,13 +325,36 @@ onBeforeUnmount(() => {
 }
 
 .score-metric { display: inline-flex; align-items: baseline; gap: 4px; }
-.score-metric--ai { color: #5645d5; }
-.score-metric--teacher { color: #258edc; }
-.summary-label { font-size: 14px; font-weight: 600; }
+.score-metric--ai { color: #1f2937; }
+.score-metric--teacher { color: #6b7280; }
+.summary-label { font-size: 12px; font-weight: 600; }
 .score-table-wrap { display: flex; align-items: center; min-width: 0; overflow-x: auto; padding: 8px 0 8px 24px; }
 .score-table { width: 100%; min-width: 760px; }
 .score-table :deep(.el-table__cell) { white-space: nowrap; }
 
+/* 成绩表：纯白底 + 中性灰边框，无蓝色/斑马重色 */
+.score-table :deep(th.el-table__cell) {
+  color: #1f2937;
+  background: #ffffff;
+  border-color: #e5e7eb;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.score-table :deep(td.el-table__cell) {
+  color: #374151;
+  border-color: #e5e7eb;
+  font-size: 12px;
+}
+
+.score-table :deep(.el-table__row--striped td.el-table__cell) {
+  background: #fafbfc;
+}
+
+.score-table :deep(.el-table__body tr:hover > td.el-table__cell) {
+  background: #f3f4f6;
+}
+
 .progress-layout { display: grid; grid-template-columns: 190px minmax(370px, 1fr) minmax(370px, 1fr); gap: 24px; align-items: stretch; }
 
 .learning-time {
@@ -340,13 +363,13 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   min-height: 270px;
-  color: #ffffff;
+  color: #1f2937;
+  border: 1px solid #e5e7eb;
   border-radius: 14px;
-  background: linear-gradient(150deg, #5fa9fa 0%, #387ee2 100%);
-  box-shadow: 0 14px 24px rgba(57, 126, 226, 0.24);
+  background: #fafbfc;
 
-  strong { margin-top: 18px; font-size: 17px; }
-  span { margin-top: 7px; font-size: 13px; opacity: 0.88; }
+  strong { margin-top: 16px; font-size: 14px; font-weight: 800; }
+  span { margin-top: 6px; font-size: 12px; color: #6b7280; }
 }
 
 .time-orbit {
@@ -355,13 +378,13 @@ onBeforeUnmount(() => {
   width: 108px;
   height: 108px;
   text-align: center;
-  border: 4px solid rgba(255, 255, 255, 0.4);
+  border: 3px solid #1f2937;
   border-radius: 50%;
-  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.16);
+  box-shadow: inset 0 0 0 7px #f3f4f6;
 }
 
 .time-value { font-size: 25px; font-weight: 800; line-height: 1; }
-.time-unit { margin-top: 5px; font-size: 13px; letter-spacing: 0.08em; }
+.time-unit { margin-top: 5px; font-size: 12px; letter-spacing: 0.08em; color: #6b7280; }
 .study-time-chart-wrap, .progress-chart-wrap { min-width: 0; }
 .study-time-chart, .progress-chart { min-height: 270px; width: 100%; }
 
@@ -381,7 +404,7 @@ onBeforeUnmount(() => {
 
 @media (max-width: 1320px) {
   .score-layout { grid-template-columns: 1fr; }
-  .score-visual { border-right: 0; border-bottom: 1px dashed #d8e2f1; }
+  .score-visual { border-bottom: 1px dashed #e5e7eb; }
   .score-table-wrap { padding: 20px 0 0; }
   .progress-layout { grid-template-columns: 180px 1fr; }
   .progress-chart-wrap { grid-column: 1 / -1; }
@@ -398,3 +421,21 @@ onBeforeUnmount(() => {
   .progress-chart-wrap { grid-column: auto; }
 }
 </style>
+
+<style lang="scss">
+/*
+ * 学生首页贴边纯白（scoped 无法触及祖先，故放在非 scoped 块）：
+ * 1) app-main 深蓝背景图/渐变 → 纯白，padding 清零；
+ * 2) 外层 .index 的 10px margin 清零，内容贴边。
+ * 选择器以 .student-home :has 为锚，不影响其他角色/页面。
+ */
+#app .studentLayout section.app-main:has(.student-home) {
+  padding: 0 !important;
+  background: #ffffff !important;
+  background-image: none !important;
+}
+
+#app .studentLayout .app-main:has(.student-home) .index {
+  margin: 0 !important;
+}
+</style>