feat(ui): cohesive frontend polish — design system + per-screen refinement

Distill the UI into a single, recognizable voice: a precision
instrument for one operator on one machine. Bloomberg-coded chrome,
warm-paper detail surfaces, mono-heavy numerics, with one editorial
serif accent for moments of weight.

Design system
- Three-font stack: Geist Sans (UI), Geist Mono (data), Instrument
  Serif (editorial display). No Inter, no system fonts.
- Two surfaces: dark chrome (--background, --accent, --signal) and
  warm paper detail surfaces (--surface, --surface-ink*).
- Inbox has its own Ticker Tape terminal palette (--tt-*).
- Shared component classes: .eyebrow, .mono, .display, .surface,
  .surface-2, .row-hover, .nav-active, .kbd, .editorial, .hairline.
- --m-* token aliases for the legacy drawer components so test-
  asserted class strings keep resolving to the same hue family.

Drawers (Claim + Remit)
- Editorial display face for totals (paid/adjustment amounts).
- Color-coded money tiles: green-tinted paid card, amber-tinted
  adjustment card when non-zero, muted otherwise.
- Tabs get accent-blue underline + CSS-driven active state.
- Validation banners with proper background opacity + ring-around-
  dot success badge.
- StateHistoryTimeline: dashed border, ring around dots, ↳ prefix
  for remit ids.
- DiagnosesList, PartiesGrid, MatchedRemitCard, CasAdjustmentsPanel:
  refined typography, dashed dividers, italic descriptions, mono
  amounts, font-semibold totals, hover row tints.

Inbox Ticker Tape
- Custom RowCheckbox with sr-only input + amber accent.
- Alternating row striping, hover tints, accent rail with inset
  shadow on selection.
- Refined sparkline with glow at high values.
- BulkBar: bottom-floating bar with amber count chip, larger shadow.
- CandidateBreakdown: animated progress bars with amber gradient.
- InboxHeader: Instrument Serif headline, mono day/date stamp,
  pulsing amber status dot.

Dialogs & search
- NewClaimDialog: editorial title, mono NPI/CPT/amount fields.
- SearchBar: refined input row with mono, footer with pulsing
  loading indicator.
- KeyboardCheatsheet: monogram icon chip, hover row states, refined
  eyebrow header.

Primitives
- StatusBadge / ClaimStateBadge: per-state dot indicators.
- SelectItem: data-[highlighted]:outline tokens for keyboard a11y.
- Table primitives: refined header treatment, hover/focus states.

Tests + build
- 354/354 tests passing across 59 files.
- Vite build clean (53.84 kB CSS / 560.86 kB JS).
- Eyebrow assertions updated to match the consolidated .eyebrow
  class (intact visual contract, abstracted class string).
- Badge variant tokens updated to the polished bg-muted/80 /
  /0.14 opacity scale.

src/pages/Inbox.tsx

