feat: Improve UI/UX for API Key Status page and add enhancements

- Updated the overall design aesthetics of the authentication page.
  - Added `fadeIn`, `slideDown`, `slideUp`, and `shake` animations for better user interaction.
  - Improved error message styling with a subtle background, padding, and animation.

- Enhanced "API Key Status" page:
  - Implemented new theme with gradient backgrounds and glassmorphism effect.
  - Redesigned headings with underlines and improved hierarchy.
  - Added FontAwesome icons to improve the visual appeal and clarity (e.g., checkmarks, warnings, keys).
  - Applied better spacing, padding, and hover effects to list items and buttons.
  - Introduced animations for key lists to create fluid transitions on page load.
  - Differentiated valid and invalid keys using badges with appropriate colors and icons.

- Copy Key Interaction:
  - Improved key copying functionality:
    - Added animations and hover effects to "Copy" buttons.
    - Updated the copied key selector logic to target `.key-text` for cleaner code.
    - Changed copy confirmation message for better clarity.
  - Styled the copy success message (`#copyStatus`) to appear fixed at the bottom with a blur effect.

- Key List Enhancements:
  - Added fail count badges for individual keys with red warning styles.
  - Styled buttons for batch copying to display icons alongside text, matching the overall design.

- Accessibility and Readability:
  - Refactored text sizes, weights, and alignments for smoother readability.
  - Enhanced color contrast and alignment for better accessibility.

Notes:
- New CSS animations have been smoothly integrated with no breaking changes.
- All changes prioritize maintaining current functionality while enhancing user experience.

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>