/* Use the original wordmark's red for sign-in accents. */
#loginPanel{--login-red:#ff1e1e}
body:has(#loginPanel:not([hidden])){background:#08090b;color:#f1f2f5}
body:has(#loginPanel:not([hidden])) main{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:100vh;min-height:100svh;max-width:none;padding:48px 24px}
body:has(#loginPanel:not([hidden])) main>:not(#loginPanel):not(#notice){display:none!important}
body:has(#loginPanel:not([hidden])) #notice{order:2;width:min(100%,400px);margin:0;border-color:#393c46;background:#17191f;color:#d5d7df;font-size:13px}
body:has(#loginPanel:not([hidden])) #notice.error{border-color:#ff1e1e;background:#261515;color:#ffb9b9}
.page-header:has(>#headerActions){justify-content:flex-end}
#loginPanel{order:1;width:min(100%,400px);max-width:400px;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.login-logo{display:block;width:260px;max-width:82%;height:auto;margin:0 auto 34px;object-fit:contain;filter:drop-shadow(0 0 5px #ff1e1e4d) drop-shadow(0 0 20px #ff1e1e2e);transition:filter .3s}
.login-logo:hover{filter:drop-shadow(0 0 7px #ff1e1eaa) drop-shadow(0 0 28px #ff1e1e66)}
.login-card{padding:32px;border:1px solid #ff1e1e33;border-radius:14px;background:#121419;box-shadow:0 18px 60px #0004,0 0 44px #ff1e1e08}
#loginForm{display:grid;gap:22px;margin:0}
#loginForm>label{gap:8px;color:#d4d6de;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.01em}
#loginForm input:not([type=checkbox]){display:block;width:100%;height:48px;min-width:0;padding:12px 13px;border:1px solid #363944;border-radius:8px;background:#0b0d11;color:#f1f2f5;font-size:15px;font-weight:400;line-height:22px;caret-color:#f05a65;transition:border-color .15s,background .15s}
#loginForm input:not([type=checkbox]):hover{border-color:#575b68}
#loginForm input:not([type=checkbox]):focus{border-color:var(--login-red);outline:2px solid #ff1e1e38;outline-offset:2px;box-shadow:0 0 16px #ff1e1e19}
#loginForm input:-webkit-autofill{-webkit-text-fill-color:#f1f2f5;box-shadow:0 0 0 1000px #11131a inset;caret-color:#f05a65}
#loginForm .remember-user{display:flex;align-items:center;gap:10px;justify-self:start;min-height:20px;margin:0;color:#b5b8c4;font-size:13px;font-weight:400;cursor:pointer}
#loginForm #rememberUser{appearance:none;display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;margin:0;padding:0;border:1px solid #555a68;border-radius:4px;background:#0b0d11;cursor:pointer}
#rememberUser::after{content:"";display:none;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
#loginForm #rememberUser:checked{border-color:var(--login-red);background:var(--login-red)}
#rememberUser:checked::after{display:block}
#loginForm #rememberUser:hover{border-color:var(--login-red)}
#loginForm #rememberUser:focus{outline:2px solid var(--login-red);outline-offset:3px}
#loginForm #connect{display:flex;align-items:center;justify-content:center;width:100%;height:48px;min-height:48px;margin:0;padding:0 16px;border:1px solid #34373f;border-radius:8px;background:#16181c;color:#fff;font-size:14px;font-weight:650;line-height:20px;letter-spacing:.02em;box-shadow:0 4px 12px #0002;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
#loginForm #connect:hover:not(:disabled){border-color:#484c56;background:#22252a;color:#fff;box-shadow:0 4px 14px #0003}
#loginForm #connect:active:not(:disabled){border-color:#3a3e46;background:#1c1e23;color:#fff;transform:translateY(1px)}
#loginForm #connect:focus-visible{outline:2px solid var(--login-red);outline-offset:3px}
#loginForm #connect:disabled{opacity:.55;cursor:default}
@media(max-width:480px){body:has(#loginPanel:not([hidden])) main{padding:32px 20px}.login-card{padding:26px 24px}.login-logo{width:242px;margin-bottom:30px}}
@media(max-height:540px){body:has(#loginPanel:not([hidden])) main{padding-top:28px;padding-bottom:28px}.login-logo{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.login-logo,#loginForm input,#loginForm #connect{transition:none}}