@@ -135,10 +135,15 @@ export default function Inbox() {
   if (loading) {
     return (
       <div
-        className="min-h-screen p-8 font-mono"
-        style={{ background: "var(--tt-bg)", color: "var(--tt-ink-dim)" }}
+        className="min-h-screen p-8 mono flex items-center gap-2"
+        style={{ background: "var(--tt-bg)", color: "var(--tt-ink-dim)", fontSize: 12 }}
       >
-        loading…
+        <span
+          aria-hidden
+          className="inline-block h-1.5 w-1.5 rounded-full animate-pulse-dot"
+          style={{ background: "var(--tt-amber)" }}
+        />
+        loading inbox…
       </div>
     );
   }
@@ -146,10 +151,13 @@ export default function Inbox() {
   if (error) {
     return (
       <div
-        className="min-h-screen p-8 font-mono"
-        style={{ background: "var(--tt-bg)", color: "var(--tt-oxblood)" }}
+        className="min-h-screen p-8 mono flex flex-col gap-2"
+        style={{ background: "var(--tt-bg)", color: "var(--tt-oxblood)", fontSize: 12 }}
       >
-        error: {error.message}
+        <span className="uppercase tracking-[0.18em]" style={{ fontSize: 10, fontWeight: 700 }}>
+          Connection error
+        </span>
+        <span>{error.message}</span>
       </div>
     );
   }
@@ -163,7 +171,7 @@ export default function Inbox() {
       style={{ background: "var(--tt-bg)", color: "var(--tt-ink)" }}
     >
       <InboxHeader needEyesCount={needEyes} doneTodayCount={lanes.done_today.length} />
-      <main className="p-4 flex gap-4 items-start flex-wrap">
+      <main className="px-6 pb-24 pt-4 flex gap-4 items-stretch flex-wrap">
         <Lane
           name="REJECTED"
           accent="oxblood"
@@ -229,42 +237,78 @@ export default function Inbox() {
           regenerated 837 files. Single-claim resubmit skips this. */}
       {bundleModalOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ background: "rgba(0,0,0,0.55)" }}
+          className="fixed inset-0 z-50 flex items-center justify-center p-4"
+          style={{ background: "rgba(0,0,0,0.65)", backdropFilter: "blur(4px)" }}
           data-testid="resubmit-bundle-modal"
           role="dialog"
           aria-label="Resubmit and download bundle"
         >
           <div
-            className="w-[min(32rem,90vw)] rounded-md border p-6 font-mono"
+            className="w-[min(34rem,90vw)] rounded-md border p-6 mono"
             style={{
               background: "var(--tt-bg)",
               borderColor: "var(--tt-amber)",
               color: "var(--tt-ink)",
+              boxShadow:
+                "0 0 0 1px hsl(36 88% 56% / 0.18), 0 24px 60px -12px hsl(0 0% 0% / 0.7), inset 0 1px 0 0 hsl(0 0% 100% / 0.04)",
             }}
           >
+            <div className="flex items-center gap-2 mb-3">
+              <span
+                aria-hidden
+                className="inline-block h-2 w-2 rounded-full animate-pulse-dot"
+                style={{
+                  background: "var(--tt-amber)",
+                  boxShadow: "0 0 8px var(--tt-amber)",
+                }}
+              />
+              <span
+                className="eyebrow"
+                style={{ color: "var(--tt-amber)" }}
+              >
+                Resubmit batch
+              </span>
+            </div>
+
             <h2
-              className="mb-3 text-sm uppercase tracking-[0.18em]"
-              style={{ color: "var(--tt-amber)" }}
+              className="display text-2xl mb-3"
+              style={{ color: "var(--tt-ink)", letterSpacing: "-0.02em" }}
             >
               Resubmit {selected.rejected.length} claims
             </h2>
-            <p className="mb-5 text-sm leading-relaxed">
-              Move these claims back to <strong>submitted</strong>?
-              You can also download a bundle of regenerated 837 files
+
+            <p
+              className="mb-6 text-sm leading-relaxed"
+              style={{ color: "var(--tt-ink-dim)" }}
+            >
+              Move these claims back to{" "}
+              <span
+                className="px-1.5 py-0.5 rounded-sm"
+                style={{
+                  background: "var(--tt-amber)",
+                  color: "var(--tt-bg)",
+                  fontWeight: 700,
+                }}
+              >
+                submitted
+              </span>
+              ? Optionally download a bundle of regenerated 837 files
               (one <code>.x12</code> per claim) — useful if you're
               about to ship them to the clearinghouse.
             </p>
-            <div className="flex justify-end gap-3">
+
+            <div className="flex justify-end gap-2.5">
               <button
                 type="button"
                 onClick={onResubmitOnly}
                 disabled={bundleSubmitting}
                 data-testid="resubmit-modal-only"
-                className="border px-4 py-2 text-xs uppercase tracking-wider disabled:opacity-50"
+                className="px-4 py-2 rounded-sm text-[11px] uppercase tracking-[0.14em] transition-all hover:bg-[color:var(--tt-amber)]/10 disabled:opacity-50 focus-visible:outline-none focus-visible:bg-[color:var(--tt-amber)]/10"
                 style={{
-                  borderColor: "var(--tt-amber)",
+                  border: "1px solid var(--tt-amber)",
                   color: "var(--tt-amber)",
+                  background: "transparent",
+                  fontWeight: 600,
                 }}
               >
                 Resubmit only
@@ -274,10 +318,11 @@ export default function Inbox() {
                 onClick={onResubmitAndDownload}
                 disabled={bundleSubmitting}
                 data-testid="resubmit-modal-download"
-                className="px-4 py-2 text-xs uppercase tracking-wider disabled:opacity-50"
+                className="px-4 py-2 rounded-sm text-[11px] uppercase tracking-[0.14em] transition-all hover:brightness-110 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--tt-amber)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--tt-bg)]"
                 style={{
                   background: "var(--tt-amber)",
                   color: "var(--tt-bg)",
+                  fontWeight: 700,
                 }}
               >
                 Resubmit + Download
@@ -294,7 +339,7 @@ export default function Inbox() {
       {bundleSubmitting && (
         <div
           className="fixed inset-0 z-40 cursor-wait"
-          style={{ background: "rgba(0,0,0,0.15)" }}
+          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(1px)" }}
           data-testid="resubmit-progress-overlay"
           aria-hidden="true"
         />