* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Cairo', sans-serif;

            min-height: 100vh;

            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(13, 110, 253, 0.18),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(0, 180, 216, 0.15),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #061a33 0%,
                    #0b315c 45%,
                    #0d6efd 100%
                );

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 30px;
        }


        /* =========================================
           CONTAINER PRINCIPAL
        ========================================= */

        .auth-container {

            width: 100%;
            max-width: 1050px;

            min-height: 650px;

            background: rgba(255,255,255,0.96);

            border-radius: 28px;

            overflow: hidden;

            box-shadow:
                0 30px 80px rgba(0,0,0,0.30);

            display: flex;

            position: relative;
        }


        /* =========================================
           PARTIE GAUCHE
        ========================================= */

        .auth-info {

            width: 45%;

            background:
                linear-gradient(
                    145deg,
                    #06264a,
                    #0b4c83,
                    #0d6efd
                );

            color: white;

            padding: 55px 45px;

            display: flex;
            flex-direction: column;
            justify-content: center;

            position: relative;

            overflow: hidden;
        }


        .auth-info::before {

            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            border-radius: 50%;

            background: rgba(255,255,255,0.08);

            top: -100px;
            right: -100px;
        }


        .auth-info::after {

            content: "";

            position: absolute;

            width: 250px;
            height: 250px;

            border-radius: 50%;

            background: rgba(255,255,255,0.06);

            bottom: -100px;
            left: -80px;
        }


        .logo-univ {

            width: 115px;
            height: 115px;

            background: white;

            border-radius: 50%;

            padding: 12px;

            object-fit: contain;

            margin-bottom: 25px;

            box-shadow:
                0 10px 30px rgba(0,0,0,0.2);
        }


        .auth-info h1 {

            font-size: 32px;

            font-weight: 800;

            line-height: 1.5;

            margin-bottom: 15px;
        }


        .auth-info h1 span {

            color: #8bd3ff;
        }


        .auth-info p {

            font-size: 16px;

            line-height: 2;

            opacity: 0.92;

            margin-bottom: 30px;
        }


        .info-item {

            display: flex;

            align-items: center;

            gap: 14px;

            margin-bottom: 16px;

            font-size: 15px;
        }


        .info-icon {

            width: 40px;
            height: 40px;

            border-radius: 12px;

            background: rgba(255,255,255,0.14);

            display: flex;

            align-items: center;
            justify-content: center;

            color: #8bd3ff;

            font-size: 18px;
        }


        /* =========================================
           PARTIE DROITE
        ========================================= */

        .auth-form {

            width: 55%;

            padding: 50px;

            display: flex;

            flex-direction: column;

            justify-content: center;
        }


        .auth-title {

            text-align: center;

            margin-bottom: 30px;
        }


        .auth-title h2 {

            color: #073763;

            font-weight: 800;

            font-size: 28px;

            margin-bottom: 8px;
        }


        .auth-title p {

            color: #777;

            margin: 0;

            font-size: 14px;
        }


        /* =========================================
           TABS
        ========================================= */

        .auth-tabs {

            display: flex;

            background: #f1f5f9;

            border-radius: 14px;

            padding: 5px;

            margin-bottom: 28px;
        }


        .auth-tab {

            width: 50%;

            border: none;

            background: transparent;

            padding: 12px;

            border-radius: 10px;

            font-family: inherit;

            font-weight: 700;

            color: #64748b;

            transition: all .3s;

            cursor: pointer;
        }


        .auth-tab.active {

            background: white;

            color: #0d6efd;

            box-shadow:
                0 4px 12px rgba(0,0,0,0.08);
        }


        /* =========================================
           FORM
        ========================================= */

        .form-group {

            margin-bottom: 20px;
        }


        .form-label {

            font-weight: 700;

            color: #334155;

            margin-bottom: 8px;
        }


        .input-group-modern {

            position: relative;
        }


        .input-icon {

            position: absolute;

            right: 15px;

            top: 50%;

            transform: translateY(-50%);

            color: #0d6efd;

            z-index: 5;
        }


        .form-control-modern {

            width: 100%;

            height: 52px;

            border: 1px solid #dbe3ec;

            border-radius: 12px;

            padding:
                10px
                45px
                10px
                15px;

            font-family: inherit;

            font-size: 14px;

            transition: all .3s;

            outline: none;
        }


        .form-control-modern:focus {

            border-color: #0d6efd;

            box-shadow:
                0 0 0 4px rgba(13,110,253,.10);
        }


        /* =========================================
           BUTTON
        ========================================= */

        .btn-login {

            width: 100%;

            height: 54px;

            border: none;

            border-radius: 13px;

            background:
                linear-gradient(
                    135deg,
                    #0d6efd,
                    #0753b8
                );

            color: white;

            font-family: inherit;

            font-weight: 800;

            font-size: 16px;

            cursor: pointer;

            transition: all .3s;

            box-shadow:
                0 8px 20px rgba(13,110,253,.25);
        }


        .btn-login:hover {

            transform: translateY(-2px);

            box-shadow:
                0 12px 28px rgba(13,110,253,.35);
        }


        .btn-register {

            background:
                linear-gradient(
                    135deg,
                    #198754,
                    #126c42
                );

            box-shadow:
                0 8px 20px rgba(25,135,84,.22);
        }


        .btn-register:hover {

            box-shadow:
                0 12px 28px rgba(25,135,84,.32);
        }


        /* =========================================
           PASSWORD
        ========================================= */

        .password-toggle {

            position: absolute;

            left: 15px;

            top: 50%;

            transform: translateY(-50%);

            border: none;

            background: transparent;

            color: #64748b;

            cursor: pointer;

            z-index: 5;
        }


        /* =========================================
           LINKS
        ========================================= */

        .auth-links {

            display: flex;

            justify-content: space-between;

            margin-top: 15px;

            font-size: 13px;
        }


        .auth-links a {

            text-decoration: none;

            color: #0d6efd;

            font-weight: 600;
        }


        .auth-links a:hover {

            text-decoration: underline;
        }


        /* =========================================
           ALERT
        ========================================= */

        .alert-modern {

            border-radius: 12px;

            border: none;

            font-size: 13px;

            margin-bottom: 20px;
        }


        /* =========================================
           FOOTER
        ========================================= */

        .auth-footer {

            text-align: center;

            margin-top: 25px;

            color: #94a3b8;

            font-size: 12px;
        }


        /* =========================================
           REGISTER
        ========================================= */

        #registerForm {

            display: block;
        }

        /* =========================================
            PASSWORD RULES
            ========================================= */

            .password-rules {
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 14px;
                padding: 16px 18px;
                margin-top: 10px;
                direction: rtl;
                text-align: right;
            }

            .password-rules-title {
                color: #1e3a5f;
                font-size: 15px;
                font-weight: 700;
                margin-bottom: 12px;
            }

            .password-rules-title i {
                color: #c9a227;
                margin-left: 6px;
            }

            .password-rules-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .password-rules-list li {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                color: #64748b;
                font-size: 13px;
                line-height: 1.8;
                margin-bottom: 5px;

                transition: all 0.25s ease;
            }

            .password-rules-list li:last-child {
                margin-bottom: 0;
            }

            .password-rules-list li i {
                font-size: 12px;
                margin-top: 6px;
                color: #94a3b8;

                transition: all 0.25s ease;
            }


            /* =========================================
            REGLE RESPECTEE
            ========================================= */

            .password-rules-list li.valid {
                color: #198754;
            }

            .password-rules-list li.valid i {
                color: #198754;
            }


            /* =========================================
            REGLE NON RESPECTEE
            ========================================= */

            .password-rules-list li:not(.valid) {
                color: #64748b;
            }

            .password-rules-list li:not(.valid) i {
                color: #dc3545;
            }


            /* =========================================
            RESPONSIVE
            ========================================= */

            @media (max-width: 576px) {

                .password-rules {
                    padding: 13px 14px;
                }

                .password-rules-list li {
                    font-size: 12px;
                }
            } 

        /* =========================================
           RESPONSIVE
        ========================================= */

        @media (max-width: 850px) {

            .auth-container {

                max-width: 600px;
            }

            .auth-info {

                display: none;
            }

            .auth-form {

                width: 100%;

                padding: 40px 30px;
            }
        }


        @media (max-width: 500px) {

            body {

                padding: 15px;
            }

            .auth-form {

                padding: 30px 20px;
            }

            .auth-container {

                border-radius: 20px;
            }
        }