refactor: charcoal palette + sidebar drawer fixes

- Switch from true-dark to charcoal palette (sidebar darkest, content lighter)
  Page #1a1c23, Sidebar #10121a, Card #22252e, Border #2e3240
- Update all Tailwind semantic mappings to match new palette
- Update landing page CSS hardcoded hex to new palette values
- Fix remaining hardcoded hex in SurveyResponsesPage, SessionsPanel, FlowPilotMessageBar
- Sidebar drawer starts below topbar (top: var(--topbar-h)) instead of viewport top
- Drawer section title uses amber (#fbbf24) for visual pop
- Unify all rail icons: white when inactive, cyan with bg-accent-dim when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/index.css

@@ -8,25 +8,25 @@
 @import '@xyflow/react/dist/style.css';
 
 @theme {
-  /* ── Surface colors ────────────────────────────── */
-  --color-bg-page: #0c0d10;
-  --color-bg-sidebar: #0f1118;
-  --color-bg-card: #14161d;
-  --color-bg-card-hover: #191c25;
-  --color-bg-input: #191c25;
-  --color-bg-code: #0e1017;
-  --color-bg-elevated: #1c1f2a;
+  /* ── Surface colors (Charcoal — sidebar darkest) ─ */
+  --color-bg-page: #1a1c23;
+  --color-bg-sidebar: #10121a;
+  --color-bg-card: #22252e;
+  --color-bg-card-hover: #282b35;
+  --color-bg-input: #282b35;
+  --color-bg-code: #14161e;
+  --color-bg-elevated: #2e3140;
 
   /* ── Text colors ───────────────────────────────── */
   --color-text-heading: #f0f2f5;
   --color-text-primary: #e2e5eb;
   --color-text-secondary: #848b9b;
   --color-text-muted: #4f5666;
-  --color-text-rail-label: #6b7280;
+  --color-text-rail-label: #e2e5eb;
 
   /* ── Border colors ─────────────────────────────── */
-  --color-border-default: #1e2130;
-  --color-border-hover: #2a2f3d;
+  --color-border-default: #2e3240;
+  --color-border-hover: #3d4252;
 
   /* ── Accent (cyan) ─────────────────────────────── */
   --color-accent: #22d3ee;
@@ -43,24 +43,24 @@
   --color-danger-dim: rgba(248,113,113,0.10);
 
   /* ── Tailwind semantic mappings ─────────────────── */
-  --color-background: #0c0d10;
+  --color-background: #1a1c23;
   --color-foreground: #e2e5eb;
-  --color-card: #14161d;
+  --color-card: #22252e;
   --color-card-foreground: #e2e5eb;
-  --color-popover: #14161d;
+  --color-popover: #22252e;
   --color-popover-foreground: #e2e5eb;
   --color-primary: #22d3ee;
   --color-primary-foreground: #ffffff;
-  --color-secondary: #1c1f2a;
+  --color-secondary: #2e3140;
   --color-secondary-foreground: #e2e5eb;
-  --color-muted: #1c1f2a;
+  --color-muted: #2e3140;
   --color-muted-foreground: #848b9b;
-  --color-accent-tw: #1c1f2a;
+  --color-accent-tw: #2e3140;
   --color-accent-foreground: #e2e5eb;
   --color-destructive: #f87171;
   --color-destructive-foreground: #ffffff;
-  --color-border: #1e2130;
-  --color-input: #191c25;
+  --color-border: #2e3240;
+  --color-input: #282b35;
   --color-ring: #22d3ee;
 
   /* ── Radii ─────────────────────────────────────── */
@@ -106,6 +106,7 @@
 :root {
   --sidebar-w: 72px;
   --sidebar-w-pinned: 260px;
+  --topbar-h: 44px;
   --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -274,6 +275,7 @@
 
   .topbar {
     grid-column: 1 / -1;
+    height: var(--topbar-h);
   }
 
   .sidebar {