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/viewers/ArtifactView.tsx

@@ -109,7 +109,7 @@ function StructuredValue({ value }: { value: unknown }): ReactElement {
     <div className="flex flex-col gap-4">
       {Object.entries(value as Record<string, unknown>).map(([k, v]) => (
         <section key={k}>
-          <h4 className="mb-1.5 text-[0.72rem] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
+          <h4 className="thot-label mb-1.5">
             {humanizeKey(k)}
           </h4>
           <StructuredValue value={v} />

frontend/src/viewers/MarkdownView.tsx

@@ -16,7 +16,7 @@ function MermaidBlock({ code }: { code: string }) {
       );
   }, [code]);
 
-  if (error) return <pre className="text-red-500 text-xs">{error}</pre>;
+  if (error) return <pre className="text-destructive text-xs">{error}</pre>;
   if (!svg) return <pre className="text-xs opacity-50">{code}</pre>;
   // eslint-disable-next-line react/no-danger
   return <div dangerouslySetInnerHTML={{ __html: svg }} />;
@@ -36,7 +36,7 @@ const components: Components = {
     );
   },
   pre({ children }) {
-    return <pre className="overflow-auto rounded bg-muted p-3 text-sm">{children}</pre>;
+    return <pre className="overflow-auto rounded-lg bg-muted p-3 text-sm shadow-xs">{children}</pre>;
   },
 };
 

frontend/src/viewers/ResultsPanel.tsx

@@ -43,8 +43,9 @@ export function ResultsPanel({ sessionId }: Props) {
   return (
     <div>
       {/* Limit selector */}
-      <div style={{ marginBottom: 8, display: "flex", gap: 8, alignItems: "center" }}>
+      <div className="mb-2 flex items-center gap-2">
         <select
+          className="rounded-lg border border-input bg-card px-2 py-1 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20"
           value={limit}
           onChange={(e) =>
             setLimit(e.target.value === "all" ? 1_000_000 : Number(e.target.value))
@@ -55,7 +56,12 @@ export function ResultsPanel({ sessionId }: Props) {
           <option value="all">all</option>
         </select>
 
-        <button onClick={handleExport}>Export CSV</button>
+        <button
+          className="rounded-md border border-border/70 px-3 py-1 text-sm shadow-xs transition-colors hover:bg-accent"
+          onClick={handleExport}
+        >
+          Export CSV
+        </button>
       </div>
 
       {/* Loading / error states */}
@@ -70,8 +76,10 @@ export function ResultsPanel({ sessionId }: Props) {
       {/* Grid for everything else */}
       {data && !isScalar && (
         <>
-          <div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
-            <AgGridReact columnDefs={columnDefs} rowData={rowData} />
+          <div className="overflow-hidden rounded-xl border border-border/70 shadow-xs">
+            <div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
+              <AgGridReact columnDefs={columnDefs} rowData={rowData} />
+            </div>
           </div>
           {data.truncated && <div>(results truncated)</div>}
         </>

frontend/src/viewers/SchemaLinkingViewer.tsx

@@ -133,13 +133,13 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
         <button
           onClick={() => setView("chart")}
           disabled={oversized}
-          className={view === "chart" ? "font-bold" : ""}
+          className={`rounded-md border border-border/70 px-2 py-1 text-xs shadow-xs transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 ${view === "chart" ? "font-semibold" : ""}`}
         >
           Graph
         </button>
         <button
           onClick={() => setView("table")}
-          className={view === "table" ? "font-bold" : ""}
+          className={`rounded-md border border-border/70 px-2 py-1 text-xs shadow-xs transition-colors hover:bg-accent ${view === "table" ? "font-semibold" : ""}`}
         >
           Table
         </button>

frontend/src/viewers/SqlViewer.tsx

@@ -18,9 +18,9 @@ const STATUS_LABELS: Record<string, string> = {
 };
 
 const STATUS_CLASSES: Record<string, string> = {
-  passed: "bg-green-100 text-green-800",
-  failed: "bg-red-100 text-red-800",
-  untested: "bg-gray-100 text-gray-600",
+  passed: "bg-[oklch(var(--success)/0.15)] text-[oklch(0.45_0.12_165)] ring-1 ring-[oklch(var(--success)/0.3)]",
+  failed: "bg-destructive/10 text-destructive ring-1 ring-destructive/25",
+  untested: "bg-muted text-muted-foreground ring-1 ring-border",
 };
 
 function Block({ block }: { block: SqlBlock }) {
@@ -43,7 +43,7 @@ function Block({ block }: { block: SqlBlock }) {
     : "";
 
   return (
-    <div className="sql-block border rounded mb-2">
+    <div className="sql-block rounded-lg border border-border/70 mb-2">
       <button
         className="w-full flex items-center gap-2 px-3 py-2 text-left font-mono text-sm hover:bg-muted/30"
         onClick={() => setOpen((o) => !o)}
@@ -58,7 +58,7 @@ function Block({ block }: { block: SqlBlock }) {
         )}
         {badge && (
           <span
-            className={`ml-auto text-xs px-1.5 py-0.5 rounded ${badgeClass}`}
+            className={`ml-auto text-xs px-1.5 py-0.5 rounded-md ${badgeClass}`}
           >
             {badge}
           </span>
@@ -71,7 +71,7 @@ function Block({ block }: { block: SqlBlock }) {
             // eslint-disable-next-line react/no-danger
             <div dangerouslySetInnerHTML={{ __html: html }} />
           ) : (
-            <pre className="text-sm opacity-50">{block.sql}</pre>
+            <pre className="font-mono text-sm opacity-50">{block.sql}</pre>
           )}
           {block.comments && Object.keys(block.comments).length > 0 && (
             <dl className="mt-2 text-xs text-muted-foreground grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5">
@@ -96,7 +96,7 @@ export function SqlViewer({ blocks }: { blocks: SqlBlock[] }) {
     <div className="sql-viewer">
       <div className="flex gap-2 mb-2">
         <button
-          className="text-xs px-2 py-1 border rounded hover:bg-muted/30"
+          className="text-xs px-2 py-1 rounded-md border border-border/70 shadow-xs transition-colors hover:bg-accent"
           onClick={() =>
             setLayout((l) => (l === "vertical" ? "horizontal" : "vertical"))
           }