.cn-dashboard { font-family: 'IBM Plex Mono', monospace; max-width: none; margin: 0; padding: 0 1.5rem; }
/* Header layout: h2 + toggle anchor left in a fixed slot; source picker
   sits after the toggle when in demo; mode/status pushed right via auto
   left-margin. Toggle has a min-width so its label flip (→ live ↔ → demo)
   doesn't shift the elements after it. */
.cn-header { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.cn-header h2 { margin: 0; font-size: 1.2rem; flex: none; }
/* Toggle: amber outlined button.
   Distinguishes it from the mode/status pills (which use mode-tinted
   pastel backgrounds). The amber accent + ⇄ swap glyph + hover-fill
   reads as "control to swap" rather than "current state". */
.cn-toggle {
  flex: none;
  min-width: 6.5rem;     /* fits ⇄ + the wider of "Use demo" / "Go live" */
  font-family: inherit;
  font-size: 0.8rem;
  padding: 2px 12px;
  border: 1px solid #f59e0b;         /* amber-500 accent edge */
  background: #fffbeb;               /* amber-50 — subtle warm bg */
  color: #92400e;                    /* amber-800 — strong readable text */
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);   /* subtle lift = button affordance */
  transition: background 80ms, border-color 80ms, transform 80ms;
}
.cn-toggle:hover  { background: #fef3c7; border-color: #d97706; }  /* amber-100 / 600 */
.cn-toggle:active { background: #fde68a; transform: translateY(1px); box-shadow: none; }
.cn-toggle:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.cn-source {
  flex: none;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 2px 6px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  background: #fff;
}
.cn-mode { margin-left: auto; flex: none; font-size: 0.8rem; padding: 2px 8px; border-radius: 3px; }
.cn-mode--demo { background: #fef3c7; color: #b45309; }
.cn-mode--live { background: #dcfce7; color: #15803d; }
.cn-mode--probing { background: #f3f4f6; color: #6b7280; }
.cn-info { font-size: 0.8rem; color: #6b7280; margin-bottom: 1rem; }
/* Soft-fallback diagnosis: amber-tinted, slightly more prominent than the
   neutral .cn-info, so the "your Go-live click didn't land, here's why"
   message reads as an action signal rather than chrome. */
.cn-info--warn {
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  padding: 6px 10px;
  border-radius: 2px;
}
.cn-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cn-table th { text-align: left; border-bottom: 2px solid #e5e7eb; padding: 4px 8px; font-weight: 600; }
.cn-table td { border-bottom: 1px solid #f3f4f6; padding: 4px 8px; }
.cn-table tr:hover { background: #f9fafb; }
.cn-right { text-align: right; }
.cn-mono { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; }
.cn-muted { color: #9ca3af; }
.cn-badge { font-size: 0.75rem; padding: 1px 6px; border-radius: 3px; }
.cn-badge--ok { background: #dcfce7; color: #15803d; }
.cn-badge--error { background: #fee2e2; color: #b91c1c; }
.cn-footer { margin-top: 1rem; font-size: 0.8rem; color: #9ca3af; }