.mfa-cards { display:grid; gap:16px; max-width:800px; }
.mfa-card { padding:24px; }
.mfa-card h2 { margin:0 0 8px; font-size:18px; }
.mfa-card p { line-height:1.7; color:var(--navi-muted); }
.mfa-card button { margin-top:8px; margin-right:12px; }
.mfa-status { color:var(--navi-accent); font-size:13px; }
.mfa-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow-y:auto; border:1px solid var(--navi-line); border-radius:16px; padding:26px; background:var(--navi-surface); color:var(--navi-ink); }
.mfa-dialog::backdrop { background:#0008; }
.mfa-dialog h2 { margin:0 0 16px; font-size:21px; }
.mfa-dialog p { color:var(--navi-muted); line-height:1.7; }
.mfa-dialog .form-error { color:var(--navi-danger,#bf3d4e); }
.mfa-dialog .field { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.mfa-dialog input:not([type=radio],[type=checkbox]),.mfa-dialog textarea { width:100%; padding:10px; border:1px solid var(--navi-line); border-radius:8px; background:var(--appearance-raised); color:var(--navi-ink); font:inherit; }
.mfa-dialog textarea,.mfa-dialog .mfa-key { font-family:monospace; }
.mfa-qr { display:block; width:220px; height:220px; max-width:100%; margin:16px auto; object-fit:contain; background:white; }
.mfa-methods { display:flex; flex-wrap:wrap; gap:12px; border:0; padding:0; margin:16px 0; }
.mfa-methods legend { font-size:12px; color:var(--navi-muted); margin-bottom:8px; }
.mfa-methods label,.mfa-check { display:flex; align-items:center; gap:6px; }
.mfa-check { margin:18px 0; }
.mfa-dialog input { accent-color:var(--navi-accent); }
.mfa-dialog .form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.mfa-dialog button:disabled,.mfa-card button:disabled { opacity:.55; cursor:not-allowed; }
.mfa-dialog { position: relative; box-sizing: border-box; }
.mfa-dialog h2 { padding-right: 30px; }
.mfa-close { position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; padding: 7px; border: 0; border-radius: 8px; background: transparent; color: var(--navi-muted); cursor: pointer; }
.mfa-close:hover { background: rgb(128 128 128 / 12%); }
.mfa-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mfa-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; gap: 8px; margin: 24px 0; padding: 0; }
.mfa-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--navi-muted); font-size: 12px; }
.mfa-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--navi-line); border-radius: 50%; font-weight: 700; }
.mfa-steps .current { color: var(--navi-accent); }
.mfa-steps .current span { background: var(--navi-accent); color: var(--navi-surface); border-color: var(--navi-accent); }
.mfa-steps .completed span { color: var(--navi-accent); border-color: var(--navi-accent); }
.mfa-dialog .mfa-qr { padding: 10px; box-sizing: content-box; width: 220px; max-width: calc(100% - 20px); height: auto; aspect-ratio: 1; border-radius: 8px; }
.mfa-dialog input, .mfa-dialog textarea { box-sizing: border-box; }