diff --git a/mobile/public/candidate-avatar.png b/mobile/public/candidate-avatar.png
new file mode 100644
index 00000000..8b65016b
Binary files /dev/null and b/mobile/public/candidate-avatar.png differ
diff --git a/mobile/public/map-icons/ask.png b/mobile/public/map-icons/ask.png
new file mode 100644
index 00000000..6bb6afcf
Binary files /dev/null and b/mobile/public/map-icons/ask.png differ
diff --git a/mobile/public/map-icons/learn.png b/mobile/public/map-icons/learn.png
new file mode 100644
index 00000000..560fa89b
Binary files /dev/null and b/mobile/public/map-icons/learn.png differ
diff --git a/mobile/public/map-icons/practice.png b/mobile/public/map-icons/practice.png
new file mode 100644
index 00000000..9064298c
Binary files /dev/null and b/mobile/public/map-icons/practice.png differ
diff --git a/mobile/public/map-icons/report.png b/mobile/public/map-icons/report.png
new file mode 100644
index 00000000..5edc59c9
Binary files /dev/null and b/mobile/public/map-icons/report.png differ
diff --git a/mobile/public/practice/coach-avatar.svg b/mobile/public/practice/coach-avatar.svg
new file mode 100644
index 00000000..4fdfbb76
--- /dev/null
+++ b/mobile/public/practice/coach-avatar.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E9F1FF"/>
+      <stop offset="1" stop-color="#94AAD1"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M22 80c4-19 14-29 26-29s22 10 26 29" fill="#244B78"/>
+  <path d="M31 44c1-16 8-25 17-25s16 9 17 25c1 15-7 27-17 27S30 59 31 44Z" fill="#F1C8A8"/>
+  <path d="M30 36c2-15 9-24 19-24 11 0 18 9 20 24-14-8-26-8-39 0Z" fill="#26334A"/>
+  <path d="M37 49c2-2 5-2 7 0M52 49c2-2 5-2 7 0" stroke="#172235" stroke-width="3" stroke-linecap="round"/>
+  <path d="M37 62c7 4 15 4 22 0" stroke="#172235" stroke-width="3" stroke-linecap="round"/>
+  <path d="M39 56h18" stroke="#6E3D2D" stroke-width="4" stroke-linecap="round"/>
+  <path d="M34 78h28l-4 9H38z" fill="#F8FBFF"/>
+  <path d="M21 80h54l6 14H15z" fill="#1D3E67"/>
+</svg>
diff --git a/mobile/public/practice/customer-avatar.svg b/mobile/public/practice/customer-avatar.svg
new file mode 100644
index 00000000..bbe012d7
--- /dev/null
+++ b/mobile/public/practice/customer-avatar.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFE4D7"/>
+      <stop offset="1" stop-color="#FF987A"/>
+    </linearGradient>
+    <linearGradient id="hair" x1="24" y1="14" x2="72" y2="76" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8B3A22"/>
+      <stop offset="1" stop-color="#4B1B12"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M22 82c4-18 14-29 26-29s22 11 26 29" fill="#E9523E"/>
+  <path d="M25 42c0-18 10-30 24-30 15 0 25 12 25 31 0 14-5 25-13 31H35c-7-6-10-18-10-32Z" fill="url(#hair)"/>
+  <path d="M31 46c1-15 8-25 17-25s16 10 17 25c1 15-7 27-17 27S30 61 31 46Z" fill="#FFD0B6"/>
+  <path d="M30 40c9-2 15-8 18-18 4 9 11 14 20 16-2-14-10-22-20-22-12 0-20 9-18 24Z" fill="#6F2B1C"/>
+  <path d="M30 47c-6-1-8 9-2 12M66 47c6-1 8 9 2 12" stroke="#F2B391" stroke-width="4" stroke-linecap="round"/>
+  <path d="M36 44c4-4 8-4 12-1M60 44c-4-4-8-4-12-1" stroke="#2E1C17" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="40" cy="51" r="3" fill="#2E1C17"/>
+  <circle cx="56" cy="51" r="3" fill="#2E1C17"/>
+  <ellipse cx="48" cy="63" rx="8" ry="6" fill="#8E1F1C"/>
+  <path d="M42 60h12" stroke="#FFF2EA" stroke-width="2" stroke-linecap="round"/>
+  <path d="M36 78h24l-4 9H40z" fill="#FFF7F2"/>
+  <path d="M23 82h50l6 14H17z" fill="#D94133"/>
+</svg>
diff --git a/mobile/public/practice/trainee-avatar.svg b/mobile/public/practice/trainee-avatar.svg
new file mode 100644
index 00000000..32ebe07b
--- /dev/null
+++ b/mobile/public/practice/trainee-avatar.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DDF8F2"/>
+      <stop offset="1" stop-color="#5CC9B5"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M23 80c3-19 13-29 25-29s22 10 25 29" fill="#2072B8"/>
+  <path d="M31 44c1-16 8-24 17-24s16 8 17 24c1 15-7 27-17 27S30 59 31 44Z" fill="#FFD2B8"/>
+  <path d="M28 31c4-11 12-18 22-18 12 0 20 8 23 19-14-1-27-4-45-1Z" fill="#19558D"/>
+  <path d="M26 31h46v12H26z" fill="#2E7CCD"/>
+  <path d="M39 25h18v8H39z" fill="#D9ECFF"/>
+  <circle cx="40" cy="49" r="3" fill="#172235"/>
+  <circle cx="56" cy="49" r="3" fill="#172235"/>
+  <path d="M40 60c5 4 11 4 16 0" stroke="#172235" stroke-width="4" stroke-linecap="round"/>
+  <path d="M34 79h28l-5 8H39z" fill="#F8FBFF"/>
+</svg>
diff --git a/mobile/public/supervisor-avatar.png b/mobile/public/supervisor-avatar.png
new file mode 100644
index 00000000..c2ab98c4
Binary files /dev/null and b/mobile/public/supervisor-avatar.png differ
diff --git a/mobile/src/App.vue b/mobile/src/App.vue
index c032589a..e6f3faf8 100644
--- a/mobile/src/App.vue
+++ b/mobile/src/App.vue
@@ -32,7 +32,16 @@
       </form>
     </section>
 
-    <section v-else class="page" :class="{ 'user-redesign': roleKey === 'user' }">
+    <section
+      v-else
+      class="page"
+      :class="{
+        'user-redesign': roleKey === 'user',
+        'role-redesign': roleKey !== 'user',
+        'candidate-redesign': roleKey === 'candidate',
+        'supervisor-redesign': roleKey === 'supervisor'
+      }"
+    >
       <header v-if="!(roleKey === 'user' && isHomeTab)" class="top">
         <div class="top-row">
           <h1>AI人力助手</h1>
@@ -40,7 +49,8 @@
             {{ role.roleLabel }}
             <Icon name="chevron-down" size="16" />
           </button>
-          <div class="avatar" :class="role.avatarTone" aria-hidden="true">
+          <img v-if="roleAvatarSrc" class="avatar avatar-img" :src="roleAvatarSrc" alt="" />
+          <div v-else class="avatar" :class="role.avatarTone" aria-hidden="true">
             <span></span>
           </div>
         </div>
@@ -52,86 +62,70 @@
         </p>
       </header>
 
-      <Card v-if="isHomeTab && roleKey !== 'user'" :title="roleKey === 'supervisor' ? '今日处理流程' : '今日使用流程'">
-        <div class="flow-steps">
-          <button v-for="item in roleFlowSteps" :key="`${item.phase}-${item.title}`" type="button" :class="{ active: isFlowActive(item) }" @click="openFlowStep(item)">
-            <em>{{ item.phase }}</em>
-            <span>
-              <b>{{ item.title }}</b>
-              <small>{{ item.desc }}</small>
-            </span>
-            <Icon name="chevron-right" size="22" />
-          </button>
-        </div>
-      </Card>
-
       <template v-if="roleKey === 'supervisor'">
         <template v-if="isHomeTab">
