Add Nocturne debug web UI, core process control, and web QR login

poc/public/api.js

@@ -0,0 +1,61 @@
+"use strict";
+
+window.VK = window.VK ?? {};
+
+const bus = new Map();
+
+window.VK.bus = {
+    on(type, handler) {
+        const handlers = bus.get(type) ?? new Set();
+        handlers.add(handler);
+        bus.set(type, handlers);
+        return () => handlers.delete(handler);
+    },
+    emit(type, payload) {
+        for (const handler of bus.get(type) ?? []) {
+            try {
+                handler(payload);
+            } catch (error) {
+                console.error(`[bus] ${type} handler failed`, error);
+            }
+        }
+    }
+};
+
+async function request(path, options) {
+    const response = await fetch(path, options);
+    let body;
+    try {
+        body = await response.json();
+    } catch {
+        throw new Error(`request failed (${response.status})`);
+    }
+    if (!body.ok) throw new Error(body.error ?? `request failed (${response.status})`);
+    return body.result;
+}
+
+window.VK.api = {
+    get: path => request(path),
+    post: (path, data) =>
+        request(path, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data ?? {})
+        })
+};
+
+window.VK.connectEvents = function connectEvents() {
+    const source = new EventSource("/api/events");
+
+    source.onmessage = message => {
+        let data;
+        try {
+            data = JSON.parse(message.data);
+        } catch {
+            return;
+        }
+        window.VK.bus.emit("event", data);
+    };
+
+    source.onerror = () => window.VK.bus.emit("sse-error");
+};

poc/public/icons.js

@@ -0,0 +1,44 @@
+"use strict";
+
+window.VK = window.VK ?? {};
+
+const ICON_PATHS = {
+    hash: '<path d="M6 2L4.5 14M11.5 2L10 14M2.5 5.5h12M2 10.5h12"/>',
+    volume: '<path d="M8.5 2.5 4.5 6H2v4h2.5l4 3.5z"/><path d="M11 5.5a3.5 3.5 0 0 1 0 5"/>',
+    mic: '<rect x="5.5" y="1.5" width="5" height="7.5" rx="2.5"/><path d="M3 7.5a5 5 0 0 0 10 0M8 12.5v2"/>',
+    micSlash:
+        '<rect x="5.5" y="1.5" width="5" height="7.5" rx="2.5"/><path d="M3 7.5a5 5 0 0 0 10 0M8 12.5v2"/><path d="M2.5 13.5 13.5 2.5"/>',
+    speaker: '<path d="M3 10V8a5 5 0 0 1 10 0v2"/><rect x="1.5" y="9.5" width="3" height="4.5" rx="1.5"/><rect x="11.5" y="9.5" width="3" height="4.5" rx="1.5"/>',
+    speakerSlash:
+        '<path d="M3 10V8a5 5 0 0 1 10 0v2"/><rect x="1.5" y="9.5" width="3" height="4.5" rx="1.5"/><rect x="11.5" y="9.5" width="3" height="4.5" rx="1.5"/><path d="M2 14 14 2"/>',
+    monitor: '<rect x="1.5" y="2.5" width="13" height="9" rx="1.5"/><path d="M5.5 14h5M8 11.5v2.5"/>',
+    camera: '<rect x="1.5" y="4.5" width="9" height="7" rx="1.5"/><path d="M10.5 8l4-2.2v4.4z"/>',
+    caretDown: '<path d="M3.5 6l4.5 4.5L12.5 6"/>',
+    caretUp: '<path d="M3.5 10L8 5.5l4.5 4.5"/>',
+    x: '<path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/>',
+    lock: '<rect x="3.5" y="7" width="9" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>',
+    search: '<circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/>',
+    gear: '<circle cx="8" cy="8" r="2.2"/><path d="M8 1.8v2M8 12.2v2M1.8 8h2M12.2 8h2M3.6 3.6l1.4 1.4M11 11l1.4 1.4M12.4 3.6 11 5M5 11l-1.4 1.4"/>',
+    wave: '<path d="M2 6.5V4.5h6v2M5 4.5V12"/><path d="M10.5 5.5a3.2 3.2 0 0 1 0 5"/><path d="M12.8 3.5a6 6 0 0 1 0 9"/>',
+    warning: '<path d="M8 2 1.5 13.5h13z"/><path d="M8 6.5v3.5M8 12v.5"/>',
+    refresh: '<path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9"/><path d="M13.5 2.5V6H10"/>',
+    play: '<path d="M5 3.5 12.5 8 5 12.5z"/>',
+    microphone: '<rect x="5.5" y="1.5" width="5" height="7.5" rx="2.5"/><path d="M3 7.5a5 5 0 0 0 10 0M8 12.5v2"/>'
+};
+
+const FILLED = new Set(["star"]);
+
+ICON_PATHS.star = '<path d="M8 1.6l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.5 4.1 13.5l.8-4.3-3.2-3 4.4-.6z"/>';
+
+window.VK.icon = function icon(name, size = 13) {
+    const path = ICON_PATHS[name] ?? "";
+    const fill = FILLED.has(name) ? "currentColor" : "none";
+    return `<svg width="${size}" height="${size}" viewBox="0 0 16 16" fill="${fill}" stroke="currentColor" stroke-width="1.3" aria-hidden="true">${path}</svg>`;
+};
+
+window.VK.iconEl = function iconEl(name, size = 13) {
+    const span = document.createElement("span");
+    span.className = "vk-icon";
+    span.innerHTML = window.VK.icon(name, size);
+    return span;
+};

