diff --git a/web/admin-spa/src/components/apistats/LimitConfig.vue b/web/admin-spa/src/components/apistats/LimitConfig.vue
index 78ff90ff..7df2d231 100644
--- a/web/admin-spa/src/components/apistats/LimitConfig.vue
+++ b/web/admin-spa/src/components/apistats/LimitConfig.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex h-full flex-col gap-4 md:gap-6">
     <!-- 限制配置 / 聚合模式提示 -->
-    <div class="card p-4 md:p-6">
+    <div class="card flex h-full flex-col p-4 md:p-6">
       <h3
         class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
       >
@@ -226,7 +226,7 @@
         </div>
 
         <!-- 其他限制信息 -->
-        <div class="space-y-2 border-t border-gray-100 pt-2 dark:border-gray-700">
+        <div class="space-y-4 border-t border-gray-100 pt-3 dark:border-gray-700">
           <div class="flex items-center justify-between">
             <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">并发限制</span>
             <span class="text-sm font-medium text-gray-900 md:text-base">
@@ -241,13 +241,7 @@
           <div class="flex items-center justify-between">
             <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">模型限制</span>
             <span class="text-sm font-medium text-gray-900 md:text-base">
-              <span
-                v-if="
-                  statsData.restrictions.enableModelRestriction &&
-                  statsData.restrictions.restrictedModels.length > 0
-                "
-                class="text-orange-600"
-              >
+              <span v-if="hasModelRestrictions" class="text-orange-600">
                 <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
                 限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
               </span>
@@ -257,39 +251,40 @@
               </span>
             </span>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">客户端限制</span>
-            <span class="text-sm font-medium text-gray-900 md:text-base">
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">客户端限制</span>
+              <span class="text-sm font-medium text-gray-900 md:text-base">
+                <span v-if="hasClientRestrictions" class="text-orange-600">
+                  <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
+                  限 {{ statsData.restrictions.allowedClients.length }} 种客户端使用
+                </span>
+                <span v-else class="text-green-600">
+                  <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
+                  允许所有客户端
+                </span>
+              </span>
+            </div>
+            <div
+              v-if="hasClientRestrictions"
+              class="flex flex-wrap gap-2 rounded-lg bg-blue-50 p-2 dark:bg-blue-900/20 md:p-3"
+            >
               <span
-                v-if="
-                  statsData.restrictions.enableClientRestriction &&
-                  statsData.restrictions.allowedClients.length > 0
-                "
-                class="text-orange-600"
+                v-for="client in statsData.restrictions.allowedClients"
+                :key="client"
+                class="flex items-center gap-1 rounded-full bg-white px-2 py-1 text-xs text-blue-700 shadow-sm dark:bg-slate-900 dark:text-blue-300 md:text-sm"
               >
-                <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-                限 {{ statsData.restrictions.allowedClients.length }} 种客户端使用
+                <i class="fas fa-id-badge" />
+                {{ client }}
               </span>
-              <span v-else class="text-green-600">
-                <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
-                允许所有客户端
-              </span>
-            </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 详细限制信息 -->
-    <div
-      v-if="
-        (statsData.restrictions.enableModelRestriction &&
-          statsData.restrictions.restrictedModels.length > 0) ||
-        (statsData.restrictions.enableClientRestriction &&
-          statsData.restrictions.allowedClients.length > 0)
-      "
-      class="card mt-4 p-4 md:mt-6 md:p-6"
-    >
+    <div v-if="hasModelRestrictions" class="card p-4 md:p-6">
       <h3
         class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
       >
@@ -297,72 +292,36 @@
         详细限制信息
       </h3>
 
-      <div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2">
-        <!-- 模型限制详情 -->
-        <div
-          v-if="
-            statsData.restrictions.enableModelRestriction &&
-            statsData.restrictions.restrictedModels.length > 0
-          "
-          class="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20 md:p-4"
+      <div
+        class="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20 md:p-4"
+      >
+        <h4
+          class="mb-2 flex items-center text-sm font-bold text-amber-800 dark:text-amber-300 md:mb-3 md:text-base"
         >
-          <h4
-            class="mb-2 flex items-center text-sm font-bold text-amber-800 dark:text-amber-300 md:mb-3 md:text-base"
+          <i class="fas fa-robot mr-1 text-xs md:mr-2 md:text-sm" />
+          受限模型列表
+        </h4>
+        <div class="space-y-1 md:space-y-2">
+          <div
+            v-for="model in statsData.restrictions.restrictedModels"
+            :key="model"
+            class="rounded border border-amber-200 bg-white px-2 py-1 text-xs dark:border-amber-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
           >
-            <i class="fas fa-robot mr-1 text-xs md:mr-2 md:text-sm" />
-            受限模型列表
-          </h4>
-          <div class="space-y-1 md:space-y-2">
-            <div
-              v-for="model in statsData.restrictions.restrictedModels"
-              :key="model"
-              class="rounded border border-amber-200 bg-white px-2 py-1 text-xs dark:border-amber-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
-            >
-              <i class="fas fa-ban mr-1 text-xs text-red-500 md:mr-2" />
-              <span class="break-all text-gray-800 dark:text-gray-200">{{ model }}</span>
-            </div>
+            <i class="fas fa-ban mr-1 text-xs text-red-500 md:mr-2" />
+            <span class="break-all text-gray-800 dark:text-gray-200">{{ model }}</span>
           </div>
-          <p class="mt-2 text-xs text-amber-700 dark:text-amber-400 md:mt-3">
-            <i class="fas fa-info-circle mr-1" />
-            此 API Key 不能访问以上列出的模型
-          </p>
-        </div>
-
-        <!-- 客户端限制详情 -->
-        <div
-          v-if="
-            statsData.restrictions.enableClientRestriction &&
-            statsData.restrictions.allowedClients.length > 0
-          "
-          class="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20 md:p-4"
-        >
-          <h4
-            class="mb-2 flex items-center text-sm font-bold text-blue-800 dark:text-blue-300 md:mb-3 md:text-base"
-          >
-            <i class="fas fa-desktop mr-1 text-xs md:mr-2 md:text-sm" />
-            允许的客户端
-          </h4>
-          <div class="space-y-1 md:space-y-2">
-            <div
-              v-for="client in statsData.restrictions.allowedClients"
-              :key="client"
-              class="rounded border border-blue-200 bg-white px-2 py-1 text-xs dark:border-blue-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
-            >
-              <i class="fas fa-check mr-1 text-xs text-green-500 md:mr-2" />
-              <span class="break-all text-gray-800 dark:text-gray-200">{{ client }}</span>
-            </div>
-          </div>
-          <p class="mt-2 text-xs text-blue-700 dark:text-blue-400 md:mt-3">
-            <i class="fas fa-info-circle mr-1" />
-            此 API Key 只能被以上列出的客户端使用
-          </p>
         </div>
