feat: v1.3.0 差异化重构——星图点亮体系

P0 修复：
- 详情页正文渲染（content 分段），71 条知识不再空白
- 问答页去登录墙：游客每日 3 次（IP 限流），登录后每日 5 次
- 修正问答配额为真正的每日重置语义

点亮闭环：
- KnowledgeLit 模型 + 服务端判题（POST /:id/quiz，答案不下发）
- /api/knowledge/stats 星域统计 + 点亮进度 + streak + litIds
- AI 批量生成 71 条读后检测题（scripts/generate-quiz.js）

设计系统 2.0：
- 70 个统一线性图标替换全部 emoji 图标
- 主题 token mixin 化，修复 H5 暗色级联 bug，MP 跟随系统（darkmode）
- 首页星域导航（进度环）、我的页学习者档案、星域列表页重写
- 硬编码色清理，误植 map 页移除

服务端加固：
- trust proxy 真实 IP、错误信息脱敏、ask 独立限流、无效 ObjectId 404
- seo.js ESM→CJS（修复容器启动）、AI 导师"维度精灵"人格化

client/src/pages/profile/profile.vue

@@ -2,7 +2,7 @@
   <view class="page-profile page-layout">
     <view class="status-bar-placeholder"></view>
 
-    <!-- 用户信息 -->
+    <!-- 学习者档案头 -->
     <view class="profile-card">
       <view class="profile-avatar">
         <image
@@ -11,14 +11,48 @@
           class="avatar-img"
           mode="aspectFill"
         />
-        <text v-else class="avatar-text">
-          {{ (userStore.userInfo?.nickName || '用').charAt(0) }}
-        </text>
+        <view v-else class="avatar-placeholder">
+          <AppIcon name="planet-white" :size="26" />
+        </view>
+      </view>
+      <view class="profile-main">
+        <text class="profile-name">{{ userStore.userInfo?.nickName || '探索者' }}</text>
+        <text class="profile-sub">{{ profileSubText }}</text>
+      </view>
+      <view class="streak-chip" v-if="stats && stats.streak > 0">
+        <AppIcon name="flame" :size="13" />
+        <text>{{ stats.streak }} 天</text>
+      </view>
+    </view>
+
+    <!-- 学习数据 -->
+    <view class="stats-row">
+      <view class="stat-tile" @click="goProgress">
+        <text class="stat-num">{{ stats?.totalLit || 0 }}</text>
+        <text class="stat-label">点亮星球</text>
+      </view>
+      <view class="stat-tile">
+        <text class="stat-num">{{ stats?.streak || 0 }}</text>
+        <text class="stat-label">连续天数</text>
+      </view>
+      <view class="stat-tile" @click="goFavorites">
+        <text class="stat-num">{{ collectedCount }}</text>
+        <text class="stat-label">收藏知识</text>
+      </view>
+    </view>
+
+    <!-- 五星域点亮进度 -->
+    <view class="dims-progress" v-if="stats">
+      <view v-for="dim in dimensions" :key="dim.id" class="dim-row" @click="goDim(dim.id)">
+        <view class="dim-dot" :style="{ background: dim.iconBg }">
+          <AppIcon :name="dim.icon" :size="13" />
+        </view>
+        <text class="dim-name">{{ dim.name }}</text>
+        <view class="dim-bar">
+          <view class="dim-bar-fill" :style="{ width: dimPercent(dim.id) + '%', background: dim.color }"></view>
+        </view>
+        <text class="dim-frac">{{ stats.litByDim?.[dim.id] || 0 }}/{{ byDim[dim.id] || 0 }}</text>
       </view>
-      <text class="profile-name">{{ userStore.userInfo?.nickName || '游客' }}</text>
-      <text class="profile-level">
-        {{ subscriptionBadge }} · 已收藏 {{ collectedCount }} 篇
-      </text>
     </view>
 
     <!-- 订阅卡片 -->
@@ -26,14 +60,11 @@
       <view class="plan-info">
         <text class="plan-title">{{ planTitle }}</text>
         <text class="plan-desc">{{ planDesc }}</text>