-        <Card title="团队今日概况">
-          <div class="team-card">
-            <div class="team-copy">
-              <h3>{{ supervisorRole.team.title }}</h3>
-              <p>{{ supervisorRole.team.progressText }}</p>
-              <ProgressBar :value="supervisorRole.team.progress" />
-              <span>{{ supervisorRole.team.completionLabel }} <b>{{ supervisorRole.team.progress }}%</b></span>
+          <section class="supervisor-dashboard">
+            <div class="supervisor-dashboard-head">
+              <h2>团队训练驾驶舱</h2>
+              <button type="button" @click="openSupervisorAction('team')">全部 ›</button>
             </div>
-            <div class="ring-box">
-              <div class="ring" :style="ringStyle(supervisorRole.team.progress)">
-                <b>{{ supervisorRole.team.progress }}%</b>
-                <small>{{ supervisorRole.team.completionLabel }}</small>
-              </div>
-              <button type="button" @click="openSupervisorAction('team')">{{ supervisorRole.team.detailCta }}</button>
+            <div class="supervisor-stat-row">
+              <button v-for="item in supervisorDashboardStats" :key="item.title" type="button" :class="item.tone" @click="openSupervisorAction(item.target)">
+                <small>{{ item.title }}</small>
+                <b>{{ item.value }}</b>
+                <span>{{ item.desc }}</span>
+              </button>
             </div>
-            <div class="mini-stats">
-              <MiniStat
-                v-for="item in supervisorRole.team.stats"
-                :key="item.title"
-                :icon="item.icon"
-                :title="item.title"
-                :value="item.value"
-                :tone="item.tone"
-              />
-            </div>
-          </div>
-        </Card>
+          </section>
 
-        <Card title="待处理">
-          <div class="todo-list">
-            <button v-for="item in supervisorRole.todos" :key="item.title" type="button" @click="openSupervisorTodo(item)">
-              <IconBubble :icon="item.icon" :tone="item.tone" />
+          <section class="home-card dynamics-card">
+            <div class="home-card-head">
+              <h2>团队今日动态</h2>
+              <button type="button" @click="openSupervisorAction('reviews')">复盘列表 ›</button>
+            </div>
+            <div class="activity-timeline">
+              <button v-for="item in practiceReviews.slice(0, 2)" :key="item.id || `${item.time}-${item.trainee}-${item.scene}`" type="button" @click="openPracticeReview(item)">
+                <em>{{ item.score }}</em>
+                <span>
+                  <b>{{ item.trainee }} 完成 {{ item.scene }}</b>
+                  <small>{{ item.time }} · {{ item.summary }}</small>
+                </span>
+                <i>{{ item.status }}</i>
+              </button>
+              <template v-if="!practiceReviews.length">
+                <button v-for="item in supervisorRole.todos" :key="item.title" type="button" @click="openSupervisorTodo(item)">
+                  <em>{{ item.count }}</em>
+                  <span>
+                    <b>{{ item.title }}</b>
+                    <small>{{ item.desc }}</small>
+                  </span>
+                  <i>待办</i>
+                </button>
+              </template>
+            </div>
+          </section>
+
+          <section class="home-card weakness-card">
+            <div class="home-card-head">
+              <h2>团队短板热力图</h2>
+              <button type="button" @click="openSupervisorAction('weakness')">看短板 ›</button>
+            </div>
+            <div class="weakness-grid">
+              <button v-for="item in supervisorHeatmapItems" :key="item.title" type="button" :class="item.tone" @click="openSupervisorAction(item.target)">
+                <small>{{ item.title }}</small>
+                <b>{{ item.value }}</b>
+                <span>{{ item.desc }}</span>
+              </button>
+            </div>
+            <button class="suggestion supervisor-suggestion" type="button" @click="openSupervisorAction('assign')">
+              <IconBubble :icon="supervisorRole.suggestion.icon" :tone="supervisorRole.suggestion.tone" />
               <span>
-                <b>{{ item.title }}</b>
-                <small>{{ item.desc }}</small>
+                <b>{{ supervisorRole.suggestion.title }}</b>
+                <small>{{ supervisorRole.suggestion.desc }}</small>
               </span>
-              <em>{{ item.count }}</em>
-              <Icon name="chevron-right" size="24" />
+              <Icon name="chevron-right" size="26" />
             </button>
-          </div>
-
-          <div v-if="practiceReviews.length" class="record-list">
-            <h3>待复盘列表</h3>
-            <button v-for="item in practiceReviews" :key="item.id || `${item.time}-${item.trainee}-${item.scene}`" type="button" @click="openPracticeReview(item)">
-              <span>
-                <b>{{ item.trainee }} · {{ item.score }}分</b>
-                <small>{{ item.time }} · {{ item.scene }}</small>
-              </span>
-              <em>{{ item.status }}</em>
-            </button>
-          </div>
-        </Card>
-
-        <Card :title="supervisorRole.toolTitle">
-          <ToolGrid :items="supervisorRole.tools" :handler="openSupervisorTool" />
-        </Card>
-
-        <button class="suggestion" type="button" @click="openSupervisorAction('assign')">
-          <IconBubble :icon="supervisorRole.suggestion.icon" :tone="supervisorRole.suggestion.tone" />
-          <span>
-            <b>{{ supervisorRole.suggestion.title }}</b>
-            <small>{{ supervisorRole.suggestion.desc }}</small>
-          </span>
-          <Icon name="chevron-right" size="26" />
-        </button>
+          </section>
         </template>
 
         <Card v-if="activeSupervisorPanel && !isHomeTab" :title="supervisorPanelTitle">
@@ -378,6 +372,7 @@
                   :class="`tone-${item.tone}`"
                   @click="openMentorMapAction(item.key)"
                 >
+                  <img :src="item.icon" alt="" />
                   <span>{{ item.label }}</span>
                   <small>{{ item.desc }}</small>
                   <b>›</b>
@@ -387,65 +382,134 @@
           </template>
         </template>
 
-        <template v-else-if="isHomeTab">
-          <Card title="今日任务" action="查看全部" @action="openUserAction('tasks')">
-            <div class="task-card">
-              <div class="task-copy">
-                <strong>{{ workerRole.primary.badge }}</strong>
-                <h3>{{ workerRole.primary.title }}</h3>
-                <p>{{ workerRole.primary.desc }}</p>
-                <span>进度 {{ workerRole.primary.progressText }}</span>
-                <ProgressBar :value="workerRole.primary.progress" />
-              </div>
-              <div class="headset-art">
-                <Icon :name="workerRole.primary.icon" size="104" stroke="1.7" />
-              </div>
-              <button type="button" @click="handlePrimaryAction">{{ workerRole.primary.cta }}</button>
+        <template v-else-if="roleKey === 'candidate' && isHomeTab">
+          <section class="candidate-progress-head">
+            <h2>应聘进度</h2>
+            <div class="candidate-step-rail">
+              <button v-for="item in candidateProgressItems" :key="item.title" type="button" :class="item.state" @click="openCandidateAction(item.target)">
+                <em>{{ item.mark }}</em>
+                <span>{{ item.title }}</span>
+              </button>
             </div>
+          </section>
 
