/* ==========================================================================
   MFA — uses the existing SmartCare tokens only. No new colours introduced.
   ========================================================================== */

.mfa-lead { margin: 0 0 16px; color: var(--ink-soft); }

.mfa-hint {
  font-size: 13px; color: var(--muted); margin: 6px 0 14px;
}

#mfa-code, #mfa-confirm-code, #mfa-off-code {
  font-size: 22px; letter-spacing: .28em; text-align: center;
  font-variant-numeric: tabular-nums;
}

.mfa-state { padding: 12px 14px; border-radius: var(--radius-sm); margin: 0 0 12px; }
.mfa-state.on  { background: var(--go-soft);   color: var(--go); }
.mfa-state.off { background: var(--warn-soft); color: var(--warn); }

.mfa-warn {
  background: var(--warn-soft); color: var(--warn);
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; margin: 0 0 14px;
}

/* Long enough to wrap; monospace so an O and a 0 are distinguishable when
   someone is typing a setup key by hand. */
.mfa-secret, .mfa-uri {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  word-break: break-all; user-select: all;
}
.mfa-secret { font-size: 16px; letter-spacing: .06em; }
.mfa-uri    { font-size: 12px; color: var(--ink-soft); }

.mfa-codes {
  columns: 2; column-gap: 18px; margin: 4px 0 0; padding-left: 20px;
}
.mfa-codes li { margin-bottom: 6px; break-inside: avoid; }
.mfa-codes code {
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 14px; letter-spacing: .04em; user-select: all;
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.btn-danger {
  background: var(--brand-red); border-color: var(--brand-red); color: #fff;
}
.btn-danger:hover { background: var(--brand-red-dk); border-color: var(--brand-red-dk); }

@media (max-width: 520px) {
  .mfa-codes { columns: 1; }
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1; }
}