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

@@ -267,11 +267,11 @@ export function CardSearch({
 
   return (
     <div>
-      <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
-        <h2 style={{ margin: 0 }}>
+      <div className="page-header">
+        <h2 className="page-header-title">
           Card Search {hasActiveFilter && <span className="badge">{rows.length}</span>}
         </h2>
-        <div className="row" style={{ gap: 16 }}>
+        <div className="page-header-actions">
           <select
             value={deckId}
             onChange={(e) => setDeckId(e.target.value === "" ? "" : Number(e.target.value))}
@@ -283,17 +283,10 @@ export function CardSearch({
               </option>
             ))}
           </select>
-          <GroupBySelect value={groupBy} onChange={setGroupBy} />
-          <SortBySelect
-            value={sortBy}
-            dir={sortDir}
-            onChangeValue={setSortBy}
-            onToggleDir={() => setSortDir(sortDir === "asc" ? "desc" : "asc")}
-          />
-          <ViewToggle mode={view} onChange={setView} />
         </div>
       </div>
 
+      <div className="panel workspace">
       <div className="filters">
         <div className="field">
           <label>Name contains</label>
@@ -357,6 +350,24 @@ export function CardSearch({
             placeholder="e.g. landfall"
           />
         </div>
+        </div>
+
+        <div className="workspace-bar">
+          {hasActiveFilter && (
+            <span className="workspace-bar-count">
+              {rows.length} result{rows.length === 1 ? "" : "s"}
+            </span>
+          )}
+          <span className="spacer" />
+          <GroupBySelect value={groupBy} onChange={setGroupBy} />
+          <SortBySelect
+            value={sortBy}
+            dir={sortDir}
+            onChangeValue={setSortBy}
+            onToggleDir={() => setSortDir(sortDir === "asc" ? "desc" : "asc")}
+          />
+          <ViewToggle mode={view} onChange={setView} />
+        </div>
       </div>
 
       {!hasActiveFilter ? (