From 62c8b4167235bfe719a8a1d23008300511ac3947 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Thu, 23 Jul 2026 02:20:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(mobile-uni):=20=E9=87=8D=E6=9E=84=E2=80=9C?=
 =?UTF-8?q?=E6=88=91=E2=80=9D=EF=BC=88=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=EF=BC=89=E4=B8=BA=E5=8E=9F=E7=94=9FApp=E6=B2=89=E6=B5=B8?=
 =?UTF-8?q?=E5=BC=8F=E5=8D=A1=E7=89=87=E7=9C=8B=E6=9D=BF=EF=BC=8C=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8Emoji=E5=85=A8=E9=9D=A2=E9=87=87=E7=94=A8uni-icons?=
 =?UTF-8?q?=E7=9F=A2=E9=87=8F=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile-uni/src/pages/user/profile/index.vue | 727 ++++++++++++++++----
 1 file changed, 579 insertions(+), 148 deletions(-)

diff --git a/mobile-uni/src/pages/user/profile/index.vue b/mobile-uni/src/pages/user/profile/index.vue
index c03ccc56..a141922f 100644
--- a/mobile-uni/src/pages/user/profile/index.vue
+++ b/mobile-uni/src/pages/user/profile/index.vue
@@ -1,27 +1,42 @@
 <template>
   <view class="page profile-page employee-page-shell">
-    <view class="profile-head">
-      <text class="profile-eyebrow">银城物业 · 员工成长</text>
-      <text class="page-title">我</text>
-      <text class="page-subtitle">训练记录、积分与个人能力画像</text>
+    <!-- Top Hero Header Card -->
+    <view class="hero-identity-card">
+      <view class="hero-brand-bar">
+        <text class="hero-brand-name">银城物业 · 员工端</text>
+        <view class="online-tag">
+          <view class="green-dot" />
+          <text class="online-text">已登录</text>
+        </view>
+      </view>
+
+      <view class="identity-main-row">
+        <view class="avatar-box">
+          <uni-icons type="person-filled" size="26" color="#e60012" />
+        </view>
+        <view class="identity-copy">
+          <text class="identity-phone">{{ maskedPhone }}</text>
+          <view v-if="loggedIn" class="position-badge">
+            <text class="badge-text">{{ positionProfile.value }} · {{ positionProfile.heroTitle }}</text>
+          </view>
+          <text v-else class="identity-note">登录后查看训练记录和能力画像</text>
+        </view>
+        <button v-if="!loggedIn" class="primary-gradient-btn compact-login-btn" @click="goLogin">去登录</button>
+        <button v-else class="logout-pill-btn" @click="logout">
+          <text>退出</text>
+          <uni-icons type="right" size="11" color="#64748b" />
+        </button>
+      </view>
     </view>
 
-    <view v-if="message" class="status-message">{{ message }}</view>
-
-    <view class="panel identity-card">
-      <view class="identity-avatar">
-        <uni-icons type="person-filled" size="26" color="#e60012" />
-      </view>
-      <view class="identity-info">
-        <text class="identity-phone">{{ maskedPhone }}</text>
-        <text v-if="loggedIn" class="identity-position">{{ positionProfile.value }} · {{ positionProfile.heroTitle }}</text>
-        <text v-if="loggedIn" class="identity-source">岗位来自人力系统组织同步，如需调整请联系 HR</text>
-        <text v-else class="identity-source">登录后查看训练记录和能力画像</text>
-      </view>
-      <button v-if="!loggedIn" class="primary-button identity-action" @click="goLogin">去登录</button>
-      <text v-else class="identity-logout" role="button" @click="logout">退出 ›</text>
+    <!-- Error Toast Notice -->
+    <view v-if="message" class="app-toast-message">
+      <uni-icons type="info-filled" size="14" color="#d97706" />
+      <text class="toast-text">{{ message }}</text>
+      <button class="toast-close-btn" @click="message = ''">×</button>
     </view>
 
