/* Mythox — Two-factor (MFA) styles · Brand OS skin */
/* Settings is now a native, full-width page (matches Home): a view-head + a
   responsive 2-column card grid. The wide cards (Plan & credits, Bank
   connections) span both columns. This also guarantees the Bank-connections
   card sits high on the page and is always reachable — no long scroll. */
/* 2026-06-11: retokenized off the fixed dark palette so the 2FA card + login
   challenge follow light mode (tokens resolve dark/light automatically). The
   QR quiet-zone stays #fff (scanner requirement). */
.mfa-wrap { width: 100%; max-width: none; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.set-grid .set-span { grid-column: 1 / -1; }
.set-grid .mfa-card { margin-bottom: 0; }
.set-grid > .card + .card { margin-top: 0; }  /* defeat global .card + .card adjacency inside the grid */
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }
.mfa-h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; margin: 0 0 18px; }
.mfa-card { margin-bottom: 18px; }
.mfa-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mfa-loading { padding: 6px 0; }

.mfa-pill { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 11px; border-radius: 999px; }
.mfa-pill.on  { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 38%, transparent); }
.mfa-pill.off { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); }

.mfa-steps { margin: 8px 0 16px; padding-left: 20px; color: var(--ivory-soft); }
.mfa-steps li { margin: 6px 0; }
.mfa-steps li::marker { color: var(--accent); }

.mfa-qrbox { display: inline-block; background: #fff; padding: 12px; border-radius: 12px; line-height: 0; }
.mfa-qr { width: 188px; height: 188px; display: block; }
.mfa-secret { margin: 12px 0 16px; font-size: 13px; color: var(--muted); }
.mfa-secret code { color: var(--accent); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; font-family: var(--font-body); letter-spacing: .08em; word-break: break-all; }

.mfa-codeRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mfa-input { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: .35em; text-align: center; width: 160px; padding: 11px 12px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ivory); }
.mfa-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }

.mfa-msg { margin-top: 12px; font-size: 13.5px; min-height: 1px; color: var(--muted); }
.mfa-msg.err { color: var(--red); }

/* full-screen login challenge */
.mfa-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--ink); }
.mfa-challenge { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 34px 30px; text-align: center; }
.mfa-challenge .bars { color: var(--accent); font-size: 26px; letter-spacing: -1px; text-shadow: 0 0 16px var(--glow); }
.mfa-challenge h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 10px 0 6px; }
.mfa-challenge .muted { font-size: 14px; margin: 0 0 18px; }
.mfa-challenge .mfa-input { width: 100%; margin-bottom: 14px; }
.mfa-signout { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 13px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
.mfa-signout:hover { color: var(--ivory); }

@media (max-width: 520px) {
  .mfa-input { width: 100%; }
  .mfa-codeRow .btn, .mfa-codeRow .btn-gold { flex: 1; }
}