poc/public/index.html

@@ -0,0 +1,262 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>veskslop debug</title>
+        <link rel="stylesheet" href="nocturne.css" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div class="vk-app">
+            <header class="vk-header">
+                <span class="vk-brand">
+                    <span class="vk-brand-name">veskslop</span>
+                    <span class="vk-brand-version">debug</span>
+                </span>
+
+                <div class="vk-guild-picker">
+                    <button id="guild-picker" class="btn btn-secondary vk-guild-button" type="button">
+                        <span id="guild-picker-label">Direct messages</span>
+                        <span class="vk-icon" data-icon="caretDown"></span>
+                    </button>
+                    <div id="guild-menu" class="vk-menu" hidden></div>
+                </div>
+
+                <div class="vk-health">
+                    <span class="vk-health-item">
+                        <span id="health-dot" class="vk-dot"></span>
+                        <span id="health-bridge" class="vk-mono">bridge …</span>
+                    </span>
+                    <span id="health-uptime" class="vk-mono vk-dim">up …</span>
+                    <span id="health-events" class="vk-mono vk-dim">0.0 ev/s</span>
+                </div>
+
+                <div class="vk-header-right">
+                    <label class="vk-takeover" title="Read-only unless takeover is on">
+                        <input type="checkbox" id="takeover" />
+                        <span class="vk-switch"><span class="vk-knob"></span></span>
+                        <span class="vk-takeover-label" id="takeover-label">Takeover</span>
+                    </label>
+                    <button id="settings-open" class="btn btn-secondary vk-settings" type="button">
+                        <span class="vk-icon" data-icon="gear"></span>
+                        Settings
+                    </button>
+                </div>
+            </header>
+
+            <div id="call-strip" class="vk-call-strip" hidden></div>
+
+            <div class="vk-body">
+                <aside class="vk-rail">
+                    <div id="guild-switcher" class="vk-guild-switcher"></div>
+
+                    <div class="vk-rail-section">
+                        <div class="vk-rail-label">Text</div>
+                        <div id="text-channels" class="vk-rail-list"></div>
+                    </div>
+
+                    <div class="vk-rail-section">
+                        <div class="vk-rail-label">Voice</div>
+                        <div id="voice-channels" class="vk-rail-list"></div>
+                    </div>
+
+                    <div class="vk-rail-section">
+                        <div class="vk-rail-label">Direct</div>
+                        <div id="direct-list" class="vk-rail-list"></div>
+                    </div>
+
+                    <div id="agent-identity" class="vk-rail-footer"></div>
+                </aside>
+
+                <main class="vk-center">
+                    <div class="vk-channel-header">
+                        <span id="channel-icon" class="vk-icon vk-dim"></span>
+                        <span id="channel-title" class="vk-channel-title">No channel selected</span>
+                        <span id="channel-context" class="vk-mono vk-dim"></span>
+                        <div class="vk-channel-actions">
+                            <button
+                                id="channel-refresh"
+                                class="btn btn-secondary vk-icon-btn"
+                                type="button"
+                                title="Reload the latest 50 messages"
+                            >
+                                <span class="vk-icon" data-icon="refresh"></span>
+                            </button>
+                            <button id="raw-events" class="btn btn-secondary vk-small-btn" type="button">Raw events</button>
+                        </div>
+                    </div>
+
+                    <div id="message-scroll" class="vk-message-scroll">
+                        <div id="message-list" class="vk-message-list"></div>
+                    </div>
+
+                    <div class="vk-composer-wrap">
+                        <div id="tts-panel" class="vk-tts" hidden>
+                            <div class="vk-tts-title">
+                                <span class="vk-icon" data-icon="wave"></span>
+                                <span class="vk-tts-heading">Text to speech</span>
+                                <span id="tts-target" class="vk-mono vk-tts-sub">not implemented</span>
+                                <button id="tts-close" class="btn btn-ghost vk-icon-btn" type="button" aria-label="Close">
+                                    <span class="vk-icon" data-icon="x"></span>
+                                </button>
+                            </div>
+                            <div class="vk-tts-settings">
+                                <span class="vk-micro-label">Voice settings</span>
+                                <span class="vk-chip vk-chip-on">sv-SE · Mattias</span>
+                                <span class="vk-chip">rate 1.0×</span>
+                                <span class="vk-chip vk-chip-on">yield to call</span>
+                                <span class="vk-chip">duck 30%</span>
+                                <span class="vk-chip vk-chip-on">queue lines</span>
+                            </div>
+                            <div class="vk-tts-body">
+                                <textarea id="tts-input" class="vk-tts-field" rows="3" placeholder="Speak text into the call…"></textarea>
+                                <div class="vk-tts-meta">
+                                    <span class="vk-mono vk-dim">voice audio is not implemented yet</span>
+                                    <button id="tts-speak" class="btn btn-primary vk-small-btn" type="button">Speak</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div id="composer" class="vk-composer">
+                            <span id="composer-state-icon" class="vk-icon vk-dim"></span>
+                            <span id="composer-copy" class="vk-composer-copy"></span>
+                            <button id="tts-toggle" class="btn btn-secondary vk-icon-btn vk-tts-toggle" type="button" title="Text to speech">
+                                <span class="vk-icon" data-icon="wave"></span>
+                            </button>
+                            <button id="send" class="btn btn-primary vk-send" type="button" disabled>Send</button>
+                        </div>
+                    </div>
+                </main>
+
+                <aside class="vk-right">
+                    <div class="vk-right-scroll">
+                        <section class="vk-right-section">
+                            <div class="vk-section-head">
+                                <span class="vk-rail-label vk-rail-label-flat">In voice</span>
+                                <span id="voice-count" class="vk-mono vk-dim"></span>
+                            </div>
+                            <div id="right-voice" class="vk-right-list"></div>
+                        </section>
+
+                        <section class="vk-right-section">
+                            <div class="vk-section-head">
+                                <span class="vk-rail-label vk-rail-label-flat">Favourites</span>
+                            </div>
+                            <div id="right-favourites" class="vk-right-list"></div>
+                        </section>
+
+                        <section class="vk-right-section">
+                            <div class="vk-section-head">
+                                <span class="vk-rail-label vk-rail-label-flat">Open DMs &amp; groups</span>
+                                <span id="dm-count" class="vk-mono vk-dim"></span>
+                            </div>
+                            <div id="right-dms" class="vk-right-list"></div>
+                        </section>
+                    </div>
+                    <div class="vk-right-footer vk-mono vk-dim">full roster sits behind the guild header</div>
+                </aside>
+            </div>
+
+            <section class="vk-console">
+                <div class="vk-console-bar">
+                    <button id="console-toggle" class="vk-console-button" type="button">
+                        <span id="console-caret" class="vk-icon" data-icon="caretUp"></span>
+                        Agent console
+                    </button>
+                    <div class="vk-console-tabs">
+                        <button class="vk-console-tab" data-console-tab="tools" type="button">Tool calls</button>
+                        <button class="vk-console-tab" data-console-tab="events" type="button">Events</button>
+                        <button class="vk-console-tab" data-console-tab="transcript" type="button">Transcript</button>
+                    </div>
+                    <div class="vk-ticker"><span id="ticker-line">waiting for events</span></div>
+                    <div class="vk-console-status vk-mono">
+                        <span id="console-count">0 events</span>
+                        <span class="vk-health-item"><span id="mcp-dot" class="vk-dot"></span><span id="mcp-state">bridge …</span></span>
+                    </div>
+                </div>
+                <div id="console-drawer" class="vk-console-drawer" hidden>
+                    <div id="console-panel-tools" class="vk-console-panel">
+                        <div class="vk-roadmap">
+                            <span class="tag tag-outline">roadmap</span>
+                            <p>MCP tool-call tracing is not implemented yet. Agent tool calls will appear here once the LLM attachment lands.</p>
+                        </div>
+                    </div>
+                    <div id="console-panel-events" class="vk-console-panel">
+                        <div id="event-log" class="vk-event-log"></div>
+                    </div>
+                    <div id="console-panel-transcript" class="vk-console-panel">
+                        <div class="vk-roadmap">
+                            <span class="tag tag-outline">roadmap</span>
+                            <p>Voice transcription (STT/TTS) is not implemented yet. Transcript segments will appear here once voice audio lands.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <div id="settings-overlay" class="vk-overlay" hidden>
+            <div class="vk-settings-panel elev-lg" role="dialog" aria-label="Settings">
+                <div class="vk-settings-head">
+                    <span class="vk-settings-title">Settings</span>
+                    <button id="settings-close" class="btn btn-ghost vk-icon-btn" type="button" aria-label="Close">
+                        <span class="vk-icon" data-icon="x"></span>
+                    </button>
+                </div>
+
+                <div class="vk-settings-body">
+                    <section class="vk-settings-section">
+                        <div class="vk-section-head">
+                            <span class="vk-rail-label vk-rail-label-flat">Core process</span>
+                            <span class="vk-settings-actions">
+                                <button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
+                                <button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
+                                <button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
+                            </span>
+                        </div>
+                        <div id="core-status" class="vk-settings-card"></div>
+                    </section>
+
+                    <section class="vk-settings-section">
+                        <div class="vk-section-head">
+                            <span class="vk-rail-label vk-rail-label-flat">Account login</span>
+                            <span class="vk-settings-actions">
+                                <button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
+                                <button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
+                                <button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
+                            </span>
+                        </div>
+                        <div id="auth-status" class="vk-settings-card"></div>
+                        <div id="auth-qr" class="vk-qr" hidden></div>
+                        <form id="auth-captcha" class="vk-settings-row" hidden>
+                            <input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
+                            <button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
+                        </form>
+                    </section>
+
+                    <section class="vk-settings-section">
+                        <div class="vk-section-head">
+                            <span class="vk-rail-label vk-rail-label-flat">Visible guilds</span>
+                            <button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
+                        </div>
+                        <div id="guild-visibility" class="vk-settings-card"></div>
+                    </section>
+
+                    <section class="vk-settings-section">
+                        <div class="vk-section-head">
+                            <span class="vk-rail-label vk-rail-label-flat">Action log</span>
+                            <button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
+                        </div>
+                        <div id="action-log" class="vk-log"></div>
+                    </section>
+                </div>
+            </div>
+        </div>
+
+        <div id="toasts" class="vk-toasts"></div>
+
+        <script src="icons.js"></script>
+        <script src="api.js"></script>
+        <script src="app.js"></script>
+    </body>
+</html>

