feat: visual identity, theme toggle, custom CSS, loading states (M4)

Grounds the visual design in the product's own subject matter (vital-
signs monitoring) rather than generic dark-mode defaults: a signature
"pulse" green tied to healthy status (the accent color and the "up"
status color are the same hue - a steady green pulse reads as
healthy, same convention as a cardiac monitor), a small ECG-trace
brand mark, and a restrained pulsing-glow animation on healthy status
dots (prefers-reduced-motion respected) as the one deliberate motion
touch. Typography moves off the bare system-ui stack: IBM Plex Sans
for UI text, IBM Plex Mono with tabular numerals for metric values
(CPU/mem/uptime/latency), Space Grotesk used once for the wordmark -
chosen partly for IBM Plex's own systems-monitoring heritage.

Functional additions:
- Light/dark toggle, independent of config.yml's theme.mode, persisted
  to localStorage with a blocking inline script to avoid a flash of
  the wrong theme on load; auto mode now genuinely follows
  prefers-color-scheme instead of hardcoding dark.
- theme.customCssPath support via a new route handler that serves a
  user-mounted CSS file at runtime (can't be a build-time import,
  hence the targeted no-css-tags lint suppression), with a path-
  traversal guard since it's still reading from disk on every request.
- Loading-skeleton state for widgets awaiting their first WebSocket
  result, distinct from both the error state and genuine no-data.

Verified visually in Chrome: theme toggle switches instantly in both
directions, a live docker widget's status dot and monospace metrics
render correctly in both palettes, and config hot-reload still adds a
new widget without a page refresh.

components/widgets/system/Widget.tsx

@@ -2,6 +2,7 @@
 
 import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
+import { SkeletonLines } from "@/components/widgets/Skeleton";
 import { formatBytes } from "@/lib/format";
 
 type SystemWidget = Extract<Widget, { type: "system" }>;
@@ -15,13 +16,10 @@ function UsageBar({ label, percent, detail }: { label: string; percent: number;
     <div className="flex flex-col gap-1">
       <div className="flex items-center justify-between text-xs text-fg-muted">
         <span>{label}</span>
-        <span>{detail}</span>
+        <span className="font-mono tabular-nums text-fg">{detail}</span>
       </div>
       <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-raised">
-        <div
-          className="h-full rounded-full bg-accent"
-          style={{ width: `${percent}%` }}
-        />
+        <div className="h-full rounded-full bg-accent" style={{ width: `${percent}%` }} />
       </div>
     </div>
   );
@@ -36,6 +34,7 @@ export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widge
     <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
       <span className="text-sm font-medium text-fg">{widget.name}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
+      {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
         <div className="flex flex-col gap-2">
           <UsageBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
@@ -51,7 +50,7 @@ export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widge
           />
           <div className="flex items-center justify-between text-xs text-fg-muted">
             <span>Network</span>
-            <span>
+            <span className="font-mono tabular-nums text-fg">
               ↓ {formatBytes(data.netRxBytesPerSec)}/s · ↑ {formatBytes(data.netTxBytesPerSec)}/s
             </span>
           </div>