diff --git a/packages/dashboard/app/components/CustomModelDropdown.css b/packages/dashboard/app/components/CustomModelDropdown.css
index 4493707d8..81d85db1a 100644
--- a/packages/dashboard/app/components/CustomModelDropdown.css
+++ b/packages/dashboard/app/components/CustomModelDropdown.css
@@ -311,1225 +311,3 @@
     width: min(360px, calc(100vw - 32px));
   }
 }
-
-/* ============================================================
-   THEME SYSTEM
-   ============================================================ */
-
-/* Smooth transitions for theme changes */
-html,
-html *,
-html *::before,
-html *::after {
-  transition:
-    background-color var(--transition-normal),
-    color var(--transition-normal),
-    border-color var(--transition-normal),
-    box-shadow var(--transition-normal);
-}
-
-/* Disable transitions on specific elements that shouldn't animate */
-html .card.dragging,
-html .card.dragging *,
-html .list-row.dragging,
-html .list-row.dragging *,
-html .column.drag-over,
-html .column.drag-over * {
-  transition: none !important;
-}
-
-/* ============================================================
-   LIGHT THEME (data-theme="light")
-   ============================================================ */
-[data-theme="light"] {
-  /* Backgrounds */
-  --bg: #ffffff;
-  --surface: #f6f8fa;
-  --card: #ffffff;
-  --card-hover: #f3f4f6;
-  --bg-secondary: #f6f8fa;
-  --bg-tertiary: #eaeef2;
-  --border: #d0d7de;
-
-  /* Text */
-  --text: #1f2328;
-  --text-muted: #656d76;
-  --text-dim: #8c959f;
-
-  /* Status colors (adjusted for light backgrounds) */
-  --triage: #9a6700;
-  --todo: #0969da;
-  --in-progress: #00bcd4;
-  --in-progress-rgb: 0, 188, 212;
-  --in-review: #1a7f37;
-  --done: #6e7781;
-
-  /* Feedback colors */
-  --color-success: #1a7f37;
-  --color-error: #cf222e;
-  --color-muted: #6e7781;
-  --color-warning: #9a6700;
-
-  /* Executor status bar state accents (lower intensity for light backgrounds) */
-  --executor-status-error-bg: color-mix(in srgb, var(--color-error) 6%, transparent);
-
-  /* Changed-file status colors (adjusted for light backgrounds) */
-  --status-color-added: #1a7f37;
-  --status-color-modified: #0969da;
-  --status-color-deleted: #cf222e;
-  --status-color-unknown: #6e7781;
-
-  /* Shadow for light mode */
-  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
-  --shadow-md: 0 4px 6px color-mix(in srgb, var(--text) 12%, transparent);
-  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 15%, transparent);
-  --shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 18%, transparent);
-  --glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
-  --glow-warning: 0 0 8px color-mix(in srgb, var(--color-warning) 30%, transparent);
-  --glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 30%, transparent);
-  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 12%, transparent);
-  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
-  /* CTA tokens for light mode */
-  --cta-bg: #1a7f37;
-  --cta-border: #1f883d;
-  --cta-text: #fff;
-  --cta-bg-hover: #1f883d;
-  --cta-border-hover: #2ea043;
-  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
-
-  /* Info color for light mode */
-  --color-info: #0969da;
-
-  /* Workflow Step colors for light mode */
-  --ws-pre-merge: #2563eb;
-  --ws-post-merge: #0d9488;
-  --ws-info: #0891b2;
-  --ws-warning: #a16207;
-  --ws-success: #16a34a;
-  --ws-error: #dc2626;
-  --ws-error-dark: #b91c1c;
-  --ws-teal: #0d9488;
-  --ws-quality: #2563eb;
-  --ws-security: #dc2626;
-
-  /* Status error colors for light mode */
-  --color-error-dark: #a40e26;
-  --status-error-bg: color-mix(in srgb, var(--color-error-dark, #a40e26) 15%, transparent);
-  --status-error-bg-deep: color-mix(in srgb, var(--color-error-dark, #a40e26) 20%, transparent);
-
-  /* Logo accent for light mode */
-  --logo-accent: var(--todo);
-
-  /* Accent color for light mode */
-  --accent: #6a4fa0;
-
-  /* Log entry backgrounds (lower intensity for light backgrounds) */
-  --log-tool-bg: color-mix(in srgb, var(--accent) 6%, transparent);
-  --log-success-bg: color-mix(in srgb, var(--color-success) 5%, transparent);
-  --log-error-bg: color-mix(in srgb, var(--color-error) 5%, transparent);
-
-  --shadow: var(--shadow-lg);
-
-  /* Mailbox FAB & badge text — ensure contrast on light backgrounds */
-  --fab-text: #fff;
-
-  /* Mission autopilot — darker for light backgrounds */
-  --autopilot-icon: #ca8a04;
-  --autopilot-shadow: color-mix(in srgb, var(--color-success) 40%, transparent);
-
-  /* Terminal background */
-  --terminal-bg: #f6f8fa;
-
-  /* Card mission badge — darker purple for light bg */
-  --badge-mission-text: #7c3aed;
-  --badge-mission-text-hover: #8b5cf6;
-  --badge-mission-bg: color-mix(in srgb, var(--badge-mission-text) 12%, transparent);
-  --badge-mission-bg-hover: color-mix(in srgb, var(--badge-mission-text-hover) 22%, transparent);
-
-  /* Mission event type colors — darker/more saturated for light readability */
-  --event-error-text: #dc2626;
-  --event-state-text: #2563eb;
-  --event-task-text: #059669;
-  --event-slice-text: #d97706;
-  --event-autopilot-text: #9333ea;
-  --event-error-bg: color-mix(in srgb, var(--event-error-text) 12%, transparent);
-  --event-state-bg: color-mix(in srgb, var(--event-state-text) 12%, transparent);
-  --event-task-bg: color-mix(in srgb, var(--event-task-text) 12%, transparent);
-  --event-slice-bg: color-mix(in srgb, var(--event-slice-text) 12%, transparent);
-  --event-autopilot-bg: color-mix(in srgb, var(--event-autopilot-text) 12%, transparent);
-
-  /* Mission toggle & badge backgrounds */
-  --toggle-checked-bg: color-mix(in srgb, var(--color-success) 15%, transparent);
-  --meta-badge-bg: color-mix(in srgb, var(--color-success) 8%, transparent);
-
-  /* Star favorites */
-  --star-idle: #9ca3af;
-  --star-active: #d97706;
-}
-
-/* Light theme specific overrides */
-[data-theme="light"] .modal-overlay,
-[data-theme="light"] .agent-detail-overlay,
-[data-theme="light"] .agent-dialog-overlay,
-[data-theme="light"] .chat-new-dialog-backdrop {
-  background: color-mix(in srgb, var(--text) 50%, transparent);
-}
-
-[data-theme="light"] .modal-header {
-  background: color-mix(in srgb, var(--surface) 80%, transparent);
-}
-
-[data-theme="light"] .modal-actions {
-  background: color-mix(in srgb, var(--surface) 60%, transparent);
-}
-
-[data-theme="light"] .settings-sidebar {
-  background: color-mix(in srgb, var(--surface) 60%, transparent);
-}
-
-[data-theme="light"] .toast-success {
-  background: var(--cta-bg);
-}
-
-[data-theme="light"] .toast-error {
-  background: var(--color-error-dark);
-}
-
-[data-theme="light"] .toast-info {
-  background: var(--color-info);
-}
-
-[data-theme="light"] .btn-task-create {
-  background: var(--cta-bg);
-  border-color: var(--cta-border);
-}
-
-[data-theme="light"] .btn-task-create:hover {
-  background: var(--cta-bg-hover);
-  border-color: var(--cta-border-hover);
-  box-shadow: var(--cta-glow);
-}
-
-[data-theme="light"] .btn-primary {
-  background: var(--cta-bg);
-  border-color: var(--cta-border);
-}
-
-[data-theme="light"] .btn-primary:hover {
-  background: var(--cta-bg-hover);
-  border-color: var(--cta-border-hover);
-  box-shadow: var(--cta-glow);
-}
-
-[data-theme="light"] .btn-danger {
-  background: #cf222e;
-  border-color: #a40e26;
-}
-
-[data-theme="light"] .btn-danger:hover {
-  background: #a40e26;
-  box-shadow: var(--glow-danger);
-}
-
-[data-theme="light"] .btn-warning {
-  background: var(--triage);
-  border-color: color-mix(in srgb, var(--triage) 70%, black);
-}
-
-[data-theme="light"] .btn-warning:hover {
-  background: color-mix(in srgb, var(--triage) 70%, black);
-  box-shadow: var(--glow-warning);
-}
-
-[data-theme="light"] .btn-secondary {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text);
-}
-[data-theme="light"] .btn-secondary:hover {
-  background: var(--card-hover);
-  border-color: var(--text-muted);
-}
-[data-theme="light"] .btn-secondary:active {
-  transform: scale(0.97);
-}
-[data-theme="light"] .btn-secondary:focus-visible {
-  box-shadow: var(--focus-ring-strong);
-  border-color: var(--todo);
-}
-
-/* ============================================================
-   THEME SELECTOR COMPONENT STYLES
-   ============================================================ */
-
-.theme-selector {
-  padding: 0 20px 20px;
-}
-
-.theme-mode-toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: var(--space-xs);
-  margin-bottom: 20px;
-}
-
-.theme-mode-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: var(--space-sm) var(--space-lg);
-  background: none;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  flex: 1;
-}
-
-.theme-mode-btn:hover {
-  color: var(--text);
-  background: var(--card-hover);
-}
-
-.theme-mode-btn.active {
-  background: var(--todo);
-  color: var(--bg);
-}
-
-.theme-mode-btn.active:hover {
-  background: var(--todo);
-  color: var(--bg);
-}
-
-.theme-mode-btn:focus-visible {
-  outline: none;
-  border-color: var(--todo);
-  box-shadow: var(--focus-ring-strong);
-}
-
-.theme-section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: var(--space-md);
-}
-
-.theme-font-size-toggle {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-sm);
-  margin-bottom: var(--space-lg);
-}
-
-.theme-font-size-btn {
-  align-items: center;
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 13px;
-  font-weight: 500;
-  justify-content: center;
-  min-height: calc(var(--space-2xl) + var(--space-sm));
-  padding: var(--space-sm) var(--space-md);
-  transition: all var(--transition-fast);
-}
-
-.theme-font-size-btn:hover {
-  border-color: var(--todo);
-  color: var(--text);
-}
-
-.theme-font-size-btn.active {
-  background: color-mix(in srgb, var(--todo) 14%, transparent);
-  border-color: var(--todo);
-  color: var(--text);
-}
-
-.theme-font-size-btn:focus-visible {
-  outline: none;
-  border-color: var(--todo);
-  box-shadow: var(--focus-ring-strong);
-}
-
-.theme-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-md);
-}
-
-@media (max-width: 768px) {
-  .theme-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.theme-option {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-md);
-  background: var(--card);
-  border: 2px solid var(--border);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.theme-option:hover {
-  border-color: var(--todo);
-  background: var(--card-hover);
-}
-
-.theme-option.active {
-  border-color: var(--todo);
-  background: color-mix(in srgb, var(--todo) 14%, transparent);
-}
-
-.theme-option:focus-visible {
-  outline: none;
-  border-color: var(--todo);
-  box-shadow: var(--focus-ring-strong);
-}
-
-.theme-option-swatch {
-  width: calc(var(--space-2xl) + var(--space-lg));
-  height: calc(var(--space-2xl) + var(--space-lg));
-  border-radius: var(--radius);
-  border: 2px solid var(--border);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  overflow: hidden;
-}
-
-.theme-option-swatch-sample {
-  display: block;
-  min-height: 0;
-}
-
-.theme-option-swatch-sample-1 {
-  background: var(--swatch-sample-1);
-}
-
-.theme-option-swatch-sample-2 {
-  background: var(--swatch-sample-2);
-}
-
-.theme-option-swatch-sample-3 {
-  background: var(--swatch-sample-3);
-}
-
-.theme-option-swatch-sample-4 {
-  background: var(--swatch-sample-4);
-}
-
-.theme-option-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text);
-  text-align: center;
-}
-
-/* Theme preview swatch colors */
-.theme-swatch-default {
-  --swatch-sample-1: #0d1117;
-  --swatch-sample-2: #161b22;
-  --swatch-sample-3: #58a6ff;
-  --swatch-sample-4: #79c0ff;
-}
-
-.theme-swatch-ocean {
-  --swatch-sample-1: #0a1929;
-  --swatch-sample-2: #132f4c;
-  --swatch-sample-3: #4fc3f7;
-  --swatch-sample-4: #00bcd4;
-}
-
-.theme-swatch-forest {
-  --swatch-sample-1: #0d2818;
-  --swatch-sample-2: #1a472a;
-  --swatch-sample-3: #4caf50;
-  --swatch-sample-4: #2e7d32;
-}
-
-.theme-swatch-sunset {
-  --swatch-sample-1: #2d1f1f;
-  --swatch-sample-2: #4a2c2c;
-  --swatch-sample-3: #ff8a65;
-  --swatch-sample-4: #ff7043;
-}
-
-.theme-swatch-zen {
-  --swatch-sample-1: #0c0c0c;
-  --swatch-sample-2: #111111;
-  --swatch-sample-3: #6b7b8c;
-  --swatch-sample-4: #7a8590;
-}
-
-.theme-swatch-berry {
-  --swatch-sample-1: #1a0b2e;
-  --swatch-sample-2: #2d1b4e;
-  --swatch-sample-3: #c084fc;
-  --swatch-sample-4: #ec4899;
-}
-
-.theme-swatch-monochrome {
-  --swatch-sample-1: #0d0d0d;
-  --swatch-sample-2: #1a1a1a;
-  --swatch-sample-3: #a3a3a3;
-  --swatch-sample-4: #d4d4d4;
-}
-
-.theme-swatch-slate {
-  --swatch-sample-1: #1e293b;
-  --swatch-sample-2: #334155;
-  --swatch-sample-3: #60a5fa;
-  --swatch-sample-4: #22d3ee;
-}
-
-.theme-swatch-ash {
-  --swatch-sample-1: #292524;
-  --swatch-sample-2: #44403c;
-  --swatch-sample-3: #a8a29e;
-  --swatch-sample-4: #d6d3d1;
-}
-
-.theme-swatch-graphite {
-  --swatch-sample-1: #18181b;
-  --swatch-sample-2: #27272a;
-  --swatch-sample-3: #94a3b8;
-  --swatch-sample-4: #cbd5e1;
-}
-
-.theme-swatch-ember {
-  --swatch-sample-1: #18181b;
-  --swatch-sample-2: #27272a;
-  --swatch-sample-3: #f97316;
-  --swatch-sample-4: #ef4444;
-}
-
-.theme-swatch-rust {
-  --swatch-sample-1: #0f0b09;
-  --swatch-sample-2: #1a1410;
-  --swatch-sample-3: #e06830;
-  --swatch-sample-4: #e88040;
-}
-
-.theme-swatch-copper {
-  --swatch-sample-1: #0e0c0a;
-  --swatch-sample-2: #181410;
-  --swatch-sample-3: #e89545;
-  --swatch-sample-4: #f0a858;
-}
-
-.theme-swatch-foundry {
-  --swatch-sample-1: #0c0806;
-  --swatch-sample-2: #15100c;
-  --swatch-sample-3: #ffab20;
-  --swatch-sample-4: #ffc040;
-}
-
-.theme-swatch-carbon {
-  --swatch-sample-1: #0a0b0d;
-  --swatch-sample-2: #111318;
-  --swatch-sample-3: #6a9acf;
-  --swatch-sample-4: #7ab0e0;
-}
-
-.theme-swatch-sandstone {
-  --swatch-sample-1: #1a1712;
-  --swatch-sample-2: #241f18;
-  --swatch-sample-3: #d4a06a;
-  --swatch-sample-4: #e0b080;
-}
-
-.theme-swatch-lagoon {
-  --swatch-sample-1: #0a1214;
-  --swatch-sample-2: #101c1f;
-  --swatch-sample-3: #50d8c0;
-  --swatch-sample-4: #60e8d0;
-}
-
-.theme-swatch-frost {
-  --swatch-sample-1: #0c0e14;
-  --swatch-sample-2: #121520;
-  --swatch-sample-3: #8ac8f8;
-  --swatch-sample-4: #9ad8ff;
-}
-
-.theme-swatch-lavender {
-  --swatch-sample-1: #14101a;
-  --swatch-sample-2: #1c1624;
-  --swatch-sample-3: #c8a0e8;
-  --swatch-sample-4: #d8b0f0;
-}
-
-.theme-swatch-neon-bloom {
-  --swatch-sample-1: #120a18;
-  --swatch-sample-2: #1a1024;
-  --swatch-sample-3: #f080d0;
-  --swatch-sample-4: #ff90e0;
-}
-
-.theme-swatch-sepia {
-  --swatch-sample-1: #161210;
-  --swatch-sample-2: #201a16;
-  --swatch-sample-3: #d8b878;
-  --swatch-sample-4: #e8c888;
-}
-
-.theme-swatch-silver {
-  --swatch-sample-1: #27272a;
-  --swatch-sample-2: #3f3f46;
-  --swatch-sample-3: #94a3b8;
-  --swatch-sample-4: #e2e8f0;
-}
-
-.theme-swatch-high-contrast {
-  --swatch-sample-1: #000000;
-  --swatch-sample-2: #0a0a0a;
-  --swatch-sample-3: #00ffff;
-  --swatch-sample-4: #ffff00;
-}
-
-.theme-swatch-industrial {
-  --swatch-sample-1: #0c0c0c;
-  --swatch-sample-2: #141414;
-  --swatch-sample-3: #ff6b00;
-  --swatch-sample-4: #ff8c00;
-}
-
-.theme-swatch-solarized {
-  --swatch-sample-1: #002b36;
-  --swatch-sample-2: #073642;
-  --swatch-sample-3: #268bd2;
-  --swatch-sample-4: #2aa198;
-}
-
-.theme-swatch-factory {
-  --swatch-sample-1: #0a0a0a;
-  --swatch-sample-2: #111111;
-  --swatch-sample-3: #f59e0b;
-  --swatch-sample-4: #06b6d4;
-}
-
-.theme-swatch-ayu {
-  --swatch-sample-1: #0f1419;
-  --swatch-sample-2: #131d27;
-  --swatch-sample-3: #39bae6;
-  --swatch-sample-4: #ffb454;
-}
-
-.theme-swatch-one-dark {
-  --swatch-sample-1: #282c34;
-  --swatch-sample-2: #21252b;
-  --swatch-sample-3: #61afef;
-  --swatch-sample-4: #00e5ff;
-}
-
-.theme-swatch-nord {
-  --swatch-sample-1: #2e3440;
-  --swatch-sample-2: #3b4252;
-  --swatch-sample-3: #88c0d0;
-  --swatch-sample-4: #81a1c1;
-}
-
-.theme-swatch-dracula {
-  --swatch-sample-1: #282a36;
-  --swatch-sample-2: #21222c;
-  --swatch-sample-3: #8be9fd;
-  --swatch-sample-4: #00e5ff;
-}
-
-.theme-swatch-gruvbox {
-  --swatch-sample-1: #282828;
-  --swatch-sample-2: #1d2021;
-  --swatch-sample-3: #83a598;
-  --swatch-sample-4: #d3869b;
-}
-
-.theme-swatch-tokyo-night {
-  --swatch-sample-1: #1a1b26;
-  --swatch-sample-2: #16161e;
-  --swatch-sample-3: #7aa2f7;
-  --swatch-sample-4: #00e5ff;
-}
-
-.theme-swatch-catppuccin-mocha {
-  --swatch-sample-1: #1e1e2e;
-  --swatch-sample-2: #181825;
-  --swatch-sample-3: #89b4fa;
-  --swatch-sample-4: #89dceb;
-}
-
-.theme-swatch-github-dark {
-  --swatch-sample-1: #0d1117;
-  --swatch-sample-2: #010409;
-  --swatch-sample-3: #58a6ff;
-  --swatch-sample-4: #79c0ff;
-}
-
-.theme-swatch-everforest {
-  --swatch-sample-1: #2d353b;
-  --swatch-sample-2: #272e33;
-  --swatch-sample-3: #7fbbb3;
-  --swatch-sample-4: #e0c8a8;
-}
-
-.theme-swatch-rose-pine {
-  --swatch-sample-1: #191724;
-  --swatch-sample-2: #1f1d2e;
-  --swatch-sample-3: #c4a7e7;
-  --swatch-sample-4: #ebbcba;
-}
-
-.theme-swatch-kanagawa {
-  --swatch-sample-1: #1f1f28;
-  --swatch-sample-2: #16161d;
-  --swatch-sample-3: #7e9cd8;
-  --swatch-sample-4: #7e9cd8;
-}
-
-.theme-swatch-night-owl {
-  --swatch-sample-1: #011627;
-  --swatch-sample-2: #01111d;
-  --swatch-sample-3: #82aaff;
-  --swatch-sample-4: #addb67;
-}
-
-.theme-swatch-palenight {
-  --swatch-sample-1: #292d3e;
-  --swatch-sample-2: #1e2235;
-  --swatch-sample-3: #82aaff;
-  --swatch-sample-4: #ffcb6b;
-}
-
-.theme-swatch-monokai-pro {
-  --swatch-sample-1: #2d2a2e;
-  --swatch-sample-2: #252229;
-  --swatch-sample-3: #78dce8;
-  --swatch-sample-4: #ff6188;
-}
-
-.theme-swatch-slime {
-  --swatch-sample-1: #0a0e09;
-  --swatch-sample-2: #0f150d;
-  --swatch-sample-3: #8aff40;
-  --swatch-sample-4: #40e8a0;
-}
-
-.theme-swatch-brutalist {
-  --swatch-sample-1: #101010;
-  --swatch-sample-2: #171717;
-  --swatch-sample-3: #ff6a00;
-  --swatch-sample-4: #ffd100;
-}
-
-.theme-swatch-neon-city {
-  --swatch-sample-1: #0d0d15;
-  --swatch-sample-2: #121326;
-  --swatch-sample-3: #ff2d95;
-  --swatch-sample-4: #00f0ff;
-}
-
-.theme-swatch-parchment {
-  --swatch-sample-1: #1b1712;
-  --swatch-sample-2: #252019;
-  --swatch-sample-3: #d08a4b;
-  --swatch-sample-4: #be6e3c;
-}
-
-.theme-swatch-terminal {
-  --swatch-sample-1: #0a0a0a;
-  --swatch-sample-2: #0f120d;
-  --swatch-sample-3: #33ff00;
-  --swatch-sample-4: #8fff38;
-}
-
-.theme-swatch-glass {
-  --swatch-sample-1: #13111f;
-  --swatch-sample-2: color-mix(in srgb, #221b34 78%, transparent);
-  --swatch-sample-3: #c86bff;
-  --swatch-sample-4: #ff7aa8;
-}
-
-.theme-swatch-horizon {
-  --swatch-sample-1: #1c1e26;
-  --swatch-sample-2: #16161c;
-  --swatch-sample-3: #e59371;
-  --swatch-sample-4: #f08c42;
-}
-
-.theme-swatch-vitesse {
-  --swatch-sample-1: #121817;
-  --swatch-sample-2: #0d1210;
-  --swatch-sample-3: #4c9a91;
-  --swatch-sample-4: #dca561;
-}
-
-.theme-swatch-outrun {
-  --swatch-sample-1: #0a0a14;
-  --swatch-sample-2: #0d0d1a;
-  --swatch-sample-3: #ff2d95;
-  --swatch-sample-4: #b537f2;
-}
-
-.theme-swatch-snazzy {
-  --swatch-sample-1: #282a36;
-  --swatch-sample-2: #1e1f29;
-  --swatch-sample-3: #ff5c57;
-  --swatch-sample-4: #5af78e;
-}
-
-.theme-swatch-porple {
-  --swatch-sample-1: #292d3e;
-  --swatch-sample-2: #1e2030;
-  --swatch-sample-3: #c792ea;
-  --swatch-sample-4: #82aaff;
-}
-
-.theme-swatch-espresso {
-  --swatch-sample-1: #2c1f1a;
-  --swatch-sample-2: #231813;
-  --swatch-sample-3: #d4a574;
-  --swatch-sample-4: #c17d56;
-}
-
-.theme-swatch-mars {
-  --swatch-sample-1: #1a1210;
-  --swatch-sample-2: #140e0c;
-  --swatch-sample-3: #c1440e;
-  --swatch-sample-4: #e77d3d;
-}
-
-.theme-swatch-poimandres {
-  --swatch-sample-1: #1a1b26;
-  --swatch-sample-2: #14151f;
-  --swatch-sample-3: #89ddff;
-  --swatch-sample-4: #5de4c7;
-}
-
-/* Light mode swatch overrides */
-[data-theme="light"] .theme-swatch-factory {
-  --swatch-sample-1: #f5f5f5;
-  --swatch-sample-2: #ffffff;
-  --swatch-sample-3: #d97706;
-  --swatch-sample-4: #0891b2;
-}
-
-[data-theme="light"] .theme-swatch-ayu {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f3f3f3;
-  --swatch-sample-3: #007acc;
-  --swatch-sample-4: #ff8f40;
-}
-
-[data-theme="light"] .theme-swatch-zen {
-  --swatch-sample-1: #f5f5f5;
-  --swatch-sample-2: #fafafa;
-  --swatch-sample-3: #5a6a7a;
-  --swatch-sample-4: #6a757f;
-}
-
-[data-theme="light"] .theme-swatch-nord {
-  --swatch-sample-1: #eceff4;
-  --swatch-sample-2: #e5e9f0;
-  --swatch-sample-3: #5e81ac;
-  --swatch-sample-4: #5e81ac;
-}
-
-[data-theme="light"] .theme-swatch-dracula {
-  --swatch-sample-1: #f8f8f2;
-  --swatch-sample-2: #efeefa;
-  --swatch-sample-3: #0097a7;
-  --swatch-sample-4: #00bcd4;
-}
-
-[data-theme="light"] .theme-swatch-gruvbox {
-  --swatch-sample-1: #fbf1c7;
-  --swatch-sample-2: #f2e5bc;
-  --swatch-sample-3: #076678;
-  --swatch-sample-4: #8f3f71;
-}
-
-[data-theme="light"] .theme-swatch-tokyo-night {
-  --swatch-sample-1: #e1e2e7;
-  --swatch-sample-2: #d5d6db;
-  --swatch-sample-3: #3b5ea5;
-  --swatch-sample-4: #00bcd4;
-}
-
-[data-theme="light"] .theme-swatch-catppuccin-mocha {
-  --swatch-sample-1: #eff1f5;
-  --swatch-sample-2: #e6e9ef;
-  --swatch-sample-3: #1e66f5;
-  --swatch-sample-4: #04a5e5;
-}
-
-[data-theme="light"] .theme-swatch-github-dark {
-  --swatch-sample-1: #ffffff;
-  --swatch-sample-2: #f6f8fa;
-  --swatch-sample-3: #0969da;
-  --swatch-sample-4: #0969da;
-}
-
-[data-theme="light"] .theme-swatch-everforest {
-  --swatch-sample-1: #fdf6e3;
-  --swatch-sample-2: #f4f0d9;
-  --swatch-sample-3: #3a94a5;
-  --swatch-sample-4: #83a08a;
-}
-
-[data-theme="light"] .theme-swatch-rose-pine {
-  --swatch-sample-1: #faf4ed;
-  --swatch-sample-2: #fffaf3;
-  --swatch-sample-3: #907aa9;
-  --swatch-sample-4: #b4637a;
-}
-
-[data-theme="light"] .theme-swatch-kanagawa {
-  --swatch-sample-1: #edeadd;
-  --swatch-sample-2: #e1ddd4;
-  --swatch-sample-3: #4e76b5;
-  --swatch-sample-4: #4e76b5;
-}
-
-[data-theme="light"] .theme-swatch-one-dark {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f0f0f0;
-  --swatch-sample-3: #4078f2;
-  --swatch-sample-4: #0184bc;
-}
-
-[data-theme="light"] .theme-swatch-night-owl {
-  --swatch-sample-1: #f6f7f9;
-  --swatch-sample-2: #eef0f4;
-  --swatch-sample-3: #2563eb;
-  --swatch-sample-4: #5a9e2f;
-}
-
-[data-theme="light"] .theme-swatch-palenight {
-  --swatch-sample-1: #f5f7fa;
-  --swatch-sample-2: #ebeef5;
-  --swatch-sample-3: #3b6fcf;
-  --swatch-sample-4: #c49020;
-}
-
-[data-theme="light"] .theme-swatch-monokai-pro {
-  --swatch-sample-1: #faf8f5;
-  --swatch-sample-2: #f0ece5;
-  --swatch-sample-3: #2d8fa0;
-  --swatch-sample-4: #c4405e;
-}
-
-[data-theme="light"] .theme-swatch-slime {
-  --swatch-sample-1: #f2f7ea;
-  --swatch-sample-2: #e6efda;
-  --swatch-sample-3: #3d8f10;
-  --swatch-sample-4: #1a8a6a;
-}
-
-[data-theme="light"] .theme-swatch-brutalist {
-  --swatch-sample-1: #ece9e4;
-  --swatch-sample-2: #f7f4ef;
-  --swatch-sample-3: #d9480f;
-  --swatch-sample-4: #b8860b;
-}
-
-[data-theme="light"] .theme-swatch-neon-city {
-  --swatch-sample-1: #f7f5ff;
-  --swatch-sample-2: #f1edff;
-  --swatch-sample-3: #cc166e;
-  --swatch-sample-4: #008e9b;
-}
-
-[data-theme="light"] .theme-swatch-parchment {
-  --swatch-sample-1: #f5f0e8;
-  --swatch-sample-2: #efe7dc;
-  --swatch-sample-3: #a8562f;
-  --swatch-sample-4: #8f4e2a;
-}
-
-[data-theme="light"] .theme-swatch-terminal {
-  --swatch-sample-1: #e7f5dd;
-  --swatch-sample-2: #deefd2;
-  --swatch-sample-3: #2d6b14;
-  --swatch-sample-4: #4c8f25;
-}
-
-[data-theme="light"] .theme-swatch-glass {
-  --swatch-sample-1: #eceaf5;
-  --swatch-sample-2: color-mix(in srgb, #ffffff 75%, transparent);
-  --swatch-sample-3: #9d40cf;
-  --swatch-sample-4: #c74b7a;
-}
-
-[data-theme="light"] .theme-swatch-slate {
-  --swatch-sample-1: #f1f5f9;
-  --swatch-sample-2: #e2e8f0;
-  --swatch-sample-3: #3b5ea5;
-  --swatch-sample-4: #4f7090;
-}
-
-[data-theme="light"] .theme-swatch-ash {
-  --swatch-sample-1: #fafaf9;
-  --swatch-sample-2: #f5f5f4;
-  --swatch-sample-3: #5a6a7a;
-  --swatch-sample-4: #768694;
-}
-
-[data-theme="light"] .theme-swatch-graphite {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f4f4f5;
-  --swatch-sample-3: #6f7f90;
-  --swatch-sample-4: #8a99aa;
-}
-
-[data-theme="light"] .theme-swatch-ember {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f4f4f5;
-  --swatch-sample-3: #d9480f;
-  --swatch-sample-4: #e8646a;
-}
-
-[data-theme="light"] .theme-swatch-rust {
-  --swatch-sample-1: #f5efe8;
-  --swatch-sample-2: #ebe3d8;
-  --swatch-sample-3: #a04020;
-  --swatch-sample-4: #b85828;
-}
-
-[data-theme="light"] .theme-swatch-copper {
-  --swatch-sample-1: #f3ede6;
-  --swatch-sample-2: #e8e0d6;
-  --swatch-sample-3: #905820;
-  --swatch-sample-4: #a87030;
-}
-
-[data-theme="light"] .theme-swatch-foundry {
-  --swatch-sample-1: #f5f0e6;
-  --swatch-sample-2: #ebe4d6;
-  --swatch-sample-3: #c07808;
-  --swatch-sample-4: #d08a10;
-}
-
-[data-theme="light"] .theme-swatch-carbon {
-  --swatch-sample-1: #eef0f4;
-  --swatch-sample-2: #e2e6ec;
-  --swatch-sample-3: #3a6090;
-  --swatch-sample-4: #4878a0;
-}
-
-[data-theme="light"] .theme-swatch-sandstone {
-  --swatch-sample-1: #f5f0e8;
-  --swatch-sample-2: #ebe4d8;
-  --swatch-sample-3: #a07040;
-  --swatch-sample-4: #b08050;
-}
-
-[data-theme="light"] .theme-swatch-lagoon {
-  --swatch-sample-1: #eef5f3;
-  --swatch-sample-2: #e0ebe8;
-  --swatch-sample-3: #208070;
-  --swatch-sample-4: #289080;
-}
-
-[data-theme="light"] .theme-swatch-frost {
-  --swatch-sample-1: #f0f4f8;
-  --swatch-sample-2: #e4eaf0;
-  --swatch-sample-3: #3078a8;
-  --swatch-sample-4: #4088b8;
-}
-
-[data-theme="light"] .theme-swatch-lavender {
-  --swatch-sample-1: #f4f0f8;
-  --swatch-sample-2: #e8e2f0;
-  --swatch-sample-3: #8060a0;
-  --swatch-sample-4: #9070b0;
-}
-
-[data-theme="light"] .theme-swatch-neon-bloom {
-  --swatch-sample-1: #f8f0f8;
-  --swatch-sample-2: #f0e4f0;
-  --swatch-sample-3: #a03090;
-  --swatch-sample-4: #b040a0;
-}
-
-[data-theme="light"] .theme-swatch-sepia {
-  --swatch-sample-1: #f5f0e4;
-  --swatch-sample-2: #ece4d4;
-  --swatch-sample-3: #907040;
-  --swatch-sample-4: #a08050;
-}
-
-[data-theme="light"] .theme-swatch-silver {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f4f4f5;
-  --swatch-sample-3: #6b7280;
-  --swatch-sample-4: #9ca3af;
-}
-
-[data-theme="light"] .theme-swatch-horizon {
-  --swatch-sample-1: #fdf0ed;
-  --swatch-sample-2: #f9cec0;
-  --swatch-sample-3: #e8646a;
-  --swatch-sample-4: #f08c42;
-}
-
-[data-theme="light"] .theme-swatch-vitesse {
-  --swatch-sample-1: #f8f5f0;
-  --swatch-sample-2: #efe9e0;
-  --swatch-sample-3: #3a8578;
-  --swatch-sample-4: #c08040;
-}
-
-[data-theme="light"] .theme-swatch-outrun {
-  --swatch-sample-1: #f0f0f5;
-  --swatch-sample-2: #e8e8ef;
-  --swatch-sample-3: #d02080;
-  --swatch-sample-4: #9030c8;
-}
-
-[data-theme="light"] .theme-swatch-snazzy {
-  --swatch-sample-1: #fafafa;
-  --swatch-sample-2: #f0f0f2;
-  --swatch-sample-3: #d04040;
-  --swatch-sample-4: #30a050;
-}
-
-[data-theme="light"] .theme-swatch-porple {
-  --swatch-sample-1: #f5f3f7;
-  --swatch-sample-2: #eae7ef;
-  --swatch-sample-3: #9060d8;
-  --swatch-sample-4: #4080c8;
-}
-
-[data-theme="light"] .theme-swatch-espresso {
-  --swatch-sample-1: #f5ece4;
-  --swatch-sample-2: #ebe1d6;
-  --swatch-sample-3: #a07050;
-  --swatch-sample-4: #906040;
-}
-
-[data-theme="light"] .theme-swatch-mars {
-  --swatch-sample-1: #f5ece6;
-  --swatch-sample-2: #ebe0d4;
-  --swatch-sample-3: #a03010;
-  --swatch-sample-4: #c06030;
-}
-
-[data-theme="light"] .theme-swatch-poimandres {
-  --swatch-sample-1: #f0f0f5;
-  --swatch-sample-2: #e6e6ee;
-  --swatch-sample-3: #4090c0;
-  --swatch-sample-4: #30a090;
-}
-
-/* Reset to defaults button */
-.theme-reset-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  margin-top: 20px;
-  padding: 10px 16px;
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  width: 100%;
-}
-
-.theme-reset-btn:hover {
-  background: var(--card-hover);
-  color: var(--text);
-  border-color: var(--text-muted);
-}
-
-.theme-reset-btn:focus-visible {
-  outline: none;
-  border-color: var(--todo);
-  box-shadow: var(--focus-ring-strong);
-}
-
-/* Theme current preview in settings */
-.theme-current-preview {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 20px;
-}
-
-.theme-preview-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: var(--surface);
-  border-radius: var(--radius);
-  color: var(--todo);
-}
-
-.theme-preview-info {
-  flex: 1;
-}
-
-.theme-preview-label {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 2px;
-}
-
-.theme-preview-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text);
-  text-transform: capitalize;
-}
-
-@media (max-width: 768px) {
-  /* Model combobox dropdown: mobile-friendly sizing */
-  .model-combobox-dropdown {
-    max-height: 50vh;
-    width: min(360px, calc(100vw - 32px));
-  }
-
-  .model-combobox-search {
-    font-size: 16px;
-  }
-
-  .model-combobox-option {
-    min-height: 36px;
-  }
-
-  .theme-selector {
-    padding: 0 14px 14px;
-  }
-
-  .theme-font-size-toggle {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/packages/dashboard/app/components/ThemeSelector.css b/packages/dashboard/app/components/ThemeSelector.css
new file mode 100644
index 000000000..1605c4480
--- /dev/null
+++ b/packages/dashboard/app/components/ThemeSelector.css
@@ -0,0 +1,975 @@
+/* ============================================================
+   THEME SELECTOR COMPONENT STYLES
+   ============================================================ */
+
+.theme-selector {
+  padding: 0 20px 20px;
+}
+
+.theme-mode-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-xs);
+  margin-bottom: 20px;
+}
+
+.theme-mode-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--space-sm) var(--space-lg);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  flex: 1;
+}
+
+.theme-mode-btn:hover {
+  color: var(--text);
+  background: var(--card-hover);
+}
+
+.theme-mode-btn.active {
+  background: var(--todo);
+  color: var(--bg);
+}
+
+.theme-mode-btn.active:hover {
+  background: var(--todo);
+  color: var(--bg);
+}
+
+.theme-mode-btn:focus-visible {
+  outline: none;
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring-strong);
+}
+
+.theme-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--space-md);
+}
+
+.theme-font-size-toggle {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+}
+
+.theme-font-size-btn {
+  align-items: center;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 500;
+  justify-content: center;
+  min-height: calc(var(--space-2xl) + var(--space-sm));
+  padding: var(--space-sm) var(--space-md);
+  transition: all var(--transition-fast);
+}
+
+.theme-font-size-btn:hover {
+  border-color: var(--todo);
+  color: var(--text);
+}
+
+.theme-font-size-btn.active {
+  background: color-mix(in srgb, var(--todo) 14%, transparent);
+  border-color: var(--todo);
+  color: var(--text);
+}
+
+.theme-font-size-btn:focus-visible {
+  outline: none;
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring-strong);
+}
+
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 768px) {
+  .theme-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.theme-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  background: var(--card);
+  border: 2px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.theme-option:hover {
+  border-color: var(--todo);
+  background: var(--card-hover);
+}
+
+.theme-option.active {
+  border-color: var(--todo);
+  background: color-mix(in srgb, var(--todo) 14%, transparent);
+}
+
+.theme-option:focus-visible {
+  outline: none;
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring-strong);
+}
+
+.theme-option-swatch {
+  width: calc(var(--space-2xl) + var(--space-lg));
+  height: calc(var(--space-2xl) + var(--space-lg));
+  border-radius: var(--radius);
+  border: 2px solid var(--border);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  overflow: hidden;
+}
+
+.theme-option-swatch-sample {
+  display: block;
+  min-height: 0;
+}
+
+.theme-option-swatch-sample-1 {
+  background: var(--swatch-sample-1);
+}
+
+.theme-option-swatch-sample-2 {
+  background: var(--swatch-sample-2);
+}
+
+.theme-option-swatch-sample-3 {
+  background: var(--swatch-sample-3);
+}
+
+.theme-option-swatch-sample-4 {
+  background: var(--swatch-sample-4);
+}
+
+.theme-option-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+  text-align: center;
+}
+
+/* Theme preview swatch colors */
+.theme-swatch-default {
+  --swatch-sample-1: #0d1117;
+  --swatch-sample-2: #161b22;
+  --swatch-sample-3: #58a6ff;
+  --swatch-sample-4: #79c0ff;
+}
+
+.theme-swatch-ocean {
+  --swatch-sample-1: #0a1929;
+  --swatch-sample-2: #132f4c;
+  --swatch-sample-3: #4fc3f7;
+  --swatch-sample-4: #00bcd4;
+}
+
+.theme-swatch-forest {
+  --swatch-sample-1: #0d2818;
+  --swatch-sample-2: #1a472a;
+  --swatch-sample-3: #4caf50;
+  --swatch-sample-4: #2e7d32;
+}
+
+.theme-swatch-sunset {
+  --swatch-sample-1: #2d1f1f;
+  --swatch-sample-2: #4a2c2c;
+  --swatch-sample-3: #ff8a65;
+  --swatch-sample-4: #ff7043;
+}
+
+.theme-swatch-zen {
+  --swatch-sample-1: #0c0c0c;
+  --swatch-sample-2: #111111;
+  --swatch-sample-3: #6b7b8c;
+  --swatch-sample-4: #7a8590;
+}
+
+.theme-swatch-berry {
+  --swatch-sample-1: #1a0b2e;
+  --swatch-sample-2: #2d1b4e;
+  --swatch-sample-3: #c084fc;
+  --swatch-sample-4: #ec4899;
+}
+
+.theme-swatch-monochrome {
+  --swatch-sample-1: #0d0d0d;
+  --swatch-sample-2: #1a1a1a;
+  --swatch-sample-3: #a3a3a3;
+  --swatch-sample-4: #d4d4d4;
+}
+
+.theme-swatch-slate {
+  --swatch-sample-1: #1e293b;
+  --swatch-sample-2: #334155;
+  --swatch-sample-3: #60a5fa;
+  --swatch-sample-4: #22d3ee;
+}
+
+.theme-swatch-ash {
+  --swatch-sample-1: #292524;
+  --swatch-sample-2: #44403c;
+  --swatch-sample-3: #a8a29e;
+  --swatch-sample-4: #d6d3d1;
+}
+
+.theme-swatch-graphite {
+  --swatch-sample-1: #18181b;
+  --swatch-sample-2: #27272a;
+  --swatch-sample-3: #94a3b8;
+  --swatch-sample-4: #cbd5e1;
+}
+
+.theme-swatch-ember {
+  --swatch-sample-1: #18181b;
+  --swatch-sample-2: #27272a;
+  --swatch-sample-3: #f97316;
+  --swatch-sample-4: #ef4444;
+}
+
+.theme-swatch-rust {
+  --swatch-sample-1: #0f0b09;
+  --swatch-sample-2: #1a1410;
+  --swatch-sample-3: #e06830;
+  --swatch-sample-4: #e88040;
+}
+
+.theme-swatch-copper {
+  --swatch-sample-1: #0e0c0a;
+  --swatch-sample-2: #181410;
+  --swatch-sample-3: #e89545;
+  --swatch-sample-4: #f0a858;
+}
+
+.theme-swatch-foundry {
+  --swatch-sample-1: #0c0806;
+  --swatch-sample-2: #15100c;
+  --swatch-sample-3: #ffab20;
+  --swatch-sample-4: #ffc040;
+}
+
+.theme-swatch-carbon {
+  --swatch-sample-1: #0a0b0d;
+  --swatch-sample-2: #111318;
+  --swatch-sample-3: #6a9acf;
+  --swatch-sample-4: #7ab0e0;
+}
+
+.theme-swatch-sandstone {
+  --swatch-sample-1: #1a1712;
+  --swatch-sample-2: #241f18;
+  --swatch-sample-3: #d4a06a;
+  --swatch-sample-4: #e0b080;
+}
+
+.theme-swatch-lagoon {
+  --swatch-sample-1: #0a1214;
+  --swatch-sample-2: #101c1f;
+  --swatch-sample-3: #50d8c0;
+  --swatch-sample-4: #60e8d0;
+}
+
+.theme-swatch-frost {
+  --swatch-sample-1: #0c0e14;
+  --swatch-sample-2: #121520;
+  --swatch-sample-3: #8ac8f8;
+  --swatch-sample-4: #9ad8ff;
+}
+
+.theme-swatch-lavender {
+  --swatch-sample-1: #14101a;
+  --swatch-sample-2: #1c1624;
+  --swatch-sample-3: #c8a0e8;
+  --swatch-sample-4: #d8b0f0;
+}
+
+.theme-swatch-neon-bloom {
+  --swatch-sample-1: #120a18;
+  --swatch-sample-2: #1a1024;
+  --swatch-sample-3: #f080d0;
+  --swatch-sample-4: #ff90e0;
+}
+
+.theme-swatch-sepia {
+  --swatch-sample-1: #161210;
+  --swatch-sample-2: #201a16;
+  --swatch-sample-3: #d8b878;
+  --swatch-sample-4: #e8c888;
+}
+
+.theme-swatch-silver {
+  --swatch-sample-1: #27272a;
+  --swatch-sample-2: #3f3f46;
+  --swatch-sample-3: #94a3b8;
+  --swatch-sample-4: #e2e8f0;
+}
+
+.theme-swatch-high-contrast {
+  --swatch-sample-1: #000000;
+  --swatch-sample-2: #0a0a0a;
+  --swatch-sample-3: #00ffff;
+  --swatch-sample-4: #ffff00;
+}
+
+.theme-swatch-industrial {
+  --swatch-sample-1: #0c0c0c;
+  --swatch-sample-2: #141414;
+  --swatch-sample-3: #ff6b00;
+  --swatch-sample-4: #ff8c00;
+}
+
+.theme-swatch-solarized {
+  --swatch-sample-1: #002b36;
+  --swatch-sample-2: #073642;
+  --swatch-sample-3: #268bd2;
+  --swatch-sample-4: #2aa198;
+}
+
+.theme-swatch-factory {
+  --swatch-sample-1: #0a0a0a;
+  --swatch-sample-2: #111111;
+  --swatch-sample-3: #f59e0b;
+  --swatch-sample-4: #06b6d4;
+}
+
+.theme-swatch-ayu {
+  --swatch-sample-1: #0f1419;
+  --swatch-sample-2: #131d27;
+  --swatch-sample-3: #39bae6;
+  --swatch-sample-4: #ffb454;
+}
+
+.theme-swatch-one-dark {
+  --swatch-sample-1: #282c34;
+  --swatch-sample-2: #21252b;
+  --swatch-sample-3: #61afef;
+  --swatch-sample-4: #00e5ff;
+}
+
+.theme-swatch-nord {
+  --swatch-sample-1: #2e3440;
+  --swatch-sample-2: #3b4252;
+  --swatch-sample-3: #88c0d0;
+  --swatch-sample-4: #81a1c1;
+}
+
+.theme-swatch-dracula {
+  --swatch-sample-1: #282a36;
+  --swatch-sample-2: #21222c;
+  --swatch-sample-3: #8be9fd;
+  --swatch-sample-4: #00e5ff;
+}
+
+.theme-swatch-gruvbox {
+  --swatch-sample-1: #282828;
+  --swatch-sample-2: #1d2021;
+  --swatch-sample-3: #83a598;
+  --swatch-sample-4: #d3869b;
+}
+
+.theme-swatch-tokyo-night {
+  --swatch-sample-1: #1a1b26;
+  --swatch-sample-2: #16161e;
+  --swatch-sample-3: #7aa2f7;
+  --swatch-sample-4: #00e5ff;
+}
+
+.theme-swatch-catppuccin-mocha {
+  --swatch-sample-1: #1e1e2e;
+  --swatch-sample-2: #181825;
+  --swatch-sample-3: #89b4fa;
+  --swatch-sample-4: #89dceb;
+}
+
+.theme-swatch-github-dark {
+  --swatch-sample-1: #0d1117;
+  --swatch-sample-2: #010409;
+  --swatch-sample-3: #58a6ff;
+  --swatch-sample-4: #79c0ff;
+}
+
+.theme-swatch-everforest {
+  --swatch-sample-1: #2d353b;
+  --swatch-sample-2: #272e33;
+  --swatch-sample-3: #7fbbb3;
+  --swatch-sample-4: #e0c8a8;
+}
+
+.theme-swatch-rose-pine {
+  --swatch-sample-1: #191724;
+  --swatch-sample-2: #1f1d2e;
+  --swatch-sample-3: #c4a7e7;
+  --swatch-sample-4: #ebbcba;
+}
+
+.theme-swatch-kanagawa {
+  --swatch-sample-1: #1f1f28;
+  --swatch-sample-2: #16161d;
+  --swatch-sample-3: #7e9cd8;
+  --swatch-sample-4: #7e9cd8;
+}
+
+.theme-swatch-night-owl {
+  --swatch-sample-1: #011627;
+  --swatch-sample-2: #01111d;
+  --swatch-sample-3: #82aaff;
+  --swatch-sample-4: #addb67;
+}
+
+.theme-swatch-palenight {
+  --swatch-sample-1: #292d3e;
+  --swatch-sample-2: #1e2235;
+  --swatch-sample-3: #82aaff;
+  --swatch-sample-4: #ffcb6b;
+}
+
+.theme-swatch-monokai-pro {
+  --swatch-sample-1: #2d2a2e;
+  --swatch-sample-2: #252229;
+  --swatch-sample-3: #78dce8;
+  --swatch-sample-4: #ff6188;
+}
+
+.theme-swatch-slime {
+  --swatch-sample-1: #0a0e09;
+  --swatch-sample-2: #0f150d;
+  --swatch-sample-3: #8aff40;
+  --swatch-sample-4: #40e8a0;
+}
+
+.theme-swatch-brutalist {
+  --swatch-sample-1: #101010;
+  --swatch-sample-2: #171717;
+  --swatch-sample-3: #ff6a00;
+  --swatch-sample-4: #ffd100;
+}
+
+.theme-swatch-neon-city {
+  --swatch-sample-1: #0d0d15;
+  --swatch-sample-2: #121326;
+  --swatch-sample-3: #ff2d95;
+  --swatch-sample-4: #00f0ff;
+}
+
+.theme-swatch-parchment {
+  --swatch-sample-1: #1b1712;
+  --swatch-sample-2: #252019;
+  --swatch-sample-3: #d08a4b;
+  --swatch-sample-4: #be6e3c;
+}
+
+.theme-swatch-terminal {
+  --swatch-sample-1: #0a0a0a;
+  --swatch-sample-2: #0f120d;
+  --swatch-sample-3: #33ff00;
+  --swatch-sample-4: #8fff38;
+}
+
+.theme-swatch-glass {
+  --swatch-sample-1: #13111f;
+  --swatch-sample-2: color-mix(in srgb, #221b34 78%, transparent);
+  --swatch-sample-3: #c86bff;
+  --swatch-sample-4: #ff7aa8;
+}
+
+.theme-swatch-horizon {
+  --swatch-sample-1: #1c1e26;
+  --swatch-sample-2: #16161c;
+  --swatch-sample-3: #e59371;
+  --swatch-sample-4: #f08c42;
+}
+
+.theme-swatch-vitesse {
+  --swatch-sample-1: #121817;
+  --swatch-sample-2: #0d1210;
+  --swatch-sample-3: #4c9a91;
+  --swatch-sample-4: #dca561;
+}
+
+.theme-swatch-outrun {
+  --swatch-sample-1: #0a0a14;
+  --swatch-sample-2: #0d0d1a;
+  --swatch-sample-3: #ff2d95;
+  --swatch-sample-4: #b537f2;
+}
+
+.theme-swatch-snazzy {
+  --swatch-sample-1: #282a36;
+  --swatch-sample-2: #1e1f29;
+  --swatch-sample-3: #ff5c57;
+  --swatch-sample-4: #5af78e;
+}
+
+.theme-swatch-porple {
+  --swatch-sample-1: #292d3e;
+  --swatch-sample-2: #1e2030;
+  --swatch-sample-3: #c792ea;
+  --swatch-sample-4: #82aaff;
+}
+
+.theme-swatch-espresso {
+  --swatch-sample-1: #2c1f1a;
+  --swatch-sample-2: #231813;
+  --swatch-sample-3: #d4a574;
+  --swatch-sample-4: #c17d56;
+}
+
+.theme-swatch-mars {
+  --swatch-sample-1: #1a1210;
+  --swatch-sample-2: #140e0c;
+  --swatch-sample-3: #c1440e;
+  --swatch-sample-4: #e77d3d;
+}
+
+.theme-swatch-poimandres {
+  --swatch-sample-1: #1a1b26;
+  --swatch-sample-2: #14151f;
+  --swatch-sample-3: #89ddff;
+  --swatch-sample-4: #5de4c7;
+}
+
+/* Light mode swatch overrides */
+[data-theme="light"] .theme-swatch-factory {
+  --swatch-sample-1: #f5f5f5;
+  --swatch-sample-2: #ffffff;
+  --swatch-sample-3: #d97706;
+  --swatch-sample-4: #0891b2;
+}
+
+[data-theme="light"] .theme-swatch-ayu {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f3f3f3;
+  --swatch-sample-3: #007acc;
+  --swatch-sample-4: #ff8f40;
+}
+
+[data-theme="light"] .theme-swatch-zen {
+  --swatch-sample-1: #f5f5f5;
+  --swatch-sample-2: #fafafa;
+  --swatch-sample-3: #5a6a7a;
+  --swatch-sample-4: #6a757f;
+}
+
+[data-theme="light"] .theme-swatch-nord {
+  --swatch-sample-1: #eceff4;
+  --swatch-sample-2: #e5e9f0;
+  --swatch-sample-3: #5e81ac;
+  --swatch-sample-4: #5e81ac;
+}
+
+[data-theme="light"] .theme-swatch-dracula {
+  --swatch-sample-1: #f8f8f2;
+  --swatch-sample-2: #efeefa;
+  --swatch-sample-3: #0097a7;
+  --swatch-sample-4: #00bcd4;
+}
+
+[data-theme="light"] .theme-swatch-gruvbox {
+  --swatch-sample-1: #fbf1c7;
+  --swatch-sample-2: #f2e5bc;
+  --swatch-sample-3: #076678;
+  --swatch-sample-4: #8f3f71;
+}
+
+[data-theme="light"] .theme-swatch-tokyo-night {
+  --swatch-sample-1: #e1e2e7;
+  --swatch-sample-2: #d5d6db;
+  --swatch-sample-3: #3b5ea5;
+  --swatch-sample-4: #00bcd4;
+}
+
+[data-theme="light"] .theme-swatch-catppuccin-mocha {
+  --swatch-sample-1: #eff1f5;
+  --swatch-sample-2: #e6e9ef;
+  --swatch-sample-3: #1e66f5;
+  --swatch-sample-4: #04a5e5;
+}
+
+[data-theme="light"] .theme-swatch-github-dark {
+  --swatch-sample-1: #ffffff;
+  --swatch-sample-2: #f6f8fa;
+  --swatch-sample-3: #0969da;
+  --swatch-sample-4: #0969da;
+}
+
+[data-theme="light"] .theme-swatch-everforest {
+  --swatch-sample-1: #fdf6e3;
+  --swatch-sample-2: #f4f0d9;
+  --swatch-sample-3: #3a94a5;
+  --swatch-sample-4: #83a08a;
+}
+
+[data-theme="light"] .theme-swatch-rose-pine {
+  --swatch-sample-1: #faf4ed;
+  --swatch-sample-2: #fffaf3;
+  --swatch-sample-3: #907aa9;
+  --swatch-sample-4: #b4637a;
+}
+
+[data-theme="light"] .theme-swatch-kanagawa {
+  --swatch-sample-1: #edeadd;
+  --swatch-sample-2: #e1ddd4;
+  --swatch-sample-3: #4e76b5;
+  --swatch-sample-4: #4e76b5;
+}
+
+[data-theme="light"] .theme-swatch-one-dark {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f0f0f0;
+  --swatch-sample-3: #4078f2;
+  --swatch-sample-4: #0184bc;
+}
+
+[data-theme="light"] .theme-swatch-night-owl {
+  --swatch-sample-1: #f6f7f9;
+  --swatch-sample-2: #eef0f4;
+  --swatch-sample-3: #2563eb;
+  --swatch-sample-4: #5a9e2f;
+}
+
+[data-theme="light"] .theme-swatch-palenight {
+  --swatch-sample-1: #f5f7fa;
+  --swatch-sample-2: #ebeef5;
+  --swatch-sample-3: #3b6fcf;
+  --swatch-sample-4: #c49020;
+}
+
+[data-theme="light"] .theme-swatch-monokai-pro {
+  --swatch-sample-1: #faf8f5;
+  --swatch-sample-2: #f0ece5;
+  --swatch-sample-3: #2d8fa0;
+  --swatch-sample-4: #c4405e;
+}
+
+[data-theme="light"] .theme-swatch-slime {
+  --swatch-sample-1: #f2f7ea;
+  --swatch-sample-2: #e6efda;
+  --swatch-sample-3: #3d8f10;
+  --swatch-sample-4: #1a8a6a;
+}
+
+[data-theme="light"] .theme-swatch-brutalist {
+  --swatch-sample-1: #ece9e4;
+  --swatch-sample-2: #f7f4ef;
+  --swatch-sample-3: #d9480f;
+  --swatch-sample-4: #b8860b;
+}
+
+[data-theme="light"] .theme-swatch-neon-city {
+  --swatch-sample-1: #f7f5ff;
+  --swatch-sample-2: #f1edff;
+  --swatch-sample-3: #cc166e;
+  --swatch-sample-4: #008e9b;
+}
+
+[data-theme="light"] .theme-swatch-parchment {
+  --swatch-sample-1: #f5f0e8;
+  --swatch-sample-2: #efe7dc;
+  --swatch-sample-3: #a8562f;
+  --swatch-sample-4: #8f4e2a;
+}
+
+[data-theme="light"] .theme-swatch-terminal {
+  --swatch-sample-1: #e7f5dd;
+  --swatch-sample-2: #deefd2;
+  --swatch-sample-3: #2d6b14;
+  --swatch-sample-4: #4c8f25;
+}
+
+[data-theme="light"] .theme-swatch-glass {
+  --swatch-sample-1: #eceaf5;
+  --swatch-sample-2: color-mix(in srgb, #ffffff 75%, transparent);
+  --swatch-sample-3: #9d40cf;
+  --swatch-sample-4: #c74b7a;
+}
+
+[data-theme="light"] .theme-swatch-slate {
+  --swatch-sample-1: #f1f5f9;
+  --swatch-sample-2: #e2e8f0;
+  --swatch-sample-3: #3b5ea5;
+  --swatch-sample-4: #4f7090;
+}
+
+[data-theme="light"] .theme-swatch-ash {
+  --swatch-sample-1: #fafaf9;
+  --swatch-sample-2: #f5f5f4;
+  --swatch-sample-3: #5a6a7a;
+  --swatch-sample-4: #768694;
+}
+
+[data-theme="light"] .theme-swatch-graphite {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f4f4f5;
+  --swatch-sample-3: #6f7f90;
+  --swatch-sample-4: #8a99aa;
+}
+
+[data-theme="light"] .theme-swatch-ember {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f4f4f5;
+  --swatch-sample-3: #d9480f;
+  --swatch-sample-4: #e8646a;
+}
+
+[data-theme="light"] .theme-swatch-rust {
+  --swatch-sample-1: #f5efe8;
+  --swatch-sample-2: #ebe3d8;
+  --swatch-sample-3: #a04020;
+  --swatch-sample-4: #b85828;
+}
+
+[data-theme="light"] .theme-swatch-copper {
+  --swatch-sample-1: #f3ede6;
+  --swatch-sample-2: #e8e0d6;
+  --swatch-sample-3: #905820;
+  --swatch-sample-4: #a87030;
+}
+
+[data-theme="light"] .theme-swatch-foundry {
+  --swatch-sample-1: #f5f0e6;
+  --swatch-sample-2: #ebe4d6;
+  --swatch-sample-3: #c07808;
+  --swatch-sample-4: #d08a10;
+}
+
+[data-theme="light"] .theme-swatch-carbon {
+  --swatch-sample-1: #eef0f4;
+  --swatch-sample-2: #e2e6ec;
+  --swatch-sample-3: #3a6090;
+  --swatch-sample-4: #4878a0;
+}
+
+[data-theme="light"] .theme-swatch-sandstone {
+  --swatch-sample-1: #f5f0e8;
+  --swatch-sample-2: #ebe4d8;
+  --swatch-sample-3: #a07040;
+  --swatch-sample-4: #b08050;
+}
+
+[data-theme="light"] .theme-swatch-lagoon {
+  --swatch-sample-1: #eef5f3;
+  --swatch-sample-2: #e0ebe8;
+  --swatch-sample-3: #208070;
+  --swatch-sample-4: #289080;
+}
+
+[data-theme="light"] .theme-swatch-frost {
+  --swatch-sample-1: #f0f4f8;
+  --swatch-sample-2: #e4eaf0;
+  --swatch-sample-3: #3078a8;
+  --swatch-sample-4: #4088b8;
+}
+
+[data-theme="light"] .theme-swatch-lavender {
+  --swatch-sample-1: #f4f0f8;
+  --swatch-sample-2: #e8e2f0;
+  --swatch-sample-3: #8060a0;
+  --swatch-sample-4: #9070b0;
+}
+
+[data-theme="light"] .theme-swatch-neon-bloom {
+  --swatch-sample-1: #f8f0f8;
+  --swatch-sample-2: #f0e4f0;
+  --swatch-sample-3: #a03090;
+  --swatch-sample-4: #b040a0;
+}
+
+[data-theme="light"] .theme-swatch-sepia {
+  --swatch-sample-1: #f5f0e4;
+  --swatch-sample-2: #ece4d4;
+  --swatch-sample-3: #907040;
+  --swatch-sample-4: #a08050;
+}
+
+[data-theme="light"] .theme-swatch-silver {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f4f4f5;
+  --swatch-sample-3: #6b7280;
+  --swatch-sample-4: #9ca3af;
+}
+
+[data-theme="light"] .theme-swatch-horizon {
+  --swatch-sample-1: #fdf0ed;
+  --swatch-sample-2: #f9cec0;
+  --swatch-sample-3: #e8646a;
+  --swatch-sample-4: #f08c42;
+}
+
+[data-theme="light"] .theme-swatch-vitesse {
+  --swatch-sample-1: #f8f5f0;
+  --swatch-sample-2: #efe9e0;
+  --swatch-sample-3: #3a8578;
+  --swatch-sample-4: #c08040;
+}
+
+[data-theme="light"] .theme-swatch-outrun {
+  --swatch-sample-1: #f0f0f5;
+  --swatch-sample-2: #e8e8ef;
+  --swatch-sample-3: #d02080;
+  --swatch-sample-4: #9030c8;
+}
+
+[data-theme="light"] .theme-swatch-snazzy {
+  --swatch-sample-1: #fafafa;
+  --swatch-sample-2: #f0f0f2;
+  --swatch-sample-3: #d04040;
+  --swatch-sample-4: #30a050;
+}
+
+[data-theme="light"] .theme-swatch-porple {
+  --swatch-sample-1: #f5f3f7;
+  --swatch-sample-2: #eae7ef;
+  --swatch-sample-3: #9060d8;
+  --swatch-sample-4: #4080c8;
+}
+
+[data-theme="light"] .theme-swatch-espresso {
+  --swatch-sample-1: #f5ece4;
+  --swatch-sample-2: #ebe1d6;
+  --swatch-sample-3: #a07050;
+  --swatch-sample-4: #906040;
+}
+
+[data-theme="light"] .theme-swatch-mars {
+  --swatch-sample-1: #f5ece6;
+  --swatch-sample-2: #ebe0d4;
+  --swatch-sample-3: #a03010;
+  --swatch-sample-4: #c06030;
+}
+
+[data-theme="light"] .theme-swatch-poimandres {
+  --swatch-sample-1: #f0f0f5;
+  --swatch-sample-2: #e6e6ee;
+  --swatch-sample-3: #4090c0;
+  --swatch-sample-4: #30a090;
+}
+
+/* Reset to defaults button */
+.theme-reset-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  margin-top: 20px;
+  padding: 10px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  width: 100%;
+}
+
+.theme-reset-btn:hover {
+  background: var(--card-hover);
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.theme-reset-btn:focus-visible {
+  outline: none;
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring-strong);
+}
+
+/* Theme current preview in settings */
+.theme-current-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 20px;
+}
+
+.theme-preview-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--surface);
+  border-radius: var(--radius);
+  color: var(--todo);
+}
+
+.theme-preview-info {
+  flex: 1;
+}
+
+.theme-preview-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+
+.theme-preview-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  text-transform: capitalize;
+}
+
+@media (max-width: 768px) {
+  /* Model combobox dropdown: mobile-friendly sizing */
+  .model-combobox-dropdown {
+    max-height: 50vh;
+    width: min(360px, calc(100vw - 32px));
+  }
+
+  .model-combobox-search {
+    font-size: 16px;
+  }
+
+  .model-combobox-option {
+    min-height: 36px;
+  }
+
+  .theme-selector {
+    padding: 0 14px 14px;
+  }
+
+  .theme-font-size-toggle {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/packages/dashboard/app/components/ThemeSelector.tsx b/packages/dashboard/app/components/ThemeSelector.tsx
index 736acfbac..88d6af6dc 100644
--- a/packages/dashboard/app/components/ThemeSelector.tsx
+++ b/packages/dashboard/app/components/ThemeSelector.tsx
@@ -1,3 +1,4 @@
+import "./ThemeSelector.css";
 import { useCallback } from "react";
 import { Sun, Moon, Monitor } from "lucide-react";
 import type { ThemeMode, ColorTheme } from "@fusion/core";
diff --git a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
index cbd4754fd..13aa14aef 100644
--- a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
+++ b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -36,6 +38,18 @@ describe("CustomModelDropdown", () => {
     expect(wrapperRuleMatch![0]).toContain("background: var(--surface);");
   });
 
+  it("keeps CustomModelDropdown.css scoped to .model-combobox selectors", () => {
+    const css = readFileSync(
+      resolve(__dirname, "../CustomModelDropdown.css"),
+      "utf-8",
+    );
+
+    expect(css).not.toMatch(/(^|\n)\s*:root\[data-theme="light"\]/);
+    expect(css).not.toMatch(/(^|\n)\s*\[data-theme="light"\]\s+\.(modal-overlay|btn-primary|toast-success)/);
+    expect(css).not.toMatch(/(^|\n)\s*\.theme-selector\s*\{/);
+    expect(css).not.toMatch(/(^|\n)\s*html\s*\*/);
+  });
+
   it("renders the open dropdown in a portal attached to document.body", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css
index 2a50ca6c8..0216222df 100644
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -435,10 +435,192 @@ html {
   --surface-muted: color-mix(in srgb, var(--surface) 97%, var(--text) 3%);
   --surface-emphasis: color-mix(in srgb, var(--surface) 95%, var(--text) 5%);
   --surface-hover-strong: color-mix(in srgb, var(--surface) 94%, var(--text) 6%);
+  --bg: #ffffff;
+  --surface: #f6f8fa;
+  --card: #ffffff;
+  --card-hover: #f3f4f6;
+  --bg-secondary: #f6f8fa;
+  --bg-tertiary: #eaeef2;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-muted: #656d76;
+  --text-dim: #8c959f;
+  --triage: #9a6700;
+  --todo: #0969da;
+  --in-progress: #00bcd4;
+  --in-progress-rgb: 0, 188, 212;
+  --in-review: #1a7f37;
+  --done: #6e7781;
+  --color-success: #1a7f37;
+  --color-error: #cf222e;
+  --color-muted: #6e7781;
+  --color-warning: #9a6700;
+  --executor-status-error-bg: color-mix(in srgb, var(--color-error) 6%, transparent);
+  --status-color-added: #1a7f37;
+  --status-color-modified: #0969da;
+  --status-color-deleted: #cf222e;
+  --status-color-unknown: #6e7781;
+  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
+  --shadow-md: 0 4px 6px color-mix(in srgb, var(--text) 12%, transparent);
+  --shadow-lg: 0 4px 24px color-mix(in srgb, var(--text) 15%, transparent);
+  --shadow-glow: 0 0 8px color-mix(in srgb, var(--todo) 18%, transparent);
+  --glow-success: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
+  --glow-warning: 0 0 8px color-mix(in srgb, var(--color-warning) 30%, transparent);
+  --glow-danger: 0 0 8px color-mix(in srgb, var(--color-error) 30%, transparent);
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--todo) 12%, transparent);
+  --focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--todo) 24%, transparent);
+  --cta-bg: #1a7f37;
+  --cta-border: #1f883d;
+  --cta-text: #fff;
+  --cta-bg-hover: #1f883d;
+  --cta-border-hover: #2ea043;
+  --cta-glow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
+  --color-info: #0969da;
+  --ws-pre-merge: #2563eb;
+  --ws-post-merge: #0d9488;
+  --ws-info: #0891b2;
+  --ws-warning: #a16207;
+  --ws-success: #16a34a;
+  --ws-error: #dc2626;
+  --ws-error-dark: #b91c1c;
+  --ws-teal: #0d9488;
+  --ws-quality: #2563eb;
+  --ws-security: #dc2626;
+  --color-error-dark: #a40e26;
   --status-error-bg: color-mix(in srgb, var(--color-error-dark) 15%, transparent);
   --status-error-bg-deep: color-mix(in srgb, var(--color-error-dark) 20%, transparent);
+  --logo-accent: var(--todo);
+  --accent: #6a4fa0;
+  --log-tool-bg: color-mix(in srgb, var(--accent) 6%, transparent);
+  --log-success-bg: color-mix(in srgb, var(--color-success) 5%, transparent);
+  --log-error-bg: color-mix(in srgb, var(--color-error) 5%, transparent);
+  --shadow: var(--shadow-lg);
+  --fab-text: #fff;
+  --autopilot-icon: #ca8a04;
+  --autopilot-shadow: color-mix(in srgb, var(--color-success) 40%, transparent);
+  --terminal-bg: #f6f8fa;
+  --badge-mission-text: #7c3aed;
+  --badge-mission-text-hover: #8b5cf6;
+  --badge-mission-bg: color-mix(in srgb, var(--badge-mission-text) 12%, transparent);
+  --badge-mission-bg-hover: color-mix(in srgb, var(--badge-mission-text-hover) 22%, transparent);
+  --event-error-text: #dc2626;
+  --event-state-text: #2563eb;
+  --event-task-text: #059669;
+  --event-slice-text: #d97706;
+  --event-autopilot-text: #9333ea;
+  --event-error-bg: color-mix(in srgb, var(--event-error-text) 12%, transparent);
+  --event-state-bg: color-mix(in srgb, var(--event-state-text) 12%, transparent);
+  --event-task-bg: color-mix(in srgb, var(--event-task-text) 12%, transparent);
+  --event-slice-bg: color-mix(in srgb, var(--event-slice-text) 12%, transparent);
+  --event-autopilot-bg: color-mix(in srgb, var(--event-autopilot-text) 12%, transparent);
+  --toggle-checked-bg: color-mix(in srgb, var(--color-success) 15%, transparent);
+  --meta-badge-bg: color-mix(in srgb, var(--color-success) 8%, transparent);
+  --star-idle: #9ca3af;
+  --star-active: #d97706;
 }
 
