Spaces:

ixingchen
/

ghproxy

Running

App Files Files Community

ixingchen commited on Mar 15

Commit

7199e09

verified ·

1 Parent(s): eb052f2

🐳 15/03 - 13:22 - 内容必须是 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ChatGPT 批量注册 — 管理面板</title> <met

Browse files

Files changed (2) hide show

index.html +133 -90
style.css +857 -15

index.html CHANGED Viewed

@@ -290,102 +290,124 @@
 </head>
 <body class="antialiased">
     <!-- Navigation -->
-    <nav class="glass-panel sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-4">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-4">
-                    <div class="w-10 h-10 bg-gradient-to-br from-accent-500 to-primary-500 rounded-xl flex items-center justify-center">
-                        <i class="fas fa-robot text-white text-xl"></i>
-                    </div>
-                    <div>
-                        <h1 class="text-2xl font-bold">GPT Register <span class="gradient-text">Pro</span></h1>
-                        <p class="text-sm text-gray-400">智能批量注册管理系统</p>
-                    </div>
                 </div>
-                <div class="hidden md:flex items-center space-x-6">
-                    <div class="flex items-center space-x-2 stat-badge">
-                        <span class="status-indicator status-online"></span>
-                        <span>系统运行中</span>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <i class="fas fa-user-circle text-gray-400"></i>
-                        <span class="text-gray-300">管理员</span>
-                    </div>
-                    <button class="btn-secondary">
-                        <i class="fas fa-cog mr-2"></i>设置
-                    </button>
                 </div>
-                <button id="mobileMenuBtn" class="md:hidden text-gray-400 hover:text-white">
-                    <i class="fas fa-bars text-xl"></i>
-                </button>
             </div>
         </div>
     </nav>
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
-        <!-- Stats Overview -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            <div class="stat-card">
-                <div class="flex items-center justify-between">
                     <div>
-                        <p class="text-gray-400 text-sm">今日注册</p>
-                        <h3 class="text-3xl font-bold mt-2">1,248</h3>
                     </div>
-                    <div class="w-12 h-12 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-full flex items-center justify-center">
-                        <i class="fas fa-user-plus text-green-400 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4">
-                    <p class="text-sm text-green-400"><i class="fas fa-arrow-up mr-1"></i> +12% 较昨日</p>
-                </div>
             </div>
-            <div class="stat-card">
-                <div class="flex items-center justify-between">
                     <div>
-                        <p class="text-gray-400 text-sm">活跃账号</p>
-                        <h3 class="text-3xl font-bold mt-2">8,432</h3>
                     </div>
-                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-full flex items-center justify-center">
-                        <i class="fas fa-users text-blue-400 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4">
-                    <p class="text-sm text-blue-400"><i class="fas fa-check-circle mr-1"></i> 98% 活跃率</p>
-                </div>
             </div>
-            <div class="stat-card">
-                <div class="flex items-center justify-between">
                     <div>
-                        <p class="text-gray-400 text-sm">成功率</p>
-                        <h3 class="text-3xl font-bold mt-2">94.7%</h3>
                     </div>
-                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-full flex items-center justify-center">
-                        <i class="fas fa-chart-line text-purple-400 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4">
-                    <p class="text-sm text-purple-400"><i class="fas fa-trending-up mr-1"></i> +2.3% 提升</p>
-                </div>
             </div>
-            <div class="stat-card">
-                <div class="flex items-center justify-between">
                     <div>
-                        <p class="text-gray-400 text-sm">队列任务</p>
-                        <h3 class="text-3xl font-bold mt-2">156</h3>
                     </div>
-                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500/20 to-orange-600/20 rounded-full flex items-center justify-center">
-                        <i class="fas fa-tasks text-orange-400 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4">
-                    <p class="text-sm text-orange-400"><i class="fas fa-clock mr-1"></i> 运行中</p>
-                </div>
             </div>
         </div>
