diff --git a/.trae/skills/ink-training-theme/SKILL.md b/.trae/skills/ink-training-theme/SKILL.md
index 9e74b83..a264a12 100644
--- a/.trae/skills/ink-training-theme/SKILL.md
+++ b/.trae/skills/ink-training-theme/SKILL.md
@@ -180,13 +180,16 @@ scoped 里写的墨黑按钮永远不生效。**这不是"页面打补丁"能解
    定位 `student-training.scss` 和子组件中的旧蓝色规则；按「全局 !important
    覆盖机制」一节的模板替换成墨黑极简（**只做一次，后续页面自动继承**）。
 1. 读目标页，确认根类（如 `.xxx-page.student-training-shell`）和现有 DOM。
-2. 在页面 scoped 样式的根类块内定义全部令牌（见下），让所有
+2. **搭建页面头部**：按「页面头部：task-header + 内联 task-brief」一节
+   替换旧 `<TrainingTaskBrief>` 组件为内联 `task-brief`，确保有
+   `task-head-main` 包裹层和 `briefOpen` ref。
+3. 在页面 scoped 样式的根类块内定义全部令牌（见下），让所有
    `var(--student-*)` 规则自动重着色，不要逐处打补丁。
-3. 新增一个非 scoped `<style lang="scss">` 块，选择器全部以页面根类为锚：
+4. 新增一个非 scoped `<style lang="scss">` 块，选择器全部以页面根类为锚：
    - 覆盖祖先 `app-main` 画布背景（scoped 触及不到祖先）；
    - 重写步骤导航（全局规则带 `!important`，scoped 无法取胜，见步骤导航一节）。
-4. 按按钮四级层级、字号梯度、间距规则逐区收紧。
-5. 完成后用 GetDiagnostics 校验，并全文搜索蓝色旧值确认无残留。
+5. 按按钮四级层级、字号梯度、间距规则逐区收紧。
+6. 完成后用 GetDiagnostics 校验，并全文搜索蓝色旧值确认无残留。
 
 ## 颜色令牌
 
@@ -246,6 +249,145 @@ scoped 里写的墨黑按钮永远不生效。**这不是"页面打补丁"能解
 标题区三级关系：上方灰色宽字距小标签（11px，`#6b7280`，letter-spacing 0.12em，
 无底色胶囊）→ 黑色步骤标题 → 灰色说明文字。禁止再用实底色 "STEP 01" 胶囊。
 
+## 页面头部：task-header + 内联 task-brief
+
+每个实训页的头部是一个独立白卡片（`.task-header`），包含 badge + 标题 + 一行
+实训背景（可展开目标与要求），右侧可选工具栏按钮。**必须内联实现，禁止使用
+`TrainingTaskBrief.vue` 组件**——该组件是旧蓝 tab 切换风，与墨黑极简不兼容。
+
+### 标准 DOM 结构
+
+```html
+<section class="task-header">
+  <div class="task-head-main">
+    <span class="task-badge"><el-icon><DataAnalysis /></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>
+  <!-- 右侧工具栏（可选，二选一） -->
+  <TrainingTaskToolbar class="xxx-toolbar" :task-key="TASK_KEY" ... />
+  <!-- 或 -->
+  <div class="xxx-toolbar">
+    <TrainingMaterialButton :material-name="..." :material-url="..." />
+    <button type="button" class="outline-action" @click="exportOutcome">导出实训成果</button>
+  </div>
+</section>
+```
+
+### Script 必备变量
+
+```js
+const briefOpen = ref(false);
+const taskTitle = computed(() => taskConfig.value?.taskName || "页面默认标题");
+const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
+const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals));
+const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
+```
+
+### Scoped 样式（直接照抄）
+
+```scss
+.task-header {
+  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;
+  flex: 1 1 auto;
+}
+
+.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: var(--student-fs-display);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.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; }
+}
+
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
+}
+```
+
+### 实现要点
+
+1. **`<TrainingTaskBrief>` 组件已弃用**：旧组件是 tab 切换 + 独立卡片的蓝色风，
+   与墨黑极简冲突。直接把实训背景内联在 task-header 里，不要 import 该组件。
+2. **`task-head-main` 必须有**：它是 badge + title + brief 的 grid 容器，
+   `gap: 8px`、`flex: 1 1 auto`，右侧工具栏才不会被挤到下一行。
+3. **`task-brief-text` 单行截断**：`-webkit-line-clamp: 1` 保证默认只显示
+   一行背景摘要，点击按钮展开全部目标和要求。
+4. **右侧工具栏可选**：简单页直接用 `<TrainingTaskToolbar>` 一个组件搞定
+   提交/重置/导出；需要下载案例资料的页用 `<TrainingMaterialButton>` +
+   原生 `<button class="outline-action">` 组合。
+
 ## 步骤导航：按钮切换风
 
 每个步骤是一枚等宽分段按钮：白底灰边、圆角矩形，编号收成左侧小徽章；
@@ -439,6 +581,10 @@ loading 态保持原配色。
 
 ## 子组件换肤要点
 
+- **`TrainingTaskBrief.vue` 已弃用**：旧组件是 tab 切换 + 独立卡片的蓝色风，
+  与墨黑极简完全不兼容。新页面**禁止 import 该组件**，实训背景/目标/要求
+  直接内联在 `.task-header` 里（见「页面头部：task-header + 内联 task-brief」）。
+  旧组件目前仍被 foundation 三页引用，暂不删除，但新页面一律不使用。
 - AI 侧栏面板、气泡、输入框、发送按钮全部中性灰白；其内部 Element Plus
   主色按钮通过覆盖组件内 CSS 变量或 `.el-button--primary` 改墨黑。
 - 工具栏 `TrainingTaskToolbar` / `TrainingMaterialButton` 按「按钮规范 · 位置 B」
diff --git a/src/assets/styles/student-training.scss b/src/assets/styles/student-training.scss
index 6791652..0bebb68 100644
--- a/src/assets/styles/student-training.scss
+++ b/src/assets/styles/student-training.scss
@@ -233,18 +233,27 @@
 }
 
 .student-training-shell .flow-steps,
+/* ============================================================
+ * 步骤导航（墨黑极简 · 对齐 foundation new-product-survey）
+ * ============================================================ */
 .student-training-shell .step-indicator {
   display: flex !important;
   flex-wrap: nowrap !important;
-  align-items: center !important;
-  justify-content: space-between !important;
-  gap: 4px !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  gap: 10px !important;
   width: 100% !important;
-  margin: 0 0 12px !important;
-  padding: 4px !important;
-  border: 1px solid var(--student-panel-border) !important;
-  border-radius: var(--student-radius-pill) !important;
-  background: #f0f6fd !important;
+  max-width: 100% !important;
+  margin: 4px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  scrollbar-width: thin !important;
+  -webkit-overflow-scrolling: touch !important;
 }
 
 .student-training-shell .flow-arrow {
@@ -253,36 +262,124 @@
 
 .student-training-shell .flow-pill,
 .student-training-shell .step-tab {
-  display: inline-flex !important;
-  flex: 1 1 0 !important;
+  flex: 0 0 auto !important;
+  min-width: auto !important;
+  max-width: none !important;
+  display: flex !important;
+  flex-direction: row !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 8px !important;
-  min-width: 0 !important;
-  width: auto !important;
-  min-height: var(--student-step-height) !important;
-  height: var(--student-step-height) !important;
-  padding: 0 10px !important;
-  border: 1px solid transparent !important;
-  border-radius: var(--student-radius-pill) !important;
-  color: #5a7a9a !important;
-  background: transparent !important;
+  height: auto !important;
+  min-height: 42px !important;
+  margin: 0 !important;
+  padding: 8px 14px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
   box-shadow: none !important;
-  font-size: var(--student-step-font) !important;
-  font-weight: 800 !important;
-  line-height: 1.2 !important;
+  color: #6b7280 !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1.3 !important;
   letter-spacing: 0 !important;
   white-space: nowrap !important;
+  text-align: center !important;
+  cursor: pointer;
+  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
+
+  .step-bar { display: none !important; }
+
+  .step-no,
+  &:has(.step-no) .step-no {
+    position: static !important;
+    flex: 0 0 auto !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-width: 22px !important;
+    height: 22px !important;
+    padding: 0 5px !important;
+    border-radius: 6px !important;
+    background: #f3f4f6 !important;
+    color: #6b7280 !important;
+    font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+    font-size: 12px !important;
+    font-weight: 700 !important;
+    line-height: 1 !important;
+    letter-spacing: 0 !important;
+    &::after { display: none !important; }
+  }
+
+  .step-name { color: inherit !important; }
+}
+
+.student-training-shell .flow-pill:hover:not(.active):not(.complete),
+.student-training-shell .step-tab:hover:not(.active):not(.complete) {
+  border-color: #1f2937 !important;
+  background: #f9fafb !important;
+  color: #1f2937 !important;
+  .step-no,
+  &:has(.step-no) .step-no {
+    background: #1f2937 !important;
+    color: #ffffff !important;
+  }
+}
+
+.student-training-shell .flow-pill.complete:not(.active),
+.student-training-shell .step-tab.complete:not(.active) {
+  border-color: #dce9e2 !important;
+  color: #374151 !important;
+  .step-no,
+  &:has(.step-no) .step-no {
+    background: rgba(74,157,110,.12) !important;
+    color: #3f8a5f !important;
+  }
+  &:hover {
+    border-color: #4a9d6e !important;
+    background: #f9fafb !important;
+    color: #374151 !important;
+    .step-no,
+    &:has(.step-no) .step-no {
+      background: #4a9d6e !important;
+      color: #ffffff !important;
+    }
+  }
 }
 
 .student-training-shell .flow-pill.active,
 .student-training-shell .step-tab.active {
-  border-color: #1e88e5 !important;
+  border-color: #1f2937 !important;
+  background: #1f2937 !important;
   color: #ffffff !important;
-  background: linear-gradient(95deg, #1e88e5, #1565c0) !important;
-  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.25) !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
+  .step-no,
+  &:has(.step-no) .step-no {
+    background: #ffffff !important;
+    color: #1f2937 !important;
+  }
+  &:hover {
+    background: #111827 !important;
+    border-color: #111827 !important;
+  }
 }
 
+/* 窄屏步骤导航横向滑动 */
+@media (max-width: 900px) {
+  .student-training-shell .step-indicator {
+    overflow-x: auto !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+  }
+  .student-training-shell .step-tab,
+  .student-training-shell .flow-pill {
+    flex: 0 0 auto !important;
+    min-width: 140px !important;
+  }
+}
+
+/* flow-rail 旧布局兼容（保留但改色） */
 .student-training-shell .flow-rail {
   display: flex !important;
   flex-wrap: nowrap !important;
@@ -292,9 +389,9 @@
   width: 100% !important;
   margin: 0 0 16px !important;
   padding: 4px !important;
-  border: 1px solid var(--student-panel-border) !important;
+  border: 1px solid #e5e7eb !important;
   border-radius: 60px !important;
-  background: #f0f6fd !important;
+  background: #f9fafb !important;
 }
 
 .student-training-shell .flow-step {
@@ -304,37 +401,42 @@
   justify-content: center !important;
   gap: 6px !important;
   min-width: 0 !important;
-  min-height: var(--student-step-height) !important;
-  height: var(--student-step-height) !important;
+  min-height: 34px !important;
+  height: 34px !important;
   padding: 0 8px !important;
   border: 1px solid transparent !important;
-  border-radius: var(--student-radius-pill) !important;
-  color: #5a7a9a !important;
+  border-radius: 999px !important;
+  color: #6b7280 !important;
   background: transparent !important;
   box-shadow: none !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  letter-spacing: 0 !important;
+  text-align: center !important;
+  overflow-wrap: anywhere !important;
 }
 
 .student-training-shell .flow-step span {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  flex: 0 0 24px !important;
-  width: 24px !important;
-  height: 24px !important;
+  flex: 0 0 22px !important;
+  width: 22px !important;
+  height: 22px !important;
   margin: 0 !important;
-  border-radius: 50% !important;
-  color: #ffffff !important;
-  background: linear-gradient(95deg, #1e88e5, #1565c0) !important;
+  border-radius: 6px !important;
+  color: #6b7280 !important;
+  background: #f3f4f6 !important;
   font-size: 12px !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
 }
 
 .student-training-shell .flow-step strong {
   min-width: 0 !important;
-  color: #1e3a5f !important;
-  font-size: var(--student-step-font) !important;
-  font-weight: 800 !important;
+  color: inherit !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
   line-height: 1.25 !important;
   letter-spacing: 0 !important;
   text-align: center !important;
@@ -345,10 +447,10 @@
   width: 100% !important;
   margin: 12px 0 16px !important;
   padding: 12px !important;
-  border: 1px solid #cfe2f5 !important;
+  border: 1px solid #e5e7eb !important;
   border-radius: 16px !important;
-  background: #f0f6fd !important;
-  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.06) !important;
+  background: #ffffff !important;
+  box-shadow: none !important;
 }
 
 .training-step-area::before {
@@ -360,12 +462,12 @@
   min-width: 92px !important;
   margin: 0 0 14px !important;
   padding: 0 14px !important;
-  border: 1px solid #1e88e5 !important;
+  border: 1px solid #e5e7eb !important;
   border-radius: 999px !important;
-  color: #ffffff !important;
-  background: linear-gradient(95deg, #1e88e5, #1565c0) !important;
+  color: #111827 !important;
+  background: #f3f4f6 !important;
   font-size: var(--student-fs-body) !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
 }
@@ -376,9 +478,9 @@
   gap: 8px !important;
   min-height: 34px !important;
   margin: 10px 0 8px !important;
-  color: #1e3a5f !important;
+  color: #1f2937 !important;
   font-size: 16px !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1.45 !important;
   letter-spacing: 0 !important;
 }
@@ -402,7 +504,7 @@
 .training-step-area li,
 .training-step-area .online,
 .training-step-area .online span {
-  color: #2c4a6a !important;
+  color: #374151 !important;
   font-size: var(--student-fs-body) !important;
   line-height: 1.75 !important;
   letter-spacing: 0 !important;
@@ -422,17 +524,22 @@
   height: 40px !important;
   min-height: 40px !important;
   padding: 0 18px !important;
-  border: 1px solid #1e88e5 !important;
-  border-radius: 6px !important;
+  border: 1px solid #1f2937 !important;
+  border-radius: 10px !important;
   color: #ffffff !important;
-  background: linear-gradient(180deg, #42a5f5, #1e88e5) !important;
-  box-shadow: none !important;
+  background: #1f2937 !important;
+  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
   font-size: var(--student-fs-body) !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
 }
 
+.training-step-area .el-button:hover {
+  background: #111827 !important;
+  border-color: #111827 !important;
+}
+
 .training-step-area .el-button span {
   color: inherit !important;
   font-size: inherit !important;
@@ -444,7 +551,7 @@
   flex-wrap: wrap !important;
   justify-content: center !important;
   align-items: center !important;
-  gap: 20px !important;
+  gap: 14px !important;
   margin-top: 20px !important;
   padding: 0 !important;
 }
@@ -456,18 +563,20 @@
   justify-content: center !important;
   min-width: 112px !important;
   width: auto !important;
-  height: var(--student-action-height) !important;
-  min-height: var(--student-action-height) !important;
-  padding: 0 16px !important;
-  border: 1px solid #1e88e5 !important;
-  border-radius: var(--student-radius-sm) !important;
-  color: #1e3a5f !important;
-  background: #e3f2fd !important;
+  height: 40px !important;
+  min-height: 40px !important;
+  padding: 0 18px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 10px !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
   box-shadow: none !important;
-  font-size: var(--student-action-font) !important;
-  font-weight: 900 !important;
+  font-size: var(--student-fs-body) !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
+  cursor: pointer;
+  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
 }
 
 .student-training-shell .training-actions .el-button.training-action span,
@@ -478,9 +587,33 @@
 
 .student-training-shell .training-actions .el-button.training-action:hover:not(.is-disabled),
 .student-training-shell .training-actions button.training-action:hover:not(:disabled) {
-  border-color: #1565c0 !important;
-  color: #1565c0 !important;
-  background: #bbdefb !important;
+  border-color: #1f2937 !important;
+  color: #1f2937 !important;
+  background: #f9fafb !important;
+  transform: translateY(-1px) !important;
+  box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
+}
+
+.student-training-shell .training-actions .el-button.training-action.primary,
+.student-training-shell .training-actions button.training-action.primary {
+  border: 1px solid #1f2937 !important;
+  color: #ffffff !important;
+  background: #1f2937 !important;
+  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
+}
+
+.student-training-shell .training-actions .el-button.training-action.primary:hover:not(.is-disabled),
+.student-training-shell .training-actions button.training-action.primary:hover:not(:disabled) {
+  background: #111827 !important;
+  border-color: #111827 !important;
+  box-shadow: 0 4px 12px rgba(31,41,55,.24) !important;
+}
+
+.student-training-shell .training-actions .el-button.training-action.is-disabled,
+.student-training-shell .training-actions button.training-action:disabled {
+  opacity: .5 !important;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
 /* 新产品调查等页面使用 task-actions，而非 training-action。统一底部提交/重置按钮规格。 */
@@ -655,19 +788,28 @@
   flex: 0 0 auto !important;
   min-width: 0 !important;
   width: auto !important;
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
+  height: 40px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
   margin: 0 !important;
-  padding: 0 12px !important;
-  border: 1px solid #1e88e5 !important;
-  border-radius: var(--student-radius-pill) !important;
-  color: #1e3a5f !important;
-  background: #e3f2fd !important;
+  padding: 0 18px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 10px !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
   font-size: 13px !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
+  cursor: pointer;
+  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
+  &:hover {
+    border-color: #1f2937 !important;
+    background: #f9fafb !important;
+    color: #1f2937 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
+  }
 }
 
 .student-training-shell .el-button.upload-action,
@@ -681,19 +823,23 @@
   gap: 8px !important;
   min-width: 0 !important;
   width: auto !important;
-  height: var(--student-upload-height) !important;
-  min-height: var(--student-upload-height) !important;
+  height: 40px !important;
+  min-height: 40px !important;
   padding: 0 18px !important;
-  border: 1px solid #1e88e5 !important;
-  border-radius: var(--student-radius-pill) !important;
+  border: 1px solid #1f2937 !important;
+  border-radius: 10px !important;
   color: #ffffff !important;
-  background: linear-gradient(95deg, #1e88e5, #1565c0) !important;
-  box-shadow: none !important;
+  background: #1f2937 !important;
+  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
   font-size: var(--student-upload-font) !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
   white-space: nowrap !important;
+  &:hover {
+    background: #111827 !important;
+    border-color: #111827 !important;
+  }
 }
 
 .student-training-shell textarea,
@@ -747,13 +893,13 @@
   min-width: 136px !important;
   height: 36px !important;
   padding: 0 12px !important;
-  border: 1px solid #1e88e5 !important;
-  border-radius: 6px !important;
-  color: #1e3a5f !important;
-  background: #e3f2fd !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  color: #1f2937 !important;
+  background: #ffffff !important;
   box-shadow: none !important;
   font-size: var(--student-fs-body) !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   line-height: 1 !important;
   letter-spacing: 0 !important;
 }
