:root {
            --navy: #1A2640;
            --navy-deep: #11213B;
            --navy-light: #23395C;
            --orange: #FC9804;
            --orange-dark: #E88700;

            --white: #FFFFFF;
            --text: #15345C;
            --muted: #6880A2;
            --border: #DCE4EF;

            --danger: #B42318;
            --danger-bg: #FFF2F1;
        }

        * {
            box-sizing: border-box;
        }

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

        body {
            min-height: 100vh;
            font-family:
                Arial,
                Helvetica,
                sans-serif;

            background: var(--navy);
            color: var(--text);
        }

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

        .login-page {
            position: relative;

            min-height: 100vh;

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

            padding: 45px 6%;

            overflow: hidden;

            background-image:
                linear-gradient(
                    90deg,
                    rgba(17, 33, 59, 0.92) 0%,
                    rgba(17, 33, 59, 0.78) 35%,
                    rgba(17, 33, 59, 0.30) 58%,
                    rgba(17, 33, 59, 0.15) 100%
                ),
                url('/images/home.jpg');

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* =====================================================
           DECORATIVE ORANGE SHAPES
        ===================================================== */

        .orange-circle-top {
            position: absolute;

            width: 260px;
            height: 260px;

            top: -170px;
            left: -100px;

            border-radius: 50%;

            background: var(--orange);

            opacity: 0.95;
        }

        .orange-circle-bottom {
            position: absolute;

            width: 300px;
            height: 300px;

            right: -180px;
            bottom: -190px;

            border-radius: 50%;

            border: 35px solid var(--orange);

            opacity: 0.9;
        }

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

        .brand-content {
            position: absolute;

            z-index: 2;

            left: 7%;
            top: 50%;

            width: min(550px, 45%);

            transform: translateY(-50%);

            color: var(--white);
        }

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

        .brand {
            display: flex;
            align-items: center;
            gap: 15px;

            margin-bottom: 55px;
        }

        .brand-mark {
            width: 58px;
            height: 58px;

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

            flex-shrink: 0;

            border-radius: 12px;

            background: var(--orange);
            color: var(--navy);

            font-size: 24px;
            font-weight: 900;

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

        .brand-divider {
            width: 2px;
            height: 48px;

            background: rgba(255,255,255,0.7);
        }

        .brand-name {
            font-size: 25px;
            line-height: 1.15;
            font-weight: 700;
        }

        .brand-small {
            margin-top: 4px;

            color: #D4DCE8;

            font-size: 13px;
            font-weight: 500;
        }

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

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 10px;

            margin-bottom: 18px;

            color: var(--orange);

            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        .eyebrow-line {
            width: 38px;
            height: 3px;

            background: var(--orange);
        }

        .brand-content h1 {
            margin: 0;

            max-width: 570px;

            color: var(--white);

            font-size: clamp(38px, 4vw, 58px);
            line-height: 1.05;
            letter-spacing: -1.8px;
            font-weight: 800;
        }

        .brand-content h1 span {
            color: var(--orange);
        }

        .hero-text {
            max-width: 490px;

            margin: 24px 0 0;

            color: #D8E1ED;

            font-size: 16px;
            line-height: 1.7;
        }

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

        .features {
            display: flex;
            gap: 35px;

            margin-top: 38px;
        }

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

            min-width: 125px;
        }

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

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

            flex-shrink: 0;

            border-radius: 50%;

            background: rgba(252, 152, 4, 0.15);

            color: var(--orange);

            border: 1px solid rgba(252, 152, 4, 0.25);
        }

        .feature-icon svg {
            width: 21px;
            height: 21px;

            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;

            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .feature-text {
            color: #FFFFFF;

            font-size: 12px;
            line-height: 1.35;
            font-weight: 600;
        }

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

        .security {
            display: flex;
            align-items: center;
            gap: 8px;

            margin-top: 42px;

            color: #BFCBDC;

            font-size: 12px;
        }

        .security svg {
            width: 18px;
            height: 18px;

            fill: var(--orange);
            stroke: var(--orange);
        }

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

        .login-card {
            position: relative;
            z-index: 5;

            width: min(455px, 100%);

            padding: 42px 40px 30px;

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

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

            border-radius: 20px;

            box-shadow:
                0 25px 70px rgba(8, 20, 38, 0.30);
        }

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

        .login-header {
            text-align: center;

            margin-bottom: 30px;
        }

        .login-header h2 {
            margin: 0 0 9px;

            color: var(--navy);

            font-size: 35px;
            line-height: 1.15;
            letter-spacing: -0.8px;
        }

        .login-header h2::after {
            content: "";

            display: block;

            width: 55px;
            height: 4px;

            margin: 15px auto 0;

            border-radius: 20px;

            background: var(--orange);
        }

        .login-header p {
            margin: 17px 0 0;

            color: var(--muted);

            font-size: 14px;
            line-height: 1.5;
        }

        /* =====================================================
           ERROR
        ===================================================== */

        .login-error {
            display: flex;
            align-items: flex-start;
            gap: 9px;

            margin-bottom: 20px;

            padding: 12px 13px;

            border: 1px solid #F1B8B3;
            border-left: 4px solid var(--danger);

            border-radius: 8px;

            background: var(--danger-bg);

            color: var(--danger);

            font-size: 13px;
            line-height: 1.5;
        }

        .login-error svg {
            width: 17px;
            height: 17px;

            flex-shrink: 0;

            margin-top: 1px;

            fill: none;
            stroke: currentColor;
            stroke-width: 2;
        }

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

        .form-group {
            margin-bottom: 19px;
        }

        .form-label {
            display: block;

            margin-bottom: 8px;

            color: var(--navy);

            font-size: 13px;
            font-weight: 700;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;

            left: 14px;
            top: 50%;

            width: 19px;
            height: 19px;

            transform: translateY(-50%);

            color: #8292A8;

            pointer-events: none;
        }

        .input-icon svg {
            width: 100%;
            height: 100%;

            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;

            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .form-input {
            width: 100%;
            height: 52px;

            padding: 0 46px;

            border: 1px solid #D1DBE8;

            border-radius: 9px;

            outline: none;

            background: #FFFFFF;

            color: var(--navy);

            font-family: inherit;
            font-size: 14px;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .form-input::placeholder {
            color: #9AA8BA;
        }

        .form-input:hover {
            border-color: #B9C6D6;
        }

        .form-input:focus {
            border-color: var(--orange);

            box-shadow:
                0 0 0 3px rgba(252, 152, 4, 0.13);
        }

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

        .password-toggle {
            position: absolute;

            right: 9px;
            top: 50%;

            width: 34px;
            height: 34px;

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

            transform: translateY(-50%);

            border: none;
            border-radius: 7px;

            background: transparent;

            color: #8191A6;

            cursor: pointer;
        }

        .password-toggle:hover {
            background: #F2F5F8;
            color: var(--navy);
        }

        .password-toggle svg {
            width: 19px;
            height: 19px;

            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;

            stroke-linecap: round;
            stroke-linejoin: round;
        }

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

        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin: 3px 0 23px;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

            margin: 0;

            accent-color: var(--orange);

            cursor: pointer;
        }

        .remember label {
            color: var(--muted);

            font-size: 13px;

            cursor: pointer;
        }

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

        .login-button {
            width: 100%;
            height: 53px;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            border: none;
            border-radius: 9px;

            background: var(--orange);

            color: var(--navy);

            font-family: inherit;
            font-size: 15px;
            font-weight: 800;

            cursor: pointer;

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

        .login-button:hover {
            background: var(--orange-dark);

            transform: translateY(-1px);

            box-shadow:
                0 8px 20px rgba(252, 152, 4, 0.24);
        }

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

        .login-button:disabled {
            opacity: 0.75;

            cursor: not-allowed;

            transform: none;

            box-shadow: none;
        }

        .login-button svg {
            width: 19px;
            height: 19px;

            fill: none;
            stroke: currentColor;
            stroke-width: 2;

            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* =====================================================
           SPINNER
        ===================================================== */

        .spinner {
            width: 17px;
            height: 17px;

            border: 2px solid rgba(26, 38, 64, 0.25);
            border-top-color: var(--navy);

            border-radius: 50%;

            animation: spin 0.7s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

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

        .login-footer {
            display: flex;
            align-items: center;
            gap: 14px;

            margin-top: 26px;
        }

        .footer-line {
            flex: 1;

            height: 1px;

            background: #E3E8EF;
        }

        .footer-text {
            color: var(--muted);

            font-size: 12px;

            white-space: nowrap;
        }

        .copyright {
            margin-top: 11px;

            text-align: center;

            color: #9AA7B8;

            font-size: 11px;
        }

        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 1050px) {

            .login-page {
                padding-right: 4%;
            }

            .brand-content {
                left: 5%;
                width: 47%;
            }

            .brand-content h1 {
                font-size: 43px;
            }

            .features {
                gap: 17px;
            }

            .feature-text {
                font-size: 11px;
            }
        }

        @media (max-width: 800px) {

            .login-page {
                min-height: 100vh;

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

                padding: 25px 18px;

                background-position: center;
            }

            .brand-content {
                display: none;
            }

            .orange-circle-top {
                width: 180px;
                height: 180px;

                top: -120px;
                left: -80px;
            }

            .login-card {
                width: min(440px, 100%);

                padding: 34px 28px 27px;
            }
        }

        @media (max-width: 480px) {

            .login-page {
                padding: 15px;
            }

            .login-card {
                padding: 29px 21px 24px;

                border-radius: 15px;
            }

            .login-header h2 {
                font-size: 29px;
            }

            .login-header p {
                font-size: 13px;
            }

            .form-input {
                height: 49px;
            }

            .login-button {
                height: 50px;
            }
        }