feat(frontend): redesign loyalty stamp card on account page

Restructure loyalty card: show completed-card banner above card, support multi-card display (stamps % 10), move from gradient to flat bg, update text to reflect multi-card and remaining stamps.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/routes/account/+page.svelte

@@ -1439,16 +1439,27 @@
 
 							{#if authStore.currentUser?.role !== 'admin'}
 								<Separator class="my-4" />
+
+								{#if stamps >= 10}
+									<div
+										class="mb-3 rounded-xl border-2 border-emerald-200 bg-emerald-50 p-4 text-center"
+									>
+										<p class="text-sm font-bold tracking-wide text-emerald-800">
+											Card Completed — 10% Off Your Next Booking!
+										</p>
+									</div>
+								{/if}
+
 								<div
-									class="rounded-xl border-2 border-fuchsia-200 bg-gradient-to-br from-fuchsia-50 via-fuchsia-100/30 to-fuchsia-50 p-5 sm:p-6"
+									class="rounded-xl border-2 border-fuchsia-200 bg-fuchsia-50 p-5 sm:p-6"
 								>
 									{#if userData}
 										<div class="mb-5 text-center sm:text-left">
 											<h3 class="text-sm font-semibold text-gray-900">Loyalty Stamp Card</h3>
 											<p class="mt-0.5 text-xs text-gray-500">
 												{stamps < 10
-													? 'Collect 10 stamps to get 10% off your next booking.'
+													? `Collect ${10 - stamps} more stamp${10 - stamps === 1 ? '' : 's'} to get 10% off your next booking.`
-													: 'Your card is full — enjoy 10% off your next service!'}
+													: (() => { const fc = Math.floor(stamps / 10); return `You have ${fc === 1 ? 'a' : fc} full stampcard${fc === 1 ? '' : 's'} ready to take advantage of at your next booking!`; })()}
 											</p>
 										</div>
 
@@ -1456,7 +1467,7 @@
 											{#each Array(10) as _, i}
 												{@const slotNum = i + 1}
 												{@const rot = ((slotNum * 37 + 13) % 7) - 3}
-												{#if slotNum <= stamps}
+												{#if slotNum <= (stamps > 0 ? (stamps % 10 || 10) : 0)}
 													<div
 														class="aspect-square transition-transform duration-200 hover:scale-110"
 													>
@@ -1508,16 +1519,6 @@
 												{/if}
 											{/each}
 										</div>
-
-										{#if stamps >= 10}
-											<div
-												class="mt-5 rounded-lg bg-gradient-to-r from-fuchsia-500 to-pink-500 px-4 py-3 text-center"
-											>
-												<p class="text-sm font-bold tracking-wide text-white">
-													🎉 Card Completed — 10% Off Your Next Booking!
-												</p>
-											</div>
-										{/if}
 									{/if}
 								</div>
 							{/if}
@@ -1706,7 +1707,7 @@
 							</div>
 
 							<Card.Root
-								class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50"
+								class="mt-6 border-amber-200/60 bg-amber-50"
 							>
 								<Card.Content class="pt-4 md:pt-6">
 									<div class="space-y-2 text-sm text-amber-900">