body:has(#login:not([hidden])){background:#f5f7fa;color:#2b2e4d}
body:has(#login:not([hidden]))>header{background:transparent;border-bottom:1px solid #e2e8f0;height:80px;padding:0 5vw}
body:has(#login:not([hidden])) .brand{font-size:20px;font-weight:600;letter-spacing:1px}
body:has(#login:not([hidden])) .brand img{width:30px;height:30px}
body:has(#login:not([hidden])) .brand span{font-size:12px;font-weight:400;letter-spacing:0}
body:has(#login:not([hidden])) main{padding:0 20px}
body:has(#login:not([hidden])) #login{max-width:460px;margin:8vh auto 10vh;padding:38px;border:1px solid #e2e8f0;box-shadow:0 18px 60px #263a4209;border-radius:8px;background:#fff}
#login .eyebrow{font-size:10px;letter-spacing:2px;color:#7065a4}#login h1{font-size:32px;font-weight:500;letter-spacing:-1px;margin:15px 0}#login p.muted{font-size:14px;line-height:1.7;color:#63717b}#login input{padding:12px;border:1px solid #cad3d6;background:#f8faff;border-radius:4px}#login label{font-size:12px;color:#52646c;margin-top:18px}#login button{width:100%;background:#2b2e4d;color:white;padding:13px;margin-top:22px;border:0;border-radius:4px}#login button:hover{background:#42466c}#login button:disabled{opacity:.6}#loginError{color:#a33425;font-size:13px;line-height:1.5}#login .back-home{display:inline-block;margin-top:20px;color:#7065a4;font-size:12px}
@media(max-width:480px){body:has(#login:not([hidden])) #login{padding:26px;margin:5vh auto}body:has(#login:not([hidden])) .brand span{display:none}}

/* Light sign-in composition in the landing page's navy and lavender palette. */
body:has(#login:not([hidden])){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 18% 18%,#eeeaf880,transparent 48%),#f8f9fc}
body:has(#login:not([hidden]))>header{flex:none;height:72px;border-bottom:1px solid #e9eaf2;background:#ffffff80}
body:has(#login:not([hidden]))>main{flex:1;display:grid;place-items:center;padding:32px 20px;min-height:0;width:100%}
body:has(#login:not([hidden])) #login{width:min(100%,420px);max-width:420px;margin:0;padding:32px;border:1px solid #e6e7f0;border-radius:14px;box-shadow:0 10px 36px #2b2e4d06}
body:has(#login:not([hidden]))>footer{flex:none;margin-top:auto;width:100%;padding:12px 5vw;background:transparent;border-top:1px solid #e9eaf2;color:#7b8095}
#login h1{font-size:28px;font-weight:550;letter-spacing:-.6px}#login input{border-color:#dfe2ec;border-radius:7px;background:#fafbfe}#login input:focus{border-color:#8b7cb4;outline:2px solid #8b7cb420;outline-offset:1px}#login button{border-radius:7px;background:#343651}
@media(max-width:480px){body:has(#login:not([hidden]))>header{height:60px}body:has(#login:not([hidden]))>main{padding:24px 16px}body:has(#login:not([hidden])) #login{padding:24px}}
body:has(#login:not([hidden])) #notice:empty{display:none}