init

components/gcb-chart.tsx

@@ -25,11 +25,11 @@ export function GcbChart({ data, syncId }: Props) {
   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" />;
   }
 
   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 flex items-center gap-4 text-sm text-fg/60">
         <span>Balans kontaktu</span>
         <span className="flex items-center gap-1">
@@ -53,7 +53,7 @@ export function GcbChart({ data, syncId }: Props) {
               <stop offset="95%" stopColor="var(--color-sand)" 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)"
@@ -73,9 +73,9 @@ export function GcbChart({ data, syncId }: Props) {
           />
           <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)",
             }}