Cohesive styling pass: design tokens, shared primitives, responsive groundwork

The UI had a good terracotta-on-dark system that wasn't applied
consistently — magic-number spacing, ad-hoc page headers, ~6 copied
panel surfaces, ~8 drifting label variants, and scattered accent use.

- Tokens: warm the neutral ramp, add spacing/radius/type/motion scales,
  --accent-quiet + panel highlight. Terracotta hue unchanged.
- Primitives: .panel, .section-label, .page-header/.toolbar — collapse
  the copied surfaces and label variants onto shared classes.
- Unify each filter-heavy page's display controls (group/sort/view,
  select-all, count) into a workspace toolbar inside the filter panel,
  so they read as one surface instead of floating above it.
- Labels: sentence-case, higher-contrast form labels; uppercase section
  markers bumped faint -> muted.
- Accent hierarchy: reserve full terracotta for primary actions/active
  state; demote decorative labels and the group-header underline.
- Responsive groundwork: reflow classes for the deck two-pane and nav
  rail (stacks / icon-collapse at breakpoints), touch-target sizing.
  Desktop unchanged in kind.

src/views/DeckView.tsx

@@ -159,7 +159,7 @@ function CommanderHero({ card, onClear }: { card: DeckEntry; onClear: () => void
   const { handlers } = useHoverPreview();
   const { open } = useClickPreview();
   return (
-    <div className="commander-hero">
+    <div className="panel commander-hero">
       {card.image_uri ? (
         <img
           className="commander-hero-img"
@@ -818,8 +818,8 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
   }
 
   return (
-    <div style={{ display: "flex", gap: 20 }}>
-      <div style={{ width: 240, flexShrink: 0 }}>
+    <div className="deck-layout">
+      <div className="deck-sidebar">
         <div className="row" style={{ justifyContent: "space-between" }}>
           <h2>Decks</h2>
           <IconButton icon={Icons.upload} label="Import deck…" onClick={pickImportFile} />
@@ -925,7 +925,7 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
 
               {/* Deck metadata: format + (for Commander/Brawl) the commander card. */}
               <div className="deck-top-meta">
-                <div className="deck-meta">
+                <div className="panel deck-meta">
                   <label className="row" style={{ gap: 6 }}>
                     <span className="muted">Format</span>
                     <select value={deck.format} onChange={(e) => changeFormat(e.target.value)}>
@@ -958,8 +958,8 @@ export function DeckView({ refreshSignal }: { refreshSignal?: number }) {
 
               {contents.length > 0 && (
                 <div className="deck-top-stats">
-                  <div className="deck-stats">
-                    <div className="deck-stats-head">Deck analysis</div>
+                  <div className="panel deck-stats">
+                    <div className="deck-stats-head section-label">Deck analysis</div>
                     <div className="deck-stats-body">
                       <div className="deck-stats-numbers">
                         <div className="stat-tiles-row">