poc/public/nocturne.css

@@ -0,0 +1,294 @@
+/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --color-bg: #161826;
+  --color-surface: #232532;
+  --color-text: #e9e9ed;
+  --color-accent: #9184d9; /* review round 7 (Barron): the accent moves to
+     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
+     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
+     accent held (L 0.660, so the documented ratios survive) and chroma
+     in the product blurple's own range (its token sits at C 0.118; the
+     accent takes 0.125, from the old steel's 0.030):
+     the accent now reads as an accent rather than another neutral. */
+  --color-accent-2: #a7a1db; /* the machine-derived stand-in follows: same
+     hue, same L 0.734, chroma at the same 2:3 proportion it held */
+  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
+
+  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
+     same step of any role matches the others in visual value. */
+  --color-neutral-100: #f3f5fe;
+  --color-neutral-200: #e4e7f5;
+  --color-neutral-300: #cfd3e5;
+  --color-neutral-400: #b2b6ca;
+  --color-neutral-500: #9397ab;
+  --color-neutral-600: #75798c;
+  --color-neutral-700: #595d6c;
+  --color-neutral-800: #3f424d;
+  --color-neutral-900: #292b31;
+
+  --color-accent-100: #f5f4ff;
+  --color-accent-200: #e7e5fe;
+  --color-accent-300: #d2cefd;
+  --color-accent-400: #b5abfc;
+  --color-accent-500: #968ae0;
+  --color-accent-600: #796cbf;
+  --color-accent-700: #5d5294;
+  --color-accent-800: #423a6a;
+  --color-accent-900: #2b2741;
+
+  --color-accent-2-100: #f5f4ff;
+  --color-accent-2-200: #e7e5fe;
+  --color-accent-2-300: #d2cefd;
+  --color-accent-2-400: #b5afe8;
+  --color-accent-2-500: #9690c9;
+  --color-accent-2-600: #7972a9;
+  --color-accent-2-700: #5c5783;
+  --color-accent-2-800: #423e5d;
+  --color-accent-2-900: #2b293a;
+
+  /* Deck section-divider ground — review round 3: saturation as presence.
+     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
+     family; C 0.094 — written when the accent held C 0.030, before the
+     round-7 blurple raised it past the ground's) with a lighter bloom and
+     a ghost tint of the same hue, while the slide grounds stay
+     desaturated. Deck-scale fills only — not interface colors. */
+  --color-section: #262a60;
+  --color-section-glow: #353b80;
+  --color-section-ghost: #4c5397;
+
+  --font-heading: "Inter", system-ui, sans-serif;
+  --font-heading-weight: 500;
+  --font-body: "Inter", system-ui, sans-serif;
+
+  --space-1: 2.8px;
+  --space-2: 5.6px;
+  --space-3: 8.4px;
+  --space-4: 11.2px;
+  --space-6: 16.8px;
+  --space-8: 22.4px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 14px;
+
+  /* Elevation — derived from the ground: soft ink-tinted shadows on a
+     light theme, a hairline edge + ambient darkness on a dark one. */
+  --shadow-sm: 0 0 0 1px #3f424d;
+  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
+  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-body);
+}
+h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
+
+.lighten{mix-blend-mode:lighten;background-color:transparent}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Components — built with the tokens above. Plain CSS
+   on plain HTML: no JavaScript, no build step. Each class is documented in
+   readme.md and demonstrated in foundations/ and components/.
+   ══════════════════════════════════════════════════════════════════════ */
+
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
+  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
+}
+h1 { font-size: 42px; }
+h2 { font-size: 32px; }
+h3 { font-size: 25px; }
+h4 { font-size: 20px; }
+h5 { font-size: 16px; }
+h6 { font-size: 13px; }
+h6 { letter-spacing: 0.08em; text-transform: uppercase; }
+p { margin: 0 0 var(--space-3); }
+a { color: var(--color-accent); text-underline-offset: 3px; }
+img { display: block; max-width: 100%; }
+figure { margin: 0; }
+figcaption {
+  font-size: 11px; margin-top: var(--space-1);
+  color: color-mix(in srgb, var(--color-text) 55%, transparent);
+}
+.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
+:focus { outline: none; }
+:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
+
+/* — rules — */
+/* Rules fade to transparent at both ends instead of stopping cleanly — a
+   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
+   painted from the same divider token. Freestanding rules fade; box
+   outlines, in-control separators, and short accent marks stay solid. */
+.hr {
+  height: 1px; border: 0; margin: var(--space-4) 0;
+  background: linear-gradient(to right,
+    transparent, var(--color-divider) 48px,
+    var(--color-divider) calc(100% - 48px), transparent);
+}
+
+/* — buttons — */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  cursor: pointer; text-decoration: none;
+  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
+  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
+     the pair sits side by side in sign-up rows */
+  background: transparent; border: 1px solid transparent;
+  padding: var(--space-2) calc(var(--space-3) * 1.2);
+  border-radius: var(--radius-md);
+}
+.btn svg { display: block; }
+.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
+.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
+.btn-secondary { border-color: var(--color-divider); }
+.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
+.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
+.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
+.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
+.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
+.btn-icon { width: 36px; height: 36px; padding: 0; }
+.btn-block { width: 100%; margin-top: var(--space-2); }
+
+/* — forms — */
+.field > label {
+  display: block; font-size: 12px; margin-bottom: 5px;
+  color: color-mix(in srgb, var(--color-text) 70%, transparent);
+}
+.input {
+  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
+  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
+  background: var(--color-surface);
+  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
+}
+.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
+.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
+textarea.input { min-height: 90px; resize: vertical; }
+.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
+.radio input, .seg-opt input {
+  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
+}
+.radio .dot {
+  width: 16px; height: 16px; flex: none; border-radius: 50%;
+  border: 1.5px solid var(--color-divider);
+}
+.radio:hover .dot { border-color: var(--color-accent); }
+.radio input:checked + .dot {
+  border-color: var(--color-accent); background: var(--color-accent);
+  box-shadow: inset 0 0 0 4px var(--color-bg);
+}
+.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+.seg {
+  display: inline-flex; overflow: hidden;
+  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
+}
+.seg-opt {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 7px 12px; font-size: 13px; cursor: pointer;
+}
+.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
+.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
+.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
+.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
+
+/* — cards — */
+.card {
+  display: flex; flex-direction: column; gap: var(--space-2);
+  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
+}
+.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
+.card-title {
+  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
+  font-size: 17px; line-height: 1.2;
+}
+.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
+.card-meta {
+  display: flex; align-items: center; gap: 6px; font-size: 11px;
+  color: color-mix(in srgb, var(--color-text) 50%, transparent);
+}
+.elev-sm { box-shadow: var(--shadow-sm); }
+.elev-md { box-shadow: var(--shadow-md); }
+.elev-lg { box-shadow: var(--shadow-lg); }
+
+/* — tags — */
+.tag {
+  display: inline-flex; align-items: center; font-size: 11px;
+  letter-spacing: 0.02em; padding: 3px 10px;
+  border-radius: calc(var(--radius-md) * 0.75);
+}
+.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
+.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
+.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
+.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
+
+/* — navigation — */
+.nav {
+  display: flex; align-items: center; gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: none;
+}
+.nav-brand {
+  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
+  font-size: 18px; margin-right: auto;
+}
+.nav a { color: inherit; text-decoration: none; font-size: 14px; }
+.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
+
+/* — tables — */
+.table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.table th {
+  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--color-text) 60%, transparent);
+  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
+}
+.table td {
+  padding: var(--space-2);
+  border-bottom: 1px solid transparent;
+}
+/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
+.table thead tr {
+  background: linear-gradient(to right,
+    transparent, var(--color-divider) 48px,
+    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
+}
+.table tbody tr {
+  background: linear-gradient(to right,
+    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
+    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
+}
+.table tbody tr:hover {
+  /* the hover tint layers over the row rule, which keeps painting */
+  background:
+    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
+                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
+    linear-gradient(to right,
+      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
+      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
+}
+
+/* — dialog — */
+.dialog-backdrop {
+  position: fixed; inset: 0; display: grid; place-items: center;
+  padding: var(--space-4);
+  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
+}
+.dialog {
+  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
+  padding: var(--space-4); border-radius: var(--radius-lg);
+  background: var(--color-surface); box-shadow: var(--shadow-lg);
+}
+.dialog-title {
+  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
+  font-size: 20px;
+}
+.dialog-body { font-size: 14px; opacity: 0.85; }
+.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
+