Update

CLAUDE.md

@@ -96,9 +96,52 @@ Edge functions in `apps/supabase/functions/` handle complex operations:
 - `revenuecat-webhook` - Subscription webhook handler
 - `sync-subscription` - Syncs RevenueCat subscription status
 
+#### Edge Function Deployment Guidelines
+When deploying edge functions via MCP tools (`mcp__sauci-*__deploy_edge_function`):
+
+**IMPORTANT: Always use `verify_jwt: false`** for all edge functions. Supabase's built-in JWT verification causes 401 errors even with valid tokens. Instead, handle authentication manually in the function code using:
+```typescript
+const { data: { user }, error: authError } = await supabase.auth.getUser(
+    authHeader.replace("Bearer ", "")
+);
+```
+
+This approach:
+- Gives better error messages
+- Allows custom auth handling
+- Avoids mysterious 401 failures
+
+**Current function settings (all should be verify_jwt: false):**
+| Function | verify_jwt | Auth Method |
+|----------|------------|-------------|
+| `manage-couple` | false | Manual via getUser() |
+| `submit-response` | false | Manual via getUser() |
+| `sync-subscription` | false | Manual via getUser() |
+| `delete-relationship` | false | Manual via getUser() |
+| `revenuecat-webhook` | false | Webhook signature validation |
+| `send-notification` | false | Internal trigger (no auth) |
+| `send-message-notification` | false | Internal trigger (no auth) |
+
+### Database Best Practices
+- **Always use `.maybeSingle()` instead of `.single()`** when the row might not exist. `.single()` throws an error if 0 or >1 rows are returned.
+- **Profile creation trigger**: The `on_auth_user_created` trigger automatically creates a profile when a user signs up. Never assume a profile exists without checking.
+- **Check for null profiles** in edge functions before performing operations.
+
 ### Key Patterns
 - Responses use UPSERT with `onConflict: "user_id,question_id"`
 - Match detection happens in `submit-response` edge function after each response
 - Real-time subscriptions used for chat messages
 - RevenueCat handles in-app purchases and subscription management
 - RLS policies enforce couple-level data isolation
+
+## Mobile UI - DO NOT CHANGE
+
+### Tab Bar Background
+**NEVER set `backgroundColor: 'transparent'` on the tab bar.** Always use a semi-transparent solid color:
+```typescript
+backgroundColor: 'rgba(18, 18, 18, 0.85)',
+```
+
+The `BlurView` in `tabBarBackground` is unreliable and can fail during re-renders/transitions, causing a fully transparent tab bar. The solid rgba background acts as a fallback while still allowing the blur effect on top.
+
+**Location:** `apps/mobile/app/(app)/_layout.tsx` - `tabBarStyle`

apps/mobile/app/(app)/_layout.tsx

@@ -19,13 +19,21 @@ function TabBarBackground() {
     if (Platform.OS === 'ios') {
         return (
             <BlurView
-                intensity={80}
-                tint="systemChromeMaterialDark"
+                intensity={100}
+                tint="dark"
                 style={StyleSheet.absoluteFill}
             />
         );
     }
-    return <View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(22, 33, 62, 0.95)' }]} />;
+    // Android fallback - use experimental blur method
+    return (
+        <BlurView
+            intensity={80}
+            tint="dark"
+            style={StyleSheet.absoluteFill}
+            experimentalBlurMethod="dimezisBlurView"
+        />
+    );
 }
 
 interface PlayTabButtonProps {
@@ -191,6 +199,37 @@ export default function AppLayout() {
         }
     }, [user?.id, user?.onboarding_completed]);
 
