AI web starter: bands, review split pane, approve gate, server stub (checkpoint)

React + Vite + Tailwind starter with the no-AI shell, band legend, review
split pane with drafts and verify, and a server stub that refuses approval
while flagged fields are unverified. Band self-check and AI page check.
Both page checks share one Chromium via tests/conftest.py.

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

rpa-dashboard-ai/templates/web/src/index.css

@@ -0,0 +1,75 @@
+@import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ===== THEME TOKENS (swap these for a preset/custom palette) =====
+   The same two blocks as the no-AI page, so every preset in
+   rpa-dashboard-no-ai/templates/themes.md applies here unchanged. */
+body{
+  --bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb;
+  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.78); --border:rgba(255,255,255,.9);
+  --ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a;
+  --accent:#3d9bd0; --accent-2:#5cb2e2; --accent-soft:#d4edfa; --accent-soft-2:#a9d8ee;
+  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
+  --font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font);
+  --header-bg:var(--glass-strong); --header-ink:var(--ink); --header-muted:var(--muted);
+  --primary-bg:linear-gradient(180deg,var(--accent-2),var(--accent));
+  --nav-active-bg:linear-gradient(135deg,var(--accent),var(--accent-dark));
+  --progress-bg:var(--ok); --blur:blur(14px);
+}
+body.dark{
+  --bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38;
+  --glass:rgba(22,34,44,.72); --glass-strong:rgba(30,45,58,.85); --border:rgba(120,160,190,.22);
+  --ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80;
+  --accent-soft:#2e5d90; --accent-soft-2:#1d3d5e;
+  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
+  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
+}
+
+/* ===== BAND COLOURS =====
+   Semantic only: swatches, the rule down a field, legend dots. Never on a button
+   or a heading. They say how clearly a value was printed, not whether it is right.
+   The same in every preset and both modes. */
+body{ --clean:#51a68f; --verify:#e39b34; --review:#de5243; --absent:#6b6580; }
+
+@theme inline {
+  --color-glass: var(--glass);
+  --color-glass-strong: var(--glass-strong);
+  --color-line: var(--border);
+  --color-ink: var(--ink);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-accent-dark: var(--accent-dark);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-soft-2: var(--accent-soft-2);
+  --color-ok: var(--ok);
+  --color-ok-bg: var(--ok-bg);
+  --color-warn: var(--warn);
+  --color-warn-bg: var(--warn-bg);
+  --color-bad: var(--bad);
+  --color-bad-bg: var(--bad-bg);
+  --color-clean: var(--clean);
+  --color-verify: var(--verify);
+  --color-review: var(--review);
+  --color-absent: var(--absent);
+  --font-body: var(--font);
+  --font-head: var(--font-display);
+}
+
+html, body { height: 100%; overflow: hidden; }
+body {
+  margin: 0;
+  font-family: var(--font);
+  color: var(--ink);
+  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
+}
+
+/* Shared pieces, kept as classes because every screen uses them. */
+@layer components {
+  .card { @apply mb-4 rounded-2xl border border-line bg-glass p-5 shadow-[0_10px_30px_rgba(20,50,70,.08)]; backdrop-filter: var(--blur); }
+  .card-title { @apply mb-3.5 font-head text-[15px] font-bold; }
+  .btn { @apply cursor-pointer rounded-[11px] border border-accent-soft-2 px-4 py-2 font-head text-[12.5px] font-semibold text-ink disabled:cursor-not-allowed disabled:opacity-45; background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-2)); }
+  .btn-primary { @apply border-accent text-white; background: var(--primary-bg); }
+  .btn-sm { @apply px-2.5 py-1 text-[11.5px]; }
+  .pill { @apply inline-block rounded-full px-3 py-1 text-[11px] font-bold text-white; }
+  .input { @apply rounded-[10px] border border-line bg-glass-strong px-2.5 py-2 text-[12.5px] text-ink; }
+}