/* Settings page. */

.settings-page {
  padding: 32px 40px 80px;
  overflow-y: auto;
}

.settings-content {
  max-width: 880px;
  margin: 0 auto;
}

.settings-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.settings-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 36px;
}

.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.settings-section-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.settings-section-blurb {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 620px;
}

/* Calendar Sync groups one card per external source (Google, Calendly) under a
   single section. A light divider + label keeps each source visually distinct. */
.calendar-sync-source + .calendar-sync-source {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}

.calendar-sync-source-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* Heads-up note (e.g. Calendly's paid-plan requirement) — a soft amber callout
   so agents notice it before connecting. Translucent so it works in every theme. */
.calendar-sync-note {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  max-width: 620px;
  color: var(--gold, #b7791f);
  background: var(--gold-soft, rgba(183,121,31,0.10));
  border: 1px solid rgba(183,121,31,0.30);
}

/* Google "verification in progress" notice — a Google-red-tinted pill (no status
   dot). The red tint signals it's a gated/limited state without reading as an
   error. Translucent fill so it works across all themes. */
.calendar-progress-notice {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 18px;
  max-width: 620px;
  color: #e0473b;
  background: rgba(234, 67, 53, 0.10);
  border: 1px solid rgba(234, 67, 53, 0.32);
}

.calendar-progress-notice strong { color: #ea4335; }

/* ── Theme tile grid ─────────────────────────────────────────── */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.theme-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease, transform var(--speed) ease;
  padding: 0;
}

.theme-tile:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}

.theme-tile.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Each preview swatch is painted in ITS OWN theme's colors so the user sees
   what they're picking before they pick it.

   These values are HARDCODED on purpose and must stay that way. A token here
   would resolve against the *active* theme, so every tile would render in the
   look you already have and the picker would show you nothing. (That is the
   live bug for Ivory below — it had no block at all until now.) Adding a
   theme means adding its five rules: preview, -card, -title, -line, -pill. */
.theme-tile-preview {
  height: 140px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.theme-tile-preview[data-preview="classic"] {
  background: #f5f0e8;
  color: #2e2820;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Windows 2000 preview — the 3D face with black bitmap-sans text. */
.theme-tile-preview[data-preview="win2000"] {
  background: #d4d0c8;
  color: #000000;
  font-family: 'MS Sans Serif Web', 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
}

/* Jarvis preview — dark HUD canvas with a faint cyan grid + inner glow so the
   tile itself previews the holographic feel. */
.theme-tile-preview[data-preview="jarvis"] {
  background:
    linear-gradient(rgba(63,208,255,0.06) 1px, transparent 1px) 0 0 / 100% 14px,
    linear-gradient(90deg, rgba(63,208,255,0.06) 1px, transparent 1px) 0 0 / 14px 100%,
    #060b14;
  color: #d6ecff;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  box-shadow: inset 0 0 28px rgba(63,208,255,0.16);
}

.theme-tile-preview-card {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.theme-tile-preview[data-preview="classic"] .theme-tile-preview-card {
  background: #faf7f2;
  border: 1px solid #d8cfc0;
}

/* Windows 2000 preview — a raised gray window with the classic 3D bevel (white
   top-left highlight, gray/black bottom-right shadow), square corners. Padding
   is tightened to 3px so the title below can act as a real caption bar sitting
   flush inside the frame, the way a Windows 2000 window is put together. */
.theme-tile-preview[data-preview="win2000"] .theme-tile-preview-card {
  background: #d4d0c8;
  border: 1px solid #000000;
  border-radius: 0;
  padding: 3px;
  gap: 6px;
  box-shadow:
    inset  1px  1px 0 0 #ffffff,
    inset -1px -1px 0 0 #000000,
    inset  2px  2px 0 0 #dfdfdf,
    inset -2px -2px 0 0 #808080;
}

/* The title IS the caption bar — the gradient is the single most recognisable
   thing about Windows 2000, so the picker has to show it. */
.theme-tile-preview[data-preview="win2000"] .theme-tile-preview-title {
  font-family: 'MS Sans Serif Web', 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 11px;
  line-height: 18px;
  padding: 0 4px;
  color: #ffffff;
  background: linear-gradient(90deg, #0a246a, #a6caf0);
}

.theme-tile-preview[data-preview="jarvis"] .theme-tile-preview-card {
  background: rgba(13,24,38,0.78);
  border: 1px solid #1c3a52;
  box-shadow: 0 0 0 1px rgba(63,208,255,0.10), 0 0 18px rgba(63,208,255,0.12);
}

.theme-tile-preview[data-preview="jarvis"] .theme-tile-preview-title {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 15px;
  color: #d6ecff;
  text-shadow: 0 0 10px rgba(63,208,255,0.45);
}

.theme-tile-preview-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.theme-tile-preview[data-preview="classic"] .theme-tile-preview-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}

.theme-tile-preview-line {
  height: 6px;
  border-radius: 3px;
  width: 80%;
}

.theme-tile-preview-line.short { width: 55%; }

.theme-tile-preview[data-preview="classic"] .theme-tile-preview-line {
  /* Literal, not var(--shadow-rgb) — see the note above the preview blocks.
     A token here would paint Classic's tile in the ACTIVE theme's ink. */
  background: rgba(46,40,32,0.18);
}

.theme-tile-preview[data-preview="win2000"] .theme-tile-preview-line {
  background: rgba(0,0,0,0.35);
  border-radius: 0;
  margin: 0 5px;
}

.theme-tile-preview[data-preview="jarvis"] .theme-tile-preview-line {
  background: rgba(63,208,255,0.30);
}

.theme-tile-preview-pill {
  align-self: flex-start;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
  margin-top: auto;
}

.theme-tile-preview[data-preview="classic"] .theme-tile-preview-pill {
  background: rgba(181,137,58,0.14);
  color: #9a7230;
}

/* Windows 2000 accent chip — the navy system highlight, square with white text. */
.theme-tile-preview[data-preview="win2000"] .theme-tile-preview-pill {
  background: #0a246a;
  color: #ffffff;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 5px;
  margin-bottom: 5px;
}

/* Arc-reactor gold pill against the cyan-lit card. */
.theme-tile-preview[data-preview="jarvis"] .theme-tile-preview-pill {
  background: rgba(255,181,71,0.16);
  color: #ffb547;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Arsenal ──────────────────────────────────────────────────────────────
   Cool near-white canvas, a pure-white card held off it by a hairline rather
   than a shadow, indigo accent. Inter at every weight — no display serif. */
.theme-tile-preview[data-preview="arsenal"] {
  background: #f7f8fb;
  color: #171a26;
  font-family: 'SF Pro Display', -apple-system, 'Inter', system-ui, sans-serif;
}
.theme-tile-preview[data-preview="arsenal"] .theme-tile-preview-card {
  background: #ffffff;
  border: 1px solid #e4e7ee;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.theme-tile-preview[data-preview="arsenal"] .theme-tile-preview-title {
  font-family: 'SF Pro Display', -apple-system, 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.theme-tile-preview[data-preview="arsenal"] .theme-tile-preview-line {
  background: rgba(23,26,38,0.14);
}
.theme-tile-preview[data-preview="arsenal"] .theme-tile-preview-pill {
  background: rgba(83,71,206,0.10);
  color: #5347ce;
}

/* ── Arsenal Dark ─────────────────────────────────────────────────────────
   Same geometry, inverted. The card lifts off the canvas by being lighter
   than it, which is the reverse of how the light theme separates them. */
.theme-tile-preview[data-preview="arsenal-dark"] {
  background: #0f1117;
  color: #e8eaf0;
  font-family: 'SF Pro Display', -apple-system, 'Inter', system-ui, sans-serif;
}
.theme-tile-preview[data-preview="arsenal-dark"] .theme-tile-preview-card {
  background: #171a22;
  border: 1px solid #262a36;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.36);
}
.theme-tile-preview[data-preview="arsenal-dark"] .theme-tile-preview-title {
  font-family: 'SF Pro Display', -apple-system, 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #e8eaf0;
}
.theme-tile-preview[data-preview="arsenal-dark"] .theme-tile-preview-line {
  background: rgba(232,234,240,0.18);
}
.theme-tile-preview[data-preview="arsenal-dark"] .theme-tile-preview-pill {
  background: rgba(136,124,253,0.18);
  color: #a49bff;
}

/* ── Ivory ────────────────────────────────────────────────────────────────
   Previously missing entirely, so this tile rendered in whatever theme was
   active — the one appearance you could never actually preview. Card and
   canvas are both white by design; the hairline is the only separation. */
.theme-tile-preview[data-preview="ivory"] {
  background: #ffffff;
  color: #111111;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.theme-tile-preview[data-preview="ivory"] .theme-tile-preview-card {
  background: #ffffff;
  border: 1px solid #e4e1db;
}
.theme-tile-preview[data-preview="ivory"] .theme-tile-preview-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #111111;
}
.theme-tile-preview[data-preview="ivory"] .theme-tile-preview-line {
  background: rgba(17,17,17,0.16);
}
.theme-tile-preview[data-preview="ivory"] .theme-tile-preview-pill {
  background: rgba(26,58,92,0.10);
  color: #1a3a5c;
}

/* Tile meta (under the preview) */
.theme-tile-meta {
  padding: 14px 16px 16px;
  background: var(--surface);
}

.theme-tile-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.theme-tile-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  font-size: 13px;
  line-height: 1;
}

.theme-tile-blurb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.theme-tile-swatches {
  display: flex;
  gap: 6px;
}

.theme-tile-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

/* ── Call-mode tile grid ─────────────────────────────────────── */

.call-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.call-mode-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease, transform var(--speed) ease;
  font-family: inherit;
  color: var(--text);
}

.call-mode-tile:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}

.call-mode-tile.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.call-mode-tile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.call-mode-tile-icon {
  font-size: 20px;
  line-height: 1;
}

.call-mode-tile-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.call-mode-tile-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  font-size: 13px;
  line-height: 1;
}

.call-mode-tile-blurb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.45;
}

