.passkey-login{margin-top:1.3rem;border-top:1px solid #ddd;padding-top:1.3rem}.passkey-page{max-width:850px;margin:2rem auto;padding:0 1.2rem}.passkey-panel{background:#fff;border:1px solid #ddd;border-radius:16px;padding:1.4rem;margin:1.5rem 0}.passkey-panel input{display:block;width:100%;margin:.5rem 0 1rem}.passkey-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid #ddd;padding:1rem 0;overflow-wrap:anywhere}.passkey-row p{font-size:.9rem;color:#596273}.passkey-page h1{margin-top:1.5rem}[data-passkey-status]{white-space:pre-line;overflow-wrap:anywhere}[data-passkey-status].passkey-error{color:#9b1010}button:disabled{opacity:.6;cursor:wait}@media(max-width:500px){.passkey-row{align-items:flex-start;flex-direction:column}}

/* Production login: use the existing brand colour. */
.login-card .passkey-login-first{margin-top:0;border-top:0;padding-top:0}
.login-card .password-login-secondary{margin-top:1.3rem;border-top:1px solid #ddd;padding-top:1.3rem}
.login-card button.passkey-primary{background:var(--brand);color:#fff;border:1px solid var(--brand)}
.login-card button.password-secondary{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.login-card button.passkey-primary:hover{filter:brightness(.9)}
.login-card button.password-secondary:hover{background:#edf5f0;color:var(--brand)}
.login-card button.passkey-primary:focus-visible,.login-card button.password-secondary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.login-card button.password-secondary{white-space:normal;text-align:center;justify-content:center}
@media(max-width:760px){
 .login-layout .welcome .login-mobile-hide,.login-card .login-mobile-hide{display:none}
 .login-layout .welcome{display:none}
 .login-layout{gap:16px}
 .login-card .brand{margin-bottom:20px}
 .login-card form{margin-top:20px}
}