+html,
+html *,
+html *::before,
+html *::after {
+  transition:
+    background-color var(--transition-normal),
+    color var(--transition-normal),
+    border-color var(--transition-normal),
+    box-shadow var(--transition-normal);
+}
+
+html .card.dragging,
+html .card.dragging *,
+html .list-row.dragging,
+html .list-row.dragging *,
+html .column.drag-over,
+html .column.drag-over * {
+  transition: none !important;
+}
+
+[data-theme="light"] .modal-overlay,
+[data-theme="light"] .agent-detail-overlay,
+[data-theme="light"] .agent-dialog-overlay,
+[data-theme="light"] .chat-new-dialog-backdrop {
+  background: color-mix(in srgb, var(--text) 50%, transparent);
+}
+
+[data-theme="light"] .modal-header {
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+}
+
+[data-theme="light"] .modal-actions {
+  background: color-mix(in srgb, var(--surface) 60%, transparent);
+}
+
+[data-theme="light"] .settings-sidebar {
+  background: color-mix(in srgb, var(--surface) 60%, transparent);
+}
+
+[data-theme="light"] .toast-success {
+  background: var(--cta-bg);
+}
+
+[data-theme="light"] .toast-error {
+  background: var(--color-error-dark);
+}
+
+[data-theme="light"] .toast-info {
+  background: var(--color-info);
+}
+
+[data-theme="light"] .btn-task-create,
+[data-theme="light"] .btn-primary {
+  background: var(--cta-bg);
+  border-color: var(--cta-border);
+}
+
+[data-theme="light"] .btn-task-create:hover,
+[data-theme="light"] .btn-primary:hover {
+  background: var(--cta-bg-hover);
+  border-color: var(--cta-border-hover);
+  box-shadow: var(--cta-glow);
+}
+
+[data-theme="light"] .btn-danger {
+  background: var(--color-error);
+  border-color: var(--color-error-dark);
+}
+
+[data-theme="light"] .btn-danger:hover {
+  background: var(--color-error-dark);
+  box-shadow: var(--glow-danger);
+}
+
+[data-theme="light"] .btn-warning {
+  background: var(--triage);
+  border-color: color-mix(in srgb, var(--triage) 70%, black);
+}
+
+[data-theme="light"] .btn-warning:hover {
+  background: color-mix(in srgb, var(--triage) 70%, black);
+  box-shadow: var(--glow-warning);
+}
+
+[data-theme="light"] .btn-secondary {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+[data-theme="light"] .btn-secondary:hover {
+  background: var(--card-hover);
+  border-color: var(--text-muted);
+}
+[data-theme="light"] .btn-secondary:active {
+  transform: scale(0.97);
+}
+[data-theme="light"] .btn-secondary:focus-visible {
+  box-shadow: var(--focus-ring-strong);
+  border-color: var(--todo);
+}
+
+
 /* -------------------------------------------------------------------------
  * Runtime provider settings card — unified layout used by Hermes / OpenClaw /
  * Paperclip cards. Header (large logo + name + status), description, form,