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/shell/AppShell.tsx

@@ -232,7 +232,7 @@ export function AppShell() {
         {/* Sticky composer: the box stays pinned while the conversation scrolls above. */}
         <div className="shrink-0 px-6 pb-6 pt-2">
           <div className="mx-auto max-w-3xl">
-            <div className="rounded-2xl border border-input bg-card shadow-sm transition-colors focus-within:border-primary/40 focus-within:ring-3 focus-within:ring-ring/15">
+            <div className="rounded-2xl border border-border/80 bg-card shadow-md transition-colors focus-within:border-primary/50 focus-within:ring-3 focus-within:ring-ring/15">
               <div className="px-2.5 py-2">
                 <SteerInput
                   sessionId={activeSessionId}
@@ -253,7 +253,7 @@ export function AppShell() {
           <h1 className="font-heading text-xl font-semibold leading-none tracking-tight text-foreground">
             Thoth<span className="text-primary">II</span>
           </h1>
-          <p className="mt-1.5 text-[0.7rem] uppercase tracking-[0.14em] text-muted-foreground">
+          <p className="thot-label mt-1.5">
             Datamart Builder with
             <br />
             Human In The Loop
@@ -273,7 +273,7 @@ export function AppShell() {
 
         {/* L1 — rail title */}
         <div className="px-4 pb-1.5 pt-1">
-          <span className="text-[0.82rem] font-bold uppercase tracking-[0.18em] text-primary">
+          <span className="thot-label text-[0.8rem] font-bold tracking-[0.18em] text-primary">
             Sessions
           </span>
         </div>
@@ -283,7 +283,7 @@ export function AppShell() {
             type="button"
             onClick={() => setActiveOpen((v) => !v)}
             aria-expanded={activeOpen}
-            className="flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-foreground/65 hover:text-foreground"
+            className="thot-label flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-foreground/65 hover:text-foreground"
           >
             <span className="select-none">{activeOpen ? "▾" : "▸"}</span>
             <span>Active sessions</span>
@@ -298,7 +298,7 @@ export function AppShell() {
                       type="button"
                       onClick={() => setCollapsedGroups((c) => ({ ...c, [g]: !c[g] }))}
                       aria-expanded={!collapsedGroups[g]}
-                      className="flex min-w-0 flex-1 items-center gap-1 px-1 pb-1 text-left text-[0.66rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground hover:text-foreground"
+                      className="thot-label flex min-w-0 flex-1 items-center gap-1 px-1 pb-1 text-left hover:text-foreground"
                     >
                       <span className="select-none">{collapsedGroups[g] ? "▸" : "▾"}</span>
                       <span className="truncate">{g}</span>
@@ -307,7 +307,7 @@ export function AppShell() {
                       type="button"
                       aria-label={`Rename group ${g}`}
                       onClick={() => setRenameGroupTarget(g)}
-                      className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover/gh:opacity-100"
+                      className="rounded-md p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover/gh:opacity-100"
                     >
                       <Pencil className="size-3" />
                     </button>
@@ -341,10 +341,10 @@ export function AppShell() {
             type="button"
             onClick={() => setArchiveOpen((v) => !v)}
             aria-expanded={archiveOpen}
-            className="mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-foreground/65 hover:text-foreground"
+            className="thot-label mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-foreground/65 hover:text-foreground"
           >
             <span className="select-none">{archiveOpen ? "▾" : "▸"}</span>
-            <span>Archive ({archivedList.length})</span>
+            <span className="tabular-nums">Archive ({archivedList.length})</span>
           </button>
           {archiveOpen && (
             <NavSessions sessions={archivedList} activeSessionId={activeSessionId} onOpenPanel={openPanel} menuFor={menuFor} />
@@ -409,7 +409,7 @@ export function AppShell() {
 
 function EmptyState() {
   return (
-    <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
+    <div className="flex min-h-[72vh] flex-col items-center justify-center text-center">
       <span className="font-heading text-5xl font-semibold tracking-tight text-foreground">
         Thoth<span className="text-primary">II</span>
       </span>