.pfPasskeys{--pf-line:color-mix(in srgb,currentColor 16%,transparent);--pf-soft:color-mix(in srgb,currentColor 4%,transparent);max-width:960px;margin-inline:auto;line-height:1.6}
.pfPasskeys *{box-sizing:border-box}
.pfPasskeys h1,.pfPasskeys h2,.pfPasskeys p{margin:0}
.pfPasskeys .pfHero{display:flex;gap:20px;align-items:center;padding:28px 0}
.pfPasskeys .pfIcon{display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid var(--pf-line);border-radius:18px;background:var(--pf-soft);font-size:23px}
.pfPasskeys .pfLead{margin-top:6px;max-width:64ch;opacity:.8}
.pfPasskeys .pfPanel{border:1px solid var(--pf-line);border-radius:16px;padding:24px;margin-bottom:24px;background:var(--pf-soft)}
.pfPasskeys .pfSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.pfPasskeys .pfFields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.pfPasskeys .pfField{display:flex;flex-direction:column;gap:7px;min-width:0;font-weight:600}
.pfPasskeys .pfField input,.pfPasskeys .pfField select{width:100%;max-width:100%;min-width:0;min-height:44px;border-radius:8px}
.pfPasskeys .pfHint{font-size:.9em;opacity:.75;font-weight:400}
.pfPasskeys .pfHelp{margin-top:18px;font-size:.92em}
.pfPasskeys summary{cursor:pointer;font-weight:600}
.pfPasskeys details p{margin-top:10px;max-width:72ch}
.pfPasskeys .pfList{display:grid;gap:14px}
.pfPasskeys .pfCard{border:1px solid var(--pf-line);border-radius:12px;padding:20px}
.pfPasskeys .pfCardTop{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}
.pfPasskeys .pfBadge{display:inline-flex;padding:3px 10px;border-radius:30px;font-size:.8em;font-weight:600;background:var(--pf-soft);border:1px solid var(--pf-line)}
.pfPasskeys .pfRename{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.pfPasskeys .pfRename .pfField{flex:1 1 220px}
.pfPasskeys .pfActions{display:flex;gap:8px;flex-wrap:wrap}
.pfPasskeys .pfMeta{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:14px;font-size:.85em;opacity:.75}
.pfPasskeys .pfEmpty{text-align:center;padding:32px 20px;border:1px dashed var(--pf-line);border-radius:12px}
.pfPasskeys .pfEmpty p{margin-top:6px;opacity:.75}
.pfPasskeys .pfFooter{padding:20px 0;font-size:.85em;opacity:.75}
.pfPasskeys [data-pf-status]:not(:empty){padding:14px 18px;margin-block:16px;border:1px solid var(--pf-line);border-radius:10px;background:var(--pf-soft)}
.pfPasskeys [data-pf-status]:empty{display:none}
.pfPasskeys pre{white-space:pre-wrap;overflow-wrap:anywhere}
.pfPasskeys button:disabled{opacity:.55;cursor:wait}
@media(max-width:640px){.pfPasskeys .pfHero{align-items:flex-start;padding:18px 0;gap:14px}.pfPasskeys .pfIcon{width:44px;height:44px;border-radius:12px}.pfPasskeys .pfFields{grid-template-columns:1fr;gap:16px}.pfPasskeys .pfPanel,.pfPasskeys .pfCard{padding:16px}.pfPasskeys .pfActions{width:100%}.pfPasskeys .pfActions button{flex:1}.pfPasskeys .pfCardTop{align-items:flex-start}.pfPasskeys .pfMeta{display:grid;gap:4px}}