:root{color-scheme:dark;--cyan:#55dcff;--mint:#71decf;--ink:#020506;--panel:#071217d9;--line:#24454d;--muted:#6f8f92;--text:#e0f5f4;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--ink);color:var(--text)}
body{overflow:hidden}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}
#app{position:relative;width:100%;height:100dvh;min-height:620px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 30% 45%,#082126 0,transparent 34%),linear-gradient(135deg,#020405,#010303 62%,#04090b)}
#avatar{position:absolute;inset:0;width:100%;height:100%;z-index:-3;touch-action:pan-y}
.ambient-grid{position:absolute;inset:0;z-index:-2;opacity:.18;background-image:linear-gradient(#65e2de0b 1px,transparent 1px),linear-gradient(90deg,#65e2de0b 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(90deg,#000 0,#000 55%,transparent 88%)}
.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 35% 48%,transparent 24%,#01040518 52%,#010304b8 100%)}
.topbar{position:absolute;top:max(28px,env(safe-area-inset-top));left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;z-index:4}
.brand{display:flex;gap:12px;align-items:center;color:#d9f3ed;text-decoration:none;font-size:17px;letter-spacing:.3em;font-weight:600}
.brand-glyph{font-size:34px;font-weight:200;color:var(--mint);filter:drop-shadow(0 0 12px #71decf66)}
.brand small,.system-status small{display:block;margin-top:6px;color:#55736e;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em}
.system-status{display:flex;gap:9px;align-items:flex-start;color:#8fb9af;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em}
.live-dot{width:5px;height:5px;margin-top:3px;border-radius:50%;background:#76ead6;box-shadow:0 0 14px #76ead6}
.telemetry{display:none}
.telemetry-left{left:4.5%}.telemetry-right{right:4.5%;align-items:flex-end;text-align:right}.telemetry i{width:58px;height:1px;background:linear-gradient(90deg,#49ae9b66,transparent)}.telemetry-right i{transform:rotate(180deg)}.telemetry span:last-child{font-size:8px;color:#25453f}
.welcome-copy{position:absolute;left:8%;top:50%;width:min(470px,38vw);transform:translateY(-50%);z-index:2;text-shadow:0 2px 18px #000}
.eyebrow{display:flex;align-items:center;gap:10px;color:#76cfc4;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.22em}.eyebrow span{width:28px;height:1px;background:#76cfc4}
.welcome-copy h1{max-width:100%;margin:20px 0 14px;font-size:clamp(36px,4.2vw,60px);font-weight:320;line-height:1.06;letter-spacing:-.045em;white-space:normal;overflow-wrap:normal;word-break:normal}.welcome-copy p{max-width:410px;margin:0;color:#89a7a8;font-size:15px;line-height:1.7}
.robot-state{display:flex;align-items:center;gap:10px;margin-top:28px;color:#78bdb6;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em}.state-orbit{width:8px;height:8px;border:1px solid #72d8c8;transform:rotate(45deg);box-shadow:0 0 10px #72d8c855}
.login-shell{position:absolute;right:7.5%;top:50%;width:min(420px,39vw);transform:translateY(-50%);padding:34px 34px 28px;border:1px solid #31515a;border-radius:20px;background:linear-gradient(145deg,#0b171ddf,#050d12ed);backdrop-filter:blur(24px);box-shadow:0 32px 80px #000b,0 1px #80e3ee1b inset;z-index:3;overflow:hidden}
.login-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 0 0,#4fdccc12,transparent 38%)}
.panel-line{position:absolute;top:0;left:72px;right:72px;height:1px;background:linear-gradient(90deg,transparent,#6bf3e9,transparent);box-shadow:0 0 16px #6bf3e9}
.login-header{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:28px}.secure-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #315962;border-radius:11px;background:#0f2429;color:#8be3d6}.secure-mark svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.section-kicker{color:#71989a;font:8px ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em}.login-header h2{margin:5px 0 0;font-size:22px;font-weight:450;letter-spacing:-.02em}
form{position:relative}form>label,.label-row label{display:block;margin:15px 0 8px;color:#9fb8b8;font-size:12px}.label-row{display:flex;align-items:end;justify-content:space-between}.label-row .text-button{margin-bottom:7px}
.input-wrap{display:flex;align-items:center;height:50px;border:1px solid #28434a;border-radius:10px;background:#03090dd6;transition:border-color .2s,box-shadow .2s}.input-wrap:focus-within{border-color:#62baaf;box-shadow:0 0 0 3px #62baaf10}.input-wrap>svg{width:18px;margin-left:15px;fill:none;stroke:#557b7b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.input-wrap input{flex:1;min-width:0;height:100%;padding:0 13px;border:0;outline:0;background:transparent;color:#e1f5f3;font-size:14px}.input-wrap input::placeholder{color:#425f61}.reveal{display:grid;place-items:center;width:46px;height:100%;border:0;background:transparent;color:#5f8382;cursor:pointer}.reveal svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.text-button{padding:0;border:0;background:transparent;color:#73bcb4;font-size:11px;cursor:pointer}.text-button:hover{color:#b9fff7}.remember{display:flex!important;align-items:center;gap:9px;margin:15px 0 18px!important;color:#759392!important;font-size:11px!important}.remember input{appearance:none;width:15px;height:15px;margin:0;border:1px solid #3a5b5c;border-radius:4px;background:#061013;display:grid;place-items:center}.remember input:checked:after{content:"✓";color:#9ff2e5;font-size:11px}.remember input:checked{border-color:#4f9f95;background:#11352f}
.submit-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;border-radius:10px;cursor:pointer;border:1px solid #66c3b7;background:linear-gradient(135deg,#287a70,#1b5b58);color:#effffc;font-weight:600;box-shadow:0 10px 30px #184d4838}.submit-button:hover{filter:brightness(1.12)}.submit-button:disabled{cursor:wait;opacity:.72}.submit-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.submit-button.loading svg{animation:spin 1s linear infinite}.submit-button.loading svg path{d:path("M12 3a9 9 0 1 1-6.4 2.7")}
.form-message{min-height:16px;margin:11px 0 0;color:#557b78;text-align:center;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.09em}.form-message.error{color:#ff9c84}.form-message.success{color:#8de0bd}
.signup{margin:20px 0 0;text-align:center;color:#5d797a;font-size:11px}
.session-panel{position:relative;text-align:center;padding:18px 0 2px}.session-kicker{color:#71decf;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em}.session-panel h3{margin:14px 0 8px;font-size:22px;font-weight:450}.session-panel p{margin:0 0 22px;color:#7fa1a0;font-size:12px;overflow-wrap:anywhere}
.mfa-panel{position:relative}.mfa-panel h3{margin:12px 0 6px;font-size:21px;font-weight:450}.mfa-panel>p{margin:0 0 14px;color:#87a7a5;font-size:12px;line-height:1.5}.mfa-panel>label{display:block;margin:15px 0 8px;color:#9fb8b8;font-size:12px}.mfa-panel .submit-button{margin-top:16px}.code-wrap input{text-align:center;font:600 22px ui-monospace,SFMono-Regular,monospace;letter-spacing:.34em}.enrollment-box{margin:14px 0;padding:13px;border:1px solid #32695f;border-radius:10px;background:#071b18}.enrollment-box span,.enrollment-box small{display:block;color:#82aaa4;font-size:10px;line-height:1.45}.mfa-qr-wrap{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:12px;margin:10px 0 12px;padding:10px;border-radius:9px;background:#fff}.mfa-qr-wrap[hidden]{display:none}.mfa-qr-wrap img{display:block;width:112px;height:112px;image-rendering:pixelated}.mfa-qr-wrap small{color:#173a34;font-size:11px;line-height:1.5}.secret-row{display:flex;align-items:center;gap:8px;margin:8px 0}.enrollment-box code{display:block;flex:1;min-width:0;color:#a9ffe9;font:600 12px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em;overflow-wrap:anywhere;user-select:all}.secret-action{flex:0 0 auto;padding:7px 9px;border:1px solid #4b8d7d;border-radius:7px;background:#10342d;color:#b9ffed;font-size:10px;text-decoration:none;cursor:pointer}.secret-warning{display:block;margin:7px 0;color:#ffd38a;font:600 10px/1.45 ui-monospace,SFMono-Regular,monospace}.open-authenticator{margin-top:10px;text-align:center}.open-authenticator:not([hidden]){display:block}
.otp-label-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 9px}.otp-label-row label{color:#9fb8b8;font-size:12px}.otp-label-row span{color:#69cbb9;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}.otp-entry{position:relative;height:58px}.otp-cells{display:flex;justify-content:center;gap:8px;height:100%;perspective:700px}.otp-cells span{display:grid;place-items:center;width:46px;height:56px;border:1px solid #315c58;border-radius:10px;background:linear-gradient(145deg,#071114,#03080b);color:#dfffee;font:600 24px ui-monospace,SFMono-Regular,monospace;box-shadow:0 8px 24px #0007,0 1px #a5fff21a inset;transition:border-color .18s,box-shadow .18s,transform .18s}.otp-cells span.filled{border-color:#65d7b9;box-shadow:0 0 0 2px #4ee3b715,0 0 18px #38d89c22}.otp-cells span.active{transform:translateY(-3px);border-color:#a4ffe2}.otp-native-input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;outline:0;opacity:.01;background:transparent;color:transparent;caret-color:transparent;cursor:text}.mfa-panel.verifying .otp-cells span{animation:otpCollapse .8s cubic-bezier(.48,-.18,.3,1.25) forwards;animation-delay:calc(var(--i)*.035s)}.mfa-panel.otp-error .otp-entry{animation:otpShake .38s ease}.mfa-panel.otp-error .otp-cells span{border-color:#ff4d5b;box-shadow:0 0 17px #ff263555}.mfa-panel.verified>:not(.mfa-success){display:none!important}.mfa-success{padding:42px 0 28px;text-align:center}.mfa-success h3{margin:18px 0 8px;color:#9affc9;font-size:25px}.mfa-success p{margin:0;color:#75ae90;font-size:12px}.success-check{display:grid;place-items:center;width:72px;height:72px;margin:auto;border:1px solid #55f59a;border-radius:20px;background:#0b3422;box-shadow:0 0 0 10px #32ff7c08,0 0 42px #28ff7733;animation:successIn .7s cubic-bezier(.16,1.5,.35,1)}.success-check svg{width:38px;fill:none;stroke:#74ffad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;animation:checkDraw .55s .25s both}
#app[data-state="mfa"],#app[data-state="verified"]{--cyan:#55f59a;--mint:#55f59a;--line:#285f43;--muted:#78a98b}
#app[data-state="mfa"] .login-shell,#app[data-state="verified"] .login-shell{border-color:#2e704b;box-shadow:0 32px 80px #000b,0 0 28px #28d87815}
#app[data-state="mfa"] .panel-line,#app[data-state="verified"] .panel-line{background:linear-gradient(90deg,transparent,#55f59a,transparent);box-shadow:0 0 16px #55f59a}
#app[data-state="rejected"],#app[data-state="banned"]{--cyan:#ff3b45;--mint:#ff3b45;--line:#6d252a;--muted:#b55258;--text:#ff5b63}
#app[data-state="rejected"] *,#app[data-state="banned"] *{color:#ff5b63!important;border-color:#7b292f!important;stroke:#ff5b63!important}
#app[data-state="rejected"] .login-shell,#app[data-state="banned"] .login-shell{background:linear-gradient(145deg,#1b090cdf,#0d0406ed);box-shadow:0 32px 80px #000b,0 0 35px #ff263522}
#app[data-state="rejected"] .panel-line,#app[data-state="banned"] .panel-line{background:linear-gradient(90deg,transparent,#ff3b45,transparent);box-shadow:0 0 18px #ff3b45}
#app[data-state="rejected"] .ambient-grid,#app[data-state="banned"] .ambient-grid{background-image:linear-gradient(#ff3b450d 1px,transparent 1px),linear-gradient(90deg,#ff3b450d 1px,transparent 1px)}
#app[data-state="rejected"] .welcome-copy h1{font-size:clamp(34px,3.6vw,52px)}
#app[data-state="banned"] .welcome-copy h1{font-size:clamp(29px,3.1vw,44px);line-height:1.12}
footer{position:absolute;left:38px;right:38px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:#354e4d;font:8px ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}
.notice{position:absolute;left:50%;bottom:55px;transform:translate(-50%,8px);opacity:0;z-index:8;padding:11px 16px;border:1px solid #38615b;border-radius:9px;background:#081713ed;color:#bde3dd;font-size:12px;transition:.2s;pointer-events:none}.notice.show{opacity:1;transform:translate(-50%,0)}
.render-error{position:absolute;left:8%;top:64%;max-width:380px;color:#ffc589;font-size:13px;line-height:1.6}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes otpCollapse{0%{transform:none;opacity:1}55%{transform:translateX(var(--tx)) translateY(-16px) rotate(var(--rot)) scale(.9);opacity:1}100%{transform:translateX(var(--tx)) translateY(-5px) rotate(var(--rot)) scale(.25);opacity:0}}
@keyframes otpShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes successIn{from{opacity:0;transform:scale(.45) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes checkDraw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@media(max-width:1180px){#app{min-height:820px;overflow:auto}.topbar{left:20px;right:20px}.system-status{display:none}.welcome-copy{position:relative;left:auto;top:auto;width:min(680px,calc(100% - 40px));transform:none;margin:95px auto 0;text-align:center}.welcome-copy .eyebrow,.robot-state{justify-content:center}.welcome-copy p{margin:auto}.welcome-copy h1,#app[data-state="rejected"] .welcome-copy h1{font-size:clamp(36px,7vw,58px)}#app[data-state="banned"] .welcome-copy h1{font-size:clamp(28px,5.4vw,44px)}.login-shell{position:relative;right:auto;top:auto;width:min(430px,calc(100% - 28px));transform:none;margin:220px auto 90px;padding:28px 24px}.ambient-grid{mask-image:linear-gradient(#000,transparent 85%)}footer{left:20px;right:20px}footer span:first-child,footer span:last-child{display:none}footer{justify-content:center}}
@media(max-width:520px){#app{min-height:760px}.welcome-copy{margin-top:88px}.welcome-copy p{font-size:13px;padding:0 12px}.login-shell{margin-top:210px;border-radius:16px}.login-header{margin-bottom:22px}.login-header h2{font-size:20px}.otp-cells{gap:6px}.otp-cells span{width:42px;height:54px;font-size:22px}.mfa-qr-wrap{grid-template-columns:96px 1fr}.mfa-qr-wrap img{width:96px;height:96px}.secret-row{align-items:stretch;flex-direction:column}.secret-action{align-self:stretch;text-align:center}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

/* OTP cell animation variables (moved out of inline styles for CSP) */
#otpCells span:nth-child(1){--i:0;--tx:140px;--rot:-55deg}#otpCells span:nth-child(2){--i:1;--tx:84px;--rot:-32deg}#otpCells span:nth-child(3){--i:2;--tx:28px;--rot:-14deg}#otpCells span:nth-child(4){--i:3;--tx:-28px;--rot:14deg}#otpCells span:nth-child(5){--i:4;--tx:-84px;--rot:32deg}#otpCells span:nth-child(6){--i:5;--tx:-140px;--rot:55deg}

/* Language switch (login top bar) */
.topbar-right{display:flex;align-items:center;gap:22px}
.lang-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#071217b3;backdrop-filter:blur(10px)}
.lang-switch button{min-width:38px;height:26px;padding:0 10px;border:0;border-radius:999px;background:none;color:#8fb9af;font:600 10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;cursor:pointer;transition:background .2s,color .2s}
.lang-switch button[lang="zh-CN"]{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;letter-spacing:.04em;font-size:11px}
.lang-switch button:hover{color:#e0f5f4}
.lang-switch button.active{background:var(--mint);color:#04120f}
.lang-switch button{white-space:nowrap}
@media(max-width:520px){.lang-switch button{min-width:30px;padding:0 8px}.topbar .brand{letter-spacing:.2em;font-size:15px}}

.legal-links{display:flex;gap:18px;font:600 9.5px ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;text-transform:uppercase}
.legal-links a{color:#5f8f88;text-decoration:none;transition:color .2s}
.legal-links a:hover{color:#bfeee6}
@media(max-width:1180px){footer{position:relative;left:auto;right:auto;bottom:auto;margin:-58px 0 0;padding:0 0 max(22px,env(safe-area-inset-bottom))}}