Break the flat background with a fading dot grid

The web UI sat on one flat colour. A dot grid on body::before, solid for the
top quarter of the screen and faded out by 88%, gives the page some texture
without adding contrast behind text.

It is a pseudo-element at z-index -1 rather than a wrapper div, so index.html
and the JS are untouched: the layer sits above the canvas background and below
all in-flow content. Cards, rows, the sidebar and sheets keep their solid
surfaces; the top and bottom bars are translucent and let it show faintly.
The sticky filter strip over the queue is opaque and hides the dots behind it.

--dot is a new colour token, light on dark and dark on light, declared in all
three palette blocks (the two dark ones stay identical, as the file requires).

No API, schema or CSP change, and no change to terdut-tui.

Claude-Session: https://claude.ai/code/session_016mBLURvJoMuUEr9cB2RpUN

internal/web/static/app.css

@@ -7,6 +7,7 @@
 
 :root {
   --bg: #f5f6f8;
+  --dot: rgba(60, 70, 95, 0.16);
   --surface: #ffffff;
   --surface-2: #eff1f4;
   --surface-hover: #f7f8fa;
@@ -79,6 +80,7 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --bg: #0f1115;
+    --dot: rgba(148, 156, 180, 0.26);
     --surface: #1a1e26;
     --surface-2: #232834;
     --surface-hover: #20252e;
@@ -114,6 +116,7 @@
 }
 :root[data-theme="dark"] {
   --bg: #0f1115;
+  --dot: rgba(148, 156, 180, 0.26);
   --surface: #1a1e26;
   --surface-2: #232834;
   --surface-hover: #20252e;
@@ -163,6 +166,17 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* Dot grid behind everything, fading out down the screen. z-index -1 sits above
+   the canvas background but below all in-flow content, so no wrapper element
+   is needed. */
+body::before {
+  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background-image: radial-gradient(circle, var(--dot) 1.25px, transparent 1.75px);
+  background-size: 28px 28px;
+  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 88%);
+  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 88%);
+}
+
 a { color: inherit; text-decoration: none; }
 button, input, textarea, select { font: inherit; color: inherit; }
 code { font-family: var(--mono); font-size: 0.9em; }