From 178c7234753d7b5a08c9405732e0c39dde5a6d44 Mon Sep 17 00:00:00 2001
From: Niklas Ye <niklas.ye@enokinetwork.com>
Date: Wed, 21 Oct 2026 21:37:07 +0200
Subject: [PATCH] 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 | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index da15d4c..d53a38e 100644
--- a/internal/web/static/app.css
+++ b/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; }