diff --git a/app/templates/auth.html b/app/templates/auth.html
index abfcc1e..fab9768 100644
--- a/app/templates/auth.html
+++ b/app/templates/auth.html
@@ -5,13 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>验证页面</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         body {
             font-family: 'Roboto', sans-serif;
             line-height: 1.6;
             margin: 0;
             padding: 0;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             display: flex;
             justify-content: center;
@@ -20,66 +21,147 @@
         .container {
             max-width: 400px;
             width: 90%;
-            background: white;
+            background: rgba(255, 255, 255, 0.95);
             padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .container:hover {
             transform: translateY(-5px);
-            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
+        }
+        .logo {
+            text-align: center;
+            margin-bottom: 30px;
+            animation: fadeIn 1s ease;
+        }
+        .logo i {
+            font-size: 48px;
+            color: #764ba2;
+            margin-bottom: 15px;
         }
         h2 {
             color: #2c3e50;
             text-align: center;
             margin-bottom: 30px;
             font-weight: 700;
+            font-size: 24px;
+            animation: slideDown 0.5s ease;
         }
         form {
             display: flex;
             flex-direction: column;
+            gap: 20px;
+        }
+        .input-group {
+            position: relative;
+            animation: slideUp 0.5s ease;
+        }
+        .input-group i {
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #764ba2;
+            font-size: 18px;
         }
         input {
-            margin: 10px 0;
-            padding: 12px;
-            border: 1px solid #e0e0e0;
-            border-radius: 5px;
+            width: 100%;
+            padding: 12px 12px 12px 40px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
             font-size: 16px;
+            box-sizing: border-box;
             transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.9);
         }
         input:focus {
-            border-color: #3498db;
-            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+            border-color: #764ba2;
+            box-shadow: 0 0 10px rgba(118, 75, 162, 0.2);
+            outline: none;
         }
         button {
-            background-color: #3498db;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             border: none;
-            padding: 12px;
-            border-radius: 5px;
+            padding: 14px;
+            border-radius: 10px;
             cursor: pointer;
             font-size: 16px;
             font-weight: bold;
-            transition: background-color 0.3s ease;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
         button:hover {
-            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        button::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        button:active::after {
+            width: 200px;
+            height: 200px;
+            opacity: 0;
         }
         .error-message {
             color: #e74c3c;
             margin-top: 15px;
             text-align: center;
             font-weight: bold;
+            padding: 10px;
+            border-radius: 5px;
+            background: rgba(231, 76, 60, 0.1);
+            animation: shake 0.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideDown {
+            from { transform: translateY(-20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h2>请输入验证令牌</h2>
+        <div class="logo">
+            <i class="fas fa-shield-alt"></i>
+        </div>
+        <h2>安全验证</h2>
         <form id="auth-form" action="/auth" method="post">
-            <input type="password" id="auth-token" name="auth_token" required placeholder="输入验证令牌">
-            <button type="submit">提交</button>
+            <div class="input-group">
+                <i class="fas fa-key"></i>
+                <input type="password" id="auth-token" name="auth_token" required placeholder="请输入验证令牌">
+            </div>
+            <button type="submit">
+                验证访问
+            </button>
         </form>
         {% if error %}
         <p class="error-message">{{ error }}</p>
diff --git a/app/templates/keys_status.html b/app/templates/keys_status.html
index 2ec0438..01bcd73 100644
--- a/app/templates/keys_status.html
+++ b/app/templates/keys_status.html
@@ -5,107 +5,189 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>API密钥状态</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         body {
             font-family: 'Roboto', sans-serif;
             line-height: 1.6;
             margin: 0;
             padding: 0;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
+            padding: 20px;
         }
         .container {
             max-width: 900px;
-            width: 90%;
-            background: white;
+            width: 95%;
+            background: rgba(255, 255, 255, 0.95);
             padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
-        }
-        .container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
         }
         h1 {
             color: #2c3e50;
             text-align: center;
             margin-bottom: 30px;
             font-weight: 700;
+            font-size: 32px;
+            position: relative;
+            padding-bottom: 15px;
+        }
+        h1::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 4px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 2px;
         }
         .key-list {
             margin-bottom: 30px;
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 10px;
+            background: rgba(248, 249, 250, 0.9);
+            padding: 25px;
+            border-radius: 15px;
             transition: all 0.3s ease;
+            border: 1px solid rgba(0,0,0,0.1);
         }
         .key-list:hover {
-            background: #e9ecef;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
         }
         .key-list h2 {
             color: #2c3e50;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             font-size: 1.5em;
+            padding-bottom: 10px;
+            border-bottom: 2px solid rgba(0,0,0,0.1);
         }
         ul {
             list-style-type: none;
             padding: 0;
+            margin: 0;
         }
         li {
             background: white;
-            border: 1px solid #e0e0e0;
-            margin-bottom: 10px;
-            padding: 12px;
-            border-radius: 5px;
-            transition: all 0.2s ease;
+            border: 1px solid rgba(0,0,0,0.1);
+            margin-bottom: 12px;
+            padding: 15px;
+            border-radius: 10px;
+            transition: all 0.3s ease;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
         }
         li:hover {
             transform: translateX(5px);
-            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
-        .total {
-            font-weight: bold;
-            margin-top: 20px;
-            text-align: center;
-            font-size: 1.2em;
+        .key-info {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex: 1;
+        }
+        .key-text {
+            font-family: 'Roboto Mono', monospace;
             color: #2c3e50;
         }
+        .fail-count {
+            background: rgba(231, 76, 60, 0.1);
+            color: #e74c3c;
+            padding: 4px 10px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .fail-count i {
+            font-size: 12px;
+        }
         .copy-btn {
-            background-color: #3498db;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             border: none;
             padding: 8px 15px;
-            border-radius: 5px;
+            border-radius: 8px;
             cursor: pointer;
             font-size: 14px;
             font-weight: bold;
-            transition: background-color 0.3s ease;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
         .copy-btn:hover {
-            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
+        }
+        .copy-btn:active {
+            transform: translateY(0);
+        }
+        .copy-btn i {
+            font-size: 14px;
+        }
+        .total {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            text-align: center;
+            font-size: 1.2em;
+            margin-top: 30px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
         #copyStatus {
-            text-align: center;
-            margin-top: 20px;
-            color: #27ae60;
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(39, 174, 96, 0.9);
+            color: white;
+            padding: 12px 25px;
+            border-radius: 25px;
             font-weight: bold;
             opacity: 0;
             transition: opacity 0.3s ease;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
-        .fail-count {
-            color: #e74c3c;
+        .status-badge {
+            padding: 4px 12px;
+            border-radius: 15px;
             font-size: 0.9em;
-            margin-left: 10px;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .status-valid {
+            background: rgba(39, 174, 96, 0.1);
+            color: #27ae60;
+        }
+        .status-invalid {
+            background: rgba(231, 76, 60, 0.1);
+            color: #e74c3c;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .key-list {
+            animation: fadeIn 0.5s ease forwards;
+        }
+        .key-list:nth-child(2) {
+            animation-delay: 0.2s;
         }
     </style>
 </head>
@@ -114,36 +196,70 @@
         <h1>API密钥状态</h1>
         <div class="key-list">
             <h2>
-                有效密钥
-                <button class="copy-btn" onclick="copyKeys('valid')">一键复制</button>
+                <span>
+                    <i class="fas fa-check-circle" style="color: #27ae60;"></i>
+                    有效密钥
+                </span>
+                <button class="copy-btn" onclick="copyKeys('valid')">
+                    <i class="fas fa-copy"></i>
+                    批量复制
+                </button>
             </h2>
             <ul id="validKeys">
                 {% for key, fail_count in valid_keys.items() %}
                     <li>
-                        <span>{{ key }}</span>
-                        <span class="fail-count">(失败次数: {{ fail_count }})</span>
-                        <button class="copy-btn" onclick="copyKey('{{ key }}')">复制</button>
+                        <div class="key-info">
+                            <span class="status-badge status-valid">
+                                <i class="fas fa-check"></i> 有效
+                            </span>
+                            <span class="key-text">{{ key }}</span>
+                            <span class="fail-count">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                失败: {{ fail_count }}
+                            </span>
+                        </div>
+                        <button class="copy-btn" onclick="copyKey('{{ key }}')">
+                            <i class="fas fa-copy"></i>
+                            复制
+                        </button>
                     </li>
                 {% endfor %}
             </ul>
         </div>
         <div class="key-list">
             <h2>
-                无效密钥
-                <button class="copy-btn" onclick="copyKeys('invalid')">一键复制</button>
+                <span>
+                    <i class="fas fa-times-circle" style="color: #e74c3c;"></i>
+                    无效密钥
+                </span>
+                <button class="copy-btn" onclick="copyKeys('invalid')">
+                    <i class="fas fa-copy"></i>
+                    批量复制
+                </button>
             </h2>
             <ul id="invalidKeys">
                 {% for key, fail_count in invalid_keys.items() %}
                     <li>
-                        <span>{{ key }}</span>
-                        <span class="fail-count">(失败次数: {{ fail_count }})</span>
-                        <button class="copy-btn" onclick="copyKey('{{ key }}')">复制</button>
+                        <div class="key-info">
+                            <span class="status-badge status-invalid">
+                                <i class="fas fa-times"></i> 无效
+                            </span>
+                            <span class="key-text">{{ key }}</span>
+                            <span class="fail-count">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                失败: {{ fail_count }}
+                            </span>
+                        </div>
+                        <button class="copy-btn" onclick="copyKey('{{ key }}')">
+                            <i class="fas fa-copy"></i>
+                            复制
+                        </button>
                     </li>
                 {% endfor %}
             </ul>
         </div>
         <div class="total">
-            总密钥数：{{ total }}
+            <i class="fas fa-key"></i> 总密钥数：{{ total }}
         </div>
         <div id="copyStatus"></div>
     </div>
@@ -177,12 +293,12 @@
         }
 
         function copyKeys(type) {
-            const keys = Array.from(document.querySelectorAll(`#${type}Keys li span:first-child`)).map(span => span.textContent.trim());
+            const keys = Array.from(document.querySelectorAll(`#${type}Keys .key-text`)).map(span => span.textContent.trim());
             const jsonKeys = JSON.stringify(keys);
             
             copyToClipboard(jsonKeys)
                 .then(() => {
-                    showCopyStatus(`已成功复制 ${type === 'valid' ? '有效' : '无效'} 密钥到剪贴板`);
+                    showCopyStatus(`已成功复制${type === 'valid' ? '有效' : '无效'}密钥到剪贴板`);
                 })
                 .catch((err) => {
                     console.error('无法复制文本: ', err);