From 3e2a497cd4fee6a0d2d67d3c0fb93b2b74e3b46f Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Thu, 27 Nov 2025 22:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E5=B0=86app.html=E5=85=A8?=
 =?UTF-8?q?=E9=9D=A2=E6=94=B9=E4=B8=BA=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加CSS变量系统（背景色、边框色、文字颜色、强调色）
- 页面背景改为深色渐变效果
- 卡片、弹窗使用毛玻璃效果（backdrop-filter blur）
- 导航栏改为暗色玻璃样式
- 表单、按钮、表格全部适配暗色主题
- 添加自定义滚动条样式
- 统一警告/成功/错误提示框为半透明风格
- 全局替换浅色背景和文字颜色

与index.html保持一致的暗色毛玻璃设计风格

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html | 687 +++++++++++++++++++++++++++++++---------------
 1 file changed, 459 insertions(+), 228 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 0cef047..6399905 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -107,16 +107,56 @@
   <script src="libs/axios.min.js"></script>
   <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
   <style>
+    /* ========== 暗色主题 CSS 变量 ========== */
+    :root {
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #12121a;
+      --bg-card: rgba(255, 255, 255, 0.03);
+      --bg-card-hover: rgba(255, 255, 255, 0.06);
+      --glass-border: rgba(255, 255, 255, 0.08);
+      --glass-border-hover: rgba(102, 126, 234, 0.3);
+      --text-primary: #ffffff;
+      --text-secondary: rgba(255, 255, 255, 0.6);
+      --text-muted: rgba(255, 255, 255, 0.4);
+      --accent-1: #667eea;
+      --accent-2: #764ba2;
+      --accent-3: #f093fb;
+      --glow: rgba(102, 126, 234, 0.4);
+      --danger: #ef4444;
+      --success: #22c55e;
+      --warning: #f59e0b;
+      --info: #3b82f6;
+    }
+
     /* 防止 Vue 初始化前显示原始模板 */
     [v-cloak] { display: none !important; }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
+
     body {
-      font-family: Arial, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
       min-height: 100vh;
     }
+
+    /* 动态背景 */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background:
+        radial-gradient(ellipse at top right, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom left, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
+      z-index: -1;
+    }
+
     #app { min-height: 100vh; }
