diff --git a/src/components/item-history-popover.tsx b/src/components/item-history-popover.tsx
index 742d2c7..60fe097 100644
--- a/src/components/item-history-popover.tsx
+++ b/src/components/item-history-popover.tsx
@@ -57,13 +57,13 @@ export function ItemHistoryPopover({ data, loading, error }: Props) {
   );
 }
 
-function FreshnessBadge({ label, ts, variant }: { label: string; ts: string | null; variant: "indigo" | "amber" }) {
+function FreshnessBadge({ label, ts, variant }: { label: string; ts: string | null; variant: "indigo" | "warn" }) {
   const cls =
     variant === "indigo"
-      ? "bg-indigo-500/10 text-indigo-700 dark:text-indigo-300"
-      : "bg-amber-500/10 text-amber-700 dark:text-amber-300";
+      ? "bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 ring-1 ring-inset ring-indigo-500/20"
+      : "bg-warn/15 text-warn-foreground ring-1 ring-inset ring-warn/25";
   return (
-    <span className={cn("inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium", cls)}>
+    <span className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium", cls)}>
       {label} {ts ? relTime(ts) : ""}
     </span>
   );
@@ -72,7 +72,7 @@ function FreshnessBadge({ label, ts, variant }: { label: string; ts: string | nu
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="space-y-1">
-      <div className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">{title}</div>
+      <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80">{title}</div>
       <div className="text-xs">{children}</div>
     </div>
   );
@@ -87,34 +87,36 @@ function DeterministicCard({
 }) {
   const fuzzy = data.match.match_kind === "description_fuzzy";
   return (
-    <div className="rounded-lg border border-indigo-200 bg-indigo-50/40 p-2.5 space-y-2">
+    <div className="rounded-lg border border-indigo-500/20 bg-gradient-to-b from-indigo-50/60 to-indigo-50/20 p-3 space-y-2.5 shadow-sm shadow-indigo-500/5">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
-          <TrendingUp className="h-3.5 w-3.5 text-indigo-700" />
-          <span className="text-xs font-semibold text-indigo-700">PB-derived</span>
+          <span className="inline-flex h-5 w-5 items-center justify-center rounded-md bg-indigo-500/15">
+            <TrendingUp className="h-3 w-3 text-indigo-700 dark:text-indigo-300" />
+          </span>
+          <span className="text-xs font-semibold text-indigo-700 dark:text-indigo-300">PB-derived</span>
         </div>
         <FreshnessBadge label="fresh" ts={data.generated_at} variant="indigo" />
       </div>
 
       {fuzzy && (
-        <div className="rounded border border-amber-300 bg-amber-50 px-2 py-1 text-[10px] text-amber-900">
+        <div className="rounded-md border border-warn/30 bg-warn/10 px-2 py-1 text-[10px] text-warn-foreground ring-1 ring-inset ring-warn/15">
           ⚠ best-guess match · {Math.round(data.match.match_confidence * 100)}% confidence
         </div>
       )}
 
       {data.cheapest && (
-        <div className="text-xs font-bold text-emerald-700">
+        <div className="text-xs font-semibold text-emerald-700 dark:text-emerald-400">
           ↓ Cheapest: {data.cheapest.supplier_name} R{data.cheapest.last_cost}
         </div>
       )}
 
       {data.suppliers.length > 0 && (
         <Section title={`We buy this from (${data.suppliers.length})`}>
-          <ul className="space-y-0.5">
+          <ul className="space-y-1">
             {data.suppliers.map((s) => (
-              <li key={s.supplier_id} className="flex items-center justify-between gap-2">
+              <li key={s.supplier_id} className="flex items-center justify-between gap-2 rounded px-1.5 py-1 hover:bg-white/40">
                 <span className="font-medium">{s.supplier_name}</span>
-                <span className="tabular-nums text-emerald-700">R{s.last_cost}</span>
+                <span className="tabular-nums font-medium text-emerald-700 dark:text-emerald-400">R{s.last_cost}</span>
                 <span className="text-muted-foreground text-[10px]">{relTime(s.last_bought_at)} (×{s.times_bought})</span>
               </li>
             ))}
@@ -124,9 +126,9 @@ function DeterministicCard({
 
       {data.other_quotes.length > 0 && (
         <Section title={`Other quotes (${data.other_quotes.length})`}>
-          <ul className="space-y-0.5">
+          <ul className="space-y-1">
             {data.other_quotes.map((q) => (
-              <li key={q.quote_id} className="flex items-center justify-between gap-2">
+              <li key={q.quote_id} className="flex items-center justify-between gap-2 rounded px-1.5 py-1 hover:bg-white/40">
                 <span className="font-mono text-[11px]">{q.quote_number}</span>
                 <span className="tabular-nums">R{q.selling_price}</span>
                 <span className="text-muted-foreground text-[10px]">{q.status} · {q.days_ago}d</span>
@@ -159,21 +161,23 @@ function AiCard({ data, updatedAt }: { data: Record<string, unknown>; updatedAt:
   // a `summary` (or any *_summary / first long string) as the headline
   // and turns named arrays (top_historical_matches with
   // matched_description, etc.) into structured rows. We only wrap it
-  // here to keep the amber framing + freshness badge + Raw data
-  // fallback that operators expect.
+  // here to keep the warm warn-toned framing + freshness badge +
+  // Raw data fallback that operators expect.
   return (
-    <div className="rounded-lg border border-amber-200 bg-amber-50/40 p-2.5 space-y-2">
+    <div className="rounded-lg border border-warn/25 bg-gradient-to-b from-warn/10 to-warn/5 p-3 space-y-2.5 shadow-sm shadow-warn/5">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
-          <Info className="h-3.5 w-3.5 text-amber-700" />
-          <span className="text-xs font-semibold text-amber-700">AI snapshot</span>
+          <span className="inline-flex h-5 w-5 items-center justify-center rounded-md bg-warn/20">
+            <Info className="h-3 w-3 text-warn-foreground" />
+          </span>
+          <span className="text-xs font-semibold text-warn-foreground">AI snapshot</span>
         </div>
-        <FreshnessBadge label="snapshot" ts={updatedAt} variant="amber" />
+        <FreshnessBadge label="snapshot" ts={updatedAt} variant="warn" />
       </div>
       <AiInsightsCard insights={data} variant="popover" title="" className="border-0 bg-transparent p-0" />
-      <details className="text-[10px] text-muted-foreground">
-        <summary className="cursor-pointer">Raw AI data</summary>
-        <pre className="mt-1 max-h-32 overflow-auto rounded bg-muted/40 p-1 text-[10px]">
+      <details className="text-[10px] text-muted-foreground group">
+        <summary className="cursor-pointer hover:text-foreground transition-colors">Raw AI data</summary>
+        <pre className="mt-1.5 max-h-32 overflow-auto rounded-md bg-muted/60 p-2 text-[10px] ring-1 ring-inset ring-border/40">
           {JSON.stringify(data, null, 2)}
         </pre>
       </details>
diff --git a/src/components/order-sprint-process-modal.tsx b/src/components/order-sprint-process-modal.tsx
index bf77bdc..92d7b32 100644
--- a/src/components/order-sprint-process-modal.tsx
+++ b/src/components/order-sprint-process-modal.tsx
@@ -303,7 +303,7 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
       aria-modal="true"
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <Card className="w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl border-border/60">
+      <Card className="w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl border-2 border-warn/40 shadow-warn/15">
         <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 border-b bg-gradient-to-b from-muted/40 to-transparent">
           <div className="min-w-0 flex-1">
             <CardTitle className="text-sm flex items-center gap-2">