@@ -393,24 +415,29 @@
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <!-- Left Column -->
             <div class="lg:col-span-2 space-y-8">
-                <!-- Batch Registration Panel -->
-                <div class="dashboard-card p-6">
-                    <div class="flex items-center justify-between mb-6">
-                        <h2 class="text-xl font-bold">批量注册控制台</h2>
-                        <div class="flex items-center space-x-2">
-                            <span class="status-indicator status-online"></span>
-                            <span class="text-sm text-green-400">就绪</span>
                         </div>
                     </div>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                         <div>
-                            <label class="block text-gray-400 text-sm mb-2">注册数量</label>
-                            <input type="number" min="1" max="1000" value="50" class="input-field w-full">
                         </div>
                         <div>
-                            <label class="block text-gray-400 text-sm mb-2">并发线程</label>
-                            <select class="input-field w-full">
                                 <option>1 线程</option>
                                 <option selected>5 线程</option>
                                 <option>10 线程</option>
@@ -418,8 +445,8 @@
                             </select>
                         </div>
                         <div>
-                            <label class="block text-gray-400 text-sm mb-2">代理模式</label>
-                            <select class="input-field w-full">
                                 <option selected>智能轮换</option>
                                 <option>固定代理</option>
                                 <option>无代理</option>
@@ -427,21 +454,37 @@
                         </div>
                     </div>
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-4">
-                            <button class="btn-primary">
-                                <i class="fas fa-play mr-2"></i>开始注册
                             </button>
-                            <button class="btn-secondary">
-                                <i class="fas fa-pause mr-2"></i>暂停
                             </button>
                         </div>
-                        <div class="flex items-center space-x-4">
-                            <button class="btn-secondary">
-                                <i class="fas fa-download mr-2"></i>导出
                             </button>
-                            <button class="btn-secondary">
-                                <i class="fas fa-cog mr-2"></i>高级设置
                             </button>
                         </div>
                     </div>

 </head>
 <body class="antialiased">
     <!-- Navigation -->
+    <!-- 豪华导航栏 -->
+    <nav class="header">
+        <div class="header-brand">
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                    </svg>
                 </div>
+                <div>
+                    <h1 style="font-size: 1.5rem; margin-bottom: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">GPT Register Pro</h1>
+                    <p style="font-size: 0.875rem; color: var(--text-muted);">智能批量注册管理系统</p>
                 </div>
             </div>
         </div>
+        <div class="status-pill" id="statusPill">
+            <div class="dot"></div>
+            <span id="statusTxt">系统就绪</span>
+        </div>
     </nav>
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <!-- 豪华统计卡片 -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="card">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between;">
                     <div>
+                        <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">今日注册</p>
+                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">1,248</h3>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#43e97b" stroke-width="2">
+                                <polyline points="18 15 12 9 6 15"></polyline>
+                            </svg>
+                            <span style="color: var(--text-success); font-size: 0.875rem; font-weight: 500;">+12% 较昨日</span>
+                        </div>
                     </div>
+                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#43e97b" stroke-width="2">
+                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="8.5" cy="7" r="4"></circle>
+                            <line x1="20" y1="8" x2="20" y2="14"></line>
+                            <line x1="23" y1="11" x2="17" y2="11"></line>
+                        </svg>
                     </div>
                 </div>
             </div>
+            <div class="card">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between;">
                     <div>
+                        <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">活跃账号</p>
+                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">8,432</h3>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#38f9d7" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <polyline points="12 6 12 12 16 14"></polyline>
+                            </svg>
+                            <span style="color: var(--text-success); font-size: 0.875rem; font-weight: 500;">98% 活跃率</span>
+                        </div>
                     </div>
+                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#38f9d7" stroke-width="2">
+                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="9" cy="7" r="4"></circle>
+                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                        </svg>
                     </div>
                 </div>
             </div>
+            <div class="card">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between;">
                     <div>
