#login-screen.mfa-active { align-items: flex-start; overflow-y: auto; padding: 24px 16px; }
.mfa-card { display: flex; flex-direction: column; flex-shrink: 0; gap: 14px; width: min(100%, 430px); text-align: left; }
.mfa-card h2 { font-size: 21px; margin: 0; line-height: 1.3; }
.mfa-hint { margin: 0; font-size: 14px; color: var(--text-dim, #555); line-height: 1.55; }
.mfa-qr { display: block; align-self: center; max-width: 100%; height: auto; border-radius: 10px; }
.mfa-form, .mfa-field { display: flex; flex-direction: column; gap: 10px; }
.mfa-field { font-size: 14px; }
.mfa-form { gap: 16px; }
.mfa-form input, .mfa-form select { width: 100%; min-width: 0; font-size: 16px; }
.mfa-manual { border: 1px solid var(--border, #ddd); padding: 12px; border-radius: 10px; }
.mfa-manual summary { cursor: pointer; font-size: 14px; }
.mfa-manual[open] summary { margin-bottom: 10px; }
.mfa-secret { display: block; overflow-wrap: anywhere; padding: 12px 0; font-size: 16px; user-select: all; }
.mfa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mfa-recovery-list { margin: 0; padding: 16px; background: var(--bg, #f6f6f6); border-radius: 10px; font-size: 15px; line-height: 1.65; overflow-x: auto; user-select: all; }
.mfa-ack { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 14px; }
.mfa-ack input { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; margin: 0; }
.mfa-dialog { border: 1px solid var(--border, #ddd); border-radius: 16px; padding: 24px; width: min(calc(100% - 24px), 478px); max-height: calc(100dvh - 32px); overflow-y: auto; color: var(--text, #222); background: var(--surface, #fff); }
.mfa-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.mfa-card .btn { white-space: normal; min-height: 42px; }
.mfa-card .btn:hover { transform: none; }