-        <!-- 进度条（订阅到期倒计时） -->
         <view class="plan-progress" v-if="userStore.subInfo">
           <view class="progress-track">
             <view class="progress-fill" :style="{ width: planPercent + '%' }"></view>
           </view>
-          <text class="progress-text">
-            {{ planExpiryText }}
-          </text>
+          <text class="progress-text">{{ planExpiryText }}</text>
         </view>
       </view>
       <view class="plan-btn" :class="{ disabled: userStore.isSubscribed }">
@@ -42,55 +73,52 @@
     </view>
 
     <!-- AI 问答配额 -->
-    <view class="quota-card" @click="goChat" v-if="userStore.isLoggedIn">
-      <text class="quota-card-title">🤖 AI 问答配额</text>
+    <view class="quota-card" @click="goChat" v-if="userStore.isLoggedIn && quotaInfo">
+      <view class="quota-head">
+        <AppIcon name="chat" :size="15" />
+        <text class="quota-card-title">AI 问答 · 今日</text>
+      </view>
       <view class="quota-bar">
         <view class="quota-fill" :style="{ width: quotaPercent + '%' }"></view>
       </view>
-      <text class="quota-text">
-        {{ quotaUsed }} / {{ quotaTotal }}
-        <text class="quota-note">今日使用</text>
-      </text>
-      <text class="quota-share" @click.stop="goShare">🎁 分享得次数</text>
+      <view class="quota-foot">
+        <text class="quota-text">剩余 {{ quotaInfo.remainingQuota }} 次</text>
+        <text class="quota-share" @click.stop="goShare">分享 +5 次</text>
+      </view>
     </view>
 
     <!-- 菜单列表 -->
     <view class="menu-section">
       <view class="menu-item" @click="goFavorites">
-        <view class="m-icon" style="background:rgba(179,136,255,0.1);color:#b388ff">⭐</view>
+        <view class="m-icon" style="background:var(--dim1-bg)"><AppIcon name="star" :size="16" /></view>
         <text class="m-label">我的收藏</text>
         <text class="m-badge">{{ collectedCount }}</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
       <view class="menu-item" @click="goProgress">
-        <view class="m-icon" style="background:rgba(77,208,225,0.1);color:#4dd0e1">📊</view>
+        <view class="m-icon" style="background:var(--dim2-bg)"><AppIcon name="rocket" :size="16" /></view>
         <text class="m-label">学习进度</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
       <view class="menu-item" @click="goAchievements">
-        <view class="m-icon" style="background:rgba(77,182,172,0.1);color:#4db6ac">🏆</view>
+        <view class="m-icon" style="background:var(--dim4-bg)"><AppIcon name="trophy" :size="16" /></view>
         <text class="m-label">成就</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
       <view class="menu-item" @click="goLeaderboard">
-        <view class="m-icon" style="background:rgba(255,167,38,0.1);color:#ffa726">🥇</view>
+        <view class="m-icon" style="background:var(--dim3-bg)"><AppIcon name="sparkle" :size="16" /></view>
         <text class="m-label">排行榜</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
       <view class="menu-item" @click="goFeedback">
-        <view class="m-icon" style="background:rgba(102,187,106,0.1);color:#66bb6a">💬</view>
+        <view class="m-icon" style="background:var(--dim5-bg)"><AppIcon name="feedback" :size="16" /></view>
         <text class="m-label">意见反馈</text>
-        <text class="m-arrow">→</text>
-      </view>
-      <view class="menu-item" @click="goAbout">
-        <view class="m-icon" style="background:rgba(255,213,79,0.1);color:#ffd54f">ℹ️</view>
-        <text class="m-label">关于 AI 维度</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
       <view class="menu-item" @click="goSettings">
-        <view class="m-icon" style="background:rgba(239,83,80,0.1);color:#ef5350">⚙️</view>
+        <view class="m-icon" style="background:var(--bg-tertiary)"><AppIcon name="settings-gray" :size="16" /></view>
         <text class="m-label">设置</text>