+                        <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">成功率</p>
+                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">94.7%</h3>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2">
+                                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                                <polyline points="17 6 23 6 23 12"></polyline>
+                            </svg>
+                            <span style="color: #667eea; font-size: 0.875rem; font-weight: 500;">+2.3% 提升</span>
+                        </div>
                     </div>
+                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2">
+                            <line x1="18" y1="20" x2="18" y2="10"></line>
+                            <line x1="12" y1="20" x2="12" y2="4"></line>
+                            <line x1="6" y1="20" x2="6" y2="14"></line>
+                        </svg>
                     </div>
                 </div>
             </div>
+            <div class="card">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between;">
                     <div>
+                        <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">队列任务</p>
+                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">156</h3>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#f093fb" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <line x1="12" y1="6" x2="12" y2="12"></line>
+                                <line x1="12" y1="12" x2="16" y2="12"></line>
+                            </svg>
+                            <span style="color: #f093fb; font-size: 0.875rem; font-weight: 500;">运行中</span>
+                        </div>
                     </div>
+                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f093fb" stroke-width="2">
+                            <path d="M22 5.08V12a10 10 0 1 1-5.93-9.14"></path>
+                            <polyline points="22 6 12 13 2 6"></polyline>
+                        </svg>
                     </div>
                 </div>
             </div>
         </div>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <!-- Left Column -->
             <div class="lg:col-span-2 space-y-8">
+                <!-- 批量注册控制台 - 豪华版 -->
+                <div class="card">
+                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
+                        <h2 style="font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2">
+                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                            </svg>
+                            批量注册控制台
+                        </h2>
+                        <div style="display: flex; align-items: center; gap: 0.5rem;">
+                            <div style="width: 8px; height: 8px; background: var(--text-success); border-radius: 50%; animation: pulse 2s infinite;"></div>
+                            <span style="font-size: 0.875rem; color: var(--text-success); font-weight: 500;">就绪</span>
                         </div>
                     </div>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                         <div>
+                            <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">注册数量</label>
+                            <input type="number" min="1" max="1000" value="50" style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary);">
                         </div>
                         <div>
+                            <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">并发线程</label>
+                            <select style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); appearance: none; background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"%238a8ab3\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;">
                                 <option>1 线程</option>
                                 <option selected>5 线程</option>
                                 <option>10 线程</option>
                             </select>
                         </div>
                         <div>
+                            <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">代理模式</label>
+                            <select style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); appearance: none; background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"%238a8ab3\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;">
                                 <option selected>智能轮换</option>
                                 <option>固定代理</option>
                                 <option>无代理</option>
                         </div>
                     </div>
+                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+                        <div style="display: flex; gap: 0.75rem;">
+                            <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                                </svg>
+                                开始注册
                             </button>
+                            <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <line x1="6" y1="9" x2="6" y2="15"></line>
+                                    <line x1="18" y1="9" x2="18" y2="15"></line>
+                                </svg>
+                                暂停
                             </button>
                         </div>
+                        <div style="display: flex; gap: 0.75rem;">
+                            <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                    <polyline points="7 10 12 15 17 10"></polyline>
+                                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                                </svg>
+                                导出
                             </button>
+                            <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="3"></circle>
+                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+                                </svg>
+                                高级设置
                             </button>
                         </div>
                     </div>

style.css CHANGED Viewed

