.passkey-panel{max-width:620px;min-width:0}
.login-card .passkey-panel{width:100%;margin-top:24px}
.login-card .passkey-primary{width:100%;font-weight:600}
.login-card .passkey-hint{font-size:13px;line-height:1.5;margin:12px 0 20px}
.login-card [data-passkey-login]{margin-top:12px}
.login-card .password-secondary{display:block;width:100%;margin-top:0;background:transparent;color:inherit;border:1px solid #9aaec2;font-weight:600}
.login-card .password-secondary:hover{background:rgba(81,130,177,.08)}
.login-card .password-secondary:focus-visible{outline:2px solid #2589eb;outline-offset:3px}
.password-login-form[hidden]{display:none!important}
.login-card .password-login-form{margin-bottom:0}
.passkey-later{display:inline-block;padding:12px 24px;color:inherit}
.passkey-fields{margin:20px 0;max-width:440px}
.passkey-fields [hidden]{display:none!important}
.passkey-panel [data-passkey-status]{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.passkey-panel .passkey-error{color:#a33232!important}
.passkey-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #d6e0e9}
.passkey-row>div{flex:1;min-width:0;overflow-wrap:anywhere}
.passkey-row small{display:block;margin-top:5px;color:#73859b}
.passkey-remove{color:#a33232;background:transparent}
.passkey-delete-form{flex-basis:100%;margin:4px 0}
.passkey-panel button:disabled{opacity:.6;cursor:default}
html[data-theme="dark"] .passkey-panel .passkey-error,html[data-theme="dark"] .passkey-remove{color:#ffaaa5!important}
html[data-theme="dark"] .passkey-row{border-color:#354b60}
html[data-theme="dark"] .passkey-row small{color:#afc1d4}
@media(max-width:480px){.login-v3 .login-card{padding:28px 22px}.passkey-panel button{min-height:44px}.passkey-panel input{font-size:16px}}
html[data-theme="dark"] .login-card .password-secondary{background:transparent;color:#e4edf8;border-color:#70879e}
html[data-theme="dark"] .login-card .password-secondary:hover{background:rgba(164,202,240,.08)}


/* Settings: appearance, passkeys and password each have their own bounded section. */
.account-page{max-width:1100px}
.account-heading{margin-bottom:26px}
.account-heading h1{margin-bottom:10px}
.account-identity{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;color:var(--home-muted);font-size:13px;overflow-wrap:anywhere}
.account-identity strong{color:var(--home-ink);font-weight:600}
.account-panel{min-width:0;padding:24px;border:1px solid var(--home-border);border-radius:12px;background:var(--home-card);color:var(--home-ink)}
.account-section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.account-section-icon{flex:0 0 24px;color:var(--home-accent);padding-top:1px}
.account-section-icon svg{display:block;width:22px;height:22px}
.account-panel h2,.account-panel h3{font-size:17px;line-height:1.4;margin:0 0 7px;letter-spacing:0;font-weight:650}
.account-panel .muted,.account-help{font-size:13px;line-height:1.55;color:var(--home-muted);margin:0}
.account-security-heading h2{font-size:18px;font-weight:650;margin:0 0 16px;color:var(--home-ink)}
.account-security-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.account-page .account-subheading{margin:0 0 12px;font-size:14px;font-weight:650;color:var(--home-ink)}
.account-page .passkey-panel{max-width:none}
.account-page .account-form{max-width:none;margin:0}
.account-page .account-form label{display:block;font-size:13px;font-weight:500}
.account-page .account-form input{margin:8px 0 18px}
.account-page .account-form button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;font-size:13px}
.account-page .account-form button svg{width:17px;height:17px}
.account-page .passkey-fields{margin-top:16px}
.account-page .passkey-fields button{margin-top:0}
.account-page .passkey-add-section{margin-top:22px;padding-top:22px;border-top:1px solid var(--home-border)}
.account-page .passkey-row{gap:10px;padding:12px 0;border-color:var(--home-border)}
.account-page .passkey-row:first-child{padding-top:0}
.account-page .passkey-row:last-child{border-bottom:0;padding-bottom:0}
.account-page .passkey-row strong{font-size:13px;font-weight:600}
.account-page .passkey-row small{font-size:12px;line-height:1.5;color:var(--home-muted)}
.account-page .passkey-remove{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;min-height:36px;padding:8px;border:1px solid var(--home-border);border-radius:8px;color:var(--home-danger);background:transparent}
.account-page .passkey-remove svg{width:17px;height:17px}
.account-page .passkey-remove[hidden]{display:none}
.account-page .passkey-delete-form{flex-basis:100%;padding:14px;background:var(--home-visual);border-radius:8px;margin:4px 0 0}
.account-page .passkey-delete-form input{background:var(--home-card)}
.account-page .passkey-delete-actions{display:flex;flex-wrap:wrap;gap:10px}
.account-page .passkey-confirm-remove{background:var(--home-danger);color:var(--home-card)}
.account-page .passkey-cancel-remove{background:transparent;color:var(--home-ink);border:1px solid var(--home-border)}
.account-page .account-password .account-help{margin:-7px 0 20px}
.account-page [data-passkey-status]:not([hidden]){margin:18px 0 0;padding:12px;background:var(--home-visual);border-radius:8px}
@media(max-width:1050px){.account-security-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .account-heading{margin-bottom:20px}
 .account-identity{display:grid;gap:5px}
 .account-panel{padding:18px}
 .account-section-heading{gap:10px}
   .account-page .passkey-remove{width:44px;min-height:44px;flex-basis:44px;padding:12px}
 .account-page .account-form button{min-height:44px}
}