.passkey-dialog {
    width: min(34rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 20px;
    padding: 0;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #172033);
    box-shadow: 0 24px 80px #0005;
    overflow-y: auto;
}
.passkey-dialog::backdrop { background: #0f172a99; }
.passkey-dialog:not([open]) { display: none; }
.passkey-enrollment {
    position: relative;
    padding: 1.5rem;
    line-height: 1.6;
    color: var(--text-primary, #172033);
    background: var(--card-bg, #fff);
    overflow-wrap: anywhere;
}
.passkey-enrollment--signup {
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 16px;
    margin-top: 1.2rem;
}
.passkey-enrollment h2, .passkey-enrollment h3 { font-size: 1.45rem; margin: 0.5rem 2rem 1rem 0; color: inherit; }
.passkey-enrollment p { margin: 0 0 0.85rem; color: inherit; }
.passkey-eyebrow { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.passkey-enrollment label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.passkey-enrollment input[type="password"] {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-color, #94a3b8);
    border-radius: 10px;
    background: var(--input-bg, #fff);
    color: inherit;
    font-size: 1rem;
    padding: 0.7rem;
}
.passkey-enrollment .passkey-hint { font-size: 0.9rem; margin-top: 0.5rem; }
.passkey-enrollment .passkey-feedback { font-weight: 600; }
.passkey-feedback:empty { display: none; }
.passkey-details { margin: 0.6rem 0; }
.passkey-details summary { cursor: pointer; min-height: 44px; font-weight: 600; padding: 0.5rem 0; }
.passkey-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.passkey-enrollment button {
    min-height: 48px;
    font: inherit;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    cursor: pointer;
}
.passkey-enrollment .passkey-primary { background: #3b3ab7; border: 1px solid #3b3ab7; color: #fff; }
.passkey-enrollment .passkey-secondary { background: transparent; border: 1px solid var(--border-color, #94a3b8); color: inherit; }
.passkey-enrollment .passkey-close { position: absolute; top: 0.45rem; right: 0.45rem; width: 48px; background: transparent; border: 0; color: inherit; font-size: 1.8rem; padding: 0; }
.passkey-enrollment button:disabled { cursor: default; opacity: 0.65; }
.passkey-enrollment :focus-visible { outline: 3px solid #e79c10; outline-offset: 3px; }
.passkey-enrollment [hidden] { display: none; }
html[data-theme="dark"] .passkey-enrollment,
html[data-theme="dark"] .passkey-dialog { background: #172033; color: #f1f5f9; border-color: #64748b; }
html[data-theme="dark"] .passkey-enrollment input[type="password"] { background: #0f172a; border-color: #64748b; }
@media (max-width: 480px) {
    .passkey-enrollment { padding: 1.2rem; }
    .passkey-actions > button { flex: 1 1 100%; }
}