@@ -1,28 +1,870 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* ===== 高端GPT管理面板样式 ===== */
+:root {
+  /* 品牌色系 - 紫色渐变主题 */
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+  --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  --danger-gradient: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
+  /* 背景色系 - 深色豪华主题 */
+  --bg-primary: #0f0c29;
+  --bg-secondary: #1a1a2e;
+  --bg-card: #16213e;
+  --bg-card-hover: #1e2a52;
+  --bg-input: rgba(255, 255, 255, 0.05);
+  --bg-glass: rgba(255, 255, 255, 0.03);
+  /* 文字颜色 */
+  --text-primary: #ffffff;
+  --text-secondary: #b8b8d1;
+  --text-muted: #8a8ab3;
+  --text-success: #38f9d7;
+  --text-warning: #fee140;
+  --text-danger: #ffb199;
+  /* 边框与阴影 */
+  --border-color: rgba(255, 255, 255, 0.1);
+  --border-hover: rgba(255, 255, 255, 0.2);
+  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.3);
+  --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.4);
+  /* 过渡动画 */
+  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  /* 边框圆角 */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+}
+/* ===== 全局样式重置 ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 80%, rgba(240, 147, 251, 0.08) 0%, transparent 50%);
+  z-index: -1;
+  pointer-events: none;
+}
+/* ===== 滚动条美化 ===== */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-full);
+}
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: var(--radius-full);
+  transition: var(--transition-fast);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+}
+/* ===== 基础组件样式 ===== */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
 }
 h1 {
+  font-size: 2.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1rem;
+}
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1.5rem;
+  color: var(--text-primary);
+}
+h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
 }
 p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 1rem;
 }
+/* ===== 卡片组件 ===== */
 .card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-md);
