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>

app/(account)/settings/page.tsx

@@ -34,7 +34,7 @@ export default function SettingsPage() {
   const isRoleVerified = (role: UserRole) => verifiedRoles.includes(role)
 
   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">
       <h1 className="text-2xl font-bold">个人设置</h1>
 
       <Card>

app/(account)/verify/page.tsx

@@ -57,7 +57,7 @@ export default function VerifyPage() {
   ]
 
   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">
       <h1 className="text-2xl font-bold">身份认证</h1>
 
       <Card>
@@ -86,7 +86,7 @@ export default function VerifyPage() {
             const reason = verificationReasons[item.role]
 
             return (
-              <div key={item.role} className="rounded-md border p-3 space-y-2">
+              <Card key={item.role} className="p-3 space-y-2 shadow-none">
                 <div className="flex items-center justify-between">
                   <span className="text-sm font-medium">{item.label}</span>
                   {status === "approved" || verifiedRoles.includes(item.role) ? (
@@ -123,7 +123,7 @@ export default function VerifyPage() {
                     重新提交
                   </Button>
                 )}
-              </div>
+              </Card>
             )
           })}
         </CardContent>

app/(account)/wallet/page.tsx

@@ -74,7 +74,7 @@ export default function WalletPage() {
   }
 
   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">
       <h1 className="text-2xl font-bold">钱包</h1>
 
       <Card>