diff --git a/web/src/App.svelte b/web/src/App.svelte
index a8a866d..00e6678 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -77,7 +77,7 @@
 
 <Toaster />
 
-<Sidebar.Provider style="--header-height: calc(var(--spacing) * 12);">
+<Sidebar.Provider class="h-svh" style="--header-height: calc(var(--spacing) * 12);">
   <Sidebar.Root collapsible="icon" variant="inset">
     <Sidebar.Header>
       <Sidebar.Menu>
@@ -160,7 +160,7 @@
     </Sidebar.Footer>
   </Sidebar.Root>
 
-  <Sidebar.Inset class="h-svh min-h-0">
+  <Sidebar.Inset class="min-h-0 overflow-hidden">
     <header class="flex h-(--header-height) shrink-0 items-center gap-1 border-b px-4 lg:gap-2 lg:px-6">
       <Sidebar.Trigger class="-ms-1" />
       <Separator orientation="vertical" class="mx-2 data-[orientation=vertical]:h-4" />
diff --git a/web/src/app.css b/web/src/app.css
index 56f9152..8480042 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -2,59 +2,61 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Neutral gray theme matching shadcn/ui's canonical dark palette (0-chroma
+   OKLCH grays) — the app is dark-only, so :root carries the dark values
+   directly rather than gating behind a .dark class. --success/--warning are
+   Oikos-specific semantic status colors (real health state), kept
+   distinguishable rather than desaturated to match the neutral chrome. */
 :root {
-  --radius: 0.5rem;
-  --background: #0d1117;
-  --foreground: #e6edf3;
-  --card: #161b22;
-  --card-foreground: #e6edf3;
-  --popover: #161b22;
-  --popover-foreground: #e6edf3;
-  --primary: #58a6ff;
-  --primary-foreground: #0d1117;
-  --secondary: #21262d;
-  --secondary-foreground: #e6edf3;
-  --muted: #21262d;
-  --muted-foreground: #8b949e;
-  --accent: #292e36;
-  --accent-foreground: #e6edf3;
-  --destructive: #f85149;
-  --destructive-foreground: #ffffff;
+  --radius: 0.625rem;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
   --success: #3fb950;
   --warning: #d29922;
-  --border: #30363d;
-  --input: #30363d;
-  --ring: #58a6ff;
-  --sidebar: #161b22;
-  --sidebar-foreground: #e6edf3;
-  --sidebar-primary: #58a6ff;
-  --sidebar-primary-foreground: #0d1117;
-  --sidebar-accent: #21262d;
-  --sidebar-accent-foreground: #e6edf3;
-  --sidebar-border: #30363d;
-  --sidebar-ring: #58a6ff;
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
   --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
 
   /* legacy aliases still referenced by Chat/Sessions/App */
   --bg: var(--background);
   --bg-surface: var(--card);
-  --bg-deeper: #0a0e13;
+  --bg-deeper: oklch(0.11 0 0);
   --bg-hover: var(--secondary);
   --bg-active: var(--accent);
   --text: var(--foreground);
   --text-muted: var(--muted-foreground);
-  --accent-blue: var(--primary);
+  /* accent-blue stays a real blue (matches --sidebar-primary) for the few
+     spots that want an interactive "pop" — everything else (buttons,
+     links, focus rings) rides the neutral --primary now. */
+  --accent-blue: var(--sidebar-primary);
   --accent-green: var(--success);
   --accent-red: var(--destructive);
   --accent-orange: var(--warning);
 }
 
-/* the app is dark-only; treat root as the dark theme unconditionally */
-.dark {
-  --background: #0d1117;
-  --foreground: #e6edf3;
-}
-
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);