/* Compact sign-in card, scoped away from authenticated portal screens. */
body:has(#login:not([hidden])){background:radial-gradient(ellipse at 20% 25%,#dfeaff,transparent 70%),#f5f8fd}
body:has(#login:not([hidden])) main{display:grid;align-content:center;min-height:100vh;min-height:100svh;max-width:none;padding:24px 16px}
#login{width:100%;max-width:320px;margin:0 auto;padding:20px;border:1px solid #d8e3f7;border-radius:20px;box-shadow:0 16px 48px #284d8710}
#login .login-heading{margin-bottom:14px}
#login .login-eyebrow{font-size:11px;font-weight:500;letter-spacing:2px}
#login .login-heading h2{font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.8px;margin:8px 0 6px}
#login .login-heading p{font-size:13px;line-height:1.5;font-weight:400;margin:0}
#login input,#login input::placeholder,#login .login-help,#login .login-help span{font-weight:400}
#login label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#login .login-label-hint{color:var(--muted);font-size:12px}
#login .login-field{position:relative;margin-bottom:8px}
#login .login-field>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#718097;stroke-width:1.7;pointer-events:none}
#login input{height:40px;min-height:40px;padding:8px 12px 8px 38px;border-radius:9px;border:1px solid #d7e0ec;background:#fff;font-size:16px}
#login input::placeholder{font-size:16px;color:#9aa5b5}
#login #account{background:#fff}
#login #password{padding-right:48px}
#login #togglePassword{display:grid;place-items:center;right:1px;top:1px;width:44px;height:38px;min-height:38px;padding:0;border-radius:8px;color:#68758a}
#login #togglePassword svg{width:18px;height:18px;stroke-width:1.7}
#login .eye-slash{display:block}
#login #togglePassword[aria-pressed=true] .eye-slash{display:none}
#login #togglePassword:hover{background:#e7eefb}
#login .error{font-size:12px;line-height:1.45;margin:10px 0 0}
#login .primary{min-height:44px;margin-top:14px;padding:9px 16px;border-radius:99px;background:#1455f5;border-color:#1455f5;font-size:16px;font-weight:500}
#login .primary:hover:not(:disabled){background:#1048d8}
#login .login-help{margin:14px 0 0;font-size:12px;line-height:1.6}
#login .login-help span{font-size:11px}
body.dark:has(#login:not([hidden])){background:var(--bg)}
.dark #login{border-color:var(--line)}
.dark #login input,.dark #login #account{background:var(--soft);border-color:var(--line)}
.dark #login .login-field>svg,.dark #login #togglePassword{color:var(--muted)}
.dark #login #togglePassword:hover{background:var(--line)}
@media(max-width:480px){
 body:has(#login:not([hidden])) main{padding:16px 12px}
 #login{width:calc(100% - 24px);padding:18px 16px;border-radius:18px}
 #login .login-heading h2{font-size:25px}
 #login .login-heading{margin-bottom:14px}
}