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>

templates/login.html

@@ -4,122 +4,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sign in — Media Centre</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%237c86ff'/><path d='M40 32 L72 50 L40 68 Z' fill='%23141416'/></svg>">
+  <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg:         #141416;
-      --surface:    #1a1a1d;
-      --surface-2:  #202024;
-      --border:     #2c2c31;
-      --text:       #edecf1;
-      --text-2:     #a8a7b0;
-      --text-3:     #7c7b84;
-      --accent:     #7c86ff;
-      --danger:     #dc5b52;
-      --danger-dim: rgba(220,91,82,0.14);
-      --fs-xs:      0.75rem;
-      --fs-sm:      0.8125rem;
-      --fs-base:    0.9375rem;
-      --fs-lg:      1.125rem;
-      --radius:     10px;
-      --radius-sm:  7px;
-      --tap:        44px;
-      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    }
-
-    *, *::before, *::after { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: var(--font);
-      font-size: var(--fs-base);
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1.5rem;
-    }
-
-    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-
-    .wrap { width: 100%; max-width: 360px; }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.6rem;
-      margin-bottom: 1.75rem;
-    }
-    .brand h1 {
-      margin: 0;
-      font-size: var(--fs-lg);
-      font-weight: 600;
-      letter-spacing: -0.01em;
-    }
-
-    .card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.5rem;
-    }
-
-    label {
-      display: block;
-      font-size: var(--fs-xs);
-      font-weight: 600;
-      color: var(--text-2);
-      margin-bottom: 0.4rem;
-    }
-    input {
-      width: 100%;
-      min-height: var(--tap);
-      padding: 0 0.85rem;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font-family: inherit;
-      font-size: 16px; /* prevents iOS zoom on focus */
-      outline: none;
-      transition: border-color 0.2s;
-    }
-    input:focus { border-color: var(--accent); }
-    input::placeholder { color: var(--text-3); }
-
-    .error-msg {
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-left: 3px solid var(--danger);
-      border-radius: var(--radius-sm);
-      padding: 0.7rem 0.85rem;
-      color: var(--text-2);
-      font-size: var(--fs-sm);
-      margin-bottom: 1rem;
-    }
-
-    button {
-      width: 100%;
-      min-height: var(--tap);
-      margin-top: 1rem;
-      background: var(--accent);
-      color: var(--bg);
-      border: none;
-      border-radius: var(--radius-sm);
-      font-family: inherit;
-      font-size: var(--fs-sm);
-      font-weight: 600;
-      cursor: pointer;
-      transition: opacity 0.15s;
-    }
-    button:hover { opacity: 0.88; }
-  </style>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
 </head>
 <body>