Perk-a-cola redesign + surface RCON map/gametype/roster/health

Themes the fleet manager around the Electric Cherry perk-a-cola from Mob of
the Dead — cherry-red art-deco label with electric cyan discharge. New
design tokens (Alfa Slab One + Inter + JetBrains Mono, self-hosted), full
redesign of layout/dashboard/cards/detail page, tokens pass on
deployments/betas/pipeline/beta/diff, cherry+lightning favicon.

Lights up server data that RCON was already fetching but the UI dropped.
parsePlayerRoster() extracts num/score/ping/guid/name from both status
dialects. Worker persists last_map/last_gametype/last_roster/last_seen_at/
last_error (new columns with idempotent boot-time ALTERs) and emits them
over SSE. Fleet cards now show health dot, map · gametype, top-3 roster
preview, and last-seen. Detail page adds a sortable full roster with
distinct empty-lobby vs offline states. New health classifier
(online/stale/offline) drives the visual state.

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

src/lib/ui/components/DiffViewer.svelte

@@ -7,9 +7,6 @@
     }
     let { before, after, verb, relPath }: Props = $props();
 
-    // A tiny line-by-line diff. Not LCS — just presence-based. For GSC scripts
-    // this reads fine; if we want proper Myers diff later, swap in `diff` npm
-    // package and render the same rows.
     interface Row {
         kind: 'ctx' | 'add' | 'del';
         text: string;
@@ -24,7 +21,6 @@
         const bsetBase: Row[] = blines.map((t) => ({ kind: 'add' as const, text: t }));
         if (a === null) return bsetBase;
         if (b === null) return asetBase;
-        // interleave shared-prefix / shared-suffix trimming for readability
         let i = 0;
         while (i < alines.length && i < blines.length && alines[i] === blines[i]) i++;
         let j = 0;
@@ -55,41 +51,62 @@
 
 <style>
     .diff {
-        background: #0f0f0f;
-        border: 1px solid #333;
-        border-radius: 4px;
+        background: var(--cherry-975);
+        border: 1px solid var(--cherry-700);
+        border-radius: var(--r-sm);
         margin: 8px 0;
         overflow: hidden;
     }
     header {
         display: flex;
-        gap: 8px;
-        padding: 6px 10px;
-        background: #1a1a1a;
-        border-bottom: 1px solid #333;
+        gap: 10px;
+        padding: 8px 12px;
+        background: var(--cherry-925);
+        border-bottom: 1px solid var(--cherry-700);
         font-size: 12px;
+        align-items: center;
     }
     .verb {
-        padding: 1px 6px;
-        border-radius: 3px;
-        font-family: ui-monospace, monospace;
+        padding: 2px 8px;
+        border-radius: var(--r-sm);
+        font-family: var(--font-mono);
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        border: 1px solid transparent;
     }
-    .verb-added { background: #2d4a2d; color: #a8e6a8; }
-    .verb-updated { background: #2d3a4a; color: #a8c8e6; }
-    .verb-removed { background: #4a2d2d; color: #ff8080; }
-    .verb-held { background: #3a2f00; color: #ffcc55; }
-    .path { color: #ccc; font-family: ui-monospace, monospace; }
+    .verb-added {
+        background: rgba(34, 224, 255, 0.1);
+        border-color: rgba(34, 224, 255, 0.3);
+        color: var(--spark-500);
+    }
+    .verb-updated {
+        background: rgba(242, 230, 200, 0.08);
+        border-color: rgba(242, 230, 200, 0.25);
+        color: var(--cream);
+    }
+    .verb-removed {
+        background: rgba(255, 48, 80, 0.1);
+        border-color: rgba(255, 48, 80, 0.3);
+        color: var(--danger-500);
+    }
+    .verb-held {
+        background: rgba(255, 176, 32, 0.1);
+        border-color: rgba(255, 176, 32, 0.3);
+        color: var(--amber-500);
+    }
+    .path { color: var(--ink-100); font-family: var(--font-mono); font-size: 12px; }
     pre {
         margin: 0;
-        padding: 8px 10px;
-        font-family: ui-monospace, monospace;
+        padding: 10px 12px;
+        font-family: var(--font-mono);
         font-size: 12px;
-        line-height: 1.5;
-        color: #ccc;
+        line-height: 1.55;
+        color: var(--ink-300);
         max-height: 500px;
         overflow: auto;
     }
     .ln { display: block; }
-    .ln-add { background: rgba(45, 74, 45, 0.4); color: #a8e6a8; }
-    .ln-del { background: rgba(74, 45, 45, 0.4); color: #ff8080; }
+    .ln-add { background: rgba(34, 224, 255, 0.08); color: var(--spark-400); }
+    .ln-del { background: rgba(255, 48, 80, 0.08); color: #ff8a9a; }
 </style>