Loyalty Card updates

1. Card title fix: The "top-right text" feature was renamed and repositioned to be the actual card title (top-left, replacing the hardcoded "Loyalty Card"), matching what you asked for. This included a proper database migration (cardTopRightText → cardTitleText, etc., using CHANGE COLUMN so any already-configured value is preserved, not dropped) and updates through every layer — schema, service, owner form, and both the owner preview and customer-facing card. Verified live: typed "VIP Rewards" into the new "Card title" field and confirmed it renders top-left on both the owner's live preview and the real customer loyalty page, with the member number staying in its own badge top-right.

2. Tabs: The long "Card Appearance" control list is now split into Colours / Stamp / Text tabs (using the same Tabs component used elsewhere in the app), exactly as you suggested — Colours holds every colour + the background image, Stamp holds just the icon picker, Text holds the title, font, size, and terms line.

Along the way, while running full E2E regression, I found 6 test failures — but traced them via git stash to prove they're pre-existing bugs unrelated to this change (a booking/appointments-list bug), so I reverted-then-confirmed before restoring my work, and filed a separate follow-up task for them rather than mixing it into this change.

Both fixes are typechecked, linted, verified with the full unit (253) and integration (185) suites, confirmed live in a real browser end-to-end, and deployed to your running Docker container — the migration applied cleanly against your real database with no data loss.

src/app/(customer)/home/page.tsx

@@ -143,17 +143,17 @@ export default async function CustomerHomePage() {
     <div>
       {/* Hero — an owner-managed gallery (see /owner/settings/gallery), matching the content width rather than bleeding edge-to-edge. */}
       {heroGalleryImages.length > 0 && (
-        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white">
+        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white border-line border-b">
           <ImageGallery images={heroGalleryImages} />
         </div>
       )}
 
       <main className="mx-auto max-w-2xl bg-white px-6 py-6">
-        {session?.user && (
+        {/* {session?.user && (
           <p className="text-muted mb-1 text-sm">
             Good to see you, {session.user.name?.split(" ")[0] ?? "there"}
           </p>
-        )}
+        )} */}
         <h1 className="mb-1 text-2xl font-bold tracking-tight">{business.name}</h1>
         {location && (
           <p className="text-muted mb-3 text-xs">
@@ -176,9 +176,11 @@ export default async function CustomerHomePage() {
         {/* Upcoming appointment */}
         {upcomingAppointment && (
           <section className="mb-6">
+            {session?.user && (
             <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
-              Your Next Visit
-            </h2>
+           {session.user.name?.split(" ")[0] ?? "Your Next Appointment"}, Your Next Appointment
+           </h2>
+        )}
             <AppointmentCard
               status={STATUS_MAP[upcomingAppointment.status] ?? "confirmed"}
               serviceName={upcomingAppointment.services.map((s) => s.service.name).join(" + ")}