.settings-card.passkey-panel {
    background: var(--ds-card);
    color: var(--ds-ink);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-6);
    margin-bottom: var(--ds-space-6);
}
.passkey-panel *, .passkey-panel *::before, .passkey-panel *::after { box-sizing: border-box; }
.passkey-panel .settings-card-title { color: var(--ds-ink); font-size: 20px; line-height: 28px; margin: 0 0 var(--ds-space-3); }
.passkey-login { margin: var(--ds-space-4) 0; }
.passkey-login > .passkey-button { width: 100%; }
.passkey-hint, .passkey-status { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.passkey-hint { color: var(--ds-ink-soft); margin: var(--ds-space-2) 0 var(--ds-space-3); }
.passkey-status:empty { display: none; }
.passkey-status[data-error="true"] { color: var(--ds-error-text); }
.passkey-button {
    min-height: 48px;
    max-width: 100%;
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid var(--ds-brand);
    border-radius: var(--ds-radius-md);
    background: var(--ds-brand);
    color: var(--ds-on-cta);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.passkey-button:hover:not(:disabled) { background: var(--ds-brand-hover); }
.passkey-button-secondary { background: var(--ds-card); color: var(--ds-ink); border-color: var(--ds-input-border); }
.passkey-button-secondary:hover:not(:disabled) { background: var(--ds-surface); }
.passkey-button:disabled { opacity: .65; cursor: default; }
.passkey-button:focus-visible, .passkey-fields input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: var(--ds-space-1); }
.passkey-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.passkey-fields { display: flex; flex-direction: column; gap: var(--ds-space-3); margin-top: var(--ds-space-6); }
.passkey-fields label { display: block; font-size: 14px; }
.passkey-fields input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--ds-input-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-space-3);
    color: var(--ds-ink);
    background: var(--ds-card);
    font: inherit;
}
.passkey-list { list-style: none; padding: 0; margin: var(--ds-space-4) 0; }
.passkey-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ds-space-3); padding: var(--ds-space-3) 0; border-bottom: 1px solid var(--ds-line); }
.passkey-list span { overflow-wrap: anywhere; min-width: 0; }
.passkey-list small { display: block; margin-top: var(--ds-space-1); }
.passkey-panel [hidden], .passkey-login [hidden] { display: none !important; }
@media (max-width: 812px) {
    .settings-card.passkey-panel { padding: var(--ds-space-4); }
    .passkey-fields input { font-size: 16px; }
}