/* Two-factor sign-in (static/mfa.js), on the login page and the security page. */
.mfa-title { margin: 0 0 6px; font-size: 16px; }
.mfa-hint { margin: 4px 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.mfa-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mfa-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.mfa-field input { padding: 8px; font-size: 16px; letter-spacing: .06em; box-sizing: border-box; width: 100%; color: var(--text);
  background: var(--bg, transparent); border: 1px solid var(--border); border-radius: 4px; }
.mfa-btn { padding: 8px 12px; font-size: 13px; font-weight: 600; border-radius: 4px; cursor: pointer; color: #fff;
  background: var(--accent, #e03131); border: 1px solid transparent; margin-top: 6px; }
.mfa-btn:disabled { opacity: .55; cursor: default; }
.mfa-btn + .mfa-btn { margin-left: 6px; }
.mfa-btn-quiet { background: transparent; color: var(--text); border-color: var(--border); }
.mfa-error { margin: 2px 0; font-size: 12px; color: var(--danger, #e5534b); }
.mfa-qr { display: block; margin: 8px auto; width: 200px; height: 200px; background: #fff; border-radius: 4px; }
.mfa-key { display: block; padding: 6px; font-size: 13px; text-align: center; word-spacing: .1em; user-select: all;
  border: 1px solid var(--border); border-radius: 4px; }
.mfa-codes { margin: 8px 0; padding-left: 26px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.acc-page { max-width: 460px; margin: 32px auto; padding: 0 16px; }
.acc-page a { color: var(--text-muted); }
.acc-page h1 { margin: 12px 0 14px; font-size: 22px; }
.acc-card { padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.acc-state { margin: 0 0 6px; font-weight: 600; }
.acc-card .mfa-btn { display: block; width: 100%; }