diff --git a/meshmap_frontend/src/components/AdminBlockingManagement.vue b/meshmap_frontend/src/components/AdminBlockingManagement.vue
index 26fc269..b9b4a2b 100644
--- a/meshmap_frontend/src/components/AdminBlockingManagement.vue
+++ b/meshmap_frontend/src/components/AdminBlockingManagement.vue
@@ -458,36 +458,36 @@ onMounted(() => {
       <p v-if="wordError" class="error">{{ wordError }}</p>
       <p v-if="wordMessage" class="success">{{ wordMessage }}</p>
 
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>ID</th>
+              <th class="cell-nowrap">ID</th>
               <th>违禁词</th>
-              <th>匹配类型</th>
-              <th>区分大小写</th>
+              <th class="cell-nowrap">匹配类型</th>
+              <th class="cell-nowrap">区分大小写</th>
               <th>原因</th>
-              <th>启用</th>
-              <th>创建时间</th>
-              <th>更新时间</th>
-              <th>操作</th>
+              <th class="cell-nowrap">启用</th>
+              <th class="cell-nowrap">创建时间</th>
+              <th class="cell-nowrap">更新时间</th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="rule in wordRules" :key="rule.id">
-              <td>{{ rule.id }}</td>
+              <td class="cell-nowrap">{{ rule.id }}</td>
               <td><input v-model="wordEdits[rule.id].word" class="admin-table-input" /></td>
               <td>
                 <select v-model="wordEdits[rule.id].match_type" class="admin-table-input">
                   <option value="contains">包含</option>
                 </select>
               </td>
-              <td><input v-model="wordEdits[rule.id].case_sensitive" type="checkbox" /></td>
+              <td class="cell-nowrap"><input v-model="wordEdits[rule.id].case_sensitive" type="checkbox" /></td>
               <td><input v-model="wordEdits[rule.id].reason" class="admin-table-input" /></td>
-              <td><input v-model="wordEdits[rule.id].enabled" type="checkbox" /></td>
-              <td>{{ formatTime(rule.created_at) }}</td>
-              <td>{{ formatTime(rule.updated_at) }}</td>
-              <td>
+              <td class="cell-nowrap"><input v-model="wordEdits[rule.id].enabled" type="checkbox" /></td>
+              <td class="cell-nowrap">{{ formatTime(rule.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(rule.updated_at) }}</td>
+              <td class="cell-nowrap">
                 <button class="admin-button" :disabled="wordLoading" @click="saveWordRule(rule)">保存</button>
                 <button class="admin-button" :disabled="wordLoading" @click="removeWordRule(rule)">删除</button>
               </td>
@@ -533,30 +533,30 @@ onMounted(() => {
       <p v-if="nodeError" class="error">{{ nodeError }}</p>
       <p v-if="nodeMessage" class="success">{{ nodeMessage }}</p>
 
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>ID</th>
+              <th class="cell-nowrap">ID</th>
               <th>节点 ID</th>
-              <th>数字 ID</th>
+              <th class="cell-nowrap">数字 ID</th>
               <th>原因</th>
-              <th>启用</th>
-              <th>创建时间</th>
-              <th>更新时间</th>
-              <th>操作</th>
+              <th class="cell-nowrap">启用</th>
+              <th class="cell-nowrap">创建时间</th>
+              <th class="cell-nowrap">更新时间</th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="rule in nodeRules" :key="rule.id">
-              <td>{{ rule.id }}</td>
+              <td class="cell-nowrap">{{ rule.id }}</td>
               <td><input v-model="nodeEdits[rule.id].node_id" class="admin-table-input" /></td>
               <td><input v-model="nodeEdits[rule.id].node_num" class="admin-table-input" placeholder="可选" /></td>
               <td><input v-model="nodeEdits[rule.id].reason" class="admin-table-input" /></td>
-              <td><input v-model="nodeEdits[rule.id].enabled" type="checkbox" /></td>
-              <td>{{ formatTime(rule.created_at) }}</td>
-              <td>{{ formatTime(rule.updated_at) }}</td>
-              <td>
+              <td class="cell-nowrap"><input v-model="nodeEdits[rule.id].enabled" type="checkbox" /></td>
+              <td class="cell-nowrap">{{ formatTime(rule.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(rule.updated_at) }}</td>
+              <td class="cell-nowrap">
                 <button class="admin-button" :disabled="nodeLoading" @click="saveNodeRule(rule)">保存</button>
                 <button class="admin-button" :disabled="nodeLoading" @click="removeNodeRule(rule)">删除</button>
               </td>
@@ -599,28 +599,28 @@ onMounted(() => {
       <p v-if="ipError" class="error">{{ ipError }}</p>
       <p v-if="ipMessage" class="success">{{ ipMessage }}</p>
 
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>ID</th>
+              <th class="cell-nowrap">ID</th>
               <th>IP/CIDR</th>
               <th>原因</th>
-              <th>启用</th>
-              <th>创建时间</th>
-              <th>更新时间</th>
-              <th>操作</th>
+              <th class="cell-nowrap">启用</th>
+              <th class="cell-nowrap">创建时间</th>
+              <th class="cell-nowrap">更新时间</th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="rule in ipRules" :key="rule.id">
-              <td>{{ rule.id }}</td>
+              <td class="cell-nowrap">{{ rule.id }}</td>
               <td><input v-model="ipEdits[rule.id].ip_value" class="admin-table-input" /></td>
               <td><input v-model="ipEdits[rule.id].reason" class="admin-table-input" /></td>
-              <td><input v-model="ipEdits[rule.id].enabled" type="checkbox" /></td>
-              <td>{{ formatTime(rule.created_at) }}</td>
-              <td>{{ formatTime(rule.updated_at) }}</td>
-              <td>
+              <td class="cell-nowrap"><input v-model="ipEdits[rule.id].enabled" type="checkbox" /></td>
+              <td class="cell-nowrap">{{ formatTime(rule.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(rule.updated_at) }}</td>
+              <td class="cell-nowrap">
                 <button class="admin-button" :disabled="ipLoading" @click="saveIPRule(rule)">保存</button>
                 <button class="admin-button" :disabled="ipLoading" @click="removeIPRule(rule)">删除</button>
               </td>
diff --git a/meshmap_frontend/src/components/AdminBotDirect.vue b/meshmap_frontend/src/components/AdminBotDirect.vue
index 494ea48..04a7ed4 100644
--- a/meshmap_frontend/src/components/AdminBotDirect.vue
+++ b/meshmap_frontend/src/components/AdminBotDirect.vue
@@ -360,40 +360,43 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="panel direct-page">
-    <div class="direct-header">
-      <div>
-        <p class="eyebrow">Direct Bot Chat</p>
-        <h2>
-          机器人私聊
-          <span class="pki-badge" title="使用 X25519 + AES-CCM 与目标节点端到端加密">PKI 加密</span>
-          <span v-if="unreadTotal > 0" class="header-unread-badge">{{ unreadTotal > 99 ? '99+' : unreadTotal }} 未读</span>
-        </h2>
+  <section class="admin-dashboard">
+    <div class="panel">
+      <div class="panel-header direct-header">
+        <div>
+          <p class="eyebrow">Direct Bot Chat</p>
+          <h2>
+            机器人私聊
+            <span class="pki-badge" title="使用 X25519 + AES-CCM 与目标节点端到端加密">PKI 加密</span>
+            <span v-if="unreadTotal > 0" class="header-unread-badge">{{ unreadTotal > 99 ? '99+' : unreadTotal }} 未读</span>
+          </h2>
+        </div>
+        <div class="direct-actions">
+          <a class="admin-button secondary" href="/admin/bot">返回频道聊天</a>
+          <button class="admin-button" @click="refreshLists" :disabled="loading">{{ loading ? '刷新中...' : '刷新列表' }}</button>
+        </div>
       </div>
-      <div class="direct-actions">
-        <a class="admin-button secondary" href="/admin/bot">返回频道聊天</a>
-        <button class="admin-button" @click="refreshLists" :disabled="loading">{{ loading ? '刷新中...' : '刷新列表' }}</button>
+
+      <p v-if="error" class="error">{{ error }}</p>
+      <p v-if="notice" class="success">{{ notice }}</p>
+
+      <div class="direct-bot-picker">
+        <label>机器人
+          <select v-model="selectedBotId">
+            <option :value="null">选择机器人</option>
+            <option v-for="bot in bots" :key="bot.id" :value="bot.id">{{ bot.long_name }} · {{ bot.node_id }}</option>
+          </select>
+        </label>
+        <label>新建私聊
+          <select :value="''" @change="(event) => { startConversationFromPicker(Number((event.target as HTMLSelectElement).value)); (event.target as HTMLSelectElement).value = '' }">
+            <option value="">选择目标节点开启会话</option>
+            <option v-for="node in peerNodeOptions" :key="node.node_id" :value="node.node_num">{{ node.long_name || node.short_name || node.node_id }} · {{ node.node_id }}</option>
+          </select>
+        </label>
       </div>
     </div>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="notice" class="success">{{ notice }}</p>
-
-    <div class="direct-bot-picker">
-      <label>机器人
-        <select v-model="selectedBotId">
-          <option :value="null">选择机器人</option>
-          <option v-for="bot in bots" :key="bot.id" :value="bot.id">{{ bot.long_name }} · {{ bot.node_id }}</option>
-        </select>
-      </label>
-      <label>新建私聊
-        <select :value="''" @change="(event) => { startConversationFromPicker(Number((event.target as HTMLSelectElement).value)); (event.target as HTMLSelectElement).value = '' }">
-          <option value="">选择目标节点开启会话</option>
-          <option v-for="node in peerNodeOptions" :key="node.node_id" :value="node.node_num">{{ node.long_name || node.short_name || node.node_id }} · {{ node.node_id }}</option>
-        </select>
-      </label>
-    </div>
-
+    <div class="panel direct-chat-panel">
     <div class="direct-layout">
       <aside class="conversation-list">
         <p v-if="conversations.length === 0" class="empty-state">还没有私聊会话。等设备发来消息或在上方“新建私聊”开启。</p>
@@ -442,11 +445,13 @@ onBeforeUnmount(() => {
         </div>
       </div>
     </div>
+    </div>
   </section>
 </template>
 
 <style scoped>
-.direct-page { display: grid; gap: 12px; padding: 16px; }
+.direct-chat-panel { padding: 16px; }
+.direct-bot-picker { padding: 16px; }
 .direct-header, .direct-actions, .send-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
 .direct-bot-picker { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 12px; }
 .direct-hint { color: #475569; font-size: 12px; margin: 0 0 8px; }
diff --git a/meshmap_frontend/src/components/AdminDashboard.vue b/meshmap_frontend/src/components/AdminDashboard.vue
index 3fc909b..3292d3f 100644
--- a/meshmap_frontend/src/components/AdminDashboard.vue
+++ b/meshmap_frontend/src/components/AdminDashboard.vue
@@ -253,7 +253,7 @@ onBeforeUnmount(() => {
         </div>
         <span class="badge">{{ status?.clients?.length ?? 0 }}</span>
       </div>
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
@@ -261,9 +261,9 @@ onBeforeUnmount(() => {
               <th class="sortable" @click="toggleClientSort('username')">Username <span class="sort-indicator">{{ sortIndicator('username') }}</span></th>
               <th class="sortable" @click="toggleClientSort('listener')">Listener <span class="sort-indicator">{{ sortIndicator('listener') }}</span></th>
               <th class="sortable" @click="toggleClientSort('remote_addr')">Remote Addr <span class="sort-indicator">{{ sortIndicator('remote_addr') }}</span></th>
-              <th class="sortable" @click="toggleClientSort('packets_in')">客户端→服务器 <span class="sort-indicator">{{ sortIndicator('packets_in') }}</span></th>
-              <th class="sortable" @click="toggleClientSort('packets_out')">服务器→客户端 <span class="sort-indicator">{{ sortIndicator('packets_out') }}</span></th>
-              <th>操作</th>
+              <th class="sortable cell-nowrap" @click="toggleClientSort('packets_in')">客户端→服务器 <span class="sort-indicator">{{ sortIndicator('packets_in') }}</span></th>
+              <th class="sortable cell-nowrap" @click="toggleClientSort('packets_out')">服务器→客户端 <span class="sort-indicator">{{ sortIndicator('packets_out') }}</span></th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
@@ -272,9 +272,9 @@ onBeforeUnmount(() => {
               <td>{{ client.username || '-' }}</td>
               <td>{{ client.listener || '-' }}</td>
               <td>{{ client.remote_addr || '-' }}</td>
-              <td>{{ client.packets_in ?? 0 }}</td>
-              <td>{{ client.packets_out ?? 0 }}</td>
-              <td>
+              <td class="cell-nowrap">{{ client.packets_in ?? 0 }}</td>
+              <td class="cell-nowrap">{{ client.packets_out ?? 0 }}</td>
+              <td class="cell-nowrap">
                 <button
                   type="button"
                   class="client-danger-action"
diff --git a/meshmap_frontend/src/components/AdminDiscardDetails.vue b/meshmap_frontend/src/components/AdminDiscardDetails.vue
index c82675b..1fb615c 100644
--- a/meshmap_frontend/src/components/AdminDiscardDetails.vue
+++ b/meshmap_frontend/src/components/AdminDiscardDetails.vue
@@ -135,11 +135,11 @@ onMounted(refreshItems)
       </div>
 
       <p v-if="error" class="error">{{ error }}</p>
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th style="width: 40px;">
+              <th style="width: 40px;" class="cell-nowrap">
                 <input
                   type="checkbox"
                   :checked="allSelected"
@@ -148,10 +148,10 @@ onMounted(refreshItems)
                   @change="toggleAll(($event.target as HTMLInputElement).checked)"
                 />
               </th>
-              <th>时间</th>
+              <th class="cell-nowrap">时间</th>
               <th>Topic</th>
               <th>Error</th>
-              <th>Payload Len</th>
+              <th class="cell-nowrap">Payload Len</th>
               <th>Client ID</th>
               <th>Username</th>
               <th>Listener</th>
@@ -162,17 +162,17 @@ onMounted(refreshItems)
           </thead>
           <tbody>
             <tr v-for="item in items" :key="item.id">
-              <td>
+              <td class="cell-nowrap">
                 <input
                   type="checkbox"
                   :checked="selectedIds.has(item.id)"
                   @change="toggleRow(item.id, ($event.target as HTMLInputElement).checked)"
                 />
               </td>
-              <td>{{ formatTime(item.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(item.created_at) }}</td>
               <td>{{ item.topic || '-' }}</td>
               <td>{{ item.error || '-' }}</td>
-              <td>{{ item.payload_len }}</td>
+              <td class="cell-nowrap">{{ item.payload_len }}</td>
               <td>{{ item.mqtt_client_id || '-' }}</td>
               <td>{{ item.mqtt_username || '-' }}</td>
               <td>{{ item.mqtt_listener || '-' }}</td>
diff --git a/meshmap_frontend/src/components/AdminLLM.vue b/meshmap_frontend/src/components/AdminLLM.vue
index a6e479f..d250dcf 100644
--- a/meshmap_frontend/src/components/AdminLLM.vue
+++ b/meshmap_frontend/src/components/AdminLLM.vue
@@ -14,13 +14,6 @@ const offset = ref(0)
 const selectedBotId = ref<number | ''>('')
 const includeDeleted = ref(false)
 
-const statusColors: Record<string, string> = {
-  pending: 'background: linear-gradient(135deg, #fef3c7 0%, #fde68a33 100%);',
-  processing: 'background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe33 100%);',
-  processed: 'background: linear-gradient(135deg, #dcfce7 0%, #bbf7d033 100%);',
-  error: 'background: linear-gradient(135deg, #fee2e2 0%, #fecaca33 100%);',
-}
-
 const statusLabels: Record<string, string> = {
   pending: '待处理',
   processing: '处理中',
@@ -178,12 +171,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="admin-llm">
-    <h2>LLM 消息队列</h2>
-
-    <div class="admin-llm-section">
-      <h3>机器人 LLM 设置</h3>
-      <p class="section-desc">每个机器人可以独立启用或禁用 LLM 消息队列。启用后，该机器人收到的私聊消息将被加入队列。</p>
+  <section class="admin-dashboard">
+    <div class="panel admin-status-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">LLM</p>
+          <h2>机器人 LLM 设置</h2>
+        </div>
+      </div>
+      <p class="llm-section-desc">每个机器人可以独立启用或禁用 LLM 消息队列。启用后，该机器人收到的私聊消息将被加入队列。</p>
 
       <div class="bot-settings-grid">
         <div v-for="bot in botNodes" :key="bot.id" class="bot-settings-card">
@@ -216,608 +212,345 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class="admin-llm-toolbar">
-      <div class="admin-llm-filter">
-        <label>选择机器人：</label>
-        <select v-model="selectedBotId" @change="loadMessages(true)">
-          <option :value="''">全部</option>
-          <option v-for="bot in botNodes" :key="bot.id" :value="bot.id">
-            {{ bot.long_name }} ({{ bot.node_id }})
-          </option>
-        </select>
+    <div class="panel admin-status-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Queue</p>
+          <h2>LLM 消息队列</h2>
+        </div>
+        <div class="admin-actions">
+          <button class="admin-button" @click="() => loadMessages()" :disabled="loading">{{ loading ? '刷新中...' : '刷新' }}</button>
+        </div>
       </div>
 
-      <div class="admin-llm-filter">
-        <label>
+      <div class="llm-toolbar">
+        <label class="llm-filter">
+          <span>选择机器人</span>
+          <select v-model="selectedBotId" @change="loadMessages(true)">
+            <option :value="''">全部</option>
+            <option v-for="bot in botNodes" :key="bot.id" :value="bot.id">
+              {{ bot.long_name }} ({{ bot.node_id }})
+            </option>
+          </select>
+        </label>
+
+        <label class="llm-filter llm-filter-inline">
           <input type="checkbox" v-model="includeDeleted" @change="loadMessages(true)" />
           包含已删除
         </label>
+
+        <button class="admin-button danger" @click="handleDeleteAllByBot" :disabled="!selectedBotId">
+          删除该机器人所有消息
+        </button>
       </div>
 
-      <button class="admin-button admin-button-danger" @click="handleDeleteAllByBot" :disabled="!selectedBotId">
-        删除该机器人所有消息
-      </button>
+      <p v-if="error" class="error">{{ error }}</p>
 
-      <button class="admin-button" @click="() => loadMessages()">刷新</button>
+      <div class="llm-stats">
+        共 {{ total }} 条消息，当前显示 {{ displayFrom }} - {{ displayTo }}
+      </div>
+
+      <div v-if="loading" class="empty">加载中...</div>
+
+      <div v-else class="node-table-wrap table-fit-wrap">
+        <table class="node-table">
+          <thead>
+            <tr>
+              <th class="cell-nowrap">ID</th>
+              <th>机器人</th>
+              <th class="cell-nowrap">类型</th>
+              <th class="cell-nowrap">状态</th>
+              <th>来自节点</th>
+              <th>频道</th>
+              <th>消息内容</th>
+              <th class="cell-nowrap">接收时间</th>
+              <th class="cell-nowrap">处理时间</th>
+              <th class="cell-nowrap">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="msg in messages" :key="msg.id">
+              <td class="cell-nowrap">{{ msg.id }}</td>
+              <td>
+                <div class="bot-info">
+                  <div class="bot-long-name">{{ getBotName(msg.bot_id) }}</div>
+                  <div class="bot-node-id" v-if="msg.bot_id !== 0">{{ msg.bot_node_id }}</div>
+                </div>
+              </td>
+              <td class="cell-nowrap">
+                <span class="type-badge" :class="getMessageType(msg) === '频道' ? 'channel' : 'direct'">
+                  {{ getMessageType(msg) }}
+                </span>
+              </td>
+              <td class="cell-nowrap">
+                <span class="status-badge" :class="`status-${msg.status}`">
+                  {{ statusLabels[msg.status] || msg.status }}
+                </span>
+              </td>
+              <td>
+                <div class="node-info">
+                  <div class="node-name">{{ msg.long_name || msg.short_name || '-' }}</div>
+                  <div class="node-id">{{ msg.from_node_id }}</div>
+                </div>
+              </td>
+              <td class="channel-cell">{{ msg.channel_id || '-' }}</td>
+              <td class="message-text">{{ msg.text }}</td>
+              <td class="cell-nowrap">{{ formatTime(msg.received_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(msg.processed_at) }}</td>
+              <td class="cell-nowrap">
+                <button
+                  v-if="!msg.deleted_at"
+                  class="admin-button danger"
+                  @click="handleDeleteMessage(msg.id)"
+                >
+                  删除
+                </button>
+                <span v-else class="muted-tag">已删除</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="messages.length === 0" class="empty">暂无消息</div>
+      </div>
+
+      <div class="pagination">
+        <button @click="goPrev" :disabled="!hasPrev">上一页</button>
+        <span>第 {{ Math.floor(offset / limit) + 1 }} 页</span>
+        <button @click="goNext" :disabled="!hasMore">下一页</button>
+      </div>
     </div>
-
-    <p v-if="error" class="error">{{ error }}</p>
-
-    <div class="admin-llm-stats">
-      共 {{ total }} 条消息，当前显示 {{ displayFrom }} - {{ displayTo }}
-    </div>
-
-    <div v-if="loading" class="admin-loading">
-      <div style="margin-bottom: 1rem;">🔄</div>
-      加载中...
-    </div>
-
-    <div v-else class="admin-llm-table-wrapper">
-      <table class="admin-llm-table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>机器人</th>
-          <th>类型</th>
-          <th>状态</th>
-          <th>来自节点</th>
-          <th>频道</th>
-          <th>消息内容</th>
-          <th>接收时间</th>
-          <th>处理时间</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="msg in messages" :key="msg.id" :style="statusColors[msg.status]">
-          <td>{{ msg.id }}</td>
-          <td class="bot-name-cell">
-            <div class="bot-info">
-              <div class="bot-long-name">{{ getBotName(msg.bot_id) }}</div>
-              <div class="bot-node-id" v-if="msg.bot_id !== 0">{{ msg.bot_node_id }}</div>
-            </div>
-          </td>
-          <td>
-            <span class="type-badge" :class="getMessageType(msg) === '频道' ? 'channel' : 'direct'">
-              {{ getMessageType(msg) }}
-            </span>
-          </td>
-          <td>
-            <span class="status-badge" :style="statusColors[msg.status]">
-              {{ statusLabels[msg.status] || msg.status }}
-            </span>
-          </td>
-          <td>
-            <div class="node-info">
-              <div class="node-name">{{ msg.long_name || msg.short_name || '-' }}</div>
-              <div class="node-id">{{ msg.from_node_id }}</div>
-            </div>
-          </td>
-          <td class="channel-cell">{{ msg.channel_id || '-' }}</td>
-          <td class="message-text">{{ msg.text }}</td>
-          <td>{{ formatTime(msg.received_at) }}</td>
-          <td>{{ formatTime(msg.processed_at) }}</td>
-          <td>
-            <button
-              v-if="!msg.deleted_at"
-              class="admin-button admin-button-small admin-button-danger"
-              @click="handleDeleteMessage(msg.id)"
-            >
-              删除
-            </button>
-            <span v-else class="muted-tag">已删除</span>
-          </td>
-        </tr>
-        <tr v-if="messages.length === 0">
-          <td colspan="10" class="empty-state">暂无消息</td>
-        </tr>
-      </tbody>
-    </table>
-    </div>
-
-    <div class="admin-llm-pagination">
-      <button class="admin-button admin-button-small" @click="goPrev" :disabled="!hasPrev">上一页</button>
-      <span class="pagination-info">第 {{ Math.floor(offset / limit) + 1 }} 页</span>
-      <button class="admin-button admin-button-small" @click="goNext" :disabled="!hasMore">下一页</button>
-    </div>
-  </div>
+  </section>
 </template>
 
 <style scoped>
-.admin-llm {
-  padding: 1.5rem;
-  max-width: 100%;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  min-height: 100vh;
-}
-
-.admin-llm h2 {
-  margin: 0 0 2rem;
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: #1e293b;
-  letter-spacing: -0.02em;
-}
-
-.admin-llm-section {
-  background: white;
-  padding: 1.75rem;
-  border-radius: 16px;
-  margin-bottom: 2rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
-  border: 1px solid #e2e8f0;
-}
-
-.admin-llm-section h3 {
-  margin: 0 0 0.75rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #334155;
-}
-
-.section-desc {
-  margin: 0 0 1.5rem;
-  color: #64748b;
-  font-size: 0.95rem;
-  line-height: 1.5;
+.llm-section-desc {
+  margin: 0;
+  padding: 12px 16px 0;
+  color: var(--color-muted);
+  font-size: 13px;
+  line-height: 1.6;
 }
 
 .bot-settings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  padding: 16px;
 }
 
 .bot-settings-card {
-  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
-  padding: 1.25rem;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  transition: all 0.2s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.bot-settings-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-  opacity: 0;
-  transition: opacity 0.2s ease;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 14px;
+  background: var(--color-surface-soft);
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
 }
 
 .bot-settings-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
-  border-color: #cbd5e1;
-}
-
-.bot-settings-card:hover::before {
-  opacity: 1;
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }
 
 .bot-header {
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  gap: 6px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .bot-header strong {
-  font-size: 1.05rem;
-  color: #1e293b;
-  font-weight: 600;
+  color: var(--color-heading);
+  font-size: 15px;
 }
 
 .bot-node-id {
-  font-size: 0.8rem;
-  color: #64748b;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
-  background: #f1f5f9;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
   display: inline-block;
   width: fit-content;
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  color: var(--color-muted);
+  background: var(--color-surface-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
 }
 
 .bot-settings {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 8px;
 }
 
 .setting-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 8px;
+  border-radius: var(--radius-sm);
+  padding: 6px 8px;
+  color: var(--color-text);
+  font-size: 13px;
   cursor: pointer;
-  font-size: 0.9rem;
-  color: #475569;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.16s ease;
 }
 
 .setting-item:hover {
-  background: #f1f5f9;
+  background: var(--color-primary-soft);
 }
 
 .setting-item input[type='checkbox'] {
   cursor: pointer;
-  width: 18px;
-  height: 18px;
-  accent-color: #3b82f6;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary);
 }
 
 .saving-indicator {
-  margin-top: 0.75rem;
-  font-size: 0.8rem;
-  color: #3b82f6;
+  margin-top: 8px;
+  color: var(--color-primary);
+  font-size: 12px;
+}
+
+.llm-toolbar {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.saving-indicator::before {
-  content: '';
-  width: 12px;
-  height: 12px;
-  border: 2px solid #3b82f6;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.admin-llm-toolbar {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  margin-bottom: 1.5rem;
+  align-items: flex-end;
   flex-wrap: wrap;
-  padding: 1.25rem;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e2e8f0;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.admin-llm-filter {
+.llm-filter {
+  display: grid;
+  gap: 6px;
+  color: var(--color-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.llm-filter select {
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  padding: 9px 12px;
+  min-width: 220px;
+  color: var(--color-heading);
+  background: var(--color-surface);
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.llm-filter select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+.llm-filter-inline {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-}
-
-.admin-llm-filter label {
-  font-size: 0.9rem;
-  color: #64748b;
-  font-weight: 500;
-}
-
-.admin-llm-filter select {
-  padding: 0.6rem 1rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 8px;
-  min-width: 220px;
-  font-size: 0.9rem;
-  color: #334155;
-  background: white;
+  gap: 8px;
+  padding-bottom: 9px;
+  color: var(--color-text);
+  font-size: 13px;
   cursor: pointer;
-  transition: all 0.15s ease;
 }
 
-.admin-llm-filter select:hover {
-  border-color: #94a3b8;
-}
-
-.admin-llm-filter select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.admin-llm-filter input[type='checkbox'] {
+.llm-filter-inline input[type='checkbox'] {
   width: 16px;
   height: 16px;
-  accent-color: #3b82f6;
+  accent-color: var(--color-primary);
   cursor: pointer;
 }
 
-.admin-llm-stats {
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-  border-radius: 10px;
-  margin-bottom: 1.25rem;
-  font-size: 0.9rem;
-  color: #1e40af;
-  font-weight: 500;
-  display: flex;
+.llm-stats {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-muted);
+  font-size: 13px;
+}
+
+.type-badge,
+.status-badge {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  border: 1px solid #bfdbfe;
-}
-
-.admin-loading {
-  padding: 3rem;
-  text-align: center;
-  color: #64748b;
-  background: white;
-  border-radius: 12px;
-  font-size: 1rem;
-}
-
-.type-badge {
-  display: inline-block;
-  padding: 0.35rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
 .type-badge.channel {
-  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
-  color: #4338ca;
-  border: 1px solid #a5b4fc;
+  color: color-mix(in srgb, var(--color-primary) 78%, var(--color-heading));
+  background: var(--color-primary-soft);
 }
 
 .type-badge.direct {
-  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
-  color: #be185d;
-  border: 1px solid #f9a8d4;
+  color: color-mix(in srgb, var(--color-accent) 78%, var(--color-heading));
+  background: color-mix(in srgb, var(--color-accent) 14%, white);
 }
 
-.channel-cell {
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
-  font-size: 0.8rem;
-  color: #64748b;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: #f8fafc;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
+.status-badge.status-pending {
+  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
+  background: var(--color-warning-soft);
 }
 
-.bot-name-cell {
-  min-width: 160px;
+.status-badge.status-processing {
+  color: color-mix(in srgb, var(--color-primary) 78%, var(--color-heading));
+  background: var(--color-primary-soft);
 }
 
-.bot-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
+.status-badge.status-processed {
+  color: color-mix(in srgb, var(--color-success) 70%, var(--color-heading));
+  background: var(--color-success-soft);
 }
 
-.bot-long-name {
-  font-weight: 600;
-  color: #1e293b;
+.status-badge.status-error {
+  color: color-mix(in srgb, var(--color-danger) 76%, var(--color-heading));
+  background: var(--color-danger-soft);
 }
 
+.bot-info,
 .node-info {
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
+  gap: 4px;
 }
 
+.bot-long-name,
 .node-name {
-  font-weight: 600;
-  color: #1e293b;
+  color: var(--color-heading);
+  font-weight: 700;
 }
 
 .node-id {
-  font-size: 0.8rem;
-  color: #64748b;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
-  background: #f1f5f9;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
   display: inline-block;
   width: fit-content;
+  border-radius: var(--radius-sm);
+  padding: 1px 6px;
+  color: var(--color-muted);
+  background: var(--color-surface-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
 }
 
-.admin-llm-table-wrapper {
-  overflow-x: auto;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e2e8f0;
+.channel-cell {
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
 }
 
-.admin-llm-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-  min-width: 1000px;
-}
-
-.admin-llm-table th,
-.admin-llm-table td {
-  padding: 1rem;
-  text-align: left;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.admin-llm-table th {
-  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
-  font-weight: 600;
-  color: #475569;
-  position: sticky;
-  top: 0;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  border-bottom: 2px solid #e2e8f0;
-}
-
-.admin-llm-table tbody tr {
-  transition: background-color 0.15s ease;
-}
-
-.admin-llm-table tbody tr:hover {
-  background: #f8fafc;
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 0.4rem 0.8rem;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  border: 1px solid transparent;
+.message-text {
+  line-height: 1.5;
 }
 
 .muted-tag {
   display: inline-block;
-  padding: 0.25rem 0.6rem;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  color: #94a3b8;
-  background: #f1f5f9;
-}
-
-.status-badge[style*='#fff3cd'] {
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
-  color: #92400e;
-  border-color: #fcd34d;
-}
-
-.status-badge[style*='#cfe2ff'] {
-  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
-  color: #1e40af;
-  border-color: #93c5fd;
-}
-
-.status-badge[style*='#d1e7dd'] {
-  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
-  color: #166534;
-  border-color: #86efac;
-}
-
-.status-badge[style*='#f8d7da'] {
-  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
-  color: #991b1b;
-  border-color: #fca5a5;
-}
-
-.message-text {
-  max-width: 450px;
-  word-break: break-word;
-  line-height: 1.5;
-  color: #334155;
-  font-size: 0.875rem;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 4rem 2rem !important;
-  color: #94a3b8;
-  font-size: 1rem;
-}
-
-.empty-state::before {
-  content: '📭';
-  display: block;
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.admin-llm-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
-  padding: 1.25rem;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e2e8f0;
-}
-
-.pagination-info {
-  color: #64748b;
-  font-size: 0.9rem;
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  background: #f8fafc;
-  border-radius: 8px;
-  min-width: 80px;
-  text-align: center;
-}
-
-.error {
-  color: #991b1b;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-  border-radius: 10px;
-  margin-bottom: 1.25rem;
-  border: 1px solid #fca5a5;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.error::before {
-  content: '⚠️';
-}
-
-.admin-button {
-  padding: 0.6rem 1.25rem;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
-}
-
-.admin-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-}
-
-.admin-button:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.admin-button-small {
-  padding: 0.4rem 0.75rem;
-  font-size: 0.8rem;
-}
-
-.admin-button-danger {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
-}
-
-.admin-button-danger:hover:not(:disabled) {
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  color: var(--color-muted);
+  background: var(--color-surface-muted);
+  font-size: 12px;
 }
 </style>
diff --git a/meshmap_frontend/src/components/AdminLLMApi.vue b/meshmap_frontend/src/components/AdminLLMApi.vue
index a143238..123a9be 100644
--- a/meshmap_frontend/src/components/AdminLLMApi.vue
+++ b/meshmap_frontend/src/components/AdminLLMApi.vue
@@ -338,342 +338,346 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="admin-llm-api">
-    <h2>LLM API 配置管理</h2>
+  <section class="admin-dashboard">
+    <div class="panel">
+      <div class="ai-status-bar">
+        <span class="status-indicator" :class="{ running: aiStatus.running, stopped: !aiStatus.running }"></span>
+        <span class="status-text">
+          <template v-if="aiStatus.running">AI 服务运行中，{{ aiStatus.provider_count }} 个提供商</template>
+          <template v-else>{{ aiStatus.message || 'AI 服务未运行' }}</template>
+        </span>
+        <button
+          class="admin-button"
+          :disabled="restarting"
+          @click="handleRestartAI"
+        >
+          {{ restarting ? '重启中...' : '重启 AI 服务' }}
+        </button>
+      </div>
 
-    <div class="ai-status-bar">
-      <span class="status-indicator" :class="{ running: aiStatus.running, stopped: !aiStatus.running }"></span>
-      <span class="status-text">
-        <template v-if="aiStatus.running">AI 服务运行中，{{ aiStatus.provider_count }} 个提供商</template>
-        <template v-else>{{ aiStatus.message || 'AI 服务未运行' }}</template>
-      </span>
-      <button
-        class="admin-button admin-button-small"
-        :disabled="restarting"
-        @click="handleRestartAI"
-      >
-        {{ restarting ? '重启中...' : '重启 AI 服务' }}
-      </button>
+      <p v-if="error" class="error">{{ error }}</p>
+      <p v-if="success" :class="showWarning ? 'warning' : 'success'">{{ success }}</p>
     </div>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="success" :class="showWarning ? 'warning' : 'success'">{{ success }}</p>
-
     <!-- LLM Provider 列表 -->
-    <div class="admin-section">
-      <div class="section-header">
+    <div class="panel">
+      <div class="panel-header">
         <div>
-          <h3>AI 提供商配置</h3>
-          <p class="section-desc">管理多个 LLM API 提供商配置，支持不同模型和服务。</p>
+          <p class="eyebrow">Providers</p>
+          <h2>AI 提供商配置</h2>
         </div>
         <button class="admin-button" @click="openCreateProvider">+ 添加配置</button>
       </div>
+      <p class="section-desc">管理多个 LLM API 提供商配置，支持不同模型和服务。</p>
 
-      <div v-if="loading" class="admin-loading">加载中...</div>
+      <div class="section-body">
+        <div v-if="loading" class="empty">加载中...</div>
 
-      <div v-else class="provider-grid">
-        <div v-for="provider in providers" :key="provider.name" class="provider-card">
-          <div class="provider-header">
-            <div class="provider-name">
-              <span class="status-badge" :class="{ active: provider.active, inactive: !provider.active }">
-                {{ provider.active ? '启用' : '停用' }}
-              </span>
-              <strong>{{ provider.name }}</strong>
+        <div v-else class="provider-grid">
+          <div v-for="provider in providers" :key="provider.name" class="provider-card">
+            <div class="provider-header">
+              <div class="provider-name">
+                <span class="status-badge" :class="{ active: provider.active, inactive: !provider.active }">
+                  {{ provider.active ? '启用' : '停用' }}
+                </span>
+                <strong>{{ provider.name }}</strong>
+              </div>
+              <div class="provider-actions">
+                <button class="admin-button" @click="openEditProvider(provider)">编辑</button>
+                <button class="admin-button danger" @click="confirmDeleteProvider(provider.name)">删除</button>
+              </div>
             </div>
-            <div class="provider-actions">
-              <button class="admin-button admin-button-small" @click="openEditProvider(provider)">编辑</button>
-              <button class="admin-button admin-button-small admin-button-danger" @click="confirmDeleteProvider(provider.name)">删除</button>
+            <div class="provider-details">
+              <div class="detail-row">
+                <span class="detail-label">API 地址</span>
+                <span class="detail-value">{{ provider.base_url }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">模型</span>
+                <span class="detail-value">{{ provider.model || '-' }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">超时</span>
+                <span class="detail-value">{{ provider.timeout }} 秒</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">上下文窗口</span>
+                <span class="detail-value">{{ provider.context_window_tokens.toLocaleString() }} tokens</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">API Key</span>
+                <span class="detail-value masked">{{ provider.api_key ? '••••••••••' : '-' }}</span>
+              </div>
             </div>
           </div>
-          <div class="provider-details">
-            <div class="detail-row">
-              <span class="detail-label">API 地址</span>
-              <span class="detail-value">{{ provider.base_url }}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">模型</span>
-              <span class="detail-value">{{ provider.model || '-' }}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">超时</span>
-              <span class="detail-value">{{ provider.timeout }} 秒</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">上下文窗口</span>
-              <span class="detail-value">{{ provider.context_window_tokens.toLocaleString() }} tokens</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">API Key</span>
-              <span class="detail-value masked">{{ provider.api_key ? '••••••••••' : '-' }}</span>
-            </div>
-          </div>
-        </div>
 
-        <div v-if="providers.length === 0" class="empty-state">
-          <p>暂无配置，点击上方按钮添加第一个 AI 提供商配置。</p>
+          <div v-if="providers.length === 0" class="empty">暂无配置，点击上方按钮添加第一个 AI 提供商配置。</div>
         </div>
       </div>
     </div>
 
     <!-- Tool Router 配置 -->
-    <div class="admin-section">
-      <div class="section-header">
+    <div class="panel">
+      <div class="panel-header">
         <div>
-          <h3>工具路由配置</h3>
-          <p class="section-desc">配置 LLM 工具调用的路由设置，用于实现函数调用功能。</p>
+          <p class="eyebrow">Tool Router</p>
+          <h2>工具路由配置</h2>
         </div>
         <button v-if="!editingToolRouter" class="admin-button" @click="openEditToolRouter">编辑配置</button>
       </div>
+      <p class="section-desc">配置 LLM 工具调用的路由设置，用于实现函数调用功能。</p>
 
-      <div v-if="editingToolRouter" class="tool-router-form">
-        <div class="form-group">
-          <label>
-            <input type="checkbox" v-model="toolRouterForm.enabled" />
-            启用工具路由
-          </label>
-        </div>
-
-        <div class="form-row">
+      <div class="section-body">
+        <div v-if="editingToolRouter" class="tool-router-form">
           <div class="form-group">
-            <label>使用的 AI 配置</label>
-            <select v-model="toolRouterForm.openai_name" class="form-input">
-              <option value="">请选择</option>
-              <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
-            </select>
-            <p class="form-hint">选择用于工具调用的 AI 提供商配置</p>
+            <label>
+              <input type="checkbox" v-model="toolRouterForm.enabled" />
+              启用工具路由
+            </label>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>使用的 AI 配置</label>
+              <select v-model="toolRouterForm.openai_name" class="form-input">
+                <option value="">请选择</option>
+                <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
+              </select>
+              <p class="form-hint">选择用于工具调用的 AI 提供商配置</p>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>超时时间（秒）</label>
+              <input type="number" v-model.number="toolRouterForm.timeout" class="form-input" min="1" />
+            </div>
+            <div class="form-group">
+              <label>最大 Token 数</label>
+              <input type="number" v-model.number="toolRouterForm.max_tokens" class="form-input" min="1" />
+            </div>
           </div>
-        </div>
 
-        <div class="form-row">
           <div class="form-group">
-            <label>超时时间（秒）</label>
-            <input type="number" v-model.number="toolRouterForm.timeout" class="form-input" min="1" />
+            <label>系统提示词</label>
+            <textarea v-model="toolRouterForm.system_prompt" class="form-textarea" rows="6"></textarea>
+            <p class="form-hint">用于指导模型如何使用工具的系统提示词</p>
           </div>
-          <div class="form-group">
-            <label>最大 Token 数</label>
-            <input type="number" v-model.number="toolRouterForm.max_tokens" class="form-input" min="1" />
+
+          <div class="form-actions">
+            <button class="admin-button ghost" @click="closeToolRouterForm">取消</button>
+            <button class="admin-button" @click="saveToolRouter">保存</button>
           </div>
         </div>
 
-        <div class="form-group">
-          <label>系统提示词</label>
-          <textarea v-model="toolRouterForm.system_prompt" class="form-textarea" rows="6"></textarea>
-          <p class="form-hint">用于指导模型如何使用工具的系统提示词</p>
+        <div v-else-if="toolRouter" class="tool-router-display">
+          <div class="router-status">
+            <span class="status-badge" :class="{ active: toolRouter.enabled, inactive: !toolRouter.enabled }">
+              {{ toolRouter.enabled ? '已启用' : '已停用' }}
+            </span>
+          </div>
+          <div class="router-details">
+            <div class="detail-row">
+              <span class="detail-label">使用的 AI 配置</span>
+              <span class="detail-value">{{ toolRouter.openai_name || '未设置' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">超时时间</span>
+              <span class="detail-value">{{ toolRouter.timeout }} 秒</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">最大 Token 数</span>
+              <span class="detail-value">{{ toolRouter.max_tokens }}</span>
+            </div>
+            <div class="detail-row full-width">
+              <span class="detail-label">系统提示词</span>
+              <pre class="detail-value system-prompt">{{ toolRouter.system_prompt }}</pre>
+            </div>
+          </div>
         </div>
 
-        <div class="form-actions">
-          <button class="admin-button admin-button-secondary" @click="closeToolRouterForm">取消</button>
-          <button class="admin-button" @click="saveToolRouter">保存</button>
-        </div>
-      </div>
-
-      <div v-else-if="toolRouter" class="tool-router-display">
-        <div class="router-status">
-          <span class="status-badge" :class="{ active: toolRouter.enabled, inactive: !toolRouter.enabled }">
-            {{ toolRouter.enabled ? '已启用' : '已停用' }}
-          </span>
-        </div>
-        <div class="router-details">
-          <div class="detail-row">
-            <span class="detail-label">使用的 AI 配置</span>
-            <span class="detail-value">{{ toolRouter.openai_name || '未设置' }}</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">超时时间</span>
-            <span class="detail-value">{{ toolRouter.timeout }} 秒</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">最大 Token 数</span>
-            <span class="detail-value">{{ toolRouter.max_tokens }}</span>
-          </div>
-          <div class="detail-row full-width">
-            <span class="detail-label">系统提示词</span>
-            <pre class="detail-value system-prompt">{{ toolRouter.system_prompt }}</pre>
-          </div>
-        </div>
-      </div>
-
-      <div v-else class="empty-state">
-        <p>暂无工具路由配置，点击上方按钮进行配置。</p>
+        <div v-else class="empty">暂无工具路由配置，点击上方按钮进行配置。</div>
       </div>
     </div>
 
     <!-- Topic Config 配置 - 话题选择配置 -->
-    <div class="admin-section">
-      <div class="section-header">
+    <div class="panel">
+      <div class="panel-header">
         <div>
-          <h3>话题选择配置</h3>
-          <p class="section-desc">当工具路由未命中任何工具时，由话题选择判断是否回复。命中（输出 REPLY）才进入主回复，否则丢弃不回复。</p>
+          <p class="eyebrow">Topic Filter</p>
+          <h2>话题选择配置</h2>
         </div>
         <button v-if="!editingTopicConfig" class="admin-button" @click="openEditTopicConfig">编辑配置</button>
       </div>
+      <p class="section-desc">当工具路由未命中任何工具时，由话题选择判断是否回复。命中（输出 REPLY）才进入主回复，否则丢弃不回复。</p>
 
-      <div v-if="editingTopicConfig" class="tool-router-form">
-        <div class="form-group">
-          <label>
-            <input type="checkbox" v-model="topicConfigForm.enabled" />
-            启用话题选择
-          </label>
-          <p class="form-hint">未启用时，未命中工具的消息一律进入主回复（不做过滤）</p>
-        </div>
-
-        <div class="form-row">
+      <div class="section-body">
+        <div v-if="editingTopicConfig" class="tool-router-form">
           <div class="form-group">
-            <label>使用的 AI 配置</label>
-            <select v-model="topicConfigForm.openai_name" class="form-input">
-              <option value="">请选择</option>
-              <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
-            </select>
-            <p class="form-hint">选择用于话题判定的 AI 提供商配置，留空则使用主回复配置</p>
+            <label>
+              <input type="checkbox" v-model="topicConfigForm.enabled" />
+              启用话题选择
+            </label>
+            <p class="form-hint">未启用时，未命中工具的消息一律进入主回复（不做过滤）</p>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>使用的 AI 配置</label>
+              <select v-model="topicConfigForm.openai_name" class="form-input">
+                <option value="">请选择</option>
+                <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
+              </select>
+              <p class="form-hint">选择用于话题判定的 AI 提供商配置，留空则使用主回复配置</p>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>超时时间（秒）</label>
+              <input type="number" v-model.number="topicConfigForm.timeout" class="form-input" min="1" />
+            </div>
+            <div class="form-group">
+              <label>最大 Token 数</label>
+              <input type="number" v-model.number="topicConfigForm.max_tokens" class="form-input" min="1" />
+            </div>
           </div>
-        </div>
 
-        <div class="form-row">
           <div class="form-group">
-            <label>超时时间（秒）</label>
-            <input type="number" v-model.number="topicConfigForm.timeout" class="form-input" min="1" />
+            <label>系统提示词</label>
+            <textarea v-model="topicConfigForm.system_prompt" class="form-textarea" rows="6"></textarea>
+            <p class="form-hint">要求模型对应当回复的消息输出 REPLY，否则输出 IGNORE</p>
           </div>
-          <div class="form-group">
-            <label>最大 Token 数</label>
-            <input type="number" v-model.number="topicConfigForm.max_tokens" class="form-input" min="1" />
+
+          <div class="form-actions">
+            <button class="admin-button ghost" @click="closeTopicConfigForm">取消</button>
+            <button class="admin-button" @click="saveTopicConfig">保存</button>
           </div>
         </div>
 
-        <div class="form-group">
-          <label>系统提示词</label>
-          <textarea v-model="topicConfigForm.system_prompt" class="form-textarea" rows="6"></textarea>
-          <p class="form-hint">要求模型对应当回复的消息输出 REPLY，否则输出 IGNORE</p>
+        <div v-else-if="topicConfig" class="tool-router-display">
+          <div class="router-status">
+            <span class="status-badge" :class="{ active: topicConfig.enabled, inactive: !topicConfig.enabled }">
+              {{ topicConfig.enabled ? '已启用' : '已停用' }}
+            </span>
+          </div>
+          <div class="router-details">
+            <div class="detail-row">
+              <span class="detail-label">使用的 AI 配置</span>
+              <span class="detail-value">{{ topicConfig.openai_name || '未设置（使用主回复配置）' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">超时时间</span>
+              <span class="detail-value">{{ topicConfig.timeout }} 秒</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">最大 Token 数</span>
+              <span class="detail-value">{{ topicConfig.max_tokens }}</span>
+            </div>
+            <div class="detail-row full-width">
+              <span class="detail-label">系统提示词</span>
+              <pre class="detail-value system-prompt">{{ topicConfig.system_prompt }}</pre>
+            </div>
+          </div>
         </div>
 
-        <div class="form-actions">
-          <button class="admin-button admin-button-secondary" @click="closeTopicConfigForm">取消</button>
-          <button class="admin-button" @click="saveTopicConfig">保存</button>
-        </div>
-      </div>
-
-      <div v-else-if="topicConfig" class="tool-router-display">
-        <div class="router-status">
-          <span class="status-badge" :class="{ active: topicConfig.enabled, inactive: !topicConfig.enabled }">
-            {{ topicConfig.enabled ? '已启用' : '已停用' }}
-          </span>
-        </div>
-        <div class="router-details">
-          <div class="detail-row">
-            <span class="detail-label">使用的 AI 配置</span>
-            <span class="detail-value">{{ topicConfig.openai_name || '未设置（使用主回复配置）' }}</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">超时时间</span>
-            <span class="detail-value">{{ topicConfig.timeout }} 秒</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">最大 Token 数</span>
-            <span class="detail-value">{{ topicConfig.max_tokens }}</span>
-          </div>
-          <div class="detail-row full-width">
-            <span class="detail-label">系统提示词</span>
-            <pre class="detail-value system-prompt">{{ topicConfig.system_prompt }}</pre>
-          </div>
-        </div>
-      </div>
-
-      <div v-else class="empty-state">
-        <p>暂无话题选择配置，点击上方按钮进行配置。</p>
+        <div v-else class="empty">暂无话题选择配置，点击上方按钮进行配置。</div>
       </div>
     </div>
 
     <!-- Primary AI Config 配置 - 主 AI 回复配置 -->
-    <div class="admin-section">
-      <div class="section-header">
+    <div class="panel">
+      <div class="panel-header">
         <div>
-          <h3>主 AI 回复配置</h3>
-          <p class="section-desc">配置机器人自动回复消息的核心 AI 设置。</p>
+          <p class="eyebrow">Primary AI</p>
+          <h2>主 AI 回复配置</h2>
         </div>
         <button v-if="!editingPrimaryConfig" class="admin-button" @click="openEditPrimaryConfig">编辑配置</button>
       </div>
+      <p class="section-desc">配置机器人自动回复消息的核心 AI 设置。</p>
 
-      <div v-if="editingPrimaryConfig" class="tool-router-form">
-        <div class="form-group">
-          <label>
-            <input type="checkbox" v-model="primaryConfigForm.enabled" />
-            启用 AI 自动回复
-          </label>
-        </div>
-
-        <div class="form-row">
+      <div class="section-body">
+        <div v-if="editingPrimaryConfig" class="tool-router-form">
           <div class="form-group">
-            <label>使用的 AI 配置</label>
-            <select v-model="primaryConfigForm.provider_name" class="form-input">
-              <option value="">请选择</option>
-              <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
-            </select>
-            <p class="form-hint">选择用于自动回复消息的 AI 提供商配置</p>
+            <label>
+              <input type="checkbox" v-model="primaryConfigForm.enabled" />
+              启用 AI 自动回复
+            </label>
           </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>使用的 AI 配置</label>
+              <select v-model="primaryConfigForm.provider_name" class="form-input">
+                <option value="">请选择</option>
+                <option v-for="p in activeProviders" :key="p.name" :value="p.name">{{ p.name }}</option>
+              </select>
+              <p class="form-hint">选择用于自动回复消息的 AI 提供商配置</p>
+            </div>
+            <div class="form-group">
+              <label>是否启用工具调用</label>
+              <select v-model="primaryConfigForm.enable_tool" class="form-input">
+                <option :value="false">不启用</option>
+                <option :value="true">启用</option>
+              </select>
+              <p class="form-hint">选择是否让 AI 在回复中调用工具（如计算器等）</p>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>超时时间（秒）</label>
+              <input type="number" v-model.number="primaryConfigForm.timeout" class="form-input" min="1" />
+            </div>
+            <div class="form-group">
+              <label>最大 Token 数</label>
+              <input type="number" v-model.number="primaryConfigForm.max_tokens" class="form-input" min="1" />
+            </div>
+          </div>
+
           <div class="form-group">
-            <label>是否启用工具调用</label>
-            <select v-model="primaryConfigForm.enable_tool" class="form-input">
-              <option :value="false">不启用</option>
-              <option :value="true">启用</option>
-            </select>
-            <p class="form-hint">选择是否让 AI 在回复中调用工具（如计算器等）</p>
+            <label>系统提示词</label>
+            <textarea v-model="primaryConfigForm.system_prompt" class="form-textarea" rows="6"></textarea>
+            <p class="form-hint">用于指导 AI 如何回复用户消息的系统提示词</p>
+          </div>
+
+          <div class="form-actions">
+            <button class="admin-button ghost" @click="closePrimaryConfigForm">取消</button>
+            <button class="admin-button" @click="savePrimaryConfig">保存</button>
           </div>
         </div>
 
-        <div class="form-row">
-          <div class="form-group">
-            <label>超时时间（秒）</label>
-            <input type="number" v-model.number="primaryConfigForm.timeout" class="form-input" min="1" />
+        <div v-else-if="primaryConfig" class="tool-router-display">
+          <div class="router-status">
+            <span class="status-badge" :class="{ active: primaryConfig.enabled, inactive: !primaryConfig.enabled }">
+              {{ primaryConfig.enabled ? '已启用' : '已停用' }}
+            </span>
           </div>
-          <div class="form-group">
-            <label>最大 Token 数</label>
-            <input type="number" v-model.number="primaryConfigForm.max_tokens" class="form-input" min="1" />
+          <div class="router-details">
+            <div class="detail-row">
+              <span class="detail-label">使用的 AI 配置</span>
+              <span class="detail-value">{{ primaryConfig.provider_name || '未设置' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">超时时间</span>
+              <span class="detail-value">{{ primaryConfig.timeout }} 秒</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">最大 Token 数</span>
+              <span class="detail-value">{{ primaryConfig.max_tokens }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">工具调用</span>
+              <span class="detail-value">{{ primaryConfig.enable_tool ? '已启用' : '未启用' }}</span>
+            </div>
+            <div class="detail-row full-width">
+              <span class="detail-label">系统提示词</span>
+              <pre class="detail-value system-prompt">{{ primaryConfig.system_prompt }}</pre>
+            </div>
           </div>
         </div>
 
-        <div class="form-group">
-          <label>系统提示词</label>
-          <textarea v-model="primaryConfigForm.system_prompt" class="form-textarea" rows="6"></textarea>
-          <p class="form-hint">用于指导 AI 如何回复用户消息的系统提示词</p>
-        </div>
-
-        <div class="form-actions">
-          <button class="admin-button admin-button-secondary" @click="closePrimaryConfigForm">取消</button>
-          <button class="admin-button" @click="savePrimaryConfig">保存</button>
-        </div>
-      </div>
-
-      <div v-else-if="primaryConfig" class="tool-router-display">
-        <div class="router-status">
-          <span class="status-badge" :class="{ active: primaryConfig.enabled, inactive: !primaryConfig.enabled }">
-            {{ primaryConfig.enabled ? '已启用' : '已停用' }}
-          </span>
-        </div>
-        <div class="router-details">
-          <div class="detail-row">
-            <span class="detail-label">使用的 AI 配置</span>
-            <span class="detail-value">{{ primaryConfig.provider_name || '未设置' }}</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">超时时间</span>
-            <span class="detail-value">{{ primaryConfig.timeout }} 秒</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">最大 Token 数</span>
-            <span class="detail-value">{{ primaryConfig.max_tokens }}</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">工具调用</span>
-            <span class="detail-value">{{ primaryConfig.enable_tool ? '已启用' : '未启用' }}</span>
-          </div>
-          <div class="detail-row full-width">
-            <span class="detail-label">系统提示词</span>
-            <pre class="detail-value system-prompt">{{ primaryConfig.system_prompt }}</pre>
-          </div>
-        </div>
-      </div>
-
-      <div v-else class="empty-state">
-        <p>暂无主 AI 回复配置，点击上方按钮进行配置。</p>
+        <div v-else class="empty">暂无主 AI 回复配置，点击上方按钮进行配置。</div>
       </div>
     </div>
 
@@ -731,40 +735,20 @@ onMounted(() => {
           </div>
         </div>
         <div class="modal-footer">
-          <button class="admin-button admin-button-secondary" @click="closeProviderForm">取消</button>
+          <button class="admin-button ghost" @click="closeProviderForm">取消</button>
           <button class="admin-button" @click="saveProvider">保存</button>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <style scoped>
-.admin-llm-api {
-  padding: 1.5rem;
-  max-width: 100%;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  min-height: 100vh;
-}
-
-.admin-llm-api h2 {
-  margin: 0 0 1rem;
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: #1e293b;
-  letter-spacing: -0.02em;
-}
-
 .ai-status-bar {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1.25rem;
-  background: white;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  gap: 12px;
+  padding: 14px 16px;
 }
 
 .status-indicator {
@@ -775,110 +759,94 @@ onMounted(() => {
 }
 
 .status-indicator.running {
-  background: #22c55e;
-  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+  background: var(--color-success);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--color-success) 60%, transparent);
 }
 
 .status-indicator.stopped {
-  background: #ef4444;
-  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+  background: var(--color-danger);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--color-danger) 50%, transparent);
 }
 
 .status-text {
   flex: 1;
-  font-size: 0.9rem;
-  color: #475569;
-  font-weight: 500;
-}
-
-.admin-section {
-  background: white;
-  padding: 1.75rem;
-  border-radius: 16px;
-  margin-bottom: 2rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
-  border: 1px solid #e2e8f0;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.section-header h3 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #334155;
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: 700;
 }
 
 .section-desc {
   margin: 0;
-  color: #64748b;
-  font-size: 0.9rem;
+  padding: 12px 16px 0;
+  color: var(--color-muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.section-body {
+  padding: 16px;
 }
 
 .provider-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
-  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 12px;
 }
 
 .provider-card {
-  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 1.25rem;
-  transition: all 0.2s ease;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 14px;
+  background: var(--color-surface-soft);
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
 }
 
 .provider-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
-  border-color: #cbd5e1;
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }
 
 .provider-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid #e2e8f0;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .provider-name {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 8px;
+  min-width: 0;
 }
 
 .provider-name strong {
-  font-size: 1.05rem;
-  color: #1e293b;
-  font-weight: 600;
+  color: var(--color-heading);
+  font-size: 15px;
+  overflow-wrap: anywhere;
 }
 
 .provider-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
 }
 
 .provider-details {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 6px;
 }
 
 .detail-row {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
+  align-items: baseline;
+  gap: 12px;
 }
 
 .detail-row.full-width {
@@ -887,70 +855,68 @@ onMounted(() => {
 }
 
 .detail-label {
-  font-size: 0.85rem;
-  color: #64748b;
-  font-weight: 500;
-  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--color-muted);
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .detail-value {
-  font-size: 0.9rem;
-  color: #334155;
+  color: var(--color-heading);
+  font-size: 13px;
   word-break: break-all;
   text-align: right;
 }
 
 .detail-value.masked {
-  font-family: monospace;
+  font-family: var(--font-mono);
   letter-spacing: 0.1em;
 }
 
 .status-badge {
-  display: inline-block;
-  padding: 0.25rem 0.6rem;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
 .status-badge.active {
-  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
-  color: #166534;
-  border: 1px solid #86efac;
+  color: color-mix(in srgb, var(--color-success) 70%, var(--color-heading));
+  background: var(--color-success-soft);
 }
 
 .status-badge.inactive {
-  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-  color: #991b1b;
-  border: 1px solid #fca5a5;
+  color: color-mix(in srgb, var(--color-danger) 76%, var(--color-heading));
+  background: var(--color-danger-soft);
 }
 
 .tool-router-form,
 .tool-router-display {
-  padding: 1.25rem;
-  background: #f8fafc;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  background: var(--color-surface-soft);
 }
 
 .router-status {
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .router-details {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
+  gap: 12px;
 }
 
 .router-details .detail-row {
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.25rem;
+  gap: 4px;
 }
 
 .router-details .detail-row .detail-value {
@@ -959,64 +925,64 @@ onMounted(() => {
 
 .system-prompt {
   width: 100%;
+  margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  background: white;
-  padding: 0.75rem;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  font-size: 0.85rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  color: var(--color-text);
+  background: var(--color-surface);
+  font-size: 13px;
   line-height: 1.6;
-  margin: 0;
 }
 
 .form-group {
-  margin-bottom: 1.25rem;
+  margin-bottom: 14px;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: #334155;
-  font-size: 0.9rem;
+  margin-bottom: 6px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 700;
 }
 
 .form-group label input[type='checkbox'] {
-  margin-right: 0.5rem;
+  margin-right: 8px;
   width: auto;
+  accent-color: var(--color-primary);
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 12px;
 }
 
 .form-input,
-.form-textarea,
-.form-select {
+.form-textarea {
   width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  color: #334155;
-  background: white;
-  transition: all 0.15s ease;
   box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  padding: 9px 12px;
+  color: var(--color-heading);
+  background: var(--color-surface);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
 .form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.form-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 
 .form-input:disabled {
-  background: #f1f5f9;
+  background: var(--color-surface-muted);
   cursor: not-allowed;
 }
 
@@ -1027,197 +993,102 @@ onMounted(() => {
 }
 
 .form-hint {
-  margin: 0.5rem 0 0;
-  font-size: 0.8rem;
-  color: #64748b;
+  margin: 6px 0 0;
+  color: var(--color-muted);
+  font-size: 12px;
 }
 
 .form-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #e2e8f0;
-}
-
-.error {
-  color: #991b1b;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-  border-radius: 10px;
-  margin-bottom: 1.25rem;
-  border: 1px solid #fca5a5;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.success {
-  color: #166534;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
-  border-radius: 10px;
-  margin-bottom: 1.25rem;
-  border: 1px solid #86efac;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  gap: 10px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border);
 }
 
 .warning {
-  color: #92400e;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-  border-radius: 10px;
-  margin-bottom: 1.25rem;
-  border: 1px solid #fcd34d;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.admin-loading {
-  padding: 3rem;
-  text-align: center;
-  color: #64748b;
-  background: #f8fafc;
-  border-radius: 12px;
-  font-size: 1rem;
-}
-
-.empty-state {
-  padding: 3rem 2rem;
-  text-align: center;
-  color: #64748b;
-  background: #f8fafc;
-  border-radius: 12px;
-  border: 2px dashed #e2e8f0;
-}
-
-.empty-state p {
-  margin: 0;
+  margin: 0 16px 12px;
+  border: 1px solid color-mix(in srgb, var(--color-warning) 36%, white);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-heading));
+  background: var(--color-warning-soft);
 }
 
 /* 弹窗样式 */
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
+  padding: 16px;
+  background: rgba(36, 41, 39, 0.45);
 }
 
 .modal-content {
-  background: white;
-  border-radius: 16px;
   width: 100%;
   max-width: 550px;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-floating);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 1.5rem 1rem;
-  border-bottom: 1px solid #e2e8f0;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
 }
 
 .modal-header h3 {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #1e293b;
+  color: var(--color-heading);
+  font-size: 16px;
 }
 
 .modal-close {
-  background: none;
   border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #64748b;
-  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  color: var(--color-muted);
+  background: none;
+  font-size: 20px;
   line-height: 1;
-  border-radius: 6px;
-  transition: all 0.15s ease;
+  cursor: pointer;
+  transition: background-color 0.16s ease, color 0.16s ease;
 }
 
 .modal-close:hover {
-  background: #f1f5f9;
-  color: #1e293b;
+  color: var(--color-heading);
+  background: var(--color-surface-muted);
 }
 
 .modal-body {
-  padding: 1.5rem;
+  padding: 16px;
 }
 
 .modal-footer {
-  padding: 1rem 1.5rem 1.5rem;
   display: flex;
   justify-content: flex-end;
-  gap: 0.75rem;
+  gap: 10px;
+  padding: 12px 16px 16px;
 }
 
-.admin-button {
-  padding: 0.6rem 1.25rem;
-  border: none;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
-}
+@media (max-width: 640px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
 
-.admin-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-}
-
-.admin-button:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.admin-button-small {
-  padding: 0.4rem 0.75rem;
-  font-size: 0.8rem;
-}
-
-.admin-button-secondary {
-  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
-  box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2);
-}
-
-.admin-button-secondary:hover:not(:disabled) {
-  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
-}
-
-.admin-button-danger {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
-}
-
-.admin-button-danger:hover:not(:disabled) {
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
+  .provider-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/meshmap_frontend/src/components/AdminLoginLogs.vue b/meshmap_frontend/src/components/AdminLoginLogs.vue
index 5d57522..7c971a0 100644
--- a/meshmap_frontend/src/components/AdminLoginLogs.vue
+++ b/meshmap_frontend/src/components/AdminLoginLogs.vue
@@ -49,13 +49,13 @@ onMounted(refreshLogs)
       </div>
 
       <p v-if="error" class="error">{{ error }}</p>
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>时间</th>
+              <th class="cell-nowrap">时间</th>
               <th>用户名</th>
-              <th>结果</th>
+              <th class="cell-nowrap">结果</th>
               <th>原因</th>
               <th>Remote Addr</th>
               <th>Remote Host</th>
@@ -64,9 +64,9 @@ onMounted(refreshLogs)
           </thead>
           <tbody>
             <tr v-for="log in logs" :key="log.id">
-              <td>{{ formatTime(log.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(log.created_at) }}</td>
               <td>{{ log.username || '-' }}</td>
-              <td>
+              <td class="cell-nowrap">
                 <span class="log-badge" :class="log.success ? 'log-success' : 'log-failure'">
                   {{ log.success ? '成功' : '失败' }}
                 </span>
diff --git a/meshmap_frontend/src/components/AdminMqttForward.vue b/meshmap_frontend/src/components/AdminMqttForward.vue
index 558a7e6..2836da9 100644
--- a/meshmap_frontend/src/components/AdminMqttForward.vue
+++ b/meshmap_frontend/src/components/AdminMqttForward.vue
@@ -572,8 +572,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .mqtt-forward-page {
-  width: min(1440px, 100%);
-  margin: 0 auto;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;
diff --git a/meshmap_frontend/src/components/AdminSignManagement.vue b/meshmap_frontend/src/components/AdminSignManagement.vue
index 999175f..088f246 100644
--- a/meshmap_frontend/src/components/AdminSignManagement.vue
+++ b/meshmap_frontend/src/components/AdminSignManagement.vue
@@ -212,41 +212,41 @@ onMounted(() => refreshSigns())
       <p v-if="error" class="error">{{ error }}</p>
       <p v-if="message" class="success">{{ message }}</p>
 
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>ID</th>
-              <th>节点 ID</th>
+              <th class="cell-nowrap">ID</th>
+              <th class="cell-nowrap">节点 ID</th>
               <th>Long Name</th>
-              <th>Short Name</th>
+              <th class="cell-nowrap">Short Name</th>
               <th>签到文本</th>
-              <th>签到时间</th>
-              <th>操作</th>
+              <th class="cell-nowrap">签到时间</th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="record in records" :key="record.id">
               <template v-if="edits[record.id]">
-                <td>{{ record.id }}</td>
+                <td class="cell-nowrap">{{ record.id }}</td>
                 <td><input v-model="edits[record.id].node_id" class="admin-table-input" /></td>
                 <td><input v-model="edits[record.id].long_name" class="admin-table-input" /></td>
                 <td><input v-model="edits[record.id].short_name" class="admin-table-input" /></td>
                 <td><input v-model="edits[record.id].sign_text" class="admin-table-input" /></td>
                 <td><input v-model="edits[record.id].sign_time" class="admin-table-input" type="datetime-local" /></td>
-                <td>
+                <td class="cell-nowrap">
                   <button class="admin-button" :disabled="loading" @click="saveSign(record)">保存</button>
                   <button class="admin-button" :disabled="loading" @click="cancelEdit(record.id)">取消</button>
                 </td>
               </template>
               <template v-else>
-                <td>{{ record.id }}</td>
-                <td>{{ record.node_id }}</td>
+                <td class="cell-nowrap">{{ record.id }}</td>
+                <td class="cell-nowrap">{{ record.node_id }}</td>
                 <td>{{ record.long_name || '-' }}</td>
-                <td>{{ record.short_name || '-' }}</td>
+                <td class="cell-nowrap">{{ record.short_name || '-' }}</td>
                 <td>{{ record.sign_text }}</td>
-                <td>{{ formatTime(record.sign_time) }}</td>
-                <td>
+                <td class="cell-nowrap">{{ formatTime(record.sign_time) }}</td>
+                <td class="cell-nowrap">
                   <button class="admin-button" :disabled="loading" @click="startEdit(record)">编辑</button>
                   <button class="admin-button danger" :disabled="loading" @click="removeSign(record)">删除</button>
                 </td>
diff --git a/meshmap_frontend/src/components/AdminUsers.vue b/meshmap_frontend/src/components/AdminUsers.vue
index 76fccd2..e4ff57a 100644
--- a/meshmap_frontend/src/components/AdminUsers.vue
+++ b/meshmap_frontend/src/components/AdminUsers.vue
@@ -119,26 +119,26 @@ onMounted(refreshUsers)
       <p v-if="userError" class="error">{{ userError }}</p>
       <p v-if="userMessage" class="success">{{ userMessage }}</p>
 
-      <div class="node-table-wrap">
+      <div class="node-table-wrap table-fit-wrap">
         <table class="node-table">
           <thead>
             <tr>
-              <th>ID</th>
+              <th class="cell-nowrap">ID</th>
               <th>用户名</th>
-              <th>角色</th>
-              <th>创建时间</th>
-              <th>更新时间</th>
+              <th class="cell-nowrap">角色</th>
+              <th class="cell-nowrap">创建时间</th>
+              <th class="cell-nowrap">更新时间</th>
               <th>新密码</th>
-              <th>操作</th>
+              <th class="cell-nowrap">操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="managedUser in users" :key="managedUser.id">
-              <td>{{ managedUser.id }}</td>
+              <td class="cell-nowrap">{{ managedUser.id }}</td>
               <td>{{ managedUser.username }} <span v-if="managedUser.username === props.user.username" class="badge">当前</span></td>
-              <td>{{ managedUser.role }}</td>
-              <td>{{ formatTime(managedUser.created_at) }}</td>
-              <td>{{ formatTime(managedUser.updated_at) }}</td>
+              <td class="cell-nowrap">{{ managedUser.role }}</td>
+              <td class="cell-nowrap">{{ formatTime(managedUser.created_at) }}</td>
+              <td class="cell-nowrap">{{ formatTime(managedUser.updated_at) }}</td>
               <td>
                 <input
                   v-model="passwordEdits[managedUser.id]"
@@ -148,7 +148,7 @@ onMounted(refreshUsers)
                   placeholder="输入新密码"
                 />
               </td>
-              <td>
+              <td class="cell-nowrap">
                 <button class="admin-button" :disabled="passwordSaving[managedUser.id]" @click="updatePassword(managedUser)">
                   {{ passwordSaving[managedUser.id] ? '保存中...' : '修改密码' }}
                 </button>
diff --git a/meshmap_frontend/src/style.css b/meshmap_frontend/src/style.css
index b59744b..ee744b5 100644
--- a/meshmap_frontend/src/style.css
+++ b/meshmap_frontend/src/style.css
@@ -1225,6 +1225,25 @@ h3 {
   vertical-align: middle;
 }
 
+/* === 管理页表格：长文本列换行完整显示，短列保持单行 === */
+.table-fit-wrap {
+  overflow-x: hidden;
+}
+
+.table-fit-wrap .node-table th,
+.table-fit-wrap .node-table td {
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
+}
+
+.table-fit-wrap .node-table th.cell-nowrap,
+.table-fit-wrap .node-table td.cell-nowrap {
+  white-space: nowrap;
+  word-break: normal;
+}
+
 .pubkey-cell {
   display: inline-flex;
   align-items: center;
@@ -1259,10 +1278,13 @@ h3 {
   color: var(--color-muted);
 }
 
-.admin-login,
 .admin-dashboard,
 .admin-session-card {
-  max-width: 1100px;
+  width: 100%;
+}
+
+.admin-login {
+  max-width: 480px;
   margin: 0 auto;
   width: 100%;
 }
@@ -1374,6 +1396,12 @@ h3 {
   padding: 8px 10px;
 }
 
+.table-fit-wrap .admin-table-input {
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .success {
   margin: 0 16px 12px;
   border: 1px solid color-mix(in srgb, var(--color-success) 34%, white);
diff --git a/meshmap_frontend/src/version.ts b/meshmap_frontend/src/version.ts
index 521c931..13c5dba 100644
--- a/meshmap_frontend/src/version.ts
+++ b/meshmap_frontend/src/version.ts
@@ -1 +1 @@
-export const FRONTEND_VERSION = '0.3.1'
+export const FRONTEND_VERSION = '0.3.2'