:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#20223a;background:#f4f5fb}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 10%,#e6ddff 0,transparent 34%),radial-gradient(circle at 88% 80%,#dae6ff 0,transparent 35%),#f7f8fc}.auth-page{width:min(1060px,calc(100% - 32px));min-height:650px;margin:clamp(24px,6vh,72px) auto;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border:1px solid #e6e3f2;border-radius:30px;background:#fff;box-shadow:0 24px 70px rgba(49,42,102,.14)}.auth-brand{padding:64px;background:linear-gradient(145deg,#30256e,#6646d8 55%,#5b79df);color:#fff}.auth-brand>img{width:56px;height:56px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}.auth-brand>span{display:block;margin-top:14px;font-size:25px;font-weight:850}.auth-brand h1{max-width:480px;margin:70px 0 18px;font-size:42px;line-height:1.18}.auth-brand p{max-width:480px;color:#e8e4ff;font-size:16px;line-height:1.8}.auth-brand ul{display:grid;gap:14px;margin:40px 0 0;padding:0;list-style:none}.auth-brand li:before{content:"✓";display:inline-grid;width:24px;height:24px;margin-right:10px;place-items:center;border-radius:50%;background:#ffffff2b}.auth-panel{padding:46px 48px;align-self:center}.auth-tabs{display:flex;gap:6px;padding:5px;border-radius:13px;background:#f3f2fa}.auth-tabs button{flex:1;padding:10px 8px;border:0;border-radius:9px;color:#74748b;background:transparent;cursor:pointer}.auth-tabs button.active{color:#503ac2;background:#fff;box-shadow:0 4px 14px rgba(50,43,102,.09);font-weight:750}.auth-form,.recovery-card>div:not([hidden]){display:grid;gap:15px}.auth-form{margin-top:30px}.auth-form h2,.recovery-card h2{margin:0;font-size:28px}.auth-form>p,.recovery-card p{margin:-8px 0 4px;color:#77788e;line-height:1.55}.auth-form label,.recovery-card label{display:grid;gap:7px;color:#484a61;font-size:13px;font-weight:700}.auth-form input,.recovery-card input{width:100%;height:44px;padding:0 13px;border:1px solid #dfe0e9;border-radius:10px;outline:0;font:inherit}.auth-form input:focus,.recovery-card input:focus{border-color:#785be8;box-shadow:0 0 0 3px #785be81c}.auth-form small{color:#8b8ca0;font-weight:400}.inline{display:grid;grid-template-columns:1fr auto;gap:8px}.inline button{padding:0 13px;border:1px solid #d9d4f4;border-radius:10px;color:#5c45c9;background:#f8f6ff;cursor:pointer}.primary{height:46px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#7655e8,#496fe2);font-weight:800;cursor:pointer;box-shadow:0 9px 20px #6654d52a}.primary:disabled,.inline button:disabled{cursor:not-allowed;opacity:.65}.text-link{padding:0;border:0;color:#6048cd;background:transparent;cursor:pointer}.forgot-link{justify-self:end;margin-top:-7px;font-size:13px}.consent{grid-template-columns:auto 1fr!important;align-items:flex-start!important;font-weight:400!important}.consent input{width:16px;height:16px;margin-top:2px}.consent a,.auth-panel footer a{color:#6048cd}.auth-message{min-height:22px;margin-top:16px;color:#bd334d;font-size:13px}.auth-message.ok{color:#198653}.auth-panel footer{display:flex;gap:18px;margin-top:22px;font-size:12px}.recovery-dialog{width:min(500px,calc(100% - 32px));padding:0;border:0;border-radius:22px;background:transparent;box-shadow:0 28px 90px rgba(27,22,69,.3)}.recovery-dialog::backdrop{background:rgba(24,23,45,.52);backdrop-filter:blur(4px)}.recovery-card{position:relative;margin:0;padding:34px;background:#fff;border-radius:22px}.dialog-close{position:absolute;z-index:2;top:15px;right:17px;width:34px;height:34px;border:0;border-radius:50%;color:#6f7184;background:#f2f2f7;font-size:24px;line-height:1;cursor:pointer}.step-kicker{color:#644bd4;font-size:12px;font-weight:800}.recovery-success{text-align:center}.success-mark{display:grid;width:56px;height:56px;margin:0 auto;place-items:center;border-radius:50%;color:#fff;background:#31ad78;font-size:28px}.recovery-card>.auth-message{margin-top:14px}.recovery-dialog[aria-busy="true"] .dialog-close{pointer-events:none;opacity:.45}@media(max-width:820px){.auth-page{grid-template-columns:1fr;margin:16px auto}.auth-brand{display:none}.auth-panel{padding:30px 22px}.auth-tabs{font-size:13px}.recovery-card{padding:30px 22px}}@media(max-width:430px){.inline{grid-template-columns:1fr}.inline button{height:42px}.auth-panel footer{flex-wrap:wrap}.recovery-card h2{font-size:24px}}
/* Keep the login card balanced in the viewport and the three legal links as one group. */
body{display:grid;place-items:center;min-height:100svh;padding:24px 16px}
.auth-page{width:min(1060px,100%);min-height:min(650px,calc(100svh - 48px));margin:0}
.auth-brand{padding:clamp(32px,4.2vw,58px)}
.auth-brand h1{margin:clamp(32px,5vh,54px) 0 18px}
.auth-panel footer{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #eceaf5;text-align:center}
.auth-panel footer a{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:8px;color:#6552b9;background:#f8f6ff;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.auth-panel footer a:hover,.auth-panel footer a:focus-visible{color:#4934ae;background:#f3efff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){body{padding:16px}.auth-page{min-height:0}.auth-panel{padding:30px 22px}}
@media(max-width:430px){.auth-panel footer a{padding:5px 8px;font-size:11px}}

/* Registration reveals only one short step at a time. */
.register-progress{display:flex;align-items:center;gap:10px;margin:0 0 2px;color:#9293a6;font-size:12px;font-weight:750}
.register-progress span{white-space:nowrap}
.register-progress span.active{color:#5d45c8}
.register-progress i{flex:1;height:1px;background:#e5e1f2}
.register-step:not([hidden]){display:grid;gap:15px;min-width:0;animation:register-step-in .18s ease-out}
.register-step .inline{min-width:0;grid-template-columns:minmax(0,1fr) auto}
.register-step .inline button{white-space:nowrap}
.register-back{justify-self:start;font-size:13px;font-weight:700}
.register-step .consent span{line-height:1.6}
.auth-page:has(#registerAccountStep:not([hidden])) .auth-panel{padding-top:30px;padding-bottom:30px}
.auth-form:has(#registerAccountStep:not([hidden])){gap:12px;margin-top:22px}
.register-step:not([hidden]){gap:12px}
@keyframes register-step-in{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:430px){.register-step .inline{grid-template-columns:minmax(0,1fr) auto}.register-step .inline button{height:44px;padding:0 9px;font-size:12px}.register-step .consent span{font-size:12px}}
.auth-form:has(#registerAccountStep:not([hidden])){margin-top:16px;gap:9px}.auth-form:has(#registerAccountStep:not([hidden])) .register-step:not([hidden]){gap:9px}.auth-form:has(#registerAccountStep:not([hidden])) .register-step label{gap:5px}.auth-form:has(#registerAccountStep:not([hidden])) .register-step input{height:40px}.auth-page:has(#registerAccountStep:not([hidden])){min-height:610px}.auth-page:has(#registerAccountStep:not([hidden])) .auth-brand h1{margin-top:52px}
.auth-brand>img{width:72px;height:72px;object-fit:cover;border-radius:16px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.auth-brand>img{width:100px;height:100px;object-fit:contain;border-radius:20px}

/* Let the supplied artwork carry the brand on its own, including on phones. */
.auth-brand>img{display:block;width:132px;height:132px;max-width:100%;object-fit:contain;border-radius:27px;box-shadow:0 0 0 1px #ffffff38,0 0 32px #ca9dff72;filter:drop-shadow(0 0 12px #dcb7ff88);animation:auth-logo-breathe 4.5s ease-in-out infinite}
@keyframes auth-logo-breathe{50%{box-shadow:0 0 0 5px #ffffff23,0 0 45px #dfb7ffb5;filter:drop-shadow(0 0 19px #ead1ffaa)}}
@media(max-width:820px){.auth-brand{display:flex;justify-content:center;padding:16px 22px 0;background:#fff}.auth-brand>img{width:112px;height:112px}.auth-brand h1,.auth-brand p,.auth-brand ul{display:none}.auth-page{min-height:0}}
@media(prefers-reduced-motion:reduce){.auth-brand>img{animation:none}}

/* One custom consent control; the generic text-input and native checkbox skins must not overlap. */
.auth-form .consent{grid-template-columns:20px minmax(0,1fr)!important;align-items:center!important;column-gap:10px!important}
.auth-form .consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:block;width:20px!important;height:20px!important;min-width:20px;margin:0;padding:0;border:1.5px solid #a69dcf;border-radius:6px;background:#fff;box-shadow:none;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s}
.auth-form .consent input[type="checkbox"]:checked{border-color:#6849d6;background-color:#6849d6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m4.5 10 3.5 3.5 7.5-8'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:16px 16px}
.auth-form .consent input[type="checkbox"]:focus-visible{outline:2px solid #6849d6;outline-offset:3px;box-shadow:none}
.auth-form:has(#registerAccountStep:not([hidden])) .consent input[type="checkbox"]{height:20px!important}
/* Test codes are shown only when the non-production API explicitly returns one. */
.sms-test-code:not([hidden]) { margin:2px 0 12px; padding:11px 14px; border:1px solid #bdadf1; border-radius:10px; background:#f3efff; color:#4f35b1; font-size:15px; font-weight:800; letter-spacing:.02em; }