
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; }
        .auth-container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); padding: 40px; width: 100%; max-width: 450px; text-align: center; }
        .logo { margin-bottom: 10px; }
        .subtitle { color: #666; margin-bottom: 30px; font-size: 1.1rem; }
        .form-group { margin-bottom: 20px; text-align: left; }
        label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
        input { width: 100%; padding: 15px; border: 2px solid #e1e5e9; border-radius: 10px; font-size: 16px; }
        .btn-primary { width: 100%; padding: 15px; background: #53AB81; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-link, .forgot-password { margin-top: 20px; font-size: 14px; }
        .auth-link a, .forgot-password a { color: #53AB81; text-decoration: none; }
        .auth-link a:hover, .forgot-password a:hover { text-decoration: underline; }
        .error-message, .success-message { padding: 12px; border-radius: 8px; margin-bottom: 20px; display: none; }
        .error-message { background: #f8d7da; color: #721c24; }
        .success-message { background: #d4edda; color: #155724; }
        .loading { display: none; text-align: center; margin: 20px 0; }
  