Extract CSS/JS to static files, wrap header pills, add version footer

The palette lived in a :root block duplicated across all three
templates, so every reshade meant three edits — and drifted twice in
practice (the favicon hardcoded its own hex; stale danger-border rgba
literals survived two palette changes). Move tokens to a single
static/css/base.css, derive every dim/border tint from the four source
hues with color-mix, and point the favicon at one static/favicon.svg.

Also splits the 1558-line dashboard.html into template + static assets:
662 lines of CSS and 396 of JS were re-sent uninlined on every load
with no browser caching, which costs real time on the remote/cellular
access this app is built for. Templates drop to 501/42/107 lines.
Server-rendered config (timezone, script_root) now arrives via
<body data-*>; wiring URL_BASE to request.script_root also fixes /api/*
fetches for a future subpath mount, which the hardcoded "" would break.

Header service pills now wrap instead of scrolling — they were clipped
at narrow widths, and a hidden pill is a service whose status you
cannot see. Verified 0 clipped and no page overflow at 320/375/700/1280.

Footer gains a version and date so the running build is identifiable
without trusting the Unraid Docker tab's cached container IDs.

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

static/css/base.css

@@ -0,0 +1,74 @@
+/* ═══════════════════════════════════════════════════════
+   Media Centre — shared design tokens + base reset.
+
+   Single source of truth for the palette. Loaded by
+   dashboard.html, login.html and settings.html; page-specific
+   rules live in dashboard.css / login.css / settings.css.
+
+   To reshade the whole app, change the four hues below —
+   every dim/border variant is derived from them via color-mix.
+   ═══════════════════════════════════════════════════════ */
+:root {
+  /* ── Surfaces ── */
+  --bg:         #141416;
+  --surface:    #1a1a1d;
+  --surface-2:  #202024;
+  --border:     #2c2c31;
+  --border-lt:  #38383f;
+
+  /* ── Text (all ≥ 4.5:1 on every surface above) ── */
+  --text:       #edecf1;
+  --text-2:     #a8a7b0;
+  --text-3:     #7c7b84;
+
+  /* ── Accent + semantics (the four source hues) ── */
+  --accent:     #7c86ff;
+  --ok:         #68b98a;
+  --warn:       #d0a75a;
+  --danger:     #dc5b52;
+
+  /* ── Derived tints — never hardcode these as literals ── */
+  --accent-dim:    color-mix(in srgb, var(--accent) 14%, transparent);
+  --ok-dim:        color-mix(in srgb, var(--ok)     14%, transparent);
+  --warn-dim:      color-mix(in srgb, var(--warn)   14%, transparent);
+  --danger-dim:    color-mix(in srgb, var(--danger) 14%, transparent);
+  --danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
+
+  /* ── Type scale (6 steps, no one-offs) ── */
+  --fs-xs:      0.75rem;    /* 12px — smallest permitted */
+  --fs-sm:      0.8125rem;  /* 13px */
+  --fs-base:    0.9375rem;  /* 15px */
+  --fs-lg:      1.125rem;   /* 18px */
+  --fs-xl:      1.5rem;     /* 24px */
+  --fs-2xl:     2rem;       /* 32px */
+
+  /* ── Spacing / shape ── */
+  --gap:        1rem;
+  --gap-lg:     1.5rem;
+  --radius:     10px;
+  --radius-sm:  7px;
+  --tap:        44px;       /* minimum touch target */
+
+  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--fs-base);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--accent); }
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}