+    <!-- Supervisor Mode Notice -->
     <view v-if="supervisorLearning" class="panel supervisor-mode-panel">
       <view class="mode-copy">
         <text class="panel-title mode-title">当前为学员模式</text>
@@ -30,36 +45,45 @@
       <button class="secondary-button account-action" @click="returnToSupervisor">返回主管工作台</button>
     </view>
 
-    <view v-if="loggedIn && profile" class="panel profile-summary">
-      <text class="panel-title">成长摘要</text>
-      <view class="summary-strip">
-        <view class="summary-cell">
-          <text class="summary-value score">{{ profile.score }}</text>
-          <text class="summary-label">训练综合分</text>
-        </view>
-        <view class="summary-cell">
-          <text class="summary-value">{{ profile.completed }}</text>
-          <text class="summary-label">已训练</text>
-        </view>
-        <view class="summary-cell">
-          <text class="summary-value">{{ profile.pendingReview }}</text>
-          <text class="summary-label">待复盘</text>
-        </view>
-        <view class="summary-cell">
-          <text class="summary-value">{{ profile.trainingMinutes || 0 }}</text>
-          <text class="summary-label">分钟</text>
-        </view>
-        <view class="summary-cell">
-          <text class="summary-value level">{{ profile.aiLevel || '未评级' }}</text>
-          <text class="summary-label">等级</text>
+    <!-- 1. 成长摘要 Panel -->
+    <view v-if="loggedIn && profile" class="panel section-card profile-summary">
+      <view class="panel-head">
+        <view class="section-title">
+          <view class="section-bar" />
+          <text>成长摘要</text>
         </view>
       </view>
-      <text class="ai-score-disclaimer">AI训练综合分仅作训练参考，不等于BRD五维绩效总分，人可复核/否决</text>
+
+      <view class="summary-dash-grid">
+        <view class="dash-cell cell-score">
+          <text class="cell-value score-text">{{ profile.score }}</text>
+          <text class="cell-label">综合分</text>
+        </view>
+        <view class="dash-cell">
+          <text class="cell-value">{{ profile.completed }}</text>
+          <text class="cell-label">已训练</text>
+        </view>
+        <view class="dash-cell">
+          <text class="cell-value">{{ profile.pendingReview }}</text>
+          <text class="cell-label">待复盘</text>
+        </view>
+        <view class="dash-cell">
+          <text class="cell-value">{{ profile.trainingMinutes || 0 }}</text>
+          <text class="cell-label">分钟</text>
+        </view>
+        <view class="dash-cell cell-level">
+          <text class="cell-value level-text">{{ profile.aiLevel || '未评级' }}</text>
+          <text class="cell-label">等级</text>
+        </view>
+      </view>
+
       <view class="summary-foot">
+        <text class="ai-score-disclaimer">AI训练综合分仅作参考，不等于BRD总分，人可复核</text>
         <button class="growth-toggle" @click="showGrowthDetail = !showGrowthDetail">
-          {{ showGrowthDetail ? '收起 ›' : '展开能力详情 ›' }}
+          {{ showGrowthDetail ? '收起 ▲' : '能力详情 ▼' }}
         </button>
       </view>
+
       <view v-if="showGrowthDetail && profile.dimensions?.length" class="dimension-list">
         <view v-for="item in profile.dimensions" :key="item.label" class="dimension-row">
           <view>
@@ -88,56 +112,59 @@
       </view>
     </view>
 
