refactor(beautify): D39 12 处含 hex 的静态内联 style 收敛为 class + 令牌

- diet/record-detail：AI 卡片强调条 -> .card-accent--ai (\-blue-base)
- diet/records：周报强调条内联渐变与 .card-accent 同值，直接复用类
- health/nutrition-profile：图例色块 -> .legend-color--score / --gut
- health/report-blocks-renderer：分数明细 4 处内联 -> .sub-items/.sub-item/.sub-label/.sub-value
- mind-detail/screening：量表图标底 -> .scale-icon-wrap--phq / --gad
- tasks/create-task：流程任务 8 处内联 -> .form-item--flow/.label--pre/--post/
  .form-hint--tight/.task-picker-scroll/.flow-hint
- 硬编码色 400 -> 387；含 hex 的静态内联 style 归零；6 文件模板/样式/脚本编译通过

cfc-frontend/pages/diet/record-detail.vue

@@ -33,7 +33,7 @@
 
       <!-- AI识别结果 -->
       <view class="card ai-card" v-if="record.aiRecognizedFoods">
-        <view class="card-accent" style="background-color: #2196F3;"></view>
+        <view class="card-accent card-accent--ai"></view>
         <view class="card-body">
           <text class="card-title">识别结果</text>
           <view class="ai-item" v-for="(item, index) in aiFoods" :key="index">
@@ -209,6 +209,9 @@ export default {
   background-color: $dim-body;
   flex-shrink: 0;
 }