+        <p class="mt-2 text-xs text-amber-700 dark:text-amber-400 md:mt-3">
+          <i class="fas fa-info-circle mr-1" />
+          此 API Key 不能访问以上列出的模型
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useApiStatsStore } from '@/stores/apistats'
 import WindowCountdown from '@/components/apikeys/WindowCountdown.vue'
@@ -370,6 +329,26 @@ import WindowCountdown from '@/components/apikeys/WindowCountdown.vue'
 const apiStatsStore = useApiStatsStore()
 const { statsData, multiKeyMode, aggregatedStats, invalidKeys } = storeToRefs(apiStatsStore)
 
+const hasModelRestrictions = computed(() => {
+  const restriction = statsData.value?.restrictions
+  if (!restriction) return false
+  return (
+    restriction.enableModelRestriction === true &&
+    Array.isArray(restriction.restrictedModels) &&
+    restriction.restrictedModels.length > 0
+  )
+})
+
+const hasClientRestrictions = computed(() => {
+  const restriction = statsData.value?.restrictions
+  if (!restriction) return false
+  return (
+    restriction.enableClientRestriction === true &&
+    Array.isArray(restriction.allowedClients) &&
+    restriction.allowedClients.length > 0
+  )
+})
+
 // 获取每日费用进度
 const getDailyCostProgress = () => {
   if (!statsData.value.limits.dailyCostLimit || statsData.value.limits.dailyCostLimit === 0)
diff --git a/web/admin-spa/src/components/apistats/StatsOverview.vue b/web/admin-spa/src/components/apistats/StatsOverview.vue
index a9904446..d074d8f4 100644
--- a/web/admin-spa/src/components/apistats/StatsOverview.vue
+++ b/web/admin-spa/src/components/apistats/StatsOverview.vue
@@ -1,397 +1,274 @@
 <template>
   <div class="space-y-6 md:space-y-8">
-    <div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2 lg:items-start">
-      <!-- API Key 基本信息 / 批量查询概要 -->
-      <div class="card p-4 md:p-6">
-        <h3
-          class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
-        >
+    <div
+      class="grid grid-cols-1 items-stretch gap-4 md:gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]"
+    >
+      <!-- 基础信息 / 批量概要 -->
+      <div class="card-section">
+        <header class="section-header">
           <i
-            class="mr-2 text-sm md:mr-3 md:text-base"
+            class="header-icon"
             :class="
               multiKeyMode
                 ? 'fas fa-layer-group text-purple-500'
                 : 'fas fa-info-circle text-blue-500'
             "
           />
-          {{ multiKeyMode ? '批量查询概要' : 'API Key 信息' }}
-        </h3>
+          <h3 class="header-title">{{ multiKeyMode ? '批量查询概要' : 'API Key 信息' }}</h3>
+        </header>
 
-        <!-- 多 Key 模式下的概要信息 -->
-        <div v-if="multiKeyMode && aggregatedStats" class="space-y-2 md:space-y-3">
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">查询 Keys 数</span>
-            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
-              {{ aggregatedStats.totalKeys }} 个
-            </span>
+        <div v-if="multiKeyMode && aggregatedStats" class="info-grid">
+          <div class="info-item">
+            <p class="info-label">查询 Keys 数</p>
+            <p class="info-value">{{ aggregatedStats.totalKeys }} 个</p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">有效 Keys 数</span>
-            <span class="text-sm font-medium text-green-600 md:text-base">
-              <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
-              {{ aggregatedStats.activeKeys }} 个
-            </span>
+          <div class="info-item">
+            <p class="info-label">有效 Keys 数</p>
+            <p class="info-value text-green-600 dark:text-emerald-400">
+              <i class="fas fa-check-circle mr-1" />{{ aggregatedStats.activeKeys }} 个
+            </p>
           </div>
-          <div v-if="invalidKeys.length > 0" class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">无效 Keys 数</span>
-            <span class="text-sm font-medium text-red-600 md:text-base">
-              <i class="fas fa-times-circle mr-1 text-xs md:text-sm" />
-              {{ invalidKeys.length }} 个
-            </span>
+          <div v-if="invalidKeys.length > 0" class="info-item">
+            <p class="info-label">无效 Keys 数</p>
+            <p class="info-value text-red-500 dark:text-red-400">
+              <i class="fas fa-times-circle mr-1" />{{ invalidKeys.length }} 个
+            </p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总请求数</span>
-            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
-              {{ formatNumber(aggregatedStats.usage.requests) }}
-            </span>
+          <div class="info-item">
+            <p class="info-label">总请求数</p>
+            <p class="info-value">{{ formatNumber(aggregatedStats.usage.requests) }}</p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总 Token 数</span>
-            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
-              {{ formatNumber(aggregatedStats.usage.allTokens) }}
-            </span>
+          <div class="info-item">
+            <p class="info-label">总 Token 数</p>
+            <p class="info-value">{{ formatNumber(aggregatedStats.usage.allTokens) }}</p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总费用</span>
-            <span class="text-sm font-medium text-indigo-600 md:text-base">
+          <div class="info-item">
+            <p class="info-label">总费用</p>
+            <p class="info-value text-indigo-600 dark:text-indigo-300">
               {{ aggregatedStats.usage.formattedCost }}
-            </span>
+            </p>
           </div>
-
-          <!-- 各 Key 贡献占比（可选） -->
-          <div
-            v-if="individualStats.length > 1"
-            class="border-t border-gray-200 pt-2 dark:border-gray-700"
-          >
-            <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">各 Key 贡献占比</div>
-            <div class="space-y-1">
-              <div
-                v-for="stat in topContributors"
-                :key="stat.apiId"
-                class="flex items-center justify-between text-xs"
-              >
-                <span class="truncate text-gray-600 dark:text-gray-400">{{ stat.name }}</span>
-                <span class="text-gray-900 dark:text-gray-100"
-                  >{{ calculateContribution(stat) }}%</span
-                >
+          <div v-if="individualStats.length > 1" class="info-item xl:col-span-2">
+            <p class="info-label">Top 3 贡献占比</p>
+            <div class="space-y-2">
+              <div v-for="stat in topContributors" :key="stat.apiId" class="contributor-item">
+                <span class="truncate">{{ stat.name }}</span>
+                <span class="font-semibold">{{ calculateContribution(stat) }}%</span>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- 单 Key 模式下的详细信息 -->
-        <div v-else class="space-y-2 md:space-y-3">
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">名称</span>
-            <span
-              class="break-all text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base"
-              >{{ statsData.name }}</span
-            >
+        <div v-else class="info-grid">
+          <div class="info-item">
+            <p class="info-label">名称</p>
+            <p class="info-value break-all">{{ statsData.name }}</p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">状态</span>
-            <span
-              class="text-sm font-medium md:text-base"
-              :class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
+          <div class="info-item">
+            <p class="info-label">状态</p>
+            <p
+              class="info-value font-semibold"
+              :class="
+                statsData.isActive
+                  ? 'text-green-600 dark:text-emerald-400'
+                  : 'text-red-500 dark:text-red-400'
+              "
             >
               <i
-                class="mr-1 text-xs md:text-sm"
+                class="mr-1"
                 :class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
               />
               {{ statsData.isActive ? '活跃' : '已停用' }}
-            </span>
+            </p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">权限</span>
-            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
-              formatPermissions(statsData.permissions)
-            }}</span>
+          <div class="info-item">
+            <p class="info-label">权限</p>
+            <p class="info-value">{{ formatPermissions(statsData.permissions) }}</p>
           </div>
