* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100%;
            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;
        }

        body {
            background: #f4f7fb;
            color: #172033;
        }


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

        .pbs-login-page {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 30px;

            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(37, 99, 235, .08),
                    transparent 32%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(14, 165, 233, .07),
                    transparent 30%
                ),
                #f5f7fb;
        }


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

        .pbs-login-container {

            width: 100%;

            max-width: 1180px;

            min-height: 700px;

            display: grid;

            grid-template-columns:
                1.05fr
                .95fr;

            background: #ffffff;

            border-radius: 28px;

            overflow: hidden;

            box-shadow:
                0 25px 70px rgba(15, 23, 42, .12);

            border:
                1px solid rgba(226, 232, 240, .8);
        }


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

        .pbs-brand-panel {

            position: relative;

            padding: 55px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            overflow: hidden;

            background:
                linear-gradient(
                    145deg,
                    #071a3a 0%,
                    #0a2855 45%,
                    #0d3d78 100%
                );

            color: #ffffff;
        }


        .pbs-brand-panel::before {

            content: "";

            position: absolute;

            width: 420px;

            height: 420px;

            border-radius: 50%;

            right: -210px;

            top: -180px;

            background:
                rgba(59, 130, 246, .13);
        }


        .pbs-brand-panel::after {

            content: "";

            position: absolute;

            width: 500px;

            height: 240px;

            left: -160px;

            bottom: -100px;

            border-radius: 50%;

            border:
                1px solid rgba(59, 130, 246, .28);

            box-shadow:
                0 0 0 25px rgba(59, 130, 246, .05),
                0 0 0 50px rgba(59, 130, 246, .04);
        }


        .pbs-brand-content {

            position: relative;

            z-index: 2;
        }


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

        .pbs-logo-area {

            width: 190px;

            height: 64px;

            display: flex;

            align-items: center;

            margin-bottom: 70px;
        }


        .pbs-logo-area img {

            max-width: 180px;

            max-height: 58px;

            object-fit: contain;
        }


        /*
        If you don't have the logo yet,
        the PBS text remains visible.
        */

        .pbs-logo-placeholder {

            display: flex;

            align-items: center;

            gap: 12px;
        }


        .pbs-logo-icon {

            width: 48px;

            height: 48px;

            border-radius: 14px;

            display: flex;

            align-items: center;

            justify-content: center;

            background:
                linear-gradient(
                    135deg,
                    #3b82f6,
                    #60a5fa
                );

            box-shadow:
                0 10px 25px rgba(37, 99, 235, .25);

            font-size: 23px;

            font-weight: 800;
        }


        .pbs-logo-text {

            font-size: 32px;

            line-height: 1;

            font-weight: 800;

            letter-spacing: -.8px;
        }


        .pbs-logo-subtitle {

            margin-top: 5px;

            font-size: 12px;

            color: #b9c9e4;

            letter-spacing: .2px;
        }


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

        .pbs-brand-heading {

            max-width: 530px;

            margin: 0;

            font-size: 47px;

            line-height: 1.13;

            letter-spacing: -1.6px;

            font-weight: 750;
        }


        .pbs-brand-heading span {

            color: #4f9cff;
        }


        .pbs-brand-description {

            max-width: 500px;

            margin-top: 22px;

            margin-bottom: 42px;

            font-size: 16px;

            line-height: 1.7;

            color: #c6d4e9;
        }


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

        .pbs-features {

            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 20px;

            max-width: 570px;
        }


        .pbs-feature {

            display: flex;

            align-items: center;

            gap: 13px;
        }


        .pbs-feature-icon {

            width: 42px;

            height: 42px;

            flex: 0 0 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 12px;

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

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

            color: #60a5fa;

            font-size: 17px;
        }


        .pbs-feature-title {

            font-size: 13px;

            font-weight: 700;

            color: #ffffff;
        }


        .pbs-feature-text {

            margin-top: 3px;

            font-size: 11px;

            color: #a9bbd5;
        }


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

        .pbs-brand-footer {

            position: relative;

            z-index: 2;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding-top: 30px;

            border-top:
                1px solid rgba(255,255,255,.09);

            font-size: 11px;

            color: #9fb2ce;
        }


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

        .pbs-login-panel {

            padding: 55px 65px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #ffffff;
        }


        .pbs-login-content {

            width: 100%;

            max-width: 420px;
        }


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

        .pbs-login-icon {

            width: 62px;

            height: 62px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 24px;

            border-radius: 18px;

            background:
                #eff6ff;

            color:
                #2563eb;

            font-size: 25px;
        }


        .pbs-login-title {

            margin: 0;

            font-size: 32px;

            line-height: 1.2;

            font-weight: 750;

            letter-spacing: -.7px;

            color: #111827;
        }


        .pbs-login-subtitle {

            margin: 9px 0 35px;

            color: #718096;

            font-size: 14px;

            line-height: 1.6;
        }


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

        .pbs-form-group {

            margin-bottom: 21px;
        }


        .pbs-form-label {

            display: block;

            margin-bottom: 8px;

            font-size: 13px;

            font-weight: 650;

            color: #273449;
        }


        .pbs-input-wrapper {

            position: relative;
        }


        .pbs-input-icon {

            position: absolute;

            left: 16px;

            top: 50%;

            transform: translateY(-50%);

            color: #8b98aa;

            font-size: 17px;

            pointer-events: none;
        }


        .pbs-form-control {

            width: 100%;

            height: 54px;

            padding:
                0 16px 0 48px;

            border:
                1px solid #dce2ea;

            border-radius: 12px;

            outline: none;

            background: #ffffff;

            color: #172033;

            font-size: 14px;

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


        .pbs-form-control::placeholder {

            color: #a1aaba;
        }


        .pbs-form-control:hover {

            border-color: #c8d1dd;
        }


        .pbs-form-control:focus {

            border-color: #3182f6;

            background: #ffffff;

            box-shadow:
                0 0 0 4px rgba(49, 130, 246, .10);
        }


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

        .pbs-password-toggle {

            position: absolute;

            right: 15px;

            top: 50%;

            transform: translateY(-50%);

            border: 0;

            padding: 5px;

            background: transparent;

            color: #8995a6;

            cursor: pointer;

            font-size: 16px;
        }


        .pbs-password-toggle:hover {

            color: #2563eb;
        }


        #password {

            padding-right: 48px;
        }


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

        .pbs-form-options {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin: 5px 0 25px;
        }


        .pbs-remember {

            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 13px;

            color: #566274;

            cursor: pointer;
        }


        .pbs-remember input {

            width: 17px;

            height: 17px;

            accent-color: #2563eb;

            cursor: pointer;
        }


        .pbs-forgot {

            color: #2563eb;

            font-size: 13px;

            font-weight: 600;

            text-decoration: none;
        }


        .pbs-forgot:hover {

            text-decoration: underline;
        }


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

        .pbs-login-button {

            width: 100%;

            height: 54px;

            border: 0;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    #2563eb,
                    #3b82f6
                );

            color: #ffffff;

            font-size: 15px;

            font-weight: 700;

            cursor: pointer;

            box-shadow:
                0 8px 20px rgba(37, 99, 235, .22);

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


        .pbs-login-button:hover {

            transform: translateY(-1px);

            box-shadow:
                0 12px 25px rgba(37, 99, 235, .28);
        }


        .pbs-login-button:active {

            transform: translateY(0);
        }


        .pbs-login-button:disabled {

            opacity: .7;

            cursor: not-allowed;

            transform: none;
        }


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

        .pbs-security {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            margin-top: 22px;

            font-size: 11px;

            color: #9aa4b2;
        }


        .pbs-security i {

            color: #22a06b;
        }


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

        .pbs-divider {

            display: flex;

            align-items: center;

            gap: 13px;

            margin: 28px 0 22px;

            color: #9aa4b2;

            font-size: 12px;
        }


        .pbs-divider::before,
        .pbs-divider::after {

            content: "";

            height: 1px;

            flex: 1;

            background: #e9edf2;
        }


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

        .pbs-support {

            text-align: center;

            font-size: 12px;

            color: #8994a3;

            line-height: 1.7;
        }


        .pbs-support a {

            color: #2563eb;

            text-decoration: none;

            font-weight: 600;
        }


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

        @media (max-width: 950px) {

            .pbs-login-container {

                max-width: 620px;

                grid-template-columns: 1fr;
            }


            .pbs-brand-panel {

                display: none;
            }


            .pbs-login-panel {

                min-height: 700px;

                padding: 45px 35px;
            }

        }


        @media (max-width: 520px) {

            .pbs-login-page {

                padding: 0;
            }


            .pbs-login-container {

                min-height: 100vh;

                border-radius: 0;

                box-shadow: none;
            }


            .pbs-login-panel {

                padding:
                    35px 22px;
            }


            .pbs-login-title {

                font-size: 28px;
            }

        }