.call-mode-tile-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.call-mode-tile-bullets li {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}

.call-mode-tile-bullets li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: var(--gold);
}

/* Status + warning lines below the tile grid */

.call-routing-status,
.call-routing-warning {
  margin-top: 18px;
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.call-routing-status {
  color: var(--text-muted);
}

.call-routing-status strong {
  color: var(--text);
  font-weight: 600;
}

.call-routing-status-sep {
  color: var(--border);
}

.call-routing-warning {
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
}

.call-routing-profile-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.call-routing-profile-link:hover {
  text-decoration: underline;
}

/* ── Activity Logging toggle (placeholder; coming-soon popup on click) ── */

.audit-logging-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
}
.audit-logging-toggle:hover {
  border-color: var(--gold, #b5893a);
  background: var(--bg-warm, rgba(0,0,0,0.02));
}

.audit-logging-toggle-status {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-warm, rgba(0,0,0,0.04));
  padding: 3px 8px;
  border-radius: 10px;
}

.audit-logging-toggle-label {
  font-weight: 500;
}

.audit-logging-toggle-price {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.audit-logging-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 10px 0 0;
}
.audit-logging-hint code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: var(--bg-warm, rgba(0,0,0,0.04));
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Notifications / Slack ───────────────────────────────────── */

.slack-loading {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.slack-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.slack-status.is-on {
  color: #2f7a44;
  background: rgba(47,122,68,0.10);
  border: 1px solid rgba(47,122,68,0.35);
}

.slack-status.is-off {
  color: var(--text-muted);
  background: var(--bg-warm, rgba(0,0,0,0.04));
  border: 1px solid var(--border);
}

.slack-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.slack-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
}