-          <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">创建时间</span>
-            <span
-              class="break-all text-xs font-medium text-gray-900 dark:text-gray-100 md:text-base"
-              >{{ formatDate(statsData.createdAt) }}</span
-            >
+          <div class="info-item">
+            <p class="info-label">创建时间</p>
+            <p class="info-value break-all">{{ formatDate(statsData.createdAt) }}</p>
           </div>
-          <div class="flex items-start justify-between">
-            <span class="mt-1 flex-shrink-0 text-sm text-gray-600 dark:text-gray-400 md:text-base"
-              >过期时间</span
-            >
-            <!-- 未激活状态 -->
-            <div
-              v-if="statsData.expirationMode === 'activation' && !statsData.isActivated"
-              class="text-sm font-medium text-amber-600 dark:text-amber-500 md:text-base"
-            >
-              <i class="fas fa-pause-circle mr-1 text-xs md:text-sm" />
-              未激活
-              <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
-                >(首次使用后
-                {{ statsData.activationDays || (statsData.activationUnit === 'hours' ? 24 : 30)
-                }}{{ statsData.activationUnit === 'hours' ? '小时' : '天' }}过期)</span
-              >
-            </div>
-            <!-- 已设置过期时间 -->
-            <div v-else-if="statsData.expiresAt" class="text-right">
-              <div
-                v-if="isApiKeyExpired(statsData.expiresAt)"
-                class="text-sm font-medium text-red-600 md:text-base"
-              >
-                <i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
-                已过期
-              </div>
-              <div
-                v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
-                class="break-all text-xs font-medium text-orange-600 md:text-base"
-              >
-                <i class="fas fa-clock mr-1 text-xs md:text-sm" />
-                {{ formatExpireDate(statsData.expiresAt) }}
-              </div>
-              <div
-                v-else
-                class="break-all text-xs font-medium text-gray-900 dark:text-gray-100 md:text-base"
-              >
-                {{ formatExpireDate(statsData.expiresAt) }}
-              </div>
-            </div>
-            <!-- 永不过期 -->
-            <div v-else class="text-sm font-medium text-gray-400 dark:text-gray-500 md:text-base">
-              <i class="fas fa-infinity mr-1 text-xs md:text-sm" />
-              永不过期
+          <div class="info-item xl:col-span-2">
+            <p class="info-label">过期时间</p>
+            <div class="info-value">
+              <template v-if="statsData.expirationMode === 'activation' && !statsData.isActivated">
+                <span class="text-amber-600 dark:text-amber-400">
+                  <i class="fas fa-pause-circle mr-1" />未激活
+                </span>
+                <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
+                  首次使用后
+                  {{ statsData.activationDays || (statsData.activationUnit === 'hours' ? 24 : 30) }}
+                  {{ statsData.activationUnit === 'hours' ? '小时' : '天' }}过期
+                </span>
+              </template>
+              <template v-else-if="statsData.expiresAt">
+                <span
+                  v-if="isApiKeyExpired(statsData.expiresAt)"
+                  class="text-red-500 dark:text-red-400"
+                >
+                  <i class="fas fa-exclamation-circle mr-1" />已过期
+                </span>
+                <span
+                  v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
+                  class="text-orange-500 dark:text-orange-400"
+                >
+                  <i class="fas fa-clock mr-1" />{{ formatExpireDate(statsData.expiresAt) }}
+                </span>
+                <span v-else>{{ formatExpireDate(statsData.expiresAt) }}</span>
+              </template>
+              <template v-else>
+                <span class="text-gray-400 dark:text-gray-500">
+                  <i class="fas fa-infinity mr-1" />永不过期
+                </span>
+              </template>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 使用统计概览 -->
-      <div class="card p-4 md:p-6">
-        <h3
-          class="mb-3 flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:mb-4 md:text-xl"
-        >
-          <span class="flex items-center">
-            <i class="fas fa-chart-bar mr-2 text-sm text-green-500 md:mr-3 md:text-base" />
-            使用统计概览
-          </span>
-          <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-            >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
-          >
-        </h3>
-        <div class="grid grid-cols-2 gap-3 md:gap-4">
-          <div class="stat-card text-center">
-            <div class="text-lg font-bold text-green-600 md:text-3xl">
+      <div class="card-section">
+        <header class="section-header">
+          <i class="header-icon fas fa-chart-bar text-green-500" />
+          <h3 class="header-title">使用统计概览</h3>
+          <span class="header-tag">{{ statsPeriod === 'daily' ? '今日' : '本月' }}</span>
+        </header>
+        <div class="metric-grid">
+          <div class="metric-card">
+            <p class="metric-value text-green-600 dark:text-emerald-300">
               {{ formatNumber(currentPeriodData.requests) }}
