style: convert remaining ad-hoc inline cards to shared SurfaceCard

Introduce components/surface-card.tsx (Card + CardBody) mirroring the
.content-card / SectionCard token set, and use it on the (site) pages that
still hand-rolled card markup: me, search, and verify. This puts every
public page on one of the shared card components (ContentCard, SectionCard,
or SurfaceCard) for consistent radius/shadow/border.

src/app/(site)/verify/page.tsx

@@ -3,6 +3,7 @@ import { CheckCircle2, Clock, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, User } from "@/lib/db";
 
 type Status = "verified" | "already" | "invalid" | "unavailable";
@@ -30,15 +31,7 @@ function StatusCard({
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
-			<div
-				className="w-full max-w-md overflow-hidden rounded-2xl border"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					backgroundColor: "var(--color-surface)",
-					boxShadow: "var(--shadow-card)",
-				}}
-			>
+			<SurfaceCard className="w-full max-w-md">
 				<div
 					className="flex items-center gap-2.5 border-b px-5 py-4"
 					style={{
@@ -81,7 +74,7 @@ function StatusCard({
 					</p>
 					{children}
 				</div>
-			</div>
+			</SurfaceCard>
 		</main>
 	);
 }