-    <button v-if="loggedIn" class="panel points-entry" @click="openPoints">
-      <view class="entry-icon">
-        <uni-icons type="star-filled" size="20" color="#ffffff" />
-      </view>
-      <view class="points-entry-copy">
-        <text class="panel-title">我的积分</text>
-        <text class="points-entry-desc">奖励积分与学习学分明细</text>
-      </view>
-      <text class="points-entry-arrow">›</text>
-    </button>
+    <!-- 2. 功能入口 Menu Group -->
+    <view v-if="loggedIn" class="panel section-card menu-group-card">
+      <button class="menu-item-row" @click="openPoints">
+        <view class="menu-icon-box box-amber">
+          <uni-icons type="star-filled" size="18" color="#d97706" />
+        </view>
+        <view class="menu-item-copy">
+          <text class="menu-item-title">我的积分</text>
+          <text class="menu-item-desc">奖励积分与学习学分明细</text>
+        </view>
+        <uni-icons type="right" size="14" color="#94a3b8" />
+      </button>
 
-    <view v-if="loggedIn" class="panel feature-entries">
-      <text class="panel-title">我的助手</text>
-      <button class="feature-entry" @click="openMemories">
-        <view class="entry-icon">
-          <uni-icons type="auth-filled" size="20" color="#ffffff" />
+      <button class="menu-item-row" @click="openMemories">
+        <view class="menu-icon-box box-blue">
+          <uni-icons type="folder-add" size="18" color="#2d80ff" />
         </view>
-        <view class="feature-entry-copy">
-          <text class="feature-entry-title">我的资料与记忆</text>
-          <text class="feature-entry-desc">待确认 · 私人记录 · 项目跟进</text>
+        <view class="menu-item-copy">
+          <text class="menu-item-title">我的资料与记忆</text>
+          <text class="menu-item-desc">待确认 · 私人记录 · 项目跟进</text>
         </view>
-        <text class="points-entry-arrow">›</text>
+        <uni-icons type="right" size="14" color="#94a3b8" />
       </button>
-      <button class="feature-entry" @click="openWorkResults">
-        <view class="entry-icon">
-          <uni-icons type="calendar-filled" size="20" color="#ffffff" />
+
+      <button class="menu-item-row" @click="openWorkResults">
+        <view class="menu-icon-box box-emerald">
+          <uni-icons type="calendar-filled" size="18" color="#10b981" />
         </view>
-        <view class="feature-entry-copy">
-          <text class="feature-entry-title">我的工作记录</text>
-          <text class="feature-entry-desc">今日成果 · 处理状态 · 原始来源</text>
+        <view class="menu-item-copy">
+          <text class="menu-item-title">成果投稿与记录</text>
+          <text class="menu-item-desc">今日成果 · 处理状态 · 原始来源</text>
         </view>
-        <text class="points-entry-arrow">›</text>
+        <uni-icons type="right" size="14" color="#94a3b8" />
       </button>
-      <button class="feature-entry" @click="openPracticeSummary">
-        <view class="entry-icon">
-          <uni-icons type="list" size="20" color="#ffffff" />
+
+      <button class="menu-item-row" @click="openPracticeSummary">
+        <view class="menu-icon-box box-purple">
+          <uni-icons type="compose" size="18" color="#8b5cf6" />
         </view>
-        <view class="feature-entry-copy">
-          <text class="feature-entry-title">我的训练概况</text>
-          <text class="feature-entry-desc">问师傅帮你汇总近期训练情况</text>
+        <view class="menu-item-copy">
+          <text class="menu-item-title">我的训练概况</text>
+          <text class="menu-item-desc">问师傅帮您汇总近期训练情况</text>
         </view>
-        <text class="points-entry-arrow">›</text>
+        <uni-icons type="right" size="14" color="#94a3b8" />
       </button>
     </view>
 
-    <view v-if="loggedIn && evidence" class="panel evidence-panel">
+    <!-- 3. 成长证据包 Panel -->
+    <view v-if="loggedIn && evidence" class="panel section-card evidence-panel">
       <view class="fold-head">
         <text class="panel-title">成长证据包（待人工复核）</text>
         <button class="fold-toggle inline" @click="showEvidence = !showEvidence">
-          {{ showEvidence ? '收起 ›' : '展开 ›' }}
+          {{ showEvidence ? '收起 ▲' : '展开 ▼' }}
         </button>
       </view>
       <view class="evidence-strip">
