Add a toggleable Windows 7 (7.css) skin behind a new skin setting

Evaluation branch: a full Aero skin, including frameless windows with our own
title bar, switchable against the existing modern look.

The app already had a four-axis runtime skinning mechanism and zero component
stylesheets, so the skin is one new setting plus one stylesheet section rather
than a parallel UI. The key move is cascade order: 7.css is imported into a
`skin` layer ABOVE Tailwind's `utilities`, so its bare element rules outrank
the ~1900 inline utility classes already in the templates. Template changes are
limited to additive, skin-inert hooks (ARIA roles, `has-scrollbar`,
`w7-toolbar`, `w7-btn`).

- styles.css: explicit layer order, `7.css/dist/7.scoped.css` via `layer(skin)`,
  a token bridge re-pointing the existing semantic tokens at Win7 values (no new
  tokens, so `@theme inline` is untouched), a hand-authored dark Win7 palette,
  and neutralizers that `revert-layer` 7.css's dialog-button metrics back to the
  utility layer. Neutralizers must live inside `skin`, not `skinfix` —
  `revert-layer` only reaches `utilities` from one layer up.
- Frameless chrome: `chromeOptions(skin)` is now the single place either skin's
  frame is decided. `titleBarStyle: "hidden"` on every platform, which is also
  the only way to drop the macOS traffic lights. New `title-bar` component
  mounted by all three window roots.
- Window controls over RPC (minimize/toggle-maximize/close/is-maximized), served
  per window kind so the X reuses each one's existing close path — editors still
  get their dirty prompt. electrobun has no maximize event, so the state is
  derived from `resize`; double-click-to-maximize is implemented here too.
- Font: Noto Sans vendored (OFL-1.1) under ui/src/fonts, since Segoe UI is
  absent off Windows and not redistributable.

Verified: backend `tsc --noEmit` clean, `bun run build:ui` clean (486 kB initial,
under the 500 kB budget), app launches with the skin active and no console
errors. The rendered result has not been eyeballed — screen capture and
accessibility are both denied to the shell on this machine.

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

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

@@ -5,11 +5,12 @@ import { LOCALE_LABELS, SUPPORTED } from '@shared/i18n';
 import type { AccentTone } from '@shared/types';
 import { I18nService } from '../i18n.service';
 import { PanelsService } from '../panels.service';
-import { IS_MAC_CHROME, MOD_LABEL } from '../platform';
+import { IS_MAC_CHROME, IS_WIN7_CHROME, MOD_LABEL } from '../platform';
 import { RpcService } from '../rpc.service';
 import { SettingsService } from '../settings.service';
 import { UpdaterService } from '../updater.service';
 
+const SKINS = ['modern', 'win7'] as const;
 const THEMES = ['system', 'light', 'dark'] as const;
 const DARK_TONES = ['dark', 'darker'] as const;
 // Swatch colors are fixed mid-tones so every dot reads on both light and dark
@@ -41,7 +42,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 bg-chrome pr-1.5 electrobun-webkit-app-region-drag"
+      class="w7-toolbar 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"
@@ -180,6 +181,30 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
             </select>
           </div>
 
+          <div class="mt-2.5 flex items-center justify-between gap-2">
+            <span class="text-xs text-muted-foreground">{{ i18n.t('options.skin.label') }}</span>
+            <div class="flex rounded-md border border-border p-0.5">
+              @for (option of skins; track option) {
+                <button
+                  (click)="settings.setSkin(option)"
+                  class="rounded px-2 py-0.5 text-[11px]"
+                  [class.bg-accent]="settings.skin() === option"
+                  [class.text-foreground]="settings.skin() === option"
+                  [class.text-muted-foreground]="settings.skin() !== option"
+                >
+                  {{ i18n.t('options.skin.' + option) }}
+                </button>
+              }
+            </div>
+          </div>
+          <!-- The CSS half of the skin flips live; the window frame does not
+               (titleBarStyle is fixed at construction — see chromeOptions). -->
+          @if (settings.skin() !== bootSkin) {
+            <p class="mt-1 text-right text-[10px] text-muted-foreground">
+              {{ i18n.t('options.skin.restartHint') }}
+            </p>
+          }
+
           <div class="mt-2.5 flex items-center justify-between gap-2">
             <span class="text-xs text-muted-foreground">{{ i18n.t('options.theme.label') }}</span>
             <div class="flex rounded-md border border-border p-0.5">
@@ -436,6 +461,10 @@ export class TabBar {
   readonly modLabel = MOD_LABEL;
   readonly appName = BRANDING.appName;
   readonly buildLabel = BRANDING.buildLabel;
+  readonly skins = SKINS;
+  /** What the window was BUILT with, not the current setting — the frameless
+   *  chrome only changes on reopen, so the hint compares against this. */
+  readonly bootSkin: (typeof SKINS)[number] = IS_WIN7_CHROME ? 'win7' : 'modern';
   readonly themes = THEMES;
   readonly darkTones = DARK_TONES;
   readonly accents = ACCENTS;