Rework as scripts-centric, upload-only, gated beta lifecycle

Scripts become first-class: named, versioned, uploaded via the UI, optionally
scoped to a game or map. Any change that would land on scope-matched servers
(marking-required or new version of a scoped script) must first pass a beta.
The beta runs a per-server state machine — deploy -beta.gsc → wait empty →
Komodo restart → wait healthy → optionally wait for a real match end
(games_sp.log 'ExitLevel: executed') — before it's eligible for promotion.
Rollback is always available and restores from .OLD.

The shared/scripts mirror and its betas/ staging folder are gone. Every
server now has a tracked script inventory (server_scripts table), populated
only by explicit upload flows.

New: /scripts, /scripts/[id], /betas/[id] UI; /api/scripts + /api/betas +
/api/servers/[name]/scripts endpoints; scripts.ts, inventory.ts, beta.ts
(rewritten), beta-runner.ts, match-log.ts, komodoInspectHealthy().
Removed: push.ts, /api/push, BetaPanel, legacy importer.

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

src/routes/scripts/+page.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    interface ScriptRow {
+        id: number;
+        name: string;
+        target_rel_path: string;
+        scope_type: 'game' | 'map' | null;
+        scope_value: string | null;
+        current_version_id: number | null;
+        latestVersion: {
+            id: number;
+            version: number;
+            sha256: string;
+            size: number;
+            uploaded_at: string;
+        } | null;
+        versionCount: number;
+        servers: string[];
+        runningBetaId: number | null;
+    }
+
+    let scripts = $state<ScriptRow[]>([]);
+    let loading = $state(true);
+    let flash = $state<string | null>(null);
+    let uploading = $state(false);
+
+    // Form state for creating a new script.
+    let newName = $state('');
+    let newTargetRelPath = $state('');
+    let newScopeType = $state<'none' | 'game' | 'map'>('none');
+    let newScopeValue = $state('');
+    let newFile = $state<File | null>(null);
+    let newNotes = $state('');
+
+    async function load(): Promise<void> {
+        const res = await fetch('/api/scripts');
+        const body = (await res.json()) as { scripts: ScriptRow[] };
+        scripts = body.scripts;
+        loading = false;
+    }
+
+    onMount(load);
+
+    function pickFile(e: Event): void {
+        const t = e.target as HTMLInputElement;
+        newFile = t.files?.[0] ?? null;
+        if (!newTargetRelPath && newFile) newTargetRelPath = newFile.name;
+        if (!newName && newFile) newName = newFile.name.replace(/\.[^.]+$/, '');
+    }
+
+    async function createScript(e: Event): Promise<void> {
+        e.preventDefault();
+        if (uploading || !newFile || !newName.trim() || !newTargetRelPath.trim()) return;
+        uploading = true;
+        flash = null;
+        const form = new FormData();
+        form.append('name', newName.trim());
+        form.append('targetRelPath', newTargetRelPath.trim());
+        form.append('scopeType', newScopeType);
+        if (newScopeValue.trim()) form.append('scopeValue', newScopeValue.trim());
+        if (newNotes.trim()) form.append('notes', newNotes.trim());
+        form.append('content', newFile);
+        try {
+            const res = await fetch('/api/scripts', { method: 'POST', body: form });
+            const body = (await res.json()) as { ok: boolean; error?: string };
+            if (!res.ok || !body.ok) {
+                flash = body.error ?? `HTTP ${res.status}`;
+                return;
+            }
+            newName = '';
+            newTargetRelPath = '';
+            newScopeType = 'none';
+            newScopeValue = '';
+            newNotes = '';
+            newFile = null;
+            await load();
+        } finally {
+            uploading = false;
+        }
+    }
+
+    function scopeLabel(s: ScriptRow): string {
+        if (!s.scope_type) return 'unscoped';
+        return `${s.scope_type}=${s.scope_value ?? '?'}`;
+    }
+</script>
+
+<h1>Scripts</h1>
+
+<section class="panel">
+    <h2>Upload a script</h2>
+    <form onsubmit={createScript} class="upload-form">
+        <label>
+            <span class="k">name</span>
+            <input type="text" bind:value={newName} placeholder="hud tweaks" disabled={uploading} />
+        </label>
+        <label>
+            <span class="k">target rel path</span>
+            <input type="text" bind:value={newTargetRelPath} placeholder="maps/mp_zom_theater/hud.gsc" disabled={uploading} />
+        </label>
+        <label>
+            <span class="k">scope</span>
+            <div class="scope-row">
+                <select bind:value={newScopeType} disabled={uploading}>
+                    <option value="none">unscoped</option>
+                    <option value="game">game</option>
+                    <option value="map">map</option>
+                </select>
+                {#if newScopeType !== 'none'}
+                    <input type="text" bind:value={newScopeValue} placeholder={newScopeType === 'game' ? 't5' : 'zombie_theater'} disabled={uploading} />
+                {/if}
+            </div>
+        </label>
+        <label>
+            <span class="k">notes (optional)</span>
+            <input type="text" bind:value={newNotes} placeholder="what changed" disabled={uploading} />
+        </label>
+        <label>
+            <span class="k">file</span>
+            <input type="file" onchange={pickFile} disabled={uploading} />
+        </label>
+        <button type="submit" class="primary" disabled={uploading || !newFile || !newName || !newTargetRelPath}>
+            {uploading ? 'uploading…' : 'upload script'}
+        </button>
+    </form>
+    {#if flash}<p class="flash">{flash}</p>{/if}
+</section>
+
+<section class="panel">
+    <h2>All scripts</h2>
+    {#if loading}
+        <p class="empty">loading…</p>
+    {:else if scripts.length === 0}
+        <p class="empty">no scripts yet — upload one above</p>
+    {:else}
+        <div class="scripts">
+            {#each scripts as s (s.id)}
+                <a class="script-row" href="/scripts/{s.id}">
+                    <div class="row-top">
+                        <span class="script-name">{s.name}</span>
+                        <span class="scope tag scope-{s.scope_type ?? 'none'}">{scopeLabel(s)}</span>
+                        {#if s.runningBetaId}
+                            <span class="tag beta">beta {s.runningBetaId} running</span>
+                        {/if}
+                    </div>
+                    <div class="row-meta mono">
+                        <span>{s.target_rel_path}</span>
+                        <span>v{s.latestVersion?.version ?? '—'} · {s.versionCount} version{s.versionCount === 1 ? '' : 's'}</span>
+                        <span>{s.servers.length ? `${s.servers.length} matching server${s.servers.length === 1 ? '' : 's'}` : ''}</span>
+                    </div>
+                </a>
+            {/each}
+        </div>
+    {/if}
+</section>
+
+<style>
+    h1 {
+        color: var(--cream);
+        font-family: var(--font-display);
+        font-size: var(--text-3xl);
+        letter-spacing: var(--tracking-display);
+        line-height: var(--leading-tight);
+        margin: 0 0 28px;
+    }
+    .panel {
+        background: var(--bg-nav);
+        border: 1px solid var(--border);
+        border-radius: var(--r-md);
+        padding: var(--pad-panel);
+        margin-bottom: 20px;
+    }
+    h2 {
+        margin: 0 0 14px;
+        font-family: var(--font-body);
+        font-size: var(--text-xs);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        color: var(--ink-300);
+    }
+    .empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
+
+    .upload-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
+    .upload-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
+    .upload-form label .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
+    .upload-form input[type=text], .upload-form select, .upload-form input[type=file] {
+        background: var(--bg-page);
+        color: var(--ink-100);
+        border: 1px solid var(--border);
+        border-radius: var(--r-sm);
+        padding: 10px 12px;
+        font-family: var(--font-mono);
+        font-size: var(--text-mono);
+    }
+    .upload-form input[type=text]:focus, .upload-form select:focus {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: var(--accent-glow);
+    }
+    .scope-row { display: flex; gap: 8px; }
+    .scope-row select { flex: 0 0 120px; }
+    .scope-row input { flex: 1; }
+    .primary {
+        grid-column: 1 / -1;
+        background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
+        border: 1px solid var(--blue-400);
+        border-radius: var(--r-sm);
+        padding: 12px 18px;
+        color: var(--cream);
+        font-family: var(--font-body);
+        font-weight: 600;
+        cursor: pointer;
+    }
+    .primary:disabled { opacity: 0.4; cursor: default; }
+    .flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
+
+    .scripts { display: flex; flex-direction: column; gap: 8px; }
+    .script-row {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: var(--r-sm);
+        padding: 14px 16px;
+        text-decoration: none;
+        color: var(--ink-100);
+    }
+    .script-row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
+    .row-top { display: flex; gap: 12px; align-items: center; }
+    .script-name { color: var(--cream); font-weight: 600; font-size: var(--text-md); }
+    .row-meta { display: flex; gap: 24px; color: var(--ink-500); font-size: var(--text-mono-sm); }
+    .mono { font-family: var(--font-mono); }
+    .tag {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        padding: 3px 9px;
+        border-radius: var(--r-sm);
+        border: 1px solid transparent;
+    }
+    .scope-none { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
+    .scope-game { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
+    .scope-map { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.35); color: var(--amber-500); }
+    .beta { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
+</style>

src/routes/scripts/[id]/+page.svelte

@@ -0,0 +1,392 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+
+    interface Script {
+        id: number;
+        name: string;
+        target_rel_path: string;
+        scope_type: 'game' | 'map' | null;
+        scope_value: string | null;
+        current_version_id: number | null;
+        created_at: string;
+    }
+    interface Version {
+        id: number;
+        version: number;
+        sha256: string;
+        size: number;
+        notes: string | null;
+        uploaded_at: string;
+    }
+    interface ServerRow { name: string; game: string | null; map: string | null }
+
+    let script = $state<Script | null>(null);
+    let versions = $state<Version[]>([]);
+    let matchedServers = $state<string[]>([]);
+    let runningBetaId = $state<number | null>(null);
+    let servers = $state<ServerRow[]>([]);
+    let loading = $state(true);
+    let flash = $state<string | null>(null);
+
+    // Upload-new-version form.
+    let versionFile = $state<File | null>(null);
+    let versionNotes = $state('');
+    let uploadingVersion = $state(false);
+
+    // Scope form.
+    let scopeType = $state<'none' | 'game' | 'map'>('none');
+    let scopeValue = $state('');
+    let updatingScope = $state(false);
+
+    // Open-beta form.
+    let betaVersionId = $state<number | null>(null);
+    let betaServers = $state<Set<string>>(new Set());
+    let waitForHealth = $state(true);
+    let waitForMatch = $state(false);
+    let openingBeta = $state(false);
+
+    let id = $derived(Number.parseInt($page.params.id ?? '0', 10));
+
+    async function load(): Promise<void> {
+        const [detailRes, serversRes] = await Promise.all([
+            fetch(`/api/scripts/${id}`),
+            fetch('/api/servers')
+        ]);
+        if (!detailRes.ok) { loading = false; return; }
+        const body = (await detailRes.json()) as {
+            script: Script;
+            versions: Version[];
+            matchedServers: string[];
+            runningBetaId: number | null;
+        };
+        script = body.script;
+        versions = body.versions;
+        matchedServers = body.matchedServers;
+        runningBetaId = body.runningBetaId;
+        scopeType = script.scope_type ?? 'none';
+        scopeValue = script.scope_value ?? '';
+        if (versions[0]) betaVersionId = versions[0].id;
+
+        if (serversRes.ok) {
+            const s = (await serversRes.json()) as { servers: ServerRow[] };
+            servers = s.servers;
+        }
+        loading = false;
+    }
+    onMount(load);
+
+    function pickVersionFile(e: Event): void {
+        const t = e.target as HTMLInputElement;
+        versionFile = t.files?.[0] ?? null;
+    }
+
+    async function uploadVersion(e: Event): Promise<void> {
+        e.preventDefault();
+        if (!versionFile || uploadingVersion) return;
+        uploadingVersion = true;
+        flash = null;
+        const form = new FormData();
+        form.append('content', versionFile);
+        if (versionNotes.trim()) form.append('notes', versionNotes.trim());
+        try {
+            const res = await fetch(`/api/scripts/${id}/versions`, { method: 'POST', body: form });
+            const body = (await res.json()) as { ok: boolean; error?: string; betaRequired?: boolean };
+            if (!res.ok || !body.ok) {
+                flash = body.error ?? `HTTP ${res.status}`;
+                return;
+            }
+            versionFile = null;
+            versionNotes = '';
+            if (body.betaRequired) {
+                flash = 'new version uploaded — open a beta below to deploy it';
+            }
+            await load();
+        } finally {
+            uploadingVersion = false;
+        }
+    }
+
+    async function saveScope(): Promise<void> {
+        if (updatingScope) return;
+        updatingScope = true;
+        flash = null;
+        try {
+            const res = await fetch(`/api/scripts/${id}/scope`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    scopeType: scopeType === 'none' ? null : scopeType,
+                    scopeValue: scopeType === 'none' ? null : scopeValue.trim()
+                })
+            });
+            const body = (await res.json()) as { ok: boolean; error?: string; kind?: string };
+            if (!res.ok || !body.ok) {
+                flash = body.error ?? `HTTP ${res.status}`;
+                return;
+            }
+            await load();
+        } finally {
+            updatingScope = false;
+        }
+    }
+
+    function toggleBetaServer(name: string): void {
+        const next = new Set(betaServers);
+        if (next.has(name)) next.delete(name);
+        else next.add(name);
+        betaServers = next;
+    }
+
+    function candidateServers(): string[] {
+        if (!script) return [];
+        if (!script.scope_type) return servers.map((s) => s.name);
+        return matchedServers;
+    }
+
+    async function openBeta(e: Event): Promise<void> {
+        e.preventDefault();
+        if (!script || betaVersionId === null || betaServers.size === 0 || openingBeta) return;
+        openingBeta = true;
+        flash = null;
+        const triggerKind = !script.scope_type
+            ? 'unscoped'
+            : script.current_version_id === null
+              ? 'mark-required'
+              : 'version-update';
+        try {
+            const res = await fetch('/api/betas', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    scriptId: script.id,
+                    scriptVersionId: betaVersionId,
+                    servers: [...betaServers],
+                    waitForHealth,
+                    waitForMatch,
+                    triggerKind
+                })
+            });
+            const body = (await res.json()) as {
+                ok: boolean;
+                error?: string;
+                result?: { betaId: number };
+            };
+            if (!res.ok || !body.ok) {
+                flash = body.error ?? `HTTP ${res.status}`;
+                return;
+            }
+            if (body.result) await goto(`/betas/${body.result.betaId}`);
+        } finally {
+            openingBeta = false;
+        }
+    }
+
+    async function deleteScript(): Promise<void> {
+        if (!confirm('Delete this script?')) return;
+        const res = await fetch(`/api/scripts/${id}`, { method: 'DELETE' });
+        const body = (await res.json()) as { ok: boolean; error?: string };
+        if (!body.ok) { flash = body.error ?? 'delete failed'; return; }
+        goto('/scripts');
+    }
+</script>
+
+{#if loading}
+    <p class="empty">loading…</p>
+{:else if !script}
+    <p class="empty">script not found</p>
+{:else}
+    <a class="back" href="/scripts">← all scripts</a>
+    <h1>{script.name}</h1>
+    <div class="sub mono">{script.target_rel_path}</div>
+
+    {#if runningBetaId}
+        <section class="panel banner">
+            <p>
+                Beta <a href="/betas/{runningBetaId}"><strong>#{runningBetaId}</strong></a> is currently running for this script.
+                Rollback or promote it before opening a new one.
+            </p>
+        </section>
+    {/if}
+
+    <section class="panel">
+        <h2>Scope</h2>
+        <div class="scope-form">
+            <select bind:value={scopeType} disabled={updatingScope}>
+                <option value="none">unscoped</option>
+                <option value="game">game</option>
+                <option value="map">map</option>
+            </select>
+            {#if scopeType !== 'none'}
+                <input type="text" bind:value={scopeValue} placeholder={scopeType === 'game' ? 't5' : 'zombie_theater'} disabled={updatingScope} />
+            {/if}
+            <button onclick={saveScope} disabled={updatingScope}>save scope</button>
+        </div>
+        {#if script.scope_type && matchedServers.length > 0}
+            <p class="hint mono">applies to: {matchedServers.join(', ')}</p>
+        {:else if script.scope_type}
+            <p class="hint mono">no servers currently match this scope</p>
+        {:else}
+            <p class="hint mono">unscoped — deploy to specific servers via a beta below</p>
+        {/if}
+    </section>
+
+    <section class="panel">
+        <h2>Upload new version</h2>
+        <form onsubmit={uploadVersion} class="version-form">
+            <input type="file" onchange={pickVersionFile} disabled={uploadingVersion} />
+            <input type="text" bind:value={versionNotes} placeholder="notes (optional)" disabled={uploadingVersion} />
+            <button type="submit" class="primary" disabled={uploadingVersion || !versionFile}>
+                {uploadingVersion ? 'uploading…' : 'upload version'}
+            </button>
+        </form>
+    </section>
+
+    <section class="panel">
+        <h2>Open beta with a version</h2>
+        {#if runningBetaId}
+            <p class="empty">a beta is already running for this script</p>
+        {:else if versions.length === 0}
+            <p class="empty">no versions yet — upload one above</p>
+        {:else}
+            <form onsubmit={openBeta} class="beta-form">
+                <label>
+                    <span class="k">version</span>
+                    <select bind:value={betaVersionId}>
+                        {#each versions as v (v.id)}
+                            <option value={v.id}>v{v.version} · {v.sha256.slice(0, 8)}</option>
+                        {/each}
+                    </select>
+                </label>
+                <label>
+                    <span class="k">test servers</span>
+                    <div class="server-picker">
+                        {#each candidateServers() as name (name)}
+                            <label class="chk">
+                                <input type="checkbox" checked={betaServers.has(name)} onchange={() => toggleBetaServer(name)} />
+                                {name}
+                            </label>
+                        {/each}
+                        {#if candidateServers().length === 0}
+                            <span class="empty">no candidate servers</span>
+                        {/if}
+                    </div>
+                </label>
+                <div class="opts">
+                    <label class="chk"><input type="checkbox" bind:checked={waitForHealth} /> wait for server start healthy</label>
+                    <label class="chk"><input type="checkbox" bind:checked={waitForMatch} /> wait for server match</label>
+                </div>
+                <button type="submit" class="primary" disabled={openingBeta || betaVersionId === null || betaServers.size === 0}>
+                    {openingBeta ? 'opening…' : 'open beta'}
+                </button>
+            </form>
+        {/if}
+    </section>
+
+    <section class="panel">
+        <h2>Version history</h2>
+        {#if versions.length === 0}
+            <p class="empty">none</p>
+        {:else}
+            <div class="versions">
+                {#each versions as v (v.id)}
+                    <div class="version {script.current_version_id === v.id ? 'current' : ''}">
+                        <span class="v-num mono">v{v.version}</span>
+                        <span class="v-sha mono">{v.sha256.slice(0, 12)}</span>
+                        <span class="v-size mono">{v.size}B</span>
+                        <span class="v-notes">{v.notes ?? ''}</span>
+                        <span class="v-when mono">{v.uploaded_at}</span>
+                        {#if script.current_version_id === v.id}<span class="tag cur">current</span>{/if}
+                    </div>
+                {/each}
+            </div>
+        {/if}
+    </section>
+
+    <section class="panel">
+        <h2>Danger</h2>
+        <button class="danger" onclick={deleteScript}>delete script</button>
+    </section>
+
+    {#if flash}<p class="flash">{flash}</p>{/if}
+{/if}
+
+<style>
+    .back { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); text-decoration: none; }
+    .back:hover { color: var(--ink-100); }
+    h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 1.5px; margin: 12px 0 4px; }
+    .sub { color: var(--ink-500); font-size: var(--text-mono); margin-bottom: 24px; }
+    .empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
+
+    .panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
+    .banner { background: rgba(255, 176, 32, 0.08); border-color: rgba(255, 176, 32, 0.3); }
+    .banner p { margin: 0; color: var(--cream-dim); font-family: var(--font-body); font-size: var(--text-sm); }
+    .banner a { color: var(--amber-500); }
+    h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
+
+    .scope-form { display: flex; gap: 10px; align-items: center; }
+    .scope-form select, .scope-form input, .version-form input, .beta-form select {
+        background: var(--bg-page);
+        color: var(--ink-100);
+        border: 1px solid var(--border);
+        border-radius: var(--r-sm);
+        padding: 10px 12px;
+        font-family: var(--font-mono);
+        font-size: var(--text-mono);
+    }
+    .scope-form button, .version-form .primary, .beta-form .primary {
+        background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
+        border: 1px solid var(--blue-400);
+        color: var(--cream);
+        border-radius: var(--r-sm);
+        padding: 10px 16px;
+        font-family: var(--font-body);
+        font-weight: 600;
+        cursor: pointer;
+    }
+    .scope-form button:disabled, .primary:disabled { opacity: 0.4; cursor: default; }
+    .hint { color: var(--ink-500); font-size: var(--text-mono-sm); margin: 12px 0 0; }
+
+    .version-form { display: flex; gap: 10px; align-items: center; }
+    .version-form input[type=text] { flex: 1; }
+
+    .beta-form { display: flex; flex-direction: column; gap: 14px; }
+    .beta-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
+    .beta-form .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
+    .server-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-sm); }
+    .chk { color: var(--ink-100); font-family: var(--font-mono); font-size: var(--text-mono); display: flex; align-items: center; gap: 6px; cursor: pointer; }
+    .opts { display: flex; gap: 24px; }
+
+    .versions { display: flex; flex-direction: column; gap: 6px; }
+    .version {
+        display: grid;
+        grid-template-columns: 80px 130px 90px 1fr 200px auto;
+        gap: 14px;
+        padding: 10px 14px;
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: var(--r-sm);
+        align-items: center;
+        font-size: var(--text-mono);
+    }
+    .version.current { border-color: var(--spark-500); box-shadow: 0 0 0 1px var(--spark-500); }
+    .v-num { color: var(--cream); font-weight: 600; }
+    .v-sha, .v-size, .v-when { color: var(--ink-500); }
+    .v-notes { color: var(--ink-300); font-family: var(--font-body); font-size: var(--text-sm); }
+    .tag { padding: 2px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); }
+    .tag.cur { background: rgba(124, 212, 255, 0.15); border: 1px solid rgba(124, 212, 255, 0.4); color: var(--spark-500); }
+
+    .danger {
+        background: var(--bg-nav);
+        border: 1px solid rgba(255, 48, 80, 0.4);
+        color: var(--danger-500);
+        border-radius: var(--r-sm);
+        padding: 10px 16px;
+        font-family: var(--font-body);
+        cursor: pointer;
+    }
+
+    .flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
+    .mono { font-family: var(--font-mono); }
+</style>