* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Microsoft YaHei', sans-serif;
   }

   body {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       padding: 20px;
   }

   .login-container {
       background: white;
       border-radius: 15px;
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
       width: 100%;
       max-width: 400px;
       padding: 40px 30px;
   }

   .login-header {
       text-align: center;
       margin-bottom: 30px;
   }

   .login-header h1 {
       color: #333;
       font-size: 28px;
       margin-bottom: 10px;
   }

   .login-header p {
       color: #666;
       font-size: 14px;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .form-group label {
       display: block;
       margin-bottom: 8px;
       color: #555;
       font-weight: 500;
   }

   .form-group input {
       width: 100%;
       padding: 12px 15px;
       border: 2px solid #e1e1e1;
       border-radius: 8px;
       font-size: 16px;
       transition: all 0.3s;
   }

   .form-group input:focus {
       border-color: #667eea;
       outline: none;
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
   }

   .captcha-group {
       display: flex;
       gap: 10px;
       align-items: center;
   }

   .captcha-group input {
       flex: 1;
   }

   .captcha-image {
       border: 1px solid #ddd;
       border-radius: 5px;
       cursor: pointer;
       height: 40px;
   }

   .btn {
       display: block;
       width: 100%;
       padding: 12px;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       transition: transform 0.2s;
   }

   .btn:hover {
       transform: translateY(-2px);
   }

   .message {
       padding: 12px;
       border-radius: 8px;
       margin-bottom: 20px;
       text-align: center;
   }

   .error {
       background-color: #ffeaea;
       color: #d63031;
       border: 1px solid #fab1a0;
   }

   .success {
       background-color: #e8f8ef;
       color: #00b894;
       border: 1px solid #55efc4;
   }

   .user-info {
       text-align: center;
       padding: 20px;
       background: #f8f9fa;
       border-radius: 8px;
       margin-bottom: 20px;
   }

   .user-info h3 {
       color: #333;
       margin-bottom: 10px;
   }

   .logout-btn {
       display: inline-block;
       padding: 10px 20px;
       background: #e74c3c;
       color: white;
       text-decoration: none;
       border-radius: 5px;
       margin-top: 10px;
   }

   .logout-btn:hover {
       background: #c0392b;
   }

   .test-accounts {
       margin-top: 20px;
       padding: 15px;
       background: #f8f9fa;
       border-radius: 8px;
       font-size: 12px;
       color: #666;
   }

   .test-accounts h4 {
       margin-bottom: 8px;
       color: #333;
   }