:root { color-scheme: light; --navy-950:#071529; --navy-900:#0b1f3a; --navy-800:#12345d; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-100:#dbeafe; --slate-950:#0f172a; --slate-700:#334155; --slate-500:#64748b; --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc; --danger-700:#b91c1c; --danger-100:#fee2e2; --focus:rgba(37,99,235,.2); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--slate-100); }
body { min-height:100vh; min-height:100dvh; margin:0; color:var(--slate-950); background:var(--slate-100); font-family:Manrope,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
svg { width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-skip-link { position:fixed; z-index:20; top:.75rem; left:.75rem; padding:.65rem 1rem; border-radius:.6rem; color:#fff; background:var(--blue-700); transform:translateY(-150%); transition:transform .15s ease; }
.auth-skip-link:focus { transform:translateY(0); }
.auth-shell { display:grid; grid-template-columns:minmax(24rem,.92fr) minmax(28rem,1.08fr); width:100%; min-height:100vh; min-height:100dvh; }
.auth-shell-single { display:block; }
.auth-shell-single .auth-form-panel { min-height:100vh; min-height:100dvh; }
.auth-mobile-brand.auth-standalone-brand { display:flex; }
.auth-brand { position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100%; padding:clamp(2rem,5vw,4.5rem); overflow:hidden; color:#fff; background:radial-gradient(circle at 8% 2%,rgba(56,189,248,.22),transparent 32%),linear-gradient(145deg,var(--navy-950),var(--navy-800)); }
.auth-brand::before,.auth-brand::after { content:""; position:absolute; z-index:-1; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.auth-brand::before { width:34rem; height:34rem; right:-18rem; top:12%; }
.auth-brand::after { width:22rem; height:22rem; right:-10rem; top:24%; }
.auth-brand-glow { position:absolute; z-index:-1; right:-6rem; bottom:-7rem; width:24rem; height:24rem; border-radius:50%; background:rgba(37,99,235,.28); filter:blur(4rem); }
.auth-brand-header,.auth-mobile-brand { display:flex; align-items:center; gap:.85rem; }
.auth-brand-header strong,.auth-mobile-brand strong { display:block; font-size:1.05rem; line-height:1.2; letter-spacing:-.01em; }
.auth-brand-header small,.auth-mobile-brand small { display:block; margin-top:.15rem; font-size:.78rem; color:rgba(255,255,255,.62); }
.auth-logo { display:grid; place-items:center; flex:0 0 3.25rem; width:3.25rem; height:3.25rem; border:1px solid rgba(255,255,255,.18); border-radius:1rem; color:#bfdbfe; background:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.auth-logo svg { width:2rem; height:2rem; }
.auth-logo.compact { flex-basis:2.85rem; width:2.85rem; height:2.85rem; border-color:#dbe5f2; color:var(--blue-700); background:#eff6ff; }
.auth-logo.compact svg { width:1.8rem; height:1.8rem; }
.auth-brand-copy { max-width:39rem; margin:auto 0 2.5rem; padding-top:5rem; }
.auth-eyebrow { display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.35rem; color:#bfdbfe; font-size:.78rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.auth-eyebrow i { width:.55rem; height:.55rem; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 .3rem rgba(96,165,250,.13); }
.auth-brand h1 { max-width:35rem; margin:0; font-size:clamp(2.25rem,4.4vw,4.7rem); line-height:.99; letter-spacing:-.055em; text-wrap:balance; }
.auth-brand-copy p { max-width:35rem; margin:1.55rem 0 0; color:rgba(226,232,240,.78); font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.65; }
.auth-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:0 0 2.5rem; padding:0; list-style:none; }
.auth-capabilities li { display:flex; gap:.7rem; min-width:0; padding:.85rem; border:1px solid rgba(255,255,255,.1); border-radius:.85rem; background:rgba(255,255,255,.055); }
.auth-capabilities li>span { display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:.55rem; color:#bfdbfe; background:rgba(96,165,250,.12); }
.auth-capabilities svg { width:1.1rem; height:1.1rem; }
.auth-capabilities strong,.auth-capabilities small { display:block; }
.auth-capabilities strong { font-size:.78rem; line-height:1.3; }
.auth-capabilities small { margin-top:.15rem; color:rgba(226,232,240,.55); font-size:.68rem; line-height:1.35; }
.auth-brand-footer { display:flex; align-items:center; gap:.55rem; color:rgba(226,232,240,.56); font-size:.76rem; }
.auth-status-dot { width:.5rem; height:.5rem; border-radius:50%; background:#34d399; box-shadow:0 0 0 .28rem rgba(52,211,153,.1); }
.auth-form-panel { display:flex; flex-direction:column; min-width:0; min-height:100%; padding:2rem clamp(1.5rem,6vw,7.5rem) 1.25rem; background:linear-gradient(145deg,#fff 0%,var(--slate-50) 100%); }
.auth-mobile-brand { display:none; color:var(--slate-950); }
.auth-mobile-brand small { color:var(--slate-500); }
.auth-form-wrap { width:min(100%,30rem); margin:auto; padding:3rem 0; }
.auth-form-heading { display:flex; align-items:flex-start; gap:1rem; margin-bottom:2rem; }
.auth-form-icon { display:grid; place-items:center; flex:0 0 3rem; width:3rem; height:3rem; border-radius:.85rem; color:var(--blue-700); background:var(--blue-100); }
.auth-form-icon svg { width:1.5rem; height:1.5rem; }
.auth-form-heading span:not(.auth-form-icon) { color:var(--blue-700); font-size:.75rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.auth-form-heading h1,.auth-form-heading h2 { margin:.25rem 0 .35rem; font-size:clamp(1.8rem,3vw,2.45rem); line-height:1.1; letter-spacing:-.04em; }
.auth-form-heading p { margin:0; color:var(--slate-500); line-height:1.5; }
.auth-alert { display:flex; gap:.8rem; margin-bottom:1.5rem; padding:.95rem 1rem; border:1px solid #fecaca; border-radius:.8rem; color:var(--danger-700); background:#fff7f7; }
.auth-alert>span { display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:.55rem; background:var(--danger-100); }
.auth-alert svg { width:1.15rem; height:1.15rem; }
.auth-alert strong,.auth-alert p { display:block; }
.auth-alert strong { font-size:.86rem; }
.auth-alert p { margin:.2rem 0 0; font-size:.82rem; line-height:1.4; }
.auth-field { margin-bottom:1.25rem; }
.auth-field label { display:block; margin-bottom:.48rem; color:var(--slate-700); font-size:.84rem; font-weight:700; }
.auth-label-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.auth-caps-hint { color:#b45309; font-size:.73rem; font-weight:650; }
.auth-input-wrap { position:relative; }
.auth-input-wrap input { display:block; width:100%; height:3.35rem; padding:0 3.1rem 0 3rem; border:1px solid var(--slate-300); border-radius:.8rem; outline:0; color:var(--slate-950); background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.03); transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.auth-input-wrap input::placeholder { color:#94a3b8; }
.auth-input-wrap input:hover { border-color:#94a3b8; }
.auth-input-wrap input:focus { border-color:var(--blue-600); box-shadow:0 0 0 .28rem var(--focus); }
.auth-input-wrap input[aria-invalid="true"] { border-color:#dc2626; background:#fffafa; }
.auth-input-icon { position:absolute; z-index:2; top:50%; left:1rem; display:grid; place-items:center; color:var(--slate-500); transform:translateY(-50%); pointer-events:none; }
.auth-input-icon svg { width:1.15rem; height:1.15rem; }
.auth-password-toggle { position:absolute; z-index:3; top:50%; right:.65rem; display:grid; place-items:center; width:2.2rem; height:2.2rem; padding:0; border:0; border-radius:.55rem; color:var(--slate-500); background:transparent; transform:translateY(-50%); cursor:pointer; }
.auth-password-toggle:hover { color:var(--blue-700); background:var(--blue-100); }
.auth-password-toggle:focus-visible { outline:3px solid var(--focus); }
.auth-password-toggle svg { width:1.15rem; height:1.15rem; }
.auth-password-toggle .eye-closed { display:none; }
.auth-password-toggle[aria-pressed="true"] .eye-open { display:none; }
.auth-password-toggle[aria-pressed="true"] .eye-closed { display:block; }
.auth-field>small { display:block; margin-top:.45rem; color:var(--slate-500); font-size:.73rem; line-height:1.4; }
.auth-validation { margin:-.35rem 0 1rem; color:var(--danger-700); font-size:.8rem; font-weight:600; }
.auth-submit { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; min-height:3.4rem; margin-top:.4rem; padding:.8rem 1.2rem; border:0; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--blue-700),var(--blue-600)); box-shadow:0 .75rem 1.6rem rgba(37,99,235,.2); font-weight:750; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.auth-submit:hover { transform:translateY(-1px); box-shadow:0 1rem 2rem rgba(37,99,235,.26); filter:saturate(1.08); }
.auth-submit:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.auth-submit:disabled { cursor:wait; transform:none; filter:grayscale(.1); opacity:.78; }
.auth-submit-arrow { width:1.15rem; height:1.15rem; transition:transform .16s ease; }
.auth-submit:hover .auth-submit-arrow { transform:translateX(.2rem); }
.auth-spinner { display:none; width:1.1rem; height:1.1rem; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:auth-spin .7s linear infinite; }
.auth-submit.loading .auth-spinner { display:block; }
.auth-submit.loading .auth-submit-arrow { display:none; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
.auth-help { display:flex; gap:.75rem; margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid var(--slate-200); color:var(--slate-500); }
.auth-help>span { display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2rem; border-radius:.55rem; color:var(--slate-700); background:var(--slate-100); }
.auth-help svg { width:1.05rem; height:1.05rem; }
.auth-help p { margin:0; font-size:.77rem; line-height:1.55; }
.auth-help strong { color:var(--slate-700); }
.auth-form-footer { margin-top:auto; color:#94a3b8; font-size:.7rem; text-align:center; }
@media (max-width:920px) { .auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.auth-form-panel{min-height:100vh;min-height:100dvh;padding:max(1.1rem,env(safe-area-inset-top)) max(1.1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1.1rem,env(safe-area-inset-left))}.auth-mobile-brand{display:flex}.auth-form-wrap{margin:auto;padding:2.5rem 0 2rem} }
@media (max-width:520px) { .auth-form-heading{gap:.8rem;margin-bottom:1.65rem}.auth-form-icon{flex-basis:2.7rem;width:2.7rem;height:2.7rem}.auth-form-heading h1,.auth-form-heading h2{font-size:1.8rem}.auth-form-heading p{font-size:.88rem}.auth-input-wrap input{height:3.2rem;font-size:16px}.auth-submit{min-height:3.3rem} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important} }