@@ -155,64 +182,78 @@
         </view>
       </view>
       <template v-if="showEvidence">
-      <view class="evidence-grid">
-        <view class="evidence-metric">
-          <text>{{ evidence.currentLevel }}</text>
-          <text>参考等级</text>
+        <view class="evidence-grid">
+          <view class="evidence-metric">
+            <text>{{ evidence.currentLevel }}</text>
+            <text>参考等级</text>
+          </view>
+          <view class="evidence-metric">
+            <text>{{ evidence.trainingMinutes }}</text>
+            <text>训练分钟</text>
+          </view>
+          <view class="evidence-metric">
+            <text>{{ evidence.contribution }}</text>
+            <text>人工贡献分</text>
+          </view>
         </view>
-        <view class="evidence-metric">
-          <text>{{ evidence.trainingMinutes }}</text>
-          <text>训练分钟</text>
+        <view v-if="evidence.evidenceItems?.length" class="evidence-list">
+          <text v-for="item in evidence.evidenceItems" :key="item" class="evidence-item">{{ item }}</text>
         </view>
-        <view class="evidence-metric">
-          <text>{{ evidence.contribution }}</text>
-          <text>人工贡献分</text>
-        </view>
-      </view>
-      <view v-if="evidence.evidenceItems?.length" class="evidence-list">
-        <text v-for="item in evidence.evidenceItems" :key="item" class="evidence-item">{{ item }}</text>
-      </view>
       </template>
     </view>
 
-    <view v-if="loggedIn" class="panel history-panel">
-      <view class="history-head">
-        <text class="panel-title">最近练过</text>
-        <button class="ghost-button refresh-button" :disabled="loading" @click="loadData">刷新</button>
+    <!-- 4. 最近对练 Panel -->
+    <view v-if="loggedIn" class="panel section-card history-panel">
+      <view class="panel-head">
+        <view class="section-title">
+          <view class="section-bar" />
+          <text>最近对练</text>
+        </view>
+        <button class="icon-refresh-btn" :disabled="loading" @click="loadData" title="刷新">
+          <uni-icons type="refresh" size="16" color="#64748b" :class="{ spinning: loading }" />
+        </button>
       </view>
+
       <view v-if="history.length" class="history-list">
         <view
           v-for="item in visibleHistory"
           :key="item.id || item.sessionId || item.time"
-          class="history-row history-row-clickable"
+          class="history-row-item"
           @click="openHistory(item.id)"
         >
-          <view class="entry-icon small">
-            <uni-icons type="compose" size="16" color="#ffffff" />
+          <view class="menu-icon-box box-blue small-box">
+            <uni-icons type="paperplane-filled" size="14" color="#2d80ff" />
           </view>
           <view class="history-main">
             <text class="history-title">{{ item.scene }} · {{ historyMark(item) }}</text>
             <text class="history-desc">{{ item.time }}</text>
           </view>
-          <text class="points-entry-arrow">›</text>
+          <uni-icons type="right" size="14" color="#94a3b8" />
         </view>
-        <button v-if="history.length > 3" class="history-more" @click="showAllHistory = !showAllHistory">
-          {{ showAllHistory ? '收起 ›' : `查看全部 ${history.length} 条 ›` }}
+        <button v-if="history.length > 3" class="fold-toggle" @click="showAllHistory = !showAllHistory">
+          {{ showAllHistory ? '收起 ▲' : `展开全部 ${history.length} 条 ▼` }}
         </button>
       </view>
-      <view v-else class="empty">暂无训练记录</view>
+      <view v-else-if="!loading" class="app-empty-state">
+        <view class="empty-icon-circle circle-blue">
+          <uni-icons type="compose" size="22" color="#2d80ff" />
+        </view>
+        <text class="empty-title">暂无训练记录</text>
+        <text class="empty-desc">去“练”模块完成一次实操对练吧！</text>
+      </view>
     </view>
 