-        <text class="m-arrow">→</text>
+        <AppIcon name="arrow-gray" :size="12" />
       </view>
     </view>
 
@@ -99,42 +127,98 @@
       <view class="action-btn primary" @click="goLogin">
         <text>微信一键登录</text>
       </view>
-      <!-- 未登录：提供显著有效的「拒绝/暂不登录」入口，避免强制登录 -->
       <view class="action-btn ghost" @click="goBrowse">
         <text>暂不登录，先体验</text>
       </view>
     </view>
     <view class="action-btn logout" v-else @click="handleLogout">
-     <text>退出登录</text>
+      <text>退出登录</text>
     </view>
 
-    <text class="version">宇之然 AI 维度 v1.0.0</text>
+    <text class="version">宇之然 AI 维度 v{{ versionText }}</text>
   </view>
 </template>
 
 <script setup>
 import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
-
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { knowledgeApi, aiChatApi } from '@/utils/api'
+import { DIMENSIONS } from '@/utils/dimensions'
+import AppIcon from '@/components/AppIcon.vue'
+
+const VERSION = '1.3.0'
+const SUB_GUEST = '游客 · 点亮进度保存在本机，登录后同步'
+const SUB_USER = '已点亮 {n} 颗星球 · 连续 {d} 天'
+const PLAN_FREE = '✦ 免费版'
+const PLAN_DESC_FREE = '每日 5 次 AI 问答 · 答对检测题点亮星球'
 
 const userStore = useUserStore()
+const dimensions = DIMENSIONS
 
-// 已收藏数量
 const collectedCount = ref(0)
+const stats = ref(null)
+const byDim = ref({})
+const quotaInfo = ref(null)
+
+const versionText = VERSION
+
+const profileSubText = computed(() => {
+  if (!userStore.isLoggedIn) return SUB_GUEST
+  if (!stats.value) return '知识星图探索中'
+  return `已点亮 ${stats.value.totalLit} 颗星球 · 连续 ${stats.value.streak} 天`
+})
+
+const planTitle = computed(() =>
+  userStore.isSubscribed ? `✦ ${userStore.subscriptionLevel?.toUpperCase() || 'PRO'} 会员` : PLAN_FREE
+)
+const planDesc = computed(() =>
+  userStore.isSubscribed ? '全量知识解锁 · AI 问答无限次' : PLAN_DESC_FREE
+)
+const planBtnText = computed(() => {
+  if (userStore.isLoggedIn && userStore.isSubscribed) return '已订阅'
+  if (userStore.isLoggedIn) return '升级 Pro'
+  return '登录后升级'
+})
+
+const planPercent = computed(() => {
+  const sub = userStore.subInfo
+  if (!sub?.expiresAt || !sub?.startedAt) return 100
+  const total = new Date(sub.expiresAt) - new Date(sub.startedAt)
+  const passed = Date.now() - new Date(sub.startedAt)
+  if (total <= 0) return 100
+  return Math.min(100, Math.max(0, Math.round((passed / total) * 100)))
+})
+
+const planExpiryText = computed(() => {
+  if (!userStore.subInfo?.expiresAt) return ''
+  const diffDays = Math.ceil((new Date(userStore.subInfo.expiresAt) - Date.now()) / 86400000)
+  return diffDays <= 0 ? '已过期' : `${diffDays} 天后到期`
+})
+
+const quotaPercent = computed(() => {
+  if (!quotaInfo.value) return 0
+  const total = (quotaInfo.value.freeQuota || 5) + (quotaInfo.value.sharedQuota || 0)
+  if (!total) return 0
+  return Math.round((quotaInfo.value.remainingQuota / total) * 100)
+})
 
 onMounted(() => {
+  loadStats()
   if (userStore.isLoggedIn) {
-    loadUserInfo()
+    userStore.fetchMe()
     loadCollected()
+    loadQuota()
   }
 })
 