-            <button class="review-card" type="button" @click="openUserAction('sop')">
-              <IconBubble icon="document" tone="amber" />
-              <span>
-                <b>{{ workerRole.review.title }}</b>
-                <small>{{ workerRole.review.desc }}</small>
-              </span>
-              <Icon name="chevron-right" size="26" />
-            </button>
-          </Card>
+          <section class="home-card candidate-material-card">
+            <div class="home-card-head">
+              <h2>当前步骤：{{ candidateCurrentStep.title }}</h2>
+              <button type="button" @click="openCandidateAction(candidateCurrentStep.target)">去处理 ›</button>
+            </div>
+            <p class="candidate-step-note">{{ candidateCurrentStep.desc }}</p>
+            <div class="candidate-doc-list">
+              <button v-for="item in candidateMaterialChecklist" :key="item.title" type="button" @click="openCandidateAction('submit')">
+                <Icon :name="item.icon" size="24" />
+                <span>
+                  <b>{{ item.title }}</b>
+                  <small>{{ item.hint }}</small>
+                </span>
+                <em :class="item.state">{{ item.status }}</em>
+              </button>
+            </div>
+          </section>
 
-          <Card :title="workerRole.toolTitle">
-            <ToolGrid :items="workerRole.tools" :handler="openUserTool" />
-          </Card>
+          <section class="home-card candidate-approval-card">
+            <div class="home-card-head">
+              <h2>审核进度</h2>
+              <button type="button" @click="openCandidateAction('profile')">看详情 ›</button>
+            </div>
+            <div class="candidate-doc-list compact">
+              <button v-for="item in candidateApprovalItems" :key="item.title" type="button" @click="openCandidateAction(item.target)">
+                <Icon :name="item.icon" size="22" />
+                <span>
+                  <b>{{ item.title }}</b>
+                  <small>{{ item.desc }}</small>
+                </span>
+                <em :class="item.state">{{ item.status }}</em>
+              </button>
+            </div>
+          </section>
+
+          <button class="candidate-submit-button" type="button" @click="openCandidateAction(candidateCurrentStep.target)">
+            {{ candidateCurrentStep.cta }}
+          </button>
         </template>
 
         <Card v-if="roleKey !== 'supervisor' && activeUserPanel && !isHomeTab" :title="userPanelTitle">
           <div class="user-panel">
             <template v-if="activeUserPanel === 'tasks'">
               <template v-if="roleKey === 'user'">
-                <div class="task-card">
-                  <div class="task-copy">
-                    <strong>{{ userPrimaryTask.badge }}</strong>
-                    <h3>{{ userPrimaryTask.title }}</h3>
-                    <p>{{ userPrimaryTask.desc }}</p>
-                    <span>进度 {{ userPrimaryTask.progressText }}</span>
-                    <ProgressBar :value="userPrimaryTask.progress" />
+                <section class="scenario-shell">
+                  <p>选择一个场景开始练</p>
+                  <div class="scenario-tabs" aria-label="训练场景">
+                    <button
+                      v-for="item in practiceScenarios"
+                      :key="item.id"
+                      type="button"
+                      :class="{ active: item.id === selectedPracticeScenarioId }"
+                      @click="selectPracticeScenario(item.id)"
+                    >
+                      {{ item.title }}
+                    </button>
                   </div>
-                  <div class="headset-art">
-                    <Icon :name="userPrimaryTask.icon" size="104" stroke="1.7" />
-                  </div>
-                  <button type="button" @click="handlePrimaryAction">{{ userPrimaryTask.cta }}</button>
-                </div>
 
-                <div v-if="practiceStatus !== 'idle'" class="practice-panel">
-                  <div class="practice-panel-head">
-                    <span>三角色对练</span>
-                    <b v-if="practiceResult">{{ practiceResult.totalScore }}分</b>
-                    <small v-else>{{ practiceStatus === 'starting' ? '准备中' : '进行中' }}</small>
+                  <div class="scenario-card">
+                    <img :src="practiceAvatarSrc('customer')" alt="" />
+                    <span>
+                      <b>{{ selectedPracticeScenario.title }}</b>
+                      <small>{{ selectedPracticeScenario.desc }}</small>
+                    </span>
+                    <em>{{ selectedPracticeScenario.badge }}</em>
+                    <div class="scenario-card-progress">
+                      <small>进度</small>
+                      <b>{{ selectedPracticeScenario.progressText }}</b>
+                      <i><span :style="{ width: selectedPracticeScenario.progress }"></span></i>
+                    </div>
+                    <button type="button" @click="handlePrimaryAction">开始练习</button>
+                  </div>
+
+                  <div class="recent-practice">
+                    <div class="recent-practice-head">
+                      <b>最近练过</b>
+                      <button type="button" @click="openUserAction('history')">查看全部 ›</button>
+                    </div>
+                    <button v-for="item in practiceRecentItems" :key="`${item.title}-${item.time}`" type="button" @click="item.record ? openUserHistory(item.record) : selectPracticeScenario(item.scenarioId)">
+                      <em>✓</em>
+                      <span>
+                        <b>{{ item.title }}</b>
+                        <small>练习时间：{{ item.time }}</small>
+                      </span>
+                      <i>
+                        <small>本轮评分</small>
+                        <b>{{ item.score }}</b>
+                        <span>{{ scoreStars(item.score) }}</span>
+                      </i>
+                    </button>
+                  </div>
+                </section>
+
+                <div v-if="practiceStatus !== 'idle' || practiceResult" class="practice-panel scene-practice">
+                  <div class="practice-panel-head scene-head">
+                    <button class="detail-back" type="button" @click="closePracticeScene">返回</button>
+                    <span>
+                      <b>场景模拟</b>
+                      <small>第 {{ practiceRoundLabel }} 轮对话（共 {{ practiceTotalRounds }} 轮）</small>
+                    </span>
+                    <button v-if="!practiceResult && practiceStatus !== 'idle'" type="button" :disabled="practiceStatus === 'starting' || practiceStatus === 'submitting'" @click="finishMobilePractice">
+                      结束
+                    </button>
+                  </div>
+
+                  <div class="scene-progress">
+                    <span :style="{ width: `${(practiceRoundLabel / practiceTotalRounds) * 100}%` }"></span>
+                    <b>{{ practiceRoundLabel }}/{{ practiceTotalRounds }}</b>
                   </div>
 
                   <div v-if="practiceResult" class="practice-result">
                     <strong>{{ practiceResult.aiComment }}</strong>
                     <p>{{ practiceResult.mentorRewrite }}</p>
+                    <div class="scene-rating" aria-label="本轮评分">
+                      <span>★ ★ ★ ★ ☆</span>
+                      <b>{{ practiceResult.totalScore }}分</b>
+                    </div>
                     <div class="practice-result-actions">
                       <button type="button" @click="startMobilePractice">再练一次</button>
                       <button type="button" @click="goSupervisor">查看主管端</button>
@@ -453,22 +517,38 @@
                   </div>
 
                   <div v-else class="practice-live">
-                    <div class="practice-dialogue">
-                      <p v-for="(turn, index) in practiceTurns" :key="`${turn.role}-${index}`" :class="turn.role">
-                        <span>{{ turn.label }}</span>
-                        {{ turn.text }}
-                      </p>
+                    <div class="practice-dialogue" aria-label="场景对话">
+                      <div v-for="(turn, index) in practiceTurns" :key="`${turn.role}-${index}`" class="practice-message" :class="turn.role">
+                        <img :src="practiceAvatarSrc(turn.role)" alt="" />
+                        <p>
+                          <span>{{ turn.label }}</span>
+                          {{ turn.text }}
+                          <small class="practice-wave">
+                            <i v-for="(height, barIndex) in waveBars" :key="`${turn.role}-${index}-${barIndex}`" :style="{ height: `${height}px` }"></i>
+                            <b>{{ practiceTurnDuration(turn.role, index) }}</b>
+                          </small>
+                        </p>
+                      </div>
                     </div>
