:root {
                --blue: #155eae;
                --navy: #103f74;
                --ink: #172b42;
                --muted: #607289;
                --line: #dce5ef;
                --page: #f4f8fc;
                --danger: #ab3932;
                --danger-bg: #fff1ef
        }

        * {
                box-sizing: border-box
        }

        body {
                min-height: 100vh;
                margin: 0;
                background: var(--page);
                color: var(--ink);
                font: 15px/1.5 "Segoe UI", Arial, sans-serif
        }

        .shell {
                display: grid;
                grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
                min-height: 100vh
        }

        .welcome {
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 48px clamp(32px, 7vw, 112px);
                background: linear-gradient(145deg, #0b315d, #155eae);
                color: #fff
        }

        .welcome:before,
        .welcome:after {
                position: absolute;
                content: "";
                border-radius: 50%;
                pointer-events: none
        }

        .welcome:before {
                right: -12vw;
                bottom: -22vw;
                width: 52vw;
                height: 52vw;
                border: 1px solid rgba(255, 255, 255, .13);
                box-shadow: 0 0 0 62px rgba(255, 255, 255, .035), 0 0 0 124px rgba(255, 255, 255, .025)
        }

        .welcome:after {
                left: -80px;
                top: -100px;
                width: 250px;
                height: 250px;
                background: rgba(255, 255, 255, .055)
        }

        .brand,
        .welcome-content,
        .welcome-footer {
                position: relative;
                z-index: 1
        }

        .brand {
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: 700
        }

        .brand-logo {
                width: 58px;
                height: 58px;
                object-fit: contain
        }

        .brand-copy small {
                display: block;
                color: #c9ddf2;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: .08em;
                text-transform: uppercase
        }

        .brand-copy strong {
                display: block;
                font-size: 18px;
                line-height: 1.1
        }

        .welcome-content {
                max-width: 610px;
                margin: 72px 0
        }

        .eyebrow {
                margin: 0 0 14px;
                color: #bdd8f4;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: .11em;
                text-transform: uppercase
        }

        .welcome h1 {
                max-width: 560px;
                margin: 0;
                font-size: clamp(34px, 4.2vw, 58px);
                line-height: 1.08;
                letter-spacing: -.04em
        }

        .lead {
                max-width: 520px;
                margin: 22px 0 0;
                color: #dceafa;
                font-size: 18px
        }

        .benefits {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 12px;
                margin-top: 38px
        }

        .benefit {
                padding: 14px;
                border: 1px solid rgba(255, 255, 255, .18);
                border-radius: 10px;
                background: rgba(5, 35, 72, .17);
                font-size: 13px
        }

        .benefit strong {
                display: block;
                margin-bottom: 4px;
                font-size: 14px
        }

        .welcome-footer {
                color: #c9ddf2;
                font-size: 12px
        }

        .signin-area {
                display: grid;
                place-items: center;
                padding: 32px;
                background: #fff
        }

        .signin-card {
                width: min(100%, 420px)
        }

        .signin-card h2 {
                margin: 0;
                color: var(--ink);
                font-size: 28px;
                letter-spacing: -.025em
        }

        .intro {
                margin: 7px 0 28px;
                color: var(--muted)
        }

        .signin-alert {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                margin: 0 0 18px;
                padding: 12px 14px;
                border: 1px solid #ebc3bf;
                border-radius: 8px;
                background: var(--danger-bg);
                color: var(--danger);
                font-size: 13px;
                line-height: 1.5;
        }
        .signin-alert svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
        .signin-alert p { margin: 0; }

        label {
                display: block;
                margin: 18px 0 6px;
                color: #334b66;
                font-size: 13px;
                font-weight: 700
        }

        input {
                width: 100%;
                border: 1px solid #bfcddb;
                border-radius: 8px;
                background: #fff;
                color: var(--ink);
                font: inherit;
                padding: 12px
        }

        input:focus {
                outline: 3px solid #cfe4fa;
                border-color: var(--blue)
        }

        button {
                width: 100%;
                min-height: 45px;
                margin-top: 26px;
                border: 0;
                border-radius: 8px;
                background: var(--blue);
                color: #fff;
                cursor: pointer;
                font: inherit;
                font-weight: 700
        }

        button:hover {
                background: var(--navy)
        }

        .form-note {
                margin: 17px 0 0;
                color: var(--muted);
                font-size: 12px;
                text-align: center
        }

        .signin-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; font-size: 13px; flex-wrap: wrap; }
        .signin-options .remember-option { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
        .remember-option input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; accent-color: var(--blue); flex-shrink: 0; }
        .signin-options a, .recovery-back { color: var(--blue); text-underline-offset: 3px; }
        .signin-options .forgot-password-trigger {
                width: auto;
                min-height: 32px;
                margin: 0;
                padding: 3px 0;
                background: transparent;
                color: var(--blue);
                font-size: 13px;
                font-weight: 600;
                text-decoration: underline;
                text-underline-offset: 3px;
        }
        .forgot-password-trigger:hover { color: var(--navy); }
        button:focus-visible { outline: 3px solid #a9cff5; outline-offset: 3px; }
        body.recovery-open { overflow: hidden; }
        .recovery-modal {
                width: min(490px, calc(100% - 32px));
                max-height: calc(100dvh - 32px);
                margin: auto;
                padding: 0;
                border: 0;
                border-radius: 18px;
                background: #fff;
                color: var(--ink);
                box-shadow: 0 24px 80px rgba(9, 34, 63, .28);
        }
        .recovery-modal::backdrop { background: rgba(8, 28, 51, .56); }
        .recovery-modal .recovery-card {
                position: relative;
                padding: clamp(24px, 5vw, 36px);
                border: 0;
                box-shadow: none;
        }
        .recovery-modal h2 { margin: 0 24px 12px 0; font-size: 27px; line-height: 1.2; letter-spacing: -.025em; }
        .recovery-modal .recovery-eyebrow { padding-right: 25px; }
        .recovery-modal .recovery-close {
                position: absolute;
                top: 12px;
                right: 12px;
                width: 36px;
                height: 36px;
                min-height: 36px;
                margin: 0;
                padding: 0;
                background: #edf3f8;
                color: var(--navy);
                font-size: 26px;
                font-weight: 400;
                line-height: 1;
                border-radius: 50%;
        }
        .recovery-modal .recovery-close:hover { background: #dce5ef; }
        .recovery-modal .recovery-back {
                min-height: 36px;
                margin-top: 20px;
                background: transparent;
                color: var(--blue);
                font-size: 14px;
                text-decoration: underline;
                font-weight: 600;
        }
        .recovery-page { display: grid; place-items: center; padding: 32px 20px; }
        .recovery-shell { width: min(100%, 490px); }
        .recovery-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 26px; color: var(--navy); text-decoration: none; font-size: 26px; }
        .recovery-brand img { width: 62px; height: 62px; object-fit: contain; }
        .recovery-card { max-width: none; width: 100%; padding: clamp(22px, 5vw, 36px); background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(16,63,116,.05); }
        .recovery-card h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.025em; line-height: 1.2; }
        .recovery-eyebrow { margin: 0 0 12px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
        .recovery-card .intro { overflow-wrap: anywhere; }
        .recovery-message { padding: 12px 14px; border: 1px solid #bdd7ee; border-radius: 8px; background: #f1f7fd; color: var(--navy); }
        .recovery-message.is-error { border-color: #ebc3bf; background: var(--danger-bg); color: var(--danger); }
        .recovery-back { display: block; margin-top: 24px; text-align: center; font-size: 14px; }
        .recovery-code { text-align: center; letter-spacing: .35em; font-size: 24px; }
        .recovery-secondary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
        .recovery-secondary .secondary { width: auto; flex: 1; margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: white; color: var(--blue); font-size: 13px; }
        .recovery-secondary .secondary:hover { background: var(--page); }

        .login-toast {
                position: fixed;
                z-index: 200;
                right: 20px;
                bottom: 20px;
                display: flex;
                width: min(390px, calc(100vw - 32px));
                gap: 14px;
                align-items: flex-start;
                padding: 16px;
                border: 1px solid #c9d9e8;
                border-left: 4px solid var(--blue);
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 20px 52px rgba(13, 39, 67, .24);
                animation: toast-enter .42s cubic-bezier(.2, .8, .2, 1) both;
                transition: transform .42s ease, opacity .3s ease
        }

        .login-toast div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
        .login-toast strong { display: block; margin-bottom: 4px; color: var(--navy); }
        .login-toast p { margin: 0; color: #4f6278; font-size: 13px; line-height: 1.45; }
        .login-toast button {
                flex-shrink: 0;
                width: 28px;
                min-height: 28px;
                height: 28px;
                margin: 0;
                padding: 0;
                border-radius: 50%;
                background: #edf3f8;
                color: #344b62;
                font-size: 20px;
                line-height: 1
        }
        .login-toast button:hover { background: #dce5ef; }
        .login-toast.dismissed { animation: none; opacity: 0; transform: translateX(calc(100% + 32px)); }
        @keyframes toast-enter {
                from { opacity: 0; transform: translateX(calc(100% + 32px)); }
                to { opacity: 1; transform: translateX(0); }
        }
        @media (prefers-reduced-motion: reduce) {
                .login-toast { animation-duration: .01ms; transition-duration: .01ms; }
        }

        @media(max-width:850px) {
                .shell {
                        grid-template-columns: 1fr
                }

                .welcome {
                        min-height: 330px;
                        padding: 30px 28px
                }

                .welcome-content {
                        margin: 42px 0
                }

                .welcome h1 {
                        font-size: 36px
                }

                .lead {
                        font-size: 16px
                }

                .benefits {
                        display: none
                }

                .signin-area {
                        padding: 42px 24px
                }
        }

        @media(max-width:420px) {
                .welcome {
                        min-height: 295px;
                        padding: 24px
                }

                .welcome h1 {
                        font-size: 31px
                }

                .signin-area {
                        padding: 32px 20px
                }
        }

        .brand-logo {
                width: 80px;
                height: 80px;
                object-fit: cover;
                object-position: center
        }