From e181175e9d2a29e0fd7bc07b3d0d2ad2fa6c5777 Mon Sep 17 00:00:00 2001
From: mbino <alex@mbino.com>
Date: Wed, 28 Oct 2026 17:53:33 +0100
Subject: [PATCH 1/2] Add a light theme

Adds an Appearance setting (Dark / Light / System) under Settings >
Application. Dark stays the default.

style.css hard-codes its colors, so instead of rewriting it around
variables, scripts/generate-light-theme.js derives
public/theme-light.generated.css from it: every rule that sets a color is
re-emitted under :root[data-theme="light"] with the color mapped by how
it is used (text, background, border, shadow). style.css itself is
untouched. Re-run `npm run generate:light-theme` after changing it;
hand-tuned fixes go in public/theme-light.css.

- app-theme.js applies the theme before first paint (cached in
  localStorage, settings remain the source of truth) and follows the OS
  for System.
- The default Switchboard terminal theme follows the appearance; adds
  Solarized Light and GitHub Light terminal themes.
- CodeMirror editors switch between Dracula and GitHub Light live.
- Project marks and track tags use darker hues in the light theme.
---
 package.json                     |    3 +-
 public/app-theme.js              |   36 +
 public/app.js                    |    8 +
 public/codemirror-setup.js       |   72 +-
 public/index.html                |    3 +
 public/projects-view.js          |   12 +-
 public/settings-panel.js         |   19 +
 public/terminal-themes.js        |   28 +-
 public/theme-light.css           |    3 +
 public/theme-light.generated.css | 3491 ++++++++++++++++++++++++++++++
 scripts/generate-light-theme.js  |  419 ++++
 11 files changed, 4070 insertions(+), 24 deletions(-)
 create mode 100644 public/app-theme.js
 create mode 100644 public/theme-light.css
 create mode 100644 public/theme-light.generated.css
 create mode 100644 scripts/generate-light-theme.js

diff --git a/package.json b/package.json
index 3ef7ebe68..ce8848f25 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "electron": "electron .",
     "electron-dev": "SWITCHBOARD_DATA_DIR=\"$HOME/.switchboard-dev\" electron .",
     "bundle:codemirror": "esbuild public/codemirror-setup.js --bundle --outfile=public/codemirror-bundle.js --format=iife --platform=browser --minify",
-    "generate-icons": "node scripts/generate-icons.js && node scripts/generate-dmg-background.js",
+    "generate:light-theme": "node scripts/generate-light-theme.js",
+    "generate-icons":"node scripts/generate-icons.js && node scripts/generate-dmg-background.js",
     "build": "npm run bundle && electron-builder",
     "build:mac": "npm run bundle && electron-builder --mac && node scripts/postinstall.js",
     "build:mac:arm64": "npm run bundle && electron-builder --mac --arm64 && node scripts/postinstall.js",
diff --git a/public/app-theme.js b/public/app-theme.js
new file mode 100644
index 000000000..627c97d35
--- /dev/null
+++ b/public/app-theme.js
@@ -0,0 +1,36 @@
+// --- App color theme (dark / light / system) ---
+// Loaded in <head> before the stylesheets so the right theme is in place on
+// first paint. The preference lives in the global settings (appTheme); a
+// copy in localStorage lets this run synchronously at startup.
+
+(() => {
+  const STORAGE_KEY = 'appTheme';
+  const systemLight = window.matchMedia('(prefers-color-scheme: light)');
+  let preference = 'dark';
+  try { preference = localStorage.getItem(STORAGE_KEY) || 'dark'; } catch {}
+
+  function resolve(pref) {
+    if (pref === 'system') return systemLight.matches ? 'light' : 'dark';
+    return pref === 'light' ? 'light' : 'dark';
+  }
+
+  function apply() {
+    const theme = resolve(preference);
+    const root = document.documentElement;
+    if (root.dataset.theme === theme) return;
+    root.dataset.theme = theme;
+    root.style.colorScheme = theme;
+    document.dispatchEvent(new CustomEvent('app-theme-change', { detail: { theme } }));
+  }
+
+  window.getAppTheme = () => resolve(preference);
+  window.getAppThemePreference = () => preference;
+  window.setAppThemePreference = (pref) => {
+    preference = pref || 'dark';
+    try { localStorage.setItem(STORAGE_KEY, preference); } catch {}
+    apply();
+  };
+
+  systemLight.addEventListener('change', () => { if (preference === 'system') apply(); });
+  apply();
+})();
diff --git a/public/app.js b/public/app.js
index 0a3362598..6c4e30904 100644
--- a/public/app.js
+++ b/public/app.js
@@ -117,6 +117,10 @@ window._applyTerminalTheme = (themeName) => {
     entry.element.style.backgroundColor = TERMINAL_THEME.background;
   }
 };
+document.addEventListener('app-theme-change', () => {
+  window._applyTerminalTheme(currentThemeName);
+  refreshSidebar(); // project and track colors are computed per theme
+});
 let searchMatchIds = null; // null = no search active; Set<string> = matched session IDs
 let searchMatchProjectPaths = null; // Set<string> of project paths matched by name
 
@@ -1407,6 +1411,10 @@ setTimeout(() => {
       currentThemeName = global.terminalTheme;
       TERMINAL_THEME = getTerminalTheme();
     }
+    // The settings store is the source of truth; app-theme.js only caches it.
+    if (global.appTheme && global.appTheme !== window.getAppThemePreference()) {
+      window.setAppThemePreference(global.appTheme);
+    }
   }
 })();
 
diff --git a/public/codemirror-setup.js b/public/codemirror-setup.js
index e0d4cdd01..e216d3af2 100644
--- a/public/codemirror-setup.js
+++ b/public/codemirror-setup.js
@@ -6,6 +6,7 @@ import { languages } from '@codemirror/language-data';
 import { syntaxHighlighting, HighlightStyle, indentOnInput, bracketMatching, foldGutter, foldKeymap } from '@codemirror/language';
 import { highlightSelectionMatches } from '@codemirror/search';
 import { dracula } from '@ddietr/codemirror-themes/theme/dracula';
+import { githubLight } from '@ddietr/codemirror-themes/theme/github-light';
 import { tags } from '@lezer/highlight';
 import { MergeView, unifiedMergeView } from '@codemirror/merge';
 import { javascript } from '@codemirror/lang-javascript';
@@ -35,6 +36,46 @@ const appThemePatch = EditorView.theme({
   },
 }, { dark: true });
 
+const markdownExtrasLight = HighlightStyle.define([
+  { tag: tags.monospace, color: '#0a6e8a' },
+]);
+
+const appThemePatchLight = EditorView.theme({
+  '&': { height: '100%', fontSize: '12.5px' },
+  '.cm-content': { padding: '20px 8px' },
+  '.cm-scroller': {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'rgba(0,0,0,0.15) transparent',
+  },
+}, { dark: false });
+
+// ── Light/dark editor theme ──────────────────────────────────────────
+// Every editor puts its theme in one shared compartment and registers
+// itself while mounted, so an app theme change can restyle open editors.
+
+const themeCompartment = new Compartment();
+const liveViews = new Set();
+const trackView = ViewPlugin.define(view => {
+  liveViews.add(view);
+  return { destroy() { liveViews.delete(view); } };
+});
+
+function themeExtensions() {
+  const light = typeof window.getAppTheme === 'function' && window.getAppTheme() === 'light';
+  return light
+    ? [githubLight, syntaxHighlighting(markdownExtrasLight), appThemePatchLight]
+    : [dracula, syntaxHighlighting(markdownExtras), appThemePatch];
+}
+
+function editorTheme() {
+  return [trackView, themeCompartment.of(themeExtensions())];
+}
+
+document.addEventListener('app-theme-change', () => {
+  const effects = themeCompartment.reconfigure(themeExtensions());
+  for (const view of liveViews) view.dispatch({ effects });
+});
+
 // ── Custom floating search bar (matches xterm search bar style) ──────
 
 const setSearchQuery = StateEffect.define();
@@ -68,9 +109,14 @@ const searchHighlighter = ViewPlugin.fromClass(class {
   }
 }, { decorations: v => v.decorations });
 
-const cmSearchTheme = EditorView.theme({
-  '.cm-find-match': { backgroundColor: '#515C6A', borderRadius: '2px' },
-  '.cm-find-match-active': { backgroundColor: '#EAA549', borderRadius: '2px' },
+// A base theme, so &dark/&light can follow the active editor theme.
+const cmSearchTheme = EditorView.baseTheme({
+  '.cm-find-match': { borderRadius: '2px' },
+  '.cm-find-match-active': { borderRadius: '2px' },
+  '&dark .cm-find-match': { backgroundColor: '#515C6A' },
+  '&dark .cm-find-match-active': { backgroundColor: '#EAA549' },
+  '&light .cm-find-match': { backgroundColor: '#fff0a8' },
+  '&light .cm-find-match-active': { backgroundColor: '#f5b13d' },
 });
 
 function cmFloatingSearch() {
@@ -335,9 +381,7 @@ function createPlanEditor(parent) {
       cmSaveKeymap,
       cmFloatingSearch(),
       markdown({ base: markdownLanguage, codeLanguages: languages }),
-      dracula,
-      syntaxHighlighting(markdownExtras),
-      appThemePatch,
+      editorTheme(),
       wrapCompartment.of(EditorView.lineWrapping),
     ],
   });
@@ -406,9 +450,7 @@ function createReadOnlyViewer(parent, content, filename) {
       cmSaveDomHandler,
       cmFloatingSearch(),
       langExt,
-      dracula,
-      syntaxHighlighting(markdownExtras),
-      appThemePatch,
+      editorTheme(),
     ],
   });
   return new EditorView({ state, parent });
@@ -444,9 +486,7 @@ function createEditableViewer(parent, content, filename, { wrap = false } = {})
       cmSaveKeymap,
       cmFloatingSearch(),
       langExt,
-      dracula,
-      syntaxHighlighting(markdownExtras),
-      appThemePatch,
+      editorTheme(),
       wrapCompartment.of(wrap ? EditorView.lineWrapping : []),
     ],
   });
