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/widgets/ArtifactGateWidget.tsx

@@ -34,7 +34,7 @@ export function ArtifactGateWidget({ descriptor, onRespond }: WidgetProps) {
       >
         <DialogTitle>{descriptor.title ?? "Artifact review"}</DialogTitle>
 
-        <div className="min-h-0 overflow-auto rounded border bg-background p-3">
+        <div className="min-h-0 overflow-auto rounded-xl border border-border/70 bg-background p-3">
           {descriptor.artifact ? (
             <ArtifactView artifact={descriptor.artifact} />
           ) : (
@@ -42,7 +42,7 @@ export function ArtifactGateWidget({ descriptor, onRespond }: WidgetProps) {
           )}
         </div>
 
-        <div className="flex flex-col gap-2 border-t pt-3">
+        <div className="flex flex-col gap-2 border-t border-border/60 pt-3">
           {pendingLinkage ? (
             <LinkageHost
               parentResponse={pendingLinkage.parentResponse}
@@ -52,10 +52,14 @@ export function ArtifactGateWidget({ descriptor, onRespond }: WidgetProps) {
           ) : (
             <>
               <div className="flex flex-wrap gap-2">
-                {descriptor.options?.map((o) => (
+                {descriptor.options?.map((o, i) => (
                   <button
                     key={o.id}
-                    className="rounded border px-3 py-2 text-left hover:bg-accent"
+                    className={
+                      i === 0
+                        ? "rounded-lg bg-primary px-3.5 py-2 text-left font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))]"
+                        : "rounded-lg border border-border/70 px-3 py-2 text-left shadow-xs transition-colors hover:bg-accent"
+                    }
                     onClick={() => handleOption(o.id)}
                   >
                     {o.label}