html, body { margin: 0; padding: 0; min-height: 100vh; background: #f5f7fa; }
body { display: flex; align-items: flex-start; justify-content: center; padding: 0 20px; font-family: Arial, sans-serif; }
.login-container { width: 100%; max-width: 400px; margin: calc(100vh / 5) auto 20px; padding: 2rem; background: #ffffff; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; }
.login-header { text-align: center; margin-bottom: 2rem; }
.logo { width: 80px; height: 80px; margin: 0 auto 1rem; background: #2c3e50; border-radius: 50%; }
.login-form .form-group { margin-bottom: 1.5rem; }
.login-form input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s; box-sizing: border-box; }
.login-form input:focus { border-color: #3498db; outline: none; }
.login-form button { width: 100%; padding: 12px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; }
.login-form button:hover { background: #2980b9; }
.error-message { color: #e74c3c; margin-top: 1rem; text-align: center; display: none; }
.captcha-group { display: flex; gap: 10px; }
.captcha-group input { flex: 1; }
.captcha-group img { height: 42px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
@media (max-height: 600px) { .login-container { margin: 20px auto; } }
@media (max-width: 480px) {
    body { padding: 0 10px; }
    .login-container { padding: 1.5rem; margin: 10vh auto 20px; }
    .login-form input, .login-form button { padding: 10px; }
    .captcha-group { flex-direction: column; }
    .captcha-group img { width: 100%; height: auto; margin-top: 5px; }
}