redesign

components/StatsPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
+import Panel from "@/components/Panel";
 
 interface StatItemProps {
     label: string;
@@ -16,7 +17,7 @@ function StatItem({ label, value }: StatItemProps) {
                 initial={{ opacity: 0.4 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.15 }}
-                className="text-2xl font-mono tabular-nums text-primary"
+                className="text-2xl font-mono tabular-nums font-semibold text-foreground"
             >
                 {value}
             </motion.span>
@@ -40,7 +41,7 @@ export default function StatsPanel({
     title, comparisons, writes, stepLabel, stepIndex, stepCount, sortedLabel, sortedCount, total,
 }: StatsPanelProps) {
     return (
-        <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-5">
+        <Panel>
             <p className="text-xs uppercase tracking-widest text-muted-foreground mb-3">{title}</p>
             <div className="grid grid-cols-2 gap-4">
                 <StatItem label="Comparisons" value={comparisons} />
@@ -48,6 +49,6 @@ export default function StatsPanel({
                 <StatItem label={stepLabel} value={`${stepIndex} / ${stepCount}`} />
                 <StatItem label={sortedLabel} value={`${sortedCount} / ${total}`} />
             </div>
-        </div>
+        </Panel>
     );
 }