.passkey-login { margin-top: 24px; }
.login-progress { align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid #dce3ed; border-radius: 8px; background: #f7f9fc; color: #263b56; }
.login-progress:not([hidden]) { display: flex; }
.login-progress .spinner-border { flex-shrink: 0; }
.login button[aria-busy="true"] { cursor: wait; }
.passkey-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #667c9a; font-size: 13px; }
.passkey-divider::before, .passkey-divider::after { content: ""; height: 1px; flex: 1; background: #dce3ed; }
.passkey-divider span { white-space: nowrap; }
.passkey-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 42px; padding: 10px 16px; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; color: #263b56; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.passkey-button:hover { border-color: #8b9db5; background: #f7f9fc; }
.passkey-button:focus-visible, .passkey-management button:focus-visible { outline: 3px solid #799ac4; outline-offset: 3px; }
.passkey-button:disabled { opacity: .6; cursor: wait; }
.passkey-status { margin-top: 12px; overflow-wrap: anywhere; }
.passkey-status:empty { display: none; }
.passkey-status.is-error { color: #a32020; }
.passkey-status.is-success { color: #216b3b; }
.passkey-card { padding: 24px; margin: 24px 0; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; }
.passkey-card h4 { margin-top: 0; }
.passkey-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.passkey-card-heading h4 { margin-bottom: 0; }
.passkey-help-toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #263b56; font: inherit; cursor: pointer; }
.passkey-help-toggle:hover, .passkey-help-toggle[aria-expanded="true"] { background: #f1f5f9; }
.passkey-help-content { padding: 16px; margin-bottom: 16px; border: 1px solid #dce3ed; border-radius: 8px; background: #f7f9fc; overflow-wrap: anywhere; }
.passkey-help-content h5 { margin: 16px 0 8px; color: #263b56; font-size: 16px; font-weight: 700; }
.passkey-help-content li + li { margin-top: 6px; }
.passkey-help-content p:last-child { margin-bottom: 0; }
.passkey-item + .passkey-item { padding-top: 20px; margin-top: 20px; border-top: 1px solid #e5e9ef; }
.passkey-actions { display: flex; align-items: center; gap: 10px; }
.passkey-actions input { min-width: 0; }
.passkey-meta { margin: 10px 0; color: #64748b; font-size: 13px; }
@media (max-width: 575px) { .passkey-card { padding: 16px; } .passkey-actions { flex-wrap: wrap; } .passkey-actions input { flex-basis: 100%; } }