Retone dark theme to warm gray #1a1a19 with layered surfaces

The dark palette was shadcn's cool zinc (#202023, hue ~286). Anchor it on
#1a1a19 instead — cds gray-830, a warm near-neutral (hue 107) — and retone
the whole dark neutral family to match, since a warm background under cool
panels clashes. Lightness ramp is preserved; chromatic tokens (destructive,
success, icon hues, accent formulas) and the light palette are untouched.

Also introduce --chrome so the app isn't one flat tone: frame strips (tab
bar, status bar, transfer bar, editor/manager header+footer, connection
sidebar) now sit one step below the content panes, with popovers and hover
above them — the standard dark-UI elevation order.

Dark ramp: #151514 chrome, #1a1a19 content, #20201f card, #2e2e2d hover;
the "darker" tone drops chrome to true black. Light gains only a zinc-50
chrome step.

Co-Authored-By: Claude <noreply@anthropic.com>

ui/src/app/connection-manager/connection-manager.html

@@ -2,7 +2,7 @@
   <!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
        elsewhere the native titlebar sits above and this is a compact strip -->
   <header
-    class="flex shrink-0 items-center gap-2 border-b border-border pr-2"
+    class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome pr-2"
     [class.h-10]="isMacChrome"
     [class.pl-24]="isMacChrome"
     [class.electrobun-webkit-app-region-drag]="isMacChrome"
@@ -29,7 +29,7 @@
 
   <div class="flex min-h-0 flex-1">
       <!-- stacks + connections list -->
-      <div class="flex w-72 shrink-0 flex-col border-r border-border bg-muted/30">
+      <div class="flex w-72 shrink-0 flex-col border-r border-border bg-chrome">
         <div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
           <button
             (click)="newConnection()"
@@ -327,7 +327,7 @@
             }
           </div>
 
-          <div class="flex items-center gap-2 border-t border-border px-4 py-2.5">
+          <div class="flex items-center gap-2 border-t border-border bg-chrome px-4 py-2.5">
             <button
               (click)="deleteCurrent()"
               class="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-destructive"

ui/src/app/editor-window/editor-window.html

@@ -13,7 +13,7 @@
     <!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
          elsewhere the native titlebar sits above and this is a compact strip -->
     <header
-      class="flex shrink-0 items-center gap-2 border-b border-border pr-2"
+      class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome pr-2"
       [class.h-10]="isMacChrome"
       [class.pl-24]="isMacChrome"
       [class.electrobun-webkit-app-region-drag]="isMacChrome"
@@ -46,7 +46,7 @@
     </header>
 
     @if (findOpen()) {
-      <div class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+      <div class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome px-3 py-1.5">
         <ng-icon name="mynaSearch" size="0.85rem" class="shrink-0 text-muted-foreground" />
         <input
           #findBox
@@ -140,7 +140,7 @@
         ></textarea>
       </div>
 
-      <footer class="flex shrink-0 items-center gap-2 border-t border-border px-4 py-2">
+      <footer class="flex shrink-0 items-center gap-2 border-t border-border bg-chrome px-4 py-2">
         <span class="text-[11px] text-muted-foreground">{{ i18n.t('editor.shortcuts', { mod: modLabel }) }}</span>
         <span class="text-[11px] text-muted-foreground">·</span>
         <span class="text-[11px] tabular-nums text-muted-foreground">

ui/src/app/status-bar/status-bar.ts

@@ -12,7 +12,7 @@ import { TransfersService } from '../transfers.service';
   imports: [NgIcon],
   template: `
     <div
-      class="flex h-6 items-center justify-between gap-4 border-t border-border px-3 text-[11px] text-muted-foreground select-none"
+      class="flex h-6 items-center justify-between gap-4 border-t border-border bg-chrome px-3 text-[11px] text-muted-foreground select-none"
     >
       <!-- transfers summary; click toggles the detailed list -->
       <button

ui/src/app/tab-bar/tab-bar.ts

@@ -41,7 +41,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
     <!-- On macOS this row IS the titlebar (hiddenInset): taller, padded past the
          traffic lights, and draggable. Elsewhere it's a normal compact row. -->
     <div
-      class="relative flex items-center gap-0.5 border-b border-border pr-1.5 electrobun-webkit-app-region-drag"
+      class="relative flex items-center gap-0.5 border-b border-border bg-chrome pr-1.5 electrobun-webkit-app-region-drag"
       [class.h-10]="isMacChrome"
       [class.pl-24]="isMacChrome"
       [class.pl-1.5]="!isMacChrome"

ui/src/app/transfer-bar/transfer-bar.html

@@ -1,5 +1,5 @@
 @if (transfers.expanded() && transfers.hasJobs()) {
-  <div class="flex items-center justify-between border-t border-border px-3 py-1 text-[11px] text-muted-foreground">
+  <div class="flex items-center justify-between border-t border-border bg-chrome px-3 py-1 text-[11px] text-muted-foreground">
     <span>
       {{ i18n.t('transfer.summary', { active: transfers.activeJobs().length, finished: transfers.finishedJobs().length }) }}
     </span>
@@ -11,7 +11,7 @@
       <ng-icon name="mynaTrash" size="0.75rem" /> {{ i18n.t('transfer.clearFinished') }}
     </button>
   </div>
-  <div class="max-h-40 overflow-y-auto border-t border-border">
+  <div class="max-h-40 overflow-y-auto border-t border-border bg-chrome">
     @for (job of transfers.jobs(); track job.id) {
       <div class="flex items-center gap-2 px-3 py-1.5 text-xs">
         <ng-icon [name]="stateIcon(job)" size="0.95rem" [class]="stateClass(job)" />