-    <view class="panel display-panel">
+    <!-- 5. 显示与辅助 Panel -->
+    <view class="panel section-card display-panel">
       <button class="display-heading" @click="showFontOptions = !showFontOptions">
-        <view class="entry-icon">
-          <text class="display-icon-text">Aa</text>
+        <view class="menu-icon-box box-slate">
+          <uni-icons type="font" size="18" color="#475569" />
         </view>
         <view class="display-heading-copy">
-          <text class="panel-title">显示与辅助</text>
-          <text class="display-current">字体大小 · {{ currentFontSizeLabel }}</text>
+          <text class="menu-item-title">显示与辅助</text>
+          <text class="menu-item-desc">字体大小 · {{ currentFontSizeLabel }}</text>
         </view>
-        <text class="display-toggle">{{ showFontOptions ? '收起 ›' : '调整 ›' }}</text>
+        <text class="display-toggle">{{ showFontOptions ? '收起 ▲' : '调整 ▼' }}</text>
       </button>
       <template v-if="showFontOptions">
         <view class="font-size-options" role="group" aria-label="字体大小">
@@ -954,72 +995,366 @@ onShow(() => {
   border: none;
 }
 
-.feature-entries {
+.profile-page {
+  padding: 12px 16px 36px;
+  background: #f7f8fa;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Hero Identity Card */
+.hero-identity-card {
+  padding: 18px 16px;
+  border-radius: 20px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
+}
+
+.hero-brand-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.hero-brand-name {
+  font-size: 13px;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: -0.2px;
+}
+
+.online-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #edf7f0;
+}
+
+.green-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
+}
+
+.online-text {
+  font-size: 10px;
+  font-weight: 700;
+  color: #10b981;
+}
+
+.identity-main-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #fff4f4;
+  border: 2px solid #ffe2e2;
+  flex: none;
+}
+
+.identity-copy {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  flex: 1;
+  min-width: 0;
 }
 
