redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/components/GoalProgressCard.tsx

@@ -122,15 +122,17 @@ export function GoalProgressCard({
 
   return (
     <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
         <MinimalCard
-          variant="bordered"
+          variant="elevated"
           style={[
             styles.card,
             isCompleted && {
-              backgroundColor: colors.overlayLight,
+              backgroundColor: colors.surfaceElevated,
+              opacity: 0.8,
             },
           ]}
+          padding={20}
         >
           {/* Header */}
           <View style={styles.header}>
@@ -289,13 +291,14 @@ export function GoalProgressCard({
 
 const styles = StyleSheet.create({
   card: {
-    marginBottom: 12,
+    marginBottom: 16,
+    borderRadius: 20,
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "flex-start",
-    marginBottom: 12,
+    marginBottom: 16,
   },
   titleRow: {
     flexDirection: "row",
@@ -304,23 +307,23 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
-    marginLeft: 12,
+    marginLeft: 14,
   },
   actions: {
     flexDirection: "row",
-    gap: 8,
+    gap: 12,
   },
   actionButton: {
-    padding: 4,
+    padding: 6,
   },
   progressSection: {
-    marginBottom: 12,
+    marginBottom: 16,
   },
   progressInfo: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 8,
+    marginBottom: 10,
   },
   footer: {
     flexDirection: "row",