From 0f5aa340a7411976dd755ac8dcdc0915c1277ad1 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Sat, 4 Jul 2026 14:23:08 +0800
Subject: [PATCH] feat(mobile): kill dead buttons and add real SOP search panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈「按钮点不动、没互动」修复:所有未实现入口点击弹「本期演示
未开放,正在建设中」toast(2s 自动消失),不再无反应;新增全屏「查
SOP」面板——文本/语音提问(独立录音状态+无麦克风文件兜底)、调
/api/knowledge/search(category=sop 全库检索),展示回答+依据+引用
片段,15s 超时、失败不兜假数据;员工端「查SOP」工具格、岗前SOP复习
卡、主管端「查SOP」快捷格三处入口接入。每日一练保持直通开始训练。
---
 mobile/src/App.vue | 2166 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 1709 insertions(+), 457 deletions(-)

diff --git a/mobile/src/App.vue b/mobile/src/App.vue
index d9c9f090..29ef706e 100644
--- a/mobile/src/App.vue
+++ b/mobile/src/App.vue
@@ -52,6 +52,19 @@
         </p>
       </header>
 
+      <Card :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'">
         <Card title="团队今日概况">
           <div class="team-card">
@@ -66,7 +79,7 @@
                 <b>{{ supervisorRole.team.progress }}%</b>
                 <small>{{ supervisorRole.team.completionLabel }}</small>
               </div>
-              <button type="button" @click="tap(supervisorRole.team.detailCta)">{{ supervisorRole.team.detailCta }}</button>
+              <button type="button" @click="openSupervisorAction('team')">{{ supervisorRole.team.detailCta }}</button>
             </div>
             <div class="mini-stats">
               <MiniStat
@@ -83,7 +96,7 @@
 
         <Card title="待处理">
           <div class="todo-list">
-            <button v-for="item in supervisorRole.todos" :key="item.title" type="button" @click="tap(item.title)">
+            <button v-for="item in supervisorRole.todos" :key="item.title" type="button" @click="openSupervisorTodo(item)">
               <IconBubble :icon="item.icon" :tone="item.tone" />
               <span>
                 <b>{{ item.title }}</b>
@@ -145,10 +158,10 @@
         </Card>
 
         <Card :title="supervisorRole.toolTitle">
-          <ToolGrid :items="supervisorRole.tools" />
+          <ToolGrid :items="supervisorRole.tools" :handler="openSupervisorTool" />
         </Card>
 
-        <button class="suggestion" type="button" @click="tap(supervisorRole.suggestion.title)">
+        <button class="suggestion" type="button" @click="openSupervisorAction('assign')">
           <IconBubble :icon="supervisorRole.suggestion.icon" :tone="supervisorRole.suggestion.tone" />
           <span>
             <b>{{ supervisorRole.suggestion.title }}</b>
@@ -156,6 +169,112 @@
           </span>
           <Icon name="chevron-right" size="26" />
         </button>
+
+        <Card v-if="activeSupervisorPanel" :title="supervisorPanelTitle">
+          <div class="user-panel">
+            <template v-if="activeSupervisorPanel === 'team' || activeSupervisorPanel === 'weakness'">
+              <div class="progress-grid">
+                <ProgressTile
+                  v-for="item in supervisorTeamTiles"
+                  :key="item.title"
+                  :item="item"
+                />
+              </div>
+              <div class="result-list">
+                <h3>{{ activeSupervisorPanel === 'weakness' ? '团队短板' : '团队动作' }}</h3>
+                <p v-for="item in supervisorRole.todos" :key="item.title">
+                  <b>{{ item.title }}</b>
+                  <small>{{ item.desc }} · {{ item.count }}项</small>
+                </p>
+              </div>
+            </template>
+
+            <template v-else-if="activeSupervisorPanel === 'reviews' || activeSupervisorPanel === 'assign'">
+              <div v-if="practiceReviews.length" class="record-list">
+                <h3>{{ activeSupervisorPanel === 'assign' ? '建议指派对象' : '待复盘对练' }}</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 }} · {{ item.summary }}</small>
+                  </span>
+                  <em>{{ item.status }}</em>
+                </button>
+              </div>
+              <em v-else class="panel-message">暂无待复盘记录</em>
+              <div class="result-list">
+                <h3>专项建议</h3>
+                <p>
+                  <b>催费沟通专项</b>
+                  <small>优先给低分或待复盘员工指派，复盘后再更新训练安排。</small>
+                </p>
+              </div>
+            </template>
+
+            <template v-else-if="activeSupervisorPanel === 'sop'">
+              <form class="knowledge-search" @submit.prevent="searchKnowledge(knowledgeQuery, 'sop')">
+                <input v-model.trim="knowledgeQuery" placeholder="搜索SOP关键词" />
+                <button type="submit" :disabled="knowledgeLoading">{{ knowledgeLoading ? '查询中' : '查询' }}</button>
+              </form>
+              <em v-if="knowledgeMessage" class="panel-message">{{ knowledgeMessage }}</em>
+              <div v-if="knowledgeResult" class="knowledge-result">
+                <strong>{{ knowledgeResult.answer }}</strong>
+                <p v-if="knowledgeResult.reference">{{ knowledgeResult.reference }}</p>
+                <div v-if="knowledgeResult.snippets?.length" class="snippet-list">
+                  <h3>引用片段</h3>
+                  <blockquote v-for="item in knowledgeResult.snippets" :key="`${item.title}-${item.text}`">
+                    <b>{{ item.title }}</b>
+                    <span>{{ item.text }}</span>
+                  </blockquote>
+                </div>
+              </div>
+            </template>
+
+            <template v-else-if="activeSupervisorPanel === 'case'">
+              <label class="file-picker">
+                <span>{{ materialFile?.name || '选择语音素材' }}</span>
+                <small>支持 mp3 / wav / m4a / webm / ogg，上传后自动转写并整理案例</small>
+                <input type="file" accept="audio/*,.mp3,.wav,.m4a,.webm,.ogg" @change="handleMaterialFile" />
+              </label>
+              <button class="panel-primary" type="button" :disabled="materialUploading" @click="submitMaterial">
+                {{ materialUploading ? '提交中' : '上传并整理' }}
+              </button>
+              <em v-if="materialMessage" class="panel-message">{{ materialMessage }}</em>
+              <div v-if="materialResult" class="case-result">
+                <div>
+                  <h3>ASR转写</h3>
+                  <p>{{ materialResult.upload.transcript }}</p>
+                </div>
+                <div>
+                  <h3>案例整理</h3>
+                  <dl>
+                    <template v-for="item in materialResult.organize.summary" :key="item.label">
+                      <dt>{{ item.label }}</dt>
+                      <dd>{{ item.text }}</dd>
+                    </template>
+                  </dl>
+                </div>
+              </div>
+            </template>
+
+            <template v-else-if="activeSupervisorPanel === 'profile'">
+              <div class="result-list">
+                <h3>主管工作台</h3>
+                <p>
+                  <b>{{ supervisorRole.team.title }}</b>
+                  <small>{{ supervisorRole.team.progressText }} · 平均能力 {{ supervisorRole.team.stats[1]?.value || '-' }}</small>
+                </p>
+                <p>
+                  <b>待办概况</b>
+                  <small>{{ supervisorRole.todos.map((item) => `${item.title}${item.count}项`).join('，') }}</small>
+                </p>
+              </div>
+            </template>
+
+            <div class="panel-actions">
+              <button type="button" @click="activeSupervisorPanel = ''">收起</button>
+            </div>
+          </div>
+        </Card>
       </template>
 
       <template v-else>
@@ -209,8 +328,9 @@
               <textarea v-model.trim="practiceDraft" rows="3" placeholder="输入你的回复" />
               <div class="practice-actions">
                 <button type="button" :disabled="asrBusy" @click="toggleRecording">
