:root {
            --auth-navy: #0f172a;
            --auth-navy-soft: #1e293b;
            --auth-indigo: #312e81;
            --auth-gold: #d4a94e;
            --auth-text: #0f172a;
            --auth-muted: #64748b;
            --auth-line: #dfe6ee;
            --auth-surface: #f6f8fb;
            --auth-danger: #dc2626;
            --auth-success: #059669;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { min-height: 100%; }
        body {
            min-height: 100vh;
            min-height: 100dvh;
            margin: 0;
            background: var(--auth-surface);
            color: var(--auth-text);
            font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        button, input, a { font: inherit; }

        .auth-page {
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
            overflow: hidden;
        }

        .auth-brand-panel {
            min-height: 100vh;
            min-height: 100dvh;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            padding: clamp(28px, 4vw, 58px);
            display: flex;
            flex-direction: column;
            background:
                radial-gradient(circle at 72% 24%, rgba(99,102,241,.26), transparent 30%),
                radial-gradient(circle at 20% 83%, rgba(212,169,78,.13), transparent 28%),
                linear-gradient(145deg, #080d18 0%, #10192b 54%, #211e53 100%);
            color: #fff;
        }

        .auth-brand-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -3;
            opacity: .25;
            background-image:
                linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: linear-gradient(to bottom, black, transparent 86%);
        }

        .auth-brand-panel::after {
            content: '';
            width: 460px;
            height: 460px;
            position: absolute;
            right: -196px;
            bottom: -226px;
            z-index: -2;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            box-shadow:
                0 0 0 54px rgba(255,255,255,.025),
                0 0 0 108px rgba(255,255,255,.018);
        }

        .auth-orb {
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(1px);
        }

        .auth-orb-one {
            width: 220px;
            height: 220px;
            top: 13%;
            right: 7%;
            border: 1px solid rgba(255,255,255,.11);
            background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
        }

        .auth-orb-two {
            width: 62px;
            height: 62px;
            top: 13%;
            right: 33%;
            background: rgba(212,169,78,.13);
            box-shadow: 0 0 70px rgba(212,169,78,.16);
        }

        .auth-brand-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .auth-brand-signature,
        .auth-brand-security {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,.72);
            font-size: .54rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: none;
        }

        .auth-brand-signature::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #d4a94e;
            box-shadow: 0 0 0 5px rgba(212,169,78,.11);
        }

        .auth-brand-security { color: rgba(255,255,255,.38); letter-spacing: .05em; text-transform: none; }
        .auth-brand-security i { color: #86efac; }

        .auth-brand-content {
            width: min(540px, 100%);
            margin: auto;
            padding: clamp(34px, 6vh, 66px) 0;
            position: relative;
            text-align: center;
        }

        .auth-brand-logo-stage {
            width: clamp(182px, 15vw, 220px);
            height: clamp(182px, 15vw, 220px);
            margin: 0 auto;
            padding: 14px;
            position: relative;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 42px;
            background: rgba(255,255,255,.055);
            box-shadow: 0 34px 80px rgba(0,0,0,.30);
            backdrop-filter: blur(18px);
        }

        .auth-brand-logo-stage::before,
        .auth-brand-logo-stage::after {
            content: '';
            position: absolute;
            pointer-events: none;
        }

        .auth-brand-logo-stage::before {
            inset: -17px;
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 54px;
        }

        .auth-brand-logo-stage::after {
            width: 46px;
            height: 2px;
            left: 50%;
            bottom: -33px;
            background: linear-gradient(90deg, transparent, #d4a94e, transparent);
            transform: translateX(-50%);
        }

        .auth-brand-logo {
            width: 100%;
            height: 100%;
            padding: 18px;
            border-radius: 30px;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #fff;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.06), 0 18px 38px rgba(0,0,0,.18);
        }

        .auth-brand-logo img { width: 100%; height: 100%; object-fit: contain; }

        .auth-brand-name {
            margin-top: 52px;
            display: block;
            color: #f0d28d;
            font-size: .56rem;
            font-weight: 850;
            letter-spacing: .22em;
            text-transform: uppercase;
        }

        .auth-brand-content h1 {
            margin: 14px 0 0;
            color: #fff;
            font-size: clamp(1.75rem, 2.6vw, 2.75rem);
            line-height: 1.06;
            font-weight: 900;
            letter-spacing: -.045em;
        }

        .auth-brand-content h1 span {
            display: block;
            color: rgba(255,255,255,.62);
            font-weight: 650;
        }

        .auth-brand-content > p {
            max-width: 390px;
            margin: 14px auto 0;
            color: rgba(226,232,240,.58);
            font-size: .68rem;
            line-height: 1.65;
        }

        .auth-brand-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: rgba(226,232,240,.42);
            font-size: .51rem;
        }

        .auth-brand-footer span { display: inline-flex; align-items: center; gap: 6px; }
        .auth-brand-footer span i { color: #86efac; }

        .auth-form-panel {
            min-height: 100vh;
            min-height: 100dvh;
            padding: clamp(24px, 4vw, 56px);
            position: relative;
            display: grid;
            place-items: center;
            background:
                radial-gradient(circle at 100% 0%, rgba(99,102,241,.055), transparent 30%),
                #f8fafc;
        }

        .auth-form-panel::before {
            content: '';
            width: 190px;
            height: 190px;
            position: absolute;
            top: -100px;
            right: -80px;
            border: 28px solid rgba(99,102,241,.035);
            border-radius: 50%;
            pointer-events: none;
        }

        .auth-form-wrap { width: min(530px, 100%); }
        .auth-mobile-brand { margin-bottom: 28px; display: none; align-items: center; gap: 10px; }
        .auth-mobile-brand > span { width: 45px; height: 45px; padding: 5px; border: 1px solid #e2e8f0; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
        .auth-mobile-brand img { width: 100%; height: 100%; object-fit: contain; }
        .auth-mobile-brand strong,.auth-mobile-brand small { display: block; }
        .auth-mobile-brand strong { color: #0f172a; font-size: .75rem; font-weight: 850; }
        .auth-mobile-brand small { margin-top: 2px; color: #b7791f; font-size: .48rem; font-weight: 800; letter-spacing: .12em; }

        .auth-form-heading { margin-bottom: 24px; }
        .auth-form-heading > span { display: block; color: #6366f1; font-size: .52rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
        .auth-form-heading h2 { margin: 6px 0 0; color: #0f172a; font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 900; letter-spacing: -.04em; }
        .auth-form-heading p { margin: 8px 0 0; color: #64748b; font-size: .65rem; line-height: 1.55; }

        .auth-alert {
            margin-bottom: 16px;
            padding: 11px 12px;
            border: 1px solid #fecaca;
            border-radius: 13px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
            background: #fef2f2;
            color: #991b1b;
            animation: authShake .32s ease both;
        }

        .auth-alert > span { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: #fee2e2; color: #dc2626; }
        .auth-alert strong,.auth-alert small { display: block; }
        .auth-alert strong { font-size: .58rem; }
        .auth-alert small { margin-top: 3px; color: #b91c1c; font-size: .52rem; line-height: 1.4; }

        .auth-field { margin-bottom: 15px; }
        .auth-label-row { margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .auth-label-row label { color: #475569; font-size: .54rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
        .auth-label-row span { color: #94a3b8; font-size: .48rem; }

        .auth-input-wrap {
            min-height: 52px;
            position: relative;
            border: 1px solid var(--auth-line);
            border-radius: 14px;
            display: flex;
            align-items: center;
            background: #fff;
            overflow: hidden;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }

        .auth-input-wrap:focus-within { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.08); transform: translateY(-1px); }
        .auth-input-wrap.has-error { border-color: #ef4444; }
        .auth-input-icon { width: 48px; height: 50px; flex: 0 0 48px; display: grid; place-items: center; background: #f8fafc; color: #94a3b8; transition: .18s ease; }
        .auth-input-wrap:focus-within .auth-input-icon { color: #4f46e5; background: #f5f3ff; }
        .auth-input-wrap input { width: 100%; height: 50px; min-width: 0; padding: 0 13px; border: 0; outline: 0; background: transparent; color: #0f172a; font-size: .72rem; }
        .auth-input-wrap input::placeholder { color: #b6c0ce; }
        .auth-password-toggle { width: 44px; height: 50px; flex: 0 0 44px; border: 0; display: grid; place-items: center; background: #fff; color: #94a3b8; }
        .auth-password-toggle:hover { color: #334155; }

        .auth-form-options { margin: 4px 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
        .auth-remember { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: .57rem; cursor: pointer; user-select: none; }
        .auth-remember input { position: absolute; opacity: 0; pointer-events: none; }
        .auth-checkmark { width: 18px; height: 18px; position: relative; border: 1px solid #cbd5e1; border-radius: 6px; display: grid; place-items: center; background: #fff; color: transparent; transition: .18s ease; }
        .auth-checkmark i { font-size: .58rem; }
        .auth-remember input:checked + .auth-checkmark { border-color: #4f46e5; background: #4f46e5; color: #fff; }
        .auth-remember input:focus-visible + .auth-checkmark { box-shadow: 0 0 0 4px rgba(99,102,241,.1); }
        .auth-forgot { color: #4f46e5; font-size: .57rem; font-weight: 750; text-decoration: none; }
        .auth-forgot:hover { color: #312e81; text-decoration: underline; }

        .auth-submit {
            width: 100%;
            min-height: 52px;
            padding: 0 17px;
            border: 0;
            border-radius: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg,#0f172a,#312e81);
            color: #fff;
            box-shadow: 0 14px 30px rgba(49,46,129,.22);
            transition: .2s ease;
        }

        .auth-submit:hover { color: #fff; box-shadow: 0 18px 36px rgba(49,46,129,.3); transform: translateY(-2px); }
        .auth-submit:active { transform: translateY(0); }
        .auth-submit:disabled { opacity: .72; cursor: wait; transform: none; }
        .auth-submit > span { display: inline-flex; align-items: center; gap: 9px; font-size: .66rem; font-weight: 850; }
        .auth-submit > i { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: .66rem; }
        .auth-submit.is-loading > i { animation: authSpin .75s linear infinite; }

        .auth-security-note {
            margin-top: 16px;
            padding: 10px 11px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 9px;
            background: rgba(255,255,255,.68);
        }

        .auth-security-note > span { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: #ecfdf5; color: #059669; }
        .auth-security-note strong,.auth-security-note small { display: block; }
        .auth-security-note strong { color: #334155; font-size: .53rem; }
        .auth-security-note small { margin-top: 2px; color: #94a3b8; font-size: .47rem; line-height: 1.4; }

        .auth-form-footer { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: #94a3b8; font-size: .49rem; }
        .auth-form-footer span { display: inline-flex; align-items: center; gap: 5px; }

        @keyframes authSpin { to { transform: rotate(360deg); } }
        @keyframes authShake { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

        @media (max-width: 1100px) {
            .auth-page { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); }
            .auth-brand-panel { padding-inline: 34px; }
            .auth-brand-logo-stage { width: 176px; height: 176px; border-radius: 38px; }
            .auth-brand-logo { border-radius: 27px; }
        }

        @media (max-width: 860px) {
            body { overflow-y: auto; }
            .auth-page { display: block; }
            .auth-brand-panel { display: none; }
            .auth-form-panel { min-height: 100vh; min-height: 100dvh; padding: 30px 20px; }
            .auth-mobile-brand { display: flex; }
            .auth-form-wrap { width: min(550px, 100%); }
        }

        @media (max-width: 480px) {
            .auth-form-panel { padding: 24px 16px; place-items: start center; }
            .auth-form-wrap { margin: auto 0; }
            .auth-form-heading { margin-bottom: 20px; }
            .auth-form-options { align-items: flex-start; }
            .auth-form-footer { justify-content: center; }
            .auth-form-footer > span:last-child { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }

        /* Centered login presentation */
        body {
            overflow-x: hidden;
            background: #eef3f8;
        }

        .auth-page {
            display: block;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 10% 12%, rgba(15, 50, 91, .13), transparent 30%),
                radial-gradient(circle at 91% 88%, rgba(221, 126, 48, .12), transparent 27%),
                linear-gradient(145deg, #edf2f7 0%, #f8fafc 52%, #eef3f8 100%);
        }

        .auth-page::before,
        .auth-page::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .auth-page::before {
            width: 310px;
            height: 310px;
            top: -155px;
            left: -135px;
            border: 54px solid rgba(15, 50, 91, .05);
        }

        .auth-page::after {
            width: 260px;
            height: 260px;
            right: -115px;
            bottom: -130px;
            border: 46px solid rgba(221, 126, 48, .055);
        }

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

        .auth-form-panel {
            min-height: 100vh;
            min-height: 100dvh;
            padding: 28px 20px;
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            background: transparent;
        }

        .auth-form-panel::before {
            width: 10px;
            height: 10px;
            top: 32px;
            right: 38px;
            border: 0;
            background: var(--auth-success);
            box-shadow: 0 0 0 5px rgba(5, 150, 105, .1);
        }

        .auth-form-wrap {
            width: min(538px, 100%);
            padding: 30px 34px 25px;
            border: 1px solid #dce3eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 26px 70px rgba(17, 39, 66, .14);
        }

        .auth-mobile-brand {
            margin: 0 0 22px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .auth-mobile-brand > span {
            width: 82px;
            height: 82px;
            padding: 10px;
            border: 1px solid #dfe5ec;
            border-radius: 20px;
            display: grid;
            place-items: center;
            background: #fff;
            box-shadow: 0 12px 28px rgba(15, 50, 91, .12);
        }

        .auth-mobile-brand img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .auth-form-heading {
            margin-bottom: 23px;
            text-align: center;
        }

        .auth-form-heading h2 {
            margin: 0;
            color: #172033;
            font-size: 1.75rem;
            font-weight: 850;
            letter-spacing: -.035em;
        }

        .auth-form-heading p {
            margin: 7px 0 0;
            color: #69788e;
            font-size: .76rem;
            line-height: 1.55;
        }

        .auth-field {
            margin-bottom: 16px;
        }

        .auth-label-row label {
            color: #344258;
            font-size: .64rem;
        }

        .auth-label-row span {
            color: #8491a3;
            font-size: .57rem;
        }

        .auth-input-wrap {
            background: #f9fbfd;
        }

        .auth-input-wrap:focus-within {
            border-color: #153f71;
            box-shadow: 0 0 0 4px rgba(21, 63, 113, .08);
        }

        .auth-input-icon,
        .auth-input-wrap:focus-within .auth-input-icon {
            background: #f3f6fa;
        }

        .auth-input-wrap:focus-within .auth-input-icon,
        .auth-forgot {
            color: #153f71;
        }

        .auth-input-wrap input {
            font-size: .76rem;
        }

        .auth-password-toggle {
            background: #f9fbfd;
        }

        .auth-remember,
        .auth-forgot {
            font-size: .64rem;
        }

        .auth-remember input:checked + .auth-checkmark {
            border-color: #153f71;
            background: #153f71;
        }

        .auth-submit {
            background: #0f325b;
            box-shadow: 0 13px 27px rgba(15, 50, 91, .22);
        }

        .auth-submit:hover {
            background: #0b294d;
            box-shadow: 0 17px 33px rgba(15, 50, 91, .28);
        }

        .auth-security-note {
            border-color: #e3e8ee;
            background: #fbfcfe;
        }

        .auth-security-note strong {
            font-size: .6rem;
        }

        .auth-security-note small {
            font-size: .54rem;
        }

        .auth-form-footer {
            margin-top: 22px;
            padding-top: 17px;
            border-top: 1px solid #e7ebf0;
            color: #7b889a;
            font-size: .54rem;
        }

        @media (max-width: 480px) {
            .auth-form-panel {
                padding: 22px 14px;
                place-items: center;
            }

            .auth-form-wrap {
                margin: 0;
                padding: 26px 20px 22px;
                border-radius: 18px;
            }

            .auth-mobile-brand > span {
                width: 72px;
                height: 72px;
            }
        }