-                    <textarea v-model.trim="practiceDraft" rows="3" placeholder="输入你的回复" />
+                    <div class="dialogue-memory">
+                      <b>对话记忆</b>
+                      <small>已记录 {{ practiceTurns.length }} 条上下文，下一轮会继续带入</small>
+                    </div>
+                    <div v-if="latestCoachFeedback" class="round-rating">
+                      <b>本轮评分（师傅评价）</b>
+                      <span aria-label="4星评分">★ ★ ★ ★ ☆</span>
+                      <small>{{ latestCoachFeedback.text }}</small>
+                      <em>4.0</em>
+                    </div>
+                    <textarea v-model.trim="practiceDraft" rows="3" placeholder="输入你的回应，也可以用语音输入" />
                     <div class="practice-actions">
                       <button type="button" :disabled="asrBusy" @click="toggleRecording">
                         {{ recording ? '停止录音' : asrBusy ? '识别中' : useAudioFileFallback ? '选择语音' : '语音输入' }}
                       </button>
                       <input ref="practiceAudioInput" class="practice-audio-input" type="file" accept="audio/*,.mp3,.wav,.m4a,.webm,.ogg" capture @change="handlePracticeAudioFile" />
-                      <button type="button" @click="toggleVoice">{{ voiceEnabled ? '播报:开' : '播报:关' }}</button>
-                      <button type="button" @click="fillPracticeReply">填入建议回复</button>
+                      <button type="button" @click="fillPracticeReply">建议回复</button>
                       <button type="button" :disabled="practiceStatus === 'starting' || practiceStatus === 'submitting'" @click="submitMobilePractice">
-                        {{ practiceStatus === 'submitting' ? '提交中' : '提交本轮' }}
+                        {{ practiceStatus === 'submitting' ? '提交中' : '下一轮' }}
                       </button>
                     </div>
                   </div>
@@ -769,15 +849,9 @@
           </Card>
         </section>
 
-        <Card v-else-if="roleKey === 'candidate' && isHomeTab" title="我的进度" :action="workerRole.recommend" compact-action @action="openUserAction('recommend')">
-          <div class="progress-grid">
-            <ProgressTile v-for="item in workerRole.metrics" :key="item.title" :item="item" />
-          </div>
-
-        </Card>
       </template>
 
-      <nav class="tabbar" aria-label="底部导航">
+      <nav v-if="showTabbar" class="tabbar" aria-label="底部导航">
         <button v-for="tab in visibleTabs" :key="tab.label" type="button" :class="{ active: isTabActive(tab.label) }" @click="openTab(tab.label)">
           <Icon :name="tab.icon" size="28" />
           <span>{{ tab.label }}</span>
@@ -1085,6 +1159,23 @@ interface PracticeRecord {
   summary: string;
 }
 
