style(account): apply proto2 surfaces

app/(account)/notifications/page.tsx

@@ -24,7 +24,7 @@ const typeLabels: Record<Notification["type"], string> = {
 function NotificationItem({ notification }: { notification: Notification }) {
   const Icon = typeIcons[notification.type]
   const content = (
-    <div className="flex items-start gap-3 rounded-md border p-3 hover:bg-muted/50 transition-colors">
+    <Card className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors shadow-none">
       <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
         <Icon className="h-4 w-4" />
       </div>
@@ -41,9 +41,8 @@ function NotificationItem({ notification }: { notification: Notification }) {
       <Badge variant="outline" className="text-[10px] shrink-0">
         {typeLabels[notification.type]}
       </Badge>
-    </div>
+    </Card>
   )
-
   return notification.link ? <Link href={notification.link}>{content}</Link> : content
 }
 
@@ -56,7 +55,7 @@ export default function NotificationsPage() {
   const systemNotifs = notifications.filter((notification) => notification.type === "system")
 
   return (
-    <div className="max-w-2xl mx-auto space-y-6">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <h1 className="text-2xl font-bold">通知中心</h1>