init

components/run-metric-chart.tsx

@@ -42,7 +42,7 @@ export function RunMetricChart({
   useEffect(() => setMounted(true), []);
 
   if (!mounted) {
-    return <div className="h-[160px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
+    return <div className="h-[160px] animate-pulse rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md" />;
   }
 
   const values = data.map((p) => p.value);
@@ -59,7 +59,7 @@ export function RunMetricChart({
   };
 
   return (
-    <div className="rounded-lg border border-muted/40 bg-surface p-4">
+    <div className="rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4">
       <div className="mb-2 text-sm text-fg/60">{label}</div>
       <ResponsiveContainer width="100%" height={120}>
         <AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
@@ -69,7 +69,7 @@ export function RunMetricChart({
               <stop offset="95%" stopColor={color} stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
+          <CartesianGrid stroke="rgba(255,255,255,0.08)" vertical={false} />
           <XAxis
             dataKey="distanceKm"
             stroke="var(--color-fg)"
@@ -89,9 +89,9 @@ export function RunMetricChart({
           />
           <Tooltip
             contentStyle={{
-              background: "var(--color-bg)",
-              border: "1px solid var(--color-muted)",
-              borderRadius: 8,
+              background: "color-mix(in oklab, var(--color-surface) 92%, transparent)",
+              border: "1px solid rgba(255,255,255,0.12)",
+              borderRadius: 12,
               fontSize: 12,
               color: "var(--color-fg)",
             }}