dialog[data-security-recovery] {
    margin: auto;
    inset: 0;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: 24px;
    border: 1px solid var(--border, var(--ui-border, #c9d1db));
    border-radius: var(--radius, 16px);
    background: var(--surface, var(--ui-surface, white));
    color: var(--text, var(--ui-text, #1f2937));
    font: inherit;
}
dialog[data-security-recovery]::backdrop { background: rgb(15 23 42 / .45); }
dialog[data-security-recovery] h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
dialog[data-security-recovery] p { margin: 12px 0; font-size: 14px; line-height: 1.6; }
dialog[data-security-recovery] > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
dialog[data-security-recovery] a, dialog[data-security-recovery] button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 16px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--border, var(--ui-border, #c9d1db));
    background: var(--surface, white); color: inherit; font: inherit; font-size: 14px; cursor: pointer;
}
dialog[data-security-recovery] button { background: var(--primary, var(--ui-primary, #5146a6)); color: var(--on-dark, white); }
dialog[data-security-recovery] [data-security-cancel] { background: var(--surface, white); color: inherit; }
dialog[data-security-recovery] :focus-visible { outline: 2px solid var(--primary, var(--ui-primary, #5146a6)); outline-offset: 3px; }
dialog[data-security-recovery] [hidden] { display: none; }