-            </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
-            </div>
+            </p>
+            <p class="metric-label">{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数</p>
           </div>
-          <div class="stat-card text-center">
-            <div class="text-lg font-bold text-blue-600 md:text-3xl">
+          <div class="metric-card">
+            <p class="metric-value text-blue-600 dark:text-sky-300">
               {{ formatNumber(currentPeriodData.allTokens) }}
-            </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
-            </div>
+            </p>
+            <p class="metric-label">{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token 数</p>
           </div>
-          <div class="stat-card text-center">
-            <div class="text-lg font-bold text-purple-600 md:text-3xl">
+          <div class="metric-card">
+            <p class="metric-value text-purple-600 dark:text-violet-300">
               {{ currentPeriodData.formattedCost || '$0.000000' }}
-            </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
-            </div>
+            </p>
+            <p class="metric-label">{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用</p>
           </div>
-          <div class="stat-card text-center">
-            <div class="text-lg font-bold text-yellow-600 md:text-3xl">
+          <div class="metric-card">
+            <p class="metric-value text-amber-500 dark:text-amber-300">
               {{ formatNumber(currentPeriodData.inputTokens) }}
-            </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
-            </div>
+            </p>
+            <p class="metric-label">{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入 Token</p>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-if="boundAccountList.length > 0" class="card p-4 md:p-6">
-      <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
-        <div class="flex items-center gap-2">
-          <i class="fas fa-link text-sm text-indigo-500 md:text-base" />
-          <span class="text-sm font-semibold text-indigo-900 dark:text-indigo-200 md:text-base"
-            >专属账号运行状态</span
-          >
-        </div>
-        <span
-          class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-200"
-          >实时速览</span
-        >
-      </div>
-      <div class="grid grid-cols-1 gap-3 md:gap-4 lg:grid-cols-2">
+    <!-- 专属账号运行状态，仅在单 key 且存在绑定时显示 -->
+    <div v-if="!multiKeyMode && boundAccountList.length > 0" class="card-section">
+      <header class="section-header">
+        <i class="header-icon fas fa-plug text-indigo-500" />
+        <h3 class="header-title">专属账号运行状态</h3>
+        <span class="header-tag">实时更新</span>
+      </header>
+
+      <div class="grid grid-cols-1 gap-4" :class="accountGridClass">
         <div
           v-for="account in boundAccountList"
           :key="account.id || account.key"
-          class="rounded-xl border border-white/60 bg-white/85 p-4 shadow-sm backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/60"
+          class="account-card"
         >
-          <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="flex items-center justify-between gap-3">
             <div class="flex items-center gap-3">
-              <div
-                :class="[
-                  'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-white shadow-inner',
-                  account.platform === 'claude'
-                    ? 'bg-gradient-to-br from-purple-500 to-purple-600'
-                    : 'bg-gradient-to-br from-sky-500 to-indigo-500'
-                ]"
+              <span
+                class="account-icon"
+                :class="account.platform === 'claude' ? 'icon-claude' : 'icon-openai'"
               >
                 <i :class="account.platform === 'claude' ? 'fas fa-meteor' : 'fas fa-robot'" />
-              </div>
-              <div class="space-y-1">
-                <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                  {{ getAccountTitle(account) }}
-                </div>
-                <div class="flex items-center gap-2 text-[11px]">
-                  <span
-                    v-if="account.platform === 'claude'"
-                    class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 font-medium text-purple-700 dark:bg-purple-500/20 dark:text-purple-200"
-                    >Claude 专用</span
-                  >
-                  <span
-                    v-else
-                    class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-200"
-                    >OpenAI 专用</span
-                  >
-                </div>
+              </span>
+              <div>
+                <p class="account-name">{{ getAccountLabel(account) }}</p>
+                <p class="account-sub">
+                  {{ account.platform === 'claude' ? '会话窗口' : '额度窗口' }}
+                </p>
               </div>
             </div>
             <div
               v-if="getRateLimitDisplay(account.rateLimitStatus)"
-              class="text-xs font-semibold"
-              :class="getRateLimitDisplay(account.rateLimitStatus).class"
+              :class="['rate-badge', getRateLimitDisplay(account.rateLimitStatus).class]"
             >
               <i class="fas fa-tachometer-alt mr-1" />
               {{ getRateLimitDisplay(account.rateLimitStatus).text }}
             </div>
           </div>
 
-          <div v-if="account.platform === 'claude'" class="mt-4 space-y-2">
-            <div v-if="account.sessionWindow?.hasActiveWindow" class="space-y-2">
-              <div class="flex items-center gap-2">
-                <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-700">
-                  <div
-                    :class="[
-                      'h-2 rounded-full transition-all duration-300',
-                      getSessionProgressBarClass(
-                        account.sessionWindow?.sessionWindowStatus,
-                        account
-                      )
-                    ]"
-                    :style="{
-                      width: `${Math.min(100, Math.max(0, account.sessionWindow?.progress || 0))}%`
-                    }"
-                  />
-                </div>
-                <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">
-                  {{
-                    Math.min(100, Math.max(0, Math.round(account.sessionWindow?.progress || 0)))
-                  }}%
-                </span>
-              </div>
-              <div
-                class="flex flex-wrap items-center gap-3 text-[11px] text-gray-600 dark:text-gray-300"
-              >
-                <span>
-                  {{
-                    formatSessionWindowRange(
-                      account.sessionWindow?.windowStart,
-                      account.sessionWindow?.windowEnd
-                    )
-                  }}
-                </span>
-                <span
-                  v-if="account.sessionWindow?.remainingTime > 0"
-                  class="font-medium text-indigo-600 dark:text-indigo-400"
-                >
-                  剩余 {{ formatSessionRemaining(account.sessionWindow.remainingTime) }}
-                </span>
+          <div v-if="account.platform === 'claude'" class="mt-3 space-y-2">
+            <div class="progress-row">
+              <div class="progress-track">
+                <div
+                  class="progress-bar"
+                  :class="
+                    getSessionProgressBarClass(account.sessionWindow?.sessionWindowStatus, account)
+                  "
+                  :style="{
+                    width: `${Math.min(100, Math.max(0, account.sessionWindow?.progress || 0))}%`
+                  }"
+                />
               </div>