-                  {{ recording ? '停止录音' : asrBusy ? '识别中' : '语音输入' }}
+                  {{ 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" :disabled="practiceStatus === 'starting' || practiceStatus === 'submitting'" @click="submitMobilePractice">
@@ -226,11 +346,11 @@
           <ToolGrid :items="workerRole.tools" :handler="openUserTool" />
         </Card>
 
-        <Card v-if="roleKey === 'user' && activeUserPanel" :title="userPanelTitle">
+        <Card v-if="roleKey !== 'supervisor' && activeUserPanel" :title="userPanelTitle">
           <div class="user-panel">
             <template v-if="activeUserPanel === 'tasks'">
-              <button class="panel-row" type="button" @click="startMobilePractice">
-                <IconBubble icon="headset" tone="teal" />
+              <button class="panel-row" type="button" @click="handlePrimaryAction">
+                <IconBubble :icon="workerRole.primary.icon" tone="teal" />
                 <span>
                   <b>{{ workerRole.primary.title }}</b>
                   <small>{{ workerRole.primary.desc }}</small>
@@ -253,6 +373,49 @@
                 </span>
                 <Icon name="chevron-right" size="24" />
               </button>
+
+              <div v-if="roleKey === 'candidate' && interviewStatus !== 'idle'" class="practice-panel">
+                <div class="practice-panel-head">
+                  <span>AI结构化面试</span>
+                  <b v-if="interviewResult">{{ interviewResult.totalScore }}分</b>
+                  <small v-else>{{ interviewStatus === 'starting' ? '生成题目中' : '作答中' }}</small>
+                </div>
+
+                <div v-if="interviewResult" class="review-detail">
+                  <div class="review-detail-head">
+                    <span>
+                      <b>{{ interviewResult.result }}</b>
+                      <small>{{ interviewResult.aiSummary }}</small>
+                    </span>
+                    <em>{{ interviewResult.source }}</em>
+                  </div>
+                  <div class="review-score-grid">
+                    <p v-for="item in interviewResult.dimensions" :key="item.label">
+                      <span>{{ item.label }}</span>
+                      <b>{{ item.value }}</b>
+                      <small>{{ item.note }}</small>
+                    </p>
+                  </div>
+                  <div class="review-summary">
+                    <b>建议</b>
+                    <p>{{ interviewResult.suggestion }}</p>
+                    <b>依据</b>
+                    <p>{{ interviewResult.evidence }}</p>
+                  </div>
+                </div>
+
+                <div v-else class="interview-questions">
+                  <label v-for="item in interviewQuestions" :key="item.questionId" class="interview-question">
+                    <span>{{ item.seq }}. {{ item.questionText }}</span>
+                    <small>{{ item.point }}</small>
+                    <textarea v-model.trim="interviewAnswers[item.questionId]" rows="3" placeholder="输入你的回答" />
+                  </label>
+                  <button class="panel-primary" type="button" :disabled="interviewStatus === 'starting' || interviewStatus === 'submitting'" @click="finishCandidateInterview">
+                    {{ interviewStatus === 'submitting' ? '提交中' : '提交面试' }}
+                  </button>
+                </div>
+                <em v-if="interviewMessage">{{ interviewMessage }}</em>
+              </div>
             </template>
 
             <template v-else-if="activeUserPanel === 'sop' || activeUserPanel === 'cases'">
@@ -298,15 +461,23 @@
 
             <template v-else-if="activeUserPanel === 'submit'">
               <label class="file-picker">
-                <span>{{ materialFile?.name || '选择语音素材' }}</span>
-                <small>支持 mp3 / wav / m4a / webm / ogg，上传后自动转写并整理案例</small>
-                <input type="file" accept="audio/*,.mp3,.wav,.m4a,.webm,.ogg" @change="handleMaterialFile" />
+                <span>{{ materialFile?.name || (roleKey === 'candidate' ? '选择补充资料' : '选择语音素材') }}</span>
+                <small>{{ roleKey === 'candidate' ? '支持 PDF / Word / 图片，当前用于候选资料预览' : '支持 mp3 / wav / m4a / webm / ogg，上传后自动转写并整理案例' }}</small>
+                <input :accept="roleKey === 'candidate' ? '.pdf,.doc,.docx,image/*' : 'audio/*,.mp3,.wav,.m4a,.webm,.ogg'" type="file" @change="handleMaterialFile" />
               </label>
               <button class="panel-primary" type="button" :disabled="materialUploading" @click="submitMaterial">
-                {{ materialUploading ? '提交中' : '上传并整理' }}
+                {{ materialUploading ? '提交中' : roleKey === 'candidate' ? '确认补充' : '上传并整理' }}
               </button>
               <em v-if="materialMessage" class="panel-message">{{ materialMessage }}</em>
 
+              <div v-if="roleKey === 'candidate' && candidateMaterials.length" class="result-list">
+                <h3>已提交资料</h3>
+                <p v-for="item in candidateMaterials" :key="item.id">
+                  <b>{{ item.fileName }}</b>
+                  <small>#{{ item.id }} · OSS {{ item.ossId }} · {{ item.materialType }} · {{ item.status }} · {{ item.time }}</small>
+                </p>
+              </div>
+
               <div v-if="materialResult" class="case-result">
                 <div v-if="materialResult.upload">
                   <h3>ASR转写</h3>
@@ -336,7 +507,21 @@
             </template>
 
             <template v-else-if="activeUserPanel === 'profile'">
-              <div v-if="competencyProfile" class="profile-card panel-profile">
+              <div v-if="roleKey === 'candidate'" class="profile-card panel-profile">
+                <span v-for="item in workerRole.metrics" :key="item.title">
+                  <small>{{ item.title }}</small>
+                  <b>{{ item.value }}</b>
+                  <small>{{ item.desc }}</small>
+                </span>
+              </div>
+              <div v-if="roleKey === 'candidate' && candidateMaterials.length" class="result-list">
+                <h3>资料记录</h3>
+                <p v-for="item in candidateMaterials" :key="item.id">
+                  <b>{{ item.fileName }}</b>
+                  <small>#{{ item.id }} · OSS {{ item.ossId }} · {{ item.status }} · {{ item.time }}</small>
+                </p>
+              </div>
+              <div v-else-if="competencyProfile" class="profile-card panel-profile">
                 <span>
                   <small>综合能力</small>
                   <b>{{ competencyProfile.score }}</b>
@@ -458,12 +643,47 @@
       </template>
 
       <nav class="tabbar" aria-label="底部导航">
-        <button v-for="tab in role.tabs" :key="tab.label" type="button" :class="{ active: tab.active }" @click="openTab(tab.label)">
+        <button v-for="tab in role.tabs" :key="tab.label" type="button" :class="{ active: activeTabLabel === tab.label }" @click="openTab(tab.label)">
           <Icon :name="tab.icon" size="28" />
           <span>{{ tab.label }}</span>
         </button>
       </nav>
     </section>
+
+    <section v-if="sopPanelOpen" class="sop-overlay" aria-label="查 SOP">
+      <div class="sop-panel">
+        <header class="sop-head">
+          <button class="sop-back" type="button" @click="closeSopPanel">返回</button>
+          <h2>查 SOP</h2>
+        </header>
+
+        <form class="sop-form" @submit.prevent="searchSopKnowledge">
+          <input v-model.trim="sopQuery" placeholder="输入或语音提问,如:投诉首次反馈时限是多久" />
+          <div class="sop-actions">
+            <button class="sop-voice" type="button" :disabled="sopAsrBusy || sopLoading" @click="toggleSopRecording">
+              {{ sopRecording ? '停止录音' : sopAsrBusy ? '识别中' : sopUseAudioFileFallback ? '选择语音' : '语音提问' }}
+            </button>
+            <input ref="sopAudioInput" class="practice-audio-input" type="file" accept="audio/*,.mp3,.wav,.m4a,.webm,.ogg" capture @change="handleSopAudioFile" />
+            <button class="sop-submit" type="submit" :disabled="sopLoading">{{ sopLoading ? '查询中' : '搜索' }}</button>
+          </div>
+        </form>
+
+        <em v-if="sopMessage" class="panel-message">{{ sopMessage }}</em>
+        <div v-if="sopResult" class="knowledge-result sop-result">
+          <strong>{{ sopResult.answer }}</strong>
+          <p v-if="sopResult.reference">{{ sopResult.reference }}</p>
+          <div v-if="sopResult.snippets?.length" class="snippet-list">
+            <h3>引用片段</h3>
+            <blockquote v-for="item in sopResult.snippets" :key="`${item.title}-${item.text}`">
+              <b>{{ item.title }}</b>
+              <span>{{ item.text }}</span>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div v-if="toastMessage" class="build-toast" role="status" aria-live="polite">{{ toastMessage }}</div>
   </main>
 </template>
 
@@ -474,6 +694,8 @@ import { computed, defineComponent, h, ref, watch } from 'vue';
 type RoleKey = 'user' | 'candidate' | 'supervisor';
 type Tone = 'teal' | 'blue' | 'orange' | 'purple' | 'amber';
 type UserPanelKey = '' | 'tasks' | 'sop' | 'cases' | 'submit' | 'profile' | 'history' | 'recommend';
+type SupervisorPanelKey = '' | 'team' | 'reviews' | 'assign' | 'weakness' | 'case' | 'sop' | 'profile';
+type FlowTarget = UserPanelKey | SupervisorPanelKey;
 type IconName =
   | 'bars'
   | 'book'
@@ -536,6 +758,13 @@ interface TabItem {
   active: boolean;
 }
 
+interface FlowStep {
+  phase: string;
+  title: string;
+  desc: string;
+  target: FlowTarget;
+}
+
 interface TeamStat {
   icon: IconName;
   title: string;
@@ -582,6 +811,7 @@ interface RoleHome {
 }
 
 type PracticeStatus = 'idle' | 'starting' | 'active' | 'submitting' | 'finished';
+type InterviewStatus = PracticeStatus;
 type PracticeRole = 'customer' | 'trainee' | 'coach';
 
 interface PracticeTurn {
@@ -632,6 +862,44 @@ interface PracticeReviewDetail extends PracticeRecord {
   dialogue: PracticeDialogue[];
 }
 
+interface InterviewQuestion {
+  questionId: string;
+  seq: number;
+  questionText: string;
+  point: string;
+  scenario: string;
+  sampleAnswer: string;
+}
+
+interface InterviewStartResponse {
+  sessionId: string;
+  candidateId: string;
+  candidateName: string;
+  positionCode: string;
+  questions: InterviewQuestion[];
+  source: string;
+}
+
+interface InterviewRecord {
+  time: string;
+  candidate: string;
+  position: string;
+  score: number;
+  result: string;
+  summary: string;
+}
+
+interface InterviewFinishResponse {
+  totalScore: number;
+  suggestion: string;
+  result: string;
+  aiSummary: string;
+  evidence: string;
+  dimensions: CompetencyDimension[];
+  records: InterviewRecord[];
+  source: string;
+}
+
 interface CompetencyDimension {
   label: string;
   value: number | string;
@@ -724,6 +992,16 @@ interface MaterialResult {
   curate: CaseCurateResponse;
 }
 
+interface CandidateMaterialResponse {
+  id: number | string;
+  ossId: number | string;
+  fileName: string;
+  materialType: string;
+  fileSize: number;
+  status: string;
+  time: string;
+}
+
 const aliases: Record<string, RoleKey> = {
   h5: 'user',
   user: 'user',
@@ -752,7 +1030,9 @@ const phoneKey = 'aihr_mobile_phone';
 const phonePattern = /^1[3-9]\d{9}$/;
 
 const roleKey = ref<RoleKey>(readRole());
+const activeTabLabel = ref('首页');
 const tapped = ref('');
+const toastMessage = ref('');
 const phone = ref(localStorage.getItem(phoneKey) || '');
 const smsCode = ref('');
 const authToken = ref(localStorage.getItem(tokenKey) || '');
@@ -767,6 +1047,12 @@ const practiceDraft = ref('');
 const practiceTurns = ref<PracticeTurn[]>([]);
 const practiceResult = ref<PracticeFinishResponse | null>(null);
 const practiceMessage = ref('');
+const interviewStatus = ref<InterviewStatus>('idle');
+const interviewSessionId = ref('');
+const interviewQuestions = ref<InterviewQuestion[]>([]);
+const interviewAnswers = ref<Record<string, string>>({});
+const interviewResult = ref<InterviewFinishResponse | null>(null);
+const interviewMessage = ref('');
 const practiceHistory = ref<PracticeRecord[]>([]);
 const practiceReviews = ref<PracticeRecord[]>([]);
 const selectedReview = ref<PracticeReviewDetail | null>(null);
@@ -776,44 +1062,115 @@ const reviewMessage = ref('');
 const markingReviewed = ref(false);
 const competencyProfile = ref<CompetencyProfile | null>(null);
 const activeUserPanel = ref<UserPanelKey>('');
+const activeSupervisorPanel = ref<SupervisorPanelKey>('');
 const knowledgeQuery = ref('住宅投诉处理流程');
 const knowledgeResult = ref<KnowledgeSearchResponse | null>(null);
 const knowledgeLoading = ref(false);
 const knowledgeMessage = ref('');
+const sopPanelOpen = ref(false);
+const sopQuery = ref('');
+const sopResult = ref<KnowledgeSearchResponse | null>(null);
+const sopLoading = ref(false);
+const sopMessage = ref('');
+const sopRecording = ref(false);
+const sopAsrBusy = ref(false);
+const sopUseAudioFileFallback = ref(false);
+const sopAudioInput = ref<HTMLInputElement>();
 const materialFile = ref<File | null>(null);
 const materialUploading = ref(false);
 const materialMessage = ref('');
 const materialResult = ref<MaterialResult | null>(null);
+const candidateMaterials = ref<CandidateMaterialResponse[]>([]);
 const voiceEnabled = ref(true);
 const recording = ref(false);
 const asrBusy = ref(false);
+const useAudioFileFallback = ref(false);
+const practiceAudioInput = ref<HTMLInputElement>();
+let toastTimer: number | undefined;
 let mediaRecorder: MediaRecorder | null = null;
 let recordedChunks: Blob[] = [];
+let sopMediaRecorder: MediaRecorder | null = null;
+let sopRecordedChunks: Blob[] = [];
 let customerAudio: HTMLAudioElement | null = null;
 
 const syncPath = () => window.history.pushState({}, '', rolePaths[roleKey.value]);
 const tap = (name: string) => {
   tapped.value = name;
+  toastMessage.value = `「${name}」本期演示未开放,正在建设中`;
+  if (toastTimer) window.clearTimeout(toastTimer);
+  toastTimer = window.setTimeout(() => {
+    toastMessage.value = '';
+  }, 2000);
 };
 const cycleRole = () => {
   const order: RoleKey[] = ['user', 'candidate', 'supervisor'];
   roleKey.value = order[(order.indexOf(roleKey.value) + 1) % order.length];
+  activeTabLabel.value = '首页';
   syncPath();
 };
 
 const userPanelTitle = computed(() => {
-  const titles: Record<Exclude<UserPanelKey, ''>, string> = {
-    tasks: '今日任务',
-    sop: 'SOP查询',
-    cases: '案例学习',
-    submit: '提交素材',
-    profile: '我的能力',
-    history: '训练复盘',
-    recommend: '专项推荐'
-  };
+  const titles: Record<Exclude<UserPanelKey, ''>, string> =
+    roleKey.value === 'candidate'
+      ? {
+          tasks: '面试任务',
+          sop: '岗位SOP',
+          cases: '案例预习',
+          submit: '补充资料',
+          profile: '候选进度',
+          history: '面试记录',
+          recommend: '推荐预习'
+        }
+      : {
+          tasks: '今日任务',
+          sop: 'SOP查询',
+          cases: '案例学习',
+          submit: '提交素材',
+          profile: '我的能力',
+          history: '训练复盘',
+          recommend: '专项推荐'
+        };
   return activeUserPanel.value ? titles[activeUserPanel.value] : '员工工具';
 });
 
+const supervisorPanelTitle = computed(() => {
+  const titles: Record<Exclude<SupervisorPanelKey, ''>, string> = {
+    team: '团队详情',
+    reviews: '复盘处理',
+    assign: '指派训练',
+    weakness: '团队短板',
+    case: '案例提交',
+    sop: 'SOP查询',
+    profile: '我的主管台'
+  };
+  return activeSupervisorPanel.value ? titles[activeSupervisorPanel.value] : '主管工具';
+});
+
+const roleFlowSteps = computed<FlowStep[]>(() => {
+  if (roleKey.value === 'supervisor') {
+    return [
+      { phase: '看', title: '团队进度', desc: '先看完训率、低分项和待跟进员工', target: 'team' },
+      { phase: '评', title: '处理复盘', desc: '点开对练记录，查看评分和导师改写', target: 'reviews' },
+      { phase: '派', title: '指派专项', desc: '把短板员工放进下一轮训练任务', target: 'assign' },
+      { phase: '沉', title: '提交案例', desc: '把本周典型服务场景沉淀成案例', target: 'case' }
+    ];
+  }
+  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' }
+    ];
+  }
+  return [
+    { phase: '学', title: '先学今日SOP', desc: '上岗前复习投诉处理流程', target: 'sop' },
+    { phase: '练', title: '完成三角色对练', desc: '语音或文字回应，提交后自动评分', target: 'tasks' },
+    { phase: '用', title: '工作中查答案', desc: '遇到投诉、催费、安抚先查SOP和案例', target: 'cases' },
+    { phase: '改', title: '看复盘改话术', desc: '查看历史评分和主管复盘建议', target: 'history' }
+  ];
+});
+
 interface ApiPayload<T> {
   code?: number;
   msg?: string;
@@ -826,10 +1183,25 @@ interface LoginResult {
   client_id: string;
 }
 
+const clearAuth = (message: string) => {
+  authToken.value = '';
+  clientId.value = '';
+  localStorage.removeItem(tokenKey);
+  localStorage.removeItem(clientIdKey);
+  activeUserPanel.value = '';
+  activeSupervisorPanel.value = '';
+  candidateMaterials.value = [];
+  authMessage.value = message;
+};
+
 const readApi = async <T,>(response: Response): Promise<T> => {
   const payload = (await response.json()) as ApiPayload<T>;
   if (!response.ok || (payload.code !== undefined && payload.code !== 200)) {
-    throw new Error(payload.msg || `HTTP ${response.status}`);
+    const message = payload.msg || `HTTP ${response.status}`;
+    if (response.status === 401 || response.status === 403 || payload.code === 401 || payload.code === 403) {
+      clearAuth('登录已过期，请重新登录');
+    }
+    throw new Error(message);
   }
   return payload.data as T;
 };
@@ -873,6 +1245,11 @@ const toggleRecording = async () => {
     mediaRecorder?.stop();
     return;
   }
+  if (useAudioFileFallback.value || !navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
+    useAudioFileFallback.value = true;
+    practiceAudioInput.value?.click();
+    return;
+  }
   try {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
     recordedChunks = [];
@@ -889,15 +1266,24 @@ const toggleRecording = async () => {
     recording.value = true;
     practiceMessage.value = '';
   } catch {
-    practiceMessage.value = '无法访问麦克风，请改用文字输入';
+    useAudioFileFallback.value = true;
+    practiceAudioInput.value?.click();
+    practiceMessage.value = '无法访问麦克风，请选择语音文件';
   }
 };
 
-const transcribeRecording = async (blob: Blob) => {
+const handlePracticeAudioFile = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) void transcribeRecording(file, file.name || 'practice-audio');
+};
+
+const transcribeRecording = async (blob: Blob, filename = 'practice.webm') => {
   asrBusy.value = true;
   try {
     const form = new FormData();
-    form.append('file', blob, 'practice.webm');
+    form.append('file', blob, filename);
     const data = await readApi<{ text: string }>(
       await fetch('/dev-api/api/ai/asr', { method: 'POST', headers: authOnlyHeaders(), body: form })
     );
@@ -909,7 +1295,86 @@ const transcribeRecording = async (blob: Blob) => {
   }
 };
 
+const openSopPanel = () => {
+  activeTabLabel.value = roleKey.value === 'supervisor' ? '案例' : '知识';
+  activeUserPanel.value = '';
+  activeSupervisorPanel.value = '';
+  sopPanelOpen.value = true;
+  sopQuery.value = '';
+  sopResult.value = null;
+  sopMessage.value = '';
+};
+
+const closeSopPanel = () => {
+  if (sopRecording.value) {
+    sopMediaRecorder?.stop();
+  }
+  sopPanelOpen.value = false;
+};
+
+const toggleSopRecording = async () => {
+  if (sopRecording.value) {
+    sopMediaRecorder?.stop();
+    return;
+  }
+  if (sopUseAudioFileFallback.value || !navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
+    sopUseAudioFileFallback.value = true;
+    sopAudioInput.value?.click();
+    return;
+  }
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    sopRecordedChunks = [];
+    sopMediaRecorder = new MediaRecorder(stream);
+    sopMediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) sopRecordedChunks.push(event.data);
+    };
+    sopMediaRecorder.onstop = () => {
+      stream.getTracks().forEach((track) => track.stop());
+      sopRecording.value = false;
+      void transcribeSopRecording(new Blob(sopRecordedChunks, { type: sopMediaRecorder?.mimeType || 'audio/webm' }));
+    };
+    sopMediaRecorder.start();
+    sopRecording.value = true;
+    sopMessage.value = '';
+  } catch {
+    sopUseAudioFileFallback.value = true;
+    sopAudioInput.value?.click();
+  }
+};
+
+const handleSopAudioFile = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) void transcribeSopRecording(file, file.name || 'sop-audio');
+};
+
+const transcribeSopRecording = async (blob: Blob, filename = 'sop.webm') => {
+  sopAsrBusy.value = true;
+  sopMessage.value = '';
+  try {
+    const form = new FormData();
+    form.append('file', blob, filename);
+    const data = await readApi<{ text: string }>(
+      await fetch('/dev-api/api/ai/asr', { method: 'POST', headers: authOnlyHeaders(), body: form })
+    );
+    sopQuery.value = data.text?.trim() || '';
+    if (!sopQuery.value) {
+      sopMessage.value = '语音识别失败,请改用文字输入';
+    }
+  } catch {
+    sopMessage.value = '语音识别失败,请改用文字输入';
+  } finally {
+    sopAsrBusy.value = false;
+  }
+};
+
 const handlePrimaryAction = () => {
+  if (roleKey.value === 'candidate') {
+    void startCandidateInterview();
+    return;
+  }
   if (roleKey.value !== 'user') {
     tap(workerRole.value.primary.cta);
     return;
@@ -917,6 +1382,38 @@ const handlePrimaryAction = () => {
   void startMobilePractice();
 };
 
+const searchSopKnowledge = async () => {
+  const cleaned = sopQuery.value.trim();
+  if (!cleaned) {
+    sopMessage.value = '请先输入问题';
+    return;
+  }
+  sopQuery.value = cleaned;
+  sopLoading.value = true;
+  sopMessage.value = '';
+  sopResult.value = null;
+  const controller = new AbortController();
+  const timeout = window.setTimeout(() => controller.abort(), 15000);
+  try {
+    sopResult.value = await readApi<KnowledgeSearchResponse>(
+      await fetch('/dev-api/api/knowledge/search', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ queryText: cleaned, category: 'sop', limit: 5 }),
+        signal: controller.signal
+      })
+    );
+    if (!sopResult.value?.answer && !sopResult.value?.snippets?.length) {
+      sopMessage.value = '未检索到可引用内容';
+    }
+  } catch {
+    sopMessage.value = '网络不佳或服务不可用,请稍后重试';
+  } finally {
+    window.clearTimeout(timeout);
+    sopLoading.value = false;
+  }
+};
+
 const searchKnowledge = async (query = knowledgeQuery.value, category = activeUserPanel.value === 'cases' ? 'case' : 'sop') => {
   const cleaned = query.trim();
   if (!cleaned) {
@@ -943,18 +1440,32 @@ const searchKnowledge = async (query = knowledgeQuery.value, category = activeUs
   }
 };
 
-const openUserAction = (panel: UserPanelKey) => {
-  if (roleKey.value !== 'user') {
-    tap(panel || roleKey.value);
+const openFlowStep = (item: FlowStep) => {
+  if (roleKey.value === 'supervisor') {
+    openSupervisorAction(item.target as SupervisorPanelKey);
     return;
   }
+  if (roleKey.value === 'candidate') {
+    openCandidateAction(item.target as UserPanelKey);
+    return;
+  }
+  openUserAction(item.target as UserPanelKey);
+};
 
+const isFlowActive = (item: FlowStep) =>
+  roleKey.value === 'supervisor'
+    ? activeSupervisorPanel.value === item.target
+    : activeUserPanel.value === item.target;
+
+const openCandidateAction = (panel: UserPanelKey) => {
+  activeTabLabel.value =
+    ({ tasks: '面试', sop: '知识', cases: '知识', submit: '我的', profile: '我的', history: '我的', recommend: '知识' } as Partial<Record<UserPanelKey, string>>)[panel] || '首页';
   activeUserPanel.value = panel;
   userReviewDetail.value = null;
   userReviewMessage.value = '';
 
   if (panel === 'sop') {
-    knowledgeQuery.value = '住宅投诉处理流程';
+    knowledgeQuery.value = '客服接待基础流程';
     void searchKnowledge(knowledgeQuery.value, 'sop');
     return;
   }
@@ -965,6 +1476,45 @@ const openUserAction = (panel: UserPanelKey) => {
     return;
   }
 
+  if (panel === 'recommend') {
+    activeUserPanel.value = 'sop';
+    knowledgeQuery.value = '投诉接待基础';
+    void searchKnowledge(knowledgeQuery.value, 'sop');
+  }
+
+  if (panel === 'submit' || panel === 'profile') {
+    void fetchCandidateMaterials();
+  }
+};
+
+const openUserAction = (panel: UserPanelKey) => {
+  if (roleKey.value === 'candidate') {
+    openCandidateAction(panel);
+    return;
+  }
+
+  if (roleKey.value !== 'user') {
+    tap(panel || roleKey.value);
+    return;
+  }
+
+  if (panel === 'sop') {
+    openSopPanel();
+    return;
+  }
+
+  activeTabLabel.value =
+    ({ tasks: '首页', sop: '知识', cases: '知识', submit: '知识', profile: '我的', history: '我的', recommend: '知识' } as Partial<Record<UserPanelKey, string>>)[panel] || '首页';
+  activeUserPanel.value = panel;
+  userReviewDetail.value = null;
+  userReviewMessage.value = '';
+
+  if (panel === 'cases') {
+    knowledgeQuery.value = '投诉接待优秀案例';
+    void searchKnowledge(knowledgeQuery.value, 'case');
+    return;
+  }
+
   if (panel === 'recommend') {
     activeUserPanel.value = 'sop';
     knowledgeQuery.value = '催费沟通专项';
@@ -978,6 +1528,25 @@ const openUserAction = (panel: UserPanelKey) => {
 };
 
 const openUserTool = (item: ToolItem) => {
+  if (roleKey.value === 'candidate') {
+    if (item.title.includes('面试')) {
+      void startCandidateInterview();
+      return;
+    }
+    if (item.title.includes('SOP')) {
+      openCandidateAction('sop');
+      return;
+    }
+    if (item.title.includes('案例')) {
+      openCandidateAction('cases');
+      return;
+    }
+    if (item.title.includes('资料')) {
+      openCandidateAction('submit');
+      return;
+    }
+  }
+
   if (roleKey.value !== 'user') {
     tap(item.title);
     return;
@@ -1002,9 +1571,97 @@ const openUserTool = (item: ToolItem) => {
   tap(item.title);
 };
 
+const openSupervisorAction = (panel: SupervisorPanelKey) => {
+  if (roleKey.value !== 'supervisor') {
+    tap(panel || roleKey.value);
+    return;
+  }
+  if (panel === 'sop') {
+    openSopPanel();
+    return;
+  }
+  activeTabLabel.value =
+    ({ team: '团队', reviews: '团队', assign: '团队', weakness: '团队', case: '案例', sop: '案例', profile: '我的' } as Partial<Record<SupervisorPanelKey, string>>)[panel] || '首页';
+  activeSupervisorPanel.value = panel;
+  activeUserPanel.value = '';
+  if (panel === 'reviews' || panel === 'assign') {
+    void fetchPracticeData();
+  }
+};
+
+const openSupervisorTodo = (item: TodoItem) => {
+  if (item.title.includes('复盘')) {
+    openSupervisorAction('reviews');
+    return;
+  }
+  if (item.title.includes('案例')) {
+    openSupervisorAction('case');
+    return;
+  }
+  openSupervisorAction('assign');
+};
+
+const openSupervisorTool = (item: ToolItem) => {
+  if (item.title.includes('指派')) {
+    openSupervisorAction('assign');
+    return;
+  }
+  if (item.title.includes('短板')) {
+    openSupervisorAction('weakness');
+    return;
+  }
+  if (item.title.includes('案例')) {
+    openSupervisorAction('case');
+    return;
+  }
+  if (item.title.includes('SOP')) {
+    openSupervisorAction('sop');
+    return;
+  }
+  tap(item.title);
+};
+
 const openTab = (label: string) => {
+  activeTabLabel.value = label;
+  if (roleKey.value === 'supervisor') {
+    if (label === '首页') {
+      activeSupervisorPanel.value = '';
+      return;
+    }
+    if (label === '团队') {
+      openSupervisorAction('team');
+      return;
+    }
+    if (label === '案例') {
+      openSupervisorAction('case');
+      return;
+    }
+    if (label === '我的') {
+      openSupervisorAction('profile');
+      return;
+    }
+  }
   if (roleKey.value !== 'user') {
-    tap(label);
+    if (roleKey.value === 'candidate') {
+      if (label === '首页') {
+        activeUserPanel.value = '';
+        return;
+      }
+      if (label === '面试') {
+        openCandidateAction('tasks');
+        return;
+      }
+      if (label === '知识') {
+        openCandidateAction('sop');
+        return;
+      }
+      if (label === '我的') {
+        openCandidateAction('profile');
+        return;
+      }
+    } else {
+      tap(label);
+    }
     return;
   }
 
@@ -1051,12 +1708,55 @@ const handleMaterialFile = (event: Event) => {
   const input = event.target as HTMLInputElement;
   materialFile.value = input.files?.[0] || null;
   materialResult.value = null;
-  materialMessage.value = materialFile.value ? '已选择语音素材' : '';
+  materialMessage.value = materialFile.value ? (roleKey.value === 'candidate' ? '已选择补充资料' : '已选择语音素材') : '';
+};
+
+const candidateId = () => phone.value || 'mobile-candidate';
+
+const fetchCandidateMaterials = async () => {
+  if (roleKey.value !== 'candidate' || !authToken.value) {
+    candidateMaterials.value = [];
+    return;
+  }
+  try {
+    candidateMaterials.value =
+      (await readApi<CandidateMaterialResponse[]>(
+        await fetch(`/dev-api/api/aihr/mobile/candidate/materials?candidateId=${encodeURIComponent(candidateId())}`, { headers: authOnlyHeaders() })
+      )) || [];
+  } catch {
+    candidateMaterials.value = [];
+  }
 };
 
 const submitMaterial = async () => {
   if (!materialFile.value) {
-    materialMessage.value = '请先选择语音素材';
+    materialMessage.value = roleKey.value === 'candidate' ? '请先选择补充资料' : '请先选择语音素材';
+    return;
+  }
+
+  if (roleKey.value === 'candidate') {
+    materialUploading.value = true;
+    materialMessage.value = '';
+    try {
+      const form = new FormData();
+      form.append('file', materialFile.value);
+      form.append('candidateId', candidateId());
+      form.append('candidateName', '李娜');
+      const saved = await readApi<CandidateMaterialResponse>(
+        await fetch('/dev-api/api/aihr/mobile/candidate/materials', {
+          method: 'POST',
+          headers: authOnlyHeaders(),
+          body: form
+        })
+      );
+      materialMessage.value = `资料已上传入库：#${saved.id} / OSS ${saved.ossId}`;
+      materialFile.value = null;
+      await fetchCandidateMaterials();
+    } catch (error) {
+      materialMessage.value = error instanceof Error ? error.message : '资料上传失败';
+    } finally {
+      materialUploading.value = false;
+    }
     return;
   }
 
@@ -1190,6 +1890,69 @@ const submitMobilePractice = async () => {
   }
 };
 
+const startCandidateInterview = async () => {
+  activeUserPanel.value = 'tasks';
+  activeTabLabel.value = '面试';
+  interviewStatus.value = 'starting';
+  interviewSessionId.value = '';
+  interviewQuestions.value = [];
+  interviewAnswers.value = {};
+  interviewResult.value = null;
+  interviewMessage.value = '';
+  try {
+    const data = await readApi<InterviewStartResponse>(
+      await fetch('/dev-api/api/recruit/interview/start', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ candidateId: 'li-na', positionCode: 'customer-service', mode: 'mobile' })
+      })
+    );
+    interviewSessionId.value = data.sessionId;
+    interviewQuestions.value = data.questions || [];
+    interviewAnswers.value = Object.fromEntries(interviewQuestions.value.map((item) => [item.questionId, ''])) as Record<string, string>;
+    interviewStatus.value = 'active';
+    interviewMessage.value = `已生成 ${interviewQuestions.value.length} 道题`;
+  } catch (error) {
+    interviewStatus.value = 'idle';
+    interviewMessage.value = error instanceof Error ? error.message : '面试启动失败';
+  }
+};
+
+const finishCandidateInterview = async () => {
+  const answers = Object.fromEntries(Object.entries(interviewAnswers.value).map(([key, value]) => [key, value.trim()])) as Record<string, string>;
+  if (!Object.values(answers).some(Boolean)) {
+    interviewMessage.value = '请至少填写一题回答';
+    return;
+  }
+
+  interviewStatus.value = 'submitting';
+  interviewMessage.value = '';
+  try {
+    for (const [questionId, answerText] of Object.entries(answers)) {
+      if (!answerText) continue;
+      await readApi(
+        await fetch('/dev-api/api/recruit/interview/answer', {
+          method: 'POST',
+          headers: apiHeaders(),
+          body: JSON.stringify({ sessionId: interviewSessionId.value, questionId, answerText })
+        })
+      );
+    }
+    interviewResult.value = await readApi<InterviewFinishResponse>(
+      await fetch('/dev-api/api/recruit/interview/finish', {
+        method: 'POST',
+        headers: apiHeaders(),
+        body: JSON.stringify({ sessionId: interviewSessionId.value, answers })
+      })
+    );
+    interviewStatus.value = 'finished';
+    interviewMessage.value = '面试完成，已生成面试记录';
+  } catch (error) {
+    interviewStatus.value = 'active';
+    interviewMessage.value = error instanceof Error ? error.message : '面试提交失败';
+  }
+};
+
 const goSupervisor = () => {
   roleKey.value = 'supervisor';
   syncPath();
@@ -1492,12 +2255,24 @@ watch(
     apiHome.value = null;
     reviewMessage.value = '';
     userReviewMessage.value = '';
+    activeTabLabel.value = '首页';
+    sopPanelOpen.value = false;
     if (roleKey.value !== 'user') {
       activeUserPanel.value = '';
       userReviewDetail.value = null;
     }
+    if (roleKey.value !== 'supervisor') {
+      activeSupervisorPanel.value = '';
+    }
+    if (roleKey.value !== 'candidate') {
+      interviewStatus.value = 'idle';
+      interviewResult.value = null;
+      interviewQuestions.value = [];
+      candidateMaterials.value = [];
+    }
     void fetchMobileHome();
     void fetchPracticeData();
+    void fetchCandidateMaterials();
   },
   { immediate: true }
 );
@@ -1522,6 +2297,16 @@ const supervisorRole = computed(
       suggestion: SuggestionItem;
     }
 );
+const supervisorTeamTiles = computed<MetricItem[]>(() =>
+  supervisorRole.value.team.stats.map((item, index) => ({
+    icon: item.icon,
+    title: item.title,
+    value: item.value,
+    desc: index === 0 ? '今日团队进度' : index === 1 ? '训练评分均值' : '待改进主题',
+    tone: item.tone,
+    progress: Number.parseInt(item.value, 10) || 66
+  }))
+);
 const ringStyle = (value: number) => ({ '--value': value } as Record<string, string | number>);
 
 const iconPaths: Record<IconName, Array<[string, Record<string, string | number>?]>> = {
@@ -1684,10 +2469,11 @@ const ProgressBar = defineComponent({
 const IconBubble = defineComponent({
   props: {
     icon: { type: String as PropType<IconName>, required: true },
-    tone: { type: String as PropType<Tone>, default: 'teal' }
+    tone: { type: String as PropType<Tone>, default: 'teal' },
+    size: { type: Number, default: 31 }
   },
   setup(props) {
-    return () => h('span', { class: ['icon-bubble', `tone-${props.tone}`] }, h(Icon, { name: props.icon, size: 31 }));
+    return () => h('span', { class: ['icon-bubble', `tone-${props.tone}`] }, h(Icon, { name: props.icon, size: props.size }));
   }
 });
 
@@ -1722,7 +2508,7 @@ const MiniStat = defineComponent({
   setup(props) {
     return () =>
       h('div', { class: 'mini-stat' }, [
-        h(IconBubble, { icon: props.icon, tone: props.tone }),
+        h(IconBubble, { icon: props.icon, tone: props.tone, size: 24 }),
         h('span', [h('small', props.title), h('b', props.value)])
       ]);
   }
@@ -1746,6 +2532,45 @@ const ProgressTile = defineComponent({
 </script>
 
 <style>
+:root {
+  --primary-teal: #0faea6;
+  --primary-teal-hover: #16c0b7;
+  --primary-teal-active: #0c948e;
+  --primary-teal-light: rgba(15, 174, 166, 0.08);
+  --primary-teal-glow: rgba(15, 174, 166, 0.2);
+
+  --accent-orange: #f07b28;
+  --accent-orange-light: rgba(244, 164, 80, 0.08);
+  --accent-orange-glow: rgba(244, 164, 80, 0.15);
+
+  --accent-blue: #2c7ded;
+  --accent-blue-light: rgba(87, 154, 255, 0.08);
+  --accent-blue-glow: rgba(87, 154, 255, 0.15);
+
+  --accent-purple: #7367df;
+  --accent-purple-light: rgba(144, 131, 245, 0.08);
+
+  --accent-amber: #edaa14;
+  --accent-amber-light: rgba(238, 179, 54, 0.08);
+
+  --text-primary: #090f1d;
+  --text-secondary: #4f5e76;
+  --text-muted: #8c9ba5;
+
+  --glass-bg: rgba(255, 255, 255, 0.85);
+  --glass-bg-hover: rgba(255, 255, 255, 0.95);
+  --glass-border: rgba(220, 228, 235, 0.6);
+  --glass-border-light: rgba(255, 255, 255, 0.5);
+
+  --shadow-sm: 0 2px 8px rgba(18, 31, 49, 0.03);
+  --shadow-md: 0 8px 24px rgba(18, 31, 49, 0.06);
+  --shadow-lg: 0 16px 36px rgba(18, 31, 49, 0.09);
+
+  --transition-ease: all 0.25s ease;
+  --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --transition-spring-fast: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
 :global(html),
 :global(body),
 :global(#app) {
@@ -1767,29 +2592,38 @@ button {
   color: inherit;
   cursor: pointer;
   font: inherit;
+  transition: var(--transition-spring-fast);
+}
+
+button:active {
+  transform: scale(0.97);
 }
 
 .mobile-aihr {
   min-height: 100vh;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 251, 0.98)),
-    radial-gradient(circle at 22% 3%, rgba(21, 172, 164, 0.13), transparent 34%),
-    radial-gradient(circle at 88% 8%, rgba(56, 132, 255, 0.1), transparent 27%);
-  color: #090f1d;
+    radial-gradient(circle at 10% 20%, rgba(15, 174, 166, 0.07) 0%, transparent 40%),
+    radial-gradient(circle at 90% 10%, rgba(56, 132, 255, 0.07) 0%, transparent 35%),
+    radial-gradient(circle at 50% 80%, rgba(240, 123, 40, 0.03) 0%, transparent 45%),
+    linear-gradient(180deg, #f5f8fa 0%, #fcfdfe 100%);
+  color: var(--text-primary);
   display: flex;
   justify-content: flex-start;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .page {
   width: min(100vw, 426px);
   min-height: 100vh;
-  padding: 4px 12px 96px;
+  padding: 12px 14px 110px;
   position: relative;
 }
 
 .top {
-  padding: 0 13px;
+  padding: 0 8px;
+  margin-bottom: 20px;
 }
 
 .top-row {
@@ -1809,34 +2643,44 @@ p {
 }
 
 .top h1 {
-  font-size: 23px;
-  font-weight: 850;
-  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-muted);
 }
 
 .role-pill {
-  height: 29px;
-  min-width: 72px;
-  border: 1px solid rgba(10, 158, 153, 0.58);
-  border-radius: 12px;
-  color: #079a95;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--glass-border);
+  border-radius: 99px;
+  color: var(--primary-teal);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
-  font-size: 14px;
-  font-weight: 800;
-  background: rgba(255, 255, 255, 0.8);
+  font-size: 13px;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(8px);
+  box-shadow: var(--shadow-sm);
+}
+
+.role-pill:active {
+  transform: scale(0.95);
+  background: rgba(255, 255, 255, 0.9);
 }
 
 .avatar {
-  width: 45px;
-  height: 45px;
+  width: 44px;
+  height: 44px;
   border-radius: 999px;
   background: #eef3f7;
   overflow: hidden;
   position: relative;
-  box-shadow: 0 8px 22px rgba(18, 32, 50, 0.12);
+  box-shadow: 0 4px 12px rgba(18, 32, 50, 0.08);
+  border: 2px solid #ffffff;
 }
 
 .avatar::before {
@@ -1880,34 +2724,37 @@ p {
 }
 
 .top h2 {
-  margin-top: 10px;
-  font-size: 35px;
-  line-height: 1.08;
-  font-weight: 900;
-  letter-spacing: 0;
+  margin-top: 12px;
+  font-size: 28px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: -0.02em;
 }
 
 .top h2 span {
-  font-size: 25px;
+  font-size: 24px;
 }
 
 .place {
-  margin-top: 9px;
-  color: #606d82;
+  margin-top: 8px;
+  color: var(--text-secondary);
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-size: 16px;
-  font-weight: 650;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .section-card {
-  margin-top: 0;
-  padding: 17px 13px 18px;
-  border: 1px solid rgba(229, 235, 240, 0.9);
-  border-radius: 17px;
-  background: rgba(255, 255, 255, 0.94);
-  box-shadow: 0 10px 26px rgba(18, 31, 49, 0.075);
+  margin-top: 16px;
+  padding: 18px 16px 20px;
+  border: 1px solid var(--glass-border);
+  border-top: 1px solid var(--glass-border-light);
+  border-radius: 20px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow-md);
+  transition: var(--transition-ease);
 }
 
 .section-card.has-action {
@@ -1920,7 +2767,7 @@ p {
 
 .section-title {
   min-height: 28px;
-  margin-bottom: 15px;
+  margin-bottom: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1929,57 +2776,65 @@ p {
 
 .section-title h2 {
   position: relative;
-  padding-left: 14px;
-  font-size: 19px;
+  padding-left: 12px;
+  font-size: 17px;
   line-height: 1.2;
-  font-weight: 900;
+  font-weight: 800;
+  letter-spacing: -0.01em;
 }
 
 .section-title h2::before {
   content: '';
   position: absolute;
   left: 0;
-  top: 2px;
+  top: 3px;
   width: 4px;
-  height: 19px;
-  border-radius: 999px;
-  background: #16aaa3;
+  height: 16px;
+  border-radius: 99px;
+  background: var(--primary-teal);
 }
 
 .section-title button {
   position: absolute;
-  right: 13px;
-  top: 17px;
-  color: #687487;
+  right: 16px;
+  top: 18px;
+  color: var(--text-secondary);
   display: inline-flex;
   align-items: center;
   gap: 2px;
   white-space: nowrap;
   font-size: 13px;
-  font-weight: 650;
+  font-weight: 700;
+  transition: var(--transition-spring-fast);
+}
+
+.section-title button:active {
+  transform: scale(0.95);
 }
 
 .section-title.compact-action button {
-  right: 13px;
+  right: 16px;
   top: 18px;
-  height: 27px;
-  border-radius: 999px;
-  padding: 0 10px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
+  height: 28px;
+  border-radius: 99px;
+  padding: 0 12px;
+  color: var(--primary-teal);
+  background: var(--primary-teal-light);
+  border: 1px solid rgba(15, 174, 166, 0.12);
 }
 
 .task-card {
   min-height: 164px;
-  padding: 16px 15px;
-  border: 1px solid rgba(20, 177, 169, 0.25);
-  border-radius: 14px;
-  background: linear-gradient(135deg, #f1ffff 0%, #fbffff 54%, #edf8f7 100%);
+  padding: 20px 18px;
+  border: 1px solid rgba(15, 174, 166, 0.15);
+  border-radius: 16px;
+  background: linear-gradient(135deg, #10a8a1 0%, #06817b 100%);
   display: grid;
   grid-template-columns: 1fr 120px;
   gap: 6px 10px;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 10px 24px rgba(15, 174, 166, 0.15);
 }
 
 .task-copy {
@@ -1990,41 +2845,45 @@ p {
 
 .task-copy strong {
   display: inline-flex;
-  min-height: 27px;
+  min-height: 24px;
   align-items: center;
-  border-radius: 7px;
-  padding: 0 10px;
-  color: #068e88;
-  background: rgba(14, 172, 164, 0.12);
-  font-size: 14px;
-  font-weight: 900;
+  border-radius: 6px;
+  padding: 0 8px;
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
 }
 
 .task-copy h3 {
-  margin-top: 34px;
-  font-size: 27px;
-  line-height: 1.12;
-  font-weight: 900;
+  margin-top: 16px;
+  font-size: 22px;
+  line-height: 1.2;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.01em;
 }
 
 .task-copy p {
   margin-top: 8px;
-  color: #4f5e76;
-  font-size: 15px;
-  font-weight: 650;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .task-copy span {
   display: block;
-  margin-top: 24px;
-  color: #34435b;
-  font-size: 15px;
+  margin-top: 20px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
   font-weight: 700;
 }
 
 .headset-art {
   height: 115px;
-  color: #079c95;
+  color: rgba(255, 255, 255, 0.85);
   display: grid;
   place-items: center;
   position: relative;
@@ -2035,115 +2894,128 @@ p {
 .headset-art::after {
   content: '';
   position: absolute;
-  border-radius: 18px;
-  background: rgba(15, 174, 166, 0.08);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .headset-art::before {
-  width: 88px;
-  height: 73px;
-  right: 3px;
-  bottom: 12px;
+  width: 90px;
+  height: 90px;
+  right: 8px;
+  bottom: 8px;
 }
 
 .headset-art::after {
-  width: 28px;
-  height: 28px;
-  left: 1px;
-  top: 36px;
+  width: 32px;
+  height: 32px;
+  left: 4px;
+  top: 32px;
 }
 
 .task-card > button {
   position: absolute;
-  right: 15px;
-  bottom: 15px;
+  right: 18px;
+  bottom: 18px;
   min-width: 116px;
-  height: 48px;
+  height: 44px;
   border-radius: 10px;
-  color: #fff;
-  background: linear-gradient(135deg, #1cbdb4, #07948e);
-  box-shadow: 0 8px 19px rgba(9, 151, 144, 0.26);
-  font-size: 18px;
-  font-weight: 900;
+  color: var(--primary-teal-active);
+  background: #ffffff;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  font-size: 15px;
+  font-weight: 800;
+  transition: var(--transition-spring);
+}
+
+.task-card > button:active {
+  transform: scale(0.95);
+  background: #f4ffff;
 }
 
 .auth-page {
-  padding-top: 22px;
+  padding-top: 30px;
 }
 
 .auth-top {
-  margin-bottom: 18px;
+  margin-bottom: 24px;
 }
 
 .login-panel {
-  margin: 0 13px;
-  padding: 18px 14px;
-  border: 1px solid rgba(229, 235, 240, 0.9);
-  border-radius: 17px;
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: 0 10px 26px rgba(18, 31, 49, 0.075);
+  margin: 0 8px;
+  padding: 24px 20px;
+  border: 1px solid var(--glass-border);
+  border-top: 1px solid var(--glass-border-light);
+  border-radius: 20px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow-lg);
   display: grid;
-  gap: 14px;
+  gap: 16px;
 }
 
 .login-panel label {
   display: grid;
-  gap: 7px;
-  color: #59677d;
-  font-size: 14px;
-  font-weight: 750;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 700;
 }
 
 .login-panel input {
   width: 100%;
   height: 46px;
-  border: 1px solid rgba(20, 177, 169, 0.2);
+  border: 1px solid rgba(15, 174, 166, 0.2);
   border-radius: 11px;
-  padding: 0 12px;
-  color: #111827;
-  background: #fbffff;
+  padding: 0 14px;
+  color: var(--text-primary);
+  background: #ffffff;
   font: inherit;
-  font-weight: 750;
+  font-size: 14px;
+  font-weight: 600;
   outline: none;
+  transition: var(--transition-ease);
 }
 
 .login-panel input:focus {
-  border-color: rgba(10, 158, 153, 0.6);
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px var(--primary-teal-glow);
 }
 
 .code-row {
   display: grid;
   grid-template-columns: 1fr 112px;
-  gap: 9px;
+  gap: 8px;
 }
 
 .code-row button,
 .login-submit {
   height: 46px;
   border-radius: 11px;
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #1cbdb4, #07948e);
-  box-shadow: 0 8px 19px rgba(9, 151, 144, 0.2);
-  font-weight: 900;
+  box-shadow: 0 4px 12px rgba(9, 151, 144, 0.18);
+  font-weight: 800;
+  transition: var(--transition-spring);
 }
 
 .code-row button:disabled,
 .login-submit:disabled {
   opacity: 0.55;
+  transform: none;
 }
 
 .auth-message {
   min-height: 18px;
   color: #ef6a2e;
   font-size: 13px;
-  font-weight: 750;
+  font-weight: 700;
 }
 
 .bar {
-  height: 7px;
+  height: 6px;
   margin-top: 8px;
   border-radius: 999px;
-  background: rgba(20, 177, 169, 0.18);
+  background: rgba(15, 174, 166, 0.12);
   overflow: hidden;
 }
 
@@ -2165,12 +3037,24 @@ p {
 }
 
 .review-card {
-  min-height: 81px;
-  margin-top: 13px;
-  padding: 13px;
-  border: 1px solid rgba(238, 183, 93, 0.42);
-  border-radius: 13px;
-  background: linear-gradient(135deg, rgba(255, 250, 241, 0.96), #fff);
+  min-height: 76px;
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(238, 179, 54, 0.25);
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(255, 251, 242, 0.7), rgba(255, 255, 255, 0.95));
+  box-shadow: var(--shadow-sm);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  transition: var(--transition-spring);
+}
+
+.review-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
 }
 
 .review-card b,
@@ -2178,10 +3062,10 @@ p {
 .todo-list b,
 .tool-grid b {
   display: block;
-  color: #101826;
-  font-size: 17px;
+  color: var(--text-primary);
+  font-size: 15px;
   line-height: 1.2;
-  font-weight: 900;
+  font-weight: 750;
 }
 
 .review-card small,
@@ -2189,22 +3073,22 @@ p {
 .todo-list small,
 .tool-grid small {
   display: block;
-  margin-top: 5px;
-  color: #607086;
-  font-size: 14px;
+  margin-top: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
   line-height: 1.35;
   white-space: pre-line;
   font-weight: 600;
 }
 
 .practice-panel {
-  margin-top: 13px;
-  padding: 13px;
-  border: 1px solid rgba(20, 177, 169, 0.25);
-  border-radius: 13px;
-  background: #f8ffff;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid rgba(15, 174, 166, 0.18);
+  border-radius: 16px;
+  background: rgba(240, 253, 252, 0.5);
   display: grid;
-  gap: 11px;
+  gap: 12px;
 }
 
 .practice-panel-head {
@@ -2216,69 +3100,124 @@ p {
 
 .practice-panel-head span,
 .practice-panel-head b {
-  color: #0e1726;
-  font-size: 17px;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 800;
 }
 
 .practice-panel-head small {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
   font-weight: 800;
 }
 
 .practice-dialogue {
   display: grid;
-  gap: 8px;
+  gap: 10px;
 }
 
 .practice-dialogue p {
-  padding: 9px 10px;
-  border-radius: 10px;
-  color: #1f2937;
-  background: #fff;
-  border: 1px solid rgba(213, 225, 233, 0.85);
+  padding: 10px 14px;
+  border-radius: 14px;
+  color: var(--text-primary);
+  background: #ffffff;
+  border: 1px solid rgba(213, 225, 233, 0.5);
   font-size: 14px;
-  line-height: 1.4;
-  font-weight: 650;
+  line-height: 1.45;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(18, 31, 49, 0.02);
 }
 
 .practice-dialogue p.trainee {
-  border-color: rgba(20, 177, 169, 0.28);
+  border-color: rgba(15, 174, 166, 0.18);
   background: #effffd;
+  border-bottom-right-radius: 4px;
 }
 
 .practice-dialogue p.coach {
-  border-color: rgba(87, 154, 255, 0.22);
+  border-color: rgba(87, 154, 255, 0.15);
   background: #f3f8ff;
+  border-bottom-left-radius: 4px;
 }
 
 .practice-dialogue span {
   display: block;
   margin-bottom: 4px;
-  color: #0a9a94;
-  font-size: 12px;
-  font-weight: 900;
+  color: var(--primary-teal);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .practice-live {
   display: grid;
-  gap: 10px;
+  gap: 12px;
 }
 
 .practice-live textarea {
   width: 100%;
   resize: vertical;
   min-height: 76px;
-  border: 1px solid rgba(20, 177, 169, 0.25);
-  border-radius: 11px;
-  padding: 10px;
-  color: #111827;
-  background: #fff;
+  border: 1px solid rgba(15, 174, 166, 0.22);
+  border-radius: 12px;
+  padding: 12px;
+  color: var(--text-primary);
+  background: #ffffff;
   font: inherit;
   font-size: 14px;
-  font-weight: 650;
+  font-weight: 600;
   outline: none;
+  transition: var(--transition-ease);
+}
+
+.practice-live textarea:focus {
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px var(--primary-teal-glow);
+}
+
+.interview-questions {
+  display: grid;
+  gap: 12px;
+}
+
+.interview-question {
+  display: grid;
+  gap: 6px;
+}
+
+.interview-question span {
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 800;
+}
+
+.interview-question small {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 650;
+}
+
+.interview-question textarea {
+  width: 100%;
+  min-height: 76px;
+  resize: vertical;
+  border: 1px solid rgba(15, 174, 166, 0.22);
+  border-radius: 12px;
+  padding: 12px;
+  color: var(--text-primary);
+  background: #ffffff;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  outline: none;
+}
+
+.interview-question textarea:focus {
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px var(--primary-teal-glow);
 }
 
 .practice-actions,
@@ -2290,23 +3229,31 @@ p {
 
 .practice-actions button,
 .practice-result-actions button {
-  min-height: 40px;
+  min-height: 42px;
   border-radius: 10px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
-  font-size: 14px;
-  font-weight: 900;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
+  font-size: 13px;
+  font-weight: 800;
+  transition: var(--transition-spring);
+  border: 1px solid rgba(15, 174, 166, 0.1);
 }
 
 .practice-actions button:last-child,
 .practice-result-actions button:first-child {
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #1cbdb4, #07948e);
-  box-shadow: 0 7px 15px rgba(9, 151, 144, 0.18);
+  box-shadow: 0 4px 12px rgba(9, 151, 144, 0.2);
+  border: none;
 }
 
 .practice-actions button:disabled {
   opacity: 0.55;
+  transform: none;
+}
+
+.practice-audio-input {
+  display: none;
 }
 
 .practice-result {
@@ -2315,21 +3262,21 @@ p {
 }
 
 .practice-result strong {
-  color: #0e1726;
+  color: var(--text-primary);
   font-size: 15px;
   line-height: 1.35;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .practice-result p {
-  color: #506078;
-  font-size: 14px;
-  line-height: 1.42;
-  font-weight: 650;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+  font-weight: 600;
 }
 
 .practice-panel > em {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
   font-style: normal;
   font-weight: 800;
@@ -2340,18 +3287,85 @@ p {
   gap: 12px;
 }
 
-.panel-row {
-  width: 100%;
-  min-height: 66px;
-  padding: 10px 11px;
-  border: 1px solid rgba(213, 225, 233, 0.9);
-  border-radius: 12px;
-  background: #fff;
+.flow-steps {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 9px;
+}
+
+.flow-steps button {
+  width: 100%;
+  min-height: 64px;
+  padding: 10px 12px;
+  border: 1px solid rgba(213, 225, 233, 0.62);
+  border-radius: 13px;
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
   text-align: left;
+  transition: var(--transition-spring);
+}
+
+.flow-steps button:active {
+  transform: scale(0.985);
+}
+
+.flow-steps button.active {
+  border-color: rgba(15, 174, 166, 0.48);
+  background: linear-gradient(135deg, rgba(240, 253, 252, 0.98), #ffffff);
+}
+
+.flow-steps em {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: var(--primary-teal-light);
+  color: var(--primary-teal-active);
+  display: grid;
+  place-items: center;
+  font-style: normal;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.flow-steps b {
+  display: block;
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.25;
+  font-weight: 850;
+}
+
+.flow-steps small {
+  display: block;
+  margin-top: 3px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 650;
+}
+
+.panel-row {
+  width: 100%;
+  min-height: 66px;
+  padding: 12px;
+  border: 1px solid rgba(213, 225, 233, 0.6);
+  border-radius: 14px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  transition: var(--transition-spring);
+  box-shadow: var(--shadow-sm);
+}
+
+.panel-row:active {
+  transform: scale(0.98);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
 }
 
 .panel-row b,
@@ -2359,8 +3373,8 @@ p {
 .case-result h3,
 .result-list h3,
 .snippet-list h3 {
-  color: #101826;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-weight: 800;
 }
 
 .panel-row b {
@@ -2372,7 +3386,7 @@ p {
 .panel-row small {
   display: block;
   margin-top: 4px;
-  color: #607086;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.35;
   font-weight: 650;
@@ -2387,15 +3401,21 @@ p {
 .knowledge-search input {
   min-width: 0;
   height: 42px;
-  border: 1px solid rgba(20, 177, 169, 0.24);
+  border: 1px solid rgba(15, 174, 166, 0.2);
   border-radius: 10px;
-  padding: 0 11px;
-  color: #111827;
-  background: #fff;
+  padding: 0 12px;
+  color: var(--text-primary);
+  background: #ffffff;
   font: inherit;
   font-size: 14px;
   font-weight: 700;
   outline: none;
+  transition: var(--transition-ease);
+}
+
+.knowledge-search input:focus {
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px var(--primary-teal-glow);
 }
 
 .knowledge-search button,
@@ -2403,20 +3423,22 @@ p {
 .panel-actions button {
   min-height: 42px;
   border-radius: 10px;
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #1cbdb4, #07948e);
-  box-shadow: 0 7px 15px rgba(9, 151, 144, 0.18);
+  box-shadow: 0 4px 12px rgba(9, 151, 144, 0.15);
   font-size: 14px;
-  font-weight: 900;
+  font-weight: 800;
+  transition: var(--transition-spring);
 }
 
 .knowledge-search button:disabled,
 .panel-primary:disabled {
   opacity: 0.55;
+  transform: none;
 }
 
 .panel-message {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
   font-style: normal;
   font-weight: 800;
@@ -2437,7 +3459,7 @@ p {
 .case-result p,
 .case-result dd {
   margin: 0;
-  color: #506078;
+  color: var(--text-secondary);
   font-size: 13px;
   line-height: 1.45;
   font-weight: 650;
@@ -2451,13 +3473,14 @@ p {
 
 .panel-tags span {
   max-width: 100%;
-  padding: 5px 8px;
-  border-radius: 999px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
-  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 99px;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
+  border: 1px solid rgba(15, 174, 166, 0.1);
+  font-size: 11px;
   line-height: 1.2;
-  font-weight: 850;
+  font-weight: 750;
 }
 
 .result-list,
@@ -2470,63 +3493,69 @@ p {
 .snippet-list h3,
 .case-result h3 {
   margin: 0;
-  font-size: 15px;
+  font-size: 14px;
 }
 
 .result-list p,
 .snippet-list blockquote,
 .case-result > div {
   margin: 0;
-  padding: 10px;
-  border: 1px solid rgba(213, 225, 233, 0.9);
-  border-radius: 10px;
-  background: #fff;
+  padding: 12px;
+  border: 1px solid rgba(213, 225, 233, 0.5);
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
 }
 
 .result-list b,
 .snippet-list b,
 .case-result b {
   display: block;
-  color: #101826;
+  color: var(--text-primary);
   font-size: 14px;
   line-height: 1.25;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .result-list small,
 .snippet-list span {
   display: block;
   margin-top: 4px;
-  color: #607086;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.4;
   font-weight: 650;
 }
 
 .file-picker {
-  min-height: 86px;
-  padding: 13px;
-  border: 1px dashed rgba(20, 177, 169, 0.38);
-  border-radius: 12px;
-  background: #f8ffff;
+  min-height: 90px;
+  padding: 16px;
+  border: 2px dashed rgba(15, 174, 166, 0.25);
+  border-radius: 14px;
+  background: rgba(240, 253, 252, 0.2);
   display: grid;
   align-content: center;
   gap: 6px;
   position: relative;
   overflow: hidden;
+  transition: var(--transition-ease);
+}
+
+.file-picker:active {
+  background: rgba(240, 253, 252, 0.4);
 }
 
 .file-picker span {
-  color: #101826;
-  font-size: 15px;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 800;
 }
 
 .file-picker small {
-  color: #607086;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: 11px;
   line-height: 1.35;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .file-picker input {
@@ -2543,7 +3572,7 @@ p {
 }
 
 .case-result dt {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
   font-weight: 900;
 }
@@ -2559,11 +3588,127 @@ p {
 
 .panel-actions button {
   min-width: 76px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
   box-shadow: none;
 }
 
+.sop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  background:
+    radial-gradient(circle at 10% 20%, rgba(15, 174, 166, 0.07) 0%, transparent 40%),
+    radial-gradient(circle at 90% 10%, rgba(56, 132, 255, 0.07) 0%, transparent 35%),
+    linear-gradient(180deg, #f5f8fa 0%, #fcfdfe 100%);
+}
+
+.sop-panel {
+  width: min(100vw, 426px);
+  min-height: 100vh;
+  padding: 14px 14px 110px;
+  display: grid;
+  align-content: start;
+  gap: 14px;
+}
+
+.sop-head {
+  display: grid;
+  grid-template-columns: 72px 1fr 72px;
+  align-items: center;
+  padding: 2px 0 4px;
+}
+
+.sop-head h2 {
+  margin: 0;
+  text-align: center;
+  color: var(--text-primary);
+  font-size: 18px;
+  font-weight: 850;
+}
+
+.sop-back {
+  width: 64px;
+  height: 36px;
+  border-radius: 11px;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.sop-form {
+  padding: 16px;
+  border: 1px solid var(--glass-border);
+  border-top: 1px solid var(--glass-border-light);
+  border-radius: 18px;
+  background: var(--glass-bg);
+  box-shadow: var(--shadow-md);
+  display: grid;
+  gap: 10px;
+}
+
+.sop-form input {
+  width: 100%;
+  min-width: 0;
+  height: 46px;
+  border: 1px solid rgba(15, 174, 166, 0.2);
+  border-radius: 11px;
+  padding: 0 13px;
+  color: var(--text-primary);
+  background: #ffffff;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  outline: none;
+}
+
+.sop-form input:focus {
+  border-color: var(--primary-teal);
+  box-shadow: 0 0 0 3px var(--primary-teal-glow);
+}
+
+.sop-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 9px;
+}
+
+.sop-actions button {
+  min-height: 42px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.sop-voice {
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
+  border: 1px solid rgba(15, 174, 166, 0.1);
+}
+
+.sop-submit {
+  color: #ffffff;
+  background: linear-gradient(135deg, #1cbdb4, #07948e);
+  box-shadow: 0 4px 12px rgba(9, 151, 144, 0.15);
+}
+
+.sop-actions button:disabled {
+  opacity: 0.55;
+  transform: none;
+}
+
+.sop-result {
+  padding: 16px;
+  border: 1px solid var(--glass-border);
+  border-radius: 18px;
+  background: #ffffff;
+  box-shadow: var(--shadow-md);
+}
+
 .tool-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2572,30 +3717,50 @@ p {
 
 .tool-grid button {
   min-height: 88px;
-  border: 1px solid;
-  border-radius: 12px;
-  padding: 13px 24px 13px 9px;
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  padding: 14px 12px;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-spring);
   position: relative;
   text-align: left;
 }
 
+.tool-grid button.tone-teal,
+.tool-grid button.tone-blue,
+.tool-grid button.tone-orange,
+.tool-grid button.tone-purple,
+.tool-grid button.tone-amber {
+  background: #ffffff;
+  border: 1px solid var(--glass-border);
+  color: var(--text-primary);
+}
+
+.tool-grid button:active {
+  transform: scale(0.96);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+}
+
+.tool-grid button.tone-teal:active { border-color: var(--primary-teal-active); }
+.tool-grid button.tone-blue:active { border-color: var(--accent-blue); }
+.tool-grid button.tone-orange:active { border-color: var(--accent-orange); }
+.tool-grid button.tone-purple:active { border-color: var(--accent-purple); }
+.tool-grid button.tone-amber:active { border-color: var(--accent-amber); }
+
 .tool-grid button > .icon {
-  position: absolute;
-  right: 7px;
-  top: 50%;
-  width: 18px;
-  height: 18px;
-  transform: translateY(-50%);
-  color: #9aa6b2;
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
 }
 
 .icon-bubble {
-  width: 52px;
-  height: 52px;
+  width: 48px;
+  height: 48px;
   border-radius: 999px;
   display: grid;
   place-items: center;
@@ -2603,72 +3768,77 @@ p {
 }
 
 .tone-teal {
-  color: #119f98;
-  border-color: rgba(24, 176, 168, 0.25);
-  background: linear-gradient(135deg, #f1fffe, #fbffff);
+  color: var(--primary-teal-active);
+  border: 1px solid rgba(15, 174, 166, 0.2);
+  background: linear-gradient(135deg, #f0fdfa, #ffffff);
 }
 
 .tone-blue {
-  color: #2c7ded;
-  border-color: rgba(87, 154, 255, 0.25);
-  background: linear-gradient(135deg, #f3f8ff, #fbfdff);
+  color: var(--accent-blue);
+  border: 1px solid rgba(87, 154, 255, 0.2);
+  background: linear-gradient(135deg, #eff6ff, #ffffff);
 }
 
 .tone-orange {
-  color: #f07b28;
-  border-color: rgba(244, 164, 80, 0.28);
-  background: linear-gradient(135deg, #fff8ef, #fffdfb);
+  color: var(--accent-orange);
+  border: 1px solid rgba(244, 164, 80, 0.2);
+  background: linear-gradient(135deg, #fff7ed, #ffffff);
 }
 
 .tone-purple {
-  color: #7367df;
-  border-color: rgba(144, 131, 245, 0.25);
-  background: linear-gradient(135deg, #f7f5ff, #fff);
+  color: var(--accent-purple);
+  border: 1px solid rgba(144, 131, 245, 0.2);
+  background: linear-gradient(135deg, #faf5ff, #ffffff);
 }
 
 .tone-amber {
-  color: #edaa14;
-  border-color: rgba(238, 179, 54, 0.32);
-  background: linear-gradient(135deg, #fff9e9, #fff);
+  color: var(--accent-amber);
+  border: 1px solid rgba(238, 179, 54, 0.2);
+  background: linear-gradient(135deg, #fefce8, #ffffff);
 }
 
 .progress-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
 }
 
 .progress-tile {
-  min-height: 123px;
-  border: 1px solid;
-  border-radius: 12px;
+  min-height: 110px;
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
   padding: 14px 10px 12px;
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
+  display: grid;
+  align-content: space-between;
 }
 
 .progress-tile small,
 .progress-tile em {
   display: block;
-  color: #657286;
+  color: var(--text-secondary);
   font-style: normal;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .progress-tile small {
-  margin-top: 5px;
-  font-size: 14px;
+  margin-top: 2px;
+  font-size: 13px;
 }
 
 .progress-tile b {
   display: block;
-  color: #09111f;
-  font-size: 31px;
-  line-height: 1.05;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-size: 26px;
+  line-height: 1;
+  font-weight: 800;
+  letter-spacing: -0.01em;
 }
 
 .progress-tile em {
-  margin-top: 8px;
-  font-size: 13px;
+  margin-top: 4px;
+  font-size: 11px;
   line-height: 1.2;
 }
 
@@ -2681,11 +3851,11 @@ p {
 }
 
 .profile-card {
-  margin-top: 12px;
-  padding: 12px;
-  border: 1px solid rgba(20, 177, 169, 0.22);
-  border-radius: 12px;
-  background: #f8ffff;
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(15, 174, 166, 0.18);
+  border-radius: 16px;
+  background: rgba(240, 253, 252, 0.4);
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 9px;
@@ -2694,22 +3864,23 @@ p {
 .profile-card > span {
   min-height: 58px;
   border-radius: 10px;
-  background: #fff;
+  background: #ffffff;
   display: grid;
   place-items: center;
+  box-shadow: var(--shadow-sm);
 }
 
 .profile-card small {
-  color: #657286;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: 11px;
   font-weight: 700;
 }
 
 .profile-card b {
-  color: #09111f;
-  font-size: 24px;
+  color: var(--text-primary);
+  font-size: 22px;
   line-height: 1;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .profile-dims {
@@ -2720,101 +3891,110 @@ p {
 
 .profile-dims p {
   min-height: 38px;
-  padding: 8px 9px;
+  padding: 8px 12px;
   border-radius: 10px;
-  background: #fff;
+  background: #ffffff;
   display: grid;
-  grid-template-columns: 46px 36px 1fr;
+  grid-template-columns: 50px 36px 1fr;
   align-items: center;
   gap: 8px;
+  box-shadow: var(--shadow-sm);
 }
 
 .profile-dims span {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .profile-dims b {
-  font-size: 19px;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.profile-dims small {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
 }
 
 .record-list {
-  margin-top: 12px;
+  margin-top: 14px;
   display: grid;
   gap: 8px;
 }
 
 .record-list h3 {
   margin: 0;
-  color: #101826;
-  font-size: 17px;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 800;
 }
 
 .record-list button {
   min-height: 58px;
-  padding: 10px 11px;
-  border: 1px solid rgba(213, 225, 233, 0.9);
-  border-radius: 11px;
-  background: #fff;
+  padding: 12px;
+  border: 1px solid rgba(213, 225, 233, 0.5);
+  border-radius: 12px;
+  background: #ffffff;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 9px;
   align-items: center;
   text-align: left;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-spring);
 }
 
-.record-list b,
-.record-list small {
-  display: block;
+.record-list button:active {
+  transform: scale(0.98);
 }
 
 .record-list b {
-  color: #101826;
-  font-size: 15px;
+  color: var(--text-primary);
+  font-size: 14px;
   line-height: 1.25;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .record-list small {
   margin-top: 4px;
-  color: #607086;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.35;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .record-list em {
   min-width: 48px;
-  height: 26px;
+  height: 24px;
   padding: 0 8px;
-  border-radius: 999px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
+  border-radius: 99px;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
   display: grid;
   place-items: center;
-  font-size: 12px;
+  font-size: 11px;
   font-style: normal;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .review-message,
 .review-detail > em {
-  color: #0a9a94;
+  color: var(--primary-teal-active);
   font-size: 13px;
   font-style: normal;
   font-weight: 800;
 }
 
 .review-detail {
-  margin-top: 12px;
-  padding: 12px;
-  border: 1px solid rgba(20, 177, 169, 0.24);
-  border-radius: 12px;
-  background: #f8ffff;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid rgba(15, 174, 166, 0.18);
+  border-radius: 16px;
+  background: rgba(240, 253, 252, 0.4);
   display: grid;
-  gap: 10px;
+  gap: 12px;
 }
 
 .review-detail-head {
@@ -2827,32 +4007,32 @@ p {
 .review-detail-head b,
 .review-summary b {
   display: block;
-  color: #101826;
+  color: var(--text-primary);
   font-size: 15px;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .review-detail-head small,
 .review-summary p {
   margin-top: 4px;
-  color: #607086;
+  color: var(--text-secondary);
   font-size: 13px;
-  line-height: 1.4;
-  font-weight: 650;
+  line-height: 1.45;
+  font-weight: 600;
 }
 
 .review-detail-head em {
   min-width: 52px;
-  height: 26px;
+  height: 24px;
   padding: 0 8px;
-  border-radius: 999px;
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
+  border-radius: 99px;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
   display: grid;
   place-items: center;
-  font-size: 12px;
+  font-size: 11px;
   font-style: normal;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .review-score-grid {
@@ -2864,23 +4044,24 @@ p {
 .review-score-grid p {
   min-height: 58px;
   border-radius: 10px;
-  background: #fff;
+  background: #ffffff;
   display: grid;
   place-items: center;
+  box-shadow: var(--shadow-sm);
 }
 
 .review-score-grid span,
 .review-score-grid small {
-  color: #657286;
-  font-size: 12px;
+  color: var(--text-secondary);
+  font-size: 11px;
   font-weight: 700;
 }
 
 .review-score-grid b {
-  color: #09111f;
-  font-size: 22px;
+  color: var(--text-primary);
+  font-size: 20px;
   line-height: 1;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .review-dialogue {
@@ -2891,57 +4072,63 @@ p {
 .review-detail > button {
   min-height: 42px;
   border-radius: 10px;
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #1cbdb4, #07948e);
-  box-shadow: 0 7px 15px rgba(9, 151, 144, 0.18);
+  box-shadow: 0 4px 12px rgba(9, 151, 144, 0.15);
   font-size: 14px;
-  font-weight: 900;
+  font-weight: 800;
+  transition: var(--transition-spring);
 }
 
 .review-detail > button:disabled {
-  color: #079a95;
-  background: rgba(15, 174, 166, 0.1);
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
   box-shadow: none;
+  opacity: 0.55;
+  transform: none;
 }
 
 .team-card {
-  border: 1px solid rgba(20, 177, 169, 0.26);
-  border-radius: 14px;
-  padding: 20px 14px 12px;
-  background: linear-gradient(135deg, #f2fffe, #fbffff);
+  border: 1px solid rgba(15, 174, 166, 0.15);
+  border-radius: 16px;
+  padding: 20px 16px;
+  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
   display: grid;
   grid-template-columns: 1fr 154px;
   gap: 12px;
+  box-shadow: var(--shadow-sm);
 }
 
 .team-copy h3 {
-  font-size: 22px;
-  line-height: 1.15;
-  font-weight: 900;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 800;
+  color: var(--text-primary);
 }
 
 .team-copy p {
-  margin-top: 14px;
-  color: #13223a;
-  font-size: 16px;
-  font-weight: 650;
+  margin-top: 10px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .team-copy .bar {
-  margin-top: 33px;
+  margin-top: 24px;
 }
 
 .team-copy > span {
   display: block;
-  margin-top: 13px;
-  color: #37465e;
-  font-size: 15px;
-  font-weight: 650;
+  margin-top: 12px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .team-copy > span b {
-  color: #13223a;
-  font-size: 17px;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 800;
 }
 
 .ring-box {
@@ -2955,18 +4142,19 @@ p {
   width: 106px;
   height: 106px;
   border-radius: 50%;
-  background: conic-gradient(#12a7a0 calc(var(--value) * 1%), #d7e0e2 0);
+  background: conic-gradient(var(--primary-teal-active) calc(var(--value) * 1%), #e2e8f0 0);
   display: grid;
   place-items: center;
   position: relative;
+  box-shadow: var(--shadow-sm);
 }
 
 .ring::before {
   content: '';
   position: absolute;
-  inset: 16px;
+  inset: 14px;
   border-radius: inherit;
-  background: #fff;
+  background: #ffffff;
 }
 
 .ring b,
@@ -2977,157 +4165,213 @@ p {
 
 .ring b {
   margin-top: 8px;
-  color: #13223a;
-  font-size: 27px;
+  color: var(--text-primary);
+  font-size: 24px;
   line-height: 1;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .ring small {
-  margin-top: -32px;
-  color: #4c5d73;
-  font-size: 13px;
-  font-weight: 650;
+  margin-top: -30px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
 }
 
 .ring-box button {
   min-width: 105px;
   height: 38px;
   border-radius: 9px;
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #1bbab1, #078f89);
-  box-shadow: 0 7px 16px rgba(10, 151, 144, 0.22);
-  font-size: 15px;
-  font-weight: 900;
+  box-shadow: 0 4px 12px rgba(10, 151, 144, 0.15);
+  font-size: 14px;
+  font-weight: 800;
+  transition: var(--transition-spring);
+}
+
+.ring-box button:active {
+  transform: scale(0.95);
 }
 
 .mini-stats {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 9px;
+  gap: 6px;
 }
 
 .mini-stat {
-  min-height: 57px;
-  border: 1px solid rgba(213, 225, 233, 0.85);
-  border-radius: 11px;
-  background: rgba(255, 255, 255, 0.78);
-  display: grid;
-  grid-template-columns: auto 1fr;
+  min-height: 54px;
+  border: 1px solid rgba(213, 225, 233, 0.5);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
   align-items: center;
-  gap: 9px;
-  padding: 8px;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 4px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
 .mini-stat .icon-bubble {
-  width: 38px;
-  height: 38px;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+
+.mini-stat span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
 }
 
 .mini-stat small {
   display: block;
-  color: #64748b;
-  font-size: 13px;
+  color: var(--text-secondary);
+  font-size: 11px;
   line-height: 1.1;
-  font-weight: 650;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .mini-stat b {
   display: block;
-  color: #09111f;
-  font-size: 23px;
-  line-height: 1.05;
-  font-weight: 900;
+  color: var(--text-primary);
+  font-size: 17px;
+  line-height: 1.1;
+  font-weight: 800;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .todo-list {
-  border: 1px solid #dfe8ef;
-  border-radius: 13px;
+  border: 1px solid rgba(213, 225, 233, 0.5);
+  border-radius: 14px;
   overflow: hidden;
+  box-shadow: var(--shadow-sm);
 }
 
 .todo-list button {
   width: 100%;
   min-height: 70px;
-  padding: 11px 12px;
+  padding: 11px 14px;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   gap: 12px;
-  background: #fff;
+  background: #ffffff;
   text-align: left;
 }
 
 .todo-list button + button {
-  border-top: 1px solid #dfe8ef;
+  border-top: 1px solid rgba(213, 225, 233, 0.4);
 }
 
 .todo-list .icon-bubble {
-  width: 46px;
-  height: 46px;
+  width: 44px;
+  height: 44px;
 }
 
 .todo-list em {
-  width: 30px;
-  height: 30px;
+  width: 26px;
+  height: 26px;
   border-radius: 999px;
-  color: #fff;
+  color: #ffffff;
   background: linear-gradient(135deg, #ff6363, #ef3535);
   display: grid;
   place-items: center;
-  font-size: 17px;
+  font-size: 14px;
   font-style: normal;
-  font-weight: 900;
+  font-weight: 800;
 }
 
 .suggestion {
-  margin-top: 12px;
+  margin-top: 14px;
   min-height: 62px;
-  padding: 11px 13px;
-  border: 1px solid rgba(239, 181, 54, 0.5);
+  padding: 12px 14px;
+  border: 1px solid rgba(239, 181, 54, 0.25);
   border-radius: 14px;
-  background: linear-gradient(135deg, #fffaf0, #fffdf7);
+  background: linear-gradient(135deg, rgba(255, 250, 240, 0.7), rgba(255, 255, 255, 0.95));
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-spring);
+}
+
+.suggestion:active {
+  transform: scale(0.98);
 }
 
 .suggestion .icon-bubble {
-  width: 46px;
-  height: 46px;
+  width: 44px;
+  height: 44px;
+}
+
+.build-toast {
+  position: fixed;
+  left: 50%;
+  bottom: calc(88px + env(safe-area-inset-bottom));
+  z-index: 160;
+  width: min(360px, calc(100vw - 32px));
+  transform: translateX(-50%);
+  padding: 12px 14px;
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  color: var(--text-primary);
+  background: #ffffff;
+  box-shadow: var(--shadow-lg);
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 800;
+  text-align: center;
 }
 
 .tabbar {
   position: fixed;
   left: 50%;
-  bottom: 0;
-  z-index: 5;
-  width: min(100vw, 426px);
+  bottom: 16px;
+  z-index: 99;
+  width: calc(min(100vw, 426px) - 24px);
   transform: translateX(-50%);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 2px;
-  padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
-  border-top: 1px solid rgba(220, 228, 235, 0.9);
-  background: rgba(255, 255, 255, 0.97);
-  box-shadow: 0 -5px 20px rgba(18, 31, 49, 0.04);
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(18, 31, 49, 0.08);
 }
 
 .tabbar button {
-  min-height: 47px;
-  color: #5d6674;
+  min-height: 44px;
+  color: var(--text-secondary);
   display: grid;
   justify-items: center;
   align-content: center;
   gap: 2px;
+  border-radius: 14px;
+  transition: var(--transition-spring-fast);
+}
+
+.tabbar button:active {
+  transform: scale(0.92);
 }
 
 .tabbar button.active {
-  color: #10a8a1;
+  color: var(--primary-teal-active);
+  background: var(--primary-teal-light);
 }
 
 .tabbar span {
-  font-size: 13px;
+  font-size: 11px;
   line-height: 1;
-  font-weight: 750;
+  font-weight: 700;
 }
 
 .icon {
@@ -3136,11 +4380,18 @@ p {
 
 @media (max-width: 380px) {
   .page {
-    padding-inline: 9px;
+    padding-inline: 10px;
+    padding-bottom: 96px;
+  }
+
+  .tabbar {
+    width: calc(100vw - 16px);
+    bottom: 8px;
+    border-radius: 16px;
   }
 
   .top h2 {
-    font-size: 31px;
+    font-size: 26px;
   }
 
   .task-card,
@@ -3155,6 +4406,7 @@ p {
   .task-card > button {
     position: static;
     margin-top: 8px;
+    width: 100%;
   }
 
   .mini-stats,