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/routes/+layout.svelte

@@ -3,6 +3,7 @@
     import { startPipelineStream } from '$ui/stores/pipeline.js';
     import { startServerStream } from '$ui/stores/servers.js';
     import { page } from '$app/stores';
+    import BrandMark from '$ui/components/BrandMark.svelte';
 
     interface Props { children: import('svelte').Snippet }
     let { children }: Props = $props();
@@ -15,10 +16,15 @@
 
 <div class="shell">
     <nav>
-        <a href="/" class:on={$page.url.pathname === '/'}>Fleet</a>
-        <a href="/deployments" class:on={$page.url.pathname.startsWith('/deployments')}>Deployments</a>
-        <a href="/betas" class:on={$page.url.pathname.startsWith('/betas')}>Betas</a>
-        <span class="brand">electric-cherry</span>
+        <a class="brand-link" href="/" aria-label="Electric Cherry home">
+            <BrandMark size="md" />
+        </a>
+        <div class="tabs">
+            <a href="/" class:on={$page.url.pathname === '/'}>Fleet</a>
+            <a href="/deployments" class:on={$page.url.pathname.startsWith('/deployments')}>Deployments</a>
+            <a href="/betas" class:on={$page.url.pathname.startsWith('/betas')}>Betas</a>
+        </div>
+        <div class="strut" aria-hidden="true"></div>
     </nav>
     <main>
         {@render children()}
@@ -26,38 +32,78 @@
 </div>
 
 <style>
+    @import '$ui/styles/tokens.css';
+
     :global(html, body) {
         margin: 0;
-        background: #0a0a0a;
-        color: #ddd;
-        font-family: system-ui, -apple-system, sans-serif;
+        background: var(--cherry-975);
+        color: var(--ink-100);
+        font-family: var(--font-body);
         min-height: 100vh;
+        -webkit-font-smoothing: antialiased;
     }
     :global(*) { box-sizing: border-box; }
+    :global(a) { color: var(--spark-400); }
+    :global(::selection) {
+        background: var(--cherry-500);
+        color: var(--cream);
+    }
+
     .shell { min-height: 100vh; }
+
     nav {
         display: flex;
-        gap: 4px;
-        padding: 10px 20px;
-        border-bottom: 1px solid #222;
-        background: #0f0f0f;
+        gap: 24px;
+        padding: 14px 24px;
         align-items: center;
+        background:
+            linear-gradient(180deg, rgba(200, 16, 46, 0.18) 0%, transparent 100%),
+            var(--cherry-925);
+        border-bottom: 1px solid var(--cherry-700);
+        box-shadow: 0 1px 0 0 rgba(200, 16, 46, 0.25);
     }
-    nav a {
-        color: #999;
+    .brand-link {
+        display: flex;
+        align-items: center;
         text-decoration: none;
-        padding: 6px 10px;
-        border-radius: 4px;
+    }
+
+    .tabs {
+        display: flex;
+        gap: 4px;
+        margin-left: 12px;
+    }
+    .tabs a {
+        color: var(--ink-300);
+        text-decoration: none;
+        padding: 8px 14px;
+        border-radius: var(--r-sm);
         font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.4px;
+        position: relative;
+        transition: color 0.15s;
     }
-    nav a:hover { color: #ddd; background: #1a1a1a; }
-    nav a.on { color: #ff6060; background: #1a1a1a; }
-    .brand {
-        margin-left: auto;
-        font-family: ui-monospace, monospace;
-        color: #444;
-        font-size: 12px;
-        letter-spacing: 1px;
+    .tabs a:hover { color: var(--ink-100); }
+    .tabs a.on {
+        color: var(--cream);
+    }
+    .tabs a.on::after {
+        content: '';
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        bottom: -2px;
+        height: 2px;
+        background: var(--spark-500);
+        box-shadow: var(--spark-glow);
+        border-radius: 2px;
+    }
+    .strut { margin-left: auto; }
+
+    main {
+        padding: 28px 24px 48px;
+        max-width: 1400px;
+        margin: 0 auto;
     }
-    main { padding: 20px; max-width: 1400px; margin: 0 auto; }
 </style>