+  transition: var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  opacity: 0;
+  transition: var(--transition-normal);
+}
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--border-hover);
+  background: var(--bg-card-hover);
+}
+.card:hover::before {
+  opacity: 1;
+}
+.card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.card-head:hover {
+  color: var(--text-primary);
+}
+.card-head .title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.card-head .chevron {
+  transition: var(--transition-fast);
+  color: var(--text-muted);
+}
+.card-head.collapsed .chevron {
+  transform: rotate(-90deg);
+}
+.card-body {
+  transition: var(--transition-normal);
+}
+.card-body.hidden {
+  display: none;
+}
+/* ===== 按钮样式 ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0;
+  transition: var(--transition-fast);
+  z-index: -1;
+}
+.btn:hover::before {
+  opacity: 1;
+}
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+.btn:active {
+  transform: translateY(0);
+}
+.btn-blue {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+.btn-green {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+  color: white;
+}
+.btn-red {
+  background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
+  color: white;
+}
+.btn-gray {
+  background: var(--bg-input);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+.btn-gray:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+  border-color: var(--border-hover);
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border-color: var(--border-hover);
+}
+.btn-ghost-danger {
+  background: transparent;
+  color: var(--text-danger);
+  border: 1px solid rgba(255, 177, 153, 0.3);
+}
+.btn-ghost-danger:hover {
+  background: rgba(255, 177, 153, 0.1);
+  color: var(--text-danger);
+  border-color: rgba(255, 177, 153, 0.5);
+}
+.icon-btn {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+}
+.icon-btn.danger:hover {
+  background: rgba(255, 177, 153, 0.1);
+  color: var(--text-danger);
+}
+/* ===== 表单元素 ===== */
+.form-row {
+  margin-bottom: 1rem;
+}
+.form-row label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.inp {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+}
+.inp:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  background: rgba(255, 255, 255, 0.07);
+}
+.inp::placeholder {
+  color: var(--text-muted);
+}
+textarea.inp {
+  min-height: 80px;
+  resize: vertical;
+}
+select.inp {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238a8ab3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1rem;
+  padding-right: 2.5rem;
+}
+.chk {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: var(--radius-sm);
+  border: 2px solid var(--border-color);
+  background: var(--bg-input);
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  transition: var(--transition-fast);
+}
+.chk:checked {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-color: transparent;
+}
+.chk:checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  background: white;
+  border-radius: 2px;
+}
+/* ===== 切换开关 ===== */
+.toggle-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 1.5rem;
+}
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle .track {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-full);
+  transition: var(--transition-fast);
+}
+.toggle .track::before {
+  content: '';
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
+  left: 0.25rem;
+  bottom: 0.25rem;
+  background: white;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+}
+.toggle input:checked + .track {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-color: transparent;
+}
+.toggle input:checked + .track::before {
+  transform: translateX(1.5rem);
+}
+/* ===== 标签与徽章 ===== */
+.tag {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-full);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.tag.ok {
+  background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
+  color: var(--text-success);
+  border: 1px solid rgba(67, 233, 123, 0.3);
+}
+.tag.err {
+  background: linear-gradient(135deg, rgba(255, 8, 68, 0.2) 0%, rgba(255, 177, 153, 0.2) 100%);
+  color: var(--text-danger);
+  border: 1px solid rgba(255, 8, 68, 0.3);
+}
+/* ===== 团队卡片 ===== */
+.team-card {
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  transition: var(--transition-fast);
+}
+.team-card:hover {
+  border-color: var(--border-hover);
+  background: rgba(255, 255, 255, 0.03);
+}
+.team-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.team-lbl {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-full);
+}
+/* ===== 工具条 ===== */
+.toolbar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+.toolbar-spacer {
+  flex: 1;
+}
+/* ===== 表格样式 ===== */
+.tbl-wrap {
+  overflow-x: auto;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+thead {
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+td {
+  padding: 1rem;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+tbody tr {
+  transition: var(--transition-fast);
+}
+tbody tr:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+tbody tr:last-child td {
+  border-bottom: none;
+}
+td.empty {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-muted);
+}
+/* ===== 终端日志 ===== */
+.terminal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.log {
+  margin-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 3px solid transparent;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.log.ok {
+  border-left-color: #43e97b;
+  color: var(--text-success);
+}
+.log.err {
+  border-left-color: #ff0844;
+  color: var(--text-danger);
+}
+.log.wrn {
+  border-left-color: #fee140;
+  color: var(--text-warning);
+}
+.log.inf {
+  border-left-color: #667eea;
+  color: var(--text-primary);
+}
+.log.hi {
+  border-left-color: #f093fb;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+/* ===== 页面布局 ===== */
+.page {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+/* ===== 头部样式 ===== */
+.header {
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.header-brand h1 {
+  margin-bottom: 0;
+  font-size: 1.5rem;
+}
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-full);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: var(--transition-fast);
+}
+.status-pill.running {
+  background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%);
+  border-color: rgba(67, 233, 123, 0.3);
+  color: var(--text-success);
+}
+.status-pill .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-success);
+  animation: pulse 2s infinite;
+}
+.status-pill.running .dot {
+  background: var(--text-success);
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+/* ===== 吐司通知 ===== */
+.toast-wrap {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.toast {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: var(--shadow-lg);
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 320px;
+  transition: var(--transition-fast);
+}
+.toast.out {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.toast.ok {
+  border-left: 4px solid #43e97b;
+}
+.toast.err {
+  border-left: 4px solid #ff0844;
+}
+.toast-ico {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+/* ===== 响应式设计 ===== */
+@media (max-width: 1024px) {
+  .page {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+  .sidebar {
+    order: 2;
+  }
+  .main {
+    order: 1;
+  }
+}
+@media (max-width: 768px) {
+  .header {
+    padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .toolbar-spacer {
+    display: none;
+  }
+  .toast-wrap {
+    left: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+  }
+  .toast {
+    max-width: none;
+  }
+}
+/* ===== 加载动画 ===== */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+.loading {
+  background: linear-gradient(90deg,
+    var(--bg-input) 25%,
+    var(--bg-card) 50%,
+    var(--bg-input) 75%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite linear;
+}
+/* ===== 粒子背景 ===== */
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+}
+.bg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    radial-gradient(circle at 15% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 85% 30%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 50% 80%, rgba(240, 147, 251, 0.06) 0%, transparent 50%);
+  animation: float 20s ease-in-out infinite;
 }
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+  33% {
+    transform: translate(20px, -10px);
+  }
+  66% {
+    transform: translate(-15px, 15px);
+  }
 }