:root{color-scheme:dark;--login-gold:#c9a55c;--login-text:#eeede6;--login-muted:#aaa99e}
*{box-sizing:border-box}
.login-page{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;color:var(--login-text);background:radial-gradient(ellipse at 50% 32%,#c9a55c12,transparent 58%),radial-gradient(#c9a55c26 .7px,transparent 1px),#000;background-size:auto,37px 37px,auto;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.login-card{position:relative;width:min(430px,100%);padding:38px;border:1px solid #c9a55c40;border-radius:22px;background:linear-gradient(145deg,#191a15ee,#090a09f7);box-shadow:0 30px 100px #0008,0 0 70px #c9a55c05}
.login-card>img{display:block;width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 0 12px #c9a55c40)}
.login-star{position:absolute;top:46px;right:42px;font-size:36px;color:#f4e6bc;text-shadow:0 0 35px #c9a55c70}
.login-card .login-eyebrow{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;color:#c9b782;margin:40px 0 14px}
.login-card h1{font-size:33px;font-weight:500;letter-spacing:-1.2px;line-height:1.2;margin:0 0 22px}
.login-card p{color:var(--login-muted)}
.login-card label{display:block;font-size:12px;margin:18px 0 7px;color:#d9d7cb}
.login-card input{display:block;width:100%;border:1px solid #ffffff35;border-radius:8px;background:#080907;color:var(--login-text);padding:13px;font:inherit;caret-color:var(--login-gold)}
.login-card input::placeholder{color:#929286}
.login-card input:autofill{box-shadow:0 0 0 100px #171813 inset;-webkit-text-fill-color:var(--login-text)}
.login-card :is(input,button,a):focus-visible{outline:2px solid #d5b871;outline-offset:4px}
.login-card button{width:100%;margin-top:24px;padding:13px;border:1px solid var(--login-gold);border-radius:8px;background:var(--login-gold);color:#111;cursor:pointer;font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:background .15s,border-color .15s}
.login-card button:hover:not(:disabled){background:#d5b871;border-color:#d5b871}
.login-card button:disabled{opacity:.5;cursor:wait}
.login-card :is(#login-message,#mfa-message){color:#e9bd87;min-height:22px;font-size:12px;overflow-wrap:anywhere}
.login-card .login-foot{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.5px;color:#9d9c90;margin-top:32px}
.login-card a{color:#dec485;text-underline-offset:4px}
.login-card a:hover{color:#f4e6bc}
.login-card #mfa-logout{background:transparent;color:#c5c2b4;border-color:#ffffff30}
.login-card #mfa-logout:hover{background:#ffffff07;border-color:#c9a55c70}
.login-card :is(#mfa-secret,#mfa-codes){padding:12px;border:1px solid #c9a55c30;border-radius:8px;background:#080907;color:#e8d8ae;font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.login-card #mfa-recovery h2{font-size:23px;font-weight:500;line-height:1.3}
@media(max-width:500px){.login-page{padding:18px}.login-card{padding:28px 24px}.login-card h1{font-size:29px}.login-star{right:28px;top:35px}}
@media(prefers-reduced-motion:reduce){.login-card button{transition:none}}
/* BECO workspace materials, shared by sign-in and MFA. */
.login-page{background:radial-gradient(ellipse at 90% 85%,#96723d25,transparent 50%),radial-gradient(ellipse at 12% 12%,#4b608a28,transparent 55%),#080b12;color:#ecf1fc}.login-card{border:1px solid #ffffff28;border-radius:30px;background:linear-gradient(145deg,#29304099,#111721d9);backdrop-filter:blur(24px);box-shadow:0 30px 100px #0008}.login-card input{border-radius:14px;background:#080d16;color:#edf3ff}.login-card button{border-radius:100px;background:linear-gradient(130deg,#f3dbaf,#c6a465);border-color:#dbc391}.login-card p{color:#afbbcf}.login-card label{color:#d2dbea}

.login-card .remember-device{display:flex;align-items:center;gap:12px;cursor:pointer;margin-top:22px;font-size:13px}.login-card .remember-device input{width:18px;height:18px;flex:none;accent-color:#d0ad6c;padding:0}.remember-device small{display:block;color:#afbbcf;font-size:11px;margin-top:2px}