+.card-accent--ai {
+  background-color: $mat-blue-base;
+}
 .card-body {
   flex: 1;
   padding: 30rpx;

cfc-frontend/pages/diet/records.vue

@@ -81,7 +81,7 @@
 
       <!-- 高频食材 -->
       <view class="card" v-if="weeklySummary.topFoods.length > 0">
-        <view class="card-accent" style="background: linear-gradient(180deg, #FF8C42, #FFB366);"></view>
+        <view class="card-accent"></view>
         <view class="card-body">
           <text class="card-title">本周高频食材（前10）</text>
           <view class="top-foods-list">

cfc-frontend/pages/health/nutrition-profile.vue

@@ -76,11 +76,11 @@
       </view>
       <view class="trend-legend">
         <view class="legend-item">
-          <view class="legend-color" style="background:#F97316"></view>
+          <view class="legend-color legend-color--score"></view>
           <text class="legend-text">综合评分</text>
         </view>
         <view class="legend-item">
-          <view class="legend-color" style="background:#10B981"></view>
+          <view class="legend-color legend-color--gut"></view>
           <text class="legend-text">肠道健康</text>
         </view>
       </view>
@@ -514,6 +514,8 @@ export default {
   border-radius: 4rpx;
   margin-right: 8rpx;
 }
+.legend-color--score { background: $brand-primary; }
+.legend-color--gut { background: $status-success; }
 .legend-text {
   font-size: 24rpx;
   color: $facade-text-slate;

cfc-frontend/pages/health/report-blocks-renderer.vue

@@ -10,10 +10,10 @@
               <text class="score-value">{{ item.value }}</text>
             </view>
             <text class="score-label">{{ item.label }}</text>
-            <view class="sub-items" v-if="item.subItems && item.subItems.length" style="margin-top:8rpx; display:flex; flex-direction:column; align-items:center;">
-              <view class="sub-item" v-for="(sub, ssi) in item.subItems" :key="ssi" style="display:flex; flex-direction:row; align-items:center;">
-                <text class="sub-label" style="font-size:20rpx; color:#666; margin-right:4rpx;">{{ sub.label }}:</text>
-                <text class="sub-value" style="font-size:20rpx; color:#333;">{{ sub.value }}</text>
+            <view class="sub-items" v-if="item.subItems && item.subItems.length">
+              <view class="sub-item" v-for="(sub, ssi) in item.subItems" :key="ssi">
+                <text class="sub-label">{{ sub.label }}:</text>
+                <text class="sub-value">{{ sub.value }}</text>
               </view>
             </view>
           </view>
@@ -113,6 +113,11 @@ export default {
 .score-circle { width: 96rpx; height: 96rpx; border-radius: 50%; border: 8rpx solid; display: flex; align-items: center; justify-content: center; }
 .score-value { font-size: 30rpx; font-weight: 600; color: $facade-text-strong; }
 .score-label { font-size: 24rpx; color: $facade-text-body; margin-top: 8rpx; }
+/* 分数明细（subItems） */
+.sub-items { margin-top: 8rpx; display: flex; flex-direction: column; align-items: center; }
+.sub-item { display: flex; flex-direction: row; align-items: center; }
+.sub-label { font-size: 20rpx; color: $facade-text-body; margin-right: 4rpx; }
+.sub-value { font-size: 20rpx; color: $facade-text-strong; }
 /* risk */
 .risk-card { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid $facade-fill; }
 .risk-card:last-child { border-bottom: none; }

cfc-frontend/pages/mind-detail/screening.vue

@@ -7,7 +7,7 @@
 
     <view class="section" v-if="!currentScreen">
       <view class="scale-card" @click="startScreen('PHQ9')">
-        <view class="scale-icon-wrap" style="background:#FFF0F5">
+        <view class="scale-icon-wrap scale-icon-wrap--phq">
           <text class="scale-icon">&#x1F9E0;</text>
         </view>
         <view class="scale-info">
@@ -17,7 +17,7 @@
         <text class="scale-arrow">&gt;</text>
       </view>
       <view class="scale-card" @click="startScreen('GAD7')">
-        <view class="scale-icon-wrap" style="background:#F0F4FF">
+        <view class="scale-icon-wrap scale-icon-wrap--gad">
           <text class="scale-icon">&#x1F4A8;</text>
         </view>
         <view class="scale-info">
@@ -229,6 +229,8 @@ $c-crisis-from:     $accent-coral;  // 危机横幅渐变起点（red-400）
 .section { margin: 20rpx 32rpx; background: $app-surface; border-radius: 20rpx; padding: 28rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
 .scale-card { display: flex; align-items: center; padding: 24rpx; background: $facade-fill-ghost; border-radius: 16rpx; margin-bottom: 16rpx; gap: 20rpx; }
 .scale-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.scale-icon-wrap--phq { background: $dim-mind-tint; }
+.scale-icon-wrap--gad { background: $dim-wisdom-tint-3; }
 .scale-icon { font-size: 36rpx; }
 .scale-info { flex: 1; }
 .scale-name { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; display: block; }

cfc-frontend/pages/tasks/create-task.vue

@@ -106,10 +106,10 @@
 <button class="btn-primary" :loading="submitting" :disabled="submitting" @click="submit">创建任务</button>
 
 <!-- TASK-SYS-248: 前置/后置任务（流程任务） -->
-<view class="form-item" style="margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #eee;">
-  <text class="label" style="color: #F97316;">前置任务（可选，多选）</text>
-  <text class="form-hint" style="margin-bottom: 10rpx;">选择本任务执行前必须完成的任务</text>
-  <view style="max-height: 200rpx; overflow-y: auto;">
+<view class="form-item form-item--flow">
+  <text class="label label--pre">前置任务（可选，多选）</text>
+  <text class="form-hint form-hint--tight">选择本任务执行前必须完成的任务</text>
+  <view class="task-picker-scroll">
     <view v-for="task in prerequisiteTasks" :key="task.id" class="task-checkbox-row" @click="togglePrerequisite(task.id)">
       <view class="task-checkbox" :class="{ checked: form.prerequisiteTaskIds.indexOf(task.id) > -1 }">
         <text v-if="form.prerequisiteTaskIds.indexOf(task.id) > -1" class="check-icon">✓</text>
@@ -121,9 +121,9 @@
 </view>
 
 <view class="form-item">
-  <text class="label" style="color: #6366F1;">后置任务（可选，多选）</text>
-  <text class="form-hint" style="margin-bottom: 10rpx;">选择本任务完成后自动解锁的任务（任意一个完成即可）</text>
-  <view style="max-height: 200rpx; overflow-y: auto;">
+  <text class="label label--post">后置任务（可选，多选）</text>
+  <text class="form-hint form-hint--tight">选择本任务完成后自动解锁的任务（任意一个完成即可）</text>
+  <view class="task-picker-scroll">
     <view v-for="task in successorTasks" :key="task.id" class="task-checkbox-row" @click="toggleSuccessor(task.id)">
       <view class="task-checkbox" :class="{ checked: form.successorTaskIds.indexOf(task.id) > -1 }">
         <text v-if="form.successorTaskIds.indexOf(task.id) > -1" class="check-icon">✓</text>
@@ -136,7 +136,7 @@
 
 <view class="form-item" v-if="form.prerequisiteTaskIds.length > 0 || form.successorTaskIds.length > 0">
   <text class="label">流程任务</text>
-  <text style="font-size: 24rpx; color: #F97316;">自动标记为流程任务</text>
+  <text class="flow-hint">自动标记为流程任务</text>
   <text class="form-hint">有前置或后置任务时，本任务将自动保存为流程任务</text>
 </view>
 </view>
@@ -479,13 +479,19 @@ onStartRequiredChange(e) {
 .container { padding: 30rpx; }
 .form-container { background: $app-surface; border-radius: 20rpx; padding: 30rpx; }
 .form-item { margin-bottom: 30rpx; }
+.form-item--flow { margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid $facade-hairline-2; }
 .label { display: block; font-size: 28rpx; color: $facade-text-strong; margin-bottom: 10rpx; }
+.label--pre { color: $brand-primary; }
+.label--post { color: $dim-wisdom; }
+.task-picker-scroll { max-height: 200rpx; overflow-y: auto; }
+.flow-hint { font-size: 24rpx; color: $brand-primary; }
 .input, .textarea { border: 1rpx solid $facade-border-soft; border-radius: 10rpx; font-size: 28rpx; width: 100%; box-sizing: border-box; }
 /* 输入框高度统一 108rpx；line-height 与高度一致，保证微信 input 文字垂直居中 */
 .input { height: 108rpx; line-height: 108rpx; padding: 0 24rpx; }
 .textarea { height: 150rpx; line-height: 1.5; padding: 20rpx 24rpx; }
 .picker { border: 1rpx solid $facade-border-soft; border-radius: 10rpx; font-size: 28rpx; color: $facade-text-body; box-sizing: border-box; height: 108rpx; display: flex; align-items: center; padding: 0 24rpx; }
 .form-hint { display: block; font-size: 22rpx; color: $facade-text-muted; margin-top: 8rpx; }
+.form-hint--tight { margin-bottom: 10rpx; }
 .child-checkbox { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid $facade-fill; }
 .child-checkbox:last-child { border-bottom: none; }
 .child-name { font-size: 28rpx; color: $facade-text-strong; margin-left: 10rpx; }