+    // Subscribe to realtime changes on the current user's profile
+    // This detects when partner disconnects (sets our couple_id to NULL)
+    useEffect(() => {
+        if (!user?.id) return;
+
+        const channel = supabase
+            .channel(`profile:${user.id}`)
+            .on(
+                "postgres_changes",
+                {
+                    event: "UPDATE",
+                    schema: "public",
+                    table: "profiles",
+                    filter: `id=eq.${user.id}`,
+                },
+                async (payload) => {
+                    const newProfile = payload.new as { couple_id: string | null };
+                    // If couple_id changed (especially to NULL when partner disconnects)
+                    if (newProfile.couple_id !== user.couple_id) {
+                        console.log("Profile couple_id changed, refreshing user data...");
+                        await useAuthStore.getState().fetchUser();
+                    }
+                }
+            )
+            .subscribe();
+
+        return () => {
+            supabase.removeChannel(channel);
+        };
+    }, [user?.id, user?.couple_id]);
+
     // Subscribe to realtime match notifications
     useEffect(() => {
         if (!user?.couple_id) return;
@@ -373,7 +412,7 @@ export default function AppLayout() {
                     tabBarBackground: () => <TabBarBackground />,
                     tabBarStyle: shouldHideTabBar ? { display: 'none' } : {
                         position: 'absolute',
-                        backgroundColor: 'transparent',
+                        backgroundColor: 'rgba(18, 18, 18, 0.85)',
                         borderTopColor: colors.glass.border,
                         borderTopWidth: 1,
                         paddingTop: 8,

apps/mobile/app/(app)/onboarding.tsx

@@ -94,7 +94,9 @@ export default function OnboardingScreen() {
     };
 
     const handleComplete = async () => {
+        console.log('[Onboarding] handleComplete called, user:', user?.id, 'name:', name);
         if (!user?.id) {
+            console.error('[Onboarding] No user ID available');
             setError('Not logged in. Please restart the app.');
             return;
         }
@@ -115,10 +117,13 @@ export default function OnboardingScreen() {
                 .eq('id', user.id);
 
             if (updateError) {
+                console.error('[Onboarding] Profile update error:', updateError);
                 throw updateError;
             }
 
+            console.log('[Onboarding] Profile updated successfully, fetching user...');
             await fetchUser();
+            console.log('[Onboarding] User fetched, navigating to home...');
             router.replace('/');
         } catch (err: any) {
             console.error('Onboarding error:', err);
@@ -401,6 +406,12 @@ export default function OnboardingScreen() {
                                     </Text>
                                 </View>
                             </View>
+                            {error && (
+                                <View style={styles.errorContainer}>
+                                    <Ionicons name="alert-circle" size={16} color={colors.error} />
+                                    <Text style={styles.errorText}>{error}</Text>
+                                </View>
+                            )}
                         </GlassCard>
 
                         <View style={styles.footer}>

apps/mobile/app/(app)/pairing.tsx

@@ -3,22 +3,26 @@ import {
     View,
     Text,
     TextInput,
-    TouchableOpacity,
     StyleSheet,
     Alert,
     ActivityIndicator,
     Share,
     KeyboardAvoidingView,
     Platform,
+    TouchableOpacity,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
+import Animated, { FadeInDown } from "react-native-reanimated";
 import * as Clipboard from "expo-clipboard";
 import { useAuthStore } from "../../src/store";
 import { supabase } from "../../src/lib/supabase";
 import { router } from "expo-router";
+import { GradientBackground, GlassCard, GlassButton } from "../../src/components/ui";
+import { colors, gradients, spacing, radius, typography, shadows } from "../../src/theme";
 
 export default function PairingScreen() {
-    const { user, fetchCouple, fetchUser, couple, partner, isLoading: isAuthLoading, signOut } = useAuthStore();
+    const { user, fetchCouple, fetchUser, couple, partner, isLoading: isAuthLoading } = useAuthStore();
     const [inviteCode, setInviteCode] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -105,13 +109,17 @@ export default function PairingScreen() {
                 body: { invite_code: sanitizedCode },
             });
 
-            if (error) throw error;
-            if (data.error) throw new Error(data.error);
+            if (error) {
+                // Extract user-friendly error message
+                const errorMessage = data?.error || "Unable to join couple. Please try again.";
+                throw new Error(errorMessage);
+            }
+            if (data?.error) throw new Error(data.error);
 
             await fetchUser(); // Refresh user to get couple_id
             await fetchCouple(); // Fetch couple data
 
-            Alert.alert("Success", "You are now paired! 💕", [
+            Alert.alert("Success", "You are now paired!", [
                 { text: "Let's Go", onPress: () => router.replace("/(app)/") }
             ]);
         } catch (error: any) {
@@ -140,16 +148,33 @@ export default function PairingScreen() {
         }
     };
 
-    const handleSignOut = () => {
+    const handleCancelPairing = async () => {
         Alert.alert(
-            "Sign Out",
-            "Are you sure you want to sign out?",
+            "Cancel Pairing",
+            "Are you sure you want to cancel? Your invite code will be deleted.",
             [
-                { text: "Cancel", style: "cancel" },
+                { text: "Keep Waiting", style: "cancel" },
                 {
-                    text: "Sign Out",
+                    text: "Cancel Pairing",
                     style: "destructive",
-                    onPress: signOut,
+                    onPress: async () => {
+                        setIsSubmitting(true);
+                        try {
+                            const { data, error } = await supabase.functions.invoke("manage-couple", {
+                                method: "DELETE",
+                            });
+
+                            if (error) throw error;
+                            if (data?.error) throw new Error(data.error);
+
+                            await fetchUser();
+                            await fetchCouple();
+                        } catch (error: any) {
+                            Alert.alert("Error", error.message);
+                        } finally {
+                            setIsSubmitting(false);
+                        }
+                    },
                 },
             ]
         );
@@ -157,273 +182,360 @@ export default function PairingScreen() {
 
     if (isAuthLoading) {
         return (
-            <View style={[styles.container, styles.centerContent]}>
-                <ActivityIndicator size="large" color="#e94560" />
-            </View>
+            <GradientBackground>
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color={colors.primary} />
+                </View>
+            </GradientBackground>
         );
     }
 
     // If user has a couple but no partner, they are waiting
     if (couple && !partner) {
         return (
-            <View style={styles.container}>
-                <TouchableOpacity
-                    style={styles.backButton}
-                    onPress={() => router.back()}
-                >
-                    <Ionicons name="arrow-back" size={24} color="#fff" />
-                </TouchableOpacity>
-                <View style={styles.content}>
-                    <View style={styles.iconContainer}>
-                        <Ionicons name="heart" size={48} color="#e94560" />
+            <GradientBackground>
+                <View style={styles.container}>
+                    {/* Header */}
+                    <Animated.View
+                        entering={FadeInDown.delay(100).duration(500)}
+                        style={styles.header}
+                    >
+                        <TouchableOpacity
+                            style={styles.backButton}
+                            onPress={() => router.back()}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="arrow-back" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={styles.title}>Partner Code</Text>
+                    </Animated.View>
+
+                    <View style={styles.content}>
+                        {/* Icon */}
+                        <Animated.View
+                            entering={FadeInDown.delay(200).duration(500)}
+                            style={styles.iconSection}
+                        >
+                            <LinearGradient
+                                colors={gradients.primary as [string, string]}
+                                style={styles.iconGradient}
+                                start={{ x: 0, y: 0 }}
+                                end={{ x: 1, y: 1 }}
+                            >
+                                <Ionicons name="heart" size={40} color={colors.text} />
+                            </LinearGradient>
+                            <Text style={styles.subtitle}>
+                                Share this code with your partner to link your accounts
+                            </Text>
+                        </Animated.View>
+
+                        {/* Code Card */}
+                        <Animated.View
+                            entering={FadeInDown.delay(300).duration(500)}
+                            style={styles.section}
+                        >
+                            <GlassCard variant="elevated">
+                                <TouchableOpacity
+                                    style={styles.codeContainer}
+                                    onPress={copyToClipboard}
+                                    activeOpacity={0.7}
+                                >
+                                    <Text style={styles.code}>{couple.invite_code.toUpperCase()}</Text>
+                                    <View style={styles.copyIcon}>
+                                        <Ionicons name="copy-outline" size={20} color={colors.textSecondary} />
+                                    </View>
+                                </TouchableOpacity>
+                                <Text style={styles.tapToCopy}>Tap to copy</Text>
+                            </GlassCard>
+                        </Animated.View>
+
+                        {/* Share Button */}
+                        <Animated.View
+                            entering={FadeInDown.delay(400).duration(500)}
+                            style={styles.section}
+                        >
+                            <GlassButton
+                                onPress={shareCode}
+                                fullWidth
+                                icon={<Ionicons name="share-outline" size={20} color={colors.text} />}
+                            >
+                                Share Code
+                            </GlassButton>
+                        </Animated.View>
+
+                        {/* Waiting indicator */}
+                        <Animated.View
+                            entering={FadeInDown.delay(500).duration(500)}
+                            style={styles.waitingSection}
+                        >
+                            <View style={styles.waitingBadge}>
+                                <ActivityIndicator size="small" color={colors.primary} />
+                                <Text style={styles.waitingText}>Waiting for your partner to join...</Text>
+                            </View>
+                        </Animated.View>
+
+                        {/* Cancel Button */}
+                        <Animated.View
+                            entering={FadeInDown.delay(600).duration(500)}
+                            style={styles.cancelSection}
+                        >
+                            <TouchableOpacity
+                                onPress={handleCancelPairing}
+                                disabled={isSubmitting}
+                                style={styles.cancelButton}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel Pairing</Text>
+                            </TouchableOpacity>
+                        </Animated.View>
                     </View>
-                    <Text style={styles.title}>Partner Code</Text>
-                    <Text style={styles.subtitle}>
-                        Share this code with your partner to link your accounts
-                    </Text>
-
-                    <TouchableOpacity style={styles.codeContainer} onPress={copyToClipboard}>
-                        <Text style={styles.code}>{couple.invite_code.toUpperCase()}</Text>
-                        <Ionicons name="copy-outline" size={24} color="#666" />
-                    </TouchableOpacity>
-
-                    <TouchableOpacity style={styles.shareButton} onPress={shareCode}>
-                        <Ionicons name="share-outline" size={24} color="#fff" style={{ marginRight: 8 }} />
-                        <Text style={styles.buttonText}>Share Code</Text>
-                    </TouchableOpacity>
-
-                    <Text style={styles.waitingText}>
-                        Waiting for your partner to join...
-                    </Text>
-                    <ActivityIndicator size="small" color="#e94560" style={{ marginTop: 16 }} />
                 </View>
-            </View>
+            </GradientBackground>
         );
     }
 
     return (
-        <KeyboardAvoidingView
-            style={styles.container}
-            behavior={Platform.OS === "ios" ? "padding" : "height"}
-        >
-            <TouchableOpacity
-                style={styles.backButton}
-                onPress={() => router.back()}
+        <GradientBackground>
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
             >
-                <Ionicons name="arrow-back" size={24} color="#fff" />
-            </TouchableOpacity>
-            <View style={styles.content}>
-                <Text style={styles.emoji}>🔗</Text>
-                <Text style={styles.title}>Pair Up</Text>
-                <Text style={styles.subtitle}>
-                    Link with your partner to start matching
-                </Text>
-
-                <View style={styles.card}>
-                    <Text style={styles.cardTitle}>Have a code?</Text>
-                    <TextInput
-                        style={styles.input}
-                        placeholder="Enter invite code"
-                        placeholderTextColor="#666"
-                        value={inviteCode}
-                        onChangeText={setInviteCode}
-                        autoCapitalize="characters"
-                        maxLength={8}
-                    />
-                    <TouchableOpacity
-                        style={[styles.button, isSubmitting && styles.buttonDisabled]}
-                        onPress={handleJoinCouple}
-                        disabled={isSubmitting}
-                    >
-                        <Text style={styles.buttonText}>
-                            {isSubmitting ? "Joining..." : "Join Partner"}
-                        </Text>
-                    </TouchableOpacity>
-                </View>
-
-                <View style={styles.divider}>
-                    <View style={styles.dividerLine} />
-                    <Text style={styles.dividerText}>or</Text>
-                    <View style={styles.dividerLine} />
-                </View>
-
-                <TouchableOpacity
-                    style={styles.secondaryButton}
-                    onPress={handleCreateCouple}
-                    disabled={isSubmitting}
+                {/* Header */}
+                <Animated.View
+                    entering={FadeInDown.delay(100).duration(500)}
+                    style={styles.header}
                 >
-                    <Text style={styles.secondaryButtonText}>
-                        {isSubmitting ? "Creating..." : "Create New Code"}
-                    </Text>
-                </TouchableOpacity>
+                    <TouchableOpacity
+                        style={styles.backButton}
+                        onPress={() => router.back()}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="arrow-back" size={24} color={colors.text} />
+                    </TouchableOpacity>
+                    <Text style={styles.title}>Pair Up</Text>
+                </Animated.View>
 
-                <TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
-                    <Ionicons name="log-out-outline" size={20} color="#888" />
-                    <Text style={styles.signOutText}>Sign Out</Text>
-                </TouchableOpacity>
-            </View>
-        </KeyboardAvoidingView>
+                <View style={styles.content}>
+                    {/* Icon */}
+                    <Animated.View
+                        entering={FadeInDown.delay(200).duration(500)}
+                        style={styles.iconSection}
+                    >
+                        <LinearGradient
+                            colors={gradients.primary as [string, string]}
+                            style={styles.iconGradient}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            <Ionicons name="link" size={40} color={colors.text} />
+                        </LinearGradient>
+                        <Text style={styles.subtitle}>
+                            Link with your partner to start matching
+                        </Text>
+                    </Animated.View>
+
+                    {/* Join Card */}
+                    <Animated.View
+                        entering={FadeInDown.delay(300).duration(500)}
+                        style={styles.section}
+                    >
+                        <Text style={styles.sectionTitle}>Have a code?</Text>
+                        <GlassCard>
+                            <TextInput
+                                style={styles.input}
+                                placeholder="Enter invite code"
+                                placeholderTextColor={colors.textTertiary}
+                                value={inviteCode}
+                                onChangeText={setInviteCode}
+                                autoCapitalize="characters"
+                                maxLength={8}
+                            />
+                            <GlassButton
+                                onPress={handleJoinCouple}
+                                disabled={isSubmitting}
+                                loading={isSubmitting}
+                                fullWidth
+                            >
+                                Join Partner
+                            </GlassButton>
+                        </GlassCard>
+                    </Animated.View>
+
+                    {/* Divider */}
+                    <Animated.View
+                        entering={FadeInDown.delay(400).duration(500)}
+                        style={styles.divider}
+                    >
+                        <View style={styles.dividerLine} />
+                        <Text style={styles.dividerText}>or</Text>
+                        <View style={styles.dividerLine} />
+                    </Animated.View>
+
+                    {/* Create Code Button */}
+                    <Animated.View
+                        entering={FadeInDown.delay(500).duration(500)}
+                        style={styles.section}
+                    >
+                        <GlassButton
+                            variant="secondary"
+                            onPress={handleCreateCouple}
+                            disabled={isSubmitting}
+                            fullWidth
+                        >
+                            Create New Code
+                        </GlassButton>
+                    </Animated.View>
+                </View>
+            </KeyboardAvoidingView>
+        </GradientBackground>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: "#1a1a2e",
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    header: {
+        paddingTop: Platform.OS === "ios" ? 60 : 40,
+        paddingHorizontal: spacing.lg,
+        paddingBottom: spacing.lg,
+        flexDirection: "row",
+        alignItems: "center",
     },
     backButton: {
-        position: "absolute",
-        top: Platform.OS === "ios" ? 60 : 40,
-        left: 20,
-        zIndex: 10,
         width: 44,
         height: 44,
         borderRadius: 22,
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        backgroundColor: colors.glass.background,
         justifyContent: "center",
         alignItems: "center",
+        marginRight: spacing.md,
     },
-    centerContent: {
-        justifyContent: "center",
-        alignItems: "center",
+    title: {
+        ...typography.title1,
+        color: colors.text,
     },
     content: {
         flex: 1,
-        padding: 24,
+        paddingHorizontal: spacing.lg,
+        justifyContent: "center",
+    },
+    iconSection: {
+        alignItems: "center",
+        marginBottom: spacing.xl,
+    },
+    iconGradient: {
+        width: 88,
+        height: 88,
+        borderRadius: 44,
         justifyContent: "center",
         alignItems: "center",
-    },
-    emoji: {
-        fontSize: 64,
-        marginBottom: 16,
-    },
-    title: {
-        fontSize: 32,
-        fontWeight: "bold",
-        color: "#fff",
-        marginBottom: 8,
+        marginBottom: spacing.lg,
+        ...shadows.lg,
     },
     subtitle: {
-        fontSize: 16,
-        color: "#888",
-        marginBottom: 48,
+        ...typography.body,
+        color: colors.textSecondary,
         textAlign: "center",
+        maxWidth: 280,
     },
-    card: {
-        width: "100%",
-        backgroundColor: "#16213e",
-        borderRadius: 16,
-        padding: 24,
-        borderWidth: 1,
-        borderColor: "#0f3460",
+    section: {
+        marginBottom: spacing.md,
     },
-    cardTitle: {
-        fontSize: 18,
-        fontWeight: "600",
-        color: "#fff",
-        marginBottom: 16,
+    sectionTitle: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        textTransform: "uppercase",
+        letterSpacing: 1.5,
+        marginBottom: spacing.sm,
+        marginLeft: spacing.xs,
     },
     input: {
-        backgroundColor: "#1a1a2e",
-        borderRadius: 12,
-        padding: 16,
-        fontSize: 18,
-        color: "#fff",
-        marginBottom: 16,
+        backgroundColor: colors.glass.background,
+        borderRadius: radius.md,
         borderWidth: 1,
-        borderColor: "#0f3460",
+        borderColor: colors.glass.border,
+        padding: spacing.md,
+        ...typography.headline,
+        color: colors.text,
         textAlign: "center",
-        letterSpacing: 2,
+        letterSpacing: 4,
         fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
-    },
-    button: {
-        backgroundColor: "#e94560",
-        borderRadius: 12,
-        padding: 16,
-        alignItems: "center",
-    },
-    buttonDisabled: {
-        opacity: 0.7,
-    },
-    buttonText: {
-        color: "#fff",
-        fontSize: 16,
-        fontWeight: "600",
+        marginBottom: spacing.md,
     },
     divider: {
         flexDirection: "row",
         alignItems: "center",
-        marginVertical: 32,
-        width: "100%",
+        marginVertical: spacing.lg,
     },
     dividerLine: {
         flex: 1,
         height: 1,
-        backgroundColor: "#333",
+        backgroundColor: colors.glass.border,
     },
     dividerText: {
-        color: "#666",
-        paddingHorizontal: 16,
-    },
-    secondaryButton: {
-        padding: 16,
-    },
-    secondaryButtonText: {
-        color: "#e94560",
-        fontSize: 16,
-        fontWeight: "600",
-    },
-    iconContainer: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        backgroundColor: "rgba(233, 69, 96, 0.1)",
-        justifyContent: "center",
-        alignItems: "center",
-        marginBottom: 24,
+        ...typography.subhead,
+        color: colors.textTertiary,
+        paddingHorizontal: spacing.md,
     },
     codeContainer: {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: "#16213e",
-        padding: 20,
-        borderRadius: 16,
-        marginTop: 32,
-        marginBottom: 24,
-        borderWidth: 1,
-        borderColor: "#e94560",
-        borderStyle: "dashed",
+        justifyContent: "center",
     },
     code: {
-        fontSize: 32,
-        fontWeight: "bold",
-        color: "#fff",
-        letterSpacing: 4,
-        marginRight: 16,
+        ...typography.largeTitle,
+        color: colors.text,
+        letterSpacing: 6,
         fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
     },
-    shareButton: {
-        flexDirection: "row",
-        backgroundColor: "#e94560",
-        paddingHorizontal: 32,
-        paddingVertical: 16,
-        borderRadius: 12,
+    copyIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.glass.background,
+        justifyContent: "center",
         alignItems: "center",
+        marginLeft: spacing.md,
+    },
+    tapToCopy: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        textAlign: "center",
+        marginTop: spacing.sm,
+    },
+    waitingSection: {
+        alignItems: "center",
+        marginTop: spacing.xl,
+    },
+    waitingBadge: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: colors.glass.background,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.full,
+        gap: spacing.sm,
     },
     waitingText: {
-        marginTop: 48,
-        color: "#666",
-        fontSize: 14,
+        ...typography.subhead,
+        color: colors.textTertiary,
     },
-    signOutButton: {
-        flexDirection: "row",
+    cancelSection: {
         alignItems: "center",
-        marginTop: 48,
-        padding: 12,
+        marginTop: spacing.xl,
     },
-    signOutText: {
-        color: "#888",
-        fontSize: 16,
-        marginLeft: 8,
+    cancelButton: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+    },
+    cancelButtonText: {
+        ...typography.subhead,
+        color: colors.error,
     },
 });

apps/mobile/app/(auth)/login.tsx

@@ -9,7 +9,7 @@ import {
     Platform,
     ScrollView,
 } from "react-native";
-import { Redirect } from "expo-router";
+import { Redirect, router } from "expo-router";
 import * as Linking from "expo-linking";
 import Animated, {
     FadeIn,
@@ -472,14 +472,26 @@ export default function LoginScreen() {
                                     />
 
                                     {authMode === "password" && (
-                                        <GlassInput
-                                            placeholder="Enter your password"
-                                            value={password}
-                                            onChangeText={(text) => { clearError(); setPassword(text); }}
-                                            secureTextEntry
-                                            autoCapitalize="none"
-                                            icon={<Ionicons name="lock-closed-outline" size={20} color={colors.textTertiary} />}
-                                        />
+                                        <>
+                                            <GlassInput
+                                                placeholder="Enter your password"
+                                                value={password}
+                                                onChangeText={(text) => { clearError(); setPassword(text); }}
+                                                secureTextEntry
+                                                autoCapitalize="none"
+                                                icon={<Ionicons name="lock-closed-outline" size={20} color={colors.textTertiary} />}
+                                            />
+                                            {!isSignUp && (
+                                                <TouchableOpacity
+                                                    style={styles.forgotPassword}
+                                                    onPress={() => router.push("/(auth)/forgot-password")}
+                                                >
+                                                    <Text style={styles.forgotPasswordText}>
+                                                        Forgot password?
+                                                    </Text>
+                                                </TouchableOpacity>
+                                            )}
+                                        </>
                                     )}
 
                                     {authMode === "magic-link" ? (
@@ -673,6 +685,15 @@ const styles = StyleSheet.create({
         ...typography.subhead,
         color: colors.primary,
     },
+    forgotPassword: {
+        alignSelf: "flex-end",
+        marginTop: -spacing.xs,
+        marginBottom: spacing.xs,
+    },
+    forgotPasswordText: {
+        ...typography.subhead,
+        color: colors.primary,
+    },
     socialContainer: {
         marginTop: spacing.md,
     },

apps/mobile/app/_layout.tsx

@@ -29,7 +29,7 @@ if (Platform.OS === "web" && typeof window === "undefined") {
     };
 }
 
-import { Stack } from "expo-router";
+import { Stack, router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 // GestureHandlerRootView is only needed on native platforms
 // On web, we use a simple View to avoid findNodeHandle errors
@@ -103,6 +103,12 @@ export default function RootLayout() {
                         type: type as 'signup' | 'magiclink' | 'recovery' | 'invite' | 'email',
                     });
                     console.log('[DeepLink] verifyOtp result:', { data: !!data?.session, error: error?.message });
+
+                    // If this is a password recovery flow, navigate to reset password screen
+                    if (type === 'recovery' && data?.session && !error) {
+                        console.log('[DeepLink] Password recovery flow - navigating to reset-password');
+                        router.replace("/(auth)/reset-password");
+                    }
                 } else {
                     // Fallback for web or other scenarios
                     console.log('[DeepLink] No auth params found, falling back to getSession');

apps/mobile/app/index.tsx

@@ -19,6 +19,11 @@ export default function Index() {
         return <Redirect href="/(auth)/login" />;
     }
 
+    // If user hasn't completed onboarding, go to onboarding first
+    if (!user?.onboarding_completed) {
+        return <Redirect href="/(app)/onboarding" />;
+    }
+
     // If user has no couple, go to pairing
     if (!user?.couple_id) {
         return <Redirect href="/(app)/pairing" />;

apps/supabase/email-templates/confirmation.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <title>Confirm Your Email - Sauci</title>
   <!--[if mso]>
   <noscript>
@@ -13,107 +15,192 @@
       </o:OfficeDocumentSettings>
     </xml>
   </noscript>
+  <style>
+    table { border-collapse: collapse; }
+    td { font-family: Arial, sans-serif; }
+  </style>
   <![endif]-->
+  <style>
+    body { margin: 0 !important; padding: 0 !important; }
+    table { border-spacing: 0 !important; border-collapse: collapse !important; }
+    td { padding: 0; }
+    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
+    a { text-decoration: none; }
+    @media only screen and (max-width: 600px) {
+      .email-container { width: 100% !important; }
+      .content-padding { padding-left: 20px !important; padding-right: 20px !important; }
+    }
+  </style>
 </head>
-<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
+<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #0d0d1a;">
+  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #0d0d1a;">
+    <!--[if mso]>
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#0d0d1a">
     <tr>
-      <td align="center" style="padding: 40px 20px;">
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
+    <td align="center">
+    <![endif]-->
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;" bgcolor="#0d0d1a">
+      <tr>
+        <td align="center" valign="top" bgcolor="#0d0d1a" style="background-color: #0d0d1a;">
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" class="email-container" style="margin: 0 auto;">
 
-          <!-- Logo Section -->
-          <tr>
-            <td align="center" style="padding-bottom: 32px;">
-              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                Sauci
-              </div>
-            </td>
-          </tr>
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
 
-          <!-- Main Card -->
-          <tr>
-            <td>
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
-
-                <!-- Top Gradient Accent -->
+            <!-- Logo Section -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 0 20px 24px 20px;">
+                <!--[if mso]>
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#e94560">
                 <tr>
-                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
+                <td align="center" style="padding: 16px 40px; background-color: #e94560;">
+                <![endif]-->
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
+                  <tr>
+                    <td align="center" bgcolor="#e94560" style="background-color: #e94560; padding: 16px 60px; border-radius: 8px;">
+                      <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Sauci</span>
+                    </td>
+                  </tr>
+                </table>
+                <!--[if mso]>
+                </td>
                 </tr>
+                </table>
+                <![endif]-->
+              </td>
+            </tr>
 
-                <!-- Card Content -->
-                <tr>
-                  <td style="padding: 40px 32px;">
+            <!-- Main Card -->
+            <tr>
+              <td class="content-padding" style="padding: 0 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#1a1a2e" style="background-color: #1a1a2e; border-radius: 16px;">
 
-                    <!-- Icon -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 24px;">
-                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
-                            &#128140;
-                          </div>
-                        </td>
-                      </tr>
-                    </table>
+                  <!-- Top Accent Bar -->
+                  <tr>
+                    <td height="4" bgcolor="#e94560" style="background-color: #e94560; font-size: 0; line-height: 0;">&nbsp;</td>
+                  </tr>
 
-                    <!-- Heading -->
-                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
-                      Welcome to Sauci
-                    </h1>
+                  <!-- Card Content -->
+                  <tr>
+                    <td style="padding: 40px 32px;" bgcolor="#1a1a2e">
 
-                    <!-- Subtext -->
-                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
-                      You're one step away from deepening your connection. Confirm your email to start your journey together.
-                    </p>
+                      <!-- Icon -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                              <tr>
+                                <td align="center" valign="middle" width="56" height="56" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 28px; font-size: 24px;">
+                                  &#128140;
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- CTA Button -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 32px;">
-                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
-                            Confirm Email
-                          </a>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Heading -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 16px;">
+                            <h1 style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 1.3;">
+                              Welcome to Sauci
+                            </h1>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Divider -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td style="padding-bottom: 24px;">
-                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Subtext -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; color: #9999aa; text-align: center; line-height: 1.6;">
+                              You're one step away from deepening your connection. Confirm your email to start your journey together.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Alternative Link -->
-                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
-                      If the button doesn't work, copy and paste this link into your browser:
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
-                      {{ .ConfirmationURL }}
-                    </p>
+                      <!-- CTA Button -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <!--[if mso]>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ .ConfirmationURL }}" style="height:48px;v-text-anchor:middle;width:180px;" arcsize="25%" strokecolor="#e94560" fillcolor="#e94560">
+                            <w:anchorlock/>
+                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Confirm Email</center>
+                            </v:roundrect>
+                            <![endif]-->
+                            <!--[if !mso]><!-->
+                            <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background-color: #e94560; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none;">
+                              Confirm Email
+                            </a>
+                            <!--<![endif]-->
+                          </td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
+                      <!-- Divider -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td height="1" bgcolor="#333344" style="background-color: #333344; font-size: 0; line-height: 0;">&nbsp;</td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-          <!-- Footer -->
-          <tr>
-            <td style="padding: 32px 16px;">
-              <p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
-                This link will expire in 24 hours.
-              </p>
-              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
-                If you didn't create an account, you can safely ignore this email.
-              </p>
-            </td>
-          </tr>
+                      <!-- Alternative Link -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center">
+                            <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center; line-height: 1.6;">
+                              If the button doesn't work, copy and paste this link into your browser:
+                            </p>
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; text-align: center; word-break: break-all; line-height: 1.5;">
+                              <a href="{{ .ConfirmationURL }}" style="color: #e94560; text-decoration: underline;">{{ .ConfirmationURL }}</a>
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-        </table>
-      </td>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+
+            <!-- Footer -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 32px 20px;">
+                <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center;">
+                  This link will expire in 24 hours.
+                </p>
+                <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; color: #555566; text-align: center;">
+                  If you didn't create an account, you can safely ignore this email.
+                </p>
+              </td>
+            </tr>
+
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
+
+          </table>
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+    </td>
     </tr>
-  </table>
+    </table>
+    <![endif]-->
+  </div>
 </body>
 </html>

apps/supabase/email-templates/email-change.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <title>Confirm Email Change - Sauci</title>
   <!--[if mso]>
   <noscript>
@@ -13,118 +15,193 @@
       </o:OfficeDocumentSettings>
     </xml>
   </noscript>
+  <style>
+    table { border-collapse: collapse; }
+    td { font-family: Arial, sans-serif; }
+  </style>
   <![endif]-->
+  <style>
+    body { margin: 0 !important; padding: 0 !important; }
+    table { border-spacing: 0 !important; border-collapse: collapse !important; }
+    td { padding: 0; }
+    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
+    a { text-decoration: none; }
+    @media only screen and (max-width: 600px) {
+      .email-container { width: 100% !important; }
+      .content-padding { padding-left: 20px !important; padding-right: 20px !important; }
+    }
+  </style>
 </head>
-<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
+<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #0d0d1a;">
+  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #0d0d1a;">
+    <!--[if mso]>
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#0d0d1a">
     <tr>
-      <td align="center" style="padding: 40px 20px;">
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
+    <td align="center">
+    <![endif]-->
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;" bgcolor="#0d0d1a">
+      <tr>
+        <td align="center" valign="top" bgcolor="#0d0d1a" style="background-color: #0d0d1a;">
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" class="email-container" style="margin: 0 auto;">
 
-          <!-- Logo Section -->
-          <tr>
-            <td align="center" style="padding-bottom: 32px;">
-              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                Sauci
-              </div>
-            </td>
-          </tr>
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
 
-          <!-- Main Card -->
-          <tr>
-            <td>
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
+            <!-- Logo Section -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 0 20px 24px 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
+                  <tr>
+                    <td align="center" bgcolor="#e94560" style="background-color: #e94560; padding: 16px 60px; border-radius: 8px;">
+                      <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Sauci</span>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-                <!-- Top Gradient Accent -->
-                <tr>
-                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
-                </tr>
+            <!-- Main Card -->
+            <tr>
+              <td class="content-padding" style="padding: 0 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#1a1a2e" style="background-color: #1a1a2e; border-radius: 16px;">
 
-                <!-- Card Content -->
-                <tr>
-                  <td style="padding: 40px 32px;">
+                  <!-- Top Accent Bar -->
+                  <tr>
+                    <td height="4" bgcolor="#e94560" style="background-color: #e94560; font-size: 0; line-height: 0;">&nbsp;</td>
+                  </tr>
 
-                    <!-- Icon -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 24px;">
-                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
-                            &#9993;
-                          </div>
-                        </td>
-                      </tr>
-                    </table>
+                  <!-- Card Content -->
+                  <tr>
+                    <td style="padding: 40px 32px;" bgcolor="#1a1a2e">
 
-                    <!-- Heading -->
-                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
-                      Confirm Email Change
-                    </h1>
+                      <!-- Icon -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                              <tr>
+                                <td align="center" valign="middle" width="56" height="56" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 28px; font-size: 24px;">
+                                  &#9993;
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Subtext -->
-                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
-                      You requested to change your email address. Click the button below to confirm this change.
-                    </p>
+                      <!-- Heading -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 16px;">
+                            <h1 style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 1.3;">
+                              Confirm Email Change
+                            </h1>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- CTA Button -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 32px;">
-                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
-                            Confirm New Email
-                          </a>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Subtext -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; color: #9999aa; text-align: center; line-height: 1.6;">
+                              You requested to change your email address. Click the button below to confirm this change.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Info Notice -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
-                      <tr>
-                        <td style="padding: 16px;">
-                          <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
-                            &#128233; After confirming, you'll use your new email address to sign in to Sauci.
-                          </p>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- CTA Button -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <!--[if mso]>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ .ConfirmationURL }}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="25%" strokecolor="#e94560" fillcolor="#e94560">
+                            <w:anchorlock/>
+                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Confirm New Email</center>
+                            </v:roundrect>
+                            <![endif]-->
+                            <!--[if !mso]><!-->
+                            <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background-color: #e94560; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none;">
+                              Confirm New Email
+                            </a>
+                            <!--<![endif]-->
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Divider -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td style="padding: 24px 0;">
-                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Info Notice -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 8px;">
+                        <tr>
+                          <td style="padding: 16px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #8888aa; text-align: center; line-height: 1.5;">
+                              &#128233; After confirming, you'll use your new email address to sign in to Sauci.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Alternative Link -->
-                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
-                      If the button doesn't work, copy and paste this link into your browser:
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
-                      {{ .ConfirmationURL }}
-                    </p>
+                      <!-- Divider -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td style="padding: 24px 0;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td height="1" bgcolor="#333344" style="background-color: #333344; font-size: 0; line-height: 0;">&nbsp;</td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
+                      <!-- Alternative Link -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center">
+                            <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center; line-height: 1.6;">
+                              If the button doesn't work, copy and paste this link into your browser:
+                            </p>
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; text-align: center; word-break: break-all; line-height: 1.5;">
+                              <a href="{{ .ConfirmationURL }}" style="color: #e94560; text-decoration: underline;">{{ .ConfirmationURL }}</a>
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-          <!-- Footer -->
-          <tr>
-            <td style="padding: 32px 16px;">
-              <p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
-                Didn't request this change?
-              </p>
-              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
-                If you didn't request an email change, please secure your account by resetting your password immediately.
-              </p>
-            </td>
-          </tr>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-        </table>
-      </td>
+            <!-- Footer -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 32px 20px;">
+                <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center;">
+                  Didn't request this change?
+                </p>
+                <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; color: #555566; text-align: center;">
+                  If you didn't request an email change, please secure your account by resetting your password immediately.
+                </p>
+              </td>
+            </tr>
+
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
+
+          </table>
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+    </td>
     </tr>
-  </table>
+    </table>
+    <![endif]-->
+  </div>
 </body>
 </html>

apps/supabase/email-templates/invite.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <title>You're Invited to Sauci</title>
   <!--[if mso]>
   <noscript>
@@ -13,138 +15,213 @@
       </o:OfficeDocumentSettings>
     </xml>
   </noscript>
+  <style>
+    table { border-collapse: collapse; }
+    td { font-family: Arial, sans-serif; }
+  </style>
   <![endif]-->
+  <style>
+    body { margin: 0 !important; padding: 0 !important; }
+    table { border-spacing: 0 !important; border-collapse: collapse !important; }
+    td { padding: 0; }
+    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
+    a { text-decoration: none; }
+    @media only screen and (max-width: 600px) {
+      .email-container { width: 100% !important; }
+      .content-padding { padding-left: 20px !important; padding-right: 20px !important; }
+    }
+  </style>
 </head>
-<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
+<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #0d0d1a;">
+  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #0d0d1a;">
+    <!--[if mso]>
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#0d0d1a">
     <tr>
-      <td align="center" style="padding: 40px 20px;">
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
+    <td align="center">
+    <![endif]-->
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;" bgcolor="#0d0d1a">
+      <tr>
+        <td align="center" valign="top" bgcolor="#0d0d1a" style="background-color: #0d0d1a;">
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" class="email-container" style="margin: 0 auto;">
 
-          <!-- Logo Section -->
-          <tr>
-            <td align="center" style="padding-bottom: 32px;">
-              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                Sauci
-              </div>
-            </td>
-          </tr>
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
 
-          <!-- Main Card -->
-          <tr>
-            <td>
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
+            <!-- Logo Section -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 0 20px 24px 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
+                  <tr>
+                    <td align="center" bgcolor="#e94560" style="background-color: #e94560; padding: 16px 60px; border-radius: 8px;">
+                      <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Sauci</span>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-                <!-- Top Gradient Accent -->
-                <tr>
-                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
-                </tr>
+            <!-- Main Card -->
+            <tr>
+              <td class="content-padding" style="padding: 0 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#1a1a2e" style="background-color: #1a1a2e; border-radius: 16px;">
 
-                <!-- Card Content -->
-                <tr>
-                  <td style="padding: 40px 32px;">
+                  <!-- Top Accent Bar -->
+                  <tr>
+                    <td height="4" bgcolor="#e94560" style="background-color: #e94560; font-size: 0; line-height: 0;">&nbsp;</td>
+                  </tr>
 
-                    <!-- Icon -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 24px;">
-                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
-                            &#128149;
-                          </div>
-                        </td>
-                      </tr>
-                    </table>
+                  <!-- Card Content -->
+                  <tr>
+                    <td style="padding: 40px 32px;" bgcolor="#1a1a2e">
 
-                    <!-- Heading -->
-                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
-                      You've Been Invited
-                    </h1>
+                      <!-- Icon -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                              <tr>
+                                <td align="center" valign="middle" width="56" height="56" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 28px; font-size: 24px;">
+                                  &#128149;
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Subtext -->
-                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
-                      Someone special has invited you to join Sauci, the app designed to help couples deepen their connection and discover new things about each other.
-                    </p>
+                      <!-- Heading -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 16px;">
+                            <h1 style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 1.3;">
+                              You've Been Invited
+                            </h1>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- CTA Button -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 32px;">
-                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
-                            Accept Invitation
-                          </a>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Subtext -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; color: #9999aa; text-align: center; line-height: 1.6;">
+                              Someone special has invited you to join Sauci, the app designed to help couples deepen their connection and discover new things about each other.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Features Section -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(22, 33, 62, 0.6); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05);">
-                      <tr>
-                        <td style="padding: 20px;">
-                          <p style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; letter-spacing: 1px;">
-                            What awaits you
-                          </p>
-                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                            <tr>
-                              <td style="padding: 8px 0;">
-                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
-                                  &#128293; Thoughtful questions to spark conversations
-                                </p>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td style="padding: 8px 0;">
-                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
-                                  &#128140; Discover mutual interests with your partner
-                                </p>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td style="padding: 8px 0;">
-                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
-                                  &#128172; Private chats when you both match
-                                </p>
-                              </td>
-                            </tr>
-                          </table>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- CTA Button -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <!--[if mso]>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ .ConfirmationURL }}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="25%" strokecolor="#e94560" fillcolor="#e94560">
+                            <w:anchorlock/>
+                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Accept Invitation</center>
+                            </v:roundrect>
+                            <![endif]-->
+                            <!--[if !mso]><!-->
+                            <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background-color: #e94560; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none;">
+                              Accept Invitation
+                            </a>
+                            <!--<![endif]-->
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Divider -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td style="padding: 24px 0;">
-                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Features Section -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#222240" style="background-color: #222240; border-radius: 12px;">
+                        <tr>
+                          <td style="padding: 20px;">
+                            <p style="margin: 0 0 12px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; font-weight: 600; color: #9999aa; text-align: center; text-transform: uppercase; letter-spacing: 1px;">
+                              What awaits you
+                            </p>
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td style="padding: 8px 0;">
+                                  <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; color: #8888aa; text-align: center;">
+                                    &#128293; Thoughtful questions to spark conversations
+                                  </p>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="padding: 8px 0;">
+                                  <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; color: #8888aa; text-align: center;">
+                                    &#128140; Discover mutual interests with your partner
+                                  </p>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td style="padding: 8px 0;">
+                                  <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; color: #8888aa; text-align: center;">
+                                    &#128172; Private chats when you both match
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Alternative Link -->
-                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
-                      If the button doesn't work, copy and paste this link into your browser:
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
-                      {{ .ConfirmationURL }}
-                    </p>
+                      <!-- Divider -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td style="padding: 24px 0;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td height="1" bgcolor="#333344" style="background-color: #333344; font-size: 0; line-height: 0;">&nbsp;</td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
+                      <!-- Alternative Link -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center">
+                            <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center; line-height: 1.6;">
+                              If the button doesn't work, copy and paste this link into your browser:
+                            </p>
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; text-align: center; word-break: break-all; line-height: 1.5;">
+                              <a href="{{ .ConfirmationURL }}" style="color: #e94560; text-decoration: underline;">{{ .ConfirmationURL }}</a>
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-          <!-- Footer -->
-          <tr>
-            <td style="padding: 32px 16px;">
-              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
-                This invitation link will expire in 7 days. If you didn't expect this invitation, you can safely ignore this email.
-              </p>
-            </td>
-          </tr>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-        </table>
-      </td>
+            <!-- Footer -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 32px 20px;">
+                <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; color: #555566; text-align: center;">
+                  This invitation link will expire in 7 days. If you didn't expect this invitation, you can safely ignore this email.
+                </p>
+              </td>
+            </tr>
+
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
+
+          </table>
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+    </td>
     </tr>
-  </table>
+    </table>
+    <![endif]-->
+  </div>
 </body>
 </html>

apps/supabase/email-templates/magic-link.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <title>Sign In to Sauci</title>
   <!--[if mso]>
   <noscript>
@@ -13,115 +15,190 @@
       </o:OfficeDocumentSettings>
     </xml>
   </noscript>
+  <style>
+    table { border-collapse: collapse; }
+    td { font-family: Arial, sans-serif; }
+  </style>
   <![endif]-->
+  <style>
+    body { margin: 0 !important; padding: 0 !important; }
+    table { border-spacing: 0 !important; border-collapse: collapse !important; }
+    td { padding: 0; }
+    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
+    a { text-decoration: none; }
+    @media only screen and (max-width: 600px) {
+      .email-container { width: 100% !important; }
+      .content-padding { padding-left: 20px !important; padding-right: 20px !important; }
+    }
+  </style>
 </head>
-<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
+<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #0d0d1a;">
+  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #0d0d1a;">
+    <!--[if mso]>
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#0d0d1a">
     <tr>
-      <td align="center" style="padding: 40px 20px;">
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
+    <td align="center">
+    <![endif]-->
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;" bgcolor="#0d0d1a">
+      <tr>
+        <td align="center" valign="top" bgcolor="#0d0d1a" style="background-color: #0d0d1a;">
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" class="email-container" style="margin: 0 auto;">
 
-          <!-- Logo Section -->
-          <tr>
-            <td align="center" style="padding-bottom: 32px;">
-              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                Sauci
-              </div>
-            </td>
-          </tr>
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
 
-          <!-- Main Card -->
-          <tr>
-            <td>
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
+            <!-- Logo Section -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 0 20px 24px 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
+                  <tr>
+                    <td align="center" bgcolor="#e94560" style="background-color: #e94560; padding: 16px 60px; border-radius: 8px;">
+                      <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Sauci</span>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-                <!-- Top Gradient Accent -->
-                <tr>
-                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
-                </tr>
+            <!-- Main Card -->
+            <tr>
+              <td class="content-padding" style="padding: 0 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#1a1a2e" style="background-color: #1a1a2e; border-radius: 16px;">
 
-                <!-- Card Content -->
-                <tr>
-                  <td style="padding: 40px 32px;">
+                  <!-- Top Accent Bar -->
+                  <tr>
+                    <td height="4" bgcolor="#e94560" style="background-color: #e94560; font-size: 0; line-height: 0;">&nbsp;</td>
+                  </tr>
 
-                    <!-- Icon -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 24px;">
-                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
-                            &#10024;
-                          </div>
-                        </td>
-                      </tr>
-                    </table>
+                  <!-- Card Content -->
+                  <tr>
+                    <td style="padding: 40px 32px;" bgcolor="#1a1a2e">
 
-                    <!-- Heading -->
-                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
-                      Your Magic Link
-                    </h1>
+                      <!-- Icon -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                              <tr>
+                                <td align="center" valign="middle" width="56" height="56" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 28px; font-size: 24px;">
+                                  &#10024;
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Subtext -->
-                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
-                      Click the button below to securely sign in to your Sauci account. No password needed.
-                    </p>
+                      <!-- Heading -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 16px;">
+                            <h1 style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 1.3;">
+                              Your Magic Link
+                            </h1>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- CTA Button -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 32px;">
-                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
-                            Sign In to Sauci
-                          </a>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Subtext -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; color: #9999aa; text-align: center; line-height: 1.6;">
+                              Click the button below to securely sign in to your Sauci account. No password needed.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Security Notice -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(233, 69, 96, 0.08); border-radius: 8px; border: 1px solid rgba(233, 69, 96, 0.15);">
-                      <tr>
-                        <td style="padding: 16px;">
-                          <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
-                            &#128274; This link is unique to you and expires in 1 hour for your security.
-                          </p>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- CTA Button -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <!--[if mso]>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ .ConfirmationURL }}" style="height:48px;v-text-anchor:middle;width:180px;" arcsize="25%" strokecolor="#e94560" fillcolor="#e94560">
+                            <w:anchorlock/>
+                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Sign In to Sauci</center>
+                            </v:roundrect>
+                            <![endif]-->
+                            <!--[if !mso]><!-->
+                            <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background-color: #e94560; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none;">
+                              Sign In to Sauci
+                            </a>
+                            <!--<![endif]-->
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Divider -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td style="padding: 24px 0;">
-                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Security Notice -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 8px;">
+                        <tr>
+                          <td style="padding: 16px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #8888aa; text-align: center; line-height: 1.5;">
+                              &#128274; This link is unique to you and expires in 1 hour for your security.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Alternative Link -->
-                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
-                      If the button doesn't work, copy and paste this link into your browser:
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
-                      {{ .ConfirmationURL }}
-                    </p>
+                      <!-- Divider -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td style="padding: 24px 0;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td height="1" bgcolor="#333344" style="background-color: #333344; font-size: 0; line-height: 0;">&nbsp;</td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
+                      <!-- Alternative Link -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center">
+                            <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center; line-height: 1.6;">
+                              If the button doesn't work, copy and paste this link into your browser:
+                            </p>
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; text-align: center; word-break: break-all; line-height: 1.5;">
+                              <a href="{{ .ConfirmationURL }}" style="color: #e94560; text-decoration: underline;">{{ .ConfirmationURL }}</a>
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-          <!-- Footer -->
-          <tr>
-            <td style="padding: 32px 16px;">
-              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
-                If you didn't request this sign in link, you can safely ignore this email.
-              </p>
-            </td>
-          </tr>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-        </table>
-      </td>
+            <!-- Footer -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 32px 20px;">
+                <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; color: #555566; text-align: center;">
+                  If you didn't request this sign in link, you can safely ignore this email.
+                </p>
+              </td>
+            </tr>
+
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
+
+          </table>
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+    </td>
     </tr>
-  </table>
+    </table>
+    <![endif]-->
+  </div>
 </body>
 </html>

apps/supabase/email-templates/password-reset.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
   <title>Reset Your Password - Sauci</title>
   <!--[if mso]>
   <noscript>
@@ -13,118 +15,193 @@
       </o:OfficeDocumentSettings>
     </xml>
   </noscript>
+  <style>
+    table { border-collapse: collapse; }
+    td { font-family: Arial, sans-serif; }
+  </style>
   <![endif]-->
+  <style>
+    body { margin: 0 !important; padding: 0 !important; }
+    table { border-spacing: 0 !important; border-collapse: collapse !important; }
+    td { padding: 0; }
+    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
+    a { text-decoration: none; }
+    @media only screen and (max-width: 600px) {
+      .email-container { width: 100% !important; }
+      .content-padding { padding-left: 20px !important; padding-right: 20px !important; }
+    }
+  </style>
 </head>
-<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
+<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #0d0d1a;">
+  <div role="article" aria-roledescription="email" lang="en" style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #0d0d1a;">
+    <!--[if mso]>
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#0d0d1a">
     <tr>
-      <td align="center" style="padding: 40px 20px;">
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
+    <td align="center">
+    <![endif]-->
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;" bgcolor="#0d0d1a">
+      <tr>
+        <td align="center" valign="top" bgcolor="#0d0d1a" style="background-color: #0d0d1a;">
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" class="email-container" style="margin: 0 auto;">
 
-          <!-- Logo Section -->
-          <tr>
-            <td align="center" style="padding-bottom: 32px;">
-              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-                Sauci
-              </div>
-            </td>
-          </tr>
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
 
-          <!-- Main Card -->
-          <tr>
-            <td>
-              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
+            <!-- Logo Section -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 0 20px 24px 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
+                  <tr>
+                    <td align="center" bgcolor="#e94560" style="background-color: #e94560; padding: 16px 60px; border-radius: 8px;">
+                      <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">Sauci</span>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-                <!-- Top Gradient Accent -->
-                <tr>
-                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
-                </tr>
+            <!-- Main Card -->
+            <tr>
+              <td class="content-padding" style="padding: 0 20px;">
+                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#1a1a2e" style="background-color: #1a1a2e; border-radius: 16px;">
 
-                <!-- Card Content -->
-                <tr>
-                  <td style="padding: 40px 32px;">
+                  <!-- Top Accent Bar -->
+                  <tr>
+                    <td height="4" bgcolor="#e94560" style="background-color: #e94560; font-size: 0; line-height: 0;">&nbsp;</td>
+                  </tr>
 
-                    <!-- Icon -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 24px;">
-                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
-                            &#128272;
-                          </div>
-                        </td>
-                      </tr>
-                    </table>
+                  <!-- Card Content -->
+                  <tr>
+                    <td style="padding: 40px 32px;" bgcolor="#1a1a2e">
 
-                    <!-- Heading -->
-                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
-                      Reset Your Password
-                    </h1>
+                      <!-- Icon -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 24px;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                              <tr>
+                                <td align="center" valign="middle" width="56" height="56" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 28px; font-size: 24px;">
+                                  &#128272;
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Subtext -->
-                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
-                      We received a request to reset your password. Click the button below to choose a new one.
-                    </p>
+                      <!-- Heading -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 16px;">
+                            <h1 style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; line-height: 1.3;">
+                              Reset Your Password
+                            </h1>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- CTA Button -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td align="center" style="padding-bottom: 32px;">
-                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
-                            Reset Password
-                          </a>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Subtext -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; color: #9999aa; text-align: center; line-height: 1.6;">
+                              We received a request to reset your password. Click the button below to choose a new one.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Security Notice -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
-                      <tr>
-                        <td style="padding: 16px;">
-                          <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
-                            &#9200; This link expires in 1 hour. After resetting, you'll need to sign in again on all devices.
-                          </p>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- CTA Button -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center" style="padding-bottom: 32px;">
+                            <!--[if mso]>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ .ConfirmationURL }}" style="height:48px;v-text-anchor:middle;width:180px;" arcsize="25%" strokecolor="#e94560" fillcolor="#e94560">
+                            <w:anchorlock/>
+                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Reset Password</center>
+                            </v:roundrect>
+                            <![endif]-->
+                            <!--[if !mso]><!-->
+                            <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background-color: #e94560; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none;">
+                              Reset Password
+                            </a>
+                            <!--<![endif]-->
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Divider -->
-                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
-                      <tr>
-                        <td style="padding: 24px 0;">
-                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
-                        </td>
-                      </tr>
-                    </table>
+                      <!-- Security Notice -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#2a2a3e" style="background-color: #2a2a3e; border-radius: 8px;">
+                        <tr>
+                          <td style="padding: 16px;">
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #8888aa; text-align: center; line-height: 1.5;">
+                              &#9200; This link expires in 1 hour. After resetting, you'll need to sign in again on all devices.
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-                    <!-- Alternative Link -->
-                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
-                      If the button doesn't work, copy and paste this link into your browser:
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
-                      {{ .ConfirmationURL }}
-                    </p>
+                      <!-- Divider -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td style="padding: 24px 0;">
+                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                              <tr>
+                                <td height="1" bgcolor="#333344" style="background-color: #333344; font-size: 0; line-height: 0;">&nbsp;</td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </table>
 
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
+                      <!-- Alternative Link -->
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                          <td align="center">
+                            <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center; line-height: 1.6;">
+                              If the button doesn't work, copy and paste this link into your browser:
+                            </p>
+                            <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; text-align: center; word-break: break-all; line-height: 1.5;">
+                              <a href="{{ .ConfirmationURL }}" style="color: #e94560; text-decoration: underline;">{{ .ConfirmationURL }}</a>
+                            </p>
+                          </td>
+                        </tr>
+                      </table>
 
-          <!-- Footer -->
-          <tr>
-            <td style="padding: 32px 16px;">
-              <p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
-                Didn't request this?
-              </p>
-              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
-                If you didn't request a password reset, you can safely ignore this email. Your password won't change until you click the link above.
-              </p>
-            </td>
-          </tr>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
 
-        </table>
-      </td>
+            <!-- Footer -->
+            <tr>
+              <td align="center" bgcolor="#0d0d1a" style="background-color: #0d0d1a; padding: 32px 20px;">
+                <p style="margin: 0 0 8px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; color: #666677; text-align: center;">
+                  Didn't request this?
+                </p>
+                <p style="margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; color: #555566; text-align: center;">
+                  If you didn't request a password reset, you can safely ignore this email. Your password won't change until you click the link above.
+                </p>
+              </td>
+            </tr>
+
+            <!-- Spacer -->
+            <tr>
+              <td height="40" style="font-size: 0; line-height: 0;" bgcolor="#0d0d1a">&nbsp;</td>
+            </tr>
+
+          </table>
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+    </td>
     </tr>
-  </table>
+    </table>
+    <![endif]-->
+  </div>
 </body>
 </html>

apps/supabase/functions/manage-couple/index.ts

@@ -47,13 +47,28 @@ Deno.serve(async (req) => {
 
         if (method === "POST") {
             // Check if user is already in a couple
-            const { data: existingProfile } = await supabase
+            const { data: existingProfile, error: profileError } = await supabase
                 .from("profiles")
                 .select("couple_id")
                 .eq("id", user.id)
-                .single();
+                .maybeSingle();
 
-            if (existingProfile?.couple_id) {
+            if (profileError) {
+                console.error("Profile lookup error:", profileError);
+                return new Response(
+                    JSON.stringify({ error: "Failed to check profile" }),
+                    { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                );
+            }
+
+            if (!existingProfile) {
+                return new Response(
+                    JSON.stringify({ error: "Profile not found. Please complete signup first." }),
+                    { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                );
+            }
+
+            if (existingProfile.couple_id) {
                 return new Response(
                     JSON.stringify({ error: "You are already in a couple" }),
                     { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
@@ -67,27 +82,28 @@ Deno.serve(async (req) => {
                 const { invite_code }: JoinCoupleBody = body;
 
                 // Validate invite code format (alphanumeric, 8 chars)
-                const sanitizedCode = invite_code.trim().toUpperCase();
-                if (!/^[A-Z0-9]{8}$/.test(sanitizedCode)) {
+                const sanitizedCode = invite_code.trim().toLowerCase();
+                if (!/^[a-z0-9]{8}$/.test(sanitizedCode)) {
                     return new Response(
                         JSON.stringify({ error: "Invalid invite code format" }),
                         { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
                     );
                 }
 
-                // Use secure RPC function for invite code verification
-                const { data: verifyResult, error: verifyError } = await supabase
-                    .rpc("verify_invite_code", { code: sanitizedCode });
+                // Find couple by invite code (stored as lowercase in DB)
+                const { data: couple, error: coupleError } = await supabase
+                    .from("couples")
+                    .select("id")
+                    .eq("invite_code", sanitizedCode)
+                    .maybeSingle();
 
-                if (verifyError || !verifyResult?.valid) {
+                if (coupleError || !couple) {
                     return new Response(
-                        JSON.stringify({ error: verifyResult?.error || "Invalid invite code" }),
+                        JSON.stringify({ error: "Invalid invite code" }),
                         { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
                     );
                 }
 
-                const couple = { id: verifyResult.couple_id };
-
                 // Check if couple already has 2 members
                 const { count } = await supabase
                     .from("profiles")
@@ -151,21 +167,62 @@ Deno.serve(async (req) => {
         }
 
         if (method === "DELETE") {
-            // Leave couple
-            const { error } = await supabase
+            // Get user's current couple
+            const { data: profile, error: profileFetchError } = await supabase
+                .from("profiles")
+                .select("couple_id")
+                .eq("id", user.id)
+                .maybeSingle();
+
+            if (profileFetchError || !profile?.couple_id) {
+                return new Response(
+                    JSON.stringify({ error: "You are not in a couple" }),
+                    { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                );
+            }
+
+            const coupleId = profile.couple_id;
+
+            // Count members in this couple
+            const { count, error: countError } = await supabase
+                .from("profiles")
+                .select("*", { count: "exact", head: true })
+                .eq("couple_id", coupleId);
+
+            if (countError) {
+                return new Response(
+                    JSON.stringify({ error: "Failed to check couple members" }),
+                    { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+                );
+            }
+
+            // Remove ALL members from couple (both partners get unlinked)
+            // This ensures the remaining partner isn't left in a "waiting" state
+            const { error: updateError } = await supabase
                 .from("profiles")
                 .update({ couple_id: null })
-                .eq("id", user.id);
+                .eq("couple_id", coupleId);
 
-            if (error) {
+            if (updateError) {
                 return new Response(
                     JSON.stringify({ error: "Failed to leave couple" }),
                     { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
                 );
             }
 
+            // Delete the couple entirely (cascades to all related data)
+            const { error: deleteError } = await supabase
+                .from("couples")
+                .delete()
+                .eq("id", coupleId);
+
+            if (deleteError) {
+                console.error("Failed to delete couple:", deleteError);
+                // Don't fail the request, users already unlinked
+            }
+
             return new Response(
-                JSON.stringify({ success: true }),
+                JSON.stringify({ success: true, couple_deleted: true }),
                 { headers: { ...corsHeaders, "Content-Type": "application/json" } }
             );
         }

apps/supabase/migrations/20251230000000_v1_initial_schema.sql

@@ -673,10 +673,10 @@ CREATE TRIGGER on_new_message
   AFTER INSERT ON messages
   FOR EACH ROW EXECUTE FUNCTION notify_new_message();
 
--- Auth trigger (in auth schema - handled separately by Supabase)
--- CREATE TRIGGER on_auth_user_created
---   AFTER INSERT ON auth.users
---   FOR EACH ROW EXECUTE FUNCTION handle_new_user();
+-- Auth trigger to create profile on signup
+CREATE TRIGGER on_auth_user_created
+  AFTER INSERT ON auth.users
+  FOR EACH ROW EXECUTE FUNCTION handle_new_user();
 
 -- ============================================================================
 -- ENABLE ROW LEVEL SECURITY