feat: base UI shell with themes, auth pages, profile, and role navigation (phase 4)

- embedded Go templates + vanilla ES-module JS + hand-written CSS, no build step
- exact §10 beige light / dark design tokens, square edges (radius 2px),
  system font stack, visible focus rings
- theme toggle persisted to localStorage and the user profile
- login/register/change-password pages wired to the auth API
- profile page: avatar upload (image-sniffed, old file cleanup), bio,
  contacts, arbitrary extra key/value fields, optimistic-concurrency 409
- role-based top navigation with placeholders for later-phase areas
- GET /files/{id} with scope-based access (session) or signed token (§5.1)
- security headers incl. CSP without unsafe-inline scripts

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/static/js/api.js

@@ -0,0 +1,52 @@
+// Tiny API client: JSON + CSRF double-submit header + error envelope.
+export function csrfToken() {
+  const m = document.cookie.match(/(?:^|;\s*)bb_csrf=([^;]+)/);
+  return m ? decodeURIComponent(m[1]) : '';
+}
+
+export class ApiError extends Error {
+  constructor(status, code, message) {
+    super(message);
+    this.status = status;
+    this.code = code;
+  }
+}
+
+export async function api(method, path, body) {
+  const opts = { method, headers: {} };
+  if (method !== 'GET' && method !== 'HEAD') {
+    opts.headers['X-CSRF-Token'] = csrfToken();
+  }
+  if (body !== undefined) {
+    if (body instanceof FormData) {
+      opts.body = body;
+    } else {
+      opts.headers['Content-Type'] = 'application/json';
+      opts.body = JSON.stringify(body);
+    }
+  }
+  const resp = await fetch(path, opts);
+  if (resp.status === 204) return null;
+  let data = null;
+  try { data = await resp.json(); } catch (e) { /* non-JSON */ }
+  if (!resp.ok) {
+    const err = (data && data.error) || {};
+    throw new ApiError(resp.status, err.code || 'unknown', err.message || resp.statusText);
+  }
+  return data;
+}
+
+export function toast(message, kind) {
+  let host = document.getElementById('toasts');
+  if (!host) {
+    host = document.createElement('div');
+    host.id = 'toasts';
+    document.body.appendChild(host);
+  }
+  const t = document.createElement('div');
+  t.className = 'toast' + (kind ? ' ' + kind : '');
+  t.setAttribute('role', 'status');
+  t.textContent = message;
+  host.appendChild(t);
+  setTimeout(() => t.remove(), 6000);
+}