-async function loadUserInfo() {
-  await userStore.fetchMe()
-  if (userStore.token) {
-    await userStore.fetchQuota(userStore.token)
+async function loadStats() {
+  try {
+    const data = await knowledgeApi.stats(userStore.isLoggedIn ? userStore.token : '')
+    stats.value = data.user
+    byDim.value = data.byDim || {}
+  } catch (e) {
+    // 游客或失败：不显示进度区
   }
 }
 
@@ -148,422 +232,393 @@ async function loadCollected() {
   }
 }
 
-// 订阅信息
-const planTitle = computed(() => {
-  if (userStore.isSubscribed) {
-    return `✦ ${userStore.subscriptionLevel.toUpperCase()} 会员`
-  }
-  return '✦ 免费版'
-})
-
-const planDesc = computed(() => {
-  if (userStore.isSubscribed) {
-    return '全量知识解锁 · AI 问答无限次'
-  }
-  return '每日 5 次免费 AI 问答 · 升级解锁全部知识'
-})
-
-const planBtnText = computed(() => {
-  if (userStore.isLoggedIn && userStore.isSubscribed) return '已订阅'
-  if (userStore.isLoggedIn) return '升级 Pro'
-  return '登录后升级'
-})
-
-const planExpiryText = computed(() => {
-  if (!userStore.subInfo?.expiresAt) return ''
-  const expires = new Date(userStore.subInfo.expiresAt)
-  const now = new Date()
-  const diffDays = Math.ceil((expires - now) / (1000 * 60 * 60 * 24))
-  if (diffDays <= 0) return '已过期'
-  return `${diffDays} 天后到期`
-})
-
-const planPercent = computed(() => {
-  if (!userStore.subInfo?.expiresAt || !userStore.subInfo?.startDate) return 0
-  const start = new Date(userStore.subInfo.startDate).getTime()
-  const expires = new Date(userStore.subInfo.expiresAt).getTime()
-  const now = Date.now()
-  const total = expires - start
-  const elapsed = now - start
-  return Math.min(100, Math.max(0, (elapsed / total) * 100))
-})
-
-// 配额
-const quotaPercent = computed(() => {
-  const q = userStore.quota
-  if (!q) return 0
-  const remaining = q.remainingQuota || 0
-  const used = q.usedQuota || q.dailyUsed || 0
-  const total = q.freeQuota || remaining + used
-  return total > 0 ? Math.round((used / total) * 100) : 0
-})
-
-const quotaUsed = computed(() => userStore.quota?.dailyUsed || userStore.quota?.usedQuota || 0)
-const quotaTotal = computed(() => {
-  const q = userStore.quota
-  return (q?.freeQuota || 5) + (q?.sharedQuota || 0)
-})
-
-const subscriptionBadge = computed(() => {
-  if (userStore.isSubscribed) {
-    return userStore.subscriptionLevel.toUpperCase()
-  }
-  return '免费用户'
-})
-
-function goLogin() {
-  uni.navigateTo({ url: '/pages/login/login' })
+async function loadQuota() {
+  try {
+    quotaInfo.value = await aiChatApi.quota(userStore.token)
+  } catch (e) {}
 }
 
-/** 仅浏览：未登录用户可跳过登录直接使用首页 */
-function goBrowse() {
-  uni.switchTab({ url: '/pages/index/index' })
+function dimPercent(dimId) {
+  const total = byDim.value[dimId] || 0
+  if (!total) return 0
+  return Math.round(((stats.value?.litByDim?.[dimId] || 0) / total) * 100)
 }
 
-function handleLogout() {
-  uni.showModal({
-    title: '退出登录',
-    content: '确定退出当前账号吗？',
-    success: (res) => {
-      if (res.confirm) {
-        userStore.logout()
-        collectedCount.value = 0
-        uni.showToast({ title: '已退出', icon: 'success' })
-      }
-    }
-  })
+function goDim(id) {
+  uni.navigateTo({ url: `/pages/dimension/dimension?id=${id}` })
 }
 
+async function handleLogout() {
+  const res = await uni.showModal({ title: '退出登录', content: '确定退出当前账号？' })
+  if (res.confirm) {
+    userStore.logout()
+    stats.value = null
+    uni.showToast({ title: '已退出', icon: 'none' })
+  }
+}
+
+function goLogin() { uni.navigateTo({ url: '/pages/login/login' }) }
+function goBrowse() { uni.switchTab({ url: '/pages/index/index' }) }
+function goChat() { uni.switchTab({ url: '/pages/chat/chat' }) }
+function goFavorites() { uni.navigateTo({ url: '/pages/favorites/favorites' }) }
+function goProgress() { uni.navigateTo({ url: '/pages/progress/progress' }) }
+function goAchievements() { uni.navigateTo({ url: '/pages/achievements/achievements' }) }
+function goLeaderboard() { uni.navigateTo({ url: '/pages/leaderboard/leaderboard' }) }
+function goFeedback() { uni.navigateTo({ url: '/pages/feedback/feedback' }) }
+function goSettings() { uni.navigateTo({ url: '/pages/settings/settings' }) }
 function goPayment() {
   if (!userStore.isLoggedIn) {
-    goLogin()
+    uni.navigateTo({ url: '/pages/login/login' })
     return
   }
-  if (userStore.isSubscribed) return
   uni.navigateTo({ url: '/pages/payment/payment' })
 }
 
-function goChat() {
-  uni.switchTab({ url: '/pages/chat/chat' })
-}
-
 function goShare() {
+  if (!userStore.token) return
+  uni.showShareMenu({ withShareTicket: true })
   aiChatApi.shareGain(userStore.token).then(() => {
-    uni.showToast({ title: '已记录分享', icon: 'success' })
-    if (userStore.token) userStore.fetchQuota(userStore.token)
-  }).catch(() => {
-    uni.showToast({ title: '已记录分享', icon: 'success' })
-  })
+    uni.showToast({ title: '已记录分享 +5 次', icon: 'success' })
+    loadQuota()
+  }).catch(() => {})
 }
 
-function goFavorites() {
-  uni.navigateTo({ url: '/pages/favorites/favorites' })
-}
-
-function goProgress() {
-  uni.navigateTo({ url: '/pages/progress/progress' })
-}
-
-function goAchievements() {
-  uni.navigateTo({ url: '/pages/achievements/achievements' })
-}
-
-function goLeaderboard() {
-  uni.navigateTo({ url: '/pages/leaderboard/leaderboard' })
-}
-
-function goFeedback() {
-  uni.navigateTo({ url: '/pages/feedback/feedback' })
-}
-
-function goAbout() {
-  uni.showModal({
-    title: '关于',
-    content: '宇之然 AI 维度\n从 5 个维度系统理解人工智能\n© 2026 宇之然',
-    showCancel: false
-  })
-}
-
-function goSettings() {
-  uni.navigateTo({ url: '/pages/settings/settings' })
-}
-
-// 微信小程序分享
 // #ifdef MP-WEIXIN
 onShareAppMessage(() => ({
-  title: 'AI 维度 - 你的AI知识助手',
+  title: '我在 AI 维度点亮了知识星球，来一起探索',
   path: '/pages/index/index'
 }))
+onShareTimeline(() => ({
+  title: 'AI 维度 · 点亮你的知识星球'
+}))
 // #endif
 </script>
 
 <style lang="scss" scoped>
 .page-profile {
   min-height: 100vh;
-  padding: 0 20px 40px;
   background: var(--bg-primary);
 }
 
 .status-bar-placeholder { height: 44px; }
 
-// 用户卡片
 .profile-card {
-  text-align: center;
-  padding: 20px 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 0 16px;
 }
 
 .profile-avatar {
-  width: 72px;
-  height: 72px;
+  width: 62px; height: 62px;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(124, 77, 255, 0.3), rgba(0, 188, 212, 0.15));
-  border: 2px solid rgba(124, 77, 255, 0.2);
-  margin: 0 auto 14px;
+  flex-shrink: 0;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 40px rgba(124, 77, 255, 0.1);
-  overflow: hidden;
-}
-
-.avatar-img {
-  width: 100%;
-  height: 100%;
-}
-
-.avatar-text {
-  font-size: 28px;
-  font-weight: 600;
-  color: white;
+
+  .avatar-img { width: 100%; height: 100%; }
+  .avatar-placeholder {
+    width: 100%; height: 100%;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--color-brand), #8b5cf6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
+.profile-main { flex: 1; min-width: 0; }
 .profile-name {
-  font-size: 18px;
-  color: var(--text-primary);
-  font-weight: 600;
   display: block;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
 }
-
-.profile-level {
+.profile-sub {
+  display: block;
   font-size: 12px;
   color: var(--text-tertiary);
-  margin-top: 4px;
-  display: block;
+  line-height: 1.5;
 }
 
-// 订阅卡片
-.plan-card {
-  border-radius: 18px;
-  padding: 20px;
-  margin-bottom: 16px;
+.streak-chip {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), rgba(0, 0, 0, 0.2));
-  border: 1px solid rgba(124, 77, 255, 0.12);
-  position: relative;
-  overflow: hidden;
-}
-
-.plan-info { flex: 1; }
-
-.plan-title {
-  font-size: 16px;
-  color: var(--text-primary);
-  font-weight: 600;
-  display: block;
-}
-
-.plan-desc {
+  gap: 4px;
+  padding: 6px 12px;
+  border-radius: var(--radius-full);
+  background: rgba(229, 28, 28, 0.08);
+  border: 1px solid rgba(229, 28, 28, 0.15);
   font-size: 12px;
-  color: var(--text-tertiary);
-  margin-top: 4px;
-  display: block;
+  font-weight: 700;
+  color: var(--dim5-color);
+  flex-shrink: 0;
 }
 
-.plan-progress {
-  margin-top: 10px;
+/* 学习数据 */
+.stats-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
 }
-
-.progress-track {
-  height: 3px;
-  background: var(--glass-bg);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.plan-progress .progress-track {
-  margin-top: 10px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--dim1-color), var(--dim3-color));
-  border-radius: 2px;
-}
-
-.progress-text {
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 6px;
-  display: block;
-}
-
-.plan-btn {
-  background: linear-gradient(135deg, #7c4dff, #b388ff);
-  padding: 10px 22px;
-  border-radius: 20px;
-  color: white;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 0 20px rgba(124, 77, 255, 0.2);
-}
-
-.plan-btn.disabled {
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow: none;
-}
-
-// 配额卡片
-.quota-card {
-  border-radius: 16px;
-  padding: 16px;
-  margin-bottom: 20px;
+.stat-tile {
+  flex: 1;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  padding: 14px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  box-shadow: var(--card-shadow, none);
+
+  .stat-num {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--text-primary);
+  }
+  .stat-label {
+    font-size: 11px;
+    color: var(--text-tertiary);
+  }
 }
 
-.quota-card-title {
-  font-size: 13px;
-  color: var(--text-secondary);
-  display: block;
-  margin-bottom: 10px;
-}
-
-.quota-bar {
-  height: 4px;
+/* 五星域进度 */
+.dims-progress {
   background: var(--glass-bg);
-  border-radius: 2px;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  padding: 6px 16px;
+  margin-bottom: 12px;
+  box-shadow: var(--card-shadow, none);
+}
+.dim-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+}
+.dim-dot {
+  width: 26px; height: 26px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.dim-name {
+  font-size: 12px;
+  color: var(--text-secondary);
+  width: 56px;
+  flex-shrink: 0;
+}
+.dim-bar {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+.dim-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.4s ease;
+}
+.dim-frac {
+  font-size: 11px;
+  color: var(--text-muted);
+  width: 40px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+/* 订阅 */
+.plan-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #1a1a3a, #2d2b5e);
+  border: 1px solid rgba(123, 135, 253, 0.3);
+}
+.plan-info { flex: 1; min-width: 0; }
+.plan-title {
+  display: block;
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 4px;
+}
+.plan-desc {
+  display: block;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.55);
+  line-height: 1.5;
+}
+.plan-progress {
+  margin-top: 8px;
+  .progress-track {
+    height: 3px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #7b87fd, #a2b2ff);
+    border-radius: 2px;
+  }
+  .progress-text {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.4);
+    margin-top: 4px;
+    display: block;
+  }
+}
+.plan-btn {
+  padding: 9px 16px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--color-brand), #8b5cf6);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+
+  &.disabled { opacity: 0.5; }
+}
+
+/* 配额 */
+.quota-card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  box-shadow: var(--card-shadow, none);
+}
+.quota-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+
+  .quota-card-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+.quota-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg-tertiary);
   overflow: hidden;
   margin-bottom: 8px;
 }
