feat(admin): design system audit fixes

- Add CSS design tokens for consistency (--admin-danger-hover, --admin-accent-dot, shadow-md warm tone)
- Replace unicode icons with inline SVG (⋮, ✕, ▼, ▶)
- Consolidate duplicate PageHeader/AdminPageHeader components
- Standardize border-radius (rounded-xl → rounded-lg for ViewModeTabs)
- Remove hardcoded brand UUID in products page
- Replace hardcoded bg-red-600 with CSS variables in delete buttons
- Add AdminButton, AdminFilterTabs, AdminSearchInput, PageHeader design system components
- Fix GlassModal and AdminModal close button styling
- Remove duplicate 'New Lot' button on Route Trace dashboard

src/components/admin/HarvestReach/SegmentListSidebar.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import type { Segment } from "@/actions/harvest-reach/segments";
+import { AdminButton, AdminIconButton, AdminSearchInput } from "@/components/admin/design-system";
 
 // Icon components
 const Icons = {
@@ -18,12 +19,6 @@ const Icons = {
       <line x1="14" y1="11" x2="14" y2="17"/>
     </svg>
   ),
-  search: (className: string) => (
-    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8"/>
-      <path d="m21 21-4.3-4.3"/>
-    </svg>
-  ),
 };
 
 type Props = {
@@ -46,27 +41,21 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
     <div className="rounded-xl border border-[var(--admin-border)] bg-white p-4 flex flex-col gap-4">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-semibold text-[var(--admin-text-primary)]">Saved Segments</h3>
-        <button
+        <AdminIconButton
           onClick={onNew}
-          className="w-7 h-7 rounded-lg bg-emerald-600 text-white flex items-center justify-center hover:bg-emerald-700 transition-colors"
-          aria-label="New segment"
+          label="New segment"
+          variant="primary"
+          size="sm"
         >
-          {Icons.plus("w-4 h-4")}
-        </button>
+          <Icons.plus className="w-4 h-4" />
+        </AdminIconButton>
       </div>
 
-      <div className="relative">
-        <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
-          {Icons.search("h-4 w-4 text-[var(--admin-text-muted)]")}
-        </div>
-        <input
-          type="search"
-          placeholder="Search segments…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-full pl-10 pr-3 py-2 text-sm border border-[var(--admin-border)] rounded-lg bg-white text-[var(--admin-text-primary)] focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
-        />
-      </div>
+      <AdminSearchInput
+        placeholder="Search segments…"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
 
       <div className="flex flex-col gap-1.5">
         {filtered.length === 0 && (
@@ -80,18 +69,22 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
               <div className="rounded-xl border border-red-200 bg-red-50 p-3 flex flex-col gap-2">
                 <p className="text-xs text-red-600 font-medium">Delete "{segment.name}"?</p>
                 <div className="flex gap-2">
-                  <button
+                  <AdminButton
+                    variant="danger"
+                    size="sm"
                     onClick={() => { onDelete(segment.id); setConfirmDelete(null); }}
-                    className="flex-1 py-1.5 text-xs rounded-lg bg-red-600 text-white hover:bg-red-700 font-semibold transition-colors"
+                    fullWidth
                   >
                     Delete
-                  </button>
-                  <button
+                  </AdminButton>
+                  <AdminButton
+                    variant="secondary"
+                    size="sm"
                     onClick={() => setConfirmDelete(null)}
-                    className="flex-1 py-1.5 text-xs rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-muted)] hover:bg-[var(--admin-card-hover)] font-medium transition-colors"
+                    fullWidth
                   >
                     Cancel
-                  </button>
+                  </AdminButton>
                 </div>
               </div>
             ) : (
@@ -99,7 +92,7 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
                 onClick={() => onSelect(segment)}
                 className={`px-3 py-2.5 rounded-xl cursor-pointer flex items-center justify-between gap-2 transition-all ${
                   activeSegmentId === segment.id
-                    ? "bg-emerald-50 border border-emerald-200"
+                    ? "bg-[var(--admin-accent-light)] border border-[var(--admin-accent)]"
                     : "hover:bg-[var(--admin-card-hover)] border border-transparent"
                 }`}
               >