+              <span class="progress-value">
+                {{ Math.min(100, Math.max(0, Math.round(account.sessionWindow?.progress || 0))) }}%
+              </span>
             </div>
-            <div
-              v-else
-              class="rounded-lg bg-white/70 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
-            >
-              暂无活跃会话窗口
+            <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
+              <span>
+                {{
+                  formatSessionWindowRange(
+                    account.sessionWindow?.windowStart,
+                    account.sessionWindow?.windowEnd
+                  )
+                }}
+              </span>
+              <span
+                v-if="account.sessionWindow?.remainingTime > 0"
+                class="font-medium text-indigo-600 dark:text-indigo-400"
+              >
+                剩余 {{ formatSessionRemaining(account.sessionWindow.remainingTime) }}
+              </span>
             </div>
           </div>
 
-          <div v-else-if="account.platform === 'openai'" class="mt-4 space-y-3">
-            <div v-if="account.codexUsage" class="space-y-3">
-              <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
-                <div class="flex items-center gap-2">
-                  <span
-                    class="inline-flex min-w-[34px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
-                  >
-                    {{ getCodexWindowLabel('primary') }}
+          <div v-else-if="account.platform === 'openai'" class="mt-3">
+            <div v-if="account.codexUsage" class="space-y-2">
+              <div
+                v-for="type in ['primary', 'secondary']"
+                :key="`${account.key}-${type}`"
+                class="quota-row"
+              >
+                <div class="quota-header">
+                  <span class="quota-tag" :class="type === 'primary' ? 'tag-indigo' : 'tag-blue'">
+                    {{ getCodexWindowLabel(type) }}
                   </span>
-                  <div class="flex-1">
-                    <div class="flex items-center gap-2">
-                      <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                        <div
-                          :class="[
-                            'h-2 rounded-full transition-all duration-300',
-                            getCodexUsageBarClass(account.codexUsage.primary)
-                          ]"
-                          :style="{ width: getCodexUsageWidth(account.codexUsage.primary) }"
-                        />
-                      </div>
-                      <span
-                        class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                      >
-                        {{ formatCodexUsagePercent(account.codexUsage.primary) }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                  重置剩余 {{ formatCodexRemaining(account.codexUsage.primary) }}
-                </div>
-              </div>
-
-              <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
-                <div class="flex items-center gap-2">
-                  <span
-                    class="inline-flex min-w-[34px] justify-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-600 dark:bg-blue-500/20 dark:text-blue-200"
-                  >
-                    {{ getCodexWindowLabel('secondary') }}
+                  <span class="quota-percent">
+                    {{ formatCodexUsagePercent(account.codexUsage?.[type]) }}
                   </span>
-                  <div class="flex-1">
-                    <div class="flex items-center gap-2">
-                      <div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
-                        <div
-                          :class="[
-                            'h-2 rounded-full transition-all duration-300',
-                            getCodexUsageBarClass(account.codexUsage.secondary)
-                          ]"
-                          :style="{ width: getCodexUsageWidth(account.codexUsage.secondary) }"
-                        />
-                      </div>
-                      <span
-                        class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
-                      >
-                        {{ formatCodexUsagePercent(account.codexUsage.secondary) }}
-                      </span>
-                    </div>
-                  </div>
                 </div>
-                <div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
-                  重置剩余 {{ formatCodexRemaining(account.codexUsage.secondary) }}
+                <div class="progress-track">
+                  <div
+                    class="progress-bar"
+                    :class="getCodexUsageBarClass(account.codexUsage?.[type])"
+                    :style="{ width: getCodexUsageWidth(account.codexUsage?.[type]) }"
+                  />
+                </div>
+                <div class="quota-foot">
+                  重置剩余 {{ formatCodexRemaining(account.codexUsage?.[type]) }}
                 </div>
               </div>
             </div>
-            <div
+            <p
               v-else
-              class="rounded-lg bg-white/70 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
+              class="rounded-xl bg-slate-100 px-3 py-2 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-300"
             >
               暂无额度使用数据
-            </div>
+            </p>
           </div>
         </div>
       </div>
@@ -403,8 +280,8 @@
 /* eslint-disable no-unused-vars */
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useApiStatsStore } from '@/stores/apistats'
 import dayjs from 'dayjs'
+import { useApiStatsStore } from '@/stores/apistats'
 
 const apiStatsStore = useApiStatsStore()
 const {
@@ -417,35 +294,28 @@ const {
   invalidKeys
 } = storeToRefs(apiStatsStore)
 
-// 计算前3个贡献最大的 Key
 const topContributors = computed(() => {
   if (!individualStats.value || individualStats.value.length === 0) return []
-
   return [...individualStats.value]
     .sort((a, b) => (b.usage?.allTokens || 0) - (a.usage?.allTokens || 0))
     .slice(0, 3)
 })
 
-// 计算单个 Key 的贡献占比
 const calculateContribution = (stat) => {
   if (!aggregatedStats.value || !aggregatedStats.value.usage.allTokens) return 0
   const percentage = ((stat.usage?.allTokens || 0) / aggregatedStats.value.usage.allTokens) * 100
   return percentage.toFixed(1)
 }
 
-// 格式化日期
 const formatDate = (dateString) => {
   if (!dateString) return '无'
-
   try {
-    const date = dayjs(dateString)
-    return date.format('YYYY年MM月DD日 HH:mm')
+    return dayjs(dateString).format('YYYY年MM月DD日 HH:mm')
   } catch (error) {
     return '格式错误'
   }
 }
 
-// 格式化过期日期
 const formatExpireDate = (dateString) => {
   if (!dateString) return ''
   const date = new Date(dateString)
@@ -458,13 +328,11 @@ const formatExpireDate = (dateString) => {
   })
 }
 
-// 检查 API Key 是否已过期
 const isApiKeyExpired = (expiresAt) => {
   if (!expiresAt) return false
   return new Date(expiresAt) < new Date()
 }
 
