/* Global Container Styles */
    .auth-container {
        min-height: 100vh;
        background: #fefefe;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    /* Auth Card Styles */
    .auth-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-width: 450px;
        width: 100%;
    }

    /* Card Header Styles */
    .auth-header {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        padding: 2rem;
        text-align: center;
    }

    /* Card Body Styles */
    .auth-body {
        padding: 2rem;
    }

    /* Form Floating Styles (Overridden with 1.5rem for specific screens/forms) */
    .form-floating {
        /* Common style from most files, used for login/register/reset */
        margin-bottom: 1rem;
    }
    /* Note: If a specific form requires the 1.5rem margin-bottom found in one of the styles, 
       a more specific class should be used to override this, or the global style should be set to 1.5rem. 
       For consolidation, the most frequent value (1rem) is kept here, but developers should note the variation.
       If the 1.5rem is critical for some layout, it needs a specific selector. 
       For example, using: .form-floating-lg { margin-bottom: 1.5rem; }
    */

    /* Gradient Button Styles */
    .btn-gradient {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        color: white;
        padding: 12px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    }

    /* Success Button Styles (Used for OTP verification/confirmation) */
    .btn-success {
        background: linear-gradient(135deg, #28a745, #20c997);
        border: none;
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    }

    /* Link Sections */
    .login-link {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #dee2e6;
    }

    .register-link {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #dee2e6;
    }

    .resend-section {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #dee2e6;
    }

    .back-to-login {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Password Strength Indicator */
    .password-strength {
        height: 4px;
        /* Consolidated vertical margin from 0.25rem and 5px to the more explicit 5px */
        margin-top: 5px; 
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .strength-weak { background-color: #dc3545; width: 25%; }
    .strength-fair { background-color: #fd7e14; width: 50%; }
    .strength-good { background-color: #ffc107; width: 75%; }
    .strength-strong { background-color: #198754; width: 100%; }

    /* Password Requirements List */
    .password-requirements {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }

    .requirement {
        margin-bottom: 0.25rem;
    }

    .requirement.met {
        color: #198754;
    }

    .requirement.unmet {
        color: #6c757d;
    }

    .requirement i {
        width: 16px;
    }

    /* OTP/Code Input Styles */
    .code-input {
        font-size: 1.2rem;
        font-weight: 600;
        text-align: center;
        letter-spacing: 0.5em;
        padding-left: 0.5em;
    }

    /* Instruction Text Styles */
    .instruction-text {
        color: #6c757d;
        font-size: 0.9rem;
        text-align: center;
        /* Consolidated margin-bottom: 1rem from OTP screen, and 1.5rem from Forgot Password screen. 
           Using 1.5rem as the larger value for better separation, but note the variation. */
        margin-bottom: 1.5rem;
    }

    /* User Email Display */
    .user-email {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        text-align: center;
        border: 1px solid #e9ecef;
    }

    .user-email i {
        color: #007bff;
        margin-right: 0.5rem;
    }

    /* Login/Forgot Password Specific Styles */
    .forgot-password {
        text-align: right;
        margin-bottom: 1rem;
    }

    .social-login {
        margin: 1.5rem 0;
    }

    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }

    .divider-text {
        padding: 0 1rem;
        color: #6c757d;
        font-size: 0.9rem;
    }