.passkey-account { max-width: 680px; margin: 0 auto; }
.passkey-account h1 { font-size: 26px; letter-spacing: 0; }
.passkey-login { margin-top: 18px; }
.passkey-help { margin: 12px 0 20px; font-size: 14px; line-height: 1.55; }
.passkey-help summary { cursor: pointer; min-height: 44px; padding: 9px 0; }
.passkey-question { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; margin-right: 5px; }
.passkey-help p { margin: 10px 0; }
.passkey-help a { text-decoration: underline; }
.passkey-form { margin: 24px 0; max-width: 460px; }
.passkey-form .form-row { display: grid; gap: 7px; }
.passkey-form .field { width: 100%; min-width: 0; }
.passkey-form small, .passkey-list small { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
.passkey-list { list-style: none; padding: 0; margin: 0 0 24px; }
.passkey-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border, #777); }
.passkey-list li > div { min-width: 0; overflow-wrap: anywhere; }
.passkey-account .btn, .passkey-login .btn { white-space: normal; min-height: 44px; }
.passkey-status { min-height: 24px; font-size: 14px; overflow-wrap: anywhere; }
.passkey-password-fallback summary, .passkey-reauth-password summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.passkey-password-fallback form { margin-top: 12px; }
.passkey-reauth { margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border, #777); border-bottom: 1px solid var(--border, #777); }
.passkey-reauth h2 { font-size: 18px; }
[data-passkeys] button:disabled { opacity: .6; cursor: wait; }
[data-passkeys] :focus-visible { outline: 2px solid var(--accent, #168a77); outline-offset: 3px; }