-
 .quota-fill {
   height: 100%;
-  background: linear-gradient(90deg, #4dd0e1, #b388ff);
-  border-radius: 2px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--color-brand), var(--color-brand-light));
+  transition: width 0.3s ease;
 }
-
-.quota-text {
-  font-size: 11px;
-  color: var(--text-tertiary);
+.quota-foot {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  .quota-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+  .quota-share {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-brand);
+  }
 }
 
-.quota-note {
-  color: var(--text-muted);
-}
-
-.quota-share {
-  font-size: 11px;
-  color: var(--dim1-color);
-  margin-top: 4px;
-  display: block;
-}
-
-// 菜单
+/* 菜单 */
 .menu-section {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: 20px;
+  padding: 4px 16px;
+  margin-bottom: 16px;
+  box-shadow: var(--card-shadow, none);
 }
-
 .menu-item {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 15px 16px;
+  gap: 12px;
+  padding: 13px 0;
   border-bottom: 1px solid var(--glass-border);
-}
 
-.menu-item:last-child {
-  border-bottom: none;
+  &:last-child { border-bottom: none; }
 }
-
 .m-icon {
-  width: 34px;
-  height: 34px;
+  width: 32px; height: 32px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
   flex-shrink: 0;
 }
-
 .m-label {
   flex: 1;
   font-size: 14px;
-  color: var(--text-secondary);
+  color: var(--text-primary);
 }
