fix token login member

frontend/src/routes/join/[code]/[member]/+page.svelte

@@ -1,24 +1,45 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { enhance } from '$app/forms';
+	import { AuthShell } from '$lib/components';
 
 	let { form } = $props();
 	let memberName = $derived(page.params.member);
 </script>
 
-<h1>Join family</h1>
+<AuthShell
+	title="Join as {memberName}"
+	subtitle="You've been invited to your family's chore board. One tap and you're in."
+>
+	{#if form?.error}
+		<p class="form-error">{form.error}</p>
+	{/if}
 
-{#if form?.error}
-	<p class="error">{form.error}</p>
-{:else}
-	<p>Click below to join as <strong>{memberName}</strong></p>
-{/if}
-
-<form method="POST" use:enhance>
-	<button type="submit">Join</button>
-</form>
+	<form method="POST" use:enhance>
+		<button type="submit">Join as {memberName}</button>
+	</form>
+</AuthShell>
 
 <style>
-	.error { color: #dc2626; padding: 0.5rem; background: #fef2f2; border-radius: 4px; }
-	button { padding: 0.75rem 1.5rem; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
+	button {
+		width: 100%;
+		background: #4338ca;
+		color: #fff;
+		border: none;
+		border-radius: 8px;
+		padding: 0.75rem;
+		font-size: 1rem;
+		font-weight: 600;
+		cursor: pointer;
+	}
+	button:hover { background: #3730a3; }
+	.form-error {
+		background: #fef2f2;
+		color: #b91c1c;
+		border: 1px solid #fecaca;
+		border-radius: 8px;
+		padding: 0.6rem 0.75rem;
+		font-size: 0.85rem;
+		margin: 0 0 1rem;
+	}
 </style>