:root { color-scheme:light; --ink:#172a45; --muted:#65758b; --line:#cbd5e1; --blue:#2858c7; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f8fc; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.6; }
button,input { font:inherit; }
button { cursor:pointer; transition:background .18s,border-color .18s,box-shadow .18s; }
button:disabled { cursor:not-allowed; opacity:.58; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #7098ed; outline-offset:4px; }
.login-shell { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(360px,46%) minmax(480px,1fr); }
.brand-panel { position:relative; overflow:hidden; background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(135deg,#0a1b33 0%,#123058 55%,#17407c 100%); background-size:44px 44px,44px 44px,auto; color:#fff; display:flex; flex-direction:column; padding:48px clamp(32px,5vw,80px) 32px; }
.brand { display:inline-flex; flex-direction:column; color:inherit; text-decoration:none; font-size:24px; font-weight:650; letter-spacing:3px; align-self:flex-start; }
.brand span { font-size:11px; font-weight:400; letter-spacing:4px; color:#b7c9e5; margin-top:5px; }
.brand-copy { position:relative; z-index:1; margin-top:clamp(60px,10vh,120px); }
.eyebrow { margin:0 0 18px; font-size:12px; font-weight:600; letter-spacing:2px; }
.brand-copy .eyebrow { color:#b7c9e5; display:flex; align-items:center; gap:12px; }
.brand-copy .eyebrow::before { content:""; width:22px; height:3px; border-radius:2px; background:linear-gradient(90deg,#38bdf8,#4f6bf5); }
.brand-copy h1 { margin:0; font-size:clamp(36px,3.6vw,56px); font-weight:600; line-height:1.3; letter-spacing:0; }
.brand-copy > p:last-child { margin:22px 0 0; color:#b9c8dc; line-height:1.9; font-size:15px; }
.brand-art { position:relative; min-height:200px; flex:1; margin-top:36px; opacity:.75; }
.glow { position:absolute; border-radius:50%; pointer-events:none; }
.glow-one { width:420px; height:420px; top:-12%; left:-10%; background:radial-gradient(circle,rgba(56,189,248,.22) 0%,rgba(56,189,248,0) 68%); animation:glow-drift 34s ease-in-out infinite; }
.glow-two { width:380px; height:380px; bottom:-14%; right:-8%; background:radial-gradient(circle,rgba(99,102,241,.2) 0%,rgba(99,102,241,0) 68%); animation:glow-drift 42s ease-in-out infinite reverse; }
.brand-foot { margin:30px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:10px; letter-spacing:2px; color:#a4b7d1; }
.brand-foot span { letter-spacing:.5px; }
.login-panel { display:flex; flex-direction:column; min-width:0; padding:38px clamp(28px,5vw,80px) 24px; }
.panel-top { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--muted); }
.form-wrap { width:100%; max-width:420px; margin:auto; padding:48px 0 34px; }
.form-heading { margin-bottom:30px; }
.form-heading .eyebrow { color:var(--blue); margin-bottom:10px; }
.form-heading h2 { margin:0 0 10px; font-size:34px; line-height:1.35; font-weight:650; letter-spacing:-1px; }
.form-heading > p:last-child { color:var(--muted); margin:0; font-size:13px; }
.field { margin-bottom:21px; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
input:not([type=hidden]) { display:block; width:100%; min-width:0; height:48px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:0 14px; font-size:16px; transition:border-color .18s,box-shadow .18s; }
input::placeholder { color:#94a3b8; opacity:1; font-size:16px; }
input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(40,88,199,.12); }
.password-control { position:relative; }
.password-control input { padding-right:66px; }
.password-control button { position:absolute; top:5px; right:6px; height:38px; padding:0 10px; border:0; border-radius:4px; background:transparent; color:#526681; font-size:12px; }
.password-control button:hover { background:#edf2fa; }
.verification-row { display:grid; grid-template-columns:minmax(0,1fr) 124px; gap:10px; }
.button-secondary { border:1px solid #bfcde2; border-radius:10px; background:#edf2fc; color:#244b95; font-size:13px; min-height:48px; font-variant-numeric:tabular-nums; }
.button-secondary:hover:not(:disabled) { background:#e1eafa; border-color:#91aada; }
.field-help { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
#capsHint { color:#906113; }
#capsHint:empty { margin:0; }
.recovery-link { color:#244b95; font-size:13px; margin:0 0 16px; }
.recovery-link:not([hidden]) { display:block; }
.verification-field { margin-bottom:0; }
#loginMessage { min-height:24px; margin:12px 0; color:#b33138; font-size:13px; overflow-wrap:anywhere; }
#loginMessage.success { color:#26714e; }
.button-primary { width:100%; min-height:48px; border:1px solid #2450b8; border-radius:10px; background:linear-gradient(180deg,#2f63d8,#2450b8); color:#fff; font-weight:600; letter-spacing:2px; box-shadow:0 4px 10px #2858c718; }
.button-primary:hover:not(:disabled) { background:linear-gradient(180deg,#2a5acb,#1f47a6); }
.button-primary:active:not(:disabled) { transform:translateY(1px); }
.login-help { margin-top:24px; font-size:12px; color:var(--muted); }
.login-help summary { cursor:pointer; width:fit-content; }
.login-help p { margin:10px 0 0; padding-left:15px; line-height:1.8; }
.signup-footer { width:100%; max-width:420px; margin:0 auto; color:#78869a; font-size:11px; display:flex; justify-content:space-between; }
@media (max-width:960px) {
    .login-shell { display:flex; flex-direction:column; }
    .brand-panel { padding:22px 28px; flex:none; }
    .brand { font-size:20px; flex-direction:row; align-items:center; gap:18px; }
    .brand span { margin:0; letter-spacing:2px; }
    .brand-copy,.brand-art,.brand-foot { display:none; }
    .login-panel { flex:1; padding:24px 28px; }
    .panel-top { width:100%; max-width:420px; margin:0 auto; }
    .form-wrap { padding:40px 0; }
}
@media (max-width:380px) {
    .brand-panel { padding:22px 20px; }
    .login-panel { padding:20px; }
    .form-heading h2 { font-size:27px; }
    .verification-row { grid-template-columns:minmax(0,1fr) 110px; gap:8px; }
}
[hidden] { display:none!important; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.form-heading { margin-bottom:22px; }
.login-steps { display:flex; list-style:none; gap:24px; padding:0; margin:0; color:var(--muted); font-size:12px; }
.login-steps li { display:flex; align-items:center; gap:8px; }
.login-steps li span { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; font-variant-numeric:tabular-nums; }
.login-steps [aria-current=step] { color:var(--blue); font-weight:600; }
.login-steps [aria-current=step] span { color:#fff; background:linear-gradient(180deg,#2f63d8,#2450b8); border-color:#2450b8; box-shadow:0 2px 8px rgba(37,80,184,.35); }
.login-steps .is-done span { color:#26714e; border-color:#26714e; background:#edf7f0; }
.operation-status { min-height:44px; padding:12px 0; color:#244b95; font-size:12px; }
.trust-notice { margin:0 0 22px; padding:10px 14px; border-left:3px solid var(--blue); background:#f0f5ff; border-radius:6px; color:#244b95; font-size:12px; line-height:1.8; }
.account-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; border-left:3px solid var(--blue); padding:8px 0 8px 14px; margin-bottom:24px; }
.account-summary div { min-width:0; }
.account-summary span { display:block; font-size:12px; color:var(--muted); }
.account-summary strong { display:block; overflow-wrap:anywhere; font-size:16px; font-weight:600; }
.account-summary button { flex-shrink:0; padding:10px 0 10px 12px; color:#244b95; background:none; border:0; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.code-expiry { font-variant-numeric:tabular-nums; }
.button-primary,.button-secondary { position:relative; overflow:hidden; }
.button-primary { transition:background .2s,box-shadow .2s,transform .2s; }
.button-primary:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 8px 18px #2858c72b; }
.button-primary:active:not(:disabled) { transform:translateY(2px); }
.button-primary.is-loading,.button-primary.is-complete { opacity:1; letter-spacing:1px; }
.is-loading::after { content:""; position:absolute; bottom:0; left:0; width:40%; height:3px; background:currentColor; opacity:.65; animation:loading-sweep 1.25s ease-in-out infinite; }
.button-primary.is-loading::before { content:""; display:inline-block; vertical-align:-2px; width:14px; height:14px; margin-right:10px; border:2px solid #ffffff66; border-top-color:#fff; border-radius:50%; animation:loading-spin .8s linear infinite; }
.button-primary.is-complete { background:#26714e; border-color:#26714e; }
.button-primary.is-complete::before { content:"✓"; margin-right:10px; }
.step-transition #credentialFields:not([hidden]),.step-transition #emailFields:not([hidden]),.step-transition #accountSummary:not([hidden]) { animation:content-enter .4s cubic-bezier(.2,.7,.2,1) both; }
.orbit { position:absolute; width:300px; height:300px; border:1px solid #739ac43d; border-radius:50%; left:5%; top:-20%; }
.orbit-two { width:380px; height:380px; left:-5%; top:-35%; }
.signal { position:absolute; width:7px; height:7px; border-radius:50%; background:#b0c9ef; box-shadow:0 0 16px #a9d4ff66; left:10%; top:30%; animation:signal-pulse 3s ease-in-out infinite; }
.signal-two { left:65%; top:55%; animation-delay:1.5s; }
.page-hidden *,.page-hidden *::before,.page-hidden *::after { animation-play-state:paused!important; }
@keyframes content-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@keyframes loading-sweep { from { transform:translateX(-100%); } to { transform:translateX(350%); } }
@keyframes signal-pulse { 0%,100% { opacity:.75; transform:scale(1); } 50% { opacity:1; transform:scale(1.4); } }
@keyframes glow-drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(36px,28px) scale(1.12); } }
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important; transition:none!important; }
    .is-loading::after { width:100%; opacity:.35; }
}