.2fa-card { max-width: 480px; margin: 0 auto; }
.2fa-step { display: none; }
.2fa-step.active { display: block; animation: fadeIn .3s ease; }
.2fa-qr { text-align: center; margin: 16px 0; }
.2fa-qr img { border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 8px; }
.2fa-secret { font-family: monospace; font-size: 16px; letter-spacing: 2px; padding: 10px; background: #0b1220; border-radius: 8px; text-align: center; word-break: break-all; margin: 12px 0; border: 1px solid var(--line); }
.2fa-recovery { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 12px; padding: 14px; margin: 16px 0; }
.2fa-recovery h4 { color: var(--warn); margin-bottom: 8px; }
.2fa-recovery .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.2fa-recovery .code { font-family: monospace; font-size: 13px; background: rgba(0,0,0,.3); padding: 6px 10px; border-radius: 6px; text-align: center; letter-spacing: 1px; }
.2fa-totp-input { display: flex; gap: 8px; align-items: center; justify-content: center; }
.2fa-totp-input input { width: 200px; text-align: center; font-size: 24px; letter-spacing: 8px; font-family: monospace; }
.2fa-status { display: flex; align-items: center; gap: 12px; padding: 16px; background: #1f2937; border-radius: 12px; margin-bottom: 16px; }
.2fa-status.enabled { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); }
.2fa-status.disabled { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); }
.2fa-status .status-icon { font-size: 32px; }
.2fa-status .status-text h3 { margin: 0; font-size: 16px; }
.2fa-status .status-text p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }