* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: #f5f7fb;
            font-family: "Inter", sans-serif;
        }

        /* =====================================================
           MAIN LOGIN WRAPPER
        ===================================================== */

        .login-wrapper {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at top left,
                    rgba(13, 110, 253, 0.10),
                    transparent 35%
                ),
                radial-gradient(
                    circle at bottom right,
                    rgba(111, 66, 193, 0.10),
                    transparent 35%
                ),
                #f5f7fb;
        }


        /* =====================================================
           BACKGROUND DECORATION
        ===================================================== */

        .bg-circle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .bg-circle-one {
            width: 350px;
            height: 350px;
            top: -180px;
            left: -150px;
            background: rgba(13, 110, 253, 0.07);
        }

        .bg-circle-two {
            width: 450px;
            height: 450px;
            bottom: -250px;
            right: -180px;
            background: rgba(111, 66, 193, 0.07);
        }


        /* =====================================================
           LOGIN CARD
        ===================================================== */

        .login-card {
            width: 100%;
            max-width: 1050px;
            min-height: 620px;

            display: flex;

            background: #ffffff;

            border-radius: 28px;

            overflow: hidden;

            box-shadow:
                0 25px 80px
                rgba(22, 34, 51, 0.14);

            position: relative;

            z-index: 2;
        }


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

        .login-brand-panel {
            width: 48%;

            padding: 55px;

            position: relative;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            color: #ffffff;

            background:
                linear-gradient(
                    145deg,
                    #0d6efd 0%,
                    #1554c7 48%,
                    #4c2c92 100%
                );

            overflow: hidden;
        }


        .brand-pattern {
            position: absolute;
            inset: 0;

            opacity: 0.08;

            background-image:
                radial-gradient(
                    #ffffff 1px,
                    transparent 1px
                );

            background-size: 22px 22px;
        }


        .brand-content {
            position: relative;
            z-index: 2;
        }


        /* =====================================================
           LOGO
        ===================================================== */

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 60px;
        }


        .brand-logo-icon {
            width: 52px;
            height: 52px;

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

            border-radius: 15px;

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

            border:
                1px solid
                rgba(255,255,255,0.25);

            backdrop-filter:
                blur(10px);

            font-size: 28px;
        }


        .brand-logo-text {
            font-size: 23px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }


        .brand-logo-subtitle {
            display: block;
            font-size: 11px;
            font-weight: 500;
            opacity: 0.75;
            margin-top: 2px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }


        /* =====================================================
           BRAND HEADING
        ===================================================== */

        .brand-heading {
            font-size: 40px;
            line-height: 1.18;
            font-weight: 800;
            margin-bottom: 20px;
            letter-spacing: -1px;
        }


        .brand-description {
            max-width: 420px;

            font-size: 15px;

            line-height: 1.8;

            color:
                rgba(255,255,255,0.80);

            margin-bottom: 35px;
        }


        /* =====================================================
           FEATURES
        ===================================================== */

        .feature-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }


        .feature-item {
            display: flex;
            align-items: center;
            gap: 12px;

            font-size: 14px;

            color:
                rgba(255,255,255,0.90);
        }


        .feature-icon {
            width: 28px;
            height: 28px;

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

            border-radius: 50%;

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

            font-size: 14px;
        }


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

        .brand-footer {
            position: relative;
            z-index: 2;

            font-size: 12px;

            color:
                rgba(255,255,255,0.60);
        }


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

        .login-form-panel {
            width: 52%;

            padding: 55px 65px;

            display: flex;

            align-items: center;

            justify-content: center;
        }


        .login-form-container {
            width: 100%;
            max-width: 420px;
        }


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

        .login-header {
            margin-bottom: 35px;
        }


        .welcome-badge {
            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 7px 12px;

            border-radius: 30px;

            background:
                rgba(13, 110, 253, 0.08);

            color:
                #0d6efd;

            font-size: 11px;

            font-weight: 700;

            margin-bottom: 16px;
        }


        .welcome-badge span {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background:
                #198754;
        }


        .login-title {
            font-size: 30px;

            font-weight: 800;

            color:
                #212529;

            margin-bottom: 10px;

            letter-spacing: -0.7px;
        }


        .login-subtitle {
            font-size: 14px;

            color:
                #74788d;

            line-height: 1.6;

            margin-bottom: 0;
        }


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

        .form-group-custom {
            margin-bottom: 22px;
        }


        .form-label-custom {
            font-size: 13px;

            font-weight: 600;

            color:
                #343a40;

            margin-bottom: 9px;

            display: block;
        }


        .input-wrapper {
            position: relative;
        }


        .input-icon {
            position: absolute;

            left: 16px;

            top: 50%;

            transform:
                translateY(-50%);

            color:
                #98a2b3;

            font-size: 19px;

            z-index: 2;
        }


        .form-control-custom {
            width: 100%;

            height: 52px;

            padding:
                0 48px;

            border:
                1px solid
                #e3e7ed;

            border-radius:
                12px;

            background:
                #fafbfc;

            color:
                #212529;

            font-size:
                14px;

            transition:
                all 0.25s ease;
        }


        .form-control-custom:focus {
            outline: none;

            border-color:
                #0d6efd;

            background:
                #ffffff;

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


        .password-toggle {
            position: absolute;

            right: 15px;

            top: 50%;

            transform:
                translateY(-50%);

            border: none;

            background: transparent;

            color:
                #98a2b3;

            cursor: pointer;

            font-size: 18px;

            padding: 4px;
        }


        .password-toggle:hover {
            color:
                #0d6efd;
        }


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

        .form-options {
            display: flex;

            justify-content:
                space-between;

            align-items: center;

            margin-bottom: 25px;
        }


        .remember-wrapper {
            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 13px;

            color:
                #74788d;

            cursor: pointer;
        }


        .remember-wrapper input {
            width: 16px;
            height: 16px;

            cursor: pointer;
        }


        .forgot-link {
            color:
                #0d6efd;

            font-size: 13px;

            font-weight: 600;

            text-decoration: none;
        }


        .forgot-link:hover {
            text-decoration: underline;
        }


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

        .login-btn {
            width: 100%;

            height: 52px;

            border: none;

            border-radius:
                12px;

            background:
                linear-gradient(
                    135deg,
                    #0d6efd,
                    #1554c7
                );

            color:
                #ffffff;

            font-size:
                14px;

            font-weight:
                700;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                8px;

            cursor:
                pointer;

            box-shadow:
                0 10px 25px
                rgba(13,110,253,0.22);

            transition:
                all 0.25s ease;
        }


        .login-btn:hover {
            transform:
                translateY(-2px);

            box-shadow:
                0 14px 30px
                rgba(13,110,253,0.30);
        }


        .login-btn:active {
            transform:
                translateY(0);
        }


        /* =====================================================
           DIVIDER
        ===================================================== */

        .login-divider {
            display: flex;

            align-items: center;

            gap: 15px;

            margin:
                28px 0;
        }


        .login-divider::before,
        .login-divider::after {
            content: "";

            flex: 1;

            height: 1px;

            background:
                #edf0f5;
        }


        .login-divider span {
            color:
                #98a2b3;

            font-size:
                12px;
        }


        /* =====================================================
           SUPPORT BOX
        ===================================================== */

        .support-box {
            padding:
                15px 18px;

            border-radius:
                12px;

            background:
                #f8f9fc;

            border:
                1px solid
                #edf0f5;

            display:
                flex;

            align-items:
                center;

            gap:
                12px;
        }


        .support-icon {
            width:
                38px;

            height:
                38px;

            flex-shrink:
                0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                10px;

            background:
                rgba(13,110,253,0.10);

            color:
                #0d6efd;

            font-size:
                19px;
        }


        .support-text strong {
            display:
                block;

            font-size:
                12px;

            color:
                #343a40;

            margin-bottom:
                3px;
        }


        .support-text span {
            font-size:
                11px;

            color:
                #74788d;
        }


        /* =====================================================
           COPYRIGHT
        ===================================================== */

        .copyright {
            text-align:
                center;

            font-size:
                11px;

            color:
                #98a2b3;

            margin-top:
                25px;
        }


        /* =====================================================
           LOADING STATE
        ===================================================== */

        .login-btn.loading {
            pointer-events:
                none;

            opacity:
                0.8;
        }


        .login-spinner {
            width:
                17px;

            height:
                17px;

            border:
                2px solid
                rgba(255,255,255,0.4);

            border-top-color:
                #ffffff;

            border-radius:
                50%;

            animation:
                spin 0.7s linear infinite;
        }


        @keyframes spin {

            to {
                transform:
                    rotate(360deg);
            }

        }


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

        @media(max-width: 991px) {

            .login-card {
                max-width:
                    600px;

                min-height:
                    auto;
            }


            .login-brand-panel {
                display:
                    none;
            }


            .login-form-panel {
                width:
                    100%;

                padding:
                    55px 45px;
            }

        }


        @media(max-width: 575px) {

            .login-wrapper {
                padding:
                    15px;
            }


            .login-card {
                border-radius:
                    20px;
            }


            .login-form-panel {
                padding:
                    40px 25px;
            }


            .login-title {
                font-size:
                    26px;
            }


            .form-options {
                align-items:
                    flex-start;

                flex-direction:
                    column;

                gap:
                    12px;
            }

        }