-// 检查 API Key 是否即将过期（7天内）
 const isApiKeyExpiringSoon = (expiresAt) => {
   if (!expiresAt) return false
   const expireDate = new Date(expiresAt)
@@ -473,97 +341,63 @@ const isApiKeyExpiringSoon = (expiresAt) => {
   return daysUntilExpire > 0 && daysUntilExpire <= 7
 }
 
-// 格式化数字
 const formatNumber = (num) => {
-  if (typeof num !== 'number') {
-    num = parseInt(num) || 0
-  }
-
+  if (typeof num !== 'number') num = parseInt(num) || 0
   if (num === 0) return '0'
-
-  // 大数字使用简化格式
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1) + 'M'
-  } else if (num >= 1000) {
-    return (num / 1000).toFixed(1) + 'K'
-  } else {
-    return num.toLocaleString()
-  }
+  if (num >= 1_000_000) return (num / 1_000_000).toFixed(1) + 'M'
+  if (num >= 1_000) return (num / 1_000).toFixed(1) + 'K'
+  return num.toLocaleString()
 }
 
-// 格式化权限
 const formatPermissions = (permissions) => {
-  const permissionMap = {
+  const map = {
     claude: 'Claude',
     gemini: 'Gemini',
     all: '全部模型'
   }
-
-  return permissionMap[permissions] || permissions || '未知'
+  return map[permissions] || permissions || '未知'
 }
 
-// 绑定的专属账号列表（仅保留专属类型）
 const boundAccountList = computed(() => {
   const accounts = statsData.value?.accounts?.details
-  if (!accounts) {
-    return []
-  }
-
+  if (!accounts) return []
   const result = []
-
   if (accounts.claude && accounts.claude.accountType === 'dedicated') {
     result.push({ key: 'claude', ...accounts.claude })
   }
-
   if (accounts.openai && accounts.openai.accountType === 'dedicated') {
     result.push({ key: 'openai', ...accounts.openai })
   }
-
   return result
 })
 
-// 专属账号标题
-const getAccountTitle = (account) => {
-  if (!account) {
-    return '专属账号'
+const accountGridClass = computed(() => {
+  const count = boundAccountList.value.length
+  if (count <= 1) {
+    return 'md:grid-cols-1 lg:grid-cols-1'
   }
-
-  if (account.platform === 'openai') {
-    return 'OpenAI 专属账号'
+  if (count === 2) {
+    return 'md:grid-cols-2'
   }
+  return 'md:grid-cols-2 xl:grid-cols-3'
+})
 
-  return 'Claude 专属账号'
+const getAccountLabel = (account) => {
+  if (!account) return '专属账号'
+  return account.platform === 'openai' ? 'OpenAI 专属账号' : 'Claude 专属账号'
 }
 
-// 格式化限流时间
 const formatRateLimitTime = (minutes) => {
-  if (!minutes || minutes <= 0) {
-    return ''
-  }
-
-  const totalMinutes = Math.floor(minutes)
-  const days = Math.floor(totalMinutes / 1440)
-  const hours = Math.floor((totalMinutes % 1440) / 60)
-  const mins = totalMinutes % 60
-
-  if (days > 0) {
-    if (hours > 0) {
-      return `${days}天${hours}小时`
-    }
-    return `${days}天`
-  }
-
-  if (hours > 0) {
-    if (mins > 0) {
-      return `${hours}小时${mins}分钟`
-    }
-    return `${hours}小时`
-  }
-
+  if (!minutes || minutes <= 0) return ''
+  const total = Math.floor(minutes)
+  const days = Math.floor(total / 1440)
+  const hours = Math.floor((total % 1440) / 60)
+  const mins = total % 60
+  if (days > 0) return hours > 0 ? `${days}天${hours}小时` : `${days}天`
+  if (hours > 0) return mins > 0 ? `${hours}小时${mins}分钟` : `${hours}小时`
   return `${mins}分钟`
 }
 
-// 生成限流状态的展示信息
 const getRateLimitDisplay = (status) => {
   if (!status) {
     return {
@@ -571,7 +405,6 @@ const getRateLimitDisplay = (status) => {
       class: 'text-gray-400'
     }
   }
-
   if (status.isRateLimited) {
     const remaining = formatRateLimitTime(status.minutesRemaining)
     const suffix = remaining ? ` · 剩余约 ${remaining}` : ''
@@ -580,291 +413,245 @@ const getRateLimitDisplay = (status) => {
       class: 'text-red-500 dark:text-red-400'
     }
   }
-
   return {
     text: '未限流',
-    class: 'text-green-600 dark:text-green-400'
+    class: 'text-green-600 dark:text-emerald-400'
   }
 }
 
-// 格式化会话窗口的时间范围
 const formatSessionWindowRange = (start, end) => {
-  if (!start || !end) {
-    return '暂无时间窗口信息'
-  }
-
-  const startDate = new Date(start)
-  const endDate = new Date(end)
-
-  const formatPart = (date) => {
-    const hours = `${date.getHours()}`.padStart(2, '0')
-    const minutes = `${date.getMinutes()}`.padStart(2, '0')
-    return `${hours}:${minutes}`
-  }
-
-  return `${formatPart(startDate)} - ${formatPart(endDate)}`
+  if (!start || !end) return '暂无时间窗口信息'
+  const s = new Date(start)
+  const e = new Date(end)
+  const fmt = (d) => `${`${d.getHours()}`.padStart(2, '0')}:${`${d.getMinutes()}`.padStart(2, '0')}`
+  return `${fmt(s)} - ${fmt(e)}`
 }
 
-// 格式化会话窗口剩余时间
 const formatSessionRemaining = (minutes) => {
-  if (!minutes || minutes <= 0) {
-    return ''
-  }
-
+  if (!minutes || minutes <= 0) return ''
   const hours = Math.floor(minutes / 60)
   const mins = minutes % 60
-
-  if (hours > 0) {
-    return `${hours}小时${mins}分钟`
-  }
-  return `${mins}分钟`
+  return hours > 0 ? `${hours}小时${mins}分钟` : `${mins}分钟`
 }
 
-// 会话窗口进度条颜色
 const getSessionProgressBarClass = (status, account) => {
-  if (!status) {
-    return 'bg-gradient-to-r from-blue-500 to-indigo-600'
-  }
-
-  const isRateLimited = account?.rateLimitStatus?.isRateLimited
-
-  if (isRateLimited) {
-    return 'bg-gradient-to-r from-red-500 to-red-600'
-  }
-
+  if (!status) return 'bg-gradient-to-r from-blue-500 to-indigo-500'
+  if (account?.rateLimitStatus?.isRateLimited) return 'bg-gradient-to-r from-red-500 to-red-600'
   const normalized = String(status).toLowerCase()
-
-  if (normalized === 'rejected') {
-    return 'bg-gradient-to-r from-red-500 to-red-600'
-  }
-
-  if (normalized === 'allowed_warning') {
-    return 'bg-gradient-to-r from-yellow-500 to-orange-500'
-  }
-
-  return 'bg-gradient-to-r from-blue-500 to-indigo-600'
+  if (normalized === 'rejected') return 'bg-gradient-to-r from-red-500 to-red-600'
+  if (normalized === 'allowed_warning') return 'bg-gradient-to-r from-yellow-500 to-orange-500'
+  return 'bg-gradient-to-r from-blue-500 to-indigo-500'
 }
 
-// 归一化 OpenAI 额度使用百分比
 const normalizeCodexUsagePercent = (usageItem) => {
-  if (!usageItem) {
-    return null
-  }
-
+  if (!usageItem) return null
   const percent =
     typeof usageItem.usedPercent === 'number' && !Number.isNaN(usageItem.usedPercent)
       ? usageItem.usedPercent
       : null
-
   const resetAfterSeconds =
     typeof usageItem.resetAfterSeconds === 'number' && !Number.isNaN(usageItem.resetAfterSeconds)
       ? usageItem.resetAfterSeconds
       : null
-
   const remainingSeconds =
     typeof usageItem.remainingSeconds === 'number' ? usageItem.remainingSeconds : null
-
   const resetAtMs = usageItem.resetAt ? Date.parse(usageItem.resetAt) : null
-
   const resetElapsed =
     resetAfterSeconds !== null &&
     ((remainingSeconds !== null && remainingSeconds <= 0) ||
       (resetAtMs !== null && !Number.isNaN(resetAtMs) && Date.now() >= resetAtMs))
-
-  if (resetElapsed) {
-    return 0
-  }
-
-  if (percent === null) {
-    return null
-  }
-
+  if (resetElapsed) return 0
+  if (percent === null) return null
   return Math.max(0, Math.min(100, percent))
 }
 
-// OpenAI 额度进度条颜色
 const getCodexUsageBarClass = (usageItem) => {
   const percent = normalizeCodexUsagePercent(usageItem)
-
-  if (percent === null) {
-    return 'bg-gradient-to-r from-gray-300 to-gray-400'
-  }
-
-  if (percent >= 90) {
-    return 'bg-gradient-to-r from-red-500 to-red-600'
-  }
-
-  if (percent >= 75) {
-    return 'bg-gradient-to-r from-yellow-500 to-orange-500'
-  }
-
+  if (percent === null) return 'bg-gradient-to-r from-gray-300 to-gray-400'
+  if (percent >= 90) return 'bg-gradient-to-r from-red-500 to-red-600'
+  if (percent >= 75) return 'bg-gradient-to-r from-yellow-500 to-orange-500'
   return 'bg-gradient-to-r from-emerald-500 to-teal-500'
 }
 
-// OpenAI 额度进度条宽度
 const getCodexUsageWidth = (usageItem) => {
   const percent = normalizeCodexUsagePercent(usageItem)
-  if (percent === null) {
-    return '0%'
-  }
+  if (percent === null) return '0%'
   return `${percent}%`
 }
 
-// OpenAI 额度百分比文本
 const formatCodexUsagePercent = (usageItem) => {
   const percent = normalizeCodexUsagePercent(usageItem)
-  if (percent === null) {
-    return '--'
-  }
+  if (percent === null) return '--'
   return `${percent.toFixed(1)}%`
 }
 
-// OpenAI 额度剩余时间
 const formatCodexRemaining = (usageItem) => {
-  if (!usageItem) {
-    return '--'
-  }
-
+  if (!usageItem) return '--'
   let seconds = usageItem.remainingSeconds
   if (seconds === null || seconds === undefined) {
     seconds = usageItem.resetAfterSeconds
   }
-
   if (seconds === null || seconds === undefined || Number.isNaN(Number(seconds))) {
     return '--'
   }
-
   seconds = Math.max(0, Math.floor(Number(seconds)))
-
   const days = Math.floor(seconds / 86400)
   const hours = Math.floor((seconds % 86400) / 3600)
   const minutes = Math.floor((seconds % 3600) / 60)
   const secs = seconds % 60
-
-  if (days > 0) {
-    if (hours > 0) {
-      return `${days}天${hours}小时`
-    }
-    return `${days}天`
-  }
-
-  if (hours > 0) {
-    if (minutes > 0) {
-      return `${hours}小时${minutes}分钟`
-    }
-    return `${hours}小时`
-  }
-
-  if (minutes > 0) {
-    return `${minutes}分钟`
-  }
-
+  if (days > 0) return hours > 0 ? `${days}天${hours}小时` : `${days}天`
+  if (hours > 0) return minutes > 0 ? `${hours}小时${minutes}分钟` : `${hours}小时`
+  if (minutes > 0) return `${minutes}分钟`
   return `${secs}秒`
 }
 
-// OpenAI 窗口标签
-const getCodexWindowLabel = (type) => {
-  if (type === 'secondary') {
-    return '周限'
-  }
-  return '5h'
-}
+const getCodexWindowLabel = (type) => (type === 'secondary' ? '周限' : '5h')
 </script>
 
 <style scoped>
-/* 卡片样式 - 使用CSS变量 */
-.card {
-  background: var(--surface-color);
-  border-radius: 16px;
-  border: 1px solid var(--border-color);
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-  position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.card-section {
+  @apply flex h-full flex-col gap-4 rounded-2xl border border-slate-200/70 bg-white/90 p-4 shadow-md dark:border-slate-700/60 dark:bg-slate-900/70 md:p-6;
 }
 
-.card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+:global(.dark) .card-section {
+  backdrop-filter: blur(10px);
 }
 
-.card:hover {
-  transform: translateY(-2px);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.15),
-    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+.section-header {
+  @apply mb-4 flex items-center gap-3;
 }
 
-:global(.dark) .card:hover {
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.5),
-    0 10px 10px -5px rgba(0, 0, 0, 0.35);
+.header-icon {
+  @apply text-base md:text-lg;
 }
 
-/* 统计卡片样式 - 使用CSS变量 */
-.stat-card {
-  background: linear-gradient(135deg, var(--surface-color) 0%, var(--glass-strong-color) 100%);
-  border-radius: 16px;
-  border: 1px solid var(--border-color);
-  padding: 16px;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
+.header-title {
+  @apply text-lg font-semibold text-slate-900 dark:text-slate-100 md:text-xl;
+}
+
+.header-tag {
+  @apply ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800 dark:text-slate-300;
+}
+
+.info-grid {
+  @apply grid gap-3 md:gap-4;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 @media (min-width: 768px) {
-  .stat-card {
-    border-radius: 20px;
-    padding: 24px;
+  .info-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-:global(.dark) .stat-card:hover {
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.4),
-    0 10px 10px -5px rgba(0, 0, 0, 0.25);
-}
-
-.stat-card:hover::before {
-  opacity: 1;
-}
-
-/* 响应式优化 */
-@media (max-width: 768px) {
-  .card {
-    margin-bottom: 1rem;
+@media (min-width: 1280px) {
+  .info-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 480px) {
-  .stat-card {
-    padding: 12px;
-  }
+.info-item {
+  @apply rounded-xl border border-slate-200 bg-white/70 p-4 dark:border-slate-700 dark:bg-slate-900/60;
+  min-height: 86px;
+}
+
+.info-label {
+  @apply text-xs uppercase tracking-wide text-slate-400;
+}
+
+.info-value {
+  @apply mt-2 text-sm text-slate-800 dark:text-slate-100;
+}
+
+.contributor-item {
+  @apply flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300;
+}
+
+.metric-grid {
+  @apply grid grid-cols-2 gap-3 md:gap-4;
+}
+
+.metric-card {
+  @apply rounded-xl border border-slate-200 bg-white/70 p-4 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900/60;
+}
+
+.metric-value {
+  @apply text-xl font-semibold md:text-2xl;
+}
+
+.metric-label {
+  @apply mt-1 text-xs text-slate-500 dark:text-slate-300;
+}
+
+.account-card {
+  @apply rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900/60;
+}
+
+.account-icon {
+  @apply inline-flex h-10 w-10 items-center justify-center rounded-full text-white;
+}
+
+.icon-claude {
+  @apply bg-gradient-to-br from-purple-500 to-purple-600;
+}
+
+.icon-openai {
+  @apply bg-gradient-to-br from-sky-500 to-indigo-500;
+}
+
+.account-name {
+  @apply text-sm font-semibold text-slate-900 dark:text-slate-100;
+}
+
+.account-sub {
+  @apply text-xs text-slate-500 dark:text-slate-400;
+}
+
+.rate-badge {
+  @apply rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium dark:bg-slate-800;
+}
+
+.progress-row {
+  @apply flex items-center gap-2;
+}
+
+.progress-track {
+  @apply h-1.5 flex-1 rounded-full bg-slate-200 dark:bg-slate-700;
+}
+
+.progress-bar {
+  @apply h-1.5 rounded-full transition-all duration-300;
+}
+
+.progress-value {
+  @apply text-xs font-semibold text-slate-600 dark:text-slate-200;
+}
+
+.quota-row {
+  @apply rounded-xl border border-slate-200 bg-white/60 p-3 dark:border-slate-700 dark:bg-slate-900/50;
+}
+
+.quota-header {
+  @apply mb-2 flex items-center justify-between;
+}
+
+.quota-tag {
+  @apply inline-flex min-w-[34px] justify-center rounded-full px-2 py-0.5 text-[11px] font-semibold;
+}
+
+.tag-indigo {
+  @apply bg-indigo-100 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-200;
+}
+
+.tag-blue {
+  @apply bg-sky-100 text-sky-600 dark:bg-sky-500/20 dark:text-sky-200;
+}
+
+.quota-percent {
+  @apply text-xs font-semibold text-slate-600 dark:text-slate-200;
+}
+
+.quota-foot {
+  @apply mt-1 text-[11px] text-slate-400 dark:text-slate-300;
 }
 </style>
diff --git a/web/admin-spa/src/components/apistats/TokenDistribution.vue b/web/admin-spa/src/components/apistats/TokenDistribution.vue
index 56baa2bc..ac7b1404 100644
--- a/web/admin-spa/src/components/apistats/TokenDistribution.vue
+++ b/web/admin-spa/src/components/apistats/TokenDistribution.vue
@@ -95,6 +95,9 @@ const formatNumber = (num) => {
   box-shadow:
     0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   overflow: hidden;
   position: relative;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/web/admin-spa/src/views/ApiStatsView.vue b/web/admin-spa/src/views/ApiStatsView.vue
index e20e16b3..fb3296bc 100644
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -124,19 +124,15 @@
 
           <!-- Token 分布和限制配置 -->
           <div
-            class="mb-6 grid grid-cols-1 gap-4 md:mb-8 md:gap-6 lg:auto-rows-max lg:grid-cols-2 lg:items-start"
+            class="mb-6 mt-6 grid grid-cols-1 gap-4 md:mb-8 md:mt-8 md:gap-6 xl:grid-cols-2 xl:items-stretch"
           >
-            <div class="lg:col-span-1">
-              <TokenDistribution />
-            </div>
-            <!-- 单key模式下显示限制配置，使用整行避免出现大片空白 -->
-            <div v-if="!multiKeyMode" class="lg:col-span-2">
-              <LimitConfig />
-            </div>
-            <!-- 多key模式下显示聚合统计卡片，与 TokenDistribution 并排 -->
-            <div v-if="multiKeyMode" class="lg:col-span-1">
-              <AggregatedStatsCard />
-            </div>
+            <TokenDistribution class="h-full" />
+            <template v-if="multiKeyMode">
+              <AggregatedStatsCard class="h-full" />
+            </template>
+            <template v-else>
+              <LimitConfig class="h-full" />
+            </template>
           </div>
 
           <!-- 模型使用统计 -->