/* ---- V2: Passkeys in the Vault: list badge and the passkey panel. Colours from the shared variables. */
.avatar.pk-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.avatar.pk-icon svg { width: 18px; height: 18px; }
.pk-badge { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .3px; vertical-align: 1px; }
@media (min-width: 700px) { #pk-panel { width: 460px; } }
.pk-hero { display: flex; align-items: center; gap: 12px; }
.pk-hero .avatar { width: 44px; height: 44px; border-radius: 12px; }
.pk-hero-text { display: flex; flex-direction: column; min-width: 0; }
.pk-hero-text b { font-size: 16px; font-weight: 600; }
.pk-hero-text small { color: var(--muted); font-size: 13px; }
.pk-facts { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 10px 16px; margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.pk-facts dt { color: var(--muted); font-size: 13px; }
.pk-facts dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pk-note { color: var(--muted); font-size: 13px; line-height: 19px; }
#pk-panel .panel-foot .btn { min-height: 44px; }