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/SessionDocumentsPanel.tsx

@@ -44,7 +44,7 @@ function DocBody({ doc }: { doc: SessionDocument }) {
       <ul className="flex flex-col divide-y divide-border/50">
         {items.map((d, i) => (
           <li key={i} className="py-3 first:pt-0">
-            <span className={`inline-block rounded-full px-2 py-0.5 text-[0.62rem] font-semibold uppercase tracking-wide ${decisionChipClass(d.type ?? "")}`}>
+            <span className={`inline-block rounded-md px-2 py-0.5 text-[0.62rem] font-semibold uppercase tracking-wide ${decisionChipClass(d.type ?? "")}`}>
               {(d.type ?? "decision").replace(/_/g, " ")}
             </span>
             {d.subject && <p className="mt-1.5 text-sm font-medium text-foreground">{d.subject}</p>}
@@ -77,12 +77,12 @@ export function SessionDocumentsPanel({ session, onClose, onResume }: Props) {
 
   return (
     <aside className="flex w-[30vw] max-w-[30vw] shrink-0 flex-col border-r border-border bg-sidebar">
-      <div className="flex items-start justify-between gap-2 border-b border-border/70 px-3 py-3">
+      <div className="flex items-start justify-between gap-2 border-b border-border/60 px-3 py-3">
         <div className="min-w-0">
           <h2 className="truncate font-heading text-sm font-semibold text-foreground">
             {session.name || session.question}
           </h2>
-          <p className="mt-0.5 text-[0.7rem] uppercase tracking-wide text-muted-foreground">{statusLabel(session)}</p>
+          <p className="thot-label mt-0.5">{statusLabel(session)}</p>
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {resumable && (
@@ -101,11 +101,11 @@ export function SessionDocumentsPanel({ session, onClose, onResume }: Props) {
             {docs.map((doc, idx) => (
               <section key={doc.key} className={idx > 0 ? "border-t border-border/50 pt-7" : ""}>
                 <div className="mb-3 flex items-center gap-2">
-                  <h3 className="text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                  <h3 className="thot-label">
                     {doc.title}
                   </h3>
                   {doc.phase !== "—" && (
-                    <span className="rounded-full bg-muted px-1.5 py-0.5 text-[0.6rem] font-medium text-muted-foreground">
+                    <span className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.6rem] font-medium text-muted-foreground">
                       {doc.phase}
                     </span>
                   )}