-.feature-entry {
+.identity-phone {
+  font-size: 18px;
+  font-weight: 900;
+  color: #1a1a1a;
+  line-height: 1.2;
+}
+
+.position-badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: #fef2f2;
+}
+
+.badge-text {
+  font-size: 11px;
+  font-weight: 700;
+  color: #e60012;
+}
+
+.identity-note {
+  font-size: 11px;
+  color: #8a8d93;
+}
+
+.logout-pill-btn {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+  flex: none;
+  margin: 0;
+}
+
+.logout-pill-btn::after { border: none; }
+
+/* Toast Message */
+.app-toast-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  background: #fff8e6;
+  border: 1px solid #fef3c7;
+}
+
+.toast-text {
+  flex: 1;
+  font-size: 12px;
+  color: #d97706;
+  font-weight: 600;
+}
+
+.toast-close-btn {
+  border: none;
+  background: transparent;
+  color: #d97706;
+  font-size: 16px;
+  padding: 0 4px;
+  margin: 0;
+  line-height: 1;
+}
+
+.toast-close-btn::after { border: none; }
+
+/* Section Card */
+.section-card {
+  padding: 16px;
+  border-radius: 20px;
+  background: #ffffff;
+  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #1a1a1a;
+  font-size: 17px;
+  font-weight: 800;
+  flex: 1;
+  min-width: 0;
+}
+
+.section-bar {
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+  background: var(--employee-primary, #e60012);
+  flex: none;
+}
+
+/* Summary Dash Grid */
+.summary-dash-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.dash-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 4px;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.dash-cell.cell-score {
+  background: #fff4f4;
+  border: 1px solid #ffe2e2;
+}
+
+.dash-cell.cell-level {
+  background: #eff6ff;
+  border: 1px solid #dbeafe;
+}
+
+.cell-value {
+  font-size: 16px;
+  font-weight: 900;
+  color: #1a1a1a;
+}
+
+.cell-value.score-text { color: #e60012; font-size: 18px; }
+.cell-value.level-text { color: #2d80ff; font-size: 13px; }
+
+.cell-label {
+  font-size: 10px;
+  color: #64748b;
+  font-weight: 600;
+  margin-top: 2px;
+}
+
+/* Menu Group Card */
+.menu-group-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 16px;
+}
+
+.menu-item-row {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
-  margin: 0;
-  padding: 12px 4px;
+  padding: 12px 0;
   border: none;
   background: transparent;
   text-align: left;
-  line-height: 1.3;
+  margin: 0;
+  transition: opacity 0.15s ease;
 }
 
-.feature-entry::after {
-  border: none;
+.menu-item-row + .menu-item-row {
+  border-top: 1px solid #f1f5f9;
 }
 
-.feature-entry + .feature-entry {
-  border-top: 1px solid #f2f3f5;
-}
+.menu-item-row::after { border: none; }
 
-.entry-icon {
-  flex-shrink: 0;
+.menu-icon-box {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: var(--brand);
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  flex: none;
 }
 
-.entry-icon.small {
+.menu-icon-box.small-box {
   width: 32px;
   height: 32px;
-  border-radius: 9px;
+  border-radius: 10px;
 }
 
-.display-icon-text {
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 900;
-}
+.box-amber { background: #fff8e6; }
+.box-blue { background: #eff6ff; }
+.box-emerald { background: #edf7f0; }
+.box-purple { background: #f3e8ff; }
+.box-slate { background: #f1f5f9; }
 
-.feature-entry-copy {
-  flex: 1;
+.menu-item-copy {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex: 1;
+  min-width: 0;
 }
 
-.feature-entry-title {
-  color: #18202b;
+.menu-item-title {
   font-size: 15px;
-  font-weight: 700;
+  font-weight: 800;
+  color: #1a1a1a;
 }
 
-.feature-entry-desc {
-  color: #8a93a0;
-  font-size: 12px;
+.menu-item-desc {
+  font-size: 11px;
+  color: #8a8d93;
+  font-weight: 500;
+}
+
+/* History Row Item */
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.history-row-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+}
+
+.history-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.history-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: #1a1a1a;
+}
+
+.history-desc {
+  font-size: 11px;
+  color: #8a8d93;
+}
+
+/* Refresh & Fold Buttons */
+.icon-refresh-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  border: none;
+  padding: 0;
+  flex: none;
+}
+
+.spinning {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .fold-toggle {
@@ -1027,19 +1362,115 @@ onShow(() => {
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 36px;
-  margin: 10px 0 0;
-  padding: 0;
+  height: 36px;
+  margin-top: 6px;
   border: none;
-  border-top: 1px dashed #eceff2;
   background: transparent;
-  color: #6b7480;
-  font-size: 13px;
-  line-height: 1.3;
+  color: #8a8d93;
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.fold-toggle::after {
+.fold-toggle::after { border: none; }
+
+.app-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 16px;
+  text-align: center;
+}
+
+.empty-icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #eff6ff;
+  margin-bottom: 8px;
+}
+
+.empty-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: #1a1a1a;
+}
+
+.empty-desc {
+  font-size: 12px;
+  color: #8a8d93;
+  margin-top: 4px;
+}
+
+/* Display & Accessibility Panel */
+.display-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 4px 0;
   border: none;
+  background: transparent;
+  text-align: left;
+  margin: 0;
+}
+
+.display-heading::after { border: none; }
+
+.display-heading-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.display-toggle {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.font-size-options {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.font-size-option {
+  flex: 1;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.font-size-option.active {
+  border-color: #e60012;
+  background: #fff4f4;
+  color: #e60012;
+}
+
+.font-size-option::after { border: none; }
+
+.display-note {
+  display: block;
+  margin-top: 8px;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.feature-entry-desc {
+  color: #8a93a0;
+  font-size: 12px;
 }
 
 .fold-toggle.inline {