style(order): apply proto2 surfaces

app/(order)/chat/[id]/page.tsx

@@ -7,6 +7,7 @@ import { use, useMemo, useRef, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { sendImageMessage, sendTextMessage } from "@/lib/api/chat"
@@ -60,8 +61,9 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
   const other = session.participants.find((p) => p.id !== userId) ?? session.participants[0]
 
   return (
-    <div className="flex flex-col h-[calc(100vh-3.5rem)]">
-      <div className="border-b px-4 py-3 flex items-center gap-3">
+    <div className="container mx-auto max-w-3xl px-4 py-8 h-[calc(100vh-3.5rem)] flex flex-col">
+      <Card className="flex-1 flex flex-col overflow-hidden hover:shadow-[var(--shadow-card)]">
+        <div className="border-b px-4 py-3 flex items-center gap-3 bg-muted/30">
           <Link href="/chat" className="text-muted-foreground hover:text-foreground">
             <ArrowLeft className="h-5 w-5" />
           </Link>
@@ -86,7 +88,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
       </div>
 
       <ScrollArea className="flex-1 p-4">
-        <div className="space-y-4 max-w-2xl mx-auto">
+        <div className="space-y-4">
           {messages.map((msg) => {
             if (msg.type === "system") {
               return (
@@ -138,7 +140,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
       </ScrollArea>
 
       {!session.readonly ? (
-        <div className="border-t p-4">
+        <div className="border-t p-4 bg-muted/30">
           <input
             ref={imageInputRef}
             type="file"
@@ -153,7 +155,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
             }}
           />
           <form
-            className="flex gap-2 max-w-2xl mx-auto"
+            className="flex gap-2"
             onSubmit={(e) => {
               e.preventDefault()
               const text = input.trim()
@@ -187,11 +189,12 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
           </form>
         </div>
       ) : (
-        <div className="border-t p-4 text-center text-sm text-muted-foreground">
+        <div className="border-t p-4 text-center text-sm text-muted-foreground bg-muted/30">
           <Lock className="h-4 w-4 inline mr-1" />
           订单已关闭，会话为只读状态
         </div>
       )}
+      </Card>
     </div>
   )
 }

app/(order)/chat/page.tsx

@@ -13,17 +13,17 @@ export default function ChatListPage() {
   const userId = useAuthStore((state) => state.user?.id)
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-2xl">
-      <h1 className="text-2xl font-bold mb-6">消息</h1>
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+      <h1 className="text-2xl font-bold">消息</h1>
 
-      <div className="space-y-3">
+      <div className="space-y-4">
         {sessions.map((session) => {
           const other =
             session.participants.find((participant) => participant.id !== userId) ??
             session.participants[0]
           return (
             <Link key={session.id} href={`/chat/${session.id}`}>
-              <Card className="hover:bg-accent/30 transition-colors">
+              <Card>
                 <CardContent className="flex items-center gap-3 py-3">
                   <Avatar className="h-10 w-10">
                     <AvatarImage src={other.avatar} />
@@ -58,7 +58,7 @@ export default function ChatListPage() {
         })}
 
         {sessions.length === 0 && (
-          <Card>
+          <Card className="hover:shadow-[var(--shadow-card)]">
             <CardContent className="py-8 text-center text-sm text-muted-foreground">
               <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
               暂无消息

app/(order)/dispute/[id]/page.tsx

@@ -150,16 +150,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
       isParticipant && existingDispute.status === "resolved" && !existingDispute.appealedAt
 
     return (
-      <div className="container mx-auto py-8 px-4 max-w-2xl">
+      <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
         <Link
           href={`/order/${id}`}
-          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
           返回订单
         </Link>
 
-        <Card>
+        <Card className="hover:shadow-[var(--shadow-card)]">
           <CardHeader>
             <div className="flex items-center justify-between">
               <CardTitle>争议详情</CardTitle>
@@ -384,16 +384,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-lg">
+    <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
       <Link
         href={`/order/${id}`}
-        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
       >
         <ArrowLeft className="h-4 w-4" />
         返回订单
       </Link>
 
-      <Card>
+      <Card className="hover:shadow-[var(--shadow-card)]">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <AlertTriangle className="h-5 w-5 text-yellow-500" />

app/(order)/orders/page.tsx

@@ -103,8 +103,8 @@ function OrderListContent({
   })
 
   return (
-    <div className="container mx-auto py-8 px-4">
-      <div className="flex items-center justify-between mb-6">
+    <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
+      <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">我的订单</h1>
         <Badge variant="outline" className="text-xs">
           {currentRole === "consumer"
@@ -124,16 +124,16 @@ function OrderListContent({
           ))}
         </TabsList>
 
-        <TabsContent value={tab} className="mt-4 space-y-3">
+        <TabsContent value={tab} className="mt-4 space-y-4">
           {filtered.length === 0 ? (
-            <Card>
+            <Card className="hover:shadow-[var(--shadow-card)]">
               <CardContent className="py-8 text-center text-sm text-muted-foreground">
                 暂无订单
               </CardContent>
             </Card>
           ) : (
             filtered.map((order) => (
-              <Card key={order.id}>
+              <Card key={order.id} className="hover:shadow-[var(--shadow-card)]">
                 <CardHeader className="pb-3">
                   <div className="flex items-center justify-between">
                     <CardTitle className="text-base">{order.service.title}</CardTitle>

app/(order)/review/[id]/page.tsx

@@ -77,16 +77,16 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-lg">
+    <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
       <Link
         href={`/order/${id}`}
-        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
       >
         <ArrowLeft className="h-4 w-4" />
         返回订单
       </Link>
 
-      <Card>
+      <Card className="hover:shadow-[var(--shadow-card)]">
         <CardHeader>
           <CardTitle>评价服务</CardTitle>
           <p className="text-sm text-muted-foreground">