.login-container {
        max-width: 500px;
        margin: 0 auto;
        padding: 2rem 1rem 4rem;
    }
    
    .login-card {
        background: white;
        padding: 2rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
    }
    
    .login-title {
        font-size: 1.5rem;
        color: var(--dark-bg);
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .login-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .login-form .form-control {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
    
    /* Autofill detection via CSS animation */
    @keyframes onAutoFillStart {
        from {/**/}
        to {/**/}
    }
    
    input:-webkit-autofill {
        animation-duration: 50000s;
        animation-name: onAutoFillStart;
    }
    
    .login-submit {
        width: 100%;
        padding: 0.875rem;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: var(--border-radius);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }
    
    .login-submit:hover {
        background: var(--primary-dark);
    }
    
    .login-info {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #eee;
        color: #666;
        font-size: 0.95rem;
    }
    
    .login-info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        color: var(--dark-bg);
    }
    
    .login-info ul {
        list-style-type: disc;
        margin-left: 1.5rem;
    }
    
    .login-info li {
        margin-bottom: 0.5rem;
    }
    
    .flash-error {
        background-color: #f8d7da;
        color: #721c24;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: var(--border-radius);
        border: 1px solid #f5c6cb;
    }
    
    .recaptcha-terms {
        font-size: 0.8rem;
        color: #888;
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .recaptcha-terms a {
        color: #666;
        text-decoration: underline;
    }
    
    /* Spinner and button loading styles */
    .login-submit.loading {
        position: relative;
        color: transparent;
        pointer-events: none;
        background: var(--primary-dark);
    }
    
    .spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 0.8s linear infinite;
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* Flash messages container */
    .flash-messages {
        margin-bottom: 1.5rem;
    }