init

components/elevation-chart.tsx

@@ -31,7 +31,7 @@ export function ElevationChart({ data, syncId }: Props) {
   useEffect(() => setMounted(true), []);
 
   if (!mounted) {
-    return <div className="h-[140px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
+    return <div className="h-[140px] animate-pulse rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md" />;
   }
 
   const altitudes = data.map((p) => p.altM);
@@ -46,15 +46,15 @@ export function ElevationChart({ data, syncId }: Props) {
   const pacePad = Math.max(5, Math.round((maxPace - minPace) * 0.15));
 
   const tooltipStyle = {
-    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)",
   };
 
   return (
-    <div className="rounded-lg border border-muted/40 bg-surface p-4" style={{ minWidth: 0 }}>
+    <div className="rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4" style={{ minWidth: 0 }}>
       <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
         <span>Profil wysokości</span>
         {hasPace && (
@@ -73,7 +73,7 @@ export function ElevationChart({ data, syncId }: Props) {
               <stop offset="95%" stopColor="var(--color-accent)" 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)"