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)/search/page.tsx

@@ -2,6 +2,7 @@ import { and, eq, like } from "drizzle-orm";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, Rooms, User } from "@/lib/db";
 
 export const metadata: Metadata = { title: "Search" };
@@ -18,21 +19,14 @@ export default async function SearchPage({
 
 	if (!query) {
 		return (
-			<div
-				className="rounded-2xl border p-10 text-center"
-				style={{
-					background: "var(--color-surface)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-				}}
-			>
+			<SurfaceCard className="p-10 text-center">
 				<p
 					className="text-sm font-bold"
 					style={{ color: "var(--color-text-muted)" }}
 				>
 					Enter a search term to find users.
 				</p>
-			</div>
+			</SurfaceCard>
 		);
 	}
 
@@ -66,14 +60,7 @@ export default async function SearchPage({
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div
-				className="rounded-2xl border p-4"
-				style={{
-					background: "var(--color-surface)",
-					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-				}}
-			>
+			<SurfaceCard className="p-4">
 				<form action="/search" method="GET" className="flex gap-2">
 					<input
 						type="text"
@@ -99,7 +86,7 @@ export default async function SearchPage({
 						Search
 					</button>
 				</form>
-			</div>
+			</SurfaceCard>
 
 			<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 				Results for &quot;{query}&quot; — {users.length} user
@@ -109,14 +96,7 @@ export default async function SearchPage({
 			</p>
 
 			{users.length > 0 && (
-				<div
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
+				<SurfaceCard className="p-5">
 					<h2
 						className="text-lg font-black tracking-tight mb-4"
 						style={{ color: "var(--color-text-readable)" }}
@@ -155,18 +135,11 @@ export default async function SearchPage({
 							</Link>
 						))}
 					</div>
-				</div>
+				</SurfaceCard>
 			)}
 
 			{rooms.length > 0 && (
-				<div
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
+				<SurfaceCard className="p-5">
 					<h2
 						className="text-lg font-black tracking-tight mb-4"
 						style={{ color: "var(--color-text-readable)" }}
@@ -201,25 +174,18 @@ export default async function SearchPage({
 							</Link>
 						))}
 					</div>
-				</div>
+				</SurfaceCard>
 			)}
 
 			{users.length === 0 && rooms.length === 0 && (
-				<div
-					className="rounded-2xl border p-10 text-center"
-					style={{
-						background: "var(--color-surface)",
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
+				<SurfaceCard className="p-10 text-center">
 					<p
 						className="text-sm font-bold"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						No users or rooms found for &quot;{query}&quot;.
 					</p>
-				</div>
+				</SurfaceCard>
 			)}
 		</div>
 	);