style: unify remaining site card headers with SectionCard

Convert the settings page neon gradient section headers (blue/purple/green)
to the shared SectionCard, and replace the verify page's harsh multi-stop
status gradients with subtle status-tinted headers while keeping the
green/amber/red/blue semantics. The me page already used a consistent
rounded-2xl card style, so it needed no change.

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

@@ -20,38 +20,56 @@ function StatusCard({
 	children: React.ReactNode;
 	color: string;
 }) {
-	const gradientMap: Record<string, string> = {
+	const tintMap: Record<string, string> = {
-		green:
+		green: "#16a34a",
-			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow: "#d97706",
-		yellow:
+		red: "#dc2626",
-			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		blue: "#2563eb",
-		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
-		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
 	};
+	const tint = tintMap[color] ?? tintMap.blue;
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
 			<div
-				className="w-full max-w-md overflow-hidden rounded-xl border"
+				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:
+						"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 				}}
 			>
 				<div
-					className="flex items-center gap-2.5 px-5 py-4"
+					className="flex items-center gap-2.5 border-b px-5 py-4"
-					style={{ background: gradientMap[color] ?? gradientMap.blue }}
+					style={{
+						background: `color-mix(in srgb, ${tint} 12%, var(--color-surface))`,
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
 				>
-					<span className="text-white">{icon}</span>
+					<span
-					<h1 className="text-sm font-bold text-white">{title}</h1>
+						className="flex h-7 w-7 items-center justify-center rounded-lg"
+						style={{
+							background: `color-mix(in srgb, ${tint} 18%, transparent)`,
+							color: tint,
+						}}
+					>
+						{icon}
+					</span>
+					<h1
+						className="text-sm font-bold tracking-tight"
+						style={{ color: "var(--color-text-readable)" }}
+					>
+						{title}
+					</h1>
 				</div>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background:
+							background: `color-mix(in srgb, ${tint} 12%, transparent)`,
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							color: tint,
 						}}
 					>
 						{icon}