style(frontend): look&feel v2 — layered shadows, sharper radii, mono data register

Colors (GSD palette) untouched. New visual vocabulary across the whole GUI:
- warm-tinted layered shadow tokens (--shadow-xs/sm/md) replacing flat rings;
  cards/dialogs framed with hairline border + real elevation
- strict radii scale: xl cards / lg inputs / md controls / 2xl dialogs;
  buttons move from pills to rounded-md
- third type register: --font-mono + tabular-nums on SQL, timers, dates, ids;
  standardized .thot-label micro-label tier
- prose: framed tables with uppercase headers, elevated code blocks
- SqlViewer badges moved from hardcoded Tailwind greens/reds to success/
  destructive token tints; ResultsPanel inline styles replaced with classes
- artifact gate: first option rendered as filled primary action

Verified offline via Playwright against a mock backend replaying a real psd
session (no VPN needed). tsc clean, 115/115 vitest.

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

frontend/src/index.css

@@ -15,6 +15,14 @@
   :root {
     --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
     --font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
+    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+
+    /* Layered elevation, tinted with the foreground hue so depth reads warm on
+       warm surfaces. Borders mark structure; shadows mark elevation. */
+    --shadow-tint: 0.2678 0.0097 355.6;
+    --shadow-xs: 0 1px 2px oklch(var(--shadow-tint) / 0.05);
+    --shadow-sm: 0 1px 2px oklch(var(--shadow-tint) / 0.05), 0 2px 6px -1px oklch(var(--shadow-tint) / 0.05);
+    --shadow-md: 0 2px 4px -2px oklch(var(--shadow-tint) / 0.06), 0 12px 32px -8px oklch(var(--shadow-tint) / 0.1);
 
     --background: 0.9918 0.0011 17.2;     /* surface */
     --foreground: 0.2678 0.0097 355.6;    /* text */
@@ -52,6 +60,7 @@
 
   .dark,
   [data-bs-theme="dark"] {
+    --shadow-tint: 0 0 0;
     --background: 0.2178 0 90;
     --foreground: 0.9310 0 90;
     --card: 0.2350 0 90;
@@ -98,7 +107,12 @@
   h1, h2, h3, h4 {
     font-family: var(--font-heading);
     font-optical-sizing: auto;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.015em;
+  }
+
+  code, pre, kbd, samp {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
   }
 
   ::selection {
@@ -130,6 +144,15 @@
  * Scoped so it never leaks into widgets.
  */
 @layer components {
+  /* Standard micro-label: panel headers, nav sections, meta rows. */
+  .thot-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: oklch(var(--muted-foreground));
+  }
+
   .thot-prose {
     color: oklch(var(--foreground));
     font-size: 0.9375rem;
@@ -145,25 +168,27 @@
     margin: 1.1em 0 0.5em;
     letter-spacing: -0.01em;
   }
-  .thot-prose h1 { font-size: 1.4rem; }
+  .thot-prose h1 { font-size: 1.45rem; }
   .thot-prose h2 { font-size: 1.2rem; }
-  .thot-prose h3 { font-size: 1.05rem; }
+  .thot-prose h3 { font-size: 1.02rem; }
   .thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
   .thot-prose li { margin: 0.25em 0; }
   .thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
   .thot-prose code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-family: var(--font-mono);
     font-size: 0.85em;
     background: oklch(var(--muted));
     padding: 0.12em 0.4em;
     border-radius: 0.3rem;
+    border: 1px solid oklch(var(--border) / 0.6);
   }
   .thot-prose pre {
     background: oklch(var(--muted));
     padding: 0.9rem 1rem;
-    border-radius: var(--radius);
+    border-radius: calc(var(--radius) + 2px);
     overflow-x: auto;
-    border: 1px solid oklch(var(--border));
+    border: 1px solid oklch(var(--border) / 0.7);
+    box-shadow: var(--shadow-xs);
   }
   .thot-prose pre code { background: transparent; padding: 0; }
   .thot-prose blockquote {
@@ -172,7 +197,24 @@
     color: oklch(var(--muted-foreground));
     margin: 0.7em 0;
   }
-  .thot-prose table { border-collapse: collapse; width: 100%; margin: 0.7em 0; font-size: 0.875rem; }
-  .thot-prose th, .thot-prose td { border: 1px solid oklch(var(--border)); padding: 0.4em 0.6em; text-align: left; }
-  .thot-prose th { background: oklch(var(--muted)); font-weight: 600; }
+  .thot-prose table {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    margin: 0.7em 0;
+    font-size: 0.875rem;
+    border: 1px solid oklch(var(--border) / 0.8);
+    border-radius: calc(var(--radius) + 2px);
+    overflow: hidden;
+  }
+  .thot-prose th, .thot-prose td { padding: 0.45em 0.7em; text-align: left; }
+  .thot-prose td { border-top: 1px solid oklch(var(--border) / 0.6); font-variant-numeric: tabular-nums; }
+  .thot-prose th {
+    background: oklch(var(--muted));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: oklch(var(--muted-foreground));
+  }
 }