@@ -761,9 +907,9 @@
 .legacy-training-page .top_item .el-button.active,
 .legacy-training-page .top_item .active {
   transform: none !important;
-  border-color: #1e88e5 !important;
+  border-color: #1f2937 !important;
   color: #ffffff !important;
-  background: linear-gradient(95deg, #1e88e5, #1565c0) !important;
+  background: #1f2937 !important;
 }
 
 // Keep long step names inside the navigation rail. Their complete name remains
diff --git a/src/views/components/TrainingTaskBrief.vue b/src/views/components/TrainingTaskBrief.vue
index a0e9c76..c9fead8 100644
--- a/src/views/components/TrainingTaskBrief.vue
+++ b/src/views/components/TrainingTaskBrief.vue
@@ -130,11 +130,18 @@ function normalizeGoals(value) {
 
 <style lang="scss" scoped>
 .training-task-brief {
-  margin-bottom: 14px;
+  --brief-accent: #1f2937;
+  --brief-accent-deep: #111827;
+  --brief-accent-soft: #f3f4f6;
+  --brief-panel-border: #e5e7eb;
+  --brief-text: #1f2937;
+  --brief-text-secondary: #6b7280;
+
+  margin-bottom: 10px;
   padding: 12px 16px;
-  border: 1px solid #90caf9;
-  border-radius: 20px;
-  background: #f0f6fd;
+  border: 1px solid var(--brief-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
   box-shadow: none;
 }
 
@@ -163,25 +170,30 @@ function normalizeGoals(value) {
   justify-content: center;
   gap: 8px;
   min-width: 0;
-  height: 40px;
+  height: 36px;
   padding: 0 12px;
-  border: 1px solid #90caf9;
-  border-radius: 6px;
-  color: #2c4a6a;
-  background: #e3f2fd;
+  border: 1px solid var(--brief-panel-border);
+  border-radius: 8px;
+  color: var(--brief-text-secondary);
+  background: var(--brief-accent-soft);
   cursor: pointer;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
+  font-size: 12px;
+  font-weight: 600;
   line-height: 1;
-  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
-}
+  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
 
-.brief-tab:hover,
-.brief-tab.is-active {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: #bbdefb;
-  box-shadow: none;
+  &:hover {
+    border-color: var(--brief-accent);
+    color: var(--brief-accent);
+    background: #ffffff;
+  }
+
+  &.is-active {
+    border-color: var(--brief-accent);
+    color: #ffffff;
+    background: var(--brief-accent);
+    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
+  }
 }
 
 .brief-tab-icon,
@@ -189,32 +201,32 @@ function normalizeGoals(value) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
   line-height: 1;
 
   .el-icon {
     display: block;
-    width: 18px;
-    height: 18px;
-    font-size: 18px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
     line-height: 1;
   }
 }
 
-.brief-tab-icon,
-.brief-panel-icon,
-.brief-tab--background .brief-tab-icon,
-.brief-tab--goals .brief-tab-icon,
-.brief-tab--requirements .brief-tab-icon {
-  color: #1e88e5;
+.brief-tab .brief-tab-icon {
+  color: inherit;
+}
+
+.brief-tab.is-active .brief-tab-icon {
+  color: inherit;
 }
 
 .brief-panel {
-  border: 1px solid rgba(187, 222, 251, 0.2);
-  border-radius: 20px;
-  background: #f0f6fd;
+  border: 1px solid var(--brief-panel-border);
+  border-radius: 10px;
+  background: var(--brief-accent-soft);
   overflow: hidden;
 }
 
@@ -222,30 +234,30 @@ function normalizeGoals(value) {
   display: flex;
   align-items: center;
   gap: 8px;
-  height: 40px;
+  height: 36px;
   padding: 0 14px;
-  border-bottom: 1px solid rgba(187, 222, 251, 0.2);
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
+  border-bottom: 1px solid var(--brief-panel-border);
+  color: var(--brief-text);
+  font-size: 13px;
+  font-weight: 700;
   line-height: 1;
 }
 
 .brief-scroll {
   max-height: 160px;
-  min-height: 110px;
+  min-height: 100px;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: #cfe2f5 #f0f6fd;
+  scrollbar-color: var(--brief-panel-border) var(--brief-accent-soft);
 }
 
 .brief-content {
   margin: 0;
   padding: 10px 16px 12px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.85;
+  color: var(--brief-text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
 }
 
 .brief-goals {
@@ -253,8 +265,11 @@ function normalizeGoals(value) {
   list-style: none;
 
   li {
-    padding: 5px 0 5px 12px;
-    border-left: 2px solid #cfe2f5;
+    padding: 4px 0 4px 12px;
+    border-left: 2px solid var(--brief-panel-border);
+    color: var(--brief-text-secondary);
+    font-size: 13px;
+    line-height: 1.55;
   }
 
   li + li {
@@ -263,16 +278,16 @@ function normalizeGoals(value) {
 }
 
 .brief-scroll::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .brief-scroll::-webkit-scrollbar-track {
-  background: #f0f6fd;
+  background: var(--brief-accent-soft);
 }
 
 .brief-scroll::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #cfe2f5;
+  border-radius: 6px;
+  background: var(--brief-panel-border);
 }
 
 @media (max-width: 768px) {
@@ -289,13 +304,14 @@ function normalizeGoals(value) {
   }
 
   .brief-tab {
-    height: 36px;
+    height: 34px;
     padding: 0 8px;
-    font-size: var(--student-fs-body);
+    font-size: 11px;
   }
 
   .brief-scroll {
-    height: 140px;
+    max-height: 140px;
+    min-height: 90px;
   }
 }
 </style>
diff --git a/src/views/demand/business-feasibility.vue b/src/views/demand/business-feasibility.vue
index bde676b..c218028 100644
--- a/src/views/demand/business-feasibility.vue
+++ b/src/views/demand/business-feasibility.vue
@@ -1,92 +1,119 @@
 <template>
   <div class="feasibility-page student-training-shell">
     <main class="feasibility-core">
-      <header class="task-header">
-        <span>DEMAND INSIGHT · BUSINESS CASE</span>
-        <h1>{{ taskTitle }}</h1>
-      </header>
-
-      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
-
-      <section class="workbench">
+      <section class="task-header">
+        <div class="task-head-main">
+          <span class="task-badge">DEMAND INSIGHT · BUSINESS CASE</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>
         <div class="workbench-actions">
           <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
           <button class="action-button" type="button" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button>
         </div>
+      </section>
+
+      <section class="workbench">
 
         <nav class="step-indicator" aria-label="商业可行性论证步骤">
-          <template v-for="(step, index) in trainingSteps" :key="step">
-            <button type="button" :class="['step-tab', { active: currentStep === index + 1, complete: currentStep > index + 1 }]" @click="switchStep(index + 1)">
-              <b>{{ String(index + 1).padStart(2, '0') }}</b><span><strong>{{ step }}</strong><small>{{ currentStep === index + 1 ? '当前步骤' : '点击切换' }} →</small></span>
-            </button><i v-if="index < trainingSteps.length - 1" />
-          </template>
+          <button
+            v-for="(step, index) in trainingSteps"
+            :key="step"
+            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="switchStep(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 v-if="currentStep === 1" class="step-card">
-          <div class="step-heading"><div><p>Step 01</p><h2>商业可行性论证</h2></div><em>结构化论证</em></div>
+          <div class="step-heading"><div><p class="section-eyebrow">Step 01</p><h2>商业可行性论证</h2></div><em>结构化论证</em></div>
           <p class="intro">商业可行性论证需要从多个维度系统展开。以下提供了可行性分析的各个子模块，根据案例信息，完善填写以下信息。</p>
 
           <section class="form-section">
             <div class="section-title"><span>01</span><div><h3>项目概述</h3><p>结合前序 PEST、SWOT 分析，说明项目为何值得推进。</p></div></div>
             <div class="form-table overview-table">
-              <label v-for="field in overviewFields" :key="field.key"><span>{{ field.label }}</span><textarea v-model.trim="form.projectOverview[field.key]" :placeholder="field.placeholder" rows="3" /></label>
+              <label v-for="field in overviewFields" :key="field.key"><span>{{ field.label }}</span><el-input v-model="form.projectOverview[field.key]" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" :placeholder="field.placeholder" /></label>
             </div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>02</span><div><h3>市场规模与竞争格局</h3><p>填写可验证的市场数据，比例项目以百分数填写，例如 12.5。</p></div></div>
             <div class="form-table market-table">
-              <label v-for="field in marketFields" :key="field.key"><span>{{ field.label }}</span><div class="input-with-suffix"><input v-model="form.marketAnalysis[field.key]" :type="field.type || 'text'" :min="field.type === 'number' ? 0 : undefined" :step="field.type === 'number' ? '0.01' : undefined" :placeholder="field.placeholder" /><b v-if="field.suffix">{{ field.suffix }}</b></div></label>
+              <label v-for="field in marketFields" :key="field.key"><span>{{ field.label }}</span><div class="input-with-suffix"><el-input-number v-if="field.type === 'number'" v-model="form.marketAnalysis[field.key]" :min="0" :step="0.01" controls-position="right" :placeholder="field.placeholder" /><el-input v-else v-model="form.marketAnalysis[field.key]" :placeholder="field.placeholder" /><b v-if="field.suffix">{{ field.suffix }}</b></div></label>
             </div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>03</span><div><h3>目标用户群体分析</h3><p>从不同消费能力和使用场景中识别最有价值的用户。</p></div></div>
-            <div class="table-wrap"><table><thead><tr><th>用户群体</th><th>典型场景</th><th>核心需求</th><th>消费能力</th></tr></thead><tbody><tr v-for="(user, index) in form.targetUsers" :key="index"><td><textarea v-model.trim="user.userGroup" :placeholder="targetUserExamples[index].userGroup" /></td><td><textarea v-model.trim="user.scenario" :placeholder="targetUserExamples[index].scenario" /></td><td><textarea v-model.trim="user.coreNeed" :placeholder="targetUserExamples[index].coreNeed" /></td><td><input v-model.trim="user.spendingPower" :placeholder="targetUserExamples[index].spendingPower" /></td></tr></tbody></table></div>
+            <div class="table-wrap"><table><thead><tr><th>用户群体</th><th>典型场景</th><th>核心需求</th><th>消费能力</th></tr></thead><tbody><tr v-for="(user, index) in form.targetUsers" :key="index"><td><el-input v-model="user.userGroup" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="targetUserExamples[index].userGroup" /></td><td><el-input v-model="user.scenario" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="targetUserExamples[index].scenario" /></td><td><el-input v-model="user.coreNeed" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="targetUserExamples[index].coreNeed" /></td><td><el-input v-model="user.spendingPower" :placeholder="targetUserExamples[index].spendingPower" /></td></tr></tbody></table></div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>04</span><div><h3>商业模式梳理</h3><p>分别说明基础销售和持续增值服务如何形成收入。</p></div></div>
-            <div class="table-wrap"><table><thead><tr><th>模块</th><th>案例公司的策略</th><th>说明</th></tr></thead><tbody><tr v-for="model in form.businessModels" :key="model.module"><td class="fixed-cell">{{ model.module }}</td><td><textarea v-model.trim="model.strategy" placeholder="填写渠道、产品组合或服务策略" /></td><td><textarea v-model.trim="model.explanation" placeholder="说明策略与用户、成本的关系" /></td></tr></tbody></table></div>
+            <div class="table-wrap"><table><thead><tr><th>模块</th><th>案例公司的策略</th><th>说明</th></tr></thead><tbody><tr v-for="model in form.businessModels" :key="model.module"><td class="fixed-cell">{{ model.module }}</td><td><el-input v-model="model.strategy" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="填写渠道、产品组合或服务策略" /></td><td><el-input v-model="model.explanation" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="说明策略与用户、成本的关系" /></td></tr></tbody></table></div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>05</span><div><h3>成本结构分析</h3><p>填写各项单位成本，单位总成本由系统自动汇总。</p></div></div>
-            <div class="table-wrap"><table><thead><tr><th>成本项目</th><th>金额（元/台）</th></tr></thead><tbody><tr v-for="cost in form.costs" :key="cost.id"><td class="fixed-cell">{{ cost.label }}</td><td><input v-model="cost.amount" type="number" min="0" step="0.01" placeholder="填写金额" /></td></tr><tr class="total-row"><td>单位总成本</td><td><input :value="currency(totalCost)" readonly aria-label="单位总成本" /></td></tr></tbody></table></div>
+            <div class="table-wrap"><table><thead><tr><th>成本项目</th><th>金额（元/台）</th></tr></thead><tbody><tr v-for="cost in form.costs" :key="cost.id"><td class="fixed-cell">{{ cost.label }}</td><td><el-input-number v-model="cost.amount" :min="0" :step="0.01" controls-position="right" placeholder="填写金额" /></td></tr><tr class="total-row"><td>单位总成本</td><td><span class="computed-value">{{ currency(totalCost) }}</span></td></tr></tbody></table></div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>06</span><div><h3>定价与毛利分析</h3><p>单位毛利 = 单位目标售价 − 单位总成本；毛利率 = 单位毛利 ÷ 单位总成本。</p></div></div>
-            <div class="table-wrap"><table><thead><tr><th>指标</th><th>数值</th></tr></thead><tbody><tr><td class="fixed-cell">目标售价（元/台）</td><td><input v-model="form.targetPrice" type="number" min="0" step="0.01" placeholder="填写目标售价" /></td></tr><tr class="total-row"><td>单位毛利（元/台）</td><td><input :value="currency(unitGrossProfit)" readonly aria-label="单位毛利" /></td></tr><tr class="total-row"><td>毛利率（%）</td><td><input :value="percent(grossMargin)" readonly aria-label="毛利率" /></td></tr></tbody></table></div>
+            <div class="table-wrap"><table><thead><tr><th>指标</th><th>数值</th></tr></thead><tbody><tr><td class="fixed-cell">目标售价（元/台）</td><td><el-input-number v-model="form.targetPrice" :min="0" :step="0.01" controls-position="right" placeholder="填写目标售价" /></td></tr><tr class="total-row"><td>单位毛利（元/台）</td><td><span class="computed-value">{{ currency(unitGrossProfit) }}</span></td></tr><tr class="total-row"><td>毛利率（%）</td><td><span class="computed-value">{{ percent(grossMargin) }}</span></td></tr></tbody></table></div>
           </section>
 
           <section class="form-section">
             <div class="section-title"><span>07</span><div><h3>风险识别与评估</h3><p>识别项目主要风险，并明确影响程度及可执行的应对措施。</p></div></div>
-            <div class="table-wrap"><table><thead><tr><th>风险类型</th><th>具体风险描述</th><th>影响程度</th><th>应对措施</th></tr></thead><tbody><tr v-for="risk in form.risks" :key="risk.type"><td class="fixed-cell">{{ risk.type }}</td><td><textarea v-model.trim="risk.description" placeholder="填写具体风险" /></td><td><select v-model="risk.impact"><option value="">请选择</option><option value="高">高</option><option value="中">中</option><option value="低">低</option></select></td><td><textarea v-model.trim="risk.response" placeholder="填写应对措施" /></td></tr></tbody></table></div>
+            <div class="table-wrap"><table><thead><tr><th>风险类型</th><th>具体风险描述</th><th>影响程度</th><th>应对措施</th></tr></thead><tbody><tr v-for="risk in form.risks" :key="risk.type"><td class="fixed-cell">{{ risk.type }}</td><td><el-input v-model="risk.description" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="填写具体风险" /></td><td><el-select v-model="risk.impact" placeholder="请选择" size="default" class="risk-impact-select"><el-option label="高" value="高" /><el-option label="中" value="中" /><el-option label="低" value="低" /></el-select></td><td><el-input v-model="risk.response" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="填写应对措施" /></td></tr></tbody></table></div>
           </section>
 
           <div class="step-actions"><button class="action-button primary" type="button" :disabled="saving" @click="validateAndContinue">{{ saving ? '校验并保存中…' : '校验并进入第 2 步' }}</button><button class="action-button" type="button" :disabled="saving" @click="resetForm"><el-icon><RefreshLeft /></el-icon>清空填写</button></div>
         </section>
 
         <section v-else-if="currentStep === 2" class="step-card">
-          <div class="step-heading"><div><p>Step 02</p><h2>项目可行性初步决策</h2></div><em>立项判断</em></div>
+          <div class="step-heading"><div><p class="section-eyebrow">Step 02</p><h2>项目可行性初步决策</h2></div><em>立项判断</em></div>
           <p class="intro">综合以上所有分析，初步判断项目的可行性，并明确如果立项后最需要优先解决的关键问题。</p>
           <section class="decision-section">
             <h3><span>01</span>该项目商业可行性总体评估为：</h3>
-            <div class="decision-grid" role="radiogroup" aria-label="商业可行性总体评估">
-              <label v-for="option in feasibilityOptions" :key="option.value" :class="['decision-option', { selected: stepTwo.decision === option.value }]"><input v-model="stepTwo.decision" type="radio" :value="option.value" name="business-feasibility-decision" @change="handleDecisionChange" /><span class="radio-mark"></span><strong>{{ option.label }}</strong><small>{{ option.hint }}</small></label>
-            </div>
+            <el-radio-group v-model="stepTwo.decision" class="decision-grid" @change="handleDecisionChange">
+              <el-radio v-for="option in feasibilityOptions" :key="option.value" :label="option.value" class="decision-option">
+                <strong>{{ option.label }}</strong><small>{{ option.hint }}</small>
+              </el-radio>
+            </el-radio-group>
           </section>
           <section class="decision-section priority-section" :class="{ muted: stepTwo.decision === 'not-feasible' }">
             <div class="priority-heading"><h3><span>02</span>如果立项，你认为最需要优先解决的 3 个关键问题是：</h3><b>{{ selectedPriorityCount }}/3</b></div>
-            <p v-if="stepTwo.decision === 'not-feasible'" class="hint">已选择“不建议立项”，本项无需填写。</p>
+            <p v-if="stepTwo.decision === 'not-feasible'" class="hint">已选择"不建议立项"，本项无需填写。</p>
             <p v-else class="hint">请选择且仅选择 3 项，作为后续立项推进的优先事项。</p>
-            <div class="priority-grid"><label v-for="item in priorityOptions" :key="item.value" :class="['priority-option', { selected: stepTwo.priorities.includes(item.value) }]"><input v-model="stepTwo.priorities" type="checkbox" :value="item.value" :disabled="stepTwo.decision === 'not-feasible' || (!stepTwo.priorities.includes(item.value) && selectedPriorityCount >= 3)" /><span class="checkbox-mark"><el-icon v-if="stepTwo.priorities.includes(item.value)"><Check /></el-icon></span><span><strong>{{ item.label }}</strong><small>{{ item.detail }}</small></span></label></div>
+            <el-checkbox-group v-model="stepTwo.priorities" class="priority-grid">
+              <el-checkbox v-for="item in priorityOptions" :key="item.value" :label="item.value" :disabled="stepTwo.decision === 'not-feasible' || (!stepTwo.priorities.includes(item.value) && selectedPriorityCount >= 3)" class="priority-option">
+                <span><strong>{{ item.label }}</strong><small>{{ item.detail }}</small></span>
+              </el-checkbox>
+            </el-checkbox-group>
           </section>
           <div class="step-actions"><button class="action-button primary" type="button" :disabled="saving" @click="saveStepTwo">{{ saving ? '校验并保存中…' : '保存并进入第 3 步' }}</button><button class="action-button" type="button" :disabled="saving" @click="resetStepTwo"><el-icon><RefreshLeft /></el-icon>清空填写</button></div>
         </section>
         <section v-else-if="currentStep === 3" class="step-card report-step">
-          <div class="step-heading"><div><p>Step 03</p><h2>可行性论证报告</h2></div><em>成果提交</em></div>
+          <div class="step-heading"><div><p class="section-eyebrow">Step 03</p><h2>可行性论证报告</h2></div><em>成果提交</em></div>
           <div class="report-guide"><p>根据前两步的论证结构与信息，结合实训 4–6，撰写可行性论证报告。可参考以下方法：</p><ol><li>根据报告模板，自行分析撰写可行性论证报告。</li><li>使用通用 AI 大模型辅助完成报告，参考步骤提示词见案例文档。</li></ol></div>
           <section class="report-upload-panel">
             <input ref="reportInput" class="visually-hidden" type="file" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" @change="handleReportUpload" />
@@ -110,7 +137,6 @@ import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 
 const TASK_KEY = "business-feasibility";
 const DEFAULT_STEPS = ["商业可行性论证", "项目初步决策", "可行性论证报告", "决策结论"];
@@ -149,6 +175,7 @@ const priorityOptions = [
 ];
 const defaultTask = { title: "商业可行性论证", background: "在产品开发前，综合市场机会、用户需求、竞争态势、成本收益和风险，判断项目是否具有可推进的商业价值。", goals: ["掌握商业可行性论证的基本维度", "形成市场、用户、成本与收益的一致判断", "识别主要风险并提出应对措施"], requirement: "请以案例资料和前序分析为依据，完成表格全部内容；成本与价格数据需真实、合理且逻辑一致。" };
 const { proxy } = getCurrentInstance();
+const briefOpen = ref(false);
 const taskConfig = ref(null); const currentStep = ref(1); const saving = ref(false); const uploading = ref(false); const completed = ref(false); const stepTwoCompleted = ref(false); const stepThreeCompleted = ref(false); const reportInput = ref(null); const reportPreviewVisible = ref(false); const report = ref(createReport()); const form = ref(createForm()); const stepTwo = ref(createStepTwo());
 const taskTitle = computed(() => taskConfig.value?.taskName || defaultTask.title); const taskBackground = computed(() => taskConfig.value?.background || defaultTask.background); const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultTask.goals)); const taskRequirement = computed(() => taskConfig.value?.requirements || defaultTask.requirement); const trainingSteps = computed(() => parseTrainingArray(taskConfig.value?.steps, DEFAULT_STEPS));
 const totalCost = computed(() => form.value.costs.reduce((sum, cost) => sum + numeric(cost.amount), 0)); const unitGrossProfit = computed(() => numeric(form.value.targetPrice) - totalCost.value); const grossMargin = computed(() => totalCost.value > 0 ? unitGrossProfit.value / totalCost.value * 100 : null);
@@ -165,7 +192,7 @@ function currency(value) { return Number(value || 0).toFixed(2); }
 function percent(value) { return value === null || !Number.isFinite(value) ? "--" : `${Number(value).toFixed(2)}%`; }
 function parseArray(value, fallback) { if (Array.isArray(value) && value.length) return value; if (!value) return fallback; try { const parsed = JSON.parse(value); return Array.isArray(parsed) && parsed.length ? parsed.map((item) => String(item?.name ?? item).trim()).filter(Boolean) : fallback; } catch (_) { const items = String(value).split(/[，,|]/).map((item) => item.trim()).filter(Boolean); return items.length ? items : fallback; } }
 async function loadTaskConfig() { try { taskConfig.value = (await getTrainingTaskByKey(TASK_KEY))?.data || null; } catch (_) { taskConfig.value = null; } }
-async function loadSavedAnswer() { try { const saved = (await getStudentTrainingAnswer(TASK_KEY))?.data; if (!saved) return; if (saved.step1Answer) { const parsed = JSON.parse(saved.step1Answer); form.value = mergeForm(parsed?.form || parsed); completed.value = true; } if (saved.step2Answer) { const parsed = JSON.parse(saved.step2Answer); stepTwo.value = { ...createStepTwo(), ...(parsed?.stepTwo || parsed || {}), priorities: Array.isArray(parsed?.stepTwo?.priorities || parsed?.priorities) ? (parsed?.stepTwo?.priorities || parsed?.priorities) : [] }; stepTwoCompleted.value = true; } if (saved.step3Answer) { const parsed = JSON.parse(saved.step3Answer); report.value = { ...createReport(), ...(parsed?.report || parsed || {}) }; stepThreeCompleted.value = Boolean(report.value.url); } if (Number(saved.currentStep) > 0) currentStep.value = Number(saved.currentStep); } catch (_) { /* keep a new answer editable */ } }
+async function loadSavedAnswer() { try { const saved = await getStudentTrainingAnswer(TASK_KEY)?.data; if (!saved) return; if (saved.step1Answer) { const parsed = JSON.parse(saved.step1Answer); form.value = mergeForm(parsed?.form || parsed); completed.value = true; } if (saved.step2Answer) { const parsed = JSON.parse(saved.step2Answer); stepTwo.value = { ...createStepTwo(), ...(parsed?.stepTwo || parsed || {}), priorities: Array.isArray(parsed?.stepTwo?.priorities || parsed?.priorities) ? (parsed?.stepTwo?.priorities || parsed?.priorities) : [] }; stepTwoCompleted.value = true; } if (saved.step3Answer) { const parsed = JSON.parse(saved.step3Answer); report.value = { ...createReport(), ...(parsed?.report || parsed || {}) }; stepThreeCompleted.value = Boolean(report.value.url); } if (Number(saved.currentStep) > 0) currentStep.value = Number(saved.currentStep); } catch (_) { /* keep a new answer editable */ } }
 function mergeForm(value) { const fallback = createForm(); const merged = { ...fallback, ...(value || {}), projectOverview: { ...fallback.projectOverview, ...(value?.projectOverview || {}) }, marketAnalysis: { ...fallback.marketAnalysis, ...(value?.marketAnalysis || {}) }, targetUsers: Array.isArray(value?.targetUsers) && value.targetUsers.length === 3 ? value.targetUsers : fallback.targetUsers, businessModels: Array.isArray(value?.businessModels) && value.businessModels.length === 2 ? value.businessModels : fallback.businessModels, costs: fallback.costs.map((cost) => ({ ...cost, ...(value?.costs || []).find((item) => item?.id === cost.id) })), risks: fallback.risks.map((risk) => ({ ...risk, ...(value?.risks || []).find((item) => item?.type === risk.type) })) }; return merged; }
 function payload() { return { ...form.value, costs: form.value.costs.map(({ id, amount }) => ({ id, amount: amount === "" ? null : Number(amount) })), targetPrice: form.value.targetPrice === "" ? null : Number(form.value.targetPrice) }; }
 async function validateAndContinue() { if (saving.value) return; saving.value = true; try { const result = await checkBusinessFeasibilityStepOne(payload()); const calculated = result?.data || {}; form.value.costs = form.value.costs.map((cost) => ({ ...cost, amount: cost.amount === "" ? "" : Number(cost.amount) })); await saveStudentTrainingAnswer(TASK_KEY, { step1Answer: JSON.stringify({ form: form.value, calculations: { unitTotalCost: calculated.unitTotalCost ?? totalCost.value, unitGrossProfit: calculated.unitGrossProfit ?? unitGrossProfit.value, grossMargin: calculated.grossMargin ?? grossMargin.value } }), currentStep: 2, submitted: false, saveAction: "SAVE" }); completed.value = true; currentStep.value = 2; proxy?.$modal?.msgSuccess("已完成校验并保存，已进入第 2 步"); } catch (error) { proxy?.$modal?.msgError?.(error?.message || "请完整填写本步骤内容后再提交"); } finally { saving.value = false; } }
@@ -186,10 +213,956 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ task: taskTit
 </script>
 
 <style lang="scss" scoped>
-.feasibility-page { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:20px; min-height:100%; padding:22px; color:#2c4a6a; background:radial-gradient(circle at 22% 2%,#e3f2fd,transparent 34%),#ffffff; }.feasibility-core { min-width:0; }.task-header { position:relative; overflow:hidden; padding:28px 32px; border:1px solid #cfe2f5; border-radius:20px; background:linear-gradient(108deg,#f0f6fd,#f0f6fd); box-shadow:0 20px 46px rgba(30, 136, 229, 0.10); }.task-header::after { position:absolute; top:-50px; right:8%; width:180px; height:180px; border:1px solid #cfe2f5; border-radius:50%; content:""; }.task-header span { color:#42a5f5; font-size: var(--student-fs-caption); font-weight:800; letter-spacing:.16em; }.task-header h1 { margin:8px 0 0; color:#1e3a5f; font-size:32px; letter-spacing:.03em; }.workbench { margin-top:20px; padding:24px; border:1px solid #cfe2f5; border-radius:20px; background:#f0f6fd; }.workbench-actions { display:flex; justify-content:flex-end; gap:12px; }.action-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 17px; border:1px solid #cfe2f5; border-radius:10px; color:#1e3a5f; background:#e3f2fd; font:inherit; font-weight:800; cursor:pointer; transition:.2s; }.action-button:hover:not(:disabled) { transform:translateY(-1px); border-color:#1e88e5; background:#bbdefb; }.action-button.primary { border-color:#1e88e5; background:linear-gradient(105deg,#1e88e5,#1565c0); }.action-button:disabled { cursor:not-allowed; opacity:.62; }.step-indicator { display:flex; align-items:stretch; margin:26px 0; padding:10px; border:1px solid rgba(69, 201, 248, 0.2); border-radius:15px; background:#f0f6fd; }.step-tab { display:flex; flex:1; align-items:center; gap:11px; min-width:0; padding:11px 12px; border:0; border-radius:11px; color:#5a7a9a; background:transparent; text-align:left; cursor:pointer; }.step-tab b { display:grid; flex:0 0 35px; width:35px; height:35px; place-items:center; border:1px solid currentColor; border-radius:50%; }.step-tab span { min-width:0; }.step-tab strong,.step-tab small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.step-tab strong { color:inherit; font-size: var(--student-fs-body); }.step-tab small { margin-top:4px; color:#5a7a9a; font-size: var(--student-fs-caption); }.step-tab.active { color:#1e3a5f; background:linear-gradient(90deg,#bbdefb,#bbdefb); box-shadow:0 7px 18px rgba(30, 136, 229, 0.15); }.step-tab.active b { border-color:#42a5f5; background:#e3f2fd; }.step-tab.complete { color:#42a5f5; }.step-indicator i { width:1px; margin:10px 3px; background:#cfe2f5; }.step-card { padding:24px; border:1px solid #cfe2f5; border-radius:16px; background:linear-gradient(145deg,#e3f2fd,#f0f6fd); }.step-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.step-heading p { margin:0 0 4px; color:#42a5f5; font-size: var(--student-fs-body-sm); font-weight:800; letter-spacing:.1em; }.step-heading h2 { margin:0; color:#1e3a5f; font-size: var(--student-fs-h1); }.step-heading em { padding:7px 11px; border:1px solid #cfe2f5; border-radius:999px; color:#42a5f5; font-size: var(--student-fs-caption); font-style:normal; }.intro { margin:15px 0 0; color:#5a7a9a; line-height:1.8; }.form-section { margin-top:34px; }.section-title { display:flex; align-items:center; gap:12px; margin-bottom:14px; }.section-title > span { display:grid; width:31px; height:31px; place-items:center; border:1px solid #cfe2f5; border-radius:9px; color:#42a5f5; background:#e3f2fd; font-weight:900; }.section-title h3 { margin:0; color:#1e3a5f; font-size: var(--student-fs-h1); }.section-title p { margin:3px 0 0; color:#5a7a9a; font-size: var(--student-fs-body-sm); }.form-table { display:grid; border:1px solid #cfe2f5; border-radius:12px; overflow:hidden; background:#f0f6fd; }.form-table label { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid #cfe2f5; }.form-table label:last-child { border-bottom:0; }.form-table label > span,.table-wrap th { display:flex; align-items:center; justify-content:center; padding:13px; color:#2c4a6a; background:#e3f2fd; font-weight:800; }.form-table textarea { min-height:75px; }.market-table { grid-template-columns:repeat(2,minmax(0,1fr)); }.market-table label { border-right:1px solid #cfe2f5; }.market-table label:nth-child(2n) { border-right:0; }.market-table label:last-child { border-bottom:0; }.market-table label > span { justify-content:flex-start; padding:12px 14px; background:#e3f2fd; }.input-with-suffix { display:flex; align-items:center; gap:9px; padding:8px 12px; }.input-with-suffix b { color:#1565c0; font-size: var(--student-fs-caption); white-space:nowrap; } textarea,input,select { width:100%; box-sizing:border-box; border:1px solid rgba(99, 202, 234, 0.34); border-radius:7px; color:#1e3a5f; background:#f0f6fd; font:inherit; outline:none; } textarea { resize:vertical; min-height:74px; padding:10px 11px; line-height:1.55; } input,select { height:38px; padding:0 10px; } textarea:focus,input:focus,select:focus { border-color:#1e88e5; box-shadow:0 0 0 3px rgba(30, 136, 229, 0.10); }.table-wrap { overflow-x:auto; border:1px solid #cfe2f5; border-radius:12px; } table { width:100%; min-width:780px; border-collapse:collapse; } th { color:#1e3a5f; background:#1e88e5; } th,td { border-right:1px solid rgba(96, 202, 235, 0.24); border-bottom:1px solid rgba(96, 202, 235, 0.24); padding:10px; vertical-align:middle; } tr:last-child td { border-bottom:0; } th:last-child,td:last-child { border-right:0; } td textarea { min-height:74px; }.fixed-cell { color:#2c4a6a; background:#e3f2fd; text-align:center; font-weight:800; }.cost-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:18px; }.total-row td { color:#1565c0; background:#e3f2fd; font-weight:900; }.profit-panel { padding:18px; border:1px solid #cfe2f5; border-radius:12px; background:radial-gradient(circle at 100% 0,#e3f2fd,transparent 48%),#f0f6fd; }.profit-formula { padding-bottom:14px; color:#5a7a9a; font-size: var(--student-fs-body-sm); line-height:1.8; }.profit-panel label { display:block; margin-bottom:12px; }.profit-panel label span { display:block; margin-bottom:7px; color:#2c4a6a; font-size: var(--student-fs-body-sm); font-weight:800; }.computed { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-top:1px solid #cfe2f5; }.computed span { color:#5a7a9a; }.computed b { color:#1565c0; font-size: var(--student-fs-display); }.step-actions { display:flex; justify-content:center; gap:12px; margin-top:32px; }.placeholder { display:grid; min-height:300px; place-content:center; justify-items:center; gap:18px; color:#5a7a9a; text-align:center; }.placeholder p { font-size: var(--student-fs-h1); }
-.decision-section { margin-top:34px; padding:22px; border:1px solid #cfe2f5; border-radius:14px; background:linear-gradient(135deg,#f0f6fd,#f0f6fd); }.decision-section h3 { display:flex; align-items:center; gap:10px; margin:0; color:#1e3a5f; font-size: var(--student-fs-h1); }.decision-section h3 > span { display:grid; width:28px; height:28px; place-items:center; border:1px solid #cfe2f5; border-radius:8px; color:#42a5f5; font-size: var(--student-fs-body-sm); }.decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }.decision-option { position:relative; display:grid; grid-template-columns:20px 1fr; column-gap:10px; align-items:center; min-height:76px; padding:15px; border:1px solid #cfe2f5; border-radius:11px; background:#f0f6fd; cursor:pointer; transition:.2s; }.decision-option:hover { border-color:#cfe2f5; transform:translateY(-1px); }.decision-option input,.priority-option input { position:absolute; opacity:0; pointer-events:none; }.radio-mark,.checkbox-mark { display:grid; width:18px; height:18px; place-items:center; border:1px solid #cfe2f5; border-radius:50%; color:#1e3a5f; background:transparent; }.decision-option.selected { border-color:#1e88e5; background:linear-gradient(115deg,#bbdefb,#f0f6fd); box-shadow:inset 0 0 0 1px #cfe2f5; }.decision-option.selected .radio-mark { border:5px solid #1e88e5; background:#e3f2fd; }.decision-option strong { color:#1e3a5f; font-size: var(--student-fs-body); }.decision-option small { grid-column:2; margin-top:4px; color:#5a7a9a; font-size: var(--student-fs-caption); }.priority-section { transition:.2s; }.priority-section.muted { opacity:.56; }.priority-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }.priority-heading b { min-width:47px; padding:6px 9px; border:1px solid #cfe2f5; border-radius:999px; color:#42a5f5; background:#e3f2fd; text-align:center; }.hint { margin:12px 0 0 38px; color:#5a7a9a; font-size: var(--student-fs-body-sm); }.priority-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }.priority-option { display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; min-height:66px; padding:14px; border:1px solid #cfe2f5; border-radius:10px; background:#f0f6fd; cursor:pointer; transition:.2s; }.priority-option:hover { border-color:rgba(100, 223, 253, 0.75); }.priority-option.selected { border-color:#1e88e5; background:#e3f2fd; }.priority-option:has(input:disabled):not(.selected) { cursor:not-allowed; opacity:.52; }.checkbox-mark { margin-top:2px; border-radius:5px; }.priority-option.selected .checkbox-mark { border-color:#42a5f5; color:#1e3a5f; background:#42a5f5; }.priority-option strong,.priority-option small { display:block; }.priority-option strong { color:#1e3a5f; font-size: var(--student-fs-body); }.priority-option small { margin-top:4px; color:#5a7a9a; font-size: var(--student-fs-caption); }
-.report-guide { margin-top:24px; padding:18px 20px; border-left:3px solid #42a5f5; color:#2c4a6a; background:#e3f2fd; line-height:1.85; }.report-guide p,.report-guide ol { margin:0; }.report-guide ol { margin-top:9px; padding-left:23px; }.report-guide li + li { margin-top:6px; }.report-upload-panel { display:grid; min-height:300px; place-content:center; justify-items:center; gap:12px; margin-top:30px; padding:36px; border:1px dashed rgba(83, 218, 255, 0.72); border-radius:16px; background:radial-gradient(circle at 50% 22%,#e3f2fd,transparent 42%),#f0f6fd; text-align:center; }.upload-orbit { display:grid; width:68px; height:68px; place-items:center; border:1px solid #cfe2f5; border-radius:22px; color:#42a5f5; background:#e3f2fd; font-size:32px; box-shadow:0 0 0 9px rgba(45, 193, 233, 0.06); }.report-upload-panel h3 { margin:8px 0 0; color:#1e3a5f; font-size:21px; }.report-upload-panel > p { margin:0; color:#5a7a9a; }.report-file-card { display:flex; align-items:center; width:min(760px,100%); gap:15px; padding:17px; border:1px solid rgba(93, 217, 252, 0.45); border-radius:13px; background:#f0f6fd; text-align:left; }.report-file-icon { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; border-radius:12px; color:#1565c0; background:#e3f2fd; font-size:25px; }.report-file-meta { min-width:0; flex:1; }.report-file-meta strong,.report-file-meta span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.report-file-meta strong { color:#1e3a5f; }.report-file-meta span { margin-top:5px; color:#5a7a9a; font-size: var(--student-fs-caption); }.report-file-actions { display:flex; gap:8px; }.report-file-actions button,.text-action { display:inline-flex; align-items:center; gap:5px; border:0; color:#1565c0; background:transparent; font:inherit; font-size: var(--student-fs-body-sm); cursor:pointer; }.report-file-actions .danger { color:#ffaaa1; }.report-replace { display:flex; align-items:center; gap:13px; color:#5a7a9a; font-size: var(--student-fs-caption); }.text-action:disabled { cursor:not-allowed; opacity:.6; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.report-preview { display:grid; min-height:64vh; place-items:center; background:#ffffff; }.report-preview .el-image { width:100%; height:64vh; }.report-preview iframe { width:100%; height:64vh; border:0; background:#1e3a5f; }
-@media (max-width:1280px) { .feasibility-page { grid-template-columns:1fr; }.step-indicator { overflow-x:auto; }.step-tab { min-width:170px; }.market-table { grid-template-columns:1fr; }.market-table label { border-right:0; }.cost-layout { grid-template-columns:1fr; } }
-@media (max-width:720px) { .feasibility-page { padding:10px; }.task-header,.workbench,.step-card { padding:16px; }.task-header h1 { font-size:25px; }.workbench-actions { justify-content:flex-start; flex-wrap:wrap; }.form-table label { grid-template-columns:1fr; }.form-table label > span { justify-content:flex-start; }.step-heading em { display:none; }.step-actions { flex-wrap:wrap; }.decision-grid,.priority-grid { grid-template-columns:1fr; }.decision-section { padding:16px; }.hint { margin-left:0; }.report-upload-panel { padding:22px 14px; }.report-file-card { align-items:flex-start; flex-wrap:wrap; }.report-file-actions { width:100%; justify-content:flex-end; }.report-replace { flex-wrap:wrap; justify-content:center; } }
-.table-wrap th { display:table-cell; text-align:center; }
+/* 页面级令牌（墨黑极简主题） */
+.feasibility-page {
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --student-text: #1f2937;
+  --student-text-secondary: #6b7280;
+  --student-panel-border: #e5e7eb;
+  --student-panel-bg: #fafbfc;
+  --student-card-bg: #ffffff;
+  --student-danger: #d9554c;
+  --student-success: #4a9d6e;
+  min-width: 0;
+  color: var(--student-text);
+  background: #ffffff;
+  line-height: 1.55;
+}
+
+.feasibility-core {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+}
+
+/* task-header 独立卡片 */
+.task-header {
+  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;
+  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;
+  letter-spacing: 0;
+}
+
+.task-title {
+  margin: 0;
+  color: var(--student-text);
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.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;
+  }
+}
+
+.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;
+  }
+}
+
+/* workbench：扁平化容器 */
+.workbench {
+  margin-top: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 12px;
+}
+
+.workbench-actions {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* action-button 基础样式（次按钮：白底描边） */
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  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: var(--student-accent);
+    color: var(--student-accent);
+    background: #f9fafb;
+    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+  }
+
+  &.primary {
+    border-color: var(--student-accent);
+    color: #ffffff;
+    background: var(--student-accent);
+    font-weight: 700;
+    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
+
+    &:hover:not(:disabled) {
+      transform: translateY(-1px);
+      border-color: var(--student-accent-deep);
+      background: var(--student-accent-deep);
+      color: #ffffff;
+      box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+  }
+}
+
+/* step-card：独立卡片 */
+.step-card {
+  padding: 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 16px;
+  background: var(--student-card-bg);
+}
+
+.step-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.section-eyebrow {
+  margin: 0 0 2px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.step-heading h2 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.step-heading em {
+  padding: 4px 10px;
+  border: 1px solid #d6dae0;
+  border-radius: 999px;
+  color: var(--student-accent-light);
+  background: var(--student-accent-soft);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.intro {
+  margin: 10px 0 0;
+  color: #374151;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.form-section {
+  margin-top: 24px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.section-title > span {
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border: 0;
+  border-radius: 6px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font-size: 11px;
+  font-weight: 900;
+  flex-shrink: 0;
+}
+
+.section-title h3 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.section-title p {
+  margin: 2px 0 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+/* form-table：扁平化表格 */
+.form-table {
+  display: grid;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.form-table label {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  border-bottom: 1px solid var(--student-panel-border);
+}
+
+.form-table label:last-child { border-bottom: 0; }
+
+.form-table label > span {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 12px;
+  color: var(--student-text);
+  background: var(--student-panel-bg);
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.form-table label :deep(.el-textarea),
+.form-table label :deep(.el-input-number),
+.form-table label :deep(.el-input) {
+  margin: 8px 10px;
+  max-width: calc(100% - 20px);
+}
+
+.market-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.market-table label { border-right: 1px solid var(--student-panel-border); }
+.market-table label:nth-child(2n) { border-right: 0; }
+.market-table label:last-child { border-bottom: 0; }
+
+.input-with-suffix {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.input-with-suffix b {
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+  font-weight: 700;
+}
+
+/* table-wrap + Element Plus table 内的表单组件 */
+.table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+table {
+  width: 100%;
+  min-width: 780px;
+  border-collapse: collapse;
+}
+
+th {
+  color: var(--student-text);
+  font-size: 13px;
+  font-weight: 800;
+  background: var(--student-panel-bg);
+  text-align: center;
+}
+
+th, td {
+  border: 1px solid var(--student-panel-border);
+  padding: 8px 10px;
+  vertical-align: middle;
+}
+
+tr:last-child td { border-bottom: 0; }
+th:last-child, td:last-child { border-right: 0; }
+
+/* Element Plus 组件在表格中的紧凑样式 */
+.table-wrap td :deep(.el-textarea),
+.table-wrap td :deep(.el-input),
+.table-wrap td :deep(.el-select) {
+  max-width: 100%;
+}
+
+.table-wrap td :deep(.el-textarea__inner) {
+  min-height: 60px !important;
+  padding: 6px 10px;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.table-wrap td :deep(.el-input__wrapper),
+.table-wrap td :deep(.el-textarea__inner),
+.table-wrap td :deep(.el-select__wrapper) {
+  border-color: #d1d5db !important;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: none !important;
+
+  &:hover {
+    border-color: var(--student-accent-light) !important;
+  }
+}
+
+.table-wrap td :deep(.el-input__wrapper.is-focus),
+.table-wrap td :deep(.el-textarea__inner:focus),
+.table-wrap td :deep(.el-select__wrapper.is-focused) {
+  border-color: var(--student-accent) !important;
+  box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.08) !important;
+}
+
+.table-wrap td :deep(.el-input-number) {
+  width: 100%;
+}
+
+.table-wrap td :deep(.el-input-number .el-input__wrapper) {
+  padding: 0 8px;
+}
+
+.fixed-cell {
+  color: var(--student-text);
+  background: var(--student-panel-bg);
+  text-align: center;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.computed-value {
+  display: inline-block;
+  color: var(--student-text);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.total-row td {
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-weight: 800;
+  font-size: 13px;
+}
+
+.step-actions {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+/* placeholder */
+.placeholder {
+  display: grid;
+  min-height: 240px;
+  place-content: center;
+  justify-items: center;
+  gap: 14px;
+  color: var(--student-text-secondary);
+  text-align: center;
+}
+
+.placeholder p {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--student-text);
+}
+
+/* ===== Step 2 决策区 ===== */
+.decision-section {
+  margin-top: 24px;
+  padding: 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: var(--student-panel-bg);
+}
+
+.decision-section h3 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--student-text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.decision-section h3 > span {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 0;
+  border-radius: 6px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font-size: 10px;
+  font-weight: 900;
+  flex-shrink: 0;
+}
+
+/* decision-grid 使用 Element Plus el-radio-group */
+.decision-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+:deep(.decision-option.el-radio) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: start;
+  padding: 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: #374151;
+  background: #ffffff;
+  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
+  margin-right: 0;
+  height: auto;
+
+  strong {
+    color: var(--student-text);
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  small {
+    display: block;
+    margin-top: 3px;
+    color: var(--student-text-secondary);
+    font-size: 11px;
+    line-height: 1.5;
+  }
+
+  &:hover {
+    border-color: var(--student-accent-light);
+    transform: translateY(-1px);
+  }
+}
+
+/* 墨黑单选圆点 */
+:deep(.decision-option.el-radio .el-radio__input .el-radio__inner) {
+  border-color: #9ca3af;
+}
+
+:deep(.decision-option.el-radio .el-radio__input.is-checked .el-radio__inner) {
+  border-color: var(--student-accent);
+  background: var(--student-accent);
+}
+
+:deep(.decision-option.el-radio .el-radio__input.is-checked .el-radio__inner::after) {
+  background: #ffffff;
+}
+
+:deep(.decision-option.el-radio.is-checked) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+}
+
+:deep(.decision-option.el-radio.is-checked .el-radio__label) {
+  color: var(--student-accent);
+}
+
+/* priority-grid */
+.priority-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+:deep(.priority-option.el-checkbox) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: start;
+  padding: 10px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: #374151;
+  background: #ffffff;
+  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
+  margin-right: 0;
+  height: auto;
+
+  strong {
+    display: block;
+    color: var(--student-text);
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  small {
+    display: block;
+    margin-top: 3px;
+    color: var(--student-text-secondary);
+    font-size: 11px;
+    line-height: 1.5;
+  }
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--student-accent-light);
+    transform: translateY(-1px);
+  }
+
+  &.is-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+/* 墨黑复选框 */
+:deep(.priority-option.el-checkbox .el-checkbox__inner) {
+  border-color: #9ca3af;
+  background: #ffffff;
+}
+
+:deep(.priority-option.el-checkbox.is-checked .el-checkbox__inner) {
+  border-color: var(--student-accent);
+  background: var(--student-accent);
+}
+
+.priority-section { transition: opacity 0.16s ease; }
+.priority-section.muted { opacity: 0.45; }
+
+.priority-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.priority-heading b {
+  min-width: 44px;
+  padding: 4px 8px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 999px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  text-align: center;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.hint {
+  margin: 10px 0 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+/* ===== Step 3 报告区 ===== */
+.report-guide {
+  margin-top: 16px;
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  color: #374151;
+  background: var(--student-accent-soft);
+  line-height: 1.7;
+  font-size: 13px;
+  border-radius: 0 10px 10px 0;
+}
+
+.report-guide p, .report-guide ol { margin: 0; }
+.report-guide ol { margin-top: 6px; padding-left: 18px; }
+.report-guide li + li { margin-top: 3px; }
+
+.report-upload-panel {
+  display: grid;
+  min-height: 260px;
+  place-content: center;
+  justify-items: center;
+  gap: 10px;
+  margin-top: 20px;
+  padding: 30px;
+  border: 1px dashed #d1d5db;
+  border-radius: 14px;
+  background: var(--student-panel-bg);
+  text-align: center;
+}
+
+.upload-orbit {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 16px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: 26px;
+}
+
+.report-upload-panel h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.report-upload-panel > p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+}
+
+.report-file-card {
+  display: flex;
+  align-items: center;
+  width: min(720px, 100%);
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+  text-align: left;
+}
+
+.report-file-icon {
+  display: grid;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
+  font-size: 22px;
+}
+
+.report-file-meta { min-width: 0; flex: 1; }
+
+.report-file-meta strong, .report-file-meta span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-file-meta strong {
+  color: var(--student-text);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.report-file-meta span {
+  margin-top: 3px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+}
+
+.report-file-actions { display: flex; gap: 6px; flex-shrink: 0; }
+
+.report-file-actions button, .text-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  color: var(--student-accent);
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
+  transition: background 0.16s ease;
+
+  &:hover {
+    background: var(--student-accent-soft);
+  }
+
+  &.danger {
+    color: var(--student-danger);
+    &:hover { background: rgba(217, 85, 76, 0.08); }
+  }
+}
+
+.report-replace {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--student-text-secondary);
+  font-size: 11px;
+}
+
+.text-action:disabled { cursor: not-allowed; opacity: 0.5; }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.report-preview {
+  display: grid;
+  min-height: 64vh;
+  place-items: center;
+  background: #ffffff;
+}
+
+.report-preview .el-image {
+  width: 100%;
+  height: 64vh;
+}
+
+.report-preview iframe {
+  width: 100%;
+  height: 64vh;
+  border: 0;
+  background: #ffffff;
+}
+
+/* 风险评估下拉框宽度 */
+.risk-impact-select {
+  width: 100%;
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 1280px) {
+  .step-indicator { overflow-x: auto; }
+  .step-tab { min-width: 140px; }
+  .market-table { grid-template-columns: 1fr; }
+  .market-table label { border-right: 0; }
+}
+
+@media (max-width: 900px) {
+  .form-table label { grid-template-columns: 1fr; }
+  .form-table label > span { justify-content: flex-start; padding: 8px 12px; }
+  .decision-grid, .priority-grid { grid-template-columns: 1fr; }
+  .step-heading em { display: none; }
+  .step-actions { flex-wrap: wrap; }
+}
+
+@media (max-width: 720px) {
+  .workbench-actions { justify-content: flex-start; flex-wrap: wrap; }
+  .report-upload-panel { padding: 20px 14px; }
+  .report-file-card { align-items: flex-start; flex-wrap: wrap; }
+  .report-file-actions { width: 100%; justify-content: flex-end; }
+  .report-replace { flex-wrap: wrap; justify-content: center; }
+}
+</style>
+
+<style lang="scss">
+/* 画布背景：纯白，去旧浅蓝渐变 */
+#app .studentLayout section.app-main:has(.feasibility-page) {
+  background: #ffffff !important;
+}
+
+#app .studentLayout section.app-main:has(.feasibility-page) .feasibility-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== 步骤导航：按钮切换风（foundation 同款） ===== */
+#app .studentLayout section.app-main:has(.feasibility-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-bar { display: none !important; }
+
+    .step-no {
+      position: static !important;
+      flex: 0 0 auto !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      min-width: 22px !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      letter-spacing: 0 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+
+      &::after { display: none !important; }
+    }
+
+    .step-name { color: inherit !important; }
+
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+
+      .step-no { background: #1f2937 !important; color: #ffffff !important; }
+    }
+
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+
+      .step-no { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+
+        .step-no { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
+
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+
+      .step-no { background: #ffffff !important; color: #1f2937 !important; }
+
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
+}
+
+/* 窄屏：横向滑动 */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.feasibility-page) .step-indicator {
+    overflow-x: auto !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+  }
+
+  #app .studentLayout section.app-main:has(.feasibility-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
 </style>
diff --git a/src/views/demand/competitive-environment-analysis.vue b/src/views/demand/competitive-environment-analysis.vue
index 59a12c2..6bc7347 100644
--- a/src/views/demand/competitive-environment-analysis.vue
+++ b/src/views/demand/competitive-environment-analysis.vue
@@ -671,18 +671,18 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
   .step-connector { display: none !important; }
 
   .step-tab {
-    flex: 1 1 0 !important;
-    max-width: 220px !important;
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
     display: flex !important;
     flex-direction: row !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 8px !important;
-    min-width: 0 !important;
     height: auto !important;
     min-height: 42px !important;
     margin: 0 !important;
-    padding: 8px 12px !important;
+    padding: 8px 14px !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 8px !important;
     background: #ffffff !important;
@@ -692,7 +692,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
     font-weight: 600 !important;
     line-height: 1.3 !important;
     letter-spacing: 0 !important;
-    white-space: normal !important;
+    white-space: nowrap !important;
     text-align: center !important;
     cursor: pointer;
     transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
@@ -779,7 +779,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
     overflow-x: auto !important;
   }
   #app .studentLayout section.app-main:has(.competitive-analysis-page) .step-indicator .step-tab {
-    flex: 0 0 148px !important;
+    flex: 0 0 auto !important;
     max-width: none !important;
   }
 }
diff --git a/src/views/demand/consumer-behavior.vue b/src/views/demand/consumer-behavior.vue
index 2f2dc56..b7fb9e7 100644
--- a/src/views/demand/consumer-behavior.vue
+++ b/src/views/demand/consumer-behavior.vue
@@ -1,45 +1,49 @@
-<template>
+<template>
   <div class="consumer-behavior-page student-training-shell">
     <main class="training-core">
       <section class="task-header">
-        <div class="task-badge">市场洞察与需求分析</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <span class="task-badge">市场洞察与需求分析</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>
+        <div class="workbench-actions">
+          <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
+          <button type="button" class="outline-action" @click="exportOutcome">
+            <el-icon><Download /></el-icon>
+            导出实训成果
+          </button>
+        </div>
       </section>
 
-      <TrainingTaskBrief
-        :background="taskBackground"
-        :goals="taskGoals"
-        :requirements="taskRequirement"
-        :show-material="false"
-      />
-
       <section class="task-card">
-      <div class="workbench-head workbench-head--actions-only">
-          <div class="workbench-actions">
-            <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
-            <button type="button" class="outline-action" @click="exportOutcome">
-              <el-icon><Download /></el-icon>
-              导出实训成果
-            </button>
-          </div>
-        </div>
 
         <nav v-if="flowSteps.length" class="step-indicator" aria-label="消费者需求与行为步骤">
-          <template v-for="(step, index) in flowSteps" :key="step">
-            <button
-              type="button"
-              :class="['step-tab', { active: form.activeStep === index, complete: form.activeStep > index }]"
-              :aria-label="`第${index + 1}步：${step}`"
-              @click="setActiveStep(index)"
-            >
-              <span class="step-marker">{{ String(index + 1).padStart(2, '0') }}</span>
-              <span class="step-copy">
-                <strong class="step-name" :title="step">{{ step }}</strong>
-                <span class="step-action">{{ form.activeStep === index ? "当前步骤" : "点击切换" }} <span aria-hidden="true">→</span></span>
-              </span>
-            </button>
-            <span v-if="index < flowSteps.length - 1" class="step-connector" aria-hidden="true"></span>
-          </template>
+          <button
+            v-for="(step, index) in flowSteps"
+            :key="step"
+            type="button"
+            :class="['step-tab', { active: form.activeStep === index, complete: form.activeStep > index }]"
+            :aria-label="`第 ${index + 1} 步：${step}`"
+            :aria-current="form.activeStep === index ? 'step' : undefined"
+            :title="step"
+            @click="setActiveStep(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>
 
         <input
@@ -86,9 +90,9 @@
               </thead>
               <tbody>
                 <tr v-for="(hypothesis, index) in form.targetHypotheses" :key="index">
-                  <td><input v-model="hypothesis.targetGroup" class="hypothesis-input" placeholder="例如：职场白领（25-35岁）" /></td>
-                  <td><textarea v-model="hypothesis.keyFinding" class="hypothesis-textarea" placeholder="例如：高压工作、入睡困难、看重效率" /></td>
-                  <td><textarea v-model="hypothesis.coreHypothesis" class="hypothesis-textarea" placeholder="例如：是否更关注白噪声质量与智能场景联动？对价格的敏感度如何？" /></td>
+                  <td><el-input v-model="hypothesis.targetGroup" class="hypothesis-input" placeholder="例如：职场白领（25-35岁）" /></td>
+                  <td><el-input v-model="hypothesis.keyFinding" type="textarea" :autosize="{ minRows: 2 }" class="hypothesis-textarea" placeholder="例如：高压工作、入睡困难、看重效率" /></td>
+                  <td><el-input v-model="hypothesis.coreHypothesis" type="textarea" :autosize="{ minRows: 2 }" class="hypothesis-textarea" placeholder="例如：是否更关注白噪声质量与智能场景联动？对价格的敏感度如何？" /></td>
                 </tr>
               </tbody>
             </table>
@@ -119,13 +123,13 @@
               <tbody>
                 <tr v-for="(need, index) in form.kanoNeeds" :key="index">
                   <td class="kano-index">{{ index + 1 }}</td>
-                  <td><textarea v-model="need.feature" class="hypothesis-textarea kano-textarea" placeholder="示例：灯光亮度可无级调节" aria-label="功能" /></td>
+                  <td><el-input v-model="need.feature" type="textarea" :autosize="{ minRows: 2 }" class="hypothesis-textarea kano-textarea" placeholder="示例：灯光亮度可无级调节" aria-label="功能" /></td>
                   <td class="kano-select-cell">
                     <el-select v-model="need.kanoType" class="kano-select" placeholder="请选择类型" aria-label="对应KANO类型">
                       <el-option v-for="option in kanoTypeOptions" :key="option" :label="option" :value="option" />
                     </el-select>
                   </td>
-                  <td><textarea v-model="need.featureDirection" class="hypothesis-textarea kano-textarea" placeholder="示例：照明系统" aria-label="对应功能方向" /></td>
+                  <td><el-input v-model="need.featureDirection" type="textarea" :autosize="{ minRows: 2 }" class="hypothesis-textarea kano-textarea" placeholder="示例：照明系统" aria-label="对应功能方向" /></td>
                 </tr>
               </tbody>
             </table>
@@ -221,10 +225,10 @@
               <tbody>
                 <tr v-for="(row, index) in form.surveyReportRows" :key="index">
                   <td>
-                    <input v-model="row.title" class="survey-report-title-input" :placeholder="surveyReportTitlePlaceholder(index)" :aria-label="`第${index + 1}个报告模块标题`" />
+                    <el-input v-model="row.title" class="survey-report-title-input" :placeholder="surveyReportTitlePlaceholder(index)" :aria-label="`第${index + 1}个报告模块标题`" />
                   </td>
                   <td>
-                    <textarea v-model="row.content" class="survey-report-content-input" :placeholder="surveyReportContentPlaceholder(index)" :aria-label="`第${index + 1}个报告模块内容`" />
+                    <el-input v-model="row.content" type="textarea" :autosize="{ minRows: 3 }" class="survey-report-content-input" :placeholder="surveyReportContentPlaceholder(index)" :aria-label="`第${index + 1}个报告模块内容`" />
                   </td>
                 </tr>
               </tbody>
@@ -287,7 +291,6 @@ import { useRouter } from "vue-router";
 import { ArrowLeft, ArrowRight, CircleCheck, Document, Download, Upload } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { checkConsumerBehaviorStepOne, checkConsumerBehaviorStepTwo, checkConsumerBehaviorStepThree, checkConsumerBehaviorStepFour, getStudentTrainingAnswer, previewConsumerBehaviorQuestionnaireWord, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
@@ -491,6 +494,7 @@ function createSurveyReportRows() {
   return Array.from({ length: 5 }, () => ({ title: "", content: "" }));
 }
 
+const briefOpen = ref(false);
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费者需求与行为");
@@ -917,7 +921,36 @@ function downloadSurveyReportTemplate() {
 </script>
 
 <style scoped lang="scss">
+/*
+ * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次。
+ */
 .consumer-behavior-page {
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 语义色 */
+  --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-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;
+
   position: relative;
   z-index: 2;
   display: grid;
@@ -928,113 +961,114 @@ function downloadSurveyReportTemplate() {
   min-height: calc(100vh - 106px);
   margin: 0;
   padding: 24px 24px 32px;
-  color: #1e3a5f;
+  color: var(--student-text);
   background: #ffffff;
+  line-height: 1.55;
 }
 
 .training-core {
   min-width: 0;
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: 0 22px 48px rgba(30, 136, 229, 0.10), inset 0 1px 0 #cfe2f5;
-  backdrop-filter: blur(8px);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
 }
 
 .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;
-  margin-bottom: 12px;
-  padding: 4px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 30px;
-  color: #d6f6ff;
-  background: #cfe2f5;
-  font-size: var(--student-fs-caption);
+  align-items: center;
+  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: #1e3a5f;
+  color: var(--student-text);
   font-size: var(--student-fs-display);
-  line-height: 1.3;
-  font-weight: 900;
+  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,
-  li {
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
 
-  p,
-  ol {
-    margin: 0;
-  }
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 
-  ol {
-    padding-left: 18px;
+  &:hover {
+    text-decoration: underline;
   }
 }
 
-.subtitle-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
-}
-
-.subtitle-icon--spaced {
-  margin-top: 16px;
-}
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
 
-.task-card {
-  margin-top: 0;
-}
+  b {
+    color: var(--student-text);
+  }
 
-.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;
-}
+  ul {
+    display: grid;
+    gap: 4px;
+    margin: 0;
+    padding-left: 18px;
+  }
 
-.section-eyebrow {
-  margin: 0;
-  color: #42a5f5;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  line-height: 1.4;
+  p {
+    margin: 0;
+  }
 }
 
-.workbench-head h3 {
-  margin: 4px 0 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 800;
-  line-height: 1.3;
+.task-card {
+  margin-bottom: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 }
 
 .workbench-actions {
@@ -1042,259 +1076,105 @@ function downloadSurveyReportTemplate() {
   flex: 0 0 auto;
   flex-wrap: wrap;
   justify-content: flex-end;
-  margin-left: auto;
-  gap: 10px;
+  gap: 8px;
 }
 
-.workbench-description {
+.section-eyebrow {
   margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 400;
-  line-height: 1.8;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-caption);
+  font-weight: 800;
+  line-height: 1.4;
+  letter-spacing: 0.12em;
 }
 
 .outline-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-
-  &:hover {
-    transform: translateY(-1px);
-    border-color: #cfe2f5;
-    background: #bbdefb;
-  }
-}
-
-.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),
-    #f0f6fd;
-  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);
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
   font-family: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  text-align: left;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    border-color: #cfe2f5;
-    color: #1e3a5f;
-    background: #bbdefb;
-    box-shadow: 0 7px 18px rgba(30, 136, 229, 0.12), inset 0 1px 0 rgba(30, 136, 229, 0.10);
-
-    .step-action {
-      color: #1565c0;
-    }
-  }
-
-  &.active {
-    border-color: #cfe2f5;
-    color: #1e3a5f;
-    background: linear-gradient(115deg, #bbdefb, #bbdefb);
-    box-shadow: 0 0 18px rgba(30, 136, 229, 0.15), inset 0 1px 0 #cfe2f5;
-
-    .step-marker {
-      border-color: #42a5f5;
-      color: #1e3a5f;
-      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.30);
-    }
-  }
-
-  &.complete {
-    color: #2c4a6a;
-
-    .step-marker {
-      border-color: #cfe2f5;
-      color: #1e3a5f;
-      background: #42a5f5;
-      box-shadow: 0 0 12px rgba(30, 136, 229, 0.18);
-    }
-  }
-}
-
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #cfe2f5;
-  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;
-}
-
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-}
-
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  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: #1565c0;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  transition: color 0.2s ease;
-}
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
-.step-connector {
-  position: relative;
-  flex: 0 1 40px;
-  min-width: 18px;
-  height: 2px;
-  margin: 0 8px;
-  overflow: visible;
-  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, #42a5f5, #1e88e5);
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.20);
-
-  &::after {
-    border-color: #42a5f5;
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
 }
 
-.step-panel {
-  min-width: 0;
-}
-
 .step-card {
   margin-bottom: 0;
+  padding: 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 16px;
+  background: var(--student-card-bg);
 }
 
 .step-title-row {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   gap: 18px;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 
   h3 {
-    margin: 4px 0 0;
-    color: #1e3a5f;
+    margin: 2px 0 0;
+    color: var(--student-text);
     font-size: var(--student-fs-h2);
-    font-weight: 900;
-    line-height: 1.3;
+    font-weight: 700;
+    line-height: 1.35;
   }
 }
 
-.panel-title {
-  padding-bottom: 14px;
-  margin-bottom: 18px;
-  border-bottom: 1px solid #cfe2f5;
-}
-
-.panel-title span {
-  color: #6eeaff;
-  font-weight: 900;
-}
-
-.panel-title h4 {
-  margin: 8px 0 0;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  line-height: 1.2;
-}
-
 .task-desc {
-  margin: 14px 0 18px;
-  color: #2c4a6a;
+  margin: 0 0 14px;
+  color: #374151;
   font-size: var(--student-fs-body);
-  line-height: 1.8;
-}
-
-.questionnaire-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 12px;
+  line-height: 1.6;
 }
 
 .hypothesis-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 18px 28px;
-  margin-bottom: 20px;
+  gap: 10px 18px;
+  margin-bottom: 12px;
 }
 
-.hypothesis-desc {
+.hypothesis-desc,
+.kano-desc,
+.questionnaire-design-desc {
   margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
+  color: #374151;
+  font-size: var(--student-fs-body);
   font-weight: 600;
+  line-height: 1.55;
+}
+
+.training-eight-action {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  min-width: 124px;
+  height: 36px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
+  cursor: pointer;
 }
 
 .hypothesis-actions,
@@ -1302,7 +1182,7 @@ function downloadSurveyReportTemplate() {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 14px;
+  gap: 8px;
 }
 
 .hypothesis-actions {
@@ -1310,179 +1190,151 @@ function downloadSurveyReportTemplate() {
   grid-row: 2;
 }
 
-.hypothesis-actions :deep(.hypothesis-action),
-.kano-actions :deep(.hypothesis-action),
-.training-eight-action {
-  min-width: 146px;
-  height: 42px;
-  border: 1px solid #cfe2f5;
+:deep(.hypothesis-action),
+:deep(.training-eight-action) {
+  min-width: 120px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
   border-radius: 10px;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  font-size: var(--student-fs-button-lg);
-  font-weight: 800;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
 }
 
-.hypothesis-actions :deep(.hypothesis-action--quiet),
-.kano-actions :deep(.hypothesis-action--quiet) {
-  border-color: #cfe2f5;
-  color: #2c4a6a;
-  background: #bbdefb;
+:deep(.hypothesis-action:hover:not(.is-disabled)),
+:deep(.training-eight-action:hover:not(.is-disabled)) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
 }
 
-.training-eight-action {
-  grid-column: 2;
-  grid-row: 1;
-  justify-self: end;
-  min-width: 124px;
-  height: 38px;
+:deep(.hypothesis-action--quiet) {
+  border-color: var(--student-panel-border);
+  color: var(--student-text-secondary);
+  background: #ffffff;
+}
+
+:deep(.hypothesis-action--quiet:hover:not(.is-disabled)) {
+  border-color: var(--student-text-secondary);
+  background: #f9fafb;
+  color: var(--student-text-secondary);
 }
 
-.target-hypothesis-table-wrap {
+.target-hypothesis-table-wrap,
+.kano-table-wrap,
+.survey-report-table-wrap {
   overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: #f0f6fd;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
 }
 
-.target-hypothesis-table {
+.target-hypothesis-table,
+.kano-table,
+.survey-report-table {
   width: 100%;
-  min-width: 920px;
   border-collapse: collapse;
   table-layout: fixed;
 
   th,
   td {
-    padding: 12px;
-    border-right: 1px solid #cfe2f5;
-    border-bottom: 1px solid #cfe2f5;
-    vertical-align: middle;
+    padding: 10px 12px;
+    border-right: 1px solid var(--student-panel-border);
+    border-bottom: 1px solid var(--student-panel-border);
+    vertical-align: top;
+    text-align: left;
+    background: transparent;
   }
 
+  th:last-child,
+  td:last-child { border-right: 0; }
+  tr:last-child td { border-bottom: 0; }
+
   th {
-    color: #1e3a5f;
-    background: linear-gradient(100deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-h2);
+    color: var(--student-text);
+    background: #f9fafb;
+    font-size: var(--student-fs-body);
     font-weight: 800;
+    text-align: left;
   }
+}
 
+.target-hypothesis-table {
+  min-width: 920px;
   th:nth-child(1) { width: 28%; }
   th:nth-child(2) { width: 28%; }
   th:nth-child(3) { width: 44%; }
-
-  tr:last-child td { border-bottom: 0; }
-  th:last-child,
-  td:last-child { border-right: 0; }
 }
 
-.hypothesis-input,
-.hypothesis-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  border: 1px solid #cfe2f5;
-  outline: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.65;
+.kano-table {
+  min-width: 900px;
+  th:nth-child(1) { width: 9%; }
+  th:nth-child(2) { width: 42%; }
+  th:nth-child(3) { width: 25%; }
+  th:nth-child(4) { width: 24%; }
+  th { position: sticky; top: 0; z-index: 1; }
+}
 
-  &::placeholder { color: #5a7a9a; opacity: 1; }
-  &:focus {
-    border-color: #42a5f5;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
-  }
+.kano-index {
+  color: var(--student-accent-light);
+  font-weight: 700;
+  text-align: center;
 }
 
-.hypothesis-input {
-  height: 42px;
-  padding: 0 12px;
-  border-radius: 10px;
+.survey-report-table {
+  min-width: 760px;
+  th:first-child,
+  td:first-child { width: 22%; }
 }
 
+.hypothesis-input,
 .hypothesis-textarea {
-  min-height: 86px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  resize: vertical;
+  width: 100%;
 }
 
-.hypothesis-tip {
-  margin: 12px 0 0;
-  color: #42a5f5;
-  font-size: var(--student-fs-body-sm);
+.hypothesis-input :deep(.el-input__wrapper) {
+  min-height: 36px;
+  border: 1px solid #d6dae0;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: none;
 }
 
-.kano-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px 28px;
-  margin-bottom: 20px;
+.hypothesis-input :deep(.el-input__wrapper.is-focus) {
+  border-color: var(--student-accent-light);
+  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
 }
 
-.kano-desc {
-  max-width: 780px;
-  margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
-  font-weight: 600;
+.hypothesis-input :deep(.el-input__inner),
+.hypothesis-textarea :deep(.el-textarea__inner) {
+  color: var(--student-text);
+  font-size: var(--student-fs-body);
 }
 
-.kano-table-wrap {
-  max-height: 420px;
-  overflow: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: #f0f6fd;
-}
-
-.kano-table {
-  width: 100%;
-  min-width: 980px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th,
-  td {
-    padding: 8px 12px;
-    border-right: 1px solid #cfe2f5;
-    border-bottom: 1px solid #cfe2f5;
-    vertical-align: middle;
-  }
+.hypothesis-textarea :deep(.el-textarea__inner) {
+  min-height: 72px !important;
+  border: 1px solid #d6dae0;
+  border-radius: 10px;
+  padding: 8px 12px;
+  background: #ffffff;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
+  resize: vertical;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
 
-  th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    color: #1e3a5f;
-    background: linear-gradient(100deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-h2);
-    font-weight: 800;
+  &::placeholder { color: #9ca3af; }
+  &:focus {
+    border-color: var(--student-accent-light);
+    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
   }
-
-  th:nth-child(1) { width: 9%; }
-  th:nth-child(2) { width: 42%; }
-  th:nth-child(3) { width: 25%; }
-  th:nth-child(4) { width: 24%; }
-
-  tr:last-child td { border-bottom: 0; }
-  th:last-child,
-  td:last-child { border-right: 0; }
-}
-
-.kano-index {
-  color: #42a5f5;
-  font-weight: 800;
-  text-align: center;
-}
-
-.kano-textarea {
-  min-height: 44px;
 }
 
-.kano-select-cell {
-  text-align: center;
+.kano-textarea :deep(.el-textarea__inner) {
+  min-height: 44px !important;
 }
 
 .kano-select {
@@ -1490,44 +1342,54 @@ function downloadSurveyReportTemplate() {
 }
 
 .kano-select :deep(.el-select__wrapper) {
-  min-height: 38px;
-  border: 1px solid #cfe2f5;
+  min-height: 36px;
+  border: 1px solid #d6dae0;
   border-radius: 10px;
+  background: #ffffff;
   box-shadow: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
 }
 
 .kano-select :deep(.el-select__placeholder) {
-  color: #5a7a9a;
+  color: #9ca3af;
 }
 
-.questionnaire-design-head {
+.kano-select-cell { text-align: center; }
+
+.hypothesis-tip {
+  margin: 10px 0 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+}
+
+.kano-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 18px 28px;
-  margin-bottom: 20px;
+  gap: 10px 18px;
+  margin-bottom: 12px;
 }
 
-.questionnaire-design-desc {
-  max-width: 820px;
-  margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
-  font-weight: 600;
+.questionnaire-design-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px 18px;
+  margin-bottom: 12px;
 }
 
 .questionnaire-import-action,
-.questionnaire-editor-launcher__action {
-  min-width: 178px;
-  height: 44px;
-  border: 1px solid #cfe2f5;
+.questionnaire-editor-launcher__action,
+.questionnaire-template-action,
+.survey-report-template-action {
+  min-width: 140px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
   border-radius: 10px;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  font-size: var(--student-fs-button-lg);
-  font-weight: 800;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 700;
 }
 
 .questionnaire-imported-file {
@@ -1535,13 +1397,13 @@ function downloadSurveyReportTemplate() {
   align-items: center;
   gap: 10px;
   max-width: 100%;
-  min-height: 42px;
-  padding: 0 13px;
-  margin-bottom: 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 12px;
-  color: #2c4a6a;
-  background: #e3f2fd;
+  min-height: 36px;
+  padding: 0 12px;
+  margin-bottom: 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: #374151;
+  background: #fafbfc;
 
   span {
     overflow: hidden;
@@ -1552,10 +1414,12 @@ function downloadSurveyReportTemplate() {
   button {
     flex: 0 0 auto;
     border: 0;
-    color: #42a5f5;
+    color: var(--student-accent);
     background: transparent;
     cursor: pointer;
-    font-weight: 800;
+    font-weight: 600;
+    font-size: 12px;
+    &:hover { text-decoration: underline; }
   }
 }
 
@@ -1563,121 +1427,105 @@ function downloadSurveyReportTemplate() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 32px;
-  min-height: 190px;
-  padding: 32px 40px;
-  overflow: hidden;
-  border: 1px solid #cfe2f5;
-  border-radius: 20px;
-  background:
-    radial-gradient(circle at 86% 18%, #e3f2fd, transparent 34%),
-    linear-gradient(115deg, #e3f2fd, #f0f6fd);
+  gap: 24px;
+  min-height: auto;
+  padding: 16px 20px;
+  margin-bottom: 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #fafbfc;
 }
 
 .questionnaire-editor-launcher__copy {
-  position: relative;
-  z-index: 1;
+  display: grid;
+  gap: 4px;
 
   h4 {
-    margin: 7px 0;
-    color: #1e3a5f;
-    font-size: 23px;
+    margin: 0;
+    color: var(--student-text);
+    font-size: var(--student-fs-h1);
+    font-weight: 700;
   }
 
   p {
-    max-width: 600px;
     margin: 0;
-    color: #5a7a9a;
-    line-height: 1.7;
+    color: var(--student-text-secondary);
+    font-size: var(--student-fs-body-sm);
+    line-height: 1.55;
   }
 }
 
-.questionnaire-editor-launcher__action {
-  flex: 0 0 auto;
-  min-width: 170px;
-  height: 52px;
-}
+.questionnaire-editor-launcher__action { flex: 0 0 auto; }
 
 .questionnaire-editor-summary {
-  margin: 13px 0 0;
-  color: #42a5f5;
+  margin: 0 0 12px;
+  color: var(--student-text-secondary);
   font-size: var(--student-fs-body-sm);
 }
 
 .questionnaire-template-guide {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
-  margin-top: 22px;
-  padding: 18px 20px;
-  border-left: 3px solid #42a5f5;
-  border-radius: 0 14px 14px 0;
-  color: #2c4a6a;
-  background: #e3f2fd;
+  gap: 18px;
+  margin-top: 10px;
+  padding: 12px 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  color: #374151;
+  background: #fafbfc;
 
   h5,
   p {
-    margin: 0 0 5px;
-    line-height: 1.72;
+    margin: 0 0 4px;
+    line-height: 1.6;
   }
 
   h5 {
-    color: #1e3a5f;
-    font-size: 15px;
+    color: var(--student-text);
+    font-size: var(--student-fs-body);
+    font-weight: 700;
   }
 }
 
-.questionnaire-template-action {
-  flex: 0 0 auto;
-  min-width: 132px;
-  height: 42px;
-  border: 1px solid #cfe2f5;
-  border-radius: 10px;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  font-weight: 800;
-}
-
 :deep(.questionnaire-editor-dialog .el-dialog),
 :deep(.questionnaire-preview-dialog .el-dialog) {
-  overflow: hidden;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  color: #1e3a5f;
+  border-radius: 12px;
+  color: var(--student-text);
   background: #ffffff;
 }
 
 :deep(.questionnaire-editor-dialog .el-dialog__title),
 :deep(.questionnaire-preview-dialog .el-dialog__title) {
-  color: #1e3a5f;
-  font-weight: 800;
+  color: var(--student-text);
+  font-weight: 700;
 }
 
 .questionnaire-editor-dialog__intro {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 18px;
+  gap: 16px;
+  margin-bottom: 12px;
 
   p {
     margin: 0;
-    color: #5a7a9a;
-    line-height: 1.7;
+    color: var(--student-text-secondary);
+    font-size: var(--student-fs-body-sm);
   }
 }
 
 .questionnaire-editor-add {
-  flex: 0 0 auto;
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-weight: 700;
 }
 
 .questionnaire-question-list {
   display: grid;
-  gap: 12px;
+  gap: 10px;
   max-height: min(58vh, 700px);
   padding-right: 5px;
   overflow: auto;
@@ -1686,454 +1534,148 @@ function downloadSurveyReportTemplate() {
 .questionnaire-question-card {
   display: grid;
   grid-template-columns: 36px minmax(0, 1fr) auto;
-  gap: 12px;
+  gap: 10px;
   align-items: start;
-  padding: 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  background: #e3f2fd;
+  padding: 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
 }
 
 .questionnaire-question-card__number {
   display: grid;
   place-items: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid rgba(80, 222, 255, 0.45);
-  border-radius: 50%;
-  color: #74e5ff;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: var(--student-text-secondary);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .questionnaire-question-card__fields {
   display: grid;
-  grid-template-columns: 180px 180px minmax(0, 1fr);
-  gap: 10px;
+  grid-template-columns: 160px 160px minmax(0, 1fr);
+  gap: 8px;
 
   :deep(.el-select__wrapper),
   :deep(.el-input__wrapper) {
-    min-height: 38px;
-    border: 1px solid #cfe2f5;
+    min-height: 34px;
+    border: 1px solid #d6dae0;
     box-shadow: none;
-    color: #1e3a5f;
-    background: #f0f6fd;
+    background: #ffffff;
+    border-radius: 8px;
   }
 
-  :deep(.el-input__inner) { color: #1e3a5f; }
+  :deep(.el-input__inner) { color: var(--student-text); }
 }
 
 .likert-tip {
   grid-column: 1 / -1;
-  margin: 0;
-  color: #42a5f5;
+  margin: 4px 0 0;
+  color: var(--student-text-secondary);
   font-size: var(--student-fs-caption);
 }
 
 .questionnaire-question-card__remove {
-  padding: 8px 10px;
-  border: 1px solid #cfe2f5;
+  padding: 6px 10px;
+  border: 1px solid var(--student-panel-border);
   border-radius: 8px;
-  color: #5a7a9a;
-  background: transparent;
+  color: var(--student-text-secondary);
+  background: #ffffff;
   cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-  }
+  font-size: 12px;
+  font-weight: 600;
+  &:hover:not(:disabled) { border-color: var(--student-accent); color: var(--student-accent); }
+  &:disabled { cursor: not-allowed; opacity: 0.45; }
 }
 
 .questionnaire-word-preview {
   max-height: min(62vh, 760px);
-  padding: 20px;
+  padding: 16px;
   overflow: auto;
-  border: 1px solid rgba(77, 167, 220, 0.28);
-  border-radius: 12px;
-  color: #1e3a5f;
-  background: #f0f6fd;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #fafbfc;
   white-space: pre-wrap;
-  line-height: 1.85;
+  line-height: 1.75;
 }
 
-.questionnaire-preview-empty {
-  color: #5a7a9a;
-}
+.questionnaire-preview-empty { color: var(--student-text-secondary); }
 
 .survey-report-desc {
   max-width: 1050px;
-  margin-bottom: 24px;
-}
-
-.survey-report-table-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 16px;
-  background: #f0f6fd;
-}
-
-.survey-report-table {
-  width: 100%;
-  min-width: 760px;
-  border-collapse: collapse;
-
-  th,
-  td {
-    border: 1px solid #cfe2f5;
-  }
-
-  th {
-    padding: 14px 18px;
-    color: #1e3a5f;
-    background: #bbdefb;
-    font-size: var(--student-fs-body);
-    letter-spacing: 0.04em;
-  }
-
-  th:first-child,
-  td:first-child {
-    width: 22%;
-  }
-
-  td {
-    padding: 10px;
-    background: #f0f6fd;
-  }
+  margin-bottom: 12px;
 }
 
 .survey-report-title-input,
 .survey-report-content-input {
-  display: block;
   width: 100%;
-  border: 0;
-  outline: 0;
-  color: #1e3a5f;
-  background: transparent;
-  font: inherit;
+}
 
-  &::placeholder {
-    color: #5a7a9a;
-  }
+.survey-report-title-input :deep(.el-input__wrapper) {
+  min-height: 36px;
+  border: 1px solid #d6dae0;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: none;
 }
 
-.survey-report-title-input {
-  min-height: 88px;
-  padding: 8px;
-  text-align: center;
-  font-weight: 700;
+.survey-report-title-input :deep(.el-input__inner) {
+  color: var(--student-text);
+  font-size: var(--student-fs-body);
+  font-weight: 600;
 }
 
-.survey-report-content-input {
-  min-height: 88px;
+.survey-report-content-input :deep(.el-textarea__inner) {
+  min-height: 72px !important;
+  border: 1px solid #d6dae0;
+  border-radius: 10px;
   padding: 8px 12px;
+  background: #ffffff;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
   resize: vertical;
-  line-height: 1.75;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+
+  &::placeholder { color: #9ca3af; }
+  &:focus {
+    border-color: var(--student-accent-light);
+    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.12);
+  }
 }
 
 .survey-report-guide {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 28px;
-  margin-top: 26px;
-  padding: 20px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #5a7a9a;
-  background: linear-gradient(105deg, #f0f6fd, #f0f6fd);
+  gap: 18px;
+  margin-top: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  color: #374151;
+  background: #fafbfc;
 
   h5,
   p {
     margin: 0;
-    line-height: 1.85;
+    line-height: 1.6;
   }
 
   h5 {
-    color: #1e3a5f;
+    color: var(--student-text);
     font-size: var(--student-fs-body);
+    font-weight: 700;
+    margin-bottom: 4px;
   }
 }
 
-.survey-report-template-action {
-  flex: 0 0 auto;
-  min-width: 146px;
-  min-height: 42px;
-}
-
-.questionnaire-desc {
-  flex: 1;
-  margin: 0;
-}
-
-.questionnaire-upload {
-  min-width: 0;
-}
-
-.questionnaire-file {
-  margin-bottom: 10px;
-}
-
-.questionnaire-field {
-  margin-top: 0;
-}
-
-.large-textarea.questionnaire-textarea {
-  height: 920px;
-  min-height: 920px;
-  white-space: pre-wrap;
-  overflow: auto;
-}
-
-.questionnaire-textarea[contenteditable="true"] {
-  resize: none;
-  white-space: normal;
-}
-
-.questionnaire-textarea[contenteditable="true"]:empty::before {
-  color: #5a7a9a;
-  content: attr(data-placeholder);
-}
-
-.questionnaire-textarea :deep(h4) {
-  margin: 0 0 26px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
-}
-
-.questionnaire-textarea :deep(p) {
-  margin: 0 0 10px;
-}
-
-.questionnaire-textarea :deep(strong) {
-  display: inline-block;
-  margin-top: 16px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-}
-
-.questionnaire-textarea :deep(table) {
-  width: min(820px, 100%);
-  margin: 10px 0 24px;
-  border-collapse: collapse;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body);
-  table-layout: fixed;
-}
-
-.questionnaire-textarea :deep(th),
-.questionnaire-textarea :deep(td) {
-  height: 38px;
-  padding: 6px 10px;
-  border: 1px solid #cfe2f5;
-  text-align: left;
-  vertical-align: middle;
-}
-
-.questionnaire-textarea :deep(th) {
-  color: #2c4a6a;
-  background: #bbdefb;
-  font-weight: 900;
-}
-
-.questionnaire-textarea :deep(th:first-child),
-.questionnaire-textarea :deep(td:first-child) {
-  width: 180px;
-  font-weight: 800;
-}
-
-.field-block {
-  display: block;
-  margin-top: 18px;
-}
-
-.field-block > span {
-  display: block;
-  margin-bottom: 10px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
-}
-
-.large-textarea {
-  width: 100%;
-  min-height: 180px;
-  padding: 16px 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-  transition: box-shadow 0.16s ease, border-color 0.16s ease;
-}
-
-.large-textarea::placeholder {
-  color: #5a7a9a;
-  opacity: 0.9;
-}
-
-.large-textarea:focus {
-  border-color: rgba(30, 136, 229, 0.50);
-  box-shadow: inset 0 0 0 1px rgba(30, 136, 229, 0.25), 0 0 20px rgba(30, 136, 229, 0.12);
-}
-
-.file-input {
-  display: none;
-}
-
-.upload-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-  margin-top: 18px;
-}
-
-.upload-action,
-.mini-upload {
-  min-height: 40px;
-  padding: 0 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  font-weight: 800;
-}
-
-.file-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  max-width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1565c0;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 700;
-
-  span {
-    overflow-wrap: anywhere;
-  }
-}
-
-.data-board {
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
-}
-
-.data-board pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: #2c4a6a;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.78;
-}
-
-.visual-group {
-  margin-top: 22px;
-}
-
-.visual-group h5 {
-  margin: 0 0 12px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-}
-
-.analysis-heading {
-  margin: 28px 0 16px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
-  line-height: 1.8;
-}
-
-:deep(.report-fields) {
-  display: grid;
-  gap: 18px;
-}
-
-:deep(.report-fields .field-block) {
-  display: block;
-  width: 100%;
-  margin-top: 0;
-}
-
-:deep(.report-fields .field-block > span) {
-  display: block;
-  margin-bottom: 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
-}
-
-:deep(.report-fields .large-textarea) {
-  display: block;
-  width: 100%;
-  min-height: 132px;
-  padding: 14px 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-  box-sizing: border-box;
-}
-
-:deep(.report-fields .large-textarea:placeholder-shown) {
-  color: #5a7a9a;
-}
-
-:deep(.report-fields .large-textarea:focus) {
-  border-color: rgba(30, 136, 229, 0.50);
-  box-shadow: inset 0 0 0 1px rgba(30, 136, 229, 0.25), 0 0 20px rgba(30, 136, 229, 0.12);
-}
-
-:deep(.report-fields .large-textarea::placeholder) {
-  color: #5a7a9a;
-  opacity: 1;
-}
-
-.visual-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.visual-card {
-  min-height: 120px;
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 20px;
-  background: #f0f6fd;
-}
-
-.visual-card span {
-  display: block;
-  margin-bottom: 14px;
-  color: #1e3a5f;
-  font-weight: 900;
-}
-
-.visual-card small {
-  display: block;
-  margin-top: 10px;
-  color: #5a7a9a;
-  word-break: break-all;
-}
+.file-input { display: none; }
 
 .step-actions {
   display: flex;
@@ -2141,102 +1683,33 @@ function downloadSurveyReportTemplate() {
   justify-content: center;
   gap: 14px;
   margin-top: 22px;
-  margin-bottom: 36px;
 }
 
 .nav-action {
-  min-height: 40px;
+  min-height: 36px;
   padding: 0 18px;
-  border-color: #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
+  border-radius: 10px;
   font-size: var(--student-fs-button);
-  font-weight: 800;
-}
-
-.nav-action--next {
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-}
-
-.nav-action--save {
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-}
-
-.nav-action.is-disabled {
-  opacity: 0.45;
+  font-weight: 700;
 }
 
 .training-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
-}
-
-.training-actions :deep(.training-action) {
-  min-width: 172px;
-  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;
-}
-
-.training-actions :deep(.training-action span) {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-size: inherit;
-  line-height: 1;
-}
-
-.training-actions :deep(.training-action--submit),
-.training-actions :deep(.training-action--reset) {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
-}
-
-.training-actions :deep(.training-action:hover:not(.is-disabled)) {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: rgba(18, 85, 116, 0.78);
+  gap: 14px;
+  margin-top: 14px;
 }
 
 @media (max-width: 1200px) {
   .consumer-behavior-page {
     grid-template-columns: 1fr;
   }
-
-  .visual-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 }
 
 @media (max-width: 900px) {
-  .consumer-behavior-page {
-    padding: 14px 14px 18px;
-  }
-
-  .training-core {
-    padding: 18px;
-    border-radius: 24px;
-  }
+  .consumer-behavior-page { padding: 14px 14px 18px; }
 
-  .workbench-head,
   .workbench-actions,
   .step-title-row,
   .step-actions,
@@ -2245,136 +1718,273 @@ function downloadSurveyReportTemplate() {
     align-items: stretch;
   }
 
-  .workbench-actions :deep(.material-download),
-  .workbench-actions .outline-action {
-    width: 100%;
-  }
-
-  .hypothesis-head {
-    grid-template-columns: 1fr;
-  }
+  .hypothesis-head { grid-template-columns: 1fr; }
 
   .training-eight-action {
     grid-column: auto;
     grid-row: auto;
-    width: 100%;
+    justify-self: stretch;
   }
 
   .hypothesis-actions,
-  .kano-actions {
-    justify-content: stretch;
-  }
+  .kano-actions { justify-content: stretch; }
 
   .hypothesis-actions :deep(.hypothesis-action),
-  .kano-actions :deep(.hypothesis-action) {
-    flex: 1;
-  }
-
-  .kano-head {
-    align-items: stretch;
-    flex-direction: column;
-  }
+  .kano-actions :deep(.hypothesis-action) { flex: 1; }
 
+  .kano-head,
   .questionnaire-design-head,
   .questionnaire-editor-launcher,
-  .questionnaire-template-guide,
-  .questionnaire-editor-dialog__intro {
+  .questionnaire-template-guide {
     align-items: stretch;
     flex-direction: column;
   }
 
-  .questionnaire-import-action,
-  .questionnaire-editor-launcher__action,
-  .questionnaire-template-action {
-    width: 100%;
-  }
-
-  .questionnaire-editor-launcher {
-    padding: 26px;
-  }
-
-  .questionnaire-question-card {
-    grid-template-columns: 32px minmax(0, 1fr);
-  }
-
-  .questionnaire-question-card__fields {
-    grid-template-columns: 1fr;
-  }
+  .questionnaire-question-card { grid-template-columns: 32px minmax(0, 1fr); }
+  .questionnaire-question-card__fields { grid-template-columns: 1fr; }
+  .questionnaire-question-card__remove { grid-column: 2; justify-self: end; }
+  .survey-report-guide { flex-direction: column; }
+  .questionnaire-editor-dialog__intro { flex-direction: column; align-items: stretch; }
+}
 
-  .questionnaire-question-card__remove {
-    grid-column: 2;
-    justify-self: end;
-  }
+@media (max-width: 760px) {
+  .consumer-behavior-page { padding: 10px 10px 14px; }
+}
+</style>
 
-  .survey-report-guide {
-    flex-direction: column;
-  }
+<style lang="scss">
+/* === 画布背景 === */
+#app .studentLayout section.app-main:has(.consumer-behavior-page) {
+  background: #ffffff !important;
+}
+
+/* === 步骤导航：按钮切换风（foundation 同款） === */
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 
-  .survey-report-template-action {
-    width: 100%;
-  }
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-bar { display: none !important; }
+
+    .step-no {
+      position: static !important;
+      flex: 0 0 auto !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      min-width: 22px !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      letter-spacing: 0 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+
+      &::after { display: none !important; }
+    }
 
-  .step-indicator {
-    align-items: stretch;
-    flex-direction: column;
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    overflow: visible;
-    border-radius: 20px;
-  }
+    .step-name { color: inherit !important; }
 
-  .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
-  }
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
 
-  .step-connector {
-    flex: 0 0 22px;
-    width: 2px;
-    height: 22px;
-    margin-left: 29px;
-    text-align: center;
-    writing-mode: vertical-rl;
-  }
+      .step-no { background: #1f2937 !important; color: #ffffff !important; }
+    }
 
-  .step-actions :deep(.nav-action),
-  .training-actions :deep(.training-action) {
-    width: 100%;
-  }
-}
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
 
-@media (max-width: 760px) {
-  .training-core,
-  .task-card,
-  .step-card {
-    padding: 18px;
-  }
+      .step-no { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
 
-  .questionnaire-head {
-    flex-direction: column;
-  }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
 
-  .questionnaire-upload {
-    width: 100%;
-  }
+        .step-no { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
 
-  .training-actions {
-    gap: 14px;
-  }
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
 
-  .training-actions :deep(.training-action) {
-    width: 100%;
-  }
+      .step-no { background: #ffffff !important; color: #1f2937 !important; }
 
-  .visual-grid {
-    grid-template-columns: 1fr;
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
   }
 }
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+
+/* 窄屏：横向滑动 */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator {
+    overflow-x: auto !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+  }
+
+  #app .studentLayout section.app-main:has(.consumer-behavior-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
+
+/* === 全页单选墨黑 === */
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .el-radio__input.is-checked .el-radio__inner {
+  border-color: #1f2937 !important;
+  background: #1f2937 !important;
+}
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .el-radio__input.is-checked .el-radio__inner::after {
+  background: #ffffff !important;
+}
+
+/* === training-action === */
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action,
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action {
+  min-width: 140px !important;
+  min-height: 36px !important;
+  height: 36px !important;
+  padding: 0 20px !important;
+  border: 1px solid rgba(31, 41, 55, 0.4) !important;
+  border-radius: 10px !important;
+  color: var(--student-accent) !important;
+  background: #ffffff !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  letter-spacing: 0 !important;
+  text-shadow: none !important;
+  box-shadow: none !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action--submit,
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action--submit {
+  border-color: var(--student-accent) !important;
+  color: #ffffff !important;
+  background: var(--student-accent) !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action:hover:not(.is-disabled),
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action:hover:not(.is-disabled) {
+  transform: translateY(-1px) !important;
+  border-color: var(--student-accent) !important;
+  background: var(--student-accent-soft) !important;
+  color: var(--student-accent) !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions .el-button.training-action--submit:hover:not(.is-disabled),
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .training-actions button.training-action--submit:hover:not(.is-disabled) {
+  border-color: var(--student-accent-deep) !important;
+  background: var(--student-accent-deep) !important;
+  color: #ffffff !important;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
+}
+
+/* === nav-action (step-actions) === */
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action {
+  min-height: 36px !important;
+  padding: 0 18px !important;
+  border: 1px solid rgba(31, 41, 55, 0.4) !important;
+  border-radius: 10px !important;
+  color: var(--student-accent) !important;
+  background: #ffffff !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  box-shadow: none !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(.consumer-behavior-page) .step-actions .el-button.nav-action:hover:not(.is-disabled) {
+  transform: translateY(-1px) !important;
+  border-color: var(--student-accent) !important;
+  background: var(--student-accent-soft) !important;
+  color: var(--student-accent) !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action:disabled,
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action.is-disabled {
+  opacity: 0.45 !important;
+  cursor: not-allowed !important;
+  transform: none !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--next {
+  border-color: var(--student-accent) !important;
+  color: #ffffff !important;
+  background: var(--student-accent) !important;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--next:hover:not(.is-disabled) {
+  border-color: var(--student-accent-deep) !important;
+  background: var(--student-accent-deep) !important;
+  color: #ffffff !important;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--save {
+  border-color: #e5e7eb !important;
+  color: #374151 !important;
+  background: #f3f4f6 !important;
+  font-weight: 700 !important;
+}
+
+#app .studentLayout section.app-main:has(.consumer-behavior-page) .step-actions .el-button.nav-action--save:hover:not(.is-disabled) {
+  border-color: #d1d5db !important;
+  background: #e5e7eb !important;
+  color: var(--student-accent) !important;
+  box-shadow: none !important;
 }
 </style>
diff --git a/src/views/demand/consumer-scenario.vue b/src/views/demand/consumer-scenario.vue
index 36ca337..2e25fa9 100644
--- a/src/views/demand/consumer-scenario.vue
+++ b/src/views/demand/consumer-scenario.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="consumer-scenario-page student-training-shell">
-    <main class="training-core">
+    <main class="consumer-scenario-core">
       <section class="task-header">
-        <div class="task-badge">市场洞察与需求分析</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <div class="task-badge">市场洞察与需求分析</div>
+          <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="task-card">
+      <section class="consumer-scenario-workbench">
       <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
             <TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" />
@@ -259,7 +266,6 @@ import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Download, UploadFilled } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { checkConsumerScenarioStepOne, checkConsumerScenarioStepTwo, checkConsumerScenarioStepThree, checkConsumerScenarioStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
@@ -467,6 +473,7 @@ function createForm() {
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "消费场景解构");
+const briefOpen = ref(false);
 const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
 const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals));
 const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
@@ -900,419 +907,282 @@ function exportOutcome() {
 </script>
 
 <style scoped lang="scss">
+/* ===== 页面级令牌（墨黑极简主题） ===== */
 .consumer-scenario-page {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  width: 100%;
-  max-width: 100%;
-  min-height: calc(100vh - 106px);
-  margin: 0;
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --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-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);
   background: #ffffff;
 }
 
-.training-core {
+/* 核心容器：透明 grid，无边框/背景/阴影 */
+.consumer-scenario-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
   min-width: 0;
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: 0 22px 48px rgba(30, 60, 100, 0.10), inset 0 1px 0 rgba(30, 136, 229, 0.08);
-  backdrop-filter: blur(8px);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
+/* 任务头：独立卡片 */
 .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;
+  flex: 1 1 auto;
 }
 
 .task-badge {
   display: inline-flex;
-  margin-bottom: 12px;
-  padding: 4px 14px;
-  border: 1px solid #9cc8ef;
-  border-radius: 30px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-size: var(--student-fs-caption);
+  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: #1e3a5f;
+  color: var(--student-text);
   font-size: var(--student-fs-display);
-  line-height: 1.3;
-  font-weight: 900;
-}
-
-.goal-bg,
-.task-card,
-.step-card {
-  margin-bottom: 28px;
-  padding: 18px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.goal-bg {
-  p,
-  li {
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
-
-  p,
-  ol {
-    margin: 0;
-  }
-
-  ol {
-    padding-left: 18px;
-  }
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.subtitle-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.subtitle-icon--spaced {
-  margin-top: 16px;
-}
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 
-.task-card {
-  margin-top: 0;
+  &: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;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
 
-.section-eyebrow {
-  margin: 0;
-  color: #1e88e5;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  line-height: 1.4;
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
 }
 
-.workbench-head h3 {
-  margin: 4px 0 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 800;
-  line-height: 1.3;
+/* 顶部任务工具栏（保留 DOM，按钮由全局接管） */
+.workbench-head--actions-only {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  max-width: 100%;
+  margin: 0 0 14px;
+  padding: 0;
+  border: 0;
 }
 
 .workbench-actions {
   display: flex;
-  flex: 0 0 auto;
   flex-wrap: wrap;
   justify-content: flex-end;
-  margin-left: auto;
   gap: 10px;
 }
 
-.workbench-description {
+/* workbench 容器：透明 */
+.consumer-scenario-workbench {
   margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 400;
-  line-height: 1.8;
-}
-
-.outline-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-
-  &:hover {
-    transform: translateY(-1px);
-    border-color: #1e88e5;
-    background: #bbdefb;
-  }
-}
-
-.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, #eef5fc, #eef5fc),
-    #f0f6fd;
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.08);
-  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;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  text-align: left;
-  cursor: pointer;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    border-color: #1e88e5;
-    color: #1e3a5f;
-    background: #e3f2fd;
-    box-shadow: 0 7px 18px rgba(30, 60, 100, 0.10), inset 0 1px 0 rgba(30, 136, 229, 0.16);
-
-    .step-action {
-      color: #1565c0;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid #1e88e5;
-    outline-offset: 2px;
-  }
-
-  &.active {
-    border-color: #1e88e5;
-    color: #1e3a5f;
-    background: linear-gradient(115deg, rgba(30, 136, 229, 0.14), rgba(30, 136, 229, 0.08));
-    box-shadow: 0 0 18px rgba(30, 136, 229, 0.22), inset 0 1px 0 rgba(30, 136, 229, 0.2);
-
-    .step-marker {
-      border-color: #1e88e5;
-      color: #ffffff;
-      background: linear-gradient(135deg, #1e88e5, #1565c0);
-      box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.14), 0 0 18px rgba(30, 136, 229, 0.4);
-    }
-  }
-
-  &.complete {
-    color: #2c4a6a;
-
-    .step-marker {
-      border-color: #1e88e5;
-      color: #ffffff;
-      background: #1e88e5;
-      box-shadow: 0 0 12px #1e88e5;
-    }
-  }
-}
-
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #9cc8ef;
-  border-radius: 50%;
-  color: #5a7a9a;
-  background: #f0f6fd;
-  box-shadow: inset 0 0 12px rgba(30, 136, 229, 0.08);
-  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;
-}
-
-.step-copy {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-}
-
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  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: #1565c0;
-  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;
-  overflow: visible;
-  background: #cfe2f5;
-}
-
-.step-connector::after {
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  width: 6px;
-  height: 6px;
-  border-top: 1px solid #1e88e5;
-  border-right: 1px solid #1e88e5;
-  content: "";
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.step-tab.complete + .step-connector {
-  background: #1e88e5;
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.3);
-
-  &::after {
-    border-color: #1e88e5;
-  }
+  gap: 10px;
 }
 
-.step-card {
-  margin-bottom: 0;
+/* step-card：透明容器 */
+.consumer-scenario-step-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
 }
 
 .step-title-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 18px;
-  margin-bottom: 18px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #cfe2f5;
-
-  h3 {
-    margin: 4px 0 0;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h2);
-    font-weight: 900;
-    line-height: 1.3;
-  }
+  gap: 12px;
 }
 
-.scenario-step-section + .scenario-step-section {
-  margin-top: 0;
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.journey-head {
+.section-eyebrow {
   margin: 0;
-  padding-bottom: 18px;
-  border-bottom: 1px solid #cfe2f5;
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-.journey-head h4 {
-  margin: 0;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
+/* ===== 引导区 / intro 块 ===== */
+.journey-sort-head,
+.journey-analysis-intro,
+.journey-map-intro,
+.journey-optimization-intro {
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  background: var(--student-accent-soft);
+  border-radius: 0 8px 8px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
 .journey-sort-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 22px;
-  padding: 20px;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: linear-gradient(120deg, #eef5fc, #f8fbfe);
-
-  h4 {
-    margin: 5px 0 8px;
-    color: #1e3a5f;
-    font-size: 21px;
-    line-height: 1.35;
-  }
+  gap: 16px;
+}
 
-  p {
-    max-width: 700px;
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.75;
-  }
+.journey-sort-head h4,
+.journey-analysis-intro h4,
+.journey-map-intro h4,
+.journey-optimization-intro h4 {
+  margin: 4px 0 8px;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.journey-sort-head p,
+.journey-analysis-intro p,
+.journey-map-intro p,
+.journey-optimization-intro p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
+/* kicker → section-eyebrow 同款 */
 .journey-sort-kicker {
-  color: #1e88e5 !important;
-  font-size: var(--student-fs-caption) !important;
-  font-weight: 900;
-  letter-spacing: 0.08em;
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.journey-map-intro span,
+.journey-optimization-intro span {
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
+/* 检查排序按钮 */
 .journey-check-action {
   flex: 0 0 auto;
-  min-height: 42px;
+  min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #1e88e5;
+  border: 1px solid var(--student-accent);
   border-radius: 10px;
-  color: #1e3a5f;
-  background: linear-gradient(135deg, #1e88e5, #1565c0);
-  box-shadow: 0 8px 20px rgba(30, 136, 229, 0.2);
+  color: #ffffff;
+  background: var(--student-accent);
   font: inherit;
   font-size: var(--student-fs-button);
-  font-weight: 800;
+  font-weight: 700;
   cursor: pointer;
+  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
 
   &:hover:not(:disabled) {
+    background: var(--student-accent-deep);
+    border-color: var(--student-accent-deep);
     transform: translateY(-1px);
-    background: linear-gradient(135deg, #42a5f5, #1565c0);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.18);
   }
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.64;
+    opacity: 0.5;
   }
 }
 
+/* ===== 旅程排序卡片 ===== */
 .journey-sort-list {
   display: grid;
   grid-template-columns: repeat(9, minmax(0, 1fr));
@@ -1328,18 +1198,18 @@ function exportOutcome() {
   min-width: 0;
   grid-template-rows: auto 1fr auto;
   padding: 16px;
-  border: 1px solid #cfe2f5;
+  border: 1px solid var(--student-panel-border);
   border-radius: 14px;
-  color: #1e3a5f;
-  background: linear-gradient(150deg, #e3f2fd, #ffffff);
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.1), 0 12px 24px rgba(30, 60, 100, 0.06);
+  color: var(--student-text);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
   cursor: grab;
   transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
 
   &:hover {
-    transform: translateY(-3px);
-    border-color: #1e88e5;
-    box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.16), 0 16px 30px rgba(30, 60, 100, 0.12), 0 0 20px rgba(30, 136, 229, 0.14);
+    transform: translateY(-2px);
+    border-color: var(--student-accent);
+    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.08);
   }
 
   &.dragging {
@@ -1349,10 +1219,11 @@ function exportOutcome() {
 }
 
 .journey-card-order {
-  color: #1e88e5;
-  font-size: var(--student-fs-caption);
-  font-weight: 900;
-  letter-spacing: 0.08em;
+  color: var(--student-text-secondary);
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
 }
 
 .journey-card-copy {
@@ -1365,13 +1236,13 @@ function exportOutcome() {
 
   strong {
     margin-bottom: 8px;
-    color: #1e3a5f;
+    color: var(--student-text);
     font-size: var(--student-fs-body);
     line-height: 1.45;
   }
 
   span {
-    color: #2c4a6a;
+    color: var(--student-text-secondary);
     font-size: var(--student-fs-caption);
     line-height: 1.65;
   }
@@ -1387,198 +1258,182 @@ function exportOutcome() {
     width: 26px;
     height: 26px;
     place-items: center;
-    border: 1px solid #cfe2f5;
+    border: 1px solid var(--student-panel-border);
     border-radius: 7px;
-    color: #2c4a6a;
-    background: #f0f6fd;
+    color: var(--student-text-secondary);
+    background: #ffffff;
     font: inherit;
-    font-weight: 900;
+    font-weight: 700;
     cursor: pointer;
+    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
 
     &:hover:not(:disabled) {
-      border-color: #1e88e5;
-      background: #1e88e5;
+      border-color: var(--student-accent);
+      color: var(--student-accent);
+      background: var(--student-accent-soft);
     }
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.28;
+      opacity: 0.4;
     }
   }
 }
 
 .journey-sort-arrow {
   justify-self: center;
-  color: #42a5f5;
+  color: var(--student-text-secondary);
   font-size: var(--student-fs-display);
-  font-weight: 900;
+  font-weight: 700;
 }
 
+/* ===== 校验消息 ===== */
 .journey-check-message {
-  margin: 20px 0 0;
+  margin: 14px 0 0;
   padding: 11px 14px;
-  border: 1px solid #e8a33d;
-  border-radius: 10px;
-  color: #b36a14;
-  background: #fdf3e2;
-  font-size: var(--student-fs-body);
-  font-weight: 700;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  color: var(--student-text-secondary);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
 
   &.success {
-    border-color: #2ba471;
-    color: #1e7a4f;
-    background: #e6f6ee;
-  }
-}
-
-.journey-analysis-intro {
-  margin-bottom: 18px;
-  padding: 20px;
-  border-left: 3px solid #1e88e5;
-  border-radius: 0 16px 16px 0;
-  background: linear-gradient(90deg, #eef5fc, #eef5fc);
-
-  h4 {
-    margin: 4px 0 8px;
-    color: #1e3a5f;
-    font-size: 21px;
-  }
-
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
+    border-color: #dce9e2;
+    color: #3f8a5f;
+    background: rgba(74, 157, 110, 0.08);
   }
 }
 
-.journey-analysis-wrap {
+/* ===== 表格 ===== */
+.journey-analysis-wrap,
+.journey-optimization-wrap {
   overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 16px;
-  background: #f8fbfe;
 }
 
-.journey-analysis-table {
+.journey-analysis-table,
+.journey-optimization-table {
   width: 100%;
-  min-width: 1120px;
   border-collapse: collapse;
   table-layout: fixed;
+}
 
-  th,
-  td {
-    border: 1px solid #e3eaf2;
-  }
-
-  thead th {
-    padding: 13px 10px;
-    color: #1e3a5f;
-    background: linear-gradient(90deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-body);
-    font-weight: 900;
-    text-align: center;
-  }
-
-  tbody tr {
-    background: #f8fbfe;
-
-    &:nth-child(even) {
-      background: #eef5fc;
-    }
-  }
+.journey-analysis-table {
+  min-width: 1120px;
+}
 
-  td,
-  tbody th {
-    padding: 10px;
-    vertical-align: top;
-  }
+.journey-optimization-table {
+  min-width: 900px;
+}
 
-  th:nth-child(1) { width: 54px; }
-  th:nth-child(2) { width: 132px; }
-  th:nth-child(3), th:nth-child(4), th:nth-child(6) { width: 27%; }
-  th:nth-child(5) { width: 118px; }
+.journey-analysis-table th,
+.journey-analysis-table td,
+.journey-optimization-table th,
+.journey-optimization-table td {
+  border: 1px solid var(--student-panel-border);
+}
 
-  textarea,
-  select {
-    width: 100%;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    color: #1e3a5f;
-    background: transparent;
-    font: inherit;
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.65;
-    outline: none;
-    box-sizing: border-box;
+.journey-analysis-table thead th,
+.journey-optimization-table thead th {
+  padding: 10px 12px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 800;
+  text-align: left;
+}
 
-    &:focus {
-      border-color: #1e88e5;
-      background: #e3f2fd;
-      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
-    }
-  }
+.journey-analysis-table tbody td,
+.journey-analysis-table tbody th,
+.journey-optimization-table tbody td,
+.journey-optimization-table tbody th {
+  padding: 10px;
+  vertical-align: top;
+  background: transparent;
+}
 
-  textarea {
-    min-height: 112px;
-    padding: 8px;
-    resize: vertical;
-  }
+.journey-analysis-table thead th:nth-child(1) { width: 54px; }
+.journey-analysis-table thead th:nth-child(2) { width: 132px; }
+.journey-analysis-table thead th:nth-child(3),
+.journey-analysis-table thead th:nth-child(4),
+.journey-analysis-table thead th:nth-child(6) { width: 27%; }
+.journey-analysis-table thead th:nth-child(5) { width: 118px; }
 
-  textarea::placeholder {
-    color: #5a7a9a;
-  }
+.journey-optimization-table thead th:first-child { width: 170px; }
 
-  select {
-    min-height: 38px;
-    margin-top: 30px;
-    padding: 0 9px;
-    border-color: #9cc8ef;
-    background: #eef5fc;
-  }
+/* 序号列 */
+.journey-analysis-index {
+  color: var(--student-text-secondary);
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  vertical-align: middle;
 }
 
-.journey-analysis-index,
-.journey-analysis-stage {
-  color: #2c4a6a;
-  font-weight: 800;
+.journey-analysis-stage,
+.journey-optimization-table tbody th {
+  color: var(--student-text);
+  font-weight: 700;
   text-align: center;
-  vertical-align: middle !important;
+  vertical-align: middle;
 }
 
 .journey-analysis-stage {
-  color: #1565c0;
   line-height: 1.65;
 }
 
-.journey-map-intro {
-  margin-bottom: 18px;
-  padding: 20px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: linear-gradient(112deg, #eef5fc, #eef5fc);
-
-  span {
-    color: #1e88e5;
-    font-size: var(--student-fs-body-sm);
-    font-weight: 900;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
-  h4 {
-    margin: 6px 0 8px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h2);
-  }
-
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
+/* textarea + select */
+.journey-analysis-table textarea,
+.journey-analysis-table select,
+.journey-optimization-table textarea {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 0;
+  padding: 8px 10px;
+  color: var(--student-text);
+  background: transparent;
+  font: inherit;
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.55;
+  outline: none;
+}
+
+.journey-analysis-table textarea,
+.journey-optimization-table textarea {
+  min-height: 112px;
+  resize: vertical;
+}
+
+.journey-analysis-table textarea:focus,
+.journey-analysis-table select:focus,
+.journey-optimization-table textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
+}
+
+.journey-analysis-table textarea::placeholder,
+.journey-optimization-table textarea::placeholder {
+  color: var(--student-text-secondary);
+}
+
+.journey-analysis-table select {
+  min-height: 38px;
+  padding: 8px 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--student-text);
+  cursor: pointer;
+}
+
+.journey-analysis-table select:focus {
+  border-color: var(--student-accent);
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
 }
 
+/* ===== 上传面板 ===== */
 .hidden-file-input {
   display: none;
 }
@@ -1591,18 +1446,19 @@ function exportOutcome() {
   justify-content: center;
   gap: 12px;
   padding: 28px;
-  border: 1px dashed #1e88e5;
-  border-radius: 20px;
-  color: #1e3a5f;
-  background: radial-gradient(circle at 50% 32%, #e3f2fd, #f8fbfe 62%);
+  border: 1px dashed var(--student-panel-border);
+  border-radius: 16px;
+  color: var(--student-text);
+  background: #ffffff;
 
   strong {
     font-size: var(--student-fs-h1);
+    color: var(--student-text);
   }
 
   p {
     margin: 0 0 8px;
-    color: #5a7a9a;
+    color: var(--student-text-secondary);
     font-size: var(--student-fs-body-sm);
   }
 }
@@ -1612,10 +1468,10 @@ function exportOutcome() {
   height: 52px;
   display: grid;
   place-items: center;
-  border: 1px solid #9cc8ef;
+  border: 1px solid var(--student-panel-border);
   border-radius: 50%;
-  color: #1e88e5;
-  background: rgba(30, 136, 229, 0.12);
+  color: var(--student-accent);
+  background: var(--student-accent-soft);
   font-size: 25px;
 }
 
@@ -1623,7 +1479,7 @@ function exportOutcome() {
   width: min(100%, 760px);
   max-height: 360px;
   overflow: hidden;
-  border: 1px solid #cfe2f5;
+  border: 1px solid var(--student-panel-border);
   border-radius: 12px;
   background: #ffffff;
   cursor: zoom-in;
@@ -1638,7 +1494,7 @@ function exportOutcome() {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #1e3a5f;
+  color: var(--student-text);
   font-size: var(--student-fs-body);
 
   span {
@@ -1661,27 +1517,27 @@ function exportOutcome() {
   justify-content: space-between;
   gap: 24px;
   margin-top: 20px;
-  padding: 18px 20px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #2c4a6a;
-  background: #f0f6fd;
+  padding: 16px 18px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  color: var(--student-text-secondary);
+  background: #ffffff;
 
   h5,
   p {
     margin: 0;
     font-size: var(--student-fs-body-sm);
-    line-height: 1.8;
+    line-height: 1.7;
   }
 
   h5 {
-    color: #1e3a5f;
+    color: var(--student-text);
     font-size: var(--student-fs-body);
   }
 
   .journey-map-prompt {
     margin-top: 4px;
-    color: #1565c0;
+    color: var(--student-text-secondary);
   }
 
   .el-button {
@@ -1689,580 +1545,427 @@ function exportOutcome() {
   }
 }
 
-.journey-optimization-intro {
-  margin-bottom: 18px;
-  padding: 20px 22px;
-  border-left: 3px solid #1e88e5;
-  border-radius: 0 16px 16px 0;
-  background: linear-gradient(90deg, rgba(30, 136, 229, 0.12), #eef5fc);
+/* ===== 底部按钮 ===== */
+.step-actions {
+  display: flex;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 20px;
+}
 
-  span {
-    color: #1e88e5;
-    font-size: var(--student-fs-body-sm);
-    font-weight: 900;
-    letter-spacing: 0.08em;
-  }
+.nav-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 112px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font-family: inherit;
+  font-size: var(--student-fs-button);
+  font-weight: 600;
+  cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
 
-  h4 {
-    margin: 6px 0 8px;
-    color: #1e3a5f;
-    font-size: 21px;
+  &:hover:not(:disabled) {
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    color: var(--student-accent);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
 
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+    box-shadow: none;
   }
 }
 
-.journey-optimization-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 16px;
-  background: #f8fbfe;
+.nav-action--next,
+.nav-action--save {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
 }
 
-.journey-optimization-table {
-  width: 100%;
-  min-width: 900px;
-  border-collapse: collapse;
-  table-layout: fixed;
+.nav-action--next:hover:not(:disabled),
+.nav-action--save:hover:not(:disabled) {
+  background: var(--student-accent-deep);
+  border-color: var(--student-accent-deep);
+  color: #ffffff;
+  box-shadow: 0 5px 14px rgba(31, 41, 55, 0.32);
+}
 
-  th,
-  td {
-    border: 1px solid #e3eaf2;
-  }
+/* training-actions 容器：el-button 由全局样式接管 */
+.training-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 20px;
+}
 
-  thead th {
-    padding: 14px 12px;
-    color: #1e3a5f;
-    background: linear-gradient(90deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-body);
-    font-weight: 900;
-    text-align: center;
+/* ===== 响应式 ===== */
+@media (max-width: 900px) {
+  .workbench-head--actions-only,
+  .step-title-row,
+  .step-actions,
+  .training-actions {
+    flex-direction: column;
+    align-items: stretch;
   }
 
-  thead th:first-child {
-    width: 170px;
+  .journey-sort-head {
+    flex-direction: column;
   }
 
-  tbody th {
-    padding: 18px 14px;
-    color: #1565c0;
-    background: #eef5fc;
-    font-size: var(--student-fs-body);
-    font-weight: 800;
-    text-align: center;
+  .journey-check-action {
+    width: 100%;
   }
 
-  td {
-    padding: 10px;
-    background: #f8fbfe;
+  .journey-sort-list {
+    grid-template-columns: 1fr;
   }
 
-  textarea {
-    width: 100%;
-    min-height: 92px;
-    padding: 10px 12px;
-    border: 1px solid transparent;
-    border-radius: 9px;
-    outline: none;
-    resize: vertical;
-    color: #1e3a5f;
-    background: transparent;
-    font: inherit;
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.65;
-    box-sizing: border-box;
+  .journey-sort-card {
+    min-height: 126px;
+  }
 
-    &:focus {
-      border-color: #1e88e5;
-      background: #e3f2fd;
-      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
-    }
+  .journey-sort-arrow {
+    transform: rotate(90deg);
   }
 
-  textarea::placeholder {
-    color: #5a7a9a;
+  .journey-map-helper {
+    align-items: stretch;
+    flex-direction: column;
   }
-}
 
-.journey-flow {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(120px, 1fr));
-  align-items: center;
-  gap: 28px;
-  margin-top: 18px;
-  overflow-x: auto;
-}
+  .journey-map-helper .el-button {
+    width: 100%;
+  }
 
-.phase-node {
-  position: relative;
-  min-height: 78px;
-  display: grid;
-  place-items: center;
-  padding: 14px 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #2c4a6a;
-  background: #f8fbfe;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  text-align: center;
+  .nav-action {
+    width: 100%;
+  }
 }
+</style>
 
-.phase-arrow {
-  display: none;
+<style lang="scss">
+/* ===== 画布 + 行高 ===== */
+#app .studentLayout .app-main:has(.consumer-scenario-page) {
+  background: #ffffff !important;
 }
-
-.phase-node:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: -29px;
-  width: 28px;
-  height: 2px;
-  background: #1e88e5;
-  transform: translateY(-50%);
-}
-
-.phase-node:not(:last-child)::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: -31px;
-  width: 8px;
-  height: 8px;
-  border-top: 2px solid #1e88e5;
-  border-right: 2px solid #1e88e5;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.requirement {
-  margin: 20px 0 16px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 400;
-  line-height: 1.8;
+#app .studentLayout .app-main:has(.consumer-scenario-page) .consumer-scenario-page {
+  line-height: 1.55 !important;
 }
 
-.scenario-list {
-  display: grid;
-  gap: 10px;
-  margin-bottom: 18px;
-}
+/* ===== 步骤导航：按钮切换风 ===== */
+#app .studentLayout section.app-main:has(.consumer-scenario-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 
-.scenario-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 220px;
-  gap: 12px;
-  align-items: center;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-}
+  .step-connector { display: none !important; }
 
-.phase-select {
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  border: 1px solid #c9d8e8;
-  border-radius: 14px;
-  color: #2c4a6a;
-  background: #ffffff;
-  font: inherit;
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
 
-  &:focus {
-    border-color: #1e88e5;
-    background: #f0f6fd;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
 
-.journey-table-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f8fbfe;
-}
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 0 !important;
+      min-width: 0 !important;
+    }
 
-.journey-table {
-  width: 100%;
-  min-width: 980px;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
+    .step-name {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      line-height: 1.3 !important;
+      color: inherit !important;
+    }
 
-.journey-table th,
-.journey-table td {
-  border: 1px solid #e3eaf2;
-}
+    .step-action { display: none !important; }
 
-.journey-table thead th {
-  height: 46px;
-  padding: 12px;
-  color: #1e3a5f;
-  background: #bbdefb;
-  font-weight: 900;
-}
+    /* 未到达项 hover */
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
 
-.journey-table tbody th {
-  width: 120px;
-  padding: 12px;
-  color: #1e3a5f;
-  background: #f8fbfe;
-  font-weight: 900;
-}
+    /* 已完成 */
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
 
-.row-head {
-  width: 120px;
+    /* 当前步骤 */
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
 }
 
-.journey-table td {
-  height: 108px;
-  padding: 12px;
-  background: #f8fbfe;
+/* ===== 窄屏 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.consumer-scenario-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+  }
+  #app .studentLayout section.app-main:has(.consumer-scenario-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
 }
 
-.table-input {
-  display: block;
-  width: 100%;
-  min-height: 110px;
-  padding: 12px 14px;
-  border: 1px solid #c9d8e8;
-  border-radius: 14px;
-  outline: none;
-  resize: none;
-  color: #2c4a6a;
+/* ===== 顶部任务工具栏换肤 ===== */
+.consumer-scenario-page .task-toolbar-button.el-button,
+.consumer-scenario-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;
-  font-family: inherit;
-  font-size: var(--student-fs-body-sm);
-  line-height: 1.6;
-  box-sizing: border-box;
-}
-
-.table-input::placeholder {
-  color: #5a7a9a;
-}
-
-.table-input:focus {
-  border-color: #1e88e5;
-  background: #f0f6fd;
-  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-}
-
-.reference-map {
-  margin-top: 28px;
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f8fbfe;
+  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;
 }
 
-.step-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 14px;
-  margin-top: 22px;
-  margin-bottom: 36px;
+.consumer-scenario-page .task-toolbar-button.el-button .el-icon,
+.consumer-scenario-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
 }
 
-.nav-action {
-  min-width: 112px;
-  min-height: 40px;
-  padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-family: inherit;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-  }
+.consumer-scenario-page .task-toolbar-button.el-button:hover,
+.consumer-scenario-page .task-toolbar-button.el-button:focus,
+.consumer-scenario-page .material-button.el-button:hover,
+.consumer-scenario-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
 }
 
-.nav-action--next {
-  border-color: #1e88e5;
+.consumer-scenario-page .task-toolbar-button--submit.el-button {
+  border-color: #1f2937;
   color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+  background: #1f2937;
+  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
 }
 
-.nav-action--save {
-  border-color: #1e88e5;
+.consumer-scenario-page .task-toolbar-button--submit.el-button:hover,
+.consumer-scenario-page .task-toolbar-button--submit.el-button:focus {
+  border-color: #111827;
   color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-}
-
-.reference-title {
-  margin-bottom: 14px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-}
-
-.reference-grid {
-  display: grid;
-  grid-template-columns: 120px repeat(6, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 8px;
+  background: #111827;
+  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.28);
 }
 
-.reference-side,
-.stage-chip,
-.reference-cell,
-.behavior-lane,
-.emotion-chart {
-  border: 1px solid #cfe2f5;
-  background: #f8fbfe;
-}
-
-.reference-side {
-  display: grid;
-  place-items: center;
-  min-height: 54px;
-  color: #2c4a6a;
-  font-weight: 900;
-}
-
-.stage-chip {
-  min-height: 34px;
-  display: grid;
-  place-items: center;
-  color: #1e3a5f;
-  background: #bbdefb;
-  font-weight: 900;
-}
-
-.reference-cell {
-  min-height: 58px;
-  padding: 10px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-caption);
-  line-height: 1.55;
-}
-
-.reference-cell p {
-  margin: 0;
-}
-
-.reference-grid--behavior,
-.reference-grid--emotion {
-  grid-template-columns: 120px minmax(0, 1fr);
+.consumer-scenario-page .task-toolbar-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
 }
 
-.behavior-lane {
-  min-height: 130px;
-  display: flex;
+/* outline-action 原生按钮换肤（非 scoped，对齐工具栏风格） */
+.consumer-scenario-page .outline-action {
+  display: inline-flex;
   align-items: center;
-  gap: 22px;
-  padding: 16px;
-  overflow-x: auto;
-}
-
-.behavior-node {
-  position: relative;
-  min-width: 82px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-caption);
-  text-align: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
 }
 
-.behavior-node::before {
-  content: "";
-  display: block;
-  width: 30px;
-  height: 30px;
-  margin: 0 auto 8px;
-  border-radius: 50%;
-  background: linear-gradient(180deg, #42a5f5, #1e88e5);
-  box-shadow: 0 0 16px rgba(30, 136, 229, 0.24);
+.consumer-scenario-page .outline-action:hover {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
 }
 
-.behavior-node:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: calc(50% + 26px);
-  width: 56px;
-  height: 2px;
-  background: rgba(30, 136, 229, 0.5);
+/* training-actions 内 el-button 换肤（非 scoped，对齐墨黑风格） */
+.consumer-scenario-page .training-actions .el-button {
+  min-width: 140px;
+  min-height: 40px;
+  padding: 0 20px;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  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, transform 0.16s ease;
 }
 
-.emotion-chart {
-  position: relative;
-  min-height: 210px;
-  padding: 10px;
-  overflow: hidden;
+.consumer-scenario-page .training-actions .el-button:hover:not(.is-disabled) {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+  transform: translateY(-1px);
 }
 
-.emotion-chart svg {
-  width: 100%;
-  height: 190px;
+.consumer-scenario-page .training-actions .training-action--submit.el-button {
+  border-color: #1f2937;
+  color: #ffffff;
+  background: #1f2937;
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.28);
 }
 
-.emotion-points span {
-  position: absolute;
-  display: grid;
-  gap: 2px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  text-align: center;
+.consumer-scenario-page .training-actions .training-action--submit.el-button:hover:not(.is-disabled) {
+  border-color: #111827;
+  background: #111827;
+  color: #ffffff;
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
 }
 
-.emotion-points small {
-  color: #2c4a6a;
-  font-size: var(--student-fs-caption);
+.consumer-scenario-page .training-actions .training-action--reset.el-button {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #f3f4f6;
 }
 
-.training-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
+.consumer-scenario-page .training-actions .training-action--reset.el-button:hover:not(.is-disabled) {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #e5e7eb;
 }
 
-.training-action {
-  min-width: 172px;
-  height: 64px;
-  padding: 0 28px;
-  border: 1px solid #1e88e5;
-  border-radius: 6px;
-  color: #2c4a6a;
-  background: #e3f2fd;
+/* journey-map-actions / journey-map-helper 内 el-button 换肤 */
+.consumer-scenario-page .journey-map-actions .el-button,
+.consumer-scenario-page .journey-map-helper .el-button {
+  min-height: 36px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  color: #374151;
+  background: #ffffff;
   box-shadow: none;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
   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;
 }
 
-.training-action:hover:not(.is-disabled) {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: #bbdefb;
+.consumer-scenario-page .journey-map-actions .el-button:hover,
+.consumer-scenario-page .journey-map-helper .el-button:hover {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
 }
 
-@media (max-width: 1100px) {
-  .consumer-scenario-page {
-    grid-template-columns: 1fr;
-  }
+.consumer-scenario-page .journey-map-actions .el-button--primary,
+.consumer-scenario-page .journey-map-helper .el-button--primary {
+  border-color: #1f2937;
+  color: #ffffff;
+  background: #1f2937;
+  font-weight: 700;
 }
 
-@media (max-width: 900px) {
-  .consumer-scenario-page {
-    padding: 14px 14px 18px;
-  }
-
-  .training-core {
-    padding: 18px;
-    border-radius: 24px;
-  }
-
-  .workbench-head,
-  .workbench-actions,
-  .step-title-row,
-  .step-actions,
-  .training-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .workbench-actions :deep(.material-download),
-  .workbench-actions .outline-action {
-    width: 100%;
-  }
-
-  .step-indicator {
-    align-items: stretch;
-    flex-direction: column;
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    overflow: visible;
-    border-radius: 20px;
-  }
-
-  .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-
-  .step-connector {
-    flex: 0 0 20px;
-    min-width: 0;
-    width: 2px;
-    height: 20px;
-    margin-left: 29px;
-    text-align: center;
-    writing-mode: vertical-rl;
-  }
-
-  .journey-flow,
-  .scenario-row {
-    grid-template-columns: 1fr;
-  }
-
-  .journey-sort-head {
-    flex-direction: column;
-  }
-
-  .journey-check-action {
-    width: 100%;
-  }
-
-  .journey-sort-list {
-    grid-template-columns: 1fr;
-  }
-
-  .journey-sort-card {
-    min-height: 126px;
-  }
-
-  .journey-sort-arrow {
-    transform: rotate(90deg);
-  }
-
-  .journey-map-helper {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .journey-map-helper .el-button {
-    width: 100%;
-  }
-
-  .nav-action,
-  .training-action {
-    width: 100%;
-  }
-
-  .phase-node::before,
-  .phase-node::after {
-    display: none;
-  }
-
-  .reference-grid,
-  .reference-grid--behavior,
-  .reference-grid--emotion {
-    grid-template-columns: 1fr;
-  }
-
-}
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+.consumer-scenario-page .journey-map-actions .el-button--primary:hover,
+.consumer-scenario-page .journey-map-helper .el-button--primary:hover {
+  border-color: #111827;
+  background: #111827;
+  color: #ffffff;
 }
 </style>
-
diff --git a/src/views/demand/feature-conversion.vue b/src/views/demand/feature-conversion.vue
index bd8b95e..e6b59be 100644
--- a/src/views/demand/feature-conversion.vue
+++ b/src/views/demand/feature-conversion.vue
@@ -1,18 +1,25 @@
 <template>
   <div class="feature-conversion-page student-training-shell">
-    <main class="training-core">
+    <main class="feature-conversion-core">
       <section class="task-header">
-        <div class="task-badge">市场洞察与需求分析</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <div class="task-badge">市场洞察与需求分析</div>
+          <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="task-card">
       <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
@@ -228,7 +235,6 @@ import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Download } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { checkFeatureConversionStepOne, checkFeatureConversionStepTwo, checkFeatureConversionStepThree, getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
@@ -373,6 +379,7 @@ function createForm() {
 const form = ref(createForm());
 
 const taskTitle = computed(() => taskConfig.value?.taskName || "需求转化为功能");
+const briefOpen = ref(false);
 const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
 const taskGoals = computed(() => parseArray(taskConfig.value?.objectives, defaultGoals));
 const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
@@ -686,279 +693,312 @@ function exportOutcome() {
 </script>
 
 <style scoped lang="scss">
+/* ===== 页面级令牌（墨黑极简主题） ===== */
 .feature-conversion-page {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 22px;
-  min-height: calc(100vh - 76px);
-  padding: 24px;
-  color: #1e3a5f;
-  background:
-    radial-gradient(circle at 20% 4%, #e3f2fd, transparent 34%),
-    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --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-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;
+
+  /* 不设 grid-template-columns，由全局 .student-training-shell 单列布局接管 */
+  min-width: 0;
+  color: var(--student-text);
+  background: #ffffff;
 }
 
-.training-core {
+/* 对齐 foundation 的 .training-core：只设 gap，无边框/背景/阴影 */
+.feature-conversion-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
   min-width: 0;
-  padding: 28px;
-  border: 1px solid rgba(23, 145, 194, 0.56);
-  border-radius: 28px;
-  background: linear-gradient(180deg, #f0f6fd, #f0f6fd);
-  box-shadow: inset 0 1px 0 rgba(95, 232, 255, 0.16), 0 22px 44px rgba(30, 136, 229, 0.12);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
+/* 任务头：独立卡片 */
 .task-header {
-  margin-bottom: 18px;
+  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;
+  flex: 1 1 auto;
 }
 
 .task-badge {
   display: inline-flex;
   align-items: center;
-  height: 28px;
-  padding: 0 14px;
-  border: 1px solid #cfe2f5;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
   border-radius: 999px;
-  color: #2c4a6a;
-  background: rgba(14, 98, 139, 0.48);
-  font-size: var(--student-fs-body-sm);
-  font-weight: 800;
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
 .task-title {
-  margin: 16px 0 0;
-  color: #1e3a5f;
+  margin: 0;
+  color: var(--student-text);
   font-size: var(--student-fs-display);
-  line-height: 1.2;
-  letter-spacing: 0;
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.goal-bg,
-.task-card {
-  border: 1px solid rgba(32, 149, 200, 0.58);
-  border-radius: 26px;
-  background: #f0f6fd;
+.task-brief {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.goal-bg {
-  padding: 22px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
-  white-space: pre-line;
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.goal-bg p,
-.goal-bg ol {
-  margin: 8px 0 0;
-}
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 
-.subtitle-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
+  &:hover { text-decoration: underline; }
 }
 
-.subtitle-icon--spaced {
-  margin-top: 16px;
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
 }
 
-.task-card {
-  margin-top: 22px;
-  padding: 24px;
+/* task-card / step-card 层：透明容器 */
+.task-card,
+.step-card {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
 }
 
+/* ===== 顶部任务工具栏 ===== */
 .workbench-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 20px;
-}
-
-.section-eyebrow {
-  margin: 0 0 6px;
-  color: #42a5f5;
-  font-size: var(--student-fs-caption);
-  font-weight: 900;
-  text-transform: uppercase;
-}
-
-.workbench-head h3 {
-  margin: 0;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-}
-
-.ghost-action {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
 }
 
-.product-field {
-  display: grid;
-  grid-template-columns: 88px minmax(260px, 520px);
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 34px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
-}
-
-.product-field input {
-  height: 38px;
-  padding: 0 12px;
-  border: 1px solid #cfe2f5;
-  border-radius: 2px;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body);
-  outline: none;
+.workbench-head--actions-only {
+  justify-content: flex-end;
+  margin-bottom: 18px;
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
-.flow-steps {
+.workbench-actions {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  gap: 22px;
-  margin-bottom: 44px;
+  justify-content: flex-end;
+  margin-left: auto;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
-.flow-pill {
-  min-width: 230px;
-  height: 58px;
-  border: 0;
-  border-radius: 6px;
-  color: #1e3a5f;
-  background: #1e88e5;
-  font-size: 17px;
-  font-weight: 900;
+.outline-action {
+  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-size: 13px;
+  font-weight: 700;
   cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 }
 
-.flow-pill.active {
-  background: #1e88e5;
-  box-shadow: 0 0 0 2px rgba(113, 223, 255, 0.18);
-}
-
-.flow-arrow {
-  color: #d4dbe1;
-  font-size: 42px;
-  font-weight: 900;
-  letter-spacing: -8px;
-  transform: scaleX(0.72);
+.outline-action:hover,
+.outline-action:focus-visible {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
 }
 
-.conversion-content {
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
-  line-height: 1.75;
+/* ===== step-title-row + section-eyebrow ===== */
+.step-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-.conversion-content h4 {
-  margin: 0 0 14px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-display);
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.conversion-content h5 {
-  margin: 16px 0 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
+.section-eyebrow {
+  margin: 0 0 6px;
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-.conversion-content p {
-  margin: 4px 0;
+/* ===== 引导区：research-guide 同款 ===== */
+.conversion-intro,
+.rice-intro,
+.decision-intro {
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  background: var(--student-accent-soft);
+  border-radius: 0 8px 8px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
 .conversion-intro {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 22px;
-  margin-bottom: 16px;
-  padding: 18px 20px;
-  border-left: 3px solid #42a5f5;
-  border-radius: 0 14px 14px 0;
-  background: linear-gradient(90deg, #e3f2fd, #e3f2fd);
+  gap: 16px;
 
   > p {
     max-width: 840px;
-    color: #2c4a6a;
+    margin: 0;
+    color: var(--student-text-secondary);
     font-size: var(--student-fs-body);
-    line-height: 1.85;
-  }
-}
-
-.conversion-row-actions {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 10px;
-
-  .el-button {
-    min-width: 112px;
+    line-height: 1.6;
   }
 }
 
-.indent {
-  padding-left: 24px;
-}
-
-.source-title,
-.table-tip {
-  margin-top: 20px !important;
-  color: #1e3a5f;
-  font-weight: 900;
-}
-
-.feedback-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
-  gap: 46px;
-  margin-top: 10px;
+.rice-intro p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
-.feedback-grid section {
-  min-width: 0;
+.rice-intro p + p {
+  margin-top: 5px;
 }
 
-.feedback-grid ol {
-  margin: 8px 0 0;
-  padding-left: 20px;
+.decision-intro {
+  margin: 0;
+  color: var(--student-text-secondary);
 }
 
-.feedback-grid li {
-  margin-bottom: 6px;
+.conversion-row-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
 }
 
+/* ===== 表格 ===== */
 .conversion-table-wrap {
   overflow-x: auto;
-  margin-top: 10px;
-  border: 1px solid #cfe2f5;
 }
 
-.conversion-table {
+.conversion-table,
+.priority-score-table,
+.priority-decision-table {
   width: 100%;
-  min-width: 1120px;
   border-collapse: collapse;
   table-layout: fixed;
 }
 
+.conversion-table { min-width: 1120px; }
+.priority-score-table { min-width: 1100px; }
+.priority-decision-table { min-width: 860px; }
+
 .conversion-table th,
-.conversion-table td {
-  border: 1px solid #cfe2f5;
+.conversion-table td,
+.priority-score-table th,
+.priority-score-table td,
+.priority-decision-table th,
+.priority-decision-table td {
+  border: 1px solid var(--student-panel-border);
 }
 
-.conversion-table th {
-  height: 46px;
-  color: #1e3a5f;
-  background: #bbdefb;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
+.conversion-table th,
+.priority-score-table th,
+.priority-decision-table th {
+  padding: 10px 12px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 800;
+  text-align: left;
+}
+
+.conversion-table td,
+.priority-score-table td,
+.priority-decision-table td {
+  padding: 10px;
+  background: transparent;
+  vertical-align: top;
+  color: var(--student-text);
 }
 
 .conversion-table th:first-child,
@@ -967,12 +1007,6 @@ function exportOutcome() {
   text-align: center;
 }
 
-.conversion-table td {
-  height: 78px;
-  padding: 0;
-  background: #f0f6fd;
-}
-
 .conversion-table textarea {
   display: block;
   width: 100%;
@@ -980,8 +1014,8 @@ function exportOutcome() {
   padding: 9px 10px;
   border: 0;
   outline: none;
-  resize: none;
-  color: #1e3a5f;
+  resize: vertical;
+  color: var(--student-text);
   background: transparent;
   font-family: inherit;
   font-size: var(--student-fs-body-sm);
@@ -990,1025 +1024,540 @@ function exportOutcome() {
 }
 
 .conversion-table textarea::placeholder {
-  color: #5a7a9a;
+  color: var(--student-text-secondary);
 }
 
-.conversion-limit-tip {
-  margin: 12px 0 0 !important;
-  color: #ff958a;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 800;
+.conversion-table textarea:focus,
+.priority-score-table textarea:focus,
+.priority-decision-table textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
 }
 
-.conversion-helper {
-  margin-top: 26px;
-  padding: 16px 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #5a7a9a;
-  background: #e3f2fd;
-
-  h5 {
-    margin: 0 0 4px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-body);
-  }
+/* ===== priority-score-table ===== */
+.priority-score-table th,
+.priority-score-table td {
+  text-align: center;
+  vertical-align: middle;
+}
 
-  p {
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.8;
-  }
+.priority-score-table td {
+  height: 66px;
+  padding: 8px;
 }
 
-.conversion-validation-message {
-  margin: 14px 0 0 !important;
-  color: #ffbbb0;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 800;
+.priority-score-table .auto-score-cell {
+  color: var(--student-text-secondary);
+  background: transparent;
+  font-weight: 700;
 }
 
-.priority-content {
-  max-width: 100%;
+.priority-score-table .auto-score-cell--name {
+  min-width: 180px;
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  line-height: 1.55;
+  word-break: break-word;
+  text-align: left;
 }
 
-.priority-template-table,
-.priority-score-table {
+.priority-score-table select,
+.priority-score-table input {
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
+  min-height: 36px;
+  padding: 0 9px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  outline: none;
+  color: var(--student-text);
+  background: #ffffff;
+  font: inherit;
+  font-size: var(--student-fs-body-sm);
+  box-sizing: border-box;
 }
 
-.priority-template-table {
-  min-width: 1180px;
+.priority-score-table select:focus,
+.priority-score-table input:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
+  border-color: var(--student-accent);
 }
 
-.priority-score-table {
-  min-width: 1540px;
+.priority-score-table .metric-input {
+  position: relative;
+
+  input {
+    padding-right: 24px;
+  }
+
+  span {
+    position: absolute;
+    top: 50%;
+    right: 9px;
+    color: var(--student-text-secondary);
+    font-size: var(--student-fs-caption);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
 }
 
-.priority-template-table th,
-.priority-template-table td,
-.priority-score-table th,
-.priority-score-table td {
-  border: 1px solid #cfe2f5;
+.priority-score-table .rice-score-cell {
+  color: var(--student-accent);
+  font-size: var(--student-fs-data);
+  font-weight: 700;
+  background: transparent;
 }
 
-.priority-template-table th,
-.priority-score-table th {
-  height: 42px;
-  padding: 6px 10px;
-  color: #1e3a5f;
-  background: #bbdefb;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
+/* ===== priority-decision-table ===== */
+.priority-decision-table th,
+.priority-decision-table td {
   text-align: center;
+  vertical-align: middle;
 }
 
-.priority-template-table td {
-  min-height: 38px;
-  padding: 8px 10px;
-  color: #2c4a6a;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body);
-  line-height: 1.5;
-  text-align: center;
-  word-break: break-word;
+.priority-decision-table td {
+  height: 76px;
+  padding: 10px;
+  color: var(--student-text);
+  background: transparent;
+}
+
+.priority-decision-table th:nth-child(1),
+.priority-decision-table td:nth-child(1) {
+  width: 22%;
 }
 
-.priority-template-table td:nth-child(2),
-.priority-template-table td:nth-child(3) {
+.priority-decision-table th:nth-child(2),
+.priority-decision-table td:nth-child(2) {
+  width: 18%;
+}
+
+.priority-decision-table .auto-score-cell--name {
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  line-height: 1.55;
+  word-break: break-word;
   text-align: left;
 }
 
-.priority-score-table th {
-  white-space: normal;
+.priority-decision-table select {
+  width: min(100%, 130px);
+  min-height: 36px;
+  padding: 0 9px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  outline: none;
+  color: var(--student-text);
+  background: #ffffff;
+  font: inherit;
 }
 
-.priority-score-table td {
-  height: 72px;
-  padding: 0;
-  background: #f0f6fd;
+.priority-decision-table select:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
+  border-color: var(--student-accent);
 }
 
-.priority-score-table textarea {
+.priority-decision-table textarea {
   display: block;
   width: 100%;
   height: 72px;
-  padding: 9px 10px;
-  border: 0;
+  min-height: 46px;
+  padding: 10px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
   outline: none;
-  resize: none;
-  color: #1e3a5f;
+  color: var(--student-text);
   background: transparent;
-  font-family: inherit;
+  font: inherit;
   font-size: var(--student-fs-body-sm);
-  line-height: 1.5;
+  line-height: 1.55;
+  resize: vertical;
   box-sizing: border-box;
 }
 
-.decision-content {
-  max-width: 100%;
+.priority-decision-table textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
+  border-color: var(--student-accent);
 }
 
-.decision-intro {
-  margin-bottom: 18px !important;
-  color: #2c4a6a;
-  font-size: var(--student-fs-h2);
-}
+/* ===== 辅助块 ===== */
+.conversion-helper {
+  margin-top: 14px;
+  padding: 12px 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  color: var(--student-text-secondary);
+  background: var(--student-accent-soft);
 
-.decision-field {
-  display: block;
-  margin-top: 30px;
-}
+  h5 {
+    margin: 0 0 6px;
+    color: var(--student-text);
+    font-size: var(--student-fs-body-sm);
+    font-weight: 700;
+  }
 
-.decision-field span {
-  display: block;
-  margin-bottom: 10px;
-  color: #1e3a5f;
-  font-size: 17px;
-  font-weight: 900;
+  p {
+    margin: 0;
+    color: var(--student-text-secondary);
+    font-size: var(--student-fs-body-sm);
+    line-height: 1.6;
+  }
+
+  p + p { margin-top: 4px; }
 }
 
-.decision-field textarea {
-  display: block;
-  width: 100%;
-  min-height: 210px;
-  padding: 14px 16px;
-  border: 1px solid rgba(139, 187, 208, 0.7);
-  border-radius: 2px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.65;
-  box-sizing: border-box;
-}
-
-.decision-field textarea:focus {
-  border-color: rgba(30, 136, 229, 0.50);
-  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.12);
-}
-
-.training-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
-}
-
-.training-actions :deep(.training-action) {
-  min-width: 172px;
-  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;
-}
-
-.training-actions :deep(.training-action span) {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-size: inherit;
-  line-height: 1;
-}
-
-.training-actions :deep(.training-action--submit),
-.training-actions :deep(.training-action--reset) {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
-}
-
-.training-actions :deep(.training-action:hover:not(.is-disabled)) {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: rgba(18, 85, 116, 0.78);
-}
-
-@media (max-width: 1100px) {
-  .feature-conversion-page {
-    grid-template-columns: 1fr;
-  }
-
-  .feedback-grid {
-    grid-template-columns: 1fr;
-    gap: 18px;
-  }
-}
-
-@media (max-width: 760px) {
-  .feature-conversion-page {
-    padding: 14px;
-  }
-
-  .training-core {
-    padding: 18px;
-  }
-
-  .product-field {
-    grid-template-columns: 1fr;
-  }
-
-  .flow-steps {
-    gap: 12px;
-  }
+.priority-legend {
+  display: grid;
+  gap: 6px;
+  margin-top: 14px;
+  padding: 12px 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  background: var(--student-accent-soft);
 
-  .flow-pill,
-  .training-actions :deep(.training-action) {
-    width: 100%;
+  p {
+    margin: 0;
+    color: var(--student-text-secondary);
+    font-size: var(--student-fs-body-sm);
+    line-height: 1.6;
   }
 
-  .flow-arrow {
-    display: none;
+  strong {
+    display: inline-block;
+    min-width: 29px;
+    margin-right: 8px;
+    color: var(--student-accent);
+    font-weight: 700;
   }
 }
 
-/* Student training standard: shared workbench hierarchy and controls. */
-.feature-conversion-page {
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  min-height: calc(100vh - 76px);
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
-  background: #ffffff;
-}
-
-.training-core {
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: inset 0 1px 0 #cfe2f5, 0 22px 48px rgba(30, 136, 229, 0.10);
-}
-
-.task-header {
-  margin-bottom: 24px;
-}
-
-.task-badge {
-  height: auto;
-  min-height: 28px;
-  padding: 4px 14px;
-  border-color: #cfe2f5;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  font-size: var(--student-fs-caption);
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.task-title {
-  margin-top: 12px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-display);
-  font-weight: 900;
-  line-height: 1.3;
-}
-
-.task-card,
-.step-card {
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
-}
-
-.task-card {
-  margin-top: 28px;
-  padding: 18px 22px 22px;
-}
-
-.workbench-head {
-  align-items: flex-start;
-  gap: 18px;
-  margin-bottom: 22px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid #cfe2f5;
-}
-
-.section-eyebrow {
-  margin: 0;
-  color: #42a5f5;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  line-height: 1.4;
-  letter-spacing: 0.02em;
+/* ===== 消息提示 ===== */
+.conversion-validation-message {
+  margin: 10px 0 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  font-weight: 600;
 }
 
-.workbench-head h3 {
-  margin: 4px 0 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 800;
-  line-height: 1.3;
+.conversion-limit-tip,
+.rice-formula {
+  margin: 8px 0 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  font-weight: 600;
 }
 
-.workbench-description {
-  max-width: 760px;
+/* ===== completion-content ===== */
+.completion-content p {
   margin: 0;
-  color: #2c4a6a;
+  color: var(--student-text-secondary);
   font-size: var(--student-fs-body);
-  font-weight: 400;
-  line-height: 1.8;
+  line-height: 1.6;
 }
 
-.workbench-actions {
+/* ===== 底部步骤导航按钮 ===== */
+.step-navigation {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  margin-left: auto;
-  gap: 10px;
-  flex-shrink: 0;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 20px;
 }
 
-.outline-action {
+.btn-nav {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  min-width: 0;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font: inherit;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
   font-size: var(--student-fs-button);
-  font-weight: 800;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
 }
 
-.outline-action:hover,
-.outline-action:focus-visible {
-  border-color: #cfe2f5;
-  background: #bbdefb;
+.btn-nav:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
   transform: translateY(-1px);
-  outline: none;
-}
-
-.step-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  width: calc(100% + 24px);
-  min-height: 0;
-  margin: 0 -12px 32px;
-  padding: 18px 22px;
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(90deg, #e3f2fd, #f0f6fd),
-    #f0f6fd;
-  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: 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;
-}
-
-.step-tab:hover {
-  transform: translateY(-2px);
-  color: #1e3a5f;
-  border-color: #cfe2f5;
-  background: #bbdefb;
-  box-shadow: 0 7px 18px rgba(30, 136, 229, 0.12), inset 0 1px 0 rgba(30, 136, 229, 0.10);
-}
-
-.step-tab:hover .step-action {
-  color: #1565c0;
-}
-
-.step-tab:focus-visible {
-  outline: 2px solid #cfe2f5;
-  outline-offset: 2px;
-}
-
-.step-tab.active {
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: linear-gradient(115deg, #bbdefb, #bbdefb);
-  box-shadow: 0 0 18px rgba(30, 136, 229, 0.15), inset 0 1px 0 #cfe2f5;
-}
-
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #cfe2f5;
-  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;
-}
-
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-}
-
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  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: #1565c0;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  transition: color 0.2s ease;
-}
-
-.step-tab.active .step-marker {
-  border-color: #42a5f5;
-  color: #1e3a5f;
-  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.30);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
 }
 
-.step-tab.complete .step-marker {
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: #42a5f5;
-  box-shadow: 0 0 12px rgba(30, 136, 229, 0.18);
-}
-
-.step-connector {
-  position: relative;
-  flex: 0 1 40px;
-  min-width: 18px;
-  height: 2px;
-  margin: 0 8px;
-  overflow: visible;
-  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, #42a5f5, #1e88e5);
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.20);
-
-  &::after {
-    border-color: #42a5f5;
-  }
-}
-
-.step-card {
-  margin-top: 32px;
-  padding: 18px 22px 22px;
-}
-
-.workbench-head + .step-card {
-  margin-top: 0;
-}
-
-.step-card + .step-card {
-  margin-top: 16px;
-}
-
-.step-title-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 14px;
-}
-
-.step-title-row h3 {
-  margin: 4px 0 0;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
-  line-height: 1.3;
-}
-
-.conversion-content {
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
-}
-
-.conversion-content h4 {
-  margin: 0 0 14px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
-  line-height: 1.3;
-}
-
-.conversion-content h5,
-.source-title,
-.table-tip {
-  color: #2c4a6a;
-}
-
-.conversion-content p {
-  margin: 0 0 10px;
-}
-
-.product-field,
-.decision-field {
-  display: block;
-  margin: 0 0 16px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-}
-
-.product-field input,
-.decision-field textarea,
-.conversion-table textarea,
-.priority-score-table textarea {
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.65;
-}
-
-.product-field input {
-  display: block;
-  width: min(100%, 680px);
-  min-height: 42px;
-  margin-top: 8px;
-  padding: 0 14px;
-  box-sizing: border-box;
-}
-
-.product-field input:focus,
-.decision-field textarea:focus,
-.conversion-table textarea:focus,
-.priority-score-table textarea:focus {
-  border-color: #cfe2f5;
-  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.10);
-  outline: none;
-}
-
-.feedback-grid {
-  gap: 16px;
-}
-
-.feedback-grid section,
-.example-block {
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 20px;
-  background: #f0f6fd;
-}
-
-.feedback-grid li {
-  margin-bottom: 8px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.72;
-}
-
-.conversion-table-wrap {
-  margin-top: 12px;
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
-}
-
-.conversion-table th,
-.conversion-table td,
-.priority-template-table th,
-.priority-template-table td,
-.priority-score-table th,
-.priority-score-table td {
-  border-color: #cfe2f5;
-}
-
-.conversion-table th,
-.priority-template-table th,
-.priority-score-table th {
-  height: auto;
-  min-height: 46px;
-  padding: 12px;
-  color: #1e3a5f;
-  background: #bbdefb;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
-}
-
-.conversion-table td,
-.priority-template-table td,
-.priority-score-table td {
-  padding: 10px;
-  color: #2c4a6a;
-  background: #f0f6fd;
-  vertical-align: top;
-}
-
-.conversion-table textarea,
-.priority-score-table textarea {
-  height: 96px;
-  min-height: 38px;
-  padding: 10px;
-  resize: vertical;
-}
-
-.priority-template-table td {
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.65;
-}
-
-.decision-field {
-  margin-top: 16px;
-}
-
-.decision-field span {
-  margin-bottom: 8px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-}
-
-.decision-field textarea {
-  min-height: 110px;
-  padding: 12px 14px;
-}
-
-.completion-content p {
-  margin: 0;
+.btn-nav.btn-primary {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
 }
 
-.step-navigation {
-  display: flex;
-  justify-content: center;
-  gap: 14px;
-  margin-top: 22px;
+.btn-nav.btn-primary:hover:not(:disabled) {
+  background: var(--student-accent-deep);
+  border-color: var(--student-accent-deep);
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
 }
 
-.btn-nav {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  min-height: 40px;
-  padding: 0 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font: inherit;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-  cursor: pointer;
+.btn-nav.btn-save {
+  border-color: #e5e7eb;
+  color: var(--student-accent-light);
+  background: var(--student-accent-soft);
+  box-shadow: none;
 }
 
-.btn-nav.btn-primary,
-.btn-nav.btn-save {
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+.btn-nav.btn-save:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: #e9ecef;
+  color: var(--student-accent);
+  box-shadow: none;
 }
 
 .btn-nav:disabled {
   cursor: not-allowed;
-  opacity: 0.45;
+  opacity: 0.5;
+  transform: none;
+  box-shadow: none;
 }
 
+/* training-actions 容器：保留，el-button 由全局样式接管 */
 .training-actions {
-  margin-top: 36px;
-}
-
-.rice-intro {
-  margin-bottom: 16px;
-  padding: 18px 20px;
-  border-left: 3px solid #42a5f5;
-  border-radius: 0 14px 14px 0;
-  background: linear-gradient(90deg, #e3f2fd, #e3f2fd);
-
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.85;
-  }
-
-  p + p {
-    margin-top: 5px;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 20px;
 }
 
-.priority-score-table {
-  min-width: 1100px;
-
-  th,
-  td {
-    text-align: center;
-    vertical-align: middle;
+/* ===== 响应式 ===== */
+@media (max-width: 900px) {
+  .workbench-head,
+  .workbench-actions {
+    align-items: stretch;
+    flex-direction: column;
   }
 
-  td {
-    height: 66px;
-    padding: 8px;
+  .outline-action,
+  .step-navigation,
+  .btn-nav {
+    width: 100%;
   }
 
-  .auto-score-cell {
-    color: #2c4a6a;
-    background: #e3f2fd;
-    font-weight: 800;
+  .step-navigation {
+    flex-direction: column;
   }
 
-  .auto-score-cell--name {
-    min-width: 180px;
-    color: #2c4a6a;
-    font-weight: 700;
-    line-height: 1.55;
-    word-break: break-word;
+  .conversion-intro,
+  .conversion-row-actions {
+    align-items: stretch;
+    flex-direction: column;
   }
 
-  select,
-  input {
+  .conversion-row-actions .el-button {
     width: 100%;
-    min-height: 36px;
-    padding: 0 9px;
-    border: 1px solid #cfe2f5;
-    border-radius: 8px;
-    outline: none;
-    color: #1e3a5f;
-    background: #f0f6fd;
-    font: inherit;
-    font-size: var(--student-fs-body-sm);
-    box-sizing: border-box;
-
-    &:focus {
-      border-color: rgba(30, 136, 229, 0.40);
-      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.08);
-    }
-  }
-
-  .metric-input {
-    position: relative;
-
-    input {
-      padding-right: 24px;
-    }
-
-    span {
-      position: absolute;
-      top: 50%;
-      right: 9px;
-      color: #5a7a9a;
-      font-size: var(--student-fs-caption);
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
   }
+}
+</style>
 
-  .rice-score-cell {
-    color: #42a5f5;
-    font-size: var(--student-fs-h2);
-    font-weight: 900;
-    background: #e3f2fd;
-  }
+<style lang="scss">
+/* ===== 画布 + 行高 ===== */
+#app .studentLayout .app-main:has(.feature-conversion-page) {
+  background: #ffffff !important;
+}
+#app .studentLayout .app-main:has(.feature-conversion-page) .feature-conversion-page {
+  line-height: 1.55 !important;
 }
 
-.priority-decision-table {
-  width: 100%;
-  min-width: 860px;
-  border-collapse: collapse;
-  table-layout: fixed;
+/* ===== 步骤导航：按钮切换风 ===== */
+#app .studentLayout section.app-main:has(.feature-conversion-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 
-  th,
-  td {
-    border: 1px solid #cfe2f5;
-    text-align: center;
-    vertical-align: middle;
-  }
+  .step-connector { display: none !important; }
 
-  th {
-    padding: 12px;
-    color: #1e3a5f;
-    background: linear-gradient(100deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-body);
-    font-weight: 800;
-  }
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
 
-  td {
-    height: 76px;
-    padding: 10px;
-    color: #2c4a6a;
-    background: #f0f6fd;
-  }
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 0 !important;
+      min-width: 0 !important;
+    }
 
-  th:nth-child(1),
-  td:nth-child(1) {
-    width: 22%;
-  }
+    .step-name {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      line-height: 1.3 !important;
+      color: inherit !important;
+    }
 
-  th:nth-child(2),
-  td:nth-child(2) {
-    width: 18%;
-  }
+    .step-action { display: none !important; }
 
-  select {
-    width: min(100%, 130px);
-    min-height: 36px;
-    padding: 0 9px;
-    border: 1px solid #cfe2f5;
-    border-radius: 8px;
-    outline: none;
-    color: #1e3a5f;
-    background: #f0f6fd;
-    font: inherit;
-  }
+    /* 未到达项 hover */
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
 
-  textarea {
-    display: block;
-    width: 100%;
-    height: 72px;
-    min-height: 46px;
-    padding: 10px;
-    border: 1px solid #cfe2f5;
-    border-radius: 10px;
-    outline: none;
-    color: #1e3a5f;
-    background: #f0f6fd;
-    font: inherit;
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.55;
-    resize: vertical;
-    box-sizing: border-box;
+    /* 已完成 */
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
 
-    &:focus {
-      border-color: #cfe2f5;
-      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.10);
+    /* 当前步骤 */
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
     }
   }
 }
 
-.priority-legend {
-  display: grid;
-  gap: 6px;
-  margin-top: 18px;
-  padding: 16px 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  background: #e3f2fd;
-
-  p {
-    margin: 0;
-    color: #5a7a9a;
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.65;
+/* ===== 窄屏 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.feature-conversion-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
   }
-
-  strong {
-    display: inline-block;
-    min-width: 29px;
-    margin-right: 8px;
-    color: #42a5f5;
+  #app .studentLayout section.app-main:has(.feature-conversion-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
   }
 }
 
-.rice-formula {
-  margin: 12px 0 0 !important;
-  color: #ff9a8d;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 800;
+/* ===== 顶部任务工具栏换肤 ===== */
+.feature-conversion-page .task-toolbar-button.el-button,
+.feature-conversion-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;
 }
 
-@media (max-width: 1100px) {
-  .feature-conversion-page {
-    grid-template-columns: 1fr;
-  }
+.feature-conversion-page .task-toolbar-button.el-button .el-icon,
+.feature-conversion-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
 }
 
-@media (max-width: 900px) {
-  .feature-conversion-page {
-    padding: 14px;
-  }
-
-  .training-core {
-    padding: 18px;
-    border-radius: 24px;
-  }
-
-  .workbench-head,
-  .workbench-actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .workbench-actions,
-  .outline-action,
-  .step-navigation,
-  .btn-nav,
-  .training-actions :deep(.training-action) {
-    width: 100%;
-  }
-
-  .step-indicator {
-    align-items: stretch;
-    flex-direction: column;
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    overflow: visible;
-    border-radius: 20px;
-  }
-
-  .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-
-  .step-connector {
-    flex: 0 0 20px;
-    min-width: 0;
-    width: 2px;
-    height: 20px;
-    margin-left: 29px;
-    text-align: center;
-    writing-mode: vertical-rl;
-  }
-
-  .step-navigation {
-    flex-direction: column;
-  }
+.feature-conversion-page .task-toolbar-button.el-button:hover,
+.feature-conversion-page .task-toolbar-button.el-button:focus,
+.feature-conversion-page .material-button.el-button:hover,
+.feature-conversion-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
 
-  .conversion-intro,
-  .conversion-row-actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
+.feature-conversion-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);
+}
 
-  .conversion-row-actions .el-button {
-    width: 100%;
-  }
+.feature-conversion-page .task-toolbar-button--submit.el-button:hover,
+.feature-conversion-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);
 }
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+
+.feature-conversion-page .task-toolbar-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
 }
 </style>
-
-
diff --git a/src/views/demand/industry-demand-analysis.vue b/src/views/demand/industry-demand-analysis.vue
index 91a1513..c2be98b 100644
--- a/src/views/demand/industry-demand-analysis.vue
+++ b/src/views/demand/industry-demand-analysis.vue
@@ -692,18 +692,18 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
   .step-connector { display: none !important; }
 
   .step-tab {
-    flex: 1 1 0 !important;
-    max-width: 220px !important;
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
     display: flex !important;
     flex-direction: row !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 8px !important;
-    min-width: 0 !important;
     height: auto !important;
     min-height: 42px !important;
     margin: 0 !important;
-    padding: 8px 12px !important;
+    padding: 8px 14px !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 8px !important;
     background: #ffffff !important;
@@ -713,7 +713,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
     font-weight: 600 !important;
     line-height: 1.3 !important;
     letter-spacing: 0 !important;
-    white-space: normal !important;
+    white-space: nowrap !important;
     text-align: center !important;
     cursor: pointer;
     transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
@@ -799,7 +799,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify(buildDraft(), n
     overflow-x: auto !important;
   }
   #app .studentLayout section.app-main:has(.industry-pest-page) .step-indicator .step-tab {
-    flex: 0 0 148px !important;
+    flex: 0 0 auto !important;
     max-width: none !important;
   }
 }
diff --git a/src/views/demand/people.vue b/src/views/demand/people.vue
index a529915..5ab442c 100644
--- a/src/views/demand/people.vue
+++ b/src/views/demand/people.vue
@@ -2,17 +2,26 @@
   <div class="target-profile-page student-training-shell">
     <main class="training-core">
       <section class="task-header">
-        <div class="task-badge">市场洞察与需求分析</div>
-        <h1 class="task-title">{{ taskTitle }}</h1>
+        <div class="task-head-main">
+          <span class="task-badge">市场洞察与需求分析</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="task-card">
       <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
@@ -25,21 +34,20 @@
         </div>
 
         <nav v-if="steps.length" 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}`"
-              @click="currentStep = step.no"
-            >
-              <span class="step-marker">{{ 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"></span>
-          </template>
+          <button
+            v-for="(step, index) 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-bar" aria-hidden="true"></span>
+            <span class="step-no" aria-hidden="true">{{ String(step.no).padStart(2, '0') }}</span>
+            <span class="step-name">{{ step.name }}</span>
+          </button>
         </nav>
 
         <section class="step-card target-profile-step-card">
@@ -156,9 +164,11 @@
                   <th scope="row">{{ insight.dimension }}</th>
                   <td>{{ insight.keyPoint }}</td>
                   <td>
-                    <textarea
+                    <el-input
                       v-model="insight.analysis"
                       class="rfm-insight-input"
+                      type="textarea"
+                      :autosize="{ minRows: 2 }"
                       :placeholder="`请结合${insight.dimension}填写分析结论`"
                     />
                   </td>
@@ -212,15 +222,15 @@
               <div class="portrait-user portrait-user--form">
                 <label>
                   <span>用户：</span>
-                  <input v-model="record.user" class="portrait-input" :placeholder="`例如：${record.code}`" />
+                  <el-input v-model="record.user" class="portrait-input" :placeholder="`例如：${record.code}`" />
                 </label>
                 <label>
                   <span>基础属性：</span>
-                  <input v-model="record.basicAttributes" class="portrait-input portrait-input--wide" placeholder="年龄、性别、职业、收入、城市等" />
+                  <el-input v-model="record.basicAttributes" class="portrait-input portrait-input--wide" placeholder="年龄、性别、职业、收入、城市等" />
                 </label>
                 <label>
                   <span>标签：</span>
-                  <input v-model="record.tags" class="portrait-input portrait-input--wide" placeholder="例如：高价值用户、品质偏好者" />
+                  <el-input v-model="record.tags" class="portrait-input portrait-input--wide" placeholder="例如：高价值用户、品质偏好者" />
                 </label>
               </div>
 
@@ -228,9 +238,9 @@
                 <div class="portrait-head">行为特征</div>
                 <div class="portrait-head">需求痛点</div>
                 <div class="portrait-head">消费心理</div>
-                <textarea v-model="record.behavior" class="portrait-cell" placeholder="请结合访谈记录归纳行为特征" />
-                <textarea v-model="record.painPoints" class="portrait-cell" placeholder="请结合访谈记录归纳需求痛点" />
-                <textarea v-model="record.psychology" class="portrait-cell" placeholder="请结合访谈记录归纳消费心理" />
+                <el-input v-model="record.behavior" class="portrait-cell" type="textarea" :autosize="{ minRows: 2 }" placeholder="请结合访谈记录归纳行为特征" />
+                <el-input v-model="record.painPoints" class="portrait-cell" type="textarea" :autosize="{ minRows: 2 }" placeholder="请结合访谈记录归纳需求痛点" />
+                <el-input v-model="record.psychology" class="portrait-cell" type="textarea" :autosize="{ minRows: 2 }" placeholder="请结合访谈记录归纳消费心理" />
               </div>
             </section>
           </div>
@@ -271,7 +281,7 @@
               <tbody>
                 <tr v-for="(segment, index) in form.marketSegments" :key="index">
                   <td>
-                    <input v-model="segment.market" class="market-segment-input" placeholder="请输入细分市场" />
+                    <el-input v-model="segment.market" class="market-segment-input" placeholder="请输入细分市场" />
                   </td>
                   <td>
                     <el-radio-group v-model="segment.attractiveness" class="market-attractiveness">
@@ -280,9 +290,9 @@
                       <el-radio label="低">低</el-radio>
                     </el-radio-group>
                   </td>
-                  <td><textarea v-model="segment.painPoints" class="market-segment-textarea" placeholder="结合用户画像填写需求痛点" /></td>
-                  <td><textarea v-model="segment.behaviorCharacteristics" class="market-segment-textarea" placeholder="填写该细分用户的行为特征" /></td>
-                  <td><textarea v-model="segment.productOpportunity" class="market-segment-textarea" placeholder="提炼可切入的产品机会" /></td>
+                  <td><el-input v-model="segment.painPoints" class="market-segment-textarea" type="textarea" :autosize="{ minRows: 2 }" placeholder="结合用户画像填写需求痛点" /></td>
+                  <td><el-input v-model="segment.behaviorCharacteristics" class="market-segment-textarea" type="textarea" :autosize="{ minRows: 2 }" placeholder="填写该细分用户的行为特征" /></td>
+                  <td><el-input v-model="segment.productOpportunity" class="market-segment-textarea" type="textarea" :autosize="{ minRows: 2 }" placeholder="提炼可切入的产品机会" /></td>
                 </tr>
               </tbody>
             </table>
@@ -291,7 +301,7 @@
           <div class="market-selection-block">
             <p class="section-eyebrow">市场选择</p>
             <h4>结合前面的数据分析，请说明团队应该针对哪些用户，开发什么样的产品。</h4>
-            <textarea v-model="form.marketSelection" class="market-selection-textarea" placeholder="请写明目标用户、核心需求和建议开发的产品方案" />
+            <el-input v-model="form.marketSelection" class="market-selection-textarea" type="textarea" :autosize="{ minRows: 2 }" placeholder="请写明目标用户、核心需求和建议开发的产品方案" />
           </div>
         </section>
 
@@ -337,7 +347,6 @@ import { ArrowLeft, ArrowRight, CircleCheck, Document, Download, Upload } from "
 import * as XLSX from "xlsx";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
 import { checkTargetUserProfileStepFive, checkTargetUserProfileStepFour, checkTargetUserProfileStepOne, checkTargetUserProfileStepThree, checkTargetUserProfileStepTwo, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
@@ -371,6 +380,7 @@ const uploadingChartId = ref("");
 const chartPreviewVisible = ref(false);
 const activeChartPreview = ref({ title: "图表预览", url: "" });
 const currentStep = ref(1);
+const briefOpen = ref(false);
 const activeInterviewIndex = ref(0);
 const interviewDialogVisible = ref(false);
 
@@ -388,77 +398,30 @@ const interviewTranscripts = [
     code: "U01",
     basicAttributes: "李伟，29岁，男性，上海，互联网公司程序员，月收入约2.8万元",
     content: [
-      {
-        question: "您平时的睡眠质量如何？通常因为什么失眠？",
-        answer:
-          "非常差。几乎每天都熬夜，不是因为想玩，是脑子停不下来，一直在想工作上的bug和方案。即使躺下，也觉得心神不宁，入睡特别困难。有时候心脏会有点不舒服，知道是压力大和缺觉搞的。",
-      },
-      {
-        question: "您尝试过哪些方法来改善睡眠？",
-        answer:
-          "买过褪黑素，吃了一段时间感觉效果不明显，而且怕有依赖。也用过一些冥想App，听着白噪音确实有点用，但手机亮着屏幕放在旁边总觉得不舒服，而且容易被消息通知打断。",
-      },
-      {
-        question: "如果有一款智能助眠灯，您最希望它有什么功能？",
-        answer:
-          "首先，光一定要柔和，能让我放松下来。其次，最好能无缝衔接我用的冥想App的内容，别让我再来回切换。还有就是，我挺想知道自己每晚到底睡了多久，醒了多少次，有个数据报告会让我觉得这钱花得值。如果能在我睡着后自动关灯、调低空调温度，那就太智能了。",
-      },
-      {
-        question: "在购买这类产品时，您最看重什么？",
-        answer:
-          "效果和科技感。价格不是最敏感的因素，只要它真的能帮我解决问题，我愿意为专业和便捷付费。品牌最好有点调性，别显得太廉价。",
-      },
+      { question: "您平时的睡眠质量如何？通常因为什么失眠？", answer: "非常差。几乎每天都熬夜，不是因为想玩，是脑子停不下来，一直在想工作上的bug和方案。即使躺下，也觉得心神不宁，入睡特别困难。有时候心脏会有点不舒服，知道是压力大和缺觉搞的。" },
+      { question: "您尝试过哪些方法来改善睡眠？", answer: "买过褪黑素，吃了一段时间感觉效果不明显，而且怕有依赖。也用过一些冥想App，听着白噪音确实有点用，但手机亮着屏幕放在旁边总觉得不舒服，而且容易被消息通知打断。" },
+      { question: "如果有一款智能助眠灯，您最希望它有什么功能？", answer: "首先，光一定要柔和，能让我放松下来。其次，最好能无缝衔接我用的冥想App的内容，别让我再来回切换。还有就是，我挺想知道自己每晚到底睡了多久，醒了多少次，有个数据报告会让我觉得这钱花得值。如果能在我睡着后自动关灯、调低空调温度，那就太智能了。" },
+      { question: "在购买这类产品时，您最看重什么？", answer: "效果和科技感。价格不是最敏感的因素，只要它真的能帮我解决问题，我愿意为专业和便捷付费。品牌最好有点调性，别显得太廉价。" },
     ],
   },
   {
     code: "U02",
     basicAttributes: "赵静，31岁，女性，杭州，中学教师，月收入约1.5万元",
     content: [
-      {
-        question: "您目前的睡眠状况是怎样的？",
-        answer:
-          "碎片化，非常碎片化。宝宝现在一岁多，夜里还是会醒。从她出生后我就没睡过一个整觉。现在问题是，即使宝宝睡了，我自己也因为长期疲劳变得神经衰弱，很难深度睡眠，有点声音就醒。",
-      },
-      {
-        question: "在您的睡前时光，通常有什么习惯或需求？",
-        answer:
-          "我需要一段属于自己的“缓冲时间”。会看会儿手机，但知道蓝光不好。也希望有一些温和的声音能盖掉家里的其他杂音，帮助我放松。另外，夜里起床照顾宝宝，需要一盏能瞬间提供柔和、不刺眼照明的小灯，现在开大灯太晃眼了。",
-      },
-      {
-        question: "对于智能助眠灯，您有什么期待？",
-        answer:
-          "操作一定要简单！我可没时间研究复杂的APP。最好能语音控制，比如我说“小眠，开夜灯”，它就亮起最暗的光。灯光颜色最好能适合哺乳。内容上，我希望有一些针对成人的睡前放松引导，或者温和的轻音乐，最好也能播放一些给宝宝听的摇篮曲。",
-      },
-      {
-        question: "购买决策时，哪些因素会打动您？",
-        answer: "安全、实用、高性价比。材质必须安全无害，因为宝宝可能会碰到。功能要真正解决我的痛点，而不是花里胡哨。",
-      },
+      { question: "您目前的睡眠状况是怎样的？", answer: "碎片化，非常碎片化。宝宝现在一岁多，夜里还是会醒。从她出生后我就没睡过一个整觉。现在问题是，即使宝宝睡了，我自己也因为长期疲劳变得神经衰弱，很难深度睡眠，有点声音就醒。" },
+      { question: "在您的睡前时光，通常有什么习惯或需求？", answer: "我需要一段属于自己的缓冲时间。会看会儿手机，但知道蓝光不好。也希望有一些温和的声音能盖掉家里的其他杂音，帮助我放松。另外，夜里起床照顾宝宝，需要一盏能瞬间提供柔和、不刺眼照明的小灯，现在开大灯太晃眼了。" },
+      { question: "对于智能助眠灯，您有什么期待？", answer: "操作一定要简单！我可没时间研究复杂的APP。最好能语音控制，比如我说小眠，开夜灯，它就亮起最暗的光。灯光颜色最好能适合哺乳。内容上，我希望有一些针对成人的睡前放松引导，或者温和的轻音乐，最好也能播放一些给宝宝听的摇篮曲。" },
+      { question: "购买决策时，哪些因素会打动您？", answer: "安全、实用、高性价比。材质必须安全无害，因为宝宝可能会碰到。功能要真正解决我的痛点，而不是花里胡哨。" },
     ],
   },
   {
     code: "U03",
     basicAttributes: "王悦，22岁，女性，广州，设计专业大学生，月生活费约3000元",
     content: [
-      {
-        question: "您关注睡眠健康吗？",
-        answer:
-          "关注！我们寝室经常聊“朋克养生”，就是一边熬夜做设计作业，一边泡枸杞。我知道睡眠很重要，但有时候是功课多，有时候就是单纯不想睡，刷短视频停不下来。",
-      },
-      {
-        question: "您的睡前仪式通常包括什么？",
-        answer:
-          "我很喜欢营造氛围感。会在宿舍点香薰蜡烛，但不太安全。也喜欢用手机放ASMR或者助眠视频，但同样需要开着屏幕。我觉得我的睡眠环境需要更有“仪式感”和“科技感”。",
-      },
-      {
-        question: "一款什么样的助眠灯会吸引您购买？",
-        answer:
-          "颜值是第一位的！设计必须好看，有质感，能融入我的宿舍装饰风格。灯光效果要多，能切换不同颜色和模式，满足我学习、休息、自拍打光等不同场景。可以没有深入的睡眠监测，但一定要能语音控制，和我互动，比如问问天气、设定闹钟。最好还有一些有趣的、小众的白噪音，比如雨声、篝火声。",
-      },
-      {
-        question: "在消费这类产品时，您是怎样的心理？",
-        answer:
-          "我愿意为“情绪价值”和“社交价值”买单。它不仅要好用，还要能成为我的一个“社交货币”，就是可以拍照分享到小红书的那种。价格不能太贵，四五百元我觉得是上限了，但如果它足够好看、好玩，我会非常心动。",
-      },
+      { question: "您关注睡眠健康吗？", answer: "关注！我们寝室经常聊朋克养生，就是一边熬夜做设计作业，一边泡枸杞。我知道睡眠很重要，但有时候是功课多，有时候就是单纯不想睡，刷短视频停不下来。" },
+      { question: "您的睡前仪式通常包括什么？", answer: "我很喜欢营造氛围感。会在宿舍点香薰蜡烛，但不太安全。也喜欢用手机放ASMR或者助眠视频，但同样需要开着屏幕。我觉得我的睡眠环境需要更有仪式感和科技感。" },
+      { question: "一款什么样的助眠灯会吸引您购买？", answer: "颜值是第一位的！设计必须好看，有质感，能融入我的宿舍装饰风格。灯光效果要多，能切换不同颜色和模式，满足我学习、休息、自拍打光等不同场景。可以没有深入的睡眠监测，但一定要能语音控制，和我互动，比如问问天气、设定闹钟。最好还有一些有趣的、小众的白噪音，比如雨声、篝火声。" },
+      { question: "在消费这类产品时，您是怎样的心理？", answer: "我愿意为情绪价值和社交价值买单。它不仅要好用，还要能成为我的一个社交货币，就是可以拍照分享到小红书的那种。价格不能太贵，四五百元我觉得是上限了，但如果它足够好看、好玩，我会非常心动。" },
     ],
   },
 ];
@@ -467,36 +430,9 @@ const currentInterviewTranscript = computed(() => interviewTranscripts.find((ite
 
 function createKeyUserRecords() {
   return [
-    {
-      title: "访谈记录一",
-      code: "U01",
-      user: "",
-      basicAttributes: "",
-      tags: "",
-      behavior: "",
-      painPoints: "",
-      psychology: "",
-    },
-    {
-      title: "访谈记录二",
-      code: "U02",
-      user: "",
-      basicAttributes: "",
-      tags: "",
-      behavior: "",
-      painPoints: "",
-      psychology: "",
-    },
-    {
-      title: "访谈记录三",
-      code: "U03",
-      user: "",
-      basicAttributes: "",
-      tags: "",
-      behavior: "",
-      painPoints: "",
-      psychology: "",
-    },
+    { title: "访谈记录一", code: "U01", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "" },
+    { title: "访谈记录二", code: "U02", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "" },
+    { title: "访谈记录三", code: "U03", user: "", basicAttributes: "", tags: "", behavior: "", painPoints: "", psychology: "" },
   ];
 }
 
@@ -535,13 +471,7 @@ function createEmptyRfmInsights() {
 }
 
 function createEmptyPreview() {
-  return {
-    sheetName: "",
-    columns: [],
-    rows: [],
-    totalRows: 0,
-    totalColumns: 0,
-  };
+  return { sheetName: "", columns: [], rows: [], totalRows: 0, totalColumns: 0 };
 }
 
 const form = ref(createForm());
@@ -555,10 +485,7 @@ const flowSteps = computed(() => {
   return configuredSteps.length >= DEFAULT_FLOW_STEPS.length ? configuredSteps : DEFAULT_FLOW_STEPS;
 });
 const steps = computed(() =>
-  flowSteps.value.map((name, index) => ({
-    no: index + 1,
-    name,
-  }))
+  flowSteps.value.map((name, index) => ({ no: index + 1, name }))
 );
 const activeStepName = computed(() => steps.value.find((step) => step.no === currentStep.value)?.name || "");
 const hasExcelPreview = computed(() => form.value.profilePreview.columns.length > 0);
@@ -601,9 +528,7 @@ function parseArray(value, fallback) {
   if (Array.isArray(value)) {
     return value.length ? value : fallback;
   }
-  if (!value) {
-    return fallback;
-  }
+  if (!value) return fallback;
   try {
     const parsed = JSON.parse(value);
     return Array.isArray(parsed) && parsed.length ? parsed : fallback;
@@ -673,15 +598,10 @@ function applySavedAnswer(value) {
 
 function normalizeRfmCharts(charts) {
   const defaults = createEmptyRfmCharts();
-  if (!charts || typeof charts !== "object") {
-    return defaults;
-  }
+  if (!charts || typeof charts !== "object") return defaults;
   return RFM_CHARTS.reduce((result, chart) => {
     const value = charts[chart.id] || {};
-    result[chart.id] = {
-      url: String(value.url || ""),
-      name: String(value.name || ""),
-    };
+    result[chart.id] = { url: String(value.url || ""), name: String(value.name || "") };
     return result;
   }, defaults);
 }
@@ -707,9 +627,7 @@ function normalizeExcelPreview(preview) {
   };
 }
 
-function triggerFileSelect() {
-  fileInputRef.value?.click();
-}
+function triggerFileSelect() { fileInputRef.value?.click(); }
 
 function downloadBuiltInFile(url, fileName) {
   const link = document.createElement("a");
@@ -720,23 +638,14 @@ function downloadBuiltInFile(url, fileName) {
   document.body.removeChild(link);
 }
 
-function downloadRfmInstructions() {
-  downloadBuiltInFile(RFM_INSTRUCTIONS_URL, "8.实训操作说明.docx");
-}
-
-function downloadRfmTemplate() {
-  downloadBuiltInFile(RFM_TEMPLATE_URL, "8.Excel计算与可视化模版.xlsx");
-}
+function downloadRfmInstructions() { downloadBuiltInFile(RFM_INSTRUCTIONS_URL, "8.实训操作说明.docx"); }
+function downloadRfmTemplate() { downloadBuiltInFile(RFM_TEMPLATE_URL, "8.Excel计算与可视化模版.xlsx"); }
 
 function setChartInputRef(chartId, element) {
-  if (element) {
-    chartFileInputRefs.value[chartId] = element;
-  }
+  if (element) chartFileInputRefs.value[chartId] = element;
 }
 
-function triggerChartFileSelect(chartId) {
-  chartFileInputRefs.value[chartId]?.click();
-}
+function triggerChartFileSelect(chartId) { chartFileInputRefs.value[chartId]?.click(); }
 
 function openChartPreview(chart) {
   const file = form.value.rfmCharts[chart.id];
@@ -815,9 +724,7 @@ async function handleChartFileChange(chart, event) {
   try {
     const res = await uploadStudentTrainingFile(data);
     const url = res?.url || res?.fileName || res?.data?.url || res?.data?.fileName || "";
-    if (!url) {
-      throw new Error("上传结果缺少文件地址");
-    }
+    if (!url) throw new Error("上传结果缺少文件地址");
     form.value.rfmCharts[chart.id] = { url, name: file.name };
     openChartPreview(chart);
     proxy?.$modal?.msgSuccess(`${chart.title}上传成功`);
@@ -837,13 +744,9 @@ async function parseExcelPreview(file) {
   }
   const rawRows = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1, defval: "", raw: false });
   const rows = rawRows.filter((row) => Array.isArray(row) && row.some((cell) => String(cell ?? "").trim()));
-  if (rows.length < 2) {
-    throw new Error("Excel 至少需要包含一行表头和一行数据");
-  }
+  if (rows.length < 2) throw new Error("Excel 至少需要包含一行表头和一行数据");
   const columns = rows[0].map((cell) => String(cell ?? ""));
-  if (!columns.length) {
-    throw new Error("Excel 表头不能为空");
-  }
+  if (!columns.length) throw new Error("Excel 表头不能为空");
   const dataRows = rows.slice(1);
   return {
     sheetName,
@@ -869,10 +772,7 @@ function buildAnswerPayload(status) {
       profilePreview: form.value.profilePreview,
       rfmCharts: form.value.rfmCharts,
       rfmInsights: form.value.rfmInsights,
-      file: {
-        name: form.value.profileFileName,
-        url: form.value.profileFileUrl,
-      },
+      file: { name: form.value.profileFileName, url: form.value.profileFileUrl },
       profileAnalysis: form.value.profileAnalysis,
       keyUserProfile: form.value.keyUserProfile,
       keyUserRecords: form.value.keyUserRecords,
@@ -886,21 +786,10 @@ async function persist(status = "IN_PROGRESS") {
   saving.value = true;
   try {
     if (status !== "RESET" && (currentStep.value === 1 || status === "SUBMITTED")) {
-      await checkTargetUserProfileStepOne({
-        excelUrl: form.value.profileFileUrl,
-        excelName: form.value.profileFileName,
-        previewRowCount: form.value.profilePreview.rows.length,
-        previewColumnCount: form.value.profilePreview.columns.length,
-      });
+      await checkTargetUserProfileStepOne({ excelUrl: form.value.profileFileUrl, excelName: form.value.profileFileName, previewRowCount: form.value.profilePreview.rows.length, previewColumnCount: form.value.profilePreview.columns.length });
     }
     if (status !== "RESET" && (currentStep.value === 2 || status === "SUBMITTED")) {
-      await checkTargetUserProfileStepTwo({
-        charts: RFM_CHARTS.map((chart) => ({
-          type: chart.id,
-          url: form.value.rfmCharts[chart.id]?.url || "",
-          name: form.value.rfmCharts[chart.id]?.name || "",
-        })),
-      });
+      await checkTargetUserProfileStepTwo({ charts: RFM_CHARTS.map((chart) => ({ type: chart.id, url: form.value.rfmCharts[chart.id]?.url || "", name: form.value.rfmCharts[chart.id]?.name || "" })) });
     }
     if (status !== "RESET" && (currentStep.value === 3 || status === "SUBMITTED")) {
       await checkTargetUserProfileStepThree({ insights: form.value.rfmInsights });
@@ -918,35 +807,18 @@ async function persist(status = "IN_PROGRESS") {
   }
 }
 
-function saveCurrentProgress() {
-  return persist("IN_PROGRESS");
-}
-
-async function goNext() {
-  await persist("IN_PROGRESS");
-  currentStep.value += 1;
-}
-
-function submitTask() {
-  return persist("SUBMITTED");
-}
-
-async function resetTraining() {
-  form.value = createForm();
-  currentStep.value = 1;
-  await persist("RESET");
-}
+function saveCurrentProgress() { return persist("IN_PROGRESS"); }
+async function goNext() { await persist("IN_PROGRESS"); currentStep.value += 1; }
+function submitTask() { return persist("SUBMITTED"); }
+async function resetTraining() { form.value = createForm(); currentStep.value = 1; await persist("RESET"); }
 
 function exportOutcome() {
-  const keyUserRecordsText = form.value.keyUserRecords
-    .map(
-      (record) =>
-        `${record.title}（${record.code}）\n用户：${record.user || ""}\n基础属性：${record.basicAttributes || ""}\n标签：${record.tags || ""}\n行为特征：\n${record.behavior || ""}\n需求痛点：\n${record.painPoints || ""}\n消费心理：\n${record.psychology || ""}`,
-    )
-    .join("\n\n");
-  const segmentationText = form.value.marketSegments
-    .map((row) => `${row.market || ""}\n市场吸引力：${row.attractiveness || ""}\n需求痛点：\n${row.painPoints || ""}\n行为特征：\n${row.behaviorCharacteristics || ""}\n产品机会：\n${row.productOpportunity || ""}`)
-    .join("\n\n");
+  const keyUserRecordsText = form.value.keyUserRecords.map((record) =>
+    `${record.title}（${record.code}）\n用户：${record.user || ""}\n基础属性：${record.basicAttributes || ""}\n标签：${record.tags || ""}\n行为特征：\n${record.behavior || ""}\n需求痛点：\n${record.painPoints || ""}\n消费心理：\n${record.psychology || ""}`
+  ).join("\n\n");
+  const segmentationText = form.value.marketSegments.map((row) =>
+    `${row.market || ""}\n市场吸引力：${row.attractiveness || ""}\n需求痛点：\n${row.painPoints || ""}\n行为特征：\n${row.behaviorCharacteristics || ""}\n产品机会：\n${row.productOpportunity || ""}`
+  ).join("\n\n");
   const rfmInsightsText = form.value.rfmInsights.map((item) => `${item.dimension}：\n${item.analysis || ""}`).join("\n\n");
   const rfmChartsText = RFM_CHARTS.map((chart) => `${chart.title}：${form.value.rfmCharts[chart.id]?.url || "未上传"}`).join("\n");
   const content = `目标用户画像\n\n任务流程：${flowSteps.value.join(" > ")}\n\nRFM 分层分析 Excel：${form.value.profileFileName || "未上传"}\n文件地址：${form.value.profileFileUrl || ""}\n\nRFM 可视化图表：\n${rfmChartsText}\n\nRFM 用户群体特点分析：\n${rfmInsightsText}\n\n重点用户画像：\n${keyUserRecordsText}\n\n用户细分与市场选择：\n${segmentationText}\n\n市场选择结论：\n${form.value.marketSelection || ""}`;
@@ -961,111 +833,155 @@ function exportOutcome() {
 </script>
 
 <style lang="scss" scoped>
+/* ==========================================================
+ * 页面级令牌（墨黑极简主题）：纯白画布 + 墨黑主操作 + 中性灰层次
+ * ========================================================== */
 .target-profile-page {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  width: 100%;
-  max-width: 100%;
-  min-height: calc(100vh - 106px);
-  margin: 0;
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
-  background: #ffffff;
+  /* 主色：墨黑 */
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  /* 语义色 */
+  --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-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(30, 60, 100, 0.10), inset 0 1px 0 rgba(30, 136, 229, 0.08);
-  backdrop-filter: blur(8px);
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
+/* 任务头：独立卡片（徽章 + 标题 + 可展开 brief） */
 .task-header {
-  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #e7e9ed;
+  border-radius: 16px;
+  background: #ffffff;
+  margin-bottom: 0;
+}
+
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .task-badge {
   display: inline-flex;
-  margin-bottom: 12px;
-  padding: 4px 14px;
-  border: 1px solid #9cc8ef;
-  border-radius: 30px;
-  color: #1565c0;
-  background: #cfe2f5;
-  font-size: var(--student-fs-caption);
+  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: #1e3a5f;
-  font-size: var(--student-fs-display);
-  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,
-  li {
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
 
-  p,
-  ol {
-    margin: 0;
-  }
+.task-brief-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--student-accent-deep);
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  margin-left: 4px;
+
+  &:hover { text-decoration: underline; }
+}
+
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+
+  b { color: var(--student-text); }
 
-  ol {
+  ul {
+    display: grid;
+    gap: 4px;
+    margin: 0;
     padding-left: 18px;
   }
-}
 
-.subtitle-icon {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  color: #b9e2ff;
-  font-weight: 800;
+  p { margin: 0; }
 }
 
-.subtitle-icon--spaced {
-  margin-top: 12px;
+/* 套娃层扁平化 */
+.task-card {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
 }
 
+/* workbench-head：扁平化 */
 .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;
+  padding: 0;
+  margin-bottom: 0;
+  border-bottom: 0;
+}
 
-  h3 {
-    margin: 4px 0 8px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h1);
-    font-weight: 800;
-    line-height: 1.3;
-  }
+.workbench-head--actions-only {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
 }
 
 .workbench-actions {
@@ -1077,858 +993,213 @@ function exportOutcome() {
   gap: 10px;
 }
 
+/* section 小标签：灰色宽字距引导文字 */
 .section-eyebrow {
+  display: inline-flex;
+  align-items: center;
   margin: 0;
-  color: #71dfff;
-  font-size: var(--student-fs-caption);
+  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: var(--student-fs-body);
-  font-weight: 400;
-  line-height: 1.8;
+  line-height: 1.3;
+  letter-spacing: 0.12em;
 }
 
+/* 次按钮基类：白底 + 墨黑描边 */
 .outline-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-
-  &:hover:not(.is-disabled) {
-    transform: translateY(-1px);
-    border-color: #1e88e5;
-    background: #bbdefb;
-  }
-}
-
-.step-card {
-  margin-bottom: 0;
-}
-
-.step-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  width: calc(100% + 24px);
-  margin: 0 -12px 32px;
-  overflow-x: auto;
-  padding: 18px 22px;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(90deg, #eef5fc, #eef5fc),
-    rgba(30, 60, 100, 0.12);
-  box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.08);
-  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);
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
   font-family: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  text-align: left;
+  font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    border-color: #1e88e5;
-    color: #1e3a5f;
-    background: #bbdefb;
-    box-shadow: 0 7px 18px rgba(30, 60, 100, 0.10), inset 0 1px 0 rgba(30, 136, 229, 0.16);
-
-    .step-action {
-      color: #1565c0;
-    }
-  }
-
-  &.active {
-    border-color: #1e88e5;
-    color: #1e3a5f;
-    background: linear-gradient(115deg, rgba(30, 136, 229, 0.14), rgba(30, 136, 229, 0.08));
-    box-shadow: 0 0 18px rgba(30, 136, 229, 0.22), inset 0 1px 0 rgba(30, 136, 229, 0.2);
-
-    .step-marker {
-      border-color: #72e8ff;
-      color: #1e3a5f;
-      background: linear-gradient(135deg, #08b7e8, #1375d0);
-      box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.14), 0 0 18px rgba(30, 136, 229, 0.4);
-    }
+  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: var(--student-accent);
+    background: var(--student-accent-soft);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
 
-  &.complete {
-    color: #2c4a6a;
-
-    .step-marker {
-      border-color: #1e88e5;
-      color: #1e3a5f;
-      background: #6ef0e1;
-      box-shadow: 0 0 12px rgba(30, 136, 229, 0.35);
-    }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 }
 
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #9cc8ef;
-  border-radius: 50%;
-  color: #a6c4d9;
-  background: #f0f6fd;
-  box-shadow: inset 0 0 12px rgba(30, 136, 229, 0.08);
-  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;
-}
-
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
-
-}
-
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  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: #66b6d4;
-  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;
-  overflow: visible;
-  background: #e3f2fd;
-}
-
-.step-connector::after {
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  width: 6px;
-  height: 6px;
-  border-top: 1px solid #73b1ce;
-  border-right: 1px solid #73b1ce;
-  content: "";
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.step-tab.complete + .step-connector {
-  background: linear-gradient(90deg, #6ef0e1, #1cb8e9);
-  box-shadow: 0 0 9px rgba(30, 136, 229, 0.3);
-
-  &::after {
-    border-color: #63e6f1;
-  }
+/* step-card：白色 16px 圆角卡片 */
+.step-card {
+  margin-bottom: 0;
+  padding: 16px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 16px;
+  background: var(--student-card-bg);
 }
 
 .step-title-row {
   display: flex;
   justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 14px;
+  align-items: flex-start;
+  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;
+    line-height: 1.35;
+    font-weight: 700;
   }
 }
 
-.task-desc {
-  margin: 0 0 38px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
+.step-panel {
+  animation: fade 0.2s ease;
 }
 
-.task-desc--compact {
-  margin-bottom: 26px;
+@keyframes fade {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.interview-tabs {
+.task-desc {
+  margin: 0 0 18px;
+  color: #374151;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.task-desc--compact { margin-bottom: 14px; }
+
+/* ============ Step 1 上传区域 ============ */
+.upload-panel {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 22px;
+  align-items: center;
+  gap: 14px;
+  margin: 12px 0;
 }
 
-.interview-tab {
+.file-input { display: none; }
+
+.upload-action {
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  cursor: pointer;
-  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+  border: 1px solid var(--student-accent);
+  border-radius: 10px;
+  color: #ffffff;
+  background: var(--student-accent);
+  font-size: 13px;
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
-  &.active {
-    border-color: #1e88e5;
-    color: #ffffff;
-    background: linear-gradient(95deg, #1e88e5, #1565c0);
-    box-shadow: 0 4px 12px rgba(30, 60, 100, 0.12);
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    background: var(--student-accent-deep);
+    border-color: var(--student-accent-deep);
+    box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
   }
 }
 
-.interview-dialog-layer {
-  position: fixed;
-  inset: 0;
-  z-index: 2100;
-  display: flex;
+.file-chip {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 44px;
-  background: rgba(30, 60, 100, 0.18);
-}
+  gap: 8px;
+  max-width: min(520px, 100%);
+  padding: 6px 12px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 10px;
+  color: var(--student-text-secondary);
+  background: var(--student-panel-bg);
+  font-size: 12px;
+  font-weight: 600;
 
-.interview-dialog {
-  position: relative;
-  width: min(880px, calc(100vw - 40px));
-  max-height: min(720px, 78vh);
-  overflow: hidden;
-  border: 1px solid #cfe2f5;
-  border-radius: 26px;
-  background: #f0f6fd;
-  box-shadow: 0 24px 64px rgba(30, 60, 100, 0.15), inset 0 1px 0 rgba(30, 136, 229, 0.08);
+  span { overflow-wrap: anywhere; }
 }
 
-.interview-dialog-close {
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  min-width: 0;
-  height: 40px;
+.preview-action {
+  min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.interview-dialog-body {
-  max-height: min(720px, 78vh);
-  overflow-y: auto;
-  padding: 24px 96px 24px 24px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
-}
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
 
-.interview-line,
-.interview-title,
-.interview-qa p {
-  margin: 0;
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+  }
 }
 
-.interview-title {
-  margin-top: 18px;
-  color: #1e3a5f;
-  font-weight: 800;
+.upload-tip {
+  margin: 4px 0 8px;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.interview-qa {
+.step-one-materials {
   margin-top: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--student-panel-border);
+  border-left: 3px solid var(--student-accent-light);
+  border-radius: 0 12px 12px 0;
+  color: #374151;
+  background: var(--student-panel-bg);
+  font-size: 13px;
+  line-height: 1.65;
+
+  p { margin: 0 0 4px; }
 }
 
-.portrait-table-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
+.step-one-materials__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
 }
 
-.portrait-record {
-  min-width: 780px;
+/* ============ Excel 预览 ============ */
+.excel-preview-meta {
+  margin-bottom: 12px;
+  color: var(--student-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
 
-  & + & {
-    border-top: 1px solid #cfe2f5;
-  }
-}
-
-.portrait-user {
-  min-height: 110px;
-  padding: 12px;
-  border-bottom: 1px solid #cfe2f5;
-
-  label,
-  .portrait-example {
-    display: flex;
-    align-items: center;
-    min-height: 38px;
-    margin: 0;
-    padding: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.6;
-  }
-
-  span {
-    flex: 0 0 auto;
-    color: #2c4a6a;
-  }
-}
-
-.portrait-input {
-  flex: 1;
-  min-width: 120px;
-  height: 38px;
-  padding: 0 10px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
-
-.portrait-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.portrait-head {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-  padding: 12px;
-  border-bottom: 1px solid #cfe2f5;
-  color: #1e3a5f;
-  background: #eef5fc;
-  font-size: var(--student-fs-body);
-  font-weight: 900;
-
-  & + & {
-    border-left: 1px solid #cfe2f5;
-  }
-}
-
-.portrait-cell {
-  min-height: 190px;
-  padding: 12px;
-  border: 0;
-  border-left: 1px solid #cfe2f5;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-
-  &:nth-of-type(1) {
-    border-left: 0;
-  }
-
-  &:focus {
-    background: #eef5fc;
-    box-shadow: inset 0 0 0 1px #1e88e5, 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
-
-.segmentation-intro {
-  margin-bottom: 24px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-
-  p {
-    margin: 0;
-  }
-}
-
-.segmentation-table-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
-}
-
-.segmentation-table {
-  width: 100%;
-  min-width: 840px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th,
-  td {
-    border: 1px solid #cfe2f5;
-  }
-
-  th {
-    height: 52px;
-    padding: 12px;
-    color: #1e3a5f;
-    background: #eef5fc;
-    font-size: var(--student-fs-body);
-    font-weight: 900;
-    text-align: center;
-  }
-
-  th:first-child,
-  td:first-child {
-    width: 190px;
-  }
-
-  td {
-    height: 160px;
-    padding: 12px;
-    color: #2c4a6a;
-    background: #f0f6fd;
-  }
-}
-
-.segmentation-market-input,
-.segmentation-cell-input {
-  width: 100%;
-  min-height: 38px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
-
-.segmentation-market-input {
-  text-align: center;
-  font-weight: 800;
-}
-
-.segmentation-cell-input {
-  min-height: 160px;
-  padding: 12px 14px;
-  resize: vertical;
-  line-height: 1.7;
-}
-
-.rfm-insight-table-wrap {
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: #f0f6fd;
-}
-
-.rfm-insight-table {
-  width: 100%;
-  min-width: 850px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th,
-  td {
-    padding: 18px;
-    border-right: 1px solid #cfe2f5;
-    border-bottom: 1px solid #cfe2f5;
-    color: #2c4a6a;
-    text-align: left;
-    vertical-align: middle;
-    line-height: 1.7;
-  }
-
-  thead th {
-    color: #ffffff;
-    background: #1e88e5;
-    text-align: center;
-    font-size: var(--student-fs-body);
-    font-weight: 800;
-  }
-
-  tbody th {
-    width: 22%;
-    color: #1e3a5f;
-    background: #eef5fc;
-    text-align: center;
-    font-weight: 800;
-  }
-
-  tbody td:nth-child(2) {
-    width: 34%;
-    color: #5a7a9a;
-  }
-
-  tbody td:last-child {
-    width: 44%;
-  }
-
-  tr:last-child th,
-  tr:last-child td {
-    border-bottom: 0;
-  }
-
-  th:last-child,
-  td:last-child {
-    border-right: 0;
-  }
-}
-
-.interview-dialog-tabs {
-  display: flex;
-  gap: 8px;
-  padding: 0 20px 14px;
-  border-bottom: 1px solid #e2ebf0;
-
-  button {
-    min-width: 58px;
-    height: 30px;
-    border: 1px solid #bdd6e2;
-    border-radius: 6px;
-    color: #466477;
-    background: #f7fbfd;
-    cursor: pointer;
-    font-weight: 700;
-
-    &.active {
-      border-color: #1e88e5;
-      color: #ffffff;
-      background: #1e88e5;
-    }
-  }
-}
-
-.interview-dialog-body--panel {
-  max-height: 58vh;
-  padding: 20px;
-  color: #34495a;
-}
-
-.rfm-insight-input {
-  width: 100%;
-  min-height: 92px;
-  padding: 12px 13px;
-  border: 1px solid #cfe2f5;
-  border-radius: 10px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font: inherit;
-  line-height: 1.65;
-
-  &::placeholder {
-    color: #7896a8;
-  }
-
-  &:focus {
-    border-color: #5ee8ff;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
-  }
-}
-
-.product-plan-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
-  gap: 34px;
-  align-items: start;
-}
-
-.product-plan-desc {
-  margin: 0 0 26px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
-}
-
-.product-plan-label {
-  margin-bottom: 10px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-}
-
-.product-plan-label--price {
-  margin-top: 38px;
-}
-
-.core-function-input {
-  display: block;
-  width: 100%;
-  min-height: 110px;
-  margin-bottom: 28px;
-  padding: 12px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-
-  &::placeholder {
-    color: #91aabc;
-  }
-
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
-
-.price-range-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 34px;
-
-  span {
-    width: 34px;
-    height: 1px;
-    background: #5a7a9a;
-  }
-}
-
-.price-input {
-  width: 132px;
-  height: 38px;
-  padding: 0 10px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-  }
-}
-
-.analysis-conclusion-block {
-  display: block;
-
-  span {
-    display: block;
-    margin-bottom: 10px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-body);
-    font-weight: 800;
-  }
-}
-
-.analysis-conclusion-input {
-  width: 100%;
-  min-height: 210px;
-  padding: 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
-  }
-}
-
-.product-reference {
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 22px;
-  background: #f0f6fd;
-
-  img {
-    width: min(100%, 320px);
-    height: auto;
-    border-radius: 14px;
-    box-shadow: none;
-  }
-}
-
-.upload-panel {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 14px;
-  margin: 22px 0;
-}
-
-.file-input {
-  display: none;
-}
-
-.upload-action {
-  min-width: 0;
-  height: 40px;
-  padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  box-shadow: none;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-}
-
-.file-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  max-width: min(520px, 100%);
-  padding: 8px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1565c0;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 700;
-
-  span {
-    overflow-wrap: anywhere;
-  }
-}
-
-.preview-action {
-  height: 36px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #a8eeff;
-  background: #e3f2fd;
-  font-weight: 700;
-}
-
-.upload-tip {
-  margin: -6px 0 8px;
-  color: #5a7a9a;
-  font-size: var(--student-fs-body-sm);
-  line-height: 1.7;
-}
-
-.step-one-materials {
-  margin-top: 18px;
-  padding: 16px 18px;
-  border-left: 3px solid #42a5f5;
-  border-radius: 0 12px 12px 0;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  font-size: 14px;
-  line-height: 1.75;
-
-  p {
-    margin: 0 0 4px;
-  }
-}
-
-.step-one-materials__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 12px;
-}
-
-.excel-preview-meta {
-  margin-bottom: 12px;
-  color: #52687a;
-  font-size: var(--student-fs-body-sm);
-  line-height: 1.6;
-}
-
-.excel-preview-wrap {
-  max-height: 480px;
-  overflow: auto;
-  border: 1px solid #dce6ec;
-  border-radius: 8px;
+.excel-preview-wrap {
+  max-height: 480px;
+  overflow: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
 }
 
 .excel-preview-table {
   width: 100%;
   min-width: 640px;
   border-collapse: collapse;
-  color: #22313f;
-  font-size: var(--student-fs-body-sm);
+  color: #374151;
+  font-size: 12px;
 
-  th,
-  td {
+  th, td {
     min-width: 112px;
     padding: 9px 12px;
-    border-right: 1px solid #e4edf2;
-    border-bottom: 1px solid #e4edf2;
+    border-right: 1px solid var(--student-panel-border);
+    border-bottom: 1px solid var(--student-panel-border);
     text-align: left;
     vertical-align: top;
     white-space: pre-wrap;
@@ -1939,38 +1210,31 @@ function exportOutcome() {
     position: sticky;
     top: 0;
     z-index: 1;
-    color: #ffffff;
-    background: #1e88e5;
-    font-weight: 700;
-  }
-
-  tr:last-child td {
-    border-bottom: 0;
+    color: var(--student-text);
+    background: var(--student-panel-bg);
+    font-weight: 800;
   }
 
-  th:last-child,
-  td:last-child {
-    border-right: 0;
-  }
+  tr:last-child td { border-bottom: 0; }
+  th:last-child, td:last-child { border-right: 0; }
 }
 
+/* ============ Step 2 RFM 图表 ============ */
 .rfm-chart-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
-  margin: 26px 0 18px;
+  gap: 12px;
+  margin: 12px 0;
 }
 
 .rfm-chart-card {
   display: flex;
-  min-height: 232px;
+  min-height: 200px;
   flex-direction: column;
-  padding: 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(145deg, rgba(30, 136, 229, 0.14), #f0f6fd),
-    #f0f6fd;
+  padding: 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
 }
 
 .rfm-chart-card__head {
@@ -1981,90 +1245,88 @@ function exportOutcome() {
 
   h4 {
     margin: 0;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h2);
+    color: var(--student-text);
+    font-size: 13px;
     line-height: 1.45;
+    font-weight: 700;
   }
 }
 
 .rfm-chart-card__index {
   display: grid;
-  width: 31px;
-  height: 31px;
+  width: 28px;
+  height: 28px;
   flex: 0 0 auto;
   place-items: center;
-  border: 1px solid rgba(30, 136, 229, 0.64);
-  border-radius: 50%;
-  color: #5ee8ff;
-  background: #e3f2fd;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
+  border-radius: 6px;
+  color: var(--student-text-secondary);
+  background: var(--student-accent-soft);
+  font-size: 11px;
+  font-weight: 700;
 }
 
 .rfm-chart-upload {
   display: inline-flex;
-  min-height: 42px;
+  min-height: 38px;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  margin-top: 18px;
+  margin-top: 12px;
   padding: 0 14px;
-  border: 1px solid #9cc8ef;
+  border: 1px solid var(--student-accent);
   border-radius: 10px;
-  color: #1e3a5f;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+  color: #ffffff;
+  background: var(--student-accent);
   cursor: pointer;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  transition: transform 0.16s ease, box-shadow 0.16s ease;
+  font-size: 13px;
+  font-weight: 700;
+  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
-    box-shadow: 0 8px 18px rgba(30, 136, 229, 0.22);
+    background: var(--student-accent-deep);
+    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.28);
   }
 
   &:disabled {
     cursor: wait;
-    opacity: 0.72;
+    opacity: 0.5;
   }
 }
 
 .rfm-chart-empty {
-  margin: 15px 0 0;
-  color: #7f9aa9;
-  font-size: var(--student-fs-caption);
+  margin: 12px 0 0;
+  color: var(--student-text-secondary);
+  font-size: 12px;
   line-height: 1.5;
 }
 
 .rfm-chart-file {
   display: flex;
   align-items: center;
-  gap: 11px;
-  margin-top: 16px;
+  gap: 10px;
+  margin-top: 10px;
   padding: 8px;
-  border: 1px solid rgba(30, 136, 229, 0.28);
+  border: 1px solid var(--student-panel-border);
   border-radius: 10px;
-  background: #f0f6fd;
+  background: var(--student-panel-bg);
 
   img {
-    width: 58px;
-    height: 46px;
+    width: 48px;
+    height: 38px;
     flex: 0 0 auto;
     border-radius: 6px;
     cursor: zoom-in;
     object-fit: cover;
   }
 
-  div {
-    min-width: 0;
-  }
-
   strong {
     display: block;
     overflow: hidden;
-    color: #1e3a5f;
-    font-size: var(--student-fs-caption);
+    color: var(--student-text);
+    font-size: 12px;
     line-height: 1.35;
+    font-weight: 700;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -2073,207 +1335,346 @@ function exportOutcome() {
     margin-top: 4px;
     padding: 0;
     border: 0;
-    color: #55dfff;
+    color: var(--student-accent-light);
     background: transparent;
     cursor: pointer;
-    font-size: var(--student-fs-caption);
+    font-size: 11px;
+    font-weight: 600;
+
+    &:hover { color: var(--student-accent); }
+  }
+}
+
+.rfm-chart-preview {
+  display: block;
+  width: 100%;
+  max-height: 72vh;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+/* ============ Step 3 RFM 分析表 ============ */
+.rfm-insight-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+}
+
+.rfm-insight-table {
+  width: 100%;
+  min-width: 780px;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  th, td {
+    padding: 12px 14px;
+    border-right: 1px solid var(--student-panel-border);
+    border-bottom: 1px solid var(--student-panel-border);
+    color: #374151;
+    text-align: left;
+    vertical-align: top;
+    line-height: 1.6;
+    font-size: 13px;
+  }
+
+  thead th {
+    color: var(--student-text);
+    background: var(--student-panel-bg);
+    text-align: center;
+    font-weight: 800;
+  }
+
+  tbody th {
+    width: 20%;
+    color: var(--student-text);
+    background: var(--student-panel-bg);
+    text-align: center;
+    font-weight: 700;
+  }
+
+  tbody td:nth-child(2) { width: 30%; color: var(--student-text-secondary); }
+  tbody td:last-child { width: 50%; }
+
+  tr:last-child th, tr:last-child td { border-bottom: 0; }
+  th:last-child, td:last-child { border-right: 0; }
+}
+
+/* rfm-insight-input 是 el-input type="textarea"，覆盖内部样式 */
+.rfm-insight-input {
+  width: 100%;
+
+  :deep(.el-textarea__inner) {
+    min-height: 72px !important;
+    padding: 8px 10px;
+    border: 1px solid var(--student-panel-border);
+    border-radius: 8px;
+    color: var(--student-text);
+    background: #ffffff;
+    font-size: 13px;
+    line-height: 1.6;
+    resize: vertical;
+    transition: border-color 0.16s ease, box-shadow 0.16s ease;
+
+    &::placeholder { color: #9ca3af; }
+    &:focus {
+      border-color: var(--student-accent-light);
+      box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+    }
+  }
+}
+
+/* ============ Step 4 访谈 & 画像 ============ */
+.interview-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.interview-tab {
+  min-height: 36px;
+  padding: 0 16px;
+  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;
+  cursor: pointer;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
+
+  &:hover { transform: translateY(-1px); border-color: var(--student-accent); background: var(--student-accent-soft); }
+
+  &.active {
+    border-color: var(--student-accent);
+    color: #ffffff;
+    background: var(--student-accent);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.22);
+  }
+}
+
+.interview-dialog-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 0 20px 14px;
+  border-bottom: 1px solid var(--student-panel-border);
+
+  button {
+    min-width: 52px;
+    height: 30px;
+    border: 1px solid var(--student-panel-border);
+    border-radius: 6px;
+    color: var(--student-text-secondary);
+    background: #ffffff;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 12px;
+
+    &.active {
+      border-color: var(--student-accent);
+      color: #ffffff;
+      background: var(--student-accent);
+    }
   }
 }
 
-.rfm-chart-preview {
-  display: block;
-  width: 100%;
-  max-height: 72vh;
-  border-radius: 8px;
-  object-fit: contain;
+.interview-dialog-body--panel {
+  max-height: 58vh;
+  padding: 20px;
+  color: var(--student-text);
+  font-size: 13px;
+  line-height: 1.65;
 }
 
-.field-block {
-  display: block;
+.interview-line, .interview-title, .interview-qa p { margin: 0; }
+.interview-title { margin-top: 14px; color: var(--student-text); font-weight: 800; }
+.interview-qa { margin-top: 10px; }
 
-  span {
-    display: block;
-    margin-bottom: 10px;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
+/* 画像表格 */
+.portrait-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
+  background: #ffffff;
 }
 
-.profile-textarea {
-  width: 100%;
-  min-height: 110px;
+.portrait-record {
+  min-width: 720px;
+
+  & + & { border-top: 1px solid var(--student-panel-border); }
+}
+
+.portrait-user {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: center;
   padding: 12px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  outline: none;
-  resize: vertical;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-size: var(--student-fs-body);
-  line-height: 1.7;
-  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+  border-bottom: 1px solid var(--student-panel-border);
 
-  &::placeholder {
-    color: #5a7a9a;
-    opacity: 0.9;
+  label {
+    display: contents;
+    margin: 0;
+    padding: 0;
   }
 
-  &:focus {
-    border-color: #1e88e5;
-    background: #eef5fc;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
+  span {
+    color: var(--student-text-secondary);
+    font-size: 12px;
+    font-weight: 700;
   }
 }
 
-.step-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 14px;
-  margin-top: 22px;
-  margin-bottom: 36px;
-}
+.portrait-input {
+  width: 100%;
 
-.step-actions :deep(.step-action) {
-  min-height: 40px;
-  padding: 0 18px;
-  border: 1px solid #9cc8ef;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
-}
+  :deep(.el-input__wrapper) {
+    border: 1px solid var(--student-panel-border);
+    border-radius: 10px;
+    background: #ffffff;
+    box-shadow: none;
+    padding: 0 10px;
 
-.step-actions :deep(.step-action--save),
-.step-actions :deep(.step-action--next) {
-  border-color: #9cc8ef;
-  color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+    &.is-focus {
+      border-color: var(--student-accent-light);
+      box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+    }
+  }
+
+  :deep(.el-input__inner) {
+    color: var(--student-text);
+    font-size: 13px;
+  }
 }
 
-.step-actions :deep(.step-action.is-disabled) {
-  opacity: 0.45;
+.portrait-input--wide { min-width: 200px; }
+
+.portrait-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.training-actions {
+.portrait-head {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
-}
+  min-height: 44px;
+  padding: 10px;
+  border-bottom: 1px solid var(--student-panel-border);
+  border-left: 1px solid var(--student-panel-border);
+  color: var(--student-text);
+  background: var(--student-panel-bg);
+  font-size: 13px;
+  font-weight: 800;
 
-.training-actions :deep(.training-action) {
-  min-width: 172px;
-  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;
+  &:first-child { border-left: 0; }
 }
 
-.training-actions :deep(.training-action span) {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-size: inherit;
-  line-height: 1;
-}
+/* portrait-cell 是 el-input type="textarea" */
+.portrait-cell {
+  border-left: 1px solid var(--student-panel-border);
 
-.training-actions :deep(.training-action--submit),
-.training-actions :deep(.training-action--reset),
-.training-actions :deep(.training-action--export) {
-  border-color: #1e88e5;
-  color: #2c4a6a;
-  background: #e3f2fd;
-}
+  &:first-of-type { border-left: 0; }
+
+  :deep(.el-textarea__inner) {
+    min-height: 90px !important;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: 0;
+    color: var(--student-text);
+    background: #ffffff;
+    font-size: 13px;
+    line-height: 1.6;
+    resize: vertical;
+    box-shadow: none;
 
-.training-actions :deep(.training-action:hover:not(.is-disabled)) {
-  border-color: #1565c0;
-  color: #1e3a5f;
-  background: #bbdefb;
+    &:focus { box-shadow: none; }
+  }
+
+  :deep(.el-textarea__wrapper),
+  :deep(.el-textarea) {
+    width: 100%;
+  }
 }
 
+/* ============ Step 5 市场细分 ============ */
 .market-segment-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
-  margin-top: 26px;
-
-  .section-eyebrow {
-    margin-bottom: 5px;
-  }
+  margin-bottom: 10px;
 
   h4 {
     margin: 0;
-    color: #f0fbff;
-    font-size: var(--student-fs-h1);
+    color: var(--student-text);
+    font-size: 14px;
+    font-weight: 700;
   }
 }
 
 .market-segment-toolbar__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 10px;
 }
 
 .market-segment-toolbar__actions :deep(.segment-action) {
-  min-width: 104px;
-  height: 40px;
-  border: 1px solid #9cc8ef;
-  border-radius: 10px;
-  color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
-  font-weight: 800;
-}
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 8px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+  }
+
+  &.segment-action--muted {
+    color: var(--student-text-secondary);
+    border-color: var(--student-panel-border);
 
-.market-segment-toolbar__actions :deep(.segment-action--muted) {
-  border-color: #9cc8ef;
-  color: #5a7a9a;
-  background: #e3f2fd;
+    &:hover:not(.is-disabled) {
+      color: var(--student-accent);
+      border-color: rgba(31, 41, 55, 0.4);
+    }
+  }
 }
 
 .market-segment-tip {
-  margin: 10px 0 16px;
-  color: #6ee3ff;
-  font-size: var(--student-fs-body-sm);
+  margin: 0 0 10px;
+  color: var(--student-text-secondary);
+  font-size: 12px;
 }
 
 .market-segment-table-wrap {
   overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background: #f0f6fd;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 14px;
 }
 
 .market-segment-table {
   width: 100%;
-  min-width: 1120px;
+  min-width: 1080px;
   border-collapse: collapse;
   table-layout: fixed;
 
-  th,
-  td {
-    padding: 12px;
-    border-right: 1px solid #cfe2f5;
-    border-bottom: 1px solid #cfe2f5;
-    vertical-align: middle;
+  th, td {
+    padding: 10px;
+    border-right: 1px solid var(--student-panel-border);
+    border-bottom: 1px solid var(--student-panel-border);
+    vertical-align: top;
+    font-size: 13px;
   }
 
   th {
-    color: #ffffff;
-    background: linear-gradient(100deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-body);
+    color: var(--student-text);
+    background: var(--student-panel-bg);
     font-weight: 800;
   }
 
@@ -2282,108 +1683,223 @@ function exportOutcome() {
   td:nth-child(n + 3) { width: 22.33%; }
 
   tr:last-child td { border-bottom: 0; }
-  th:last-child,
-  td:last-child { border-right: 0; }
+  th:last-child, td:last-child { border-right: 0; }
 }
 
-.market-segment-input,
-.market-segment-textarea,
-.market-selection-textarea {
-  box-sizing: border-box;
+/* market-segment-input 是 el-input */
+.market-segment-input {
   width: 100%;
-  border: 1px solid #9cc8ef;
-  outline: none;
-  color: #1e3a5f;
-  background: #f0f6fd;
-  font-family: inherit;
-  line-height: 1.6;
 
-  &::placeholder { color: #7896a5; }
-  &:focus {
-    border-color: #1e88e5;
-    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.14);
+  :deep(.el-input__wrapper) {
+    border: 1px solid var(--student-panel-border);
+    border-radius: 8px;
+    background: #ffffff;
+    box-shadow: none;
+    padding: 0 10px;
+
+    &.is-focus {
+      border-color: var(--student-accent-light);
+      box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+    }
   }
-}
 
-.market-segment-input {
-  height: 40px;
-  padding: 0 10px;
-  border-radius: 10px;
+  :deep(.el-input__inner) {
+    color: var(--student-text);
+    font-weight: 600;
+    text-align: center;
+  }
 }
 
+/* market-segment-textarea 是 el-input type="textarea" */
 .market-segment-textarea {
-  min-height: 108px;
-  padding: 10px;
-  border-radius: 10px;
-  resize: vertical;
+  width: 100%;
+
+  :deep(.el-textarea__inner) {
+    min-height: 72px !important;
+    padding: 8px 10px;
+    border: 1px solid var(--student-panel-border);
+    border-radius: 8px;
+    color: var(--student-text);
+    background: #ffffff;
+    font-size: 13px;
+    line-height: 1.6;
+    resize: vertical;
+    box-shadow: none;
+
+    &::placeholder { color: #9ca3af; }
+    &:focus {
+      border-color: var(--student-accent-light);
+      box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+    }
+  }
 }
 
 .market-attractiveness {
   display: flex;
   justify-content: center;
   gap: 8px;
+
+  :deep(.el-radio) {
+    margin-right: 0;
+    color: #374151;
+  }
 }
 
-.market-attractiveness :deep(.el-radio) {
-  margin-right: 0;
-  color: #2c4a6a;
+/* 全页 el-radio 选中墨黑 */
+.target-profile-page :deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: var(--student-accent);
+  background: var(--student-accent);
+}
+.target-profile-page :deep(.el-radio__input.is-checked + .el-radio__label) {
+  color: var(--student-accent);
+}
+.target-profile-page :deep(.el-radio__input .el-radio__inner) {
+  border-color: #9ca3af;
 }
 
 .market-selection-block {
-  margin-top: 34px;
-
-  .section-eyebrow { margin-bottom: 8px; }
+  margin-top: 18px;
 
   h4 {
-    margin: 0 0 14px;
-    color: #1e3a5f;
-    font-size: var(--student-fs-h2);
-    font-weight: 600;
-    line-height: 1.7;
+    margin: 0 0 12px;
+    color: var(--student-text);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.6;
   }
 }
 
 .market-selection-textarea {
-  min-height: 180px;
-  padding: 14px;
-  border-radius: 14px;
-  resize: vertical;
-}
+  width: 100%;
 
-@media (max-width: 1100px) {
-  .target-profile-page {
-    grid-template-columns: 1fr;
-  }
+  :deep(.el-textarea__inner) {
+    min-height: 120px !important;
+    padding: 10px 12px;
+    border: 1px solid var(--student-panel-border);
+    border-radius: 10px;
+    color: var(--student-text);
+    background: #ffffff;
+    font-size: 13px;
+    line-height: 1.6;
+    resize: vertical;
+    box-shadow: none;
 
-  .product-plan-layout {
-    grid-template-columns: 1fr;
+    &::placeholder { color: #9ca3af; }
+    &:focus {
+      border-color: var(--student-accent-light);
+      box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
+    }
   }
+}
 
-  .rfm-chart-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+/* ============ 底部步骤导航 ============ */
+.step-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.step-actions :deep(.step-action) {
+  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-size: 13px;
+  font-weight: 700;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 
-  .product-reference {
-    justify-content: flex-start;
+  &:hover:not(.is-disabled) {
+    transform: translateY(-1px);
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    color: var(--student-accent);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
+}
 
-  .market-segment-toolbar {
-    align-items: flex-start;
-    flex-direction: column;
+.step-actions :deep(.step-action--save),
+.step-actions :deep(.step-action--next) {
+  border-color: var(--student-accent);
+  color: #ffffff;
+  background: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+
+  &:hover:not(.is-disabled) {
+    transform: translateY(-1px);
+    background: var(--student-accent-deep);
+    border-color: var(--student-accent-deep);
+    box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
+    color: #ffffff;
   }
 }
 
-@media (max-width: 900px) {
-  .target-profile-page {
-    padding: 14px 14px 18px;
+.step-actions :deep(.step-action.is-disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============ 底部提交/重新实训 ============ */
+.training-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 24px;
+}
+
+.training-actions :deep(.training-action) {
+  min-width: 160px;
+  height: 44px;
+  padding: 0 22px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: none;
+  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+
+  &:hover:not(.is-disabled) {
+    transform: translateY(-1px);
+    border-color: var(--student-accent);
+    background: var(--student-accent-soft);
+    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
   }
+}
 
-  .training-core {
-    padding: 18px;
-    border-radius: 24px;
+.training-actions :deep(.training-action--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(.is-disabled) {
+    transform: translateY(-1px);
+    background: var(--student-accent-deep);
+    border-color: var(--student-accent-deep);
+    box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
   }
+}
+
+.training-actions :deep(.training-action.is-disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============ 响应式 ============ */
+@media (max-width: 1100px) {
+  .rfm-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .market-segment-toolbar { align-items: flex-start; flex-direction: column; }
+}
 
-  .workbench-head,
+@media (max-width: 900px) {
+  .workbench-head--actions-only,
   .workbench-actions,
   .upload-panel,
   .step-title-row,
@@ -2396,84 +1912,149 @@ function exportOutcome() {
   .workbench-actions :deep(.material-download),
   .workbench-actions .outline-action,
   .upload-action,
+  .preview-action,
   .step-actions :deep(.step-action),
   .training-actions :deep(.training-action) {
     width: 100%;
   }
+}
 
-  .step-indicator {
-    align-items: stretch;
-    flex-direction: column;
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    overflow: visible;
-    border-radius: 20px;
-  }
+@media (max-width: 760px) {
+  .rfm-chart-grid { grid-template-columns: 1fr; }
+  .market-segment-toolbar__actions { width: 100%; }
+  .interview-tabs { flex-direction: column; gap: 12px; }
+  .interview-tab { width: 100%; }
+  .portrait-grid { grid-template-columns: 1fr; }
+}
+</style>
+
+<!-- ==========================================================
+ * Non-scoped：画布背景 + 步骤导航按钮风（全局 student-training.scss
+ * 带 !important 锁定浅蓝，必须在页面非 scoped 块中覆盖）
+ * ========================================================== -->
+<style lang="scss">
+/* 画布：纯白，去渐变 */
+#app .studentLayout section.app-main:has(.target-profile-page) {
+  background: #ffffff !important;
+}
+
+/* ===== 步骤导航：按钮切换风（foundation 同款） ===== */
+#app .studentLayout section.app-main:has(.target-profile-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 20px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 
   .step-tab {
-    flex: 0 0 auto;
-    width: 100%;
-  }
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-bar { display: none !important; }
+
+    .step-no {
+      position: static !important;
+      flex: 0 0 auto !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      min-width: 22px !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      letter-spacing: 0 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+
+      &::after { display: none !important; }
+    }
 
-  .step-connector {
-    flex: 0 0 22px;
-    width: 2px;
-    height: 22px;
-    margin-left: 29px;
-    text-align: center;
-    writing-mode: vertical-rl;
-  }
+    .step-name { color: inherit !important; }
 
-  .product-plan-layout {
-    gap: 20px;
-  }
-}
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
 
-@media (max-width: 760px) {
-  .rfm-chart-grid {
-    grid-template-columns: 1fr;
-  }
+      .step-no { background: #1f2937 !important; color: #ffffff !important; }
+    }
 
-  .market-segment-toolbar__actions {
-    width: 100%;
-  }
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
 
-  .interview-tabs {
-    flex-direction: column;
-    gap: 12px;
-  }
+      .step-no { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
 
-  .interview-tab {
-    width: 100%;
-  }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
 
-  .interview-dialog-layer {
-    padding: 20px;
-  }
+        .step-no { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
 
-  .interview-dialog {
-    width: calc(100vw - 40px);
-  }
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+
+      .step-no { background: #ffffff !important; color: #1f2937 !important; }
 
-  .interview-dialog-close {
-    top: 16px;
-    right: 16px;
-    min-width: 78px;
-    height: 40px;
-    font-size: var(--student-fs-body);
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
   }
+}
 
-  .interview-dialog-body {
-    padding: 78px 20px 28px;
-    font-size: 17px;
+/* 窄屏：横向滑动 */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.target-profile-page) .step-indicator {
+    overflow-x: auto !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
   }
 
-}
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+  #app .studentLayout section.app-main:has(.target-profile-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
 }
 </style>
diff --git a/src/views/product/differentiation.vue b/src/views/product/differentiation.vue
index ee8a984..0759086 100644
--- a/src/views/product/differentiation.vue
+++ b/src/views/product/differentiation.vue
@@ -1,16 +1,28 @@
 <template>
   <div class="product-positioning-page student-training-shell">
-    <main class="training-core">
+    <main class="product-positioning-core">
       <section class="task-header">
-        <div class="task-badge">
-          <el-icon><Operation /></el-icon>
-          市场洞察与需求分析
+        <div class="task-head-main">
+          <div class="task-badge">
+            <el-icon><Operation /></el-icon>
+            市场洞察与需求分析
+          </div>
+          <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="task-card">
       <div class="workbench-head workbench-head--actions-only">
           <div class="workbench-actions">
@@ -256,7 +268,6 @@ import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { ArrowLeft, ArrowRight, CircleCheck, Download, Operation, UploadFilled } from "@element-plus/icons-vue";
 import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
 import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
-import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
 import { getTrainingTaskByKey } from "@/api/trainingTask";
 import { checkProductValuePositioningStepOne, checkProductValuePositioningStepTwo, checkProductValuePositioningStepThree, checkProductValuePositioningStepFour, getStudentTrainingAnswer, saveStudentTrainingAnswer, uploadStudentTrainingFile } from "@/api/studentTrainingAnswer";
 import { parseTrainingArray } from "@/views/training/taskKeyMap";
@@ -329,6 +340,7 @@ function createForm() {
 
 const form = ref(createForm());
 const taskTitle = computed(() => taskConfig.value?.taskName || "产品价值主张及定位");
+const briefOpen = ref(false);
 const taskBackground = computed(() => taskConfig.value?.background || defaultBackground);
 const taskRequirement = computed(() => taskConfig.value?.requirements || defaultRequirement);
 const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, defaultGoals));
@@ -653,95 +665,160 @@ async function handleValueCanvasUpload(event) {
 </script>
 
 <style scoped lang="scss">
+/* ===== 页面级令牌（墨黑极简主题） ===== */
 .product-positioning-page {
-  display: grid;
-  grid-template-columns: minmax(720px, 1fr) 340px;
-  gap: 24px;
-  min-height: calc(100vh - 76px);
-  padding: 24px 24px 32px;
-  color: #1e3a5f;
+  --student-accent: #1f2937;
+  --student-accent-deep: #111827;
+  --student-accent-light: #4b5563;
+  --student-accent-soft: #f3f4f6;
+  --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-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;
+
+  /* 不设 grid-template-columns，由全局 .student-training-shell 单列布局接管 */
+  min-width: 0;
+  color: var(--student-text);
   background: #ffffff;
 }
 
-.training-core {
+/* 核心容器：透明，对齐 .industry-core / .analysis-core */
+.product-positioning-core {
+  display: grid;
+  gap: 10px;
+  align-content: start;
   min-width: 0;
-  padding: 28px;
-  border: 1px solid #cfe2f5;
-  border-radius: 36px;
-  background: #f0f6fd;
-  box-shadow: inset 0 1px 0 #cfe2f5, 0 22px 48px rgba(0,0,0,0.08);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* 任务头：独立卡片 */
+.task-header {
+  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-header { margin-bottom: 24px; }
+.task-head-main {
+  display: grid;
+  justify-items: start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
 
 .task-badge {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  min-height: 28px;
-  padding: 4px 14px;
-  border: 1px solid #cfe2f5;
+  gap: 7px;
+  padding: 4px 12px;
+  border: 1px solid var(--student-panel-border);
   border-radius: 999px;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  font-size: var(--student-fs-caption);
+  color: var(--student-accent-deep);
+  background: var(--student-accent-soft);
+  font-size: 12px;
   font-weight: 700;
   line-height: 1.4;
+  letter-spacing: 0;
 }
 
 .task-title {
-  margin: 12px 0 0;
-  color: #1e3a5f;
+  margin: 4px 0 0;
+  color: var(--student-text);
   font-size: var(--student-fs-display);
-  font-weight: 900;
-  line-height: 1.3;
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.task-card,
-.step-card {
-  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;
 }
 
-.task-card {
-  margin-top: 28px;
-  padding: 18px 22px 22px;
+.task-brief-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
-.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;
+.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; }
 }
 
-.section-eyebrow {
+.task-brief-more {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--student-panel-border);
+
+  b { color: var(--student-text); font-size: 12px; }
+  ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
+  p { margin: 0; }
+}
+
+/* task-card / step-card 层：透明容器 */
+.task-card,
+.step-card {
   margin: 0;
-  color: #1565c0;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  line-height: 1.4;
-  letter-spacing: 0.02em;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: grid;
+  gap: 10px;
 }
 
-.workbench-head h3 {
-  margin: 4px 0 8px;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h1);
-  font-weight: 800;
-  line-height: 1.3;
+/* 顶部任务工具栏（保留 DOM 结构） */
+.workbench-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
-.workbench-description,
-.step-desc {
-  margin: 0;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
+.workbench-head--actions-only {
+  justify-content: flex-end;
+  margin-bottom: 18px;
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
 .workbench-actions {
@@ -753,369 +830,221 @@ async function handleValueCanvasUpload(event) {
   flex-shrink: 0;
 }
 
-.outline-action,
-.btn-nav {
+.outline-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 40px;
   padding: 0 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 999px;
-  color: #1e3a5f;
-  background: #e3f2fd;
-  font: inherit;
-  font-size: var(--student-fs-button);
-  font-weight: 800;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-accent);
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 }
 
-.outline-action:hover,
-.outline-action:focus-visible,
-.btn-nav:hover:not(:disabled),
-.btn-nav:focus-visible {
-  border-color: #cfe2f5;
-  background: #bbdefb;
-  outline: none;
-  transform: translateY(-1px);
+.outline-action:hover {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
 }
 
-.step-indicator {
-  position: relative;
+/* step-title-row + section-eyebrow */
+.step-title-row {
   display: flex;
-  align-items: center;
-  gap: 0;
-  width: calc(100% + 24px);
-  min-height: 0;
-  margin: 0 -12px 32px;
-  padding: 18px 22px;
-  overflow-x: auto;
-  border: 1px solid #cfe2f5;
-  border-radius: 18px;
-  background:
-    linear-gradient(90deg, #e3f2fd, #ffffff),
-    rgba(0,0,0,0);
-  box-shadow: inset 0 1px 0 #cfe2f5;
-  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: #e3f2fd;
-  box-shadow: inset 0 1px 0 #cfe2f5;
-  font: inherit;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  text-align: left;
-  cursor: pointer;
-  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-}
-
-.step-tab:hover {
-  transform: translateY(-2px);
-  border-color: #cfe2f5;
-  color: #1e3a5f;
-  background: #bbdefb;
-  box-shadow: 0 7px 18px rgba(0,0,0,0.1), inset 0 1px 0 #cfe2f5;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-.step-tab:hover .step-action {
-  color: #1565c0;
+.step-title-row h3 {
+  margin: 4px 0 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h1);
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.step-tab:focus-visible {
-  outline: 2px solid #cfe2f5;
-  outline-offset: 2px;
+.section-eyebrow {
+  margin: 0 0 6px;
+  color: var(--student-text-secondary);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-.step-tab.active {
-  border-color: #1e88e5;
-  color: #ffffff;
-  background: linear-gradient(115deg, #1e88e5, #1565c0);
-  box-shadow: 0 0 18px rgba(30,136,229,.25), inset 0 1px 0 rgba(255,255,255,.2);
+.step-desc {
+  margin: 14px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
-.step-marker {
-  display: inline-flex;
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #cfe2f5;
-  border-radius: 50%;
-  color: #5a7a9a;
-  background: #e3f2fd;
-  box-shadow: inset 0 0 12px #cfe2f5;
-  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;
+/* ===== 引导区（intro） ===== */
+.core-pain-intro,
+.value-proposition-intro,
+.positioning-intro,
+.mrd-intro {
+  margin: 14px 0 12px;
+  padding: 12px 14px;
+  border-left: 3px solid var(--student-accent);
+  background: var(--student-accent-soft);
+  border-radius: 0 8px 8px 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body);
+  line-height: 1.6;
 }
 
-.step-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-  margin-left: 10px;
+.core-pain-intro p,
+.positioning-intro p {
+  margin: 0 0 6px;
+  color: var(--student-text-secondary);
 }
 
-.step-name {
-  display: -webkit-box;
-  overflow: hidden;
-  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;
+.core-pain-intro p + p,
+.positioning-intro p + p {
+  margin-top: 6px;
 }
 
-.step-action {
-  color: #1565c0;
-  font-size: var(--student-fs-caption);
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  transition: color 0.2s ease;
-}
+/* ===== 表格 ===== */
+.core-pain-table-wrap,
+.value-canvas-table-wrap,
+.mrd-table-wrap { overflow-x: auto; }
 
-.step-tab.active .step-marker {
-  border-color: #1565c0;
-  color: #ffffff;
-  background: linear-gradient(135deg, #1e88e5, #1565c0);
-  box-shadow: 0 0 0 5px #cfe2f5, 0 0 18px #cfe2f5;
+.core-pain-table,
+.value-canvas-table,
+.mrd-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.step-tab.complete .step-marker {
-  border-color: #43a047;
-  color: #ffffff;
-  background: #43a047;
-  box-shadow: 0 0 12px #43a047;
-}
+.core-pain-table { min-width: 820px; table-layout: fixed; }
+.value-canvas-table { min-width: 820px; table-layout: fixed; }
+.mrd-table { min-width: 760px; table-layout: fixed; }
 
-.step-connector {
-  position: relative;
-  flex: 0 1 40px;
-  min-width: 18px;
-  height: 2px;
-  margin: 0 8px;
-  overflow: visible;
-  background: #cfe2f5;
+.core-pain-table th,
+.core-pain-table td,
+.value-canvas-table th,
+.value-canvas-table td,
+.mrd-table th,
+.mrd-table td {
+  border: 1px solid var(--student-panel-border);
+  vertical-align: middle;
 }
 
-.step-connector::after {
-  position: absolute;
-  top: 50%;
-  right: -1px;
-  width: 6px;
-  height: 6px;
-  border-top: 1px solid #1565c0;
-  border-right: 1px solid #1565c0;
-  content: "";
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.step-tab.complete + .step-connector {
-  background: linear-gradient(90deg, #43a047, #1e88e5);
-  box-shadow: 0 0 9px #26c6da;
-
-  &::after {
-    border-color: #26c6da;
-  }
+.core-pain-table th,
+.value-canvas-table th,
+.mrd-table th {
+  padding: 10px 12px;
+  color: var(--student-text);
+  background: #fafbfc;
+  font-size: var(--student-fs-body-sm);
+  font-weight: 800;
+  text-align: left;
 }
 
-.step-card {
-  margin-top: 32px;
-  padding: 18px 22px 22px;
+.core-pain-table td,
+.value-canvas-table td,
+.mrd-table td {
+  padding: 8px 10px;
+  color: var(--student-text);
+  background: transparent;
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.55;
 }
 
-.step-indicator + .step-card { margin-top: 0; }
-.workbench-head + .step-card { margin-top: 0; }
-.step-card + .step-card { margin-top: 16px; }
+.core-pain-table th:nth-child(1),
+.core-pain-table td:nth-child(1) { width: 7%; text-align: center; }
+.core-pain-table th:nth-child(2),
+.core-pain-table td:nth-child(2) { width: 15%; text-align: center; font-weight: 700; }
+.core-pain-table th:nth-child(3),
+.core-pain-table td:nth-child(3) { width: 32%; }
 
-.step-title-row { margin-bottom: 14px; }
-.step-title-row h3 {
-  margin: 4px 0 0;
-  color: #1e3a5f;
-  font-size: var(--student-fs-h2);
-  font-weight: 900;
-  line-height: 1.3;
+.pain-type-cell {
+  color: var(--student-text);
+  font-weight: 700;
+  background: transparent;
 }
 
-.step-content { color: #2c4a6a; }
+.value-canvas-table th:nth-child(1),
+.value-canvas-table td:nth-child(1) { width: 19%; text-align: center; font-weight: 700; }
+.value-canvas-table th:nth-child(2),
+.value-canvas-table td:nth-child(2) { width: 24%; }
+.value-canvas-table td:nth-child(2) { color: var(--student-text-secondary); }
 
-.field-block {
-  display: block;
-  margin-bottom: 16px;
-}
+.mrd-table th:nth-child(1),
+.mrd-table td:nth-child(1) { width: 8%; text-align: center; }
+.mrd-table th:nth-child(2),
+.mrd-table td:nth-child(2) { width: 17%; text-align: center; }
 
-.field-block:last-child { margin-bottom: 0; }
+.mrd-row-title {
+  color: var(--student-text);
+  font-weight: 700;
+}
 
-.field-block span {
-  display: block;
-  margin-bottom: 8px;
-  color: #2c4a6a;
-  font-size: var(--student-fs-body);
-  font-weight: 800;
-  line-height: 1.6;
+.mrd-module {
+  color: var(--student-text-secondary);
 }
 
-.field-block textarea {
+/* 表格内 textarea：透明底 */
+.core-pain-table textarea,
+.value-canvas-table textarea,
+.mrd-table textarea,
+.mrd-positioning-section textarea {
+  box-sizing: border-box;
   display: block;
   width: 100%;
-  min-height: 110px;
-  padding: 12px 14px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #1e3a5f;
-  background: #ffffff;
-  box-sizing: border-box;
+  min-height: 72px;
+  resize: vertical;
+  border: 0;
+  padding: 8px 10px;
+  color: var(--student-text);
+  background: transparent;
   font: inherit;
   font-size: var(--student-fs-body);
-  line-height: 1.65;
-  resize: vertical;
-}
-
-.field-block textarea:focus {
-  border-color: #cfe2f5;
-  box-shadow: 0 0 0 3px #cfe2f5;
-  outline: none;
-}
-
-.value-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.value-grid .field-block { margin: 0; }
-
-.core-pain-intro {
-  margin-bottom: 18px;
-  padding: 16px 18px;
-  border-left: 3px solid #1565c0;
-  border-radius: 0 14px 14px 0;
-  background: linear-gradient(90deg, #e3f2fd, #ffffff);
-
-  p {
-    margin: 0;
-    color: #2c4a6a;
-    font-size: var(--student-fs-body);
-    line-height: 1.8;
-  }
-
-  p + p { margin-top: 6px; }
-}
-
-.core-pain-table-wrap { overflow-x: auto; }
-
-.core-pain-table {
-  width: 100%;
-  min-width: 820px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th,
-  td {
-    border: 1px solid #cfe2f5;
-    text-align: center;
-    vertical-align: middle;
-  }
-
-  th {
-    padding: 11px 10px;
-    color: #ffffff;
-    background: linear-gradient(100deg, #1e88e5, #1565c0);
-    font-size: var(--student-fs-body);
-    font-weight: 800;
-  }
-
-  td {
-    height: 84px;
-    padding: 9px;
-    color: #2c4a6a;
-    background: #ffffff;
-  }
-
-  th:nth-child(1),
-  td:nth-child(1) { width: 7%; }
-  th:nth-child(2),
-  td:nth-child(2) { width: 15%; }
-  th:nth-child(3),
-  td:nth-child(3) { width: 32%; }
-
-  .pain-type-cell {
-    color: #2c4a6a;
-    font-weight: 800;
-    background: #e3f2fd;
-  }
-
-  textarea {
-    display: block;
-    width: 100%;
-    height: 76px;
-    min-height: 52px;
-    padding: 10px;
-    border: 1px solid #cfe2f5;
-    border-radius: 10px;
-    outline: none;
-    color: #1e3a5f;
-    background: #e3f2fd;
-    box-sizing: border-box;
-    font: inherit;
-    font-size: var(--student-fs-body-sm);
-    line-height: 1.55;
-    resize: vertical;
-
-    &:focus {
-      border-color: #cfe2f5;
-      box-shadow: 0 0 0 3px #cfe2f5;
-    }
-  }
-}
-
-.core-pain-validation-message {
-  margin: 12px 0 0;
-  color: #ffab9d;
-  font-size: var(--student-fs-body-sm);
-  font-weight: 800;
+  line-height: 1.55;
 }
 
-.value-proposition-intro {
-  margin-bottom: 18px;
-  padding: 14px 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  font-size: var(--student-fs-body);
-  line-height: 1.8;
+.core-pain-table textarea:focus,
+.value-canvas-table textarea:focus,
+.mrd-table textarea:focus,
+.mrd-positioning-section textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
 }
 
+/* ===== 画布区 ===== */
 .canvas-section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin: 18px 0 10px;
-
-  h4 { margin: 0; color: #1e3a5f; font-size: 17px; }
-  small { margin-left: 6px; color: #5a7a9a; font-size: var(--student-fs-caption); font-weight: 600; }
 }
 
 .canvas-section-heading--spaced { margin-top: 28px; }
 
+.canvas-section-heading h4 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
+
+.canvas-section-heading small {
+  margin-left: 6px;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-caption);
+  font-weight: 600;
+}
+
+/* 导出 / 上传按钮：白底灰边（对齐 .outline-action 风格） */
 .canvas-export-button,
 .template-download-button,
 .canvas-upload-trigger {
@@ -1123,67 +1052,69 @@ async function handleValueCanvasUpload(event) {
   align-items: center;
   justify-content: center;
   gap: 7px;
-  border: 1px solid #1e88e5;
+  border: 1px solid rgba(31, 41, 55, 0.4);
   border-radius: 10px;
-  color: #ffffff;
-  background: linear-gradient(105deg, #1e88e5, #1565c0);
+  color: var(--student-accent);
+  background: #ffffff;
   cursor: pointer;
   font: inherit;
-  font-weight: 800;
-  transition: .2s ease;
+  font-weight: 700;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 }
 
-.canvas-export-button { min-width: 92px; height: 34px; padding: 0 14px; font-size: var(--student-fs-body-sm); }
-.template-download-button { min-width: 116px; height: 36px; padding: 0 14px; font-size: var(--student-fs-body-sm); }
+.canvas-export-button { min-width: 92px; min-height: 40px; padding: 0 18px; font-size: var(--student-fs-body-sm); }
+.template-download-button { min-width: 116px; min-height: 40px; padding: 0 18px; font-size: var(--student-fs-body-sm); }
 .canvas-upload-trigger { min-width: 218px; min-height: 54px; padding: 0 22px; font-size: var(--student-fs-body); }
 
 .canvas-export-button:hover,
 .template-download-button:hover,
 .canvas-upload-trigger:hover:not(:disabled) {
-  border-color: #1565c0;
-  transform: translateY(-1px);
-  box-shadow: 0 7px 18px #cfe2f5;
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
 }
 
-.canvas-upload-trigger:disabled { cursor: not-allowed; opacity: .65; }
-
-.value-canvas-table-wrap { overflow-x: auto; }
-
-.value-canvas-table {
-  width: 100%;
-  min-width: 820px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th,
-  td { border: 1px solid #cfe2f5; }
-  th { padding: 10px; color: #ffffff; background: linear-gradient(100deg, #1e88e5, #1565c0); font-size: var(--student-fs-body); font-weight: 800; }
-  td { padding: 10px; color: #2c4a6a; background: #ffffff; font-size: var(--student-fs-body-sm); line-height: 1.65; vertical-align: middle; }
-  th:nth-child(1), td:nth-child(1) { width: 19%; font-weight: 800; text-align: center; }
-  th:nth-child(1) { color: #ffffff; }
-  td:nth-child(1) { color: #2c4a6a; }
-  th:nth-child(2), td:nth-child(2) { width: 24%; }
-  th:nth-child(2) { color: #ffffff; }
-  td:nth-child(2) { color: #5a7a9a; }
-  textarea {
-    display: block; width: 100%; min-height: 72px; padding: 10px; border: 1px solid #cfe2f5; border-radius: 9px; color: #1e3a5f; background: #e3f2fd; box-sizing: border-box; font: inherit; font-size: var(--student-fs-body-sm); line-height: 1.55; resize: vertical;
-    &:focus { border-color: #cfe2f5; box-shadow: 0 0 0 3px #cfe2f5; outline: none; }
-  }
+.canvas-upload-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .canvas-drawing-section {
   margin-top: 28px;
   padding: 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 16px;
-  background: linear-gradient(110deg, #e3f2fd, #ffffff);
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
   text-align: center;
+}
 
-  h4 { margin: 0; color: #1e3a5f; font-size: 17px; text-align: left; }
-  p { margin: 9px 0 18px; color: #5a7a9a; font-size: var(--student-fs-body-sm); line-height: 1.75; text-align: left; }
+.canvas-drawing-section h4 {
+  margin: 0;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+  text-align: left;
 }
 
-.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
+.canvas-drawing-section p {
+  margin: 9px 0 18px;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.6;
+  text-align: left;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
 
 .value-canvas-preview {
   display: flex;
@@ -1193,68 +1124,96 @@ async function handleValueCanvasUpload(event) {
   margin: 0 auto;
   text-align: left;
 
-  :deep(.el-image) { width: 116px; height: 76px; border: 1px solid #cfe2f5; border-radius: 10px; cursor: zoom-in; }
+  :deep(.el-image) {
+    width: 116px;
+    height: 76px;
+    border: 1px solid var(--student-panel-border);
+    border-radius: 10px;
+    cursor: zoom-in;
+  }
+
   div { display: grid; gap: 5px; }
-  strong { color: #1e3a5f; font-size: var(--student-fs-body); }
-  span { color: #5a7a9a; font-size: var(--student-fs-caption); }
+  strong { color: var(--student-text); font-size: var(--student-fs-body); font-weight: 700; }
+  span { color: var(--student-text-secondary); font-size: var(--student-fs-caption); }
 }
 
-.text-button { width: fit-content; padding: 0; border: 0; color: #1565c0; background: transparent; cursor: pointer; font: inherit; font-size: var(--student-fs-caption); text-decoration: underline; }
+.text-button {
+  width: fit-content;
+  padding: 0;
+  border: 0;
+  color: var(--student-accent);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--student-fs-caption);
+  text-decoration: underline;
+}
 
 .canvas-guidance {
   position: relative;
   margin-top: 22px;
   padding: 15px 18px 15px 152px;
-  border-left: 3px solid #1565c0;
-  border-radius: 0 12px 12px 0;
-  background: #e3f2fd;
+  border-left: 3px solid var(--student-accent);
+  border-radius: 0 8px 8px 0;
+  background: var(--student-accent-soft);
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.6;
 
-  p { margin: 0; color: #5a7a9a; font-size: var(--student-fs-body-sm); line-height: 1.75; }
+  p { margin: 0; color: var(--student-text-secondary); font-size: var(--student-fs-body-sm); line-height: 1.6; }
   p + p { margin-top: 4px; }
   .template-download-button { position: absolute; top: 44px; left: 18px; }
 }
 
-.positioning-intro {
-  margin-bottom: 18px;
-  padding: 15px 18px;
-  border-left: 3px solid #1565c0;
-  border-radius: 0 14px 14px 0;
-  background: linear-gradient(90deg, #e3f2fd, #ffffff);
-
-  p { margin: 0; color: #2c4a6a; font-size: var(--student-fs-body); line-height: 1.8; }
-  p + p { margin-top: 5px; color: #5a7a9a; }
-}
-
+/* ===== 定位陈述卡片 ===== */
 .positioning-version-card {
   overflow: hidden;
   margin-top: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 16px;
-  background: linear-gradient(120deg, #e3f2fd, #ffffff);
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 14px;
-    padding: 10px 16px;
-    border-bottom: 1px solid #cfe2f5;
-    background: #bbdefb;
-  }
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.positioning-version-card:hover {
+  border-color: var(--student-accent);
+  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.08);
+}
+
+.positioning-version-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--student-panel-border);
+  background: var(--student-accent-soft);
+}
+
+.positioning-version-card header span {
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
+}
 
-  header span { color: #1e3a5f; font-size: var(--student-fs-h2); font-weight: 900; }
-  header small { color: #5a7a9a; font-size: var(--student-fs-caption); }
+.positioning-version-card header small {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-caption);
 }
 
 .statement-preview {
   margin: 0;
   padding: 15px 16px;
-  color: #5a7a9a;
+  color: var(--student-text-secondary);
   background: #ffffff;
   font-size: var(--student-fs-body);
-  line-height: 1.85;
+  line-height: 1.6;
+}
 
-  strong { color: #64daf8; font-weight: 800; }
+.statement-preview strong {
+  color: var(--student-text);
+  font-weight: 700;
 }
 
 .positioning-fields {
@@ -1262,166 +1221,400 @@ async function handleValueCanvasUpload(event) {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   padding: 16px;
+}
 
-  label { display: grid; gap: 6px; min-width: 0; }
-  label span { color: #2c4a6a; font-size: var(--student-fs-caption); font-weight: 800; }
-  input,
-  textarea {
-    width: 100%; padding: 10px 11px; border: 1px solid #cfe2f5; border-radius: 9px; color: #1e3a5f; background: #e3f2fd; box-sizing: border-box; font: inherit; font-size: var(--student-fs-body-sm); line-height: 1.55;
-    &:focus { border-color: #cfe2f5; box-shadow: 0 0 0 3px #cfe2f5; outline: none; }
-  }
-  textarea { min-height: 66px; resize: vertical; }
+.positioning-fields label {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
 }
 
-.positioning-fields__wide { grid-column: 1 / -1; }
+.positioning-fields label span {
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-caption);
+  font-weight: 700;
+}
 
-.mrd-intro {
-  margin-bottom: 20px;
-  padding: 15px 18px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
-  color: #2c4a6a;
-  background: linear-gradient(100deg, #e3f2fd, #ffffff);
+.positioning-fields input,
+.positioning-fields textarea {
+  width: 100%;
+  padding: 10px 11px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  color: var(--student-text);
+  background: #ffffff;
+  box-sizing: border-box;
+  font: inherit;
   font-size: var(--student-fs-body);
-  line-height: 1.85;
+  line-height: 1.55;
 }
 
-.mrd-section { margin-top: 24px; }
-.mrd-section h4,
-.mrd-positioning-section h4 { margin: 0 0 10px; color: #1e3a5f; font-size: var(--student-fs-h2); font-weight: 900; }
-.mrd-table-wrap { overflow-x: auto; }
+.positioning-fields input:focus,
+.positioning-fields textarea:focus {
+  outline: 2px solid rgba(31, 41, 55, 0.15);
+  outline-offset: -2px;
+}
 
-.mrd-table {
-  width: 100%;
-  min-width: 760px;
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  th, td { border: 1px solid #cfe2f5; }
-  th { padding: 9px; color: #ffffff; background: linear-gradient(100deg, #1e88e5, #1565c0); font-size: var(--student-fs-body-sm); font-weight: 800; }
-  td { min-height: 42px; padding: 7px; color: #2c4a6a; background: #ffffff; font-size: var(--student-fs-body-sm); text-align: center; vertical-align: middle; }
-  th:nth-child(1), td:nth-child(1) { width: 8%; }
-  th:nth-child(2), td:nth-child(2) { width: 17%; }
-  .mrd-row-title { color: #2c4a6a; font-weight: 800; }
-  .mrd-module { color: #5a7a9a; }
-  textarea {
-    display: block; width: 100%; min-height: 50px; padding: 8px 10px; border: 1px solid #cfe2f5; border-radius: 8px; color: #1e3a5f; background: #e3f2fd; box-sizing: border-box; font: inherit; font-size: var(--student-fs-body-sm); line-height: 1.55; resize: vertical;
-    &:focus { border-color: #cfe2f5; box-shadow: 0 0 0 3px #cfe2f5; outline: none; }
-  }
+.positioning-fields textarea {
+  min-height: 66px;
+  resize: vertical;
+}
+
+.positioning-fields__wide {
+  grid-column: 1 / -1;
+}
+
+/* ===== MRD 区 ===== */
+.mrd-section {
+  margin-top: 24px;
+}
+
+.mrd-section h4,
+.mrd-positioning-section h4 {
+  margin: 0 0 10px;
+  color: var(--student-text);
+  font-size: var(--student-fs-h2);
+  font-weight: 700;
 }
 
 .mrd-positioning-section {
   margin-top: 25px;
   padding: 16px;
-  border: 1px solid #cfe2f5;
-  border-radius: 14px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 12px;
   background: #ffffff;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
+}
 
-  textarea {
-    display: block; width: 100%; min-height: 120px; padding: 12px; border: 1px solid #cfe2f5; border-radius: 10px; color: #1e3a5f; background: #e3f2fd; box-sizing: border-box; font: inherit; font-size: var(--student-fs-body); line-height: 1.65; resize: vertical;
-    &:focus { border-color: #cfe2f5; box-shadow: 0 0 0 3px #cfe2f5; outline: none; }
-  }
+.mrd-positioning-section textarea {
+  min-height: 120px;
+  border: 1px solid var(--student-panel-border);
+  border-radius: 8px;
+  background: #ffffff;
 }
 
 .mrd-guidance {
   margin-top: 20px;
   padding: 13px 16px;
-  border-left: 3px solid #1565c0;
-  border-radius: 0 12px 12px 0;
-  background: #e3f2fd;
-  p { margin: 0; color: #5a7a9a; font-size: var(--student-fs-body-sm); line-height: 1.75; }
-  p + p { margin-top: 4px; }
+  border-left: 3px solid var(--student-accent);
+  border-radius: 0 8px 8px 0;
+  background: var(--student-accent-soft);
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.6;
+}
+
+.mrd-guidance p {
+  margin: 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  line-height: 1.6;
+}
+
+.mrd-guidance p + p {
+  margin-top: 4px;
+}
+
+/* ===== 消息提示 ===== */
+.core-pain-validation-message {
+  margin: 12px 0 0;
+  color: var(--student-text-secondary);
+  font-size: var(--student-fs-body-sm);
+  font-weight: 600;
 }
 
+.core-pain-validation-message.success {
+  color: var(--student-success);
+}
+
+/* ===== 底部步骤导航按钮 ===== */
 .step-navigation {
   display: flex;
   justify-content: center;
   gap: 14px;
-  margin-top: 22px;
+  margin-top: 20px;
 }
 
-.btn-nav.btn-save,
-.btn-nav.btn-primary {
-  border-color: #1e88e5;
+.step-navigation .btn-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid rgba(31, 41, 55, 0.4);
+  border-radius: 10px;
+  color: var(--student-text);
+  background: #ffffff;
+  font-size: var(--student-fs-button);
+  font-weight: 600;
+  cursor: pointer;
+  text-shadow: none;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.step-navigation .btn-nav:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: var(--student-accent-soft);
+  color: var(--student-accent);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12);
+}
+
+.step-navigation .btn-nav.btn-save {
+  border-color: #e5e7eb;
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.step-navigation .btn-nav.btn-save:hover:not(:disabled) {
+  border-color: var(--student-accent);
+  background: #e9ecef;
+  color: var(--student-accent);
+}
+
+.step-navigation .btn-nav.btn-primary {
+  border-color: var(--student-accent);
   color: #ffffff;
-  background: linear-gradient(95deg, #1e88e5, #1565c0);
+  background: var(--student-accent);
+  font-weight: 700;
+  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
+}
+
+.step-navigation .btn-nav.btn-primary:hover:not(:disabled) {
+  background: var(--student-accent-deep);
+  border-color: var(--student-accent-deep);
+  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
 }
 
-.btn-nav:disabled {
+.step-navigation .btn-nav:disabled {
   cursor: not-allowed;
-  opacity: 0.45;
+  opacity: 0.5;
   transform: none;
+  box-shadow: none;
 }
 
+/* training-actions：容器保留，el-button 由全局接管 */
 .training-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 52px;
-  margin-top: 36px;
-}
-
-.training-actions :deep(.training-action) {
-  min-width: 172px;
-  height: 64px;
-  padding: 0 28px;
-  border: 1px solid #1e88e5;
-  border-radius: 6px;
-  color: #2c4a6a;
-  background: #e3f2fd;
-  font-size: var(--student-fs-h1);
-  font-weight: 900;
-}
-
-.training-actions :deep(.training-action:hover:not(.is-disabled)) {
-  border-color: #1565c0;
-  color: #ffffff;
-  background: #1e88e5;
+  gap: 14px;
+  margin-top: 20px;
 }
 
-@media (max-width: 1100px) {
-  .product-positioning-page { grid-template-columns: 1fr; }
+/* ===== 响应式 ===== */
+@media (max-width: 840px) {
+  .positioning-fields { grid-template-columns: 1fr; }
+  .positioning-fields__wide { grid-column: auto; }
 }
 
-@media (max-width: 900px) {
-  .product-positioning-page { padding: 14px; }
-  .training-core { padding: 18px; border-radius: 24px; }
+@media (max-width: 720px) {
+  .task-header { flex-direction: column; align-items: flex-start; }
   .workbench-head,
   .workbench-actions,
   .step-navigation { flex-direction: column; align-items: stretch; }
   .workbench-actions,
   .outline-action,
-  .btn-nav,
-  .training-actions :deep(.training-action) { width: 100%; }
-  .step-indicator {
-    align-items: stretch;
-    flex-direction: column;
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    overflow: visible;
-    border-radius: 20px;
-  }
-  .step-tab { flex: 0 0 auto; width: 100%; }
-  .step-connector {
-    flex: 0 0 20px;
-    min-width: 0;
-    width: 2px;
-    height: 20px;
-    margin-left: 29px;
-    text-align: center;
-    writing-mode: vertical-rl;
-  }
-  .value-grid { grid-template-columns: 1fr; }
-  .positioning-fields { grid-template-columns: 1fr; }
-  .positioning-fields__wide { grid-column: auto; }
+  .btn-nav { width: 100%; }
   .canvas-guidance { padding: 15px; }
   .canvas-guidance .template-download-button { position: static; margin: 8px 0; }
 }
-.workbench-head--actions-only {
-  justify-content: flex-end;
-  margin-bottom: 18px;
-  padding-bottom: 0;
-  border-bottom: 0;
+</style>
+
+<style lang="scss">
+/* ===== 画布 + 行高 ===== */
+#app .studentLayout .app-main:has(.product-positioning-page) {
+  background: #ffffff !important;
+}
+#app .studentLayout .app-main:has(.product-positioning-page) .product-positioning-page {
+  line-height: 1.55 !important;
+}
+
+/* ===== 步骤导航：按钮切换风 ===== */
+#app .studentLayout section.app-main:has(.product-positioning-page) .step-indicator {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  width: 100% !important;
+  margin: 4px 0 16px !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  .step-connector { display: none !important; }
+
+  .step-tab {
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: auto !important;
+    min-height: 42px !important;
+    margin: 0 !important;
+    padding: 8px 14px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    color: #6b7280 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    letter-spacing: 0 !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    cursor: pointer;
+    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
+
+    .step-marker {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      flex: 0 0 auto !important;
+      min-width: 22px !important;
+      width: auto !important;
+      height: 22px !important;
+      padding: 0 5px !important;
+      border: none !important;
+      border-radius: 6px !important;
+      background: #f3f4f6 !important;
+      color: #6b7280 !important;
+      font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
+      font-size: 12px !important;
+      font-weight: 700 !important;
+      line-height: 1 !important;
+      transition: background-color 0.16s ease, color 0.16s ease !important;
+    }
+
+    .step-copy {
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 0 !important;
+      min-width: 0 !important;
+    }
+
+    .step-name {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      line-height: 1.3 !important;
+      color: inherit !important;
+    }
+
+    .step-action { display: none !important; }
+
+    /* 未到达项 hover */
+    &:hover:not(.active):not(.complete) {
+      border-color: #1f2937 !important;
+      background: #f9fafb !important;
+      color: #1f2937 !important;
+      .step-marker { background: #1f2937 !important; color: #ffffff !important; }
+    }
+
+    /* 已完成 */
+    &.complete:not(.active) {
+      border-color: #dce9e2 !important;
+      color: #374151 !important;
+      .step-marker { background: rgba(74, 157, 110, 0.12) !important; color: #3f8a5f !important; }
+      &:hover {
+        border-color: #4a9d6e !important;
+        background: #f9fafb !important;
+        .step-marker { background: #4a9d6e !important; color: #ffffff !important; }
+      }
+    }
+
+    /* 当前步骤 */
+    &.active {
+      border-color: #1f2937 !important;
+      background: #1f2937 !important;
+      color: #ffffff !important;
+      font-weight: 700 !important;
+      .step-marker { background: #ffffff !important; color: #1f2937 !important; }
+      &:hover {
+        background: #111827 !important;
+        border-color: #111827 !important;
+      }
+    }
+  }
+}
+
+/* ===== 窄屏 ===== */
+@media (max-width: 900px) {
+  #app .studentLayout section.app-main:has(.product-positioning-page) .step-indicator {
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+  }
+  #app .studentLayout section.app-main:has(.product-positioning-page) .step-indicator .step-tab {
+    flex: 0 0 auto !important;
+    max-width: none !important;
+  }
+}
+
+/* ===== 顶部任务工具栏换肤 ===== */
+.product-positioning-page .task-toolbar-button.el-button,
+.product-positioning-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;
+}
+
+.product-positioning-page .task-toolbar-button.el-button .el-icon,
+.product-positioning-page .material-button.el-button .el-icon {
+  font-size: 14px;
+  color: inherit;
+}
+
+.product-positioning-page .task-toolbar-button.el-button:hover,
+.product-positioning-page .task-toolbar-button.el-button:focus,
+.product-positioning-page .material-button.el-button:hover,
+.product-positioning-page .material-button.el-button:focus {
+  border-color: #1f2937;
+  color: #1f2937;
+  background: #f9fafb;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.1);
+}
+
+.product-positioning-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);
+}
+
+.product-positioning-page .task-toolbar-button--submit.el-button:hover,
+.product-positioning-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);
+}
+
+.product-positioning-page .task-toolbar-button.el-button.is-loading {
+  border-color: #d1d5db;
+  color: #374151;
+  background: #ffffff;
 }
 </style>
diff --git a/src/views/product/market-opportunity-selection.vue b/src/views/product/market-opportunity-selection.vue
index f286b42..0e31ec4 100644
--- a/src/views/product/market-opportunity-selection.vue
+++ b/src/views/product/market-opportunity-selection.vue
@@ -815,18 +815,18 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ taskName: tas
   > i { display: none !important; }
 
   .step-tab {
-    flex: 1 1 0 !important;
-    max-width: 220px !important;
+    flex: 0 0 auto !important;
+    min-width: auto !important;
+    max-width: none !important;
     display: flex !important;
     flex-direction: row !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 8px !important;
-    min-width: 0 !important;
     height: auto !important;
     min-height: 42px !important;
     margin: 0 !important;
-    padding: 8px 12px !important;
+    padding: 8px 14px !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 8px !important;
     background: #ffffff !important;
@@ -836,7 +836,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ taskName: tas
     font-weight: 600 !important;
     line-height: 1.3 !important;
     letter-spacing: 0 !important;
-    white-space: normal !important;
+    white-space: nowrap !important;
     text-align: center !important;
     cursor: pointer;
     transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
@@ -924,7 +924,7 @@ function exportOutcome() { const blob = new Blob([JSON.stringify({ taskName: tas
     overflow-x: auto !important;
   }
   #app .studentLayout section.app-main:has(.opportunity-page) .step-indicator .step-tab {
-    flex: 0 0 148px !important;
+    flex: 0 0 auto !important;
     max-width: none !important;
   }
 }