.mfa-card{margin-top:1.25rem;border:1px solid var(--line,#dfe7dc);background:linear-gradient(135deg,#fff 0%,#f5f8f1 100%);padding:clamp(1.25rem,3vw,2rem)}
.mfa-card>div{max-width:56rem}.mfa-card h2{margin:.35rem 0 .45rem}.mfa-card p{line-height:1.65;color:var(--muted,#6d7d72)}
.mfa-enabled,.mfa-setup,.mfa-recovery-once{margin-top:1.1rem;padding:1.15rem;border:1px solid var(--line,#dfe7dc);border-radius:1rem;background:#fff}
.mfa-enabled .tag{display:inline-flex}.mfa-setup>label{display:block;font-weight:700;margin:1rem 0}.mfa-secret{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.45rem;padding:.75rem 1rem;background:#f3f6ef;border-radius:.8rem}.mfa-secret code,.mfa-code-list code{font:700 1rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;overflow-wrap:anywhere}.mfa-apps{font-size:.92rem}.mfa-form{display:grid;gap:.8rem;max-width:32rem;margin-top:1rem}.mfa-form label{display:grid;gap:.4rem;font-weight:650}.mfa-form input{width:100%;min-height:3rem;border:1px solid var(--line,#dfe7dc);border-radius:.7rem;padding:.65rem .8rem;font:inherit}.mfa-form input:focus{outline:3px solid color-mix(in srgb,var(--accent,#b7ec5c) 40%,transparent);border-color:var(--accent,#b7ec5c)}.mfa-form button,.mfa-setup button,.mfa-recovery-once button{width:fit-content;min-height:2.75rem}.mfa-form button+button{margin-top:-.35rem}.mfa-recovery-once{border-color:#f0d39c;background:#fffaf0}.mfa-code-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.55rem;margin:1rem 0}.mfa-code-list code{padding:.6rem .7rem;border-radius:.55rem;background:white;border:1px solid #eee0c0;text-align:center}.mfa-recovery-once button{margin:.25rem .5rem .25rem 0}.mfa-card [hidden]{display:none!important}@media(max-width:600px){.mfa-secret{align-items:flex-start}.mfa-secret code{font-size:.88rem}.mfa-form button,.mfa-setup button,.mfa-recovery-once button{width:100%}.mfa-recovery-once button{margin:.25rem 0}}
.mfa-qr{display:grid;justify-items:center;gap:.65rem;width:max-content;max-width:100%;margin:1rem auto;padding:1rem;border:1px solid var(--brand-accent-border,#dfe7dc);border-radius:1rem;background:#fff}.mfa-qr>div{width:min(15rem,65vw);aspect-ratio:1}.mfa-qr svg{display:block;width:100%;height:100%}.mfa-qr figcaption,.mfa-qr-fallback{max-width:25rem;margin:0;color:var(--muted,#6d7d72);font-size:.82rem;line-height:1.5;text-align:center}.mfa-qr-fallback{margin:1rem auto}