/* 1. Left Side Image Styling */
    .bg-auth-image {
        /* Replace this URL with your actual student/teaching image */
        background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=2070&auto=format&fit=crop'); 
        background-size: cover;
        background-position: center;
    }

    .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(32, 85, 235, 0.85) 0%, rgba(13, 110, 253, 0.7) 100%);
        z-index: 1;
    }

    .z-index-2 { z-index: 2; }

    /* 2. Abstract Shapes */
    .shape-circle-1 {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        z-index: 1;
    }
    .shape-circle-2 {
        position: absolute;
        bottom: 50px;
        left: -50px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        z-index: 1;
    }

    /* 3. Form Inputs Styling */
    .form-floating > .form-control {
        padding-left: 3rem; /* Space for icon */
        border: 2px solid #f0f2f5;
        border-radius: 12px;
        background-color: #fcfcfc;
        height: calc(3.5rem + 2px);
        line-height: 1.25;
    }

    .form-floating > label {
        padding-left: 3rem; /* Align label with text */
        color: #9aa0ac;
    }

    .form-floating > .form-control:focus {
        border-color: #3b82f6; /* Modern Blue */
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

    .input-icon {
        position: absolute;
        top: 22px;
        left: 15px;
        color: #9aa0ac;
        font-size: 18px;
        z-index: 4;
    }

    /* 4. Button Styling */
    .btn-primary {
        background: #2563eb;
        border: none;
        transition: all 0.3s ease;
    }

    .btn-hover-effect:hover {
        transform: translateY(-2px);
        background: #1d4ed8;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2) !important;
    }

    /* 5. Misc */
    .backdrop-blur {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .toggle-password{
        right: 22px !important;
        top: 29px !important;
    }

    .form-check .error {
    display: block;
    margin-top: 5px;
    margin-left: -1.5em; /* Aligns with the checkbox start, not the label text */
}