+interface PracticeScenario {
+  id: string;
+  title: string;
+  badge: string;
+  desc: string;
+  progressText: string;
+  progress: string;
+}
+
+interface PracticeRecentItem {
+  scenarioId: string;
+  title: string;
+  time: string;
+  score: string;
+  record?: PracticeRecord;
+}
+
 interface PracticeDialogue {
   role: PracticeRole;
   label: string;
@@ -1328,6 +1419,62 @@ const tokenKey = 'aihr_mobile_access_token';
 const clientIdKey = 'aihr_mobile_client_id';
 const phoneKey = 'aihr_mobile_phone';
 const phonePattern = /^1[3-9]\d{9}$/;
+const practiceScenarios: PracticeScenario[] = [
+  {
+    id: 'complaint-water',
+    title: '投诉接待',
+    badge: '高频',
+    desc: '业主投诉服务或设施问题的接待与处置',
+    progressText: '2/3',
+    progress: '66%'
+  },
+  {
+    id: 'fee-collection',
+    title: '催费沟通',
+    badge: '高频',
+    desc: '逾期费用提醒与关系维护',
+    progressText: '1/3',
+    progress: '33%'
+  },
+  {
+    id: 'elevator-fault',
+    title: '电梯故障',
+    badge: '应急',
+    desc: '电梯故障期间的安抚、解释与反馈',
+    progressText: '0/3',
+    progress: '0%'
+  },
+  {
+    id: 'fee-objection',
+    title: '收费异议',
+    badge: '高频',
+    desc: '收费标准解释、争议澄清与承诺闭环',
+    progressText: '1/3',
+    progress: '33%'
+  },
+  {
+    id: 'home-visit',
+    title: '上门沟通',
+    badge: '基础',
+    desc: '上门前说明、到场确认和结果反馈',
+    progressText: '0/3',
+    progress: '0%'
+  }
+];
+const practiceRecentFallback: PracticeRecentItem[] = [
+  {
+    scenarioId: 'complaint-water',
+    title: '投诉接待 · 电梯故障投诉',
+    time: '今天 09:18',
+    score: '4.0'
+  },
+  {
+    scenarioId: 'fee-collection',
+    title: '催费沟通 · 逾期费用提醒',
+    time: '昨天 14:32',
+    score: '3.5'
+  }
+];
 
 const roleKey = ref<RoleKey>(readRole());
 const activeTabLabel = ref('今日');
@@ -1344,6 +1491,9 @@ const loggingIn = ref(false);
 const practiceStatus = ref<PracticeStatus>('idle');
 const practiceSessionId = ref('');
 const practiceRoundIndex = ref(0);
+const practiceTotalRounds = 3;
+const practiceRoundLabel = computed(() => Math.max(1, Math.min(practiceRoundIndex.value + 1, practiceTotalRounds)));
+const waveBars = [12, 20, 28, 16, 34, 24, 18, 32, 22, 30, 14, 26, 18, 35, 20, 12];
 const practiceDraft = ref('');
 const practiceTurns = ref<PracticeTurn[]>([]);
 const practiceResult = ref<PracticeFinishResponse | null>(null);
@@ -1355,6 +1505,7 @@ const interviewAnswers = ref<Record<string, string>>({});
 const interviewResult = ref<InterviewFinishResponse | null>(null);
 const interviewMessage = ref('');
 const practiceHistory = ref<PracticeRecord[]>([]);
+const selectedPracticeScenarioId = ref(practiceScenarios[0].id);
 const practiceReviews = ref<PracticeRecord[]>([]);
 const selectedReview = ref<PracticeReviewDetail | null>(null);
 const userReviewDetail = ref<PracticeReviewDetail | null>(null);
@@ -1419,17 +1570,49 @@ let mentorScrollRaf = 0;
 let mentorScrollListening = false;
 
 const mentorImageSrc = `${import.meta.env.BASE_URL}mentor.png`;
+const roleAvatarSrc = computed(() => {
+  if (roleKey.value === 'candidate') return `${import.meta.env.BASE_URL}candidate-avatar.png`;
+  if (roleKey.value === 'supervisor') return `${import.meta.env.BASE_URL}supervisor-avatar.png`;
+  return '';
+});
+const practiceAvatarSrc = (role: PracticeRole) => `${import.meta.env.BASE_URL}practice/${role === 'customer' ? 'customer' : role === 'trainee' ? 'trainee' : 'coach'}-avatar.svg`;
+const practiceTurnDuration = (role: PracticeRole, index: number) => (role === 'coach' ? '00:15' : role === 'trainee' ? '已发送' : index > 0 ? '00:12' : '00:18');
+const selectedPracticeScenario = computed(() => practiceScenarios.find((item) => item.id === selectedPracticeScenarioId.value) || practiceScenarios[0]);
+const formatPracticeScore = (score: number | string) => {
+  const value = Number(score);
+  return Number.isFinite(value) ? value.toFixed(1) : String(score || '4.0');
+};
+const scoreStars = (score: number | string) => {
+  const value = Number(score);
+  const filled = Number.isFinite(value) ? Math.max(0, Math.min(5, Math.round(value))) : 4;
+  return `${'★ '.repeat(filled)}${'☆ '.repeat(5 - filled)}`.trim();
+};
+const practiceRecentItems = computed<PracticeRecentItem[]>(() => {
+  if (!practiceHistory.value.length) return practiceRecentFallback;
+  return practiceHistory.value.slice(0, 2).map((record) => ({
+    scenarioId: selectedPracticeScenarioId.value,
+    title: `${record.scene}${record.summary ? ` · ${record.summary}` : ''}`,
+    time: record.time,
+    score: formatPracticeScore(record.score),
+    record
+  }));
+});
+const latestCoachFeedback = computed(() => {
+  const coachTurns = practiceTurns.value.filter((item) => item.role === 'coach');
+  return coachTurns.length ? coachTurns[coachTurns.length - 1] : null;
+});
 const mentorQuickChips = [
   { label: '催费话术', query: '物业费催缴怎么开口' },
   { label: '投诉应对', query: '业主投诉时第一句话怎么说' },
   { label: '收费标准', query: '物业费收费标准怎么向业主解释' },
   { label: '上门带什么', query: '生活顾问上门处理问题需要带什么' }
 ];
-const mentorMapActions: Array<{ key: MentorMapActionKey; label: string; desc: string; tone: 'blue' | 'green' | 'orange' | 'red' }> = [
-  { key: 'ask', label: '问', desc: '查SOP / 求助话术', tone: 'blue' },
-  { key: 'practice', label: '练', desc: '场景模拟 / 错题重练', tone: 'green' },
-  { key: 'learn', label: '学', desc: '岗前课程 / 每日小训', tone: 'orange' },
-  { key: 'submit', label: '报', desc: '上报案例 / 拍照记录', tone: 'red' }
+const mapIconPath = (name: string) => `${import.meta.env.BASE_URL}map-icons/${name}.png`;
+const mentorMapActions: Array<{ key: MentorMapActionKey; label: string; desc: string; tone: 'blue' | 'green' | 'orange' | 'red'; icon: string }> = [
+  { key: 'ask', label: '问', desc: '查SOP / 求助话术', tone: 'blue', icon: mapIconPath('ask') },
+  { key: 'practice', label: '练', desc: '场景模拟 / 错题重练', tone: 'green', icon: mapIconPath('practice') },
+  { key: 'learn', label: '学', desc: '岗前课程 / 每日小训', tone: 'orange', icon: mapIconPath('learn') },
+  { key: 'submit', label: '报', desc: '上报案例 / 拍照记录', tone: 'red', icon: mapIconPath('report') }
 ];
 
 const navigatePath = (path: string, replace = false) => {
@@ -1502,7 +1685,7 @@ const userPanelTitle = computed(() => {
           recommend: '推荐预习'
         }
       : {
-          tasks: '今日任务',
+          tasks: '场景模拟',
           sop: 'SOP查询',
           cases: '案例学习',
           submit: '提交素材',
@@ -1537,10 +1720,10 @@ const roleFlowSteps = computed<FlowStep[]>(() => {
   }
   if (roleKey.value === 'candidate') {
     return [
-      { phase: '学', title: '预习岗位SOP', desc: '先看客服接待和投诉处理标准', target: 'sop' },
-      { phase: '练', title: '开始面试练习', desc: '按题作答，生成面试评分', target: 'tasks' },
-      { phase: '补', title: '提交补充资料', desc: '上传证书、履历或图片材料', target: 'submit' },
-      { phase: '看', title: '查看进度', desc: '确认资料审核和面试结果', target: 'profile' }
+      { phase: '1', title: '面试', desc: '8分钟结构化问答，完成后生成评分', target: 'tasks' },
+      { phase: '2', title: '补资料', desc: '上传证书、履历或图片材料', target: 'submit' },
+      { phase: '3', title: '岗前学习', desc: '预习客服接待和投诉处理标准', target: 'sop' },
+      { phase: '4', title: '等通知', desc: '查看资料审核和面试结果', target: 'profile' }
     ];
   }
   return [
@@ -1789,6 +1972,25 @@ const openUserPracticePanel = () => {
   scrollToTop();
 };
 
+const resetPracticeConversation = () => {
+  practiceStatus.value = 'idle';
+  practiceSessionId.value = '';
+  practiceRoundIndex.value = 0;
+  practiceDraft.value = '';
+  practiceTurns.value = [];
+  practiceResult.value = null;
+  practiceMessage.value = '';
+};
+
+const selectPracticeScenario = (id: string) => {
+  selectedPracticeScenarioId.value = id;
+  resetPracticeConversation();
+};
+
+const closePracticeScene = () => {
+  resetPracticeConversation();
+};
+
 const handlePrimaryAction = () => {
   if (roleKey.value === 'candidate') {
     void startCandidateInterview();
@@ -2526,7 +2728,7 @@ const startMobilePractice = async () => {
       await fetch('/dev-api/api/train/practice/start', {
         method: 'POST',
         headers: apiHeaders(),
-        body: JSON.stringify({ extPartyId: phone.value || 'mobile-user', scenarioId: 'complaint-water', mode: 'mobile' })
+        body: JSON.stringify({ extPartyId: phone.value || 'mobile-user', scenarioId: selectedPracticeScenarioId.value, mode: 'mobile' })
       })
     );
     practiceSessionId.value = data.sessionId;
@@ -3125,8 +3327,9 @@ watch(
 applyRouteFromLocation();
 
 const role = computed(() => (apiHome.value?.role === roleKey.value ? apiHome.value : fallbackHomes[roleKey.value]));
-// 员工端 tab 由 P1 设计钉死(今日/练/问/我),不跟随后端 home 接口的旧文案;其余端沿用 role.tabs
+// 员工端 tab 由 P1 设计钉死(今日/练/问/我),主管端沿用驾驶舱导航;候选人端按文档使用线性漏斗,不显示 tab。
 const visibleTabs = computed<TabItem[]>(() => (roleKey.value === 'user' ? employeeTabs : role.value.tabs));
+const showTabbar = computed(() => roleKey.value !== 'candidate');
 const workerRole = computed(
   () =>
     role.value as RoleHome & {
@@ -3156,6 +3359,60 @@ const supervisorTeamTiles = computed<MetricItem[]>(() =>
     progress: Number.parseInt(item.value, 10) || 66
   }))
 );
+const candidateCurrentStep = computed(() => {
+  if (!interviewResult.value && interviewStatus.value === 'idle') {
+    return { title: '面试', desc: '完成结构化问答，生成面试评分', cta: '开始面试', target: 'tasks' as UserPanelKey };
+  }
+  if (!candidateMaterials.value.length) {
+    return { title: '补充资料', desc: '请完善资料，提交后 HR 会尽快审核', cta: '提交资料', target: 'submit' as UserPanelKey };
+  }
+  return { title: '等通知', desc: '资料已提交，等待 HR 审核结果同步', cta: '查看进度', target: 'profile' as UserPanelKey };
+});
+const candidateProgressItems = computed(() =>
+  [
+    { title: '面试', mark: interviewResult.value ? '✓' : '1', target: 'tasks' as UserPanelKey },
+    { title: '补资料', mark: candidateMaterials.value.length ? '✓' : '2', target: 'submit' as UserPanelKey },
+    { title: '岗前学习', mark: '3', target: 'sop' as UserPanelKey },
+    { title: '等通知', mark: '4', target: 'profile' as UserPanelKey }
+  ].map((item) => ({
+    ...item,
+    state: item.target === candidateCurrentStep.value.target ? 'active' : item.mark === '✓' ? 'done' : 'todo'
+  }))
+);
+const candidateMaterialChecklist = computed(() =>
+  ['身份证（正反面）', '学历证明', '健康证', '无犯罪记录证明'].map((title, index) => {
+    const material = candidateMaterials.value[index];
+    return {
+      title,
+      hint: material?.fileName || '支持 JPG / PNG / PDF',
+      icon: (index === 0 ? 'document' : index === 1 ? 'graduation' : 'upload') as IconName,
+      status: material?.status || '待上传',
+      state: material ? 'done' : 'pending'
+    };
+  })
+);
+const candidateApprovalItems = computed(() =>
+  candidateMaterialChecklist.value.map((item) => ({
+    ...item,
+    desc: item.hint,
+    target: item.state === 'done' ? ('profile' as UserPanelKey) : ('submit' as UserPanelKey),
+    status: item.state === 'done' ? item.status : '未提交'
+  }))
+);
+const supervisorPendingReviewCount = computed(() => practiceReviews.value.length || supervisorRole.value.todos[0]?.count || 0);
+const supervisorDashboardStats = computed(() => [
+  { title: '待复盘', value: `${supervisorPendingReviewCount.value}`, desc: '较昨日 +3', tone: 'is-alert', target: 'reviews' as SupervisorPanelKey },
+  { title: '今日完训率', value: `${supervisorRole.value.team.progress}%`, desc: '较昨日 +8%', tone: 'is-good', target: 'team' as SupervisorPanelKey },
+  { title: '团队短板', value: '收费异议处理', desc: '正确率 62%', tone: 'is-risk', target: 'weakness' as SupervisorPanelKey }
+]);
+const supervisorHeatmapItems: Array<{ title: string; value: string; desc: string; tone: string; target: SupervisorPanelKey }> = [
+  { title: '催费开场白', value: '78%', desc: '中', tone: 'heat-low', target: 'assign' },
+  { title: '收费异议处理', value: '62%', desc: '低', tone: 'heat-high', target: 'assign' },
+  { title: '投诉安抚共情', value: '67%', desc: '低', tone: 'heat-mid', target: 'reviews' },
+  { title: '费用减免说明', value: '71%', desc: '中', tone: 'heat-mid', target: 'sop' },
+  { title: '法规风险告知', value: '59%', desc: '低', tone: 'heat-high', target: 'sop' },
+  { title: '催费跟进话术', value: '81%', desc: '高', tone: 'heat-low', target: 'assign' }
+];
 const todayPracticeTarget = 1;
 const todayPrefix = () => {
   const date = new Date();
@@ -3658,6 +3915,16 @@ p {
   box-shadow: 0 23px 0 8px #d8edf8;
 }
 
+.avatar-img {
+  object-fit: cover;
+  display: block;
+}
+
+.avatar-img::before,
+.avatar-img::after {
+  content: none;
+}
+
 .top h2 {
   margin-top: 12px;
   font-size: 28px;
@@ -3758,6 +4025,300 @@ p {
   border: 1px solid rgba(15, 174, 166, 0.12);
 }
 
+.scenario-shell {
+  display: grid;
+  gap: 12px;
+}
+
+.scenario-shell > p {
+  margin: -6px 0 2px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.35;
+  font-weight: 650;
+}
+
+.scenario-tabs {
+  margin-right: -16px;
+  padding: 0 16px 2px 0;
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.scenario-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.scenario-tabs button {
+  flex: 0 0 auto;
+  min-height: 38px;
+  padding: 0 15px;
+  border: 1px solid rgba(213, 225, 233, 0.78);
+  border-radius: 14px;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 12px rgba(18, 31, 49, 0.04);
+  font-size: 14px;
+  font-weight: 850;
+  transition: var(--transition-spring-fast);
+}
+
+.scenario-tabs button.active {
+  color: #ffffff;
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--mentor-blue), #3b7cff);
+  box-shadow: 0 9px 20px rgba(46, 107, 230, 0.24);
+}
+
+.scenario-tabs button:active {
+  transform: scale(0.96);
+}
+
+.scenario-card {
+  position: relative;
+  min-height: 134px;
+  padding: 16px 16px 72px;
+  border: 1px solid rgba(213, 225, 233, 0.76);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 12px 28px rgba(18, 31, 49, 0.06);
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  gap: 10px 12px;
+  overflow: hidden;
+}
+
+.scenario-card::after {
+  content: '';
+  position: absolute;
+  right: -46px;
+  bottom: -54px;
+  width: 150px;
+  height: 150px;
+  border-radius: 999px;
+  background: rgba(46, 107, 230, 0.06);
+}
+
+.scenario-card img {
+  width: 58px;
+  height: 58px;
+  border-radius: 999px;
+  object-fit: cover;
+  background: #fde3d9;
+  box-shadow: 0 8px 18px rgba(18, 31, 49, 0.08);
+}
+
+.scenario-card > span {
+  min-width: 0;
+  padding-right: 52px;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+}
+
+.scenario-card > span b {
+  color: var(--text-primary);
+  font-size: 21px;
+  line-height: 1.1;
+  font-weight: 950;
+}
+
+.scenario-card > span small {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.35;
+  font-weight: 650;
+}
+
+.scenario-card > em {
+  position: absolute;
+  right: 16px;
+  top: 20px;
+  z-index: 1;
+  min-height: 28px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  color: #e5222a;
+  background: #ffe8ea;
+  font-size: 13px;
+  line-height: 1;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.scenario-card-progress {
+  position: absolute;
+  left: 16px;
+  right: 148px;
+  bottom: 24px;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: auto auto minmax(64px, 1fr);
+  align-items: center;
+  gap: 9px;
+}
+
+.scenario-card-progress small {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.scenario-card-progress b {
+  color: var(--mentor-blue);
+  font-size: 18px;
+  font-weight: 950;
+}
+
+.scenario-card-progress i {
+  height: 5px;
+  border-radius: 999px;
+  background: #dce6f7;
+  overflow: hidden;
+}
+
+.scenario-card-progress i span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mentor-blue);
+}
+
+.scenario-card > button {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 1;
+  width: 116px;
+  min-height: 48px;
+  border-radius: 14px;
+  color: #ffffff;
+  background: linear-gradient(135deg, var(--mentor-blue), #3b7cff);
+  box-shadow: 0 10px 20px rgba(46, 107, 230, 0.24);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.recent-practice {
+  border: 1px solid rgba(213, 225, 233, 0.76);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 24px rgba(18, 31, 49, 0.05);
+  overflow: hidden;
+}
+
+.recent-practice-head {
+  min-height: 50px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(213, 225, 233, 0.58);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.recent-practice-head b {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.recent-practice-head button {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.recent-practice > button {
+  width: 100%;
+  min-height: 70px;
+  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+}
+
+.recent-practice > button + button {
+  border-top: 1px solid rgba(213, 225, 233, 0.58);
+}
+
+.recent-practice > button > em {
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #35c393, #20ad84);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+  font-style: normal;
+  font-weight: 950;
+}
+
+.recent-practice > button > span {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+
+.recent-practice > button > span b {
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.recent-practice > button > span small {
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.recent-practice > button > i {
+  min-width: 96px;
+  display: grid;
+  justify-items: start;
+  gap: 3px;
+  font-style: normal;
+}
+
+.recent-practice > button > i small {
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.recent-practice > button > i b {
+  display: inline;
+  margin-right: 4px;
+  color: var(--text-primary);
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 950;
+}
+
+.recent-practice > button > i span {
+  color: #f6aa1c;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
 .task-card {
   min-height: 164px;
   padding: 20px 18px;
@@ -4148,6 +4709,452 @@ p {
   background: rgba(46, 107, 230, 0.1);
 }
 
+.role-redesign {
+  background: var(--mentor-page-bg);
+}
+
+.candidate-redesign {
+  padding-bottom: 104px;
+}
+
+.role-redesign .top {
+  margin-bottom: 12px;
+}
+
+.role-redesign .role-pill {
+  color: var(--mentor-blue);
+  border-color: rgba(46, 107, 230, 0.15);
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.candidate-progress-head {
+  margin-top: 0;
+  padding: 14px 12px;
+  border-radius: 18px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(18, 31, 49, 0.06);
+}
+
+.candidate-progress-head h2 {
+  margin: 0 0 14px;
+  text-align: center;
+  color: var(--text-primary);
+  font-size: 18px;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.candidate-step-rail {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  position: relative;
+}
+
+.candidate-step-rail::before {
+  content: '';
+  position: absolute;
+  left: 12.5%;
+  right: 12.5%;
+  top: 17px;
+  height: 3px;
+  border-radius: 999px;
+  background: #dde6f5;
+}
+
+.candidate-step-rail button {
+  min-height: 62px;
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 7px;
+  color: var(--text-secondary);
+  position: relative;
+  z-index: 1;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.candidate-step-rail em {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 3px solid #ffffff;
+  background: #d8dde8;
+  color: #ffffff;
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 900;
+  box-shadow: 0 4px 12px rgba(18, 31, 49, 0.08);
+}
+
+.candidate-step-rail .done em {
+  background: #1fbf72;
+}
+
+.candidate-step-rail .active {
+  color: #2e6be6;
+}
+
+.candidate-step-rail .active em {
+  background: #2e6be6;
+}
+
+.candidate-material-card,
+.candidate-approval-card {
+  margin-top: 12px;
+}
+
+.candidate-step-note {
+  margin: -4px 0 12px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+  font-weight: 700;
+}
+
+.candidate-doc-list {
+  display: grid;
+  gap: 8px;
+}
+
+.candidate-doc-list button {
+  min-height: 58px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid rgba(213, 225, 233, 0.58);
+}
+
+.candidate-doc-list.compact button {
+  min-height: 54px;
+}
+
+.candidate-doc-list .icon {
+  color: #8a96a8;
+}
+
+.candidate-doc-list em {
+  min-width: 56px;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 850;
+}
+
+.candidate-doc-list em.done {
+  color: #0a8f4f;
+  background: rgba(32, 191, 114, 0.11);
+}
+
+.candidate-doc-list em.pending {
+  color: #e2630a;
+  background: rgba(255, 122, 26, 0.12);
+}
+
+.candidate-submit-button {
+  width: 100%;
+  min-height: 54px;
+  margin-top: 14px;
+  border-radius: 15px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #2e6be6, #0f58d6);
+  box-shadow: 0 12px 26px rgba(46, 107, 230, 0.28);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.candidate-doc-list b,
+.candidate-actions b,
+.candidate-material-strip b,
+.cockpit-copy b,
+.activity-timeline b,
+.weakness-grid b {
+  display: block;
+  min-width: 0;
+  color: var(--text-primary);
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 900;
+}
+
+.candidate-doc-list small,
+.candidate-actions small,
+.candidate-material-strip small,
+.cockpit-copy span,
+.activity-timeline small,
+.weakness-grid span {
+  display: block;
+  min-width: 0;
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 700;
+}
+
+.candidate-actions {
+  display: grid;
+  gap: 10px;
+}
+
+.candidate-primary,
+.candidate-secondary,
+.candidate-link {
+  width: 100%;
+  min-height: 78px;
+  padding: 13px;
+  border-radius: 16px;
+  display: grid;
+  align-items: center;
+  text-align: left;
+  box-shadow: 0 8px 20px rgba(18, 31, 49, 0.07);
+}
+
+.candidate-primary,
+.candidate-secondary {
+  color: #ffffff;
+}
+
+.candidate-primary {
+  background: linear-gradient(135deg, #2e79ff, #1458dd);
+}
+
+.candidate-secondary {
+  background: linear-gradient(135deg, #20bf72, #0a9f59);
+}
+
+.candidate-primary span,
+.candidate-secondary span {
+  width: max-content;
+  max-width: 100%;
+  min-height: 24px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.candidate-primary b,
+.candidate-secondary b,
+.candidate-primary small,
+.candidate-secondary small {
+  color: #ffffff;
+}
+
+.candidate-link {
+  min-height: 66px;
+  border: 1px solid rgba(213, 225, 233, 0.72);
+  background: #ffffff;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 11px;
+}
+
+.candidate-progress-card .progress-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.candidate-material-strip {
+  margin-top: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.candidate-material-strip button {
+  min-height: 52px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f7faff;
+  display: grid;
+  text-align: left;
+}
+
+.supervisor-dashboard {
+  margin-top: 0;
+  padding: 14px;
+  border-radius: 18px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #0f63d8, #0747b9);
+  box-shadow: 0 16px 34px rgba(15, 88, 214, 0.22);
+}
+
+.supervisor-dashboard-head {
+  min-height: 30px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.supervisor-dashboard-head h2 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.supervisor-dashboard-head button {
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.supervisor-stat-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.supervisor-stat-row button {
+  min-height: 102px;
+  padding: 11px 8px;
+  border-radius: 11px;
+  background: #ffffff;
+  display: grid;
+  align-content: space-between;
+  text-align: left;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
+}
+
+.supervisor-stat-row small,
+.weakness-grid small {
+  color: #d35b00;
+  font-size: 11px;
+  line-height: 1.2;
+  font-weight: 850;
+}
+
+.supervisor-stat-row b {
+  color: var(--text-primary);
+  font-size: 27px;
+  line-height: 1.05;
+  font-weight: 900;
+  overflow-wrap: anywhere;
+}
+
+.supervisor-stat-row span {
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.25;
+  font-weight: 750;
+}
+
+.supervisor-stat-row .is-good small,
+.supervisor-stat-row .is-good b {
+  color: #0b9f58;
+}
+
+.supervisor-stat-row .is-risk small,
+.supervisor-stat-row .is-risk b {
+  color: #d7262f;
+}
+
+.activity-timeline {
+  display: grid;
+  gap: 9px;
+}
+
+.activity-timeline button {
+  min-height: 58px;
+  padding: 9px 10px;
+  border-radius: 15px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  text-align: left;
+  box-shadow: var(--shadow-sm);
+}
+
+.activity-timeline em {
+  width: 38px;
+  height: 38px;
+  border-radius: 14px;
+  color: #ffffff;
+  background: #2e6be6;
+  display: grid;
+  place-items: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.activity-timeline small {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.activity-timeline i {
+  min-width: 42px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  color: #0a8f4f;
+  background: rgba(32, 191, 114, 0.1);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 850;
+}
+
+.weakness-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.weakness-grid button {
+  min-height: 96px;
+  padding: 11px 9px;
+  border-radius: 15px;
+  display: grid;
+  align-content: space-between;
+  text-align: left;
+  box-shadow: var(--shadow-sm);
+}
+
+.weakness-grid .heat-high {
+  background: linear-gradient(135deg, rgba(255, 104, 91, 0.16), #ffffff);
+  border: 1px solid rgba(255, 104, 91, 0.18);
+}
+
+.weakness-grid .heat-mid {
+  background: linear-gradient(135deg, rgba(255, 138, 26, 0.16), #ffffff);
+  border: 1px solid rgba(255, 138, 26, 0.18);
+}
+
+.weakness-grid .heat-low {
+  background: linear-gradient(135deg, rgba(32, 191, 114, 0.14), #ffffff);
+  border: 1px solid rgba(32, 191, 114, 0.18);
+}
+
+.supervisor-suggestion {
+  width: 100%;
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+}
+
 .mentor-hero {
   margin-top: 0;
   padding: 12px;
@@ -4557,25 +5564,34 @@ p {
 }
 
 .map-grid button {
-  min-height: 104px;
+  min-height: 76px;
   border-radius: 16px;
-  padding: 16px 14px;
+  padding: 10px 12px;
   color: #ffffff;
   text-align: left;
   position: relative;
   overflow: hidden;
   box-shadow: 0 10px 22px rgba(18, 31, 49, 0.12);
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 4px 9px;
 }
 
-.map-grid button::before {
-  content: '';
-  position: absolute;
-  left: 14px;
-  top: 16px;
-  width: 38px;
-  height: 38px;
+.map-grid img {
+  position: relative;
+  z-index: 1;
+  grid-column: 1;
+  grid-row: 1;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.22);
+  object-fit: contain;
+  mix-blend-mode: screen;
+  filter: drop-shadow(0 5px 9px rgba(18, 31, 49, 0.12));
 }
 
 .map-grid span,
@@ -4587,26 +5603,27 @@ p {
 
 .map-grid span {
   display: block;
-  margin-top: 35px;
-  font-size: 30px;
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 28px;
   line-height: 1;
   font-weight: 900;
 }
 
 .map-grid small {
   display: block;
-  margin-top: 7px;
-  font-size: 13px;
-  line-height: 1.35;
+  grid-column: 1 / 3;
+  grid-row: 2;
+  font-size: 11px;
+  line-height: 1.2;
   font-weight: 750;
 }
 
 .map-grid b {
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 28px;
+  grid-column: 3;
+  grid-row: 1 / 3;
+  justify-self: end;
+  font-size: 24px;
   line-height: 1;
 }
 
@@ -4751,6 +5768,13 @@ p {
   gap: 12px;
 }
 
+.scene-practice {
+  margin-top: 0;
+  border-color: rgba(46, 107, 230, 0.16);
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(18, 31, 49, 0.06);
+}
+
 .practice-panel-head {
   display: flex;
   align-items: center;
@@ -4758,6 +5782,66 @@ p {
   gap: 10px;
 }
 
+.scene-head {
+  align-items: center;
+}
+
+.scene-head > span {
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: 3px;
+}
+
+.scene-head .detail-back,
+.scene-head > button {
+  min-width: 44px;
+  min-height: 34px;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.scene-head > button:last-child {
+  color: var(--mentor-blue);
+}
+
+.scene-progress {
+  height: 30px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.scene-progress::before,
+.scene-progress span {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 48px;
+  height: 5px;
+  border-radius: 999px;
+}
+
+.scene-progress::before {
+  background: #dbe7fb;
+}
+
+.scene-progress span {
+  right: auto;
+  background: var(--mentor-blue);
+}
+
+.scene-progress b {
+  width: 38px;
+  color: var(--mentor-blue);
+  text-align: right;
+  font-size: 13px;
+  font-weight: 900;
+}
+
 .practice-panel-head span,
 .practice-panel-head b {
   color: var(--text-primary);
@@ -4771,6 +5855,38 @@ p {
   font-weight: 800;
 }
 
+.scene-brief {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid rgba(46, 107, 230, 0.14);
+  border-radius: 14px;
+  background: #f5f9ff;
+}
+
+.scene-brief b {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.scene-brief p {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+  font-weight: 650;
+}
+
+.scene-brief button {
+  min-height: 44px;
+  border-radius: 12px;
+  color: #ffffff;
+  background: var(--mentor-blue);
+  box-shadow: 0 8px 18px rgba(46, 107, 230, 0.2);
+  font-size: 15px;
+  font-weight: 900;
+}
+
 .practice-dialogue {
   display: grid;
   gap: 10px;
@@ -4810,6 +5926,164 @@ p {
   letter-spacing: 0.05em;
 }
 
+.practice-message {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.practice-message img {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  object-fit: cover;
+  background: #e7f0ff;
+  box-shadow: 0 6px 14px rgba(18, 31, 49, 0.1);
+}
+
+.practice-message p {
+  margin: 0;
+  padding: 11px 13px;
+  border-radius: 14px;
+  border-bottom-left-radius: 4px;
+}
+
+.practice-message.customer p {
+  border-color: rgba(46, 107, 230, 0.18);
+  background: #f7fbff;
+}
+
+.practice-message.trainee {
+  grid-template-columns: minmax(0, 1fr) 42px;
+}
+
+.practice-message.trainee img {
+  grid-column: 2;
+  background: #dff8f5;
+}
+
+.practice-message.trainee p {
+  grid-column: 1;
+  grid-row: 1;
+  border-color: rgba(15, 174, 166, 0.18);
+  border-bottom-left-radius: 14px;
+  border-bottom-right-radius: 4px;
+  background: #effffd;
+}
+
+.practice-message.coach img {
+  background: #e8edf5;
+}
+
+.practice-message.coach p {
+  border-color: rgba(87, 154, 255, 0.15);
+  background: #f3f8ff;
+}
+
+.practice-wave {
+  margin-top: 10px;
+  min-height: 34px;
+  padding: 6px 8px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.78);
+  display: grid;
+  grid-template-columns: repeat(16, 1fr) auto;
+  align-items: center;
+  gap: 3px;
+}
+
+.practice-wave i {
+  width: 3px;
+  border-radius: 99px;
+  background: #5598ef;
+  opacity: 0.88;
+}
+
+.practice-message.trainee .practice-wave i {
+  background: #13b686;
+}
+
+.practice-message.coach .practice-wave i {
+  background: #7ca1d4;
+}
+
+.practice-wave b {
+  margin-left: 6px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 850;
+}
+
+.round-rating {
+  position: relative;
+  padding: 12px 58px 12px 13px;
+  border: 1px solid rgba(237, 170, 20, 0.22);
+  border-radius: 14px;
+  background: #fffaf0;
+  display: grid;
+  gap: 5px;
+}
+
+.round-rating b {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.round-rating span {
+  color: #ffb323;
+  font-size: 22px;
+  line-height: 1;
+  letter-spacing: 1px;
+}
+
+.round-rating small {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: 650;
+}
+
+.round-rating em {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-primary);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.dialogue-memory {
+  padding: 11px 13px;
+  border: 1px solid rgba(213, 225, 233, 0.7);
+  border-radius: 13px;
+  background: #ffffff;
+}
+
+.dialogue-memory b,
+.dialogue-memory small {
+  display: block;
+}
+
+.dialogue-memory b {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.dialogue-memory small {
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 650;
+}
+
 .practice-live {
   display: grid;
   gap: 12px;
@@ -4880,13 +6154,18 @@ p {
   box-shadow: 0 0 0 3px var(--primary-teal-glow);
 }
 
-.practice-actions,
 .practice-result-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 9px;
 }
 
+.practice-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 9px;
+}
+
 .practice-actions button,
 .practice-result-actions button {
   min-height: 42px;
@@ -4935,6 +6214,30 @@ p {
   font-weight: 600;
 }
 
+.scene-rating {
+  min-height: 42px;
+  padding: 8px 10px;
+  border: 1px solid rgba(237, 170, 20, 0.22);
+  border-radius: 12px;
+  background: #fffaf0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.scene-rating span {
+  color: #ffb323;
+  font-size: 20px;
+  letter-spacing: 1px;
+}
+
+.scene-rating b {
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 900;
+}
+
 .practice-panel > em {
   color: var(--primary-teal-active);
   font-size: 13px;
@@ -6534,14 +7837,14 @@ p {
 .tabbar {
   position: fixed;
   left: 50%;
-  bottom: 16px;
+  bottom: 8px;
   z-index: 99;
   width: calc(min(100vw, 426px) - 24px);
   transform: translateX(-50%);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 4px;
-  padding: 6px;
+  padding: 5px;
   border: 1px solid var(--glass-border);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.88);
@@ -6550,13 +7853,13 @@ p {
 }
 
 .tabbar button {
-  min-height: 44px;
+  min-height: 40px;
   color: var(--text-secondary);
   display: grid;
   justify-items: center;
   align-content: center;
   gap: 2px;
-  border-radius: 14px;
+  border-radius: 12px;
   transition: var(--transition-spring-fast);
 }
 
@@ -6662,8 +7965,8 @@ p {
   }
 
   .map-grid button {
-    min-height: 96px;
-    padding: 14px 12px;
+    min-height: 74px;
+    padding: 10px 11px;
   }
 
   .map-grid small {