-
-.m-arrow {
-  font-size: 14px;
-  color: var(--text-muted);
-}
-
 .m-badge {
-  font-size: 10px;
-  padding: 2px 10px;
-  border-radius: 10px;
-  background: rgba(179, 136, 255, 0.12);
-  color: var(--dim1-color);
-}
-
-// 按钮
-.action-row {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.action-btn {
-  text-align: center;
-  padding: 16px 0;
-  font-size: 14px;
-  border-radius: 12px;
-}
-
-.action-btn.primary {
-  color: white;
-  background: linear-gradient(135deg, #7c4dff, #b388ff);
-  box-shadow: 0 0 20px rgba(124, 77, 255, 0.2);
-  font-weight: 600;
-}
-
-.action-btn.ghost {
-  color: var(--text-secondary);
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-}
-
-.action-btn.logout {
-  margin-top: 20px;
+  font-size: 11px;
   color: var(--text-muted);
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: 12px;
+}
+
+/* 操作 */
+.action-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.action-btn {
+  flex: 1;
+  height: 46px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+
+  &.primary {
+    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
+    color: #fff;
+  }
+  &.ghost {
+    background: var(--glass-bg);
+    border: 1.5px solid var(--glass-border);
+    color: var(--text-secondary);
+  }
+  &.logout {
+    flex: none;
+    width: 100%;
+    background: var(--glass-bg);
+    border: 1.5px solid var(--glass-border);
+    color: var(--dim5-color);
+    margin-bottom: 12px;
+  }
 }
 
 .version {
+  display: block;
   text-align: center;
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.1);
-  margin-top: 12px;
+  color: var(--text-muted);
+  padding: 8px 0 20px;
 }
 </style>