:root {

            --primary: #793A85;

            --primary-dark: #5e2d68;

            --secondary: #FFC107;

            --dark: #1a1a2e;

            --gray: #6c757d;

        }


        * {
            box-sizing: border-box;
        }


        body {

            margin: 0;

            font-family: 'Inter', sans-serif;

            min-height: 100vh;

            background:
                linear-gradient(
                    135deg,
                    #f8f3fa,
                    #eef2ff
                );

            color: var(--dark);

        }


        .login-wrapper {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 30px 15px;

        }


        .login-card {

            width: 100%;

            max-width: 950px;

            background: #fff;

            border-radius: 24px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,.12);

        }


        /* =====================================================
           LEFT PANEL
           ===================================================== */

        .login-left {

            min-height: 600px;

            padding: 50px 40px;

            background:
                linear-gradient(
                    135deg,
                    #793A85,
                    #5e2d68
                );

            color: #fff;

            display: flex;

            flex-direction: column;

            justify-content: center;

            position: relative;

            overflow: hidden;

        }


        .login-left::before {

            content: "";

            position: absolute;

            width: 280px;

            height: 280px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.07);

            top: -100px;

            right: -100px;

        }


        .login-left::after {

            content: "";

            position: absolute;

            width: 220px;

            height: 220px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.05);

            bottom: -100px;

            left: -80px;

        }


        .login-content {

            position: relative;

            z-index: 2;

        }


        .login-logo {

            max-width: 190px;

            background: #fff;

            padding: 8px 12px;

            border-radius: 10px;

            margin-bottom: 30px;

        }


        .login-left h1 {

            font-size: 35px;

            font-weight: 800;

            margin-bottom: 15px;

        }


        .login-left p {

            color:
                rgba(255,255,255,.8);

            font-size: 14px;

            line-height: 1.8;

            max-width: 370px;

        }


        .feature {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-top: 18px;

            font-size: 13px;

        }


        .feature-icon {

            width: 38px;

            height: 38px;

            min-width: 38px;

            border-radius: 10px;

            background:
                rgba(255,255,255,.15);

            display: flex;

            align-items: center;

            justify-content: center;

        }


        /* =====================================================
           RIGHT PANEL
           ===================================================== */

        .login-right {

            padding: 55px 45px;

        }


        .login-title {

            font-size: 29px;

            font-weight: 800;

            margin-bottom: 5px;

        }


        .login-subtitle {

            color: var(--gray);

            font-size: 13px;

            margin-bottom: 28px;

        }


        .form-label {

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 7px;

        }


        .input-group-text {

            background: #f7f4f8;

            border-color: #e5e5e5;

            color: var(--primary);

        }


        .form-control {

            min-height: 48px;

            border-color: #e5e5e5;

            font-size: 13px;

        }


        .form-control:focus {

            border-color: var(--primary);

            box-shadow:
                0 0 0 3px
                rgba(121,58,133,.10);

        }


        .password-wrapper {

            position: relative;

        }


        .password-wrapper .form-control {

            padding-right: 45px;

        }


        .password-toggle {

            position: absolute;

            right: 12px;

            top: 50%;

            transform: translateY(-50%);

            border: 0;

            background: transparent;

            color: #888;

            cursor: pointer;

            z-index: 5;

        }


        .login-btn {

            width: 100%;

            min-height: 50px;

            border: 0;

            border-radius: 10px;

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--primary-dark)
                );

            color: #fff;

            font-weight: 700;

            font-size: 14px;

            transition: .2s;

        }


        .login-btn:hover {

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px
                rgba(121,58,133,.25);

        }


        .register-text {

            text-align: center;

            color: #777;

            font-size: 13px;

            margin-top: 22px;

        }


        .register-text a {

            color: var(--primary);

            font-weight: 700;

        }


        .alert {

            border-radius: 10px;

            font-size: 13px;

        }


        .back-home {

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 7px;

            margin-top: 20px;

            color: #888;

            font-size: 12px;

        }


        .back-home:hover {

            color: var(--primary);

        }



        /* =====================================================
           CAPTCHA + FORGOT PASSWORD
        ===================================================== */

        .captcha-row {
            display:flex;
            align-items:center;
            gap:10px;
            width:100%;
        }

        .captcha-question {
            flex:1;
            min-height:50px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            padding:10px 14px;
            border:1px dashed #793A85;
            border-radius:10px;
            background:#faf7fb;
            color:#793A85;
            font-size:18px;
            font-weight:800;
            letter-spacing:1px;
            user-select:none;
        }

        .captcha-question i {
            font-size:14px;
        }

        .captcha-refresh {
            width:50px;
            height:50px;
            flex:0 0 50px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:10px;
            background:#793A85;
            color:#fff !important;
            text-decoration:none !important;
            transition:.2s;
        }

        .captcha-refresh:hover {
            background:#5e2d68;
            color:#fff !important;
            transform:rotate(-12deg);
        }

        .forgot-password-row {
            display:flex;
            justify-content:flex-end;
            margin-top:-12px;
            margin-bottom:20px;
        }

        .forgot-password-link {
            color:#793A85 !important;
            font-size:13px;
            font-weight:700;
            text-decoration:none !important;
        }

        .forgot-password-link:hover {
            color:#5e2d68 !important;
            text-decoration:underline !important;
        }

        @media(max-width: 767px) {

            .login-left {

                display: none;

            }

            .login-right {

                padding: 35px 22px;

            }

            .login-card {

                border-radius: 18px;

            }

            .login-title {

                font-size: 25px;

            }

        }