.slack-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 8px;
}

.slack-input {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}

.slack-input::placeholder { color: var(--text-dim); }

.slack-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.slack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.slack-disconnect { color: #b5453a; }

.slack-feedback {
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 1.2em;
}
.slack-feedback-info    { color: var(--text-muted); }
.slack-feedback-success { color: #2f7a44; }
.slack-feedback-error   { color: #b5453a; }

/* Reminder-cron health readout (sourced from the slack-dispatch heartbeat) */
.slack-reminder-health {
  font-size: 12.5px;
  line-height: 1.45;
  margin: -8px 0 16px;
  max-width: 60ch;
}
.slack-reminder-health.is-ok    { color: #2f7a44; }
.slack-reminder-health.is-idle  { color: var(--text-muted); }
.slack-reminder-health.is-stale { color: #b5453a; font-weight: 500; }

.slack-reminder-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -6px 0 16px;
}
.slack-reminder-run-result {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Collapsible setup guide */
.slack-guide {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 16px;
  background: var(--bg-warm, rgba(0,0,0,0.02));
}

.slack-guide > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 0;
  list-style: none;
}
.slack-guide > summary::-webkit-details-marker { display: none; }
.slack-guide > summary::before {
  content: '▸';
  color: var(--gold);
  display: inline-block;
  margin-right: 8px;
  transition: transform var(--speed) ease;
}
.slack-guide[open] > summary::before { transform: rotate(90deg); }

.slack-guide-steps {
  margin: 0 0 8px;
  padding: 0 0 8px 22px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.slack-guide-steps li { margin-bottom: 8px; }
.slack-guide-steps strong { color: var(--text); font-weight: 600; }
.slack-guide-steps a { color: var(--gold); text-decoration: none; }
.slack-guide-steps a:hover { text-decoration: underline; }
.slack-guide-steps code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

.slack-guide-note {
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 0 0 14px;
  margin: 0;
  line-height: 1.5;
}

/* ── Security & MFA section ─────────────────────────────────────────────── */

/* Wrapper for the status banner + device row + note. Its innerHTML is swapped
   whole whenever MFA status changes, so spacing lives on the children. */
.mfa-manage .mfa-status-banner {
  margin-bottom: 16px;
}
.mfa-status-loading {
  font-size: 13px;
  color: var(--text-muted);
}
.mfa-status-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
}
.mfa-status-banner.is-on {
  color: #2f7a44;
  background: rgba(47, 122, 68, 0.10);
  border: 1px solid rgba(47, 122, 68, 0.35);
}
.mfa-status-banner.is-off {
  color: var(--text-muted);
  background: var(--bg-warm, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
}
.mfa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.mfa-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg-warm, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mfa-device-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.mfa-device-icon {
  font-size: 20px;
  line-height: 1.2;
  flex: none;
}
.mfa-device-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.mfa-device-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

/* Turn off + Replace sit side by side once a token is active; a lone Set up
   button just fills the slot. */
.mfa-device-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mfa-note {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 10px 2px 0;
}

.mfa-recovery {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.mfa-recovery-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.mfa-recovery-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.mfa-recovery-desc + .mfa-recovery-desc {
  margin-top: 8px;
}

/* Replace-authenticator modal — reuses .sms-confirm-backdrop/.sms-confirm-dialog
   shells (see messages.css); these style only the MFA-specific innards. */
.mfa-modal-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 16px;
}
.mfa-qr-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mfa-qr {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  flex: none;
}
.mfa-secret-wrap {
  min-width: 0;
}
.mfa-secret-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.mfa-secret {
  display: inline-block;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  word-break: break-all;
  color: var(--text);
  background: var(--bg-warm, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.mfa-code-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.mfa-code-input {
  width: 100%;
  padding: 10px 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.3em;
  text-align: center;
  background: var(--bg-warm, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.mfa-code-input:disabled {
  opacity: 0.5;
}
.mfa-modal-error {
  font-size: 12.5px;
  color: var(--red);
  margin-top: 10px;
  line-height: 1.4;
}