+
+    /* ========== 认证页面 ========== */
     .auth-container {
       display: flex;
       align-items: center;
@@ -125,76 +165,122 @@
       padding: 20px;
     }
     .auth-box {
-      background: white;
-      border-radius: 16px;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
       padding: 40px;
       width: 100%;
-      max-width: 500px;
+      max-width: 450px;
     }
     .auth-title {
       font-size: 28px;
       font-weight: 700;
       text-align: center;
       margin-bottom: 30px;
-      color: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
     .form-group { margin-bottom: 20px; }
     .form-label {
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
-      color: #555;
+      color: var(--text-secondary);
+      font-size: 14px;
     }
     .form-input {
       width: 100%;
-      padding: 12px 16px;
-      border: 2px solid #e0e0e0;
-      border-radius: 8px;
-      font-size: 14px;
+      padding: 14px 16px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      font-size: 15px;
+      color: var(--text-primary);
+      transition: all 0.3s;
     }
     .form-input:focus {
       outline: none;
-      border-color: #667eea;
+      border-color: var(--accent-1);
+      background: rgba(255, 255, 255, 0.08);
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+    }
+    .form-input::placeholder {
+      color: var(--text-muted);
     }
     .btn {
-      padding: 10px 20px;
+      padding: 12px 24px;
       border: none;
-      border-radius: 6px;
+      border-radius: 10px;
       cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
+      font-size: 15px;
+      font-weight: 600;
+      transition: all 0.3s;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
     }
     .btn-primary {
-      background: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
       width: 100%;
+      box-shadow: 0 4px 20px var(--glow);
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px var(--glow);
     }
-    .btn-primary:hover { background: #5568d3; }
     .btn:disabled {
-      opacity: 0.6;
+      opacity: 0.5;
       cursor: not-allowed;
+      transform: none !important;
     }
-    .btn-primary:disabled:hover {
-      background: #667eea;
+    .alert {
+      padding: 14px 16px;
+      border-radius: 12px;
+      margin-bottom: 20px;
+      font-size: 14px;
+      border: 1px solid transparent;
+    }
+    .alert-error {
+      background: rgba(239, 68, 68, 0.15);
+      border-color: rgba(239, 68, 68, 0.3);
+      color: #fca5a5;
+    }
+    .alert-success {
+      background: rgba(34, 197, 94, 0.15);
+      border-color: rgba(34, 197, 94, 0.3);
+      color: #86efac;
+    }
+    .alert-info {
+      background: rgba(59, 130, 246, 0.15);
+      border-color: rgba(59, 130, 246, 0.3);
+      color: #93c5fd;
     }
-    .alert { padding: 12px; border-radius: 8px; margin-bottom: 15px; }
-    .alert-error { background: #f8d7da; color: #721c24; }
-    .alert-success { background: #d4edda; color: #155724; }
     .auth-switch {
       text-align: center;
-      margin-top: 20px;
-      color: #666;
+      margin-top: 24px;
+      color: var(--text-secondary);
+      font-size: 14px;
     }
     .auth-switch a {
-      color: #667eea;
+      color: var(--accent-3);
       cursor: pointer;
       text-decoration: none;
+      font-weight: 500;
     }
-  
+    .auth-switch a:hover {
+      text-decoration: underline;
+    }
+
+    /* ========== 导航栏 ========== */
     .navbar {
-      background: white;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      background: rgba(10, 10, 15, 0.85);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--glass-border);
       padding: 15px 30px;
       display: flex;
       justify-content: space-between;
@@ -215,27 +301,30 @@
     }
     .nav-item {
       padding: 8px 16px;
-      border-radius: 6px;
+      border-radius: 8px;
       cursor: pointer;
-      transition: all 0.2s;
-      color: #666;
+      transition: all 0.3s;
+      color: var(--text-secondary);
       font-weight: 500;
     }
     .nav-item:hover {
-      background: #f0f0f0;
-      color: #667eea;
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--accent-1);
     }
     .nav-item.active {
-      background: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
+      box-shadow: 0 4px 15px var(--glow);
     }
     .user-info {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 8px 16px;
-      background: #f8f9fa;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--glass-border);
       border-radius: 20px;
+      color: var(--text-primary);
     }
     .main-container {
       max-width: 1200px;
@@ -243,19 +332,21 @@
       padding: 0 20px;
     }
     .card {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
       padding: 30px;
     }
     .loading {
       text-align: center;
       padding: 40px;
-      color: #999;
+      color: var(--text-secondary);
     }
     .spinner {
-      border: 3px solid #f3f3f3;
-      border-top: 3px solid #667eea;
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-top: 3px solid var(--accent-1);
       border-radius: 50%;
       width: 40px;
       height: 40px;
@@ -266,7 +357,6 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
-    .alert-info { background: #d1ecf1; color: #0c5460; }
 
     /* 文件网格视图 */
     .file-grid {
@@ -280,17 +370,19 @@
       flex-direction: column;
       align-items: center;
       padding: 15px 10px 10px 10px;
-      border-radius: 8px;
+      border-radius: 12px;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all 0.3s;
       text-align: center;
       min-height: 180px;
       position: relative;
+      border: 1px solid transparent;
     }
     .file-grid-item:hover {
-      background: #f5f5f5;
-      transform: translateY(-2px);
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      background: var(--bg-card-hover);
+      border-color: var(--glass-border-hover);
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
     }
     .file-icon {
       margin-bottom: 10px;
@@ -300,10 +392,11 @@
       height: 64px;
       object-fit: cover;
       border-radius: 8px;
+      border: 1px solid var(--glass-border);
     }
     .file-name {
       font-size: 13px;
-      color: #333;
+      color: var(--text-primary);
       word-break: break-all;
       max-width: 100%;
       overflow: hidden;
@@ -315,7 +408,7 @@
     }
     .file-size {
       font-size: 12px;
-      color: #999;
+      color: var(--text-muted);
       margin-top: 5px;
       margin-bottom: 8px;
     }
@@ -331,29 +424,31 @@
     }
     .empty-hint {
       text-align: center;
-      color: #999;
+      color: var(--text-muted);
       padding: 40px;
       font-size: 14px;
     }
     .btn-secondary {
-      background: #6c757d;
-      color: white;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--glass-border);
+      color: var(--text-primary);
     }
     .btn-secondary:hover {
-      background: #5a6268;
+      background: rgba(255, 255, 255, 0.15);
+      border-color: var(--glass-border-hover);
     }
     .btn-icon {
       background: none;
       border: none;
       padding: 8px;
       cursor: pointer;
-      border-radius: 4px;
-      transition: all 0.2s;
-      color: #667eea;
+      border-radius: 6px;
+      transition: all 0.3s;
+      color: var(--accent-1);
     }
     .btn-icon:hover {
-      background: #f0f0f0;
-      color: #5568d3;
+      background: rgba(102, 126, 234, 0.2);
+      color: var(--accent-3);
     }
     .file-actions {
       display: flex;
@@ -367,20 +462,27 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgba(0,0,0,0.5);
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(4px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 1000;
     }
     .modal-content {
-      background: white;
+      background: var(--bg-secondary);
+      border: 1px solid var(--glass-border);
       padding: 30px;
-      border-radius: 12px;
+      border-radius: 16px;
       width: 500px;
       max-width: 90%;
       max-height: 90vh;
       overflow-y: auto;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    }
+    .modal-content h3 {
+      color: var(--text-primary);
+      margin-bottom: 20px;
     }
 
     /* 移动端适配 */
@@ -656,10 +758,139 @@
     }
 
     /* 健康检测状态颜色 */
-    .text-green-600 { color: #16a34a; }
-    .text-yellow-600 { color: #ca8a04; }
-    .text-red-600 { color: #dc2626; }
-    .text-blue-600 { color: #2563eb; }
+    .text-green-600 { color: #22c55e; }
+    .text-yellow-600 { color: #f59e0b; }
+    .text-red-600 { color: #ef4444; }
+    .text-blue-600 { color: #3b82f6; }
+
+    /* ========== 表格样式 ========== */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      padding: 12px;
+      text-align: left;
+    }
+    th {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-secondary);
+      font-weight: 600;
+      border-bottom: 1px solid var(--glass-border);
+    }
+    tr {
+      border-bottom: 1px solid var(--glass-border);
+    }
+    tr:hover {
+      background: rgba(255, 255, 255, 0.02);
+    }
+    td {
+      color: var(--text-secondary);
+    }
+
+    /* ========== 危险按钮 ========== */
+    .btn-danger {
+      background: linear-gradient(135deg, #ef4444, #dc2626);
+      color: white;
+      border: none;
+    }
+    .btn-danger:hover {
+      box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+    }
+
+    /* ========== 信息面板样式 ========== */
+    .info-panel {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 16px;
+    }
+    .info-label {
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+    .info-value {
+      color: var(--text-primary);
+      font-weight: 600;
+    }
+
+    /* ========== 状态标签 ========== */
+    .status-success {
+      color: #22c55e;
+    }
+    .status-warning {
+      color: #f59e0b;
+    }
+    .status-danger {
+      color: #ef4444;
+    }
+    .status-info {
+      color: #3b82f6;
+    }
+
+    /* ========== 通知栏样式 ========== */
+    .notice-info {
+      background: rgba(59, 130, 246, 0.1);
+      border-left: 4px solid var(--info);
+      border-radius: 8px;
+      padding: 12px 16px;
+      color: var(--text-secondary);
+    }
+    .notice-warning {
+      background: rgba(245, 158, 11, 0.1);
+      border-left: 4px solid var(--warning);
+      border-radius: 8px;
+      padding: 12px 16px;
+      color: var(--text-secondary);
+    }
+    .notice-success {
+      background: rgba(34, 197, 94, 0.1);
+      border-left: 4px solid var(--success);
+      border-radius: 8px;
+      padding: 12px 16px;
+      color: var(--text-secondary);
+    }
+    .notice-danger {
+      background: rgba(239, 68, 68, 0.1);
+      border-left: 4px solid var(--danger);
+      border-radius: 8px;
+      padding: 12px 16px;
+      color: var(--text-secondary);
+    }
+
+    /* ========== 选择框和下拉样式 ========== */
+    select {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      padding: 8px 12px;
+      color: var(--text-primary);
+      cursor: pointer;
+    }
+    select:focus {
+      outline: none;
+      border-color: var(--accent-1);
+    }
+    select option {
+      background: var(--bg-secondary);
+      color: var(--text-primary);
+    }
+
+    /* ========== 滚动条样式 ========== */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.02);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
     </style>
 </head>
 <body>
@@ -686,11 +917,11 @@
             <label class="form-label">验证码</label>
             <div style="display: flex; gap: 10px; align-items: center;">
               <input type="text" class="form-input" v-model="loginForm.captcha" required style="flex: 1;" placeholder="请输入验证码">
-              <div style="cursor: pointer; border: 1px solid #ddd; border-radius: 4px; padding: 5px; background: #f0f0f0;" @click="refreshCaptcha">
+              <div style="cursor: pointer; border: 1px solid var(--glass-border); border-radius: 8px; padding: 5px; background: rgba(255,255,255,0.05);" @click="refreshCaptcha">
                 <img :src="captchaUrl" alt="验证码" style="display: block; width: 120px; height: 40px;" />
               </div>
             </div>
-            <small style="color: #666; font-size: 12px;">点击图片刷新验证码</small>
+            <small style="color: var(--text-muted); font-size: 12px;">点击图片刷新验证码</small>
           </div>
           <div v-if="showResendVerify" class="alert alert-info" style="margin-bottom: 10px;">
             邮箱未验证？<a style="color:#667eea; cursor: pointer;" @click="resendVerification">点击重发激活邮件</a>
@@ -761,23 +992,23 @@
     <div v-if="isLoggedIn && currentView === 'files'" class="main-container">
       <div class="card">
         <!-- 存储信息显示 -->
-        <div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
+        <div style="margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
           <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-weight: 600; color: #667eea;">
+            <span style="font-weight: 600; color: var(--accent-1);">
               <i :class="storageType === 'local' ? 'fas fa-hard-drive' : 'fas fa-server'"></i>
               当前存储: {{ storageTypeText }}
             </span>
           </div>
           <div v-if="storageType === 'local'" style="flex: 1; max-width: 400px;">
-            <div style="margin-bottom: 5px; font-size: 12px; color: #666; display: flex; justify-content: space-between;">
+            <div style="margin-bottom: 5px; font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between;">
               <span>配额使用情况</span>
               <span>{{ localUsedFormatted }} / {{ localQuotaFormatted }} ({{ quotaPercentage }}%)</span>
             </div>
-            <div style="width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden;">
+            <div style="width: 100%; height: 20px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;">
               <div :style="{
                 width: quotaPercentage + '%',
                 height: '100%',
-                background: quotaPercentage > 90 ? '#dc3545' : quotaPercentage > 75 ? '#ffc107' : '#28a745',
+                background: quotaPercentage > 90 ? '#ef4444' : quotaPercentage > 75 ? '#f59e0b' : '#22c55e',
                 transition: 'width 0.3s'
               }"></div>
             </div>
@@ -785,11 +1016,11 @@
         </div>
 
         <!-- 路径导航 (面包屑) -->
-        <div v-if="currentPath !== '/'" style="margin-bottom: 15px; padding: 10px 15px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+        <div v-if="currentPath !== '/'" style="margin-bottom: 15px; padding: 10px 15px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
           <button class="btn-icon" @click="loadFiles('/')" title="返回根目录" style="padding: 5px 10px;">
             <i class="fas fa-home"></i>
           </button>
-          <span style="color: #999;">/</span>
+          <span style="color: var(--text-muted);">/</span>
           <template v-for="(part, index) in pathParts">
             <span v-if="index < pathParts.length - 1"
                   @click="navigateToIndex(index)"
@@ -797,8 +1028,8 @@
                   :title="'进入 ' + part">
               {{ part }}
             </span>
-            <span v-else style="color: #333; font-weight: 600;">{{ part }}</span>
-            <span v-if="index < pathParts.length - 1" style="color: #999;">/</span>
+            <span v-else style="color: var(--text-primary); font-weight: 600;">{{ part }}</span>
+            <span v-if="index < pathParts.length - 1" style="color: var(--text-muted);">/</span>
           </template>
           <button class="btn-icon" @click="navigateUp()" title="返回上一级" style="margin-left: auto; padding: 5px 10px;">
             <i class="fas fa-level-up-alt"></i> 返回上一级
@@ -850,8 +1081,8 @@
           <div v-if="isDragging && storageType === 'local'" class="drag-drop-overlay">
             <div class="drag-drop-content">
               <i class="fas fa-cloud-upload-alt" style="font-size: 64px; color: #667eea; margin-bottom: 20px;"></i>
-              <div style="font-size: 24px; font-weight: 600; color: #333; margin-bottom: 10px;">拖放文件到这里上传</div>
-              <div style="font-size: 14px; color: #666;">松开鼠标即可开始上传</div>
+              <div style="font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px;">拖放文件到这里上传</div>
+              <div style="font-size: 14px; color: var(--text-secondary);">松开鼠标即可开始上传</div>
             </div>
           </div>
           
@@ -888,7 +1119,7 @@
           <div v-else class="file-list">
             <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
               <thead>
-                <tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
+                <tr style="background: rgba(255,255,255,0.05);">
                   <th style="padding: 12px; text-align: left; width: 40%;">文件名</th>
                   <th style="padding: 12px; text-align: left; width: 15%;">大小</th>
                   <th style="padding: 12px; text-align: left; width: 25%;">修改时间</th>
@@ -927,8 +1158,8 @@
                     <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;" :title="file.name">{{ file.name }}</span>
                     </div>
                   </td>
-                  <td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
-                  <td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedTime) }}</td>
+                  <td style="padding: 10px; color: var(--text-secondary);">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
+                  <td style="padding: 10px; color: var(--text-secondary);">{{ formatDate(file.modifiedTime) }}</td>
                 </tr>
               </tbody>
             </table>
@@ -984,33 +1215,33 @@
         <h3 style="margin-bottom: 20px;">
           <i class="fas fa-folder"></i> 文件夹详情
         </h3>
-        <div v-if="folderInfo" style="background: #f9f9f9; padding: 20px; border-radius: 8px;">
+        <div v-if="folderInfo" style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 8px;">
           <div style="margin-bottom: 15px;">
-            <strong style="color: #666;">名称:</strong>
+            <strong style="color: var(--text-secondary);">名称:</strong>
             <div style="margin-top: 5px; font-size: 16px;">{{ folderInfo.name }}</div>
           </div>
           <div style="margin-bottom: 15px;">
-            <strong style="color: #666;">路径:</strong>
+            <strong style="color: var(--text-secondary);">路径:</strong>
             <div style="margin-top: 5px; color: #667eea;">{{ folderInfo.path }}</div>
           </div>
           <div style="margin-bottom: 15px;">
-            <strong style="color: #666;">总大小:</strong>
+            <strong style="color: var(--text-secondary);">总大小:</strong>
             <div style="margin-top: 5px; font-size: 18px; font-weight: 600; color: #667eea;">
               {{ formatFileSize(folderInfo.size) }}
             </div>
           </div>
           <div style="display: flex; gap: 20px;">
             <div style="flex: 1;">
-              <strong style="color: #666;">文件数:</strong>
+              <strong style="color: var(--text-secondary);">文件数:</strong>
               <div style="margin-top: 5px; font-size: 16px;">{{ folderInfo.fileCount }} 个</div>
             </div>
             <div style="flex: 1;">
-              <strong style="color: #666;">子文件夹:</strong>
+              <strong style="color: var(--text-secondary);">子文件夹:</strong>
               <div style="margin-top: 5px; font-size: 16px;">{{ folderInfo.folderCount }} 个</div>
             </div>
           </div>
         </div>
-        <div v-else style="text-align: center; padding: 40px; color: #999;">
+        <div v-else style="text-align: center; padding: 40px; color: var(--text-muted);">
           <i class="fas fa-spinner fa-spin" style="font-size: 32px;"></i>
           <div style="margin-top: 10px;">加载中...</div>
         </div>
@@ -1052,7 +1283,7 @@
           </div>
           <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
             <strong>有效期：</strong>
-            <span style="color: #28a745;"><i class="fas fa-infinity"></i> 永久有效</span>
+            <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
           </div>
         </div>
         <div style="display: flex; gap: 10px; margin-top: 20px;">
@@ -1070,7 +1301,7 @@
     <div v-if="showShareFileModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showShareFileModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">分享文件</h3>
-        <p style="color: #666; margin-bottom: 15px;">文件: <strong>{{ shareFileForm.fileName }}</strong></p>
+        <p style="color: var(--text-secondary); margin-bottom: 15px;">文件: <strong>{{ shareFileForm.fileName }}</strong></p>
         <div class="form-group">
           <label class="form-label">密码保护（可选）</label>
           <input type="password" class="form-input" v-model="shareFileForm.password" placeholder="留空则无需密码">
@@ -1097,7 +1328,7 @@
           </div>
           <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
             <strong>有效期：</strong>
-            <span style="color: #28a745;"><i class="fas fa-infinity"></i> 永久有效</span>
+            <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
           </div>
         </div>
         <div style="display: flex; gap: 10px; margin-top: 20px;">
@@ -1141,7 +1372,7 @@
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
           <div>
             <h3 style="margin: 0 0 6px 0;">配置 SFTP 存储</h3>
-            <p style="margin: 0; color: #64748b; font-size: 13px;">填写连接信息或导入 .inf 配置，保存后即可切换到 SFTP 模式。</p>
+            <p style="margin: 0; color: var(--text-muted); font-size: 13px;">填写连接信息或导入 .inf 配置，保存后即可切换到 SFTP 模式。</p>
           </div>
           <button class="btn btn-secondary" style="padding: 6px 10px;" @click="closeSftpConfigModal">
             <i class="fas fa-times"></i>
@@ -1149,14 +1380,14 @@
         </div>
 
         <div style="display: grid; grid-template-columns: 1fr; gap: 14px;">
-          <div style="border: 1px dashed #cbd5e1; border-radius: 12px; padding: 16px; background: #f8fafc; text-align: center; cursor: pointer; transition: all .3s;"
+          <div style="border: 1px dashed var(--glass-border); border-radius: 12px; padding: 16px; background: rgba(255,255,255,0.03); text-align: center; cursor: pointer; transition: all .3s;"
                @click="$refs.configFileInput.click()"
                @dragover.prevent="$event.currentTarget.style.background='#eef2ff'"
                @dragleave.prevent="$event.currentTarget.style.background='#f8fafc'"
                @drop.prevent="handleConfigFileDrop">
             <i class="fas fa-cloud-upload-alt" style="font-size: 36px; color: #667eea; margin-bottom: 8px;"></i>
-            <div style="font-weight: 600; color: #1f2937;">导入配置文件</div>
-            <div style="color: #6b7280; font-size: 13px; margin-top: 4px;">点击选择或拖拽 .inf 文件</div>
+            <div style="font-weight: 600; color: var(--text-primary);">导入配置文件</div>
+            <div style="color: var(--text-muted); font-size: 13px; margin-top: 4px;">点击选择或拖拽 .inf 文件</div>
             <input type="file" accept=".inf" @change="handleConfigFileUpload" ref="configFileInput" style="display: none;">
           </div>
 
@@ -1180,7 +1411,7 @@
             <div class="form-group">
               <label class="form-label">HTTP下载基础URL (可选)</label>
               <input type="text" class="form-input" v-model="ftpConfigForm.http_download_base_url" placeholder="例如: http://example.com/files">
-              <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
+              <small style="color: var(--text-secondary); font-size: 12px; margin-top: 5px; display: block;">
                 配置后可通过 HTTP 直接下载，例如: 基础URL/文件路径。
               </small>
             </div>
@@ -1207,7 +1438,7 @@
           <div style="background: linear-gradient(135deg, #f3f5ff 0%, #eef7ff 100%); padding: 22px; border-radius: 14px; box-shadow: 0 10px 30px rgba(102,126,234,0.12); border: 1px solid #e3e9ff;">
             <div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;">
               <div style="display: flex; align-items: center; gap: 10px;">
-                <span style="font-weight: 700; color: #334155;">当前模式</span>
+                <span style="font-weight: 700; color: var(--text-primary);">当前模式</span>
                 <span :style="{
                   padding: '6px 12px',
                   borderRadius: '999px',
@@ -1226,12 +1457,12 @@
                 <i class="fas fa-sync-alt fa-spin"></i>
                 正在切换到 {{ storageSwitchTarget === 'sftp' ? 'SFTP 存储' : '本地存储' }}...
               </div>
-              <div v-else style="color: #666; font-size: 13px;">本地存储适合快速读写，SFTP 适合独立服务器空间</div>
+              <div v-else style="color: var(--text-secondary); font-size: 13px;">本地存储适合快速读写，SFTP 适合独立服务器空间</div>
             </div>
 
-            <div style="margin-top: 16px; background: white; border-radius: 12px; padding: 12px; border: 1px solid #e2e8f0;">
+            <div style="margin-top: 16px; background: white; border-radius: 12px; padding: 12px; border: 1px solid var(--glass-border);">
               <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: center;">
-                <div style="height: 4px; background: #e2e8f0; border-radius: 999px; position: relative; overflow: hidden;">
+                <div style="height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; overflow: hidden;">
                   <div :style="{
                     position: 'absolute',
                     left: storageType === 'local' ? '6%' : '52%',
@@ -1246,18 +1477,18 @@
             </div>
 
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
-              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
+              <div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                  <div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
+                  <div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
                     <i class="fas fa-hard-drive"></i> 本地存储
                   </div>
-                  <span v-if="storageType === 'local'" style="font-size: 12px; color: #28a745; background: rgba(40,167,69,0.12); padding: 4px 8px; border-radius: 999px;">当前</span>
+                  <span v-if="storageType === 'local'" style="font-size: 12px; color: #22c55e; background: rgba(40,167,69,0.12); padding: 4px 8px; border-radius: 999px;">当前</span>
                 </div>
-                <div style="color: #475569; font-size: 13px; margin-bottom: 10px;">更快的读写，适合日常上传下载。</div>
+                <div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 10px;">更快的读写，适合日常上传下载。</div>
                 <div style="margin-bottom: 10px;">
-                  <div style="font-size: 12px; color: #64748b; margin-bottom: 6px;">配额使用</div>
-                  <div style="font-weight: 600; color: #0f172a;">{{ localUsedFormatted }} / {{ localQuotaFormatted }}</div>
-                  <div style="margin-top: 6px; width: 100%; height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden;">
+                  <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 6px;">配额使用</div>
+                  <div style="font-weight: 600; color: var(--text-primary);">{{ localUsedFormatted }} / {{ localQuotaFormatted }}</div>
+                  <div style="margin-top: 6px; width: 100%; height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden;">
                     <div :style="{
                       width: quotaPercentage + '%',
                       height: '100%',
@@ -1273,24 +1504,24 @@
                 </div>
               </div>
 
-              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
+              <div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                  <div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
+                  <div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
                     <i class="fas fa-server"></i> SFTP 存储
                   </div>
                   <span v-if="storageType === 'sftp'" style="font-size: 12px; color: #4b5fc9; background: rgba(102,126,234,0.15); padding: 4px 8px; border-radius: 999px;">当前</span>
                 </div>
-                <div style="color: #475569; font-size: 13px; margin-bottom: 10px;">使用你自己的服务器空间，独立存储更灵活。</div>
-                <div v-if="user?.has_ftp_config" style="font-size: 13px; color: #0f172a; margin-bottom: 10px;">
+                <div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 10px;">使用你自己的服务器空间，独立存储更灵活。</div>
+                <div v-if="user?.has_ftp_config" style="font-size: 13px; color: var(--text-primary); margin-bottom: 10px;">
                   已配置: {{ user.ftp_host }}:{{ user.ftp_port }}
                 </div>
-                <div v-else style="font-size: 13px; color: #b45309; background: #fff7ed; border: 1px dashed #fcd34d; padding: 10px; border-radius: 8px; margin-bottom: 10px;">
+                <div v-else style="font-size: 13px; color: #f59e0b; background: rgba(245, 158, 11, 0.1); border: 1px dashed rgba(245,158,11,0.4); padding: 10px; border-radius: 8px; margin-bottom: 10px;">
                   <i class="fas fa-exclamation-circle"></i> 先填写 SFTP 连接信息再切换
                 </div>
                 <!-- SFTP空间使用统计（user_choice模式） -->
-                <div v-if="user?.has_ftp_config" style="margin-bottom: 10px; padding: 10px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
+                <div v-if="user?.has_ftp_config" style="margin-bottom: 10px; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid var(--glass-border);">
                   <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                    <span style="font-size: 12px; color: #64748b;">空间统计</span>
+                    <span style="font-size: 12px; color: var(--text-muted);">空间统计</span>
                     <button
                       style="background: none; border: none; color: #4b5fc9; cursor: pointer; font-size: 12px; padding: 2px 6px;"
                       @click.stop="loadSftpUsage()"
@@ -1301,14 +1532,14 @@
                   <div v-if="sftpUsageLoading && !sftpUsage" style="text-align: center; color: #667eea; font-size: 12px;">
                     <i class="fas fa-spinner fa-spin"></i> 统计中...
                   </div>
-                  <div v-else-if="sftpUsageError" style="font-size: 12px; color: #c53030;">
+                  <div v-else-if="sftpUsageError" style="font-size: 12px; color: #ef4444;">
                     <i class="fas fa-exclamation-triangle"></i> {{ sftpUsageError }}
                   </div>
                   <div v-else-if="sftpUsage" style="font-size: 13px; font-weight: 600; color: #4b5fc9;">
                     {{ sftpUsage.totalSizeFormatted }}
-                    <span style="font-weight: 400; color: #64748b; font-size: 12px;">（{{ sftpUsage.fileCount }} 文件）</span>
+                    <span style="font-weight: 400; color: var(--text-muted); font-size: 12px;">（{{ sftpUsage.fileCount }} 文件）</span>
                   </div>
-                  <div v-else style="font-size: 12px; color: #94a3b8;">点击刷新查看</div>
+                  <div v-else style="font-size: 12px; color: var(--text-muted);">点击刷新查看</div>
                 </div>
                 <div style="margin-top: auto;">
                   <button
@@ -1329,7 +1560,7 @@
               </div>
             </div>
 
-            <div style="margin-top: 12px; padding: 10px 12px; background: #f1f5f9; border-radius: 10px; font-size: 13px; color: #475569;">
+            <div style="margin-top: 12px; padding: 10px 12px; background: rgba(255,255,255,0.05); border-radius: 10px; font-size: 13px; color: var(--text-secondary);">
               <i class="fas fa-info-circle" style="color: #4b5fc9;"></i>
               本地存储速度快但受配额限制；SFTP 需先配置连接，切换过程中可继续查看文件列表。
             </div>
@@ -1342,19 +1573,19 @@
             <i class="fas fa-hard-drive"></i> 本地存储
           </h3>
 
-          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
+          <div style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 8px;">
             <div style="margin-bottom: 15px;">
-              <span style="font-weight: 600; color: #333;">存储方式: </span>
+              <span style="font-weight: 600; color: var(--text-primary);">存储方式: </span>
               <span style="color: #667eea; font-weight: 600;">本地存储</span>
-              <span style="margin-left: 10px; padding: 4px 12px; background: #28a745; color: white; border-radius: 12px; font-size: 12px;">
+              <span style="margin-left: 10px; padding: 4px 12px; background: #22c55e; color: white; border-radius: 12px; font-size: 12px;">
                 <i class="fas fa-lock"></i> 仅本地
               </span>
             </div>
 
             <div style="margin-bottom: 15px;">
-              <span style="font-weight: 600; color: #333;">配额使用: </span>
+              <span style="font-weight: 600; color: var(--text-primary);">配额使用: </span>
               <span>{{ localUsedFormatted }} / {{ localQuotaFormatted }} ({{ quotaPercentage }}%)</span>
-              <div style="margin-top: 8px; width: 100%; height: 18px; background: #e0e0e0; border-radius: 9px; overflow: hidden;">
+              <div style="margin-top: 8px; width: 100%; height: 18px; background: rgba(255,255,255,0.1); border-radius: 9px; overflow: hidden;">
                 <div :style="{
                   width: quotaPercentage + '%',
                   height: '100%',
@@ -1364,7 +1595,7 @@
               </div>
             </div>
 
-            <div style="padding: 10px; background: #d1ecf1; border-left: 4px solid #0c5460; border-radius: 6px; font-size: 13px; color: #0c5460;">
+            <div style="padding: 10px; background: rgba(59, 130, 246, 0.15); border-left: 4px solid #3b82f6; border-radius: 6px; font-size: 13px; color: #93c5fd;">
               <i class="fas fa-info-circle"></i>
               <strong>说明:</strong> 管理员已将您的存储权限设置为"仅本地存储"，您的文件存储在服务器本地，速度快但有配额限制。如需使用SFTP存储，请联系管理员修改权限设置。
             </div>
@@ -1376,14 +1607,14 @@
           <h3 style="margin-bottom: 20px;">
             <i class="fas fa-server"></i> SFTP存储
           </h3>
-          <div style="background: #f8f9fa; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb;">
+          <div style="background: rgba(255,255,255,0.03); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border);">
             <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
               <div>
-                <div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
+                <div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
                   <i class="fas fa-shield-alt"></i>
                   仅 SFTP 模式
                 </div>
-                <div style="color: #475569; font-size: 13px; margin-top: 6px;">
+                <div style="color: var(--text-secondary); font-size: 13px; margin-top: 6px;">
                   {{ user.has_ftp_config ? '已配置服务器，可正常使用 SFTP 存储。' : '还未配置 SFTP，请先填写连接信息。' }}
                 </div>
               </div>
@@ -1393,19 +1624,19 @@
             </div>
 
             <!-- 服务器信息 -->
-            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid #e2e8f0;">
-              <div style="font-weight: 600; color: #333; margin-bottom: 8px;">
+            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
+              <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">
                 <i class="fas fa-server" style="color: #667eea;"></i> 服务器信息
               </div>
-              <div style="color: #475569; font-size: 14px;">
+              <div style="color: var(--text-secondary); font-size: 14px;">
                 {{ user.ftp_host }}:{{ user.ftp_port }}
               </div>
             </div>
 
             <!-- SFTP空间使用统计 -->
-            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid #e2e8f0;">
+            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                <div style="font-weight: 600; color: #333;">
+                <div style="font-weight: 600; color: var(--text-primary);">
                   <i class="fas fa-chart-pie" style="color: #667eea;"></i> 空间使用统计
                 </div>
                 <button
@@ -1422,11 +1653,11 @@
               <div v-if="sftpUsageLoading && !sftpUsage" style="text-align: center; padding: 20px; color: #667eea;">
                 <i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i>
                 <div style="margin-top: 8px; font-size: 13px;">正在统计 SFTP 空间使用情况...</div>
-                <div style="margin-top: 4px; font-size: 12px; color: #999;">（文件较多时可能需要一些时间）</div>
+                <div style="margin-top: 4px; font-size: 12px; color: var(--text-muted);">（文件较多时可能需要一些时间）</div>
               </div>
 
               <!-- 错误提示 -->
-              <div v-else-if="sftpUsageError" style="padding: 12px; background: #fff5f5; border-radius: 8px; color: #c53030; font-size: 13px;">
+              <div v-else-if="sftpUsageError" style="padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; color: #ef4444; font-size: 13px;">
                 <i class="fas fa-exclamation-triangle"></i> {{ sftpUsageError }}
               </div>
 
@@ -1436,24 +1667,24 @@
                   <div style="font-size: 20px; font-weight: 700;">{{ sftpUsage.totalSizeFormatted }}</div>
                   <div style="font-size: 12px; opacity: 0.9; margin-top: 4px;">总使用空间</div>
                 </div>
-                <div style="text-align: center; padding: 12px; background: #f0f9ff; border-radius: 10px; border: 1px solid #e0f2fe;">
-                  <div style="font-size: 20px; font-weight: 700; color: #0369a1;">{{ sftpUsage.fileCount }}</div>
-                  <div style="font-size: 12px; color: #64748b; margin-top: 4px;">文件数</div>
+                <div style="text-align: center; padding: 12px; background: rgba(59, 130, 246, 0.1); border-radius: 10px; border: 1px solid rgba(59,130,246,0.2);">
+                  <div style="font-size: 20px; font-weight: 700; color: #3b82f6;">{{ sftpUsage.fileCount }}</div>
+                  <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">文件数</div>
                 </div>
-                <div style="text-align: center; padding: 12px; background: #fefce8; border-radius: 10px; border: 1px solid #fef08a;">
-                  <div style="font-size: 20px; font-weight: 700; color: #a16207;">{{ sftpUsage.dirCount }}</div>
-                  <div style="font-size: 12px; color: #64748b; margin-top: 4px;">文件夹数</div>
+                <div style="text-align: center; padding: 12px; background: rgba(245, 158, 11, 0.1); border-radius: 10px; border: 1px solid rgba(245,158,11,0.3);">
+                  <div style="font-size: 20px; font-weight: 700; color: #f59e0b;">{{ sftpUsage.dirCount }}</div>
+                  <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">文件夹数</div>
                 </div>
               </div>
 
               <!-- 未统计提示 -->
-              <div v-else style="text-align: center; padding: 16px; color: #64748b; font-size: 13px;">
-                <i class="fas fa-database" style="font-size: 24px; color: #cbd5e1; margin-bottom: 8px; display: block;"></i>
+              <div v-else style="text-align: center; padding: 16px; color: var(--text-muted); font-size: 13px;">
+                <i class="fas fa-database" style="font-size: 24px; color: var(--text-muted); margin-bottom: 8px; display: block;"></i>
                 点击"刷新"按钮统计 SFTP 空间使用情况
               </div>
             </div>
 
-            <div style="padding: 10px; background: #eef2ff; border-radius: 10px; color: #374151; font-size: 13px;">
+            <div style="padding: 10px; background: rgba(102, 126, 234, 0.1); border-radius: 10px; color: var(--text-secondary); font-size: 13px;">
               <i class="fas fa-info-circle" style="color: #4b5fc9;"></i>
               数据存储在你的 SFTP 服务器上，如需切换回本地请联系管理员调整权限。
             </div>
@@ -1519,7 +1750,7 @@
               <i class="fas fa-share-alt" style="font-size: 64px; color: #667eea;"></i>
             </div>
             <div class="file-name" :title="share.share_path">{{ share.share_path }}</div>
-            <div class="file-size" style="font-size: 12px; color: #666;">
+            <div class="file-size" style="font-size: 12px; color: var(--text-secondary);">
               访问: {{ share.view_count }} | 下载: {{ share.download_count }}
             </div>
             <div class="file-actions">
@@ -1529,7 +1760,7 @@
               <button class="btn-icon" @click.stop="copyShareLink(share.share_url)" title="复制链接">
                 <i class="fas fa-copy"></i>
               </button>
-              <button class="btn-icon" style="color: #dc3545;" @click.stop="deleteShare(share.id)" title="删除">
+              <button class="btn-icon" style="color: #ef4444;" @click.stop="deleteShare(share.id)" title="删除">
                 <i class="fas fa-trash"></i>
               </button>
             </div>
@@ -1557,11 +1788,11 @@
               <td style="padding: 10px; text-align: center;">{{ share.view_count }}</td>
               <td style="padding: 10px; text-align: center;">{{ share.download_count }}</td>
               <td style="padding: 10px; text-align: center;">
-                <span v-if="!share.expires_at" style="color: #28a745;"><i class="fas fa-infinity"></i> 永久有效</span>
+                <span v-if="!share.expires_at" style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
                 <span v-else :style="{color: isExpiringSoon(share.expires_at) ? '#ffc107' : isExpired(share.expires_at) ? '#dc3545' : '#667eea'}" :title="share.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(share.expires_at) }}</span>
               </td>
               <td style="padding: 10px; text-align: center;">
-                <button class="btn" style="background: #dc3545; color: white;" @click="deleteShare(share.id)">
+                <button class="btn" style="background: #ef4444; color: white;" @click="deleteShare(share.id)">
                   <i class="fas fa-trash"></i> 删除
                 </button>
               </td>
@@ -1691,7 +1922,7 @@
           </div>
 
           <!-- 配额剩余 -->
-          <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); padding: 20px; border-radius: 12px; color: #333;">
+          <div style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)); padding: 20px; border-radius: 12px; color: var(--text-primary); border: 1px solid var(--glass-border);">
             <div style="display: flex; align-items: center; justify-content: space-between;">
               <div>
                 <div style="font-size: 14px; opacity: 0.8; margin-bottom: 8px;">安全可分配配额</div>
@@ -1709,13 +1940,13 @@
 
         <!-- 存储警告提示 -->
         <div v-if="serverStorageStats.totalDisk > 0 && ((serverStorageStats.usedDisk / serverStorageStats.totalDisk) > 0.9)" 
-             style="margin-top: 20px; padding: 15px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 6px; color: #856404;">
+             style="margin-top: 20px; padding: 15px; background: rgba(245, 158, 11, 0.15); border-left: 4px solid #f59e0b; border-radius: 6px; color: #fbbf24;">
           <i class="fas fa-exclamation-triangle"></i>
           <strong>警告:</strong> 磁盘使用率已超过90%，建议及时清理空间或扩容！
         </div>
 
         <div v-if="serverStorageStats.totalUserQuotas > serverStorageStats.totalDisk"
-             style="margin-top: 20px; padding: 15px; background: #f8d7da; border-left: 4px solid #dc3545; border-radius: 6px; color: #721c24;">
+             style="margin-top: 20px; padding: 15px; background: rgba(239, 68, 68, 0.15); border-left: 4px solid #ef4444; border-radius: 6px; color: #fca5a5;">
           <i class="fas fa-exclamation-circle"></i>
           <strong>配额超分配:</strong> 用户配额总和 ({{ formatBytes(serverStorageStats.totalUserQuotas) }}) 已超过磁盘总容量 ({{ formatBytes(serverStorageStats.totalDisk) }})！
         </div>
@@ -1737,7 +1968,7 @@
           <button class="btn btn-primary" @click="updateSystemSettings" style="height: 40px;">
             <i class="fas fa-save"></i> 保存
           </button>
-          <span style="color: #666; font-size: 13px;">修改后需要重启服务才能生效</span>
+          <span style="color: var(--text-secondary); font-size: 13px;">修改后需要重启服务才能生效</span>
         </div>
         <hr style="margin: 20px 0;">
         <h4 style="margin-bottom: 12px;">SMTP 邮件配置（用于注册激活和找回密码）</h4>
@@ -1810,13 +2041,13 @@
               {{ getOverallStatusText(healthCheck.overallStatus) }}
             </div>
             <div style="display: flex; gap: 12px; font-size: 13px;">
-              <span style="color: #28a745;"><i class="fas fa-check"></i> 通过: {{ healthCheck.summary.pass }}</span>
+              <span style="color: #22c55e;"><i class="fas fa-check"></i> 通过: {{ healthCheck.summary.pass }}</span>
               <span style="color: #ffc107;"><i class="fas fa-exclamation"></i> 警告: {{ healthCheck.summary.warning }}</span>
-              <span style="color: #dc3545;"><i class="fas fa-times"></i> 失败: {{ healthCheck.summary.fail }}</span>
+              <span style="color: #ef4444;"><i class="fas fa-times"></i> 失败: {{ healthCheck.summary.fail }}</span>
               <span style="color: #17a2b8;"><i class="fas fa-info"></i> 信息: {{ healthCheck.summary.info }}</span>
             </div>
           </div>
-          <div v-if="healthCheck.lastCheck" style="font-size: 12px; color: #888; margin-top: 8px;">
+          <div v-if="healthCheck.lastCheck" style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">
             上次检测: {{ new Date(healthCheck.lastCheck).toLocaleString() }}
           </div>
         </div>
@@ -1825,10 +2056,10 @@
         <div v-if="healthCheck.checks.length > 0">
           <!-- 按分类分组 -->
           <div style="margin-bottom: 20px;">
-            <h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-shield-alt"></i> 安全配置</h4>
+            <h4 style="margin-bottom: 12px; color: var(--text-primary);"><i class="fas fa-shield-alt"></i> 安全配置</h4>
             <div style="display: grid; gap: 10px;">
               <div v-for="check in healthCheck.checks.filter(c => c.category === 'security')" :key="check.name"
-                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
+                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px;">
                 <span style="font-size: 18px; width: 24px; text-align: center;"
                       :class="{
                         'text-green-600': check.status === 'pass',
@@ -1840,7 +2071,7 @@
                 </span>
                 <div style="flex: 1;">
                   <div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
-                  <div style="font-size: 13px; color: #666;">{{ check.message }}</div>
+                  <div style="font-size: 13px; color: var(--text-secondary);">{{ check.message }}</div>
                   <div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
                     <i class="fas fa-lightbulb"></i> {{ check.suggestion }}
                   </div>
@@ -1850,10 +2081,10 @@
           </div>
 
           <div style="margin-bottom: 20px;">
-            <h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-server"></i> 服务状态</h4>
+            <h4 style="margin-bottom: 12px; color: var(--text-primary);"><i class="fas fa-server"></i> 服务状态</h4>
             <div style="display: grid; gap: 10px;">
               <div v-for="check in healthCheck.checks.filter(c => c.category === 'service')" :key="check.name"
-                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
+                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px;">
                 <span style="font-size: 18px; width: 24px; text-align: center;"
                       :class="{
                         'text-green-600': check.status === 'pass',
@@ -1865,7 +2096,7 @@
                 </span>
                 <div style="flex: 1;">
                   <div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
-                  <div style="font-size: 13px; color: #666;">{{ check.message }}</div>
+                  <div style="font-size: 13px; color: var(--text-secondary);">{{ check.message }}</div>
                   <div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
                     <i class="fas fa-lightbulb"></i> {{ check.suggestion }}
                   </div>
@@ -1875,10 +2106,10 @@
           </div>
 
           <div>
-            <h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-cog"></i> 运行配置</h4>
+            <h4 style="margin-bottom: 12px; color: var(--text-primary);"><i class="fas fa-cog"></i> 运行配置</h4>
             <div style="display: grid; gap: 10px;">
               <div v-for="check in healthCheck.checks.filter(c => c.category === 'config')" :key="check.name"
-                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
+                   style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px;">
                 <span style="font-size: 18px; width: 24px; text-align: center;"
                       :class="{
                         'text-green-600': check.status === 'pass',
@@ -1890,7 +2121,7 @@
                 </span>
                 <div style="flex: 1;">
                   <div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
-                  <div style="font-size: 13px; color: #666;">{{ check.message }}</div>
+                  <div style="font-size: 13px; color: var(--text-secondary);">{{ check.message }}</div>
                   <div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
                     <i class="fas fa-lightbulb"></i> {{ check.suggestion }}
                   </div>
@@ -1901,7 +2132,7 @@
         </div>
 
         <!-- 未检测提示 -->
-        <div v-else style="text-align: center; padding: 40px; color: #888;">
+        <div v-else style="text-align: center; padding: 40px; color: var(--text-muted);">
           <i class="fas fa-stethoscope" style="font-size: 48px; margin-bottom: 15px;"></i>
           <p>点击"刷新检测"按钮开始系统健康检测</p>
         </div>
@@ -1925,9 +2156,9 @@
         </div>
 
         <!-- 筛选器 -->
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 8px;">
           <div style="display: flex; align-items: center; gap: 8px;">
-            <label style="font-size: 13px; color: #666;">级别:</label>
+            <label style="font-size: 13px; color: var(--text-secondary);">级别:</label>
             <select v-model="systemLogs.filters.level" @change="filterLogs" style="padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px;">
               <option value="">全部</option>
               <option value="info">信息</option>
@@ -1936,7 +2167,7 @@
             </select>
           </div>
           <div style="display: flex; align-items: center; gap: 8px;">
-            <label style="font-size: 13px; color: #666;">分类:</label>
+            <label style="font-size: 13px; color: var(--text-secondary);">分类:</label>
             <select v-model="systemLogs.filters.category" @change="filterLogs" style="padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px;">
               <option value="">全部</option>
               <option value="auth">认证</option>
@@ -1948,7 +2179,7 @@
             </select>
           </div>
           <div style="display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;">
-            <label style="font-size: 13px; color: #666;">搜索:</label>
+            <label style="font-size: 13px; color: var(--text-secondary);">搜索:</label>
             <input type="text" v-model="systemLogs.filters.keyword" @keyup.enter="filterLogs"
                    placeholder="搜索日志内容..." style="flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px;">
           </div>
@@ -1958,7 +2189,7 @@
         </div>
 
         <!-- 日志统计 -->
-        <div v-if="systemLogs.total > 0" style="margin-bottom: 15px; font-size: 13px; color: #666;">
+        <div v-if="systemLogs.total > 0" style="margin-bottom: 15px; font-size: 13px; color: var(--text-secondary);">
           共 {{ systemLogs.total }} 条日志，第 {{ systemLogs.page }}/{{ systemLogs.totalPages }} 页
         </div>
 
@@ -1967,7 +2198,7 @@
           <div v-for="log in systemLogs.logs" :key="log.id"
                style="display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid #eee; align-items: flex-start;">
             <!-- 时间 -->
-            <div style="width: 140px; flex-shrink: 0; font-size: 12px; color: #888;">
+            <div style="width: 140px; flex-shrink: 0; font-size: 12px; color: var(--text-muted);">
               {{ formatLogTime(log.created_at) }}
             </div>
             <!-- 级别标签 -->
@@ -1977,15 +2208,15 @@
               </span>
             </div>
             <!-- 分类图标 -->
-            <div style="width: 70px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666;">
+            <div style="width: 70px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary);">
               <i class="fas" :class="getLogCategoryIcon(log.category)"></i>
               {{ getLogCategoryText(log.category) }}
             </div>
             <!-- 内容 -->
             <div style="flex: 1; min-width: 0;">
               <div style="font-weight: 500; margin-bottom: 4px;">{{ log.action }}</div>
-              <div style="font-size: 13px; color: #555;">{{ log.message }}</div>
-              <div v-if="log.username || log.ip_address" style="font-size: 11px; color: #888; margin-top: 4px;">
+              <div style="font-size: 13px; color: var(--text-secondary);">{{ log.message }}</div>
+              <div v-if="log.username || log.ip_address" style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
                 <span v-if="log.username"><i class="fas fa-user"></i> {{ log.username }}</span>
                 <span v-if="log.ip_address" style="margin-left: 10px;"><i class="fas fa-globe"></i> {{ log.ip_address }}</span>
               </div>
@@ -1994,13 +2225,13 @@
         </div>
 
         <!-- 空状态 -->
-        <div v-else-if="!systemLogs.loading" style="text-align: center; padding: 40px; color: #888;">
+        <div v-else-if="!systemLogs.loading" style="text-align: center; padding: 40px; color: var(--text-muted);">
           <i class="fas fa-clipboard" style="font-size: 48px; margin-bottom: 15px;"></i>
           <p>暂无日志记录</p>
         </div>
 
         <!-- 加载中 -->
-        <div v-if="systemLogs.loading" style="text-align: center; padding: 40px; color: #888;">
+        <div v-if="systemLogs.loading" style="text-align: center; padding: 40px; color: var(--text-muted);">
           <i class="fas fa-spinner fa-spin" style="font-size: 24px;"></i>
           <p>加载中...</p>
         </div>
@@ -2010,7 +2241,7 @@
           <button class="btn btn-secondary" @click="loadSystemLogs(systemLogs.page - 1)" :disabled="systemLogs.page <= 1" style="padding: 6px 12px;">
             <i class="fas fa-chevron-left"></i> 上一页
           </button>
-          <span style="display: flex; align-items: center; padding: 0 15px; color: #666;">
+          <span style="display: flex; align-items: center; padding: 0 15px; color: var(--text-secondary);">
             {{ systemLogs.page }} / {{ systemLogs.totalPages }}
           </span>
           <button class="btn btn-secondary" @click="loadSystemLogs(systemLogs.page + 1)" :disabled="systemLogs.page >= systemLogs.totalPages" style="padding: 6px 12px;">
@@ -2027,7 +2258,7 @@
         <div style="overflow-x: auto;">
           <table style="width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px;">
             <thead>
-              <tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
+              <tr style="background: rgba(255,255,255,0.05);">
                 <th style="padding: 10px; text-align: left; width: 4%;">ID</th>
                 <th style="padding: 10px; text-align: left; width: 10%;">用户名</th>
                 <th style="padding: 10px; text-align: center; width: 10%;">角色</th>
@@ -2051,15 +2282,15 @@
                   <span v-if="u.is_admin" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3px 10px; border-radius: 4px; white-space: nowrap;">
                     <i class="fas fa-crown"></i> 管理员
                   </span>
-                  <span v-else style="background: #e9ecef; color: #495057; padding: 3px 10px; border-radius: 4px; white-space: nowrap;">
+                  <span v-else style="background: rgba(255,255,255,0.1); color: var(--text-secondary); padding: 3px 10px; border-radius: 4px; white-space: nowrap;">
                     <i class="fas fa-user"></i> 用户
                   </span>
                 </td>
-                <td style="padding: 10px; font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="u.email">{{ u.email }}</td>
+                <td style="padding: 10px; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="u.email">{{ u.email }}</td>
                 <td style="padding: 10px; text-align: center; font-size: 12px;">
                   <span v-if="u.storage_permission === 'local_only'" style="background: #667eea; color: white; padding: 3px 8px; border-radius: 4px;">仅本地</span>
                   <span v-else-if="u.storage_permission === 'sftp_only'" style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 4px;">仅SFTP</span>
-                  <span v-else style="background: #28a745; color: white; padding: 3px 8px; border-radius: 4px;">用户选择</span>
+                  <span v-else style="background: #22c55e; color: white; padding: 3px 8px; border-radius: 4px;">用户选择</span>
                 </td>
                 <td style="padding: 10px; text-align: center; font-size: 12px;">
                   <span v-if="u.current_storage_type === 'local'" style="color: #667eea;">
@@ -2072,32 +2303,32 @@
                 <td style="padding: 10px; text-align: center; font-size: 12px;">
                   <div v-if="u.current_storage_type === 'local'">
                     <div>{{ formatBytes(u.local_storage_used) }} / {{ formatBytes(u.local_storage_quota) }}</div>
-                    <div style="font-size: 11px; color: #999;">
+                    <div style="font-size: 11px; color: var(--text-muted);">
                       {{ Math.round((u.local_storage_used / u.local_storage_quota) * 100) }}%
                     </div>
                   </div>
-                  <span v-else style="color: #999;">-</span>
+                  <span v-else style="color: var(--text-muted);">-</span>
                 </td>
                 <td style="padding: 10px; text-align: center;">
-                  <span v-if="u.is_banned" style="color: #dc3545; font-weight: 600;">已封禁</span>
-                  <span v-else-if="!u.is_verified" style="color: #fd7e14; font-weight: 600;">未激活</span>
-                  <span v-else style="color: #28a745;">正常</span>
+                  <span v-if="u.is_banned" style="color: #ef4444; font-weight: 600;">已封禁</span>
+                  <span v-else-if="!u.is_verified" style="color: #f59e0b; font-weight: 600;">未激活</span>
+                  <span v-else style="color: #22c55e;">正常</span>
                 </td>
                 <td style="padding: 10px; text-align: center;">
                   <div style="display: flex; gap: 3px; justify-content: center; flex-wrap: wrap;">
                     <button class="btn" style="background: #667eea; color: white; font-size: 11px; padding: 5px 10px;" @click="openEditStorageModal(u)" title="存储设置">
                       <i class="fas fa-database"></i> 存储
                     </button>
-                    <button v-if="!u.is_banned" class="btn" style="background: #ffc107; color: #000; font-size: 11px; padding: 5px 10px;" @click="banUser(u.id, true)">
+                    <button v-if="!u.is_banned" class="btn" style="background: #f59e0b; color: #000; font-size: 11px; padding: 5px 10px;" @click="banUser(u.id, true)">
                       <i class="fas fa-ban"></i> 封禁
                     </button>
-                    <button v-else class="btn" style="background: #28a745; color: white; font-size: 11px; padding: 5px 10px;" @click="banUser(u.id, false)">
+                    <button v-else class="btn" style="background: #22c55e; color: white; font-size: 11px; padding: 5px 10px;" @click="banUser(u.id, false)">
                       <i class="fas fa-check"></i> 解封
                     </button>
-                    <button v-if="u.has_ftp_config" class="btn" style="background: #17a2b8; color: white; font-size: 11px; padding: 5px 10px;" @click="openFileInspection(u)">
+                    <button v-if="u.has_ftp_config" class="btn" style="background: #3b82f6; color: white; font-size: 11px; padding: 5px 10px;" @click="openFileInspection(u)">
                       <i class="fas fa-folder-open"></i> 文件
                     </button>
-                    <button class="btn" style="background: #dc3545; color: white; font-size: 11px; padding: 5px 10px;" @click="deleteUser(u.id)">
+                    <button class="btn" style="background: #ef4444; color: white; font-size: 11px; padding: 5px 10px;" @click="deleteUser(u.id)">
                       <i class="fas fa-trash"></i>
                     </button>
                   </div>
@@ -2119,30 +2350,30 @@
 
         <!-- 工具状态显示 -->
         <div v-if="uploadToolStatus !== null">
-          <div v-if="uploadToolStatus.exists" style="padding: 15px; background: #d4edda; border-left: 4px solid #28a745; border-radius: 6px; margin-bottom: 20px;">
+          <div v-if="uploadToolStatus.exists" style="padding: 15px; background: rgba(34, 197, 94, 0.15); border-left: 4px solid #22c55e; border-radius: 6px; margin-bottom: 20px;">
             <div style="display: flex; align-items: center; justify-content: space-between;">
               <div>
-                <div style="color: #155724; font-weight: 600; margin-bottom: 5px;">
+                <div style="color: #86efac; font-weight: 600; margin-bottom: 5px;">
                   <i class="fas fa-check-circle"></i> 上传工具已存在
                 </div>
-                <div style="color: #155724; font-size: 13px;">
+                <div style="color: #86efac; font-size: 13px;">
                   文件大小: {{ uploadToolStatus.fileInfo.sizeMB }} MB
                 </div>
-                <div style="color: #155724; font-size: 12px; margin-top: 3px;">
+                <div style="color: #86efac; font-size: 12px; margin-top: 3px;">
                   最后修改: {{ formatDate(uploadToolStatus.fileInfo.modifiedAt) }}
                 </div>
               </div>
-              <button class="btn btn-primary" @click="checkUploadTool" style="background: #28a745;">
+              <button class="btn btn-primary" @click="checkUploadTool" style="background: #22c55e;">
                 <i class="fas fa-sync-alt"></i> 重新检测
               </button>
             </div>
           </div>
 
-          <div v-else style="padding: 15px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 6px; margin-bottom: 20px;">
-            <div style="color: #856404; font-weight: 600; margin-bottom: 5px;">
+          <div v-else style="padding: 15px; background: rgba(245, 158, 11, 0.15); border-left: 4px solid #f59e0b; border-radius: 6px; margin-bottom: 20px;">
+            <div style="color: #fbbf24; font-weight: 600; margin-bottom: 5px;">
               <i class="fas fa-exclamation-triangle"></i> 上传工具不存在
             </div>
-            <div style="color: #856404; font-size: 13px;">
+            <div style="color: #fbbf24; font-size: 13px;">
               普通用户将无法下载上传工具，请上传工具文件
             </div>
           </div>
@@ -2150,13 +2381,13 @@
 
         <!-- 操作按钮组 -->
         <div style="display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap;">
-          <button class="btn btn-primary" @click="checkUploadTool" :disabled="checkingUploadTool" style="background: #17a2b8;">
+          <button class="btn btn-primary" @click="checkUploadTool" :disabled="checkingUploadTool" style="background: #3b82f6;">
             <i class="fas fa-search" v-if="!checkingUploadTool"></i>
             <i class="fas fa-spinner fa-spin" v-else></i>
             {{ checkingUploadTool ? '检测中...' : '检测上传工具' }}
           </button>
 
-          <button v-if="uploadToolStatus && !uploadToolStatus.exists" class="btn btn-primary" @click="$refs.uploadToolInput.click()" :disabled="uploadingTool" style="background: #28a745;">
+          <button v-if="uploadToolStatus && !uploadToolStatus.exists" class="btn btn-primary" @click="$refs.uploadToolInput.click()" :disabled="uploadingTool" style="background: #22c55e;">
             <i class="fas fa-upload" v-if="!uploadingTool"></i>
             <i class="fas fa-spinner fa-spin" v-else></i>
             {{ uploadingTool ? '上传中...' : '上传工具文件' }}
@@ -2166,8 +2397,8 @@
         </div>
 
         <!-- 使用说明 -->
-        <div style="margin-top: 20px; padding: 12px; background: #e7f3ff; border-left: 4px solid #2196F3; border-radius: 6px;">
-          <div style="color: #0c5460; font-size: 13px; line-height: 1.6;">
+        <div style="margin-top: 20px; padding: 12px; background: rgba(59, 130, 246, 0.1); border-left: 4px solid #3b82f6; border-radius: 6px;">
+          <div style="color: #93c5fd; font-size: 13px; line-height: 1.6;">
             <strong><i class="fas fa-info-circle"></i> 说明：</strong>
             <ul style="margin: 8px 0 0 20px; padding-left: 0;">
               <li>上传工具文件应为 .exe 格式，大小通常在 20-50 MB</li>
@@ -2184,7 +2415,7 @@
     <div v-if="showForgotPasswordModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showForgotPasswordModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">忘记密码 - 邮箱重置</h3>
-        <p style="color: #666; margin-bottom: 15px; font-size: 14px;">
+        <p style="color: var(--text-secondary); margin-bottom: 15px; font-size: 14px;">
           请输入注册邮箱，我们会发送重置链接到您的邮箱
         </p>
         <div class="form-group">
@@ -2206,7 +2437,7 @@
     <div v-if="showResetPasswordModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showResetPasswordModal')">
       <div class="modal-content" @click.stop>
         <h3 style="margin-bottom: 20px;">设置新密码</h3>
-        <p style="color: #666; margin-bottom: 15px; font-size: 14px;">
+        <p style="color: var(--text-secondary); margin-bottom: 15px; font-size: 14px;">
           重置链接已验证，请输入新密码
         </p>
         <div class="form-group">
@@ -2230,7 +2461,7 @@
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
           <h3 style="margin: 0;">
             <i class="fas fa-eye"></i> 文件审查 - {{ inspectionUser?.username }}
-            <span style="background: #ffc107; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; margin-left: 10px;">只读模式</span>
+            <span style="background: #f59e0b; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; margin-left: 10px;">只读模式</span>
           </h3>
           <button class="btn-icon" @click="showFileInspectionModal = false" style="font-size: 20px;">
             <i class="fas fa-times"></i>
@@ -2239,14 +2470,14 @@
 
         <!-- 路径导航和视图切换 -->
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; gap: 15px;">
-          <div style="background: #f5f5f5; padding: 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; flex: 1;">
+          <div style="background: rgba(255,255,255,0.03); padding: 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; flex: 1;">
             <button class="btn-icon" @click="navigateInspectionToRoot" title="返回根目录">
               <i class="fas fa-home"></i>
             </button>
             <button class="btn-icon" @click="navigateInspectionUp" :disabled="inspectionPath === '/'" title="上一级">
               <i class="fas fa-arrow-up"></i>
             </button>
-            <span style="flex: 1; color: #666; font-family: monospace;">{{ inspectionPath }}</span>
+            <span style="flex: 1; color: var(--text-secondary); font-family: monospace;">{{ inspectionPath }}</span>
           </div>
           <div style="display: flex; gap: 10px;">
             <button class="btn" :class="inspectionViewMode === 'grid' ? 'btn-primary' : 'btn-secondary'" @click="inspectionViewMode = 'grid'">
@@ -2291,7 +2522,7 @@
           <div v-else class="file-list">
             <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
               <thead>
-                <tr style="border-bottom: 2px solid #ddd; background: #f5f5f5;">
+                <tr style="background: rgba(255,255,255,0.05);">
                   <th style="padding: 12px; text-align: left; width: 50%;">文件名</th>
                   <th style="padding: 12px; text-align: left; width: 25%;">大小</th>
                   <th style="padding: 12px; text-align: left; width: 25%;">修改时间</th>
@@ -2317,15 +2548,15 @@
                     <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;" :title="file.name">{{ file.name }}</span>
                     </div>
                   </td>
-                  <td style="padding: 10px; color: #666;">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
-                  <td style="padding: 10px; color: #666;">{{ formatDate(file.modifiedAt) }}</td>
+                  <td style="padding: 10px; color: var(--text-secondary);">{{ file.isDirectory ? '-' : file.sizeFormatted }}</td>
+                  <td style="padding: 10px; color: var(--text-secondary);">{{ formatDate(file.modifiedAt) }}</td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
 
-        <div style="margin-top: 15px; padding: 10px; background: #fff3cd; border-radius: 6px; color: #856404;">
+        <div style="margin-top: 15px; padding: 10px; background: rgba(245, 158, 11, 0.15); border-radius: 6px; color: #fbbf24;">
           <i class="fas fa-info-circle"></i> 只读模式：双击文件夹可进入，无法下载、修改或删除文件
         </div>
       </div>
@@ -2362,13 +2593,13 @@
       <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
         <i class="fas fa-cloud-upload-alt" style="font-size: 24px; color: #667eea;"></i>
         <div style="flex: 1;">
-          <div style="font-weight: 600; color: #333; margin-bottom: 4px;">正在上传文件</div>
-          <div style="font-size: 13px; color: #666;">{{ uploadingFileName }}</div>
-<div v-if="totalBytes > 0" style="font-size: 12px; color: #999; margin-top: 2px;">            {{ formatFileSize(uploadedBytes) }} / {{ formatFileSize(totalBytes) }}          </div>
+          <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">正在上传文件</div>
+          <div style="font-size: 13px; color: var(--text-secondary);">{{ uploadingFileName }}</div>
+<div v-if="totalBytes > 0" style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">            {{ formatFileSize(uploadedBytes) }} / {{ formatFileSize(totalBytes) }}          </div>
         </div>
         <div style="font-size: 20px; font-weight: 700; color: #667eea;">{{ uploadProgress }}%</div>
       </div>
-      <div style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
+      <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;">
         <div :style="{
           width: uploadProgress + '%',
           height: '100%',
@@ -2419,7 +2650,7 @@
             <option value="sftp_only">仅SFTP存储</option>
             <option value="user_choice">用户选择</option>
           </select>
-          <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
+          <small style="color: var(--text-secondary); font-size: 12px; margin-top: 5px; display: block;">
             仅本地：用户只能使用本地存储 | 仅SFTP：用户只能使用SFTP | 用户选择：用户可自由切换
           </small>
         </div>
@@ -2433,14 +2664,14 @@
               <option value="GB">GB</option>
             </select>
           </div>
-          <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
+          <small style="color: var(--text-secondary); font-size: 12px; margin-top: 5px; display: block;">
             配额范围: 1MB - 100GB | 建议: 大配额使用GB，小配额使用MB
           </small>
         </div>
 
-        <div style="padding: 12px; background: #f8f9fa; border-radius: 6px; margin-bottom: 20px;">
-          <div style="font-size: 13px; color: #666; line-height: 1.6;">
-            <strong style="color: #333;">配额说明:</strong><br>
+        <div style="padding: 12px; background: rgba(255,255,255,0.03); border-radius: 6px; margin-bottom: 20px;">
+          <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.6;">
+            <strong style="color: var(--text-primary);">配额说明:</strong><br>
             • 默认配额: 1GB<br>
             • 当前配额: {{ editStorageForm.local_storage_quota_value }} {{ editStorageForm.quota_unit }} 
               ({{ editStorageForm.quota_unit === 'GB' ? (editStorageForm.local_storage_quota_value * 1024).toFixed(0) : editStorageForm.local_storage_quota_value }} MB)<br>
@@ -2579,12 +2810,12 @@
       display: flex;
       align-items: center;
       gap: 12px;
-      color: #333;
+      color: var(--text-primary);
       font-size: 14px;
     }
     
     .context-menu-item:hover {
-      background: #f5f5f5;
+      background: rgba(255,255,255,0.03);
     }
     
     .context-menu-item i {
@@ -2593,16 +2824,16 @@
     }
     
     .context-menu-item-danger {
-      color: #dc3545;
+      color: #ef4444;
     }
     
     .context-menu-item-danger:hover {
-      background: #fff5f5;
+      background: rgba(239, 68, 68, 0.1);
     }
     
     .context-menu-divider {
       height: 1px;
-      background: #e0e0e0;
+      background: rgba(255,255,255,0.1);
       margin: 4px 0;
     }
     
@@ -2679,7 +2910,7 @@
       align-items: center;
       justify-content: center;
       padding: 20px;
-      background: #f5f5f5;
+      background: rgba(255,255,255,0.03);
       flex: 1;
       overflow: auto;
     }