:root{color-scheme:dark;--background:#222221;--panel:#3b3b39;--text:#f4f4f4;--muted:#c7c7c3;--purple:#6c63e6;--green:#7ca463;font-family:"Poppins","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--background);color:var(--text);font-size:14px;line-height:1.7}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,input:focus-visible{outline:2px solid #c5c0ff;outline-offset:4px}button,input{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}svg{display:block}::selection{background:#756bb2;color:#fff}[hidden]{display:none!important}
.login-shell{display:flex;flex-direction:column;min-height:100svh;width:100%;padding:32px 44px 25px}.login-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-block;padding:7px 22px;border-radius:100px;background:var(--purple);font-size:16px;line-height:1.75;color:#fff}.space-label{display:flex;align-items:center;gap:8px;color:#c6c6bf;font-size:12px}.space-label>span,.card-footer>span{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:80px;width:min(1030px,100%);margin:auto;flex:1;padding:70px 0 80px}.welcome{min-width:0}.eyebrow{margin:0 0 22px;color:#c4c4bc;font-size:13px;letter-spacing:.12em}.welcome h1{margin:0;font-size:clamp(34px,4.1vw,58px);font-weight:400;line-height:1.42;letter-spacing:-.04em}.welcome h1>span{color:#b3cf9f}.welcome-copy{margin:25px 0 0;color:var(--muted);font-size:15px;line-height:2}.learning-path{display:flex;gap:8px;width:min(280px,100%);margin-top:49px}.learning-path>span{height:7px;flex:1;border-radius:100px;background:#46543d}.learning-path>span:nth-child(-n+2){background:var(--green)}.learning-path>span:nth-child(3){background:linear-gradient(to right,var(--green) 42%,#46543d 42%)}.welcome-note{margin:11px 0 0;color:#aaa99f;font-size:11px;letter-spacing:.1em}
.login-card{min-width:0;padding:36px 34px 25px;border-radius:28px;background:var(--panel)}.lock-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:23px;border-radius:16px;background:#514b70;color:#d9d2ff}.lock-icon svg{width:24px;height:24px}.login-card h2{margin:0;font-size:27px;line-height:1.5;font-weight:500;letter-spacing:-.02em}.card-intro{margin:9px 0 29px;color:var(--muted);font-size:13px}.login-card label{display:block;margin-bottom:9px;font-size:13px;color:#e1e1db}.key-field{display:flex;align-items:center;min-width:0;min-height:53px;border:1px solid #74746d;border-radius:12px;background:#292928;transition:border-color 160ms ease}.key-field:focus-within{border-color:#bab0ed}.key-field:has(input[aria-invalid=true]){border-color:#e9a88d}.key-field input{width:100%;min-width:0;height:51px;border:0;border-radius:12px;padding:12px 4px 12px 15px;background:transparent;color:var(--text);font-family:ui-monospace,"Cascadia Code",monospace;font-size:15px;line-height:1.6}.key-field input::placeholder{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#afafa7;opacity:1}.key-field input:focus-visible{outline-offset:0}.visibility-toggle{display:grid;place-items:center;width:48px;height:48px;margin:0 2px;flex:0 0 48px;border:0;border-radius:10px;background:transparent;color:#cfcec5;transition:background-color 160ms ease,color 160ms ease}.visibility-toggle:hover{background:#ffffff08;color:#fff}.visibility-toggle svg{width:21px;height:21px}.eye-slash{display:none}.visibility-toggle[aria-pressed=true] .eye-slash{display:block}.field-hint{margin:9px 0 0;color:#bebeb4;font-size:11px;line-height:1.8}.login-error{margin:15px 0 0;padding:10px 12px;border:1px solid #b5806538;border-radius:10px;background:#9a5f341a;color:#ffcfba;font-size:12px;line-height:1.8;overflow-wrap:anywhere}.submit-button{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:48px;margin-top:25px;padding:11px 16px;border:0;border-radius:100px;background:var(--purple);color:#fff;font-size:14px;transition:background-color 160ms ease,opacity 160ms ease}.submit-button:hover:not(:disabled){background:#665ddf}.submit-button svg{width:18px;height:18px}.submit-button[aria-busy=true] svg{visibility:hidden}.card-footer{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:27px;padding-top:19px;border-top:1px solid #ffffff12;color:#c6c6bc;font-size:10px}.card-footer>span{width:5px;height:5px}.page-footer{color:#acada3;text-align:center;font-size:11px}
@media(max-width:850px){.login-shell{padding:27px 28px 23px}.login-layout{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:38px;padding:65px 0}.welcome h1{font-size:38px}.welcome-copy{font-size:13px}.login-card{padding:30px 26px 24px}.learning-path{margin-top:36px}}
@media(max-width:620px){.login-shell{padding:22px 20px max(22px,env(safe-area-inset-bottom))}.login-header{gap:12px}.brand{padding:7px 18px;font-size:15px}.space-label{font-size:10px;gap:6px}.login-layout{grid-template-columns:minmax(0,1fr);gap:27px;padding:39px 0 31px;width:min(420px,100%);align-content:center}.eyebrow{margin-bottom:11px;font-size:11px}.welcome h1{font-size:32px;line-height:1.4}.welcome h1 br{display:none}.welcome-copy{margin-top:13px;font-size:12px;line-height:1.9}.welcome-copy br{display:none}.learning-path,.welcome-note{display:none}.login-card{padding:27px 24px 22px;border-radius:24px}.lock-icon{width:42px;height:42px;border-radius:14px;margin-bottom:18px}.lock-icon svg{width:22px;height:22px}.login-card h2{font-size:25px}.card-intro{margin-bottom:24px;font-size:12px}.key-field input{font-size:16px}.card-footer{margin-top:23px;font-size:10px}.page-footer{font-size:10px}}
@media(max-width:360px){.login-shell{padding-inline:15px}.login-card{padding-inline:19px}.welcome h1{font-size:29px}.space-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.brand,.login-card,.key-field,.submit-button{border:1px solid ButtonText}.space-label>span,.card-footer>span{background:Highlight}}