/* =====================================================
           GLOBAL
        ====================================================== */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        body {

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

            background: #EDEBFA;

            color: #1C2940;

            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
        }


        /* =====================================================
           MAIN PORTAL
        ====================================================== */

        .login-portal {

            width: 100%;
            min-height: 100vh;

            display: flex;

            overflow: hidden;
        }


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

        .login-left-panel {

            width: 56%;
            min-height: 100vh;

            position: relative;

            overflow: hidden;

            color: #fff;

            background:
                radial-gradient(
                    circle at 88% 88%,
                    rgba(255,255,255,.08),
                    transparent 30%
                ),

                linear-gradient(
                    145deg,
                    #120254 0%,
                    #180568 55%,
                    #0D023D 100%
                );
        }


        /* =====================================================
           BACKGROUND CIRCLES
        ====================================================== */

        .login-left-panel::before {

            content: "";

            position: absolute;

            width: 520px;
            height: 520px;

            border-radius: 50%;

            top: -285px;
            right: -170px;

            border:
                1px solid rgba(255,255,255,.12);
        }


        .login-left-panel::after {

            content: "";

            position: absolute;

            width: 450px;
            height: 450px;

            border-radius: 50%;

            bottom: -280px;
            left: -210px;

            border:
                1px solid rgba(255,255,255,.08);
        }


        /* =====================================================
           LEFT CONTENT
        ====================================================== */

        .login-left-content {

            position: relative;

            z-index: 5;

            min-height: 100vh;

            display: flex;

            flex-direction: column;

            padding:
                54px
                clamp(40px, 6vw, 100px);
        }


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

        .login-brand-logo {

            display: inline-flex;

            align-items: center;

            gap: 12px;

            width: fit-content;

            color: #fff;

            font-size: 25px;

            font-weight: 800;

            letter-spacing: -0.7px;
        }

        .login-brand-logo:hover {
            color: #fff;
        }


        .login-brand-logo-mark {

            width: 42px;
            height: 42px;

            display: flex;

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

            border-radius: 12px;

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

            border:
                1px solid rgba(255,255,255,.20);

            box-shadow:
                0 8px 25px rgba(0,0,0,.12);
        }


        .login-brand-logo-mark i {
            font-size: 21px;
        }


        /* =====================================================
           HERO
        ====================================================== */

        .login-hero-content {

            max-width: 650px;

            margin-top: auto;
            margin-bottom: auto;
        }


        .login-eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 9px;

            margin-bottom: 22px;

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

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 1.8px;

            text-transform: uppercase;
        }


        .login-eyebrow::before {

            content: "";

            width: 27px;
            height: 2px;

            border-radius: 5px;

            background:
                rgba(255,255,255,.65);
        }


        /* =====================================================
           HERO TITLE
        ====================================================== */

        .login-hero-title {

            margin-bottom: 22px;

            color: #fff;

            font-size:
                clamp(48px, 5vw, 76px);

            line-height: .98;

            font-weight: 800;

            letter-spacing: -3.8px;
        }


        .login-hero-title span {
            display: block;
        }


        .login-hero-title .login-accent-word {

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

            position: relative;
        }


        .login-hero-title .login-accent-word::after {

            content: "";

            display: block;

            width: 85px;
            height: 4px;

            margin-top: 13px;

            border-radius: 10px;

            background:
                rgba(255,255,255,.40);
        }


        /* =====================================================
           HERO DESCRIPTION
        ====================================================== */

        .login-hero-description {

            max-width: 540px;

            margin-bottom: 30px;

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

            font-size: 15px;

            line-height: 1.8;
        }


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

        .login-feature-list {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;
        }


        .login-feature-item {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding:
                9px 13px;

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

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

            border:
                1px solid rgba(255,255,255,.13);

            border-radius: 100px;

            font-size: 12px;

            font-weight: 600;

            transition:
                background .2s ease,
                transform .2s ease;
        }


        .login-feature-item:hover {

            color: #fff;

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

            transform:
                translateY(-2px);
        }


        .login-feature-item i {
            font-size: 13px;
        }


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

        .login-left-footer {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

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

            font-size: 10px;

            font-weight: 600;

            letter-spacing: 1.2px;

            text-transform: uppercase;
        }


        .login-network-status {

            display: flex;

            align-items: center;

            gap: 8px;
        }


        .login-status-dot {

            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: #4ADE80;

            box-shadow:
                0 0 0 5px
                rgba(74,222,128,.10);
        }


        /* =====================================================
           NETWORK GRAPHIC
        ====================================================== */

        .login-network {

            position: absolute;

            right: 7%;
            bottom: 17%;

            width: 240px;
            height: 180px;

            opacity: .24;
        }


        .login-network .login-line {

            position: absolute;

            height: 1px;

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

            transform-origin: left center;
        }


        .login-line.login-one {

            width: 100px;

            top: 60px;
            left: 40px;

            transform:
                rotate(-25deg);
        }


        .login-line.login-two {

            width: 110px;

            top: 70px;
            left: 80px;

            transform:
                rotate(26deg);
        }


        .login-line.login-three {

            width: 100px;

            top: 120px;
            left: 65px;

            transform:
                rotate(-35deg);
        }


        .login-network-node {

            position: absolute;

            width: 13px;
            height: 13px;

            border-radius: 50%;

            background: #fff;

            box-shadow:
                0 0 0 7px
                rgba(255,255,255,.07);
        }


        .login-node-one {
            top: 35px;
            left: 28px;
        }

        .login-node-two {
            top: 98px;
            left: 77px;
        }

        .login-node-three {
            top: 30px;
            right: 28px;
        }

        .login-node-four {
            bottom: 15px;
            left: 40px;
        }

        .login-node-five {
            bottom: 30px;
            right: 35px;
        }


        /* =====================================================
           NETWORK CENTER
        ====================================================== */

        .login-network-center {

            position: absolute;

            top: 72px;
            left: 110px;

            width: 46px;
            height: 46px;

            display: flex;

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

            border-radius: 15px;

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

            border:
                1px solid rgba(255,255,255,.20);

            color: #fff;

            font-size: 19px;
        }


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

        .login-right-panel {

            width: 44%;
            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 45px;

            background:
                #EDEBFA;
        }


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

        .login-wrapper {

            width: 100%;

            max-width: 430px;
        }


        /* =====================================================
           LOGIN HEADER
        ====================================================== */

        .login-header {

            margin-bottom: 28px;
        }


        .login-header h1 {

            margin-bottom: 9px;

            color: #111D38;

            font-size: 31px;

            line-height: 1.2;

            font-weight: 800;

            letter-spacing: -1px;
        }


        .login-header p {

            margin: 0;

            color: #7D899A;

            font-size: 14px;

            line-height: 1.6;
        }


        /* =====================================================
           HEADER ACCENT
        ====================================================== */

        .login-header::after {

            content: "";

            display: block;

            width: 42px;
            height: 3px;

            margin-top: 15px;

            border-radius: 10px;

            background:#120254;
        }


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

        .login-card {

            position: relative;

            padding: 10px;

            background: #fff;

            border:
                1px solid #E3E8EF;

            border-radius: 19px;

            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                

            overflow: hidden;
        }


        /* Top brand strip */

        .login-card::before {

            content: "";

            position: absolute;

            top: 0;
            left: 0;
            right: 0;

            height: 3px;

            background:#120254;
        }


        /* =====================================================
           PORTAL LINK
        ====================================================== */

        .login-portal-link {

            display: flex;

            align-items: center;

            gap: 15px;

            padding:
                17px 16px;

            margin: 3px 0;

            color: #1C2940;

            border-radius: 14px;

            transition:
                transform .2s ease,
                background .2s ease,
                box-shadow .2s ease;
        }


        .login-portal-link:hover {

            color: #1C2940;

            background:
                #F8F9FD;

            transform:
                translateX(3px);

            box-shadow:
                0 8px 25px
                rgba(17,29,56,.05);
        }


        /* =====================================================
           PORTAL ICON
        ====================================================== */

        .login-portal-icon {

            width: 46px;
            height: 46px;

            flex: 0 0 46px;

            display: flex;

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

            border-radius: 13px;

            font-size: 18px;

            transition:
                transform .2s ease;
        }


        .login-portal-link:hover .login-portal-icon {

            transform:
                scale(1.04);
        }


        /* Agent */

        .login-agent-icon {

            color: #059669;

            background:
                #ECFDF5;
        }


        /* Manager - Main Brand */

        .login-manager-icon {

            color:#120254;

            background:
                #EEEAFE;
        }


        /* Admin - Deep Brand */

        .login-admin-icon {

            color:#120254;

            background:
                #F3F0FF;
        }


        /* =====================================================
           PORTAL CONTENT
        ====================================================== */

        .login-portal-content {

            min-width: 0;

            flex: 1;
        }


        .login-portal-title {

            display: block;

            margin-bottom: 4px;

            color: #111D38;

            font-size: 14px;

            font-weight: 700;
        }


        .login-portal-description {

            display: block;

            color: #7D899A;

            font-size: 11px;

            line-height: 1.5;
        }


        /* =====================================================
           ARROW
        ====================================================== */

        .login-portal-arrow {

            width: 34px;
            height: 34px;

            display: flex;

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

            flex: 0 0 34px;

            color: #A0A9B8;

            border-radius: 10px;

            transition:
                background .2s ease,
                color .2s ease;
        }


        .login-portal-link:hover .login-portal-arrow {

            color: #fff;

            background:#120254;
        }


        /* =====================================================
           SECURITY
        ====================================================== */

        .login-security-line {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            margin-top: 19px;

            color: #000000;

            font-size: 10px;

            font-weight: 500;
        }


        .login-security-line i {

            color:#120254;

            font-size: 11px;
        }


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

        .login-footer {

            margin-top: 34px;

            text-align: center;

            color: #000000;

            font-size: 10px;

            line-height: 1.7;
        }


        .login-footer-links {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 15px;

            margin-top: 7px;
        }


        .login-footer-links a {

            color: #8994A4;

            transition:
                color .2s ease;
        }


        .login-footer-links a:hover {

            color:#120254;
        }


        /* =====================================================
           RESPONSIVE - 1050px
        ====================================================== */

        @media (max-width: 1050px) {

            .login-left-content {

                padding-left: 45px;

                padding-right: 45px;
            }


            .login-hero-title {

                font-size: 56px;
            }


            .login-network {

                display: none;
            }


            .login-right-panel {

                padding: 35px;
            }
        }


        /* =====================================================
           RESPONSIVE - 850px
        ====================================================== */

        @media (max-width: 850px) {

            .login-portal {

                display: block;

                overflow: visible;
            }


            .login-left-panel {

                width: 100%;

                min-height: auto;
            }


            .login-left-content {

                min-height: auto;

                padding:
                    35px
                    30px
                    40px;
            }


            .login-hero-content {

                margin-top: 70px;

                margin-bottom: 50px;
            }


            .login-hero-title {

                font-size: 52px;
            }


            .login-right-panel {

                width: 100%;

                min-height: auto;

                padding:
                    50px
                    30px
                    60px;
            }


            .login-wrapper {

                max-width: 500px;
            }
        }


        /* =====================================================
           RESPONSIVE - 575px
        ====================================================== */

        @media (max-width: 575px) {

            .login-left-content {

                padding:
                    28px
                    20px
                    32px;
            }


            .login-brand-logo {

                font-size: 21px;
            }


            .login-brand-logo-mark {

                width: 38px;
                height: 38px;
            }


            .login-hero-content {

                margin-top: 55px;

                margin-bottom: 40px;
            }


            .login-eyebrow {

                font-size: 9px;

                letter-spacing: 1.2px;
            }


            .login-hero-title {

                font-size: 43px;

                letter-spacing: -2.5px;
            }


            .login-hero-description {

                font-size: 13px;

                line-height: 1.7;
            }


            .login-feature-item {

                font-size: 10px;

                padding:
                    8px 10px;
            }


            .login-left-footer {

                font-size: 8px;
            }


            .login-right-panel {

                padding:
                    40px
                    18px
                    45px;
            }


            .login-header {

                margin-bottom: 22px;
            }


            .login-header h1 {

                font-size: 27px;
            }


            .login-header p {

                font-size: 13px;
            }


            .login-card {

                padding: 7px;

                border-radius: 16px;
            }


            .login-portal-link {

                gap: 12px;

                padding:
                    15px 11px;
            }


            .login-portal-icon {

                width: 42px;
                height: 42px;

                flex-basis: 42px;
            }


            .login-portal-title {

                font-size: 13px;
            }


            .login-portal-description {

                font-size: 10px;
            }
        }


        /* =====================================================
           RESPONSIVE - 360px
        ====================================================== */

        @media (max-width: 360px) {

            .login-hero-title {

                font-size: 37px;
            }


            .login-feature-list {

                gap: 6px;
            }


            .login-feature-item {

                font-size: 9px;
            }


            .login-portal-description {

                display: none;
            }


            .login-right-panel {

                padding-left: 14px;

                padding-right: 14px;
            }
        }
		
		.login-card {
            width: 100%;
            max-width: 420px;
            border: 0;
            border-radius: 22px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .login-top {
            background: linear-gradient(
                135deg,
                #4f46e5,
                #2563eb
            );
            color: white;
            padding: 35px;
            text-align: center;
        }


        .login-body {
            padding: 35px;
            background: white;
        }

        .form-control {
            height: 40px;
            border-radius: 10px;
        }

        .btn-login {
            height: 48px;
            border-radius: 10px;
            font-weight: 600;
        }