/* Passkeys: sign-in button and the Settings block. Colours come from the theme variables, so the logo and brand stay as they are. */
.pk-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;font-size:16px}
.pk-go svg{flex:none}
.pk-go[hidden],.pk-or[hidden]{display:none}
.pk-or{display:flex;align-items:center;gap:10px;margin:4px 0;font-size:13px;opacity:.7;text-transform:lowercase}
.pk-or::before,.pk-or::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.pk-shake{animation:pk-shake .3s}
@keyframes pk-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.pk-shake{animation:none}}
.pk-box{border:1px solid var(--line,rgba(127,127,127,.25));border-radius:16px;padding:16px;margin:0 0 18px;max-width:620px;box-sizing:border-box}
.pk-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.pk-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--hot,#ff4eb8);color:#fff;flex:none}
.pk-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pk-list li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:10px 12px;border-radius:12px;background:var(--panel2,rgba(127,127,127,.08))}
.pk-dev{font-weight:700;min-width:0;overflow-wrap:anywhere}
.pk-list small{grid-column:1;opacity:.7}
.pk-del{grid-column:2;grid-row:1/3;display:flex;gap:6px;align-items:center;margin:0}
.pk-del input[hidden]{display:none}
.pk-del input{width:84px;min-width:0;font-size:16px}
.pk-x{width:40px;height:40px}
.pk-add{display:flex;flex-direction:column;gap:6px;margin:0}
.pk-add .pk-go,.pk-add input{max-width:360px;box-sizing:border-box;font-size:16px}
.pk-note{margin:10px 0 0;font-size:13px}
@media (max-width:520px){.pk-box{padding:12px}.pk-add .pk-go{max-width:none}}