.account-mfa-card { position: relative; margin-bottom: 16px; overflow: hidden; }
.account-mfa-body { display: grid; gap: 18px; padding: 18px; }
.account-mfa-summary h3, .account-mfa-enrollment h3, .account-mfa-recovery h3 { margin: 10px 0 5px; color: var(--text); }
.account-mfa-summary p, .account-mfa-enrollment > p, .account-mfa-recovery p, .account-mfa-management p { margin: 0; color: var(--muted-light); line-height: 1.55; }
.account-mfa-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .73rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.account-mfa-badge.on { background: #1c5738; color: #aaf0c5; }
.account-mfa-badge.off { background: var(--panel3); color: var(--muted-light); }
.account-mfa-badge.pending, .account-mfa-badge.warning { background: #58451c; color: #ffe39a; }
.account-mfa-form { max-width: 560px; padding: 0; }
.account-mfa-form .account-mfa-message { margin-bottom: 0; }
.account-mfa-steps { margin: 12px 0 15px; padding-left: 22px; color: var(--muted-light); line-height: 1.65; }
.account-mfa-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-deep); }
.account-mfa-key > span { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.account-mfa-key code { overflow-wrap: anywhere; color: var(--text); font-size: 1rem; letter-spacing: .09em; }
.account-mfa-key .button { min-height: 44px; padding: 0 11px; }
.account-mfa-expiry { margin-top: 10px !important; font-size: .86rem; }
.account-mfa-app-link { display: inline-flex; width: auto; margin: 12px 0 4px; }
.account-mfa-recovery { padding: 16px; border: 1px solid #987429; border-radius: var(--radius-lg); background: color-mix(in srgb, #8a6416 15%, var(--panel2)); }
.account-mfa-recovery ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; padding-left: 28px; }
.account-mfa-recovery code { color: var(--text); letter-spacing: .04em; }
.account-mfa-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.account-mfa-message { margin: 0; padding: 10px 11px; border-radius: var(--radius); }
.account-mfa-message.error { border: 1px solid #985353; background: #3b2222; color: #f3c4c4; }
.account-mfa-message.warning { border: 1px solid #987429; background: #3f341c; color: #ffe39a; }
.account-mfa-management { display: grid; gap: 10px; }
.account-mfa-management details { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel2); }
.account-mfa-management summary { cursor: pointer; padding: 13px 15px; color: var(--text); font-weight: 800; }
.account-mfa-management details > p, .account-mfa-management details > form { margin: 0 15px 15px; }
.account-mfa-disable { border-color: #714040 !important; }
.account-mfa-loading { min-height: 100px; display: grid; place-items: center; color: var(--muted-light); }
.account-mfa-busy { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg-deep) 78%, transparent); color: var(--text); font-weight: 800; text-align: center; }

@media (max-width: 620px) {
  .account-mfa-recovery ol { grid-template-columns: 1fr; }
  .account-mfa-key { grid-template-columns: 1fr; }
  .account-mfa-key .button, .account-mfa-actions .button, .account-mfa-app-link { width: 100%; }
}