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}

frontend/src/widgets/ArtifactWidget.tsx

@@ -10,7 +10,7 @@ export function ArtifactWidget({ descriptor }: WidgetProps) {
     <div className="space-y-2">
       {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
       {descriptor.artifact?.content && (
-        <pre className="overflow-auto max-h-64 bg-muted p-3 text-sm rounded border">
+        <pre className="overflow-auto max-h-64 bg-muted p-3 text-sm font-mono rounded-lg border border-border/70 shadow-xs">
           {descriptor.artifact.content}
         </pre>
       )}

frontend/src/widgets/FallbackWidget.tsx

@@ -4,11 +4,11 @@ import type { WidgetProps } from "./types";
 export function FallbackWidget({ descriptor, onRespond }: WidgetProps) {
   const [text, setText] = useState("");
   return (
-    <div className="border rounded p-3 space-y-2">
+    <div className="rounded-xl border border-border/70 bg-card p-3 shadow-sm space-y-2">
       <p className="text-sm text-amber-600">Unsupported widget (kind: {descriptor.widget}) — respond manually</p>
-      <pre className="text-xs overflow-auto max-h-48 bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
-      <textarea className="w-full border rounded p-1" value={text} onChange={(e) => setText(e.target.value)} />
-      <button className="border rounded px-2 py-1" onClick={() => onRespond({ id: descriptor.id, control: "freetext", text })}>Send</button>
+      <pre className="text-xs font-mono overflow-auto max-h-48 rounded-lg bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
+      <textarea className="w-full rounded-lg border border-input bg-card p-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20" value={text} onChange={(e) => setText(e.target.value)} />
+      <button className="rounded-md border border-border/70 px-2 py-1 text-sm shadow-xs transition-colors hover:bg-accent" onClick={() => onRespond({ id: descriptor.id, control: "freetext", text })}>Send</button>
     </div>
   );
 }

frontend/src/widgets/FreetextWidget.tsx

@@ -4,20 +4,20 @@ import type { WidgetProps } from "./types";
 export function FreetextWidget({ descriptor, onRespond }: WidgetProps) {
   const [text, setText] = useState("");
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {descriptor.title && (
         <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
           {descriptor.title}
         </p>
       )}
       <textarea
-        className="min-h-24 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
+        className="min-h-24 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20"
         value={text}
         onChange={(e) => setText(e.target.value)}
         placeholder="Type your answer…"
       />
       <button
-        className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))]"
+        className="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))]"
         onClick={() => onRespond({ id: descriptor.id, kind: "freetext", text })}
       >
         Send

frontend/src/widgets/InfoWidget.tsx

@@ -1,5 +1,5 @@
 import type { WidgetProps } from "./types";
 export function InfoWidget({ descriptor }: WidgetProps) {
   const color = descriptor.level === "error" ? "text-red-600" : descriptor.level === "warning" ? "text-amber-600" : "text-foreground";
-  return <p className={`text-sm ${color}`}>{descriptor.text ?? descriptor.title}</p>;
+  return <p className={`text-sm leading-relaxed ${color}`}>{descriptor.text ?? descriptor.title}</p>;
 }

frontend/src/widgets/MultiselectWidget.tsx

@@ -21,7 +21,7 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
   const isDisabled = descriptor.allow_empty === false && checked.size === 0;
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {descriptor.title && (
         <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
           {descriptor.title}
@@ -46,7 +46,9 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
           {options.map((o) => (
             <label
               key={o.id}
-              className="flex cursor-pointer items-center gap-2.5 rounded-lg border border-transparent px-2.5 py-2 text-sm text-foreground transition-colors hover:bg-accent"
+              className={`flex cursor-pointer items-center gap-2.5 rounded-lg border px-2.5 py-2 text-sm text-foreground transition-colors hover:bg-accent ${
+                checked.has(o.id) ? "border-border/60 bg-accent/60" : "border-transparent"
+              }`}
             >
               <input
                 type="checkbox"
@@ -61,7 +63,7 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
       </div>
       <div>
         <button
-          className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
+          className="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
           disabled={isDisabled}
           onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
         >

frontend/src/widgets/ReservedControls.tsx

@@ -28,13 +28,13 @@ export function ReservedControls({
       {otherOpen && (
         <div className="flex flex-col gap-2">
           <textarea
-            className="min-h-20 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
+            className="min-h-20 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20"
             value={text}
             onChange={(e) => setText(e.target.value)}
             placeholder="Describe your alternative…"
           />
           <button
-            className="self-start rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
+            className="self-start rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground shadow-xs transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!text.trim()}
             onClick={() => onControl("freetext", text)}
           >

frontend/src/widgets/SelectWidget.tsx

@@ -3,7 +3,7 @@ import { ReservedControls } from "./ReservedControls";
 
 export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {(descriptor.title || descriptor.intro) && (
         <div className="space-y-1.5">
           {descriptor.title && (
@@ -27,7 +27,7 @@ export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
           >
             <span>{o.label}</span>
             {o.recommended && (
-              <span className="shrink-0 rounded-full bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-[0.65rem] font-medium text-[oklch(0.5_0.13_165)]">
+              <span className="shrink-0 rounded-md bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-[0.65rem] font-medium text-[oklch(0.5_0.13_165)]">
                 consigliato
               </span>
             )}