@@ -471,9 +511,7 @@ function createMergeViewer(parent, originalContent, modifiedContent, filename) {
     cmFindDomHandler,
     cmFloatingSearch(),
     langExt,
-    dracula,
-    syntaxHighlighting(markdownExtras),
-    appThemePatch,
+    editorTheme(),
   ];
 
   return new MergeView({
@@ -513,9 +551,7 @@ function createUnifiedMergeViewer(parent, originalContent, modifiedContent, file
       cmSaveDomHandler,
       cmFloatingSearch(),
       langExt,
-      dracula,
-      syntaxHighlighting(markdownExtras),
-      appThemePatch,
+      editorTheme(),
       unifiedMergeView({
         original: originalContent,
         gutter: true,
diff --git a/public/index.html b/public/index.html
index df5d1318e..6588be727 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,9 @@
   <link rel="stylesheet" href="../node_modules/@xterm/xterm/css/xterm.css">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="whats-new.css">
+  <link rel="stylesheet" href="theme-light.generated.css">
+  <link rel="stylesheet" href="theme-light.css">
+  <script src="app-theme.js"></script>
 </head>
 <body>
   <div id="app-container">
diff --git a/public/projects-view.js b/public/projects-view.js
index b2851d05e..423e7a26c 100644
--- a/public/projects-view.js
+++ b/public/projects-view.js
@@ -500,10 +500,14 @@ function projectInitials(name) {
   return (words[0][0] + words[1][0]).toUpperCase();
 }
 
+// Pastel text on a dark tint reads on the dark theme; the light theme needs
+// the same hue darker.
+const hueFg = (h, s) => window.getAppTheme() === 'light' ? `hsl(${h},${s - 15}%,36%)` : `hsl(${h},${s}%,72%)`;
+
 function markHtml(project, size = 28, extraClass = '') {
   const h = projectHue(project.id);
   const fontSize = Math.round(size * 0.4);
-  return `<span class="proj-mark ${extraClass}" style="width:${size}px;height:${size}px;font-size:${fontSize}px;background:hsla(${h},70%,60%,0.18);color:hsl(${h},80%,72%);">${escapeHtml(projectInitials(project.name))}</span>`;
+  return `<span class="proj-mark ${extraClass}" style="width:${size}px;height:${size}px;font-size:${fontSize}px;background:hsla(${h},70%,60%,0.18);color:${hueFg(h, 80)};">${escapeHtml(projectInitials(project.name))}</span>`;
 }
 
 /**
@@ -511,10 +515,12 @@ function markHtml(project, size = 28, extraClass = '') {
  * two tracks in a project never share one. General is grey.
  */
 function trackColors(project, track) {
-  if (!track) return { fg: '#9090a8', bg: 'rgba(255,255,255,0.08)' };
+  if (!track) return window.getAppTheme() === 'light'
+    ? { fg: '#5d5d73', bg: 'rgba(20,20,40,0.07)' }
+    : { fg: '#9090a8', bg: 'rgba(255,255,255,0.08)' };
   const index = Math.max(0, (project.tracks || []).findIndex(t => t.id === track.id));
   const h = Math.round((projectHue(project.id) + 40 + index * 137.5) % 360);
-  return { fg: `hsl(${h},78%,72%)`, bg: `hsla(${h},70%,60%,0.16)` };
+  return { fg: hueFg(h, 78), bg: `hsla(${h},70%,60%,0.16)` };
 }
 
 function trackTagHtml(project, track) {
diff --git a/public/settings-panel.js b/public/settings-panel.js
index 9845b0111..f6f246c04 100644
--- a/public/settings-panel.js
+++ b/public/settings-panel.js
@@ -97,6 +97,7 @@
     const visCountValue = fieldValue('visibleSessionCount', 10);
     const maxAgeValue = fieldValue('sessionMaxAgeDays', 3);
     const themeValue = fieldValue('terminalTheme', 'switchboard');
+    const appThemeValue = fieldValue('appTheme', 'dark');
     const mcpEmulationValue = fieldValue('mcpEmulation', true);
     // Global-only: where new projects get their folder (projects.js). Empty
     // means the default, ~/Switchboard.
@@ -254,6 +255,20 @@
       ${!isProject ? `<div class="settings-section">
         <div class="settings-section-title">Application</div>
 
+        <div class="settings-field">
+          <div class="settings-field-info">
+            <span class="settings-label">Appearance</span>
+            <div class="settings-description">Light or dark interface. System follows your OS setting.</div>
+          </div>
+          <div class="settings-field-control">
+            <select class="settings-select" id="sv-app-theme">
+              ${[['dark', 'Dark'], ['light', 'Light'], ['system', 'System']].map(([key, label]) =>
+                `<option value="${key}" ${appThemeValue === key ? 'selected' : ''}>${label}</option>`
+              ).join('')}
+            </select>
+          </div>
+        </div>
+
         <div class="settings-field">
           <div class="settings-field-info">
             <span class="settings-label">Terminal Theme</span>
@@ -453,6 +468,7 @@
         settings.visibleSessionCount = parseInt(settingsViewerBody.querySelector('#sv-visible-count').value) || 10;
         settings.sessionMaxAgeDays = parseInt(settingsViewerBody.querySelector('#sv-max-age').value) || 3;
         settings.terminalTheme = settingsViewerBody.querySelector('#sv-terminal-theme').value || 'switchboard';
+        settings.appTheme = settingsViewerBody.querySelector('#sv-app-theme').value || 'dark';
         settings.mcpEmulation = settingsViewerBody.querySelector('#sv-mcp-emulation').checked;
         settings.shellProfile = settingsViewerBody.querySelector('#sv-shell-profile').value || 'auto';
         settings.projectsRoot = settingsViewerBody.querySelector('#sv-projects-root').value.trim();
@@ -477,6 +493,9 @@
         if (settings.terminalTheme && typeof window._applyTerminalTheme === 'function') {
           window._applyTerminalTheme(settings.terminalTheme);
         }
+        if (typeof window.setAppThemePreference === 'function') {
+          window.setAppThemePreference(settings.appTheme);
+        }
         if (typeof refreshSidebar === 'function') refreshSidebar();
       }
 
diff --git a/public/terminal-themes.js b/public/terminal-themes.js
index 307fb2da7..d50a20e2f 100644
--- a/public/terminal-themes.js
+++ b/public/terminal-themes.js
@@ -1,7 +1,7 @@
 // --- Terminal themes ---
 const TERMINAL_THEMES = {
   switchboard: {
-    label: 'Switchboard',
+    label: 'Switchboard (follows appearance)',
     background: '#1a1a2e', foreground: '#e0e0e0', cursor: '#e94560', selectionBackground: '#3a3a5e',
     black: '#1a1a2e', red: '#e94560', green: '#0dff00', yellow: '#f5a623', blue: '#7b68ee', magenta: '#c678dd', cyan: '#56b6c2', white: '#c5c8c6',
     brightBlack: '#555568', brightRed: '#ff6b81', brightGreen: '#69ff69', brightYellow: '#ffd93d', brightBlue: '#8fa8ff', brightMagenta: '#d19afc', brightCyan: '#7ee8e8', brightWhite: '#eaeaea',
@@ -42,10 +42,34 @@ const TERMINAL_THEMES = {
     black: '#073642', red: '#dc322f', green: '#859900', yellow: '#b58900', blue: '#268bd2', magenta: '#d33682', cyan: '#2aa198', white: '#eee8d5',
     brightBlack: '#002b36', brightRed: '#cb4b16', brightGreen: '#586e75', brightYellow: '#657b83', brightBlue: '#839496', brightMagenta: '#6c71c4', brightCyan: '#93a1a1', brightWhite: '#fdf6e3',
   },
+  solarizedLight: {
+    label: 'Solarized Light',
+    background: '#fdf6e3', foreground: '#657b83', cursor: '#586e75', selectionBackground: '#eee8d5',
+    black: '#073642', red: '#dc322f', green: '#859900', yellow: '#b58900', blue: '#268bd2', magenta: '#d33682', cyan: '#2aa198', white: '#eee8d5',
+    brightBlack: '#002b36', brightRed: '#cb4b16', brightGreen: '#586e75', brightYellow: '#657b83', brightBlue: '#839496', brightMagenta: '#6c71c4', brightCyan: '#93a1a1', brightWhite: '#fdf6e3',
+  },
+  githubLight: {
+    label: 'GitHub Light',
+    background: '#ffffff', foreground: '#1f2328', cursor: '#044289', selectionBackground: '#b6e3ff',
+    black: '#24292f', red: '#cf222e', green: '#116329', yellow: '#4d2d00', blue: '#0969da', magenta: '#8250df', cyan: '#1b7c83', white: '#6e7781',
+    brightBlack: '#57606a', brightRed: '#a40e26', brightGreen: '#1a7f37', brightYellow: '#633c01', brightBlue: '#218bff', brightMagenta: '#a475f9', brightCyan: '#3192aa', brightWhite: '#8c959f',
+  },
+};
+
+// The default "Switchboard" theme follows the app's light/dark appearance.
+const SWITCHBOARD_LIGHT_TERMINAL_THEME = {
+  label: 'Switchboard',
+  background: '#fafafc', foreground: '#1d1d26', cursor: '#d6304f', selectionBackground: '#c9cdf5',
+  black: '#1d1d26', red: '#c4314b', green: '#1a8a2e', yellow: '#9a6a00', blue: '#4a52d6', magenta: '#9b3fb5', cyan: '#1f8191', white: '#6b6b80',
+  brightBlack: '#8a8aa0', brightRed: '#e0455f', brightGreen: '#22a83a', brightYellow: '#b88500', brightBlue: '#5f68e8', brightMagenta: '#b05acb', brightCyan: '#2a9caf', brightWhite: '#9a9aae',
 };
 
 let currentThemeName = 'switchboard';
 function getTerminalTheme() {
-  return TERMINAL_THEMES[currentThemeName] || TERMINAL_THEMES.switchboard;
+  if (currentThemeName === 'switchboard' || !TERMINAL_THEMES[currentThemeName]) {
+    const light = typeof window.getAppTheme === 'function' && window.getAppTheme() === 'light';
+    return light ? SWITCHBOARD_LIGHT_TERMINAL_THEME : TERMINAL_THEMES.switchboard;
+  }
+  return TERMINAL_THEMES[currentThemeName];
 }
 let TERMINAL_THEME = getTerminalTheme();
diff --git a/public/theme-light.css b/public/theme-light.css
new file mode 100644
index 000000000..41d175502
--- /dev/null
+++ b/public/theme-light.css
@@ -0,0 +1,3 @@
+/* Light theme: hand-tuned fixes on top of theme-light.generated.css.
+ * The generated file maps every dark color automatically; rules here cover
+ * the places where that mapping isn't good enough. */
diff --git a/public/theme-light.generated.css b/public/theme-light.generated.css
new file mode 100644
index 000000000..72518a274
--- /dev/null
+++ b/public/theme-light.generated.css
@@ -0,0 +1,3491 @@
+/* GENERATED by scripts/generate-light-theme.js from public/style.css, public/whats-new.css.
+ * Do not edit; put hand-tuned fixes in public/theme-light.css. */
+
+/* --- public/style.css --- */
+html[data-theme="light"],
+:root[data-theme="light"] body {
+  background: #f4f4f8;
+  color: #1d1d26;
+}
+:root[data-theme="light"] #update-toast {
+  background: #ffffff;
+  border: 1px solid rgba(77,86,230,0.3);
+  border-radius: 6px;
+  color: #343445;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+}
+:root[data-theme="light"] .update-version {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .update-notes-link {
+  color: #5d65e8;
+  text-decoration: none;
+}
+:root[data-theme="light"] .update-notes-link:hover {
+  text-decoration: underline;
+}
+:root[data-theme="light"] .update-summary {
+  color: #5d5d73;
+}
+:root[data-theme="light"] #update-restart-btn {
+  background: #8088ff;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+}
+:root[data-theme="light"] #update-restart-btn:hover {
+  background: #6a72e0;
+}
+:root[data-theme="light"] #update-dismiss-btn {
+  background: none;
+  border: none;
+  color: #909090;
+}
+:root[data-theme="light"] #update-dismiss-btn:hover {
+  color: #656565;
+}
+:root[data-theme="light"] #status-bar {
+  background: #ececf2;
+  border-top: 1px solid rgba(20,20,40,0.084);
+  color: #6b6b80;
+}
+:root[data-theme="light"] #status-bar-slack {
+  color: #56566e;
+  text-decoration: none;
+}
+:root[data-theme="light"] #status-bar-slack:hover {
+  color: #252539;
+}
+:root[data-theme="light"] #status-bar-slack:focus-visible {
+  outline: 2px solid #4d56e6;
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+:root[data-theme="light"] #status-bar-activity {
+  color: #5d65e8;
+}
+:root[data-theme="light"] #status-bar-activity.status-done {
+  color: #338074;
+}
+:root[data-theme="light"] #status-bar-updater {
+  color: #737373;
+}
+:root[data-theme="light"] .quota-label {
+  color: #333751;
+}
+:root[data-theme="light"] .quota-track {
+  background: rgba(20,20,40,0.12);
+  border-radius: 2px;
+}
+:root[data-theme="light"] .quota-fill {
+  background: #3ecf5a;
+  border-radius: 2px;
+}
+:root[data-theme="light"] .quota-fill.quota-mid {
+  background: #e8a030;
+}
+:root[data-theme="light"] .quota-fill.quota-high {
+  background: #e05070;
+}
+:root[data-theme="light"] .quota-pct {
+  color: #333751;
+}
+:root[data-theme="light"] #sidebar {
+  background: #fafafc;
+  border-right: none;
+}
+:root[data-theme="light"] #sidebar-resize-handle {
+  background: transparent;
+  border-right: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #sidebar-resize-handle:hover,
+:root[data-theme="light"] #sidebar-resize-handle.dragging {
+  background: rgba(120,130,255,0.3);
+}
+:root[data-theme="light"] #sidebar-tabs {
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .sidebar-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .sidebar-tab:hover {
+  color: #5d5d75;
+}
+:root[data-theme="light"] .sidebar-tab.active {
+  color: #3e3e53;
+  border-bottom-color: #4d56e6;
+}
+:root[data-theme="light"] #loading-status {
+  color: #5d5d75;
+}
+:root[data-theme="light"] #star-toggle,
+:root[data-theme="light"] #archive-toggle,
+:root[data-theme="light"] #running-toggle,
+:root[data-theme="light"] #today-toggle {
+  background: transparent;
+  border: 1px solid rgba(20,20,40,0.112);
+  color: #6b6b80;
+  border-radius: 6px;
+}
+:root[data-theme="light"] #star-toggle:hover,
+:root[data-theme="light"] #archive-toggle:hover,
+:root[data-theme="light"] #running-toggle:hover,
+:root[data-theme="light"] #today-toggle:hover {
+  background: rgba(20,20,40,0.04);
+  border-color: rgba(20,20,40,0.168);
+  color: #737373;
+}
+:root[data-theme="light"] #star-toggle.active {
+  background: rgba(245,190,60,0.1);
+  border-color: rgba(245,190,60,0.25);
+  color: #8b6814;
+}
+:root[data-theme="light"] #archive-toggle.active {
+  background: rgba(120,130,255,0.1);
+  border-color: rgba(72,84,229,0.25);
+  color: #5d65e8;
+}
+:root[data-theme="light"] #running-toggle.active {
+  background: rgba(62,207,90,0.1);
+  border-color: rgba(62,207,90,0.25);
+  color: #208133;
+}
+:root[data-theme="light"] #today-toggle.active {
+  background: rgba(80,180,255,0.1);
+  border-color: rgba(80,180,255,0.25);
+  color: #1b75ba;
+}
+:root[data-theme="light"] #search-input {
+  background: rgba(20,20,40,0.04);
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 8px;
+  color: #343445;
+  outline: none;
+}
+:root[data-theme="light"] #search-clear {
+  background: none;
+  border: none;
+  color: #6b6b80;
+}
+:root[data-theme="light"] #search-clear:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #search-input:focus {
+  background: rgba(20,20,40,0.06);
+  border-color: rgba(72,84,229,0.4);
+  box-shadow: 0 0 0 3px rgba(120,130,255,0.056);
+}
+:root[data-theme="light"] #search-input::placeholder {
+  color: #85859d;
+}
+:root[data-theme="light"] #search-titles-toggle {
+  background: none;
+  border: none;
+  color: #85859d;
+}
+:root[data-theme="light"] #search-titles-toggle:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #search-titles-toggle.active {
+  color: #141414;
+}
+:root[data-theme="light"] .project-group {
+  border-radius: 10px;
+  background: rgba(20,20,40,0.03);
+  border: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .project-group:hover {
+  border-color: rgba(20,20,40,0.14);
+}
+:root[data-theme="light"] .project-header {
+  color: #2c2c47;
+  background: transparent;
+}
+:root[data-theme="light"] .project-header:hover {
+  background: rgba(20,20,40,0.03);
+  color: #141435;
+}
+:root[data-theme="light"] .project-archive-btn,
+:root[data-theme="light"] .project-new-btn {
+  background: transparent;
+  color: #64647b;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .project-archive-btn {
+  border: none;
+}
+:root[data-theme="light"] .project-new-btn {
+  border: 1px solid #9f9fae;
+}
+:root[data-theme="light"] .project-new-btn:hover {
+  background: rgba(100,220,120,0.1);
+  color: #2f8039;
+}
+:root[data-theme="light"] .project-archive-btn:hover {
+  background: rgba(120,130,255,0.1);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .project-header .arrow {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .worktree-group {
+  border-left: 1px solid rgba(77,86,230,0.15);
+}
+:root[data-theme="light"] .worktree-header {
+  color: #4f4f67;
+}
+:root[data-theme="light"] .worktree-header:hover {
+  color: #2c2c47;
+}
+:root[data-theme="light"] .worktree-branch-icon {
+  color: #2f8039;
+}
+:root[data-theme="light"] .worktree-new-btn,
+:root[data-theme="light"] .worktree-hide-btn {
+  background: transparent;
+  border: none;
+  color: #64647b;
+  border-radius: 4px;
+}
+:root[data-theme="light"] .worktree-new-btn {
+  border: 1px solid #9f9fae;
+}
+:root[data-theme="light"] .worktree-new-btn:hover {
+  background: rgba(100,220,120,0.1);
+  color: #2f8039;
+}
+:root[data-theme="light"] .worktree-hide-btn:hover {
+  background: rgba(255,100,100,0.1);
+  color: #d83a3a;
+}
+:root[data-theme="light"] .sessions-more-toggle {
+  color: #6b6b80;
+  border-radius: 5px;
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] .sessions-more-toggle:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.08);
+}
+:root[data-theme="light"] .sessions-older-archive-btn {
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .sessions-older-archive-btn:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.16);
+}
+:root[data-theme="light"] .slug-group-header .slug-group-row {
+  border-radius: 8px;
+  border-left: none;
+}
+:root[data-theme="light"] .slug-group-header:hover .slug-group-row {
+  background: rgba(20,20,40,0.06);
+}
+:root[data-theme="light"] .slug-group-expand .arrow {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .slug-group-name {
+  color: #37374d;
+}
+:root[data-theme="light"] .slug-group-meta {
+  color: #7e7e98;
+}
+:root[data-theme="light"] .slug-group-dot {
+  border-radius: 50%;
+}
+:root[data-theme="light"] .slug-group-dot.running {
+  background: #3ecf5a;
+  box-shadow: 0 0 6px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] .slug-group-count {
+  background: rgba(120,130,255,0.18);
+  color: #5d65e8;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .slug-group-archive-btn {
+  background: transparent;
+  border: 1px solid #9f9fae;
+  color: #64647b;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .slug-group-archive-btn:hover {
+  background: rgba(120,130,255,0.1);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .slug-group-more {
+  color: #6b6b80;
+  border-radius: 5px;
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] .slug-group-more:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.08);
+}
+:root[data-theme="light"] .slug-group-sessions {
+  border-left: 2px solid rgba(72,84,229,0.12);
+}
+:root[data-theme="light"] .session-item .session-row {
+  border-radius: 8px;
+}
+:root[data-theme="light"] .session-item:hover .session-row {
+  background: rgba(20,20,40,0.06);
+}
+:root[data-theme="light"] .session-item.active .session-row {
+  background: rgba(120,130,255,0.14);
+}
+:root[data-theme="light"] .session-header .session-pin {
+  background: none;
+  border: none;
+}
+:root[data-theme="light"] .session-footer .session-actions {
+  background: none;
+}
+:root[data-theme="light"] .session-pin {
+  color: #666681;
+}
+:root[data-theme="light"] .session-pin:hover {
+  color: #8b6814;
+}
+:root[data-theme="light"] .session-pin.pinned {
+  color: #8b6814;
+}
+:root[data-theme="light"] .session-mark-icon {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .session-item.is-codex .session-mark-icon {
+  color: #138469;
+}
+:root[data-theme="light"] .session-item.is-terminal .session-mark-icon {
+  color: #208133;
+}
+:root[data-theme="light"] .session-status-dot {
+  border-radius: 50%;
+  background: transparent;
+}
+:root[data-theme="light"] .session-status-dot.running {
+  background: #3ecf5a;
+}
+:root[data-theme="light"] .session-item.cli-busy:not(.needs-attention) .session-status-dot,
+:root[data-theme="light"] .session-item.cli-busy:not(.needs-attention) .session-status-dot.running {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+:root[data-theme="light"] .session-item.cli-busy:not(.needs-attention) .session-mark::after {
+  border-radius: 50%;
+  border: 1.5px solid #4fc3f7;
+  border-top-color: transparent;
+}
+:root[data-theme="light"] .session-item.cli-busy:not(.needs-attention) .session-summary {
+  background: linear-gradient(110deg, #f0f0ff 44%, #4fc3f7 48%, #ffffff 50%, #4fc3f7 52%, #f0f0ff 56%);
+  background-size: 300% 100%;
+  background-clip: text;
+}
+:root[data-theme="light"] .session-summary {
+  color: #37374d;
+}
+:root[data-theme="light"] .session-item.active .session-summary {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .session-rename-input {
+  color: #1d1d3b;
+  background: rgba(20,20,40,0.06);
+  border: 1px solid rgba(72,84,229,0.4);
+  border-radius: 5px;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(120,130,255,0.056);
+}
+:root[data-theme="light"] .session-id {
+  color: #717189;
+}
+:root[data-theme="light"] .session-meta {
+  color: #717189;
+}
+:root[data-theme="light"] .session-actions {
+  background: linear-gradient(90deg, transparent, #fafafc 10%);
+}
+:root[data-theme="light"] .session-more-btn,
+:root[data-theme="light"] .session-stop-btn,
+:root[data-theme="light"] .session-launch-config-btn,
+:root[data-theme="light"] .session-fork-btn,
+:root[data-theme="light"] .session-jsonl-btn,
+:root[data-theme="light"] .session-unread-btn,
+:root[data-theme="light"] .session-archive-btn {
+  background: none;
+  border: none;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .session-more-btn {
+  color: #4d566d;
+}
+:root[data-theme="light"] .session-more-btn:hover {
+  color: #1d1d3b;
+  background: rgba(20,20,40,0.08);
+}
+:root[data-theme="light"] .session-stop-btn {
+  color: #9b4058;
+}
+:root[data-theme="light"] .session-launch-config-btn {
+  color: #7b9e8d;
+  outline: none;
+}
+:root[data-theme="light"] .session-fork-btn {
+  color: #7b9e8d;
+}
+:root[data-theme="light"] .session-unread-btn {
+  color: #497e94;
+}
+:root[data-theme="light"] .session-item.response-ready .session-unread-btn {
+  color: #1777a3;
+}
+:root[data-theme="light"] .session-archive-btn {
+  color: #6068b0;
+}
+:root[data-theme="light"] .session-stop-btn:hover {
+  color: #db3359;
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] .session-launch-config-btn:hover {
+  color: #208133;
+  background: rgba(62,207,90,0.1);
+}
+:root[data-theme="light"] .session-fork-btn:hover {
+  color: #208133;
+  background: rgba(62,207,90,0.1);
+}
+:root[data-theme="light"] .session-unread-btn:hover {
+  color: #1777a3;
+  background: rgba(79,195,247,0.1);
+}
+:root[data-theme="light"] .session-archive-btn:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] .session-item.response-ready .session-status-dot {
+  background: #4fc3f7;
+  box-shadow: 0 0 8px rgba(79,195,247,0.49);
+}
+:root[data-theme="light"] .session-item.response-ready .session-name {
+  color: #1777a3;
+}
+:root[data-theme="light"] .session-item.response-ready .session-summary {
+  color: #1777a3;
+}
+:root[data-theme="light"] .session-item.response-ready .session-time {
+  color: rgba(23,119,163,0.6);
+}
+:root[data-theme="light"] .session-item.needs-attention .session-status-dot,
+:root[data-theme="light"] .session-item.needs-attention .session-status-dot.running {
+  background: #f0a050;
+  box-shadow: none;
+}
+:root[data-theme="light"] .session-item.needs-attention .session-mark-icon,
+:root[data-theme="light"] .session-item.needs-attention.is-codex .session-mark-icon,
+:root[data-theme="light"] .session-item.needs-attention.is-terminal .session-mark-icon {
+  color: #a65f18;
+}
+:root[data-theme="light"] .session-item.needs-attention .session-status-dot::before,
+:root[data-theme="light"] .session-item.needs-attention .session-status-dot::after {
+  border-radius: 50%;
+  border: 1.5px solid rgba(240,160,80,0.7);
+}
+:root[data-theme="light"] .session-item.needs-attention .session-summary {
+  color: #a65f18;
+}
+:root[data-theme="light"] #main {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] #sidebar-collapse-btn {
+  background: none;
+  border: none;
+  color: #6b6b80;
+  border-radius: 6px;
+}
+:root[data-theme="light"] #sidebar-collapse-btn:hover {
+  color: #737373;
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] #sidebar-expand-btn {
+  background: none;
+  border: none;
+  color: #6b6b80;
+  border-radius: 6px;
+}
+:root[data-theme="light"] #sidebar-expand-btn:hover {
+  color: #737373;
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] #placeholder {
+  color: #78788f;
+}
+:root[data-theme="light"] #terminal-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #terminal-header-name {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #terminal-header-pty-title {
+  color: #56566e;
+  border-left: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] #terminal-header-id {
+  color: #78788f;
+}
+:root[data-theme="light"] #terminal-header-shell {
+  color: #5d5d73;
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] #terminal-header-status::before {
+  border-radius: 50%;
+}
+:root[data-theme="light"] #terminal-header-status.running {
+  color: #208133;
+}
+:root[data-theme="light"] #terminal-header-status.running::before {
+  background: #3ecf5a;
+  box-shadow: 0 0 6px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] #terminal-header-status.stopped {
+  color: #6b6b80;
+}
+:root[data-theme="light"] #terminal-header-status.stopped::before {
+  background: #bbbbc2;
+}
+:root[data-theme="light"] #terminal-header-status.failed {
+  color: #d93448;
+}
+:root[data-theme="light"] #terminal-header-status.failed::before {
+  background: #e36a78;
+}
+:root[data-theme="light"] #terminal-stop-btn {
+  background: none;
+  border: none;
+  color: #9b4058;
+  border-radius: 5px;
+}
+:root[data-theme="light"] #terminal-restart-task-btn {
+  background: none;
+  border: none;
+  color: #6b6b80;
+  border-radius: 5px;
+}
+:root[data-theme="light"] #terminal-restart-task-btn:hover {
+  color: #5c64e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] #project-files-btn {
+  background: none;
+  border: none;
+  color: #6b6b80;
+  border-radius: 5px;
+}
+:root[data-theme="light"] #project-files-btn:hover,
+:root[data-theme="light"] #project-files-btn.active {
+  color: #5c64e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] #terminal-stop-btn:hover {
+  color: #db3359;
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] .terminal-container.drag-over {
+  outline: 2px solid rgba(77,86,230,0.6);
+  outline-offset: -2px;
+}
+:root[data-theme="light"] .terminal-container .xterm-viewport {
+  scrollbar-color: rgba(20,20,40,0.14) transparent;
+}
+:root[data-theme="light"] .terminal-container .xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] .terminal-container .xterm-viewport::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.08);
+  border-radius: 4px;
+}
+:root[data-theme="light"] .terminal-container .xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: rgba(20,20,40,0.15);
+}
+:root[data-theme="light"] .cm-editor:focus {
+  outline: none;
+}
+:root[data-theme="light"] .terminal-search-bar {
+  background: #f4f4f8;
+  border: 1px solid rgba(20,20,40,0.21);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+}
+:root[data-theme="light"] .terminal-search-input {
+  background: rgba(20,20,40,0.08);
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 4px;
+  color: #0e1a41;
+  outline: none;
+}
+:root[data-theme="light"] .terminal-search-input:focus {
+  border-color: rgba(77,86,230,0.5);
+}
+:root[data-theme="light"] .terminal-search-count {
+  color: rgba(20,20,40,0.45);
+}
+:root[data-theme="light"] .terminal-search-bar button {
+  background: none;
+  border: none;
+  color: rgba(20,20,40,0.5);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .terminal-search-bar button:hover {
+  background: rgba(20,20,40,0.1);
+  color: #0e1a41;
+}
+:root[data-theme="light"] ::highlight(message-find) {
+  background-color: #c7cbd0;
+  color: #141414;
+}
+:root[data-theme="light"] ::highlight(message-find-active) {
+  background-color: #eaa549;
+  color: #9e9e9e;
+}
+:root[data-theme="light"] #grid-viewer-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #grid-viewer-title {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #grid-viewer-count {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .grid-card-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.056);
+}
+:root[data-theme="light"] .grid-card-dot {
+  border-radius: 50%;
+}
+:root[data-theme="light"] .grid-card-dot.running {
+  background: #3ecf5a;
+  box-shadow: 0 0 6px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] .grid-card-dot.stopped {
+  background: #bbbbc2;
+}
+:root[data-theme="light"] .grid-card-dot.busy {
+  background: #3ecf5a;
+}
+:root[data-theme="light"] .grid-card-name {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .grid-card-project {
+  color: #78788f;
+}
+:root[data-theme="light"] .grid-card-stop-btn {
+  background: none;
+  border: none;
+  color: #9b4058;
+  border-radius: 4px;
+}
+:root[data-theme="light"] .grid-card-stop-btn:hover {
+  color: #db3359;
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] #terminals.grid-layout::-webkit-scrollbar-track {
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] #terminals.grid-layout::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.12);
+  border-radius: 4px;
+}
+:root[data-theme="light"] #terminals.grid-layout::-webkit-scrollbar-thumb:hover {
+  background: rgba(20,20,40,0.25);
+}
+:root[data-theme="light"] .grid-project-heading {
+  color: #2c2d47;
+  background: rgba(20,20,40,0.06);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .grid-card {
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 8px;
+}
+:root[data-theme="light"] .grid-card:hover {
+  border-color: rgba(77,86,230,0.3);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.135);
+}
+:root[data-theme="light"] .grid-card.focused {
+  border-color: rgba(77,86,230,0.5);
+}
+:root[data-theme="light"] .grid-card-footer {
+  color: #6b6b83;
+  background: #fafafc;
+  border-top: 1px solid rgba(20,20,40,0.056);
+}
+:root[data-theme="light"] #sidebar-content::-webkit-scrollbar-track,
+:root[data-theme="light"] #projects-content::-webkit-scrollbar-track,
+:root[data-theme="light"] #plans-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] #sidebar-content::-webkit-scrollbar-thumb,
+:root[data-theme="light"] #projects-content::-webkit-scrollbar-thumb,
+:root[data-theme="light"] #plans-content::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] #sidebar-content::-webkit-scrollbar-thumb:hover,
+:root[data-theme="light"] #projects-content::-webkit-scrollbar-thumb:hover,
+:root[data-theme="light"] #plans-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(20,20,40,0.1);
+}
+:root[data-theme="light"] .plans-empty {
+  color: #78788f;
+}
+:root[data-theme="light"] #plan-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] .viewer-toolbar {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .viewer-toolbar-title {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .viewer-toolbar-path {
+  color: #78788f;
+}
+:root[data-theme="light"] .viewer-toolbar-copy-path {
+  background: none;
+  border: none;
+  color: #78788f;
+  border-radius: 3px;
+}
+:root[data-theme="light"] .viewer-toolbar-copy-path:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] .viewer-panel-editor .cm-editor .cm-line.cm-activeLine {
+  background-color: rgba(128,136,255,0.24);
+  box-shadow: inset 3px 0 rgba(166,171,255,0.7);
+}
+:root[data-theme="light"] .viewer-panel-editor .cm-editor .cm-gutterElement.cm-activeLineGutter {
+  background-color: #c2c4d2;
+  color: #141414;
+}
+:root[data-theme="light"] #stats-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] #stats-viewer-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #stats-viewer-title {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #stats-viewer-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] #stats-viewer-body::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .heatmap-month-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .heatmap-day-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .heatmap-cell {
+  border-radius: 2px;
+}
+:root[data-theme="light"] .heatmap-cell[title]:hover {
+  outline: 1px solid rgba(20,20,40,0.42);
+  outline-offset: -1px;
+}
+:root[data-theme="light"] .heatmap-level-0 {
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] .heatmap-level-1 {
+  background: rgba(128,136,255,0.25);
+}
+:root[data-theme="light"] .heatmap-level-2 {
+  background: rgba(128,136,255,0.45);
+}
+:root[data-theme="light"] .heatmap-level-3 {
+  background: rgba(128,136,255,0.65);
+}
+:root[data-theme="light"] .heatmap-level-4 {
+  background: rgba(128,136,255,0.9);
+}
+:root[data-theme="light"] .heatmap-legend-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .heatmap-legend-cell {
+  border-radius: 2px;
+}
+:root[data-theme="light"] .daily-chart-title {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .daily-chart-bar {
+  background: rgba(128,136,255,0.5);
+  border-radius: 2px 2px 0 0;
+}
+:root[data-theme="light"] .daily-chart-col:hover .daily-chart-bar {
+  background: rgba(128,136,255,0.8);
+}
+:root[data-theme="light"] .daily-chart-bar-msgs {
+  background: rgba(62,207,90,0.4);
+  border-radius: 0 0 2px 2px;
+}
+:root[data-theme="light"] .daily-chart-col:hover .daily-chart-bar-msgs {
+  background: rgba(62,207,90,0.7);
+}
+:root[data-theme="light"] .daily-chart-label {
+  color: #78788f;
+}
+:root[data-theme="light"] .daily-chart-legend {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .daily-chart-legend-dot {
+  border-radius: 2px;
+}
+:root[data-theme="light"] .daily-chart-legend-dot.tokens {
+  background: rgba(128,136,255,0.5);
+}
+:root[data-theme="light"] .daily-chart-legend-dot.msgs {
+  background: rgba(62,207,90,0.4);
+}
+:root[data-theme="light"] .stats-notice {
+  color: #7e7e98;
+  background: rgba(20,20,40,0.03);
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 8px;
+}
+:root[data-theme="light"] .stats-notice code {
+  background: rgba(128,136,255,0.15);
+  color: #5d65e8;
+  border-radius: 4px;
+}
+:root[data-theme="light"] .stats-refresh-error {
+  color: #8e6b23;
+  background: rgba(255,200,50,0.06);
+  border: 1px solid rgba(255,200,50,0.18);
+  border-radius: 8px;
+}
+:root[data-theme="light"] .stats-spinner {
+  color: #737373;
+}
+:root[data-theme="light"] .stats-spinner-icon {
+  border: 2px solid rgba(77,86,230,0.3);
+  border-top-color: #4d56e6;
+  border-radius: 50%;
+}
+:root[data-theme="light"] .usage-card {
+  background: rgba(20,20,40,0.03);
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .usage-card-label {
+  color: #656565;
+}
+:root[data-theme="light"] .usage-card-pct {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .usage-track {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .usage-fill {
+  background: rgba(128,136,255,0.55);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .usage-fill-high {
+  background: rgba(255,100,100,0.55);
+}
+:root[data-theme="light"] .usage-card-reset {
+  color: #9e9e9e;
+}
+:root[data-theme="light"] .usage-rate-limited {
+  color: #907230;
+  background: rgba(255,200,50,0.06);
+  border: 1px solid rgba(255,200,50,0.12);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .usage-refresh-btn {
+  background: none;
+  border: none;
+  color: #9e9e9e;
+  border-radius: 3px;
+}
+:root[data-theme="light"] .usage-refresh-btn:hover {
+  color: #656565;
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .stat-card {
+  background: rgba(20,20,40,0.03);
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .stat-card-value {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .stat-card-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] #memory-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] .markdown-preview {
+  color: #1d1d10;
+  scrollbar-color: rgba(20,20,40,0.112) transparent;
+}
+:root[data-theme="light"] .markdown-preview h1,
+:root[data-theme="light"] .markdown-preview h2,
+:root[data-theme="light"] .markdown-preview h3,
+:root[data-theme="light"] .markdown-preview h4,
+:root[data-theme="light"] .markdown-preview h5,
+:root[data-theme="light"] .markdown-preview h6 {
+  color: #8d4ee6;
+}
+:root[data-theme="light"] .markdown-preview h1 {
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .markdown-preview h2 {
+  border-bottom: 1px solid rgba(20,20,40,0.056);
+}
+:root[data-theme="light"] .markdown-preview a {
+  color: #137388;
+  text-decoration: none;
+}
+:root[data-theme="light"] .markdown-preview a:hover {
+  text-decoration: underline;
+}
+:root[data-theme="light"] .markdown-preview code {
+  background: none;
+  color: #356ce2;
+}
+:root[data-theme="light"] .markdown-preview pre {
+  background: #e3e3e7;
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .markdown-preview pre code {
+  background: none;
+}
+:root[data-theme="light"] .markdown-preview blockquote {
+  border-left: 3px solid #6272a4;
+  color: #3e3e53;
+}
+:root[data-theme="light"] .markdown-preview table {
+  border-collapse: collapse;
+}
+:root[data-theme="light"] .markdown-preview th,
+:root[data-theme="light"] .markdown-preview td {
+  border: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] .markdown-preview th {
+  background: rgba(20,20,40,0.04);
+  color: #8d4ee6;
+}
+:root[data-theme="light"] .markdown-preview hr {
+  border: none;
+  border-top: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] .markdown-preview img {
+  border-radius: 6px;
+}
+:root[data-theme="light"] #jsonl-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] #jsonl-viewer-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #jsonl-viewer-title {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #jsonl-viewer-session-id {
+  color: #78788f;
+}
+:root[data-theme="light"] #jsonl-viewer-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] #jsonl-viewer-body::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .jsonl-entry {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .jsonl-user {
+  background: rgba(20,20,40,0.08);
+  border-top: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .jsonl-user .jsonl-text {
+  color: #252539;
+}
+:root[data-theme="light"] .jsonl-assistant {
+  background: transparent;
+}
+:root[data-theme="light"] .jsonl-text {
+  color: #343445;
+}
+:root[data-theme="light"] .jsonl-text strong {
+  color: #141435;
+}
+:root[data-theme="light"] .jsonl-text h1,
+:root[data-theme="light"] .jsonl-text h2,
+:root[data-theme="light"] .jsonl-text h3,
+:root[data-theme="light"] .jsonl-text h4,
+:root[data-theme="light"] .jsonl-text h5,
+:root[data-theme="light"] .jsonl-text h6 {
+  color: #252539;
+}
+:root[data-theme="light"] .jsonl-text table {
+  border-collapse: collapse;
+}
+:root[data-theme="light"] .jsonl-text th,
+:root[data-theme="light"] .jsonl-text td {
+  border: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] .jsonl-text th {
+  background: rgba(20,20,40,0.04);
+  color: #323255;
+}
+:root[data-theme="light"] .jsonl-text td {
+  color: #484861;
+}
+:root[data-theme="light"] .jsonl-text hr {
+  border: none;
+  border-top: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .jsonl-text pre {
+  background: rgba(0,0,0,0.135);
+  border-radius: 4px;
+}
+:root[data-theme="light"] .jsonl-text :not(pre) > code {
+  background: rgba(20,20,40,0.06);
+  border-radius: 4px;
+  color: #3d2257;
+}
+:root[data-theme="light"] .jsonl-text a {
+  color: #1c72c7;
+}
+:root[data-theme="light"] .jsonl-text a:hover {
+  color: #1a71b9;
+}
+:root[data-theme="light"] .jsonl-code-block {
+  background: rgba(0,0,0,0.135);
+  border-radius: 4px;
+  color: #3a4354;
+}
+:root[data-theme="light"] .jsonl-inline-code {
+  background: rgba(20,20,40,0.06);
+  border-radius: 4px;
+  color: #3d2257;
+}
+:root[data-theme="light"] .jsonl-tool-call,
+:root[data-theme="light"] .jsonl-tool-result {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .jsonl-tool-call {
+  border: 1px solid rgba(20,20,40,0.21);
+}
+:root[data-theme="light"] .jsonl-tool-result {
+  border: 1px solid rgba(72,84,229,0.12);
+}
+:root[data-theme="light"] .jsonl-tool-name {
+  color: #2777a0;
+}
+:root[data-theme="light"] .jsonl-tool-summary {
+  color: #65656d;
+}
+:root[data-theme="light"] .jsonl-tool-summary code {
+  color: #65656d;
+  background: rgba(20,20,40,0.04);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .jsonl-tool-detail {
+  color: #7e8798;
+}
+:root[data-theme="light"] .jsonl-tool-content {
+  border-left: 1.5px solid rgba(20,20,40,0.21);
+}
+:root[data-theme="light"] .jsonl-tool-cmd-block {
+  color: #65656d;
+}
+:root[data-theme="light"] .jsonl-diff-del {
+  color: #d83a3a;
+}
+:root[data-theme="light"] .jsonl-diff-add {
+  color: #338133;
+}
+:root[data-theme="light"] .jsonl-tool-screenshot {
+  border-radius: 4px;
+  border: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] .jsonl-tool-screenshot:hover {
+  border-color: rgba(20,20,40,0.28);
+}
+:root[data-theme="light"] .jsonl-screenshot-fullscreen {
+  background: rgba(255,255,255,0.85);
+}
+:root[data-theme="light"] .jsonl-screenshot-fullscreen img {
+  border-radius: 6px;
+}
+:root[data-theme="light"] .jsonl-tool-cmd-block::-webkit-scrollbar-track,
+:root[data-theme="light"] .jsonl-tool-diff::-webkit-scrollbar-track,
+:root[data-theme="light"] .jsonl-tool-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] .jsonl-tool-cmd-block::-webkit-scrollbar-thumb,
+:root[data-theme="light"] .jsonl-tool-diff::-webkit-scrollbar-thumb,
+:root[data-theme="light"] .jsonl-tool-content::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 2px;
+}
+:root[data-theme="light"] .jsonl-tool-call .jsonl-toggle {
+  background: rgba(20,20,40,0.08);
+  color: #3d2257;
+}
+:root[data-theme="light"] .jsonl-tool-call .jsonl-toggle:hover {
+  background: rgba(20,20,40,0.14);
+}
+:root[data-theme="light"] .jsonl-tool-result .jsonl-toggle {
+  background: rgba(120,130,255,0.06);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .jsonl-tool-result .jsonl-toggle:hover {
+  background: rgba(120,130,255,0.12);
+}
+:root[data-theme="light"] .jsonl-tool-body {
+  color: #65656d;
+  background: rgba(0,0,0,0.09);
+}
+:root[data-theme="light"] .jsonl-tool-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] .jsonl-tool-body::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 2px;
+}
+:root[data-theme="light"] .jsonl-thinking {
+  border-radius: 4px;
+  border: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .jsonl-thinking .jsonl-toggle {
+  background: rgba(20,20,40,0.03);
+  color: #6b6b7b;
+}
+:root[data-theme="light"] .jsonl-thinking .jsonl-toggle:hover {
+  background: rgba(20,20,40,0.06);
+}
+:root[data-theme="light"] .jsonl-thinking .jsonl-tool-body {
+  color: #65656d;
+}
+:root[data-theme="light"] .jsonl-meta-entry {
+  background: rgba(20,20,40,0.02);
+  border-left-color: rgba(20,20,40,0.112);
+  color: #7e7e98;
+}
+:root[data-theme="light"] .jsonl-meta-entry strong {
+  color: #65656d;
+}
+:root[data-theme="light"] .jsonl-meta-entry code {
+  color: #514161;
+}
+:root[data-theme="light"] .jsonl-meta-icon {
+  border-radius: 4px;
+  background: rgba(20,20,40,0.04);
+  color: #6b6b80;
+}
+:root[data-theme="light"] .jsonl-ts {
+  color: #9595a8;
+}
+:root[data-theme="light"] .session-jsonl-btn {
+  background: none;
+  border: none;
+  border-radius: 5px;
+  color: #458080;
+}
+:root[data-theme="light"] .session-jsonl-btn:hover {
+  color: #247c7c;
+  background: rgba(64,200,200,0.1);
+}
+:root[data-theme="light"] #memory-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] #memory-content::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .memory-brain-icon {
+  color: #565675;
+}
+:root[data-theme="light"] .memory-schedule-icon {
+  color: #976817;
+}
+:root[data-theme="light"] .schedule-play-btn {
+  background: transparent;
+  border: 1px solid rgba(100,220,120,0.3);
+  color: #2f8039;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .schedule-play-btn:hover {
+  background: rgba(100,220,120,0.1);
+  color: #2f8039;
+}
+:root[data-theme="light"] .schedule-play-btn.running {
+  color: #976817;
+  border-color: rgba(224,160,48,0.3);
+}
+:root[data-theme="light"] .schedule-play-btn.done {
+  color: #2f8039;
+  border-color: rgba(100,220,120,0.4);
+  background: rgba(100,220,120,0.1);
+}
+:root[data-theme="light"] .memory-file-count {
+  color: #6b6b80;
+  background: rgba(20,20,40,0.05);
+  border-radius: 8px;
+}
+:root[data-theme="light"] .memory-source-badge {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .memory-source-badge.source-claude-home {
+  background: rgba(128,136,255,0.15);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .memory-source-badge.source-project {
+  background: rgba(62,207,90,0.12);
+  color: #208133;
+}
+:root[data-theme="light"] #grid-toggle-btn,
+:root[data-theme="light"] #resort-btn,
+:root[data-theme="light"] #add-project-btn {
+  background: transparent;
+  border: 1px solid rgba(20,20,40,0.112);
+  color: #6b6b80;
+  border-radius: 6px;
+}
+:root[data-theme="light"] #grid-toggle-btn:hover,
+:root[data-theme="light"] #resort-btn:hover,
+:root[data-theme="light"] #add-project-btn:hover {
+  background: rgba(20,20,40,0.04);
+  border-color: rgba(20,20,40,0.168);
+  color: #737373;
+}
+:root[data-theme="light"] #grid-toggle-btn.active {
+  background: rgba(128,136,255,0.1);
+  border-color: rgba(77,86,230,0.3);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .add-project-overlay {
+  background: rgba(0,0,0,0.225);
+}
+:root[data-theme="light"] .add-project-dialog {
+  background: #f4f4f8;
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.225);
+}
+:root[data-theme="light"] .add-project-dialog h3 {
+  color: #252539;
+}
+:root[data-theme="light"] .add-project-hint {
+  color: #909090;
+}
+:root[data-theme="light"] .add-project-dialog .folder-input-row input {
+  background: rgba(20,20,40,0.05);
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 6px;
+  color: #252539;
+  outline: none;
+}
+:root[data-theme="light"] .add-project-dialog .folder-input-row input:focus {
+  border-color: rgba(72,84,229,0.4);
+}
+:root[data-theme="light"] .add-project-dialog .folder-input-row input::placeholder {
+  color: #9e9e9e;
+}
+:root[data-theme="light"] .add-project-browse-btn {
+  background: rgba(20,20,40,0.06);
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 6px;
+  color: #3e3e53;
+}
+:root[data-theme="light"] .add-project-browse-btn:hover {
+  background: rgba(20,20,40,0.1);
+  border-color: rgba(20,20,40,0.21);
+}
+:root[data-theme="light"] .add-project-dialog .add-project-actions button {
+  border-radius: 6px;
+  border: 1px solid rgba(20,20,40,0.14);
+}
+:root[data-theme="light"] .add-project-cancel-btn {
+  background: transparent;
+  color: #737373;
+}
+:root[data-theme="light"] .add-project-cancel-btn:hover {
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .add-project-add-btn {
+  background: rgba(120,130,255,0.15);
+  color: #5d65e8;
+  border-color: rgba(72,84,229,0.3) !important;
+}
+:root[data-theme="light"] .add-project-add-btn:hover {
+  background: rgba(120,130,255,0.25);
+}
+:root[data-theme="light"] .add-project-error {
+  color: #e02525;
+}
+:root[data-theme="light"] #global-settings-btn {
+  background: transparent;
+  border: none;
+  color: #6b6b80;
+  border-radius: 6px;
+}
+:root[data-theme="light"] #global-settings-btn:hover {
+  background: rgba(20,20,40,0.04);
+  border-color: rgba(20,20,40,0.168);
+  color: #737373;
+}
+:root[data-theme="light"] #global-settings-btn.active {
+  background: rgba(120,130,255,0.1);
+  border-color: rgba(72,84,229,0.25);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .project-schedule-btn {
+  background: transparent;
+  border: none;
+  color: #6b6b80;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .project-schedule-btn:hover {
+  background: rgba(255,180,50,0.1);
+  color: #976817;
+}
+:root[data-theme="light"] .project-settings-btn {
+  background: transparent;
+  border: none;
+  color: #6b6b80;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .project-settings-btn:hover {
+  background: rgba(20,20,40,0.04);
+  border-color: rgba(20,20,40,0.168);
+  color: #737373;
+}
+:root[data-theme="light"] .project-task-btn {
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .project-task-btn:hover {
+  color: #5961e7;
+  border-color: rgba(77,86,230,0.5);
+  background: rgba(128,136,255,0.13);
+}
+:root[data-theme="light"] .project-task-btn.running {
+  color: #217f30;
+  border-color: rgba(62,207,90,0.34);
+  background: rgba(62,207,90,0.09);
+}
+:root[data-theme="light"] .project-task-btn.error {
+  color: #d93448;
+  border-color: rgba(227,106,120,0.35);
+  background: rgba(227,106,120,0.08);
+}
+:root[data-theme="light"] .task-popover {
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 9px;
+  background: #ebebef;
+  box-shadow: 0 14px 40px rgba(0,0,0,0.216);
+}
+:root[data-theme="light"] .task-popover-header {
+  color: #626277;
+}
+:root[data-theme="light"] .task-popover-stop-all {
+  border: 0;
+  border-radius: 5px;
+  color: #b65a6c;
+  background: transparent;
+}
+:root[data-theme="light"] .task-popover-stop-all:hover {
+  color: #d8354f;
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] .task-popover-error {
+  color: #d23748;
+}
+:root[data-theme="light"] .task-popover-empty {
+  color: #626277;
+}
+:root[data-theme="light"] .task-popover-row {
+  border: 0;
+  border-radius: 6px;
+  color: #29293f;
+  background: transparent;
+}
+:root[data-theme="light"] .task-popover-row:hover {
+  background: rgba(128,136,255,0.1);
+}
+:root[data-theme="light"] .task-row-detail {
+  color: #6e6e83;
+}
+:root[data-theme="light"] .task-row-detail.task-row-error {
+  color: #d23748;
+}
+:root[data-theme="light"] .task-row-log {
+  border: 0;
+  background: none;
+  color: #5560e7;
+  text-decoration: underline;
+}
+:root[data-theme="light"] .task-row-log:hover {
+  color: #000442;
+}
+:root[data-theme="light"] .task-row-log:focus-visible {
+  outline: 2px solid #4d56e6;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+:root[data-theme="light"] .task-row-state {
+  color: #6e6e83;
+}
+:root[data-theme="light"] .task-row-state.running {
+  color: #248033;
+}
+:root[data-theme="light"] .task-row-state.failed {
+  color: #d93448;
+}
+:root[data-theme="light"] .task-row-action {
+  border: 0;
+  border-radius: 5px;
+  color: #5d64e8;
+  background: transparent;
+}
+:root[data-theme="light"] .task-row-action:hover {
+  background: rgba(128,136,255,0.16);
+}
+:root[data-theme="light"] .task-row-action.stop {
+  color: #ce455e;
+}
+:root[data-theme="light"] .task-row-action.restart {
+  color: #4c5266;
+}
+:root[data-theme="light"] .task-row-action.restart:hover {
+  color: #242940;
+  background: rgba(20,20,40,0.08);
+}
+:root[data-theme="light"] .task-row-action.stop:hover {
+  background: rgba(212,90,112,0.14);
+}
+:root[data-theme="light"] .task-log-container {
+  background: #f6f6f7;
+}
+:root[data-theme="light"] #settings-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] #settings-viewer-header {
+  background: #fafafc;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #settings-viewer-title {
+  color: #3e3e53;
+}
+:root[data-theme="light"] #settings-viewer-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] #settings-viewer-body::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .settings-section-title {
+  color: #5d5d73;
+}
+:root[data-theme="light"] .settings-field {
+  border-bottom: 1px solid rgba(20,20,40,0.049);
+  background: rgba(20,20,40,0.02);
+}
+:root[data-theme="light"] .settings-section > .settings-field:first-of-type,
+:root[data-theme="light"] .settings-section > .settings-section-title + .settings-field {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+:root[data-theme="light"] .settings-section > .settings-field:last-child {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom: none;
+}
+:root[data-theme="light"] .settings-label {
+  color: #16162d;
+}
+:root[data-theme="light"] .settings-description {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .settings-hint {
+  color: #78788f;
+}
+:root[data-theme="light"] .settings-use-global {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .settings-use-global input {
+  accent-color: #5d65e8;
+}
+:root[data-theme="light"] .settings-toggle-slider {
+  background: rgba(20,20,40,0.1);
+  border-radius: 12px;
+}
+:root[data-theme="light"] .settings-toggle-slider::before {
+  background: #c7c7c7;
+  border-radius: 50%;
+}
+:root[data-theme="light"] .settings-toggle input:checked + .settings-toggle-slider {
+  background: #3ecf5a;
+}
+:root[data-theme="light"] .settings-toggle input:checked + .settings-toggle-slider::before {
+  background: #ffffff;
+}
+:root[data-theme="light"] .settings-input {
+  background: rgba(20,20,40,0.04);
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 8px;
+  color: #343445;
+  outline: none;
+}
+:root[data-theme="light"] .settings-input:focus {
+  background: rgba(20,20,40,0.06);
+  border-color: rgba(72,84,229,0.4);
+  box-shadow: 0 0 0 3px rgba(120,130,255,0.056);
+}
+:root[data-theme="light"] .settings-select {
+  background: rgba(20,20,40,0.04);
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 8px;
+  color: #343445;
+  outline: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b6b80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+:root[data-theme="light"] .settings-cancel-btn {
+  background: transparent;
+  border: 1px solid rgba(20,20,40,0.168);
+  color: #56566e;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .settings-cancel-btn:hover {
+  background: rgba(20,20,40,0.06);
+  border-color: rgba(20,20,40,0.28);
+  color: #343445;
+}
+:root[data-theme="light"] .settings-save-btn {
+  background: rgba(120,130,255,0.12);
+  border: 1px solid rgba(72,84,229,0.3);
+  color: #5d65e8;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .settings-save-btn:hover {
+  background: rgba(120,130,255,0.2);
+  border-color: rgba(72,84,229,0.5);
+}
+:root[data-theme="light"] .settings-save-btn.saved {
+  background: rgba(62,207,90,0.12);
+  border-color: rgba(62,207,90,0.3);
+  color: #208133;
+}
+:root[data-theme="light"] .settings-notice {
+  background: rgba(255,190,60,0.1);
+  border: 1px solid rgba(255,190,60,0.25);
+  color: #916a16;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .settings-remove-btn {
+  background: rgba(255,80,80,0.08);
+  border: 1px solid rgba(255,80,80,0.2);
+  color: #cc4444;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .settings-remove-btn:hover {
+  background: rgba(255,80,80,0.15);
+  border-color: rgba(255,80,80,0.4);
+  color: #e02929;
+}
+:root[data-theme="light"] .settings-current-version {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .settings-update-status {
+  color: #909090;
+}
+:root[data-theme="light"] .settings-check-updates-btn {
+  background: rgba(20,20,40,0.06);
+  border: 1px solid rgba(20,20,40,0.14);
+  color: #3e3e53;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .settings-check-updates-btn:hover {
+  background: rgba(20,20,40,0.1);
+  border-color: rgba(20,20,40,0.28);
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .new-session-overlay {
+  background: rgba(255,255,255,0.6);
+}
+:root[data-theme="light"] .new-session-dialog {
+  background: #e9e9ed;
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
+}
+:root[data-theme="light"] .session-config-inheritance {
+  color: #5d5d73;
+}
+:root[data-theme="light"] .session-config-reset {
+  border: 0;
+  background: none;
+  color: #4166de;
+}
+:root[data-theme="light"] .session-config-reset:hover {
+  text-decoration: underline;
+}
+:root[data-theme="light"] .session-config-note {
+  color: #946715;
+}
+:root[data-theme="light"] .session-config-more-toggle {
+  border: 0;
+  border-bottom: 1px solid rgba(20,20,40,0.049);
+  background: rgba(20,20,40,0.02);
+  color: #4166de;
+}
+:root[data-theme="light"] .session-config-more-toggle:hover {
+  background: rgba(20,20,40,0.045);
+}
+:root[data-theme="light"] .session-config-more-names {
+  color: #71718a;
+}
+:root[data-theme="light"] .session-config-error {
+  color: #d93448;
+}
+:root[data-theme="light"] .new-session-dialog h3 {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .new-session-dialog .settings-field {
+  border-bottom: 1px solid rgba(20,20,40,0.049);
+  background: rgba(20,20,40,0.02);
+  border-radius: 0;
+}
+:root[data-theme="light"] .new-session-dialog .settings-field:first-of-type {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+:root[data-theme="light"] .new-session-dialog .settings-field:last-of-type {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom: none;
+}
+:root[data-theme="light"] .permission-option {
+  background: rgba(20,20,40,0.04);
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 6px;
+  color: #5d5d75;
+}
+:root[data-theme="light"] .permission-option .perm-desc {
+  color: #7e7e98;
+}
+:root[data-theme="light"] .permission-option:hover {
+  background: rgba(20,20,40,0.06);
+  border-color: rgba(20,20,40,0.21);
+  color: #3e3e53;
+}
+:root[data-theme="light"] .permission-option.selected {
+  background: rgba(120,130,255,0.12);
+  border-color: rgba(72,84,229,0.4);
+  color: #5d65e8;
+}
+:root[data-theme="light"] .permission-option.selected .perm-desc {
+  color: rgba(93,101,232,0.6);
+}
+:root[data-theme="light"] .permission-option.dangerous.selected {
+  background: rgba(224,80,112,0.12);
+  border-color: rgba(224,80,112,0.4);
+  color: #db3359;
+}
+:root[data-theme="light"] .permission-option.dangerous.selected .perm-desc {
+  color: rgba(219,51,89,0.5);
+}
+:root[data-theme="light"] .new-session-cancel-btn {
+  background: transparent;
+  border: 1px solid rgba(20,20,40,0.112);
+  color: #56566e;
+  border-radius: 6px;
+}
+:root[data-theme="light"] .new-session-cancel-btn:hover {
+  background: rgba(20,20,40,0.04);
+  color: #5d5d75;
+}
+:root[data-theme="light"] .new-session-start-btn {
+  background: rgba(62,207,90,0.12);
+  border: 1px solid rgba(62,207,90,0.3);
+  color: #208133;
+  border-radius: 6px;
+}
+:root[data-theme="light"] .new-session-start-btn:hover {
+  background: rgba(62,207,90,0.2);
+  border-color: rgba(62,207,90,0.5);
+}
+:root[data-theme="light"] .new-session-popover {
+  background: #e9e9ed;
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.225);
+}
+:root[data-theme="light"] .popover-option {
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: #3e3e53;
+}
+:root[data-theme="light"] .popover-option:hover {
+  background: rgba(20,20,40,0.06);
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .popover-option-icon {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .popover-option-icon.claude-icon {
+  border-radius: 3px;
+}
+:root[data-theme="light"] .popover-option-icon.codex-icon {
+  color: #138469;
+}
+:root[data-theme="light"] .popover-option-terminal .popover-option-icon,
+:root[data-theme="light"] .terminal-icon {
+  color: #208133;
+}
+:root[data-theme="light"] .popover-option-terminal:hover {
+  background: rgba(62,207,90,0.08);
+}
+:root[data-theme="light"] .session-item.is-terminal .session-status-dot.running {
+  background: #3ecf5a;
+  box-shadow: 0 0 6px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] #file-panel-resize-handle {
+  background: transparent;
+  border-left: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #file-panel-resize-handle:hover,
+:root[data-theme="light"] #file-panel-resize-handle.dragging {
+  background: rgba(120,130,255,0.3);
+}
+:root[data-theme="light"] #file-panel {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] #file-panel.open {
+  border-left: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .fp-toolbar-btn {
+  background: transparent;
+  border: 1px solid rgba(20,20,40,0.112);
+  color: #56566e;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .fp-toolbar-btn:hover {
+  border-color: rgba(72,84,229,0.3);
+  color: #5d65e8;
+  background: rgba(120,130,255,0.06);
+}
+:root[data-theme="light"] .fp-toolbar-btn.active {
+  border-color: rgba(72,84,229,0.4);
+  color: #5d65e8;
+  background: rgba(120,130,255,0.12);
+}
+:root[data-theme="light"] .fp-save-btn:hover {
+  border-color: rgba(62,207,90,0.3);
+  color: #208133;
+  background: rgba(62,207,90,0.06);
+}
+:root[data-theme="light"] .fp-close-btn:hover {
+  border-color: rgba(224,80,112,0.3);
+  color: #db3359;
+  background: rgba(224,80,112,0.06);
+}
+:root[data-theme="light"] #project-file-browser {
+  background: #f0f0f3;
+  border-right: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #file-panel-content.browser-only #project-file-browser {
+  border-right: none;
+}
+:root[data-theme="light"] #project-file-browser-header {
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #project-file-browser-root {
+  color: #444458;
+}
+:root[data-theme="light"] #project-file-browser-refresh {
+  border: none;
+  border-radius: 5px;
+  color: #6e6e83;
+  background: transparent;
+}
+:root[data-theme="light"] #project-file-browser-refresh:hover {
+  color: #5c64e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] .project-file-tree-row {
+  border: none;
+  border-radius: 0;
+  color: #4c4c5e;
+  background: transparent;
+}
+:root[data-theme="light"] .project-file-tree-row:hover:not(:disabled) {
+  color: #262638;
+  background: rgba(20,20,40,0.045);
+}
+:root[data-theme="light"] .project-file-tree-row.selected {
+  color: #00023d;
+  background: rgba(120,130,255,0.13);
+}
+:root[data-theme="light"] .project-file-tree-chevron,
+:root[data-theme="light"] .project-file-tree-spacer {
+  color: #7b7b90;
+}
+:root[data-theme="light"] .project-file-tree-loading,
+:root[data-theme="light"] .project-file-browser-message {
+  color: #7a7a90;
+}
+:root[data-theme="light"] .project-file-browser-message.error {
+  color: #cb455f;
+}
+:root[data-theme="light"] #file-panel-body .cm-merge-a .cm-changedLine,
+:root[data-theme="light"] #file-panel-body .cm-deletedChunk {
+  background-color: rgba(248,81,73,0.12) !important;
+}
+:root[data-theme="light"] #file-panel-body .cm-merge-b .cm-changedLine {
+  background-color: rgba(63,185,80,0.12) !important;
+}
+:root[data-theme="light"] #file-panel-body .cm-merge-a .cm-changedText,
+:root[data-theme="light"] #file-panel-body .cm-deletedChunk .cm-deletedText {
+  background: rgba(248,81,73,0.35) !important;
+}
+:root[data-theme="light"] #file-panel-body .cm-merge-b .cm-changedText {
+  background: rgba(63,185,80,0.35) !important;
+}
+:root[data-theme="light"] #file-panel-actions {
+  background: rgba(239,239,241,0.85);
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 8px;
+}
+:root[data-theme="light"] #file-panel-actions button {
+  border-radius: 5px;
+  border: 1px solid rgba(20,20,40,0.112);
+}
+:root[data-theme="light"] .file-panel-accept-btn {
+  background: rgba(62,207,90,0.1);
+  color: #208133;
+  border-color: rgba(62,207,90,0.3) !important;
+}
+:root[data-theme="light"] .file-panel-accept-btn:hover {
+  background: rgba(62,207,90,0.2);
+}
+:root[data-theme="light"] .file-panel-reject-btn {
+  background: transparent;
+  color: #db3359;
+  border-color: rgba(224,80,112,0.3) !important;
+}
+:root[data-theme="light"] .file-panel-reject-btn:hover {
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] .mcp-toggle {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .mcp-toggle.enabled {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .mcp-toggle.enabled::before {
+  border-radius: 50%;
+  background: #8088ff;
+}
+:root[data-theme="light"] .quota-group-codex .quota-runtime-icon {
+  color: #138469;
+}
+:root[data-theme="light"] .quota-item-codex .quota-label {
+  color: #138469;
+}
+:root[data-theme="light"] .quota-item-codex .quota-fill {
+  background: #10a37f;
+}
+:root[data-theme="light"] .quota-item-codex .quota-fill.quota-mid {
+  background: #d6a53c;
+}
+:root[data-theme="light"] .quota-item-codex .quota-fill.quota-high {
+  background: #e5714d;
+}
+:root[data-theme="light"] .session-dismiss-btn:hover {
+  color: #cd471e;
+}
+:root[data-theme="light"] .project-done-chip {
+  color: #6b6b80;
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 4px;
+}
+:root[data-theme="light"] .project-header--in-project .project-name {
+  color: #5961e7;
+}
+:root[data-theme="light"] .projects-empty {
+  border: 1px dashed rgba(20,20,40,0.168);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .projects-empty-text {
+  color: #5d5d75;
+}
+:root[data-theme="light"] .session-move-btn {
+  background: none;
+  border: none;
+  border-radius: 5px;
+  color: #69698f;
+}
+:root[data-theme="light"] .session-move-btn:hover {
+  color: #5d65e8;
+  background: rgba(120,130,255,0.1);
+}
+:root[data-theme="light"] .task-popover-group {
+  border-top: 1px solid rgba(96,105,232,0.3);
+  background: rgba(128,136,255,0.08);
+  color: #12174d;
+}
+:root[data-theme="light"] .task-popover-inherited {
+  color: #484c6a;
+}
+:root[data-theme="light"] .new-project-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .project-worktree-icon {
+  color: #2f8039;
+}
+:root[data-theme="light"] .proj-new-btn {
+  border-radius: 7px;
+  border: 1px solid rgba(72,84,229,0.35);
+  background: rgba(120,130,255,0.12);
+  color: #5961e7;
+}
+:root[data-theme="light"] .proj-new-btn:hover {
+  background: rgba(120,130,255,0.2);
+  border-color: rgba(72,84,229,0.5);
+}
+:root[data-theme="light"] .proj-section {
+  color: #83839d;
+}
+:root[data-theme="light"] .proj-section--toggle:hover {
+  color: #5d5d75;
+}
+:root[data-theme="light"] .proj-row {
+  border-radius: 8px;
+}
+:root[data-theme="light"] .proj-row:hover {
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .proj-row.selected {
+  background: rgba(120,130,255,0.14);
+}
+:root[data-theme="light"] .proj-mark {
+  border-radius: 7px;
+}
+:root[data-theme="light"] .proj-mark--lg {
+  border-radius: 9px;
+}
+:root[data-theme="light"] .proj-mark--sm {
+  border-radius: 5px;
+}
+:root[data-theme="light"] .proj-name {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .proj-sub {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .proj-task-indicator {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .proj-task-indicator svg {
+  color: #678a6e;
+}
+:root[data-theme="light"] .proj-count {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .proj-dot {
+  border-radius: 50%;
+  background: transparent;
+}
+:root[data-theme="light"] .proj-dot.running {
+  background: transparent;
+  box-shadow: none;
+}
+:root[data-theme="light"] .proj-dot.running::after {
+  border-radius: 50%;
+  border: 1.5px solid #4fc3f7;
+  border-top-color: transparent;
+}
+:root[data-theme="light"] .proj-dot.attention {
+  background: #f0a050;
+  box-shadow: 0 0 6px rgba(240,160,80,0.35);
+}
+:root[data-theme="light"] .proj-dot.ready {
+  background: #4fc3f7;
+  box-shadow: 0 0 6px rgba(79,195,247,0.42);
+}
+:root[data-theme="light"] .proj-dot.woke {
+  background: #b48cff;
+  box-shadow: 0 0 6px rgba(180,140,255,0.35);
+}
+:root[data-theme="light"] .proj-dot.idle {
+  background: rgba(62,207,90,0.4);
+  box-shadow: none;
+}
+:root[data-theme="light"] #project-viewer {
+  background: #f4f4f8;
+}
+:root[data-theme="light"] .ws-header {
+  background: #f2f2f4;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .ws-title {
+  color: #121229;
+}
+:root[data-theme="light"] .ws-chip {
+  border-radius: 6px;
+  border: 1px solid rgba(20,20,40,0.112);
+  background: rgba(20,20,40,0.03);
+  color: #3e3e53;
+}
+:root[data-theme="light"] .ws-chip--worktree {
+  color: #287b33;
+}
+:root[data-theme="light"] .ws-chip--status.active {
+  color: #2f8039;
+  border-color: rgba(62,207,90,0.3);
+  background: rgba(62,207,90,0.08);
+}
+:root[data-theme="light"] .ws-chip--status.done {
+  color: #56566e;
+}
+:root[data-theme="light"] .ws-chip--status.snoozed {
+  color: #4b67e5;
+  border-color: rgba(72,84,229,0.3);
+  background: rgba(120,130,255,0.08);
+}
+:root[data-theme="light"] .ws-chip--add {
+  color: #78788f;
+  border-style: dashed;
+}
+:root[data-theme="light"] .ws-chip--add:hover {
+  color: #3e3e53;
+  border-color: rgba(20,20,40,0.28);
+}
+:root[data-theme="light"] .ws-chip--cli.claude {
+  color: #5961e7;
+}
+:root[data-theme="light"] .ws-chip--cli.codex {
+  color: #1d8068;
+}
+:root[data-theme="light"] .ws-btn {
+  border-radius: 7px;
+  border: 1px solid rgba(20,20,40,0.14);
+  background: rgba(20,20,40,0.04);
+  color: #2c2c47;
+}
+:root[data-theme="light"] .ws-btn:hover {
+  background: rgba(20,20,40,0.08);
+  color: #16162d;
+}
+:root[data-theme="light"] .ws-btn--primary {
+  background: rgba(120,130,255,0.16);
+  border-color: rgba(72,84,229,0.4);
+  color: #5961e7;
+}
+:root[data-theme="light"] .ws-btn--primary:hover {
+  background: rgba(120,130,255,0.26);
+  color: #535ce6;
+}
+:root[data-theme="light"] .ws-btn--danger {
+  color: #db3359;
+  border-color: rgba(224,80,112,0.3);
+}
+:root[data-theme="light"] .ws-btn--danger:hover {
+  background: rgba(224,80,112,0.1);
+  color: #df2251;
+}
+:root[data-theme="light"] .ws-btn.project-task-btn.running {
+  color: #217f30;
+  border-color: rgba(62,207,90,0.34);
+  background: rgba(62,207,90,0.09);
+}
+:root[data-theme="light"] .ws-btn.project-task-btn.error {
+  color: #d93448;
+  border-color: rgba(227,106,120,0.35);
+}
+:root[data-theme="light"] .ws-badge {
+  color: #217f30;
+  background: rgba(62,207,90,0.12);
+  border-radius: 4px;
+}
+:root[data-theme="light"] .ws-tab {
+  color: #6b6b80;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+}
+:root[data-theme="light"] .ws-tab:hover:not([disabled]) {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .ws-tab.active {
+  color: #1d1d3b;
+  border-bottom-color: #4d56e6;
+}
+:root[data-theme="light"] .ws-tab[disabled] {
+  color: #9191a7;
+}
+:root[data-theme="light"] .ws-tab-meta {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-section-title {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-ghost {
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: none;
+  color: #56566e;
+}
+:root[data-theme="light"] .ws-ghost:hover {
+  background: rgba(20,20,40,0.06);
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .ws-ghost--muted {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-hint {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .tcard {
+  background: #fafafc;
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .tcard--general {
+  border-color: rgba(20,20,40,0.126);
+}
+:root[data-theme="light"] .tcard--collapsed .tcard-h {
+  border-bottom: none;
+  border-radius: 9px;
+}
+:root[data-theme="light"] .tcard-chevron {
+  color: #78788f;
+}
+:root[data-theme="light"] .tcard-h {
+  background: rgba(20,20,40,0.022);
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+  border-radius: 9px 9px 0 0;
+}
+:root[data-theme="light"] .tcard-name {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .tcard-meta {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .tcard-more {
+  background: none;
+  border: none;
+  color: #78788f;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .tcard-more:hover {
+  background: rgba(20,20,40,0.06);
+  color: #2c2c47;
+}
+:root[data-theme="light"] .tcard-empty {
+  color: #78788f;
+}
+:root[data-theme="light"] .tcard-f {
+  border-top: 1px solid rgba(20,20,40,0.07);
+}
+:root[data-theme="light"] .ws-card {
+  background: #fafafc;
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .ws-card-title {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .ws-card-meta {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-card-text {
+  color: #45455a;
+}
+:root[data-theme="light"] .ws-card-text.muted {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-progress {
+  border-radius: 3px;
+  background: rgba(20,20,40,0.08);
+}
+:root[data-theme="light"] .ws-progress-fill {
+  background: #8088ff;
+  border-radius: 3px;
+}
+:root[data-theme="light"] .ws-card-strong {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .ws-todo {
+  color: #292940;
+}
+:root[data-theme="light"] .ws-todo:hover {
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] .ws-todo input {
+  accent-color: #5d65e8;
+}
+:root[data-theme="light"] .ws-input {
+  border-radius: 6px;
+  background: rgba(20,20,40,0.05);
+  border: 1px solid rgba(20,20,40,0.14);
+  color: #252539;
+  outline: none;
+}
+:root[data-theme="light"] .ws-input:focus {
+  border-color: rgba(72,84,229,0.4);
+}
+:root[data-theme="light"] .ws-frow {
+  color: #292940;
+}
+:root[data-theme="light"] .ws-frow-icon {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-frow-icon.is-worktree {
+  color: #2f8039;
+}
+:root[data-theme="light"] .ws-recent-file {
+  border: 0;
+  background: none;
+}
+:root[data-theme="light"] .ws-recent-file:hover {
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] .ws-recent-file-dir {
+  color: #71718a;
+}
+:root[data-theme="light"] .ws-added-drop {
+  border: 1px dashed rgba(77,86,230,0.3);
+  border-radius: 8px;
+  color: #5961e7;
+  background: rgba(120,130,255,0.045);
+}
+:root[data-theme="light"] .ws-added-drop.is-over {
+  border-color: rgba(77,86,230,0.85);
+  background: rgba(120,130,255,0.14);
+  color: #000444;
+}
+:root[data-theme="light"] .ws-added-drop-hint {
+  color: #71718a;
+}
+:root[data-theme="light"] .ws-added-file {
+  color: #37374d;
+}
+:root[data-theme="light"] .ws-label {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-path {
+  color: #56566e;
+}
+:root[data-theme="light"] .ws-help {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-check {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .ws-check input {
+  accent-color: #5d65e8;
+}
+:root[data-theme="light"] .ws-select {
+  border-radius: 6px;
+  background: rgba(20,20,40,0.05);
+  border: 1px solid rgba(20,20,40,0.14);
+  color: #252539;
+  outline: none;
+}
+:root[data-theme="light"] .ws-select:focus {
+  border-color: rgba(72,84,229,0.4);
+}
+:root[data-theme="light"] .git-tab-title {
+  color: #18182c;
+}
+:root[data-theme="light"] .git-tab-path {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-readonly {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-repo-picker {
+  border-radius: 7px;
+  background: rgba(20,20,40,0.035);
+}
+:root[data-theme="light"] .git-repo-option {
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #6e6e83;
+}
+:root[data-theme="light"] .git-repo-option:hover {
+  color: #373749;
+}
+:root[data-theme="light"] .git-repo-option.active {
+  color: #1e1e33;
+  background: rgba(20,20,40,0.075);
+}
+:root[data-theme="light"] .git-alert {
+  border: 1px solid rgba(233,166,76,0.28);
+  border-radius: 8px;
+  color: #9b641d;
+  background: rgba(233,166,76,0.07);
+}
+:root[data-theme="light"] .git-summary,
+:root[data-theme="light"] .git-section {
+  border: 1px solid rgba(20,20,40,0.091);
+  border-radius: 10px;
+  background: #fafafc;
+}
+:root[data-theme="light"] .git-branch {
+  color: #1e1e35;
+}
+:root[data-theme="light"] .git-branch svg {
+  color: #337d42;
+}
+:root[data-theme="light"] .git-clean-state {
+  border-radius: 5px;
+}
+:root[data-theme="light"] .git-clean-state.clean {
+  color: #2c7e3c;
+  background: rgba(74,190,96,0.1);
+}
+:root[data-theme="light"] .git-clean-state.changed {
+  color: #9a651f;
+  background: rgba(224,170,99,0.1);
+}
+:root[data-theme="light"] .git-summary-meta {
+  color: #6e6e83;
+}
+:root[data-theme="light"] .git-plus {
+  color: #317f42;
+}
+:root[data-theme="light"] .git-minus {
+  color: #d13d52;
+}
+:root[data-theme="light"] .git-latest {
+  border-top: 1px solid rgba(20,20,40,0.077);
+}
+:root[data-theme="light"] .git-kicker,
+:root[data-theme="light"] .git-section-heading {
+  color: #717185;
+}
+:root[data-theme="light"] .git-latest-subject {
+  color: #29293f;
+}
+:root[data-theme="light"] .git-latest-meta {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-latest-meta .mono {
+  color: #5d5d74;
+}
+:root[data-theme="light"] .git-empty-inline {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-section-heading {
+  border-bottom: 1px solid rgba(20,20,40,0.077);
+}
+:root[data-theme="light"] .git-section-meta {
+  color: #7c7c92;
+}
+:root[data-theme="light"] .git-view-toggle {
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .git-view-btn {
+  border: 0;
+  background: none;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .git-view-btn:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .git-view-btn.on {
+  background: rgba(120,130,255,0.16);
+  color: #5961e7;
+}
+:root[data-theme="light"] .git-file-list {
+  border-right: 1px solid rgba(20,20,40,0.077);
+  background: rgba(0,0,0,0.036);
+}
+:root[data-theme="light"] .git-file-group {
+  color: #818197;
+}
+:root[data-theme="light"] .git-file-row {
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+:root[data-theme="light"] .git-file-row:hover {
+  background: rgba(20,20,40,0.035);
+}
+:root[data-theme="light"] .git-file-row.selected {
+  background: rgba(122,132,255,0.11);
+}
+:root[data-theme="light"] .git-folder-row {
+  border: 0;
+  background: transparent;
+  color: #4f4f65;
+}
+:root[data-theme="light"] .git-folder-row:hover {
+  background: rgba(20,20,40,0.035);
+}
+:root[data-theme="light"] .git-folder-row.selected {
+  background: rgba(122,132,255,0.11);
+}
+:root[data-theme="light"] .git-folder-chevron {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-folder-icon {
+  color: #5d71bc;
+}
+:root[data-theme="light"] .git-folder-count {
+  color: #85859b;
+}
+:root[data-theme="light"] .git-file-code {
+  color: #976827;
+}
+:root[data-theme="light"] .git-file-code.added,
+:root[data-theme="light"] .git-file-code.untracked {
+  color: #327f42;
+}
+:root[data-theme="light"] .git-file-code.deleted,
+:root[data-theme="light"] .git-file-code.conflicted {
+  color: #d33c51;
+}
+:root[data-theme="light"] .git-file-code.renamed {
+  color: #436bd8;
+}
+:root[data-theme="light"] .git-file-path {
+  color: #343448;
+}
+:root[data-theme="light"] .git-file-meta {
+  color: #7e7e95;
+}
+:root[data-theme="light"] .git-diff-pane {
+  background: #f1f1f3;
+}
+:root[data-theme="light"] .git-diff-title {
+  border-bottom: 1px solid rgba(20,20,40,0.077);
+  background: #efeff2;
+  color: #56566c;
+}
+:root[data-theme="light"] .git-diff {
+  color: #555566;
+}
+:root[data-theme="light"] .git-diff-line.header {
+  color: #6b6b83;
+}
+:root[data-theme="light"] .git-diff-line.hunk {
+  color: #5f6bd0;
+  background: rgba(100,112,215,0.07);
+}
+:root[data-theme="light"] .git-diff-line.add {
+  color: #347c42;
+  background: rgba(58,155,76,0.075);
+}
+:root[data-theme="light"] .git-diff-line.remove {
+  color: #cb3e52;
+  background: rgba(185,63,82,0.075);
+}
+:root[data-theme="light"] .git-diff-empty,
+:root[data-theme="light"] .git-empty-row {
+  color: #78788d;
+}
+:root[data-theme="light"] .git-commit-row + .git-commit-row {
+  border-top: 1px solid rgba(20,20,40,0.056);
+}
+:root[data-theme="light"] .git-commit-hash {
+  color: #676fbd;
+}
+:root[data-theme="light"] .git-commit-subject {
+  color: #343448;
+}
+:root[data-theme="light"] .git-commit-meta {
+  color: #7d7d93;
+}
+:root[data-theme="light"] .git-loading,
+:root[data-theme="light"] .git-empty-state {
+  color: #74748a;
+}
+:root[data-theme="light"] .git-empty-title {
+  color: #39394d;
+}
+:root[data-theme="light"] .git-loading-dot {
+  border-radius: 50%;
+  background: #7c84ec;
+}
+@container (max-width: 720px) {
+  :root[data-theme="light"] .git-file-list {
+    border-right: 0;
+    border-bottom: 1px solid rgba(20,20,40,0.077);
+  }
+}
+:root[data-theme="light"] #project-strip {
+  background: #f2f2f4;
+  border-bottom: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .strip-name {
+  color: #121229;
+}
+:root[data-theme="light"] .strip-branch {
+  color: #287b33;
+}
+:root[data-theme="light"] #project-panes {
+  background: #f0f0f3;
+  border-right: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] #pane-resize-handle {
+  background: transparent;
+}
+:root[data-theme="light"] #pane-resize-handle:hover,
+:root[data-theme="light"] #pane-resize-handle.dragging {
+  background: rgba(120,130,255,0.3);
+}
+:root[data-theme="light"] .pane-search input {
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 7px;
+  background: rgba(20,20,40,0.04);
+  color: #343445;
+}
+:root[data-theme="light"] .pane-search input:focus {
+  outline: none;
+  border-color: rgba(72,84,229,0.5);
+}
+:root[data-theme="light"] .pane-search button {
+  background: none;
+  border: 0;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .pane-search button:hover,
+:root[data-theme="light"] .pane-search-titles.active {
+  color: #141414;
+}
+:root[data-theme="light"] .pane-label {
+  color: #78788f;
+}
+:root[data-theme="light"] .pane-seg {
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .pane-seg-btn {
+  color: #6b6b80;
+  background: none;
+  border: none;
+}
+:root[data-theme="light"] .pane-seg-btn:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .pane-seg-btn.on {
+  background: rgba(120,130,255,0.16);
+  color: #5961e7;
+}
+:root[data-theme="light"] .pane-icon-btn {
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: none;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .pane-icon-btn:hover {
+  background: rgba(20,20,40,0.06);
+  color: #2c2c47;
+}
+:root[data-theme="light"] .pane-icon-btn--primary {
+  border-color: rgba(72,84,229,0.4);
+  background: rgba(120,130,255,0.16);
+  color: #5961e7;
+}
+:root[data-theme="light"] .pane-icon-btn--primary:hover {
+  background: rgba(120,130,255,0.26);
+}
+:root[data-theme="light"] .pane-sec {
+  color: #83839d;
+}
+:root[data-theme="light"] .pane-sec-count {
+  color: #78788f;
+}
+:root[data-theme="light"] .pane-session {
+  border-radius: 7px;
+}
+:root[data-theme="light"] .pane-session:hover {
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .pane-session.here {
+  background: rgba(120,130,255,0.14);
+}
+:root[data-theme="light"] .pane-title {
+  color: #292940;
+}
+:root[data-theme="light"] .pane-meta {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .pane-dot {
+  border-radius: 50%;
+  background: transparent;
+}
+:root[data-theme="light"] .pane-dot.running {
+  background: #3ecf5a;
+  box-shadow: 0 0 5px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] .pane-dot.needs-attention {
+  background: #f0a050;
+  box-shadow: 0 0 5px rgba(240,160,80,0.35);
+}
+:root[data-theme="light"] .pane-tag {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .pane-sep {
+  color: #9191a7;
+}
+:root[data-theme="light"] .pane-more {
+  background: none;
+  border: none;
+  color: #78788f;
+}
+:root[data-theme="light"] .pane-more:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .pane-empty {
+  color: #78788f;
+}
+:root[data-theme="light"] .pane-foot {
+  border-top: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .pane-foot-row {
+  color: #56566e;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .pane-foot-row:hover {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .pane-foot-row b {
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .ctx-menu {
+  background: #ebebef;
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 9px;
+  box-shadow: 0 14px 40px rgba(0,0,0,0.216);
+}
+:root[data-theme="light"] .ctx-item {
+  border-radius: 6px;
+  color: #292940;
+}
+:root[data-theme="light"] .ctx-item:hover,
+:root[data-theme="light"] .ctx-item.open {
+  background: rgba(20,20,40,0.06);
+  color: #121229;
+}
+:root[data-theme="light"] .ctx-item.danger {
+  color: #db3359;
+}
+:root[data-theme="light"] .ctx-item.danger:hover {
+  background: rgba(224,80,112,0.1);
+}
+:root[data-theme="light"] .ctx-item.disabled {
+  color: #83839d;
+}
+:root[data-theme="light"] .ctx-item.disabled:hover {
+  background: none;
+}
+:root[data-theme="light"] .ctx-item.muted {
+  color: #5d5d75;
+}
+:root[data-theme="light"] .ctx-icon {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .ctx-icon .codex-icon {
+  color: #138469;
+}
+:root[data-theme="light"] .ctx-item.danger .ctx-icon {
+  color: #db3359;
+}
+:root[data-theme="light"] .ctx-item.muted .ctx-icon,
+:root[data-theme="light"] .ctx-item.disabled .ctx-icon {
+  color: #78788f;
+}
+:root[data-theme="light"] .ctx-hint {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .terminal-file-choices .ctx-item:focus-visible {
+  outline: 1px solid #4d56e6;
+}
+:root[data-theme="light"] .ctx-arrow {
+  color: #78788f;
+}
+:root[data-theme="light"] .ctx-sep {
+  background: rgba(20,20,40,0.08);
+}
+:root[data-theme="light"] .ctx-head {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .done-choice-opt {
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 8px;
+  color: #292940;
+}
+:root[data-theme="light"] .done-choice-opt:hover {
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] .done-choice-opt:has(input:checked) {
+  border-color: rgba(72,84,229,0.4);
+  background: rgba(120,130,255,0.08);
+}
+:root[data-theme="light"] .done-choice-opt input {
+  accent-color: #5d65e8;
+}
+:root[data-theme="light"] .done-choice-help {
+  color: #78788f;
+}
+:root[data-theme="light"] .done-choice-paths {
+  color: #56566e;
+}
+:root[data-theme="light"] .done-choice-paths em {
+  color: #db3359;
+}
+:root[data-theme="light"] .done-choice-warn {
+  color: #db3359;
+}
+:root[data-theme="light"] .ws-body::-webkit-scrollbar-track,
+:root[data-theme="light"] .pane-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+:root[data-theme="light"] .ws-body::-webkit-scrollbar-thumb,
+:root[data-theme="light"] .pane-scroll::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .ws-body::-webkit-scrollbar-thumb:hover,
+:root[data-theme="light"] .pane-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(20,20,40,0.1);
+}
+:root[data-theme="light"] .pane-cli-icon {
+  color: #56566e;
+}
+:root[data-theme="light"] .pane-cli-icon.is-codex {
+  color: #138469;
+}
+:root[data-theme="light"] .pane-cli-icon.is-terminal {
+  color: #2f8039;
+}
+:root[data-theme="light"] .ws-chip--cli.codex {
+  color: #138469;
+}
+:root[data-theme="light"] .tcard .tcard-session {
+  border-radius: 0;
+}
+:root[data-theme="light"] .tcard .tcard-session + .tcard-session::before {
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .tcard .tcard-session:hover {
+  background: rgba(20,20,40,0.035);
+}
+:root[data-theme="light"] .session-turn-preview {
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 9px;
+  background: #ededf0;
+  box-shadow: 0 10px 32px rgba(0,0,0,0.171);
+}
+:root[data-theme="light"] .session-turn-preview-label {
+  color: #6d6d83;
+}
+:root[data-theme="light"] .session-turn-preview-body.clipped::after {
+  background: linear-gradient(to bottom, rgba(25,25,35,0), #ededf0);
+}
+:root[data-theme="light"] .session-turn-preview-more {
+  color: #6d6d83;
+}
+:root[data-theme="light"] .session-turn-preview-text {
+  color: #2d2d3e;
+}
+:root[data-theme="light"] .session-turn-preview-text h1 {
+  color: #2772be;
+}
+:root[data-theme="light"] .session-turn-preview-text h2 {
+  color: #357b65;
+}
+:root[data-theme="light"] .session-turn-preview-text h3 {
+  color: #845cc8;
+}
+:root[data-theme="light"] .session-turn-preview-text h4 {
+  color: #91682c;
+}
+:root[data-theme="light"] .session-turn-preview-text h5 {
+  color: #bf4966;
+}
+:root[data-theme="light"] .session-turn-preview-text h6 {
+  color: #3a4363;
+}
+:root[data-theme="light"] .session-turn-preview-text strong {
+  color: #18182c;
+}
+:root[data-theme="light"] .session-turn-preview-text em {
+  color: #242437;
+}
+:root[data-theme="light"] .session-turn-preview-text code {
+  border-radius: 3px;
+  background: rgba(20,20,40,0.07);
+  color: #1e1e34;
+}
+:root[data-theme="light"] .session-turn-preview-text pre {
+  border-radius: 5px;
+  background: rgba(0,0,0,0.108);
+}
+:root[data-theme="light"] .session-turn-preview-text pre code {
+  background: none;
+}
+:root[data-theme="light"] .session-turn-preview-text blockquote {
+  border-left: 2px solid rgba(20,20,40,0.224);
+  color: #44445a;
+}
+:root[data-theme="light"] .session-turn-preview-text a {
+  color: #2871c5;
+  text-decoration: none;
+}
+:root[data-theme="light"] .ws-files-divider {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .ws-files-divider:hover,
+:root[data-theme="light"] .ws-files-divider:focus-visible,
+:root[data-theme="light"] .ws-files.is-resizing .ws-files-divider {
+  background: rgba(128,136,255,0.4);
+}
+:root[data-theme="light"] .ws-files-side {
+  background: #fafafc;
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .viewer-media-preview--image {
+  background: repeating-conic-gradient(#eaeaed 0% 25%, #e6e6e9 0% 50%) 0 / 20px 20px;
+}
+:root[data-theme="light"] .viewer-preview-frame {
+  border: 0;
+  background: #ffffff;
+}
+:root[data-theme="light"] .viewer-preview-error {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .json-reader {
+  color: #1d1d10;
+  scrollbar-color: rgba(20,20,40,0.112) transparent;
+}
+:root[data-theme="light"] .json-reader-row {
+  border-radius: 4px;
+}
+:root[data-theme="light"] .json-reader-row:hover {
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] .json-reader-node > summary::before {
+  color: #78788f;
+}
+:root[data-theme="light"] .json-reader-children {
+  border-left: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .json-reader-key {
+  color: #137388;
+}
+:root[data-theme="light"] .json-reader-index {
+  color: #78788f;
+}
+:root[data-theme="light"] .json-reader-dup {
+  text-decoration: underline wavy #946715;
+}
+:root[data-theme="light"] .json-reader-colon,
+:root[data-theme="light"] .json-reader-brace {
+  color: #78788f;
+}
+:root[data-theme="light"] .json-reader-string {
+  color: #62690f;
+}
+:root[data-theme="light"] .json-reader-number {
+  color: #8d4ee6;
+}
+:root[data-theme="light"] .json-reader-boolean {
+  color: #d51e88;
+}
+:root[data-theme="light"] .json-reader-null {
+  color: #d51e88;
+}
+:root[data-theme="light"] .json-reader-count {
+  color: #78788f;
+}
+:root[data-theme="light"] .json-reader-error {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .json-reader-jump {
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 6px;
+  background: rgba(20,20,40,0.05);
+  color: #1d1d3b;
+}
+:root[data-theme="light"] .json-reader-jump:hover {
+  background: rgba(20,20,40,0.1);
+}
+:root[data-theme="light"] .ws-files-list::-webkit-scrollbar-thumb {
+  background: rgba(20,20,40,0.06);
+  border-radius: 3px;
+}
+:root[data-theme="light"] .ws-file-row {
+  border-radius: 6px;
+  color: #3e3e53;
+}
+:root[data-theme="light"] .ws-file-row:hover {
+  background: rgba(20,20,40,0.04);
+  color: #141435;
+}
+:root[data-theme="light"] .ws-file-row.selected {
+  background: rgba(120,130,255,0.14);
+  color: #141435;
+}
+:root[data-theme="light"] .ws-file-row.is-dir {
+  color: #2c2c47;
+}
+:root[data-theme="light"] .ws-file-icon {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .ws-editor {
+  background: #fafafc;
+  border: 1px solid rgba(20,20,40,0.084);
+  border-radius: 10px;
+}
+:root[data-theme="light"] .ws-editor-empty {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-phase {
+  border-radius: 8px;
+  border: 1px solid transparent;
+}
+:root[data-theme="light"] .ws-phase.next {
+  border-color: rgba(240,176,96,0.28);
+  background: rgba(240,176,96,0.05);
+}
+:root[data-theme="light"] .ws-phase-head {
+  border-radius: 8px;
+  color: #252539;
+}
+:root[data-theme="light"] .ws-phase:hover .ws-phase-head {
+  background: rgba(20,20,40,0.03);
+}
+:root[data-theme="light"] .ws-phase.done .ws-phase-title {
+  color: #6b6b80;
+  text-decoration: line-through;
+  text-decoration-color: rgba(20,20,40,0.25);
+}
+:root[data-theme="light"] .ws-phase-meta {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-phase.next .ws-phase-meta {
+  color: #9d6116;
+}
+:root[data-theme="light"] .ws-phase-chevron {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-phase-item.done span {
+  color: #6b6b80;
+  text-decoration: line-through;
+  text-decoration-color: rgba(20,20,40,0.25);
+}
+:root[data-theme="light"] .ws-todo.done span {
+  color: #6b6b80;
+  text-decoration: line-through;
+  text-decoration-color: rgba(20,20,40,0.25);
+}
+:root[data-theme="light"] .ws-plan-links {
+  background: rgba(120,130,255,0.12);
+  border: 1px solid rgba(72,84,229,0.25);
+  color: #5961e7;
+  border-radius: 999px;
+}
+:root[data-theme="light"] .ws-plan-links:hover {
+  background: rgba(120,130,255,0.22);
+}
+:root[data-theme="light"] .ws-item-start {
+  background: transparent;
+  border: none;
+  color: #6b6b80;
+  border-radius: 5px;
+}
+:root[data-theme="light"] .ws-item-start:hover {
+  color: #217f30;
+  background: rgba(62,207,90,0.1);
+}
+:root[data-theme="light"] .np-chip {
+  border-radius: 999px;
+  border: 1px solid rgba(20,20,40,0.14);
+  background: transparent;
+  color: #56566e;
+}
+:root[data-theme="light"] .np-chip:hover {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .np-chip.on {
+  border-color: rgba(72,84,229,0.45);
+  background: rgba(120,130,255,0.12);
+  color: #5961e7;
+}
+:root[data-theme="light"] .np-help {
+  color: #78788f;
+}
+:root[data-theme="light"] .np-link {
+  background: none;
+  border: none;
+  color: #5d65e8;
+}
+:root[data-theme="light"] .np-link:hover {
+  color: #5961e7;
+}
+:root[data-theme="light"] .np-folder {
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .np-folder-name {
+  color: #252539;
+}
+:root[data-theme="light"] .np-folder-path {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-folder-none {
+  color: #909090;
+}
+:root[data-theme="light"] .np-folder-branch {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-folder-branch svg {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .np-folder-env {
+  border-top: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .np-env-title {
+  color: #252539;
+}
+:root[data-theme="light"] .np-env-count {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-env-actions .np-link:disabled {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-env-actions .np-link:focus-visible {
+  outline: 2px solid #4d56e6;
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+:root[data-theme="light"] .np-env-help {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-env-files {
+  border: 1px solid rgba(20,20,40,0.112);
+  border-radius: 5px;
+  background: rgba(0,0,0,0.045);
+}
+:root[data-theme="light"] .np-env-file {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-env-file + .np-env-file {
+  border-top: 1px solid rgba(20,20,40,0.056);
+}
+:root[data-theme="light"] .np-env-file:hover {
+  background: rgba(128,136,255,0.06);
+}
+:root[data-theme="light"] .np-env-file:focus-within {
+  background: rgba(128,136,255,0.1);
+}
+:root[data-theme="light"] .np-env-file .mono {
+  color: #292940;
+}
+:root[data-theme="light"] .np-x {
+  background: none;
+  border: none;
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-x:hover {
+  color: #db3359;
+}
+:root[data-theme="light"] .np-input {
+  background: rgba(20,20,40,0.05);
+  border: 1px solid rgba(20,20,40,0.14);
+  border-radius: 6px;
+  color: #252539;
+  outline: none;
+}
+:root[data-theme="light"] .np-input:focus {
+  border-color: rgba(72,84,229,0.4);
+}
+:root[data-theme="light"] .np-input:disabled {
+  color: #9e9e9e;
+}
+:root[data-theme="light"] .np-input::placeholder {
+  color: #9e9e9e;
+}
+:root[data-theme="light"] .np-preview {
+  background: #efeff1;
+  border-left: 1px solid rgba(20,20,40,0.084);
+}
+:root[data-theme="light"] .np-preview-title {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-tree {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-tree-root {
+  color: #292940;
+}
+:root[data-theme="light"] .np-tree-dir {
+  color: #292940;
+}
+:root[data-theme="light"] .np-tree-sub {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-tree-sub svg {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .np-tree em {
+  color: #818199;
+}
+:root[data-theme="light"] .np-preview-label {
+  color: #78788f;
+}
+:root[data-theme="light"] .np-preview-row {
+  color: #56566e;
+}
+:root[data-theme="light"] .np-preview-row svg {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-preview-foot {
+  color: #818199;
+}
+:root[data-theme="light"] .ws-card-hint {
+  color: #818199;
+}
+:root[data-theme="light"] .ws-sec {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .ws-ghost--accent {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .ws-ghost--accent:hover {
+  color: #5961e7;
+}
+:root[data-theme="light"] .ws-row-k b {
+  color: #252539;
+}
+:root[data-theme="light"] .ws-row-k span {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-item--empty {
+  color: #78788f;
+}
+:root[data-theme="light"] .ws-card > .ws-row + .ws-row,
+:root[data-theme="light"] .ws-card > .ws-item + .ws-item,
+:root[data-theme="light"] .ws-card > .ws-item + .ws-row,
+:root[data-theme="light"] .ws-card > div + .ws-row,
+:root[data-theme="light"] .ws-card > .ws-row + .ws-item {
+  border-top: 1px solid rgba(20,20,40,0.07);
+}
+:root[data-theme="light"] #ws-set-folders .ws-item + .ws-item {
+  border-top: 1px solid rgba(20,20,40,0.07);
+}
+:root[data-theme="light"] .ws-saved {
+  color: #217f30;
+}
+:root[data-theme="light"] .ws-switch {
+  border-radius: 8px;
+  background: rgba(20,20,40,0.14);
+}
+:root[data-theme="light"] .ws-switch::after {
+  border-radius: 50%;
+  background: #ffffff;
+}
+:root[data-theme="light"] .ws-switch-input:checked + .ws-switch {
+  background: #8088ff;
+}
+:root[data-theme="light"] .ws-switch-input:focus-visible + .ws-switch {
+  outline: 2px solid rgba(72,84,229,0.5);
+  outline-offset: 2px;
+}
+:root[data-theme="light"] .ws-trow-dot {
+  border-radius: 50%;
+}
+:root[data-theme="light"] .ws-link-danger {
+  background: none;
+  border: none;
+  color: #db3359;
+}
+:root[data-theme="light"] .ws-link-danger:hover {
+  color: #df2251;
+  text-decoration: underline;
+}
+:root[data-theme="light"] .ws-foot-note {
+  color: #818199;
+}
+:root[data-theme="light"] .pane-session.running .pane-dot {
+  background: #3ecf5a;
+  box-shadow: 0 0 5px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] .pane-session.cli-busy:not(.needs-attention) .pane-dot {
+  background: transparent;
+  box-shadow: none;
+}
+:root[data-theme="light"] .pane-session.cli-busy:not(.needs-attention) .pane-dot::after {
+  border-radius: 50%;
+  border: 1.5px solid #4fc3f7;
+  border-top-color: transparent;
+}
+:root[data-theme="light"] .pane-session.cli-busy:not(.needs-attention) .pane-title {
+  background: linear-gradient(110deg, #f0f0ff 44%, #4fc3f7 48%, #ffffff 50%, #4fc3f7 52%, #f0f0ff 56%);
+  background-size: 300% 100%;
+  background-clip: text;
+}
+:root[data-theme="light"] .pane-session.response-ready:not(.needs-attention):not(.cli-busy) .pane-dot {
+  background: #4fc3f7;
+  box-shadow: 0 0 8px rgba(79,195,247,0.49);
+}
+:root[data-theme="light"] .pane-session.response-ready:not(.needs-attention):not(.cli-busy) .pane-title {
+  color: #1777a3;
+}
+:root[data-theme="light"] .pane-session.needs-attention .pane-dot {
+  background: #f0a050;
+  box-shadow: none;
+}
+:root[data-theme="light"] .pane-session.needs-attention .pane-dot::before,
+:root[data-theme="light"] .pane-session.needs-attention .pane-dot::after {
+  border-radius: 50%;
+  border: 1.5px solid rgba(240,160,80,0.7);
+}
+:root[data-theme="light"] .pane-session.needs-attention .pane-title {
+  color: #a65f18;
+}
+:root[data-theme="light"] .np-folder-icon {
+  color: #6b6b80;
+}
+:root[data-theme="light"] .np-folder-icon.is-worktree {
+  color: #5d65e8;
+}
+:root[data-theme="light"] .np-folder--ask {
+  border-color: rgba(72,84,229,0.35);
+  background: rgba(120,130,255,0.06);
+}
+:root[data-theme="light"] .np-ask-q {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .np-ask-btn--wt {
+  color: #5961e7;
+  border-color: rgba(72,84,229,0.4);
+  background: rgba(120,130,255,0.12);
+}
+:root[data-theme="light"] .np-ask-btn--wt:hover {
+  background: rgba(120,130,255,0.2);
+}
+:root[data-theme="light"] .np-branch-line {
+  color: #78788f;
+}
+:root[data-theme="light"] .np-branch-line b {
+  color: #3e3e53;
+}
+:root[data-theme="light"] .add-project-add-btn:disabled:hover {
+  background: rgba(120,130,255,0.15);
+}
+:root[data-theme="light"] .pane-scroll > .archived-sec::before {
+  background: rgba(20,20,40,0.06);
+}
+:root[data-theme="light"] .archived-toggle {
+  background: none;
+  border: none;
+  color: #83839d;
+}
+:root[data-theme="light"] .archived-toggle b {
+  color: #78788f;
+}
+:root[data-theme="light"] .archived-toggle:hover {
+  color: #56566e;
+}
+:root[data-theme="light"] .tcard-archived.open {
+  color: #56566e;
+}
+:root[data-theme="light"] .tcard-archived-list {
+  border-top: 1px solid rgba(20,20,40,0.07);
+}
+:root[data-theme="light"] .pane-row-archive {
+  border-radius: 6px;
+  border: 1px solid rgba(20,20,40,0.14);
+  background: #ebebef;
+  color: #56566e;
+}
+:root[data-theme="light"] .pane-row-archive:hover {
+  color: #1d1d3b;
+  background: #e6e6ea;
+}
+:root[data-theme="light"] .proj-dot--next {
+  background: #f0a050;
+  box-shadow: 0 0 6px rgba(240,160,80,0.35);
+}
+:root[data-theme="light"] .proj-dot--done {
+  background: #3ecf5a;
+  box-shadow: 0 0 6px rgba(62,207,90,0.35);
+}
+:root[data-theme="light"] .project-schedule-btn.has-schedules {
+  color: #976817;
+  background: rgba(255,180,50,0.1);
+}
+:root[data-theme="light"] .project-schedule-btn.has-schedules.all-off {
+  color: #636372;
+  background: rgba(20,20,40,0.05);
+}
+:root[data-theme="light"] .ws-btn.ws-schedule-btn.has-schedules {
+  color: #946715;
+  border-color: rgba(224,160,48,0.4);
+  background: rgba(224,160,48,0.1);
+}
+:root[data-theme="light"] .ws-btn.ws-schedule-btn.has-schedules.all-off {
+  color: #636372;
+  border-color: rgba(20,20,40,0.168);
+  background: rgba(20,20,40,0.04);
+}
+:root[data-theme="light"] .ws-btn.ws-schedule-btn:hover {
+  background: rgba(224,160,48,0.18);
+  color: #916615;
+}
+:root[data-theme="light"] .pane-tag--schedule {
+  color: #946715;
+  background: rgba(224,160,48,0.12);
+}
+:root[data-theme="light"] .schedule-dialog .sd-cron-note {
+  color: #484861;
+  border: 1px dashed rgba(224,160,48,0.35);
+  border-radius: 6px;
+}
+:root[data-theme="light"] .schedule-dialog .sd-cron-note strong {
+  color: #946715;
+}
+:root[data-theme="light"] .schedule-dialog .sd-time-row {
+  color: #484861;
+}
+:root[data-theme="light"] .schedule-dialog .sd-runs {
+  color: #5d5d73;
+}
+:root[data-theme="light"] .schedule-dialog .sd-error {
+  color: #d93448;
+}
+:root[data-theme="light"] .schedule-dialog .sd-delete-btn {
+  background: transparent;
+  border: 1px solid rgba(227,106,120,0.35);
+  color: #d93448;
+  border-radius: 8px;
+}
+:root[data-theme="light"] .schedule-dialog .sd-delete-btn:hover {
+  background: rgba(227,106,120,0.1);
+}
+:root[data-theme="light"] .terminal-link-tooltip {
+  border: 1px solid #b3b3bb;
+  border-radius: 5px;
+  background: #e6e6e9;
+  color: #1a1a28;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+}
+
+/* --- public/whats-new.css --- */
+:root[data-theme="light"] .whats-new-overlay {
+  background: rgba(251,251,252,0.78);
+}
+:root[data-theme="light"] .whats-new-dialog {
+  border: 1px solid rgba(87,95,231,0.28);
+  border-radius: 16px;
+  background: #efeff1;
+  box-shadow: 0 28px 90px rgba(0,0,0,0.279);
+}
+:root[data-theme="light"] .whats-new-kicker {
+  color: #5c63e8;
+}
+:root[data-theme="light"] .whats-new-header h2 {
+  color: #000029;
+}
+:root[data-theme="light"] .whats-new-header p {
+  color: #4f4f67;
+}
+:root[data-theme="light"] .whats-new-close {
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #5d5d75;
+}
+:root[data-theme="light"] .whats-new-close:hover,
+:root[data-theme="light"] .whats-new-close:focus-visible {
+  background: rgba(20,20,40,0.07);
+  color: #16162d;
+}
+:root[data-theme="light"] .whats-new-stage {
+  border: 1px solid rgba(20,20,40,0.126);
+  border-radius: 11px;
+  background: #f3f3f5;
+}
+:root[data-theme="light"] .whats-new-arrow {
+  border: 1px solid rgba(20,20,40,0.168);
+  border-radius: 8px;
+  background: rgba(20,20,40,0.04);
+  color: #141435;
+}
+:root[data-theme="light"] .whats-new-arrow:hover,
+:root[data-theme="light"] .whats-new-arrow:focus-visible {
+  background: rgba(20,20,40,0.09);
+  border-color: rgba(20,20,40,0.28);
+}
+:root[data-theme="light"] .whats-new-caption {
+  color: #2c2c47;
+}
+:root[data-theme="light"] .whats-new-dot {
+  border: 0;
+  border-radius: 999px;
+  background: #cacad1;
+}
+:root[data-theme="light"] .whats-new-dot.active {
+  background: #8088ff;
+}
+:root[data-theme="light"] .whats-new-dismiss {
+  border: 1px solid rgba(77,86,230,0.45);
+  border-radius: 8px;
+  background: rgba(128,136,255,0.18);
+  color: #141435;
+}
+:root[data-theme="light"] .whats-new-dismiss:hover,
+:root[data-theme="light"] .whats-new-dismiss:focus-visible {
+  background: rgba(128,136,255,0.28);
+  border-color: rgba(77,86,230,0.7);
+}
+:root[data-theme="light"] .whats-new-close:focus-visible,
+:root[data-theme="light"] .whats-new-arrow:focus-visible,
+:root[data-theme="light"] .whats-new-dot:focus-visible,
+:root[data-theme="light"] .whats-new-dismiss:focus-visible {
+  outline: 2px solid #5860e7;
+  outline-offset: 2px;
+}
+:root[data-theme="light"] .whats-new-arrow:focus-visible,
+:root[data-theme="light"] .whats-new-dismiss:focus-visible {
+  outline-offset: -2px;
+}
+:root[data-theme="light"] .whats-new-dialog:focus {
+  outline: none;
+}
diff --git a/scripts/generate-light-theme.js b/scripts/generate-light-theme.js
new file mode 100644
index 000000000..4e98ad3b6
--- /dev/null
+++ b/scripts/generate-light-theme.js
@@ -0,0 +1,419 @@
+#!/usr/bin/env node
+// Generates public/theme-light.generated.css from the dark stylesheets.
+//
+// The app's CSS is written for a dark UI with hard-coded colors. Rather than
+// rewriting it around variables (and conflicting with every upstream change),
+// this script re-emits every rule that sets a color, scoped under
+// :root[data-theme="light"], with the color mapped to a light-theme
+// equivalent. The mapping depends on what the color is used for: a light
+// gray is dark text in the light theme, but a dark gray background becomes a
+// light surface.
+//
+// Hand-tuned fixes live in public/theme-light.css, which loads after the
+// generated file. Re-run after changing style.css:
+//
+//   npm run generate:light-theme
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.join(__dirname, '..');
+const SOURCES = ['public/style.css', 'public/whats-new.css'];
+const OUTPUT = 'public/theme-light.generated.css';
+const SCOPE = ':root[data-theme="light"]';
+
+// Exact replacements for colors that define the overall look; everything
+// else goes through the formulas below. Keyed by usage context.
+const PINNED = {
+  bg: {
+    '#111118': '#f4f4f8', // app background
+    '#18181f': '#fafafc',
+    '#1a1a2e': '#ffffff', // popovers, toasts
+    '#0e0e14': '#ececf2',
+    '#1e1e2e': '#f4f4f8',
+  },
+  text: {
+    '#e0e0e0': '#1d1d26',
+  },
+};
+
+// --- CSS parsing ---------------------------------------------------------
+
+function stripComments(css) {
+  let out = '';
+  for (let i = 0; i < css.length; i++) {
+    const c = css[i];
+    if (c === '"' || c === "'") {
+      const end = findStringEnd(css, i);
+      out += css.slice(i, end + 1);
+      i = end;
+    } else if (c === '/' && css[i + 1] === '*') {
+      const end = css.indexOf('*/', i + 2);
+      i = end === -1 ? css.length : end + 1;
+    } else {
+      out += c;
+    }
+  }
+  return out;
+}
+
+function findStringEnd(css, start) {
+  const quote = css[start];
+  for (let i = start + 1; i < css.length; i++) {
+    if (css[i] === '\\') { i++; continue; }
+    if (css[i] === quote) return i;
+  }
+  return css.length - 1;
+}
+
+// Parses a block's contents into { type: 'rule' | 'at', prelude, body } nodes.
+// Rule bodies stay as raw declaration text; at-rule bodies are parsed again.
+function parseBlock(css) {
+  const nodes = [];
+  let i = 0;
+  while (i < css.length) {
+    let j = i;
+    let prelude = '';
+    while (j < css.length && css[j] !== '{' && css[j] !== ';' && css[j] !== '}') {
+      if (css[j] === '"' || css[j] === "'") {
+        const end = findStringEnd(css, j);
+        prelude += css.slice(j, end + 1);
+        j = end + 1;
+      } else {
+        prelude += css[j++];
+      }
+    }
+    if (j >= css.length) break;
+    if (css[j] !== '{') { i = j + 1; continue; } // @import; or stray }
+    const close = findBlockEnd(css, j);
+    const body = css.slice(j + 1, close);
+    prelude = prelude.trim();
+    if (prelude.startsWith('@')) {
+      nodes.push({ type: 'at', prelude, body });
+    } else {
+      nodes.push({ type: 'rule', prelude, body });
+    }
+    i = close + 1;
+  }
+  return nodes;
+}
+
+function findBlockEnd(css, open) {
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    const c = css[i];
+    if (c === '"' || c === "'") { i = findStringEnd(css, i); continue; }
+    if (c === '{') depth++;
+    else if (c === '}' && --depth === 0) return i;
+  }
+  return css.length;
+}
+
+function parseDeclarations(body) {
+  const decls = [];
+  let cur = '';
+  let parens = 0;
+  for (let i = 0; i < body.length; i++) {
+    const c = body[i];
+    if (c === '"' || c === "'") {
+      const end = findStringEnd(body, i);
+      cur += body.slice(i, end + 1);
+      i = end;
+      continue;
+    }
+    if (c === '(') parens++;
+    if (c === ')') parens--;
+    if (c === ';' && parens === 0) { decls.push(cur); cur = ''; continue; }
+    cur += c;
+  }
+  decls.push(cur);
+  return decls
+    .map(d => {
+      const colon = d.indexOf(':');
+      if (colon === -1) return null;
+      let value = d.slice(colon + 1).trim();
+      const important = /!important\s*$/i.test(value);
+      if (important) value = value.replace(/\s*!important\s*$/i, '');
+      return { prop: d.slice(0, colon).trim().toLowerCase(), value, important };
+    })
+    .filter(d => d && d.prop && d.value);
+}
+
+function splitSelectors(prelude) {
+  const parts = [];
+  let cur = '';
+  let depth = 0;
+  for (const c of prelude) {
+    if (c === '(' || c === '[') depth++;
+    if (c === ')' || c === ']') depth--;
+    if (c === ',' && depth === 0) { parts.push(cur.trim()); cur = ''; continue; }
+    cur += c;
+  }
+  parts.push(cur.trim());
+  return parts.filter(Boolean);
+}
+
+function scopeSelector(sel) {
+  if (/^html\b/.test(sel)) return sel.replace(/^html/, `html[data-theme="light"]`);
+  if (/^:root\b/.test(sel)) return sel.replace(/^:root/, SCOPE);
+  return `${SCOPE} ${sel}`;
+}
+
+// Strips state pseudo-classes so `.btn:hover` can find the background `.btn` sets.
+function baseSelector(sel) {
+  return sel.replace(/:(hover|active|focus|focus-visible|focus-within|disabled|not\([^)]*\))/g, '').trim();
+}
+
+// --- Color math ----------------------------------------------------------
+
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+function parseColor(str) {
+  str = str.trim().toLowerCase();
+  if (str === 'white') return { r: 255, g: 255, b: 255, a: 1 };
+  if (str === 'black') return { r: 0, g: 0, b: 0, a: 1 };
+  let m = str.match(/^#([0-9a-f]{3,8})$/);
+  if (m) {
+    let h = m[1];
+    if (h.length === 3 || h.length === 4) h = [...h].map(c => c + c).join('');
+    if (h.length !== 6 && h.length !== 8) return null;
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+    };
+  }
+  m = str.match(/^rgba?\(([^)]*)\)$/);
+  if (m) {
+    const parts = m[1].split(/[\s,/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+    return { r: parts[0], g: parts[1], b: parts[2], a: parts.length > 3 ? parts[3] : 1 };
+  }
+  return null;
+}
+
+function rgbToHsl({ r, g, b }) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l, c: 0 };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return { h: h * 60, s, l, c: d };
+}
+
+function hslToRgb({ h, s, l }) {
+  const k = n => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+  return { r: Math.round(f(0) * 255), g: Math.round(f(8) * 255), b: Math.round(f(4) * 255) };
+}
+
+function formatColor({ r, g, b, a }) {
+  if (a >= 1) return '#' + [r, g, b].map(v => clamp(Math.round(v), 0, 255).toString(16).padStart(2, '0')).join('');
+  return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${+a.toFixed(3)})`;
+}
+
+const isChromatic = hsl => hsl.c >= 0.2;
+
+// WCAG relative luminance.
+function luminance({ r, g, b }) {
+  const lin = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+// Darkest-first search for the HSL lightness whose luminance is just below target.
+function lightnessForLuminance(hsl, target) {
+  let lo = 0, hi = hsl.l;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (luminance(hslToRgb({ ...hsl, l: mid })) > target) hi = mid; else lo = mid;
+  }
+  return lo;
+}
+
+// --- Mapping -------------------------------------------------------------
+
+function contextFor(prop) {
+  if (prop === 'color' || prop === 'caret-color' || prop === 'fill' || prop === 'stroke' ||
+      prop === '-webkit-text-fill-color' || prop.startsWith('text-decoration') || prop === 'accent-color') return 'text';
+  if (prop.startsWith('background')) return 'bg';
+  if (prop.startsWith('border') || prop.startsWith('outline') || prop === 'column-rule' || prop === 'scrollbar-color') return 'border';
+  if (prop === 'box-shadow' || prop === 'text-shadow' || prop === 'filter') return 'shadow';
+  return null;
+}
+
+// opts.onAccent: the rule paints a saturated background, so light text on it stays light.
+function mapColor(color, ctx, opts = {}) {
+  const hsl = rgbToHsl(color);
+  const a = color.a;
+  const translucent = a < 1;
+  const withL = (l, s = hsl.s) => ({ ...hslToRgb({ h: hsl.h, s, l: clamp(l, 0, 1) }), a });
+
+  if (isChromatic(hsl)) {
+    if (ctx === 'text') {
+      if (opts.onAccent) return color;
+      // Readable on white (contrast ~4.5+); brighter colors get slightly
+      // darker so hover states keep a visible difference.
+      const target = 0.2 * (1 - 0.4 * luminance(color));
+      if (luminance(color) <= target) return color;
+      const s = Math.min(hsl.s, 0.75);
+      return withL(lightnessForLuminance({ ...hsl, s }, target), s);
+    }
+    if (ctx === 'bg') {
+      if (!translucent && hsl.l < 0.25) return withL(1 - hsl.l * 0.55);
+      return color; // buttons and tints keep their hue
+    }
+    if (ctx === 'shadow') return { ...color, a: a * 0.7 };
+    if (ctx === 'border' && hsl.l > 0.7) {
+      const s = Math.min(hsl.s, 0.75);
+      return withL(0.25 + (hsl.l - 0.25) * 0.7, s);
+    }
+    return color;
+  }
+
+  // Neutral (gray, possibly slightly tinted)
+  if (translucent) {
+    const light = hsl.l > 0.5;
+    if (ctx === 'shadow') return light ? { r: 0, g: 0, b: 0, a: a * 0.6 } : { ...color, a: a * 0.45 };
+    if (light) {
+      // White veils used for hover/borders on dark become dark veils.
+      if (ctx === 'text' && opts.onAccent) return color;
+      // Light themes need slightly stronger lines to read the same.
+      return { r: 20, g: 20, b: 40, a: clamp(ctx === 'border' ? a * 1.4 : a, 0, 1) };
+    }
+    // Dark veils: dense ones are surfaces, faint ones are wells/backdrops.
+    if (a >= 0.6) return withL(1 - hsl.l * 0.55, hsl.s * 0.6);
+    return { ...color, a: a * 0.45 };
+  }
+
+  if (ctx === 'text') {
+    if (opts.onAccent && hsl.l > 0.8) return color;
+    return withL(clamp(0.08 + (0.97 - hsl.l) * 0.85, 0.08, 0.62));
+  }
+  if (ctx === 'bg') {
+    if (hsl.l > 0.6) return color; // knobs, previews, white chips
+    return withL(1 - hsl.l * 0.55, hsl.s * 0.6);
+  }
+  if (ctx === 'border') {
+    if (hsl.l < 0.5) return withL(1 - hsl.l * 0.9, hsl.s * 0.6);
+    return withL(clamp(0.08 + (0.97 - hsl.l) * 0.85, 0.08, 0.62));
+  }
+  if (ctx === 'shadow') return color.r + color.g + color.b < 100 ? { ...color, a: a * 0.45 } : color;
+  return color;
+}
+
+const COLOR_RE = /#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|\b(?:white|black)\b/g;
+const URL_HEX_RE = /%23([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+
+function mapValue(value, ctx, opts) {
+  const replace = (match, forcedCtx) => {
+    const key = match.toLowerCase();
+    const c = forcedCtx || ctx;
+    if (PINNED[c] && PINNED[c][key]) return PINNED[c][key];
+    const parsed = parseColor(match);
+    return parsed ? formatColor(mapColor(parsed, c, opts)) : match;
+  };
+  // Process url() separately: only %23-escaped hex inside SVG data URIs.
+  return value.replace(/url\((?:[^()"']|"[^"]*"|'[^']*')*\)/g, '\0$&\0')
+    .split('\0')
+    .map(part => part.startsWith('url(')
+      ? part.replace(URL_HEX_RE, (_, hex) => replace('#' + hex, 'text').replace('#', '%23'))
+      : part.replace(COLOR_RE, m => replace(m)))
+    .join('');
+}
+
+// --- Emit ----------------------------------------------------------------
+
+// First pass: which selectors paint a saturated opaque background?
+function collectAccentSelectors(nodes, set = new Set()) {
+  for (const node of nodes) {
+    if (node.type === 'at') {
+      if (!/^@keyframes/i.test(node.prelude)) collectAccentSelectors(parseBlock(node.body), set);
+      continue;
+    }
+    for (const d of parseDeclarations(node.body)) {
+      if (d.prop !== 'background' && d.prop !== 'background-color') continue;
+      const colors = d.value.match(COLOR_RE) || [];
+      if (colors.some(c => {
+        const p = parseColor(c);
+        if (!p || p.a < 0.85) return false;
+        const hsl = rgbToHsl(p);
+        return isChromatic(hsl) && hsl.l >= 0.3;
+      })) {
+        for (const sel of splitSelectors(node.prelude)) set.add(baseSelector(sel));
+      }
+    }
+  }
+  return set;
+}
+
+// Scoping raises specificity, so a mapped `.a { background: … }` would beat
+// an unscoped `.b .a { background: none }`. Every declaration of a property
+// that gets mapped somewhere is therefore re-emitted, changed or not, which
+// keeps the original cascade between them intact.
+function collectMappedProps(nodes, accentSelectors, props = new Set()) {
+  for (const node of nodes) {
+    if (node.type === 'at') {
+      if (!/^@keyframes/i.test(node.prelude)) collectMappedProps(parseBlock(node.body), accentSelectors, props);
+      continue;
+    }
+    const onAccent = splitSelectors(node.prelude).some(s => accentSelectors.has(baseSelector(s)));
+    for (const d of parseDeclarations(node.body)) {
+      const ctx = contextFor(d.prop);
+      if (ctx && mapValue(d.value, ctx, { onAccent }) !== d.value) props.add(propFamily(d.prop));
+    }
+  }
+  return props;
+}
+
+// Shorthands reset their longhands (`background` resets background-repeat),
+// so a family is re-emitted as a whole: every background-* declaration, not
+// only the ones with colors.
+function propFamily(prop) {
+  const m = prop.match(/^(background|border|outline|text-decoration)\b/);
+  return m ? m[1] : prop;
+}
+
+function emit(nodes, accentSelectors, mappedProps, indent = '') {
+  let out = '';
+  for (const node of nodes) {
+    if (node.type === 'at') {
+      if (/^@keyframes/i.test(node.prelude)) continue; // none of them set colors
+      const inner = emit(parseBlock(node.body), accentSelectors, mappedProps, indent + '  ');
+      if (inner) out += `${indent}${node.prelude} {\n${inner}${indent}}\n`;
+      continue;
+    }
+    const selectors = splitSelectors(node.prelude);
+    const onAccent = selectors.some(s => accentSelectors.has(baseSelector(s)));
+    const changed = [];
+    for (const d of parseDeclarations(node.body)) {
+      if (!mappedProps.has(propFamily(d.prop))) continue;
+      const ctx = contextFor(d.prop);
+      const mapped = ctx ? mapValue(d.value, ctx, { onAccent }) : d.value;
+      changed.push(`${d.prop}: ${mapped}${d.important ? ' !important' : ''}`);
+    }
+    if (changed.length) {
+      out += `${indent}${selectors.map(scopeSelector).join(',\n' + indent)} {\n`;
+      out += changed.map(c => `${indent}  ${c};\n`).join('');
+      out += `${indent}}\n`;
+    }
+  }
+  return out;
+}
+
+let output = `/* GENERATED by scripts/generate-light-theme.js from ${SOURCES.join(', ')}.\n` +
+  ` * Do not edit; put hand-tuned fixes in public/theme-light.css. */\n`;
+for (const src of SOURCES) {
+  const css = stripComments(fs.readFileSync(path.join(ROOT, src), 'utf8'));
+  const nodes = parseBlock(css);
+  const accentSelectors = collectAccentSelectors(nodes);
+  output += `\n/* --- ${src} --- */\n` + emit(nodes, accentSelectors, collectMappedProps(nodes, accentSelectors));
+}
+fs.writeFileSync(path.join(ROOT, OUTPUT), output);
+console.log(`Wrote ${OUTPUT} (${output.split('\n').length} lines)`);

From a546360c9635a34efb0af34bf1b39f9238158f7f Mon Sep 17 00:00:00 2001
From: mbino <alex@mbino.com>
Date: Wed, 28 Oct 2026 18:02:07 +0100
Subject: [PATCH 2/2] Restore spacing in package.json scripts

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ce8848f25..53aedd3fb 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "electron-dev": "SWITCHBOARD_DATA_DIR=\"$HOME/.switchboard-dev\" electron .",
     "bundle:codemirror": "esbuild public/codemirror-setup.js --bundle --outfile=public/codemirror-bundle.js --format=iife --platform=browser --minify",
     "generate:light-theme": "node scripts/generate-light-theme.js",
-    "generate-icons":"node scripts/generate-icons.js && node scripts/generate-dmg-background.js",
+    "generate-icons": "node scripts/generate-icons.js && node scripts/generate-dmg-background.js",
     "build": "npm run bundle && electron-builder",
     "build:mac": "npm run bundle && electron-builder --mac && node scripts/postinstall.js",
     "build:mac:arm64": "npm run bundle && electron-builder --mac --arm64 && node scripts/postinstall.js",